/* ==========================================================================
   Entraide des familles (Enfam-Québec) — feuille de style unique
   Toutes les couleurs, tailles et espacements du site se règlent ici.
   ========================================================================== */

:root{
  /* --- Couleurs de la marque (reprises du logo et du site actuel) --- */
  --bleu-nuit:#0B4A63;      /* bandeaux sombres, pied de page, titres */
  --bleu:#1CA3CC;           /* bleu de la marque : aplats et bordures */
  /* Le bleu de marque ne donne que 2,93:1 sur blanc : sous le seuil de
     3:1 exigé pour un contour de focus et de 4,5:1 pour du texte. Cette
     teinte assombrie (4,6:1) sert partout où il faut LIRE. */
  --bleu-lisible:#1478A0;
  --bleu-pale:#E8F5FA;      /* fonds légers */
  --vert:#4F7220;           /* vert du logo, assombri jusqu'à 5,6:1 sur blanc
                               (le #6FA22F d'origine plafonnait à 3,05:1) */
  --vert-clair:#98D542;     /* vert du logo, pour les petits accents */
  --vert-pale:#F0F7E4;

  /* --- Neutres --- */
  --papier:#F8F7F3;
  --blanc:#FFFFFF;
  --encre:#1C2429;
  --gris:#59656D;
  --gris-clair:#646E75;  /* 5,2:1 sur blanc ; le #8A949B d'origine plafonnait à 3,1:1 */
  --filet:#E3E1D9;

  /* --- Mesures --- */
  --largeur:1180px;
  --gouttiere:28px;
  --rayon:4px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--blanc);
  color:var(--encre);
  font-family:"Public Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--bleu-nuit);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--bleu-lisible)}
:focus-visible{outline:3px solid var(--bleu-lisible);outline-offset:2px}

h1,h2,h3,h4{
  font-family:"Poppins","Public Sans","Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:600;
  line-height:1.22;
  color:var(--bleu-nuit);
  margin:0 0 .5em;
  letter-spacing:-.015em;
}
h1{font-size:clamp(2.1rem,4.6vw,3.15rem)}
h2{font-size:clamp(1.6rem,3vw,2.15rem)}
h3{font-size:1.22rem}
h4{font-size:1.02rem;font-family:inherit;font-weight:700;letter-spacing:.02em}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
li{margin-bottom:.4em}
strong{font-weight:650}

.contenant{max-width:var(--largeur);margin:0 auto;padding:0 var(--gouttiere)}
.etroit{max-width:760px}
.section{padding:76px 0}
.section--papier{background:var(--papier)}
.section--serree{padding:52px 0}

.surtitre{
  font-size:.9rem;font-weight:600;letter-spacing:.01em;
  color:var(--vert);margin:0 0 10px;font-family:inherit;
}
.surtitre::after{
  content:"";display:block;width:34px;height:3px;margin-top:8px;
  background:var(--vert-clair);border-radius:2px;
}
.chapeau{font-size:1.14rem;color:var(--gris);max-width:62ch}
.discret{color:var(--gris);font-size:.92rem}

.lien-flanque{
  display:inline-flex;align-items:center;gap:9px;font-weight:600;
  text-decoration:none;color:var(--bleu-nuit);border-bottom:2px solid var(--vert-clair);
  padding-bottom:2px;
}
.lien-flanque:hover{border-bottom-color:var(--bleu)}
.lien-flanque::after{content:"→";font-size:1.05em;line-height:1}

/* ---------- Accès clavier ---------- */
.saut-contenu{
  position:absolute;left:-9999px;top:0;background:var(--bleu-nuit);color:#fff;
  padding:12px 18px;z-index:200;text-decoration:none;
}
.saut-contenu:focus{left:12px;top:12px}

/* ---------- Boutons ---------- */
.btn{
  display:inline-block;padding:13px 24px;border-radius:var(--rayon);
  font-weight:650;font-size:.96rem;text-decoration:none;border:1.5px solid transparent;
  cursor:pointer;transition:background .15s,color .15s,border-color .15s;
}
.btn--principal{background:var(--bleu-nuit);color:#fff;border-color:var(--bleu-nuit)}
.btn--principal:hover{background:#08394d;color:#fff}
.btn--don{background:var(--vert);color:#fff;border-color:var(--vert)}
.btn--don:hover{background:#5c8827;color:#fff}
.btn--ligne{background:transparent;color:var(--bleu-nuit);border-color:#C6D2D8}
.btn--ligne:hover{border-color:var(--bleu-nuit);color:var(--bleu-nuit)}
.btn--clair{background:#fff;color:var(--bleu-nuit);border-color:#fff}
.btn--clair:hover{background:var(--bleu-pale);color:var(--bleu-nuit)}
.btn--fantome{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--fantome:hover{background:rgba(255,255,255,.12);color:#fff}
.btn--petit{padding:9px 16px;font-size:.86rem}

/* ---------- Bandeau démonstration (à retirer en production) ---------- */
.bandeau-demo{
  background:var(--bleu-nuit);color:#D9E7EE;font-size:.8rem;letter-spacing:.02em;
  padding:8px 0;text-align:center;
}
.bandeau-demo strong{color:#fff}

/* ---------- Barre de service ---------- */
.barre-service{
  background:var(--papier);border-bottom:1px solid var(--filet);
  font-size:.84rem;color:var(--gris);
}
.barre-service .contenant{display:flex;gap:22px;align-items:center;min-height:38px;flex-wrap:wrap}
.barre-service a{color:var(--gris);text-decoration:none}
.barre-service a:hover{color:var(--bleu-nuit);text-decoration:underline}
.barre-service .pousse{margin-left:auto}

/* ---------- En-tête ---------- */
.entete{
  position:sticky;top:0;z-index:100;background:#fff;
  border-bottom:1px solid var(--filet);
}
.entete .contenant{display:flex;align-items:center;gap:26px;min-height:80px}
.marque{display:flex;align-items:center;gap:13px;text-decoration:none;flex-shrink:0}
.marque img{width:50px;height:auto}
.marque-texte b{
  display:block;font-family:"Poppins","Public Sans",sans-serif;font-size:1.06rem;
  color:var(--bleu-nuit);line-height:1.15;font-weight:600;
}
.marque-texte span{display:block;font-size:.72rem;color:var(--gris);letter-spacing:.05em}

.nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.nav a:not(.btn){
  text-decoration:none;color:var(--encre);font-size:.94rem;font-weight:500;
  padding:6px 0;border-bottom:2px solid transparent;
}
.nav a:not(.btn):hover{color:var(--bleu-nuit);border-bottom-color:var(--filet)}
.nav a:not(.btn)[aria-current="page"]{
  color:var(--bleu-nuit);border-bottom-color:var(--vert-clair);font-weight:650}
.actions-entete{display:flex;gap:10px;align-items:center}

.bouton-menu{
  display:none;background:none;border:1px solid var(--filet);border-radius:var(--rayon);
  padding:9px 12px;font-size:.88rem;font-weight:600;color:var(--bleu-nuit);cursor:pointer;
  margin-left:auto;
}

/* ---------- Héros ---------- */
.heros{position:relative;background:var(--bleu-nuit);color:#fff;overflow:hidden}
.heros__image{position:absolute;inset:0}
.heros__image img{width:100%;height:100%;object-fit:cover;opacity:.72}
.heros::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(9,58,78,.90) 0%,rgba(9,58,78,.72) 52%,rgba(9,58,78,.34) 100%);
}
.heros .contenant{position:relative;z-index:2;padding-top:96px;padding-bottom:96px}
.heros h1{color:#fff;max-width:16ch}
.heros__intro{font-size:1.2rem;color:#D5E6EE;max-width:56ch;margin-bottom:30px}
.heros__actions{display:flex;gap:12px;flex-wrap:wrap}
.heros__signature{
  margin-top:38px;padding-top:20px;border-top:1px solid rgba(255,255,255,.22);
  font-size:.86rem;color:#A9C7D4;max-width:52ch;
}

/* ---------- Bande de chiffres ---------- */
.chiffres{background:var(--papier);border-bottom:1px solid var(--filet)}
.chiffres__grille{
  display:grid;grid-template-columns:repeat(4,1fr);
}
.chiffre{padding:34px 26px;border-left:1px solid var(--filet)}
.chiffre:first-child{border-left:0;padding-left:0}
.chiffre b{
  display:block;font-family:"Poppins","Public Sans",sans-serif;font-size:2.3rem;
  color:var(--vert);line-height:1;font-weight:700;letter-spacing:-.02em;
}
.chiffre span{display:block;margin-top:9px;font-size:.83rem;color:var(--gris);line-height:1.45}

/* ---------- Deux colonnes ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.duo--texte-droite{grid-template-columns:1fr 1.05fr}
.duo img{border-radius:var(--rayon)}

/* ---------- Liste de services ---------- */
.services{border-top:1px solid var(--filet)}
.service{
  display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:26px;
  padding:28px 0;border-bottom:1px solid var(--filet);align-items:start;
}
.service__num{display:none}
.service h3{margin-bottom:.35em}
.service p{margin:0;color:var(--gris);font-size:.98rem}
.service__action{text-align:right;padding-top:4px}

/* ---------- Cartes sobres ---------- */
.cartes{display:grid;gap:26px}
.cartes--3{grid-template-columns:repeat(3,1fr)}
.cartes--2{grid-template-columns:repeat(2,1fr)}
.carte{
  background:#fff;border:1px solid var(--filet);border-radius:var(--rayon);
  padding:28px;
}
.carte--papier{background:var(--papier)}
.carte h3{margin-bottom:.4em}
.carte p:last-child{margin-bottom:0}
.carte__filet{width:38px;height:3px;background:var(--vert-clair);margin-bottom:18px}

/* ---------- Étapes ---------- */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:etape}
.etape{padding:0 26px;border-left:1px solid var(--filet)}
.etape:first-child{border-left:0;padding-left:0}
.etape b{display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--vert);margin-bottom:9px}
.etape h3{font-size:1.05rem;font-family:inherit;font-weight:700;margin-bottom:.35em}
.etape p{font-size:.93rem;color:var(--gris);margin:0}

/* ---------- Rendez-vous ---------- */
.rdv{background:var(--bleu-nuit);color:#fff}
.rdv h2{color:#fff}
.rdv .chapeau{color:#C9DEE8}
.rdv__cadre{
  background:#fff;border-radius:var(--rayon);overflow:hidden;
  box-shadow:0 12px 34px rgba(0,0,0,.20);
}
.rdv__cadre iframe{display:block;width:100%;height:760px;border:0}
.rdv__cadre--repli{box-shadow:none;background:var(--papier);border:1px dashed #C3CDD3}
.rdv__repli{padding:60px 34px;text-align:center;color:var(--gris)}
.rdv__repli h3{color:var(--bleu-nuit);font-size:1.35rem;margin-bottom:.5em}
.rdv__repli p{max-width:58ch;margin-left:auto;margin-right:auto}
.rdv__repli .btn{margin:6px 0 18px}
.rdv__liste{list-style:none;padding:0;margin:0 0 26px}
.rdv__liste li{
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.16);
  display:flex;justify-content:space-between;gap:18px;font-size:.95rem;color:#DCEAF1;
}
.rdv__liste li span:last-child{color:#9BBFCE;font-size:.86rem;white-space:nowrap}

/* ---------- Galerie ---------- */
.galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.galerie img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--rayon)}

/* ---------- Citation ---------- */
.citation{
  border-left:3px solid var(--vert-clair);padding:6px 0 6px 26px;margin:0;
  font-family:"Poppins","Public Sans",sans-serif;font-size:1.35rem;color:var(--bleu-nuit);
  line-height:1.45;
}
.citation cite{display:block;margin-top:12px;font-family:inherit;font-size:.9rem;font-style:normal;color:var(--gris);font-weight:400}

/* ---------- Appel au don ---------- */
.don{background:var(--vert-pale);border-top:1px solid #DCE9C8;border-bottom:1px solid #DCE9C8}
.don__grille{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center}
.montants{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.montant{
  border:1.5px solid #C6D9A6;background:#fff;border-radius:var(--rayon);
  padding:14px 20px;text-align:center;min-width:92px;text-decoration:none;color:var(--encre);
}
.montant:hover{border-color:var(--vert);color:var(--encre)}
.montant input{display:block;margin:0 auto 8px;accent-color:var(--vert)}
form .montants .montant{flex:1 1 0;min-width:0}
form .montants .montant span{hyphens:auto}
.montant:has(input:checked){border-color:var(--vert);background:var(--vert-pale)}
.montant b{display:block;font-family:"Poppins","Public Sans",sans-serif;font-size:1.3rem;color:var(--bleu-nuit)}
.montant span{display:block;font-size:.76rem;color:var(--gris);margin-top:3px}

/* ---------- Agenda ---------- */
.agenda{list-style:none;padding:0;margin:0;border-top:1px solid var(--filet)}
.agenda li{
  display:grid;grid-template-columns:110px 1fr 170px;gap:24px;
  padding:22px 0;border-bottom:1px solid var(--filet);align-items:center;
}
.agenda .date{
  font-family:"Poppins","Public Sans",sans-serif;color:var(--bleu-nuit);font-size:1rem;line-height:1.3;
}
.agenda .date b{display:block;font-size:1.7rem;font-weight:600}
.agenda h3{font-size:1.06rem;margin-bottom:.25em}
.agenda p{margin:0;font-size:.92rem;color:var(--gris)}

/* ---------- Partenaires ---------- */
.partenaires{display:flex;flex-wrap:wrap;gap:14px}
.partenaire{
  border:1px solid var(--filet);border-radius:var(--rayon);padding:12px 20px;
  font-size:.9rem;color:var(--gris);background:#fff;
}

/* ---------- Formulaires ---------- */
.champ{margin-bottom:18px}
.champ label{display:block;font-size:.88rem;font-weight:600;margin-bottom:6px;color:var(--encre)}
.champ input,.champ select,.champ textarea{
  width:100%;padding:11px 13px;border:1px solid #CFD6DA;border-radius:var(--rayon);
  font-family:inherit;font-size:.97rem;background:#fff;color:var(--encre);
}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--bleu);outline:2px solid var(--bleu-pale)}
.champ textarea{min-height:140px;resize:vertical}
.aide{font-size:.82rem;color:var(--gris);margin-top:5px}

/* ---------- Accordéon FAQ ---------- */
.faq{border-top:1px solid var(--filet)}
.faq details{border-bottom:1px solid var(--filet)}
.faq summary{
  padding:19px 0;cursor:pointer;font-weight:650;color:var(--bleu-nuit);
  list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.35rem;color:var(--vert);line-height:1;font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details > div{padding:0 0 20px;color:var(--gris);max-width:70ch}

/* ---------- Fil d'Ariane + entête de page ---------- */
.entete-page{background:var(--bleu-nuit);color:#fff;padding:58px 0}
.entete-page h1{color:#fff;margin-bottom:.3em}
.entete-page p{color:#C9DEE8;margin:0;max-width:60ch}
.fil{font-size:.82rem;color:#9BBFCE;margin-bottom:16px}
.fil a{color:#9BBFCE}
.fil a:hover{color:#fff}

/* ---------- Pied de page ---------- */
.pied{background:var(--bleu-nuit);color:#B9D2DD;padding:64px 0 0;font-size:.93rem}
.pied a{color:#B9D2DD;text-decoration:none}
.pied a:hover{color:#fff;text-decoration:underline}
.pied h4,.pied .pied__titre{color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.pied__grille{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:44px}
.pied ul{list-style:none;padding:0;margin:0}
.pied li{margin-bottom:9px}
.pied__marque{display:flex;gap:13px;align-items:flex-start;margin-bottom:16px}
.pied__marque img{width:46px;background:#fff;border-radius:var(--rayon);padding:4px}
.pied__marque b{color:#fff;font-family:"Poppins","Public Sans",sans-serif;font-size:1.05rem;display:block}
.pied__bas{
  margin-top:52px;border-top:1px solid rgba(255,255,255,.16);padding:20px 0;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.84rem;color:#9BBFCE;
}
.infolettre input{
  width:100%;padding:11px 13px;border:1px solid rgba(255,255,255,.28);border-radius:var(--rayon);
  background:rgba(255,255,255,.08);color:#fff;font-family:inherit;font-size:.94rem;margin-bottom:10px;
}
.infolettre input::placeholder{color:#9BBFCE}

/* ---------- Utilitaires ---------- */
.mt0{margin-top:0}.mb0{margin-bottom:0}
.mb24{margin-bottom:24px}.mb40{margin-bottom:40px}
.centre{text-align:center}
.visuellement-cache{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

/* ---------- Adaptation mobile ---------- */
@media (max-width:1020px){
  .duo,.duo--texte-droite{grid-template-columns:1fr;gap:34px}
  .cartes--3{grid-template-columns:1fr 1fr}
  .etapes{grid-template-columns:1fr 1fr;gap:30px 0}
  .etape:nth-child(3){border-left:0;padding-left:0}
  .don__grille{grid-template-columns:1fr;gap:34px}
  .pied__grille{grid-template-columns:1fr 1fr;gap:36px}
  .galerie{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:800px){
  body{font-size:16px}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--filet);flex-direction:column;align-items:stretch;
    gap:0;padding:8px var(--gouttiere) 18px;box-shadow:0 14px 24px rgba(0,0,0,.07);
  }
  .nav.ouvert{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--filet)}
  .nav a[aria-current="page"]{border-bottom-color:var(--filet)}
  .actions-entete{flex-direction:column;align-items:stretch;gap:9px;margin-top:14px}
  .actions-entete .btn{text-align:center}
  .bouton-menu{display:block}
  .entete .contenant{position:relative;min-height:68px}
  .chiffres__grille{grid-template-columns:1fr 1fr}
  .chiffre{border-left:0;padding:24px 0}
  .chiffre:nth-child(even){padding-left:26px;border-left:1px solid var(--filet)}
  .service{grid-template-columns:1fr;gap:10px}
  .services--periodicite .service{grid-template-columns:1fr}
  .service__action{grid-column:1/-1;text-align:left;padding-top:12px}
  .cartes--3,.cartes--2{grid-template-columns:1fr}
  .etapes{grid-template-columns:1fr;gap:26px}
  .etape{border-left:0;padding-left:0}
  .agenda li{grid-template-columns:1fr;gap:8px}
  .galerie{grid-template-columns:1fr 1fr}
  .section{padding:52px 0}
  .heros .contenant{padding-top:64px;padding-bottom:64px}
  .rdv__cadre iframe{height:640px}
  .pied__grille{grid-template-columns:1fr}
  .barre-service .contenant{font-size:.79rem;gap:14px}
}

/* ---------- Impression ---------- */
@media print{
  .entete,.barre-service,.bandeau-demo,.pied,.rdv__cadre{display:none}
  body{font-size:11pt;color:#000}
}

/* ==========================================================================
   ESPACE MEMBRE — connexion, tableau de bord, formulaire d'adhésion
   ========================================================================== */

/* --- Bandeau de connexion --- */
.connexion{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.connexion__carte{
  background:#fff;border:1px solid var(--filet);border-radius:var(--rayon);
  padding:34px;box-shadow:0 6px 22px rgba(11,74,99,.07);
}

/* --- Barre membre --- */
.barre-membre{background:var(--bleu-nuit);color:#C9DEE8;padding:12px 0;font-size:.9rem}
.barre-membre .contenant{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.barre-membre b{color:#fff}
.barre-membre a{color:#9FC5D6}
.barre-membre .pousse{margin-left:auto}

/* --- Onglets --- */
.onglets{display:flex;gap:4px;border-bottom:1px solid var(--filet);margin-bottom:34px;flex-wrap:wrap}
.onglets a{
  padding:12px 18px;text-decoration:none;color:var(--gris);font-weight:600;font-size:.94rem;
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.onglets a:hover{color:var(--bleu-nuit)}
.onglets a[aria-current="true"]{color:var(--bleu-nuit);border-bottom-color:var(--vert)}

/* --- Vignettes de dossier --- */
.dossier{display:grid;grid-template-columns:1fr 320px;gap:44px;align-items:start}
.bloc{border:1px solid var(--filet);border-radius:var(--rayon);padding:26px;margin-bottom:22px;background:#fff}
.bloc h3{font-size:1.08rem;margin-bottom:.6em}
.bloc:last-child{margin-bottom:0}

.paires{display:grid;grid-template-columns:1fr 1fr;gap:2px 26px}
.paire{padding:9px 0;border-bottom:1px solid var(--filet);font-size:.94rem}
.paire span{display:block;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-clair)}
.paire b{font-weight:600;color:var(--encre)}

/* --- Étiquettes d'état --- */
.etat{
  display:inline-block;padding:3px 10px;border-radius:20px;font-size:.76rem;font-weight:700;
  letter-spacing:.03em;
}
.etat--actif{background:var(--vert-pale);color:#4C7A18;border:1px solid #C6D9A6}
.etat--attente{background:#FDF3DD;color:#8A6114;border:1px solid #EBD9A8}
.etat--termine{background:var(--bleu-pale);color:#0B4A63;border:1px solid #BFDDEA}

/* --- Liste de services du membre --- */
.mes-services{list-style:none;padding:0;margin:0}
.mes-services li{
  display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;
  padding:15px 0;border-bottom:1px solid var(--filet);
}
.mes-services li:last-child{border-bottom:0;padding-bottom:0}
.mes-services h4{margin:0 0 3px;font-size:.98rem}
.mes-services p{margin:0;font-size:.86rem;color:var(--gris)}

/* --- Formulaire par étapes --- */
.jalons{display:flex;gap:0;margin-bottom:38px;flex-wrap:wrap;border-top:1px solid var(--filet)}
.jalon{
  flex:1 1 0;min-width:120px;padding:14px 14px 14px 0;border-top:3px solid var(--filet);
  margin-top:-1px;font-size:.82rem;color:var(--gris-clair);
}
.jalon b{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px}
.jalon[data-etat="courant"]{border-top-color:var(--vert);color:var(--bleu-nuit)}
.jalon[data-etat="courant"] b{color:var(--vert)}
.jalon[data-etat="fait"]{border-top-color:var(--bleu);color:var(--gris)}
.jalon[data-etat="fait"] b{color:var(--bleu)}

.etape-form{display:none}
.etape-form[data-visible="oui"]{display:block}

.grille-champs{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.grille-champs .champ--large{grid-column:1/-1}
.champ--erreur input,.champ--erreur select,.champ--erreur textarea{border-color:#B4322A;background:#FDF6F5}
.msg-erreur{color:#B4322A;font-size:.83rem;margin-top:5px;display:none}
.champ--erreur .msg-erreur{display:block}
.requis{color:#B4322A}

fieldset{border:1px solid var(--filet);border-radius:var(--rayon);padding:22px 24px;margin:0 0 22px}
legend{font-weight:700;font-size:.92rem;padding:0 8px;color:var(--bleu-nuit)}

.choix{display:grid;gap:8px;margin-bottom:6px}
.choix--2{grid-template-columns:1fr 1fr}
.choix label{
  display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border:1px solid #CFD6DA;
  border-radius:var(--rayon);font-size:.94rem;cursor:pointer;background:#fff;
}
.choix label:hover{border-color:var(--bleu)}
.choix input{margin:3px 0 0;accent-color:var(--vert);flex-shrink:0}
.choix label:has(input:checked){border-color:var(--vert);background:var(--vert-pale)}

/* --- Personnes répétables --- */
.personne{
  border:1px solid var(--filet);border-left:3px solid var(--vert-clair);border-radius:var(--rayon);
  padding:20px 22px;margin-bottom:16px;background:var(--papier);
}
.personne__tete{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}
.personne__tete h4{margin:0;font-size:.95rem;color:var(--bleu-nuit)}
.btn-retirer{
  background:none;border:0;color:#B4322A;font-size:.85rem;font-weight:600;cursor:pointer;
  text-decoration:underline;padding:0;
}
.btn-ajouter{
  background:#fff;border:1.5px dashed #BFC9CF;border-radius:var(--rayon);padding:13px 20px;
  width:100%;font-family:inherit;font-size:.94rem;font-weight:600;color:var(--bleu-nuit);cursor:pointer;
}
.btn-ajouter:hover{border-color:var(--vert);color:var(--vert)}

/* --- Consentement --- */
.consentement{background:var(--bleu-pale);border:1px solid #BFDDEA;border-radius:var(--rayon);padding:26px}
.consentement h3{margin-top:0}
.consentement ul{font-size:.94rem}

/* --- Récapitulatif --- */
.recap{border:1px solid var(--filet);border-radius:var(--rayon);overflow:hidden}
.recap section{border-bottom:1px solid var(--filet);padding:20px 24px}
.recap section:last-child{border-bottom:0}
.recap h4{margin:0 0 12px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--vert)}
.recap dl{display:grid;grid-template-columns:190px 1fr;gap:7px 18px;margin:0;font-size:.93rem}
.recap dt{color:var(--gris)}
.recap dd{margin:0;font-weight:600}

.nav-form{display:flex;justify-content:space-between;gap:14px;margin-top:32px;flex-wrap:wrap}

/* --- Tableau de reddition --- */
.tableau{width:100%;border-collapse:collapse;font-size:.93rem}
.tableau th,.tableau td{padding:11px 14px;border-bottom:1px solid var(--filet);text-align:left}
.tableau th{
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);
  border-bottom:2px solid var(--filet);font-weight:700;
}
.tableau td.n{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.tableau tr:last-child td{border-bottom:0}
.barre-val{height:6px;background:var(--bleu-pale);border-radius:3px;overflow:hidden;margin-top:5px}
.barre-val i{display:block;height:100%;background:var(--bleu);border-radius:3px}

@media (max-width:1020px){
  .connexion{grid-template-columns:1fr;gap:34px}
  .dossier{grid-template-columns:1fr;gap:28px}
}
@media (max-width:800px){
  .grille-champs{grid-template-columns:1fr}
  .paires{grid-template-columns:1fr}
  .choix--2{grid-template-columns:1fr}
  .recap dl{grid-template-columns:1fr;gap:2px}
  .recap dd{margin-bottom:9px}
  .jalon{min-width:100px;font-size:.76rem}
}

/* ---------- Formulaire d'intention de don ----------
   Le champ-piège doit rester lisible par un lecteur d'écran-robot mais
   invisible et inatteignable pour une personne : display:none suffirait à
   duper les robots naïfs, mais retire aussi le champ du flux de tabulation,
   ce que font déjà tabindex="-1" et aria-hidden. */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cache{display:none}
.avis{padding:13px 15px;border-radius:var(--rayon);font-size:.9rem;margin:0 0 16px}
.avis--ok{background:var(--vert-pale);color:#3B5C12;border:1px solid #CFE3A8}
.avis--erreur{background:#FDF0EF;color:#8B2018;border:1px solid #F0CBC7}
.avis--info{background:var(--bleu-pale);color:#12556B;border:1px solid #C5E4EF}
.infolettre__retour{font-size:.85rem;margin-top:10px;color:#DCEBDD}

/* Périodicité affichée en tête de service (page des activités).
   Bornée à partir de 801 px : sans cette borne, la règle écrasait le
   repli en une colonne défini plus haut dans la requête média, et la
   page débordait sur les petits téléphones. Une règle générale placée
   APRÈS une requête média l'emporte sur elle. */
@media (min-width:801px){
  .services--periodicite .service{grid-template-columns:96px minmax(0,1fr) 200px}
}
.services--periodicite .service__num{
  display:block;font-weight:700;font-size:.86rem;color:var(--vert);padding-top:4px;
}


/* ══════════════════════════════════════════════════════════════════
   Confort tactile — écrans jusqu'à 800 px
   Une cible de 20 px se rate une fois sur trois au pouce. Le seuil
   retenu est 44 px, celui des recommandations WCAG 2.5.5. On agrandit
   par le rembourrage, jamais par la taille du texte : la page ne
   bouge pas, seule la zone sensible grandit.
   Les liens en pleine phrase (un numéro de téléphone dans un
   paragraphe) sont exclus : la norme les dispense, et les espacer
   casserait l'interligne.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:800px){
  /* Agrandir les cibles a fait passer la barre sur trois rangées : elle
     mangeait le tiers du premier écran. Sur téléphone on ne garde que ce
     qui sert à joindre tout de suite — l'adresse et Facebook sont dans le
     pied de page, à un pouce de défilement. */
  .barre-service .contenant{gap:0 20px;padding-top:0;padding-bottom:0;flex-wrap:nowrap}
  .barre-service a,
  .barre-service span{display:inline-flex;align-items:center;min-height:44px}
  .barre-service > .contenant > span:first-child,
  .barre-service .pousse{display:none}
  .barre-service a{white-space:nowrap}

  .bouton-menu{padding:12px 16px;min-height:44px}
  .nav a{padding:12px 0;min-height:44px;display:flex;align-items:center}
  .marque{min-height:48px}

  .fil a{display:inline-block;padding:10px 0;min-height:44px}

  .lien-flanque{padding:9px 0;min-height:44px}

  .btn{padding:14px 22px;min-height:48px;display:inline-flex;
       align-items:center;justify-content:center}
  .btn--petit{padding:12px 18px;min-height:44px;font-size:.9rem}

  .pied a{display:inline-block;padding:9px 0;min-height:44px}
  select,
  .infolettre input{min-height:48px}
  .infolettre button{min-height:48px}

  /* Le texte de la barre de service et de la marque était sous 12 px :
     lisible sur un écran de bureau, pas sur un téléphone tenu à bout de bras. */
  .barre-service{font-size:.86rem}
  .marque-texte span{font-size:.78rem}
}

/* Tablette : la navigation horizontale devient serrée avant de basculer
   en menu. On resserre les gouttières plutôt que de rétrécir le texte. */
@media (min-width:801px) and (max-width:1020px){
  .nav{gap:14px}
  .nav a{font-size:.89rem}
  .actions-entete{gap:6px}
  .btn--petit{padding:8px 12px}
}

/* Sous 560 px, trois éléments sur une rangée obligent à couper le numéro
   de téléphone en deux. On n'en garde que deux : appeler, et entrer dans
   son dossier. Le courriel reste dans le pied de page et sur la page
   « Nous joindre ». */
@media (max-width:560px){
  .barre-service a[href^="mailto:"]{display:none}
  .barre-service .contenant{justify-content:space-between}
}

/* Sous 400 px (iPhone SE, Galaxy A, et tout téléphone tenu en une main),
   la marque refusait de rétrécir : l'en-tête dépassait de 7 px et le
   document défilait latéralement. On réduit la gouttière et on autorise
   la marque à se comprimer. */
@media (max-width:400px){
  .contenant{padding:0 18px}
  .marque{flex-shrink:1;min-width:0}
  .marque img{width:42px}
  .marque-texte b{font-size:.98rem}
  .marque-texte span{font-size:.74rem}
  .bouton-menu{padding:12px 13px}
}