/* ══════════════════════════════════════════════════════════
   JACOB+VIKTOR — feuille de style
   Reprise du starter kit, rhabillé à la charte J+V.

   Le responsive est refait : une seule courbe fluide de 360 à
   1600 px (clamp) au lieu des quatre paliers Webflow d'origine
   (991 / 767 / 479), qui laissaient des trous entre 480 et 767.
   ══════════════════════════════════════════════════════════ */

/* ─── POLICES ────────────────────────────────────────────── */
/* Switzer et Unicons sont servies en local (elles venaient du
   CDN Webflow). Montserrat et IBM Plex Serif viennent de Google. */

@font-face{font-family:'Switzer';src:url('../fonts/Switzer-Light.woff2') format('woff2'),url('../fonts/Switzer-Light.woff') format('woff');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('../fonts/Switzer-Regular.woff2') format('woff2'),url('../fonts/Switzer-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('../fonts/Switzer-Medium.woff2') format('woff2'),url('../fonts/Switzer-Medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('../fonts/Switzer-Semibold.woff2') format('woff2'),url('../fonts/Switzer-Semibold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('../fonts/Switzer-Bold.woff2') format('woff2'),url('../fonts/Switzer-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('../fonts/Switzer-Italic.woff2') format('woff2'),url('../fonts/Switzer-Italic.woff') format('woff');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Unicons';src:url('../fonts/unicons-line.woff') format('woff');font-weight:400;font-style:normal;font-display:block}

/* ─── TOKENS ─────────────────────────────────────────────── */
:root{
  /* Charte J+V, relevée dans le CSS d'origine */
  --ink:#000;
  --ink-2:#141516;
  --paper:#efefef;
  --paper-2:#f7f5f0;
  --white:#fff;
  --accent:#ccf2df;          /* le vert d'eau de la marque */
  --grey:#b8b9b9;
  --grey-line:#3e3e3e;
  --grey-mid:#939393;

  /* Typographie */
  --disp:'Montserrat','Switzer',system-ui,sans-serif;
  --body:'Switzer',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'IBM Plex Serif',Georgia,serif;
  --icon:'Unicons',sans-serif;

  /* Échelle fluide — min à 360 px, max à 1600 px */
  --fs-xs:clamp(12px, .35vw + 10.7px, 15px);
  --fs-body:clamp(16px, .16vw + 15.4px, 18px);
  --fs-lead:clamp(18px, 1.13vw + 13.9px, 30px);      /* chapô du hero */
  --fs-h4:clamp(18px, .48vw + 16.3px, 24px);         /* email, tél */
  --fs-h3:clamp(20px, .64vw + 17.7px, 28px);         /* titres de liste */
  --fs-h2:clamp(26px, 1.6vw + 20.2px, 44px);
  --fs-h1:clamp(40px, 5.8vw + 19.1px, 100px);

  /* Rythme */
  --pad:clamp(20px, .9rem + 1.56vw, 50px);
  --gap:clamp(24px, 3vw, 48px);
  --sec-y:clamp(56px, 7vw, 120px);
  --maxw:1500px;
  --maxw-wide:1540px;
  /* La barre n'est pas fluide : une pastille de 36 px plus son retrait de
     20 px, soit 76 — puis 84 dès 768 où le retrait passe à 24. En clamp
     fluide elle mentait à toutes les largeurs (64 là où il en fallait 76,
     96 là où il n'en fallait que 84). */
  --nav-h:76px;
  /* Ce que doit dégager la première section d'une page : la barre est fixe
     et ne pousse rien. max() n'ajoute rien là où le rythme de section
     suffit déjà — il ne rattrape que le bas de l'échelle, sous 768 px, où
     --sec-y tombe à 56 px pour une barre de 76. */
  --top-clear:max(var(--sec-y), calc(var(--nav-h) + clamp(16px, 2.5vw, 32px)));

  /* Mouvement */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --r:8px;
}

/* ─── BASE ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:var(--body);
  font-size:var(--fs-body);
  font-weight:300;
  line-height:1.66;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.is-locked{overflow:hidden;height:100vh}
img,svg{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none;transition:color .3s var(--ease)}
h1,h2,h3,h4{margin:0;font-family:var(--disp);font-weight:400;line-height:1.12;letter-spacing:-.02em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* Glyphes Unicons (flèches, icônes sociales) */
.icon{font-family:var(--icon);font-size:1.15em;line-height:1;font-style:normal}

.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Lien d'évitement — absent du site d'origine */
.skip{
  position:absolute;top:-100%;left:var(--pad);z-index:10000;
  padding:12px 20px;background:var(--white);color:var(--ink);
  font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
}
.skip:focus{top:12px}

/* ─── PRÉCHARGEUR ────────────────────────────────────────── */
/* Rideau d'entrée. Il n'existe que si le JS a posé `.js` : sans script,
   personne ne resterait bloqué devant un écran noir qui ne se lève pas.
   Le script ne le joue qu'à la première arrivée dans l'onglet — d'une page
   à l'autre, refaire attendre deux secondes serait une punition. */
.loader{display:none}
.js .loader{
  display:flex;align-items:center;justify-content:center;
  position:fixed;inset:0;z-index:9999;background:var(--ink);
  transition:transform .9s var(--ease-io),visibility 0s .9s;
}
.js .loader.is-done{transform:translateY(-101%);visibility:hidden}
/* Rideau escamoté : `is-done` seul le ferait glisser vers le haut pendant
   .9s, ce qui rejouerait une sortie de préchargeur à chaque navigation
   interne. `display:none` court-circuite la transition. */
.js .loader.is-skip{display:none}
.js .loader.is-done .loader__in{opacity:0;transition:opacity .3s ease}

.loader__in{
  width:min(420px,74vw);text-align:center;
  animation:ld-in .9s var(--ease) both;
}
@keyframes ld-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.loader__logo{width:100%;height:auto;margin:0 auto clamp(22px,2.6vw,34px)}
/* 2 px et non 1 : le filet de la charte suffit pour une bordure, pas pour
   une jauge qu'il faut voir avancer. */
.loader__bar{height:2px;background:rgba(255,255,255,.16);overflow:hidden}
/* `transform-origin` à gauche : GSAP anime le `scaleX` de 0 à 1. */
.loader__fill{
  display:block;height:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;
}
.loader__pct{
  margin:12px 0 0;font-size:11px;letter-spacing:.16em;
  color:var(--grey-mid);font-variant-numeric:tabular-nums;
}

/* ─── COQUILLES ──────────────────────────────────────────── */
.shell{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.shell--wide{max-width:var(--maxw-wide)}

.sec{padding-block:var(--sec-y)}
.sec--paper{background:var(--paper);color:var(--ink)}

/* La barre flotte par-dessus la page et ne pousse rien : c'est à la première
   section de dégager sa hauteur. Sans ça, sous 768 px, le premier titre
   passait derrière les pastilles — « FORGER LE RÉCIT » traversait la barre,
   le tréma de « ÜBERSEHENE » remontait dans la rangée. Le sélecteur bat
   .about, qui repose son propre padding plus bas dans le fichier. */
main > .sec:first-child,
main > .prod:first-child > .prod__in{padding-top:var(--top-clear)}

/* Pages à fond clair (productions, teasers, ledger…) */
body.light{background:var(--white);color:var(--ink)}
body.paper{background:var(--paper)}

/* Les composants partagés (onglets, ledger, cartes, articles) servent sur
   fond noir et sur fond clair : leurs teintes passent par ces variables
   plutôt que par des valeurs écrites en dur. */
:root{
  --t-strong:#fff;               /* texte mis en avant */
  --t-invert:#000;               /* contraste sur --t-strong */
  --t-soft:var(--grey);          /* corps de texte secondaire */
  --t-mute:var(--grey-mid);      /* légendes, dates */
  --t-dim:rgba(255,255,255,.5);  /* items inactifs */
  --t-line:#272727;              /* filets */
  --t-bd:rgba(255,255,255,.25);  /* contours de pastilles */
  --t-ph:#111;                   /* fond d'image en cours de chargement */
}
body.light{
  --t-strong:#000; --t-invert:#fff;
  --t-soft:#4a4a4a; --t-mute:#6b6b6b;
  --t-dim:rgba(0,0,0,.45); --t-line:rgba(0,0,0,.14);
  --t-bd:rgba(0,0,0,.22); --t-ph:#e6e6e6;
}

/* ─── CURSEUR ────────────────────────────────────────────── */
/* Pastille floutée de 100 px, comme sur le site d'origine. */
.cursor{position:fixed;inset:0;z-index:9997;pointer-events:none;display:none}
@media (hover:hover) and (pointer:fine){ .cursor{display:block} }
.cursor__ring{
  position:absolute;top:0;left:0;
  width:100px;height:100px;border-radius:50%;
  background:rgba(20,21,22,.8);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  translate:-50% -50%;scale:0;
  display:grid;place-items:center;
  transition:scale .4s var(--ease), background .3s var(--ease);
}
.cursor__ring span{
  font-family:var(--body);font-size:14px;font-weight:500;
  letter-spacing:-.01em;line-height:1.35;color:var(--white);
  white-space:pre-line;text-align:center;   /* « View / More » sur deux lignes */
  opacity:0;transition:opacity .25s var(--ease);
}
.cursor.is-view .cursor__ring,
.cursor.is-cta  .cursor__ring{scale:1}
.cursor.is-view .cursor__ring span,
.cursor.is-cta  .cursor__ring span{opacity:1}
.cursor.is-link .cursor__ring{scale:.28;background:rgba(255,255,255,.9)}


.lang{
  display:flex;align-items:center;
  font-family:var(--disp);font-size:clamp(10px,.16vw + 9.4px,12px);
  font-weight:500;letter-spacing:.14em;
}
.lang a{
  position:relative;padding:6px 9px;
  color:var(--grey-mid);transition:color .35s var(--ease);
}
.lang a:first-child{padding-left:0}
.lang a:last-child{padding-right:0}
/* Filet entre deux langues, porté par le second des deux. */
.lang a + a::before{
  content:"";position:absolute;left:0;top:50%;
  width:1px;height:9px;margin-top:-4px;background:rgba(0,0,0,.22);
}
/* Le sélecteur ne paraît plus que dans le panneau du menu, qui est pâle :
   la langue courante s'y marque en encre. */
.lang a:hover,.lang a[aria-current]{color:var(--ink)}

/* ─── BOUTON ─────────────────────────────────────────────── */
/* Contour + remplissage circulaire qui monte, comme l'original. */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 24px;border:2px solid currentColor;border-radius:var(--r);
  font-family:var(--disp);font-size:clamp(12px,.28vw + 11px,16px);
  font-weight:500;line-height:1.6;letter-spacing:.03em;text-transform:uppercase;
  color:var(--white);overflow:hidden;isolation:isolate;
  transition:color .4s var(--ease);
  will-change:transform;
}
.btn__fill{
  position:absolute;left:50%;top:100%;z-index:-1;
  width:150%;aspect-ratio:1;border-radius:50%;
  background:var(--white);translate:-50% 0;
  transition:translate .55s var(--ease);
}
.btn:hover{color:var(--ink)}
.btn:hover .btn__fill{translate:-50% -86%}
.btn--dark{color:var(--ink)}
.btn--dark .btn__fill{background:var(--ink)}
.btn--dark:hover{color:var(--white)}

/* ─── HERO ───────────────────────────────────────────────── */
/* Un écran plein, pas un écran moins la barre : celle-ci flotte par-dessus
   et ne pousse rien. Retrancher sa hauteur laissait dépasser le haut du
   pied sous le bandeau de logos — on lisait « contact@… » avant d'avoir
   scrollé. Le retrait haut suffit à dégager la barre. */
.hero{
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:100svh;
  padding-block:var(--sec-y) clamp(20px,3vw,40px);
}
.hero__copy{
  display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:clamp(14px,3.5vw,64px);margin-block:auto;
}
.hero__claim,.hero__lead{
  font-family:var(--disp);font-size:var(--fs-lead);
  font-weight:400;line-height:1.4;letter-spacing:-.01em;
}
.hero__claim{flex:0 1 20ch}
.hero__lead{flex:1 1 34ch;max-width:60ch}
/* Côte à côte sur grand écran, l'accroche et le chapô partagent la même
   échelle : c'est la composition d'origine et elle tient. Empilés sur
   téléphone, ils se lisaient comme deux paragraphes de suite, sans
   hiérarchie — l'accroche reprend un cran. */
@media (max-width:640px){
  .hero__claim{
    font-size:clamp(28px,7.6vw,38px);line-height:1.12;letter-spacing:-.02em;
  }
}

/* ─── BANDEAU DE LOGOS ───────────────────────────────────── */
.ticker{
  position:relative;width:100%;overflow:hidden;
  padding-block:clamp(16px,2.4vw,32px);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);
}
.ticker__track{
  display:flex;align-items:center;width:max-content;
  gap:clamp(20px,3vw,48px);will-change:transform;
}
/* Les SVG sont recadrés sur leur encre (voir _snippets — les fichiers
   d'origine étaient tous dans un gabarit 800×240 où le dessin occupait de
   126 à 590 unités : à taille de gabarit égale, Sony paraissait deux fois
   plus petit que Porsche). Une fois recadrés, chaque logo n'a plus qu'à
   tenir dans une même boîte : les marques carrées sont bridées par la
   hauteur, les signatures typographiques par la largeur. */
/* Hauteur imposée, largeur déduite, puis plafonnée : les marques carrées
   (UNIQLO, Carrefour) occupent une boîte serrée, les signatures très larges
   (Porsche, Samsung) butent sur le plafond. `object-fit` garde les
   proportions quand le plafond s'applique. */
.ticker__track img{
  flex:none;opacity:.85;object-fit:contain;
  height:clamp(20px,2.1vw,30px);
  width:auto;max-width:clamp(78px,8.6vw,124px);
}

/* ─── SECTION PRODUCTIONS (fond clair) ───────────────────── */
.prod{display:flex;align-items:center;min-height:100svh}
.prod__in{width:100%;padding-block:var(--sec-y)}
.prod__intro{
  margin-bottom:clamp(28px,4vw,50px);
  font-family:var(--disp);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(19px,.5vw + 17.2px,24px);line-height:1.25;
}
.prod__intro--grey{color:rgba(51,51,51,.5)}

/* ─── LISTE DES PRODUCTIONS ──────────────────────────────── */
.list{border-top:1px solid #ccc}
.list__item{
  position:relative;display:block;overflow:hidden;
  padding-block:clamp(16px,2.4vw,28px);
  border-bottom:1px solid #ccc;color:var(--ink);
}
.list__wipe{
  position:absolute;inset:0;z-index:1;background:var(--ink);
  translate:0 100%;transition:translate .55s var(--ease);
}
.list__in{
  position:relative;z-index:2;display:flex;align-items:center;
  justify-content:space-between;gap:var(--gap);
  transition:color .4s var(--ease);
}
.list__t{
  display:block;font-family:var(--disp);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(19px,.5vw + 17.2px,24px);line-height:1.2;
}
.list__c{
  display:block;margin-top:5px;color:var(--grey-mid);
  font-family:var(--body);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(17px,.46vw + 15.4px,24px);line-height:1.2;
}
.list__go{
  flex:none;display:grid;place-items:center;
  width:clamp(36px,4vw,48px);aspect-ratio:1;border-radius:50rem;
  background:var(--white);color:var(--ink);font-size:clamp(15px,1.4vw,18px);
  transition:transform .45s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
@media (hover:hover){
  .list__item:hover .list__wipe{translate:0 0}
  .list__item:hover{color:var(--white)}
  .list__item:hover .list__go{background:var(--white);color:var(--ink);transform:rotate(45deg)}
}
@media (max-width:560px){
  .list__go{display:none}   /* la ligne entière est déjà cliquable */
}

/* ─── TEASER : BLOC « À PROPOS » ─────────────────────────── */
/* Deux colonnes à partir de 900 px, une seule en dessous. L'original
   passait à une colonne dès 991 px puis laissait l'image en 3/2 entre
   768 et 991 : ici la bascule est unique et l'image reste carrée. */
.about{padding-block:clamp(40px,6vw,96px)}
.about__grid{
  display:grid;gap:clamp(28px,4vw,80px);
  grid-template-columns:1fr 1fr;align-items:center;
}
.about__t{
  margin-bottom:clamp(14px,2vw,24px);
  font-size:clamp(32px,3.4vw + 16.5px,59px);
  /* Capitales sur plusieurs lignes : à 1, le tréma de « ÜBERSEHENE » et
     l'accent de « RÉCIT » percutaient la ligne du dessus. */
  font-weight:600;line-height:1.06;letter-spacing:0;text-transform:uppercase;
}
.about__lead{
  margin-bottom:1.1em;color:rgba(0,0,0,.5);
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(16px,.38vw + 14.6px,20.8px);line-height:1.35;
}
.about__body{
  max-width:56ch;margin-bottom:1em;color:rgba(0,0,0,.5);
  font-family:var(--disp);font-weight:400;
  font-size:clamp(16px,.16vw + 15.4px,18px);line-height:1.66;
}
.about__fig{margin:0}
.about__fig img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px}
.about__cap{margin-top:clamp(14px,2vw,22px);font-size:var(--fs-body);line-height:1.6}
.about__cap a:hover{color:var(--grey)}
.about__cap q{display:block;margin-top:6px;color:rgba(0,0,0,.6);font-style:italic}

/* Bouton pilule clair « See the work » */
.pill{
  display:inline-flex;align-items:center;gap:.5rem;
  margin-top:clamp(18px,2.4vw,28px);padding:.25rem .25rem .25rem 1.25rem;
  background:#f1f1f1;color:var(--ink);border:1px solid var(--ink);border-radius:.3rem;
  font-size:1rem;line-height:1.6;
  transition:background .35s var(--ease), color .35s var(--ease);
  will-change:transform;
}
.pill svg{flex:none;width:2rem;height:2rem;transition:transform .45s var(--ease)}
.pill:hover{background:var(--ink);color:var(--white)}
.pill:hover svg{transform:rotate(45deg)}

@media (max-width:900px){
  .about__grid{grid-template-columns:1fr}
}

/* ─── PAGE LEDGER ────────────────────────────────────────── */
/* L'original empilait quatre colonnes fixes de 35 rem qui débordaient
   sous 1100 px. Ici une seule grille fluide, de 1 à 4 colonnes. */
.led__t{
  max-width:18ch;margin-bottom:clamp(14px,2vw,24px);
  font-size:var(--fs-h1);line-height:1.05;
}
.led__lead{
  max-width:52ch;margin-bottom:clamp(28px,4vw,48px);
  color:var(--t-soft);font-size:var(--fs-h4);line-height:1.5;
}
.led__group{margin-top:clamp(48px,7vw,110px)}
.led__gt{
  padding-bottom:clamp(12px,1.6vw,20px);margin-bottom:clamp(16px,2.4vw,30px);
  border-bottom:1px solid var(--t-line);
  font-family:var(--disp);font-weight:400;letter-spacing:.02em;text-transform:uppercase;
  font-size:clamp(18px,1.1vw + 14px,28.8px);line-height:1.3;
}
.led__grid{
  display:grid;gap:0 clamp(16px,2.5vw,40px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));
}
.led__i{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:clamp(12px,1.5vw,24px);
  border-bottom:1px solid var(--t-line);
  color:var(--t-dim);
  font-size:clamp(15px,.35vw + 13.7px,20.8px);font-weight:400;line-height:1.15;
  transition:color .35s var(--ease);
}
.led__i .icon{
  flex:none;opacity:0;font-size:.85em;
  transition:opacity .35s var(--ease), transform .45s var(--ease);
}
/* Les entrées cliquables se distinguent au repos, pas seulement au survol :
   c'est le seul indice qui signale qu'une étude de cas existe derrière. */
.led__i--go{color:var(--t-strong);font-weight:500}
.led__i--go:hover .icon{opacity:1;transform:rotate(45deg)}

/* Aperçu suivant le curseur — posé par le JS, absent si pointeur grossier. */
.led__prev{
  position:fixed;top:0;left:0;z-index:60;
  width:clamp(200px,18vw,300px);aspect-ratio:4/3;
  margin:-1px 0 0 22px;pointer-events:none;opacity:0;
  overflow:hidden;background:#111;
}
.led__prev img{width:100%;height:100%;object-fit:cover}

/* Onglets Ledger / Convictions */
.tabs{display:flex;flex-wrap:wrap;gap:10px}
.tab{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 20px;border:1px solid var(--t-bd);border-radius:50rem;
  font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.tab:hover{border-color:var(--t-strong)}
.tab[aria-current="page"]{background:var(--t-strong);color:var(--t-invert);border-color:var(--t-strong)}
.tab .icon{font-size:1.1em}

/* ─── CONVICTIONS : FILTRE ET CARTES ─────────────────────── */
.filter{
  display:flex;flex-wrap:wrap;gap:clamp(14px,2.5vw,34px);
  margin-top:clamp(28px,4vw,52px);padding-bottom:clamp(14px,2vw,20px);
  border-bottom:1px solid var(--t-line);
}
.filter button{
  color:var(--t-dim);
  font-family:var(--disp);font-size:var(--fs-xs);
  letter-spacing:.06em;text-transform:uppercase;
  transition:color .35s var(--ease);
}
.filter button:hover{color:var(--t-strong)}
.filter button[aria-pressed="true"]{color:var(--t-strong)}

.cards{
  display:grid;gap:clamp(28px,4vw,56px) clamp(16px,2.5vw,40px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));
  margin-top:clamp(32px,4.5vw,64px);
}
.card__img{display:block;overflow:hidden;background:var(--t-ph)}
.card__img img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:scale .7s var(--ease);
}
.card:hover .card__img img{scale:1.05}
.card__t{
  margin-top:clamp(14px,1.8vw,22px);
  font-family:var(--disp);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(19px,.5vw + 17.2px,24px);line-height:1.25;
}
.card__t a:hover{color:var(--t-mute)}
.card__c{
  margin-top:6px;color:var(--t-mute);
  font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;
}

/* ─── ARTICLE DE CONVICTION ──────────────────────────────── */
.art__date{
  margin-bottom:clamp(14px,2vw,22px);color:var(--t-mute);
  font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;
}
.art__t{max-width:20ch;font-size:var(--fs-h1);line-height:1.05}
.art__lead{
  max-width:56ch;margin-top:clamp(16px,2.4vw,28px);
  color:var(--t-soft);font-size:var(--fs-h4);line-height:1.5;
}
.art__hero{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  margin-top:clamp(28px,4vw,56px);
}
.art__by{
  margin-top:clamp(20px,2.6vw,32px);
  font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;
}
/* Colonne de lecture : l'original laissait le corps courir sur toute la
   largeur au-delà de 1440 px, soit plus de 140 caractères par ligne. */
.art__body{max-width:46rem;margin-top:clamp(32px,4.5vw,64px)}
.art__body p{
  margin-bottom:1.5em;color:var(--t-soft);
  font-size:clamp(16px,.3vw + 14.9px,19px);line-height:1.75;
}
.art__h{
  margin-top:clamp(36px,5vw,72px);margin-bottom:clamp(14px,2vw,24px);
  color:var(--t-strong);font-size:var(--fs-h3);line-height:1.25;
}
.art__body .art__pull{
  margin-block:clamp(28px,4vw,48px);padding-left:clamp(16px,2vw,28px);
  border-left:2px solid var(--t-strong);
  color:var(--t-strong);font-family:var(--disp);
  font-size:var(--fs-h4);line-height:1.45;
}
.art__img{width:100%;height:auto;margin-block:clamp(28px,4vw,48px)}
.art__more{border-top:1px solid var(--t-line)}
.art__moret{
  font-family:var(--disp);font-weight:400;letter-spacing:.02em;text-transform:uppercase;
  font-size:clamp(18px,1.1vw + 14px,28.8px);line-height:1.3;
}

/* ─── PAGE PRIVACY POLICY ────────────────────────────────── */
/* L'original figeait le sommaire à 22 rem et le corps à 66 rem : sous
   1100 px les deux colonnes se chevauchaient. Ici une grille fluide qui
   bascule en une colonne, sommaire replié en tête. */
.pv{padding-top:clamp(96px,10vw,150px);--soft:#5a5a5a;--line:rgba(0,0,0,.12)}
.pv__intro{max-width:52ch;margin-bottom:clamp(40px,6vw,90px)}
.pv__title{font-size:var(--fs-h1);line-height:1.05}
.pv__lead{margin-top:clamp(14px,2vw,24px);color:var(--soft);
  font-size:var(--fs-h4);line-height:1.5}
.pv__date{margin-top:10px;color:var(--soft);font-size:var(--fs-xs);
  letter-spacing:.08em;text-transform:uppercase}
.pv__grid{display:grid;gap:clamp(32px,5vw,80px);
  grid-template-columns:minmax(0,15rem) minmax(0,1fr);align-items:start}
.pv__toc{position:sticky;top:calc(var(--nav-h,72px) + 24px);
  display:grid;gap:clamp(8px,1vw,12px);padding-right:1rem}
.pv__toc a{color:var(--soft);font-size:clamp(14px,.2vw + 13.3px,15px);
  line-height:1.5;transition:color .3s var(--ease)}
.pv__toc a:hover,.pv__toc a:focus-visible{color:var(--ink)}
.pv__sec{padding-top:clamp(32px,4.5vw,64px);margin-top:clamp(32px,4.5vw,64px);
  border-top:1px solid var(--line)}
.pv__sec:first-child{padding-top:0;margin-top:0;border-top:0}
.pv__head{display:flex;align-items:center;gap:clamp(10px,1.4vw,16px);
  margin-bottom:clamp(18px,2.4vw,28px)}
.pv__icon{flex:none;width:clamp(22px,1.4vw,28px);height:auto}
.pv__t{font-family:var(--disp);font-weight:400;letter-spacing:.02em;
  text-transform:uppercase;font-size:clamp(19px,.9vw + 15.6px,27px);line-height:1.25}
.pv__content{min-width:0}
.pv__body{min-width:0;max-width:46rem}
.pv__body p{margin-bottom:1.2em;color:var(--soft);
  font-size:clamp(15px,.25vw + 14.2px,17px);line-height:1.8}
.pv__body p:last-child{margin-bottom:0}
.pv__body a{text-decoration:underline;text-underline-offset:.2em}
.pv__h{margin-top:clamp(24px,3vw,38px);margin-bottom:clamp(8px,1vw,14px);
  font-family:var(--disp);font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;font-size:var(--fs-xs);line-height:1.5}
.pv__list{margin-bottom:1.2em;padding-left:1.1em;list-style:disc;
  color:var(--soft);font-size:clamp(15px,.25vw + 14.2px,17px);line-height:1.8}
/* Un tableau ne se réduit pas indéfiniment : on le laisse défiler
   horizontalement plutôt que d'écraser les colonnes. */
.pv__tw{min-width:0;margin-block:clamp(18px,2.4vw,30px);overflow-x:auto;
  border:1px solid rgba(0,0,0,.12)}
.pv__table{width:100%;border-collapse:collapse;min-width:34rem;
  font-size:clamp(13px,.2vw + 12.3px,14px);line-height:1.6}
.pv__table :is(th,td){padding:clamp(10px,1.2vw,16px);text-align:left;
  border-bottom:1px solid rgba(0,0,0,.1);vertical-align:top}
.pv__table th{font-family:var(--disp);font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;font-size:11px}
.pv__table td{color:var(--soft)}
.pv__table tr:last-child :is(th,td){border-bottom:0}
.pv__table .pv__c{text-align:center;white-space:nowrap}
.pv__table code{font-size:.95em}
@media (max-width:900px){
  .pv__grid{grid-template-columns:1fr}
  .pv__toc{position:static;padding-right:0;
    grid-template-columns:repeat(auto-fill,minmax(min(100%,11rem),1fr));
    padding-bottom:clamp(18px,3vw,26px);border-bottom:1px solid rgba(0,0,0,.12)}
}

/* ─── PAGE CONTACT ───────────────────────────────────────── */
.ct__grid{
  display:grid;gap:clamp(36px,5vw,90px);
  grid-template-columns:1fr 1fr;align-items:start;
}
.ct__kicker{
  margin-bottom:clamp(14px,2vw,22px);color:var(--grey-mid);
  font-family:var(--disp);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
}
.ct__t{max-width:14ch;font-size:var(--fs-h1);line-height:1.05}
.ct__lead{
  max-width:48ch;margin-top:clamp(16px,2.4vw,28px);
  color:var(--grey);font-size:var(--fs-h4);line-height:1.5;
}

/* Coordonnées en registre : libellé à gauche, valeur à droite, séparées
   par un filet. Le `margin` par défaut du <dd> décalait la valeur de 40px
   et cassait l'alignement de la colonne. */
.ct__info{margin-top:clamp(34px,4.5vw,64px)}
.ct__row{
  display:grid;gap:.35em clamp(16px,2vw,32px);
  grid-template-columns:minmax(0,10rem) minmax(0,1fr);
  align-items:baseline;
  padding-block:clamp(14px,1.8vw,22px);
  border-top:1px solid var(--t-line);
}
.ct__row:last-child{border-bottom:1px solid var(--t-line)}
.ct__info dt{
  color:var(--grey-mid);
  font-family:var(--disp);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;line-height:1.9;
}
.ct__info dd{
  margin:0;display:flex;flex-wrap:wrap;gap:.3em clamp(14px,1.6vw,24px);
  font-family:var(--disp);font-size:var(--fs-h4);line-height:1.35;
}
/* Deux numéros : le pays sert d'étiquette au numéro, pas de ligne séparée. */
.ct__tels{flex-direction:column;align-items:flex-start;gap:.45em}
.ct__tel{display:flex;align-items:baseline;gap:.6em}
/* Largeur fixe : sans elle les deux numéros ne s'alignent pas, « Switzerland »
   étant plus long que « France ». */
.ct__geo{
  flex:0 0 auto;min-width:9.8em;
  color:var(--grey-mid);font-family:var(--disp);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
}
.ct__tel:hover .ct__lk{background-size:100% 1px}

.ct__lk{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-size .45s var(--ease);
}
.ct__lk:hover{background-size:100% 1px}

/* Le formulaire devient un panneau posé sur le fond, pas une colonne nue. */
.ct__form{
  padding:clamp(24px,3vw,44px);
  border:1px solid var(--t-line);background:rgba(255,255,255,.02);
}
.ct__formhd{
  margin-bottom:clamp(24px,3vw,38px);
  padding-bottom:clamp(18px,2.2vw,26px);
  border-bottom:1px solid var(--t-line);
}
.ct__formt{
  font-family:var(--disp);font-size:var(--fs-h4);font-weight:500;
  letter-spacing:-.01em;
}
.ct__formn{margin-top:.5em;color:var(--grey-mid);font-size:var(--fs-xs);line-height:1.6}

.field{margin-bottom:clamp(18px,2.4vw,28px)}
.field label{
  display:block;margin-bottom:8px;color:var(--grey-mid);
  font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;
}
.field input,.field select,.field textarea{
  width:100%;padding:14px 0;
  background:none;border:0;border-bottom:1px solid #333;
  color:var(--white);font-family:var(--body);
  font-size:clamp(15px,.3vw + 13.9px,18px);line-height:1.4;
  transition:border-color .35s var(--ease);
}
.field textarea{resize:vertical;min-height:8rem}
.field select{appearance:none;cursor:pointer}
.field select option{background:var(--ink);color:var(--white)}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.3)}
.field :is(input,select,textarea):focus{outline:none;border-color:var(--white)}
.field :is(input,select,textarea):user-invalid{border-color:var(--accent)}

.btn--wide{width:100%;justify-content:center;margin-top:clamp(10px,1.6vw,18px)}
.form__note{margin-top:clamp(14px,2vw,20px);color:var(--grey-mid);font-size:var(--fs-xs);line-height:1.6}
.form__note a{text-decoration:underline}
.form__hp{position:absolute;left:-9999px}   /* piège à robots */
.form__done{font-size:var(--fs-body);line-height:1.7}
.form__done p+p{margin-top:1em}

@media (max-width:900px){
  .ct__grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .ct__row{grid-template-columns:1fr}
}

/* ─── ÉTUDE DE CAS ───────────────────────────────────────── */
/* Lecture en cinq temps : image d'ouverture, bandeau d'engagement,
   les quatre étapes, les chiffres, la citation. */
.case__hero{
  position:relative;display:flex;align-items:flex-end;
  min-height:min(86svh,860px);overflow:clip;
  padding-block:calc(var(--nav-h) + clamp(40px,6vw,90px)) clamp(36px,5vw,80px);
}
.case__heroimg{position:absolute;inset:0;overflow:clip}
/* 130 % de hauteur : la parallaxe déplace l'image de ±12 %, sans cette
   réserve on verrait le fond apparaître en haut et en bas. */
.case__heroimg img{position:absolute;top:-15%;left:0;width:100%;height:130%;object-fit:cover}
.case__heroimg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.3) 42%,rgba(0,0,0,.94));
}
.case__heroin{position:relative;z-index:1}
.case__eyebrow{
  margin-bottom:clamp(14px,2vw,22px);color:var(--accent);
  font-family:var(--disp);font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
}
.case__t{max-width:16ch;font-size:var(--fs-h1);line-height:1.02}
.case__tag{
  max-width:42ch;margin-top:clamp(16px,2.4vw,28px);
  color:var(--grey);font-size:var(--fs-lead);line-height:1.4;
}
.case__tags{
  display:flex;flex-wrap:wrap;gap:8px 10px;
  margin-top:clamp(22px,3vw,38px);list-style:none;
}
.case__tags li{
  padding:.55em 1.1em;border:1px solid var(--t-bd);border-radius:999px;
  color:var(--grey);font-size:var(--fs-xs);line-height:1.3;
}

.case__meta{padding-block:clamp(32px,4.5vw,64px)}
.case__mgrid{
  display:grid;gap:clamp(22px,3vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
}
.case__m dt{
  margin-bottom:.7em;color:var(--grey-mid);
  font-family:var(--disp);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
}
.case__m dd{margin:0;font-size:var(--fs-body);line-height:1.55}

/* Liste dépliante : la ligne ne porte que le numéro et le titre, le
   paragraphe et la vignette se déploient au survol (ou au focus clavier). */
.case__steps{padding-bottom:var(--sec-y);--case-no:clamp(3rem,5vw,7rem)}
.case__lhead{
  display:grid;grid-template-columns:var(--case-no) minmax(0,1fr);
  gap:clamp(12px,2vw,32px);padding-bottom:clamp(12px,1.6vw,20px);
  color:var(--grey-mid);font-family:var(--disp);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
}
.case__step{
  position:relative;overflow:hidden;
  padding-block:clamp(24px,3.4vw,54px);border-top:1px solid var(--t-line);
  outline-offset:-2px;
}
.case__step:last-of-type{border-bottom:1px solid var(--t-line)}
.case__shead{
  display:grid;grid-template-columns:var(--case-no) minmax(0,1fr);
  gap:clamp(12px,2vw,32px);align-items:baseline;
}
.case__sn{color:var(--grey-mid);font-family:var(--disp);font-weight:300;
  font-size:clamp(18px,1vw + 12px,26px);letter-spacing:.06em;}
.case__st{font-size:var(--fs-h2);font-weight:300;line-height:1.1;
  transition:color .4s var(--ease)}
/* La hauteur est animée par GSAP (module 17) ; le CSS ne fait que poser
   le rythme du paragraphe. */
.case__sbody p{
  max-width:40rem;padding-top:clamp(16px,2vw,30px);
  color:var(--grey);font-size:var(--fs-h4);line-height:1.65;
}
/* Le paragraphe se cale sous le titre, pas sous le numéro : la colonne des
   numéros reste libre de haut en bas. Sous 720 px on récupère la largeur. */
@media (min-width:721px){
  .case__sbody p{margin-left:calc(var(--case-no) + clamp(12px,2vw,32px))}
}
@media (hover:hover) and (min-width:901px){
  .case__step:hover .case__st{color:var(--accent)}
}

/* Le temps fort de la page : les chiffres montent au scroll sous un filet,
   très grands, le libellé en retrait dessous. */
.case__facts{
  position:relative;overflow:hidden;
  padding-block:clamp(60px,8vw,130px);background:var(--ink-2);
  border-block:1px solid var(--t-line);
}
.case__facts::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 130% at 50% 0,rgba(204,242,223,.09),transparent 68%);
}
.case__facts > *{position:relative}
.case__fh{
  margin-bottom:clamp(34px,4.6vw,66px);color:var(--grey-mid);
  font-family:var(--disp);font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
}
.case__fgrid{
  display:grid;gap:clamp(28px,3.4vw,52px);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
/* Colonne : le libellé est renvoyé en bas de cellule pour rester aligné
   d'une colonne à l'autre même quand un chiffre passe sur deux lignes
   (« Net increase »). */
.case__fact{
  display:flex;flex-direction:column;
  padding-top:clamp(16px,1.8vw,24px);border-top:1px solid var(--grey-line);
}
.case__fn{
  font-family:var(--disp);font-weight:300;line-height:.98;letter-spacing:-.03em;
  font-size:clamp(38px,4.2vw + 8px,86px);
  font-variant-numeric:tabular-nums;
  /* Le dégradé évite l'aplat : le chiffre s'éteint vers le bas. */
  background:linear-gradient(175deg,#fff 38%,rgba(255,255,255,.62));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.case__fl{
  margin-top:auto;padding-top:clamp(12px,1.4vw,20px);
  max-width:22ch;color:var(--grey-mid);
  font-family:var(--disp);font-size:var(--fs-xs);
  letter-spacing:.12em;text-transform:uppercase;line-height:1.55;
}
@media (max-width:900px){ .case__fgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .case__fgrid{grid-template-columns:1fr} }

.case__quotew{padding-block:clamp(56px,8vw,130px)}
.case__quote{margin:0}
.case__quote blockquote{
  margin:0;max-width:26ch;
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(24px,2.1vw + 15px,46px);line-height:1.24;
}
.case__quote figcaption{
  margin-top:clamp(20px,2.6vw,34px);color:var(--grey-mid);
  font-family:var(--disp);font-size:var(--fs-xs);
  letter-spacing:.12em;text-transform:uppercase;
}

.case__nxhead{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--gap);margin-bottom:clamp(20px,3vw,36px);
}
.case__nxh{font-size:var(--fs-h2);font-weight:300}
.case__back{
  display:inline-flex;align-items:center;gap:.5em;color:var(--grey-mid);
  font-family:var(--disp);font-size:var(--fs-xs);
  letter-spacing:.12em;text-transform:uppercase;
  transition:color .35s var(--ease);
}
.case__back .icon{transform:rotate(180deg)}
.case__back:hover{color:var(--white)}
.case__nxgrid{border-top:1px solid var(--t-line)}
.case__next{
  display:grid;gap:.3em clamp(16px,2.5vw,40px);
  grid-template-columns:minmax(0,14rem) minmax(0,1fr) auto;
  align-items:baseline;
  padding-block:clamp(20px,2.6vw,32px);border-bottom:1px solid var(--t-line);
  transition:padding-inline .45s var(--ease),color .35s var(--ease);
}
.case__nxp{
  color:var(--grey-mid);font-family:var(--disp);font-size:var(--fs-xs);
  letter-spacing:.16em;text-transform:uppercase;
}
.case__nxt{font-size:var(--fs-h3);line-height:1.2}
.case__next .icon{opacity:.4;transition:opacity .35s var(--ease),transform .45s var(--ease)}
@media (hover:hover){
  .case__next:hover{padding-inline:clamp(8px,1.2vw,20px)}
  .case__next:hover .icon{opacity:1;transform:rotate(45deg)}
  .case__next:hover .case__nxp{color:var(--accent)}
}

/* Sans survol possible, la liste se lit dépliée (le module JS ne s'arme
   qu'au-dessus de 900 px). */
@media (max-width:900px){
  .case__step{overflow:visible}
}
@media (max-width:560px){
  .case__next{grid-template-columns:1fr auto}
  .case__nxp{grid-column:1/-1}
}

/* ══════════════════════════════════════════════════════════
   BARRE ET PIED — composition venturethree
   Reprise de la mise en page de venturethree.com : trois
   pastilles sur une grille de quatre colonnes en haut, un pied
   noir en deux colonnes de gros caractères suivi d'une ligne de
   mentions. Leurs mesures, relevées dans leur feuille : unité
   d'espacement 4 px, pastille de 36 px, retrait interne 15 px,
   corps 20 px, mentions 10 px, transitions en .5 s.
   ══════════════════════════════════════════════════════════ */

/* ─── LES TROIS PASTILLES ────────────────────────────────── */
.v3n{
  position:fixed;inset-inline:0;top:0;z-index:900;
  display:flex;align-items:center;gap:6px;padding:20px;
  pointer-events:none;color:var(--white);
  font-family:var(--disp);font-weight:400;
}
/* Sur les pages claires l'encre passe au noir. La classe est posée par le
   générateur, pas par le script : la barre doit être juste avant même que
   le JS ne démarre. */
.v3n--dark{color:var(--ink)}
/* Le panneau est pâle : sur les pages sombres l'encre blanche de la barre y
   disparaîtrait. Tant qu'un panneau est ouvert, la barre passe au noir —
   c'est ce qu'ils font aussi. */
.v3n:has(~ .v3pan:not([hidden])){color:var(--ink)}
@media (min-width:768px){
  .v3n{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:24px}
  /* Le retrait passe de 20 à 24 : la barre gagne 8 px et --nav-h avec elle. */
  :root{--nav-h:84px}
}

/* La pastille. Le contour est un ::before en retrait de 1 px à demi opaque,
   le remplissage un ::after de la même encre — au survol il monte à 1 et le
   contenu bascule en blanc sur fond différence, ce qui le rend lisible sur
   l'encre quelle qu'elle soit, noire ou blanche. */
.v3p{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  height:36px;padding-inline:15px;border-radius:999px;
  border:0;background:none;color:currentColor;
  font:inherit;font-size:20px;line-height:1.15;text-decoration:none;
  pointer-events:auto;cursor:pointer;
  align-self:start;justify-self:start;
  transition:max-width .5s var(--ease-io),padding .5s var(--ease-io);
}
.v3p::before{
  content:"";position:absolute;inset:1px;z-index:-1;pointer-events:none;
  border:1px solid currentColor;border-radius:inherit;opacity:.5;
}
.v3p::after{
  content:"";position:absolute;inset:1px;z-index:-2;pointer-events:none;
  background:currentColor;border-radius:inherit;opacity:0;
  transition:opacity .5s var(--ease-io);
}
.v3p:hover::after,.v3p:focus-visible::after,.v3p[aria-expanded="true"]::after{opacity:1}
.v3p:hover>*,.v3p:focus-visible>*,.v3p[aria-expanded="true"]>*{
  color:var(--white);mix-blend-mode:difference;
}

/* Le logo occupe les deux premières colonnes et se rétracte sur son
   monogramme dès que la page a bougé de 50 px. Le nom s'efface aussitôt,
   le monogramme n'arrive qu'après — et l'inverse au retour en haut. */
/* Leur pastille fait 148 px pour « venturethree » à 20 px. « JACOB+VIKTOR »
   est plus long et se porte en capitales espacées : 16 px et .1 em d'écart
   donnent la même largeur de pastille à deux doigts près. */
.v3n__logo{grid-column:span 2;max-width:182px;white-space:nowrap}
.v3n__full{
  letter-spacing:.1em;font-size:16px;font-weight:500;
  transition:opacity .35s var(--ease-io) .2s;
}
.v3n__short{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  letter-spacing:.06em;font-size:13px;font-weight:500;opacity:0;
  transition:opacity .35s var(--ease-io);
}
.v3n.is-scrolled .v3n__logo{max-width:36px;padding-inline:0}
.v3n.is-scrolled .v3n__full{opacity:0;transition-delay:0s}
.v3n.is-scrolled .v3n__short{opacity:1;transition-delay:.2s}

/* Leur nom tient en un mot ; le nôtre en fait deux et « Produktionen » est
   plus long que « work ». La barre réclame 432 px en allemand — au-dessous,
   le logo se replie sur son monogramme, exactement comme il le fait déjà au
   défilement. Sans ce repli les pastilles se compriment et rognent le texte,
   sans jamais déborder : le test de largeur de page ne le voit pas. */
@media (max-width:439px){
  .v3n__logo{max-width:36px;padding-inline:0}
  .v3n__full{opacity:0;transition-delay:0s}
  .v3n__short{opacity:1;transition-delay:.2s}
}
/* Une pastille garde sa largeur : mieux vaut qu'elle déborde, et se voie,
   plutôt qu'elle avale la fin de son mot en silence. */
.v3p{flex:none}

.v3n__prog{margin-left:auto}
.v3n__more{width:36px;padding:0;flex:none}
@media (min-width:768px){
  .v3n__prog{margin-left:0}
  .v3n__more{margin-left:auto}
}
/* Le + pivote d'un huitième de tour : il devient la croix qui referme. */
.v3n__ic{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  transition:rotate .5s var(--ease-io);
}
.v3n__more[aria-expanded="true"] .v3n__ic{rotate:45deg}

/* ─── LES DEUX PANNEAUX ──────────────────────────────────── */
/* Ils descendent du haut en poussant leur propre hauteur, par-dessus la
   page mais sous la barre : les pastilles restent cliquables, et le + doit
   rester visible pour refermer. */
.v3pan{
  position:fixed;inset-inline:0;top:0;z-index:885;
  overflow:hidden auto;overscroll-behavior:contain;
  max-height:100svh;
  background:#f9f9f9;color:var(--ink);
}
/* Le panneau des productions est blanc, celui du menu d'un gris très pâle :
   chez eux les deux ne se confondent jamais. Le retrait haut de 124 px
   dégage la barre, qui reste posée par-dessus. */
.v3pan{background:var(--white)}
.v3pan--more{background:#f9f9f9}
/* Leur retrait horizontal est fixe — 20 px, 24 px dès l'écran moyen — et non
   proportionnel comme le reste du site : les panneaux gardent le leur. */
.v3pan__in{padding:124px 20px clamp(40px,6vw,72px)}
@media (min-width:768px){ .v3pan__in{padding-inline:24px} }
@media (min-width:1024px){ .v3pan__in{padding-top:144px} }
.v3pan__intro{
  margin-bottom:20px;max-width:37ch;
  font-size:clamp(20px,1.118rem + .5634vw,26px);line-height:1.107;
}
@media (min-width:768px){ .v3pan__intro{margin-bottom:32px} }

/* Deux colonnes dès l'écran moyen, et dans chaque entrée le thème posé
   au-dessus du client — jamais à côté : une ligne qui tient sur une seule
   ligne ne doit pas se lire autrement que celle qui déborde. */
.v3pan__list{display:grid;column-gap:24px;list-style:none;margin:0;padding:0}
@media (min-width:768px){ .v3pan__list{grid-template-columns:repeat(2,1fr)} }
.v3pan__li{border-top:1px solid rgba(0,0,0,.15);padding-block:1.65rem}
@media (min-width:1024px){ .v3pan__li{padding-block:1.875rem} }
.v3pan__line{
  display:block;text-decoration:none;color:inherit;
  font-size:clamp(1.75rem,1.662rem + .3756vw,2rem);line-height:1.083;
  transition:opacity .35s var(--ease-io);
}
.v3pan__line:hover{opacity:.55}
.v3pan__lead{display:block;color:#6c6c6c}
.v3pan__name{display:block}

.v3pan__all{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:clamp(22px,3vw,34px);
  font-family:var(--disp);font-size:10px;font-weight:500;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
}
.v3pan__all:hover{opacity:.55}

.v3pan__in--more{padding-bottom:clamp(28px,4vw,44px)}
/* La phrase de marque prend la grande échelle du panneau : c'est le seul
   texte du menu, elle porte seule. */
.v3pan__claim{
  max-width:30ch;
  font-size:clamp(1.75rem,1.662rem + .3756vw,2rem);line-height:1.083;
}
/* Aligné sur leur échelle de mentions : 10 px, .05 em, capitales. */
.lang--pan{margin-top:clamp(24px,3.4vw,40px);font-size:10px;letter-spacing:.05em}

/* Les barres empilées qui ferment le panneau. Chez eux il y en a deux, une
   pâle et une sombre ; ici trois, parce qu'il reste trois destinations. */
.v3bars{display:grid}
.v3bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:clamp(18px,2.6vw,26px) 20px;
  text-decoration:none;
}
@media (min-width:768px){ .v3bar{padding-inline:24px} }
.v3bar__lb{font-size:clamp(1.5rem,1.456rem + .1878vw,1.625rem);line-height:1}
.v3bar__go{
  font-family:var(--icon);font-size:18px;
  translate:-6px 0;opacity:0;
  transition:translate .45s var(--ease-io),opacity .45s var(--ease-io);
}
.v3bar:hover .v3bar__go,.v3bar:focus-visible .v3bar__go{translate:0 0;opacity:1}
.v3bar--pale{background:#d9d9d9;color:#050014}
.v3bar--mint{background:var(--accent);color:#050014}
.v3bar--dark{background:#202023;color:var(--white);--focus:var(--accent)}

/* Le voile qui assombrit la page derrière le panneau ouvert. */
.v3scrim{
  position:fixed;inset:0;z-index:870;
  background:rgba(0,0,0,.45);opacity:0;
}

/* Sans JS, rien ne peut s'ouvrir : les panneaux restent `hidden` et les deux
   pastilles ne servent à rien. Le pied porte alors tous les liens du site,
   c'est lui qui rattrape la navigation. */
.v3pan[hidden],.v3scrim[hidden]{display:none}

/* ─── PIED ───────────────────────────────────────────────── */
/* Toujours noir, y compris sous les pages claires : chez eux aussi c'est
   ce qui referme le site. */
.v3f{
  position:relative;
  padding:40px 20px 24px;
  background:var(--ink);color:var(--white);
  --focus:var(--accent);
}
@media (min-width:768px){ .v3f{padding-inline:24px} }

.v3f__top{
  display:grid;gap:32px;margin-bottom:244px;
  font-size:clamp(20px,1.118rem + .5634vw,26px);line-height:1.1;
}
@media (min-width:768px){
  .v3f__top{grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:300px}
}
.v3f__col a,.v3f__col address{
  display:block;font-style:normal;color:inherit;text-decoration:none;
  transition:opacity .35s var(--ease);
}
.v3f__col a:hover{opacity:.55}
.v3f__col address{color:var(--grey-mid)}

.v3f__bar{
  display:grid;gap:10px;
  font-family:var(--disp);font-size:10px;line-height:1;
  letter-spacing:.05em;text-transform:uppercase;
}
.v3f__bar a{color:inherit;text-decoration:none;transition:opacity .35s var(--ease)}
.v3f__bar a:hover{opacity:.55}
@media (min-width:768px){
  .v3f__bar{grid-template-columns:repeat(4,1fr);gap:20px}
  /* Chez eux l'index passe en dernière colonne dès que la grille s'ouvre. */
  .v3f__idx{order:99}
}
.v3f__cp{white-space:nowrap}
/* La pastille de retour se cale dans l'angle, hors du flux de la grille. */
.v3f__home{position:absolute;right:14px;bottom:10px;width:52px;height:52px}
.v3f__home svg{display:block;width:100%;height:100%}
.v3f__home:hover{opacity:.55}

/* ─── BULLE WHATSAPP ─────────────────────────────────────── */
/* Coin bas-droit, comme partout ailleurs sur le web : à gauche elle
   recouvrait le contenu, qui est aligné à gauche sur tout le site — le
   premier logo du bandeau, les titres de section du Ledger, les lignes de
   la liste des productions. Elle passe sous le bandeau cookies le temps
   du choix, et le vert d'eau de la marque plutôt que le vert WhatsApp,
   qui jurerait. */
/* La bulle n'ouvre plus la conversation d'un coup : elle déplie un volet où
   l'on compose son message avant de basculer sur WhatsApp. Même volet que
   sur up2front.com, rhabillé à la charte — le papier du bandeau cookies
   plutôt que le gris sombre, le vert d'eau de la marque plutôt que le vert
   WhatsApp. Le volet se pose sous la bulle, qui reste le point d'ancrage. */
.wa{
  position:fixed;right:var(--pad);bottom:var(--pad);z-index:870;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  transition:transform .45s var(--ease-io),opacity .35s var(--ease-io);
}
.wa__b{
  display:inline-flex;align-items:center;gap:0;
  height:54px;padding:0 15px;border:0;border-radius:999px;cursor:pointer;
  background:var(--accent);color:var(--ink);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  transition:gap .45s var(--ease-io),padding .45s var(--ease-io),
             transform .45s var(--ease-io);
}
/* Le pied est à l'écran : elle s'écarte plutôt que de recouvrir la pastille
   de retour, qu'elle masquait au pixel près. Elle quitte aussi l'ordre de
   tabulation — invisible, elle ne doit pas capter le focus. */
.wa.is-away{opacity:0;transform:translateY(20px) scale(.9);visibility:hidden}
.wa__ic{width:24px;height:24px;flex:none;fill:currentColor}
.wa__lb{
  max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  font-family:var(--disp);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  transition:max-width .45s var(--ease-io),opacity .3s ease;
}
.wa__b:hover,.wa__b:focus-visible{gap:11px;padding:0 21px 0 15px;transform:translateY(-2px)}
.wa__b:hover .wa__lb,.wa__b:focus-visible .wa__lb{max-width:14rem;opacity:1}
/* Volet ouvert, le libellé reste déplié : la bulle sert alors de bouton de
   fermeture et doit se lire comme tel. */
.wa__b[aria-expanded="true"]{gap:11px;padding:0 21px 0 15px}
.wa__b[aria-expanded="true"] .wa__lb{max-width:14rem;opacity:1}

/* ─── Le volet ─── */
/* « hidden » suffit tant que le script n'a pas pris la main ; il est retiré
   à l'ouverture et c'est la classe qui anime. */
.wa__pan[hidden]{display:none}
.wa__pan{
  position:relative;width:min(21rem,calc(100vw - 2 * var(--pad)));
  padding:clamp(20px,2.5vw,26px);
  display:flex;flex-direction:column;gap:9px;
  background:var(--paper-2);color:var(--ink);
  font-size:var(--fs-xs);line-height:1.55;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  opacity:0;transform:translateY(10px) scale(.98);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.wa__pan.is-open{opacity:1;transform:none}
.wa__x{
  position:absolute;top:10px;right:10px;width:28px;height:28px;
  display:grid;place-items:center;
  background:none;border:0;cursor:pointer;color:#6a6a6a;
  transition:color .25s var(--ease);
}
.wa__x svg{width:14px;height:14px}
.wa__x:hover{color:var(--ink)}
.wa__who{
  display:flex;align-items:center;gap:8px;margin:0;
  font-family:var(--disp);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:-.01em;
}
/* Le point vert d'eau, respiration lente : la marque des messageries pour
   dire « quelqu'un est là », sans le mot. */
.wa__dot{
  width:8px;height:8px;flex:none;border-radius:50%;
  background:#2fa36a;box-shadow:0 0 0 0 rgba(47,163,106,.45);
  animation:wa-pulse 2.4s var(--ease-io) infinite;
}
@keyframes wa-pulse{
  0%,70%,100%{box-shadow:0 0 0 0 rgba(47,163,106,.45)}
  35%{box-shadow:0 0 0 6px rgba(47,163,106,0)}
}
/* Le vert de disponibilite assombri : sur le papier de la charte, le vert
   des messageries tombe a 2,9:1 — illisible a cette taille. A 6,4:1 il se
   lit, et se lit encore comme du vert. */
.wa__when{margin:0;color:#15663e;font-size:calc(var(--fs-xs) - 1px);letter-spacing:.01em}
.wa__say{margin:4px 0 0;color:#4a4a4a}
.wa__lab{
  margin-top:6px;font-size:10px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:#6a6a6a;
}
.wa__ta{
  width:100%;min-height:76px;resize:vertical;
  padding:11px 12px;border:1px solid rgba(0,0,0,.18);
  background:var(--white);color:var(--ink);
  font-family:var(--body);font-size:var(--fs-xs);line-height:1.5;
  transition:border-color .25s var(--ease);
}
.wa__ta:focus{outline:none;border-color:var(--ink)}
.wa__go{
  margin-top:6px;padding:13px 18px;text-align:center;text-decoration:none;
  background:var(--accent);color:var(--ink);
  font-family:var(--disp);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  transition:background .25s var(--ease);
}
.wa__go:hover{background:var(--ink);color:var(--accent)}

/* Le temps du choix, le bandeau cookies la recouvre entièrement. La cacher
   pour de bon plutôt que la laisser dessous : sinon elle reste dans
   l'ordre de tabulation, invisible, et le focus disparaît de l'écran. */
body:has(.cookies:not([hidden])) .wa{visibility:hidden}

/* Au doigt il n'y a pas de survol : la pastille reste ronde, le libellé
   ne sert qu'à l'accessibilité via aria-label. Le volet, lui, prend toute
   la largeur utile. */
@media (max-width:640px){
  .wa__b{height:48px;padding:0 12px}
  .wa__b:hover,.wa__b:focus-visible{gap:0;padding:0 12px;transform:none}
  .wa__b:hover .wa__lb,.wa__b:focus-visible .wa__lb{max-width:0;opacity:0}
  .wa__b[aria-expanded="true"]{gap:0;padding:0 12px}
  .wa__b[aria-expanded="true"] .wa__lb{max-width:0;opacity:0}
  .wa__pan{width:calc(100vw - 2 * var(--pad))}
}
@media (prefers-reduced-motion:reduce){
  .wa,.wa__b,.wa__lb{transition:none}
  .wa__pan{transition:none;opacity:1;transform:none}
  .wa__dot{animation:none}
}

/* ─── BANDEAU COOKIES ────────────────────────────────────── */
/* z-index sous le menu mobile (890) : plein écran, il doit le recouvrir. */
.cookies{
  position:fixed;right:var(--pad);bottom:var(--pad);z-index:880;
  width:min(23rem,calc(100vw - 2 * var(--pad)));
  padding:clamp(20px,2.5vw,28px);
  background:var(--paper-2);color:var(--ink);
  font-size:var(--fs-xs);line-height:1.55;
  translate:0 140%;
}
.cookies__t{margin-bottom:10px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.cookies p{margin-bottom:12px}
.cookies a{text-decoration:underline}
.cookies__row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cookies__row .btn{flex:1 1 auto;padding:9px 18px}

/* ─── LIGNES DÉCOUPÉES (SplitText) ───────────────────────── */
/* GSAP pose un .ln-mask en overflow:clip, qui rogne les accents des
   capitales et les jambages. On agrandit la zone visible et on annule
   l'effet sur la mise en page par une marge négative. */
.ln-mask{
  padding-top:.18em;margin-top:-.18em;
  padding-bottom:.10em;margin-bottom:-.10em;
}

/* ─── ÉTATS D'ANIMATION ──────────────────────────────────── */
/* Conditionnés à .js (posée par le script) : si le JS ne se charge
   pas ou plante, le contenu reste visible au lieu de disparaître. */
.js [data-reveal]{opacity:0}
.js [data-split]{visibility:hidden}

/* ─── ACCESSIBILITÉ ──────────────────────────────────────── */
/* Le vert d'eau de la marque ne contraste qu'avec le noir : sur un fond
   clair (pages Productions et Convictions, sections paper, pied de page
   blanc, bandeau cookies, bulle WhatsApp) le contour de focus devenait
   invisible et la navigation au clavier se perdait. La teinte suit donc
   le fond, comme le reste des composants partagés. */
:root{--focus:var(--accent)}
body.light,.sec--paper,.cookies,.wa,.v3n--dark,.v3pan{--focus:var(--ink)}
:where(a,button):focus-visible{outline:2px solid var(--focus);outline-offset:3px}
/* Les lignes dépliantes des études de cas sont des <article tabindex="0"> :
   ni lien ni bouton, elles échappaient à la règle ci-dessus et retombaient
   sur le contour par défaut du navigateur — un orangé qui n'appartient pas
   à la charte. Le retrait reste négatif, comme sur `.case__step` : la ligne
   est en `overflow:hidden`, un contour posé à 3 px vers l'extérieur y serait
   rogné et le focus disparaîtrait de l'écran. */
[data-expand]:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  [data-reveal],[data-split]{opacity:1 !important;visibility:visible !important}
  .cursor{display:none}
  .ticker{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
}