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

/* ============================================================
   GALERIE DÉCORS — variante hscroll pour la home (LOT13.4, copie SN,
   ajoutée 11/07). Cartes à la largeur de BASE du composant (460px,
   voir .hscroll__track > * ci-dessus) : contrairement à --news, aucune
   surcharge de largeur ni de hauteur d'image fixe — le ratio vient de
   .card-item__picture (bloc CARDS, padding-top standard). Tête ancrée
   sous le header comme --news, pour la même raison (bloc titre + piste,
   pas un élément unique à centrer verticalement).
   ============================================================ */
.hscroll--galerie .hscroll__pin{ justify-content:flex-start; padding-top:calc(var(--header-h) + var(--s-3)); }
.hscroll--galerie .section-head{ padding-top:18px; padding-bottom:48px; }
@media (min-width:61.25em){
  .hscroll--galerie .section-head{ align-items:flex-end; }
}
@media (max-width:61.24em){
  /* Mesuré le 30/08 à 386px : la carte gardait la largeur de base (460px),
     donc plus large que l'écran — image rognée et contenu du pin en débord
     (857px pour 840px de pin, coupé par overflow:hidden). Même traitement que
     --news : une carte à l'écran, la suivante dépasse. */
  .hscroll--galerie .hscroll__track > *{ width:78vw; max-width:78vw; }
}
/* Hauteur d'image bornée (30/08). Sans elle, la vignette prend le ratio de la
   photo d'origine : les décors mélangent portrait et paysage, donc des cartes
   de hauteurs très inégales, et surtout un contenu de pin plus haut que le pin
   dès que la carte s'élargit (mesuré à 820px : 1062px de contenu pour 1024px
   de pin, le bas rogné par overflow:hidden). Même recette que --news, mais
   liée à la hauteur d'écran puisque la section est épinglée. */
.hscroll--galerie .card-item__picture{ height:clamp(190px, 30vh, 300px); overflow:hidden; }
.hscroll--galerie .card-item__picture img{ width:100%; height:100%; object-fit:cover; }

/* --- Option FREE (30/08/2026) : la section renonce à l'épinglage et garde le
       défilement horizontal natif de la piste (scroll-snap + fondu de bord
       droit, l'état déjà prévu pour reduced-motion). Le JS pose en plus
       .hscroll--static. Sert aux pages où une section doit rester en bande
       horizontale native (scroll-snap + fondu de bord droit) sans épinglage.
       Sur la home SN, galerie et actualités sont toutes deux épinglées.
       Sans pin, le calage sous le header n'a plus de sens : la section reprend
       le padding vertical standard.
       Placée APRÈS les variantes (--news, --team, --galerie) : même
       spécificité, c'est l'ordre qui tranche. --- */
.hscroll--free .hscroll__pin{ padding-top:var(--sect-pad); padding-bottom:var(--sect-pad); }

/* 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; } }
/* Variante à 3 tuiles (30/08/2026, portes de la plateforme décors sur la home
   SN). La grille de base est à 2 colonnes : un 3e élément y reste orphelin sur
   une rangée à lui. Trois colonnes au-delà de 980px, une seule en dessous —
   deux colonnes laisseraient le même orphelin. Les tuiles s'étirent à la
   hauteur de la rangée (le <li> est étiré par la grille, pas le <a>). */
.persona-links__list--3{ grid-template-columns:1fr 1fr 1fr; }
@media (max-width:61.24em){ .persona-links__list--3{ grid-template-columns:1fr; } }
.persona-links__list--3 > li{ display:flex; }
.persona-links__list--3 .plink{ flex:1; }
.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; }
.contact-block .btn{ text-decoration:none; }

/* Adresse et carte côte à côte (01/09, remaniement demandé par Maxime : la
   carte était une section pleine largeur en bas de page, elle n'y servait à
   rien). Le bloc MAP-BLOCK qui vivait ici a été absorbé et supprimé ; le JS
   (js/carte-contact.js) vise l'id #carte-contact, pas ces classes, il n'a donc
   pas bougé. Ratio fixe sur le cadre pour que la hauteur ne dépende pas du
   chargement des tuiles : pas de saut de mise en page. Les 404 utilisent aussi
   .contact-block mais aucune de ces classes : elles ne bougent pas. */
/* Variante large : .contact-block__main est né à 940 px pour les 404, mais sur
   les pages contact il précède contact-card et contact-form, qui vivent en
   --container-wide. Mesuré en ligne le 01/09 : 940 px centrés contre 1580,
   soit 320 px de décalage entre le bord gauche de l'adresse et celui des
   blocs suivants — l'œil le voit tout de suite. La variante aligne les trois
   blocs ; les 404 gardent leur largeur, elles n'ont pas cette classe. */
.contact-block--large .contact-block__main{ max-width:var(--container-wide); }
/* Colonnes asymétriques : la carte est une VIGNETTE, pas une illustration
   pleine largeur (demande Maxime). Une grille 1fr/1fr la faisait grossir à
   730×548 une fois le bloc passé en --container-wide — mesuré en ligne. La
   deuxième colonne est donc bornée en dur, le texte prend le reste. */
/* justify-content:start et une colonne de texte bornée : sans cela la colonne
   de gauche prenait 1fr, soit ~1100 px pour 260 px de texte, et la vignette
   partait se coller au bord droit — 600 px de blanc entre l'adresse et sa
   carte. « À côté de l'adresse » veut dire à côté. */
.contact-block__cols{
  display:grid; grid-template-columns:minmax(260px,460px) 420px;
  justify-content:start; gap:56px; align-items:start;
}
.contact-block__text h2{ margin-top:0; }
.contact-block__map{
  aspect-ratio:4/3; border:1px solid var(--rule, #d9d9de); border-radius:var(--r-card);
  overflow:hidden; background:#eee;
}
.contact-block__map .leaflet-container{ width:100%; height:100%; font:inherit; background:#eee; }
.contact-block__map-repli{ margin:0; padding:16px; font-size:var(--t-body); color:var(--ink-body); }
/* Repli à 64em (1024 px) et non au 46.24em habituel du site : les deux
   colonnes valent 460 + 56 + 420 = 936 px, plus les gouttières. En attendant
   740 px on déborderait sur toute la plage 740→1000 px, c'est-à-dire les
   tablettes en paysage. Le point de rupture suit la largeur du contenu, pas
   l'habitude. */
@media (max-width:64em){
  .contact-block__cols{ grid-template-columns:1fr; gap:26px; }
  .contact-block__map{ aspect-ratio:16/9; max-width:520px; }
}


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


/* ============================================================================
   EXTENSION V3 — variantes SN ajoutées à la bibliothèque batao.org
   (05/07/2026, mission V3 vitrine batao.sn). Ces règles n'existent nulle part
   dans batao-be-clean/css/blocks.css original ; elles sont ajoutées ICI, en
   fin de fichier, sur une copie, jamais dans l'original. Un bloc = une
   section commentée, comme au-dessus.
   Sommaire de l'extension : HERO PILLS (variantes couleur SN) ·
   SERVICES --SN (accent jaune #fae315) · GALLERY-SEC MAIN (tête alignée) ·
   LIGHTBOX SN (voile noir + légende) · HSCROLL--UNIVERS (galerie sticky
   des 4 univers, remplace le bloc TABS rejeté le 06/07) · CONTACT-CARD
   (fiche contact avec portrait)
   ============================================================================ */

/* ============================================================
   EXTENSION : HERO PILLS COULEUR SN — 7 pilules personas de la
   home batao.sn (au lieu des 5 personas org). La pilule de base
   reste .hero__button (org, inchangée) ; ces variantes ajoutent
   uniquement la couleur de bordure + le remplissage hover/focus,
   par-dessus les règles nth-child de l'org qui ne s'appliquent
   qu'à .hero__links-main (donc pas de conflit avec la home org).
   Couleurs reprises telles quelles du CSS du thème SN (mesurées
   dans la feuille de style de la v2, pas devinées) : noir encre,
   jaune bouton #fc0, orange marque,
   bleu clair #6bf2ed, violet #404096, vert marque ×2 (comédiens,
   figurants).
   ============================================================ */
.hero__pill--black{ border-color:var(--ink); }
.hero__pill--black:hover,.hero__pill--black:focus-visible{ background:var(--ink); border-color:var(--ink); color:var(--ink-inverse); }

.hero__pill--yellow{ border-color:#FFCC00; }
.hero__pill--yellow:hover,.hero__pill--yellow:focus-visible{ background:#FFCC00; border-color:#FFCC00; color:var(--ink); }

.hero__pill--orange{ border-color:var(--c-orange); }
.hero__pill--orange:hover,.hero__pill--orange:focus-visible{ background:var(--c-orange-ink); border-color:var(--c-orange-ink); color:var(--ink-inverse); }

.hero__pill--blue{ border-color:#6BF2ED; }
.hero__pill--blue:hover,.hero__pill--blue:focus-visible{ background:#6BF2ED; border-color:#6BF2ED; color:var(--ink); }

.hero__pill--violet{ border-color:#404096; }
.hero__pill--violet:hover,.hero__pill--violet:focus-visible{ background:#404096; border-color:#404096; color:var(--ink-inverse); }

.hero__pill--green{ border-color:var(--c-green); }
.hero__pill--green:hover,.hero__pill--green:focus-visible{ background:var(--c-green-ink); border-color:var(--c-green-ink); color:var(--ink-inverse); }


/* ============================================================
   EXTENSION : SERVICES --SN — variante jaune batao.sn du 2e pilier
   (Compétences), accent #fae315 mesuré dans la feuille de style du
   thème SN (règle .services__list-item-link--yellow::after de la v2).
   Les piliers 1 et 3
   gardent les couleurs org (orange, vert) : seul le 2e change de
   couleur ambre -> jaune SN, pour respecter la cible « accent
   jaune services #fae315 conservé, tout le reste geste org ».
   ============================================================ */
.services--sn .services__list-item:nth-child(2) .services__list-item-link .icon{ fill:#FAE315; }
.services--sn .services__list-item:nth-child(2) .services__list-item-link::after{ background-color:#FAE315; }
.services--sn .services__list-item:nth-child(2) .services__list-item-link:hover,
.services--sn .services__list-item:nth-child(2) .services__list-item-link:active,
.services--sn .services__list-item:nth-child(2) .services__list-item-link:focus{ color:#B8A400; } /* encre lisible sur blanc, le jaune brut n'est pas assez contrasté en texte */


/* ============================================================
   EXTENSION : GALLERY-SEC MAIN — tête de section alignée sur la
   galerie (06/07). L'org place le titre des galeries dans un
   .article-body__main séparé ; sur la page décors la tête vit dans
   le bloc : .gallery-sec__main reprend la boîte exacte de .gallery
   (1120px + padding --s-3) pour que hat et titre s'alignent sur le
   bord gauche des vignettes. La .gallery interne perd son propre
   padding pour éviter la double gouttière.
   ============================================================ */
.gallery-sec__main{ max-width:1120px; margin-inline:auto; padding-inline:var(--s-3); }
.gallery-sec__main .gallery{ max-width:none; padding-inline:0; }
.gallery-sec .section-head{ margin-bottom:24px; }

/* ============================================================
   EXTENSION : LIGHTBOX SN — voile noir transparent (06/07) : le
   rgba(0,0,25,.92) de l'org (bleu nuit) est hors charte SN, demande
   Maxime -> noir. Et légende .lightbox__cap : le descriptif retiré
   des vignettes (.gallery__cap supprimés du HTML) s'affiche dans la
   lightbox à l'ouverture (sn.js lit data-caption sur .gallery__item).
   ============================================================ */
.lightbox{ background:rgba(0,0,0,.92); }
.lightbox__cap{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  max-width:84vw; margin:0; text-align:center;
  color:#fff; font-size:var(--t-caption); line-height:1.4; opacity:.92;
}

/* ============================================================
   NOUVEAU BLOC : UNIVERS-TABS — fusion galerie + 4 univers
   (06/07 soir, demande Maxime ; remplace gallery-sec ET la
   variante hscroll--univers, toutes deux retirées). Onglets =
   pilules org (.hero__button réutilisée + état actif) ; chaque
   panneau = intro + .gallery org (lightbox + data-caption
   conservées). Depuis le 31/08, la zone panneaux ne défile PLUS
   en interne : hauteur naturelle, c'est la page qui défile (voir
   le commentaire de .univers-tabs__panels ci-dessous). Repli
   sans JS : tous les panneaux visibles, empilés.
   ============================================================ */
.univers-tabs{ padding:24px 0 64px; }
.univers-tabs__main{ max-width:var(--container-wide); width:100%; margin-inline:auto; padding-inline:var(--gutter); }
.univers-tabs .section-head{ margin-bottom:22px; }
.univers-tabs__list{ display:flex; flex-wrap:wrap; margin:0 0 26px; padding:0; }
/* .hero__button fournit la pilule (padding, bord orange, radius 32px) ;
   ici on ne fait qu'adapter le <button> et poser hover/actif (les fonds
   hover de l'org vivent dans les nth-child du hero, pas ici). */
.univers-tabs__btn{ cursor:pointer; font:inherit; font-size:var(--t-ui); color:var(--ink); }
/* Le survol ne doit PAS reprendre le style de l'onglet actif : mesuré le
   31/08, la souris restée sur une pilule après un clic la laissait pleine
   orange en même temps que la pilule réellement active — deux onglets
   allumés, et l'impression que le bloc ne changeait pas d'univers. Le
   survol se contente donc d'épaissir le bord. Un seul fond plein à la fois. */
.univers-tabs__btn:hover{ border-color:var(--c-orange-ink); box-shadow:inset 0 0 0 1px var(--c-orange-ink); }
.univers-tabs__btn:focus-visible{ outline:2px solid var(--c-orange-ink); outline-offset:2px; }
.univers-tabs__btn[aria-selected="true"]{ background:var(--c-orange-ink); border-color:var(--c-orange-ink); color:var(--ink-inverse); font-weight:var(--w-semibold); }
/* PAS de zone défilable interne. Le panneau prend sa hauteur naturelle et
   c'est la page qui défile. Historique à ne pas rejouer : la version du
   06/07 bornait ce conteneur (max-height + overflow-y) et enchaînait les
   univers à la molette depuis sn.js. Mesuré le 31/08 sur le staging, ce
   montage volait le défilement — 10 crans de molette dans la galerie,
   scrollY inchangé à 1653 : impossible d'atteindre le bas de page sans
   avoir parcouru les quatre univers. Même piège que l'overscroll-behavior
   retiré le 06/07, sous une autre forme. Ne pas réintroduire. */
html.js .univers-tabs__panel[hidden]{ display:none; }
.univers-tabs__panel + .univers-tabs__panel{ margin-top:44px; } /* repli sans JS */
.univers-tabs__intro{ max-width:760px; margin:0 0 22px; }
.univers-tabs__intro h3{ font-size:var(--t-h4); margin:0 0 10px; }
.univers-tabs__intro p{ font-size:var(--t-body); line-height:var(--lh-body); color:var(--ink-body); margin:0; }
/* la galerie org occupe la largeur du panneau, sans sa gouttière propre */
.univers-tabs .gallery{ max-width:none; padding-inline:0; margin-inline:0; }

/* ============================================================
   NOUVEAU BLOC : CONTACT-CARD — fiche contact avec portrait (06/07,
   demande Maxime : « une petite fiche avec la tronche de Thierno »).
   Primitives org (section-head, hat, icônes du sprite) + carte
   bordée sable. Remplace press-contact en fin de page décors.
   ============================================================ */
.contact-card{ padding:24px 0 80px; }
.contact-card__main{ max-width:var(--container-wide); width:100%; margin-inline:auto; padding-inline:var(--gutter); }
.contact-card .section-head{ margin-bottom:30px; }
.contact-card__card{
  display:flex; align-items:center; gap:34px;
  max-width:720px; padding:28px;
  border:1px solid var(--sable-deep); border-radius:var(--r-card); background:var(--bg);
}
.contact-card__photo{ flex:0 0 auto; width:180px; margin:0; }
.contact-card__photo img{ display:block; width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r-card); }
/* noir et blanc -> couleur au survol, comme le trombinoscope org */
.contact-card__photo img{ filter:grayscale(1) contrast(1.04); transition:filter .25s ease; }
.contact-card__card:hover .contact-card__photo img,
.contact-card__card:focus-within .contact-card__photo img{ filter:none; }
.contact-card__name{ font-size:var(--t-h4); margin:0 0 4px; }
.contact-card__role{ font-size:var(--t-body); color:var(--ink-body); margin:0 0 14px; }
.contact-card__links{ list-style:none; margin:0; padding:0; }
.contact-card__links li{ margin:6px 0; }
.contact-card__links a{ text-decoration:none; }
.contact-card__links a:hover,.contact-card__links a:focus-visible{ color:var(--c-orange-ink); }
.contact-card__links .icon{ width:1em; height:1em; fill:var(--c-orange); vertical-align:-.1em; margin-right:6px; }
@media (max-width:46.24em){
  .contact-card__card{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   NOUVEAU BLOC : CONTACT-FORM — formulaire Brevo des pages
   contact (01/09, décision Maxime). Le HTML vit dans
   partials/contact-form.njk, les textes et l'URL d'action dans
   _data/nav.js (un formulaire Brevo par langue).

   La feuille de Brevo (sibforms.com/forms/end-form/build/sib-styles.css)
   fournit déjà .input, .form__entry, les panneaux de message et
   l'état d'erreur par champ. On ne la remplace pas, on repose le
   formulaire sur les tokens du site.

   POURQUOI DES !important ICI, alors que le reste de la feuille s'en
   passe : head.njk charge sib-styles.css APRÈS blocks.css (ligne 47
   contre ligne 3), et Brevo écrit .sib-form .input, soit la même
   spécificité que .contact-form__box .input. À égalité, la feuille
   chargée en dernier gagne. Le bloc .footer-newsletter, plus haut
   dans ce fichier, a résolu le même problème de la même façon en
   06/07 : on suit ce précédent plutôt que de gonfler les sélecteurs.
   Les !important sont strictement bornés aux propriétés que Brevo
   pose lui-même.

   Les panneaux #success-message et #error-message sont masqués par
   défaut par la feuille Brevo et affichés par main.js via la classe
   .sib-form-message-panel--active. Ne pas leur imposer un display
   ici : ils s'afficheraient en permanence.
   ============================================================ */
.contact-form{ padding:24px 0 80px; }
.contact-form__main{ max-width:var(--container-wide); width:100%; margin-inline:auto; padding-inline:var(--gutter); }
.contact-form .section-head{ margin-bottom:30px; }
.contact-form__wrap{ max-width:720px; }
/* Famille posée à la racine du bloc Brevo, PAS en font:inherit sur chaque
   élément : mesuré en ligne le 01/09, sib-styles.css pose Roboto sur
   .sib-form lui-même, si bien qu'un inherit sur les enfants héritait
   fidèlement… de Roboto. Tout le bloc sortait en Roboto au milieu d'une
   page en Open Sans. On impose donc la famille ici, les enfants suivent. */
.contact-form .sib-form{
  font-family:'Open Sans',sans-serif !important;
  background:transparent !important; padding:0 !important; text-align:left !important;
}
/* Le padding et la marge négative se compensent visuellement (0 au total) et
   ne servent qu'à corriger le défilement de main.js. Mesuré en ligne le
   01/09 : après un envoi réussi, main.js fait un window.scrollTo qui place le
   BORD HAUT de #sib-form-container à y=50 (offsetTop moins une constante de
   50 codée en dur dans le script). Le header du site est en position:fixed et
   fait 110 px : le panneau de confirmation, premier enfant du conteneur,
   atterrissait donc INTÉGRALEMENT derrière le header. Message affiché,
   message invisible — l'internaute n'avait aucun retour. Remonter l'origine
   du conteneur de 120 px déplace d'autant la cible du scroll et fait tomber
   le panneau juste sous le header. */
.contact-form #sib-form-container{ max-width:720px; padding-top:120px; margin-top:-120px; }
.contact-form__box{
  background:var(--bg) !important; border:1px solid var(--sable-deep) !important;
  border-radius:var(--r-card) !important; max-width:none !important;
  padding:28px !important; text-align:left !important;
}
.contact-form .sib-form-block{ padding:0 !important; }
.contact-form__intro{ font-size:var(--t-body); line-height:var(--lh-body); color:var(--ink-body); margin:0 0 22px; }
.contact-form__field{ margin-bottom:18px; }
.contact-form__field .form__entry{ margin:0; }
.contact-form .entry__label{
  display:block !important; margin:0 0 6px !important;
  font:inherit !important; font-size:var(--t-ui) !important;
  font-weight:var(--w-semibold) !important; color:var(--ink) !important;
}
.contact-form .sib-input input,
.contact-form .contact-form__textarea{
  width:100% !important; border:1px solid var(--ink-muted) !important;
  border-radius:var(--r-card) !important; background:var(--bg) !important;
  font:inherit !important; color:var(--ink) !important;
}
.contact-form .sib-input input{ height:44px !important; padding:0 12px !important; }
.contact-form .contact-form__textarea{
  min-height:150px !important; padding:12px !important;
  line-height:var(--lh-body) !important; resize:vertical;
}
.contact-form .input:focus-visible{ outline:2px solid var(--c-orange-ink); outline-offset:1px; border-color:var(--c-orange-ink) !important; }
/* Message d'erreur par champ : masqué par la feuille Brevo, affiché par
   main.js. On ne touche pas au display, seulement à la famille et à la taille. */
.contact-form .entry__error{ font:inherit; font-size:var(--t-caption); margin-top:6px; }
.contact-form__optin{ margin:6px 0 18px; }
.contact-form__optin .checkbox__label{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.contact-form__optin input[type="checkbox"]{ flex:0 0 auto; margin-top:.2em; accent-color:var(--c-orange-ink); }
.contact-form__optin .checkbox__text{ font:inherit; font-size:var(--t-body); line-height:var(--lh-body); color:var(--ink-body); }
.contact-form__rgpd{ font-size:var(--t-caption); line-height:1.5; color:var(--ink-body); margin:0 0 22px; }
.contact-form__rgpd a{ color:var(--c-orange-ink); }
/* Le bouton porte .btn .btn--primary du site ET les classes Brevo dont
   main.js a besoin : il ajoute et retire .sib-form-block__button-disabled
   et manipule le svg de chargement. Ne jamais retirer les classes Brevo,
   seulement les neutraliser visuellement. */
.contact-form .sib-form-block__button{
  display:inline-flex !important; align-items:center; justify-content:center; gap:10px;
  font:inherit; font-size:var(--t-ui); font-weight:var(--w-semibold);
  background:var(--c-orange-ink) !important; color:var(--ink-inverse) !important;
  border:0 !important; border-radius:var(--r-control) !important;
  padding:13px 30px !important; text-align:center !important;
  cursor:pointer; transition:background .2s;
}
.contact-form .sib-form-block__button:hover{ background:var(--c-orange-ink-hover) !important; }
.contact-form .sib-form-block__button-disabled{ opacity:.6; cursor:default; }
.contact-form .progress-indicator__icon{ width:1em; height:1em; fill:currentColor; }
/* Panneaux de confirmation et d'erreur. Le HTML que Brevo génère porte ses
   couleurs en style inline ; ce balisage-ci n'en a pas, et sans ces règles le
   panneau sortait en texte nu sur fond transparent (mesuré en ligne le
   01/09). Fond, bord et encre viennent donc d'ici. Le display reste à Brevo. */
.contact-form .sib-form-message-panel{
  max-width:720px; margin:0 0 18px; padding:14px 18px;
  border:1px solid; border-radius:var(--r-card);
}
.contact-form .sib-form-message-panel__text{ font:inherit; font-size:var(--t-body); line-height:var(--lh-body); }
/* Sélecteurs à deux classes : à une seule, .contact-form .sib-form-message-panel
   (0,2,0) l'emportait et la bordure retombait sur currentColor. */
.contact-form .contact-form__panel--success{ background:#E7F7EF; border-color:var(--c-green); color:#0A5C37; }
/* Pas de token rouge dans la charte : les quatre couleurs officielles sont
   l'orange, l'ambre, le vert et le bleu nuit. Rouge sobre posé ici, contrasté
   pour rester lisible (7,4:1 sur son fond). */
.contact-form .contact-form__panel--error{ background:#FDECEA; border-color:#C0392B; color:#8A2620; }
@media (max-width:46.24em){
  .contact-form__box{ padding:20px !important; }
}