/* =====================================================================
   MUTUELLE DE DÉVELOPPEMENT DE BAMORO
   Orange, blanc, vert. Les dégradés sont saccadés : chaque couleur
   occupe sa bande et cède la place net, sans fondu.
   ===================================================================== */

:root {
  --orange:       #F77F00;
  --orange-vif:   #E85D04;
  --terre:        #B5470A;
  --orange-clair: #FFB25C;
  --vert:         #009E60;
  --vert-clair:   #3FBF85;
  --vert-fonce:   #00674A;
  --vert-nuit:    #0B3A28;
  --encre:        #14241C;
  --encre-clair:  #3D584B;
  --fond:         #FFFDF8;
  --surface:      #FFFFFF;
  --ligne:        #E4EAE2;
  --rouge:        #C0392B;
  --gris:         #7C8C83;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* la bande du drapeau, motif de base de l'application */
  --drapeau: repeating-linear-gradient(90deg,
              var(--orange) 0 18px, #FFF4E2 18px 36px, var(--vert) 36px 54px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 14px/1.5 var(--sans);
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; letter-spacing: -.02em; }
code { font-family: var(--mono); font-size: .92em; }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------------------------------------------------------------- fond */
.fond-decor, .fond-photo {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}
.fond-decor .couche { position: absolute; inset: 0; }
.fond-decor .horizon { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 190px; }
.fond-photo { background-size: cover; background-position: center; opacity: .08; }

.page { position: relative; z-index: 1; display: flex; min-height: 100vh; }

/* ------------------------------------------------------ barre latérale */
.barre {
  width: 250px; flex: 0 0 250px;
  /* quatre marches de vert sombre, la cassure visible */
  background: linear-gradient(168deg,
    #12503A 0% 25%, #0F4431 25% 50%, #0B3A28 50% 75%, #082F20 75% 100%);
  color: #fff; display: flex; flex-direction: column;
}
.barre .bande { height: 6px; background: var(--drapeau); }
.titre-assoc { padding: 18px 18px 14px; position: relative; }
.titre-assoc .nom { font-size: 16px; font-weight: 800; line-height: 1.2; }
.titre-assoc .lieu { font-family: var(--mono); font-size: 10.5px; color: var(--orange-clair); margin-top: 5px; letter-spacing: .09em; }
.quitter-compact { display: none; }

.identite {
  display: flex; align-items: center; gap: 10px;
  margin: 0 14px 14px; padding: 9px 11px;
  background: rgba(255,255,255,.09); border-radius: 12px;
}
.identite .rond {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px;
  background: var(--orange-clair); color: var(--encre);
  display: grid; place-items: center; font-size: 15px;
}
.identite .qui { min-width: 0; }
.identite b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.identite span { display: block; font-family: var(--mono); font-size: 10.5px; color: rgba(255,255,255,.6); }

.barre nav { display: flex; flex-direction: column; gap: 5px; padding: 0 12px 14px; }
.onglet {
  padding: 9px 14px; border-radius: 22px; font-size: 13.5px; font-weight: 600;
  color: rgba(255,255,255,.72); white-space: nowrap;
}
.onglet:hover { background: rgba(255,255,255,.08); color: #fff; }
.onglet.actif { font-weight: 800; color: #fff; }
.onglet.actif.encre        { background: var(--orange-clair); color: var(--encre); }
.onglet.actif.gris         { background: var(--orange-clair); color: var(--encre); }
.onglet.actif.vert-fonce   { background: var(--vert-clair);   color: var(--encre); }
.onglet.actif.vert         { background: var(--vert); }
.onglet.actif.orange       { background: var(--orange); }
.onglet.actif.orange-vif   { background: var(--orange-vif); }
.onglet.actif.terre        { background: var(--terre); }
.onglet.actif.rouge        { background: var(--rouge); }

.quitter { margin-top: auto; padding: 16px 26px 24px; font-size: 13px; color: rgba(255,255,255,.6); }
.quitter:hover { color: #fff; }

main { flex: 1; min-width: 0; padding: 26px 28px 60px; }

/* --------------------------------------------------------- titre de page */
.titre-page {
  position: relative; display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 14px; margin-bottom: 22px;
}
.titre-page > div { position: relative; z-index: 1; }
.titre-page h1 { font-size: 26px; font-weight: 800; }
.sous-titre { font-family: var(--mono); font-size: 12px; color: var(--gris); margin: 6px 0 0; }

/* soulignement : trois bandes franches, à la manière du drapeau */
.drapeau {
  width: 62px; height: 7px; border-radius: 7px; margin-bottom: 11px;
  box-shadow: inset 0 0 0 1.2px rgba(20,36,28,.16);
  background: linear-gradient(90deg, var(--encre) 0 33.33%, #fff 33.33% 66.66%, var(--vert) 66.66% 100%);
}
.drapeau.vert       { background: linear-gradient(90deg, var(--vert) 0 33.33%, #fff 33.33% 66.66%, var(--orange) 66.66% 100%); }
.drapeau.vert-fonce { background: linear-gradient(90deg, var(--vert-fonce) 0 33.33%, #fff 33.33% 66.66%, var(--orange) 66.66% 100%); }
.drapeau.orange     { background: linear-gradient(90deg, var(--orange) 0 33.33%, #fff 33.33% 66.66%, var(--vert) 66.66% 100%); }
.drapeau.orange-vif { background: linear-gradient(90deg, var(--orange-vif) 0 33.33%, #fff 33.33% 66.66%, var(--vert) 66.66% 100%); }
.drapeau.terre      { background: linear-gradient(90deg, var(--terre) 0 33.33%, #fff 33.33% 66.66%, var(--vert) 66.66% 100%); }
.drapeau.rouge      { background: linear-gradient(90deg, var(--rouge) 0 33.33%, #fff 33.33% 66.66%, var(--vert) 66.66% 100%); }
.drapeau.gris       { background: linear-gradient(90deg, var(--gris) 0 33.33%, #fff 33.33% 66.66%, var(--vert) 66.66% 100%); }

.filigrane { position: absolute; right: -10px; top: -34px; width: 168px; height: 168px; opacity: .075; pointer-events: none; }
.filigrane.encre, .filigrane.gris { stroke: var(--encre); }
.filigrane.vert { stroke: var(--vert); }
.filigrane.vert-fonce { stroke: var(--vert-fonce); }
.filigrane.orange { stroke: var(--orange); }
.filigrane.orange-vif { stroke: var(--orange-vif); }
.filigrane.terre { stroke: var(--terre); }
.filigrane.rouge { stroke: var(--rouge); }

/* -------------------------------------------------------------- cartes */
.carte {
  background: var(--surface); border: 1.5px solid var(--ligne);
  border-radius: 14px; overflow: hidden; margin-bottom: 18px;
}
.carte > .liseré, .liseré { height: 4px; }
.liseré.vert       { background: repeating-linear-gradient(90deg, var(--vert) 0 13px, #009E6099 13px 26px); }
.liseré.vert-fonce { background: repeating-linear-gradient(90deg, var(--vert-fonce) 0 13px, #00674A99 13px 26px); }
.liseré.orange     { background: repeating-linear-gradient(90deg, var(--orange) 0 13px, #F77F0099 13px 26px); }
.liseré.orange-vif { background: repeating-linear-gradient(90deg, var(--orange-vif) 0 13px, #E85D0499 13px 26px); }
.liseré.terre      { background: repeating-linear-gradient(90deg, var(--terre) 0 13px, #B5470A99 13px 26px); }
.liseré.rouge      { background: repeating-linear-gradient(90deg, var(--rouge) 0 13px, #C0392B99 13px 26px); }
.liseré.orange-clair { background: repeating-linear-gradient(90deg, var(--orange-clair) 0 13px, #FFB25C99 13px 26px); }
.carte .dedans { padding: 16px 18px; }
.carte .entete-carte {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-bottom: 1.5px solid var(--ligne);
}

.etiquette {
  font-size: 10.5px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--gris);
}

.grille { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.chiffre { font-family: var(--mono); font-size: 28px; font-weight: 800; letter-spacing: -.03em; }
.chiffre.grand { font-size: 40px; }
.chiffre.vert { color: var(--vert); }
.chiffre.orange { color: var(--orange); }
.chiffre.rouge { color: var(--rouge); }
.legende { font-size: 12px; color: var(--gris); }

/* ------------------------------------------------------------ pastilles */
.matricule, .personne .mat {
  font-family: var(--mono); font-size: 11.5px; font-weight: 800;
  letter-spacing: .05em; white-space: nowrap;
}
.matricule { padding: 2px 9px; border-radius: 20px; border: 1.5px solid; }
.matricule.bascotte { color: var(--terre); border-color: var(--terre); background: #B5470A14; }
.matricule.village  { color: var(--vert);  border-color: var(--vert);  background: #009E6014; }

.personne {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px 2px 3px; border-radius: 20px; border: 1.5px solid;
}
.personne .mat { padding: 2px 7px; border-radius: 20px; color: #fff; }
.personne .nom { font-size: 13px; font-weight: 700; white-space: nowrap; }
.personne.bascotte { border-color: var(--terre); background: #B5470A10; }
.personne.bascotte .mat { background: var(--terre); }
.personne.village  { border-color: var(--vert);  background: #009E6010; }
.personne.village .mat { background: var(--vert); }
.radie { font-size: 12px; color: var(--gris); font-style: italic; }

.puce {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 20px; border: 1px solid; white-space: nowrap;
}
.puce.gris   { color: var(--gris);   border-color: var(--gris);   background: #7C8C8314; }
.puce.vert   { color: var(--vert);   border-color: var(--vert);   background: #009E6014; }
.puce.orange { color: var(--orange); border-color: var(--orange); background: #F77F0014; }
.puce.orange-vif { color: var(--orange-vif); border-color: var(--orange-vif); background: #E85D0414; }
.puce.terre  { color: var(--terre);  border-color: var(--terre);  background: #B5470A14; }
.puce.vert-fonce { color: var(--vert-fonce); border-color: var(--vert-fonce); background: #00674A14; }
.puce.rouge  { color: var(--rouge);  border-color: var(--rouge);  background: #C0392B14; }
.puce.plein { color: #fff; }
.puce.plein.gris { background: var(--gris); } .puce.plein.vert { background: var(--vert); }
.puce.plein.orange { background: var(--orange); } .puce.plein.orange-vif { background: var(--orange-vif); }
.puce.plein.terre { background: var(--terre); } .puce.plein.rouge { background: var(--rouge); }
.puce.plein.vert-fonce { background: var(--vert-fonce); }

/* --------------------------------------------------------------- jauge */
.jauge { height: 9px; border-radius: 20px; background: #E4EAE290; overflow: hidden; }
.jauge .remplissage { height: 100%; border-radius: 20px; }
.remplissage.orange { background: repeating-linear-gradient(90deg, var(--orange) 0 11px, #F77F00C0 11px 22px); }
.remplissage.vert   { background: repeating-linear-gradient(90deg, var(--vert) 0 11px, #009E60C0 11px 22px); }
.remplissage.terre  { background: repeating-linear-gradient(90deg, var(--terre) 0 11px, #B5470AC0 11px 22px); }

/* ------------------------------------------------------------- boutons */
.bouton {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--sans); font-size: 13.5px; font-weight: 700;
  padding: 9px 18px; border-radius: 22px; border: 1.5px solid;
  background: var(--encre); color: #fff; border-color: var(--encre);
}
.bouton:hover { transform: translateY(-1px); }
.bouton.petit { font-size: 12.5px; padding: 6px 13px; }
.bouton.large { width: 100%; justify-content: center; padding: 12px; font-size: 14.5px; }
.bouton.vert   { background: var(--vert);   border-color: var(--vert); }
.bouton.orange { background: var(--orange); border-color: var(--orange); }
.bouton.orange-vif { background: var(--orange-vif); border-color: var(--orange-vif); }
.bouton.terre  { background: var(--terre);  border-color: var(--terre); }
.bouton.vert-fonce { background: var(--vert-fonce); border-color: var(--vert-fonce); }
.bouton.clair  { background: #fff; color: var(--encre); border-color: var(--ligne); }
.bouton.danger { background: #fff; color: var(--rouge); border-color: var(--rouge); }

/* ----------------------------------------------------------- formulaires */
label.champ { display: block; margin-bottom: 14px; }
label.champ > span {
  display: block; margin-bottom: 5px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--gris);
}
input[type=text], input[type=password], input[type=date], input[type=number],
input[type=search], select, textarea {
  width: 100%; font: 13.5px var(--sans); color: var(--encre);
  background: #fff; border: 1.5px solid var(--ligne); border-radius: 8px;
  padding: 9px 11px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--vert); }
textarea { resize: vertical; line-height: 1.6; }
.mono { font-family: var(--mono); }
.aide { font-size: 12px; color: var(--gris); margin-top: 6px; line-height: 1.5; }
.ligne-boutons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.barre-outils { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.barre-outils input, .barre-outils select { width: auto; min-width: 180px; }

/* -------------------------------------------------------------- tableaux */
.tableau { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  background: var(--encre); color: rgba(255,255,255,.85);
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  text-align: left; padding: 12px 14px; white-space: nowrap;
}
tbody td { padding: 10px 14px; border-bottom: 1px solid #E4EAE270; }
tbody tr:nth-child(even) { background: var(--fond); }
tbody tr.cliquable:hover { background: #009E600D; cursor: pointer; }
tfoot td { padding: 11px 14px; font-weight: 800; background: #009E6012; border-top: 2px solid var(--vert); }

/* cahier de cotisations */
.cahier th.mois { text-align: center; padding: 6px 4px; }
.cahier th.mois button {
  width: 100%; padding: 5px 6px; border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; color: rgba(255,255,255,.85);
  font-family: var(--mono); font-size: 10px; font-weight: 700;
}
.cahier th.mois button:hover { background: rgba(255,255,255,.16); }
.cahier td.case { padding: 3px; text-align: center; }
.case button {
  width: 27px; height: 27px; border-radius: 8px; cursor: pointer;
  border: 1.5px solid var(--ligne); background: #fff; color: #fff; font-size: 14px; line-height: 1;
}
.case button.regle { background: var(--vert); border-color: var(--vert); }
.case button.retard { background: #C0392B12; border-color: #C0392B60; }
.case button:disabled { cursor: default; }
td.fige, th.fige { position: sticky; left: 0; background: inherit; border-right: 1.5px solid var(--ligne); }
thead th.fige { background: var(--encre); }
tbody tr:nth-child(odd) td.fige { background: #fff; }
tbody tr:nth-child(even) td.fige { background: var(--fond); }

/* ------------------------------------------------------------- messages */
.message {
  padding: 11px 15px; border-radius: 10px; margin-bottom: 18px;
  font-size: 13.5px; font-weight: 600; border: 1.5px solid;
}
.message.ok     { background: #009E6014; border-color: var(--vert);  color: var(--vert-fonce); }
.message.alerte { background: #F77F0014; border-color: var(--orange); color: var(--terre); }
.message.erreur { background: #C0392B12; border-color: var(--rouge); color: var(--rouge); }

.vide { text-align: center; padding: 40px 24px; }
.vide h2 { font-size: 15px; margin-bottom: 6px; }
.vide p { color: var(--gris); font-size: 13.5px; max-width: 420px; margin: 0 auto; }

/* --------------------------------------------------------------- accueil */
.accueil { min-height: 100vh; display: grid; place-items: center; padding: 16px; position: relative; z-index: 1; }
.accueil .boite {
  width: 100%; max-width: 900px; display: grid; grid-template-columns: 1fr 1fr;
  background: #fff; border: 1.5px solid var(--ligne); border-radius: 20px;
  overflow: hidden; box-shadow: 0 18px 50px rgba(20,36,28,.14);
}
.accueil .volet {
  background: linear-gradient(168deg, #12503A 0% 25%, #0F4431 25% 50%, #0B3A28 50% 75%, #082F20 75% 100%);
  color: #fff; display: flex; flex-direction: column;
}
.accueil .volet .bande { height: 8px; background: var(--drapeau); }
.accueil .volet .texte { padding: 32px 28px; flex: 1; }
.accueil .marque { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.accueil .logo {
  width: 46px; height: 46px; border-radius: 14px; background: var(--vert);
  display: grid; place-items: center; font-size: 22px;
}
.accueil .bienvenue { font-size: 11px; font-weight: 800; letter-spacing: .28em; color: var(--orange-clair); margin-bottom: 10px; }
.accueil h1 { font-size: 29px; font-weight: 800; line-height: 1.15; }
.accueil .promesse { font-size: 15px; color: rgba(255,255,255,.75); margin: 14px 0 0; line-height: 1.55; }
.accueil .compteurs { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.15); }
.accueil .compteurs b { display: block; font-family: var(--mono); font-size: 24px; font-weight: 800; }
.accueil .compteurs span { font-size: 11.5px; color: rgba(255,255,255,.55); }
.accueil .scene { width: 100%; display: block; margin-top: auto; }
.accueil .formulaire { padding: 34px 32px; display: flex; flex-direction: column; justify-content: center; }
.accueil .bascule { display: flex; gap: 6px; padding: 4px; background: var(--fond); border-radius: 24px; margin-bottom: 24px; }
.accueil .bascule a {
  flex: 1; text-align: center; padding: 9px 8px; border-radius: 22px;
  font-size: 13px; font-weight: 700; color: var(--gris);
}
.accueil .bascule a.actif { background: var(--encre); color: #fff; }
.accueil .gros {
  font-family: var(--mono); font-size: 20px; font-weight: 800;
  letter-spacing: .2em; text-align: center; padding: 12px;
}
.accueil .demo { margin-top: 22px; padding-top: 16px; border-top: 1.5px solid var(--ligne); font-size: 12px; color: var(--gris); }
.accueil .demo b { font-family: var(--mono); color: var(--encre-clair); }
.accueil .note { text-align: center; font-size: 11.5px; color: var(--gris); margin-top: 16px; line-height: 1.6; }

/* --------------------------------------------------------------- mobile */
@media (max-width: 900px) {
  .accueil .boite { grid-template-columns: 1fr; }
  .accueil .scene { display: none; }
}
@media (max-width: 1000px) {
  .page { flex-direction: column; }
  .barre { width: auto; flex: none; }
  .titre-assoc { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 8px; }
  .titre-assoc .nom { font-size: 14.5px; }
  .quitter-compact { display: block; font-size: 20px; color: rgba(255,255,255,.75); padding: 4px 8px; }
  .barre nav { flex-direction: row; overflow-x: auto; padding: 0 12px 12px; }
  .onglet { flex: 0 0 auto; }
  .quitter { display: none; }
  main { padding: 20px 16px 50px; }
  .titre-page h1 { font-size: 22px; }
}