/* =========================================================================
   UN1TÉ — Feuille de style (reproduction fidèle du site d'origine)
   Thème sombre : fond noir, texte blanc, police Questrial.
   Couleurs extraites du thème Breakdance d'origine.

   Rôle : styles du SITE PUBLIC uniquement (le backoffice a ses propres styles).
   Chargée par app/views/partials/layout.php.
   Convention : les couleurs/valeurs récurrentes sont des variables CSS définies
   dans :root ci-dessous, puis réutilisées via var(--xxx).
   ========================================================================= */
:root{
  --black:#000;
  --bg:#000;
  --ink:#fff;
  --grey-nav:#afafaf;
  --grey-meta:#bdbdbd;
  --line:#474747;
  --border-soft:#cecece;
  --bordeaux:#760019;   /* bouton Adhérer */
  --blue:#130076;       /* bouton Renouveler */
  --bubble:rgba(44,50,134,.49); /* pastilles hero (#2C3286 7D) */
  --map-bg:#0b0c0e;
  --news-bg:#090925;
  --news-input:#19193a;
  --news-accent:#578bfa;
  --purple:#551dd0;     /* icône date */
  --wrap:1320px;
  --font:"Questrial",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-roboto:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
a{color:#fff;text-decoration:none}
a:hover{opacity:.85}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5,h6{font-family:var(--font);color:#fff;font-weight:500;margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
section{padding:40px 0}

/* ===================== EN-TÊTE ===================== */
.site-header{background:#000;position:sticky;top:0;z-index:200}
.site-header .bar{max-width:var(--wrap);margin:0 auto;height:142px;padding:10px 20px;box-sizing:border-box;display:flex;
  align-items:center;justify-content:space-between;gap:20px;position:relative}
.logo img{height:44px;width:auto}
.header-right{display:flex;flex-direction:column;align-items:flex-end;gap:20px;flex:1}
.util-row{display:flex;align-items:center;gap:16px}
.util-row .search{display:flex;align-items:center;gap:8px;padding-right:16px;border-right:1px solid var(--border-soft)}
.util-row .search input{background:transparent;border:0;color:#fff;font-family:var(--font);width:120px;outline:none}
.util-row .search input::placeholder{color:#fff;opacity:.8}
.util-row .search button{background:none;border:0;color:#fff;cursor:pointer;display:flex}
.util-row .util-links{display:flex;gap:0;font-family:var(--font-roboto);font-size:15px;font-weight:500}
.util-row .util-links a{color:var(--grey-nav);padding:0 16px;border-right:1px solid #fff}
.util-row .util-links a:last-child{border-right:0}
.util-row .util-links a:hover{color:#fff;opacity:1}
.main-row{display:flex;align-items:center;gap:22px}
.main-nav{display:flex;align-items:center;gap:22px}
.main-nav > a,.main-nav .has-sub > span{color:#fff;font-family:var(--font-roboto);font-size:15px;font-weight:500;
  cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.main-nav > a:hover{opacity:.8}
.has-sub{position:relative}
.has-sub .submenu{position:absolute;top:100%;left:0;margin-top:10px;background:#fff;min-width:190px;
  padding:6px;border-radius:4px;list-style:none;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:.15s;z-index:210;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:none}
.main-nav .has-sub > span{cursor:pointer}
.main-nav .has-sub > span:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:3px}
.has-sub .submenu a{display:block;padding:9px 12px;color:#000;border-radius:3px}
.has-sub .submenu a:hover{background:#f2f2f2;opacity:1}
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-roboto);
  font-size:15px;font-weight:500;padding:10px 18px;border-radius:10px;color:#fff;border:0;cursor:pointer;
  line-height:1.2;white-space:nowrap;transition:filter .15s}
.btn:hover{filter:brightness(1.15);opacity:1}
.btn.bordeaux{background:var(--bordeaux)}
.btn.blue{background:var(--blue);min-width:160px;text-align:center}
.icon-pic img{height:34px;width:auto}
.burger{display:none;background:none;border:0;color:#fff;font-size:1.7rem;cursor:pointer}
/* Menu mobile : le bouton burger et le JS qui bascule .header-right.open
   existaient déjà (voir partials/layout.php + main.js) mais sans CSS pour
   les piloter — le site était donc illisible/en débordement horizontal en
   dessous de 1100px (nav complète forcée sur une seule ligne). */
@media(max-width:1100px){
  .site-header .bar{height:auto;min-height:72px;padding:12px 18px;flex-wrap:nowrap}
  .logo img{height:38px}
  .burger{display:block}
  .main-nav > a,.main-nav .has-sub > span{white-space:normal}
  .has-sub{position:static}
  .header-right{display:none;position:absolute;top:100%;left:0;right:0;background:#000;
    flex-direction:column;align-items:stretch;gap:20px;padding:20px;
    max-height:calc(100vh - 72px);overflow-y:auto;border-top:1px solid #1a1a1a;z-index:199}
  .header-right.open{display:flex}
  .util-row{flex-direction:column;align-items:stretch;gap:16px}
  .util-row .search{border-right:0;padding-right:0;border-bottom:1px solid var(--border-soft);padding-bottom:14px}
  .util-row .search input{width:100%}
  .util-row .util-links{flex-direction:column;gap:12px}
  .util-row .util-links a{border-right:0;padding:0}
  .main-row{flex-direction:column;align-items:stretch;gap:16px}
  .main-nav{flex-direction:column;align-items:flex-start;gap:14px}
  /* Le survol/focus-within (desktop) n'est pas fiable au doigt : le
     sous-menu "Le syndicat" reste visible en permanence, en liste indentée. */
  .has-sub .submenu{position:static;opacity:1;visibility:visible;transform:none;
    background:transparent;box-shadow:none;padding:6px 0 0 16px;margin-top:0;min-width:0}
  .has-sub .submenu a{color:#fff;padding:6px 0}
  .main-row .btn{width:100%}
  .main-row .icon-pic{align-self:flex-start}
}
@media(max-width:480px){
  .site-header .bar{padding:10px 14px}
  .logo img{height:34px}
  .main-row .btn{font-size:14px;padding:10px 14px}
}

/* ===================== HERO (bannière) ===================== */
.hero{background:url('../img/bandeau-site.jpg') center/cover no-repeat;position:relative}
.hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.15)}
.hero .wrap{position:relative;z-index:2;min-height:62vh;display:flex;align-items:center}
.hero-badges{display:flex;justify-content:space-between;width:100%}
.badge-circle{width:125px;height:125px;border-radius:50%;border:3px solid #fff;background:var(--bubble);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  color:#fff;font-size:19px;line-height:1.15;padding:10px;transition:.2s}
.badge-circle:hover{background:rgba(44,50,134,.8);opacity:1;transform:scale(1.04)}
.badge-circle svg{width:26px;height:26px;fill:#fff;margin-top:6px}
@media(max-width:600px){.hero .wrap{min-height:auto;padding-top:40px;padding-bottom:40px}
  .hero-badges{gap:24px}}

/* ===================== TITRE DE SECTION (divider) ===================== */
.section-divider{display:flex;align-items:center;gap:26px;justify-content:center;margin-bottom:32px}
.section-divider::before,.section-divider::after{content:"";flex:1;height:0;border-top:1px solid var(--line)}
.section-divider h2,.section-divider h1{font-size:33px;color:#fff;text-align:center;font-weight:500;white-space:nowrap}
.section-title{font-size:33px;color:#fff;font-weight:500;margin-bottom:26px}
@media(max-width:767px){.section-divider h2,.section-divider h1,.section-title{font-size:26px}}

/* ===================== GRILLE DE CARTES (documents) ===================== */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1119px){.cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1023px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){.cards{grid-template-columns:1fr}}
/* CADRAGE PAR LE HAUT (top/cover et non center/cover). Les visuels sont des
   tracts au format portrait : dans une vignette moins haute qu'eux, un cadrage
   centré rogne autant en haut qu'en bas — et c'est en haut que se trouve le
   logo UN1TÉ, donc la seule partie qu'il ne faut jamais perdre. Le bas d'un
   tract, lui, porte les mentions de pied de page : le sacrifier ne coûte rien.
   Même raison pour object-position:top sur .art-card .thumb img et
   .art-figure img — les deux autres endroits où un tract est rogné. */
.doc-card{position:relative;min-height:406px;border-radius:2px;overflow:hidden;cursor:pointer;
  background:#111 top/cover no-repeat;display:block}
.doc-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.35))}
.doc-card .caption{position:absolute;left:0;right:0;bottom:0;background:#fff;min-height:120px;
  padding:20px 24px;display:flex;flex-direction:column;justify-content:center;gap:8px;z-index:2}
.doc-card .caption h3{color:#000;font-family:var(--font-roboto);font-size:20px;font-weight:400;line-height:1.25}
.doc-card .caption .meta{color:#000;font-family:var(--font);font-size:14px;display:flex;align-items:center;gap:8px}
.doc-card .caption .meta svg{width:15px;height:15px;fill:var(--purple);flex:none}
.doc-card:hover{opacity:1}
.doc-card:hover .caption h3{text-decoration:underline}

/* ===================== SECTION CARTE (France) ===================== */
.map-section{background:var(--map-bg)}
.map-box{max-width:920px;margin:0 auto;text-align:center}
.map-box .map-title{font-size:1.4rem;color:#fff;margin-bottom:4px}
.map-box .map-sub{color:#9a9ab0;margin:0 0 18px}
.france-map{width:880px;max-width:100%;aspect-ratio:2500/2300;height:auto;margin:0 auto;display:block}
.france-map .region{fill:#e0e0e0;stroke:#333;stroke-width:2;transition:fill .2s;cursor:pointer}
.france-map a:hover .region,.france-map a:focus .region{fill:#86A1B4}
.france-map .region.selected{fill:#3E5C75}
.map-extra{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.map-extra a{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:#fff;padding:7px 13px;border-radius:20px;font-size:.82rem}
.map-extra a:hover{background:var(--bordeaux);opacity:1;border-color:var(--bordeaux)}

/* ===================== MÉTIERS (mosaïque isotope 2 colonnes égales) ===================== */
.metiers-gallery{display:flex;gap:15px;align-items:flex-start}
.metiers-gallery .mg-col{flex:1 1 0;display:flex;flex-direction:column;gap:15px;min-width:0}
.metiers-gallery a{position:relative;display:block;overflow:hidden;line-height:0}
.metiers-gallery a img{width:100%;height:auto;display:block;transition:.35s}
.metiers-gallery a:hover img{transform:scale(1.04)}
.metiers-gallery a .cap{position:absolute;left:0;right:0;bottom:0;padding:34px 20px 16px;color:#fff;
  font-size:1.15rem;font-weight:400;line-height:1.2;letter-spacing:.02em;
  text-shadow:0 1px 6px rgba(0,0,0,.7);
  background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,0))}
@media(max-width:600px){.metiers-gallery{flex-direction:column}}

/* ===================== VOIR PLUS ===================== */
/* Bouton pilule, bordure blanche, fond transparent — aligné à gauche par
   défaut (bloc, sous la grille de cartes). .voir-plus-right conservée pour
   d'éventuels usages existants alignés à droite. */
.voir-plus{display:inline-block;margin-top:22px;color:#fff;font-size:.95rem;font-weight:500;
  padding:12px 28px;border:1px solid #fff;border-radius:999px;background:transparent;text-align:center}
.voir-plus:hover{color:#000;background:#fff;opacity:1;text-decoration:none}
/* Repousse le bouton (boîte compacte, pas étirée) à droite de son
   conteneur, sans changer sa taille au contenu — voir home.php (UN1TÉ.MI-FO). */
.voir-plus-right{display:block;width:fit-content;margin-left:auto;margin-right:0}

/* ===================== NEWSLETTER ===================== */
.newsletter{background:var(--news-bg);padding:0}
.newsletter .wrap{display:flex;align-items:stretch;gap:0;max-width:none;padding:0;height:275px}
.newsletter .news-img{flex:0 0 857px;max-width:100%;min-height:275px;align-self:stretch;min-width:0}
.newsletter .news-img img{width:100%;height:100%;min-height:275px;object-fit:cover;display:block;border-radius:0}
.newsletter .box{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:36px 40px}
@media(max-width:820px){.newsletter .wrap{flex-direction:column;align-items:stretch;height:auto}.newsletter .news-img{display:none}}
.newsletter .kicker{font-size:1.5rem;color:#fff;margin-bottom:6px}
.newsletter p{color:#cfcfe6;margin:0 0 20px}
.newsletter form{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch;background:transparent}
.newsletter input[type=email]{flex:0 1 60%;min-width:200px;height:66px;padding:0 18px;border:1px solid #fff;
  border-radius:5px;background:var(--news-input);color:#fff;font-size:1rem}
.newsletter input[type=email]::placeholder{color:#b9b9d6}
.newsletter button{flex:0 1 23%;min-width:120px;height:66px;padding:0 20px;border:0;border-radius:0;background:#090925;
  color:var(--news-accent);font-weight:600;cursor:pointer;font-family:var(--font-roboto);font-size:.92rem}
.newsletter button:hover{filter:brightness(1.6)}
.newsletter .gdpr{display:flex;align-items:center;gap:8px;color:#cfcfe6;font-size:.82rem;margin-top:14px;flex-basis:100%}
.newsletter .gdpr input{width:auto;accent-color:#578bfa}

/* ===================== PIED DE PAGE ===================== */
.site-footer{background:#000;padding:56px 0 26px;border-top:1px solid #1a1a1a}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1.4fr;gap:40px;align-items:start}
.site-footer h5{color:#fff;font-size:1rem;font-weight:500;margin:0 0 16px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.site-footer a{color:#e2e2e2;font-size:.95rem}
.site-footer a:hover{color:#fff;opacity:1}
.footer-social{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap}
.footer-social a{display:inline-flex;line-height:0;transition:.15s}
.footer-social a svg{width:44px;height:40px;display:block}
.footer-social a:hover{opacity:.75}
.footer-divider{border-top:1px solid var(--line);margin:34px 0 18px}
.footer-legal{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.footer-legal .links{display:flex;flex-wrap:wrap;gap:22px;justify-content:center}
.footer-legal a{color:#bdbdbd;font-size:.85rem}
.footer-legal img{height:70px;width:auto;opacity:.9}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.footer-grid{grid-template-columns:1fr}}

/* ===================== PAGE ACTUALITÉS (filtres) ===================== */
.page-hero{padding:44px 0 10px}
.page-hero h1{font-size:40px;color:#fff}
.page-hero p{color:#bdbdbd;margin-top:8px}
/* Variante centrée (voir $bannerClass dans partials/page_banner.php) —
   utilisée par la page Articles pour matcher un1te.fr/articles/, sans
   changer l'alignement à gauche par défaut des autres pages. */
.page-hero-center{text-align:center}
.page-hero-center p{max-width:640px;margin-left:auto;margin-right:auto}
.actu-tabs{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
/* Texte blanc + bordure blanche uniformes sur tous les boutons (repris des
   valeurs exactes du bouton Breakdance de l'ancien site : border-radius
   12px, largeur 120px, fond transparent, aucun changement au survol). */
.actu-tabs a{width:120px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #fff;border-radius:12px;font-size:15px;font-weight:500;color:#fff;background:transparent;text-align:center}
.actu-tabs a:hover{color:#fff;border-color:#fff;background:transparent;opacity:1}
.filter-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:24px 0 6px;flex-wrap:wrap}
.filter-bar .count{color:#bdbdbd;font-size:.95rem}
.filter-toggle{display:inline-flex;align-items:center;gap:8px;background:#141414;border:1px solid #3a3a3a;
  color:#fff;padding:10px 18px;border-radius:8px;cursor:pointer;font-family:inherit;font-size:.95rem}
.filter-toggle:hover{border-color:var(--bordeaux)}
/* Variante texte simple, sans bordure ni fond (page Articles, voir
   page_articles.php) — la recherche utilise .pr-search-box/.pr-searchrow
   (déjà scopées, réutilisées telles quelles) plutôt que .reg-search/.reg-bar. */
.filter-toggle-plain{background:transparent;border:0;padding:0;color:#fff;font-size:.95rem;
  font-family:inherit;cursor:pointer}
.filter-toggle-plain:hover{color:var(--bordeaux)}
.filter-panel{display:none;background:#0d0d0d;border:1px solid #222;border-radius:12px;padding:22px;margin:8px 0 24px}
.filter-panel.open{display:block}
.filter-panel .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.filter-panel label{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:#8a8a9a;margin-bottom:6px}
.filter-panel select,.filter-panel input[type=text]{width:100%;padding:11px;border:1px solid #333;border-radius:8px;
  background:#111;color:#fff;font-family:var(--font);font-size:.92rem}
.filter-panel .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.filter-panel .actions .btn.reset{background:#1a1a1a;color:#fff;border:1px solid #333}
.pagination{display:flex;gap:14px;justify-content:center;align-items:center;margin-top:34px;flex-wrap:wrap}
.pagination a,.pagination span{min-width:auto;height:auto;display:inline-flex;align-items:center;
  justify-content:center;border:0;background:transparent;color:#fff;font-weight:500;padding:0;font-size:1.05rem}
.pagination a:hover{color:var(--bordeaux);opacity:1}
.pagination .current{color:var(--bordeaux);font-weight:700}
.pagination .dots{color:#8a8a9a}
.pagination .next{font-weight:700}

/* ===================== PAGE PRESSE (revue de presse) ===================== */
.pr-banner .wrap{min-height:40vh}
.pr-banner .banner-sub{max-width:650px;margin:14px auto 0;text-align:center}
/* Barre de recherche « Recherche [loupe]  Filtrer et trier », suivie d'un
   filet. Ces classes ne servent plus qu'à la page Articles (la page Revue de
   presse qui les avait introduites a été retirée) : le filet court sur toute
   la largeur de la grille de vignettes plutôt que sur 951 px, pour s'aligner
   sur elle. Bouton loupe en noir plein, comme sur la maquette d'origine. */
.pr-searchrow{margin:0 0 20px;padding-bottom:22px;border-bottom:1px solid #757575;
  display:flex;align-items:center;justify-content:flex-start;gap:22px;flex-wrap:wrap}
.pr-search-box{display:flex;align-items:stretch;width:330px;max-width:100%;border:1px solid #6a6a6a;border-radius:6px;overflow:hidden}
.pr-search-box input{flex:1;min-width:0;background:transparent;border:0;color:#fff;padding:11px 16px;
  font-family:var(--font);font-size:16px;outline:none}
.pr-search-box input::placeholder{color:#cfcfcf}
.pr-search-box button{background:#000;border:0;border-left:1px solid #6a6a6a;padding:0 15px;
  cursor:pointer;display:flex;align-items:center}
.pr-search-box button:hover{background:#1a1a1a}
.pr-search-box button svg{width:16px;height:16px;fill:#fff}
.pr{max-width:1196px;margin:0 auto;padding:40px 20px 71px}
.pr .filter-panel{margin:0 0 30px}
.pr-cards{margin-top:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.pr-card{display:flex;flex-direction:column;text-decoration:none}
.pr-card .thumb{width:100%;aspect-ratio:1/1;overflow:hidden;background:#111;border-radius:4px}
.pr-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pr-card .thumb--ph{background:linear-gradient(140deg,#0b1030,#1a1f45 60%,#0b1030);display:flex;align-items:center;justify-content:center}
.pr-card .thumb--ph .ph{width:38%;height:auto;opacity:.45}
.pr-card h3{color:#fff;font-family:var(--font);font-weight:400;font-size:20px;text-transform:uppercase;margin:10px 0 0;line-height:1.2}
.pr-card .date{color:#bdbdbd;font-family:var(--font);font-size:18px;margin-top:6px}
.pr-card:hover h3{text-decoration:underline}
@media(max-width:767px){.pr-cards{grid-template-columns:repeat(2,1fr);gap:15px}}
@media(max-width:479px){.pr-cards{grid-template-columns:1fr}}

/* ===================== PAGE ESPACE PRESSE (formulaire de contact) ===================== */
.ep{padding:40px 20px}
.ep-wrap{max-width:1320px;margin:0 auto;padding:0 100px}
@media(max-width:1023px){.ep-wrap{padding:0}}
.ep-h2{font-family:var(--font);font-weight:500;font-size:20px;color:#fff;margin:0 0 5px}
.ep-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.ep-field{display:flex;flex-direction:column}
.ep-field--full{grid-column:1 / -1}
.ep-field label{color:#fff;font-family:var(--font);font-weight:500;font-size:16px;margin-bottom:8px}
.ep-field label .req{color:#b91c1c;margin-left:3px}
.ep-field input,.ep-field textarea{width:100%;box-sizing:border-box;background:#fff;color:#374151;
  border:1px solid #d1d5db;border-radius:3px;padding:12px 16px;font-family:var(--font);font-size:16px;outline:none}
.ep-field input:focus,.ep-field textarea:focus{border-color:var(--bordeaux)}
.ep-field input::placeholder,.ep-field textarea::placeholder{color:#787e8b}
.ep-field textarea{min-height:150px;resize:vertical}
.ep-footer{grid-column:1 / -1;display:flex;justify-content:center;margin-top:8px}
.ep-submit{background:var(--bordeaux);color:#fff;border:0;border-radius:3px;padding:14px 28px;
  font-family:var(--font);font-weight:500;font-size:16px;cursor:pointer;transition:filter .2s}
.ep-submit:hover{filter:brightness(1.12)}
@media(max-width:600px){.ep-form{grid-template-columns:1fr}.ep-field--half{grid-column:1 / -1}}

/* ===================== PAGE CONTACT ===================== */
.ct{padding:40px 20px}
.ct-wrap{max-width:1320px;margin:0 auto}
.ct-head{display:flex;align-items:center;gap:24px;margin-bottom:64px}
.ct-head h3,.ct-formh{color:#fff;font-family:var(--font-roboto);font-weight:400;font-size:33px;line-height:1.2;margin:0;white-space:nowrap}
.ct-head .ct-rule{flex:1;border-top:1px solid #757575}
.ct-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.ct-info{display:flex;flex-direction:column;align-items:flex-end}
.ct-info .ct-name{color:#fff;font-size:20px;margin-bottom:20px;text-align:right}
.ct-info .ct-line{color:#fff;font-size:20px;margin-bottom:20px;text-align:left}
.ct-map{display:flex;justify-content:center}
.ct-map iframe{width:450px;max-width:100%;height:400px;border:0;opacity:.6}
.ct-formh{margin:40px 0 50px}
.ct-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ct-field{display:flex;flex-direction:column}
.ct-field--full{grid-column:1 / -1}
.ct-field label{color:#fff;font-family:var(--font);font-weight:500;font-size:16px;margin-bottom:8px;text-align:left}
.ct-field label .req{color:#b91c1c;margin-left:3px}
.ct-field input,.ct-field select,.ct-field textarea{width:100%;box-sizing:border-box;background:#fff;color:#374151;
  border:1px solid #d1d5db;border-radius:3px;padding:12px 16px;font-family:var(--font);font-size:16px;outline:none}
.ct-field textarea{min-height:150px;resize:vertical}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:#787e8b}
.ct-footer{grid-column:1 / -1;display:flex;justify-content:flex-end}
.ct-submit{background:#2D2D2D;color:#fff;border:0;border-radius:3px;padding:14px 28px;font-family:var(--font);font-weight:500;font-size:16px;cursor:pointer;transition:filter .2s}
.ct-submit:hover{filter:brightness(1.25)}
.ct-note{grid-column:1 / -1;color:#fff;font-size:16px;margin-top:20px}
@media(max-width:1119px){.ct-cols{grid-template-columns:1fr}.ct-info{align-items:center}.ct-info .ct-name,.ct-info .ct-line{text-align:center}}
@media(max-width:600px){.ct-form{grid-template-columns:1fr}.ct-field--half{grid-column:1 / -1}}
@media(max-width:479px){.ct-head{flex-direction:column;align-items:flex-start}.ct-head h3,.ct-formh{font-size:26px;white-space:normal}.ct-head .ct-rule{width:100%}}

/* ===================== ARTICLE ===================== */
.article{max-width:840px;margin:0 auto}
.breadcrumb{color:#9a9a9a;font-size:.85rem;margin:6px 0 18px}
.breadcrumb a{color:#9a9a9a}
.article h1{font-size:38px;color:#fff;margin-bottom:14px}
.article .article-meta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;color:#bdbdbd;
  font-size:.9rem;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid #222}
.article .article-meta > span{display:inline-flex;align-items:center;gap:8px}
.article .article-meta svg{width:16px;height:16px;fill:var(--purple)}
.article .taglist{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.tagpill{background:var(--bordeaux);color:#fff;font-size:.72rem;padding:4px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.03em}
.tagpill.soft{background:#1c1c30}
.article .cover{border-radius:8px;overflow:hidden;margin-bottom:24px}
.prose{font-size:1.06rem;color:#e6e6ee}
.prose h2{color:#fff;font-size:1.6rem;margin:30px 0 12px}
.prose h3{color:#fff;font-size:1.25rem;margin:24px 0 10px}
.prose p{margin:0 0 16px}
.prose .lead{font-size:1.2rem;color:#fff}
.prose a{color:#8aa0ff;border-bottom:1px solid rgba(138,160,255,.4)}
.prose ul{padding-left:22px;margin:0 0 16px}

/* ===================== PAGE GÉNÉRIQUE ===================== */
.page-body{max-width:1280px;margin:0 auto}

/* ===================== PAGE LE SYNDICAT ===================== */
.syndicat{max-width:1280px;margin:0 auto;text-align:left}
.syndicat .lead{font-size:1.35rem;color:#fff;text-align:center;margin:0 auto 10px;max-width:760px}
.syndicat h2.blk{font-size:clamp(30px,3.4vw,39px);color:#fff;font-weight:500;text-align:center;margin:48px 0 8px}
.syndicat h2#Reussites{text-align:left}
.syndicat h2.accent{font-size:clamp(30px,3.4vw,39px);color:#fff;font-weight:500;text-align:center;letter-spacing:.04em;margin:56px 0 20px}
.syndicat h2.accent::after{content:"";display:block;width:896px;max-width:100%;margin:26px auto 0;border-top:1px solid rgba(255,255,255,.55)}
.syndicat h3{font-size:clamp(28px,2.6vw,31px);color:#fff;font-weight:500;margin:0 0 14px}
.syndicat p{color:#d7d8e6;font-size:18px;margin:0 0 16px;text-align:left}
.syndicat .intro{max-width:896px;margin:0 auto;text-align:left}
.syndicat p.wide{max-width:1152px;margin:22px auto;text-align:left}
.syndicat-row{max-width:1152px;margin:44px auto;display:grid;grid-template-columns:1fr 330px;gap:44px;align-items:center}
.syndicat-row .txt{min-width:0}
.syndicat-row .img{display:flex;justify-content:center}
.syndicat-row .img img{width:330px;height:312px;object-fit:cover;border-radius:10px;display:block}
.syndicat-row.reverse{grid-template-columns:330px 1fr}
@media(max-width:820px){.syndicat-row,.syndicat-row.reverse{grid-template-columns:1fr;gap:22px}.syndicat-row .img img{width:100%;height:auto}}

.reussites{max-width:1280px;margin:14px auto 0;display:flex;flex-direction:column;gap:10px}
.reussites-row{display:grid;gap:10px}
.reussite-box{position:relative;min-height:275px;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:16px;color:#fff;font-family:var(--font-roboto);font-weight:500;line-height:1.2;
  font-size:clamp(20px,2.4vw,33px);background:#141433 center/cover no-repeat;overflow:hidden;
  cursor:pointer;border:0}
.reussite-box::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.51);transition:background .2s}
.reussite-box > span{position:relative;z-index:1;padding:0 10px}
.reussite-box:hover::before{background:rgba(0,0,0,.32)}
.reussite-box.static{cursor:default}
.reussite-box.static:hover::before{background:rgba(0,0,0,.51)}
@media(max-width:767px){.reussites-row{grid-template-columns:1fr!important}.reussite-box{min-height:200px}}

/* Bandeau de page (hero avec image) */
.page-banner{position:relative;padding:0;background:#111 center/cover no-repeat}
.page-banner::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45)}
.page-banner .wrap{position:relative;z-index:2;min-height:65vh;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;text-align:center;padding-bottom:56px}
.page-banner h1{font-size:40px;color:#fff;margin:0}
.page-banner .banner-sub{color:#fff;font-family:var(--font);font-size:20px;margin-top:14px}
@media(max-width:767px){.page-banner .wrap{min-height:44vh}.page-banner h1{font-size:34px}}

/* ---- Pop-ups ---- */
.bd-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:1050;display:none;backdrop-filter:blur(3px)}
.bd-overlay.open{display:block}
.bd-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.96);z-index:1051;
  background:#14152f;border:1px solid #2c2c55;color:#e6e6ee;width:92vw;max-width:740px;max-height:86vh;
  overflow:auto;border-radius:12px;padding:40px 42px;display:none;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.bd-popup.open{display:block;animation:bdpop .18s ease-out forwards}
@keyframes bdpop{to{transform:translate(-50%,-50%) scale(1)}}
.bd-popup h2{color:#fff;font-size:1.6rem;margin:0 0 18px;padding-right:30px}
.bd-popup p{color:#d7d8e6;font-size:1.03rem;margin:0 0 14px;line-height:1.6}
.bd-popup-close{position:absolute;top:14px;right:16px;width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(255,255,255,.08);color:#fff;font-size:1.2rem;cursor:pointer;line-height:1;display:flex;
  align-items:center;justify-content:center}
.bd-popup-close:hover{background:var(--bordeaux)}

/* ---- Vidéo YouTube (façade) ---- */
.syndicat-video{padding:36px 0 0}
.syndicat-video .wrap{display:flex;justify-content:center}
.yt-facade{position:relative;width:600px;max-width:100%;aspect-ratio:4/3;background:#000 center/cover no-repeat;
  border-radius:10px;overflow:hidden;cursor:pointer;box-shadow:0 14px 40px rgba(0,0,0,.45)}
.yt-facade::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.12);transition:.2s}
.yt-facade:hover::before{background:rgba(0,0,0,0)}
.yt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:74px;height:52px;border:0;
  border-radius:14px;background:rgba(0,0,0,.62);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.yt-facade:hover .yt-play{background:var(--bordeaux)}
.yt-play svg{width:30px;height:30px;fill:#fff;margin-left:3px}
.yt-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Dégradé sombre en haut de la miniature vidéo (façade lite-youtube) */
.yt-facade .yt-top{position:absolute;top:0;left:0;right:0;height:40%;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,0))}
.yt-facade .yt-play{z-index:2}
.yt-facade.yt-loaded::before{display:none}

/* ===================== PAGE INFOS PRATIQUES ===================== */
/* Typographie fidèle au site (Breakdance) : Questrial partout.
   H1 40px/500 (30px mobile) · sous-titre 16px/400 · tuiles 28px/400. */
.infos-banner{background-position:center center}
.infos-banner::after{background:rgba(0,0,0,.3)}
.infos-banner .wrap{min-height:40vh;align-items:flex-start;justify-content:flex-end;text-align:left;padding:40px 20px}
.infos-banner h1{font-family:var(--font);font-size:40px;font-weight:500;line-height:1.2}
.infos-banner .banner-sub{font-family:var(--font);font-size:16px;font-weight:400;line-height:1.5;text-align:left;max-width:640px;margin:10px 0 0}
@media(max-width:767px){.infos-banner h1{font-size:30px}}

.infos-tiles{max-width:1320px;margin:40px auto 56px;display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.infos-tile{position:relative;min-height:300px;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:18px;color:#fff;text-decoration:none;font-family:var(--font);
  font-weight:400;line-height:1.2;font-size:28px;background:#141433 center/cover no-repeat;
  overflow:hidden;border-radius:35px}
.infos-tile::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .2s}
.infos-tile > span{position:relative;z-index:1;padding:0 8px;text-shadow:0 1px 6px rgba(0,0,0,.55),0 0 2px rgba(0,0,0,.5)}
.infos-tile:hover::before{background:rgba(0,0,0,.12)}
@media(max-width:767px){.infos-tiles{grid-template-columns:1fr;gap:20px}.infos-tile{min-height:220px}}

/* ===================== PAGE NOUS REJOINDRE ===================== */
.nr-section{padding:40px 20px}
/* Tout le contenu de cette page doit faire 1280px de large, indépendamment
   de la limite de 900px du gabarit générique (.page-body). Chacun de ces 4
   blocs est un conteneur de premier niveau dans le Contenu (aucun n'est
   imbriqué dans un autre), donc on applique à chacun la même technique de
   centrage indépendant de la largeur du parent (margin-left:50% +
   transform:translateX(-50%)), sans risque de double décalage. Les enfants
   (h2, .nr-lead, .nr-gallery...) remplissent ensuite simplement ces 1280px. */
.nr-wrap,
.nr-center,
.nr-row,
.nr-cta{
  width:1280px;
  max-width:calc(100vw - 40px);
  margin-left:50%;
  transform:translateX(-50%);
}
.nr-center{text-align:center}
/* Taille du H2 "Pourquoi adhérer à UN1TÉ ?" : 39px, calquée sur le site
   d'origine (var(--bde-h2-font-size) du thème WordPress, non disponible ici).
   Aligné à gauche, contrairement au reste du bloc (.nr-center centre tout
   par défaut) ; le paragraphe juste en dessous reste centré. */
.nr-center h2{font-size:39px;text-align:left;margin:0}
/* Paragraphe "UN1TÉ est le 1er Syndicat..." juste après ce H2 : 100px
   d'espace en dessous au lieu des 16px par défaut (.prose p). */
.nr-center h2 + .nr-lead{margin-top:0;margin-bottom:100px}
.nr-lead{font-family:var(--font);font-weight:400;font-size:33px;line-height:1.4;color:#fff;text-align:center;margin:40px 0}
.nr-justify{max-width:850px;font-size:20px;line-height:1.5;color:#fff;text-align:left}
/* Bloc "UN1TÉ inscrit son action..." : centré via flexbox (colonne +
   align-items:center) plutôt que margin:auto, sur demande. 80px en dessous
   (le sélecteur à deux classes passe devant .prose p, qui mettrait 16px). */
.nr-wrap{display:flex;flex-direction:column;align-items:center}
.nr-wrap .nr-justify{margin-bottom:80px}
/* Galerie 5 profils : remplit simplement son parent .nr-center, déjà à
   1280px (voir règle commune plus haut). Largeur des vignettes en % (20% =
   1/5) pour rester proportionnelle. Sur petit écran, on repasse en grille
   3+2 puis 2+2+1 pour rester lisible (voir media queries plus bas). */
.nr-gallery{width:100%;margin:0;margin-bottom:80px;display:flex !important;flex-wrap:nowrap;justify-content:center;gap:0;font-size:0}
.nr-gitem{position:relative;width:20%;aspect-ratio:1/1;margin:0;overflow:hidden;background:#00000030;display:block;flex:0 0 20%}
.nr-gitem img{width:100%;height:100%;object-fit:cover;opacity:1;display:block;transition:transform .3s}
.nr-gitem:hover img{transform:scale(1.03)}
.nr-gitem figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 14px;color:#fff;
  font-family:var(--font);font-weight:500;font-size:20px;text-align:center;
  background:linear-gradient(0deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.35) 61%,rgba(0,0,0,0) 100%)}
/* Lignes image/texte 50-50 */
.nr-row{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.nr-row .img{display:flex;justify-content:center}
.nr-row .img img{width:400px;max-width:100%;height:400px;object-fit:cover;display:block}
.nr-row .txt h2{margin:0 0 20px}
.nr-row .txt p{font-size:20px;line-height:1.5;color:#fff;text-align:justify;margin:0}
/* CTA */
.nr-cta{text-align:center;padding:40px 20px}
.nr-cta h1{margin:0 0 20px}
.nr-btn{display:inline-block;background:#760019;color:#fff;text-decoration:none;font-family:var(--font);
  font-weight:500;font-size:16px;padding:16px 42px;border-radius:3px;transition:filter .2s}
.nr-btn:hover{filter:brightness(1.12)}
/* .prose a (color:#8aa0ff) a plus de spécificité qu'une simple classe .nr-btn
   et gagnait sur le texte des boutons : on force le blanc explicitement. */
.prose a.nr-btn,
.prose .nr-btn{color:#fff;border-bottom:none}
@media(min-width:1024px){.nr-row--txtleft .img{order:2}.nr-row--txtleft .txt{order:1}}
@media(max-width:1023px){
  .nr-row,.nr-row--txtleft{grid-template-columns:1fr;gap:24px}
  .nr-row .txt{text-align:center}.nr-row .txt p{text-align:center}
  .nr-justify{text-align:center}
}
/* Sur petit écran, 5 vignettes de 20% deviennent trop étroites pour rester
   lisibles : on repasse en grille qui wrap (3 puis 2, ou 2/2/1). */
@media(max-width:640px){
  .nr-gallery{flex-wrap:wrap}
  .nr-gitem{width:33.333%;flex:0 0 33.333%}
}
@media(max-width:420px){
  .nr-gitem{width:50%;flex:0 0 50%}
}
@media(max-width:767px){.infos-tiles{grid-template-columns:1fr;gap:20px}.infos-tile{min-height:220px}}

/* ===================== RECHERCHE NATINF (page publique) ===================== */
.natinf-search{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:24px}
.natinf-search-field{position:relative;flex:1;min-width:220px}
.natinf-search-field input,
.natinf-search-field select{
  width:100%;padding:16px 20px 16px 46px;border:1px solid #fff;border-radius:8px;
  background:transparent;color:#fff;font-size:16px;font-family:inherit;
}
.natinf-search-field input::placeholder{color:#bdbdbd;opacity:1}
.natinf-search-field svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:18px;height:18px;fill:#fff;pointer-events:none}
/* Menu déroulant Catégorie : pas d'icône loupe (pas de padding-left), flèche
   personnalisée en blanc plutôt que la flèche native du navigateur. */
.natinf-search-select select{
  padding-left:20px;padding-right:44px;color:#bdbdbd;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:16px;
}
.natinf-search-select select option{color:#111}

/* ===================== GRILLES INDICIAIRES (page publique) ===================== */
/* Reproduction fidèle de grilles-indiciaires.html : cartes photo (Province,
   Versailles, Paris/Corse/Versailles/SC, PATS-PTS, CRS, DOM-TOM, Traitements
   et pensions) avec bulles de liens PDF rondes. Voir app/views/grilles.php. */
.gi{padding:40px 20px}
.gi-wrap{max-width:1320px;margin:0 auto}
.gi-h2{font-family:var(--font);font-weight:500;font-size:32px;color:#fff;text-align:center;margin:0 0 50px}
.gi-title{font-family:var(--font);font-weight:500;font-size:40px;color:#fff;margin:100px 0;line-height:1.15}
.gi-title--sm{margin:6px 0 52px}
.gi-subtitle{font-family:var(--font);font-weight:400;font-size:31px;color:#fff;margin:0 0 35px}
/* Cartes */
.gi-top3{display:grid;grid-template-columns:40fr 30fr 30fr;gap:32px;margin-bottom:100px;align-items:stretch}
.gi-card{position:relative;border-radius:50px;background-size:cover;background-repeat:no-repeat;background-position:center;
  overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:0 20px 20px}
.gi-card--full{width:100%}
.gi-card--pats{margin-bottom:100px}
.gi-card--dom{margin-top:100px}
.gi-card--pens{margin-top:100px;padding:40px 20px;justify-content:center}
.gi-card>*{position:relative;z-index:1}
.gi-ov{position:absolute;inset:0;z-index:0;background:#000;opacity:.1;mix-blend-mode:darken}
.gi-ov--5{opacity:.5;mix-blend-mode:normal}
/* Bulles */
.gi-bubbles{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:10px;margin-bottom:20px}
/* DOM-TOM : les 4 bulles se répartissent sur toute la largeur de la carte
   (1280px), comme les colonnes égales de la maquette d'origine, plutôt que
   d'être resserrées et centrées dans une boîte de 900px. */
.gi-bubbles--4{width:100%;max-width:1280px;justify-content:space-between;gap:20px;padding:0 80px;box-sizing:border-box}
.gi-bubbles--gap{gap:25px}
.gi-bubble{width:125px;height:125px;flex:0 0 auto;border:1px solid #fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;
  color:#fff;font-family:var(--font);font-size:20px;line-height:1.15;text-decoration:none;
  background:rgba(255,255,255,0);transition:background .25s,transform .2s}
.gi-bubble:hover{background:rgba(255,255,255,.18);transform:scale(1.05)}
/* CRS : deux groupes */
/* Deux colonnes égales (Province / Versailles) qui se répartissent toute la
   largeur de la carte, plutôt qu'un groupe centré et resserré. */
.gi-crs{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:40px;max-width:1280px;margin:0 auto}
.gi-crs-col{display:flex;flex-direction:column;align-items:center;gap:14px}
.gi-crs-label{font-family:var(--font);font-size:20px;color:#fff}
@media(max-width:1119px){
  .gi-top3{grid-template-columns:1fr;gap:24px}
  .gi-title{margin:60px 0}
  .gi-card{padding-bottom:30px}
}
@media(max-width:767px){
  .gi-h2{font-size:28px}.gi-title{font-size:30px}.gi-subtitle{font-size:26px}
  .gi-crs{padding:24px 12px;gap:28px}
}

/* =========================================================================
   PAGE ARTICLE — reproduit la maquette "article-template.html" (police
   Montserrat, palette rouge-vénitien/bleu-unité). Le header/footer du site
   restent ceux de partials/layout.php ; seul le contenu de la page (barre
   catégorie, en-tête article, contenu, bloc PDF, sidebar) est concerné.
   ========================================================================= */
.art-page{
  --art-blue:#323084;
  --art-blue-light:#4a48a0;
  --art-grey-light:#e8e8ee;
  --art-grey-mid:#9090a8;
  --art-grey-dark:#3a3a5a;
  --art-text:#d0d0e0;
  font-family:'Montserrat',sans-serif;
  background:transparent; /* essai : fond transparent (site déjà en noir), au lieu du dégradé bleu nuit d'origine */
  color:var(--art-text);
}
.art-catbar{background:rgba(0,0,60,.7);border-bottom:2px solid var(--bordeaux);backdrop-filter:blur(4px)}
.art-catbar-inner{display:flex;align-items:center;gap:1rem;padding:.55rem 20px}
.art-catpill{font-size:.65rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:var(--bordeaux);color:#fff;padding:.2rem .85rem;flex-shrink:0}
.art-catsep{width:16px;height:1px;background:var(--art-grey-dark);flex-shrink:0}
.art-breadcrumb{font-size:.75rem;color:var(--art-grey-mid)}
.art-breadcrumb a{color:var(--art-grey-mid);text-decoration:none}
.art-breadcrumb a:hover{color:#fff;opacity:1}
.art-breadcrumb span{margin:0 .25rem}

.art-wrapper{padding:2.5rem 20px;display:grid;grid-template-columns:1fr 300px;gap:3rem;align-items:start;max-width:1200px}

.art-header{border-bottom:1px solid rgba(50,48,132,.4);padding-bottom:2rem;margin-bottom:2rem}
.art-meta-top{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem;flex-wrap:wrap}
.art-tag-rubrique{font-size:.65rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--art-blue);padding:.2rem .8rem}
.art-meta-sep{width:16px;height:1px;background:var(--art-grey-dark);flex-shrink:0}
.art-meta-date,.art-meta-lecture{font-size:.75rem;color:var(--art-grey-mid)}

.art-title{font-family:'Montserrat',sans-serif;font-size:2.5rem;font-weight:900;line-height:1.1;text-transform:uppercase;color:#fff;margin:0 0 1.2rem}

.art-chapeau{font-size:.92rem;font-weight:500;font-style:italic;color:#b0b0cc;line-height:1.65;border-left:3px solid var(--bordeaux);padding-left:1.1rem;margin:0 0 1.5rem}

.art-auteur{display:flex;align-items:center;gap:.8rem;font-size:.8rem;color:var(--art-grey-mid)}
.art-auteur-avatar{width:36px;height:36px;border-radius:50%;background:var(--art-blue);border:2px solid var(--art-blue-light);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;color:#fff;flex-shrink:0}
.art-auteur-nom{color:var(--art-grey-light);font-weight:700}

.art-figure{margin:0 0 2rem}
.art-figure img{width:100%;height:400px;object-fit:cover;object-position:top;display:block}

/* Le champ Contenu est un simple textarea (pas d'éditeur riche) : les sauts de
   ligne tapés à la rédaction sont de simples "\n" dans le HTML enregistré, que
   les navigateurs ignorent par défaut (white-space:normal). pre-line les
   restitue visuellement sans toucher au contenu stocké ni aux autres usages
   (résumés de cartes, JSON-LD...). On repasse en normal sur les balises de
   bloc existantes (si l'admin a quand même utilisé <p>/<li>/<h2>...) pour
   éviter un double espacement avec les marges déjà définies ci-dessous. */
.art-contenu{font-size:.95rem;font-weight:400;line-height:1.85;color:var(--art-text);white-space:pre-line}
.art-contenu p,.art-contenu li,.art-contenu blockquote,.art-contenu h2,.art-contenu h3{white-space:normal}
.art-contenu h2{font-size:1.4rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:#fff;margin:2.5rem 0 1rem;padding-bottom:.5rem;border-bottom:2px solid var(--art-blue)}
.art-contenu h3{font-size:.95rem;font-weight:600;color:var(--art-grey-light);text-transform:uppercase;letter-spacing:.1em;margin:2rem 0 .8rem}
.art-contenu p{margin:0 0 1.4rem}
.art-contenu blockquote{margin:2rem 0;padding:1.4rem 1.6rem;background:rgba(50,48,132,.15);border-left:4px solid var(--art-blue);border-top:1px solid rgba(50,48,132,.3);border-bottom:1px solid rgba(50,48,132,.3);font-style:italic;font-size:1rem;font-weight:500;color:#c8c8e0}
.art-contenu ul{padding-left:1.5rem;margin:0 0 1.4rem}
.art-contenu li{margin-bottom:.5rem}
.art-contenu li::marker{color:var(--bordeaux)}
.art-contenu a{color:var(--art-blue-light);text-decoration:none;border-bottom:1px solid rgba(50,48,132,.5)}
.art-contenu a:hover{color:#fff;opacity:1}

.art-pdf{margin-top:2.5rem;background:rgba(0,0,60,.6);border:1px solid rgba(50,48,132,.5);border-left:4px solid var(--bordeaux);padding:1.5rem 2rem;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.art-pdf-icon{width:52px;height:52px;background:var(--bordeaux);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.art-pdf-icon svg{width:26px;height:26px;fill:#fff}
.art-pdf-info{flex:1;min-width:180px}
.art-pdf-title{font-size:.88rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.07em;margin-bottom:.25rem}
.art-pdf-meta{font-size:.75rem;color:var(--art-grey-mid)}
.art-btn-pdf{display:inline-flex;align-items:center;gap:.5rem;background:var(--art-blue);color:#fff;padding:.65rem 1.4rem;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:background .2s;flex-shrink:0}
.art-btn-pdf:hover{background:var(--art-blue-light);opacity:1}
.art-btn-pdf svg{width:15px;height:15px;fill:currentColor}

.art-sidebar-block{background:rgba(0,0,40,.7);border:1px solid rgba(50,48,132,.4);margin-bottom:1.5rem;overflow:hidden;backdrop-filter:blur(4px)}
.art-sidebar-head{padding:.65rem 1.2rem;background:var(--art-blue);font-size:.68rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#fff}
.art-sidebar-miniature{display:block;cursor:zoom-in}
.art-sidebar-miniature img{width:100%;height:auto;display:block}
.art-tags-wrap{padding:1rem 1.2rem;display:flex;flex-wrap:wrap;gap:.5rem}
.art-tag{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .75rem;border:1px solid var(--art-grey-dark);color:var(--art-grey-mid);text-decoration:none;transition:all .2s}
.art-tag:hover{border-color:var(--bordeaux);color:#fff;background:rgba(118,0,25,.2);opacity:1}

@media(max-width:900px){
  .art-wrapper{grid-template-columns:1fr}
  .art-title{font-size:1.9rem}
}

/* =========================================================================
   PAGE RÉGIONS — reproduit la maquette "archives-regions.html" (clic sur une
   région de la carte d'accueil, voir partials/france_map.php). Réutilise les
   classes déjà partagées avec /actualites (.page-hero, .filter-bar,
   .filter-toggle, .filter-panel, .pagination, .doc-card via article_card()) :
   seuls les éléments propres à cette page sont définis ici.
   ========================================================================= */
.reg{max-width:1320px;margin:0 auto;padding:0 20px 40px}
.reg-bar{display:flex;gap:14px;align-items:center;margin:20px auto 26px;flex-wrap:wrap;max-width:1115px}
/* .filter-panel est une classe partagée (actualites.php, presse…) : on ne
   touche pas la règle globale, on cale juste sa largeur sur .reg-bar ici. */
.reg .filter-panel.open{max-width:1115px;margin-left:auto;margin-right:auto}
.reg-search{flex:1;min-width:240px;display:flex;align-items:center;gap:10px;background:#111;border:1px solid #3a3a3a;border-radius:26px;padding:10px 18px;margin:0}
.reg-search svg{fill:#9a9ab5;flex:none}
.reg-search input{flex:1;background:transparent;border:0;color:#fff;font-family:var(--font);font-size:16px;outline:none}
.reg-search input::placeholder{color:#9a9ab5}
/* Vignettes .doc-card à taille fixe 318x406 sur la page Régions uniquement
   (ne touche pas .cards, réutilisé par l'accueil/actualites avec des colonnes
   fluides). Grille centrée pour absorber le reliquat de largeur. */
.reg-cards{display:grid;grid-template-columns:repeat(3,318px);justify-content:center;gap:24px}
.reg-cards .doc-card{width:318px;height:406px;min-height:406px}
@media(max-width:1023px){.reg-cards{grid-template-columns:repeat(2,318px)}}
@media(max-width:640px){
  .reg-cards{grid-template-columns:1fr}
  .reg-cards .doc-card{width:100%;max-width:318px;margin:0 auto}
}
.reg-empty{color:#9a9ab5;padding:30px 0;text-align:center}

/* ===================== PAGE ACTUALITÉS (clone un1te.fr/actualites) =====================
   Réutilise .actu-tabs, .cards/.doc-card, .reg-bar/.reg-search,
   .filter-panel/.filter-bar, .pr-cards/.pr-card, .pagination, .section-title,
   .voir-plus. Seul ajout : décalage des ancres #tracts/#articles sous le
   header sticky (142px, voir .site-header .bar) pour que les liens d'onglet
   ne masquent pas le haut de la section visée. */
#tracts,#articles{scroll-margin-top:150px}
@media(max-width:767px){#tracts,#articles{scroll-margin-top:24px}}

/* Hero à deux colonnes (texte+onglets à gauche, visuel à droite, voir
   maquette WordPress d'origine — un seul visage "Group-95.png" composé, pas
   une mosaïque générée dynamiquement). Le visuel vient du champ Bannière de
   la page Pages "actualites" (admin) ; sans image, seul le texte s'affiche
   (pleine largeur). */
/* LE VISUEL VA JUSQU'AU BORD DROIT DE LA PAGE, comme sur un1te.fr/actualites/.
   Relevé au navigateur sur l'ancienne page (fenêtre de 1440 px, page de
   1425 px) : bandeau de 369 px de haut, texte à gauche, visuel de 600x369
   dont le bord droit tombe EXACTEMENT sur 1425 — donc aucune gouttière à
   droite — sans arrondi, et la hauteur du bandeau est celle du visuel (pas de
   marge noire au-dessus ni en dessous). L'ancienne page y arrivait avec un
   conteneur en flex dont le padding droit était nul.

   Ici .actu-hero-grid porte aussi la classe .wrap (max-width:1320px centré,
   padding 0 20px) : on annule ce cadrage et on le remplace par un SEUL padding
   à gauche, calculé pour que le texte reste aligné sur le reste du site
   (gouttière de .wrap + ses 20 px), pendant que la colonne de droite court
   jusqu'au bord. Le max() évite un padding négatif sous 1320 px de large.
   La colonne du visuel est en minmax(0,600px) : elle prend 600 px quand il y a
   la place — la largeur de l'ancienne maquette — et se réduit ensuite, le texte
   absorbant le reste. */
.actu-hero{background:#000;padding:0}
.actu-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);
  gap:30px;align-items:center;max-width:none;
  padding:0 0 0 max(20px, calc((100% - var(--wrap)) / 2 + 20px))}
.actu-hero-text h1{font-size:2.6rem;color:#fff;font-weight:500;margin:0 0 16px}
.actu-hero-text p{color:#cfcfcf;font-family:var(--font);font-size:1.05rem;line-height:1.5;margin:0 0 26px;max-width:480px}
/* Arrondi retiré : sur un bord de page, un coin arrondi laisse voir deux
   encoches de fond noir. object-fit sans effet ici (l'image garde ses
   proportions), gardé pour un visuel au format inattendu. */
.actu-hero-media img{width:100%;height:auto;display:block;border-radius:0;object-fit:cover}
/* Bandeau SANS visuel (champ Bannière vide dans admin/pages) : la classe est
   posée par actualites.php. Sans elle, la grille garderait sa 2e colonne de
   600 px vide et le texte serait tassé à gauche ; et collé en haut de page,
   sans la hauteur du visuel pour le porter, il manquerait d'air.
   Choisi plutôt qu'un sélecteur :has() : celui-ci est ignoré en entier par les
   navigateurs qui ne le connaissent pas, et la page tomberait alors dans le
   cas qu'on cherche justement à éviter. */
.actu-hero-grid.actu-hero-solo{grid-template-columns:minmax(0,1fr);
  max-width:var(--wrap);margin:0 auto;padding:70px 20px}
/* Bascule en colonne à 1023 px et non 900 : mesuré au navigateur, entre 900 et
   1024 px la colonne de texte tombe sous 380 px, les quatre onglets passent à un
   par ligne et le bandeau grandit jusqu'à 423 px alors que le visuel en fait
   369 — le texte débordait du visuel au lieu de rester centré en face. */
@media(max-width:1023px){
  /* Empilé : on revient au cadrage normal de .wrap, sinon le visuel touche le
     bord droit mais garde 20 px à gauche — asymétrie visible en petit écran. */
  .actu-hero{padding:40px 0}
  .actu-hero-grid{grid-template-columns:1fr;gap:26px;
    max-width:var(--wrap);margin:0 auto;padding:0 20px}
  .actu-hero-media{order:-1}
  .actu-hero-media img{border-radius:8px}
  .actu-hero-text h1{font-size:2rem}
}

/* ===================== STATUT D'ABONNEMENT NEWSLETTER =====================
   Page unique des liens reçus par e-mail : confirmation d'inscription,
   désabonnement, réabonnement (voir app/views/newsletter_statut.php). Une carte
   centrée, étroite : il n'y a qu'une information à lire, et elle doit se voir.
   Couleurs écrites en dur plutôt qu'en var() — le thème public n'a pas de
   variable pour un vert/rouge d'état, et inventer ici une variable que le reste
   de la feuille ignore n'aiderait personne. */
.nl-statut{max-width:620px;margin:10px auto 30px;background:#0d0d16;border:1px solid var(--line);
  border-radius:16px;padding:38px 34px;text-align:center}
.nl-pastille{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;
  border-radius:50%;font-size:30px;line-height:1;margin-bottom:20px;font-family:var(--font-roboto)}
.nl-pastille.ok{background:rgba(18,183,106,.14);color:#39d98a;border:1px solid rgba(57,217,138,.45)}
.nl-pastille.off{background:rgba(240,68,56,.12);color:#ff8a80;border:1px solid rgba(255,138,128,.4)}
.nl-pastille.neutre{background:rgba(255,255,255,.07);color:#cfcfcf;border:1px solid var(--line)}
.nl-statut h2{font-size:26px;line-height:1.25;margin:0 0 14px}
/* L'adresse concernée : c'est l'élément que la personne vient vérifier
   (« est-ce bien la mienne ? »), d'où le cadre qui la détache du texte. */
.nl-adresse{display:inline-block;margin:0 0 18px;padding:7px 16px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  color:#fff;font-size:15px;word-break:break-all}
.nl-texte{color:#bdbdbd;font-size:16px;line-height:1.6;margin:0 auto 24px;max-width:480px}
.nl-actions{margin:0 0 22px}
.btn.discret{background:transparent;border:1px solid var(--line);color:#cfcfcf}
.btn.discret:hover{border-color:#fff;color:#fff;filter:none}
.nl-liens{margin:0;font-size:15px}
.nl-liens a{text-decoration:underline}
.nl-liens span{color:#6b6b6b;margin:0 8px}
.nl-note{color:#8f8f8f;font-size:13px;line-height:1.6;margin:22px auto 0;max-width:480px;
  padding-top:18px;border-top:1px solid var(--line)}
@media(max-width:600px){
  .nl-statut{padding:28px 20px;border-radius:12px}
  .nl-statut h2{font-size:22px}
  /* Les libellés de boutons sont longs (« Ce n'était pas volontaire, me
     réabonner ») : sans ce retour à la ligne autorisé, .btn les garde sur une
     seule ligne (white-space:nowrap) et le bouton déborde de l'écran. */
  .nl-actions .btn{white-space:normal;text-align:center}
}

/* ===================== PAGE ARTICLES (clone un1te.fr/articles) =====================
   Grille de vignettes en QUATRE colonnes : visuel carré recadré, puis titre en
   capitales et date, sur le fond noir de la page — pas de cadre ni de fond de
   carte, et le texte est SOUS l'image, contrairement à .doc-card
   (.reg-cards/.actu-cards) qui superpose la légende sur le visuel.
   Réutilise .reg, .pr-searchrow, .filter-panel et .pagination.

   Une version précédente affichait de simples liens texte « Titre - date » :
   la conversion en texte de la page d'origine, qui perd les images, m'avait
   fait conclure à tort qu'elle n'avait pas de vignettes. */
.art-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 24px;margin-top:26px}
.art-card{display:flex;flex-direction:column;text-decoration:none}
.art-card .thumb{display:block;width:100%;aspect-ratio:1/1;overflow:hidden;background:#111;border-radius:4px}
.art-card .thumb img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
/* Sans visuel : le logo sur un fond dégradé, plutôt qu'un carré vide. */
.art-card .thumb--ph{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#0b1030,#1a1f45 60%,#0b1030)}
.art-card .thumb--ph img{width:52%;height:auto;object-fit:contain;opacity:.5}
.art-card h3{color:#fff;font-family:var(--font);font-weight:400;font-size:20px;
  text-transform:uppercase;margin:14px 0 0;line-height:1.22}
.art-card .date{color:#bdbdbd;font-family:var(--font);font-size:17px;margin-top:8px}
.art-card:hover h3{text-decoration:underline}
@media(max-width:1100px){.art-cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.art-cards{grid-template-columns:repeat(2,1fr);gap:26px 16px}}
@media(max-width:479px){.art-cards{grid-template-columns:1fr;gap:22px}}

/* Vignettes .doc-card à taille fixe 331x406 sur la page Actualités
   uniquement (même principe que .reg-cards pour la page Régions — ne touche
   pas .cards, réutilisé tel quel par l'accueil et "À lire aussi"). Rangée en
   défilement horizontal (pas de grille à colonnes fixes) : la flèche
   .actu-arrow fait défiler .actu-cards vers la droite pour révéler les
   publications suivantes, voir app/views/actualites.php. */
.actu-scroll-wrap{position:relative}
.actu-cards{display:flex;overflow-x:auto;gap:20px;scroll-behavior:smooth;scroll-snap-type:x proximity;
  padding-bottom:6px;scrollbar-width:none}
.actu-cards::-webkit-scrollbar{display:none}
.actu-cards .doc-card{flex:0 0 331px;width:331px;height:406px;min-height:406px;scroll-snap-align:start}
.actu-arrow{position:absolute;top:50%;right:10px;transform:translateY(-50%);width:44px;height:44px;
  border-radius:50%;background:#000;border:1px solid #fff;color:#fff;display:flex;align-items:center;
  justify-content:center;cursor:pointer;z-index:5;transition:background .15s,color .15s}
.actu-arrow:hover{background:#fff;color:#000}
@media(max-width:640px){.actu-cards .doc-card{width:78vw;flex-basis:78vw}}