/* =====================================================================
   WeeCity 3.0 — Template "INSTITUTIONNEL"  ·  Commune de Hulluch
   Esprit JolieVille : sections alternées clair/sombre · Agenda & Footer
   dark mode · Panneau Pocket · carrousels. Couleurs Hulluch.
   ===================================================================== */

/* Tabler Icons — @font-face URL absolue (le chemin relatif du CDN ne
   résout pas hors origine ; on fournit la source explicitement) */
@font-face{
  font-family:"tabler-icons-fix";
  font-style:normal; font-weight:400; font-display:block;
  /* perf : police SOUS-ENSEMBLEE aux 45 icones réellement utilisées par les deux
     thèmes, hébergée localement. Le woff2 complet du CDN pesait 857 Kio pour
     5 807 icônes ; celui-ci fait 8,3 Kio. Les codepoints sont relevés dans le CSS
     officiel Tabler 3.24.0 — aucune valeur inventée.
     POUR AJOUTER UNE ICÔNE : il faut RÉGÉNÉRER le sous-ensemble, pas seulement
     ajouter une règle .ti-xxx ci-dessous — le glyphe n'est pas dans la police. */
  /* Chemin RELATIF AU FICHIER CSS — et surtout PAS <mx:pathToTemplateFolder /> :
     cette balise n'est résolue que dans les gabarits HTML, jamais dans les .css.
     Elle partait telle quelle dans l'URL, qui échouait (ERR_ABORTED) et la police
     n'était jamais chargée. La feuille vit dans /css/, la police dans /assets/fonts/ :
     « ../assets/fonts/ » résout donc correctement, quel que soit le nom du modèle. */
  src:url("../assets/fonts/tabler-icons-subset.woff2") format("woff2");
}
.ti{ font-family:"tabler-icons-fix" !important; }
/* ── MAPPING DES ICÔNES (remplace la feuille du CDN, 236 Kio pour 5 807 icônes) ──
   45 règles = les seules classes .ti-* référencées par les gabarits et les scripts
   des deux thèmes. Généré depuis tabler-icons.min.css 3.24.0. */
.ti-accessible:before{ content:"\eba9"; }
.ti-alert-circle:before{ content:"\ea05"; }
.ti-alert-octagon:before{ content:"\ecc6"; }
.ti-alert-triangle:before{ content:"\ea06"; }
.ti-antenna:before{ content:"\f094"; }
.ti-antenna-bars-5:before{ content:"\eccb"; }
.ti-archive:before{ content:"\ea0b"; }
.ti-arrow-left:before{ content:"\ea19"; }
.ti-arrow-right:before{ content:"\ea1f"; }
.ti-arrow-up:before{ content:"\ea25"; }
.ti-baby-carriage:before{ content:"\f05d"; }
.ti-backpack:before{ content:"\ef47"; }
.ti-ball-football:before{ content:"\ee06"; }
.ti-bell:before{ content:"\ea35"; }
.ti-bell-ringing:before{ content:"\ed07"; }
.ti-bike:before{ content:"\ea36"; }
.ti-bolt:before{ content:"\ea38"; }
.ti-book-2:before{ content:"\efc5"; }
.ti-books:before{ content:"\eff2"; }
.ti-brand-apple:before{ content:"\ec17"; }
.ti-brand-facebook:before{ content:"\ec1a"; }
.ti-brand-google-play:before{ content:"\ed25"; }
.ti-brand-instagram:before{ content:"\ec20"; }
.ti-brand-linkedin:before{ content:"\ec8c"; }
.ti-brand-tiktok:before{ content:"\ec73"; }
.ti-brand-twitter:before{ content:"\ec27"; }
.ti-brand-whatsapp:before{ content:"\ec74"; }
.ti-brand-x:before{ content:"\fc0f"; }
.ti-brand-youtube:before{ content:"\ec90"; }
.ti-briefcase:before{ content:"\ea46"; }
.ti-building:before{ content:"\ea4f"; }
.ti-building-bank:before{ content:"\ebe2"; }
.ti-building-community:before{ content:"\ebf6"; }
.ti-building-store:before{ content:"\ea4e"; }
.ti-bus:before{ content:"\ebe4"; }
.ti-calendar:before{ content:"\ea53"; }
.ti-calendar-event:before{ content:"\ea52"; }
.ti-calendar-month:before{ content:"\fd2f"; }
.ti-calendar-week:before{ content:"\fd30"; }
.ti-camera:before{ content:"\ea54"; }
.ti-car:before{ content:"\ebbb"; }
.ti-cash:before{ content:"\ea55"; }
.ti-certificate:before{ content:"\ed76"; }
.ti-charging-pile:before{ content:"\ee26"; }
.ti-chart-bar:before{ content:"\ea59"; }
.ti-check:before{ content:"\ea5e"; }
.ti-chevron-down:before{ content:"\ea5f"; }
.ti-chevron-left:before{ content:"\ea60";     margin: 9px; }
.ti-chevron-right:before{ content:"\ea61";    margin: 12px; }
.ti-chevron-up:before{ content:"\ea62"; }
.ti-circle-check:before{ content:"\ea67"; }
.ti-circle-dot:before{ content:"\efb1"; }
.ti-clipboard-text:before{ content:"\f089"; }
.ti-clock:before{ content:"\ea70"; }
.ti-cloud:before{ content:"\ea76"; }
.ti-cloud-rain:before{ content:"\ea72"; }
.ti-crane:before{ content:"\ef27"; }
.ti-device-mobile:before{ content:"\ea8a"; }
.ti-download:before{ content:"\ea96"; }
.ti-droplet:before{ content:"\ea97"; }
.ti-external-link:before{ content:"\ea99"; }
.ti-file:before{ content:"\eaa4"; }
.ti-file-description:before{ content:"\f028"; }
.ti-file-download:before{ content:"\ea9d"; }
.ti-file-text:before{ content:"\eaa2"; }
.ti-filter:before{ content:"\eaa5"; }
.ti-fire-extinguisher:before{ content:"\faf6"; }
.ti-first-aid-kit:before{ content:"\ef5f"; }
.ti-flame:before{ content:"\ec2c"; }
.ti-folder:before{ content:"\eaad"; }
.ti-forms:before{ content:"\ee8f"; }
.ti-friends:before{ content:"\eab0"; }
.ti-gavel:before{ content:"\ef90"; }
.ti-hammer:before{ content:"\ef91"; }
.ti-heart:before{ content:"\eabe"; }
.ti-heart-handshake:before{ content:"\f0f3"; }
.ti-help:before{ content:"\eabf"; }
.ti-home:before{ content:"\eac1"; }
.ti-id:before{ content:"\eac3"; }
.ti-info-circle:before{ content:"\eac5"; }
.ti-layout-grid:before{ content:"\edba"; }
.ti-leaf:before{ content:"\ed4f"; }
.ti-link:before{ content:"\eade"; }
.ti-list:before{ content:"\eb6b"; }
.ti-lock:before{ content:"\eae2"; }
.ti-mail:before{ content:"\eae5"; }
.ti-map:before{ content:"\eae9"; }
.ti-map-2:before{ content:"\eae7"; }
.ti-map-pin:before{ content:"\eae8"; }
.ti-map-pin-filled:before{ content:"\f680"; }
.ti-masks-theater:before{ content:"\f263"; }
.ti-medical-cross:before{ content:"\ec2f"; }
.ti-menu-2:before{ content:"\ec42"; }
.ti-message:before{ content:"\eaef"; }
.ti-minus:before{ content:"\eaf2"; }
.ti-mist:before{ content:"\ec30"; }
.ti-movie:before{ content:"\eafa"; }
.ti-music:before{ content:"\eafc"; }
.ti-news:before{ content:"\eafd"; }
.ti-palette:before{ content:"\eb01"; }
.ti-parking:before{ content:"\eb03"; }
.ti-phone:before{ content:"\eb09"; }
.ti-photo:before{ content:"\eb0a"; }
.ti-plant:before{ content:"\ed50"; }
.ti-plus:before{ content:"\eb0b"; }
.ti-pointer:before{ content:"\f265"; }
.ti-printer:before{ content:"\eb0e"; }
.ti-qrcode:before{ content:"\eb11"; }
.ti-receipt:before{ content:"\edfd"; }
.ti-recycle:before{ content:"\eb9b"; }
.ti-road:before{ content:"\f018"; }
.ti-rss:before{ content:"\eb19"; }
.ti-ruler:before{ content:"\eb1a"; }
.ti-run:before{ content:"\ec82"; }
.ti-scale:before{ content:"\ebc2"; }
.ti-school:before{ content:"\ecf7"; }
.ti-search:before{ content:"\eb1c"; }
.ti-send:before{ content:"\eb1e"; }
.ti-settings:before{ content:"\eb20"; }
.ti-share:before{ content:"\eb21"; }
.ti-shield:before{ content:"\eb24"; }
.ti-shield-check:before{ content:"\eb22"; }
.ti-shopping-bag:before{ content:"\f5f8"; }
.ti-signature:before{ content:"\eee0"; }
.ti-snowflake:before{ content:"\ec0b"; }
.ti-sparkles:before{ content:"\f6d7"; }
.ti-speakerphone:before{ content:"\ed61"; }
.ti-star:before{ content:"\eb2e"; }
.ti-stethoscope:before{ content:"\edbe"; }
.ti-sun:before{ content:"\eb30"; }
.ti-swimming:before{ content:"\ec92"; }
.ti-temperature:before{ content:"\eb38"; }
.ti-ticket:before{ content:"\eb3d"; }
.ti-tools:before{ content:"\ebca"; }
.ti-tools-kitchen-2:before{ content:"\eeff"; }
.ti-traffic-cone:before{ content:"\ec0f"; }
.ti-train:before{ content:"\ed96"; }
.ti-trash:before{ content:"\eb41"; }
.ti-tree:before{ content:"\ef01"; }
.ti-trophy:before{ content:"\eb45"; }
.ti-urgent:before{ content:"\eb48"; }
.ti-user:before{ content:"\eb4d"; }
.ti-user-check:before{ content:"\eb49"; }
.ti-user-plus:before{ content:"\eb4b"; }
.ti-users:before{ content:"\ebf2"; }
.ti-users-group:before{ content:"\fa21"; }
.ti-vaccine:before{ content:"\ef04"; }
.ti-walk:before{ content:"\ec87"; }
.ti-wifi:before{ content:"\eb52"; }
.ti-wind:before{ content:"\ec34"; }
.ti-world:before{ content:"\eb54"; }
.ti-writing:before{ content:"\ef08"; }
.ti-x:before{ content:"\eb55"; }
.ti-zoom-in:before{ content:"\eb56"; }

/* ------------------------------------------------------------------ TOKENS */
:root{
  --couleur-principale:#1E40AF;
  --couleur-secondaire:#06B6D4;
  --couleur-dark:#0A1F44;

  --principale-700:#1E3A8A;
  --principale-600:#1E40AF;
  --principale-500:#3B5BDB;
  --principale-100:#E0E7FF;
  --principale-50:#EEF2FF;
  --secondaire-700:#0E7490;
  --secondaire-600:#0891B2;
  --secondaire-100:#CFFAFE;
  --secondaire-50:#ECFEFF;

  --ink:#0F172A; --ink-2:#334155; --ink-3:#64748B; --ink-4:#5B6678; /* a11y : ex #94A3B8, contraste texte/icone */
  --line:#E5E9F0; --line-2:#EEF1F6;
  --surface:#FFFFFF; --surface-2:#F8FAFC;
  --bg-creme:#FAF8F3;

  --dark-2:#0F2A5C;        /* surface sur fond dark */
  --dark-line:rgba(255,255,255,.12);
  --dark-ink:rgba(255,255,255,.72);

  --warning:#D97706; --warning-bg:#FEF3C7;
  --danger:#DC2626; --success:#16A34A; --info:#2563EB;

  --police-titres:'DM Sans',system-ui,sans-serif;
  --police-corps:'Outfit',system-ui,sans-serif;

  --card-radius:18px;
  --btn-radius:10px;

  --shadow-xs:0 1px 2px rgba(15,23,42,.05);
  --shadow-sm:0 1px 3px rgba(15,23,42,.07),0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 6px 20px -6px rgba(15,23,42,.12),0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 60px -20px rgba(15,23,42,.24),0 8px 20px -10px rgba(15,23,42,.12);
  --shadow-blue:0 18px 40px -16px rgba(30,64,175,.45);

  --maxw:1240px; --gutter:24px; --section-y:88px;
  --header-h:80px;
  /* Surtitre commune du hero — TEST (en prod : posé par le colis par-client). Format "Commune · Département".
     Doit être défini AVANT le load : hero-bridge n'injecte le <span class="hero-eyebrow"> que si présent à l'exécution. */
  --commune-label:"JolieVille · Estonie";
}

/* ---- Variations (data-attributes sur <body>) ---- */
[data-card-radius="medium"]{ --card-radius:12px; }
[data-card-radius="large"]{ --card-radius:20px; }
[data-card-radius="pill"]{ --card-radius:40px; }

/* ------------------------------------------------------------------ RESET */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--police-corps); color:var(--ink-2);
  background:var(--surface); line-height:1.6; font-size:16px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{ font-family:var(--police-titres); color:var(--ink); margin:0;
  line-height:1.14; letter-spacing:-0.02em; font-weight:700; }
p{ margin:0; } a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--couleur-principale); outline-offset:2px; border-radius:4px; }
.skip-link{position:absolute;left:8px;top:-48px;z-index:2000;background:var(--couleur-principale);color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:600}
.skip-link:focus{top:8px}
/* RGAA : contenu réservé aux lecteurs d'écran (ex. h1 accueil) — masqué visuellement, exposé à l'AT */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ------------------------------------------------------------ PRIMITIVES */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); position:relative; }
.section--creme{ background:var(--bg-creme); }
.section--tint{ background:var(--surface-2); }

.supra{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--police-titres); font-weight:600; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--couleur-principale);
  margin-bottom:14px;
}
.supra i{ font-size:16px; }
.supra::after{ content:""; width:30px; height:2px; background:currentColor; border-radius:2px; opacity:.5; }
.supra.on-dark{ color:var(--secondaire-100); }

.h2{ font-size:clamp(28px,3.3vw,38px); letter-spacing:-0.025em; }
.lead{ font-size:17px; color:var(--ink-3); line-height:1.6; text-wrap:pretty; }

.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:40px; }
.sec-head .lead{ margin-top:8px; }
.sec-head--center{ flex-direction:column; align-items:center; text-align:center; }
.sec-head--center .supra{ justify-content:center; }
.sec-head--col{ display:block; margin-bottom:0; }
.sec-head--col .supra{ display:flex; }

/* boutons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--police-titres); font-weight:600; font-size:15px;
  padding:13px 22px; border-radius:var(--btn-radius); white-space:nowrap;
  transition:transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s; }
.btn i{ font-size:18px; }
.btn-primary{ background:var(--couleur-principale); color:#fff; box-shadow:0 8px 20px -8px rgba(30,64,175,.5); }
.btn-primary:hover{ background:var(--principale-700); transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(30,64,175,.55); }
.btn-ghost{ background:var(--surface); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow-xs); }
.btn-ghost:hover{ border-color:var(--couleur-principale); color:var(--couleur-principale); transform:translateY(-2px); }
.btn-ghost-dark{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4); }
.btn-ghost-dark:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn-white{ background:#fff; color:var(--couleur-principale); box-shadow:var(--shadow-md); }
.btn-white:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(0,0,0,.28); }
.btn-block{ width:100%; }

.link-more{ display:inline-flex; align-items:center; gap:7px; font-family:var(--police-titres);
  font-weight:600; font-size:15px; color:var(--couleur-principale); transition:gap .2s, color .2s; }
.link-more i{ font-size:18px; }
.link-more:hover{ gap:11px; color:var(--principale-700); }
.link-more.on-dark{ color:#fff; }

/* tags */
.tag{ display:inline-flex; align-items:center; font-family:var(--police-titres); font-weight:700;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:999px;
  background:var(--principale-50); color:var(--couleur-principale); }

/* placeholders image */
.ph{ position:relative; display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(135deg,var(--principale-50),var(--secondaire-100)); color:var(--couleur-principale); }
.ph i{ font-size:40px; opacity:.5; }
.ph::after{ content:attr(data-label); position:absolute; bottom:10px; left:12px;
  font-family:var(--police-titres); font-size:10px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:rgba(30,64,175,.42); }
.ph.warm{ background:linear-gradient(135deg,#FEF3C7,#FFE4E6); color:#B45309; }
.ph.green{ background:linear-gradient(135deg,#DCFCE7,#CFFAFE); color:#15803D; }
.ph.people{ background:linear-gradient(135deg,#FDE68A,#FCA5A5); color:#9A3412; }
.ph.tech{ background:linear-gradient(135deg,#E0E7FF,#CFFAFE); color:#1E40AF; }
.ph.dark{ background:linear-gradient(135deg,#1E3A8A,#0E7490); color:rgba(255,255,255,.6); }
.ph.dark::after{ color:rgba(255,255,255,.5); }
.ph.dark i{ color:rgba(255,255,255,.55); }
/* photo réelle posée par-dessus le placeholder (fallback si 404) */
.ph-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; }

/* ---- Vagues SVG entre sections ---- */
.wave-top{ position:absolute; left:0; top:0; width:100%; height:58px; z-index:1; display:block; pointer-events:none; }
.footer-wave{ position:absolute; left:0; top:0; width:100%; height:74px; z-index:3; transform:translateY(-99%); display:block; pointer-events:none; }

/* ================================================================= HEADER */
.site-header{ position:sticky; top:0; z-index:100; background:var(--couleur-dark);
  border-bottom:1px solid rgba(255,255,255,.10); transition:box-shadow .3s, background .3s; }
.site-header.scrolled{ box-shadow:var(--shadow-md); background:var(--couleur-dark); }
.header-inner{ height:var(--header-h); display:flex; align-items:center; gap:28px; min-width:0; position:relative; }   /* min-width:0 = anti-débordement marque ; position:relative = ancre du méga-menu pleine largeur */
.brand{ display:inline-flex; align-items:center; gap:13px; padding-right:28px; border-right:1px solid rgba(255,255,255,.15); min-width:0; }
.brand-logo{ height:48px; width:auto; max-width:200px; border-radius:13px; background:#fff; border:1px solid rgba(255,255,255,.18);
  box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center; padding:5px 9px; flex-shrink:0; }  /* ADAPTATIF + pastille par défaut (logo natif) */
/* pastille conditionnelle : <body data-logo-inversible="true"> → logo blanc sans pastille (header + footer) */
[data-logo-inversible="true"] .brand-logo,
[data-logo-inversible="true"] .footer-brand .brand-logo{ background:transparent; border-color:transparent; box-shadow:none; padding:0; }
.brand-logo img{ height:100%; width:auto; object-fit:contain; display:block; }
/* EFFET LOGO (déterministe, aligné sur le React piloté par brief.logo_inversible) — cible le SEUL
   logo img client (PNG) ; le SVG blason de fallback (.blason, pas un <img>) N'est PAS capté par « img ».
   Défaut (logo opaque) : léger relief pour détacher le logo du fond. */
.brand-logo img{  }
/* Logo inversible (blanc) : <body data-logo-inversible="true"> DÉJÀ posé par l'export → logo blanchi
   (écrase le drop-shadow). N'affecte que l'img client, jamais le blason SVG. */
[data-logo-inversible="true"] .brand-logo img{ filter:brightness(0) invert(1); }
.brand-logo .blason{ width:27px; height:31px; }
.brand-name{ display:flex; flex-direction:column; line-height:1.08; min-width:0; }
.brand-name strong{ font-family:var(--police-titres); font-weight:700; font-size:20px; color:#fff; letter-spacing:-0.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* nom long tronqué proprement (861-1080) */
.brand-name span{ font-size:11.5px; color:rgba(255,255,255,.7); letter-spacing:.02em; }
/* .brand-role = libellé de rôle « Mairie officielle » (CAS 1 anti-doublon : logo porte déjà le nom).
   Même présence visuelle que le NOM (.brand-name strong), PAS le mini-uppercase du slogan. */
.brand-name .brand-role{ font-family:var(--police-titres); font-weight:700; font-size:20px; color:#fff; letter-spacing:-0.02em; line-height:1.15; }

.main-nav{ margin-inline:auto; }
.main-nav>ul{ display:flex; align-items:center; gap:2px; }
.nav-link{ display:inline-flex; align-items:center; gap:5px; font-family:var(--police-titres);
  font-weight:500; font-size:15px; color:rgba(255,255,255,.92); padding:9px 14px; border-radius:9px; transition:color .2s, background .2s; }
.nav-link i{ font-size:16px; }
.nav-link:hover{ color:#fff; background:rgba(255,255,255,.10); }

/* --- NAV DYNAMIQUE Saytup (#nested) — BARRE DESKTOP (étape 1 ; déroulants = étape 2) ----------------
   DOM natif : #nav-principale > #smart-toggle + #nested > ul.firstLevel > li.nav-principale__item
               (.active page courante / .hover survol) > a.LinkIn.block + ul.secondLevel (méga-menu).
   On reprend le look colis .nav-link ; on neutralise les utilitaires natifs (.pl30/.inblM/.pt30/.pb30). */
#nav-principale{ display:flex; align-items:center; margin-inline:auto; }   /* barre RE-CENTRÉE (espace libre réparti des 2 côtés) → items proches du panneau méga-menu centré sur la page. Léger offset à droite du centre exact car .brand > .header-actions. Override mobile l.1151+ (#nav-principale display:none) intact. */
.wc-nav-toggle{ display:none; }   /* chevron accordéon : masqué par défaut (desktop) ; affiché en drawer mobile */
.nav-drawer-overlay{ display:none; }   /* overlay drawer : masqué par défaut (tous écrans) ; affiché via body.nav-open */
#nested{ margin:0 !important; padding:0 !important; }            /* neutralise .pl30 / .inblM natifs */
#nested .firstLevel{ display:flex; align-items:center; gap:2px; margin:0; padding:0; list-style:none; }
#nested .firstLevel > li.nav-principale__item{ position:relative; padding:0 !important; margin:0; }  /* neutralise .pt30/.pb30 */
#nested .firstLevel > li > a.block{
  display:inline-flex; align-items:center; gap:5px; height:var(--header-h); padding:0 14px;
  font-family:var(--police-titres); font-weight:500; font-size:15px; color:rgba(255,255,255,.85);
  text-decoration:none; transition:color .2s, background .2s;
}
#nested .firstLevel > li > a:hover,
#nested .firstLevel > li.hover > a,
#nested .firstLevel > li.active > a{ color:#fff; background:rgba(255,255,255,.10); }
/* --- ÉTAPE 2 : déroulants méga-menu desktop (ul.secondLevel) ---------------------------------------
   DOM : li.nav-principale__item(.hover survol JS / .active page courante) > a.block + ul.secondLevel
         > li.menuImageItem(.menuCardImage>.nestedPicture>img) + i.arrowTop
         + li.megaCol(a.menuCardTitle + ul.thirdLevel>li>a) + li.standalone-group(span.group-label + a×N).
   Affichage piloté par .hover (JS natif functions.js) + :hover (secours CSS). */
#nested .firstLevel > li > .secondLevel{ display:none; }
#nested .firstLevel > li.hover > .secondLevel,
#nested .firstLevel > li:hover > .secondLevel,
#nested .firstLevel > li:focus-within > .secondLevel{ display:flex; }   /* RGAA : ouverture au CLAVIER (focus dans l'item) */
/* Gros méga-menu visible → flex (cohérent avec la mise en page flex ci-dessous ; spécificité +1 classe
   pour battre le display:flex des dropdowns simples — display:flex aussi, mais la mise en page wrap/colonnes
   est portée par .secondLevel:has(.megaCol) plus bas). */
#nested .firstLevel > li.hover > .secondLevel:has(.megaCol),
#nested .firstLevel > li:hover > .secondLevel:has(.megaCol),
#nested .firstLevel > li:focus-within > .secondLevel:has(.megaCol){ display:grid; }   /* RGAA : méga-menu au clavier */

/* Panneau */
#nested .secondLevel{
  position:absolute; top:100%; left:0; z-index:200;
  flex-wrap:wrap; gap:24px;
  min-width:520px; max-width:880px; padding:24px;
  background:#fff; border-radius:var(--card-radius);
  box-shadow:0 18px 44px -12px rgba(10,31,68,.28), 0 6px 16px -8px rgba(10,31,68,.15);
  list-style:none; margin:0;
}
/* neutralise les utilitaires natifs (.pl*/.pr*/.pt*/.pb*) sur le panneau et ses li internes */
#nested .secondLevel,
#nested .secondLevel > li{ padding-left:0; padding-right:0; }
#nested .secondLevel li{ list-style:none; }

/* Flèche vers l'onglet (petit carré blanc pivoté) */
#nested .secondLevel .arrowTop{
  position:absolute; top:-6px; left:28px; width:12px; height:12px;
  background:#fff; transform:rotate(45deg); border-radius:2px 0 0 0;
  box-shadow:-2px -2px 5px -3px rgba(10,31,68,.18);
}

/* Colonne image (illustration à gauche) */
#nested .secondLevel .menuImageItem{ flex:0 0 200px; }
#nested .secondLevel .menuCardImage{ border-radius:var(--card-radius); overflow:hidden; aspect-ratio:4/3; }
#nested .secondLevel .nestedPicture{ display:block; height:100%; }
#nested .secondLevel .nestedPicture img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Colonnes de liens (titre + sous-liens) */
#nested .secondLevel .megaCol{ flex:1 1 180px; min-width:160px; }
#nested .secondLevel .megaCol > a.menuCardTitle{
  display:block; font-family:var(--police-titres); font-weight:700; font-size:15px; color:var(--couleur-dark);
  padding:0 0 8px; border-bottom:1px solid var(--principale-100); margin-bottom:8px; text-decoration:none;
}
#nested .secondLevel .thirdLevel{ margin:0; padding:0; }
#nested .secondLevel .thirdLevel > li > a{
  display:block; padding:6px 0; font-size:14px; color:var(--principale-700); text-decoration:none; transition:color .2s;
}
#nested .secondLevel .thirdLevel > li > a:hover{ color:var(--couleur-principale); }

/* N4 = fourthLevel : 4e niveau du mega-menu (ul.fourthLevel dans navigation_elements/
   nested_navigation_elements.html, alimente en prod — ex. « Vos demarches > Environnement et cadre de
   vie > Gestion des dechets > Calendrier de collecte / Dechetterie / ... »). Le gabarit porte les 4
   niveaux depuis toujours, mais .fourthLevel n'avait AUCUNE regle : les liens heritaient du texte
   courant du body (16px / --ink-2 / display:inline) et rendaient donc PLUS GROS et PLUS GRIS que leur
   propre parent N3 (14px / --principale-700 / block), en paragraphe au lieu de liste. On restaure
   l'echelle : chaque niveau descend d'un cran (15px/700 -> 14px/400 -> 13px/400) et s'eclaircit.

   SCOPE : meme ancetre que N2/N3 (#nested .secondLevel) + @media (min-width:1100px).
   Le min-width est INDISPENSABLE ici, alors que N2/N3 s'en passent : sous 1099px, responsiveManager()
   (functions.js) demenage le MEME #nested dans #page pour en faire le drawer, et les regles drawer
   (l.~1860) reprennent la main sur N2/N3 en !important — mais elles ne connaissent PAS fourthLevel.
   Sans garde, ces regles fuiraient donc dans le drawer mobile. Le drawer N4 est un chantier separe
   (chevron N3 a injecter dans nav-bridge.js, non modifie ici). 1100px = complement exact du
   breakpoint menu 1099px documente plus bas. */
@media (min-width:1100px){
  #nested .secondLevel .fourthLevel{ list-style:none; margin:2px 0 6px; padding:0; }
  #nested .secondLevel .fourthLevel > li > a{
    display:block;                                   /* corrige le display:inline herite du body */
    padding:4px 0 4px 12px; font-size:13px; font-weight:400;
    color:var(--ink-2); text-decoration:none; transition:color .15s;
    border-left:2px solid var(--line);               /* marqueur d'imbrication : filet plutot que puce
                                                        — se prolonge sur toute la liste, lit mieux qu'un
                                                        caractere et ne coute pas de pseudo-element */
  }
  #nested .secondLevel .fourthLevel > li > a:hover,
  #nested .secondLevel .fourthLevel > li > a:focus-visible{
    color:var(--couleur-principale); border-left-color:var(--couleur-principale);
  }
}

/* Accès directs (bloc pleine largeur en pied de panneau) */
#nested .secondLevel .standalone-group{
  flex:1 1 100%; border-top:1px solid var(--principale-100); margin-top:8px; padding-top:12px;
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
}
#nested .secondLevel .standalone-group .group-label{
  flex:0 0 100%; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--principale-500); font-weight:600;
}
#nested .secondLevel .standalone-group > a{ font-size:14px; color:var(--couleur-principale); text-decoration:none; }
#nested .secondLevel .standalone-group > a:hover{ text-decoration:underline; }

/* Anti-débordement bord droit — UNIQUEMENT pour les déroulants SIMPLES des 2 derniers onglets
   (le gros méga-menu est désormais pleine largeur conteneur → pas concerné, cf. :not(:has(.megaCol))). */
#nested .firstLevel > li.nav-principale__item:nth-last-child(-n+2) > .secondLevel:not(:has(.megaCol)){ left:auto; right:0; }
#nested .firstLevel > li.nav-principale__item:nth-last-child(-n+2) > .secondLevel:not(:has(.megaCol)) .arrowTop{ left:auto; right:28px; }
/* [anti-débordement MÉGA-menu = scripts/mega-menu-position.js : mesure réelle du bord droit à l'ouverture
   et décale le panneau vers la gauche si besoin. Plus robuste que l'heuristique :nth-last-child (largeurs
   variables + nav poussée à droite). Le JS pose .secondLevel.style.left ; fallback CSS = width capé viewport.] */

/* Deux gabarits selon le contenu (spécificité :has > règle de base → override sans dépendre de l'ordre) */
/* CAS 1 — méga-menu LARGE (rubrique avec sous-niveaux) : PLEINE LARGEUR du .container, image gauche + grille.
   Bascule de l'ancêtre positionné : li static → le panneau se cale sur .header-inner (relative). */
/* :has SIMPLE (un seul niveau) — .megaCol est un descendant du li, test direct. */
#nested .firstLevel > li.nav-principale__item:has(.megaCol){ position:static; }   /* li static → le panneau s'ancre sur .header-inner (position:relative) → centrage sur la PAGE */
#nested .firstLevel > li.nav-principale__item:not(:has(.megaCol)){ position:relative; }

#nested .secondLevel:has(.megaCol){
  left:50%; top:100%; transform:translateX(-50%);  /* CENTRÉ sur la page (même position pour tous les items) → ne déborde jamais */
  width:fit-content;                                /* largeur = contenu (image + N colonnes côte à côte) */
  min-width:0; max-width:calc(100vw - 2rem);        /* jamais plus large que le viewport */
  display:grid; align-items:start;  /* GRILLE : colonnes CÔTE À CÔTE. grid-template-columns posé par mega-menu-position.js (N colonnes exactes = pas de pistes vides ; + 220px image si présente). */
  gap:24px 32px; padding:32px;
}
/* méga-menu SANS image : masquer le conteneur image vide (le JS ne réserve pas la piste 220px). */
#nested .secondLevel:has(.megaCol):not(:has(img)) .menuImageItem{ display:none; }
/* image (si présente) = colonne 1, pleine hauteur */
#nested .secondLevel:has(.megaCol) .menuImageItem{ display:block; grid-column:1; grid-row:1 / -1; align-self:stretch; }
#nested .secondLevel:has(.megaCol) .menuCardImage{ height:100%; border-radius:var(--card-radius); overflow:hidden; aspect-ratio:auto; }
#nested .secondLevel:has(.megaCol) .nestedPicture,
#nested .secondLevel:has(.megaCol) .nestedPicture img{ width:100%; height:100%; object-fit:cover; display:block; }
/* colonnes : largeur gérée par la grille */
#nested .secondLevel:has(.megaCol) .megaCol{ min-width:0; }
/* accès directs : pleine largeur en pied (saut de ligne flex) */
#nested .secondLevel:has(.megaCol) .standalone-group{ grid-column:1 / -1; justify-content:flex-start; }   /* Accès directs : pleine largeur (toutes colonnes), en bas, liens à gauche */
/* flèche masquée : le panneau n'est plus calé sous l'onglet précis */
#nested .secondLevel:has(.megaCol) .arrowTop{ display:none; }

/* CAS 2 — déroulant SIMPLE (1 niveau, pas de .megaCol) : étroit, 1 colonne VERTICALE.
   Sans ces overrides, le .standalone-group hérite du flex-wrap horizontal de base → liens côte à côte. */
#nested .secondLevel:not(:has(.megaCol)){
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  min-width:240px !important; max-width:300px !important;
  gap:2px !important;
}
/* pas d'image dans le cas simple */
#nested .secondLevel:not(:has(.megaCol)) .menuImageItem{ display:none !important; }
/* le standalone-group passe en colonne (pas en ligne) */
#nested .secondLevel:not(:has(.megaCol)) .standalone-group{
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:2px !important;
  border-top:none !important; margin-top:0 !important; padding-top:0 !important;
}
/* chaque lien sur sa propre ligne, pleine largeur */
#nested .secondLevel:not(:has(.megaCol)) .standalone-group > a{
  display:block !important; width:100% !important; padding:6px 0 !important;
}
/* le label "Accès directs" garde sa pleine largeur au-dessus */
#nested .secondLevel:not(:has(.megaCol)) .standalone-group .group-label{ flex:0 0 auto !important; width:100% !important; }

.header-actions{ display:inline-flex; align-items:center; gap:10px; }
.icon-btn{ width:42px; height:42px; border-radius:10px; display:grid; place-items:center;
  color:#fff; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); transition:all .2s; }
.icon-btn i{ font-size:20px; }
.icon-btn:hover{ border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.14); }
.burger{ display:none; }

/* logo center variation */
[data-logo-position="center"] .brand{ order:1; margin-inline:auto; }
[data-logo-position="center"] .main-nav{ order:0; margin:0; }
[data-logo-position="center"] .header-actions{ order:2; }

/* =================================================================== RECHERCHE (box header)
   Habillage de la box NATIVE Saytup `search/box_search.html`, activée en back-office et
   déposée dans la zone boxes du banner (structure/mainPage.html l.70). Le gabarit natif
   reste INTACT (coquilles amont comprises) : tout se joue ici.

   ⚠️ CONTRAT — les classes d'état sont IMPOSÉES par le JS natif `scripts/functions.js` :
     widgetSearchManager()  clic .widgetSearchLink → bascule .active sur #searchform
                            focus/clic sur le champ → .active sur .row.search
                            keyup                   → .hasContent sur .row.search
                            GARDE : sort si la box n'est pas dans un <header> → d'où la
                            zone boxes DANS le banner, et nulle part ailleurs.
     closeLayerManager()    clic .closeLayer → .fadeOut, puis retrait de .active après 500 ms
                            Échap → déclenche ce même clic
   Ne JAMAIS renommer .active / .fadeOut / .hasContent / .layerElement / .closeLayer :
   le JS ne les cherche pas ailleurs. Et le fondu de sortie doit rester SOUS 500 ms,
   sinon le JS retire .active avant la fin de la transition.

   Structure imposée par le gabarit (aucun wrapper disponible) :
     .widgetSearch > .widgetTitle (option BO)
                   > .widgetContainer > a.widgetSearchLink   (la loupe)
                                      > form#searchform.layerElement  (le panneau)
                                      > a.widgetSearchAdvanced        (option BO)
   Le lien « recherche avancée » étant un FRÈRE du formulaire, on empile les trois en
   COLONNE dans .widgetContainer : la loupe garde son gabarit de 42 px dans la rangée,
   le panneau et le lien se déroulent dessous. Aucun décalage en dur. */

/* A — GARDE-FOU BOX VIDE. La loupe littérale de repli a été RETIRÉE du banner : le
   widget natif est désormais le seul déclencheur, et s'il n'y a pas de box il n'y a
   pas de loupe — parti assumé, pas d'icône qui ne mène nulle part.
   Reste un cas à couvrir : le BO peut rendre une .widgetSearch coquille (box
   désactivée, gabarit tout de même émis). Sans .widgetSearchLink il n'y a rien à
   déclencher — et le JS natif n'a rien câblé — donc on n'occupe pas le slot de 42 px. */
.header-actions .widgetSearch:not(:has(.widgetSearchLink)){ display:none; }

/* Le widget occupe un slot de 42 px dans la rangée flex .header-actions (gap:10px). */
.header-actions .widgetSearch{ position:relative; width:42px; height:42px; flex:0 0 auto; }
/* Titre de box (champ optionnel du BO) : la loupe se suffit — et un titre visible
   casserait la rangée. Même parti que #footer .wc-footer-legal .widgetTitle. */
.header-actions .widgetSearch .widgetTitle{ display:none; }

/* La colonne déroulante, superposée au slot. pointer-events neutralisé sur le
   conteneur (sa boîte est large) puis rendu aux seuls éléments interactifs. */
.header-actions .widgetSearch .widgetContainer{
  position:absolute; top:0; right:0; z-index:200;   /* même plan que le méga-menu (cf. #nested .secondLevel) */
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  margin:0; padding:0; pointer-events:none;
}

/* B — DÉCLENCHEUR : même gabarit visuel que .icon-btn (l.341), sur fond dark du header.
   width/height explicites : ils neutralisent aussi l'utilitaire natif .square-30,
   qu'aucune feuille chargée ne définit. */
.header-actions .widgetSearchLink{
  flex:0 0 auto; width:42px; height:42px; border-radius:10px;
  display:grid; place-items:center; pointer-events:auto;
  color:var(--surface); text-decoration:none;
  border:1px solid color-mix(in srgb, var(--surface) 22%, transparent);
  background:color-mix(in srgb, var(--surface) 6%, transparent);
  transition:border-color .2s, background .2s;
}
.header-actions .widgetSearchLink:hover{
  border-color:color-mix(in srgb, var(--surface) 50%, transparent);
  background:color-mix(in srgb, var(--surface) 14%, transparent);
}
/* Le SVG natif .icon_search est en 30×30 et ses <path> n'ont AUCUN attribut fill
   (donc noir par défaut) : on le recadre et on le ramène à la couleur du bouton. */
.header-actions .widgetSearchLink .icon_search{ width:20px; height:20px; display:block; }
.header-actions .widgetSearchLink .icon_search path{ fill:currentColor; }

/* C — OVERLAY. Le <form id="searchform"> porte .layerElement.
   Fermé = invisible et non interactif SANS display:none, pour que le fondu puisse jouer. */
.header-actions .widgetSearch .layerElement{
  flex:0 0 auto; width:min(520px, calc(100vw - 5rem));
  box-sizing:border-box; padding:20px; position:relative;
  background:var(--surface); border-radius:var(--card-radius);
  /* Filet d'accent haut : la réserve est posée dès l'état fermé (bord transparent) et
     seule la COULEUR change à l'ouverture — sinon les 3px apparaîtraient en cours de
     fondu et décaleraient le lien « recherche avancée » sous la carte. */
  border-top:3px solid transparent;
  box-shadow:0 18px 44px -12px color-mix(in srgb, var(--couleur-dark) 28%, transparent),
             0 6px 16px -8px color-mix(in srgb, var(--couleur-dark) 15%, transparent);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s, border-top-color .22s ease;
}
.header-actions .widgetSearch .layerElement.active{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
  border-top-color:var(--couleur-principale);
}
/* Sortie : .fadeOut est posé, puis .active retiré 500 ms plus tard → on reste sous le budget. */
.header-actions .widgetSearch .layerElement.active.fadeOut{
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}

/* D — CHAMP. Le JS fait removeAttr('placeholder') sur l'input : le <label for=…> est
   donc le SEUL libellé. Il reste VISIBLE — pas de sr-only ici, rien ne le remplacerait.
   padding-right : réserve la place du bouton de fermeture, en haut à droite. */
.header-actions .widgetSearch .row.search{
  display:flex; flex-direction:column; gap:6px; margin:0; padding:0; border:none;
}
.header-actions .widgetSearch .row.search label{
  padding-right:44px;
  font-family:var(--police-titres); font-weight:600; font-size:12px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--couleur-principale);
}
/* Loupe DÉCORATIVE en préfixe du libellé. Famille "tabler-icons-fix" : c'est la seule
   réellement chargée (@font-face l.9, le chemin relatif du CDN ne résout pas hors
   origine) — même parti que les autres ::before du thème (l.1292, l.3099).
   Le nom accessible du champ reste le TEXTE du label, via son for="search_input_box". */
.header-actions .widgetSearch .row.search label::before{
  content:"\eb1c";                     /* ti-search */
  font-family:"tabler-icons-fix"; font-weight:400; font-style:normal;
  font-variant:normal; text-transform:none; letter-spacing:0; line-height:1;
  display:inline-block; margin-right:6px; vertical-align:-.1em; font-size:14px;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.header-actions .widgetSearch #search_input_box{
  width:100%; box-sizing:border-box;
  padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--btn-radius);
  font-family:var(--police-corps); font-size:15px;
  color:var(--ink); background:var(--surface);
  transition:border-color .2s, box-shadow .2s;
}
/* L'anneau de focus RGAA vient de la règle globale :focus-visible (l.82) — on ne le
   surcharge pas. Ici on accentue la bordure au focus ET sur les états NATIFS
   .search.active (focus/clic) et .search.hasContent (champ non vide). */
.header-actions .widgetSearch #search_input_box:focus,
.header-actions .widgetSearch .row.search.active #search_input_box,
.header-actions .widgetSearch .row.search.hasContent #search_input_box{
  border-color:var(--couleur-principale);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--couleur-principale) 15%, transparent);
}

/* E — SUBMIT : input.button.primary natif, ramené au look .btn-primary (l.120). */
.header-actions .widgetSearch .submit{ margin:14px 0 0; padding:0; }
.header-actions .widgetSearch input.button.primary{
  display:block; width:100%; box-sizing:border-box;
  padding:13px 22px; border:none; border-radius:var(--btn-radius); cursor:pointer;
  background:var(--couleur-principale); color:var(--surface);
  font-family:var(--police-titres); font-weight:600; font-size:15px;
  -webkit-appearance:none;
  box-shadow:0 8px 20px -8px color-mix(in srgb, var(--couleur-principale) 50%, transparent);
  transition:background .2s, transform .2s, box-shadow .2s;
}
.header-actions .widgetSearch input.button.primary:hover{
  background:var(--principale-700); transform:translateY(-2px);
  box-shadow:0 14px 28px -10px color-mix(in srgb, var(--couleur-principale) 55%, transparent);
}

/* F — FERMETURE. Le <a class="closeLayer"> natif contient <i class="fa fa-times"> :
   Font Awesome n'est PAS chargé (le shell n'appelle que styles.css + le webfont Tabler),
   ce glyphe rend donc VIDE. On le neutralise et on pose la croix Tabler en ::before.
   Cible ≥ 32 px. Le nom accessible du lien vient de son title="Fermer" natif.
   ⚠️ À SAVOIR : le <a> natif porte `href"#"` (le = manque — coquille amont, non corrigée
   ici puisque le gabarit reste intact). Il n'est donc PAS focusable au clavier. La
   fermeture au clavier passe par Échap, gérée par closeLayerManager (keyCode 27). */
.header-actions .widgetSearch .closeLayer{
  position:absolute; top:12px; right:12px;
  min-width:32px; min-height:32px; display:grid; place-items:center;
  border-radius:8px; cursor:pointer; text-decoration:none; color:var(--ink-3);
  transition:background .2s, color .2s;
}
.header-actions .widgetSearch .closeLayer i{ display:none; }   /* le fa-* inerte, hors flux */
.header-actions .widgetSearch .closeLayer::before{
  content:"\eb55";                     /* ti-x */
  font-family:"tabler-icons-fix"; font-size:20px; line-height:1;
  font-style:normal; font-weight:400; font-variant:normal; text-transform:none;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.header-actions .widgetSearch .closeLayer:hover{ background:var(--line-2); color:var(--couleur-principale); }

/* G — RECHERCHE AVANCÉE (mx:bloc "advanced" — présent seulement si le BO l'active).
   Frère du formulaire dans le gabarit : il se place donc en dernier item de la colonne,
   sous le panneau. Il ne se montre qu'avec le panneau ouvert. */
.header-actions .widgetSearch .widgetSearchAdvanced{
  flex:0 0 auto; pointer-events:none;
  padding:7px 14px; border-radius:999px;
  background:var(--surface); box-shadow:var(--shadow-sm);
  font-family:var(--police-corps); font-size:13px; font-weight:500;
  color:var(--couleur-principale); text-decoration:underline; text-underline-offset:2px;
  opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s, color .2s;
}
.header-actions .widgetSearch .widgetContainer:has(.layerElement.active) .widgetSearchAdvanced{
  opacity:1; visibility:visible; pointer-events:auto;
}
.header-actions .widgetSearch .widgetSearchAdvanced:hover{ color:var(--principale-700); }

@media (prefers-reduced-motion:reduce){
  .header-actions .widgetSearchLink,
  .header-actions .widgetSearch .layerElement,
  .header-actions .widgetSearch .layerElement.active,
  .header-actions .widgetSearch .layerElement.active.fadeOut,
  .header-actions .widgetSearch #search_input_box,
  .header-actions .widgetSearch input.button.primary,
  .header-actions .widgetSearch .closeLayer,
  .header-actions .widgetSearch .widgetSearchAdvanced{ transition:none; }
  .header-actions .widgetSearch .layerElement,
  .header-actions .widgetSearch .layerElement.active,
  .header-actions .widgetSearch .layerElement.active.fadeOut,
  .header-actions .widgetSearch input.button.primary:hover{ transform:none; }
}

/* =================================================================== HERO (ancien littéral)
   Markup accueil = diaporama natif (.hero-section, bloc dédié plus bas) → l'ancien hero littéral
   est supprimé. CONSERVÉ uniquement : .hero + .hero h1 (utilisés par
   publication_methods/homepage/homepage.html), et .hero-eyebrow (réutilisé par le surtitre
   injecté du hero accueil). */
.hero{ position:relative; height:min(620px,82vh); min-height:520px; overflow:hidden; background:var(--couleur-dark); padding-block:0;
  border-bottom-left-radius:clamp(80px,12vw,170px);
  -webkit-clip-path:inset(0 round 0 0 0 clamp(80px,12vw,170px)); clip-path:inset(0 round 0 0 0 clamp(80px,12vw,170px)); }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(8px); padding:7px 14px; border-radius:999px;
  font-family:var(--police-titres); font-weight:600; font-size:13px; margin-bottom:22px; }
.hero h1{ color:#fff; font-size:clamp(40px,5.6vw,66px); line-height:1.02; margin-bottom:10px; }

/* ============================================================ ALERTE BAR */
.alert-bar{ background:#fff; border-bottom:3px solid var(--warning); position:relative; z-index:5; padding-block:0; }/* exempté du padding de section générique (core §6.13) */
.alert-inner{ display:flex; align-items:center; gap:18px; padding:15px 0; }
.alert-ic{ flex-shrink:0; width:44px; height:44px; border-radius:11px; background:var(--warning-bg);
  color:var(--warning); display:grid; place-items:center; }
.alert-ic i{ font-size:24px; }
.alert-txt{ flex:1; }
.alert-txt strong{ display:block; font-family:var(--police-titres); font-weight:700; color:var(--ink); font-size:15px; }
.alert-txt span{ font-size:14.5px; color:var(--ink-3); }
.alert-close{ flex-shrink:0; width:34px; height:34px; border-radius:8px; color:var(--ink-4); display:grid; place-items:center; transition:all .2s; }
.alert-close:hover{ background:var(--surface-2); color:var(--ink); }
.alert-close i{ font-size:20px; }
/* ALERTE DYNAMIQUE (.wc-alerte) — 3 niveaux + masquage de la box source (header).
   Le .alert-bar est reconstruit par scripts/alerte-accueil.js APRÈS le hero. */
.wc-alerte.widgetText{ display:none !important; }   /* box brute dans le header → masquée */
.alert-bar--info{ border-bottom-color:var(--info); }
.alert-bar--info .alert-ic{ background:color-mix(in srgb, var(--info) 15%, transparent); color:var(--info); }
.alert-bar--important{ border-bottom-color:var(--warning); }
.alert-bar--important .alert-ic{ background:var(--warning-bg); color:var(--warning); }
.alert-bar--urgent{ border-bottom-color:var(--danger); }
.alert-bar--urgent .alert-ic{ background:color-mix(in srgb, var(--danger) 15%, transparent); color:var(--danger); }

/* ===================================================== CARROUSEL GÉNÉRIQUE */
.carousel{ position:relative; }
.carousel-track{ display:flex; gap:20px; overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x mandatory; padding-bottom:6px; scrollbar-width:none; }
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-track>*{ scroll-snap-align:start; flex:0 0 auto; }
.carousel-nav{ display:inline-flex; gap:10px; }
.cnav-btn{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:#fff; border:1px solid var(--line); color:var(--ink-2); box-shadow:var(--shadow-sm); transition:all .2s; }
.cnav-btn i{ font-size:20px; }
.cnav-btn:hover{ border-color:var(--couleur-principale); color:var(--couleur-principale); }
.cnav-btn.on-dark{ background:transparent; border-color:rgba(255,255,255,.35); color:#fff; box-shadow:none; }
.cnav-btn.on-dark:hover{ background:rgba(255,255,255,.14); border-color:#fff; }

.dots{ display:flex; gap:8px; justify-content:center; margin-top:26px; }
.dot{ width:9px; height:9px; border-radius:999px; background:var(--line); transition:all .3s; }
.dot.active{ width:26px; background:var(--couleur-secondaire); }
.dots.on-dark .dot{ background:rgba(255,255,255,.3); }
.dots.on-dark .dot.active{ background:var(--secondaire-100); }

/* ======================================================== ACCÈS RAPIDES */
.qa{ position:relative; background:
  linear-gradient(180deg,#fff 60%,var(--secondaire-50) 100%); }
.qa-card{ width:288px; background:#fff; border:1px solid var(--line); border-radius:var(--card-radius);
  padding:26px; box-shadow:var(--shadow-sm); transition:transform .25s, box-shadow .25s, border-color .25s;
  display:flex; flex-direction:column; gap:14px; }
.qa-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--principale-100); }
.qa-ic{ width:56px; height:56px; border-radius:15px; display:grid; place-items:center; transition:transform .25s; }
.qa-ic i{ font-size:28px; }
.qa-card:hover .qa-ic{ transform:scale(1.06) rotate(-4deg); }
.qa-ic.red{ background:#FEE2E2; color:#DC2626; }
.qa-ic.green{ background:#D1FAE5; color:#15803D; }
.qa-ic.cyan{ background:var(--secondaire-100); color:var(--secondaire-600); }
.qa-ic.blue{ background:#DBEAFE; color:var(--couleur-principale); }
.qa-ic.violet{ background:#EDE9FE; color:#7C3AED; }
.qa-ic.rose{ background:#FCE7F3; color:#BE123C; }
.qa-ic.amber{ background:#FEF3C7; color:#B45309; }
.qa-ic.orange{ background:#FED7AA; color:#C2410C; }
.qa-card h3{ font-size:18px; }
.qa-card p{ font-size:14px; color:var(--ink-3); flex:1; }
.qa-card .link-more{ font-size:14px; }

/* =========================================================== ACTUALITÉS */
.news-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:22px; }
.news-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--card-radius); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .25s, box-shadow .25s, border-color .25s; }
.news-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--principale-100); }
.news-feat .news-media{ aspect-ratio:16/10; }
.news-media{ position:relative; overflow:hidden; }
.news-media .ph{ width:100%; height:100%; transition:transform .4s; }
.news-card:hover .news-media .ph{ transform:scale(1.05); }
.news-media .tag{ position:absolute; top:14px; left:14px; box-shadow:var(--shadow-sm); }
.news-body{ padding:22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.news-date{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-4); font-weight:500; }
.news-date i{ font-size:15px; }
.news-feat h3{ font-size:24px; line-height:1.2; }
.news-col{ display:flex; flex-direction:column; gap:22px; }
.news-mini{ display:flex; flex-direction:column; flex:1; background:#fff; border:1px solid var(--line); border-radius:var(--card-radius);
  overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .25s, box-shadow .25s, border-color .25s; }  /* VERTICALE : image pleine largeur en haut + texte dessous ; flex:1 → les 2 minis remplissent la hauteur du featured */
.news-mini:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--principale-100); }
.news-mini .news-media{ width:100%; flex:1; min-height:150px; }  /* image en haut, paysage plein cadre, grandit pour remplir */
.news-mini .news-media .ph, .news-mini .news-media .ph-img, .news-mini .news-media img{ width:100%; height:100%; object-fit:cover; }  /* photo plein cadre */
.news-mini .news-body{ flex:0 0 auto; padding:18px 20px; gap:7px; }  /* texte dessous, hauteur de contenu */
.news-mini h3{ font-size:16.5px; line-height:1.25; }
.news-mini p{ font-size:13.5px; color:var(--ink-3); }

/* =============================================================== AGENDA (DARK) — .wc-agenda
   (renommé depuis .agenda : neutralise l'accroche de script-custom.js /default/ qui ciblait
    .agenda .widgetContainer ; la section garde id="agenda" pour les ancres) */
.wc-agenda{ background:var(--couleur-dark); position:relative; overflow:hidden; }   /* aplat navy uni */
/* Scrim décoratif neutralisé : fond NAVY UNI (cohérent avec les cartes), plus de dégradé radial.
   La .wave-top (transition en haut de section) reste intacte. */
.wc-agenda::before{ display:none; }
.wc-agenda .container{ position:relative; }
.wc-agenda .h2{ color:#fff; }
.ev-card{ width:340px; background:var(--dark-2); border:1px solid var(--dark-line); border-radius:var(--card-radius);
  overflow:hidden; transition:transform .25s, box-shadow .25s; }
.ev-card:hover{ transform:translateY(-5px); box-shadow:0 24px 50px -20px rgba(0,0,0,.6); }
.ev-media{ position:relative; aspect-ratio:16/9; }
.ev-media .ph{ width:100%; height:100%; }
/* PLACEHOLDER carrousel AGENDA accueil : si l'événement n'a PAS d'image, Saytup ne rend PAS du tout
   le <div class="ev-media"> → on cible l'ARTICLE sans .ev-media et on injecte une zone média 16/9
   (dégradé colis + icône calendrier SVG) via ::before, en TÊTE de carte (avant .ev-body ; .blogPostDate
   est display:none). Scope .wc-agenda = accueil only. :not(:has(.ev-media)) single-level → conforme. */
.wc-agenda .ev-card:not(:has(.ev-media))::before{
  content:""; display:block; width:100%; aspect-ratio:16/9; pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M4 10h16'/%3E%3Crect x='7.5' y='13' width='3' height='3' rx='.5' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E") center / 46px no-repeat,
    linear-gradient(135deg, var(--principale-700) 0%, var(--secondaire-600) 100%);
  opacity:.96;
}
.ev-body{ padding:24px 22px; display:flex; flex-direction:column; gap:10px; }
/* en-tête de carte : tag à GAUCHE, DATE inline à DROITE (plus de badge en débord) */
.ev-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ev-tag{ font-family:var(--police-titres); font-weight:700; font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--secondaire-100);
  background:rgba(6,182,212,.14); border:1px solid rgba(6,182,212,.3); padding:4px 10px; border-radius:999px; }
.ev-body h3{ color:#fff; font-size:19px; line-height:1.25; }
.ev-body p{ font-size:14px; color:var(--dark-ink); }

/* Home (highlight_posts) — bandeau date en HAUT, overlay ancré sur .ev-card (position:relative), HORS mx:bloc
   → les spe_event_* / spe_location résolvent, bandeau toujours émis (avec OU sans image). top:0 = position FIXE
   (haut de carte = haut de l'image) → pas de souci de hauteur d'image variable. Picto centré (align-items:center).
   padding-bottom = hauteur du dégradé (voile sombre en haut, fondu vers le bas). */
.ev-card{ position:relative; }
.ev-meta{
  position:absolute; top:0; left:0; right:0; margin:0; z-index:2; pointer-events:none;
  padding:10px 14px 24px;
  background:linear-gradient(rgba(10,16,35,.85), transparent);
  color:#fff; font-size:13px; font-weight:600;
  display:flex; align-items:center; flex-wrap:wrap; gap:2px 6px;
}
.ev-cal{ display:inline-flex; align-items:center; }
.ev-meta:not(:has(.ev-start:not(:empty))) .ev-cal{ display:none; }   /* pas de picto orphelin si pas de date de début */
.ev-start:not(:empty)::before{ content:"Du "; font-weight:400; opacity:.85; }
.ev-end:not(:empty)::before{ content:"au "; font-weight:400; opacity:.85; }
.ev-loc:not(:empty)::before{ content:"· "; font-weight:400; opacity:.85; }
/* Date de publication, discrète, détachée des dates d'événement. */
.ev-published{ font-size:11px; opacity:.6; margin-top:8px; }
.ev-published:not(:empty)::before{ content:"Publié le "; }

/* Agenda : ligne meta dates+lieu (agenda.html/agenda_detail.html .event-meta) — etait en BRUT.
   "du"/"au"/"·" poses en CSS. "au"/"·" conditionnes par mx:bloc (absent si event 1 jour / sans lieu) ;
   :not(:empty) = double-securite anti-"au" orphelin si le moteur emettait un span vide. */
.event-meta{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px;
  font-family:var(--police-texte); font-size:14px; color:var(--secondaire-100);
  margin-top:6px;
}
.event-meta__start, .event-meta__end{ font-weight:600; }
.event-meta__start:not(:empty)::before{ content:"du "; font-weight:400; opacity:.7; }
.event-meta__end:not(:empty)::before{ content:"au "; font-weight:400; opacity:.7; }
.event-meta__loc:not(:empty)::before{ content:"· "; opacity:.5; margin:0 2px 0 4px; }
.event-meta__loc{ font-weight:400; opacity:.9; }

/* ======================================================== PANNEAU POCKET */
/* Section POCKET (appli mobile « Toute Hulluch dans votre poche ») MASQUÉE par défaut.
   Donnée non fournie par le brief WeeCity. RÉACTIVER pour une commune ayant une appli :
   retirer la règle display:none ci-dessous (la section reste dans le content model, non supprimée). */
body:has(#contenu-principal #hero) .section.pocket{ display:none !important; }
.pocket{ background:linear-gradient(180deg,#EAF3FB 0%,#F4F9FD 60%,#fff 100%); position:relative; overflow:hidden; }
.pocket-decor{ position:absolute; border-radius:50%; filter:blur(70px); z-index:0; pointer-events:none; }
.pocket-decor.d1{ width:480px; height:480px; top:-150px; right:-150px;
  background:radial-gradient(circle,rgba(6,182,212,.30),transparent 70%); }
.pocket-decor.d2{ width:420px; height:420px; bottom:-180px; left:-130px;
  background:radial-gradient(circle,rgba(30,64,175,.22),transparent 70%); }
.pocket-grid{ display:grid; grid-template-columns:auto 1fr auto; gap:48px; align-items:center; position:relative; z-index:1; }
/* iPhone mockup */
.phone{ width:248px; height:506px; border-radius:46px; background:#0B1220; padding:12px;
  box-shadow:0 40px 80px -30px rgba(10,31,68,.55),0 10px 30px -10px rgba(10,31,68,.4); position:relative; flex-shrink:0; }
.phone::before{ content:""; position:absolute; top:22px; left:50%; transform:translateX(-50%);
  width:104px; height:26px; background:#0B1220; border-radius:14px; z-index:3; }
.phone-screen{ width:100%; height:100%; border-radius:36px; overflow:hidden; position:relative;
  background:linear-gradient(160deg,#DC2626,#B91C1C); display:flex; flex-direction:column; }
.phone-status{ height:46px; display:flex; align-items:flex-end; justify-content:space-between; padding:0 22px 6px; color:#fff; font-size:12px; font-weight:600; font-family:var(--police-titres); }
.phone-app{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; color:#fff; gap:14px; }
.phone-app .pa-ic{ width:78px; height:78px; border-radius:22px; background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.3); display:grid; place-items:center; }
.phone-app .pa-ic i{ font-size:42px; }
.phone-app .pa-badge{ font-family:var(--police-titres); font-weight:700; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; background:rgba(255,255,255,.2); padding:5px 12px; border-radius:999px; }
.phone-app .pa-title{ color:#fff; font-size:22px; }
.phone-app p{ font-size:13px; color:rgba(255,255,255,.85); }
.phone-app .pa-cta{ margin-top:6px; background:#fff; color:#B91C1C; font-family:var(--police-titres);
  font-weight:700; font-size:13px; padding:10px 20px; border-radius:999px; }
.phone-nav{ height:58px; background:rgba(0,0,0,.18); display:flex; align-items:center; justify-content:space-around; color:rgba(255,255,255,.8); }
.phone-nav i{ font-size:22px; }
.phone-nav i.act{ color:#fff; }

.pocket-main{ max-width:520px; }
.pocket-main h2{ font-size:clamp(28px,3.2vw,40px); margin-bottom:14px; }
.pocket-main h2 .accent{ color:var(--couleur-secondaire); }
.pocket-main .lead{ margin-bottom:24px; }
.store-row{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
.store-btn{ display:inline-flex; align-items:center; gap:11px; background:#0B1220; color:#fff;
  padding:11px 18px; border-radius:12px; transition:transform .2s, box-shadow .2s; }
.store-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.store-btn i{ font-size:28px; }
.store-btn .sb-t{ display:flex; flex-direction:column; line-height:1.1; text-align:left; }
.store-btn .sb-t small{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; opacity:.75; }
.store-btn .sb-t strong{ font-family:var(--police-titres); font-weight:700; font-size:16px; }
.pocket-pills{ display:flex; gap:10px; flex-wrap:wrap; }
.pocket-pill{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:9px 16px; box-shadow:var(--shadow-xs); }
.pocket-pill strong{ font-family:var(--police-titres); font-weight:700; font-size:13.5px; color:var(--ink); }
.pocket-pill span{ font-size:11.5px; color:var(--ink-3); }

.pocket-side{ display:flex; flex-direction:column; gap:14px; width:240px; }
.pocket-mini{ display:flex; gap:13px; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:16px; box-shadow:var(--shadow-sm); }
.pocket-mini .pm-ic{ flex-shrink:0; width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  background:var(--principale-50); color:var(--couleur-principale); }
.pocket-mini .pm-ic i{ font-size:21px; }
.pocket-mini.c2 .pm-ic{ background:var(--secondaire-100); color:var(--secondaire-600); }
.pocket-mini.c3 .pm-ic{ background:#FFE4E6; color:#BE123C; }
.pocket-mini h3{ font-size:14.5px; }
.pocket-mini p{ font-size:12.5px; color:var(--ink-3); }

/* =============================================================== KIOSQUE */
.kiosk{ background:var(--bg-creme); }
.kiosk-head{ display:flex; align-items:center; gap:11px; }
.kiosk-head > i{ font-size:30px; line-height:1; color:var(--couleur-principale); flex-shrink:0; }  /* cible le seul picto du titre, pas les <i> de la supra */
.tabs{ display:flex; gap:6px; flex-wrap:wrap; margin:28px 0 34px; }
.tab{ font-family:var(--police-titres); font-weight:600; font-size:14px; color:var(--ink-3);
  padding:9px 16px; border-radius:999px; transition:all .2s; position:relative; }
.tab:hover{ color:var(--couleur-principale); }
.tab.active{ color:var(--couleur-principale); background:#fff; box-shadow:var(--shadow-sm); }
.tab.active::after{ content:""; position:absolute; bottom:-9px; left:50%; transform:translateX(-50%);
  width:24px; height:3px; background:var(--couleur-secondaire); border-radius:2px; }
/* [RETIRÉ 2026-06-26] Legacy BUILD 1 (kiosque littéral) : .pub-grid + .pub-card NUE
   (--c1/--c2 indéfinis, scrim rgba(0,0,0,.45), min-height:230px, variantes .magazine/.delib/
   .bulletin/.arrete-* en hex). Code mort : le littéral #kioskTabs/#pubGrid est supprimé du CM,
   et toute .pub-card vivante est rendue SOUS .wc-publications (bloc ci-dessous). Ce legacy NON
   scopé colait un « fond gris vertical » à toute .pub-card hors accueil (ex. /deliberations/).
   Le design document page-contenu sera conçu séparément (build B), proprement scopé. */

/* --- KIOSQUE DYNAMIQUE (annuaire publications wc-publications, fiche _40 → .pub-card) --------------
   DOM réel : .elementDirectory.wc-publications > .directoryList > ul.directoryListFilters(VIDE, peuplée par
   kiosque-filter.js) + .directoryEntries > article.pub-card (PAS de .directoryEntry). Kiosque demi-largeur
   → grille 3 colonnes COMPACTES. Scope strict wc-publications. */
.wc-publications .directoryEntries{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.wc-publications .pub-card.is-hidden{ display:none !important; }   /* filtre maître (bat l'inline MixItUp) */

/* carte COMPACTE (185px) */
.wc-publications .pub-card{
  position:relative; min-height:185px; border-radius:var(--card-radius); overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; padding:14px 0;
  background:linear-gradient(160deg,var(--couleur-principale),var(--couleur-dark));   /* fallback sans image */
  box-shadow:var(--shadow-sm); transition:transform .25s, box-shadow .25s;
}
.wc-publications .pub-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
/* couverture (field_416) en fond plein cadre + scrim */
.wc-publications .pub-card__cover{ position:absolute; inset:0; z-index:0; }
.wc-publications .pub-card__cover a{ pointer-events:none; display:block; width:100%; height:100%; }   /* neutralise fancybox */
.wc-publications .pub-card__cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.wc-publications .pub-card::after{ content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(to top,rgba(10,20,40,.85),rgba(10,20,40,.15)); }
/* contenu au-dessus du scrim */
.wc-publications .pub-card__tags,
.wc-publications .pub-card__title,
.wc-publications .pub-card__more{ position:relative; z-index:1; }
/* tag (badge) */
.wc-publications .pub-card__tags{ margin-bottom:auto; }
.wc-publications .pub-card__tag{ display:inline-block; background:var(--secondaire-100); color:#fff;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 9px; border-radius:6px;
  margin:0 0 6px 14px; }
.wc-publications .pub-card__title{ color:#fff; font-size:15px; line-height:1.25; margin:0 0 4px; padding-inline:14px; }
.wc-publications .pub-card__more{ display:inline-flex; align-items:center; gap:4px; color:#fff;
  font-family:var(--police-titres); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em;
  padding:0 14px 14px; text-decoration:none; }
.wc-publications .pub-card__more:hover{ gap:8px; }
/* [build B retiré 2026-06-26] La carte document .pub-card page-contenu a été abandonnée :
   les documents (delib/CR/bulletin) repassent en summary_3 (.directoryEntry) — filtres + tri
   natifs (cf. mixItUp_sortTags.js / main.js, qui exigent .directoryEntry, absent de .pub-card).
   Le visuel large « document » est porté en CSS sur summary_3 (cf. ANNUAIRE — visuel large documents).
   .pub-card reste donc strictement KIOSQUE ACCUEIL (.wc-publications). */

/* === DOCUMENTS summary_40 page-contenu — filtre maison + carte (capture) ===================
   Annuaires document = .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)), fiche _40 (.pub-card),
   barre .doc-filterbar injectée par documents-filter.js. Template mutualisé → date + PDF MASQUÉS
   sur l'accueil. 100% variables colis, no scrim, reduced-motion. */

/* (A) blindage accueil : le kiosque reste visuel + tag + titre + « En savoir plus »
   (sécurité : le JR documents ne tourne pas sur .wc-publications, .pub-doc n'y apparaît jamais) */
.wc-publications .pub-card__date,
.wc-publications .pub-card__pdf,
.wc-publications .pub-doc{ display:none !important; }

/* (B) conteneur documents : liste verticale + barre native Saytup masquée (la nôtre la remplace) */
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .directoryListFilters{ display:none !important; }
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .directoryEntries{
  display:flex; flex-direction:column; gap:12px;
}

/* (C) BARRE tabs + tri (.doc-filterbar) */
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .doc-filterbar{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:12px 14px; margin:0 0 18px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--card-radius); box-shadow:var(--shadow-sm);
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .doc-tabs{
  display:flex; flex-wrap:wrap; gap:8px; flex:1; min-width:0;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .doc-tab{
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-2);
  font-family:var(--police-titres); font-weight:600; font-size:.8rem; line-height:1.1; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .doc-tab:hover{
  border-color:color-mix(in srgb, var(--couleur-principale) 40%, var(--line)); color:var(--couleur-principale);
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .doc-tab.is-active{
  background:var(--couleur-principale); border-color:var(--couleur-principale); color:rgba(255,255,255,1);
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .doc-tab__count{
  display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px;
  border-radius:999px; font-size:.7rem; font-weight:700; background:var(--surface-2); color:var(--ink-3);
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .doc-tab.is-active .doc-tab__count{
  background:color-mix(in srgb, var(--couleur-dark) 55%, transparent); color:rgba(255,255,255,1);
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .doc-sep{
  width:1px; align-self:stretch; min-height:26px; background:var(--line); margin:0 2px; flex-shrink:0;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .doc-sort{
  display:inline-flex; gap:6px; flex-shrink:0;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .doc-sort-btn{
  display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-2);
  font-family:var(--police-titres); font-weight:600; font-size:.8rem; line-height:1.1; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .doc-sort-btn::before{
  font-size:.85rem; font-weight:700; line-height:1;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .doc-sort-btn[data-sort="desc"]::before{ content:"\2193"; }
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .doc-sort-btn[data-sort="asc"]::before{ content:"\2191"; }
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .doc-sort-btn:hover{
  border-color:color-mix(in srgb, var(--couleur-principale) 40%, var(--line)); color:var(--couleur-principale);
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .doc-sort-btn.is-active{
  background:var(--couleur-principale); border-color:var(--couleur-principale); color:rgba(255,255,255,1);
}


/* (D) CARTE DOCUMENT .pub-doc — structure 3 colonnes reconstruite par documents-filter.js :
   [média gauche pleine hauteur] | [corps : tag → titre → date] | [action : bouton PDF + poids].
   Scope strict .filtersActive:not(.wc-publications). 100% variables colis, no scrim, reduced-motion. */
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .pub-doc{
  display:flex; flex-direction:row; flex-wrap:nowrap; align-items:stretch; overflow:hidden; margin-block:8px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--card-radius); box-shadow:var(--shadow-sm);
  color:var(--ink); transition:transform .18s, box-shadow .18s, border-color .18s;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .pub-doc:hover{
  transform:translateY(-2px); box-shadow:var(--shadow-md);
  border-color:color-mix(in srgb, var(--couleur-secondaire) 45%, var(--line));
}
/* MÉDIA gauche — largeur fixe, pleine hauteur, rognage auto */
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .pub-doc__media{
  flex:0 0 clamp(120px,16%,150px); align-self:stretch; position:relative; overflow:hidden; border-right:1px solid var(--line);
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .pub-doc__media a{ position:absolute; inset:0; display:block; }
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .pub-doc__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .pub-doc__media a.LinkFile{
  pointer-events:none; background:none !important; border:none !important; padding:0 !important; border-radius:0 !important;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .pub-doc__media a.LinkFile::before{ content:none !important; }
/* PLACEHOLDER teal si pas d'image (même gabarit → lignes alignées) */
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .pub-doc__media:not(:has(img)){
  background:linear-gradient(135deg, color-mix(in srgb, var(--couleur-secondaire) 18%, var(--surface)), color-mix(in srgb, var(--couleur-secondaire) 6%, var(--surface)));
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .pub-doc__media:not(:has(img))::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:30px; height:36px; background:var(--couleur-secondaire);
  -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='17' x2='16' y2='17'/%3E%3Cline x1='8' y1='9' x2='10' y2='9'/%3E%3C/svg%3E");
  mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='17' x2='16' y2='17'/%3E%3Cline x1='8' y1='9' x2='10' y2='9'/%3E%3C/svg%3E");
}
/* CORPS centre — flexible (titre wrap, jamais sous le média grâce à min-width:0) */
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .pub-doc__body{
  flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:5px; padding:14px 20px;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .pub-doc__tag{
  align-self:flex-start; display:inline-flex; align-items:center; padding:4px 12px; border-radius:999px;
  font-size:12px; font-weight:600; line-height:1.4; white-space:nowrap;
  background:color-mix(in srgb, var(--couleur-secondaire) 12%, transparent); color:var(--couleur-secondaire);
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .pub-doc__title{
  margin:0; font:700 clamp(16px,1.6vw,19px)/1.3 var(--police-titres); color:var(--ink); overflow-wrap:break-word;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .pub-doc__date{
  margin:0; font-size:13px; color:var(--ink-2);
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .pub-doc__date-label{ font-weight:700; color:var(--ink); }
/* ACTION droite — bouton PDF + poids */
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .pub-doc__action{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:14px 20px;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .pub-doc__action a.LinkFile{
  display:inline-flex !important; align-items:center; gap:8px; padding:12px 20px !important;
  background:var(--couleur-principale) !important; color:rgba(255,255,255,1) !important; border:none !important;
  border-radius:var(--btn-radius) !important; font-family:var(--police-titres); font-weight:600 !important;
  font-size:0 !important; text-decoration:none !important; white-space:nowrap; transition:background .18s, box-shadow .18s;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .pub-doc__action a.LinkFile::before{
  content:"\2193" !important; width:auto !important; height:auto !important; background:none !important;
  -webkit-mask:none !important; mask:none !important; font-size:.95rem; font-weight:700; line-height:1;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .pub-doc__action a.LinkFile::after{
  content:"Télécharger le PDF"; font-size:.8rem; letter-spacing:.01em;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .pub-doc__action a.LinkFile:hover{
  background:color-mix(in srgb, var(--couleur-principale) 85%, var(--couleur-dark)) !important;
  box-shadow:0 4px 12px color-mix(in srgb, var(--couleur-principale) 28%, transparent);
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .pub-doc__action a.LinkFile:focus-visible{
  outline:2px solid var(--couleur-secondaire); outline-offset:2px;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .pub-doc__weight{ font-size:12px; color:var(--ink-3); white-space:nowrap; }
/* responsive ≤640px : carte en colonne — média bandeau haut, action pleine largeur */
@media (max-width:640px){
  body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .pub-doc{ flex-direction:column; }
  body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .pub-doc__media{
    flex:0 0 auto; width:100%; height:clamp(120px,32vw,160px); border-right:none; border-bottom:1px solid var(--line);
  }
  body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .pub-doc__action{
    flex-direction:row; flex-wrap:wrap; gap:10px; padding-top:0;
  }
  body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .pub-doc__action a.LinkFile{ flex:1 1 auto; justify-content:center; }
}
/* reduced-motion */
@media (prefers-reduced-motion:reduce){
  body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .pub-doc,
  body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .pub-doc:hover,
  body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .doc-tab,
  body:not(:has(#contenu-principal #hero)) .elementDirectory.filtersActive:not(.wc-publications):not(:has(.ann-card.wc-annuaire-entry)) .doc-sort-btn{ transition:none; transform:none; }
}

/* === ANNUAIRE GÉNÉRIQUE summary_3 (associations, commerces, hébergement…) — cartes + filtre ==========
   Marqueur .wc-annuaire-entry posé sur l'entrée dans directory_entry_summary_3.html → scope CSS pur
   via .elementDirectory:has(.ann-card.wc-annuaire-entry) (pas de flash, pas de box_class BO).
   Entrées restructurées en cartes par scripts/annuaire-filter.js (AUTO sur tout summary_3).
   Exclu du bloc DOCUMENTS ci-dessus via :not(:has(.ann-card.wc-annuaire-entry)).
   Scope page-contenu. 100% variables colis, focus RGAA, reduced-motion. */
/* barre native (MixItUp, vide) masquée → notre .annuaire-filters la remplace */
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .directoryListFilters{ display:none !important; }

/* BARRE de filtres (onglets catégorie) */
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .annuaire-filters{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .annuaire-filters--empty{ display:none; }
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .ann-tab{
  display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-2);
  font-family:var(--police-titres); font-weight:600; font-size:.8rem; line-height:1.1; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .ann-tab:hover{
  border-color:color-mix(in srgb, var(--couleur-principale) 40%, var(--line)); color:var(--couleur-principale);
}
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .ann-tab.is-active{
  background:var(--couleur-principale); border-color:var(--couleur-principale); color:rgba(255,255,255,1);
}
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .ann-tab:focus-visible{
  outline:2px solid var(--couleur-principale); outline-offset:2px;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .ann-tab__count{
  display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px;
  border-radius:999px; font-size:.7rem; font-weight:700; background:var(--surface-2); color:var(--ink-3);
}
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .ann-tab.is-active .ann-tab__count{
  background:color-mix(in srgb, var(--couleur-dark) 55%, transparent); color:rgba(255,255,255,1);
}

/* GRILLE de cartes (forcée : le natif peut imposer block/flex sur .directoryEntries) */
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .directoryEntries{
  display:grid !important; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:20px;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .is-hidden{ display:none !important; }

/* CARTE */
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .ann-card{
  position:relative; display:flex; align-items:flex-start; gap:16px; padding:20px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--card-radius); box-shadow:var(--shadow-sm);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .ann-card:hover{
  transform:translateY(-3px); box-shadow:var(--shadow-md);
  border-color:color-mix(in srgb, var(--couleur-principale) 35%, var(--line));
}
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .ann-card:focus-within{
  border-color:var(--couleur-principale); box-shadow:0 0 0 3px color-mix(in srgb, var(--couleur-principale) 25%, transparent);
}
/* avatar : logo (img) OU icône fallback générique (jamais vide, server-side, zéro flash) */
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .ann-card__ava{
  width:56px; height:56px; flex-shrink:0; border-radius:50%; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--couleur-dark);                     /* pastille (visible derrière l'icône fallback) */
}
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .ann-card__ava img{ width:100%; height:100%; object-fit:cover; display:block; }
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .ann-card__ava-ic{ font-size:26px; line-height:1; color:rgba(255,255,255,1); }
/* logo présent → pas de pastille + icône fallback masquée (:has au seul niveau) */
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .ann-card__ava:has(img){ background:transparent; }
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .ann-card__ava:has(img) .ann-card__ava-ic{ display:none; }
/* corps */
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .ann-card__body{ display:flex; flex-direction:column; gap:8px; min-width:0; }
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .ann-card__cats{ display:flex; flex-wrap:wrap; gap:6px; }
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .ann-card__cat{
  display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px;
  font-family:var(--police-titres); font-weight:600; font-size:.72rem; line-height:1.25;
  background:var(--principale-50); color:var(--couleur-principale);
}
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .ann-card__name{
  margin:0; font-family:var(--police-titres); font-weight:700; font-size:1.05rem; line-height:1.25; color:var(--ink);
}
/* coordonnées (adresse / tél) — petit, discret, pictos alignés ; spans conditionnels (pas de picto orphelin) */
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .ann-card__meta{ display:flex; flex-direction:column; gap:4px; margin-top:4px; }
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .ann-card__addr,
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .ann-card__tel{
  display:flex; align-items:flex-start; gap:6px; font-size:.8rem; line-height:1.35; color:var(--ink-3);
}
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .ann-card__addr i,
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .ann-card__tel i{
  font-size:.95rem; line-height:1.35; flex-shrink:0; color:var(--ink-4);
}
/* lien étiré : couvre toute la carte → cliquable ; focus géré par .ann-card:focus-within (anneau RGAA) */
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .ann-card__stretch{ position:absolute; inset:0; z-index:1; }
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .ann-card__stretch:focus-visible{ outline:none; }
/* message serveur "aucune entrée" neutralisé QUAND il y a des cartes (notre filtre = show/hide,
   les cartes restent dans le DOM → pas de message résiduel ; si 0 entrée réelle, le scope :has
   ne matche pas → le message natif s'affiche normalement). */
body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .directoryNoEntry{ display:none; }

/* responsive : 1 colonne en mobile */
@media (max-width:560px){
  body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .directoryEntries{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .ann-card,
  body:not(:has(#contenu-principal #hero)) .elementDirectory:has(.ann-card.wc-annuaire-entry) .ann-card:hover{ transition:none; transform:none; }
}

/* === CANTINE summary_44 (.menu-cantine) — cartes menu (photo + date + tags + PDF) ==========
   Port du REF pages.css (l.9425+) → remap tokens colis, scope page-contenu + .menu-cantine.
   Template + lightbox (main.js menu-lightbox) DÉJÀ faits. Rouge PDF #ef4444 conservé (sémantique). */
/* barre native (vide) masquée */
body:not(:has(#contenu-principal #hero)) .menu-cantine .directoryListFilters{ display:none !important; }
/* grille de cartes */
body:not(:has(#contenu-principal #hero)) .elementDirectory.menu-cantine:not(.organigramme) .directoryEntries{
  display:grid !important; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)) !important; gap:1.25rem !important; padding:0 !important;
}
/* carte */
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card{
  display:flex !important; flex-direction:column !important; background:var(--surface) !important;
  border-radius:var(--card-radius) !important; overflow:hidden !important; box-shadow:var(--shadow-sm) !important;
  transition:box-shadow .28s ease, transform .28s ease !important; margin:0 !important; border:none !important;
}
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card:hover{ box-shadow:var(--shadow-lg) !important; transform:translateY(-5px) !important; }
/* hero photo — hauteur PLAFONNÉE (aperçu compact ; clic → lightbox grand format) */
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__hero{
  position:relative !important; height:190px !important; aspect-ratio:auto !important; overflow:hidden !important;
  background:var(--surface-2) !important; flex-shrink:0 !important;   /* fond neutre = bandes propres autour du scan (object-fit:contain) */
}
/* FALLBACK sans image (field_426 vide → pas de .menu-card__photo) : dégradé colis + icône repas (plus de grand vide) */
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__hero:not(:has(.menu-card__photo)){
  background:linear-gradient(135deg, var(--couleur-principale) 0%, var(--couleur-dark) 100%) !important;
}
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__hero:not(:has(.menu-card__photo))::before{
  content:'' !important; position:absolute !important; inset:0 !important; z-index:0 !important; pointer-events:none !important; opacity:.9 !important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3v5a2 2 0 0 0 2 2v11'/%3E%3Cpath d='M8 3v5a2 2 0 0 1 -2 2'/%3E%3Cpath d='M6 3v5'/%3E%3Cpath d='M18 3c-1.657 0 -3 1.79 -3 4s1.343 4 3 4'/%3E%3Cpath d='M18 3v18'/%3E%3C/svg%3E") center / 54px no-repeat !important;
}
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__photo{ position:absolute !important; inset:0 !important; cursor:pointer !important; }
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__photo img{
  width:100% !important; height:100% !important; object-fit:contain !important; object-position:center !important; display:block !important;
  border-radius:0 !important; border:none !important; box-shadow:none !important; max-width:none !important;
  transition:transform .55s cubic-bezier(.25,.46,.45,.94) !important;
}
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card:hover .menu-card__photo img{ transform:scale(1.07) !important; }
/* scrim RETIRÉ : le titre est désormais SOUS la photo → ne pas assombrir l'aperçu du menu */
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__hero::after{ display:none !important; }
/* badge date (field_425) */
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__date-badge{
  position:absolute !important; top:.875rem !important; left:.875rem !important; z-index:3 !important;
  background:var(--surface) !important; color:var(--couleur-principale) !important; border-radius:8px !important;
  padding:.28rem .7rem !important; font-size:.65rem !important; font-weight:800 !important; text-transform:uppercase !important;
  letter-spacing:.07em !important; box-shadow:0 2px 10px rgba(0,0,0,.22) !important; line-height:1.4 !important;
}
/* loupe (apparaît au hover) */
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__zoom{
  position:absolute !important; bottom:.875rem !important; right:.875rem !important; z-index:3 !important; width:38px !important; height:38px !important;
  background:rgba(255,255,255,.18) !important; -webkit-backdrop-filter:blur(8px) !important; backdrop-filter:blur(8px) !important;
  border:1px solid rgba(255,255,255,.35) !important; border-radius:50% !important; display:flex !important; align-items:center !important; justify-content:center !important;
  opacity:0 !important; transform:scale(.8) !important; transition:opacity .22s ease, transform .22s ease !important; pointer-events:none !important;
}
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__photo:hover .menu-card__zoom,
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__photo:focus-visible .menu-card__zoom{ opacity:1 !important; transform:scale(1) !important; }
/* overlay titre + tags */
/* overlay titre + tags : SOUS la photo (dans le flux), lisible sur fond carte */
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__overlay{
  position:static !important; padding:.875rem 1.125rem .25rem !important;
  display:flex !important; flex-direction:column !important; gap:.4rem !important;
}
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__title{
  font-size:1rem !important; font-weight:700 !important; color:var(--ink) !important; margin:0 !important; line-height:1.3 !important;
  display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; overflow:hidden !important;   /* cap 2 lignes */
}
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__tags{ display:flex !important; flex-wrap:wrap !important; gap:.3rem !important; }
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__tag{
  display:inline-flex !important; align-items:center !important; padding:.14rem .6rem !important; background:var(--principale-50) !important;
  border:1px solid transparent !important; border-radius:100px !important;
  font-size:.6rem !important; font-weight:700 !important; letter-spacing:.05em !important; text-transform:uppercase !important; color:var(--couleur-principale) !important;
  text-decoration:none !important; transition:background .15s, color .15s !important;
}
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__tag:hover{
  background:var(--couleur-principale) !important; color:rgba(255,255,255,1) !important;
}
/* description */
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__desc{
  font-size:.82rem !important; color:var(--ink-2) !important; line-height:1.55 !important; margin:0 !important; padding:.75rem 1.125rem !important; border-bottom:1px solid var(--line) !important;
  display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; overflow:hidden !important;   /* cap 2 lignes (compact) */
}
/* PDF (field_427) — rouge sémantique conservé */
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__pdf{
  display:flex !important; align-items:center !important; gap:.875rem !important; padding:.875rem 1.125rem !important; background:var(--surface-2) !important;
  border-top:1px solid var(--line) !important; margin-top:auto !important; cursor:pointer !important; transition:background .18s !important; text-decoration:none !important;
}
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__pdf:hover{ background:var(--principale-50) !important; }
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__pdf-icon{ flex-shrink:0 !important; }
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__pdf-info{ display:flex !important; flex-direction:column !important; gap:.1rem !important; flex:1 !important; min-width:0 !important; }
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__pdf-label{ font-size:.6rem !important; font-weight:800 !important; text-transform:uppercase !important; letter-spacing:.08em !important; color:#ef4444 !important; }
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__pdf a,
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__pdf-info a{
  font-size:.82rem !important; font-weight:600 !important; color:var(--couleur-principale) !important; text-decoration:none !important;
  overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important;
}
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__pdf a:hover,
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__pdf-info a:hover{ color:var(--couleur-secondaire) !important; }
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__pdf-arrow{ flex-shrink:0 !important; color:var(--ink-3) !important; transition:color .15s, transform .15s !important; }
body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__pdf:hover .menu-card__pdf-arrow{ color:var(--couleur-secondaire) !important; transform:translateY(2px) !important; }
/* lightbox (créée par main.js, ajoutée au body — uniquement sur page cantine) */
body:not(:has(#contenu-principal #hero)) .menu-lightbox{
  position:fixed !important; inset:0 !important; z-index:9999 !important; background:rgba(8,14,30,.94) !important;
  display:flex !important; align-items:center !important; justify-content:center !important; padding:1.5rem !important;
  opacity:0 !important; pointer-events:none !important; transition:opacity .25s ease !important;
}
body:not(:has(#contenu-principal #hero)) .menu-lightbox--active{ opacity:1 !important; pointer-events:auto !important; }
body:not(:has(#contenu-principal #hero)) .menu-lightbox__figure{ max-width:min(90vw,960px) !important; max-height:88vh !important; display:flex !important; align-items:center !important; justify-content:center !important; }
body:not(:has(#contenu-principal #hero)) .menu-lightbox__img{ max-width:100% !important; max-height:88vh !important; object-fit:contain !important; border-radius:10px !important; box-shadow:0 24px 72px rgba(0,0,0,.65) !important; display:block !important; }
body:not(:has(#contenu-principal #hero)) .menu-lightbox__close{
  position:fixed !important; top:1.25rem !important; right:1.25rem !important; width:44px !important; height:44px !important;
  background:rgba(255,255,255,.14) !important; -webkit-backdrop-filter:blur(8px) !important; backdrop-filter:blur(8px) !important; border:1px solid rgba(255,255,255,.24) !important;
  border-radius:50% !important; color:rgba(255,255,255,1) !important; font-size:1.4rem !important; line-height:1 !important; cursor:pointer !important;
  display:flex !important; align-items:center !important; justify-content:center !important; transition:background .18s !important;
}
body:not(:has(#contenu-principal #hero)) .menu-lightbox__close:hover{ background:rgba(255,255,255,.28) !important; }
body:not(:has(#contenu-principal #hero)) .menu-lightbox__close:focus-visible{ outline:3px solid var(--couleur-secondaire) !important; outline-offset:2px !important; }
/* responsive */
@media (max-width:640px){
  body:not(:has(#contenu-principal #hero)) .elementDirectory.menu-cantine:not(.organigramme) .directoryEntries{ grid-template-columns:1fr !important; gap:1rem !important; }
  body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__title{ font-size:.95rem !important; }
}
@media (max-width:380px){
  body:not(:has(#contenu-principal #hero)) .elementDirectory.menu-cantine:not(.organigramme) .directoryEntries{ grid-template-columns:1fr !important; }
}
@media (prefers-reduced-motion:reduce){
  body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card,
  body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__photo img,
  body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__zoom,
  body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__pdf-arrow,
  body:not(:has(#contenu-principal #hero)) .menu-lightbox{ transition:none !important; }
  body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card:hover,
  body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card:hover .menu-card__photo img{ transform:none !important; }
  body:not(:has(#contenu-principal #hero)) .menu-cantine .menu-card__photo:hover .menu-card__zoom{ opacity:1 !important; transform:none !important; }
}

/* BARRE tabs générée (la barre native porte borderTop/borderBottom → neutralisés) */
.wc-publications .directoryListFilters{
  display:flex; gap:6px; flex-wrap:wrap; list-style:none; border:none !important; margin:0 0 16px; padding:0;
}
.wc-pub-tab{ cursor:pointer; font-family:var(--police-titres); font-weight:600; font-size:13px;
  color:var(--principale-700); padding:6px 12px; border-radius:8px; transition:color .2s, background .2s; }
.wc-pub-tab:hover{ color:var(--couleur-principale); }
.wc-pub-tab.active{ background:#fff; color:var(--couleur-principale); font-weight:700; box-shadow:var(--shadow-sm); }
/* responsive : 2 col ≤1100px, 1 col ≤700px (cf. médias) */

/* ---- Bloc 2 colonnes : Publications | Suivez-nous ---- */
.pub-social{ display:grid; grid-template-columns:1.62fr 1fr; gap:46px; align-items:start; }
/* kiosque pleine largeur quand un seul sous-bloc reste (colis : publications seul OU social seul) */
.pub-social--single{ grid-template-columns:1fr; }
.pub-social--single .social-block{ position:static; }
/* mode single : la grille publications (figée repeat(3,1fr) demi-largeur l.566) s'étale en
   cartes compactes sur toute la largeur (auto-fill ~185px) → plus de colonne vide à droite.
   Scope .pub-social--single → le cas 2 colonnes garde repeat(3,1fr) intact. */
.pub-social--single .wc-publications .directoryEntries{
  grid-template-columns:repeat(auto-fill, minmax(185px, 1fr));
}
.pub-social .pub-grid{ grid-template-columns:repeat(2,1fr); }
.pub-social .tabs{ margin:24px 0 28px; }
.social-block{ position:sticky; top:100px; }
.social-block .sec-head{ margin-bottom:24px; }
.social-block .social-row{ justify-content:flex-start; gap:12px; margin-bottom:24px; }
.social-block .social-row a{ width:46px; height:46px; border-radius:12px; }
.social-block .social-row a i{ font-size:22px; }
.social-stack{ display:flex; flex-direction:column; gap:18px; }

/* ============================================================== GALERIE */
/* Grille ADAPTATIVE : auto-fill + minmax garde une taille d'item constante ; aspect-ratio fige
   le format → nombres impairs = dernière ligne alignée à gauche, sans trou disgracieux. */
.galerie-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.galerie-item{ position:relative; border-radius:var(--card-radius); overflow:hidden; aspect-ratio:4/3; background:var(--principale-50); box-shadow:var(--shadow-sm); }
.galerie-item .ph,.galerie-item .ph-img,.galerie-item img{ width:100%; height:100%; object-fit:cover; }
.galerie-overlay{ position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(to top,rgba(10,31,68,.55),transparent 60%); opacity:0; transition:opacity .3s; }
.galerie-item:hover .galerie-overlay{ opacity:1; }
.galerie-overlay i{ font-size:30px; color:#fff; }

/* --- Galerie NATIVE Saytup (élément Galerie mode grille, element_4024, box_class wc-galerie) ---------
   DOM : .elementPicture.wc-galerie > div[id^="gallery_"] > .inbl > a.LinkFile.fancybox* > img + .txtCenter.
   On rend la grille 4 col façon .galerie-item ; carrousel premium natif neutralisé (main.js, scope wc-galerie),
   FancyBox conservé (clic = lightbox). Scope body.homepage → n'affecte que l'accueil. */
body.homepage .wc-galerie{ margin:0; }
/* conteneur grille = le parent direct des .inbl (#gallery_N) ; on neutralise float/align/inline natifs */
body.homepage .wc-galerie div[id^="gallery_"]{
  display:flex !important; flex-wrap:wrap; gap:16px; float:none !important; text-align:left !important; width:auto !important;
}
/* item = carte (4 col : 3 gaps de 16px ⇒ (100% - 48px)/4) */
body.homepage .wc-galerie .inbl{
  flex:0 0 calc((100% - 48px) / 4); max-width:calc((100% - 48px) / 4);
  position:relative; margin:0 !important; padding:0 !important; float:none !important;
  border-radius:var(--card-radius); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow-sm); background:var(--principale-50);
}
/* image plein cadre (le <a> FancyBox porte le clic) */
body.homepage .wc-galerie .inbl a,
body.homepage .wc-galerie .inbl img{ display:block; width:100%; height:100%; object-fit:cover; }
/* légende native masquée (look photo pleine) */
body.homepage .wc-galerie .inbl .txtCenter{ display:none !important; }
/* overlay loupe au survol (= .galerie-overlay) ; pointer-events:none ⇒ le clic atteint le <a> FancyBox */
body.homepage .wc-galerie .inbl::after{
  content:"\ea8b";                 /* Tabler ti-zoom-in — webfont v3.24.0 (vérifié via CSS CDN) */
  font-family:"tabler-icons-fix"; /* police icônes réellement chargée (cf. CTA hero) */
  font-weight:normal; font-style:normal; font-size:30px; color:#fff;
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(to top,rgba(10,31,68,.55),transparent 60%);
  opacity:0; transition:opacity .3s; pointer-events:none;
}
body.homepage .wc-galerie .inbl:hover::after{ opacity:1; }
/* responsive : 2 col ≤900px, 1 col ≤560px */
@media (max-width:900px){ body.homepage .wc-galerie .inbl{ flex-basis:calc((100% - 16px) / 2); max-width:calc((100% - 16px) / 2); } }
@media (max-width:560px){ body.homepage .wc-galerie .inbl{ flex-basis:100%; max-width:100%; } }

/* ============================================================== ÉQUIPE */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.team-card{ display:flex; align-items:center; gap:18px; background:#fff; border:1px solid var(--line);
  border-radius:var(--card-radius); padding:20px; box-shadow:var(--shadow-sm);
  transition:transform .25s, box-shadow .25s, border-color .25s; }
.team-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--principale-100); }
.team-ava{ flex-shrink:0; width:72px; height:72px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--police-titres); font-weight:700; font-size:22px; color:#fff;
  background:linear-gradient(150deg,var(--couleur-principale),var(--secondaire-600)); }
.team-card.maire .team-ava{ background:linear-gradient(150deg,#1E3A8A,var(--couleur-dark)); box-shadow:0 8px 18px -8px rgba(30,64,175,.5); }
.team-info h3{ font-size:16.5px; }
.team-info .role{ font-size:13px; color:var(--ink-3); font-style:italic; margin-top:2px; }
.team-info .role.maire{ color:var(--couleur-principale); font-weight:600; font-style:normal; }
/* Équipe accueil DYNAMIQUE (.wc-equipe) : photo ronde si dispo (sinon initiales) + carte-lien */
/* pastille AVEC photo : clippe l'image, neutralise le dégradé (sinon anneau bleu) */
.wc-equipe .team-ava:has(img){ position:relative; overflow:hidden; background:none !important; }
.wc-equipe .team-ava img,
.wc-equipe .team-ava-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; border-radius:50%; display:block; }
.wc-equipe a.team-card{ color:inherit; text-decoration:none; }

/* ============================================================== MÉTÉO */
.weather-wrap{ position:relative; border-radius:26px; overflow:hidden; padding:5px;
  background:linear-gradient(120deg,#1E3A8A,#1E40AF 50%,#0891B2); }
.weather-wrap::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 80% 15%,rgba(255,255,255,.22),transparent 42%),
             radial-gradient(circle at 12% 95%,rgba(103,232,249,.25),transparent 46%); }
.weather-card{ position:relative; display:grid; grid-template-columns:1.05fr 1.5fr; gap:4px; }
.weather-now,.weather-fc{ background:rgba(255,255,255,.86); backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%); padding:34px; position:relative; overflow:hidden; }
.weather-now{ border-radius:22px 8px 8px 22px; }
.weather-fc{ border-radius:8px 22px 22px 8px; }
.weather-now .bg-ic{ position:absolute; right:-10px; top:-10px; font-size:150px; color:#F59E0B; opacity:.18; }
.weather-loc{ display:inline-flex; align-items:center; gap:7px; font-family:var(--police-titres); font-weight:600;
  font-size:13px; color:var(--couleur-principale); background:var(--principale-50); padding:6px 12px; border-radius:999px; margin-bottom:18px; }
.weather-temp{ font-family:var(--police-titres); font-weight:700; font-size:64px; color:var(--ink); line-height:1; letter-spacing:-0.03em; }
.weather-temp sup{ font-size:26px; color:var(--ink-3); vertical-align:super; }
.weather-desc{ font-family:var(--police-titres); font-weight:600; font-size:18px; color:var(--ink); margin:12px 0 8px; }
.weather-meta{ font-size:14px; color:var(--ink-3); }
.fc-title{ font-family:var(--police-titres); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); margin-bottom:18px; }
.fc-days{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.fc-day{ text-align:center; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:16px 8px; transition:transform .2s, box-shadow .2s; }
.fc-day:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.fc-day .fd{ font-family:var(--police-titres); font-weight:600; font-size:13px; color:var(--ink-3); margin-bottom:10px; }
.fc-day .wi{ font-size:28px; margin-bottom:10px; display:block; }
.fc-day .ft{ font-family:var(--police-titres); font-weight:700; font-size:16px; color:var(--ink); }
.wi-sun{ color:#F59E0B; } .wi-cloud{ color:#64748B; } .wi-rain{ color:#0891B2; }
/* MÉTÉO DYNAMIQUE (.wc-meteo = box widgetWeather, rendu serveur) — restylage look .weather-card.
   Scope accueil. Masque widgetTitle (doublon h2) + sélecteur ville + lien prévisions. */
body:has(#contenu-principal #hero) .wc-meteo{
  position:relative; border-radius:26px; overflow:hidden; padding:5px;
  background:linear-gradient(120deg, var(--principale-700), var(--couleur-principale) 50%, var(--secondaire-600));
}
body:has(#contenu-principal #hero) .wc-meteo .widgetWeather{
  position:relative; background:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%); border-radius:22px; padding:clamp(1.5rem,4vw,2.125rem);
}
/* éléments masqués */
body:has(#contenu-principal #hero) .wc-meteo .widgetTitle,
body:has(#contenu-principal #hero) .wc-meteo h4,
body:has(#contenu-principal #hero) .wc-meteo form#townselectionweather,
body:has(#contenu-principal #hero) .wc-meteo .boxweatherLink{ display:none !important; }
/* ville (h3) — pastille .weather-loc */
body:has(#contenu-principal #hero) .wc-meteo h3{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--police-titres); font-weight:600; font-size:13px;
  color:var(--couleur-principale); background:var(--principale-50); padding:6px 12px; border-radius:999px; margin:0 0 18px;
}
/* météo actuelle (.item) = icône + grosse température */
body:has(#contenu-principal #hero) .wc-meteo .item{ display:flex; align-items:center; gap:16px; margin:0 0 6px; }
body:has(#contenu-principal #hero) .wc-meteo .boxWeatherPicture{ float:none !important; margin:0 !important; flex-shrink:0; }
body:has(#contenu-principal #hero) .wc-meteo .boxWeatherPicture img{ width:56px; height:56px; object-fit:contain; display:block; }
body:has(#contenu-principal #hero) .wc-meteo .temperature{
  font-family:var(--police-titres); font-weight:700; font-size:clamp(40px,7vw,60px); color:var(--ink); line-height:1; letter-spacing:-0.03em; padding:0 !important;
}
body:has(#contenu-principal #hero) .wc-meteo .item .clear{ display:none; }
/* prévisions (.weatherForecast) = grille façon .fc-days */
body:has(#contenu-principal #hero) .wc-meteo .weatherForecast{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(76px,1fr)); gap:12px; margin-top:18px;
}
body:has(#contenu-principal #hero) .wc-meteo .forecastItem{
  text-align:center; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:14px 8px;
  transition:transform .2s, box-shadow .2s;
}
body:has(#contenu-principal #hero) .wc-meteo .forecastItem:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
body:has(#contenu-principal #hero) .wc-meteo .forecastItemPicture{ float:none !important; margin:0 auto 8px !important; }
body:has(#contenu-principal #hero) .wc-meteo .forecastItemPicture img{ width:32px; height:32px; object-fit:contain; display:block; margin:0 auto; }
body:has(#contenu-principal #hero) .wc-meteo .forecastItemLabel{ font-family:var(--police-titres); font-weight:600; font-size:13px; color:var(--ink-3); margin-bottom:6px; }
body:has(#contenu-principal #hero) .wc-meteo .forecastItemLabel strong{ font-weight:600; }
body:has(#contenu-principal #hero) .wc-meteo .forecastItemTemperature{ font-family:var(--police-titres); line-height:1.2; }
body:has(#contenu-principal #hero) .wc-meteo .minTemperature{ color:var(--ink-3); font-size:13px; }
body:has(#contenu-principal #hero) .wc-meteo .maxTemperature{ color:var(--ink); font-weight:700; font-size:15px; margin-left:5px; }
body:has(#contenu-principal #hero) .wc-meteo .item .clear,
body:has(#contenu-principal #hero) .wc-meteo .forecastItem .clear{ display:none; }
@media (prefers-reduced-motion:reduce){
  body:has(#contenu-principal #hero) .wc-meteo .forecastItem,
  body:has(#contenu-principal #hero) .wc-meteo .forecastItem:hover{ transition:none; transform:none; }
}

/* [CSS .dir-* retiré 2026-06-26 : section accueil « Services & associations » supprimée
   (donnée non fournie par le brief). Classes exclusives à cette section, plus référencées nulle part. ] */

/* ================================================================ CARTE */
.map-card{ position:relative; border-radius:var(--card-radius); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-md); height:400px; background:linear-gradient(120deg,#E8EEF4,#DCE7F0); }
.map-card::before{ content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(30,64,175,.07) 2px,transparent 2px),
    linear-gradient(90deg,rgba(30,64,175,.07) 2px,transparent 2px),
    linear-gradient(rgba(30,64,175,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(30,64,175,.04) 1px,transparent 1px);
  background-size:130px 130px,130px 130px,32px 32px,32px 32px; }
.map-card::after{ content:""; position:absolute; top:36%; left:28%; width:44%; height:9px;
  background:var(--couleur-secondaire); opacity:.32; transform:rotate(-16deg); border-radius:5px;
  box-shadow:0 70px 0 -1px rgba(6,182,212,.18),-40px 100px 0 -2px rgba(30,64,175,.14); }
.map-pin{ position:absolute; top:42%; left:50%; transform:translate(-50%,-100%); z-index:2; }
.map-pin-dot{ width:46px; height:46px; border-radius:50% 50% 50% 0; background:var(--couleur-principale);
  transform:rotate(-45deg); display:grid; place-items:center; box-shadow:0 12px 26px -6px rgba(30,64,175,.6); }
.map-pin-dot i{ transform:rotate(45deg); color:#fff; font-size:23px; }
.map-overlay{ position:absolute; z-index:3; bottom:20px; left:20px; right:20px; display:flex;
  align-items:center; justify-content:space-between; gap:16px; background:rgba(255,255,255,.93);
  backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:16px; padding:16px 20px; box-shadow:var(--shadow-md); }
.map-overlay .mo-a{ display:flex; align-items:center; gap:12px; }
.map-overlay .mo-a i{ font-size:24px; color:var(--couleur-principale); }
.map-overlay strong{ display:block; font-family:var(--police-titres); color:var(--ink); font-size:15px; }
.map-overlay span{ font-size:13.5px; color:var(--ink-3); }
/* Carte Google DYNAMIQUE accueil (.wc-map dans .map-card) — scope ACCUEIL (le CSS .elementMap
   générique est scopé page-contenu, n'agit pas ici). Masque le décor mockup, la vraie carte
   (ou le placeholder Tarteaucitron) remplit la .map-card ; l'overlay adresse reste au-dessus. */
body:has(#contenu-principal #hero) .map-card:has(.wc-map){ height:clamp(280px,38vh,420px); background:var(--surface-2); }
body:has(#contenu-principal #hero) .map-card:has(.wc-map)::before,
body:has(#contenu-principal #hero) .map-card:has(.wc-map)::after{ display:none !important; }
body:has(#contenu-principal #hero) .map-card .wc-map{ position:absolute; inset:0; z-index:1; }
body:has(#contenu-principal #hero) .map-card .wc-map .elementMap,
body:has(#contenu-principal #hero) .map-card .wc-map .map,
body:has(#contenu-principal #hero) .map-card .wc-map .generatedGoogleMap,
body:has(#contenu-principal #hero) .map-card .wc-map iframe{ width:100% !important; height:100% !important; margin:0 !important; border:0 !important; }
/* placeholder Tarteaucitron (avant consentement) : remplit aussi la zone */
body:has(#contenu-principal #hero) .map-card .wc-map [id^="tarteaucitron"],
body:has(#contenu-principal #hero) .map-card .wc-map [class^="tarteaucitron"]{ width:100% !important; max-width:100% !important; }
/* SKIN du placeholder Tarteaucitron (Maps désactivé avant consentement) : dégradé colis (façon carte/météo)
   + bouton « Autoriser » colis. Classes (pas d'inline) ; cascade favorable (tarteaucitron.css AVANT styles.css)
   → pas de !important. Scope .wc-map = accueil only ; ne touche pas la bannière globale ni les autres services.
   On NE touche PAS display:table/width/height du .tac_activate (centrage natif conservé). */
body:has(#contenu-principal #hero) .map-card .wc-map .tac_activate{
  background:linear-gradient(120deg, var(--principale-700), var(--couleur-principale) 50%, var(--secondaire-600));
  color:rgba(255,255,255,1); border-radius:var(--card-radius); overflow:hidden;
}
body:has(#contenu-principal #hero) .map-card .wc-map .tac_activate .tac_float{ padding:18px; }
body:has(#contenu-principal #hero) .map-card .wc-map .tac_activate .tac_float strong{
  color:rgba(255,255,255,1); font-family:var(--police-titres); font-weight:600;
}
/* bouton « Autoriser » → colis (remplace le vert #1B870B) */
body:has(#contenu-principal #hero) .map-card .wc-map .tac_activate .tac_float .tarteaucitronAllow{
  background-color:var(--couleur-principale); color:rgba(255,255,255,1); border:none;
  border-radius:var(--btn-radius); padding:.6rem 1.1rem; cursor:pointer;
  font-family:var(--police-titres); font-weight:600; transition:background-color .18s, transform .18s;
}
body:has(#contenu-principal #hero) .map-card .wc-map .tac_activate .tac_float .tarteaucitronAllow:hover{
  background-color:var(--principale-700); transform:translateY(-1px);
}
@media (prefers-reduced-motion:reduce){
  body:has(#contenu-principal #hero) .map-card .wc-map .tac_activate .tac_float .tarteaucitronAllow{ transition:none; transform:none; }
}

/* === SKIN COLIS GLOBAL Tarteaucitron 1.8.4 (bannière + panneau + flottant + « Personnaliser ») ==========
   Tout sous #tarteaucitronRoot (ajouté au <body>) → GLOBAL (toutes pages). On ne touche QUE couleurs/fonds
   (pas position/display/z-index → fonctionnel intact). Cascade favorable (tarteaucitron.css AVANT styles.css)
   → on ÉGALE/dépasse la spécificité des sélecteurs natifs, SANS !important. #333 → --couleur-dark ;
   « Personnaliser » (vert par défaut) → colis. VERT (accepter) / ROUGE (refuser) + toggles par-service = CONSERVÉS. */
/* ① BANNIÈRE : flottante, centrée, arrondie (on garde position:fixed + z-index natifs) */
#tarteaucitronRoot #tarteaucitronAlertBig{
  background:var(--couleur-dark);
  left:0; right:0; width:auto; max-width:min(1100px, calc(100vw - 24px)); margin-inline:auto;
  bottom:16px; box-sizing:border-box; padding:18px 24px 18px 28px;
  border-radius:var(--card-radius); box-shadow:var(--shadow-lg);
}
/* Contention layout bandeau Tarteaucitron — EXCEPTION assumée (cf MD, sinon « couleurs seulement ») :
   évite le débordement des CTA + remet #tarteaucitronCloseAlert (= bouton « Personnaliser », dernier CTA)
   dans le flux (il était en position:absolute → il flottait/chevauchait). La vraie croix = #clossCross
   (élément distinct, absolute coin haut-droit) → NON touchée. */
#tarteaucitronRoot #tarteaucitronAlertBig{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; justify-content:flex-end;
  padding-right:56px;   /* réserve la place de la croix #clossCross (absolute, coin haut-droit) */
}
#tarteaucitronRoot #tarteaucitronDisclaimerAlert{ flex:1 1 260px; margin:0; }
/* #tarteaucitronCloseAlert = bouton « Personnaliser » (dernier CTA), PAS la croix. Remis dans le flux ;
   aspect CTA cohérent (il n'a pas la classe .tarteaucitronCTAButton des 2 autres). */
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert{
  position:static; margin:0; padding:8px 14px; border-radius:6px; cursor:pointer;
  background:transparent; border:1px solid rgba(255,255,255,.6); color:#fff;
}
/* « Tout accepter » = VERT + « Tout refuser » = ROUGE — re-forcés explicitement (sémantique, par ID) */
#tarteaucitronRoot #tarteaucitronAllAllowed{ background:#008300; }
#tarteaucitronRoot #tarteaucitronAllDenied,
#tarteaucitronRoot #tarteaucitronAllDenied2{ background:#9C1A1A; }
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2{ background:var(--couleur-principale); color:rgba(255,255,255,1); }
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize:hover,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2:hover{ background:var(--principale-700); }
/* ② PANNEAU « Gestion des services » : fonds #333 → colis dark (header / info / détails / ligne principale) */
#tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronTitle button,
#tarteaucitronRoot #tarteaucitron #tarteaucitronInfo,
#tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronDetails,
#tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine,
#tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine:hover{ background:var(--couleur-dark); }
#tarteaucitronRoot #tarteaucitron #tarteaucitronClosePanel{ background:var(--couleur-principale); color:rgba(255,255,255,1); }
/* ③ BOUTON FLOTTANT bas-droite */
/* pastille cookie discrète colis — COMPACTE, posée À GAUCHE de l'icône citron #tarteaucitronIcon
   (bottom:0/right:0, ~50px de large + paddings, ~66px de haut), sur la MÊME LIGNE, centrée verticalement.
   On garde position:fixed + z-index natifs ; on NE touche PAS l'icône. */
#tarteaucitronRoot #tarteaucitronAlertSmall{
  background:var(--couleur-principale); right:62px; bottom:16px;
  border-radius:999px; box-shadow:var(--shadow-md); overflow:hidden;
}
#tarteaucitronRoot #tarteaucitronAlertSmall #tarteaucitronManager{
  color:rgba(255,255,255,1); padding:6px 12px; font-size:.8rem; font-weight:600; line-height:1.2;
}
#tarteaucitronRoot #tarteaucitronAlertSmall #tarteaucitronManager:hover{ background:rgba(255,255,255,.12); }
/* masquer la jauge verte (#tarteaucitronDot) qui traverse la pastille */
#tarteaucitronRoot #tarteaucitronAlertSmall #tarteaucitronManager #tarteaucitronDot{ display:none; }
/* compteur « 2 » harmonisé à la pastille (discret, arrondi, compact) */
#tarteaucitronRoot #tarteaucitronAlertSmall #tarteaucitronCookiesNumber{ background:rgba(255,255,255,.2); border-radius:999px; padding:1px 7px; margin-left:5px; font-size:.75rem; }
/* responsive : sur petit écran, la pastille rétrécit (texte plus petit) pour ne pas déborder à gauche du citron */
@media (max-width:480px){
  #tarteaucitronRoot #tarteaucitronAlertSmall #tarteaucitronManager{ padding:5px 10px; font-size:.72rem; }
  #tarteaucitronRoot #tarteaucitronAlertSmall #tarteaucitronCookiesNumber{ font-size:.7rem; padding:1px 6px; }
}
/* NON touché (sémantique) : .tarteaucitronAllow (vert accepter) · .tarteaucitronDeny (rouge refuser) ·
   bordures lignes .tarteaucitronIsAllowed/.tarteaucitronIsDenied (vert/rouge). */
@media (prefers-reduced-motion:reduce){
  #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize,
  #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2{ transition:none; }
}

/* ============================================================ SUIVEZ-NOUS */
.social-row{ display:flex; gap:14px; justify-content:center; margin-bottom:42px; }
.social-row a{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center; color:#fff; transition:transform .2s, box-shadow .2s; }
.social-row a:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.social-row a i{ font-size:24px; }
.sb-fb{ background:#1877F2; } .sb-x{ background:#0F172A; } .sb-yt{ background:#FF0000; } .sb-li{ background:#0A66C2; } .sb-ig{ background:linear-gradient(45deg,#F58529,#DD2A7B 50%,#8134AF 80%,#515BD4); }
.social-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.soc-card{ background:#fff; border:1px solid var(--line); border-radius:var(--card-radius); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .25s, box-shadow .25s; }
.soc-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.soc-cover{ aspect-ratio:16/8; position:relative; }
.soc-cover .ph{ width:100%; height:100%; }
.soc-head{ display:flex; align-items:center; gap:12px; padding:16px 20px 0; }
.soc-avatar{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; color:#fff; flex-shrink:0; }
.soc-avatar i{ font-size:24px; }
.soc-head h3{ font-size:16px; }
.soc-head span{ font-size:13px; color:var(--ink-3); }
.soc-body{ padding:14px 20px 20px; }
.soc-body p{ font-size:14px; color:var(--ink-3); margin-bottom:14px; }
.soc-preview{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:14px; }
.soc-preview .ph{ aspect-ratio:1; border-radius:8px; }
.soc-preview .ph i{ font-size:20px; }
/* Réseaux accueil DYNAMIQUE (.wc-social) : cartes en 2 col + cover réduite (compact, aligné kiosque).
   Cible le conteneur des cartes (.social-stack, frère de .social-row reconstruit par social-accueil.js)
   → .social-row reste en ligne, non touchée. Override les règles génériques .social-stack/.soc-cover. */
.wc-social .social-stack{ display:grid !important; grid-template-columns:repeat(2,1fr); gap:1rem; }
.wc-social .soc-cover{ aspect-ratio:auto; height:clamp(60px,8vh,84px); }   /* cover réduite (compact) */
/* pictos BLANCS sur pastilles colorées des cartes (cover .ph.sb-XX + avatar .soc-avatar.sb-XX) :
   neutralise .ph{color:principale} + .ph i{opacity:.5} → blanc plein, comme la rangée du haut */
.wc-social .soc-card .ph i,
.wc-social .soc-card .soc-avatar i{ color:rgba(255,255,255,1) !important; opacity:1 !important; }
/* cartes plus compactes : padding interne réduit */
.wc-social .soc-head{ padding:12px 14px 0; }
.wc-social .soc-body{ padding:10px 14px 14px; }
.wc-social .soc-body p{ font-size:13px; margin-bottom:10px; }
@media (max-width:520px){
  .wc-social .social-stack{ grid-template-columns:1fr; }
}

/* ============================================================= NEWSLETTER */
.newsletter{ position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(125deg,var(--principale-700) 0%,var(--couleur-principale) 45%,var(--secondaire-600) 100%); }
.newsletter::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.16),transparent 40%),
             radial-gradient(circle at 10% 100%,rgba(103,232,249,.22),transparent 45%); }
.newsletter .container{ position:relative; }
.nl-inner{ max-width:720px; margin:0 auto; text-align:center; }
.nl-supra{ display:inline-flex; align-items:center; gap:12px; font-family:var(--police-titres); font-weight:600;
  font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.85); margin-bottom:18px; }
.nl-supra::after{ content:""; width:36px; height:2px; background:var(--secondaire-100); border-radius:2px; }
.newsletter h2{ color:#fff; font-size:clamp(28px,3.6vw,42px); margin-bottom:14px; }
.nl-sub{ font-size:18px; color:rgba(255,255,255,.88); margin-bottom:30px; }
.nl-form{ display:flex; gap:12px; max-width:520px; margin:0 auto; }
.nl-form input{ flex:1; border:1.5px solid rgba(255,255,255,.4); background:rgba(255,255,255,.15);
  border-radius:12px; outline:none; color:#fff; font-family:var(--police-corps); font-size:16px; padding:14px 18px; }
.nl-form input::placeholder{ color:rgba(255,255,255,.7); }
.nl-note{ font-size:13px; color:rgba(255,255,255,.7); margin-top:16px; }
/* Newsletter DYNAMIQUE (.wc-newsletter = box widgetNewsletter element_4030) — restylage du form
   natif Saytup pour matcher le look .nl-form (sur fond foncé .newsletter). Scope accueil. */
body:has(#contenu-principal #hero) .wc-newsletter .widgetTitle{ display:none; }   /* évite doublon avec le h2 .nl-inner */
body:has(#contenu-principal #hero) .wc-newsletter form#formulairenewsletters .form-group{
  display:flex; flex-wrap:wrap; gap:12px; max-width:520px; margin:0 auto; align-items:center;
}
/* mention (mx:text comment) : pleine ligne au-dessus, discrète ; rien si vide */
/* mention 'comment' de la box = redondante avec .nl-sub (déjà affiché) → masquée sur l'accueil */
body:has(#contenu-principal #hero) .wc-newsletter form#formulairenewsletters .form-group > div{ display:none !important; }
/* champ email — look .nl-form (translucide blanc, focus colis) */
body:has(#contenu-principal #hero) .wc-newsletter input[name="NewsLettersSubscribeMail"]{
  flex:1; min-width:0; border:1.5px solid rgba(255,255,255,.4); background:rgba(255,255,255,.15);
  border-radius:12px; outline:none; color:rgba(255,255,255,1); font-family:var(--police-corps); font-size:16px; padding:14px 18px;
}
body:has(#contenu-principal #hero) .wc-newsletter input[name="NewsLettersSubscribeMail"]::placeholder{ color:rgba(255,255,255,.7); }
body:has(#contenu-principal #hero) .wc-newsletter input[name="NewsLettersSubscribeMail"]:focus{ border-color:var(--couleur-secondaire); }
/* bouton submit — look .btn.btn-white */
body:has(#contenu-principal #hero) .wc-newsletter form#formulairenewsletters input[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center; padding:13px 22px; border:none;
  border-radius:var(--btn-radius); background:rgba(255,255,255,1); color:var(--couleur-principale);
  font-family:var(--police-titres); font-weight:600; font-size:15px; white-space:nowrap; cursor:pointer;
  box-shadow:var(--shadow-md); transition:transform .2s, box-shadow .2s;
}
body:has(#contenu-principal #hero) .wc-newsletter form#formulairenewsletters input[type="submit"]:hover{
  transform:translateY(-2px); box-shadow:0 16px 30px -10px color-mix(in srgb, var(--couleur-dark) 28%, transparent);
}
/* responsive ≤520px : champ + bouton empilés pleine largeur */
@media (max-width:520px){
  body:has(#contenu-principal #hero) .wc-newsletter form#formulairenewsletters .form-group{ flex-direction:column; }
  body:has(#contenu-principal #hero) .wc-newsletter input[name="NewsLettersSubscribeMail"],
  body:has(#contenu-principal #hero) .wc-newsletter form#formulairenewsletters input[type="submit"]{ width:100%; }
}

/* ================================================================ FOOTER (DARK) */
.site-footer{ background:var(--couleur-dark); color:var(--dark-ink); position:relative; }
.footer-main{ display:grid; grid-template-columns:1.4fr 1.1fr 1.1fr 1fr; gap:40px; padding-block:64px 44px; }
.footer-brand .brand{ margin-bottom:18px; }
.footer-brand .brand-name strong{ color:#fff; }
.footer-brand .brand-name span{ color:rgba(255,255,255,.6); }
.footer-brand .brand-logo{ background:#fff; border-color:transparent; }
.footer-text{ font-size:14px; line-height:1.6; color:rgba(255,255,255,.66); max-width:300px; }
.footer-col h3{ color:#fff; font-size:13px; margin-bottom:16px; font-family:var(--police-titres); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; }
.footer-col p{ font-size:13.5px; color:rgba(255,255,255,.62); margin-top:12px; line-height:1.55; }
.footer-line{ display:flex; align-items:flex-start; gap:9px; font-size:14px; margin-bottom:9px; color:rgba(255,255,255,.78); }
.footer-line i{ font-size:17px; color:var(--secondaire-100); flex-shrink:0; margin-top:2px; }
.hours-list li{ display:flex; justify-content:space-between; gap:14px; font-size:13.5px; padding:5px 0;
  border-bottom:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.74); }
.hours-list li:last-child{ border-bottom:none; }
.hours-list li .d{ font-weight:500; } .hours-list li .h{ font-family:var(--police-titres); color:#fff; font-weight:500; }
.hours-list li.closed .h{ color:rgba(255,255,255,.5); }
.footer-map{ position:relative; height:120px; border-radius:14px; overflow:hidden; margin-top:8px;
  border:1px solid var(--dark-line);
  background:linear-gradient(120deg,#13315f,#0c1f44); }
.footer-map::before{ content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:24px 24px; }
.footer-map .fm-pin{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:18px; height:18px;
  border-radius:50% 50% 50% 0; background:var(--danger); rotate:-45deg; box-shadow:0 6px 14px -4px rgba(220,38,38,.7); }
.footer-map a{ position:absolute; bottom:8px; left:8px; font-size:12px; color:#fff; font-weight:600;
  background:rgba(0,0,0,.4); padding:4px 10px; border-radius:8px; }
.footer-credits{ border-top:1px solid var(--dark-line); padding-block:20px; font-size:13px; color:rgba(255,255,255,.6);
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; justify-content:center; text-align:center; }
.footer-credits a:hover{ color:#fff; }
.footer-credits .weecity{ color:#fff; font-weight:700; font-family:var(--police-titres); }
.footer-bottom{ text-align:center; padding-bottom:24px; font-size:12.5px; color:rgba(255,255,255,.6); /* a11y : ex .45 */ }

/* --- Footer DYNAMIQUE Saytup : boxes widgetText éditables (box_class wc-footer-*) ------------------
   DOM : #footer .footer-main > .footer-brand(littéral) + N× .widgetText.widget[.wc-footer-*]
         > .widgetTitle.h4-like + .widgetContainer(HTML libre saisi par la mairie).
   Pas de dépendance #hero/homepage → footer identique sur TOUTES les pages. */
/* neutralise les paddings/styles natifs Saytup sur les boxes du footer */
#footer .widget,
#footer .widgetText{ margin:0; padding:0; background:none; border:none; box-shadow:none; min-width:0; }
/* chaque box = colonne (titre + contenu empilés) */
#footer .footer-main > .widgetText{ display:flex; flex-direction:column; }
/* titre de colonne = look .footer-col h3 */
#footer .widgetTitle{ color:#fff; font-size:13px; margin:0 0 16px; font-family:var(--police-titres); font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; }
/* contenu libre : texte clair lisible, hérite proprement */
#footer .widgetContainer{ font-size:14px; line-height:1.6; color:rgba(255,255,255,.72); }
#footer .widgetContainer p{ margin:0 0 10px; }
#footer .widgetContainer a{ color:rgba(255,255,255,.82); text-decoration:none; transition:color .2s; }
#footer .widgetContainer a:hover{ color:#fff; }
#footer .widgetContainer i.ti{ color:var(--secondaire-100); }   /* icônes éventuelles (pin/phone/mail) en accent */
/* listes éventuelles (horaires saisis en <ul>) */
#footer .widgetContainer ul{ list-style:none; margin:0; padding:0; }
#footer .widgetContainer li{ padding:5px 0; border-bottom:1px solid rgba(255,255,255,.10); }
#footer .widgetContainer li:last-child{ border-bottom:none; }

/* wc-footer-legal : SORTIE de la grille → barre basse pleine largeur (rôle .footer-credits/.footer-bottom) */
#footer .footer-main > .widgetText.wc-footer-legal{
  grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 14px;
  border-top:1px solid var(--dark-line); margin-top:24px; padding-top:20px;
}
#footer .wc-footer-legal .widgetTitle{ display:none; }   /* pas de titre pour la barre légale */
#footer .wc-footer-legal .widgetContainer{ width:100%; text-align:center; font-size:12.5px; color:rgba(255,255,255,.6); }

/* Menu footer natif : MASQUÉ (on garde le tag pour ne pas casser le bloc footer Saytup) */
#footer .footer-menu{ display:none !important; }

/* --- Colonne CONTACT (wc-footer-contact) : alignement icône Tabler + texte ------------------------
   Contenu = <p><i class="ti ti-map-pin/phone/mail"></i> texte</p> (glyphe géré par les classes Tabler).
   Le dernier <p> (description, sans icône) reste lisible (flex sur un seul enfant texte = inoffensif). */
#footer .wc-footer-contact .widgetContainer p{
  display:flex; align-items:flex-start; gap:10px; margin:0 0 10px;
}
#footer .wc-footer-contact .widgetContainer i.ti{
  color:var(--secondaire-100); font-size:18px; flex:0 0 auto; line-height:1.4; margin-top:1px;
}
/* liens tél/mail : héritent la couleur, soulignés au survol */
#footer .wc-footer-contact a{ color:inherit; text-decoration:none; }
#footer .wc-footer-contact a:hover{ color:#fff; text-decoration:underline; }

/* ============================================================== RESPONSIVE */
@media (max-width:1080px){
  .pocket-grid{ grid-template-columns:1fr; gap:36px; justify-items:center; text-align:center; }
  .pocket-side{ flex-direction:row; width:100%; flex-wrap:wrap; justify-content:center; }
  .pocket-side .pocket-mini{ width:260px; text-align:left; }
  .pocket-main{ text-align:center; }
  .store-row,.pocket-pills{ justify-content:center; }
  .pub-grid{ grid-template-columns:repeat(2,1fr); }
  .pub-social{ grid-template-columns:1fr; gap:48px; }
  .pub-social .pub-grid{ grid-template-columns:repeat(3,1fr); }
  .social-block{ position:static; }
  .social-block .social-row{ justify-content:center; }
  .social-stack{ display:grid; grid-template-columns:repeat(3,1fr); }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-main{ grid-template-columns:1fr 1fr; }
}
/* ⚠️ BREAKPOINT MENU aligné sur Saytup : responsiveManager() (functions.js) bascule en mode mobile à
   window.matchMedia('(max-width: 1099px)') → il déménage #nested dans #page dès 1099px. On aligne donc
   barre/burger/drawer/accordéon sur CE breakpoint (1099px) pour éviter la zone morte 861-1099px (barre
   desktop affichée alors que le menu est déjà déménagé/cassé). Les @media non-menu restent à leur BP propre. */
@media (max-width:1099px){
  .main-nav{ display:none; } .burger{ display:grid; }

  /* Zone blanche en haut : responsiveManager (functions.js) fait $('#page').prepend($('nav')) → il
     déplace les <nav> (dont .fil-ariane) en TÊTE de #page, AU-DESSUS du header → bande visible.
     On neutralise tout <nav> devenu enfant DIRECT de #page (le drawer #nav-principale reste géré
     par ses propres règles position:fixed plus bas ; ici on masque le résidu de fil d'ariane relocalisé). */
  #page > .fil-ariane{ display:none !important; }

  /* ---- DRAWER MOBILE (route B, étape 3a) : #nav-principale = panneau latéral droit ----------------
     FERMÉ = display:none (pas de drawer hors écran qui traîne). OUVERT = ancré à droite.
     ⚠️ functions.js (responsiveManager) pose un style INLINE right négatif (right:-491px) sur la nav →
     d'où le !important + left:auto pour le neutraliser. Méthode unique (right/left), PAS de transform.
     Tout est SOUS @media max-width:860px → desktop intact. */
  #nav-principale{ display:none; }
  body.nav-open #nav-principale{
    display:block !important;
    position:fixed !important;
    top:var(--header-h) !important; bottom:0 !important;
    right:0 !important; left:auto !important;        /* ancré à droite — neutralise l'inline right négatif/left:491px */
    width:min(86vw,360px) !important; height:auto !important;
    margin:0 !important; padding:16px !important;
    background:var(--couleur-dark) !important; z-index:1000 !important;
    overflow-y:auto !important;
    box-shadow:-8px 0 24px rgba(0,0,0,.25) !important;
    transform:none !important; visibility:visible !important;   /* visible, pas de translate résiduel */
  }
  /* #nested en colonne verticale dans le drawer.
     ⚠️ responsiveManager (functions.js) pose des INLINE sur #nested/.firstLevel (width:524px; right:-524px;
     opacity:1) → poussés hors du drawer. On neutralise TOUT en !important à l'état body.nav-open. */
  body.nav-open #nav-principale #nested{
    position:static !important;
    right:auto !important; left:auto !important; top:auto !important;
    width:100% !important;
    opacity:1 !important;
    transform:none !important;
    display:block !important;
    padding:0 !important; margin:0 !important;
  }
  body.nav-open #nav-principale #nested .firstLevel{
    position:static !important;
    right:auto !important; left:auto !important;
    width:100% !important;
    display:block !important;
    margin:0 !important; padding:0 !important;
  }
  /* liens N1 : ligne flex (libellé à gauche + chevron à droite), bordure sur le li */
  body.nav-open #nav-principale #nested .firstLevel > li{
    position:static !important;
    display:flex !important; flex-wrap:wrap !important; align-items:center !important; width:100% !important;
    padding:0 !important; right:auto !important; left:auto !important;
    border-bottom:1px solid rgba(255,255,255,.12) !important;
  }
  body.nav-open #nav-principale #nested .firstLevel > li > a.block{
    flex:1 1 auto !important; width:auto !important; height:auto !important;
    padding:14px 16px !important;
    color:#fff !important;
    border-bottom:none !important;
  }

  /* ---- ÉTAPE 3b : ACCORDÉON sous-menus tactile ----------------------------------------------------
     Chevron injecté par nav-bridge.js (.wc-nav-toggle) ; li.is-open déplie le .secondLevel. */
  body.nav-open #nav-principale #nested .wc-nav-toggle{
    flex:0 0 48px !important; height:48px; display:flex; align-items:center; justify-content:center;
    background:transparent; border:none; color:#fff; cursor:pointer; padding:0;
  }
  body.nav-open #nav-principale #nested .wc-nav-toggle i{ font-size:20px; transition:transform .2s; }
  body.nav-open #nav-principale #nested .firstLevel > li.is-open > .wc-nav-toggle i{ transform:rotate(180deg); }

  /* sous-menus : pleine largeur sous le li, MASQUÉS sauf li.is-open (neutralise aussi le grid/absolute desktop) */
  body.nav-open #nav-principale #nested .firstLevel > li > .secondLevel{
    flex:0 0 100% !important; width:100% !important;
    display:none !important; position:static !important;
    left:auto !important; right:auto !important; top:auto !important; transform:none !important;   /* reset le centrage desktop (translateX) → drawer non décalé */
    min-width:0 !important; max-width:none !important;
    grid-template-columns:none !important; gap:0 !important;
    margin:0 !important; padding:0 0 8px !important;
    background:rgba(255,255,255,.04) !important; box-shadow:none !important; border-radius:0 !important;
  }
  body.nav-open #nav-principale #nested .firstLevel > li.is-open > .secondLevel{ display:block !important; }
  /* pas d'image ni de flèche dans le drawer */
  body.nav-open #nav-principale #nested .secondLevel .menuImageItem,
  body.nav-open #nav-principale #nested .secondLevel .arrowTop{ display:none !important; }
  /* li.backLevel = bouton "retour" injecté par responsiveManager (drawer natif à étages, NON utilisé →
     on a notre accordéon) : c'est lui le "doublon" en tête de sous-menu. On le masque.
     Il est injecté aux TROIS niveaux (mesuré : 4 dans les secondLevel, 10 dans les thirdLevel,
     4 dans les fourthLevel) et duplique à chaque fois le libellé du parent — d'où « Gestion des
     déchets » ou « Urbanisme » affichés deux fois. On masque donc les trois, pas seulement le N2.
     Corollaire : setupAccordion() les exclut aussi de ses collections (li:not(.backLevel)), sinon
     un backLevel masqué resterait un « frère » que l'accordéon chercherait à fermer. */
  body.nav-open #nav-principale #nested .secondLevel > li.backLevel,
  body.nav-open #nav-principale #nested .thirdLevel > li.backLevel,
  body.nav-open #nav-principale #nested .fourthLevel > li.backLevel{ display:none !important; }
  body.nav-open #nav-principale #nested .secondLevel li{ display:block !important; width:100% !important; }

  /* ---- ÉTAPE 3b-bis : ACCORDÉON NIVEAU 2 (megaCol) + hiérarchie 3 niveaux -------------------------
     N2 = li.megaCol : ligne flex (titre + chevron .wc-nav-toggle--2), déplie .thirdLevel quand .is-open. */
  body.nav-open #nav-principale #nested .secondLevel .megaCol{
    display:flex !important; flex-wrap:wrap !important; align-items:center !important;
    width:100% !important; flex:initial !important; grid-column:auto !important; min-width:0 !important;
    margin:0 !important; padding:0 !important; border:none !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
  }
  body.nav-open #nav-principale #nested .secondLevel .megaCol > a.menuCardTitle{
    flex:1 1 auto !important; width:auto !important; display:block !important; margin:0 !important;  /* annule le block pleine largeur → partage la ligne avec le chevron */
    padding:11px 16px 11px 28px !important;          /* N2 : indentation intermédiaire */
    color:#fff !important; font-weight:700 !important; font-size:14px !important;
  }
  /* chevron N2 : collé à droite sur la MÊME ligne que le titre */
  body.nav-open #nav-principale #nested .secondLevel .megaCol > .wc-nav-toggle--2{
    flex:0 0 auto !important; margin-left:auto !important;
  }
  /* chevron N2 : rotation à l'ouverture de la colonne */
  body.nav-open #nav-principale #nested .secondLevel .megaCol.is-open > .wc-nav-toggle i{ transform:rotate(180deg); }
  /* N3 = thirdLevel : pleine largeur SOUS le titre+chevron, masqué sauf megaCol.is-open */
  body.nav-open #nav-principale #nested .secondLevel .megaCol > .thirdLevel{
    flex:1 1 100% !important; width:100% !important; display:none !important; margin:0 !important; padding:0 !important;
  }
  body.nav-open #nav-principale #nested .secondLevel .megaCol.is-open > .thirdLevel{ display:block !important; }
  body.nav-open #nav-principale #nested .secondLevel .thirdLevel > li > a{
    display:block !important; padding:9px 16px 9px 44px !important;   /* N3 : indentation forte */
    color:rgba(255,255,255,.72) !important; font-size:13px !important;
    border:none !important; background:transparent !important;
  }
  body.nav-open #nav-principale #nested .secondLevel .thirdLevel > li > a:hover{ color:#fff !important; }

  /* ---- ACCORDÉON NIVEAU 3 (thirdLevel) + N4 -------------------------------------------------------
     N3 porteur d'un fourthLevel : même traitement que le megaCol en N2 — la ligne devient flex pour
     que le libellé et le chevron .wc-nav-toggle--3 partagent la ligne, et le N4 se déplie dessous.
     Les N3 sans fourthLevel ne sont pas ciblés (:has) : ils restent des liens simples pleine largeur.
     TOUT en !important : responsiveManager() pose des styles INLINE sur ces ul
     (`width:390px; right:-390px`, son drawer natif hors-écran) et un inline bat toute règle qui ne
     l'est pas — c'est déjà la raison du !important sur chaque règle drawer ci-dessus. */
  body.nav-open #nav-principale #nested .secondLevel .thirdLevel > li:has(> .fourthLevel){
    display:flex !important; flex-wrap:wrap !important; align-items:center !important; width:100% !important;
  }
  body.nav-open #nav-principale #nested .secondLevel .thirdLevel > li:has(> .fourthLevel) > a{
    flex:1 1 auto !important; width:auto !important;   /* annule le block pleine largeur → partage la ligne */
  }
  /* chevron N3 : collé à droite sur la MÊME ligne que le libellé */
  body.nav-open #nav-principale #nested .secondLevel .thirdLevel > li > .wc-nav-toggle--3{
    flex:0 0 auto !important; margin-left:auto !important;
  }
  /* chevron N3 : rotation à l'ouverture. Règle PROPRE au niveau : la générique l.1842 ne cible que
     .firstLevel > li.is-open, et le N2 a la sienne (.megaCol.is-open) — le N3 n'était couvert par
     aucune des deux. */
  body.nav-open #nav-principale #nested .secondLevel .thirdLevel > li.is-open > .wc-nav-toggle--3 i{
    transform:rotate(180deg);
  }
  /* N4 = fourthLevel : pleine largeur SOUS le libellé+chevron, masqué sauf li3.is-open.
     width:100% bat le width:390px inline du natif — sans lui, le N4 débordait du panneau par la
     gauche et empiétait sur le contenu de la page derrière. */
  body.nav-open #nav-principale #nested .secondLevel .thirdLevel > li > .fourthLevel{
    flex:1 1 100% !important; width:100% !important; display:none !important;
    margin:0 !important; padding:0 !important;
  }
  body.nav-open #nav-principale #nested .secondLevel .thirdLevel > li.is-open > .fourthLevel{ display:block !important; }
  /* Liens N4 : 4e cran de l'échelle d'indentation (16 → 28 → 44 → 60) et un cran de taille sous le N3
     (13px → 12px). Couleur RECOPIÉE du N3 : rgba(255,255,255,.72) donne 8,73:1 sur le fond du drawer,
     là où l'héritage --ink-2 du desktop ne donnait que 1,41:1 — illisible. Le display:block rend aussi
     toute la largeur cliquable (la cible tactile était réduite à la largeur du texte). */
  body.nav-open #nav-principale #nested .secondLevel .fourthLevel > li:not(.backLevel) > a{
    display:block !important; padding:8px 16px 8px 60px !important;
    color:rgba(255,255,255,.72) !important; font-size:12px !important;
    border:none !important; background:transparent !important;
  }
  body.nav-open #nav-principale #nested .secondLevel .fourthLevel > li:not(.backLevel) > a:hover,
  body.nav-open #nav-principale #nested .secondLevel .fourthLevel > li:not(.backLevel) > a:focus-visible{
    color:#fff !important;
  }

  /* Accès directs (standalone-group) : liste simple en bas, PAS d'accordéon */
  body.nav-open #nav-principale #nested .secondLevel .standalone-group{
    display:block !important; width:100% !important; flex:initial !important; grid-column:auto !important;
    border:none !important; border-top:1px solid rgba(255,255,255,.08) !important;
    margin:0 !important; padding:6px 0 !important; min-width:0 !important;
  }
  body.nav-open #nav-principale #nested .secondLevel .standalone-group a{
    display:block !important; padding:10px 16px 10px 28px !important;
    color:rgba(255,255,255,.82) !important; font-size:14px !important; font-weight:400 !important;
    border:none !important; background:transparent !important;
  }
  body.nav-open #nav-principale #nested .secondLevel .group-label{
    display:block !important; padding:8px 16px 4px 28px !important;
    font-size:12px !important; text-transform:uppercase !important; letter-spacing:.04em !important;
    color:rgba(255,255,255,.55) !important; font-weight:600 !important;
  }

  /* Overlay derrière le drawer (créé par nav-bridge.js) */
  body.nav-open .nav-drawer-overlay{
    display:block; position:fixed; inset:0; top:var(--header-h);
    background:rgba(10,31,68,.4); z-index:999;
  }
}
/* --- Responsive NON-menu (sections accueil) : BP propre 860px, inchangé --- */
@media (max-width:860px){
  :root{ --section-y:60px; }
  .news-grid{ grid-template-columns:1fr; }
  .news-mini{ } 
  .weather-card{ grid-template-columns:1fr; }
  .weather-now{ border-radius:22px 22px 8px 8px; } .weather-fc{ border-radius:8px 8px 22px 22px; }
  .social-grid{ grid-template-columns:1fr; }
  .social-stack{ grid-template-columns:1fr; }
  .sec-head{ flex-direction:column; align-items:flex-start; }
  .sec-head--center{ align-items:center; }
  .wc-publications .directoryEntries{ grid-template-columns:repeat(2,1fr); }   /* kiosque : 3→2 col */
}
@media (max-width:560px){
  :root{ --gutter:18px; }
  .pub-grid{ grid-template-columns:1fr; }
  .wc-publications .directoryEntries{ grid-template-columns:1fr; }   /* kiosque : 1 col */
  .team-grid{ grid-template-columns:1fr; }
  .footer-main{ grid-template-columns:1fr; }
  .fc-days{ grid-template-columns:repeat(3,1fr); }
  .nl-form{ flex-direction:column; }
  .news-mini{ flex:none; } .news-mini .news-media{ flex:none; aspect-ratio:16/9; min-height:0; }  /* mobile : minis non étirées, média 16/9 fixe */
  .store-row{ flex-direction:column; } .store-btn{ width:100%; }
  .alert-inner{ flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  /* HERO cross-fade : le règle .hero-section .diaporamaSlide{transition:…!important} ci-dessus est PLUS
     spécifique que le * → le catch-all ne la neutralise pas. Règle dédiée (même spécificité, plus tardive)
     → bascule immédiate du fondu en reduced-motion. */
  .hero-section .diaporamaSlide{ transition:none !important; }
}


/* =====================================================================
   ACCUEIL — neutralise les éléments réservés aux PAGES CONTENU
   Aucune détection de page côté serveur dans ce template → on cible
   l'accueil par le seul signal fiable : le hero (#hero, modèle 782) qui
   n'existe que dans le <main> de l'accueil. Même esprit que l'ancien
   .page-layout:has(#rightbar) de Jolieville. (:has() — navigateurs 2023+)
   Les pages contenu (sans #hero) ne sont pas affectées.
   ===================================================================== */
body:has(#contenu-principal #hero) #rubricPicture { display: none; }      /* (a) pas de bandeau chapitrage (doublon du hero) */
body:has(#contenu-principal #hero) #rightbar      { display: none; }      /* (b) pas d'arborescence/sidebar */
body:has(#contenu-principal #hero) .page-layout   { display: block; }     /* layout simple colonne */
body:has(#contenu-principal #hero) #contenu-principal { width: 100%; max-width: 100%; }  /* <main> pleine largeur */
body:has(#contenu-principal #hero) .fil-ariane    { display: none; }      /* (c) pas de fil d'ariane "Accueil" */

/* =====================================================================
   CHROME PAGE-INTÉRIEURE (tranche 1) — pages CONTENU uniquement
   Scope « page contenu » = body:not(:has(#contenu-principal #hero)) (l'accueil = hero ;
   ses overrides l.1046-1050 gagnent de toute façon). Largeur calée sur .container (--maxw/--gutter).
   Couleurs 100% via variables (colis). Réf. portée/remappée de css/pages.css.
   (Système .ligneElement/.sizeN_ = framework serveur → non stylé ici, à voir au rendu.) */

/* 1. Grille 2 colonnes (contenu + sidebar 300px), calée dans .container ; 1 col ≤900px.
   Scopée hors accueil → ne contraint PAS .page-layout de l'accueil (sections pleine largeur préservées). */
body:not(:has(#contenu-principal #hero)) .page-layout{
  display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:40px; align-items:start;
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  padding-top:0; padding-bottom:72px;   /* top:0 → la remontée de .fil-ariane se cale sur le bas du bandeau ; bas aéré du footer */
}
body:not(:has(#contenu-principal #hero)) .page-layout:not(:has(#rightbar)){ display:block; }  /* pas de sidebar → 1 colonne */
body:not(:has(#contenu-principal #hero)) #contenu-principal{ min-width:0; }                    /* anti-débordement grille */
@media (max-width:900px){
  body:not(:has(#contenu-principal #hero)) .page-layout{ grid-template-columns:1fr; }          /* sidebar SOUS le contenu */
}

/* 2. Bandeau de rubrique (#rubricPicture) — TOUJOURS présent sur page contenu (~200px) :
   photo si <img>, sinon DÉGRADÉ couleur-colis. Accueil : masqué (override l.1046 + scope). Variables only. */
#rubricPicture{ position:relative; width:100%; overflow:hidden; }       /* full-bleed (enfant direct de #page) */
/* page contenu : bandeau « travaillé » — dégradé profond + 2 lueurs (façon carte/météo) ; contenu calé en bas */
body:not(:has(#contenu-principal #hero)) #rubricPicture{
  display:flex; align-items:flex-end; height:clamp(220px,32vw,320px);   /* + haut → 16:9 moins rogné (partagé avec/sans image) */
  background:
    radial-gradient(120% 150% at 88% 8%, rgba(255,255,255,.18), transparent 55%),                                   /* lueur blanche haut-droite */
    radial-gradient(120% 140% at 6% 105%, color-mix(in srgb, var(--couleur-secondaire) 50%, transparent), transparent 55%),  /* lueur cyan bas-gauche */
    linear-gradient(120deg, var(--principale-700), var(--couleur-principale) 50%, var(--secondaire-600));
}
/* CAS AVEC IMAGE : photo plein cadre (sous le contenu) + voile colis (lisibilité du titre) */
body:not(:has(#contenu-principal #hero)) #rubricPicture img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; z-index:0; }
body:not(:has(#contenu-principal #hero)) #rubricPicture:has(img)::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(120deg, color-mix(in srgb, var(--couleur-dark) 74%, transparent), color-mix(in srgb, var(--couleur-dark) 28%, transparent) 60%, color-mix(in srgb, var(--secondaire-700) 45%, transparent));
}
/* VAGUE de transition vers le contenu blanc (fill = --surface #fff) */
body:not(:has(#contenu-principal #hero)) #rubricPicture::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:32px; z-index:1; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,52 C320,98 1120,8 1440,52 L1440,80 L0,80 Z'/%3E%3C/svg%3E") no-repeat bottom/100% 100%;
}
/* zone texte (injectée par nav-bridge.js) : titre + fil d'ariane, calée container, en bas à gauche */
body:not(:has(#contenu-principal #hero)) #rubricPicture .rubric-inner{
  position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--gutter) 44px;                              /* 44px > vague 32px → texte au-dessus de la vague */
}
body:not(:has(#contenu-principal #hero)) #rubricPicture .rubric-title{
  margin:0 0 8px; font-family:var(--police-titres); font-weight:700;
  font-size:clamp(1.7rem,3.4vw,2.4rem); line-height:1.1; color:rgba(255,255,255,1);
  text-shadow:0 2px 14px rgba(7,15,40,.4);                  /* lisibilité sur dégradé/photo */
}
/* fil d'ariane DANS le bandeau, sous le titre — plat, clair */
body:not(:has(#contenu-principal #hero)) #rubricPicture .fil-ariane{
  display:flex; font-family:var(--police-titres); font-size:13px; color:rgba(255,255,255,.85);
}
body:not(:has(#contenu-principal #hero)) #rubricPicture .fil-ariane .fil-ariane{ display:contents; }
body:not(:has(#contenu-principal #hero)) #rubricPicture .fil-ariane__liste,
body:not(:has(#contenu-principal #hero)) #rubricPicture .fil-ariane ol,
body:not(:has(#contenu-principal #hero)) #rubricPicture .fil-ariane ul{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:0;
}
body:not(:has(#contenu-principal #hero)) #rubricPicture .fil-ariane li::marker{ content:""; }
body:not(:has(#contenu-principal #hero)) #rubricPicture .fil-ariane a{ color:rgba(255,255,255,.82); text-decoration:none; }
body:not(:has(#contenu-principal #hero)) #rubricPicture .fil-ariane a:hover{ color:rgba(255,255,255,1); text-decoration:underline; }
body:not(:has(#contenu-principal #hero)) #rubricPicture .fil-ariane__item:last-child a,
body:not(:has(#contenu-principal #hero)) #rubricPicture .fil-ariane__item:last-child span{ color:rgba(255,255,255,1); font-weight:600; }
body:not(:has(#contenu-principal #hero)) #rubricPicture .fil-ariane__item + .fil-ariane__item::before,
body:not(:has(#contenu-principal #hero)) #rubricPicture li + li::before{ content:"›"; margin:0 6px; color:rgba(255,255,255,.55); }

/* 3. Fil d'ariane — pastille EN LIGNE remontée sur le bas du bandeau (superposition CSS, sans JS/DOM).
   margin-top:-36px = -min-height(36) → le contenu ET la sidebar restent alignés au bas du bandeau.
   ⚠️ Le flex EN LIGNE doit être sur le <ol> .fil-ariane__liste (les <li> y vivent), PAS sur .fil-ariane :
   sinon liste verticale + puces « 1. 2. 3. ». Pastille navy translucide (color-mix colis). */
.contenu-principal > .fil-ariane{
  position:relative; z-index:2;
  margin-top:-36px; min-height:36px;                 /* remontée = hauteur pastille → alignement conservé */
  width:fit-content; max-width:100%;
  display:flex; align-items:center;                  /* centre la liste dans la pastille (le flex EN LIGNE est sur le <ol>) */
  padding:0 16px; border-radius:var(--card-radius);
  background:color-mix(in srgb, var(--couleur-dark) 55%, transparent);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  box-shadow:var(--shadow-sm);
  font-family:var(--police-titres); font-size:13px; color:rgba(255,255,255,.82);
}
.contenu-principal > .fil-ariane .fil-ariane{ display:contents; }       /* le nav imbriqué ne réintroduit pas de bloc */
/* Assurance : le fil d'ariane RAPATRIÉ (par nav-bridge.js) dans #contenu-principal n'est plus #page>.fil-ariane
   (la règle native de masquage ne l'atteint donc plus) → on garantit sa visibilité en page contenu, hors accueil. */
body:not(:has(#contenu-principal #hero)) #contenu-principal > .fil-ariane{ display:flex !important; }
/* LISTE EN LIGNE : tue les puces « 1. 2. 3. » + l'empilement vertical (cible le <ol> nommé OU générique) */
.contenu-principal > .fil-ariane .fil-ariane__liste,
.contenu-principal > .fil-ariane ol,
.contenu-principal > .fil-ariane ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:4px;
}
.contenu-principal > .fil-ariane .fil-ariane__item,
.contenu-principal > .fil-ariane li{ display:inline-flex; align-items:center; }
.contenu-principal > .fil-ariane li::marker{ content:""; }              /* ceinture-bretelles : pas de numéro */
/* liens */
.contenu-principal > .fil-ariane a,
.contenu-principal > .fil-ariane .LinkIn{ color:rgba(255,255,255,.85); text-decoration:none; }
.contenu-principal > .fil-ariane a:hover,
.contenu-principal > .fil-ariane .LinkIn:hover{ color:rgba(255,255,255,.98); text-decoration:underline; }
/* page courante (dernier item) — blanc plein */
.contenu-principal > .fil-ariane .fil-ariane__item:last-child a,
.contenu-principal > .fil-ariane .fil-ariane__item:last-child span,
.contenu-principal > .fil-ariane li:last-child{ color:rgba(255,255,255,.98); font-weight:600; }
/* séparateur « › » entre items (jamais avant le 1er) */
.contenu-principal > .fil-ariane .fil-ariane__item + .fil-ariane__item::before,
.contenu-principal > .fil-ariane li + li::before{ content:"›"; margin:0 6px; color:rgba(255,255,255,.5); }

/* Responsive ≤700px : pastille SOUS le bandeau (plus robuste/lisible), pleine largeur, pas de remontée */
@media (max-width:700px){
  .contenu-principal > .fil-ariane{
    margin-top:0; min-height:0; width:100%;
    padding:10px 14px; border-radius:0; font-size:12px;
  }
}

/* 4. Sidebar (#rightbar / .sidebar-nav) — port FIDÈLE REF + remap colis + boxes widgetText.
   (.sidebar-nav* non scopé : sur l'accueil #rightbar est display:none → pas de rendu.) */
#rightbar.sidebar,
.sidebar{ min-width:0; padding:1.5rem 0; }
/* boxes widgetText (façon footer/accueil) */
#rightbar .widgetText{ background:var(--surface); border:1px solid var(--line); border-radius:var(--card-radius);
  padding:18px 20px; margin-bottom:18px; box-shadow:var(--shadow-sm); }
#rightbar .widgetTitle{ font-family:var(--police-titres); font-weight:700; font-size:15px; color:var(--ink); margin:0 0 12px; }
#rightbar .widgetContainer{ font-size:14px; line-height:1.55; color:var(--ink-2); }

/* Nav rubrique .sidebar-nav — carte surface */
.sidebar-nav{ background:var(--surface); border-radius:var(--card-radius); overflow:hidden; box-shadow:var(--shadow-sm); }
/* visibilité par niveau : seul le chemin actif déplié */
.sidebar-nav__item.defaultmenu{ display:none !important; }
.sidebar-nav__n3{ display:none !important; }
.sidebar-nav__item.active > .sidebar-nav__n3,
.sidebar-nav__item.selected > .sidebar-nav__n3{ display:block !important; }
.sidebar-nav__n4{ display:none !important; }
.sidebar-nav__n3-item.active > .sidebar-nav__n4,
.sidebar-nav__n3-item.selected > .sidebar-nav__n4{ display:block !important; }
/* en-tête rubrique (fond colis) */
.sidebar-nav__header{ background:var(--couleur-principale); padding:1rem 1.25rem; }

/* ── SIDEBAR FILTRÉE sur la thématique courante (.is-current posé par nav-bridge.js) ──────────
   Seule la thématique courante est dépliée ; les autres = header (titre) seul, sobre. */
/* A) liste courante : afficher TOUS ses items N2 (override le .defaultmenu{display:none} ci-dessus) */
#notNested .sidebar-nav__liste.is-current .sidebar-nav__item{ display:block !important; }
/* A) listes des AUTRES thématiques masquées (leurs headers restent visibles et cliquables) */
#notNested .sidebar-nav__liste:not(.is-current){ display:none !important; }
/* B) header COURANT : accentué (bleu plein) — la thématique où l'on se trouve */
.sidebar-nav__header.is-current{ background:var(--couleur-principale); }
/* B) headers AUTRES : sobres (pas de barre bleue pleine) → 1 seule barre bleue dans la sidebar */
.sidebar-nav__header:not(.is-current){ background:transparent; padding:.6rem 1.25rem; border-top:1px solid var(--line); }
.sidebar-nav__header:not(.is-current) .sidebar-nav__titre{ color:var(--couleur-principale) !important; }
.sidebar-nav__header:not(.is-current) .sidebar-nav__titre:hover{ color:var(--couleur-dark) !important; }
.sidebar-nav__titre{ display:block !important; color:rgba(255,255,255,1) !important; font-size:.8rem !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.09em !important; text-decoration:none !important; line-height:1.3 !important; background:none !important; border:none !important; }
.sidebar-nav__titre:hover{ color:rgba(255,255,255,.82) !important; }
/* liste N2 */
.sidebar-nav__liste{ list-style:none !important; padding:.5rem 0 !important; margin:0 !important; }
.sidebar-nav__item{ margin:0 !important; padding:0 !important; list-style:none !important; }
.sidebar-nav__lien{ display:flex !important; align-items:center !important; gap:.5rem !important; padding:.6rem 1.25rem !important;
  color:var(--ink) !important; font-size:.875rem !important; font-weight:400 !important; text-decoration:none !important;
  border-left:3px solid transparent !important; transition:color .15s, background .15s, border-color .15s !important; background:none !important; line-height:1.35 !important; }
.sidebar-nav__lien::before{ content:"" !important; display:block !important; width:4px !important; height:4px !important; border-radius:50% !important;
  background:var(--line) !important; flex-shrink:0 !important; transition:background .15s !important; }
.sidebar-nav__lien:hover{ color:var(--couleur-principale) !important; background:color-mix(in srgb, var(--couleur-principale) 6%, transparent) !important; border-left-color:var(--couleur-principale) !important; }
.sidebar-nav__lien:hover::before{ background:var(--couleur-principale) !important; }
.sidebar-nav__item.active > .sidebar-nav__lien,
.sidebar-nav__item.selected > .sidebar-nav__lien{ color:var(--couleur-principale) !important; font-weight:600 !important;
  border-left-color:var(--couleur-principale) !important; background:color-mix(in srgb, var(--couleur-principale) 7%, transparent) !important; }
.sidebar-nav__item.active > .sidebar-nav__lien::before,
.sidebar-nav__item.selected > .sidebar-nav__lien::before{ background:var(--couleur-principale) !important; }
/* N3 */
.sidebar-nav__n3{ list-style:none !important; padding:0 0 .25rem 1.5rem !important; margin:0 !important; }
.sidebar-nav__n3-item{ list-style:none !important; margin:0 !important; }
.sidebar-nav__n3-lien{ display:block !important; padding:.38rem .75rem !important; color:var(--ink-2) !important; font-size:.82rem !important;
  text-decoration:none !important; border-radius:4px !important; border-left:2px solid transparent !important; transition:color .15s, background .15s, border-color .15s !important; background:none !important; }
.sidebar-nav__n3-lien:hover{ color:var(--couleur-principale) !important; background:color-mix(in srgb, var(--couleur-principale) 6%, transparent) !important; }
.sidebar-nav__n3-item.active > .sidebar-nav__n3-lien,
.sidebar-nav__n3-item.selected > .sidebar-nav__n3-lien{ color:var(--couleur-principale) !important; font-weight:500 !important; border-left-color:var(--couleur-secondaire) !important; }
/* N4 */
.sidebar-nav__n4{ list-style:none !important; padding:0 0 .2rem 1.25rem !important; margin:0 !important; }
.sidebar-nav__n4-item{ list-style:none !important; margin:0 !important; }
.sidebar-nav__n4-lien{ display:block !important; padding:.3rem .625rem !important; color:var(--ink-3) !important; font-size:.78rem !important;
  text-decoration:none !important; border-radius:4px !important; transition:color .15s, background .15s !important; background:none !important; }
.sidebar-nav__n4-lien:hover{ color:var(--couleur-principale) !important; }

/* 5. Commentaires — NON utilisés → masqués globalement */
#entry_commentaires,
.articleActionViewComments,
.articleActionAddComments,
#listComments,
#addComments{ display:none !important; }

/* =====================================================================
   MODULES CONTENU : colonnes + typographie premium (tranche 2a+2b)
   Porté de css/pages.css (l.6015-6081 colonnes, l.6299-6513 typo), remap scope
   body:not(.homepage) → body:not(:has(#contenu-principal #hero)) + tokens --c-* → --couleur-*.
   Ciblage STRICT sur les wrappers de contenu Saytup (.structured_text_semantique_text / .elementText /
   #text.text / .ligneElement) → JAMAIS .contenu-principal p nu → AUCUNE fuite sur l'accueil.
   100% variables colis (couleurs via --couleur-* / color-mix(--couleur-dark) ; rayons --btn-radius). RGAA : focus visible. */

/* ── A) COLONNES (CSS Grid) — scope #text ───────────────────────────── */
body:not(:has(#contenu-principal #hero)) .contenu-principal #text .ligneElement{
  display:grid !important; gap:var(--gutter); align-items:start;
  margin-block:clamp(1.25rem,3vw,2rem);          /* respiration éditoriale entre sections (resserrée) */
}
body:not(:has(#contenu-principal #hero)) .contenu-principal #text .ligneElement:first-child{ margin-top:28px; }   /* aère le 1er bloc du fil d'ariane (sans décaler sidebar/fil) */
body:not(:has(#contenu-principal #hero)) .contenu-principal #text .ligneElement:last-child{ margin-bottom:0; }
body:not(:has(#contenu-principal #hero)) .contenu-principal #text .pageElement{
  float:none !important; width:auto !important; margin-left:0 !important; margin-right:0 !important; min-width:0;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal #text .ligneElement.grid-1 { grid-template-columns:1fr; }
body:not(:has(#contenu-principal #hero)) .contenu-principal #text .ligneElement.grid-2 { grid-template-columns:repeat(2,1fr); }
body:not(:has(#contenu-principal #hero)) .contenu-principal #text .ligneElement.grid-3 { grid-template-columns:repeat(3,1fr); }
body:not(:has(#contenu-principal #hero)) .contenu-principal #text .ligneElement.grid-4 { grid-template-columns:repeat(4,1fr); }
body:not(:has(#contenu-principal #hero)) .contenu-principal #text .ligneElement.grid-5 { grid-template-columns:repeat(5,1fr); }
body:not(:has(#contenu-principal #hero)) .contenu-principal #text .ligneElement.grid-6 { grid-template-columns:repeat(6,1fr); }
body:not(:has(#contenu-principal #hero)) .contenu-principal #text .ligneElement.grid-7 { grid-template-columns:repeat(7,1fr); }
body:not(:has(#contenu-principal #hero)) .contenu-principal #text .ligneElement.grid-8 { grid-template-columns:repeat(8,1fr); }
body:not(:has(#contenu-principal #hero)) .contenu-principal #text .pageElement.size2_3,
body:not(:has(#contenu-principal #hero)) .contenu-principal #text .pageElement.size2_4,
body:not(:has(#contenu-principal #hero)) .contenu-principal #text .pageElement.size2_5{ grid-column:span 2; }
body:not(:has(#contenu-principal #hero)) .contenu-principal #text .pageElement.size3_4,
body:not(:has(#contenu-principal #hero)) .contenu-principal #text .pageElement.size3_5{ grid-column:span 3; }
/* collapse responsive intelligent */
@media (max-width:1023px){
  body:not(:has(#contenu-principal #hero)) .contenu-principal #text .ligneElement.grid-5,
  body:not(:has(#contenu-principal #hero)) .contenu-principal #text .ligneElement.grid-6,
  body:not(:has(#contenu-principal #hero)) .contenu-principal #text .ligneElement.grid-7{ grid-template-columns:repeat(3,1fr); }
  body:not(:has(#contenu-principal #hero)) .contenu-principal #text .ligneElement.grid-8{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:767px){
  /* grid-2 : SEUL palier manquant de l'echelle — il tenait 2 colonnes jusqu'a 480px, soit ~220px
     par colonne a 500px de viewport (marges de #contenu-principal + --gutter deduits) : inexploitable
     pour une carte ou un visuel. On l'aligne sur le palier ou grid-3/grid-4 passent deja a 2 colonnes.
     Regle SEPAREE du groupe grid-3..8 ci-dessous : la valeur est 1fr, pas repeat(2,1fr).
     Prefixe :not(:has(#contenu-principal #hero)) OBLIGATOIRE (2 ID) — recopie a l'identique des
     regles voisines, sinon la generique du dessus (l.2149) gagne et la regle ne s'applique pas. */
  body:not(:has(#contenu-principal #hero)) .contenu-principal #text .ligneElement.grid-2{
    grid-template-columns:1fr;
  }
  body:not(:has(#contenu-principal #hero)) .contenu-principal #text .ligneElement.grid-3,
  body:not(:has(#contenu-principal #hero)) .contenu-principal #text .ligneElement.grid-4,
  body:not(:has(#contenu-principal #hero)) .contenu-principal #text .ligneElement.grid-5,
  body:not(:has(#contenu-principal #hero)) .contenu-principal #text .ligneElement.grid-6,
  body:not(:has(#contenu-principal #hero)) .contenu-principal #text .ligneElement.grid-7,
  body:not(:has(#contenu-principal #hero)) .contenu-principal #text .ligneElement.grid-8{ grid-template-columns:repeat(2,1fr); }
  body:not(:has(#contenu-principal #hero)) .contenu-principal #text .pageElement[class*="size"]{ grid-column:span 1; }
}
@media (max-width:480px){
  body:not(:has(#contenu-principal #hero)) .contenu-principal #text .ligneElement[class*="grid-"]{ grid-template-columns:1fr; }
}

/* ── B) TYPOGRAPHIE PREMIUM (wrappers de contenu) ───────────────────── */
/* alias scope : on cible les 3 wrappers Saytup */
body:not(:has(#contenu-principal #hero)) .contenu-principal .structured_text_semantique_text,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementText > div,
body:not(:has(#contenu-principal #hero)) .contenu-principal #text.text{
  font-size:1.0625rem; line-height:1.75; color:var(--ink-2);
}
/* ── TITRES — port FIDÈLE REF (.elementTitle h1-h6) + remap colis. Animations d'entrée OMISES
   (design statique conservé : filet h1, bandeau h2, point h3, kickers h5/h6) — RGAA-safe. ── */
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementTitle h1,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementTitle h2,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementTitle h3,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementTitle h4,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementTitle h5,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementTitle h6{
  font-family:var(--police-titres); font-weight:700; color:var(--couleur-principale); line-height:1.25; margin:0 0 1rem;
}
/* H1 — titre principal + filet accent colis (statique) */
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementTitle h1{
  font-size:clamp(2rem,4.5vw,3.25rem); letter-spacing:-0.03em; line-height:1.1;
  margin-bottom:0; padding-bottom:1.5rem; position:relative; border:none;
  text-shadow:0 2px 16px color-mix(in srgb, var(--couleur-dark) 10%, transparent);
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementTitle h1::after{
  content:""; position:absolute; bottom:0; left:0; width:72px; height:4px; border-radius:999px;
  background:linear-gradient(90deg, var(--couleur-secondaire), color-mix(in srgb, var(--couleur-secondaire) 60%, transparent), transparent);
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementTitle h1::before{
  content:""; position:absolute; bottom:-1px; left:0; right:0; height:1px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--couleur-dark) 7%, transparent) 0%, transparent 60%);
}
/* H2 — bandeau dégradé accent + barre latérale */
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementTitle h2{
  font-size:clamp(1.375rem,3vw,2.125rem); letter-spacing:-0.02em; line-height:1.18;
  padding:0.6rem 1rem 0.6rem 1.1rem;
  background:linear-gradient(90deg, var(--secondaire-50) 0%, color-mix(in srgb, var(--secondaire-50) 0%, transparent) 75%);
  border-left:4px solid var(--couleur-secondaire); border-radius:0 var(--btn-radius) var(--btn-radius) 0;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--couleur-secondaire) 8%, transparent); margin-bottom:1.5rem;
}
/* H3 — point accent + filet bas */
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementTitle h3{
  font-size:clamp(1.125rem,2.5vw,1.5rem); letter-spacing:-0.01em; line-height:1.25;
  display:flex; align-items:center; gap:0.75rem; margin-bottom:1rem; padding-bottom:0.75rem;
  border-bottom:1.5px solid color-mix(in srgb, var(--couleur-dark) 7%, transparent);
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementTitle h3::before{
  content:""; flex-shrink:0; width:8px; height:8px; border-radius:50%; background:var(--couleur-secondaire);
}
/* H5 / H6 — kickers */
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementTitle h5{
  font-size:.875rem; font-weight:600; color:var(--secondaire-700); text-transform:uppercase; letter-spacing:.09em;
  margin-bottom:.5rem; display:inline-flex; align-items:center; gap:.4em; background:none; border:none;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementTitle h5::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--couleur-secondaire); flex-shrink:0;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementTitle h6{
  font-size:.75rem; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.12em; margin-bottom:.5rem;
}
/* ── Titres DANS un bloc texte (.structured_text/.elementText/#text) — version simple REF ── */
body:not(:has(#contenu-principal #hero)) .contenu-principal .structured_text_semantique_text h2,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementText h2,
body:not(:has(#contenu-principal #hero)) .contenu-principal #text.text h2{
  font-family:var(--police-titres); font-weight:700; color:var(--couleur-principale);
  font-size:clamp(1.2rem,2.5vw,1.6rem); line-height:1.25; letter-spacing:-0.015em;
  margin:2.5rem 0 0.75rem; padding-bottom:0.45rem;
  border-bottom:2px solid color-mix(in srgb, var(--couleur-dark) 8%, transparent);
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .structured_text_semantique_text h3,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementText h3,
body:not(:has(#contenu-principal #hero)) .contenu-principal #text.text h3{
  font-family:var(--police-titres); font-weight:700; color:var(--couleur-principale);
  font-size:clamp(1.05rem,2vw,1.25rem); line-height:1.3; margin:2rem 0 0.5rem;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .structured_text_semantique_text h4,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementText h4,
body:not(:has(#contenu-principal #hero)) .contenu-principal #text.text h4{
  font-family:var(--police-titres); font-weight:700; color:var(--ink); font-size:1rem; margin:1.5rem 0 0.35rem;
}
/* Paragraphes — largeur de lecture confortable (se limite aux blocs larges, neutre en colonne étroite) */
body:not(:has(#contenu-principal #hero)) .contenu-principal .structured_text_semantique_text p,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementText p,
body:not(:has(#contenu-principal #hero)) .contenu-principal #text.text p{ margin:0 0 1.1rem; max-width:72ch; }
/* Listes — puces/numéros couleur colis */
body:not(:has(#contenu-principal #hero)) .contenu-principal .structured_text_semantique_text ul,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementText ul,
body:not(:has(#contenu-principal #hero)) .contenu-principal #text.text ul{ list-style:none; padding-left:0; margin:0 0 1.25rem; }
body:not(:has(#contenu-principal #hero)) .contenu-principal .structured_text_semantique_text ul li,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementText ul li,
body:not(:has(#contenu-principal #hero)) .contenu-principal #text.text ul li{ position:relative; padding-left:1.4rem; margin-bottom:0.45rem; }
body:not(:has(#contenu-principal #hero)) .contenu-principal .structured_text_semantique_text ul li::before,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementText ul li::before,
body:not(:has(#contenu-principal #hero)) .contenu-principal #text.text ul li::before{
  content:""; position:absolute; left:0; top:0.62em; width:6px; height:6px; border-radius:50%; background:var(--couleur-principale);
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .structured_text_semantique_text ol,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementText ol,
body:not(:has(#contenu-principal #hero)) .contenu-principal #text.text ol{ padding-left:1.5rem; margin:0 0 1.25rem; }
body:not(:has(#contenu-principal #hero)) .contenu-principal .structured_text_semantique_text ol li,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementText ol li,
body:not(:has(#contenu-principal #hero)) .contenu-principal #text.text ol li{ margin-bottom:0.45rem; padding-left:0.25rem; }
body:not(:has(#contenu-principal #hero)) .contenu-principal #text.text ol li::marker{ color:var(--couleur-principale); font-weight:700; }
/* Citation — CARTE SURFACE (ressort du fond) + barre colis + guillemet décoratif */
body:not(:has(#contenu-principal #hero)) .contenu-principal .structured_text_semantique_text blockquote,
body:not(:has(#contenu-principal #hero)) .contenu-principal #text.text blockquote{
  position:relative; margin:2.5rem 0; padding:1.6rem 1.8rem 1.6rem 2rem;
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--couleur-principale);
  border-radius:var(--card-radius); box-shadow:var(--shadow-sm);
  font-style:italic; font-size:1.08rem; line-height:1.7; color:var(--ink-2);
}
body:not(:has(#contenu-principal #hero)) .contenu-principal blockquote::before{
  content:"\201C"; position:absolute; top:-0.35em; right:0.5rem; font-family:var(--police-titres);
  font-size:3.5rem; line-height:1; font-style:normal; pointer-events:none;
  color:color-mix(in srgb, var(--couleur-principale) 18%, transparent);
}
body:not(:has(#contenu-principal #hero)) .contenu-principal blockquote p:last-child{ margin-bottom:0; }
/* Tableaux — en-tête colis, zébrage discret, scroll-x si étroit */
body:not(:has(#contenu-principal #hero)) .contenu-principal .structured_text_semantique_text table,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementText table,
body:not(:has(#contenu-principal #hero)) .contenu-principal #text.text table{
  width:100%; border-collapse:collapse; margin:1.75rem 0; font-size:.92rem; display:block; overflow:auto;
  border:1px solid var(--line); border-radius:var(--card-radius); box-shadow:var(--shadow-sm);   /* surface carte */
}
body:not(:has(#contenu-principal #hero)) .contenu-principal #text.text th,
body:not(:has(#contenu-principal #hero)) .contenu-principal .structured_text_semantique_text th{
  background:var(--couleur-principale); color:rgba(255,255,255,1); padding:.7rem 1rem; text-align:left; font-weight:600; white-space:nowrap;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal #text.text td,
body:not(:has(#contenu-principal #hero)) .contenu-principal .structured_text_semantique_text td{
  padding:.6rem 1rem; border-bottom:1px solid color-mix(in srgb, var(--couleur-dark) 9%, transparent); vertical-align:top;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal #text.text tr:nth-child(even) td,
body:not(:has(#contenu-principal #hero)) .contenu-principal .structured_text_semantique_text tr:nth-child(even) td{
  background:color-mix(in srgb, var(--couleur-dark) 3%, transparent);
}
/* Liens inline (.LinkIn / a) */
body:not(:has(#contenu-principal #hero)) .contenu-principal .structured_text_semantique_text a,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementText a,
body:not(:has(#contenu-principal #hero)) .contenu-principal #text.text a{
  color:var(--couleur-principale); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;
  transition:color .18s;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .structured_text_semantique_text a:hover,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementText a:hover,
body:not(:has(#contenu-principal #hero)) .contenu-principal #text.text a:hover{ color:var(--principale-700); }
/* RGAA : focus visible sur les liens de contenu */
body:not(:has(#contenu-principal #hero)) .contenu-principal #text a:focus-visible,
body:not(:has(#contenu-principal #hero)) .contenu-principal .structured_text_semantique_text a:focus-visible{
  outline:2px solid var(--couleur-principale); outline-offset:2px; border-radius:2px;
}
/* Liens externes (.LinkOut) — icône nouvelle fenêtre (currentColor) */
body:not(:has(#contenu-principal #hero)) .contenu-principal #text.text a.LinkOut::after,
body:not(:has(#contenu-principal #hero)) .contenu-principal .structured_text_semantique_text a.LinkOut::after{
  content:""; display:inline-block; width:11px; height:11px; margin-left:4px; vertical-align:baseline;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
}
/* Téléchargements (a.LinkFile) — bouton SURFACE carte + icône fichier (currentColor) + lift au hover */
body:not(:has(#contenu-principal #hero)) .contenu-principal a.LinkFile{
  display:inline-flex; align-items:center; gap:.6rem; margin:.3rem .4rem .3rem 0;
  padding:.6rem 1.1rem .6rem .85rem; border-radius:var(--btn-radius);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-xs);
  color:var(--couleur-principale); font-family:var(--police-titres); font-weight:600; font-size:.9rem;
  text-decoration:none; transition:transform .18s, box-shadow .18s, border-color .18s;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal a.LinkFile::before{
  content:""; flex-shrink:0; width:18px; height:18px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}
body:not(:has(#contenu-principal #hero)) .contenu-principal a.LinkFile:hover{
  border-color:var(--couleur-principale); box-shadow:var(--shadow-sm); transform:translateY(-2px); text-decoration:none;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal a.LinkFile:focus-visible{
  outline:2px solid var(--couleur-principale); outline-offset:2px;
}

/* =====================================================================
   MODULES MÉDIAS (tranche 3b) — port FIDÈLE de scratchpad/REF-pages.css + remap colis.
   Remap : --c-primaire→--couleur-principale · --c-accent→--couleur-secondaire · --c-texte-secondaire→--ink-2 ·
   --r-lg/--r-xl→--card-radius · #162244/rgba(22,34,68,X)→var(--couleur-dark)/color-mix(--couleur-dark X%) ·
   rgba(0,181,184,X)→color-mix(--couleur-secondaire X%) · #fff→--surface/rgba(255,255,255,1) · SVG navy→currentColor.
   Scope body:not(:has(#hero)). Transitions 180-350ms ; reduced-motion coupé (global l.1033 + override transforms ci-dessous). */

/* ── IMAGE (.elementPicture figure) — surface carte + fancybox zoom colis ──────────────── */
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture > .txtLeft,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture > .txtRight,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture > .txtCenter{ display:block; }
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture figure{
  margin:0; border-radius:var(--card-radius); overflow:hidden; position:relative; box-shadow:var(--shadow-sm);
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture > [class] > a[class*="fancybox"]{
  display:block; border-radius:var(--card-radius); overflow:hidden; cursor:zoom-in; text-decoration:none; position:relative;
}
/* overlay au survol */
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture a[class*="fancybox"]::after{
  content:""; position:absolute; inset:0; border-radius:var(--card-radius); pointer-events:none;
  background:color-mix(in srgb, var(--couleur-dark) 0%, transparent); transition:background .25s ease;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture a[class*="fancybox"]:hover::after{
  background:color-mix(in srgb, var(--couleur-dark) 32%, transparent);
}
/* loupe centrée (icône colis via currentColor) */
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture a[class*="fancybox"]::before{
  content:""; position:absolute; top:50%; left:50%; z-index:2; width:48px; height:48px;
  transform:translate(-50%,-50%) scale(.7); opacity:0; border-radius:50%; color:var(--couleur-principale);
  background:rgba(255,255,255,.92) no-repeat center/22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
  box-shadow:var(--shadow-md); transition:opacity .25s ease, transform .25s ease; pointer-events:none;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture a[class*="fancybox"]:hover::before{
  opacity:1; transform:translate(-50%,-50%) scale(1);
}
/* zoom image */
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture a[class*="fancybox"] img{ transition:transform .35s ease; }
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture a[class*="fancybox"]:hover img{ transform:scale(1.035); }
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture figure img{
  width:100%; height:auto; max-height:520px; object-fit:cover; display:block; border-radius:var(--card-radius); margin:0;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture figcaption{
  font-size:.8rem; color:var(--ink-2); text-align:center; padding:.5rem .75rem; font-style:italic;
  background:color-mix(in srgb, var(--couleur-dark) 3%, transparent); border-top:1px solid color-mix(in srgb, var(--couleur-dark) 6%, transparent);
}

/* ── GALERIE PREMIUM (.elementPicture div[id^="gallery_"]) — cohérence colis ────────────── */
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture div[id^="gallery_"]{
  display:grid !important; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important; gap:1rem !important; padding:.25rem 0 !important;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture div[id^="gallery_"] .inbl{
  display:block !important; width:auto !important; position:relative; aspect-ratio:1/1;
  border-radius:var(--card-radius); overflow:hidden; background:var(--couleur-dark);
  box-shadow:var(--shadow-sm); transition:box-shadow .3s ease, transform .3s ease;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture div[id^="gallery_"] .inbl:hover{
  box-shadow:var(--shadow-lg), 0 0 0 2px color-mix(in srgb, var(--couleur-secondaire) 45%, transparent); transform:translateY(-6px);
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture div[id^="gallery_"] .inbl::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:color-mix(in srgb, var(--couleur-dark) 0%, transparent); transition:background .3s ease;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture div[id^="gallery_"] .inbl:hover::after{
  background:color-mix(in srgb, var(--couleur-dark) 30%, transparent);
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture div[id^="gallery_"] .inbl::before{
  content:""; position:absolute; top:50%; left:50%; z-index:3; width:52px; height:52px;
  transform:translate(-50%,-50%) scale(.6); opacity:0; border-radius:50%; color:var(--couleur-principale);
  background:rgba(255,255,255,.96) no-repeat center/24px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
  box-shadow:var(--shadow-md); transition:opacity .28s ease, transform .3s ease; pointer-events:none;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture div[id^="gallery_"] .inbl:hover::before{ opacity:1; transform:translate(-50%,-50%) scale(1); }
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture div[id^="gallery_"] .inbl > a{ display:block; position:absolute; inset:0; text-decoration:none; cursor:zoom-in; }
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture div[id^="gallery_"] img{
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important;
  display:block !important; border-radius:0 !important; margin:0 !important; transition:transform .45s ease;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture div[id^="gallery_"] .inbl:hover img{ transform:scale(1.07); }
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture div[id^="gallery_"] .txtCenter{
  position:absolute; bottom:0; left:0; right:0; z-index:4; font-size:.775rem; font-weight:500; color:rgba(255,255,255,1);
  padding:1.5rem .75rem .65rem; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:linear-gradient(to top, color-mix(in srgb, var(--couleur-dark) 88%, transparent) 0%, color-mix(in srgb, var(--couleur-dark) 0%, transparent) 100%);
  line-height:1.4; transform:translateY(100%); transition:transform .3s ease;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture div[id^="gallery_"] .inbl:hover .txtCenter{ transform:translateY(0); }
/* wrapper premium (initGalleries) */
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture .gallery-premium-wrap{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--card-radius); box-shadow:var(--shadow-sm); margin:1.5rem 0; overflow:hidden;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture .gallery-premium-header{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 1.25rem;
  background:color-mix(in srgb, var(--couleur-dark) 3%, transparent); border-bottom:1px solid color-mix(in srgb, var(--couleur-dark) 7%, transparent);
  border-left:3px solid var(--couleur-secondaire);
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture .gallery-premium-label{
  display:flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:600; color:var(--couleur-principale);
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture .gallery-premium-viewport{ padding:0; }
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture .gallery-premium-wrap div[id^="gallery_"]{ padding:1rem !important; margin:0 !important; }
@media (max-width:600px){
  body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture div[id^="gallery_"]{ grid-template-columns:repeat(2,1fr) !important; gap:.625rem !important; }
}

/* ── VIDÉO (.elementVideoFile) — ratio 16/9 responsive ─────────────────────────────────── */
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementVideoFile{
  position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:var(--card-radius);
  background:var(--couleur-dark); margin:.5rem 0; box-shadow:var(--shadow-sm);
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementVideoFile iframe{
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; border:none !important; border-radius:var(--card-radius);
}

/* ── CARTE (.elementMap / .generatedGoogleMap) — cadre carte ───────────────────────────── */
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementMap{
  margin:.5rem 0; border-radius:var(--card-radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm);
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementMap .map{ width:100% !important; }
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementMap .generatedGoogleMap{
  width:100% !important; height:clamp(280px,42vw,420px) !important; margin:0 !important; border-radius:var(--card-radius);
}

/* ── SÉPARATEUR (.elementSeparator) — filet discret ────────────────────────────────────── */
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementSeparator{
  border:none !important; border-top:1px solid var(--line) !important; margin:clamp(1.5rem,4vw,2.5rem) 0 !important; height:0 !important;
}

/* reduced-motion : coupe les transforms des médias (lift/zoom/loupe) — au-delà du global */
@media (prefers-reduced-motion:reduce){
  body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture div[id^="gallery_"] .inbl:hover,
  body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture div[id^="gallery_"] .inbl:hover img,
  body:not(:has(#contenu-principal #hero)) .contenu-principal .elementPicture a[class*="fancybox"]:hover img{ transform:none !important; }
}

/* =====================================================================
   MODULES MÉDIAS (suite 3c) — DIAPORAMA contenu + FORMULAIRE — port REF + remap colis.
   Scope body:not(:has(#hero)) .contenu-principal. Le hero (.hero-section) est géré à part → aucun conflit. */

/* ── DIAPORAMA de CONTENU (.elementDiaporama hors hero) — carte 16/9 + contrôles frosted ── */
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementDiaporama{
  margin:1.5rem 0; border-radius:var(--card-radius); overflow:hidden; background:var(--couleur-dark);
  box-shadow:var(--shadow-md), 0 0 0 1px color-mix(in srgb, var(--couleur-dark) 7%, transparent);
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementDiaporama .diaporama{
  width:100% !important; max-width:100% !important; height:auto !important; aspect-ratio:16/9 !important;
  border-radius:0 !important; overflow:hidden !important; position:relative !important;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementDiaporama .diaporamaWrapper{ border-radius:0 !important; }
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementDiaporama .diaporamaSlide img{
  width:100% !important; height:100% !important; object-fit:cover !important; max-width:none !important; display:block !important;
}
/* voile bas (lisibilité dots) */
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementDiaporama .diaporama::after{
  content:""; position:absolute; bottom:0; left:0; right:0; height:90px; z-index:5; pointer-events:none;
  background:linear-gradient(to top, color-mix(in srgb, var(--couleur-dark) 60%, transparent) 0%, transparent 100%);
}
/* prev/next frosted glass + chevrons currentColor blanc */
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementDiaporama .diaporamaControlPrev,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementDiaporama .diaporamaControlNext{
  width:44px !important; height:44px !important; border-radius:50% !important;
  background:rgba(255,255,255,.18) !important; -webkit-backdrop-filter:blur(8px) !important; backdrop-filter:blur(8px) !important;
  border:1.5px solid rgba(255,255,255,.28) !important; color:rgba(255,255,255,1) !important;
  top:50% !important; transform:translateY(-50%) !important; display:flex !important; align-items:center !important; justify-content:center !important;
  cursor:pointer !important; z-index:10 !important; transition:background .2s ease, transform .2s ease !important;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementDiaporama .diaporamaControlPrev{ left:.875rem !important; }
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementDiaporama .diaporamaControlNext{ right:.875rem !important; }
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementDiaporama .diaporamaControlPrev:hover,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementDiaporama .diaporamaControlNext:hover{
  background:rgba(255,255,255,.34) !important; transform:translateY(-50%) scale(1.1) !important;
}
/* masque le texte Saytup Précédent/Suivant */
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementDiaporama .diaporamaControlPrev span,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementDiaporama .diaporamaControlNext span{
  font-size:0 !important; display:block !important; width:0 !important; height:0 !important; overflow:hidden !important;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementDiaporama .diaporamaControlPrev::before,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementDiaporama .diaporamaControlNext::before{
  content:""; display:block; width:20px; height:20px; color:rgba(255,255,255,1);
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementDiaporama .diaporamaControlPrev::before{
  background:no-repeat center/20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementDiaporama .diaporamaControlNext::before{
  background:no-repeat center/20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}
/* dots — pilule active */
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementDiaporama .diaporamaDots{
  background:transparent !important; padding:0 !important; bottom:.875rem !important; z-index:10 !important;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementDiaporama .diaporamaDot{
  display:inline-block !important; width:8px !important; height:8px !important; border-radius:50% !important;
  background:rgba(255,255,255,.45) !important; margin:0 4px !important; font-size:0 !important; cursor:pointer !important;
  transition:background .25s ease, width .25s ease, border-radius .25s ease !important; vertical-align:middle !important;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementDiaporama .diaporamaDotActive{
  background:rgba(255,255,255,1) !important; width:24px !important; border-radius:4px !important;
}

/* ── FORMULAIRE (.elementForm) — carte premium, focus colis, RGPD/captcha ── */
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm .pb30{
  background:var(--surface); border:1px solid color-mix(in srgb, var(--couleur-dark) 7%, transparent);
  border-top:3px solid var(--couleur-secondaire); border-radius:var(--card-radius);
  box-shadow:var(--shadow-md); padding:clamp(1.75rem,5vw,2.75rem); margin:2rem 0;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm h2{
  font-size:clamp(1.25rem,2.5vw,1.625rem); color:var(--couleur-principale); margin:0 0 .5rem; border:none; padding:0;
  display:flex; align-items:center; gap:.625rem;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm h2::before{
  content:""; flex-shrink:0; width:1.625rem; height:1.625rem; color:var(--couleur-secondaire);
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm .form_creator_header{
  font-size:.875rem; color:var(--ink-2); margin-bottom:1.5rem; padding-bottom:1.25rem;
  border-bottom:1px solid color-mix(in srgb, var(--couleur-dark) 7%, transparent); line-height:1.6;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm .form_creator_header p{ margin:0; }
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm fieldset{
  border:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:1.25rem 1.5rem;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm fieldset .row:nth-child(n+3){ grid-column:1 / -1; }
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm .row{ margin-bottom:0; }
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm label{
  display:block; font-size:.8125rem; font-weight:600; color:var(--ink); margin-bottom:.45rem; letter-spacing:.015em;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm .obligatory{ color:var(--couleur-secondaire); font-weight:700; }
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm input[type="text"],
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm input[type="email"],
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm input[type="tel"],
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm input[type="number"],
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm textarea,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm select{
  width:100%; padding:.75rem 1rem; border:1.5px solid color-mix(in srgb, var(--couleur-dark) 14%, transparent);
  border-radius:var(--btn-radius); font-family:inherit; font-size:.9375rem; color:var(--ink);
  background:var(--surface-2); transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  box-sizing:border-box; -webkit-appearance:none;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm input[type="text"]:focus,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm input[type="email"]:focus,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm input[type="tel"]:focus,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm input[type="number"]:focus,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm textarea:focus,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm select:focus{
  outline:none; border-color:var(--couleur-secondaire); background:var(--surface);
  box-shadow:0 0 0 3.5px color-mix(in srgb, var(--couleur-secondaire) 18%, transparent);
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm textarea{ resize:vertical; min-height:140px; }
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm input[type="checkbox"]{
  width:1.125rem; height:1.125rem; accent-color:var(--couleur-secondaire); margin-right:.5rem; flex-shrink:0; cursor:pointer; vertical-align:middle;
}
/* RGPD .helpForm — encadré discret */
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm .helpForm{
  font-size:.775rem; color:var(--ink-2); line-height:1.65; margin-top:.875rem; padding:.875rem 1rem .875rem 1.125rem;
  background:color-mix(in srgb, var(--couleur-secondaire) 6%, transparent); border-radius:var(--btn-radius);
  border-left:3px solid var(--couleur-secondaire);
}
/* Captcha */
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm #captcha{ margin-top:1.25rem; }
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm #captcha > label{ margin-bottom:.75rem; }
body:not(:has(#contenu-principal #hero)) .contenu-principal #captcha .borderAll{
  display:inline-flex !important; align-items:center !important; gap:1rem !important; padding:.875rem 1rem !important;
  border:1.5px solid color-mix(in srgb, var(--couleur-dark) 10%, transparent) !important; border-radius:var(--btn-radius) !important;
  background:var(--surface-2) !important; margin-bottom:.75rem !important;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal #captcha .newCaptcha{
  font-size:.8125rem; color:var(--couleur-secondaire); text-decoration-color:color-mix(in srgb, var(--couleur-secondaire) 40%, transparent); text-underline-offset:2px;
}
/* Ligne boutons */
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm .row.pb0{
  display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:.875rem !important;
  margin-top:1.75rem !important; max-width:none !important; width:100% !important; flex-wrap:wrap;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm input[type="submit"],
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm .btn.btn-primary{
  padding:.8rem 2rem; background:linear-gradient(135deg, var(--couleur-principale) 0%, var(--couleur-secondaire) 100%);
  color:rgba(255,255,255,1); border:none; border-radius:999px; font-family:inherit; font-size:.9375rem; font-weight:600;
  cursor:pointer; box-shadow:var(--shadow-md); transition:box-shadow .2s ease, transform .2s ease; -webkit-appearance:none;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm input[type="submit"]:hover,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm .btn.btn-primary:hover{ box-shadow:var(--shadow-lg); transform:translateY(-2px); }
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm input[type="reset"],
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm .btn.btn-default{
  padding:.8rem 1.5rem; background:transparent; color:var(--ink-2);
  border:1.5px solid color-mix(in srgb, var(--couleur-dark) 18%, transparent); border-radius:999px;
  font-family:inherit; font-size:.9375rem; cursor:pointer; transition:border-color .2s ease, color .2s ease, background .2s ease; -webkit-appearance:none;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm input[type="reset"]:hover,
body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm .btn.btn-default:hover{
  border-color:var(--couleur-principale); color:var(--couleur-principale); background:color-mix(in srgb, var(--couleur-dark) 3%, transparent);
}
/* reduced-motion : coupe transforms diaporama + boutons form */
@media (prefers-reduced-motion:reduce){
  body:not(:has(#contenu-principal #hero)) .contenu-principal .elementDiaporama .diaporamaControlPrev:hover,
  body:not(:has(#contenu-principal #hero)) .contenu-principal .elementDiaporama .diaporamaControlNext:hover{ transform:translateY(-50%) !important; }
  body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm input[type="submit"]:hover,
  body:not(:has(#contenu-principal #hero)) .contenu-principal .elementForm .btn.btn-primary:hover{ transform:none !important; }
}

/* === NEWSLETTER — page de finalisation (#newsletter, content_newsletters.html) ===========
   Page de contenu (chrome page-intérieure). Markup brut Bootstrap (.row/.col-xs-12 conservés) :
   #newsletter > h2(title) + subscription_comment + .col-xs-12 > form_data (form Saytup généré).
   Habillage carte + champs/bouton dans le langage .elementForm. Scope page-contenu strict. */
body:not(:has(#contenu-principal #hero)) #newsletter{
  max-width:640px; margin:1.5rem auto; background:var(--surface);
  border:1px solid color-mix(in srgb, var(--couleur-dark) 7%, transparent); border-top:3px solid var(--couleur-secondaire);
  border-radius:var(--card-radius); box-shadow:var(--shadow-md); padding:clamp(1.75rem,5vw,2.75rem); box-sizing:border-box;
}
body:not(:has(#contenu-principal #hero)) #newsletter h2{
  font-family:var(--police-titres); font-size:clamp(1.25rem,2.5vw,1.625rem); font-weight:700; color:var(--couleur-principale);
  margin:0 0 .75rem; border:none; padding:0;
}
/* intro (subscription_comment) — texte direct sous le h2 */
body:not(:has(#contenu-principal #hero)) #newsletter > p,
body:not(:has(#contenu-principal #hero)) #newsletter h2 + *:not(div){
  font-size:.95rem; color:var(--ink-2); line-height:1.65; margin:0 0 1.25rem;
}
/* champs du form_data (input/select/textarea) — look .elementForm */
body:not(:has(#contenu-principal #hero)) #newsletter input[type="text"],
body:not(:has(#contenu-principal #hero)) #newsletter input[type="email"],
body:not(:has(#contenu-principal #hero)) #newsletter input:not([type]),
body:not(:has(#contenu-principal #hero)) #newsletter textarea,
body:not(:has(#contenu-principal #hero)) #newsletter select{
  width:100%; padding:.75rem 1rem; border:1.5px solid color-mix(in srgb, var(--couleur-dark) 14%, transparent);
  border-radius:var(--btn-radius); font-family:inherit; font-size:.9375rem; color:var(--ink); background:var(--surface-2);
  box-sizing:border-box; -webkit-appearance:none; transition:border-color .2s, box-shadow .2s, background .2s; margin:.35rem 0 1rem;
}
body:not(:has(#contenu-principal #hero)) #newsletter input[type="text"]:focus,
body:not(:has(#contenu-principal #hero)) #newsletter input[type="email"]:focus,
body:not(:has(#contenu-principal #hero)) #newsletter input:not([type]):focus,
body:not(:has(#contenu-principal #hero)) #newsletter textarea:focus,
body:not(:has(#contenu-principal #hero)) #newsletter select:focus{
  outline:none; border-color:var(--couleur-secondaire); background:var(--surface);
  box-shadow:0 0 0 3.5px color-mix(in srgb, var(--couleur-secondaire) 18%, transparent);
}
body:not(:has(#contenu-principal #hero)) #newsletter label{ font-weight:600; color:var(--ink); font-size:.875rem; }
/* case de consentement RGPD éventuelle */
body:not(:has(#contenu-principal #hero)) #newsletter input[type="checkbox"]{
  width:1.125rem; height:1.125rem; accent-color:var(--couleur-secondaire); margin-right:.5rem; flex-shrink:0; cursor:pointer; vertical-align:middle;
}
/* bouton (submit) — bouton colis dégradé, comme .elementForm */
body:not(:has(#contenu-principal #hero)) #newsletter input[type="submit"],
body:not(:has(#contenu-principal #hero)) #newsletter button[type="submit"],
body:not(:has(#contenu-principal #hero)) #newsletter .button.primary{
  display:inline-flex; align-items:center; justify-content:center; padding:.8rem 2rem; border:none; border-radius:999px;
  background:linear-gradient(135deg, var(--couleur-principale) 0%, var(--couleur-secondaire) 100%); color:rgba(255,255,255,1);
  font-family:var(--police-titres); font-size:.9375rem; font-weight:600; cursor:pointer; box-shadow:var(--shadow-md);
  -webkit-appearance:none; transition:box-shadow .2s, transform .2s; margin-top:.5rem;
}
body:not(:has(#contenu-principal #hero)) #newsletter input[type="submit"]:hover,
body:not(:has(#contenu-principal #hero)) #newsletter button[type="submit"]:hover,
body:not(:has(#contenu-principal #hero)) #newsletter .button.primary:hover{ box-shadow:var(--shadow-lg); transform:translateY(-2px); }
body:not(:has(#contenu-principal #hero)) #newsletter input[type="submit"]:focus-visible,
body:not(:has(#contenu-principal #hero)) #newsletter button[type="submit"]:focus-visible,
body:not(:has(#contenu-principal #hero)) #newsletter .button.primary:focus-visible{ outline:2px solid var(--couleur-secondaire); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  body:not(:has(#contenu-principal #hero)) #newsletter input[type="submit"]:hover,
  body:not(:has(#contenu-principal #hero)) #newsletter button[type="submit"]:hover,
  body:not(:has(#contenu-principal #hero)) #newsletter .button.primary:hover{ transform:none; }
}

/* =====================================================================
   ANNUAIRE PAGE-CONTENU (tranche 4a) — listing documents (filtres + tri + cartes-document)
   Port REF (REF-pages.css l.8502-8796) + remap colis. Scope body:not(:has(#hero)) .elementDirectory.
   DISTINCT du kiosque accueil (.wc-publications, sur page avec #hero → exclue) → aucun conflit.
   Couvre deliberations/arretes/bulletin/CR-PV/assos/services. 100% variables ; SVG via mask (couleur colis). */

/* ── Filtres (tags) ── */
body:not(:has(#contenu-principal #hero)) .elementDirectory .directoryListFilters{
  display:flex !important; flex-wrap:wrap; gap:.5rem; align-items:center; list-style:none !important;
  border:none !important; padding:0 0 1.25rem !important; margin:0 !important;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory .directoryListFilters li{
  list-style:none !important; padding:0 !important; border:none !important; float:none !important;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory .filter{
  display:inline-flex !important; align-items:center; gap:.4rem; padding:.45rem 1rem !important;
  background:var(--surface); border:1.5px solid color-mix(in srgb, var(--couleur-dark) 15%, transparent) !important;
  border-radius:999px; font-size:.8125rem; font-weight:500; cursor:pointer; color:var(--ink); text-decoration:none;
  transition:background .18s, border-color .18s, color .18s;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory .filter:hover{
  border-color:var(--couleur-secondaire) !important; color:var(--couleur-secondaire);
  background:color-mix(in srgb, var(--couleur-secondaire) 6%, transparent);
}
body:not(:has(#contenu-principal #hero)) .elementDirectory .filter.active{
  background:var(--couleur-principale) !important; border-color:var(--couleur-principale) !important;
  color:rgba(255,255,255,1) !important; font-weight:600; box-shadow:var(--shadow-sm);
}
body:not(:has(#contenu-principal #hero)) .elementDirectory .filterNumber{
  display:inline-flex; align-items:center; justify-content:center; min-width:1.25rem; height:1.25rem; padding:0 .3rem;
  border-radius:999px; font-size:.6875rem; font-weight:700;
  background:color-mix(in srgb, var(--couleur-dark) 9%, transparent); color:var(--ink-2); transition:background .18s, color .18s;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory .filter.active .filterNumber{ background:rgba(255,255,255,.22); color:rgba(255,255,255,1); }

/* ── Barre de tri (injectée par main.js initDirectoryDocuments) ── */
body:not(:has(#contenu-principal #hero)) .doc-sort-bar{ display:flex; align-items:center; gap:.5rem; margin-bottom:1.5rem; flex-wrap:wrap; }
body:not(:has(#contenu-principal #hero)) .doc-sort-label{ font-size:.75rem; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; margin-right:.2rem; }
body:not(:has(#contenu-principal #hero)) .doc-sort-btn{
  display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .9rem; background:var(--surface); color:var(--ink);
  border:1.5px solid color-mix(in srgb, var(--couleur-dark) 15%, transparent); border-radius:999px;
  font-family:inherit; font-size:.78rem; font-weight:500; cursor:pointer; transition:all .18s ease;
}
body:not(:has(#contenu-principal #hero)) .doc-sort-btn:hover{ border-color:var(--couleur-secondaire); color:var(--couleur-secondaire); background:color-mix(in srgb, var(--couleur-secondaire) 6%, transparent); }
body:not(:has(#contenu-principal #hero)) .doc-sort-btn--actif,
body:not(:has(#contenu-principal #hero)) .doc-sort-btn--actif:hover{ background:var(--couleur-principale) !important; color:rgba(255,255,255,1) !important; border-color:var(--couleur-principale) !important; font-weight:600; }

/* ── Liste (colonne) ── */
body:not(:has(#contenu-principal #hero)) .elementDirectory:not(.organigramme) .directoryEntries{ display:flex !important; flex-direction:column; gap:.625rem; }

/* ── Carte-document (horizontale) ── */
body:not(:has(#contenu-principal #hero)) .elementDirectory .directoryEntry{ width:100%; max-width:100%; padding-bottom:0 !important; box-sizing:border-box; }
body:not(:has(#contenu-principal #hero)) .elementDirectory .directoryEntry .borderAll{
  display:flex !important; align-items:stretch; overflow:hidden; background:var(--surface);
  border:1.5px solid var(--line) !important; border-radius:var(--card-radius) !important;
  transition:border-color .2s, box-shadow .18s, transform .15s;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory .directoryEntry .borderAll:hover{
  border-color:var(--couleur-secondaire) !important; box-shadow:0 4px 16px color-mix(in srgb, var(--couleur-secondaire) 12%, transparent); transform:translateY(-1px);
}
/* zone icône (remplace la photo vide) — icône doc en mask coloré colis */
body:not(:has(#contenu-principal #hero)) .elementDirectory .directoryEntryPicture{
  width:72px !important; min-width:72px !important; max-width:72px !important; flex-shrink:0;
  background:linear-gradient(160deg, var(--surface-2) 0%, color-mix(in srgb, var(--couleur-secondaire) 8%, transparent) 100%) !important;
  border-right:1.5px solid var(--line) !important; float:none !important; position:static !important;
  display:flex !important; align-items:center; justify-content:center;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory .directoryEntryPicture::after{
  content:""; display:block; width:28px; height:34px; background:var(--couleur-secondaire);
  -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='17' x2='16' y2='17'/%3E%3Cline x1='8' y1='9' x2='10' y2='9'/%3E%3C/svg%3E");
  mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='17' x2='16' y2='17'/%3E%3Cline x1='8' y1='9' x2='10' y2='9'/%3E%3C/svg%3E");
}
/* === ANNUAIRE — visuel large « document » (effet w200p réf) — OPTION 3 ====================
   Documents (delib/arrêtés/CR-PV/bulletin) repassés en summary_3 (filtres/tri natifs). Pour
   retrouver le visuel large à gauche de la réf, on cible les annuaires document via leur box_class
   back-office = `annuaire-documents` (même mécanique que `wc-publications`). Associations & autres
   annuaires NON impactés (gardent la pastille icône 72px de la 4a). 100% variables colis, no scrim.
   PRÉREQUIS BACK-OFFICE : box_class=annuaire-documents sur les répertoires documents. */
body:not(:has(#contenu-principal #hero)) .elementDirectory.annuaire-documents .directoryEntryPicture{
  width:clamp(140px,26%,200px) !important; min-width:clamp(140px,26%,200px) !important; max-width:200px !important;
  border-right:1px solid var(--line) !important; overflow:hidden;
}
/* visuel présent (field_299/field_323 → img) : image plein cadre, pas d'icône, pas de dégradé */
body:not(:has(#contenu-principal #hero)) .elementDirectory.annuaire-documents .directoryEntryPicture:has(img){
  background:none !important;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.annuaire-documents .directoryEntryPicture:has(img)::after{ content:none !important; }
body:not(:has(#contenu-principal #hero)) .elementDirectory.annuaire-documents .directoryEntryThumbnail,
body:not(:has(#contenu-principal #hero)) .elementDirectory.annuaire-documents .directoryEntryBackground,
body:not(:has(#contenu-principal #hero)) .elementDirectory.annuaire-documents .directoryEntryPicture a.LinkFile{
  display:block !important; width:100% !important; height:100% !important; padding:0 !important;
  background:none !important; border:none !important; border-radius:0 !important; pointer-events:none;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.annuaire-documents .directoryEntryPicture a.LinkFile::before{ content:none !important; }
body:not(:has(#contenu-principal #hero)) .elementDirectory.annuaire-documents .directoryEntryPicture img{
  width:100% !important; height:100% !important; object-fit:cover !important; display:block;
}
/* pas de visuel : fallback dégradé colis + icône doc blanche (pas de scrim) */
body:not(:has(#contenu-principal #hero)) .elementDirectory.annuaire-documents .directoryEntryPicture:not(:has(img)){
  background:linear-gradient(150deg, var(--couleur-principale), var(--couleur-dark)) !important;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory.annuaire-documents .directoryEntryPicture:not(:has(img))::after{
  background:rgba(255,255,255,1) !important;
}

/* bloc droit : grille titre+métas / bouton DL */
body:not(:has(#contenu-principal #hero)) .elementDirectory .directoryEntry .borderAll > div.pt20{
  flex:1; min-width:0; display:grid !important; grid-template-columns:1fr auto; grid-template-rows:auto auto;
  column-gap:1rem; padding:.875rem 1.25rem !important; align-items:center; border:none !important;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory .directoryEntry h3.mt0{
  grid-column:1; grid-row:1; margin:0 !important; padding:0 !important; font-size:.9375rem !important; font-weight:600 !important;
  color:var(--ink) !important; line-height:1.35 !important;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory .directoryEntryMetas{
  grid-column:1; grid-row:2; padding-top:.5rem !important; display:flex !important; align-items:center; flex-wrap:wrap; gap:.35rem; border:none !important;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory .directoryEntryTags{ display:inline-flex !important; align-items:center; gap:.35rem; padding:0 !important; border:none !important; }
body:not(:has(#contenu-principal #hero)) .elementDirectory .directoryEntryTags .fa{ color:var(--couleur-secondaire) !important; font-size:.72rem !important; }
body:not(:has(#contenu-principal #hero)) .elementDirectory .directoryEntryTag{
  display:inline-block !important; padding:.18rem .65rem !important; border-radius:999px !important; font-size:.72rem !important; font-weight:600 !important;
  background:color-mix(in srgb, var(--couleur-secondaire) 8%, transparent) !important;
  border:1px solid color-mix(in srgb, var(--couleur-secondaire) 22%, transparent) !important;
  color:var(--couleur-secondaire) !important; text-decoration:none !important;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory .directoryEntryClient{ display:none !important; }
/* bouton télécharger — plein colis (override le a.LinkFile surface générique de 2b/3a) */
body:not(:has(#contenu-principal #hero)) .elementDirectory .directoryEntryLink{
  grid-column:2; grid-row:1 / 3; display:flex !important; align-items:center; justify-content:center;
  border:none !important; background:none !important; padding:0 !important; text-align:center !important;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory .directoryEntryLink a.LinkFile{
  display:inline-flex !important; align-items:center; gap:.45rem; padding:.6rem 1.1rem !important;
  background:var(--couleur-principale) !important; color:rgba(255,255,255,1) !important; border:none !important;
  border-radius:var(--btn-radius) !important; font-size:.78rem !important; font-weight:600 !important;
  text-decoration:none !important; white-space:nowrap; letter-spacing:.01em; transition:background .18s, box-shadow .18s;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory .directoryEntryLink a.LinkFile::before{
  content:"\2193" !important; width:auto !important; height:auto !important; background:none !important;   /* neutralise l'icône fichier du a.LinkFile générique */
  font-size:.9rem; font-weight:700; line-height:1;
}
body:not(:has(#contenu-principal #hero)) .elementDirectory .directoryEntryLink a.LinkFile:hover{
  background:var(--couleur-secondaire) !important; box-shadow:0 4px 12px color-mix(in srgb, var(--couleur-secondaire) 28%, transparent);
}
body:not(:has(#contenu-principal #hero)) .elementDirectory .directoryEntryLink br{ display:none !important; }

/* responsive ≤600px : carte en colonne */
@media (max-width:600px){
  body:not(:has(#contenu-principal #hero)) .elementDirectory .directoryEntryPicture{ display:none !important; }
  body:not(:has(#contenu-principal #hero)) .elementDirectory .directoryEntry .borderAll > div.pt20{
    grid-template-columns:1fr !important; grid-template-rows:auto auto auto !important; padding:.75rem 1rem !important;
  }
  body:not(:has(#contenu-principal #hero)) .elementDirectory .directoryEntryLink{
    grid-column:1 !important; grid-row:3 !important; justify-content:flex-start !important; padding-top:.625rem !important;
    border-top:1px solid var(--line) !important;
  }
}
/* reduced-motion */
@media (prefers-reduced-motion:reduce){
  body:not(:has(#contenu-principal #hero)) .elementDirectory .directoryEntry .borderAll{ transition:none !important; }
  body:not(:has(#contenu-principal #hero)) .elementDirectory .directoryEntry .borderAll:hover{ transform:none !important; }
}

/* =====================================================================
   AGENDA accueil (.wc-agenda) — piste carrousel maison
   Le widget box rend .wc-agenda .widgetContainer > .blogPostResume.ev-card.
   On en fait la piste flex (home.js ajoute aussi la classe carousel-track,
   ce sélecteur garantit le layout même si la classe n'est pas posée).
   Flèches + dots créés par scripts/home.js. Indépendant de script-custom.js.
   ===================================================================== */
body.homepage .wc-agenda .widgetContainer{ display:flex; gap:20px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory; padding-bottom:6px; scrollbar-width:none; }
body.homepage .wc-agenda .widgetContainer::-webkit-scrollbar{ display:none; }
body.homepage .wc-agenda .widgetContainer > .blogPostResume{ scroll-snap-align:start; flex:0 0 auto; width:340px; }

/* =====================================================================
   AGENDA accueil (.wc-agenda) — COUCHE DE CLIC
   box_class=wc-agenda = même nom que la section → le ::before décoratif
   s'applique aussi à la racine .widget de la box et recouvrait flèches/dots/liens.
   On neutralise le décor (pointer-events:none) et on remonte les interactifs.
   ===================================================================== */
body .wc-agenda::before,
body .wc-agenda::after,
.wc-agenda .wave-top{ pointer-events:none; }   /* décor : ne capte jamais les clics */

.wc-agenda .carousel-nav,
.wc-agenda .cnav-btn,
.wc-agenda .dots,
.wc-agenda .dots .dot,
.wc-agenda .widgetContainer,
.wc-agenda .blogPostResume,
.wc-agenda a.link-more{ position:relative; z-index:2; }   /* interactifs au-dessus du ::before */

/* =====================================================================
   ACTUS accueil (.wc-actus) — box blog en GRILLE ASYMÉTRIQUE (voie A)
   Section claire (.section--creme). Liste plate de .ev-card (template box
   partagé) → 1 featured large (col gauche, 2 lignes) + 2 empilées (col droite).
   Re-skin clair (le .ev-card de base est sombre pour l'agenda).
   Pas de carrousel : home.js ne cible que .wc-agenda.
   ===================================================================== */
body.homepage .wc-actus .widgetContainer{
  display:grid; grid-template-columns:1.5fr 1fr; grid-auto-rows:1fr; gap:22px; align-items:stretch;
}
/* placement asymétrique (3 items) */
body.homepage .wc-actus .widgetContainer > .blogPostResume:first-child{ grid-column:1; grid-row:1 / span 2; }
body.homepage .wc-actus .widgetContainer > .blogPostResume:nth-child(2){ grid-column:2; grid-row:1; }
body.homepage .wc-actus .widgetContainer > .blogPostResume:nth-child(3){ grid-column:2; grid-row:2; }

/* re-skin clair des cartes (override du .ev-card sombre) */
.wc-actus .ev-card{ width:auto; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.wc-actus .ev-card:hover{ box-shadow:var(--shadow-lg); border-color:var(--principale-100); }
.wc-actus .ev-body h3{ color:var(--ink); font-size:16.5px; }       /* minis par défaut */
.wc-actus .ev-body p{ color:var(--ink-3); }
.wc-actus .ev-date{ color:var(--ink-4); }
.wc-actus .ev-tag{ color:var(--couleur-principale); background:var(--principale-50); border-color:transparent; }
.wc-actus .link-more.on-dark{ color:var(--couleur-principale); }   /* lien lisible sur fond clair */

/* featured (1ʳᵉ carte) : titre + média plus grands */
.wc-actus .widgetContainer > .blogPostResume:first-child .ev-body h3{ font-size:24px; }
.wc-actus .widgetContainer > .blogPostResume:first-child .ev-media{ aspect-ratio:auto; min-height:260px; }

/* responsive : 1 colonne sous 860px (cf. .news-grid) */
@media (max-width:860px){
  body.homepage .wc-actus .widgetContainer{ grid-template-columns:1fr; grid-auto-rows:auto; }
  body.homepage .wc-actus .widgetContainer > .blogPostResume:first-child,
  body.homepage .wc-actus .widgetContainer > .blogPostResume:nth-child(2),
  body.homepage .wc-actus .widgetContainer > .blogPostResume:nth-child(3){ grid-column:auto; grid-row:auto; }
}

/* ACTUS — OPTION 2 : carte en flex-colonne, média qui absorbe la hauteur de grille
   (featured remplie par l'image, colonnes alignées). Featured min-height gérée plus haut. */
.wc-actus .ev-card{ display:flex; flex-direction:column; height:100%; }
.wc-actus .ev-card .ev-media{ aspect-ratio:auto; flex:1 1 auto; min-height:0; }
.wc-actus .ev-card .ev-body{ flex:0 0 auto; }
.wc-actus .widgetContainer > .blogPostResume:nth-child(n+2) .ev-media{ aspect-ratio:auto; min-height:120px; }
/* image plein cadre sans déformation */
.wc-actus .ev-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ACTUS — borne la hauteur de la zone cartes (~650px) : featured remplit la colonne,
   les 2 minis se partagent la colonne droite ; l'image absorbe l'espace, contenu clippé. */
body.homepage .wc-actus .widgetContainer{ max-height:650px; }
.wc-actus .ev-card{ min-height:0; overflow:hidden; }
.wc-actus .ev-card .ev-media{ flex:1 1 auto; min-height:0; }

/* ACTUS — minis (cartes 2 & 3) : description tronquée à 2 lignes pour garder le
   "Lire la suite" visible dans la carte bornée (overflow:hidden). Featured inchangée. */
.wc-actus .widgetContainer > .blogPostResume:nth-child(n+2) .ev-body p{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;     overflow: hidden;
    padding: 0;
    margin: 0;
    font-size: 12px;
}
.wc-actus .widgetContainer > .blogPostResume:nth-child(n+2) .ev-body{ overflow:visible; }

/* ── ACTUALITÉS sur fond coloré (.wc-actus--dark) — posé PAR LE COLIS si l'aperçu a l'actu en navy.
   Reprend le fond + titre clair de l'agenda, MAIS garde les CARTES BLANCHES (.wc-actus .ev-card
   inchangées → texte sombre lisible sur les cartes, qui ressortent sur le navy). Placé après les
   règles .wc-actus (spécificité égale → l'emporte par ordre source). Inactif sans la classe. */
.wc-actus--dark{ background:var(--couleur-dark); }
.wc-actus--dark .h2{ color:#fff; }
.wc-actus--dark .supra{ color:var(--secondaire-100); }
/* bouton « Toutes les actualités » : swappé en .btn-ghost-dark par le colis (style l.124). */
/* vague : raccord au BAS du dégradé des accès rapides (.qa → --secondaire-50), pas #fff. */
.wc-actus--dark .wave-top path{ fill:var(--secondaire-50); }
/* CARTES : volontairement NON touchées → .wc-actus .ev-card restent blanches (texte sombre). */

/* =====================================================================
   ACCÈS RAPIDES accueil (.wc-acces) — box annuaire en carrousel (miroir wc-agenda)
   Rendu réel = .wc-acces .directoryEntries > article.qa-card (via listEntries.html),
   PAS .widgetContainer. Piste flex + flèches/dots créés par home.js. Section claire.
   ===================================================================== */
body.homepage .wc-acces .directoryEntries{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
body.homepage .wc-acces .directoryEntries::-webkit-scrollbar{ display:none; }
body.homepage .wc-acces .directoryEntries > .qa-card{ scroll-snap-align:start; flex:0 0 auto; width:260px; }
/* filtres d'annuaire vides (ul.directoryListFilters) inutiles ici → masqués (scopé wc-acces) */
body.homepage .wc-acces .directoryListFilters{ display:none; }
/* le libellé texte de field_431 sert de clé JS uniquement → masqué (le picto est sur le <i>) */
.qa-ic [data-ic-val]{ display:none; }
/* pastille par défaut (les fiches n'ont pas de variante .red/.green… ) */
.wc-acces .qa-ic{ background:var(--principale-50); color:var(--couleur-principale); }
/* neutralise les <p> vides éventuels (description absente) */
.wc-acces .qa-card p:empty{ display:none; }
/* Lien : field_430 est linkifié par Saytup en <a class="LinkIn"> DANS .qa-link.
   On reprend le look .link-more et on remplace le texte (URL brute) par « Accéder → ». */
.wc-acces .qa-card .qa-link{ margin-top:auto; }
.wc-acces .qa-card .qa-link a,
.wc-acces .qa-card .qa-link .LinkIn{
  display:inline-flex; align-items:center; font-family:var(--police-titres);
  font-weight:700; color:var(--couleur-principale); text-decoration:none;
  transition:color .2s; font-size:0;   /* masque le texte d'URL */
}
.wc-acces .qa-card .qa-link a:hover{ color:var(--principale-700); }
.wc-acces .qa-card .qa-link a::before{ content:"Accéder"; font-size:14px; font-weight:700; }
.wc-acces .qa-card .qa-link a::after{ content:" \2192"; font-size:14px; margin-left:6px; }

/* =====================================================================
   HERO — diaporama NATIF Saytup (createDiaporama) habillé WeeCity
   Scope : .hero-section (id #hero, toujours présent) ; box_class = wc-hero.
   Pont : scripts/hero-bridge.js (wrappe contrôles, Ken Burns .saytup-kb-bg,
   CTA .saytup-hero-cta, classe .saytup-slide-actif sur le slide actif).
   Valeurs reprises de l'ancien .hero (hauteur, signature, scrim, typo).
   ===================================================================== */
.hero-section{
  position:relative; height:min(620px,82vh); min-height:520px; overflow:hidden;
  background:var(--couleur-dark);
  border-bottom-left-radius:clamp(80px,12vw,170px);
  -webkit-clip-path:inset(0 round 0 0 0 clamp(80px,12vw,170px));
  clip-path:inset(0 round 0 0 0 clamp(80px,12vw,170px));
}
.hero-section .elementDiaporama,
.hero-section .diaporama,
.hero-section .diaporamaWrapper{ display:block; width:100%; position:relative; }
/* Remplissage forcé : createDiaporama pose un height inline (~595px) → on rétablit 100%
   pour couvrir toute la hauteur de .hero-section (sinon le fond navy apparaît en bande en bas). */
.hero-section .elementDiaporama,
.hero-section .diaporama,
.hero-section .diaporamaWrapper,
.hero-section .diaporamaSlide,
.hero-section .saytup-kb-bg{ height:100% !important; }

/* Slides empilés ; CROSS-FADE AUTORITAIRE CSS (bat le fade jQuery natif — même parade que le festif).
   jQuery 1.10.2 fadeIn/fadeOut anime l'opacity INLINE (timer, saccadé) + pose display:none inline en fin
   de fadeOut → nos !important reprennent la main : display:block (slide rendue, fondu possible),
   opacity 0/1 pilotée par NOTRE transition GPU (.9s) via .saytup-slide-actif (hero-bridge). Slide active
   z-index:2 → PAR-DESSUS l'ancienne pendant le fondu (vrai cross-fade). Scope STRICT .hero-section. */
.hero-section .diaporamaSlide{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;   /* clic limité au CTA (.saytup-hero-cta a pointer-events:auto) */
  display:block !important;                  /* bat le display:none inline jQuery */
  opacity:0 !important;                       /* bat l'opacity inline jQuery */
  transition:opacity .9s ease !important;     /* NOTRE fondu (GPU) pilote le cross-fade (bat le timer jQuery) */
  z-index:1;
}
.hero-section .diaporamaSlide.saytup-slide-actif{ opacity:1 !important; z-index:2; }

/* ── FILET DE SÉCURITÉ (CSS pur, indépendant du JS et du timing serveur) ─────────
   Si hero-bridge.js tarde ou ne tourne pas (serveur lent → images longues), aucun
   slide n'a .saytup-slide-actif et le natif reste masqué (display:none inline posé
   par jQuery .hide() + notre opacity:0) → hero BLANC. On force alors le 1ER slide
   visible (+ son image en cover). Dès que hero-bridge marque un slide actif,
   :has(.saytup-slide-actif) devient vrai → ce filet se DÉSACTIVE de lui-même
   → zéro interférence avec les transitions/dots du cas normal. */
.hero-section:not(:has(.saytup-slide-actif)) .diaporamaSlide:first-child{
  display:block !important;   /* bat le display:none inline (jQuery .hide()) */
  opacity:1 !important;       /* !important : bat le nouveau opacity:0 !important général → fallback visible */
}
.hero-section:not(:has(.saytup-slide-actif)) .diaporamaSlide:first-child > img{
  width:100%; height:100%; object-fit:cover; display:block;   /* image plein cadre même sans .saytup-kb-bg */
}

/* Image plein cadre (layer .saytup-kb-bg) — PAS de Ken Burns (aucune animation déclarée) */
.hero-section .saytup-kb-bg{ position:absolute; inset:0; width:100%; height:100%; }
.hero-section img.saytup-kb-bg{ object-fit:cover; }
.hero-section div.saytup-kb-bg{ background-size:cover; background-position:center; }
/* createDiaporama pose des width/height INLINE en px sur l'<img> (.saytup-kb-bg) + parfois un padding
   inline sur le .diaporamaSlide → l'image ne couvre pas toute la zone → le fond navy (--couleur-dark)
   de .hero-section transparaît (bande à droite). On force l'image à couvrir (bat l'inline ; symétrique
   du height:100% !important déjà en place l.2769 pour la bande du bas). hero-bridge.js NON touché. */
.hero-section img.saytup-kb-bg{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  position:absolute !important; inset:0 !important;
}
.hero-section .diaporamaSlide{ padding:0 !important; }   /* annule le padding inline éventuel du slide */

/* Scrim (reprise .hero-scrim, piloté par --hero-scrim-opacity) */
.hero-section .diaporamaSlide::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(7,15,40,calc(.86 * var(--hero-scrim-opacity,1))) 0%,
    rgba(7,15,40,calc(.6  * var(--hero-scrim-opacity,1))) 40%,
    rgba(7,15,40,calc(.15 * var(--hero-scrim-opacity,1))) 75%,
    transparent 100%);
}

/* Texte par slide (.diaporamaExtra) positionné comme .hero-content (centré, bottom/middle-left) */
.hero-section .diaporamaExtra{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; pointer-events:none; }
.hero-section .diaporamaExtra > div{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); color:#fff;
}
.hero-section .diaporamaExtra strong{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;  /* cap 3 lignes */
  max-width:600px; color:#fff; font-family:var(--police-titres); font-weight:700;
  font-size:clamp(30px,4vw,48px); line-height:1.08; letter-spacing:-0.02em; margin-bottom:10px;
  text-shadow:0 1px 4px rgba(0,0,0,.55), 0 2px 12px rgba(0,0,0,.30);   /* lisibilité sur image (= aperçu WeeCity) */
}
.hero-section .diaporamaExtra > div > span:not(.saytup-hero-cta):not(.hero-eyebrow){
  display:block; max-width:560px; font-family:var(--police-titres); font-weight:500;
  font-size:clamp(20px,2.4vw,28px); color:rgba(255,255,255,.9); margin-bottom:28px;
  text-shadow:0 1px 4px rgba(0,0,0,.55), 0 2px 12px rgba(0,0,0,.30);   /* lisibilité sur image (= aperçu WeeCity) */
}

/* CTA (.saytup-hero-cta, span injecté par hero-bridge) → STRICTEMENT .btn + .btn-primary + .btn i */
.hero-section .saytup-hero-cta{
  pointer-events:auto; cursor:pointer;                 /* légitimes : c'est un <span role=link> */
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--police-titres); font-weight:600; font-size:15px; padding:13px 22px;
  border-radius:var(--btn-radius); white-space:nowrap; background:var(--couleur-principale); color:#fff;
  box-shadow:0 8px 20px -8px rgba(30,64,175,.5);
  transition:transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.hero-section .saytup-hero-cta:hover{ background:var(--principale-700); transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(30,64,175,.55); }
/* icône flèche = <i class="ti ti-arrow-right"> de l'original, en CSS pur (le gap:9px gère l'espacement) */
.hero-section .saytup-hero-cta::after{
  content:"\ea1f";                 /* Tabler ti-arrow-right — webfont v3.24.0 (vérifié via le CSS CDN) */
  font-family:"tabler-icons-fix"; /* police icônes réellement chargée (cf. .ti{font-family:"tabler-icons-fix" !important}) */
  font-size:18px; line-height:1; font-weight:normal; font-style:normal;
}

/* Contrôles (wrappés par hero-bridge dans .saytup-hero-controls) */
.hero-section .saytup-hero-controls{
  position:absolute; z-index:4; bottom:20px; right:var(--gutter);   /* dots remontés plus bas (était 46px) */
  display:flex; align-items:center; gap:12px; pointer-events:auto;
}
/* Colis = DOTS SEULS → flèches masquées (cf. .hero-arrows{display:none} du colis) */
.hero-section .diaporamaControlPrev,
.hero-section .diaporamaControlNext{ display:none !important; }
/* Conteneur dots : createDiaporama lui pose un style inline (position:absolute; left:0; bottom:0;
   z-index:10; width:100%; text-align:center) → on neutralise TOUT pour qu'il reprenne sa place
   dans la barre flex .saytup-hero-controls. */
.hero-section .diaporamaDots{
  position:static !important; left:auto !important; right:auto !important; bottom:auto !important; top:auto !important;
  width:auto !important; text-align:initial !important; z-index:auto !important;
  display:flex; align-items:center; gap:10px;
}
/* DOM réel : .diaporamaDots > div(SANS classe) > span.diaporamaDot → les dots sont
   petits-enfants → on aligne le <div> interne, et on tue le texte "diapositive : N" à tous niveaux. */
.hero-section .diaporamaDots > div{ display:flex; align-items:center; gap:10px; }
.hero-section .diaporamaDots,
.hero-section .diaporamaDots > div,
.hero-section .diaporamaDot{ font-size:0 !important; }
.hero-section .diaporamaDot{
  width:10px; height:10px; padding:0; border:none; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.4); display:inline-block; transition:all .3s;
}
.hero-section .diaporamaDot.diaporamaDotActive{ width:30px; background:#fff; }
/* RGAA : le hero maison émet de VRAIS <button> (le natif posait des <span> inertes).
   Ce sont des contrôles → focus visible obligatoire. */
.hero-section .diaporamaDot:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* ── SCÈNE DU HERO MAISON (accueil) ────────────────────────────────────────────
   Géométrie identique à celle des slides natives : rien ne bouge visuellement.
   Aucune couleur ici → portable tel quel d'un thème à l'autre. */
.hero-section .wc-hero-home{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.hero-section .wc-hero-home img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .9s ease;
}
.hero-section .wc-hero-home img.on{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .hero-section .wc-hero-home img{ transition:none; }
}

/* (positionnement inline natif neutralisé directement dans les règles contrôles ci-dessus) */

/* Surtitre commune — injecté DANS le flux (.diaporamaExtra > div, avant le titre) par hero-bridge.js.
   Le <span class="hero-eyebrow"> est exclu du sélecteur sous-titre (l.813, :not(.hero-eyebrow)) ;
   on REPRODUIT ICI à l'identique la pastille colis (.hero-eyebrow base, hulluch.html l.220-223)
   pour garantir le pixel-perfect malgré le contexte .diaporamaExtra. */
.hero-section .diaporamaExtra .hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;               /* gap colis 8px (sépare icône/texte) */
  width:auto; max-width:none;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding:7px 14px; border-radius:999px;
  font-family:var(--police-titres); font-weight:600; font-size:13px; line-height:1.2;
  letter-spacing:normal; text-transform:none; color:#fff; margin:0 0 22px;
}
/* icône map-pin en ::before, texte en ::after (le gap:8px de .hero-eyebrow sépare icône/texte).
   SVG INLINE en mask (pas de codepoint Tabler : \f73f rendait un tofu/carré côté Saytup —
   « codepoints peu fiables »). Dessin = Tabler "map-pin" outline (identique au ti-map-pin de WeeCity).
   Couleur pilotée par background-color → var(--secondaire-100), comme avant. */
.hero-section .diaporamaExtra .hero-eyebrow::before{
  content:""; display:inline-block; width:16px; height:16px; flex:0 0 auto;
  background-color:var(--secondaire-100);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/%3E%3Cpath d='M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/%3E%3Cpath d='M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* texte = var(--commune-label) : suit STRICTEMENT la taille pastille (13px), pas la taille bloc texte hero */
.hero-section .diaporamaExtra .hero-eyebrow::after{
  content:var(--commune-label, "");
  font:inherit; font-size:13px; line-height:1.2; color:#fff;
}

/* ══════════════════════════════════════════════════════════════
   FANCYBOX v2 — Lightbox (habillage WeeCity)
   Porté de css/pages.css (l.6633-6834) car pages.css n'est PAS servi sur l'accueil
   (le gabarit ne lie que styles.css) → sans ce bloc, la lightbox s'ouvre nue.
   Globale (overlay plein écran) : s'applique à TOUTE lightbox FancyBox v2 du site.
   Tokens remappés vers styles.css : --c-primaire→--couleur-principale ;
   --c-accent→--principale-700 (hover, contraste OK avec picto blanc) ; --r-xl→--card-radius ;
   --police-corps inchangé (présent). SVG data-uri inline (close + chevrons) : aucun sprite requis.
   ══════════════════════════════════════════════════════════════ */

/* ── Z-index : au-dessus du header sticky, mega-menu et overlay ── */
.fancybox-overlay { z-index: 99980 !important; }
.fancybox-wrap    { z-index: 99981 !important; }
.fancybox-nav     { z-index: 99982 !important; }
.fancybox-close   { z-index: 99983 !important; }

/* ── Overlay ── */
.fancybox-overlay {
  background: rgba(10, 16, 35, 0.9) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* ── Wrap : position fixed pour rester dans le viewport quelle que soit la position de scroll ──
   !important est nécessaire pour écraser le style inline injecté par FancyBox JS
   (position:absolute; top:Xpx; left:Xpx) ── */
.fancybox-wrap {
  outline: none !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  max-width: calc(100vw - 120px) !important;
  max-height: calc(100vh - 100px) !important;   /* marge homogène ~50px haut/bas */
}

.fancybox-skin {
  background: #fff !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 32px 80px rgba(10,16,35,0.55), 0 8px 24px rgba(10,16,35,0.3) !important;
  padding: 0 !important;
  border: none !important;
  overflow: visible !important;
}

/* ── Outer + Inner : coins arrondis et clip ; la boîte ÉPOUSE l'image (auto + plafond viewport) ── */
.fancybox-outer {
  border-radius: var(--card-radius) !important;
  overflow: hidden !important;
  background: #000 !important;
  width: auto !important; height: auto !important;
  max-width: calc(100vw - 120px) !important;
  max-height: calc(100vh - 100px) !important;
}

.fancybox-inner {
  border-radius: var(--card-radius) !important;
  overflow: hidden !important;
  width: auto !important; height: auto !important;
  max-width: calc(100vw - 120px) !important;
  max-height: calc(100vh - 100px) !important;
}

/* Image dans la lightbox — plafonnée à ~90% du viewport, jamais étirée (auto, pas 100%) */
.fancybox-image {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: calc(100vw - 120px) !important;
  max-height: calc(100vh - 100px) !important;
  object-fit: contain !important;
  border-radius: var(--card-radius) !important;
}

/* ── Bouton fermer ── */
.fancybox-close {
  position: absolute !important;
  top: -14px !important;
  right: -14px !important;
  width: 40px !important;
  height: 40px !important;
  background-color: var(--couleur-principale) !important;
  background-image: none !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 12px rgba(22,34,68,0.35) !important;
  cursor: pointer !important;
  transition: background-color 0.18s, transform 0.18s !important;
}

.fancybox-close::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") center/16px no-repeat;
}

.fancybox-close:hover {
  background-color: var(--principale-700) !important;
  transform: scale(1.1) rotate(90deg) !important;
}

/* ── Navigation ── */
.fancybox-nav {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 48px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  opacity: 0 !important;
  transition: opacity 0.22s !important;
}

.fancybox-prev { left: -60px !important; }
.fancybox-next { right: -60px !important; }

.fancybox-wrap:hover .fancybox-nav { opacity: 1 !important; }

/* span — position:relative pour s'intégrer au flex du parent nav */
.fancybox-nav span {
  position: relative !important;
  top: auto !important;
  margin-top: 0 !important;
  width: 44px !important;
  height: 44px !important;
  background-color: rgba(255,255,255,0.92) !important;
  background-image: none !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 12px rgba(22,34,68,0.18) !important;
  visibility: visible !important;
  transition: background-color 0.18s, transform 0.18s !important;
}

.fancybox-nav span::before {
  content: '';
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
}

.fancybox-prev span::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23162244' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}
.fancybox-next span::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23162244' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

.fancybox-nav span:hover {
  background-color: var(--principale-700) !important;
  transform: scale(1.08) !important;
}
.fancybox-prev span:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}
.fancybox-next span:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

/* ── Légende (title associé via l'attribut title="…") ── */
.fancybox-title {
  font-family: var(--police-corps) !important;
  font-size: 0.875rem !important;
  text-align: center !important;
}

.fancybox-title-float-wrap { bottom: -42px !important; }

.fancybox-title-float-wrap .child {
  background: rgba(22,34,68,0.82) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border-radius: 999px !important;
  padding: 0.35rem 1rem !important;
  box-shadow: 0 2px 12px rgba(22,34,68,0.2) !important;
  white-space: normal !important;
  text-shadow: none !important;
  color: rgba(255,255,255,0.92) !important;
}

/* Légende intégrée sous la photo — helpers.title.type = "inside" */
.fancybox-title-inside-wrap {
  padding: 0.65rem 1.25rem !important;
  background: var(--couleur-principale) !important;
  color: rgba(255,255,255,0.9) !important;
  font-family: var(--police-corps) !important;
  font-style: italic !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  text-align: center !important;
  border-radius: 0 0 var(--card-radius) var(--card-radius) !important;
  letter-spacing: 0.01em !important;
}

/* ── Loader ── */
.fancybox-loading {
  border-top-color: var(--principale-700) !important;
  border-right-color: var(--principale-700) !important;
}

/* ── Respect prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .fancybox-overlay,
  .fancybox-skin,
  .fancybox-nav span,
  .fancybox-close {
    transition: none !important;
    transform: none !important;
  }
}

/* =====================================================================
   === ACTUALITES liste + detail (port REF-pages.css 7840-8493 + remap colis) ===
   Scope STRICT body:not(:has(#contenu-principal #hero)) + ancêtre #blogPosts (liste)
   / #blogPostDetail* (détail). .blogPostResume est MUTUALISÉ avec l'accueil
   (.accueil-actualites .blogPostResume) → l'ancêtre #blogPosts protège l'accueil.
   Remap : #fff→rgba(255,255,255,1) · rgba(22,34,68,X)→color-mix(--couleur-dark X%) ·
   rgba(0,181,184,X)→color-mix(--couleur-secondaire X%) · #1a2332→--ink · gris→--ink-2/-3 ·
   #dde3ea/#e2e8f0/#e8ecf0→--line · #f7f9fc→--surface-2 · --r-xl→--card-radius · Inter→--police-titres.
   ===================================================================== */

/* ---------- A) LISTE (#blogPosts) ---------- */
body:not(:has(#contenu-principal #hero)) #blogPosts{
  display:grid !important; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)) !important;
  gap:1.5rem !important; padding:0 !important; margin:1.5rem 0 !important; clear:both;
}
body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostResume{
  background:var(--surface); border:1px solid color-mix(in srgb, var(--couleur-dark) 8%, transparent);
  border-radius:var(--card-radius); box-shadow:var(--shadow-sm); overflow:hidden;
  display:flex !important; flex-direction:column !important; padding:0 !important; margin:0 !important;
  position:relative !important; transition:box-shadow .3s ease, transform .3s ease;
}
body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostResume:hover{
  box-shadow:var(--shadow-lg); transform:translateY(-4px);
}
body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostPicture{
  width:100% !important; aspect-ratio:16 / 9 !important; height:auto !important; flex-shrink:0;
  overflow:hidden !important; background:var(--surface-2) center/cover !important; display:block !important;
}
body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostPicture img{
  width:100% !important; height:100% !important; object-fit:cover !important; display:block !important;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostResume:hover .blogPostPicture img{ transform:scale(1.06); }
body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostContent{
  display:flex !important; flex-direction:column !important; flex:1 !important; padding:1.25rem !important;
}
/* badge catégorie */
body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostCategory{ padding:0 0 .625rem !important; margin:0 !important; }
body:not(:has(#contenu-principal #hero)) #blogPosts .postCategoryLink{
  display:inline-flex !important; align-items:center; font-size:.6875rem !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.07em !important; color:var(--couleur-secondaire) !important;
  background:color-mix(in srgb, var(--couleur-secondaire) 10%, transparent) !important;
  padding:.225rem .65rem !important; border-radius:999px !important; text-decoration:none !important;
  transition:background .15s, color .15s;
}
body:not(:has(#contenu-principal #hero)) #blogPosts .postCategoryLink:hover{
  background:var(--couleur-secondaire) !important; color:rgba(255,255,255,1) !important;
}
/* titre */
body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostTitle{
  font-family:var(--police-titres); font-size:1.0625rem !important; font-weight:700 !important; line-height:1.4 !important; margin:0 0 .5rem !important;
}
body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostTitle a{ color:var(--ink) !important; text-decoration:none !important; transition:color .15s; }
body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostTitle a:hover{ color:var(--couleur-secondaire) !important; }
/* date */
body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostDate{
  display:inline-flex !important; align-items:center !important; gap:.3rem !important; font-size:.775rem !important;
  color:var(--ink-2) !important; margin-bottom:.5rem !important; padding:0 !important; background:none !important; float:none !important;
}
body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostDate strong{ font-weight:400 !important; text-transform:capitalize !important; color:inherit !important; }
body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostDate span{ font-weight:700 !important; color:var(--couleur-principale) !important; }
/* metas auteur */
body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostMetas{
  display:flex !important; align-items:center !important; float:none !important; position:static !important; padding:0 !important; margin:0 0 .75rem !important;
}
body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostAuthor{
  float:none !important; padding:0 !important; border:none !important; font-size:.775rem !important; color:var(--ink-3) !important;
}
body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostAuthor a{ color:var(--ink-3) !important; text-decoration:none !important; font-weight:500 !important; }
/* commentaires/notes en liste : masqués (cohérence) */
body:not(:has(#contenu-principal #hero)) #blogPosts .commentsDatas,
body:not(:has(#contenu-principal #hero)) #blogPosts .ratingsDatas{ display:none !important; }
/* description (extrait 4 lignes) */
body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostDescription{
  font-size:.875rem !important; color:var(--ink-2) !important; line-height:1.65 !important; padding:0 !important; margin:0 !important;
  overflow:hidden; display:-webkit-box !important; -webkit-line-clamp:4; -webkit-box-orient:vertical;
}
body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostDescription .hide{ display:none !important; }
/* CTA « Lire la suite » poussé en bas */
body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostLink{ padding:1.125rem 0 0 !important; text-align:left !important; float:none !important; margin-top:auto !important; }
body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostLink a{
  display:inline-flex !important; align-items:center !important; gap:.4rem !important; padding:.575rem 1.25rem !important;
  background:transparent !important; color:var(--couleur-principale) !important;
  border:1.5px solid color-mix(in srgb, var(--couleur-dark) 20%, transparent) !important; border-radius:999px !important;
  font-size:.8125rem !important; font-weight:600 !important; text-decoration:none !important; transition:background .18s, border-color .18s, color .18s;
}
body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostLink a::after{ content:'\2192'; font-size:.875rem; transition:transform .18s ease; }
body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostLink a:hover{
  background:var(--couleur-principale) !important; border-color:var(--couleur-principale) !important; color:rgba(255,255,255,1) !important;
}
body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostLink a:hover::after{ transform:translateX(3px); }
/* pager natif */
body:not(:has(#contenu-principal #hero)) #blogPosts .pager{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:1rem; }
body:not(:has(#contenu-principal #hero)) #blogPosts .pager a{
  display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 10px;
  border:1px solid var(--line); border-radius:var(--btn-radius); color:var(--ink-2); text-decoration:none;
  font-family:var(--police-titres); font-weight:600; font-size:.85rem; transition:background .15s, color .15s, border-color .15s;
}
body:not(:has(#contenu-principal #hero)) #blogPosts .pager a:hover,
body:not(:has(#contenu-principal #hero)) #blogPosts .pager a.active{ background:var(--couleur-principale); border-color:var(--couleur-principale); color:rgba(255,255,255,1); }

/* FILTRE CATÉGORIE (barre injectée par initActualitesFiltres, sœur de #blogPosts) */
body:not(:has(#contenu-principal #hero)) .actu-filtres{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.75rem; }
body:not(:has(#contenu-principal #hero)) .actu-filtre-btn{
  display:inline-flex; align-items:center; gap:.45rem; padding:.45rem 1rem; background:var(--surface); color:var(--ink);
  border:1.5px solid color-mix(in srgb, var(--couleur-dark) 15%, transparent); border-radius:999px;
  font-family:var(--police-titres); font-size:.8125rem; font-weight:500; cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
body:not(:has(#contenu-principal #hero)) .actu-filtre-btn:hover{
  border-color:var(--couleur-secondaire); color:var(--couleur-secondaire); background:color-mix(in srgb, var(--couleur-secondaire) 5%, transparent);
}
body:not(:has(#contenu-principal #hero)) .actu-filtre-btn--actif{
  background:var(--couleur-principale) !important; color:rgba(255,255,255,1) !important; border-color:var(--couleur-principale) !important;
  box-shadow:0 3px 10px color-mix(in srgb, var(--couleur-dark) 22%, transparent); font-weight:600;
}
body:not(:has(#contenu-principal #hero)) .actu-filtre-btn--actif:hover{ background:var(--couleur-principale) !important; color:rgba(255,255,255,1) !important; }
body:not(:has(#contenu-principal #hero)) .actu-filtre-count{
  display:inline-flex; align-items:center; justify-content:center; min-width:1.25rem; height:1.25rem; padding:0 .3rem;
  border-radius:999px; font-size:.6875rem; font-weight:700; line-height:1;
  background:color-mix(in srgb, var(--couleur-dark) 9%, transparent); color:var(--ink-2); transition:background .18s ease, color .18s ease;
}
body:not(:has(#contenu-principal #hero)) .actu-filtre-btn--actif .actu-filtre-count{ background:color-mix(in srgb, rgba(255,255,255,1) 22%, transparent); color:rgba(255,255,255,1); }
body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostResume.actu-masque{ display:none !important; }
/* responsive liste */
@media (max-width:600px){ body:not(:has(#contenu-principal #hero)) #blogPosts{ grid-template-columns:1fr !important; } }
@media (prefers-reduced-motion:reduce){
  body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostResume,
  body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostPicture img{ transition:none !important; }
  body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostResume:hover{ transform:none !important; }
  body:not(:has(#contenu-principal #hero)) #blogPosts .blogPostResume:hover .blogPostPicture img{ transform:none !important; }
}

/* ---------- B) DÉTAIL (#blogPostDetail*) ---------- */
body:not(:has(#contenu-principal #hero)) #blogPostDetailPicture{
  border-radius:var(--card-radius); overflow:hidden; margin-bottom:2rem; background:var(--surface-2);
}
body:not(:has(#contenu-principal #hero)) #blogPostDetailPicture img{ width:100%; max-height:460px; object-fit:cover; display:block; }
body:not(:has(#contenu-principal #hero)) #blogPostDetailPicture .hide{ display:none !important; }
/* badge catégorie détail (navy plein) */
body:not(:has(#contenu-principal #hero)) #blogPostDetailHeaderContent .blogPostCategory{ margin-bottom:.875rem; }
body:not(:has(#contenu-principal #hero)) #blogPostDetailHeaderContent .postCategoryLink{
  display:inline-block !important; padding:.32rem 1.1rem !important; background:var(--couleur-principale) !important; color:rgba(255,255,255,1) !important;
  border-radius:999px !important; font-size:.72rem !important; font-weight:700 !important; text-transform:uppercase !important;
  letter-spacing:.07em !important; text-decoration:none !important; transition:opacity .15s;
}
body:not(:has(#contenu-principal #hero)) #blogPostDetailHeaderContent .postCategoryLink:hover{ opacity:.82; }
/* titre H1 */
body:not(:has(#contenu-principal #hero)) h1.blogPostTitle{
  font-family:var(--police-titres); font-size:clamp(1.55rem,4vw,2.3rem) !important; line-height:1.22 !important;
  color:var(--ink) !important; font-weight:700 !important; margin-top:.25rem !important; margin-bottom:1.25rem !important;
}
/* métas (auteur masqué, date visible) */
body:not(:has(#contenu-principal #hero)) #blogPostDetailMetas{
  display:flex !important; align-items:center; flex-wrap:wrap; gap:.4rem 1.25rem; padding-bottom:1.5rem !important;
  border-bottom:1px solid var(--line); margin-bottom:1.5rem !important; float:none !important;
}
body:not(:has(#contenu-principal #hero)) #blogPostDetailMetas .blogPostDate{
  font-size:.875rem !important; color:var(--ink-3) !important; display:inline-block !important; margin:0 !important; padding:0 !important; background:none !important; float:none !important;
}
body:not(:has(#contenu-principal #hero)) #blogPostDetailMetas .blogPostDate strong,
body:not(:has(#contenu-principal #hero)) #blogPostDetailMetas .blogPostDate span{ font-weight:400 !important; color:inherit !important; text-transform:none !important; }
/* corps (chapeau lead ; #text hérite la typo premium 3a) */
body:not(:has(#contenu-principal #hero)) #blogPostDetailContent .blogPostDescription{
  font-size:1.05rem !important; line-height:1.88 !important; color:var(--ink-2) !important; margin:2rem 0 1.75rem !important; padding:0 !important;
  overflow:visible !important; display:block !important; -webkit-line-clamp:unset !important; -webkit-box-orient:unset !important;
}
/* tags */
body:not(:has(#contenu-principal #hero)) #blogPostDetailContent .blogPostTags{
  display:flex !important; align-items:center; flex-wrap:wrap; gap:.5rem; padding:1rem 1.25rem;
  background:var(--surface-2); border-radius:var(--btn-radius); margin:1.5rem 0 2rem !important; border:1px solid var(--line);
}
body:not(:has(#contenu-principal #hero)) #blogPostDetailContent .blogPostTags > .inblM{
  font-size:.72rem; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; flex-shrink:0;
}
body:not(:has(#contenu-principal #hero)) #blogPostDetailContent .blogPostTags ul{ display:flex !important; flex-wrap:wrap; gap:.4rem; margin:0 !important; padding:0 !important; list-style:none !important; }
body:not(:has(#contenu-principal #hero)) #blogPostDetailContent .blogPostTags ul li{ list-style:none !important; }
body:not(:has(#contenu-principal #hero)) #blogPostDetailContent .blogPostTag{
  display:inline-block !important; padding:.22rem .75rem !important; background:var(--surface) !important; border:1px solid var(--line) !important;
  border-radius:999px !important; font-size:.78rem !important; color:var(--ink-2) !important; list-style:none !important;
}
/* navigation prev/next */
body:not(:has(#contenu-principal #hero)) #blogPostNavigation{
  display:grid !important; grid-template-columns:1fr 1fr; gap:1rem; padding:2rem 0 !important; border-top:1px solid var(--line); margin:1rem 0 !important; clear:both;
}
body:not(:has(#contenu-principal #hero)) #blogPostNavigation .w50{ width:100% !important; padding:0 !important; margin:0 !important; float:none !important; position:static !important; }
body:not(:has(#contenu-principal #hero)) #blogPostPrevious,
body:not(:has(#contenu-principal #hero)) #blogPostNext{
  display:flex !important; align-items:center; gap:1rem; padding:1.25rem !important; background:var(--surface);
  border:1.5px solid var(--line) !important; border-radius:12px !important; text-decoration:none !important;
  transition:border-color .2s, box-shadow .2s, transform .15s; min-height:80px; box-sizing:border-box;
}
body:not(:has(#contenu-principal #hero)) #blogPostPrevious:hover,
body:not(:has(#contenu-principal #hero)) #blogPostNext:hover{
  border-color:var(--couleur-secondaire) !important; box-shadow:0 6px 20px color-mix(in srgb, var(--couleur-secondaire) 13%, transparent); transform:translateY(-2px);
}
body:not(:has(#contenu-principal #hero)) #blogPostPrevious .fa,
body:not(:has(#contenu-principal #hero)) #blogPostNext .fa{
  font-size:1.25rem !important; color:var(--couleur-secondaire) !important; flex-shrink:0; width:40px; height:40px;
  display:flex !important; align-items:center; justify-content:center; background:color-mix(in srgb, var(--couleur-secondaire) 8%, transparent);
  border-radius:50%; padding:0 !important; position:static !important; text-align:center; line-height:40px;
}
body:not(:has(#contenu-principal #hero)) #blogPostPrevious > span,
body:not(:has(#contenu-principal #hero)) #blogPostNext > span{
  display:block !important; padding:0 !important; font-size:.72rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; line-height:1.5;
}
body:not(:has(#contenu-principal #hero)) #blogPostPrevious > span strong,
body:not(:has(#contenu-principal #hero)) #blogPostNext > span strong{
  display:block !important; font-size:.875rem; color:var(--ink); font-weight:600; margin-top:.2rem; text-transform:none; letter-spacing:0;
}
body:not(:has(#contenu-principal #hero)) #blogPostNext{ flex-direction:row-reverse !important; text-align:right; }
/* bouton retour */
body:not(:has(#contenu-principal #hero)) #blogPostBack{ text-align:center; padding-top:2rem !important; border-top:1px solid var(--line); margin-top:1rem; clear:both; }
body:not(:has(#contenu-principal #hero)) #blogPostBack a.button{
  display:inline-flex; align-items:center; gap:.4rem; padding:.6rem 1.3rem; background:var(--couleur-principale); color:rgba(255,255,255,1);
  border-radius:var(--btn-radius); font-family:var(--police-titres); font-weight:600; text-decoration:none; transition:background .18s;
}
body:not(:has(#contenu-principal #hero)) #blogPostBack a.button:hover{ background:var(--couleur-secondaire); }

/* C) MASQUAGES (décisions actées) — détail */
body:not(:has(#contenu-principal #hero)) #blogPostSocial,                 /* partage social (pas de SDK affiché) */
body:not(:has(#contenu-principal #hero)) #blogPostDetailMetas .blogPostAuthor,  /* auteur en métas */
body:not(:has(#contenu-principal #hero)) #blogPostAuthor,                 /* bio auteur */
body:not(:has(#contenu-principal #hero)) #blogPostDetailContent .postAction,
body:not(:has(#contenu-principal #hero)) #blogPostDetailContent #listComments,
body:not(:has(#contenu-principal #hero)) #blogPostDetailContent #addComments,
body:not(:has(#contenu-principal #hero)) #blogPostDetailContent #ratingsDatas{ display:none !important; }
/* responsive détail */
@media (max-width:640px){
  body:not(:has(#contenu-principal #hero)) #blogPostNavigation{ grid-template-columns:1fr !important; }
  body:not(:has(#contenu-principal #hero)) #blogPostNext{ flex-direction:row !important; text-align:left !important; }
}
@media (prefers-reduced-motion:reduce){
  body:not(:has(#contenu-principal #hero)) #blogPostPrevious,
  body:not(:has(#contenu-principal #hero)) #blogPostNext{ transition:none !important; }
  body:not(:has(#contenu-principal #hero)) #blogPostPrevious:hover,
  body:not(:has(#contenu-principal #hero)) #blogPostNext:hover{ transform:none !important; }
}

/* =====================================================================
   === ORGANIGRAMME élus (port REF-pages.css 8981-9190 + remap colis) ===
   Cartes-portraits construites par initOrganigramme (main.js, déjà actif) : grille de
   .org-entry (photo+overlay+body+tags+lien), --featured = ordre min = maire (span 2 + corps navy).
   Scope strict .organigramme/.org-entry (classes exclusives → zéro conflit accueil).
   Remap : #fff→rgba(255,255,255,1) · #e2e8f0/#c8d2dc→--line · #7a8ea0→--ink-3 ·
   rgba(22,34,68,X)→color-mix(--couleur-dark X%) · scrim rgba(12,22,48,X)→color-mix(--couleur-dark X%) ·
   rgba(0,212,217)/--c-accent→--couleur-secondaire · --c-primaire→--couleur-principale · #1a3c76→--principale-700.
   ===================================================================== */
body:not(:has(#contenu-principal #hero)) .elementDirectory.organigramme .directoryEntries{
  display:grid !important; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)) !important;
  gap:1.25rem !important; padding:0 !important; width:100% !important; align-items:stretch !important;
}
/* carte base */
body:not(:has(#contenu-principal #hero)) .org-entry{
  display:flex !important; flex-direction:column !important; background:var(--surface) !important;
  border:1px solid var(--line) !important; border-radius:var(--card-radius) !important; overflow:hidden !important;
  box-sizing:border-box !important; margin:0 !important; padding:0 !important; width:auto !important; float:none !important;
  height:100% !important; transition:box-shadow .2s ease, transform .2s ease !important;
}
body:not(:has(#contenu-principal #hero)) .org-entry:hover{
  box-shadow:0 6px 24px color-mix(in srgb, var(--couleur-dark) 13%, transparent) !important; transform:translateY(-2px) !important;
}
/* photo + overlay */
body:not(:has(#contenu-principal #hero)) .org-entry__photo{
  position:relative !important; width:100% !important; aspect-ratio:3 / 4 !important; overflow:hidden !important;
  background:var(--line) !important; flex-shrink:0 !important;   /* fond neutre si pas d'image */
}
body:not(:has(#contenu-principal #hero)) .org-entry__photo img{
  width:100% !important; height:100% !important; object-fit:cover !important; object-position:center 20% !important;
  display:block !important; border-radius:0 !important; border:none !important; box-shadow:none !important; max-width:none !important;
  transition:transform .35s ease !important;
}
body:not(:has(#contenu-principal #hero)) .org-entry:hover .org-entry__photo img{ transform:scale(1.05) !important; }
body:not(:has(#contenu-principal #hero)) .org-entry__photo::after{
  content:'' !important; position:absolute !important; inset:0 !important;
  background:linear-gradient(to bottom, transparent 40%, color-mix(in srgb, var(--couleur-dark) 88%, transparent) 100%) !important;
  pointer-events:none !important;
}
body:not(:has(#contenu-principal #hero)) .org-entry__overlay{
  position:absolute !important; bottom:0 !important; left:0 !important; right:0 !important; padding:.75rem !important; z-index:1 !important;
}
body:not(:has(#contenu-principal #hero)) .org-entry__overlay .org-entry__name{
  font-family:var(--police-titres); font-size:.875rem !important; font-weight:700 !important; color:rgba(255,255,255,1) !important;
  margin:0 0 .2rem !important; line-height:1.3 !important; text-shadow:0 1px 4px color-mix(in srgb, var(--couleur-dark) 40%, transparent) !important;
}
body:not(:has(#contenu-principal #hero)) .org-entry__overlay .org-entry__fonction{
  font-size:.72rem !important; font-weight:600 !important; color:var(--couleur-secondaire) !important; margin:0 !important; line-height:1.35 !important;
}
/* corps */
body:not(:has(#contenu-principal #hero)) .org-entry__body{
  padding:.625rem .875rem .875rem !important; flex:1 !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important;
}
body:not(:has(#contenu-principal #hero)) .org-entry__service{
  font-size:.7rem !important; color:var(--ink-3) !important; font-style:italic !important; margin:0 0 .4rem !important;
}
body:not(:has(#contenu-principal #hero)) .org-entry__tags{
  display:flex !important; flex-wrap:wrap !important; gap:.25rem !important; margin-top:auto !important; padding-top:.375rem !important;
}
body:not(:has(#contenu-principal #hero)) .org-entry__tags .directoryEntryTagsLink{
  display:inline-flex !important; align-items:center !important; padding:.12rem .5rem !important;
  background:color-mix(in srgb, var(--couleur-secondaire) 8%, transparent) !important;
  border:1px solid color-mix(in srgb, var(--couleur-secondaire) 22%, transparent) !important; border-radius:999px !important;
  font-size:.62rem !important; font-weight:600 !important; letter-spacing:.04em !important; text-transform:uppercase !important;
  color:var(--couleur-secondaire) !important; text-decoration:none !important;
}
body:not(:has(#contenu-principal #hero)) .org-entry__link{
  display:inline-flex !important; align-items:center !important; gap:.3rem !important; margin-top:.625rem !important;
  font-family:var(--police-titres); font-size:.72rem !important; font-weight:600 !important; color:var(--couleur-principale) !important;
  text-decoration:none !important; transition:color .15s, gap .15s !important;
}
body:not(:has(#contenu-principal #hero)) .org-entry__link::after{ content:'\2192' !important; }
body:not(:has(#contenu-principal #hero)) .org-entry__link:hover{ color:var(--couleur-secondaire) !important; gap:.5rem !important; }
/* FEATURED (maire, ordre min) : span 2 col, corps navy */
body:not(:has(#contenu-principal #hero)) .org-entry--featured{
  grid-column:span 2 !important; flex-direction:column !important; border-color:transparent !important;
  box-shadow:0 6px 28px color-mix(in srgb, var(--couleur-dark) 22%, transparent) !important;
}
body:not(:has(#contenu-principal #hero)) .org-entry--featured:hover{ box-shadow:0 10px 36px color-mix(in srgb, var(--couleur-dark) 30%, transparent) !important; }
body:not(:has(#contenu-principal #hero)) .org-entry--featured .org-entry__photo{ aspect-ratio:3 / 2 !important; }
body:not(:has(#contenu-principal #hero)) .org-entry--featured .org-entry__photo img{ object-position:center 30% !important; }
body:not(:has(#contenu-principal #hero)) .org-entry--featured .org-entry__photo::after{
  background:linear-gradient(to bottom, transparent 30%, color-mix(in srgb, var(--couleur-dark) 92%, transparent) 100%) !important;
}
body:not(:has(#contenu-principal #hero)) .org-entry--featured .org-entry__overlay .org-entry__name{ font-size:1.1rem !important; }
body:not(:has(#contenu-principal #hero)) .org-entry--featured .org-entry__overlay .org-entry__fonction{ font-size:.8rem !important; }
body:not(:has(#contenu-principal #hero)) .org-entry--featured .org-entry__body{
  background:linear-gradient(135deg, var(--couleur-principale) 0%, var(--principale-700) 100%) !important; align-items:flex-start !important;
}
body:not(:has(#contenu-principal #hero)) .org-entry--featured .org-entry__service{ color:color-mix(in srgb, rgba(255,255,255,1) 60%, transparent) !important; }
body:not(:has(#contenu-principal #hero)) .org-entry--featured .org-entry__tags .directoryEntryTagsLink{
  background:color-mix(in srgb, rgba(255,255,255,1) 12%, transparent) !important;
  border-color:color-mix(in srgb, rgba(255,255,255,1) 25%, transparent) !important; color:color-mix(in srgb, rgba(255,255,255,1) 85%, transparent) !important;
}
body:not(:has(#contenu-principal #hero)) .org-entry--featured .org-entry__link{ color:color-mix(in srgb, rgba(255,255,255,1) 90%, transparent) !important; }
body:not(:has(#contenu-principal #hero)) .org-entry--featured .org-entry__link:hover{ color:var(--couleur-secondaire) !important; }
/* responsive */
@media (max-width:600px){
  body:not(:has(#contenu-principal #hero)) .elementDirectory.organigramme .directoryEntries{ grid-template-columns:repeat(2,1fr) !important; }
  body:not(:has(#contenu-principal #hero)) .org-entry--featured{ grid-column:span 2 !important; }
}
@media (max-width:380px){
  body:not(:has(#contenu-principal #hero)) .elementDirectory.organigramme .directoryEntries{ grid-template-columns:1fr !important; }
  body:not(:has(#contenu-principal #hero)) .org-entry--featured{ grid-column:span 1 !important; }
}
/* reduced-motion */
@media (prefers-reduced-motion:reduce){
  body:not(:has(#contenu-principal #hero)) .org-entry,
  body:not(:has(#contenu-principal #hero)) .org-entry__photo img{ transition:none !important; }
  body:not(:has(#contenu-principal #hero)) .org-entry:hover,
  body:not(:has(#contenu-principal #hero)) .org-entry:hover .org-entry__photo img{ transform:none !important; }
}

/* =====================================================================
   === FICHE DÉTAIL élu (.fiche-agent — directory_entry_detail_43) ===
   2 colonnes (photo gauche + infos droite), langage cohérent .org-entry (surface, --card-radius,
   fonction --couleur-secondaire, tags pills teal). Scope strict .fiche-agent (classes exclusives).
   Commentaires #entry_commentaires déjà display:none inline (non re-stylés). 100% variables colis.
   ===================================================================== */
body:not(:has(#contenu-principal #hero)) .fiche-agent{ max-width:860px; margin:0 auto; }
/* layout 2 colonnes */
body:not(:has(#contenu-principal #hero)) .fiche-agent__layout{
  display:flex; gap:clamp(1.5rem,3vw,2.5rem); align-items:flex-start; margin-bottom:2rem;
}
/* colonne photo */
body:not(:has(#contenu-principal #hero)) .fiche-agent__photo-wrap{
  flex:0 0 clamp(200px,28%,260px); position:relative; aspect-ratio:3 / 4; overflow:hidden;
  border-radius:var(--card-radius); background:var(--line);
  box-shadow:0 6px 24px color-mix(in srgb, var(--couleur-dark) 13%, transparent);
}
body:not(:has(#contenu-principal #hero)) .fiche-agent__photo-wrap a{ position:absolute; inset:0; display:block; pointer-events:none; }
body:not(:has(#contenu-principal #hero)) .fiche-agent__photo-wrap img{
  width:100% !important; height:100% !important; object-fit:cover; object-position:center 20%; display:block; max-width:none;
}
body:not(:has(#contenu-principal #hero)) .fiche-agent__photo-wrap a.LinkFile{ background:none !important; border:none !important; padding:0 !important; border-radius:0 !important; }
body:not(:has(#contenu-principal #hero)) .fiche-agent__photo-wrap a.LinkFile::before{ content:none !important; }
/* placeholder si AUCUNE photo (mx:bloc field_423 non émis → pas de .photo-wrap) : encart neutre + icône */
body:not(:has(#contenu-principal #hero)) .fiche-agent__layout:not(:has(.fiche-agent__photo-wrap))::before{
  content:""; flex:0 0 clamp(200px,28%,260px); aspect-ratio:3 / 4; border-radius:var(--card-radius);
  background:linear-gradient(160deg, color-mix(in srgb, var(--couleur-secondaire) 16%, var(--surface)), color-mix(in srgb, var(--couleur-secondaire) 5%, var(--surface)));
  -webkit-mask:no-repeat center/72px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  mask:no-repeat center/72px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  background-color:var(--couleur-secondaire);
}
/* colonne infos */
body:not(:has(#contenu-principal #hero)) .fiche-agent__infos{ flex:1 1 auto; min-width:0; }
body:not(:has(#contenu-principal #hero)) .fiche-agent__tags{ display:flex; flex-wrap:wrap; gap:.35rem; margin:0 0 .75rem; }
body:not(:has(#contenu-principal #hero)) .fiche-agent__tag{
  display:inline-flex; align-items:center; padding:.18rem .65rem; border-radius:999px;
  background:color-mix(in srgb, var(--couleur-secondaire) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--couleur-secondaire) 22%, transparent);
  font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--couleur-secondaire); text-decoration:none;
}
body:not(:has(#contenu-principal #hero)) .fiche-agent__nom{
  font-family:var(--police-titres); font-size:clamp(1.5rem,3.5vw,2.1rem); font-weight:700; line-height:1.2;
  color:var(--ink); margin:0 0 .35rem;
}
body:not(:has(#contenu-principal #hero)) .fiche-agent__fonction{
  font-family:var(--police-titres); font-size:1.05rem; font-weight:600; color:var(--couleur-secondaire); margin:0 0 .25rem;
}
body:not(:has(#contenu-principal #hero)) .fiche-agent__service{ font-size:.9rem; font-style:italic; color:var(--ink-3); margin:0 0 1.25rem; }
/* contacts */
body:not(:has(#contenu-principal #hero)) .fiche-agent__contacts{ display:flex; flex-direction:column; gap:.6rem; margin-top:1rem; }
body:not(:has(#contenu-principal #hero)) .fiche-agent__contact{ display:flex; align-items:center; gap:.6rem; font-size:.92rem; color:var(--ink-2); }
body:not(:has(#contenu-principal #hero)) .fiche-agent__contact a{ color:var(--ink-2); text-decoration:none; transition:color .15s; }
body:not(:has(#contenu-principal #hero)) .fiche-agent__contact a:hover{ color:var(--couleur-principale); }
body:not(:has(#contenu-principal #hero)) .fiche-agent__contact-icon{
  flex-shrink:0; width:18px; height:18px; color:var(--couleur-secondaire);
  background:color-mix(in srgb, var(--couleur-secondaire) 10%, transparent); border-radius:50%; padding:6px; box-sizing:content-box;
}
/* description */
body:not(:has(#contenu-principal #hero)) .fiche-agent__description{
  color:var(--ink); line-height:1.8; font-size:1rem; margin-top:.5rem;
  border-top:1px solid var(--line); padding-top:1.5rem;
}
body:not(:has(#contenu-principal #hero)) .fiche-agent__description p{ margin:0 0 1rem; }
/* navigation prev/next */
body:not(:has(#contenu-principal #hero)) .fiche-agent__nav{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:2rem 0 1rem; padding-top:1.5rem; border-top:1px solid var(--line);
}
body:not(:has(#contenu-principal #hero)) .fiche-agent__nav-btn{
  display:flex; align-items:center; gap:.75rem; padding:.85rem 1.1rem; background:var(--surface);
  border:1.5px solid var(--line); border-radius:var(--card-radius); text-decoration:none; color:var(--ink);
  transition:border-color .18s, box-shadow .18s, transform .15s;
}
body:not(:has(#contenu-principal #hero)) .fiche-agent__nav-btn:hover{
  border-color:var(--couleur-secondaire); box-shadow:0 4px 14px color-mix(in srgb, var(--couleur-secondaire) 13%, transparent); transform:translateY(-2px);
}
body:not(:has(#contenu-principal #hero)) .fiche-agent__nav-btn:focus-visible{ outline:2px solid var(--couleur-secondaire); outline-offset:2px; }
body:not(:has(#contenu-principal #hero)) .fiche-agent__nav-btn svg{ flex-shrink:0; color:var(--couleur-secondaire); }
body:not(:has(#contenu-principal #hero)) .fiche-agent__nav-btn span{ display:flex; flex-direction:column; min-width:0; }
body:not(:has(#contenu-principal #hero)) .fiche-agent__nav-btn small{ font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); }
body:not(:has(#contenu-principal #hero)) .fiche-agent__nav-btn strong{ font-family:var(--police-titres); font-size:.9rem; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body:not(:has(#contenu-principal #hero)) .fiche-agent__nav-btn--next{ flex-direction:row-reverse; text-align:right; justify-content:flex-start; }
body:not(:has(#contenu-principal #hero)) .fiche-agent__nav-btn--next span{ align-items:flex-end; }
/* retour */
body:not(:has(#contenu-principal #hero)) .fiche-agent__footer{ text-align:center; padding-top:1.5rem; border-top:1px solid var(--line); }
body:not(:has(#contenu-principal #hero)) .fiche-agent__retour{
  display:inline-flex; align-items:center; gap:.4rem; color:var(--couleur-principale);
  font-family:var(--police-titres); font-weight:600; font-size:.9rem; text-decoration:none; transition:color .18s, gap .18s;
}
body:not(:has(#contenu-principal #hero)) .fiche-agent__retour:hover{ color:var(--couleur-secondaire); gap:.65rem; }
body:not(:has(#contenu-principal #hero)) .fiche-agent__retour:focus-visible{ outline:2px solid var(--couleur-secondaire); outline-offset:2px; }
/* responsive ≤640px : colonne (photo au-dessus) + nav empilée */
@media (max-width:640px){
  body:not(:has(#contenu-principal #hero)) .fiche-agent__layout{ flex-direction:column; }
  body:not(:has(#contenu-principal #hero)) .fiche-agent__photo-wrap{ flex:0 0 auto; width:clamp(180px,55%,240px); }
  body:not(:has(#contenu-principal #hero)) .fiche-agent__layout:not(:has(.fiche-agent__photo-wrap))::before{ flex:0 0 auto; width:clamp(180px,55%,240px); }
  body:not(:has(#contenu-principal #hero)) .fiche-agent__nav{ grid-template-columns:1fr; }
  body:not(:has(#contenu-principal #hero)) .fiche-agent__nav-btn--next{ flex-direction:row; text-align:left; }
  body:not(:has(#contenu-principal #hero)) .fiche-agent__nav-btn--next span{ align-items:flex-start; }
}
/* reduced-motion */
@media (prefers-reduced-motion:reduce){
  body:not(:has(#contenu-principal #hero)) .fiche-agent__nav-btn,
  body:not(:has(#contenu-principal #hero)) .fiche-agent__retour{ transition:none; }
  body:not(:has(#contenu-principal #hero)) .fiche-agent__nav-btn:hover{ transform:none; }
}

/* ============================================================ CARTES PANNEAU POCKET
   Brique 2 (WEECITY-CONNECTEURS.md) — habillage du markup posé par
   scripts/pp-bridge.js. Rendu de référence : design-refs/« Actus-Agenda - Rail
   institutionnel | festif (standalone) ».

   Le pont pose UN SEUL markup pour les deux ambiances ; c'est ce bloc qui
   l'habille. Il est IDENTIQUE dans saytup-template et saytup-template-festif :
   toute la différence de peau vient des tokens du template (couleur de commune,
   rayon, ombres, polices). Seul ajout côté festif : les confettis (fin de bloc).

   AUCUNE couleur de marque en dur. Les seuls littéraux sont #000/#fff comme
   BORNES de color-mix — le motif déjà employé par .acces (cf. --festif-wash).

   Structure attendue (cf. pp-bridge.js) :
     .wc-pp > .rail-track > article.card > (.card-media | .card-media.ph) + .card-body
   ================================================================================ */

.wc-pp{
  /* ---- Couche d'alias : le festif définit --principale/--titre/--corps, le
     colis institutionnel et l'aperçu généré ne connaissent que les tokens
     Saytup. La chaîne de repli couvre les deux sans branche JS. ---- */
  --pp-accent: var(--principale, var(--couleur-principale));
  --pp-titres: var(--titre, var(--police-titres));
  --pp-corps:  var(--corps,  var(--police-corps));

  /* ---- Nuances dérivées de l'accent (mêmes formules que .acces, qui les
     déclare scopées et donc indisponibles ici). ---- */
  --pp-wash: color-mix(in oklab, var(--pp-accent)  8%, #fff);
  --pp-soft: color-mix(in oklab, var(--pp-accent) 20%, #fff);
  --pp-deep: color-mix(in oklab, var(--pp-accent) 72%, #000);
  --pp-text: color-mix(in oklab, var(--pp-accent) 56%, #000);

  /* ---- Gabarit figé des maquettes : même largeur, même hauteur de zone
     image pour TOUTES les cartes des deux rails. ---- */
  --pp-carte-w: 288px;
  --pp-media-h: 360px;

  position: relative;
}

/* Conteneur hote (.news-grid, .carousel-track) : sa propre mise en page (grid /
   flex + overflow:auto) s'appliquerait au rail PP qu'on y depose — le wrapper
   deviendrait un item flex etire a la largeur du contenu et la nav partirait
   hors ecran. On la neutralise. Meme specificite que .news-grid/.carousel-track
   mais declaree APRES dans styles.css → c'est cette regle qui gagne. */
.wc-pp-host{ display: block; overflow: visible; }

/* ---------------------------------------------------------------- rail */
.wc-pp .rail-track{
  display: flex; align-items: stretch; gap: 20px;
  overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.wc-pp .rail-track::-webkit-scrollbar{ display: none; }

.wc-pp .rail-nav{ display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.wc-pp .rnav{
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-3); box-shadow: var(--shadow-xs); cursor: pointer;
  transition: border-color .2s, color .2s;
}
.wc-pp .rnav:hover{ border-color: var(--pp-accent); color: var(--pp-accent); }
.wc-pp .rnav .ti{ font-size: 20px; }

/* ---------------------------------------------------------------- carte */
.wc-pp .card{
  flex: 0 0 var(--pp-carte-w); width: var(--pp-carte-w);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--card-radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, border-color .2s;
}
.wc-pp .card:hover{ box-shadow: var(--shadow-md); border-color: var(--pp-soft); }

/* Zone image de taille FIXE. Le fond flouté (même src, aria-hidden) remplit la
   zone ; l'image réelle se pose dessus en `contain` → une affiche portrait
   s'affiche ENTIÈRE et centrée, un paysage remplit la largeur, jamais déformé. */
.wc-pp .card-media{
  position: relative;
  height: var(--pp-media-h); flex: 0 0 var(--pp-media-h);
  background: var(--surface-2); overflow: hidden;
}
.wc-pp .card-media-bg{
  position: absolute; inset: -8%; width: 116%; height: 116%;
  object-fit: cover; filter: blur(20px) saturate(.8); opacity: .5;
}
.wc-pp .card-media-img{
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: contain;
}

.wc-pp .card-body{
  padding: 18px 20px 20px;
  display: flex; flex-direction: column; gap: 9px; flex: 1 1 0;
}

/* Date d'actualité (JJ/MM/AAAA) */
.wc-pp .card-date{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--pp-corps); font-size: 13px; font-weight: 500;
  color: var(--ink-4);
}
.wc-pp .card-date .ti{ font-size: 15px; }

/* Pastille de dates d'agenda. Texte --pp-text (56 % d'accent mêlé de noir) sur
   fond --pp-wash : plus foncé que l'accent brut, donc contraste AA garanti quelle
   que soit la couleur de la commune. */
.wc-pp .card-when{
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--pp-titres); font-weight: 700; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--pp-text); background: var(--pp-wash);
  border: 1px solid var(--pp-soft); border-radius: 8px;
  padding: 6px 11px;
}
.wc-pp .card-when .ti{ font-size: 15px; opacity: .75; }
.wc-pp .card-when .sep{ color: var(--ink-4); font-weight: 600; }

.wc-pp .card h3{
  margin: 0;
  font-family: var(--pp-titres); font-size: 17px; line-height: 1.28;
  letter-spacing: -.01em; color: var(--ink);
  text-wrap: pretty; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Extrait — le pont ne l'émet que s'il existe (~40 % des publications PP n'ont
   pas de texte) : pas de règle de « bloc vide » à prévoir ici. */
.wc-pp .card-text{
  margin: 0;
  font-family: var(--pp-corps); font-size: 14px; color: var(--ink-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Lieu d'agenda — conditionnel (event.address est souvent null côté PP). */
.wc-pp .card-lieu{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--pp-corps); font-size: 13px; color: var(--ink-4);
}
.wc-pp .card-lieu .ti{ font-size: 15px; }

/* Événement annulé : marqué, pas masqué. */
.wc-pp .card-annule{
  align-self: flex-start;
  font-family: var(--pp-titres); font-weight: 700; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--danger);
  border-radius: 6px; padding: 3px 8px;
}
.wc-pp .card.is-annule .card-media-img{ filter: grayscale(.7); }
.wc-pp .card.is-annule .card-media-bg{ filter: grayscale(.7) blur(20px) saturate(.8); }

.wc-pp .card-link{
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--pp-titres); font-weight: 600; font-size: 14px;
  color: var(--pp-accent); text-decoration: none;
  padding-top: 6px;
}
.wc-pp .card-link:hover{ text-decoration: underline; }
.wc-pp .card-link .ti{ font-size: 17px; transition: transform .2s; }
.wc-pp .card:hover .card-link .ti{ transform: translateX(3px); }

/* ------------------------------------------------------- placeholder sans visuel
   Occupe EXACTEMENT la même zone qu'une image. Le titre reste dans .card-body :
   rien d'écrit ici sauf le libellé de rubrique et l'icône. */
.wc-pp .ph{
  display: flex; flex-direction: column; padding: 22px;
  position: relative; overflow: hidden;
  color: var(--pp-text);
}
.wc-pp .ph > *{ position: relative; z-index: 1; }
.wc-pp .ph-kind{
  font-family: var(--pp-titres); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; opacity: .6;
}
.wc-pp .ph-ic{ flex: 1 1 0; display: grid; place-items: center; }
.wc-pp .ph-ic .ti{ font-size: 64px; opacity: .4; }

/* Teinte 1 (claire) */
.wc-pp .ph--clair{ background: linear-gradient(165deg, var(--pp-wash), var(--pp-soft)); }

/* Teinte 2 (foncée) — n'apparaît que quand deux placeholders se suivent.
   La borne haute est déjà mêlée de noir : le blanc reste lisible même si la
   commune a une couleur claire (learning .card-cta). */
.wc-pp .ph--fonce{
  background: linear-gradient(165deg,
    color-mix(in oklab, var(--pp-accent) 88%, #000), var(--pp-deep));
  color: #fff;
}
.wc-pp .ph--fonce .ph-kind{ opacity: .75; }
.wc-pp .ph--fonce .ph-ic .ti{ opacity: .5; }

/* Décor confettis : posé par le pont dans les DEUX ambiances, masqué ici.
   Le colis festif le rallume en fin de son propre styles.css. */
.wc-pp .ph-conf{ display: none; }

/* ---------------------------------------------------------------- mobile */
@media (max-width: 640px){
  .wc-pp{ --pp-carte-w: 78vw; --pp-media-h: 300px; }
  .wc-pp .rail-track{ gap: 14px; }
}

@media (prefers-reduced-motion: reduce){
  .wc-pp .rail-track{ scroll-behavior: auto; }
  .wc-pp .card,
  .wc-pp .rnav,
  .wc-pp .card-link .ti{ transition: none; }
  .wc-pp .card:hover .card-link .ti{ transform: none; }
}

/* =================================================================== GUIDE DÉMARCHES (cartes-choix)
   Transforme les deux éléments Lien de la rangée grid-2 de la page « Guide des
   démarches » en deux CARTES DE CHOIX. Le markup est produit par Saytup et n'est
   pas touché : chaque .pageElement de la rangée contient un <a> ENFANT DIRECT,
   c'est ce <a> qui devient la carte.

   Scope : body.guide_des_demarches — classe injectée par Saytup au rendu (dérivée
   du slug ; le <body> du shell n'en porte aucune). Rien ne fuit hors de cette page.

   ⚠️ Le scope reprend « :not(:has(#contenu-principal #hero)) .contenu-principal #text »
   à dessein, et ce n'est pas décoratif : les règles de grille de contenu
   (l.2138-2149) portent ce préfixe, dont le :has() compte DEUX id de spécificité,
   plus #text. Mesuré : sans lui, align-items:stretch est battu par le
   align-items:start existant, et le passage en une colonne l'est aussi.

   ⚠️ Les icônes passent par mask-image, PAS par background-image. Mesuré sur cette
   page : un data-URI en background-image avec stroke='currentColor' rend
   rgb(0,0,0) — currentColor ne traverse pas la frontière du document SVG. Le mask
   rend exactement rgb(30,64,175), soit var(--couleur-principale). Le « black » des
   SVG ci-dessous n'est donc PAS une couleur de design : dans un masque seul le
   canal alpha compte, la couleur vient de background-color. */

/* A — LA GRILLE. Colonnes déjà fluides (repeat(2,1fr), l.2148) et gap déjà
   var(--gutter) : on ne redéclare ni l'un ni l'autre. Seul changement nécessaire,
   align-items:stretch, pour que les deux cartes aient la MÊME HAUTEUR quel que
   soit le sous-texte (la règle générique impose start). */
body.guide_des_demarches:not(:has(#contenu-principal #hero)) .contenu-principal #text .ligneElement.grid-2:has(> .pageElement > a){
  align-items:stretch;
}
/* La cellule devient un conteneur : le <a> s'y étire en hauteur comme en largeur.
   Les deux classes de lien sont couvertes — interne (LinkIn) et externe (LinkOut) :
   c'est un choix de back-office qui peut basculer d'un côté ou de l'autre, et la
   carte doit tenir dans les deux cas. */
body.guide_des_demarches .contenu-principal #text .grid-2 .pageElement:has(> a.LinkIn),
body.guide_des_demarches .contenu-principal #text .grid-2 .pageElement:has(> a.LinkOut){
  display:flex;
}

/* B — LE <a> EN CARTE. Esprit du patron a.LinkFile (l.2337-2353) : surface, filet,
   rayon, ombre, et soulèvement au survol. */
body.guide_des_demarches .contenu-principal #text .grid-2 .pageElement > a.LinkIn,
body.guide_des_demarches .contenu-principal #text .grid-2 .pageElement > a.LinkOut{
  flex:1 1 auto; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:flex-start; gap:.875rem;
  padding:1.75rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--card-radius);
  box-shadow:var(--shadow-sm);
  color:var(--ink); text-decoration:none;
  font-family:var(--police-titres); font-weight:600; font-size:1.1875rem; line-height:1.3;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
body.guide_des_demarches .contenu-principal #text .grid-2 .pageElement > a.LinkIn:hover,
body.guide_des_demarches .contenu-principal #text .grid-2 .pageElement > a.LinkOut:hover{
  transform:translateY(-4px); box-shadow:var(--shadow-lg);
  border-color:var(--couleur-principale); text-decoration:none;
}
/* RGAA : anneau de focus visible au clavier */
body.guide_des_demarches .contenu-principal #text .grid-2 .pageElement > a.LinkIn:focus-visible,
body.guide_des_demarches .contenu-principal #text .grid-2 .pageElement > a.LinkOut:focus-visible{
  outline:2px solid var(--couleur-principale); outline-offset:2px;
}

/* C — LA PASTILLE. Disque de 56 px en --couleur-principale, glyphe DÉCOUPÉ dedans
   (deux couches de masque composées en exclude) : la surface blanche de la carte
   apparaît à travers le tracé. Une couleur, un token, aucun hex.
   Différenciation par HREF et non par ordre : reste juste si le back-office
   réordonne les deux éléments ou change le type de lien. */
body.guide_des_demarches .contenu-principal #text .grid-2 .pageElement > a::before{
  content:""; flex:0 0 auto; width:3.5rem; height:3.5rem; border-radius:50%;
  background-color:var(--couleur-principale);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center, center; mask-position:center, center;
  -webkit-mask-size:auto, 1.75rem 1.75rem; mask-size:auto, 1.75rem 1.75rem;
  -webkit-mask-composite:xor; mask-composite:exclude;
}
/* Particulier — silhouette « user » */
body.guide_des_demarches .contenu-principal #text .grid-2 .pageElement:has(> a[href*="particulier"]) > a::before{
  -webkit-mask-image:linear-gradient(black,black), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
          mask-image:linear-gradient(black,black), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
/* Entreprise — silhouette « building » */
body.guide_des_demarches .contenu-principal #text .grid-2 .pageElement:has(> a[href*="entreprise"]) > a::before{
  -webkit-mask-image:linear-gradient(black,black), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V7l8-4v18'/%3E%3Cpath d='M19 21V11l-6-4'/%3E%3Cpath d='M9 9h.01'/%3E%3Cpath d='M9 13h.01'/%3E%3Cpath d='M9 17h.01'/%3E%3C/svg%3E");
          mask-image:linear-gradient(black,black), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V7l8-4v18'/%3E%3Cpath d='M19 21V11l-6-4'/%3E%3Cpath d='M9 9h.01'/%3E%3Cpath d='M9 13h.01'/%3E%3Cpath d='M9 17h.01'/%3E%3C/svg%3E");
}

/* D — SOUS-TEXTE. Le libellé saisi en BO (« Un particulier ») reste le titre de la
   carte ; le sous-texte est ajouté en ::after, sur le <a> lui-même.
   ⚠️ Non vérifié ici : la spec fait entrer le contenu généré dans le calcul du nom
   accessible, et Chromium/Firefox l'y incluent — le lien se lirait alors « Un
   particulier Vos démarches personnelles en ligne ». Ça n'a PAS été mesuré (l'API
   d'arbre a11y n'était pas disponible dans l'outillage). Le libellé du <a> et son
   title="Un particulier" suffisent de toute façon à nommer le lien : le sous-texte
   est un plus, pas le porteur du sens.
   background-image:none couvre le cas où l'icône « nouvelle fenêtre » native de
   .LinkOut (l.2331-2334) redeviendrait applicable : elle se pose sur ce même
   ::after, elle serait donc neutralisée ici plutôt que cumulée. */
body.guide_des_demarches .contenu-principal #text .grid-2 .pageElement > a::after{
  background-image:none; width:auto; height:auto; margin:0;
  font-family:var(--police-corps); font-weight:400; font-size:.9375rem; line-height:1.45;
  color:var(--ink-2);
}
body.guide_des_demarches .contenu-principal #text .grid-2 .pageElement:has(> a[href*="particulier"]) > a::after{
  content:"Vos démarches personnelles en ligne";
}
body.guide_des_demarches .contenu-principal #text .grid-2 .pageElement:has(> a[href*="entreprise"]) > a::after{
  content:"Vos démarches professionnelles en ligne";
}

/* Responsive : une seule colonne sous 700px. La règle générique ne fait tomber
   grid-2 à une colonne qu'à 480px (l.2176) — deux cartes à ~230px de large avec
   une pastille de 56px et deux lignes de texte seraient à l'étroit. */
@media (max-width:700px){
  body.guide_des_demarches:not(:has(#contenu-principal #hero)) .contenu-principal #text .ligneElement.grid-2:has(> .pageElement > a){
    grid-template-columns:1fr;
  }
}

@media (prefers-reduced-motion:reduce){
  body.guide_des_demarches .contenu-principal #text .grid-2 .pageElement > a.LinkIn,
  body.guide_des_demarches .contenu-principal #text .grid-2 .pageElement > a.LinkOut{ transition:none; }
  body.guide_des_demarches .contenu-principal #text .grid-2 .pageElement > a.LinkIn:hover,
  body.guide_des_demarches .contenu-principal #text .grid-2 .pageElement > a.LinkOut:hover{ transform:none; }
}

/* =================================================================== CO-MARQUAGE (iframe démarches)
   Habille l'élément de contenu NATIF « iFrame » de Saytup
   (_elements/content/iFrame.html → <div class="elementIFrame" mXattribut="class:class">)
   lorsque la mairie lui donne la classe wc-comarquage en back-office.
   Aucun markup n'est produit ici : ni wrapper collé à la main, ni HTML libre.

   POURQUOI L'ÉLÉMENT iFrame ET PAS UN ÉLÉMENT TEXTE : l'élément Texte enveloppe le
   contenu collé dans un <p>, et ce <p> tombe sous le cap max-width:72ch
   (l.2260-2262). C'est le défaut mesuré sur le site Golfech, où l'iframe est bridée
   à 768,7 px dans une colonne de 852 px. .elementIFrame n'est ni .elementText, ni
   .structured_text_semantique_text, ni #text.text : le cap ne l'atteint pas, et il
   n'y a donc rien à neutraliser.

   ── LA HAUTEUR EST UNE VALEUR ASSUMÉE, MAIS ELLE EST MESURÉE ─────────
   Il n'existe aucun pont de hauteur en service : ni le WordPress n'émet la sienne,
   ni personne ne l'écoute côté client (mesuré sur le plugin comarquage-baseo :
   0 postMessage, 0 ResizeObserver, 0 scrollHeight). Les valeurs ci-dessous viennent
   donc d'un relevé du contenu réel, cadre déplié et toutes images chargées :

       largeur du cadre     colonnes internes    hauteur réelle
       1 190 px  (vp 1440)          3            2 538 px   ← particuliers
       1 190 px  (vp 1440)          3            2 237 px   ← entreprises
       1 050 px  (vp 1100)          3            2 536 px
         950 px  (vp 1000)          2            3 254 px
         850 px  (vp  900)          2            3 253 px
         718 px  (vp  768)          1            5 886 px
         352 px  (vp  390)          1            6 086 px

   Trois plateaux nets, d'où trois paliers. ⚠️ La bascule 3→2 colonnes se joue entre
   1 000 et 1 100 px de VIEWPORT, pas à 900 px comme le supposait la première version
   de cette section : à 900 px la hauteur réelle est 3 253 px, un palier unique à
   2 650 px y aurait tronqué 600 px.

   ⚠️ ÉLARGIR NE SERT À RIEN AU-DELÀ DE ~1 050 px. Le WordPress bride sa propre
   colonne de contenu à 645 px (--wp--style--global--content-size), donc la grille de
   tuiles reste à 645 px quelle que soit la largeur du cadre : 2 536 px à 1 050 px
   comme 2 538 px à 1 190 px. Le 4e palier du plugin (4 colonnes ≥1 280 px de cadre)
   est hors d'atteinte, --maxw:1240 plafonnant le cadre à 1 190 px.

   Une valeur trop courte ne perd rien — l'attribut scrolling du BO vaut « auto »,
   un ascenseur interne prend le relais — mais un ascenseur imbriqué se manipule mal,
   surtout au doigt. Une valeur trop longue laisse du vide sous le contenu. Les trois
   réglages couvrent la PLUS HAUTE des deux pages, plus ~4 % : */
.elementIFrame.wc-comarquage{
  --comarquage-h-desktop:2650px;   /* ← RÉGLAGE 1 — ≥1100px      (couvre les 2 538 px mesurés) */
  --comarquage-h-tablet:3400px;    /* ← RÉGLAGE 2 — 768 à 1099px (couvre les 3 254 px mesurés) */
  --comarquage-h-mobile:6300px;    /* ← RÉGLAGE 3 — <768px       (couvre les 6 086 px mesurés) */
}

/* A — LE CONTENEUR. À PLAT, sans cadre : le co-marquage s'intègre au fond de page
   plutôt que de s'annoncer comme un encart rapporté. Ne restent que les marges.
   Ni width:100% ni max-width ne sont nécessaires : .elementIFrame est un <div>,
   donc déjà pleine largeur de son .pageElement, et aucune règle du fichier ne le
   contraint (vérifié : 0 occurrence de .elementIFrame hors de cette section).
   Retirés sciemment — background, border, border-radius, box-shadow et le
   overflow:hidden qui n'existait que pour découper les angles du rayon. */
.elementIFrame.wc-comarquage{
  margin-inline:auto; margin-block:1.5rem;
}

/* B — L'IFRAME. display:block supprime l'interligne de la boîte inline, qui
   laisserait sinon quelques pixels de blanc sous le cadre. Mesuré sur la page
   restée en élément Texte : l'iframe y est en display:inline, et c'est ce qui la
   laisse à 150px — la hauteur par défaut du navigateur.

   ⚠️ AUCUN !important SUR height, ET C'EST VOLONTAIRE — c'est le hook du pont.
   Un style inline l'emporte sur toute règle de feuille non-!important : le jour où
   comarquage-bridge.js existera, il lui suffira de poser

       iframe.style.height = hauteurRecue + 'px'

   pour que la mesure réelle remplace le repli, sans toucher à ce CSS. Mettre
   !important ici verrouillerait la valeur fixe et rendrait le pont inopérant.

   (Pas de height:attr(data-height px) : attr() typé hors de la propriété content
   n'est implémenté que sur Chromium très récent — ni Firefox ni Safari. Le style
   inline, lui, marche partout et gagne sans condition.) */
.elementIFrame.wc-comarquage iframe{
  display:block; width:100%; border:0;
  height:var(--comarquage-h-desktop);
}
/* Les deux paliers descendants. L'ordre compte et il est délibéré : à spécificité
   égale, c'est la DERNIÈRE règle déclarée qui gagne — un media query n'ajoute aucune
   spécificité. Sous 767px les deux requêtes sont vraies, et c'est bien 767 qui
   l'emporte parce qu'il est écrit en second. Inverser les deux blocs casserait le
   palier mobile en silence. */
@media (max-width:1099px){
  /* 1099px, et non 900 : c'est le seuil réel de bascule 3→2 colonnes du co-marquage.
     Il tient à la largeur de SON viewport (donc du cadre), pas du navigateur —
     mesuré, le cadre passe sous 1024px entre 1100 et 1000px de viewport. */
  .elementIFrame.wc-comarquage iframe{ height:var(--comarquage-h-tablet); }
}
@media (max-width:767px){
  /* Bascule 2→1 colonne : le cadre descend sous les 768px du plugin. La hauteur
     double presque — 5 886px dès 768px de viewport, 6 086px à 390px. */
  .elementIFrame.wc-comarquage iframe{ height:var(--comarquage-h-mobile); }
}

/* C — NON-CONFLIT avec les deux seules règles iframe du fichier, vérifié :
     l.1454  body:has(#contenu-principal #hero) .map-card .wc-map iframe
             → double verrou : accueil uniquement, ET ancêtre .map-card .wc-map.
     l.2463  body:not(:has(#contenu-principal #hero)) .contenu-principal .elementVideoFile iframe
             → exige un ancêtre .elementVideoFile ; ses !important y sont confinés.
   Aucune ne matche une iframe dans .elementIFrame.wc-comarquage, et les règles
   ci-dessus n'atteignent ni .map-card .wc-map ni .elementVideoFile.
   ⚠️ Corollaire : ne PAS déposer le co-marquage dans un élément Vidéo — son
   conteneur impose un ratio 16:9 en dur (l.2460 : padding-bottom:56.25%;
   height:0; overflow:hidden) qui écraserait un contenu de 3 000 px. */

/* D — PLEINE LARGEUR : rien d'actif ici. Le retrait de la colonne de rubrique passe
   par le BO (gabarit « contenu seul ») : le mx:bloc rightbar disparaît alors du DOM
   et la règle l.1948 — .page-layout:not(:has(#rightbar)){display:block} — fait
   basculer la pleine largeur toute seule, sans une ligne de CSS.

   FILET DE SÉCURITÉ OPTIONNEL, si le BO ne le permet pas. À décommenter tel quel.
   Masquer #rightbar ne suffit PAS : :has(#rightbar) reste vrai si l'élément est
   seulement en display:none, donc l.1948 ne se déclenche pas — il faut reprendre
   les trois déclarations. Et le préfixe :not(:has(#contenu-principal #hero)) est
   OBLIGATOIRE : son :has() compte DEUX id de spécificité, un scope sur la seule
   classe de body serait battu (piège déjà rencontré sur les cartes du Guide).

   body.un_particulier:not(:has(#contenu-principal #hero)) #rightbar,
   body.une_entreprise:not(:has(#contenu-principal #hero)) #rightbar{ display:none; }
   body.un_particulier:not(:has(#contenu-principal #hero)) .page-layout,
   body.une_entreprise:not(:has(#contenu-principal #hero)) .page-layout{ display:block; }
   body.un_particulier:not(:has(#contenu-principal #hero)) #contenu-principal,
   body.une_entreprise:not(:has(#contenu-principal #hero)) #contenu-principal{ width:100%; max-width:100%; }
*/

/* =================================================================== PAGE PLEINE LARGEUR (sans colonne rubrique)
   Fait passer UNE page en pleine largeur, pilotée par une classe posée en
   back-office : wc-page-pleine. Cas d'usage immédiat, les pages co-marquage
   /un-particulier/ et /une-entreprise/, où la colonne de rubrique coûte 340 px
   au contenu (mesuré) sans rien apporter — elle y affiche même l'arborescence
   d'une AUTRE rubrique (« Votre mairie »).

   ⚠️ À VÉRIFIER EN BACK-OFFICE : que la classe de page atterrit bien sur le <body>.
   Ce n'est pas déterminable depuis le dépôt. Ce qui est établi : le <body> du shell
   ne porte AUCUNE classe (structure/mainPage.html l.33-38, uniquement des data-*),
   donc toutes celles observées sont injectées par Saytup au rendu —
   « layoutLeftContentRight » (gabarit) et « un_particulier » (slug). Si la classe
   saisie en BO atterrit ailleurs que sur le <body>, voir la variante commentée en
   fin de section.

   ⚠️ POURQUOI TROIS RÈGLES ET PAS UNE. Masquer #rightbar seul ne bascule RIEN, et
   c'est mesuré sur la page de test : :has() teste la présence dans l'arbre, pas la
   visibilité. Avec un display:none, .page-layout:not(:has(#rightbar)) (l.1948)
   reste inerte, la grille garde sa piste de 300 px, et on obtient le pire cas —
   contenu toujours bridé à 852 px ET colonne fantôme de 300 px. Relevé :

       #rightbar présent               :has → true  · grid 852px 300px · main  852px
       #rightbar en display:none       :has → true  · grid 852px 300px · main  852px  ← inchangé
       #rightbar retiré du DOM         :has → false · block            · main 1192px

   Le CSS ne pouvant pas retirer un nœud, on ne s'appuie pas sur l.1948 : on
   NEUTRALISE la grille directement. D'où le trio, qui réplique le jeu « accueil »
   (l.1928-1932) en le déclenchant sur la classe au lieu du #hero.

   ⚠️ CE QU'ON NE MASQUE PAS, contrairement à l'accueil : #rubricPicture et
   .fil-ariane restent en place. Sur ces pages le bandeau porte le h1.rubric-title
   (seul h1 du document — mesuré) et le fil d'ariane situe la page dans une
   arborescence à quatre niveaux. Les retirer coûterait le titre de la page.

   SPÉCIFICITÉ — le préfixe :not(:has(#contenu-principal #hero)) n'est pas
   décoratif. La générique à battre est l.1943 :
       body:not(:has(#contenu-principal #hero)) .page-layout{ display:grid; … }
   Son :not() prend la spécificité de son argument le plus fort, soit
   :has(#contenu-principal #hero) = DEUX id → (2,1,2) au total. Le même préfixe
   plus la classe donne (2,2,2), qui l'emporte. Un scope sur la seule classe de
   body serait battu — piège déjà rencontré sur les cartes du Guide. */

body.wc-page-pleine:not(:has(#contenu-principal #hero)) #rightbar{ display:none; }
body.wc-page-pleine:not(:has(#contenu-principal #hero)) .page-layout{ display:block; }
/* Défensif, et assumé comme tel : la mesure montre que le passage en block suffit
   à rendre les 1 192 px (= --maxw moins les deux gouttières). On aligne quand même
   sur le jeu « accueil » l.1931, pour qu'une future règle qui plafonnerait le
   <main> ne reprenne pas la main sans qu'on s'en aperçoive. */
body.wc-page-pleine:not(:has(#contenu-principal #hero)) #contenu-principal{ width:100%; max-width:100%; }

/* VARIANTE, si la classe BO n'atterrit PAS sur le <body> mais dans le contenu
   (sur un .pageElement, une .ligneElement, un élément quelconque). À décommenter
   à la place du trio ci-dessus — pas en plus, sinon les deux jeux cohabitent.
   :has() ne regarde que les DESCENDANTS, d'où deux sélecteurs pour couvrir les
   deux emplacements possibles. Déclencheur plus large : n'importe quel élément
   portant la classe fait basculer la page entière — c'est bien l'intention du nom,
   mais ça se documente.

   body.wc-page-pleine:not(:has(#contenu-principal #hero)) #rightbar,
   body:has(.wc-page-pleine):not(:has(#contenu-principal #hero)) #rightbar{ display:none; }
   body.wc-page-pleine:not(:has(#contenu-principal #hero)) .page-layout,
   body:has(.wc-page-pleine):not(:has(#contenu-principal #hero)) .page-layout{ display:block; }
   body.wc-page-pleine:not(:has(#contenu-principal #hero)) #contenu-principal,
   body:has(.wc-page-pleine):not(:has(#contenu-principal #hero)) #contenu-principal{ width:100%; max-width:100%; }
*/


/* =================================================================== ONGLETS tabsBeautiful
   Habille le module natif Saytup « tableau -> onglets ». Le JS natif (functions.js,
   tabsBeautifulManager l.1005) transforme le <table> source en :
     div.elementText.tabsBeautiful.mod
       - ul.tabsBeautifulHeadings > li.tab                 (ligne 1 du tableau)
       - ul.tabsBeautifulContents > li.tabContent > div    (ligne 2 du tableau)
   et DETRUIT le tableau. `.active` est posee par le JS sur le li.tab ET sur le li.tabContent
   (relu dans tabsBeautifulInit, pas devine). Aucune de ces classes n'avait de CSS dans le
   theme. functions.js n'est PAS touche (gabarit natif Saytup).

   -- POURQUOI CE N'EST PAS QU'UN HABILLAGE -------------------------------------------------
   Sur desktop (>=800px) le switch d'onglets etait MORT : tabsBeautifulOnClick fait tout son
   travail dans un `.one(transitionEvent, ...)` ou transitionEvent = 'transitionend'. Sans
   transition declaree l'evenement ne part jamais, le clic ne fait rien, et les trois contenus
   restent affiches ensemble. Sur mobile (<800px) tabsBeautifulResponsive pose les hauteurs EN
   INLINE et anime en jQuery : il n'a jamais eu besoin de CSS et fonctionnait deja.

   -- POURQUOI LA TRANSITION PORTE SUR opacity, ET PAS SEULEMENT SUR height -----------------
   MESURE sur /vivre-decouvrir-et-bouger/transport-en-commun/, trois variantes essayees :
     1. `transition:height` + `.tabContent{height:0}` / `.tabContent.active{height:auto}`
        -> masque bien (1 contenu visible) mais AUCUN transitionend : clic toujours mort.
        Deux causes cumulees : tabsBeautifulInit pose un `height:auto` INLINE sur le premier
        contenu (l'inline bat la regle CSS, la hauteur ne change donc pas au retrait de
        .active), et `height:auto` n'est de toute facon pas interpolable.
     2. la meme chose en `height:0` important : l'inline est bien battu, mais auto<->0 reste
        non interpolable -> toujours aucun transitionend, et 0 contenu visible apres clic.
     3. `transition:height, opacity` + `opacity:0` / `.active{opacity:1}` -> transitionend
        recus (li0:opacity, puis li1:height, li1:opacity), onglet ET contenu basculent. RETENU.
   opacity est interpolable et change bel et bien au retrait de .active : c'est elle qui fait
   tomber l'evenement. Le `transition:height` reste utile — le callback natif ecrit ensuite des
   hauteurs en px sur le li (mesure : height 631px), que la transition anime proprement.

   -- LA DUREE EST FONCTIONNELLE, PAS DECORATIVE --------------------------------------------
   Consequence : PAS de `transition:none` sous prefers-reduced-motion. Une duree nulle n'emet
   pas transitionend et recasserait le module. On descend a 10ms : imperceptible, evenement
   conserve.

   -- SCOPE : POURQUOI LE PREFIXE CONTENU EST OBLIGATOIRE ICI -------------------------------
   `.tabsBeautiful` est un `.elementText`. Les regles de listes editoriales (l.2356-2366)
   ciblent `.elementText ul` / `ul li` / `ul li::before` et valent 2 ID : sans prefixe elles
   volaient le padding-left des onglets (22,4px mesures au lieu de 18) et posaient une PUCE de
   6px devant chaque libelle. On reprend donc leur prefixe exact pour les battre en
   specificite. Les listes editoriales A L'INTERIEUR des contenus d'onglets ne sont pas
   touchees : la neutralisation ne porte que sur les `> ul > li` enfants directs du module.

   -- PIEGE DE SYNTAXE RENCONTRE EN ECRIVANT CETTE SECTION ----------------------------------
   Ne jamais ecrire une paire etoile-slash dans ces commentaires (ex. une enumeration de
   tokens abregee) : elle FERME le commentaire, et le parseur avale alors la premiere regle
   qui suit. C'est exactement ce qui neutralise deja, en silence, la regle qui suit le
   commentaire de la l.239 du thème.

   100% tokens (couleurs via --couleur-principale / --ink-2 / --line + color-mix),
   zero hex, zero rgb, zero !important.
   CLAVIER NON TRAITE ICI : .tab est un <li> sans role ni tabindex ; role="tablist"/"tab"/
   "tabpanel" et la navigation aux fleches sont un lot RGAA a part. */

/* -- A) NEUTRALISER le traitement de listes editoriales sur les 2 ul du module -- */
body:not(:has(#contenu-principal #hero)) .contenu-principal .tabsBeautiful > ul{
  padding-left:0; margin:0; list-style:none;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .tabsBeautiful > ul > li{
  position:static; margin-bottom:0;                /* annule le position:relative + margin des li editoriaux */
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .tabsBeautiful > ul > li::before{
  content:none;                                    /* retire la puce ronde de 6px posee sur tout li de contenu */
}

/* -- A-ter) RENDRE LA TYPO EDITORIALE AU CONTENU D'ONGLET ---------------------------------
   La regle wrapper de la l.2274 vise `.elementText > div` : elle habillait le contenu quand
   il etait enfant DIRECT du bloc texte. tabsBeautifulInit le REPARENTE dans
   `li.tabContent > div` (un div sans classe qu'il cree lui-meme), et le `>` ne matche donc
   plus. Mesure avant : 16px / interligne 25,6px, herites du body — au lieu des 17px / 1,75
   que recoit n'importe quel autre bloc texte de contenu.
   UN SEUL selecteur suffit pour les deux modes : verifie en rendu, `.tabsBeautiful .tabContent
   > div` matche a 1440px (parent ul.tabsBeautifulContents) ET a 390px (parent ul.tabsMobile,
   apres le reparentage de tabsBeautifulResponsive) — on ne nomme pas le ul intermediaire,
   c'est justement lui qui change.
   La couleur etait deja la bonne par HASARD (--ink-2 est aussi celle du body) : on la pose
   explicitement pour ne pas en dependre.
   On ne touche PAS aux h3/p internes : leur style editorial (titre bleu, cap 72ch) continue
   de s'appliquer, c'est voulu. Le cap 72ch reste porte par les <p> eux-memes (l.2354) et
   n'entre pas en conflit — il s'elargit simplement avec la nouvelle taille de texte, comme
   dans tous les autres blocs de contenu. */
body:not(:has(#contenu-principal #hero)) .contenu-principal .tabsBeautiful .tabContent > div{
  font-size:1.0625rem; line-height:1.75; color:var(--ink-2);
}

/* -- B) LA BARRE D'ONGLETS (les deux modes) -- */
body:not(:has(#contenu-principal #hero)) .contenu-principal .tabsBeautiful .tabsBeautifulHeadings{
  display:flex; flex-wrap:wrap; gap:2px 4px;
  margin-bottom:1.25rem;
  border-bottom:1px solid var(--line);             /* rail sur lequel s'appuie l'onglet actif */
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .tabsBeautiful .tab{
  cursor:pointer;                                  /* le JS ecoute le clic sur ce li — on le montre */
  padding:10px 18px; font-family:var(--police-titres); font-weight:600; font-size:.9375rem;
  line-height:1.3; color:var(--ink-2);
  border-bottom:3px solid transparent;             /* reserve la place du marqueur -> pas de saut au switch */
  border-radius:var(--btn-radius) var(--btn-radius) 0 0;
  transition:color .15s, border-color .15s, background-color .15s;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .tabsBeautiful .tab:hover{
  color:var(--couleur-principale);
  background:color-mix(in srgb, var(--couleur-principale) 6%, transparent);
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .tabsBeautiful .tab.active{
  color:var(--couleur-principale); background:transparent;
  box-shadow:none;                                 /* cf. bloc A-bis : residu de la pastille KIOSQUE */
}
/* A-bis) NEUTRALISER LA FUITE DU COMPOSANT « KIOSQUE ». Le theme declare `.tab` SANS AUCUN
   SCOPE (l.823-828) pour les pastilles du kiosque d'accueil. Cette classe est la meme que
   celle que le JS des onglets pose sur ses li : le kiosque habillait donc deja, a son insu,
   les onglets tabsBeautiful. Mesure sur la CSS deployee : radius 999px, padding 9px 16px,
   fond blanc + ombre sur l'actif, et une barre cyan de 24x3px en ::after a bottom:-9px.
   Les trois premiers sont recouverts par le bloc B ; l'ombre et le ::after demandent une
   neutralisation explicite. Le kiosque lui-meme n'est pas touche : tout est scope
   `.tabsBeautiful`. */
body:not(:has(#contenu-principal #hero)) .contenu-principal .tabsBeautiful .tab.active::after{
  content:none;
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .tabsBeautiful .tabContent{
  padding:0;                                       /* reprend le padding-left:1.4rem editorial */
}

/* -- C) DESKTOP (>=800px) : complement exact du matchMedia('(max-width: 799px)') du JS -- */
@media (min-width:800px){
  /* le marqueur de l'onglet actif recouvre le rail (1px du border-bottom du ul) */
  body:not(:has(#contenu-principal #hero)) .contenu-principal .tabsBeautiful .tabsBeautifulHeadings > .tab{
    margin-bottom:-1px;
  }
  body:not(:has(#contenu-principal #hero)) .contenu-principal .tabsBeautiful .tabsBeautifulHeadings > .tab.active{
    border-bottom-color:var(--couleur-principale);
  }
  /* overflow:hidden rend le height:0 reellement masquant ; la transition sur opacity est le
     DECLENCHEUR de transitionend (cf. en-tete), celle sur height lisse les hauteurs px que le
     callback natif ecrit ensuite en inline. */
  body:not(:has(#contenu-principal #hero)) .contenu-principal .tabsBeautiful .tabsBeautifulContents > .tabContent{
    overflow:hidden; height:0; opacity:0;
    transition:height .3s, opacity .3s;
  }
  body:not(:has(#contenu-principal #hero)) .contenu-principal .tabsBeautiful .tabsBeautifulContents > .tabContent.active{
    height:auto; opacity:1;
  }
}

/* -- D) MOBILE (<800px) : le JS pilote tout en inline, on ne pose AUCUNE hauteur -------------
   tabsBeautifulResponsive deplace .tab et .tabContent dans un ul.tabsMobile (et masque les deux
   ul d'origine en inline), puis anime height/padding en jQuery. Les selecteurs du bloc C sont
   en `.tabsBeautifulContents >` : ils ne peuvent donc pas atteindre ces elements reparentes —
   double garde avec le media. Ici, strict minimum : overflow:hidden, sans lequel le height:0
   inline du JS ne masquerait rien. */
@media (max-width:799px){
  body:not(:has(#contenu-principal #hero)) .contenu-principal .tabsBeautiful .tabsMobile > .tabContent{
    overflow:hidden;
  }
}

@media (prefers-reduced-motion:reduce){
  /* On REDUIT sans annuler : voir en-tete — une duree nulle supprime transitionend et
     recasserait la bascule d'onglets. 10ms = imperceptible, evenement conserve. */
  body:not(:has(#contenu-principal #hero)) .contenu-principal .tabsBeautiful .tabsBeautifulContents > .tabContent{
    transition-duration:.01s;
  }
  body:not(:has(#contenu-principal #hero)) .contenu-principal .tabsBeautiful .tab{ transition:none; }
}

/* --- variante A+B : onglets pilule + panneau filet gauche -----------------------------------
   Couche PUREMENT DECORATIVE posee PAR-DESSUS la section ci-dessus. On ne surcharge que
   couleur / fond / bordure / rayon / gap : la mecanique height + opacity, le declencheur de
   transitionend et le bloc prefers-reduced-motion restent INTACTS (verifie apres coup).

   Placee en fin de section, donc APRES les regles qu'elle surcharge. Rappel : une media query
   n'ajoute AUCUNE specificite — a specificite egale, c'est l'ordre du document qui tranche.
   C'est pourquoi ces regles, hors media, battent bien celles du bloc @media (min-width:800px).

   -- POURQUOI LE PANNEAU EST POSE SUR **TOUS** LES div, ET PAS SEULEMENT SUR L'ACTIF --------
   tabsBeautifulInit memorise heights[i] = li>div.outerHeight(true) pour CHAQUE onglet, puis
   tabsBeautifulOnClick ecrit cette valeur en px sur le li au clic. Si le padding du panneau
   n'etait pose que sur `.tabContent.active > div`, les hauteurs des onglets NON actifs
   seraient memorisees SANS le padding : au clic le li recevrait une hauteur trop courte et
   overflow:hidden rognerait le bas du contenu.
   MESURE des deux variantes sur /vivre-decouvrir-et-bouger/transport-en-commun/ :
     · padding sur .active > div seulement -> ecart div/li de 49px (FLEXI) et 50px (TARIFS)
     · padding sur tous les .tabContent > div -> ecart 0px sur les trois onglets
   On habille donc tous les div. Les non actifs restent invisibles (leur li est en height:0 +
   overflow:hidden), le decor ne se voit donc que sur l'actif — mais les hauteurs sont justes.
   Aucun overflow ni height n'est pose sur ce div : la hauteur reste pilotee sur le li. */

/* ---- B) ONGLETS PILULE ---- */
body:not(:has(#contenu-principal #hero)) .contenu-principal .tabsBeautiful .tabsBeautifulHeadings{
  gap:6px 8px;                                     /* respiration entre pilules */
  border-bottom:0;                                 /* plus de rail : la pilule pleine marque l'actif */
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .tabsBeautiful .tab{
  background:color-mix(in srgb, var(--couleur-principale) 6%, transparent);
  border-radius:var(--btn-radius);                 /* pilule COMPLETE (surcharge les coins hauts seuls) */
  border-bottom:0;                                 /* neutralise le marqueur souligne : largeur 0, donc
                                                      le border-bottom-color du bloc @media 800px ne peut
                                                      plus rien peindre. Voir aussi la surcharge explicite
                                                      de ce selecteur plus bas. */
  color:var(--ink-2);
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .tabsBeautiful .tab:hover{
  background:color-mix(in srgb, var(--couleur-principale) 12%, transparent);
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .tabsBeautiful .tab.active{
  background:var(--couleur-principale);
  color:var(--surface);                            /* meme pari de contraste que .btn-primary du theme
                                                      (l.120 : fond --couleur-principale, texte blanc) */
}
/* Surcharge EXPLICITE des deux regles du bloc @media (min-width:800px) qui dessinaient le
   marqueur souligne. On reprend leurs selecteurs au caractere pres — (2 ID, 5 classes) pour
   l'actif — sinon la specificite ne suffirait pas. */
body:not(:has(#contenu-principal #hero)) .contenu-principal .tabsBeautiful .tabsBeautifulHeadings > .tab{
  margin-bottom:0;                                 /* plus de rail a recouvrir */
}
body:not(:has(#contenu-principal #hero)) .contenu-principal .tabsBeautiful .tabsBeautifulHeadings > .tab.active{
  border-bottom-color:transparent;
}

/* ---- A) PANNEAU : FILET GAUCHE + FOND PALE ---- */
body:not(:has(#contenu-principal #hero)) .contenu-principal .tabsBeautiful .tabContent > div{
  border-left:3px solid var(--couleur-principale);
  background:color-mix(in srgb, var(--couleur-principale) 3%, transparent);
  padding:16px 20px;
  border-radius:0 var(--card-radius) var(--card-radius) 0;   /* arrondi a droite seulement */
}

/* ---- MOBILE (<800px) ----
   Le mode empile place chaque contenu directement sous son onglet : le filet gauche y lit tres
   bien, il rattache visuellement le panneau a sa pilule. On le GARDE donc, contrairement au
   repli propose. Seul ajustement : tabsBeautifulResponsive anime en inline le padding vertical
   du li (jusqu'a 20px haut et bas) ; ajoute au padding du div on arriverait a 36px. On resserre
   le padding vertical du div pour rester dans une respiration comparable au desktop. */
@media (max-width:799px){
  body:not(:has(#contenu-principal #hero)) .contenu-principal .tabsBeautiful .tabContent > div{
    padding:8px 16px;
  }
}

/* =================================================================== FICHE DÉTAIL ANNUAIRE
   Habille directory/directory_entry_detail_3.html. Crochet EXCLUSIF, vérifié en rendu sur les
   trois pages qui pouvaient entrer en conflit :
     fiche détail   body = « layoutLeftContentRight annuaires directoryEntryDetail »  · pas de #hero
     liste annuaire body = « … annuaires directoryEntriesList »   · .elementDirectory + .ann-card
     accueil        body = « … homepage directoryEntriesList »    · #hero + .wc-publications
   `body.directoryEntryDetail` n'existe donc QUE sur la fiche, et n'avait aucune règle (0 occurrence).
   La fiche ne porte NI .elementDirectory NI .ann-card : la tranche 4a (liste, 84 règles .ann-card)
   et le kiosque d'accueil (.wc-*) ne peuvent ni fuir ici, ni recevoir quoi que ce soit d'ici.

   100% tokens, zéro hex, zéro rgb, zéro !important.

   -- CE QUI ARRIVAIT NU (mesuré) ------------------------------------------------------------
   Aucun des identifiants du gabarit n'avait de style : #directoryEntryDetail, …Heading, …Metas,
   …Website, …Tags, …Content, …Navigation, …Previous/Next, …Footer — 0 occurrence chacun.
   Et les utilitaires natifs que le gabarit réclame ne sont pas définis dans le thème : .p30,
   .pt10, .pt30, .posLeft, .posRight, .block, .borderBottom/Top/Left/Right, .button… Mesure :
   #directoryEntryDetailHeading rendait `padding: 0` malgré class="p30", et #directoryEntryPrevious
   rendait `display: inline` malgré class="block". Toute la mise en page voulue s'évaporait.
   On ne redéfinit PAS ces utilitaires (ils sont globaux, donc à risque) : on habille les
   identifiants de la fiche, qui nous appartiennent. */

/* ── 1) LARGEUR — récupérer les 300px de la colonne droite ─────────────────
   Le gabarit masque #rightbar en JS (script inline, l.3-19), APRÈS le paint. Deux conséquences :
   un flash de la colonne au chargement, et surtout notre règle générique
   `.page-layout:not(:has(#rightbar)){display:block}` qui ne bascule pas — `:has()` teste la
   PRÉSENCE dans l'arbre, pas la visibilité, et #rightbar est bien là. Mesuré sur la fiche :
   `grid-template-columns: 852px 300px`, soit 300px perdus à droite.
   On passe donc par le crochet body, qui est connu dès le premier octet de HTML.

   ⚠️ Le préfixe :not(:has(#contenu-principal #hero)) est OBLIGATOIRE ici : la générique
   l.2026 vaut 2 ID, et sans lui ma règle (0 ID) perdait — mesuré, la grille restait à
   « 852px 300px ». Même motif que la section CO-MARQUAGE (l.4461). */
body.directoryEntryDetail:not(:has(#contenu-principal #hero)) .page-layout{ display:block; }
body.directoryEntryDetail:not(:has(#contenu-principal #hero)) #rightbar{ display:none; }

/* ── 2) LE CADRE DE LA FICHE ─────────────────────────────────────────────
   AIR SOUS LE BANDEAU. Mesuré : le h1 était collé au bas de #rubricPicture — 0 px, alors
   qu'une page de contenu en a 28. Trois choses s'additionnent, aucune n'est un défaut en
   soi : le reset global `h1…h5{margin:0}` (l.76), le `padding-top:0` volontaire de
   .page-layout (l.2029, « la remontée de .fil-ariane se cale sur le bas du bandeau »), et
   surtout le fait que l'air vient normalement de `.ligneElement:first-child{margin-top:28px}`
   (l.2225) — or la fiche d'annuaire n'a AUCUN .ligneElement : Saytup rend le modèle de fiche
   directement, sans passer par le pipeline des éléments de contenu. Rien ne fournissait donc
   cet espace. On reprend la MÊME valeur que les pages de contenu, pour ne pas inventer un
   second rythme vertical.
   Vérifié : le défaut préexistait à cette section (0 px avec l'ancienne CSS comme avec la
   nouvelle) — ce n'est pas une régression, c'est un manque jamais couvert. */
body.directoryEntryDetail:not(:has(#contenu-principal #hero)) #directoryEntryDetail{
  padding-top:28px;
}

/* --- layout 2 colonnes (image | contenu) ------------------------------------
   CIBLE : visuel à GAUCHE, titre + coordonnées à DROITE, puis pagination et bouton
   « Retour » PLEINE LARGEUR sous les deux colonnes.

   POURQUOI C'EST FAISABLE SANS TOUCHER AU GABARIT : les trois enfants directs de
   #directoryEntryDetail sont .directoryEntryDetailHeader (le visuel), …Heading (h1 +
   coordonnées) et …Content. La pagination et les commentaires vivent DANS …Content,
   donc deux lignes de grille suffisent — la ligne 2 franchit les deux colonnes et
   emporte la pagination avec elle, sans avoir à déplacer un nœud. Le bouton « Retour »
   (#directoryEntryDetailFooter) est écrit HORS de #directoryEntryDetail (gabarit l.192,
   après le div fermant de l.190) : il est pleine largeur par construction, aucune règle
   n'est nécessaire pour lui.

   AIRES NOMMÉES, JAMAIS D'AUTO-PLACEMENT. Ce n'est pas une préférence de style : Saytup
   injecte à l'exécution un nœud à identifiant hexadécimal aléatoire (le « Ce site propulsé
   par Saytup… », 1440×71). Mesuré à trois endroits DIFFÉRENTS selon la page et le
   viewport — dans .directoryEntryTags, dans #directoryEntryNavigation, dans le wrapper du
   heading. Avec des aires nommées, un item non placé tombe dans une ligne implicite SOUS
   la grille ; avec de l'auto-placement il volerait une colonne.

   ⚠️ Préfixe :not(:has(#contenu-principal #hero)) obligatoire sur les quatre règles de
   placement : la générique l.2026 vaut 2 ID, une règle à 0 ID perdrait — même piège que
   .page-layout (l.4759).

   Vérifié : .clearfix n'a AUCUNE règle dans ce thème (content calculé à `none` sur
   ::before et ::after de #directoryEntryDetail), donc pas de pseudo-élément fantôme qui
   deviendrait un item de grille. */
body.directoryEntryDetail:not(:has(#contenu-principal #hero)) #directoryEntryDetail{
  --fiche-col-image:300px;      /* largeur de la colonne du visuel — le seul réglage horizontal */
  --fiche-row-gap:28px;         /* air entre la ligne 1 (visuel|entête) et la ligne 2 (contenu) */

  display:grid;
  grid-template-columns:var(--fiche-col-image, 300px) minmax(0,1fr);
  grid-template-areas:"visuel  entete"
                      "contenu contenu";
  column-gap:32px;
  row-gap:var(--fiche-row-gap, 28px);
  align-items:start;            /* le visuel ne s'étire pas sur la hauteur de la colonne de texte */
}
body.directoryEntryDetail:not(:has(#contenu-principal #hero)) .directoryEntryDetailHeader{ grid-area:visuel; }
body.directoryEntryDetail:not(:has(#contenu-principal #hero)) #directoryEntryDetailHeading{ grid-area:entete; }
body.directoryEntryDetail:not(:has(#contenu-principal #hero)) #directoryEntryDetailContent{ grid-area:contenu; }

/* BASCULE PLEINE LARGEUR SANS IMAGE — obligatoire, pas cosmétique.
   .directoryEntryDetailHeader est écrit HORS du mx:bloc field_295 (gabarit l.24) : il est
   donc TOUJOURS dans le DOM, mesuré 1192×0 quand le champ est vide. Sans cette bascule la
   grille réserverait une colonne de 300px vide sur 44 des 46 fiches du site — seules la
   Mairie de Ressons et le CCAS renseignent field_295 (relevé sur les 5 annuaires).
   Le :has() est fiable ici : #directoryEntryDetailMainImage, lui, est écrit DANS le
   mx:bloc, donc ABSENT du DOM quand le champ est vide. Pas de piège « présent mais vide ».
   Ce sélecteur ajoute 1 ID à celui de la grille : il gagne quel que soit l'ordre. */
body.directoryEntryDetail:not(:has(#contenu-principal #hero)) #directoryEntryDetail:not(:has(#directoryEntryDetailMainImage)){
  display:block;
}

/* L'AIR ENTRE LES LIGNES VIENT DU row-gap, PAS D'UN CUMUL DE MARGES.
   En grille les marges adjacentes ne fusionnent PAS : le margin-bottom du heading (1.5rem)
   et le margin-top du contenu (1.5rem) s'ADDITIONNAIENT — mesuré 48px là où le row-gap en
   demande 28. Il faut donc neutraliser les DEUX : n'en retirer qu'une laisserait 24+28=52px.
   Scopé par :has(image), donc UNIQUEMENT en mode grille. En mode bloc — 44 fiches sur 46 —
   les deux marges restent en place et fusionnent normalement en 24px, identique à
   l'existant : zéro régression sur ces fiches.
   Le margin-bottom du visuel est traité au même endroit que sa déclaration, plus bas. */
body.directoryEntryDetail:not(:has(#contenu-principal #hero)) #directoryEntryDetail:has(#directoryEntryDetailMainImage) #directoryEntryDetailHeading{
  margin-bottom:0;
}
body.directoryEntryDetail:not(:has(#contenu-principal #hero)) #directoryEntryDetail:has(#directoryEntryDetailMainImage) #directoryEntryDetailContent{
  margin-top:0;
}
/* TROISIÈME MARGE au même joint, découverte à la mesure : en grille les marges d'un item ne
   s'échappent plus vers l'extérieur, donc le margin-top:2rem de #directoryEntryNavigation
   (l.5062, bloc 7) reste DANS la boîte du contenu et s'ajoute au row-gap — mesuré 60px au
   lieu de 28 au-dessus de la pagination, sur les fiches dont le contenu ne contient QUE
   cette pagination (Mairie de Ressons et CCAS aujourd'hui).
   Le :first-child borne la neutralisation à ce cas précis : dès qu'une commune renseigne la
   description ou le texte supplémentaire, la pagination n'est plus le premier enfant et son
   2rem reprend son rôle de séparateur de section. */
body.directoryEntryDetail:not(:has(#contenu-principal #hero)) #directoryEntryDetail:has(#directoryEntryDetailMainImage) #directoryEntryDetailContent > #directoryEntryNavigation:first-child{
  margin-top:0;
}

/* Le border-bottom du heading est CONSERVÉ tel quel. En deux colonnes il devient un filet
   d'environ 860px calé sur la colonne de droite (à partir de x456) au lieu d'un séparateur
   pleine largeur : c'est voulu, il lit alors comme le soulignement du bloc titre +
   coordonnées. */

@media (max-width:900px){
  /* UNE COLONNE, image AU-DESSUS du titre. 900px est le seuil que le thème utilise déjà
     pour .page-layout (l.2033) : on ne crée pas un second rythme de rupture.
     Mesuré sur la fiche Mairie : à 900px la colonne de droite vaut encore 520px, en dessous
     elle se dégrade vite (870 → 490, 800 → 420, 700 → 320 et le h1 passe sur 2 lignes). */
  body.directoryEntryDetail:not(:has(#contenu-principal #hero)) #directoryEntryDetail{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"visuel"
                        "entete"
                        "contenu";
  }
}
/* --- fin layout 2 colonnes --------------------------------------------------- */

body.directoryEntryDetail #directoryEntryDetailHeading{
  padding:0 0 1.25rem;                             /* .p30 n'existe pas : on pose la respiration ici */
  border-bottom:1px solid var(--line);
  margin-bottom:1.5rem;
}
body.directoryEntryDetail #directoryEntryDetailHeading h1{ margin:0 0 .75rem; }

/* VISUEL D'EN-TÊTE (field_295 → #directoryEntryDetailMainImage).
   Le conteneur natif porte `class="mod"`, sans style dans le thème.

   PARTI PRIS : on RESPECTE LE FORMAT NATIF — `contain`, jamais `cover`.
   La version précédente étalait l'image en bandeau pleine largeur avec `cover` : c'est bon
   pour une photo de rubrique, mauvais pour un annuaire. Le contenu réel est hétérogène —
   sur Ressons, `/media/ccas.jpg` est un LOGO (illustration sur fond blanc) et
   `/media/mairie.jpg` une photo de bâtiment. Un `cover` pleine largeur recadrait le logo
   et pouvait lui couper la tête. Ici : boîte de largeur maîtrisée, image entière dedans,
   aucun recadrage et aucune déformation quel que soit le ratio.

   DEUX VARIABLES LOCALES, réglables sans toucher au reste :
     --fiche-visuel-max   largeur de la boîte  (un logo carré s'affiche à cette taille)
     --fiche-visuel-hmax  hauteur maximale     (borne un portrait, qui sinon s'allongerait)
   Déclarées sur le conteneur : l'img en hérite. */
body.directoryEntryDetail #directoryEntryDetailMainImage{
  --fiche-visuel-max:var(--fiche-col-image, 300px); /* CALÉ SUR LA COLONNE : le cadre ne peut plus la déborder.
                                                       box-sizing:border-box étant global (l.69), ce plafond
                                                       compte padding et filet — l'image utile vaut donc
                                                       300 − 2×12 − 2×1 = 274px. */
  --fiche-visuel-hmax:320px;

  width:fit-content;                                /* la boîte ÉPOUSE l'image, au lieu de l'étirer */
  max-width:var(--fiche-visuel-max);                /* …sans jamais dépasser ce plafond */
  margin:0;                                         /* aligné à GAUCHE : même axe que le h1 et les coordonnées.
                                                       Le margin-bottom de 1.5rem est retiré : l'air vient
                                                       désormais du row-gap de la grille (28px), sinon il s'y
                                                       ajouterait sous l'image en 1 colonne (≤900px). */
  padding:12px;                                     /* un logo ne touche pas le filet */
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--card-radius);
  overflow:hidden;
}
/* JAMAIS D'AGRANDISSEMENT. `width:auto` (et non 100%) est la clé : sur un élément remplacé,
   l'algorithme de dimensionnement CSS applique max-width ET max-height EN PRÉSERVANT le
   ratio intrinsèque. L'image garde donc sa taille native quand elle tient dans la boîte, et
   n'est réduite que si elle dépasse l'une des deux bornes — jamais montée.
   Effet de bord bienvenu : la boîte de l'<img> épousant déjà le ratio, le `width:fit-content`
   du conteneur le suit, et il n'y a plus de bande vide même sur un portrait.
   `object-fit:contain` devient alors un simple filet de sécurité : on le garde, il coûte
   zéro et couvre le cas où une future règle imposerait une dimension. */
body.directoryEntryDetail #directoryEntryDetailMainImage img{
  display:block;
  width:auto; max-width:100%;                       /* taille native si elle tient ; jamais d'upscale */
  height:auto;                                      /* PAS de hauteur fixe : le ratio natif décide */
  max-height:var(--fiche-visuel-hmax);              /* seule borne verticale : un portrait ne file pas */
  object-fit:contain;                               /* jamais cover → aucun recadrage */
  border:0; border-radius:0;                        /* le cadre est porté par le conteneur */
}

/* ── 3) BLOC COORDONNÉES ────────────────────────────────────────────────
   Les wrappers .wc-fiche-* viennent d'être ajoutés au gabarit : sans eux il fallait viser les
   nœuds texte entre <br>, ce qui n'aurait tenu qu'à la mise en forme actuelle.
   Les <br> restés enfants DIRECTS des metas ne servaient qu'à séparer ces groupes : maintenant
   que chaque groupe est un bloc, ils feraient double interligne. Le <br> INTERNE à l'adresse
   (bloc field_335) n'est pas touché — c'est lui qui met la ville à la ligne. */
body.directoryEntryDetail #directoryEntryDetailMetas{
  display:flex; flex-direction:column; gap:.55rem;
  padding:1rem 1.15rem;
  background:color-mix(in srgb, var(--couleur-principale) 3%, transparent);
  border:1px solid var(--line);
  border-left:3px solid var(--couleur-principale);
  border-radius:0 var(--card-radius) var(--card-radius) 0;
}
body.directoryEntryDetail #directoryEntryDetailMetas > br{ display:none; }

body.directoryEntryDetail .wc-fiche-adresse,
body.directoryEntryDetail .wc-fiche-tel,
body.directoryEntryDetail .wc-fiche-mail{
  display:flex; align-items:baseline; gap:.5rem;
  font-size:1rem; line-height:1.5; color:var(--ink-2);
}
/* Les libellés (« Adresse », « Téléphone », « E-mail ») étaient des <strong> au même niveau
   que la valeur : passés en <span class="wc-fiche-label"> côté gabarit, ILS VIVENT DANS LE
   mx:bloc de leur champ — donc ils disparaissent avec lui.
   C'est le correctif d'un défaut mesuré : l'étiquette de l'adresse était d'abord posée en CSS
   (::before{content:"Adresse"}) sur le wrapper, lequel est émis même quand les champs sont
   vides. Sur 4 des 5 annuaires en detail_3 (Santé, Associations, Commerces, Hébergement) les
   champs 331-335 ne sont PAS renseignés — la commune a tout saisi dans la description — et
   « ADRESSE » s'affichait donc seule, sans valeur. Un libellé posé en CSS ne peut pas savoir
   si son champ est rempli ; un libellé posé dans le bloc, si. */
body.directoryEntryDetail .wc-fiche-label{
  flex:0 0 auto; min-width:5.5rem;
  font-family:var(--police-titres); font-size:.72rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
}

/* GARDE-FOU — le wrapper d'adresse reste émis même vide (il enveloppe les 3 mx:bloc depuis
   l'extérieur) : sans lui, on garderait une ligne flex vide et l'interligne de la carte.
   ⚠️ `:empty` NE SUFFIT PAS ici, et je le laisse quand même pour la lisibilité de l'intention :
   entre les 3 mx:bloc le gabarit contient des retours à la ligne, et un nœud texte d'espaces
   empêche `:empty` de matcher. C'est `:not(:has(*))` qui fait le travail — il teste l'absence
   d'ENFANT ÉLÉMENT, insensible aux espaces. Quand l'adresse est renseignée le <span> du
   libellé est présent, donc la règle ne s'applique pas ; quand la ville seule l'est, son
   <br> suffit à la neutraliser aussi.

   Les TROIS wrappers sont concernés, pas seulement l'adresse : `.wc-fiche-tel` et
   `.wc-fiche-mail` enveloppent aussi leur mx:bloc depuis l'extérieur. Sans la règle ils
   restaient des lignes de 0px — invisibles, mais chacune consommait un `gap` de la carte,
   soit ~18px de vide en bas du bloc coordonnées (mesuré sur Santé, Associations, Commerces). */
body.directoryEntryDetail .wc-fiche-adresse:empty,
body.directoryEntryDetail .wc-fiche-tel:empty,
body.directoryEntryDetail .wc-fiche-mail:empty,
body.directoryEntryDetail .wc-fiche-adresse:not(:has(*)),
body.directoryEntryDetail .wc-fiche-tel:not(:has(*)),
body.directoryEntryDetail .wc-fiche-mail:not(:has(*)){ display:none; }

/* ── 4) SITE WEB ET E-MAIL : ce ne sont PAS des téléchargements ──────────
   Saytup classe ces deux liens en `a.LinkFile`, et notre traitement des PDF (l.2429) leur
   collait donc une pastille blanche à icône « flèche vers le bas ». Mesuré : `inline-flex`,
   fond blanc, radius 10px, bord 1px, `::before` = icône de téléchargement — sur une URL de
   site et sur une adresse mail. On annule le bouton et l'icône, et on rend un lien.
   La générique vaut 2 ID : on reprend donc le préfixe complet, sinon rien ne s'applique
   (mesuré : le lien restait en pastille blanche avec son icône). */
body.directoryEntryDetail:not(:has(#contenu-principal #hero)) #directoryEntryDetailMetas a.LinkFile,
body.directoryEntryDetail:not(:has(#contenu-principal #hero)) .wc-fiche-web a.LinkFile{
  display:inline; padding:0; margin:0;
  background:none; border:none; box-shadow:none; border-radius:0;
  font-family:inherit; font-size:inherit; font-weight:600;
  color:var(--couleur-principale); text-decoration:underline; text-underline-offset:2px;
}
body.directoryEntryDetail:not(:has(#contenu-principal #hero)) #directoryEntryDetailMetas a.LinkFile::before,
body.directoryEntryDetail:not(:has(#contenu-principal #hero)) .wc-fiche-web a.LinkFile::before{ content:none; }
body.directoryEntryDetail:not(:has(#contenu-principal #hero)) #directoryEntryDetailMetas a.LinkFile:hover,
body.directoryEntryDetail:not(:has(#contenu-principal #hero)) .wc-fiche-web a.LinkFile:hover{ color:var(--principale-700); }

body.directoryEntryDetail .wc-fiche-web{
  display:flex; align-items:baseline; gap:.5rem; padding-right:0;
  font-size:1rem; line-height:1.5;
}
/* Pas d'étiquette « Site web » : elle était posée en CSS, et pour la même raison que
   l'adresse ci-dessus ce n'est pas le bon endroit. Ici le risque d'orphelin est nul — le
   wrapper .wc-fiche-web EST le div natif #directoryEntryDetailWebsite, lui-même à
   l'intérieur de <mx:bloc id="field_291"> : pas de site, pas de div, donc pas d'étiquette.
   Mais le gabarit ne référence AUCUN field_291_label, et l'URL se lit d'elle-même : on
   n'invente donc pas de libellé. À reprendre si tu veux l'aligner sur les autres lignes —
   un <mx:text id="field_291_label" /> dans le bloc suffirait, son texte venant du BO. */

/* ── 5) TAGS — élargir le scope existant plutôt que dupliquer ───────────
   Les règles de pastilles existent déjà (l.2924-2926) mais sont scopées `.elementDirectory`,
   absent de la fiche : les tags y arrivaient donc NUS (mesuré : inline, 16px, aucun fond).
   On rejoue ici le même habillage, sur le crochet de la fiche. */
body.directoryEntryDetail #directoryEntryDetailTags{ display:block; }
body.directoryEntryDetail .directoryEntryTags{
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:.4rem;
}
body.directoryEntryDetail .directoryEntryTags .fa{
  color:var(--couleur-secondaire); font-size:.72rem;
}
body.directoryEntryDetail .directoryEntryTag{
  display:inline-flex; align-items:center; padding:.2rem .6rem;
  border-radius:999px; background:var(--surface); border:1px solid var(--line);
  font-family:var(--police-titres); font-size:.75rem; font-weight:600;
  color:var(--ink-2); text-decoration:none; transition:border-color .15s, color .15s;
}
body.directoryEntryDetail .directoryEntryTag:hover,
body.directoryEntryDetail .directoryEntryTag:focus-visible{
  border-color:var(--couleur-principale); color:var(--couleur-principale);
}

/* ── 6) PHOTO ET CONTENU ────────────────────────────────────────────────
   L'image du bandeau arrivait nue, alignée à gauche et sans cadre. Le label de champ qui la
   précédait (« Bandeau visuel - Fiche résumée ») a été commenté dans le gabarit — c'était un
   intitulé de back-office qui fuyait sur la page publique. */
body.directoryEntryDetail #directoryEntryDetailContent{ margin-top:1.5rem; }
body.directoryEntryDetail #directoryEntryDetailContent img{
  display:block; max-width:100%; height:auto;
  border-radius:var(--card-radius); border:1px solid var(--line);
}
body.directoryEntryDetail #directoryEntryDetailGallery h3{ margin:0 0 .75rem; }

/* ── 7) PAGINATION PRÉCÉDENT / SUIVANT ─────────────────────────────────
   ⚠️ On ne met PAS de grille sur #directoryEntryNavigation : jusqu'à la correction du gabarit
   il avalait #entry_commentaires (balise fermante manquante). La fermeture est posée, mais on
   cible les deux .w50 plutôt que le conteneur — le rendu ne dépend alors plus de cette
   correction, et un futur enfant du conteneur n'entrerait pas dans la grille par surprise. */
body.directoryEntryDetail #directoryEntryNavigation{
  display:flex; flex-wrap:wrap; gap:var(--gutter); margin-top:2rem;
}
body.directoryEntryDetail #directoryEntryNavigation > .w50{ flex:1 1 240px; min-width:0; }
body.directoryEntryDetail #directoryEntryPrevious,
body.directoryEntryDetail #directoryEntryNext{
  display:flex; align-items:center; gap:.6rem; height:100%;
  padding:.85rem 1.1rem; border:1px solid var(--line); border-radius:var(--card-radius);
  background:var(--surface); color:var(--ink-2); text-decoration:none;
  font-size:.875rem; line-height:1.4;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
body.directoryEntryDetail #directoryEntryNext{ justify-content:flex-end; text-align:right; }
body.directoryEntryDetail #directoryEntryPrevious:hover,
body.directoryEntryDetail #directoryEntryNext:hover{
  border-color:var(--couleur-principale); box-shadow:var(--shadow-sm); transform:translateY(-2px);
}
body.directoryEntryDetail #directoryEntryPrevious strong,
body.directoryEntryDetail #directoryEntryNext strong{
  display:block; font-family:var(--police-titres); color:var(--couleur-dark); font-size:.95rem;
}
body.directoryEntryDetail #directoryEntryNavigation .fa{ color:var(--ink-3); font-size:1.1rem; }

/* ── 8) PIED DE FICHE — le lien « Retour » ─────────────────────────────
   `class="button"` n'est pas défini dans le thème : le lien rendait en texte nu. */
body.directoryEntryDetail #directoryEntryDetailFooter{
  margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--line);
}
body.directoryEntryDetail #directoryEntryDetailFooter a.button{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1.2rem; border-radius:var(--btn-radius);
  background:var(--couleur-principale); color:var(--surface);
  font-family:var(--police-titres); font-weight:600; font-size:.9rem;
  text-decoration:none; transition:background-color .18s, transform .18s;
}
body.directoryEntryDetail #directoryEntryDetailFooter a.button:hover{
  background:var(--principale-700); transform:translateY(-2px);
}

@media (max-width:600px){
  body.directoryEntryDetail .wc-fiche-adresse,
  body.directoryEntryDetail .wc-fiche-tel,
  body.directoryEntryDetail .wc-fiche-mail,
  body.directoryEntryDetail .wc-fiche-web{ flex-direction:column; gap:.15rem; }
  body.directoryEntryDetail .wc-fiche-label{ min-width:0; }
}

@media (prefers-reduced-motion:reduce){
  body.directoryEntryDetail #directoryEntryPrevious,
  body.directoryEntryDetail #directoryEntryNext,
  body.directoryEntryDetail #directoryEntryDetailFooter a.button{ transition:none; }
  body.directoryEntryDetail #directoryEntryPrevious:hover,
  body.directoryEntryDetail #directoryEntryNext:hover,
  body.directoryEntryDetail #directoryEntryDetailFooter a.button:hover{ transform:none; }
}