/* ============================================================
   Insights Podcast, feuille de style unique
   Palette et typographie inspirées de gothamproductionstudios.com,
   inversées en fond sombre.
   ============================================================ */

/* --- Polices auto-hébergées ---------------------------------
   Télécharge Bebas Neue et Outfit sur fonts.google.com,
   convertis-les en .woff2 et dépose-les dans /fonts/.
   L'auto-hébergement évite d'envoyer l'IP de chaque visiteur
   à Google et permet de garder la CSP stricte du .htaccess.
   En attendant, la pile de repli garde le site lisible.
------------------------------------------------------------ */
@font-face {
  font-family: 'Bebas Neue';
  src: url('../fonts/bebas-neue-400.woff2') format('woff2');
  /* block et non swap : Bebas Neue porte tous les titres et le
     lockup d'intro. Avec swap, le texte s'affiche d'abord dans la
     police de repli puis saute quand la vraie police arrive, ce
     qui donnait l'impression d'une image figee avant l'animation.
     block laisse le texte invisible le temps du chargement, et la
     balise preload des pages fait arriver la police en meme temps
     que la feuille de style. */
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --bg:        #1C1C1E;
  --bg-soft:   #232326;
  --cream:     #F5DEC0;
  --gold:      #EDC069;
  --coral:     #DE6264;
  --cream-70:  rgba(245, 222, 192, .70);
  --cream-55:  rgba(245, 222, 192, .55);
  --cream-45:  rgba(245, 222, 192, .45);
  --cream-15:  rgba(245, 222, 192, .15);
  --cream-08:  rgba(245, 222, 192, .08);

  --display: 'Bebas Neue', 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --body:    'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --gutter: clamp(1.5rem, 5vw, 6rem);
  --section-y: clamp(5rem, 11vw, 10rem);
  --maxw: 1440px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--gold); }
::selection { background: var(--gold); color: var(--bg); }

img, video { display: block; max-width: 100%; }

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

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- Typographie ---------- */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: .89;      /* interlignage plus petit que la taille : la signature */
  margin: 0;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.4rem, 5.1vw, 4.3rem); }
h2 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); }
h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: .95; }

.kicker {           /* sur-titre conversationnel, jamais en capitales */
  font-size: 17px;
  font-weight: 400;
  color: var(--cream-55);
  margin: 0 0 1.4rem;
  letter-spacing: normal;
}
.label {            /* micro-label technique, capitales espacées */
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream-55);
  font-weight: 400;
}
.lede { font-size: clamp(1rem, 1.25vw, 1.15rem); color: var(--cream-70); max-width: 46ch; }
.meta { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.gold { color: var(--gold); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: var(--body); font-size: 1rem; font-weight: 500;
  padding: 1.05rem 1.9rem; border: 1px solid var(--gold);
  transition: background .2s ease, color .2s ease;
  cursor: pointer;
}
.btn-solid { background: var(--gold); color: var(--bg); }
.btn-solid:hover { background: transparent; color: var(--gold); }
.btn-ghost { background: transparent; color: var(--gold); padding: .72rem 1.3rem; font-size: .93rem; }
.btn-ghost:hover { background: var(--gold); color: var(--bg); }
.btn .arw { transition: transform .2s ease; }
.btn:hover .arw { transform: translateX(4px); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  background: rgba(28, 28, 30, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.nav.scrolled { border-bottom-color: var(--cream-08); }
.nav-in {
  max-width: var(--maxw); margin: 0 auto; padding: 1.15rem var(--gutter);
  display: flex; align-items: center; gap: 2rem;
}
.logo { display: inline-flex; align-items: center; gap: .7rem; opacity: 0; }
.logo.on { opacity: 1; }
.logo svg { flex: none; }
.logo span { font-family: var(--display); font-size: 1.45rem; letter-spacing: .01em; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 1.9rem; }
.nav-links a { font-size: .88rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-70); }
.nav-links a.active { color: var(--gold); }
/* Sélecteur de langue : anglais d'abord, marché principal */
.lang { display: flex; align-items: center; gap: .9rem; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.lang > * { display: inline-flex; align-items: center; gap: .4rem; color: var(--cream-45); transition: color .2s ease, opacity .2s ease; }
.lang .on { color: var(--gold); }
.lang a:hover { color: var(--cream); }
.lang svg { flex: none; border-radius: 2px; opacity: .55; transition: opacity .2s ease; }
.lang .on svg { opacity: 1; }
.lang a:hover svg { opacity: .9; }
.lang .sep { width: 1px; height: 12px; background: var(--cream-15); padding: 0; }
.nav-toggle { display: none; background: none; border: 0; color: var(--cream); padding: .4rem; cursor: pointer; }

/* ---------- Intro animée ---------- */
.intro-cover {
  position: fixed; inset: 0; z-index: 90; background: var(--cream);
  display: grid; place-items: center;
  transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}
.intro-lock { text-align: left; }
.intro-lock .row { display: flex; align-items: center; gap: .7rem; }
.intro-lock .word {
  font-family: var(--display); font-size: clamp(2rem, 5.6vw, 4rem);
  color: var(--bg); letter-spacing: .01em; line-height: 1;
}
.intro-prod {
  margin-top: .15em; font-family: var(--display); color: var(--coral);
  font-size: clamp(.85rem, 1.9vw, 1.35rem); letter-spacing: .34em;
  /* Masqué dès le premier pixel. Sans ça le mot est peint en entier
     dès que le CSS arrive, puis disparaît quand le script le découpe
     en lettres : on voyait le mot figé pendant ~130 ms avant que
     l'animation ne commence. Le script rend la ligne au moment où
     les lettres, elles, sont déjà à opacity 0. */
  opacity: 0;
}
.intro-prod.split { opacity: 1; }
/* Révélation lettre par lettre. Uniquement transform et opacity,
   donc composée par le GPU : aucun repaint, aucune saccade.
   Le décalage régulier corrige le rythme irrégulier qu'imposait
   l'ancien balayage clip-path sur un interlettrage aussi large. */
.intro-prod .ch {
  display: inline-block; will-change: transform, opacity;
  opacity: 0; transform: translateY(.5em);
}
.intro-prod.reveal .ch {
  animation: chIn .55s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes chIn { to { opacity: 1; transform: none; } }

.intro-mover {
  position: fixed; z-index: 95; pointer-events: none;
  transform-origin: left center;
  transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}
.intro-hidden { display: none !important; }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(7rem, 13vh, 9rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.hero-grid { display: grid; grid-template-columns: 1fr .82fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }

/* Hero pleine largeur : le titre occupe toute la page, le sous-titre
   et le CTA se répartissent en dessous sur une ligne. */
.hero-wide { display: block; }
.hero-wide h1 { max-width: 22ch; }
.hero-foot {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.6rem 3rem; margin-top: 1.7rem;
}
.hero-foot .txt { max-width: 52ch; }
.hero-foot .sub2 { margin-bottom: 0; }

/* ---------- Vitrine de l'offre ----------
   Toutes les vignettes partagent la même hauteur de référence.
   Leur largeur découle du ratio, ce qui aligne naturellement
   des pièces 16/9 et 9/16 sur une même ligne de base.        */
.showcase { margin-top: clamp(2.4rem, 4vw, 3.4rem); }
.show-row { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.show-row + .show-row { margin-top: 1rem; }
.showcase .meta { justify-content: center; margin-top: 1.6rem; }
.show-card {
  position: relative; padding: 0; border: 1px solid var(--cream-08);
  background: var(--bg-soft); overflow: hidden; cursor: pointer;
  color: inherit; flex: 0 1 auto; min-width: 0;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .25s ease, box-shadow .35s ease;
}
/* la vignette avance légèrement, l'image zoome un peu plus fort :
   le décalage entre les deux donne la sensation de profondeur */
.show-card:hover, .show-card:focus-visible {
  transform: scale(1.035); z-index: 3;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.show-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1), filter .35s ease;
  filter: saturate(.9);
}
.show-card:hover img, .show-card:focus-visible img { transform: scale(1.08); filter: saturate(1.05); }
.show-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(28,28,30,.75) 0%, rgba(28,28,30,0) 45%);
}
.show-card:hover { border-color: var(--gold); }
.show-card .tag {
  position: absolute; left: .8rem; bottom: .7rem; z-index: 2;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-70);
}
.show-card .dur {
  position: absolute; right: .8rem; bottom: .7rem; z-index: 2;
  font-size: 11px; letter-spacing: .1em; color: var(--cream-45);
}
.show-card .play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.9);
  width: 48px; height: 48px; border-radius: 50%; z-index: 2;
  border: 1px solid var(--gold); background: rgba(28, 28, 30, .5);
  display: grid; place-items: center; color: var(--gold);
  opacity: 0; transition: opacity .22s ease, transform .22s ease;
}
.show-card:hover .play, .show-card:focus-visible .play { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.r-16x9 { aspect-ratio: 16 / 9; height: clamp(180px, 21vw, 300px); }
.r-9x16 { aspect-ratio: 9 / 16; height: clamp(240px, 28vw, 400px); }

/* Rangée de trois pièces au même format : on abandonne le
   dimensionnement par la hauteur pour un tiers de la largeur,
   sinon trois vignettes 16/9 dépassent la ligne. */
.show-row.trio { justify-content: flex-start; }
.show-row.trio .show-card {
  height: auto;
  flex: 0 0 calc((100% - 2rem) / 3);
  width: calc((100% - 2rem) / 3);
}

/* ---------- Bloc éditorial en deux colonnes ----------
   Titre à gauche, texte à droite. Évite le paragraphe
   posé seul contre la marge gauche.                     */
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.split .side { position: relative; }
.split .side h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); }
/* le texte s'aligne sur le titre, pas sur le sur-titre :
   on décale la colonne de droite de la hauteur du kicker */
.split .body { padding-top: calc(17px * 1.65 + 1.4rem); }
.split .body p { color: var(--cream-70); margin: 0 0 1.1rem; max-width: 60ch; }
.split .body p:last-of-type { margin-bottom: 0; }
/* empêche une césure après le trait d'union */
.nb { white-space: nowrap; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 1.6rem; }
  .split .body { padding-top: 0; }
}
.hero-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); margin-right: .7rem; vertical-align: middle; }
.hero h1 { margin-bottom: 1.8rem; }
.hero .sub1 { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--cream); margin: 0 0 .55rem; }
.hero .sub2 { color: var(--cream-55); margin: 0 0 2.4rem; max-width: 44ch; }
.trust { margin-top: 3.2rem; padding-top: 1.9rem; border-top: 1px solid var(--cream-08); }
.trust-row { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1rem; margin-top: 1rem; }
.trust-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--display); font-size: 1.15rem; letter-spacing: .04em;
  padding: .5rem 1.1rem; border: 1px solid var(--cream-15);
  transition: border-color .2s ease, color .2s ease;
}
a.trust-chip:hover, a.trust-chip:focus-visible { border-color: var(--gold); color: var(--gold); }
.trust-chip svg { flex: none; opacity: .55; transition: opacity .2s ease; }
a.trust-chip:hover svg { opacity: 1; }

/* ---------- Slider avant / après ---------- */
.ba {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--cream-08); background: var(--bg-soft);
  --pos: 50%; cursor: ew-resize; touch-action: none;
}
.ba video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba .after { clip-path: inset(0 0 0 var(--pos)); }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 1px;
  background: var(--gold); transform: translateX(-.5px); z-index: 3;
}
.ba-grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--gold); background: rgba(28, 28, 30, .72);
  display: grid; place-items: center; color: var(--gold); cursor: ew-resize;
}
.ba-tag { position: absolute; z-index: 4; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-45); background: rgba(28, 28, 30, .6); padding: .3rem .55rem; }
.ba-tag.tl { top: .9rem; left: .9rem; }
.ba-tag.tr { top: .9rem; right: .9rem; }
.ba-tag.bl { bottom: .9rem; left: .9rem; }
.ba-tag.br { bottom: .9rem; right: .9rem; }

/* ---------- Sections de travaux ---------- */
.sec { padding-block: var(--section-y); border-top: 1px solid var(--cream-08); }
.sec-grid { display: grid; grid-template-columns: 1.28fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.sec-grid.rev .media { order: 2; }
.sec-grid.rev .txt { order: 1; }
.sec h2 { margin-bottom: 1.6rem; }
.frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--cream-08); background: var(--bg-soft); }
.frame video, .frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Galerie de teasers ---------- */
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: .7rem; }
.thumb {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer;
  border: 1px solid transparent; opacity: .7; transition: opacity .2s ease, border-color .2s ease;
  background: var(--bg-soft); padding: 0;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { opacity: .92; }
.thumb[aria-selected="true"] { opacity: 1; border-color: var(--gold); }
/* pas de libellé sur les vignettes : le nom de fichier n'intéresse personne */

/* ---------- Shorts, bandeau défilant ---------- */
.marquee {
  margin-top: 3rem; overflow: hidden; width: 100vw; margin-inline: calc(50% - 50vw);
  /* pan-y laisse le scroll vertical de la page au navigateur et nous
     réserve le geste horizontal : sans ça, un swipe latéral sur mobile
     ferait défiler la page au lieu du bandeau. */
  touch-action: pan-y; cursor: grab;
}
.marquee.dragging { cursor: grabbing; }
.marquee-track { user-select: none; -webkit-user-select: none; }
.marquee-track img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
/* Défilement continu, sans pause au survol : le bandeau ne
   s'arrête jamais et reboucle sans coupure grâce à la liste
   dupliquée, la translation de -50% ramenant exactement au
   même point. */
.marquee-track { display: flex; gap: 1rem; width: max-content; animation: marquee 64s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.short {
  position: relative; flex: none; width: clamp(190px, 17vw, 260px); aspect-ratio: 9 / 16;
  overflow: hidden; border: 1px solid var(--cream-08); background: var(--bg-soft);
}
.short video, .short img { width: 100%; height: 100%; object-fit: cover; }

/* Short cliquable : la vignette est un bouton qui ouvre le lecteur */
button.short {
  padding: 0; cursor: pointer; color: inherit;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .25s ease, box-shadow .35s ease;
}
button.short img { transition: transform .55s cubic-bezier(.22, 1, .36, 1), filter .35s ease; filter: saturate(.9); }
button.short:hover, button.short:focus-visible {
  transform: scale(1.05); z-index: 3; border-color: var(--gold);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
button.short:hover img, button.short:focus-visible img { transform: scale(1.08); filter: saturate(1.05); }
button.short::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(28, 28, 30, .28);
  opacity: 0; transition: opacity .22s ease;
}
button.short:hover::after, button.short:focus-visible::after { opacity: 1; }
.short .play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.9);
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--gold); background: rgba(28, 28, 30, .55);
  display: grid; place-items: center; color: var(--gold);
  opacity: 0; transition: opacity .22s ease, transform .22s ease; z-index: 2;
}
button.short:hover .play, button.short:focus-visible .play { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---------- Lecteur plein écran ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(16, 16, 18, .93);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: none; place-items: center; padding: 4vh 5vw;
}
.lightbox[open], .lightbox.on { display: grid; }
.lightbox video {
  aspect-ratio: 9 / 16; height: 88vh; width: auto; max-width: 100%;
  background: #000; border: 1px solid var(--cream-15);
}
.lightbox.wide video { aspect-ratio: 16 / 9; height: auto; width: min(100%, 1400px); }
.lightbox-close {
  position: absolute; top: 1.6rem; right: 1.6rem;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--cream-15); background: transparent;
  color: var(--cream); display: grid; place-items: center; cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.lightbox-close:hover { border-color: var(--gold); color: var(--gold); }
body.no-scroll { overflow: hidden; }
.disclaimer { margin-top: 2.6rem; max-width: 82ch; font-size: 15px; line-height: 1.8; color: var(--cream-70); }
.disclaimer::before { content: ""; display: block; width: 40px; height: 1px; background: var(--cream-15); margin-bottom: 1.1rem; }
/* saut de ligne forcé après la virgule, mais uniquement quand la place le permet */
.disclaimer br { display: none; }
@media (min-width: 860px) { .disclaimer br { display: inline; } }

/* ---------- Services ---------- */
.svc { border-top: 1px solid var(--cream-15); }
.svc-row {
  display: grid; grid-template-columns: 3.2rem 1fr 1.15fr; gap: clamp(1rem, 3vw, 3rem);
  padding: 2.2rem 0; border-bottom: 1px solid var(--cream-15);
  transition: transform .25s cubic-bezier(.33, 1, .68, 1);
}
.svc-row:hover { transform: translateX(10px); }
.svc-row:hover .svc-name { color: var(--gold); }
.svc-num { font-size: .82rem; letter-spacing: .1em; color: var(--gold); padding-top: .55rem; }
.svc-name { font-family: var(--display); font-size: clamp(1.5rem, 2.5vw, 2.15rem); line-height: .95; text-transform: uppercase; transition: color .25s ease; }
.svc-benefit { font-size: 1.05rem; color: var(--cream); margin: 0 0 .5rem; }
.svc-detail { font-size: .95rem; color: var(--cream-55); margin: 0; }

/* ---------- À propos ---------- */
.about-grid { display: grid; grid-template-columns: 250px 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

/* Carte d'identité : portrait compact, nom et rôle dans une hiérarchie claire */
.idcard { position: relative; width: 100%; max-width: 210px; }
@media (min-width: 900px) { .idcard { position: sticky; top: 7.5rem; } }
.portrait { position: relative; }
.portrait img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; position: relative; z-index: 2; }
.portrait::after { content: ""; position: absolute; inset: 10px -10px -10px 10px; border: 1px solid var(--gold); z-index: 1; }
h2.name, .idcard .name {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: .95; letter-spacing: -.01em;
  margin: 1.6rem 0 .35rem;
}
.idcard .role {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(.82rem, 1.05vw, .95rem); letter-spacing: .2em;
  color: var(--gold); margin: 0;
}
.about-block { margin-top: 3.4rem; }
.about-block h3 { margin-bottom: 1.2rem; }
.about-block p { color: var(--cream-70); margin: 0 0 1.1rem; max-width: 62ch; }
.pull {
  margin: 3.4rem 0;
  font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1;
  color: var(--gold); text-transform: uppercase;
}
.steps { list-style: none; padding: 0; margin: 0; }
.steps li { padding: 1.5rem 0; border-bottom: 1px solid rgba(245, 222, 192, .12); }
.steps li:first-child { border-top: 1px solid rgba(245, 222, 192, .12); }
.steps .st { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 .5rem; }
.steps p { margin: 0; color: var(--cream-70); max-width: 62ch; }

/* ---------- Contact ---------- */
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem 2.4rem; margin-top: 2.6rem; }
.link-coral { color: var(--coral); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.link-coral:hover { color: var(--gold); }
.link-linkedin { color: #4A9EE8; border-bottom: 1px solid currentColor; padding-bottom: 2px; display: inline-flex; align-items: center; gap: .45rem; }
.link-linkedin:hover { color: #7DBDF2; }
.mail { unicode-bidi: bidi-override; direction: rtl; cursor: pointer; }

/* ---------- Pages légales ---------- */
.legal { padding-top: clamp(8rem, 15vh, 11rem); padding-bottom: var(--section-y); }
.legal h1 { margin-bottom: 2.5rem; }
.legal h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 3rem 0 1rem; }
.legal h3 { font-size: 1.15rem; margin: 2rem 0 .6rem; }
.legal p, .legal li { color: var(--cream-70); max-width: 68ch; }
.legal ul { padding-left: 1.2rem; }
.legal strong { color: var(--cream); font-weight: 500; }
.legal .todo { color: var(--coral); }

/* ---------- Retour en haut ---------- */
.to-top {
  position: fixed; right: clamp(1rem, 3vw, 2.4rem); bottom: clamp(1rem, 3vw, 2.4rem);
  z-index: 70; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--cream-15); background: rgba(28, 28, 30, .82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--cream-70); display: grid; place-items: center; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, border-color .2s ease, color .2s ease;
}
.to-top.on { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--gold); padding-block: 3rem; }
.foot-in { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline; justify-content: space-between; }
.foot .brand { font-family: var(--display); font-size: 1.2rem; letter-spacing: .02em; }
.foot .tag, .foot a { font-size: .88rem; color: var(--cream-45); }
.foot a:hover { color: var(--gold); }
.foot-links { display: flex; gap: 1.4rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-grid, .sec-grid, .about-grid { grid-template-columns: 1fr; }
  .sec-grid.rev .media, .sec-grid.rev .txt { order: initial; }

  /* --- Ordre de lecture mobile ---------------------------------
     display:contents fait remonter les enfants au niveau de la
     grille, ce qui permet de les réordonner sans dupliquer le HTML.
     Le row-gap passe à 0 : les marges des éléments reprennent la
     main, sinon chaque paragraphe hériterait de l'écart de colonne.
  ------------------------------------------------------------- */
  .hero-grid, .sec-grid { row-gap: 0; }

  /* Hero : titre, accroches, comparateur, puis bouton et références */
  .hero-col { display: contents; }
  .hero-col .label { order: 1; }
  .hero-col h1     { order: 2; }
  .hero-col .sub1  { order: 3; }
  .hero-col .sub2  { order: 4; margin-bottom: 0; }
  .hero .ba        { order: 5; margin: 1.6rem 0 2.2rem; }
  .hero-col .btn   { order: 6; justify-self: start; }
  .hero-col .trust { order: 7; }

  /* Sections de travaux non inversées : texte, vidéo, puis métadonnées */
  .sec-grid:not(.rev) .txt        { display: contents; }
  .sec-grid:not(.rev) .txt .kicker { order: 1; }
  .sec-grid:not(.rev) .txt h2      { order: 2; margin-bottom: 1.2rem; }
  .sec-grid:not(.rev) .txt .lede   { order: 3; }
  .sec-grid:not(.rev) .media       { order: 4; margin: 1.8rem 0 0; }
  .sec-grid:not(.rev) .txt .meta   { order: 5; }

  /* Sections inversées : le texte précède déjà la vidéo, on garde */
  .sec-grid.rev .media { margin-top: 1.8rem; }
  .svc-row { grid-template-columns: 2.4rem 1fr; }
  .svc-row > div:last-child { grid-column: 2; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg); padding: 1.6rem var(--gutter) 2rem;
    border-bottom: 1px solid var(--cream-08);
  }
  .nav-toggle { display: block; margin-left: auto; }
  .idcard { max-width: 190px; }
}
/* --- Vitrine sur petit écran ---------------------------------
   Sur desktop les vignettes sont dimensionnées par leur hauteur,
   la largeur découlant du ratio. Sur mobile on inverse : la
   largeur est une fraction de l'écran et la hauteur suit. Sans
   ça, trois vignettes 9/16 à hauteur fixe dépassent la largeur
   disponible et la troisième passe à la ligne.
------------------------------------------------------------- */
@media (max-width: 720px) {
  .show-row { gap: .5rem; }
  .show-row .r-16x9 { height: auto; flex: 0 0 100%; width: 100%; }
  .show-row .r-9x16 { height: auto; flex: 0 0 calc((100% - 1rem) / 3); width: calc((100% - 1rem) / 3); }
  /* sur mobile, une pièce 16/9 par ligne reste plus lisible */
  .show-row.trio .show-card { flex: 0 0 100%; width: 100%; }
  .show-card .tag { font-size: 9px; letter-spacing: .1em; left: .45rem; bottom: .45rem; }
  .show-card .dur { font-size: 9px; right: .45rem; bottom: .45rem; }
  .show-card .play { width: 34px; height: 34px; }
  .showcase .meta { gap: .3rem .9rem; }
}

@media (max-width: 560px) {
  .thumbs { grid-template-columns: 1fr 1fr; }
  .svc-row:hover { transform: none; }
  /* le survol n'existe pas au doigt : on évite l'effet figé après un tap */
  .show-card:hover, button.short:hover { transform: none; box-shadow: none; }
  .show-card:hover img, button.short:hover img { transform: none; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .intro-cover, .intro-mover { display: none !important; }
  .logo { opacity: 1 !important; }
  /* Sans animation, le bandeau redevient un simple défilement
     horizontal natif : le contenu reste atteignable. */
  .marquee { overflow-x: auto; touch-action: auto; cursor: default; }
  .marquee-track { animation: none !important; }
}