/* Observatoire IA de la Côte d'Opale — charte du site */
:root{--marine:#0D2148;--texte:#1B2233;--doux:#4A5168;--discret:#545B6E;--fond:#F4F4F7;
--carte:#FFFFFF;--filet:#E6E6EC;--rose:#F7C6D5;--rose-texte:#5A1730;--rose-fonce:#3E0F21;
--rose-vif:#E07A9B;--rose-pale:#FCE8EF;--rose-piste:#F1E3E8;--accent:#B03A62;
--vert:#65A6A6;--vert-pale:#D7E7E7;--cite-fond:#DDF0EC;--cite-texte:#1F5A50;
--jamais-fond:#FCE8EF;--jamais-texte:#8A2346;--fond-ouverture:#CFE0F5;--titre-ciel:#8F2A4E;--police:'Jost', 'Futura', 'Century Gothic', 'Segoe UI', sans-serif;
/* noms repris par les pages détaillées (presse, élus, fiches) */
--kpi-fond:var(--fond);--kpi-texte:var(--marine);--barre:var(--rose-vif);--barre-autre:var(--vert);
--tag-fond:var(--rose-pale);--tag-texte:var(--rose-texte);--f-titre:var(--police);--f-menu:var(--police);--f-texte:var(--police)}
*{box-sizing:border-box}
html{scroll-padding-top:84px}
body{margin:0;font:400 17px/1.55 var(--police);color:var(--texte);background:var(--fond);-webkit-text-size-adjust:100%}
a{color:var(--marine)}a:hover{color:var(--accent)}
a:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
img{max-width:100%}
h1,h2,h3{font-family:var(--police);color:var(--marine);font-weight:600}
.enveloppe{max-width:1200px;margin:0 auto;padding:0 24px}
.visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- barre collante ---------- */
.barre-haut{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--filet)}
.barre-haut .enveloppe{display:flex;align-items:center;gap:10px 24px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.barre-haut .logo{display:block;margin-right:auto}
.barre-haut .logo img{display:block;height:48px;width:auto}
.barre-haut nav{display:flex;gap:6px 22px;align-items:center;font-size:15px}
.barre-haut nav a{text-decoration:none;font-weight:500;padding:6px 0;white-space:nowrap}
.pastille{display:inline-block;background:var(--rose);color:var(--rose-texte);padding:6px 14px;border-radius:999px;font-size:13px;font-weight:500;white-space:nowrap}
.pastille .court{display:none}
.espaces-barre{display:flex;gap:6px}
.mini-bouton{display:inline-block;border:1px solid var(--marine);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap;background:#fff}
.mini-bouton:hover{background:var(--marine);color:#fff}
.cadenas{display:none;flex:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:999px;border:1px solid var(--marine);background:#fff;color:var(--marine);cursor:pointer;-webkit-tap-highlight-color:transparent}
.cadenas[aria-expanded="true"]{background:var(--marine);color:#fff}
/* panneau ancré au bord droit de l'écran (le header collant est son repère), sous le header, au-dessus de tout */
.panneau-espaces{position:absolute;top:calc(100% + 6px);right:16px;left:auto;width:min(280px,calc(100vw - 32px));background:#fff;border-radius:16px;box-shadow:0 12px 32px rgba(13,33,72,.25);padding:8px;z-index:300}
.panneau-espaces[hidden]{display:none}
.panneau-espaces p{margin:6px 12px 4px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--discret);font-weight:600}
.panneau-espaces a{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 12px;border-radius:12px;text-decoration:none;font-weight:500;font-size:16px;color:var(--marine)}
.panneau-espaces a:active,.panneau-espaces a:focus-visible{background:var(--fond)}

/* ---------- ouverture photo ---------- */
/* Valeurs COPIÉES de la maquette validée (maquette/Observatoire IA — maquette refonte.html) : photo en plein fond,
   calée en bas, sans voile ; seule différence : titre en rose foncé (charte.titre_ciel). */
.ouverture{position:relative;min-height:720px;background:var(--fond-ouverture);display:flex;align-items:flex-start;overflow:hidden}
.ouverture>img.fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom}
@media (min-width:1272px){.ouverture>img.fond{object-position:50% calc(100% + (100vw - 1272px) * 0.3051)}}.ouverture .enveloppe{position:relative;width:100%;padding-top:64px;padding-bottom:260px;display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;justify-content:space-between}
.ouverture .titre{flex:999 1 520px;min-width:0;color:var(--marine)}
.ouverture .titre .pastille{margin-bottom:20px}
.ouverture h1{margin:0;font-size:58px;line-height:1.04;font-weight:600;letter-spacing:-.01em;color:var(--titre-ciel)}
.ouverture .chapo{margin:20px 0 0;font-size:20px;font-weight:300;max-width:560px;line-height:1.5;color:var(--marine)}
#indice{scroll-margin-top:110px}
.credit{position:absolute;z-index:1;right:16px;bottom:12px;font-size:12px;line-height:1.4;color:#fff;background:rgba(13,33,72,.55);padding:4px 10px;border-radius:999px}
.jauge{flex:1 1 260px;display:flex;justify-content:center}
.jauge>div{background:#fff;border-radius:28px;padding:28px 32px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.jauge .cadran{position:relative;width:200px;height:200px;margin:0 auto}
.jauge .cadran svg{display:block}
.jauge .cadran div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.jauge .valeur{font-size:64px;font-weight:600;color:var(--marine);line-height:1}
.jauge .sur{font-size:14px;color:#5B6275}
.jauge .nom{margin:12px 0 0;font-weight:600;color:var(--marine);letter-spacing:.08em;font-size:13px;text-transform:uppercase}

/* ---------- chiffres clés ---------- */
.chiffres{position:relative;margin-top:-40px}
.grille-cles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.cle{background:#fff;border-radius:20px;padding:28px}
.cle .nombre{margin:0;font-size:48px;font-weight:600;color:var(--marine);line-height:1}
.cle .nombre small{font-size:26px;color:#8A90A2}
.cle p{margin:10px 0 0;font-size:16px;line-height:1.45}
.cle.fonce{background:var(--marine);color:#fff}.cle.fonce .nombre{color:#fff}

/* ---------- sections ---------- */
.section{padding:96px 0 24px}
.surtitre{margin:0;font-size:13px;letter-spacing:.2em;color:var(--accent);font-weight:600;text-transform:uppercase}
.section h2,.bande h2,.sombre h2{margin:8px 0 12px;font-size:clamp(1.75rem,3.6vw,2.5rem);line-height:1.15}
.intro{margin:0 0 12px;font-size:18px;max-width:720px;line-height:1.55}
.intro+.intro{color:var(--doux);font-size:16px}
.section .intro:last-of-type{margin-bottom:36px}
.note{margin:16px 0 0;font-size:14px;color:var(--discret);line-height:1.5}

/* composantes */
.grille-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;list-style:none;margin:0;padding:0}
.composante{background:#fff;border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:12px}
.composante .haut{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.composante h3{margin:0;font-size:18px;font-weight:500;line-height:1.3}
.composante .score{font-size:34px;font-weight:600;color:var(--marine);line-height:1;white-space:nowrap}
.composante .score small{font-size:14px;color:var(--discret);font-weight:400}
.composante p{margin:0;font-size:15px;line-height:1.5;color:var(--doux)}
.piste{height:8px;background:var(--rose-piste);border-radius:999px;overflow:hidden}
.piste i{display:block;height:8px;background:var(--rose-vif);border-radius:999px}

/* stations */
.bande{background:#fff;margin-top:72px}
.bande .enveloppe{padding-top:88px;padding-bottom:88px;display:flex;flex-wrap:wrap;gap:40px 56px}
.bande .texte{flex:1 1 340px;min-width:0}
.bande .intro{margin-bottom:0}
.stations{flex:999 1 520px;min-width:0;position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.stations::before{content:"";position:absolute;left:22px;top:20px;bottom:20px;width:2px;background:var(--vert-pale)}
.station{display:flex;align-items:center;gap:16px;position:relative}
.station .point{flex:none;width:46px;display:flex;justify-content:center}
.station .point i{display:block;border-radius:999px;background:var(--vert);border:3px solid #fff;box-shadow:0 0 0 1px var(--vert-pale)}
.station.touquet .point i{background:var(--rose-vif)}
.station .ligne{flex:1 1 auto;min-width:0;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 20px;border-radius:16px;background:var(--fond)}
.station.touquet .ligne{background:var(--rose-pale)}
.station .nom{font-size:20px;color:var(--marine)}.station.touquet .nom{font-weight:600}
.station .valeur{font-size:15px;color:var(--doux);white-space:nowrap}
.station .valeur b{font-size:26px;font-weight:600;color:var(--marine)}

/* que faire */
.lieux{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;list-style:none;margin:0;padding:0}
.lieu{position:relative;border-radius:20px;overflow:hidden;height:300px}
.lieu img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 70%}
.lieu .num{position:absolute;top:16px;left:16px;background:#fff;color:var(--marine);width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:600}
.lieu .credit{top:16px;bottom:auto}
.lieu .legende{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;background:rgba(13,33,72,.86);color:#fff}
.lieu h3{margin:0;font-size:19px;font-weight:500;color:#fff;line-height:1.3}
.lieu .mesure{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:14px}
.lieu .mesure span{flex:1 1 auto;height:6px;background:rgba(255,255,255,.25);border-radius:999px;overflow:hidden}
.lieu .mesure span i{display:block;height:6px;background:var(--rose)}

/* citations */
.sombre{background:var(--marine);color:#fff;margin-top:72px}
.sombre .enveloppe{padding-top:88px;padding-bottom:88px}
.sombre .surtitre{color:var(--rose)}
.sombre h2{color:#fff;margin-bottom:40px}
.citations{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px}
.citations figure{margin:0;background:rgba(255,255,255,.07);border-radius:20px;padding:28px}
.citations blockquote{margin:0;padding:0;border:0;background:none;font-size:clamp(1.15rem,2vw,1.375rem);font-weight:300;line-height:1.45;color:#fff}
.citations .traduction{margin:12px 0 0;font-size:15px;color:#fff}
.citations figcaption{margin-top:18px;font-size:14px;color:var(--rose)}
.sombre .note{color:#E3E6EE}

/* événements */
.agenda-liste{background:#fff;border-radius:24px;padding:8px 28px;list-style:none;margin:0}
.agenda-liste li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:18px 0;border-bottom:1px solid #EEEEF2}
.agenda-liste li:last-child{border-bottom:0}
.agenda-liste .date{flex:none;width:130px;font-size:15px;font-weight:600;color:var(--marine)}
.agenda-liste .quoi{flex:1 1 260px;min-width:0;font-size:18px;line-height:1.35}
.agenda-liste .quoi small{display:block;margin-top:2px;font-size:14px;color:var(--discret)}
.agenda-liste li.sous .quoi{padding-left:20px;border-left:2px solid var(--filet)}
.etat{padding:6px 14px;border-radius:999px;font-size:14px;font-weight:500;white-space:nowrap}
.etat.cite{background:var(--cite-fond);color:var(--cite-texte)}
.etat.jamais{background:var(--jamais-fond);color:var(--jamais-texte)}

/* établissements + formulaire */
.encart-etab{background:var(--rose);border-radius:28px;padding:48px;display:flex;flex-wrap:wrap;gap:24px 32px;align-items:center;justify-content:space-between;color:var(--rose-fonce)}
.encart-etab .texte{flex:999 1 420px;min-width:0}
.encart-etab h2{margin:0 0 12px;font-size:clamp(1.5rem,3vw,2.125rem);color:var(--rose-fonce);line-height:1.2}
.encart-etab p{margin:0;font-size:18px;line-height:1.55}
.encart-etab details{flex:0 0 auto}
.encart-etab details[open]{flex:1 1 100%}
.encart-etab .fiche{background:#fff;border-radius:20px;padding:24px;margin-top:20px;color:var(--texte)}
.encart-etab .merci{flex:1 1 100%}

/* pied de page */
.pied{background:#fff;border-top:1px solid var(--filet);margin-top:72px}
.pied .enveloppe{padding-top:48px;padding-bottom:48px;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:32px 48px}
.pied h2{font-size:16px;margin:0 0 10px}
.pied p,.pied li{font-size:15px;line-height:1.6;color:var(--doux)}
.pied p{margin:0 0 10px}
.pied ol,.pied ul{margin:0;padding-left:1.2em}.pied li{margin:.3em 0}
.pied .liens{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 12px}
.pied .large{grid-column:1/-1;border-top:1px solid var(--filet);padding-top:24px}
.pied .mentions,.pied .mentions p{font-size:13px;color:var(--discret)}
.bouton-contour{display:inline-block;border:1px solid var(--marine);padding:10px 18px;border-radius:999px;text-decoration:none;font-size:14px;color:var(--marine);background:#fff}
.bouton-contour:hover{background:var(--marine);color:#fff}
.bandeau{background:var(--rose-pale);color:var(--rose-texte);border-radius:12px;padding:10px 16px;font-size:15px;margin:16px 0}

/* ---------- boutons et formulaire (public, accès, fiches) ---------- */
.bouton{display:inline-block;background:var(--marine);color:#fff;text-decoration:none;font:500 16px/1.2 var(--police);padding:16px 28px;border-radius:999px;border:0;cursor:pointer}
.bouton:hover{color:#fff;background:#1A3466}
summary.bouton{list-style:none;user-select:none}
summary.bouton::-webkit-details-marker{display:none}
summary.bouton::after{content:" \25BE";margin-left:6px}details[open]>summary.bouton::after{content:" \25B4"}
.bouton.discret{background:#fff;color:var(--marine);border:1px solid var(--marine);font-size:14px;padding:10px 18px;margin:6px 4px 0}
.fiche{display:grid;gap:4px}
.fiche label{font-weight:500;color:var(--marine);margin-top:10px;font-size:15px}
.fiche input[type=text],.fiche input[type=email],.fiche input[type=tel],.fiche input[type=password],.fiche select,.fiche textarea{width:100%;
font:inherit;color:var(--texte);background:#fff;border:1px solid #B9BDCA;border-radius:12px;padding:12px}
.fiche input:focus,.fiche select:focus,.fiche textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.fiche .case{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px;color:var(--texte)}
.fiche .case input{margin-top:4px;flex:none;width:18px;height:18px}
.fiche button.bouton{margin-top:16px;justify-self:start}
.fiche .petit{font-weight:400}
.piege{display:none}
.merci{display:none;background:#fff;border-radius:16px;padding:14px 18px;color:var(--marine);font-weight:600;margin:0}
.merci:target{display:block}

/* ---------- pages détaillées : presse, élus, fiches, écran d'accès ---------- */
.entete{padding:48px 0 8px}
.entete .enveloppe,.contenu,nav.menu{max-width:960px}
.entete p{margin:0;font-size:13px;letter-spacing:.2em;color:var(--accent);font-weight:600;text-transform:uppercase}
.entete h1{margin:8px 0 0;font-size:clamp(1.9rem,4.6vw,2.75rem);line-height:1.1}
nav.menu{margin:0 auto;padding:16px 24px 0;display:flex;flex-wrap:wrap;gap:8px}
nav.menu a{font-size:14px;font-weight:500;text-decoration:none;color:var(--marine);background:#fff;border-radius:999px;padding:8px 16px}
nav.menu a.ici{background:var(--marine);color:#fff}
.contenu{margin:0 auto;padding:8px 24px 24px}
.carte{background:var(--carte);border-radius:20px;padding:28px;margin:16px 0}
.carte h2{font-size:1.6rem;margin:0 0 .6em;line-height:1.25}
.carte h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:1.4em 0 .5em}
.chiffre{font-size:3.2rem;font-weight:600;color:var(--marine);line-height:1}
.carte .chiffre{font-size:2.6rem}.indice-tete .chiffre{font-size:3.4rem}
.tete,.indice-tete{display:flex;gap:16px;align-items:center;margin-bottom:8px}
.petit{font-size:.9rem;color:var(--discret)}
.fait{font-size:1.05rem;margin:.4em 0 .8em}
.expl{margin-top:6px;line-height:1.45}
.carte table{width:100%;border-collapse:collapse;font-size:.97rem}
.carte td{padding:10px 4px;border-bottom:1px solid var(--filet);vertical-align:top}
.carte td.n{text-align:right;white-space:nowrap;width:1%;padding-left:12px}
.carte th{padding:8px 4px;border-bottom:1px solid var(--filet);text-align:left;vertical-align:bottom;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--doux);font-weight:600}
.carte th.n{text-align:right}
.barre{height:8px;background:var(--rose-piste);border-radius:999px;margin-top:6px;overflow:hidden;width:100%}
.barre i{display:block;height:8px;background:var(--barre);border-radius:999px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.kpi{background:var(--kpi-fond);color:var(--kpi-texte);border-radius:16px;padding:16px}
.kpi .chiffre{font-size:2.1rem;color:var(--kpi-texte)}.kpi .petit{color:var(--doux)}
.kpi .evol{color:var(--kpi-texte)}
.kpi .verif{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;line-height:1.4;color:var(--kpi-texte)}
.agenda td.n{white-space:nowrap;vertical-align:top}.agenda tr.sous td:first-child{padding-left:20px}
.rang{display:inline-block;min-width:1.9em;height:1.9em;border-radius:50%;background:var(--tag-fond);color:var(--tag-texte);text-align:center;font-weight:600;line-height:1.9em}
.table{overflow-x:auto}
.carte blockquote{margin:10px 0;padding:10px 14px;border-left:3px solid var(--rose-vif);background:var(--fond);border-radius:0 12px 12px 0}
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.tag{display:inline-block;background:var(--tag-fond);color:var(--tag-texte);border-radius:999px;padding:2px 10px;font-size:.82rem;margin:2px 2px 0 0}
.indic{display:inline-block;background:var(--tag-fond);color:var(--tag-texte);border-radius:999px;padding:0 8px;font-size:.76rem;margin-left:4px}
.lire{background:var(--fond);border-left:3px solid var(--vert);border-radius:0 12px 12px 0;padding:10px 14px;font-size:.92rem;margin-top:10px;color:var(--texte)}
.levier{border-left:4px solid var(--vert);padding:8px 14px;margin:10px 0;background:var(--fond);border-radius:0 12px 12px 0}
.message p{font-size:1.05rem;margin:.5em 0;color:var(--texte)}
.groupe td{background:var(--fond);font-size:.82rem;color:var(--doux);padding:6px 4px}
.evol{font-size:.82rem;color:var(--doux);white-space:nowrap}
.formule{font-family:ui-monospace,Consolas,monospace;background:var(--fond);padding:8px 10px;border-radius:8px;font-size:.9rem;overflow-x:auto}
ol.q{padding-left:1.4em}ol.q li,.carte ol li{margin:.35em 0}
.statut{font-size:13px;letter-spacing:.04em;font-weight:600;color:var(--marine);white-space:nowrap}
.encart{background:var(--rose-pale);border-radius:16px;padding:16px 18px}
.acces{max-width:480px;margin:24px auto}
.acces .bouton{width:100%;justify-self:stretch}
.acces .bouton:disabled{opacity:.6;cursor:wait}
.erreur{color:#9B1C1C;font-weight:600;margin:10px 0 0}
.pied-simple{max-width:960px;margin:32px auto 0;padding:24px 24px 40px;font-size:14px;color:var(--discret);border-top:1px solid var(--filet)}
.pied-simple b{color:var(--marine)}

/* ---------- barre : pas la place pour les deux boutons (logo + menu + pastille) → cadenas « Espaces réservés » ---------- */
@media (max-width:1100px){
.espaces-barre{display:none}
.cadenas{display:inline-flex}
}
/* ---------- petits écrans ---------- */
@media (max-width:760px){
html{scroll-padding-top:120px}
/* une seule ligne : logo à gauche, pastille et cadenas à droite ; menu des sections dessous */
.barre-haut .enveloppe{gap:8px 12px}
.pastille .long{display:none}.pastille .court{display:inline}
.barre-haut .pastille,.cadenas{order:1}
.barre-haut .logo img{height:40px}
.barre-haut nav{order:3;width:100%;overflow-x:auto;gap:20px;scrollbar-width:none;font-size:14px}
.barre-haut nav::-webkit-scrollbar{display:none}
.pied .enveloppe{grid-template-columns:1fr}
.encart-etab{padding:32px 22px}
}
@media (max-width:600px){
body{font-size:16px}
.enveloppe,.contenu{padding-left:16px;padding-right:16px}
nav.menu{padding-left:16px;padding-right:16px}
.ouverture{min-height:0}
.ouverture .enveloppe{padding-top:36px;padding-bottom:120px;gap:32px}
.ouverture h1{font-size:2.1rem;line-height:1.08}
.ouverture .chapo{font-size:1.05rem;font-weight:400}
.credit{bottom:52px}
.jauge>div{padding:22px 26px}
.section{padding-top:64px}
.bande .enveloppe,.sombre .enveloppe{padding-top:64px;padding-bottom:64px}
.station .nom{font-size:17px}.station .ligne{padding:12px 14px}.station .valeur b{font-size:22px}
.lieu{height:240px}
.agenda-liste{padding:4px 18px}
.agenda-liste .date{width:100%}
.carte{padding:20px 18px}
.encart-etab p{font-size:16px}
.pile tr{display:block;border-bottom:1px solid var(--filet);padding:6px 0}.pile td,.pile th{display:block;border:0;padding:2px 0;text-align:left}
.pile tr:first-child{display:none}.carte .pile td.n{text-align:left}
.pile td[data-label]::before{content:attr(data-label) " : ";color:var(--doux);font-size:.86rem}
.agenda td.n{font-size:.86rem;padding-left:6px}.agenda th{font-size:11px}.agenda tr.sous td:first-child{padding-left:10px}
}