/* ============================================================
   VOLUMAGENCY — Composants de sections
   ============================================================ */

/* ============================================================
   HERO — compact, tient dans le viewport
   ============================================================ */
.hero{
  /* le hero occupe le premier écran ; on enchaîne ensuite sur les Talents */
  min-height:calc(100svh - 60px);display:flex;align-items:center;
  padding:clamp(80px,10vh,108px) var(--pad-x) clamp(20px,3vh,36px);
  position:relative;
  /* overflow non masqué : l'aurora se clippe elle-même (.va-aurora),
     ce qui laisse l'indicateur SCROLL déborder sous le hero */
}
.hero-grid{
  position:relative;z-index:3;width:100%;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.9fr);
  align-items:center;gap:clamp(24px,4vw,64px);
}

/* Visuel arrow VA — contenu et ancré dans sa propre colonne (plus de débordement) */
.hero-visual{
  position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1;pointer-events:none;
}
.hero-visual-glow{
  position:absolute;inset:6%;border-radius:50%;z-index:0;
  background:radial-gradient(circle at 50% 46%,var(--orange-tint),transparent 60%);
  filter:blur(34px);
}
.hero-visual img{
  position:relative;z-index:1;width:min(80%,400px);height:auto;
  filter:drop-shadow(0 32px 64px rgba(255,86,2,.26));
  animation:heroFloat 9s ease-in-out infinite;
}
@keyframes heroFloat{
  0%,100%{transform:translateY(0) rotate(-5deg)}
  50%{transform:translateY(-14px) rotate(-2deg)}
}

/* Ondes orange douces animées en fond (style SwipGroup) */
.va-aurora{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.va-aurora span{
  position:absolute;border-radius:50%;filter:blur(72px);
  background:radial-gradient(circle,rgba(255,86,2,.55),transparent 64%);
  opacity:.35;mix-blend-mode:multiply;
}
.va-aurora .b1{width:52vw;height:52vw;left:-10%;top:-12%;animation:auroraDrift 26s ease-in-out infinite}
.va-aurora .b2{width:44vw;height:44vw;right:-8%;top:18%;animation:auroraDrift 32s ease-in-out infinite reverse}
.va-aurora .b3{width:38vw;height:38vw;left:24%;bottom:-18%;animation:auroraDrift 38s ease-in-out infinite}
@keyframes auroraDrift{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(9%,6%) scale(1.14)}
  66%{transform:translate(-8%,10%) scale(.92)}
}
.theme-dark .va-aurora span{opacity:.3;mix-blend-mode:screen;background:radial-gradient(circle,rgba(255,86,2,.7),transparent 66%)}
/* fondu du bas du hero vers le fond de page → transition douce vers la section Talents */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;pointer-events:none;
  height:clamp(120px,20vh,240px);
  background:linear-gradient(to bottom,transparent,var(--bg));
}

.hero-inner{position:relative;z-index:3;max-width:640px}
.hero h1{
  font-size:clamp(40px,4.6vw,72px);line-height:1.06;letter-spacing:-0.03em;margin:0;text-wrap:balance;
}
.hero h1 .ag{color:var(--orange)}
.hero-sub{
  margin-top:16px;font-size:clamp(14px,1.3vw,18px);font-weight:300;
  color:var(--text-soft);max-width:60ch;line-height:1.55;
}
.hero-sub b{color:var(--text);font-weight:500}
.hero-cta{display:flex;gap:13px;margin-top:clamp(18px,2.2vh,28px);flex-wrap:wrap}
.hero-meta{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(20px,2.6vh,34px);max-width:560px;
  padding-top:clamp(16px,2vh,22px);gap:clamp(8px,1.4vw,20px);
}
.hero-meta .stat{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.hero-meta .stat .n{display:flex;align-items:baseline;justify-content:center;gap:1px;font-size:clamp(28px,3vw,40px);font-weight:700;line-height:1;letter-spacing:-0.03em;color:var(--text);font-variant-numeric:tabular-nums}
.hero-meta .stat .n .count{display:inline-block}
.hero-meta .stat .n b{color:var(--orange);font-weight:700}
.hero-meta .stat .l{font-size:12.5px;font-weight:600;letter-spacing:.03em;color:var(--text-soft);line-height:1.35;text-wrap:balance}
@media (max-width:860px){
  .hero{min-height:auto;padding-top:clamp(104px,16vh,128px);padding-bottom:44px;text-align:center}
  .hero-grid{grid-template-columns:1fr;gap:clamp(20px,4vh,34px)}
  .hero-inner{max-width:none;order:2}
  /* la flèche passe AU-DESSUS du texte, en flux, centrée (fini la superposition) */
  .hero-visual{order:1;position:relative;right:auto;top:auto;width:min(186px,46vw);margin:0 auto;opacity:1;aspect-ratio:1/1}
  .hero-visual-glow{display:block;inset:8%}
  .hero-visual img{width:100%;animation:heroFloat 9s ease-in-out infinite;transform:none}
  .hero h1{font-size:clamp(33px,8.6vw,50px)}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  .hero-meta{margin-left:auto;margin-right:auto;gap:12px}
  .hero-meta .stat .n{font-size:clamp(24px,7vw,34px)}
}

/* ============================================================
   TALENTS
   ============================================================ */
.talents-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:58px;
}
@media (max-width:980px){.talents-grid{grid-template-columns:repeat(2,1fr)}}
/* mobile : on garde 2 talents par rangée (cartes compactées) — ajustements après les styles de carte */
@media (max-width:560px){.talents-grid{grid-template-columns:repeat(2,1fr);gap:14px;margin-top:34px}}

.talent-card{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:transform .7s var(--ease), box-shadow .7s var(--ease), border-color .7s var(--ease);
}
.talent-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line)}
.talent-photo{
  position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--bg-2);
}
.talent-photo image-slot, .talent-photo .talent-img, .talent-photo .ph{position:absolute;inset:0;width:100%;height:100%}.talent-photo .talent-img{object-fit:cover;transition:transform .7s var(--ease)}
.talent-photo .ph{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--bg-2),var(--orange-tint));
  font-size:64px;font-weight:700;color:var(--orange);opacity:.9;letter-spacing:-0.04em;
}
.talent-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(255,86,2,.62),rgba(255,86,2,.08) 55%,transparent 75%);
  opacity:0;transition:opacity .7s var(--ease);
}
.talent-card:hover .talent-photo::after{opacity:1}
.talent-card:hover .talent-photo .ph, .talent-card:hover .talent-photo .talent-img{transform:scale(1.06)}
.talent-photo .ph{transition:transform .7s var(--ease)}
/* category chip */
.talent-cat{
  position:absolute;top:14px;left:14px;z-index:3;
  padding:6px 13px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.04em;
  background:rgba(255,255,255,.92);color:#16120e;backdrop-filter:blur(6px);
}
/* Le nombre d'abonnes etait sur pastille orange, posee sur des visuels
   dont le fond EST orange : il s'y fondait. Un encadre sombre et floute
   ressort quel que soit le visuel, et laisse l'orange a la marque. */
.talent-reach{
  position:absolute;top:14px;right:14px;z-index:3;
  padding:6px 12px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em;
  background:rgba(14,11,9,.62);color:#fff;
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px) saturate(1.2);backdrop-filter:blur(8px) saturate(1.2);
  box-shadow:0 6px 18px -10px rgba(0,0,0,.7);
}
.talent-body{padding:16px 20px 18px}
.talent-name{font-size:18px;font-weight:700;letter-spacing:-0.02em}
/* L'arobase est masquee a la demande. Le balisage reste ecrit par
   data.js : supprimer la seule ligne display:none la rend a l'affichage.
   Le pied de carte n'a plus que deux niveaux - le nom, puis les liens -
   l'ecart passe donc de 13 a 17 px : avec l'arobase entre les deux, la
   respiration totale valait 34 px, et 13 px seuls tassaient le bloc. */
.talent-handle{font-size:13px;color:var(--muted);margin-top:2px}
.talent-handle{display:none}
.talent-socials{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:17px;
}
.talent-socials a{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;color:var(--text-soft);
  transition:all .35s var(--ease);
}
.talent-socials a:hover{background:var(--orange);color:#fff;border-color:var(--orange);transform:translateY(-2px)}
.talent-socials svg{width:17px;height:17px}

/* Mobile : 2 talents par écran — carte compactée pour rester lisible à mi-largeur */
@media (max-width:560px){
  .talent-photo .ph{font-size:46px}
  .talent-cat{top:10px;left:10px;padding:5px 10px;font-size:10px}
  .talent-reach{top:10px;right:10px;padding:5px 9px;font-size:10px}
  .talent-body{padding:12px 13px 15px}
  .talent-name{font-size:15px}
  .talent-handle{font-size:12px}
  .talent-socials{gap:6px;margin-top:14px}
  .talent-socials a{width:30px;height:30px;border-radius:9px}
  .talent-socials svg{width:14px;height:14px}
}

.section-foot{display:flex;justify-content:center;margin-top:52px}

/* ============================================================
   PROJETS — galerie de cartes (page d'accueil)
   ============================================================ */
.proj-gallery{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px);margin-top:54px;
}
@media (max-width:920px){.proj-gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.proj-gallery{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}}
.proj-card{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease);
}
.proj-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.proj-visual{position:relative;aspect-ratio:4/3;background:var(--bg-2);overflow:hidden}
.proj-visual > image-slot{position:absolute;inset:0;width:100%;height:100%;transition:transform .7s var(--ease)}
.proj-card:hover .proj-visual > image-slot{transform:scale(1.04)}
.proj-logo-chip{
  position:absolute;left:14px;top:14px;z-index:3;width:112px;height:44px;
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:12px;padding:8px 12px;box-shadow:0 6px 18px -8px rgba(22,18,14,.3);
}
.proj-logo-chip image-slot{width:100%;height:100%;--is-bg:transparent;background:transparent}
.proj-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.proj-title{font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:-0.02em;line-height:1.12}
.proj-title .x{color:var(--orange);font-weight:400;margin:0 2px}
.proj-desc{margin-top:12px;font-size:14px;line-height:1.6;color:var(--text-soft)}
.proj-creator{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:20px}
.proj-creator .pc-ava{width:38px;height:38px;border-radius:50%;overflow:hidden;background:var(--bg-2);border:2px solid var(--orange);flex:none}
.proj-creator .pc-ava image-slot{width:100%;height:100%}
.proj-creator .pc-name{font-size:13.5px;font-weight:600}
.proj-creator .pc-role{font-size:12px;color:var(--muted)}

/* ============================================================
   CAMPAGNES — études de cas alternées (page Projets)
   ============================================================ */
/* Plus de groupes par format : une seule liste, dans l'ordre de Sanity.
   Les en-tetes de groupe (.campaign-group / .campaign-head /
   .campaign-note) sont partis avec le rendu qui les produisait. */
/* L'ecart etait cale sur l'ancienne mise en page, ou seules des
   campagnes de meme format se suivaient. En alternance, un bloc
   vertical de 551 px cotoie un bloc YouTube de 313 px : a 53 px
   d'intervalle les deux se lisaient comme un seul ensemble. */
.campaign-list{margin-top:clamp(30px,5vh,54px);display:flex;flex-direction:column;gap:clamp(60px,9vh,112px)}

.campaign{display:grid;align-items:center;gap:clamp(26px,4vw,60px)}
.campaign.is-vertical{grid-template-columns:minmax(0,310px) 1fr}
.campaign.is-horizontal{grid-template-columns:1.1fr 1fr}
/* miroir : une campagne sur deux a son visuel à droite (sans changer le HTML) */
.campaign-list .campaign:nth-child(even){direction:rtl}
.campaign-list .campaign:nth-child(even) > *{direction:ltr}

.campaign-visual{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background:var(--bg-2);border:1px solid var(--line);
  box-shadow:0 30px 70px -45px rgba(22,18,14,.4);
}
.campaign.is-vertical .campaign-visual{aspect-ratio:9/16}
.campaign.is-horizontal .campaign-visual{aspect-ratio:16/9}
.campaign-visual image-slot{position:absolute;inset:0;width:100%;height:100%}
.campaign-badge{
  position:absolute;left:14px;top:14px;z-index:3;
  padding:7px 13px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.03em;
  background:rgba(255,255,255,.92);color:#16120e;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

.campaign-brand{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange)}
.campaign-title{font-size:clamp(24px,3vw,38px);font-weight:700;letter-spacing:-0.02em;line-height:1.1;margin-top:12px}
.campaign-title .x{color:var(--orange);font-weight:400;margin:0 4px}
.campaign-desc{margin-top:14px;font-size:clamp(15px,1.1vw,16.5px);line-height:1.6;color:var(--text-soft);max-width:48ch}
/* Certaines presentations courent sur dix lignes et etirent la carte bien
   au-dela de son visuel, au point de la faire deborder de l'ecran. Le
   texte tient desormais en quatre lignes et se lit en le faisant defiler
   sur place - rien n'est coupe, tout reste accessible.
   overscroll-behavior:contain : arrive au bas du texte, la page ne se met
   pas a defiler dans la foulee. */
.campaign-desc,
.pcol-list .project .project-desc{
  /* 1lh vaut l'interligne propre a l'element : la meme regle sert donc
     aux deux contextes, qui n'ont ni la meme taille ni le meme
     interligne. Le repli en em couvre un navigateur qui ignorerait lh. */
  max-height:calc(var(--lignes) * 1.6em);
  max-height:calc(var(--lignes) * 1lh);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:12px;
  scrollbar-width:thin;
  scrollbar-color:var(--swip-sb,rgba(140,140,140,.55)) transparent;
}
.campaign-desc{--lignes:4}
/* Sans flex:none, le chapo se laisse comprimer sous sa hauteur voulue -
   overflow:auto lui donne un minimum automatique de zero - et l'on se
   retrouvait avec une ligne et demie affichee. */
.pcol-list .project .project-desc{flex:none}
/* Trois sur la landing : la carte y est plus compacte, et le texte entier
   reste a un clic sur la page Projets. La verticale en prend une de plus -
   sa disposition ne change pas, mais la place existe. */
.pcol-list .project .project-desc{--lignes:3}
.pcol-list .project.is-vertical .project-desc{--lignes:10}
.campaign-desc::-webkit-scrollbar,
.pcol-list .project .project-desc::-webkit-scrollbar{width:4px}
.campaign-desc::-webkit-scrollbar-track,
.pcol-list .project .project-desc::-webkit-scrollbar-track{background:transparent}
.campaign-desc::-webkit-scrollbar-thumb,
.pcol-list .project .project-desc::-webkit-scrollbar-thumb{
  background:var(--swip-sb,rgba(140,140,140,.55));border-radius:999px;
}
/* Le fondu n'apparait que s'il reste vraiment quelque chose a lire, et
   s'efface une fois le bas atteint : sans cela, la derniere ligne
   resterait palie sans raison. Les classes sont posees par va.js. */
.campaign-desc.desc-debordante,
.pcol-list .project .project-desc.desc-debordante{
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent 100%);
}
.campaign-desc.desc-au-bout,
.pcol-list .project .project-desc.desc-au-bout{
  -webkit-mask-image:none;
  mask-image:none;
}
/* Au doigt, en revanche, le texte ne doit PAS retenir le geste : sur un
   telephone il occupe la zone ou l'on balaye pour faire defiler la page,
   et « contain » l'y aurait bloquee une fois le texte parcouru. On rend
   donc l'enchainement, la page reprend d'elle-meme. */
@media (hover:none){
  .campaign-desc,
  .pcol-list .project .project-desc{overscroll-behavior:auto}
  /* Et la barre disparait : au doigt elle ne sert a rien - on ne l'attrape
     pas - alors qu'un trait de couleur pose contre le texte se remarque.
     Le fondu du bas suffit a dire qu'il reste a lire, comme il le fait
     deja pour la piste horizontale. */
  .campaign-desc,
  .pcol-list .project .project-desc{scrollbar-width:none}
  .campaign-desc::-webkit-scrollbar,
  .pcol-list .project .project-desc::-webkit-scrollbar{display:none}
}
.campaign-creator{margin-top:16px;font-size:14px;color:var(--muted)}
.campaign-creator strong{color:var(--text);font-weight:600}
.campaign-creator span{color:var(--orange);margin-left:4px}
/* Les chiffres des collaborations sont masques a la demande. Le balisage
   continue d'etre ecrit par data.js depuis Sanity : supprimer la seule ligne
   display:none les rend a l'affichage. */
.campaign-stats{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,38px);margin-top:26px}
.campaign-stats{display:none}
.cp-stat-n{font-size:clamp(24px,2.6vw,34px);font-weight:700;letter-spacing:-0.02em;line-height:1;color:var(--text)}
.cp-num{font-variant-numeric:tabular-nums}
.cp-stat-n .cp-unit{font-size:.58em;font-weight:700;margin-left:2px;color:var(--orange)}
.cp-stat-l{font-size:12.5px;color:var(--muted);margin-top:7px}

/* ── Images Sanity (remplacent les <image-slot> quand une image est fournie) ── */
/* Équipe : photo */
.member-photo .member-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Campagnes : visuel + logo marque (chip) + avatar talent */
.campaign-visual .campaign-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
/* La pastille avait une hauteur fixe et le logo la remplissait : un
   logotype large et serre comme L'Oreal occupait tout, un logo compact
   avec du blanc autour paraissait deux fois plus petit. La BOITE est
   desormais constante, et le logo se contente d'y tenir - largeur ET
   hauteur bornees, centre. La taille apparente ne depend plus du fichier
   source. */
/* Meme forme et meme hauteur que la pastille de plateforme, en face :
   une pilule de 32 px. Le logo s'y contient, largeur et hauteur bornees,
   donc sa taille apparente ne depend plus du fichier source. */
.campaign-logo{
  position:absolute;top:14px;right:14px;z-index:3;
  height:32px;max-width:52%;
  padding:0 14px;
  display:flex;align-items:center;justify-content:center;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 26px -14px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
/* Tous les logos tenaient deja dans 16 px de haut, mais un logotype
   large comme L'Oreal y peignait 87 px de large quand Emma n'en fait
   que 48 : a hauteur egale, la masse visible doublait. On borne aussi
   la LARGEUR, ce qui fait redescendre les logos etires sans toucher aux
   compacts. Ils se ressemblent enfin. */
.campaign-logo img{
  max-width:62px;max-height:14px;
  width:auto;height:auto;object-fit:contain;display:block;
}
/* Ce bornage reste le repli quand la mesure d'encre n'aboutit pas. Des
   qu'elle aboutit, va.js pose une taille exacte en ligne - il faut alors
   lever les bornes, sinon max-width la rogne malgre tout. */
.campaign-logo img[data-cal],
.project-brand .pb-logoslot .pb-logoimg[data-cal]{
  max-width:none;max-height:none;
}
/* La pastille de plateforme prend la meme ombre, pour faire la paire. */
.campaign-badge{box-shadow:0 10px 26px -14px rgba(0,0,0,.5)}

/* 44 px au lieu de 30 : a l'ancienne taille, on ne distinguait pas le
   visage du createur. La ligne devient une vraie rangee flex, sinon
   l'alignement vertical du texte decrochait. */
.campaign-creator{display:flex;align-items:center;gap:11px}
.campaign-ava{width:44px;height:44px;border-radius:50%;overflow:hidden;
  border:2px solid var(--orange);flex:none;margin:0}
.campaign-ava img{width:100%;height:100%;object-fit:cover;display:block}
/* ============================================================
   ACCEDER AU CONTENU
   Quand la fiche Sanity porte un lien, le visuel devient cliquable :
   un calque couvre l'image et fait apparaitre un bouton de lecture au
   survol. Sans lien, rien n'est rendu - le visuel reste inerte.
   ============================================================ */
.campaign-play{
  position:absolute;inset:0;z-index:4;
  display:flex;align-items:center;justify-content:center;
  border-radius:inherit;text-decoration:none;
  background:rgba(12,8,5,0);
  transition:background .35s var(--ease);
}
/* Disque orange et triangle blanc : la meme couleur que les appels a
   l'action de la page. Plus petit aussi - a 68 px il couvrait le sujet
   de l'affiche. */
.campaign-play .cp-play{
  width:clamp(42px,4vw,52px);aspect-ratio:1;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--orange);color:#fff;
  box-shadow:0 14px 34px -14px rgba(255,86,2,.9), 0 0 0 1px rgba(255,255,255,.16) inset;
  opacity:0;transform:scale(.82);
  transition:opacity .3s var(--ease), transform .38s cubic-bezier(.22,1,.36,1);
}
/* Le triangle n'etait pas centre : le trace lui-meme est decale vers la
   droite dans sa boite de 24, et un margin-left de 8 % s'y ajoutait. On
   cale son centre de gravite sur celui du disque - un decalage de 2 %,
   pas de 8. */
.campaign-play .cp-play svg{width:42%;height:42%;margin-left:2%;display:block}
.campaign-play:hover,.campaign-play:focus-visible{background:rgba(12,8,5,.34)}
.campaign-play:hover .cp-play,
.campaign-play:focus-visible .cp-play{opacity:1;transform:scale(1)}
.campaign-play:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
/* Sans survol - tactile - le bouton reste visible : sinon rien n'indique
   que le visuel mene quelque part. Mais il ne doit pas manger l'affiche
   pour autant, puisqu'il ne s'efface jamais : un quart plus petit, et
   pose en fondu pour laisser voir le sujet a travers. */
@media (hover:none){
  .campaign-play .cp-play{opacity:.7;transform:scale(1);width:32px}
}
@media (prefers-reduced-motion:reduce){
  .campaign-play,.campaign-play .cp-play{transition:none}
}

/* Carrousel home : visuel + logo marque + avatar talent */
.project-visual .project-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.project-brand .pb-logoslot .pb-logoimg{max-width:62px;max-height:14px;width:auto;height:auto;object-fit:contain;display:block}
.project-creator .pc-ava .pc-img{width:100%;height:100%;object-fit:cover;display:block}
@media (hover:hover){
  .campaign:hover .campaign-visual .campaign-img{transform:scale(1.05)}
}

/* Animations d'entrée — la carte s'anime par parties (visuel directionnel + corps) */
.campaign.reveal{opacity:1;transform:none}
.campaign .campaign-visual{opacity:0;transform:translateX(-34px) scale(.985);
  transition:opacity .8s var(--ease),transform .6s var(--ease),box-shadow .55s var(--ease)}
.campaign .campaign-body{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease) .14s,transform .8s var(--ease) .14s}
.campaign-list .campaign:nth-child(even) .campaign-visual{transform:translateX(34px) scale(.985)}
.campaign.in .campaign-visual,
.campaign.in .campaign-body{opacity:1;transform:none}
.campaign-visual image-slot{transition:transform .9s var(--ease)}

@media (hover:hover){
  .campaign:hover .campaign-visual{transform:translateY(-5px);box-shadow:0 42px 84px -44px rgba(22,18,14,.5)}
  .campaign:hover .campaign-visual image-slot{transform:scale(1.05)}
}
@media (prefers-reduced-motion:reduce){
  .campaign .campaign-visual,.campaign .campaign-body{opacity:1 !important;transform:none !important;transition:none !important}
}

@media (max-width:780px){
  .campaign,
  .campaign.is-vertical,
  .campaign.is-horizontal{grid-template-columns:1fr;gap:18px}
  .campaign-list .campaign:nth-child(even){direction:ltr}
  .campaign.is-vertical .campaign-visual{width:min(260px,72vw);margin-inline:auto}
  .campaign-stats{gap:24px;margin-top:20px}
}

/* ============================================================
   SOCIAL PROOF — bandeau de marques défilant (home)
   ============================================================ */
.brandbar-section{padding:clamp(30px,5vh,58px) 0;overflow:hidden}
.brandbar-label{font-size:clamp(15px,1.5vw,18px);letter-spacing:.02em;color:var(--muted);margin-bottom:clamp(16px,2.2vh,24px)}
.brandbar{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.brand-track{display:flex;width:max-content;animation:brandScroll 42s linear infinite}
.brand-set{display:flex;flex:none}
.brand{
  display:inline-flex;align-items:center;white-space:nowrap;
  font-size:clamp(18px,2vw,27px);font-weight:600;letter-spacing:-0.01em;
  color:var(--text-soft);transition:color .3s var(--ease);
}
.brand:hover{color:var(--text)}
.brand-logo img{height:clamp(30px,3.4vw,42px);width:auto;display:block;border-radius:9px;opacity:.92;transition:opacity .3s var(--ease)}
.brand-logo:hover img{opacity:1}
.theme-dark .brand-inv img{filter:invert(1)}
.brand::after{
  content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--orange);opacity:.55;margin:0 clamp(34px,5.5vw,68px);
}
@keyframes brandScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  .brandbar{-webkit-mask-image:none;mask-image:none}
  .brand-track{animation:none;width:auto}
  .brand-set:nth-child(2){display:none}
  .brand-set{flex-wrap:wrap;justify-content:center;gap:14px 26px}
  .brand::after{display:none}
}

/* ============================================================
   PROJETS — carrousel collabs (page Projets — conservé)
   ============================================================ */
.pcar{--pc-dur:6500ms;display:flex;align-items:stretch;gap:clamp(8px,1.4vw,22px);margin-top:54px}
.pcar-viewport{flex:1;min-width:0;overflow:hidden;border-radius:var(--radius-lg)}

/* Carte CTA inset (façon manifeste SwipGroup) — section au fond page, contenu en carte */
.cta-card{
  position:relative;overflow:hidden;
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:clamp(20px,2.4vw,32px);
  padding:clamp(48px,6vw,92px) clamp(28px,5vw,72px);
  box-shadow:0 40px 90px -50px rgba(22,18,14,.4);
}
.cta-card::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(60vw,520px);aspect-ratio:1;border-radius:50%;
  right:-14%;top:-40%;background:radial-gradient(circle,var(--orange-tint),transparent 64%);
  filter:blur(50px);opacity:.85;
}
.pcar-track{display:flex;transition:transform .65s cubic-bezier(.16,1,.3,1);will-change:transform}
.pcar-track .project{
  flex:0 0 100%;width:100%;
  display:grid;grid-template-columns:1.12fr .88fr;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
}
.pcar-arrow{
  flex:none;align-self:center;width:clamp(46px,3.6vw,56px);height:clamp(46px,3.6vw,56px);border-radius:50%;
  border:1px solid var(--line);background:var(--surface);color:var(--text);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.pcar-arrow svg{width:20px;height:20px}
.pcar-arrow:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.pcar-arrow:active{transform:none}
.pcar-foot{
  display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px;
  padding:0 calc(clamp(46px,3.6vw,56px) + clamp(8px,1.4vw,20px));
}
.pcar-dots{display:flex;align-items:center;gap:9px}
.pcar-dot{position:relative;overflow:hidden;width:8px;height:8px;border-radius:50%;background:var(--line);border:none;padding:0;cursor:pointer}
.pcar-dot.active{background:var(--orange)}
.pcar-dot .fill{position:absolute;inset:0;transform:scaleX(0);transform-origin:left;background:var(--orange);border-radius:inherit;opacity:0}
.pcar-dot.active .fill{opacity:1;transform:scaleX(1)}
.pcar-dots.anim .pcar-dot.active .fill{transform:scaleX(0);animation:pcFill var(--pc-dur,6500ms) linear forwards}
.pcar-dots.paused .pcar-dot.active .fill{animation-play-state:paused}
@keyframes pcFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pcar-count{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.pcar-count .cur{color:var(--text);font-weight:600}
.pcar-count .sep{margin:0 6px;opacity:.5}
/* La fente n'impose plus 62 x 14 : tous les logos ayant desormais la
   meme hauteur d'encre, c'est la LARGEUR qui varie d'une marque a
   l'autre, et la pilule doit pouvoir la suivre. Elle se contente donc de
   centrer - le calibrage de va.js ramenant la boite de marge du logo sur
   son encre, c'est bien le dessin qui se retrouve au milieu. */
.project-brand .pb-logoslot{display:flex;align-items:center;justify-content:center}
.project-brand .pb-logoslot image-slot{width:62px;height:14px}

/* taille agrandie + animations cinématiques */
.pcar-track .project .project-body{padding:clamp(34px,4vw,66px)}
.pcar-track .project .project-title{font-size:clamp(28px,3.1vw,46px)}
.pcar-track .project .project-desc{font-size:clamp(15px,1.15vw,17px);max-width:42ch}
/* zoom doux du visuel sur la slide active (Ken Burns) */
.pcar.anim .pcar-track .project .project-visual image-slot{transform:scale(1.06);transition:transform 7s ease-out}
.pcar.anim .pcar-track .project.is-active .project-visual image-slot{transform:none}
/* entrée échelonnée du contenu de la slide active */
.pcar.anim .pcar-track .project.is-active .project-body > *{opacity:0;transform:translateY(18px);animation:pcRise .8s cubic-bezier(.16,1,.3,1) forwards}
.pcar.anim .pcar-track .project.is-active .project-body > *:nth-child(1){animation-delay:.12s}
.pcar.anim .pcar-track .project.is-active .project-body > *:nth-child(2){animation-delay:.20s}
.pcar.anim .pcar-track .project.is-active .project-body > *:nth-child(3){animation-delay:.28s}
.pcar.anim .pcar-track .project.is-active .project-body > *:nth-child(4){animation-delay:.36s}
.pcar.anim .pcar-track .project.is-active .project-body > *:nth-child(5){animation-delay:.44s}
@keyframes pcRise{to{opacity:1;transform:none}}
@media (max-width:860px){
  /* Titre de section + carrousel visibles ensemble : on resserre l'air autour. */
  #projets{padding-top:clamp(36px,6vh,64px)}
  .pcar{position:relative;margin-top:24px}
  .pcar-track .project{grid-template-columns:1fr}
  .pcar-viewport{flex:1 1 100%}
  .pcar-arrow{
    /* Centrées verticalement sur tout le carrousel. */
    position:absolute;top:50%;transform:translateY(-50%);z-index:6;
    width:38px;height:38px;color:#16120e;background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 6px 18px -6px rgba(0,0,0,.3);
  }
  .pcar-prev{left:10px}
  .pcar-next{right:10px}
  .pcar-foot{padding:0 4px}
  /* Carousel compact sur mobile : la slide entière tient à l'écran.
     Sélecteur plus spécifique pour battre la règle de base placée plus bas. */
  .pcar-track .project .project-visual{min-height:clamp(230px,62vw,330px)}
  /* Une affiche verticale contenue dans un cadre de 230 px ne mesurerait
     plus que 130 px de large : on donne de la hauteur a ce seul cas. */
  .pcar-track .project.is-vertical .project-visual{min-height:clamp(320px,88vw,420px)}
  .pcar-track .project .project-body{padding:20px 22px 24px}
  .pcar-track .project .project-title{font-size:clamp(22px,5.4vw,30px)}
  .pcar-track .project .project-desc{font-size:14.5px;line-height:1.55}
  .project-stats{gap:18px}
}
.project-visual{position:relative;min-height:clamp(380px,52vh,540px);overflow:hidden;background:var(--bg-2)}
.project-visual image-slot{position:absolute;inset:0;width:100%;height:100%}
/* Meme pilule que sur la page Projets, et de la meme taille. */
.project-brand{
  position:absolute;top:14px;left:14px;z-index:4;
  height:32px;max-width:62%;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 14px;border-radius:999px;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 10px 26px -14px rgba(0,0,0,.5);
}
.project-brand .pb-logo{max-height:14px;max-width:62px;height:auto;width:auto;object-fit:contain}
.project-brand .pb-name{font-size:14px;font-weight:700;letter-spacing:-0.02em;color:#16120e}
.project-body{padding:clamp(28px,3.5vw,52px);display:flex;flex-direction:column;justify-content:center}
.project-tag{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:18px}
.project-tag::before{content:"";width:18px;height:1.5px;background:var(--orange)}
.project-title{font-size:clamp(24px,2.6vw,36px);font-weight:700;letter-spacing:-0.03em;line-height:1.06}
.project-title .x{color:var(--orange);font-weight:300;margin:0 .15em}
.project-desc{margin-top:16px;color:var(--text-soft);font-size:15px;line-height:1.7;max-width:46ch}
.project-creator{display:flex;align-items:center;gap:12px;margin-top:24px}
.project-creator .pc-ava{width:42px;height:42px;border-radius:50%;overflow:hidden;background:var(--bg-2);border:2px solid var(--orange)}
.project-creator .pc-ava image-slot{width:100%;height:100%}
.project-creator .pc-name{font-size:14px;font-weight:600}
.project-creator .pc-role{font-size:12px;color:var(--muted)}
.project-stats{display:flex;justify-content:center;gap:26px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line-2)}
.project-stats > *{text-align:center}
/* KPI masqués tant que les vraies données ne sont pas branchées (Sanity).
   Le markup reste en place ; passer body[data-kpi] à "on" pour les afficher. */
body[data-kpi="off"] .project-stats{display:none}
.project-stats .n{font-size:22px;font-weight:700;letter-spacing:-0.02em;color:var(--text)}
.project-stats .n b{color:var(--orange)}
.project-stats .l{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:2px}

/* ============================================================
   ÉQUIPE
   ============================================================ */
.team{background:var(--bg-2)}

/* équipe — page d'accueil : rangées centrées (leads en haut, reste en bas) */
.team-grid{
  display:flex;flex-direction:column;align-items:center;gap:clamp(20px,2.2vw,30px);
  margin-top:clamp(40px,5vh,58px);
}
.team-row{
  display:flex;justify-content:center;flex-wrap:nowrap;gap:clamp(14px,1.6vw,26px);
  width:100%;
}
.team-row .member{flex:1 1 0;min-width:0;max-width:232px}
@media (max-width:640px){
  .team-row{flex-wrap:wrap}
  .team-row .member{flex-basis:140px;max-width:46%}
}

/* carte membre — photo portrait + nom + rôle (format original) */
.member{position:relative;transition:transform .5s var(--ease)}
.member:hover{transform:translateY(-5px)}
.member-photo{
  position:relative;width:100%;aspect-ratio:4/5;border-radius:16px;overflow:hidden;
  background:linear-gradient(160deg,var(--surface),var(--bg-2));
  box-shadow:0 16px 32px -24px rgba(22,18,14,.16),0 0 0 1px var(--line-2);margin-bottom:14px;
  transition:box-shadow .5s var(--ease);
}
/* Repos neutre → au survol, la carte se soulève et prend une ombre orangée (nuance marque) */
.member:hover .member-photo{box-shadow:0 26px 52px -18px rgba(255,86,2,.45),0 0 0 1px var(--line-2)}
.member-photo image-slot{position:absolute;inset:0;z-index:0;width:100%;height:100%}
.member-photo .ph{
  position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  font-size:clamp(34px,3.2vw,46px);font-weight:700;color:var(--orange);letter-spacing:-0.04em;
  background:linear-gradient(160deg,var(--surface),var(--bg-2));transition:opacity .4s ease;
}
.member-photo:has(image-slot[data-filled]) .ph{opacity:0;pointer-events:none}
.member-photo::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 -56px 46px -40px rgba(255,86,2,.26);opacity:0;transition:opacity .5s ease;
}
.member:hover .member-photo::after{opacity:1}
.member-photo image-slot{transition:transform .7s var(--ease)}
.member:hover .member-photo image-slot{transform:scale(1.04)}
.member-name{font-size:17px;font-weight:700;letter-spacing:-0.02em;display:flex;align-items:center;justify-content:space-between;gap:8px}
.member-icons{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
/* Les deux icones prennent la meme boite. Le lien LinkedIn etait un bloc
   haut de 25,5 px - la hauteur de ligne - dans lequel son dessin se posait
   sur la ligne de base ; le bouton du mail, lui, etait deja une enveloppe
   souple centree sur 16 px. D'ou un decalage de 2,25 px, le LinkedIn
   flottant au-dessus du mail. */
.member-li{color:var(--muted);transition:color .3s var(--ease);
  display:inline-flex;align-items:center;justify-content:center;line-height:0}
.member-li:hover{color:var(--orange)}
.member-li svg{width:16px;height:16px;display:block}
button.member-li{background:none;border:0;padding:0;cursor:pointer}
.member-role{font-size:12.5px;color:var(--text-soft);margin-top:3px;line-height:1.45}

/* animation d'entrée */
.member.reveal{opacity:0;transform:translateY(26px) scale(.97);transition:opacity .6s var(--ease),transform .7s cubic-bezier(.16,1,.3,1)}
.member.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .member.reveal{transition-duration:.3s}
}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact{position:relative;overflow:hidden}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,90px);margin-top:54px;align-items:start}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;gap:46px}}
.contact-aside h2{font-size:clamp(30px,3.6vw,50px)}
.contact-aside .section-lead{max-width:58ch}
.contact-points{margin-top:34px;display:flex;flex-direction:column;gap:18px}
.contact-point{display:flex;gap:14px;align-items:flex-start}
.contact-point .cp-ic{flex:none;width:40px;height:40px;border-radius:12px;background:var(--orange-tint);color:var(--orange);display:inline-flex;align-items:center;justify-content:center}
.contact-point .cp-ic svg{width:19px;height:19px}
.contact-point .cp-t{font-size:15px;font-weight:600}
.contact-point .cp-d{font-size:13px;color:var(--text-soft);margin-top:2px;line-height:1.5}

.form{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(26px,3vw,42px);box-shadow:var(--shadow-sm);
}
.field{margin-bottom:22px}
.field-label{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
.field-label .opt{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted)}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{
  flex:1;min-width:max-content;text-align:center;cursor:pointer;
  padding:12px 18px;border-radius:12px;border:1px solid var(--line);background:var(--bg);
  font-size:14px;font-weight:500;color:var(--text-soft);
  transition:all .28s var(--ease);
}
.seg label:hover{border-color:var(--orange)}
.seg input:checked + label{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 8px 20px -8px rgba(255,86,2,.5)}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:480px){.row-2{grid-template-columns:1fr}}
.input,.textarea{
  width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg);color:var(--text);font-family:inherit;font-size:15px;font-weight:300;
  transition:border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.input::placeholder,.textarea::placeholder{color:var(--muted)}
.input:focus,.textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px var(--orange-tint)}
.textarea{resize:vertical;min-height:120px;line-height:1.6}
.form .btn-primary{width:100%;justify-content:center;margin-top:6px}
.form-note{font-size:12px;color:var(--muted);text-align:center;margin-top:16px;line-height:1.5}
.form-success{
  display:none;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:30px 0;
}
.form-success.show{display:flex}
.form-success .ok{width:60px;height:60px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center}
.form-success .ok svg{width:28px;height:28px}
.form-success h3{font-size:22px}
.form-success p{color:var(--text-soft);font-size:14px;max-width:34ch}

/* ============================================================
   PAGE HEADER (sous-pages)
   ============================================================ */
.page-head{padding:160px var(--pad-x) 60px;position:relative;overflow:hidden}
/* glow doux orange réutilisé par les en-têtes de sous-pages */
.hero-glow{
  position:absolute;right:0%;top:40%;transform:translateY(-50%);
  width:min(50vw,640px);aspect-ratio:1;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,var(--orange-tint),transparent 85%);
  filter:blur(116px);animation:heroGlow 9s ease-in-out infinite;
}
@keyframes heroGlow{0%,100%{opacity:.6;transform:translateY(-50%) scale(1)}50%{opacity:.9;transform:translateY(-50%) scale(1.08)}}
.page-head .wrap{position:relative;z-index:2}
.page-head h1{font-size:clamp(40px,6.5vw,86px);letter-spacing:-0.04em;line-height:.98}
.page-head h1 em{font-style:normal;color:var(--orange)}
.page-head .page-lead{margin-top:20px;font-size:clamp(16px,1.4vw,19px);color:var(--text-soft);max-width:56ch;line-height:1.65}
.page-head .back{display:flex;width:max-content;white-space:nowrap;align-items:center;gap:8px;font-size:13px;color:var(--text-soft);margin-bottom:28px;transition:color .3s var(--ease)}
.page-head .back:hover{color:var(--orange)}
.page-head .back svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.page-head .back:hover svg{transform:translateX(-3px)}

/* ---- Bannière sous-pages : décor de droite (2 options comparables) ---- */
.page-head{position:relative;overflow:hidden}
/* OPTION A — aurora orange dérivante (cohérente avec l'accueil) */
.head-aurora{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;display:none}
.head-aurora span{
  position:absolute;border-radius:50%;filter:blur(130px);
  background:radial-gradient(circle,rgba(255,86,2,.28) 0%,rgba(255,86,2,.12) 40%,transparent 84%);
  mix-blend-mode:multiply;opacity:.7;
}
.head-aurora span:nth-child(1){width:40vw;height:40vw;right:-6%;top:-26%;animation:auroraDrift 28s ease-in-out infinite}
.head-aurora span:nth-child(2){width:30vw;height:30vw;right:6%;bottom:-34%;animation:auroraDrift 34s ease-in-out infinite reverse}
.head-aurora span:nth-child(3){width:22vw;height:22vw;right:26%;top:18%;animation:auroraDrift 40s ease-in-out infinite}
.theme-dark .head-aurora span{mix-blend-mode:screen;opacity:.44;background:radial-gradient(circle,rgba(255,86,2,.4) 0%,rgba(255,86,2,.18) 42%,transparent 86%)}
.head-aurora{display:block}

/* filters bar (talents page) */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.filters button{
  padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:transparent;
  font-size:13px;font-weight:500;color:var(--text-soft);transition:all .28s var(--ease);
}
.filters button:hover{border-color:var(--orange);color:var(--text)}
.filters button.active{background:var(--orange);border-color:var(--orange);color:#fff}

/* ============================================================
   HERO — REFONTE
   Le gros logo est retire : il n'existait sur aucune autre page
   et c'est lui qui desequilibrait la composition. La hero passe
   en une colonne centree, et la fleche de l'agence occupe
   l'espace en tracant des boucles.
   ============================================================ */
.hero-grid{grid-template-columns:minmax(0,1fr)}
/* 940 px : en dessous, « Construire des carrieres. » cassait apres « des ». */
.hero-inner{max-width:940px;margin-inline:auto;text-align:center}
.hero h1{font-size:clamp(38px,5vw,74px)}
.hero-sub{margin-inline:auto;max-width:52ch}
.hero-cta{justify-content:center}
.hero-meta{margin-inline:auto}

/* Pastilles a point : l'information en un coup d'oeil. */
.hero-pills{
  list-style:none;margin:clamp(18px,2.4vh,26px) auto 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:9px;
  max-width:880px;
}
.hero-pills li{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 15px 7px 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);
  font-size:12.5px;font-weight:500;color:var(--text-soft);
  white-space:nowrap;
}
.hero-pills i{
  width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none;
}

/* ============================================================
   HERO — TRAME REVELEE PAR LES HALOS
   ============================================================ */
.va-mesh{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 84%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 84%,transparent 100%)}
.vm-orb{
  position:absolute;border-radius:50%;
  background-image:
    linear-gradient(var(--vml) 1px, transparent 1px),
    linear-gradient(90deg, var(--vml) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, var(--mc) 0%, transparent 68%);
  background-size:var(--mg,52px) var(--mg,52px), var(--mg,52px) var(--mg,52px), 100% 100%;
/* background-attachment:fixed ancrait la trame a l'ecran : le halo
   derivait par-dessus, et ce decalage donnait l'impression de reveler un
   quadrillage deja la. Tres joli, et tres cher. Un fond ancre au viewport
   ne peut pas etre mis en cache dans une couche composee : le navigateur
   doit le repeindre a CHAQUE image de defilement, ici sur sept halos
   masques et animes. Chrome encaisse, Safari non - c'est ce qui hachait
   le defilement signale.
   La trame suit donc le halo. Le scale disparait de la derive au passage :
   a l'echelle 1 le calque est peint une fois pour toutes et la carte
   graphique se contente de le deplacer, et les lignes ne respirent plus.
   Reste la derive, qui etait l'essentiel. */
  background-attachment:scroll;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,.62) 42%, transparent 71%);
  mask-image:radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,.62) 42%, transparent 71%);
  opacity:var(--mo,.5);
  animation:vmDrift var(--md,48s) ease-in-out infinite alternate;
  animation-delay:var(--mdl,0s);
}
:root{--vml:rgba(255,255,255,.11)}
.theme-light{--vml:rgba(16,11,9,.09)}
@keyframes vmDrift{
  0%  {transform:translate3d(0,0,0)}
  50% {transform:translate3d(var(--mdx,4%),var(--mdy,-3%),0)}
  100%{transform:translate3d(calc(var(--mdx,4%) * -0.7),var(--mdy,-3%),0)}
}
@media (max-width:760px){
  .vm-orb{background-image:radial-gradient(circle at 50% 50%, var(--mc) 0%, transparent 68%);
    background-attachment:scroll;animation:none}
}
@media (prefers-reduced-motion:reduce){.vm-orb{animation:none}}

/* ============================================================
   HERO — LE SWIPE
   L'icone de l'agence EST une fleche : elle devient le motif de
   la page. Le trace est regenere a chaque passage (voir va.js).
   ============================================================ */
.va-swipe{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.vs-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vs-trail{
  stroke:var(--orange);stroke-width:2.4;opacity:0;
  stroke-dasharray:var(--vs-trail,150px) var(--vs-len,2000px);
}
.vs-arrow{
  position:absolute;left:0;top:0;width:24px;height:24px;
  display:block;color:var(--orange);opacity:0;
  offset-path:var(--vs-d,none);offset-rotate:auto;offset-anchor:50% 50%;
}
.vs-arrow svg{width:100%;height:100%;display:block;
  filter:drop-shadow(0 2px 10px rgba(255,86,2,.4))}
.va-swipe.go .vs-arrow{
  animation:vsMove var(--vs-dur,5s) var(--vs-ease,linear) forwards,
            vsArrowFade var(--vs-dur,5s) linear forwards;
}
.va-swipe.go .vs-trail{
  animation:vsDraw var(--vs-dur,5s) var(--vs-ease,linear) forwards,
            vsTrailFade var(--vs-dur,5s) linear forwards;
}
@keyframes vsMove{from{offset-distance:0%} to{offset-distance:100%}}
@keyframes vsDraw{
  from{stroke-dashoffset:var(--vs-trail,150px)}
  to  {stroke-dashoffset:calc(var(--vs-trail,150px) - var(--vs-len,2000px))}
}
@keyframes vsArrowFade{0%{opacity:0} 7%{opacity:.7} 82%{opacity:.7} 100%{opacity:0}}
@keyframes vsTrailFade{0%{opacity:0} 9%{opacity:.26} 78%{opacity:.26} 100%{opacity:0}}
.theme-light .vs-trail{stroke-width:2.2}
@media (max-width:860px){.va-swipe{display:none}}
@media (prefers-reduced-motion:reduce){.va-swipe{display:none}}

/* Une colonne : les reglages mobile de l'ancien visuel n'ont plus d'objet. */
@media (max-width:860px){
  .hero-inner{order:0}
  .hero-pills{gap:7px}
  .hero-pills li{font-size:11.5px;padding:6px 12px 6px 10px}
}

/* Les deux boutons d'appel sont retires de la hero : ils prenaient
   beaucoup de place pour deux actions deja presentes dans la barre.
   Du coup on resserre la hauteur et on laisse le bandeau marques
   affleurer en bas d'ecran — il devient la signature de la hero. */
.hero{
  min-height:calc(100svh - 170px);
  padding-top:clamp(96px,12vh,124px);
  padding-bottom:clamp(12px,2vh,24px);
}
.hero-meta{margin-top:clamp(24px,3.2vh,42px)}
.brandbar-section{padding:clamp(18px,3vh,34px) 0 clamp(30px,5vh,58px)}
@media (max-width:860px){
  .hero{min-height:auto;padding-bottom:28px}
  .brandbar-section{padding-top:clamp(14px,2.4vh,24px)}
}

/* ============================================================
   TALENTS — LA PILE QUI SE DEFAIT
   Une carte au centre, droite. Au defilement elle part a gauche
   en pivotant ; la suivante arrive par la droite avec la meme
   inclinaison et se redresse en arrivant au centre.
   IMPORTANT : #talentsGrid est rempli par VA.renderTalents depuis
   Sanity. On ne touche ni a l'id, ni aux classes des cartes —
   uniquement a leur positionnement.
   ============================================================ */
.tstack-space{position:relative;margin-top:clamp(34px,5vh,56px)}
.tstack-pin{
  position:sticky;top:0;height:100svh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
/* La grille devient une scene : les cartes se superposent au centre. */
.talents-grid.tstack{
  display:block;position:relative;
  width:min(360px,84vw);height:min(560px,68svh);
  margin:0;
}
.talents-grid.tstack .talent-card{
  position:absolute;inset:0;margin:0;
  /* --tx, --trot, --tsc et --top sont poses par va.js a chaque image */
  transform:translate3d(var(--tx,0px),0,0) rotate(var(--trot,0deg)) scale(var(--tsc,1));
  opacity:var(--top,1);
  z-index:var(--tz,1);
  will-change:transform,opacity;
  /* la carte ne doit pas conserver l'animation d'arrivee generique */
  animation:none;
}
/* .reveal est pose par data.js sur chaque carte : dans la pile, c'est le
   defilement qui pilote l'apparition, pas l'observateur. */
.talents-grid.tstack .talent-card.reveal{opacity:var(--top,1);transform:translate3d(var(--tx,0px),0,0) rotate(var(--trot,0deg)) scale(var(--tsc,1))}

/* Le bouton ne se decouvre qu'une fois la derniere carte passee. */
.tstack-foot{
  position:absolute;left:50%;bottom:clamp(26px,6svh,64px);
  transform:translateX(-50%) translateY(14px);
  opacity:0;pointer-events:none;
  transition:opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.tstack-space.is-done .tstack-foot{opacity:1;transform:translateX(-50%);pointer-events:auto}

/* Reperes de progression : une pastille par talent. */
.tstack-progress{
  position:absolute;left:50%;translate:-50% 0;
  top:clamp(18px,4svh,44px);
  display:flex;gap:7px;
}
.tstack-progress i{
  width:6px;height:6px;border-radius:50%;
  background:var(--line);transition:background .35s ease, width .35s ease;
}
.tstack-progress i.on{width:20px;border-radius:99px;background:var(--orange)}

@media (max-width:860px){
  .talents-grid.tstack{width:min(320px,86vw);height:min(500px,64svh)}
}
/* Sans defilement pilote, on revient a une grille lisible. */
@media (prefers-reduced-motion:reduce){
  .tstack-space{height:auto!important}
  .tstack-pin{position:static;height:auto;display:block}
  .talents-grid.tstack{display:grid;width:auto;height:auto;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
  .talents-grid.tstack .talent-card{position:static;transform:none;opacity:1}
  .tstack-foot{position:static;transform:none;opacity:1;pointer-events:auto;margin-top:32px;text-align:center}
  .tstack-progress{display:none}
}

/* ============================================================
   BOUTONS — le langage de survol du reste du site
   Le remplissage « swipe » de gauche a droite pour les boutons
   pleins ; pour les pilules see-more, le cercle de la fleche
   gonfle jusqu'a remplir la pilule et la fleche finit a droite.
   Repris de vp.css pour que l'agence suive la meme DA.
   ============================================================ */
.btn-primary{position:relative;isolation:isolate;overflow:hidden}
.btn-primary::before{
  content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;
  background:var(--orange-2,#d94400);transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.btn-primary:hover::before,.btn-primary:focus-visible::before{transform:scaleX(1)}
.btn-primary:hover svg,.btn-primary:focus-visible svg{transform:translateX(4px)}
.btn-primary svg{transition:transform .35s cubic-bezier(.22,1,.36,1)}

.see-more{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;min-height:50px;
  padding:6px 26px 6px 56px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);
  font-size:14px;font-weight:500;color:var(--text);white-space:nowrap;
  transition:border-color .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1),
             color .35s cubic-bezier(.22,1,.36,1), padding .55s cubic-bezier(.22,1,.36,1);
}
.see-more::before{
  content:"";position:absolute;left:6px;top:50%;width:38px;aspect-ratio:1;
  border-radius:50%;background:var(--orange);z-index:-1;
  transform:translateY(-50%);transform-origin:center;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.see-more .bullet{
  position:absolute;left:6px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;background:transparent;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  transition:left .55s cubic-bezier(.22,1,.36,1);
}
.see-more .bullet svg{width:16px;height:16px}
.see-more:hover,.see-more:focus-visible{
  border-color:var(--orange);color:#fff;transform:translateY(-2px);
  padding-left:26px;padding-right:56px;
}
.see-more:hover::before,.see-more:focus-visible::before{transform:translateY(-50%) scale(16)}
.see-more:hover .bullet,.see-more:focus-visible .bullet{left:calc(100% - 44px)}
@media (prefers-reduced-motion:reduce){
  .btn-primary::before,.see-more,.see-more::before,.see-more .bullet{transition:none}
}

/* ============================================================
   PILE DE TALENTS — reglages
   ============================================================ */
/* Plus de survol colore : dans la pile, la carte du centre est deja
   mise en avant par sa position. Le halo orange parasitait la lecture. */
.talents-grid.tstack .talent-card:hover{transform:translate3d(var(--tx,0px),0,0) rotate(var(--trot,0deg)) scale(var(--tsc,1));box-shadow:none;border-color:var(--line)}
.talents-grid.tstack .talent-card:hover .talent-photo::after{opacity:0}
.talents-grid.tstack .talent-card:hover .talent-photo .ph,
.talents-grid.tstack .talent-card:hover .talent-photo .talent-img{transform:none}

/* Le flou accompagne la disparition : sans lui, la carte gardait une
   silhouette nette jusqu'au bout et on voyait la decoupe. */
.talents-grid.tstack .talent-card{filter:blur(var(--tbl,0px))}

/* Recentrage vertical de la hero : le bloc etait pose trop haut.
   Le bandeau marques garde sa position, il sert de socle. */
.hero{padding-top:clamp(72px,9vh,96px);padding-bottom:clamp(30px,5vh,58px)}

/* Le bloc de texte de la hero etait remonte trop haut : on redescend. */
.hero{padding-top:clamp(104px,13vh,140px);padding-bottom:clamp(20px,3.4vh,40px)}

/* ============================================================
   TALENTS — texte a gauche, pile a droite
   Le titre et le chapo restent lisibles pendant tout le
   parcours : avant, ils sortaient de l'ecran des la premiere
   carte et la section perdait son intitule.
   ============================================================ */
.tstack-layout{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  align-items:center;gap:clamp(28px,5vw,80px);
  width:100%;
}
.tstack-intro{max-width:44ch}
.tstack-intro .section-lead{margin-top:16px}
.tstack-scene{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:min(560px,68svh);
}
/* la scene reprend la place que la grille occupait */
.talents-grid.tstack{width:min(340px,80%);height:min(540px,66svh)}

/* Les reperes et le bouton passent dans la colonne de gauche. */
.tstack-progress{
  position:static;translate:none;margin-top:clamp(20px,3vh,32px);
  justify-content:flex-start;
}
.tstack-foot{
  position:static;transform:translateY(10px);
  margin-top:clamp(18px,2.6vh,28px);
}
.tstack-space.is-done .tstack-foot{transform:none}

@media (max-width:980px){
  .tstack-layout{grid-template-columns:1fr;gap:clamp(18px,3vh,30px);
    align-content:center;text-align:center}
  .tstack-intro{max-width:none;margin-inline:auto}
  .tstack-progress{justify-content:center}
  .tstack-foot{display:flex;justify-content:center}
  .talents-grid.tstack{width:min(300px,80vw);height:min(440px,52svh)}
}
@media (prefers-reduced-motion:reduce){
  .tstack-layout{grid-template-columns:1fr}
  .tstack-scene{min-height:0;display:block}
}

/* Le bandeau marques descend un peu et le bloc de texte suit :
   l'ensemble se repartit plus egalement sur la hauteur du premier ecran. */
.hero{padding-top:clamp(116px,15vh,158px);padding-bottom:clamp(28px,4.6vh,58px)}
.brandbar-section{padding:clamp(26px,4.4vh,52px) 0 clamp(30px,5vh,58px)}

/* ============================================================
   TALENTS — la pile se defeuille (remplace le glissement lateral)
   La carte du dessus descend et sort par le bas ; on decouvre
   celle d'en dessous. Le mouvement est vertical, donc la colonne
   de texte peut respirer sur toute sa largeur.
   ============================================================ */
.talents-grid.tstack .talent-card{
  transform:translate3d(0,var(--ty,0),0) rotate(var(--trot,0deg)) scale(var(--tsc,1));
  transform-origin:50% 60%;
}
.talents-grid.tstack .talent-card.reveal{
  transform:translate3d(0,var(--ty,0),0) rotate(var(--trot,0deg)) scale(var(--tsc,1));
}
.talents-grid.tstack .talent-card:hover{
  transform:translate3d(0,var(--ty,0),0) rotate(var(--trot,0deg)) scale(var(--tsc,1));
}
/* La scene deborde vers le bas : la carte doit pouvoir sortir de l'ecran. */
.tstack-scene{overflow:visible}
.tstack-pin{overflow:hidden}

/* Le texte prend plus de place, le titre tient sur deux lignes. */
.tstack-layout{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
.tstack-intro{max-width:none}
.tstack-intro .section-title{max-width:15ch}

/* Le bouton est la des le depart : il ne se merite plus. */
.tstack-foot{position:static;transform:none;opacity:1;pointer-events:auto}
.tstack-space.is-done .tstack-foot{transform:none}

/* Les reperes de progression sont retires : entre le chapo et le bouton,
   ils alourdissaient la colonne sans rien apporter. */
.tstack-progress{display:none}

/* L'ensemble de la section descend : il frolait la barre de navigation. */
.tstack-pin{padding-top:clamp(64px,9vh,110px);align-items:flex-start}
.tstack-layout{align-items:center;min-height:calc(100svh - clamp(64px,9vh,110px))}
@media (max-width:980px){
  .tstack-pin{padding-top:clamp(56px,8vh,88px)}
}

/* va.css:147 pose `.see-more:hover .bullet{transform:translateX(4px)}` —
   heritage de l'ancien bouton. Cette regle REMPLACE le translateY(-50%)
   qui centrait la pastille, d'ou la fleche qui tombait de 19 px au
   survol. On reecrit le transform complet, en gardant le centrage. */
.see-more:hover .bullet,
.see-more:focus-visible .bullet{
  left:calc(100% - 44px);
  transform:translateY(-50%);
}

/* ============================================================
   PROJETS — glissement lateral pilote au defilement
   Les fleches, les points et le compteur ne servent plus : le
   defilement fait le travail. Ils restent dans le DOM, masques,
   pour qu'un retour au carrousel manuel reste possible.
   ============================================================ */
.pcar-arrow,.pcar-foot{display:none}

.pslide-space{position:relative;margin-top:clamp(30px,4.5vh,52px)}
.pslide-pin{
  position:sticky;top:0;height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding-top:clamp(56px,8vh,96px);
  overflow:hidden;
}
.pslide-pin .pcar{width:100%;max-width:1040px;margin:0}

/* Fond detache, comme la feuille du process sur Studio. */
#projets{
  position:relative;z-index:2;
  border-radius:clamp(26px,3.4vw,44px) clamp(26px,3.4vw,44px) 0 0;
  margin-top:calc(-1 * clamp(26px,3.4vw,44px));
  box-shadow:0 -24px 56px -48px rgba(0,0,0,.75);
}
#projets .va-mesh{z-index:0}

@media (max-width:980px){
}
@media (prefers-reduced-motion:reduce){
  .pslide-space{height:auto!important}
  .pslide-pin{position:static;height:auto;display:block;overflow:visible}
}

/* ============================================================
   PROJETS — titre et bouton dans la zone epinglee
   Le chapo est retire : le titre suffit a porter la section et
   laisse la place aux cartes.
   ============================================================ */
.pslide-pin{
  flex-direction:column;justify-content:center;
  gap:clamp(14px,2.4vh,26px);
  padding-top:clamp(78px,10vh,120px);
  padding-bottom:clamp(18px,3vh,34px);
}
.pslide-title{margin:0;text-align:center;max-width:22ch}
.pslide-foot{display:flex;justify-content:center}

/* Bouton compact : il accompagne, il ne domine pas. */
.see-more-sm{
  min-height:42px;padding:5px 20px 5px 46px;font-size:13px;
}
.see-more-sm::before{left:5px;width:32px}
.see-more-sm .bullet{left:5px;width:32px;height:32px}
.see-more-sm .bullet svg{width:14px;height:14px}
.see-more-sm:hover,.see-more-sm:focus-visible{padding-left:20px;padding-right:46px}
.see-more-sm:hover .bullet,.see-more-sm:focus-visible .bullet{left:calc(100% - 37px)}

/* Cartes plus compactes : elles etaient genereuses en vide. */
.pslide-pin .pcar{max-width:920px}
.pslide-pin .project-body{padding:clamp(16px,2vw,26px)}
.pslide-pin .project-title{font-size:clamp(19px,2.1vw,28px)}
.pslide-pin .project-desc{font-size:14px;line-height:1.55}

@media (max-width:980px){
  .pslide-pin{padding-top:clamp(66px,9vh,96px)}
}

/* Titre des projets un peu plus petit, et de l'air avant les cartes :
   il collait a la scene et la section paraissait tassee. */
.pslide-title{font-size:clamp(24px,2.9vw,42px);line-height:1.14}
.pslide-pin{gap:clamp(28px,4.4vh,56px)}

/* ============================================================
   EQUIPE — quinconce
   La rangee etait parfaitement alignee, donc rigide. Chaque
   membre se pose a sa hauteur, comme sur la page groupe.
   #teamGrid est rempli par VA.renderTeam depuis Sanity : on ne
   touche qu'au positionnement des .member.
   ============================================================ */
.team-row{align-items:flex-start;padding-bottom:clamp(30px,5vh,64px)}
.team-row .member{
  transform:translateY(var(--my,0)) scale(var(--ms,1));
  transform-origin:top center;
}
.team-row .member:nth-child(1){--my:0px;  --ms:1}
.team-row .member:nth-child(2){--my:44px; --ms:.95}
.team-row .member:nth-child(3){--my:16px; --ms:.98}
.team-row .member:nth-child(4){--my:58px; --ms:.93}
.team-row .member:nth-child(5){--my:28px; --ms:.96}
.team-row .member:nth-child(6){--my:66px; --ms:.92}
/* Au survol, le membre se detache du groupe. */
.team-row .member:hover{transform:translateY(calc(var(--my,0) - 10px)) scale(var(--ms,1))}
/* L'arrivee garde le decalage, sinon .reveal remettrait tout a plat. */
.team-row .member.reveal{opacity:0;transform:translateY(calc(var(--my,0) + 26px)) scale(var(--ms,1))}
.team-row .member.reveal.in{opacity:1;transform:translateY(var(--my,0)) scale(var(--ms,1))}
.team-row .member.reveal.in:hover{transform:translateY(calc(var(--my,0) - 10px)) scale(var(--ms,1))}

@media (max-width:900px){
  .team-row{flex-wrap:wrap}
  .team-row .member:nth-child(n){--my:0px;--ms:1}
  .team-row .member:nth-child(even){--my:26px}
}
@media (max-width:560px){
  .team-row .member:nth-child(n){--my:0px!important;--ms:1!important}
}
@media (prefers-reduced-motion:reduce){
  .team-row .member{transition:none}
}

/* Quinconce a DEUX niveaux seulement : la rangee reste lisible
   comme une rangee, elle est juste decalee. */
.team-row .member:nth-child(odd) {--my:0px; --ms:1}
.team-row .member:nth-child(even){--my:46px;--ms:.96}
@media (max-width:560px){
  .team-row .member:nth-child(n){--my:0px!important;--ms:1!important}
}

/* ============================================================
   CONTACT — la pop-up
   ============================================================ */
.contact-grid{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.contact-aside{max-width:640px}
.contact-points{justify-content:center}
.vam-open{margin-top:clamp(22px,3.4vh,38px)}

body.vam-lock{overflow:hidden}
.va-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,3vw,40px)}
.va-modal[hidden]{display:none}
.vam-backdrop{
  position:absolute;inset:0;background:rgba(8,6,4,.68);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transition:opacity .3s ease;
}
.va-modal.is-open .vam-backdrop{opacity:1}
.vam-panel{
  position:relative;z-index:1;
  width:min(680px,100%);max-height:min(88svh,900px);overflow:auto;
  background:var(--surface);border:1px solid var(--line);
  border-radius:clamp(18px,2.2vw,28px);
  padding:clamp(24px,3.4vw,42px);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
  opacity:0;transform:translateY(18px) scale(.98);
  transition:opacity .34s cubic-bezier(.22,1,.36,1), transform .42s cubic-bezier(.22,1,.36,1);
}
.va-modal.is-open .vam-panel{opacity:1;transform:none}
.vam-close{
  position:absolute;top:14px;right:14px;
  width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;
  transition:border-color .3s ease, color .3s ease, transform .3s ease;
}
.vam-close:hover{border-color:var(--orange);color:var(--orange);transform:rotate(90deg)}
.vam-close svg{width:16px;height:16px}
.vam-head{margin-bottom:clamp(18px,2.4vw,26px);padding-right:40px}
.vam-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--orange);
}
.vam-kicker i{width:6px;height:6px;border-radius:50%;background:var(--orange)}
.vam-head h3{margin:10px 0 0;font-size:clamp(21px,2.4vw,30px);line-height:1.18;letter-spacing:-0.02em}
/* Dans la pop-up, le formulaire n'a plus besoin de sa carte : le panneau
   la remplace. */
.va-modal .form{background:transparent;border:0;padding:0;box-shadow:none;opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .vam-backdrop,.vam-panel{transition:none}
}

/* ============================================================
   CONTACT — rappel de la hero, en plus leger
   ============================================================ */
#contact{position:relative;overflow:hidden}
.va-mesh-soft{opacity:.62}
#contact .va-swipe{z-index:1}
/* Trace plus fin et plus discret que dans la hero : ici c'est une
   signature, pas le sujet. */
#contact .vs-trail{stroke-width:1.9}
#contact .vs-arrow{width:19px;height:19px}

/* Les deux informations passent cote a cote, en petit. */
.contact-points{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px;margin-top:clamp(20px,2.8vh,30px);
}
.contact-point{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 16px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);
  text-align:left;
}
.contact-point .cp-ic{
  width:26px;height:26px;flex:none;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:var(--orange);
}
.contact-point .cp-ic svg{width:14px;height:14px}
.contact-point .cp-t{font-size:13px;font-weight:600;line-height:1.2}
/* Le detail passait a la ligne et doublait la hauteur : il devient une
   info secondaire sur la meme ligne. */
.contact-point .cp-d{display:none}

/* Bouton d'ouverture en taille normale : il etait demesure. */
.vam-open.btn-lg{
  padding:12px 24px;font-size:14px;min-height:0;
}
.vam-open.btn-lg svg{width:16px;height:16px}

/* Equipe : le decalage etait trop marque. */
.team-row .member:nth-child(even){--my:26px;--ms:.975}

/* Les pastilles et le bouton s'etiraient sur toute la largeur de l'aside :
   ils heritaient de l'etirement du conteneur. On les remet a leur contenu. */
.contact-aside{display:flex;flex-direction:column;align-items:center}
.contact-aside .section-title,
.contact-aside .section-lead{width:100%}
.contact-points{width:auto;max-width:100%}
.contact-point{flex:0 0 auto;width:auto}
.vam-open.btn-lg{align-self:center;width:auto;flex:0 0 auto;display:inline-flex}

/* .contact-aside est une colonne flex centree : ses enfants se retrecissent
   a leur contenu, donc la rangee de pastilles se repliait. On lui rend
   toute la largeur pour qu'elles tiennent cote a cote. */
.contact-points{align-self:stretch;width:100%}

/* va-components.css:526 pose flex-direction:column sur .contact-points.
   Ma regle plus bas repassait en flex sans reinitialiser la direction :
   les pastilles restaient donc empilees. */
.contact-points{flex-direction:row}

/* ============================================================
   PROJETS — retour au glissement horizontal
   La piste redevient une rangee et se translate ; les cartes ne
   sont plus empilees en absolu. Le fond biseaute est retire.
   ============================================================ */
.pslide-pin .pcar-track{
  display:flex;position:static;height:auto;
  /* Les cartes se touchaient presque pendant le defilement. L'ecart est lu
     par va.js, qui mesure le pas reel (largeur de carte + column-gap) avant
     de translater la piste : on peut donc l'ouvrir sans desynchroniser
     quoi que ce soit. */
  gap:clamp(28px,3.4vw,64px);
  transform:translate3d(0,0,0);          /* pose par va.js */
  transition:transform .45s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.pslide-pin .pcar-track .project{
  position:static;inset:auto;
  flex:0 0 100%;width:100%;
  transform:none;opacity:1;filter:none;z-index:auto;
}
.pslide-pin .pcar-viewport{overflow:hidden}

/* Plus de feuille arrondie : elle ne s'accordait pas au reste. */
#projets{border-radius:0;margin-top:0;box-shadow:none;z-index:auto}

/* Texte et bouton un peu plus grands ; hauteur de carte reduite,
   largeur inchangee. */
.pslide-title{font-size:clamp(27px,3.2vw,46px)}
.pslide-pin .pcar{max-width:1040px}
.pslide-pin .pcar-track .project .project-body{padding:clamp(22px,2.6vw,38px)}
.pslide-pin .pcar-track .project .project-title{font-size:clamp(22px,2.5vw,34px)}
.pslide-pin .pcar-track .project .project-desc{font-size:15px;line-height:1.55;max-width:44ch}
.pslide-pin .pcar-track .project .project-visual{max-height:min(430px,50svh)}
.pslide-pin .pcar-track .project{align-items:center}
.see-more-sm{min-height:46px;padding:6px 22px 6px 50px;font-size:13.5px}
.see-more-sm::before{left:6px;width:34px}
.see-more-sm .bullet{left:6px;width:34px;height:34px}
.see-more-sm:hover,.see-more-sm:focus-visible{padding-left:22px;padding-right:50px}
.see-more-sm:hover .bullet,.see-more-sm:focus-visible .bullet{left:calc(100% - 40px)}

/* Le quadrillage du formulaire etait trop discret. */
.va-mesh-soft{opacity:1}
#contact .vm-orb{--mo:.85}
/* trame plus contrastee que dans la hero : la section est plus vide */
#contact{--vml:rgba(255,255,255,.16)}
.theme-light #contact{--vml:rgba(16,11,9,.13)}

@media (prefers-reduced-motion:reduce){
  .pslide-pin .pcar-track{transform:none!important;display:grid;gap:26px}
  .pslide-pin .pcar-track .project{flex:none;width:auto}
}

/* .pslide-pin est une colonne flex : ses enfants se retrecissent a leur
   contenu. Le carrousel s'effondrait donc a quelques pixels et sa piste
   debordait de l'ecran. On lui rend toute la largeur. */
.pslide-pin .pcar{width:100%;align-self:stretch}
.pslide-pin .pcar-viewport{width:100%;min-width:0}
.pslide-title,.pslide-foot{align-self:center}
/* Filet : la scene ne doit jamais elargir la page. */
.pslide-space,.pslide-pin{max-width:100%;overflow-x:clip}

/* Le carrousel etait cale a gauche dans un pin plus large que lui :
   152 px a gauche contre 248 a droite. On le recentre. */
.pslide-pin .pcar{margin-inline:auto}

/* ============================================================
   QUADRILLAGE — plus lisible, surtout en theme clair
   Les traits etaient trop pales pour se voir, et les halos qui
   les revelent trop discrets.
   ============================================================ */
:root{--vml:rgba(255,255,255,.17)}
.theme-light{--vml:rgba(16,11,9,.14)}
#contact{--vml:rgba(255,255,255,.2)}
.theme-light #contact{--vml:rgba(16,11,9,.17)}
.hero .vm-orb{--mo:.8}
#projets .vm-orb{--mo:.7}
#contact .vm-orb{--mo:.9}

/* ============================================================
   SECTION DE FIN — fondue avec la section d'avant et le footer
   ============================================================ */
#contact{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 9%, #000 90%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 9%, #000 90%, transparent 100%);
}
/* Le masque emporterait aussi le contenu : on le limite aux couches
   de fond, et on fond les bords de la section avec deux degrades. */
#contact{-webkit-mask-image:none;mask-image:none;position:relative}
#contact .va-mesh,#contact .va-swipe{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 14%, #000 84%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 14%, #000 84%, transparent 100%);
}
#contact::before,#contact::after{
  content:"";position:absolute;left:0;right:0;height:clamp(80px,11vh,150px);
  z-index:1;pointer-events:none;
}
#contact::before{top:0;   background:linear-gradient(to bottom, var(--bg) 0%, rgba(0,0,0,0) 100%)}
#contact::after {bottom:0;background:linear-gradient(to top,    var(--bg) 0%, rgba(0,0,0,0) 100%)}

/* La regle `.tstack-layout{grid-template-columns:1.06fr .94fr}` ajoutee
   plus haut ecrasait la bascule mobile : la carte de talent tombait a
   146 px de large. On repose la colonne unique en fin de feuille. */
@media (max-width:980px){
  .tstack-layout{grid-template-columns:1fr!important}
  .talents-grid.tstack{width:min(300px,80vw);height:min(440px,52svh)}
}

/* Le fondu de la section de fin s'effacait vers --bg, c'est-a-dire vers
   SA PROPRE couleur : il ne masquait donc rien. Les voisines (#equipe et
   le footer) sont en --bg-2. C'est vers cette teinte qu'il faut fondre. */
#contact::before{background:linear-gradient(to bottom, var(--bg-2) 0%, rgba(0,0,0,0) 100%)}
#contact::after {background:linear-gradient(to top,    var(--bg-2) 0%, rgba(0,0,0,0) 100%)}
#contact::before,#contact::after{height:clamp(110px,15vh,200px)}

/* De l'air entre les cartes de projet : elles se touchaient. Le pas de
   defilement est calcule en pixels par va.js, il tient compte de l'ecart. */
.pslide-pin .pcar-track{gap:clamp(16px,2.2vw,34px)}

/* ============================================================
   SOUS-PAGES — entetes centrees
   Talents, Projets et Equipe demarraient sur un bloc aligne a
   gauche : la page paraissait commencer de travers.
   ============================================================ */
.page-head .wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.page-head h1{max-width:20ch}
.page-head .page-lead{margin-inline:auto;max-width:58ch}
.page-head .back{align-self:center}
.filters{justify-content:center}

/* Le fond de l'entete se fond dans le reste de la page : la limite se
   voyait nettement en bas de section. */
.page-head{position:relative}
.page-head::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:clamp(90px,13vh,180px);z-index:1;pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--bg) 100%);
}
.page-head .wrap{position:relative;z-index:2}

/* ============================================================
   TALENTS — quatre par rangee, arrivee en cascade
   ============================================================ */
.talents-grid{grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1180px){.talents-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.talents-grid{grid-template-columns:repeat(2,1fr)}}

/* Apparition en cascade, comme le catalogue du Studio : chaque carte
   monte et se defloute, decalee de sa voisine. */
/* :not(.tstack) est indispensable : sur la page agence, #talentsGrid porte
   AUSSI la classe .talents-grid, et cette regle ecrasait le positionnement
   de la pile pilotee au defilement — l'animation ne marchait plus.
   Le geste est celui du catalogue Studio : montee, leger depassement,
   puis pose. Meme courbe, meme cadence de 100 ms. */
.talents-grid:not(.tstack) .talent-card{opacity:0}
.talents-grid:not(.tstack) .talent-card.card-instant{opacity:1}
.talents-grid:not(.tstack) .talent-card.card-in{
  opacity:1;
  animation:vaCardIn .7s cubic-bezier(.22,.85,.32,1.12) backwards;
  animation-delay:calc(var(--ci,0) * 100ms);
}
@keyframes vaCardIn{
  from{opacity:0;transform:translateY(34px) scale(.95)}
  80% {transform:translateY(-3px) scale(1.004)}
  to  {opacity:1;transform:none}
}
/* --ci est pose par va.js, apres tri en ordre de lecture. */
@media (prefers-reduced-motion:reduce){
  .talents-grid:not(.tstack) .talent-card{opacity:1}
  .talents-grid:not(.tstack) .talent-card.card-in{animation:none}
}

/* ============================================================
   CARTE D'APPEL DE BAS DE PAGE
   Fond profond aux couleurs de l'agence, trame legere par-dessus.
   ============================================================ */
.cta-card{
  background:
    linear-gradient(150deg, var(--orange) 0%, #d94400 52%, #a83400 100%);
  border-color:transparent;
  color:#fff;
}
.cta-card::before{
  /* la trame remplace le halo flou : plus lisible, plus structure */
  content:"";position:absolute;inset:0;right:auto;top:auto;
  width:100%;height:100%;border-radius:inherit;filter:none;opacity:1;
  background-image:
    linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 76% 78% at 50% 46%, #000 0%, rgba(0,0,0,.45) 58%, transparent 88%);
  mask-image:radial-gradient(ellipse 76% 78% at 50% 46%, #000 0%, rgba(0,0,0,.45) 58%, transparent 88%);
}
.cta-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.cta-card .eyebrow,.cta-card .section-title,.cta-card .section-lead{color:#fff}
.cta-card .section-title em{color:#fff;opacity:.72}
.cta-card .section-lead{opacity:.9}

/* Le bouton reprend la pastille-fleche du site, en blanc sur l'orange. */
.cta-see{
  background:#fff;border-color:#fff;color:#1a120c;
}
.cta-see::before{background:#1a120c}
.cta-see .bullet{color:#fff;background:#1a120c;border-radius:50%}
.cta-see:hover,.cta-see:focus-visible{color:#fff;border-color:#1a120c}
.cta-see:hover .bullet,.cta-see:focus-visible .bullet{background:transparent}

/* ============================================================
   SOUS-PAGES — habillage leger du fond
   Deux ou trois rappels de l'agence sur toute la page, pas plus,
   plus la trame revelee par les halos deja utilisee ailleurs.
   ============================================================ */
.va-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.vd{
  position:absolute;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(240,237,232,.11);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 12px 30px -20px rgba(0,0,0,.9);
  color:var(--orange);
  animation:vdFloat var(--vdur,10s) ease-in-out infinite;
  animation-delay:var(--vdel,0s);
}
.theme-light .vd{background:rgba(255,255,255,.66);border-color:rgba(16,11,9,.09)}
.vd svg{width:20px;height:20px}
@keyframes vdFloat{
  0%,100%{transform:rotate(var(--vrot,0deg)) translateY(0)}
  50%    {transform:rotate(var(--vrot,0deg)) translateY(-12px)}
}
@media (max-width:900px){.vd{display:none}}
@media (prefers-reduced-motion:reduce){.vd{animation:none}}

/* ============================================================
   REGLAGES FINS
   ============================================================ */
/* Quadrillage : redescendu partout, il etait devenu trop present. */
:root{--vml:rgba(255,255,255,.12)}
.theme-light{--vml:rgba(16,11,9,.09)}
#contact{--vml:rgba(255,255,255,.13)}
.theme-light #contact{--vml:rgba(16,11,9,.10)}
.hero .vm-orb,#contact .vm-orb,.page-head .vm-orb{opacity:.45!important}
#projets .vm-orb{opacity:.5!important}

/* La section formulaire retrouve une limite nette en haut — le fondu
   des deux cotes gommait trop la separation. */
#contact::before{content:none}
#contact{border-top:1px solid var(--line)}

/* « Des talents, pas des statistiques. » sur deux lignes : 13ch forcait
   trois lignes, il faut laisser la place a « pas des statistiques. ». */
.tstack-intro .section-title{max-width:21ch;text-wrap:balance}

/* Survol des cartes de talent : plus d'orange, juste un leger
   grossissement — la carte survolee passe devant les autres. */
.talents-grid:not(.tstack) .talent-card{
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.talents-grid:not(.tstack) .talent-card:hover{
  transform:scale(1.035);box-shadow:none;border-color:var(--line);z-index:2;
}
.talents-grid:not(.tstack) .talent-card:hover .talent-photo::after{opacity:0}
.talents-grid:not(.tstack) .talent-card:hover .talent-photo .ph,
.talents-grid:not(.tstack) .talent-card:hover .talent-photo .talent-img{transform:none}

/* Les pastilles de categorie collaient au titre. */
.page-head .filters{margin-top:clamp(26px,4vh,44px)}

/* Teinte des cartes d'appel adoucie. */
.cta-card{
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--orange) 72%, #7a2f00) 0%,
    color-mix(in srgb, var(--orange) 52%, #5e2400) 58%,
    color-mix(in srgb, var(--orange) 34%, #3d1800) 100%);
}
.cta-card::before{background-size:56px 56px;opacity:.8}

/* Le bloc d'appel remontait trop bas sous les cartes. */
.section-pad:has(.cta-card){padding-top:clamp(18px,3vh,44px)}

/* A 62 px dans une colonne de 564, la phrase tombait fatalement sur trois
   lignes. On reduit le corps : deux lignes, « Des talents, » puis
   « pas des statistiques. ». */
.tstack-intro .section-title{font-size:clamp(26px,3vw,42px);max-width:none}

/* ============================================================
   MOBILE — entete des sous-pages agence
   Les premiers elements demarraient trop bas pour rien.
   ============================================================ */
@media (max-width:760px){
  .page-head{padding-top:clamp(106px,16vh,140px);padding-bottom:clamp(20px,3.5vh,36px)}
  .page-head .filters{margin-top:clamp(20px,3vh,32px)}
}

/* Le haut de la section contact se fond un peu — sans effacer la limite. */
#contact{border-top:none}
#contact::before{
  content:"";position:absolute;left:0;right:0;top:0;
  height:clamp(60px,8vh,110px);z-index:1;pointer-events:none;
  background:linear-gradient(to bottom, var(--bg-2) 0%, rgba(0,0,0,0) 100%);
}

/* ============================================================
   MOBILE — ajustements agence
   ============================================================ */
/* Le composant de menu deroulant, repris du Studio. */
.filters-select{position:relative;display:none}
.filters-select select{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;overflow:hidden}
.fs-btn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:48px;padding:11px 18px;
  border-radius:999px;border:1px solid var(--line);background:var(--surface);
  font-family:inherit;font-size:14px;font-weight:500;color:var(--text);
  cursor:pointer;transition:border-color .3s var(--ease);
}
.fs-btn:hover,.fs-btn[aria-expanded="true"]{border-color:var(--orange)}
.fs-btn .fs-chev{width:16px;height:16px;flex:none;transition:transform .3s var(--ease)}
.fs-btn[aria-expanded="true"] .fs-chev{transform:rotate(180deg)}
.fs-menu{
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;
  margin:0;padding:6px;list-style:none;
  max-height:min(50svh,360px);overflow:auto;-webkit-overflow-scrolling:touch;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.85);
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .22s var(--ease), transform .28s var(--ease);
}
.fs-menu.open{opacity:1;transform:none;pointer-events:auto}
.fs-opt{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:11px 14px;border:0;border-radius:14px;background:transparent;
  font-family:inherit;font-size:13.5px;font-weight:500;color:var(--text-soft);
  text-align:left;cursor:pointer;transition:background .2s, color .2s;
}
.fs-opt:hover{background:rgba(255,255,255,.05);color:var(--text)}
.fs-opt[aria-selected="true"]{background:var(--orange);color:#fff}
.fs-opt .fs-check{width:15px;height:15px;flex:none;opacity:0}
.fs-opt[aria-selected="true"] .fs-check{opacity:1}

@media (max-width:900px){
  /* Le menu remplace la rangee de pastilles. */
  .page-head .filters-select{display:block;width:min(320px,86vw);margin-inline:auto}
  .page-head .filters{display:none}
  /* Titre sur trois lignes plutot que quatre. */
  .page-head h1{font-size:clamp(30px,7.6vw,42px);max-width:none}
}

@media (max-width:760px){
  /* Hero : centrage vertical fiable quel que soit l'appareil. La hauteur
     etait fixee en dur, donc juste sur un seul format d'ecran. */
  .hero{
    min-height:calc(100svh - 120px);
    padding-top:clamp(96px,14svh,132px);
    padding-bottom:clamp(16px,3svh,32px);
    justify-content:center;
  }
  .hero-grid{align-content:center}
  .brandbar-section{padding:clamp(14px,2.6svh,26px) 0 clamp(20px,3.4svh,36px)}

  /* Les sections respiraient trop : on resserre. */
  .section-pad{padding-top:clamp(46px,7svh,74px);padding-bottom:clamp(46px,7svh,74px)}
  #projets,#equipe,#talents{padding-top:clamp(40px,6svh,66px)}

  /* Les cartes projet se centrent — mobile uniquement. */
  .pslide-pin .pcar-track .project{justify-items:center;text-align:center}
  .pslide-pin .pcar-track .project .project-body{align-items:center}
  .pslide-pin .pcar-track .project .project-desc{margin-inline:auto}
  .pslide-pin .pcar-track .project .project-creator{justify-content:center}
  .pslide-pin .pcar-track .project .project-stats{justify-content:center}

  /* Equipe : les cartes remontaient trop bas sous le texte. */
  .team-grid{margin-top:clamp(22px,3.4svh,36px)}
  .team .section-lead{margin-bottom:0}
}

/* ============================================================
   MOBILE — derniers ajustements
   ============================================================ */
@media (max-width:900px){
  /* Le menu de categorie passait DERRIERE les cartes : la section
     suivante ouvre son propre plan et le recouvrait. On sort le haut
     de page au-dessus, et le menu tout en haut de la pile. */
  .page-head{position:relative;z-index:60}
  .page-head .wrap{z-index:61}
  .filters-select{z-index:62}
  .fs-menu{z-index:200}
  /* la section des cartes reste sous l'entete */
  .page-head ~ section{position:relative;z-index:1}

  /* Titre du catalogue sur DEUX lignes. */
  .page-head h1{font-size:clamp(26px,6.4vw,36px)}
}

@media (max-width:760px){
  /* Hero : titre sur trois lignes au lieu de quatre. */
  .hero h1{font-size:clamp(27px,7vw,38px);line-height:1.12}

  /* Le bandeau des marques remonte encore. */
  .hero{padding-bottom:clamp(8px,1.6svh,18px)}
  .brandbar-section{padding:clamp(8px,1.6svh,18px) 0 clamp(16px,2.8svh,30px)}

  /* Les cartes de talent gagnent la marge perdue sur les bords. */
  .talents-grid:not(.tstack){
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin-inline:calc(-1 * clamp(6px,2.2vw,14px));
  }
  /* Sur mobile on ne garde que le nombre d'abonnes : la categorie
     surchargeait une vignette deja petite. */
  .talents-grid:not(.tstack) .talent-cat{display:none}

  /* Moins de vide entre la grille et la carte d'appel. */
  .section-pad:has(.cta-card){padding-top:clamp(10px,2svh,26px)}
  .talents-grid:not(.tstack){margin-bottom:clamp(6px,1.4svh,18px)}

  /* Page Projets : les visuels et leurs textes se centrent. */
  .campaign{justify-items:center;text-align:center}
  .campaign-visual{width:100%;margin-inline:auto}
  .campaign-body{align-items:center}
  .campaign-body .campaign-desc,.campaign-body p{margin-inline:auto}
  .campaign-body .cp-creator,.campaign-creator{justify-content:center}
  .campaign-body .cp-stats,.campaign-stats{justify-content:center}
}

/* Le menu n'etait pas « derriere » les cartes : il etait ROGNE par
   l'overflow:hidden de l'entete, et on voyait la section a travers.
   On libere l'entete et on laisse chaque calque decoratif se clipper
   lui-meme — ils sont tous en inset:0. */
@media (max-width:900px){
  .page-head{overflow:visible}
  .page-head .head-aurora,
  .page-head .va-mesh,
  .page-head .va-deco,
  .page-head .hero-glow{overflow:hidden;border-radius:inherit}
}

/* Les cartes gagnent encore un peu de largeur sur les bords. */
@media (max-width:760px){
  .talents-grid:not(.tstack){gap:10px;margin-inline:-13px}
}

/* A 27 px le titre tenait sur deux lignes mais paraissait timide.
   On remonte un peu : trois lignes au maximum, mieux proportionne. */
@media (max-width:760px){
  .hero h1{font-size:clamp(30px,8vw,42px)}
}

/* Page Equipe : les cartes remontent, l'espace sous le chapo etait vide
   pour rien. On ne touche qu'a la grille, pas au texte. */
@media (max-width:760px){
  .page-head + section,.page-head ~ section:first-of-type{padding-top:clamp(8px,1.6svh,20px)}
  .team-grid,#teamGrid{margin-top:clamp(4px,1svh,14px)}
}

/* Le padding de la section equipe est en style inline dans le HTML : une
   regle normale ne peut pas le surcharger. On lui donne une classe et on
   passe en !important, uniquement sur mobile. 156 px de vide entre le
   chapo et les cartes, c'etait trop. */
@media (max-width:760px){
  .team-page-grid{padding-top:clamp(20px,3.4svh,40px)!important}
}

/* ============================================================
   DERNIERS REGLAGES
   ============================================================ */
/* Equipe (page agence) : le nom collait au bas de la photo. */
.team-row .member-photo,.member-photo{margin-bottom:clamp(12px,1.6vw,18px)}
.member-name{margin-top:0}

/* Page Talents : le menu descend un peu et se resserre en largeur. */
@media (max-width:900px){
  .page-head .filters-select{
    width:min(240px,72vw);
    margin-top:clamp(26px,4svh,42px);
  }
  .fs-btn{min-height:44px;padding:10px 16px;font-size:13.5px}
}

/* Page Projets : le SECOND visuel restait aligne a gauche. Les campagnes
   alternent leur sens via une classe sur les impaires, qui reimposait son
   propre alignement — on centre les deux cas. */
@media (max-width:760px){
  .campaign,.campaign.rev,.campaign:nth-child(even),.campaign:nth-child(odd){
    justify-items:center;text-align:center;
  }
  .campaign .campaign-body,
  .campaign.rev .campaign-body{align-items:center;text-align:center}
  .campaign .campaign-visual,
  .campaign.rev .campaign-visual{margin-inline:auto;order:0}
  .campaign .campaign-body > *{margin-inline:auto}
  .campaign-stats,.campaign .campaign-stats{justify-content:center}
}

/* Les visuels de campagne portent un decalage alterne de 34 px
   (translateX sur les paires et les impaires) qui, en une seule colonne,
   les faisait pencher a gauche puis a droite au lieu d'etre centres. */
@media (max-width:780px){
  .campaign-list .campaign .campaign-visual,
  .campaign-list .campaign:nth-child(even) .campaign-visual,
  .campaign-list .campaign:nth-child(odd) .campaign-visual{
    transform:none!important;margin-inline:auto;
  }
}

/* ============================================================
   HERO — les compteurs sont masques, pas supprimes
   Les trois chiffres (createurs, vues, marques) restent dans
   IconAgency.html et continuent d'etre comptes par va.js. Pour
   les rendre a l'affichage : supprimer la seule regle qui suit.
   ============================================================ */
.hero-meta{display:none}

/* Sans les compteurs, le bloc de la hero est plus court et le calage
   d'origine — 158 px de marge haute contre 58 en bas — le posait
   nettement sous le centre. On est reparti de marges egales, mais le
   bloc se centrait alors dans la HERO, pas dans ce qu'on voit : la
   barre de navigation recouvre le haut de la hero, et le bandeau des
   marques occupe le bas de l'ecran, sous elle. L'espace reellement
   libre commence donc sous la barre, et le bloc y tombait 36 px trop
   haut.
   D'ou le report d'une demi-hauteur de barre du bas vers le haut : le
   total des marges ne bouge pas — la hero garde sa hauteur et le
   bandeau des marques sa place — mais le bloc descend d'exactement ce
   qu'il faut. La moitie, parce que centrer dans une zone qui commence
   N plus bas revient a descendre de N/2, quelle que soit la taille de
   l'ecran.
   Chaque palier est repris tel quel pour ne pas deborder sur la bande
   760-860 px, ou la hero n'a plus de hauteur imposee. */
@media (min-width:861px){
  .hero{
    --va-barre:72px;              /* ou finit la barre : 12 px de retrait + 60 de pilule */
    padding-top:calc(clamp(116px,15vh,158px) + var(--va-barre) / 2);
    padding-bottom:calc(clamp(116px,15vh,158px) - var(--va-barre) / 2);
  }
}
@media (max-width:760px){
  .hero{padding-top:clamp(96px,14svh,132px);padding-bottom:clamp(96px,14svh,132px)}
}

/* ============================================================
   EQUIPE — plus de quinconce, la rangee est alignee
   Les blocs precedents decalaient un membre sur deux (--my) et le
   reduisaient un peu (--ms). Tout revient sur la meme ligne de
   base, a la meme taille — sur la page d'accueil comme sur la
   page dediee, qui partagent .team-row. Le padding-bas qui
   reservait la place du decalage n'a plus d'objet.
   ============================================================ */
.team-row{align-items:flex-start;padding-bottom:0}
.team-row .member:nth-child(n){--my:0px;--ms:1}
/* Deux lignes reservees a l'intitule : un role qui tient sur une seule
   raccourcissait la carte de dix-huit pixels et la rangee finissait en
   dents de scie. Le bas des cartes s'aligne maintenant comme le haut. */
.team-row .member-role{min-height:calc(2 * 1.45em)}

/* ==========================================================================
   TALENTS DE LA PAGE D'ACCUEIL — six mises en avant, arrivee en convergence
   La pile qui se defaisait au defilement laisse la place a une grille de six.
   L'arrivee reprend celle des projets du Studio : chaque carte vient du bord
   d'ecran le plus proche de sa place dans la grille (3 colonnes x 2 rangees)
   et se pose au centre. Rapide et presque simultane - on lit un seul
   mouvement, pas six.
   ========================================================================== */
/* Trois par rangee, et non quatre comme sur la page Talents : a quatre, le
   mouvement d'arrivee ne se lisait plus. La largeur est bornee a 940 px pour
   ramener les cartes autour de 290 px, comme sur la page Talents.
   FLEX plutot que GRID : le nombre de talents n'est plus fixe, et une grille
   laisse une derniere rangee incomplete calee a gauche. En flex, avec
   justify-content:center, elle se centre d'elle-meme. La largeur des cartes
   est calculee pour qu'il en tienne exactement trois. */
.talents-grid.talents-6{
  --tg:clamp(16px,1.7vw,24px);
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--tg);
  max-width:940px;margin-inline:auto;
  margin-top:clamp(34px,4.6vh,52px);
}
.talents-grid.talents-6 .talent-card{flex:0 0 calc((100% - 2 * var(--tg)) / 3)}
@media (max-width:900px){
  .talents-grid.talents-6{max-width:620px}
  .talents-grid.talents-6 .talent-card{flex-basis:calc((100% - var(--tg)) / 2)}
}
.talents-grid.talents-6 .talent-card.card-in{
  animation:vaTalentBurst .72s cubic-bezier(.18,.8,.28,1) backwards;
  animation-delay:calc(var(--ci,0) * 55ms);
}
.talents-grid.talents-6 .talent-card:nth-child(3n+1){--bx:-20vw}   /* colonne gauche */
.talents-grid.talents-6 .talent-card:nth-child(3n)  {--bx:20vw}    /* colonne droite */
.talents-grid.talents-6 .talent-card:nth-child(-n+3){--by:-14vh}   /* rangee haute   */
.talents-grid.talents-6 .talent-card:nth-child(n+4) {--by:14vh}    /* rangee basse   */
@keyframes vaTalentBurst{
  from{opacity:0;transform:translate(var(--bx,0px),var(--by,0px)) scale(.92)}
  55% {opacity:1}
  85% {transform:translate(0,0) scale(1.012)}
  to  {opacity:1;transform:none}
}
@media (max-width:900px){
  /* Deux colonnes : impaires par la gauche, paires par la droite. */
  .talents-grid.talents-6 .talent-card:nth-child(n){--by:0}
  .talents-grid.talents-6 .talent-card:nth-child(odd){--bx:-16vw}
  .talents-grid.talents-6 .talent-card:nth-child(even){--bx:16vw}
}
@media (max-width:560px){
  .talents-grid.talents-6 .talent-card:nth-child(n){--bx:0px;--by:34px}
}
@media (prefers-reduced-motion:reduce){
  .talents-grid.talents-6 .talent-card.card-in{animation:none}
}

/* ==========================================================================
   PROJETS DE L'ACCUEIL — colonne verticale, intitule epingle a gauche
   Le carrousel horizontal imposait un cadre unique a des affiches de deux
   formats : une couverture verticale y perdait la moitie de son image, et
   la rattraper par un fond floute n'etait qu'un pansement. Ici, chaque
   carte epouse le format de son affiche, donc rien n'est recadre et il n'y
   a plus rien a masquer.
     - affiche horizontale : image en haut (16/9), informations dessous ;
     - affiche verticale   : image sur le flanc gauche (9/16), sur toute la
       hauteur, informations a droite.
   Les deux cartes partagent la MEME hauteur, ce qui donne une colonne
   reguliere malgre deux mises en page differentes.
   ========================================================================== */
.pcol{
  --ph:clamp(380px,37vw,560px);          /* hauteur commune aux deux formats */
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(28px,4.6vw,68px);
  align-items:start;
}
/* L'intitule reste lisible pendant tout le defilement, sans machinerie :
   un simple position:sticky remplace l'epinglage calcule au scroll. Il
   occupe toute la hauteur d'ecran et centre son contenu dedans - cale a
   un `top` fixe, il flottait trop haut face aux cartes. */
.pcol-intro{
  position:sticky;top:0;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
}
/* « Des collaborations » doit tenir sur UNE ligne : a la taille de
   section par defaut, la colonne la coupait apres « Des ». On resserre
   le corps ici, et la colonne s'elargit un peu en face. */
.pcol-intro .section-title{margin:0;font-size:clamp(26px,3vw,42px)}
.pcol-foot{margin-top:clamp(20px,2.6vw,30px)}
.pcol-lead{margin-top:clamp(14px,1.6vw,20px);max-width:38ch}
/* La premiere carte entre A LA HAUTEUR DU TEXTE, pas au-dessus. L'intitule
   est centre dans un bloc d'une hauteur d'ecran : sans ce retrait, la liste
   demarrait au HAUT de ce bloc, donc une demi-hauteur d'ecran plus haut que
   le texte - on voyait le premier projet avant de lire le titre. Le meme
   retrait en bas laisse l'intitule epingle jusqu'a la derniere carte. */
.pcol-list{
  display:flex;flex-direction:column;gap:clamp(20px,2.6vw,34px);
  padding-block:calc(50svh - var(--ph) / 2);
}

/* --pe vaut 1 quand la carte est au centre de l'ecran, 0 quand elle en
   est loin. va.js le pose a chaque image ; le reste est du calcul CSS.
   La carte au centre est pleine et nette, celles qui montent ou qui
   arrivent du bas retrecissent et s'effacent - c'est ce qui donne le
   mouvement de carrousel sans deplacer quoi que ce soit. */
.pcol-list .project{
  --pe:1;--lift:0px;
  height:var(--ph);
  display:grid;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transform:translateY(var(--lift)) scale(calc(.88 + var(--pe) * .12));
  opacity:calc(.3 + var(--pe) * .7);
  transform-origin:center;
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease),
             transform .18s linear, opacity .18s linear;
  will-change:transform, opacity;
}
.pcol-list .project:hover{--lift:-3px;
  border-color:color-mix(in srgb,var(--orange) 40%,var(--line));
  box-shadow:0 26px 60px -34px rgba(255,86,2,.5)}
@media (prefers-reduced-motion:reduce){
  .pcol-list .project{transform:none;opacity:1;transition:none}
}

/* Affiche horizontale : l'image occupe le haut, a son format exact. */
.pcol-list .project.is-horizontal{grid-template-rows:auto minmax(0,1fr)}
.pcol-list .project.is-horizontal .project-visual{aspect-ratio:16/9;min-height:0;height:auto}

/* Affiche verticale : l'image tient tout le flanc gauche, a son format
   exact. Sa largeur decoule de la hauteur de carte - c'est ce qui garde
   les deux formats a la meme hauteur. */
.pcol-list .project.is-vertical{grid-template-columns:auto minmax(0,1fr)}
.pcol-list .project.is-vertical .project-visual{
  aspect-ratio:9/16;height:100%;width:auto;min-height:0;
}

/* Marge interieure resserree sur la carte YOUTUBE seule : son affiche en
   16/9 mange les deux tiers de la hauteur, si bien qu'il ne restait au
   chapo qu'une ligne et demie. Vingt pixels rendus, c'est une ligne
   entiere de plus a lire sans faire defiler. La carte verticale, elle,
   garde son aise. */
.pcol-list .project .project-body{
  padding:clamp(20px,2.2vw,34px);
  display:flex;flex-direction:column;justify-content:center;gap:0;
  min-width:0;
}
/* CARTE YOUTUBE : le talent passe sur le flanc droit.
   Empile sous le texte, il prenait une bande de 58 px sur toute la
   largeur - la hauteur meme qui manquait au chapo - pendant que la
   moitie droite de la carte restait vide. Pose a droite, il occupe ce
   vide et rend sa place au texte, qui gagne deux lignes et cesse d'etre
   bride a 46 caracteres.
   Le titre garde toute la largeur : « Anthony Priolo x Qonto » se
   serait replie sur trois lignes dans une colonne amputee. */
.pcol-list .project.is-horizontal .project-body{
  padding:clamp(16px,1.7vw,24px);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto minmax(0,1fr);
  align-content:center;
  column-gap:clamp(16px,2vw,30px);
}
.pcol-list .project.is-horizontal .project-title{grid-column:1 / -1;grid-row:1}
.pcol-list .project.is-horizontal .project-desc{
  grid-column:1;grid-row:2;
  --lignes:5;
  max-width:none;                 /* la bride a 46ch laissait le flanc vide */
}
.pcol-list .project.is-horizontal .project-creator{
  grid-column:2;grid-row:2;
  align-self:center;margin-top:0;
  flex-direction:column;gap:9px;text-align:center;
  max-width:132px;
}
.pcol-list .project.is-horizontal .project-creator > div{text-align:center}
.pcol-list .project .project-title{font-size:clamp(20px,1.9vw,28px);margin-top:0}

/* Carte verticale : la colonne de texte est etroite, l'aligner a gauche y
   laissait des lignes tres inegales. Tout se centre, et le titre s'empile -
   le talent, la croix, la marque - chacun sur sa ligne. */
.pcol-list .project.is-vertical .project-body{align-items:center;text-align:center}
.pcol-list .project.is-vertical .project-title{
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.pcol-list .project.is-vertical .project-title .x{margin:0;line-height:1}
.pcol-list .project.is-vertical .project-desc{margin-inline:auto}
.pcol-list .project.is-vertical .project-creator{justify-content:center}
/* Le bloc du createur reste centre dans la colonne, mais son texte se cale
   a gauche, contre l'avatar : centre, « L'Oreal » flottait sous le nom au
   lieu de s'aligner avec lui. */
.pcol-list .project.is-vertical .project-creator > div{text-align:left}
@media (max-width:980px){
  /* Empilees, les deux cartes ont la meme largeur de texte : elles suivent
     donc la meme mise en page. Tout y est centre - titre, chapo, talent -
     ce qui tient mieux sur une colonne etroite qu'un fer a gauche. */
  .pcol-list .project.is-vertical .project-body,
  .pcol-list .project.is-horizontal .project-body{align-items:center;text-align:center}
  .pcol-list .project.is-vertical .project-title{display:block}
  .pcol-list .project.is-vertical .project-title .x{margin:0 4px}
  .pcol-list .project.is-vertical .project-creator,
  .pcol-list .project.is-horizontal .project-creator{justify-content:center}
}
.pcol-list .project .project-desc{font-size:14.5px;line-height:1.55;margin-top:12px}
.pcol-list .project .project-creator{margin-top:16px}
.pcol-list .project .project-stats{margin-top:18px}

/* Sous 980 px, les deux colonnes s'empilent : l'intitule repasse en haut,
   et toutes les cartes prennent la meme forme - image, puis informations. */
@media (max-width:980px){
  /* Le bouton passe SOUS les cartes. Au-dessus, il s'intercalait entre le
     texte et la premiere carte : on lisait l'invitation a tout voir avant
     d'avoir vu quoi que ce soit. La pilule de l'intro s'efface -
     display:contents - pour que ses trois enfants deviennent freres de la
     piste et puissent donc etre ordonnes autour d'elle. Le centrage et le
     texte centre passent alors sur .pcol, qui les heberge desormais. */
  .pcol{
    display:flex;flex-direction:column;align-items:center;text-align:center;
    gap:0;                       /* les ecarts restent portes par les marges */
  }
  .pcol-intro{display:contents}
  .pcol-lead{margin-inline:auto}
  .pcol-foot{order:2;margin-top:clamp(20px,3.4vh,30px)}
  /* ------------------------------------------------------------------
     TELEPHONE : on glisse vers la droite
     Le defilement vertical convient a un grand ecran, ou la colonne de
     droite a de la place. Sur un telephone, chaque carte prenait presque
     tout l'ecran et il fallait defiler longuement pour en voir quatre.
     On repasse donc a un glissement horizontal - mais avec le defilement
     natif du navigateur et des points d'accroche, pas la piste calculee
     au scroll d'avant : ca se manipule au doigt, ca s'arrete tout seul
     sur une carte, et il n'y a aucun script.
     ------------------------------------------------------------------ */
  .pcol-list{
    --pw:min(66vw, 268px);                      /* largeur d'une slide */
    --pmarge:calc((100vw - var(--pw)) / 2);     /* ce qui reste, de chaque cote */
    order:1;align-self:stretch;                 /* entre le texte et le bouton */
    flex-direction:row;align-items:stretch;
    max-width:none;
    margin-top:clamp(20px,3.4vh,32px);
    margin-inline:calc(-1 * var(--pad-x));
    /* Marges laterales egales a la moitie du debord : chaque carte vient
       alors se poser au CENTRE de l'ecran, ses voisines depassant de part
       et d'autre. Calee a gauche, la piste n'etait pas dans l'axe du texte
       au-dessus. */
    padding:0 var(--pmarge);
    gap:14px;
    overflow-x:auto;overflow-y:visible;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--pmarge);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .pcol-list::-webkit-scrollbar{display:none}
  .pcol-list .project{
    flex:0 0 var(--pw);
    scroll-snap-align:center;
    /* Le relief suivait la position VERTICALE : en glissement horizontal
       elle ne varie plus, la variable resterait figee. */
    transform:none;opacity:1;
  }
  .pcol-list .project .project-body{padding:clamp(16px,4vw,22px)}
  /* Le talent redescend sous le texte sur la carte YouTube. Pose a droite
     il fonctionne sur 599 px de large ; sur les 268 px d'un telephone, il
     ne laissait plus que 94 px au chapo - une colonne de deux mots. Les
     deux formats reprennent donc la meme mise en page, empilee. */
  .pcol-list .project.is-horizontal .project-body{
    display:flex;flex-direction:column;justify-content:center;
  }
  /* La regle du grand ecran posait margin-top:0 et align-self:center pour
     caler le talent sur le flanc. Empile, il se retrouvait colle sous la
     derniere ligne du chapo, et decale. On lui rend sa marge et son
     alignement normal. */
  .pcol-list .project.is-horizontal .project-creator{
    flex-direction:row;gap:11px;max-width:none;
    margin-top:13px;align-self:auto;
  }
  .pcol-list .project.is-horizontal .project-creator > div{text-align:left}
  /* Meme cadre, meme hauteur de carte : les deux formats montrent le meme
     nombre de lignes. A quatre, la carte YouTube gardait 49 px de vide que
     le centrage repartissait en un trou au-dessus du titre. */
  .pcol-list .project .project-desc,
  .pcol-list .project.is-vertical .project-desc,
  .pcol-list .project.is-horizontal .project-desc{--lignes:7}
  .pcol-list .project .project-title{font-size:clamp(18px,4.8vw,22px)}
  /* Le chapo etait tronque a deux lignes, points de suspension compris :
     la fin du texte etait tout simplement perdue. Il se lit maintenant en
     entier, en le faisant defiler, comme sur la page Projets. La
     troncature - display:-webkit-box - est retiree : elle empechait tout
     defilement. */
  .pcol-list .project .project-desc{
    font-size:13.5px;line-height:1.5;margin-top:9px;
  }
  .pcol-list .project .project-creator{margin-top:13px}
  .pcol-list .project,
  .pcol-list .project.is-vertical,
  .pcol-list .project.is-horizontal{
    height:auto;grid-template-columns:1fr;grid-template-rows:auto auto;
  }
  /* ALIGNEMENT DES SLIDES
     En piste horizontale, un cadre qui suit le format de l'affiche donne
     des cartes de hauteurs tres inegales - 613 px pour une verticale
     contre 296 pour une horizontale - et rien ne s'aligne. Ici, le cadre
     a donc une HAUTEUR FIXE, la meme pour les deux. Les slides ont alors
     exactement la meme geometrie, et align-items:stretch egalise ce qui
     resterait.
     Sur grand ecran on garde les cadres au format : la colonne verticale
     ne pose pas ce probleme, chaque carte y est vue seule. */
  .pcol-list .project.is-vertical .project-visual,
  .pcol-list .project.is-horizontal .project-visual{
    aspect-ratio:auto;width:100%;height:clamp(240px,44vw,300px);
  }
  /* L'affiche remplit le cadre au lieu de s'y contenir : plus de bandes de
     fond sur les cotes. Le cadre etant presque carre, les deux formats y
     perdent a peu pres autant - environ 45 % de la hauteur pour une
     verticale, 42 % de la largeur pour une horizontale - et le recadrage
     part du centre, la ou se trouve le sujet. Le bouton de lecture donne
     acces a l'original. */
  .pcol-list .project .project-img{object-fit:cover;object-position:center}
}