/* ==========================================================================
   R-SYSTEM — Feuille de styles
   Consomme uniquement les tokens sémantiques définis dans tokens.css.
   ========================================================================== */

/* ---------- Socle ---------- */

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-display);
  font-size:var(--size-body);
  font-weight:var(--weight-thin);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* height:auto neutralise l'attribut height du HTML dès que la largeur est
   contrainte : sans lui, un visuel réduit à la largeur du conteneur garde la
   hauteur déclarée dans le balisage et se retrouve étiré. Les composants qui
   imposent une hauteur le font par une classe, plus spécifique, et ne sont
   pas touchés. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

:where(a,button,summary,[tabindex]):focus-visible{
  outline:var(--focus-width) solid var(--focus-ring);
  outline-offset:var(--focus-offset);
  border-radius:var(--radius-sharp);
}

.wrap{width:var(--layout-wide);margin-inline:auto}

.skip-link{
  position:absolute;left:var(--space-4);top:var(--space-4);
  transform:translateY(-200%);
  background:var(--accent-surface);color:var(--accent-fg);
  font-family:var(--font-mono);font-size:var(--size-mono-sm);
  padding:var(--space-3) var(--space-5);border-radius:var(--radius-sharp);
  z-index:calc(var(--z-header) + 10);
  transition:transform var(--duration-fast) var(--ease-standard);
}
.skip-link:focus-visible{transform:translateY(0)}

/* ---------- Typographie ---------- */

h1,h2,h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-bold);
  line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);
}

h1{font-size:var(--size-display)}
h2{font-size:var(--size-h2)}
h3{font-size:var(--size-h3);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight)}

.thin{font-weight:var(--weight-thin);letter-spacing:-.02em}
.accent{color:var(--accent)}

.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--size-mono-sm);
  font-weight:var(--weight-mono);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--accent);
  display:flex;align-items:center;gap:var(--space-3);
  margin:0 0 var(--space-7);
}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;flex:none}
.eyebrow--center{justify-content:center}

.lead{
  font-size:var(--size-lead);
  font-weight:var(--weight-thin);
  line-height:var(--leading-snug);
  color:var(--fg-soft);
  max-width:var(--measure-lead);
}

.mono{font-family:var(--font-mono);font-size:var(--size-mono);letter-spacing:.02em}
.mono-tag{
  font-family:var(--font-mono);font-size:var(--size-mono-xs);font-weight:var(--weight-mono);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--fg-mute);
}

/* ---------- Sections ---------- */

section{
  padding:var(--space-section) 0;
  position:relative;
  background:var(--bg);
  color:var(--fg);
}

/* ---------- Placeholders de wireframe ---------- */

.ph{
  position:relative;
  background:
    repeating-linear-gradient(135deg,var(--ph-hatch) 0 12px,transparent 12px 24px),
    var(--ph-fill);
  border:var(--border-hair) dashed var(--ph-border);
  border-radius:var(--radius-sharp);
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:var(--space-6);
  min-height:200px;
}
.ph span{
  font-family:var(--font-mono);font-size:var(--size-mono-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute);
  max-width:var(--measure-caption);line-height:var(--leading-loose);
}

/* ---------- Header ---------- */

header{
  position:sticky;top:0;z-index:var(--z-header);
  min-height:var(--layout-header);
  background:color-mix(in srgb,var(--navy-950) 86%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:var(--border-hair) solid var(--alpha-light-16);
  color:var(--white);
  display:flex;align-items:center;
}
.head-in{
  display:flex;align-items:center;gap:var(--space-8);
  width:var(--layout-wide);margin-inline:auto;
  min-height:var(--layout-header);
}
.logo{font-weight:var(--weight-bold);font-size:20px;letter-spacing:var(--tracking-display)}
.logo em{font-style:normal;color:var(--cyan-500)}

.nav{display:flex;gap:26px;margin-left:auto}
.nav a{
  font-family:var(--font-mono);font-size:var(--size-mono-sm);
  letter-spacing:.1em;text-transform:uppercase;color:var(--grey-200);
  transition:color var(--duration-fast) var(--ease-standard);
}
.nav a:hover{color:var(--cyan-500)}

.nav-toggle{
  display:none;margin-left:auto;
  width:40px;height:40px;place-items:center;
  background:none;border:var(--border-hair) solid var(--alpha-light-16);
  border-radius:var(--radius-sharp);color:var(--white);
  cursor:pointer;
}
.nav-toggle svg{
  width:20px;height:20px;
  stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;
}

/* ---------- Boutons ---------- */

/* background:none et color:inherit sont indispensables : sur un élément
   button, le navigateur impose sinon son fond gris clair et sa couleur de
   texte système, et un bouton fantôme sort en gris délavé alors que le même
   .btn posé sur un lien reste transparent. La règle vaut pour les deux. */
.btn{
  display:inline-flex;align-items:center;gap:var(--space-3);
  font-family:var(--font-mono);font-size:var(--size-mono);font-weight:var(--weight-mono-bold);
  letter-spacing:var(--tracking-mono);text-transform:uppercase;
  padding:17px var(--space-7);border-radius:var(--radius-sharp);
  border:var(--border-hair) solid transparent;
  background:none;color:inherit;
  cursor:pointer;
  transition:transform var(--duration-fast) var(--ease-standard),
             background var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard);
}
.btn:hover{transform:translateY(var(--lift))}
.btn-primary{background:var(--accent-surface);color:var(--accent-fg)}
.btn-ghost{border-color:var(--btn-ghost-border);color:var(--fg)}
.btn-ghost:hover{border-color:var(--accent);background:var(--accent-voile)}
.btn-sm{padding:var(--space-3) var(--space-5);font-size:var(--size-mono-xs)}
.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}

.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.cta-row--center{justify-content:center}
.cta-note{
  font-family:var(--font-mono);font-size:var(--size-mono-xs);
  color:var(--fg-mute);letter-spacing:var(--tracking-mono);
  margin-top:var(--space-5);
}

/* ---------- Champs de formulaire ---------- */

.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field label{
  font-family:var(--font-mono);font-size:var(--size-mono-xs);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--fg-mute);
}
.field input,.field select,.field textarea{
  font-family:var(--font-display);font-size:var(--size-sm);font-weight:var(--weight-thin);
  color:var(--fg);
  background:transparent;
  border:var(--border-hair) solid var(--rule-strong);
  border-radius:var(--radius-sharp);
  padding:var(--space-3) var(--space-4);
  transition:border-color var(--duration-fast) var(--ease-standard);
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--accent)}
/* La liste déroulante native se rend hors de la page : sans indication, elle
   s'ouvre en thème clair système avec des options héritant du texte blanc.
   Les champs ne vivent que sur les fonds navy, le popup suit donc le sombre. */
.field select{color-scheme:dark}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:var(--focus-width) solid var(--focus-ring);
  outline-offset:var(--focus-offset);
  border-color:var(--accent);
}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-mute)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--danger)}
.field .field-help{font-family:var(--font-mono);font-size:var(--size-mono-xs);color:var(--fg-mute)}
.field .field-error{font-family:var(--font-mono);font-size:var(--size-mono-xs);color:var(--danger-fg)}

/* ---------- Hero ---------- */

.hero{padding-top:clamp(60px,9vh,110px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--gutter);align-items:center}
.hero h1{margin-bottom:var(--space-7)}
.hero .lead{margin-bottom:var(--space-10)}
.hero-ph{min-height:440px}

.specbar{
  margin-top:var(--space-block);
  border-top:var(--border-hair) solid var(--rule);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.spec{padding:var(--space-7) var(--space-6) 0;border-right:var(--border-hair) solid var(--rule)}
.spec:last-child{border-right:0}
.spec b{
  display:block;font-family:var(--font-mono);font-size:var(--size-stat);
  font-weight:var(--weight-mono-bold);letter-spacing:-.04em;color:var(--accent);line-height:1;
}
.spec small{
  display:block;margin-top:var(--space-2);font-size:var(--size-xs);
  font-weight:var(--weight-thin);color:var(--fg-soft);line-height:1.4;
}

/* ---------- Problème ---------- */

.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);align-items:start}
.pain{margin-top:var(--space-10);display:grid;gap:0;border-top:var(--border-hair) solid var(--rule)}
.pain div{
  padding:var(--space-6) 0;border-bottom:var(--border-hair) solid var(--rule);
  display:grid;grid-template-columns:auto 1fr;gap:var(--space-5);align-items:baseline;
}
.pain span{font-family:var(--font-mono);font-size:var(--size-mono-sm);color:var(--accent)}
.pain p{margin:0;font-size:18px;font-weight:var(--weight-thin);line-height:var(--leading-snug)}

/* ---------- Étapes ---------- */

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-10);margin-top:var(--space-18)}
.step{border-top:var(--border-accent) solid var(--accent);padding-top:var(--space-6)}
.step b{
  font-family:var(--font-mono);font-size:var(--size-mono-sm);letter-spacing:var(--tracking-caps);
  color:var(--accent);display:block;margin-bottom:var(--space-5);
}
.step h3{margin-bottom:var(--space-3)}
.step p{margin:0;color:var(--fg-soft);font-size:var(--size-sm);font-weight:var(--weight-thin)}
.step .ph,.step img{margin-top:var(--space-7);min-height:160px}

/* ---------- Comparatif ---------- */

.cmp{margin-top:var(--space-16);border-top:var(--border-hair) solid var(--rule)}
.cmp-head,.cmp-row{
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--space-6);
  align-items:center;padding:var(--space-6) 0;
  border-bottom:var(--border-hair) solid var(--rule);
}
.cmp-head{padding:var(--space-4) 0}
.cmp-head span{
  font-family:var(--font-mono);font-size:var(--size-mono-xs);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--fg-mute);
}
.cmp-head span.us{color:var(--accent)}
.cmp-row p{margin:0;font-size:var(--size-body);font-weight:var(--weight-thin)}
.cmp-row .val{font-family:var(--font-mono);font-size:var(--size-mono);line-height:1.5}
.cmp-row .val.us{color:var(--accent)}
.cmp-row .val.them{color:var(--fg-mute)}

/* ---------- Matériel ---------- */

.kit{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8);margin-top:var(--space-16)}
.kit article{
  border:var(--border-hair) solid var(--card-border);border-radius:var(--radius-sharp);
  padding:var(--space-7);display:flex;flex-direction:column;gap:var(--space-5);
}
.kit .ph{min-height:220px}
.kit h3{font-size:20px}
.kit p{margin:0;font-size:var(--size-xs);font-weight:var(--weight-thin);color:var(--fg-soft)}
.kit dl{
  margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--space-1) var(--space-4);
  font-family:var(--font-mono);font-size:11.5px;color:var(--fg-soft);
}
.kit dt{color:var(--fg-mute);letter-spacing:var(--tracking-mono);text-transform:uppercase}
.kit dd{margin:0}

/* ---------- Chantier ---------- */

.timeline{
  margin-top:var(--space-16);display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--border-hair);background:var(--rule);
}
.tl{background:var(--bg);padding:var(--space-8) var(--space-6)}
.tl b{
  font-family:var(--font-mono);font-size:var(--size-mono-sm);color:var(--accent-alt);
  letter-spacing:.14em;display:block;margin-bottom:var(--space-4);
}
.tl h3{font-size:var(--size-h4);margin-bottom:var(--space-2)}
.tl p{margin:0;font-size:var(--size-xs);font-weight:var(--weight-thin);color:var(--fg-soft)}

/* ---------- FAQ ---------- */

.faq{margin-top:var(--space-14);border-top:var(--border-hair) solid var(--rule)}
details{border-bottom:var(--border-hair) solid var(--rule)}
summary{
  cursor:pointer;list-style:none;padding:var(--space-6) 0;
  font-size:21px;font-weight:var(--weight-thin);letter-spacing:-.01em;
  display:flex;justify-content:space-between;gap:var(--space-6);align-items:center;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--font-mono);color:var(--accent);font-size:20px;flex:none}
details[open] summary::after{content:"−"}
details p{
  margin:0 0 var(--space-6);max-width:var(--measure-prose);
  color:var(--fg-soft);font-size:var(--size-sm);font-weight:var(--weight-thin);
}

/* ---------- CTA final ---------- */

.final{text-align:center}
.final h2{margin-bottom:var(--space-6)}
.final .lead{margin:0 auto var(--space-10)}

/* ---------- Footer ---------- */

footer{
  padding:var(--space-14) 0;
  border-top:var(--border-hair) solid var(--alpha-light-16);
  background:var(--navy-950);color:var(--white);
}
.foot-in{
  display:flex;flex-wrap:wrap;gap:var(--space-6);justify-content:space-between;
  align-items:center;width:var(--layout-wide);margin-inline:auto;
}
footer .mono-tag{line-height:1.8;color:var(--grey-400)}

/* Les mentions légales du groupe font foi : le pied de page y renvoie
   plutôt que d'en recopier le texte, qui vivrait alors à deux endroits. */
.foot-legal{display:flex;flex-wrap:wrap;gap:var(--space-6)}
.foot-legal a,.foot-lang a{text-decoration:underline;text-underline-offset:3px}
.foot-legal a:hover,.foot-lang a:hover{color:var(--white)}

/* La bascule de langue vit au pied de page plutôt que dans la nav : c'est un
   réglage du site, pas une étape du parcours de lecture. */
.foot-lang{display:flex}

/* ---------- Annotations de wireframe ---------- */

.note{
  font-family:var(--font-mono);font-size:var(--size-mono-xs);line-height:var(--leading-loose);
  letter-spacing:.04em;color:var(--accent-alt);
  border-left:var(--border-accent) solid var(--accent-alt);
  padding:var(--space-1) 0 var(--space-1) 14px;
  margin:var(--space-8) 0 0;
  max-width:var(--measure-prose);
}

/* ---------- Points du hero ---------- */

.hero-points{
  list-style:none;margin:0 0 var(--space-8);padding:0;
  display:grid;gap:var(--space-3);
}
.hero-points li{
  position:relative;padding-left:var(--space-6);
  font-size:var(--size-xs);color:var(--fg-soft);font-weight:var(--weight-thin);
}
.hero-points li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:6px;height:6px;border-radius:50%;background:var(--accent);
}

/* ---------- Bandeau origine ---------- */

.origin-strip{
  padding:var(--space-6) 0;
  background:var(--theme-strip-bg,var(--paper-50));
  border-block:var(--border-hair) solid var(--rule);
}
.origin-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);
  text-align:center;
}
.origin-grid div{color:var(--navy-950)}
.origin-grid b{display:block;font-size:var(--size-xs);font-weight:var(--weight-bold)}
.origin-grid span{
  display:block;margin-top:var(--space-1);font-family:var(--font-mono);
  font-size:var(--size-mono-xs);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--grey-600);
}

/* ---------- Puce / chip ---------- */

.chip{
  display:inline-flex;align-items:center;
  font-family:var(--font-mono);font-size:var(--size-mono-xs);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--accent);border:var(--border-hair) solid var(--card-border);
  border-radius:var(--radius-sharp);padding:var(--space-2) var(--space-4);
  margin-top:var(--space-6);
}

/* ---------- Kit à 3 avec option recommandée ---------- */

.kit--3 article{position:relative}
.kit-featured{border-color:var(--accent) !important}
.badge{
  position:absolute;top:var(--space-5);right:var(--space-5);
  background:var(--accent-surface);color:var(--accent-fg);
  font-family:var(--font-mono);font-size:var(--size-mono-xs);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;
  padding:var(--space-1) var(--space-3);border-radius:var(--radius-sharp);
}

/* ---------- Specbar en split (une seule colonne visible) ---------- */

.specbar--split{
  margin-top:var(--space-10);border-top:var(--border-hair) solid var(--rule);
  grid-template-columns:repeat(3,1fr);
}

/* ---------- Stepper de consigne ---------- */

.stepper{
  margin-top:var(--space-10);display:flex;align-items:center;gap:var(--space-6);
}
.stepper-value{
  font-family:var(--font-mono);font-size:var(--size-stat);font-weight:var(--weight-mono-bold);
  color:var(--accent);letter-spacing:-.03em;
}

/* ---------- Chiffre clé ---------- */

.stat-block{text-align:center}
.stat-big{
  font-family:var(--font-mono);font-weight:var(--weight-mono-bold);
  font-size:clamp(48px,9vw,120px);letter-spacing:-.04em;
  color:var(--accent);margin:var(--space-6) 0;line-height:1;
}

/* ---------- Visuels application ---------- */

.app-visuals{display:grid;grid-template-columns:1fr .4fr;gap:var(--space-6);align-items:stretch}
.app-visuals .ph{min-height:320px}
.app-visuals-mobile{aspect-ratio:9/16;min-height:0}

/* ---------- Mini-cartes en paire ---------- */

.kit--2{grid-template-columns:1fr 1fr;gap:var(--space-6);margin-top:var(--space-10)}
.kit--2 article{padding:var(--space-6)}
.kit--2 h3{font-size:var(--size-h4)}

/* ---------- Comparatif en deux cellules ---------- */

.duo-cmp{
  margin-top:var(--space-10);
  display:grid;grid-template-columns:1fr 1fr;
  border:var(--border-hair) solid var(--card-border);
  border-radius:var(--radius-sharp);
}
.duo-cmp > div{
  padding:var(--space-6);
  display:grid;gap:var(--space-2);align-content:center;
  text-align:center;
}
.duo-cmp > div + div{border-left:var(--border-hair) solid var(--card-border)}
.duo-cmp b{
  font-family:var(--font-mono);font-size:var(--size-mono-xs);font-weight:var(--weight-mono);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;
}
.duo-cmp .them b{color:var(--fg-mute)}
.duo-cmp .us b{color:var(--accent)}
.duo-cmp p{margin:0;font-size:var(--size-xs);font-weight:var(--weight-thin);color:var(--fg-soft)}

/* ---------- Paires et variantes de placeholders ---------- */

.ph-duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);margin-top:var(--space-6)}
.ph-duo .ph{min-height:160px}
.ph-tall{min-height:320px;margin-top:var(--space-10)}

/* ---------- Chiffre clé, complément ---------- */

.stat-block .lead{margin-inline:auto}
.stat-block .body-soft{margin-inline:auto}
.stat-block .cta-row{margin-top:var(--space-10)}

/* ---------- Barre CTA collante ---------- */

.cta-bar{
  position:fixed;inset-inline:0;bottom:0;
  z-index:calc(var(--z-header) - 1);
  background:color-mix(in srgb,var(--navy-950) 92%,transparent);
  backdrop-filter:blur(14px);
  border-top:var(--border-hair) solid var(--alpha-light-16);
  color:var(--white);
  transform:translateY(102%);
  /* La visibilité sort la barre repliée de l'ordre de tabulation et de
     l'arbre d'accessibilité : ses liens ne prennent le focus que visibles.
     Le délai la garde affichée le temps que la translation se termine. */
  visibility:hidden;
  transition:transform var(--duration-mid) var(--ease-standard),
             visibility 0s linear var(--duration-mid);
}
.cta-bar.is-visible{
  transform:translateY(0);visibility:visible;
  transition:transform var(--duration-mid) var(--ease-standard),visibility 0s;
}
.cta-bar-in{
  width:var(--layout-wide);margin-inline:auto;
  display:flex;align-items:center;gap:var(--space-5);
  padding-block:var(--space-3);
}
.cta-bar-phone{
  font-family:var(--font-mono);font-size:var(--size-mono);font-weight:var(--weight-mono-bold);
  letter-spacing:.02em;color:var(--cyan-500);margin-right:auto;white-space:nowrap;
}

/* ---------- Modales ---------- */

/* La gouttière stable évite le saut de mise en page quand le défilement du
   corps de page se bloque à l'ouverture d'une boîte. */
html{scrollbar-gutter:stable}
html.modale-ouverte{overflow:hidden}

dialog.modale{
  padding:0;border:var(--border-hair) solid var(--rule-strong);
  border-radius:var(--radius-sharp);
  background:var(--bg);color:var(--fg);
  width:var(--modale-w);max-height:var(--modale-h);
}
dialog.modale::backdrop{background:var(--scrim)}
.modale[open]{display:flex;flex-direction:column}
.modale--large{width:var(--modale-w-large);height:var(--modale-h)}
.modale-tete{
  flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-6);padding:var(--space-4) var(--space-6);
  border-bottom:var(--border-hair) solid var(--rule);
}
.modale-fermer{
  flex:none;width:40px;height:40px;display:grid;place-items:center;
  background:none;border:var(--border-hair) solid var(--rule);
  border-radius:var(--radius-sharp);color:var(--fg);cursor:pointer;
  transition:border-color var(--duration-fast) var(--ease-standard);
}
.modale-fermer:hover{border-color:var(--accent)}
.modale-fermer svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round}
.modale-corps{padding:var(--space-6);overflow:auto}
.modale-corps--pleine{flex:1;display:flex;padding:0;overflow:hidden}
.modale-iframe{flex:1;width:100%;border:0}

/* ---------- Retours du formulaire ---------- */

.champ-piege{display:none}
.form-status{
  margin:0;font-family:var(--font-mono);font-size:var(--size-mono-sm);
  letter-spacing:var(--tracking-mono);color:var(--accent-alt);
}
.form-status--echec{color:var(--danger-fg)}

/* ---------- Visuels intégrés ---------- */

.visual{width:100%;height:auto;border-radius:var(--radius-sharp)}
.visual--fit{width:auto;max-height:var(--visual-fit-h);margin-inline:auto}
.visual--sm{width:min(300px,100%);margin-inline:auto}
.visual--framed{border:var(--border-hair) solid var(--card-border)}

.split > picture,.split > img{align-self:center}
.split--center{align-items:center}

.ph-duo picture{display:block}
.ph-duo img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover}

.kit-figure{min-height:150px;display:flex;align-items:center}
.kit-figure img{width:100%;height:auto}

.app-visuals img{align-self:center}

/* ---------- Vidéo de présentation ---------- */

.video-frame{
  aspect-ratio:9/16;
  width:min(320px,100%);
  margin-inline:auto;
  border:var(--border-hair) solid var(--card-border);
  border-radius:var(--radius-sharp);
  overflow:hidden;
  background:var(--ph-fill);
}
.video-frame iframe{width:100%;height:100%;border:0;display:block}

/* ---------- Logo image ---------- */

.logo-img{height:34px;width:auto;display:block}

/* ---------- Hero immersif ---------- */

.hero-cover{position:relative;overflow:hidden;padding:0;display:flex;align-items:flex-end;min-height:min(72vh,620px)}
.hero-cover-media{position:absolute;inset:0}
/* Le plénum occupe la moitié droite de la photo : le foyer glisse à droite
   pour que la colonne de texte, à gauche, ne se pose pas sur le gainable. */
.hero-cover-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 42%}
/* Deux voiles : une colonne sombre à gauche porte le texte, le dégradé
   vertical assoit le bas de l'image. Le plénum reste net à droite. */
.hero-cover-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--navy-950) 86%,transparent) 0%,
      color-mix(in srgb,var(--navy-950) 44%,transparent) 34%,
      transparent 60%),
    linear-gradient(180deg,
      color-mix(in srgb,var(--navy-950) 16%,transparent) 0%,
      color-mix(in srgb,var(--navy-950) 44%,transparent) 55%,
      color-mix(in srgb,var(--navy-950) 90%,transparent) 100%);
}
.hero-cover-appli{position:absolute;right:0;bottom:0;height:var(--hero-appli-h);width:auto}
.hero-cover .wrap{position:relative;padding-block:var(--space-16) var(--space-12)}

/* Numéro de téléphone posé en lien direct dans une rangée de CTA. En blanc :
   le cyan reste réservé à l'action mise en avant de la section. */
.phone-link{
  font-family:var(--font-mono);font-size:var(--size-mono);font-weight:var(--weight-mono-bold);
  letter-spacing:.02em;color:var(--fg);white-space:nowrap;
}

/* Sur la photo du hero, le numéro repose sur une plaque, comme les étiquettes
   du comparateur : son contraste ne dépend plus des pixels de l'image. */
.hero-cover .phone-link{
  padding:var(--space-3) var(--space-4);
  background:color-mix(in srgb,var(--navy-950) 72%,transparent);
  border:var(--border-hair) solid var(--alpha-light-16);
  border-radius:var(--radius-sharp);
}

/* Recalage desktop : la colonne texte monte en haut à gauche du cadre, sur la
   colonne sombre du voile, pour ne jamais chevaucher le plénum qui occupe la
   moitié droite de la photo. Le titre redescend au palier 56 px de l'échelle,
   seul à tenir dans la colonne libre, et le fond s'élargit ancré à gauche pour
   éloigner le plénum. Tablette et mobile gardent la composition en flux. */
@media (min-width:1001px){
  .hero-cover{align-items:flex-start}
  .hero-cover .wrap{padding-block:var(--space-12) var(--space-16)}
  .hero-cover h1{font-size:var(--size-h2);max-width:var(--hero-texte-w)}
  .hero-cover h1 .thin{display:block}
  .hero-cover .lead{max-width:var(--hero-texte-w)}
  .hero-cover-bg{width:var(--hero-bg-w);max-width:none;object-position:0 42%}
}

/* ---------- Bande panorama ---------- */

.panorama{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius-sharp);display:block}

/* ---------- Poster vidéo ---------- */

.video-poster{
  position:relative;display:block;width:100%;height:100%;
  border:0;padding:0;background:none;cursor:pointer;
}
.video-poster img{width:100%;height:100%;object-fit:cover;display:block}
.video-poster::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--navy-950) 62%,transparent));
}
.video-play{
  position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:1;
  width:72px;height:72px;border-radius:50%;background:var(--cyan-500);
  display:grid;place-items:center;
  transition:transform var(--duration-fast) var(--ease-standard);
}
.video-poster:hover .video-play{transform:scale(1.07)}
.video-play svg{width:24px;height:24px;fill:var(--navy-950);margin-left:3px}
.video-poster-label{
  position:absolute;bottom:var(--space-4);left:0;right:0;z-index:1;text-align:center;
  font-family:var(--font-mono);font-size:var(--size-mono-xs);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--white);
}

/* ---------- Cycle de médias en fondu ---------- */

.media-cycle{
  position:relative;aspect-ratio:1;overflow:hidden;
  border-radius:var(--radius-sharp);border:var(--border-hair) solid var(--card-border);
}
.media-cycle img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:mediaCycle 16s infinite}
.media-cycle img:nth-child(1){animation-delay:0s}
.media-cycle img:nth-child(2){animation-delay:4s}
.media-cycle img:nth-child(3){animation-delay:8s}
.media-cycle img:nth-child(4){animation-delay:12s}
@keyframes mediaCycle{0%{opacity:0}4%{opacity:1}25%{opacity:1}32%{opacity:0}100%{opacity:0}}

/* ---------- Médaillons ---------- */

.medaillon-row{display:flex;gap:var(--space-6);flex-wrap:wrap;margin-top:var(--space-8)}
.medaillon-row figure{margin:0;text-align:center}
.medaillon{width:124px;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;border:var(--border-hair) solid var(--card-border);display:block;margin-inline:auto}
.medaillon-row figcaption{
  margin-top:var(--space-3);font-family:var(--font-mono);font-size:var(--size-mono-xs);
  letter-spacing:.06em;color:var(--fg-mute);max-width:16ch;
}

/* ---------- Comparateur capot fermé / ouvert ---------- */

.compare{
  position:relative;aspect-ratio:1400/648;overflow:hidden;--pos:55%;
  border-radius:var(--radius-sharp);border:var(--border-hair) solid var(--card-border);
  cursor:ew-resize;touch-action:pan-y;user-select:none;
}
/* Variante pour visuels détourés : pas de cadre, l'objet flotte sur le fond de section */
.compare--cutout{aspect-ratio:1800/1060;border:0;overflow:visible}
/* Variante pour deux photographies du même objet en deux situations. Les
   cadrages ne coïncident pas, le rideau se lit donc comme un diptyque dont
   la frontière se déplace, et non comme deux vues superposées : c'est
   pourquoi la découpe reste franche plutôt que fondue. Format natif 3:2. */
.compare--photo{aspect-ratio:3/2}
.compare--cutout picture img{object-fit:contain}
.compare--cutout .compare-line{top:var(--space-2);bottom:var(--space-2)}
.compare picture{position:absolute;inset:0}
.compare picture img,.compare > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.compare-top{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.compare-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--cyan-500);pointer-events:none}
.compare-knob{
  position:absolute;top:50%;left:var(--pos);translate:-50% -50%;
  width:46px;height:46px;border-radius:50%;
  background:color-mix(in srgb,var(--navy-950) 82%,transparent);
  border:2px solid var(--cyan-500);display:grid;place-items:center;pointer-events:none;
}
.compare-knob svg{width:22px;height:22px;stroke:var(--cyan-500);fill:none;stroke-width:2}
.compare-tag{
  position:absolute;top:var(--space-4);z-index:1;
  font-family:var(--font-mono);font-size:var(--size-mono-xs);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--grey-200);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-sharp);
  background:color-mix(in srgb,var(--navy-950) 72%,transparent);
  border:var(--border-hair) solid var(--alpha-light-16);
}
.compare-tag--a{left:var(--space-4)}
.compare-tag--b{right:var(--space-4);color:var(--cyan-500)}
.compare input[type=range]{-webkit-appearance:none;appearance:none;position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.compare:focus-within{outline:var(--focus-width) solid var(--focus-ring);outline-offset:var(--focus-offset)}
.compare-hint{
  margin-top:var(--space-4);font-family:var(--font-mono);font-size:var(--size-mono-xs);
  color:var(--fg-mute);letter-spacing:var(--tracking-mono);
}

/* ---------- Scène collante de la section application ---------- */

/* Par défaut, mobile, reduced-motion ou sans script : la tête, les deux
   propos et les deux visuels se suivent dans le flux, chaque texte juste
   au-dessus du visuel qu'il décrit, la consultation reste immédiate. */
.scene-etage{display:grid;gap:var(--space-10)}
.scene-volet > .lead{margin:0}
.scene-figure{margin:0}
.scene-figure picture{display:block}
.scene-figure img{width:100%;height:auto;display:block}
.scene-figure--a img{border:var(--border-hair) solid var(--card-border);border-radius:var(--radius-sharp)}
/* Les jalons ne signalent une progression que là où la scène s'anime. */
.scene-jalons{display:none}

/* À partir du desktop, même sans animation, chaque propos reprend sa place
   à côté du visuel qu'il décrit : la scène ne s'étale jamais sur les
   1200 px du conteneur. La tête occupe la première ligne entière. */
@media (min-width:1001px){
  .scene-etage{grid-template-columns:1fr 1fr;column-gap:var(--gutter);align-items:center}
  .scene-tete{grid-column:1 / -1}
}

/* En desktop avec mouvement autorisé, le conteneur prend une course de
   défilement, l'étage se colle au centre du champ de vision : la tête reste
   fixe, le propos et le visuel se relaient par fondu croisé, le plan
   rapproché de la tablette arrivant avec un léger zoom. --scene-p, entre 0
   et 1, est posé par effets.js. Seuls opacity et transform varient, aucun
   recalcul de mise en page. */
@media (min-width:1001px) and (prefers-reduced-motion:no-preference) and (scripting:enabled){
  .scene-scroll{height:var(--scene-course)}
  .scene-etage{
    position:sticky;top:var(--scene-top);
    grid-template-areas:"tete visuel" "propos visuel";
    row-gap:var(--space-8);align-content:start;align-items:start;
  }
  .scene-tete{grid-area:tete}
  /* Les deux propos partagent la même cellule, les deux visuels aussi : la
     hauteur de l'étage est celle du plus haut et ne bouge plus ensuite. */
  .scene-volet{grid-area:propos}
  .scene-figure{grid-area:visuel;align-self:center}
  /* Même boîte pour les deux visuels, donc mêmes légendes au même endroit :
     sans cela, les deux légendes se croiseraient à deux hauteurs pendant le
     fondu. La photo remplit le cadre, l'objet détouré s'y inscrit. */
  .scene-figure picture{aspect-ratio:4/3}
  .scene-figure img{height:100%;object-fit:cover}
  .scene-figure--b img{object-fit:contain}

  /* Le texte se relaie au milieu de la course, pendant que les images sont
     encore en train de se fondre : --volet-p vaut 1 quand le propos est en
     place, 0 quand il a cédé la place, et --volet-sens donne son sens de
     sortie, le premier vers le haut, le second depuis le bas. */
  .scene-volet{
    opacity:var(--volet-p);
    translate:0 calc((1 - var(--volet-p)) * var(--scene-texte-shift) * var(--volet-sens));
  }
  .scene-volet--a{--volet-p:clamp(0,calc((.46 - var(--scene-p,0)) * 6),1);--volet-sens:-1}
  .scene-volet--b{--volet-p:clamp(0,calc((var(--scene-p,0) - .5) * 6),1);--volet-sens:1}

  .scene-figure--a{opacity:calc(1 - var(--scene-p,0))}
  .scene-figure--b{opacity:var(--scene-p,0);transform:scale(calc(.94 + .06 * var(--scene-p,0)))}

  .scene-jalons{display:flex;gap:var(--space-3);margin-top:var(--space-8)}
  .scene-jalon{position:relative;width:var(--jalon-w);height:var(--jalon-h);background:var(--rule)}
  .scene-jalon::after{content:"";position:absolute;inset:0;background:var(--accent)}
  .scene-jalon--a::after{opacity:calc(1 - var(--scene-p,0))}
  .scene-jalon--b::after{opacity:var(--scene-p,0)}
}

/* ---------- Apparitions au défilement ---------- */

/* Masqué seulement si le script peut révéler et si le mouvement est permis :
   sans JavaScript ou sous reduced-motion, le contenu s'affiche directement. */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .reveal{
    opacity:0;translate:0 var(--reveal-shift);
    transition:opacity var(--duration-reveal) var(--ease-standard),
               translate var(--duration-reveal) var(--ease-standard);
    transition-delay:var(--reveal-delai,0s);
  }
  .reveal.is-seen{opacity:1;translate:0 0}
}

/* ---------- Frise chronologique ---------- */

.frise{margin-top:var(--space-14)}
.frise img{width:100%;height:auto;display:block}
/* La frise n'est masquée que si le script peut la révéler : sans JS elle
   reste visible au lieu de disparaître définitivement. */
@media (scripting:enabled){
  .frise-reveal img{clip-path:inset(0 100% 0 0);transition:clip-path 1.6s var(--ease-standard)}
}
.frise-reveal.is-seen img{clip-path:inset(0 0 0 0)}
.frise-jalons{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-4);margin-top:var(--space-6)}
.frise-jalons b{display:block;font-family:var(--font-mono);font-size:var(--size-mono-sm);font-weight:var(--weight-mono-bold);color:var(--accent)}
.frise-jalons span{display:block;margin-top:var(--space-1);font-size:var(--size-mono-xs);font-family:var(--font-mono);line-height:var(--leading-snug);color:var(--fg-mute);letter-spacing:.02em}

/* ---------- Modes de raccordement UG800 ---------- */

.modes{display:grid;margin-top:var(--space-10);border-top:var(--border-hair) solid var(--rule)}
.mode{
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-6);align-items:center;
  padding:var(--space-6) 0;border-bottom:var(--border-hair) solid var(--rule);
}
.mode-picto{width:54px;color:var(--accent);flex:none}
.mode-picto svg{width:100%;height:auto;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mode h3{font-size:var(--size-h4);margin:0 0 var(--space-1)}
.mode p{margin:0;font-size:var(--size-xs);font-weight:var(--weight-thin);color:var(--fg-soft)}
.mode-app{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-family:var(--font-mono);font-size:var(--size-mono-xs);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;white-space:nowrap;
}
.mode-app svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mode-app--oui{color:var(--accent-alt)}
.mode-app--non{color:var(--fg-mute)}

/* La passerelle occupe la colonne centrale, les modes se répartissent de part
   et d'autre, chacun relié au produit par un filet qui traverse la gouttière. */
.branchements{
  display:grid;grid-template-columns:1fr var(--branchement-centre-w) 1fr;
  column-gap:var(--space-10);align-items:center;margin-top:var(--space-block);
}
.branchements-img{margin:0;order:2}
.branchements-img img{width:100%;height:auto;display:block}
.branchements-cote{display:grid;gap:var(--space-8)}
.branchements-cote--gauche{order:1}
.branchements-cote--droite{order:3}
.branchement{
  position:relative;
  border:var(--border-hair) solid var(--card-border);border-radius:var(--radius-sharp);
  padding:var(--space-5) var(--space-6);
}
.branchement .mode-picto{display:block;width:44px}
.branchement h3{font-size:var(--size-h4);margin:var(--space-3) 0 var(--space-1)}
.branchement p{margin:0 0 var(--space-3);font-size:var(--size-xs);font-weight:var(--weight-thin);color:var(--fg-soft)}
.branchement::after{
  content:"";position:absolute;top:50%;width:var(--space-10);height:1px;
  background:var(--rule-strong);
}
.branchements-cote--gauche .branchement::after{left:100%}
.branchements-cote--droite .branchement::after{right:100%}

/* ---------- Écosystème Salus ---------- */

.eco-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-8) var(--space-6);margin-top:var(--space-14)}
.eco{text-align:center}
.eco svg{
  width:44px;height:44px;display:block;margin-inline:auto;
  stroke:var(--accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.eco b{display:block;margin-top:var(--space-3);font-size:var(--size-xs);font-weight:var(--weight-bold);line-height:var(--leading-tight)}

/* ---------- Bande contact des visuels d'usine ---------- */

/* Les photos d'atelier sont des paysages posés sur une toile carrée blanche,
   sources PNG comprises. Chaque visuel porte donc le ratio réel de son contenu
   et son foyer, mesurés sur l'image, pour que le blanc tombe hors cadre.
   Valeurs à retirer si les sources sont recadrées un jour.
     laser Amada 1180x628 · panneauteuse 1166x926 · jet d'eau 1198x437 */
.usine-laser{--cadre-ratio:1.88;--cadre-foyer:43%}
.usine-panneauteuse{--cadre-ratio:1.26;--cadre-foyer:56%}
.usine-jet{--cadre-ratio:2.74;--cadre-foyer:50%}

/* Hauteur commune, largeur dictée par le contenu : rien de rogné, rien de blanc. */
.bande-contact{display:flex;gap:var(--space-6);flex-wrap:wrap;margin-top:var(--space-8)}
.bande-contact figure{margin:0;width:calc(var(--bande-contact-h) * var(--cadre-ratio))}
.bande-contact img{
  width:100%;height:var(--bande-contact-h);max-width:none;
  object-fit:cover;object-position:center var(--cadre-foyer,50%);display:block;
  border:var(--border-hair) solid var(--card-border);border-radius:var(--radius-sharp);
}
.bande-contact figcaption{
  margin-top:var(--space-2);
  font-family:var(--font-mono);font-size:var(--size-mono-xs);
  letter-spacing:var(--tracking-mono);color:var(--fg-mute);line-height:var(--leading-snug);
}

/* Modificateur : la bande occupe toute la largeur du conteneur. Le flex-grow
   vaut le ratio du contenu, donc les largeurs suivent les proportions réelles
   et les trois hauteurs s'égalisent d'elles-mêmes, sans hauteur imposée. */
.bande-contact--large figure{width:auto;flex:var(--cadre-ratio) 1 0;min-width:0}
.bande-contact--large img{width:100%;height:auto;aspect-ratio:var(--cadre-ratio)}

/* ---------- Chapeau et suite ---------- */

/* Le premier paragraphe porte l'argument au palier 22 px en couleur pleine,
   un filet marque la bascule, le second redescend au corps de texte.
   Aucun palier de taille intermediaire n'est introduit. */
.texte-chapeau .chapeau{
  margin:0 0 var(--space-8);padding-bottom:var(--space-8);
  border-bottom:var(--border-hair) solid var(--rule);
  font-size:var(--size-lead);font-weight:var(--weight-thin);
  line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);
  color:var(--fg);max-width:var(--measure-lead);
}
.texte-chapeau .suite{
  margin:0;font-size:var(--size-body);font-weight:var(--weight-thin);
  line-height:var(--leading-body);color:var(--fg-soft);
  max-width:var(--measure-prose);
}

/* ---------- Frise des étapes de fabrication ---------- */

/* Quatre étapes empilées le long d'un filet vertical. Chaque étape occupe un
   quart du cycle : un segment teal descend le long de son filet et son libellé
   passe en couleur pleine, puis la main revient à l'étape suivante.
   Le décalage se calcule sur l'indice --i, tiré du rang de l'étape. */
.frise{display:grid;grid-template-columns:1fr;list-style:none;margin:var(--space-10) 0 0;padding:0}
.frise-etape{position:relative;padding:var(--space-4) 0 var(--space-4) var(--space-6)}
.frise-etape:nth-child(1){--i:0}
.frise-etape:nth-child(2){--i:1}
.frise-etape:nth-child(3){--i:2}
.frise-etape:nth-child(4){--i:3}
.frise-etape::before,
.frise-etape::after{content:"";position:absolute;top:0;bottom:0;left:0;width:1px}
.frise-etape::before{background:var(--rule)}
.frise-etape::after{
  background:var(--accent-alt);
  transform:scaleY(0);transform-origin:top;
  animation:frise-segment var(--duration-cycle) linear infinite;
  animation-delay:calc(var(--i) * var(--duration-cycle) / 4);
}
.frise-num{
  font-family:var(--font-mono);font-size:var(--size-mono-xs);
  letter-spacing:var(--tracking-mono);color:var(--accent-alt);
  margin-right:var(--space-3);
}
.frise-nom{
  margin:0;display:inline;
  font-family:var(--font-mono);font-size:var(--size-mono-xs);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--fg);line-height:var(--leading-snug);
}
@keyframes frise-segment{
  0%{transform:scaleY(0);opacity:1}
  24%{transform:scaleY(1);opacity:1}
  30%{transform:scaleY(1);opacity:0}
  100%{transform:scaleY(0);opacity:0}
}

/* ---------- Triptyque : un visuel central encadré de deux vues ---------- */

.triptyque{
  display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-8);
  align-items:center;margin-top:var(--space-12);
}

/* Objet détouré au centre, piloté par sa hauteur : il flotte sans cadre. */
.triptyque-centre{
  display:block;height:var(--triptyque-centre-h);width:auto;max-width:100%;
  margin-inline:auto;object-fit:contain;
}

/* ---------- Photo cadrée et objet détouré ---------- */

/* Une vraie photographie garde un cadre : filet, format 16:9, légende mono.
   .triptyque-cote en est le cas particulier des vues d'accompagnement. */
.photo-cadree,.triptyque-cote{margin:0}
.photo-cadree img,.triptyque-cote img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
  border:var(--border-hair) solid var(--card-border);border-radius:var(--radius-sharp);
}
.photo-cadree figcaption,.triptyque-cote figcaption{
  margin-top:var(--space-2);
  font-family:var(--font-mono);font-size:var(--size-mono-xs);
  letter-spacing:var(--tracking-mono);color:var(--fg-mute);line-height:var(--leading-snug);
}

/* Photo cadrée au format carré : même traitement, bornée en largeur pour ne
   pas dévorer le pli une fois posée dans une colonne de split. */
.photo-cadree--carree{max-width:var(--photo-carree-w);margin-inline:auto}
.photo-cadree--carree img{aspect-ratio:1}


/* Un objet détouré n'a pas de cadre : il flotte sur le fond de section et se
   pilote par sa hauteur, via --h posé par le conteneur. */
.objet-detoure{display:block;width:auto;max-width:100%;height:var(--h);object-fit:contain}
.legende-objet{
  margin-top:var(--space-4);
  font-family:var(--font-mono);font-size:var(--size-mono-xs);
  letter-spacing:var(--tracking-mono);color:var(--fg-mute);line-height:var(--leading-snug);
}

/* ---------- Duos du thermostat ---------- */

/* Deux vues du même objet à la même hauteur, donc à la même échelle physique :
   la comparaison face / profil se lit sans légende. */
.duo-produit{display:flex;gap:var(--space-12);align-items:flex-end;justify-content:center}
.duo-produit figure{margin:0;text-align:center}
.duo-produit .objet-detoure{--h:var(--duo-produit-h)}

.duo-usage{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:end;margin-top:var(--space-10)}
.duo-usage figure{margin:0;text-align:center}
.duo-usage .objet-detoure{--h:var(--duo-usage-h);margin-inline:auto}
/* L'un des deux objets peut porter le propos : il prend une hauteur supérieure,
   l'autre reste à la hauteur de base et sert de contrepoint. */
.duo-usage .objet-detoure--grand{--h:var(--duo-usage-h-grand)}

/* ---------- Aides de composition de section ---------- */

/* Section centrée : le titre, l'eyebrow et le lead se recentrent ensemble. */
.sec-center{text-align:center}
.sec-center .eyebrow{justify-content:center}
.sec-center .lead,.sec-center .body-soft{margin-inline:auto}

/* Visuel posé après un bloc de texte dans une section. */
.figure-block{display:block;margin-top:var(--space-10)}

/* Paragraphe d'appoint, plus discret que le lead. */
.body-soft{margin:var(--space-4) 0 0;font-size:var(--size-sm);color:var(--fg-soft);max-width:var(--measure-prose)}

/* Colonne resserrée pour un schéma isolé. */
.figure-narrow{width:var(--layout-narrow);margin-inline:auto}

/* Visuel resserré, pour qu'il ne dévore pas ce qui l'entoure. */
.figure-medium{width:var(--layout-medium);margin-inline:auto}

/* Comparateur avant / après : à pleine largeur de conteneur le boîtier dépassait
   le pli sur ordinateur, alors que son détail se lit dès 880 px. La légende
   partage la même colonne que le visuel. */
.figure-compare{width:var(--layout-compare);margin-inline:auto}

/* Légende centrée sous un visuel. */
.figure-caption{text-align:center}

/* Second mouvement à l'intérieur d'une même section. */
.sub-block{
  margin-top:var(--space-block);padding-top:var(--space-10);
  border-top:var(--border-hair) solid var(--rule);
}

/* ---------- Première étape du configurateur, posée dans la page ---------- */

/* La section ne renvoie plus vers le configurateur, elle en pose la première
   question. Le choix est transmis en paramètre d'URL et le configurateur
   reprend directement à l'étape suivante. */
.etape-inline{margin-top:var(--space-12);padding-top:var(--space-10);border-top:var(--border-hair) solid var(--rule)}
.etape-compte{
  margin:0 0 var(--space-4);
  font-family:var(--font-mono);font-size:var(--size-mono-xs);font-weight:var(--weight-mono-bold);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--accent);
}
.etape-inline h3{margin-bottom:var(--space-3)}

.choix-marques{
  list-style:none;margin:var(--space-10) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);
}
.choix{
  display:flex;flex-direction:column;gap:var(--space-2);
  padding:var(--space-7);
  border:var(--border-hair) solid var(--card-border);border-radius:var(--radius-sharp);
  transition:border-color var(--duration-fast) var(--ease-standard),
             transform var(--duration-fast) var(--ease-standard);
}
.choix:hover{border-color:var(--accent);transform:translateY(var(--lift))}
.choix b{font-size:var(--size-h4);font-weight:var(--weight-bold)}

/* Logo de fabricant. Une hauteur commune ferait paraître Toshiba deux fois plus
   gros que Mitsubishi, dont le nom tient sur deux lignes : c'est la largeur qui
   est commune, ce qui rapproche les hauteurs de capitales. L'emplacement garde
   une hauteur fixe et les logos s'y posent sur une même ligne de pied, donc le
   nom de la marque reste aligné d'une carte à l'autre.
   Le logo est décoratif, alt vide : le nom de la marque suit en texte. */
.choix-logo{
  width:var(--choix-logo-w);height:var(--choix-logo-slot-h);max-width:100%;
  object-fit:contain;object-position:left bottom;
  margin-bottom:var(--space-6);
}

.lien-souligne{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* Le configurateur tourne dans la page, jamais dans une fenêtre. Le cadre n'a
   pas de hauteur propre : l'application annonce la sienne à chaque étape et
   configurateur.js la pose dans --configurateur-h, donc aucune barre de
   défilement n'apparaît à l'intérieur. La hauteur d'attente couvre le temps
   du chargement. Sans script l'application ne peut pas tourner : le cadre
   disparaît et le lien de repli prend sa place. */
.configurateur-cadre{margin-top:var(--space-12);padding-top:var(--space-10);border-top:var(--border-hair) solid var(--rule)}
.configurateur-vue{
  display:none;width:100%;border:0;
  height:var(--configurateur-h,var(--configurateur-h-attente));
}
@media (scripting:enabled){
  .configurateur-vue{display:block}
  .configurateur-repli{display:none}
}

/* ---------- Contact ---------- */

.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--gutter);text-align:left}
.contact-phone{
  margin-top:var(--space-6);border:var(--border-hair) solid var(--card-border);
  border-radius:var(--radius-sharp);padding:var(--space-8);
  display:grid;gap:var(--space-3);
}
.contact-phone-num{
  font-family:var(--font-mono);font-size:var(--size-stat);font-weight:var(--weight-mono-bold);
  color:var(--accent);letter-spacing:-.02em;white-space:nowrap;
}
.contact-form{display:grid;gap:var(--space-6);text-align:left}

/* Le formulaire se remplit en trois volets courts. Sans script, tout
   s'affiche à la suite et le bouton d'envoi reste seul : les volets, la
   progression et les boutons d'étape n'existent qu'une fois la classe
   form-a-etapes posée par formulaire.js. */
.contact-form fieldset{border:0;margin:0;padding:0;min-width:0}
.contact-form legend{
  padding:0;
  font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--size-h4);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);
}
.form-volet-champs{display:grid;gap:var(--space-6);margin-top:var(--space-5)}

.form-progression{display:none;align-items:center;justify-content:space-between;gap:var(--space-4)}
.form-compte{
  margin:0;
  font-family:var(--font-mono);font-size:var(--size-mono-xs);font-weight:var(--weight-mono-bold);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--accent);
}
.form-jalons{display:flex;gap:var(--space-3)}
.form-jalon{width:var(--jalon-w);height:var(--jalon-h);background:var(--rule)}
.form-jalon.est-fait{background:var(--accent)}

.form-nav{display:flex;align-items:center;gap:var(--space-4)}
.form-nav [data-form-suivant],.form-nav [data-form-envoyer]{margin-left:auto}
.form-nav [data-form-retour],.form-nav [data-form-suivant]{display:none}
.form-nav [hidden]{display:none}

.form-a-etapes .form-progression{display:flex}
.form-a-etapes .form-volet{display:none}
.form-a-etapes .form-volet.est-actif{display:block}
.form-a-etapes .form-nav [data-form-retour],
.form-a-etapes .form-nav [data-form-suivant]{display:inline-flex}
.form-a-etapes .form-nav [data-form-retour][hidden],
.form-a-etapes .form-nav [data-form-suivant][hidden],
.form-a-etapes .form-nav [data-form-envoyer][hidden]{display:none}

.case{
  display:flex;align-items:center;gap:var(--space-3);
  font-size:var(--size-sm);color:var(--fg-soft);cursor:pointer;
}
.case input{width:var(--case-taille);height:var(--case-taille);flex:none;accent-color:var(--accent-surface);margin:0}

/* L'invitation ne sert que si la modale peut s'ouvrir : modale.js pose
   a-dialog sur la racine quand dialog est disponible, le formulaire de la
   colonne s'efface alors au profit du bouton. La version anglaise n'a pas
   de colonne contact-droite et n'est pas concernée. */
.contact-ouvrir{display:none}
.a-dialog .contact-ouvrir{display:block}
.a-dialog .contact-droite > .contact-form{display:none}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
/* Un code postal n'a besoin que de cinq caractères : il cède la place à la ville. */
.field-row--tiers{grid-template-columns:1fr 2fr}

/* ---------- Responsive ---------- */

@media (max-width:1000px){
  .hero-grid,.split{grid-template-columns:1fr;gap:44px}
  .specbar{grid-template-columns:1fr 1fr}
  .spec{border-bottom:var(--border-hair) solid var(--rule);padding-bottom:var(--space-6)}
  .steps,.kit{grid-template-columns:1fr}
  .kit--2{grid-template-columns:1fr 1fr}
  .timeline{grid-template-columns:1fr 1fr}
  .frise-jalons{grid-template-columns:repeat(3,1fr)}
  .eco-grid{grid-template-columns:repeat(3,1fr)}
  /* Le hero quitte le mode immersif : l'image passe dans le flux et le texte
     descend sous elle, sur le fond de section. Le titre ne se superpose plus
     jamais au gainable, quelle que soit la largeur. */
  .hero-cover{display:block;min-height:0}
  /* La photo se lit en bandeau et non en bloc : sa hauteur suit la largeur
     tant que l'écran est étroit, puis se plafonne. Une proportion libre
     donnerait plus de 700 px sur une tablette encore sous ce seuil, et le
     titre tomberait sous le pli. Le recadrage est absorbé par l'object-fit,
     qui garde le plénum au foyer. La hauteur se pose directement : un
     aspect-ratio plafonné par max-height rétrécit aussi la largeur. */
  .hero-cover-media{position:relative;height:var(--hero-media-h)}
  /* Le foyer descend dans la photo : le bandeau se prend sur le plafond nu du
     haut, qui ne montre rien, et garde le boîtier de contrôle et les piquages
     entiers. Au-delà de 57 %, le haut du boîtier passe hors cadre. Sous
     570 px de large la bande devient plus haute que le rapport de la photo :
     le recadrage se fait alors en largeur et ce foyer vertical ne joue plus. */
  .hero-cover-bg{object-position:70% 57%}
  .hero-cover-veil{background:linear-gradient(180deg,transparent 58%,color-mix(in srgb,var(--bg) 88%,transparent) 100%)}
  .hero-cover-appli{height:var(--hero-appli-h-compact)}
  .hero-cover .wrap{padding-block:var(--space-10) var(--space-14)}
  /* Le visuel central garde sa hauteur pilotée par --triptyque-centre-h, même
     en colonne unique : une largeur imposée à un objet deux fois plus haut que
     large lui donnait les deux tiers du pli. */
  .triptyque{grid-template-columns:1fr;gap:var(--space-10)}
  .duo-usage{grid-template-columns:1fr}
  .duo-produit{gap:var(--space-8)}
  /* Le cadre 9:16 se cale sur la hauteur d'écran, sinon le poster occupe les
     deux tiers du pli une fois la colonne devenue pleine largeur. */
  .video-frame{width:min(var(--video-frame-w-lap),100%)}

  .nav-toggle{display:grid}
  .head-in{flex-wrap:wrap;padding-block:var(--space-3);gap:var(--space-4)}
  .nav{
    order:3;flex-basis:100%;margin-left:0;
    flex-direction:column;gap:var(--space-4);
    padding-bottom:var(--space-5);
  }
  .nav[hidden]{display:none}
  .nav a{font-size:var(--size-mono)}
  /* Le libellé complet du bouton ne tient plus à côté du logo et du menu : il
     passerait sur une deuxième ligne et occuperait tout l'écran. Le hero porte
     les trois actions en haut de page, la barre collante les reprend ensuite. */
  .head-in > .btn{display:none}

  /* La passerelle passe devant ses options : sur téléphone, le produit doit
     arriver avant la liste des branchements, pas après. Les filets, qui ne
     relient plus rien une fois la grille en colonne unique, disparaissent. */
  .branchements{grid-template-columns:1fr;row-gap:var(--space-8)}
  .branchements-img{order:1}
  .branchements-cote--gauche{order:2}
  .branchements-cote--droite{order:3}
  .branchement::after{display:none}

  .origin-grid{grid-template-columns:1fr 1fr}
  .kit--3{grid-template-columns:1fr}
  .specbar--split{grid-template-columns:1fr}
  .app-visuals{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}

@media (max-width:600px){
  .specbar{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr}
  .cmp-head,.cmp-row{grid-template-columns:1fr;gap:var(--space-2)}
  .cmp-head span{display:none}
  .origin-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}

  /* Sur un téléphone, la bande était plus haute que le rapport de la photo :
     le recadrage se faisait en largeur, la hauteur passait entière et le
     cinquième du haut ne montrait que du plafond nu. La bande descend sous le
     16:9 pour reprendre la main sur le cadrage vertical, et le foyer se pose
     en bas pour que la coupe se prenne uniquement sur ce plafond. Le haut du
     boîtier arrive à 22 % de la photo : la coupe reste sous ce seuil. */
  .hero-cover-media{height:var(--hero-media-h-tel)}
  .hero-cover-bg{object-position:70% 100%}

  /* Sur un téléphone, le titre casse sur cinq lignes et l'échelle
     typographique ne descend pas plus bas : la place se prend sur les blancs
     du hero, pas sur le corps du titre. */
  .hero-cover .wrap{padding-block:var(--space-6) var(--space-10)}
  .hero-cover .lead{margin-bottom:var(--space-7)}

  .kit--2{grid-template-columns:1fr}
  .duo-cmp{grid-template-columns:1fr}
  .duo-cmp > div + div{border-left:0;border-top:var(--border-hair) solid var(--card-border)}
  /* Les deux boutons partagent la première ligne à hauteur égale, le numéro
     passe dessous, centré : l'appel direct reste sous le pouce sur chantier. */
  .cta-bar-in{flex-wrap:wrap;align-items:stretch;row-gap:var(--space-2)}
  .cta-bar-phone{order:3;margin-inline:auto;align-self:center}
  .cta-bar-in .btn{flex:1;justify-content:center;text-align:center}

  .frise-jalons{grid-template-columns:repeat(2,1fr)}
  .eco-grid{grid-template-columns:repeat(2,1fr)}
  /* Les trois marques tiennent de front jusqu'ici, où les cartes deviendraient
     trop étroites pour leur libellé. */
  .choix-marques{grid-template-columns:1fr}
  /* La bande tient à trois de front jusqu'ici, où les vignettes deviendraient
     trop petites pour se lire. Elle passe alors à un visuel par ligne, centré
     et rendu à la hauteur commune : à pleine largeur, la panneauteuse montait
     à un tiers du pli pour une simple photo d'atelier. */
  .bande-contact--large{--bande-contact-h:var(--bande-contact-h-phone);flex-wrap:wrap;justify-content:center}
  .bande-contact--large figure{flex:0 1 auto;width:min(100%,calc(var(--bande-contact-h) * var(--cadre-ratio)))}
  .bande-contact--large img{height:auto;aspect-ratio:var(--cadre-ratio)}

  /* Face et profil restent côte à côte, c'est la comparaison. Les légendes
     élargiraient les figures au-delà de leurs visuels et comprimeraient les
     deux vues, ce qui ruinerait l'égalité d'échelle : on les masque ici, la
     barre de specs porte déjà les 11 mm. */
  .duo-produit{--duo-produit-h:240px}
  .duo-produit .legende-objet{display:none}
  .mode{grid-template-columns:auto 1fr;row-gap:var(--space-2)}
  .mode-app{grid-column:2}
  .medaillon{width:96px}
  .panorama{aspect-ratio:16/9}
  .compare-tag{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .btn:hover{transform:none}
  .media-cycle img{animation:none !important}
  .media-cycle img:first-child{opacity:1}
  .frise-reveal img{clip-path:none !important}
  /* Les quatre étapes restent lisibles d'un bloc, filet teal plein. Les
     libellés n'ont plus rien à neutraliser, ils sont blancs en permanence. */
  .frise-etape::after{animation:none !important;transform:none;opacity:1}
}