/* getstreampod.com. Référence : maquette Figma « 19 · Site v1, maquette » (accueil 1440 120:1152, téléphone 390
   122:2, note de passation 125:216, storyboard 126:2). Toutes les valeurs de la maquette sont ici, en variables.
   Points de rupture (les variables ne valent pas dans @media) : ordinateur ≥ 1100 px (mise en page 1440, fluide
   jusqu'à 1100), intermédiaire 700 à 1099 px, téléphone < 700 px (mise en page 390). */
:root {
  color-scheme: light;

  /* Couleurs */
  --bone: #F5F0E8;
  --ink: #1F1D1A;
  --ink-85: rgba(31, 29, 26, .85);
  --ink-82: rgba(31, 29, 26, .82);
  --ink-72: rgba(31, 29, 26, .72);
  --ink-68: rgba(31, 29, 26, .68);
  /* Encre à 64 % : plus petit gris du site hors scène, 4,8:1 sur bone (AA). La maquette avait 55 et 60 % pour les
     liens, lignes de faits, mentions et pièces éteintes ; relevé par décision de l'orchestrateur du 13/11. */
  --ink-64: rgba(31, 29, 26, .64);
  --ink-55: rgba(31, 29, 26, .55);
  --ink-50: rgba(31, 29, 26, .50);
  --ink-32: rgba(31, 29, 26, .32);
  --ink-10: rgba(31, 29, 26, .10);
  --ink-08: rgba(31, 29, 26, .08);
  --ink-06: rgba(31, 29, 26, .06);
  --ink-05: rgba(31, 29, 26, .05);
  --cobalt: #3552E0;
  --cobalt-clair: #5C78F5;
  --cobalt-16: rgba(53, 82, 224, .16);
  --cobalt-18: rgba(53, 82, 224, .18);
  --periwinkle: #C9CDEB;
  --carte: rgba(255, 255, 255, .6);
  --carte-survol: rgba(255, 255, 255, .8);
  --pastille: rgba(255, 255, 255, .72);
  --verre: rgba(247, 247, 250, .70);
  --verre-notif: rgba(247, 247, 250, .68);
  --verre-bord: rgba(255, 255, 255, .9);
  --mac-cadre: #16161A;
  --mac-bord: #3A3A40;

  /* Typographie : SF Pro par la pile système, aucun fichier à charger */
  --police: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif;
  /* Medium 510 et Semibold 590 de Figma : 500 et 600, que Chrome comme Safari servent en SF Medium et Semibold. */
  --medium: 500;
  --semibold: 600;
  --bold: 700;

  /* Approche : Figma dessine SF Pro Text (< 20 px) et Display (≥ 20 px) sans l'approche automatique que la police
     système des navigateurs applique ; ces corrections par taille rendent les largeurs de la maquette. Sur Mac et iOS
     seulement (classe sf posée dans <head>) : ailleurs la police est autre et elles valent 0. */
  --ls11: 0; --ls12: 0; --ls13: 0; --ls14: 0; --ls15: 0; --ls16: 0; --ls17: 0; --ls18: 0; --ls19: 0; --ls20: 0; --ls22: 0; --ls24: 0; --ls26: 0; --ls28: 0; --ls34: 0; --ls38: 0; --ls42: 0; --ls50: 0; --ls52: 0; --ls64: 0; --ls84: 0; --ls16r: 0; --ls17r: 0;

  /* Rayons */
  --r-pastille: 99px;
  --r-carte: 22px;
  --r-bouton: 16px;
  --r-mac: 26px;
  --r-scene-tel: 24px;

  /* Ombres */
  --ombre-nav: 0 6px 24px rgba(77, 56, 31, .08);
  --ombre-nav-ouverte: 0 10px 30px rgba(77, 56, 31, .12);
  --ombre-bouton: 0 10px 24px -6px rgba(51, 38, 26, .22);
  --ombre-bouton-survol: 0 14px 30px -6px rgba(51, 38, 26, .28);
  --ombre-mac: 0 30px 60px rgba(64, 46, 26, .18);

  /* Espacements */
  --marge: clamp(20px, 5.6vw, 80px);
  --marge-titre: 70px;
  --largeur-contenu: 1216px;
  --colonne-texte: 720px;
  --entre-cartes: 24px;

  /* Mouvements (storyboard 126:2) */
  --courbe-entree: cubic-bezier(.2, .8, .2, 1);
  --courbe-ressort: cubic-bezier(.34, 1.3, .64, 1);
}

.sf {
  --ls11: -0.06; --ls12: 0; --ls13: 0.08; --ls14: 0.15; --ls15: 0.24; --ls16: 0.36; --ls17: 0.44; --ls18: 0.5; --ls19: 0.55; --ls20: 0.46; --ls22: -0.32; --ls24: -0.3; --ls26: -0.33; --ls28: -0.37; --ls34: -0.38; --ls38: -0.36; --ls42: -0.35; --ls50: -0.33; --ls52: -0.31; --ls64: -0.2; --ls84: 0;
  --ls16r: 0.25; --ls17r: 0.41; /* texte courant en Regular */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--police);
  font-weight: var(--medium);
  font-size: 17px; letter-spacing: calc(var(--ls17) * 1px);
  line-height: 25px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, svg, picture { display: block; }
picture img { width: 100%; height: 100%; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.gris { color: var(--ink-32); }
.masque {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.evitement {
  position: absolute; left: 16px; top: -60px; z-index: 30;
  background: var(--ink); color: var(--bone); padding: 10px 16px; border-radius: var(--r-pastille);
  font-size: 14px; letter-spacing: calc(var(--ls14) * 1px); font-weight: var(--semibold);
}
.evitement:focus { top: 16px; }
@media (prefers-reduced-motion: no-preference) { .evitement { transition: top .12s ease-out; } }

/* ---------- Navigation ---------- */
.entete { display: flex; justify-content: center; padding-top: 24px; }
.nav {
  background: var(--pastille);
  border: 1px solid var(--ink-06);
  border-radius: var(--r-pastille);
  box-shadow: var(--ombre-nav);
}
.nav-ligne { display: flex; align-items: center; gap: 30px; padding: 8px 8px 8px 10px; }
.marque { display: flex; align-items: center; gap: 9px; font-weight: var(--bold); font-size: 17px; line-height: 20px; letter-spacing: calc(-.4px + var(--ls17) * 1px); }
.marque img { width: 30px; height: 30px; }
.nav-liens { display: flex; gap: 26px; font-size: 15px; letter-spacing: calc(var(--ls15) * 1px); line-height: 18px; }
.nav-liens a, .pied-liens a { color: var(--ink-64); transition: color .12s ease-out; }
.pied-liens a { color: var(--ink-68); }
.nav-liens a:hover, .pied-liens a:hover { color: var(--ink); }
.nav-telecharger {
  background: var(--ink); color: var(--bone); border-radius: var(--r-pastille);
  padding: 10px 18px; font-size: 14px; letter-spacing: calc(var(--ls14) * 1px); line-height: 17px; font-weight: var(--semibold);
}
.nav-menu, .menu-tel { display: none; }

/* ---------- Boutons et lignes de faits ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--ink); color: var(--bone);
  border-radius: var(--r-bouton);
  padding: 17px 26px 17px 24px;
  font-size: 18px; line-height: 21px; font-weight: var(--semibold); letter-spacing: calc(-.2px + var(--ls18) * 1px);
  box-shadow: var(--ombre-bouton);
  transition: transform .15s ease-out, box-shadow .15s ease-out;
}
.bouton svg { width: 20px; height: 20px; flex: none; }
.bouton:hover { transform: translateY(-1px); box-shadow: var(--ombre-bouton-survol); }
.bouton:active { transform: none; box-shadow: var(--ombre-bouton); }
.faits-ligne { font-size: 13px; letter-spacing: calc(var(--ls13) * 1px); line-height: 16px; font-weight: var(--semibold); color: var(--ink-64); text-align: center; }
.faits-ligne span { white-space: pre-wrap; }
.seulement-tel, .coupe-tel { display: none !important; }

/* ---------- Premier écran ---------- */
.accroche { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 var(--marge-titre); }
.titre-un {
  margin-top: 89px;
  font-size: 84px; line-height: 86px; letter-spacing: calc(-2.9px + var(--ls84) * 1px); font-weight: var(--bold);
}
.titre-un > span { display: block; }
.apps { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.apps li {
  display: flex; align-items: center; gap: 8px;
  background: var(--pastille); border-radius: var(--r-pastille);
  padding: 8px 15px 8px 9px;
  font-size: 15px; letter-spacing: calc(var(--ls15) * 1px); line-height: 18px; font-weight: var(--semibold); color: var(--ink-85);
}
.apps img { width: 22px; height: 22px; }
.sous-titre { margin-top: 24px; font-size: 20px; line-height: 24px; letter-spacing: calc(-.2px + var(--ls20) * 1px); color: var(--ink-64); }
.accroche .appel { display: flex; flex-direction: column; align-items: center; gap: 23px; margin-top: 36px; }

/* ---------- Scène : la vraie app, cliquable ----------
   Tout ce qui est dans la scène est dessiné en unités --u : 1/1040 de la largeur de la scène sur ordinateur
   (cadre du Mac de 1040 px), 1/350 sur téléphone. La scène garde ainsi ses proportions à toutes les largeurs. */
.scene {
  position: relative;
  container-type: inline-size;
  width: min(1040px, 100% - 2 * var(--marge));
  margin: 58px auto 0;
  --u: calc(100cqw / 1040);
}
.mac {
  position: relative;
  height: calc(650 * var(--u));
  background: var(--mac-cadre);
  border: calc(1.5 * var(--u)) solid var(--mac-bord);
  border-radius: calc(26 * var(--u));
  box-shadow: var(--ombre-mac);
}
.ecran {
  position: absolute; inset: calc(10.5 * var(--u));
  border-radius: calc(15 * var(--u));
  overflow: hidden;
  background: var(--periwinkle);
  font-size: calc(13 * var(--u)); letter-spacing: calc(var(--ls13) * var(--u)); line-height: 1.2;
}
.fond-ecran { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.barre-menus {
  position: absolute; left: 0; right: 0; top: 0; height: calc(30 * var(--u));
  background: rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(calc(10 * var(--u))); backdrop-filter: blur(calc(10 * var(--u)));
}
.menus { position: absolute; left: calc(18 * var(--u)); top: calc(7 * var(--u)); display: flex; gap: calc(18 * var(--u)); font-size: calc(13 * var(--u)); letter-spacing: calc(var(--ls13) * var(--u)); line-height: calc(16 * var(--u)); color: var(--ink-85); }
.menus b { color: var(--ink); font-weight: var(--bold); }
.extras { position: absolute; right: calc(18 * var(--u)); top: calc(4.5 * var(--u)); display: flex; align-items: center; gap: calc(14 * var(--u)); }
.item-streampod { display: block; background: var(--cobalt); border-radius: calc(6 * var(--u)); padding: calc(2 * var(--u)) calc(6 * var(--u)); }
.item-streampod img { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.extras > img:nth-of-type(1) { width: calc(17 * var(--u)); height: calc(13 * var(--u)); }
.extras > img:nth-of-type(2) { width: calc(17 * var(--u)); height: calc(15 * var(--u)); }
.horloge { font-size: calc(13 * var(--u)); letter-spacing: calc(var(--ls13) * var(--u)); line-height: calc(16 * var(--u)); white-space: pre; color: var(--ink); }
.encoche { position: absolute; left: calc(423 * var(--u)); top: calc(-2 * var(--u)); width: calc(170 * var(--u)); height: calc(26 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--mac-cadre); }

/* Notification de Sam */
.notification {
  position: absolute; left: calc(18 * var(--u)); top: calc(46 * var(--u));
  display: flex; align-items: center; gap: calc(11 * var(--u));
  padding: calc(11 * var(--u)) calc(16 * var(--u)) calc(11 * var(--u)) calc(11 * var(--u));
  background: var(--verre-notif);
  border: 1px solid var(--verre-bord);
  border-radius: calc(20 * var(--u));
  box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(26, 31, 77, .16);
  -webkit-backdrop-filter: blur(calc(15 * var(--u))); backdrop-filter: blur(calc(15 * var(--u)));
  white-space: nowrap;
}
.notification > img { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
.notification > div { display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.notif-tete { display: flex; align-items: center; gap: calc(7 * var(--u)); font-size: calc(13 * var(--u)); letter-spacing: calc(var(--ls13) * var(--u)); line-height: calc(16 * var(--u)); }
.notif-tete b { font-weight: var(--bold); }
.notif-tete span { font-size: calc(11 * var(--u)); letter-spacing: calc(var(--ls11) * var(--u)); line-height: calc(13 * var(--u)); color: rgba(31, 29, 26, .45); }
.notif-texte { font-size: calc(13 * var(--u)); letter-spacing: calc(var(--ls13) * var(--u)); line-height: calc(16 * var(--u)); color: rgba(31, 29, 26, .8); }

/* Panneau de StreamPod */
.panneau {
  position: absolute; left: calc(660 * var(--u)); top: calc(38 * var(--u)); width: calc(342 * var(--u));
  display: flex; flex-direction: column; gap: calc(11 * var(--u));
  padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(11 * var(--u));
  background: var(--verre);
  border: 1px solid var(--verre-bord);
  border-radius: calc(26 * var(--u));
  box-shadow: 0 calc(20 * var(--u)) calc(50 * var(--u)) rgba(26, 31, 77, .22);
  -webkit-backdrop-filter: blur(calc(20 * var(--u))); backdrop-filter: blur(calc(20 * var(--u)));
  transform-origin: calc(143 * var(--u)) calc(-23 * var(--u));
}
.en-ecoute { display: flex; align-items: center; gap: calc(11 * var(--u)); }
.pochette { position: relative; width: calc(52 * var(--u)); height: calc(52 * var(--u)); flex: none; }
.pochette picture img { border-radius: calc(11 * var(--u)); }
.pastille-spotify { position: absolute; left: calc(38 * var(--u)); top: calc(38 * var(--u)); width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.morceau { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(1 * var(--u)); white-space: nowrap; }
.morceau-titre { font-size: calc(15 * var(--u)); letter-spacing: calc(var(--ls15) * var(--u)); line-height: calc(18 * var(--u)); font-weight: var(--semibold); }
.morceau-artiste { font-size: calc(13 * var(--u)); letter-spacing: calc(var(--ls13) * var(--u)); line-height: calc(16 * var(--u)); font-weight: 400; color: var(--ink-55); }
.commandes { display: flex; gap: calc(7 * var(--u)); }
.commandes span { display: grid; place-items: center; width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; background: rgba(31, 29, 26, .07); }
.commandes img { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.etiquettes { display: flex; justify-content: space-between; padding: calc(3 * var(--u)) calc(3 * var(--u)) 0; font-size: calc(12 * var(--u)); letter-spacing: calc(var(--ls12) * var(--u)); line-height: calc(14 * var(--u)); color: var(--ink-50); white-space: nowrap; }
.etiquettes span:first-child { font-weight: var(--semibold); }
.tuiles { display: flex; flex-direction: column; gap: calc(7 * var(--u)); }
.tuile {
  position: relative; height: calc(50 * var(--u));
  border-radius: calc(15 * var(--u));
  overflow: hidden;
  background: var(--ink-05);
  cursor: pointer;
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .35s ease-out;
}
.tuile[data-allumee] { background: var(--cobalt-16); }
.tuile::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity .12s ease-out; pointer-events: none; }
.tuile:hover::after { opacity: .14; }
.tuile:focus-visible { outline-offset: 2px; }
.tuile-niveau {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, var(--cobalt), var(--cobalt-clair));
  transition: width .35s var(--courbe-entree);
}
.tuile[data-allumee] .tuile-niveau { width: calc(var(--vol) * 100%); }
.tuile-ligne { position: absolute; inset: 0; color: var(--ink); }
.tuile-ligne picture { position: absolute; left: calc(10 * var(--u)); top: calc(10 * var(--u)); width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.tuile-nom { position: absolute; left: calc(48 * var(--u)); top: calc(16 * var(--u)); font-size: calc(15 * var(--u)); letter-spacing: calc(var(--ls15) * var(--u)); line-height: calc(18 * var(--u)); font-weight: var(--semibold); white-space: nowrap; }
.barres { position: absolute; left: calc(284 * var(--u)); top: calc(17 * var(--u)); width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: var(--cobalt); opacity: 0; transition: opacity .35s ease-out; }
.tuile[data-allumee] .barres { opacity: 1; }
/* Ce qui est posé sur le niveau s'écrit en blanc, comme dans l'app : seconde ligne découpée à la largeur du niveau. */
.tuile-sur { color: #fff; clip-path: inset(0 100% 0 0); transition: clip-path .35s var(--courbe-entree); }
.tuile[data-allumee] .tuile-sur { clip-path: inset(0 calc(100% - var(--vol) * 100%) 0 0); }
.tuile-sur .barres { color: #fff; }
.tuile.glisse .tuile-niveau, .tuile.glisse .tuile-sur { transition: none; }
.pied-panneau { display: flex; align-items: center; gap: calc(7 * var(--u)); padding-left: calc(3 * var(--u)); font-size: calc(12 * var(--u)); letter-spacing: calc(var(--ls12) * var(--u)); line-height: calc(14 * var(--u)); color: var(--ink-55); }
.pied-panneau img { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }

/* Démo : panneau fermé et message absent avant la séquence (classes posées par le script). */
.panneau, .notification { transition: opacity .35s var(--courbe-entree), transform .4s var(--courbe-entree), visibility .35s; }
.scene.panneau-ferme .panneau { opacity: 0; visibility: hidden; transform: scale(.6); }
.scene.panneau-ouvre .panneau { transition: opacity .25s ease-out, transform .6s var(--courbe-ressort), visibility 0s; }
.scene.sans-message .notification { opacity: 0; visibility: hidden; transform: translateX(calc(-100% - 30 * var(--u))); }

/* Enceintes sous le Mac */
.pieces { position: relative; height: calc(270 * var(--u)); margin-top: calc(58 * var(--u)); }
.enceinte {
  position: absolute; top: 0; width: calc(200 * var(--u)); height: calc(250 * var(--u));
  display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u));
  padding-top: calc(192 * var(--u));
  -webkit-tap-highlight-color: transparent;
  border-radius: calc(16 * var(--u));
}
.enceinte[data-piece="office"] { left: calc(90 * var(--u)); --ix: 39; --iy: 80; --iw: 123; --ih: 100; --gx: 35; --gy: 89; --gw: 130; --gh: 89; --ry: 35; --sx: 60; --sw: 80; }
.enceinte[data-piece="living-room"] { left: calc(300 * var(--u)); --ix: 9; --iy: 1; --iw: 183; --ih: 182; --gx: 3; --gy: 8; --gw: 195; --gh: 173; --ry: -44; --sx: 41; --sw: 119; }
.enceinte[data-piece="bedroom"] { left: calc(540 * var(--u)); --ix: 20; --iy: 36; --iw: 160; --ih: 146; --gx: 15; --gy: 43; --gw: 170; --gh: 136; --ry: -9; --sx: 48; --sw: 104; }
.enceinte[data-piece="kitchen"] { left: calc(750 * var(--u)); --ix: 39; --iy: 80; --iw: 123; --ih: 100; --gx: 35; --gy: 89; --gw: 130; --gh: 89; --ry: 35; --sx: 60; --sw: 80; }
.enceinte picture, .halo, .ondes, .ombre { position: absolute; pointer-events: none; }
.enceinte picture { left: calc(var(--ix) * var(--u)); top: calc(var(--iy) * var(--u)); width: calc(var(--iw) * var(--u)); height: calc(var(--ih) * var(--u)); }
.enceinte-image { object-fit: contain; transition: opacity .35s ease-out; }
.halo {
  left: calc(var(--gx) * var(--u)); top: calc(var(--gy) * var(--u)); width: calc(var(--gw) * var(--u)); height: calc(var(--gh) * var(--u));
  border-radius: 50%; background: rgba(53, 82, 224, .28); filter: blur(calc(23 * var(--u)));
  opacity: 0; transition: opacity .4s ease-out;
}
.ondes { left: calc(40 * var(--u)); top: calc(var(--ry) * var(--u)); width: calc(120 * var(--u)); height: calc(44 * var(--u)); color: var(--cobalt); opacity: 0; transition: opacity .4s ease-out; }
.ombre { left: calc(var(--sx) * var(--u)); top: calc(162 * var(--u)); width: calc(var(--sw) * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: rgba(90, 74, 53, .22); filter: blur(calc(3 * var(--u))); }
.enceinte[aria-pressed="true"] .halo, .enceinte[aria-pressed="true"] .ondes { opacity: 1; }
.enceinte[aria-pressed="false"] .enceinte-image { opacity: .5; }
.enceinte-nom { position: relative; font-size: calc(17 * var(--u)); line-height: calc(20 * var(--u)); font-weight: var(--bold); letter-spacing: calc(calc(-.3 * var(--u)) + var(--ls17) * var(--u)); color: var(--ink); white-space: nowrap; transition: color .35s ease-out; }
.enceinte[aria-pressed="false"] .enceinte-nom { color: var(--ink-64); }
.enceinte-etat { position: relative; display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(13 * var(--u)); letter-spacing: calc(var(--ls13) * var(--u)); line-height: calc(16 * var(--u)); font-weight: var(--semibold); color: var(--cobalt); }
.jauge { position: relative; width: calc(44 * var(--u)); height: calc(5 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--cobalt-18); overflow: hidden; }
.jauge span { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--vol) * 100%); border-radius: inherit; background: var(--cobalt); }
.eteinte { display: none; color: var(--ink-64); }
.enceinte[aria-pressed="false"] .jauge, .enceinte[aria-pressed="false"] .pourcent { display: none; }
.enceinte[aria-pressed="false"] .eteinte { display: inline; }
@keyframes respire { 50% { filter: opacity(.45); } }
.anim .enceinte[aria-pressed="true"] .ondes { animation: respire 2.4s ease-in-out infinite; }
.anim .scene.hors-ecran .ondes { animation-play-state: paused; }

/* ---------- Faits pratiques ---------- */
.faits {
  display: grid; grid-template-columns: repeat(3, minmax(0, 340px)); justify-content: center; gap: 40px;
  padding: 110px var(--marge) 0;
}
.fait { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.objet { width: 220px; height: 220px; }
.fait h2 { font-size: 28px; line-height: 32px; letter-spacing: calc(-.8px + var(--ls28) * 1px); font-weight: var(--bold); }
.fait p { max-width: 310px; color: var(--ink-64); }

/* ---------- Questions ---------- */
.faq { display: flex; flex-direction: column; align-items: center; padding: 150px var(--marge) 0; }
.titre-deux { font-size: 52px; line-height: 56px; letter-spacing: calc(-1.8px + var(--ls52) * 1px); font-weight: var(--bold); text-align: center; }
.questions {
  display: grid; grid-template-columns: repeat(3, minmax(0, 392px)); gap: var(--entre-cartes);
  width: 100%; justify-content: center; margin-top: 66px;
}
.question {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--carte); border: 1px solid var(--ink-05); border-radius: var(--r-carte);
  padding: 24px 26px 26px;
  transition: background-color .12s ease-out;
}
.question:hover { background: var(--carte-survol); }
.question h3 { font-size: 19px; line-height: 25px; letter-spacing: calc(-.3px + var(--ls19) * 1px); font-weight: var(--bold); }
.question p { font-size: 15px; letter-spacing: calc(var(--ls15) * 1px); line-height: 23px; color: var(--ink-64); }
.question h3 button { display: none; }

/* ---------- Appel final ---------- */
.cloture { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 170px var(--marge-titre) 0; }
.titre-cloture { font-size: min(64px, 4.45vw); line-height: 1.0625; letter-spacing: calc(-.0344em + var(--ls64) * 1px); font-weight: var(--bold); }
.titre-cloture > span { display: block; }
.cloture .appel { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 50px; }

/* ---------- Pied de page ---------- */
.pied { width: min(1280px, 100% - 2 * var(--marge)); margin: 130px auto 0; padding-bottom: 44px; border-top: 1px solid var(--ink-10); }
.pied-ligne { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 36px; }
.marque-pied { font-size: 15px; line-height: 18px; letter-spacing: calc(-.3px + var(--ls15) * 1px); }
.marque-pied img { width: 24px; height: 24px; }
.pied-liens { display: flex; align-items: center; gap: 28px; font-size: 14px; letter-spacing: calc(var(--ls14) * 1px); line-height: 17px; }
.signature { font-size: 13px; letter-spacing: calc(var(--ls13) * 1px); line-height: 16px; color: var(--ink-64); }
.mentions { padding-top: 22px; font-size: 12px; letter-spacing: calc(var(--ls12) * 1px); line-height: 18px; color: var(--ink-64); }

/* ---------- Pages de texte (confidentialité, changelog, 404) ---------- */
.article { width: min(var(--colonne-texte), 100% - 40px); margin: 0 auto; padding-top: 110px; }
.article h1 { font-size: 64px; line-height: 68px; letter-spacing: calc(-2.2px + var(--ls64) * 1px); font-weight: var(--bold); }
.article .chapeau { padding: 14px 0 28px; font-size: 17px; letter-spacing: calc(var(--ls17) * 1px); line-height: 24px; color: var(--ink-64); }
.article h2 { padding: 32px 0 12px; font-size: 26px; line-height: 32px; letter-spacing: calc(-.6px + var(--ls26) * 1px); font-weight: var(--bold); }
.article p { padding-bottom: 16px; font-size: 17px; letter-spacing: calc(var(--ls17r) * 1px); line-height: 28px; font-weight: 400; color: var(--ink-82); }
.article p a, .article .lien { color: var(--cobalt); text-decoration: underline; text-underline-offset: 2px; }
.article p:last-child { padding-bottom: 0; }
.liste-cle { margin: 4px 0 20px; padding: 4px 28px; background: var(--carte); border: 1px solid var(--ink-05); border-radius: 18px; }
.liste-cle div { padding: 18px 0; border-bottom: 1px solid var(--ink-08); }
.liste-cle div:last-child { border-bottom: 0; }
.liste-cle dt { font-size: 17px; letter-spacing: calc(var(--ls17) * 1px); line-height: 24px; font-weight: var(--semibold); }
.liste-cle dd { margin: 4px 0 0; font-size: 16px; letter-spacing: calc(var(--ls16r) * 1px); line-height: 26px; font-weight: 400; color: var(--ink-82); }
.version-tete { display: flex; align-items: center; gap: 12px; padding-top: 20px; }
.version { background: var(--cobalt); color: #fff; border-radius: var(--r-pastille); padding: 6px 13px; font-size: 14px; letter-spacing: calc(var(--ls14) * 1px); line-height: 17px; font-weight: var(--semibold); }
.version-tete time { font-size: 15px; letter-spacing: calc(var(--ls15) * 1px); line-height: 18px; color: var(--ink-64); }
.notes { display: flex; flex-direction: column; gap: 10px; }
.notes li { position: relative; padding-left: 18px; font-size: 17px; letter-spacing: calc(var(--ls17r) * 1px); line-height: 28px; font-weight: 400; color: var(--ink-82); }
.notes li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: rgba(31, 29, 26, .4); }

/* ---------- Mouvements (storyboard 126:2), seulement si le visiteur n'en demande pas moins ---------- */
@keyframes monte { from { opacity: 0; transform: translateY(var(--de, 12px)); } }
.anim .entree { animation: monte var(--duree, 400ms) var(--courbe-entree) var(--delai, 0ms) both; }
.anim .titre-un .entree { --duree: 500ms; }
.anim .nav.entree { --de: 0px; }
.anim .pieces.entree { --duree: 500ms; }
/* Dévoilement au défilement : la section entre de 15 % dans la fenêtre (script), une seule fois. */
.anim [data-devoile]:not(.vu) .fait > *,
.anim [data-devoile]:not(.vu) .titre-deux,
.anim [data-devoile]:not(.vu) .question,
.anim .cloture:not(.vu) > * { opacity: 0; transform: translateY(16px); }
.anim [data-devoile]:not(.vu) .objet { transform: translateY(12px); }
.anim [data-devoile] .fait > *,
.anim [data-devoile] .titre-deux,
.anim [data-devoile] .question,
.anim .cloture > * { transition: opacity .5s var(--courbe-entree) var(--d, 0ms), transform .5s var(--courbe-entree) var(--d, 0ms), background-color .12s ease-out; }
.anim [data-devoile] .objet { transition-duration: .4s; }
.fait:nth-child(2) { --i: 80ms; }
.fait:nth-child(3) { --i: 160ms; }
.fait > h2, .fait > p { --d: var(--i, 0ms); }
.fait > .objet { --d: calc(var(--i, 0ms) + 150ms); }
.question:nth-child(1) { --d: 80ms; } .question:nth-child(2) { --d: 160ms; } .question:nth-child(3) { --d: 240ms; }
.question:nth-child(4) { --d: 320ms; } .question:nth-child(5) { --d: 400ms; } .question:nth-child(6) { --d: 480ms; }
.cloture > .appel { --d: 80ms; }
.question:hover { transition-delay: 0ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bouton, .bouton:hover { transform: none; }
  .tuile, .tuile-niveau, .tuile-sur, .barres, .halo, .ondes, .enceinte-image, .enceinte-nom, .panneau, .notification { transition: none !important; }
}

/* ---------- 1100 à 1440 : mise en page 1440, fluide ---------- */
@media (max-width: 1439px) {
  .questions { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(1224px, 100%); }
}

/* Juste au-dessus de 1100 px, trois faits côte à côte sans titre sur deux lignes. */
@media (max-width: 1159px) {
  .faits { gap: 24px; padding-left: 40px; padding-right: 40px; }
}

/* ---------- 700 à 1099 px ---------- */
@media (max-width: 1099px) {
  .accroche { padding: 0 40px; }
  .titre-un { font-size: clamp(50px, 6.4vw, 84px); line-height: 1.024; letter-spacing: calc(-.0345em + var(--ls64) * 1px); }
  .faits { grid-template-columns: minmax(0, 340px); gap: 64px; }
  .questions { grid-template-columns: minmax(0, var(--colonne-texte)); }
  .cloture { padding-left: 40px; padding-right: 40px; }
  .titre-cloture { font-size: max(38px, 4.45vw); letter-spacing: calc(-.034em + var(--ls52) * 1px); }
}

/* ---------- Téléphone, < 700 px : mise en page 390 ---------- */
@media (max-width: 699px) {
  body { font-size: 16px; letter-spacing: calc(var(--ls16) * 1px); line-height: 24px; }
  .seulement-ordi { display: none !important; }
  .seulement-tel { display: inline-flex !important; }
  .faits-ligne .seulement-tel { display: inline !important; }
  .coupe-tel { display: inline !important; }
  @media (max-width: 359px) { .faits-ligne span { word-spacing: -1.5px; } }

  .entete { position: relative; z-index: 20; display: block; height: 66px; padding: 0; }
  .nav { position: absolute; left: 20px; right: 20px; top: 12px; transition: border-radius .22s ease-out, background-color .22s ease-out, box-shadow .22s ease-out; }
  .nav-ligne { justify-content: space-between; gap: 0; padding: 4px 4px 4px 12px; }
  .nav-liens, .nav-telecharger { display: none; }
  .nav-menu { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--bone); }
  .nav-menu .icone-fermer { display: none; }
  html:not(.js) .nav-menu { visibility: hidden; } /* sans script, le menu ne s'ouvrirait pas : les liens restent au pied */
  .nav.ouverte { border-radius: 28px; background: rgba(255, 255, 255, .92); box-shadow: var(--ombre-nav-ouverte); padding: 4px 4px 14px; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
  .nav.ouverte .nav-ligne { padding: 4px 4px 4px 8px; }
  .nav.ouverte .icone-menu { display: none; }
  .nav.ouverte .icone-fermer { display: block; }
  .nav.ouverte .menu-tel { display: block; }
  .menu-tel li a { display: flex; align-items: center; min-height: 48px; padding: 0 16px; font-size: 18px; line-height: 21px; font-weight: var(--semibold); letter-spacing: calc(-.2px + var(--ls18) * 1px); }
  .anim .nav.ouverte .menu-tel { animation: menu-ouvre .22s var(--courbe-entree) both; transform-origin: top right; }
  @keyframes menu-ouvre { from { opacity: 0; transform: translateY(-6px) scale(.98); } }

  .accroche { padding: 52px 20px 0; gap: 20px; }
  .titre-un { margin-top: 0; font-size: min(50px, 12.8vw); line-height: 1.04; letter-spacing: calc(-.038em + var(--ls50) * 1px); max-width: 350px; }
  .apps { margin-top: 0; gap: 8.6px; }
  .apps li { gap: 6.88px; padding: 6.88px 12.9px 6.88px 7.74px; font-size: 12.9px; letter-spacing: calc(var(--ls13) * 1px); line-height: 15px; }
  .apps img { width: 18.92px; height: 18.92px; }
  .sous-titre { margin-top: 0; max-width: 300px; font-size: 18px; letter-spacing: calc(-.2px + var(--ls18) * 1px); line-height: 25px; }
  .accroche .appel { margin-top: 0; padding-top: 8px; gap: 14px; width: min(350px, 100%); }
  .bouton { width: 100%; padding: 17px 20px; box-shadow: 0 10px 24px rgba(51, 38, 26, .22); }

  .scene { width: min(350px, 100% - 40px); margin-top: 40px; --u: calc(100cqw / 350); }
  .mac { height: calc(446 * var(--u)); background: var(--periwinkle); border: 1px solid var(--ink-08); border-radius: var(--r-scene-tel); box-shadow: none; }
  .ecran { inset: 0; border-radius: calc(var(--r-scene-tel) - 1px); }
  .barre-menus, .encoche { display: none; }
  .notification { left: calc(15 * var(--u)); top: calc(15 * var(--u)); }
  .panneau { --p: calc(100cqw / 350); --u: calc(var(--p) * .93); left: calc(15 * var(--p)); top: calc(89 * var(--p)); }

  .pieces { display: flex; justify-content: space-between; height: auto; margin-top: calc(26 * var(--u)); padding: 0 calc(6 * var(--u)); }
  .enceinte { position: relative; left: auto !important; width: calc(80 * var(--u)); height: auto; gap: calc(3 * var(--u)); padding-top: calc(103 * var(--u)); }
  .enceinte[data-piece="office"], .enceinte[data-piece="kitchen"] { --ix: 13; --iy: 52; --iw: 55; --ih: 45; --gx: 10; --gy: 58; --gw: 60; --gh: 36; }
  .enceinte[data-piece="living-room"] { --ix: -1; --iy: 16; --iw: 82; --ih: 82; --gx: -5; --gy: 23; --gw: 90; --gh: 70; }
  .enceinte[data-piece="bedroom"] { --ix: 4; --iy: 31; --iw: 72; --ih: 66; --gx: 1; --gy: 37; --gw: 79; --gh: 56; }
  .halo { background: rgba(53, 82, 224, .32); filter: blur(calc(9 * var(--u))); }
  .ondes, .ombre, .jauge { display: none; }
  .enceinte[aria-pressed="false"] .enceinte-image { opacity: .75; }
  .enceinte-nom { font-size: calc(13 * var(--u)); line-height: calc(16 * var(--u)); letter-spacing: calc(calc(-.2 * var(--u)) + var(--ls13) * var(--u)); }
  .enceinte-etat { font-size: calc(12 * var(--u)); letter-spacing: calc(var(--ls12) * var(--u)); line-height: calc(14 * var(--u)); }
  .enceinte[aria-pressed="false"] .jauge { display: none; }

  .faits { grid-template-columns: minmax(0, 350px); gap: 56px; padding: 72px 20px 0; }
  .objet { width: 190px; height: 190px; }
  .fait h2 { font-size: 26px; letter-spacing: calc(-.8px + var(--ls26) * 1px); line-height: 30px; }
  .fait p { font-size: 16px; letter-spacing: calc(var(--ls16) * 1px); line-height: 24px; }

  .faq { padding: 96px 20px 0; }
  .titre-deux { font-size: 34px; line-height: 38px; letter-spacing: calc(-1.1px + var(--ls34) * 1px); }
  .questions { grid-template-columns: minmax(0, 350px); gap: 10px; margin-top: 34px; }
  .question { gap: 0; min-height: 60px; padding: 0; border-radius: 18px; }
  .question h3 { font-size: 17px; letter-spacing: calc(-.3px + var(--ls17) * 1px); line-height: 23px; }
  .question h3 { padding: 18px 18px 18px 20px; }
  .js .question h3 { padding: 0; }
  .js .question-texte { display: none; }
  .question h3 button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 58px; padding: 18px 18px 18px 20px; text-align: left; font-weight: inherit; letter-spacing: inherit; }
  .question h3 button svg { flex: none; width: 24px; height: 24px; }
  .question h3 button .moins { display: none; }
  .question.ouverte h3 button .plus { display: none; }
  .question.ouverte h3 button .moins { display: block; }
  .reponse { display: grid; grid-template-rows: 1fr; padding: 0 20px 0 20px; }
  .reponse > div { overflow: hidden; }
  .question p { max-width: 300px; padding-bottom: 18px; }
  .js .question:not(.ouverte) .reponse { grid-template-rows: 0fr; }
  .js .question:not(.ouverte) .reponse > div { visibility: hidden; }
  .question.ouverte h3 button { padding-bottom: 10px; min-height: 0; }
  .anim .reponse { transition: grid-template-rows .2s ease-out; }

  .cloture { padding: 110px 20px 0; }
  .titre-cloture { font-size: min(38px, 10.6vw); line-height: 1.105; letter-spacing: calc(-.034em + var(--ls38) * 1px); max-width: 350px; }
  .cloture .appel { margin-top: 32px; gap: 14px; width: min(350px, 100%); }

  .pied { width: min(350px, 100% - 40px); margin-top: 90px; padding-bottom: 36px; }
  .pied-ligne { display: block; padding-top: 0; }
  .marque-pied { padding: 28px 0 12px; }
  .pied-liens { display: block; font-size: 16px; letter-spacing: calc(var(--ls16) * 1px); line-height: 19px; }
  .pied-liens a { display: flex; align-items: center; min-height: 44px; color: var(--ink-72); }
  .signature { padding-top: 18px; }
  .mentions { padding-top: 8px; }

  .article { padding-top: 56px; }
  .article h1 { font-size: 42px; line-height: 46px; letter-spacing: calc(-1.5px + var(--ls42) * 1px); }
  .article .chapeau { padding: 14px 0 20px; font-size: 15px; letter-spacing: calc(var(--ls15) * 1px); line-height: 24px; }
  .article h2 { padding: 26px 0 12px; font-size: 22px; letter-spacing: calc(-.6px + var(--ls22) * 1px); line-height: 28px; }
  .article p, .notes li { font-size: 16px; letter-spacing: calc(var(--ls16) * 1px); line-height: 26px; }
  .notes li::before { top: 10px; }
  .version-tete { padding-top: 11px; }
  .liste-cle { padding: 4px 20px; }
  .liste-cle dt { font-size: 16px; letter-spacing: calc(var(--ls16) * 1px); }
  .liste-cle dd { font-size: 15px; letter-spacing: calc(var(--ls15) * 1px); line-height: 24px; }
}