/* ============================================================================
   BLOCKS.CSS — LA feuille de styles de batao.org (chantier blocs, 02/07/2026).

   Règles du jeu :
   1. Les pages migrées chargent CETTE feuille et rien d'autre.
   2. Un bloc = une section de ce fichier, autosuffisante. AUCUNE règle ne
      traverse les blocs. Les primitives (hat, boutons, section-head) sont
      des blocs à part entière ; un bloc peut ajuster l'espacement d'une
      primitive qu'il contient, dans SA section à lui.
   3. Toute valeur vient des tokens du :root ci-dessous. Interdits : couleur,
      taille de police, rayon ou espacement en dur (exceptions géométriques :
      50% des cercles, coordonnées du clip-path du montage).
   4. La référence de markup est tools/blocs.html (jamais déployé).
   Sommaire : TOKENS · FONTES · SOCLE · ÉTATS JS · PRIMITIVES (hat, boutons,
   section-head) · HEADER · FOOTER · HEADING · HERO · SERVICES · HSCROLL ·
   BE-FIGURES · CARDS · CARD-ITEM · CAROUSEL · MEDIA · MEDIA-VIDEO ·
   PARAGRAPH · PERSONA-LINKS · PERSONA-CTA · PRESS-CONTACT · PARTNERS ·
   CONTACT-BLOCK · ARTICLES · GALERIE+LIGHTBOX · LITE-YT
   ============================================================================ */


/* ============================================================
   TOKENS — variables partagées (feuille Design 03/07, déplacée
   ici depuis clean.css ; source : audits/DESIGN-TOKENS.md)
   ============================================================ */
:root{
  /* == Marque — aplats, bordures, grands gestes graphiques ================= */
  --c-orange:#E86027;
  --c-amber:#FBB03B;
  --c-green:#14A662;
  --c-navy:#000019;

  /* == Marque — encres (texte et petits éléments sur fond clair) =========== */
  --c-orange-ink:#C4471A;        /* 4,93:1 sur blanc — texte toute taille */
  --c-orange-ink-hover:#A93D16;  /* état hover/active des remplissages encre */
  --c-amber-ink:#B87D00;         /* 3,52:1 — GRAND texte uniquement (≥24px ou ≥18,7px gras) */
  --c-green-ink:#0E8A50;         /* 4,40:1 — texte toute taille (limite basse : éviter <14px) */

  /* == Rôles de texte ======================================================= */
  --ink:#2A2A2A;                     /* titres, texte fort, chiffres */
  --ink-body:rgba(42,42,42,.80);     /* corps de texte — 8,4:1 */
  --ink-70:rgba(42,42,42,.70);       /* secondaire : intros, labels — 5,9:1 */
  --ink-muted:rgba(42,42,42,.55);    /* atténué : dates, légendes — ≥15px seulement */
  --ink-inverse:#FFFFFF;             /* texte sur navy / orange brut / photo sombre */
  --ink-ghost:rgba(42,42,42,.18);    /* marquee et filigranes purement décoratifs (aria-hidden) */

  /* == Fonds ================================================================ */
  --bg:#FFFFFF;
  --sable:#F7F5F2;                   /* bandes CTA, cartes plink, panneaux chiffres */
  --sable-deep:#EFECE6;              /* hover des surfaces sable */
  --bg-footer:#EAEAEA;               /* pied de page (hérité du thème, conservé) */

  /* == Typographie — pistes fluides ======================================== */
  --t-caption:0.8125rem;                                   /* 13px */
  --t-ui:0.9375rem;                                        /* 15px */
  --t-body:clamp(1rem, 0.954rem + 0.19vw, 1.125rem);       /* 16 → 18px */
  --t-lead:clamp(1.125rem, 1.033rem + 0.38vw, 1.375rem);   /* 18 → 22px */
  --t-h4:clamp(1.25rem, 1.157rem + 0.38vw, 1.5rem);        /* 20 → 24px */
  --t-h3:clamp(1.5rem, 1.36rem + 0.57vw, 1.875rem);        /* 24 → 30px */
  --t-h2:clamp(1.875rem, 1.64rem + 0.95vw, 2.5rem);        /* 30 → 40px */
  --t-h1:clamp(2.5rem, 2.13rem + 1.52vw, 3.5rem);          /* 40 → 56px */
  --t-display:clamp(2.5rem, 1.94rem + 2.29vw, 4rem);       /* 40 → 64px */
  --t-mega:clamp(3.75rem, 12vw, 11.25rem);                 /* marquee : 60 → 180px */

  --lh-tight:1.05;    /* display, h1, marquee */
  --lh-heading:1.2;   /* h2–h4, titres de cartes */
  --lh-lead:1.45;     /* chapôs, exergues */
  --lh-body:1.55;     /* corps */

  --w-regular:400; --w-medium:500; --w-semibold:600;  /* seules graisses auto-hébergées */

  /* == Espacement 8pt ======================================================= */
  --s-1:8px;  --s-2:16px; --s-3:24px; --s-4:32px; --s-5:40px;
  --s-6:48px; --s-8:64px; --s-10:80px; --s-12:96px; --s-15:120px;

  --gutter:clamp(var(--s-3), 1.2rem + 1.4vw, var(--s-5)); /* 24 → 40px */
  --sect-pad:clamp(var(--s-6), 2rem + 3vw, var(--s-10));  /* 48 → 80px, padding vertical de section */
  --sect-gap:clamp(var(--s-8), 3rem + 4vw, var(--s-15));  /* 64 → 120px, air entre sections */

  /* == Rayons — deux tokens, plus les cercles géométriques ================== */
  --r-control:32px;   /* TOUT contrôle pilule : boutons, tags, champs bouton */
  --r-card:8px;       /* TOUTE surface : cartes, images, vidéos, tuiles, plink */

  /* == Ombres ================================================================ */
  --shadow-bar:0 0 16px rgba(42,42,42,.10);   /* header fixe */
  --shadow-lift:0 6px 18px rgba(0,0,25,.14);  /* hover des cartes/avatars */

  /* == Structure ============================================================ */
  --header-h:130px;         /* 63px sous 46.25em (media query ci-dessous) */
  --container:1180px;       /* colonne de contenu */
  --container-wide:1580px;  /* sections pleine scène (header, footer, hero, cartes) */
  --focus-ring:2px solid var(--c-orange-ink);  /* + outline-offset:2px partout */
}
@media (max-width:46.24em){ :root{ --header-h:63px; } }


/* ============================================================
   FONTES — Open Sans auto-hébergée (400/500/600)
   ============================================================ */
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/open-sans-400.woff2') format('woff2');}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/open-sans-500.woff2') format('woff2');}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/open-sans-600.woff2') format('woff2');}


/* ============================================================
   SOCLE — reset minimal + typographie de base + accessibilité.
   (reprend ce que normalize + main.css + clean.css posaient)
   ============================================================ */
html{ box-sizing:border-box; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
*,*::before,*::after{ box-sizing:inherit; }
body{
  margin:0;
  font-family:'Open Sans',sans-serif;
  font-size:var(--t-body); line-height:1.5;
  color:var(--ink-70); background-color:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
/* le débord horizontal volontaire (montage, marquee) vit dans un clip,
   jamais dans une scrollbar ; clip (vs hidden) préserve position:sticky */
html,body{ overflow-x:clip; }
.site{ overflow:clip; }
[hidden]{ display:none; }

::selection{ background:var(--ink); color:var(--ink-inverse); }

h1,.h1,h2,.h2,h3,.h3,h4,.h4{
  font-family:'Open Sans',sans-serif; font-weight:var(--w-regular);
  line-height:1; color:var(--ink); margin:0 0 25px;
}
h1,.h1{ font-size:var(--t-h1); }
h2,.h2{ font-size:var(--t-h2); }
h3,.h3{ font-size:var(--t-h3); color:var(--ink-70); }
h4,.h4{ font-size:var(--t-h4); }
p{ margin:0 0 30px; }
ul{ margin:0 0 30px; }
ul ul{ margin-bottom:0; }
li{ margin-bottom:.3125rem; }
li>ul{ margin:.3125rem 0 0 1.25rem; }
b,strong{ font-weight:var(--w-semibold); }

a{ color:var(--ink); background-color:transparent; transition:color .2s cubic-bezier(.25,.46,.45,.94); }
a:hover,a:active,a:focus{ color:var(--c-orange-ink); }

/* Rythme vertical entre sections (hérité du thème : 150px desktop, 50px
   mobile ; les marges adjacentes fusionnent). Un bloc qui veut coller à
   son voisin pose SA marge — cible future si redesign : --sect-gap. */
main{ display:block; }
section{ margin:9.375rem 0; }
@media (max-width:46.24em){ section{ margin:3.125rem 0; } }

img{ display:block; border-style:none; height:auto; max-width:100%; width:auto; vertical-align:middle; }
img.object-fit-cover{ object-fit:cover !important; }
figure{ margin:0; }
figure img{ display:block; }
table{ width:100%; border-collapse:collapse; border-spacing:0; }
iframe{ border:0; }

button{ font:inherit; }
.icon{ vertical-align:middle; width:20px; height:20px; }

/* Contenu éditorial : les <article> portent la puce triangle et les liens soulignés */
article{ line-height:1.9; }
article>*:first-child{ margin-top:0 !important; }
article>*:last-child{ margin-bottom:0 !important; }
article figure{ margin:50px 0; }
article a{ font-weight:var(--w-semibold); text-decoration:underline; }
article ul{ list-style:none; padding:0; margin:20px 0 30px 40px; }
article ul li{ position:relative; padding-left:30px; margin:5px 0; }
article ul li::before{
  content:""; position:absolute; top:8px; left:0; width:10px; height:10px;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 8 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.125 0.384055L8.375 5.14719L0.125 9.91033L0.125 0.384055Z' fill='%23E86027'/%3E%3C/svg%3E") no-repeat center/contain;
}
article ul:last-child{ margin-bottom:0; }

/* Lecture d'écran */
.sr-only{
  border:0 !important; clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important;
  height:1px !important; width:1px !important; margin:-1px !important; overflow:hidden !important;
  padding:0 !important; position:absolute !important; white-space:nowrap !important;
}

/* Lien d'évitement : invisible jusqu'au focus clavier */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  padding:12px 24px; background:var(--ink); color:var(--ink-inverse);
  font-size:var(--t-ui); font-weight:var(--w-semibold); text-decoration:none;
  border-radius:0 0 var(--r-card) 0;
}
.skip-link:focus-visible{ left:0; outline:var(--focus-ring); outline-offset:2px; }

/* Focus clavier global */
:focus-visible{ outline:var(--focus-ring); outline-offset:2px; }
:focus:not(:focus-visible){ outline:none; }
#main{ scroll-margin-top:calc(var(--header-h) + var(--s-1)); }
section[id]{ scroll-margin-top:var(--header-h); }

@media print{
  *,*::before,*::after{ background:transparent !important; color:#000 !important; box-shadow:none !important; }
  a,a:visited{ text-decoration:underline; }
  img{ page-break-inside:avoid; }
  p,h2,h3{ orphans:3; widows:3; }
  h2,h3{ page-break-after:avoid; }
}


/* ============================================================
   ÉTATS JS — lazyload et révélations au scroll (batao.js)
   ============================================================ */
.lazyload{ opacity:0; transition:opacity 1s cubic-bezier(.25,.46,.45,.94), .3s transform cubic-bezier(.25,.46,.45,.94); }
@media (min-width:46.25em){
  [data-animate]{ opacity:0; transform:translateY(25px);
    transition:transform .75s cubic-bezier(.23,1,.32,1), opacity .75s cubic-bezier(.23,1,.32,1); }
  [data-animate].is-animate{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce){
  [data-animate]{ opacity:1; transform:none; }
}


/* ============================================================
   PRIMITIVE : LOGO « ! » (header, footer, heading, hero)
   ============================================================ */
.logo{ display:block; width:74px; height:90px; position:relative; }
@media (max-width:46.24em){ .logo{ width:34px; height:42px; } }
.logo .icon{ position:absolute; inset:0; width:100%; height:100%; fill:var(--c-orange); }
.logo span{ opacity:0; }


/* ============================================================
   PRIMITIVE : HAT — le sous-titre de section à l'éventail.
   UNE classe pour tout le site (orange officiel, décision Maxime
   02/07 ; l'écart AA est assumé, le hat double toujours un titre).
   ============================================================ */
.hat{ position:relative; color:var(--c-orange); padding-top:21px; margin:0 0 30px; }
.hat::before{
  content:""; width:20px; height:20px; position:absolute; top:0; left:0;
  background:url("data:image/svg+xml,%3Csvg width='25' height='23' viewBox='0 0 25 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_601_260' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='25' height='23'%3E%3Crect x='0.86084' y='0.12365' width='23.4494' height='21.9608' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_601_260)'%3E%3Cpath d='M3.2952 0.100092L12.5515 -17.2623L21.8487 0.100101L12.5515 17.5627L3.2952 0.100092Z' stroke='%23E86027' stroke-width='4.24278'/%3E%3Cpath d='M11.8957 0.146496L12.5705 -1.11935L13.2484 0.146505L12.5705 1.41966L11.8957 0.146496Z' stroke='%23E86027' stroke-width='4.24278'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center/contain;
}


/* ============================================================
   PRIMITIVE : BOUTONS — trois espèces, un rayon (--r-control).
   .btn            = secondaire outline (défaut du site)
   .btn--primary   = plein encre, LE CTA de la page
   .btn--more      = outline + triangle (têtes de section)
   États : hover/focus-visible = remplissage encre ; active = encre hover.
   ============================================================ */
.btn{
  display:inline-block; padding:16px 24px;
  background-color:transparent; border:1px solid var(--c-orange);
  border-radius:var(--r-control); color:var(--ink);
  font-weight:var(--w-regular); text-align:center; text-decoration:none;
  vertical-align:top; cursor:pointer;
  transition:color .25s cubic-bezier(.25,.46,.45,.94), background .25s cubic-bezier(.25,.46,.45,.94);
}
button.btn,input.btn{ appearance:none; box-shadow:none; line-height:normal; }
.btn:hover,.btn:active,.btn:focus-visible{ background-color:var(--c-orange-ink); color:var(--ink-inverse); }
.btn:active{ background-color:var(--c-orange-ink-hover); }
.btn .icon{ width:16px; height:16px; fill:var(--c-orange); transition:.3s transform cubic-bezier(.23,1,.32,1); }
.btn:hover .icon,.btn:active .icon,.btn:focus-visible .icon{ fill:var(--ink-inverse); }
.btn[target=_blank]::after{
  content:""; display:inline-block; width:12px; height:12px; margin-left:5px;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5635 2.64125L1.01577 12.189L0 11.1732L9.54772 1.62548H4.09917V0.188965H12V8.08979H10.5635V2.64125Z' fill='%23E86027'/%3E%3C/svg%3E%0A") no-repeat center/contain;
}
.btn[target=_blank]:hover::after,.btn[target=_blank]:active::after,.btn[target=_blank]:focus-visible::after{
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5635 2.64125L1.01577 12.189L0 11.1732L9.54772 1.62548H4.09917V0.188965H12V8.08979H10.5635V2.64125Z' fill='%23FFFFFF'/%3E%3C/svg%3E%0A");
}

/* Primaire : plein encre (persona-cta, contact mailto) */
.btn--primary{
  border-color:var(--c-orange-ink); background:var(--c-orange-ink);
  color:var(--ink-inverse); font-weight:var(--w-semibold); padding:15px 32px;
  transition:background .2s, transform .2s;
}
.btn--primary:hover,.btn--primary:focus-visible{ background:var(--c-orange-ink-hover); border-color:var(--c-orange-ink-hover); color:var(--ink-inverse); transform:translateY(-2px); }
.btn--primary:active{ background:var(--c-orange-ink-hover); transform:translateY(0); }

/* « Voir tous … » : outline + triangle orange (blanc au survol) */
.btn--more::after{
  content:""; width:14px; height:14px; display:inline-block; vertical-align:top;
  margin-left:8px; margin-top:8px;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 13 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 13.4795L13 6.97834L1.55023e-07 0.47949L0 13.4795Z' fill='%23E86027'/%3E%3C/svg%3E") no-repeat center/contain;
}
.btn--more:hover::after,.btn--more:active::after,.btn--more:focus-visible::after{
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 13 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 13.4795L13 6.97834L1.55023e-07 0.47949L0 13.4795Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}


/* ============================================================
   PRIMITIVE : SECTION-HEAD — LA tête de section (hat optionnel +
   titre + bouton optionnel + filet 2px optionnel).
   Remplace .hscroll__head / .carousel__head / .cards__head.
   Le parent fournit la gouttière ; le filet court sur toute la
   largeur du composant, collé au début du contenu (décision Maxime).
   Variantes :
   .section-head--rule      filet sable statique
   .section-head--progress  filet rempli à l'encre selon --hscroll-progress (JS)
   ============================================================ */
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-3); position:relative; }
.section-head__text .hat{ margin-bottom:0; }
.section-head__title{ margin:0; }
.section-head__text .hat + .section-head__title{ margin-top:6px; }
.section-head__action{ flex:0 0 auto; margin:0; }
@media (max-width:61.24em){
  .section-head{ flex-direction:column; align-items:flex-start; }
}
.section-head--rule::after,
.section-head--progress::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(to right,
    var(--c-orange-ink) calc(var(--hscroll-progress, 0) * 100%),
    var(--sable-deep) calc(var(--hscroll-progress, 0) * 100%));
}


/* ============================================================
   BLOC : HEADER — nav 2 rangées, fixe/absolu, menu mobile plein
   écran (body.open-menu posé par le JS)
   ============================================================ */
.header{
  position:absolute; top:0; right:0; left:0; z-index:1000;
  transition:background .25s cubic-bezier(.25,.46,.45,.94), box-shadow .25s cubic-bezier(.25,.46,.45,.94);
}
.header.is-small{ position:fixed; }
body.is-internal .header{ position:fixed; background:var(--bg); box-shadow:var(--shadow-bar); }
@media (max-width:46.24em){
  .header{ border-bottom:1px solid var(--bg-footer); background-color:rgba(255,255,255,.97); }
}
@media (min-width:46.25em){
  .header.is-small{ background-color:var(--bg); box-shadow:var(--shadow-bar); }
  .header.is-small .header__main{ padding-top:.625rem; padding-bottom:.625rem; }
}
.header__main{
  padding:1.25rem 3.75rem; display:flex; justify-content:space-between;
  transition:padding .3s cubic-bezier(.455,.03,.515,.955);
}
@media (max-width:81.24em){ .header__main{ padding:1.25rem 1.25rem; } }
@media (max-width:46.24em){ .header__main{ padding:.625rem 1.25rem; } }
.header__logo{ display:flex; flex-direction:column; justify-content:center; }

/* Bouton burger (mobile) */
.nav-btn{
  position:absolute; top:6px; right:10px; z-index:101; display:none;
  width:50px; height:50px; padding:13px 11px;
  background:none; border:0; border-radius:0; cursor:pointer; box-shadow:none;
}
@media (max-width:46.24em){ .nav-btn{ display:block; } }
.nav-toggle{
  position:relative; display:block; width:28px; height:24px; cursor:pointer;
  transform-origin:50%; transition:transform .3s cubic-bezier(.23,1,.32,1);
}
.nav-toggle b{ position:absolute; left:0; top:50%; display:block; width:100%; height:4px; margin:-2px 0 0; background:var(--c-orange); }
.nav-toggle b.top{ transform:translate(0,-10px); transition:transform .2s .1s cubic-bezier(.23,1,.32,1), background .3s .3s cubic-bezier(.23,1,.32,1); }
.nav-toggle b.middle{ transition:opacity .2s .1s cubic-bezier(.23,1,.32,1), background .3s .3s cubic-bezier(.23,1,.32,1); }
.nav-toggle b.bottom{ transform:translate(0,10px); transition:transform .2s .1s cubic-bezier(.23,1,.32,1), background .3s .3s cubic-bezier(.23,1,.32,1); }
.open-menu .nav-toggle{ transform:rotate(180deg); }
.open-menu .nav-toggle b.top{ transform:rotate(-45deg); }
.open-menu .nav-toggle b.middle{ opacity:0; }
.open-menu .nav-toggle b.bottom{ transform:rotate(45deg); }
body.open-menu{ overflow:hidden; }
@media (min-width:61.25em){ body.open-menu{ overflow:visible; } }

/* Panneau mobile plein écran */
@media (max-width:46.24em){
  .header__navigation{
    position:fixed; top:63px; right:0; bottom:0; left:0; z-index:100;
    background-color:var(--bg); transform:translateX(100%); overflow-x:scroll;
    display:flex; flex-direction:column;
    transition:.5s transform cubic-bezier(.77,0,.175,1);
  }
  .open-menu .header__navigation{ transform:translateX(0); }
}

/* Rangée principale */
@media (min-width:46.25em){
  .header-navigation{ display:flex; align-items:center; }
  .header-navigation>nav>ul{ list-style:none; padding:0; margin:0; display:flex; }
  .header-navigation>nav>ul li{ margin:0; }
  .header-navigation>nav>ul>li{ position:relative; margin:0 15px; }
  .header-navigation>nav>ul>li:first-child{ margin-left:0; }
  .header-navigation>nav>ul>li:last-child{ margin-right:0; }
  .header-navigation>nav>ul>li>a{
    position:relative; display:inline-block; text-align:center; padding:5px 0;
    font-size:18px; line-height:1.5; text-decoration:none; color:var(--ink);
  }
  .header-navigation>nav>ul>li>a::before{
    content:""; position:absolute; bottom:0; left:0; height:1px; width:100%;
    background-color:var(--c-orange);
    transform:scaleX(0); transform-origin:right center;
    transition:transform .3s cubic-bezier(.23,1,.32,1);
  }
  .header-navigation>nav>ul>li>a:hover,.header-navigation>nav>ul>li>a:active,.header-navigation>nav>ul>li>a:focus{ color:var(--c-orange-ink); text-decoration:none; }
  .header-navigation>nav>ul>li>a:hover::before,.header-navigation>nav>ul>li>a:active::before,.header-navigation>nav>ul>li>a:focus::before{
    transition-delay:.1s; transform-origin:left center; transform:scaleX(1);
  }
}
@media (min-width:46.25em) and (max-width:81.24em){
  .header-navigation>nav>ul>li>a{ font-size:16px; }
}
@media (max-width:46.24em){
  .header-navigation{ order:-1; }
  .header-navigation>nav>ul{ list-style:none; margin:0; padding:40px 20px 0; }
  .header-navigation>nav>ul li{ margin:0; }
  .header-navigation>nav>ul>li{
    border-bottom:1px solid rgba(255,255,255,.2);
    transform:translateY(75px); opacity:0;
    transition:opacity 0s .4s cubic-bezier(.165,.84,.44,1), transform 0s .4s cubic-bezier(.165,.84,.44,1);
  }
  .header-navigation>nav>ul>li:last-child{ border-bottom:0; }
  .open-menu .header-navigation>nav>ul>li{
    transform:translateY(0); opacity:1;
    transition:opacity .4s cubic-bezier(.165,.84,.44,1), transform .4s cubic-bezier(.165,.84,.44,1);
  }
  .open-menu .header-navigation>nav>ul>li:nth-child(1){ transition-delay:.55s; }
  .open-menu .header-navigation>nav>ul>li:nth-child(2){ transition-delay:.6s; }
  .open-menu .header-navigation>nav>ul>li:nth-child(3){ transition-delay:.65s; }
  .open-menu .header-navigation>nav>ul>li:nth-child(4){ transition-delay:.7s; }
  .open-menu .header-navigation>nav>ul>li:nth-child(5){ transition-delay:.75s; }
  .open-menu .header-navigation>nav>ul>li:nth-child(6){ transition-delay:.8s; }
  .open-menu .header-navigation>nav>ul>li:nth-child(7){ transition-delay:.85s; }
  .open-menu .header-navigation>nav>ul>li:nth-child(8){ transition-delay:.9s; }
  .header-navigation>nav>ul>li>a{ display:block; padding:15px 20px; font-size:18px; text-align:center; text-decoration:none; }
}

/* Rangée secondaire (Contact + bascule de langue) */
@media (min-width:46.25em){
  .header-navigation-secondary{ margin-bottom:5px; display:flex; align-items:center; justify-content:flex-end; }
  .header-navigation-secondary>ul{ list-style:none; padding:0; margin:0 30px 0 0; display:flex; justify-content:flex-end; }
  .header-navigation-secondary>ul:last-child{ margin-right:0; }
  .header-navigation-secondary>ul li{ margin:0; }
  .header-navigation-secondary>ul>li{ position:relative; margin:0 15px; }
  .header-navigation-secondary>ul>li:first-child{ margin-left:0; }
  .header-navigation-secondary>ul>li:last-child{ margin-right:0; }
  .header-navigation-secondary>ul>li>a{
    position:relative; display:inline-block; text-align:center; padding:5px 0;
    font-size:16px; line-height:1.5; text-decoration:none; color:var(--ink);
  }
  .header-navigation-secondary>ul>li>a::before{
    content:""; position:absolute; bottom:0; left:0; height:1px; width:100%;
    background-color:var(--c-orange);
    transform:scaleX(0); transform-origin:right center;
    transition:transform .3s cubic-bezier(.23,1,.32,1);
  }
  .header-navigation-secondary>ul>li>a:hover,.header-navigation-secondary>ul>li>a:active,.header-navigation-secondary>ul>li>a:focus{ color:var(--c-orange-ink); text-decoration:none; }
  .header-navigation-secondary>ul>li>a:hover::before,.header-navigation-secondary>ul>li>a:active::before,.header-navigation-secondary>ul>li>a:focus::before{
    transition-delay:.1s; transform-origin:left center; transform:scaleX(1);
  }
}
@media (max-width:46.24em){
  .header-navigation-secondary>ul{ list-style:none; margin:0; padding:0 20px 40px; }
  .header-navigation-secondary>ul li{ margin:0; }
  .header-navigation-secondary>ul>li{
    border-bottom:1px solid rgba(255,255,255,.2);
    transform:translateY(75px); opacity:0;
    transition:opacity 0s .4s cubic-bezier(.165,.84,.44,1), transform 0s .4s cubic-bezier(.165,.84,.44,1);
  }
  .header-navigation-secondary>ul>li:last-child{ border-bottom:0; }
  .open-menu .header-navigation-secondary>ul>li{
    transform:translateY(0); opacity:1;
    transition:opacity .4s cubic-bezier(.165,.84,.44,1), transform .4s cubic-bezier(.165,.84,.44,1);
  }
  .open-menu .header-navigation-secondary>ul>li:nth-child(1){ transition-delay:.55s; }
  .open-menu .header-navigation-secondary>ul>li:nth-child(2){ transition-delay:.6s; }
  .open-menu .header-navigation-secondary>ul>li:nth-child(3){ transition-delay:.65s; }
  .open-menu .header-navigation-secondary>ul>li:nth-child(4){ transition-delay:.7s; }
  .header-navigation-secondary>ul>li>a{ display:block; padding:5px 20px; font-size:16px; text-align:center; text-decoration:none; }
}

/* Cibles tactiles ≥44px sans changer le visuel (le ::before reste le soulignement) */
.header-navigation nav a::after,
.header-navigation-secondary a::after{
  content:""; position:absolute; left:0; right:0; top:-6px; bottom:-6px;
}


/* ============================================================
   BLOC : FOOTER — colonnes, réseaux, mentions, to-top,
   newsletter Brevo (embed sib-form réhabillé)
   ============================================================ */
.footer{ background-color:var(--bg-footer); }
.footer__main{ position:relative; max-width:var(--container-wide); width:100%; margin-inline:auto; padding-inline:var(--gutter); }
.footer__columns{ padding:50px 0; display:flex; justify-content:space-between; flex-flow:row nowrap; }
@media (max-width:46.24em){ .footer__columns{ flex-flow:row wrap; } }
.footer__infos,.footer__menu-1{ width:25%; }
.footer__menu-2{ width:25%; }
@media (max-width:46.24em){
  .footer__infos,.footer__menu-1{ width:50%; }
  .footer__menu-1{ padding-left:25px; }
  .footer__menu-2{ width:100%; }
}
.footer__logo{ margin-bottom:35px; }
.footer__logo img{ display:inline-block; height:75px; }
.footer__title{ font-size:18px; font-weight:var(--w-semibold); margin-bottom:25px; color:var(--ink-body); }
.footer__menu-1 ul,.footer__menu-2 ul{ list-style:none; padding:0; margin:0; }
.footer__menu-1 ul li,.footer__menu-2 ul li{ margin:0; }
.footer__menu-1 ul li a,.footer__menu-2 ul li a{ display:inline-block; padding:10px 0; text-decoration:none; }
.footer__follow{ width:50%; }
.footer__follow-title{ font-size:18px; margin-bottom:15px; }
.footer__follow ul{ list-style:none; padding:0; margin:0; }
.footer__follow ul li{ margin:0; display:inline-block; }
.footer__follow ul li a{
  display:block; width:44px; height:44px; padding:12px; border-radius:50%;
  transition:background .25s cubic-bezier(.25,.46,.45,.94);
}
.footer__follow ul li a .icon{
  display:block; fill:var(--c-orange);
  transition:fill .25s cubic-bezier(.165,.84,.44,1), transform .25s cubic-bezier(.165,.84,.44,1);
}
.footer__follow ul li a span{ position:absolute; opacity:0; pointer-events:none; }
.footer__follow ul li a:hover,.footer__follow ul li a:active,.footer__follow ul li a:focus{ background-color:var(--c-orange); }
.footer__follow ul li a:hover .icon,.footer__follow ul li a:active .icon,.footer__follow ul li a:focus .icon{ transform:scale(.9); fill:var(--ink-inverse); }
.footer__bottom{ padding-bottom:50px; }
@media (min-width:46.25em){ .footer__bottom{ display:flex; justify-content:space-between; } }
.footer__legal{ font-size:var(--t-caption); color:var(--ink-70); flex-grow:1; }
.footer__legal a{ color:var(--ink-70); }
@media (max-width:46.24em){ .footer__legal{ margin-bottom:20px; } }
.footer__legal p{ margin:0; }
.footer__legal-menu{ margin-top:7px; }
.footer__legal-menu p{ display:inline-block; }
.footer__legal-menu ul{ list-style:none; padding:0; margin:0; display:inline; }
.footer__legal-menu ul li{ margin:0; display:inline; }
.footer__legal-menu ul li::before{ content:"|"; margin:0 4px; }

/* Haut de page */
.footer__to-top{ margin-left:48px; }
@media (max-width:46.24em){ .footer__to-top{ position:absolute; bottom:20px; right:0; display:block; margin-left:0; } }
.footer__to-top .btn--to-top{
  padding:0; display:flex; align-items:center; justify-content:center;
  width:64px; height:64px; background:var(--c-orange); border:0; border-radius:var(--r-control);
  cursor:pointer;
}
.footer__to-top .btn--to-top:hover{ background:var(--c-orange-ink-hover); }
.footer__to-top .btn--to-top::after{ content:url("data:image/svg+xml,%3Csvg width='25' height='26' viewBox='0 0 25 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.131683 24.9706L12.471 0.494479L24.7471 24.9706L19.6773 24.9706L12.4457 10.5627L5.20142 24.9706L0.131683 24.9706Z' fill='white'/%3E%3Cpath d='M9.19652 25.1099L12.4457 18.6603L15.6822 25.1099L9.19652 25.1099Z' fill='white'/%3E%3C/svg%3E%0A"); }
.footer__to-top span{ position:absolute; opacity:0; pointer-events:none; }

/* Newsletter (embed Brevo) */
.footer-newsletter__main{ position:relative; max-width:var(--container-wide); width:100%; margin:0; padding-inline:var(--gutter); }
@media (min-width:46.25em){
  .footer-newsletter__columns{ display:flex; align-items:center; }
  .footer-newsletter__columns>*{ flex:1; }
}
.footer-newsletter__content{ padding-top:30px; }
.footer-newsletter .sib-form{ background:transparent !important; padding:0 !important; text-align:left !important; }
.footer-newsletter #sib-form-container{ max-width:420px; }
.footer-newsletter #sib-container{ background:transparent !important; border:0 !important; border-radius:0 !important; max-width:none !important; padding:0 !important; text-align:left !important; }
.footer-newsletter .sib-form-block{ padding:0 !important; }
.footer-newsletter #sib-form > div{ padding:6px 0 !important; }
.footer-newsletter #sib-form > div:first-child .sib-form-block{ font-size:var(--t-h4) !important; color:var(--ink) !important; }
.footer-newsletter #sib-form > div:first-child p{ margin:0 !important; }
.footer-newsletter .sib-text-form-block p{ color:var(--ink-body) !important; margin:0 !important; }
.footer-newsletter .entry__label{ color:var(--ink) !important; font-size:var(--t-caption) !important; }
.footer-newsletter .entry__specification{ color:var(--ink-muted) !important; }
.footer-newsletter .sib-input input,
.footer-newsletter input#EMAIL{
  width:100% !important; height:44px !important; border:1px solid var(--ink-muted) !important;
  border-radius:var(--r-card) !important; background:var(--bg) !important; padding:0 12px !important;
  font:inherit !important; color:var(--ink) !important;
}
.footer-newsletter .sib-form-block__button{
  display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
  background:var(--c-orange-ink) !important; color:var(--ink-inverse) !important;
  border-radius:var(--r-control) !important; padding:13px 30px !important;
  text-align:center !important; cursor:pointer; transition:background .2s;
}
.footer-newsletter .sib-form-block__button:hover{ background:var(--c-orange-ink-hover) !important; }
.footer-newsletter #sib-container a{ color:var(--c-orange-ink) !important; }


/* ============================================================
   BLOC : HEADING — ouverture des pages internes : hat + titre +
   chapô à droite, grande image 4:3, « ! » en chevauchement.
   Variantes : --orange / --amber / --green (couleur du « ! »,
   défaut orange). Sans image : 404 et politiques.
   ============================================================ */
.heading{ --accent:var(--c-orange); margin-top:0; padding:150px 0 72px; }
.heading--orange{ --accent:var(--c-orange); }
.heading--amber{ --accent:var(--c-amber); }
.heading--green{ --accent:var(--c-green); }
.heading__main{
  position:relative; max-width:var(--container-wide); width:100%;
  margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:start;
}
.heading__content{ display:flex; flex-direction:column; align-items:flex-start; }
.heading__content-left{ width:auto; padding:0; }
.heading__content-right{ width:auto; max-width:none; padding:20px 0 0; }
.heading .hat{ margin-bottom:18px; }
.heading__title{
  margin:0; font-size:var(--t-display); font-weight:var(--w-medium);
  line-height:var(--lh-tight); hyphens:auto;
}
.heading__text{ margin-top:15px; max-width:600px; }
@media (max-width:46.24em){ .heading__text{ margin-bottom:40px; } }
.heading__text p{ margin:0 0 10px; font-size:var(--t-lead); line-height:var(--lh-lead); color:var(--ink-body); }
.heading__text p:last-child{ margin-bottom:0; }
.heading__picture{ position:relative; margin:0; aspect-ratio:4/3; height:auto; background-color:var(--ink); }
.heading__picture::before{ content:none; }
.heading__picture img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
/* « ! » en chevauchement sur le coin haut-droit de l'image */
.heading__logo{
  display:block; position:absolute; top:64px; right:40px; width:156px; height:540px;
  z-index:1; pointer-events:none;
}
.heading__logo .icon{ position:absolute; inset:0; width:100%; height:100%; fill:var(--accent); }
@media (max-width:61.24em){
  .heading{ padding:120px 0 40px; }
  .heading__main{ grid-template-columns:1fr; gap:28px; }
  /* le « ! » n'a de sens qu'en 2 colonnes : masqué en mono-colonne */
  .heading__logo{ display:none; }
}


/* ============================================================
   BLOC : HERO — routeur de la home : chiasme 2 lignes (rotateur
   JS), accroche, « Qui êtes-vous ? » + 5 pilules personas,
   « ! » ambre, photo masquée 2:1 + frise wax
   ============================================================ */
.hero{ margin-top:125px; }
@media (min-width:46.25em){ .hero{ margin-top:230px; } }
.hero__main{ position:relative; max-width:var(--container-wide); width:100%; margin-inline:auto; padding-inline:var(--gutter); }
/* Rotateur : tous les titres partagent la même cellule de grille,
   la hauteur est réservée sur le plus grand -> pas de saut au changement */
.hero__slider{ display:grid; margin-bottom:45px; }
.hero__slider .hero__title{ grid-column:1; }
.hero__slider h2.hero__title{ grid-row:2; max-height:none; }
.hero__title{ margin:0; line-height:var(--lh-tight); visibility:hidden; max-height:0; transform:translateX(50px); opacity:0; }
.hero__title.is-visible{
  visibility:visible; max-height:100%; transform:translateX(0); opacity:1;
  transition:transform,opacity,visibility,max-height; transition-duration:.3s,.3s,0s,0s;
}
.hero__title--orange{ color:var(--c-orange); } /* orange charte #E86027 ; 3,42:1 sur blanc = OK WCAG AA grand texte (h1 40-56px) */
.hero__lead{ max-width:720px; margin:8px 0 34px; font-size:var(--t-body); line-height:1.6; color:var(--ink-body); }
.hero__links{ margin-bottom:20px; position:relative; z-index:2; }
.hero__links-text{ font-size:var(--t-h3); position:relative; padding-top:18px; margin-bottom:15px; }
.hero__links-text::before{
  content:""; width:16px; height:16px; position:absolute; top:0; left:0;
  background:url("data:image/svg+xml,%3Csvg width='25' height='23' viewBox='0 0 25 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_601_260' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='25' height='23'%3E%3Crect x='0.86084' y='0.12365' width='23.4494' height='21.9608' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_601_260)'%3E%3Cpath d='M3.2952 0.100092L12.5515 -17.2623L21.8487 0.100101L12.5515 17.5627L3.2952 0.100092Z' stroke='%23E86027' stroke-width='4.24278'/%3E%3Cpath d='M11.8957 0.146496L12.5705 -1.11935L13.2484 0.146505L12.5705 1.41966L11.8957 0.146496Z' stroke='%23E86027' stroke-width='4.24278'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center/contain;
}
.hero__links-intro{ margin:0 0 14px; font-size:var(--t-body); color:var(--ink-70); }
.hero__links ul{ list-style:none; padding:0; margin:0; display:flex; flex-flow:row wrap; }
.hero__links ul li{ margin:0; }

/* Pilules personas : bordure BRUTE au repos, remplissage ENCRE au
   hover/focus quand du blanc se pose dessus (ambre garde le noir) */
.hero__button{
  display:block; padding:16px 24px; margin:0 15px 15px 0;
  border:1px solid var(--c-orange); border-radius:var(--r-control);
  background-color:var(--bg); text-decoration:none;
  transition:color .25s cubic-bezier(.165,.84,.44,1), background .25s cubic-bezier(.165,.84,.44,1);
}
@media (max-width:46.24em){
  .hero__button{ padding:12px 20px; font-size:var(--t-ui); margin:0 5px 5px 0; } /* 49px de haut mesuré */
}
.hero__button:hover,.hero__button:active,.hero__button:focus-visible{ color:var(--ink-inverse); }
.hero__button:focus{ color:var(--ink); } /* jamais de libellé invisible au focus souris */
.hero__links-main li:nth-child(1) .hero__button,
.hero__links-main li:nth-child(4) .hero__button{ border-color:var(--c-orange); }
.hero__links-main li:nth-child(1) .hero__button:hover,
.hero__links-main li:nth-child(4) .hero__button:hover,
.hero__links-main li:nth-child(1) .hero__button:focus-visible,
.hero__links-main li:nth-child(4) .hero__button:focus-visible{ background:var(--c-orange-ink); border-color:var(--c-orange-ink); color:var(--ink-inverse); }
.hero__links-main li:nth-child(2) .hero__button{ border-color:var(--c-amber); }
.hero__links-main li:nth-child(2) .hero__button:hover,
.hero__links-main li:nth-child(2) .hero__button:focus-visible{ background:var(--c-amber); border-color:var(--c-amber); color:var(--ink); }
.hero__links-main li:nth-child(3) .hero__button{ border-color:var(--c-green); }
.hero__links-main li:nth-child(3) .hero__button:hover,
.hero__links-main li:nth-child(3) .hero__button:focus-visible{ background:var(--c-green-ink); border-color:var(--c-green-ink); color:var(--ink-inverse); }
.hero__links-main li:nth-child(5) .hero__button{ border-color:var(--c-navy); }
.hero__links-main li:nth-child(5) .hero__button:hover,
.hero__links-main li:nth-child(5) .hero__button:focus-visible{ background:var(--c-navy); border-color:var(--c-navy); color:var(--ink-inverse); }

/* « ! » ambre à droite, remonté à 22% (le thème le poussait à 90%) */
.hero__logo{ position:absolute; right:100px; bottom:0; width:171px; height:596px; transform:translate(0,22%); z-index:1; }
.hero__logo .icon{ position:absolute; inset:0; width:100%; height:100%; fill:var(--c-amber); }
@media (max-width:46.24em){ .hero__logo{ display:none; } }

/* Photo masquée (ratio 2:1) + frise wax inclinée sous l'image */
.hero__picture{ position:relative; width:100%; }
.hero__picture::after{
  content:""; display:block; position:absolute; bottom:0; left:0; right:0;
  background:transparent url(../assets/img/hero-band.png) repeat-x 50% 0;
  background-size:auto 100%; height:11.94%; max-height:86px; width:100%;
  transform-origin:0 0; transform:rotate(-2.8deg) translate(0, calc(100% + 15px));
}
.hero__picture__mask{
  width:100%; aspect-ratio:2/1; background-color:var(--ink); position:relative;
  /* masque embarqué en data: (le file:// est bloqué par Chrome) — fichier réel image/webp */
  -webkit-mask-image:url(data:image/webp;base64,UklGRkoEAABXRUJQVlA4TD0EAAAvn4WsEM8gkE3uz91iiCDItg19At8IJmmq7RhTpEA4eA8DBDeSFEnLzLz//yrcDXdXpRRdEf2X5LaRIEnMR8gzs1txH8nzw3/4Lwfd43qOOO4j1qWURcR8Vsp0EiHD3pXe8x5xjoh9xHZdynIRMSulTCLGSqvBd68w+VVYNDb5hVY7J7+W6uLkV0u9M/kFUc9OfskzJJNf1Qzn5NctiTD5pUkSTX7xkX6TX1+k7uRXEEk/+UVCxkx+GZBrk9/T5enk92UZPvndlTlMfodkK5Pf51jS5PcqZjb5HYcRTn7XYKGT3/rZ7+S3b8Y9+U2Y6U9+I+UXk98Oec3ktzQuNfmNicNNfnPhjZPfIjjm5D/+Z/LnOa+d/PGfyZ+t3HzyZxwNmPx5QyEmf+oT2cn/Fp+XQpP/rUzvWWHypxJdmvzpQLQm/6CStMk/MPRu8vcvNZz8fUQqJ39HCenkby2RnfxveX74D//hP/yH//Af/sN/+A//4T/8h//wH/7Df/gP/+E//If/8B/+w3/4D//hP/yH//Af/sN/+A//4T/8h//wH/7Df/gP/+E//If/8B/+w3/4D//hP/yH//Af/sN/+A//4T/8h//wH/7Df/gP/+E//If/8B/+w3/4D//hP/yH//Af/sN/+A//4T/8h//wH/7Df/gP/+E//If/8B/+w3/4D//hP/yH//Af/sN/+A//4T/8h//wH/7Df/gP/+E//If/8B/+w3/4D//hP/yH//Af/sN/+A//4T/8h//wH/7Df/gP/+E//If/8B/+w3/4D//hP/yH//Af/sN/+A//4T/8h//wH/7Df/gP/+E//If/8B/+w3/4D//hP/yH//Af/sN/+A//4T/8h//wH/7Df/gP/+E//If/8B/+w3/4D//hP/yH//Af/uuw5z2u5+M+tuuyiJBcr38nYFYmEaM/n7wm4Md73MrldNjFZr36kYB6nvQmoCYqm4AmSWYCSsUEtI4sJuD0IwHzKgnoBplMgK56NZEAXfX69W5fCViX5VcCxqPefjqXgP6mVwnY1ZGAgSFPCVh9JGD6/wQMIaFKwGBTnV+MVE1AWpCfBCQQpUlAqpGLBFx+JWBWJQFJST8SkL6kIgGJzuO/zRm/vs05ncQoe57/JyB/uPoX6zONVycgJzlwArKXryYgz7llAoTVX3ec6kmAsGripJ7J8KvrpnbEWU7qxcjgnrdcN7U4jpEAM+QDX6y3TeaeAINl2QmwYkacANNmrwmwd6Z5x8kJWGECPIPBJcBd2NZJPR9iRQnwLAaTAHdjG8dDfJAZJMAx5XgCvFXmJsCF5WMChFUTJ/WcXe4kQFe9mkiALEjzk3paIXkTICBSMgGqItGOh0iN9EmA/kiKBIiSoU6AUhnABMiXYTmpp2l6OwFCpw/uOFVPgPrpmZN6kqizCRBKXfhivXpqWQIkVXMJ0Fm1JEB7FQA=);
  mask-image:url(data:image/webp;base64,UklGRkoEAABXRUJQVlA4TD0EAAAvn4WsEM8gkE3uz91iiCDItg19At8IJmmq7RhTpEA4eA8DBDeSFEnLzLz//yrcDXdXpRRdEf2X5LaRIEnMR8gzs1txH8nzw3/4Lwfd43qOOO4j1qWURcR8Vsp0EiHD3pXe8x5xjoh9xHZdynIRMSulTCLGSqvBd68w+VVYNDb5hVY7J7+W6uLkV0u9M/kFUc9OfskzJJNf1Qzn5NctiTD5pUkSTX7xkX6TX1+k7uRXEEk/+UVCxkx+GZBrk9/T5enk92UZPvndlTlMfodkK5Pf51jS5PcqZjb5HYcRTn7XYKGT3/rZ7+S3b8Y9+U2Y6U9+I+UXk98Oec3ktzQuNfmNicNNfnPhjZPfIjjm5D/+Z/LnOa+d/PGfyZ+t3HzyZxwNmPx5QyEmf+oT2cn/Fp+XQpP/rUzvWWHypxJdmvzpQLQm/6CStMk/MPRu8vcvNZz8fUQqJ39HCenkby2RnfxveX74D//hP/yH//Af/sN/+A//4T/8h//wH/7Df/gP/+E//If/8B/+w3/4D//hP/yH//Af/sN/+A//4T/8h//wH/7Df/gP/+E//If/8B/+w3/4D//hP/yH//Af/sN/+A//4T/8h//wH/7Df/gP/+E//If/8B/+w3/4D//hP/yH//Af/sN/+A//4T/8h//wH/7Df/gP/+E//If/8B/+w3/4D//hP/yH//Af/sN/+A//4T/8h//wH/7Df/gP/+E//If/8B/+w3/4D//hP/yH//Af/sN/+A//4T/8h//wH/7Df/gP/+E//If/8B/+w3/4D//hP/yH//Af/sN/+A//4T/8h//wH/7Df/gP/+E//If/8B/+w3/4D//hP/yH//Af/sN/+A//4T/8h//wH/7Df/gP/+E//If/8B/+w3/4D//hP/yH//Af/uuw5z2u5+M+tuuyiJBcr38nYFYmEaM/n7wm4Md73MrldNjFZr36kYB6nvQmoCYqm4AmSWYCSsUEtI4sJuD0IwHzKgnoBplMgK56NZEAXfX69W5fCViX5VcCxqPefjqXgP6mVwnY1ZGAgSFPCVh9JGD6/wQMIaFKwGBTnV+MVE1AWpCfBCQQpUlAqpGLBFx+JWBWJQFJST8SkL6kIgGJzuO/zRm/vs05ncQoe57/JyB/uPoX6zONVycgJzlwArKXryYgz7llAoTVX3ec6kmAsGripJ7J8KvrpnbEWU7qxcjgnrdcN7U4jpEAM+QDX6y3TeaeAINl2QmwYkacANNmrwmwd6Z5x8kJWGECPIPBJcBd2NZJPR9iRQnwLAaTAHdjG8dDfJAZJMAx5XgCvFXmJsCF5WMChFUTJ/WcXe4kQFe9mkiALEjzk3paIXkTICBSMgGqItGOh0iN9EmA/kiKBIiSoU6AUhnABMiXYTmpp2l6OwFCpw/uOFVPgPrpmZN6kqizCRBKXfhivXpqWQIkVXMJ0Fm1JEB7FQA=);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.hero__picture__mask::before{ content:none; }
.hero__picture__mask img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }


/* ============================================================
   BLOC : SERVICES — montage triangulaire « Découvrir BATAO ».
   VERROUILLÉ : 3 triangles max, clip-path aux coordonnées exactes
   du SVG d'origine, débord droit volontaire (le 3e triangle se
   coupe au bord), bande mobile 66% sous 980px.
   Rollback du clip-path : supprimer les 3 règles marquées [CLIP]
   et restaurer le duo masque SVG ::after + mix-blend-mode:darken
   (voir Archives / clean.css archivé).
   ============================================================ */
.services{ position:relative; }
@media (min-width:46.25em){ .services{ min-height:785px; } }
.services__main{
  position:relative; z-index:1; max-width:var(--container-wide); width:100%;
  margin-inline:auto; padding-inline:var(--gutter);
}
@media (min-width:46.25em){ .services__title{ margin-bottom:115px; } }
.services__list{ list-style:none; padding:0; margin:0; }
.services__list li{ margin:0; }
@media (min-width:61.25em){ .services__list{ margin-left:100px; } }
.services__list-item{ display:block; font-size:var(--t-h2); }
.services__list-item-link{ display:block; padding:3px 0; margin-right:3em; text-decoration:none; }
.services__list-item-link::after{
  content:""; display:block; width:100%; height:1px; margin-top:.1em;
  background-color:var(--c-orange);
  transform:scale3d(0,1,1); transform-origin:left;
  transition:transform .75s cubic-bezier(.25,1,.5,1);
}
.services__list-item-link .icon{ fill:var(--c-orange); }
.services__list-item-link:hover,.services__list-item-link:active,.services__list-item-link:focus{ color:var(--c-orange); }
.services__list-item-link:hover::after,.services__list-item-link:active::after,.services__list-item-link:focus::after,
.services__list-item.is-active .services__list-item-link::after{ transform:scale3d(1,1,1); }
/* couleurs des piliers (1 orange, 2 ambre, 3 vert) */
.services__list-item:nth-child(1) .services__list-item-link .icon{ fill:var(--c-orange); }
.services__list-item:nth-child(1) .services__list-item-link::after{ background-color:var(--c-orange); }
.services__list-item:nth-child(1) .services__list-item-link:hover{ color:var(--c-orange); }
.services__list-item:nth-child(2) .services__list-item-link .icon{ fill:var(--c-amber); }
.services__list-item:nth-child(2) .services__list-item-link::after{ background-color:var(--c-amber); }
.services__list-item:nth-child(2) .services__list-item-link:hover{ color:var(--c-amber); }
.services__list-item:nth-child(3) .services__list-item-link .icon{ fill:var(--c-green); }
.services__list-item:nth-child(3) .services__list-item-link::after{ background-color:var(--c-green); }
.services__list-item:nth-child(3) .services__list-item-link:hover{ color:var(--c-green); }
.services__text{ margin-top:30px; }
@media (max-width:46.24em){ .services__text{ margin-bottom:50px; } }
@media (min-width:46.25em){ .services__text{ margin-top:100px; max-width:calc(50% - 200px); } }

/* Le montage : groupes ABSOLUS empilés dans .services__pictures (toutes
   largeurs), le groupe survolé s'affiche (JS .is-shown). Deux fondus
   superposés : le groupe (.45s) et ses items en cascade (1s + delays). */
.services__pictures{ position:relative; }
/* Desktop ≥980px : composition absolue qui déborde à droite (geste conservé) */
@media (min-width:61.25em){
  .services__pictures{ position:absolute; top:80px; right:0; bottom:0; left:calc(50% - 200px); max-height:75%; }
}
/* 740–979px + mobile : bande en flux, ratio 66%, débord conservé */
@media (max-width:61.24em){
  .services__pictures{ position:relative; padding:0 0 0 var(--gutter); margin-left:0; }
  .services__pictures::before{ display:block; content:""; width:100%; padding-top:66%; }
}
.services__pictures-image{
  position:absolute; top:0; left:0; right:0; bottom:0; height:100%;
  display:flex; align-items:center;
  opacity:0; transition:opacity .45s ease;
}
.services__pictures-image.is-shown{ opacity:1; }
/* Items : 63% du conteneur, carrés, chevauchement -27%, 3 max */
.services__pictures-image-item{
  flex-shrink:0; position:relative; width:63%; aspect-ratio:1/1; height:auto; margin:0;
  opacity:0; transition:opacity 1s cubic-bezier(.25,1,.5,1);
}
.is-shown .services__pictures-image-item{ opacity:1; }
.services__pictures-image-item:nth-child(1){ transition-delay:.075s; }
.services__pictures-image-item:nth-child(2){ transition-delay:.15s; }
.services__pictures-image-item:nth-child(3){ transition-delay:.225s; }
.services__pictures-image-item + .services__pictures-image-item{ margin-left:-27%; }
.services__pictures-image-item:nth-child(n+4){ display:none; }
.services__pictures-image-item img{ display:block; object-fit:cover; top:0; left:0; width:100%; height:100%; max-width:none !important; }
/* [CLIP] Triangles par clip-path (03/07) : remplace masque SVG + mix-blend-mode:darken
   (source du filet d'antialiasing). Coordonnées du tracé exact du SVG d'origine
   (viewBox 170×170 : apex 85/4.443, base y=165.557). */
.services__pictures-image-item{ mix-blend-mode:normal; clip-path:polygon(50% 2.613%, 100% 97.386%, 0% 97.386%); }
.services__pictures-image-item::after{ content:none; }
.services__pictures-image-item:nth-child(even){ clip-path:polygon(0% 2.613%, 100% 2.613%, 50% 97.386%); }


/* ============================================================
   BLOC : HSCROLL — section épinglée réutilisable (le scroll
   vertical devient défilement horizontal ; .is-pinned et
   --hscroll-progress posés par le JS). Épinglage sur TOUS les
   écrans ; seuls reduced-motion / sans JS replient en natif.
   Variantes : (défaut) actus · --marquee · --team
   ============================================================ */
.hscroll{ position:relative; }
.hscroll__pin{ display:flex; flex-direction:column; justify-content:center; }
.hscroll.is-pinned .hscroll__pin{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }
.hscroll__track{ display:flex; gap:34px; padding:0 var(--gutter); will-change:transform; }
.hscroll__track > *{ flex:0 0 auto; width:460px; }
@media (max-width:61.24em){
  .hscroll__track{ gap:18px; }
}
/* La tête (primitive .section-head) : gouttières du bloc + air */
.hscroll .section-head{ margin-inline:var(--gutter); padding-bottom:28px; }
@media (max-width:61.24em){ .hscroll .section-head{ padding-bottom:20px; } }

/* Repli natif (reduced-motion / sans JS / pas de débord) */
.hscroll:not(.is-pinned) .hscroll__pin{ position:static; height:auto; overflow:visible; }
.hscroll:not(.is-pinned){ height:auto; }
.hscroll:not(.is-pinned) .hscroll__track{
  overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  /* fondu de bord droit : signale le débord en mode statique */
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image:linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.hscroll:not(.is-pinned) .hscroll__track > *{ scroll-snap-align:start; }

/* --- Variante ACTUS (défaut, home) : pin ancré sous le header,
       cartes larges qui débordent, images bridées --- */
.hscroll--news .hscroll__pin{ justify-content:flex-start; padding-top:calc(var(--header-h) + var(--s-3)); }
.hscroll--news .section-head{ padding-top:18px; padding-bottom:48px; }
@media (min-width:61.25em){
  .hscroll--news .section-head{ align-items:flex-end; }
}
.hscroll--news .hscroll__track > *{ width:560px; max-width:560px; padding:0; }
@media (max-width:61.24em){
  /* épinglé aussi en mobile : une carte à l'écran, la suivante dépasse */
  .hscroll--news .hscroll__track > *{ width:78vw; max-width:78vw; }
}
.hscroll--news .card-item__picture{ height:300px; overflow:hidden; }
.hscroll--news .card-item__picture img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:61.24em){
  .hscroll--news .card-item__picture{ height:220px; }
}

/* --- Variante MARQUEE : une phrase géante, fantôme --- */
.hscroll--marquee .hscroll__track{ gap:0; align-items:center; }
.hscroll--marquee .hscroll__track > *{ width:auto; max-width:none; }
.hscroll--marquee .marquee__text{
  margin:0; font-size:var(--t-mega); line-height:1.1;
  white-space:nowrap; color:var(--ink-ghost);
}
/* statique (classe posée par le JS) : phrase multi-lignes lisible, pas un ruban */
.hscroll--static.hscroll--marquee .hscroll__track{ overflow-x:hidden; }
.hscroll--static.hscroll--marquee .marquee__text{
  white-space:normal; font-size:var(--t-display); width:100%; max-width:100%; min-width:0;
}

/* --- Variante TEAM (gouvernance) : cartes portrait, tête absolue
       pendant le pin, filet calé sur la piste (--track-offset JS) --- */
.hscroll--team .hscroll__track > *{ width:230px; max-width:230px; text-align:center; align-items:center; }
@media (max-width:61.24em){
  .hscroll--team .hscroll__track > *{ width:200px; max-width:200px; }
  .hscroll--team .hscroll__track{ gap:var(--s-2); }
}
.hscroll--team.is-pinned .section-head{
  position:absolute; top:calc(var(--header-h) + var(--s-3)); left:0; right:0;
  margin-inline:0; padding:0 var(--gutter);
}
.hscroll--team.is-pinned .section-head::after{ content:none; }
.hscroll--team.is-pinned .hscroll__pin::after{
  content:""; position:absolute; left:var(--gutter); right:var(--gutter);
  top:calc(var(--track-offset, 50vh) - 18px); height:2px;
  background:linear-gradient(to right,
    var(--c-orange-ink) calc(var(--hscroll-progress, 0) * 100%),
    var(--sable-deep) calc(var(--hscroll-progress, 0) * 100%));
}
.hscroll--team:not(.is-pinned) .hscroll__track{ justify-content:center; }

/* Cartes personnes (CA + comité) — vivent dans hscroll--team */
.person-card{ display:flex; flex-direction:column; }
.person-card__avatar{
  display:block; width:150px; height:150px; margin:0 auto; border-radius:50%;
  text-decoration:none; transition:transform .2s ease, box-shadow .2s ease;
}
.person-card__avatar:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.person-card__pic{
  display:flex; align-items:center; justify-content:center;
  width:150px; height:150px; border-radius:50%; overflow:hidden;
  font-weight:var(--w-semibold); font-size:52px; letter-spacing:1px;
  color:var(--ink-inverse); line-height:1; background:var(--sable);
}
.person-card__pic img{
  width:100%; height:100%; object-fit:cover; object-position:center 22%;
  border-radius:50%; display:block;
  filter:grayscale(1) contrast(1.04); transition:filter .25s ease;
}
.person-card:hover .person-card__pic img{ filter:none; }
/* monogrammes colorés (membres sans photo) */
.person-card__pic--c1{ background:var(--c-orange); }
.person-card__pic--c2{ background:var(--c-amber); color:var(--ink); }
.person-card__pic--c3{ background:var(--c-green); }
.person-card__pic--c4{ background:var(--c-navy); }
.person-card__pic--gray{ background:var(--sable-deep); color:var(--ink-70); }
.person-card__name{ font-size:var(--t-ui); font-weight:var(--w-semibold); line-height:1.2; color:var(--ink); margin:14px 0 2px; min-height:var(--s-5); }
.person-card__role{ font-size:var(--t-caption); line-height:1.4; color:var(--c-orange-ink); margin:0 0 10px; min-height:var(--s-4); }


/* ============================================================
   BLOC : BE-FIGURES — chiffres clés sur panneau sable, frises wax
   haut et bas, compteurs animés par le JS (valeur finale en dur)
   ============================================================ */
.be-figures{ background:var(--sable); padding:0; }
.be-figures::before,.be-figures::after{
  content:""; display:block; height:34px;
  background:url(../assets/img/hero-band.png) repeat-x center; background-size:auto 100%;
  opacity:.55;
}
.be-figures__wrap{
  max-width:var(--container); margin:0 auto; padding:52px var(--gutter);
  display:flex; flex-wrap:wrap; gap:30px; text-align:center;
}
.be-figure{ flex:1 1 200px; }
.be-figure__n{ display:block; font-size:var(--t-h1); font-weight:var(--w-semibold); color:var(--c-orange); line-height:1; }
.be-figure__l{ display:block; margin-top:12px; font-size:var(--t-ui); color:var(--ink); }


/* ============================================================
   BLOC : CARDS — grille régulière d'actus (page actualités),
   3 → 2 → 1 colonnes
   ============================================================ */
.cards__main{ position:relative; max-width:var(--container-wide); width:100%; margin-inline:auto; padding-inline:var(--gutter); }
.cards .section-head{ padding-bottom:20px; }
@media (min-width:46.25em){ .cards .section-head{ max-width:100%; } }
.cards__list{
  list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:34px;
  max-width:var(--container); margin:0 auto; padding:0;
  /* le filet de la tête colle au haut des cartes (décision Maxime 02/07) */
}
@media (max-width:61.24em){ .cards__list{ grid-template-columns:1fr 1fr; } }
@media (max-width:46.24em){ .cards__list{ grid-template-columns:1fr; } }
.cards__list-item{ padding:0; width:auto; margin:0; }
.cards .card-item__picture{ height:240px; overflow:hidden; border-radius:var(--r-card); }
.cards .card-item__picture img{ width:100%; height:100%; object-fit:cover; }


/* ============================================================
   BLOC : CARD-ITEM — la carte d'actu (tag, image, date, titre
   clampé 2 lignes, lien étendu). Vit dans .cards et .hscroll--news.
   ============================================================ */
.card-item{ position:relative; }
.card-item__picture{ position:relative; transition:opacity .25s cubic-bezier(.25,.46,.45,.94); border-radius:var(--r-card); overflow:hidden; }
.card-item__picture::before{ display:block; content:""; width:100%; padding-top:68.75%; }
.card-item__picture img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.card-item__tag{
  margin:0; position:absolute; top:25px; left:30px; z-index:1;
  display:inline-block; padding:5px 15px; border-radius:var(--r-control);
  background-color:var(--c-orange-ink); color:var(--ink-inverse);
  font-size:var(--t-caption); font-weight:var(--w-semibold);
}
.card-item__content{ padding-top:30px; }
.card-item__content-top{ display:flex; justify-content:space-between; }
.card-item__date{ margin-bottom:20px; }
.card-item__title{
  font-size:var(--t-h4); color:var(--ink); line-height:var(--lh-heading);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-item__title a{ text-decoration:none; }
.card-item__title a::after{ content:""; position:absolute; inset:0; } /* toute la carte cliquable */


/* ============================================================
   BLOC : CAROUSEL — logos financeurs en défilement continu
   (clones + translation posées par le JS)
   ============================================================ */
.carousel{ overflow:hidden; width:100vw; }
.carousel__main{ position:relative; max-width:var(--container-wide); width:100%; margin-inline:auto; padding-inline:var(--gutter); }
.carousel .section-head{ margin-bottom:60px; padding-bottom:24px; }
.carousel__content{ position:relative; }
.carousel__content::before,.carousel__content::after{
  content:""; position:absolute; top:0; bottom:0; width:100vw; z-index:1; background-color:var(--bg);
}
.carousel__content::before{ right:100%; }
.carousel__content::after{ left:100%; }
.carousel__list{ margin:40px 0 0; display:flex; }
.carousel__list-item{
  position:relative; flex:0 0 100%; padding:0 20px;
  display:flex; align-items:center; justify-content:center;
}
@media (min-width:46.25em){ .carousel__list-item{ flex:0 0 calc(50% - 30px); } }
@media (min-width:61.25em){ .carousel__list-item{ flex:0 0 calc(33.333% - 20px); } }
.card-carousel{ width:100%; height:150px; position:relative; }
.card-carousel--wide{ height:100px; }
.card-carousel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain !important; object-position:center; }
@media (min-width:46.25em) and (max-width:81.24em){ .card-carousel img{ height:80%; width:80%; } }


/* ============================================================
   BLOC : MEDIA — image (1:1 / 4:3 / portrait 4:5) + texte,
   ± --reverse. Les listes portent la puce triangle.
   ============================================================ */
.media{ position:relative; }
.media__main{
  position:relative; max-width:1440px; width:100%; margin-inline:auto;
  padding-inline:var(--gutter); display:flex;
}
@media (max-width:61.24em){ .media__main{ flex-direction:column; } }
@media (min-width:61.25em){ .media__main{ align-items:center; } }
.media__content{ padding:40px 0 0; }
@media (max-width:61.24em){ .media__content{ order:1; } }
@media (min-width:61.25em){
  .media__content{ width:45%; padding:0 40px 0 0; }
  .media--reverse .media__content{ order:1; padding:0 0 0 40px; }
}
.media__title{ font-size:var(--t-h2); }
.media__picture{ position:relative; width:100%; margin-left:auto; transform:translateX(20px); }
.media__picture::before{ display:block; content:""; width:100%; padding-top:100%; }
.media__picture img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.media--reverse .media__picture{ margin-left:0; transform:translateX(-20px); }
@media (min-width:61.25em){ .media__picture{ width:55%; } }
/* variantes de ratio (art direction 03/07) */
.media__picture--portrait{ aspect-ratio:4/5; }
.media__picture--portrait::before{ content:none; }
.media__picture--portrait img{ object-position:center 30%; }
.media__picture--landscape{ aspect-ratio:4/3; }
.media__picture--landscape::before{ content:none; }
@media (max-width:46.24em){
  /* en mobile, les media passent en 4:3 (sauf portrait) */
  .media__picture:not(.media__picture--portrait){ aspect-ratio:4/3; }
  .media__picture:not(.media__picture--portrait)::before{ content:none; }
}
.media__text ul{ list-style:none; padding:0; margin:0; font-size:var(--t-body); }
.media__text ul li{ position:relative; padding-left:30px; margin:20px 0; }
.media__text ul li::before{
  content:""; position:absolute; top:8px; left:0; width:10px; height:10px;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 8 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.125 0.384055L8.375 5.14719L0.125 9.91033L0.125 0.384055Z' fill='%23E86027'/%3E%3C/svg%3E") no-repeat center/contain;
}
.media .btn{ margin-bottom:0; }


/* ============================================================
   BLOC : MEDIA-VIDEO — titre + vidéo YouTube en lite-embed 16:9
   ============================================================ */
.media-video{ padding:24px 0 8px; }
.media-video__main{ max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); }
.media-video__title{ margin:6px 0 24px; }
.video-embed{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:var(--r-card); overflow:hidden; background:var(--c-navy);
}
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }


/* ============================================================
   BLOC : PARAGRAPH — hat + titre + texte (--2columns : titre
   centré, texte en 2 colonnes)
   ============================================================ */
.paragraph{ padding:60px 0; }
@media (max-width:46.24em){ .paragraph{ padding:50px 0; } }
.paragraph__main{
  position:relative; max-width:1200px; width:100%; margin-inline:auto;
  padding-inline:var(--gutter); text-align:center;
}
.paragraph--2columns .paragraph__main{ text-align:left; }
.paragraph__title{ margin-bottom:30px; }
@media (min-width:46.25em){
  .paragraph--2columns .paragraph__title{ max-width:1000px; text-align:center; margin:0 auto 60px; }
}
.paragraph__content{ max-width:660px; margin:auto; }
@media (min-width:46.25em){
  .paragraph--2columns .paragraph__content{ columns:2; column-gap:30px; max-width:100%; }
}
.paragraph__text p:last-child{ margin-bottom:0; }


/* ============================================================
   BLOC : PERSONA-LINKS — le hub d'un persona : tuiles sable
   « ce qui vous concerne » (plink)
   ============================================================ */
.persona-links{ padding:64px 0 32px; }
.persona-links__main{ max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); }
.persona-links .section-head{ margin-bottom:30px; }
.persona-links__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:46.24em){ .persona-links__list{ grid-template-columns:1fr; } }
.plink{
  display:block; padding:24px 26px; background:var(--sable); border-radius:var(--r-card);
  text-decoration:none; transition:background .2s, transform .2s;
}
.plink:hover{ background:var(--sable-deep); transform:translateY(-2px); }
.plink__t{ display:block; font-size:var(--t-h4); font-weight:var(--w-semibold); color:var(--c-orange-ink); margin-bottom:6px; }
.plink__t::after{ content:" \2192"; }
.plink__d{ display:block; font-size:var(--t-ui); line-height:1.5; color:var(--ink-body); }


/* ============================================================
   BLOC : PERSONA-CTA — bande sable + LE bouton de la page
   (mailto contact). Un seul par écran.
   ============================================================ */
.persona-cta{
  margin:44px 0 0; padding:72px var(--gutter) 88px; background:var(--sable);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:26px;
}
@media (max-width:46.24em){ .persona-cta{ padding:52px var(--gutter) 64px; } }
.persona-cta__text{
  margin:0; max-width:720px; font-size:var(--t-h3); font-weight:var(--w-semibold);
  line-height:1.22; color:var(--ink);
}


/* ============================================================
   BLOC : PRESS-CONTACT — coordonnées presse (persona journaliste)
   ============================================================ */
.press-contact{ padding:16px 0 84px; }
.press-contact__main{ max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); }
.press-contact .section-head{ margin:8px 0 14px; }
.press-contact__line{ font-size:var(--t-body); }
.press-contact__line a{ color:var(--c-orange-ink); text-decoration:none; }


/* ============================================================
   BLOC : PARTNERS — annuaire des partenaires : logo normalisé,
   nom, descriptif, lien ; tuile --soon réservée
   ============================================================ */
.partners{ padding:80px 0; }
@media (max-width:46.24em){ .partners{ padding:52px 0; } }
.partners__main{ max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); }
.partners .section-head{ margin:8px 0 44px; }
.partners__list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:48px 56px;
}
@media (max-width:46.24em){ .partners__list{ grid-template-columns:1fr; gap:28px; } }
.partner{ display:flex; flex-direction:column; align-items:flex-start; }
/* logos posés sur blanc, hauteur normalisée, alignés à gauche */
.partner__logo{
  display:flex; align-items:center; justify-content:flex-start;
  width:auto; height:76px; margin-bottom:20px; padding:0;
  background:none; border-radius:0;
}
.partner__logo img{ max-height:64px; max-width:240px; width:auto; height:auto; object-fit:contain; object-position:left center; }
.partner__logo--soon{
  display:flex; align-items:center; justify-content:center; width:100%; height:110px;
  margin-bottom:18px; padding:18px 22px;
  background:repeating-linear-gradient(135deg, var(--sable), var(--sable) 12px, var(--sable-deep) 12px, var(--sable-deep) 24px);
  border:1px dashed var(--c-orange-ink); border-radius:var(--r-card);
}
.partner__logo--soon span{ font-size:var(--t-ui); font-weight:var(--w-semibold); color:var(--c-orange-ink); }
.partner__name{ margin:0 0 8px; font-size:var(--t-h4); line-height:1.25; color:var(--c-orange-ink); }
.partner__desc{ margin:0; font-size:var(--t-ui); line-height:var(--lh-body); color:var(--ink-body); }
.partner__link{ margin-top:14px; color:var(--c-orange-ink); font-weight:var(--w-semibold); text-decoration:none; }
.partner__link::after{ content:" \2192"; }
.partner__link:hover{ text-decoration:underline; }


/* ============================================================
   BLOC : CONTACT-BLOCK — coordonnées + bouton mailto
   (contact = mailto, décision Maxime ; pas de formulaire)
   ============================================================ */
.contact-block__main{ position:relative; max-width:940px; width:100%; margin-inline:auto; padding-inline:var(--gutter); }
.contact-block .btn--primary{ text-decoration:none; }


/* ============================================================
   BLOCS ARTICLES — corps, chapô, intertitres, citation, figures
   ============================================================ */
.article-body__main{ max-width:760px; margin:0 auto; padding:56px var(--s-3); } /* colonne de lecture ~712px, héritée du 22px du thème */
.article-body p{ font-size:var(--t-body); line-height:1.7; margin:0 0 1.1em; color:var(--ink); }
/* chapô */
.article-body p.article-lead{
  font-size:var(--t-lead); font-weight:var(--w-medium); line-height:var(--lh-lead);
  color:var(--ink); margin:0 0 1.3em;
}
/* intertitre encre (rythme l'article) */
.article-body__main h2{ color:var(--c-orange-ink); font-size:var(--t-h4); line-height:1.25; margin:1.8em 0 .5em; }
/* bouton en fin d'article (404 « Retour à l'accueil ») */
.article-body .btn{ margin-top:10px; }

/* citation en exergue */
.article-quote{ max-width:860px; margin:6px auto 48px; padding:0 var(--s-3) 0 64px; position:relative; }
.article-quote p{ font-size:var(--t-h3); line-height:1.4; font-style:italic; color:var(--ink); margin:0; }
.article-quote::before{
  content:"\00AB"; position:absolute; left:18px; top:-14px;
  font-size:70px; line-height:1; color:var(--c-orange);
  font-family:Georgia,"Times New Roman",serif;
}
.article-quote cite{ display:block; margin-top:16px; font-size:var(--t-caption); font-style:normal; color:var(--ink-muted); }
@media (max-width:46.24em){ .article-quote{ padding-left:46px; } }

/* figure légendée pleine largeur de contenu */
.article-fig-sec{ padding:8px 0 52px; }
.article-fig{ max-width:1120px; margin:0 auto; padding-inline:var(--s-3); }
.article-fig--narrow{ max-width:860px; }
.article-fig figure{ margin:0; }
.article-fig img{ width:100%; display:block; border-radius:var(--r-card); }
.article-figcap{ margin:10px 2px 0; font-size:var(--t-caption); line-height:1.35; color:var(--ink-muted); }


/* ============================================================
   BLOC : GALERIE + LIGHTBOX — colonnes d'images cliquables,
   agrandissement (dialogue injecté par le JS)
   ============================================================ */
.gallery-sec{ padding:0 0 64px; }
.gallery{ columns:3 260px; column-gap:14px; max-width:1120px; margin:0 auto; padding-inline:var(--s-3); }
.gallery__item{ position:relative; display:block; margin:0 0 16px; break-inside:avoid; cursor:zoom-in; }
.gallery__item img{ width:100%; display:block; border-radius:var(--r-card); transition:opacity .2s; }
.gallery__item:hover img{ opacity:.88; }
.gallery__cap{ display:block; font-size:var(--t-caption); line-height:1.35; color:var(--ink); opacity:.85; margin-top:6px; }
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,25,.92);
  display:none; align-items:center; justify-content:center; z-index:9999;
}
.lightbox.is-open{ display:flex; }
.lightbox img{ max-width:92vw; max-height:92vh; border-radius:var(--r-card); }
.lightbox__close{
  position:absolute; top:18px; right:26px; color:var(--ink-inverse);
  font-size:42px; line-height:1; cursor:pointer; background:none; border:0;
}


/* ============================================================
   BLOC : LITE-YT — vignette cliquable, l'iframe YouTube n'est
   chargée qu'au clic (RGPD, perf)
   ============================================================ */
.lite-yt{
  position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; cursor:pointer;
  background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
}
.lite-yt::before{ content:""; position:absolute; inset:0; background:rgba(0,0,25,.18); transition:background .2s; }
.lite-yt:hover::before{ background:rgba(0,0,25,.30); }
.lite-yt__play{ position:relative; z-index:1; width:76px; height:76px; border-radius:50%; background:rgba(232,96,39,.94); transition:transform .2s; }
.lite-yt__play::after{
  content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%);
  border-style:solid; border-width:15px 0 15px 24px;
  border-color:transparent transparent transparent var(--ink-inverse);
}
.lite-yt:hover .lite-yt__play{ transform:scale(1.08); }