/* =====================================================================
   Ecodesign 5.0 — Site, version locale de travail v0.4 (12/10/2026)
   Direction : premium, éditorial, pleine largeur (inspiration korbon.fr) ;
   en-têtes de pages en bandeau bleu nuit (proposition A retenue le 12/10/2026)
   Charge, dans l'ordre : ../charte-graphique/tokens.css,
   ../schemas/schemas.css, puis ce fichier.

   1. Polices          6. Héros des pages       11. Formulaires
   2. Base             7. Sous-navigation       12. Questions fréquentes
   3. Typographie      8. Sections, composants  13. Pages légales
   4. Boutons          9. Bandeau des logos     14. Appel, pager, pied de page
   5. En-tête, accueil 10. Consortium           15. Mouvement, impression
   ===================================================================== */

/* ---------- 1. Polices (hébergées localement, licence OFL) ---------- */
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/source-sans-3-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 2. Base ---------- */
:root {
  --header-h: 76px;
  --wrap: var(--container-large);
  --pad: var(--gutter-large);
  --section: clamp(72px, 8.5vw, 152px);
  --sommaire: 210px;                          /* colonne du sommaire, sur ordinateur */
  --sommaire-ecart: clamp(36px, 3vw, 64px);
  --wrap-accueil: 1680px;                     /* accueil : sections centrées sous le premier écran */
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 64px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; min-width: 320px; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-texte); font-size: var(--fs-texte); line-height: var(--lh-texte);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
main { display: block; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
svg { overflow: visible; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-titre); color: var(--color-heading); line-height: var(--lh-titre); letter-spacing: var(--ls-titre); text-wrap: balance; overflow-wrap: break-word; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
p { text-wrap: pretty; }
a { color: var(--color-link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--color-link-hover); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
button { font: inherit; }
::selection { background: var(--ed-ciel-100); color: var(--ed-marine); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
/* Mots à ne pas couper en fin de ligne (ex. « est-elle ») */
.nw { white-space: nowrap; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* champ piège des formulaires (robots) */
.skip { position: absolute; left: 16px; top: -80px; z-index: 200; background: #fff; color: var(--ed-marine); padding: 12px 18px; border-radius: var(--radius-pill); box-shadow: var(--shadow-l); font: 700 0.9375rem/1 var(--font-titre); }
.skip:focus { top: 14px; }
.todo-tag { display: inline-block; padding: 1px 9px; border-radius: var(--radius-pill); background: var(--ed-alerte-fond); color: var(--ed-alerte); border: 1px dashed #E9B97A; font: 700 0.6875rem/1.6 var(--font-titre); letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 2px; max-width: 100%; white-space: normal; }

/* ---------- 3. Typographie ---------- */
h1 { font-size: var(--fs-geant); font-weight: var(--fw-extrabold); letter-spacing: -0.025em; line-height: 1.02; }
h2 { font-size: clamp(2rem, 1.15rem + 2.4vw, 3.5rem); font-weight: var(--fw-bold); letter-spacing: -0.022em; line-height: 1.06; }
h3 { font-size: clamp(1.3125rem, 1.1rem + 0.7vw, 1.75rem); font-weight: var(--fw-bold); letter-spacing: -0.012em; line-height: 1.2; }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-bold); }
.surtitre { display: block; font: var(--fw-bold) var(--fs-surtitre)/1.3 var(--font-titre); letter-spacing: var(--ls-surtitre); text-transform: uppercase; color: var(--ed-bleu); }
.lead { font-size: clamp(1.1875rem, 1.02rem + 0.55vw, 1.5rem); line-height: 1.5; color: var(--ed-encre); }
.small { font-size: var(--fs-petit); }
.muted { color: var(--color-text-muted); }
.prose { max-width: var(--mesure); }
.prose > * + * { margin-top: var(--space-4); }
.prose strong { color: var(--ed-marine); }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); margin-top: var(--space-8); }
.prose h3 { font-size: clamp(1.1875rem, 1.05rem + 0.4vw, 1.375rem); margin-top: var(--space-6); }
.prose ul, .prose ol { padding-left: 1.25em; display: grid; gap: 6px; }

/* ---------- 4. Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 13px 26px; border-radius: var(--radius-pill); border: 1.5px solid transparent;
  font: 700 0.9375rem/1.2 var(--font-titre); letter-spacing: 0.01em; text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-cta { background: var(--color-cta); color: #fff; }
.btn-cta:hover { background: var(--color-cta-hover); color: #fff; box-shadow: 0 10px 24px rgb(64 125 36 / 0.28); }
.btn-dark { background: var(--ed-marine); color: #fff; }
.btn-dark:hover { background: var(--ed-nuit); color: #fff; }
.btn-light { background: #fff; color: var(--ed-marine); }
.btn-light:hover { background: var(--ed-ciel-100); color: var(--ed-marine); }
.btn-ghost { background: rgb(255 255 255 / 0.06); color: #fff; border-color: rgb(255 255 255 / 0.5); }
.btn-ghost:hover { background: rgb(255 255 255 / 0.14); border-color: #fff; color: #fff; }
.btn-soft { background: var(--ed-marine-100); color: var(--ed-marine); }
.btn-soft:hover { background: var(--ed-marine-200); color: var(--ed-marine); }
.btn-line { background: transparent; color: var(--ed-marine); border-color: var(--ed-marine); }
.btn-line:hover { background: var(--ed-marine); color: #fff; }
.btn-small { min-height: 42px; padding: 9px 18px; font-size: 0.875rem; }
.btn-link { background: none; border: 0; padding: 0; color: var(--color-link); font: 600 0.9375rem/1.4 var(--font-titre); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.btn-link:hover { color: var(--color-link-hover); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.lien-fleche { display: inline-flex; align-items: center; gap: 8px; font: 700 0.9375rem/1.3 var(--font-titre); color: var(--ed-marine); text-decoration: none; }
.lien-fleche::after { content: "→"; content: "→" / ""; font-family: var(--font-texte); transition: transform 220ms var(--ease); }
.lien-fleche:hover { color: var(--ed-bleu); }
.lien-fleche:hover::after { transform: translateX(4px); }

/* ---------- 5. En-tête ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgb(255 255 255 / 0.92); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.site-header::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--ed-degrade); }
.site-header.is-scrolled { border-bottom-color: var(--color-border); box-shadow: 0 6px 24px rgb(26 66 99 / 0.06); }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 48px); height: var(--header-h); }
.nav-logo { flex: none; display: block; }
.nav-logo img { height: 34px; width: auto; }
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2vw, 36px); margin: 0 0 0 auto; padding: 0; list-style: none; }
.nav-links a {
  position: relative; display: block; padding: 10px 0;
  font: 700 0.8125rem/1 var(--font-titre); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ed-marine); text-decoration: none; white-space: nowrap;
}
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px; background: var(--ed-degrade); transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ease); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links-cta { display: none; }
.nav-cta { flex: none; }
.nav-toggle {
  display: none; align-items: center; gap: 8px; padding: 10px 16px; min-height: 44px; cursor: pointer;
  background: transparent; border: 1.5px solid var(--color-border); border-radius: var(--radius-pill);
  color: var(--ed-marine); font: 700 0.8125rem/1 var(--font-titre); letter-spacing: 0.08em; text-transform: uppercase;
}
.nav-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.nav-toggle .x { display: none; }
.nav.is-open .nav-toggle .x { display: block; }
.nav.is-open .nav-toggle .b { display: none; }
@media (max-width: 1240px) {
  .js .nav-toggle { display: inline-flex; }
  .js .nav-cta { margin-left: auto; }
  .js .nav-links { display: none; }
  .js .nav.is-open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 70; overflow-y: auto;
    padding: clamp(16px, 4vw, 40px) var(--pad) 48px; background: #fff; border-top: 1px solid var(--color-border);
  }
  .js .nav.is-open .nav-links a {
    padding: 18px 0; border-bottom: 1px solid var(--color-border);
    font: 700 clamp(1.5rem, 1.1rem + 2vw, 2.25rem)/1.15 var(--font-titre); letter-spacing: -0.01em; text-transform: none;
  }
  .js .nav.is-open .nav-links a::after { display: none; }
  .js .nav.is-open .nav-links a[aria-current="page"] { color: var(--ed-bleu); }
  .js .nav.is-open .nav-links-cta { display: block; margin-top: 32px; }
  .js .nav.is-open .nav-links-cta a { display: inline-flex; padding: 14px 26px; border: 0; color: #fff; font: 700 1rem/1.2 var(--font-titre); }
  .js.menu-open { overflow: hidden; }
  /* Menu ouvert : sans flou d'arrière-plan, sinon l'en-tête devient le repère du panneau « fixed »
     (qui se réduit alors à la hauteur de l'en-tête) au lieu de l'écran */
  .js.menu-open .site-header { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Sans JavaScript : le menu passe sous le logo et défile horizontalement */
@media (max-width: 1240px) {
  html:not(.js) .nav { flex-wrap: wrap; height: auto; padding-block: 12px; row-gap: 4px; }
  html:not(.js) .nav-links { order: 3; width: 100%; margin: 0; overflow-x: auto; padding-bottom: 4px; }
}
@media (max-width: 640px) {
  :root { --header-h: 66px; }
  .nav-cta { display: none; }
  .js .nav-toggle { margin-left: auto; }
  .nav-logo img { height: 28px; }
}

/* ---------- Accueil : premier écran ---------- */
.hero-home { padding: clamp(24px, 3vw, 48px) 0 clamp(24px, 2.4vw, 36px); background: #fff; }
/* Titre à gauche, à l'aplomb du logo de l'en-tête ; logo à droite, jusqu'à la marge : même marge
   des deux côtés. Sur grand écran, titre et logo grandissent avec la largeur du bloc (unités cqi) :
   on garde la composition d'un écran de portable, sans grand vide au milieu ni à droite.
   Le premier écran laisse deviner la section suivante (« L'action en bref »). */
.hero-home > .wrap { container-type: inline-size; }
.hero-home-grid {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); grid-template-areas: "titre logo" "suite logo";
  column-gap: clamp(32px, 5vw, 110px); align-items: start; align-content: center;
  min-height: min(calc(100svh - var(--header-h) - 150px), 800px);
}
.hero-titre { grid-area: titre; }
.hero-suite { grid-area: suite; }
.display { font: 800 max(clamp(2.375rem, 0.7rem + 3.9vw, 5rem), 5cqi)/0.98 var(--font-titre); letter-spacing: -0.03em; text-transform: uppercase; color: var(--ed-marine); }
.display .accent { display: block; color: var(--ed-bleu); }
/* Le grand titre garde ses quatre lignes, même sur un très grand écran
   (« VOTRE RÉSILIENCE » tient sur une ligne, « RÉDUIRE VOS IMPACTS » passe sur deux) */
.hero-titre .display { max-width: 9.9em; }
.hero-titre .surtitre { margin-bottom: clamp(16px, 2vw, 26px); }
.hero-lead { margin-top: clamp(20px, 2.4vw, 32px); max-width: 52ch; font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem); line-height: 1.55; color: var(--ed-encre); }
.hero-suite .btns { margin-top: clamp(24px, 2.8vw, 40px); }
/* Logo calé en haut du bloc de texte (et non centré sur lui) : il s'aligne sur le grand titre */
.hero-logo { grid-area: logo; display: grid; place-items: center; margin-top: clamp(0px, 1.2vw, 20px); }
.hero-logo img { width: 100%; height: auto; }
/* Tablette : le logo, plus petit, reste à côté du grand titre ; le texte et les boutons passent dessous */
@media (max-width: 1024px) {
  .hero-home-grid { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "titre logo" "suite suite"; align-items: center; min-height: 0; }
  .hero-logo { margin-top: 0; justify-items: end; }
  .hero-logo img { max-width: 360px; }
}
/* Téléphone : logo au-dessus du titre */
@media (max-width: 640px) {
  .hero-home-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "titre" "suite"; }
  .hero-logo { margin-bottom: 28px; justify-items: center; }
  .hero-logo img { max-width: min(78vw, 460px); }
  .hero-suite .btns .btn { flex: 1 1 100%; }
}
/* Sous le premier écran, les sections de l'accueil (et le bandeau d'appel) restent centrées,
   moins larges que l'écran ; seul le premier écran se cale à gauche, comme l'en-tête. */
.page-index main > :not(.hero-home) .wrap, .page-index .appel-cadre { max-width: var(--wrap-accueil); }

/* ---------- 6. Héros des pages ---------- */
/* Bandeau bleu nuit pleine largeur, en aplat dégradé sans effet, fermé par un liseré aux
   couleurs du logo. Texte à gauche, quatre chiffres clés à droite (en dessous sur tablette
   et téléphone). La section « L'action en bref » de l'accueil reprend le même bandeau. */
.page-hero, .bref { background: linear-gradient(125deg, var(--ed-marine) 0%, #15385A 48%, var(--ed-nuit) 100%); color: #fff; }
.page-hero { position: relative; padding: clamp(40px, 5vw, 88px) 0; }
.page-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: var(--ed-degrade); }
.page-hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 120px); align-items: center; }
.page-hero-court .page-hero-in { grid-template-columns: minmax(0, 1fr); }
.page-hero h1 { margin-top: clamp(14px, 1.6vw, 22px); max-width: 20ch; }
.page-hero .lead { margin-top: clamp(18px, 2vw, 28px); max-width: 60ch; }
.page-hero-court h1 { font-size: clamp(2.125rem, 1.2rem + 2.6vw, 3.75rem); }
:is(.page-hero, .bref) :is(h1, h2) { color: #fff; }
:is(.page-hero, .bref) .surtitre { color: var(--ed-ciel-texte); }
:is(.page-hero, .bref) .lead { color: var(--ed-ciel-100); }
:is(.page-hero, .bref) :focus-visible { outline-color: var(--ed-ciel-texte); }
@media (max-width: 1024px) { .page-hero-in { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 44px); } }
.fil { margin-bottom: clamp(20px, 2.6vw, 36px); }
/* Fil d'Ariane en bleu clair : il ressort sur le bandeau bleu nuit */
.fil ol { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 0; list-style: none; font: 600 0.8125rem/1.4 var(--font-titre); color: var(--ed-ciel-clair); }
.fil li + li::before { content: "/"; content: "/" / ""; margin-right: 10px; color: var(--ed-ciel-clair); opacity: 0.6; }
.fil a { color: var(--ed-ciel-clair); text-decoration: none; }
.fil a:hover { color: #fff; text-decoration: underline; }
/* Chiffres clés : pictogramme, nombre, libellé ; sans cadre, séparés par de fins filets
   (2 × 2 à côté du texte, une rangée de 4 sur tablette, 2 × 2 sur téléphone) */
.hero-chiffres { --filet: rgb(255 255 255 / 0.18); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.hero-chiffres li { padding: clamp(18px, 2.2vw, 34px); }
.hero-chiffres li:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--filet); }
.hero-chiffres li:nth-child(even) { padding-right: 0; }
.hero-chiffres li:nth-child(-n+2) { padding-top: 0; border-bottom: 1px solid var(--filet); }
.hero-chiffres li:nth-child(n+3) { padding-bottom: 0; }
.hero-chiffres li, .hero-chiffres a { display: grid; align-content: start; justify-items: start; gap: 12px; }
.hero-chiffres a { color: inherit; text-decoration: none; }
.hero-chiffres a:hover .hc-lib { text-decoration: underline; text-underline-offset: 3px; }
.hero-chiffres b { display: block; font: 800 clamp(2.75rem, 1.5rem + 3vw, 4.75rem)/0.9 var(--font-titre); letter-spacing: -0.04em; color: #fff; }
.hc-lib { display: block; max-width: 24ch; font-size: var(--fs-petit); line-height: 1.45; color: var(--ed-gris); }
.hc-ico { display: block; flex: none; color: var(--ed-bleu); }
.hc-ico svg { display: block; width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:is(.page-hero, .bref) .hc-lib { color: var(--ed-ciel-100); }
:is(.page-hero, .bref) .hc-ico { color: var(--ed-ciel); }
.bref .chiffres { --filet: rgb(255 255 255 / 0.18); }
.bref .chiffres b { color: #fff; }
@media (max-width: 1024px) {
  .hero-chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero-chiffres li:nth-child(n) { padding: 0 clamp(14px, 2vw, 24px); border: 0; }
  .hero-chiffres li:first-child { padding-left: 0; }
  .hero-chiffres li:last-child { padding-right: 0; }
  .hero-chiffres li:nth-child(n+2) { border-left: 1px solid var(--filet); }
}
@media (max-width: 640px) {
  .hero-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-chiffres li:nth-child(n) { padding: 18px 16px; border: 0; }
  .hero-chiffres li:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--filet); }
  .hero-chiffres li:nth-child(even) { padding-right: 0; }
  .hero-chiffres li:nth-child(-n+2) { padding-top: 0; border-bottom: 1px solid var(--filet); }
  .hero-chiffres li:nth-child(n+3) { padding-bottom: 0; }
  .hero-chiffres b { font-size: 2.75rem; }
  .hc-ico svg { width: 28px; height: 28px; }
}

/* ---------- 7. Sous-navigation de page ---------- */
.subnav { position: sticky; top: var(--header-h); z-index: 50; background: rgb(255 255 255 / 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--color-border); }
.subnav .wrap { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); min-height: 60px; }
.subnav-label { flex: none; font: 700 0.75rem/1 var(--font-titre); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ed-gris); }
.subnav ul { display: flex; gap: 6px; margin: 0; padding: 8px 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: block; white-space: nowrap; padding: 9px 16px; border-radius: var(--radius-pill); font: 700 0.875rem/1.1 var(--font-titre); color: var(--ed-marine); text-decoration: none; transition: background-color 220ms var(--ease), color 220ms var(--ease); }
.subnav a:hover { background: var(--ed-marine-100); color: var(--ed-marine); }
.subnav a[aria-current="true"] { background: var(--ed-marine); color: #fff; }
@media (max-width: 640px) { .subnav-label { display: none; } .subnav .wrap { padding-inline: 0; } .subnav ul { padding-inline: var(--pad); } }

/* Sur ordinateur, le sommaire quitte le bandeau du haut et devient une colonne à gauche :
   toujours visible, il suit la lecture (rubrique en cours et trait de progression).
   La page devient une grille « sommaire | contenu », calée sur la même largeur que l'en-tête :
   le sommaire commence à l'aplomb du logo et du titre de la page. */
@media (min-width: 1200px) {
  html { scroll-padding-top: calc(var(--header-h) + 32px); }
  .page-corps {
    display: grid; align-items: start; column-gap: var(--sommaire-ecart);
    grid-template-columns: var(--sommaire) minmax(0, 1fr);
    max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad);
  }
  .page-corps > .page-contenu { grid-column: 2; grid-row: 1; min-width: 0; }
  .page-contenu .wrap { max-width: none; padding-inline: 0; }
  /* Fonds de section prolongés jusqu'aux bords de l'écran, sous le sommaire */
  .page-contenu .section.alt { border-image: linear-gradient(#EDF2F7 0 0) fill 0 / / 0 100vmax; }
  .page-corps > .subnav {
    grid-column: 1; grid-row: 1; width: auto; margin: var(--section) 0 0;
    position: sticky; top: calc(var(--header-h) + 32px); z-index: 2;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0;
  }
  .page-corps > .subnav .wrap { display: block; max-width: none; min-height: 0; padding: 0; }
  .page-corps > .subnav .subnav-label { display: block; margin-bottom: clamp(20px, 3vh, 32px); }
  /* Rubriques espacées en fonction de la hauteur de l'écran ; même espacement sur toutes les pages
     (≈ 72 px par rubrique à 1440 × 900 : aéré, sans se confondre avec le texte de la page) */
  .page-corps > .subnav ul { --espace: clamp(16px, 2.9vh, 34px); position: relative; display: grid; gap: clamp(4px, 0.8vh, 10px); padding: 0; overflow: visible; border-left: 2px solid var(--color-border); counter-reset: sommaire; }
  .page-corps > .subnav ul::before { content: ""; position: absolute; left: -2px; top: 0; width: 2px; height: var(--lecture, 0%); background: linear-gradient(180deg, var(--ed-ciel), var(--ed-vert)); }
  .page-corps > .subnav li { counter-increment: sommaire; }
  .page-corps > .subnav a {
    position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: baseline;
    margin-left: -2px; padding: var(--espace) 0 var(--espace) 16px; border-left: 2px solid transparent; border-radius: 0;
    white-space: normal; background: none; color: var(--ed-gris); font: 600 0.9375rem/1.35 var(--font-titre);
  }
  .page-corps > .subnav a::before { content: counter(sommaire, decimal-leading-zero); content: counter(sommaire, decimal-leading-zero) / ""; font: 700 0.75rem/1 var(--font-titre); letter-spacing: 0.04em; color: var(--ed-gris); }
  .page-corps > .subnav a:hover { background: none; color: var(--ed-marine); }
  .page-corps > .subnav a[aria-current="true"] { background: none; color: var(--ed-marine); border-left-color: var(--ed-marine); }
  .page-corps > .subnav a[aria-current="true"]::before { color: var(--ed-bleu); }
}

/* ---------- 8. Sections et composants ---------- */
.section { padding-block: var(--section); }
.section.serre { padding-block: clamp(40px, 5vw, 80px); }
.section:not(.alt) + .section:not(.alt) { padding-top: 0; }
.section.alt { background: #EDF2F7; }
.section.alt + .section.alt { padding-top: 0; }

.sec-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 96px); align-items: end; margin-bottom: clamp(36px, 4.5vw, 72px); }
.sec-head h2 { margin-top: 14px; }
.sec-head .lead { max-width: 64ch; padding-bottom: 6px; }
.sec-head.seul { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
@media (max-width: 900px) { .sec-head { grid-template-columns: minmax(0, 1fr); align-items: start; } }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 112px); align-items: start; }
.split.large-droite { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.split.centre { align-items: center; }
.sticky-col { position: sticky; top: calc(var(--header-h) + 88px); }
@media (max-width: 1024px) { .split, .split.large-droite { grid-template-columns: minmax(0, 1fr); } .sticky-col { position: static; } }

.ancres { position: relative; }
.ancres span { position: absolute; top: calc(-1 * (var(--header-h) + 80px)); }

/* Chiffres clés */
.chiffres { --filet: var(--color-border); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--filet); }
.chiffres li { display: grid; align-content: start; justify-items: start; gap: 14px; padding: clamp(24px, 2.6vw, 40px) clamp(12px, 2vw, 32px) 0 0; }
.chiffres li + li { padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid var(--filet); }
.chiffres b { display: block; font: 800 clamp(3rem, 1.6rem + 4.6vw, 7rem)/0.9 var(--font-titre); letter-spacing: -0.045em; color: var(--ed-marine); }
.chiffres .hc-lib { max-width: 26ch; }
.chiffres .unite { font-size: 0.45em; letter-spacing: 0; }  /* « % » à côté d'un grand chiffre */
.chiffres a { display: grid; align-content: start; justify-items: start; gap: 14px; color: inherit; text-decoration: none; }
.chiffres a:hover .lien-fleche { text-decoration: underline; text-underline-offset: 3px; }
.bref .chiffres .lien-fleche { color: var(--ed-ciel-texte); }
@media (max-width: 860px) {
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres li:nth-child(3) { padding-left: 0; border-left: 0; }
  .chiffres li:nth-child(n+3) { border-top: 1px solid var(--filet); margin-top: 20px; }
}

/* Objectifs (page L'action) : cinq pictogrammes numérotés, reliés par un trait aux couleurs du
   logo (du marine au vert), et sous chacun ce qu'il apporte concrètement. En ligne quand le bloc
   est assez large, en colonne sinon (requête sur la largeur du bloc). */
.objectifs { container: objectifs / inline-size; }
.obj-liste { --rond: clamp(64px, 6.6vw, 124px); --ecart: clamp(18px, 2.2vw, 40px); display: grid; gap: var(--ecart); margin: 0; padding: 0; list-style: none; counter-reset: obj; }
.obj {
  --c: var(--ed-marine); --c2: var(--ed-bleu); --t: var(--ed-marine-100); --ct: var(--ed-marine);
  position: relative; display: grid; grid-template-columns: var(--rond) minmax(0, 1fr); column-gap: clamp(18px, 2vw, 32px); counter-increment: obj;
}
.obj:nth-child(2) { --c: var(--ed-bleu); --c2: var(--ed-ciel); --t: var(--ed-ciel-100); --ct: var(--ed-bleu); }
.obj:nth-child(3) { --c: var(--ed-ciel); --c2: var(--ed-vert); --t: var(--ed-ciel-100); --ct: var(--ed-bleu); }
.obj:nth-child(4) { --c: var(--ed-vert); --c2: var(--ed-vert-fonce); --t: var(--ed-vert-100); --ct: var(--ed-vert-fonce); }
.obj:nth-child(5) { --c: var(--ed-vert-fonce); --t: var(--ed-vert-100); --ct: var(--ed-vert-fonce); }
/* Trait jusqu'à l'objectif suivant (vertical en colonne, horizontal en ligne) */
.obj:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--rond) / 2 - 1.5px); top: calc(var(--rond) / 2); bottom: calc(-1 * var(--ecart)); width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--c), var(--c2)); }
.obj-ico { position: relative; z-index: 1; display: grid; place-items: center; width: var(--rond); height: var(--rond); border-radius: 50%; background: var(--t); box-shadow: 0 0 0 6px var(--color-bg); color: var(--c); }
.obj-ico svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.obj-ico .f { fill: #fff; }
.obj-ico .p { fill: currentColor; stroke: var(--t); stroke-width: 3; }
.obj-ico .b { stroke: #fff; }
.obj-ico::after { content: counter(obj, decimal-leading-zero); content: counter(obj, decimal-leading-zero) / ""; position: absolute; top: -3px; right: -7px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ct); box-shadow: 0 0 0 3px var(--color-bg); color: #fff; font: 700 0.75rem/1 var(--font-titre); letter-spacing: 0.02em; }
.obj-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding-top: clamp(10px, 1.4vw, 20px); }
.obj h3 { font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.25rem); letter-spacing: -0.022em; line-height: 1.05; }
.obj p { color: var(--ed-encre); }
.obj p strong { color: var(--ed-marine); }
.obj-concret { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; padding: 7px 14px 7px 11px; border-radius: var(--radius-pill); background: var(--t); font: 700 0.875rem/1.3 var(--font-titre); }
.obj .obj-concret { color: var(--ed-marine); }
.obj-concret svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--ct); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Colonne large : le verbe à gauche, l'explication et l'apport concret à droite */
@container objectifs (min-width: 700px) and (max-width: 1289px) {
  .obj-texte { display: grid; grid-template-columns: minmax(0, 0.38fr) minmax(0, 1fr); grid-template-areas: "verbe texte" "verbe concret"; column-gap: clamp(20px, 3vw, 48px); row-gap: 12px; align-items: start; }
  .obj-texte h3 { grid-area: verbe; }
  .obj-texte > p:not(.obj-concret) { grid-area: texte; }
  .obj-texte .obj-concret { grid-area: concret; justify-self: start; }
}
/* En ligne : cinq colonnes, l'apport concret aligné en bas */
@container objectifs (min-width: 1290px) {
  .obj-liste { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .obj { --trait-depart: scale(0, 1); --trait-origine: left center; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; row-gap: clamp(20px, 1.8vw, 30px); }
  .obj:not(:last-child)::after { left: calc(var(--rond) / 2); right: calc(-1 * var(--ecart)); top: calc(var(--rond) / 2 - 1.5px); bottom: auto; width: auto; height: 3px; background: linear-gradient(90deg, var(--c), var(--c2)); }
  .obj-texte { padding-top: 0; }
  .obj-concret { margin-top: auto; }
}

/* Cartes */
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
.cartes.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cartes.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cartes > li { display: flex; }
.cartes > li > .carte, .cartes > .carte { flex: 1; }
@media (max-width: 1024px) { .cartes.c3, .cartes.c2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1024px) and (min-width: 701px) {
  .cartes.c3 .carte, .cartes.c2 .carte { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 22px; row-gap: 6px; align-items: center; }
  .cartes.c3 .carte > .ico-rond, .cartes.c2 .carte > .ico-rond { grid-row: 1 / span 3; align-self: start; }
  .cartes.c3 .carte > :not(.ico-rond):not(.lien-fleche), .cartes.c2 .carte > :not(.ico-rond):not(.lien-fleche) { grid-column: 2; }
  .cartes.c3 .carte > .lien-fleche, .cartes.c2 .carte > .lien-fleche { grid-column: 3; grid-row: 1 / span 3; padding-top: 0; }
}
@media (max-width: 700px) { .cartes.c2 { grid-template-columns: minmax(0, 1fr); } }
.carte { position: relative; display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-l); padding: clamp(22px, 2.2vw, 34px); transition: transform 300ms var(--ease), box-shadow 300ms var(--ease), border-color 300ms var(--ease); }
.carte h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); }
.carte p { color: var(--ed-encre); }
.carte .lien-fleche { margin-top: auto; padding-top: 8px; }
a.carte { color: inherit; text-decoration: none; }
a.carte:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); border-color: transparent; }
.ico-rond { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ed-ciel-50); flex: none; }
.ico-rond svg { width: 28px; height: 28px; fill: none; stroke: var(--ed-bleu); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Puces : crises, secteurs */
.puces { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.puces li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--color-border); font: 600 0.9375rem/1.2 var(--font-titre); color: var(--ed-marine); }
.puces svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--ed-bleu); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.puces.simples li { padding: 9px 16px; }

/* Encadrés */
.encadre { border-radius: var(--radius-xl); padding: clamp(24px, 3vw, 48px); background: var(--ed-surface); }
.encadre.blanc { background: #fff; border: 1px solid var(--color-border); }
.encadre.sombre { background: var(--ed-marine); color: #fff; }
.encadre.sombre h2, .encadre.sombre h3, .encadre.sombre h4 { color: #fff; }
.encadre.sombre p, .encadre.sombre li { color: var(--ed-ciel-100); }
.encadre.sombre .surtitre { color: var(--ed-ciel-texte); }
.encadre.sombre .lien-fleche { color: #fff; }
.encadre.sombre .lien-fleche:hover { color: var(--ed-ciel-texte); }
.encadre.sombre a:not([class]) { color: #fff; }
.encadre.sombre a:not([class]):hover { color: var(--ed-ciel-texte); }
.encadre .surtitre { margin-bottom: 14px; }
.encadre-tete { display: flex; gap: 14px; align-items: center; margin-bottom: clamp(18px, 2vw, 26px); }
.encadre-tete h3 { font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem); }
.encadre-tete .ico-rond { width: 48px; height: 48px; }
.encadre.sombre .ico-rond { background: rgb(255 255 255 / 0.1); }
.encadre.sombre .ico-rond svg { stroke: var(--ed-ciel-texte); }
/* Listes à puces rondes */
.liste-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.liste-points li { position: relative; padding-left: 26px; }
.liste-points li::before { content: ""; position: absolute; left: 3px; top: 0.6em; width: 9px; height: 9px; border-radius: 50%; background: var(--ed-bleu); }
.encadre.sombre .liste-points li::before { background: var(--ed-ciel); }
/* ---------- Calendrier : sous la frise, ses deux bouts ----------
   À gauche, avant le mois 1 : le recrutement ; à droite, après les 12 mois : la suite de l'accompagnement. */
.cal-bouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(14px, 1.6vw, 24px); }
.cal-bout { display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 2.6vw, 40px); border-radius: var(--radius-xl); border: 1px solid var(--color-border); background: #fff; }
.cal-bout h3 { font-size: clamp(1.375rem, 1.15rem + 0.7vw, 1.875rem); }
.cal-bout.apres { background: var(--ed-vert-50); border-color: var(--ed-vert-100); }
.cal-bout.apres .surtitre { color: var(--ed-vert-fonce); }
.cal-etapes, .cal-suite { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.cal-suite { gap: 22px; }
.cal-etapes li { display: grid; grid-template-columns: minmax(0, 11.5em) minmax(0, 1fr); gap: 4px 18px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.cal-etapes li:first-child { padding-top: 0; border-top: 0; }
.cal-date { font: 700 0.8125rem/1.45 var(--font-titre); color: var(--ed-bleu); }
.cal-etapes b, .cal-suite b { display: block; margin-bottom: 2px; font: 700 1rem/1.3 var(--font-titre); color: var(--ed-marine); }
.cal-etapes li > span:last-child, .cal-suite li > span:last-child { font-size: 0.9375rem; color: var(--ed-encre); }
.cal-suite li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.cal-suite .ico-rond { width: 44px; height: 44px; background: #fff; }
.cal-suite .ico-rond svg { width: 22px; height: 22px; stroke: var(--ed-vert-fonce); }
.cal-note { font-size: var(--fs-petit); color: var(--ed-gris); }
/* FAQ : le lien vers la page qui en parle, sous chaque réponse */
.faq .faq-lien { margin-top: 12px; }
.cal-lien { margin-top: auto; }
@media (max-width: 900px) { .cal-bouts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .cal-etapes li { grid-template-columns: minmax(0, 1fr); } }

/* Mention « données confidentielles et sécurisées », avec un cadenas */
.mention-confiance { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--ed-vert-50); border: 1px solid var(--ed-vert-100); font-size: var(--fs-petit); line-height: 1.45; }
.mention-confiance, .carte .mention-confiance, .faq .mention-confiance { color: var(--ed-vert-fonce); }
.mention-confiance svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mention-confiance a { color: inherit; font-weight: 700; }
.carte .mention-confiance { margin-top: auto; }
.coches { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
/* Liste à cocher sur 2 colonnes (Éligibilité : ce que l'on attend de vous) */
.coches.deux-col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; }
@media (max-width: 700px) { .coches.deux-col { grid-template-columns: minmax(0, 1fr); } }
.coches li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.coches li::before { content: ""; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--ed-vert-fonce) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.coches b { color: var(--ed-marine); }
.alert { border-left: 4px solid var(--c); background: var(--bg); border-radius: 0 var(--radius-m) var(--radius-m) 0; padding: 14px 18px; font-size: var(--fs-petit); color: var(--ed-encre); }
.alert strong { display: block; margin-bottom: 2px; color: var(--c); font: 700 0.9375rem/1.3 var(--font-titre); }
.alert.info { --c: var(--ed-info); --bg: var(--ed-info-fond); }
.alert.succes { --c: var(--ed-succes); --bg: var(--ed-succes-fond); }
.alert.alerte { --c: var(--ed-alerte); --bg: var(--ed-alerte-fond); }
.alert.erreur { --c: var(--ed-erreur); --bg: var(--ed-erreur-fond); }

/* Convictions (piliers) */
.piliers { margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.pilier { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; padding: clamp(18px, 2vw, 26px); border-radius: var(--radius-l); background: #fff; border: 1px solid var(--color-border); }
.pilier h3 { font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem); }
.pilier p { margin-top: 6px; font-size: var(--fs-petit); color: var(--ed-encre); }

/* Pourquoi « 5.0 » : le 5.0 du logo */
.cinq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 120px); align-items: center; }
.cinq-logo { width: 100%; max-width: 460px; height: auto; justify-self: center; }
.cinq h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); }
.cinq p:not(.surtitre) { margin-top: 16px; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); max-width: 60ch; color: var(--ed-encre); }
@media (max-width: 760px) { .cinq { grid-template-columns: minmax(0, 1fr); } .cinq-logo { max-width: 260px; justify-self: start; } }

/* Accueil : les trois briques */
.briques3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
.brique-carte {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  min-height: clamp(360px, 34vw, 560px); padding: clamp(24px, 2.6vw, 40px); border-radius: var(--radius-xl);
  color: #fff; text-decoration: none; overflow: hidden; isolation: isolate;
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
}
.brique-carte::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fond); transition: transform 700ms var(--ease); }
.brique-carte:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgb(13 34 51 / 0.28); color: #fff; }
.brique-carte:hover::before { transform: scale(1.06); }
/* Dégradés réglés pour que le texte blanc garde un contraste suffisant (RGAA 3.2) à toutes les largeurs */
.brique-carte.b1 { --fond: linear-gradient(160deg, #2A6E9C 0%, var(--ed-marine) 55%, var(--ed-nuit) 100%); }
.brique-carte.b2 { --fond: linear-gradient(160deg, #3DB0DA 0%, var(--ed-bleu) 34%, #144C68 100%); }
.brique-carte.b3 { --fond: linear-gradient(160deg, #6FB352 0%, var(--ed-vert-fonce) 34%, #2A5617 100%); }
.brique-carte .num { font: 800 clamp(4.5rem, 3rem + 5vw, 9rem)/0.8 var(--font-titre); letter-spacing: -0.06em; color: #fff; }
.brique-carte .quand { display: inline-block; align-self: flex-start; padding: 6px 12px; border-radius: var(--radius-pill); background: rgb(0 0 0 / 0.34); font: 700 0.75rem/1.2 var(--font-titre); letter-spacing: 0.08em; text-transform: uppercase; }
.brique-carte h3 { color: #fff; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 3rem); letter-spacing: -0.025em; }
.brique-carte p { margin-top: 10px; color: #fff; max-width: 34ch; }
.brique-carte .fleche { position: absolute; right: clamp(20px, 2.4vw, 36px); top: clamp(20px, 2.4vw, 36px); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgb(255 255 255 / 0.16); transition: background-color 300ms var(--ease), transform 300ms var(--ease); }
.brique-carte .fleche svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.brique-carte:hover .fleche { background: #fff; transform: rotate(-45deg); }
.brique-carte:hover .fleche svg { stroke: var(--ed-marine); }
@media (max-width: 1024px) { .briques3 { grid-template-columns: minmax(0, 1fr); } .brique-carte { min-height: 300px; } }

/* Accueil : le crash test en avant */
.vitrine { position: relative; border-radius: var(--radius-xl); padding: clamp(28px, 4vw, 72px); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 80px); align-items: center; background: linear-gradient(140deg, var(--ed-marine) 0%, var(--ed-nuit) 100%); color: #fff; }
.vitrine h2 { color: #fff; }
.vitrine .surtitre { color: var(--ed-ciel-texte); }
.vitrine .lead { margin-top: 18px; color: var(--ed-ciel-100); }
.vitrine .btns { margin-top: 28px; }
.vitrine > .crash-mini { width: 100%; height: auto; }
/* Sans le schéma du crash test (outils de la méthode retirés du site public) : les scénarios de crise */
.vitrine-chocs { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.vitrine-chocs li { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-radius: var(--radius-l); background: rgb(255 255 255 / 0.07); border: 1px solid rgb(255 255 255 / 0.14); color: #fff; font: 600 1.0625rem/1.3 var(--font-titre); }
.vitrine-chocs svg { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--ed-ciel-texte); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1024px) { .vitrine { grid-template-columns: minmax(0, 1fr); } }

/* Livrables */
.liste-livrables { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
.livrable { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.2vw, 34px); border-radius: var(--radius-l); background: #fff; border: 1px solid var(--color-border); transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.livrable:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); }
.livrable h3 { font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.4375rem); }
.livrable p { color: var(--ed-encre); font-size: var(--fs-petit); }
@media (max-width: 1024px) { .liste-livrables { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .liste-livrables { grid-template-columns: minmax(0, 1fr); } }

/* Dates clés */
.dates { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--color-border); }
.dates li { display: grid; grid-template-columns: minmax(170px, 0.9fr) minmax(0, 1.1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--color-border); align-items: baseline; }
.dates .nw { white-space: nowrap; }
.dates b { font: 700 1rem/1.3 var(--font-titre); color: var(--ed-bleu); }
.dates li > span { font-size: var(--fs-texte); color: var(--ed-encre); }
.encadre.sombre .dates, .encadre.sombre .dates li { border-color: rgb(255 255 255 / 0.18); }
.encadre.sombre .dates b { color: var(--ed-ciel-texte); }
.encadre.sombre .dates li > span { color: #fff; }
@media (max-width: 560px) { .dates li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* ---------- Financement du parcours (pages Parcours et Éligibilité) ---------- */
/* Comme dans les présentations : une barre par taille d'entreprise, de la même longueur (les 15 000 €),
   la part de l'ADEME en vert, le reste à charge en bleu marine, rappelé en gros à droite */
.fin-lignes { display: grid; gap: clamp(18px, 2.4vw, 28px); }
.fin-ligne { display: grid; grid-template-columns: minmax(130px, 0.75fr) minmax(0, 2.3fr) minmax(170px, 1fr); gap: clamp(14px, 2.2vw, 32px); align-items: center; }
.fin-cat, .fin-montant { margin: 0; }
.fin-cat b { display: block; font: 800 var(--fs-h3)/1.15 var(--font-titre); color: var(--ed-marine); }
.fin-cat span { display: block; margin-top: 4px; font-size: var(--fs-petit); color: var(--ed-gris); }
.fin-barre { display: flex; height: clamp(48px, 4.6vw, 62px); border-radius: var(--radius-s); overflow: hidden; background: var(--ed-marine);
  font: 700 var(--fs-petit)/1.2 var(--font-titre); color: #fff; }
.fin-ademe { display: flex; align-items: center; justify-content: center; padding: 0 10px; background: var(--ed-vert-fonce); text-align: center; }
.fin-reste { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 0 6px; white-space: nowrap; }
.fin-montant b { display: block; font: 800 clamp(2rem, 1.3rem + 2vw, 3.25rem)/1 var(--font-titre); letter-spacing: -0.03em; white-space: nowrap; color: var(--ed-marine); }
.fin-montant span { display: block; margin-top: 6px; font-size: var(--fs-petit); color: var(--ed-encre); }
.fin-pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 32px; margin-top: 26px; }
.fin-legende { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; font-size: var(--fs-petit); color: var(--ed-gris); }
.fin-legende span { display: inline-flex; align-items: center; gap: 8px; }
.fin-legende span::before { content: ""; width: 16px; height: 10px; border-radius: 3px; background: var(--ed-vert-fonce); }
.fin-legende span + span::before { background: var(--ed-marine); }
.fin-note { margin: 0; font-size: var(--fs-petit); color: var(--ed-gris); }
/* Écrans moyens et téléphones : la taille et le montant sur une ligne, la barre dessous, puis le détail */
@media (max-width: 1100px) {
  .fin-ligne { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cat montant" "barre barre" "detail detail"; row-gap: 10px; }
  .fin-cat { grid-area: cat; }
  .fin-barre { grid-area: barre; }
  .fin-montant { display: contents; }
  .fin-montant b { grid-area: montant; align-self: center; }
  .fin-montant span { grid-area: detail; margin-top: 0; }
}
@media (max-width: 520px) { .fin-reste { font-size: 0; } }  /* trop étroit : le montant est rappelé au-dessus */

/* ---------- 9. Bandeau des logos qui défile ---------- */
/* Défilement continu, y compris au survol de la souris. Il s'arrête quand un logo reçoit
   le focus au clavier, quand le système demande moins d'animations, ou avec le bouton
   « Mettre en pause les animations » du pied de page (critère RGAA 13.8).
   La durée est recalculée par site.js pour garder la même vitesse (≈ 25 px/s) à toutes les largeurs. */
.defile { padding-block: clamp(22px, 2.6vw, 40px); background: #fff; border-block: 1px solid var(--color-border); }
.defile-tete { margin-bottom: clamp(14px, 1.6vw, 22px); }
.defile-titre { font: 700 var(--fs-surtitre)/1.3 var(--font-titre); letter-spacing: var(--ls-surtitre); text-transform: uppercase; color: var(--ed-gris); }
.defile-piste { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.defile-liste { flex: none; display: flex; align-items: center; justify-content: space-around; gap: clamp(48px, 6vw, 120px); min-width: 100%; margin: 0; padding: 0 clamp(24px, 3vw, 60px); list-style: none; animation: defile 60s linear infinite; }
.defile:focus-within .defile-liste, .anim-pause .defile-liste { animation-play-state: paused; }
.defile-liste li { flex: none; }
.defile-liste a { display: grid; place-items: center; height: 84px; padding: 4px; border-radius: 10px; transition: transform 300ms var(--ease); }
.defile-liste a:hover { transform: scale(1.05); }
.defile-liste img { width: auto; height: var(--h, 44px); max-width: none; }
@keyframes defile { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .defile-liste { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 12px; }
  .defile-liste[aria-hidden="true"] { display: none !important; }
  .defile-piste { -webkit-mask-image: none; mask-image: none; }
}
/* Tailles optiques des logos (même présence visuelle) */
.logo-im { --h: 36px; }
.logo-rcr { --h: 54px; }
.logo-ens { --h: 58px; }
.logo-compositic { --h: 50px; }
.logo-bija { --h: 84px; }
@media (max-width: 640px) {
  .defile-liste a { height: 64px; }
  .defile-liste img { height: calc(var(--h, 44px) * 0.78); }
}

/* ---------- 10. Consortium ---------- */
.partenaires { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(14px, 1.6vw, 24px); }
.partenaire { display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.6fr); gap: 0; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--color-border); background: #fff; scroll-margin-top: calc(var(--header-h) + 80px); }
.partenaire .p-logo { display: grid; place-items: center; padding: clamp(28px, 3vw, 48px); background: #fff; border-right: 1px solid var(--color-border); min-height: 220px; }
.partenaire .p-logo img { width: auto; max-width: 100%; height: calc(var(--h, 44px) * 1.55); object-fit: contain; }
.partenaire .p-corps { padding: clamp(24px, 3vw, 48px); display: grid; gap: 14px; align-content: start; background: var(--ed-surface); }
.partenaire .p-role { font: 700 0.75rem/1.3 var(--font-titre); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ed-bleu); }
.partenaire .h-partenaire { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.5rem); letter-spacing: -0.022em; }
.partenaire .p-faits { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.partenaire .p-faits li { padding: 7px 14px; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--color-border); font: 600 0.875rem/1.2 var(--font-titre); color: var(--ed-marine); }
.partenaire .p-faits li.fort { background: var(--ed-marine); border-color: var(--ed-marine); color: #fff; }
.partenaire.porteur { border-color: var(--ed-marine); box-shadow: 0 0 0 1px var(--ed-marine); }
.partenaire .p-lien { font-size: var(--fs-petit); }
@media (max-width: 860px) {
  .partenaire { grid-template-columns: minmax(0, 1fr); }
  .partenaire .p-logo { min-height: 150px; border-right: 0; border-bottom: 1px solid var(--color-border); }
}

/* Qui intervient quand (matrice) */
.matrice-wrap { overflow-x: auto; border-radius: var(--radius-l); border: 1px solid var(--color-border); background: #fff; }
.matrice { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--fs-petit); }
.matrice th, .matrice td { padding: 16px 18px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.matrice thead th { font: 700 0.8125rem/1.3 var(--font-titre); letter-spacing: 0.04em; color: var(--ed-marine); background: var(--ed-surface); }
.matrice thead th .sch-num { width: 28px; height: 28px; font-size: 0.875rem; margin-right: 8px; vertical-align: middle; display: inline-grid; clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px); }
.matrice tbody th { font: 700 0.9375rem/1.3 var(--font-titre); color: var(--ed-marine); width: 22%; }
.matrice td { color: var(--ed-encre); }
.matrice td.vide { color: var(--ed-gris-champ); }
.matrice tr:last-child th, .matrice tr:last-child td { border-bottom: 0; }
/* Sur téléphone, le tableau devient une fiche par partenaire */
@media (max-width: 700px) {
  .matrice-wrap { overflow: visible; border: 0; background: transparent; }
  .matrice, .matrice tbody, .matrice tr, .matrice th, .matrice td { display: block; min-width: 0; width: auto; }
  .matrice thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .matrice tr { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-l); padding: 6px 18px 10px; }
  .matrice tr + tr { margin-top: 12px; }
  .matrice tbody th { width: auto; padding: 12px 0 8px; font-size: 1.0625rem; border-bottom: 1px solid var(--color-border); }
  .matrice td { display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--color-border); }
  .matrice tr td:last-child { border-bottom: 0; }
  .matrice td::before { content: attr(data-label); font: 700 0.75rem/1.4 var(--font-titre); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ed-bleu); }
  .matrice td.vide { display: none; }
}

/* ---------- 11. Formulaires ---------- */
.elig { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
@media (max-width: 1024px) { .elig { grid-template-columns: minmax(0, 1fr); } }
.elig form { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: clamp(22px, 3vw, 48px); }
.q { border: 0; margin: 0; padding: 0; min-width: 0; }
.q + .q { margin-top: clamp(22px, 2.4vw, 32px); padding-top: clamp(22px, 2.4vw, 32px); border-top: 1px solid var(--color-border); }
.q legend { float: left; width: 100%; padding: 0; margin-bottom: 14px; font: 700 clamp(1.0625rem, 1rem + 0.3vw, 1.25rem)/1.35 var(--font-titre); color: var(--ed-marine); }
.q legend .q-num { display: inline-block; min-width: 2.2em; color: var(--ed-bleu); }
.q legend span.aide { display: block; font: 400 0.9375rem/1.4 var(--font-texte); color: var(--color-text-muted); margin-top: 4px; }
.q .choices, .q .q-champs { clear: both; }
.q legend .q-num svg { width: 1.05em; height: 1.05em; vertical-align: -0.15em; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: 48px; padding: 11px 22px; border: 1.5px solid var(--color-border-input); border-radius: var(--radius-pill); background: #fff; font: 600 0.9375rem/1.2 var(--font-titre); color: var(--ed-marine); transition: background-color 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease); }
.choice input:hover + span { border-color: var(--ed-marine); }
.choice input:checked + span { background: var(--ed-marine); border-color: var(--ed-marine); color: #fff; }
.choice input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.elig-side { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 16px; }
.result { border-radius: var(--radius-xl); padding: clamp(22px, 2.6vw, 36px); background: #fff; border: 1px solid var(--color-border); }
.result .state { display: inline-flex; align-items: center; gap: 8px; font: 700 0.75rem/1.3 var(--font-titre); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ed-gris); }
.result .state::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.result h3 { margin-top: 10px; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); }
.result p { margin-top: 12px; }
.result ul { margin-top: 12px; padding-left: 1.1em; display: grid; gap: 6px; }
.result .btn { margin-top: 20px; }
.result.ok { border-color: #CFE3C7; background: var(--ed-succes-fond); }
.result.ok .state { color: var(--ed-succes); }
.result.check { border-color: #F5DFB3; background: var(--ed-alerte-fond); }
.result.check .state { color: var(--ed-alerte); }
.result.no { border-color: #F6CFCB; background: var(--ed-erreur-fond); }
.result.no .state { color: var(--ed-erreur); }
.progress-label { display: flex; justify-content: space-between; gap: 12px; font: 600 0.8125rem/1.4 var(--font-titre); color: var(--ed-marine); margin-bottom: 8px; }
.track { height: 8px; border-radius: var(--radius-pill); background: var(--ed-marine-100); overflow: hidden; }
.fill { height: 100%; width: 0; background: var(--ed-degrade); background-size: 400% 100%; transition: width 300ms var(--ease); }

/* Après l'auto-diagnostic de résilience : l'invitation à candidater */
.diag-appel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; margin-top: clamp(18px, 2vw, 28px); padding: clamp(20px, 2.4vw, 32px) clamp(22px, 2.8vw, 40px); border-radius: var(--radius-xl); background: #fff; border: 1px solid var(--color-border); }
.diag-appel p { flex: 1 1 420px; max-width: 70ch; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.5; color: var(--ed-encre); }
.diag-appel b { color: var(--ed-marine); }
@media (max-width: 640px) { .diag-appel .btn { flex: 1 1 100%; } }

/* Éligibilité, à la fin des critères : la suite (le test, puis l'auto-diagnostic), en 2 cartes-boutons */
.crit-suite { display: grid; gap: clamp(18px, 2vw, 26px); }
.crit-suite h3 { font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem); }
.crit-suite .surtitre { margin-bottom: 10px; }
.crit-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 1080px; margin: 0; padding: 0; list-style: none; }
.crit-actions li { display: flex; }
.crit-action { flex: 1; display: flex; align-items: center; gap: 14px; min-height: 88px; padding: 16px 18px; border-radius: var(--radius-l); background: #fff; color: var(--ed-marine); text-decoration: none; transition: transform 220ms var(--ease), box-shadow 220ms var(--ease); }
.crit-action:hover { transform: translateY(-3px); box-shadow: var(--shadow-l); color: var(--ed-marine); }
.encadre .crit-action .ico-rond { width: 48px; height: 48px; background: var(--ed-ciel-50); }
.encadre .crit-action .ico-rond svg { width: 24px; height: 24px; stroke: var(--ed-bleu); }
.crit-action-txt { flex: 1; display: grid; gap: 3px; }
.crit-action-txt b { font: 700 clamp(1rem, 0.95rem + 0.25vw, 1.125rem)/1.3 var(--font-titre); color: var(--ed-marine); }
.crit-action-txt > span { font-size: 0.9375rem; line-height: 1.4; color: var(--ed-encre); }
.crit-action::after { content: "→"; content: "→" / ""; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ed-marine); color: #fff; font-family: var(--font-texte); transition: transform 220ms var(--ease); }
.crit-action.principale::after { background: var(--color-cta); }
.crit-action:hover::after { transform: translateX(3px); }
@media (max-width: 700px) { .crit-actions { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .encadre .crit-action .ico-rond { display: none; } }
@media (prefers-reduced-motion: reduce) { .crit-action, .crit-action::after { transition: none; } .crit-action:hover { transform: none; } }

.cand-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
@media (max-width: 1024px) { .cand-grid { grid-template-columns: minmax(0, 1fr); } }
.cand { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: clamp(22px, 3vw, 48px); }
.cand fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.cand > fieldset + fieldset { margin-top: clamp(28px, 3vw, 44px); padding-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--color-border); }
.cand legend { float: left; width: 100%; padding: 0; margin-bottom: 20px; display: flex; align-items: center; gap: 14px; font: 700 clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem)/1.3 var(--font-titre); color: var(--ed-marine); }
.cand legend + * { clear: both; }
.cand fieldset.field legend { float: none; display: block; margin-bottom: 10px; font: 600 0.9375rem/1.35 var(--font-titre); color: var(--ed-marine); }
.cand legend .sch-num { width: 34px; height: 34px; font-size: 1rem; clip-path: polygon(9px 0, 100% 0, 100% 100%, 0 100%, 0 9px); }
.cand-aside { position: sticky; top: calc(var(--header-h) + 24px); }
@media (max-width: 1024px) { .cand-aside { position: static; } }
.grid-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.grid-form .full { grid-column: 1 / -1; }
@media (max-width: 700px) { .grid-form { grid-template-columns: minmax(0, 1fr); } }
.field label, .field .label { display: block; margin-bottom: 6px; font: 600 0.9375rem/1.35 var(--font-titre); color: var(--ed-marine); }
.field .opt { font: 400 0.8125rem var(--font-texte); color: var(--color-text-muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; font: 400 1rem/1.4 var(--font-texte); color: var(--ed-encre);
  background: #fff; border: 1.5px solid var(--color-border-input); border-radius: var(--radius-m);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.field select { appearance: none; -webkit-appearance: none; padding-right: 44px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A4263' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; }
.field textarea { min-height: 128px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ed-gris); opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ed-marine); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 4px rgb(29 115 153 / 0.18); }
.field .help { margin-top: 6px; font-size: 0.875rem; color: var(--color-text-muted); }
.field label + .help { margin: -2px 0 10px; }
.field .err { display: none; margin-top: 6px; font-size: 0.875rem; font-weight: 600; color: var(--ed-erreur); }
.field.is-error input, .field.is-error select, .field.is-error textarea { border-color: var(--ed-erreur); background-color: var(--ed-erreur-fond); }
.field.is-error .err { display: block; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
@media (max-width: 700px) { .checks { grid-template-columns: minmax(0, 1fr); } }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-petit); cursor: pointer; }
.field .check { display: flex; gap: 12px; align-items: flex-start; margin: 0; font: 400 var(--fs-petit)/1.5 var(--font-texte); color: var(--ed-encre); }
.check input { width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; accent-color: var(--ed-vert-fonce); flex: none; }
.form-foot { margin-top: clamp(28px, 3vw, 40px); display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }
.rgpd { margin-top: 18px; font-size: 0.875rem; line-height: 1.55; color: var(--color-text-muted); max-width: 80ch; }
.recap { margin-top: 24px; }
.recap dl { margin: 14px 0 0; display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 8px 18px; font-size: var(--fs-petit); }
.recap dt { color: var(--color-text-muted); }
.recap dd { margin: 0; color: var(--ed-encre); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 560px) { .recap dl { grid-template-columns: minmax(0, 1fr); } .recap dd { margin-bottom: 8px; } }
/* Après l'envoi : le remerciement, puis le récapitulatif */
.merci { display: flex; gap: 16px; align-items: flex-start; }
.merci-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ed-succes-fond); color: var(--ed-succes); }
.merci-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.panneau .merci h2 { margin-bottom: 8px; }
.panneau.recap h3 { font-size: 1.125rem; margin-bottom: 0; }
/* Niveau de 1 à 5 (écoconception, résilience) : une barre en 5 segments qui se remplit du dégradé
   du logo jusqu'au niveau choisi ; au survol, aperçu du niveau visé et de sa description.
   Chaque segment est l'étiquette d'un bouton radio : clavier (flèches) et lecteurs d'écran inchangés. */
.maturite > .help { margin: -4px 0 12px; }
.niveau-barre { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; max-width: 380px; }
.niveau .niveau-barre input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.niveau .niveau-seg { --i: 0; position: relative; display: block; height: 34px; margin: 0; cursor: pointer; }
.niveau .niveau-seg:nth-of-type(2) { --i: 1; }
.niveau .niveau-seg:nth-of-type(3) { --i: 2; }
.niveau .niveau-seg:nth-of-type(4) { --i: 3; }
.niveau .niveau-seg:nth-of-type(5) { --i: 4; }
.niveau-seg::before, .niveau-seg::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 14px; margin-top: -7px; border-radius: var(--radius-pill); }
.niveau-seg::before { background: var(--ed-marine-100); transition: background-color 200ms var(--ease); }
.niveau-seg::after { background: var(--ed-degrade); background-size: 500% 100%; background-position: calc(var(--i) * 25%) 0; transform: scaleX(0); transform-origin: left center; transition: transform 380ms var(--ease) calc(var(--i) * 80ms); }
.niveau-seg.est-apercu::before { background: #CDE8F3; }
.niveau-barre input:checked + .niveau-seg::after, .niveau-seg.est-rempli::after { transform: scaleX(1); }
.niveau-seg:not(.est-rempli)::after { transition-delay: 0s; }
.niveau-seg.est-dernier::after { animation: niveau-pouls 700ms var(--ease) calc(var(--i) * 80ms + 300ms); }
.niveau .niveau-barre input:focus-visible + .niveau-seg { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 10px; }
.niveau.is-error .niveau-seg::before { background: var(--ed-erreur-fond); box-shadow: inset 0 0 0 1.5px var(--ed-erreur); }
.niveau-texte { display: flex; align-items: center; gap: 10px; min-height: 26px; margin-top: 2px; font: 400 0.9375rem/1.35 var(--font-texte); color: var(--color-text-muted); }
.niveau-texte b { display: none; }
.niveau-texte.est-choisi, .niveau-texte.est-apercu { color: var(--ed-encre); }
.niveau-texte.est-choisi b, .niveau-texte.est-apercu b { display: inline-grid; place-items: center; flex: none; min-width: 42px; height: 24px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--ed-marine); color: #fff; font: 800 0.8125rem/1 var(--font-titre); }
.niveau-texte.est-apercu b { background: var(--ed-bleu); }
.niveau-texte.est-choisi span { font-weight: 600; }
.niveau-texte.anime b, .niveau-texte.anime span { animation: niveau-texte 260ms var(--ease); }
@keyframes niveau-texte { from { opacity: 0; transform: translateY(4px); } }
@keyframes niveau-pouls { from { box-shadow: 0 0 0 0 rgb(32 163 206 / 0.5); } to { box-shadow: 0 0 0 9px rgb(32 163 206 / 0); } }
@media (prefers-reduced-motion: reduce) {
  .niveau-seg::before, .niveau-seg::after { transition: none; }
  .niveau-seg.est-dernier::after, .niveau-texte.anime b, .niveau-texte.anime span { animation: none; }
}
.anim-pause .niveau-seg::before, .anim-pause .niveau-seg::after { transition: none; }
.anim-pause .niveau-seg.est-dernier::after, .anim-pause .niveau-texte.anime b, .anim-pause .niveau-texte.anime span { animation: none; }
.panneau { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: clamp(22px, 2.6vw, 40px); }
.panneau h2, .panneau h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); letter-spacing: -0.012em; margin-bottom: 16px; }
.etapes-mini { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; counter-reset: em; }
.etapes-mini li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; counter-increment: em; }
.etapes-mini li::before { content: counter(em); content: counter(em) / ""; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ed-marine); color: #fff; font: 800 1rem/1 var(--font-titre); }
.etapes-mini b { display: block; font: 700 1rem/1.3 var(--font-titre); color: var(--ed-marine); }
.etapes-mini li > div > span { display: block; margin-top: 2px; font-size: var(--fs-petit); color: var(--ed-encre); }
.etapes-mini .todo-tag { margin-top: 6px; }

/* ---------- 12. Questions fréquentes ---------- */
.faq-groupes { display: grid; gap: clamp(40px, 5vw, 72px); }
.faq-groupe { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr); gap: clamp(20px, 4vw, 80px); align-items: start; }
.faq-groupe > h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); position: sticky; top: calc(var(--header-h) + 32px); }
@media (max-width: 900px) { .faq-groupe { grid-template-columns: minmax(0, 1fr); } .faq-groupe > h2 { position: static; } }
.faq { border-top: 1px solid var(--ed-marine); }
.faq details { border-bottom: 1px solid var(--color-border); }
.faq summary { list-style: none; cursor: pointer; padding: clamp(18px, 2vw, 26px) 0; display: flex; justify-content: space-between; gap: 24px; align-items: center; font: 700 clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem)/1.35 var(--font-titre); color: var(--ed-marine); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--ed-marine-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A4263' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform 300ms var(--ease), background-color 300ms var(--ease); }
.faq summary:hover::after { background-color: var(--ed-marine-200); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 clamp(20px, 2vw, 28px); max-width: 72ch; }
.faq details > div p + p { margin-top: 12px; }

/* ---------- 13. Pages légales et plan du site ---------- */
.legal { display: grid; grid-template-columns: minmax(200px, 0.5fr) minmax(0, 1.5fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.legal-sommaire { position: sticky; top: calc(var(--header-h) + 32px); }
.legal-sommaire p { font: 700 0.75rem/1.3 var(--font-titre); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ed-gris); margin-bottom: 12px; }
.legal-sommaire ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; border-left: 2px solid var(--color-border); }
.legal-sommaire a { display: block; padding: 6px 0 6px 16px; margin-left: -2px; border-left: 2px solid transparent; font: 600 0.9375rem/1.35 var(--font-titre); color: var(--ed-marine); text-decoration: none; }
.legal-sommaire a:hover { border-left-color: var(--ed-bleu); color: var(--ed-bleu); }
.legal .prose { max-width: 78ch; }
.prose a { overflow-wrap: anywhere; }
.legal .prose h2:first-child { margin-top: 0; }
.legal .prose h2 { scroll-margin-top: calc(var(--header-h) + 24px); padding-top: 8px; }
.legal dl { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 8px 20px; }
.legal dt { font-weight: 600; color: var(--ed-marine); }
.legal dd { margin: 0; }
@media (max-width: 900px) { .legal { grid-template-columns: minmax(0, 1fr); } .legal-sommaire { position: static; } }
@media (max-width: 560px) { .legal dl { grid-template-columns: minmax(0, 1fr); } .legal dd { margin-bottom: 8px; } }
.plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.plan h2 { font-size: 1.25rem; margin-bottom: 14px; }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.plan ul ul { margin: 8px 0 4px 16px; }
.plan a { font-weight: 600; }
@media (max-width: 860px) { .plan { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 14. Appel, pager, pied de page ---------- */
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); padding-block: clamp(40px, 5vw, 80px) clamp(56px, 6vw, 104px); }
.pager a { display: grid; gap: 6px; padding: clamp(22px, 2.6vw, 40px); border-radius: var(--radius-xl); background: var(--ed-surface); color: var(--ed-marine); text-decoration: none; transition: background-color 300ms var(--ease), color 300ms var(--ease); }
.pager small { font: 700 0.75rem/1.2 var(--font-titre); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ed-bleu); transition: color 300ms var(--ease); }
.pager b { font: 800 clamp(1.5rem, 1rem + 1.8vw, 2.75rem)/1.05 var(--font-titre); letter-spacing: -0.025em; }
.pager .pager-next { text-align: right; }
.pager .pager-prev b::before { content: "← "; content: "← " / ""; font-weight: 400; }
.pager .pager-next b::after { content: " →"; content: " →" / ""; font-weight: 400; }
.pager a:hover { background: var(--ed-marine); color: #fff; }
.pager a:hover small { color: var(--ed-ciel-texte); }
@media (max-width: 640px) { .pager { grid-template-columns: minmax(0, 1fr); } .pager .pager-next { text-align: left; } }

.appel-cadre { padding-bottom: clamp(16px, 2.4vw, 40px); }
.appel { border-radius: var(--radius-xl); padding: clamp(64px, 9vw, 152px) clamp(20px, 4vw, 64px); text-align: center; background: linear-gradient(140deg, var(--ed-marine) 0%, var(--ed-nuit) 100%); color: #fff; }
.appel-in { display: grid; justify-items: center; gap: clamp(18px, 2vw, 28px); }
.appel .surtitre { color: var(--ed-ciel-texte); }
.appel h2 { color: #fff; font-size: clamp(2.25rem, 1rem + 4vw, 5.5rem); letter-spacing: -0.035em; line-height: 1; max-width: 16ch; }
.appel p:not(.surtitre) { max-width: 58ch; color: var(--ed-ciel-100); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); }
.appel .btns { justify-content: center; margin-top: 8px; }

.site-footer { background: var(--ed-nuit); color: var(--ed-ciel-100); padding-block: clamp(56px, 7vw, 112px) 28px; font-size: var(--fs-petit); }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #fff; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: end; padding-bottom: clamp(36px, 4vw, 64px); border-bottom: 1px solid rgb(255 255 255 / 0.14); }
.foot-slogan { font: 800 clamp(2rem, 1rem + 3.2vw, 4.5rem)/0.98 var(--font-titre); letter-spacing: -0.035em; color: #fff; text-transform: uppercase; }
.foot-slogan span { color: var(--ed-ciel-texte); }
.foot-top .btns { justify-content: flex-end; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); padding-block: clamp(36px, 4vw, 56px); }
.foot-brand img { height: 40px; width: auto; }
.foot-brand p { margin-top: 18px; max-width: 36ch; }
/* Financeur : le bloc-marque de l'État se pose toujours sur fond blanc (cartouche), jamais sur le fond sombre */
.foot-financeur { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.foot-financeur-logo { display: inline-flex; align-items: center; min-height: 72px; padding: 4px 8px; border-radius: 10px; background: #fff; }
.foot-financeur-logo img { display: block; height: 76px; width: auto; }
.foot-brand .foot-financeur p { margin: 0; max-width: 24ch; }
.foot-h { font: 700 0.75rem/1.3 var(--font-titre); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ed-ciel-texte); margin-bottom: 16px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-bottom { padding-top: 22px; border-top: 1px solid rgb(255 255 255 / 0.14); display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; font-size: 0.875rem; }
.foot-bottom ul { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.foot-anim { padding: 0; border: 0; background: none; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.foot-anim:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1024px) { .foot-top { grid-template-columns: minmax(0, 1fr); } .foot-top .btns { justify-content: flex-start; } .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* Focus visible sur fond sombre (contraste ≥ 3:1) */
.vitrine :focus-visible, .appel :focus-visible, .site-footer :focus-visible, .encadre.sombre :focus-visible, .is-dark :focus-visible { outline-color: var(--ed-ciel-texte); }

/* Petits espacements utilitaires (en fin de feuille : ils l'emportent sur les composants) */
.mt-titre { margin-top: 14px; }
.mt-texte { margin-top: clamp(14px, 1.6vw, 22px); }
.mt-bloc { margin-top: clamp(20px, 2.4vw, 32px); }
.lien-centre { margin-top: clamp(28px, 3vw, 44px); text-align: center; }

/* ---------- 15. Mouvement ---------- */
@media (prefers-reduced-motion: no-preference) {
  .anim .reveal { opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
  .anim .reveal.is-visible { opacity: 1; transform: none; }
  .anim .reveal-groupe > * { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
  .anim .reveal-groupe.is-visible > * { opacity: 1; transform: none; }
  .anim .reveal-groupe.is-visible > :nth-child(2) { transition-delay: 90ms; }
  .anim .reveal-groupe.is-visible > :nth-child(3) { transition-delay: 180ms; }
  .anim .reveal-groupe.is-visible > :nth-child(4) { transition-delay: 270ms; }
  .anim .reveal-groupe.is-visible > :nth-child(5) { transition-delay: 360ms; }
  .anim .reveal-groupe.is-visible > :nth-child(6) { transition-delay: 450ms; }
  .anim .hero-titre > *, .anim .hero-suite > *, .anim .page-hero-texte > *, .anim .page-hero .hero-chiffres > li { animation: entree 900ms var(--ease) both; }
  .anim .hero-titre > :nth-child(2), .anim .page-hero-texte > :nth-child(2) { animation-delay: 80ms; }
  .anim .hero-suite > :nth-child(1), .anim .page-hero-texte > :nth-child(3) { animation-delay: 160ms; }
  .anim .hero-suite > :nth-child(2), .anim .page-hero-texte > :nth-child(4) { animation-delay: 240ms; }
  .anim .page-hero .hero-chiffres > li:nth-child(1) { animation-delay: 200ms; }
  .anim .page-hero .hero-chiffres > li:nth-child(2) { animation-delay: 280ms; }
  .anim .page-hero .hero-chiffres > li:nth-child(3) { animation-delay: 360ms; }
  .anim .page-hero .hero-chiffres > li:nth-child(4) { animation-delay: 440ms; }
  .anim .hero-logo img { animation: logo-entree 1200ms var(--ease) 150ms both; }
  /* Objectifs : le trait se dessine d'un pictogramme au suivant */
  .anim .obj-liste .obj::after { transform: var(--trait-depart, scale(1, 0)); transform-origin: var(--trait-origine, center top); transition: transform 900ms var(--ease) 450ms; }
  .anim .obj-liste.is-visible .obj::after { transform: none; }
}
@keyframes entree { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes logo-entree { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }

@media print {
  .site-header, .subnav, .appel, .pager, .nav-toggle, .foot-anim { display: none !important; }
  .defile-liste { animation: none !important; flex-wrap: wrap; }
  .defile-liste[aria-hidden="true"] { display: none; }
  .page-hero, .bref, .vitrine, .encadre.sombre { background: #fff !important; color: #000 !important; }
  :is(.page-hero, .bref, .vitrine, .encadre.sombre) :is(h1, h2, h3, p, li, a, b, span) { color: #000 !important; }
  .anim .reveal, .anim .reveal-groupe > * { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}