/* Anthelixa · la page des workers, « Les workers, poste par poste » : les cartes en profondeur (maquette B, choisie par
   Yann le 13/10/2026), en couleur depuis le 13/10 au soir (Yann : « go pousse sur main le nouveau carrousel » ; la
   maquette, sa palette et ses contrôles : outils/concepts/workers/carrousel-couleur.html, palette.html,
   rendre_couleur.py). Chargée après site.css, sur la page des workers seulement (française et anglaise).

   La section est au registre Nuit (les workers au travail) : la scène sombre fait ressortir les cartes. Une carte par
   poste, qui le raconte :
   - l'en-tête, dans la couleur foncée du poste : le pictogramme, le nom, la mission ;
   - « Ce que vous recevez » : un écran du vrai travail, dessiné en HTML (.ecran-poste, données fictives), sur la
     couleur claire du poste ;
   - « Ce qu'il prépare » : trois carrés (le signe d'un worker) dans la couleur foncée du poste, reliés par un trait ;
     puis « Ce que vous décidez » : le rond (le signe d'une personne), en nuit ; puis « Ce qu'il ne fait jamais ».
   Une couleur par poste (la palette ci-dessous) : des couleurs de poste, jamais d'action. Le bouton, les liens, les
   commandes et le focus restent en iris, la seule couleur d'action ; l'orange reste au seul point final du titre. Aucune
   couleur de poste n'est proche de l'iris ni de l'orange (écart OKLab de 15 au moins avec l'iris, de 22 au moins avec
   l'orange). Surfaces plates, angles à 8 px : aucune ombre, aucun dégradé, aucune lueur.

   Deux états :
   - sans JavaScript (ou avant lui) : une liste de cartes, en grille, toutes lisibles ;
   - .est-pret, posé par assets/js/postes.js : un carrousel. Une carte au centre, au premier plan ; les voisines en
     retrait, plus petites, à peine tournées et voilées de nuit (légèrement : leur couleur doit se voir). La profondeur
     sans ombre ni dégradé. Toutes les cartes prennent la hauteur de la plus longue : la page ne saute jamais. */

:root {
  /* sur nuit, le filet d'un élément d'interface (tuile, carré éteint) : 3,8:1 sur nuit ; servi aussi à la commande des
     refus et au configurateur de la même page */
  --filet-nuit-fort: #6E6E78;
  --duree-poste: 8s;            /* une carte plus riche : 8 s par poste au lieu de 6,5 */
  /* les écrans dessinés : les couleurs de l'application (outils/ecrans/ecrans.css), les gris foncés d'un cran pour l'AA */
  --e-filet: #DCDCE2;
  --e-fond: #F6F6F8;
  --e-texte-2: #3F4049;         /* 10,3:1 sur papier */
  --e-texte-3: #5C5D66;         /* 6,5:1 sur papier, 6,1:1 sur --e-fond */
  --e-iris-2: #5B49C4;          /* les repères [n] : 6,6:1 sur papier */
  --e-vert: #1C7048;            /* « lu », une vérification passée : 6,1:1 sur papier */
  --e-rouge: #A8323E;           /* une vérification qui retient : 6,6:1 sur papier */
}

/* ------------------------------------------------------------------ la palette des postes (CLAUDE.md, « Charte »)
   foncée : l'en-tête de la carte, texte blanc dessus (5,38:1 au moins) ; claire : la zone « Ce que vous recevez »,
   texte nuit dessus (16,2:1 au moins), foncée dessus (4,72:1 au moins) ; vive : le point du poste, sur le nuit
   (7,39:1 au moins). Contrastes WCAG 2 ; écarts : outils/concepts/workers/palette.html. */
.poste--recherche { --p-fonce: #12396D; --p-clair: #E2F2FF; --p-vive: #8EBAF7; }                  /* Encre */
.poste--courrier { --p-fonce: #5E6C7A; --p-clair: #ECF1F6; --p-vive: #92A4B2; }                   /* Ardoise */
.poste--facturation { --p-fonce: #044730; --p-clair: #DDF8EA; --p-vive: #58B78E; }                /* Sapin */
.poste--factures-recues { --p-fonce: #496222; --p-clair: #EAF5DD; --p-vive: #B3C976; }            /* Mousse */
.poste--controle-avant-paiement { --p-fonce: #76293A; --p-clair: #FFE7EB; --p-vive: #E796A8; }    /* Grenat */
.poste--suivi-de-chantier { --p-fonce: #88641C; --p-clair: #FCEED7; --p-vive: #D4A552; }          /* Ocre */
.poste--seo { --p-fonce: #005F66; --p-clair: #D7F7FA; --p-vive: #68CDD3; }                        /* Canard */

/* ------------------------------------------------------------------ la scène : le registre Nuit (site.css) */
/* un filet nuit au-dessus : sur la page française, la section suit le haut de page, nuit lui aussi */
#postes { border-top: 1px solid var(--filet-nuit); }
.section--postes .lead, .section--postes .exemples__note { color: var(--blanc-doux); }
/* dans une carte (papier), l'action reste iris : les liens, le bouton et le focus */
.section--postes .carte-poste :focus-visible { outline-color: var(--iris); }
.section--postes .carte-poste .text-link { color: var(--iris); }
.section--postes .carte-poste .btn--solid { color: var(--papier); }

/* ------------------------------------------------------------------ la liste, sans JavaScript */
.carrousel-postes__cartes { display: grid; gap: 20px; }
@media (min-width: 900px) { .carrousel-postes__cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ la carte */
.carte-poste {
  position: relative; min-width: 0; overflow: hidden; border-radius: var(--rayon);
  background: var(--papier); color: var(--nuit);
  container: carte / inline-size;
}
.carte-poste__grille { display: grid; grid-template-rows: auto auto 1fr; height: 100%; }

/* l'en-tête, dans la couleur foncée du poste */
.carte-poste__tete {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tuile . rang" "nom nom nom" "mission mission mission";
  padding: 20px 20px 22px; background: var(--p-fonce); color: var(--papier);
}
.carte-poste__tuile {
  grid-area: tuile; display: inline-grid; place-items: center; width: 46px; height: 46px;
  border: 1px solid var(--p-clair); border-radius: var(--rayon); color: var(--papier);
}
.carte-poste__tuile .picto { width: 24px; height: 24px; }
.carte-poste__rang { grid-area: rang; align-self: start; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--p-clair); font-variant-numeric: tabular-nums; }
.carte-poste__nom { grid-area: nom; margin-top: 16px; font-size: var(--taille-l); line-height: var(--interligne-l); letter-spacing: var(--approche-l); color: var(--papier); }
.carte-poste__mission { grid-area: mission; max-width: 62ch; margin-top: 10px; font-size: 16.5px; line-height: 1.5; color: var(--papier); }

/* ce que vous recevez : l'écran du vrai travail, sur la couleur claire du poste */
.carte-poste__recu { display: flex; flex-direction: column; margin: 0; padding: 16px 16px 14px; background: var(--p-clair); }
.carte-poste__recu-titre { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14.5px; font-weight: 500; line-height: 1.4; color: var(--p-fonce); }
.carte-poste__recu-titre .picto { width: 18px; height: 18px; }
.carte-poste__legende { margin-top: 10px; margin-bottom: auto; font-family: var(--mono); font-size: 13px; line-height: 1.4; color: var(--p-fonce); }

/* le récit : ce qu'il prépare (trois carrés dans la couleur du poste), ce que vous décidez (le rond, en nuit) */
.carte-poste__recit {
  --noeud: 34px; --ecart: 12px; --ecart-decision: 16px;
  display: flex; flex-direction: column; min-width: 0; padding: 20px 20px 22px;
}
.carte-poste__titre { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; line-height: 1.4; color: var(--p-fonce); }
.carte-poste__titre .picto { width: 18px; height: 18px; }
.carte-poste__etapes { display: grid; gap: var(--ecart); margin: 12px 0 0; }
.carte-poste__etape { position: relative; display: grid; grid-template-columns: var(--noeud) minmax(0, 1fr); column-gap: 14px; align-items: start; }
.carte-poste__noeud {
  position: relative; z-index: 1; display: grid; place-items: center; width: var(--noeud); height: var(--noeud);
  border: 2px solid var(--p-fonce); border-radius: 7px; background: var(--p-fonce); color: var(--papier);
  font-family: var(--display); font-size: var(--taille-s); font-weight: 600; line-height: 1;
}
.carte-poste__texte { align-self: center; font-size: 16.5px; font-weight: 500; line-height: 1.4; }
.carte-poste__trait { position: absolute; left: calc(var(--noeud) / 2 - 1px); top: var(--noeud); bottom: calc(-1 * var(--ecart)); width: 2px; background: var(--gris-1); }
/* le dernier trait descend jusqu'au rond : l'écart avant la décision, et le haut du rond (5 px) */
.carte-poste__etape:last-child .carte-poste__trait { bottom: calc(-1 * (var(--ecart-decision) + 5px)); }
.carte-poste__trait::after { content: ""; position: absolute; inset: 0; background: var(--p-fonce); transform-origin: center top; }

.carte-poste__decision { display: grid; grid-template-columns: var(--noeud) minmax(0, 1fr); column-gap: 14px; align-items: start; margin-top: var(--ecart-decision); }
.carte-poste__rond { display: grid; place-items: center; width: var(--noeud); height: 26px; }
.carte-poste__rond::before { content: ""; width: 18px; height: 18px; border: 2px solid var(--nuit); border-radius: 50%; background: var(--nuit); }
.carte-poste__decision .carte-poste__titre { margin-top: 3px; color: var(--gris-3); }
.carte-poste__phrase { grid-column: 2; margin-top: 4px; font-size: 17px; font-weight: 500; line-height: 1.5; }
.carte-poste__jamais { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--gris-1); }
.carte-poste__jamais dt { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; line-height: 1.4; color: var(--gris-3); }
.carte-poste__jamais dt .picto { width: 16px; height: 16px; }
.carte-poste__jamais dd { margin: 4px 0 0; font-size: 16px; line-height: 1.5; }
.carte-poste__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: auto; padding-top: 20px; }
.carte-poste__actions .text-link { font-size: 16px; }
.carte-poste__actions .btn { min-height: 50px; }

/* une carte large (au-delà de 720 px) : l'en-tête sur toute la largeur, puis l'écran à gauche et le récit à droite */
@container carte (min-width: 720px) {
  .carte-poste__grille { grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); grid-template-rows: auto 1fr; grid-template-areas: "tete tete" "recu recit"; }
  .carte-poste__tete { grid-area: tete; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "tuile nom rang" ". mission mission"; column-gap: 20px; padding: 26px 30px 26px 28px; }
  .carte-poste__tuile { width: 56px; height: 56px; align-self: start; }
  .carte-poste__tuile .picto { width: 28px; height: 28px; }
  .carte-poste__nom { margin-top: 2px; }
  .carte-poste__mission { margin-top: 10px; font-size: 17px; }
  .carte-poste__recu { grid-area: recu; padding: 24px 26px 20px; }
  .carte-poste__recit { grid-area: recit; --noeud: 38px; --ecart: 14px; --ecart-decision: 18px; padding: 24px 30px 26px 28px; }
  .carte-poste__texte { font-size: 17px; }
}
/* un téléphone : une carte plus serrée, sans rien couper */
@container carte (max-width: 380px) {
  .carte-poste__tete { padding: 16px 16px 18px; }
  .carte-poste__tuile { width: 42px; height: 42px; }
  .carte-poste__tuile .picto { width: 22px; height: 22px; }
  .carte-poste__nom { margin-top: 12px; }
  .carte-poste__mission { font-size: 16px; }
  .carte-poste__recu { padding: 14px 12px 12px; }
  .carte-poste__recu-titre { margin-bottom: 8px; }
  .carte-poste__recit { --noeud: 32px; --ecart: 10px; --ecart-decision: 14px; padding: 16px 16px 18px; }
  .carte-poste__texte { font-size: 16px; }
  .carte-poste__phrase { font-size: 16px; }
  .carte-poste__jamais { margin-top: 14px; padding-top: 12px; }
  .carte-poste__jamais dd { font-size: 15.5px; }
  .carte-poste__actions { gap: 10px 16px; padding-top: 16px; }
  .carte-poste__actions .btn { width: 100%; }
}

/* ------------------------------------------------------------------ les écrans du vrai travail (.ecran-poste)
   Le style des écrans dessinés du site (outils/ecrans/ecrans.css) : papier, filets fins, IBM Plex Sans, et IBM Plex Mono
   pour les données. Les couleurs sont celles de l'application, pas celles du poste : la couleur du poste est autour.
   Chaque écran a un texte de remplacement (role="img", aria-label) et la légende « Exemple, données fictives ». */
.ecran-poste {
  container: ecran / inline-size; margin-top: auto;   /* l'écran et sa légende, au milieu de la zone, sous le titre */
  padding: 13px 14px 14px; border: 1px solid var(--e-filet); border-radius: var(--rayon); background: var(--papier);
  color: var(--nuit); font-size: 13.5px; line-height: 1.45; cursor: default;
}
:where(.ecran-poste) :where(p, dl, dd, ol, ul) { margin: 0; }
.ecran-poste .picto { width: 14px; height: 14px; stroke-width: 1.75; }
.e-fil { font-family: var(--mono); font-size: 12px; line-height: 1.4; color: var(--e-texte-3); }
.e-fil b { font-weight: 400; color: var(--e-texte-2); }
.e-mono { font-family: var(--mono); font-size: 12.5px; }
.e-insec { white-space: nowrap; }
.e-titre { margin-top: 8px; font-size: 14.5px; font-weight: 500; line-height: 1.35; }
.e-sous { margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--e-texte-3); }
.e-haut { display: flex; align-items: center; gap: 7px; min-width: 0; }
.e-sous--picto { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.e-haut--titre { margin-top: 8px; }
.e-droite { margin-left: auto; white-space: nowrap; }
.e-haut--titre .e-titre { margin-top: 0; }
.e-nom { font-weight: 500; font-size: 13px; white-space: nowrap; }
.e-role { min-width: 0; overflow: hidden; font-size: 12px; color: var(--e-texte-3); text-overflow: ellipsis; white-space: nowrap; }
.e-h { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--e-texte-3); }
.e-fort { font-weight: 500; }
.e-av {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--e-filet); border-radius: 50%;
  background: var(--e-fond); font-size: 10.5px; font-weight: 500; letter-spacing: .02em; color: var(--e-texte-2);
}
.e-tag { display: inline-flex; align-items: center; padding: 1px 8px; border: 1px solid var(--e-filet); border-radius: 6px; background: var(--e-fond); font-size: 12.5px; font-weight: 500; color: var(--nuit); }
.e-statut { flex: none; margin-left: auto; padding: 1px 8px; border: 1px solid var(--e-rouge); border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--e-rouge); }
.e-statut--attente { display: inline-block; margin-left: 0; border-color: var(--nuit); color: var(--nuit); }
.e-btn { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 12px; border: 1px solid #C8C8D0; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--nuit); white-space: nowrap; }
.e-btn--iris { border-color: var(--iris); background: var(--iris); color: var(--papier); }
.e-btn--leger { background: var(--e-fond); color: var(--e-texte-2); }   /* « Autre… », le bouton léger de l'application */
.e-boutons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.e-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--e-texte-3); }
.e-pj { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 12.5px; color: var(--e-texte-2); }
.e-pj .picto { width: 13px; height: 13px; }

/* le repère : un cadre dans la couleur foncée du poste autour de la pièce maîtresse de l'écran (.e-cle), ce que vous
   recevez. Une annotation du site, comme la note « Ce qu'il fait, vraiment » des écrans publiés : pas un libellé de
   l'application. Elle ne cache rien : sans elle, l'écran est complet. */
.e-cle { border-radius: var(--rayon); outline: 2px solid var(--p-fonce); outline-offset: 3px; }
.e-question.e-cle { border-color: var(--e-filet); }   /* le repère fait le cadre : pas de double trait foncé */
.e-sources.e-cle { margin-top: 12px; padding: 7px 8px 8px; border-top: 0; }   /* un peu d'air dans le cadre */
.e-carte > .e-cle { margin-top: 10px; padding: 8px 8px 7px; }
.e-carte > .e-cle .e-boutons { margin-top: 0; }
.e-note--avant { margin: 0 0 8px; }   /* la note de la carte vient avant son bouton, comme dans l'application */

/* l'en-tête d'une conversation, comme dans l'application : son titre, et le worker à qui l'on parle (une pastille) ;
   l'en-tête d'une question à trancher : le processus, l'étape et le jour */
.e-conv { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid var(--e-filet); }
.e-conv__titre { min-width: 0; overflow: hidden; font-size: 13.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.e-pastille { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border: 1px solid var(--e-filet); border-radius: 999px; font-size: 12.5px; font-weight: 500; }
.e-entete { margin-top: 6px; }

/* Recherche : une conversation, ses repères et ses sources (les libellés de l'application) : la question en bulle, la
   réponse et ses sources, sans en-tête de message (l'application n'en met pas) */
.e-bulle { width: fit-content; max-width: 88%; margin: 10px 0 0 auto; padding: 7px 11px; border-radius: var(--rayon); background: var(--e-fond); }
.e-msg { margin-top: 10px; }
.e-txt p + p { margin-top: 4px; }
.e-msg--worker { padding: 10px 11px 11px; border: 1px solid var(--e-filet); border-radius: var(--rayon); }
.e-ref { color: var(--e-iris-2); font-weight: 600; text-decoration: underline dotted var(--iris); text-underline-offset: 3px; white-space: nowrap; }
.e-sources { margin: 9px 0 0; padding-top: 8px; border-top: 1px solid var(--e-filet); font-size: 12.5px; line-height: 1.45; }
.e-sources__tete { font-weight: 600; color: var(--e-texte-2); }
.e-sources ol { display: grid; gap: 4px; margin-top: 4px; padding: 0; list-style: none; }
.e-sources li { min-width: 0; color: var(--e-texte-3); }
.e-sorte { display: inline-block; min-width: 3.3em; margin-right: 6px; padding: 0 4px; border: 1px solid #C8C8D0; border-radius: 4px; font-size: 11.5px; text-align: center; color: var(--e-texte-2); }
.e-doc { color: var(--nuit); text-decoration: underline dotted var(--iris); text-underline-offset: 3px; overflow-wrap: anywhere; }

/* Courrier : un mail, sa pièce reconnue et la personne à qui elle est passée */
.e-mail { margin-top: 10px; padding: 10px 11px 11px; border: 1px solid var(--e-filet); border-radius: var(--rayon); }
.e-objet { margin-top: 2px; font-size: 14px; font-weight: 500; }
.e-extrait { margin-top: 3px; font-size: 12.5px; color: var(--e-texte-3); }
.e-tri { display: grid; gap: 8px; margin-top: 10px; padding: 10px 11px; border-radius: var(--rayon); background: var(--e-fond); }
.e-tri > div { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); align-items: center; column-gap: 8px; }
.e-tri dt { font-size: 12.5px; color: var(--e-texte-3); }
.e-qui { display: flex; align-items: center; gap: 7px; min-width: 0; }
.e-qui > .picto { flex: none; color: var(--e-texte-3); }
.e-mail--court { padding-block: 8px 9px; }
.e-mail--court .e-objet { font-size: 13.5px; }
.e-signale { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 5px; font-size: 12.5px; color: var(--e-texte-2); }
.e-tag--vide { border-style: dashed; border-color: #9C9DA6; background: var(--papier); }

/* Facturation : la carte du devis à créer (les libellés de la carte de l'application) */
.e-carte { margin-top: 10px; padding: 11px 12px 12px; border: 1px solid var(--e-filet); border-radius: var(--rayon); }
.e-carte__titre { font-size: 14px; font-weight: 500; }
.e-faits { display: grid; gap: 2px; margin-top: 7px; font-size: 12.5px; }
.e-faits > div { display: grid; grid-template-columns: 5em minmax(0, 1fr); column-gap: 8px; }
.e-faits dt { color: var(--e-texte-3); }
.e-table { width: 100%; margin-top: 9px; border-collapse: collapse; font-size: 12.5px; line-height: 1.4; }
.e-table th { padding: 0 0 4px; border-bottom: 1px solid var(--e-filet); font-weight: 500; text-align: left; color: var(--e-texte-3); }
.e-table td { padding: 5px 0; border-bottom: 1px solid var(--e-filet); vertical-align: top; }
.e-table th:nth-child(n+2), .e-table td:nth-child(n+2) { padding-left: 10px; text-align: right; white-space: nowrap; }
.e-table td:nth-child(n+2) { font-family: var(--mono); font-size: 12px; }
.e-totaux { display: grid; gap: 1px; margin: 7px 0 0 auto; width: fit-content; min-width: 60%; font-size: 12.5px; }
.e-totaux > div { display: flex; justify-content: space-between; gap: 16px; }
.e-totaux dt { color: var(--e-texte-3); }
.e-totaux dd { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.e-totaux__fort dt, .e-totaux__fort dd { font-weight: 500; color: var(--nuit); }

/* Factures reçues : la carte d'un doute (« Questions à trancher ») : les champs lus, ce qui manque, la pièce, une seule
   question et ses choix */
.e-releve { display: grid; margin-top: 9px; border-top: 1px solid var(--e-filet); font-size: 12.5px; }
.e-releve > div { display: grid; grid-template-columns: 7.6em minmax(0, 1fr); align-items: baseline; column-gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--e-filet); }
.e-releve dt { color: var(--e-texte-3); }
.e-releve__doute dd { font-weight: 500; }
.e-question { margin-top: 10px; padding: 10px 11px 11px; border: 1px solid var(--nuit); border-radius: var(--rayon); }
.e-question > p:first-child { font-weight: 500; }
.e-repondez { margin-top: 3px; color: var(--e-texte-2); }

/* Contrôle avant paiement : la facture retenue, ses trois vérifications et l'avis */
.e-verifs { display: grid; gap: 3px; margin-top: 9px; padding: 0; list-style: none; font-size: 12.5px; }
.e-verif { display: flex; align-items: center; gap: 7px; color: var(--e-texte-2); }
.e-verif .picto { color: var(--e-vert); }
.e-verif--alerte { font-weight: 500; color: var(--e-rouge); }
.e-verif--alerte .picto { color: var(--e-rouge); }
.e-avis { margin-top: 10px; padding: 9px 11px 10px; border: 1px solid var(--e-rouge); border-left-width: 3px; border-radius: var(--rayon); }
.e-avis b { font-weight: 600; }

/* Suivi de chantier : le lot, ses trois montants, la jauge du facturé, la facture rapprochée */
.e-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
.e-chiffres > div { min-width: 0; padding: 7px 8px; border: 1px solid var(--e-filet); border-radius: 7px; }
.e-chiffres dt { font-size: 11.5px; line-height: 1.3; color: var(--e-texte-3); }
.e-chiffres dd { margin-top: 2px; font-family: var(--mono); font-size: 13px; font-weight: 500; white-space: nowrap; }
.e-chiffres > .e-chiffres__fort { border-color: var(--nuit); }
.e-jauge { position: relative; height: 8px; margin-top: 10px; overflow: hidden; border: 1px solid var(--nuit); border-radius: 4px; }
.e-jauge__plein { position: absolute; inset: 0 40% 0 0; background: var(--nuit); }
.e-facture { margin-top: 10px; padding: 9px 11px 10px; border-radius: var(--rayon); background: var(--e-fond); }
.e-facture .e-statut--attente { margin-top: 7px; }
.e-facture .e-haut { flex-wrap: wrap; row-gap: 2px; }   /* sur un téléphone, le montant passe à la ligne (en anglais) */

/* SEO : la même carte, une ligne par correction (« 1 · page » : ce qui change), puis une seule question */
.e-corrections { display: grid; gap: 7px; margin-top: 10px; padding: 0; list-style: none; }
.e-corrections > li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 9px; align-items: start; }
.e-num { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--nuit); border-radius: 5px; font-family: var(--mono); font-size: 12px; font-weight: 500; }
.e-quoi { padding-top: 1px; font-weight: 500; }
.e-quoi .e-mono { font-weight: 400; }
.e-apres { margin-top: 2px; font-size: 12.5px; color: var(--nuit); }

/* un écran étroit (un téléphone) : la version simplifiée, sans rien de faux ni de coupé */
@container ecran (max-width: 330px) {
  .ecran-poste { font-size: 13px; }
  .e-fil, .e-large { display: none; }
  .e-fil + * { margin-top: 0; }   /* le premier élément après le fil, qui se cache */
  .e-detail { display: none; }
  .e-extrait { display: none; }
  .e-role { display: none; }
  .e-qui .e-role { display: none; }
  .e-chiffres dd { font-size: 12px; }
  .e-chiffres > div { padding: 6px 6px; }
}

/* ------------------------------------------------------------------ le carrousel (.est-pret, posé par postes.js) */
.carrousel-postes.est-pret .carrousel-postes__cartes {
  display: block; position: relative; height: var(--hauteur, 760px);
  perspective: 1800px; perspective-origin: 50% 40%;
  overflow-x: clip;   /* les cartes en retrait sortent de l'écran : rognées ici, jamais de défilement horizontal */
  touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: grab;
}
.carrousel-postes.est-pret .carrousel-postes__cartes.est-glisse { cursor: grabbing; }
.est-pret .carte-poste {
  position: absolute; top: 0; left: 50%; width: var(--largeur-carte, 460px); height: var(--hauteur, auto);
  margin-left: calc(var(--largeur-carte, 460px) / -2); transform-origin: 50% 50%; backface-visibility: hidden;
  /* visibility en durée, pas en délai : une carte qui revient se montre tout de suite, une carte qui part reste
     visible jusqu'au bout de son glissement, déjà couverte par son voile */
  transition: transform .65s cubic-bezier(.22, .8, .25, 1), visibility .65s;
}
.est-pret .carte-poste.est-mesuree { height: auto; }
.est-pret .est-glisse .carte-poste, .est-pret .carte-poste.sans-transition { transition: none; }
/* le voile : du nuit posé sur la carte, d'autant plus opaque qu'elle est loin du centre ; léger sur les voisines, pour
   que leur couleur se voie encore */
.est-pret .carte-poste::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: var(--nuit); opacity: var(--voile, 0); transition: opacity .65s ease;
}
.est-pret .est-glisse .carte-poste::after, .est-pret .carte-poste.sans-transition::after { transition: none; }
.est-pret .carte-poste[inert] { cursor: pointer; }

/* les commandes, sur le nuit : l'aide, les flèches et les sept points, puis Pause */
.carrousel-postes__commandes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin-top: 24px; }
.carrousel-postes__aide { display: none; font-size: 15px; line-height: 1.45; color: var(--blanc-doux); }
.carrousel-postes__nav { display: flex; align-items: center; gap: 6px; }
@media (min-width: 900px) {
  .carrousel-postes__commandes { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .carrousel-postes__aide { display: block; }
  .carrousel-postes__lecture { justify-self: end; }
}
.carrousel-postes__fleche, .carrousel-postes__lecture {
  border: 1px solid var(--blanc-doux); border-radius: var(--rayon); background: transparent; color: var(--blanc); cursor: pointer;
}
.carrousel-postes__fleche { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; }
.carrousel-postes__fleche:hover, .carrousel-postes__lecture:hover { border-color: var(--blanc); background: var(--gris-3); }
.carrousel-postes__fleche .picto { width: 20px; height: 20px; }
.carrousel-postes__points { display: flex; align-items: center; }
/* un point : une cible de 30 × 44 px, un petit carré dans la couleur vive du poste ; le point choisi s'allonge et porte
   la progression. Au survol et au focus, le nom du poste s'affiche au-dessus, dans sa couleur (le lecteur d'écran le
   lit dans le nom de l'onglet : la couleur ne porte jamais seule l'information). */
.carrousel-postes__point {
  position: relative; display: inline-grid; place-items: center; width: 30px; height: 44px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
}
.carrousel-postes__point::after {
  content: attr(data-nom); position: absolute; bottom: calc(100% + 2px); left: 50%; z-index: 5;
  padding: 4px 9px; border: 1px solid var(--p-vive); border-radius: 6px; background: var(--p-fonce); color: var(--papier);
  font-size: 14px; font-weight: 500; line-height: 1.3; white-space: nowrap;
  opacity: 0; visibility: hidden; transform: translate(-50%, 4px); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.carrousel-postes__point:hover::after, .carrousel-postes__point:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.carrousel-postes__dessin {
  position: relative; display: block; width: 11px; height: 11px; overflow: hidden;
  border: 1.5px solid var(--p-vive); border-radius: 3px; background: var(--p-vive); transition: width .3s ease;
}
.carrousel-postes__point[aria-selected="true"] { width: 56px; }
.carrousel-postes__point[aria-selected="true"] .carrousel-postes__dessin { width: 42px; }
.carrousel-postes__dessin > span { position: absolute; inset: 0; background: var(--p-vive); transform-origin: left center; transform: scaleX(0); visibility: hidden; }
.est-en-lecture .carrousel-postes__point[aria-selected="true"] .carrousel-postes__dessin { background: transparent; }
.est-en-lecture .carrousel-postes__point[aria-selected="true"] .carrousel-postes__dessin > span { visibility: visible; }
.est-en-lecture .carrousel-postes__point.barre-en-cours .carrousel-postes__dessin > span { animation: progression-poste var(--duree-poste) linear forwards; }
.est-suspendu .carrousel-postes__dessin > span { animation-play-state: paused !important; }
@keyframes progression-poste { to { transform: scaleX(1); } }
@media (max-width: 379.98px) { .carrousel-postes__point { width: 26px; } .carrousel-postes__point[aria-selected="true"] { width: 52px; } }

/* Pause / Lecture (WCAG 2.2.2) : un bouton au trait, visible tant que quelque chose défile */
.carrousel-postes__lecture {
  display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 8px 14px 8px 12px;
  font-size: 15px; font-weight: 500; line-height: 1.2;
}
.carrousel-postes__lecture .picto { width: 16px; height: 16px; }
.carrousel-postes__lecture[hidden] { display: none; }

/* ------------------------------------------------------------------ le mouvement, seulement s'il est accepté :
   la carte qui arrive au centre s'allume : les carrés l'un après l'autre et le trait qui avance ; puis, dans l'écran,
   le repère autour de ce que vous recevez (.e-cle) ; puis le rond, votre décision. Les autres attendent, éteintes.
   Sans mouvement, tout est allumé et rien ne glisse (site.css coupe aussi les durées). */
@media (prefers-reduced-motion: no-preference) {
  .carte-poste__etape:nth-child(1) { --t: .45s; }
  .carte-poste__etape:nth-child(2) { --t: 1.05s; }
  .carte-poste__etape:nth-child(3) { --t: 1.65s; }
  .est-pret .carte-poste:not(.est-centre) .carte-poste__noeud { background: var(--papier); color: var(--p-fonce); }
  .est-pret .carte-poste:not(.est-centre) .carte-poste__trait::after { transform: scaleY(0); }
  .est-pret .carte-poste:not(.est-centre) .carte-poste__rond::before { background: transparent; }
  .est-pret .carte-poste:not(.est-centre) .e-cle { outline-color: transparent; }
  .est-pret .carte-poste.est-centre .carte-poste__noeud { animation: poste-noeud .35s ease var(--t) both; }
  .est-pret .carte-poste.est-centre .carte-poste__trait::after { animation: poste-trait .5s cubic-bezier(.45, 0, .2, 1) calc(var(--t) + .25s) both; }
  .est-pret .carte-poste.est-centre .carte-poste__etape:last-child .carte-poste__trait::after { animation-duration: .7s; }
  .est-pret .carte-poste.est-centre .e-cle { animation: poste-cle .45s ease 2.15s both; }
  .est-pret .carte-poste.est-centre .carte-poste__rond::before { animation: poste-rond .35s ease 2.75s both; }
}
@keyframes poste-noeud { from { background: var(--papier); color: var(--p-fonce); } }
@keyframes poste-trait { from { transform: scaleY(0); } }
@keyframes poste-rond { from { background: transparent; } }
@keyframes poste-cle { from { outline-color: transparent; outline-offset: 9px; } }
@media (prefers-reduced-motion: reduce) {
  .est-pret .carte-poste, .est-pret .carte-poste::after, .carrousel-postes__dessin, .carrousel-postes__point::after { transition: none; }
}

/* ------------------------------------------------------------------ impression : la liste, toutes les cartes à plat
   (le registre Nuit s'imprime sur blanc, son texte en noir : site.css) */
@media print {
  .carrousel-postes.est-pret .carrousel-postes__cartes { display: grid; height: auto; perspective: none; overflow: visible; margin: 0 !important; }
  .est-pret .carte-poste { position: static; width: auto; height: auto; margin: 0; transform: none !important; visibility: visible !important; }
  .est-pret .carte-poste::after, .carrousel-postes__commandes { display: none; }
  .carte-poste { break-inside: avoid; border: 1px solid #000; }
  .carte-poste__tete { background: none !important; }
  .carte-poste__tete, .carte-poste__tete * { color: #000 !important; }
  .carte-poste__tuile { border-color: #000; }
}