/* ANIA, Académie nationale de l'intelligence artificielle
   Style institutionnel inspiré des sites publics : blanc, bleu profond, angles droits, pictogrammes.
   Aucun élément réservé à l'État (Marianne, bloc « République française », police Marianne). */

@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/statique/polices/inter-normal.woff2") format("woff2");
}

:root {
  --bleu: #1f2c8f;
  --bleu-survol: #141d66;
  --bleu-actif: #0e1550;
  --bleu-clair: #e8eafb;
  --bleu-pale: #f4f5fe;
  --bleu-moyen: #c3c8f2;
  --fond: #ffffff;
  --fond-gris: #f6f6f6;
  --fond-gris-2: #eeeeee;
  --texte: #161616;
  --texte-mention: #666666;
  --bordure: #dddddd;
  --bordure-forte: #929292;
  --focus: #0a76f6;
  --police: "Inter", Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bleu: #8d97ff;
    --bleu-survol: #b3baff;
    --bleu-actif: #ced2ff;
    --bleu-clair: #1e2347;
    --bleu-pale: #191b2e;
    --bleu-moyen: #3a4280;
    --fond: #161616;
    --fond-gris: #1e1e1e;
    --fond-gris-2: #2a2a2a;
    --texte: #eeeeee;
    --texte-mention: #aaaaaa;
    --bordure: #353535;
    --bordure-forte: #6a6a6a;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--police); font-size: 1rem; line-height: 1.5rem; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: inherit; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
.prose a, .question__reponse a, .chiffre__source, .encart a, .lien { color: var(--bleu); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
main:focus { outline: none; }

h1, h2, h3, h4 { color: var(--texte); font-weight: 700; margin: 0 0 1.5rem; }
h1 { font-size: 2rem; line-height: 2.5rem; }
h2 { font-size: 1.75rem; line-height: 2.25rem; }
h3 { font-size: 1.375rem; line-height: 1.75rem; margin-bottom: 1rem; }
@media (min-width: 48rem) {
  h1 { font-size: 2.5rem; line-height: 3rem; }
  h2 { font-size: 2rem; line-height: 2.5rem; }
  h3 { font-size: 1.5rem; line-height: 2rem; }
}
p { margin: 0 0 1.5rem; }
strong { font-weight: 700; }
h1 em, h2 em { font-style: normal; color: var(--bleu); }

.conteneur { width: 100%; max-width: 78rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 48rem) { .conteneur { padding: 0 1.5rem; } }

.evitement { position: absolute; left: 1rem; top: -5rem; z-index: 50; background: var(--fond); color: var(--bleu); padding: 0.5rem 1rem; box-shadow: 0 0 0 2px var(--bleu); }
.evitement:focus { top: 1rem; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Bandeau d'information ---------- */
.bandeau-info { background: var(--bleu-clair); color: var(--bleu); font-size: 0.875rem; line-height: 1.5rem; }
.bandeau-info .conteneur { display: flex; align-items: center; gap: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.bandeau-info p { margin: 0; }
.bandeau-info a { margin-left: auto; white-space: nowrap; font-weight: 500; }
.pastille { flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--bleu); position: relative; }
.pastille::after { content: "i"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--fond); font-size: 0.75rem; font-weight: 700; font-style: italic; }
@media (max-width: 48rem) { .bandeau-info a { display: none; } }

/* ---------- En-tête ---------- */
.entete { background: var(--fond); box-shadow: 0 1px 3px rgba(0, 0, 18, 0.16); position: relative; z-index: 10; }
.entete__corps { display: flex; align-items: center; gap: 1.5rem; padding-top: 1rem; padding-bottom: 1rem; }
.bloc-marque { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: var(--texte); }
.bloc-marque:hover { background: var(--fond-gris); }
.bloc-marque__logo { display: block; width: 4rem; height: 4rem; flex: none; }
.embleme__fond { fill: var(--bleu); }
.embleme__a { fill: #fff; }
.embleme__point { fill: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .embleme__fond { fill: #2b38a8; } }
.bloc-marque__texte { display: flex; flex-direction: column; padding-left: 1rem; border-left: 1px solid var(--bordure); }
.bloc-marque__nom { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; letter-spacing: 0.02em; }
.bloc-marque__devise { font-size: 0.875rem; line-height: 1.5rem; color: var(--texte-mention); }
.entete__outils { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; }
.liens-rapides { display: flex; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.liens-rapides a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.75rem; font-size: 0.875rem; font-weight: 500; color: var(--bleu); text-decoration: none; }
.liens-rapides a:hover { background: var(--fond-gris); }
.liens-rapides svg { width: 1rem; height: 1rem; fill: currentColor; }
.recherche { display: flex; width: 22rem; }
.recherche input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: 0.5rem 1rem; background: var(--fond-gris-2); color: var(--texte); border: 0; border-radius: 0.25rem 0 0 0; box-shadow: inset 0 -2px 0 0 var(--texte); }
.recherche input::placeholder { color: var(--texte-mention); font-style: italic; }
.recherche button { border: 0; background: var(--bleu); color: var(--fond); padding: 0 0.85rem; cursor: pointer; border-radius: 0 0.25rem 0 0; display: grid; place-items: center; }
.recherche button:hover { background: var(--bleu-survol); }
.recherche button svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }

.navigation { border-top: 1px solid var(--bordure); }
.navigation ul { list-style: none; display: flex; margin: 0 auto; padding-top: 0; padding-bottom: 0; }
.navigation a { display: block; padding: 1rem; font-size: 0.875rem; line-height: 1.5rem; font-weight: 500; text-decoration: none; color: var(--texte); position: relative; }
.navigation li:first-child a { padding-left: 0; }
.navigation a:hover { background: var(--fond-gris); }
.navigation a[aria-current] { color: var(--bleu); }
.navigation a[aria-current]::before { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 0; height: 2px; background: var(--bleu); }
.navigation li:first-child a[aria-current]::before { left: 0; }

.entete__menu { display: none; margin-left: auto; background: none; border: 0; color: var(--bleu); font: inherit; font-weight: 500; font-size: 0.875rem; padding: 0.5rem; cursor: pointer; }
.entete__menu svg { width: 1.5rem; height: 1.5rem; fill: currentColor; display: block; margin: 0 auto 0.1rem; }

.navigation__mobile { display: none; }
.navigation__mobile .recherche { width: 100%; margin: 1rem 0 0.5rem; }
@media (max-width: 62rem) {
  .entete__outils { display: none; }
  .entete__menu { display: block; }
  .bloc-marque { gap: 0.75rem; }
  .bloc-marque__logo { width: 3rem; height: 3rem; }
  .bloc-marque__texte { padding-left: 0.75rem; }
  .bloc-marque__devise { font-size: 0.75rem; line-height: 1.1rem; }
  .js .navigation { display: none; }
  .js .navigation.ouverte { display: block; }
  .navigation ul { flex-direction: column; }
  .navigation a, .navigation li:first-child a { padding: 0.75rem 0; border-bottom: 1px solid var(--bordure); }
  .navigation a[aria-current]::before, .navigation li:first-child a[aria-current]::before { left: -1rem; right: auto; top: 0.75rem; bottom: 0.75rem; width: 2px; height: auto; }
  .navigation__mobile { display: block; padding-bottom: 1rem; }
}

/* ---------- Boutons ---------- */
.bouton { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0.5rem 1.5rem; background: var(--bleu); color: var(--fond); font-weight: 500; font-size: 1rem; line-height: 1.5rem; text-decoration: none; border: 0; }
.bouton:hover { background: var(--bleu-survol); color: var(--fond); }
.bouton:active { background: var(--bleu-actif); }
.bouton--contour { background: transparent; color: var(--bleu); box-shadow: inset 0 0 0 1px var(--bleu); }
.bouton--contour:hover { background: var(--fond-gris); color: var(--bleu); }
.bouton--clair { background: var(--fond); color: var(--bleu); }
.bouton--clair:hover { background: var(--bleu-clair); color: var(--bleu); }
.bouton--petit { min-height: 2rem; padding: 0.25rem 0.75rem; font-size: 0.875rem; }
.boutons { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* ---------- Typographie ---------- */
.surtitre { font-size: 0.875rem; line-height: 1.5rem; font-weight: 700; text-transform: uppercase; color: var(--bleu); margin: 0 0 0.75rem; letter-spacing: 0.02em; }
.chapo, .titre__chapo { font-size: 1.25rem; line-height: 2rem; color: var(--texte); max-width: 48rem; }
.badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0 0.5rem; font-size: 0.875rem; line-height: 1.5rem; font-weight: 700; text-transform: uppercase; background: var(--bleu-clair); color: var(--bleu); border-radius: 0.25rem; }

/* ---------- Accueil : ouverture ---------- */
.ouverture { background: var(--bleu-pale); border-bottom: 1px solid var(--bordure); }
.ouverture__grille { display: grid; gap: 2.5rem; align-items: center; padding-top: 3rem; padding-bottom: 3rem; }
@media (min-width: 62rem) { .ouverture__grille { grid-template-columns: 7fr 5fr; gap: 4rem; padding-top: 4.5rem; padding-bottom: 4.5rem; } }
.ouverture h1 { font-size: 2.25rem; line-height: 2.75rem; }
@media (min-width: 48rem) { .ouverture h1 { font-size: 3rem; line-height: 3.5rem; } }
.ouverture .badge { margin-bottom: 1.25rem; }

.carte-france { position: relative; margin: 0 auto; width: 100%; max-width: 30rem; }
.carte-points { display: block; width: 100%; height: auto; overflow: visible; }
.carte__pt { fill: var(--bleu-moyen); }
.carte__pt--idf, .carte__pt--ara { fill: var(--bleu); }
.carte__coeur { fill: var(--fond); stroke: var(--bleu); stroke-width: 3; }
.carte__onde { fill: none; stroke: var(--bleu); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .carte__onde { animation: onde 3.2s ease-out infinite; }
  .carte__onde--2 { animation-delay: 1.6s; }
  @keyframes onde { 0% { opacity: 0.8; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.6); } }
}
.carte-france__etiquette { position: absolute; margin: 0; background: var(--fond); padding: 0.5rem 0.75rem; box-shadow: 0 2px 6px rgba(0, 0, 18, 0.16); font-size: 0.75rem; line-height: 1.1rem; white-space: nowrap; border-left: 3px solid var(--bleu); }
.carte-france__etiquette strong { display: block; font-size: 1.5rem; line-height: 1.75rem; color: var(--bleu); }
.carte-france__etiquette--idf { left: 50.4%; top: 24.7%; transform: translate(-112%, -50%); }
.carte-france__etiquette--ara { left: 64.6%; top: 57.8%; transform: translate(16%, -10%); }
@media (max-width: 40rem) { .carte-france__etiquette--ara { transform: translate(-55%, 45%); } }
.carte-france__legende { margin-top: 1rem; font-size: 0.75rem; line-height: 1.25rem; color: var(--texte-mention); display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.carte-france__legende span::before { content: ""; display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: 0.4rem; background: var(--bleu); }
.carte-france__legende span + span::before { background: var(--bleu-moyen); }

/* ---------- Bande de chiffres ---------- */
.repere { border-bottom: 1px solid var(--bordure); }
.repere ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 62rem) { .repere ul { grid-template-columns: repeat(4, 1fr); } }
.repere li { padding: 1.5rem 1rem 1.5rem 0; }
@media (min-width: 62rem) { .repere li + li { padding-left: 1.5rem; border-left: 1px solid var(--bordure); } }
.repere strong { display: block; font-size: 2.5rem; line-height: 3rem; color: var(--bleu); }
.repere span { display: block; font-size: 0.875rem; line-height: 1.5rem; color: var(--texte-mention); }

/* ---------- Sections ---------- */
.section { padding: 3rem 0; }
@media (min-width: 48rem) { .section { padding: 4.5rem 0; } }
.section--gris, .section--papier { background: var(--fond-gris); }
.section--encre { background: var(--bleu); color: #fff; }
.section--encre h2, .section--encre h3, .section--encre .surtitre { color: #fff; }
.section--encre p { color: #e3e5fb; }
.section__tete { margin-bottom: 2.5rem; max-width: 48rem; }
.section__tete h2 { margin-bottom: 1rem; }
.section__tete p:not(.surtitre) { font-size: 1.125rem; line-height: 1.75rem; color: var(--texte-mention); margin: 0; }
.section--encre .section__tete p:not(.surtitre) { color: #e3e5fb; }
@media (min-width: 62rem) { .section__tete--large { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 4rem; align-items: end; } }
.section__suite { margin: 2rem 0 0; }

/* ---------- Grilles ---------- */
.grille { display: grid; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 36rem) { .grille--2, .grille--3, .grille--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .grille--3 { grid-template-columns: repeat(3, 1fr); } .grille--4 { grid-template-columns: repeat(4, 1fr); } }

/* Cartes : titre bleu, flèche en bas à droite, toute la carte cliquable */
.carte { position: relative; display: flex; flex-direction: column; background: var(--fond); border: 1px solid var(--bordure); border-bottom: 3px solid var(--bleu); padding: 2rem; }
.carte h3 { font-size: 1.25rem; line-height: 1.75rem; margin-bottom: 0.75rem; }
.carte h3 a { color: var(--bleu); text-decoration: none; }
.carte h3 a::after { content: ""; position: absolute; inset: 0; }
.carte:has(h3 a):hover { background: var(--fond-gris); }
.carte:has(h3 a) { padding-bottom: 4rem; }
.carte:has(h3 a)::after { content: "→"; position: absolute; right: 2rem; bottom: 1.5rem; color: var(--bleu); font-size: 1.25rem; }
.carte p { margin: 0; font-size: 0.875rem; line-height: 1.5rem; color: var(--texte); }
.carte__num, .carte__role { font-size: 0.75rem !important; line-height: 1.25rem !important; font-weight: 700; text-transform: uppercase; color: var(--texte-mention) !important; margin-bottom: 0.75rem !important; }

/* Tuiles à pictogramme */
.tuiles { display: grid; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 36rem) { .tuiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .tuiles { grid-template-columns: repeat(4, 1fr); } }
.tuile { position: relative; background: var(--fond); border: 1px solid var(--bordure); border-bottom: 4px solid var(--bleu); padding: 2rem 1.5rem 2.25rem; text-align: center; display: flex; flex-direction: column; align-items: center; }
.tuile:hover { background: var(--fond-gris); }
.tuile svg { width: 5rem; height: 5rem; margin-bottom: 1.25rem; }
.tuile h3 { font-size: 1.125rem; line-height: 1.5rem; margin: 0 0 0.5rem; }
.tuile h3 a { color: var(--bleu); text-decoration: none; }
.tuile h3 a::after { content: ""; position: absolute; inset: 0; }
.tuile p { margin: 0; font-size: 0.875rem; line-height: 1.5rem; color: var(--texte-mention); }

/* Pictogrammes */
.pict-fond { fill: var(--bleu-clair); }
.pict-trait { fill: none; stroke: var(--bleu); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pict-plein { fill: var(--bleu); }
.pict-accent { fill: var(--bleu-moyen); }

/* Programme : six briques */
.piliers { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 36rem) { .piliers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .piliers { grid-template-columns: repeat(3, 1fr); } }
.pilier { background: var(--fond); border: 1px solid var(--bordure); padding: 2rem; }
.pilier__tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.pilier__num { font-size: 0.875rem; font-weight: 700; color: var(--texte-mention); }
.picto { width: 3rem; height: 3rem; padding: 0.7rem; background: var(--bleu-clair); color: var(--bleu); stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pilier h3 { font-size: 1.25rem; line-height: 1.75rem; margin-bottom: 0.5rem; }
.pilier p { margin: 0; font-size: 0.875rem; line-height: 1.5rem; }

/* Étapes, façon indicateur d'étapes */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; counter-reset: etape; }
@media (min-width: 48rem) { .etapes { grid-template-columns: repeat(3, 1fr); } }
.etape { counter-increment: etape; position: relative; padding: 1.5rem 1.5rem 1.75rem; background: var(--fond); border: 1px solid var(--bordure); }
.etape::before { content: "Étape " counter(etape) " sur 3"; display: block; font-size: 0.875rem; color: var(--texte-mention); margin-bottom: 0.5rem; }
.etape__barre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 1.5rem; }
.etape__barre i { height: 0.5rem; background: var(--bleu-clair); }
.etape__barre i.fait { background: var(--bleu); }
.etape h3 { font-size: 1.25rem; line-height: 1.75rem; margin-bottom: 0.5rem; }
.etape p { margin: 0; font-size: 0.875rem; line-height: 1.5rem; }
.etape__quand { display: none; }

/* Chiffres sourcés */
.chiffres { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .chiffres { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 62rem) { .chiffres--4 { grid-template-columns: repeat(4, 1fr); } }
.chiffre { background: var(--fond); border: 1px solid var(--bordure); padding: 1.5rem 1.5rem 1.25rem; }
.chiffre__valeur { display: block; font-size: 2.5rem; line-height: 3rem; font-weight: 700; color: var(--bleu); margin-bottom: 0.5rem; }
.chiffre p { margin: 0 0 1rem; font-size: 1rem; }
.chiffre__source { font-size: 0.75rem; line-height: 1.25rem; color: var(--texte-mention); }

/* Mise en avant */
.mise-en-avant { background: var(--bleu-pale); border-left: 4px solid var(--bleu); padding: 2rem; }
.manifeste { font-size: 1.375rem; line-height: 2rem; font-weight: 700; margin: 0; max-width: 56rem; }
@media (min-width: 48rem) { .manifeste { font-size: 1.75rem; line-height: 2.5rem; } }
.manifeste em { font-style: normal; color: var(--bleu); }

/* Membres du consortium */
.membres { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 36rem) { .membres { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .membres { grid-template-columns: repeat(4, 1fr); } }
.membre { background: var(--fond); border: 1px solid var(--bordure); padding: 1.5rem; }
.membre__nom { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--bleu); }
.membre p { font-size: 0.875rem; line-height: 1.5rem; margin: 0; }

/* Encarts (mise en exergue) */
.encart { background: var(--bleu-pale); border-left: 4px solid var(--bleu); padding: 1.5rem 2rem; margin: 2rem 0; }
.encart > :last-child { margin-bottom: 0; }
.encart ul { margin-bottom: 0; }
.encart__titre { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; margin-bottom: 0.5rem; }
.encart--or { background: var(--fond-gris); border-left-color: var(--bordure-forte); }
.citation { margin: 2rem 0; padding: 0 0 0 1.5rem; border-left: 4px solid var(--bleu); font-size: 1.25rem; line-height: 2rem; font-weight: 700; }

.soutien { display: grid; gap: 1rem; background: var(--bleu-pale); border-left: 4px solid var(--bleu); padding: 1.5rem 2rem; }
@media (min-width: 48rem) { .soutien { grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; } }
.soutien p { margin: 0; }
.soutien__titre { font-weight: 700; }
.soutien a { color: var(--bleu); }

/* Accordéons */
.questions { max-width: 56rem; }
.question { border-top: 1px solid var(--bordure); }
.question:last-child { border-bottom: 1px solid var(--bordure); }
.question summary { cursor: pointer; list-style: none; position: relative; padding: 0.75rem 3rem 0.75rem 1rem; font-weight: 500; color: var(--bleu); min-height: 3rem; display: flex; align-items: center; }
.question summary::-webkit-details-marker { display: none; }
.question summary:hover { background: var(--fond-gris); }
.question summary::after { content: ""; position: absolute; right: 1.1rem; top: 50%; width: 0.55rem; height: 0.55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform 0.2s; }
.question[open] summary { background: var(--bleu-clair); }
.question[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.question__reponse { padding: 1rem 1rem 1.5rem; }
.question__reponse > :last-child { margin-bottom: 0; }
.questions-groupe { display: grid; gap: 1.5rem; padding-bottom: 3rem; }
@media (min-width: 62rem) { .questions-groupe { grid-template-columns: 18rem 1fr; gap: 3rem; } }
.questions-groupe h2 { font-size: 1.5rem; line-height: 2rem; }

/* ---------- Pages intérieures ---------- */
.titre { padding: 0 0 1rem; margin-bottom: 2rem; }
.titre h1 { max-width: 52rem; margin-bottom: 1.5rem; }
.titre .surtitre { margin-top: 0.5rem; }
.titre__date { font-size: 0.875rem; color: var(--texte-mention); margin: 1rem 0 0; }
.fil { padding: 2rem 0 1.5rem; }
.fil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; font-size: 0.75rem; line-height: 1.25rem; color: var(--texte-mention); }
.fil li + li::before { content: "›"; margin: 0 0.4rem 0 0.15rem; }
.fil a { color: var(--texte-mention); }
.fil [aria-current] { color: var(--texte); }

.prose { max-width: 48rem; }
.conteneur.prose { max-width: 78rem; }
.conteneur.prose > * { max-width: 48rem; }
.conteneur.prose > .tableau-defile { max-width: 56rem; }
.prose > h2 { font-size: 1.75rem; line-height: 2.25rem; margin-top: 3rem; margin-bottom: 1rem; }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.25rem; line-height: 1.75rem; margin-top: 2rem; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1.5rem; }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--bleu); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.875rem; line-height: 1.5rem; border: 1px solid var(--bordure); }
.prose th, .prose td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--bordure); vertical-align: top; }
.prose thead th { background: var(--fond-gris-2); font-weight: 700; }
.prose tbody tr:nth-child(even) { background: var(--fond-gris); }
.tableau-defile { overflow-x: auto; }
.page-page .prose, .page-faq .prose { margin-bottom: 4rem; }

.guide { display: grid; gap: 2rem; padding-bottom: 4rem; }
@media (min-width: 62rem) { .guide { grid-template-columns: 17rem minmax(0, 48rem); gap: 4rem; } }
.sommaire { font-size: 0.875rem; line-height: 1.5rem; }
@media (min-width: 62rem) { .sommaire { position: sticky; top: 1.5rem; align-self: start; border-right: 1px solid var(--bordure); padding-right: 1.5rem; } }
.sommaire__titre { font-weight: 700; margin-bottom: 0.75rem; }
.sommaire ol { list-style: none; margin: 0; padding: 0; }
.sommaire a { position: relative; display: block; padding: 0.75rem 1rem; text-decoration: none; color: var(--texte); border-top: 1px solid var(--bordure); }
.sommaire a:hover { background: var(--fond-gris); }
.sommaire a.actif { color: var(--bleu); font-weight: 500; }
.sommaire a.actif::before { content: ""; position: absolute; left: 0; top: 0.75rem; bottom: 0.75rem; width: 2px; background: var(--bleu); }

.sources { font-size: 0.875rem; color: var(--texte-mention); }
.source { font-size: 0.875rem; color: var(--texte-mention); }
.a-completer { background: #fff3c4; color: #5c4400; border: 1px dashed #b38600; padding: 0 0.3rem; }
.contacts { display: grid; gap: 1.5rem; list-style: none; padding: 0; margin: 0 0 2.5rem; }
@media (min-width: 48rem) { .contacts { grid-template-columns: repeat(2, 1fr); } }
.h3 { font-size: 1.25rem; line-height: 1.75rem; }
.plan h2 { font-size: 1.5rem; }

/* Recherche */
.resultats { list-style: none; padding: 0; margin: 2rem 0 4rem; max-width: 48rem; }
.resultats li { border-top: 1px solid var(--bordure); padding: 1.25rem 0; }
.resultats a { font-size: 1.125rem; font-weight: 700; color: var(--bleu); }
.resultats p { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--texte-mention); }
.recherche--page { width: 100%; max-width: 40rem; }

/* ---------- Pied de page ---------- */
.pied { border-top: 2px solid var(--bleu); background: var(--fond); padding-top: 2rem; }
.pied__haut { display: grid; gap: 2rem; padding-bottom: 2rem; }
@media (min-width: 62rem) { .pied__haut { grid-template-columns: 5fr 7fr; align-items: center; } }
.pied__texte p { font-size: 0.875rem; line-height: 1.5rem; margin-bottom: 1rem; }
.pied__partenaires { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; margin: 0; padding: 0; font-size: 0.875rem; font-weight: 700; }
.pied__partenaires a { text-decoration: none; }
.pied__partenaires a:hover { text-decoration: underline; }
.pied__liens { display: grid; gap: 1.5rem; padding: 2rem 0; border-top: 1px solid var(--bordure); }
@media (min-width: 48rem) { .pied__liens { grid-template-columns: repeat(3, 1fr); } }
.pied__liens h2 { font-size: 0.875rem; line-height: 1.5rem; margin-bottom: 0.5rem; }
.pied__liens ul { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
.pied__liens li { margin-bottom: 0.4rem; }
.pied__liens a { text-decoration: none; }
.pied__liens a:hover { text-decoration: underline; }
.pied__soutien { border-top: 1px solid var(--bordure); padding: 1.25rem 0; font-size: 0.75rem; line-height: 1.25rem; color: var(--texte-mention); }
.pied__soutien p { margin: 0; max-width: 60rem; }
.pied__bas { border-top: 1px solid var(--bordure); padding: 0.75rem 0 1.5rem; }
.pied__bas ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 0.5rem; padding: 0; font-size: 0.75rem; line-height: 1.25rem; color: var(--texte-mention); }
.pied__bas li + li::before { content: ""; display: inline-block; width: 1px; height: 1rem; background: var(--bordure); margin: 0 0.75rem; vertical-align: -0.2rem; }
.pied__bas a { text-decoration: none; }
.pied__bas a:hover { text-decoration: underline; }
.pied__bas p { margin: 0; font-size: 0.75rem; line-height: 1.25rem; color: var(--texte-mention); }

@media print {
  .bandeau-info, .entete__outils, .navigation, .sommaire, .pied, .evitement { display: none !important; }
  .question:not([open]) .question__reponse { display: block; }
}
.navigation ul { padding-left: 0; }
.carte-france__etiquette--ara { transform: translate(-30%, 75%); }
@media (max-width: 40rem) { .carte-france__etiquette--ara { transform: translate(-60%, 75%); } .carte-france__etiquette--idf { transform: translate(-108%, -60%); } }

/* Mot-symbole ANIA : les A ouverts portent un point, le I un pixel */
:root { --accent-logo: #6f7ce0; }
.bloc-marque__logo { width: auto; height: 2.75rem; }
.mot__plein { fill: var(--bleu); }
.mot__accent { fill: var(--accent-logo); }
.bloc-marque__texte { padding-left: 1.25rem; }
.bloc-marque__devise { font-size: 0.9375rem; line-height: 1.35rem; color: var(--texte); font-weight: 500; }
@media (max-width: 62rem) { .bloc-marque__logo { width: auto; height: 2rem; } .bloc-marque__devise { font-size: 0.75rem; line-height: 1.05rem; } }
@media (max-width: 22rem) { .bloc-marque__texte { display: none; } }
.ouverture { overflow: hidden; }
.carte-france__etiquette--ara, .carte-france__etiquette--ara { transform: translate(-62%, 75%); }
@media (max-width: 40rem) { .carte-france__etiquette--idf { transform: translate(-45%, -140%); } }

/* ---------- Logo France 2030 (fichier officiel, non modifié, toujours sur fond blanc) ---------- */
.logo-f2030 { display: block; width: 5.5rem; height: 5.5rem; background: #fff; flex: none; }
.logo-f2030--moyen { width: 6.5rem; height: 6.5rem; }
.ouverture__soutien { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem; }
.ouverture__soutien .logo-f2030 { border-radius: 50%; box-shadow: 0 2px 10px rgba(31, 44, 143, 0.14); }
.ouverture__soutien p { margin: 0; font-size: 0.875rem; line-height: 1.35rem; font-weight: 500; color: var(--bleu); }
.soutien .logo-f2030 { border-radius: 50%; }
.encart--logo { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center; }
.encart--logo .logo-f2030 { border-radius: 50%; }
.pied__soutien { display: flex; align-items: center; gap: 1.5rem; }
.pied__soutien .logo-f2030 { width: 4.5rem; height: 4.5rem; }
@media (max-width: 36rem) { .encart--logo { grid-template-columns: 1fr; } }

/* ---------- Jauges sous les pourcentages ---------- */
.jauge { display: block; height: 0.375rem; background: var(--bleu-clair); margin: 0 0 1rem; overflow: hidden; }
.jauge i { display: block; height: 100%; width: calc(var(--p) * 1%); background: var(--bleu); transform-origin: left; }

/* ---------- Animations (désactivées si l'utilisateur réduit les animations) ---------- */
.bouton::after { content: "→"; transition: transform 0.25s ease; }
.bouton:hover::after { transform: translateX(4px); }
.lecture { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--bleu); transform-origin: left; transform: scaleX(var(--lu, 0)); z-index: 100; }

@media (prefers-reduced-motion: no-preference) {
  /* Apparition au défilement, en cascade */
  .js .apparait { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
  .js .apparait.visible { opacity: 1; transform: none; }

  /* Titre d'accueil, mot à mot */
  .js .mot-anime { display: inline-block; opacity: 0; transform: translateY(0.55em); filter: blur(8px); animation: mot-entre 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; animation-delay: calc(var(--i) * 65ms + 150ms); }
  @keyframes mot-entre { to { opacity: 1; transform: none; filter: blur(0); } }

  /* Logo : le point des A et le pixel du I tombent en place */
  .js .page-accueil .entete .mot__accent { transform-box: fill-box; transform-origin: center; animation: point-tombe 1s cubic-bezier(0.3, 1.6, 0.5, 1) both; animation-delay: var(--retard, 0.4s); }
  @keyframes point-tombe { 0% { transform: translateY(-260%) scale(0.3); opacity: 0; } 55% { opacity: 1; } 100% { transform: none; opacity: 1; } }

  /* Fond de l'ouverture : halos qui dérivent lentement */
  .ouverture { position: relative; isolation: isolate; }
  .ouverture::before, .ouverture::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: 0.55; pointer-events: none; }
  .ouverture::before { width: 34rem; height: 34rem; right: -6rem; top: -10rem; background: #cfd4fb; animation: derive 18s ease-in-out infinite alternate; }
  .ouverture::after { width: 26rem; height: 26rem; left: 30%; bottom: -14rem; background: #dfe3fd; animation: derive 22s ease-in-out infinite alternate-reverse; }
  @keyframes derive { from { transform: translate(0, 0) scale(1); } to { transform: translate(-6rem, 4rem) scale(1.15); } }

  /* Carte : les points s'allument depuis les deux régions, puis une vague de diffusion parcourt la France */
  .js .carte-points .carte__pt { opacity: 0; transform-box: fill-box; transform-origin: center; }
  .js .carte-points.anime .carte__pt { animation: point-entre 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) forwards, vague 7s ease-in-out infinite; animation-delay: var(--d, 0ms), calc(var(--d, 0ms) + 2600ms); }
  .js .carte-points.anime .carte__pt--idf, .js .carte-points.anime .carte__pt--ara { animation: point-entre 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) forwards; animation-delay: var(--d, 0ms); }
  @keyframes point-entre { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
  @keyframes vague { 0%, 14%, 100% { fill: var(--bleu-moyen); } 6% { fill: var(--bleu); } }
  .js .carte-france__etiquette { opacity: 0; scale: 0.85; transition: opacity 0.6s ease, scale 0.6s cubic-bezier(0.3, 1.5, 0.5, 1); }
  .js .carte-france.etiquettes .carte-france__etiquette { opacity: 1; scale: 1; }
  .js .carte-france.etiquettes .carte-france__etiquette--ara { transition-delay: 0.25s; }

  /* Jauges et barres d'étapes qui se remplissent */
  .js .jauge i { transform: scaleX(0); transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s; }
  .js .visible .jauge i { transform: scaleX(1); }
  .js .etape__barre i.fait { transform: scaleX(0); transform-origin: left; transition: transform 0.6s ease; }
  .js .etape.visible .etape__barre i.fait { transform: none; }
  .js .etape.visible .etape__barre i.fait:nth-child(2) { transition-delay: 0.35s; }
  .js .etape.visible .etape__barre i.fait:nth-child(3) { transition-delay: 0.7s; }

  /* Pictogrammes qui se dessinent */
  .js .picto [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s cubic-bezier(0.6, 0, 0.3, 1) 0.3s; }
  .js .visible .picto [pathLength] { stroke-dashoffset: 0; }
  .js .tuile svg > :not(:first-child) { transform-box: fill-box; transform-origin: center; transform: scale(0.4); opacity: 0; transition: transform 0.7s cubic-bezier(0.3, 1.6, 0.5, 1), opacity 0.4s; }
  .js .tuile.visible svg > :not(:first-child) { transform: none; opacity: 1; }
  .js .tuile.visible svg > :nth-child(3) { transition-delay: 0.1s; }
  .js .tuile.visible svg > :nth-child(4) { transition-delay: 0.2s; }
  .js .tuile.visible svg > :nth-child(5) { transition-delay: 0.3s; }
  .js .tuile.visible svg > :nth-child(n+6) { transition-delay: 0.4s; }

  /* Survols : les blocs se soulèvent */
  .tuile, .carte, .pilier, .membre, .chiffre, .etape { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s, background 0.2s; }
  .tuile:hover, .carte:hover, .pilier:hover, .membre:hover, .chiffre:hover { transform: translateY(-5px); box-shadow: 0 16px 32px -16px rgba(31, 44, 143, 0.35); }
  .tuile svg { transition: transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1); }
  .tuile:hover svg { transform: translateY(-6px) rotate(-4deg) scale(1.06); }
  .carte:has(h3 a)::after { transition: transform 0.25s ease; }
  .carte:has(h3 a):hover::after { transform: translateX(6px); }
  .pilier .picto { transition: transform 0.4s cubic-bezier(0.3, 1.5, 0.5, 1), background 0.3s, color 0.3s; }
  .pilier:hover .picto { transform: rotate(-8deg) scale(1.12); background: var(--bleu); color: #fff; }

  /* Mise en avant : surlignage qui se dessine */
  .manifeste em { background: linear-gradient(var(--bleu-clair), var(--bleu-clair)) no-repeat 0 88% / 0% 45%; transition: background-size 1.4s cubic-bezier(0.6, 0, 0.3, 1) 0.5s; }
  .js .mise-en-avant.visible .manifeste em { background-size: 100% 45%; }

  /* Logo France 2030 : légère rotation d'entrée */
  .js .ouverture__soutien .logo-f2030 { animation: f2030-entre 1.1s cubic-bezier(0.3, 1.4, 0.5, 1) 0.2s both; }
  @keyframes f2030-entre { from { opacity: 0; transform: rotate(-90deg) scale(0.6); } to { opacity: 1; transform: none; } }

  /* Accordéons : la réponse glisse */
  .question[open] .question__reponse { animation: deplie 0.35s ease-out; }
  @keyframes deplie { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

/* =====================================================================
   Version 2 : ouverture immersive, en-tête compact, mosaïque, frise,
   conviction lue au défilement, transitions de pages.
   ===================================================================== */

/* ---------- Ouverture bleue ---------- */
.ouverture--bleue { position: relative; overflow: hidden; isolation: isolate; color: #fff; border-bottom: 0;
  background: radial-gradient(1200px 600px at 85% 20%, #3341c4 0%, transparent 60%), linear-gradient(140deg, #10175a 0%, #1a2479 45%, #1f2c8f 100%); }
.ouverture--bleue::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.35; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,0.35) 1px, transparent 1.5px); background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%);
  animation: none; width: auto; height: auto; filter: none; border-radius: 0; }
.ouverture--bleue::after { display: none; }
.ouverture__lumiere { position: absolute; z-index: -1; width: 46rem; height: 46rem; left: var(--mx, 70%); top: var(--my, 35%); transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(140, 155, 255, 0.35), transparent 60%); pointer-events: none; transition: left 0.6s ease-out, top 0.6s ease-out; }
.ouverture--bleue h1 { color: #fff; }
.ouverture--bleue .chapo { color: #d9ddff; }
.ouverture--bleue .ouverture__soutien p { color: #fff; }
.ouverture--bleue .ouverture__grille { padding-bottom: 2.5rem; }
@media (min-width: 62rem) { .ouverture--bleue .ouverture__grille { padding-top: 5rem; padding-bottom: 3rem; } }
.bouton--contour-clair { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); }
.bouton--contour-clair:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.ouverture--bleue .bouton--clair { background: #fff; color: #1f2c8f; }
.ouverture--bleue .bouton--clair:hover { background: #e8eafb; color: #141d66; }

.ouverture--bleue .carte-points { --pt-fond: rgba(255, 255, 255, 0.2); --pt-vague: #ffffff; }
.ouverture--bleue .carte__pt--idf, .ouverture--bleue .carte__pt--ara { fill: #9aa8ff; }
.ouverture--bleue .carte__coeur { fill: #fff; stroke: #9aa8ff; stroke-width: 4; }
.ouverture--bleue .carte__onde { stroke: #c8cfff; }
.ouverture--bleue .carte-france__legende { color: #c8cdf5; }
.ouverture--bleue .carte-france__legende span::before { background: #9aa8ff; }
.ouverture--bleue .carte-france__legende span + span::before { background: rgba(255, 255, 255, 0.3); }
.ouverture--bleue .carte-france__etiquette { background: rgba(255, 255, 255, 0.96); color: #161616; border-left-color: #6f7ce0; box-shadow: 0 12px 30px -10px rgba(0, 0, 30, 0.6); }
.ouverture--bleue .carte-france__etiquette strong { color: #1f2c8f; }
.carte-points { --pt-fond: var(--bleu-moyen); --pt-vague: var(--bleu); }
.carte__pt { fill: var(--pt-fond); }
.carte__lien { fill: none; stroke: #c8cfff; stroke-width: 2.5; stroke-dasharray: 6 9; opacity: 0.85; }
.carte__particule { fill: #fff; filter: drop-shadow(0 0 6px #b8c2ff); }
.ouverture--bleue .carte-points { filter: drop-shadow(0 20px 40px rgba(0, 0, 40, 0.35)); }

.ouverture__chiffres { list-style: none; margin: 0; padding: 0 0 3rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 62rem) { .ouverture__chiffres { grid-template-columns: repeat(4, 1fr); gap: 1rem; padding-bottom: 4rem; } }
.ouverture__chiffres li { padding: 1.25rem 1.25rem 1.1rem; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ouverture__chiffres strong { display: block; font-size: 2.25rem; line-height: 2.75rem; font-weight: 700; color: #fff; }
@media (min-width: 48rem) { .ouverture__chiffres strong { font-size: 2.75rem; line-height: 3.25rem; } }
.ouverture__chiffres span { display: block; font-size: 0.8125rem; line-height: 1.25rem; color: #c8cdf5; margin-top: 0.25rem; }

/* ---------- Bandeau défilant ---------- */
.defilant { overflow: hidden; border-bottom: 1px solid var(--bordure); background: var(--fond); padding: 1.1rem 0; }
.defilant__piste { display: flex; gap: 0; width: max-content; }
.defilant span { display: inline-flex; align-items: center; font-size: 1.125rem; font-weight: 700; color: var(--bleu); white-space: nowrap; padding: 0 1.5rem; }
.defilant span::after { content: ""; width: 0.5rem; height: 0.5rem; background: var(--accent-logo); margin-left: 3rem; transform: rotate(45deg); }

/* ---------- En-tête compact au défilement ---------- */
.entete { position: sticky; top: 0; z-index: 30; transition: box-shadow 0.3s; }
.entete__corps { transition: padding 0.3s ease; }
.entete.compact .entete__corps { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.entete.compact .bloc-marque__logo { height: 2rem; }
.entete.compact .liens-rapides { display: none; }
.entete.compact { box-shadow: 0 6px 20px -8px rgba(0, 0, 18, 0.25); }
.bloc-marque__logo { transition: height 0.3s ease; }
@media (max-width: 62rem) { .js .navigation.ouverte { max-height: calc(100vh - 5rem); overflow-y: auto; } }

/* Menu : soulignement qui grandit depuis le centre */
.navigation a::after { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 0; height: 2px; background: var(--bleu); transform: scaleX(0); transition: transform 0.25s ease; }
.navigation li:first-child a::after { left: 0; }
.navigation a:hover::after { transform: scaleX(1); }
.navigation a[aria-current]::after { display: none; }

/* ---------- Programme en mosaïque ---------- */
@media (min-width: 62rem) {
  .piliers--mosaique { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(12rem, auto); }
  .piliers--mosaique .pilier--vedette { grid-column: span 2; grid-row: span 2; }
}
.pilier--vedette { position: relative; overflow: hidden; background: linear-gradient(140deg, #141d66, #1f2c8f 60%, #3341c4); color: #fff; border-color: transparent; display: flex; flex-direction: column; justify-content: flex-end; min-height: 18rem; }
.pilier--vedette h3 { color: #fff; font-size: 1.75rem; line-height: 2.25rem; }
@media (min-width: 62rem) { .pilier--vedette h3 { font-size: 2.25rem; line-height: 2.75rem; } }
.pilier--vedette p { color: #d9ddff; font-size: 1.0625rem; line-height: 1.75rem; max-width: 30rem; }
.pilier--vedette .pilier__tete { position: absolute; top: 2rem; left: 2rem; right: 2rem; }
.pilier--vedette .picto { width: 4rem; height: 4rem; padding: 1rem; background: rgba(255, 255, 255, 0.12); color: #fff; }
.pilier--vedette::after { content: ""; position: absolute; right: -4rem; top: -4rem; width: 22rem; height: 22rem; opacity: 0.35; pointer-events: none;
  background-image: radial-gradient(circle, #fff 1.5px, transparent 2px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); mask-image: radial-gradient(circle, #000 30%, transparent 70%); }

/* Halo qui suit la souris sur les cartes */
.tuile, .pilier, .membre, .chiffre, .carte { --hx: 50%; --hy: 50%; }
.tuile::before, .pilier:not(.pilier--vedette)::before, .membre::before, .chiffre::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(260px circle at var(--hx) var(--hy), rgba(111, 124, 224, 0.16), transparent 70%); }
.tuile:hover::before, .pilier:hover::before, .membre:hover::before, .chiffre:hover::before { opacity: 1; }
.pilier, .membre, .chiffre { position: relative; }

/* ---------- Conviction : les mots s'allument au défilement ---------- */
.conviction { background: #10175a; color: #fff; padding: 6rem 0; position: relative; overflow: hidden; }
@media (min-width: 48rem) { .conviction { padding: 9rem 0; } }
.conviction::before { content: ""; position: absolute; inset: 0; opacity: 0.25; background: radial-gradient(800px 400px at 15% 0%, #3341c4, transparent 70%), radial-gradient(700px 400px at 100% 100%, #2b38a8, transparent 70%); }
.conviction .conteneur { position: relative; }
.conviction .surtitre { color: #9aa8ff; }
.conviction__texte { font-size: 2rem; line-height: 2.6rem; font-weight: 700; letter-spacing: -0.015em; margin: 0; max-width: 62rem; }
@media (min-width: 48rem) { .conviction__texte { font-size: 3rem; line-height: 3.75rem; } }
.conviction__texte .mot-lu { opacity: 0.22; transition: opacity 0.35s ease, color 0.35s ease; }
.conviction__texte .mot-lu.lu { opacity: 1; }
.conviction__texte .mot-lu.fort.lu { color: #9aa8ff; }

/* ---------- Frise du calendrier, remplie au défilement ---------- */
.frise { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; position: relative; --avance: 0; }
@media (min-width: 48rem) { .frise { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.frise::before, .frise::after { content: ""; position: absolute; height: 3px; top: 1.6rem; left: 1.75rem; right: calc(33.33% - 1.75rem); background: var(--bleu-clair); }
.frise::after { background: var(--bleu); transform-origin: left; transform: scaleX(var(--avance)); }
@media (max-width: 47.99rem) { .frise::before, .frise::after { left: 1.6rem; right: auto; top: 1.75rem; bottom: 1.75rem; width: 3px; height: auto; } .frise::after { transform-origin: top; transform: scaleY(var(--avance)); } .frise__etape { padding-left: 4.5rem; } .frise__num { position: absolute; left: 0; top: 0; } }
.frise__etape { position: relative; z-index: 1; }
.frise__num { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--fond); border: 3px solid var(--bleu-clair); color: var(--bleu); font-weight: 700; font-size: 1.25rem; margin-bottom: 1.25rem; transition: background 0.4s, color 0.4s, border-color 0.4s, transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
.frise__etape.atteinte .frise__num { background: var(--bleu); color: #fff; border-color: var(--bleu); transform: scale(1.08); box-shadow: 0 0 0 6px var(--bleu-clair); }
.frise__quand { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; color: var(--texte-mention); margin: 0 0 0.25rem; letter-spacing: 0.02em; }
.frise__etape h3 { font-size: 1.375rem; line-height: 1.875rem; margin-bottom: 0.5rem; }
.frise__etape p:last-child { margin: 0; color: var(--texte); }

/* ---------- Bouton retour en haut, avec la progression de lecture ---------- */
.haut-de-page { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 0; cursor: pointer; background: var(--fond); color: var(--bleu); box-shadow: 0 8px 24px -8px rgba(0, 0, 30, 0.35); display: grid; place-items: center; opacity: 0; transform: translateY(1rem) scale(0.9); pointer-events: none; transition: opacity 0.3s, transform 0.3s; }
.haut-de-page.visible { opacity: 1; transform: none; pointer-events: auto; }
.haut-de-page svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.haut-de-page circle { fill: none; stroke-width: 3; }
.haut-de-page .piste { stroke: var(--bleu-clair); }
.haut-de-page .avance { stroke: var(--bleu); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--lu, 0)); }
.haut-de-page span { font-size: 1.25rem; line-height: 1; font-weight: 700; }

/* ---------- Pages intérieures : bandeau de titre ---------- */
.titre { position: relative; background: var(--bleu-pale); border-bottom: 1px solid var(--bordure); padding-bottom: 2.5rem; margin-bottom: 3rem; overflow: hidden; }
.titre::after { content: ""; position: absolute; right: -2rem; top: -2rem; bottom: -2rem; width: 45%; pointer-events: none; opacity: 0.8;
  background-image: radial-gradient(circle, var(--bleu-moyen) 2px, transparent 2.5px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); }
.titre .conteneur { position: relative; z-index: 1; }
.titre__infos { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.875rem; color: var(--texte-mention); margin-top: 1rem; }
.titre__infos .titre__date { margin: 0; }

/* ---------- Accordéons fluides (navigateurs récents) ---------- */
:root { interpolate-size: allow-keywords; }
.question::details-content { block-size: 0; overflow: hidden; transition: block-size 0.35s ease, content-visibility 0.35s allow-discrete; }
.question[open]::details-content { block-size: auto; }

@media (prefers-reduced-motion: no-preference) {
  /* Transitions entre les pages */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 0.25s ease-in both page-sort; }
  ::view-transition-new(root) { animation: 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both page-entre; }
  @keyframes page-sort { to { opacity: 0; transform: translateY(-8px); } }
  @keyframes page-entre { from { opacity: 0; transform: translateY(12px); } }
  .entete { view-transition-name: entete; }

  .defilant__piste { animation: defile 38s linear infinite; }
  .defilant:hover .defilant__piste { animation-play-state: paused; }
  @keyframes defile { to { transform: translateX(-50%); } }

  .carte__lien { animation: flux 1.6s linear infinite; }
  @keyframes flux { to { stroke-dashoffset: -30; } }

  .js .ouverture__chiffres li { opacity: 0; transform: translateY(20px); animation: monte 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
  .js .ouverture__chiffres li:nth-child(1) { animation-delay: 0.9s; }
  .js .ouverture__chiffres li:nth-child(2) { animation-delay: 1s; }
  .js .ouverture__chiffres li:nth-child(3) { animation-delay: 1.1s; }
  .js .ouverture__chiffres li:nth-child(4) { animation-delay: 1.2s; }
  @keyframes monte { to { opacity: 1; transform: none; } }

  .js .titre h1, .js .titre .titre__chapo, .js .titre .surtitre, .js .titre__infos { animation: monte 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .js .titre .surtitre { animation-delay: 0.05s; }
  .js .titre h1 { animation-delay: 0.12s; }
  .js .titre .titre__chapo { animation-delay: 0.22s; }
  .js .titre__infos { animation-delay: 0.3s; }

  .tuile, .membre { transform-style: preserve-3d; }
  .js .incline { transition: transform 0.15s ease-out, box-shadow 0.35s; }
}
@keyframes vague { 0%, 14%, 100% { fill: var(--pt-fond); } 6% { fill: var(--pt-vague); } }
html { scroll-padding-top: 9rem; }

/* Carte par anneaux : une animation par anneau de distance */
.carte__bande { fill: var(--pt-fond); }
.carte__regions { fill: var(--bleu); }
.ouverture--bleue .carte__regions { fill: #9aa8ff; }
@media (prefers-reduced-motion: no-preference) {
  .js .carte-points .carte__bande, .js .carte-points .carte__regions { opacity: 0; }
  .js .carte-points.anime .carte__regions { animation: groupe-entre 0.9s ease forwards; animation-delay: 0.15s; }
  .js .carte-points.anime .carte__bande { animation: groupe-entre 0.7s ease forwards, vague 7s ease-in-out infinite; animation-delay: calc(var(--b) * 110ms + 350ms), calc(var(--b) * 170ms + 2600ms); }
  @keyframes groupe-entre { from { opacity: 0; } to { opacity: 1; } }
}
.ouverture--bleue .carte-points { --pt-fond: rgba(255, 255, 255, 0.16); --pt-vague: rgba(255, 255, 255, 0.75); }
.ouverture--bleue .carte__regions { fill: #ffffff; filter: drop-shadow(0 0 6px rgba(170, 185, 255, 0.9)); }
.ouverture--bleue .carte__coeur { fill: #1f2c8f; stroke: #fff; stroke-width: 4; }
.ouverture__lumiere { background: radial-gradient(circle, rgba(140, 155, 255, 0.22), transparent 60%); }
.carte__lien { stroke: #ffffff; stroke-width: 3.5; opacity: 0.7; }
@media (min-width: 62rem) { .sommaire { top: 8.5rem; } }
@media (max-width: 40rem) { .carte-france__etiquette--idf { transform: translate(-30%, -175%); } }

/* ---------- Logo France 2030 : intégration ---------- */
/* En-tête : le logo à côté du bloc-marque, séparé par un filet */
.entete__f2030 { display: flex; align-items: center; padding-left: 1.25rem; border-left: 1px solid var(--bordure); align-self: stretch; }
.entete__f2030 img { display: block; height: 4.25rem; width: auto; transition: height 0.3s ease, transform 0.3s ease; }
.entete__f2030:hover img { transform: scale(1.05); }
.entete.compact .entete__f2030 img { height: 2.75rem; }
@media (max-width: 62rem) { .entete__f2030 { padding-left: 0.75rem; } .entete__f2030 img { height: 3rem; } }
@media (max-width: 26rem) { .entete__f2030 img { height: 2.5rem; } .bloc-marque__texte { display: none; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .entete__f2030 img, :root:not([data-theme="light"]) .pied__soutien .logo-f2030 { background: #fff; border-radius: 50%; } }

/* Ouverture : étiquette de soutien, blanche, cliquable */
.label-f2030 { display: inline-flex; align-items: center; gap: 1rem; margin-bottom: 2rem; padding: 0.5rem 1.5rem 0.5rem 0.5rem; background: #fff; color: #161616; text-decoration: none; border-radius: 0.5rem; box-shadow: 0 18px 40px -18px rgba(0, 0, 30, 0.7); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s; }
.label-f2030:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -18px rgba(0, 0, 30, 0.8); color: #161616; }
.label-f2030 img { display: block; width: 4rem; height: 4rem; flex: none; }
.label-f2030__texte { display: block; font-size: 0.875rem; line-height: 1.3rem; font-weight: 500; padding-left: 1rem; border-left: 1px solid #dddddd; }
.label-f2030__sur { display: block; font-size: 0.75rem; line-height: 1.1rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #1f2c8f; margin-bottom: 0.15rem; }
@media (max-width: 30rem) { .label-f2030 { padding-right: 1rem; gap: 0.75rem; } .label-f2030 img { width: 3.25rem; height: 3.25rem; } .label-f2030__texte { font-size: 0.8125rem; padding-left: 0.75rem; } }
@media (prefers-reduced-motion: no-preference) {
  .js .label-f2030 img { animation: f2030-entre 1.1s cubic-bezier(0.3, 1.4, 0.5, 1) 0.35s both; }
}

/* Encart de soutien en bas d'accueil et page France 2030 : logo net, sans cadre rond ajouté */
.soutien .logo-f2030, .encart--logo .logo-f2030 { border-radius: 0; background: transparent; width: 6rem; height: 6rem; }
.soutien { background: var(--fond); border: 1px solid var(--bordure); border-left: 4px solid var(--bleu); padding: 1.5rem 2rem; }

/* Pied de page : « Avec le soutien de » */
.pied__soutien { gap: 2rem; padding: 1.5rem 0; }
.pied__soutien-logo { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; flex: none; }
.pied__soutien-logo span { font-size: 0.75rem; line-height: 1rem; color: var(--texte-mention); white-space: nowrap; }
.pied__soutien .logo-f2030 { width: 5.5rem; height: 5.5rem; }
@media (max-width: 36rem) { .pied__soutien { flex-direction: column; align-items: flex-start; } }
.titre__visuel { display: none; }
@media (min-width: 62rem) {
  .titre--visuel .titre__visuel { display: block; position: absolute; right: 1.5rem; top: 50%; translate: 0 -50%; width: 13rem; height: 13rem; padding: 1rem; background: #fff; border-radius: 50%; box-shadow: 0 24px 60px -24px rgba(31, 44, 143, 0.45); z-index: 2; }
  .titre--visuel h1, .titre--visuel .titre__chapo { max-width: 44rem; }
}
@media (prefers-reduced-motion: no-preference) { .js .titre__visuel { animation: f2030-entre 1.1s cubic-bezier(0.3, 1.4, 0.5, 1) 0.2s both; } }
@media (max-width: 30rem) { .label-f2030__texte br { display: none; } }
h1, h2, .conviction__texte { text-wrap: balance; }

/* Glossaire */
.glossaire { margin: 0 0 2rem; border-top: 1px solid var(--bordure); }
.glossaire dt { font-weight: 700; font-size: 1.125rem; line-height: 1.75rem; color: var(--bleu); padding-top: 1.25rem; scroll-margin-top: 9rem; }
.glossaire dd { margin: 0.25rem 0 0; padding-bottom: 1.25rem; border-bottom: 1px solid var(--bordure); }
.glossaire dt:target { background: var(--bleu-pale); box-shadow: -1rem 0 0 var(--bleu-pale), 1rem 0 0 var(--bleu-pale); }

/* ---------- Vente : offres de NIKITA ---------- */
.lien-rapide--action { background: var(--bleu); color: #fff !important; border-radius: 0.25rem; }
.lien-rapide--action:hover { background: var(--bleu-survol) !important; }
.navigation__action { margin: 0.75rem 0; }
.section--action { background: linear-gradient(180deg, var(--bleu-pale), var(--fond)); border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
.encart--action { background: var(--bleu-pale); border-left-color: var(--bleu); }
.encart--action .bouton { margin-top: 0.25rem; }
.offres { list-style: none; margin: 0 0 4rem; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .offres { grid-template-columns: repeat(2, 1fr); } }
.offre { position: relative; display: flex; flex-direction: column; background: var(--fond); border: 1px solid var(--bordure); border-top: 4px solid var(--bleu); padding: 2rem; }
.offre h3 { font-size: 1.5rem; line-height: 2rem; margin-bottom: 0.75rem; }
.offre > p { margin-bottom: 1rem; }
.offre__pour { font-size: 0.75rem !important; line-height: 1.25rem; font-weight: 700; text-transform: uppercase; color: var(--bleu); margin-bottom: 0.75rem !important; letter-spacing: 0.02em; }
.offre__points { margin: 0 0 1.75rem; padding-left: 1.25rem; font-size: 0.9375rem; }
.offre__points li { margin-bottom: 0.4rem; }
.offre__points li::marker { color: var(--bleu); }
.offre .bouton { margin-top: auto; align-self: flex-start; }
.offre--vedette { background: linear-gradient(140deg, #141d66, #1f2c8f 60%, #3341c4); color: #fff; border-color: transparent; border-top-color: #9aa8ff; }
.offre--vedette h3, .offre--vedette .offre__pour { color: #fff; }
.offre--vedette .offre__points li::marker { color: #9aa8ff; }
@media (prefers-reduced-motion: no-preference) {
  .offre { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s; }
  .offre:hover { transform: translateY(-5px); box-shadow: 0 16px 32px -16px rgba(31, 44, 143, 0.35); }
}

/* =====================================================================
   Version 3 : graphiques, menu déroulant, relief, aides à la navigation
   ===================================================================== */

/* ---------- Graphiques du constat ---------- */
.chiffres--graphes .chiffre { display: flex; flex-direction: column; }
.chiffres--graphes .chiffre__source { margin-top: auto; padding-top: 1rem; }
.barres { display: grid; gap: 0.6rem; margin: 0.25rem 0 0.5rem; }
.barres__ligne { display: grid; grid-template-columns: 7.5rem 1fr 2.75rem; align-items: center; gap: 0.6rem; font-size: 0.8125rem; line-height: 1.2rem; color: var(--texte-mention); }
.barres__ligne i { display: block; height: 0.75rem; background: var(--bleu-clair); position: relative; overflow: hidden; }
.barres__ligne i::after { content: ""; position: absolute; inset: 0; width: calc(var(--v) * 1%); background: var(--bleu-moyen); transform-origin: left; }
.barres__ligne--fort i::after { background: var(--bleu); }
.barres__ligne b { font-size: 0.875rem; color: var(--texte); text-align: right; }
.barres__ligne--fort b, .barres__ligne--fort span { color: var(--bleu); font-weight: 700; }
.anneau { width: 9rem; height: 9rem; margin: 0.25rem auto 0.5rem; display: block; transform: rotate(-90deg); }
.anneau circle { fill: none; stroke-width: 12; }
.anneau__piste { stroke: var(--bleu-clair); }
.anneau__valeur { stroke: var(--bleu); stroke-linecap: round; stroke-dasharray: var(--v) 100; }
.anneau text { transform: rotate(90deg); transform-origin: 60px 60px; fill: var(--texte); }
.anneau__texte { font-size: 22px; font-weight: 700; fill: var(--bleu) !important; }
.anneau__legende { font-size: 10px; fill: var(--texte-mention) !important; }
.chiffre--anneau .chiffre__valeur { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .barres__ligne i::after { transform: scaleX(0); transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s; }
  .js .barres__ligne + .barres__ligne i::after { transition-delay: 0.6s; }
  .js .visible .barres__ligne i::after { transform: none; }
  .js .anneau__valeur { stroke-dasharray: 0 100; transition: stroke-dasharray 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s; }
  .js .visible .anneau__valeur { stroke-dasharray: var(--v) 100; }
}

/* ---------- Réseau animé de la carte vedette ---------- */
.reseau { position: absolute; right: -1rem; top: 0; width: 70%; height: auto; max-width: 30rem; opacity: 0.9; pointer-events: none; }
.reseau__liens path { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 2; stroke-dasharray: 5 7; }
.reseau__noeuds circle { fill: #fff; }
.reseau__noeuds circle:first-child { fill: #9aa8ff; }
.pilier--vedette::after { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .reseau__liens path { animation: flux 2s linear infinite; }
  .reseau__noeuds circle { transform-box: fill-box; transform-origin: center; animation: battement 2.8s ease-in-out infinite; }
  .reseau__noeuds circle:nth-child(2n) { animation-delay: 0.7s; }
  .reseau__noeuds circle:nth-child(3n) { animation-delay: 1.4s; }
  @keyframes battement { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.75; } }
}
@media (max-width: 62rem) { .reseau { width: 85%; opacity: 0.5; } }

/* ---------- Menu déroulant « Se former à l'IA » ---------- */
.navigation > .conteneur > ul > li { position: static; }
.nav-deroulant__bouton { position: relative; display: flex; align-items: center; gap: 0.4rem; padding: 1rem; font: inherit; font-size: 0.875rem; line-height: 1.5rem; font-weight: 500; color: var(--texte); background: none; border: 0; cursor: pointer; }
.nav-deroulant__bouton::after { content: ""; width: 0.45rem; height: 0.45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-25%) rotate(45deg); transition: transform 0.25s; }
.nav-deroulant__bouton[aria-expanded="true"] { color: var(--bleu); background: var(--bleu-pale); }
.nav-deroulant__bouton[aria-expanded="true"]::after { transform: translateY(15%) rotate(-135deg); }
.nav-deroulant__bouton[aria-current] { color: var(--bleu); }
.nav-deroulant__bouton[aria-current]::before { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 0; height: 2px; background: var(--bleu); }
.nav-deroulant__bouton:hover { background: var(--fond-gris); }
.menu-panneau { display: none; }
.js .menu-panneau.ouvert { display: block; }
html:not(.js) .nav-deroulant:focus-within .menu-panneau { display: block; }
@media (min-width: 62.01rem) {
  .navigation { position: relative; }
  .menu-panneau { position: absolute; left: 0; right: 0; top: 100%; background: var(--fond); border-top: 1px solid var(--bordure); box-shadow: 0 24px 40px -20px rgba(0, 0, 30, 0.35); z-index: 25; }
  .menu-panneau__grille { display: grid; grid-template-columns: 15rem 1fr 15rem; gap: 2.5rem; padding-top: 2rem; padding-bottom: 2.25rem; }
}
.menu-panneau__sur { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--bleu); margin-bottom: 0.5rem; letter-spacing: 0.02em; }
.menu-panneau__intro p:not(.menu-panneau__sur), .menu-panneau__action p:not(.menu-panneau__sur) { font-size: 0.875rem; line-height: 1.4rem; color: var(--texte-mention); margin-bottom: 1rem; }
.menu-panneau__intro .lien { font-size: 0.875rem; line-height: 1.9rem; }
.menu-panneau__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.25rem 1.5rem; }
.menu-panneau__liste a { display: block; padding: 0.75rem 0.75rem 0.75rem 1rem; border-left: 2px solid var(--bordure); text-decoration: none; transition: border-color 0.2s, background 0.2s; }
.menu-panneau__liste a::after { display: none; }
.menu-panneau__liste a:hover, .menu-panneau__liste a[aria-current] { border-left-color: var(--bleu); background: var(--bleu-pale); }
.menu-panneau__titre { display: block; font-weight: 700; color: var(--bleu); font-size: 0.9375rem; line-height: 1.35rem; }
.menu-panneau__texte { display: block; font-size: 0.8125rem; color: var(--texte-mention); margin-top: 0.1rem; }
.menu-panneau__action { background: var(--bleu-pale); padding: 1.25rem; border-left: 3px solid var(--bleu); align-self: start; }
@media (max-width: 62rem) {
  .nav-deroulant__bouton { width: 100%; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--bordure); font-size: 1rem; }
  .nav-deroulant__bouton[aria-current]::before { left: -1rem; right: auto; top: 0.75rem; bottom: 0.75rem; width: 2px; height: auto; }
  .menu-panneau__grille { padding: 0.75rem 0 1rem; display: grid; gap: 1rem; }
  .menu-panneau__intro, .menu-panneau__action { display: none; }
  .menu-panneau__liste { grid-template-columns: 1fr; }
  .menu-panneau__liste a { padding: 0.6rem 0.75rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .menu-panneau.ouvert .menu-panneau__grille > * { animation: monte 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .js .menu-panneau.ouvert .menu-panneau__liste { animation-delay: 0.06s; }
  .js .menu-panneau.ouvert .menu-panneau__action { animation-delay: 0.12s; }
}

/* ---------- Relief de l'ouverture et mot-clé souligné ---------- */
.carte-france { transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.carte-france__etiquette { will-change: translate; }
.mot-cle { position: relative; display: inline-block; }
.mot-cle::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.02em; height: 0.12em; background: linear-gradient(90deg, #9aa8ff, #ffffff); border-radius: 2px; transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .js .mot-cle::after { transform: scaleX(0); animation: souligne 0.9s cubic-bezier(0.6, 0, 0.3, 1) 1.3s forwards; }
  @keyframes souligne { to { transform: scaleX(1); } }
}

/* ---------- Barre « Former vos équipes » sur mobile ---------- */
.cta-mobile { display: none; }
@media (max-width: 62rem) {
  .cta-mobile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: fixed; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; z-index: 45; padding: 0.75rem 0.75rem 0.75rem 1.1rem; background: var(--bleu); color: #fff; text-decoration: none; border-radius: 0.5rem; box-shadow: 0 16px 36px -12px rgba(0, 0, 40, 0.6); transform: translateY(150%); transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .cta-mobile.visible { transform: none; }
  .cta-mobile strong { display: block; font-size: 0.9375rem; }
  .cta-mobile span { display: block; font-size: 0.75rem; color: #c9cff7; }
  .cta-mobile em { font-style: normal; background: #fff; color: var(--bleu); padding: 0.4rem 0.8rem; border-radius: 0.3rem; font-weight: 600; font-size: 0.875rem; white-space: nowrap; }
  body.avec-cta .haut-de-page { bottom: 5.5rem; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cta-mobile { background: #2b38a8; } }

/* ---------- Liens de section copiables ---------- */
.prose h2 { position: relative; }
.ancre-titre { margin-left: 0.5rem; color: var(--bleu-moyen); text-decoration: none; font-weight: 400; opacity: 0; transition: opacity 0.2s; }
.prose h2:hover .ancre-titre, .ancre-titre:focus-visible { opacity: 1; }
.notification { position: fixed; left: 50%; bottom: 1.5rem; z-index: 60; transform: translate(-50%, 1rem); opacity: 0; background: var(--texte); color: var(--fond); padding: 0.6rem 1rem; border-radius: 0.4rem; font-size: 0.875rem; transition: opacity 0.25s, transform 0.25s; pointer-events: none; }
.notification.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Filtre de la FAQ ---------- */
.filtre-faq { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin: 0 0 2.5rem; padding: 1.25rem 1.5rem; background: var(--bleu-pale); border-left: 4px solid var(--bleu); }
.filtre-faq label { font-weight: 700; }
.filtre-faq input { flex: 1; min-width: 14rem; font: inherit; padding: 0.5rem 1rem; background: var(--fond); color: var(--texte); border: 0; box-shadow: inset 0 -2px 0 0 var(--bleu); border-radius: 0.25rem 0.25rem 0 0; }
.filtre-faq output { font-size: 0.875rem; color: var(--texte-mention); }
.question.cachee { display: none; }
.questions-groupe.vide { display: none; }
/* Le panneau n'hérite pas du style des liens du menu */
.navigation .menu-panneau ul.menu-panneau__liste { display: grid; flex-direction: unset; padding: 0; margin: 0; }
@media (min-width: 62.01rem) { .navigation .menu-panneau ul.menu-panneau__liste { grid-template-columns: repeat(2, 1fr); gap: 0.25rem 1.5rem; } }
.navigation .menu-panneau a { font-size: inherit; font-weight: inherit; }
.navigation .menu-panneau a::after, .navigation .menu-panneau a::before { display: none !important; }
.navigation .menu-panneau__liste a { display: block; padding: 0.75rem 0.75rem 0.75rem 1rem; color: var(--texte); border-bottom: 0; }
.navigation .menu-panneau .lien { display: inline; padding: 0; color: var(--bleu); text-decoration: underline; font-size: 0.875rem; }
.navigation .menu-panneau .bouton { display: inline-flex; padding: 0.4rem 0.9rem; color: #fff; background: var(--bleu); border: 0; font-size: 0.875rem; }
.navigation .menu-panneau .bouton:hover { background: var(--bleu-survol); }
@media (max-width: 62rem) { .navigation .menu-panneau__liste a { padding: 0.6rem 0.75rem; border-left: 2px solid var(--bordure); border-bottom: 0; font-size: 0.9375rem; } }
.chiffre--anneau .anneau { order: -1; margin: 0 0 1rem; width: 7.5rem; height: 7.5rem; }