/* Base commune des 5 propositions de direction artistique (27/10/2026, demande de Romain)
   Plus de rouge (sauf ce qui est rouge par nature : la tête de lecture de la table de montage, var(--rec)),
   plus de numéros de chaîne, plus de REC, bouton « Réserver un appel » simple, sélecteur « Langue / Language ». */
:root { --blood: var(--bone); --accent: var(--bone); }
::selection { background: var(--bone); color: var(--night); }
:focus-visible { outline-color: var(--bone); }

/* plus de numéros ni de barres rouges dans les menus */
.topnav a::after { background: var(--bone); }
.topnav a .ch, .menu a.menu-ch .ch, .channel-num, .monitor-ch { display: none !important; }
.kicker .ch { color: var(--bone-faint); }

/* bouton « Réserver un appel » simple */
.rec-btn { gap: 0; }
.rec-dot { display: none !important; }

/* sélecteur de langue : « Langue » qui s'ouvre sur Français / English (US) */
.lang-menu { position: relative; }
.lang-menu summary {
  list-style: none; cursor: pointer; user-select: none;
  font: 700 12px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--bone-soft);
  padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 6px;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu[open] summary, .lang-menu summary:hover { color: #fff; border-color: var(--bone-soft); }
.lang-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 170px;
  display: grid; padding: 6px; border: 1px solid var(--line-2); border-radius: 8px; background: rgba(5, 7, 11, .96);
}
.lang-list a { padding: 10px 12px; border-radius: 5px; font: 600 14px/1 var(--f-ui); color: var(--bone-soft); }
.lang-list a:hover { background: rgba(244, 241, 233, .08); color: #fff; }
.lang-list a[aria-current="true"] { color: #fff; }
.lang-list a[aria-current="true"]::after { content: " ✓"; }

/* trait de l intro : plus de rouge (signalé le 27/10) */
.la-streak { display: none !important; }

/* =====================================================================================
   Proposition « 2 · Tungstène » (27/10/2026)
   La lumière chaude d'un projecteur de plateau (tungstène, 3200 K) dans la nuit.
   Esprit feuille de service et fiche technique de tournage : grille suisse stricte,
   grotesk précise (Archivo), légendes techniques en IBM Plex Mono, filets fins,
   tout aligné à gauche. Un seul accent : l'ambre tungstène, mat, en très petite dose
   (un filet, un mot, l'état actif).
   Élément signature : « la poursuite », un projecteur qui glisse sur son rail, dans la
   marge, jusqu'à la chaîne active et l'éclaire d'une flaque de lumière chaude.
   Chargée APRÈS /site-v6.css et base.css.
   ===================================================================================== */

:root {
  --night: #05070b;
  --bone: #f3efe7;
  --bone-soft: #d4cfc5;
  --bone-faint: #9b968c;
  --line: rgba(243, 239, 231, .11);
  --line-2: rgba(243, 239, 231, .22);
  --tungsten: #dda25e;                 /* ambre tungstène, mat */
  --tungsten-rgb: 221, 162, 94;
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-tech: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-osd: var(--f-tech);
  --gutter: clamp(18px, 4.2vw, 64px);
}

body { font: 400 16px/1.6 var(--f-sans); color: var(--bone); }
::selection { background: var(--tungsten); color: var(--night); }
:focus-visible { outline: 1px solid var(--tungsten); outline-offset: 3px; }

/* la table de montage garde sa typo d'origine (Romain l'aime telle qu'elle est) */
.nle { --f-ui: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }

/* fond : on garde la lueur d'écran bleutée et les lignes de balayage, à peine plus sombres
   pour que la lumière chaude se détache (nuit bleue + tungstène, le contraste classique du plateau) */
body::before { background: radial-gradient(80% 65% at 50% 38%, #0f1930 0%, #070c17 52%, #030407 100%); }
.livery-fx::before {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .026) 0 1px, transparent 1px 3px),
    radial-gradient(130% 110% at 50% 50%, transparent 60%, rgba(0, 0, 0, .66) 100%);
}

/* ------------------------------------------------------------------ légendes techniques */
.tech, .kicker, .channel-tag, .ch-spec dt, .direct-k, .sheet dt {
  font-family: var(--f-tech); font-weight: 500; font-style: normal;
  letter-spacing: .16em; text-transform: uppercase;
}

/* triangle de lecture dessiné en CSS (jamais d'émoji, même sur iPhone) */
.tri {
  display: inline-block; flex: none; width: 7px; height: 8px;
  font-size: 0 !important; line-height: 0; color: inherit;
  background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ------------------------------------------------------------------ boutons */
.btn {
  min-height: 50px; padding: 0 24px; gap: 12px; border-radius: 2px;
  font: 600 12.5px/1 var(--f-ui); letter-spacing: .1em;
}
.btn-solid { background: var(--bone); border-color: var(--bone); color: var(--night); }
.btn-solid:hover { background: #fff; border-color: #fff; transform: none; }
.btn:not(.btn-solid) .tri { color: var(--bone-faint); transition: color .2s; }
.btn:not(.btn-solid):hover .tri { color: var(--tungsten); }

.play-link {
  gap: 12px; padding: 12px 0;
  font: 600 12px/1 var(--f-ui); letter-spacing: .1em;
  border-bottom: 1px solid var(--line-2);
}
.play-link .tri { color: var(--bone-faint); width: 6px; height: 7px; transition: color .2s; }
.play-link:hover { border-color: var(--tungsten); gap: 16px; }
.play-link:hover .tri { color: var(--tungsten); }

/* ------------------------------------------------------------------ barre haute */
.topbar.scrolled {
  background: rgba(5, 7, 11, .88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}
.topnav { gap: 30px; }
.topnav a { font: 500 14.5px/1 var(--f-ui); letter-spacing: 0; color: var(--bone-soft); }
.topnav a:hover, .topnav a[aria-current="page"] { color: var(--bone); }
.topnav a::after { background: var(--tungsten); bottom: -1px; }
.lang-menu summary {
  font: 500 10.5px/1 var(--f-tech); letter-spacing: .16em;
  padding: 12px 12px; border-radius: 2px; color: var(--bone-soft);
}
.lang-list { border-radius: 2px; background: rgba(5, 7, 11, .98); padding: 4px; }
.lang-list a { border-radius: 0; font: 500 14px/1 var(--f-ui); }
.lang-list a[aria-current="true"]::after { content: ""; display: inline-block; width: 14px; height: 1px; margin-left: 10px; vertical-align: middle; background: var(--tungsten); }
.rec-btn {
  height: 38px; padding: 0 16px; border-radius: 2px;
  border-color: rgba(243, 239, 231, .38);
  font: 600 12px/1 var(--f-ui); letter-spacing: .1em;
}
.menu-btn { border-radius: 2px; }

/* menu téléphone : intitulés de fiche, alignés à gauche */
.menu { background: rgba(5, 7, 11, .985); gap: 0; }
.menu a.menu-ch {
  padding: 14px 0; border-bottom-color: var(--line);
  font: 700 clamp(2rem, 9vw, 3.2rem)/1.02 var(--f-display); font-stretch: 82%;
  letter-spacing: -.03em; text-transform: none;
}
.menu-foot { font: 500 15px/1.4 var(--f-ui); }

/* barre de contact rapide (téléphone) */
.quickbar { background: rgba(5, 7, 11, .94); border-top-color: var(--line-2); }
.qb { border-radius: 2px; font: 600 13.5px/1 var(--f-ui); border-color: rgba(243, 239, 231, .3); }
.qb-main { background: var(--bone); border-color: var(--bone); color: var(--night); }

/* ------------------------------------------------------------------ HERO : tout à gauche, sur la grille */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; place-items: initial; align-items: center;
  padding: calc(var(--topbar-h) + 28px) var(--gutter) clamp(20px, 3vw, 34px);
}
.hero-media video { opacity: .5; }
.intro.intro-done .hero-media video { opacity: .5; }
.hero-shade {
  background:
    linear-gradient(90deg, rgba(5, 7, 11, .9) 0%, rgba(5, 7, 11, .64) 44%, rgba(5, 7, 11, .3) 100%),
    linear-gradient(180deg, rgba(5, 7, 11, .7) 0%, transparent 24%, transparent 60%, var(--night) 100%);
}
.hero-inner { width: 100%; max-width: var(--maxw); margin: 0 auto; text-align: left; }
.logo-anim { width: min(100%, 640px); }
.hero-tagline {
  margin: clamp(28px, 3.2vw, 44px) 0 0;
  font: 650 clamp(1.55rem, 2.7vw, 2.4rem)/1.08 var(--f-sans); letter-spacing: -.025em;
}
.hero-value {
  margin: 14px 0 0; max-width: 40ch;
  font: 400 clamp(1rem, 1.3vw, 1.16rem)/1.5 var(--f-sans); color: var(--bone-soft);
}
.hero-ctas { justify-content: flex-start; margin-top: 30px; gap: 10px; }

/* l'intro : plus de trait rouge ; l'allumage devient un filament de tungstène qui chauffe */
.la-streak, .la-cut { display: none !important; }
.crt i { background: #ffdcae; box-shadow: 0 0 18px 4px rgba(var(--tungsten-rgb), .45); }
.hero-flash { background: #ffd9a8; }

/* feuille de service en pied de hero (remplace l'OSD caméscope) */
.sheet {
  position: relative; width: 100%; max-width: var(--maxw); margin: 44px auto 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line-2);
}
.sheet::before { /* le filet allumé : un segment ambre en tête de règle */
  content: ""; position: absolute; left: 0; top: -1px; width: 56px; height: 1px; background: var(--tungsten);
}
.sheet-cell { min-width: 0; padding: 14px 16px 2px; border-left: 1px solid var(--line); }
.sheet-cell:first-child { padding-left: 0; border-left: 0; }
.sheet dt { font-size: 10px; line-height: 1; color: var(--bone-faint); }
.sheet dd { margin: 9px 0 0; font: 500 14.5px/1.3 var(--f-sans); color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet .hero-sub { margin: 0; font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
.sheet-time { color: var(--bone-faint); margin-left: 6px; }
.intro .sheet { animation: fade-in .6s 2.3s both; }

/* le rail : un filet vertical dans la marge gauche, du haut de l'accueil jusqu'au contact (ordinateur) */
.hero-lamp { display: none; }
@media (min-width: 1024px) {
  main { position: relative; }
  main::before {
    content: ""; position: absolute; z-index: 1; pointer-events: none;
    top: var(--topbar-h); bottom: 0; width: 1px; background: var(--line);
    left: calc(max(var(--gutter), (100% - var(--maxw)) / 2) - var(--gutter) * .5);
  }
  .channels-grid::before { display: none; }
  .hero-inner { position: relative; }
  /* dans le hero, la lampe est allumée le long du logo et de la promesse */
  .hero-lamp {
    display: block; position: absolute; z-index: 2; pointer-events: none;
    left: calc(var(--gutter) * -.5 - 1px); top: 0; bottom: 0; width: 3px; background: var(--tungsten);
  }
  .lamp-k, .spot-k { /* plaque de la lampe, côté marge */
    position: absolute; left: -17px; top: 0;
    writing-mode: vertical-rl; white-space: nowrap;
    font: 500 9.5px/1 var(--f-tech); letter-spacing: .2em; color: rgba(var(--tungsten-rgb), .85);
  }
  /* la flaque de lumière chaude sur le logo, comme une poursuite sur scène */
  .hero-inner::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: -14%; top: -30%; width: 86%; height: 150%;
    background: radial-gradient(ellipse 50% 50% at 50% 50%,
      rgba(var(--tungsten-rgb), .2) 0%, rgba(var(--tungsten-rgb), .1) 40%, rgba(var(--tungsten-rgb), 0) 72%);
  }
  .intro .hero-lamp { animation: lamp-warm 1.2s .4s ease-out both; }
  .intro .hero-inner::before { animation: fade-in 1.4s .5s ease-out both; }
}
/* la lampe monte en température comme un filament de tungstène : du rouge sombre à l'ambre, sans clignoter */
@keyframes lamp-warm { 0% { opacity: 0; background: #5a2a12; } 45% { opacity: .8; background: #b3672f; } 100% { opacity: 1; background: var(--tungsten); } }

/* ------------------------------------------------------------------ en-têtes de rubrique (filet + légende) */
.kicker {
  position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin: 0; padding-top: 14px; border-top: 1px solid var(--line-2);
  font-size: 10.5px; line-height: 1; color: var(--bone-soft);
}
.kicker::before { content: ""; position: absolute; left: 0; top: -1px; width: 56px; height: 1px; background: var(--tungsten); }
.kicker .osd-font.red { display: none; }
.kicker-meta { color: var(--bone-faint); }

/* ------------------------------------------------------------------ les chaînes : fiches de tournage */
.channels { padding-top: clamp(56px, 8vw, 110px); }
.channels .section-head { margin-bottom: clamp(26px, 4vw, 48px); }
.channel { padding: 30px 0 46px; border-top: 0; }
.channel:last-child { border-bottom: 0; }
.channel-tag {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
  font-size: 10.5px; line-height: 1; color: var(--bone-faint);
  transition: color .4s;
}
.channel-tag::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.channel-name {
  font: 700 clamp(2.6rem, 11vw, 4.2rem)/.95 var(--f-display); font-stretch: 80%;
  letter-spacing: -.03em; text-transform: none; color: var(--bone);
}
.channel-line {
  margin-top: 14px;
  font: 600 clamp(1.1rem, 4.4vw, 1.4rem)/1.25 var(--f-sans); letter-spacing: -.012em;
}
.channel-desc { margin: 16px 0 22px; max-width: 46ch; font-size: 15.5px; line-height: 1.6; color: var(--bone-soft); }
.channel-media { margin-top: 22px; }
.frame-osd, .monitor-osd { display: none !important; }

/* fiche technique de chaque chaîne */
.ch-spec {
  display: grid; grid-template-columns: 1fr; margin: 0 0 18px; max-width: 580px;
  border-top: 1px solid var(--line);
}
.ch-spec > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ch-spec dt { font-size: 10px; line-height: 1.2; color: var(--bone-faint); }
.ch-spec dd { margin: 0; font: 500 14px/1.35 var(--f-sans); color: var(--bone); }
.channel-links { display: flex; flex-wrap: wrap; gap: 0 28px; }

@media (min-width: 700px) {
  .ch-spec { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ch-spec > div { display: block; padding: 11px 14px 0 0; border-bottom: 0; }
  .ch-spec > div + div { padding-left: 14px; border-left: 1px solid var(--line); }
  .ch-spec dd { margin-top: 8px; }
  .ch-spec { padding-bottom: 4px; }
}

/* ordinateur : la liste à gauche, le moniteur fixe à droite, la poursuite dans la marge */
@media (min-width: 1024px) {
  .channels-grid { position: relative; isolation: isolate; grid-template-columns: minmax(0, .92fr) minmax(0, 1.18fr); }
  .channel { padding: 0; }
  .channel-name {
    font-size: clamp(3.1rem, 4.9vw, 5.1rem);
    color: rgba(243, 239, 231, .17); -webkit-text-stroke: 0 transparent;
  }
  .channel.is-active .channel-name { color: var(--bone); -webkit-text-stroke: 0 transparent; }
  .channel-head:hover .channel-name { color: rgba(243, 239, 231, .5); -webkit-text-stroke: 0 transparent; }
  .channel.is-active .channel-head:hover .channel-name { color: var(--bone); }
  .channel.is-active .channel-tag { color: var(--tungsten); }
  .channel .ch-spec { opacity: .28; transform: translateY(10px); transition: opacity .5s, transform .7s var(--ease-out); }
  .channel.is-active .ch-spec { opacity: 1; transform: none; transition-delay: .36s; }
  .channel .channel-line, .channel .channel-desc, .channel .play-link { opacity: .26; }
  .channel.is-active .channel-line, .channel.is-active .channel-desc, .channel.is-active .play-link { opacity: 1; }

  /* le rail, dans la marge gauche */
  .channels-grid::before {
    content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
    left: calc(var(--gutter) * -.5); width: 1px; background: var(--line);
  }
}

/* élément signature : la poursuite. Elle glisse le long du rail jusqu'à la chaîne active
   et pose une flaque de lumière chaude sur son intitulé. */
.spot { display: none; }
@media (min-width: 1024px) {
  @supports selector(:has(*)) {
    .spot {
      display: block; position: absolute; z-index: -1; pointer-events: none;
      left: calc(var(--gutter) * -.5); top: 10%; width: 0; height: 0;
      transition: top 1.1s var(--ease-io);
    }
    .channels-grid:has(.channel[data-ch="2"].is-active) .spot { top: 30%; }
    .channels-grid:has(.channel[data-ch="3"].is-active) .spot { top: 50%; }
    .channels-grid:has(.channel[data-ch="4"].is-active) .spot { top: 70%; }
    .channels-grid:has(.channel[data-ch="5"].is-active) .spot { top: 90%; }
    .spot-head { /* la portion de rail éclairée, le long de la fiche active */
      position: absolute; z-index: 2; left: -1px; top: -170px; width: 3px; height: 340px; background: var(--tungsten);
    }
    .spot-k { top: -170px; }
    .spot-pool { /* la flaque de lumière chaude, centrée sur l'intitulé */
      position: absolute; left: calc(var(--gutter) * .5 - 160px); top: -400px; width: 980px; height: 640px;
      background: radial-gradient(ellipse 50% 50% at 50% 50%,
        rgba(var(--tungsten-rgb), .17) 0%, rgba(var(--tungsten-rgb), .085) 42%, rgba(var(--tungsten-rgb), 0) 72%);
    }
  }
}
@media (prefers-reduced-motion: reduce) { .spot { transition: none; } }

/* le moniteur : cadre fin, la lumière de la poursuite effleure son bord gauche */
.monitor-screen { outline: 1px solid var(--line-2); outline-offset: 12px; box-shadow: -70px 0 140px -80px rgba(var(--tungsten-rgb), .35); }
.monitor-caption {
  align-items: baseline; margin-top: 26px;
  font: 500 10px/1.4 var(--f-tech); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-faint);
}
.monitor-caption [data-monitor-label] { font: 600 13.5px/1.2 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--bone); }
.monitor-tech { display: inline-flex; gap: 22px; }
.monitor-tc { color: var(--bone-soft); }

/* ------------------------------------------------------------------ contact : la dernière fiche */
.rec-block {
  max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto;
  padding: clamp(70px, 10vw, 150px) var(--gutter);
  text-align: left; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start;
}
.rec-block .kicker.rec-kicker { justify-content: flex-start; margin-bottom: clamp(28px, 4vw, 52px); }
.rec-block h2 {
  margin: 0; max-width: 13ch;
  font: 700 clamp(2.3rem, 5vw, 4.4rem)/.98 var(--f-display); font-stretch: 84%; letter-spacing: -.022em;
}
.rec-block p.body-copy { margin: 22px 0 28px; text-align: left; max-width: 44ch; }
.rec-actions { justify-content: flex-start; }
.direct {
  display: grid; gap: 0; margin: 36px 0 0; max-width: 560px;
  border-top: 1px solid var(--line); justify-content: stretch;
  font: 500 15px/1.4 var(--f-ui); color: var(--bone);
}
.direct li { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.direct-k { font-size: 10px; line-height: 1.2; color: var(--bone-faint); }
.direct a { border: 0; color: var(--bone); overflow-wrap: anywhere; }
.direct a:hover { color: var(--tungsten); }
@media (min-width: 900px) {
  .rec-block { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: clamp(40px, 6vw, 110px); }
  .rec-block .kicker.rec-kicker { grid-column: 1 / -1; }
  .rec-block h2, .rec-block p.body-copy, .rec-actions { grid-column: 1; }
  .direct { grid-column: 2; grid-row: 2 / span 3; margin-top: 8px; max-width: none; }
}

/* ------------------------------------------------------------------ pied de page */
.footer { border-top: 1px solid var(--line); padding: 48px var(--gutter) 30px; }
.footer-brand img { width: 136px; }
.footer-tag { font: 600 1.05rem/1.25 var(--f-sans); letter-spacing: -.01em; }
.footer-nav { font: 500 14px/1 var(--f-ui); gap: 12px 24px; }
.footer-nav a:hover { color: var(--bone); }
.footer-bottom { font: 500 10px/1.6 var(--f-tech); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-faint); }

/* téléphone et tablette : même rail dans la marge ; la lampe s'allume au passage de chaque fiche
   (animation liée au défilement quand le navigateur sait le faire, sinon lampe à mi-puissance) */
@media (max-width: 1023px) {
  main { position: relative; }
  main::before {
    content: ""; position: absolute; z-index: 1; pointer-events: none;
    top: var(--topbar-h); bottom: 0; left: calc(var(--gutter) * .5); width: 1px; background: var(--line);
  }
  .hero-inner { position: relative; }
  .hero-inner::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: -30%; top: -25%; width: 150%; height: 120%;
    background: radial-gradient(ellipse 50% 50% at 50% 50%,
      rgba(var(--tungsten-rgb), .17) 0%, rgba(var(--tungsten-rgb), .08) 42%, rgba(var(--tungsten-rgb), 0) 72%);
  }
  .hero-lamp {
    display: block; position: absolute; z-index: 2; pointer-events: none;
    left: calc(var(--gutter) * -.5 - 1px); top: 0; bottom: 0; width: 2px; background: var(--tungsten);
  }
  .lamp-k { display: none; }
  .channel { position: relative; }
  .channel::before {
    content: ""; position: absolute; z-index: 2; pointer-events: none;
    left: calc(var(--gutter) * -.5 - 1px); top: 30px; bottom: 46px; width: 2px;
    background: var(--tungsten); opacity: .4;
  }
  @supports (animation-timeline: view()) {
    .channel::before { opacity: 0; animation: lamp-pass linear both; animation-timeline: view(); }
    .channel .channel-tag { animation: tag-pass linear both; animation-timeline: view(); }
  }
}
@keyframes lamp-pass { 0%, 24% { opacity: 0; } 38%, 68% { opacity: 1; } 82%, 100% { opacity: 0; } }
@keyframes tag-pass { 0%, 24% { color: var(--bone-faint); } 38%, 68% { color: var(--tungsten); } 82%, 100% { color: var(--bone-faint); } }
@media (prefers-reduced-motion: reduce) {
  .channel::before, .channel .channel-tag { animation: none !important; }
  .channel::before { opacity: .4; }
}

/* ------------------------------------------------------------------ téléphone */
@media (max-width: 1179px) { /* la barre de contact rapide est affichée : la feuille de service reste au-dessus */
  .hero { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@media (max-width: 899px) {
  .sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 34px; }
  .sheet-base { display: none; }
  .sheet-cell, .sheet-cell:first-child { padding: 12px 12px 12px 0; border-left: 0; }
  .sheet-cell:nth-child(n+3) { border-top: 1px solid var(--line); }
  .sheet-cell:nth-child(2), .sheet-cell:nth-child(5) { padding-left: 12px; border-left: 1px solid var(--line); } /* Base masquée : 1-2 / 4-5 */
  .sheet dd { font-size: 14px; white-space: normal; }
  .sheet-time { display: none; }
}
@media (max-width: 699px) {
  .hero { padding-top: calc(var(--topbar-h) + 18px); }
  .hero-tagline { margin-top: 26px; }
  .hero-ctas .btn { flex: 1 1 auto; }
  .kicker-meta { display: none; }
}

/* 5e chaîne « Sites web » (27/10/2026) : étiquettes Avant / Après posées sur le moniteur */
.monitor-layer .ba-labels { position: absolute; left: 0; right: 0; top: 14%; display: grid; grid-template-columns: 1fr 1fr; pointer-events: none; }
.monitor-layer .ba-labels span { justify-self: center; font: 500 11px/1 "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-soft, #d4cfc5); padding: 6px 10px; border: 1px solid rgba(243,239,231,.22); background: rgba(5,7,11,.7); }
.monitor-layer .ba-labels span:last-child { color: #dda25e; border-color: rgba(221,162,94,.45); }

/* =====================================================================================
   Intégration au site (27/10/2026) : sélecteur « Langue » qui garde la classe .lang
   (script de fabrication et site-v6.js), sans le cadre ni l'overflow des anciens boutons.
   ===================================================================================== */
.lang.lang-menu { display: block; border: 0; border-radius: 0; overflow: visible; }
.lang.lang-menu .lang-list a { display: block; background: none; color: var(--bone-soft); }
.lang.lang-menu .lang-list a:hover { background: rgba(243, 239, 231, .08); color: #fff; }
.lang.lang-menu .lang-list a[aria-current="true"] { background: none; color: #fff; }

/* =====================================================================================
   Pages intérieures (27/10/2026) : Vidéos, Montage, Production IA, Automatisation,
   Sites web, Avant / après, Contact, Merci, Mentions légales, 404, carte NFC.
   Même langue que l'accueil : en-tête façon intitulé de feuille de service (étiquette
   IBM Plex Mono couleur tungstène, titre Archivo condensé, accroche), fiches techniques
   en filets fins et légendes Plex Mono, tout aligné à gauche. Un seul accent, l'ambre
   tungstène, en très petite dose (un filet, une étiquette, l'état actif).
   Plus aucun rouge : les couleurs écrites en dur dans site-v6.css (puces, choix du
   formulaire, barre du lecteur, chargement, étiquettes avant / après) sont remplacées
   ici. Seule la tête de lecture de la table de montage reste rouge (var(--rec)).
   Plus d'incrustation caméscope (OSD, compteurs, REC, neige) hors images et vidéos.
   ===================================================================================== */

/* ------------------------------------------------------------------ typographie commune */
.lead { font-weight: 650; line-height: 1.12; letter-spacing: -.02em; }
body:not(.page-home) .kicker .tri, .nfc .kicker .ch { display: none; }
body:not(.page-home) .section-head .kicker, .split .kicker { margin-bottom: clamp(20px, 2.6vw, 30px); }
/* numéros (fiches, étapes, offres) : en Plex Mono, discrets, jamais en rouge */
.kicker .ch, .kicker .ch.osd-font { font: 500 10.5px/1 var(--f-tech) !important; letter-spacing: .16em; color: var(--bone-faint); }
.fiche-head .kicker { justify-content: flex-start; gap: 14px; }
body:not(.page-home) .kicker { line-height: 1.45; } /* une étiquette longue qui passe sur deux lignes (téléphone) reste lisible */

/* légendes techniques : une seule voix, Plex Mono en capitales espacées */
.reel-caption, .nle-caption, .lb-title, .phone figcaption, .card-type, .ref-type, .ref-kicker,
.ref-bar span, .stats > div > span, .gen-label, .gen-settings dt, .gen-prompt-label, .gen-progress,
.need legend, .field label, .contact-direct small, .offre dt, .offre .prix, .fiche-meta, .mesures th,
.pb-meta, .pb-time, .card-play, .card-sound, .ba-tag, .gen-tag, .gen-sound, .gen-idle, .form-top,
.legal h2, .osd-big, .nfc-where, .nfc-cap, .nfc-foot, .nfc-hint, .nfc-osd, .nfc-links small, .spec b {
  font-family: var(--f-tech); font-weight: 500; font-style: normal; text-transform: uppercase; text-shadow: none;
}
.reel-caption, .nle-caption {
  margin-top: 18px; padding-top: 0;
  font-size: 10.5px; line-height: 1.6; letter-spacing: .16em; color: var(--bone-faint);
}
.reel-caption span:first-child, .nle-caption span:first-child { color: var(--bone-soft); }

/* ------------------------------------------------------------------ en-tête de page : l'intitulé de la feuille de service */
.page-hero { isolation: isolate; padding: calc(var(--topbar-h) + clamp(40px, 6.5vw, 96px)) var(--gutter) clamp(44px, 5.5vw, 80px); }
.page-hero-inner { position: relative; gap: 0; }
.page-hero .kicker, .contact-intro .kicker { color: var(--tungsten); margin-bottom: clamp(26px, 3.6vw, 46px); }
.page-hero h1, .contact-intro h1 {
  margin: 0; max-width: 100%;
  font: 700 clamp(2.9rem, 12.5vw, 7.4rem)/.9 var(--f-display); font-stretch: 78%;
  letter-spacing: -.035em; text-transform: none; color: var(--bone); overflow-wrap: anywhere;
}
.page-hero .lead { margin: clamp(18px, 2.2vw, 28px) 0 0; font-size: clamp(1.3rem, 2.3vw, 2rem); max-width: 30ch; }
.page-hero .body-copy { margin: 14px 0 0; max-width: 52ch; font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.6; }
/* la lampe : le rail s'allume le long de l'intitulé, comme sur l'accueil */
.page-hero-inner::before, .contact-intro::before, .center-page > div::before, .nfc-grid > section:first-child::before {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  left: calc(var(--gutter) * -.5 - 1px); top: 0; bottom: 0; width: 2px; background: var(--tungsten);
}
@media (min-width: 1024px) {
  .page-hero-inner::before, .contact-intro::before, .center-page > div::before, .nfc-grid > section:first-child::before { width: 3px; }
}
/* et une flaque de lumière chaude, plus discrète que sur l'accueil */
.page-hero-inner::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -16%; top: -45%; width: 78%; height: 180%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(var(--tungsten-rgb), .1) 0%, rgba(var(--tungsten-rgb), .045) 42%, rgba(var(--tungsten-rgb), 0) 72%);
}

/* fiche technique de l'en-tête (CAM, FORMAT, LOC…) : filets fins, légende à gauche, valeur à droite */
.spec {
  display: grid; gap: 0; align-content: start; margin: 32px 0 0; max-width: 460px;
  border-top: 1px solid var(--line-2);
  font: 500 12.5px/1.35 var(--f-tech); letter-spacing: .08em; color: var(--bone);
}
.spec > span { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.spec b { min-width: 0; font-size: 10px; line-height: 1.2; letter-spacing: .16em; color: var(--bone-faint); }
@media (min-width: 980px) {
  .page-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(250px, 330px); column-gap: clamp(40px, 6vw, 110px); align-items: end; }
  .page-hero-inner > .kicker { grid-column: 1 / -1; }
  .page-hero-inner > :not(.kicker):not(.spec) { grid-column: 1; }
  .page-hero-inner > .spec { grid-column: 2; grid-row: 2 / span 4; align-self: end; margin: 0; max-width: none; }
}

/* mention « tout est généré par IA », mentions en anglais : un trait de lumière, pas un cadre */
.note {
  margin-top: 22px; padding: 4px 0 4px 14px; gap: 0;
  border: 0; border-left: 2px solid var(--tungsten); border-radius: 0;
  font: 500 14.5px/1.5 var(--f-sans); color: var(--bone-soft);
}

.note[hidden] { display: none; } /* la mention anglaise des mentions légales restait visible en français */

/* ------------------------------------------------------------------ titres de rubrique */
.section-head h2, .split h2 {
  margin: 0;
  font: 700 clamp(2.1rem, 4.6vw, 4rem)/.98 var(--f-display); font-stretch: 84%;
  letter-spacing: -.022em; text-transform: none; color: var(--bone);
}
.split h2 { margin-bottom: 18px; }
.section-head .lead { margin-top: 16px; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.35; font-weight: 500; letter-spacing: -.005em; color: var(--bone-soft); max-width: 62ch; }
.section-head .body-copy { max-width: 56ch; }
.section-head .sub-links { margin-top: 18px; }

/* ------------------------------------------------------------------ grilles en filets (services, offres, chiffres) */
.grid-4 { gap: 0; background: none; border: 0; border-top: 1px solid var(--line-2); }
.grid-4 > div { background: none; padding: 22px 0 30px; border-bottom: 1px solid var(--line); min-width: 0; }
.grid-4 .num, .steps .num, .offre .num {
  display: block; font: 500 10.5px/1 var(--f-tech); letter-spacing: .16em; color: var(--bone-faint);
}
.grid-4 h3 {
  margin: 16px 0 10px;
  font: 700 clamp(1.3rem, 1.8vw, 1.55rem)/1.08 var(--f-display); font-stretch: 88%;
  letter-spacing: -.015em; text-transform: none;
}
.grid-4 p { font-size: .97rem; line-height: 1.55; }
@media (min-width: 700px) {
  .grid-4 > div { padding: 24px 24px 32px 0; }
  .grid-4 > div:nth-child(2n) { padding-left: 24px; border-left: 1px solid var(--line); }
}
@media (min-width: 1100px) {
  .grid-4:not(.split .grid-4) > div { padding: 26px 26px 34px 0; border-left: 0; }
  .grid-4:not(.split .grid-4) > div + div { padding-left: 26px; border-left: 1px solid var(--line); }
}
/* grille de 2 colonnes imposée dans la page (Sites web, « Ce qu'on ne vend pas ») */
.split .grid-4 > div { padding: 22px 16px 28px 0; }
.split .grid-4 > div:nth-child(2n) { padding-left: 16px; border-left: 1px solid var(--line); }
@media (max-width: 699px) { .split .grid-4 h3 { font-size: 1.12rem; } .split .grid-4 p { font-size: .92rem; } }

/* chiffres de l'expérience (Automatisation) */
.stats { gap: 0; background: none; border: 0; border-top: 1px solid var(--line-2); }
.stats > div { background: none; padding: 22px 18px 24px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.stats > div:nth-child(2n) { padding-left: 18px; border-left: 1px solid var(--line); }
.stats b { font: 700 clamp(2.2rem, 3.8vw, 3.2rem)/1 var(--f-display); font-stretch: 80%; letter-spacing: -.03em; overflow-wrap: anywhere; }
.stats > div > span { margin-top: 12px; font-size: 10px; line-height: 1.45; letter-spacing: .16em; color: var(--bone-faint); }

/* ------------------------------------------------------------------ étapes (1, 2, 3) */
.steps { border-top: 1px solid var(--line-2); }
.steps li { grid-template-columns: 44px 1fr; align-content: start; gap: 8px 14px; padding: 24px 0; border-top: 0; border-bottom: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps .num { padding-top: 7px; }
.steps h3 { font: 650 clamp(1.15rem, 1.8vw, 1.45rem)/1.2 var(--f-sans); letter-spacing: -.015em; }
.steps p { font-size: .98rem; line-height: 1.55; }
.offre dd a:hover, .steps p a:hover { border-color: var(--tungsten); }
@media (min-width: 900px) {
  .steps { gap: 0; }
  .steps li, .steps li:last-child { grid-template-columns: minmax(0, 1fr); padding: 24px 28px 6px 0; border-bottom: 0; }
  .steps li + li, .steps li + li:last-child { padding-left: 28px; border-left: 1px solid var(--line); }
  .steps .num { padding-top: 0; margin-bottom: 8px; }
}

/* ------------------------------------------------------------------ cartes des réalisations (Vidéos) */
.card-media { background: rgba(5, 7, 11, .6); }
.card-play {
  left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 9px; background: rgba(5, 7, 11, .62);
  font-size: 10px; line-height: 1; letter-spacing: .16em; color: var(--bone);
}
.card-play .tri { width: 6px; height: 7px; }
.card-sound { border-radius: 2px; padding: 6px 8px; font-size: 10px; letter-spacing: .14em; }
.card-info { padding: 14px 0 6px; border-bottom-color: var(--line); transition: border-color .25s; }
.card:hover .card-info, .card:focus-visible .card-info { border-color: var(--tungsten); }
.card-title {
  font: 700 clamp(1.3rem, 1.9vw, 1.65rem)/1.02 var(--f-display); font-stretch: 84%;
  letter-spacing: -.02em; text-transform: none;
}
.card-type { font-size: 10px; line-height: 1.5; letter-spacing: .14em; color: var(--bone-faint); }
.card-ai .card-media::after { font: 500 10px/1 var(--f-tech); letter-spacing: .16em; padding: 6px 7px; border-color: rgba(243, 239, 231, .45); border-radius: 0; }

/* liste « Ce qu'on filme » : étiquettes de plan */
.chips li { padding: 11px 14px; border-radius: 2px; border-color: var(--line-2); font: 500 11px/1 var(--f-tech); letter-spacing: .14em; color: var(--bone-soft); }

/* ------------------------------------------------------------------ lecteur vidéo : plus d'incrustation caméscope */
.player-osd { display: none !important; }
.player-big { background: radial-gradient(60% 60% at 30% 60%, rgba(5, 7, 11, .1), rgba(5, 7, 11, .5)); }
.player-big .pb-label {
  gap: 12px; padding: 0 24px; min-height: 52px; border: 1px solid rgba(243, 239, 231, .55); border-radius: 2px;
  background: rgba(5, 7, 11, .5); text-shadow: none;
  font: 600 12.5px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--bone);
}
.player-big .pb-label .tri { width: 7px; height: 8px; }
.player-big:hover .pb-label { background: var(--bone); border-color: var(--bone); color: var(--night); }
.player-big .pb-meta { left: 30px; bottom: 24px; padding: 7px 9px; background: rgba(5, 7, 11, .7); font-size: 10.5px; line-height: 1; letter-spacing: .16em; color: var(--bone-soft); opacity: 1; }
.pb-time { font-size: 11.5px; line-height: 1; letter-spacing: .06em; text-transform: none; min-width: 96px; }
.pb-range::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--tungsten) var(--p), rgba(243, 239, 231, .25) var(--p)); }
.pb-range::-moz-range-progress { background: var(--tungsten); }
.pb-sound, .pb-q { border-radius: 2px; border-color: rgba(243, 239, 231, .4); }
.player.muted .pb-sound { border-color: rgba(var(--tungsten-rgb), .75); }
.pb-q { font: 500 11px/1 var(--f-tech); letter-spacing: .08em; }
.pb-qmenu { border-radius: 2px; border-color: var(--line-2); }
.pb-qmenu button { border-radius: 0; font: 500 13px/1.2 var(--f-ui); }
.pb-qmenu button[aria-checked="true"] { box-shadow: inset 2px 0 0 var(--tungsten); }
.player-load span { border-width: 2px; border-color: rgba(243, 239, 231, .18); border-top-color: var(--tungsten); }

/* visionneuse */
.lb-title { font-size: 10.5px; line-height: 1.5; letter-spacing: .16em; color: var(--bone-faint); }
.lb-title-text { color: var(--bone); }
.lb-close { border-radius: 2px; font: 300 26px/1 var(--f-ui); }

/* ------------------------------------------------------------------ téléphones (formats verticaux) */
.phone figcaption { margin-top: 14px; font-size: 10px; letter-spacing: .14em; color: var(--bone-soft); }
.phone figcaption b { font: 500 10px/1.4 var(--f-tech); letter-spacing: .14em; color: var(--bone-faint); }

/* ------------------------------------------------------------------ références et cartes « Ils nous ont fait confiance » */
.ref-shot { border-radius: 2px; border-color: var(--line-2); }
.ref-bar { background: #0a0d13; }
.ref-bar span { font-size: 9.5px; letter-spacing: .12em; }
.ref-info { flex-direction: column; align-items: flex-start; gap: 7px; padding: 14px 0 10px; }
.ref-name {
  font: 700 clamp(1.3rem, 1.9vw, 1.65rem)/1.02 var(--f-display); font-stretch: 84%;
  letter-spacing: -.02em; text-transform: none;
}
.ref-type { font-size: 10px; line-height: 1.5; letter-spacing: .14em; color: var(--bone-faint); text-align: left; }
.ref-go { font: 600 12px/1 var(--f-ui); letter-spacing: .1em; color: var(--bone-soft); }
.ref:hover .ref-info, .ref:focus-visible .ref-info { border-color: var(--tungsten); }
.ref-kicker { font-size: 10px; letter-spacing: .14em; color: var(--bone-faint); }

/* ------------------------------------------------------------------ générateur IA : le pupitre */
.gen { background: var(--line); border-color: var(--line); }
.gen-panel, .gen-stage { background: rgba(7, 10, 16, .9); }
.gen-label { font-size: 10px; letter-spacing: .16em; color: var(--bone-faint); }
.gen-settings { border-top: 1px solid var(--line); }
.gen-settings div { font: 500 14px/1.2 var(--f-sans); }
.gen-settings dt { font-size: 10px; letter-spacing: .16em; color: var(--bone-faint); }
.gen-chip { border-radius: 2px; padding: 10px 12px; font: 600 11.5px/1 var(--f-ui); letter-spacing: .1em; }
.gen-chip[aria-selected="true"] { border-color: var(--tungsten); background: rgba(var(--tungsten-rgb), .1); color: var(--bone); }
.gen-tag { top: 12px; padding: 6px 9px; border: 1px solid rgba(243, 239, 231, .45); background: rgba(5, 7, 11, .62); font-size: 10px; line-height: 1; letter-spacing: .16em; }
.gen-idle { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 12px; letter-spacing: .2em; color: var(--bone-faint); }
.gen-sound { border-radius: 2px; font-size: 10px; letter-spacing: .14em; }
.gen-prompt { border-radius: 2px; }
.gen-prompt-label { font-size: 10px; letter-spacing: .18em; }
.gen-prompt-text { font: 400 15px/1.45 var(--f-sans); }
.gen-prompt-text .caret { width: 2px; background: var(--tungsten); animation: none; }
.gen-go { border-radius: 2px; background: var(--bone); color: var(--night); font: 600 12px/1 var(--f-ui); letter-spacing: .1em; padding: 13px 16px; }
.gen-go:hover { background: #fff; }
.gen-progress { font-size: 10.5px; line-height: 1; letter-spacing: .14em; }
.gen-bar { height: 1px; background: var(--line-2); }
.gen-bar i { background: var(--tungsten); }

/* ------------------------------------------------------------------ offres (Sites web) : une fiche par offre */
.offres { gap: clamp(52px, 6vw, 84px) clamp(40px, 5vw, 80px); background: none; border: 0; }
.offre { background: none; padding: 22px 0 0; gap: 16px; border-top: 1px solid var(--line-2); }
.offre h3 {
  font: 700 clamp(1.6rem, 2.6vw, 2.2rem)/1 var(--f-display); font-stretch: 86%;
  letter-spacing: -.02em; text-transform: none;
}
.offre .lead { font-weight: 500; line-height: 1.35; letter-spacing: -.005em; color: var(--bone-soft); }
.offre dl { gap: 0; border-top: 1px solid var(--line); }
.offre dt { padding-top: 14px; font-size: 10px; line-height: 1.4; letter-spacing: .16em; color: var(--bone-faint); }
.offre dd { margin: 6px 0 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.offre .prix { margin: 0; padding-top: 0; border-top: 0; font-size: 10px; letter-spacing: .16em; color: var(--bone-faint); }
.offre .prix b { font: 500 11.5px/1 var(--f-tech); letter-spacing: .14em; color: var(--bone); }
@media (min-width: 900px) {
  .offre.big dl { grid-template-columns: minmax(170px, .26fr) minmax(0, 1fr); }
  .offre.big dt { padding-right: 24px; border-bottom: 1px solid var(--line); }
  .offre.big dd { margin: 0; padding-top: 14px; }
}
.offre dd ul.formules { padding-left: 0; }
.formules li { border-radius: 2px; border-color: var(--line); padding: 14px 16px 16px; }
.formules b { font: 650 .98rem/1.3 var(--f-sans); }
.formules span { font-size: .93rem; line-height: 1.5; }

/* sommaire des offres et délais (Avant / après) */
.sommaire a, .sommaire .chip {
  gap: 10px; padding: 11px 14px; border-radius: 2px; border-color: var(--line-2);
  font: 600 12px/1 var(--f-ui); letter-spacing: .08em;
}
.sommaire a .ch, .sommaire .chip .ch { font: 500 10px/1 var(--f-tech); letter-spacing: .16em; color: var(--bone-faint); }
.sommaire a:hover { border-color: var(--tungsten); }

/* ------------------------------------------------------------------ fiches en fenêtre (Avant / après) */
.fiche-dlg { border-radius: 2px; border-color: var(--line-2); background: #080b11; }
.dlg-close { border-radius: 2px; font: 400 17px/1 var(--f-ui); }
.dlg-close:hover { border-color: var(--tungsten); }
.fiche-head h2 {
  font: 700 clamp(2rem, 4.4vw, 3.6rem)/.95 var(--f-display); font-stretch: 84%;
  letter-spacing: -.025em; text-transform: none;
}
.fiche-dlg .fiche-head h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
.fiche-col h3 {
  margin: 0 0 12px; padding-top: 12px; border-top: 1px solid var(--line-2);
  font: 500 10.5px/1.3 var(--f-tech); letter-spacing: .16em; color: var(--bone-soft);
}
.fiche-col h3 .ch { font: 500 10.5px/1 var(--f-tech); letter-spacing: .16em; color: var(--bone-faint); }
.fiche-meta { font-size: 10.5px; letter-spacing: .14em; }
.fiche-meta a:hover { border-color: var(--tungsten); }
.mesures th { font-size: 10px; letter-spacing: .14em; }
.mesures tr.down td:nth-child(3) { color: var(--tungsten); }
.honnete { border-radius: 2px; }

/* curseur avant / après : étiquettes AVANT en os, APRÈS en tungstène */
.ba, .shot > img, .duo .frame { border-radius: 2px; }
.ba-knob { width: 42px; height: 42px; border-radius: 2px; border-width: 1px; font: 500 15px/1 var(--f-ui); letter-spacing: .06em; }
.ba-range:focus-visible ~ .ba-knob { outline: 1px solid var(--tungsten); outline-offset: 3px; }
.ba-tag { top: 12px; padding: 6px 8px; border-radius: 0; background: rgba(5, 7, 11, .86); font-size: 10px !important; line-height: 1; letter-spacing: .16em; }
.ba-tag b { font-weight: 500; color: var(--bone-soft); }
.ba-tag.av b { color: var(--bone-soft); }
.ba-tag.ap b { color: var(--tungsten); }
/* les deux vidéos côte à côte gardent leur légende AVANT / APRÈS, en Plex Mono */
.duo .frame-osd {
  display: flex !important; left: 12px; top: 12px; right: 12px; justify-content: flex-start; gap: 0;
  font: 500 10px/1 var(--f-tech); letter-spacing: .16em; text-transform: uppercase; text-shadow: none;
}
.duo .frame-osd span { padding: 6px 8px; background: rgba(5, 7, 11, .74); color: var(--bone-soft); }
.duo .frame-osd span + span { color: var(--bone-faint); }
.duo .frame + .frame .frame-osd span:first-child { color: var(--tungsten); }
.duo .frame::after { display: none; } /* captures de pages web : pas de repères de cadre de caméra */

/* ------------------------------------------------------------------ fins de page : la dernière fiche */
body:not(.page-home) .rec-block::before {
  content: ""; grid-column: 1 / -1; height: 1px; margin-bottom: clamp(28px, 4vw, 52px);
  background: linear-gradient(90deg, var(--tungsten) 0 56px, var(--line-2) 56px 100%);
}
body:not(.page-home) .rec-block h2 { max-width: 16ch; font-size: clamp(2.1rem, 4.4vw, 3.8rem); }
@media (min-width: 900px) {
  body:not(.page-home) .rec-block { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; }
  body:not(.page-home) .rec-block h2 { grid-column: 1; grid-row: 2 / span 2; align-self: end; }
  body:not(.page-home) .rec-block p.body-copy { grid-column: 2; grid-row: 2; margin: 0 0 24px; }
  body:not(.page-home) .rec-block .rec-actions { grid-column: 2; grid-row: 3; }
}

/* ------------------------------------------------------------------ contact */
.topbar.solid { background: rgba(5, 7, 11, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom-color: var(--line); }
.contact-page .osd { display: none; } /* l'incrustation caméscope (compteur, batterie, date) */
.contact-page { padding-top: calc(var(--topbar-h) + clamp(40px, 6.5vw, 96px)); }
.contact-grid { max-width: var(--maxw); }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); column-gap: clamp(48px, 7vw, 120px); } }
.contact-intro { position: relative; }
.contact-intro .lead { margin-top: clamp(18px, 2.2vw, 28px); font-size: clamp(1.3rem, 2.3vw, 2rem); }
.contact-direct { margin-top: 36px; border-top: 1px solid var(--line-2); }
.contact-direct li, .contact-direct li:first-child { border-top: 0; border-bottom: 1px solid var(--line); }
.contact-direct a { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 13px 0; }
.contact-direct small { font-size: 10px; line-height: 1.2; letter-spacing: .16em; color: var(--bone-faint); }
.contact-direct span { font: 500 clamp(1rem, 1.4vw, 1.1rem)/1.35 var(--f-sans); color: var(--bone); overflow-wrap: anywhere; transition: color .2s; }
.contact-direct a:hover span { color: var(--tungsten); border-bottom: 0; }

/* le formulaire : la fiche à remplir */
.rec-form { gap: 20px; background: rgba(5, 7, 11, .58); border: 1px solid var(--line); border-top-color: var(--line-2); border-radius: 0; position: relative; }
.rec-form::before { content: ""; position: absolute; left: -1px; top: -1px; width: 56px; height: 1px; background: var(--tungsten); }
.form-top { padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 10.5px; line-height: 1; letter-spacing: .16em; color: var(--bone-soft); }
.need legend, .field label { margin-bottom: 10px; font-size: 10px; line-height: 1.3; letter-spacing: .16em; color: var(--bone-soft); }
.need-opts span { padding: 11px 13px; border-radius: 2px; border-color: var(--line-2); font: 600 12px/1 var(--f-ui); letter-spacing: .08em; }
.need-opts label:hover span { border-color: var(--bone-soft); color: var(--bone); }
.need-opts input:checked + span { border-color: var(--tungsten); background: rgba(var(--tungsten-rgb), .12); color: var(--bone); }
.need-opts input:focus-visible + span { outline: 1px solid var(--tungsten); outline-offset: 2px; }
.field input, .field textarea { border-radius: 2px; border-color: var(--line-2); background: rgba(5, 7, 11, .62); font: 400 16px/1.45 var(--f-sans); }
.field input:focus, .field textarea:focus { border-color: rgba(var(--tungsten-rgb), .85); background: rgba(5, 7, 11, .85); }
.req { color: var(--tungsten); }
.field-hint { margin-top: 8px; font: 500 13.5px/1.45 var(--f-sans); color: var(--tungsten); }
.form-send .osd-font { font: 500 10px/1.3 var(--f-tech) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-faint) !important; }
.rgpd { font-size: 12.5px; }

/* ------------------------------------------------------------------ merci, 404 : même intitulé, aligné à gauche */
.center-page { display: block; place-items: normal; text-align: left; padding: calc(var(--topbar-h) + clamp(48px, 9vw, 130px)) var(--gutter) clamp(70px, 10vw, 130px); }
.center-page > div { position: relative; max-width: var(--maxw); margin: 0 auto; }
.center-page h1 {
  margin: 0 0 18px; max-width: 14ch;
  font: 700 clamp(2.9rem, 8.5vw, 6.4rem)/.92 var(--f-display); font-stretch: 78%; letter-spacing: -.035em;
}
.center-page .body-copy { margin: 0 0 30px !important; max-width: 46ch; }
.center-page .rec-actions { justify-content: flex-start; }
.center-page .kicker, .center-page .osd-big {
  position: relative; display: block; margin: 0 0 clamp(26px, 3.6vw, 46px); padding-top: 14px; max-width: none;
  border-top: 1px solid var(--line-2);
  font-size: 10.5px; line-height: 1; letter-spacing: .16em; color: var(--tungsten);
}
.center-page .osd-big::before { content: ""; position: absolute; left: 0; top: -1px; width: 56px; height: 1px; background: var(--tungsten); }
.center-page .static-screen { display: none; } /* « CH 404 » sur neige cathodique : retiré, l'étiquette Erreur 404 le remplace */
.center-page .direct { margin-top: 40px; max-width: 560px; justify-content: stretch; }
.center-page .direct li { grid-template-columns: minmax(0, 1fr); }

/* ------------------------------------------------------------------ mentions légales */
.legal { max-width: calc(var(--maxw) + 2 * var(--gutter)); padding-top: calc(var(--topbar-h) + clamp(40px, 6.5vw, 96px)); }
.legal > * { max-width: 760px; }
.legal > .kicker { max-width: none; color: var(--tungsten); margin-bottom: clamp(26px, 3.6vw, 46px); }
.legal h1 {
  position: relative; margin: 0 0 clamp(30px, 4vw, 52px); max-width: none;
  font: 700 clamp(2.9rem, 9vw, 6.4rem)/.92 var(--f-display); font-stretch: 78%; letter-spacing: -.035em; text-transform: none;
}
.legal h1::before {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  left: calc(var(--gutter) * -.5 - 1px); top: 0; bottom: 0; width: 2px; background: var(--tungsten);
}
@media (min-width: 1024px) { .legal h1::before { width: 3px; } }
.legal h2 { margin: 44px 0 14px; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: 10.5px; line-height: 1.2; letter-spacing: .16em; color: var(--bone-soft); }
.legal p, .legal li { line-height: 1.65; }
.legal a { text-decoration-color: var(--line-2); transition: color .2s, text-decoration-color .2s; }
.legal a:hover { color: var(--bone); text-decoration-color: var(--tungsten); }

/* ------------------------------------------------------------------ carte NFC (/carte)
   (sélecteurs préfixés par .page-carte : la carte garde son propre <style>, chargé après ce fichier) */
.page-carte main::before { top: 0; left: calc(var(--gutter) * -.5); }
.page-carte .nfc-grid > section:first-child { position: relative; }
.page-carte .nfc-osd { font-family: var(--f-tech); font-weight: 500; font-size: 10.5px; line-height: 1; letter-spacing: .16em; color: var(--bone-faint); text-shadow: none; }
.page-carte .nfc-osd .clock { color: var(--bone-faint); }
.page-carte .lang { border-radius: 2px; }
.page-carte .lang button { font: 500 10.5px/1 var(--f-tech); letter-spacing: .14em; padding: 10px 11px; }
.page-carte .nfc-grid > section:first-child .kicker { color: var(--tungsten); }
.page-carte .nfc .kicker { margin-bottom: 22px; }
.page-carte .nfc-title {
  font: 700 clamp(3rem, 13vw, 5.6rem)/.92 var(--f-display); font-stretch: 78%;
  letter-spacing: -.035em; text-transform: none; margin: 0 0 18px;
}
.page-carte .nfc-sub { font: 650 clamp(1.1rem, 3.6vw, 1.35rem)/1.3 var(--f-sans); letter-spacing: -.015em; }
.page-carte .nfc-where { margin-bottom: 28px; font-family: var(--f-tech); font-weight: 500; font-size: 10.5px; letter-spacing: .16em; color: var(--bone-faint); }
.page-carte .nfc-main { font: 600 12.5px/1 var(--f-ui); letter-spacing: .1em; }
.page-carte .nfc-act { border-radius: 2px; border-color: var(--line-2); font: 600 13.5px/1 var(--f-ui); }
.page-carte .nfc-act.is-book { gap: 0; border-color: rgba(var(--tungsten-rgb), .6); }
.page-carte .nfc-act.is-book:hover { border-color: var(--tungsten); }
.page-carte .nfc-links { border-top-color: var(--line-2); }
.page-carte .nfc-links a:hover { border-bottom-color: var(--tungsten); }
.page-carte .nfc-links strong { font: 700 clamp(1.3rem, 4.6vw, 1.6rem)/1 var(--f-display); font-stretch: 84%; letter-spacing: -.02em; text-transform: none; }
.page-carte .nfc-links small { margin-top: 7px; font-family: var(--f-tech); font-weight: 500; font-size: 10px; letter-spacing: .14em; }
.page-carte .nfc-links .arrow { /* le ▶ du texte devient le triangle dessiné de l'accueil */
  display: inline-block; flex: none; width: 6px; height: 7px; font-size: 0 !important; line-height: 0;
  color: var(--bone-faint); background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); transition: color .2s;
}
.page-carte .nfc-links a:hover .arrow { color: var(--tungsten); }
.page-carte .nfc-frame { border-radius: 2px; }
.page-carte .nfc-frame::after { display: none; } /* les repères de cadre passaient sous « Toucher · Son » et le bouton son */
.page-carte .nfc-hint { left: 14px; bottom: 18px; padding: 7px 9px; background: rgba(5, 7, 11, .62); font-family: var(--f-tech); font-weight: 500; text-shadow: none; font-size: 10px; line-height: 1; letter-spacing: .16em; }
.page-carte .nfc-sound { border-radius: 2px; }
.page-carte .nfc-cap, .page-carte .nfc-foot { font-family: var(--f-tech); font-weight: 500; font-size: 10px; letter-spacing: .14em; }

/* ------------------------------------------------------------------ Sites web : avant / après directement sur la page
   (27/10/2026, Romain : plus de détour par un lien ; une ligne par client, l'avant et l'après côte à côte, « Voir le site ») */
.cas-list { max-width: var(--maxw); margin: 0 auto; display: grid; gap: clamp(40px, 5vw, 68px); }
.cas { display: grid; gap: 20px; padding-top: 22px; border-top: 1px solid var(--line-2); }
@media (min-width: 960px) { .cas { grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr); gap: 40px; align-items: start; } }
.cas-name {
  margin: 0 0 10px; font: 700 clamp(1.6rem, 2.6vw, 2.1rem)/1 var(--f-display); font-stretch: 84%;
  letter-spacing: -.02em; text-transform: none; color: var(--bone);
}
.cas-type { margin: 0 0 14px; font: 500 10.5px/1.6 var(--f-tech); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-faint); }
.cas-fait { margin: 0 0 18px; max-width: 38ch; font-size: 15px; line-height: 1.55; color: var(--bone-soft); }
.cas-aide { margin: 14px 0 0; font: 500 10.5px/1.6 var(--f-tech); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-faint); }
.cas .ba { width: 100%; }
.cas-seul .ba-tag { left: 12px; right: auto; }   /* une seule image (site créé) : étiquette à gauche */
.cas .ba-tag { top: auto; bottom: 12px; }   /* en bas : en haut, elles couvraient les boutons des sites clients */