/* ================================================================
   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-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.25rem;    /* 20px — lead / paragraphe de contenu essonne */
  --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.125rem,4.5vw,2.8rem);  /* 34→45px — gros titre essonne (.title 4.5rem) */
  --text-h2:clamp(1.75rem,3.4vw,2.5rem);   /* 28→40px — titre de section essonne */
  --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:1200px;
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --measure:64ch;
  --measure-narrow:54ch;

  /* — 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);
  --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-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 */

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

/* ================================================================
   3. RESET / BASE
   ================================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
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)}

/* 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-impact-faible{color:var(--impact-faible)}
.is-impact-moyen{color:var(--impact-moyen)}
.is-impact-fort{color:var(--impact-fort)}
.is-impact-finitions{color:var(--impact-finitions)}
.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-black);letter-spacing:var(--tracking-tight)}
h2{font-size:var(--text-h2);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)}
.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-brand);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-brand);color:var(--color-on-dark);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);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)}
.marque-ico{width:54px;height:54px;border-radius:50%;flex-shrink:0;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.marque-ico img{width:100%;height:100%;object-fit:cover;display:block}
.marque-ico svg{width:27px;height:27px}
.marque-txt strong{display:block;font-weight:var(--weight-black);font-size:var(--text-md);line-height:var(--leading-tight)}
.marque-txt span{font-size:var(--text-2xs);opacity:.82;font-weight:var(--weight-light);letter-spacing:.03em}
.head-actions{display:flex;gap:var(--space-2);align-items:center}

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

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

/* ================================================================
   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 + bloc
   CYAN #33ccff décalé (clip-path biseauté) derrière + rayons RÉELS
   essonne (SVG self-hostés) + carte titre (remplace le champ recherche).
   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}
.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)}
.hero-card p{font-size:var(--text-md);color:var(--color-text-body);line-height:var(--leading-relaxed);max-width:var(--measure-narrow)}
.hero-cta{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-7)}

/* ---- Desktop (>=1025px) : gabarit superposé essonne ---- */
@media(min-width:1025px){
  .hero-item{max-width:none;padding:0;min-height:560px;display:flex;align-items:center}
  /* Photo flottée à droite, débordant jusqu'au bord du viewport, démarrant à
     ~30% pour que la carte CHEVAUCHE vraiment la photo (signature essonne),
     légèrement cisaillée (essonne : transform matrix(1,-0.03,0.03,1,11,0)). */
  .hero-photo{position:absolute;top:34px;bottom:34px;left:30%;right:0;aspect-ratio:auto;
    border-radius:var(--radius-hero) 0 0 var(--radius-hero);
    transform:matrix(1,-0.03,0.03,1,11,0);box-shadow:none;z-index:1;margin:0}
  /* Bloc CYAN #33ccff décalé biseauté derrière le haut de la photo (clip-path essonne exact). */
  .hero-item::before{content:"";position:absolute;top:14px;right:0;width:66%;height:300px;
    background:var(--c-cyan);border-radius:var(--radius-hero);
    clip-path:polygon(0 0,98% 2%,100% 75%,0 19%);z-index:0;pointer-events:none}
  /* Grands rayons RÉELS essonne (rayonnement-header.svg), débordant à gauche du viewport.
     Dimensions essonne 497×563 / left:-106 / top:50 / contain. */
  .hero-item::after{content:"";position:absolute;top:50px;left:-104px;width:480px;height:560px;
    background:url("../img/hero-rays-desktop.svg") no-repeat;background-size:contain;z-index:0;pointer-events:none}
  /* Conteneur de la carte (largeur site, centré). */
  .hero-inner{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);width:100%}
  .hero-card{margin:0;width:min(46%,500px)}
  .hero-card::before{top:-54px;left:-62px;width:160px;height:190px}
}

/* ================================================================
   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) */
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,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)}

/* 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}
.slide{display:none}.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)}

/* 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)}
.vignette-photo img{display:block;width:100%;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-brand);color:var(--color-on-dark);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}
.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 h1{color:var(--color-on-dark)}
.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. */
.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)}
.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}
@media(max-width:680px){.fr-desc:has(.fr-img){grid-template-columns:1fr}}
@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-sm);line-height:var(--leading-relaxed)}

/* ================================================================
   12. PLANNING — GANTT + ACCORDÉON
   ================================================================ */
.legende{display:flex;gap:var(--space-6);flex-wrap:wrap;margin:var(--space-6) 0;font-size:var(--text-sm);color:var(--color-text-body)}
.legende span{display:flex;align-items:center;gap:var(--space-2)}
.legende i{width:16px;height:16px;border-radius:4px;display:inline-block}
.legende i.fa{background:var(--impact-faible)}
.legende i.mo{background:var(--impact-moyen)}
.legende i.fo{background:var(--impact-fort)}
.legende i.fin{background:var(--impact-finitions)}

/* ---- Planning : ruban proportionnel + cartes-étapes + panneau détail ----
   Données depuis le repeater « phases » (window.PRD_STEPS) ; sélection = site.js.
   Classes d'impact : fa/mo/fo/fin (prd931_impact_class). */
.pl-ribbon-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)}
.pl-ribbon-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-4)}
.pl-ribbon-head h2{font-size:var(--text-base);font-weight:var(--weight-bold);color:var(--color-brand-night);letter-spacing:var(--tracking-snug)}
.pl-ribbon-head .span{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:var(--weight-medium)}
.pl-years{display:flex;margin-bottom:6px}
.pl-years .y{font-size:var(--text-2xs);font-weight:var(--weight-bold);color:var(--color-brand);border-left:1px solid var(--color-border);padding-left:8px}
.pl-years .y:first-child{border-left:none;padding-left:0}
.pl-ribbon{display:flex;width:100%;height:40px;border-radius:11px;overflow:hidden;background:var(--color-bg);gap:2px}
.pl-seg{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;font-family:inherit;transition:filter var(--dur-3) var(--ease-out);overflow:hidden}
.pl-seg:first-child{border-radius:11px 4px 4px 11px}
.pl-seg:last-child{border-radius:4px 11px 11px 4px}
.pl-seg.fa{background:var(--impact-faible)}
.pl-seg.mo{background:var(--impact-moyen)}
.pl-seg.fo{background:var(--impact-fort)}
.pl-seg.fin{background:var(--impact-finitions)}
.pl-seg .num{font-size:.82rem;font-weight:var(--weight-black);color:var(--color-on-dark);text-shadow:0 1px 2px rgba(0,0,0,.25)}
.pl-seg.fa .num{color:var(--color-brand-night);text-shadow:none}
.pl-seg:hover{filter:brightness(1.06)}
.pl-seg:focus-visible{outline:3px solid var(--color-brand);outline-offset:2px;z-index:2}
.pl-seg.is-active{box-shadow:inset 0 0 0 3px rgba(255,255,255,.85),inset 0 0 0 4px var(--color-brand-night)}
.pl-seg.is-current::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.18);pointer-events:none}

.pl-stepper{display:flex;align-items:stretch;overflow-x:auto;padding:6px 2px 18px;scroll-snap-type:x proximity;margin-top:var(--space-block)}
.pl-step{display:flex;align-items:stretch;flex:0 0 auto;scroll-snap-align:start}
.pl-connector{flex:0 0 38px;align-self:center;height:3px;background:#cfd6e6;position:relative}
.pl-connector::after{content:"";position:absolute;right:-1px;top:50%;width:8px;height:8px;border-top:2px solid #cfd6e6;border-right:2px solid #cfd6e6;transform:translateY(-50%) rotate(45deg)}
.pl-card{position:relative;width:250px;background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:var(--space-6) var(--space-5);cursor:pointer;text-align:left;font-family:inherit;color:inherit;display:flex;flex-direction:column;transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2),border-color var(--dur-2)}
.pl-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.pl-card:focus-visible{outline:3px solid var(--color-brand);outline-offset:3px}
.pl-card.is-active{border-color:var(--color-brand);box-shadow:0 0 0 2px var(--color-brand),var(--card-shadow)}
.pl-card.is-current{background:var(--color-surface);border-color:var(--color-accent)}
.pl-card.is-current::before{content:"";position:absolute;inset:0;border-radius:var(--radius-md);box-shadow:0 0 0 2px var(--color-accent);pointer-events:none}
.pl-pill{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:var(--weight-black);color:var(--color-on-dark);flex-shrink:0;margin-bottom:var(--space-4);box-shadow:0 4px 10px rgba(21,43,81,.18)}
.pl-pill.fa{background:var(--impact-faible);color:var(--color-brand-night)}
.pl-pill.mo{background:var(--impact-moyen)}
.pl-pill.fo{background:var(--impact-fort)}
.pl-pill.fin{background:var(--impact-finitions)}
.pl-badge{position:absolute;top:16px;right:16px;font-size:.62rem;font-weight:var(--weight-black);letter-spacing:.08em;text-transform:uppercase;color:var(--color-on-dark);background:var(--color-accent-dark);padding:5px 10px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;gap:6px}
.pl-badge .live{width:7px;height:7px;border-radius:50%;background:#bff7f2;animation:prd931-pulse 1.8s infinite}
@keyframes prd931-pulse{0%{box-shadow:0 0 0 0 rgba(191,247,242,.7)}70%{box-shadow:0 0 0 7px rgba(191,247,242,0)}100%{box-shadow:0 0 0 0 rgba(191,247,242,0)}}
.pl-name{font-size:var(--text-md);font-weight:var(--weight-bold);color:var(--color-brand-night);line-height:var(--leading-snug);letter-spacing:var(--tracking-snug);margin-bottom:var(--space-3)}
.pl-meta{margin-top:auto;display:flex;flex-direction:column;gap:7px}
.pl-meta-row{display:flex;align-items:center;gap:9px;font-size:var(--text-sm);color:var(--color-text-body)}
.pl-meta-row svg{flex-shrink:0;color:var(--color-brand)}
.pl-meta-row strong{color:var(--color-brand-night);font-weight:var(--weight-medium)}
.pl-tag{display:inline-flex;align-items:center;gap:7px;margin-top:13px;font-size:.74rem;font-weight:var(--weight-bold);padding:6px 12px;border-radius:var(--radius-pill);width:fit-content}
.pl-tag .idot{width:9px;height:9px;border-radius:50%}
.pl-tag.fa{background:#fdf4dd;color:#8a6a1d}.pl-tag.fa .idot{background:var(--impact-faible)}
.pl-tag.mo{background:#fdeede;color:#a85618}.pl-tag.mo .idot{background:var(--impact-moyen)}
.pl-tag.fo{background:#fae6e4;color:#a3322b}.pl-tag.fo .idot{background:var(--impact-fort)}
.pl-tag.fin{background:#dcf3f1;color:#0a6962}.pl-tag.fin .idot{background:var(--impact-finitions)}
.pl-more{margin-top:14px;font-size:.76rem;font-weight:var(--weight-medium);color:var(--color-brand);display:inline-flex;align-items:center;gap:6px;opacity:.85}
.pl-more svg{transition:transform var(--dur-2)}
.pl-card:hover .pl-more svg,.pl-card.is-active .pl-more svg{transform:translateX(3px)}

.pl-detail{background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);box-shadow:var(--card-shadow);overflow:hidden;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);min-height:340px;margin-top:var(--space-block)}
.pl-media{position:relative;background:var(--color-brand-night);overflow:hidden;min-height:300px}
.pl-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pl-media-tag{position:absolute;left:18px;bottom:18px;z-index:2;font-size:.72rem;font-weight:var(--weight-bold);letter-spacing:.04em;color:var(--color-on-dark);background:rgba(15,47,107,.62);padding:7px 13px;border-radius:var(--radius-pill)}
.pl-detail-body{padding:var(--card-pad-lg)}
.pl-detail-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:8px}
.pl-detail-pill{width:52px;height:52px;border-radius:15px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:var(--weight-black);color:var(--color-on-dark)}
.pl-detail-pill.fa{background:var(--impact-faible);color:var(--color-brand-night)}
.pl-detail-pill.mo{background:var(--impact-moyen)}
.pl-detail-pill.fo{background:var(--impact-fort)}
.pl-detail-pill.fin{background:var(--impact-finitions)}
.pl-detail-step{font-size:.72rem;font-weight:var(--weight-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--color-brand)}
.pl-detail-name{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:var(--weight-black);color:var(--color-brand-night);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);margin-top:4px}
.pl-flag{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:.74rem;font-weight:var(--weight-bold);letter-spacing:.05em;text-transform:uppercase;color:var(--color-accent-dark);background:#dcf3f1;padding:7px 13px;border-radius:var(--radius-pill)}
.pl-flag .live{width:8px;height:8px;border-radius:50%;background:var(--color-accent);animation:prd931-pulse 1.8s infinite}
.pl-stats{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}
.pl-stat{background:var(--color-bg);border-radius:14px;padding:12px 16px;flex:1;min-width:130px}
.pl-stat .lab{font-size:.68rem;font-weight:var(--weight-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:4px}
.pl-stat .val{font-size:var(--text-base);font-weight:var(--weight-bold);color:var(--color-brand-night)}
.pl-stat.impact .val{display:inline-flex;align-items:center;gap:8px}
.pl-stat.impact .idot{width:11px;height:11px;border-radius:50%}
.pl-stat.impact.fa .idot{background:var(--impact-faible)}
.pl-stat.impact.mo .idot{background:var(--impact-moyen)}
.pl-stat.impact.fo .idot{background:var(--impact-fort)}
.pl-stat.impact.fin .idot{background:var(--impact-finitions)}
.pl-desc{font-size:var(--text-md);color:var(--color-text-body);line-height:var(--leading-loose)}
.pl-desc p + p{margin-top:var(--space-3)}
@media(max-width:880px){.pl-detail{grid-template-columns:1fr}.pl-media{min-height:220px;order:-1}}
@media(max-width:560px){.pl-card{width:236px}.pl-connector{flex-basis:26px}.pl-stats{flex-direction:column}.pl-stat{min-width:0}}
@media(prefers-reduced-motion:reduce){.pl-badge .live,.pl-flag .live{animation:none}}

/* ================================================================
   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)}
.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)}
.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)}
.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}
.foot-bas .foot-top:hover{text-decoration:underline;text-underline-offset:2px}
@media(max-width:560px){.foot-bas{justify-content:center;text-align:center}}

/* ================================================================
   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){
  .clic-panel{top:var(--header-h,72px);right:0;left:0;width:100vw;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)}
  .head-phase{display:none}
}
@media(prefers-reduced-motion:reduce){
  .clic-panel,.nav-overlay{transition-duration:.01ms}
}
/* Sous 980px le header se resserre (bouton Travaux + nav) : le co-branding Essonne
   passe en retrait (il reste en signature dans le footer). */
@media(max-width:980px){
  .head-sep,.head-moa{display:none}
}
/* Très petits écrans : on retire le sous-titre de la marque pour dégager le titre. */
@media(max-width:480px){
  .marque-txt span{display:none}
}

/* ================================================================
   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)
   Texte foncé sur les fills clairs (faible/moyen) ; le blanc reste
   sur fort/finitions (tokens assombris plus haut). Texte « niveau
   d'impact » sur carte blanche = teintes foncées lisibles.
   ================================================================ */
/* « Niveau d'impact » (texte sur carte blanche des pages phase) */
.is-impact-faible{color:#8a6a1d}
.is-impact-moyen{color:#a85618}
.is-impact-fort{color:#a3322b}
.is-impact-finitions{color:#0a6962}
/* FIX spécificité : .statut .v (0-2-0, bleu) écrasait .is-impact-* (0-1-0) →
   le Niveau d'impact s'affichait en bleu. Règles scopées (0-3-0) pour rétablir
   la couleur sémantique (teintes AA des cartes blanches). */
.statut .v.is-impact-faible{color:#8a6a1d}
.statut .v.is-impact-moyen{color:#a85618}
.statut .v.is-impact-fort{color:#a3322b}
.statut .v.is-impact-finitions{color:#0a6962}
/* Badge de phase (« Phase 1/2 ») sur fond teal */
.page-tete .badge{color:var(--c-teal-ink)}
/* Pastilles/numéros sur fill moyen (orange clair) : texte foncé */
.pl-pill.mo,.pl-detail-pill.mo{color:var(--color-brand-night)}
.pl-seg.mo .num{color:var(--color-brand-night);text-shadow:none}
/* 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)}

/* Bouton « Travaux en cours » du header = indicateur live */
/* .head-phase = bouton .btn (display:inline-flex hérité de .btn) ; gap resserré
   pour la pastille. NB : masqué ≤ 640px (cf. media query) — « Phase en cours »
   reste accessible via la case du panneau « EN 1 CLIC ». */
.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}}