/* =============================================================
   HOME THEATER MAESTRO — Feuille de style du site vitrine
   Palette cinéma bleu-nuit, dérivée des tokens de l'app HTM
   (bg #0f1115 / accent #6ea8ff). Système de composants hérité
   du site white-mastering (structure éprouvée), reskin HTM.
   ============================================================= */

/* ---------- Variables ---------- */
:root {
  --bg:        #0b0e14;   /* cinéma bleu-nuit (un cran plus profond que l'app) */
  --bg-2:      #10141c;
  --bg-3:      #161b25;
  --surface:   #141922;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.15);
  --text:      #e4e7ed;
  --muted:     #929aab;
  --muted-2:   #656d7e;
  --white:     #f4f6fb;
  --accent:    #9fbcef;   /* bleu clair — liens, hovers subtils */
  --accent-2:  #6ea8ff;   /* BLEU HTM signature — eyebrows / tech */
  --amber:     #ffb347;   /* accent chaud (faisceau projecteur / mire) */

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;

  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 48px);
  --radius: 4px;
  --header-h: 76px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

/* Barre de défilement toujours visible (ne disparaît pas) */
html { scrollbar-width: auto; scrollbar-color: #3a3a42 #0d0d10; }
::-webkit-scrollbar { width: 13px; height: 13px; }
::-webkit-scrollbar-track { background: #0d0d10; }
::-webkit-scrollbar-thumb { background: #33333c; border-radius: 8px; border: 3px solid #0d0d10; }
::-webkit-scrollbar-thumb:hover { background: #4a4a55; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: .01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
ul { list-style: none; }
h1,h2,h3,h4 { font-weight: 600; line-height: 1.12; letter-spacing: -.01em; color: var(--white); }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(64px, 10vw, 130px); }
.section--tight { padding-block: clamp(48px, 7vw, 90px); }
.center { text-align: center; }
.narrow { max-width: 760px; margin-inline: auto; }

.eyebrow {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 18px;
  font-weight: 500;
}
.section-title {
  font-size: clamp(1.9rem, 4.5vw, 3.1rem);
  line-height: 1.05;
  margin-bottom: 22px;
}
.section-title .serif { font-family: var(--font-serif); font-weight: 500; font-style: italic; letter-spacing: 0; }
.lead { color: var(--muted); font-size: 1.08rem; max-width: 62ch; }
p + p { margin-top: 1.1em; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(10,10,12,.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.header-inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.brand img { width: 34px; height: 44px; object-fit: cover; border: 1px solid var(--line-2); }
.brand-name { display: flex; flex-direction: column; line-height: 1; }
.brand-name b { font-size: .98rem; letter-spacing: .16em; font-weight: 600; color: var(--white); }
.brand-name span { font-size: .58rem; letter-spacing: .34em; color: var(--muted); text-transform: uppercase; margin-top: 5px; }

/* ---------- Navigation ---------- */
.nav { display: flex; align-items: center; gap: 4px; }
.nav > li { position: relative; }
.nav a.navlink,
.nav .navlink {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 14px 18px;
  font-size: .86rem; letter-spacing: .04em; color: var(--muted);
  font-weight: 500; cursor: pointer; white-space: nowrap;
}
@media (max-width: 1120px) and (min-width: 861px) {
  .nav a.navlink, .nav .navlink { padding: 14px 13px; font-size: .82rem; }
  .header-inner { gap: 12px; }
}
.nav a.navlink:hover, .nav .navlink:hover,
.nav li:hover > .navlink,
.nav .navlink.active { color: var(--white); }
.nav .navlink .caret { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .3s var(--ease); opacity: .7; }
.nav li:hover .caret { transform: rotate(225deg) translateY(-1px); }

/* Dropdown */
.dropdown {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 232px; background: rgba(18,18,22,.97);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.7);
}
.nav li:hover > .dropdown, .dropdown:hover { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.dropdown a {
  display: block; padding: 11px 14px; border-radius: 3px;
  font-size: .82rem; color: var(--muted); letter-spacing: .02em;
}
.dropdown a small { display: block; font-size: .68rem; color: var(--muted-2); letter-spacing: .08em; margin-top: 2px; }
.dropdown a:hover { background: var(--bg-3); color: var(--white); }

.header-cta {
  border: 1px solid var(--line-2); padding: 10px 20px; border-radius: 100px;
  font-size: .78rem; letter-spacing: .08em; color: var(--white); font-weight: 500;
  white-space: nowrap; flex-shrink: 0;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.header-cta:hover { background: var(--accent-2); color: #08111f; border-color: var(--accent-2); }

/* Sélecteur de langue */
.lang-switch { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.lang-switch a {
  font-size: .74rem; letter-spacing: .08em; font-weight: 600; color: var(--muted);
  padding: 6px 3px; transition: color .25s var(--ease);
}
.lang-switch a:hover { color: var(--white); }
.lang-switch a.active { color: var(--white); }
.lang-switch__sep { color: var(--line-2); font-size: .74rem; }
@media (max-width: 640px) {
  .lang-switch a { font-size: .7rem; }
}

/* Burger */
.burger { display: none; width: 44px; height: 44px; position: relative; background: none; border: 0; cursor: pointer; }
.burger span { position: absolute; left: 10px; right: 10px; height: 1.6px; background: var(--white); transition: transform .35s var(--ease), opacity .2s var(--ease); }
.burger span:nth-child(1){ top: 15px; } .burger span:nth-child(2){ top: 21px; } .burger span:nth-child(3){ top: 27px; }
body.menu-open .burger span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity: 0; }
body.menu-open .burger span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: 100px;
  font-size: .84rem; font-weight: 500; letter-spacing: .06em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.btn svg { width: 15px; height: 15px; }
.btn--primary { background: linear-gradient(135deg, #6ea8ff, #4b86e6); color: #08111f; box-shadow: 0 8px 24px -10px rgba(110,168,255,.6); }
.btn--primary:hover { transform: translateY(-2px); background: linear-gradient(135deg, #85b6ff, #5c93ee); box-shadow: 0 12px 30px -10px rgba(110,168,255,.75); }
.btn--ghost { border-color: var(--line-2); color: var(--white); }
.btn--ghost:hover { border-color: var(--white); background: rgba(255,255,255,.05); transform: translateY(-2px); }
/* Dégradé clair→foncé de MÊME teinte, comme le bleu .btn--primary : l'ancien
   #fb923c→#f59e0b gardait une luminosité quasi constante et paraissait plat
   (retour Nicolas 2026-08-10). Départ orange clair, arrivée orange nettement
   plus foncée → même effet visible que le bleu. */
.btn--pro { background: linear-gradient(135deg, #fca957, #e07d0a); color: #3d1f04; box-shadow: 0 8px 24px -10px rgba(245,158,11,.6); }
.btn--pro:hover { transform: translateY(-2px); background: linear-gradient(135deg, #ffba72, #f18a16); box-shadow: 0 12px 30px -10px rgba(245,158,11,.8); }
/* CTA « Démo en ligne » — placé en 1er mais NEUTRE : contour clair + fond blanc
   translucide, aucune 3ᵉ couleur (le bleu Télécharger et l'orange Pro suffisent,
   trois pleins colorés faisaient trop — retour Nicolas 2026-08-10). Présent par
   sa position, sans concurrencer les deux CTA colorés. */
.btn--demo { border-color: var(--line-2); color: var(--white); background: rgba(255,255,255,.06); }
.btn--demo:hover { border-color: var(--white); background: rgba(255,255,255,.12); transform: translateY(-2px); }
/* Badge « bêta » pour une fonctionnalité encore en rodage (honnêteté produit). */
.beta { display: inline-block; font-size: .6rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #e0a94b; background: rgba(245,166,35,.13); border: 1px solid rgba(245,166,35,.4); border-radius: 100px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; line-height: 1.6; white-space: nowrap; }
/* Badge « Bientôt · vX » : fonction annoncée mais pas encore livrée en prod
   (retiré à la sortie de la version). Bleu = à venir, distinct du .beta ambre. */
.soon { display: inline-block; font-size: .6rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #8fbaff; background: rgba(110,168,255,.13); border: 1px solid rgba(110,168,255,.45); border-radius: 100px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; line-height: 1.6; white-space: nowrap; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.arrow-link { display: inline-flex; align-items: center; gap: 9px; font-size: .84rem; letter-spacing: .06em; color: var(--white); font-weight: 500; }
.arrow-link svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.arrow-link:hover svg { transform: translateX(5px); }
.arrow-link:hover { color: var(--accent); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.2) 35%, rgba(10,10,12,.82) 82%, var(--bg) 100%),
    radial-gradient(120% 80% at 50% 120%, rgba(10,10,12,.6), transparent 60%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(60px, 12vh, 130px); padding-top: calc(var(--header-h) + 40px); }
.hero h1 {
  font-size: clamp(2.6rem, 8vw, 6rem);
  line-height: .98; letter-spacing: -.02em; max-width: 16ch;
}
.hero h1 .serif { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: 0; color: var(--accent); }
.hero p { margin-top: 26px; max-width: 52ch; color: #c9c9d0; font-size: clamp(1rem,2.2vw,1.18rem); }
.hero .btn-row { margin-top: 38px; }

/* Page hero (interior pages) */
.page-hero { position: relative; padding-top: calc(var(--header-h) + clamp(60px,11vw,120px)); padding-bottom: clamp(40px,7vw,80px); overflow: hidden; }
.page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.page-hero__bg::after { content:""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,12,.7), var(--bg) 92%); }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(2.3rem, 6vw, 4.2rem); margin-bottom: 18px; }
.breadcrumb { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 22px; }
.breadcrumb a:hover { color: var(--accent); }

/* ---------- Split (image + text) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media { position: relative; }
.split__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius); }
.split__media.portrait img { aspect-ratio: 3/4; }
.split__body h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); margin-bottom: 20px; }
.split__body p { color: var(--muted); }
.split__body .btn-row, .split__body .arrow-link { margin-top: 28px; }

/* ---------- Cards (rooms) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 22px; }
.card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--bg-2); transition: transform .45s var(--ease), border-color .45s var(--ease);
  min-height: 420px;
}
.card:hover { transform: translateY(-6px); border-color: var(--line-2); }
.card__img { position: absolute; inset: 0; z-index: 0; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), opacity .5s; opacity: .62; }
.card:hover .card__img img { transform: scale(1.06); opacity: .78; }
.card::after { content:""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,10,12,.15) 0%, rgba(10,10,12,.55) 55%, rgba(10,10,12,.94) 100%); }
.card__body { position: relative; z-index: 2; margin-top: auto; padding: 28px; }
.card__tag { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 12px; }
.card__body h3 { font-size: 1.5rem; margin-bottom: 8px; }
.card__body p { font-size: .9rem; color: var(--muted); margin-bottom: 18px; }
.card__body .arrow-link { font-size: .8rem; }
.card__link { position: absolute; inset: 0; z-index: 3; }

/* ---------- Feature list / specs ---------- */
.specs { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.spec { background: var(--bg-2); padding: 30px 26px; }
.spec b { display: block; font-size: 2rem; color: var(--white); font-weight: 600; letter-spacing: -.02em; margin-bottom: 6px; }
.spec span { font-size: .8rem; letter-spacing: .04em; color: var(--muted); }

.equip { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 14px; }
.equip li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
.equip li .dot { flex-shrink: 0; width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 4px rgba(110,168,255,.12); }
.equip li b { color: var(--white); font-weight: 600; font-size: .95rem; }
.equip li p { color: var(--muted); font-size: .84rem; margin-top: 2px; }

/* ---------- Blind test / audio note ---------- */
.callout { border: 1px solid var(--line); border-left: 2px solid var(--accent-2); border-radius: var(--radius); padding: clamp(24px,4vw,40px); background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.callout h3 { font-size: 1.3rem; margin-bottom: 12px; }
.callout p { color: var(--muted); }

/* Notes de version (page Télécharger). Sans style dédié, la liste héritait du
   ul générique : 16 items en 16px collés sans aucune marge, donc un pavé.
   On descend d'un cran en taille, on aère entre les items, on borne la
   longueur de ligne et on pose un filet à gauche pour donner un point
   d'accroche à l'oeil. La couleur de texte reste celle du corps : réduire le
   contraste en plus de la taille aurait rendu la lecture plus dure, pas plus
   légère. */
.relnote-list { display: grid; gap: 16px; margin-top: 20px; }
.relnote-list li { font-size: .95rem; line-height: 1.7; max-width: 68ch; padding-left: 16px; border-left: 1px solid var(--line); }

/* Pastille « Pro » orange, reprise du badge du changelog de l'application
   (mêmes couleurs #f59e0b sur #3d1f04, même graisse, mêmes capitales) pour
   qu'un lecteur retrouve le même signal dans l'app et sur le site. Avant le
   retour Nicolas, le mot « Pro » était noyé dans la phrase et ne ressortait
   pas. Le filet de l'item passe à l'orange pour que la ligne se repère même
   quand le badge sort du champ de vision. */
.relnote-list li.is-pro { border-left-color: #f59e0b; }
.relnote-pro {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 7px;
  border-radius: 8px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  vertical-align: 1px;
  background: #f59e0b;
  color: #3d1f04;
}

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tag { font-size: .74rem; letter-spacing: .05em; color: var(--accent); border: 1px solid var(--line-2); border-radius: 100px; padding: 6px 14px; }

/* ---------- Partners strip ---------- */
.partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(28px,5vw,64px); }
.partners img { height: 46px; width: auto; object-fit: contain; opacity: .62; filter: grayscale(1) brightness(1.6); transition: opacity .3s, filter .3s; }
.partners a:hover img, .partners img:hover { opacity: 1; filter: grayscale(0) brightness(1); }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.badges img { height: 96px; width: auto; border-radius: var(--radius); border: 1px solid rgba(10,10,12,.14); background: #fff; padding: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.18); transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.badges a { display: block; }
.badges a:hover img, .badges img:hover { transform: translateY(-3px); border-color: rgba(10,10,12,.28); box-shadow: 0 8px 20px rgba(0,0,0,.28); }

/* ---------- Prose (article pages) ---------- */
.prose { max-width: 720px; }
.prose p { color: #bcbcc4; font-size: 1.06rem; margin-bottom: 1.25em; }
.prose h2 { font-size: clamp(1.5rem,3.2vw,2.1rem); margin: 1.6em 0 .6em; }
.prose h3 { font-size: 1.25rem; margin: 1.4em 0 .5em; color: var(--white); }
.prose strong { color: var(--white); font-weight: 600; }
.prose ul.bullets { margin: 1em 0 1.4em; }
.prose ul.bullets li { position: relative; padding-left: 22px; margin-bottom: .55em; color: #bcbcc4; }
.prose ul.bullets li::before { content:""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); }

/* Compare grid (analog vs ITB) */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.compare .col { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px,3.5vw,36px); background: var(--bg-2); }
.compare h3 { font-size: 1.4rem; margin-bottom: 6px; }
.compare .sub { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 18px; }
.compare .plus li, .compare .minus li { position: relative; padding-left: 26px; margin-bottom: .6em; font-size: .92rem; color: var(--muted); }
.compare .plus li::before { content:"+"; position: absolute; left: 4px; color: #7fbf9a; font-weight: 700; }
.compare .minus li::before { content:"–"; position: absolute; left: 4px; color: #c98b8b; font-weight: 700; }
.compare h4 { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin: 18px 0 8px; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cta-band__bg { position: absolute; inset: 0; z-index: 0; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .25; }
.cta-band__bg::after { content:""; position: absolute; inset: 0; background: radial-gradient(80% 120% at 50% 50%, rgba(10,10,12,.5), var(--bg)); }
.cta-band .container { position: relative; z-index: 2; text-align: center; }
.cta-band h2 { font-size: clamp(1.9rem,5vw,3.4rem); margin-bottom: 18px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px,5vw,64px); align-items: start; }
.contact-methods { display: grid; gap: 14px; margin-top: 30px; }
.contact-method { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); transition: border-color .3s, transform .3s; }
.contact-method:hover { border-color: var(--line-2); transform: translateX(4px); }
.contact-method .ico { flex-shrink: 0; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; }
.contact-method .ico svg { width: 18px; height: 18px; color: var(--accent); }
.contact-method b { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 3px; font-weight: 500; }
.contact-method span { color: var(--white); font-size: 1rem; }

form.wm-form { display: grid; gap: 16px; }
.field label { display: block; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.field input, .field textarea, .field select {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 14px 16px; color: var(--white); font-family: inherit; font-size: .95rem; transition: border-color .3s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); }
.field textarea { min-height: 140px; resize: vertical; }

/* ---------- Tarifs ---------- */
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; align-items: stretch; }
.price-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2); padding: clamp(28px, 3.5vw, 40px);
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.price-card:hover { transform: translateY(-5px); border-color: var(--line-2); }
.price-card--featured { border-color: var(--accent-2); background: linear-gradient(180deg, rgba(110,168,255,.07), var(--bg-2) 60%); position: relative; }
.price-card--featured::before {
  /* Libellé du ruban surchargeable par page via data-ribbon (hérité
     white-mastering où il valait « Immersif » en dur). */
  content: attr(data-ribbon); position: absolute; top: 18px; right: 18px;
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-2);
  border: 1px solid var(--line-2); border-radius: 100px; padding: 5px 12px;
}
.price-card__tag { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--accent-2); }
.price-card__head h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 12px 0 12px; }
.price-card__head p { color: var(--muted); font-size: .92rem; }
.price { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.price b { font-size: clamp(2.4rem, 6vw, 3.2rem); font-weight: 600; letter-spacing: -.03em; color: var(--white); line-height: 1; }
.price span { font-size: .9rem; color: var(--muted); }
.price-features { margin-bottom: 30px; display: grid; gap: 13px; }
.price-features li { position: relative; padding-left: 26px; color: #c3c3cb; font-size: .94rem; }
.price-features .dot { position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 4px rgba(110,168,255,.12); }
.price-features strong { color: var(--white); }
.price-card .btn { margin-top: auto; justify-content: center; }
.pricing-note { max-width: 780px; margin: 44px auto 0; text-align: center; }
.pricing-note p { color: var(--muted); font-size: .95rem; }
.pricing-note .small { font-size: .84rem; color: var(--muted-2); margin-top: 12px; }

/* Notes « pas ouvert au public » */
.public-note { margin-top: 22px; padding: 16px 18px; border-left: 2px solid var(--accent-2); background: var(--bg-2); border-radius: var(--radius); font-size: .86rem; color: var(--muted); }
.footer-note { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted-2); max-width: 70ch; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-2); padding-block: clamp(50px,7vw,80px) 30px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer-brand .brand { margin-bottom: 18px; }
.footer-brand p { color: var(--muted); font-size: .9rem; max-width: 34ch; }
.footer-col h4 { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 18px; font-weight: 500; }
.footer-col ul li { margin-bottom: 11px; }
.footer-col a { color: var(--muted); font-size: .9rem; }
.footer-col a:hover { color: var(--white); }
.footer-bottom { margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; }
.footer-bottom p { font-size: .78rem; color: var(--muted-2); }
.social { display: flex; gap: 12px; }
.social a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); transition: color .3s, border-color .3s; }
.social a:hover { color: var(--white); border-color: var(--line-2); }
.social svg { width: 17px; height: 17px; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .split, .contact-grid { grid-template-columns: 1fr; }
  /* En pile mobile, la section « reverse » (Mesures) doit montrer le texte
     D'ABORD puis ses deux visuels (appframe REW + photo micro) EN DESSOUS du
     paragraphe qu'ils illustrent — sinon les images flottent au-dessus du titre
     et semblent rattachées à la section précédente (retour Nicolas). */
  .split--reverse .split__media { order: 1; }
  .split--reverse .split__body { order: 0; }
  /* Section « Né dans une vraie salle » : sa photo (média en 1er dans le DOM)
     doit passer SOUS le titre en pile mobile, comme les autres (retour Nicolas). */
  .split__media.photo-bw { order: 1; }
  .compare { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .burger { display: block; }
  .header-cta { display: none; }
  .nav {
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: auto;
    height: calc(100svh - var(--header-h)); z-index: 999;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #0a0a0c;
    padding: 14px var(--pad) 40px; overflow-y: auto;
    transform: translateX(100%); transition: transform .45s var(--ease);
  }
  body.menu-open .nav { transform: none; }
  body.menu-open { overflow: hidden; }
  .nav > li { border-bottom: 1px solid var(--line); }
  .nav a.navlink, .nav .navlink { padding: 18px 4px; font-size: 1.02rem; width: 100%; }
  .nav .caret { display: none; }
  .dropdown, .nav li:hover > .dropdown, .dropdown:hover { display: none; }
  .header-mobile-cta { display: block; margin-top: 20px; border-bottom: 0 !important; }
}
@media (min-width: 861px) { .header-mobile-cta { display: none; } }
@media (max-width: 560px) {
  .hero { min-height: 92svh; }
  .badges img { height: 76px; }
  .footer-top { grid-template-columns: 1fr; }
  .pricing { grid-template-columns: 1fr; }
}

/* Smartphone en mode paysage (hauteur réduite) : on évite un hero qui déborde */
@media (max-width: 960px) and (orientation: landscape) {
  .hero { min-height: auto; }
  .hero__inner { padding-top: calc(var(--header-h) + 26px); padding-bottom: 46px; }
  .hero h1 { font-size: clamp(1.9rem, 5.5vw, 3rem); }
  .hero p { margin-top: 16px; }
  .hero .btn-row { margin-top: 24px; }
  .page-hero { padding-top: calc(var(--header-h) + 40px); }
}

/* Confort tactile : cibles de clic d'au moins ~44px sur écrans tactiles */
@media (hover: none) {
  .arrow-link, .footer-col a, .contact-method, .dropdown a { min-height: 40px; }
}

/* ---- Header responsive : garantir FR/EN + menu visibles (marque « …STUDIOS » plus large) ---- */
@media (max-width: 860px) {
  .header-inner { gap: 12px; }
  .brand { flex-shrink: 1; min-width: 0; gap: 10px; }
  .brand-name { min-width: 0; }
  .brand-name b { font-size: .8rem; letter-spacing: .09em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lang-switch, .burger { flex-shrink: 0; }
}
@media (max-width: 400px) {
  .header-inner { gap: 7px; }
  .brand { gap: 8px; }
  .brand img { width: 30px; height: 40px; }
  .brand-name b { font-size: .66rem; letter-spacing: .02em; }
  .brand-name span { font-size: .48rem; letter-spacing: .18em; }
  .lang-switch { gap: 5px; }
  .lang-switch a { font-size: .66rem; }
  .lang-switch__sep { font-size: .66rem; }
}

/* Logos/certifs sombres ou transparents : pas de cartouche blanc */
.badges img.badge-plain { background: none; border: 0; padding: 0; box-shadow: none; }

/* ---- Logo Dolby Atmos (pages salles / tarifs) ---- */
.atmos-logo { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 8px; }
.atmos-logo img { height: 30px; width: auto; opacity: .95; mix-blend-mode: lighten; }
.atmos-logo span { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted-2); }
.atmos-logo--card { justify-content: flex-start; margin: 16px 0 4px; }
.atmos-logo--card img { height: 24px; }

/* ---- Image mise en avant sous un bloc texte ---- */
.feature-media { margin-top: 30px; margin-bottom: 4px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.feature-media img { width: 100%; display: block; }
.feature-media figcaption { padding: 12px 16px; font-size: .78rem; letter-spacing: .04em; color: var(--muted); background: var(--bg-2); border-top: 1px solid var(--line); }

/* ---- Duo photo + mesures de calibration (taille réduite) ---- */
.feature-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.feature-duo figure { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-2); }
.feature-duo__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-duo__cal .calbox { flex: 1; display: grid; place-items: center; padding: 24px; }
.feature-duo__cal .calbox img { max-width: 100%; height: auto; border-radius: 3px; }
.feature-duo figcaption { padding: 12px 16px; font-size: .78rem; letter-spacing: .04em; color: var(--muted); border-top: 1px solid var(--line); }
@media (max-width: 760px) { .feature-duo { grid-template-columns: 1fr; } }

/* ---- WhatsApp (contact) : glyphe plein ---- */
.contact-method .ico svg.ico-fill { fill: var(--accent); stroke: none; }

/* ---- Envoi de fichiers (formulaire PHP) ---- */
.form-alert { border: 1px solid var(--line-2); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 28px; font-size: .96rem; }
.form-alert--ok { border-left: 3px solid #7fbf9a; background: rgba(127,191,154,.08); color: #d7e9df; }
.form-alert--error { border-left: 3px solid #c98b8b; background: rgba(201,139,139,.08); color: #ecd7d7; }
.form-alert ul { margin-top: 8px; padding-left: 4px; }
.form-alert li { font-size: .84rem; color: var(--muted); margin-top: 3px; }
.field input[type="file"] { padding: 12px 14px; cursor: pointer; }
.field input[type="file"]::file-selector-button {
  margin-right: 14px; padding: 9px 16px; border-radius: 100px;
  border: 1px solid var(--line-2); background: var(--bg-3); color: var(--white);
  font-family: inherit; font-size: .82rem; letter-spacing: .04em; cursor: pointer;
  transition: border-color .3s, background .3s;
}
.field input[type="file"]::file-selector-button:hover { border-color: var(--white); background: rgba(255,255,255,.06); }
.field .hint { display: block; margin-top: 8px; font-size: .78rem; color: var(--muted-2); letter-spacing: 0; text-transform: none; }

/* =============================================================
   HTM — composants propres au site vitrine (hors socle hérité)
   ============================================================= */

/* ---- Hero « produit » : capture d'app encadrée sous le titre ---- */
.hero--product { min-height: auto; display: block; padding-top: calc(var(--header-h) + clamp(56px, 10vw, 110px)); padding-bottom: clamp(40px, 7vw, 90px); text-align: center; }
.hero--product::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(110,168,255,.18), transparent 60%),
    radial-gradient(70% 50% at 80% 10%, rgba(255,179,71,.08), transparent 55%);
}
.hero--product .container { position: relative; z-index: 2; }
.hero--product h1 { margin-inline: auto; max-width: 20ch; }
.hero--product .lead { margin-inline: auto; margin-top: 24px; }
.hero--product .btn-row { justify-content: center; margin-top: 34px; }

/* Fenêtre d'app (chrome minimal + capture) */
.appframe {
  margin: clamp(40px, 6vw, 68px) auto 0; max-width: 1080px;
  border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden;
  background: var(--bg-2);
  box-shadow: 0 40px 120px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(110,168,255,.06),
              0 0 90px -30px rgba(110,168,255,.35);
}
.appframe__bar { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); }
.appframe__bar i { width: 11px; height: 11px; border-radius: 50%; background: #33384a; }
.appframe__bar i:nth-child(1){ background:#ff5f57; } .appframe__bar i:nth-child(2){ background:#febc2e; } .appframe__bar i:nth-child(3){ background:#28c840; }
.appframe__bar span { margin-left: 10px; font-size: .72rem; letter-spacing: .1em; color: var(--muted-2); }
.appframe img { width: 100%; display: block; }
.appframe--flush { border-radius: 10px; }

/* ---- Bandeau des 4 phases ---- */
.phase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.phase--final { border-color: rgba(110,168,255,.45); background: linear-gradient(180deg, rgba(110,168,255,.09), var(--bg)); }
.phase--final .num { color: var(--amber); }
.phase {
  position: relative; padding: 26px 24px 28px; border: 1px solid var(--line);
  border-radius: var(--radius); background: linear-gradient(180deg, var(--bg-2), var(--bg));
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.phase:hover { transform: translateY(-4px); border-color: var(--line-2); }
/* Les cartes de phases sont des LIENS vers leur section détaillée (retour Nicolas :
   elles avaient l'air cliquables sans l'être). Reset des styles d'ancre + focus visible. */
a.phase { display: block; text-decoration: none; color: inherit; }
a.phase:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
/* Décalage d'ancrage : le header collant ne doit pas masquer le haut de la section ciblée. */
section[id] { scroll-margin-top: 88px; }
.phase .num { font-size: .72rem; letter-spacing: .22em; color: var(--accent-2); font-weight: 600; }
.phase h3 { font-size: 1.12rem; margin: 12px 0 8px; }
.phase p { font-size: .88rem; color: var(--muted); }
.phase .ico { width: 30px; height: 30px; color: var(--accent-2); margin-bottom: 14px; }
.phase .ico svg { width: 100%; height: 100%; }
@media (max-width: 900px) { .phase-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .phase-grid { grid-template-columns: 1fr; } }

/* ---- Cartes de téléchargement (plateformes) ---- */
.os-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.os-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 28px 26px 26px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2); transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.os-card:hover { transform: translateY(-4px); border-color: var(--accent-2); }
.os-card .ico { width: 34px; height: 34px; color: var(--white); margin-bottom: 16px; }
.os-card .ico svg { width: 100%; height: 100%; }
.os-card h3 { font-size: 1.2rem; margin-bottom: 4px; }
.os-card .meta { font-size: .8rem; color: var(--muted-2); margin-bottom: 18px; }
.os-card .btn { margin-top: auto; }
.os-card .note { font-size: .76rem; color: var(--muted-2); margin-top: 12px; line-height: 1.5; }
@media (max-width: 820px) { .os-cards { grid-template-columns: 1fr; } }

/* ---- Section « multi-plateforme » (mobile + texte) ---- */
.platform { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 6vw, 70px); align-items: center; }
.platform__phone { display: flex; justify-content: center; }
.platform__phone img { width: min(260px, 70%); border: 1px solid var(--line-2); border-radius: 22px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.9), 0 0 70px -30px rgba(110,168,255,.35); }
/* En pile mobile (portrait), le titre + le texte « Sur le bureau, la tablette,
   le téléphone » viennent D'ABORD, puis le mockup du téléphone EN DESSOUS —
   sinon la capture flotte au-dessus du titre et paraît détachée (retour Nicolas). */
@media (max-width: 820px) { .platform { grid-template-columns: 1fr; } .platform__phone { order: 1; } }

/* ---- Puce « libre / hors-ligne » sous le hero ---- */
.trustline { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 26px; }
.trustline span { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); letter-spacing: .02em; }
.trustline span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 4px rgba(110,168,255,.12); }

/* ---- Section « Nouveautés » du héros (remplace l'ancien bandeau en tête) ---- */
.whatsnew { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin-top: 22px; padding: 8px 16px 8px 14px; border: 1px solid rgba(245,158,11,.35); border-radius: 100px; background: rgba(245,158,11,.08); text-align: left; }
.whatsnew__dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.16); flex: 0 0 auto; }
.whatsnew__tag { text-transform: uppercase; letter-spacing: .12em; font-size: .64rem; font-weight: 700; color: #fbaa1e; }
.whatsnew__text { font-size: .84rem; color: #d7dbe2; }
.whatsnew__text b { color: #fff; font-weight: 600; }

/* ---- Logo HTM carré (l'app icon est 1:1, pas portrait comme le socle) ---- */
.brand img { width: 40px; height: 40px; border-radius: 9px; object-fit: contain; border-color: var(--line); background: #0a1228; }
@media (max-width: 400px) { .brand img { width: 34px; height: 34px; } }

/* ---- Section « À propos » : cartes auteur / contributeur ---- */
.people { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.person {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2);
  padding: clamp(26px, 3.5vw, 38px);
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.person:hover { transform: translateY(-4px); border-color: var(--line-2); }
.person__role { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 12px; }
.person h3 { font-size: 1.4rem; margin-bottom: 4px; }
.person__title { font-size: .82rem; color: var(--muted-2); margin-bottom: 14px; letter-spacing: .02em; }
.person p { color: var(--muted); font-size: .94rem; margin-bottom: 18px; }
.person .arrow-link { font-size: .82rem; }
.about-note { max-width: 760px; margin: 38px auto 0; text-align: center; font-size: .9rem; color: var(--muted-2); }
@media (max-width: 760px) { .people { grid-template-columns: 1fr; } }

/* Forums — présence communautaire (ASR, Sound Pixel Lab), sous les 2 photos. */
.forums { max-width: 760px; margin: 30px auto 0; text-align: center; }
.forums__lead { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 16px; }
.forums__links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.forum-link {
  display: inline-flex; align-items: center; gap: 12px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2);
  padding: 13px 18px; min-height: 44px; color: var(--text);
  transition: transform .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.forum-link:hover { transform: translateY(-3px); border-color: var(--line-2); color: var(--accent); }
.forum-link__icon { display: inline-flex; color: var(--accent-2); flex: 0 0 auto; }
.forum-link__icon svg { width: 26px; height: 26px; }
.forum-link__body { display: flex; flex-direction: column; line-height: 1.25; }
.forum-link__name { font-weight: 600; font-size: .95rem; }
.forum-link__meta { font-size: .74rem; color: var(--muted-2); letter-spacing: .02em; margin-top: 2px; }
.forum-link__ext { width: 15px; height: 15px; flex: 0 0 auto; color: var(--muted-2); transition: transform .3s var(--ease); }
.forum-link:hover .forum-link__ext { transform: translate(2px, -2px); color: var(--accent); }
@media (max-width: 760px) { .forums__links { flex-direction: column; } .forum-link { justify-content: flex-start; } }

/* =============================================================
   HTM — photos de salle réelle (authenticité)
   ============================================================= */

/* Noir & blanc élégant, retour couleur au survol */
.photo-bw img, img.photo-bw { filter: grayscale(1) contrast(1.04); transition: filter .7s var(--ease); }
.photo-bw:hover img, img.photo-bw:hover { filter: grayscale(0) contrast(1); }

/* Calque photo réelle en fond de hero (très assombri, l'app reste le sujet) */
.hero__photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* La photo de salle (paysage) est affichée en BANDEAU pleine largeur en haut du hero,
   à TOUTES les tailles (portrait, paysage mobile, desktop) : object-fit:cover rognait
   la scène (on n'en voyait qu'une lamelle — retour Nicolas). En bandeau, toute la scène
   (écran, charpente, fauteuils) est visible, et elle se fond dans le fond sombre sous le
   titre + le contenu. */
.hero__photo { bottom: auto; height: auto; }
.hero__photo img { width: 100%; height: auto; display: block; object-fit: unset; opacity: .82; filter: saturate(1.02); }
.hero__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,14,20,.20) 0%, rgba(11,14,20,.30) 40%, rgba(11,14,20,.6) 68%, rgba(11,14,20,.9) 90%, var(--bg) 100%);
}
.hero--product::before { z-index: 1; }   /* le glow passe au-dessus de la photo */

/* Légende sous une capture/photo */
.shot-cap { margin-top: 12px; font-size: .8rem; letter-spacing: .02em; color: var(--muted-2); text-align: center; }

/* Colonne média empilée (capture d'app + photo réelle) */
.media-stack { display: grid; gap: 16px; }
.mini-photo { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.mini-photo img { width: 100%; display: block; aspect-ratio: 16/7; object-fit: cover; }
.mini-photo figcaption { padding: 10px 14px; font-size: .78rem; color: var(--muted); background: var(--bg-2); border-top: 1px solid var(--line); }
/* Photos d'appui empilées pleine largeur dans une media-stack (bien lisibles). */
.mini-duo { display: grid; grid-template-columns: 1fr; gap: 16px; }
.mini-duo .mini-photo img { aspect-ratio: 16/9; }

/* Bandeau photo pleine largeur, texte en surimpression (mise en valeur forte) */
.roomband { position: relative; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: clamp(96px, 17vw, 210px); }
.roomband__bg { position: absolute; inset: 0; z-index: 0; }
.roomband__bg img { width: 100%; height: 100%; object-fit: cover; }
.roomband__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8,11,17,.94) 0%, rgba(8,11,17,.78) 42%, rgba(8,11,17,.30) 78%, rgba(8,11,17,.12) 100%),
    linear-gradient(0deg, rgba(8,11,17,.55), transparent 42%);
}
.roomband .container { position: relative; z-index: 2; }
.roomband__inner { max-width: 620px; }
.roomband__inner h2 { font-size: clamp(2rem, 4.6vw, 3.3rem); line-height: 1.04; margin-bottom: 20px; }
.roomband__inner p { color: #c4ccda; font-size: 1.06rem; margin-bottom: 26px; }
@media (max-width: 700px) {
  .roomband__bg::after { background: linear-gradient(180deg, rgba(8,11,17,.55), rgba(8,11,17,.9)); }
}

/* ---- Liens externes (outils : REW, ColorHCFR, ArgyllCMS) + liens de prose ---- */
a.exlink, .prose a { color: var(--accent-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a.exlink:hover, .prose a:hover { color: var(--white); }

/* Vidéo « salle » filmée sur tablette (portrait) — centrée sous la section
   « Pensé pour de vraies salles ». Largeur plafonnée (format portrait) pour
   ne pas dominer la section. Muette + boucle (comme la démo Phase 1). */
.room-video { max-width: 520px; margin: 44px auto 0; position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); }
.room-video video { width: 100%; display: block; }

/* ---- Photo / avatar dans les cartes contributeur & auteur ---- */
.person__media { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: center 28%; border-radius: var(--radius); margin-bottom: 22px; border: 1px solid var(--line); display: block; }
.person__avatar { width: 100%; aspect-ratio: 16/10; border-radius: var(--radius); margin-bottom: 22px; border: 1px solid var(--line); display: grid; place-items: center; background: linear-gradient(135deg, #13233f, #0a1228); color: var(--accent); font-weight: 700; font-size: 2.4rem; letter-spacing: .12em; }

/* =============================================================
   HTM — page Fonctionnalités : comparatif Standard / Expert
   ============================================================= */

/* Carte « Expert » (montée en gamme, à venir) dans la grille .pricing.
   On n'affiche AUCUN prix : la monétisation n'est pas arrêtée (« Bientôt disponible »). */
.price-card--expert { border-color: var(--accent-2); background: linear-gradient(180deg, rgba(110,168,255,.07), var(--bg-2) 60%); position: relative; }
.price-card--expert::before {
  content: attr(data-badge); position: absolute; top: 18px; right: 18px;
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-2);
  border: 1px solid var(--line-2); border-radius: 100px; padding: 5px 12px;
}
/* Emplacement « prix » réutilisé pour l'état « Bientôt disponible » (aucun tarif). */
.price--soon { align-items: center; }
.price--soon b { font-size: clamp(1.4rem, 3.6vw, 1.9rem); }
.price--soon span { color: var(--accent-2); }
.price-features .dot--exp { background: var(--accent-2); }
.btn--soon { background: var(--bg-3); color: var(--muted); border: 1px solid var(--line-2); cursor: default; pointer-events: none; }
.btn--soon svg { color: var(--accent-2); }

/* Tableau comparatif par phase */
.cmp { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-2); }
.cmp__head, .cmp__row { display: grid; grid-template-columns: 1fr 96px 96px; align-items: center; }
.cmp__head { background: var(--bg-3); border-bottom: 1px solid var(--line-2); }
.cmp__head > div { padding: 15px 12px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; white-space: nowrap; }
.cmp__head .c-h-std { text-align: center; color: var(--muted); }
.cmp__head .c-h-exp { text-align: center; color: var(--accent-2); }
.cmp__group { padding: 16px 18px 12px; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); background: var(--bg-3); border-top: 1px solid var(--line); font-weight: 600; }
.cmp__row { border-top: 1px solid var(--line); }
.cmp__row .c-label { padding: 14px 18px; font-size: .92rem; color: var(--text); }
.cmp__row .c-label small { display: block; color: var(--muted-2); font-size: .8rem; letter-spacing: 0; margin-top: 2px; }
.cmp__row .cell { text-align: center; font-weight: 700; font-size: 1rem; }
.cmp__row .cell--yes { color: #7fbf9a; }
.cmp__row .cell--exp { color: var(--accent-2); }
.cmp__row .cell--no { color: var(--muted-2); font-weight: 400; }
.cmp__row .cell--yes::before { content: "\2713"; }   /* ✓ */
.cmp__row .cell--exp::before { content: "\2605"; }   /* ★ */
.cmp__row .cell--no::before  { content: "\2013"; }   /* – */
.cmp__legend { display: flex; flex-wrap: wrap; gap: 18px 26px; margin-top: 20px; font-size: .84rem; color: var(--muted); }
.cmp__legend b { font-weight: 700; margin-right: 7px; }
.cmp__legend .l-yes { color: #7fbf9a; }
.cmp__legend .l-exp { color: var(--accent-2); }
@media (max-width: 560px) {
  /* colonnes assez larges pour contenir « Standard » / « Expert » sans chevauchement */
  .cmp__head, .cmp__row { grid-template-columns: 1fr 68px 68px; }
  .cmp__head > div { padding: 12px 4px; font-size: .6rem; letter-spacing: 0; overflow: hidden; text-overflow: clip; }
  .cmp__row .c-label { padding: 13px 12px; font-size: .86rem; }
  .cmp__row .cell { font-size: .95rem; }
}
@media (max-width: 360px) {
  /* très petits écrans : on abrège les en-têtes pour rester lisible */
  .cmp__head, .cmp__row { grid-template-columns: 1fr 52px 52px; }
  .cmp__head .c-h-std, .cmp__head .c-h-exp { font-size: 0; }
  .cmp__head .c-h-std::after { content: "Std"; font-size: .6rem; letter-spacing: 0; }
  .cmp__head .c-h-exp::after { content: "Exp"; font-size: .6rem; letter-spacing: 0; }
}

/* =============================================================
   HTM — Glossaire par catégorie (données JSON + filtre JS)
   ============================================================= */
.glossary-tools {
  position: sticky; top: var(--header-h); z-index: 20;
  background: rgba(11,14,20,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); padding: 18px 0 14px; margin-bottom: 6px;
}
.glossary-search { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.glossary-search input {
  flex: 1; min-width: 220px; background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: 100px; padding: 13px 20px; color: var(--white); font-family: inherit; font-size: 1rem;
  transition: border-color .3s var(--ease);
}
.glossary-search input:focus { outline: none; border-color: var(--accent); }
.glossary-count { font-size: .82rem; color: var(--muted-2); white-space: nowrap; margin-left: auto; }
.cat-index { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.cat-index button {
  font-size: .84rem; font-weight: 500; letter-spacing: .02em; color: var(--muted);
  border: 1px solid var(--line-2); background: var(--bg-2); border-radius: 100px;
  padding: 9px 18px; cursor: pointer; font-family: inherit;
  transition: color .2s, background .2s, border-color .2s;
}
.cat-index button:hover { color: var(--white); border-color: var(--white); }
.cat-index button.active { color: #08111f; background: var(--accent-2); border-color: var(--accent-2); }

.glossary-cat { margin-top: 44px; }
.glossary-cat__h {
  font-size: clamp(1.3rem, 3vw, 1.7rem); color: var(--white);
  border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 20px; scroll-margin-top: 200px;
}
.glossary-cat__h::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  background: var(--accent-2); margin-right: 12px; transform: rotate(45deg); }
.terms { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.term {
  border: 1px solid var(--line); border-left: 3px solid var(--accent-2); border-radius: 8px;
  background: var(--bg-2); padding: 22px 24px; box-shadow: 0 10px 30px -22px rgba(0,0,0,.9);
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.term:hover { border-color: var(--line-2); border-left-color: var(--accent); transform: translateY(-3px); box-shadow: 0 16px 34px -20px rgba(0,0,0,.9); }
.term h3 { font-size: 1.08rem; line-height: 1.3; margin-bottom: 10px; color: var(--white); }
.term p { font-size: .92rem; line-height: 1.6; color: var(--muted); }
.term .see { margin-top: 12px; font-size: .8rem; color: var(--muted-2); }
.term .see a { color: var(--accent); }
.term .see a:hover { color: var(--white); }
.glossary-empty { text-align: center; color: var(--muted-2); padding: 70px 0; display: none; }
@media (max-width: 640px) {
  .glossary-tools { padding: 14px 0 12px; }
  /* Recherche : input pleine largeur, compteur en dessous (plus d'entassement) */
  .glossary-search { flex-direction: column; align-items: stretch; gap: 8px; }
  .glossary-count { margin-left: 0; }
  /* Catégories : rangée qui défile horizontalement plutôt que de s'empiler */
  .cat-index { flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin-top: 14px; padding-bottom: 4px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .cat-index::-webkit-scrollbar { display: none; }
  .cat-index button { flex: 0 0 auto; white-space: nowrap; }
  .terms { grid-template-columns: 1fr; gap: 14px; }
  .glossary-cat { margin-top: 34px; }
  .glossary-cat__h { font-size: 1.35rem; margin-bottom: 16px; }
}