/* ================================================================
   pont-rd931 — Feuille de style du front
   ----------------------------------------------------------------
   Architecture à 2 étages de tokens (design system) :
     1. PRIMITIFS  — échelles brutes (couleurs, espace 4pt, typo, etc.)
     2. SÉMANTIQUES — rôles qui référencent les primitifs (surface, texte…)
   Les COMPOSANTS n'utilisent QUE des tokens sémantiques : aucune valeur
   en dur. Pour modifier le thème, on touche les tokens, jamais les règles.
   DA : charte essonne.fr (bleu/vert) + Roboto — conservée.
   ================================================================ */

/* ================================================================
   1. TOKENS PRIMITIFS
   ================================================================ */
:root{
  /* — Couleurs : CHARTE GRAPHIQUE OFFICIELLE CD91 (DirCom, 08/2026) —
     Source unique des teintes du site. UN SEUL bleu, UN SEUL orange : toute
     autre valeur est soit une couleur de charte (survol, encadrés, pied de
     page), soit une dérivée documentée, soit un état fonctionnel. L'orange est
     réservé aux éléments GRAPHIQUES (pastilles, filets, puces, repères) :
     jamais de texte courant en orange, jamais d'aplat massif. — */
  --c-bleu:#164496;            /* principale (dominante) */
  --c-bleu-nuit:#152b51;       /* pied de page (charte) + aplats profonds + encre sur fonds charte */
  --c-bleu-nuit-fonce:#0d1c36; /* dérivée : survol/appui d'un aplat bleu nuit */
  --c-survol:#248eb2;          /* bouton au survol (charte) — 3,76:1 avec blanc : réservé
                                  aux textes « larges » WCAG (≥ 19px gras) et aux icônes */
  --c-orange:#ed7102;          /* secondaire : éléments graphiques SEULEMENT */
  --c-orange-fonce:#be5a02;    /* dérivée charte (orange à 80 %) : SEULE variante
                                  d'orange qui porte du texte BLANC (4,51:1 = AA
                                  texte courant). L'orange charte plafonne à 3,02. */
  --c-encadre-1:#f1f4f9;       /* encadrés type 1 : fond clair (charte) */
  --c-encadre-2:#ffdbba;       /* encadrés type 2 : fond pêche (charte) */
  --c-encadre-2-bord:#f2c391;  /* dérivée : filet d'un encadré pêche */

  /* — États fonctionnels (signalétique, hors palette de marque) — */
  --c-rouge:#c5392f;           /* impact critique / erreurs (4,9:1 sur blanc, AA) */
  --c-rouge-50:#fbeae9;
  --c-vert-ok:#0c5c2f;         /* confirmations de formulaire (7,4:1 sur son fond) */
  --c-vert-ok-50:#edf7ed;

  /* — Encres neutres + fonds — */
  --c-ink-900:#1a1a1a;
  --c-ink-800:#2d3340;
  --c-ink-700:#3a4150;
  --c-ink-600:#4a505c;
  --c-ink-500:#5f6470;
  --c-white:#ffffff;
  --c-grey-100:#eaeef5;        /* canvas de page (les cartes blanches ressortent) */
  --c-border:#e1e5ee;

  /* — Espacement : échelle 4pt complète (pas de trou) — */
  --space-1:.25rem;   /*  4px */
  --space-2:.5rem;    /*  8px */
  --space-3:.75rem;   /* 12px */
  --space-4:1rem;     /* 16px */
  --space-5:1.25rem;  /* 20px */
  --space-6:1.5rem;   /* 24px */
  --space-7:1.75rem;  /* 28px */
  --space-8:2rem;     /* 32px */
  --space-10:2.5rem;  /* 40px */
  --space-12:3rem;    /* 48px */
  --space-16:4rem;    /* 64px */
  --space-20:5rem;    /* 80px */

  /* — Typographie (self-host, cf. assets/css/fonts.css) — */
  /* Police UNIQUE Roboto, comme essonne.fr (--typo-1) : corps ET titres.
     (Ranade retiré pour la fidélité ; les @font-face Ranade ne sont plus chargés.) */
  --font-texte:'Roboto',system-ui,-apple-system,Arial,sans-serif; /* corps de texte */
  --font-titre:'Roboto',system-ui,-apple-system,Arial,sans-serif; /* titres h1–h4 */
  /* Échelle typographique de la CHARTE CD91 (Roboto partout) :
     titre de rubrique 60 extra-gras · titre d'article 55 gras · sous-titre 34
     gras · chapô 22 gras · courant 19 regular. Les grands corps sont FLUIDES
     (clamp) : jamais 60px brut sur petit écran. */
  --text-2xs:.75rem;    /* 12px — helper */
  --text-xs:.8125rem;   /* 13px — micro-libellés (pastilles, tags) */
  --text-sm:.9375rem;   /* 15px */
  --text-base:1.1875rem; /* 19px — texte courant (charte, Roboto regular) */
  --text-md:1.375rem;   /* 22px — chapô (charte, Roboto gras) */
  --text-marque-sm:1.1875rem; /* 19px — marque en petit écran : ≥ 14pt gras = palier
                                 « grand texte » WCAG (seuil de contraste 3:1) */
  --text-chiffre-unite:1.25rem; /* 20px GRAS = « grand texte » WCAG (seuil 3:1) :
                           l'unité ORANGE des chiffres clés (3,78:1 sur la carte,
                           dont le voile blanc 7 % éclaircit le fond nuit) reste
                           conforme SANS renoncer à l'accent charte. En rem fixe,
                           pas en em : elle ne doit jamais repasser sous 18,66px. */
  --text-btn:1.1875rem; /* 19px gras = « grand texte » WCAG → le survol #248eb2
                           (3,76:1 avec blanc) reste conforme AA (seuil 3:1) */
  --text-lg:1.375rem;   /* 22px — h3 / nav */
  --text-xl:1.75rem;    /* 28px — intertitres compacts (carte hero) */
  --text-2xl:2.25rem;   /* 36px */
  --text-3xl:3rem;      /* 48px — chiffres clés */
  --text-rubrique:clamp(2.375rem,5.5vw,3.75rem); /* 38→60px — titre de rubrique (charte, extra-gras) */
  --text-h1:clamp(2.25rem,5vw,3.4375rem);  /* 36→55px — titre d'article (charte, gras) */
  --text-h2:clamp(1.625rem,2.8vw,2.125rem); /* 26→34px — sous-titre (charte, gras) */
  --text-hero:clamp(2rem,3vw,2.7rem); /* H1 de la carte hero (carte étroite en desktop) */
  --leading-tight:1.15;
  --leading-snug:1.3;
  --leading-normal:1.5;
  --leading-relaxed:1.6;
  --leading-loose:1.65;
  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-bold:700;
  --weight-xbold:800;   /* extra-gras charte (titres de rubrique) */
  --weight-black:900;
  --tracking-tight:-.02em;
  --tracking-snug:-.01em;
  --tracking-wide:.04em;
  --tracking-caps:.05em;

  /* — Rayons — */
  --radius-sm:10px;
  --radius-md:20px;
  --radius-hero:30px;   /* arrondi grande image hero (charte essonne.fr : 30px) */
  --radius-lg:40px;
  --radius-pill:99px;

  /* — Ombres : douces, CENTRÉES, sans offset directionnel (charte essonne.fr).
     Jamais de glow coloré : essonne n'utilise que des ombres neutres ou aucune. — */
  --shadow-sm:0 0 14px rgba(0,0,0,.06);
  --shadow-md:0 0 20px rgba(0,0,0,.12);
  --shadow-lg:0 0 50px rgba(0,0,0,.16);
  --shadow-header:0 2px 10px rgba(0,0,0,.10);

  /* — Layout — */
  --container:1280px;   /* = essonne.fr (conteneur 1280px → contenu 1200px) : le même
                           conteneur pour header, hero, contenu, footer → marges gauche/
                           droite identiques sur TOUTES les pages, calquées sur essonne. */
  --gutter:clamp(1.25rem,4vw,2.5rem);  /* padding latéral max 40px = essonne.fr. */
  /* Colonne de lecture CONSTANTE (en rem, pas en ch) : un ch dépend du corps,
     donc 64ch donnait une largeur différente selon la taille (chapô 20px vs
     corps 18px) et un bord droit qui « sautait ». Une valeur fixe aligne le
     bord droit de TOUS les paragraphes de texte (chapô, prose, riches). */
  /* Le contenu (texte comme cartes) occupe désormais toute la largeur du conteneur
     --container : marges uniformes garanties (choix validé « plus large et uniforme »).
     --measure n'est donc plus une largeur de colonne ; conservé pour cas ponctuels. */
  --measure:var(--container);
  --measure-narrow:34rem;/* ~544px — variante étroite (carte hero de l'accueil) */

  /* — Z-index (échelle sémantique) — */
  --z-header:60;
  /* 70 / 80 / 90 : voile, panneau et déclencheur de l'ancien « EN 1 CLIC »
     (retiré du bandeau le 07/08/2026) — paliers laissés libres dans l'échelle. */
  --z-lightbox:100;     /* visionneuse photo : au-dessus de tout, header compris */

  /* — Motion — */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.45,.05,.55,.95); /* aller-retour doux : dérive du hero */
  --dur-1:.15s;
  --dur-2:.2s;
  --dur-3:.25s;
  --dur-4:.32s;         /* glissement du drawer */
}

/* ================================================================
   2. TOKENS SÉMANTIQUES (rôles)
   ================================================================ */
:root{
  /* — Marque (charte CD91 : bleu dominant) — */
  --color-brand:var(--c-bleu);
  --color-titre:var(--color-brand);      /* h1-h4 : découplé de la marque pour être réglable seul */
  --color-brand-dark:var(--c-bleu-nuit); /* état foncé d'un aplat bleu (survols non-boutons) */
  --color-brand-night:var(--c-bleu-nuit);
  /* Accent = ORANGE charte, éléments graphiques seulement (2,9:1 sur blanc :
     jamais porteur de texte). Les textes autrefois « accent » sont en bleu. */
  --color-accent:var(--c-orange);
  --color-accent-ink:var(--c-bleu-nuit); /* encre lisible posée SUR une pastille orange (4,6:1) */
  /* Pastille orange PORTEUSE DE TEXTE (pastille du héros, badge « en cours »,
     repère de macro-phase) : fond assombri + encre blanche = 4,51:1. Demande
     CD91 du 14/08 (« texte blanc ») rendue conforme AA — le blanc sur l'orange
     charte ne vaut que 3,02:1, insuffisant hors « grand texte ». */
  --surface-accent-texte:var(--c-orange-fonce);
  --color-on-accent-texte:var(--c-white);
  --tracking-pastille:.08em; /* pastilles moins serrées (CD91 14/08) */
  --color-survol:var(--c-survol);        /* boutons au survol + repères interactifs (focus) */

  /* — Surfaces — */
  --color-bg:var(--c-grey-100);          /* canvas de page (cartes blanches ressortent) */
  --color-surface:var(--c-white);        /* cartes */
  --color-surface-alt:var(--c-encadre-1);/* zones teintées = encadré type 1 (charte) */
  --surface-warm:var(--c-encadre-2);     /* encadré type 2 (pêche, charte) : alertes douces, pastilles chaudes */
  --surface-warm-bord:var(--c-encadre-2-bord);
  --color-border:var(--c-border);

  /* — Texte — */
  --color-text:var(--c-ink-900);
  --color-lead:var(--c-ink-800);
  --color-text-body:var(--c-ink-700);
  --color-text-soft:var(--c-ink-600);
  --color-text-muted:var(--c-ink-500);
  --color-on-dark:var(--c-white);
  --color-header:var(--c-bleu);          /* bandeau d'en-tête : bleu principal (charte CD91) */
  --color-on-header:var(--c-white);      /* texte du bandeau (blanc, 9,1:1 — réglable : Pont RD931 > Couleurs) */
  --color-on-dark-soft:rgba(255,255,255,.92);
  --color-on-dark-muted:rgba(255,255,255,.72);
  /* — Pied de page (charte : #152B51 + accents graphiques orange) — 3 couleurs
     suffisent : les nuances (texte adouci, filets, barre basse, pilules du
     pager) se dérivent par color-mix dans les règles, jamais réglées à la main. — */
  --color-footer:var(--c-bleu-nuit);         /* fond : bleu nuit charte (blanc AA 14:1) */
  --color-on-footer:var(--c-white);          /* titres + texte fort */
  --color-footer-accent:var(--c-orange);     /* chevrons, liens, « Haut de page » (4,6:1 sur nuit) */

  /* — Sémantique « impact » : seul reste le CRITIQUE (rouge fonctionnel).
     Les niveaux faible/moyen/finitions ont été retirés du site (CR CD91
     06/07) ; leurs anciens rôles pointent sur les couleurs de charte. — */
  --impact-fort:var(--c-rouge);
  --impact-fort-soft:var(--c-rouge-50);
  --etat-ok:var(--c-vert-ok);            /* confirmation de formulaire */
  --etat-ok-soft:var(--c-vert-ok-50);

  /* — Surfaces unies « marque » (aplats, zéro dégradé) — */
  --surface-brand:var(--color-brand);          /* fond bleu plein des sections/titres de page */
  --surface-brand-soft:var(--c-encadre-1);     /* pastilles/encarts très clairs (encadré type 1) */
  --color-decor:var(--c-orange);               /* décor graphique : blocs décalés, pastilles, repères */
  --surface-brand-deep:var(--c-bleu-nuit);     /* fond bleu nuit (sections foncées) */
  --surface-contact:var(--c-bleu);             /* carte contact : bleu charte (blanc AA 9,1:1) */
  /* Entête de page (2e bloc sous le bandeau) : aplat BLEU charte, contenu blanc. */
  --surface-tete:var(--c-bleu);
  --color-on-tete:var(--c-white);
  --surface-tete-soft:rgba(255,255,255,.14);   /* pastille « PHASE n » sur l'aplat bleu */

  /* — Rythme — */
  --space-section:clamp(3rem,5vw,4.75rem); /* vertical de CHAQUE <section> */
  --space-block:clamp(1.75rem,3vw,2.5rem); /* titre -> contenu / entre blocs */
  --space-stack:var(--space-3);            /* entre paragraphes */

  /* — Système de CARTE (unifié : une seule source pour TOUTES les cartes) — */
  --card-bg:var(--color-surface);
  --card-border:1px solid var(--color-border);
  --card-radius:var(--radius-md);
  --card-shadow:var(--shadow-md);
  --card-pad:var(--space-7);     /* 28px — padding standard */
  --card-pad-sm:var(--space-5);  /* 20px — cartes compactes (statut) */
  --card-pad-lg:var(--space-8);  /* 32px — cartes généreuses (encart) */

  /* — Grilles / gaps (3 rôles clairs) — */
  --gap-grid:var(--space-8);     /* grilles de cartes (objectifs, impacts, chiffres, reportages, statut) */
  --gap-stack:var(--space-5);    /* listes empilées (phases, frise) */
  --gap-inline:var(--space-4);   /* rangées de pastilles (trafic, logos, légende) */

  /* — Cibles répétées (icône ronde, rythme des titres) — */
  --ico-size:52px;
  --ico-gap:var(--space-5);
  --h2-mb:var(--space-6);
  --h3-mb:var(--space-2);

  /* — Planning : accordéon 2 niveaux + frise de synthèse.
     4 couleurs de MACRO-PHASE (aucune sémantique « impact » : simple repérage
     visuel, redondant avec les pastilles numérotées et les libellés — les 4
     teintes sont TOUTES issues de la charte CD91). — */
  --plan-macro-1:var(--c-bleu);
  --plan-macro-2:var(--c-survol);
  --plan-macro-3:var(--c-bleu-nuit);
  --plan-macro-4:var(--c-orange-fonce); /* porte un chiffre BLANC → variante 4,51:1 */
  --plan-macro-1-soft:var(--c-encadre-1);
  --plan-macro-2-soft:var(--c-encadre-1);
  --plan-macro-3-soft:var(--c-encadre-1);
  --plan-macro-4-soft:var(--c-encadre-2);
  --plan-bar-h:14px;                    /* hauteur de la frise de synthèse */
  --plan-bar-gap:3px;                   /* filet entre segments de la frise */
  --plan-index:2.5rem;                  /* pastille numérotée de macro-phase (40px) */
  --plan-rail:2px;                      /* filet vertical reliant les sous-phases */
  --plan-sous-indent:var(--space-8);    /* retrait des sous-phases (niveau 2) */
  --plan-focus:3px;                     /* épaisseur du liseré de focus */
  --plan-bar-contour:var(--color-accent-ink); /* cerne du segment ORANGE de la frise :
                           l'orange fait 2,59:1 sur le canvas (< 3:1 non-texte,
                           RGAA 3.3) — le cerne bleu nuit (12,6:1) délimite le
                           segment quelle que soit la teinte. */
  --plan-bar-contour-w:1px;
  --plan-cta:var(--c-bleu);             /* pastille « Plus de détails » : bleu charte, AA avec blanc */
  --tap-min:44px;                       /* cible tactile minimale (WCAG 2.5.5) */

  /* — Bande d'accès conditionnel « Travaux à venir » (bleu nuit charte, AA avec
     blanc, distinct du bleu du bandeau ; aplat, zéro dégradé) — */
  --band-avenir:var(--c-bleu-nuit);
  --band-avenir-hover:var(--c-bleu-nuit-fonce);

  /* — Replis statiques (navigateurs sans color-mix) : valeurs PRÉ-CALCULÉES à
     partir des tokens ci-dessus. À recalculer si la charte bouge. — */
  --fallback-nav-suivant:#e3e6ea;            /* mix(bleu nuit 12 %, blanc) : pilule « suivant » */
  --fallback-survol-orange:rgba(237,113,2,.16); /* mix(orange 16 %, transparent) */
  --fallback-pulse:rgba(237,113,2,.55);      /* halo du repère « en cours » */
  --fallback-voile:rgba(9,17,31,.94);        /* voile de la visionneuse (nuit + noir) */
}

/* ================================================================
   3. RESET / BASE
   ================================================================ */
*{margin:0;padding:0;box-sizing:border-box}
/* overflow-x:clip = coupe le débordement horizontal PARASITE (largeur de la
   barre de défilement) provoqué par la couche fixe plein écran (.menu-overlay,
   inset:0) et par 100vw : ces éléments se dimensionnent sur le
   viewport de mise en page (innerWidth, gouttière de scrollbar INCLUSE), soit
   2–3 px de plus que la zone de contenu (clientWidth). `clip` (et non `hidden`)
   n'établit PAS de conteneur de défilement → le header position:sticky et le
   défilement vertical restent intacts. Le site n'a aucun contenu horizontal. */
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--font-texte);
  font-size:var(--text-base);
  line-height:var(--leading-relaxed);
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--color-brand)}
/* Ordinaux en exposant (« 19e siècle » -> 19ᵉ), posés au rendu par
   prd931_exposants(). line-height:0 = l'exposant ne DILATE PAS l'interligne du
   paragraphe qui le contient (sinon une ligne sur deux se décale). La taille
   reste en em : elle suit le corps du texte, y compris au zoom 200 %. */
sup{font-size:.72em;line-height:0;vertical-align:super}
:focus-visible{outline:3px solid var(--color-survol);outline-offset:2px;border-radius:3px}

/* ================================================================
   4. PRIMITIVES DE MISE EN PAGE + UTILITAIRES
   ================================================================ */
/* Conteneur : largeur + gouttière HORIZONTALE seulement (padding-inline).
   Le rythme VERTICAL vient de section{padding-block}. Les deux utilisent des
   propriétés différentes -> ils COMPOSENT sans conflit de spécificité, même
   sur un <section class="wrap"> (corrige le bug d'écrasement). */
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:var(--space-section)}
/* Décalage d'ancre sous le header COLLANT (une cible atterrit sous le header,
   pas dessous-masquée). Basé sur la hauteur RÉELLE du header publiée par le JS
   (--header-h, recalculée au resize : ~79px desktop, ~142px mobile) + une marge
   d'air. Repli codé (clamp) si le JS n'a pas encore mesuré / est absent. */
:root{--anchor-offset:max(clamp(96px,13vh,120px), calc(var(--header-h, 84px) + var(--space-6)))}
/* Ancres de section (recherche intelligente) + cibles de la frise Planning
   (.pl-macro, cibles des liens #pl-macro-*). */
section[id],h2[id],h3[id],.pl-macro[id],.hero-objs[id]{scroll-margin-top:var(--anchor-offset)}

/* Titre de RANG h2 à l'ASPECT d'un h3 : corrige les sauts de niveaux (RGAA
   9.1) sans toucher l'apparence — utilisé par la page d'attente. */
.titre-3{font-size:var(--text-lg);font-weight:var(--weight-bold);margin-bottom:var(--h3-mb)}

/* Utilitaires d'espacement (pilotés par tokens, jamais de marge inline) */
.u-mt-block{margin-top:var(--space-block)}
.prose{margin-top:var(--space-block);max-width:var(--measure);color:var(--color-text-body);line-height:var(--leading-relaxed)}

/* Modificateurs de couleur sémantiques (remplacent les style="color:…" inline) */
.is-positif{color:var(--color-brand)}

/* ================================================================
   5. TYPOGRAPHIE
   ================================================================ */
h1,h2,h3,h4{color:var(--color-titre);line-height:var(--leading-tight);font-weight:var(--weight-bold);text-wrap:balance}
h1{font-size:var(--text-h1);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight)}
h2{font-size:var(--text-h2);font-weight:var(--weight-bold);letter-spacing:var(--tracking-snug);margin-bottom:var(--h2-mb)}
h3{font-size:var(--text-lg);margin-bottom:var(--h3-mb)}
/* Titres en Roboto (var --font-titre) ; poids naturels : h1=900, h2–h4=700. */
h1,h2,h3,h4{font-family:var(--font-titre)}
.lead{font-size:var(--text-md);font-weight:var(--weight-bold);color:var(--color-lead);line-height:var(--leading-loose);max-width:var(--measure);text-wrap:pretty}
.lead + .lead{margin-top:var(--space-4)}
/* Bloc riche « chapô » (prd931_rich avec rôle) : colonne de lecture + corps +
   rythme HOMOGÈNES sur tous les paragraphes. Le 1er garde son rôle (.lead) ;
   les suivants reviennent au corps standard, dans la MÊME colonne (fini le
   2e paragraphe qui partait en pleine largeur, taille corps, sans marge). */
.rich-p{max-width:var(--measure)}
p.rich-p:not(.lead){font-size:var(--text-base);color:var(--color-text-body);line-height:var(--leading-relaxed)}
.rich-p + .rich-p{margin-top:var(--space-4)}
/* Bloc riche « corps » (ex. concertation) : tous les paragraphes MÊME taille (corps),
   pas de 1er paragraphe en « lead ». */
.rich-body p{font-size:var(--text-base);color:var(--color-text-body);line-height:var(--leading-relaxed);max-width:var(--measure)}
.rich-body p + p{margin-top:var(--space-4)}
.ph-body p + p,.imp p + p,.encart p + p{margin-top:var(--space-stack)}

/* ================================================================
   6. BOUTONS — UN SEUL composant (charte CD91), décliné par CONTEXTE.
   Forme : pill, UPPERCASE, 19px GRAS (= « grand texte » WCAG : le survol
   charte #248eb2, à 3,76:1 avec le blanc, reste conforme AA — seuil 3:1).
   Le contexte se règle par TOKENS LOCAUX (jamais de couleur en dur) :
     --btn-hover-bg     fond au survol (charte : --color-survol)
     --btn-hover-border bordure au survol (blanc sur les fonds foncés)
   Fond clair : .btn-bleu (plein, défaut) / .btn-ligne (contour, secondaire).
   Aplat foncé : .btn-blanc (plein blanc) / .head-next (contour clair).
   ⚠ Un contrôle dont le texte descend SOUS 19px gras ne doit PAS survoler en
   #248eb2 (le blanc n'y tient plus 4,5:1) : assombrir en bleu nuit à la place
   (cf. .head-phases ≤ 480px). */
.btn{
  --btn-hover-bg:var(--color-survol);
  --btn-hover-border:var(--color-survol);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-weight:var(--weight-bold);font-size:var(--text-btn);line-height:1.2;
  text-transform:uppercase;letter-spacing:var(--tracking-wide);text-decoration:none;
  min-height:60px;padding:.95em 1.6em;border-radius:var(--radius-pill);
  border:1px solid var(--color-brand);cursor:pointer;
  transition:transform var(--dur-1) var(--ease-out),background var(--dur-2),color var(--dur-2),border-color var(--dur-2),box-shadow var(--dur-2);
}
.btn:hover,.btn:focus-visible{background:var(--btn-hover-bg);border-color:var(--btn-hover-border);color:var(--color-on-dark);transform:translateY(-2px)}
.btn-bleu{background:var(--color-brand);color:var(--color-on-dark)}
.btn-ligne{background:transparent;color:var(--color-brand)}
.btn-blanc{background:var(--color-surface);color:var(--color-header);border-color:var(--color-surface);--btn-hover-border:var(--color-on-dark)}

/* ================================================================
   7. HEADER / NAV / BURGER
   ================================================================ */
/* Bandeau BLEU charte (blanc 9,1:1, RGAA) + LISERÉ ORANGE (élément graphique
   charte) : il sépare aussi le bandeau de l'entête de page, désormais du même bleu. */
header{background:var(--color-header);color:var(--color-on-header);position:sticky;top:0;z-index:var(--z-header);box-shadow:var(--shadow-header)}
/* Barre bleue : hauteur réelle essonne.fr (.header__inner min-height 80px desktop,
   65 tablette, 45 mobile) — adaptée au co-branding. */
.head-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);max-width:var(--container);margin-inline:auto;padding:var(--space-3) var(--gutter);min-height:clamp(58px,6vw,86px)}
/* Co-branding : identité projet (RD931) + logo maître d'ouvrage (Essonne).
   Le filet séparateur est un accent graphique ORANGE (charte, 3:1 sur le bleu). */
.head-left{display:flex;align-items:center;gap:var(--space-5);min-width:0}
.head-sep{width:2px;height:46px;background:var(--color-accent);flex-shrink:0;border-radius:var(--radius-pill)}
.head-moa{display:flex;align-items:center;flex-shrink:0}
/* Logo MOA cliquable (recette CD91 14/08) : cible tactile pleine hauteur,
   focus visible hérité de la règle globale, survol sobre (pas de couleur). */
.head-moa.est-lien{min-height:44px;border-radius:var(--radius-sm);transition:opacity var(--dur-2)}
.head-moa.est-lien:hover{opacity:.82}
.head-moa img{height:48px;width:auto;display:block}
.marque{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:var(--color-on-dark);min-height:44px}
.marque-txt strong{display:block;font-weight:var(--weight-black);font-size:var(--text-md);line-height:var(--leading-tight);color:var(--color-on-dark)}
.head-actions{display:flex;gap:var(--space-2);align-items:center;flex-shrink:0}

/* Deux accès PERMANENTS « Phase en cours » / « Prochaine phase » (décision client
   08/07/2026) : boutons compacts (cible tactile ≥ 44px), toujours visibles — la
   fenêtre des 15 jours ne pilote plus que la bande d'alerte .band-avenir.
   margin-left:auto : le groupe se colle aux actions (droite), la marque reste à gauche. */
.head-phases{display:flex;gap:var(--space-2);align-items:center;flex-shrink:0;margin-left:auto}
.head-phases .btn{min-height:48px;padding:.5em 1.1em;white-space:nowrap}
/* Variante contour sur le bleu du header (aplat, aucun dégradé). */
.head-next{background:transparent;color:var(--color-on-header);border-color:rgba(255,255,255,.55);border-color:color-mix(in srgb,var(--color-on-header) 55%,transparent);--btn-hover-border:var(--color-on-header)}

/* Tuiles de navigation (icône + libellé). Nées avec le panneau « EN 1 CLIC »
   (retiré du bandeau le 07/08/2026), elles servent aujourd'hui la grille de
   pages du MENU plein écran — d'où le préfixe .clic- conservé. */
.clic-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);text-align:center;text-decoration:none;min-height:104px;padding:var(--space-5) var(--space-3);border-radius:var(--radius-sm);background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-brand);transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2),border-color var(--dur-2)}
.clic-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--color-brand)}
.clic-tile[aria-current="page"]{box-shadow:inset 0 0 0 2px var(--color-brand);border-color:var(--color-brand)}
.clic-tile:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}
.clic-tile-ico{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:var(--surface-brand-soft);color:var(--color-brand)}
/* Glyphes PLEINS façon essonne : remplissage via token (currentColor), pas de trait. */
.clic-tile-ico svg{width:28px;height:28px;fill:currentColor;stroke:none}
.clic-tile:hover .clic-tile-ico{background:var(--color-brand);color:var(--color-surface)}
.clic-tile-lbl{font-size:var(--text-sm);font-weight:var(--weight-bold);line-height:var(--leading-tight)}

/* ================================================================
   Menu plein écran (burger façon essonne) : recherche + pages + accès rapide.
   Déclencheur #menu-toggle, coexiste avec « EN 1 CLIC ». JS : initMenu().
   ================================================================ */
/* Bouton burger façon essonne : pilule à bord CYAN, icône seule (loupe + traits). */
.menu-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px;background:transparent;border:2px solid var(--color-decor);color:var(--color-on-dark);border-radius:var(--radius-pill);padding:var(--space-3) var(--space-6);cursor:pointer;font-family:inherit;transition:background var(--dur-2),border-color var(--dur-2)}
.menu-toggle:hover{background:var(--fallback-survol-orange);background:color-mix(in srgb,var(--color-decor) 16%,transparent)}
.menu-toggle:focus-visible{outline:2px solid var(--color-decor);outline-offset:2px}
.menu-toggle-ico{display:inline-flex;align-items:center}
.menu-toggle-ico svg{display:block;width:28px;height:21px}

body.menu-open{overflow:hidden}
.menu-overlay{position:fixed;inset:0;background:var(--color-surface);z-index:200;display:none;overflow-y:auto}
.menu-overlay.open{display:block}
.menu-bar{display:flex;justify-content:flex-end;padding:clamp(1rem,3vw,1.75rem) var(--gutter) 0}
.menu-fermer{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--color-brand-night);color:var(--color-on-dark);border:0;border-radius:var(--radius-pill);padding:var(--space-2) var(--space-6);font-family:inherit;font-weight:var(--weight-bold);font-size:var(--text-btn);text-transform:uppercase;letter-spacing:.03em;cursor:pointer;transition:background var(--dur-2)}
.menu-fermer:hover{background:var(--color-survol)}
.menu-fermer:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}
.menu-fermer svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.menu-in{max-width:1180px;margin-inline:auto;padding:clamp(1rem,3vw,2rem) var(--gutter) var(--space-16)}
.menu-search{display:flex;align-items:center;gap:var(--space-3);max-width:720px;margin:0 auto var(--space-12);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-pill);box-shadow:var(--shadow-md);padding:.35rem .5rem .35rem var(--space-6)}
.menu-search input{flex:1;border:0;outline:0;font-family:inherit;font-size:var(--text-md);color:var(--color-text);background:transparent;padding:var(--space-3) 0}
.menu-search button{width:56px;height:56px;border-radius:50%;background:var(--color-brand);border:0;display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.menu-search button svg{width:24px;height:24px;fill:none;stroke:var(--color-on-dark);stroke-width:2.2;stroke-linecap:round}
.menu-search button:hover{background:var(--color-survol)}
/* Suggestions de recherche « intelligente » (autocomplete). Menu déroulant sous le champ. */
.sugg{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:5;margin:0;padding:var(--space-2);list-style:none;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);max-height:min(60vh,420px);overflow-y:auto}
.sugg-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);cursor:pointer;color:var(--color-text)}
.sugg-item:hover,.sugg-item.is-active{background:var(--surface-brand-soft)}
.sugg-lbl{font-weight:var(--weight-bold);color:var(--color-brand)}
.sugg-ctx{margin-left:auto;font-size:var(--text-2xs);color:var(--color-text-soft);text-transform:uppercase;letter-spacing:var(--tracking-caps);white-space:nowrap}
.sugg-all{color:var(--color-text-soft);font-size:var(--text-sm);font-weight:var(--weight-medium)}
.sugg-all strong{color:var(--color-brand)}
.menu-cols{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(2rem,5vw,4.5rem)}
.menu-h{font-size:var(--text-h2);font-weight:var(--weight-bold);color:var(--color-brand);margin:0 0 var(--space-6)}
/* Colonne pages : RÉUTILISE .clic-tile (mêmes liens/icônes que EN 1 CLIC), en LIGNES */
.menu-pages{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-6)}
.menu-pages .clic-tile{flex-direction:row;justify-content:flex-start;text-align:left;min-height:0;padding:var(--space-4) var(--space-2);border:0;border-bottom:1px solid var(--color-border);border-radius:0;background:transparent;color:var(--color-text);gap:var(--space-4)}
.menu-pages .clic-tile:hover{transform:none;box-shadow:none;color:var(--color-brand)}
.menu-pages .clic-tile-ico{width:40px;height:40px}
.menu-pages .clic-tile-ico svg{width:22px;height:22px}
.menu-pages .clic-tile-lbl{font-size:var(--text-base);font-weight:var(--weight-medium)}
.menu-pages .clic-tile[aria-current="page"]{box-shadow:none;color:var(--color-brand);font-weight:var(--weight-bold)}
/* Colonne accès rapide */
.menu-quick{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-1)}
.menu-quick a{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-1);color:var(--color-brand);text-decoration:none;font-size:var(--text-base);font-weight:var(--weight-bold)}
.menu-quick a:hover{text-decoration:underline}
.menu-quick svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
@media(max-width:820px){
  .menu-cols{grid-template-columns:1fr;gap:var(--space-10)}
  .menu-pages{grid-template-columns:1fr}
}
/* Menu à colonne UNIQUE (l'« Accès rapide » doublon a été retiré — recette
   CD91) : la colonne des pages se recentre sur une largeur confortable. */
.menu-cols.is-simple{grid-template-columns:1fr;max-width:760px;margin-inline:auto}

/* ⚠ WordPress body_class() ajoute « page » au <body> : ne JAMAIS poser
   .page{display:none} (cela masquerait tout le <body> -> page blanche). */
.page,.page.vis{display:block}

/* ================================================================
   7 bis. BANDE D'ACCÈS CONDITIONNEL « TRAVAUX À VENIR »
   Zone clic en partie supérieure, visible seulement dans la fenêtre (10–15 j
   avant la bascule) — cf. inc/avenir.php. 100 % tokens, aplat, zéro dégradé.
   ================================================================ */
.band-avenir{display:block;background:var(--band-avenir);color:var(--color-on-dark);text-decoration:none;transition:background var(--dur-2)}
.band-avenir:hover,.band-avenir:focus-visible{background:var(--band-avenir-hover);color:var(--color-on-dark)}
.band-avenir:focus-visible{outline:var(--plan-focus) solid var(--color-accent);outline-offset:calc(-1 * var(--plan-focus))}
.band-avenir-in{max-width:var(--container);margin-inline:auto;padding:var(--space-3) var(--gutter);min-height:var(--tap-min);display:flex;align-items:center;gap:var(--space-4)}
.band-avenir-ico{flex-shrink:0;display:inline-flex}
.band-avenir-ico svg{width:var(--space-6);height:var(--space-6)}
.band-avenir-txt{display:flex;flex-direction:column;min-width:0;line-height:var(--leading-snug)}
.band-avenir-txt strong{font-size:var(--text-2xs);font-weight:var(--weight-black);text-transform:uppercase;letter-spacing:var(--tracking-caps)}
.band-avenir-sub{font-size:var(--text-sm);color:var(--color-on-dark-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.band-avenir-cta{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:var(--weight-bold)}
.band-avenir-cta svg{width:var(--space-4);height:var(--space-4);transition:transform var(--dur-2)}
.band-avenir:hover .band-avenir-cta svg{transform:translateX(var(--space-1))}
@media(max-width:520px){.band-avenir-sub{display:none}.band-avenir-cta{gap:0}}
@media(prefers-reduced-motion:reduce){.band-avenir,.band-avenir-cta svg{transition:none}}

/* État « Pas de bascule imminente » (page Prochaine phase hors fenêtre). */
.avenir-vide{background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:var(--card-pad-lg);margin-top:var(--space-block);text-align:center}
.avenir-vide-ico{display:inline-flex;color:var(--color-brand);margin-bottom:var(--space-4)}
.avenir-vide-ico svg{width:var(--space-12);height:var(--space-12)}
.avenir-vide h2{color:var(--color-brand-night);margin-bottom:var(--space-3)}
.avenir-vide .lead{margin-inline:auto}
.avenir-vide-liens{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;margin-top:var(--space-6)}

/* ================================================================
   7 ter. NEWSLETTER — formulaire d'inscription (aplat, tokens, zéro dégradé)
   ================================================================ */
.nl-card{background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:var(--card-pad-lg);margin-top:var(--space-block)}
.nl-titre{color:var(--color-brand-night);margin-bottom:var(--space-3)}
.nl-intro{color:var(--color-text-body);margin-bottom:var(--space-5);line-height:var(--leading-relaxed)}
/* Mention « champs obligatoires » (RGAA 11.10) : visible sur les DEUX
   formulaires — encre du corps sur la carte, blanc adouci sur le pied. */
.nl-req{font-size:var(--text-sm);color:var(--color-text-body);margin-bottom:var(--space-3)}
.foot-nl-req{color:rgba(255,255,255,.92);color:color-mix(in srgb,var(--color-on-footer) 92%,transparent);margin-bottom:var(--space-2)}
.nl-form{display:flex;flex-direction:column;gap:var(--space-4)}
.nl-row{display:flex;gap:var(--space-3);flex-wrap:wrap}
.nl-row input[type="email"]{flex:1;min-width:min(100%,220px);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:var(--space-3) var(--space-5);font-family:inherit;font-size:var(--text-base);color:var(--color-text);background:var(--color-surface)}
.nl-row input[type="email"]:focus-visible{outline:var(--plan-focus) solid var(--color-survol);outline-offset:2px}
.nl-consent{display:flex;align-items:flex-start;gap:var(--space-3);font-size:var(--text-sm);color:var(--color-text-body);line-height:var(--leading-normal)}
.nl-consent input{margin-top:var(--space-1);flex-shrink:0;width:22px;height:22px}
/* Honeypot : hors écran mais présent dans le DOM (piège à bots ; jamais display:none). */
.nl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nl-msg{padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);margin-bottom:var(--space-4);font-size:var(--text-sm)}
.nl-ok{background:var(--etat-ok-soft);color:var(--etat-ok)}
.nl-err{background:var(--impact-fort-soft);color:var(--impact-fort)}

/* ================================================================
   8. HERO — photo arrondie côté intérieur (30px) qui déborde à droite,
   POSÉE DROITE (bloc décalé et inclinaison retirés — client 22/07/2026 ;
   rayons retirés — charte CD91 08/2026) + carte titre.
   Aplats, ombres douces centrées, zéro dégradé.
   ================================================================ */
.hero{background:var(--color-surface);overflow:hidden;position:relative}
.hero-item{position:relative;max-width:var(--container);margin-inline:auto;padding:clamp(1.25rem,4vw,2rem) var(--gutter)}
/* Photo (photomontage recadré tablier), coins GAUCHE arrondis. */
.hero-photo{margin:0;border-radius:var(--radius-hero);overflow:hidden;aspect-ratio:16/9;box-shadow:var(--shadow-md);background:var(--surface-brand-soft);position:relative;z-index:1}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* Ken Burns : dérive lente du photomontage (zoom 1 → 1.07 + léger panoramique).
   36s aller-retour, courbe douce, aucune propriété de mise en page animée — donc
   pas de recalcul de layout. Le figure a overflow:hidden : l'image agrandie ne
   déborde jamais. Réglable en back-office (Accueil → bandeau) et neutralisé pour
   qui demande moins d'animations. */
@keyframes prd931-ken-burns{
  from{transform:scale(1) translate3d(0,0,0)}
  to{transform:scale(1.07) translate3d(-1.2%,-0.8%,0)}
}
.hero-photo.is-anime img{
  animation:prd931-ken-burns 36s var(--ease-in-out) infinite alternate;
  transform-origin:58% 45%;
  will-change:transform;
}
@media(prefers-reduced-motion:reduce){
  .hero-photo.is-anime img{animation:none;transform:none}
}
/* Bouton pause/lecture de la dérive du hero (RGAA 13.8) : pastille discrète
   au coin de la photo, cible 44px, focus visible (règle globale). Masqué
   quand prefers-reduced-motion a déjà arrêté l'animation. */
/* En bas-DROITE : le bas-gauche de la photo passe SOUS la carte titre qui la
   chevauche en desktop (z-index 2 aussi) — le bouton y serait recouvert. */
.hero-pause{position:absolute;right:var(--space-4);bottom:var(--space-4);z-index:2;
  width:var(--tap-min);height:var(--tap-min);border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--color-surface);color:var(--color-brand);
  border:1px solid var(--color-border);box-shadow:var(--shadow-md);
  transition:background var(--dur-2),color var(--dur-2)}
.hero-pause svg{width:20px;height:20px}
.hero-pause:hover{background:var(--color-survol);color:var(--color-on-dark);border-color:var(--color-survol)}
.hero-pause .ico-play{display:none}
.hero-pause.is-paused .ico-play{display:block}
.hero-pause.is-paused .ico-pause{display:none}
.hero-photo.is-anime.is-paused img{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.hero-pause{display:none}}
/* La couche de la carte s'étend sur TOUTE la largeur au-dessus de la photo
   (z-index 2) : transparente, elle intercepterait quand même les clics —
   dont le bouton pause posé sur la photo. Elle laisse donc passer le
   pointeur, et la carte (son seul contenu) le reprend. */
.hero-inner{position:relative;z-index:2;pointer-events:none}
.hero-inner .hero-card{pointer-events:auto}
/* Carte titre = le champ recherche d'essonne rempli par NOTRE titre :
   pilule arrondie + ombre douce centrée (essonne .hero-search : radius 40px,
   box-shadow 0 0 16px). */
.hero-card{position:relative;overflow:visible;margin-top:-2.5rem;margin-inline:clamp(0px,3vw,1.5rem);background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:0 0 16px rgba(0,0,0,.26);padding:clamp(1.5rem,5vw,2.25rem)}
.hero-card .puce{display:inline-block;background:var(--surface-accent-texte);color:var(--color-on-accent-texte);font-size:var(--text-2xs);font-weight:var(--weight-bold);padding:var(--space-2) var(--space-5);border-radius:var(--radius-pill);text-transform:uppercase;letter-spacing:var(--tracking-pastille);margin-bottom:var(--space-5)}
.hero-card h1{color:var(--color-brand);font-weight:var(--weight-xbold);margin-bottom:var(--space-5)}
/* Mot mis en valeur du titre : souligné ORANGE (accent graphique charte) — le
   texte lui-même reste bleu (l'orange ne porte jamais de texte). */
.hero-card h1 u{color:inherit;text-decoration:underline;text-decoration-color:var(--color-accent);text-decoration-thickness:.14em;text-underline-offset:.12em}
/* Titre et chapô sur TOUTE la largeur de la carte, comme le bloc objectifs juste
   en dessous : le chapô était bridé à --measure-narrow (544px) dans une carte de
   688px utiles, et le `balance` global égalisait les lignes du H1 au lieu de les
   remplir. `pretty` garde la protection contre les orphelins. À 22px sur 688px on
   reste à ~62 caractères par ligne, dans la fourchette de lisibilité. */
.hero-card h1{text-wrap:pretty}
.hero-card p{font-size:var(--text-md);color:var(--color-text-body);line-height:var(--leading-relaxed)}
.hero-cta{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-7)}

/* Objectifs majeurs DANS la carte titre (demande client 22/07/2026) : second
   registre de la carte, ouvert par un filet. Les objectifs perdent leur chrome
   de carte (pas de carte dans une carte) et gardent leur liseré d'accent —
   orange / bleu (charte) — qui distingue les deux objectifs. */
.hero-objs{margin-top:var(--space-8);padding-top:var(--space-7);border-top:1px solid var(--color-border)}
.hero-objs h2{font-size:var(--text-xl);margin-bottom:var(--space-5)}
.hero-objs .objs{margin-top:0;gap:var(--space-7)}
.hero-objs .obj{background:none;border:0;border-top:3px solid var(--color-accent);border-radius:0;
  box-shadow:none;padding:var(--space-5) 0 0}
.hero-objs .obj:nth-child(2){border-top-color:var(--color-brand)}
.hero-objs .obj .ico{width:40px;height:40px;margin-bottom:var(--space-4)}
.hero-objs .obj .ico svg{width:22px;height:22px}
.hero-objs .obj h3{font-size:var(--text-base)}
.hero-objs .obj p{font-size:var(--text-sm);max-width:none;line-height:var(--leading-relaxed)}

/* ---- Desktop (>=1025px) : gabarit essonne CÔTE À CÔTE — grand soleil + carte
   titre (à la place de la barre de recherche essonne) à GAUCHE, photo à DROITE. ---- */
@media(min-width:1025px){
  .hero-item{max-width:none;padding-block:34px;padding-inline:0;min-height:520px;display:flex;align-items:center}
  /* Photo flottée à droite (déborde jusqu'au bord), DROITE, la carte la chevauche. */
  .hero-photo{position:absolute;top:34px;bottom:34px;left:52%;right:0;aspect-ratio:auto;height:auto;
    border-radius:var(--radius-hero) 0 0 var(--radius-hero);
    box-shadow:none;z-index:1;margin:0}
  /* Soleil de gauche retiré (client 23/07) : la carte récupère cette largeur. */
  .hero-inner{max-width:none;margin:0;padding-left:clamp(1.5rem,4vw,3.5rem);padding-right:0;width:100%}
  .hero-card{margin:0;width:min(58vw,900px)}
  /* Titre du hero un peu plus petit que les H1 de page : la carte étroite (côte à
     côte) tasserait le grand titre. Les autres pages gardent leur H1 à 55px. */
  .hero-card h1{font-size:var(--text-hero)}
}

/* ---- Section « Présentation » (accueil) : un bloc texte (titre, texte, liste
   à puces) puis des blocs photo + titre, EMPILÉS. Mêmes tokens que le reste :
   colonne de lecture, rythme --space-block, carte photo au système de carte. ---- */
.pres{max-width:var(--measure)}
.pres-liste{margin-top:var(--space-5);padding-left:var(--space-6);list-style:disc}
.pres-liste li{color:var(--color-text-body);font-size:var(--text-md);line-height:var(--leading-relaxed);margin-bottom:var(--space-2)}
.pres-liste li::marker{color:var(--color-accent)}
/* Blocs photo : côte à côte par défaut (repli automatique sous ~600px), ou
   empilés si l'éditeur choisit « l'un sous l'autre » (champ de la metabox). */
.pres-blocs{display:grid;gap:var(--gap-grid);margin-top:var(--space-block);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.pres-blocs.is-empile{grid-template-columns:1fr}
.pres-bloc{margin:0;border-radius:var(--card-radius);overflow:hidden;
  background:var(--card-bg);box-shadow:var(--card-shadow);
  display:flex;flex-direction:column}
.pres-bloc img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.pres-bloc figcaption{padding:var(--space-5) var(--card-pad)}
.pres-bloc figcaption h3{margin:0;font-size:var(--text-lg)}

/* ---- Blocs « connexions » : une carte par ville, chacune avec son carrousel.
   Même gabarit de carte que les blocs photo (.pres-bloc) pour rester cohérent :
   image en 16/9, nom dessous. Aplats nets, zéro dégradé (charte essonne). */
.villes{margin-top:var(--space-block)}
.villes-titre{margin-bottom:var(--space-block);font-size:var(--text-lg)}
.villes-blocs{display:grid;gap:var(--gap-grid);
  grid-template-columns:repeat(auto-fit,minmax(var(--ville-min,280px),1fr))}
.ville-bloc{margin:0;border-radius:var(--card-radius);overflow:hidden;
  background:var(--card-bg);box-shadow:var(--card-shadow);display:flex;flex-direction:column}
/* Le carrousel occupe la zone image de la carte : on neutralise les marges du
   gabarit « photo + texte » d'où il vient, et on garde le recadrage 16/9. */
.ville-bloc .mediatexte-img{margin:0;border-radius:0;box-shadow:none}
.ville-bloc img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
/* La photo reste agrandissable dans le carrousel : le lien de zoom ne doit
   pas casser la mise en page de la vue. */
.ville-bloc .prd931-zoom{width:100%}
/* Titre facultatif d'une photo : posé SUR le bas de l'image, au-dessus des
   points du carrousel, sur un voile sombre pour rester lisible sur n'importe
   quelle photo (aplat, pas de dégradé — charte essonne). */
.mtc-titre{position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:var(--space-3) var(--card-pad) calc(var(--space-8) + var(--space-1));
  /* Voile calibré RGAA : 78 % de bleu nuit = blanc à 7,0:1 même sur une
     photo BLANCHE (l'ancien 62 % plafonnait à 4,25 — latent, composant
     encore inutilisé). Repli = même valeur pré-calculée. */
  background:rgba(21,43,81,.78);
  background:color-mix(in srgb,var(--surface-brand-deep) 78%,transparent);
  color:var(--color-on-dark);font-size:var(--text-sm);font-weight:var(--weight-medium);
  line-height:var(--leading-snug);pointer-events:none}
.mtc-vue{position:relative}
.mediatexte-img > .mtc-titre{position:absolute}
.ville-bloc figcaption{padding:var(--space-5) var(--card-pad)}
.ville-bloc figcaption h3{margin:0;font-size:var(--text-lg)}

/* ---- Photo AGRANDISSABLE (déclencheur) ---------------------------------
   Le lien enveloppe l'image et pointe le fichier pleine taille : sans JS il
   ouvre la photo, avec JS site.js ouvre la visionneuse. La pastille « loupe »
   reste visible au repos — au tactile il n'y a pas de survol pour la révéler. */
.prd931-zoom{display:block;position:relative;overflow:hidden;line-height:0;cursor:zoom-in;background:var(--color-surface-alt)}
.prd931-zoom img{transition:transform var(--dur-4) var(--ease-out)}
.prd931-zoom:hover img,.prd931-zoom:focus-visible img{transform:scale(1.04)}
.prd931-zoom:focus-visible{outline:3px solid var(--color-header);outline-offset:-3px}
.prd931-zoom-ico{position:absolute;right:var(--space-4);bottom:var(--space-4);width:44px;height:44px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--color-header);color:var(--color-on-header);box-shadow:var(--shadow-md);
  opacity:.9;transition:opacity var(--dur-2),transform var(--dur-2) var(--ease-out)}
.prd931-zoom-ico svg{width:20px;height:20px}
.prd931-zoom:hover .prd931-zoom-ico,.prd931-zoom:focus-visible .prd931-zoom-ico{opacity:1;transform:scale(1.1)}

/* ---- VISIONNEUSE (lightbox) --------------------------------------------
   Construite par site.js à la première ouverture (aucun markup fantôme dans
   les pages). Voile chaud dérivé du pied de page, contrôles en pilule à la
   charte, légende + compteur sous la photo (pas de flèches posées SUR
   l'image : elles la masqueraient en petit écran). */
.prd931-lb{position:fixed;inset:0;z-index:var(--z-lightbox);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--space-5);
  padding:clamp(3.5rem,7vw,4.5rem) clamp(1rem,4vw,2.5rem) clamp(1.25rem,4vw,2.5rem);
  background:var(--fallback-voile);background:color-mix(in srgb,var(--color-footer) 22%,rgba(0,0,0,.94));
  opacity:0;visibility:hidden;transition:opacity var(--dur-3) var(--ease-out)}
.prd931-lb.is-open{opacity:1;visibility:visible}
body.lb-open{overflow:hidden}
.prd931-lb-fig{margin:0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:var(--space-5)}
.prd931-lb-img{display:block;max-width:min(1240px,100%);max-height:68vh;width:auto;height:auto;
  border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background:var(--color-surface);
  opacity:0;transition:opacity var(--dur-3) var(--ease-out)}
.prd931-lb-img.is-pret{opacity:1}
.prd931-lb-cap{margin:0;color:var(--color-on-dark);font-size:var(--text-md);
  line-height:var(--leading-snug);text-align:center;max-width:56rem;text-wrap:balance}
/* Barre de contrôle : précédent / compteur / suivant, en pilule. */
/* [hidden] DOIT gagner : une règle display: d'auteur écrase l'attribut hidden
   (piège déjà rencontré sur le sélecteur d'icônes de l'admin). */
.prd931-lb-bar[hidden]{display:none}
.prd931-lb-bar{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2);
  border-radius:var(--radius-pill);background:rgba(255,255,255,.1);
  background:color-mix(in srgb,var(--color-on-dark) 10%,transparent)}
.prd931-lb-num{padding:0 var(--space-4);font-size:var(--text-xs);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--color-footer-accent);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.prd931-lb-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:50%;border:1px solid rgba(255,255,255,.3);
  border-color:color-mix(in srgb,var(--color-on-dark) 30%,transparent);
  background:transparent;color:var(--color-on-dark);cursor:pointer;
  transition:background var(--dur-2),border-color var(--dur-2),color var(--dur-2)}
.prd931-lb-btn svg{width:22px;height:22px}
.prd931-lb-btn:hover{background:var(--color-header);border-color:var(--color-header);color:var(--color-on-header)}
.prd931-lb-btn:focus-visible{outline:3px solid var(--color-footer-accent);outline-offset:3px}
.prd931-lb-close{position:absolute;top:clamp(.75rem,3vw,1.5rem);right:clamp(.75rem,3vw,1.5rem)}
@media(max-width:640px){
  .prd931-lb-img{max-height:56vh}
  .prd931-lb-cap{font-size:var(--text-base)}
}
@media(prefers-reduced-motion:reduce){
  .prd931-lb,.prd931-lb-img,.prd931-zoom img,.prd931-zoom-ico{transition:none}
  .prd931-zoom:hover img,.prd931-zoom:focus-visible img{transform:none}
}

/* ---- Texte sous les logos partenaires (bloc riche et/ou liste à puces). ---- */
.part-sous{margin-top:var(--space-block)}
.part-sous p{color:var(--color-text-body);font-size:var(--text-md);line-height:var(--leading-relaxed)}
.part-sous p + p{margin-top:var(--space-4)}
.part-sous ul{margin-top:var(--space-4);padding-left:var(--space-6);list-style:disc}
.part-sous li{color:var(--color-text-body);font-size:var(--text-md);line-height:var(--leading-relaxed);margin-bottom:var(--space-2)}
.part-sous li::marker{color:var(--color-accent)}

/* ---- Bloc « média + texte » : une photo d'un côté, le texte en face.
   Réutilisable (rendu par le repeater cmp_blocs de l'accueil). En dessous de
   860px, la photo passe au-dessus du texte quel que soit le côté choisi. ---- */
.mediatexte{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap-grid);
  align-items:center;margin-top:var(--space-block)}
.mediatexte-img{margin:0;border-radius:var(--card-radius);overflow:hidden;box-shadow:var(--card-shadow)}
.mediatexte-img img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.mediatexte-txt h3{margin-bottom:var(--space-4)}
.mediatexte-txt p{color:var(--color-text-body);font-size:var(--text-md);line-height:var(--leading-relaxed)}
.mediatexte-txt p + p{margin-top:var(--space-4)}
/* Photo à droite : on inverse l'ordre visuel, l'ordre de lecture reste photo puis texte. */
.mediatexte.is-droite .mediatexte-img{order:2}
@media(max-width:860px){
  .mediatexte{grid-template-columns:1fr;gap:var(--space-6)}
  .mediatexte.is-droite .mediatexte-img{order:0}
}

/* ---- Carrousel de photos d'un bloc « photo + texte » --------------
   N'apparaît QUE si le bloc contient plusieurs photos ; une photo seule garde
   le rendu simple ci-dessus. Piste à défilement natif : utilisable sans JS
   (glisser / molette / clavier), les boutons ne sont qu'un confort. Aucun
   défilement automatique (WCAG 2.2.2), comme le comparateur avant/après. */
.mt-carrousel{position:relative}
.mtc-piste{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
.mtc-piste::-webkit-scrollbar{display:none}
.mtc-vue{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always}
/* La règle globale :focus-visible porte un outline-offset positif, rogné ici par
   l'overflow:hidden du cadre — on le rentre à l'intérieur. */
.mtc-piste:focus-visible{outline:3px solid var(--color-survol);outline-offset:-3px}

/* Flèches : cibles tactiles pleines, contrastées sur la photo. */
.mtc-nav{position:absolute;top:50%;transform:translateY(-50%);
  width:var(--tap-min);height:var(--tap-min);display:flex;align-items:center;justify-content:center;
  border:0;border-radius:var(--radius-pill);cursor:pointer;
  background:var(--color-surface);color:var(--color-brand);box-shadow:var(--shadow-sm)}
.mtc-prev{left:var(--space-3)}
.mtc-next{right:var(--space-3)}
.mtc-next svg{transform:rotate(180deg)}
.mtc-nav[disabled]{opacity:.35;cursor:default}
.mtc-nav:not([disabled]):hover{background:var(--color-survol);color:var(--color-on-dark)}

/* Pastilles de position, posées sur le bas de la photo. */
.mtc-points{position:absolute;left:0;right:0;bottom:var(--space-3);
  display:flex;justify-content:center;gap:var(--space-2)}
.mtc-point{width:var(--space-3);height:var(--space-3);padding:0;border:0;border-radius:var(--radius-pill);
  background:var(--color-surface);opacity:.55;cursor:pointer;box-shadow:var(--shadow-sm)}
.mtc-point[aria-current="true"]{opacity:1;background:var(--color-accent)}

/* Le confort JS n'apparaît que s'il peut fonctionner. */
.mt-carrousel:not(.is-pret) .mtc-nav,
.mt-carrousel:not(.is-pret) .mtc-points{display:none}

@media(prefers-reduced-motion:reduce){
  .mtc-piste{scroll-behavior:auto}
}

/* ================================================================
   9. SECTIONS DE CONTENU
   ================================================================ */
/* Fonds de section */
.bg-bleu{background:var(--surface-brand-deep);color:var(--color-on-dark);position:relative;overflow:hidden}
.bg-bleu h2{color:var(--color-on-dark)}
.bg-fond{background:var(--color-surface-alt)}

/* Les « rayons » essonne derrière les titres (.sec-title::before, éclat de la
   carte hero, entête de page) ont été RETIRÉS à la demande du CD91 (08/2026) :
   motif réservé au site officiel du Département. La classe .sec-title reste
   posée dans les gabarits — inerte, aucun décor. */


/* Objectifs */
.objs{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-grid);margin-top:var(--space-block)}
.obj{background:var(--card-bg);border:var(--card-border);border-top:4px solid var(--color-accent);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:var(--card-pad)}
.obj:nth-child(2){border-top-color:var(--color-brand)}
.obj .ico{width:var(--ico-size);height:var(--ico-size);border-radius:50%;background:var(--surface-brand-soft);display:flex;align-items:center;justify-content:center;margin-bottom:var(--ico-gap)}
.obj .ico svg{width:28px;height:28px;color:var(--color-brand)}
.obj p{color:var(--color-text-body);font-size:var(--text-base);line-height:var(--leading-relaxed)}

/* Chiffres (sur bleu) */
/* auto-fit + min 200px : 5 encarts tiennent sur une ligne au format desktop
   (conteneur 1200px), et se réagencent proprement pour tout nombre de chiffres. */
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--gap-grid);margin-top:var(--space-block)}
.chiffre{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--card-radius);padding:var(--card-pad-lg) var(--card-pad);text-align:center;box-shadow:0 14px 36px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.1)}
.chiffre .v{font-size:var(--text-3xl);font-weight:var(--weight-black);line-height:1;color:var(--color-on-dark)}
.chiffre .v small{font-size:var(--text-chiffre-unite);color:var(--color-accent);font-weight:var(--weight-bold);display:block;margin-top:var(--space-2);text-transform:uppercase;letter-spacing:var(--tracking-caps)}
.chiffre p{font-size:var(--text-sm);opacity:.92;margin-top:var(--space-4);font-weight:var(--weight-light);line-height:var(--leading-normal)}
/* Pictogramme optionnel d'un chiffre (ex. encart piéton) : accent orange charte
   (4,6:1 sur bleu nuit), aplat, même famille de pictos que les cartes d'impact. */
.chiffre-ico{display:flex;justify-content:center;margin-bottom:var(--space-4);color:var(--color-decor)}
.chiffre-ico svg{width:var(--space-10);height:var(--space-10)}

/* Trafic (pastilles) */
.trafic{display:flex;gap:var(--gap-inline);flex-wrap:wrap;justify-content:center;margin-top:var(--space-block)}
.trafic .t{background:var(--color-surface);border-radius:var(--radius-pill);padding:var(--space-3) var(--space-7);display:flex;align-items:center;gap:var(--space-3);box-shadow:0 10px 26px rgba(0,0,0,.16)}
.trafic .t svg{width:28px;height:28px;color:var(--color-brand)}
.trafic .t b{font-size:var(--text-xl);color:var(--color-brand);font-weight:var(--weight-black)}
.trafic .t span{font-size:var(--text-sm);color:var(--color-text-muted)}
.note{font-size:var(--text-xs);color:var(--color-on-dark-muted);text-align:center;margin-top:var(--space-4);font-style:italic}

/* Média / carrousel */
.media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);position:relative;background:var(--color-brand-night);margin-top:var(--space-block)}
.media .cadre{aspect-ratio:16/8.5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);color:var(--color-on-dark);text-align:center;padding:var(--space-7);position:relative}
.media .cadre.is-placeholder{aspect-ratio:auto;min-height:0;padding-block:clamp(2.5rem,5vw,4rem)}
.media .cadre.av{background:var(--color-brand-night)}
.media .cadre.ap{background:var(--color-brand)}
.media .cadre.vid{background:var(--color-brand-night)}
.media .cadre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play{width:80px;height:80px;border-radius:50%;background:var(--color-accent);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--dur-2);box-shadow:var(--shadow-md)}
.play:hover{transform:scale(1.08);background:var(--color-surface)}
.play svg{width:28px;height:28px;color:var(--color-on-dark);margin-left:4px}
.play:hover svg{color:var(--color-brand)}
.media .titre-m{font-weight:var(--weight-medium);max-width:520px;position:relative;z-index:1;line-height:var(--leading-normal)}
.media .note-m{font-size:var(--text-xs);opacity:.78;font-weight:var(--weight-light);position:relative;z-index:1}
/* Voile uni (aplat, pas de dégradé) sous les légendes des photos avant/après :
   garantit le contraste AA du texte blanc quelle que soit la zone de l'image. */
.media .cadre.av .titre-m,.media .cadre.ap .titre-m{background:rgba(15,23,42,.58);background:color-mix(in srgb,var(--surface-brand-deep) 58%,transparent);padding:.4em .85em;border-radius:var(--radius-sm);display:inline-block}
.tag-vue{position:absolute;top:var(--space-4);left:var(--space-4);background:rgba(0,0,0,.5);color:var(--color-on-dark);font-size:var(--text-2xs);font-weight:var(--weight-bold);padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);text-transform:uppercase;letter-spacing:var(--tracking-wide);z-index:2}
/* Scopé à .media : sinon .media .cadre{display:flex} (spécificité 0,2,0) l'emporte
   sur .slide{display:none} (0,1,0) et les DEUX vues restent visibles (bascule KO). */
.media .slide{display:none}.media .slide.on{display:flex}
.bascule{display:flex;gap:var(--space-2);justify-content:center;margin-top:var(--space-6)}
.bascule button{font-family:inherit;font-weight:var(--weight-medium);font-size:var(--text-sm);text-transform:uppercase;padding:var(--space-3) var(--space-6);border-radius:var(--radius-pill);border:2px solid var(--color-brand);background:var(--color-surface);color:var(--color-brand);cursor:pointer;transition:var(--dur-1);box-shadow:var(--shadow-sm)}
.bascule button:hover{background:var(--color-surface-alt)}
.bascule button.on{background:var(--color-brand);color:var(--color-on-dark)}

/* Avant / après — grille de comparaisons (repeater « comparaisons »). JS : initComparateurs(). */
.cmp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(1.25rem,2.5vw,2rem);margin-top:var(--space-block)}
.cmp-card{background:var(--color-surface);border-radius:var(--card-radius);box-shadow:var(--shadow-md);overflow:hidden;display:flex;flex-direction:column}
.cmp-media{position:relative;aspect-ratio:4/3;background:var(--color-brand-night);overflow:hidden}
.cmp-img{position:absolute;inset:0;display:block}
.cmp-img img{width:100%;height:100%;object-fit:cover;display:block}
.cmp-img.ap{opacity:0;transition:opacity .5s var(--ease-out)}
.cmp-card.show-apres .cmp-img.ap{opacity:1}
.cmp-badge{position:absolute;top:var(--space-3);left:var(--space-3);z-index:2;display:inline-flex;align-items:center;gap:var(--space-2);background:rgba(15,23,42,.62);background:color-mix(in srgb,var(--surface-brand-deep) 62%,transparent);color:var(--color-on-dark);font-size:var(--text-2xs);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-caps);padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill)}
.cmp-dot{width:8px;height:8px;border-radius:50%;background:var(--color-survol)}
.cmp-card.show-apres .cmp-dot{background:var(--color-accent)}
.cmp-switch{position:absolute;bottom:var(--space-3);left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:3px;background:rgba(255,255,255,.92);border-radius:var(--radius-pill);padding:4px;box-shadow:var(--shadow-md)}
.cmp-switch button{border:0;background:transparent;font-family:inherit;min-height:44px;display:inline-flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.03em;color:var(--color-brand);padding:var(--space-2) var(--space-5);border-radius:var(--radius-pill);cursor:pointer;transition:background var(--dur-2),color var(--dur-2)}
.cmp-switch button.on{background:var(--color-brand);color:var(--color-on-dark)}
.cmp-switch button:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}
.cmp-cap{padding:var(--space-4) var(--space-5) var(--space-5);display:flex;flex-direction:column;gap:2px}
.cmp-titre{color:var(--color-brand);font-size:var(--text-base);font-weight:var(--weight-bold)}
.cmp-sous{color:var(--color-text-body);font-size:var(--text-sm);line-height:var(--leading-snug)}
.cmp-legend{margin-top:var(--space-6);font-size:var(--text-sm);color:var(--color-text-soft)}
.cmp-key{width:12px;height:12px;border-radius:50%;display:inline-block;vertical-align:middle;margin-right:.4em}
.cmp-key.ap{margin-left:1.4em}
.cmp-key.av{background:var(--color-survol)}
.cmp-key.ap{background:var(--color-accent)}

/* Partenaires */
/* ---- Rangée des logos financeurs ------------------------------------------
   Grille RÉGULIÈRE (cases identiques, gouttières constantes) et case de taille
   FIXE : l'alignement inter-logos ne dépend jamais du fichier ni des réglages.
   Toute la géométrie vient de inc/logos.php (tokens --logo-*), rien en dur. */
.logos{display:grid;grid-template-columns:repeat(var(--logo-colonnes,4),1fr);gap:var(--gap-inline);margin-top:var(--space-block);align-items:stretch}
@media(max-width:900px){.logos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.logos{grid-template-columns:1fr}}
.logo-c{background:var(--card-bg);border:var(--card-border);border-radius:var(--radius-sm);padding:var(--logo-case-pad,20px);font-size:var(--text-xs);color:var(--color-text-soft);font-weight:var(--weight-medium);min-width:0;text-align:center;display:grid;place-items:center;box-shadow:var(--shadow-sm);
  /* Case de hauteur fixe + rognage : un logo zoomé se recadre, il ne pousse
     jamais ses voisins et ne sort jamais de son cadre. */
  block-size:calc(var(--logo-case-h,88px) + 2 * var(--logo-case-pad,20px));overflow:hidden}
/* Remplissage de la case :
     --logo-fit  : facteur AUTOMATIQUE calculé par PHP d'après les proportions
                   du fichier (équilibre optique entre bandeaux et logos carrés) ;
     --logo-zoom : réglage manuel du client (éditeur de cadrage) ;
     --logo-x/y  : décalage, en % de la taille du logo (façon background-position).
   max-width:none est indispensable : sans lui, un logo zoomé serait bridé par
   la largeur de la case et le zoom n'aurait aucun effet visible. */
.logo-c img{height:calc(var(--logo-case-h,88px) * var(--logo-fit,1) * var(--logo-zoom,1));
  width:auto;max-width:none;object-fit:contain;display:block;
  transform:translate(calc(var(--logo-x,0) * 1%),calc(var(--logo-y,0) * 1%))}
@media(prefers-reduced-motion:no-preference){.logo-c img{transition:height var(--dur-2) var(--ease-out)}}

/* « Explorer le projet » — cartes photo empilées (essonne .subpages-menu).
   Photo posée sur 2 blocs colorés décalés et inclinés en éventail :
   bloc bleu (--color-brand) rotation -8° en haut-gauche + bloc orange (--color-decor,
   accent graphique charte) rotation +3° en bas-droite ; titre bleu souligné dessous. */
.decouvrir-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,3.25rem);margin-top:calc(var(--space-block) + 14px)}
.vignette{display:flex;flex-direction:column;gap:var(--space-5);text-decoration:none}
.vignette-photo{position:relative;display:block;margin:14px 14px 0;border-radius:var(--radius-sm)}
/* height:auto est INDISPENSABLE : WordPress ajoute width/height en attributs sur
   ses images, ce qui fixe la hauteur et NEUTRALISE aspect-ratio — les 3 vignettes
   reprenaient alors le format de chaque photo (hauteurs inégales, 22/07/2026). */
.vignette-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-sm);position:relative;z-index:2;box-shadow:var(--shadow-md);transition:transform var(--dur-2) var(--ease-out)}
/* Effet « photo empilée » PARTAGÉ : vignettes accueil + cartes reportage
   (mêmes blocs bleu+orange inclinés → effet identique sur tout le site). */
.vignette-photo::before,.vignette-photo::after,
.repo .vis:has(img)::before,.repo .vis:has(img)::after{content:"";position:absolute;inset:0;border-radius:var(--radius-sm);z-index:1}
.vignette-photo::before,.repo .vis:has(img)::before{background:var(--color-brand);transform:translate(-14px,-14px) rotate(-8deg)}
.vignette-photo::after,.repo .vis:has(img)::after{background:var(--color-decor);transform:translate(16px,11px) rotate(3deg)}
.vignette-titre{color:var(--color-brand);font-family:var(--font-titre);font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--leading-tight);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.vignette:hover .vignette-titre{text-decoration-thickness:2px}
.vignette:hover .vignette-photo img{transform:translateY(-4px)}
.vignette:focus-visible{outline:2px solid var(--color-brand);outline-offset:6px;border-radius:var(--radius-sm)}
@media(max-width:780px){
  .decouvrir-grid{grid-template-columns:1fr;max-width:440px;margin-inline:auto;gap:clamp(2.5rem,9vw,3.5rem)}
}

/* Contact */
.contact-card{background:var(--surface-contact);color:var(--color-on-dark);border-radius:var(--radius-lg);padding:clamp(2.5rem,4.5vw,4rem);display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center;box-shadow:var(--shadow-lg)}
.contact-card h2,.contact-card h3{color:var(--color-on-dark)}
.contact-card > div > p{line-height:var(--leading-relaxed);opacity:.97}
.contact-card a{color:var(--color-on-dark);font-weight:var(--weight-bold)}
.contact-card .pts{list-style:none}
.contact-card .pts li{padding:var(--space-3) 0;border-bottom:1px solid rgba(255,255,255,.32);font-size:var(--text-sm);display:flex;gap:var(--space-2)}
.contact-card .pts li::before{content:"›";font-weight:var(--weight-black)}
.mail-box{background:rgba(255,255,255,.18);border-radius:var(--card-radius);padding:var(--space-6);margin-top:var(--space-5);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.mail-box small{font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--tracking-caps);opacity:.9}
.mail-box a{font-size:var(--text-md);display:inline-block;margin-top:var(--space-1)}

/* ================================================================
   10. TITRE DE PAGE
   ================================================================ */
.page-tete{background:var(--surface-tete);color:var(--color-on-tete);position:relative;overflow:hidden}
.page-tete .in{max-width:var(--container);margin-inline:auto;padding:clamp(3.25rem,6vw,5rem) var(--gutter);position:relative;z-index:1}
.page-tete .fil{font-size:var(--text-xs);opacity:.85;font-weight:var(--weight-light);margin-bottom:var(--space-3);letter-spacing:.01em}
.page-tete .phase-num{display:inline-block;background:var(--surface-tete-soft);color:var(--color-on-tete);font-size:var(--text-2xs);font-weight:var(--weight-black);letter-spacing:var(--tracking-wide);text-transform:uppercase;padding:var(--space-1) var(--space-4);border-radius:var(--radius-pill);margin-bottom:var(--space-3)}
/* H1 d'entête = TITRE DE RUBRIQUE charte (60px extra-gras, fluide). */
.page-tete h1{color:var(--color-on-tete);font-size:var(--text-rubrique);font-weight:var(--weight-xbold)}
/* Page de détail d'un reportage = TITRE D'ARTICLE charte (55px gras). */
.single-reportage .page-tete h1{font-size:var(--text-h1);font-weight:var(--weight-bold)}
.page-tete .badge{display:inline-block;background:var(--surface-accent-texte);padding:var(--space-2) var(--space-5);border-radius:var(--radius-pill);font-size:var(--text-2xs);font-weight:var(--weight-bold);margin-left:var(--space-3);vertical-align:middle;text-transform:uppercase;letter-spacing:var(--tracking-pastille)}

/* ================================================================
   11. FRISE HISTOIRE / ENCARTS
   ================================================================ */
/* Frise historique = timeline : rail latéral coloré (alterné bleu/orange charte)
   + année en pastille pilule + carte ; item avec image en 2 colonnes. */
/* Contenu (texte + cartes) : pleine largeur du conteneur --container → marges
   gauche/droite uniformes sur toute la page (choix « plus large et uniforme »). */
.frise{margin-top:var(--space-block);display:grid;gap:var(--gap-stack)}
.fr-item{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(1.25rem,3vw,2rem);align-items:start;background:var(--card-bg);border:var(--card-border);border-left:5px solid var(--color-brand);border-radius:var(--card-radius);padding:var(--card-pad);box-shadow:var(--shadow-sm)}
.fr-item:nth-child(even){border-left-color:var(--color-accent)}
.fr-an{display:inline-flex;align-items:center;justify-content:center;min-width:104px;height:48px;padding:0 var(--space-4);background:var(--surface-brand-soft);border-radius:var(--radius-pill);font-size:var(--text-xl);font-weight:var(--weight-black);color:var(--color-brand)}
.fr-item:nth-child(even) .fr-an{background:var(--surface-warm);color:var(--color-accent-ink)}
.fr-desc{color:var(--color-text-body);font-size:var(--text-base);line-height:var(--leading-relaxed);padding-top:var(--space-2)}
/* Item avec image : 2 colonnes texte|image (place suffisante à 1080px). */
.fr-desc:has(.fr-img){display:grid;grid-template-columns:1fr minmax(240px,330px);column-gap:var(--space-6);align-items:start}
.fr-img{margin-top:var(--space-4);max-width:440px}
.fr-desc:has(.fr-img) .fr-img{grid-column:2;grid-row:1/span 20;margin-top:0;max-width:none}
.fr-img img{width:100%;height:auto;border-radius:var(--radius-md);box-shadow:var(--shadow-md);display:block}
.fr-img figcaption{margin-top:var(--space-2);font-size:var(--text-2xs);color:var(--color-text-muted);font-style:italic}
/* Mobile : image EMPILÉE sous le texte (on annule grid-column:2 sinon elle reste
   dans une colonne implicite à côté du texte, écrasé). */
@media(max-width:680px){
  .fr-desc:has(.fr-img){grid-template-columns:1fr}
  .fr-desc:has(.fr-img) .fr-img{grid-column:1;grid-row:auto;margin-top:var(--space-4);max-width:440px}
}
@media(max-width:520px){.fr-item{grid-template-columns:1fr}.fr-an{margin-bottom:var(--space-2)}}

.encart{background:var(--color-surface-alt);border-radius:var(--card-radius);padding:var(--card-pad-lg);margin-top:var(--space-block);box-shadow:var(--shadow-sm)}
.encart h3{color:var(--color-brand);margin-bottom:var(--space-3);display:flex;align-items:center;gap:var(--space-2)}
.encart h3::before{content:"";width:.7rem;height:.7rem;border-radius:50%;background:var(--color-accent);flex-shrink:0}
.encart.bleu{background:var(--surface-brand-soft)}
.encart.bleu h3{color:var(--color-brand)}
.encart.bleu h3::before{background:var(--color-brand)}
.encart p{color:var(--color-lead);font-size:var(--text-base);line-height:var(--leading-relaxed)}

/* ================================================================
   12. PLANNING — FRISE DE SYNTHÈSE + ACCORDÉON 2 NIVEAUX
   Structure macro/sous-phases (prd931_planning_tree). Zéro valeur en dur dans
   les règles : les 4 teintes de macro-phase et toutes les mesures vivent en
   tokens (--plan-*, --space-*, --color-*, --radius-*). Aucun code couleur
   « impact » (retiré du planning à la demande du client, CR CD91 06/07).
   ================================================================ */

/* — Couleur par MACRO-PHASE (repérage, non sémantique). --pl-accent est hérité
     par les sous-phases de la macro-phase. — */
.pl-macro.is-macro-1{--pl-accent:var(--plan-macro-1)}
.pl-macro.is-macro-2{--pl-accent:var(--plan-macro-2)}
.pl-macro.is-macro-3{--pl-accent:var(--plan-macro-3)}
.pl-macro.is-macro-4{--pl-accent:var(--plan-macro-4)}
.pl-tl-seg.is-macro-1 .pl-tl-bar,.pl-macro.is-macro-1 .pl-macro-index{background:var(--plan-macro-1)}
.pl-tl-seg.is-macro-2 .pl-tl-bar,.pl-macro.is-macro-2 .pl-macro-index{background:var(--plan-macro-2)}
.pl-tl-seg.is-macro-3 .pl-tl-bar,.pl-macro.is-macro-3 .pl-macro-index{background:var(--plan-macro-3)}
.pl-tl-seg.is-macro-4 .pl-tl-bar,.pl-macro.is-macro-4 .pl-macro-index{background:var(--plan-macro-4)}
/* Segment orange : cerne foncé (RGAA 3.3 — cf. --plan-bar-contour). */
.pl-tl-seg.is-macro-4 .pl-tl-bar{box-shadow:inset 0 0 0 var(--plan-bar-contour-w) var(--plan-bar-contour)}
/* Macro « hors phase » (ex. Préparation — recette CD91) : présentée À PART.
   Barre NEUTRE dans la frise (fond clair charte + filet, aucune couleur de
   phase) ; dans l'accordéon, sa pastille de numéro n'est pas rendue. */
.pl-tl-seg.is-hors-phase .pl-tl-bar{background:var(--color-surface-alt);box-shadow:inset 0 0 0 1px var(--color-border)}

/* — Frise de synthèse (vue d'ensemble proportionnelle des 4 macro-phases) — */
.pl-timeline{margin-top:var(--space-block)}
.pl-timeline-cap{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-4)}
.pl-timeline-title{font-size:var(--text-base);font-weight:var(--weight-bold);color:var(--color-brand-night)}
.pl-timeline-span{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:var(--weight-medium)}
.pl-timeline-span strong{color:var(--color-brand-night)}
.pl-timeline-track{display:flex;gap:var(--plan-bar-gap);align-items:flex-start}
.pl-tl-seg{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-3);text-decoration:none;color:inherit;padding:var(--space-1);border-radius:var(--radius-sm);transition:transform var(--dur-2) var(--ease-out)}
.pl-tl-seg:hover{transform:translateY(calc(-1 * var(--space-1)))}
.pl-tl-seg:focus-visible{outline:var(--plan-focus) solid var(--color-survol);outline-offset:var(--space-1)}
.pl-tl-bar{height:var(--plan-bar-h);border-radius:var(--radius-pill)}
.pl-tl-lab{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.pl-tl-name{font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--color-brand-night);line-height:var(--leading-snug)}
.pl-tl-dur{font-size:var(--text-2xs);font-weight:var(--weight-medium);color:var(--color-text-muted)}

/* — Accordéon : macro-phases (niveau 1) — */
.pl-accordion{display:flex;flex-direction:column;gap:var(--gap-stack);margin-top:var(--space-block)}
.pl-macro{background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow);overflow:hidden}
/* Contour vert = phase « mise en avant » (interaction) : sur la phase EN COURS au
   chargement (.is-highlighted posé en PHP), puis déplacé au clic d'un segment de
   la frise (JS). Séparé du sémantique .is-current (badge « En cours », dépli,
   filet de sous-phase) : une seule carte surlignée à la fois. Mêmes tokens. */
.pl-macro.is-highlighted{border-color:var(--color-accent);box-shadow:0 0 0 var(--plan-rail) var(--color-accent),var(--card-shadow)}
.pl-macro-head{display:flex;align-items:center;gap:var(--space-5);padding:var(--card-pad);cursor:pointer;list-style:none}
.pl-macro-head::-webkit-details-marker{display:none}
.pl-macro-head::marker{content:""}
.pl-macro-head:focus-visible{outline:var(--plan-focus) solid var(--color-survol);outline-offset:calc(-1 * var(--plan-focus))}
.pl-macro-index{flex:0 0 auto;width:var(--plan-index);height:var(--plan-index);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:var(--text-md);font-weight:var(--weight-black);color:var(--color-on-dark)}
.pl-macro-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-2)}
.pl-macro-title{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);font-size:var(--text-lg);font-weight:var(--weight-bold);color:var(--color-brand-night);line-height:var(--leading-snug);letter-spacing:var(--tracking-snug)}
.pl-macro-chevron{flex:0 0 auto;display:flex;color:var(--color-brand);transition:transform var(--dur-3) var(--ease-out)}
.pl-macro[open] .pl-macro-chevron{transform:rotate(180deg)}

/* — Ligne « période · durée » (2e ligne, partagée macro + sous-phase) — */
.pl-meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);font-size:var(--text-sm);color:var(--color-text-body)}
.pl-meta-item{display:inline-flex;align-items:center;gap:var(--space-2)}
.pl-meta-item strong{color:var(--color-brand-night);font-weight:var(--weight-medium)}
.pl-meta-dot{width:var(--space-1);height:var(--space-1);border-radius:var(--radius-pill);background:var(--color-text-muted);flex-shrink:0}
.pl-ico{flex-shrink:0;color:var(--color-brand)}

/* — Repère « En cours » (factuel, non anxiogène) — */
.pl-live{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-2xs);font-weight:var(--weight-bold);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--color-brand);background:var(--color-surface-alt);padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);white-space:nowrap}
.pl-live .dot{width:var(--space-2);height:var(--space-2);border-radius:var(--radius-pill);background:var(--color-accent);animation:prd931-pulse 1.8s infinite}

/* — Sous-phases (niveau 2) : liste indentée à puces-repères — */
.pl-sous-list{display:flex;flex-direction:column;gap:var(--space-6);padding:0 var(--card-pad) var(--card-pad) var(--plan-sous-indent)}
.pl-sous{position:relative;display:flex;flex-direction:column;gap:var(--space-2);padding-left:var(--space-6)}
.pl-sous::before{content:"";position:absolute;left:0;top:var(--space-2);width:var(--space-3);height:var(--space-3);border-radius:var(--radius-pill);background:var(--pl-accent,var(--color-brand));flex-shrink:0}
.pl-sous.is-current::before{background:var(--color-accent);box-shadow:0 0 0 var(--plan-rail) var(--surface-warm)}
.pl-sous-title{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);font-size:var(--text-base);font-weight:var(--weight-bold);color:var(--color-brand-night);line-height:var(--leading-snug)}
/* Numéro de l'étape (même que « Phase N » sur la page) : petite pastille devant le titre. */
.pl-sous-num{flex:0 0 auto;min-width:1.7em;height:1.7em;padding:0 .35em;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);background:var(--pl-accent,var(--color-brand));color:var(--color-on-dark);font-size:var(--text-2xs);font-weight:var(--weight-black)}
.pl-sous-desc{font-size:var(--text-sm);color:var(--color-text-body);line-height:var(--leading-relaxed)}
.pl-sous-desc p + p{margin-top:var(--space-stack)}

/* — Lien « Plus de détails… » (cible configurable, sans URL en dur) — */
/* CTA « Plus de détails… » : pastille pleine teal foncé (accent essonne, AA avec
   blanc), cible tactile ≥ 44px. Repli macro décalé pour s'aligner aux sous-phases. */
.pl-more{display:inline-flex;align-items:center;gap:var(--space-2);align-self:flex-start;margin-top:var(--space-3);min-height:var(--tap-min);padding:var(--space-2) var(--space-5);background:var(--plan-cta);color:var(--color-on-dark);font-size:var(--text-sm);font-weight:var(--weight-bold);line-height:var(--leading-snug);border-radius:var(--radius-pill);text-decoration:none;box-shadow:var(--shadow-sm);transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2)}
.pl-more:hover,.pl-more:focus-visible{color:var(--color-on-dark);text-decoration:none;transform:translateY(calc(-1 * var(--space-1)));box-shadow:var(--shadow-md)}
.pl-more .pl-ico{color:currentColor;transition:transform var(--dur-2)}
.pl-more:hover .pl-ico{transform:translateX(var(--space-1))}
.pl-more-macro{margin-left:var(--space-6)}

/* — Responsive — */
@media(max-width:640px){
  /* Segments trop étroits pour porter leur libellé sans se chevaucher :
     on garde les barres proportionnelles (repère visuel) ; les noms sont
     donnés juste dessous par l'accordéon (pastilles numérotées de même couleur). */
  .pl-tl-lab{display:none}
  .pl-tl-bar{height:var(--space-4)}
  /* Cible tactile : la barre reste fine, mais le segment cliquable fait 44px de
     haut (padding vertical) — les phases courtes sont sinon quasi invisibles au
     doigt (37 × 24px mesurés à 360px). */
  .pl-tl-seg{min-height:44px;justify-content:center;padding-block:var(--space-3)}
  .pl-macro-head{padding:var(--card-pad-sm);gap:var(--space-3)}
  .pl-macro-title{font-size:var(--text-base)}
  .pl-sous-list{padding-left:var(--card-pad-sm);padding-right:var(--card-pad-sm)}
}
@media(prefers-reduced-motion:reduce){
  .pl-macro-chevron,.pl-tl-seg,.pl-more,.pl-more .pl-ico{transition:none}
  .pl-more:hover,.pl-more:focus-visible{transform:none}
  .pl-live .dot{animation:none}
}

/* Pulsation du repère « En cours » — conservée ici (utilisée aussi par .live-dot). */
/* Le halo suit la couleur d'accent. Repli statique en 1re déclaration :
   un navigateur sans color-mix écarte la seconde au parsing (il perd
   seulement la teinte du halo, jamais l'animation). */
@keyframes prd931-pulse{
  0%{box-shadow:0 0 0 0 var(--fallback-pulse);box-shadow:0 0 0 0 color-mix(in srgb,var(--color-accent) 55%,transparent)}
  70%{box-shadow:0 0 0 9px transparent}
  100%{box-shadow:0 0 0 0 transparent}}

/* ================================================================
   13. STATUT / IMPACTS / ALERTE
   ================================================================ */
.statut{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:var(--gap-grid);margin-bottom:var(--space-block)}
.statut .c{background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);padding:var(--card-pad-sm);box-shadow:var(--shadow-sm)}
.statut .l{font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--color-text-muted);font-weight:var(--weight-bold)}
.statut .v{font-weight:var(--weight-bold);font-size:var(--text-md);margin-top:var(--space-2);color:var(--color-brand)}

.impacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));gap:var(--gap-grid);margin-top:var(--space-block)}
.imp{background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:var(--card-pad);border-top:5px solid var(--color-brand)}
.imp.crit{border-top-color:var(--impact-fort)}
.imp .ico{width:var(--ico-size);height:var(--ico-size);border-radius:50%;background:var(--surface-brand-soft);display:flex;align-items:center;justify-content:center;margin-bottom:var(--ico-gap)}
.imp.crit .ico{background:var(--impact-fort-soft)}
.imp .ico svg{width:27px;height:27px;color:var(--color-brand)}
.imp.crit .ico svg{color:var(--impact-fort)}
.imp h3{margin-bottom:var(--space-2)}
.imp p{color:var(--color-text-body);font-size:var(--text-sm);line-height:var(--leading-relaxed)}

.alerte{background:var(--surface-warm);border:1px solid var(--surface-warm-bord);border-radius:var(--card-radius);padding:var(--card-pad);margin-top:var(--space-block);line-height:var(--leading-relaxed);color:var(--color-text-body)}
.alerte b{color:var(--color-accent-ink)}

/* ================================================================
   14. REPORTAGES
   ================================================================ */
.repos{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:clamp(2rem,3.5vw,3.25rem);margin-top:calc(var(--space-block) + 14px)}
@media(min-width:980px){.repos{grid-template-columns:repeat(3,1fr)}}
/* Carte reportage = photo empilée essonne (mêmes blocs navy+cyan que les vignettes) + texte dessous, sans chrome de carte blanche. */
.repo{display:block;text-decoration:none;color:inherit}
.repo .vis{position:relative;display:block;margin:14px 14px 0;border-radius:var(--radius-sm);aspect-ratio:16/10}
.repo .vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--radius-sm);z-index:2;box-shadow:var(--shadow-md);transition:transform var(--dur-2) var(--ease-out)}
.repo:hover .vis img{transform:translateY(-4px)}
/* Repli « photo à venir » (pas d'image → pas de blocs, simple cadre bleu pâle). */
.repo .vis:not(:has(img)){background:var(--surface-brand-soft);display:flex;align-items:center;justify-content:center;color:var(--color-brand);box-shadow:inset 0 0 0 1px var(--color-border)}
.repo .vis svg{width:46px;height:46px;opacity:.5}
.repo .vis em{position:absolute;bottom:var(--space-3);right:var(--space-3);font-size:var(--text-2xs);color:var(--color-text-muted);font-style:normal}
.repo .b{padding:var(--space-6) var(--space-2) 0}
.repo .date{font-size:var(--text-2xs);font-weight:var(--weight-bold);color:var(--color-brand);text-transform:uppercase;letter-spacing:var(--tracking-wide)}
.repo h3{font-size:var(--text-lg);margin:var(--space-2) 0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.repo:hover h3{text-decoration-thickness:2px}
.repo p{font-size:var(--text-sm);color:var(--color-text-soft);line-height:var(--leading-relaxed)}
/* « À venir » : seule la PHOTO s'estompe — l'ancienne opacité sur toute la
   carte faisait tomber le texte à 3,40:1 (RGAA 3.2, latent). */
.repo.avenir .vis{opacity:.66}
.repo:focus-visible{outline:2px solid var(--color-brand);outline-offset:6px;border-radius:var(--radius-sm)}
/* Single reportage (page de détail stylée) */
.fil a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.repo-tete-date{margin-top:var(--space-3);font-weight:var(--weight-bold);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--color-on-dark-soft)}
/* Le contenu est un <article> (pas une <section>) : il faut lui donner le même
   rythme vertical que les autres pages (respiration sous le bandeau et au-dessus
   du footer), sinon la photo se colle au bandeau bleu. */
.reportage{padding-block:var(--space-section)}
.reportage-figure{margin:0 0 var(--space-7)}
.reportage-figure img{width:100%;height:auto;display:block;border-radius:var(--radius-lg);box-shadow:var(--card-shadow)}
.reportage-figure figcaption{margin-top:var(--space-3);font-size:var(--text-xs);font-style:italic;color:var(--color-text-soft)}
.reportage-corps{max-width:var(--measure);font-size:var(--text-md);line-height:var(--leading-loose)}

/* Page d'attente : rythme vertical AÉRÉ et uniforme entre tous les blocs
   (l'intro colle sinon aux cartes : .statut n'a pas de margin-top — il est
   premier bloc sur les pages de phase). Espacement scopé, un cran au-dessus
   du rythme standard, en tokens. */
body.attente{--attente-gap:clamp(2.25rem,4vw,3.25rem)}
body.attente .wrap > * + *{margin-top:var(--attente-gap)}

/* Pied minimal de la page d'attente (avant réunions publiques). */
.attente-pied{margin-top:var(--attente-gap,var(--space-block));padding-top:var(--space-5);border-top:1px solid var(--color-border);font-size:var(--text-xs);color:var(--color-text-muted);text-align:center}

/* Photo d'une page-phase (facultative, placée par l'éditeur entre les sections). */
.phase-img{margin:var(--space-block) 0}
.phase-img img{width:100%;height:auto;display:block;border-radius:var(--radius-md);box-shadow:var(--card-shadow)}
.phase-img figcaption{margin-top:var(--space-3);font-size:var(--text-xs);font-style:italic;color:var(--color-text-soft)}
.reportage-corps p{margin-bottom:var(--space-5)}

/* ================================================================
   15. NAV BAS / FOOTER
   ================================================================ */
.nav-bas{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-block);padding-top:var(--space-8);border-top:1px solid var(--color-border)}
/* Pager bas de page en pilules essonne (aplat, ombre douce). */
.nav-bas a{display:inline-flex;align-items:center;gap:var(--space-2);min-height:46px;padding:0 var(--space-6);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-pill);color:var(--color-footer);font-weight:var(--weight-medium);font-size:var(--text-sm);text-decoration:none;box-shadow:var(--shadow-sm);transition:transform var(--dur-1) var(--ease-out),border-color var(--dur-2)}
.nav-bas a:hover{border-color:var(--color-footer);transform:translateY(-2px);text-decoration:none}
/* Pilule « page suivante » : teinte claire DÉRIVÉE du fond du pied de page — elle
   suit donc le réglage client sans réglage supplémentaire (repli sable si le
   navigateur ignore color-mix). */
.nav-bas a:last-child{background:var(--fallback-nav-suivant);background:color-mix(in srgb,var(--color-footer) 12%,var(--color-surface));border-color:var(--fallback-nav-suivant);border-color:color-mix(in srgb,var(--color-footer) 12%,var(--color-surface))}
.nav-bas a:last-child:hover{border-color:var(--color-footer)}

/* ----------------------------------------------------------------
   PIED DE PAGE — fond, texte et accent RÉGLABLES (Pont RD931 > Couleurs).
   Les nuances (texte adouci, filets, barre basse) sont dérivées des 3 tokens
   par color-mix : chaque règle porte d'abord une valeur de repli statique, que
   les navigateurs sans color-mix conservent (la 2e déclaration est alors
   écartée au parsing). Ne jamais poser de couleur en dur ici.
   ---------------------------------------------------------------- */
/* Pied de page BLEU NUIT #152B51 (charte, esprit essonne.fr) : liseré haut et
   chevrons/liens en accents graphiques ORANGE (4,6:1 sur le fond, AA). */
footer{background:var(--color-footer);color:rgba(255,255,255,.92);color:color-mix(in srgb,var(--color-on-footer) 92%,transparent);font-size:var(--text-sm);padding:clamp(3rem,4.5vw,3.75rem) 0 0}
/* Signature institutionnelle : logo officiel Essonne (blanc) en tête du pied de page. */
.foot-brand{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);margin-bottom:clamp(1.75rem,3vw,2.5rem);padding-bottom:clamp(1.75rem,3vw,2.5rem);border-bottom:1px solid rgba(255,255,255,.14);border-bottom-color:color-mix(in srgb,var(--color-on-footer) 14%,transparent)}
.foot-brand img{height:54px;width:auto;display:block}
.foot-brand.est-lien{display:block;transition:opacity var(--dur-2)}
.foot-brand.est-lien:hover{opacity:.82}
footer .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(2rem,3.5vw,3rem);padding-bottom:clamp(2.25rem,3vw,3rem)}
/* Titres du pied de page : des H2 (RGAA 9.1 — les h4 créaient un saut h2→h4
   sur toutes les pages) à l'ASPECT de petits intertitres, inchangé. */
footer .foot-h{color:var(--color-on-footer);font-size:var(--text-base);font-weight:var(--weight-bold);letter-spacing:0;margin-bottom:var(--space-3)}
footer p{line-height:var(--leading-loose)}
footer a{color:var(--color-footer-accent);text-underline-offset:2px}
.foot-nav{list-style:none;display:grid;gap:var(--space-2)}
.foot-nav a{text-decoration:none;color:rgba(255,255,255,.92);color:color-mix(in srgb,var(--color-on-footer) 92%,transparent);display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px}
.foot-nav a::before{content:"›";color:var(--color-footer-accent);font-weight:var(--weight-black)}
.foot-nav a:hover{color:var(--color-on-footer);text-decoration:underline;text-underline-offset:2px}
.foot-bas{background:rgba(0,0,0,.22);font-size:var(--text-xs);padding:var(--space-4) 0;color:rgba(255,255,255,.62);color:color-mix(in srgb,var(--color-on-footer) 62%,transparent);display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.foot-bas{padding-inline:var(--gutter)}
.foot-bas .foot-top{color:var(--color-footer-accent);text-decoration:none;font-weight:var(--weight-medium);white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
.foot-bas .foot-top:hover{text-decoration:underline;text-underline-offset:2px}
@media(max-width:560px){.foot-bas{justify-content:center;text-align:center}}

/* Barre LÉGALE (liens réglementaires) : au-dessus de la barre basse, liens
   discrets soulignés — l'accent orange reste réservé aux chevrons/accents. */
.foot-legal{max-width:var(--container);margin-inline:auto;padding:var(--space-4) var(--gutter);display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);border-top:1px solid rgba(255,255,255,.14);border-top-color:color-mix(in srgb,var(--color-on-footer) 14%,transparent)}
.foot-legal a{color:rgba(255,255,255,.92);color:color-mix(in srgb,var(--color-on-footer) 92%,transparent);text-decoration:underline;text-underline-offset:3px;font-size:var(--text-sm);min-height:var(--tap-min);display:inline-flex;align-items:center}
.foot-legal a:hover{color:var(--color-on-footer)}
/* « Gérer les cookies » est un BOUTON (exigence du JS Complianz) habillé comme
   les liens voisins. */
.foot-legal button.prd931-cookies{background:none;border:0;padding:0;font:inherit;cursor:pointer;color:rgba(255,255,255,.92);color:color-mix(in srgb,var(--color-on-footer) 92%,transparent);text-decoration:underline;text-underline-offset:3px;font-size:var(--text-sm);min-height:var(--tap-min);display:inline-flex;align-items:center}
.foot-legal button.prd931-cookies:hover{color:var(--color-on-footer)}

/* Pied de page — bandeau d'inscription à la lettre d'information */
.foot-nl{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);margin-bottom:clamp(1.75rem,3vw,2.5rem);padding-bottom:clamp(1.75rem,3vw,2.5rem);border-bottom:1px solid rgba(255,255,255,.14);border-bottom-color:color-mix(in srgb,var(--color-on-footer) 14%,transparent);display:grid;grid-template-columns:1fr minmax(300px,440px);gap:clamp(1.5rem,3.5vw,3rem);align-items:center}
.foot-nl-lead .foot-h{color:var(--color-on-footer);font-size:var(--text-lg);margin:0 0 var(--space-2)}
.foot-nl-lead p{margin:0;color:rgba(255,255,255,.92);color:color-mix(in srgb,var(--color-on-footer) 92%,transparent);max-width:34rem;line-height:var(--leading-relaxed)}
.foot-nl-form{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.foot-nl-row{display:flex;gap:var(--space-2);flex-wrap:wrap}
.foot-nl-row input[type="email"]{flex:1 1 200px;min-width:0;border:1px solid rgba(255,255,255,.24);border-color:color-mix(in srgb,var(--color-on-footer) 24%,transparent);border-radius:var(--radius-pill);padding:var(--space-3) var(--space-5);font-family:inherit;font-size:var(--text-base);background:rgba(255,255,255,.97);color:var(--color-text)}
.foot-nl-row input[type="email"]:focus-visible{outline:var(--plan-focus) solid var(--color-footer-accent);outline-offset:2px}
.foot-nl-btn{flex-shrink:0;background:var(--color-surface);color:var(--color-footer);border:2px solid var(--color-surface);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-6);font-family:inherit;font-weight:var(--weight-bold);font-size:var(--text-btn);text-transform:uppercase;letter-spacing:.03em;cursor:pointer;transition:background var(--dur-2,.15s) ease,color var(--dur-2,.15s) ease,border-color var(--dur-2,.15s) ease}
.foot-nl-btn:hover{background:var(--color-survol);color:var(--color-on-dark);border-color:var(--color-on-footer)}
.foot-nl-consent{display:flex;align-items:flex-start;gap:var(--space-2);font-size:var(--text-xs);color:rgba(255,255,255,.92);color:color-mix(in srgb,var(--color-on-footer) 92%,transparent);line-height:var(--leading-normal)}
.foot-nl-consent input{margin-top:var(--space-1);flex-shrink:0;width:22px;height:22px}
.foot-nl-consent a{color:var(--color-footer-accent);text-underline-offset:2px}
.foot-nl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.foot-nl-msg{padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm);margin:0;font-weight:var(--weight-medium)}
.foot-nl-msg.ok{background:color-mix(in srgb,var(--color-footer-accent) 24%,transparent);color:var(--color-on-footer)}
.foot-nl-msg.err{background:color-mix(in srgb,var(--impact-fort) 32%,transparent);color:var(--color-on-footer)}
@media(max-width:760px){.foot-nl{grid-template-columns:1fr}}

/* ================================================================
   15 bis. PAGES LÉGALES + PLAN DU SITE
   ================================================================ */
/* Sections d'une page légale : colonne de lecture, titres charte, rythme. */
.legale .lead{margin-bottom:var(--space-block)}
.legale-sec{max-width:var(--measure);margin-top:var(--space-block)}
.legale-sec h2{margin-bottom:var(--space-4)}
.legale-corps ul{margin:var(--space-3) 0 var(--space-3) var(--space-6);list-style:disc}
.legale-corps li{color:var(--color-text-body);line-height:var(--leading-relaxed);margin-bottom:var(--space-2)}
.legale-corps li::marker{color:var(--color-accent)}
.legale-corps a{color:var(--color-brand);text-underline-offset:2px;overflow-wrap:anywhere}
/* Plan du site : colonnes de listes de liens. */
.plan-site .lead{margin-bottom:var(--space-block)}
.plan-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gap-grid);margin-top:var(--space-block)}
.plan-col h2{font-size:var(--text-lg);margin-bottom:var(--space-4)}
.plan-liste{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-1)}
.plan-liste a{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--tap-min);color:var(--color-brand);text-decoration:underline;text-underline-offset:3px}
.plan-liste a::before{content:"›";color:var(--color-accent);font-weight:var(--weight-black);text-decoration:none}
.plan-liste a:hover{text-decoration-thickness:2px}

/* ================================================================
   15 ter. BANNIÈRE DE CONSENTEMENT (Complianz) — habillage CHARTE.
   Le plugin expose ses réglages en variables --cmplz_* : on les re-pointe
   sur NOS tokens (zéro couleur en dur, la bannière suit la charte et
   l'écran « Couleurs »). Accepter = bouton plein bleu ; Refuser = contour
   bleu (refus aussi visible que l'acceptation — exigence CNIL) ;
   préférences = lien. Radius/typo alignés sur le composant bouton.
   ================================================================ */
.cmplz-cookiebanner{
	--cmplz_banner_background_color:var(--color-surface);
	--cmplz_banner_border_color:var(--color-border);
	--cmplz_banner_border_radius:var(--radius-md);
	--cmplz_button_accept_background_color:var(--color-brand);
	--cmplz_button_accept_border_color:var(--color-brand);
	--cmplz_button_accept_text_color:var(--color-on-dark);
	--cmplz_button_deny_background_color:var(--color-surface);
	--cmplz_button_deny_border_color:var(--color-brand);
	--cmplz_button_deny_text_color:var(--color-brand);
	--cmplz_button_settings_background_color:var(--color-surface);
	--cmplz_button_settings_border_color:var(--color-border);
	--cmplz_button_settings_text_color:var(--color-brand);
	--cmplz_button_border_radius:var(--radius-pill);
	--cmplz_hyperlink_color:var(--color-brand);
	font-family:var(--font-texte);
	box-shadow:var(--shadow-lg);
}
.cmplz-cookiebanner .cmplz-header .cmplz-title{color:var(--color-titre);font-weight:var(--weight-bold)}
.cmplz-cookiebanner .cmplz-message{color:var(--color-text-body)}
.cmplz-cookiebanner .cmplz-btn{font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-wide);transition:background var(--dur-2),color var(--dur-2),border-color var(--dur-2)}
/* Boutons de bannière à 14px (sous le palier « grand texte ») : le survol
   n'utilise PAS #248eb2 (blanc 3,76:1 < 4,5) — assombrissement AA, comme
   les micro-contrôles du header. */
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover{background:var(--color-brand-night);border-color:var(--color-brand-night)}
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover,.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover{background:var(--color-brand);color:var(--color-on-dark);border-color:var(--color-brand)}
.cmplz-cookiebanner .cmplz-links a,.cmplz-cookiebanner a{color:var(--color-brand);text-underline-offset:2px}
.cmplz-cookiebanner .cmplz-close:focus-visible,.cmplz-cookiebanner .cmplz-btn:focus-visible{outline:3px solid var(--color-survol);outline-offset:2px}
/* RGAA 10.4 — la largeur de la bannière est fixée par le plugin dans une unité
   qui SUIT la taille des caractères : à 200 % de zoom TEXTE sur un écran de
   360 px, elle mesurait ~494 px et débordait de l'écran (174 px de défilement
   horizontal). Le plafond ci-dessous la ramène dans le viewport sans toucher au
   markup du plugin ni à sa logique de consentement. */
.cmplz-cookiebanner{max-width:calc(100vw - var(--space-4)) !important}
.cmplz-cookiebanner .cmplz-divider{max-width:100%}

/* ================================================================
   16. RESPONSIVE
   ================================================================ */
@media(max-width:1024px){
  .objs{grid-template-columns:1fr}
  .contact-card{grid-template-columns:1fr}
  .ph-head{gap:var(--space-4);padding:var(--space-5)}
  .ph-rond{width:48px;height:48px;font-size:var(--text-md)}
  .ph-body{padding-left:var(--space-5)}
}
/* Sous 980px le header se resserre : le co-branding Essonne passe en retrait (il
   reste en signature dans le footer) et les 2 boutons de phase descendent en BARRE
   PLEINE LARGEUR (2 colonnes égales) sous la marque — toujours visibles, cibles
   ≥ 44px, rien ne déborde (mesuré 360/390/414). */
@media(max-width:980px){
  .head-sep,.head-moa{display:none}
  /* GRID explicite (déterministe — flex-wrap replierait les actions au lieu de
     rétrécir la marque) : rangée 1 = marque (colonne rétrécissable, titre sur
     2 lignes max — jamais la colonne de 4 lignes de l'audit de juin) + actions ;
     rangée 2 = les 2 boutons de phase pleine largeur. */
  .head-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;row-gap:var(--space-3)}
  .head-left{grid-row:1;grid-column:1;min-width:0}
  .marque,.marque-txt{min-width:0}
  .head-actions{grid-row:1;grid-column:2;justify-self:end}
  .head-phases{grid-row:2;grid-column:1 / -1;margin-left:0;display:grid;grid-template-columns:1fr 1fr}
}
/* Très petits écrans : boutons de phase resserrés (libellé sur une seule ligne),
   actions compactées et titre de marque un cran plus petit — le titre tient en
   2 lignes (3 très compactes à 360px), jamais la colonne mot-à-mot. */
@media(max-width:480px){
  .head-phases{gap:var(--space-1)}
  /* Texte réduit (12px) = plus « grand texte » WCAG : le survol quitte le
     #248eb2 charte pour un assombrissement bleu nuit (blanc 14:1, AA).
     Le BORD reste BLANC : nuit sur bleu ne fait que 1,54:1 — le blanc
     délimite le composant à 9,13:1 contre le bandeau (RGAA 3.3). */
  .head-phases .btn{min-height:44px;padding:.6em .4em;font-size:var(--text-2xs);letter-spacing:.02em;--btn-hover-bg:var(--color-brand-night);--btn-hover-border:var(--color-on-header)}
  .marque-txt strong{font-size:var(--text-marque-sm)}
  .menu-toggle{padding:var(--space-2) var(--space-4);min-height:44px}
}

/* ================================================================
   17. MOUVEMENT RÉDUIT (a11y)
   ================================================================ */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .repo:hover,.play:hover,.g-row:hover .g-bar,.btn:hover,a.repo:hover .vis img{transform:none}
}

/* ================================================================
   18. ACCESSIBILITÉ — contrastes (audit 2026-06, WCAG 2.1 AA)
   ================================================================ */
/* Badge de phase (« Phase 1/2 ») sur fond teal */
.page-tete .badge{color:var(--color-on-accent-texte)}
/* Unité des grands chiffres (sur bleu) : blanc lisible plutôt que teal */
.chiffre .v small{color:var(--color-decor)}  /* accent orange charte (4,6:1 sur bleu nuit, AA) */
/* Carte contact : fond teal foncé UNI (aplat) pour que texte + liens blancs passent AA */
.contact-card .mail-box{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
/* Lien d'évitement clavier */
.skip-link{position:absolute;left:var(--space-4);top:-60px;z-index:1000;background:var(--color-surface);color:var(--color-brand);font-weight:var(--weight-bold);padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);transition:top var(--dur-2)}
.skip-link:focus{top:var(--space-4)}
/* Masquage accessible standard (WP) : lu par les lecteurs d'écran, invisible à l'œil. */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;padding:0;overflow:hidden;position:absolute;word-wrap:normal!important}

/* Résultats de recherche (search.php) */
.search-refine{display:flex;gap:var(--space-2);max-width:560px;margin:var(--space-6) 0 var(--space-block)}
.search-refine input{flex:1;min-width:0;border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:var(--space-3) var(--space-5);font-family:inherit;font-size:var(--text-base);color:var(--color-text)}
.search-refine input:focus-visible{outline:2px solid var(--color-brand);outline-offset:1px}
.search-refine button{background:var(--color-brand);color:var(--color-on-dark);border:0;border-radius:var(--radius-pill);padding:0 var(--space-6);min-height:48px;font-family:inherit;font-weight:var(--weight-bold);font-size:var(--text-btn);text-transform:uppercase;cursor:pointer;transition:background var(--dur-2)}
.search-refine button:hover{background:var(--color-survol)}
.search-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4)}
.search-item-link{display:block;padding:var(--space-5) var(--space-6);border:1px solid var(--color-border);border-radius:var(--card-radius);background:var(--color-surface);text-decoration:none;box-shadow:var(--shadow-sm);transition:transform var(--dur-1) var(--ease-out),border-color var(--dur-2)}
.search-item-link:hover{border-color:var(--color-brand);transform:translateY(-2px)}
.search-item-type{display:inline-block;font-size:var(--text-2xs);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--color-brand);margin-bottom:var(--space-2)}
.search-item-title{margin:0 0 var(--space-2);color:var(--color-brand);font-size:var(--text-lg)}
.search-item-desc{margin:0;color:var(--color-text-body);font-size:var(--text-sm);line-height:var(--leading-relaxed)}

/* Bouton « Phase en cours » du header = indicateur live (pastille). PERMANENT
   (comme « Prochaine phase ») : sous 980px les 2 boutons passent en barre pleine
   largeur dans le header (cf. .head-phases), jamais masqués. */
.head-phase{gap:.5ch}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 0 0 transparent;animation:prd931-pulse 1.8s infinite;flex-shrink:0}
/* Message « adresse à venir » dans la carte contact */
.mail-todo{display:inline-block;margin-top:var(--space-2);font-size:var(--text-sm);font-style:italic;opacity:.92}
@media(prefers-reduced-motion:reduce){.live-dot{animation:none}}