/* =============================================================
   DAARA XIDMATOUL XADIM — Feuille de style
   Palette tiree du logo : vert profond, or, noir, creme.
   ============================================================= */

/* ---------- Tokens ---------- */
:root {
  --vert: #0B6E3B;
  --vert-fonce: #064A27;
  --vert-clair: #178C4D;
  --vert-pale: #E8F2EA;
  --or: #C9962F;
  --or-clair: #E4B85C;
  --or-pale: #FBF3E0;
  --encre: #14120D;
  --encre-2: #211D16;
  --creme: #F8F5EE;
  --blanc: #FFFDF9;
  --texte: #1E1B14;
  --texte-doux: #5F594B;
  --bordure: #E4DDCC;
  --rouge: #B3261E;
  --rouge-pale: #FDECEA;
  --ok: #0B6E3B;

  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
  --r-xl: 30px;

  --om-s: 0 1px 2px rgba(20, 18, 13, .06), 0 2px 6px rgba(20, 18, 13, .05);
  --om-m: 0 2px 6px rgba(20, 18, 13, .06), 0 10px 24px rgba(20, 18, 13, .07);
  --om-l: 0 6px 18px rgba(20, 18, 13, .08), 0 24px 48px rgba(20, 18, 13, .10);

  --esp-1: 8px; --esp-2: 16px; --esp-3: 24px; --esp-4: 40px; --esp-5: 64px; --esp-6: 96px;
  --max: 1180px;
  --transition: 220ms cubic-bezier(.4, 0, .2, 1);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --arabe: "Amiri", "Traditional Arabic", serif;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

/* Piege trouve le 05/09/2026 : toute regle de classe qui pose un « display »
   (.info-l { display: flex }, .frise { display: grid }...) l'emporte sur la
   feuille du navigateur et ANNULE l'attribut hidden. La ligne « Email » du
   daara, masquee en JS faute d'adresse reelle, restait affichee, vide.
   Cette regle rend hidden fiable partout, une fois pour toutes. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texte);
  background: var(--creme);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.18; margin: 0 0 var(--esp-2); letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p { margin: 0 0 var(--esp-2); }
a { color: var(--vert); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--vert-clair); }
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; border-radius: 4px; }
.arabe { font-family: var(--arabe); direction: rtl; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { width: min(100% - 40px, var(--max)); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: calc(100% - 32px); } }

section { padding: var(--esp-6) 0; }
@media (max-width: 760px) { section { padding: var(--esp-5) 0; } }

/* ---------- Bandeau prototype ---------- */
.proto {
  background: var(--encre); color: var(--or-clair);
  font-size: .8rem; letter-spacing: .04em; text-align: center;
  padding: 9px 16px; position: relative; z-index: 60;
}
.proto strong { color: var(--blanc); font-weight: 600; }
.proto button {
  background: none; border: 1px solid rgba(228, 184, 92, .4); color: var(--or-clair);
  border-radius: 999px; font-size: .72rem; padding: 3px 10px; margin-left: 10px;
  cursor: pointer; font-family: inherit; min-height: 24px;
}
.proto button:hover { background: rgba(228, 184, 92, .14); }

/* ---------- En-tete ---------- */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(248, 245, 238, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bordure);
}
.entete__in { display: flex; align-items: center; gap: var(--esp-3); min-height: 74px; }
.marque { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.marque img { width: 46px; height: 46px; }
.marque__txt { display: flex; flex-direction: column; line-height: 1.1; }
.marque__nom { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; color: var(--encre); }
.marque__lieu { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--vert); font-weight: 600; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
/* Intitules sur UNE ligne (13/09/2026). Avec « Le bureau » en plus,
   « Le daara », « En images »... passaient sur deux lignes a toutes les
   largeurs d'ordinateur, et deja entre 981 et 1100 px avant l'ajout. */
.nav a {
  padding: 9px 10px; border-radius: 999px; font-size: .92rem; font-weight: 500;
  color: var(--texte-doux); min-height: 44px; display: inline-flex; align-items: center;
  white-space: nowrap;
}
.nav a:hover { background: var(--vert-pale); color: var(--vert-fonce); }
.nav a.actif { color: var(--vert-fonce); background: var(--vert-pale); }
/* le bouton de la nav garde ses couleurs de bouton */
.nav a.btn--vert, .nav a.btn--vert:hover { color: #fff; background: var(--vert); }
.nav a.btn--vert:hover { background: var(--vert-fonce); }
.burger {
  display: none; margin-left: auto; width: 46px; height: 46px; border-radius: var(--r-s);
  background: var(--blanc); border: 1px solid var(--bordure); cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.burger span { display: block; width: 20px; height: 2px; background: var(--encre); border-radius: 2px; transition: var(--transition); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Seuil du menu replie : 1219 px et non plus 980 (13/09/2026). Mesure avec
   les intitules sur une ligne : le menu de l'accueil (9 entrees) ne tient
   qu'a partir de 1211 px ; en dessous il debordait (38 px a 981). Meme
   seuil sur toutes les pages, pour un menu identique partout. */
@media (max-width: 1219px) {
  .burger { display: flex; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--blanc); border-bottom: 1px solid var(--bordure);
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px 20px 20px; box-shadow: var(--om-m);
    display: none;
  }
  .nav.ouvert { display: flex; }
  .nav a { justify-content: flex-start; }
  .nav .btn { justify-content: center; margin-top: 8px; }
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 12px 26px; border-radius: 999px;
  font-family: var(--sans); font-size: .95rem; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; text-align: center;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition), color var(--transition);
}
.btn:active { transform: translateY(1px); }
.btn--vert { background: var(--vert); color: #fff; box-shadow: var(--om-s); }
.btn--vert:hover { background: var(--vert-fonce); color: #fff; box-shadow: var(--om-m); }
.btn--or { background: var(--or); color: var(--encre); box-shadow: var(--om-s); }
.btn--or:hover { background: var(--or-clair); color: var(--encre); }
.btn--ligne { background: transparent; border-color: var(--vert); color: var(--vert); }
.btn--ligne:hover { background: var(--vert-pale); color: var(--vert-fonce); }
.btn--clair { background: rgba(255, 253, 249, .12); color: #fff; border-color: rgba(255, 253, 249, .4); }
.btn--clair:hover { background: rgba(255, 253, 249, .22); color: #fff; }
.btn--fant { background: var(--blanc); border-color: var(--bordure); color: var(--texte); }
.btn--fant:hover { border-color: var(--vert); color: var(--vert); }
.btn--danger { background: var(--rouge-pale); color: var(--rouge); border-color: #F3C9C5; }
.btn--danger:hover { background: var(--rouge); color: #fff; }
.btn--s { min-height: 38px; padding: 7px 15px; font-size: .84rem; }
.btn--bloc { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Titres de section ---------- */
.tete { max-width: 720px; margin-bottom: var(--esp-4); }
.tete--c { margin-inline: auto; text-align: center; }
.surtitre {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; color: var(--vert); margin-bottom: 14px;
}
.surtitre::before { content: ""; width: 26px; height: 2px; background: var(--or); }
.tete--c .surtitre::after { content: ""; width: 26px; height: 2px; background: var(--or); }
.tete p { color: var(--texte-doux); font-size: 1.06rem; margin-bottom: 0; }

/* ---------- Motif ---------- */
.motif {
  background-image:
    radial-gradient(circle at 50% 50%, rgba(201, 150, 47, .13) 1.4px, transparent 1.5px),
    radial-gradient(circle at 0 0, rgba(201, 150, 47, .09) 1.4px, transparent 1.5px);
  background-size: 34px 34px, 34px 34px;
  background-position: 0 0, 17px 17px;
}

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--encre); color: var(--blanc); padding: var(--esp-6) 0; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(11, 110, 59, .55), transparent 70%),
    radial-gradient(ellipse 50% 50% at 85% 100%, rgba(201, 150, 47, .16), transparent 70%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(circle at 50% 50%, rgba(201, 150, 47, .18) 1.2px, transparent 1.3px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000, transparent 75%);
}
.hero__in { position: relative; z-index: 2; text-align: center; }
.hero__logo {
  width: clamp(130px, 22vw, 186px); margin: 0 auto var(--esp-3);
  filter: drop-shadow(0 14px 32px rgba(0, 0, 0, .55));
  animation: flotte 7s ease-in-out infinite;
}
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
.hero h1 { color: var(--blanc); margin-bottom: 6px; }
.hero__arabe { font-family: var(--arabe); font-size: clamp(1.5rem, 3.4vw, 2.1rem); color: var(--or-clair); margin-bottom: 14px; direction: rtl; }
.hero__lieu {
  display: inline-block; font-size: .76rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--or-clair); border: 1px solid rgba(201, 150, 47, .45);
  border-radius: 999px; padding: 6px 18px; margin-bottom: var(--esp-3);
}
.hero__txt { max-width: 620px; margin: 0 auto var(--esp-4); color: rgba(255, 253, 249, .82); font-size: 1.08rem; }
.hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.chiffres {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin-top: var(--esp-5); background: rgba(255, 253, 249, .12);
  border: 1px solid rgba(255, 253, 249, .12); border-radius: var(--r-m); overflow: hidden;
}
.chiffres div { background: rgba(20, 18, 13, .55); padding: 22px 14px; text-align: center; }
.chiffres b { display: block; font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2.2rem); color: var(--or-clair); font-weight: 600; }
.chiffres span { font-size: .8rem; color: rgba(255, 253, 249, .68); }
@media (max-width: 640px) { .chiffres { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Bandeau defilant ---------- */
.bande { background: var(--vert-fonce); color: var(--or-clair); padding: 13px 0; overflow: hidden; border-block: 1px solid rgba(201, 150, 47, .25); }
.bande__piste { display: flex; gap: 46px; white-space: nowrap; animation: defile 34s linear infinite; will-change: transform; }
.bande__piste span { font-size: .84rem; letter-spacing: .16em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 46px; }
.bande__piste span::after { content: "✦"; color: rgba(201, 150, 47, .55); }
@keyframes defile { to { transform: translateX(-50%); } }

/* ---------- Cartes ---------- */
.grille { display: grid; gap: var(--esp-3); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.carte {
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--r-l);
  padding: var(--esp-3); box-shadow: var(--om-s);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carte--survol:hover { transform: translateY(-4px); box-shadow: var(--om-m); border-color: rgba(11, 110, 59, .3); }
.carte h3 { margin-bottom: 10px; }
.carte p { color: var(--texte-doux); margin-bottom: 0; }

.ico {
  width: 52px; height: 52px; border-radius: var(--r-m);
  background: var(--vert-pale); color: var(--vert-fonce);
  display: grid; place-items: center; margin-bottom: 18px;
}
.ico svg { width: 25px; height: 25px; stroke-width: 1.6; }
.puces { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--bordure); }
.puces li { position: relative; padding-left: 22px; font-size: .9rem; color: var(--texte-doux); margin-bottom: 7px; }
.puces li::before { content: "✦"; position: absolute; left: 0; color: var(--or); font-size: .8rem; }

/* ---------- Histoire / frise ---------- */
.histoire { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--esp-5); align-items: start; }
@media (max-width: 900px) { .histoire { grid-template-columns: 1fr; gap: var(--esp-4); } }
.frise { position: relative; padding-left: 34px; }
.frise::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--or), rgba(201, 150, 47, .12)); }
.frise__item { position: relative; padding-bottom: var(--esp-3); }
.frise__item:last-child { padding-bottom: 0; }
.frise__item::before {
  content: ""; position: absolute; left: -30px; top: 7px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--creme); border: 2.5px solid var(--vert);
}
.frise__an { font-family: var(--serif); font-size: 1.22rem; color: var(--vert); font-weight: 600; }
.frise__item h4 { font-family: var(--sans); font-size: .98rem; font-weight: 600; margin: 2px 0 5px; }
.frise__item p { font-size: .92rem; color: var(--texte-doux); margin: 0; }

.medaillon {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(160deg, var(--encre), var(--vert-fonce));
  padding: var(--esp-5) var(--esp-3); text-align: center; color: var(--blanc);
  box-shadow: var(--om-l);
}
.medaillon img { width: 62%; max-width: 240px; margin: 0 auto var(--esp-2); filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .5)); }
.medaillon p { color: rgba(255, 253, 249, .78); font-size: .94rem; margin: 0; }
.medaillon .arabe { color: var(--or-clair); font-size: 1.5rem; margin-bottom: 8px; }

/* ---------- Cotisations ---------- */
.tarif { display: flex; flex-direction: column; position: relative; }
.tarif--pop { border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-pale), var(--om-m); }
.tarif__tag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--vert); color: #fff; font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px;
  white-space: nowrap;
}
.tarif__nom { font-family: var(--serif); font-size: 1.24rem; margin-bottom: 4px; }
.tarif__prix { font-family: var(--serif); font-size: 2.1rem; color: var(--vert); font-weight: 600; line-height: 1.1; }
.tarif__periode { font-size: .84rem; color: var(--texte-doux); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
.tarif p { font-size: .93rem; }
.tarif .puces { flex: 1; }
.tarif .btn { margin-top: 20px; }

.wave-encart {
  margin-top: var(--esp-4); display: flex; align-items: center; gap: var(--esp-3);
  background: var(--or-pale); border: 1px solid #EFDFB8; border-radius: var(--r-l); padding: var(--esp-3);
  flex-wrap: wrap;
}
.wave-encart__ico { width: 54px; height: 54px; border-radius: 14px; background: #1DC8F5; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.4rem; flex-shrink: 0; }
.wave-encart div { flex: 1; min-width: 220px; }
.wave-encart h3 { margin-bottom: 4px; }
.wave-encart p { font-size: .92rem; margin: 0; }

/* ---------- Agenda ---------- */
.event { display: flex; gap: var(--esp-3); align-items: flex-start; }
.event__date {
  flex-shrink: 0; width: 74px; text-align: center; background: var(--encre); color: var(--blanc);
  border-radius: var(--r-m); padding: 12px 6px; box-shadow: var(--om-s);
}
.event__date b { display: block; font-family: var(--serif); font-size: 1.7rem; line-height: 1; color: var(--or-clair); }
.event__date span { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; }
.event__c h3 { font-size: 1.1rem; margin-bottom: 4px; }
.event__lieu { font-size: .82rem; color: var(--vert); font-weight: 600; margin-bottom: 6px; }
.event__c p { font-size: .92rem; margin: 0; }

/* ---------- Bureau ---------- */
.membre-c { text-align: center; }
/* Rangee centree plutot que grille a 4 colonnes (13/09/2026) : avec 5
   membres, la 5e carte restait seule a gauche sur une deuxieme ligne.
   5 cartes de 210 px tiennent sur une ligne d'ordinateur ; quand d'autres
   membres arriveront, la derniere ligne restera centree. */
#bureauG { display: flex; flex-wrap: wrap; justify-content: center; }
#bureauG .membre-c { flex: 0 1 210px; }
@media (max-width: 520px) { #bureauG .membre-c { flex-basis: 100%; } }
.avatar {
  width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 14px;
  background: linear-gradient(140deg, var(--vert), var(--vert-fonce)); color: #fff;
  display: grid; place-items: center; font-family: var(--serif); font-size: 1.5rem; font-weight: 600;
  box-shadow: 0 0 0 4px var(--vert-pale);
}
.avatar--or { background: linear-gradient(140deg, var(--or), #A87A20); box-shadow: 0 0 0 4px var(--or-pale); color: var(--encre); }
.membre-c h3 { font-size: 1.02rem; font-family: var(--sans); font-weight: 600; margin-bottom: 2px; }
.membre-c p { font-size: .84rem; color: var(--vert); font-weight: 500; }

/* ---------- Le dieuwrigne ----------
   Demande du bureau le 05/09/2026 : le portrait au-dessus du bandeau du
   kourel, avec le logo en arriere-plan. Le logo reste DISCRET : il pose
   le decor, il ne concurrence pas le visage. */
.dieuwrigne { background: var(--creme); border-block: 1px solid var(--bordure); }
.dieuwrigne__in { position: relative; display: grid; place-items: center; text-align: center; }
/* Le medaillon : le logo et le portrait, l'un sur l'autre, centres.
   Le conteneur n'entoure QUE le portrait, donc le logo ne peut plus
   deriver quand le nom ou le titre changent de longueur. */
.dieuwrigne__medaillon {
  position: relative; display: grid; place-items: center;
  width: 300px; height: 300px;
  /* La marge basse LAISSE PASSER LE LOGO : il deborde de la moitie de
     (465 - 300) px sous le portrait. Le nom commence donc apres
     l'anneau, plus 20 px d'air. Sans ce calcul, il se posait dessus
     (signale par le bureau le 10/09/2026). */
  margin: 0 auto calc((min(465px, 86vw) - 300px) / 2 + 20px);
}
.dieuwrigne__fond {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  /* 1,55 fois le portrait : le logo deborde en aureole tout autour,
     sans jamais depasser la largeur du telephone.

     « max-width: none » est INDISPENSABLE : la regle de base du site
     pose « img { max-width: 100% } », et le conteneur ne fait que
     300 px. Sans cette ligne, le logo etait ramene a 300 px, donc
     exactement cache derriere le portrait. Mesure, pas devine : le
     diagnostic donnait un debord de 0 px. */
  width: min(465px, 86vw); max-width: none; height: auto;
  /* Opacite remontee de 0,12 a 0,20 : a 0,12 sur le creme du site,
     l'aureole ne se voyait pas. */
  opacity: .2; pointer-events: none;
}
.dieuwrigne__photo { position: relative; }
@media (max-width: 640px) {
  .dieuwrigne__medaillon {
    width: 220px; height: 220px;
    margin-bottom: calc((min(341px, 84vw) - 220px) / 2 + 16px);
  }
  .dieuwrigne__fond { width: min(341px, 84vw); }
}
.dieuwrigne__c { position: relative; }
.dieuwrigne__photo {
  width: 300px; height: 300px; border-radius: 50%; object-fit: cover;
  background: var(--vert-pale);
  box-shadow: 0 0 0 6px var(--blanc), 0 0 0 8px var(--or), var(--om-m);
}
/* Le NOM d'abord, le titre ensuite (demande du bureau, 07/09/2026).
   Les deux styles echangent donc leurs roles : le nom porte le bloc, la
   fonction le precise en dessous. */
/* Marges posees EXPLICITEMENT a zero : le paragraphe du nom heritait de
   la marge basse par defaut du site, qui creusait un vide avant le
   titre. Le nom et son titre forment un seul bloc, ils se touchent
   presque. */
.dieuwrigne__nom {
  font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--encre); margin: 0; line-height: 1.2;
}
.dieuwrigne__fonction {
  margin: 6px 0 0; font-size: .82rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--vert); font-weight: 600; line-height: 1.5;
}
.dieuwrigne__txt { max-width: 620px; margin: 14px auto 0; color: var(--texte-doux); font-size: .96rem; }
@media (max-width: 640px) {
  .dieuwrigne__photo { width: 220px; height: 220px; }
}

/* ---------- Section Touba ----------
   La Grande Mosquee EN ENTIER en fond, les deux portraits dessus, sous
   le logo et le nom du daara. Demande du bureau, precisee le 06/09/2026.

   La photo d'origine ne fait que 640 px de large. Le voile sombre et le
   leger flou ne sont pas que des choix esthetiques : ils masquent le
   manque de definition. Une photo en 2400 px reste souhaitable. */
.touba {
  position: relative;
  /* Hauteur d'origine, retablie le 07/09/2026 : la photo avait ete mise
     dans le flux pour montrer tous les toits, mais la section devenait
     bien plus haute et le bureau prefere ce rendu-ci. */
  padding-block: var(--esp-4) var(--esp-6);
  min-height: 900px;
  /* Contenu aligne EN HAUT : centre, les portraits se posaient en plein
     milieu de la mosquee et masquaient son corps. */
  display: flex; align-items: flex-start;
  /* Repli le temps que la photo charge : c'est elle qui occupe la
     section, avec le vert par-dessus. */
  background: var(--vert-fonce);
  overflow: hidden;
  isolation: isolate;
}
.touba__fond {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* Le cadrage privilegie le HAUT : la photo est plus haute que la
     section, il faut couper quelque part, et le bureau tient aux toits
     des minarets. C'est un bout d'esplanade qui est sacrifie.
     A SAVOIR : l'en-tete collant recouvre les 75 premiers pixels de la
     section quand on defile jusqu'a elle. C'est mesure, pas suppose. */
  object-position: center 22%;
  z-index: -2;
  opacity: 1;
  /* Desaturee avant d'etre voilee : sans cela, le vert du daara se
     melange au bleu du ciel et le resultat vire au turquoise. */
  filter: saturate(.52) contrast(1.03);
}
/* Le voile. Sans lui, le texte blanc devient illisible sur le ciel clair
   de la photo, et les portraits se noient dans le decor. */
/* Le voile a ete ALLEGE le 06/09/2026 : a .82 / .88, la mosquee
   disparaissait dans le vert alors que le bureau la veut visible en
   entier. On descend a .52 / .70, et on renforce localement derriere le
   nom du daara, la ou le ciel de la photo est clair. Le texte reste
   lisible sans que le decor soit efface. */
.touba::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  /* Voile NEUTRE depuis le 06/09/2026. En vert, il virait le ciel bleu
     de la photo et rendait le grand minaret verdatre : la teinte de la
     charte ne doit pas repeindre une photo, seulement l'assombrir. */
  /* ALLEGE le 06/09/2026 : le bureau trouvait l'image trop sombre. Le
     voile ne subsiste que la ou il sert VRAIMENT, c'est-a-dire derriere
     le nom du daara et sous les legendes. Ailleurs, la photo se montre
     presque telle quelle. */
  /* LE VOILE VERT, pose PAR-DESSUS la photo (z-index -1 contre -2).
     C'est lui qui tient la charte maintenant que la mosquee est en
     pleine visibilite : il la teinte sans l'effacer, et il efface au
     passage le bleu du ciel et l'ocre de la pierre, les deux couleurs
     qui juraient.

     Un renfort local est ajoute derriere le nom du daara : sur la
     pierre claire, le texte blanc ne tiendrait pas avec le seul voile
     uniforme. */
  background:
    /* ALLEGE le 07/09/2026 au soir, a la demande du bureau : la mosquee
       doit se voir davantage. Le voile general descend de 46 a 30 %.
       Le renfort local derriere le nom, lui, est CONSERVE : c'est la
       seule chose qui rend le texte blanc lisible sur la pierre claire
       du minaret, et l'alleger le rendrait illisible. */
    radial-gradient(ellipse 50% 32% at 50% 20%, rgba(6, 74, 39, .86) 0%, rgba(6, 74, 39, 0) 100%),
    linear-gradient(180deg, rgba(6, 74, 39, .30) 0%, rgba(6, 74, 39, .26) 55%, rgba(6, 74, 39, .48) 100%);
}
.touba__in { position: relative; text-align: center; }
.touba__logo { width: 96px; height: 96px; margin: 0 auto 14px; display: block;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .55)); }
/* Ombre portee sur tout le texte de la section : il se lit par-dessus
   une photo, dont la clarte change d'un endroit a l'autre. Le voile
   seul ne suffit pas la ou le minaret ocre passe derriere le titre. */
.touba__nom {
  font-family: var(--serif); font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  color: var(--blanc); margin: 0; line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .75), 0 1px 3px rgba(0, 0, 0, .6);
}
.touba__lieu {
  color: var(--or-clair); font-size: .95rem; letter-spacing: .16em;
  text-transform: uppercase; margin: 8px 0 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}
.touba .figure figcaption b,
.touba .figure figcaption span { text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }

/* Les portraits, poses sur la mosquee : un a GAUCHE, un a DROITE, le
   logo et le nom du daara entre les deux (demande du 06/09/2026).
   Les colonnes laterales sont a largeur fixe pour que le centre reste
   vraiment au centre, meme si un seul portrait est renseigne. */
.touba__rang {
  display: grid; grid-template-columns: 220px 1fr 220px;
  align-items: start; gap: var(--esp-4);
}
.touba__c { text-align: center; }
.figures { display: flex; justify-content: center; }
.figures--g { justify-content: flex-start; }
.figures--d { justify-content: flex-end; }
.figure { margin: 0; text-align: center; }
.figure img {
  width: 190px; height: 253px; object-fit: cover;
  border-radius: var(--r-m);
  box-shadow: 0 0 0 1px var(--or), 0 18px 40px rgba(0, 0, 0, .5);
  background: var(--encre-2);
}
.figure figcaption { margin-top: 14px; }
.figure figcaption b {
  display: block; font-family: var(--serif); font-size: 1.05rem; color: var(--blanc);
}
.figure figcaption span {
  display: block; font-size: .82rem; color: var(--or-clair); margin-top: 3px;
  letter-spacing: .08em; text-transform: uppercase;
}
/* Sur telephone, les deux portraits restent COTE A COTE. Empiles, ils
   faisaient une section de plus de deux ecrans de haut et le visiteur
   defilait longtemps sans rien apprendre. Deux colonnes egales, largeur
   en pourcentage : la mosquee reste lisible derriere. */
/* SUR TELEPHONE, LA MEME DISPOSITION QUE SUR ORDINATEUR : trois
   colonnes, portrait a gauche, centre, portrait a droite. Seule
   l'echelle change.

   La mosquee est affichee ENTIERE, calee en bas : « cover » la zoomait
   au point qu'on ne voyait plus qu'un minaret sur un ecran etroit.
   Ce choix n'est possible que parce que le reste de la section est un
   vert uni : la ou la photo s'arrete, c'est le fond qui prend le
   relais, et rien ne se voit. */
@media (max-width: 640px) {
  /* Hauteur resserree : la mosquee en « contain » n'occupe qu'une bande
     en bas, et 620 px laissaient un large vide vert au milieu. */
  .touba { padding-block: var(--esp-4) 0; min-height: 500px; }
  .touba__fond {
    object-fit: contain;
    object-position: center bottom;
    /* Le fondu est cale sur la zone ou l'image est REELLEMENT dessinee.
       En « contain », l'element occupe toute la hauteur mais la photo
       n'en remplit que le bas : un masque calcule sur les premiers
       pourcents effacait du vide, et la ligne de demarcation restait.
       « -webkit-mask-image » reste necessaire pour Safari sur iPhone. */
    -webkit-mask-image: linear-gradient(180deg, transparent 48%, #000 66%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 48%, #000 66%, #000 100%);
  }
  .touba__rang {
    /* Colonnes laterales souples : a parts egales, le nom du daara
       passait sur trois lignes. */
    grid-template-columns: .82fr minmax(0, 1.5fr) .82fr;
    gap: 8px;
    align-items: start;
  }
  .touba__c { padding: 8px 4px; }
  .touba__logo { width: 56px; height: 56px; margin-bottom: 8px; }
  .touba__nom { font-size: clamp(1rem, 4.4vw, 1.3rem); }
  .touba__lieu { font-size: .62rem; letter-spacing: .08em; margin-top: 5px; }
  .figure img { width: 100%; height: auto; aspect-ratio: 3 / 4; }
  .figure figcaption { margin-top: 8px; }
  .figure figcaption b { font-size: .72rem; line-height: 1.2; }
  .figure figcaption span { font-size: .58rem; letter-spacing: .04em; margin-top: 2px; }
}

.histoire__lien { margin-top: 16px; }
.histoire__lien a {
  font-weight: 600; color: var(--vert); border-bottom: 1px solid var(--or);
  padding-bottom: 2px;
}
.histoire__lien a:hover { color: var(--vert-fonce); }

/* ---------- Page biographie ----------
   Portrait officiel du guide. L'original ne fait que 1080 px de large,
   le fichier servi 720 : on ne l'affiche donc JAMAIS au-dela de 340 px,
   sinon il pique sur un ecran regle a 150 %. */
.bio-tete { background: var(--creme); border-bottom: 1px solid var(--bordure); padding-block: var(--esp-5); }
.bio-tete__in {
  display: grid; grid-template-columns: auto 1fr; gap: var(--esp-4);
  align-items: center;
}
/* Deux portraits du meme homme, cote a cote (06/09/2026). */
.bio__portraits { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bio__portraits img {
  width: 220px; height: 220px; object-fit: cover; border-radius: var(--r-l);
  box-shadow: 0 0 0 1px var(--or), var(--om-m); background: var(--vert-pale);
}
.bio-tete__t h1 { font-size: clamp(1.7rem, 4.2vw, 2.9rem); line-height: 1.15; margin: 6px 0 0; }
.bio__variantes { font-size: .92rem; color: var(--texte-doux); margin-top: 10px; font-style: italic; }
.bio__qualite {
  margin-top: 14px; font-size: 1.02rem; color: var(--vert-fonce); font-weight: 600;
  padding-top: 14px; border-top: 1px solid var(--bordure); max-width: 420px;
}
@media (max-width: 760px) {
  .bio-tete__in { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--esp-3); }
  .bio__portraits img { width: 42vw; max-width: 180px; height: auto; aspect-ratio: 1/1; }
  .bio__qualite { margin-inline: auto; }
}

.bio-corps { padding-block: var(--esp-5); }
.bio-corps__in { max-width: 780px; margin-inline: auto; }
.bio-reperes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-2); margin-bottom: var(--esp-4); }
@media (max-width: 700px) { .bio-reperes { grid-template-columns: 1fr; } }
.bio-repere {
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--r-m);
  padding: 18px; text-align: center;
}
.bio-repere__l { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--vert); font-weight: 600; }
.bio-repere b { display: block; font-family: var(--serif); font-size: 1.2rem; color: var(--encre); margin: 8px 0 4px; }
.bio-repere__c { display: block; font-size: .85rem; color: var(--texte-doux); }
.bio-texte p { font-size: 1.05rem; line-height: 1.75; margin-bottom: var(--esp-2); }
.bio-source {
  margin-top: var(--esp-4); padding: 18px 20px; font-size: .9rem; color: var(--texte-doux);
  background: var(--vert-pale); border-left: 3px solid var(--vert); border-radius: 0 var(--r-s) var(--r-s) 0;
}
.bio-retour { margin-top: var(--esp-4); text-align: center; }

/* ---------- In memoriam ----------
   Ton sobre : pas d'animation d'entree, pas d'effet au survol. */
.memoriam { background: var(--blanc); border-block: 1px solid var(--bordure); }
.memoriam .tete p { color: var(--texte-doux); font-size: .95rem; }
.mem-grille {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--esp-4); margin-top: var(--esp-2);
}
.mem { width: 240px; text-align: center; margin: 0; }
.mem__cadre {
  width: 220px; height: 293px; margin: 0 auto 16px; overflow: hidden;
  border-radius: 50% / 44%; background: var(--creme);
  display: grid; place-items: center;
  box-shadow: 0 0 0 5px var(--blanc), 0 0 0 6px var(--bordure), var(--om-s);
}
.mem__cadre img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Un disparu sans photo recoit l'embleme, centre et reduit, jamais un cadre vide. */
.mem__cadre .mem__embleme { width: 120px; height: 120px; object-fit: contain; opacity: .5; }
.mem figcaption b { display: block; font-family: var(--serif); font-size: 1.15rem; color: var(--encre); }
.mem__surnom { display: block; font-size: .9rem; color: var(--vert); font-weight: 600; margin-top: 2px; }
.mem__dates { display: block; font-size: .82rem; color: var(--texte-doux); margin-top: 4px; letter-spacing: .04em; }
.mem figcaption p { font-size: .9rem; color: var(--texte-doux); margin: 10px 0 0; }

/* ---------- Rendez-vous annuels ----------
   Pas de quantieme : ces rendez-vous suivent le calendrier lunaire. La
   pastille porte le repere (« 18 Safar ») ou la mention « date annoncee ». */
.event__date--annuel { width: 108px; padding: 14px 8px; display: grid; place-content: center; }
.event__date--annuel b { font-size: 1.05rem; line-height: 1.25; }
.event__date--annuel span { display: block; margin-top: 6px; opacity: .8; }
/* Repere inconnu : pastille claire, pour ne pas repeter quatre blocs noirs
   qui disent quatre fois la meme absence d'information. */
.event__date--souple {
  background: var(--vert-pale); color: var(--vert-fonce);
  border: 1px solid var(--bordure); box-shadow: none;
}
.event__date--souple span { margin-top: 0; opacity: 1; line-height: 1.5; }

/* ---------- Don public ----------
   Aucun montant affiche : la somme se choisit dans Wave. */
.don {
  margin-top: var(--esp-3); padding: var(--esp-3);
  background: var(--or-pale); border: 1px solid var(--or-clair); border-radius: var(--r-m);
}
.don h3 { font-size: 1.05rem; margin-bottom: 8px; }
.don p { font-size: .92rem; color: var(--texte-doux); margin-bottom: 16px; }
.don__om { margin: 14px 0 0; font-size: .92rem; }
.don__om b { color: var(--encre); font-weight: 600; }
/* Le daara donne deux numeros : ils s'empilent au lieu de se coller. */
.info-l a + a { display: block; margin-top: 2px; }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin-inline: auto; }
.faq details {
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--r-m);
  margin-bottom: 12px; overflow: hidden;
}
.faq summary {
  cursor: pointer; padding: 18px 22px; font-weight: 600; font-size: 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  list-style: none; min-height: 56px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--vert); font-weight: 400; flex-shrink: 0; transition: transform var(--transition); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] summary { color: var(--vert-fonce); }
.faq p { padding: 0 22px 20px; color: var(--texte-doux); margin: 0; font-size: .95rem; }

/* ---------- Contact ---------- */
.contact-grille { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--esp-4); }
@media (max-width: 900px) { .contact-grille { grid-template-columns: 1fr; } }
.info-l { display: flex; gap: 15px; padding: 15px 0; border-bottom: 1px dashed var(--bordure); }
.info-l:last-child { border-bottom: 0; }
.info-l svg { width: 21px; height: 21px; color: var(--vert); flex-shrink: 0; margin-top: 3px; }
.info-l b { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--texte-doux); font-weight: 600; }
.info-l span, .info-l a { font-size: 1rem; color: var(--texte); }

/* ---------- Formulaires ---------- */
.champ { margin-bottom: 18px; }
.champ label { display: block; font-size: .86rem; font-weight: 600; margin-bottom: 7px; color: var(--texte); }
.champ .aide { font-size: .8rem; color: var(--texte-doux); font-weight: 400; margin-top: 5px; }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 48px; padding: 12px 15px;
  border: 1px solid var(--bordure); border-radius: var(--r-s);
  font-family: var(--sans); font-size: 1rem; color: var(--texte);
  background: var(--blanc); transition: border-color var(--transition), box-shadow var(--transition);
}
.champ textarea { min-height: 120px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-pale);
}
.champ input[aria-invalid="true"] { border-color: var(--rouge); }
.champ .err { font-size: .82rem; color: var(--rouge); margin-top: 6px; display: none; }
.champ.invalide .err { display: block; }
.champs2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 560px) { .champs2 { grid-template-columns: 1fr; } }

/* ---------- Pied ---------- */
.pied { background: var(--encre); color: rgba(255, 253, 249, .72); padding: var(--esp-5) 0 var(--esp-3); }
.pied__grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--esp-4); margin-bottom: var(--esp-4); }
@media (max-width: 800px) { .pied__grille { grid-template-columns: 1fr; gap: var(--esp-3); } }
.pied h4 { color: var(--blanc); font-family: var(--sans); font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; margin-bottom: 16px; }
.pied a { color: rgba(255, 253, 249, .72); font-size: .93rem; }
.pied a:hover { color: var(--or-clair); }
.pied li { margin-bottom: 9px; }
.pied .marque__nom { color: var(--blanc); }
.pied .marque__lieu { color: var(--or-clair); }
.pied__bas {
  border-top: 1px solid rgba(255, 253, 249, .12); padding-top: var(--esp-3);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .82rem;
}
.pied__bas a { color: var(--or-clair); }

/* =============================================================
   ESPACES CONNECTES (membre + admin)
   ============================================================= */
.app { display: grid; grid-template-columns: 258px 1fr; min-height: 100vh; }
@media (max-width: 900px) { .app { grid-template-columns: 1fr; } }

.aside {
  background: var(--encre); color: rgba(255, 253, 249, .8);
  padding: var(--esp-3) 18px; display: flex; flex-direction: column; gap: var(--esp-3);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
@media (max-width: 900px) { .aside { position: static; height: auto; } }
.aside .marque__nom, .aside .marque__lieu { color: var(--blanc); }
.aside .marque__lieu { color: var(--or-clair); }
.menu { display: flex; flex-direction: column; gap: 3px; }
.menu button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: 0; color: rgba(255, 253, 249, .74);
  font-family: var(--sans); font-size: .93rem; text-align: left;
  padding: 12px 14px; border-radius: var(--r-s); cursor: pointer; min-height: 46px;
  transition: background var(--transition), color var(--transition);
}
.menu button svg { width: 19px; height: 19px; flex-shrink: 0; }
.menu button:hover { background: rgba(255, 253, 249, .08); color: var(--blanc); }
.menu button.actif { background: var(--vert); color: #fff; font-weight: 600; }
.aside__bas { margin-top: auto; border-top: 1px solid rgba(255, 253, 249, .12); padding-top: var(--esp-2); font-size: .82rem; }
@media (max-width: 900px) { .menu { flex-direction: row; overflow-x: auto; padding-bottom: 4px; } .menu button { white-space: nowrap; } .aside__bas { margin-top: var(--esp-2); } }

.principal { padding: var(--esp-3) var(--esp-4) var(--esp-5); background: var(--creme); min-width: 0; }
@media (max-width: 640px) { .principal { padding: var(--esp-3) 18px var(--esp-4); } }
.vue { display: none; animation: apparait 300ms ease both; }
.vue.actif { display: block; }
@keyframes apparait { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.barre-vue { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); flex-wrap: wrap; margin-bottom: var(--esp-3); }
.barre-vue h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; }
.barre-vue p { color: var(--texte-doux); margin: 4px 0 0; font-size: .93rem; }

/* KPI */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--esp-2); margin-bottom: var(--esp-3); }
.kpi { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--r-m); padding: 20px; box-shadow: var(--om-s); }
.kpi b { display: block; font-family: var(--serif); font-size: 1.9rem; color: var(--encre); line-height: 1.15; font-weight: 600; }
.kpi span { font-size: .82rem; color: var(--texte-doux); }
.kpi--vert b { color: var(--vert); }
.kpi--or b { color: #9C7420; }
.kpi--rouge b { color: var(--rouge); }

/* Tableaux */
.tab-zone { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--r-m); overflow: hidden; box-shadow: var(--om-s); }
.tab-defile { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .91rem; min-width: 620px; }
thead th {
  text-align: left; padding: 13px 16px; background: var(--creme);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--texte-doux);
  font-weight: 700; border-bottom: 1px solid var(--bordure); white-space: nowrap;
}
tbody td { padding: 13px 16px; border-bottom: 1px solid #F0EBE0; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #FCFAF5; }
.td-membre { display: flex; align-items: center; gap: 11px; }
.td-membre .av { width: 36px; height: 36px; border-radius: 50%; background: var(--vert-pale); color: var(--vert-fonce); display: grid; place-items: center; font-weight: 700; font-size: .78rem; flex-shrink: 0; }
.td-membre b { display: block; font-weight: 600; }
.td-membre span { font-size: .8rem; color: var(--texte-doux); }
.actions-l { display: flex; gap: 6px; flex-wrap: wrap; }

/* Etiquettes */
.eti {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px;
  font-size: .76rem; font-weight: 600; white-space: nowrap;
}
.eti--ok { background: var(--vert-pale); color: var(--vert-fonce); }
.eti--retard { background: var(--rouge-pale); color: var(--rouge); }
.eti--neutre { background: #EFEBE1; color: var(--texte-doux); }
.eti--or { background: var(--or-pale); color: #8A6416; }
.eti::before { content: "●"; font-size: .6rem; }

/* Barre de progression */
.jauge { height: 9px; border-radius: 999px; background: #EDE7DA; overflow: hidden; }
.jauge i { display: block; height: 100%; background: linear-gradient(90deg, var(--vert), var(--vert-clair)); border-radius: 999px; transition: width 600ms ease; }
.jauge--retard i { background: linear-gradient(90deg, #C0392B, #E0705F); }

/* Graphique barres */
.graph { display: flex; align-items: flex-end; gap: 12px; height: 190px; padding-top: var(--esp-2); }
.graph__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.graph__b { width: 100%; max-width: 56px; background: linear-gradient(180deg, var(--vert-clair), var(--vert)); border-radius: 8px 8px 0 0; min-height: 4px; transition: height 700ms cubic-bezier(.4,0,.2,1); position: relative; }
.graph__b:hover { background: linear-gradient(180deg, var(--or-clair), var(--or)); }
.graph__b span { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: .7rem; color: var(--texte-doux); white-space: nowrap; }
.graph__l { font-size: .74rem; color: var(--texte-doux); text-transform: capitalize; }

/* Carte de membre */
.carte-membre {
  position: relative; max-width: 430px; aspect-ratio: 1.6 / 1;
  background: linear-gradient(145deg, var(--encre) 0%, var(--vert-fonce) 100%);
  border-radius: var(--r-l); padding: 24px; color: var(--blanc); overflow: hidden;
  box-shadow: var(--om-l); display: flex; flex-direction: column; justify-content: space-between;
}
.carte-membre::before {
  content: ""; position: absolute; inset: 0; opacity: .35;
  background-image: radial-gradient(circle at 50% 50%, rgba(201, 150, 47, .35) 1.2px, transparent 1.3px);
  background-size: 22px 22px;
}
.carte-membre > * { position: relative; z-index: 2; }
.carte-membre__h { display: flex; align-items: center; gap: 11px; }
.carte-membre__h img { width: 44px; height: 44px; }
.carte-membre__h b { font-family: var(--serif); font-size: .98rem; display: block; }
.carte-membre__h span { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--or-clair); }
.carte-membre__nom { font-family: var(--serif); font-size: 1.5rem; line-height: 1.15; }
.carte-membre__pied { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.carte-membre__pied small { display: block; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 253, 249, .55); }
.carte-membre__pied b { font-size: .95rem; font-weight: 600; letter-spacing: .06em; }
@media (max-width: 480px) { .carte-membre { aspect-ratio: auto; gap: 22px; } }

/* Modale */
.modale {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(20, 18, 13, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.modale.ouverte { display: flex; animation: apparait 200ms ease both; }
.modale__b {
  background: var(--blanc); border-radius: var(--r-l); width: min(100%, 560px);
  max-height: 90vh; overflow-y: auto; box-shadow: var(--om-l);
}
.modale__h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 0; }
.modale__h h3 { margin: 0; }
.modale__h p { font-size: .88rem; color: var(--texte-doux); margin: 4px 0 0; }
.modale__x { background: none; border: 0; font-size: 1.7rem; line-height: 1; color: var(--texte-doux); cursor: pointer; padding: 0 4px; min-height: 44px; min-width: 44px; }
.modale__x:hover { color: var(--rouge); }
.modale__c { padding: 20px 24px; }
.modale__f { padding: 0 24px 24px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* Toasts */
.toasts { position: fixed; bottom: 22px; right: 22px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: min(92vw, 380px); }
.toast {
  background: var(--encre); color: var(--blanc); padding: 14px 18px; border-radius: var(--r-m);
  box-shadow: var(--om-l); font-size: .92rem; border-left: 4px solid var(--vert-clair);
  animation: entre 260ms cubic-bezier(.4,0,.2,1) both;
}
.toast--erreur { border-left-color: #E0705F; }
.toast.part { opacity: 0; transform: translateX(20px); transition: 280ms; }
@keyframes entre { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* Connexion */
.conn { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
@media (max-width: 900px) { .conn { grid-template-columns: 1fr; } }
.conn__marque {
  background: var(--encre); color: var(--blanc); padding: var(--esp-5) var(--esp-4);
  display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden;
}
.conn__marque::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 30% 20%, rgba(11, 110, 59, .6), transparent 70%),
              radial-gradient(circle at 50% 50%, rgba(201, 150, 47, .14) 1.2px, transparent 1.3px);
  background-size: auto, 30px 30px;
}
.conn__marque > * { position: relative; z-index: 2; }
.conn__marque img { width: 108px; margin-bottom: var(--esp-3); filter: drop-shadow(0 12px 26px rgba(0,0,0,.5)); }
.conn__marque h2 { color: var(--blanc); }
.conn__marque p { color: rgba(255, 253, 249, .76); max-width: 420px; }
.conn__form { display: flex; flex-direction: column; justify-content: center; padding: var(--esp-5) var(--esp-4); }
.conn__form .in { width: min(100%, 400px); margin-inline: auto; }
@media (max-width: 900px) { .conn__marque { padding: var(--esp-4) var(--esp-3); text-align: center; align-items: center; } .conn__marque img { margin-inline: auto; } }

.vide { text-align: center; padding: var(--esp-4) var(--esp-2); color: var(--texte-doux); }
.vide svg { width: 42px; height: 42px; color: var(--bordure); margin-bottom: 12px; }

/* Bloc encadre */
.bloc { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--r-m); padding: var(--esp-3); box-shadow: var(--om-s); margin-bottom: var(--esp-3); }
.bloc__t { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: var(--esp-2); flex-wrap: wrap; }
.bloc__t h3 { margin: 0; font-size: 1.1rem; }
.bloc__t p { margin: 2px 0 0; font-size: .86rem; color: var(--texte-doux); }

.outils { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: var(--esp-2); }
.outils input, .outils select { min-height: 44px; padding: 10px 14px; border: 1px solid var(--bordure); border-radius: var(--r-s); font-family: var(--sans); font-size: .92rem; background: var(--blanc); }
.outils input { flex: 1; min-width: 200px; }
.outils input:focus, .outils select:focus { outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-pale); }

/* Reveal */
/* APPARITION AU DEFILEMENT, ET SON FILET DE SECURITE.

   Piege rencontre le 07/09/2026 sur la page biographie : les sections
   etaient injectees avec la classe « rev », dont l'etat par defaut etait
   INVISIBLE, et la moitie du texte du bureau ne s'affichait jamais.

   REGLE : l'etat par defaut est VISIBLE. L'animation ne fait
   qu'enjoliver, et elle ne s'applique que si le JavaScript a pose la
   classe « js » sur la page. Un texte qu'on ne voit pas est un texte
   perdu, quelle qu'en soit la raison.

   Un second filet vit dans app.js et page.js : au bout de trois
   secondes, tout ce qui n'a pas ete revele l'est de force. */
.rev { opacity: 1; transform: none; }
.js .rev { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.js .rev.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rev { opacity: 1; transform: none; transition: none; }
}
}
html:not(.js) .rev { opacity: 1; transform: none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .rev { opacity: 1; transform: none; }
}

@media print {
  .aside, .entete, .proto, .btn, .pied { display: none !important; }
  .app { grid-template-columns: 1fr; }
}

/* =============================================================
   GALERIE EN IMAGES (albums du canal Telegram)

   Mosaique en colonnes, d'apres le composant React apporte par
   Racine le 28/08/2026, retraduit en CSS : coins arrondis, bordure,
   fond pendant le chargement, et apparition en fondu d'une seconde
   quand l'image est a la fois visible et chargee.
   ============================================================= */
.gal-grille {
  display: grid; gap: var(--esp-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1060px; margin-inline: auto;
}
@media (min-width: 1000px) {
  .gal-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.gal-col { display: grid; gap: var(--esp-3); align-content: start; }

.alb {
  display: block; text-align: left; width: 100%; padding: 0;
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--r-m); overflow: hidden; cursor: pointer;
  font: inherit; color: inherit; box-shadow: var(--om-s);
  transition: box-shadow var(--transition), transform var(--transition),
              opacity .5s ease;
  opacity: 0; transform: translateY(14px);
}
.alb.vu { opacity: 1; transform: none; }
.alb:hover, .alb:focus-visible { box-shadow: var(--om-m); transform: translateY(-3px); }

/* La hauteur est reservee d'avance par un padding-top calcule sur les vraies
   proportions de la photo : sans cela, la mosaique sauterait a chaque image
   qui arrive. */
.alb__im {
  display: block; position: relative; width: 100%;
  background: var(--vert-pale); overflow: hidden;
}
.alb__im img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: 0; transition: opacity 1s ease-in-out;
}
.alb__im img.chargee { opacity: 1; }

.alb__c { display: block; padding: var(--esp-2) var(--esp-2) calc(var(--esp-2) + 2px); }
.alb__t {
  display: block; font-family: var(--serif); font-size: 1.02rem;
  font-weight: 600; line-height: 1.3; color: var(--encre);
}
.alb__d { display: block; margin-top: 5px; font-size: .84rem; color: var(--texte-doux); }
.gal-plus { display: block; margin: var(--esp-4) auto 0; }

/* La visionneuse */
body.fige { overflow: hidden; }
.visio {
  position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center;
  /* 97 % et non 93 : le fond du site est creme clair, les 7 %
     qui passaient laissaient lire les cartes derriere. */
  background: rgba(10, 14, 11, .97); padding: var(--esp-3);
}
.visio[hidden] { display: none; }
.visio__f { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.visio__f img {
  max-width: 100%; max-height: 78vh; border-radius: var(--r-s);
  display: block; margin: 0 auto; background: #1b1f1c;
}
.visio__f figcaption { margin-top: var(--esp-2); color: #F0EDE4; font-size: .92rem; }
.visio__f figcaption b { display: block; font-size: 1.02rem; margin-bottom: 3px; }
.visio__f figcaption span { color: #B9C4BC; }
.visio__x, .visio__n {
  position: absolute; background: rgba(255, 255, 255, .12); color: #fff;
  border: 0; border-radius: 50%; cursor: pointer; line-height: 1;
  display: grid; place-items: center; transition: var(--transition);
}
.visio__x:hover, .visio__n:hover,
.visio__x:focus-visible, .visio__n:focus-visible { background: rgba(255, 255, 255, .26); }
.visio__x { top: 14px; right: 14px; width: 46px; height: 46px; font-size: 1.9rem; }
.visio__n { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2.4rem; }
.visio__n--g { left: 12px; }
.visio__n--d { right: 12px; }

@media (max-width: 640px) {
  .gal-grille, .gal-col { gap: var(--esp-2); }
  .alb__t { font-size: .92rem; }
  .alb__c { padding: 11px 12px 13px; }
  .visio { padding: 8px; }
  .visio__n { width: 44px; height: 44px; font-size: 2rem; }
  .visio__f img { max-height: 68vh; }
}

@media (prefers-reduced-motion: reduce) {
  .alb { opacity: 1; transform: none; }
  .alb__im img { transition: none; opacity: 1; }
}

/* =============================================================
   BANDEAU PHOTO avant « Nos activites »

   La legende est posee sur l'image, remontee par un degrade vert
   profond : c'est ce degrade qui garantit le contraste du texte,
   quelle que soit la zone de la photo qui se trouve dessous.
   Sous 620 px, la legende passe SOUS l'image : en surimpression
   sur un 16/9 de 390 px de large, elle mangerait la photo.
   ============================================================= */
.bandeau-s { padding-block: 0 var(--esp-5); }
@media (max-width: 760px) { .bandeau-s { padding-block: 0 var(--esp-4); } }

.bandeau {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--r-l); box-shadow: var(--om-m);
  background: var(--vert-fonce);
}
.bandeau img {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; object-position: center 42%;
}
.bandeau figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: var(--esp-5) var(--esp-4) var(--esp-3);
  background: linear-gradient(to top,
    rgba(6, 74, 39, .94) 0%, rgba(6, 74, 39, .72) 34%,
    rgba(6, 74, 39, .28) 62%, transparent 100%);
  color: var(--blanc);
}
.bandeau__t {
  display: block; font-family: var(--serif); font-size: 1.65rem;
  font-weight: 600; line-height: 1.2; letter-spacing: -.01em;
}
.bandeau__p {
  display: block; margin-top: 7px; max-width: 46ch;
  font-size: .96rem; line-height: 1.5; color: rgba(255, 253, 249, .88);
}

@media (max-width: 620px) {
  .bandeau { border-radius: var(--r-m); background: var(--blanc);
             border: 1px solid var(--bordure); box-shadow: var(--om-s); }
  .bandeau figcaption {
    position: static; background: none; color: var(--texte);
    padding: var(--esp-2) var(--esp-2) calc(var(--esp-2) + 2px);
  }
  .bandeau__t { font-size: 1.2rem; color: var(--encre); }
  .bandeau__p { font-size: .9rem; color: var(--texte-doux); }
}

/* Photo d'un membre du bureau, a la place de ses initiales */
/* 120 px et non 68 depuis le 13/09/2026 : les vraies photos du bureau sont
   arrivees, et a 68 px on ne reconnait pas un visage. */
.avatar--photo { width: 120px; height: 120px; padding: 0; overflow: hidden; background: var(--vert-pale); }
.avatar--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Liens des reseaux du daara, dans le pied de page */
.pied__res { margin-top: 22px; }
.pied__res[hidden] { display: none; }
.res { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.res a {
  display: inline-block; padding: 7px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 253, 249, .22); font-size: .86rem;
  transition: var(--transition);
}
.res a:hover, .res a:focus-visible {
  background: rgba(255, 253, 249, .12); border-color: rgba(255, 253, 249, .4);
}

/* =============================================================
   PHOTOTHEQUE  (mosaique en tete de la section « En images »)
   ============================================================= */
.pth {
  display: grid; gap: var(--esp-1);
  /* 2 colonnes sur telephone et non 3 : a 3, les tuiles tombaient a 114 px,
     trop petites pour lire une scene de groupe et trop etroites pour le nom
     de l'evenement (signale par le client le 01/09/2026). */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1060px; margin: 0 auto var(--esp-5);
}
@media (min-width: 560px)  { .pth { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 700px)  { .pth { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pth { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--esp-2); } }

.pth__c {
  position: relative; display: block; width: 100%; padding: 0;
  aspect-ratio: 1 / 1; overflow: hidden;
  border: 0; border-radius: var(--r-s); cursor: pointer;
  background: var(--vert-pale); font: inherit; color: inherit;
  box-shadow: var(--om-s);
  transition: box-shadow var(--transition), transform var(--transition),
              opacity .5s ease;
  opacity: 0; transform: translateY(10px);
}
.pth__c.vu { opacity: 1; transform: none; }
.pth__c:hover, .pth__c:focus-visible { box-shadow: var(--om-m); transform: translateY(-2px); }

.pth__c img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: 0; transition: opacity .9s ease-in-out, transform var(--transition);
}
.pth__c img.chargee { opacity: 1; }
.pth__c:hover img { transform: scale(1.04); }

/* Le nom de l'evenement, en bas de la vignette. Le degrade garantit le
   contraste du texte quelle que soit la photo qui se trouve dessous. */
.pth__l {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  padding: 26px var(--esp-1) 9px;
  font-size: .9rem; line-height: 1.25; font-weight: 600; color: #fff;
  text-align: left;
  background: linear-gradient(to top, rgba(6, 74, 39, .94), rgba(6, 74, 39, 0));
}
/* La coupure a 2 lignes se fait ICI, sur un span sans marge interieure.
   Portee sur .pth__l, qui a une marge basse, Safari peignait une troisieme
   ligne dans cette marge la ou Chrome n'en montrait que deux : le nom
   debordait sous la tuile sur l'iPhone du client, invisible chez nous.
   Le `max-height` double la securite : si un moteur ignore line-clamp,
   la hauteur coupe quand meme. */
.pth__t {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-height: 2.5em;
}

/* Titre du second bloc de la section (« Parcourir par album ») */
.tete--sous { margin-bottom: var(--esp-3); }
.tete--sous h3 {
  font-size: 1.5rem; margin-bottom: 6px;
}
@media (max-width: 620px) { .tete--sous h3 { font-size: 1.28rem; } }

/* =============================================================
   VIDEOS  (facades : le lecteur YouTube n'arrive qu'au clic)
   ============================================================= */
.vid-grille {
  display: grid; gap: var(--esp-3);
  grid-template-columns: minmax(0, 1fr);
  max-width: 1060px; margin-inline: auto;
}
@media (min-width: 640px)  { .vid-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .vid-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.vid {
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--r-m); overflow: hidden; box-shadow: var(--om-s);
  transition: box-shadow var(--transition), transform var(--transition),
              opacity .5s ease;
  opacity: 0; transform: translateY(14px);
}
.vid.vu { opacity: 1; transform: none; }
.vid:hover { box-shadow: var(--om-m); transform: translateY(-3px); }

.vid__im {
  position: relative; width: 100%; display: block;
  background: var(--vert-pale); overflow: hidden;
}
.vid__im img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: 0; transition: opacity .9s ease-in-out;
}
.vid__im img.chargee { opacity: 1; }
.vid__im iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Le bouton couvre toute la vignette : sur telephone, viser un petit rond
   au centre d'une image est penible. La pastille n'est que le repere visuel. */
.vid__play {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 0;
  background: rgba(6, 74, 39, .18); border: 0; cursor: pointer;
  transition: background var(--transition);
}
.vid__play::before {
  content: ""; position: absolute; width: 62px; height: 62px;
  border-radius: 50%; background: rgba(255, 253, 249, .93);
  box-shadow: var(--om-m); transition: transform var(--transition);
}
.vid__play svg {
  position: relative; width: 30px; height: 30px; margin-left: 3px;
  color: var(--vert); pointer-events: none;
}
.vid__play:hover { background: rgba(6, 74, 39, .3); }
.vid__play:hover::before { transform: scale(1.08); }
.vid--joue .vid__play { display: none; }

.vid__c { padding: var(--esp-2); }
.vid__t {
  font-size: 1.02rem; line-height: 1.3; margin: 0 0 5px;
}
.vid__d { font-size: .85rem; color: var(--texte-doux); margin: 0; }

.vid-chaine { text-align: center; margin: var(--esp-4) 0 0; }
.vid-chaine a { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .pth__c, .vid { opacity: 1; transform: none; transition: none; }
  .pth__c:hover img { transform: none; }
}

/* =============================================================
   PLANCHER DE LISIBILITE SUR TELEPHONE  (01/09/2026)
   -------------------------------------------------------------
   Le client a signale que les ecritures n'etaient pas lisibles sur son
   telephone. La mesure a montre 72 elements sous 14 px sur la page, pas
   seulement la phototheque qu'il avait photographiee : surtitres a 11,8,
   coordonnees a 12,5, libelles des chiffres a 12,8, dates des videos a
   13,6, libelles du formulaire a 13,8.

   Ce bloc remonte tout le SITE PUBLIC a 14 px minimum sur telephone. Il ne
   touche ni l'espace membre ni l'admin, qui restent denses a dessein : on y
   saisit, on n'y lit pas au soleil.

   Les valeurs de bureau ne bougent pas : la ou l'ecran est grand et la
   distance de lecture plus courte, ces tailles fines font partie du dessin.
   ============================================================= */
@media (max-width: 700px) {
  .surtitre        { font-size: .875rem; letter-spacing: .14em; }
  .hero__lieu      { font-size: .875rem; letter-spacing: .18em; }
  .chiffres span   { font-size: .875rem; }
  .bande__piste span { font-size: .875rem; }
  .info-l b        { font-size: .875rem; letter-spacing: .06em; }
  .champ label     { font-size: .95rem; }
  .champ .aide,
  .champ .err      { font-size: .875rem; }
  .vid__d          { font-size: .9rem; }
  .alb__d          { font-size: .9rem; }
  .event__lieu     { font-size: .9rem; }
  .event__date span { font-size: .875rem; letter-spacing: .06em; }
  .membre-c p      { font-size: .9rem; }
  .pied__bas       { font-size: .9rem; }
  .pied h4         { font-size: .875rem; letter-spacing: .1em; }
  .marque__lieu    { font-size: .875rem; letter-spacing: .1em; }
  .res a           { font-size: .95rem; }
  .puces li::before { font-size: .875rem; }
}

/* ---------- Choix du chemin d'inscription ----------
   Deux boutons plutot qu'un champ facultatif : le membre deja connu du
   daara et le nouveau venu ne vivent pas la meme chose, et melanger les
   deux dans un seul formulaire obligeait chacun a lire une consigne qui
   ne le concernait pas. */
.choix { display: grid; gap: 14px; }
.choix__c {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--r-m); padding: 18px 20px;
  font: inherit; color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.choix__c:hover, .choix__c:focus-visible {
  border-color: var(--vert); box-shadow: var(--om-m); transform: translateY(-1px);
}
.choix__t {
  display: block; font-family: var(--serif); font-size: 1.1rem;
  color: var(--encre); margin-bottom: 6px;
}
.choix__d { display: block; font-size: .9rem; color: var(--texte-doux); line-height: 1.55; }
@media (prefers-reduced-motion: reduce) {
  .choix__c { transition: none; }
  .choix__c:hover, .choix__c:focus-visible { transform: none; }
}

/* ---------- Le guide, colonne de droite de « Notre histoire » ----------
   REECRIT le 06/09/2026. Ces regles avaient ete emportees par erreur en
   posant le style de la section Touba : j'ai remplace une PLAGE de la
   feuille reperee par deux reperes, et le bloc du guide se trouvait
   entre les deux. Resultat, il s'affichait sans aucun style pendant
   quelques heures, et les tests ne l'ont pas vu parce qu'ils verifient
   la presence et le chargement, jamais l'apparence.
   Ne plus remplacer de plage de CSS a l'aveugle : ajouter, ou viser une
   regle precise. */
.colonne-guide { display: grid; gap: var(--esp-4); align-content: start; }
.guide-b {
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--r-l); padding: var(--esp-3); box-shadow: var(--om-s);
}

/* Une seule photo depuis le 06/09/2026 (celle en habits blancs) : plus
   de grille a deux colonnes, un portrait centre en 3/4. La seconde, en
   tenue bleue, ne se voit qu'en ouvrant la biographie complete. */
.guide-b__photos { margin-bottom: var(--esp-3); text-align: center; }
.guide-b__photos img {
  width: 210px; max-width: 100%; height: auto; aspect-ratio: 3 / 4;
  object-fit: cover; object-position: center 22%;
  border-radius: var(--r-m); background: var(--vert-pale);
  box-shadow: 0 0 0 1px var(--or), var(--om-s);
}
.guide-b__r {
  display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--vert); font-weight: 600;
}
.guide-b h3 { font-family: var(--serif); font-size: 1.35rem; margin: 6px 0 8px; }
.guide-b__var { font-size: .85rem; color: var(--texte-doux); font-style: italic; margin-bottom: 12px; }
.guide-b p { font-size: .95rem; line-height: 1.7; }
.guide-b__lien { margin-top: 14px; margin-bottom: 0; }
.guide-b__lien a { font-weight: 600; color: var(--vert); border-bottom: 1px solid var(--or); padding-bottom: 2px; }
.guide-b__lien a:hover { color: var(--vert-fonce); }

/* ---------- Soutenir le daara ----------
   Section demandee le 06/09/2026. Trois moyens presentes a egalite :
   Wave, Orange Money, et le siege. Aucun montant nulle part, la somme se
   choisit dans Wave (decision du bureau du 28/08). */
.don-s { background: var(--vert-pale); border-block: 1px solid var(--bordure); }
.don-g {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--esp-3); margin-top: var(--esp-4);
}
.don-c {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--r-l); padding: var(--esp-3); box-shadow: var(--om-s);
}
.don-c img { width: 220px; max-width: 100%; height: auto; border-radius: var(--r-s); margin-bottom: 16px; }
.don-c__om {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--vert); font-weight: 600; margin-bottom: 10px;
}
.don-c__t { font-family: var(--serif); font-size: 1.15rem; color: var(--encre); margin-bottom: 8px; }
.don-c__d { font-size: .9rem; color: var(--texte-doux); line-height: 1.6; }

a.don-c--wave { text-decoration: none; transition: transform var(--transition), box-shadow var(--transition); }
a.don-c--wave:hover, a.don-c--wave:focus-visible {
  transform: translateY(-2px); box-shadow: var(--om-m); border-color: var(--vert);
}
@media (prefers-reduced-motion: reduce) {
  a.don-c--wave { transition: none; }
  a.don-c--wave:hover, a.don-c--wave:focus-visible { transform: none; }
}

/* ---------- Page biographie : les deux portraits ----------
   L'accueil n'en montre qu'un ; ici on les voit tous les deux. */
.bio__portraits { display: flex; gap: 16px; justify-content: center; }
.bio__portraits img {
  width: 220px; height: 293px; object-fit: cover; object-position: center 22%;
  border-radius: var(--r-m); box-shadow: 0 0 0 1px var(--or), var(--om-m);
  background: var(--vert-pale);
}
@media (max-width: 760px) {
  .bio__portraits img { width: 42vw; height: auto; aspect-ratio: 3 / 4; }
}

/* =============================================================
   ESPACE DU BUREAU — habillage
   Ecrit le 06/09/2026 avec la refonte de l'espace, branche sur
   Supabase. Reprend les jetons du site : meme vert, meme or, meme
   serif. Un bureau qui passe du site public a son espace ne doit pas
   avoir l'impression de changer d'outil.
   ============================================================= */

/* L'ecran d'attente, tant qu'on ne sait pas qui est connecte. */
.attente {
  min-height: 100vh; display: grid; place-items: center;
  background: var(--creme); color: var(--texte-doux);
}
.attente p { font-size: .95rem; }

/* Rappel du mot de passe d'origine. */
.rappel {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--or-pale); border: 1px solid var(--or);
  border-radius: var(--r-m); padding: 14px 18px; margin-bottom: var(--esp-3);
  font-size: .92rem; color: var(--texte);
}
.rappel button {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--vert); font: inherit; text-decoration: underline;
}

/* La pastille du menu : combien de demandes attendent. */
.pastille {
  display: inline-block; min-width: 20px; padding: 1px 6px;
  background: var(--or); color: var(--encre);
  border-radius: 999px; font-size: .72rem; font-weight: 700;
  text-align: center; margin-left: auto;
}

/* Les chiffres du tableau de bord. */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px; margin-bottom: var(--esp-3);
}
.stat {
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--r-m); padding: 18px 20px;
}
.stat b {
  display: block; font-family: var(--serif); font-size: 1.7rem;
  color: var(--encre); line-height: 1.1;
}
.stat span { display: block; font-size: .84rem; color: var(--texte-doux); margin-top: 6px; }
.stat--ok { border-left: 3px solid var(--vert); }
.stat--alerte { border-left: 3px solid var(--or); }

/* Les tableaux. Ils debordent en largeur sur telephone : ils defilent
   DANS leur cadre, la page elle-meme ne bouge pas. */
.bloc > .tab, .bloc > div > .tab { margin: 0; }
.tab { width: 100%; border-collapse: collapse; font-size: .92rem; }
.bloc > div:has(> .tab) { overflow-x: auto; }
.tab th {
  text-align: left; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--texte-doux); font-weight: 600;
  padding: 12px 14px; border-bottom: 1px solid var(--bordure); white-space: nowrap;
}
.tab td { padding: 13px 14px; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
.tab tr:last-child td { border-bottom: 0; }
.tab tbody tr:hover { background: var(--creme); }
.tab a { color: var(--vert); }
.tab__s { font-size: .78rem; color: var(--texte-doux); }
.tab__a { white-space: nowrap; text-align: right; }

/* Les etiquettes d'etat. */
.etiq {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .76rem; font-weight: 600; white-space: nowrap;
}
.etiq--ok { background: var(--vert-pale); color: var(--vert-fonce); }
.etiq--alerte { background: var(--or-pale); color: #8a6410; }
.etiq--gris { background: #EFEBE1; color: var(--texte-doux); }

/* Une liste vide DIT qu'elle est vide : une zone blanche laisse croire
   a un chargement qui n'aboutit pas. */
.vide { padding: 26px 20px; color: var(--texte-doux); font-size: .92rem; text-align: center; margin: 0; }

/* Les filtres du tableau des cotisations. */
.filtres { display: flex; gap: 6px; flex-wrap: wrap; }
.fil {
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: 999px; padding: 6px 14px; font: inherit; font-size: .84rem;
  color: var(--texte-doux); cursor: pointer; transition: all var(--transition);
}
.fil:hover { border-color: var(--vert); color: var(--vert); }
.fil.actif { background: var(--vert); border-color: var(--vert); color: #fff; }

/* La barre du haut de chaque vue. */
.barre-vue__a { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.recherche {
  padding: 9px 14px; border: 1px solid var(--bordure); border-radius: var(--r-s);
  font: inherit; font-size: .9rem; min-width: 220px; background: var(--blanc);
}
.recherche:focus { outline: 2px solid var(--vert); outline-offset: 1px; }
.mois-l { font-size: .84rem; color: var(--texte-doux); }
.mois-i {
  padding: 8px 12px; border: 1px solid var(--bordure); border-radius: var(--r-s);
  font: inherit; font-size: .9rem; background: var(--blanc);
}

/* Le corps d'un bloc de reglages. */
.bloc__c { padding: 20px; }
.actions-l { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.etat-code { font-size: .92rem; color: var(--texte-doux); margin-bottom: 18px; }

@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat b { font-size: 1.35rem; }
  .tab { font-size: .86rem; }
  .tab th, .tab td { padding: 10px; }
  .barre-vue__a { width: 100%; }
  .recherche { flex: 1; min-width: 0; }
}

/* Le menu de l'espace du bureau sur telephone.
   Constate a la capture du 06/09/2026 : les cinq onglets ne tiennent pas
   sur 390 px, le menu defile, et le navigateur amene l'onglet actif dans
   la vue en poussant « Tableau de bord » a moitie hors champ. On voyait
   « de bord » tout seul a gauche, ce qui fait negligé.
   On resserre, on masque la barre de defilement, et on ajoute une marge
   de defilement pour que l'onglet actif ne colle jamais au bord. */
@media (max-width: 900px) {
  .menu {
    scroll-padding-inline: 12px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .menu::-webkit-scrollbar { display: none; }
  .menu button { padding: 9px 13px; font-size: .88rem; gap: 8px; }
  .menu button svg { width: 17px; height: 17px; }
}
@media (max-width: 420px) {
  /* Sous 420 px, le texte complet ne rentre plus a cinq onglets. On
     garde le libelle (des icones seules seraient illisibles pour un
     bureau qui decouvre l'outil) mais on comprime davantage. */
  .menu button { padding: 8px 11px; font-size: .82rem; }
}

/* La carte Wave tant que le lien du daara n'est pas fourni. Elle porte
   le logo pour que la place se voie, mais elle ne ressemble PAS a un
   bouton : ni ombre au survol, ni curseur de lien. Le visiteur comprend
   qu'il n'y a rien a cliquer encore. */
.don-c--attente { opacity: .82; }
.don-c--attente .don-c__d { font-style: italic; }

/* ---------- Page biographie : le texte long ----------
   Le bureau a transmis une biographie de trente lignes le 07/09/2026.
   Elle est decoupee en sections : un seul bloc de cette longueur ne se
   lit pas sur un telephone. */
/* « padding: 0 » est indispensable : la regle generale « section { padding:
   96px 0 } » s'appliquait a ces sections imbriquees et ajoutait 192 px de
   vide dans chacune. Mesure, pas devine : le contenu faisait 145 px, la
   section en occupait 337. */
.bio-sec { padding: 0; margin-bottom: var(--esp-4); }
.bio-sec h2 {
  font-family: var(--serif); font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  color: var(--encre); margin: 0 0 14px;
}
.bio-sec p { font-size: 1.02rem; line-height: 1.78; margin-bottom: 14px; }
.bio-puces { margin: 16px 0 0; padding-left: 0; list-style: none; }
.bio-puces li {
  position: relative; padding-left: 26px; margin-bottom: 12px;
  font-size: 1rem; line-height: 1.7;
}
.bio-puces li::before {
  content: ""; position: absolute; left: 4px; top: 11px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--or);
}

/* La genealogie : des faits, donc des fiches, pas un recit. */
.bio-genea { margin-top: var(--esp-5); }
.bio-genea h2 {
  font-family: var(--serif); font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  margin: 0 0 var(--esp-3);
}
.genea { margin-bottom: var(--esp-3); }
.genea h3 {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--vert); font-weight: 600; margin: 0 0 14px;
}
.genea__e {
  background: var(--blanc); border: 1px solid var(--bordure);
  border-left: 3px solid var(--or);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  padding: 16px 20px; margin-bottom: 12px;
}
.genea__r {
  display: block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--texte-doux); margin-bottom: 5px;
}
.genea__e b { display: block; font-family: var(--serif); font-size: 1.08rem; color: var(--encre); }
.genea__e p { margin: 8px 0 0; font-size: .93rem; line-height: 1.65; color: var(--texte-doux); }


/* =============================================================
   MON ESPACE — habillage
   Ecrit le 07/09/2026 avec la refonte de l'espace membre.
   ============================================================= */

/* L'ecran des demandes en attente. Volontairement sobre et centre : il
   n'y a rien a faire d'autre qu'attendre le bureau, autant que la page
   le dise clairement plutot que de montrer des tableaux vides que le
   membre prendrait pour une panne. */
.attente-v {
  min-height: 100vh; display: grid; place-items: center;
  background: var(--creme); padding: var(--esp-3);
}
.attente-v__c {
  max-width: 480px; text-align: center;
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--r-xl); padding: var(--esp-5) var(--esp-4);
  box-shadow: var(--om-m);
}
.attente-v__c img { width: 90px; height: 90px; margin-bottom: var(--esp-2); }
.attente-v__c h1 {
  font-family: var(--serif); font-size: clamp(1.4rem, 4vw, 1.9rem);
  margin: 0 0 10px; color: var(--encre);
}
.attente-v__c > p { color: var(--texte-doux); font-size: 1rem; margin: 0 0 6px; }
.attente-v__d { line-height: 1.7; margin-top: 14px; }
.attente-v__m {
  margin-top: var(--esp-3); padding-top: var(--esp-2);
  border-top: 1px solid var(--bordure); font-size: .92rem;
}
.attente-v__m b { color: var(--vert); font-family: var(--serif); font-size: 1.05rem; }
.attente-v__a { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: var(--esp-3); }

/* Les annonces du bureau. */
.annonces { display: grid; gap: 14px; padding: 20px; }
.annonce {
  background: var(--blanc); border: 1px solid var(--bordure);
  border-left: 3px solid var(--or); border-radius: 0 var(--r-m) var(--r-m) 0;
  padding: 18px 20px;
}
.annonce__d {
  display: block; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--vert); font-weight: 600; margin-bottom: 8px;
}
.annonce h4 { font-family: var(--serif); font-size: 1.1rem; margin: 0 0 8px; color: var(--encre); }
.annonce p { margin: 0; font-size: .95rem; line-height: 1.7; color: var(--texte-doux); }
#listeAnnonces .annonces { padding: 0; }

/* Ma fiche : des lignes libelle / valeur, pas un formulaire. Ces
   informations s'affichent, elles ne se modifient pas ici. */
.fiche { display: grid; gap: 2px; }
.fiche__l {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--bordure);
}
.fiche__l:last-child { border-bottom: 0; }
.fiche__l span { color: var(--texte-doux); font-size: .9rem; }
.fiche__l b { color: var(--encre); font-size: .95rem; text-align: right; }

.note-annuaire {
  margin-top: var(--esp-2); font-size: .86rem; color: var(--texte-doux);
  line-height: 1.6; max-width: 620px;
}

/* =============================================================
   LE MENU DES ESPACES SUR TELEPHONE
   Pose le 07/09/2026. La barre laterale devenait une rangee d'onglets
   qui defilait : on ne voyait que trois entrees sur cinq, et rien
   n'indiquait qu'il fallait faire glisser. Elle devient un panneau qui
   s'ouvre au bouton, le geste que tout le monde connait.
   ============================================================= */

/* Sur ordinateur, la barre du haut n'existe pas. */
.tete-mob { display: none; }
.voile-menu { display: none; }

@media (max-width: 900px) {
  .tete-mob {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 16px;
    background: var(--encre); color: var(--blanc);
    position: sticky; top: 0; z-index: 60;
  }
  .tete-mob .marque__nom { color: var(--blanc); }
  .tete-mob .marque__lieu { color: var(--or-clair); font-size: .72rem; }

  .burger-app {
    width: 42px; height: 42px; flex-shrink: 0;
    display: grid; align-content: center; gap: 5px; justify-items: center;
    background: none; border: 0; cursor: pointer; padding: 0;
  }
  .burger-app span {
    display: block; width: 22px; height: 2px; background: var(--blanc);
    border-radius: 2px; transition: transform var(--transition), opacity var(--transition);
  }
  .burger-app[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger-app[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger-app[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Le panneau lateral sort de la gauche. « transform » plutot que
     « left » : la premiere est calculee par la carte graphique, la
     seconde force un recalcul de toute la page a chaque image. */
  .app { display: block; }
  .aside {
    position: fixed; inset: 0 auto 0 0; width: min(280px, 82vw);
    z-index: 80; overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 260ms cubic-bezier(.4, 0, .2, 1);
  }
  .aside.ouvert { transform: none; }
  /* La marque est deja dans la barre du haut : inutile de la repeter. */
  .aside > .marque { display: none; }

  .menu { flex-direction: column; overflow: visible; }
  .menu button { white-space: normal; }

  .voile-menu {
    display: block; position: fixed; inset: 0; z-index: 70;
    background: rgba(20, 18, 13, .5);
  }

  @media (prefers-reduced-motion: reduce) {
    .aside { transition: none; }
  }
}

/* ---------- Nos perspectives ----------
   Dernier paragraphe de la presentation officielle du bureau
   (07/09/2026). Volontairement sobre : c'est une liste d'intentions,
   pas une section a effets. */
.persp { background: var(--vert-pale); border-block: 1px solid var(--bordure); }
.persp__l {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin-top: var(--esp-4); padding: 0; list-style: none;
}
.persp__l li {
  position: relative; padding: 18px 20px 18px 46px;
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--r-m); font-size: .97rem; line-height: 1.6;
}
.persp__l li::before {
  content: ""; position: absolute; left: 20px; top: 24px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--or);
}

/* Le role du disparu, sous son nom. */
.mem__role {
  display: block; font-size: .82rem; color: var(--vert);
  font-weight: 600; margin-top: 4px;
}

/* ---------- La page des Khassaides ----------
   Ecrite le 07/09/2026, en attente des fichiers du bureau. */
.kh-tete { background: var(--creme); border-bottom: 1px solid var(--bordure); }
.kh-tete h1 { font-size: clamp(1.8rem, 5vw, 2.9rem); margin: 6px 0 14px; }
.kh-corps { padding-block: var(--esp-5); }

.kh-liste { display: grid; gap: 16px; max-width: 820px; margin-inline: auto; }
.kh {
  display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap;
  background: var(--blanc); border: 1px solid var(--bordure);
  border-left: 3px solid var(--or); border-radius: 0 var(--r-m) var(--r-m) 0;
  padding: 20px 22px;
}
.kh__c { flex: 1; min-width: 220px; }
.kh h3 { font-family: var(--serif); font-size: 1.2rem; margin: 0 0 4px; color: var(--encre); }
.kh__a { display: block; font-size: .85rem; color: var(--vert); font-weight: 600; }
.kh__c p { margin: 10px 0 0; font-size: .93rem; line-height: 1.65; color: var(--texte-doux); }
.kh__d {
  display: flex; gap: 8px; flex-wrap: wrap; list-style: none;
  margin: 12px 0 0; padding: 0;
}
.kh__d li {
  font-size: .78rem; color: var(--texte-doux);
  background: var(--creme); border-radius: 999px; padding: 3px 12px;
}

/* L'encart d'attente. Une page vide sans explication ressemble a une
   panne : celle-ci dit ce qu'elle attend. */
.kh-attente {
  max-width: 560px; margin-inline: auto; text-align: center;
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--r-xl); padding: var(--esp-5) var(--esp-4);
  box-shadow: var(--om-s);
}
.kh-attente img { width: 88px; height: 88px; margin-bottom: var(--esp-2); }
.kh-attente h2 { font-family: var(--serif); font-size: 1.5rem; margin: 0 0 12px; }
.kh-attente p { color: var(--texte-doux); line-height: 1.7; margin: 0 0 10px; }
.kh-attente__c { margin-top: var(--esp-3); padding-top: var(--esp-2); border-top: 1px solid var(--bordure); font-size: .92rem; }
.kh-attente a { color: var(--vert); font-weight: 600; }

.kh-note {
  max-width: 820px; margin: var(--esp-4) auto 0; font-size: .88rem;
  color: var(--texte-doux); line-height: 1.65; text-align: center;
}

/* ---------- Le bandeau des Khassaides sur l'accueil ----------
   Pose le 07/09/2026. La page des Khassaides n'etait atteignable que
   par le menu du haut : beaucoup de visiteurs defilent sans jamais y
   remonter. Ce bandeau, en vert plein au milieu de sections claires,
   tranche assez pour qu'on ne puisse pas le manquer. */
.kh-bandeau {
  background: var(--vert-fonce);
  color: var(--blanc);
  border-block: 1px solid var(--vert-fonce);
}
.kh-bandeau__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-4); flex-wrap: wrap;
}
.kh-bandeau h2 {
  color: var(--blanc); font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  margin: 6px 0 12px;
}
.kh-bandeau p {
  color: rgba(255, 253, 249, .82); max-width: 560px;
  font-size: 1rem; line-height: 1.7; margin: 0;
}
.surtitre--clair { color: var(--or-clair); }
.surtitre--clair::before { background: var(--or-clair); }
@media (max-width: 760px) {
  .kh-bandeau__in { flex-direction: column; align-items: flex-start; gap: var(--esp-3); }
  .kh-bandeau .btn { width: 100%; text-align: center; }
}

/* La carte Orange Money, posee a cote de Wave le 07/09/2026. Elle n'est
   cliquable que si le bureau a fourni un lien de paiement : sans lien,
   elle affiche le numero a composer et le survol ne promet rien. */
a.don-c--om { text-decoration: none; transition: transform var(--transition), box-shadow var(--transition); }
a.don-c--om[href]:hover, a.don-c--om[href]:focus-visible {
  transform: translateY(-2px); box-shadow: var(--om-m); border-color: var(--vert);
}
a.don-c--om:not([href]) { cursor: default; }
@media (prefers-reduced-motion: reduce) {
  a.don-c--om { transition: none; }
  a.don-c--om[href]:hover, a.don-c--om[href]:focus-visible { transform: none; }
}

/* La mention d'attente d'un moyen de paiement pas encore fourni.
   Meme style que celle de Wave : le bureau veut voir les deux moyens
   des maintenant, et enverra ses liens ensuite. */
.don-c__a {
  font-size: .88rem; color: var(--texte-doux); font-style: italic; line-height: 1.6;
}

/* Le slogan du daara, sous le lieu dans le haut de page.
   Transmis par le bureau le 07/09/2026. */
.hero__slogan {
  margin: 14px auto 0; max-width: 620px;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  color: var(--or); line-height: 1.5;
}

/* ---------- Les chaines du daara, dans le pied de page ----------
   Les vraies marques remplacent les liens en texte (07/09/2026). Elles
   sont dessinees dans la page : aucun fichier a charger, et elles
   restent nettes a toutes les tailles. */
.res { display: flex; flex-wrap: wrap; gap: 10px; }
.res__l {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px 9px 12px; border-radius: 999px;
  border: 1px solid rgba(255, 253, 249, .18);
  background: rgba(255, 253, 249, .05);
  color: rgba(255, 253, 249, .88); font-size: .86rem; font-weight: 500;
  text-decoration: none; transition: all var(--transition);
}
.res__l svg { width: 19px; height: 19px; flex: none; }
.res__l:hover, .res__l:focus-visible {
  background: rgba(255, 253, 249, .12);
  border-color: rgba(255, 253, 249, .35);
  color: var(--blanc);
}
/* Chaque marque garde sa couleur au survol : c'est a cela qu'on les
   reconnait du coin de l'oeil. */
.res__l--youtube:hover svg   { color: #FF0000; }
.res__l--telegram:hover svg  { color: #29A9EB; }
.res__l--tiktok:hover svg    { color: #25F4EE; }
.res__l--instagram:hover svg { color: #E1306C; }
.res__l--facebook:hover svg  { color: #1877F2; }
@media (prefers-reduced-motion: reduce) { .res__l { transition: none; } }

/* ---------- Page « Le daara » ----------
   La presentation officielle du bureau, atteinte par le bouton « En
   savoir plus » sous la chronologie de l'accueil (07/09/2026). */
.ld-tete { background: var(--creme); border-bottom: 1px solid var(--bordure); }
.ld-tete h1 { font-size: clamp(1.8rem, 5vw, 2.9rem); margin: 6px 0 14px; }
.ld-tete .tete p { font-style: italic; color: var(--vert-fonce); font-size: 1.05rem; }

.ld-reperes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin-top: var(--esp-4); max-width: 820px; margin-inline: auto;
}
.ld-repere {
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--r-m); padding: 18px 14px; text-align: center;
}
.ld-repere b {
  display: block; font-family: var(--serif); font-size: 1.5rem; color: var(--vert-fonce);
}
.ld-repere span { display: block; font-size: .82rem; color: var(--texte-doux); margin-top: 4px; }

.ld-corps { padding-block: var(--esp-5); }
.ld-corps__in { max-width: 780px; margin-inline: auto; }
.ld-sec { margin-bottom: var(--esp-5); }
.ld-sec:last-child { margin-bottom: 0; }
.ld-sec h2 {
  font-family: var(--serif); font-size: clamp(1.3rem, 3.2vw, 1.75rem);
  color: var(--encre); margin: 0 0 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--bordure);
}
.ld-sec p { font-size: 1.02rem; line-height: 1.8; margin: 0 0 16px; }
.ld-sec p:last-child { margin-bottom: 0; }

.ld-puces { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 14px; }
.ld-puces li {
  position: relative; padding: 18px 20px 18px 46px;
  background: var(--vert-pale); border-radius: var(--r-m);
  font-size: .98rem; line-height: 1.75;
}
.ld-puces li::before {
  content: ""; position: absolute; left: 20px; top: 27px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--or);
}
/* Le texte qui suit les puces, dans le document d'origine. */
.ld-apres {
  font-style: italic; color: var(--vert-fonce);
  border-left: 3px solid var(--or); padding-left: 18px; margin-top: 20px !important;
}

.ld-suite {
  margin-top: var(--esp-5); padding-top: var(--esp-4);
  border-top: 1px solid var(--bordure); text-align: center;
}
.ld-suite > p {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--vert); font-weight: 600; margin: 0 0 18px;
}
.ld-suite__l { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Le bouton sous la chronologie de l'accueil. */
.frise__plus { margin-top: var(--esp-4); text-align: center; }

/* Les deux boutons d'un khassida : visualiser et telecharger.
   Cote a cote sur ordinateur, empiles sur telephone ou une rangee de
   deux boutons deborderait de la carte. */
.kh__a2 { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .kh__a2 { width: 100%; }
  .kh__a2 .btn { flex: 1; text-align: center; min-width: 130px; }
}

/* L'ecran de choix de l'inscription : le premier chemin est devenu un
   LIEN vers la connexion (10/09/2026), il garde l'allure des boutons
   voisins. */
a.choix__c { text-decoration: none; color: inherit; }
/* Deux boutons dans un rappel : seul le premier est repousse a droite. */
.rappel button + button { margin-left: 0; }

/* Le titre de la chronologie de l'accueil (10/09/2026) : meme serif que
   les autres titres, soulignee d'un trait or court comme les surtitres. */
.chrono__titre {
  font-family: var(--serif); font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  color: var(--encre); line-height: 1.25; margin: 0 0 var(--esp-3);
}
.chrono__titre::after {
  content: ""; display: block; width: 40px; height: 2px;
  background: var(--or); margin-top: 12px;
}

/* Le bouton oeil des champs mot de passe (10/09/2026), pose par base.js.
   Cible de 48 px, la hauteur du champ, pour le pouce. Edge ajoute son
   propre oeil : on le retire, sinon il y en aurait deux. */
.mdp-bloc { position: relative; }
.champ .mdp-bloc input { padding-right: 54px; }
.mdp-bloc input::-ms-reveal, .mdp-bloc input::-ms-clear { display: none; }
.mdp-oeil {
  position: absolute; top: 0; right: 0; width: 48px; height: 48px;
  display: grid; place-items: center; padding: 0; margin: 0;
  background: none; border: 0; border-radius: var(--r-s);
  color: var(--texte-doux); cursor: pointer;
}
.mdp-oeil:hover { color: var(--vert); }
.mdp-oeil:focus-visible { outline: 2px solid var(--vert); outline-offset: -5px; }
.mdp-oeil[aria-pressed="true"] { color: var(--vert); }
.mdp-oeil svg { width: 22px; height: 22px; }

/* ---------- 10/09/2026 : evenements, cotisation publique, dames, contacts ---------- */
.agenda-vide { grid-column: 1 / -1; }
#agenda .tete--sous { margin-top: var(--esp-5); }
.don-c--cotis { border-top: 3px solid var(--or); }
.don-c__montant {
  font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 2.4rem);
  color: var(--vert); line-height: 1.1; margin: 6px 0 2px;
}
.dames-s { border-top: 1px solid var(--bordure); }
.dames-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--esp-2); }
/* Image posee en absolu dans sa case : max-height 100 % dans une case
   aspect-ratio deborde sur Safari (piege du 29/08/2026). */
.dames-f { position: relative; margin: 0; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 4 / 3; background: var(--bordure); }
.dames-f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Appeler ou ecrire sur WhatsApp, dans l'espace du bureau. Cible de
   40 px, touchable au pouce. */
.tel-l { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.contact-b { display: inline-flex; gap: 6px; }
.ico-b {
  width: 40px; height: 40px; display: inline-grid; place-items: center;
  border: 1px solid var(--bordure); border-radius: 50%;
  background: var(--blanc); color: var(--vert);
}
.ico-b:hover { border-color: var(--vert); }
.ico-b--wa { color: #1f8f4e; }
.ico-b svg { width: 18px; height: 18px; }
.contact-rapide { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.sous-t { margin: 26px 0 4px; font-size: 1rem; }
.case-l { display: flex; align-items: center; gap: 10px; font-size: .95rem; margin: 4px 0 8px; }
.case-l input { width: 20px; height: 20px; accent-color: var(--vert); }

/* La fenetre de l'espace du bureau (admin.html). Son conteneur porte la
   classe « modale__f », qui designe le PIED de fenetre dans cette feuille :
   depuis le 06/09/2026, toutes les fenetres du bureau (encaisser, ajouter
   un membre, fiche) s'affichaient sans fond blanc, en ligne, les boutons
   en haut a droite. Trouve sur une capture le 10/09/2026. */
.modale > .modale__f {
  display: block; position: relative;
  width: min(100%, 640px); max-height: 90vh; overflow-y: auto;
  background: var(--blanc); border-radius: var(--r-l); box-shadow: var(--om-l);
  padding: 24px;
}
.modale > .modale__f > h3 { margin: 0 48px 4px 0; }
.modale > .modale__f > #mS { font-size: .88rem; color: var(--texte-doux); margin: 0 0 18px; }
.modale > .modale__f > .modale__x { position: absolute; top: 10px; right: 10px; }
.modale__a { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 20px; }
@media (max-width: 560px) {
  .modale > .modale__f { padding: 20px 16px; }
  .modale__a .btn { flex: 1; }
}

/* Le prochain evenement dans le hero (11/09/2026). Carte sombre a liseré
   or, cliquable vers l'agenda. Masquee tant qu'aucun evenement n'est publie. */
.hero-evt {
  display: inline-flex; align-items: center; gap: 16px; text-align: left;
  margin-top: var(--esp-4); max-width: min(100%, 520px);
  padding: 12px 20px 12px 12px; border-radius: var(--r-l);
  background: rgba(255, 253, 249, .07); border: 1px solid rgba(201, 150, 47, .45);
  color: var(--blanc); text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
}
.hero-evt:hover { background: rgba(255, 253, 249, .12); border-color: var(--or-clair); color: var(--blanc); }
.hero-evt:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; }
.hero-evt__date {
  flex-shrink: 0; width: 60px; padding: 8px 4px; border-radius: var(--r-m);
  background: var(--or); color: var(--encre); text-align: center;
}
.hero-evt__date b { display: block; font-family: var(--serif); font-size: 1.5rem; line-height: 1; }
.hero-evt__date span { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; margin-top: 3px; }
.hero-evt__c { display: flex; flex-direction: column; min-width: 0; }
.hero-evt__s { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--or-clair); font-weight: 600; }
.hero-evt__t { font-family: var(--serif); font-size: 1.12rem; line-height: 1.25; margin-top: 2px; }
.hero-evt__d { font-size: .86rem; color: rgba(255, 253, 249, .75); margin-top: 2px; }

/* ---------- Eventails de photos (12/09/2026) ----------
   Retraduction HTML du « card-fan-carousel » apporte par Racine. Les
   positions sont posees par app.js en rem ; ici la taille des cartes et
   la hauteur de la scene, par palier de largeur comme le composant. */
.eventail-s { overflow: hidden; border-top: 1px solid var(--bordure); }
.eventail-s--blanc { background: var(--blanc); border-block: 1px solid var(--bordure); }
/* Scene resserree le 12/09/2026 : a 38 rem comme le composant, 200 px
   vides separaient le titre des cartes. Cartes centrees a 46 % de la
   hauteur, les cartes du bord descendant plus bas que celle du milieu. */
.eventail {
  position: relative; height: 32rem; max-width: 80rem; margin: 0 auto;
  touch-action: pan-y;
}
.eventail__c {
  position: absolute; left: 50%; top: 46%; margin: 0;
  width: 15rem; aspect-ratio: 3 / 4; border-radius: 1.1rem; overflow: hidden;
  background: var(--creme); border: 4px solid var(--blanc);
  box-shadow: 0 18px 40px rgba(20, 18, 13, .22);
  transform: translate(-50%, -50%);
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .45s ease;
  will-change: transform;
  cursor: pointer;
}
/* Carte choisie au clic ou a l'appui (13/09/2026) : au premier plan
   (z-index pose par app.js), avec une ombre plus profonde. */
.eventail__c--choisie { box-shadow: 0 26px 60px rgba(20, 18, 13, .38); }
/* Au clavier, la carte (qui ouvre la photo en grand) doit montrer le focus. */
.eventail__c:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }
/* Entree : plus lente et plus rebondie, comme l'elastique du composant. */
.eventail--entree .eventail__c {
  transition: transform 1.1s cubic-bezier(.3, 1.6, .5, 1), opacity .6s ease;
}
/* Image en absolu dans sa case : max-height 100 % dans une case
   aspect-ratio deborde sur Safari (piege du 29/08/2026). */
.eventail__c img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) { .eventail { height: 29rem; } .eventail__c { width: 13rem; } }
@media (max-width: 767px)  { .eventail { height: 26rem; } .eventail__c { width: 11rem; } }
@media (max-width: 639px)  { .eventail { height: 23.5rem; } .eventail__c { width: 9.5rem; } }
@media (max-width: 479px)  { .eventail { height: 17rem; } .eventail__c { width: 8rem; border-width: 3px; } }
@media (prefers-reduced-motion: reduce) {
  .eventail__c, .eventail--entree .eventail__c { transition: none; }
}

/* La commission d'un membre du bureau, sous son poste (12/09/2026). */
.membre-c .membre-c__com { font-size: .8rem; color: var(--texte-doux); font-weight: 400; margin-top: 4px; }