/* ==========================================================================
   Les Émergences : maquette du site national
   Une seule feuille : jetons, base, composants, mises en page, accueil, animations
   ========================================================================== */

/* 1. Polices hébergées */
/* Polices communes aux trois sites (harmonisation) : Montserrat pour les
   titres et le menu, Lato pour le texte, comme les antennes et le portail. */
@font-face { font-family: 'Lato'; src: url('../fonts/lato-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('../fonts/lato-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

/* 2. Jetons */
:root {
  --c-marine: #1F3A5F;
  --c-marine-fonce: #152B47;
  --c-vert: #2E8B57;
  --c-vert-fonce: #246E45;
  --c-vert-fonce-2: #1B5634;
  --c-vert-clair: #DFEEE4;
  --c-beige: #F4F1EA;
  --c-beige-2: #EBE4D7;
  --c-beige-3: #D9CFBF;
  --c-blanc: #FFFFFF;
  --c-anthracite: #333333;
  --c-gris: #6A6560;
  --c-or: #D4A60C;
  --c-or-fonce: #8A6B06;
  --c-bordeaux: #7A1F2E;
  --c-rose: #C86F85;
  /* Liserés et fonds teintés seulement : contraste insuffisant pour du texte. */
  --c-bleu: #4A7BA8;
  --c-olive: #6B7A2B;
  --c-sarcelle: #3D8F86;
  --c-ligne: rgba(31, 58, 95, 0.12);
  --c-marine-700: #152B47;
  --c-marine-100: rgba(31, 58, 95, 0.06);
  /* Couleur d'echelon (harmonisation des trois sites) : bordeaux pour le
     national, vert pour une ville, moutarde assombrie pour le portail.
     Sous-titre du logo, lien actif du menu, halo des heros. */
  --c-echelon: #7A1F2E;
  --c-echelon-halo: rgba(122, 31, 46, 0.42);
  --f-menu: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  /* Titre des heros : meme borne haute sur les trois sites */
  --fs-hero-titre: clamp(2.3rem, 5.2vw, 4.1rem);
  --entete-h: 72px;

  /* Cinq enjeux ODD+ (couleurs du portail) */
  --e-vivant: var(--c-vert-fonce);
  --e-solidarite: var(--c-marine);
  --e-emancipation: var(--c-bordeaux);
  --e-economie: var(--c-or-fonce);
  --e-gouvernance: var(--c-anthracite);

  --f-titre: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --f-texte: 'Lato', 'Segoe UI', Arial, sans-serif;

  --fs-hero: clamp(2.75rem, 6vw, 4.5rem);
  /* Memes tailles que le portail du reseau et les antennes */
  --fs-h1: clamp(2.3rem, 5.2vw, 4.1rem);
  --fs-h2: clamp(1.9rem, 3.6vw, 2.9rem);
  --fs-h3: clamp(1.2rem, 2.1vw, 1.55rem);
  --fs-h4: clamp(1.125rem, 2vw, 1.375rem);
  --fs-grand: 1.25rem;
  --fs-texte: 1.0625rem;
  --fs-petit: 0.9375rem;
  --fs-eyebrow: 0.8125rem;

  --conteneur: 1180px;
  --lecture: 65ch;
  --gouttiere: 20px;
  --section-py: clamp(3.5rem, 8vw, 7rem);
  --radius: 10px;
  --radius-sm: 6px;
  --radius-pilule: 999px;
  --ombre: 0 8px 24px rgba(31, 58, 95, 0.08);
  --duree: 0.25s;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}
@media (min-width: 720px) { :root { --gouttiere: 32px; } }

/* 3. Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--c-beige); color: var(--c-anthracite); font-family: var(--f-texte); font-size: var(--fs-texte); line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body.menu-ouvert { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--f-titre); color: var(--c-marine); font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 0.6em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; }
h4 { font-size: var(--fs-h4); font-weight: 700; letter-spacing: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--c-vert-fonce); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-vert-fonce); }
ul { padding-left: 1.2em; }
strong { color: var(--c-marine); }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--c-marine); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(212, 166, 12, 0.45); }
.pied :focus-visible, .bande--appel :focus-visible, .btn--pilule:focus-visible { outline-color: var(--c-or); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.35); }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: var(--gouttiere); top: -100px; background: var(--c-marine); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm); z-index: 100; }
.evitement:focus { top: 12px; }

/* 4. Mise en page */
.conteneur { width: 100%; max-width: var(--conteneur); margin: 0 auto; padding-left: var(--gouttiere); padding-right: var(--gouttiere); }
.conteneur--lecture { max-width: calc(var(--lecture) + 2 * var(--gouttiere)); }
.bande { padding-top: var(--section-py); padding-bottom: var(--section-py); }
.bande--alt { background: var(--c-beige-2); }
.bande--appel { background: var(--c-marine); color: rgba(255,255,255,0.88); }
.bande--appel h2 { color: #fff; }
.bande--appel .carte { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.88); }
.bande--appel .carte h3 { color: #fff; }
.bande--appel .btn--secondaire { color: #fff; border-color: rgba(255,255,255,0.5); }
.grille { display: grid; gap: 20px; }
@media (min-width: 720px) {
  .grille--2 { grid-template-columns: repeat(2, 1fr); }
  .grille--3 { grid-template-columns: repeat(3, 1fr); }
  .grille--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) { .grille--4 { grid-template-columns: repeat(4, 1fr); } }
.entete-page { padding-top: calc(var(--section-py) * 0.8); padding-bottom: calc(var(--section-py) * 0.6); }
.entete-page h1 { max-width: 20ch; }
.entete-page .chapeau { font-size: var(--fs-grand); max-width: 60ch; color: var(--c-gris); }
.lecture { max-width: var(--lecture); }

/* 5. En-tête de site : modèle du site Strasbourg, commun aux trois sites */
.entete { position: sticky; top: 0; z-index: 50; background: rgba(244, 241, 234, 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-ligne); }
.entete__inner { display: flex; align-items: center; gap: 1.5rem; padding-top: 0.9rem; padding-bottom: 0.9rem; }
.marque { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--c-marine); text-decoration: none; }
.marque:hover { color: var(--c-marine); }
.marque img { width: 40px; height: 40px; object-fit: contain; }
.marque__texte { display: flex; flex-direction: column; line-height: 1.15; font-family: var(--f-menu); }
.marque__nom { font-weight: 800; font-size: 1rem; color: var(--c-marine); letter-spacing: 0.01em; }
.marque__echelon { font-weight: 700; font-size: 0.85rem; color: var(--c-echelon); }
.nav { margin-left: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2.1rem; }
.nav a { position: relative; display: inline-block; color: var(--c-marine); text-decoration: none; font-family: var(--f-menu); font-weight: 600; font-size: 0.92rem; padding: 0.3rem 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--c-echelon); transition: right var(--duree) var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.nav a[aria-current="page"] { color: var(--c-echelon); }
.entete__adherer { margin-left: clamp(1.5rem, 3vw, 2.75rem); }
.btn-menu { display: none; margin-left: auto; width: 42px; height: 42px; border: none; background: transparent; border-radius: 10px; position: relative; cursor: pointer; }
.btn-menu:hover { background: var(--c-marine-100); }
.btn-menu__barres, .btn-menu__barres::before, .btn-menu__barres::after { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--c-marine); position: absolute; left: 10px; top: 20px; transition: transform var(--duree) var(--ease); content: ''; }
.btn-menu__barres::before { top: -7px; left: 0; }
.btn-menu__barres::after { top: 7px; left: 0; }
.btn-menu[aria-expanded="true"] .btn-menu__barres { background: transparent; }
.btn-menu[aria-expanded="true"] .btn-menu__barres::before { transform: translateY(7px) rotate(45deg); }
.btn-menu[aria-expanded="true"] .btn-menu__barres::after { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 899px) {
  .btn-menu { display: block; }
  .entete__adherer { margin-left: 0; }
  .js .nav { display: none; }
  .js .nav.est-ouvert { display: block; position: fixed; top: var(--entete-h); right: 0; height: calc(100vh - var(--entete-h)); width: min(320px, 86vw); background: var(--c-marine); padding: 2rem 1.75rem; overflow-y: auto; }
  .js .nav.est-ouvert ul { flex-direction: column; gap: 1.5rem; }
  .js .nav.est-ouvert a { color: #fff; font-size: 1.05rem; }
  .js .nav.est-ouvert a[aria-current="page"] { color: var(--c-or); }
  .js .nav.est-ouvert a::after { background: var(--c-or); }
  html:not(.js) .nav ul { flex-wrap: wrap; gap: 12px; }
}
@media (max-width: 479px) {
  .entete__inner { gap: 0.6rem; }
  .marque { gap: 0.5rem; }
  .marque img { width: 34px; height: 34px; }
  .marque__nom, .marque__echelon { white-space: nowrap; }
  .marque__nom { font-size: 0.92rem; }
  .marque__echelon { font-size: 0.78rem; }
  .btn--appel { padding: 0.5em 1em; font-size: 0.82rem; }
  html:not(.js) .entete__inner { flex-wrap: wrap; }
}

/* 6. Composants */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: var(--radius-sm); background: var(--c-vert-fonce); color: #fff; font-weight: 600; font-size: 0.9375rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background var(--duree) var(--ease), transform var(--duree) var(--ease); }
.btn:hover { background: var(--c-vert-fonce-2); color: #fff; transform: translateY(-1px); }
.btn--secondaire { background: transparent; color: var(--c-marine); border-color: rgba(31, 58, 95, 0.35); }
.btn--secondaire:hover { background: rgba(31, 58, 95, 0.06); color: var(--c-marine); }
.btn--pilule { border-radius: var(--radius-pilule); background: var(--c-marine); padding: 8px 18px; min-height: 44px; }
.btn--pilule:hover { background: var(--c-marine-fonce); }
/* Bouton d'appel de l'en-tete : format du portail du reseau */
.btn--appel { min-height: 0; padding: 0.6em 1.25em; font-family: var(--f-menu); font-weight: 700; font-size: 0.88rem; line-height: 1.65; }
.boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.eyebrow { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-vert-fonce); margin: 0 0 14px; }
.carte { background: var(--c-blanc); border: 1px solid var(--c-ligne); border-radius: var(--radius); padding: 24px; transition: box-shadow var(--duree) var(--ease), transform var(--duree) var(--ease); }
.carte:hover { box-shadow: var(--ombre); }
.carte h3 { font-size: var(--fs-h4); font-weight: 700; letter-spacing: 0; margin-bottom: 8px; }
.carte p { font-size: var(--fs-petit); }
.carte__icone { width: 64px; height: auto; margin-bottom: 14px; }
.carte__chantier { font-style: italic; color: var(--c-gris); }
.carte .btn { margin-top: 14px; }
/* Cartes teintées : liseré supérieur et fond à 7 % de la couleur --ct */
.carte--teinte { border-top: 4px solid var(--ct, var(--c-marine)); }
@supports (background: color-mix(in srgb, red 7%, white)) {
  .carte--teinte { background: color-mix(in srgb, var(--ct, var(--c-marine)) 7%, white); }
}
.ct-bleu { --ct: var(--c-bleu); }
.ct-or { --ct: var(--c-or); }
.ct-marine { --ct: var(--c-marine); }
.ct-olive { --ct: var(--c-olive); }
.ct-vert { --ct: var(--c-vert-fonce); }
.ct-sarcelle { --ct: var(--c-sarcelle); }
.ct-bordeaux { --ct: var(--c-bordeaux); }
.ct-anthracite { --ct: var(--c-anthracite); }
.carte__icone--groupe { width: 96px; height: 96px; margin-bottom: 12px; }
.ecran .carte__icone--groupe { width: 72px; height: 72px; margin-bottom: 10px; }
@media (max-width: 719px) {
  .ecran .carte__icone--groupe { width: 88px; height: 88px; }
}
/* Cartes à icône : un tiers (icône puis titre, centrés) et deux tiers (texte) */
.carte--icone { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 20px; align-items: start; }
.carte--icone .carte__tete { text-align: center; }
.carte--icone .carte__tete img { width: 100%; max-width: 120px; height: auto; display: block; margin: 0 auto 10px; }
.carte--icone .carte__tete h3 { margin-bottom: 0; font-size: 1.0625rem; hyphens: auto; overflow-wrap: anywhere; }
.carte--icone .carte__corps p:last-child { margin-bottom: 0; }
/* Grille à trois colonnes de cartes à icône : deux colonnes entre 720 et 899 px, sinon le titre est broyé */
@media (min-width: 720px) and (max-width: 899px) {
  .grille--3:has(.carte--icone) { grid-template-columns: repeat(2, 1fr); }
}
/* Grille à trois colonnes : le premier tiers est trop étroit sous 1200 px, bandeau jusque-là */
@media (max-width: 1199px) {
  .grille--3 .carte--icone { grid-template-columns: 1fr; }
  .grille--3 .carte--icone .carte__tete { display: grid; grid-template-columns: 96px 1fr; column-gap: 14px; align-items: center; text-align: left; margin-bottom: 10px; }
  .grille--3 .carte--icone .carte__tete img { margin: 0; }
}
@media (max-width: 1023px) {
  .carte--icone { grid-template-columns: 1fr; }
  .carte--icone .carte__tete { display: grid; grid-template-columns: 96px 1fr; column-gap: 14px; align-items: center; text-align: left; margin-bottom: 10px; }
  .carte--icone .carte__tete img { margin: 0; }
}
.citation { font-family: var(--f-titre); font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 700; line-height: 1.4; color: var(--c-marine); border-left: 4px solid var(--c-vert); padding-left: 20px; margin: 0 0 20px; max-width: 32ch; }
.citation cite { display: block; font-family: var(--f-texte); font-size: var(--fs-eyebrow); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-gris); margin-top: 12px; }
.chiffres { display: flex; flex-wrap: wrap; gap: 28px 40px; margin-top: 32px; }
.chiffres div { font-family: var(--f-titre); font-weight: 800; font-size: 2rem; color: var(--c-marine); line-height: 1; }
.chiffres small { display: block; font-family: var(--f-texte); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-gris); margin-top: 6px; }
.lien-fleche { font-weight: 600; text-decoration: none; color: var(--c-vert-fonce); }
.lien-fleche::after { content: ' \2192'; }
.lien-fleche:hover { text-decoration: underline; }
a[target="_blank"]:not(.btn)::after { content: ' \2197'; font-size: 0.8em; }
.encart { background: var(--c-blanc); border-left: 4px solid var(--c-or); border-radius: 0 var(--radius) var(--radius) 0; padding: 20px 24px; margin: 24px 0; }
.encart .eyebrow { color: var(--c-or-fonce); }
.tableau { width: 100%; border-collapse: collapse; font-size: var(--fs-petit); }
.tableau th, .tableau td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--c-ligne); vertical-align: top; }
.tableau th { color: var(--c-marine); font-weight: 700; }
.note { font-size: var(--fs-petit); color: var(--c-gris); }
.pastille { display: inline-flex; align-items: center; text-align: left; min-height: 44px; padding: 6px 16px; border-radius: var(--radius-pilule); border: 2px solid var(--c, var(--c-marine)); color: var(--c, var(--c-marine)); background: var(--c-blanc); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0; line-height: 1.3; cursor: pointer; font-family: var(--f-texte); transition: background var(--duree) var(--ease), color var(--duree) var(--ease); }
.pastille[aria-expanded="true"], .pastille.est-actif { background: var(--c, var(--c-marine)); color: #fff; }
.etat { display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--radius-pilule); background: var(--c-vert-clair); color: var(--c-vert-fonce); margin-left: 8px; vertical-align: middle; }
.etat--prepa { background: var(--c-beige-2); color: var(--c-gris); }
.formulaire label { display: block; font-weight: 600; color: var(--c-marine); margin: 16px 0 6px; }
.formulaire input, .formulaire textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--c-beige-3); border-radius: var(--radius-sm); font: inherit; background: #fff; }
.formulaire textarea { min-height: 160px; }
.formulaire__message { margin-top: 16px; padding: 14px 16px; background: var(--c-vert-clair); border-radius: var(--radius-sm); color: var(--c-vert-fonce); }

/* 7. Accueil : le parcours et le fil */
.parcours { position: relative; }
.ecran { padding-top: var(--section-py); padding-bottom: var(--section-py); }
.ecran:nth-of-type(even) { background: var(--c-beige-2); }
.ecran__inner { position: relative; }
.ecran__num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c-marine); color: #fff; font-size: 0.75rem; margin-right: 8px; vertical-align: middle; }
.ecran__repere { display: none; }
.fil { display: none; }
@media (min-width: 720px) {
  .ecran__inner { padding-left: calc(var(--gouttiere) + 56px); }
  .ecran__num { display: none; }
  .ecran__repere { display: flex; align-items: center; justify-content: center; position: absolute; left: var(--gouttiere); top: 0.35em; width: 32px; height: 32px; border-radius: 50%; background: var(--c-beige); border: 2px solid var(--c-beige-3); color: var(--c-gris); font-weight: 700; font-size: 0.8125rem; transition: background var(--duree) var(--ease), color var(--duree) var(--ease), border-color var(--duree) var(--ease); z-index: 2; }
  .ecran.est-actif .ecran__repere { background: var(--c-marine); border-color: var(--c-marine); color: #fff; }
  .ecran--action.est-actif .ecran__repere { background: var(--c-vert-fonce); border-color: var(--c-vert-fonce); }
  .fil { display: block; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; pointer-events: none; z-index: 1; }
  .fil svg { position: absolute; top: 0; height: 100%; width: 4px; overflow: visible; left: calc((100% - min(var(--conteneur), 100%)) / 2 + var(--gouttiere) + 14px); }
  .fil path { fill: none; stroke-width: 3; stroke-linecap: round; }
  .fil__fond { stroke: var(--c-beige-3); }
  .fil__trait { stroke: var(--c-vert); }
}
/* Hero de l'accueil sur le modele du portail du reseau : marine en degrade,
   halo bordeaux (couleur d'echelon du national), trame de points. */
.hero { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(118deg, var(--c-marine-700) 0%, var(--c-marine) 58%, #2E547F 100%); color: #fff; padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.hero h1 { font-size: var(--fs-hero-titre); max-width: 17ch; color: #fff; }
.hero .accroche { font-size: var(--fs-grand); max-width: 52ch; color: rgba(255, 255, 255, 0.72); }
.hero .eyebrow { color: var(--c-or); }
.hero .ecran__inner { z-index: 1; }
.hero .chiffres div { color: #fff; }
.hero .chiffres small { color: rgba(255, 255, 255, 0.72); }
.hero .btn--secondaire { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.hero .btn--secondaire:hover { background: #fff; color: var(--c-marine); }
.hero .hero__illustration { width: min(320px, 70vw); height: auto; aspect-ratio: 1; object-fit: contain; padding: 8%; border-radius: 50%; background: var(--c-beige); box-shadow: 0 24px 55px rgba(0, 0, 0, 0.25); }
.hero :focus-visible, .bandeau-page :focus-visible { outline-color: var(--c-or); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.35); }
.hero::before, .bandeau-page::before { content: ""; position: absolute; z-index: 0; inset: auto -140px -220px auto; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, var(--c-echelon-halo), rgba(122, 31, 46, 0) 66%); pointer-events: none; }
.hero::after, .bandeau-page::after { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.5; background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.35) 1px, transparent 0); background-size: 46px 46px; -webkit-mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0.9), transparent 62%); mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0.9), transparent 62%); pointer-events: none; }
/* Hero des pages interieures : meme fond, bandeau pleine largeur */
.bandeau-page { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(118deg, var(--c-marine-700) 0%, var(--c-marine) 58%, #2E547F 100%); color: #fff; }
.bandeau-page .entete-page { position: relative; z-index: 1; padding-top: clamp(2rem, 4.5vw, 3.4rem); padding-bottom: clamp(2rem, 4.5vw, 3.4rem); }
.bandeau-page h1 { font-size: var(--fs-hero-titre); color: #fff; max-width: 20ch; }
.bandeau-page .entete-page .chapeau { color: rgba(255, 255, 255, 0.72); }
.bandeau-page .eyebrow { color: var(--c-or); }
.bandeau-page .btn--secondaire { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.bandeau-page .btn--secondaire:hover { background: #fff; color: var(--c-marine); }
.hero__grille { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .hero__grille { grid-template-columns: 3fr 2fr; } }
.hero__illustration { max-width: 320px; margin: 0 auto; }

/* 8. Accueil : schéma des secteurs */
.secteurs { display: flex; align-items: flex-end; gap: 12px; height: 220px; margin: 28px 0 12px; max-width: 640px; }
.secteur { flex: 1; height: var(--h); border-radius: 8px 8px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 10px 6px; color: #fff; font-weight: 700; font-size: 0.8125rem; text-align: center; line-height: 1.2; transform-origin: bottom; }
.secteur small { font-weight: 600; font-size: 0.6875rem; margin-top: 4px; }
.secteur--1 { background: #766A51; }
.secteur--2 { background: #6F6A64; }
.secteur--3 { background: var(--c-marine); }
.secteur--4 { background: var(--c-vert-fonce); outline: 3px solid var(--c-vert-fonce); outline-offset: 2px; }
.secteurs__legende { font-size: var(--fs-petit); color: var(--c-gris); max-width: 640px; }
.js .secteurs[data-anime] .secteur { transform: scaleY(0); transition: transform 0.5s var(--ease); }
.js .secteurs[data-anime] .secteur small { opacity: 0; transition: opacity 0.4s var(--ease) 2.2s; }
.js .secteurs[data-anime].est-visible .secteur--1 { transform: scaleY(1); transition-delay: 0s; }
.js .secteurs[data-anime].est-visible .secteur--2 { transform: scaleY(1); transition-delay: 0.4s; }
.js .secteurs[data-anime].est-visible .secteur--3 { transform: scaleY(1); transition-delay: 0.8s; }
.js .secteurs[data-anime].est-visible .secteur--4 { transform: scaleY(1); transition-duration: 0.8s; transition-delay: 1.4s; }
.js .secteurs[data-anime].est-visible .secteur small { opacity: 1; }

/* 9. Enjeux ODD+ */
.enjeux__pastilles { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; padding: 0; list-style: none; }
.enjeu__panneau { background: var(--c-blanc); border: 1px solid var(--c-ligne); border-top: 4px solid var(--c, var(--c-marine)); border-radius: var(--radius); padding: 24px; }
.enjeu__panneau h3, .enjeu__panneau h4 { color: var(--c, var(--c-marine)); }
.enjeu__panneau + .enjeu__panneau { margin-top: 16px; }
.enjeux .enjeu__panneau + h3 { margin-top: 28px; }
.enjeu__panneau[hidden] { display: none; }
.objectifs { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; }
.objectifs li { padding-left: 68px; position: relative; font-size: var(--fs-petit); }
.objectifs .numero { position: absolute; left: 0; top: 2px; width: 60px; white-space: nowrap; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; color: var(--c, var(--c-marine)); }
.objectifs strong { display: block; }
.exemple { background: var(--c-beige); border-radius: var(--radius-sm); padding: 14px 16px; font-size: var(--fs-petit); }
.exemple strong { display: block; margin-bottom: 4px; }

/* Boussole de La vision : accordéon natif par enjeu, comme sur les sites des villes */
.odd-accordeon { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.odd-accordeon__item { --c: var(--c-marine); background: var(--c-blanc); border: 1px solid var(--c-ligne); border-left: 4px solid var(--c); border-radius: var(--radius); overflow: hidden; }
.odd-accordeon__item summary { list-style: none; display: flex; align-items: center; gap: 16px; padding: 18px 22px; cursor: pointer; }
.odd-accordeon__item summary::-webkit-details-marker { display: none; }
.odd-accordeon__item summary:hover { background: color-mix(in srgb, var(--c) 5%, white); }
.odd-accordeon__num { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #DFEEE4; color: #2E8B57; font-family: var(--f-titre); font-weight: 800; font-size: 0.9rem; }
/* Pastilles et surtitres : couleurs de charte du thème des antennes (style.css du thème, accordéon ODD+) */
.odd-accordeon__item--marine .odd-accordeon__num { background: rgba(31, 58, 95, 0.06); color: #1F3A5F; }
.odd-accordeon__item--bordeaux .odd-accordeon__num { background: #EAD4D8; color: #7A1F2E; }
.odd-accordeon__item--or .odd-accordeon__num { background: #F6E9B6; color: #D4A60C; }
.odd-accordeon__item--anthracite .odd-accordeon__num { background: rgba(51, 51, 51, 0.09); color: #333333; }
.odd-accordeon__item--vert .odd-accordeon__pilier { color: #2E8B57; }
.odd-accordeon__item--marine .odd-accordeon__pilier { color: #2C547F; }
.odd-accordeon__item--bordeaux .odd-accordeon__pilier { color: #7A1F2E; }
.odd-accordeon__item--or .odd-accordeon__pilier { color: #D4A60C; }
.odd-accordeon__item--anthracite .odd-accordeon__pilier { color: #333333; }
.odd-accordeon__pic { flex: none; height: 46px; width: auto; object-fit: contain; }
.odd-accordeon__labels { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.odd-accordeon__pilier { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c); }
.odd-accordeon__title { font-family: var(--f-titre); font-weight: 700; font-size: 1.0625rem; color: var(--c-marine); }
.odd-accordeon__accroche { font-size: var(--fs-petit); line-height: 1.45; color: var(--c-anthracite); max-width: 75ch; }
.odd-accordeon__chevron { flex: none; width: 20px; height: 20px; color: var(--c-marine); transition: transform var(--duree) var(--ease); }
.odd-accordeon__item[open] .odd-accordeon__chevron { transform: rotate(180deg); }
.odd-accordeon__body { padding: 0 22px 22px calc(22px + 2rem + 16px); }
.odd-accordeon__desc { max-width: 70ch; font-size: var(--fs-petit); margin: 0 0 14px; padding-top: 14px; border-top: 1px dashed rgba(31, 58, 95, 0.2); }
.odd-accordeon__body .objectifs, .odd-accordeon__body .exemple { max-width: 75ch; }
.odd-accordeon__body .objectifs .numero, .odd-accordeon__body .exemple strong { color: var(--c); }
@media (max-width: 719px) {
  .odd-accordeon__pic { display: none; }
  .odd-accordeon__body { padding-left: 22px; }
}

/* 10. Carte de France */
.carte-france { display: grid; gap: 28px; align-items: center; }
@media (min-width: 720px) { .carte-france { grid-template-columns: 1fr 1fr; } }
.carte-france svg { width: 100%; max-width: 420px; height: auto; margin: 0 auto; display: block; }
.carte-france .contour { fill: var(--c-blanc); stroke: var(--c-marine); stroke-width: 1.5; stroke-linejoin: round; }
.ville circle { fill: var(--c-vert); stroke: #fff; stroke-width: 3; transition: r var(--duree) var(--ease); }
.ville--prepa circle { fill: var(--c-gris); }
.ville text { font-family: var(--f-texte); font-size: 13px; font-weight: 700; fill: var(--c-marine); }
.ville:hover circle, .ville:focus circle { r: 11; }
.ville:focus { outline: none; }
.ville:focus circle { stroke: var(--c-or); }
.villes-liste { list-style: none; padding: 0; margin: 0; }
.villes-liste li { padding: 14px 0; border-bottom: 1px solid var(--c-ligne); }
.villes-liste strong { font-size: var(--fs-grand); }

/* 11. Apparitions au défilement */
.js [data-apparait] { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js [data-apparait].est-visible { opacity: 1; transform: none; }

/* 12. Manifeste */
.manifeste p { font-size: 1.1875rem; line-height: 1.7; }
.manifeste h2 { font-size: var(--fs-h3); margin-top: 2em; }
.manifeste .exergue { font-family: var(--f-titre); font-size: clamp(1.5rem, 3vw, 2.125rem); font-weight: 700; color: var(--c-marine); margin-top: 2em; }

/* 13. Pied de page */
.pied { background: var(--c-marine); color: rgba(255,255,255,0.8); padding: 48px 0 24px; font-size: var(--fs-petit); margin-top: 0; }
.pied__inner { display: grid; gap: 28px; }
@media (min-width: 720px) { .pied__inner { grid-template-columns: repeat(3, 1fr); } }
.pied__titre { color: #fff; font-weight: 700; margin-bottom: 8px; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { padding: 10px 0; }
.pied a { color: rgba(255,255,255,0.85); }
.pied a:hover { color: #fff; }
.pied__bas { margin-top: 32px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.15); font-size: 0.8125rem; }

/* 14. Moins d'animations */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation-duration: 0.01ms !important; }
  .js [data-apparait] { opacity: 1; transform: none; }
  .js .secteurs[data-anime] .secteur { transform: none; }
  .js .secteurs[data-anime] .secteur small { opacity: 1; }
}

/* 15. Carte des villes : la meme que sur le portail du reseau
   (fond de carte carte-france.svg, marqueurs places en pourcentage depuis
   la latitude et la longitude, avec la projection du portail). */
.carte-france--reseau { grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 940px) { .carte-france--reseau { grid-template-columns: 1.5fr 1fr; } }
#pe-carte { height: 480px; border-radius: 22px; overflow: hidden; background: var(--c-beige); border: 1px solid var(--c-ligne); position: relative; display: grid; place-items: center; padding: 1.5rem; }
.pe-carte__zone { position: relative; height: 100%; aspect-ratio: 900 / 820; max-width: 100%; }
.pe-carte__zone svg { width: 100%; height: 100%; max-width: none; display: block; margin: 0; }
.pe-carte__zone .pastel { opacity: 0.78; }
.france-outline { fill: rgba(255, 255, 255, 0.6); stroke: var(--c-marine); stroke-width: 1.1; stroke-linejoin: round; }
.pe-marqueur { position: absolute; transform: translate(-50%, -8px); display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-decoration: none; }
.pe-marqueur::after { content: none !important; }
.pe-marqueur__point { width: 16px; height: 16px; border-radius: 50%; background: var(--c-or); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(21, 43, 71, 0.35); transition: transform 0.2s var(--ease); }
.pe-marqueur--prepa .pe-marqueur__point { background: var(--c-gris); }
.pe-marqueur__nom { font-family: var(--f-menu); font-weight: 700; font-size: 0.78rem; color: var(--c-marine); background: rgba(255, 255, 255, 0.92); border: 1px solid var(--c-ligne); border-radius: 999px; padding: 0.15em 0.7em; white-space: nowrap; transition: border-color 0.2s var(--ease); }
a.pe-marqueur:hover .pe-marqueur__point, a.pe-marqueur:focus-visible .pe-marqueur__point { transform: scale(1.25); }
a.pe-marqueur:hover .pe-marqueur__nom { border-color: var(--c-or); }
@media (max-width: 719px) { #pe-carte { height: 360px; padding: 1rem; } }

/* 16. Illustration en colonne (La vision, « Un mouvement, pas un parti »).
   L'image renvoie vers son fichier, pour l'afficher en grand. */
.grille--qui { align-items: start; }
.illustration-colonne { margin: 0; }
.illustration-colonne img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--ombre); }
.illustration-colonne a { display: block; cursor: zoom-in; }