/* ═══════════════════════════════════════════════════════════════════
   TELEGRAF
   Trois fichiers réellement disponibles : Ultralight 200, Regular 400,
   Ultrabold 800. Les graisses intermédiaires (Light 300, Medium 500) ne sont
   pas dans le paquet, elles sont donc rattachées au Regular plutôt que d'être
   synthétisées par le navigateur ou de retomber sur Space Grotesk.
   `local()` reste en tête : sur une machine où la police est installée, aucun
   téléchargement n'a lieu.
   ═══════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Telegraf';font-weight:200;font-style:normal;font-display:swap;
  src:local('PP Telegraf Ultralight'),local('PPTelegraf-Ultralight'),
      url('assets/fonts/PPTelegraf-Ultralight.woff2') format('woff2')}
@font-face{font-family:'Telegraf';font-weight:300 500;font-style:normal;font-display:swap;
  src:local('PP Telegraf Regular'),local('PPTelegraf-Regular'),local('Telegraf'),
      url('assets/fonts/PPTelegraf-Regular.woff2') format('woff2')}
@font-face{font-family:'Telegraf';font-weight:800;font-style:normal;font-display:swap;
  src:local('PP Telegraf Ultrabold'),local('PPTelegraf-Ultrabold'),
      url('assets/fonts/PPTelegraf-Ultrabold.woff2') format('woff2')}

/* ══════════════ TOKENS (calqués sur le système ZAMA) ══════════════ */
:root{
  /* marque : le vermillon remplace le jaune */
  --accent:#D42900;
  --accent-medium:#F03A12;      /* hover CTA */
  --accent-light:#FFD9CE;
  --accent-soft:#FFF3EF;

  /* neutres */
  --black:#000000;
  --medium-black:#2E2E2E;
  --white:#FFFFFF;
  --soft-grey:#F4F4F4;
  --soft-grey-2:#F2EFEC;        /* beige des cartes et panneaux */
  --light-grey:#E8E8E8;
  --medium-grey:#D9D9D9;
  --dark-grey:#B4B4B4;

  --black-64:rgba(18,13,9,.64);
  --black-36:rgba(25,14,6,.36);
  --black-20:rgba(32,16,4,.20);
  --white-64:rgba(255,255,255,.64);

  /* typo */
  --font:'Telegraf','Space Grotesk',system-ui,-apple-system,sans-serif;
  /* Tailles fluides : chaque valeur passe de son minimum à son maximum en
     continu entre 480 et 1440px de large, au lieu de sauter à trois seuils.
     Lecture : clamp(plancher, droite de progression, plafond). */
  --h1:clamp(42px, calc(27px + 3.125vw), 72px);
  --h2:clamp(32px, calc(20px + 2.5vw), 56px);
  --h3:clamp(28px, calc(24px + 0.833vw), 36px);
  --h4:clamp(20px, calc(18px + 0.417vw), 24px);
  --eyebrow:16px; --para:16px; --para-big:18px; --para-small:14px;

  /* ── MESURE DE LECTURE ──
     Le texte courant était plafonné à 70ch, soit environ 870px : sur un écran
     16/9 il restait un tiers de colonne vide à droite et chaque paragraphe se
     lisait comme un gros bloc de trois ou quatre lignes courtes. On passe à
     78rem, soit 1248 px. Le `min(100%, …)` garde une respiration au bord et fait
     retomber la mesure sur la largeur réelle dans les colonnes étroites, la fiche
     projet par exemple, sans avoir à la redéclarer.
     `--mesure-courte` reste pour les listes à filets, où la ligne longue
     fatigue plus vite que dans un paragraphe suivi.
     ⚠ En `rem` et surtout pas en `ch` : `ch` vaut la largeur du zéro DE L'ÉLÉMENT
     qui l'utilise, donc `100ch` faisait 1244 px sur un paragraphe à 18 px mais
     4975 px sur le titre à 72 px, qui n'était alors bridé par rien. Le `rem` ne
     dépend que de la racine, c'est la seule unité qui donne le même bord droit
     à tout le monde. */
  --mesure:min(100%, 78rem);
  --mesure-courte:min(100%, 64rem);

  /* rayons */
  --r-tiny:4px; --r:10px; --r-round:500px;

  /* gaps */
  --g-tiny:8px; --g-xs:12px; --g-s:16px; --g-n:24px; --g-d:32px;
  --g-l:clamp(28px, calc(18px + 2.083vw), 48px);
  --g-xl:clamp(40px, calc(28px + 2.5vw), 64px);
  --g-xxl:clamp(56px, calc(20px + 7.5vw), 128px);
  --g-xxxl:clamp(64px, calc(16px + 10vw), 160px);

  /* marge latérale en pixels et non en pourcentage : un pourcentage se calcule
     sur la largeur de la fenêtre, donc au-delà de 1440px il rognait le contenu
     au lieu de rester constant */
  --sides:clamp(16px, 3vw, 48px);
  --max:1680px;
  --max-nav:1680px;   /* barre alignée sur le conteneur de contenu */
  --section:clamp(72px, calc(24px + 8.333vw), 144px);
  --g-xxxl-2:clamp(48px, calc(24px + 5vw), 96px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--white);color:var(--black);font-family:var(--font);font-weight:400;
  font-size:var(--para);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,video,canvas{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
*{box-shadow:none}

.container{max-width:var(--max);margin-inline:auto;padding-inline:var(--sides)}
.pb-section{padding-bottom:var(--section)}
.pt-section{padding-top:var(--section)}

h1,h2,h3,h4{font-weight:400;color:var(--black)}
h1,.h1{font-size:var(--h1);line-height:1.1}
h2,.h2{font-size:var(--h2);line-height:1.05;letter-spacing:-.6px}
h3,.h3{font-size:var(--h3);line-height:1.1}
h4,.h4{font-size:var(--h4);line-height:1.1}
p{font-size:var(--para);line-height:1.55}
.p-small{font-size:var(--para-small);line-height:1.55}
.p-big{font-size:var(--para-big);line-height:1.5}
.eyebrow{font-size:var(--eyebrow);text-transform:uppercase;line-height:1.5;color:var(--black-64)}
.tiny{font-size:var(--para-small);color:var(--black-20)}
.op64{color:var(--black-64)}
.center{text-align:center;margin-inline:auto}
.stack{display:flex;flex-direction:column;gap:var(--g-s)}
.stack-36{display:flex;flex-direction:column;gap:36px}

/* ══════════════ AMORCE DE SECTION ══════════════
   Un seul système de titrage sur tout le site, décidé le 3 septembre 2026 :
   tout à gauche, quatre niveaux et pas un de plus.
   h1 page (--h1) · titre de section (--h2 : .sec-intro h2, .case__media-title,
   .reco__t) · sous-section (--h3 : .grp__title, .case__sous-titre) · intertitre
   de texte (--h4 : .case__body h3, .atouts strong). Le chapeau suit en --black-64. */
.sec-intro{border-top:1px solid var(--medium-grey);padding-top:var(--g-l);margin-bottom:var(--g-xl)}
.sec-intro h2,.sec-intro h3{font-size:var(--h2);line-height:1.05;letter-spacing:-.6px;max-width:var(--mesure);text-wrap:balance}
.sec-intro p{margin-top:var(--g-n);max-width:var(--mesure)}
/* si l'amorce est seule dans sa section, pas de marge basse :
   le rythme entre sections suffit, sinon le bloc paraît collé en haut */
.sec-intro:last-child{margin-bottom:0}

/* ══════════════ BOUTONS ══════════════ */
.btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;cursor:pointer;
  font-family:var(--font);font-size:16px;font-weight:400;line-height:1.3;
  color:#fff;background:var(--accent);border:1px solid var(--accent);border-radius:var(--r-tiny);
  padding:.375rem .625rem 4px;
  transition:color .18s ease-out,background-color .18s ease-out,border-color .18s ease-out,opacity .18s ease-out}
.btn:hover{background:var(--accent-medium);border-color:var(--accent-medium)}
.btn.black{background:var(--black);color:#fff;border-color:var(--black)}
.btn.black:hover{background:var(--black-64);border-color:var(--medium-black)}
.btn.secondary{background:transparent;color:var(--black);border-color:var(--black-36)}
.btn.secondary:hover{background:var(--accent-soft)}
.btn.white{background:#fff;color:var(--black);border-color:#fff}
.btn.white:hover{background:var(--accent-soft);border-color:var(--accent-soft)}
.btn .tri{width:0;height:0;border-left:7px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}

/* ══════════════ NAVIGATION (non collante, 78px) ══════════════ */
.nav{position:relative;z-index:1000;background:#fff}
.nav__in{display:flex;justify-content:space-between;align-items:center;
  max-width:var(--max-nav);padding-block:1.25rem;min-height:104px}
.brand{display:flex;align-items:center;gap:14px}
.brand svg{height:40px;width:24.9px;color:var(--accent);transform:translateY(1px)}
.brand b{font-weight:500;font-size:21px;letter-spacing:.1em;text-transform:uppercase}
.nav__mid{display:flex;align-items:center;gap:var(--g-d)}
.nav__item{position:relative}
.nav__link{display:flex;align-items:center;gap:7px;padding:10px 12px 10px 18px;
  transition:color .2s,opacity .2s}
.nav__link:hover{color:var(--black-64)}
.chev{width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .3s}
.nav__item.open .chev{transform:translateY(1px) rotate(225deg)}
.nav__right{display:flex;align-items:center;gap:12px}

/* méga-menu, verre dépoli */
/* Le panneau s'ouvre sous son entrée, mais ne sort jamais de l'écran : entre 992
   et 1150px, aligné à gauche, il débordait de plusieurs dizaines de pixels et
   coupait le dernier libellé. */
.dd{position:absolute;top:100%;left:0;margin-top:0;padding:var(--g-n);
  max-width:calc(100vw - 2*var(--sides));
  border-radius:var(--r);background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);
  /* Le flou d'arrière-plan est recalculé à chaque image, le film continuant de
     tourner dessous. C'est le seul endroit du site où ça arrive, la surface est
     petite et le menu n'est ouvert que quelques secondes : le coût est assumé.
     La saturation compense le lavage des couleurs propre au flou. */
  backdrop-filter:blur(14px) saturate(1.9) brightness(1.06);
  -webkit-backdrop-filter:blur(14px) saturate(1.9) brightness(1.06);
  /* liseré clair sur l'arête haute : c'est lui qui donne l'épaisseur de verre,
     bien plus que le flou lui-même */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),
             inset 0 -1px 0 rgba(255,255,255,.35),
             0 24px 60px rgba(25,14,6,.12);
  display:flex;gap:0;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s,transform .25s ease-out,visibility .2s;z-index:1001}
.nav__item.open .dd{opacity:1;visibility:visible;transform:none}
.dd__col{width:230px;padding-inline:18px}
@media(max-width:1150px){
  .dd{left:auto;right:0}
  .dd__col{width:190px;padding-inline:12px}
}
.dd__col+.dd__col{border-left:.75px solid rgba(0,0,0,.1)}
.dd__col:first-child{padding-left:0}
.dd__col:last-child{padding-right:0}
.dd__sub{font-size:var(--para-small);font-weight:500;text-transform:uppercase;
  letter-spacing:.06em;color:var(--black-36);margin-bottom:10px}
.dd__link{display:flex;align-items:center;gap:8px;padding:6px 5px;margin-right:8px;
  border-radius:3px;outline:1px solid transparent;outline-offset:-1px;transition:.2s}
.dd__link:hover{background-image:radial-gradient(circle at 0% center,#fff 53%,rgba(0,0,0,0));
  outline:1px solid #fff}
.ico{display:none;flex:0 0 auto;width:24px;height:24px;border-radius:var(--r-tiny);background:var(--accent);
  display:grid;place-items:center}
.ico svg{width:14px;height:14px;color:#fff}

/* burger + tiroir */
.burger{display:none;width:38px;height:38px;border:1px solid var(--black-36);background:none;
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:var(--r-tiny)}
.burger i{display:block;width:16px;height:1px;background:var(--black);transition:transform .3s,opacity .2s}
.burger.on i:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-3px) rotate(-45deg)}
.drawer{position:fixed;left:0;right:0;top:78px;bottom:0;background:#fff;z-index:999;overflow-y:auto;
  padding:24px var(--sides) 64px;opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .3s,transform .3s ease-out,visibility .3s}
.drawer.on{opacity:1;visibility:visible;transform:none}
.drawer__main a{display:block;font-size:30px;padding:14px 0;border-bottom:1px solid var(--medium-grey)}
.drawer__grp{margin-top:32px}
.drawer__grp h5{font-size:var(--para-small);text-transform:uppercase;letter-spacing:.06em;
  color:var(--black-36);font-weight:400;margin-bottom:8px}
.drawer__grp a{display:block;padding:9px 0;border-bottom:1px solid var(--medium-grey)}

@media(max-width:991px){
  .nav__mid{display:none}
  .burger{display:flex}
}
@media(min-width:992px){.drawer{display:none}}
@media(max-width:479px){.nav__right .btn{display:none}}

/* ══════════════ HERO ══════════════ */
/* Le hero respire sous la barre : sans cet écart il la touchait presque. */
#top{padding-top:clamp(20px,3.4vw,52px)}
/* et l'écart qui le sépare de la section suivante est ramené à la moitié d'une
   respiration de section, sinon le bas de l'écran paraissait vide */
main>section:first-of-type.pt-section{padding-top:clamp(56px,7.5vw,112px)}
/* 16/9 et non plus 21/10 : le cadre panoramique écrasait le bloc de texte et la
   vidéo y paraissait lointaine. Le film est en cover, il se recadre tout seul
   vers son centre, aucun fichier à retoucher. */
.hero{position:relative;overflow:hidden;display:flex;align-items:center;
  aspect-ratio:16/9;border-radius:var(--r);padding:40px;background:#F2EFEC}
/* l'image fixe sert de fond en permanence : elle couvre le temps de chargement
   du film sur grand écran, et le remplace entièrement sur téléphone */
.hero__bg{position:absolute;inset:0;z-index:0;
  background:url('assets/reel-poster.jpg') center/cover no-repeat}
.hero__bg video{width:100%;height:100%;object-fit:cover}
/* voile clair pour la lisibilité du titre, chute progressive vers la droite */
.hero__wash{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,#F7F4F1 0%,#F7F4F1 16%,rgba(247,244,241,.96) 27%,
    rgba(247,244,241,.84) 37%,rgba(247,244,241,.58) 48%,rgba(247,244,241,.28) 60%,
    rgba(247,244,241,.08) 71%,rgba(247,244,241,0) 82%)}/* le bloc est centré par le flex du hero, mais une marge basse le remonte un peu :
   les deux boutons occupent le bas du cadre, sans ça le texte paraissait posé
   trop bas et l'espace au-dessus du titre restait inutilisé */
.hero__in{position:relative;z-index:3;width:100%;margin-bottom:clamp(20px,3.4vw,52px)}
/* en rem, jamais en ch : ch vaut la largeur du zéro DE L'ÉLÉMENT, donc 16ch sur
   un titre à 72px faisait 796px et coupait « designer et motion designer » en
   deux, laissant « designer » seul en troisième ligne. Le titre casse aux <br>. */
.hero h1{max-width:min(100%,46rem)}
.hero__desc{max-width:min(100%,27rem);margin-top:var(--g-n);color:var(--black-64)}
/* ligne de preuve : des noms de clients et de productions, en petit, sous la
   description. Elle ne doit pas concurrencer le titre, juste exister. */
.hero__proof{max-width:350px;margin-top:var(--g-s);font-size:var(--para-small);
  color:var(--black-36);letter-spacing:.02em}
@media(max-width:767px){.hero__proof{max-width:none}}
.hero__cta{position:absolute;left:40px;bottom:40px;z-index:3;display:flex;gap:var(--g-s)}
@media(max-width:991px){.hero{aspect-ratio:1/1}}
@media(max-width:767px){.hero__bg video{display:none}}
@media(max-width:767px){
  .hero{aspect-ratio:4/5;flex-direction:column;justify-content:center}
  /* en colonne les boutons repassent dans le flux : la marge basse ferait
     double emploi avec leur propre marge haute */
  .hero__in{margin-bottom:0}
  .hero__cta{position:relative;left:auto;bottom:auto;order:9999;margin-top:var(--g-d)}
  .hero__wash{background:linear-gradient(178deg,#F7F4F1 0%,#F7F4F1 30%,rgba(247,244,241,.88) 44%,
    rgba(247,244,241,.56) 58%,rgba(247,244,241,.22) 72%,rgba(247,244,241,0) 86%)}
}
@media(max-width:479px){.hero{aspect-ratio:3/4;padding:20px}.hero__cta{margin-top:var(--g-n)}}

/* ══════════════ PERSONNAGE DU BLOC CONTACT ══════════════ */
/* ══════════════ CARTES DISCIPLINES ══════════════ */
/* Grille partagée : icône, respiration, titre, description, lien.
   Chaque tuile occupe les mêmes cinq rangées via subgrid, donc les
   titres, les descriptions et les liens s'alignent d'une tuile à
   l'autre quelle que soit la longueur du texte. */
/* Quatre rangées partagées : visuel, titre, description, lien.
   Le visuel est une vraie vignette à pleine opacité, pas un fond
   fantôme : c'est lui qui donne envie de cliquer. */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g-n);
  grid-template-rows:auto auto auto auto}
/* trois terrains au lieu de quatre : la grille suit, sans nouveau point de rupture */
.cards--trois{grid-template-columns:repeat(3,1fr)}
.card{grid-row:span 4;display:grid;grid-template-rows:subgrid;
  position:relative;overflow:hidden;background:var(--soft-grey-2);
  border-radius:var(--r);border:1px solid transparent;
  transition:border-color .25s,background-color .25s}
.card:hover{border-color:var(--medium-grey);background-color:#EFEBE7}
/* align-self:start est obligatoire : en grille, l'étirement par défaut
   fixe la hauteur et annule aspect-ratio, l'image reprend alors sa
   hauteur intrinsèque et forme une bande verticale.
   Le masque est porté par l'enveloppe et le zoom par l'image, pour que
   le survol ne déplace pas le dégradé. */
.card__media{grid-row:1;align-self:start;display:block;width:100%;
  aspect-ratio:16/10;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.16,.84,.28,1)}
.card:hover .card__media img{transform:scale(1.05)}
.card h4,.card p,.card__go{padding-inline:var(--g-n)}
.card__go{display:flex;align-items:center;gap:6px;color:var(--accent);
  padding-bottom:var(--g-n);align-self:end}
.card__go span{transition:transform .3s cubic-bezier(.16,.84,.28,1)}
.card:hover .card__go span{transform:translateY(3px)}

/* repli si subgrid n'est pas disponible : hauteurs plancher */
@supports not (grid-template-rows:subgrid){
  .cards{grid-template-rows:none}
  .card{grid-row:auto;display:flex;flex-direction:column;gap:var(--g-n)}
  .card h4{min-height:2.2em}
  .card p{min-height:4.65em}
  .card__go{margin-top:auto}
}
/* quatre tuiles : on passe directement à deux colonnes, trois laisserait une
   tuile orpheline sur la seconde rangée */
@media(max-width:1200px){.cards,.cards--trois{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){.cards{gap:12px}
  .card h4,.card p,.card__go{padding-inline:20px}
  .card__go{padding-bottom:20px}}
@media(max-width:479px){.cards,.cards--trois{grid-template-columns:1fr}}

/* ══════════════ BLOC 50 / 50 ══════════════ */
/* deux cinquièmes de texte, trois cinquièmes d'image */
.split{display:grid;grid-template-columns:2fr 3fr;gap:0}
.split__text{padding:clamp(28px, calc(14px + 2.9vw), 56px);background:var(--soft-grey-2);
  border-radius:var(--r) 0 0 var(--r);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--g-l)}
.split__media{position:relative;aspect-ratio:16/9;border-radius:0 var(--r) var(--r) 0;overflow:hidden;
  background:#F7F4F1}
.split__media img,.split__media video{position:relative;z-index:2;width:100%;height:100%;object-fit:cover}/* inversé : on inverse AUSSI les colonnes, sinon le média hérite de la
   colonne étroite et le texte de la large */
.split.reversed{grid-template-columns:3fr 2fr}
.split.reversed .split__text{border-radius:0 var(--r) var(--r) 0;order:2}
.split.reversed .split__media{border-radius:var(--r) 0 0 var(--r);order:1}
.split__text.black{background:var(--black)}
.split__text.black h3,.split__text.black .eyebrow{color:#fff}
.split__text.black .eyebrow{color:var(--white-64)}
.split__text.black p{color:var(--white-64)}
@media(max-width:1200px){
  .split{grid-template-columns:5fr 7fr}
  .split.reversed{grid-template-columns:7fr 5fr}
}
@media(max-width:991px){
  .split,.split.reversed{grid-template-columns:1fr}
  .split__text{border-radius:var(--r) var(--r) 0 0;gap:32px;padding:var(--g-d)}
  .split__media{border-radius:0 0 var(--r) var(--r);aspect-ratio:16/9}
  .split.reversed .split__text{border-radius:var(--r) var(--r) 0 0;order:1}
  .split.reversed .split__media{border-radius:0 0 var(--r) var(--r);order:2}
}

/* ══════════════ TRAVAUX ══════════════ */
/* ── INDEX DÉPLIABLE ─────────────────────────────────────────
   Un seul gabarit pour les douze projets. Aucun recadrage :
   le média garde son format naturel, borné en hauteur, et se
   centre sur un fond beige. Les hauteurs de panneau varient
   sans jamais créer de trou puisque les lignes sont empilées.
   ──────────────────────────────────────────────────────────── */
.grp{scroll-margin-top:24px}
.grp+.grp{margin-top:var(--g-xl)}
.grp__h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--g-s);
  padding-bottom:var(--g-s);margin-bottom:var(--g-tiny);border-bottom:1px solid var(--black)}
.grp__title{font-size:var(--h3);line-height:1.1}
.grp__count{font-size:var(--para-small);color:var(--black-36);white-space:nowrap}
.prj{border-bottom:1px solid var(--medium-grey)}
/* La ligne d'index porte deux actions distinctes, et c'est le <h4> qui tient la
   grille : le titre et sa discipline sont un LIEN vers la page projet, le seul
   « + » est le bouton qui déplie l'aperçu. Le titre était auparavant dans le
   bouton, il ne pouvait donc pas être cliquable vers la page. */
.prj__h{margin:0;font-weight:400;
  display:grid;grid-template-columns:1fr auto 28px;align-items:center;gap:var(--g-n);
  transition:padding-inline-start .4s cubic-bezier(.16,.84,.28,1)}
.prj:hover .prj__h,.prj.open .prj__h{padding-inline-start:14px}
/* le lien couvre les deux premières colonnes et reprend leur répartition, la
   discipline reste donc alignée à droite comme avant */
.prj__lien{grid-column:1/3;display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:var(--g-n);padding:28px 0;color:var(--black);text-decoration:none}
/* le bouton ne pèse que 28px de colonne mais sa cible est élargie à 44px par un
   padding compensé en marge négative : la mise en page ne bouge pas, le doigt
   trouve la cible. C'est désormais le seul point de dépliage de la ligne. */
.prj__btn{grid-column:3;display:grid;place-items:center;padding:28px 8px;margin-inline:-8px;
  background:none;border:0;cursor:pointer;font-family:var(--font);color:var(--black)}
.prj__t{font-size:var(--h4);line-height:1.1;transition:color .2s}
.prj:hover .prj__t{color:var(--accent)}
.prj__lien:focus-visible .prj__t{color:var(--accent);text-decoration:underline;text-underline-offset:6px}
.prj__d{white-space:nowrap}
.prj__x{position:relative;width:14px;height:14px;color:var(--black-36);transition:color .2s}
.prj:hover .prj__x{color:var(--accent)}
.prj__x::before,.prj__x::after{content:"";position:absolute;background:currentColor;transition:transform .35s cubic-bezier(.16,.84,.28,1)}
.prj__x::before{left:0;top:6.5px;width:14px;height:1px}
.prj__x::after{left:6.5px;top:0;width:1px;height:14px}
.prj.open .prj__x::after{transform:scaleY(0)}
.prj__panel{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .55s cubic-bezier(.16,.84,.28,1)}
.prj.open .prj__panel{grid-template-rows:1fr}
.prj__wrap{overflow:hidden;min-height:0}
.prj__inner{display:grid;grid-template-columns:8fr 4fr;gap:var(--g-l);
  padding-bottom:var(--g-l);opacity:0;transition:opacity .4s ease .1s}
.prj.open .prj__inner{opacity:1}
.prj__media{display:grid;place-items:center;overflow:hidden;border-radius:var(--r);
  background:var(--soft-grey-2)}
/* Le média occupe toute la largeur de sa colonne et le cadre prend sa hauteur :
   aucune bande claire ne subsiste autour, quel que soit le format du fichier.
   Sur la colonne large, les formats paysage du site tombent entre 460 et 510px
   de haut, ce qui garde un rythme régulier d'un panneau à l'autre. */
.prj__media img,.prj__media video{display:block;width:100%;height:auto}
/* le média entier mène à la page projet. Il est masqué au clavier (tabindex -1)
   pour ne pas doubler le lien du titre et celui de « Voir le projet ». */
.prj__media-lien{display:block;width:100%}
.prj__media-lien img{transition:transform .5s cubic-bezier(.16,.84,.28,1)}
.prj__media-lien:hover img{transform:scale(1.02)}
@media(prefers-reduced-motion:reduce){.prj__media-lien:hover img{transform:none}}
/* Média vertical : la colonne est réduite à la largeur qu'occupe le fichier une
   fois ramené à 500px de haut, valeur portée par --mw sur le panneau. Colonnes
   fixes et non `auto`, une piste `auto` s'étirant pour remplir la ligne, ce qui
   rejetait le texte à l'autre bout. */
.prj__inner--portrait{grid-template-columns:var(--mw) minmax(0,460px);justify-content:start}
.prj__media--portrait{width:var(--mw);max-width:100%}
.prj__txt{display:flex;flex-direction:column;align-items:flex-start;gap:var(--g-n);padding-top:4px}
@media(max-width:991px){
  .prj__inner{grid-template-columns:1fr;gap:var(--g-n)}
  /* la discipline passe sous le titre : le lien redevient une colonne unique et
     le bouton se cale en haut de la ligne, à hauteur du titre */
  .prj__h{grid-template-columns:1fr 20px;gap:var(--g-s)}
  .prj__lien{grid-column:1;grid-template-columns:1fr;row-gap:2px}
  .prj__btn{grid-column:2;align-self:start;padding:30px 12px 28px;margin-inline:-12px}
  .prj__d{white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  .prj__panel,.prj__inner,.prj__h{transition:none}
}

/* ══════════════ CTA FINAL ══════════════ */
.blurb{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
  align-items:flex-start;gap:var(--g-xl);padding:var(--g-l);border-radius:var(--r);
  background:var(--soft-grey-2)}
@media(max-width:767px){.blurb{gap:48px}}
/* ══════════════ PIED ══════════════ */
.divider{width:100%;height:2px;background:var(--medium-grey)}
.foot-top{padding-top:clamp(64px,7vw,104px)}
.foot{padding-top:var(--g-d)}
.foot__grid{display:grid;grid-template-columns:1fr 1.2fr 1fr 1fr;gap:var(--g-d);padding-bottom:var(--g-d)}
.foot__col h5{font-size:var(--para-big);text-transform:uppercase;font-weight:400;margin-bottom:var(--g-n)}
.foot__col a{display:block;padding:6px 0;transition:color .2s}
.foot__col a:hover{color:var(--accent)}@media(max-width:991px){.foot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:479px){.foot__grid{grid-template-columns:1fr;gap:32px}}

/* ══════════════ LIGHTBOX ══════════════ */
.lb{position:fixed;inset:0;z-index:2000;background:rgba(255,255,255,.98);display:none;place-items:center;padding:var(--g-d)}
.lb.on{display:grid}
/* bornée en hauteur : sur une fenêtre basse la vidéo débordait sous l'écran */
.lb video{width:min(100%,1280px);max-height:calc(100vh - 2*var(--g-d));
  height:auto;object-fit:contain;border-radius:var(--r)}
.lb__x{position:absolute;top:24px;right:24px;background:none;border:0;cursor:pointer;
  font-family:var(--font);font-size:16px;color:var(--black)}

/* ══════════════ TITRES LIGNE PAR LIGNE ══════════════ */
/* Le script découpe le titre en lignes réelles, chacune enfermée dans une
   fenêtre qui rogne. La ligne monte depuis le bas de sa propre fenêtre, avec un
   décalage croissant, ce qui donne la montée en cascade.
   Tant que le script n'a pas tourné, ou si le visiteur demande moins
   d'animations, le titre reste un titre normal. */
.ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.ln>span{display:block;transform:translateY(110%);
  transition:transform 1s cubic-bezier(.16,.84,.28,1)}
[data-lignes].vu .ln>span{transform:none}
@media(prefers-reduced-motion:reduce){
  .ln>span{transform:none;transition:none}
}

/* ══════════════ RÉVÉLATIONS (actives seulement si le JS tourne) ══════════════ */
.js [data-rv]{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,.84,.28,1)}
.js [data-rv].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js [data-rv]{opacity:1;transform:none}}

/* ═══════════════════════════════════════════════════════════════════
   PAGES PROJET
   Même vocabulaire que la page d'accueil : conteneur de 1440, marges
   fluides, fond clair, blocs beiges à coins de 10px, vermillon pour
   l'accent. Les noms de classes d'origine sont conservés, ce qui évite
   de réécrire le contenu des douze pages.
   ═══════════════════════════════════════════════════════════════════ */
.case{max-width:var(--max);margin-inline:auto;padding-inline:var(--sides);
  padding-top:clamp(56px,7vw,104px);padding-bottom:var(--section)}
.case__back{display:inline-flex;align-items:center;gap:8px;
  font-size:var(--para-small);color:var(--black-36);transition:color .2s ease,gap .2s ease}
.case__back:hover{color:var(--accent);gap:12px}

.case__head{margin-top:clamp(28px,4vw,56px);margin-bottom:clamp(28px,4vw,48px)}
.case__cat{display:block;font-size:var(--eyebrow);text-transform:uppercase;
  line-height:1.5;color:var(--black-64);margin-bottom:16px}
.case__title{font-size:var(--h1);line-height:1.1;letter-spacing:-1px}
.case__lead{margin-top:24px;max-width:var(--mesure);color:var(--black-64);
  font-size:var(--para-big);line-height:1.55}
.case__intro,.case__bd-lead{max-width:var(--mesure);color:var(--black-64);
  font-size:var(--para-big);line-height:1.6;margin-bottom:clamp(18px,2.5vw,28px)}

/* ── UN SEUL BORD DROIT POUR TOUT LE TEXTE ──
   Surtitre, titre, chapeau, intertitres, paragraphes et légendes s'arrêtent tous
   sur la même verticale, celle de `--mesure`. Avant, les titres couraient jusqu'au
   bord du conteneur, les paragraphes s'arrêtaient 110 px plus tôt et les légendes
   prenaient la largeur de leur média : sept bords droits différents sur une même
   page. Les MÉDIAS, eux, gardent la pleine largeur : c'est ce décalage assumé
   entre colonne de texte et colonne d'image qui donne le rythme.
   Sur une légende de vignette étroite, `min(100%, …)` retombe sur la largeur de
   la vignette, la légende reste donc calée sous son image. */
.case__cat,.case__title,.case__media-title,.case__sous-titre,
.case__fig figcaption{max-width:var(--mesure)}

/* Sur une mesure longue, un paragraphe finit souvent par un mot seul en dernière
   ligne. `pretty` demande au moteur d'éviter ces orphelins, `balance` répartit les
   lignes d'un titre court à parts égales. Les navigateurs qui ne connaissent pas
   ces valeurs les ignorent, la mise en page reste celle d'avant. */
.case__lead,.case__intro,.case__bd-lead,.case__body p,.case__fig figcaption{text-wrap:pretty}
.case__media-title,.case__sous-titre{text-wrap:balance}

/* ── médias ── */
.case__fig{margin:clamp(24px,3.5vw,48px) 0}
.case__fig img,.case__fig video{width:100%;height:auto;
  border-radius:var(--r);background:var(--soft-grey-2)}
.case__fig figcaption{margin-top:12px;color:var(--black-36);font-size:var(--para-small)}
.case__fig figcaption a{color:inherit;text-decoration:underline}
.case__fig figcaption a:hover{text-decoration:underline}
.case__fig--center{text-align:center}
.case__fig--center img,.case__fig--center video{width:auto;max-width:100%;margin-inline:auto}
.case__fig--square img,.case__fig--square video{max-width:min(100%,640px)}
.case__fig--portrait img,.case__fig--portrait video{max-width:min(100%,430px)}
.case__fig--cloture{margin:clamp(48px,7vw,104px) 0 clamp(32px,4vw,56px)}
.case__fig--tour img{max-width:min(100%,540px)}
.case__fig--doc{text-align:center}
.case__fig--doc img{max-width:min(100%,760px);margin-inline:auto}
.case__fig--final{position:relative}
.case__cover,.case__poster{border-radius:var(--r);overflow:hidden;
  background:var(--soft-grey-2);margin:clamp(24px,3.5vw,48px) 0}
.case__cover img,.case__poster img{width:100%;height:auto}

.case__video{border-radius:var(--r);overflow:hidden;background:#000;
  margin:clamp(24px,3.5vw,48px) 0}
.case__video video,.case__video iframe{display:block;width:100%;height:auto;border:0}
/* Un iframe n'a pas de hauteur intrinsèque : sans rapport imposé il retombe sur ses
   150 px par défaut et le lecteur s'écrase en bandeau. Vaut pour tout embed collé ici. */
.case__video iframe{aspect-ratio:16/9;height:100%}
.case__embed{position:relative;aspect-ratio:16/9;border-radius:var(--r);
  overflow:hidden;background:#000;margin:clamp(24px,3.5vw,48px) 0}
.case__embed iframe{width:100%;height:100%;border:0;display:block}
.case__media-title{font-size:var(--h2);line-height:1.05;letter-spacing:-.6px;font-weight:400;
  margin:clamp(48px,7vw,104px) 0 16px}
.case__sous-titre{font-size:var(--h3);line-height:1.1;font-weight:400;
  margin:clamp(36px,4.5vw,64px) 0 12px}
.case__note{max-width:var(--mesure);margin:clamp(28px,4vw,48px) 0;
  color:var(--black);font-size:var(--para-small);line-height:1.7}
.case__note strong,.case__note b{font-weight:500}

.case__duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--g-n);
  align-items:start;margin:clamp(24px,3.5vw,48px) 0}
.case__duo>*,.case__duo .case__fig{margin:0}
.case__row{display:flex;gap:var(--g-n);align-items:flex-start;margin:clamp(24px,3.5vw,48px) 0}
.case__row>figure{margin:0}
.case__row__h{flex:1.778 1 0;min-width:0}
.case__row__v{flex:.5625 1 0;min-width:0}
.case__gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g-s);
  margin:clamp(24px,3.5vw,48px) 0}
.case__gallery .case__fig{margin:0}
.case__gallery .case__fig img{aspect-ratio:16/10;object-fit:cover}
/* galerie sans recadrage : chaque image garde son rapport */
.case__gallery--libre{align-items:start}
.case__gallery--libre .case__fig img{aspect-ratio:auto;object-fit:contain;height:auto}
/* deux planches hautes côte à côte, alignées en haut */
.case__duo--haut{align-items:start}
.case__gallery--4{grid-template-columns:repeat(4,1fr)}
.case__gallery--4 .case__fig img{aspect-ratio:1;object-fit:cover}
.case__gallery--4 figcaption{margin-top:10px}
.case__gallery .n{color:var(--black-64);margin-right:8px}

/* ── avant / après : scène 3D face à l'image finale ── */
.case__ba{margin:clamp(24px,3.5vw,48px) 0}
.case__ba__row{padding:clamp(20px,2.6vw,30px) 0;border-top:1px solid var(--medium-grey)}
.case__ba__row:last-child{border-bottom:1px solid var(--medium-grey)}
.case__ba__h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.case__ba__n{font-size:var(--para-small);color:var(--black-64)}
.case__ba__t{font-size:var(--h5,var(--para-big));font-weight:500;line-height:1.2}
.case__ba__tc{margin-left:auto;font-size:var(--para-small);color:var(--black-40,var(--black-64))}
.case__ba__d{max-width:var(--mesure);color:var(--black-64);font-size:var(--para-small);
  line-height:1.6;margin-bottom:clamp(12px,1.6vw,18px)}
.case__ba__duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--g-s)}
.case__ba__duo figure{margin:0;position:relative}
.case__ba__duo img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r);background:var(--beige)}
/* variante 9:16 : le texte à gauche, les deux verticales à droite */
.case__ba--v .case__ba__duo img{aspect-ratio:9/16}
.case__ba--v .case__ba__row{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,clamp(320px,44vw,600px));
  gap:var(--g-l,32px);align-items:center}
.case__ba--v .case__ba__txt{align-self:center}
.case__ba--v .case__ba__tc{margin-left:0}
.case__ba--v .case__ba__d{margin-bottom:0}

/* ──────────────────────────────────────────────────────────────────────
   GRILLE MÉDIA UNIFIÉE  (classe .case--grille sur le <main>)

   ⚠ Système révisé le 13 août 2026. La version d'avant posait chaque média
   CONTENU dans une boîte de rapport fixe, sur le beige : les rangées étaient
   parfaitement alignées, mais tout format qui ne tombait pas juste laissait
   deux bandes grises autour de l'image. Andi les a jugées inacceptables, et
   il a raison : une bande grise dit au lecteur que le média n'a pas été
   pensé pour son cadre.

   Nouveau principe, en deux familles, et AUCUNE bande nulle part.

   1. LES VISUELS remplissent leur cadre (`object-fit:cover`). Le cadre prend
      un rapport du canon ci-dessous, et l'image est rognée de ce qu'il faut
      pour le remplir. Les rangées restent donc alignées, les légendes
      partent de la même ligne.
      Canon, six rapports et pas un de plus :
        2/1    paire sombre / clair collée
        16/9   pleine largeur, vidéo, bannière
        3/2    duo d'objets
        4/3    duo et galerie par défaut
        1/1    série carrée, galerie 4 colonnes
        3/4    debout
      Règle de choix : prendre le rapport le plus proche du format natif des
      médias de la rangée. Au-delà de 10 % de rognage, ce n'est pas le bon
      rapport, ou ce n'est pas la bonne rangée.

   2. LES DOCUMENTS gardent leur rapport natif, classe `case__fig--natif`.
      Une planche de treize mises en page, un kit de prompts, un programme
      d'événement, une grille de vingt-quatre images : ce sont des documents,
      les rogner coupe de l'information. Ils ne sont donc jamais rognés, et
      comme la boîte épouse l'image, ils n'ont pas de bande non plus.
      ⚠ Corollaire : un document ne se met JAMAIS dans une rangée. Il est
      seul, en pleine largeur ou bridé par `--demi` / `--moyen`, centré.
   ────────────────────────────────────────────────────────────────────── */
.case--grille .case__fig>img,
.case--grille .case__fig>video{
  display:block;width:100%;height:auto;max-width:none;margin-inline:0;
  aspect-ratio:var(--ar,16/9);object-fit:cover;
  background:var(--soft-grey-2);border-radius:var(--r)}

.case--grille .case__duo .case__fig>img,
.case--grille .case__duo .case__fig>video,
.case--grille .case__gallery .case__fig>img,
.case--grille .case__gallery .case__fig>video{aspect-ratio:var(--ar,4/3);object-fit:cover}

.case--grille .case__gallery--4 .case__fig>img{aspect-ratio:1;object-fit:cover}
/* galerie de documents : trois colonnes, chaque planche à son rapport natif,
   alignées en haut. A remplacé le carrousel du kit de prompts le 3 septembre 2026. */
.case__gallery--natif{align-items:start}
.case--grille .case__gallery--natif .case__fig>img{aspect-ratio:auto;height:auto;object-fit:initial}

/* famille 2 : le document garde son rapport, la boîte épouse l'image */
.case--grille .case__fig--natif>img,
.case--grille .case__fig--natif>video{aspect-ratio:auto;height:auto}

/* variantes de duo, selon le format dominant des deux médias.
   Choisir celle qui colle au plus près, pour limiter le rognage. */
.case--grille .case__duo--large{--ar:16/9}
.case--grille .case__duo--objet{--ar:3/2}
.case--grille .case__duo--carre{--ar:1/1}
.case--grille .case__duo--debout{--ar:3/4}
/* duo de documents : chacun garde son rapport natif, les deux colonnes n'ont
   donc pas la même hauteur et les légendes ne partent pas de la même ligne.
   C'est le prix à payer pour poser deux planches côte à côte sans en rogner
   aucune, et la seule dérogation à la règle « un document ne va jamais dans
   une rangée ». À réserver aux paires de planches, jamais aux visuels. */
.case--grille .case__duo--natif .case__fig>img,
.case--grille .case__duo--natif .case__fig>video{aspect-ratio:auto;height:auto}

/* Variante à hauteur égale. Deux planches de rapports différents posées côte à
   côte donnaient deux blocs de hauteurs très inégales, ce qui se lisait comme un
   défaut d'alignement.
   Le partage se fait au prorata du RAPPORT de chaque image, porté par `--r` sur
   la figure : une cellule reçoit une largeur proportionnelle à son rapport, donc
   `largeur ÷ rapport` donne la même hauteur pour les deux, et la rangée remplit
   toute la mesure. Aucun rognage, aucune bande, aucun vide à droite.
   ⚠ `--r` doit valoir le rapport réel du fichier, largeur ÷ hauteur. Faux
   rapport, hauteurs inégales. */
.case--grille .case__duo--egal{display:flex;align-items:flex-start;gap:var(--g-n)}
.case--grille .case__duo--egal .case__fig{flex:var(--r,1) 1 0;min-width:0}
.case--grille .case__duo--egal .case__fig>img{
  width:100%;height:auto;aspect-ratio:auto;max-width:none}
@media(max-width:767px){
  .case--grille .case__duo--egal{flex-direction:column}
  .case--grille .case__duo--egal .case__fig{flex:0 0 auto}
}

/* média carré isolé : même gabarit partout, centré */
.case--grille .case__fig--square{text-align:center}
.case--grille .case__fig--square>img,
.case--grille .case__fig--square>video{
  aspect-ratio:1;max-width:min(100%,560px);margin-inline:auto}

/* la rangée SHIELDED garde ses deux rapports, elle est déjà à fleur */
.case--grille .case__row__h>video{aspect-ratio:16/9}
.case--grille .case__row__v>video{aspect-ratio:9/16}

/* les exceptions d'avant n'ont plus lieu d'être dans la grille */
.case--grille .case__fig--doc{text-align:left}
.case--grille .case__fig--doc>img{max-width:none;margin-inline:0}
/* média secondaire : moitié de la largeur, pour ne pas dominer le travail propre */
.case--grille .case__fig--demi>img{max-width:min(100%,560px)}
/* largeur intermédiaire, entre la moitié et la colonne entière */
.case--grille .case__fig--moyen>img{max-width:min(100%,840px)}
/* un média plus étroit que la colonne se pose au centre, sa légende avec lui */
.case--grille .case__fig--centre{text-align:center}
.case--grille .case__fig--centre>img,
.case--grille .case__fig--centre>video{margin-inline:auto}
.case--grille .case__gallery--libre .case__fig>img{aspect-ratio:1;object-fit:contain;height:auto}

/* paires sombre / clair collées : le fichier contient déjà les deux états d'un
   même objet, côte à côte, en 2/1. Deux colonnes et une largeur plafonnée, pour
   que la série se lise d'un coup d'œil sans occuper toute la page. Le rapport
   se pose sur le conteneur, en --ar, et descend jusqu'aux images. */
.case__paires{display:grid;grid-template-columns:1fr 1fr;gap:var(--g-n);
  margin:clamp(24px,3.5vw,48px) 0}
.case__paires .case__fig--tete{grid-column:1/-1}
@media(max-width:767px){.case__paires{grid-template-columns:1fr}}

/* ── ce que je sais faire, liste à filets ── */
.atouts{list-style:none;max-width:var(--mesure-courte);margin:clamp(28px,3.5vw,44px) 0 0;text-align:left}
.atouts li{padding:clamp(16px,2vw,22px) 0;border-top:1px solid var(--medium-grey);
  color:var(--black-64);font-size:var(--para-big);line-height:1.6}
.atouts li:last-child{border-bottom:1px solid var(--medium-grey)}
.atouts strong{font-weight:500;color:var(--black);display:block;margin-bottom:4px}
/* À propos en deux colonnes : six points courts, un titre et une ligne chacun.
   Les bordures sont portées par le haut de chaque cellule, et par le bas des
   deux dernières, pour que les deux colonnes se ferment sur la même ligne. */
.atouts--grille{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--g-xl);max-width:var(--mesure)}
.atouts--grille li{border-bottom:0}
.atouts--grille li:last-child{border-bottom:1px solid var(--medium-grey)}
.atouts--grille li:nth-last-child(2):nth-child(even){border-bottom:1px solid var(--medium-grey)}
/* nombre impair : le dernier point prend les deux colonnes, sans case vide */
.atouts--grille li:last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:767px){
  .atouts--grille{grid-template-columns:1fr}
  .atouts--grille li:nth-last-child(2){border-bottom:0}
}

/* ── pipeline en étapes numérotées ── */
.case__pipeline{list-style:none;max-width:var(--mesure-courte);margin:clamp(24px,3.5vw,40px) 0}
.case__pipeline li{display:grid;grid-template-columns:auto 1fr;gap:var(--g-n);
  padding:20px 0;border-top:1px solid var(--medium-grey)}
.case__pipeline li:last-child{border-bottom:1px solid var(--medium-grey)}
.case__step-n{font-size:var(--para-small);color:var(--black-64);padding-top:.2em}
.case__pipeline strong{font-weight:500;color:var(--black);display:inline;margin-right:6px}
.case__pipeline li>div{color:var(--black-64);line-height:1.6}

/* ── corps et fiche projet ── */
/* 7fr 5fr et non 8fr 4fr : la fiche projet à droite recevait une colonne si
   étroite que ses valeurs se cassaient en trois lignes en drapeau. Sur un écran
   16/9 la place existe, autant la donner. */
.case__grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--g-xxl);
  align-items:start;margin-top:clamp(32px,4vw,64px)}
.case__body h3{font-size:var(--h4);line-height:1.2;margin:clamp(28px,3vw,44px) 0 16px}
.case__body h3:first-child{margin-top:0}
.case__body p{max-width:var(--mesure);color:var(--black-64);font-size:var(--para-big);
  line-height:1.6;margin-bottom:18px}
.case__tags{display:flex;flex-wrap:wrap;list-style:none;max-width:var(--mesure);
  column-gap:0;row-gap:6px;color:var(--black-64);font-size:var(--para-big);line-height:1.6}
.case__tags li+li::before{content:'·';color:var(--accent);padding:0 .6em}
.case__meta{position:sticky;top:24px;background:var(--soft-grey-2);
  border-radius:var(--r);padding:var(--g-d)}
.case__meta h3{font-size:var(--h4);line-height:1.2;margin-bottom:6px}
/* Une ligne de fiche est un couple libellé / valeur, le libellé à gauche et la
   valeur alignée à droite. `flex-wrap` reste là en soupape : si la valeur ne
   passe vraiment pas, elle descend et prend toute la largeur plutôt que d'être
   comprimée en colonne étroite. */
.case__meta .row{display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:4px 18px;padding:14px 0;border-bottom:1px solid var(--medium-grey)}
.case__meta .row:last-child{border-bottom:0;padding-bottom:0}
.case__meta dt{font-size:var(--para-small);text-transform:uppercase;color:var(--black-36);
  flex:0 0 auto}
.case__meta dd{text-align:right;font-size:var(--para-small);
  flex:0 1 auto;min-width:0;margin-left:auto;line-height:1.5}
/* Entre 992 et 1200 la fiche est dans sa colonne étroite, et la soupape ci-dessus
   se déclenche ligne par ligne : une valeur passe dessous, la suivante non, c'est
   illisible. Sur cette plage seulement, on empile franchement toutes les lignes,
   libellé au-dessus, valeur en dessous, tout à gauche. Au-dessous de 992 la fiche
   repasse pleine largeur et le couple côte à côte redevient confortable. */
@media(min-width:992px) and (max-width:1199px){
  .case__meta .row{display:block}
  .case__meta dd{text-align:left;margin-left:0;margin-top:3px}
}
.accent{color:var(--black);font-weight:500}

.case__cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:clamp(40px,5vw,72px)}

/* ── palette d'un projet ──
   Reprise telle quelle d'un mémo de direction artistique : le rôle de chaque
   couleur compte autant que la couleur. */
.palette{list-style:none;max-width:var(--mesure-courte);margin:clamp(18px,2.5vw,28px) 0}
.palette li{display:flex;align-items:center;gap:var(--g-s);padding:10px 0;
  border-top:1px solid var(--medium-grey);color:var(--black-64);font-size:var(--para-small)}
.palette li:last-child{border-bottom:1px solid var(--medium-grey)}
.palette b{font-weight:500;color:var(--black);min-width:11ch}
.palette__c{flex:0 0 auto;width:46px;height:22px;border-radius:var(--r-tiny);
  border:1px solid var(--medium-grey)}

/* ── suite de lecture ──
   Trois autres projets en fin de page : ceux de la même catégorie d'abord, puis
   les plus solides. Le visiteur arrivé au bout d'un projet a une porte de sortie
   qui n'est pas le bouton retour du navigateur. */
.reco{margin-top:var(--section);border-top:1px solid var(--medium-grey);padding-top:var(--g-l)}
.reco__t{font-size:var(--h2);line-height:1.05;letter-spacing:-.6px;margin-bottom:var(--g-d)}
.reco__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g-n)}
.reco__item{display:grid;gap:10px;align-content:start}
.reco__media{display:block;overflow:hidden;border-radius:var(--r);
  background:var(--soft-grey-2);aspect-ratio:16/10}
.reco__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.16,.84,.28,1)}
.reco__item:hover .reco__media img{transform:scale(1.05)}
.reco__cat{font-size:var(--para-small);color:var(--black-36)}
.reco__name{font-size:var(--h4);line-height:1.2;transition:color .2s}
.reco__item:hover .reco__name{color:var(--accent)}
/* nature du projet : réel, école ou personnel. Le doute coûte plus que l'aveu. */
.reco__note{font-size:var(--para-small);color:var(--black-36);
  border-top:1px solid var(--medium-grey);padding-top:8px;margin-top:2px}
@media(max-width:767px){.reco__grid{grid-template-columns:1fr 1fr;gap:var(--g-s)}}
@media(max-width:479px){.reco__grid{grid-template-columns:1fr}}

@media(max-width:991px){
  .case__grid{grid-template-columns:1fr;gap:var(--g-xl)}
  .case__meta{position:static}
  .case__gallery,.case__gallery--4{grid-template-columns:1fr 1fr}
}
@media(max-width:767px){
  .case__duo,.case__gallery,.case__gallery--4{grid-template-columns:1fr}
  .case__row{flex-direction:column}
  .case__pipeline li{grid-template-columns:1fr;gap:6px}
  .case__ba__tc{margin-left:0;width:100%}
  .case__ba--v .case__ba__d{margin-bottom:clamp(12px,1.6vw,18px)}
}


/* ── loupe sur les planches denses ──────────────────────────────────────
   Certaines images de ces pages sont des documents, pas des visuels : un
   programme d'événement, une planche de treize mises en page, un kit de
   prompts. Ramenées à la largeur d'un téléphone, elles ne se lisent plus.
   Un appui les ouvre en plein écran, à leur taille réelle, avec défilement
   dans les deux sens. Le bouton n'apparaît que si le script a pu s'installer,
   sinon rien ne change et l'image reste une image.
   ────────────────────────────────────────────────────────────────────── */
.case__fig--zoom{position:relative}
.case__fig--zoom>img{cursor:zoom-in}
.zoom__btn{position:absolute;right:10px;top:10px;display:inline-flex;align-items:center;
  gap:7px;padding:7px 13px;border:0;border-radius:var(--r-round);cursor:pointer;
  font:inherit;font-size:var(--para-small);line-height:1;color:var(--black);
  background:rgba(255,255,255,.92);box-shadow:0 1px 8px rgba(0,0,0,.16);
  transition:background .2s}
.zoom__btn:hover{background:#fff}
/* Le bouton se cale sur l'image, pas sur la figure. Quand l'image est bridée en
   largeur et centrée, la figure reste pleine largeur et le bouton se retrouverait
   à flotter dans le beige, loin du média. --cap reprend le plafond de la variante
   pour le ramener sur le coin de l'image. */
.case__fig--zoom{--cap:100%}
.case__fig--demi.case__fig--zoom{--cap:560px}
.case__fig--moyen.case__fig--zoom{--cap:840px}
.case__fig--centre.case__fig--zoom .zoom__btn{
  right:max(10px, calc(50% - var(--cap) / 2 + 10px))}

/* au-dessus de la barre de navigation (1000) et du tiroir (999), sous la
   lightbox du showreel (2000) qui n'existe que sur l'accueil */
.zoom{position:fixed;inset:0;z-index:1500;display:none;background:rgba(0,0,0,.92)}
.zoom.on{display:block}
.zoom__zone{position:absolute;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;
  padding:clamp(12px,3vw,44px);text-align:center;white-space:nowrap}
.zoom__zone::before{content:'';display:inline-block;height:100%;vertical-align:middle}
.zoom__zone img{display:inline-block;vertical-align:middle;white-space:normal;
  max-width:none;width:auto;height:auto;border-radius:var(--r);background:#fff}
.zoom__x{position:fixed;right:14px;top:14px;z-index:2;width:42px;height:42px;border:0;
  border-radius:var(--r-round);cursor:pointer;background:#fff;color:var(--black);
  font-size:21px;line-height:1}
@media(prefers-reduced-motion:reduce){.zoom__btn{transition:none}}

/* ── FICHE PROJET EN BANDEAU ───────────────────────────────────────────
   Posée sur `projet-zama.html`. L'ancienne disposition, `case__grid` avec le
   descriptif à gauche et `case__meta` en panneau à droite, tient encore les
   autres pages projet, mais sur un écran 16/9 le panneau était plus haut que
   le texte et il restait un grand vide en bas à gauche. Andi l'a refusé.
   Ici la fiche devient un bandeau sous le descriptif : huit couples libellé /
   valeur en quatre colonnes, soit deux rangées pleines, sans cellule vide.
   ⚠ Le compte doit rester un multiple du nombre de colonnes, sinon le trou
   revient. À huit entrées, on est bon en 4, en 2 et en 1 colonne.
   ────────────────────────────────────────────────────────────────────── */
.case__fiche{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(22px,2.6vw,36px);max-width:var(--mesure);
  margin:clamp(28px,4vw,48px) 0 0;padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--medium-grey)}
.case__fiche>div{min-width:0}
.case__fiche dt{font-size:var(--para-small);text-transform:uppercase;
  color:var(--black-36);margin-bottom:7px}
.case__fiche dd{font-size:var(--para-small);line-height:1.5;color:var(--black);
  text-wrap:pretty}
@media(max-width:991px){.case__fiche{grid-template-columns:repeat(2,1fr)}}
@media(max-width:479px){.case__fiche{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════════════
   PROTOTYPE INTERACTIF EMBARQUÉ  (.proto)
   ──────────────────────────────────────────────────────────────────────
   Sert à poser un prototype Figma dans une page projet. Trois raisons
   d'avoir un bloc à part plutôt que `.case__video` :
   1. le cadre n'est pas noir, un prototype d'interface a son propre fond ;
   2. l'iframe ne se charge qu'au clic, une intégration Figma pèse plusieurs
      mégaoctets et bloque le rendu si on la pose au chargement ;
   3. un même fichier expose plusieurs parcours, il faut pouvoir en changer.
   Rien de nouveau côté direction artistique : vermillon, beige, rayon de 10px,
   Telegraf, comme le reste du site.
   ⚠ Le rapport est 16/10, celui des maquettes 1440 du fichier, et passe en 3/4
   sous 480px pour que le parcours mobile ne soit pas écrasé.
   ══════════════════════════════════════════════════════════════════════ */
.proto{margin:clamp(24px,3.5vw,48px) 0}
.proto__tete{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--g-s);flex-wrap:wrap;margin-bottom:var(--g-s);max-width:var(--mesure)}
.proto__flux{display:flex;gap:8px;flex-wrap:wrap}
.proto__chip{font:inherit;font-size:var(--para-small);line-height:1;cursor:pointer;
  border:1px solid var(--medium-grey);background:transparent;color:var(--black);
  border-radius:var(--r-round);padding:10px 16px;transition:background .18s,border-color .18s,color .18s}
.proto__chip:hover{border-color:var(--black);background:var(--soft-grey-2)}
.proto__chip[aria-pressed="true"]{background:var(--black);border-color:var(--black);color:#fff}

.proto__cadre{position:relative;border-radius:var(--r);overflow:hidden;
  background:var(--soft-grey-2);border:1px solid var(--medium-grey);aspect-ratio:16/10}
.proto__cadre iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* Façade cliquable : une vraie image du prototype sous un voile uni, et rien
   d'autre qu'un bouton au centre. ⚠ Ne pas y remettre de titre ni de chapeau :
   la plaque est une capture d'interface, elle porte déjà son propre texte, et
   deux typographies superposées se battaient. Ce qu'il y a à dire se dit
   au-dessus du cadre, dans l'intertitre et son amorce.
   Elle disparaît au premier clic et laisse la place à l'iframe. */
.proto__facade{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;
  font:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;
  background-image:linear-gradient(rgba(0,0,0,.34),rgba(0,0,0,.34)),var(--plaque);
  background-size:cover;background-position:left center;transition:background-color .2s}
.proto__facade:hover{background-color:rgba(0,0,0,.12)}
.proto__facade:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.proto__go{display:inline-flex;align-items:center;gap:10px;
  background:var(--accent);color:#fff;border-radius:var(--r-round);
  padding:15px 26px;font-size:var(--para-small);transition:background .18s,transform .18s}
.proto__facade:hover .proto__go{background:var(--accent-medium);transform:translateY(-1px)}

.proto__pied{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--g-s);flex-wrap:wrap;margin-top:12px;max-width:var(--mesure)}
.proto__note{color:var(--black-36);font-size:var(--para-small);margin:0}
.proto__liens{display:flex;gap:var(--g-n);font-size:var(--para-small)}
.proto__liens a{color:var(--accent)}
.proto__liens a:hover{text-decoration:underline}

@media(max-width:479px){
  .proto__cadre{aspect-ratio:3/4}
}