/* ==========================================================================
   SIAM — Styles partagés du site public.
   Direction artistique « Terre & Institution » (19e édition, 2027).

   Principes tenus dans tout ce fichier :
   1. DEUX TYPOGRAPHIES, DEUX RÔLES — Fraunces (serif éditoriale) pour les
      titres et les grands chiffres, Montserrat pour l'interface et le texte
      courant. Jamais l'inverse.
   2. PAS D'ARRONDI SYSTÉMATIQUE — un filet net plutôt qu'un rayon de 14px
      répété sur toutes les familles de blocs. L'arrondi plein (pastille)
      reste réservé aux étiquettes rondes réellement rondes.
   3. PAS D'OMBRE DÉCORATIVE — l'élévation se lit à la couleur et au filet.
      Les seules ombres restantes portent une superposition réelle (menu
      déroulant, modale, vignette vidéo au-dessus d'une photo).
   4. LA COULEUR EST HIÉRARCHIQUE — le vert profond porte les bandes
      institutionnelles, l'orange ne sert qu'aux points d'action et aux
      filets d'accent, la palette des 13 pôles ne sert qu'à identifier un
      pôle. Aucun dégradé décoratif hors hero (cf. BRIEF.md).
   5. LA TEXTURE VIENT DE LA MARQUE — le semis de fleurs d'oranger du logo
      (--fleurs) remplace les dégradés d'ambiance, et uniquement sur aplat
      sombre ou coloré.

   Les valeurs viennent de tokens.css (inclus avant ce fichier).
   Mobile-first, CSS natif (Grid/Flexbox), pas de framework.
   ========================================================================== */

/* ===== Base ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-ui);
  font-size:var(--fs-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
[lang="ar"], .ar{font-family:var(--font-ar);direction:rtl}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
/* Colonne de lecture d'un texte long, ALIGNÉE À GAUCHE sur la gouttière du
   `.wrap` (donc sur le logo de l'en-tête) : un bloc centré plus étroit que
   l'en-tête donnait l'impression d'un contenu « rétréci » au milieu d'une
   page large. Même principe que .lead-text / .legal-body. */
.prose,.pb-prose{margin:0}

/* Titres : serif éditoriale. `font-optical-sizing:auto` fait travailler
   l'axe `opsz` de Fraunces — les grands titres gagnent des empattements
   fins et contrastés, les petits restent robustes. C'est ce qui distingue
   un vrai réglage typographique d'une simple substitution de police. */
h1,h2,h3,h4{
  margin:0;
  font-family:var(--font-display);
  font-optical-sizing:auto;
  font-weight:700;
  letter-spacing:-0.015em;
  line-height:1.12;
  /* Pas de `color` ici : les titres doivent HÉRITER de leur contexte, sinon
     ils repassent en encre sombre sur les bandes vertes et le hero. */
}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.25;letter-spacing:-0.01em}
p{margin:0}
/* L'arabe n'a pas d'équivalent à Fraunces dans la charte : Vazirmatn porte
   titres ET texte, sinon le rendu retomberait sur une serif latine. */
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,[lang="ar"] h4,
.ar h1,.ar h2,.ar h3,.ar h4{font-family:var(--font-ar);letter-spacing:0}

/* Libellé en capitales : sur-titres, étiquettes, intitulés de colonne.
   Une seule définition, réutilisée partout (cf. .eyebrow, footer h4,
   .day-row dt, .person .role, .partner-tier h3…). */
.label,.eyebrow{
  font-family:var(--font-ui);
  font-size:var(--fs-label);
  font-weight:700;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
}

/* Sur-titre de section. Le filet orange porte l'accent de marque, le texte
   reste en encre douce : un libellé entier en orange, répété à chaque
   section, finissait par faire du bruit sans rien hiérarchiser. */
.eyebrow{
  display:flex;align-items:center;gap:12px;
  color:var(--ink-soft);
}
.eyebrow::before{
  content:"";flex-shrink:0;width:30px;height:3px;background:var(--orange);display:inline-block;
}

/* ===== Boutons =====
   Hiérarchie des CTA (charte SIAM) :
     .btn-primary   orange SIAM, texte blanc  -> Réserver, S'inscrire, Payer, Découvrir
     .btn-secondary filet vert SIAM           -> Voir détails, En savoir plus
     .btn-danger    rouge charte              -> Annuler
     .btn-light     fond blanc                -> CTA posé sur un fond coloré (hero, bandeaux)
     .btn-outline   filet neutre              -> action tertiaire
   Les fonds colorés utilisent --orange-cta / --green-cta (mêmes teintes,
   assombries au contraste AA avec du blanc — cf. tokens.css).
   Hauteur mini 44px : cible tactile confortable sur mobile. */
/* Forme : rectangle à coins vifs (--radius-xs). La pastille arrondie
   générique est abandonnée — elle donnait le même objet à un CTA d'achat,
   à un filtre et à un lien tertiaire. */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 28px;min-height:48px;border-radius:var(--radius-xs);
  font-family:var(--font-ui);font-weight:700;font-size:14px;line-height:1.1;
  letter-spacing:.015em;
  border:1.5px solid transparent;cursor:pointer;text-align:center;
  transition:background-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease);
}
/* Micro-interaction : un voile qui balaie le bouton depuis la gauche.
   Transformation seule (compositée par le GPU), aucun reflow. */
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:currentColor;opacity:0;
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn:hover::after{transform:scaleX(1);opacity:.1}
.btn:active{transform:translateY(1px)}

.btn-primary{background:var(--orange-cta);color:#fff}
.btn-primary:hover{background:#A82E0C}
.btn-secondary{border-color:var(--green-cta);color:var(--green-deep);background:transparent}
.btn-secondary:hover{background:var(--green-cta);color:#fff}
.btn-danger{background:var(--red-danger);color:#fff}
.btn-danger:hover{background:#760F0B}
.btn-outline{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--paper-warm)}
/* CTA posés sur un fond sombre/coloré : filet blanc (évite le style inline
   répété `border-color:rgba(255,255,255,.6);color:#fff` dans les gabarits). */
.btn-on-dark{border-color:rgba(255,255,255,.6);color:#fff;background:transparent}
.btn-on-dark:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn[aria-disabled="true"],.btn:disabled{
  opacity:.5;cursor:not-allowed;pointer-events:none;
}

/* ===== Accessibilité : focus visible au clavier, lien d'évitement ===== */
:focus-visible{outline:3px solid var(--orange-cta);outline-offset:2px;border-radius:var(--radius-xs)}
/* Sur fond sombre/coloré, l'orange du focus se perd : on passe au blanc. */
.hero :focus-visible,.page-hero :focus-visible,footer :focus-visible,
.royal :focus-visible,.cta-band :focus-visible,.pole-cta :focus-visible{
  outline-color:#fff;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink-deep);color:#fff;padding:14px 20px;border-radius:0;
  font-size:14px;font-weight:700;letter-spacing:.02em;
  border-bottom:3px solid var(--orange);
}
.skip-link:focus{left:0}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   MOTIF DÉCORATIF — les fleurs d'oranger du logo SIAM
   --------------------------------------------------------------------------
   Toutes les surfaces qui portent le semis déclarent l'image ICI, une seule
   fois ; chaque surface ne règle ensuite que son opacité. Le motif vient du
   token --fleurs (tokens.css) : un data-URI, donc aucune requête HTTP
   supplémentaire, aucun script et aucune animation.

   ACCESSIBILITÉ — le semis est posé en `background-image` d'un pseudo-élément
   `::before`/`::after` avec `pointer-events:none`. Un fond CSS n'entre pas
   dans l'arbre d'accessibilité : il n'est donc jamais annoncé par un lecteur
   d'écran, ce qui est bien le comportement voulu pour un décor.
   ========================================================================== */
.hero::after,
.page-hero::before,
.royal::before,
.pole-cta::before,
.cta-band::before,
footer::after,
.pole::before,
.pole-card-head::before,
.day-card-top::before,
.product-media--blank::before{
  background-image:var(--fleurs);
  background-size:var(--fleurs-size) var(--fleurs-size);
  background-repeat:repeat;
}
/* Composants compacts : avec la tuile de 440px, une tuile de pôle haute de
   168px ou un en-tête de carte n'afficheraient souvent aucune fleur. */
.pole::before,
.pole-card-head::before,
.day-card-top::before,
.product-media--blank::before{
  background-size:var(--fleurs-size-sm) var(--fleurs-size-sm);
}

/* ===== Header =====
   Un filet tricolore reprend, en haut de page, la séquence du logo
   (feuille claire / feuille foncée / fruit). C'est la signature de marque
   la plus économique possible : 3px de haut, zéro image, présente sur
   toutes les pages, y compris la page d'erreur. */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,250,247,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-strong);
}
header::before{
  content:"";display:block;height:3px;
  background:linear-gradient(90deg,
    var(--green-lime) 0 22%,
    var(--green-dark) 22% 58%,
    var(--orange)     58% 100%);
}
/* `padding` en LONGHAND vertical : la forme courte `padding:14px 0` écrasait
   la gouttière horizontale de `.wrap`, d'où le logo et le bouton burger
   collés aux bords de l'écran en mobile. */
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding-top:15px;padding-bottom:15px;
}

.logo-img{
  height:40px;
  width:auto;
  object-fit:contain;
  display:block;
}
@media(min-width:640px){.logo-img{height:44px}}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:20px;
}
.logo small{display:block;font-size:9px;font-weight:600;color:var(--ink-soft);letter-spacing:.03em}
/* Logo inversé (silhouette blanche) pour le footer sombre — sans pastille */
.foot-logo{height:38px;width:auto;display:block;margin-bottom:18px}
.nav{position:relative}
.nav-cta{display:none;white-space:nowrap;flex-shrink:0;padding-left:20px;padding-right:20px}
/* 44x44 : cible tactile minimale recommandée (WCAG 2.5.8 / AA). */
.burger{
  width:46px;height:46px;border-radius:var(--radius-xs);
  border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.burger:hover{background:var(--ink);color:#fff}

/* ===== Menu principal (avec sous-menus) ===== */
.mainmenu{display:none}
.menu{list-style:none;display:flex;align-items:center;gap:2px;margin:0;padding:0}
.menu>li{position:relative}
/* L'état actif/survol se marque par un FILET sous l'entrée, pas seulement
   par un changement de couleur : la cible est lisible même en niveaux de
   gris, et la navigation gagne une ligne de base nette. */
.menu>li>a,.menu .sub-toggle{
  position:relative;
  display:inline-flex;align-items:center;gap:6px;
  padding:12px 13px;font-size:13.5px;font-weight:600;color:var(--ink);
  background:none;border:none;cursor:pointer;font-family:inherit;border-radius:0;line-height:1.1;
  transition:color var(--dur-fast) var(--ease);
}
.menu>li>a::after,.menu .sub-toggle::after{
  content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;
  background:var(--orange);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur) var(--ease);
}
.menu>li>a:hover,.menu .sub-toggle:hover{color:var(--orange-cta)}
.menu>li>a:hover::after,.menu .sub-toggle:hover::after,
.menu>li.has-sub:focus-within .sub-toggle::after{transform:scaleX(1)}
.menu [aria-current="page"]{color:var(--orange-cta)}
.menu [aria-current="page"]::after{transform:scaleX(1)}
.caret{font-size:9px;transition:transform var(--dur-fast) var(--ease);opacity:.7}
.submenu{
  list-style:none;margin:0;padding:8px;position:absolute;top:100%;left:0;min-width:250px;
  background:#fff;border:1px solid var(--line-strong);border-top:3px solid var(--orange);
  border-radius:0;
  box-shadow:0 22px 44px -22px rgba(11,18,14,.45);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity var(--dur-fast),transform var(--dur-fast),visibility var(--dur-fast);z-index:60;
}
.menu>li.has-sub:hover .submenu,
.menu>li.has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu li+li{margin-top:2px}
.submenu a{
  display:block;padding:10px 12px;border-radius:0;font-size:13.5px;font-weight:600;
  color:var(--ink-soft);border-inline-start:2px solid transparent;
  transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);
}
.submenu a:hover{background:var(--paper);color:var(--ink);border-inline-start-color:var(--green-dark)}

@media(min-width:1000px){
  .mainmenu{display:block}
  .nav-cta{display:inline-flex}
  .burger{display:none}
}

/* Menu mobile (burger) — accordéon */
@media(max-width:999px){
  .mainmenu.is-open{
    display:block;position:absolute;left:0;right:0;top:100%;
    background:var(--paper);border-bottom:3px solid var(--orange);
    box-shadow:0 24px 40px -26px rgba(11,18,14,.5);
    padding:6px 20px 18px;max-height:78vh;overflow:auto;
  }
  .mainmenu.is-open .menu{flex-direction:column;align-items:stretch;gap:0}
  .mainmenu.is-open .menu>li{border-bottom:1px solid var(--line)}
  .mainmenu.is-open .menu>li>a,.mainmenu.is-open .sub-toggle{
    width:100%;padding:15px 2px;justify-content:space-between;font-size:15px;
  }
  /* Le filet de survol du bureau n'a pas de sens dans l'accordéon. */
  .mainmenu.is-open .menu>li>a::after,.mainmenu.is-open .sub-toggle::after{content:none}
  .mainmenu.is-open .submenu{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;
    padding:0 0 10px 14px;min-width:0;display:none;background:transparent;
  }
  .mainmenu.is-open .has-sub.open .submenu{display:block}
  .mainmenu.is-open .has-sub.open .caret{transform:rotate(180deg)}
}

/* ===== Sections génériques ===== */
section{padding:var(--sp-section) 0}

/* Tête de section : sur-titre, titre éditorial, chapô borné en `ch`.
   Le titre n'est volontairement PAS centré — l'alignement à gauche sur la
   gouttière du `.wrap` donne au site sa colonne de lecture unique, du logo
   au pied de page. */
.section-head{margin-bottom:clamp(28px,3.2vw,44px);max-width:74ch}
.section-head .eyebrow{margin-bottom:16px}
.section-head h2{font-size:var(--fs-h2);max-width:20ch}
.section-head p{margin-top:16px;color:var(--ink-soft);font-size:var(--fs-lead);max-width:62ch;line-height:1.6}

/* Alternance de fond : une section sur deux respire sur le parchemin.
   Appliqué par type de section (cf. plus bas) plutôt qu'au nth-child, pour
   que l'ordre choisi en back-office ne casse jamais le rythme. */
.band-warm{background:var(--paper-warm)}
.band-white{background:var(--surface)}

/* ===== Fil d'Ariane =====
   Pas de bandeau blanc : un simple filet, en capitales fines, qui ne
   concurrence pas le bandeau de page juste en dessous. */
.breadcrumb{background:transparent;border-bottom:1px solid var(--line)}
.breadcrumb ol{
  list-style:none;margin:0;padding:14px 0;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-family:var(--font-ui);font-size:11px;font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft);
}
.breadcrumb li{display:flex;align-items:center;gap:10px}
.breadcrumb li+li::before{content:"";width:12px;height:1px;background:var(--line-strong)}
.breadcrumb a{transition:color var(--dur-fast) var(--ease)}
.breadcrumb a:hover{color:var(--orange-cta)}
.breadcrumb [aria-current="page"]{color:var(--ink)}

/* ===== Hero de page (gabarit 2) =====
   Le dégradé rouge-orange de la charte 2026 reste autorisé ICI et dans le
   hero d'accueil seulement (cf. BRIEF.md). Il est assombri et tendu à la
   verticale : le halo blanc radial, typique du fond décoratif « joli mais
   vide », est remplacé par le semis de fleurs d'oranger du logo — une
   texture qui vient de la marque plutôt qu'un simple effet de lumière.

   IMPORTANT : la couleur de fond est posée en `background` sur l'élément,
   car /poles/{slug} la surcharge en style inline (couleur du pôle). Toute
   la texture passe donc par ::before / ::after, jamais par des couches
   d'image sur l'élément lui-même, sinon la surcharge inline les effacerait. */
.page-hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(152deg,var(--grad-start) 0%, #C0380F 48%, var(--grad-end) 100%);
  color:#fff;
  padding:clamp(44px,5.5vw,76px) 0 clamp(48px,6vw,84px);
  border-bottom:3px solid var(--green-lime);
}
/* Deux couches distinctes, dans cet ordre :
   ::before = semis de fleurs SEUL, très basse intensité ;
   ::after  = voile de lecture, peint PAR-DESSUS la texture.
   L'inverse (texture au-dessus du voile) rend le titre illisible. */
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  opacity:.10;
}
.page-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(9,14,10,.62) 0%,rgba(9,14,10,.40) 54%,rgba(9,14,10,.28) 100%),
    linear-gradient(to top,rgba(9,14,10,.30) 0%,rgba(9,14,10,0) 44%);
}
.page-hero h1,.page-hero .lead,.page-hero .hero-badge,
.page-hero .page-hero-meta,.page-hero .page-hero-actions{position:relative;z-index:1}
/* Pas de `max-width` ici : le bloc occupe toute la colonne du `.wrap` et
   s'aligne donc sur l'en-tête. La longueur de ligne est bornée sur le h1 et
   l'accroche (en `ch`), pas sur le conteneur. */
.page-hero-inner{position:relative;z-index:1;display:grid;gap:22px}
.page-hero h1{font-size:var(--fs-h1);max-width:17ch;text-wrap:balance}
.page-hero p.lead{
  font-size:var(--fs-lead);max-width:58ch;color:rgba(255,255,255,.94);line-height:1.6;
  font-weight:400;
}
/* Mentions du bandeau : séparées par un filet vertical, pas par une pastille.
   Le point rond répété était l'un des tics les plus « génériques » du site. */
.page-hero-meta{
  display:flex;flex-direction:column;gap:7px;padding-top:8px;
  font-family:var(--font-ui);font-size:12px;font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;line-height:1.4;
}
.page-hero-meta span{display:flex;align-items:center;padding:0}
@media(min-width:760px){
  .page-hero-meta{flex-direction:row;flex-wrap:wrap;gap:8px 0}
  .page-hero-meta span{padding:0 18px}
  .page-hero-meta span:first-child{padding-left:0}
  .page-hero-meta span+span{border-left:1px solid rgba(255,255,255,.34)}
}
/* .dot reste dans le HTML (vues partagées) : on le neutralise plutôt que de
   toucher aux gabarits, le filet le remplace. */
.page-hero-meta .dot{display:none}

/* ===== Grille de pôles — fiches de filière (gabarit 2) ===== */
.poles-intro{max-width:68ch;margin-bottom:clamp(30px,3.4vw,46px)}
.poles-intro .eyebrow{margin-bottom:16px}
.poles-intro h2{font-size:var(--fs-h2);max-width:20ch}
.poles-intro p{margin-top:16px;color:var(--ink-soft);font-size:var(--fs-lead);line-height:1.65;max-width:62ch}

.pole-cards{
  display:grid;gap:20px;grid-template-columns:1fr;
}
@media(min-width:640px){.pole-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.pole-cards{grid-template-columns:repeat(3,1fr)}}

/* Fiche de filière : un bandeau de couleur, un corps sur fond blanc, et une
   RÈGLE DE COULEUR en pied qui se remplit au survol. Pas de translation ni
   d'ombre portée : la fiche reste à sa place dans la grille, seule la
   couleur du pôle réagit. */
.pole-card{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:0;
  transition:border-color var(--dur) var(--ease);
}
.pole-card::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;
  background:var(--pole,var(--green-deep));
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur) var(--ease);
}
.pole-card:hover{border-color:var(--pole,var(--green-deep))}
.pole-card:hover::after,.pole-card:focus-within::after{transform:scaleX(1)}

/* Bandeau couleur du pôle */
.pole-card-head{
  position:relative;overflow:hidden;
  background:var(--pole, var(--green-deep));color:#fff;
  padding:22px;display:flex;align-items:center;gap:16px;min-height:104px;
}
.pole-card.on-light .pole-card-head{color:var(--ink)}
/* Bandeau de fiche sur fond clair : semis en encre (cf. .pole.on-light). */
.pole-card.on-light .pole-card-head::before{filter:invert(1);opacity:.10}

/* Semis de fleurs du bandeau — même texture que toutes les autres surfaces
   colorées du site (hero, bandes vertes, tuiles de pôle, journées). Il
   remplace le filigrane « épi éclaté » qui était répété sur les 13 fiches :
   d'après BRIEF.md ce picto ne doit paraître qu'une seule fois. */
.pole-card-head::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.11;
}
/* `.ghost` n'est plus émis par le gabarit ; la règle reste pour qu'un
   contenu existant qui en porterait encore un ne le fasse pas réapparaître. */
.pole-card-head .ghost{display:none}
.pole-card-icon{
  position:relative;z-index:1;
  flex-shrink:0;width:48px;height:48px;border-radius:0;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;
}
.pole-card.on-light .pole-card-icon{background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.16)}
.pole-card-icon svg{width:26px;height:26px}
.pole-card:not(.on-light) .pole-card-head::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,8,6,.46),rgba(10,8,6,.12));
}
.pole-card-head h3{position:relative;z-index:1;font-size:var(--fs-h3);line-height:1.18;text-wrap:balance}

/* Corps de carte */
.pole-card-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:18px;flex:1}
.pole-card-body p{font-size:14.5px;color:var(--ink-soft);line-height:1.65;flex:1}
/* Lien de fiche : libellé en capitales + flèche qui avance. Le soulignement
   permanent est remplacé par un filet qui se déploie, cohérent avec la
   navigation principale. */
.pole-link{
  position:relative;
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-ui);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--green-deep);align-self:flex-start;
  border-bottom:none;padding-bottom:6px;
}
.pole-link::before{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--pole,var(--green-dark));
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur) var(--ease);
}
.pole-link::after{
  content:"→";transition:transform var(--dur) var(--ease);font-size:14px;
}
.pole-card:hover .pole-link::before,.pole-link:hover::before{transform:scaleX(1)}
.pole-card:hover .pole-link::after,.pole-link:hover::after{transform:translateX(4px)}

/* ===== Bande CTA de bas de page pôle ===== */
.pole-cta{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--green-deep);color:#fff;
  padding-top:var(--sp-section-md);padding-bottom:var(--sp-section-md);
  border-top:3px solid var(--orange);
}
.pole-cta::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.08;
}
.pole-cta .wrap{display:grid;gap:26px}
.pole-cta h2{font-size:var(--fs-h2);max-width:20ch;text-wrap:balance}
.pole-cta p{color:rgba(255,255,255,.86);font-size:var(--fs-lead);margin-top:14px;max-width:54ch;line-height:1.65}
.pole-cta-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media(min-width:900px){
  .pole-cta .wrap{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:48px}
}

/* ===== Footer =====
   Le pied de page porte la navigation complète du site : il est traité comme
   un ourlet institutionnel — encre très sombre, semis de fleurs, filet
   tricolore en tête (écho du haut de page), intitulés de colonne en
   capitales filetées. */
footer{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--ink-deep);color:#fff;
  padding:clamp(48px,5.5vw,76px) 0 26px;
}
footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:1;
  background:linear-gradient(90deg,
    var(--green-lime) 0 22%,
    var(--green-dark) 22% 58%,
    var(--orange)     58% 100%);
}
footer::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.08;
}
.foot-grid{display:grid;gap:36px}
@media(min-width:768px){.foot-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
footer h4{
  font-family:var(--font-ui);font-size:var(--fs-label);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--track-label);
  color:#fff;margin-bottom:18px;padding-bottom:12px;
  border-bottom:1px solid var(--line-dark);
}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:11px;font-size:14px}
footer ul a{color:rgba(255,255,255,.76);transition:color var(--dur-fast) var(--ease)}
footer ul a:hover{color:var(--orange-warm)}
footer p{color:rgba(255,255,255,.62);font-size:14px;line-height:1.7}
.foot-bottom{
  border-top:1px solid var(--line-dark);margin-top:clamp(36px,4vw,56px);padding-top:22px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-family:var(--font-ui);font-size:11px;font-weight:600;
  letter-spacing:var(--track-label);text-transform:uppercase;color:rgba(255,255,255,.48);
}

/* ==========================================================================
   Accueil — hero éditorial plein cadre.
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;padding:0;   /* full-bleed : la photo couvre tout */
  background:linear-gradient(152deg,var(--grad-start) 0%, #B8340E 50%, var(--grad-end) 100%);
  color:#fff;
  border-bottom:3px solid var(--green-lime);
}
/* Le halo blanc radial est remplacé par le semis de fleurs d'oranger : même
   rôle (habiller l'aplat quand la photo ne charge pas), identité en plus. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.14;
}
/* Slider : toutes les slides occupent la MÊME cellule de grille. La hauteur
   du conteneur est donc celle de la slide la plus haute et reste constante ;
   les slides se superposent exactement au même endroit (elles ne s'empilent
   pas), ce qui empêche le contenu qui suit le hero (stats, sections…) de
   sauter lorsqu'on change de slide. */
.hero-slider{position:relative;z-index:1;overflow:hidden;display:grid}
.slide{
  grid-area:1/1;                        /* superposition dans une seule cellule */
  display:flex;align-items:center;      /* contenu centré verticalement */
  min-height:clamp(460px,72vh,660px);   /* hauteur mini confortable du hero */
  opacity:0;visibility:hidden;
  transition:opacity .5s ease;
  position:relative;
  /* La photo couvre toute la slide, bord à bord — aucune bande de fond visible */
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.slide.is-active{opacity:1;visibility:visible;z-index:1}
/* Voile de lisibilité. Trois couches cumulées — colonne de texte à gauche,
   assise en bas, teinte de marque très légère — pour que le titre tienne sur
   N'IMPORTE QUELLE photo, y compris un ciel surexposé. C'est ce voile qui
   permet de supprimer les `text-shadow` posés sur chaque élément du hero :
   une ombre floue sur du texte blanc est le symptôme d'un fond mal préparé,
   pas une solution de lisibilité. */
.slide::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(94deg, rgba(8,13,10,.80) 0%, rgba(8,13,10,.60) 34%, rgba(8,13,10,.34) 68%, rgba(8,13,10,.24) 100%),
    linear-gradient(to top, rgba(8,13,10,.60) 0%, rgba(8,13,10,0) 46%),
    linear-gradient(120deg, rgba(140,16,19,.22), rgba(4,96,40,.20));
}
.slide--video::before{
  background:
    linear-gradient(94deg, rgba(8,13,10,.76) 0%, rgba(8,13,10,.50) 40%, rgba(8,13,10,.22) 100%),
    linear-gradient(to top, rgba(8,13,10,.56) 0%, rgba(8,13,10,0) 50%);
}
.hero-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:0;border:1px solid rgba(255,255,255,.45);
  background:rgba(8,13,10,.30);backdrop-filter:blur(3px);
  color:#fff;font-size:22px;line-height:1;
  cursor:pointer;display:none;align-items:center;justify-content:center;
  transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.hero-nav:hover{background:rgba(8,13,10,.62);border-color:#fff}
.hero-nav.prev{left:0}
.hero-nav.next{right:0}

/* Index de diapositive NUMÉROTÉ (01 · 02 · 03…) plutôt que des pastilles
   anonymes : le visiteur sait combien il en reste. Les boutons sont créés
   vides par hero.js — le numéro vient d'un compteur CSS, donc aucun
   JavaScript à modifier, et `aria-label` continue de porter le nom
   accessible (« Diapositive 2 »). */
.hero-dots{
  position:absolute;left:0;right:0;bottom:26px;z-index:3;
  display:flex;gap:4px;justify-content:center;align-items:flex-end;
  counter-reset:siamslide;
}
.hero-dots button{
  width:auto;height:auto;border:none;border-top:2px solid rgba(255,255,255,.38);
  background:transparent;color:rgba(255,255,255,.62);
  font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:.1em;
  cursor:pointer;padding:9px 12px 0;border-radius:0;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.hero-dots button::before{counter-increment:siamslide;content:counter(siamslide,decimal-leading-zero)}
.hero-dots button:hover{color:#fff;border-top-color:rgba(255,255,255,.75)}
.hero-dots button.is-active{color:#fff;border-top-color:var(--orange);border-top-width:3px}
@media(min-width:900px){
  .hero-nav{display:flex}
  .hero-dots{justify-content:flex-start;left:auto;right:auto;bottom:30px}
  /* Aligné sur la gouttière du .wrap, comme le titre. */
  .hero-dots{left:max(var(--gutter), calc(50% - var(--maxw)/2 + var(--gutter)));right:auto}
  .hero-dots button:first-child{padding-left:0}
}
/* Longhand vertical : voir .nav — `padding:56px 0 82px` écrasait la gouttière
   et collait le texte des slides au bord de l'écran en mobile. */
.hero-inner{
  position:relative;z-index:1;width:100%;display:grid;gap:22px;
  padding-top:clamp(56px,7vw,92px);padding-bottom:clamp(86px,9vw,116px);
}
/* Titre de hero : la plus grande taille du site, en serif éditoriale.
   `text-wrap:balance` égalise les lignes — un titre de une à trois lignes
   ne se casse plus sur un mot orphelin. */
.hero h1{
  font-size:var(--fs-display);line-height:1.04;max-width:17ch;
  letter-spacing:-0.025em;text-wrap:balance;
  text-shadow:0 1px 20px rgba(8,13,10,.35);
}
.hero p.lead{
  font-size:var(--fs-lead);max-width:52ch;color:rgba(255,255,255,.93);
  line-height:1.62;font-weight:400;
}
/* Mentions de date/lieu : mêmes filets verticaux que le bandeau de page. */
.hero-dates{
  display:flex;flex-direction:column;gap:7px;padding-top:6px;
  font-family:var(--font-ui);font-size:12px;font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;line-height:1.4;
}
.hero-dates span{display:flex;align-items:center;padding:0}
@media(min-width:760px){
  .hero-dates{flex-direction:row;flex-wrap:wrap;gap:8px 0}
  .hero-dates span{padding:0 18px}
  .hero-dates span:first-child{padding-left:0}
  .hero-dates span+span{border-left:1px solid rgba(255,255,255,.34)}
}
.hero .dot{display:none}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;padding-top:12px}

/* Étiquette d'ouverture (hero + bandeau de page). Rectangle à filet gauche
   plutôt que pastille translucide : la forme dit « intitulé officiel »
   au lieu de « badge décoratif ». */
.hero-badge{
  display:inline-flex;align-items:center;justify-self:start;align-self:start;
  background:rgba(8,13,10,.26);border:1px solid rgba(255,255,255,.3);
  border-inline-start:3px solid var(--green-lime);
  padding:9px 16px;border-radius:0;
  font-family:var(--font-ui);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;
}

/* Slide vidéo bilan */
.hero-inner-video{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
@media(min-width:768px){.hero-inner-video{flex-direction:row;align-items:center;justify-content:space-between}}
.hero-video-text{display:grid;gap:16px}
.video-thumb{
  position:relative;flex-shrink:0;width:100%;max-width:440px;aspect-ratio:16/9;
  border-radius:0;border:none;cursor:pointer;padding:0;overflow:hidden;
  background-size:cover;background-position:center;background-color:var(--green-dark);
  box-shadow:0 26px 56px -26px rgba(8,13,10,.8);
}
.video-thumb::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.30);transition:background .2s}
.video-thumb:hover::after{background:rgba(0,0,0,.14)}
/* Bouton de lecture : disque plein (c'est l'un des rares objets du site qui
   doit RESTER rond — un bouton play carré ne se lit pas), avec une mise à
   l'échelle au survol pour signaler l'action. */
.play-circle{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;
  width:68px;height:68px;border-radius:50%;background:#fff;
  color:var(--orange-cta);display:flex;align-items:center;justify-content:center;
  font-size:22px;padding-left:4px;box-shadow:0 8px 24px rgba(8,13,10,.4);
  transition:transform var(--dur) var(--ease),color var(--dur) var(--ease);
}
.video-thumb:hover .play-circle{transform:translate(-50%,-50%) scale(1.09)}

/* Modale vidéo (YouTube) */
.video-modal{
  position:fixed;inset:0;z-index:100;background:rgba(10,8,6,.9);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.video-modal.is-open{display:flex}
/* Le lecteur est dimensionné par son CONTENEUR, pas par l'iframe.
   Une iframe en `width:100%` dans un élément flex en « shrink-to-fit » se
   résout circulairement : le navigateur retombe alors sur sa taille
   intrinsèque (300x150), et le lecteur restait minuscule quelle que soit la
   taille de l'écran — le `max-width` n'était jamais atteint.
   Les trois bornes : 1280px (720p natif), 92vw, et 150vh ≈ la hauteur d'un
   16:9 occupant 84vh, qui laisse la place au bouton de fermeture. La plus
   petite gagne, donc le lecteur est toujours entier à l'écran, aussi bien
   sur un grand moniteur que sur un téléphone en paysage. */
.video-modal-content{
  width:min(1280px, 92vw, 150vh);
  aspect-ratio:16/9;
  display:flex;
  background:#000;
}
.video-modal iframe{width:100%;height:100%;display:block;border:0;border-radius:0}
.video-modal-close{
  position:absolute;top:20px;right:20px;width:46px;height:46px;border-radius:0;
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.45);
  font-size:18px;cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease);
}
.video-modal-close:hover{background:rgba(255,255,255,.26)}

/* Stats — bandeau de chiffres à cheval sur le hero.
   Le chevauchement est conservé (c'est une vraie idée de composition), mais
   la carte blanche arrondie à grosse ombre devient un PANNEAU : angles vifs,
   filet net, règle orange en tête, colonnes séparées par des filets.
   Les chiffres passent en serif éditoriale — ce sont les seuls chiffres du
   site qui méritent ce traitement. */
.stats{
  margin-top:-44px;
  position:relative;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-top:3px solid var(--orange);
  border-radius:0;
  box-shadow:none;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
  margin-bottom:-44px;
  z-index:10;
}
.stats>*{
  padding:clamp(20px,2.4vw,30px) clamp(16px,2vw,26px);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.stats>:nth-child(-n+2){border-top:none}
.stats>:nth-child(odd){border-left:none}
.stat-num{
  font-family:var(--font-display);font-optical-sizing:auto;
  font-size:clamp(30px,3.6vw,44px);font-weight:700;letter-spacing:-0.03em;line-height:1;
  color:var(--green-deep);
}
.stat-label{
  font-family:var(--font-ui);font-size:var(--fs-label);color:var(--ink-soft);
  font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;margin-top:10px;
}
@media(min-width:640px){
  .stats{grid-template-columns:repeat(4,1fr)}
  .stats>*{border-top:none}
  .stats>:nth-child(odd){border-left:1px solid var(--line)}
  .stats>:first-child{border-left:none}
}

/* ===== Bande institutionnelle (Sollicitude royale) =====
   Le vert profond du logo en aplat plein, semis de fleurs, et un filet
   d'or/orange en tête. C'est la bande la plus solennelle du site : elle
   porte le Haut Patronage, elle ne ressemble à aucune autre section. */
.royal{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--green-deep);color:#fff;
  padding-top:var(--sp-section-md);padding-bottom:var(--sp-section-md);
  border-top:3px solid var(--orange);
}
.royal::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.08;
}
.royal-grid{display:grid;gap:clamp(24px,3vw,56px)}
.royal h2{font-size:var(--fs-h2);max-width:17ch;text-wrap:balance}
.royal p{color:rgba(255,255,255,.88);font-size:var(--fs-lead);line-height:1.68;margin-top:0}
@media(min-width:900px){
  .royal-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  /* Un filet vertical sépare l'intitulé du texte : même geste que le
     bandeau de page, cohérence de la grammaire graphique. */
  .royal-grid>:last-child{border-inline-start:1px solid rgba(255,255,255,.22);padding-inline-start:clamp(24px,3vw,48px)}
}

/* ===== Cartes d'action (badges, accès) =====
   Grille sans gouttière : les cartes se partagent un filet commun, comme les
   colonnes d'un tableau d'affichage. L'icône colorée sort de son carré
   arrondi pour devenir une pastille carrée posée sur un filet de tête — la
   couleur annonce la carte au lieu de la décorer. */
.action-grid{
  display:grid;gap:0;grid-template-columns:1fr;
  border:1px solid var(--line-strong);background:var(--surface);
}
@media(min-width:640px){
  .action-grid{grid-template-columns:repeat(2,1fr)}
  .action-grid--n1{grid-template-columns:1fr}
}
/* Le nombre de colonnes suit le nombre de cartes : une section à 2 cartes
   (Espace exposant) occupe deux demi-colonnes pleines au lieu de laisser
   deux colonnes vides à droite. Au-delà de 4 cartes, la grille à 4 colonnes
   reprend et les cartes passent à la ligne. */
@media(min-width:1000px){
  .action-grid{grid-template-columns:repeat(4,1fr)}
  .action-grid--n1{grid-template-columns:1fr}
  .action-grid--n2{grid-template-columns:repeat(2,1fr)}
  .action-grid--n3{grid-template-columns:repeat(3,1fr)}
}
.action-card{
  position:relative;
  background:transparent;border:0;border-radius:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line);
  padding:clamp(22px,2.2vw,28px);
  display:flex;flex-direction:column;gap:12px;height:100%;
  transition:background-color var(--dur) var(--ease);
}
.action-card:first-child{border-top:none;border-left:none}
.action-card:hover{background:var(--paper)}
@media(min-width:640px){
  .action-card:nth-child(-n+2){border-top:none}
  .action-card:nth-child(odd){border-left:none}
}
@media(min-width:1000px){
  .action-card{border-top:none}
  .action-card:nth-child(odd){border-left:1px solid var(--line)}
  .action-card:first-child{border-left:none}
}
.action-icon{
  width:42px;height:42px;border-radius:var(--radius-xs);
  display:flex;align-items:center;justify-content:center;margin-bottom:4px;
}
.action-icon svg{width:21px;height:21px}
.action-card h3{font-size:var(--fs-h3)}
.action-card p{font-size:14px;color:var(--ink-soft);flex:1;line-height:1.6;max-width:52ch}
.action-card .btn{align-self:flex-start;padding:11px 18px;font-size:12.5px;min-height:42px}

/* ===== Tuiles de pôle (Accueil) =====
   Mosaïque d'aplats accolés, sans gouttière ni arrondi : la grille des 13
   pôles se lit comme un plan du salon, pas comme 13 vignettes flottantes.
   Chaque tuile garde la couleur exacte de la charte 2026 ; la lisibilité
   vient d'un voile bas, pas d'une teinte modifiée. */
.poles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--paper)}
@media(min-width:640px){.poles-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:960px){.poles-grid{grid-template-columns:repeat(6,1fr)}}
.pole{
  position:relative;overflow:hidden;isolation:isolate;border-radius:0;
  padding:16px;
  color:#fff;min-height:168px;display:flex;flex-direction:column;
  transition:filter var(--dur) var(--ease);
}
.pole.big{grid-column:span 2}
/* Semis propre à la tuile : la couleur de pôle n'est plus un simple carré
   de couleur, elle porte les fleurs du logo. */
.pole::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.10;
}
/* Pôles sur fond clair (lime, jaune, rose) : des fleurs blanches y seraient
   invisibles. Le pseudo-élément ne portant QUE l'image, l'inverser la passe
   en encre sans rien affecter d'autre. */
.pole.on-light::before{filter:invert(1);opacity:.09}
.pole:hover{filter:brightness(1.07)}
.pole.on-light:hover{filter:brightness(.96)}
.pole-top{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between}
.pole-icon{width:28px;height:28px;color:#fff;opacity:.95}
/* Voile de lisibilité (texte blanc uniquement). Il couvre TOUTE la tuile :
   le libellé est en bas, mais l'icône et la flèche sont en haut et doivent
   elles aussi se détacher des couleurs claires de la charte. */
.pole:not(.on-light)::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(8,13,10,.66) 0%,
    rgba(8,13,10,.30) 46%,
    rgba(8,13,10,.26) 70%,
    rgba(8,13,10,.42) 100%);
}
.pole-label{
  position:relative;z-index:1;
  font-family:var(--font-display);font-optical-sizing:auto;
  font-weight:700;font-size:15.5px;line-height:1.18;letter-spacing:-0.012em;
  margin-top:auto;padding-top:24px;text-wrap:balance;
}
/* La flèche perd sa pastille : un simple glyphe qui glisse au survol. */
.pole-arrow{
  width:auto;height:auto;border-radius:0;background:none;
  display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;
  opacity:.75;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.pole:hover .pole-arrow{transform:translate(3px,-3px);opacity:1}
.pole.on-light .pole-icon,.pole.on-light .pole-label{color:var(--ink)}
.pole.on-light .pole-arrow{background:none;color:var(--ink)}

/* ===== Partenaires =====
   Un mur de logos accolés (filets partagés, pas de gouttière) : les
   institutions se présentent en rangs serrés, comme sur un kakémono
   officiel, plutôt qu'en vignettes isolées.

   Le NOMBRE DE COLONNES est fourni par le gabarit (partials/partner-logos.php)
   dans --cols-m / --cols-t / --cols-d, calculé catégorie par catégorie pour
   remplir la dernière ligne : plus de « 3 + 1 » pour quatre sponsors sur
   mobile. --slot-max plafonne la largeur d'une cellule, si bien qu'une
   catégorie de quatre logos a exactement les mêmes cellules qu'une catégorie
   de six — la grille se raccourcit, elle ne se dilate pas.
   Les filets internes sont tracés par les cellules elles-mêmes (ombre portée
   d'1px à gauche et en haut, rognée au bord par overflow:hidden) : ils
   suivent n'importe quel nombre de colonnes, sans dépendre d'un nth-child, et
   ne dessinent rien là où une cellule manque. */
.partners-row{display:flex;flex-direction:column;gap:clamp(20px,2.2vw,30px)}
/* Le palier porte les réglages de sa catégorie : nombre de colonnes (posé en
   style inline par le gabarit), largeur max d'une cellule et proportion des
   cellules. Le filet du titre s'arrête donc exactement où s'arrête le mur de
   logos, quel que soit le nombre de logos. */
.partner-tier{
  --cols:var(--cols-m,2);
  --slot-max:200px;
  /* Mobile : deux colonnes larges, donc des cellules plus basses (2/1) — la
     page ne s'allonge pas et les logos en bandeau gagnent en largeur.
     Au-delà, on garde le 16/9 historique. --ar2 vaut deux cellules accolées,
     pour le dernier logo qui comble une ligne. */
  --ar:2/1;--ar2:4/1;
  max-width:calc(var(--cols) * var(--slot-max));
}
.partner-tier h3{
  font-family:var(--font-ui);font-size:var(--fs-label);text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--ink-soft);font-weight:700;
  margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--line);
}
.partner-logos{
  display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:0;
  border:1px solid var(--line);background:var(--surface);overflow:hidden;
}
.partner-slot{
  aspect-ratio:var(--ar);border:0;border-radius:0;background:transparent;
  box-shadow:-1px 0 0 var(--line),0 -1px 0 var(--line);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,3.4vw,16px);
  font-size:11px;color:var(--ink-soft);font-weight:600;text-align:center;
  transition:background-color var(--dur) var(--ease);
}
/* Les logos gardent leurs proportions et leurs marges d'origine : une seule
   boîte de sécurité (le creux de la cellule), jamais de zoom par logo. */
.partner-slot img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.partner-slot:hover{background:var(--paper)}
/* Dernière ligne incomplète d'une seule cellule : le dernier logo l'occupe.
   --ar2 vaut deux cellules accolées, la rangée garde donc sa hauteur ; le
   logo, lui, reste à la taille qu'il aurait dans une cellule simple. */
.partner-logos--span-m>.partner-slot:last-child,
.partner-logos--span-t>.partner-slot:last-child,
.partner-logos--span-d>.partner-slot:last-child{grid-column:span 2;aspect-ratio:var(--ar2)}
.partner-logos--span-m>.partner-slot:last-child img,
.partner-logos--span-t>.partner-slot:last-child img,
.partner-logos--span-d>.partner-slot:last-child img{max-width:50%}
/* Chaque palier n'active QUE son propre débord : une catégorie peut combler
   sa dernière ligne sur mobile sans le faire sur desktop, et inversement. */
@media(max-width:639.98px){
  .partner-logos--span-t:not(.partner-logos--span-m)>.partner-slot:last-child,
  .partner-logos--span-d:not(.partner-logos--span-m)>.partner-slot:last-child{
    grid-column:auto;aspect-ratio:var(--ar);
  }
  .partner-logos--span-t:not(.partner-logos--span-m)>.partner-slot:last-child img,
  .partner-logos--span-d:not(.partner-logos--span-m)>.partner-slot:last-child img{max-width:100%}
}
@media(min-width:640px) and (max-width:959.98px){
  .partner-tier{--cols:var(--cols-t,4);--slot-max:190px;--ar:16/9;--ar2:32/9}
  .partner-logos--span-m:not(.partner-logos--span-t)>.partner-slot:last-child,
  .partner-logos--span-d:not(.partner-logos--span-t)>.partner-slot:last-child{
    grid-column:auto;aspect-ratio:var(--ar);
  }
  .partner-logos--span-m:not(.partner-logos--span-t)>.partner-slot:last-child img,
  .partner-logos--span-d:not(.partner-logos--span-t)>.partner-slot:last-child img{max-width:100%}
}
@media(min-width:960px){
  .partner-tier{--cols:var(--cols-d,6);--slot-max:190px;--ar:16/9;--ar2:32/9}
  .partner-logos--span-m:not(.partner-logos--span-d)>.partner-slot:last-child,
  .partner-logos--span-t:not(.partner-logos--span-d)>.partner-slot:last-child{
    grid-column:auto;aspect-ratio:var(--ar);
  }
  .partner-logos--span-m:not(.partner-logos--span-d)>.partner-slot:last-child img,
  .partner-logos--span-t:not(.partner-logos--span-d)>.partner-slot:last-child img{max-width:100%}
}
/* Appel à l'action de l'accueil (« Tous nos partenaires ») : un lien
   tertiaire sous le mur de logos, calibré à l'échelle des libellés de
   catégorie plutôt qu'à celle d'un CTA de page — hauteur tactile conservée. */
.partners-cta{margin-top:clamp(18px,2.2vw,26px)}
.partners-cta .btn{padding:12px 22px;min-height:44px;font-size:13px}

/* ===== Carte d'identité — relevé de faits =====
   Traité comme une FICHE SIGNALÉTIQUE : intitulé en capitales filetées,
   valeur en serif éditoriale. Ce ne sont pas des « cartes » décoratives,
   ce sont des lignes d'un registre officiel. */
.id-intro{max-width:68ch;margin-bottom:clamp(28px,3vw,40px)}
.id-intro .eyebrow{margin-bottom:16px}
.id-intro p{font-size:var(--fs-lead);line-height:1.7;color:var(--ink-soft);max-width:62ch}

.id-grid{
  display:grid;grid-template-columns:1fr;gap:0;margin-bottom:24px;
  border:1px solid var(--line-strong);background:var(--surface);
}
@media(min-width:600px){.id-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.id-grid{grid-template-columns:repeat(3,1fr)}}

.id-card{
  display:flex;gap:18px;align-items:flex-start;
  background:transparent;border:0;border-radius:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line);
  padding:clamp(20px,2.2vw,26px);position:relative;overflow:hidden;
  transition:background-color var(--dur) var(--ease);
}
.id-card:hover{background:var(--paper)}
/* Le filet de couleur s'installe à gauche de la ligne survolée. */
.id-card::before{
  content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
  background:var(--green-dark);
  transform:scaleY(0);transform-origin:top center;
  transition:transform var(--dur) var(--ease);
}
.id-card:hover::before{transform:scaleY(1)}
.id-grid>:first-child,.id-details>:first-child{border-top:none}
.id-grid>.id-card:first-child{border-left:none}
@media(min-width:600px){
  .id-grid>:nth-child(-n+2){border-top:none}
  .id-grid>:nth-child(odd){border-left:none}
}
@media(min-width:960px){
  .id-grid>:nth-child(-n+3){border-top:none}
  .id-grid>:nth-child(odd){border-left:1px solid var(--line)}
  .id-grid>:nth-child(3n+1){border-left:none}
}

/* L'icône quitte la pastille ronde teintée : un carré au filet vert, plus
   proche d'un tampon administratif que d'un pictogramme d'application. */
.id-card-icon{
  flex-shrink:0;width:50px;height:50px;border-radius:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--green-deep);background:rgba(14,159,59,.08);
  border:1px solid var(--green-dark);
}
.id-card-icon svg{width:25px;height:25px}

.id-card-body{min-width:0}
.id-card-body h3{
  font-family:var(--font-ui);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:8px;
}
.id-card-body p{
  font-family:var(--font-display);font-optical-sizing:auto;
  font-size:19px;line-height:1.3;color:var(--ink);font-weight:600;letter-spacing:-0.01em;
}
.id-card-body p.id-note{
  font-family:var(--font-ui);font-weight:400;color:var(--ink-soft);
  font-size:14.5px;line-height:1.6;margin-bottom:16px;letter-spacing:0;
}

/* Cartes détaillées (listes) */
.id-details{
  display:grid;grid-template-columns:1fr;gap:0;margin-top:24px;
  border:1px solid var(--line-strong);background:var(--surface);
}
@media(min-width:760px){
  .id-details{grid-template-columns:repeat(2,1fr)}
  .id-details>:nth-child(-n+2){border-top:none}
  .id-details>:nth-child(odd){border-left:none}
}
.id-card--wide{align-items:flex-start}
.id-card--full{grid-column:1/-1}

.id-list{list-style:none;display:grid;gap:8px}
.id-list li{
  position:relative;padding-inline-start:20px;font-size:14.5px;line-height:1.5;color:var(--ink-soft);font-weight:500;
}
.id-list li::before{
  content:"";position:absolute;inset-inline-start:0;top:11px;width:10px;height:2px;border-radius:0;
  background:var(--green-lime);
}
.id-list--grid{grid-template-columns:1fr}
@media(min-width:520px){.id-list--grid{grid-template-columns:repeat(2,1fr)}}

.id-zones{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:680px){.id-zones{grid-template-columns:repeat(2,1fr)}}
.id-zone-tag{
  display:inline-block;font-family:var(--font-ui);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:#fff;background:var(--green-deep);padding:6px 13px;border-radius:0;margin-bottom:14px;
}
/* Une carte détaillée peut porter des SOUS-TITRES (« ZONE AB », « ZONE CD ») :
   note d'introduction, puis un bloc titré par groupe. La carte prend alors
   toute la largeur de la grille, d'où le filet de gauche neutralisé. */
.id-card--full{border-left:none}
.id-card-body .id-zone-tag{margin:0 0 12px}
.id-card-body .id-list+.id-zones{margin-top:16px}

/* ===== Rendu générique des pages CMS (mise en forme éditoriale) =====
   C'est le gabarit le plus utilisé du site : il doit se lire comme une page
   imprimée. Colonne bornée en `ch`, interligne large, titres en serif, et
   un filet de section plutôt qu'un simple changement de corps. */
.cms-content{color:var(--ink-soft);font-size:16.5px;line-height:1.75}
.cms-content h2{
  font-size:clamp(21px,2.6vw,29px);line-height:1.2;color:var(--ink);
  margin:clamp(34px,3.6vw,52px) 0 14px;padding-top:18px;
  border-top:2px solid var(--ink);border-bottom:none;padding-bottom:0;
}
.cms-content h2:first-child{margin-top:0;padding-top:0;border-top:none}
.cms-content h3{font-size:19px;color:var(--ink);margin:28px 0 10px}
.cms-content p{margin:0 0 18px}
.cms-content>p:first-of-type{font-size:var(--fs-lead);color:var(--ink);line-height:1.68}
.cms-content a{
  color:var(--green-deep);font-weight:600;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;
  text-decoration-color:var(--green-lime);
  transition:text-decoration-color var(--dur-fast) var(--ease);
}
.cms-content a:hover{text-decoration-color:var(--green-deep)}
.cms-content ul,.cms-content ol{margin:0 0 20px;padding-left:22px;display:grid;gap:9px}
.cms-content li::marker{color:var(--green-dark)}
.cms-content img{border-radius:0}
.cms-content blockquote{
  margin:28px 0;padding:4px 0;padding-inline-start:24px;border-inline-start:3px solid var(--orange);
  font-family:var(--font-display);font-size:20px;line-height:1.45;color:var(--ink);
}
.cms-content strong{color:var(--ink)}
.cms-content table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px}
.cms-content th,.cms-content td{border:1px solid var(--line);padding:11px 13px;text-align:left}
.cms-content th{background:var(--paper-warm);font-family:var(--font-ui);font-size:var(--fs-label);
  font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink)}

/* ===== Page-builder : rendu générique des sections (App\Support\SectionRenderer) =====
   Additif uniquement — ne redéfinit aucune règle existante. `.wrap` (boxed) et
   l'absence de `.wrap` (full) sont réutilisés tels quels ; ce bloc ne fait
   qu'ajuster des cas où une section générique doit reproduire un habillage
   qui, avant le page-builder, dépendait d'un `<div class="wrap">` imbriqué
   plus étroit ou d'une marge propre à la page d'accueil. */
/* .pb-prose : alias de .prose, défini plus haut avec `.wrap`. */
.pb-sec--flush{padding-bottom:0}
.pb-sec--flush + .pb-sec{padding-top:0}
.pb-sec .stats{margin:0} /* neutralise le chevauchement -37px/-40px hors accueil */
.video-modal + .pb-sec--stats .stats{margin-top:-44px;margin-bottom:-44px} /* accueil : rétabli quand stats suit directement le hero */
/* Rythme des pages construites en back-office : une alternance de fonds
   donne la respiration sans ajouter un seul élément décoratif. Elle est
   définie PAR TYPE de section (et non au nth-child) pour qu'un bloc
   déplacé en admin ne casse jamais l'alternance.
   `--sp-section-md` ouvre les sections qui portent une grille, les blocs de
   texte gardent le rythme standard. */
.pb-sec--poles_intro,
.pb-sec--listing,
.pb-sec--feature_cards,
.pb-sec--id_items,
.pb-sec--opening_days{
  background:var(--surface);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-top:var(--sp-section-md);padding-bottom:var(--sp-section-md);
}
.pb-sec--badge_cards,
.pb-sec--partners,
.pb-sec--videos,
.pb-sec--downloads,
.pb-sec--gallery,
.pb-sec--contacts{
  background:var(--paper-warm);
  padding-top:var(--sp-section-md);padding-bottom:var(--sp-section-md);
}
/* Deux bandes de même couleur à la suite : on supprime le filet qui
   découperait inutilement un seul et même aplat. */
.pb-sec--poles_intro + .pb-sec--listing,
.pb-sec--listing + .pb-sec--poles_intro{border-top:none}
/* Le formulaire et le texte long respirent sur le fond de page. */
.pb-sec--form,.pb-sec--rich_text,.pb-sec--text_image{
  padding-top:var(--sp-section-md);padding-bottom:var(--sp-section-md);
}
.pb-figure{margin:0}
.pb-figure img{width:100%;display:block;border-radius:0;background:var(--paper-deep)}
.pb-figure figcaption{
  margin-top:12px;font-size:13.5px;color:var(--ink-soft);
  padding-inline-start:14px;border-inline-start:2px solid var(--line-strong);
}
.pb-sec--boxed .pb-figure img{border-radius:0;border-bottom:4px solid var(--green-lime)}

/* ==========================================================================
   Gabarits « contenu simple », « catalogue » et « formulaire » (16 pages).
   Même boîte à outils que l'accueil et la page pôles : tokens de la charte,
   CSS natif, mobile-first. Chaque famille de carte a sa propre forme — une
   carte de pôle, une carte de contact et une carte de téléchargement ne se
   ressemblent volontairement pas.
   ========================================================================== */

/* ----- Bandeau de page : rangée d'actions ----- */
.page-hero-actions{display:flex;flex-wrap:wrap;gap:12px;padding-top:6px}

/* ----- Pied de page : 1 colonne marque + 4 colonnes de liens ----- */
@media(min-width:768px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
@media(min-width:1060px){.foot-grid{grid-template-columns:1.8fr 1fr 1fr 1fr 1fr}}
.foot-brand p{margin-bottom:16px}
.foot-socials{display:flex;gap:10px;list-style:none;padding:0;margin:0}
.foot-socials a{
  width:46px;height:46px;border-radius:0;
  border:1px solid var(--line-dark);color:rgba(255,255,255,.8);
  display:flex;align-items:center;justify-content:center;
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.foot-socials svg{width:18px;height:18px}
.foot-socials a:hover{background:var(--orange);border-color:var(--orange);color:#fff}
footer ul a{text-decoration:none}
footer ul a:hover{color:var(--orange-warm);text-decoration:underline;text-underline-offset:3px}

/* ----- Blocs éditoriaux (texte long, documents officiels) ----- */
/* Chapô éditorial : plus grand que le texte courant, mais en Montserrat —
   la serif reste réservée aux titres, sinon la page perd sa hiérarchie. */
.lead-text{font-size:clamp(17px,1.7vw,20px);line-height:1.62;color:var(--ink);font-weight:400;max-width:62ch}

/* ----- Cartes « leviers » (Pourquoi exposer) : barre de couleur + icône -----
   Volontairement NON numérotées : ce sont 4 bénéfices parallèles, pas les
   étapes d'un process. La 1re carte occupe toute la largeur pour casser la
   grille régulière. */
.benefit-grid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:720px){
  .benefit-grid{grid-template-columns:repeat(2,1fr)}
  .benefit-card:first-child{grid-column:1/-1;flex-direction:row;align-items:center;gap:26px}
  .benefit-card:first-child .benefit-body h3{font-size:21px}
}
/* En grand écran : 1 carte pleine largeur + une rangée de 3, pour éviter la
   4e carte orpheline d'une grille à 2 colonnes. */
@media(min-width:1000px){.benefit-grid{grid-template-columns:repeat(3,1fr)}}
.benefit-card{
  display:flex;flex-direction:column;gap:18px;
  background:var(--surface);border:1px solid var(--line-strong);
  border-inline-start:4px solid var(--pole,var(--green-dark));
  border-radius:0;padding:clamp(22px,2.3vw,28px);
  transition:border-inline-start-width var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.benefit-card:hover{border-inline-start-width:8px;background:var(--paper)}
.benefit-icon{
  flex-shrink:0;width:50px;height:50px;border-radius:0;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--pole, var(--green-dark)) 10%, #fff);
  border:1px solid color-mix(in srgb, var(--pole, var(--green-dark)) 60%, var(--line));
  color:color-mix(in srgb, var(--pole, var(--green-deep)) 50%, var(--ink));
}
.benefit-icon svg{width:26px;height:26px}
.benefit-body h3{font-size:var(--fs-h3);line-height:1.22;margin-bottom:10px}
.benefit-body p{font-size:15px;line-height:1.65;color:var(--ink-soft)}

/* ----- Cartes d'espaces louables (Conférences) ----- */
.space-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:760px){.space-grid{grid-template-columns:repeat(2,1fr)}}
.space-card{
  position:relative;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:0;
  padding:clamp(24px,2.5vw,30px);display:flex;flex-direction:column;gap:16px;
  transition:border-color var(--dur) var(--ease);
}
/* Règle de couleur en tête de fiche : identifie l'espace sans l'enfermer
   dans une pastille. */
.space-card::before{
  content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:4px;
  background:var(--pole,var(--green-dark));
}
.space-card:hover{border-color:var(--pole,var(--green-dark))}
.space-card .tag{
  align-self:flex-start;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-ui);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;
  padding:0;border-radius:0;background:transparent;
  color:color-mix(in srgb, var(--pole,var(--green-deep)) 45%, var(--ink));
}
.space-card .tag svg{width:16px;height:16px;color:inherit}
.space-card h3{font-size:clamp(19px,2vw,23px)}
.space-card p{font-size:15px;line-height:1.65;color:var(--ink-soft)}

/* ----- Journées d'ouverture (Dates du Salon) ----- */
.day-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:800px){.day-grid{grid-template-columns:repeat(2,1fr)}}
.day-card{
  position:relative;overflow:hidden;border-radius:0;
  border:1px solid var(--line-strong);background:var(--surface);padding:0;
  display:flex;flex-direction:column;
}
.day-card-top{
  position:relative;overflow:hidden;
  padding:clamp(20px,2.2vw,26px);color:#fff;display:flex;flex-direction:column;gap:9px;
}
/* Même semis de fleurs que les autres aplats colorés du site. Un cran plus
   présent que sur les grandes bandes : l'en-tête ne fait qu'une centaine de
   pixels de haut, à 0,09 le motif n'y était tout simplement pas lisible. */
.day-card-top::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:.12;
}
.day-card-top>*{position:relative;z-index:1}
.day-card--pro .day-card-top{background:var(--orange-cta)}
.day-card--mixed .day-card-top{background:var(--green-deep)}
.day-card-top .badge{
  font-family:var(--font-ui);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;opacity:.9;
}
.day-card-top h3{font-size:clamp(20px,2.1vw,24px);line-height:1.2}
/* Le corps se lit comme un tableau d'horaires : intitulé fileté à gauche,
   valeur à droite, une ligne par information. */
.day-card-body{padding:clamp(20px,2.2vw,26px);display:grid;gap:0}
.day-row{
  display:flex;gap:16px;align-items:baseline;font-size:15px;
  padding:13px 0;border-top:1px solid var(--line);
}
.day-row:first-child{border-top:none;padding-top:0}
.day-row dt{
  flex:0 0 88px;font-family:var(--font-ui);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--ink-soft);padding-top:0;
}
.day-row dd{margin:0;font-weight:600;color:var(--ink);min-width:0}
.day-card-body .note{font-size:14.5px;line-height:1.6;color:var(--ink-soft);font-weight:400}

/* ----- Accès au salon : carte Google + informations ----- */
.access-map-figure{margin:0}
.access-map{
  border:1px solid var(--line-strong);border-radius:0;overflow:hidden;background:var(--paper-deep);
  aspect-ratio:16/9;max-height:460px;
}
.access-map iframe{width:100%;height:100%;border:0;display:block}

/* ----- Téléchargements par pôle (Dossier de participation) -----
   Accordéon natif <details>/<summary> : zéro JavaScript, accessible par
   défaut au clavier et aux lecteurs d'écran. */
.doc-list{display:grid;gap:12px}
.doc-list{gap:0;border:1px solid var(--line-strong);background:var(--surface)}
.doc-item{
  background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;
  border-inline-start:4px solid var(--pole,var(--green-dark));overflow:hidden;
}
.doc-item:first-child{border-top:none}
.doc-item summary{
  display:flex;align-items:center;gap:16px;cursor:pointer;
  padding:18px 20px;min-height:48px;font-weight:600;font-size:16.5px;list-style:none;
  transition:background-color var(--dur-fast) var(--ease);
}
.doc-item summary::-webkit-details-marker{display:none}
.doc-item summary::after{
  content:"";margin-left:auto;width:9px;height:9px;flex-shrink:0;
  border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);
  transform:rotate(45deg);transition:transform .2s ease;
}
.doc-item[open] summary::after{transform:rotate(-135deg)}
.doc-item summary:hover{background:var(--paper)}
.doc-icon{
  flex-shrink:0;width:40px;height:40px;border-radius:0;
  background:color-mix(in srgb, var(--pole, var(--green-dark)) 10%, #fff);
  border:1px solid color-mix(in srgb, var(--pole, var(--green-dark)) 60%, var(--line));
  color:color-mix(in srgb, var(--pole, var(--green-deep)) 50%, var(--ink));
  display:flex;align-items:center;justify-content:center;
}
.doc-icon svg{width:20px;height:20px}
.doc-body{padding:0 20px 20px 72px;display:grid;gap:14px}
.doc-body p{font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.doc-body .btn{align-self:flex-start}
@media(max-width:560px){.doc-body{padding-left:20px}}
.doc-unavailable{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-ui);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--ink-soft);background:var(--paper-warm);border:1px dashed var(--line-strong);
  border-radius:0;padding:12px 18px;min-height:44px;
}

/* ----- Document légal (CGV) : sommaire collant + articles ----- */
.legal-layout{display:grid;gap:32px;grid-template-columns:1fr}
@media(min-width:960px){
  .legal-layout{grid-template-columns:250px minmax(0,1fr);gap:48px;align-items:start}
  .legal-toc{position:sticky;top:96px}
}
.legal-toc h2{
  font-family:var(--font-ui);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--ink);margin-bottom:16px;padding-bottom:12px;
  border-bottom:2px solid var(--ink);
}
/* Sommaire numéroté : un document officiel annonce ses articles. */
.legal-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:siamart}
.legal-toc a{
  display:flex;gap:12px;padding:10px 12px;border-radius:0;font-size:13.5px;font-weight:600;
  color:var(--ink-soft);border-inline-start:2px solid var(--line);
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);
}
.legal-toc a::before{
  counter-increment:siamart;content:counter(siamart,decimal-leading-zero);
  flex-shrink:0;font-size:11px;letter-spacing:.06em;color:var(--orange-cta);padding-top:2px;
}
.legal-toc a:hover{color:var(--green-deep);border-inline-start-color:var(--green-dark);background:var(--surface)}
.legal-body{max-width:75ch}
.legal-body h2{scroll-margin-top:96px}

/* ----- Vidéothèque ----- */
/* `scroll-margin-top` : la pagination ancre sur la grille, l'en-tête fixe
   ne doit pas recouvrir la première rangée à l'arrivée. */
.media-grid{display:grid;gap:20px;grid-template-columns:1fr;scroll-margin-top:96px}
@media(min-width:640px){.media-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.media-grid{grid-template-columns:repeat(3,1fr)}}
.media-card{
  background:var(--surface);border:1px solid var(--line-strong);border-radius:0;overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color var(--dur) var(--ease);
}
.media-card:hover,.media-card:focus-within{border-color:var(--ink)}
.media-card .video-thumb{
  max-width:none;width:100%;border-radius:0;box-shadow:none;aspect-ratio:16/9;
  background-color:var(--green-deep);
}
.media-card .play-circle{width:56px;height:56px;font-size:18px}
/* La vignette est une vraie <img> (et non un background) : elle est donc
   chargée paresseusement au-delà de la première rangée, et le fond vert
   derrière elle sert d'ÉTAT DE CHARGEMENT — la grille ne clignote pas en
   blanc le temps que l'image arrive. `cover` absorbe au passage le
   letterboxing des miniatures YouTube (480x360) et des Shorts. */
.media-card .video-thumb img{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;object-fit:cover;border:0;
  transform:scale(1.001); /* évite un liseré d'un pixel au survol */
  transition:transform var(--dur) var(--ease),opacity var(--dur-fast) var(--ease);
}
.media-card:hover .video-thumb img{transform:scale(1.035)}
/* Colonne flex (et non grille) : les cartes d'une même rangée ont la même
   hauteur, et `margin-top:auto` sur la ligne d'actions les aligne toutes
   sur le bas, quelle que soit la longueur du titre. */
.media-card-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.media-card-body h3{
  font-size:17px;line-height:1.3;
  /* Les titres YouTube sont de longueur très inégale : on les borne à trois
     lignes pour que la grille garde un rythme régulier. */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.media-card-body .meta{
  font-family:var(--font-ui);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft);
}
/* Actions de la carte : « Regarder » ouvre la modale, « YouTube » sort du
   site. Deux liens de texte, pas deux boutons — la vignette porte déjà
   l'action principale. */
.media-card-body .media-card-actions{
  margin-top:auto;padding-top:4px;display:flex;align-items:center;gap:14px;
  font-family:var(--font-ui);font-size:13px;font-weight:700;
}
.media-play{
  appearance:none;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:var(--orange-cta);
  border-bottom:1.5px solid currentColor;
  transition:color var(--dur-fast) var(--ease);
}
.media-play::before{content:"▶";font-size:9px;margin-inline-end:7px;vertical-align:1px}
.media-play:hover{color:var(--green-deep)}
.media-card-body .media-card-actions a{
  color:var(--ink-soft);text-decoration:none;
  border-bottom:1px solid var(--line-strong);
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.media-card-body .media-card-actions a:hover{color:var(--ink);border-color:var(--ink)}

/* Barre au-dessus de la grille : volume du catalogue à gauche, sortie vers
   la chaîne à droite. Un filet, pas une carte. */
.media-bar{
  display:flex;flex-wrap:wrap;gap:10px 20px;align-items:baseline;
  justify-content:space-between;
  margin:-14px 0 22px;padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.media-bar .media-count{
  font-family:var(--font-ui);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft);
}
.media-bar .media-count strong{color:var(--ink)}
.media-bar .sep{margin:0 8px;color:var(--line-strong)}
.media-channel{
  font-family:var(--font-ui);font-size:13px;font-weight:700;
  color:var(--green-cta);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;
  transition:color var(--dur-fast) var(--ease)
}
.media-channel:hover{color:var(--orange-cta)}

/* États de repli : YouTube injoignable (données en cache) ou catalogue vide.
   Un bandeau sobre, bordé d'orange — ni alerte rouge ni cadre arrondi. */
.media-notice{
  margin:0 0 22px;padding:13px 16px;
  background:var(--paper-warm);border-inline-start:3px solid var(--orange);
  font-size:var(--fs-small);color:var(--ink-soft);line-height:1.5;
}
.media-notice--empty{margin-bottom:0}

/* ----- Pagination (médiathèque) -----
   Même grammaire que le reste du site : angles vifs, filets francs, la page
   courante en vert profond pleine couleur. Les commandes inapplicables
   restent VISIBLES mais inertes (`is-disabled`) : la position dans le
   catalogue se lit d'un coup d'œil. */
.pager{
  margin-top:clamp(30px,3.4vw,44px);padding-top:22px;
  border-top:1px solid var(--line-strong);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;
}
.pager-pages{
  order:2;list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
}
.pager-page,.pager-step{
  font-family:var(--font-ui);font-size:14px;font-weight:700;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;border:1.5px solid var(--line-strong);
  color:var(--ink);text-decoration:none;background:var(--surface);
  transition:background-color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease);
}
.pager-page{min-width:42px;padding:0 10px}
.pager-step{padding:0 18px}
/* Ordre visuel explicite, par classe et non par position : selon la page,
   « Précédent » est un lien ou un libellé inerte, et `:first-of-type` ne
   désigne alors pas le même élément. */
.pager-prev{order:1}
.pager-next{order:3}
a.pager-page:hover,a.pager-step:hover{border-color:var(--ink);background:var(--paper-warm)}
.pager-page.is-current{
  background:var(--green-deep);border-color:var(--green-deep);color:#fff;cursor:default;
}
.pager-step.is-disabled{
  color:var(--ink-soft);opacity:.45;cursor:not-allowed;background:transparent;
}
.pager-gap{
  font-family:var(--font-ui);font-weight:700;color:var(--ink-soft);
  padding:0 2px;user-select:none;
}
.pager-state{
  order:4;flex-basis:100%;text-align:center;margin:4px 0 0;
  font-family:var(--font-ui);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft);
}
/* Mobile : les deux commandes encadrent les numéros sur une ligne pleine. */
@media(max-width:560px){
  .pager{gap:8px}
  .pager-step{flex:1;padding:0 12px;font-size:13px}
  .pager-pages{order:0;flex-basis:100%;justify-content:center}
}

/* Libellé réservé aux lecteurs d'écran (« Page » devant un numéro). */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ----- Catalogue des exposants / plan de masse : documents ----- */
.doc-cards{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:760px){.doc-cards{grid-template-columns:repeat(2,1fr)}}
.doc-card{
  display:grid;gap:24px;grid-template-columns:104px minmax(0,1fr);align-items:start;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:0;
  padding:clamp(20px,2.2vw,26px);
}
.doc-cover{
  aspect-ratio:3/4;border-radius:0;position:relative;overflow:hidden;
  background:var(--green-deep);
  display:flex;align-items:flex-end;padding:11px;color:#fff;
  box-shadow:3px 3px 0 0 var(--green-lime);
}
.doc-cover span{
  position:relative;z-index:1;font-family:var(--font-ui);font-size:10px;font-weight:700;
  line-height:1.3;letter-spacing:var(--track-label);
}
.doc-cover svg{position:absolute;right:-16px;top:-10px;width:86px;height:86px;opacity:.22}
.doc-card h3{font-size:var(--fs-h3);line-height:1.22;margin-bottom:10px}
.doc-card .desc{font-size:14.5px;line-height:1.65;color:var(--ink-soft);margin-bottom:16px}
.doc-card .price{
  font-family:var(--font-display);font-optical-sizing:auto;
  font-size:22px;font-weight:700;color:var(--green-deep);margin-bottom:16px;letter-spacing:-0.02em;
}
.doc-card-actions{display:flex;flex-wrap:wrap;gap:10px}

/* ----- Contact : formulaire + responsables ----- */
.form-card{
  background:var(--surface);border:1px solid var(--line-strong);border-radius:0;
  border-top:3px solid var(--green-deep);
  padding:clamp(24px,2.6vw,34px);
}
.form-grid{display:grid;gap:18px}
@media(min-width:560px){.form-grid .field--half{grid-column:span 1}.form-grid{grid-template-columns:repeat(2,1fr)}.form-grid .field--full{grid-column:1/-1}}
.field{display:grid;gap:7px}
.field label{
  font-family:var(--font-ui);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink);
}
.field .req{color:var(--orange-cta)}
.field input,.field select,.field textarea{
  font-family:var(--font-ui);font-size:15.5px;color:var(--ink);background:var(--paper-deep);
  border:1px solid var(--line-strong);border-bottom-width:2px;
  border-radius:0;padding:13px 14px;min-height:48px;width:100%;
  transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.field textarea{min-height:150px;resize:vertical;line-height:1.65}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--green-dark);border-bottom-color:var(--green-deep);background:#fff;outline:none;
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:3px solid var(--orange-cta);outline-offset:1px;
}
.field--error input,.field--error select,.field--error textarea{border-color:var(--red-danger)}
.field-error{font-size:13px;font-weight:700;color:var(--red-danger)}
.field-hint{font-size:13px;color:var(--ink-soft);line-height:1.55}
/* Pot de miel anti-spam : masqué visuellement ET pour les lecteurs d'écran. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px}

.notice{
  display:flex;gap:14px;align-items:flex-start;
  border-radius:0;padding:16px 18px;font-size:15px;line-height:1.6;margin-bottom:24px;
  border:1px solid var(--line-strong);border-inline-start:4px solid var(--ink);background:var(--surface);
}
.notice--ok{border-color:rgba(12,127,47,.35);border-inline-start-color:var(--green-cta);background:rgba(12,127,47,.06);color:var(--green-deep)}
.notice--err{border-color:rgba(145,19,14,.3);border-inline-start-color:var(--red-danger);background:rgba(145,19,14,.05);color:var(--red-danger)}

.people-list{display:grid;gap:14px}
@media(min-width:860px){.people-list{grid-template-columns:repeat(2,1fr)}}
.person{
  display:grid;grid-template-columns:54px minmax(0,1fr);gap:18px;align-items:start;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:0;
  padding:20px 22px;
  transition:border-color var(--dur) var(--ease);
}
.person:hover{border-color:var(--pole,var(--green-deep))}
.person-initials{
  width:54px;height:54px;border-radius:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-optical-sizing:auto;
  font-size:18px;font-weight:700;letter-spacing:.01em;color:var(--ink);
  background:transparent;
  box-shadow:inset 0 0 0 1px var(--pole,var(--green-deep)),
             inset 0 -4px 0 0 var(--pole,var(--green-deep));
}
.person h3{font-size:17px;line-height:1.25}
.person .role{
  font-family:var(--font-ui);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--ink-soft);margin:6px 0 12px;
}
.person-links{display:grid;gap:5px;font-size:14px}
.person-links a{color:var(--green-deep);font-weight:600;display:inline-flex;gap:7px;align-items:center}
.person-links a:hover{text-decoration:underline}
.person-links svg{width:15px;height:15px;flex-shrink:0;color:var(--ink-soft)}

/* ----- Encart de rappel (bandeau vert, fin de page) ----- */
.cta-band{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--green-deep);color:#fff;
  padding-top:var(--sp-section-md);padding-bottom:var(--sp-section-md);
  border-top:3px solid var(--orange);
}
.cta-band::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.08;
}
.cta-band .wrap{display:grid;gap:26px}
.cta-band h2{font-size:var(--fs-h2);max-width:22ch;text-wrap:balance}
.cta-band p{color:rgba(255,255,255,.86);font-size:var(--fs-lead);margin-top:14px;max-width:56ch;line-height:1.65}
.cta-band-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media(min-width:900px){.cta-band .wrap{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:48px}}

/* ----- Boutique : vitrine et filtre natif ----- */
.shop-toolbar{
  display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between;
  padding-bottom:20px;margin-bottom:28px;border-bottom:2px solid var(--ink);
}
.shop-filter{display:flex;flex-wrap:wrap;gap:0}
.shop-filter a{
  display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:0;
  border:1px solid var(--line-strong);background:var(--surface);
  font-family:var(--font-ui);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft);
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.shop-filter a+a{margin-left:-1px}
.shop-filter a:hover{border-color:var(--green-cta);color:var(--green-deep);z-index:1}
.shop-filter a[aria-current="true"]{background:var(--green-deep);border-color:var(--green-deep);color:#fff;z-index:1}
.product-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:560px){.product-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.product-grid{grid-template-columns:repeat(4,1fr)}}
.product-card{
  background:var(--surface);border:1px solid var(--line-strong);border-radius:0;overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color var(--dur) var(--ease);
}
.product-card:hover,.product-card:focus-within{border-color:var(--ink)}
.product-media{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--paper-deep)}
.product-media img{width:100%;height:100%;object-fit:cover}
.product-media--blank{
  display:grid;place-items:center;position:relative;isolation:isolate;
  background:var(--green-deep);color:#fff;
}
/* Vignette sans photo : le semis de fleurs évite le « placeholder vide ». */
.product-media--blank::before{
  content:"";position:absolute;inset:0;z-index:-1;
  opacity:.12;
}
.product-media--blank svg{width:44px;height:44px;opacity:.92}
.product-type{
  position:absolute;top:0;left:0;z-index:1;
  font-family:var(--font-ui);font-size:var(--fs-label);font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;
  background:var(--ink-deep);color:#fff;padding:7px 12px;border-radius:0;
}
.product-body{padding:20px;display:flex;flex-direction:column;gap:12px;flex:1}
.product-body h3{font-size:17px;line-height:1.25}
.product-body .desc{font-size:14px;line-height:1.6;color:var(--ink-soft);flex:1}
.product-body .price{
  font-family:var(--font-display);font-optical-sizing:auto;
  font-size:24px;font-weight:700;color:var(--green-deep);letter-spacing:-0.025em;
}
.product-body form{display:flex;gap:8px;align-items:center}
.product-body input[type=number]{
  width:74px;min-height:48px;padding:10px;font-family:var(--font-ui);font-size:15px;
  border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:0;background:var(--paper-deep);
}
.product-body .btn{flex:1;padding:12px 16px;font-size:14px}

/* ----- Détail produit (/shop/{slug}) -----
   Photo à gauche, informations et ajout au panier à droite.
   Mobile : une seule colonne, l'image au-dessus du texte. */
.product-detail{display:grid;gap:24px;grid-template-columns:1fr;align-items:start}
@media(min-width:860px){
  .product-detail{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px}
}
.product-detail__media{
  position:relative;overflow:hidden;aspect-ratio:4/3;
  border:1px solid var(--line-strong);background:var(--paper-deep);
}
.product-detail__media img{width:100%;height:100%;object-fit:fill;display:block}
.product-detail__body{display:flex;flex-direction:column;gap:14px;max-width:60ch}
.product-detail__price{
  font-family:var(--font-display);font-optical-sizing:auto;
  font-size:30px;font-weight:700;color:var(--green-deep);letter-spacing:-0.025em;
}
.product-detail__desc{font-size:15.5px;line-height:1.7;color:var(--ink-soft);white-space:pre-line}
.product-detail__form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}
.product-detail__form input[type=number]{
  width:74px;min-height:48px;padding:10px;font-family:var(--font-ui);font-size:15px;
  border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:0;background:var(--paper-deep);
}

/* ----- Sur-titre sur fond foncé (bandeau royal, bandeau d'appel) ----- */
.royal .eyebrow,.cta-band .eyebrow,.pole-cta .eyebrow{color:#FFD9C7}
.royal .eyebrow::before,.cta-band .eyebrow::before,.pole-cta .eyebrow::before{background:#FFD9C7}

/* ==========================================================================
   Page-builder — « Texte + image côte à côte » et « Galerie / carrousel »
   Mobile-first, CSS natif, mêmes tokens que le reste du site.
   ========================================================================== */

/* ----- Texte + image -----
   Mobile : une colonne, l'image passe au-dessus du texte (ordre visuel géré
   par `order`, l'ordre du DOM restant titre → texte → image pour le clavier
   et les lecteurs d'écran). */
.media-text{display:grid;gap:24px;align-items:center}
.media-text-body{min-width:0;display:grid;gap:14px;align-content:start}
.media-text-body .eyebrow{margin-bottom:6px}
.media-text-body h2{font-size:var(--fs-h2);line-height:1.14;max-width:18ch;text-wrap:balance}
.media-text-figure{margin:0;min-width:0}
/* La photo agricole est le sujet : angles vifs, pas de rayon qui la
   « vignette », et un filet bas aux couleurs du salon qui l'ancre. */
.media-text-figure img{
  width:100%;height:auto;border-radius:0;display:block;
  border-bottom:4px solid var(--green-lime);background:var(--paper-deep);
}
.media-text-figure figcaption{
  margin-top:12px;font-size:13.5px;color:var(--ink-soft);line-height:1.55;
  padding-inline-start:14px;border-inline-start:2px solid var(--line-strong);
}
@media(max-width:819px){
  .media-text-figure{order:-1}
}
@media(min-width:820px){
  .media-text{gap:clamp(28px,4vw,52px)}
  /* Proportions : part de l'image en grand écran. */
  .media-text--third{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  .media-text--half{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .media-text--two-thirds{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  /* Image à gauche : inversion par la grille, le HTML ne change pas. */
  .media-text--left .media-text-body{order:2}
  .media-text--left .media-text-figure{order:1}
  /* Sans image : le texte reprend la largeur de lecture normale. */
  .media-text--noimg{grid-template-columns:minmax(0,1fr)}
  .media-text--noimg .media-text-body{max-width:74ch}
}

/* ----- Galerie en grille ----- */
.gallery-grid{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
.gallery-grid{gap:2px}
.gallery-cell{margin:0;position:relative;overflow:hidden}
.gallery-cell img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:0;background:var(--paper-deep);
  transition:transform var(--dur) var(--ease);
}
.gallery-cell:hover img{transform:scale(1.03)}
.gallery-cell figcaption{
  margin-top:10px;font-size:13px;color:var(--ink-soft);
  padding-inline-start:12px;border-inline-start:2px solid var(--line-strong);
}

/* ----- Carrousel -----
   Le défilement est 100% CSS (scroll-snap) : utilisable au doigt, à la
   molette et au clavier même si carousel.js ne charge pas. Le script
   n'ajoute que les flèches et les pastilles. */
.carousel{position:relative}
.carousel-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:thin;padding-bottom:4px;
}
@media(min-width:760px){.carousel-track{grid-auto-columns:60%}}
@media(min-width:1100px){.carousel-track{grid-auto-columns:46%}}
.carousel-slide{margin:0;scroll-snap-align:start}
.carousel-slide img{
  width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  border-radius:0;background:var(--paper-deep);
  border-bottom:4px solid var(--green-lime);
}
.carousel-slide figcaption{
  margin-top:12px;font-size:13.5px;color:var(--ink-soft);
  padding-inline-start:14px;border-inline-start:2px solid var(--line-strong);
}
.carousel-nav{
  position:absolute;top:calc(50% - 22px);transform:translateY(-50%);z-index:2;
  width:46px;height:46px;border-radius:0;cursor:pointer;
  border:1px solid var(--ink);background:var(--surface);color:var(--ink);
  font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px -10px rgba(8,13,10,.45);
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease);
}
.carousel-nav:hover{background:var(--ink);color:#fff}
.carousel-nav:disabled{opacity:.35;cursor:default}
.carousel-nav.prev{left:-6px}
.carousel-nav.next{right:-6px}
@media(min-width:1240px){
  .carousel-nav.prev{left:-22px}
  .carousel-nav.next{right:-22px}
}
.carousel-dots{display:flex;gap:8px;justify-content:center;margin-top:16px}
.carousel-dots{gap:0}
.carousel-dots button{
  width:30px;height:3px;border-radius:0;border:none;background:var(--line-strong);
  cursor:pointer;padding:0;margin:0 3px;
  transition:background-color var(--dur) var(--ease),width var(--dur) var(--ease);
}
.carousel-dots button.is-active{background:var(--orange-cta);width:46px;border-radius:0}

/* ==========================================================================
   MOUVEMENT — une seule orchestration, au chargement de la page.
   --------------------------------------------------------------------------
   Parti pris : UN moment chorégraphié (l'ouverture du hero ou du bandeau de
   page) vaut mieux que vingt micro-animations dispersées. Les éléments du
   bandeau entrent en cascade via `animation-delay`, puis plus rien ne bouge
   tout seul : le reste du site ne s'anime qu'en réponse à une action du
   visiteur (survol, focus, ouverture d'accordéon).

   Tout est en CSS pur, sans observateur d'intersection : aucun JavaScript
   supplémentaire, aucun contenu masqué si le script ne charge pas — un
   point important ici, puisque le site doit rester lisible sans JS.

   `prefers-reduced-motion` est déjà neutralisé plus haut (durées ramenées à
   0.01ms) : la cascade devient instantanée, le contenu reste visible.
   ========================================================================== */
@keyframes siam-rise{
  from{opacity:0;transform:translateY(14px)}
  to  {opacity:1;transform:none}
}
@keyframes siam-wipe{
  from{opacity:0;clip-path:inset(0 100% 0 0)}
  to  {opacity:1;clip-path:inset(0 0 0 0)}
}

/* Cascade d'ouverture. Seule la PREMIÈRE diapositive s'anime : les suivantes
   sont révélées par le slider, pas par le chargement de la page. */
.slide.is-active .hero-badge,
.slide.is-active h1,
.slide.is-active p.lead,
.slide.is-active .hero-dates,
.slide.is-active .hero-actions,
.slide.is-active .video-thumb,
.page-hero .hero-badge,
.page-hero h1,
.page-hero p.lead,
.page-hero .page-hero-meta,
.page-hero .page-hero-actions{
  animation:siam-rise .72s var(--ease) both;
}
.slide.is-active .hero-badge,.page-hero .hero-badge{animation-delay:.04s}
.slide.is-active h1,.page-hero h1{animation-delay:.13s}
.slide.is-active p.lead,.page-hero p.lead{animation-delay:.22s}
.slide.is-active .hero-dates,.page-hero .page-hero-meta{animation-delay:.31s}
.slide.is-active .hero-actions,.slide.is-active .video-thumb,
.page-hero .page-hero-actions{animation-delay:.40s}


/* L'index numéroté des diapositives arrive en dernier. */
.hero-dots{animation:siam-rise .6s var(--ease) both;animation-delay:.52s}

/* Le bandeau de chiffres se dévoile d'un balayage, une fois le hero posé. */
.pb-sec--stats .stats{animation:siam-wipe .9s var(--ease) both;animation-delay:.46s}

/* Les diapositives suivantes (changement de slide) ne rejouent PAS la
   cascade : seule la première passe au chargement est chorégraphiée.
   `animation` est déjà consommée (`both`), rien à neutraliser — mais on
   coupe explicitement sur les slides inactives pour éviter qu'un retour en
   arrière ne relance la séquence sur une slide déjà vue. */
.slide:not(.is-active) *{animation:none !important}

/* ==========================================================================
   FINITIONS TRANSVERSALES
   ========================================================================== */

/* Césure et veuves : le français a des mots longs (« agroalimentaire »,
   « internationale ») qui débordent dans les colonnes étroites. */
h1,h2,h3,.pole-label,.hero h1{overflow-wrap:break-word}
.cms-content,.lead-text,.section-head p{hyphens:auto}

/* Sélection : aux couleurs du salon plutôt qu'au bleu par défaut. */
::selection{background:var(--green-lime);color:var(--ink)}

/* Barre de défilement des carrousels : discrète, aux couleurs du site. */
.carousel-track{scrollbar-color:var(--line-strong) transparent}

/* Images en cours de chargement : un fond neutre plutôt qu'un trou blanc. */
img{background-color:transparent}
.gallery-cell img,.carousel-slide img,.media-text-figure img,.pb-figure img,
.product-media img,.product-detail__media img{background-color:var(--paper-deep)}

/* Impression : le site sert aussi de support officiel (dossier, CGV). */
@media print{
  header,footer,.hero-nav,.hero-dots,.breadcrumb,.btn,.video-modal,
  .pager,.media-card-actions{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  .page-hero,.hero{background:#fff !important;color:#000;border:none;padding:0 0 18pt}
  .page-hero::before,.page-hero::after,.hero::after,.slide::before{display:none}
  .page-hero h1{color:#000}
  section{padding:10pt 0}
  .cms-content{max-width:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
}

/* ==========================================================================
   SENS DE LECTURE — préparation de la version arabe (dir=rtl).
   Les filets d'accent sont déjà en propriétés logiques (border-inline-start,
   padding-inline-start) : ils basculent seuls. Restent ici les quelques
   réglages encore exprimés en gauche/droite physiques.
   Aucun effet sur les versions FR/EN.
   ========================================================================== */
[dir="rtl"] .eyebrow::before,[lang="ar"] .eyebrow::before{transform:scaleX(-1)}
[dir="rtl"] .pole-link::before,[lang="ar"] .pole-link::before,
[dir="rtl"] .menu>li>a::after,[lang="ar"] .menu>li>a::after,
[dir="rtl"] .menu .sub-toggle::after,[lang="ar"] .menu .sub-toggle::after,
[dir="rtl"] .btn::after,[lang="ar"] .btn::after{transform-origin:right center}
[dir="rtl"] .pole-link::after,[lang="ar"] .pole-link::after{content:"←"}
[dir="rtl"] .pole-card:hover .pole-link::after,[lang="ar"] .pole-card:hover .pole-link::after,
[dir="rtl"] .pole-link:hover::after,[lang="ar"] .pole-link:hover::after{transform:translateX(-4px)}
[dir="rtl"] .pole:hover .pole-arrow,[lang="ar"] .pole:hover .pole-arrow{transform:translate(-3px,-3px)}
[dir="rtl"] .product-type,[lang="ar"] .product-type{left:auto;right:0}
[dir="rtl"] .doc-body,[lang="ar"] .doc-body{padding:0 72px 20px 20px}
[dir="rtl"] .breadcrumb ol,[lang="ar"] .breadcrumb ol,
[dir="rtl"] .legal-toc ol,[lang="ar"] .legal-toc ol{text-align:right}