/* Anthelixa · page d'accueil, refonte v2 : une marque, deux registres.
   Chargée après site.css, sur l'accueil seulement. Même palette, mêmes polices, mêmes angles à 8 px.
   Registre NUIT (fond nuit, texte blanc) : ce qui se passe quand personne ne regarde. Le problème,
   puis les workers au travail. Registre MATIN (papier chaud et papier) : la décision, le soulagement.
   Extension de la charte v1.5 : le nuit peut porter des sections entières, et deux gris de lecture
   sur nuit (--blanc-doux pour le texte courant, --filet-nuit pour les filets).
   Le mono n'est plus une étiquette : il ne sert qu'aux données du produit (heures du journal).
   L'orange reste au logo et au point final des titres. */

/* Les registres Nuit et Matin, les blocs, les titres de bloc, le chapeau, la ligne de source et le type de
   branche sont dans site.css depuis le 01/10/2026 : ils servent aussi aux pages intérieures. */

/* ------------------------------------------------------------------ 1. accroche + aiguillage */
.accroche { padding-block: 40px 64px; }
@media (min-width: 900px) { .accroche { padding-block: 48px 96px; } }
/* l'ordre AIDA (01/10) : le chiffre de l'OIT d'abord, puis la promesse en titre, le chapeau,
   et une invitation à descendre ; les portes viennent après « Le matin » (section 3 bis) */
.accroche__pourquoi {
  margin: 0; font-family: var(--display); font-weight: 600;
  font-size: var(--taille-accroche); line-height: 1.2; letter-spacing: -0.025em; color: var(--nuit);
}
.accroche__pourquoi > span { display: block; }
.accroche__source { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--gris-3); }
.accroche__source a { text-underline-offset: 0.18em; }
.accroche__titre { margin-top: 32px; font-size: var(--taille-xl); line-height: var(--interligne-xl); letter-spacing: var(--approche-xl); }
.accroche__titre > span { display: block; }
.accroche__suite {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 40px;
  font-weight: 500; font-size: 17px; line-height: 1.4; color: var(--nuit); text-decoration: none;
}
.accroche__suite:hover > span:last-child { text-decoration: underline; text-underline-offset: 0.18em; }
.accroche__suite:hover .rond-fleche { border-color: var(--iris); transform: translateY(3px); }
/* les raccourcis sous l'invitation (finitions v3) : pour qui sait déjà ce qu'il cherche, sans casser l'ordre AIDA */
.raccourcis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin-top: 14px; font-family: var(--texte); font-size: 16px; line-height: 1.5; }
.raccourcis span { color: var(--gris-3); }
.raccourcis a { color: var(--iris); font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 639.98px) { .raccourcis { flex-direction: column; align-items: flex-start; } }

/* la section des portes, après « Le matin » : la question devient un titre de bloc */
.aiguillage-bloc { border-top: 1px solid var(--gris-1); }
.aiguillage-bloc .aiguillage { margin-top: 0; }
.aiguillage-bloc .aiguillage__question {
  margin-bottom: 32px; font-size: var(--taille-l); line-height: var(--interligne-l); letter-spacing: var(--approche-l);
}
.accroche__chapeau { max-width: 64ch; margin-top: 22px; font-size: var(--taille-chapeau); line-height: 1.5; }

.aiguillage { margin-top: 48px; }
@media (min-width: 900px) { .aiguillage { margin-top: 44px; } }
.aiguillage__question { margin-bottom: 16px; font-family: var(--display); font-weight: 600; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.aiguillage__portes { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 880px) { .aiguillage__portes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }

.porte {
  display: flex; flex-direction: column; min-width: 0; padding: 26px 24px 24px;
  border: 1px solid var(--gris-1); border-radius: var(--rayon); background: var(--papier);
}
@media (min-width: 640px) { .porte { padding: 28px 30px 26px; } }
.porte__titre { max-width: 18ch; font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
.porte__texte { max-width: 46ch; margin-top: 12px; font-size: 17px; line-height: 1.55; }
.porte__faits { display: grid; gap: 6px; margin: 18px 0 0; padding: 14px 0 0; list-style: none; border-top: 1px solid var(--gris-1); font-size: 15.5px; line-height: 1.45; color: var(--gris-3); }
.porte__faits strong { font-weight: 500; color: var(--nuit); }
.porte__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: auto; padding-top: 22px; }
@media (max-width: 639.98px) { .porte__actions .btn { flex: 1 1 100%; } }

/* ------------------------------------------------------------------ 2. le pourquoi, sur nuit */
.verite__phrase { max-width: 17ch; font-size: var(--taille-l); line-height: var(--interligne-l); letter-spacing: var(--approche-l); }
.verite__phrase > span { display: block; }
.verite__suite { max-width: 52ch; margin-top: 32px; font-size: var(--taille-chapeau); line-height: 1.5; color: var(--blanc-doux); }
.verite__suite strong { font-weight: 500; color: var(--blanc); }

.ennemis { display: grid; gap: 0; margin: 64px 0 0; padding: 0; list-style: none; }
/* deux impasses et Anthelixa (sur mesure, 02/10 ; trois impasses jusqu'au 13/10) : une colonne sous 640 px, deux par deux
   jusqu'à 1100 px, trois au-delà */
@media (min-width: 640px) { .ennemis { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
@media (min-width: 900px) { .ennemis { margin-top: 88px; } }
/* trois cartes depuis le 13/10 : la carte « L'agent branché à la hâte » a laissé la place aux cinq refus, sous la liste
   (assets/css/refus.css) ; entre 640 et 1 099 px, la carte d'Anthelixa prend la rangée entière */
@media (min-width: 640px) and (max-width: 1099.98px) { .ennemi--nous { grid-column: 1 / -1; } .ennemi--nous .ennemi__texte { max-width: 60ch; } }
@media (min-width: 1100px) { .ennemis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.ennemi { padding: 24px 0 28px; border-top: 1px solid var(--filet-nuit); }
.ennemi--nous { border-top: 2px solid var(--iris); }
.ennemi__nom { font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.ennemi__ce { margin-top: 6px; font-weight: 500; font-size: 17px; color: var(--blanc); }
.ennemi__texte { margin-top: 12px; max-width: 36ch; font-size: 17px; line-height: 1.55; color: var(--blanc-doux); }

/* ------------------------------------------------------------------ 3. la nuit, puis le matin */
.veille__nuit { padding-block: 64px 72px; }
.registre-nuit + .veille .veille__nuit { border-top: 1px solid var(--filet-nuit); }
@media (min-width: 900px) { .veille__nuit { padding-block: 104px 112px; } }
.veille__entete { display: grid; gap: 18px; }
@media (min-width: 900px) { .veille__entete { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 56px; align-items: end; } }
.veille__entete .chapeau { margin-top: 0; }

.journal { max-width: 980px; margin: 48px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--filet-nuit); }
.journal__ligne {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; row-gap: 2px;
  padding: 18px 0; border-bottom: 1px solid var(--filet-nuit);
}
@media (min-width: 760px) { .journal__ligne { grid-template-columns: 80px 170px minmax(0, 1fr); column-gap: 24px; align-items: baseline; } }
.journal__heure { grid-row: span 2; font-family: var(--mono); font-size: 15px; line-height: 1.5; color: var(--gris-2); }
@media (min-width: 760px) { .journal__heure { grid-row: auto; } }
.journal__qui { font-weight: 500; font-size: 16px; color: var(--blanc); }
.journal__quoi { font-size: 17px; line-height: 1.5; color: var(--blanc-doux); }
.journal__ligne--alerte .journal__quoi { color: var(--blanc); }
.journal__ligne--alerte .journal__qui::after { content: " · alerte"; font-weight: 400; color: var(--gris-2); }

/* un seul moment animé sur la page : les lignes du journal arrivent l'une après l'autre */
@media (prefers-reduced-motion: no-preference) {
  .js .journal--pret .journal__ligne { opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; }
  .js .journal--vu .journal__ligne { opacity: 1; transform: none; }
  .js .journal--vu .journal__ligne:nth-child(2) { transition-delay: .35s; }
  .js .journal--vu .journal__ligne:nth-child(3) { transition-delay: .7s; }
  .js .journal--vu .journal__ligne:nth-child(4) { transition-delay: 1.05s; }
  .js .journal--vu .journal__ligne:nth-child(5) { transition-delay: 1.4s; }
}

.veille__matin { padding-block: 64px; }
@media (min-width: 900px) { .veille__matin { padding-block: 96px 104px; } }
.veille__heure { margin-bottom: 10px; font-family: var(--mono); font-size: 15px; color: var(--gris-3); }
.veille__capture { margin-top: 40px; }
.veille__capture .capture__frame { border-radius: var(--rayon); overflow: hidden; background: var(--papier); }
.veille__capture figcaption { margin: 10px 0 0; font-size: 14px; color: var(--gris-3); }
.veille__pont { max-width: 60ch; margin-top: 32px; font-size: 17px; line-height: 1.55; }

/* ------------------------------------------------------------------ 4 et 5. les deux branches */
.branche__tete { max-width: 860px; }
.peurs { display: grid; gap: 0; margin: 48px 0 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .peurs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 64px; } }
.peur { padding: 22px 0 24px; border-top: 1px solid var(--nuit); }
.peur__titre { font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.peur__texte { margin-top: 10px; max-width: 38ch; font-size: 16.5px; line-height: 1.55; }

.sous-titre { margin-top: 72px; font-size: var(--taille-m); max-width: 26ch; line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
@media (min-width: 900px) { .sous-titre { margin-top: 96px; } }

.formats { display: grid; gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: format; }
@media (min-width: 900px) { .formats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.format { display: flex; flex-direction: column; min-width: 0; padding: 24px; border: 1px solid var(--gris-1); border-radius: var(--rayon); background: var(--papier-chaud); counter-increment: format; }
.format__etape { font-size: 14px; color: var(--gris-3); }
.format__etape::before { content: "Étape " counter(format); }
.format__nom { margin-top: 6px; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.format__texte { margin-top: 10px; font-size: 16.5px; line-height: 1.55; }
@media (min-width: 900px) { .formats--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.format__duree { margin-top: 4px; font-family: var(--display); font-weight: 600; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); color: var(--gris-3); }
.format__prix, .format__regle { margin-top: auto; padding-top: 18px; }
.format__prix span, .format__regle span { display: block; padding-top: 14px; border-top: 1px solid var(--gris-1); font-weight: 500; font-size: 16px; line-height: 1.45; }
.formats__note { max-width: 62ch; margin-top: 18px; font-size: 16px; color: var(--gris-3); }

.preuve-audit { display: grid; gap: 40px; margin-top: 72px; }
@media (min-width: 960px) { .preuve-audit { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; align-items: center; margin-top: 96px; } }
.preuve-audit__phrase { max-width: 18ch; font-family: var(--display); font-weight: 600; font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
.preuve-audit__texte { max-width: 44ch; margin-top: 18px; font-size: 17px; line-height: 1.55; }
.preuve-audit .actions { margin-top: 28px; }

/* branche des workers sur mesure */
.branche .duo { margin-top: 48px; }

.douleurs { display: grid; gap: 0; margin: 28px 0 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .douleurs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.douleur { display: flex; flex-direction: column; padding: 22px 0 24px; border-top: 1px solid var(--nuit); }
.douleur__chiffre { font-family: var(--display); font-weight: 600; font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
.douleur__texte { margin-top: 8px; max-width: 34ch; font-size: 17px; line-height: 1.5; }
.douleur__reponse { margin-top: 14px; max-width: 36ch; font-size: 16px; line-height: 1.5; color: var(--gris-3); }
.douleur__reponse strong { font-weight: 500; color: var(--nuit); }
.douleur .source-ligne { margin-top: auto; padding-top: 14px; font-size: 13.5px; }

.reforme { display: grid; gap: 20px; margin-top: 56px; padding: 32px 24px; border-radius: var(--rayon); }
@media (min-width: 640px) { .reforme { padding: 44px 44px 40px; } }
@media (min-width: 960px) { .reforme { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 56px; margin-top: 72px; } }
.reforme__titre { max-width: 18ch; font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
.reforme__texte p { max-width: 54ch; font-size: 17px; line-height: 1.55; color: var(--blanc-doux); }
.reforme__texte p + p { margin-top: 14px; }
.reforme__texte strong { font-weight: 500; color: var(--blanc); }

/* le calculateur : trois chiffres du visiteur, un résultat en toutes lettres */
.calcul { display: grid; gap: 28px; margin-top: 56px; padding: 28px 24px; border: 1px solid var(--gris-1); border-radius: var(--rayon); background: var(--papier); scroll-margin-top: calc(var(--entete) + 24px); }
@media (min-width: 640px) { .calcul { padding: 40px; } }
@media (min-width: 960px) { .calcul { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 56px; margin-top: 72px; } }
.calcul__titre { max-width: 20ch; font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
.calcul__intro { margin-top: 12px; max-width: 40ch; font-size: 16.5px; line-height: 1.55; color: var(--gris-3); }
.calcul__champs { display: grid; gap: 18px; margin-top: 26px; }
.calcul__champ label { display: block; margin-bottom: 6px; font-weight: 500; font-size: 16px; line-height: 1.35; }
.calcul__champ .aide { display: block; font-weight: 400; font-size: 14px; color: var(--gris-3); }
.calcul__saisie { display: flex; align-items: center; gap: 10px; }
.calcul__saisie input {
  width: 9.5ch; min-height: 48px; padding: 8px 12px; border: 1px solid var(--gris-2); border-radius: var(--rayon);
  background: var(--papier); font-family: var(--display); font-weight: 600; font-size: var(--taille-s); color: var(--nuit); line-height: var(--interligne-s); letter-spacing: var(--approche-s);
}
.calcul__saisie input:focus { border-color: var(--iris); outline: 2px solid var(--iris); outline-offset: 1px; }
.calcul__unite { font-size: 15.5px; color: var(--gris-3); }
.calcul__resultat { display: flex; flex-direction: column; justify-content: center; padding: 28px 24px; border-radius: var(--rayon); background: var(--nuit); color: var(--blanc); }
@media (min-width: 640px) { .calcul__resultat { padding: 36px; } }
.calcul__libelle { font-size: 16px; color: var(--blanc-doux); }
.calcul__heures { margin-top: 6px; font-family: var(--display); font-weight: 600; font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
.calcul__cout { margin-top: 14px; font-size: 19px; line-height: 1.45; }
.calcul__cout output { font-weight: 500; }
.calcul__nuance { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--filet-nuit); font-size: 15px; line-height: 1.55; color: var(--blanc-doux); }
.calcul__resultat .btn { align-self: flex-start; margin-top: 24px; }
@media (max-width: 639.98px) { .calcul__resultat .btn { align-self: stretch; } }

.postes { display: grid; gap: 0; margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--gris-1); }
@media (min-width: 760px) { .postes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
.postes li { border-bottom: 1px solid var(--gris-1); }
.postes a { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 16px 0; text-decoration: none; }
.postes .tuile { width: 44px; height: 44px; }
.postes__nom { display: block; font-family: var(--display); font-weight: 600; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.postes__mission { display: block; margin-top: 2px; font-size: 15.5px; line-height: 1.45; color: var(--gris-3); }
.postes a:hover .postes__nom { text-decoration: underline; text-underline-offset: 0.18em; }


/* ------------------------------------------------------------------ 6. le recrutement */
.recrutement__etapes { display: grid; gap: 0; margin: 48px 0 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .recrutement__etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 64px; } }
.etape { position: relative; padding: 20px 0 24px 28px; border-left: 1px solid var(--gris-1); }
.etape::before { content: ""; position: absolute; left: -5px; top: 26px; width: 9px; height: 9px; border-radius: 50%; background: var(--nuit); }
.etape:last-child::before { background: var(--iris); }
@media (min-width: 900px) {
  .etape { padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--gris-1); }
  .etape::before { left: 0; top: -5px; }
}
.etape__quand { font-size: 15px; color: var(--gris-3); }
.etape__nom { margin-top: 4px; font-size: var(--taille-s); line-height: var(--interligne-s); letter-spacing: var(--approche-s); }
.etape__texte { margin-top: 8px; max-width: 34ch; font-size: 16.5px; line-height: 1.55; }
.recrutement__note { max-width: 62ch; margin-top: 28px; font-size: 16px; color: var(--gris-3); }

/* ------------------------------------------------------------------ 7. données, dans le bloc méthode */
.donnees-v2 { margin-top: 72px; padding-top: 8px; }
.donnees-v2 .sous-titre { margin-top: 0; }
.donnees-v2 .assurances { margin-top: 32px; }

/* ------------------------------------------------------------------ 8. le fondateur */
/* Ni photo ni initiales sur l'accueil (Yann, 07/10) : la photo est sur la page À propos */
.fondateur { display: grid; gap: 32px; }
.fondateur__citation { max-width: 24ch; font-family: var(--display); font-weight: 600; font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
.fondateur__qui { margin-top: 18px; font-weight: 500; font-size: 17px; }
.fondateur__parcours { max-width: 60ch; margin-top: 18px; font-size: 17px; line-height: 1.6; }
.fondateur__parcours + .fondateur__parcours { margin-top: 12px; }
.fondateur .actions { margin-top: 26px; }

/* ------------------------------------------------------------------ 10. la demande */
.demande-v2 .cta__cible { margin-top: 28px; }
.demande-v2__bloc .next, .demande-v2__bloc .cta__cible { max-width: 62ch; }

/* L'accueil sur téléphone (finitions v3) : les grands écarts entre sous-blocs resserrés d'un tiers environ */
@media (max-width: 639.98px) {
  .accroche { padding-block: 32px 48px; }
  .accroche__suite { margin-top: 28px; }
  .veille__nuit { padding-block: 44px 48px; }
  .veille__matin { padding-block: 44px; }
  .sous-titre, .preuve-audit, .donnees-v2 { margin-top: 44px; }
  .ennemis, .reforme, .calcul { margin-top: 40px; }
  .journal, .peurs, .branche .duo, .recrutement__etapes, .aiguillage { margin-top: 32px; }
}

/* L'accueil sur téléphone, dans les grandes sections (finitions v3) : des cartes moins rembourrées, le journal de la
   nuit sur toute la largeur (l'heure passe devant le nom du worker), et deux rangées à faire glisser, les trois
   formats d'audit et les conditions d'achat (voir .rangee dans site.css). Aucun texte retiré. */
@media (max-width: 639.98px) {
  .journal__ligne { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; padding: 14px 0; }
  .journal__heure { grid-row: auto; line-height: 1.6; }
  .journal__quoi { grid-column: 1 / -1; }

  .porte { padding: 22px 20px 20px; }
  .porte__faits { margin-top: 14px; padding-top: 12px; }
  .porte__actions { padding-top: 18px; }

  .ennemi { padding: 20px 0 22px; }
  .peur, .douleur { padding: 18px 0 20px; }
  .format { padding: 20px; }
  .format__prix, .format__regle { padding-top: 14px; }
  .format__prix span, .format__regle span { padding-top: 12px; }
  .preuve-audit { gap: 28px; }
  .doc__page { padding: 18px; }
  .finding { padding: 12px 0; }
  /* Diagnostic, Audit IA stratégique, Audit 360, puis « Et s'il faut agir » (Yann, 02/10) : deux rangées au lieu
     d'une. Pour rester sous 19 000 px à 390 px, la branche Conseil se resserre ; aucun texte retiré. */
  #conseil .formats { margin-top: 16px; }
  #conseil .format { padding: 16px 18px; }
  #conseil .format__duree { margin-top: 2px; }
  #conseil .formats__note { margin-top: 12px; }
  #conseil .formats__note + .sous-titre { margin-top: 28px; }
  #conseil .preuve-audit { margin-top: 32px; }
  #conseil .finding { grid-template-columns: 18px minmax(0, 1fr); column-gap: 8px; padding: 10px 0; }
  #conseil .doc__page { padding: 16px; }
  #conseil .doc__title { margin-top: 14px; }
  #conseil .doc__label { margin-top: 16px; }
  #conseil .peur { padding: 16px 0 18px; }

  .reforme { padding: 26px 20px; }
  .calcul { gap: 22px; padding: 22px 18px; }
  .calcul__champs { gap: 14px; margin-top: 20px; }
  .calcul__resultat { padding: 22px 18px; }
  .postes a { padding: 12px 0; }
  .tarifs__ligne { padding: 14px 0; }
  /* en rangée, chaque condition porte son propre filet, comme les pertes au-dessus */
  .rangee > .tarifs { border-top: 0; }
  .rangee .tarifs__ligne { align-content: start; border-top: 1px solid var(--nuit); border-bottom: 0; }

  .etape { padding: 16px 0 18px 24px; }
  .etape::before { top: 22px; }
}

/* La plateforme, sous « Le matin, vous décidez » (sur mesure, 02/10) : un titre de niveau m, le chapeau, six points sur
   deux colonnes au-delà de 900 px, puis les branchements. */
.plateforme { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--gris-1); }
.plateforme__titre { max-width: 26ch; font-size: var(--taille-m); line-height: var(--interligne-m); letter-spacing: var(--approche-m); }
.plateforme__points { display: grid; gap: 0 40px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: point; }
@media (min-width: 900px) { .plateforme__points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plateforme__points li { position: relative; padding: 14px 0 14px 36px; border-top: 1px solid var(--gris-1); font-size: 17px; line-height: 1.5; counter-increment: point; }
.plateforme__points li::before { content: counter(point, decimal-leading-zero); position: absolute; left: 0; top: 16px; font-family: var(--mono); font-size: 13px; color: var(--gris-3); }
.plateforme__branchements { max-width: 62ch; margin-top: 22px; font-weight: 500; font-size: 17px; }
@media (max-width: 639.98px) { .plateforme { margin-top: 40px; padding-top: 28px; } .plateforme__points li { padding-block: 12px; } }

/* le lien d'une étape de « Et s'il faut agir » (sur mesure, 02/10), calé en bas de sa carte */
.format__lien { margin-top: auto; padding-top: 14px; font-size: 16px; }

/* sous le journal de nuit (sur mesure, 02/10) : l'exemple est marqué, comme les captures */
.journal__exemple { margin-top: 14px; font-family: var(--mono); font-size: 13px; line-height: 1.4; color: var(--blanc-doux); }

/* La plateforme en trois échanges, numérotés à la suite : entre vos équipes, avec les workers, ce qui reste. */
.plateforme__groupes { display: grid; gap: 12px 40px; margin-top: 28px; counter-reset: point; }
@media (min-width: 1100px) { .plateforme__groupes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plateforme__groupes .plateforme__points { margin-top: 10px; counter-reset: none; grid-template-columns: minmax(0, 1fr); }
.plateforme__groupe-titre { font-family: var(--texte); font-weight: 500; font-size: 15px; line-height: 1.4; letter-spacing: 0; color: var(--gris-3); }
.plateforme__lien { margin-top: 14px; }

/* Construits une fois, meilleurs chaque mois (22/10) : après les exemples de workers, la courbe de la page « Le moteur
   évolue » en miniature, fixe (ni animation ni script sur l'accueil). Son point est en nuit : « Trois exemples de
   workers. » et « Comment ça s'achète. », juste autour, portent déjà le point orange (un ou deux par écran). */
.evolue-court { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .evolue-court { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; } }
.evolue-court__lien { margin: 20px 0 0; }
.courbe { margin: 0; }
.courbe--mini { max-width: 420px; }
@media (min-width: 900px) { .courbe--mini { margin-top: 96px; } }
.courbe__svg { display: block; width: 100%; height: auto; overflow: visible; }
.courbe__axe { fill: none; stroke: var(--gris-1); stroke-width: 2; }
.courbe__trace { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.courbe__trace--logiciel { stroke: var(--gris-2); }
.courbe__trace--worker { stroke: var(--nuit); stroke-width: 5; }
.courbe__point { fill: var(--nuit); }
.courbe__legende { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 14px; font-size: 14px; color: var(--gris-3); }
.courbe__cle { display: inline-flex; align-items: center; gap: 10px; }
.courbe__cle::before { content: ""; width: 22px; height: 0; border-top: 4px solid var(--gris-2); border-radius: 2px; }
.courbe__cle--worker::before { border-top-color: var(--nuit); border-top-width: 5px; }