/* ==========================================================================
   BELMONT — Feuille de style
   Une ambiance de galerie : ivoire chaud, encre profonde. L'accueil est une
   seule photo pleine page, comme une page de magazine. Une seule famille de
   caractères, Hanken Grotesk, en graisse légère pour les titres et en petites
   capitales espacées pour les étiquettes.
   ========================================================================== */

:root {
  color-scheme: light;

  --fond: #F2EFE9;        /* ivoire chaud, fond de page */
  --papier: #FAF8F4;      /* surfaces levées */
  --lin: #E9E4DB;         /* fonds d'image en chargement */
  --pierre: #DED8CD;      /* filets discrets */
  --pierre-2: #C9C1B2;    /* filets appuyés, bordures */
  --encre: #191714;       /* texte, boutons */
  --encre-2: #57524A;     /* texte secondaire */
  --encre-3: #8A847A;     /* légendes */
  --nuit: #1B1917;        /* section sombre */
  --nuit-2: #262320;
  --nuit-texte: #EDE8DF;
  --nuit-texte-2: #A9A297;
  --bronze: #9A7A52;      /* accent, avec parcimonie */
  --alerte: #8A2E1F;

  --f: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gouttiere: clamp(20px, 5vw, 80px);
  --largeur: 1440px;
  --entete: 72px;
  --doux: cubic-bezier(.2, .7, .2, 1);
  --lent: cubic-bezier(.16, 1, .3, 1);

  --arrondi: 8px;         /* boutons et groupes de boutons : des rectangles aux coins arrondis */
  --taupe: #564B40;       /* les boutons pleins et les choix sélectionnés : un taupe foncé tiré de la chambre */
  --taupe-2: #4A4037;     /* au survol */
  --chambre: #897966;     /* le mur et le plancher, aux bords de la photo d'accueil en hauteur */
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 400 1.0625rem/1.4 var(--f);   /* interligne serré : un texte plus compact, plus élégant */
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
h1, h2, h3 {
  margin: 0;
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.025em;
  text-wrap: balance;
}
h3 { font-weight: 400; letter-spacing: -.01em; }
p, figure { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
strong { font-weight: 500; }
::selection { background: #E4D8C4; color: var(--encre); }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }

.conteneur { max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }

.cote {
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--encre-2);
}
.cote--bronze { color: var(--bronze); }
.num { font-variant-numeric: tabular-nums; }

.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.evitement {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  padding: 10px 14px; background: var(--encre); color: var(--papier); text-decoration: none;
}
.evitement:focus { top: 12px; }

/* ---------- Boutons et liens ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .8em;
  min-height: 54px; padding: 0 1.9em;
  font: 500 .9rem/1 var(--f); letter-spacing: .04em; white-space: nowrap;
  color: var(--papier); background: var(--taupe);
  border: 1px solid var(--taupe); border-radius: var(--arrondi);
  text-decoration: none; cursor: pointer;
  transition: background-color .3s var(--doux), color .3s var(--doux), border-color .3s var(--doux), transform .3s var(--doux);
}
.btn:hover { background: var(--taupe-2); border-color: var(--taupe-2); }
.btn:active { transform: translateY(1px); }
.btn--ligne { color: var(--encre); background: transparent; border-color: var(--pierre-2); }
.btn--ligne:hover { color: var(--papier); background: var(--taupe); border-color: var(--taupe); }
.btn--clair { color: var(--encre); background: var(--papier); border-color: var(--papier); }
.btn--clair:hover { background: #fff; border-color: #fff; }
.btn--plein { width: 100%; }
.fleche { display: inline-block; transition: transform .3s var(--doux); }
.btn:hover .fleche { transform: translateX(4px); }

.lien {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: .9375rem; font-weight: 500; letter-spacing: .02em;
  color: var(--encre);
  text-decoration: none;
  padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .3s var(--doux), color .2s;
}
.lien:hover { background-size: 30% 1px; }
.lien--bouton { border: 0; padding: 0 0 3px; cursor: pointer; background-color: transparent; }

/* ---------- En-tête ---------- */

.entete {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
  background: rgba(242, 239, 233, 0);
  border-bottom: 1px solid transparent;
  transition: background-color .4s, border-color .4s;
}
.entete.defile, .en-config .entete, .page .entete {
  background: rgba(242, 239, 233, .86);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  backdrop-filter: saturate(1.2) blur(14px);
  border-bottom-color: var(--pierre);
}
.entete__in { height: var(--entete); display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.marque {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .42em;
  margin-right: -.42em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

/* ---------- Accueil : la couverture ----------
   Une photo pleine page, sous l'en-tête transparent ; une légende et un bouton,
   posés sur le sol clair de la photo. Rien d'autre.
   La photo est fixée à l'écran : rien ne défile. Son fond a le ton de la chambre, que Safari (iOS 26)
   reprend sous l'heure et derrière sa barre du bas (il prend la couleur de fond d'un bloc fixe
   collé au bord, jamais les pixels de la photo) : plus de bandes claires en haut et en bas. */

.couverture {
  position: fixed; inset: 0;
  overflow: hidden;
  background: var(--chambre);
}
/* Le fond de la page aussi, pendant qu'on est à l'accueil : en revenant du configurateur, Safari
   reprend la couleur de fond de la page pour sa barre du bas (sinon, une bande ivoire). */
body:not(.en-config):not(.page) { background: var(--chambre); }
/* à l'accueil, l'en-tête flotte sur la photo et reste transparent */
body:not(.en-config):not(.page) .entete { position: fixed; left: 0; right: 0; }
body:not(.en-config):not(.page) .entete.defile {
  background: transparent; border-bottom-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html:has(> body:not(.en-config):not(.page)) { overscroll-behavior: none; }
/* photo en hauteur (téléphones) : ses bords se fondent dans le ton de la chambre, sans ligne de coupe */
@media (max-aspect-ratio: 1/1) {
  .couverture::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(var(--chambre), rgb(137 121 102 / 0) 12%),
      linear-gradient(to top, var(--chambre), rgb(137 121 102 / 0) 6%);
  }
}
.couverture__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  opacity: 0;
  transform: scale(1.035);
  animation: couverture-entree 2.4s var(--lent) .1s forwards;
}
@keyframes couverture-entree { to { opacity: 1; transform: scale(1); } }
/* photo en hauteur (téléphones) : on garde le vase, quitte à couper le pied gauche du lit ; la photo
   collée au bas de l'écran, pour que le lit monte et que la légende tombe sur le plancher clair */
@media (max-aspect-ratio: 1/1) { .couverture__photo img { object-position: 72% 100%; } }
.couverture__bas {
  position: absolute; z-index: 2; left: 0; right: 0;
  bottom: max(clamp(24px, 4.5vw, 64px), env(safe-area-inset-bottom, 0px));
  margin-inline: auto;
  /* la ligne de légende et le bouton « Configurer » partagent le même axe */
  display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap;
  opacity: 0;
  animation: couverture-texte 1.2s var(--lent) .9s forwards;
}
@keyframes couverture-texte { from { transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* téléphone : la légende passe au-dessus du bouton, tout près de lui */
@media (max-aspect-ratio: 1/1) { .couverture__bas { row-gap: 10px; } }
.couverture__legende { display: grid; gap: 10px; }
/* le bouton de l'accueil : plus bas et plus léger que les boutons d'action (tous en taupe foncé) */
.btn--couverture { min-height: 36px; padding: 0 1.25em; font-size: .8rem; gap: .6em; color: var(--fond); }
.couverture__legende .cote { text-wrap: balance; }
.couverture__titre { font-size: clamp(1.5rem, 2.4vw, 2.25rem); font-weight: 300; letter-spacing: -.02em; }
.couverture .cote { color: var(--encre); opacity: .72; }
/* le pied de page vit dans le configurateur (et sur les pages de texte) */
body:not(.en-config):not(.page) .pied { display: none; }

/* ---------- Pied de page ---------- */

.pied { background: var(--nuit); color: var(--nuit-texte); padding-block: 56px 40px; }
.pied__in { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 24px clamp(24px, 4vw, 56px); }
.marque--pied { font-size: 1.4rem; letter-spacing: .42em; }
.pied__texte { font-size: .9375rem; color: var(--nuit-texte-2); }
.pied__texte a { color: var(--nuit-texte); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }
.pied .cote { color: var(--nuit-texte-2); }
.pied__col { display: grid; gap: 8px; }
.pied__legal { justify-items: end; text-align: right; }

/* ---------- Configurateur ---------- */

.config { display: grid; grid-template-columns: minmax(0, 1fr) clamp(400px, 34vw, 500px); align-items: start; }

.scene {
  position: sticky;
  top: calc(var(--entete) + env(safe-area-inset-top, 0px));
  height: calc(100vh - var(--entete));
  height: calc(100dvh - var(--entete) - env(safe-area-inset-top, 0px));
  min-height: 460px;
  overflow: hidden;
  isolation: isolate;
  background: #E9E5DE;
}
.scene__toile { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.scene__toile:active { cursor: grabbing; }
.scene__toile canvas { display: block; width: 100%; height: 100%; outline: none; }

.scene__haut { position: absolute; top: 22px; left: 28px; right: 28px; display: flex; justify-content: flex-end; gap: 16px; pointer-events: none; }
.scene__aide { color: var(--encre-3); text-align: right; }

.scene__coupe {
  position: absolute; left: 24px; bottom: 24px;
  width: clamp(190px, 16vw, 240px);
  padding: 12px 14px 8px;
  background: rgba(250, 248, 244, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(25, 23, 20, .1);
  border-radius: 6px;
}
.scene__coupe figcaption { margin-bottom: 4px; font-size: .66rem; }
.scene__coupe svg { display: block; width: 100%; height: auto; }

.scene__outils { position: absolute; right: 24px; bottom: 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.segment { display: inline-flex; padding: 3px; gap: 2px; background: rgba(250, 248, 244, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(25, 23, 20, .1); border-radius: var(--arrondi); }
.vue-btn { min-height: 34px; padding: 0 16px; font-size: .8125rem; font-weight: 500; letter-spacing: .02em; color: var(--encre-2); background: transparent; border: 0; border-radius: calc(var(--arrondi) - 2px); cursor: pointer; transition: background-color .25s, color .25s; }
.vue-btn:hover { color: var(--encre); }
.vue-btn[aria-pressed="true"] { color: var(--papier); background: var(--taupe); }
.bascule {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px;
  font-size: .8125rem; font-weight: 500; color: var(--encre-2);
  background: rgba(250, 248, 244, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(25, 23, 20, .1); border-radius: var(--arrondi);
  cursor: pointer;
}
.bascule input { margin: 0; accent-color: var(--taupe); }
.bascule__court { display: none; }
.zoom {
  position: absolute; top: 22px; left: 24px; z-index: 1;
  display: inline-flex; padding: 3px; gap: 2px;
  background: rgba(250, 248, 244, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(25, 23, 20, .1); border-radius: var(--arrondi);
}
.zoom__btn {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  font: 400 1.2rem/1 var(--f); color: var(--encre-2);
  background: transparent; border: 0; border-radius: calc(var(--arrondi) - 2px);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color .25s, color .25s;
}
@media (hover: hover) { .zoom__btn:hover { color: var(--encre); background: rgba(25, 23, 20, .06); } }   /* au doigt, le survol resterait collé */
.zoom__btn:active { background: rgba(25, 23, 20, .12); }
.zoom__btn:focus-visible { outline: 2px solid var(--encre); outline-offset: 1px; }
.zoom__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.onglets { display: none; }   /* les onglets d'étapes : téléphone et tablette seulement (plus bas) */

.scene__coupe { transition: opacity .4s var(--doux); }
.scene--arbre .scene__coupe { opacity: 0; pointer-events: none; }   /* vue par la fenêtre : la coupe n'a rien à y faire */
.scene__etat { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 32px; text-align: center; pointer-events: none; background: #E9E5DE; }
.chargement::after {
  content: "";
  display: block;
  width: 120px; height: 1px; margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, var(--encre), transparent) 0 0 / 50% 100% no-repeat, var(--pierre-2);
  animation: chargement 1.4s var(--doux) infinite;
}
@keyframes chargement { from { background-position: -60px 0, 0 0; } to { background-position: 180px 0, 0 0; } }
.scene__etat--echec { background: var(--fond); pointer-events: auto; }
.scene__etat--echec img { width: min(280px, 60%); aspect-ratio: 4 / 5; object-fit: cover; }
.scene__etat--echec p { max-width: 26em; font-size: .9375rem; color: var(--encre-2); }

/* Panneau d'options */
.panneau { --pad: clamp(24px, 2.8vw, 48px); min-height: calc(100vh - var(--entete)); padding: 30px var(--pad) 0; background: var(--papier); border-left: 1px solid var(--pierre); }
.retour { display: inline-flex; gap: 8px; text-decoration: none; }
.retour:hover { color: var(--encre); }
.panneau__tete { display: grid; gap: 14px; padding-block: 30px 34px; }
.panneau__titre { font-size: clamp(2.4rem, 3.2vw, 3.2rem); }   /* un h2 : le seul h1 de la page est celui de l'accueil */
.panneau__tete p:not(.cote) { font-size: .9375rem; color: var(--encre-2); }

.etape { padding-block: 28px 30px; border-top: 1px solid var(--pierre); scroll-margin-top: calc(var(--entete) + 12px); }
.etape__tete { display: flex; align-items: baseline; gap: 14px; }
.etape__num { font-size: .72rem; font-weight: 500; letter-spacing: .12em; color: var(--bronze); font-variant-numeric: tabular-nums; }
.etape__titre { font-size: 1.5rem; font-weight: 400; }
.etape__valeur { margin-left: auto; font-size: .875rem; color: var(--encre-2); text-align: right; }
.etape__intro { margin-top: 6px; font-size: .9375rem; color: var(--encre-2); }
.etape__grille { margin-top: 20px; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 12px; }
.etape__detail { margin-top: 14px; min-height: 2.7em; font-size: .9375rem; line-height: 1.35; color: var(--encre-2); }

.sous-etapes { display: grid; gap: 14px; margin-top: 8px; padding-top: 20px; border-top: 1px dashed var(--pierre-2); }
.sous-etape { display: grid; gap: 8px; }
.sous-etape__titre { font-size: .875rem; color: var(--encre-2); }
.seg-groupe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; background: var(--fond); border: 1px solid var(--pierre); border-radius: var(--arrondi); }
.seg { position: relative; display: flex; }
.seg__radio { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.seg__nom {
  flex: 1;
  display: grid; place-content: center; justify-items: center; gap: 1px;
  min-height: 44px; padding: 4px 8px; line-height: 1.2;
  font-size: .8438rem; font-weight: 500; text-align: center; white-space: nowrap; color: var(--encre-2);
  border-radius: calc(var(--arrondi) - 2px);
  cursor: pointer;
  transition: background-color .25s, color .25s;
}
.seg:hover .seg__nom { color: var(--encre); }
.seg.est-choisi .seg__nom { color: var(--papier); background: var(--taupe); }
.seg__prix { font-size: .72rem; font-weight: 400; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.seg.est-choisi .seg__prix { color: var(--pierre-2); }
.seg__radio:focus-visible + .seg__nom { outline: 2px solid var(--encre); outline-offset: 2px; }

.choix { position: relative; display: grid; gap: 9px; align-content: start; cursor: pointer; }
.choix__radio { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.choix__visuel {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1;
  display: grid; place-items: center;
  overflow: hidden;
  background: var(--fond) center / cover no-repeat;
  border: 1px solid var(--pierre);
  border-radius: 4px;
  transition: border-color .25s, box-shadow .25s, transform .3s var(--doux);
}
.choix__visuel svg { width: 100%; height: 100%; }
.choix__croquis { position: absolute; inset: 0; display: grid; place-items: center; }
.choix__croquis svg { width: 100%; height: 100%; }
.choix__toile { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .4s var(--doux); }
.choix__toile.est-rendu { opacity: 1; }
.choix__visuel.est-3d .choix__croquis { visibility: hidden; }
.choix:hover .choix__visuel { border-color: var(--pierre-2); }
.choix.est-choisi .choix__visuel { border-color: var(--encre); }
/* le second trait du choix actif est dessiné par-dessus l'image rendue (une ombre intérieure passerait dessous) */
.choix__visuel::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 3px; box-shadow: inset 0 0 0 1px transparent; pointer-events: none; transition: box-shadow .25s; }
.choix.est-choisi .choix__visuel::after { box-shadow: inset 0 0 0 1px var(--encre); }
.choix__radio:focus-visible + .choix__visuel { outline: 2px solid var(--encre); outline-offset: 3px; }
.choix__nom { font-size: .8125rem; line-height: 1.3; text-align: center; color: var(--encre-2); }
.choix__prix { margin-top: -5px; font-size: .75rem; line-height: 1.3; text-align: center; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.choix.est-choisi .choix__nom { color: var(--encre); font-weight: 500; }
/* L'arbre : il suit l'essence. Seule la tuile de l'essence se touche (un bouton) ; l'autre arbre
   est pâli, le frêne indisponible (gris). */
.choix--auto { width: 100%; padding: 0; font: inherit; color: inherit; text-align: inherit; background: none; border: 0; -webkit-tap-highlight-color: transparent; }
.choix--auto:disabled { cursor: default; }
.choix--auto:disabled:hover .choix__visuel { border-color: var(--pierre); }
.choix--auto:disabled:not(.choix--indisponible) .choix__image { opacity: .5; }
.choix--auto:disabled .choix__nom { color: var(--encre-3); }
.choix--auto:focus-visible { outline: none; }
.choix--auto:focus-visible .choix__visuel { outline: 2px solid var(--encre); outline-offset: 3px; }
.choix__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.choix--indisponible .choix__image { filter: grayscale(1); opacity: .42; }
.choix__etiquette { margin-top: -6px; font-size: .625rem; font-weight: 500; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; text-align: center; color: var(--encre-3); }

/* Barre de prix */
.prix-barre {
  position: sticky; bottom: 0; z-index: 4;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 8px calc(-1 * var(--pad)) 0;
  padding: 14px var(--pad) calc(14px + env(safe-area-inset-bottom, 0px));
  background: rgba(250, 248, 244, .94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--encre);
}
.prix-barre__montant { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 10px; }
.prix-barre__montant .cote { grid-column: 1 / -1; }
.prix-barre__total { font-size: 1.9rem; font-weight: 400; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.prix-barre__note { font-size: .8125rem; color: var(--encre-3); white-space: nowrap; }
.vient-de-changer { animation: prix-change .9s var(--doux); }
@keyframes prix-change { from { color: var(--bronze); } to { color: var(--encre); } }

/* Récapitulatif */
.recap { padding-block: clamp(72px, 9vw, 128px); border-top: 1px solid var(--pierre-2); scroll-margin-top: var(--entete); }
.recap__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.recap__gauche { display: grid; gap: 22px; justify-items: start; align-content: start; }
.recap__gauche .cartouche { width: 100%; }
.recap__tete { display: grid; gap: 16px; max-width: 40rem; margin-bottom: clamp(32px, 4vw, 56px); }
.recap__tete h2 { font-size: clamp(2.4rem, 4.4vw, 3.8rem); }
.recap__intro { max-width: 30em; font-size: 1.0625rem; color: var(--encre-2); }
.recap__droite { padding: clamp(24px, 3.2vw, 48px); background: var(--papier); border: 1px solid var(--pierre); border-radius: 6px; }
.note { font-size: .8125rem; color: var(--encre-3); }
.note a { color: var(--encre-2); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.note a:hover { color: var(--encre); }
/* champ piège à robots : hors de l'écran, jamais vu ni atteint au clavier */
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.cartouche { background: var(--papier); border: 1px solid var(--encre); border-radius: 4px; overflow: hidden; font-size: .9063rem; }
.cartouche__tete { display: grid; grid-template-columns: auto 1fr; border-bottom: 1px solid var(--encre); }
.cartouche__tete > span { padding: 11px 16px; }
.cartouche__marque { font-size: .8rem; font-weight: 500; letter-spacing: .36em; text-transform: uppercase; border-right: 1px solid var(--encre); }
.cartouche__modele { align-self: center; font-size: .8125rem; color: var(--encre-2); }
.cartouche__lignes { margin: 0; }
.cartouche__ligne { display: grid; grid-template-columns: 7.6rem minmax(0, 1fr) auto; border-bottom: 1px solid var(--pierre); }
.cartouche__ligne:last-child { border-bottom: 0; }
.cartouche__ligne dt { padding: 10px 14px; font-size: .66rem; font-weight: 500; line-height: 1.8; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2); border-right: 1px solid var(--pierre); }
.cartouche__ligne dd { margin: 0; padding: 10px 14px; }
.cartouche__mesure { color: var(--encre-3); }
.cartouche dd.cartouche__prix { min-width: 5.6rem; padding: 10px 14px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; border-left: 1px solid var(--pierre); }
.cartouche dd.cartouche__prix--inclus { color: var(--encre-3); }
.cartouche__ligne--total { border-top: 1px solid var(--encre); }
.cartouche__ligne--total dt { color: var(--encre); }
.cartouche__ligne--total dd { align-self: center; font-size: .8125rem; color: var(--encre-3); }
.cartouche__ligne--total dd.cartouche__prix { font-size: 1.25rem; font-weight: 500; color: var(--encre); }
.cartouche__ligne--total dd.cartouche__sur-demande { font-size: 1rem; font-weight: 500; color: var(--encre); }

/* Prix sur demande (afficherPrix: false dans options.js) : une seule colonne de texte au récapitulatif,
   pas de montants sous les tuiles, et les textes de remplacement à la place des montants. */
.sans-prix .cartouche__ligne { grid-template-columns: 7.6rem minmax(0, 1fr); }
.sans-prix .prix-barre__total { font-size: 1.35rem; white-space: nowrap; }
.prix-barre__montant { min-width: 0; }
/* très petits écrans : « Sur demande » passe sur deux lignes plutôt que de pousser le bouton hors de l'écran */
@media (max-width: 380px) { .sans-prix .prix-barre__total { font-size: 1.1rem; } }
.sans-prix .avec-prix, .sans-prix .choix__prix, .sans-prix .seg__prix { display: none !important; }
body:not(.sans-prix) .sur-demande { display: none !important; }
.cartouche__pied { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-top: 1px solid var(--encre); font-size: .8rem; font-weight: 500; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.cartouche__pied > div { padding: 10px 14px; overflow-wrap: anywhere; }
.cartouche__pied > div + div { border-left: 1px solid var(--encre); }
.cartouche__etiquette { color: var(--encre-3); text-transform: uppercase; letter-spacing: .12em; margin-right: 6px; }

/* Formulaire */
.demande { display: grid; gap: 18px; }
.champs-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.champ { display: grid; gap: 7px; }
.champ label { font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2); }
.champ label span { text-transform: none; letter-spacing: 0; color: var(--encre-3); }
.champ input, .champ textarea, .envoi textarea {
  width: 100%;
  padding: 13px 15px;
  font: 400 1rem/1.35 var(--f);
  color: var(--encre);
  background: #FFFFFF;
  border: 1px solid var(--pierre-2);
  border-radius: 4px;
  transition: border-color .2s, box-shadow .2s;
}
.champ textarea { resize: vertical; min-height: 110px; }
.champ input:focus, .champ textarea:focus, .envoi textarea:focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 1px var(--encre); }
.champ input[aria-invalid="true"] { border-color: var(--alerte); }
.erreur { font-size: .9375rem; color: var(--alerte); }
/* le délai du moment, juste avant l'envoi (options.js, delai) */
/* le délai du moment, et le paiement à la livraison : juste avant d'envoyer, un point bronze */
.demande__delai, .demande__paiement { display: flex; align-items: baseline; gap: 10px; font-size: .9375rem; color: var(--encre-2); }
.demande__delai::before, .demande__paiement::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--bronze); transform: translateY(-1px); }

.envoi { display: grid; gap: 16px; }
.envoi__titre { font-size: 1.9rem; scroll-margin-top: calc(var(--entete) + 120px); }
.envoi p { font-size: .9375rem; color: var(--encre-2); }
.envoi strong { font-weight: 500; color: var(--encre); user-select: all; }
.envoi textarea { min-height: 240px; font: 400 .875rem/1.4 var(--f); resize: vertical; }
.envoi__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ---------- Pages de texte (confidentialité) ---------- */

.legal { max-width: 44rem; padding-block: clamp(48px, 7vw, 104px) clamp(72px, 9vw, 128px); display: grid; gap: 16px; }
.legal h1 { font-size: clamp(2.4rem, 4.4vw, 3.6rem); margin-bottom: 8px; }
.legal h2 { font-size: 1.3rem; font-weight: 400; letter-spacing: -.01em; margin-top: 24px; }
.legal p { color: var(--encre-2); }
.legal a { color: var(--encre); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal__intro { font-size: 1.1875rem; color: var(--encre) !important; max-width: 34em; }
.legal .note { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--pierre); }
.legal ol, .legal ul { margin: 0; padding-left: 1.25em; display: grid; gap: 10px; color: var(--encre-2); }
.legal li { padding-left: .2em; }
.legal li::marker { color: var(--encre-3); font-variant-numeric: tabular-nums; }
.legal li strong { color: var(--encre); }
/* La garantie en trois points : trois clauses courtes, séparées par un filet */
.legal .resume { margin: 8px 0 16px; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--pierre); }
.legal .resume li { padding: 14px 0; border-bottom: 1px solid var(--pierre); }
.legal .resume li strong { display: block; margin-bottom: 2px; }
/* Les exclusions : chaque cas dans sa propre clause, numérotée à part (LPC art. 44) */
.legal .exclusions { counter-reset: exclusion; list-style: none; padding-left: 0; }
.legal .exclusions li { counter-increment: exclusion; padding-left: 2.2em; position: relative; }
.legal .exclusions li::before { content: "6." counter(exclusion); position: absolute; left: 0; color: var(--encre-3); font-variant-numeric: tabular-nums; }

/* ---------- Écrans moyens et petits ---------- */

@media (max-width: 900px) {
  /* --bas : onglets + une étape + barre de prix ; l'aperçu prend le reste de l'écran (voir @supports) */
  :root { --entete: 64px; --bas: 330px; --scene-h: clamp(190px, 36vh, 420px); }
  .config { grid-template-columns: minmax(0, 1fr); }

  /* L'aperçu : bas et large, collé sous l'en-tête pendant qu'on choisit. Le lit y est cadré serré
     (apercu3d.js, poseSerree) ; la coupe cotée n'y tient pas, les tuiles « Arêtes » la remplacent. */
  .scene { height: var(--scene-h); min-height: 0; z-index: 5; border-bottom: 1px solid var(--pierre-2); }
  .scene__haut, .scene__coupe { display: none; }
  .zoom { top: 10px; left: 10px; padding: 2px; }
  .zoom__btn { width: 30px; height: 30px; }
  .scene__outils { left: 10px; right: 10px; bottom: 10px; flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; }
  .bascule { min-height: 32px; padding: 0 12px; gap: 7px; font-size: .75rem; }
  .bascule__long { display: none; }
  .bascule__court { display: inline; }
  .segment { padding: 2px; }
  .vue-btn { min-height: 28px; padding: 0 11px; font-size: .75rem; }

  /* Le panneau remplit le reste de l'écran : les onglets, l'étape choisie, la barre de prix. */
  .panneau { display: flex; flex-direction: column; min-height: calc(100vh - var(--entete) - env(safe-area-inset-top, 0px) - var(--scene-h)); padding-top: 0; border-left: 0; }
  .retour { display: none; }
  .panneau__tete { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .onglets {
    position: sticky; top: calc(var(--entete) + env(safe-area-inset-top, 0px) + var(--scene-h)); z-index: 4;
    display: grid; grid-template-columns: repeat(var(--onglets, 5), minmax(0, 1fr));   /* --onglets : app.js */
    margin: 0 calc(-1 * var(--pad));
    background: var(--papier);
    border-bottom: 1px solid var(--pierre);
  }
  .onglet {
    display: grid; justify-items: center; gap: 3px; min-width: 0;
    padding: 12px 4px 10px; margin-bottom: -1px;
    font: inherit; color: var(--encre-3);
    background: none; border: 0; border-bottom: 2px solid transparent;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .onglet__nom { font-size: .8125rem; font-weight: 500; color: var(--encre-2); }
  .onglet__valeur { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .6875rem; color: var(--encre-3); }
  .onglet[aria-selected="true"] { border-bottom-color: var(--encre); }
  .onglet[aria-selected="true"] .onglet__nom { color: var(--encre); }
  .onglet:focus-visible { outline: 2px solid var(--encre); outline-offset: -4px; }
  .etape { padding-block: 14px 10px; border-top: 0; }
  .etape:not(.est-active) { display: none; }
  .etape__tete, .etape__intro { display: none; }
  .etape__grille { margin-top: 0; gap: 10px; }
  .etape__detail { margin-top: 8px; min-height: 2.7em; font-size: .875rem; line-height: 1.35; }
  .sous-etapes { gap: 10px; margin-top: 2px; padding-top: 12px; }
  .seg__nom { min-height: 40px; }
  .prix-barre { margin-top: auto; padding-block: 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .prix-barre .btn { min-height: 46px; padding: 0 1.4em; }
  .prix-barre__total { font-size: 1.6rem; }
}
/* téléphone : des tuiles un peu plus petites, réparties sur la largeur */
@media (max-width: 600px) {
  .etape__grille { grid-template-columns: repeat(var(--n, 3), minmax(0, 96px)); justify-content: space-between; }
}
/* tablette : l'étape garde une largeur de téléphone, centrée, plutôt que des tuiles géantes */
@media (min-width: 600px) and (max-width: 900px) {
  .etape { width: 100%; max-width: 560px; margin-inline: auto; }
}
/* L'aperçu prend la hauteur que la barre de Safari laisse vraiment (dvh), moins le bas ; jamais plus
   haut que ce que le lit entier demande (70 % de la largeur), ni plus bas que 190 px. */
@supports (height: 1dvh) {
  @media (max-width: 900px) {
    :root { --scene-h: clamp(190px, min(70vw, calc(100dvh - var(--entete) - env(safe-area-inset-top, 0px) - var(--bas))), 440px); }
    .panneau { min-height: calc(100dvh - var(--entete) - env(safe-area-inset-top, 0px) - var(--scene-h)); }
  }
}

@media (max-width: 860px) {
  .recap__grille { grid-template-columns: minmax(0, 1fr); }
  .pied__in { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pied__legal { justify-items: start; text-align: left; }
}

@media (max-width: 640px) {
  .champs-duo { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .couverture__photo img, .couverture__bas { animation: none; opacity: 1; transform: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ==========================================================================
   Configurateur sur téléphone : l'image d'abord (2026-09-29)
   Ne touche que les écrans de 900 px et moins. Le mot BELMONT est posé sur l'aperçu (plus de bande
   claire au-dessus), le bas (onglets, étape, barre de prix) est resserré et mesuré, et l'aperçu prend
   tout le reste de l'écran.
   ========================================================================== */
@media (max-width: 900px) {
  /* L'en-tête flotte sur l'aperçu : transparent, hors du flux ; seul le mot se touche. */
  .en-config .entete, .en-config .entete.defile {
    position: absolute; top: env(safe-area-inset-top, 0px); left: 0; right: 0;
    background: transparent; border-bottom-color: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    pointer-events: none;
  }
  .en-config .entete .marque { pointer-events: auto; }
  .en-config .scene { top: env(safe-area-inset-top, 0px); }
  /* Pas de bande claire sous l'heure : Safari y met la couleur de fond de l'aperçu (collé en haut de
     l'écran). On lui donne le ton du haut de la chambre 3D, et le haut de l'image s'y fond. */
  .scene { --scene-haut: #AEA599; background: var(--scene-haut); }
  .scene::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 64px; pointer-events: none;
    background: linear-gradient(var(--scene-haut), rgb(174 165 153 / 0));
  }
  .zoom { left: auto; right: 10px; }   /* le zoom cède le coin gauche au mot BELMONT */
  .zoom__btn svg { width: 14px; height: 14px; }

  /* --bas : onglets + une étape + barre de prix, resserrés ; l'aperçu prend le reste (voir @supports). */
  :root { --bas: 256px; --scene-h: clamp(190px, min(150vw, 60vh), 640px); }   /* --bas mesuré : onglets 51 + étape 151 + barre 53 */
  .onglets { top: calc(env(safe-area-inset-top, 0px) + var(--scene-h)); }
  .onglet { padding: 7px 2px 6px; gap: 1px; }
  .onglet__nom { font-size: .72rem; }
  .onglet__valeur { font-size: .6rem; }
  .panneau { min-height: calc(100vh - env(safe-area-inset-top, 0px) - var(--scene-h)); }
  .etape { padding-block: 9px 6px; }
  .choix { gap: 5px; }
  .choix__nom { font-size: .72rem; }
  .choix__etiquette { margin-top: -3px; font-size: .56rem; }
  .etape__detail { margin-top: 5px; min-height: 2.6em; font-size: .78rem; line-height: 1.3; }
  .sous-etapes { gap: 6px; margin-top: 0; padding-top: 8px; }
  .sous-etape { gap: 4px; }
  .sous-etape__titre { font-size: .72rem; }
  .seg__nom { min-height: 32px; padding: 2px 6px; font-size: .75rem; }
  .prix-barre { gap: 12px; padding-block: 7px calc(7px + env(safe-area-inset-bottom, 0px)); }
  .prix-barre .btn { min-height: 38px; padding: 0 1.2em; font-size: .8rem; }
  .prix-barre__montant .cote { font-size: .6rem; }
  .prix-barre__total { font-size: 1.3rem; }
  .sans-prix .prix-barre__montant { display: flex; align-items: baseline; gap: 8px; }
  .sans-prix .prix-barre__total { font-size: 1rem; }
}
@media (max-width: 600px) {
  /* des tuiles plus petites, alignées à gauche comme le texte */
  .etape__grille { grid-template-columns: repeat(var(--n, 3), minmax(0, 76px)); justify-content: start; gap: 12px; }
}
/* svh (l'écran avec la barre de Safari dépliée) plutôt que dvh : l'aperçu garde sa hauteur quand la barre
   se replie en défilant. Avec dvh, la toile 3D changeait de taille à chaque fois : un « flash » blanc. */
@supports (height: 1svh) {
  @media (max-width: 900px) {
    :root { --scene-h: clamp(190px, min(150vw, calc(100svh - env(safe-area-inset-top, 0px) - var(--bas))), 640px); }
    .panneau { min-height: calc(100svh - env(safe-area-inset-top, 0px) - var(--scene-h)); }
  }
}

/* ==========================================================================
   Configurateur sur grand écran : comme sur téléphone (2026-09-29)
   Plus d'en-tête ivoire au-dessus de l'aperçu : le mot BELMONT est posé sur la chambre 3D, en haut à
   gauche, l'aperçu prend toute la hauteur de la fenêtre, et le zoom (− + ↺) passe en haut à droite,
   l'aide juste à sa gauche. Le panneau des choix commence en haut, lui aussi.
   ========================================================================== */
@media (min-width: 901px) {
  .en-config .entete, .en-config .entete.defile {
    position: absolute; top: 0; left: 0; right: 0;
    background: transparent; border-bottom-color: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    pointer-events: none;
  }
  .en-config .entete__in { max-width: none; padding-inline: 28px; }   /* aligné sur les marges de l'aperçu */
  .en-config .entete .marque { pointer-events: auto; }
  .scene { top: 0; height: 100vh; height: 100dvh; }
  .panneau { min-height: 100vh; }
  .zoom { top: 15px; left: auto; right: 24px; }   /* centré sur la ligne du mot BELMONT (en-tête de 72 px) */
  /* l'aide, sur la même ligne, à gauche du zoom (le groupe fait 114 px : 3 boutons de 34, marges et bord) */
  .scene__haut { top: 15px; right: calc(24px + 114px + 16px); left: auto; height: 42px; align-items: center; white-space: nowrap; }
}

/* ==========================================================================
   « VOIR CHEZ MOI » (2026-09-29) — le Belmont dans une photo de sa chambre. L'outil est dans
   assets/chez-moi/ (son interface plein écran porte ses propres styles) ; ici, seulement le bouton, en
   haut à gauche de l'aperçu, sous le mot BELMONT, dans le style des commandes de l'aperçu.
   ========================================================================== */
.chez-moi-btn {
  position: absolute; top: 72px; left: 24px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px;
  font: 500 .8125rem/1.3 var(--f); letter-spacing: .01em; color: var(--encre-2);
  background: rgba(250, 248, 244, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(25, 23, 20, .1); border-radius: var(--arrondi);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color .25s, color .25s, border-color .25s;
}
.chez-moi-btn[hidden] { display: none; }
.chez-moi-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.chez-moi-btn[aria-busy="true"] { opacity: .6; cursor: progress; }
@media (hover: hover) {
  .chez-moi-btn:hover { color: var(--papier); background: var(--taupe); border-color: var(--taupe); }
}
@media (max-width: 900px) {
  /* sous le zoom (en haut à droite) et le mot BELMONT ; les commandes du bas sont déjà pleines */
  .chez-moi-btn { top: 56px; left: 10px; min-height: 32px; padding: 0 12px; gap: 7px; font-size: .75rem; }
  .chez-moi-btn svg { width: 15px; height: 15px; }
}