/* Accueil (P1, P5). Toutes les règles sous .accueil. Valeurs de tokens.css (charte v1.0). */
.accueil section[id] { scroll-margin-top: 64px; }

/* ---------- Bandeau d'accroche au-dessus de l'en-tête (spec du 21 octobre, § 3) ---------- */
.accueil.accueil-bandeau { border-bottom: 1px solid var(--rule); }
.accueil.accueil-bandeau p { margin: 0; padding: 11px clamp(16px, 3.4vw, 48px); font: 500 12.5px/1.5 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(243, 244, 238, 0.85); }

/* ---------- Héros : le dessin annoté (spec du 21 octobre). Ordinateur : scène de 1440 × 790 px mise à l'échelle (--s). ---------- */
.accueil .accueil-hero { --s: 1; position: relative; max-width: 1440px; margin: 0 auto; height: calc(790px * var(--s)); overflow: hidden; }
.accueil .hero-scene { position: absolute; left: 0; top: 0; width: 1440px; height: 790px; transform: scale(var(--s)); transform-origin: 0 0; }
.accueil .hero-titre { position: absolute; left: 108px; top: 84px; width: 640px; margin: 0; font: 400 88px/1.22 var(--font-display); letter-spacing: var(--track-display); text-transform: uppercase; color: var(--heading); }
.accueil .hero-choix { position: absolute; left: 108px; top: 506px; }
.accueil .choix-tete { margin: 0 0 12px; font: italic 400 19px/1.3 var(--font-dek); color: var(--fg-1); }
.accueil .choix-cartes { display: grid; grid-template-columns: 245px 245px; gap: 12px; }
.accueil .choix-carte {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "dessin titre fleche" "dessin ligne fleche"; align-items: center; gap: 6px 12px;
  padding: 12px 14px; border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--surface);
  color: var(--fg-1); text-decoration: none; transition: border-color var(--d-ui) var(--ease), background var(--d-ui) var(--ease);
}
.accueil .choix-carte:hover, .accueil .choix-carte:focus-visible { border-color: var(--ek-laiton); background: color-mix(in srgb, var(--surface) 70%, var(--ek-forest)); }
.accueil .choix-dessin { grid-area: dessin; display: block; width: 30px; }
.accueil .elevation { display: block; width: 100%; height: auto; overflow: visible; }
.accueil .elevation .niv { fill: transparent; stroke: rgba(243, 244, 238, 0.5); stroke-width: 1; }
.accueil .elevation .niv.marque { fill: var(--ek-laiton); stroke: var(--ek-ink); }
.accueil .elevation .edicule { fill: transparent; stroke: rgba(243, 244, 238, 0.5); }
.accueil .elevation .sol { stroke: var(--ek-chalk); stroke-width: 1.5; }
.accueil .choix-titre { grid-area: titre; align-self: end; font: 400 17px/1.1 var(--font-display); letter-spacing: 0.025em; text-transform: uppercase; color: var(--heading); padding-top: 0.08em; }
.accueil .choix-ligne { grid-area: ligne; align-self: start; font: 400 9.5px/1.45 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ek-laiton); }
.accueil .choix-carte > svg { width: 16px; height: 10px; fill: none; stroke: var(--ek-laiton); stroke-width: 1.5; transition: transform var(--d-ui) var(--ease); }
.accueil .choix-carte > svg { grid-area: fleche; }
.accueil .choix-carte:is(:hover, :focus-visible) > svg { transform: translateX(6px); }

.accueil .hero-dessin { position: absolute; left: 630px; top: 92px; width: 762px; margin: 0; }
.accueil .hero-dessin svg { display: block; width: 100%; height: auto; overflow: visible; }
.accueil .hero-calque { position: absolute; left: 0; top: 0; width: 820px; height: 714px; transform-origin: 0 0; transform: scale(calc(762 / 820)); pointer-events: none; }
.accueil .hero-calque .co { position: absolute; pointer-events: auto; cursor: default; }
.accueil .lab { font-family: var(--font-body); color: var(--ek-chalk); padding: 2px 0; }
.accueil .lab .tag { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; font: 500 9.5px var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ek-laiton); }
.accueil .lab[style*="right"] .tag { justify-content: flex-end; }
.accueil .lab[style*="center"] .tag { justify-content: center; }
.accueil .lab .num { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--ek-laiton); border-radius: 50%; font-size: 10px; letter-spacing: 0; }
.accueil .lab .txt { font-size: 15px; line-height: 1.3; font-weight: 500; }
.accueil .lab .ex { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: rgba(243, 244, 238, 0.78); opacity: 0; } /* animée par dessin.ts */
.accueil .fil circle, .accueil .mq circle { transform-box: fill-box; transform-origin: center; }
/* Oli, 21 octobre : au survol d'une carte, ses traits passent en laiton comme pendant l'appel (O19), plus de fondu des autres points.
   La pulsation des points est jouée par dessin.ts (appelCartes). */
.accueil .fil path.ln { transition: stroke 540ms ease-in-out, stroke-opacity 540ms ease-in-out; }
.accueil .accueil-hero:has(.choix-carte[data-public="proprietaire"]:is(:hover, :focus-visible)) .fil.proprietaire path.ln,
.accueil .accueil-hero:has(.choix-carte[data-public="occupant"]:is(:hover, :focus-visible)) .fil.occupant path.ln { stroke: var(--ek-laiton); stroke-opacity: 1; }
.accueil .mq { display: none; cursor: pointer; outline: none; }
.accueil .mq circle:not(.cible), .accueil .mq text { transition: fill 160ms var(--ease); }
.accueil .mq.actif circle:not(.cible) { fill: var(--ek-laiton); }
.accueil .mq.actif text { fill: var(--ek-ink); }
.accueil .mq:focus-visible circle:not(.cible) { stroke: var(--ek-chalk); }
.accueil .hero-fiche { display: none; }
.accueil .pause-vie {
  position: absolute; left: 41%; bottom: 4px; transform: translateX(-50%); white-space: nowrap; padding: 6px 10px; border: 1px solid rgba(168, 135, 79, 0.55); border-radius: var(--r);
  background: none; font: 500 10px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ek-laiton); cursor: pointer;
}
.accueil .pause-vie:hover { border-color: var(--ek-laiton); }
.accueil .pause-vie[hidden] { display: none; }

/* Le tracé au chargement, une fois ; en mouvement réduit, le dessin fini directement */
@media (prefers-reduced-motion: no-preference) {
  .accueil .trace .ln { stroke-dasharray: 1; stroke-dashoffset: 1; animation: accueil-trace var(--t, 900ms) var(--ease) var(--d, 0ms) forwards; }
  .accueil .trace .fade { opacity: 0; animation: accueil-apparait 420ms var(--ease) var(--d, 0ms) forwards; }
  @keyframes accueil-trace { to { stroke-dashoffset: 0; } }
  @keyframes accueil-apparait { to { opacity: 1; } }
}

/* ---------- Trois piliers (Oli, 21 octobre) : la planche claire de Cyril, à la place de la planche O25 ---------- */
.accueil .accueil-piliers { background: var(--ek-chalk); }
.accueil .piliers-cadre { max-width: 1440px; margin: 0 auto; padding: clamp(48px, 5vw, 72px) clamp(20px, 7.5vw, 108px) clamp(48px, 5vw, 72px); }
.accueil .piliers-titre { margin: 10px 0 0; font: 400 clamp(36px, 4.45vw, 64px)/1.12 var(--font-display); letter-spacing: var(--track-display); text-transform: uppercase; color: var(--heading); padding-top: 0.12em; }
.accueil .piliers-liste { margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.accueil .pilier { padding-top: 18px; border-top: 2px solid var(--ek-laiton); }
.accueil .pilier h3 { margin: 0; font: 400 clamp(24px, 2.4vw, 32px)/1.15 var(--font-display); text-transform: uppercase; color: var(--heading); padding-top: 0.08em; }
.accueil .pilier p { margin: 10px 0 0; font-size: 16px; color: var(--fg-1); max-width: 36ch; }

/* ---------- Six étapes (Oli, 21 octobre) : la méthode de Cyril, avant les offres ---------- */
.accueil .etapes-liste { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 40px) clamp(20px, 2.4vw, 32px); }
.accueil .etape { padding-top: 16px; border-top: 1px solid var(--rule-strong); }
.accueil .etape-n { display: block; font-size: 13px; letter-spacing: 0.08em; color: var(--ek-laiton); }
.accueil .etape h3 { margin: 10px 0 0; font: 400 clamp(22px, 2vw, 26px)/1.18 var(--font-display); text-transform: uppercase; color: var(--heading); padding-top: 0.08em; }
.accueil .etape p { margin: 10px 0 0; font-size: 15px; color: var(--fg-2); max-width: 40ch; }
.accueil .etapes-mention { margin: clamp(32px, 4vw, 48px) 0 0; font-size: 13px; color: var(--fg-2); opacity: 0.8; max-width: 72ch; }

/* ---------- O25 : planche claire avant les offres, animée au défilement par bande.ts (le HTML porte l'état final) ---------- */
.accueil .accueil-bande { background: var(--ek-chalk); color: var(--ek-ink); }
.accueil .bande-cadre { max-width: 1440px; margin: 0 auto; padding: clamp(48px, 5vw, 72px) clamp(20px, 7.5vw, 108px) clamp(40px, 4.4vw, 60px); }
.accueil .bande-haut { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 40px; }
.accueil .bande-phrase { margin: 0; font: 400 clamp(36px, 4.45vw, 64px)/1.12 var(--font-display); letter-spacing: var(--track-display); text-transform: uppercase; color: var(--ek-ink); }
.accueil .bande-phrase span { display: block; }
.accueil .bande-chiffre { margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.accueil .bande-chiffre .chiffre { min-width: 4.6em; text-align: right; font: 400 clamp(52px, 5.3vw, 76px)/1 var(--font-display); color: var(--ek-laiton); }
.accueil .bande-chiffre .trait { width: 120px; height: 2px; background: var(--ek-laiton); transform-origin: right; }
.accueil .bande-chiffre .leg { font: 500 11px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ek-forest); }
.accueil .barre { display: flex; gap: 3px; height: 22px; }
.accueil .seg { position: relative; height: 100%; }
.accueil .seg .remplissage { position: absolute; inset: 0; background: var(--ek-forest); transform-origin: left; }
.accueil .seg.cache .remplissage { background: repeating-linear-gradient(45deg, var(--ek-lichen) 0 1.5px, transparent 1.5px 6px); box-shadow: inset 0 0 0 1px rgba(143, 163, 148, 0.75); }
.accueil .seg-lib { position: absolute; left: 0; top: calc(100% + 8px); white-space: nowrap; font: 500 14px var(--font-body); color: var(--ek-ink); }
.accueil .caches { margin: 44px 0 0; font: 500 10.5px/1.6 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ek-forest); }
.accueil .cle { display: none; }
.accueil .bande-source { margin: 22px 0 0; font: 500 10.5px/1.5 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ek-forest); }

/* ---------- Offres, O31 : la frise (Arbitrer, Piloter) sur la même grille 7fr / 5fr que les deux offres ----------
   Oli, 21 octobre : la section sur le fond vert de la page, chaque offre en .mode-clair (blanche). */
.accueil .offres-frise, .accueil .offres-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; }
.accueil .offres-frise { margin-bottom: 30px; }
.accueil .frise-col { display: flex; flex-direction: column; gap: 16px; }
.accueil .frise-mot { margin: 0; font: 400 clamp(64px, 8.2vw, 118px)/1 var(--font-display); letter-spacing: -0.005em; text-transform: uppercase; color: var(--heading); }
.accueil .rail { position: relative; min-height: 30px; display: flex; align-items: center; gap: 14px; }
.accueil .rail::before { content: ""; position: absolute; left: 15px; top: calc(50% - 1px); height: 0; }
.accueil .rail.plein::before { right: -28px; border-top: 2px solid var(--ek-laiton); }
.accueil .rail.tirets::before { right: 0; border-top: 2px dashed color-mix(in srgb, var(--fg-1) 45%, transparent); }
.accueil .noeud { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border: 2px solid var(--ek-laiton); border-radius: 50%; background: var(--bg); font: 500 13px var(--font-mono); color: var(--fg-1); }
.accueil .rail-lib { position: relative; z-index: 1; padding: 0 10px; background: var(--bg); font: 500 11px/1.5 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); white-space: nowrap; }
.accueil .rail.tirets .rail-lib { color: color-mix(in srgb, var(--fg-1) 70%, transparent); }
/* Oli, 21 octobre : chaque offre en colonne, le bas aligné d'une offre à l'autre */
.accueil .offres-grille { align-items: stretch; }
.accueil .offre { border-radius: var(--r); display: flex; flex-direction: column; }
.accueil .offre-fort { padding: 34px 36px; border: 1px solid var(--ek-laiton); background: var(--bg); box-shadow: var(--e2); }
.accueil .offre-suite { padding: 30px; border: 1px solid var(--rule-strong); }
.accueil .offre-type { margin: 0 0 8px; font: 500 11px/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); }
.accueil .offre h3 { margin: 0 0 6px; font: 400 36px/1.2 var(--font-display); text-transform: uppercase; color: var(--heading); padding-top: 0.08em; }
.accueil .offre-accroche { margin: 0 0 22px; font: italic 400 20px/1.35 var(--font-dek); max-width: 30ch; }
.accueil .offre-prix { margin: 0 0 20px; display: flex; flex-direction: column; gap: 4px; }
.accueil .offre-prix .prix { font: 400 40px/1.05 var(--font-display); color: var(--figure); }
.accueil .offre-prix .prix-detail { font: 500 11px/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--fg-1) 70%, transparent); }
.accueil .offre-doublure { margin: -6px 0 20px; }
.accueil .offre ul { margin: 0 0 10px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.accueil .offre-suite ul { grid-template-columns: 1fr; }
.accueil .offre li { position: relative; padding-left: 18px; font: 500 15px/1.4 var(--font-body); }
.accueil .offre li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; background: var(--ek-laiton); }
.accueil .offre-qui { margin: 0 0 20px; font: 500 13px/1.5 var(--font-body); color: color-mix(in srgb, var(--fg-1) 75%, transparent); }
/* Prix retirés (Jérémy, 22 octobre) : le bouton reste en bas de l'offre, aligné d'une offre à l'autre */
.accueil .offre .bouton, .accueil .offre .bouton-ligne { gap: 12px; align-self: flex-start; margin-top: auto; }
.accueil .partner { margin: 44px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; padding: 16px 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); font-size: 14px; }
.accueil .partner-nom { font: 400 11px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ek-laiton); }
.accueil .partner-texte { flex: 1 1 30ch; font-weight: 500; }
.accueil .partner-prix { font-size: 13px; }
.accueil .partner a { font-weight: 500; }


/* ---------- Diagnostic éKlair (W5) : un bouton par outil vers diagnostic.html (Oli, 21 octobre), sur fond blanc après les six étapes ---------- */
.accueil .diag-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.accueil .diag-outil {
  display: grid; grid-template-rows: auto auto 1fr; gap: 14px; padding: 12px 12px 20px; border: 1px solid var(--rule-strong); border-radius: var(--r);
  background: var(--surface); color: var(--fg-1); text-decoration: none;
  transition: border-color var(--d-ui) var(--ease), box-shadow var(--d-ui) var(--ease), transform var(--d-ui) var(--ease);
}
.accueil .diag-outil:hover, .accueil .diag-outil:focus-visible { border-color: var(--ek-laiton); box-shadow: var(--e2); transform: translateY(-2px); }
.accueil .diag-vignette { display: block; border-radius: 4px; overflow: hidden; }
.accueil .diag-meta { display: flex; align-items: center; gap: 10px; padding: 0 6px; font: 400 11px/1.4 var(--font-mono); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--fg-2); }
.accueil .diag-code { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--ek-laiton); border-radius: var(--r-block); color: var(--fg-1); font-size: 13px; letter-spacing: 0; }
.accueil .diag-meta svg { width: 16px; height: 10px; margin-left: auto; fill: none; stroke: var(--ek-laiton); stroke-width: 1.5; transition: transform var(--d-ui) var(--ease); }
.accueil .diag-outil:hover .diag-meta svg { transform: translateX(4px); }
.accueil .diag-titre { padding: 0 6px; font: 400 clamp(22px, 2vw, 26px)/1.18 var(--font-display); text-transform: uppercase; color: var(--heading); }
.accueil .diag-titre .a-confirmer { vertical-align: middle; margin-left: 8px; transform: translateY(-0.12em); }
.accueil .diag-client { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 20px; padding: 18px 22px; border: 1px dashed var(--ek-laiton); border-radius: var(--r); }
.accueil .diag-client p { margin: 0; }
.accueil .diag-client-titre { font: 400 20px/1.2 var(--font-display); text-transform: uppercase; color: var(--heading); padding-top: 0.08em; }
.accueil .diag-client-texte { flex: 1 1 30ch; font-size: 15px; color: var(--fg-2); }

/* Vignettes des outils (vignettes.ts) : le papier de plan et les traits des outils */
.accueil .vignette { display: block; width: 100%; height: auto; }
.accueil .vignette .vg-papier { fill: var(--ek-paper); }
.accueil .vignette .vg-grille { stroke: rgba(243, 244, 238, 0.08); stroke-width: 1; }
.accueil .vignette .vg-trait { fill: none; stroke: rgba(243, 244, 238, 0.8); stroke-width: 1.2; }
.accueil .vignette .vg-fin { fill: none; stroke: rgba(243, 244, 238, 0.4); stroke-width: 1; }
.accueil .vignette .vg-fin-plein { fill: var(--ek-chalk); }
.accueil .vignette .vg-poste { fill: none; stroke: rgba(243, 244, 238, 0.55); stroke-width: 0.8; }
.accueil .vignette .vg-present { fill: var(--ek-copper); }
.accueil .vignette .vg-laiton { fill: none; stroke: var(--ek-laiton); stroke-width: 1.6; }
.accueil .vignette .vg-laiton-plein, .accueil .vignette .vg-dpe { fill: var(--ek-laiton); }
.accueil .vignette .vg-tirets { stroke: var(--ek-laiton); stroke-width: 1; stroke-dasharray: 3 3; }
.accueil .vignette .vg-hachure { stroke: var(--ek-laiton); stroke-opacity: 0.6; stroke-width: 1; }
.accueil .vignette .vg-loue { fill: var(--ek-forest); stroke: rgba(243, 244, 238, 0.55); stroke-width: 0.8; }
.accueil .vignette .vg-vacant { stroke: rgba(243, 244, 238, 0.55); stroke-width: 0.8; }
.accueil .vignette .vg-point { fill: var(--ek-paper); stroke: var(--ek-laiton); stroke-width: 1.5; }
.accueil .vignette .vg-lib { font: 500 7.5px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; fill: var(--ek-laiton); }
.accueil .vignette .vg-dpe-t { font: 500 5.5px var(--font-mono); fill: var(--ek-ink); }

/* ---------- Détails au défilement (Oli, 22 octobre) : un geste par section, tiré du dessin technique (defile.ts) ----------
   Les valeurs par défaut sont l'état final : sans JavaScript ou en mouvement réduit, tout est calé. */
/* Nos convictions : trois piliers décalés qui se calent au niveau de référence ±0,00 */
.accueil .piliers-niveau { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: clamp(28px, 3.4vw, 40px) 0 -14px; }
.accueil .piliers-niveau + .piliers-liste { margin-top: 24px; }
.accueil .niveau-fiole { position: relative; width: 48px; height: 12px; border: 1px solid rgba(31, 77, 58, 0.5); border-radius: 6px; }
.accueil .niveau-fiole::before, .accueil .niveau-fiole::after { content: ""; position: absolute; top: 2px; bottom: 2px; width: 1px; background: rgba(31, 77, 58, 0.45); }
.accueil .niveau-fiole::before { left: calc(50% - 8px); }
.accueil .niveau-fiole::after { left: calc(50% + 7px); }
.accueil .niveau-fiole i { position: absolute; top: 2px; left: calc(50% - 6px); width: 12px; height: 6px; border-radius: 3px; background: var(--ek-laiton); transform: translateX(calc(var(--reste, 0) * 15px)); }
.accueil .niveau-cote { font: 500 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.accueil .niveau-cote span { display: inline-block; min-width: 5ch; text-transform: none; }
.accueil .piliers-niveau.cale .niveau-cote span { color: var(--ek-laiton); }
.accueil .pilier { translate: 0 calc(var(--o, 0px) * var(--reste, 0)); }
/* Notre approche : chaque filet devient une règle graduée qui se remplit de laiton, dans l'ordre de lecture */
.accueil .etape { position: relative; }
.accueil .etape::before { content: ""; position: absolute; left: 0; right: 0; top: -1.5px; height: 2px; background: var(--ek-laiton); transform-origin: 0 50%; transform: scaleX(var(--f, 1)); }
.accueil .etape::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 5px; background: repeating-linear-gradient(90deg, rgba(243, 244, 238, 0.3) 0 1px, transparent 1px 10%); pointer-events: none; }
.accueil .etape-n { opacity: calc(0.38 + 0.62 * var(--a, 1)); }
.accueil .etapes-cqfd { position: absolute; right: 0; top: -24px; font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.24em; color: var(--ek-laiton); opacity: var(--q, 1); transform: translateY(calc((1 - var(--q, 1)) * 4px)); }
/* Diagnostic Flash : les repères de coupe d'une planche imprimée, qui se resserrent sur la grille */
.accueil .diag-grille { position: relative; }
.accueil .accueil-diagnostic-fond { overflow-x: clip; } /* les repères arrivent de hors champ sans élargir la page */
.accueil .repere { --d: calc((1 - var(--pe, 1)) * 28px); position: absolute; width: 0; height: 0; color: rgba(31, 77, 58, 0.6); opacity: var(--pe, 1); pointer-events: none; transform-origin: 0 0; transform: translate(calc(var(--sx) * var(--d)), calc(var(--sy) * var(--d))) rotate(var(--rot)); }
.accueil .repere::before, .accueil .repere::after { content: ""; position: absolute; background: currentColor; }
.accueil .repere::before { left: -22px; top: 0; width: 14px; height: 1px; }
.accueil .repere::after { left: 0; top: -22px; width: 1px; height: 14px; }
.accueil .repere.hg { left: 0; top: 0; --sx: -1; --sy: -1; --rot: 0deg; }
.accueil .repere.hd { left: 100%; top: 0; --sx: 1; --sy: -1; --rot: 90deg; }
.accueil .repere.bd { left: 100%; top: 100%; --sx: 1; --sy: 1; --rot: 180deg; }
.accueil .repere.bg { left: 0; top: 100%; --sx: -1; --sy: 1; --rot: 270deg; }
/* la mire de repérage, au milieu du bord droit, tourne d'un huitième de tour pour se caler */
@media (max-width: 1099px) { .accueil .mire { display: none; } }
.accueil .mire { position: absolute; left: calc(100% + 18px); top: 50%; width: 15px; height: 15px; margin-top: -7.5px; border: 1px solid rgba(31, 77, 58, 0.6); border-radius: 50%; opacity: var(--pe, 1); transform: rotate(calc((1 - var(--pe, 1)) * -45deg)); pointer-events: none; }
.accueil .mire::before, .accueil .mire::after { content: ""; position: absolute; background: rgba(31, 77, 58, 0.6); }
.accueil .mire::before { left: -5px; right: -5px; top: 6.5px; height: 1px; }
.accueil .mire::after { top: -5px; bottom: -5px; left: 6.5px; width: 1px; }
/* Nos offres : les deux verbes arrivent de part et d'autre ; leur étymologie paraît au survol */
.accueil .frise-col { position: relative; }
.accueil .accueil-offres-fond { overflow-x: clip; } /* les verbes arrivent de hors champ sans élargir la page */
.accueil .frise-col:first-child .frise-mot { transform: translateX(calc(var(--reste, 0) * -56px)); }
.accueil .frise-col:last-child .frise-mot { transform: translateX(calc(var(--reste, 0) * 56px)); }
.accueil .frise-etym { display: none; position: absolute; left: 3px; top: -24px; font: 500 10.5px/1.3 var(--font-mono); letter-spacing: 0.08em; color: var(--fg-2); white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); pointer-events: none; }
/* au survol seulement, sur un écran assez large pour la ligne entière */
@media (hover: hover) and (pointer: fine) and (min-width: 1100px) {
  .accueil .frise-etym { display: block; }
  .accueil .frise-mot { cursor: default; }
  .accueil .frise-col:hover .frise-etym { opacity: 1; transform: none; }
}
/* Équipe : le compas trace le cercle de chaque portrait, d'un point de départ décentré, et le portrait s'ouvre */
.accueil .membre-cadre { position: relative; display: block; width: 128px; height: 128px; }
.accueil .membre-cadre .membre-photo { clip-path: circle(calc(30% + 20% * var(--pe, 1)) at 50% 50%); }
.accueil .membre-compas { position: absolute; left: -7px; top: -7px; width: calc(100% + 14px); height: calc(100% + 14px); max-width: none; transform: rotate(-118deg); overflow: visible; pointer-events: none; }
.accueil .membre-compas circle { fill: none; stroke: var(--ek-laiton); stroke-width: 0.75; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--pe, 1)); }
@media (max-width: 620px) {
  .accueil .piliers-niveau { justify-content: flex-start; margin-bottom: -8px; }
  .accueil .pilier { translate: calc(var(--o, 0px) * var(--reste, 0) * 0.7) 0; }
  .accueil .repere::before { left: -14px; width: 9px; }
  .accueil .repere::after { top: -14px; height: 9px; }
  .accueil .repere { --d: calc((1 - var(--pe, 1)) * 12px); }
  .accueil .mire { display: none; }
  .accueil .frise-col:first-child .frise-mot { transform: translateX(calc(var(--reste, 0) * -20px)); }
  .accueil .frise-col:last-child .frise-mot { transform: translateX(calc(var(--reste, 0) * 20px)); }
  .accueil .membre-cadre { width: 88px; height: 88px; }
  .accueil .membre-compas { left: -5px; top: -5px; width: calc(100% + 10px); height: calc(100% + 10px); }
  .accueil .membre-compas circle { stroke-width: 1; }
}

/* ---------- C1, « Une semaine sur le plateau » (Oli, 21 octobre) : une piste de défilement, une scène collante ----------
   Le plan au trait comme le héros : craie sur le fond de la page, laiton pour les postes occupés. plateau.ts règle l'état.
   Oli, 22 octobre : tout tient sur un écran, en tableau de bord, titre compris. Le plan prend la place que laissent
   les autres blocs (--reserve : en-tête, horloge, courbe, marges ; au téléphone, aussi le titre et la légende). */
.accueil .plateau-resume { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.accueil .plateau-piste { position: relative; height: 400vh; }
.accueil .plateau-scene {
  --reserve: 300px; --vb: 1000;
  position: sticky; top: 0; height: 100vh; height: 100svh; max-width: 1560px; margin: 0 auto;
  padding: calc(var(--entete-h, 64px) + 20px) clamp(16px, 4vw, 48px) 20px;
  display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); column-gap: clamp(28px, 3.4vw, 56px); align-content: center;
}
.accueil .plateau-texte { display: flex; flex-direction: column; min-height: 0; }
.accueil .plateau-tete { margin: 0; max-width: none; }
.accueil .plateau-tete h2 { font-size: clamp(28px, 2.6vw, 42px); line-height: 1.12; }
.accueil .plateau-legendes { display: grid; margin-top: clamp(20px, 3vh, 36px); }
.accueil .plateau-legende { grid-area: 1 / 1; margin: 0; font: italic 400 clamp(18px, 1.5vw, 22px)/1.35 var(--font-dek); color: var(--fg-1); opacity: 0; transform: translateY(8px); transition: opacity 320ms var(--ease), transform 320ms var(--ease); }
.accueil .plateau-legende.actif { opacity: 1; transform: none; }
.accueil .plateau-chiffre span { display: block; }
.accueil .plateau-chiffre .avant { font-size: 0.85em; }
.accueil .plateau-chiffre .grand { margin: 4px 0 6px; font: 400 clamp(44px, 4.4vw, 72px)/1 var(--font-display); font-style: normal; color: var(--figure); padding-top: 0.06em; }
.accueil .plateau-chiffre .pont { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); font: 500 14px/1.5 var(--font-body); font-style: normal; color: var(--fg-2); }
.accueil .plateau-source { margin: auto 0 0; padding-top: 20px; font: 400 10.5px/1.55 var(--font-mono); letter-spacing: 0.04em; color: color-mix(in srgb, var(--fg-1) 62%, transparent); }
.accueil .plateau-vue { display: grid; grid-template-rows: auto auto auto; gap: 12px; min-width: 0; }
.accueil .plateau-hud { display: flex; align-items: baseline; gap: 10px 24px; flex-wrap: wrap; }
.accueil .plateau-hud p { margin: 0; }
.accueil .plateau-horloge { margin-right: auto !important; font: 500 12px/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.accueil .plateau-compte { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.accueil .plateau-compte .n { font: 400 clamp(36px, 3.4vw, 52px)/1 var(--font-display); color: var(--heading); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; padding-top: 0.06em; }
.accueil .plateau-compte small { font: 500 11px/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); }
.accueil .plateau-vides { font: 500 12px/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ek-laiton); white-space: nowrap; opacity: 0; transition: opacity 300ms var(--ease); }
.accueil .plateau-vides.visible { opacity: 1; }
.accueil .plateau-plan { position: relative; width: min(100%, (100svh - var(--reserve)) * var(--vb) / 560); aspect-ratio: var(--vb) / 560; }
.accueil .plateau-plan svg, .accueil .plateau-courbe svg { display: block; width: 100%; height: 100%; overflow: visible; }
.accueil .plateau-plan svg *, .accueil .plateau-courbe svg * { vector-effect: non-scaling-stroke; }
.accueil .plan-grille { fill: none; stroke: rgba(243, 244, 238, 0.05); stroke-width: 1; }
.accueil .plan-murs { fill: none; stroke: rgba(243, 244, 238, 0.7); stroke-width: 1.5; }
.accueil .plan-murs .interieur { stroke-opacity: 0.45; stroke-width: 1; }
.accueil .plan-salles { fill: none; stroke: rgba(243, 244, 238, 0.32); stroke-width: 1; }
.accueil .poste { fill: none; stroke: rgba(243, 244, 238, 0.5); stroke-width: 1; }
.accueil .plan-zone { fill: url(#plateau-hachures); stroke: var(--ek-laiton); stroke-width: 1.5; stroke-dasharray: 6 5; opacity: 0; }
.accueil .personne { fill: var(--ek-laiton); opacity: 0; transition: opacity 180ms var(--ease); }
.accueil .personne.allume { opacity: 1; }
.accueil .personne rect { fill-opacity: 0.88; }
.accueil .plateau-zone-lib { position: absolute; left: 79.2%; top: 46.6%; transform: translate(-50%, -50%); padding: 4px 10px; background: var(--bg); font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ek-laiton); white-space: nowrap; opacity: 0; }
.accueil .plateau-courbe { position: relative; height: 54px; margin: 14px 0 18px; }
.accueil .courbe-jours { fill: none; stroke: rgba(243, 244, 238, 0.14); stroke-width: 1; }
.accueil .courbe-payes { fill: none; stroke: rgba(243, 244, 238, 0.55); stroke-width: 1; stroke-dasharray: 4 4; }
.accueil .courbe-ligne { fill: none; stroke: var(--ek-chalk); stroke-width: 1.5; }
.accueil .courbe-ecart { fill: none; stroke: var(--ek-laiton); stroke-width: 2; opacity: 0; transition: opacity 300ms var(--ease); }
.accueil .courbe-curseur { fill: none; stroke: var(--ek-laiton); stroke-width: 1; }
.accueil .courbe-lib-payes { position: absolute; right: 0; top: -16px; font: 500 10px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); }
.accueil .courbe-pic { position: absolute; display: flex; align-items: center; gap: 8px; transform: translate(-5px, -50%); font: 500 10px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ek-laiton); white-space: nowrap; opacity: 0; transition: opacity 300ms var(--ease); }
.accueil .courbe-pic i { width: 9px; height: 9px; border-radius: 50%; background: var(--ek-laiton); }
.accueil .courbe-pic span { padding: 2px 4px; background: var(--bg); transform: translateY(-11px); }
.accueil .courbe-pic.visible { opacity: 1; }
.accueil .courbe-jours-lib { position: absolute; left: 2%; right: 2%; top: calc(100% + 4px); display: grid; grid-template-columns: repeat(5, 1fr); font: 500 10px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); text-align: center; }
/* Tablette et téléphone : une seule colonne, titre, légende, horloge, plan, courbe, source */
@media (max-width: 1023px) {
  .accueil .plateau-scene { --reserve: 560px; grid-template-columns: minmax(0, 1fr); align-content: start; row-gap: 12px; }
  .accueil .plateau-texte, .accueil .plateau-vue { display: contents; }
  .accueil .plateau-tete { order: 1; }
  .accueil .plateau-legendes { order: 2; margin-top: 4px; }
  .accueil .plateau-hud { order: 3; }
  .accueil .plateau-plan { order: 4; justify-self: center; }
  .accueil .plateau-courbe { order: 5; margin: 12px 0 14px; }
  .accueil .plateau-source { order: 6; margin: 0; padding-top: 0; }
}
@media (max-width: 620px) {
  .accueil .plateau-piste { height: 360vh; }
  .accueil .plateau-scene { --reserve: 500px; --vb: 810; row-gap: 8px; padding-top: calc(var(--entete-h, 56px) + 12px); padding-bottom: 12px; }
  .accueil .plateau-tete h2 { font-size: 23px; }
  .accueil .plateau-legende { font-size: 16px; }
  .accueil .plateau-chiffre .avant { font-size: 14px; }
  .accueil .plateau-chiffre .grand { font-size: 36px; margin: 2px 0; }
  .accueil .plateau-chiffre .apres { font-size: 15px; }
  .accueil .plateau-chiffre .pont { font-size: 12.5px; margin-top: 6px; padding-top: 6px; }
  .accueil .plateau-hud { gap: 8px; flex-wrap: nowrap; }
  .accueil .plateau-horloge { font-size: 10.5px; letter-spacing: 0.1em; }
  .accueil .plateau-compte { gap: 6px; }
  .accueil .plateau-compte .n { font-size: 30px; min-width: 0; }
  .accueil .plateau-compte small { font-size: 9.5px; letter-spacing: 0.08em; }
  .accueil .plateau-vides { display: none; }
  .accueil .plateau-zone-lib { left: 74.3%; font-size: 9.5px; padding: 2px 6px; letter-spacing: 0.1em; }
  .accueil .plateau-courbe { height: 40px; }
  .accueil .courbe-lib-payes { top: -14px; font-size: 9px; }
  .accueil .plateau-source { font-size: 9px; }
}
/* Mouvement réduit : l'état final, sans piste */
.accueil .plateau-fixe .plateau-piste { height: auto; }
.accueil .plateau-fixe .plateau-scene { position: relative; height: auto; padding-top: clamp(56px, 9vw, 120px); padding-bottom: clamp(56px, 9vw, 120px); }
.accueil .plateau-fixe .plateau-plan { width: 100%; }

/* ---------- Équipe (W6) : Charles, Cyril, Jérémy, Olivier ; photos détourées en cercle, 140 px au plus ---------- */
.accueil .equipe-liste { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(20px, 2.4vw, 32px); }
.accueil .membre { display: grid; grid-template-rows: auto 1fr; gap: 16px; align-content: start; }
.accueil .membre-photo { display: block; width: 128px; height: 128px; max-width: 100%; }
.accueil .membre h3 { margin: 0; font: 500 18px/1.3 var(--font-body); color: var(--heading); }
.accueil .membre .role { margin: 2px 0 0; font: 400 11px/1.4 var(--font-mono); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--ek-lichen); }
.accueil .membre .bio { margin: 10px 0 0; font-size: 15px; color: var(--fg-2); opacity: 0.9; max-width: 60ch; }

/* ---------- Contact ---------- */
.accueil .accueil-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.accueil .accueil-contact .section-tete { margin-bottom: 0; }
.accueil .contact-direct { margin: 18px 0 0; font: 400 15px/1.4 var(--font-mono); }
.accueil .contact-direct a { color: var(--ek-laiton); }
.accueil .contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.accueil .contact-form .large, .accueil .contact-doublure { grid-column: 1 / -1; }
.accueil .contact-doublure { margin: 0; }
.accueil .contact-form label { display: grid; gap: 6px; font: 500 14px/1.3 var(--font-body); }
.accueil .contact-form input:not([type="checkbox"]), .accueil .contact-form select, .accueil .contact-form textarea {
  width: 100%; min-height: var(--control-h); padding: 9px 12px; border: 1px solid var(--rule-strong); border-radius: var(--r);
  background: var(--surface); color: var(--fg-1); font: 400 15px/1.4 var(--font-body);
}
.accueil .contact-form input:focus, .accueil .contact-form select:focus, .accueil .contact-form textarea:focus { outline: none; border-color: var(--ek-laiton); }
.accueil .contact-form .case { grid-template-columns: auto 1fr; align-items: start; gap: 10px; font-weight: 400; font-size: 14px; }
.accueil .contact-form .case input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ek-laiton); }
.accueil .contact-form .mention { margin: 0; font-size: 13px; color: var(--fg-2); opacity: 0.8; }
.accueil .envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.accueil .retour { margin: 0; font-size: 14px; color: var(--ek-laiton); max-width: 52ch; }
.accueil .retour.erreur { color: var(--ek-copper, #B26A3F); }
/* pot de miel : invisible pour les personnes, rempli par les robots */
.accueil .contact-pot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Contact sur fond blanc (Oli, 21 octobre) : le laiton en texte manque de contraste sur le blanc, le texte passe en Forêt */
.accueil .accueil-contact-fond .contact-direct a, .accueil .accueil-contact-fond .retour { color: var(--ek-forest); }

/* ---------- État du prototype (P5, interne) ---------- */
.accueil .accueil-statut { padding-top: clamp(40px, 6vw, 72px); }
.accueil .statut-cadre { border: 1px dashed var(--ek-laiton); border-radius: var(--r); padding: clamp(20px, 3vw, 36px); background: color-mix(in srgb, var(--bg) 80%, var(--ek-paper)); }
.accueil .statut-cadre .surtitre { color: var(--ek-laiton); }
.accueil .statut-cadre h2 { margin: 8px 0 0; font: 400 clamp(26px, 3vw, 34px)/1.2 var(--font-display); text-transform: uppercase; color: var(--heading); padding-top: 0.08em; }
.accueil .statut-cadre > .texte { margin: 10px 0 0; font-size: 15px; }
.accueil .statut-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(24px, 4vw, 48px); margin-top: 28px; }
.accueil .statut-grille h3 { margin: 0 0 8px; font: 400 11px/1.4 var(--font-mono); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--ek-lichen); }
.accueil .statut-grille ul { margin: 0; padding: 0; list-style: none; }
.accueil .statut-grille li { padding: 8px 0; border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.5; }
.accueil .statut-decisions li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
.accueil .statut-decisions .code { color: var(--ek-laiton); font-size: 13px; padding-top: 1px; }
.accueil .statut-decisions b { display: block; font-weight: 500; color: var(--heading); }

/* ---------- Tablette et téléphone ---------- */
@media (max-width: 1080px) {
  .accueil .equipe-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .accueil .rail-lib { white-space: normal; max-width: calc(100% - 100px); }
}
@media (max-width: 860px) {
  .accueil .etapes-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Téléphone : titre, fiche unique, dessin avec ses numéros, puis les cartes (spec § 3) */
  .accueil .accueil-hero { height: auto; overflow: visible; }
  .accueil .hero-scene { position: static; width: auto; height: auto; transform: none; padding: 40px 20px 36px; }
  .accueil .hero-titre { position: static; width: auto; font-size: clamp(40px, 12.8vw, 50px); }
  .accueil .hero-fiche { display: flex; flex-direction: column; height: 160px; margin: 28px 0 0; padding: 14px 0 12px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .accueil .fiche-tag { display: flex; gap: 10px; align-items: center; margin: 0; font: 500 10px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ek-laiton); }
  .accueil .fiche-tag .num { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1.2px solid var(--ek-laiton); border-radius: 50%; letter-spacing: 0; font-size: 10.5px; }
  .accueil .fiche-txt { margin: 8px 0 0; font: 500 17px/1.3 var(--font-body); color: var(--heading); }
  .accueil .fiche-ex { margin: 6px 0 0; font: 400 14px/1.5 var(--font-body); color: rgba(243, 244, 238, 0.8); }
  .accueil .fiche-note { margin: auto 0 0; font: 500 9.5px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(243, 244, 238, 0.55); }
  .accueil .hero-dessin { position: relative; left: auto; top: auto; width: auto; margin: 6px -6px 0; }
  .accueil .hero-dessin svg { overflow: hidden; }
  .accueil .hero-calque, .accueil .fil, .accueil .cartouche-planche { display: none; }
  .accueil .mq { display: inline; }
  .accueil .pause-vie { left: 3%; top: 88%; bottom: auto; transform: none; }
  .accueil .hero-choix { position: static; margin-top: 26px; }
  .accueil .choix-cartes { grid-template-columns: 1fr; }
  .accueil .bande-haut { flex-direction: column; align-items: flex-start; gap: 26px; margin-bottom: 28px; }
  .accueil .bande-chiffre { align-items: flex-start; }
  .accueil .bande-chiffre .chiffre { text-align: left; }
  .accueil .bande-chiffre .trait { transform-origin: left; }
  .accueil .barre { height: 16px; }
  .accueil .seg-lib, .accueil .caches { display: none; }
  .accueil .cle { display: grid; gap: 9px; margin: 16px 0 0; padding: 0; list-style: none; }
  .accueil .cle li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 10px; align-items: center; }
  .accueil .cle .pastille { grid-row: span 2; width: 14px; height: 10px; background: var(--ek-forest); }
  .accueil .cle li.cache .pastille { background: repeating-linear-gradient(45deg, var(--ek-lichen) 0 1.5px, transparent 1.5px 5px); box-shadow: inset 0 0 0 1px var(--ek-lichen); }
  .accueil .cle-lib { font: 500 14px var(--font-body); color: var(--ek-ink); }
  .accueil .cle-detail { grid-column: 2; font: 500 10px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ek-forest); }
  .accueil .statut-grille, .accueil .accueil-contact { grid-template-columns: 1fr; }
  .accueil .diag-grille { grid-template-columns: 1fr; gap: 12px; }
  .accueil .diag-outil { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "vignette meta" "vignette titre"; gap: 8px 14px; padding: 10px; }
  .accueil .diag-vignette { grid-area: vignette; align-self: start; }
  .accueil .diag-meta { grid-area: meta; padding: 0; }
  .accueil .diag-titre { grid-area: titre; padding: 0; font-size: 19px; }
  /* O31 au téléphone : mot, offre, mot, offre ; le trait plein descend du nœud 1 vers éKlair */
  .accueil .accueil-offres { display: flex; flex-direction: column; }
  .accueil .offres-frise, .accueil .offres-grille { display: contents; }
  .accueil .frise-col:first-child { order: 1; }
  .accueil .offre-fort { order: 2; margin: 14px 0 30px; }
  .accueil .frise-col:last-child { order: 3; }
  .accueil .offre-suite { order: 4; margin-top: 14px; }
  .accueil .partner { order: 5; flex-direction: column; gap: 6px; }
  .accueil .partner-texte { flex: none; }
  .accueil .offre-fort, .accueil .offre-suite { padding: 24px 20px; }
  .accueil .offre ul { grid-template-columns: 1fr; }
  .accueil .rail-lib { padding: 0; white-space: normal; max-width: none; }
  .accueil .rail.plein::before { right: auto; left: 14px; top: 30px; height: 40px; border-top: 0; border-left: 2px solid var(--ek-laiton); }
  .accueil .rail.tirets::before { display: none; }
}
@media (max-width: 620px) {
  .accueil .piliers-liste, .accueil .etapes-liste { grid-template-columns: 1fr; gap: 24px; }
  .accueil .contact-form { grid-template-columns: 1fr; }
  .accueil .equipe-liste { grid-template-columns: 1fr; gap: 24px; }
  .accueil .membre { grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: none; gap: 16px; }
  .accueil .membre-photo { width: 88px; height: 88px; }
}

/* Les doublures longues reviennent à la ligne sur téléphone (site.css les garde sur une ligne). */
.accueil .doublure { white-space: normal; }
/* La pastille « à valider » de site.css manque de contraste en mode sombre : laiton plein, encre Sous-bois. */
.accueil .a-confirmer { background: var(--ek-laiton); color: var(--ek-ink); }