/* Ossature de l'espace famille — barre de compte, messages, listes, pied.
   Ce que le §4 du handoff ne couvre pas : il inventorie les composants d'écran,
   pas la coquille de navigation. Même discipline : rien ici n'est thémable
   au-delà des variables --ef-*, aucune couleur en dur. */

.lien-evitement { position:absolute; left:-9999px; z-index:10;
  background:var(--ef-accent); color:var(--ef-accent-texte); padding:12px var(--e-4); }
.lien-evitement:focus { left:var(--e-2); top:var(--e-2); }

/* --- Barre de compte -------------------------------------------------------
   Toujours au-dessus du bandeau d'écran. Elle porte l'identité de la
   plateforme, pas celle de l'événement : elle ne prend donc pas l'accent
   d'ambiance mais l'encre. */
.ef-barre { background:var(--ef-encre); color:#fff; }
/* ENF-7.6 — 375 px sans défilement horizontal. Les items de la barre passent
   à la ligne plutôt que de pousser la page : une adresse email longue ne doit
   pas décaler tout l'écran vers la droite. */
.ef-barre .contenu { max-width:var(--ef-largeur); margin:0 auto; padding:10px var(--e-4);
  display:flex; align-items:center; gap:var(--e-2) var(--e-3); flex-wrap:wrap; }
/* `body.ef a` (0,2,1) l'emporte sur `.ef-barre a` (0,1,1) : les liens de la
   barre prenaient l'accent d'ambiance — un bleu à 1,3:1 sur le fond encre,
   illisible. La barre est la seule surface sombre de l'espace famille, et
   elle appartient à la plateforme, pas à l'événement : ses liens sont blancs,
   quelle que soit l'ambiance (ENF-7.8). */
body.ef .ef-barre a { color:#fff; text-decoration:none; }
body.ef .ef-barre a:hover { color:#fff; text-decoration:underline; }
/* Pas d'opacité sur le verrou entier : elle se cumulerait à celle de la
   seconde ligne, qui disparaîtrait. La discrétion est déjà dans le corps. */
.ef-barre .marque { color:#fff; }
.ef-barre .marque .marque-ligne2 { opacity:.6; }
.ef-barre nav { margin-left:auto; display:flex; align-items:center;
  gap:var(--e-2) var(--e-3); flex-wrap:wrap; min-width:0; }
.ef-barre nav a { font-size:var(--t-secondaire); }
.ef-barre nav a:hover { text-decoration:underline; }
.ef-barre .titulaire { font-weight:600; display:inline-flex; align-items:center;
  gap:5px; min-width:0; overflow-wrap:anywhere; }
.ef-barre form { margin:0; }
.ef-barre .lien-bouton { background:none; border:none; padding:0; cursor:pointer;
  font:inherit; font-size:var(--t-secondaire); color:#fff; text-decoration:underline; }
/* Une adresse non confirmée se signale partout, pas seulement au tableau de
   bord : sans email vérifié, aucune notification n'arrive. */
.ef-barre .signal { display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%; flex:none;
  background:var(--statut-attention); color:#fff;
  font-family:var(--chiffres); font-size:10px; font-weight:600; }

.ef-logo { height:32px; width:auto; display:block; }

/* --- Contenu --------------------------------------------------------------- */

.ef-page > h2 { font-size:var(--t-titre-s); margin:var(--e-5) 0 var(--e-2); }
.ef-page p { margin:0 0 var(--e-3); }
.ef-page p:last-child { margin-bottom:0; }
.ef-intro { font-size:var(--t-secondaire); color:var(--ef-encre-doux); }

/* Liste de lignes cliquables : mes personnes, mes inscriptions. */
.ef-liste { list-style:none; margin:0; padding:0; background:var(--ef-surface);
  border:1px solid var(--ef-bordure); border-radius:6px; overflow:hidden; }
.ef-liste > li { border-bottom:1px solid var(--ef-bordure); }
.ef-liste > li:last-child { border-bottom:none; }
.ef-liste a, .ef-liste .ligne { display:flex; align-items:center; gap:var(--e-3);
  padding:var(--e-3) 14px; min-height:var(--touche-min); text-decoration:none;
  color:var(--ef-encre); flex-wrap:wrap; }
.ef-liste a:hover { background:color-mix(in srgb, var(--ef-encre) 4%, transparent); }
.ef-liste .principal { font-weight:600; }
.ef-liste .appoint { margin-left:auto; font-family:var(--chiffres);
  font-size:var(--t-libelle); color:var(--ef-encre-doux); text-align:right; }
.ef-liste .appoint.bloquant { color:var(--statut-bloquant); font-weight:600; }
.ef-liste .empile { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ef-liste .empile .detail { font-family:var(--chiffres); font-size:var(--t-libelle);
  color:var(--ef-encre-doux); }

/* Bloc « À faire » : ce qui fait avancer un dossier, en premier (F1). */
.ef-tache { border:1px solid var(--statut-bloquant-bord); background:var(--statut-bloquant-fond);
  border-radius:6px; padding:14px; display:flex; flex-direction:column; gap:7px; }
.ef-tache + .ef-tache { margin-top:var(--e-2); }
.ef-tache .titre { font-weight:600; color:var(--statut-bloquant); font-size:var(--t-corps); }
.ef-tache .detail { font-family:var(--chiffres); font-size:var(--t-libelle); color:var(--ef-encre-doux); }
.ef-tache .ef-btn { background:var(--statut-bloquant); color:#fff; padding:11px;
  font-size:var(--t-secondaire); }
.ef-tache.attention { border-color:var(--statut-bloquant-bord); background:var(--statut-attention-fond); }
.ef-tache.attention .titre { color:var(--statut-attention); }

/* Compteur isolé — le rang d'attente de F5. */
.ef-compteur { display:flex; align-items:baseline; gap:var(--e-2); }
.ef-compteur b { font-family:var(--chiffres); font-size:var(--t-compteur); font-weight:600; }
.ef-compteur span { font-size:var(--t-secondaire); color:var(--ef-encre-doux); }

/* Compte à rebours : un chiffre, donc chasse fixe, et la couleur d'un délai
   qui court — ambre tant qu'il reste du temps, brique sous six heures. */
.ef-rebours { border:1px solid var(--ef-bordure); border-radius:var(--r-m);
  padding:var(--e-3) 14px; display:flex; align-items:baseline; gap:var(--e-2); }
.ef-rebours b { font-family:var(--chiffres); font-size:var(--t-titre-m); font-weight:600;
  color:var(--statut-attention); }
.ef-rebours.urgent b { color:var(--statut-bloquant); }
.ef-rebours span { font-size:var(--t-libelle); color:var(--ef-encre-doux); }

/* --- Messages Django ------------------------------------------------------- */

.ef-messages { list-style:none; margin:0 0 var(--e-4); padding:0;
  display:flex; flex-direction:column; gap:var(--e-2); }
.ef-messages li { padding:11px 13px; border-radius:var(--r-m); font-size:var(--t-secondaire);
  border:1px solid var(--statut-bloquant-bord);
  color:var(--statut-attention); background:var(--statut-attention-fond); }
.ef-messages li.success { color:var(--statut-ok); background:var(--statut-ok-fond);
  border-color:var(--statut-ok-bord); }
.ef-messages li.error { color:var(--statut-bloquant); background:var(--statut-bloquant-fond); }
/* Une information n'est pas un statut : elle emprunte l'ambiance, pas le
   code à trois couleurs, qui reste réservé à l'état d'un dossier. */
.ef-messages li.info, .ef-messages li.debug { color:var(--ef-encre);
  background:color-mix(in srgb, var(--ef-encre) 5%, transparent); border-color:var(--ef-bordure); }

.resume-erreurs { border:1px solid var(--statut-bloquant-bord); background:var(--statut-bloquant-fond);
  border-radius:var(--r-m); padding:12px 13px; margin-bottom:var(--e-4);
  font-size:var(--t-secondaire); color:var(--statut-bloquant); font-weight:600; }
.resume-erreurs p { margin:0 0 var(--e-1); }
.resume-erreurs p:last-child { margin:0; }

/* --- Tableaux (historique des versements) ----------------------------------
   Un tableau financier ne tient pas sur 375 px : il défile dans son propre
   cadre, jamais la page entière (ENF-7.6). */
.ef-tableau { overflow-x:auto; background:var(--ef-surface);
  border:1px solid var(--ef-bordure); border-radius:6px; }
.ef-tableau table { border-collapse:collapse; width:100%; min-width:30rem; }
.ef-tableau th, .ef-tableau td { text-align:left; padding:var(--e-3) 14px;
  border-bottom:1px solid var(--ef-bordure); font-size:var(--t-secondaire); }
.ef-tableau th { background:color-mix(in srgb, var(--ef-encre) 4%, transparent);
  font-size:var(--t-meta); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ef-encre-doux); }
.ef-tableau tbody tr:last-child td { border-bottom:none; }
.ef-tableau td.num { font-family:var(--chiffres); font-variant-numeric:tabular-nums;
  white-space:nowrap; }

/* --- Actions et pied -------------------------------------------------------- */

.ef-actions { display:flex; flex-direction:column; gap:var(--e-2); margin-top:var(--e-4); }
.ef-note { font-size:var(--t-libelle); color:var(--ef-encre-doux); text-align:center;
  margin-top:var(--e-3); }

.ef-pied { border-top:1px solid var(--ef-bordure); margin-top:var(--e-6);
  padding:var(--e-5) var(--e-4) var(--e-6); }
.ef-pied div { max-width:var(--ef-largeur); margin:0 auto; font-size:var(--t-libelle);
  color:var(--ef-encre-doux); }

.ef-vide { text-align:center; color:var(--ef-encre-doux); font-size:var(--t-secondaire);
  padding:var(--e-5) var(--e-4); border:1px dashed var(--ef-bordure); border-radius:6px; }

/* --- Bandeau d'écran, variante neutre --------------------------------------
   Le bandeau à l'accent (.ef-entete, composants.css) signale qu'on est à
   l'intérieur d'un événement : c'est là, et seulement là, qu'une ambiance a un
   sens. Les écrans du compte — mon espace, mon profil, mes paiements,
   connexion — n'appartiennent à aucun événement et gardent un bandeau neutre. */
.ef-entete.neutre { background:var(--ef-surface); color:var(--ef-encre);
  border-bottom:1px solid var(--ef-bordure); }
.ef-entete.neutre .surtitre { color:var(--ef-encre-doux); opacity:1; }
.ef-entete.neutre .rang-etape { color:var(--ef-encre-doux); opacity:1; }

/* Titre et compteur d'étape sur une même ligne de base. */
.ef-entete .ligne-titre { display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--e-3); }
.ef-entete .dedans { max-width:var(--ef-largeur); margin:0 auto; width:100%;
  display:flex; flex-direction:column; gap:5px; }

/* Dernier filet contre le défilement horizontal : aucun mot, si long soit-il,
   n'élargit la page. Le nom saisi par une famille n'est jamais raccourci
   (EF-1.4) — il passe donc à la ligne. */
body.ef { overflow-wrap: break-word; }
/* `.ef-page` est exclue : sa largeur maximale est celle de la colonne, et la
   remettre à 100 % ici la ferait s'étendre sur toute la fenêtre — c'est ce qui
   arrivait, et le contenu s'étalait sur 1 280 px. */
.ef-carte, .ef-tache, .ef-liste { max-width:100%; }

/* Sous-titre du bandeau : une information de contexte, pas un intitulé
   technique. Il garde donc sa casse — « famille KIBALONGO », jamais
   « FAMILLE KIBALONGO » : un nom n'est pas recapitalisé (EF-1.4). */
.ef-entete .sous-titre { font-family:var(--chiffres); font-size:var(--t-libelle);
  color:var(--ef-encre-doux); }
.ef-entete:not(.neutre) .sous-titre { color:var(--ef-accent-texte); opacity:.85; }

/* --- Textes à signer ------------------------------------------------------
   Un règlement se lit avant de se signer : on lui donne la largeur et
   l'interligne d'un texte, pas d'un formulaire. L'encadré le distingue de ce
   qui l'entoure — c'est lui qui engage, le reste explique. */
.ef-texte-legal {
  margin: var(--e-4) 0; padding: var(--e-4);
  max-height: 26rem; overflow-y: auto;
  background: var(--ef-surface); border: 1px solid var(--ef-bordure);
  border-radius: var(--r-m); line-height: 1.65;
}
.ef-texte-legal > *:first-child { margin-top: 0; }
.ef-texte-legal > *:last-child { margin-bottom: 0; }
.ef-texte-legal h2, .ef-texte-legal h3 { font-size: var(--t-corps); }

/* Retirer un consentement est un geste à part : il ne se confond pas avec le
   bouton qui l'a donné. */
.ef-revoquer {
  margin-top: var(--e-5); padding-top: var(--e-4);
  border-top: 1px solid var(--ef-bordure);
}

/* --- Parcours en étapes ----------------------------------------------------
   Une barre par étape plutôt qu'une seule qui se remplit : on veut voir
   combien il en reste, pas un pourcentage. */
.ef-jalons { display: flex; gap: 6px; padding: 0 var(--e-4) var(--e-3); }
.ef-jalons > i {
  flex: 1; height: 4px; border-radius: 2px; background: var(--ef-bordure);
}
.ef-jalons > i.fait { background: var(--statut-ok); }
.ef-jalons > i.courante { background: var(--ef-accent); }

/* Le récapitulatif avant le dernier geste : on relit ce qu'on a saisi là où
   on va s'engager, pas sur l'écran d'après. */
.ef-recapitulatif {
  margin: var(--e-4) 0; padding: var(--e-4);
  background: var(--ef-fond); border-radius: var(--r-m);
}
.ef-recapitulatif .ef-section { margin-top: 0; }
.ef-recapitulatif dl { margin: 0; }
.ef-recapitulatif dl > div {
  display: flex; justify-content: space-between; gap: var(--e-3);
  padding: 5px 0; font-size: var(--t-secondaire);
}
.ef-recapitulatif dt { color: var(--ef-encre-doux); }
.ef-recapitulatif dd { margin: 0; text-align: right; }
.ef-verifie { color: var(--statut-ok); font-weight: 600; }

/* Un consentement se lit en phrase, et la case est devant : on ne coche pas
   sans avoir lu ce qu'on coche. */
.champ.ef-consentement > label {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--t-secondaire); font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--ef-encre); cursor: pointer;
}
.champ.ef-consentement > label input {
  min-height: 0; width: auto; flex: none; margin-top: 3px;
  accent-color: var(--ef-accent);
}

/* Un choix court se montre en entier : trois options se voient d'un coup
   d'œil, une liste déroulante les cache derrière un geste. */
.ef-choix-titre {
  font-size: var(--t-libelle); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ef-encre-doux);
}
.ef-choix-options { display: flex; gap: 8px; flex-wrap: wrap; }
.ef-choix-options > label {
  flex: 1 1 6rem; display: flex; align-items: center; justify-content: center;
  gap: 8px; min-height: var(--touche-min); padding: 10px 14px;
  border: 1px solid var(--ef-bordure); border-radius: var(--r-m);
  background: var(--ef-surface); cursor: pointer; text-align: center;
}
.ef-choix-options input { position: absolute; opacity: 0; width: 0; height: 0; }
.ef-choix-options > label:has(input:checked) {
  border-color: var(--ef-accent); border-width: 2px; padding: 9px 13px;
  font-weight: 600;
}
.ef-choix-options > label:has(input:focus-visible) {
  outline: 3px solid var(--ef-accent); outline-offset: 2px;
}

.champ.ef-case > label {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--t-secondaire); font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--ef-encre); cursor: pointer;
}
.champ.ef-case > label input {
  min-height: 0; width: auto; flex: none; margin-top: 3px;
  accent-color: var(--ef-accent);
}

/* Le contact d'urgence se détache : c'est le seul bloc de la fiche qu'on lit
   dans l'urgence, et il ne parle pas de la personne inscrite. */
.ef-encadre-contact {
  padding: var(--e-4); margin-bottom: var(--e-4);
  border: 1px solid var(--statut-attention-bord);
  background: var(--statut-attention-fond); border-radius: var(--r-m);
}
.ef-encadre-contact .ef-section { margin-top: 0; color: var(--statut-attention); }
.ef-note-gauche {
  font-size: var(--t-libelle); color: var(--ef-encre-doux); margin: 0 0 var(--e-3);
}

/* La liste des personnes à inscrire : une carte cochée se voit de loin, parce
   qu'on relit sa sélection avant de valider. */
.ef-liste-personnes { display: flex; flex-direction: column; gap: var(--e-2); }
.ef-choix.retenue .ef-carte {
  border-color: var(--ef-accent); border-width: 2px;
}

/* --- Mon compte ------------------------------------------------------------
   Un en-tête et quatre onglets, portés par le même gabarit : les quatre pages
   doivent se ressembler assez pour qu'on ne se demande jamais si l'on a
   changé de site. */
.ef-compte-tete {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-4) 0 var(--e-3);
}
.ef-compte-titre { margin: 0; font-size: var(--t-titre-s); font-weight: 700; }
.ef-compte-famille {
  margin: 2px 0 0; font-family: var(--chiffres);
  font-size: var(--t-secondaire); color: var(--ef-encre-doux);
}
.ef-avatar {
  margin-left: auto; width: 44px; height: 44px; border-radius: 50%;
  background: var(--ef-fond); border: 1px solid var(--ef-bordure);
  object-fit: cover; flex: none;
}

.ef-onglets {
  display: flex; gap: var(--e-4); overflow-x: auto;
  border-bottom: 1px solid var(--ef-bordure); margin-bottom: var(--e-4);
}
.ef-onglet {
  padding: 10px 0; text-decoration: none; white-space: nowrap;
  font-size: var(--t-secondaire); color: var(--ef-encre-doux);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ef-onglet.actif {
  color: var(--ef-encre); font-weight: 700; border-bottom-color: var(--ef-accent);
}

/* Ce qui demande une action se détache du reste : c'est la seule chose de la
   page qui ne peut pas attendre. */
.ef-action-requise {
  padding: var(--e-4); margin-bottom: var(--e-4);
  border: 1px solid var(--statut-attention-bord);
  background: var(--statut-attention-fond); border-radius: var(--r-m);
}
.ef-action-requise .titre {
  margin: 0; font-weight: 700; color: var(--statut-attention);
}
.ef-action-requise .detail {
  margin: 4px 0 var(--e-3); font-size: var(--t-secondaire);
  color: var(--ef-encre-doux);
}
.ef-action-requise .ef-btn { margin-bottom: 6px; }

/* Trois chiffres, trois questions : versé, restant, rendu. */
.ef-chiffres {
  display: flex; gap: var(--e-2); margin-bottom: var(--e-4);
}
.ef-chiffres > div {
  flex: 1; padding: var(--e-3); text-align: center;
  border: 1px solid var(--ef-bordure); border-radius: var(--r-m);
}
.ef-chiffres .montant {
  display: block; font-family: var(--chiffres); font-size: var(--t-titre-s);
  font-weight: 700;
}
.ef-chiffres .montant.ok { color: var(--statut-ok); }
.ef-chiffres .montant.du { color: var(--statut-attention); }
.ef-chiffres .libelle {
  font-size: var(--t-libelle); color: var(--ef-encre-doux);
}

.ef-participants { margin: var(--e-3) 0; }
.ef-participant { padding: 7px 0; border-top: 1px solid var(--ef-bordure); }
.ef-participant .tete {
  display: flex; justify-content: space-between; gap: var(--e-2);
}
.ef-jauge-montant { display: block; margin: var(--e-3) 0; }
.ef-jauge-montant .jauge { display: block; margin-top: 5px; }
.ef-lien-recu, .ef-lien-fiche {
  display: inline-block; margin-top: 6px; font-size: var(--t-secondaire);
  font-weight: 600;
}

.ef-section-double { display: flex; justify-content: space-between; gap: var(--e-2); }
.ef-section-double .incomplet { color: var(--statut-attention); }

/* Une fiche du foyer : le portrait à gauche, ce qui manque en clair. */
.ef-fiche {
  display: flex; gap: var(--e-3); padding: var(--e-3);
  border: 1px solid var(--ef-bordure); border-radius: var(--r-m);
  margin-bottom: var(--e-2); background: var(--ef-surface);
}
.ef-fiche.incomplete {
  border-color: var(--statut-attention-bord); background: var(--statut-attention-fond);
}
.ef-fiche .corps { flex: 1; min-width: 0; }
.ef-fiche .tete { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ef-fiche .nom { font-weight: 700; }
.ef-fiche .lien {
  font-family: var(--chiffres); font-size: var(--t-meta);
  text-transform: uppercase; letter-spacing: .08em; color: var(--ef-encre-doux);
}
.ef-fiche .detail {
  display: block; font-family: var(--chiffres); font-size: var(--t-libelle);
  color: var(--ef-encre-doux); margin-top: 3px;
}
.ef-portrait {
  width: 56px; height: 56px; border-radius: var(--r-m); flex: none;
  object-fit: cover; background: var(--ef-fond);
  border: 1px solid var(--ef-bordure);
}
.ef-portrait.vide { border-style: dashed; }
.ef-ajouter { border-style: dashed; }

.ef-consentements {
  padding: var(--e-4); background: var(--ef-fond); border-radius: var(--r-m);
  margin-bottom: var(--e-4);
}
.ef-consentements .ligne {
  display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px;
  font-size: var(--t-secondaire);
}
.ef-consentements .libelle { flex: 1; }
.ef-consentements .etat {
  font-family: var(--chiffres); color: var(--statut-ok);
}
.ef-consentements .etat.refus { color: var(--statut-bloquant); }
.ef-consentements .point {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--statut-ok);
}
.ef-consentements .point.refus { background: var(--statut-bloquant); }
.ef-case-en-ligne {
  display: flex; align-items: flex-start; gap: 10px; margin: var(--e-3) 0;
  font-size: var(--t-secondaire); cursor: pointer;
}
.ef-case-en-ligne input { accent-color: var(--ef-accent); margin-top: 3px; }
/* L'explication passe à la ligne : collée au libellé, elle se lit comme la
   suite de la phrase et le consentement devient illisible. */
.ef-case-en-ligne .detail {
  display: block; margin-top: 2px; color: var(--ef-encre-doux);
  font-size: var(--t-libelle);
}

.ef-document {
  display: flex; justify-content: space-between; gap: var(--e-2);
  padding: var(--e-3); margin-bottom: 6px; text-decoration: none;
  border: 1px solid var(--ef-bordure); border-radius: var(--r-m);
  color: var(--ef-encre); font-size: var(--t-secondaire);
}
.ef-document .etat { font-family: var(--chiffres); color: var(--ef-encre-doux); }
.ef-document.a-signer {
  border-color: var(--statut-attention-bord); background: var(--statut-attention-fond);
}
.ef-document.a-signer .etat { color: var(--statut-attention); font-weight: 600; }

/* Un repli plutôt qu'un formulaire déroulé : la page se lit avant de se
   modifier. */
.ef-repli { margin-bottom: var(--e-4); }
.ef-repli > summary { list-style: none; cursor: pointer; }
.ef-repli > summary::-webkit-details-marker { display: none; }
.ef-repli[open] > summary { margin-bottom: var(--e-3); }

.ef-a-verifier { color: var(--statut-attention); font-weight: 600; }
/* Supprimer son compte n'est pas l'action principale d'une page de profil :
   le bouton se lit en creux, pas en plein. On ne met pas en avant ce qu'on
   espère que personne ne fera par mégarde. */
.ef-btn.danger {
  background: transparent; color: var(--statut-bloquant);
  border: 1px solid var(--statut-bloquant);
}
.ef-btn.danger:hover { background: var(--statut-bloquant-fond); }
.ef-recu {
  padding: var(--e-4); border: 1px solid var(--ef-bordure);
  border-radius: var(--r-m);
}
.ef-recu dl > div {
  display: flex; justify-content: space-between; gap: var(--e-3);
  padding: 6px 0; border-bottom: 1px solid var(--ef-bordure);
  font-size: var(--t-secondaire);
}
.ef-recu dt { color: var(--ef-encre-doux); }
.ef-recu dd { margin: 0; text-align: right; }
.ef-etat {
  font-family: var(--chiffres); font-size: var(--t-meta); padding: 2px 8px;
  border-radius: 999px; border: 1px solid var(--ef-bordure);
}
.ef-etat.ok { color: var(--statut-ok); border-color: var(--statut-ok-bord);
  background: var(--statut-ok-fond); }
.ef-etat.attention { color: var(--statut-attention);
  border-color: var(--statut-attention-bord); background: var(--statut-attention-fond); }
.ef-carte .montant.rendu { color: var(--statut-bloquant); }
.ef-carte .montant.ok { color: var(--statut-ok); }

/* --- Blason d'équipe --------------------------------------------------------
   Le même jeton qu'au back-office, mais sous l'ambiance de l'événement : les
   couleurs viennent des variables --ef-*, jamais des jetons figés du
   back-office. Sans blason, rien : à une famille, « LL » n'apprend rien —
   c'est un repère d'organisateur, pas une identité d'équipe. */
.ef-blason {
  width: 22px; height: 22px; border-radius: 4px; object-fit: cover;
  border: 1px solid var(--ef-bordure); background: var(--ef-surface);
  vertical-align: -6px; margin-right: 5px;
}
.ef-blason.petit { width: 20px; height: 20px; }

/* --- Le calendrier d'un règlement en plusieurs fois ------------------------
   Trois lignes : rang, date, montant. La famille doit pouvoir les recopier
   sur son agenda avant de s'engager — c'est la moitié de l'information que
   porte l'option. */
.ef-echeances {
  list-style: none; margin: var(--e-3) 0 var(--e-2); padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.ef-echeances > li {
  display: flex; align-items: baseline; gap: var(--e-2);
  padding: 5px 8px; border-radius: 4px;
  background: color-mix(in srgb, var(--ef-encre) 4%, transparent);
  font-family: var(--chiffres); font-size: var(--t-libelle);
}
.ef-echeances .rang {
  width: 1.4em; height: 1.4em; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ef-accent); color: var(--ef-accent-texte); font-weight: 600;
}
.ef-echeances .montant { margin-left: auto; font-weight: 600; }
.ef-echeances .note { color: var(--ef-encre-doux); font-weight: 400; }

/* --- L'échéancier en cours, dans « mes paiements » ------------------------- */
.ef-echeancier {
  border: 1px solid var(--ef-bordure); border-radius: var(--r-m);
  padding: var(--e-4); margin-bottom: var(--e-4);
}
.ef-echeancier.defaut { border-color: var(--statut-bloquant-bord);
  background: var(--statut-bloquant-fond); }
.ef-echeancier > .tete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e-3); margin-bottom: var(--e-2);
}
.ef-echeancier .etat { font-family: var(--chiffres);
  font-size: var(--t-libelle); color: var(--ef-encre-doux); }
.ef-echeances .etat { margin-left: 0; }
.ef-echeances > li.payee { color: var(--ef-encre-doux); }
.ef-echeances > li.payee .rang { background: var(--statut-ok); }
.ef-echeances > li.echouee { background: var(--statut-bloquant-fond); }
.ef-echeances > li.echouee .rang { background: var(--statut-bloquant); }
.ef-echeances > li.abandonnee { opacity: .5; text-decoration: line-through; }

/* --- La carte enregistrée -------------------------------------------------- */
.ef-moyen {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3); border: 1px solid var(--ef-bordure);
  border-radius: var(--r-m); margin-bottom: var(--e-2);
}
.ef-moyen .libelle { font-family: var(--chiffres); font-weight: 600; }
.ef-moyen .expiration { font-family: var(--chiffres); color: var(--ef-encre-doux);
  font-size: var(--t-libelle); }
.ef-moyen .expiration.perimee { color: var(--statut-bloquant); }
.ef-moyen form { margin: 0 0 0 auto; }

/* --- Création de compte (CO1–CO5, COD, COT) ---------------------------------
   Un seul formulaire, trois largeurs. La colonne de saisie reste étroite
   partout : une ligne de saisie longue n'aide personne. La largeur gagnée sert
   au déroulé (on sait où l'on est et ce qui reste) et à l'explication. */
.ef-page.ef-parcours { max-width: 72rem; }
.parcours { display: grid; gap: var(--e-5); }
.parcours-deroule { display: none; }
.parcours-deroule ol { list-style: none; margin: 0; padding: 0; }
.parcours-deroule li { display: grid; grid-template-columns: 28px 1fr; column-gap: 10px;
  align-items: center; padding: 8px 0; color: var(--ef-encre-doux); }
.parcours-numero { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--ef-bordure); display: flex; align-items: center;
  justify-content: center; font-size: var(--t-libelle); }
.parcours-libelle { font-size: var(--t-secondaire); }
.parcours-etat { font-size: var(--t-meta); color: var(--ef-encre-doux); }
.parcours-deroule li.courante { color: var(--ef-encre); font-weight: 600; }
.parcours-deroule li.courante .parcours-numero { background: var(--ef-accent);
  color: var(--ef-accent-texte); border-color: var(--ef-accent); }
.parcours-deroule li.fait .parcours-numero { color: var(--statut-ok);
  border-color: var(--statut-ok-bord); background: var(--statut-ok-fond); }
.parcours-formulaire { min-width: 0; }
.parcours-pourquoi { border-top: 1px solid var(--ef-bordure); padding-top: var(--e-4); }
.parcours-pourquoi .ef-section { margin-top: 0; }
.parcours-deux { display: grid; grid-template-columns: 8rem 1fr; gap: var(--e-3); }
.parcours-photo { display: flex; gap: var(--e-3); align-items: center; margin-bottom: var(--e-3); }
.parcours-photo img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-m);
  border: 1px solid var(--ef-bordure); }
.parcours-modifier { margin-left: 6px; font-size: var(--t-libelle); }
.ef-encadre-neutre { padding: var(--e-3) var(--e-4); margin: 0 0 var(--e-4);
  border: 1px solid var(--ef-bordure); border-radius: var(--r-m); background: var(--ef-surface); }
.ef-encadre-neutre .ef-section { margin-top: 0; }

/* Tablette : la frise au-dessus, l'explication dessous, colonne de 560 px. */
@media (min-width: 52rem) {
  .parcours-jalons { display: none; }
  .parcours { grid-template-columns: minmax(0, 35rem); justify-content: center; }
  .parcours-deroule { display: block; }
  .parcours-deroule ol { display: flex; gap: var(--e-3); }
  .parcours-deroule li { flex: 1; grid-template-columns: 26px 1fr; padding: 0; }
  .parcours-deroule .parcours-etat { display: none; }
}
/* Bureau : déroulé à gauche, formulaire au centre, explication à droite. */
@media (min-width: 80rem) {
  .parcours { grid-template-columns: 13rem minmax(0, 28rem) 17rem;
    justify-content: space-between; align-items: start; }
  .parcours-deroule ol { display: block; }
  .parcours-deroule li { padding: 8px 0; }
  .parcours-deroule .parcours-etat { display: block; }
  .parcours-pourquoi { border-top: none; border-left: 1px solid var(--ef-bordure);
    padding: 0 0 0 var(--e-4); }
}

/* --- Responsable légal (RL1–RL3) ------------------------------------------- */
.rl-mineur { display: flex; gap: var(--e-3); align-items: center; }
.rl-portrait { width: 52px; height: 52px; object-fit: cover; border-radius: var(--r-m);
  border: 1px solid var(--ef-bordure); flex: none; }
.rl-mineur > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rl-puces { margin: 0 0 var(--e-4); padding-left: 1.2em; font-size: var(--t-corps); }
.rl-puces li { margin-bottom: 6px; }
.rl-signaler { margin-top: var(--e-4); }
.rl-piece { margin-bottom: var(--e-5); }
.rl-paiement-tete { display: flex; justify-content: space-between; gap: var(--e-2);
  align-items: baseline; margin-bottom: var(--e-2); }
.ef-btn.secondaire.bloquant { color: var(--statut-bloquant); border-color: var(--statut-bloquant-bord); }
.lien-bouton { background: none; border: none; padding: 0; color: var(--ef-accent);
  font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* --- Parcours d'inscription (IS1 à IS5) --------------------------------------
   Rendu dans l'ambiance de l'événement : aucune couleur ici, seulement les
   jetons. Les confirmations se distinguent par leur signe et leur statut,
   jamais par une couleur de plus — il n'en existe que trois. */
.ef-question { border: 0; padding: 0; margin: 0 0 var(--e-4); }
.ef-question > legend { margin-bottom: var(--e-2); }
.ef-question[hidden] { display: none; }
[data-si-montant][hidden], [data-si-nombre][hidden] { display: none; }
.ef-confirmation {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--e-2); padding: var(--e-5) var(--e-4); margin-bottom: var(--e-4);
  border: 1px solid var(--ef-bordure); border-radius: var(--r-m);
  background: var(--ef-surface);
}
.ef-confirmation-signe {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  font-family: var(--chiffres); font-size: var(--t-titre-s); font-weight: 700;
  border: 2px solid var(--statut-attention); color: var(--statut-attention);
}
.ef-confirmation.ok .ef-confirmation-signe {
  border-color: var(--statut-ok); color: var(--statut-ok);
}
.ef-confirmation-titre { margin: 0; font-size: var(--t-titre-s); font-weight: 700; }
.ef-consigne { margin-bottom: var(--e-3); }
.ef-consigne .ef-section { margin-top: 0; }
.ef-documents { list-style: none; padding: 0; margin: 0 0 var(--e-3); }
.ef-documents > li {
  display: flex; justify-content: space-between; align-items: center;
  min-height: var(--touche-min); border-bottom: 1px solid var(--ef-bordure);
}
.is-personne { margin-bottom: var(--e-2); }

/* --- Mon compte (CO6 à CO10) ------------------------------------------------ */
.ef-compte-sous { margin: 2px 0 0; font-size: var(--t-libelle); color: var(--ef-encre-doux); }
/* Au téléphone, les onglets suffisent : les trois chiffres n'apparaissent
   qu'à partir de la tablette, où ils tiennent sur une ligne. */
.ef-compteurs { display: none; }
@media (min-width: 52rem) {
  .ef-compteurs {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-3);
    margin: 0 0 var(--e-4);
  }
  .ef-compteurs > div {
    display: flex; flex-direction: column; gap: 2px; padding: var(--e-3) var(--e-4);
    border: 1px solid var(--ef-bordure); border-radius: var(--r-m);
    background: var(--ef-surface);
  }
  .ef-compteurs .valeur { font-size: var(--t-compteur); font-weight: 700; }
  .ef-compteurs .libelle { font-size: var(--t-libelle); color: var(--ef-encre-doux); }
}
.ef-photo-profil { display: flex; gap: var(--e-3); align-items: center; margin-bottom: var(--e-2); }
.ef-photo-profil > div { display: flex; flex-direction: column; gap: 2px; }
.ef-photo-profil .nom { font-weight: 600; }
.ef-photo-profil .detail { font-size: var(--t-libelle); color: var(--ef-encre-doux); }
/* EM9 — la référence se lit de loin, à l'arrivée. */
.ef-billet-reference {
  margin: var(--e-2) 0; font-size: var(--t-compteur); font-weight: 700;
  letter-spacing: .06em;
}