/* =========================================================
   MADYGOOD — accueil.css — la feuille commune à toutes les pages
   S'appuie sur typography.css (inchangé, à charger avant). Contient la palette, la barre et le menu, les boutons, le pied de page, et tout ce que
   l'accueil utilise : bascule Grille / Liste / Carrousel, pôles en panneaux qui s'ouvrent, showreel, contact (conversation et ticket).
   Tout est carré (rayon 0) : ni pastille, ni rond, ni ombre.
   ========================================================= */

:root{
  /* palette — rouge #B41F1C (Anthony) ; jaune #F9AC28 de la marque, mesuré sur ASSET/couleurs/etiquettes.jpg */
  --paper:#EDEBE7;
  --paper-hi:#F6F4F0;
  --ink:#121211;
  --graphite:#5A5750;
  --line:rgba(18,18,17,.16);
  --red:#B41F1C;   /* le rouge de la marque (donné par Anthony, 17 oct.) : remplace l'ancien orange #FE4A17 */
  --amber:#F9AC28;

  --gut:16px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-io:cubic-bezier(.7,0,.2,1);
  /* départ vif, longue fin douce : sert à tous les survols et apparitions rapides */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-bd:cubic-bezier(.6,0,.15,1);   /* bandes des boutons : démarrage net, fin douce */
  /* le logo monte lettre par lettre (60 ms d'écart) : le G (5e lettre) démarre à 240 ms.
     Tout le reste du hero arrive à partir de là, d'un seul bloc. */
  --arrive:.4s;

  /* échelle d'affichage de l'accueil, au-dessus des niveaux de typography.css (chaque taille a UN rôle) :
       --fs-xl  titre de pôle, question du contact
       --fs-l   bascule Grille / Liste / Carrousel, titre vertical d'un panneau fermé
       --fs-m   champ de saisie et choix du contact
       --fs-intro  chapeau d'une section et accroche d'un pôle
       --fs-lede   texte d'ouverture (IvyPresto Thin, plancher de 32 px) */
  --fs-xl:clamp(44px,5.4vw,92px);
  --fs-l:clamp(40px,4.8vw,70px);
  --fs-m:clamp(24px,2.6vw,40px);
  --fs-intro:clamp(20px,1.9vw,28px);
  /* niveaux propres à l'accueil */
  --fs-lede:32px;                        /* texte d'ouverture, IvyPresto Thin : plancher de 32 px */
}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);scroll-behavior:smooth}
body{color:var(--ink);overflow-x:clip}  /* pas de fond ici : le papier vient de <html>, la traînée de photos passe dessous */
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;border-radius:0;cursor:pointer;text-align:inherit}
ul,ol{list-style:none}
img{display:block;max-width:100%}
::selection{background:var(--red);color:var(--paper-hi)}
section[id],article[id]{scroll-margin-top:72px}
main:focus{outline:none}   /* cible du lien d'évitement */
.gm__i1:focus-visible,.ci__a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
/* orchestration : titres équilibrés (pas de mot seul à la ligne), paragraphes sans veuve, chiffres de même largeur */
h1,h2,h3,h4,.lead{text-wrap:balance}
p,dd,.lede{text-wrap:pretty}
[data-numeric],time{font-variant-numeric:tabular-nums}
/* sans JavaScript : pas de bascule qui ne ferait rien */
.no-js .td{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:var(--gut);top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:12px 18px;transition:top .2s}
.skip:focus{top:8px}

/* =========================================================
   HOVER « BANDES » — tous les boutons
   Quatre bandes verticales (un quart de la largeur chacune) montent
   l'une après l'autre, de gauche à droite, jusqu'à remplir le bouton.
   Au départ, elles redescendent dans l'ordre inverse.
   Réglages par bouton : --bc (couleur des bandes), --bh (couleur du texte au survol).
   ========================================================= */
@property --b1{syntax:'<percentage>';inherits:false;initial-value:0%}
@property --b2{syntax:'<percentage>';inherits:false;initial-value:0%}
@property --b3{syntax:'<percentage>';inherits:false;initial-value:0%}
@property --b4{syntax:'<percentage>';inherits:false;initial-value:0%}

.bd{
  --bc:var(--ink);
  --bh:var(--paper-hi);
  background-image:
    linear-gradient(var(--bc),var(--bc)),linear-gradient(var(--bc),var(--bc)),
    linear-gradient(var(--bc),var(--bc)),linear-gradient(var(--bc),var(--bc));
  background-repeat:no-repeat;
  background-position:0% 100%,33.333% 100%,66.667% 100%,100% 100%;
  background-size:25.4% var(--b1),25.4% var(--b2),25.4% var(--b3),25.4% var(--b4);
  transition:
    --b1 .36s var(--ease-bd) 120ms,--b2 .36s var(--ease-bd) 80ms,
    --b3 .36s var(--ease-bd) 40ms,--b4 .36s var(--ease-bd) 0s,
    color .22s ease 0s;
}
.bd:hover,
.bd:focus-visible,
.bd.is-open{
  --b1:100%;--b2:100%;--b3:100%;--b4:100%;
  color:var(--bh);
  transition:
    --b1 .45s var(--ease-bd) 0s,--b2 .45s var(--ease-bd) 50ms,
    --b3 .45s var(--ease-bd) 100ms,--b4 .45s var(--ease-bd) 150ms,
    color .22s ease .17s;
}

/* ---------- Masthead (logo SVG, lettre par lettre) ---------- */
.mark{padding:0 var(--gut);margin:0}
.mark svg{display:block;width:100%;height:auto;fill:currentColor;overflow:hidden}
.mark__stack{display:none !important}
/* 290 = unités du viewBox (hauteur 248.73) : toutes les lettres, même le ®, sortent du cadre */
.js .mark path{transform:translateY(290px)}
.js .mark.in path{
  transform:none;
  transition:transform 1.25s var(--ease);
  transition-delay:calc(var(--i) * 60ms + var(--d,0ms));
}
@media (max-width:720px){
  .mark__wide{display:none !important}
  .mark__stack{display:block !important}
}

.top{padding-top:var(--gut)}

/* ---------- Navigation : sous le logo, se fige en haut au scroll ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  padding:8px var(--gut) 0;
  transition:background .35s;
}
.nav.is-stuck{background:var(--paper)}
.js .nav{opacity:0;transition:opacity .7s var(--ease-out) var(--arrive),background .35s}
.is-ready .nav{opacity:1}

/* plus de filet sous le menu au repos ; au scroll, plus de case non plus : le texte seul, sur le papier uni (ni ombre, ni dégradé).
   La barre reste toujours à l'écran (sticky). */
.nav__bar{
  display:flex;align-items:center;gap:4px;
  height:53px;padding:0;
  border:1px solid transparent;
}

.nav__logo{
  display:flex;align-items:center;
  max-width:0;opacity:0;overflow:hidden;
  transition:max-width .7s var(--ease),opacity .5s;
}
.nav__logo svg{width:112px;height:auto;flex:none;fill:currentColor;margin:0 16px 0 8px}
.nav.is-stuck .nav__logo{max-width:150px;opacity:1}

.nav__links{display:flex;gap:4px}
.nav__a,
.nav__cta,
.nav__burger,
.go,
.send{
  display:inline-flex;align-items:center;
  font-family:var(--font-sans);font-weight:var(--w-semi);
  font-size:var(--fs-ui);line-height:1;
  letter-spacing:var(--ls-ui);text-transform:uppercase;
  white-space:nowrap;
}
.nav__a,.nav__cta,.nav__burger{height:40px;padding:0 16px}
.nav__a{background-color:var(--ink);color:var(--paper-hi);--bc:var(--red);--bh:var(--paper-hi)}      /* le menu en noir, comme le bouton « Contactez-nous » et le bouton Menu */
/* au scroll : liens sans fond, un filet de 1 px se dessine sous le texte au survol ; le café reste souligné */
.nav.is-stuck .nav__a{background-color:transparent;color:var(--ink);padding:0 12px}
.nav.is-stuck .bd{background-image:none}
.nav.is-stuck .nav__a,
.nav.is-stuck .nav__cta{
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
  background-origin:content-box;background-position:0 calc(50% + 12px);background-size:0 1px;
  transition:background-size .35s var(--ease);
}
.nav.is-stuck .nav__a:hover,
.nav.is-stuck .nav__a:focus-visible,
.nav.is-stuck .nav__a.is-open,
.nav.is-stuck .nav__cta{background-size:100% 1px;color:var(--ink)}
.nav.is-stuck .nav__cta{background-color:transparent;padding:0 4px 0 12px}

/* Expertises : menu déroulant sur les piliers (pas une page) */
.drop{position:relative}
.drop__c{display:inline-block;margin-left:10px;transition:transform .35s var(--ease)}
.drop.is-open .drop__c{transform:rotate(45deg)}
.drop__panel{
  position:absolute;left:0;top:100%;min-width:260px;z-index:5;
  background:var(--ink);color:var(--paper-hi);border:1px solid var(--ink);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .3s var(--ease),transform .4s var(--ease),visibility 0s .4s;
}
.drop.is-open .drop__panel{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.drop__panel li + li{border-top:1px solid rgba(246,244,240,.18)}
.drop__panel a{
  --bc:var(--red);--bh:var(--paper-hi);
  display:flex;align-items:baseline;gap:16px;
  padding:14px 16px;
  font-size:var(--fs-h4);line-height:1.2;
}

/* « Contactez-nous » : fond encre, texte blanc, les bandes montent en rouge */
.nav__cta{
  margin-left:auto;gap:10px;background-color:var(--ink);color:var(--paper-hi);--bc:var(--red);--bh:var(--paper-hi);
  /* même transition que .bd, plus le fond : en repassant du filet au bouton plein, fond et texte changent ensemble (pas d'encre sur encre) */
  transition:
    --b1 .36s var(--ease-bd) 120ms,--b2 .36s var(--ease-bd) 80ms,
    --b3 .36s var(--ease-bd) 40ms,--b4 .36s var(--ease-bd) 0s,
    color .22s ease 0s,background-color .22s ease 0s;
}
.nav__burger{display:none;margin-left:auto;background-color:var(--ink);color:var(--paper-hi);--bc:var(--red);--bh:var(--paper-hi)}

/* Menu plein écran (mobile) */
.menu{
  position:fixed;inset:0;z-index:40;background:var(--paper);overflow-y:auto;
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-7);
  padding:96px var(--gut) var(--gut);
}
.menu[hidden]{display:none}
.menu nav{display:flex;flex-direction:column;gap:2px}
.menu a,.menu__t{
  font-weight:var(--w-light);font-size:clamp(40px,12vw,72px);
  line-height:1.05;letter-spacing:-.04em;
  display:flex;align-items:flex-start;gap:10px;
}
.menu__group{display:flex;flex-direction:column;gap:2px}
.menu__t{color:var(--graphite)}
.menu__group a{font-size:clamp(28px,8vw,48px);padding-left:var(--sp-5)}
.menu a small{font-size:12px;letter-spacing:var(--ls-tag);margin-top:.9em}

/* ---------- 1. Écran d'accueil ---------- */
.hero{position:relative;display:flex;flex-direction:column;padding:0 var(--gut);min-height:560px}

.lede{
  width:48%;max-width:none;margin:var(--sp-7) 0 var(--sp-7) auto;   /* 48 % = de la moitié du G au bord droit du logo */
  font-family:var(--font-display);font-weight:var(--w-thin);
  font-size:var(--fs-lede);line-height:1.12;letter-spacing:-.015em;
  text-indent:2.2em;text-wrap:pretty;
}
.js .lede{opacity:0;transform:translateY(14px)}
.is-ready .lede{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease-out) var(--arrive),transform .9s var(--ease-out) var(--arrive);
}

.hero__foot{
  margin-top:auto;padding:var(--sp-4) 0 var(--sp-5);
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--gut);
}

.js .hero__foot{opacity:0;transition:opacity .7s var(--ease-out) var(--arrive)}
.is-ready .hero__foot{opacity:1}

/* ---------- Bascule Grille / Liste : onglets typographiques (1D) ----------
   Deux mots en PP Mori Extralight ; un filet glisse sous l'actif.
   Au survol, le mot « roule » vers IvyPresto Thin.
   Dérogation assumée à la règle 03 (IvyPresto hors élément cliquable),
   demandée en recette. Toujours ≥ 32 px.                              */
.roll{display:inline-grid;overflow:hidden;line-height:1.1;padding:.04em .04em .12em 0;vertical-align:bottom}
.roll > span{grid-area:1 / 1;display:block;transition:transform .45s var(--ease-out)}
.roll__a{font-family:var(--font-sans);font-weight:var(--w-light);letter-spacing:-.03em}
.roll__b{font-family:var(--font-display);font-weight:var(--w-thin);letter-spacing:-.015em;transform:translateY(112%)}

.td{position:relative;display:flex;align-items:flex-end;gap:.5em;font-size:var(--fs-l);line-height:1;padding-bottom:7px}
.td__b{
  display:inline-flex;align-items:flex-start;gap:.04em;
  color:color-mix(in srgb,var(--ink) 55%,transparent);   /* inactif : 3,8 : 1 (grand texte : 3 : 1 requis) */
  transition:color .3s var(--ease-out);
}
.td__b[aria-pressed="true"],.td__b:hover{color:var(--ink)}

.td__b:hover .roll__a,.td__b:focus-visible .roll__a{transform:translateY(-112%)}
.td__b:hover .roll__b,.td__b:focus-visible .roll__b{transform:none}
.td__b:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.td__bar{
  position:absolute;left:var(--x,0);bottom:0;width:var(--w,0);height:4px;background:var(--ink);
  transition:left .4s var(--ease-out),width .4s var(--ease-out);
}

/* ---------- 2. Références : grille / liste ---------- */
.work{padding:var(--sp-9) var(--gut) var(--sp-10);min-height:80vh}
.view{transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}
.view[hidden]{display:none}
.view.is-out{opacity:0;transform:translateY(-10px)}

.li__a:hover .rn__a,.li__a:focus-visible .rn__a{transform:translateY(-112%)}
.li__a:hover .rn__b,.li__a:focus-visible .rn__b{transform:none}

/* grille (d'après « Nakornsang Studio ») : un module par projet sur trois colonnes.
   Une cellule de texte et deux images : la principale et un détail recadré. Le texte est tantôt à gauche
   (data-tp="l"), au milieu (m) ou à droite (r). Le détail dérive au scroll (data-drift, --sp). */
.grid{display:flex;flex-direction:column;gap:var(--sp-9)}
.gm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--sp-5);align-items:start}
.gm > *{grid-row:1}
.gm[data-tp="l"] .gm__t{grid-column:1}  .gm[data-tp="l"] .gm__i1{grid-column:2}  .gm[data-tp="l"] .gm__i2{grid-column:3}
.gm[data-tp="m"] .gm__i1{grid-column:1}  .gm[data-tp="m"] .gm__t{grid-column:2}  .gm[data-tp="m"] .gm__i2{grid-column:3}
.gm[data-tp="r"] .gm__i1{grid-column:1}  .gm[data-tp="r"] .gm__i2{grid-column:2}  .gm[data-tp="r"] .gm__t{grid-column:3}
.gm__t{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-6)}
.gm__txt{display:flex;flex-direction:column;gap:var(--sp-3)}
.gm__name{font-family:var(--font-display);font-weight:var(--w-thin);font-size:clamp(40px,5.2vw,92px);line-height:1;letter-spacing:-.04em;text-wrap:balance}   /* IvyPresto Thin (avec empattement) en permanence, sans survol : grand, serré, sur deux lignes si besoin (la liste garde le D3) */
.gm__d{max-width:34ch;font-size:15px;line-height:1.45;color:var(--graphite)}

/* légendes : le niveau « légende » du référentiel (Regular 12 px) */

.gm__i{display:block}

.gm__i figure{margin:0;overflow:hidden;background:#d9d6cf;aspect-ratio:var(--ar)}
.gm__i2{margin-top:calc(var(--mt,0) * 1vw);will-change:transform}
.gm__i2 figure{aspect-ratio:var(--ar2)}
.gm__i img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.gm__i2 img{transform:scale(var(--z2,1));transform-origin:var(--o2,50% 50%)}
.gm__i1:hover img,.gm__i1:focus-visible img{transform:scale(1.05)}
.gm__i2:hover img{transform:scale(calc(var(--z2,1) * 1.05))}

/* nom de projet dans la liste : Mori Light, au survol il roule vers l'IvyPresto Thin (la grille, elle, est en IvyPresto Thin fixe) */
.rn{display:grid;overflow:hidden;padding-bottom:.1em}
.rn > span{grid-area:1 / 1;display:block;transition:transform .4s var(--ease-out)}
.rn__b{font-family:var(--font-display);font-weight:var(--w-thin);letter-spacing:-.015em;transform:translateY(112%)}

/* liste (d'après « Laboratorio Futuro ») : un filet par projet ; à gauche le titre, au milieu la fiche, à droite trois vignettes */
.list{border-bottom:0}
.li{border-top:1px solid var(--ink)}
.li__a{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start;
  padding:var(--sp-6) 0;
  transition:background-color .35s var(--ease-out);
}
.li__a:hover,.li__a:focus-visible{background-color:var(--paper-hi);outline:none}
/* le nom est au plancher du niveau D3 (32 px) et le numéro s'en détache : titre et fiche respirent */
.li__t{grid-column:1 / span 3;display:flex;flex-direction:column;gap:var(--sp-5)}
.li__name{font-size:32px;line-height:1.2}
.li__m{grid-column:4 / span 4;display:flex;flex-direction:column;gap:var(--sp-3);padding-top:.5em}
.li__m > div{display:grid;grid-template-columns:7.5em minmax(0,1fr);column-gap:var(--sp-3);align-items:baseline}
.li__m dt{color:var(--graphite)}
.li__m dd{font-size:15px;line-height:1.5}
.li__thumbs{grid-column:8 / span 5;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.th{aspect-ratio:16 / 10;overflow:hidden;background:#d9d6cf}
.th img{width:100%;height:100%;object-fit:cover;transform:scale(var(--z));transform-origin:var(--o);transition:transform 1.1s var(--ease-out)}
.li__a:hover .th img,.li__a:focus-visible .th img{transform:scale(calc(var(--z) * 1.07))}

/* ---------- carrousel (3e vue) ----------
   Une rangée de photos verticales, de tailles et de hauteurs d'accroche différentes, avec un numéro fin
   (IvyPresto Thin) au-dessus de chacune. Le titre en haut suit la photo en cours (au défilement comme au survol).
   Glisse inertielle (molette horizontale, glisser, flèches, clavier) : voir le bloc « Carrousel » de accueil.js. */
html[data-view="car"] .work{min-height:0;padding-bottom:var(--sp-8)}
.car{--ch:clamp(260px,calc(100svh - 93px - 270px),760px)}
/* épinglé : la vue reste collée sous la barre pendant que le scroll vertical devient horizontal
   (la hauteur de .view--car est posée par accueil.js : hauteur de la vue + distance de glisse) */
.view--car .car{position:sticky;top:93px}
.view--car .car.is-flat{position:static}   /* écran trop bas ou mouvement réduit : pas d'épinglage */      /* hauteur de la plus grande photo */

.car__view{
  position:relative;overflow:hidden;margin:0 calc(var(--gut) * -1);
  height:calc(var(--ch) + 76px);
  touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;
}
.car__view.is-drag{cursor:grabbing}
.car__view:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.car__track{
  position:relative;display:flex;align-items:flex-start;gap:clamp(40px,8vw,140px);
  width:max-content;padding:0 var(--gut);will-change:transform;
}
.ci{flex:none;margin-top:calc(var(--ch) * var(--o,0))}
.ci__a{display:block;transition:opacity .5s var(--ease-out);transform:scale(var(--s,1));transform-origin:50% 60%}
/* légende sous l'image : numéro (eyebrow), nom (h4), prestations (légende), interlignes serrés */
.ci__c{
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--sp-3);row-gap:2px;margin-top:var(--sp-3);
  width:calc(var(--ch) * var(--k,1) * var(--arn,.8));
}

.ci__cname{font-family:var(--font-sans);font-size:var(--fs-h4);font-weight:var(--w-regular);letter-spacing:0;line-height:1.25}

.ci__media{
  margin:0;overflow:hidden;background:#d9d6cf;
  height:calc(var(--ch) * var(--k,1));
  width:calc(var(--ch) * var(--k,1) * var(--arn,.8));
}
.ci__media img{
  width:100%;height:100%;object-fit:cover;pointer-events:none;
  transform:scale(1.001);transition:transform 1.3s var(--ease-out);
}
@media (hover:hover){
  .ci__a:hover .ci__media img{transform:scale(1.045)}
  .car__track:has(.ci__a:hover) .ci__a:not(:hover){opacity:.45}
}
.car__track.has-sel .ci:not(.is-cur) .ci__a{opacity:.45}
.car__view.is-drag .ci__a{pointer-events:none}

.car__foot{display:flex;align-items:center;gap:var(--sp-6);margin-top:var(--sp-5)}
.car__bar{position:relative;flex:1;height:1px;background:var(--line)}
.car__bar i{
  position:absolute;top:-.5px;height:2px;background:var(--ink);
  width:calc(var(--f,.3) * 100%);left:calc(var(--p,0) * (100% - var(--f,.3) * 100%));
}
.car__btns{display:flex;gap:6px}
.car__b{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border:1px solid var(--ink);background-color:transparent;
  font-size:16px;line-height:1;
}
.car__b[disabled]{opacity:.3;pointer-events:none}

/* ---------- 2 bis. Manifeste entre les références et les pôles ----------
   Une grande phrase en IvyPresto Thin (display, plancher de 32 px) ; les mots s'allument au fil du scroll (accueil.js, [data-lit]).
   Sans JavaScript, en mouvement réduit et à l'impression, tout est allumé d'emblée. */
.manif{padding:var(--sp-7) var(--gut) var(--sp-10)}


.manif__p{
  font-family:var(--font-display);font-weight:var(--w-thin);
  font-size:clamp(36px,6.2vw,108px);line-height:1.04;letter-spacing:-.02em;
  max-width:18em;text-wrap:balance;
}
.js .manif__p .w{opacity:.16;transition:opacity .7s var(--ease)}
.js .manif__p .w.is-on{opacity:1}

/* ---------- 3. Pôles : panneaux qui s'ouvrent (2C) ---------- */
.poles{padding:var(--sp-9) var(--gut) var(--sp-10)}
.poles__head{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);
  margin-bottom:var(--sp-7);align-items:start;
}
.poles__head h2{grid-column:1 / span 3}
.poles__intro{
  grid-column:4 / span 7;max-width:none;margin-top:-.5em;
  font-size:var(--fs-intro);line-height:1.25;letter-spacing:-.01em;
}
.poles__head .eyebrow{grid-column:12;justify-self:end}
@media (hover:hover) and (pointer:fine){.poles__intro::after{content:' Survolez un pôle, puis une expertise.'}}

.lead{
  font-size:var(--fs-intro);line-height:1.2;letter-spacing:-.01em;font-weight:var(--w-regular);
}
/* image d'expertise : emplacement FIXE, rideau qui change au survol, légende = nom + phrase */
.swap{position:relative;overflow:hidden;aspect-ratio:16/10;background:rgba(0,0,0,.12)}
.swap img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  clip-path:inset(100% 0 0 0);
}
.swap img.is-on{clip-path:inset(0 0 0 0);animation:wipe .85s var(--ease-io) both}
@keyframes wipe{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}

.cls{display:flex;flex-direction:column;margin-top:var(--sp-2);border-top:1px solid color-mix(in srgb,var(--on) 30%,transparent)}
.cls li{border-bottom:1px solid color-mix(in srgb,var(--on) 30%,transparent)}
.cl{
  --bc:var(--on);--bh:var(--hov,var(--c));
  display:grid;grid-template-columns:1fr auto;column-gap:16px;row-gap:3px;
  padding:13px 12px;
}
.cl__t{font-size:20px;line-height:1.2}
.cl__a{font-size:18px;line-height:1.2}
/* la phrase de chaque expertise apparaît dans la légende de l'image au survol ;
   sans survol possible (tactile, mobile), elle reste sous le titre */
.cl__d{grid-column:1 / -1;font-size:14px;line-height:1.35;opacity:.88;display:none}
@media (hover:none){.cl__d{display:block}}
.go{
  --bc:var(--on);--bh:var(--hov,var(--c));
  align-self:flex-start;gap:10px;height:44px;padding:0 18px;margin-top:var(--sp-3);
  border:1px solid currentColor;
}

.pc{display:flex;gap:var(--gut);height:clamp(660px,52vw,780px)}
.pc__p{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;cursor:pointer;
  background:var(--c);color:var(--on);
  transition:flex-grow .9s var(--ease-io);
}
.pc__p.is-on{flex-grow:4.4;cursor:default}
.pc__p:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.pc__rail{
  position:absolute;inset:0;padding:16px;
  display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;
  transition:opacity .4s var(--ease);
}
.pc__v{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:clamp(40px,5vw,84px);font-weight:var(--w-light);letter-spacing:-.04em;line-height:1;
}
.pc__p.is-on .pc__rail{opacity:0;pointer-events:none}
.pc__in{
  position:absolute;inset:0;min-width:min(660px,46vw);
  padding:clamp(16px,1.8vw,28px);overflow:hidden;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.pc__p.is-on .pc__in{opacity:1;pointer-events:auto;transition:opacity .6s var(--ease) .5s}

.pc .cls{margin-top:var(--sp-3)}
.pc .cl{padding:11px 12px}
/* l'image reste toujours au même endroit : en haut à droite du panneau ouvert */
.pc .swap{
  position:absolute;top:clamp(16px,1.8vw,28px);right:clamp(16px,1.8vw,28px);
  width:min(34%,340px);aspect-ratio:4/5;
}

/* ---------- 3 bis. Pôles : sans photo, le pôle puis ses expertises ----------
   Titre PP Mori SemiBold en « Majuscule puis minuscules » (la voix du logo, sans l'agressivité des capitales).
   À gauche le titre et le texte ; à droite UNE liste : la ligne du pôle (en encre), puis ses expertises. */
.pcv{height:clamp(560px,42vw,620px)}
.pcv .pc__v{font-weight:var(--w-light);letter-spacing:-.04em;font-size:var(--fs-l)}
.pcv .pc__in{
  min-width:min(760px,54vw);overflow:hidden;
  padding:clamp(18px,2vw,32px);
  display:flex;flex-direction:row;gap:clamp(20px,2.4vw,40px);
}
.pcv p{max-width:56ch}
.pv__t{font-weight:var(--w-light);line-height:1;letter-spacing:-.04em;font-size:var(--fs-xl)}
.pv6__a{flex:1 1 42%;min-width:0;display:flex;flex-direction:column;gap:14px}
.pv6__b{flex:1 1 56%;min-width:0;display:flex;flex-direction:column;gap:10px;justify-content:flex-end}

.pv6__ls{display:flex;flex-direction:column}
.pv6__pole{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:60px;padding:0 18px;margin-bottom:6px;
  background-color:var(--on);color:var(--hov,var(--c));--bc:var(--c);--bh:var(--on);
  font-family:var(--font-sans);font-weight:var(--w-semi);font-size:var(--fs-ui);line-height:1;
  letter-spacing:var(--ls-ui);text-transform:uppercase;white-space:nowrap;
}
/* fluidité du survol : rien ne se remet en page pendant que le panneau s'ouvre.
   Le contenu garde sa largeur d'ouverture et le rail sa largeur de fermeture (calculées sur le conteneur) :
   seuls les panneaux changent de taille, le texte ne se recoupe plus à chaque image. */
.pc{container-type:inline-size}
.pcv .pc__p{contain:layout paint}
.pcv .pc__rail{inset:0 auto 0 0;width:calc((100cqw - 2 * var(--gut)) / 6.4)}
.pcv .pc__in{inset:0 auto 0 0;width:calc((100cqw - 2 * var(--gut)) * 4.4 / 6.4);min-width:0}
.pcv .pc__rail,.pcv .pc__in{will-change:opacity}
.pcv .cl__d{display:block}

/* ---------- 3 ter. Showreel : la vidéo grandit avec le scroll ----------
   La vidéo garde ses proportions (2534 × 1080), jamais recadrée. Le mouvement est une animation PILOTÉE PAR LE SCROLL (animation-timeline) : elle tourne sur le
   compositeur du navigateur, au pixel près avec le défilement, sans JavaScript, sans retard ni inertie (c'est le retard d'un script qui donnait l'impression
   que la vidéo « flottait »). La scène est collée pendant qu'elle grandit de 51 % à 75 % de la largeur de l'écran (75 % au plus, voulu par Anthony le 19 oct.) ; ni inclinaison, ni décalage, ni rideau.
   Sans animation-timeline (anciens navigateurs), en mouvement réduit et sur téléphone : un bloc pleine largeur qui défile avec la page. */
.reel{position:relative}
.reel__frame{position:relative;width:100%;aspect-ratio:2534 / 1080;overflow:hidden;background:#1b1a18}
@media (min-width:701px){.reel__frame{width:75%;margin-inline:auto}}      /* au plus 75 % de la largeur de l'écran, centrée (Anthony, 19 oct. : 70 % puis 75 %) ; sur téléphone : toute la largeur */
.reel__v{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#1b1a18;   /* jamais recadrée : tout le plan, sur toute la largeur du cadre */
}
.reel__pp{display:block;margin:var(--sp-3) var(--gut) var(--sp-5) auto;padding:12px 4px;border-bottom:1px solid transparent;transition:border-color .25s}
.reel__pp:hover,.reel__pp:focus-visible{border-bottom-color:currentColor}
@media (min-width:701px){.reel__pp{margin-right:12.5%}}      /* aligné sur le bord droit de la vidéo (75 % centrée : 12,5 % de chaque côté) */
@keyframes reel-grow{from{transform:scale(.686)}to{transform:scale(1)}}      /* 75 % × 0,686 ≈ 51 % au départ → 75 % */
@supports (animation-timeline: view()){
  @media (min-width:701px) and (prefers-reduced-motion:no-preference){
    .reel{height:210svh;view-timeline:--reel block}
    .reel__pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
    .reel__frame{animation:reel-grow linear both;animation-timeline:--reel;animation-range:cover 18% cover 56%;transform-origin:50% 50%;will-change:transform}
    .reel__pp{margin-bottom:0}
  }
}

/* ---------- 4. Boire un café : conversation (3C) ---------- */
.contact{
  --open:0;
  position:relative;isolation:isolate;
  min-height:100svh;
  display:flex;flex-direction:column;gap:var(--sp-7);
  padding:calc(var(--sp-5) + 8px) calc(var(--gut) + 8px) var(--sp-6);
  color:var(--ink);
}
/* le fond s'ouvre du cadre au plein écran — sans jamais refaire couler le texte */
.contact__bg{
  position:absolute;z-index:-1;
  inset:0 calc(var(--gut) * (1 - var(--open)));
  background:var(--red);overflow:hidden;
}
.contact__glow{
  position:absolute;left:0;top:0;
  width:80vmin;height:80vmin;border-radius:50%;
  background:radial-gradient(circle,rgba(249,172,40,.95),rgba(249,172,40,0) 62%);
  transform:translate3d(60vw,20vh,0) translate(-50%,-50%);
  will-change:transform;
}
.contact__top{display:flex;justify-content:space-between;align-items:center}

.cb{flex:1;display:flex;flex-direction:column;gap:var(--sp-6);min-width:0}

/* la phrase s'écrit au fil des réponses ; chaque mot répondu est un bouton pour le corriger */

@keyframes fragIn{from{opacity:0;transform:translateY(.45em);background-color:rgba(246,244,240,.7)}to{opacity:1;transform:none}}

.cb__stage{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0}
.cb__step{border:0;min-width:0;animation:stepIn .8s var(--ease)}
.cb__step[hidden],.cb__thanks[hidden]{display:none}
.cb__step.is-out{animation:stepOut .26s var(--ease) both}
@keyframes stepIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes stepOut{to{opacity:0;transform:translateY(-16px)}}

.cb__q{display:block;max-width:16ch;font-weight:var(--w-light);font-size:clamp(34px,6.4vw,104px);line-height:1.02;letter-spacing:-.045em}
.cb__sub{margin-top:var(--sp-4);max-width:46ch;font-size:clamp(17px,1.5vw,22px)}
.cb__field{position:relative;margin-top:var(--sp-5);max-width:min(100%,980px)}
.cb__in{
  display:block;width:100%;
  font:inherit;font-size:clamp(24px,3.2vw,48px);font-weight:var(--w-light);letter-spacing:-.03em;line-height:1.2;
  color:var(--ink);background:var(--paper-hi);
  border:2px solid var(--ink);border-radius:0;outline:0;padding:.34em 5.2em .34em .45em;
}
.cb__in::placeholder{color:var(--graphite);opacity:1}
.cb__in:focus{background:#fff;outline:2px solid var(--ink);outline-offset:4px}

.cb__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut);margin-top:var(--sp-5);max-width:980px}
.cb__thanks{animation:stepIn .8s var(--ease)}
.cb__thanks .copy{margin-top:.2em}
.cb.is-sent .cb__nav{display:none}

.tile{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  min-height:64px;padding:0 16px;
  border:2px solid var(--ink);cursor:pointer;
  background-color:var(--paper-hi);
  --bc:var(--ink);--bh:var(--paper-hi);
}
.tile input{position:absolute;opacity:0;pointer-events:none}
.tile__t{font-size:20px;line-height:1.2}
.tile__ok{width:14px;height:14px;border:2px solid currentColor}
.tile:has(input:checked){background-color:var(--ink);color:var(--paper-hi);--bc:var(--ink);--bh:var(--paper-hi)}
.tile:has(input:checked) .tile__ok{background:currentColor}
.tile:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}

.cb__nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.send[hidden]{display:none}

.send{
  justify-content:space-between;gap:12px;height:56px;min-width:220px;padding:0 20px;
  background-color:var(--ink);color:var(--paper-hi);
  --bc:var(--paper-hi);--bh:var(--ink);
}
.send:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.shake{animation:shake .5s}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

.contact__cols{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut);
  padding-top:var(--sp-5);border-top:1px solid rgba(18,18,17,.28);margin-top:auto;
}
.contact__cols .eyebrow{margin-bottom:var(--sp-3)}
.copy{display:inline;font-size:var(--fs-body);line-height:1.55;border-bottom:1px solid currentColor}
.contact__cols a{border-bottom:1px solid transparent;transition:border-color .2s}
.contact__cols a:hover{border-bottom-color:currentColor}

/* ---------- 4 bis. Boire un café : le ticket de caisse ----------
   Fond encre. Un ticket thermique, technique : police mono, filets en pointillé, cases, code-barres,
   Notre-Dame de la Garde en points derrière le texte (img/ndg-dots.svg, tramée à partir de la photo).
   À l'envoi, le monogramme est tamponné. Même conversation qu'avant (accueil.js) ; en face, rien que
   l'essentiel : la question, le champ, un bouton, deux liens discrets. */
.contact--ticket{
  --font-mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;
  --tk-paper:#D8DAD4;
  color:var(--paper);
}
.contact--ticket .contact__bg{background:#1b1a18}
.contact--ticket .contact__glow{display:none}
.contact--ticket .eyebrow{color:color-mix(in srgb,var(--paper) 62%,transparent)}
.contact--ticket .contact__cols{border-top-color:color-mix(in srgb,var(--paper) 22%,transparent)}

.cx__form{
  --tkh:clamp(620px,calc(100svh - 220px),820px);
  display:grid;grid-template-columns:minmax(0,620px) calc(var(--tkh) * .64);column-gap:clamp(48px,7vw,120px);
  justify-content:center;align-items:center;flex:none;
}
.cx__stage{grid-column:1;grid-row:1;align-self:start;justify-content:flex-start}
.cx__nav{grid-column:1;grid-row:2;align-self:start}
/* les coordonnées descendent en bas de la colonne, alignées sur le bas du ticket : plus de grand vide à gauche */
.cx__cols{grid-column:1;grid-row:3;align-self:end;margin-top:0;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:var(--sp-5)}
.cx__form{grid-template-rows:auto auto 1fr}
.cx__form .tk2{grid-column:2;grid-row:1 / span 3}

/* question, champ */

.contact--ticket .cb__q{max-width:13ch;font-size:var(--fs-xl);color:var(--paper)}
.contact--ticket .cb__sub{color:color-mix(in srgb,var(--paper) 78%,transparent)}
.contact--ticket .cb__field{margin-top:var(--sp-6)}
.contact--ticket .cb__in{
  background:transparent;color:var(--paper);caret-color:var(--amber);
  border:0;border-bottom:1px solid color-mix(in srgb,var(--paper) 45%,transparent);
  padding:.28em 0;font-size:var(--fs-m);
  transition:border-color .3s var(--ease-out);
}
.contact--ticket .cb__in::placeholder{color:color-mix(in srgb,var(--paper) 56%,transparent)}
.contact--ticket .cb__in:focus{background:transparent;outline:0;border-bottom-color:var(--amber)}
/* besoins : trois lignes, pas trois cases */
.contact--ticket .cb__tiles{display:flex;flex-direction:column;gap:0;max-width:560px;margin-top:var(--sp-5);
  border-top:1px solid color-mix(in srgb,var(--paper) 28%,transparent)}
.contact--ticket .tile{
  min-height:64px;padding:0 6px;border:0;border-bottom:1px solid color-mix(in srgb,var(--paper) 28%,transparent);
  grid-template-columns:52px 1fr auto;background-color:transparent;color:var(--paper);
  --bc:var(--paper);--bh:var(--ink);
}

.contact--ticket .tile__t{font-size:var(--fs-m);font-weight:var(--w-light);letter-spacing:-.03em}
.contact--ticket .tile__ok{border-color:currentColor}
.contact--ticket .tile:has(input:checked){background-color:var(--amber);color:var(--ink);--bc:var(--paper);--bh:var(--ink)}

.contact--ticket .tile:has(input:focus-visible){outline:2px solid var(--amber);outline-offset:2px}
/* au survol les bandes se remplissent en papier : le texte doit passer à l'encre (sinon papier sur papier, invisible) */
.contact--ticket .tile:hover{color:var(--ink)}

/* commandes : un bouton, deux liens */
.cx__nav{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-6)}
.cx__go{
  display:inline-flex;align-items:center;gap:14px;height:56px;padding:0 24px;
  background-color:var(--paper);color:var(--ink);--bc:var(--amber);--bh:var(--ink);
  font-weight:var(--w-semi);font-size:var(--fs-ui);letter-spacing:var(--ls-ui);text-transform:uppercase;white-space:nowrap;
}
.cx__go--send{background-color:var(--amber);--bc:var(--paper);min-width:0}
.cx__go[hidden]{display:none}
.cx__go:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.cx__lk{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;line-height:1;
  color:color-mix(in srgb,var(--paper) 72%,transparent);
  padding:8px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.cx__lk:hover,.cx__lk:focus-visible{color:var(--paper);border-bottom-color:currentColor;outline:0}
.cx__lk:disabled{display:none}
.cx__lk[hidden]{display:none}
.cx__hint{flex-basis:100%;min-height:1.4em;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--amber);order:9}
.contact--ticket .copy{color:var(--paper)}

/* le ticket : papier grège, filets fins, machine à écrire, titre IvyPresto (d'après l'exemple « panier » d'Anthony) */
.contact--ticket{--tk-paper:#D9D4CA;--tk-ink:#2a2824;--tk-line:#8d887c;--font-type:'Courier New',Courier,'Nimbus Mono PS',ui-monospace,monospace}
.tk2{
  --z:6px;
  position:relative;isolation:isolate;overflow:hidden;
  width:100%;height:var(--tkh);
  padding:clamp(24px,2.4vw,34px) clamp(20px,2vw,30px) clamp(30px,3vw,40px);
  background-color:var(--tk-paper);color:var(--tk-ink);
  display:flex;flex-direction:column;gap:12px;
  font-family:var(--font-type);font-size:12px;line-height:1.35;letter-spacing:.05em;text-transform:uppercase;
  transform:rotate(1deg);
  -webkit-mask:
    conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2*var(--z)) 51% repeat-x,
    conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/calc(2*var(--z)) 51% repeat-x;
  mask:
    conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2*var(--z)) 51% repeat-x,
    conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/calc(2*var(--z)) 51% repeat-x;
}
:where(.tk2) p,:where(.tk2) dd,:where(.tk2) dt{font:inherit;letter-spacing:inherit;text-transform:inherit}
/* le papier : un grain très léger */
.tk2::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:multiply;opacity:.14;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
/* Notre-Dame de la Garde en points, très en retrait derrière le texte */
.tk2__dots{
  position:absolute;z-index:-1;inset:15% 8% 17%;pointer-events:none;mix-blend-mode:multiply;
  background:center / contain no-repeat;opacity:.3;
}
/* l'image de Notre-Dame (64 Ko) ne se charge que quand le contact approche (classe posée par accueil.js) */
.contact.is-near .tk2__dots{background-image:url(../img/ndg-dots.svg)}
.tk2__h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:6px}
.tk2__mono{
  flex:none;width:30px;height:35px;background:var(--tk-ink);
  -webkit-mask:url(../img/monogramme-mdg.svg) center / contain no-repeat;mask:url(../img/monogramme-mdg.svg) center / contain no-repeat;
}
.tk2__title{
  font-family:var(--font-display);font-weight:var(--w-thin);text-transform:none;
  font-size:clamp(32px,2.6vw,38px);line-height:1;letter-spacing:-.01em;text-align:right;
}
.tk2__title sup{font-family:var(--font-type);font-weight:400;font-size:11px;letter-spacing:.06em;margin-left:4px;vertical-align:super}
.tk2__meta,.tk2__tot{display:flex;flex-direction:column;border-top:1px solid var(--tk-line)}
.tk2__meta > div,.tk2__tot > div{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px solid var(--tk-line)}
.tk2__meta dt{opacity:.76}
.tk2__s1{display:none}
.cb.is-sent .tk2__s0{display:none}
.cb.is-sent .tk2__s1{display:inline}
.tk2__th{display:flex;justify-content:space-between;padding:0 0 4px;border-bottom:1px solid var(--tk-line);opacity:.76;margin-top:4px}

/* réponses : un filet par ligne, « • », et « modifier » à droite (chaque ligne ramène à sa question) */
.tk2__l{display:flex;flex-direction:column;margin-top:-12px}
.tk2__l li{border-bottom:1px solid var(--tk-line)}
.tk2__l .r{
  display:grid;grid-template-columns:27% minmax(0,1fr) auto;column-gap:8px;align-items:baseline;
  width:100%;padding:6px 0;text-align:left;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer;
}
.tk2__l .l{grid-area:1 / 1;opacity:.76}
.tk2__l .v{grid-area:1 / 2}
.tk2__l .r i{grid-area:1 / 3}
.tk2__l .v{position:relative;padding-left:14px;text-transform:none;font-weight:700;letter-spacing:.01em;overflow-wrap:anywhere}
.tk2__l .v::before{content:'•';position:absolute;left:0;font-weight:400}
.tk2__l .r i{font-style:normal;opacity:.5;border-bottom:1px solid transparent}
.tk2__l .r i::before{content:'Modifier'}
.tk2__l li.is-cur .r i{visibility:hidden}
.tk2__l li.is-cur .v:empty::before{content:'•'}
.tk2__l li.is-cur .v{animation:caret 1.1s steps(2,jump-none) infinite}
@keyframes caret{50%{opacity:.35}}
.tk2__l .r:hover i,.tk2__l .r:focus-visible i{opacity:1;border-bottom-color:currentColor}
.tk2__l .r:focus-visible{outline:1px solid var(--tk-ink);outline-offset:2px}
.tk2__l li.is-new{animation:tkPrint .6s steps(16,end) both}
@keyframes tkPrint{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.tk2__tot{margin-top:auto}
.tk2__tot > div:last-child{font-weight:700}
.tk2__bar{display:flex;flex-direction:column;gap:3px;margin-top:4px}
.tk2__bar svg{display:block;width:100%;height:30px}
.tk2__f{text-align:center;font-size:11px;letter-spacing:.08em;opacity:.78}

/* le tampon : le monogramme, encre un peu irrégulière, qui tombe à l'envoi */
.stamp2{
  position:absolute;z-index:3;right:7%;bottom:21%;width:44%;height:auto;
  color:var(--red);mix-blend-mode:multiply;pointer-events:none;
  opacity:0;transform:rotate(-14deg) scale(1.9);
}
.cb.is-sent .stamp2{
  opacity:.92;transform:rotate(-14deg) scale(1);
  transition:opacity .1s .45s,transform .32s cubic-bezier(.3,1.5,.5,1) .4s;
}
.cb.is-sent .tk2{animation:tkThud .45s var(--ease) .7s}
@keyframes tkThud{40%{transform:rotate(1deg) translateY(5px)}}

@media (max-width:900px){
  .cx__form{grid-template-columns:minmax(0,1fr);row-gap:var(--sp-6)}
  .cx__form .tk2{grid-column:1;grid-row:1;justify-self:center;width:min(100%,360px);height:auto;min-height:340px;transform:rotate(1deg)}
  .cx__form{grid-template-rows:none}
  .cx__stage{grid-row:2;align-self:start}
  .cx__nav{grid-row:3}
  .cx__cols{grid-row:4;grid-template-columns:1fr 1fr;justify-content:stretch;margin-top:var(--sp-5)}
  .cx__cols > div:first-child{grid-column:1 / -1}
  .tk2__meta,.tk2__f{display:none}
  .tk2__dots{inset:4% 8% 6%}
}

/* ---------- Page 404 ---------- */
.nf{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:var(--sp-6);padding:var(--sp-8) var(--gut)}
.nf__t{font-size:var(--fs-mark);line-height:var(--lh-mark);letter-spacing:var(--ls-mark)}
.nf__p{max-width:44ch;font-size:var(--fs-intro);line-height:1.3}
.nf__go{display:flex;flex-wrap:wrap;gap:var(--sp-3);max-width:none}
.nf__b{display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 24px;background-color:var(--ink);color:var(--paper-hi);--bc:var(--red);--bh:var(--paper-hi);font-size:var(--fs-ui);font-weight:var(--w-semi);letter-spacing:var(--ls-ui);text-transform:uppercase}
.nf__b--alt{background-color:transparent;color:var(--ink);border:1px solid var(--ink);--bc:var(--ink);--bh:var(--paper-hi)}

/* ---------- Pied de page ---------- */
.foot{
  background:var(--ink);color:var(--paper);
  padding:var(--sp-8) 0 var(--sp-4);
}
.foot__cols{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut);
  padding:0 var(--gut) var(--sp-9);
}
.foot__cols .eyebrow{margin-bottom:var(--sp-3);color:#9d9a93}
.foot a{border-bottom:1px solid transparent;transition:border-color .2s}
.foot a:hover{border-bottom-color:currentColor}
.mark--foot{color:var(--paper)}

   /* contraste ≈ 5,3:1 sur le jaune */

.foot__base{
  display:flex;justify-content:space-between;
  padding:var(--sp-5) var(--gut) 0;color:#9d9a93;
}

/* ---------- Curseur ---------- */
.cursor{display:none}
@media (hover:hover) and (pointer:fine){
  .cursor{
    display:block;position:fixed;left:0;top:0;pointer-events:none;
    z-index:80;width:84px;height:84px;margin:-42px 0 0 -42px;
    transform:translate3d(-200px,-200px,0);
  }
  .cursor span{
    position:absolute;inset:0;
    background:var(--ink);color:var(--paper-hi);
    display:grid;place-items:center;text-align:center;
    font-weight:var(--w-semi);font-size:var(--fs-ui);line-height:1;
    letter-spacing:var(--ls-ui);text-transform:uppercase;
    transform:scale(0);transition:transform .45s var(--ease);
  }
  .cursor.on span{transform:scale(1)}
  [data-cursor]{cursor:none}
}

/* ---------- Traînée de photos qui suit la souris ---------- */
/* z-index négatif : les photos passent SOUS tout le texte et toute l'interface.
   Format paysage 4/3. Taille réglable ici (--trail-w). */
.trail__i{
  --trail-w:clamp(100px,7.6vw,136px);
  position:fixed;left:0;top:0;z-index:-1;pointer-events:none;
  width:var(--trail-w);aspect-ratio:4/3;overflow:hidden;
  opacity:0;
}
.trail__i img{width:100%;height:100%;object-fit:cover}
@media (hover:none){.trail__i{display:none}}

/* ---------- Apparitions : fondu très léger, sans parallaxe ---------- */
.js .rv,
.js .fx{opacity:0;transform:translateY(22px)}
.js .rv.in,
.js .fx.in{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease-out) var(--d,0ms),transform .85s var(--ease-out) var(--d,0ms);
}
/* grille : le texte apparaît en fondu ; son accompagnement du scroll est dans `gm-title` plus bas (très léger, à peine perceptible). Les images se dévoilent par un rideau de bas en haut avec un zoom qui se pose (cascade) */
.js .gm__t.fx{transform:none}
.js .gm__i.fx{opacity:1;transform:translateY(clamp(40px,5vw,84px))}
.js .gm__i.fx.in{transform:none;transition:transform 1.3s var(--ease-out) var(--d,0ms)}
.js .gm__i.fx figure{clip-path:inset(100% 0 0 0)}
.js .gm__i.fx.in figure{clip-path:inset(0);transition:clip-path 1.25s var(--ease-bd) var(--d,0ms)}
.js .gm__i1.fx:not(.in) img{transform:scale(1.16)}
.js .gm__i1.fx.in img{transition:transform 1.7s var(--ease-out) var(--d,0ms)}
.js .gm__i1.fx.in:hover img{transform:scale(1.05);transition:transform 1.2s var(--ease-out)}
.js .gm__i2.fx:not(.in) img{transform:scale(calc(var(--z2,1) * 1.16))}
.js .gm__i2.fx.in img{transition:transform 1.7s var(--ease-out) var(--d,0ms)}
.js .gm__i2.fx.in:hover img{transform:scale(calc(var(--z2,1) * 1.05));transition:transform 1.2s var(--ease-out)}

/* liste : la ligne monte, les vignettes se dévoilent de gauche à droite */
.js .li.fx .th{clip-path:inset(0 100% 0 0)}
.js .li.fx.in .th{clip-path:inset(0);transition:clip-path 1s var(--ease-bd) calc(var(--d,0ms) + var(--k,0) * 90ms + 200ms)}
/* carrousel : l'image se dévoile par le bas, la légende suit, le tout en cascade de gauche à droite */
.js .ci.fx .ci__media{clip-path:inset(100% 0 0 0)}
.js .ci.fx.in .ci__media{clip-path:inset(0);transition:clip-path 1.2s var(--ease-bd) var(--d,0ms)}
.js .ci.fx:not(.in) .ci__media img{transform:scale(1.16)}
.js .ci.fx.in .ci__media img{transition:transform 1.6s var(--ease-out) var(--d,0ms)}
.js .ci.fx.in .ci__a:hover .ci__media img{transform:scale(1.045);transition:transform 1.3s var(--ease-out)}
.js .ci.fx .ci__c{opacity:0;transform:translateY(12px)}
.js .ci.fx.in .ci__c{opacity:1;transform:none;transition:opacity .8s var(--ease-out) calc(var(--d,0ms) + 500ms),transform .9s var(--ease-out) calc(var(--d,0ms) + 500ms)}

/* ---------- Responsive ---------- */
@media (max-width:1440px){
  .nav__a{padding:0 12px}
}
@media (max-width:1100px){

  .nav__cta{margin-left:auto}
  .pc .swap{display:none}

}
@media (max-width:900px){
  .gm{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gm .gm__t,.gm[data-tp] .gm__t{grid-column:1 / -1;grid-row:1;min-height:0}
  .gm[data-tp] .gm__i1{grid-column:1;grid-row:2}
  .gm[data-tp] .gm__i2{grid-column:2;grid-row:2;margin-top:clamp(20px,6vw,48px)}
  .gm__t{flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-4)}
  .gm__name{font-size:clamp(44px,12.5vw,76px)}

}
@media (max-width:1000px){
  .poles__intro{grid-column:4 / -1}
}
@media (max-width:900px){
  .pc{flex-direction:column;height:auto}
  .pc__p,.pc__p.is-on{flex:none;cursor:default}
  .pc__rail{display:none}
  .pc__in{position:static;opacity:1;pointer-events:auto;min-width:0;display:flex;flex-direction:column;gap:var(--gut)}
  .pc .swap{display:block;position:relative;top:auto;right:auto;width:auto;aspect-ratio:16/10;order:-1;margin:-16px -16px 0}
  .cl__d{display:block}
  .pcv{height:auto}
  .pcv .pc__in{flex-direction:column;min-width:0;width:auto}
  .pcv .pc__p{contain:none}
  .pv6__pole{white-space:normal;height:auto;min-height:60px;padding:14px 18px;line-height:1.25}
}
@media (max-width:860px){
  .nav__links{display:none}
  .nav__burger{display:inline-flex;margin-left:4px}
  .nav__cta{margin-left:auto}
  .lede{width:100%;text-indent:1.4em}

}
@media (max-width:800px){
  .nav__logo svg{width:96px}
  .poles__head h2{grid-column:1 / span 6}
  .poles__intro{grid-column:1 / -1;grid-row:2;margin-top:0}
  .poles__head .eyebrow{grid-column:7 / -1;grid-row:1}
  .contact{min-height:0;padding-top:var(--sp-8);padding-bottom:var(--sp-8)}
  .contact__cols{grid-template-columns:1fr 1fr}
  .contact__cols > div:first-child{grid-column:1 / -1}
  .foot__cols{grid-template-columns:1fr 1fr;row-gap:var(--sp-6)}
}
@media (max-width:700px){
  .car{--ch:clamp(260px,calc(100svh - 93px - 340px),480px)}

  .td{font-size:clamp(30px,8.4vw,40px);gap:.4em}

  .li__a{grid-template-columns:1fr;row-gap:12px}
  .li__t,.li__m,.li__thumbs{grid-column:1}
  .cb__tiles{grid-template-columns:1fr}

  .cb__in{padding-right:.45em}

}
@media (max-width:640px){
  .nav__cta,.nav__burger{padding:0 12px;letter-spacing:.06em}
  .nav__logo svg{width:80px;margin:0 8px 0 4px}

}
@media (hover:none){
  .th{opacity:1;transform:none}
}

/* ---------- Navigateurs sans conteneurs (cqw) : les panneaux de pôles reviennent à une largeur minimale ---------- */
@supports not (width:1cqw){
  .pcv .pc__in{width:auto;inset:0;min-width:min(760px,54vw)}
  .pcv .pc__rail{width:auto;inset:0}
}

/* ---------- Impression : le contenu, sans les effets ---------- */
@media print{
  .nav,
.menu,
.skip,
.cursor,
.trail__i,
.hero__foot,
.reel,
.car__foot{display:none !important}
  html,body{background:#fff}
  .js .fx,.js .rv,.js .lede{opacity:1 !important;transform:none !important}
  .js .gm__i.fx figure,.js .li.fx .th,.js .ci.fx .ci__media{clip-path:none !important}
  .view[hidden]{display:none !important}
  .js .manif__p .w{opacity:1 !important}
  .contact{min-height:0;padding:var(--sp-5) 0}
  a[href^="mailto:"]::after{content:" (" attr(href) ")"}
}

/* ---------- Écrans tactiles : cibles de 44 px (WCAG 2.5.5) ---------- */
@media (pointer:coarse){
  .nav__a,.nav__cta,.nav__burger{height:44px}
  .car__b{width:44px;height:44px}
  .cx__lk{padding:14px 0}
  .copy{padding:8px 0}
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .mark path,
.js .rv,
.js .fx,
.js .nav,
.js .hero__foot,
.js .lede{
    transform:none !important;opacity:1 !important;
  }
  .js .gm__i.fx,.js .gm__t.fx{transform:none}
  .js .gm__i.fx figure,.js .li.fx .th,.js .ci.fx .ci__media{clip-path:none}
  .js .gm__i1.fx:not(.in) img{transform:none}
  .js .gm__i2.fx:not(.in) img{transform:scale(var(--z2,1))}
  .js .ci.fx .ci__c{opacity:1;transform:none}
  .js .ci.fx:not(.in) .ci__media img{transform:none}
  .trail__i{display:none}

}

/* ---------- Repères « provisoire » (maquette : textes et photos de remplacement ; PROVISOIRE = False dans build.py les retire) ---------- */
.tmp{
  display:inline-block;vertical-align:middle;margin-right:.8em;padding:5px 8px;background:var(--amber);color:var(--ink);
  font-family:var(--font-sans);font-weight:var(--w-semi);font-size:10px;line-height:1;letter-spacing:var(--ls-wide);text-transform:uppercase;
}
.tmp--ph{position:absolute;left:10px;top:10px;z-index:2;margin:0}
.pjtmp{
  position:fixed;right:0;bottom:var(--gut);z-index:90;max-width:min(340px,64vw);padding:10px 12px;
  background:var(--amber);color:var(--ink);border:1px solid var(--ink);border-right:0;
  font-family:var(--font-sans);font-weight:var(--w-semi);font-size:11px;line-height:1.25;letter-spacing:var(--ls-wide);text-transform:uppercase;
}
@media print{.pjtmp{display:none !important}}

/* ---------- Essai : le premier écran sur le jaune de la marque (HERO_JAUNE dans contenu.py) ---------- */
/* le jaune est un fond posé SOUS la traînée de photos (z-index -3000 ; les vignettes sont entre -2000 et -2) : si les blocs du premier écran étaient jaunes eux-mêmes, ils cacheraient la traînée */
.hero-jaune::before{content:'';position:absolute;z-index:-3000;top:0;left:0;width:100%;height:var(--hero-h,100svh);background:var(--amber);pointer-events:none}
.hero-jaune .td__b:not([aria-pressed="true"]):not(:hover){color:color-mix(in srgb,var(--ink) 62%,transparent)}

/* ---------- Du premier écran aux références : quatre bandes, comme le survol des boutons ----------
   Au scroll, quatre bandes de la couleur du papier montent sur le premier écran, de droite à gauche, décalées (le même geste que `.bd` au survol : quatre bandes verticales
   qui montent l'une après l'autre) ; quand elles ont tout recouvert, les références arrivent sur le même papier, sans coupure. Animation PILOTÉE PAR LE SCROLL
   (animation-timeline, CSS seul, sur le compositeur : synchrone au pixel près, réversible : en remontant, les bandes redescendent). Sans ce support et en mouvement réduit :
   rien (le premier écran défile comme avant). */
.hero__veil{display:none}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion:no-preference) {
    .hero__veil{display:block;position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none}
    .hero__veil i{
      position:absolute;top:0;bottom:0;width:25.4%;background:var(--paper);pointer-events:auto;   /* recouvert, le premier écran ne reçoit plus les clics */
      transform:scaleY(0);transform-origin:50% 100%;will-change:transform;
      animation:veil-rise linear both;animation-timing-function:cubic-bezier(.45,.05,.25,1);animation-timeline:scroll(root block);   /* douce : départ et arrivée lents */
    }
    .hero__veil i:nth-child(1){left:0;animation-range:45vh 145vh}
    .hero__veil i:nth-child(2){left:24.87%;animation-range:30vh 130vh}
    .hero__veil i:nth-child(3){left:49.73%;animation-range:15vh 115vh}
    .hero__veil i:nth-child(4){left:74.6%;animation-range:0vh 100vh}
  }
}
@keyframes veil-rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---------- Grille : les titres accompagnent le scroll, très légèrement ----------
   Pendant qu'un module traverse l'écran, son texte (titre + description) glisse de 24 px vers le haut : un peu en retard en entrant par le bas, à sa place exacte quand le module
   est au milieu de l'écran, un peu en avance en sortant par le haut. À peine perceptible : il ne s'agit pas d'un effet, juste de la sensation que le texte suit le défilement.
   Animation PILOTÉE PAR LE SCROLL (animation-timeline), CSS seul, sur la propriété `translate` (indépendante de `transform` : pas de conflit avec l'apparition) ;
   sans ce support ou en mouvement réduit : le texte reste à sa place. */
@keyframes gm-title{from{translate:0 24px}to{translate:0 -24px}}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference) {
    .gm__t{animation:gm-title linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}