/* =====================================================================
   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;
  src:url("https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.24.0/dist/fonts/tabler-icons.woff2") format("woff2");
}
.ti{ font-family:"tabler-icons-fix" !important; }

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

.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 .fourthLevel > li > a {
    display: block;
    padding:0;
    font-size: 11px;
    color: var(--principale-700);
    text-decoration: none;
    transition: color .2s;
}

#nested .secondLevel .thirdLevel > li > a:hover{ 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; }

/* =================================================================== 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:#000000;
  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. */
  body.nav-open #nav-principale #nested .secondLevel > 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; }

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

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