/* ================================================================
   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 (échelles) — */
  --c-blue-500:#1a4ea3;
  --c-blue-600:#164496;   /* bleu Essonne */
  --c-blue-700:#0f2f6b;
  --c-blue-900:#152b51;
  --c-blue-50:#e7eefb;
  --c-teal-400:#19c6ba;
  --c-teal-500:#15baaf;   /* vert pont */
  --c-teal-700:#0e8a82;
  --c-teal-50:#e4f7f5;
  --c-teal-ink:#04302d;
  --c-cyan:#33ccff;       /* cyan essonne (--color-2--1) : bloc décalé du hero */
  --c-cyan-pale:#c2f0ff;  /* cyan pâle essonne (--color-2--3) : rayons décoratifs */
  --c-amber-400:#f2c14e;
  --c-orange-400:#ef8f3c;
  --c-orange-500:#ee7203;  /* orange marque RD931 (RVB 238-114-3) */
  --c-orange-700:#b85400;  /* orange profond : fond de l'en-tête, texte blanc lisible AA */
  --c-red-400:#d94f47;
  --c-red-50:#fbeae9;
  --c-amber-50:#fff6e9;
  --c-amber-200:#f1d49f;
  --c-amber-ink:#b9690f;
  --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-50:#f3f5f9;
  --c-grey-100:#eaeef5;
  --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 calée sur essonne.fr (1rem=10px chez eux → px convertis en rem/16 ici) :
     corps 18 · lead 20 · h3/nav 22 · legend 28 · titres .title 28→45 · boutons 13. */
  --text-2xs:.75rem;    /* 12px — helper essonne */
  --text-xs:.8125rem;   /* 13px — boutons essonne (.btn 1.3rem) */
  --text-sm:.9375rem;   /* 15px */
  --text-base:1.125rem; /* 18px — corps essonne */
  --text-md:1.375rem;   /* 22px — chapô/lead, mesuré sur essonne.fr (22px) */
  --text-marque-sm:1.1875rem; /* 19px — marque en petit écran : ≥ 14pt gras = palier
                                 « grand texte » WCAG (seuil de contraste 3:1) */
  --text-lg:1.375rem;   /* 22px — h3 / nav essonne (2.2rem) */
  --text-xl:1.75rem;    /* 28px — legend essonne (2.8rem) */
  --text-2xl:2.25rem;   /* 36px */
  --text-3xl:3rem;      /* 48px — chiffres clés */
  --text-h1:clamp(2.25rem,5vw,3.4375rem);  /* 36→55px — H1 mesuré sur essonne.fr (55px) */
  --text-h2:clamp(1.5rem,2.6vw,1.75rem);   /* 24→28px — H2 essonne.fr (28px, graisse 900) */
  --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-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;
  --z-overlay:70;       /* voile du menu mobile */
  --z-drawer:80;        /* panneau du menu mobile */
  --z-drawer-toggle:90; /* burger au-dessus du panneau (devient la croix de fermeture) */

  /* — 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 — */
  --color-brand:var(--c-blue-600);
  --color-brand-light:var(--c-blue-500);
  --color-brand-dark:var(--c-blue-700);
  --color-brand-night:var(--c-blue-900);
  --color-accent:var(--c-teal-500);
  --color-accent-light:var(--c-teal-400);
  --color-accent-dark:var(--c-teal-700);

  /* — Surfaces — */
  --color-bg:var(--c-grey-100);          /* canvas de page (cartes blanches ressortent) */
  --color-surface:var(--c-white);        /* cartes */
  --color-surface-alt:var(--c-grey-50);  /* zones légèrement teintées */
  --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-orange-700);   /* fond du bandeau d'en-tête (charte RD931) */
  --color-on-header:var(--c-white);      /* texte du bandeau (réglable : Pont RD931 > Couleurs) */
  --color-on-dark-soft:rgba(255,255,255,.92);
  --color-on-dark-muted:rgba(255,255,255,.72);

  /* — Sémantique « impact » (fort/finitions assombris : le blanc passe WCAG AA dessus) — */
  --impact-faible:var(--c-amber-400);
  --impact-moyen:var(--c-orange-400);
  --impact-fort:#c5392f;
  --impact-finitions:#0c7a72;

  /* — Surfaces unies « marque » (aplats, charte essonne.fr — zéro dégradé) — */
  --surface-brand:var(--color-brand);          /* fond bleu plein des sections/titres de page */
  --surface-brand-deep:var(--color-brand-night);/* fond bleu nuit (hero/footer) */
  --surface-contact:var(--impact-finitions);   /* carte contact : teal foncé AA avec blanc */
  /* Entête de page (2e bloc, sous le bandeau orange) : orange marque à 47 % — fond CLAIR,
     donc son contenu passe en encre navy (le blanc n'y tient pas le contraste). */
  --surface-tete:#b8540078;
  --color-on-tete:var(--color-brand-night);
  --surface-tete-soft:rgba(21,43,81,.12);      /* pastille « PHASE n » sur ce fond clair */
  --surface-tete-decor:var(--c-orange-700);    /* rayons repeints dans l'orange de la marque */

  /* — 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 des phases, toutes issues de la palette marque essonne). Chaque
     valeur brute vit ICI (token) ; les règles composant n'utilisent que des var(). — */
  --plan-macro-1:var(--c-blue-500);
  --plan-macro-2:var(--c-blue-700);
  --plan-macro-3:var(--c-teal-700);
  --plan-macro-4:var(--c-blue-900);
  --plan-macro-1-soft:var(--c-blue-50);
  --plan-macro-2-soft:var(--c-blue-50);
  --plan-macro-3-soft:var(--c-teal-50);
  --plan-macro-4-soft:var(--c-blue-50);
  --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-cta:var(--impact-finitions);   /* pastille « Plus de détails » : teal foncé, AA avec blanc (comme la carte contact) */
  --tap-min:44px;                       /* cible tactile minimale (WCAG 2.5.5) */

  /* — Bande d'accès conditionnel « Travaux à venir » (teal foncé, AA avec blanc,
     distinct du bleu de l'en-tête ; aplat, zéro dégradé) — */
  --band-avenir:var(--impact-finitions);
  --band-avenir-hover:var(--c-teal-ink);
}

/* ================================================================
   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 les couches fixes plein écran (.nav-overlay
   inset:0, .menu-overlay) 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)}
:focus-visible{outline:3px solid var(--color-accent);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)}

/* 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-accent-dark)}

/* ================================================================
   5. TYPOGRAPHIE
   ================================================================ */
h1,h2,h3,h4{color:var(--color-brand);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-black);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);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
   ================================================================ */
/* Boutons : forme essonne.fr — pill, bordure 1px, UPPERCASE, padding généreux,
   aucun glow (aplats nets). */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-weight:var(--weight-medium);font-size:var(--text-xs);line-height:1.2;
  text-transform:uppercase;letter-spacing:var(--tracking-wide);text-decoration:none;
  /* Proportions « chunky » essonne (.btn : min-height 63px, padding 1.7em 3.3em). */
  min-height:60px;padding:1.55em 2.9em;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),border-color var(--dur-2),box-shadow var(--dur-2);
}
.btn-bleu{background:var(--color-brand);color:var(--color-on-dark)}
.btn-bleu:hover{background:var(--color-brand-dark);border-color:var(--color-brand-dark);transform:translateY(-2px)}
.btn-vert{background:var(--color-accent);color:var(--color-on-dark);border-color:var(--color-accent)}
.btn-vert:hover{background:var(--color-accent-dark);border-color:var(--color-accent-dark);transform:translateY(-2px)}
.btn-ligne{background:transparent;color:var(--color-brand)}
.btn-ligne:hover{background:var(--color-brand);color:var(--color-on-dark)}
.btn-blanc{background:var(--color-surface);color:var(--color-header);border-color:var(--color-surface)}
.btn-blanc:hover{background:transparent;color:var(--color-on-dark);border-color:var(--color-on-dark)}

/* ================================================================
   7. HEADER / NAV / BURGER
   ================================================================ */
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). */
.head-left{display:flex;align-items:center;gap:var(--space-5);min-width:0}
.head-sep{width:1px;height:46px;background:rgba(255,255,255,.28);background:color-mix(in srgb,var(--color-on-header) 28%,transparent);flex-shrink:0}
.head-moa{display:flex;align-items:center;flex-shrink:0}
.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:.85em 1.5em;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)}
.head-next:hover{background:var(--color-surface);color:var(--color-header);border-color:var(--color-surface)}

/* ===== Menu « EN 1 CLIC » (essonne .click) : déclencheur header + panneau grille ===== */
/* Déclencheur : icône grille 4 carrés + label, sur le bleu du header. */
.clic-toggle{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:64px;min-height:48px;padding:var(--space-2) var(--space-3);background:transparent;border:0;border-radius:var(--radius-sm);color:var(--color-on-header);cursor:pointer;flex-shrink:0;transition:background var(--dur-2)}
.clic-toggle:hover,.clic-toggle[aria-expanded="true"]{background:rgba(255,255,255,.18)}
.clic-toggle-ico svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.clic-toggle-txt{font-size:var(--text-2xs);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-wide);line-height:1}
.clic-toggle:focus-visible{outline:2px solid var(--color-on-header);outline-offset:2px}

/* Voile (clic-dehors). Présent à tous les écrans (le panneau remplace la nav). */
.nav-overlay{position:fixed;inset:0;z-index:var(--z-overlay);background:color-mix(in srgb,var(--color-brand-night) 62%,transparent);opacity:0;visibility:hidden;transition:opacity var(--dur-3) var(--ease-out);cursor:pointer;border:0}
.nav-overlay.open{opacity:1;visibility:visible}
body.clic-open{overflow:hidden}

/* Panneau blanc : fixe sous le déclencheur (haut-droite), pointe vers lui. */
.clic-panel{position:fixed;top:calc(var(--header-h,84px) + 10px);right:clamp(8px,3vw,28px);width:min(540px,92vw);
  background:var(--color-surface);border-radius:var(--radius-md);overflow:hidden;
  box-shadow:0 0 0 1px var(--color-border),0 18px 50px rgba(15,23,42,.28);
  z-index:var(--z-drawer);transform:translateY(-8px);opacity:0;visibility:hidden;
  transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out),visibility var(--dur-3)}
.clic-panel.open{transform:translateY(0);opacity:1;visibility:visible}
/* Pointe (triangle aplat) vers le déclencheur. */
.clic-panel::before{content:"";position:absolute;top:-10px;right:30px;width:0;height:0;border-style:solid;border-width:0 11px 11px 11px;border-color:transparent transparent var(--color-surface) transparent}
/* Bandeau haut : titre + fermeture. */
.clic-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-4) var(--space-5);background:var(--color-surface-alt);border-bottom:1px solid var(--color-border)}
.clic-top-title{font-weight:var(--weight-bold);color:var(--color-brand);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-wide)}
.clic-close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;background:transparent;color:var(--color-brand);border-radius:50%;cursor:pointer;transition:background var(--dur-2)}
.clic-close:hover{background:rgba(15,23,42,.08)}
.clic-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.clic-close:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}
/* Grille : 3 colonnes (essonne .click__item 33.33%, min-height 104px). */
.clic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);padding:var(--space-5)}
.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(--c-blue-50);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(--c-cyan);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:rgba(51,204,255,.16)}
.menu-toggle:focus-visible{outline:2px solid var(--c-cyan);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-3) var(--space-6);font-family:inherit;font-weight:var(--weight-bold);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.03em;cursor:pointer}
.menu-fermer:hover{background:var(--color-brand-dark)}
.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:#fff;stroke-width:2.2;stroke-linecap:round}
.menu-search button:hover{background:var(--color-brand-dark)}
/* 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(--c-blue-50)}
.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-black);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}
}

/* ⚠ 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-accent-dark);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)}
.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-accent);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(--c-teal-50);color:var(--color-accent-dark)}
.nl-err{background:var(--c-red-50);color:var(--impact-fort)}

/* ================================================================
   8. HERO — reconstitution fidèle du 1er écran essonne.fr (CSS public
   relevé, 1rem=10px, adapté à notre conteneur 1200px) :
   photo arrondie côté intérieur (30px) qui déborde à droite, POSÉE DROITE
   (bloc cyan décalé et inclinaison retirés — demande client 22/07/2026)
   + rayons RÉELS essonne (SVG self-hostés) + 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(--c-blue-50);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}
}
.hero-inner{position:relative;z-index:2}
/* 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)}
/* Petit éclat de rayons RÉELS essonne au coin haut-gauche de la carte
   (essonne .form__controls-group::after : 160×192, top:-54 left:-64, z-index:-1) — tous breakpoints. */
.hero-card::before{content:"";position:absolute;top:-50px;left:-54px;width:150px;height:178px;background:url("../img/hero-rays-tablet.svg") no-repeat;background-size:contain;z-index:-1;pointer-events:none}
.hero-card .puce{display:inline-block;background:var(--color-accent);color:var(--c-teal-ink);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);margin-bottom:var(--space-5)}
.hero-card h1{color:var(--color-brand);margin-bottom:var(--space-5)}
.hero-card h1 u{text-decoration:none;color:var(--color-accent-dark)}
/* 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 —
   teal / bleu — 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:clamp(2rem,3vw,2.7rem)}
  .hero-card::before{display:none} /* un seul soleil sur desktop : le grand (essonne). */
}

/* ---- 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-dark)}
/* 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)}

/* ---- 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-dark)}

/* ---- 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}
}

/* ================================================================
   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)}

/* Titre de section décoré « rayonnement » (essonne .title__text::before).
   Petit éclat de rayons RÉELS essonne (rayonnement-header.svg) au coin haut-gauche,
   derrière le texte (z-index:-1, le titre forme son propre contexte d'empilement). */
.sec-title{position:relative;z-index:1;width:max-content;max-width:100%}
.sec-title::before{content:"";position:absolute;top:-26px;left:-40px;width:84px;height:98px;
  background:url("../img/hero-rays-tablet.svg") no-repeat;background-size:contain;z-index:-1;pointer-events:none}
@media(max-width:600px){
  .sec-title::before{top:-14px;left:-22px;width:52px;height:61px}
}


/* 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(--c-teal-50);display:flex;align-items:center;justify-content:center;margin-bottom:var(--ico-gap)}
.obj:nth-child(2) .ico{background:var(--c-blue-50)}
.obj .ico svg{width:28px;height:28px;color:var(--color-accent-dark)}
.obj:nth-child(2) .ico svg{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:.34em;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 cyan signature
   essonne (AA sur navy), 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(--c-cyan)}
.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-accent-dark)}
.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(--c-blue-900)}
.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);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);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(--c-cyan)}
.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(--c-cyan)}
.cmp-key.ap{background:var(--color-accent)}

/* Partenaires */
.logos{display:flex;gap:var(--gap-inline);flex-wrap:wrap;justify-content:center;margin-top:var(--space-block)}
.logo-c{background:var(--card-bg);border:var(--card-border);border-radius:var(--radius-sm);padding:var(--space-5) var(--space-6);font-size:var(--text-xs);color:var(--color-text-soft);font-weight:var(--weight-medium);flex:1 1 200px;max-width:250px;min-height:104px;text-align:center;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.logo-c img{max-height:56px;max-width:100%;width:auto;height:auto;object-fit:contain;display:block}

/* « 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 navy (--color-brand) rotation -8° en haut-gauche + bloc cyan (--c-cyan)
   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 » essonne PARTAGÉ : vignettes accueil + cartes reportage
   (mêmes blocs navy+cyan 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(--c-cyan);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;border-bottom:3px solid var(--color-accent)}
/* Rayonnement essonne dans l'entête de page (rayons RÉELS #c2f0ff sur le bleu),
   posé à DROITE pour ne pas heurter le fil + titre alignés à gauche. */
.page-tete::after{content:"";position:absolute;top:-34px;right:-30px;width:210px;height:246px;background:url("../img/hero-rays-tablet.svg") no-repeat;background-size:contain;opacity:.5;z-index:0;pointer-events:none}
/* Le SVG des rayons est en cyan pâle (pensé pour un fond bleu foncé) : sur ce fond clair
   on repeint la MÊME forme en masque, dans l'orange de la marque. Repli = le SVG cyan. */
@supports ((mask-image:url("../img/hero-rays-tablet.svg")) or (-webkit-mask-image:url("../img/hero-rays-tablet.svg"))){
	.page-tete::after{background:var(--surface-tete-decor);-webkit-mask:url("../img/hero-rays-tablet.svg") no-repeat center/contain;mask:url("../img/hero-rays-tablet.svg") no-repeat center/contain;opacity:.4}
}
.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)}
.page-tete h1{color:var(--color-on-tete)}
.page-tete .badge{display:inline-block;background:var(--color-accent);padding:var(--space-2) var(--space-4);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}

/* ================================================================
   11. FRISE HISTOIRE / ENCARTS
   ================================================================ */
/* Frise historique = timeline essonne : rail latéral coloré (alterné brand/teal)
   + 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(--c-blue-50);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(--c-teal-50);color:var(--color-accent-dark)}
.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(--c-teal-50);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-accent-dark);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(--c-blue-50)}
.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)}

/* — 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-accent);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-accent);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-accent-dark);background:var(--c-teal-50);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(--color-accent-light)}
.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). */
@keyframes prd931-pulse{0%{box-shadow:0 0 0 0 rgba(21,186,175,.55)}70%{box-shadow:0 0 0 9px rgba(21,186,175,0)}100%{box-shadow:0 0 0 0 rgba(21,186,175,0)}}

/* ================================================================
   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(--c-blue-50);display:flex;align-items:center;justify-content:center;margin-bottom:var(--ico-gap)}
.imp.crit .ico{background:var(--c-red-50)}
.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(--c-amber-50);border:1px solid var(--c-amber-200);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(--c-amber-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(--c-blue-50);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-accent-dark);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)}
.repo.avenir{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-brand);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-brand);transform:translateY(-2px);text-decoration:none}
.nav-bas a:last-child{background:var(--c-cyan-pale);border-color:var(--c-cyan-pale);color:var(--color-brand-night)}
.nav-bas a:last-child:hover{border-color:var(--c-cyan)}

footer{background:var(--color-brand-night);color:var(--color-on-dark-soft);font-size:var(--text-sm);padding:clamp(3rem,4.5vw,3.75rem) 0 0}
/* Signature institutionnelle : logo officiel Essonne (blanc) en tête du footer navy. */
.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)}
.foot-brand img{height:54px;width:auto;display:block}
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)}
footer h4{color:var(--color-on-dark);font-size:var(--text-base);margin-bottom:var(--space-3)}
footer p{line-height:var(--leading-loose)}
footer a{color:var(--color-accent)}
.foot-nav{list-style:none;display:grid;gap:var(--space-2)}
.foot-nav a{text-decoration:none;color:var(--color-on-dark-soft);display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px}
.foot-nav a::before{content:"›";color:var(--color-accent);font-weight:var(--weight-black)}
.foot-nav a:hover{color:var(--color-on-dark);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);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-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}}

/* Pied de page — bandeau d'inscription à la lettre d'information (fond navy) */
.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);display:grid;grid-template-columns:1fr minmax(300px,440px);gap:clamp(1.5rem,3.5vw,3rem);align-items:center}
.foot-nl-lead h4{color:var(--color-on-dark);font-size:var(--text-lg);margin:0 0 var(--space-2)}
.foot-nl-lead p{margin:0;color:var(--color-on-dark-soft);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-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-accent);outline-offset:2px}
.foot-nl-btn{flex-shrink:0;background:var(--color-surface);color:var(--color-brand);border:2px solid var(--color-surface);border-radius:var(--radius-pill);padding:var(--space-3) var(--space-6);font-family:inherit;font-weight:var(--weight-bold);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.03em;cursor:pointer;transition:background var(--dur-2,.15s) ease,color var(--dur-2,.15s) ease}
.foot-nl-btn:hover{background:transparent;color:var(--color-on-dark);border-color:var(--color-on-dark)}
.foot-nl-consent{display:flex;align-items:flex-start;gap:var(--space-2);font-size:var(--text-xs);color:var(--color-on-dark-soft);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-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-accent) 24%,transparent);color:var(--color-on-dark)}
.foot-nl-msg.err{background:color-mix(in srgb,var(--impact-fort) 32%,transparent);color:var(--color-on-dark)}
@media(max-width:760px){.foot-nl{grid-template-columns:1fr}}

/* ================================================================
   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)}
}
/* Header au-dessus du voile quand le panneau « EN 1 CLIC » est ouvert
   (le déclencheur reste visible/cliquable pour refermer). */
body.clic-open header{z-index:var(--z-drawer-toggle)}
/* « EN 1 CLIC » mobile : panneau plein largeur sous le header, grille 2 colonnes. */
@media(max-width:640px){
  /* width:auto (pas 100vw : 100vw inclut la gouttière de scrollbar → 2–3 px de
     débordement). left:0 + right:0 dimensionnent le panneau sur la zone de contenu. */
  .clic-panel{top:var(--header-h,72px);right:0;left:0;width:auto;max-height:calc(100dvh - var(--header-h,72px));overflow-y:auto;border-radius:0}
  .clic-panel::before{display:none}
  .clic-grid{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){
  .clic-panel,.nav-overlay{transition-duration:.01ms}
}
/* 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)}
  .head-phases .btn{min-height:44px;padding:.6em .4em;font-size:var(--text-2xs);letter-spacing:.02em}
  .marque-txt strong{font-size:var(--text-marque-sm)}
  .clic-toggle{min-width:56px;padding:var(--space-2)}
  .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(--c-teal-ink)}
/* Unité des grands chiffres (sur bleu) : blanc lisible plutôt que teal */
.chiffre .v small{color:var(--c-cyan)}  /* accent cyan signature essonne (AA sur navy) */
/* 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:#fff;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-sm);cursor:pointer}
.search-refine button:hover{background:var(--color-brand-dark)}
.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-accent-dark);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 rgba(21,186,175,.6);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}}