/*
Theme Name: W-Events — Éditorial
Theme URI: https://www.agence-wevents.fr/
Author: Fabrique Studio
Description: Thème sur-mesure pour l'agence événementielle W-Events. Direction « Éditorial institutionnel » (design validé 28/07/2026) : Cormorant Garamond sur les titres, Inter sur le texte, noir et blanc sans fluo, dock en haut, hero façon éditorial, wordmark géant en pied. Dérivé de W-Events — Statement.
Version: 2.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wevents
*/

/* ============================================================
   TOKENS
   Le fluo est une couleur de TEXTE sur noir, et uniquement un
   SURLIGNEUR derrière le texte sur papier. Jamais de texte fluo
   sur blanc (1.1:1). Ailleurs sur papier, il n'existe qu'en filet.
   ============================================================ */
:root{
  color-scheme: light;

  --noir:#0E0B08;
  --noir-2:#171009;
  --paper:#FDFCFA;

  --creme:#F5EFE4;
  --creme-dim:#CFC4B1;
  --taupe:#A0917C;
  --ink:#15120D;
  --ink-2:#6E675B;

  --fluo:#E9FF16;
  --btn-ink:#171200;

  --line-p:rgba(21,18,13,.09);
  --line-p-2:rgba(21,18,13,.16);
  --line-n:rgba(245,239,228,.13);
  --line-n-2:rgba(245,239,228,.24);

  --focus:var(--ink);

  --sans:"Inter","Helvetica Neue",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --cond:"Helvetica Neue","Arial Narrow",Arial,sans-serif;
  --mono:"SF Mono","Fragment Mono",ui-monospace,Menlo,monospace;

  --pad:clamp(20px,5vw,72px);
  --wrap:1120px;

  /* Hauteur réservée sous le contenu pour la barre flottante du bas. */
  --dock-h:clamp(78px,9vw,104px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{text-wrap:balance}
[id]{scroll-margin-top:24px}

:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;
}
.skip-link{
  position:absolute;left:var(--pad);top:-100px;z-index:60;
  background:var(--fluo);color:var(--btn-ink);padding:12px 20px;border-radius:999px;
  font-size:.8rem;font-weight:500;transition:top .2s;
}
.skip-link:focus{top:14px}

.site-main{position:relative;z-index:1}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.measure{max-width:66ch}

/* ---------- bandes ---------- */
.band{padding:clamp(60px,9vw,120px) 0;position:relative}
/* Plus de filet entre les bandes : c'est le rythme vertical qui sépare les
   sections, pas une ligne. `band--flush` reste sans effet, elle est encore
   posée par plusieurs gabarits. */
.band--paper{background:transparent}
.band--flush{border-top:0}
.band--noir{background:var(--noir);color:var(--creme);--focus:var(--fluo)}

/* ============================================================
   CHROME
   ============================================================ */
.brand{
  font-weight:600;font-size:.95rem;letter-spacing:.34em;
  text-transform:uppercase;padding-left:.34em;
}
.brand img{max-height:28px;width:auto}

.menu{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:.76rem;font-weight:400}
.menu li{margin:0}

/* ============================================================
   BARRE DE NAVIGATION FLOTTANTE (bas de page)
   Toujours sombre : elle survole le papier comme les bandes noires, et un fond
   opaque évite de faire dépendre sa lisibilité de ce qui passe derrière.
   ============================================================ */
.dock{
  position:fixed;z-index:50;
  left:50%;translate:-50% 0;
  bottom:clamp(16px,2.2vw,30px);
  max-width:calc(100vw - 2 * clamp(12px,2vw,24px));

  /* `max-content` sinon la barre, positionnée en `fixed`, se dimensionne au
     plus étroit : les liens débordaient de vingt pixels et « L'agence » se
     retrouvait coupé en plein mot, alors qu'il restait six cents pixels libres
     à l'écran. Le `max-width` au-dessus continue de la brider au bord. */
  width:max-content;
  display:flex;align-items:center;gap:4px;
  padding:7px 7px 7px 22px;
  border-radius:999px;
  background:rgba(14,11,8,.88);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
          backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(245,239,228,.13);
  box-shadow:0 20px 54px -20px rgba(0,0,0,.75);

  color:var(--creme);
  --focus:var(--fluo);
}

.dock__brand{
  flex:none;white-space:nowrap;
  font-weight:600;font-size:.76rem;letter-spacing:.28em;
  text-transform:uppercase;padding-left:.28em;
  color:var(--creme);
}
.dock__brand img{max-height:22px;width:auto}

/* Les libellés défilent horizontalement quand la barre atteint le bord. */
.dock__liens{
  min-width:0;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;
  margin-inline:14px;
  border-left:1px solid rgba(245,239,228,.14);padding-left:16px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);
}
.dock__liens::-webkit-scrollbar{display:none}

.dock .menu{gap:2px;font-size:.86rem;flex-wrap:nowrap}
.dock .menu a{
  display:block;white-space:nowrap;
  padding:9px 14px;border-radius:999px;
  color:var(--creme-dim);
  transition:color .25s,background .25s;
}
.dock .menu a:hover{color:var(--creme);background:rgba(245,239,228,.08)}

/* Page courante : l'aplat fluo, comme partout ailleurs — un fond, jamais du texte. */
.dock .menu li.current-menu-item > a,
.dock .menu li.current_page_item > a,
.dock .menu li.current-menu-ancestor > a{
  background:var(--fluo);color:var(--btn-ink);
}

/* ---------- le dépliant d'« Évènements d'entreprise » ---------- */
.dock .menu .sub-menu{list-style:none;margin:0;padding:0;display:flex;gap:2px}

/* Au large, il tombe sous son parent. Deux précautions :
   — .dock__liens défile en x, et un `overflow-x` non visible rogne aussi en y ;
     on le rend débordant à partir d'ici, la barre à quatre entrées y tient ;
   — le sous-menu se positionne sur son li, qui devient donc le référent. */
@media(min-width:1000px){
  .dock__liens{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .dock .menu > li{position:relative}

  .dock .menu .menu-item-has-children > a{padding-right:28px}
  .dock .menu .menu-item-has-children > a::after{
    content:"";position:absolute;right:13px;top:50%;
    width:5px;height:5px;margin-top:-4px;
    border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    rotate:45deg;opacity:.65;
  }

  .dock .menu .sub-menu{
    position:absolute;top:calc(100% + 11px);left:0;z-index:1;
    flex-direction:column;min-width:210px;padding:6px;
    border-radius:20px;
    background:rgba(14,11,8,.94);
    -webkit-backdrop-filter:blur(18px) saturate(1.3);
            backdrop-filter:blur(18px) saturate(1.3);
    border:1px solid rgba(245,239,228,.13);
    box-shadow:0 20px 54px -20px rgba(0,0,0,.75);
    opacity:0;visibility:hidden;translate:0 -6px;
    transition:opacity .2s,translate .2s,visibility .2s;
  }
  .dock .menu > li:hover > .sub-menu,
  .dock .menu > li:focus-within > .sub-menu{opacity:1;visibility:visible;translate:0}

  /* Passé six entrées — les douze destinations — le dépliant se met sur deux
     colonnes : en une seule, la liste descendait plus bas que l'écran. Le
     sélecteur compte les enfants, donc une ville ajoutée ne demande rien. */
  .dock .menu .sub-menu:has(li:nth-child(7)){
    display:grid;grid-template-columns:repeat(2,minmax(148px,1fr));
    gap:2px 6px;min-width:330px;
  }

  /* Onze pixels de vide séparent le libellé du dépliant : sans ce pont, la
     souris les traverse et le menu se referme avant d'être atteint. */
  .dock .menu .menu-item-has-children::before{
    content:"";position:absolute;left:0;right:0;top:100%;height:12px;
  }
}

/* En dessous, la barre défile déjà horizontalement : le dépliant y serait
   rogné. Les trois pages se rangent alors à la suite de leur parent — la
   liste est plus longue, mais tout reste atteignable au doigt. */
@media(max-width:999px){
  .dock .menu .menu-item-has-children{display:flex;align-items:center;gap:2px}
}

.dock__cta{
  flex:none;white-space:nowrap;
  padding:10px 20px;border-radius:999px;
  background:var(--fluo);color:var(--btn-ink);
  font-weight:500;font-size:.84rem;letter-spacing:.01em;
  transition:filter .25s,transform .25s;
}
.dock__cta:hover{filter:brightness(1.07);transform:translateY(-1px)}

/* ---------- WhatsApp, à côté du devis ----------
   Deux pastilles pleines côte à côte donneraient deux boutons principaux, donc
   aucun : celui-ci reprend le fond translucide du burger et laisse le devis
   seul en pleine lumière. Il suit donc la couche éditoriale sans y être
   redéclaré — c'est le CTA du devis qui y change d'aplat, pas lui.
   Pas de vert WhatsApp non plus : la barre est noir et crème, et cette marque
   n'est pas la nôtre à afficher. */
.dock__wa{
  flex:none;display:flex;align-items:center;gap:8px;white-space:nowrap;
  padding:10px 16px;border-radius:999px;
  background:rgba(245,239,228,.08);color:var(--creme);
  font-weight:500;font-size:.84rem;letter-spacing:.01em;
  transition:background .25s,transform .25s;
}
.dock__wa:hover{background:rgba(245,239,228,.16);transform:translateY(-1px)}
.dock__wa-icone{flex:none;width:17px;height:17px;fill:currentColor}

/* ---------- le dépliant du téléphone ----------
   Six entrées ne tiennent pas dans une barre de 380 pixels : elles défilaient
   horizontalement, cinq cents pixels de liens hors champ, sans rien pour le
   laisser deviner. On les replie donc au-dessus de la barre, et le bouton les
   ouvre. La case à cocher porte l'état : pas de JavaScript, donc rien à casser,
   et le menu reste utilisable si le script ne charge pas. */
.dock__bascule{position:absolute;opacity:0;pointer-events:none}
.dock__burger{display:none}

@media(max-width:900px){
  .dock{
    width:calc(100vw - 2 * clamp(12px,2vw,24px));
    padding:7px 7px 7px 14px;gap:6px;
    justify-content:space-between;
  }
  .dock__brand{display:none}

  .dock__burger{
    display:flex;flex-direction:column;justify-content:center;gap:4px;
    flex:none;width:42px;height:42px;padding:0 11px;
    border-radius:999px;cursor:pointer;
    background:rgba(245,239,228,.08);
  }
  .dock__burger span{
    display:block;height:1.5px;background:var(--creme);border-radius:2px;
    transition:translate .25s,rotate .25s,opacity .2s;
  }
  .dock__bascule:focus-visible + .dock__burger{outline:2px solid var(--fluo);outline-offset:2px}

  /* Le bouton devient une croix quand le panneau est ouvert. */
  .dock__bascule:checked + .dock__burger span:nth-child(1){translate:0 5.5px;rotate:45deg}
  .dock__bascule:checked + .dock__burger span:nth-child(2){opacity:0}
  .dock__bascule:checked + .dock__burger span:nth-child(3){translate:0 -5.5px;rotate:-45deg}

  /* Le panneau tombe SOUS la barre : la couche éditoriale pose le dock en haut
     de l'écran, un dépliant vers le haut sortirait donc du cadre. */
  .dock__liens{
    position:absolute;left:0;right:0;top:calc(100% + 10px);
    overflow:hidden;margin:0;padding:0;border-left:0;
    -webkit-mask-image:none;mask-image:none;
    border-radius:22px;
    background:rgba(14,11,8,.96);
    -webkit-backdrop-filter:blur(18px) saturate(1.3);
            backdrop-filter:blur(18px) saturate(1.3);
    border:1px solid rgba(245,239,228,.13);
    box-shadow:0 20px 54px -20px rgba(0,0,0,.75);
    opacity:0;visibility:hidden;translate:0 -8px;
    transition:opacity .22s,translate .22s,visibility .22s;
  }
  .dock__bascule:checked ~ .dock__liens{opacity:1;visibility:visible;translate:0}

  /* Le panneau ne dépasse jamais l'écran : au-delà, il défile. Douze
     destinations sous « Destinations » le remplissent vite. */
  .dock__liens{max-height:calc(100svh - 130px);overflow-y:auto;overscroll-behavior:contain}
  .dock .menu{flex-direction:column;align-items:stretch;gap:0;padding:8px;font-size:.95rem}
  .dock .menu a{padding:13px 16px;border-radius:14px}

  /* Les sous-entrées se rangent sous leur parent, décalées : la hiérarchie se
     lit, et tout reste atteignable au doigt. */
  .dock .menu .menu-item-has-children{display:block}
  .dock .menu .sub-menu{flex-direction:column;gap:0;padding-left:14px}
  .dock .menu .sub-menu a{font-size:.88rem;color:var(--creme-dim)}

  /* ---------- les douze destinations ----------
     En colonne, elles occupaient douze lignes : le menu devenait un rouleau
     qu'on parcourt au pouce sans rien voir d'autre. En deux colonnes, la liste
     tient en six rangées, s'embrasse d'un regard, et les entrées suivantes du
     menu redeviennent visibles sans défiler.

     Le sélecteur compte les enfants — au-delà de six, on passe en grille. Les
     trois entrées d'« Évènements » gardent donc leur colonne, et une ville
     ajoutée au catalogue ne demande rien. */
  .dock .menu .sub-menu:has(li:nth-child(7)){
    display:grid;grid-template-columns:1fr 1fr;
    gap:2px;padding:2px 4px 6px 10px;
  }
  .dock .menu .sub-menu:has(li:nth-child(7)) a{
    padding:11px 12px;border-radius:12px;
    background:rgba(245,239,228,.05);
    text-align:center;
    /* Un nom de ville ne se coupe pas : « Chamonix » sur deux lignes ferait
       sauter la hauteur d'une rangée sur deux. */
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .dock .menu .sub-menu:has(li:nth-child(7)) a:hover,
  .dock .menu .sub-menu:has(li:nth-child(7)) a:focus-visible{
    background:rgba(245,239,228,.12);color:var(--creme);
  }

  /* La tête de silo se détache de ses villes : c'est un lien vers la page qui
     les rassemble, pas la première d'entre elles. */
  .dock .menu .menu-item-has-children:has(.sub-menu li:nth-child(7)) > a{
    font-weight:600;letter-spacing:.04em;
  }

  .dock__cta{padding:11px 17px;font-size:.84rem}

  /* Le libellé tombe : la barre n'a plus la place de deux mots à côté du devis,
     et le pictogramme est assez connu pour tenir seul. Le bouton prend alors le
     gabarit du burger, 42 pixels de côté — la cible reste au-dessus des 44 que
     recommande le WCAG une fois le padding de la barre compté. */
  .dock__wa{padding:0;width:42px;height:42px;justify-content:center}

  /* `display:none` sans remords : le nom accessible du lien vient de son
     aria-label, pas de ce libellé — le lecteur d'écran annonce la même chose aux
     deux tailles. */
  .dock__wa-libelle{display:none}
}

@media(max-width:380px){
  .dock__cta{padding:11px 13px;font-size:.8rem}
}

@media(prefers-reduced-motion:reduce){
  .dock__liens,.dock__burger span{transition:none}
}
@media(prefers-reduced-motion:reduce){
  .dock .menu a,.dock__cta,.dock__wa,.dock .menu .sub-menu{transition:none}
  .dock__cta:hover,.dock__wa:hover{transform:none}
}

/* ============================================================
   HERO — le statement
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:flex;
  align-items:center;justify-content:center;text-align:center;
  overflow:hidden;background:var(--noir);color:var(--creme);--focus:var(--fluo);
}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;animation:kb 28s ease-in-out infinite alternate}
.hero__scrim{
  position:absolute;inset:0;z-index:2;
  background:
    radial-gradient(120% 92% at 50% 46%,rgba(8,6,3,.56),rgba(8,6,3,.86) 78%),
    linear-gradient(0deg,rgba(8,6,3,.55),rgba(8,6,3,.2) 46%,rgba(8,6,3,.45) 100%);
}
.hero__mid{position:relative;z-index:5;padding:0 var(--pad);max-width:1200px}

.statement{
  margin:0;font-family:var(--cond);font-weight:900;font-stretch:condensed;
  text-transform:uppercase;letter-spacing:-.015em;
  color:var(--fluo);font-size:clamp(3.2rem,12.6vw,9rem);
  /* Capitales accentuées françaises : sous .94, les É percutent la ligne du dessus. */
  line-height:.94;
  text-shadow:0 4px 44px rgba(0,0,0,.45);
}
.statement span{display:block}
.statement .out{color:transparent;-webkit-text-stroke:2px var(--fluo)}
@media(max-width:600px){.statement .out{-webkit-text-stroke-width:1.3px}}

.hero__lede{
  margin:32px auto 0;max-width:44ch;color:var(--creme);
  font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.6;
}

/* --- La cover d'une page maîtresse ---------------------------------------
   Même entrée que l'accueil, en plus bas : sous une cover de catalogue il y a
   une liste, et le premier écran doit la laisser deviner. Le statement descend
   d'un cran pour absorber les titres longs (« Team-building »).               */

.hero--page{min-height:clamp(460px,74svh,760px)}

/* La cover d'un article de destination porte le titre rédigé — plus long qu'un
   statement de tête de silo, qui tient en trois mots. On desserre donc l'échelle
   plutôt que de raccourcir le titre : ces douze titres sont écrits pour le
   référencement, on ne les taille pas pour la mise en page. */
.hero--article .statement{font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.06}
.hero--article .statement span{display:block}
.hero--article .hero__lede{max-width:46ch}
.hero--page .statement{font-size:clamp(2.5rem,8.6vw,6.6rem)}
.hero--page .hero__lede{max-width:52ch}

.hero__kicker{
  margin:0 0 22px;font-family:var(--mono);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--creme-dim);
}

.hero__ancres{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin:30px 0 0;padding:0;list-style:none;
}
.hero__ancres a{
  display:inline-flex;align-items:center;gap:9px;padding:9px 16px;
  border:1px solid var(--line-n-2);border-radius:999px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--creme);
  transition:border-color .3s,color .3s;
}
.hero__ancres a:hover{border-color:var(--fluo);color:var(--fluo)}
.hero__ancres .x{transition:transform .3s}
.hero__ancres a:hover .x{transform:translateY(3px)}

/* ============================================================
   TÊTES DE SECTION
   ============================================================ */
.head{margin-bottom:clamp(36px,5vw,60px)}
.h-sec{
  margin:0;font-family:var(--cond);font-weight:900;font-stretch:condensed;
  text-transform:uppercase;letter-spacing:-.01em;line-height:.98;
  font-size:clamp(1.9rem,4.6vw,3.4rem);max-width:16ch;
}
/* Le plafond de 16 caractères coupe les titres longs en deux, ce qui est presque
   toujours ce qu'on veut. Presque : « Ils nous font confiance » tient sur une
   ligne, et doit y rester. */
.h-sec--ligne{max-width:none}
.head__link{
  display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  font-size:.82rem;font-weight:400;color:var(--ink);
  border-bottom:1px solid var(--line-p-2);padding-bottom:5px;
  transition:border-color .3s;
}
.head__link:hover{border-color:var(--ink)}
.head__link .x{transition:transform .3s}
.head__link:hover .x{transform:translateX(5px)}

/* Sur un bandeau noir, l'encre du lien disparaît dans le fond. */
.band--noir .head__link{color:var(--creme);border-color:var(--line-n-2)}
.band--noir .head__link:hover{color:var(--fluo);border-color:var(--fluo)}

/* ============================================================
   CARTES
   ============================================================ */
.cards{display:grid;gap:18px;list-style:none;margin:0;padding:0}
.cards--4{grid-template-columns:repeat(4,1fr)}
.cards--3{grid-template-columns:repeat(3,1fr)}
/* Quatre cartes → 2 × 2, jamais trois et une orpheline. */
.cards--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.cards--4{grid-template-columns:repeat(2,1fr)}.cards--3{grid-template-columns:1fr}}
@media(max-width:700px){.cards--2{grid-template-columns:1fr}}
@media(max-width:520px){.cards--4{grid-template-columns:1fr}}

.card{display:block}
/* `display:block` est indispensable : sur un <span> inline, ni `aspect-ratio`
   ni `overflow` ne s'appliquent, et les cartes se désalignent dès que les
   images n'ont pas toutes le même ratio naturel. */
.card__shot{display:block;overflow:hidden;background:var(--noir-2)}
.card__shot img{width:100%;height:100%;object-fit:cover}
.card--tall .card__shot{aspect-ratio:3/4}
.card--wide .card__shot{aspect-ratio:3/2}

.card__label{
  display:flex;align-items:baseline;gap:10px;margin:14px 0 0;
  font-size:1.02rem;font-weight:400;letter-spacing:-.005em;
}
.card__label .x{margin-left:auto;color:var(--ink-2);transition:transform .3s,color .3s}
.card:hover .card__label .x{transform:translateX(5px);color:var(--ink)}
.card__note{display:block;margin:6px 0 0;font-size:.85rem;line-height:1.5;color:var(--ink-2)}
/* Même raison que .head__link : sur le noir, l'encre secondaire s'éteint. */
.band--noir .card__note,
.band--noir .journal .card__date{color:var(--creme-dim)}

.journal .card__shot{aspect-ratio:16/10}
.journal .card__label{display:block;font-size:.98rem}
.journal .card__note{margin-top:4px}

/* Une carte sans visuel n'a plus rien pour se délimiter : dix titres de suite
   dans une grille à trois colonnes se lisent comme un seul pavé de texte, et
   l'œil ne sait plus où finit un article et où commence le suivant. On lui rend
   un filet — le même geste que .regions — et de l'air pour le respirer.
   Les cartes illustrées, elles, se délimitent par leur image : on ne leur en
   met pas. */
.journal .card:not(:has(.card__shot)){
  padding-top:18px;border-top:1px solid var(--line-p);
}
.band--noir .journal .card:not(:has(.card__shot)){border-color:var(--line-n)}
/* La grille se resserre quand elle porte des images ; sans elles, les colonnes
   ont besoin d'une gouttière plus franche pour ne pas se toucher. */
.journal:has(.card:not(:has(.card__shot))){gap:clamp(26px,3vw,44px) clamp(30px,3.5vw,56px)}
.journal .card__date{
  display:block;margin-top:10px;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}

/* ============================================================
   LES FORMULES
   La grille est celle des réalisations (.reas / .rea) : une
   vignette de formule et une vignette de réalisation sont le
   même objet pour le lecteur. Rien à redéfinir ici, sinon
   l'air sous le chapô de section.
   ============================================================ */
.formules__intro{margin-top:clamp(20px,2.4vw,30px)}

/* ---------- la page d'une formule ---------- */
/* Le rythme du thème est calibré pour des pages de deux ou trois sections :
   jusqu'à 240 px entre deux bandes, plus 120 px sous chaque bloc de prose.
   Une formule en empile sept, et l'addition fait un tunnel — on descend plus
   qu'on ne lit. On resserre, et ici seulement : le reste du site garde son air. */
.formule-page .band{padding:clamp(44px,5vw,76px) 0}
.formule-page .prose{padding-bottom:0}
.formule-page .dest-chapo{padding-top:clamp(26px,3vw,42px)}
.formule-page .acces{margin-top:clamp(28px,3.4vw,44px)}
.formule-page .head{margin-bottom:clamp(18px,2vw,28px)}

/* La colonne de lecture. 66 caractères laissent la moitié droite de l'écran
   vide sur une page qui, contrairement aux articles, n'a pas de rail latéral
   pour l'occuper. Le chapô va plus loin encore : c'est une accroche, elle tient
   sur quatre lignes et gagne à les faire longues. */
.formule-page .measure{max-width:86ch}
.formule-page .dest-chapo{max-width:92ch}
.formule-page .dest-chapo p{font-size:clamp(1.06rem,1.4vw,1.22rem);line-height:1.62}

/* « À qui elle s'adresse » vit dans la bande du chapô : ces deux blocs
   répondent à la même question, les séparer par une bande entière était une
   respiration de trop. */
.formule-qui{margin-top:clamp(38px,4.6vw,66px)}
.formule-qui .h-sec{margin-bottom:clamp(16px,1.8vw,26px)}

/* Les journées : le déroulé à gauche, ses apartés à droite plutôt qu'en
   dessous. La page prend enfin toute sa largeur, et la colonne verticale
   raccourcit d'autant — les deux reproches se règlent d'un même geste. */
.formule-page .prog__jour{padding-bottom:clamp(26px,3.2vw,44px)}
@media(min-width:1040px){
  .formule-page .prog__jour{
    display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    gap:clamp(28px,3vw,56px);align-items:start;
  }
  .formule-page .prog__titre{grid-column:1/-1}
  .formule-page .prog__deroule,
  .formule-page .prog__zooms{max-width:none}
  .formule-page .prog__zooms{margin-top:0}
}

/* L'appel à l'action des cartes. Il n'existe que sur les formules : une carte de
   réalisation n'a rien à vendre, une carte de formule si. Le survol de N'IMPORTE
   QUELLE partie de la carte le fait avancer — c'est ce qui donne à la carte
   entière son air cliquable, sans avoir à la transformer en un seul gros lien. */
.rea__cta{
  margin:16px 0 0;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;
}
.rea__cta a{
  display:inline-flex;align-items:baseline;gap:9px;
  color:var(--ink);border-bottom:1px solid var(--line-p-2);padding-bottom:5px;
  transition:border-color .3s;
}
.rea__cta .x{transition:transform .3s}
.rea:hover .rea__cta a{border-color:var(--ink)}
.rea:hover .rea__cta .x{transform:translateX(5px)}

/* Le titre se surligne au survol de la carte entière, comme les liens de l'index
   des séminaires : même geste, il doit se reconnaître. Réservé aux formules —
   la page Réalisations garde son titre sobre. */
.formules .rea__titre a{
  background:linear-gradient(var(--fluo),var(--fluo));
  background-size:0 32%;background-position:0 92%;background-repeat:no-repeat;
  transition:background-size .38s cubic-bezier(.2,.75,.2,1);
  padding:0 .08em;margin-left:-.08em;
}
.formules .rea:hover .rea__titre a{background-size:100% 32%}

@media(prefers-reduced-motion:reduce){
  .rea__cta a,.rea__cta .x,.formules .rea__titre a{transition:none}
}

/* ============================================================
   TUILES DES VILLES
   Les ciels sont pâles : le texte reste en encre, posé sur un voile clair.
   Le fluo n'apparaît que comme aplat de bouton.
   ============================================================ */
/* Le titre et son accroche forment un seul bloc : la respiration de `.head`,
   taillée pour séparer un titre d'une grille, les faisait lire comme deux
   éléments sans rapport. On la reporte sous l'accroche, avant les tuiles. */
.destinations .head{margin-bottom:0}
.destinations > .wrap > .page-lede{
  margin:clamp(10px,1.2vw,16px) 0 clamp(30px,4vw,48px);
}
/* Pleine largeur, alors que la grille est posée dans un `.wrap` centré :
   on ressort de la boîte de contenu (50 % de celle-ci) jusqu'aux bords du viewport. */
/* Presque pleine largeur : on ressort de la boîte de contenu jusqu'aux bords du
   viewport, moins une marge pour que les photos ne touchent pas le bord.
   La colonne latérale ayant disparu, la marge redevient symétrique. */
.tuiles{
  --marge:clamp(16px,1.6vw,24px);
  position:relative;
  width:calc(100vw - 2 * var(--marge));
  margin-inline:calc(50% - 50vw + var(--marge));
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
  list-style:none;padding:0;
}
/* Le nombre de colonnes se règle au cas par cas : deux par défaut (4 villes →
   2 × 2), `tuiles--3` pour trois (6 villes → 3 × 2). */
.tuiles--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.tuiles--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.tuiles,.tuiles--3{grid-template-columns:1fr}}

/* Carrées. Les photos sources sont en 1:1, `cover` n'a donc rien à recadrer. */
.tuile{
  position:relative;isolation:isolate;overflow:hidden;
  aspect-ratio:1/1;
  background:var(--noir-2);
}
.tuile__img{position:absolute;inset:0;z-index:0}
.tuile__img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.tuile:hover .tuile__img img{transform:scale(1.035)}

/* Le voile n'assombrit pas : il éclaircit, pour que l'encre tienne sur le ciel.
   Mesuré au pire pixel derrière le texte : sans lui, l'encre tombait à 3:1. */
.tuile{
  --tuile-ink:var(--ink);
  --tuile-dim:var(--ink);
  --tuile-bord:var(--line-p-2);
  --tuile-inverse:var(--paper);
}
.tuile__voile{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(253,252,250,.9),rgba(253,252,250,.62) 34%,rgba(253,252,250,0) 68%);
}

/* Une photo sombre (Bordeaux : 92/255 derrière le titre) renverse tout : l'encre
   y disparaîtrait, et un voile clair détruirait la nuit. */
.tuile--sombre{
  --tuile-ink:var(--creme);
  --tuile-dim:var(--creme-dim);
  --tuile-bord:var(--line-n-2);
  --tuile-inverse:var(--btn-ink);
  --focus:var(--fluo);
}
.tuile--sombre .tuile__voile{
  background:linear-gradient(180deg,rgba(8,6,3,.78),rgba(8,6,3,.42) 36%,rgba(8,6,3,0) 70%);
}

/* Un contre-jour (Marseille) est sombre EN MOYENNE mais garde un ciel brûlé
   derrière l'accroche : le voile courant l'y laissait à 3,7:1. On l'appuie, et
   on le fait descendre plus bas — la ligne d'accroche vit sous le titre. */
.tuile--voile-fort .tuile__voile{
  background:linear-gradient(180deg,rgba(8,6,3,.9),rgba(8,6,3,.68) 34%,rgba(8,6,3,.28) 58%,rgba(8,6,3,0) 78%);
}

/* Le lien de fond couvre la tuile ; il est masqué aux lecteurs d'écran,
   qui n'entendent que les deux boutons. */
.tuile__lien{position:absolute;inset:0;z-index:2}
.tuile__lien:focus-visible{outline:2px solid var(--focus);outline-offset:-4px}

.tuile__contenu{
  position:relative;z-index:3;
  padding:clamp(24px,2.6vw,40px);
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  pointer-events:none;                 /* on laisse passer le clic vers le lien de fond */
}
.tuile__contenu a{pointer-events:auto} /* … sauf sur les vrais boutons */

.tuile__titre{
  margin:0;font-family:var(--cond);font-weight:900;font-stretch:condensed;
  text-transform:uppercase;letter-spacing:-.01em;line-height:1;
  font-size:clamp(1.7rem,3.2vw,2.6rem);color:var(--tuile-ink);
}
/* Encre pleine, pas `--ink-2` : sur ces ciels, le gris chaud plafonnait à 2,6:1. */
.tuile__accroche{
  margin:0;max-width:30ch;font-size:.95rem;line-height:1.5;color:var(--tuile-dim);
}
.tuile__ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

.btn-fluo,
.btn-ligne{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 22px;border-radius:999px;
  font-size:.84rem;font-weight:500;letter-spacing:.01em;white-space:nowrap;
  transition:transform .3s,filter .3s,background .25s,color .25s,border-color .25s;
}
.btn-fluo{background:var(--fluo);color:var(--btn-ink);border:1px solid var(--fluo)}
.btn-fluo:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn-ligne{background:transparent;color:var(--tuile-ink,var(--ink));border:1px solid var(--tuile-bord,var(--line-p-2))}
.btn-ligne:hover{background:var(--tuile-ink,var(--ink));color:var(--tuile-inverse,var(--paper));border-color:var(--tuile-ink,var(--ink))}

@media(prefers-reduced-motion:reduce){
  .tuile__img img,.btn-fluo,.btn-ligne{transition:none}
}

/* ============================================================
   RÉFÉRENCES — tous les logos sur la ligne
   ============================================================ */
.refs{padding-block:clamp(40px,5vw,72px)}
/* Pleine largeur : on ressort de la boîte de contenu, en gardant une respiration
   sur les bords pour que les logos ne les touchent pas.

   Flex, pas grid : le nombre de logos vient de PHP et peut changer. Une grille
   à colonnes fixes laisserait un orphelin calé à gauche dès que le compte ne
   tombe pas juste ; en flex, le reliquat se centre sous la ligne. */
.refs__row{
  list-style:none;padding:0;
  width:100vw;
  margin:clamp(26px,3vw,42px) calc(50% - 50vw) 0;
  padding-inline:clamp(20px,4vw,64px);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(14px,2vw,32px);
}
/* Chaque logo prend sa part de la ligne, sans jamais dépasser sa taille utile. */
.ref{
  display:flex;justify-content:center;
  flex:1 1 108px;min-width:0;max-width:168px;
}

/* La fenêtre qui masque le logo sortant et le logo entrant. */
.ref__slot{
  position:relative;display:block;width:100%;height:52px;
  overflow:hidden;
}
/* L'image occupe tout le créneau — sans quoi translateY(101 %) se calcule sur
   la hauteur de l'image et un logo bas (Thales) ne sortirait jamais du cadre.
   `contain` préserve les proportions, le padding rééquilibre l'optique. */
.ref__slot img{
  position:absolute;inset:0;box-sizing:border-box;
  width:100%;height:100%;object-fit:contain;
  opacity:.62;
  transition:transform .5s cubic-bezier(.2,.75,.2,1),opacity .5s ease;
}
/* Les blocs pleins (SNCF, Sixt) pèsent plus lourd à surface égale que les
   logotypes filaires. On les rentre légèrement. Le Bon Marché est déjà étroit :
   le rogner le rendrait illisible. */
.ref__slot img[data-logo="sncf"]{padding-block:7px}
.ref__slot img[data-logo="sixt"]{padding-block:5px}
.ref__slot img[data-logo="swiss-life"]{padding-block:3px}

/* Même précaution que pour l'aplat de la colonne : on déborde franchement,
   sinon l'arrondi sous-pixel laisse un liseré du logo contre le bord du clip. */
.ref__slot img.entre{transform:translateY(108%);opacity:0}
.ref__slot img.sort{transform:translateY(-108%);opacity:0}

/* Le flex-wrap se charge du repli ; on ne règle plus que la respiration et la
   base des logos, pour qu'ils ne descendent pas sous trois par ligne. */
@media(max-width:860px){
  .refs__row{gap:28px 22px}
  .ref{flex-basis:96px;max-width:150px}
}
@media(max-width:460px){
  .ref{flex-basis:100px;max-width:140px}
}

@media(prefers-reduced-motion:reduce){
  .ref__slot img{transition:none}
}

/* ============================================================
   CHIFFRES
   ============================================================ */
/* Pleine largeur de la boîte de contenu, cases égales. Le chiffre ne casse
   jamais, le libellé est plafonné pour rester une légende. */
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line-p);border-block:1px solid var(--line-p);
  list-style:none;margin:0;padding:0;
}
.stat{background:var(--paper);padding:clamp(24px,3vw,38px) clamp(22px,2.8vw,48px)}
.stat__n{
  display:block;font-family:var(--cond);font-weight:900;font-stretch:condensed;
  font-size:clamp(2.2rem,4.2vw,3.4rem);line-height:.9;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.stat__l{
  display:block;margin-top:12px;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
  max-width:18ch;
}
@media(max-width:640px){.stats{grid-template-columns:1fr}}

/* ============================================================
   PILIERS + MANIFESTE
   ============================================================ */
/* Le filet et la respiration au-dessus : c'est le même geste que .regions, la
   grille des garanties ne doit pas venir buter sur le chapô qui la présente.
   Sur fond noir, le filet change d'encre — sinon il disparaît. */
.pillars{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,56px);
  list-style:none;margin:clamp(44px,5.5vw,76px) 0 0;padding:clamp(40px,5vw,64px) 0 0;
  border-top:1px solid var(--line-p);
}
.band--noir .pillars{border-color:var(--line-n)}
@media(max-width:760px){.pillars{grid-template-columns:1fr}}
.pillar__k{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);
}
.pillar h3{
  margin:12px 0 10px;font-family:var(--cond);font-weight:900;font-stretch:condensed;
  text-transform:uppercase;font-size:1.35rem;letter-spacing:-.005em;
}
.pillar p{margin:0;font-size:.94rem;line-height:1.62;color:var(--ink-2);max-width:46ch}

.manifesto p{margin:0 0 20px;font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.72;color:var(--ink-2)}
.manifesto p:last-child{margin-bottom:0}
.manifesto strong{color:var(--ink);font-weight:400}

/* Un récit qui prend toute la largeur disponible. Passé ~1000 px, il se répartit
   sur deux colonnes : sur une boîte de 1200 px, une ligne pleine largeur ferait
   130 caractères, soit le double de ce que l'œil suit sans se perdre au retour
   à la ligne. Les colonnes rendent la largeur au bloc sans la rendre à la ligne. */
.manifesto--large{max-width:none}
@media(min-width:1000px){
  .manifesto--large{columns:2;column-gap:clamp(40px,5vw,80px)}
  /* Un paragraphe ne doit pas se couper d'une colonne à l'autre. */
  .manifesto--large p{break-inside:avoid}
}

/* ---------- l'édito : titre à gauche, texte à droite ----------
   La section ne réserve plus toute sa largeur à un seul bloc de texte :
   le titre et sa sortie tiennent la colonne de gauche, le manifeste la droite. */
.edito{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:clamp(32px,6vw,96px);align-items:start;
}
.edito .head{margin-bottom:0}
.edito .h-sec{max-width:12ch}
.edito .section-cta{justify-content:flex-start;margin-top:clamp(24px,3vw,44px)}
@media(max-width:860px){
  .edito{grid-template-columns:1fr;gap:28px}
  .edito .section-cta{margin-top:0}
}

/* ============================================================
   PREUVE
   ============================================================ */
.quote{text-align:center}
.quote blockquote{
  margin:0 auto;font-family:var(--cond);font-weight:900;font-stretch:condensed;
  text-transform:uppercase;line-height:1.02;letter-spacing:-.01em;
  font-size:clamp(1.7rem,4vw,3rem);max-width:18ch;
}
.quote cite{
  display:block;margin-top:28px;font-style:normal;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);
}
.clients{
  display:flex;flex-wrap:wrap;justify-content:center;gap:16px 44px;
  margin:clamp(40px,5vw,60px) 0 0;padding-top:32px;border-top:1px solid var(--line-p);
  list-style:none;
}
.clients li{font-weight:500;font-size:1rem;letter-spacing:.04em;color:var(--ink-2)}

/* ============================================================
   NOS ÉVÈNEMENTS — scène épinglée, mot relayé au scroll
   ============================================================ */
.evts{padding:0;overflow:clip}

/* ---------- la nappe de fond ----------
   Le mot du métier, répété en gris sur le blanc, sous les photos. Elle ne défile
   pas : la seule animation est son relais, quand le scroll fait passer la main
   au métier suivant.

   Sept lignes qui se partagent la hauteur de la scène — c'est la grille qui les
   répartit, pas la typo : le motif tient donc sur n'importe quel écran. */
.evts__fond{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  display:grid;grid-template-rows:repeat(var(--lignes,5),1fr);
}

.evts__ligne{
  display:flex;align-items:center;overflow:hidden;
  opacity:0;transform:translateY(30px);
  transition:opacity .55s ease,transform .8s cubic-bezier(.2,.75,.2,1);
  /* Les lignes se relaient de haut en bas : la nappe se lève en cascade plutôt
     que d'apparaître d'un bloc. C'est toute l'animation. */
  transition-delay:calc(var(--i,0) * 55ms);
}
.evts__fond.is-current .evts__ligne{opacity:1;transform:none}

/* La nappe sortante part vers le haut, comme le mot : même sens que le scroll.
   Mais elle part VITE, et sans décalage — la cascade est réservée à l'entrante.
   Étagée elle aussi, la sortante restait à l'écran près d'une seconde : les deux
   mots se lisaient l'un dans l'autre, et la nappe devenait une bouillie. */
.evts__fond.sort .evts__ligne{
  opacity:0;transform:translateY(-30px);
  transition-duration:.22s,.34s;
  transition-delay:0ms;
}

/* Le décalage de départ casse l'alignement en colonnes d'une ligne à l'autre. */
.evts__file{display:flex;flex:none;white-space:nowrap;margin-left:var(--dec,0)}

.evts__file span{
  display:block;padding-right:.3em;
  font-family:var(--cond);font-weight:900;font-stretch:condensed;
  text-transform:uppercase;letter-spacing:-.01em;line-height:1;
  font-size:min(19svh,16.5vw);
  /* Très gros, donc très pâle : à cette taille, l'encre couvre tant de surface
     que le moindre gris franc écraserait le mot central et la photo. Le motif
     doit s'apercevoir, pas se lire. */
  color:rgba(21,18,13,.045);
}
/* Une hauteur d'écran par métier : c'est la course de défilement. */
 /* 145svh par métier, et non 100 : à une hauteur d'écran par étape, une photo
   traversait l'écran deux à trois fois plus vite qu'on ne scrollait. */
.evts__piste{position:relative;height:calc(var(--etapes,3) * 145svh)}
.evts__scene{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;place-items:center;
}

/* ---------- photos ---------- */
.evts__photos{
  position:absolute;inset:0;z-index:1;pointer-events:none;
}
/* Aucune opacité : une photo hors de son passage est hors champ, pas
   transparente. C'est `overflow:hidden` sur la scène qui la coupe.
   Avant que le script ne prenne la main, seul le premier métier est posé —
   les autres se superposeraient à lui, tous à la même place. */
.evts__photos{visibility:hidden}
.evts__photos.is-current,
.evts--defile .evts__photos{visibility:visible}

.evts__photo{
  /* `top` est calculé par le script : la photo n'a pas de position de repos,
     elle est quelque part sur le tapis. */
  position:absolute;left:var(--x);top:0;
  width:var(--w);aspect-ratio:var(--r);
  margin:0;overflow:hidden;
  /* L'inclinaison est reprise par le script, qui la recompose avec la dérive.
     La poser ici sert l'état avant script, et le cas sans script. */
  transform:rotate(var(--rot,0deg));
  will-change:transform;
}
/* Deux plans, pas un. Le cadre dérive ; l'image dérive en sens inverse *dans*
   le cadre — c'est ce décalage qui fait la profondeur, une simple translation
   du bloc entier n'en donne aucune.
   Le zoom réserve la marge que ce contre-mouvement consomme : 1.16 laisse 8 %
   de débord de chaque côté, quand le contre-mouvement plafonne à 4,95 %
   (facteur 3 × vitesse max 1,65). Sans lui, un bord blanc apparaîtrait. */
.evts__photo img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.16);will-change:transform;
}

/* ---------- un bloc par métier ---------- */
/* Au bureau les trois blocs se superposent dans la scène ; seul le courant
   laisse passer les clics. Sur téléphone ils se déplient (voir plus bas). */
.evts__metier{
  position:absolute;inset:0;pointer-events:none;
  display:grid;place-items:center;
}

/* ---------- le mot ---------- */
.evts__centre{
  position:relative;z-index:2;width:100%;
  padding-inline:var(--pad);text-align:center;
  /* La barre flottante occupe le bas de l'écran : on remonte le bloc. */
  padding-bottom:var(--dock-h);
  display:grid;justify-items:center;align-content:center;
  row-gap:clamp(20px,3vh,40px);
}

.evts__mot{
  margin:0;
  font-family:var(--cond);font-weight:900;font-stretch:condensed;
  text-transform:uppercase;letter-spacing:-.02em;line-height:.94;
  /* Le plafond de largeur force « SOIRÉES D’ENTREPRISE », trop long, à passer
     sur deux lignes plutôt qu'à mordre sur les photos. Il ne peut pas descendre
     sous la largeur de « D’ENTREPRISE » seul, sinon le mot déborde du plafond
     au lieu de se couper. */
  /* « TEAM-BUILDINGS », le plus large sur une ligne, gouverne la gouttière
     latérale : chaque point de typo en moins, c'est autant de largeur gagnée par
     les photos. Le plafond de largeur, lui, ne peut pas descendre sous la
     largeur de « D’ENTREPRISE » seul — sinon le mot déborde au lieu de se
     couper, faute d'occasion de césure. */
  font-size:clamp(2.2rem,6.1vw,4.9rem);
  /* `min-content` cale la boîte sur le mot insécable le plus long : la boîte
     coïncide avec l'encre. Avec un `max-width`, « SOIRÉES D’ENTREPRISE » gardait
     151 px de vide de part et d'autre — de la gouttière volée aux photos.
     Effet de bord voulu : le titre se coupe à chaque espace. */
  width:min-content;margin-inline:auto;
  /* Sur papier, le mot est à l'encre. Le fluo n'est jamais du texte sur blanc
     (1,1:1) — il ne sert ici que d'aplat, sur le CTA. */
  color:var(--ink);
  opacity:0;transform:translateY(38px);
  transition:opacity .5s ease,transform .7s cubic-bezier(.2,.75,.2,1);
}
.evts__mot.is-current{opacity:1;transform:none}
/* Le mot sorti part vers le haut : le sens du scroll. */
.evts__mot.sort{transform:translateY(-38px)}

.evts__pied{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:18px;
  opacity:0;transform:translateY(20px);pointer-events:none;
  transition:opacity .5s ease .1s,transform .6s cubic-bezier(.2,.75,.2,1) .1s;
}
.evts__pied.is-current{opacity:1;transform:none;pointer-events:auto}

.evts__note{margin:0;max-width:46ch;color:var(--ink-2);line-height:1.6;font-size:clamp(.95rem,1.2vw,1.08rem)}
.evts__lien{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 26px;border-radius:999px;
  background:var(--fluo);color:var(--btn-ink);
  font-weight:500;font-size:.86rem;
  transition:transform .3s,filter .3s;
}
.evts__lien:hover{transform:translateY(-2px);filter:brightness(1.06)}
.evts__lien .x{transition:transform .3s}
.evts__lien:hover .x{transform:translateX(4px)}

/* ---------- jauge ---------- */
/* Dégagée au-dessus du dock : centrée comme lui, elle passait sinon
   intégralement derrière la pilule flottante. */
.evts__jauge{
  position:absolute;bottom:calc(var(--dock-h) + 20px);left:50%;translate:-50% 0;z-index:3;
  display:flex;gap:8px;list-style:none;margin:0;padding:0;
}
.evts__jauge li{
  width:26px;height:3px;border-radius:999px;background:rgba(21,18,13,.14);
  transition:background .4s,width .4s cubic-bezier(.2,.75,.2,1);
}
/* Encre, pas fluo : sur une piste claire le jaune pur ne se détache pas
   — même arbitrage que la jauge de la galerie. */
.evts__jauge li.is-current{width:46px;background:var(--ink)}

/* Sans mouvement : on déplie les trois métiers l'un sous l'autre. */
@media(prefers-reduced-motion:reduce){
  /* La nappe n'a plus de scène où se poser — et elle ne vaut que par son
     défilement, qu'on vient précisément de couper. */
  .evts__fond{display:none}
  .evts__piste{height:auto}
  .evts__scene{position:static;height:auto;display:block;padding-block:clamp(60px,9vw,120px)}
  .evts__photos{position:static;visibility:visible;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:28px}
  .evts__photo{position:static;width:auto;transform:none!important}
  .evts__photo img{transform:none!important}
  .evts__metier{position:static;pointer-events:auto}
  .evts__centre{display:block;padding-bottom:0}
  .evts__mot,.evts__pied{opacity:1;transform:none;pointer-events:auto}
  .evts__jauge{display:none}
}



/* ============================================================
   GALERIE DES RÉALISATIONS
   ============================================================ */
.realisations{overflow:hidden}
.realisations .head{margin-bottom:clamp(30px,4vw,48px)}

/* La galerie occupe toute la largeur de la page. */
.gal{position:relative;width:100%}
/* Fond transparent, et non `--noir-2` : l'écart entre les diapositives laissait
   voir un noir différent de celui de la bande. On laisse la bande transparaître. */
.gal__scene{position:relative;overflow:hidden;background:transparent}

/* Les diapositives voisines sont tranchées net par le bord de la scène : un
   court fondu adoucit la coupe, des deux côtés, symétriquement. */
.gal__scene::before,
.gal__scene::after{
  content:"";position:absolute;top:0;bottom:0;z-index:5;pointer-events:none;
  width:clamp(48px,7vw,120px);
}
.gal__scene::before{left:0;background:linear-gradient(90deg,var(--paper) 0 12px,transparent)}
.gal__scene::after{right:0;background:linear-gradient(270deg,var(--paper) 0 12px,transparent)}

/* Un vrai rail : les diapositives sont posées côte à côte, c'est la piste qui
   coulisse. Elles sont plus étroites que la scène, si bien qu'on aperçoit la
   précédente et la suivante de part et d'autre.

   `translateX` en pourcentage se rapporte à la largeur de la piste — qui vaut
   celle de la scène. D'où : on centre la diapositive courante, (100 % − largeur)/2,
   puis on recule d'autant de crans que son rang. */
/* Pleine largeur, la scène vaut le viewport. À 72 %, la diapositive courante
   commence à 14 % — soit 195 px dès 1392 px de large, où la colonne flottante
   s'arrête à 200 px. Le padding du contenu fait le reste. */
.gal{--gap:20px;--slide:72%}
.gal__track{
  list-style:none;margin:0;padding:0;
  display:flex;gap:var(--gap);
  transform:translateX(calc(
    (100% - var(--slide)) / 2
    - var(--i,0) * (var(--slide) + var(--gap))
  ));
  transition:transform .85s cubic-bezier(.32,.72,0,1);
  will-change:transform;
}
.gal__item{
  flex:0 0 var(--slide);position:relative;isolation:isolate;
  min-height:clamp(360px,38vw,500px);display:flex;
}
@media(max-width:900px){.gal{--slide:88%;--gap:12px}}
@media(max-width:600px){.gal{--slide:94%}}

.gal__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.gal__bg img{width:100%;height:100%;object-fit:cover}

/* Les voisines restent lisibles — elles doivent se voir — mais reculent d'un cran. */
.gal__item{opacity:.5;transition:opacity .85s ease}
.gal__item.is-current{opacity:1}
/* Leur contenu, lui, s'efface : deux boutons visibles à la fois brouilleraient la lecture. */
.gal__item:not(.is-current) .gal__contenu{opacity:0;transition:opacity .5s ease}

/* Les clones qui bordent le ruban ne sont que du décor : ni survol, ni détail. */
.gal__item--clone{pointer-events:none}
/* Sauf celui qui traverse le centre pendant le bouclage : il doit s'y montrer
   comme la diapositive qu'il figure — d'emblée, sans fondu, et sans se laisser
   éteindre par la règle ci-dessus, qu'il faut donc suivre dans la cascade. */
.gal__item--clone.est-vitrine{opacity:1;transition:none}
.gal__item--clone.est-vitrine .gal__contenu{opacity:1}
.gal__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    /* Le logo est passé en haut à droite : cet angle, jusque-là le plus clair de
       la diapositive, ne tenait que 2:1 sous un logo blanc. Il lui faut son voile. */
    radial-gradient(62% 68% at 100% 0%,rgba(8,6,3,.9),rgba(8,6,3,.55) 42%,transparent 78%),
    linear-gradient(0deg,rgba(8,6,3,.9) 4%,rgba(8,6,3,.18) 52%,rgba(8,6,3,.42) 100%),
    linear-gradient(90deg,rgba(8,6,3,.6),transparent 58%);
}

.gal__contenu{
  position:relative;z-index:2;width:100%;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(26px,3vw,44px) clamp(24px,3vw,48px);
}

/* `brightness(0) invert(1)` ramène au blanc quelle que soit la source — les PNG
   de assets/logos le sont déjà, les SVG non. Posé en haut à DROITE : c'est le
   coin que le voile assombrit le moins, d'où le renfort d'ombre portée — un logo
   blanc sur un ciel clair disparaîtrait.

   Le créneau est fixe, en largeur COMME en hauteur : d'une diapositive à
   l'autre le logo se pose au même endroit et dans la même boîte, quelles que
   soient ses proportions. `contain` fait le reste — un logotype allongé remplit
   la largeur, un blason carré remplit la hauteur, aucun ne déborde. */
.gal__logo{
  align-self:flex-end;
  width:clamp(148px,17vw,236px);height:clamp(52px,6.4vw,92px);
  object-fit:contain;object-position:right center;
  filter:brightness(0) invert(1) drop-shadow(0 2px 14px rgba(8,6,3,.55));opacity:.96;
}

.gal__bas{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:60ch}

.gal__meta{margin:0;font-size:clamp(1.15rem,2vw,1.6rem);font-weight:300;letter-spacing:-.01em;color:var(--creme)}
.gal__genre{
  display:block;margin-bottom:8px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fluo);
}

/* Le détail se déplie au survol ou au focus clavier. `grid-template-rows`
   anime une hauteur inconnue, ce que `max-height` ne sait pas faire proprement. */
.gal__detail{
  display:grid;grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .5s cubic-bezier(.2,.75,.2,1),opacity .4s ease;
}
.gal__detail > p{
  overflow:hidden;margin:0;
  font-size:.95rem;line-height:1.62;color:var(--creme-dim);max-width:56ch;
}
.gal__item:hover .gal__detail,
.gal__item:focus-within .gal__detail{grid-template-rows:1fr;opacity:1}

.gal__cta{
  display:inline-flex;align-items:center;gap:9px;margin-top:4px;
  padding:13px 24px;border-radius:999px;
  background:var(--fluo);color:var(--btn-ink);
  font-weight:500;font-size:.84rem;letter-spacing:.01em;
  transition:transform .3s,filter .3s;
}
.gal__cta:hover{transform:translateY(-2px);filter:brightness(1.06)}
.gal__cta .x{transition:transform .3s}
.gal__cta:hover .x{transform:translateX(4px)}

/* ---------- pastilles minutées ---------- */

@media(max-width:700px){
  .gal__logo{width:132px;height:26px}
}

@media(prefers-reduced-motion:reduce){
  .gal__item,.gal__bg img,.gal__detail,.gal__cta{transition:none}
  .gal__bg img{transform:scale(1.1)!important}
  /* Sans mouvement, le détail reste dépliable mais rien ne défile tout seul. */
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{position:relative;overflow:hidden;border-top:1px solid var(--line-n)}
.contact__bg{position:absolute;inset:0;z-index:0}
.contact__bg img{width:100%;height:100%;object-fit:cover}
/* Le contenu vit sur la colonne de gauche : on y appuie le voile,
   et on laisse la photo respirer à droite. */
.contact__scrim{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(90deg,rgba(8,6,3,.92) 0%,rgba(8,6,3,.8) 42%,rgba(8,6,3,.58) 100%),
    radial-gradient(130% 110% at 30% 50%,rgba(8,6,3,.5),rgba(8,6,3,.82));
}
.contact__inner{position:relative;z-index:5}
.contact h2{
  margin:0;font-family:var(--cond);font-weight:900;font-stretch:condensed;
  text-transform:uppercase;line-height:.98;letter-spacing:-.015em;
  font-size:clamp(2.2rem,5.6vw,4.2rem);color:var(--fluo);max-width:14ch;
}
.contact__lede{margin:22px 0 0;max-width:44ch;color:var(--creme-dim);line-height:1.6}

.notice{
  margin:26px 0 0;padding:14px 18px;max-width:52ch;
  border-left:2px solid var(--fluo);background:rgba(245,239,228,.06);
  font-size:.9rem;line-height:1.55;color:var(--creme);
}
.notice--erreur{border-left-color:#FF6B4A}

.form{margin:clamp(36px,5vw,56px) 0 0;display:grid;gap:26px 28px;grid-template-columns:1fr 1fr;max-width:680px}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--taupe);
}
.field .opt{text-transform:none;letter-spacing:0}
.field input,.field textarea{
  font:inherit;font-weight:300;color:var(--creme);
  background:transparent;border:0;border-bottom:1px solid var(--line-n-2);
  padding:8px 0;transition:border-color .3s;
}
.field textarea{resize:vertical;min-height:88px}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--fluo)}
.field input:focus-visible,.field textarea:focus-visible{outline:none}
.field input::placeholder,.field textarea::placeholder{color:var(--taupe);opacity:.7}

/* Le consentement : une case et sa phrase, alignées sur la première ligne.
   Elle échappe aux règles ci-dessus, qui étirent tout champ sur la largeur —
   une case à cocher de 680 px n'aurait aucun sens. */
.field--consent{gap:0}
.consent{
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  font-family:var(--sans);font-size:.82rem;line-height:1.55;
  letter-spacing:0;text-transform:none;color:var(--creme-dim);
}
.consent input{
  flex:none;width:16px;height:16px;margin:2px 0 0;
  accent-color:var(--fluo);cursor:pointer;
}
.consent a{color:inherit;border-bottom:1px solid currentColor}
.consent a:hover{color:var(--creme)}

/* piège à robots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.submit{
  grid-column:1/-1;justify-self:start;
  display:inline-flex;align-items:center;gap:10px;margin-top:8px;
  padding:15px 30px;border:0;border-radius:999px;cursor:pointer;
  background:var(--fluo);color:var(--btn-ink);
  font-family:var(--sans);font-weight:500;font-size:.86rem;letter-spacing:.01em;
  transition:transform .3s,filter .3s;
}
.submit:hover{transform:translateY(-2px);filter:brightness(1.06)}
.submit .x{transition:transform .3s}
.submit:hover .x{transform:translateX(4px)}

.contact__mail{
  display:inline-block;margin-top:26px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--taupe);
  border-bottom:1px solid transparent;transition:color .3s,border-color .3s;
}
.contact__mail:hover{color:var(--fluo);border-bottom-color:var(--fluo)}
@media(max-width:620px){.form{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.foot{
  position:relative;z-index:1;
  background:var(--noir);color:var(--taupe);--focus:var(--fluo);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  /* La barre flottante survole le pied de page : on lui réserve sa hauteur. */
  padding:30px var(--pad) calc(30px + var(--dock-h));border-top:1px solid var(--line-n);
  font-size:.74rem;letter-spacing:.03em;
}
.foot .brand{font-size:.8rem;color:var(--creme-dim)}
.foot a:hover{color:var(--fluo)}

/* ============================================================
   PAGES INTERNES / ARTICLES
   ============================================================ */
.page-head{padding:clamp(80px,10vw,140px) 0 clamp(32px,4vw,52px)}
.page-title{
  margin:0;font-family:var(--cond);font-weight:900;font-stretch:condensed;
  text-transform:uppercase;letter-spacing:-.015em;line-height:.98;
  font-size:clamp(2rem,5.4vw,4rem);max-width:18ch;
}
.page-meta{
  margin:20px 0 0;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
}
.page-lede{
  margin:24px 0 0;font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.7;color:var(--ink-2);
}

/* ---------- index des séminaires, groupé par région ---------- */
.regions{border-top:1px solid var(--line-p);margin-top:clamp(48px,6vw,80px)}
.region{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:clamp(20px,4vw,64px);
  padding:clamp(30px,4vw,52px) 0;border-bottom:1px solid var(--line-p);
}
@media(max-width:820px){.region{grid-template-columns:1fr;gap:22px}}

.region__nom{
  margin:0;font-family:var(--cond);font-weight:900;font-stretch:condensed;
  text-transform:uppercase;letter-spacing:-.008em;line-height:1;
  font-size:clamp(1.35rem,2.6vw,1.9rem);
}
.region__note{margin:12px 0 0;font-size:.92rem;line-height:1.55;color:var(--ink-2);max-width:34ch}
.region__liste{list-style:none;margin:0;padding:0;align-self:center}
.region__liste li + li{border-top:1px solid var(--line-p)}
.region__liste a{
  display:flex;align-items:baseline;gap:16px;padding:11px 0;
  font-size:1.02rem;font-weight:300;
}
.region__titre{
  background:linear-gradient(var(--fluo),var(--fluo));
  background-size:0 38%;background-position:0 88%;background-repeat:no-repeat;
  transition:background-size .38s cubic-bezier(.2,.75,.2,1);
  padding:0 .08em;margin-left:-.08em;
}
.region__liste a:hover .region__titre{background-size:100% 38%}
.region__liste .x{margin-left:auto;color:var(--ink-2);transition:transform .3s,color .3s}
.region__liste a:hover .x{transform:translateX(5px);color:var(--ink)}
@media(prefers-reduced-motion:reduce){.region__titre{transition:none}}


/* ---------- catalogue des team-buildings ---------- */
/* Les activités portent trois métadonnées, là où un séminaire n'a qu'un titre :
   la colonne de gauche cède de la place, sinon les valeurs se replient. */
.regions--catalogue .region{grid-template-columns:minmax(0,.58fr) minmax(0,2fr)}
@media(max-width:820px){.regions--catalogue .region{grid-template-columns:1fr}}
.acts{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.act{padding:18px 0;border-top:1px solid var(--line-p)}
.act:first-child{border-top:0}
.act__titre{
  margin:0 0 10px;font-size:1.05rem;font-weight:400;letter-spacing:-.005em;
}
/* Trois colonnes, pas un `flex-wrap` : replié librement, « Budget » passait à la
   ligne sur une carte et pas sur la suivante, et rien ne s'alignait d'une
   activité à l'autre. */
.act__meta{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.25fr) auto;
  gap:6px 30px;margin:0;align-items:baseline;
}
.act__meta > div{display:flex;align-items:baseline;gap:8px;min-width:0}
.act__meta dd{overflow-wrap:anywhere}
@media(max-width:640px){.act__meta{grid-template-columns:1fr}}
.act__meta dt{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);flex:none;
}
.act__meta dd{margin:0;font-size:.88rem;color:var(--ink-2);min-width:0}

/* Une échelle à trois crans. Le € éteint reste lisible comme absence, sinon on
   croit à un budget inconnu plutôt qu'à un budget bas. */
.budget{
  /* Un cran par <span> : sans cela les trois € se replient l'un sous l'autre
     dès que la colonne se resserre. */
  white-space:nowrap;letter-spacing:.06em;font-variant-numeric:tabular-nums;
}
.budget__on{color:var(--ink);font-weight:500}
.budget__off{color:var(--line-p-2)}

/* ---------- formats (évènements, éco-responsables) ---------- */
.formats{
  list-style:none;margin:clamp(36px,5vw,64px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line-p);border:1px solid var(--line-p);
}
.format{background:var(--paper);padding:clamp(24px,2.6vw,36px)}
.format__titre{
  margin:0 0 14px;
  font-family:var(--cond);font-weight:900;font-stretch:condensed;
  text-transform:uppercase;letter-spacing:-.005em;line-height:1.04;
  font-size:clamp(1.15rem,1.9vw,1.5rem);
}
.format__accroche{margin:0;font-size:.94rem;line-height:1.62;color:var(--ink-2)}

/* Sur bande noire, la grille inverse ses filets et ses fonds. */
/* Quatre formats → 2 × 2, jamais trois et un orphelin. */
.formats--2{grid-template-columns:repeat(2,1fr)}
.formats--noir{background:var(--line-n);border-color:var(--line-n)}
.formats--noir .format{background:var(--noir)}
.formats--noir .format__titre{color:var(--fluo)}
.formats--noir .format__accroche{color:var(--creme-dim)}

@media(max-width:900px){.formats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.formats{grid-template-columns:1fr}}

/* ---------- grille des réalisations ---------- */
.reas{
  list-style:none;padding:0;
  margin:clamp(40px,5vw,72px) auto 0;max-width:var(--wrap);
  padding-inline:var(--pad);
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,3.4vw,52px);
}
.rea{display:flex;flex-direction:column;gap:20px}
/* `display:block` : en `span` implicite, l'aspect-ratio et l'overflow n'auraient
   aucune prise, et les vignettes prendraient des hauteurs inégales. */
.rea__shot{display:block;overflow:hidden;aspect-ratio:3/2;background:var(--line-p)}
.rea__shot img{width:100%;height:100%;object-fit:cover}
.rea__logo{height:26px;width:auto;max-width:140px;object-fit:contain;object-position:left center}
.rea__genre{
  margin:14px 0 6px;font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2);
}
.rea__titre{
  margin:0 0 12px;
  font-family:var(--cond);font-weight:900;font-stretch:condensed;
  text-transform:uppercase;letter-spacing:-.008em;line-height:1.02;
  font-size:clamp(1.3rem,2.3vw,1.75rem);
}
.rea__detail{margin:0;font-size:.94rem;line-height:1.65;color:var(--ink-2)}
@media(max-width:760px){.reas{grid-template-columns:1fr}}

/* ---------- citation ---------- */
.citation{margin:0;max-width:52ch}
.citation__texte{margin:0;padding-left:clamp(18px,2vw,26px);border-left:2px solid var(--fluo)}
.citation__texte p{
  margin:0;color:var(--creme);
  font-size:clamp(1.1rem,2vw,1.5rem);font-weight:300;line-height:1.5;letter-spacing:-.01em;
}
.citation__source{
  margin-top:24px;padding-left:clamp(20px,2vw,28px);
  display:flex;flex-direction:column;gap:4px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--taupe);
}
.citation__source strong{color:var(--creme);font-weight:500}

/* ---------- mur de logos (page réalisations) ---------- */
/* Statique, contrairement au bandeau de l'accueil : ici on les montre tous. */
.mur{
  list-style:none;margin:clamp(28px,3vw,44px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:clamp(24px,3vw,48px);align-items:center;
}
/* Le mur est sur fond papier : `brightness(0)` repasse en noir les fichiers
   blancs du bandeau. Créneau identique pour tous — c'est une grille, on n'y
   applique donc pas la correction optique du bandeau : chaque logo dispose de
   la même case et se contient dedans. */
.mur img{
  height:34px;width:100%;object-fit:contain;
  filter:brightness(0);opacity:.72;transition:opacity .3s;
}
.mur img:hover{opacity:1}
@media(prefers-reduced-motion:reduce){.mur img{transition:none}}

.prose{padding-bottom:clamp(64px,9vw,120px)}
.prose p,.prose ul,.prose ol{font-size:1.02rem;line-height:1.75;color:var(--ink-2);margin:0 0 22px}
.prose h2,.prose h3{
  font-family:var(--cond);font-weight:900;font-stretch:condensed;text-transform:uppercase;
  letter-spacing:-.005em;line-height:1.02;color:var(--ink);margin:48px 0 18px;
}
.prose h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.prose h3{font-size:1.25rem}
.prose a{color:var(--ink);box-shadow:inset 0 -.5em 0 var(--fluo);transition:box-shadow .25s}
.prose a:hover{box-shadow:inset 0 -1em 0 var(--fluo)}
.prose img{margin:32px 0}
.prose blockquote{
  margin:32px 0;padding-left:22px;border-left:2px solid var(--fluo);
  font-size:1.1rem;line-height:1.6;color:var(--ink);
}
.prose figcaption{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.prose :where(table){width:100%;border-collapse:collapse}
.prose-scroll{overflow-x:auto}

/* Deux colonnes égales, pas un flex en `space-between`.
   En flex, deux titres d'article — qui font facilement dix mots — se poussaient
   l'un l'autre sans largeur de référence : celui de gauche s'étalait, celui de
   droite se retrouvait comprimé et aligné à gauche, si bien qu'on ne voyait plus
   lequel était le précédent et lequel le suivant. La grille donne à chacun sa
   moitié, quel que soit son voisin, et le suivant se cale à droite.

   Elle tient aussi le cas où un seul lien existe (premier ou dernier article) :
   le <span> vide occupe sa colonne, et le lien restant ne traverse pas. */
.pager{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);
  margin-top:clamp(48px,6vw,80px);padding:clamp(28px,3.5vw,44px) 0 clamp(64px,9vw,110px);
  border-top:1px solid var(--line-p);
  font-size:.85rem;line-height:1.5;
}
.pager > span:last-child{text-align:right}
.pager a{
  display:inline-block;max-width:38ch;
  border-bottom:1px solid var(--line-p-2);padding-bottom:4px;
}
.pager a:hover{border-color:var(--ink)}
@media(max-width:640px){
  .pager{grid-template-columns:1fr;gap:18px}
  .pager > span:last-child{text-align:left}
  /* Une colonne : le <span> vide laisserait un trou avant le lien restant. */
  .pager > span:empty{display:none}
}

/* ============================================================
   MOTION — hero au chargement, corps au scroll
   ============================================================ */
@keyframes kb{from{transform:scale(1.03)}to{transform:scale(1.1)}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.rise{opacity:0;animation:rise .85s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.28s}.d4{animation-delay:.44s}

/* révélation mot à mot.
   Les paddings ménagent la place des accents : sans eux, les É se font
   rogner par l'overflow qui masque le mot avant qu'il ne monte. */
.split .w{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.14em;margin-bottom:-.14em;
  padding-top:.08em;margin-top:-.08em;
}
.split .w>i{
  display:inline-block;font-style:inherit;transform:translateY(118%);
  transition:transform .82s cubic-bezier(.2,.75,.2,1);transition-delay:var(--d,0ms);
}
.split.in .w>i{transform:translateY(0)}
.split .w.hl>i{
  background:linear-gradient(var(--fluo),var(--fluo));
  background-size:100% 40%;background-position:0 84%;background-repeat:no-repeat;
  padding:0 .06em;
}

.reveal{
  opacity:0;transform:translateY(26px);filter:blur(7px);
  transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1),filter 1s ease;
  transition-delay:var(--d,0ms);
}
.reveal.in{opacity:1;transform:none;filter:none}

.imgrise img{
  transform:scale(1.12);filter:blur(10px);
  transition:transform 1.3s cubic-bezier(.2,.7,.2,1),filter 1.3s ease;
}
.imgrise.in img{transform:scale(1);filter:none}
/* une fois révélée, l'image reprend une réponse courte au survol */
.card:hover .imgrise.in img{transform:scale(1.04);transition-duration:.7s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero__bg img{animation:none}
  .rise{animation:none;opacity:1}
  .sticky{transition:none}
  .split .w>i,.reveal,.imgrise img{
    transition:none!important;transform:none!important;filter:none!important;opacity:1!important;
  }
}

/* =========================================================================
   Les destinations, les régions, les réalisations
   —
   Ajoutées avec le CMS : ces pages n'existaient pas dans la première maquette,
   qui s'arrêtait aux hubs.
   ========================================================================= */

/* --- Le hero d'une destination -------------------------------------------
   Une photographie plein cadre, le titre posé dessus. Le voile n'est pas un
   effet : sans lui, l'encre crème passerait sur un ciel clair.               */

.dest-hero{
  position:relative;display:flex;align-items:flex-end;
  min-height:clamp(340px,58vh,620px);
  padding:calc(var(--pad) * 1.4) 0 calc(var(--pad) * 1.1);
  background:var(--noir);color:var(--creme);overflow:hidden;
}
.dest-hero__bg{position:absolute;inset:0}
.dest-hero__bg img{width:100%;height:100%;object-fit:cover}

/* Du noir en bas, rien en haut : le texte est en bas, et la photo doit
   respirer là où il n'y en a pas. */
.dest-hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(14,11,8,.86) 0%,rgba(14,11,8,.55) 38%,rgba(14,11,8,.12) 72%,rgba(14,11,8,0) 100%);
}
.dest-hero__inner{position:relative;width:100%}

.dest-hero__region{
  margin:0 0 14px;font-family:var(--mono);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--creme-dim);
}
.dest-hero__region a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-n-2);padding-bottom:2px}
.dest-hero__region a:hover{color:var(--fluo);border-color:var(--fluo)}

.dest-hero__titre{
  margin:0;font-family:var(--cond);font-weight:900;font-stretch:condensed;
  text-transform:uppercase;letter-spacing:-.015em;line-height:.94;
  font-size:clamp(2.3rem,6.4vw,5rem);max-width:14ch;
}
.dest-hero__baseline{
  margin:18px 0 0;max-width:44ch;font-size:clamp(1rem,1.5vw,1.2rem);
  line-height:1.5;color:var(--creme);
}
.dest-hero__duree{
  display:inline-block;margin:20px 0 0;padding:7px 14px;
  border:1px solid var(--line-n-2);border-radius:999px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--creme-dim);
}

/* Une région n'a pas de programme à annoncer : son hero est plus bas. */
.dest-hero--region{min-height:clamp(300px,44vh,480px)}

.dest-chapo{padding-top:clamp(48px,6vw,80px)}
.dest-chapo :first-child{margin-top:0}

/* --- Les repères d'accès --------------------------------------------------
   « 1 h 10 de vol depuis Paris ». Trois faits, alignés, sans ornement.       */

.acces{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1px;margin:clamp(40px,5vw,64px) 0 0;padding:0;list-style:none;
  background:var(--line-p);border:1px solid var(--line-p);
}
.acces__item{
  display:flex;flex-direction:column;gap:5px;
  padding:26px 24px;background:var(--paper);
}
.acces__icone{
  width:22px;height:22px;margin-bottom:6px;
  background:var(--ink);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
/* Les pictogrammes de l'ancien site étaient des PNG posés dans la médiathèque.
   Les redessiner en SVG les rend nets, colorables, et indépendants des uploads. */
.acces__icone--avion{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5a2.1 2.1 0 0 0-3-3L13 8 4.8 6.2a.5.5 0 0 0-.5.8l3.2 3.6-2.3 2.3-1.9-.4a.5.5 0 0 0-.5.8L5 16l2.7 2.2a.5.5 0 0 0 .8-.5l-.4-1.9 2.3-2.3 3.6 3.2a.5.5 0 0 0 .8-.5Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5a2.1 2.1 0 0 0-3-3L13 8 4.8 6.2a.5.5 0 0 0-.5.8l3.2 3.6-2.3 2.3-1.9-.4a.5.5 0 0 0-.5.8L5 16l2.7 2.2a.5.5 0 0 0 .8-.5l-.4-1.9 2.3-2.3 3.6 3.2a.5.5 0 0 0 .8-.5Z'/%3E%3C/svg%3E")}
.acces__icone--train{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='13' rx='3'/%3E%3Cpath d='M5 9h14M9 20l-2 2M15 20l2 2'/%3E%3Ccircle cx='9' cy='13' r='.6' fill='%23000'/%3E%3Ccircle cx='15' cy='13' r='.6' fill='%23000'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='13' rx='3'/%3E%3Cpath d='M5 9h14M9 20l-2 2M15 20l2 2'/%3E%3Ccircle cx='9' cy='13' r='.6' fill='%23000'/%3E%3Ccircle cx='15' cy='13' r='.6' fill='%23000'/%3E%3C/svg%3E")}
.acces__icone--calendrier{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
.acces__icone--duree{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E")}
.acces__icone--voiture,.acces__icone--bus,.acces__icone--bateau,.acces__icone--point{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E")}

.acces__titre{font-size:1rem;font-weight:500;line-height:1.3;letter-spacing:-.005em}
.acces__note{font-size:.84rem;line-height:1.45;color:var(--ink-2)}

/* --- Le programme, jour par jour -----------------------------------------
   Un filet vertical relie les jours : c'est un séjour, pas une liste.        */

.prog{
  margin:clamp(40px,5vw,64px) 0 0;padding:0;list-style:none;
  counter-reset:jour;
}
.prog__jour{
  position:relative;padding:0 0 clamp(40px,5vw,60px) clamp(28px,4vw,56px);
  border-left:1px solid var(--line-p-2);
}
.prog__jour:last-child{border-left-color:transparent;padding-bottom:0}

/* La pastille du jour, à cheval sur le filet. */
.prog__jour::before{
  content:"";position:absolute;left:-5px;top:9px;
  width:9px;height:9px;border-radius:50%;
  background:var(--ink);
}
.prog__titre{
  margin:0 0 16px;font-family:var(--mono);font-size:.74rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-2);
}
/* Une journée de formule porte un intitulé en plus de son rang (« Jour 2 —
   Travailler le matin, se dépenser l'après-midi »). Le rang reste l'étiquette
   mono ; l'intitulé passe dessous, en encre pleine, et c'est lui qu'on lit. */
.prog__intitule{
  display:block;margin-top:8px;font-family:var(--serif,inherit);font-weight:500;
  font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.16;letter-spacing:-.005em;
  text-transform:none;color:var(--ink);
}
.prog__deroule{max-width:62ch}
.prog__deroule :first-child{margin-top:0}

.prog__zooms{display:grid;gap:20px;margin-top:26px;max-width:62ch}

/* Un « zoom » est un aparté : il se distingue du déroulé sans le concurrencer. */
.zoom{
  padding:22px 24px;background:var(--creme);
  border-left:2px solid var(--ink);
}
.zoom__titre{
  margin:0 0 8px;font-size:.94rem;font-weight:600;letter-spacing:-.005em;
}
.zoom__texte{font-size:.92rem;line-height:1.6;color:var(--ink-2)}
.zoom__texte :first-child{margin-top:0}
.zoom__texte :last-child{margin-bottom:0}

/* --- La galerie ---------------------------------------------------------- */

.dest-gal{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2px;margin:0;padding:0;list-style:none;
}
.dest-gal li{overflow:hidden;background:var(--noir-2);aspect-ratio:4/3}
.dest-gal img{width:100%;height:100%;object-fit:cover}

/* --- Les idées cadeaux ---------------------------------------------------- */

.cadeaux{padding:28px 30px;border:1px solid var(--line-p-2)}
.cadeaux__titre{
  margin:0 0 14px;font-family:var(--mono);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-2);
}
.cadeaux__liste{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.cadeaux__liste li{
  position:relative;padding-left:18px;font-size:.95rem;line-height:1.5;
}
.cadeaux__liste li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:1px;background:var(--ink-2);
}

/* --- La fiche d'une activité ---------------------------------------------- */

.act__meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;margin:0 0 clamp(36px,4vw,52px);
  background:var(--line-p);border:1px solid var(--line-p);
}
.act__meta > div{padding:20px 22px;background:var(--paper)}
.act__meta dt{
  margin:0 0 5px;font-family:var(--mono);font-size:.68rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--ink-2);
}
.act__meta dd{margin:0;font-size:.98rem;line-height:1.4}

@media (max-width:640px){
  .prog__jour{padding-left:22px}
  .acces__item{padding:20px 18px}
}

/* =========================================================================
   L'OFFRE — ce que comprend un séminaire
   —
   Sous la cover des séminaires : ce que l'agence prend en charge, avant la
   liste des destinations. Le lecteur veut savoir ce qu'il achète avant de
   choisir où.
   ========================================================================= */

.offre{max-width:none}
.offre__intro{
  max-width:62ch;margin:0 0 clamp(40px,5vw,64px);
  font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.65;color:var(--ink-2);
}
.offre__intro strong{color:var(--ink);font-weight:400}

/* La grille est collée au chapô qui l'annonce : on l'en décolle. Le cadre fait
   déjà séparateur, inutile d'ajouter un filet par-dessus. */
.inclus{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin:clamp(40px,5vw,68px) 0 0;padding:0;list-style:none;
  background:var(--line-p);border:1px solid var(--line-p);
}
/* Quatre cartes → 2 × 2, pas trois colonnes et une case vide. */
.inclus--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.inclus,.inclus--2{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.inclus,.inclus--2{grid-template-columns:1fr}}

.inclus__item{
  background:var(--paper);padding:clamp(24px,2.8vw,34px);
  display:flex;flex-direction:column;gap:10px;
}
.inclus__num{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  color:var(--ink-2);
}
.inclus__titre{
  margin:0;font-size:1.06rem;font-weight:400;letter-spacing:-.005em;
  /* Le surlignage fluo, mais discret : trois mots, pas une phrase. */
  background:linear-gradient(var(--fluo),var(--fluo));
  background-size:0 38%;background-position:0 88%;background-repeat:no-repeat;
  transition:background-size .5s cubic-bezier(.2,.7,.2,1);
  display:inline;
}
.inclus__item:hover .inclus__titre{background-size:100% 38%}
.inclus__texte{margin:0;font-size:.9rem;line-height:1.6;color:var(--ink-2)}

/* Le rappel de ce qui n'est pas compris : une agence honnête le dit. */
/* Des phrases complètes, pas des mentions légales : le corps de texte
   courant, en retrait par la couleur et la taille — plus de mono minuscule. */
.offre__note{
  margin:clamp(28px,3vw,40px) 0 0;max-width:62ch;
  font-size:.92rem;line-height:1.65;color:var(--ink-2);
}

/* =========================================================================
   LES GUIDES
   —
   Le bas de tunnel : prix, rétroplanning, cahier des charges, fiscalité.
   Ce ne sont pas des actualités — on ne les date pas, on les classe.
   ========================================================================= */

.guides{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  margin:0;padding:0;list-style:none;
  background:var(--line-p);border:1px solid var(--line-p);
}
@media(max-width:820px){.guides{grid-template-columns:1fr}}

.guide{background:var(--paper);transition:background .35s}
.guide:hover{background:var(--noir);color:var(--creme)}

.guide__lien{
  display:flex;flex-direction:column;height:100%;
  padding:clamp(28px,3.2vw,44px);gap:14px;color:inherit;
}
.guide__kicker{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);transition:color .35s;
}
.guide:hover .guide__kicker{color:var(--fluo)}

.guide__titre{
  margin:0;font-family:var(--cond);font-weight:900;font-stretch:condensed;
  text-transform:uppercase;letter-spacing:-.01em;line-height:1.02;
  font-size:clamp(1.5rem,2.8vw,2.1rem);
}
.guide__chapo{
  margin:0;font-size:.92rem;line-height:1.65;color:var(--ink-2);
  transition:color .35s;
}
.guide:hover .guide__chapo{color:var(--creme-dim)}

.guide__pied{
  display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:22px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);transition:color .35s;
}
.guide:hover .guide__pied{color:var(--creme-dim)}
.guide__pied .x{margin-left:auto;font-family:var(--sans);transition:transform .3s}
.guide:hover .guide__pied .x{transform:translateX(6px)}

/* --- Le sommaire d'un guide ---------------------------------------------- */

.sommaire{
  margin:0 0 clamp(48px,6vw,72px);padding:clamp(24px,2.8vw,32px);
  border:1px solid var(--line-p);
}
.sommaire__titre{
  margin:0 0 16px;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
.sommaire ol{margin:0;padding:0;list-style:none;counter-reset:som}
.sommaire li{
  counter-increment:som;padding:9px 0;border-top:1px solid var(--line-p-2);
  font-size:.96rem;
}
.sommaire li:first-child{border-top:0}
.sommaire li::before{
  content:counter(som,decimal-leading-zero);margin-right:14px;
  font-family:var(--mono);font-size:.68rem;color:var(--ink-2);
}


/* =========================================================================
   NOS ÉVÈNEMENTS — scène épinglée, deux colonnes relayées au scroll
   —
   Gabarit : template-parts/evenements-colonnes.php.
   La scène épinglée d'origine (.evts, mot géant + convoyeur + nappe) reste dans
   la feuille : les deux partis coexistent, front-page.php choisit lequel il
   appelle.
   ========================================================================= */

.duos{padding:0;overflow:clip}

/* La course de défilement.

   Un RELAIS par passage d'un métier au suivant (--duo-glisse), et RIEN d'autre au
   bureau : pas de palier, pas de temps mort. On entre dans la section, ça défile
   jusqu'au bout, on en sort.

   Le relais vaut la hauteur de la photo PLUS le blanc qui la sépare de la
   suivante (--duo-ecart, en part de cette hauteur). C'est là tout le calcul : si
   le relais dure moins que la distance qu'il fait parcourir, la photo va plus
   vite que le doigt et l'œil lit une bascule, pas un défilement. Un pixel pour un
   pixel, donc — et la photo étant carrée dans une demi-largeur, sa hauteur vaut
   à peu près la moitié de la fenêtre.

   --duo-pause reste à zéro ici, mais la déclaration compte : c'est elle que le
   téléphone relève (voir plus bas), où le scroll s'accroche et réclame un endroit
   où se poser. Le script ne lit pas cette valeur, il déduit le palier de ce que
   la piste lui laisse une fois les relais logés.

   Le +100svh loge la scène elle-même : la piste doit être plus haute qu'elle
   d'exactement toute la course. Le script remesure la photo et se cale dessus ;
   ces valeurs-ci ne font que réserver la place. */
.duos__piste{
  --duo-ecart:.12;
  --duo-pause:0px;
  --duo-glisse:56vw;
  position:relative;
  height:calc(100svh + var(--etapes,3) * var(--duo-pause) + (var(--etapes,3) - 1) * var(--duo-glisse));
}
/* Les crans du scroll (voir evenements-colonnes.php) n'ont de sens que sur
   téléphone, où le snap est obligatoire. Ailleurs, ils n'existent pas. */
.duos__crans{display:none}
.duos__scene{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;place-items:center;
  /* La barre flottante mange le bas de l'écran : on remonte la scène. */
  padding-bottom:var(--dock-h);
}

/* Pleine largeur, deux colonnes, la gouttière des tuiles : la photo de droite
   tombe donc exactement là où tomberait la deuxième tuile de destination, et
   fait la même taille. */
.duos__cadre{
  --marge:clamp(16px,1.6vw,24px);
  width:calc(100vw - 2 * var(--marge));
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
  align-items:stretch;
}

/* ---------- la colonne de gauche ---------- */
/* Le rouleau des titres en haut, le texte en bas : c'est la photo carrée qui
   donne sa hauteur à la rangée, et `space-between` plaque le reste sur ses deux
   bords. */
.duos__gauche{
  display:flex;flex-direction:column;justify-content:space-between;gap:32px;
  /* La rangée déborde jusqu'aux marges de l'écran ; le texte, lui, doit
     retomber sur la colonne du site. */
  padding-left:calc(var(--pad) - var(--marge));
  padding-right:clamp(24px,3vw,56px);
  min-width:0;
}

/* ---------- le rouleau des titres ----------
   Le métier courant à l'encre, les suivants dessous, en transparence. Le rouleau
   monte à mesure qu'on défile : le courant sort par le haut, le suivant prend sa
   place. Il n'y a PAS de transition ici — c'est le script qui pose `--y` à chaque
   image, en suivant la course du scroll. Une transition doublerait le mouvement
   d'une inertie propre, et c'est précisément l'à-coup qu'on cherche à éviter.

   La translation est mesurée, non calculée : les titres n'ont pas tous la même
   hauteur (« ÉVÈNEMENTS D'ENTREPRISE » tient sur deux lignes), un cran fixe ne
   tomberait donc jamais juste. Voir reveal.js, mesurerDuos(). */
.duos__titres{
  /* Ce qui est monté au-dessus du courant est coupé net. */
  overflow:hidden;min-height:0;flex:1 1 auto;
}
.duos__rouleau{
  display:flex;flex-direction:column;
  gap:clamp(8px,1.2vh,20px);
  margin:0;padding:0;list-style:none;
  transform:translate3d(0,var(--y,0px),0);
  will-change:transform;
}
.duos__titre h2{
  margin:0;
  font-family:var(--cond);font-weight:900;font-stretch:condensed;
  text-transform:uppercase;letter-spacing:-.015em;line-height:.94;
  font-size:clamp(2.2rem,5.2vw,4.6rem);
  color:var(--ink);
  /* `--on` va de 0 (au loin) à 1 (le titre est le sujet) ; `--pale` est la
     valeur de l'attente — le titre n'est jamais éteint, il est pâle, et il
     prend son encre au fil du scroll. Le mobile relève ce plancher : sur fond
     sombre, 13 % ne se lit plus. */
  opacity:calc(var(--pale,.13) + (1 - var(--pale,.13)) * var(--on,0));
}
/* Sans script, le premier titre est déjà le sujet : le rendu ne dépend pas de lui. */
.duos__titre.is-current{--on:1}

/* ---------- le texte ---------- */
/* Empilés dans une seule cellule : ils se relaient, on n'en voit qu'un.

   ET IL NE BOUGE PAS. Aucune translation, ici : c'est la pièce fixe de la scène.
   Tout le reste défile — les photos, le rouleau des titres — et lui s'affiche,
   puis s'efface. Un paragraphe qui glisse pendant qu'on le lit ne se lit pas ;
   et le donner à lire est bien la raison d'être de cette colonne.

   L'opacité vient du scroll (`--on`), sans transition : elle suit la course comme
   le reste, elle ne se déclenche pas. Le script la mène à zéro AVANT que le texte
   suivant ne commence à paraître — jamais deux paragraphes en même temps. */
.duos__notes{display:grid;flex:none}
.duo__bas{
  grid-area:1/1;
  display:flex;flex-direction:column;align-items:flex-start;gap:26px;
  opacity:var(--on,0);
  pointer-events:none;
  will-change:opacity;
}
.duo__bas.is-current{--on:1;pointer-events:auto}

.duo__note{
  margin:0;max-width:34ch;
  font-size:clamp(1.15rem,1.75vw,1.6rem);line-height:1.5;
  color:var(--ink-2);
}
/* L'épaisseur sur les mots-clés. Le gris passe à l'encre : sans le changement de
   valeur, le gras seul ne se voit presque pas à ce corps. */
.duo__note strong{font-weight:600;color:var(--ink)}

.duo__lien{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 26px;border-radius:999px;
  background:var(--fluo);color:var(--btn-ink);
  font-weight:500;font-size:.86rem;
  transition:transform .3s,filter .3s;
}
.duo__lien:hover{transform:translateY(-2px);filter:brightness(1.06)}
.duo__lien .x{transition:transform .3s}
.duo__lien:hover .x{transform:translateX(4px)}

/* ---------- les photos ---------- */
/* Le traitement des tuiles : carrée, plein cadre, `cover`. Sans leur voile —
   rien n'est écrit dessus, il n'y a pas d'encre à protéger. */
.duos__droite{display:grid;min-width:0}
.duo__img{
  grid-area:1/1;position:relative;overflow:hidden;margin:0;
  aspect-ratio:1/1;
  /* Cadre TRANSPARENT : c'est lui qui coupe la photo qui défile. Avec un fond,
     il masquerait la photo sortante avant qu'on ne la voie sortir. */
  background:transparent;
}
.duo__img img{
  width:100%;height:100%;object-fit:cover;
  /* D'UN SEUL TENANT : `--ty` est posé par le script à chaque image, entre
     +100 % (l'entrante, encore sous le cadre) et -100 % (la sortante, déjà
     au-dessus). À mi-relais, la sortante est à -40 % et l'entrante à +60 % :
     elles pavent le cadre sans se recouvrir, et l'œil ne voit qu'un ruban qui
     monte — pas deux images qui se croisent.

     Aucune transition : le mouvement EST le scroll. On peut s'arrêter au milieu
     du relais et repartir en arrière, l'image suit. */
  transform:translate3d(0,var(--ty,100%),0);
  will-change:transform;
}
/* Sans script, la première photo est en place. */
.duo__img.is-current{--ty:0%;z-index:2}

/* Sans mouvement : le relais reste (c'est la section même), mais le script le
   rend franc — il arrondit la position au métier le plus proche au lieu de
   l'interpoler. Voir reveal.js, peindreDuos(). */

/* ---------- le CTA de fin de section ---------- */
/* Une seule sortie, au bas de la section, plutôt qu'un lien discret en tête. */
.section-cta{
  display:flex;justify-content:center;
  margin:clamp(40px,5vw,68px) 0 0;
}
/* Les boutons des tuiles n'ont pas de flèche : le bouton de base ne prévoit donc
   pas d'écart entre le libellé et elle. */
.section-cta .btn-fluo{gap:10px;padding:14px 28px;font-size:.88rem}
.section-cta .btn-fluo .x{transition:transform .3s}
.section-cta .btn-fluo:hover .x{transform:translateX(4px)}

/* ---------- les flèches de la galerie ---------- */
/* Posées SUR les diapositives voisines, au centre de la scène. Elles doublent
   les pastilles : le clic direct, sans viser un point de 26 px. */
.gal__fleche{
  position:absolute;top:50%;translate:0 -50%;z-index:6;
  display:grid;place-items:center;
  width:clamp(42px,3.4vw,54px);aspect-ratio:1;padding:0;
  border-radius:999px;border:1px solid var(--line-p-2);
  background:var(--paper);color:var(--ink);cursor:pointer;
  transition:background .3s,color .3s,border-color .3s,transform .3s;
}
.gal__fleche:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.gal__fleche--avant{left:clamp(10px,1.4vw,22px)}
.gal__fleche--apres{right:clamp(10px,1.4vw,22px)}
.gal__fleche--avant:hover{transform:translateX(-2px)}
.gal__fleche--apres:hover{transform:translateX(2px)}
.gal__fleche svg{
  width:22px;height:22px;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}

@media(prefers-reduced-motion:reduce){
  .gal__fleche{transition:none}
  .gal__fleche:hover{transform:none}
}


/* La couche téléphone ferme la feuille — et ce n'est pas un rangement :
   une media query n'ajoute aucune spécificité. Placée plus haut, elle se
   faisait écraser par les règles de base écrites en dessous (la piste de la
   galerie redevenait un ruban horizontal). Elle doit passer en dernier. */

/* ============================================================
   TÉLÉPHONE — LE FIL PLEIN CADRE
   ============================================================
   Le principe : sur un téléphone, une section n'est pas une boîte de contenu
   posée sur du papier — c'est un VISUEL qui prend l'écran, et un texte qui se
   pose dessus. Le papier, les marges et les titres de section mangeaient les
   trois quarts de la hauteur pour montrer une photo de 300 px.

   Donc :
   — un panneau = une photo, plein cadre, sur toute la hauteur (100svh) ;
   — le texte descend en bas du panneau, sur un voile qui monte du bas ; les
     deux tiers hauts de l'image restent nus, c'est eux qu'on vient voir ;
   — les titres de section deviennent de discrets surtitres posés sur le
     premier panneau de leur groupe, au lieu d'occuper un écran entier.

   Le défilement, lui, reste ordinaire. Une version antérieure accrochait le
   scroll panneau par panneau ; l'effet était plus contraignant qu'élégant, et
   rendait inatteignable tout ce qui n'était pas déclaré comme point d'arrêt.
   On lit maintenant la page de bout en bout, comme n'importe quelle autre.
   ============================================================ */
@media(max-width:820px){

  /* ---------- le fil ----------
     Le défilement est ordinaire : rien ne l'accroche.

     Une version antérieure posait `scroll-snap-type: y mandatory` — chaque
     panneau occupait l'écran et le doigt s'arrêtait sur chacun. L'effet était
     contraignant à l'usage, et surtout il rendait inatteignable tout ce qui
     n'était pas déclaré comme point d'arrêt : les chiffres, le positionnement,
     les avis et la FAQ se franchissaient d'un seul geste.

     `scroll-padding-top` reste, lui, indispensable — la barre flotte au-dessus
     du contenu, et sans ce retrait un lien d'ancre déposerait sa cible dessous. */
  html{scroll-padding-top:var(--dock-haut,96px)}

  /* Les sections-conteneurs s'effacent : leurs panneaux se suivent directement,
     sans le papier ni les marges qui les séparaient au large. */
  .realisations,
  .destinations{
    min-height:0;padding:0;display:block;position:relative;
  }

  /* CAPITAL — sans quoi rien ne s'accroche.
     `overflow:hidden` (galerie) et `overflow:clip` (métiers) font de ces sections
     des CONTENEURS DE DÉFILEMENT. Les points d'accroche de leurs panneaux se
     rattachent alors à elles, et non à la page : le scroll de la page les ignore
     purement et simplement, et le fil redevient une bouillie. Ces débordements ne
     servaient qu'à border le carrousel et la scène — deux choses qui n'existent
     plus ici. */
  .realisations{overflow:visible}
  .duos{overflow:visible}
  .realisations .wrap,
  .destinations .wrap{padding:0;max-width:none}

  /* Le surtitre de section, posé sur le premier panneau du groupe. */
  .realisations .head,
  .destinations .head{
    position:absolute;z-index:6;top:0;left:0;right:0;
    margin:0;padding:calc(18px + env(safe-area-inset-top)) var(--pad) 0;
    pointer-events:none;
  }
  .realisations .head .h-sec,
  .destinations .head .h-sec{
    /* Le plafond de 16 caractères des titres de section coupait « NOS
       DESTINATIONS » en deux lignes : en surtitre, il tient sur une. */
    max-width:none;white-space:nowrap;
    font-size:.68rem;line-height:1;letter-spacing:.22em;text-transform:uppercase;
    color:var(--creme);text-shadow:0 1px 14px rgba(8,6,3,.6);
  }
  .destinations .head__link{display:none}

  /* Chaque panneau porte déjà son action, et la barre du bas garde les hubs :
     un bouton de fin de section n'aurait que du papier vide où se poser. */
  .section-cta{display:none}

  /* Même raison pour l'accroche de section. En pleine largeur, les panneaux se
     succèdent bord à bord ; un paragraphe posé entre deux d'entre eux ouvrait
     une bande de papier blanc au milieu des images, sans rien y gagner — le
     surtitre au-dessus du premier panneau dit déjà de quoi il s'agit. */
  .destinations > .wrap > .page-lede,
  .realisations > .wrap > .page-lede{display:none}

  .hero{min-height:100svh}

  /* ---------- réalisations : une réalisation, un écran ----------
     Le carrousel est démonté (voir reveal.js) : le ruban redevient une pile. */
  .gal{width:100vw;margin-left:calc(50% - 50vw)}
  .gal__scene{overflow:visible}
  .gal__scene::before,
  .gal__scene::after{display:none}
  .gal__fleche{display:none}
  .gal__item--clone{display:none}

  .gal__track{display:block;transform:none!important;transition:none}
  .gal__item{
    width:100%;
    opacity:1!important;
  }
  .gal__item .gal__contenu{opacity:1!important}

  /* Le voile ne vient plus du haut : il monte du bas, là où le texte se pose. */
  .gal__scrim{
    background:linear-gradient(0deg,
      rgba(8,6,3,.94) 0 10%,
      rgba(8,6,3,.74) 32%,
      rgba(8,6,3,.22) 60%,
      rgba(8,6,3,0) 82%);
  }
  .gal__contenu{
    justify-content:flex-end;
    padding:0 var(--pad) calc(var(--dock-h) + 24px);
  }
  /* Le logo passe à gauche, au-dessus du texte : le créneau reste fixe, il
     s'aligne seulement sur l'autre bord. */
  .gal__logo{
    align-self:flex-start;width:min(160px,44%);height:44px;
    object-position:left center;margin-bottom:18px;
  }
  .gal__meta{font-size:1.45rem}
  /* On a l'écran entier : le détail se lit, au lieu d'attendre un survol
     qui n'existe pas au doigt. */
  .gal__detail{display:grid;grid-template-rows:1fr;opacity:1}

  /* ---------- destinations : une ville, un écran ---------- */
  .tuiles{
    display:block;width:100vw;
    margin:0 0 0 calc(50% - 50vw);
    padding:0;gap:0;
  }
  .tuile{
    aspect-ratio:auto;
    display:flex;flex-direction:column;justify-content:flex-end;
    /* Sur un panneau plein cadre, le texte vit en bas sur un fond assombri :
       l'encre est claire pour TOUTES les villes, quelle que soit la photo. Le
       réglage clair/sombre du bureau — qui dépend du ciel derrière le titre —
       n'a plus d'objet ici. */
    --tuile-ink:var(--creme);
    --tuile-dim:var(--creme-dim);
    --tuile-bord:var(--line-n-2);
    --tuile-inverse:var(--btn-ink);
    --focus:var(--fluo);
  }
  .tuile__voile,
  .tuile--sombre .tuile__voile,
  .tuile--voile-fort .tuile__voile{
    background:linear-gradient(0deg,
      rgba(8,6,3,.94) 0 10%,
      rgba(8,6,3,.74) 32%,
      rgba(8,6,3,.22) 60%,
      rgba(8,6,3,0) 82%);
  }
  .tuile__contenu{
    padding:0 var(--pad) calc(var(--dock-h) + 24px);
    gap:12px;
  }
  .tuile__titre{font-size:clamp(2.6rem,13vw,4.2rem)}
  .tuile__accroche{font-size:1rem;max-width:24ch}
  .tuile__ctas{margin-top:14px}
  /* Un seul appel à l'action : le devis est déjà dans la barre du bas. */
  .tuile__ctas .btn-ligne{display:none}

  /* ---------- métiers : la scène épinglée passe en plein cadre ----------
     La photo cesse d'être une vignette dans une colonne : elle passe DERRIÈRE,
     sur tout l'écran, et le relais des titres se pose dessus. */

  /* Trois valeurs qui changent de sens sur téléphone.

     Pas de blanc entre les photos : elles occupent l'écran entier, un écart les
     déchirerait en deux au lieu de les séparer.

     Le palier revient : ici le scroll s'accroche (snap obligatoire), et un cran
     qui tombe au milieu d'un relais n'a nulle part où se poser.

     Et le relais vaut un écran plein, la photo aussi. C'est cette égalité qui
     fait que la piste se divise en parts rigoureusement égales : les crans, qui
     la découpent en autant de parts que de métiers, tombent alors pile sur le
     début de chaque palier. Ce n'est pas un hasard heureux, c'est la condition —
     et c'est pourquoi l'écart doit rester nul de ce côté. */
  .duos__piste{--duo-ecart:0;--duo-pause:55svh;--duo-glisse:100svh}
  .duos__scene{padding-bottom:0;display:block;position:sticky}
  .duos__scene::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(0deg,
      rgba(8,6,3,.94) 0 10%,
      rgba(8,6,3,.74) 34%,
      rgba(8,6,3,.24) 62%,
      rgba(8,6,3,.05) 84%);
  }
  .duos__cadre{
    width:100%;height:100%;display:block;position:static;
  }
  .duos__droite{position:absolute;inset:0;z-index:0;display:block}
  .duo__img{
    position:absolute;inset:0;aspect-ratio:auto;
    width:100%;height:100%;margin:0;border-radius:0;
  }
  .duo__img img{width:100%;height:100%;object-fit:cover}

  .duos__gauche{
    position:relative;z-index:2;height:100%;
    display:flex;flex-direction:column;justify-content:flex-end;gap:16px;
    padding:0 var(--pad) calc(var(--dock-h) + 24px);
  }
  .duos__titres{flex:none;overflow:hidden}
  /* Sur la photo, l'encre devient la crème, et l'attente ne peut pas descendre
     aussi bas qu'au bureau : sous 42 %, le titre à venir disparaît dans l'image. */
  .duos__titre{--pale:.42}
  .duos__titre h2{font-size:clamp(2.4rem,12vw,3.6rem);color:var(--creme)}
  .duo__note{font-size:1rem;color:var(--creme-dim)}
  .duo__note strong{color:var(--creme)}

  /* Les crans : un arrêt par métier, sinon le snap obligatoire traverse la
     scène d'un trait et la rend inatteignable. */
  .duos__crans{
    display:grid;grid-template-rows:repeat(var(--etapes,3),1fr);
    position:absolute;inset:0;z-index:-1;pointer-events:none;
  }
  .duos__crans{display:none}

  /* ---------- références : un bandeau, pas un écran ---------- */
  .refs{min-height:0;padding-block:28px;display:block}
  .refs__row{margin-top:0;gap:18px 14px}
  /* Quatre logos par rangée : sept tiennent alors sur deux lignes, et le
     bandeau reste une respiration entre deux panneaux — pas un troisième. */
  .ref{flex-basis:62px;max-width:76px}
  .ref__slot{height:30px}
}

/* ============================================================
   LE WORDING 2026 — les blocs nés des documents client
   (accueil, agence, contact, devis, guide, fiche activité)
   ============================================================ */

/* ---------- chiffres : quatre colonnes, pas trois ---------- */
.stats--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.stats--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.stats--4{grid-template-columns:1fr}}

/* ---------- la méthode sur fond noir ----------
   `.inclus` est né sur papier : posé tel quel sur un bandeau noir, il y
   collait douze cartes blanches. On garde la grille, on inverse la matière. */
.band--noir .inclus{background:var(--line-n);border-color:var(--line-n)}
.band--noir .inclus__item{background:var(--noir)}
.band--noir .inclus__num{color:var(--taupe)}
.band--noir .inclus__titre{color:var(--creme)}
.band--noir .inclus__texte{color:var(--creme-dim)}
.band--noir .page-lede{color:var(--creme-dim)}
.band--noir .offre__note{color:var(--taupe)}

.notes{margin-top:clamp(28px,3vw,44px);display:grid;gap:14px}
.notes .offre__note{margin:0}

/* ---------- FAQ ----------
   <details> plutôt qu'un accordéon scripté : la réponse reste dans le
   document, donc lisible sans JavaScript, indexable, et trouvable au Ctrl+F. */
.faq__liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-p)}
.faq__item{border-bottom:1px solid var(--line-p)}
.faq__q{
  cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;
  font-size:1.05rem;line-height:1.4;letter-spacing:-.005em;
}
.faq__q::-webkit-details-marker{display:none}
/* La croix bascule en moins : l'état ouvert se lit sans lire le texte. */
.faq__q::after{
  content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;
  background:
    linear-gradient(var(--ink),var(--ink)) center/13px 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/1px 13px no-repeat;
  transform:translateY(-50%);transition:background-size .3s;
}
/* Ouvert : la barre verticale disparaît, il reste le « moins ». Pas de rotation
   — faire pivoter la croix d'un quart de tour la laisserait en « | ». */
details[open] > .faq__q::after{background-size:13px 1px,0 0}
.faq__q:hover{color:var(--ink)}
.faq__r{padding:0 0 24px}
.faq__r p{margin:0;font-size:.98rem;line-height:1.72;color:var(--ink-2);max-width:70ch}

.band--noir .faq__liste,.band--noir .faq__item{border-color:var(--line-n)}
.band--noir .faq__q{color:var(--creme)}
.band--noir .faq__q::after{
  background:
    linear-gradient(var(--fluo),var(--fluo)) center/13px 1px no-repeat,
    linear-gradient(var(--fluo),var(--fluo)) center/1px 13px no-repeat;
}
.band--noir details[open] > .faq__q::after{background-size:13px 1px,0 0}
.band--noir .faq__r p{color:var(--creme-dim)}

/* ---------- témoignages ---------- */
.quotes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,56px)}
@media(max-width:760px){.quotes{grid-template-columns:1fr}}

/* La citation est née sur fond noir — page Réalisations — et ses couleurs
   étaient écrites en dur : crème sur noir. Reprise telle quelle sur papier, elle
   y écrivait en crème sur crème. Les couleurs suivent désormais la bande.
   Le filet reste fluo : sur papier, c'est le seul emploi du fluo hors
   surlignage, et il est décoratif — pas porteur de texte. */
.band--paper .citation__texte p{color:var(--ink)}
.band--paper .citation__source{color:var(--ink-2)}
.band--paper .citation__source strong{color:var(--ink)}

/* ---------- coordonnées ---------- */
.coords{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line-p);border:1px solid var(--line-p);
  margin:clamp(32px,4vw,56px) 0 clamp(64px,8vw,110px);
}
@media(max-width:900px){.coords{grid-template-columns:1fr}}
.coords__bloc{background:var(--paper);padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;gap:14px}
.coords__titre{
  margin:0;font-family:var(--cond);font-weight:900;font-stretch:condensed;
  text-transform:uppercase;font-size:1.2rem;letter-spacing:-.005em;
}
.coords__corps{font-style:normal;display:grid;gap:10px}
.coords__corps p{margin:0;font-size:1rem;line-height:1.6}
.coords__corps a{color:var(--ink);box-shadow:inset 0 -.5em 0 var(--fluo);transition:box-shadow .25s}
.coords__corps a:hover{box-shadow:inset 0 -1em 0 var(--fluo)}
.coords__liste{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.95rem;color:var(--ink-2)}
.coords__note{margin:0;font-size:.88rem;line-height:1.6;color:var(--ink-2)}

/* ---------- catalogue : la description a remplacé les trois colonnes ---------- */
.act__texte{margin:0;font-size:.95rem;line-height:1.68;color:var(--ink-2);max-width:74ch}
.act__objectif{
  display:block;margin-top:4px;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
.act__titre a{color:var(--ink);display:inline-flex;align-items:baseline;gap:8px}
.act__titre a .x{color:var(--ink-2);transition:transform .3s,color .3s}
.act__titre a:hover .x{transform:translateX(4px);color:var(--ink)}
.region__cta{margin:18px 0 0}

/* ---------- fiche activité : le déroulé, puis les conditions ---------- */
.deroule{list-style:none;margin:clamp(28px,3vw,44px) 0 0;padding:0;display:grid;gap:1px;background:var(--line-n);border:1px solid var(--line-n)}
.deroule__item{
  background:var(--noir);padding:18px clamp(18px,2.2vw,28px);
  display:grid;grid-template-columns:minmax(88px,auto) 1fr;gap:6px 24px;align-items:baseline;
}
@media(max-width:560px){.deroule__item{grid-template-columns:1fr}}
.deroule__heure{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;color:var(--fluo)}
.deroule__texte{font-size:1rem;line-height:1.6;color:var(--creme-dim)}

.pratique{margin:clamp(24px,3vw,40px) 0 0;display:grid;gap:0;border-top:1px solid var(--line-p)}
.pratique__ligne{
  display:grid;grid-template-columns:minmax(120px,.5fr) 1fr;gap:6px 28px;
  padding:16px 0;border-bottom:1px solid var(--line-p);align-items:baseline;
}
@media(max-width:560px){.pratique__ligne{grid-template-columns:1fr}}
.pratique dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.pratique dd{margin:0;font-size:.98rem;line-height:1.62}

/* ---------- guides : le renvoi vers un autre guide, au fil du texte ---------- */
.prose__lien{margin:0 0 26px}
.prose__lien a{display:inline-flex;align-items:baseline;gap:8px}
.prose__lien .x{transition:transform .3s}
.prose__lien a:hover .x{transform:translateX(4px)}
.prose caption{
  text-align:left;padding-bottom:10px;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
.prose :where(th,td){padding:12px 16px 12px 0;border-bottom:1px solid var(--line-p);text-align:left;vertical-align:top;font-size:.96rem;line-height:1.55}
.prose :where(thead th){font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.prose :where(tbody th){white-space:nowrap;font-weight:400;color:var(--ink)}

/* ---------- article long : le sommaire prend le rail de droite ----------
   Le corps seul laissait la moitié droite de la page vide. Le sommaire s'y
   installe et y reste collant : la largeur sert à quelque chose, et un texte
   de 1 500 mots devient navigable. L'ordre du DOM met le sommaire avant le
   corps — il passe donc au-dessus quand la grille retombe sur une colonne. */
.article__grille{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(210px,23vw,290px);
  gap:clamp(28px,4vw,64px);
}
/* Pas d'« align-items:start » : la cellule du rail doit faire toute la hauteur
   de la rangée, sinon le sommaire collant n'a aucune course et défile avec le
   texte. C'est lui, à l'intérieur, qui colle. */
.article__grille > .article__rail{grid-column:2;grid-row:1}
.article__grille > .article__corps{grid-column:1;grid-row:1;min-width:0}
.sommaire--rail{position:sticky;top:28px}
.article--rail .prose{max-width:none}
.article--rail .prose p,
.article--rail .prose ul,
.article--rail .prose ol{max-width:72ch}

.sommaire--rail{margin:0}
.sommaire--rail ol{max-height:calc(100vh - 160px);overflow-y:auto}

@media(max-width:1000px){
  .article__grille{grid-template-columns:1fr}
  .article__grille > .article__rail{grid-column:1;grid-row:1}
  .article__grille > .article__corps{grid-column:1;grid-row:2}
  .sommaire--rail{position:static}
  .sommaire--rail ol{max-height:none;overflow:visible}
  .article--rail .prose{max-width:66ch}
}


/* ---------- fil d'Ariane ----------
   Discret, en tête de contenu : un repère de navigation ne réclame pas
   l'attention, il la rassure. Il défile hors écran, il ne colle pas. */
.fil-ariane{padding:clamp(18px,2.4vw,28px) 0 0;font-size:.8rem}
.fil-ariane ol{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:6px 10px;color:var(--ink-2);
  font-family:var(--mono);letter-spacing:.04em;
}
.fil-ariane li{display:flex;align-items:center;gap:6px 10px}
/* Le séparateur : un chevron typographique, pas une image. */
.fil-ariane li + li::before{content:"›";color:var(--taupe)}
.fil-ariane a{color:var(--ink-2);transition:color .2s}
.fil-ariane a:hover{color:var(--ink)}
.fil-ariane [aria-current="page"]{color:var(--ink)}
.band--noir .fil-ariane a,.band--noir .fil-ariane [aria-current]{color:var(--creme-dim)}


/* ============================================================
   COUCHE ÉDITORIALE — design validé (piste 07, 28/07/2026)
   Cormorant Garamond sur les titres, Inter sur le texte,
   noir & blanc sans fluo, dock en haut, chiffres nus,
   wordmark géant dans le panneau de contact.
   Posée en fin de feuille : la cascade l'applique partout.
   ============================================================ */
:root{
  --noir:#0B0B0A;
  --noir-2:#141412;
  --paper:#FFFFFF;
  --creme:#F5F3ED;
  --creme-dim:#DDD9CF;
  --taupe:#B9B4A8;
  --ink:#141413;
  --ink-2:#6E6B64;
  /* Le fluo devient un surligneur crème discret sur papier,
     et la couleur « lumière » sur fond noir. */
  --fluo:#EDE9DF;
  --btn-ink:#141413;
  --serif:"Cormorant Garamond",Georgia,serif;
  --cond:var(--serif);
  --mono:var(--sans);
  /* La barre vit en haut : plus rien à réserver en bas. */
  --dock-h:0px;
  /* Ce que la barre occupe en haut : son décalage, sa hauteur, et un peu d'air.
     Sert au retrait de défilement — accroche et ancres s'y réfèrent. */
  --dock-haut:calc(clamp(14px,2vw,26px) + 58px + 12px);
}
body{font-weight:400;letter-spacing:0}

/* ---------- titres : la serif remplace la condensée 900 ---------- */
.statement,.h-sec,.tuile__titre,.duos__titre h2,.pillar h3,.stat__n,
.contact h2,.coords__titre,.dest-hero__titre,.evts__mot,.evts__file span,
.format__titre,.guide__titre,.page-title,.quote blockquote,.rea__titre,.region__nom{
  font-family:var(--serif);font-weight:500;font-stretch:normal;
}
.h-sec{text-transform:none;letter-spacing:-.005em;line-height:1.06;font-size:clamp(2rem,4.4vw,3.5rem)}
.page-title,.dest-hero__titre{letter-spacing:-.005em}

/* ---------- dock : en haut, pastille blanche ---------- */
.dock{bottom:auto;top:clamp(14px,2vw,26px)}
.dock__brand{display:flex;align-items:center;gap:10px}

/* Ce `display:flex` est posé sans média : il rendait donc la marque au téléphone,
   où la barre n'a la place ni d'elle ni du devis en entier — le bouton sortait
   par le bord droit, rogné en plein mot. On rétablit la règle d'origine, qui la
   retire sous 900 px : le logo du site reste atteignable, la barre respire, et
   les deux boutons de droite tiennent ensemble. */
@media(max-width:900px){
  .dock__brand{display:none}
  .dock__wa{margin-left:auto}
}

.dock__mark{height:20px;width:auto;filter:invert(1) brightness(1.05)}
.dock__cta{background:#fff;color:var(--ink)}
.dock__cta:hover{filter:brightness(.96)}
.dock .menu li.current-menu-item > a,
.dock .menu li.current_page_item > a,
.dock .menu li.current-menu-ancestor > a{background:rgba(255,255,255,.14);color:#fff}
[id]{scroll-margin-top:var(--dock-haut,96px)}

/* ---------- boutons : noir sur papier, blanc sur noir ---------- */
.btn-fluo,.duo__lien,.skip-link{
  background:var(--ink);color:#fff;border:1px solid var(--ink);
  font-weight:400;padding:10px 22px;font-size:.82rem;
}
.band--noir .btn-fluo,.hero .btn-fluo,.contact .btn-fluo,.tuile--sombre .btn-fluo{
  background:#fff;color:var(--ink);border-color:#fff;
}
.btn-ligne{font-weight:400;padding:9px 20px;font-size:.82rem}
.gal__cta{color:#F5F3ED}

/* ---------- hero / covers : la serif en capitales ---------- */
.statement{
  color:var(--creme);text-transform:uppercase;
  font-weight:400;letter-spacing:.015em;line-height:1.05;
  font-size:clamp(2.3rem,4.8vw,4.2rem);
  text-shadow:0 4px 44px rgba(0,0,0,.35);
}
.statement .out{color:var(--creme);-webkit-text-stroke:0}
.hero--page .statement{font-size:clamp(2.1rem,4.2vw,3.6rem)}
.hero__kicker{font-family:var(--sans);letter-spacing:-.05em;color:var(--taupe)}
.hero__ancres a{font-family:var(--sans);letter-spacing:.04em}
.hero__ancres a:hover{border-color:#fff;color:#fff}

/* Le voile des covers (« hero--page »), repris.

   Il empilait un vignettage radial (.56 au centre → .86 à 78 %) SUR un dégradé
   vertical (.55 / .20 / .45). Composés, les bords atteignaient ~.92 de noir : la
   photographie y était éteinte, et le palier à 78 % du radial laissait un anneau
   visible en travers de l'image. Sur l'accueil, la composition en bas à gauche le
   masquait ; sur une cover — plus basse, texte centré — l'anneau tombe en plein
   milieu du cadre.

   Ce voile-là était taillé pour un statement fluo, qui exigeait beaucoup de noir
   sous lui. Le statement est désormais un serif crème : il tient sur bien moins.
   On repart donc d'un dégradé simple — sombre en haut pour la barre, sombre en
   bas pour l'assise, relevé au milieu là où la photo doit se voir — plus un
   assombrissement latéral qui décolle les mots du fond sans dessiner de cercle. */
.hero--page .hero__scrim{
  background:
    linear-gradient(180deg,
      rgba(8,6,3,.66) 0,
      rgba(8,6,3,.30) 26%,
      rgba(8,6,3,.34) 60%,
      rgba(8,6,3,.74) 100%),
    linear-gradient(90deg,
      rgba(8,6,3,.40),
      rgba(8,6,3,0) 28%,
      rgba(8,6,3,0) 72%,
      rgba(8,6,3,.40));
}

/* le hero éditorial de l'accueil : contenu en bas à gauche, logos en pied */
.hero--edito{flex-direction:column;align-items:flex-start;justify-content:flex-end;text-align:left}
.hero--edito .hero__mid{margin:0;max-width:1020px;padding-bottom:120px}
.hero--edito .hero__kicker{margin-bottom:14px}
.hero--edito .hero__lede{margin:16px 0 0;max-width:52ch;text-align:left;color:var(--creme-dim)}
.hero--edito .hero__cta{margin:22px 0 0}
/* Le bandeau de références défile en pied de hero. Trente-quatre marques ne
   tiennent pas sur une ligne : plutôt que d'en cacher trente, on les fait
   passer. Les bords s'effacent en fondu, sinon les logos entreraient et
   sortiraient par une arête franche, ce qui trahit le truc. */
.hero__marques{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  padding-block:24px 30px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
/* La piste porte deux fois le même jeu ; l'animation la translate d'exactement
   une moitié, donc d'un jeu. Au rembobinage, le second exemplaire est pile là
   où était le premier : la boucle ne se voit pas. */
.marques__piste{
  display:flex;width:max-content;
  animation:marques-defile 80s linear infinite;
}
.hero__marques:hover .marques__piste{animation-play-state:paused}
@keyframes marques-defile{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
/* Le demi-écart de part et d'autre de chaque jeu : additionnés à la couture,
   les deux demis refont un écart plein, identique à tous les autres. */
.marques__jeu{
  --ecart:clamp(30px,3.4vw,58px);
  list-style:none;margin:0;padding-inline:calc(var(--ecart) / 2);
  display:flex;align-items:center;gap:var(--ecart);
}
.marques__jeu li{display:flex;align-items:center;flex:0 0 auto}

/* Les PNG sont déjà blancs ; `brightness(0) invert(1)` ne change rien pour eux
   et blanchit les quelques SVG, restés vectoriels et donc encore en couleur.
   `--coef` rentre les logos optiquement lourds (cf. wevents_logos()), et la
   largeur reste bornée pour qu'un logotype très allongé ne mange pas la ligne. */
.hero__marques img{
  --hauteur:clamp(21px,2.05vw,31px);
  height:calc(var(--hauteur) * var(--coef,1));
  width:auto;max-width:clamp(112px,11vw,178px);object-fit:contain;
  filter:brightness(0) invert(1);
  opacity:.72;transition:opacity .3s;
}
.hero__marques img:hover{opacity:1}

/* Mouvement réduit : la piste se fige et le bandeau redevient une bande qu'on
   fait défiler soi-même. Le doublon décoratif n'a alors plus lieu d'être. */
@media(prefers-reduced-motion:reduce){
  .hero__marques{overflow-x:auto}
  .marques__piste{animation:none}
  .marques__jeu[aria-hidden]{display:none}
  .hero__marques img{transition:none}
}

/* ---------- chiffres nus, façon éditoriale ---------- */
.stats{background:transparent;border-block:0;gap:clamp(24px,3vw,48px)}
/* Quand les chiffres suivent un texte, ils lui collaient : le bloc se lisait
   comme la suite du paragraphe au lieu d'être un relevé à part. */
.manifesto + .stats{margin-top:clamp(48px,6vw,84px)}
.stat{background:transparent;padding:0}
.stat__n{
  font-size:clamp(2.8rem,4.6vw,4.4rem);letter-spacing:0;line-height:1;
  font-variant-numeric:lining-nums;
}
.stat__l{
  font-family:var(--sans);font-size:.95rem;letter-spacing:0;text-transform:none;
  color:var(--ink-2);max-width:24ch;margin-top:16px;line-height:1.55;
}

/* ---------- galerie des réalisations ---------- */
.gal__genre{font-family:var(--sans);font-weight:400;color:var(--taupe)}
.gal__fleche{border:1px solid rgba(20,20,19,.14);background:rgba(255,255,255,.92)}

/* ---------- contact : plus de fluo, wordmark géant ---------- */
.contact h2{color:var(--creme);text-transform:none;letter-spacing:-.005em;line-height:1.05}
.contact{padding-bottom:clamp(120px,18vw,260px)}
.contact__wordmark{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  font-family:var(--serif);font-weight:500;
  font-size:20.5vw;line-height:.74;letter-spacing:0;
  text-align:center;white-space:nowrap;
  color:rgba(255,255,255,.13);
  pointer-events:none;user-select:none;
  transform:translateY(6%);
}
.field input:focus,.field textarea:focus{border-bottom-color:var(--creme)}
.contact__mail:hover{color:#fff;border-bottom-color:#fff}

/* ---------- divers : le fluo texte devient lumière/encre ---------- */
.deroule__heure{color:var(--taupe)}
.formats--noir .format__titre{color:var(--creme)}
.prose a{box-shadow:inset 0 -1px 0 var(--ink)}
.prose a:hover{box-shadow:inset 0 -2px 0 var(--ink)}
.coords__corps a{box-shadow:inset 0 -1px 0 var(--ink)}
.coords__corps a:hover{box-shadow:inset 0 -2px 0 var(--ink)}
.band--noir .head__link:hover{color:#fff;border-color:#fff}
.foot a:hover{color:#fff}
.guide:hover .guide__kicker{color:var(--ink)}
.dest-hero__region a:hover{color:#fff;border-color:#fff}
.citation__texte{border-left-color:var(--line-p-2)}
.prose blockquote{border-left-color:var(--line-p-2)}


/* ============================================================
   COUCHE ÉDITORIALE — retouches du 28/07/2026
   ============================================================ */

/* ---------- le bouton du carrousel : un lien souligné, pas une
     pastille crème sur une photo claire (il y disparaissait) ---------- */
.gal__cta{
  padding:0 0 4px;border-radius:0;
  background:transparent;color:#F5F3ED;
  border-bottom:1px solid rgba(255,255,255,.4);
  font-weight:400;
}
.gal__cta:hover{transform:none;filter:none;border-bottom-color:#fff}

/* ---------- les formats : une liste, plus une grille à trou ----------
   À trois colonnes, quatre activités laissaient une case vide. En rangées
   pleine largeur, le nombre d'activités n'a plus d'importance. */
.formats,.formats--2{
  grid-template-columns:1fr;gap:0;
  background:transparent;border:0;border-top:1px solid var(--line-p);
}
.format{
  display:grid;grid-template-columns:minmax(200px,.85fr) 1.7fr;
  gap:clamp(18px,4vw,64px);align-items:baseline;
  background:transparent;padding:clamp(22px,2.6vw,34px) 0;
  border-bottom:1px solid var(--line-p);
}
.format__titre{margin:0;font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1.1}
.format__accroche{max-width:66ch}
.formats--noir{background:transparent;border-top-color:var(--line-n)}
.formats--noir .format{background:transparent;border-bottom-color:var(--line-n)}
@media(max-width:900px){
  .formats,.formats--2{grid-template-columns:1fr}
  .format{grid-template-columns:1fr;gap:10px}
}

/* ---------- le titre d'article prend toute la largeur ----------
   `measure` bridait la tête de page à 66 caractères : le titre y tombait
   sur six lignes. Le chapô et la méta, eux, restent des colonnes. */
.page-head,.page-head.measure{max-width:none}
.page-title{max-width:none;font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.06}
.page-head .page-lede,.page-head .page-meta{max-width:64ch}

/* ---------- le wordmark : sans tiret, et coupé à mi-hauteur ---------- */
.contact__wordmark{transform:translateY(50%)}

/* Le sommaire passe sous la barre : elle flotte en haut, il s'y collait. */
.sommaire--rail{top:calc(clamp(14px,2vw,26px) + 70px)}
.sommaire--rail ol{max-height:calc(100vh - 220px)}

/* La note d'un métier : un pas plus discrète, elle ne dispute plus
   la vedette au titre qui la surmonte. */
.duo__note{font-size:clamp(.98rem,1.15vw,1.15rem);line-height:1.65;font-weight:400;max-width:42ch}
.duo__note strong{font-weight:500}


/* ============================================================
   BANDEAU DE CONSENTEMENT (décor — voir template-parts/cookies.php)
   Une carte légère en bas à droite : verre noir, filet blanc,
   deux boutons minuscules. Elle ne pèse rien à l'écran, et le
   coin bas droit est libre — la barre de navigation vit en haut.
   ============================================================ */
.cookies{
  position:fixed;z-index:70;
  right:clamp(12px,1.4vw,16px);
  bottom:clamp(12px,1.4vw,16px);
  width:min(calc(100vw - 24px),18rem);

  /* La carte ne mange pas le clic : seule elle-même est cliquable — un
     conteneur fixe posé sur la page en attraperait la largeur entière. */
  pointer-events:none;

  opacity:0;translate:0 10px;
  transition:opacity .35s ease-out,translate .35s ease-out;
}
.cookies.is-on{opacity:1;translate:0}

.cookies__carte{
  pointer-events:auto;
  padding:10px 12px 12px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(24px) saturate(1.2);
          backdrop-filter:blur(24px) saturate(1.2);
  color:#fff;
  --focus:#fff;
}

/* Sans flou d'arrière-plan, 42 % de noir laisse passer le papier et le texte
   blanc tombe à 2:1. On referme alors le fond. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cookies__carte{background:rgba(11,11,10,.94)}
}

.cookies__titre{
  margin:0 0 4px;
  font-size:.75rem;font-weight:500;line-height:1.3;color:#fff;
}
.cookies__texte{
  margin:0 0 10px;
  font-size:.75rem;font-weight:400;line-height:1.45;
  color:rgba(255,255,255,.72);
}

.cookies__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}

.cookies__btn{
  flex:none;
  padding:5px 10px;
  border:0;border-radius:4px;
  background:transparent;color:#fff;
  font-family:inherit;font-size:.75rem;font-weight:400;line-height:1.2;
  cursor:pointer;
  transition:background .25s,filter .25s;
}
.cookies__btn:hover{background:rgba(255,255,255,.10)}

/* Un seul bouton plein : deux en donneraient deux principaux, donc aucun. */
.cookies__btn--plein{background:#fff;color:var(--ink)}
.cookies__btn--plein:hover{background:#fff;filter:brightness(.92)}

@media(prefers-reduced-motion:reduce){
  .cookies,.cookies__btn{transition:none}
  .cookies{translate:0}
}

/* L'ourlet légal du panneau de contact — le seul pied de page du site. */
.contact__legal{
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;
  margin:clamp(32px,4vw,52px) 0 0;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--taupe);
}
.contact__legal a{color:var(--taupe);border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.contact__legal a:hover{color:#fff;border-bottom-color:#fff}