/* =========================================================
   Muller Guitare — design system
   ========================================================= */

:root {
  /* Palette — direction A « L'atelier sous la lampe » (sombre, premium black + gold) */
  --paper:        #14100d;   /* fond laque (page) */
  --paper-2:      #1c1611;   /* surface : cartes, formulaires */
  --panel:        #0c0a07;   /* fonds de sections / footer (plus sombres que la page) */
  --ink:          #ece3d1;   /* texte (crème) */
  --ink-soft:     #d6cbb5;   /* texte adouci */
  --muted:        #9c8e79;   /* texte discret */
  --line:         rgba(236, 227, 209, 0.16);
  --line-strong:  rgba(236, 227, 209, 0.30);
  --amber:        #c9a24b;   /* accent or : fonds, CTA */
  --amber-rgb:    201, 162, 75; /* = --amber, pour les rgba(...) de teintes/anneaux */
  --amber-deep:   #d9b568;   /* accent or pour le TEXTE (plus clair → lisible sur sombre) */
  --cream:        #ece3d1;   /* texte clair sur fonds sombres — reste clair */

  /* Type — proposition P2 « Le classique de Crémone » */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Jost", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;  /* eyebrows, specs, prix (façon fiche technique) */

  /* Metrics */
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 4px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.40), 0 6px 18px rgba(0,0,0,.40);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.55);
  --header-h: 76px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; padding: 0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; }
.display { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 500; }
.h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
.h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
p { color: var(--ink-soft); }
.lead { font-size: clamp(1.12rem, 1.6vw, 1.4rem); color: var(--ink-soft); line-height: 1.5; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .73rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber-deep);
  display: inline-block;
}

/* ---------- Layout helpers ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--wide { --container: 1400px; }
.section { padding-block: clamp(4rem, 9vw, 8rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--dark .eyebrow { color: #d9a566; }
.stack > * + * { margin-top: 1.1rem; }

.center { text-align: center; }
.measure { max-width: 62ch; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--amber);
  --btn-fg: var(--paper);
  display: inline-flex; align-items: center; gap: .6em;
  padding: .9em 1.6em;
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: .92rem; font-weight: 600; letter-spacing: .02em;
  border-radius: 2px;            /* direction A : coins nets */
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
/* CTA or sur fond sombre : texte laque #14100D sur or #C9A24B ≈ 8:1 (WCAG AAA). */
.btn--amber { --btn-bg: var(--amber); --btn-fg: var(--paper); }
.btn--amber:hover { --btn-bg: var(--amber-deep); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--cream);
  border: 1px solid var(--line-strong);
}
.btn--ghost:hover { --btn-bg: rgba(236,227,209,.10); --btn-fg: var(--cream); }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; pointer-events: none; }
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 600; color: var(--amber-deep);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color .25s var(--ease);
}
.link-arrow:hover { border-color: currentColor; }
.link-arrow .arr { transition: transform .25s var(--ease); }
.link-arrow:hover .arr { transform: translateX(3px); }

/* ---------- Focus visible (clavier) ----------
   Anneau cohérent sur tous les interactifs. Les champs/chips/swatches ont déjà
   leur propre style focus-visible (box-shadow) ; ce bloc ne vise que a/button/[tabindex]. */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--amber-deep);
  outline-offset: 2px;
}
/* Sur fonds sombres : ambre clair pour rester lisible (l'amber-deep s'y effacerait). */
.section--dark :where(a, button):focus-visible,
.hero :where(a, button):focus-visible,
.cat-entries :where(a, button):focus-visible,
.nav__overlay :where(a, button):focus-visible,
.site-footer :where(a, button):focus-visible,
.lightbox :where(a, button):focus-visible,
.site-header:not(.is-solid) :where(a, button):focus-visible {
  outline-color: #e6bd86;
}
/* Cible programmatique du skip-link : pas d'anneau disgracieux sur le <main>. */
#app:focus { outline: none; }
#app:focus-visible { outline: none; }

/* ---------- Skip link (accès clavier au contenu) ---------- */
.skip-link {
  position: fixed; top: .6rem; left: .6rem; z-index: 1000;
  background: var(--panel); color: var(--cream);
  padding: .65rem 1.1rem; border-radius: var(--radius);
  font-weight: 600; font-size: .9rem;
  transform: translateY(-160%); transition: transform .2s var(--ease);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; }

/* ---------- Chargement / erreur (le rendu est 100% côté JS) ---------- */
.boot-loader, .boot-error {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-items: center;
  background: var(--paper);
}
.boot-loader__spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--line-strong); border-top-color: var(--amber-deep);
  animation: bootspin .8s linear infinite;
}
@keyframes bootspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-loader__spin { animation-duration: 2.4s; } }

.boot-error { color: var(--ink); text-align: center; padding: var(--gutter); }
.boot-error__inner { max-width: 30rem; }
.boot-error__title { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: .6rem; }
.boot-error p { color: var(--ink-soft); margin-bottom: 1.2rem; }

/* =========================================================
   Header / Navigation
   ========================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
  color: var(--cream);
}
.site-header__inner { width: min(100% - 2*var(--gutter), 1400px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: flex; flex-direction: column; line-height: 1; z-index: 2; }
.brand--logo { flex-direction: row; align-items: center; }
.brand__logo { height: 66px; width: auto; display: block; transition: filter .25s var(--ease); }
@media (max-width: 600px) { .brand__logo { height: 46px; } }
/* Thème sombre : le logo « Muller » (noir) est toujours forcé en blanc (header transparent OU solide). */
.site-header .brand__logo { filter: brightness(0) invert(1); }
.brand__name { font-family: var(--font-display); font-size: 1.32rem; font-weight: 600; letter-spacing: .04em; }
.brand__tag { font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; opacity: .8; margin-top: .35em; }
/* Footer sombre : logo en blanc. */
.footer-logo { height: 58px; width: auto; display: block; margin-bottom: 1rem; filter: brightness(0) invert(1); }

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav__list { display: flex; align-items: center; gap: 1.4rem; }
.nav__link { font-size: .86rem; font-weight: 500; letter-spacing: .01em; position: relative; padding: .3em 0; opacity: .92; }
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-active { opacity: 1; color: var(--amber-deep); }
.nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }

/* Scrolled / solid header */
.site-header.is-solid {
  background: rgba(20,16,13,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
  color: var(--cream);
  border-bottom: 1px solid var(--line);
}
/* Pages without a hero use the solid header from the start */
body[data-header="solid"] { padding-top: var(--header-h); }

.nav-toggle { display: none; }
.nav__overlay { display: none; }

/* Mobile menu */
@media (max-width: 940px) {
  .nav__list { display: none; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; z-index: 2;
  }
  .nav-toggle span { height: 2px; width: 26px; background: currentColor; transition: transform .3s var(--ease), opacity .2s var(--ease); margin-left: auto; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav__overlay {
    position: fixed; inset: 0; background: var(--panel); color: var(--cream);
    display: flex; flex-direction: column; justify-content: safe center; align-items: center; gap: .7rem;
    padding: calc(var(--header-h) + .5rem) 1.25rem 2rem; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
    /* 99 = juste SOUS le header (100). L'overlay n'est plus un enfant du header (cf. app.js,
       UX5-1 : le backdrop-filter du header solide en faisait le bloc conteneur du `position:fixed`,
       et le menu se réduisait à la hauteur du header — 116 px, aucun lien atteignable).
       Sous le header, la croix de fermeture et le logo restent cliquables, comme avant. */
    z-index: 99;
  }
  /* ⚠️ À L'OUVERTURE, `visibility` bascule SANS transition. La règle de base transitionne
     `visibility` sur .35s — utile à la FERMETURE (le calque reste visible pendant le fondu), mais à
     l'ouverture la valeur calculée restait `hidden` pendant la première frame. Un élément
     `visibility:hidden` n'est pas focalisable : le `.focus()` du confinement clavier échouait en
     silence, et le focus restait sur le <body> (mesuré : « BODY » au lieu du premier lien, sur les
     pages où le style n'était pas déjà résolu). Le fondu d'ouverture ne porte donc plus que sur
     `opacity`/`transform` — visuellement identique. */
  .nav__overlay.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease), transform .35s var(--ease); }
  .nav__overlay a { font-family: var(--font-display); font-size: clamp(1.2rem, 5.5vw, 1.55rem); }
  .nav__overlay a.is-active { color: #d9a566; }
}

/* =========================================================
   Hero
   ========================================================= */
/* overflow:hidden : l'image .kenburns (scale animé) déborde du cadre — la rogner ici évite de
   compter sur body{overflow-x:hidden} seul et réduit la zone de paint. */
.hero { position: relative; min-height: 92vh; display: flex; align-items: flex-end; color: var(--cream); overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
/* `--hero-fx` / `--hero-fy` : point de la photo gardé visible quand elle est rognée (réglé au back-office ; absents =
   les valeurs d'origine). */
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-fx, 50%) var(--hero-fy, 50%); }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,16,13,.42) 0%, rgba(20,16,13,.10) 30%, rgba(20,16,13,.88) 100%);
}
.hero__inner { padding-bottom: clamp(3.5rem, 8vw, 7rem); padding-top: calc(var(--header-h) + 2rem); max-width: 52rem; }
.hero__title { margin-top: .5rem; font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
/* Filet accent sous le titre (reprend la signature du nuancier) — texte calé en bas, hors visage. */
.hero__rule { display: block; width: 56px; height: 2px; margin-top: 1.1rem; background: #e6bd86; border: 0; border-radius: 2px; }
.hero__sub { margin-top: .95rem; font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: rgba(243,236,225,.88); max-width: 50rem; }
/* Mise en page « logo » de l'accueil (2026-10-02, maquette de Loïc) : logo + phrase à DROITE de la
   photo, centrés l'un sous l'autre. Le voile sombre vient de la droite (là où est le texte) au lieu du
   bas, pour que le logo blanc et or reste lisible sur les étagères éclairées. */
.hero--logo { align-items: center; }
.hero--logo::after {
  background:
    linear-gradient(270deg, rgba(20,16,13,.78) 0%, rgba(20,16,13,.50) 30%, rgba(20,16,13,.06) 58%, rgba(20,16,13,0) 70%),
    linear-gradient(180deg, rgba(20,16,13,.40) 0%, rgba(20,16,13,0) 22%, rgba(20,16,13,0) 80%, rgba(20,16,13,.55) 100%);
}
.hero__inner--logo {
  /* La largeur remplace celle de .container, qui portait la marge latérale : on la remet en padding,
     sinon une phrase longue (traduction, phrase perso) toucherait le bord (relecture adverse). */
  /* Bloc centré vers 70 % de la largeur (comme sur la maquette), à toute taille d'écran : un plafond de
     largeur le plaquait contre le bord droit sur les grands écrans (retour de Vinz, 2026-10-03). */
  margin-left: auto; margin-right: 4%; max-width: none; width: 52%; padding-inline: var(--gutter);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  /* Remonté au-dessus de la tête de la guitare, qui traverse la photo à mi-hauteur (comme sur la maquette). */
  padding-bottom: clamp(5rem, 22vh, 13rem);
}
/* Taille réglable au back-office (`--hero-logo-scale`, 0,8 à 2 ; 1 par défaut). Le logo ne sort jamais de son bloc. */
.hero__logo { display: block; width: calc(clamp(220px, 24vw, 400px) * var(--hero-logo-scale, 1)); max-width: 100%; height: auto; filter: drop-shadow(0 2px 14px rgba(0,0,0,.5)); }
.hero__tagline {
  margin-top: clamp(1rem, 2vw, 1.6rem); padding-bottom: .18em; border-bottom: 1px solid currentColor;
  font-family: var(--font-display); font-weight: 500; font-variant: small-caps; letter-spacing: .05em;
  font-size: clamp(1.35rem, 2.3vw, 2.1rem); line-height: 1.15; color: #ecdcbf;
  text-shadow: 0 1px 10px rgba(0,0,0,.55);
}
/* Mobile : la photo est un paysage recadré en portrait — on garde Loïc dans le cadre et on passe
   logo + phrase EN BAS, sous son visage, sur un voile qui monte du bas. Jusqu'à 900 px : une tablette
   en PORTRAIT y gagne aussi (à droite, le bloc était à l'étroit et la phrase se coupait sur un mot seul).
   EN PORTRAIT SEULEMENT (2026-10-02, retour de Vinz) : un téléphone tenu en PAYSAGE fait aussi moins de
   900 px de large, mais il est très bas — le bloc empilé tombait en plein sur Loïc. En paysage, c'est la
   disposition « ordinateur » qui convient (sujet à gauche, logo à droite), écran bas pris en charge plus bas. */
@media (max-width: 900px) and (orientation: portrait) {
  .hero--logo { align-items: flex-end; }
  .hero--logo .hero__media img { object-position: var(--hero-fx, 42%) var(--hero-fy, 50%); }
  .hero--logo::after { background: linear-gradient(180deg, rgba(20,16,13,.35) 0%, rgba(20,16,13,0) 28%, rgba(20,16,13,.12) 44%, rgba(20,16,13,.72) 62%, rgba(20,16,13,.92) 100%); }
  .hero__inner--logo { width: 100%; margin: 0 auto; padding-bottom: 4.6rem; }
  .hero__logo { width: calc(min(58vw, 260px) * var(--hero-logo-scale, 1)); }
}
/* Cadrage ASYMÉTRIQUE sur ordinateur (2026-10-02, demande de Loïc) : on élargit le cadre de la photo
   vers la GAUCHE seulement — le bord gauche est rogné, le sujet glisse dans le tiers gauche, le centre et
   la droite se dégagent pour le logo. Le cadre déborde du .hero, qui le rogne (overflow:hidden). Au-delà
   de 900 px, OU en paysage (téléphone tourné) : sur téléphone et tablette en portrait, le sujet reste centré. */
@media (min-width: 901px), (orientation: landscape) {
  .hero--crop-gauche-leger .hero__media { left: -14%; }
  .hero--crop-gauche .hero__media { left: -28%; }
  .hero--crop-gauche-leger .hero__media img, .hero--crop-gauche .hero__media img { object-position: var(--hero-fx, 50%) var(--hero-fy, 35%); }
}
/* Écran BAS et large (téléphone en paysage, ~ 390 à 430 px de haut) : la disposition « ordinateur »
   garde son côté, mais en plus petit — sinon logo + phrase débordent de la hauteur sous l'en-tête. */
@media (orientation: landscape) and (max-height: 520px) {
  .hero__inner--logo { padding-top: calc(var(--header-h) + .4rem); padding-bottom: 2.6rem; }
  .hero__logo { width: calc(clamp(150px, 21vw, 230px) * var(--hero-logo-scale, 1)); max-height: 46vh; object-fit: contain; }
  .hero__tagline { margin-top: .6rem; font-size: clamp(1.05rem, 2.6vw, 1.35rem); }
}
/* Texte réservé aux lecteurs d'écran et aux moteurs (ex. titre principal d'un en-tête sans phrase). */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.scroll-cue { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); color: var(--cream); opacity: .8; animation: scrollBounce 1.9s var(--ease) infinite; }
.scroll-cue svg { display: block; }
@keyframes scrollBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(7px); } }

/* =========================================================
   Home — intro
   ========================================================= */
.intro-split { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 860px) { .intro-split { grid-template-columns: 1fr 1fr; } }

/* Accueil — deux entrées catégories plein cadre (pleine largeur) */
.cat-entries { display: block; background: var(--panel); }
.cat-entry { position: relative; display: flex; align-items: center; min-height: min(76vh, 680px); overflow: hidden; color: #fff; }
.cat-entry__media { position: absolute; inset: 0; }
.cat-entry__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.cat-entry:hover .cat-entry__media img { transform: scale(1.05); }
.cat-entry::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,16,13,.8) 0%, rgba(20,16,13,.5) 45%, rgba(20,16,13,.12) 100%); }
.cat-entry__inner { position: relative; z-index: 1; width: 100%; }
.cat-entry__text { max-width: 30rem; }
.cat-entry__title { font-size: clamp(2.4rem, 5.5vw, 4.4rem); margin: .4rem 0 .8rem; color: #fff; }
.cat-entry__sub { color: rgba(243,236,225,.88); font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 26rem; }
.cat-entry__cta { margin-top: 1.4rem; color: #e6bd86; font-weight: 600; letter-spacing: .02em; }
.cat-entry:nth-child(even)::after { background: linear-gradient(270deg, rgba(20,16,13,.8) 0%, rgba(20,16,13,.5) 45%, rgba(20,16,13,.12) 100%); }
.cat-entry:nth-child(even) .cat-entry__text { margin-left: auto; text-align: right; }
@media (max-width: 640px) {
  .cat-entry { min-height: 62vh; }
  .cat-entry::after, .cat-entry:nth-child(even)::after { background: linear-gradient(180deg, rgba(20,16,13,.3) 0%, rgba(20,16,13,.72) 100%); }
  .cat-entry__text, .cat-entry:nth-child(even) .cat-entry__text { max-width: none; text-align: left; margin-left: 0; }
}

/* =========================================================
   Collection grid + model cards
   ========================================================= */
.page-head { padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.page-head .lead { margin-top: 1rem; }

.grid-models { display: grid; gap: clamp(1.5rem, 3vw, 2.4rem); }
@media (min-width: 620px) { .grid-models { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid-models { grid-template-columns: repeat(3, 1fr); } }

/* Vignette épurée : photo sur fond cendré texturé (tissu), nom du modèle seul */
.mcard { display: block; text-align: center; }
.mcard__media {
  position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius);
  background-color: var(--paper-2);
  background-image:
    repeating-linear-gradient(45deg, rgba(28,23,20,.024) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(135deg, rgba(28,23,20,.018) 0 1px, transparent 1px 3px);
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.mcard:hover .mcard__media { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.mcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.mcard:hover .mcard__media img { transform: scale(1.04); }
.mcard__name { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: -.01em; margin-top: 1rem; color: var(--ink); }

/* =========================================================
   Model detail
   ========================================================= */
/* Bandeau-cover de la page modèle (guitare en arrière-plan) */
.model-cover { position: relative; display: flex; align-items: flex-end; min-height: min(64vh, 600px); overflow: hidden; color: #fff; }
.model-cover__media { position: absolute; inset: 0; }
.model-cover__media img { width: 100%; height: 100%; object-fit: cover; }
.model-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,13,.35) 0%, rgba(20,16,13,.18) 38%, rgba(20,16,13,.88) 100%); }
.model-cover__inner { position: relative; z-index: 1; padding-top: 5rem; padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.model-cover__back { display: inline-flex; gap: .4em; font-size: .85rem; color: rgba(243,236,225,.85); margin-bottom: 1rem; padding: .5em .55em; margin-left: -.55em; margin-top: -.5em; }
.model-cover__back:hover { color: #fff; }
.model-cover__title { font-size: clamp(2.4rem, 6vw, 4.6rem); margin: .3rem 0; color: #fff; }
.model-cover__tag { font-family: var(--font-display); font-style: italic; font-size: clamp(1.1rem, 2vw, 1.5rem); color: rgba(243,236,225,.9); max-width: 32ch; }
.model-cover__price { margin: .8rem 0 1.4rem; font-size: 1.1rem; }
.model-cover__price b { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; color: #e6bd86; }
.model-cover__price small { color: rgba(243,236,225,.7); text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; }

.model-hero { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 940px) { .model-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }

.gallery__main { position: relative; display: block; width: 100%; padding: 0; aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow-sm); cursor: zoom-in; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; margin-top: .7rem; }
.gallery__thumbs button { aspect-ratio: 1; border-radius: 3px; overflow: hidden; opacity: .62; transition: opacity .25s var(--ease); outline: 2px solid transparent; }
.gallery__thumbs button:hover { opacity: 1; }
.gallery__thumbs button.is-active { opacity: 1; outline-color: var(--amber); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.model-info .price-tag { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--amber-deep); }
.spec-list { margin-top: 1.8rem; border-top: 1px solid var(--line); }
.spec-list div { display: flex; justify-content: space-between; gap: 1.5rem; padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
.spec-list dt { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.spec-list dd { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }

.prose p + p { margin-top: 1.1rem; }
.prose { max-width: 68ch; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(15,12,10,.92); display: flex; align-items: center; justify-content: center; padding: 4vmin; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 3px; box-shadow: var(--shadow-lg); }
.lightbox__cap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 1.4rem 4rem 1.1rem; text-align: center; color: #fff; font-size: .95rem; line-height: 1.4; background: linear-gradient(to top, rgba(15,12,10,.85), rgba(15,12,10,0)); pointer-events: none; }
.lightbox__close, .lightbox__nav { position: absolute; color: #fff; width: 56px; height: 56px; display: grid; place-items: center; font-size: 1.6rem; opacity: .8; transition: opacity .2s; }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 2.4rem; }
.lightbox__nav--prev { left: .5rem; } .lightbox__nav--next { right: .5rem; }
.lightbox__close:hover, .lightbox__nav:hover { opacity: 1; }

/* =========================================================
   Editorial pages (atelier / stage / reglage)
   ========================================================= */
.feature { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 880px) { .feature { grid-template-columns: 1fr 1fr; } .feature--flip .feature__media { order: 2; } }
.feature__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); aspect-ratio: 3/2; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
/* Mise en page « wide » : photo sur toute la largeur du contenu, ENTIÈRE, texte dessous sur une colonne lisible. */
.page-wide { display: grid; gap: clamp(1.8rem, 4vw, 3.2rem); }
.page-wide__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.page-wide__media img { display: block; width: 100%; height: auto; }
.page-wide__text { max-width: 74ch; margin-inline: auto; }

.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
@media (min-width: 720px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
.gallery-grid button { aspect-ratio: 1; overflow: hidden; border-radius: 3px; background: var(--paper-2); }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gallery-grid button:hover img { transform: scale(1.07); }

.price-list { border-top: 1px solid var(--line); max-width: 640px; }
.price-list li { display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.price-list .pl-label { font-weight: 500; }
.price-list .pl-price { font-family: var(--font-mono); font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--amber-deep); white-space: nowrap; }

.note { font-size: .88rem; color: var(--muted); }

/* =========================================================
   Contact
   ========================================================= */
.contact-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 860px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.info-row { display: flex; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.info-row svg { flex: none; width: 22px; height: 22px; color: var(--amber-deep); margin-top: .2rem; }
.info-row__label { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.info-row__value { font-size: 1.05rem; font-weight: 500; margin-top: .15rem; }
.info-row__value a:hover { color: var(--amber-deep); }

.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.field label { font-size: .82rem; font-weight: 600; letter-spacing: .02em; }
/* `select` inclus (4ᵉ audit UX) : il n'avait AUCUNE règle — mesuré à 19 px de haut, fond blanc,
   police 13 px au milieu d'un formulaire dont tous les champs font 54 px / 16 px. Il porte pourtant
   le PAYS DE LIVRAISON, champ obligatoire qui détermine le port et la mention de douane ; et sous
   16 px, iOS zoome automatiquement à la sélection. */
.field input, .field textarea, .field select {
  font: inherit; padding: .8em 1em; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--paper-2); color: var(--ink); transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field select { -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 1.15em top 55%, right .8em top 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.4em; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(var(--amber-rgb), .15); }
/* Bouton afficher/masquer mot de passe (placé sous le champ) */
.pw-toggle { align-self: flex-start; margin-top: .15rem; font-size: .8rem; font-weight: 600; color: var(--amber-deep); text-decoration: underline; text-underline-offset: 2px; }
.pw-toggle:hover { color: var(--ink); }
.field textarea { resize: vertical; min-height: 140px; }
.form-note { font-size: .82rem; color: var(--muted); margin-top: .6rem; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: var(--panel); color: var(--cream); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1.2fr; } }
.site-footer .footer-head { font-family: var(--font-body); font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: #d9a566; margin-bottom: 1rem; font-weight: 600; }
.site-footer a { color: rgba(243,236,225,.8); transition: color .2s var(--ease); }
.site-footer a:hover { color: #fff; }
.footer-nav li + li { margin-top: .5rem; }
.footer-brand .brand__name { font-size: 1.5rem; }
.footer-brand p { color: rgba(243,236,225,.7); margin-top: 1rem; max-width: 34ch; font-size: .92rem; }
.social { display: flex; gap: .8rem; margin-top: 1.3rem; }
.social a { width: 42px; height: 42px; border: 1px solid rgba(243,236,225,.25); border-radius: 50%; display: grid; place-items: center; }
.social a:hover { background: rgba(243,236,225,.1); border-color: rgba(243,236,225,.5); }
.social svg { width: 18px; height: 18px; }
.footer-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(243,236,225,.14); display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; font-size: .8rem; color: rgba(243,236,225,.6); }
.footer-bottom a { font-size: inherit; display: inline-block; padding: .5em .35em; margin: -.5em -.35em; }
/* Crédit S3 Labs du pied de page (choix de Vinz, 03/10) : le « logo en ligne, petit format » du kit v2, version L1
   (04/10, remplace C1), variante sombre — « S3 LABS » d'un seul trait, la broche est le fût du L, dans UN fichier dessiné pour 24 à 60 px
   (la hauteur de l'image EST la hauteur des lettres : rien ne dépasse). Pleine
   opacité : atténué, l'ancien symbole (kit v1, traits de 1 à 1,5 px sur 320) se fondait dans le fond sombre.
   Tout sur UNE ligne de base : le bas du fichier EST la ligne de base du dessin, posé sur celle de « Site réalisé par ». */
.footer-credit { display: inline-flex; align-items: baseline; gap: .35em; }
/* Zone de clic d'au moins 44 px de haut (rembourrage), compensée par des marges négatives : la ligne du pied de
   page ne s'épaissit pas, et la zone couvre le dessin qui dépasse au-dessus de la ligne de texte. */
.footer-credit a.s3-credit { display: inline-flex; align-items: baseline; padding: 22px .35em 11px; margin: -22px -.35em -11px; }
/* 24 px de haut → 149 px de large. ≥ 12 px à gauche (la moitié de la hauteur des lettres, règle du kit) : le
   dessin est rogné au ras du S, sinon « par » le touche. Marge haute négative : la ligne de texte garde sa
   hauteur, le dessin dépasse au-dessus. Le bloc est en ligne-bloc et son SVG en bloc : son bas EST la ligne de base. */
.s3-mark { flex: none; display: inline-block; vertical-align: baseline; margin: calc(1em - 24px) 0 0 12px; }
/* Styles du composant animé (s3-anim-mini, kit v2) — recopiés du livrable, la hauteur fixée à 24 px. Pendant la
   lecture la broche dépasse au-dessus du bloc de 0,89 fois sa hauteur, sans rien décaler (overflow visible). */
.s3-anim-mini { --s3m-ink: #F4EFE6; --s3m-cu: #D08A52; --s3m-height: 24px; }
.s3-anim-mini svg { display: block; height: var(--s3m-height, 1.12em); width: auto; overflow: visible; }
.s3-anim-mini .s3m-i { stroke: var(--s3m-ink); }
.s3-anim-mini .s3m-f { fill: var(--s3m-ink); }
.s3-anim-mini .s3m-c { fill: var(--s3m-cu); }
.s3-anim-mini .s3m-t { pointer-events: none; }

/* Newsletter — bandeau « rester informé » en tête du footer */
.newsletter { display: grid; gap: .6rem 2rem; align-items: center; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(243,236,225,.14); }
@media (min-width: 760px) { .newsletter { grid-template-columns: 1fr minmax(320px, 440px); } }
.newsletter__text h2 { font-size: clamp(1.2rem, 1.9vw, 1.6rem); color: var(--cream); margin-top: .1rem; }
.newsletter__text p { color: rgba(243,236,225,.7); font-size: .88rem; margin-top: .25rem; max-width: 50ch; }
.newsletter__form { display: flex; gap: .6rem; flex-wrap: wrap; align-items: stretch; }
.newsletter__form input { flex: 1 1 200px; min-width: 0; padding: .8rem 1rem; border-radius: var(--radius); border: 1px solid rgba(243,236,225,.22); background: rgba(243,236,225,.06); color: var(--cream); font: inherit; }
.newsletter__form input::placeholder { color: rgba(243,236,225,.6); }
.newsletter__form input:focus { outline: none; border-color: #d9a566; background: rgba(243,236,225,.1); }
.newsletter__note { grid-column: 1 / -1; margin-top: -.4rem; font-size: .9rem; }
.newsletter__note:empty { display: none; }
.newsletter__note.is-ok { color: #9fcf8f; }
.newsletter__note.is-err { color: #e6a3a3; }
.newsletter__consent { grid-column: 1 / -1; margin-top: 0; font-size: .74rem; line-height: 1.4; color: rgba(243,236,225,.5); max-width: 75ch; }
.newsletter__consent a { color: rgba(243,236,225,.7); text-decoration: underline; text-underline-offset: 2px; }
.newsletter__consent a:hover { color: #e6bd86; }

/* =========================================================
   Reveal on scroll
   ========================================================= */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .scroll-cue { animation: none; }
}

/* =========================================================
   Configurateur / Devis
   ========================================================= */
.cfg-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 920px) { .cfg-grid { grid-template-columns: minmax(0, 1fr) 370px; } }

.opt-group { padding-top: 1.6rem; margin-top: 1.6rem; border-top: 1px solid var(--line); }
.opt-group:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.opt-group__label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-weight: 600; margin-bottom: .8rem; }
.opt-group__label .picked { font-weight: 500; color: var(--muted); font-size: .88rem; }

.opt-chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.chip > span { display: inline-flex; align-items: center; gap: .5em; padding: .55em 1.05em; border: 1px solid var(--line-strong); border-radius: 100px; font-size: .9rem; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.chip:hover > span { border-color: var(--ink); }
.chip input:checked + span { background: var(--amber); color: var(--paper); border-color: var(--amber); }
.chip input:focus-visible + span { outline: 2px solid var(--amber-deep); outline-offset: 2px; }
.chip .delta { font-size: .78rem; font-weight: 600; color: var(--amber-deep); }
.chip input:checked + span .delta { color: var(--paper); }
/* Option verrouillée par une dépendance (ex. table rapportée imposée par corps chambré) */
.chip input:disabled { cursor: not-allowed; }
.chip input:disabled + span { opacity: .38; }
.forced-note { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--amber-deep); margin-left: .6em; padding: .15em .55em; background: rgba(var(--amber-rgb), .13); border-radius: 100px; vertical-align: middle; }
/* Note « {valeur} · indisponible avec {source} » : une valeur grisée par une exclusion (ton neutre, ≠ imposition). */
.excluded-note { font-size: .64rem; letter-spacing: .04em; font-weight: 600; color: var(--ink-soft, #6b6b6b); margin-left: .6em; padding: .15em .55em; background: rgba(0, 0, 0, .06); border-radius: 100px; vertical-align: middle; }
/* Option qui IMPOSE un autre champ : hint « → impose … » sous le libellé (visible AVANT le clic). */
.chip-imposes { display: block; font-size: .68rem; font-weight: 500; color: var(--muted); margin-top: .15rem; }
.chip--imposes .chip-imposes, .chip input:checked ~ span .chip-imposes { color: var(--amber-deep); }
/* Flash du groupe imposé quand un choix « à distance » vient de le verrouiller. */
@keyframes mg-dep-flash { 0% { box-shadow: 0 0 0 0 rgba(var(--amber-rgb), .0); } 25% { box-shadow: 0 0 0 4px rgba(var(--amber-rgb), .45); } 100% { box-shadow: 0 0 0 0 rgba(var(--amber-rgb), 0); } }
.opt-group.is-flash { animation: mg-dep-flash 1.4s ease; border-radius: 10px; }
.opt-group[hidden] { display: none !important; }
/* Groupe à choix unique (sélection par modèle) : masqué du formulaire mais rendu et coché —
   sa valeur reste dans le récap/config/estimation (masquage CSS et PAS hidden : readState()
   exclut les groupes hidden). Cf. configurator.js groupShell(). */
.opt-group.is-single { display: none !important; }
/* Cibles tactiles confortables sur mobile (>=44px) */
@media (max-width: 600px) {
  .chip > span { min-height: 44px; }
}

/* Sticky recap */
/* LE TOTAL TOUJOURS VISIBLE (demande Vinz, 2026-09-17). La colonne est PLUS HAUTE que l’écran (25+
   lignes sur les modèles de Loïc) : collante, elle ne montrait sa fin — donc le prix — qu’en bas de
   page. Elle est désormais bornée à la hauteur de l’écran et défile SUR ELLE-MÊME ; la tête (modèle +
   total) colle en haut, les boutons collent en bas, la liste défile entre les deux.
   Sous 920 px rien de tout ça : la colonne redevient statique et .cfg-bar porte le total.
   ⚠️ Les BANDEAUX FIXES comptent (relecture adverse, 2026-09-17) : celui du paiement en attente pousse
   la page vers le bas (--pending-h), ceux de recette et d’inspection de compte se posent EN BAS de
   l’écran (--demo-h, z-index 99999) — sans eux dans le calcul, les boutons collants passaient dessous.
   Pas d’overscroll-behavior : en bout de course, la molette doit continuer de faire défiler la page. */
.cfg-aside { position: sticky; top: calc(var(--header-h) + var(--pending-h, 0px) + 1rem); max-height: calc(100vh - var(--header-h) - var(--pending-h, 0px) - var(--demo-h, 0px) - 2rem); overflow-y: auto; scrollbar-width: none; border-radius: var(--radius); }
/* La colonne défile toujours (molette, doigt, clavier) mais SANS barre visible (retour de Vinz, 2026-10-04 : la barre, dans
   la page, se lisait comme un défaut). Le total en tête et les boutons en bas restent collés : rien d'essentiel n'est caché. */
.cfg-aside::-webkit-scrollbar { display: none; }
.recap { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-sm); }
.recap__model { display: flex; gap: .9rem; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.recap__model img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; flex: none; }
.recap__model b { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; }
.recap__model span { display: block; font-size: .78rem; color: var(--muted); }
.recap__list { margin: .8rem 0; font-size: .85rem; }
.recap__list div { display: flex; justify-content: space-between; gap: 1rem; padding: .32rem 0; }
.recap__list .k { color: var(--muted); }
.recap__list .v { font-weight: 500; text-align: right; }
.recap__list .v small { color: var(--amber-deep); font-weight: 600; }
.recap__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 1rem; border-top: 2px solid var(--ink); margin-top: .4rem; }
.recap__total .lab { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.recap__total b { font-family: var(--font-mono); font-size: 1.45rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--amber-deep); }
.recap__head { position: sticky; top: 0; z-index: 2; margin: -1.4rem -1.4rem 0; padding: 1.4rem 1.4rem .8rem; background: var(--paper-2); border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.recap__head .recap__model { padding-bottom: .8rem; }
.recap__head .recap__total { border-top: 0; margin-top: 0; padding-top: .8rem; }
.recap__head .recap__note { margin-top: .3rem; }
.recap__head .recap__note:empty { display: none; }
.recap__actions { position: sticky; bottom: 0; z-index: 2; margin: 1rem -1.4rem 0; padding: .9rem 1.4rem; background: var(--paper-2); border-top: 1px solid var(--line); }
/* Écran COURT (1080p zoomé à 175 % ≈ 530 px de haut) : tête + boutons collants mangeraient la liste.
   ⚠️ APRÈS la règle collante ci-dessus : à spécificité égale c’est la dernière qui gagne.
   On garde le total en tête — c’est la demande — et on rend les boutons au flux. */
@media (min-width: 920px) and (max-height: 640px) { .recap__actions { position: static; } }
.recap__note { font-size: .74rem; color: var(--muted); margin-top: .8rem; line-height: 1.5; }
.recap__actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.1rem; }
.recap__actions .btn { justify-content: center; }
/* « Partager cette configuration » : une ICÔNE sur la ligne du bouton « liste d'envie » — AUCUNE hauteur ajoutée à la colonne
   (2026-10-04 : un troisième bouton, puis un lien, l'allongeaient et faisaient apparaître sa barre de défilement). */
.recap__row { display: flex; gap: .6rem; align-items: stretch; }
.recap__row .btn { flex: 1 1 auto; min-width: 0; padding-inline: .6em; }
.share-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 0 .6rem; background: none; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--cream); cursor: pointer; transition: background .2s, border-color .2s; }
.share-icon:hover, .share-icon:focus-visible { background: rgba(243,236,225,.08); border-color: rgba(243,236,225,.5); }
/* Lien de partage de la configuration : champ en lecture seule, affiché après le clic. */
.share-cfg input { width: 100%; padding: .55rem .7rem; border-radius: var(--radius); border: 1px solid var(--line); background: transparent; color: inherit; font: inherit; font-size: .8rem; }
.share-cfg .recap__note { margin-top: .35rem; }
.included { font-size: .8rem; color: var(--muted); margin-top: 1rem; }
.included li { position: relative; padding-left: 1.2em; margin-top: .25rem; }
.included li::before { content: "✓"; position: absolute; left: 0; color: var(--amber-deep); font-weight: 700; }

/* Nuancier bois (type wood) */
.wood-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: .7rem; }
.swatch { position: relative; cursor: pointer; }
.swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.swatch__tile { display: block; height: 62px; border-radius: 6px; background: linear-gradient(160deg, var(--tone), var(--grain)); border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), inset 0 -8px 14px rgba(0,0,0,.12); transition: box-shadow .2s var(--ease); }
.swatch__tile--img { padding: 0; overflow: hidden; background: var(--paper-2); }
.swatch__tile--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swatch__cap { display: block; margin-top: .4rem; font-size: .82rem; line-height: 1.25; }
.swatch__cap .delta { display: block; color: var(--amber-deep); font-weight: 600; font-size: .72rem; }
.swatch input:checked + .swatch__tile { border-color: var(--ink); box-shadow: 0 0 0 2px var(--amber), inset 0 -8px 14px rgba(0,0,0,.12); }
.swatch input:focus-visible + .swatch__tile { outline: 2px solid var(--amber-deep); outline-offset: 2px; }
/* Bouton « agrandir la photo » (essences, inlays, goodies) : au-dessus du radio/checkbox
   invisible (inset:0) qui recouvre la tuile → z-index élevé + stopPropagation côté JS pour ne
   pas changer la sélection. Le conteneur de l'image doit être position:relative. */
.swatch__tile--img, .goodie__media { position: relative; }
/* .inlay__media n'est PAS positionné : le bouton de zoom s'ancre alors sur la carte .inlay
   (position:relative) → coin haut-droit de la carte, comme sur les essences. */
.inlay__media { display: inline-block; line-height: 0; }
.goodie__media { flex: none; line-height: 0; }
.img-zoom { position: absolute; top: 4px; right: 4px; z-index: 3; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: none; border-radius: 50%; background: rgba(0,0,0,.5); box-shadow: 0 0 0 1px rgba(255,255,255,.22); color: #fff; font-size: .85rem; line-height: 1; cursor: zoom-in; opacity: 0; transition: opacity .2s var(--ease), background .2s var(--ease); }
.img-zoom--sm { width: 24px; height: 24px; top: 2px; right: 2px; font-size: .72rem; }
.img-zoom:hover { background: rgba(0,0,0,.72); }
.swatch:hover .img-zoom, .inlay:hover .img-zoom, .goodie:hover .img-zoom, .img-zoom:focus-visible { opacity: 1; }
/* Tactile : boutons toujours visibles ET cible agrandie (≥ recommandation AA). */
@media (hover: none) {
  .img-zoom { opacity: 1; width: 36px; height: 36px; font-size: 1rem; }
  .img-zoom--sm { width: 30px; height: 30px; font-size: .85rem; }
  /* Cible tactile : retour catégorie remonté vers ~44px. (Sa règle de base est ligne ~326, AVANT
     celle-ci : la cascade la laisse donc passer.)
     ⚠️ `.lang-switch__btn` n'est PLUS ici : sa règle de base est déclarée PLUS BAS (section
     « Sélecteur de langue »), donc à spécificité égale elle gagnait — une media query n'ajoute
     aucune spécificité, c'est l'ordre qui tranche. Le correctif vit maintenant après elle. */
  .model-cover__back { padding: .7em .6em; margin-left: -.6em; margin-top: -.7em; }
}

/* Inlays (type inlay) */
.inlay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .7rem; }
.inlay { position: relative; cursor: pointer; }
.inlay input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.inlay__box { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .55rem; border: 2px solid var(--line-strong); border-radius: 8px; background: var(--paper-2); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); height: 100%; }
.inlay__box img { height: 70px; border-radius: 4px; }
.inlay__ph { height: 70px; width: 42px; border-radius: 4px; display: grid; place-items: center; color: var(--muted); font-size: 1.4rem; background: repeating-linear-gradient(45deg, var(--paper-2), var(--paper-2) 6px, #e6dccb 6px, #e6dccb 12px); }
.inlay__cap { font-size: .78rem; text-align: center; line-height: 1.2; }
.inlay__cap .delta { display: block; color: var(--amber-deep); font-weight: 600; font-size: .72rem; }
.inlay input:checked + .inlay__box { border-color: var(--ink); box-shadow: 0 0 0 2px var(--amber); }
.inlay input:focus-visible + .inlay__box { outline: 2px solid var(--amber-deep); outline-offset: 2px; }
/* Inlay « custom » : encart de prise de contact */
.inlay-contact { display: flex; align-items: center; gap: .6rem; margin-top: .9rem; padding: .7rem .9rem; background: rgba(var(--amber-rgb), .1); border: 1px solid rgba(var(--amber-rgb), .25); border-radius: 8px; font-size: .88rem; }
.inlay-contact[hidden] { display: none; }
.inlay-contact svg { width: 20px; height: 20px; flex: none; color: var(--amber-deep); }
.inlay-contact a { color: var(--amber-deep); font-weight: 600; white-space: nowrap; }

/* Gravure (type engraving) */

/* Goodies / coffrets (cases à cocher avec photo) */
.goodies-grid { display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .goodies-grid { grid-template-columns: 1fr 1fr; } }
.goodie { position: relative; cursor: pointer; display: block; }
.goodie input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.goodie__box { display: flex; gap: .8rem; align-items: center; padding: .7rem; border: 2px solid var(--line-strong); border-radius: 8px; background: var(--paper-2); height: 100%; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.goodie__box img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex: none; }
.goodie__ph { width: 56px; height: 56px; border-radius: 6px; flex: none; display: grid; place-items: center; color: var(--amber-deep); font-size: 1.3rem; background: var(--paper-2); }
.goodie__cap { font-size: .86rem; line-height: 1.25; }
.goodie__cap b { display: inline; }
.goodie__cap .delta { color: var(--amber-deep); font-weight: 600; margin-left: .3em; }
.goodie__desc { display: block; color: var(--muted); font-size: .78rem; margin-top: .2rem; }
.goodie input:checked + .goodie__box { border-color: var(--ink); box-shadow: 0 0 0 2px var(--amber); }
.goodie input:focus-visible + .goodie__box { outline: 2px solid var(--amber-deep); outline-offset: 2px; }

/* Devis form */
.devis-form { background: var(--paper-2); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2rem); margin-top: 2.5rem; }
.devis-form.is-hidden { display: none; }

/* Mobile sticky bar */
.cfg-bar { position: fixed; inset: auto 0 0 0; z-index: 90; display: none; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem var(--gutter); background: rgba(20,16,13,.92); backdrop-filter: blur(8px); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(0,0,0,.5); }
.cfg-bar b { font-family: var(--font-mono); font-size: 1.1rem; font-variant-numeric: tabular-nums; color: var(--amber-deep); }
.cfg-bar .lab { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); display: block; }
@media (max-width: 919px) {
  /* colonne statique : plus de défilement interne, donc plus rien de collant dedans (sinon la tête du
     récap collerait à la FENÊTRE, sous le menu du site) — c’est .cfg-bar qui porte le total ici. */
  .cfg-aside { position: static; max-height: none; overflow: visible; }
  .recap__head, .recap__actions { position: static; }
  .cfg-bar { display: flex; }
  body[data-page="configurateur"] .site-footer { margin-bottom: 72px; }
}

/* Printable devis */
.print-area { display: none; }
@media print {
  body * { visibility: hidden !important; }
  .print-area, .print-area * { visibility: visible !important; }
  .print-area { display: block !important; position: absolute; inset: 0; padding: 2rem; color: #000; }
  .print-area h2 { font-family: var(--font-display); }
  .print-area table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
  .print-area td { padding: .4rem 0; border-bottom: 1px solid #ddd; font-size: .9rem; }
  .print-area td:last-child { text-align: right; }
  .print-area .pa-total { font-weight: 700; font-size: 1.2rem; border-top: 2px solid #000; }
}

/* =========================================================
   Actualités / News
   ========================================================= */
.news-grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 640px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }

.news-card { display: flex; flex-direction: column; background: var(--paper-2); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); color: inherit; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.news-card--video, .news-card--article { cursor: pointer; }
.news-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.news-card:hover .news-card__media img { transform: scale(1.05); }
.news-card__tag { position: absolute; top: .7rem; left: .7rem; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; background: rgba(236,227,209,.92); color: var(--paper); padding: .3em .6em; border-radius: 100px; }
.news-card__play { position: absolute; inset: 0; margin: auto; width: 60px; height: 60px; display: grid; place-items: center; background: rgba(28,23,20,.62); color: #fff; border-radius: 50%; font-size: 1.15rem; padding-left: 4px; transition: background .25s var(--ease), transform .25s var(--ease); }
.news-card--video:hover .news-card__play { background: var(--amber); transform: scale(1.08); }
.news-card__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.news-card__body time { font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--amber-deep); font-weight: 600; }
.news-card__body h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; margin-top: .35rem; line-height: 1.2; }
.news-card__body p { font-size: .92rem; color: var(--muted); margin-top: .5rem; }
.news-card__more { font-size: .82rem; font-weight: 600; color: var(--amber-deep); margin-top: .9rem; display: inline-flex; gap: .4em; align-self: flex-start; padding: 0; background: none; border: 0; cursor: pointer; }
.news-card__full { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.news-card__full > div { overflow: hidden; }
.news-card__full p { font-size: .92rem; color: var(--ink-soft); margin-top: .7rem; }
.news-card--article.is-open .news-card__full { grid-template-rows: 1fr; }
.news-card--article.is-open .news-card__more .arr { transform: rotate(90deg); }

/* Modale vidéo */
.vlb { padding: 5vmin; }
.vlb__frame { width: min(100%, 1100px); aspect-ratio: 16 / 9; }
.vlb__frame iframe { width: 100%; height: 100%; border: 0; border-radius: 6px; box-shadow: var(--shadow-lg); }

/* =========================================================
   Espace client (comptes)
   ========================================================= */
/* padding + marge négative = zone cliquable élargie SANS décaler la mise en page. */
.nav__account, .nav__cart { display: inline-flex; align-items: center; gap: .45em; font-size: .84rem; font-weight: 600; padding: .55em .45em; margin: -.55em -.45em; }
.nav__account svg, .nav__cart svg { width: 20px; height: 20px; }
.nav__account:hover, .nav__cart:hover { color: var(--amber-deep); }
.site-header:not(.is-solid) .nav__account:hover,
.site-header:not(.is-solid) .nav__cart:hover { color: #fff; }
@media (max-width: 940px) { .nav__account { display: none; } }

/* Note de délai de livraison (page modèle) */
.delivery-note { margin-top: 1rem; font-size: .92rem; color: var(--ink-soft); padding: .7rem .9rem; background: var(--paper-2); border-radius: var(--radius); }
.delivery-note__lab { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--amber-deep); margin-bottom: .15rem; }
.delivery-note b { font-weight: 600; color: var(--ink); }

/* Sélecteur de langue — bouton + menu déroulant */
.lang-switch { position: relative; }
.lang-switch__btn { display: inline-flex; align-items: center; gap: .35em; font-size: .82rem; font-weight: 600; letter-spacing: .02em; color: inherit; padding: .25em .2em; transition: color .2s var(--ease); }
.lang-switch__btn svg { width: 16px; height: 16px; opacity: .85; }
.lang-switch__chev { font-size: .85em; opacity: .7; transition: transform .2s var(--ease); }
.lang-switch__btn[aria-expanded="true"] .lang-switch__chev { transform: rotate(180deg); }
.lang-switch__btn:hover { color: var(--amber-deep); }
.site-header:not(.is-solid) .lang-switch__btn:hover { color: #e6bd86; }
.lang-switch__menu { position: absolute; top: calc(100% + .55rem); right: 0; min-width: 140px; list-style: none; margin: 0; padding: .3rem; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-lg); z-index: 60; }
.lang-switch__menu[hidden] { display: none; }
.lang-switch__menu button { display: block; width: 100%; text-align: left; padding: .5rem .7rem; border-radius: 5px; font-size: .9rem; color: var(--ink); transition: background .15s var(--ease); }
.lang-switch__menu button:hover { background: var(--paper-2); }
.lang-switch__menu button.is-active { color: var(--amber-deep); font-weight: 600; }
/* Variante menu mobile (overlay plein écran sombre) */
.nav__overlay .lang-switch { margin-top: .8rem; }
.nav__overlay .lang-switch__btn { font-size: 1.02rem; }
.nav__overlay .lang-switch__menu { position: static; min-width: 0; margin-top: .4rem; padding: 0; background: transparent; border: none; box-shadow: none; }
.nav__overlay .lang-switch__menu button { color: rgba(243,236,225,.8); font-size: .98rem; padding: .3rem 0; }
.nav__overlay .lang-switch__menu button:hover { background: transparent; color: #fff; }
.nav__overlay .lang-switch__menu button.is-active { color: #e6bd86; }
/* TACTILE (5ᵉ audit UX, UX5-8) — ce bloc DOIT rester après `.lang-switch__btn` ci-dessus.
   Ce que l'utilisateur perdait : sur téléphone, le bouton qui fait passer le site en anglais était
   la plus petite cible de l'en-tête (28 × 55 px) — la porte d'entrée d'une clientèle
   internationale. Le correctif existait déjà (@media (hover:none), plus haut dans le fichier) mais
   était ÉCRASÉ par la règle de base déclarée après lui, à spécificité égale. */
@media (hover: none) {
  /* `min-height` en plus du padding : mesuré, le padding seul rendait 60 × 40 px — mieux que les
     28 × 55 px d'avant, mais toujours sous la barre des 44 px de hauteur. */
  .lang-switch__btn { padding: .7em .5em; min-height: 44px; box-sizing: border-box; }
}

.auth-wrap { min-height: calc(100vh - var(--header-h) - 120px); display: grid; place-items: center; }
.auth-card { width: min(100%, 440px); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.6rem, 4vw, 2.6rem); box-shadow: var(--shadow-sm); }
.auth-submit { width: 100%; justify-content: center; margin-top: .4rem; }
.auth-err { background: rgba(180,60,60,.16); color: #f0a8a8; border: 1px solid rgba(180,60,60,.42); padding: .6rem .85rem; border-radius: 6px; font-size: .9rem; margin-bottom: .9rem; }
.auth-alt { margin-top: 1.4rem; font-size: .92rem; color: var(--muted); text-align: center; }
.auth-alt a { color: var(--amber-deep); font-weight: 600; }
.field-hint { font-size: .78rem; color: var(--muted); margin-top: .3rem; display: block; }

.account-box { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--shadow-sm); }

/* --- Panier & liste d'envie (docs/CADRAGE-PANIER.md) --- */
/* Encart « configuration à mettre à jour » : le catalogue a bougé depuis l'enregistrement. Assez
   visible pour qu'on ne passe pas à côté — c'est lui qui justifie que le bouton Commander soit grisé. */
.stale-note { border: 1px solid rgba(var(--amber-rgb), .55); background: rgba(var(--amber-rgb), .10); border-radius: var(--radius); padding: .9rem 1.1rem; margin: .9rem 0; }
.stale-note ul { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .9rem; }
.stale-note li { margin: .15rem 0; }
/* Variante INFORMATIVE (P4-D) : une ligne retirée parce que son groupe n'est pas proposé avec cette
   configuration. Ça se dit — mais ça ne bloque rien : le serveur a mesuré que la ligne ne changeait
   ni le prix ni les règles, et le bouton Commander reste actif. L'ambre du bloc ci-dessus signifie
   « votre commande est bloquée » ; le réutiliser tel quel ferait passer une information pour une
   alerte, et userait le signal d'alerte lui-même.
   ⚠️ Le thème est SOMBRE (--paper #14100d) : un fond « clair discret » y serait un projecteur.
   ⚠️ ET SURTOUT — première version REFUSÉE en relecture : elle reposait `--line` + `--paper-2`, or
   `.account-box` porte DÉJÀ exactement ces deux valeurs. Contraste de fond 1:1, bordure identique :
   l'encadré était INVISIBLE dans son conteneur réel.
   ⚠️ CE QUI REND CE BLOC VISIBLE, C'EST LE LISERÉ, PAS LE FOND — mesuré dans `.account-box`, et dit
   ici parce qu'une deuxième relecture a démoli la version précédente de ce commentaire, qui
   prétendait que le fond « descendait d'un cran » :
        liseré gauche (--muted)      5,60 : 1   ← le seul marqueur réellement lisible
        bordure (--line-strong)     14,05 : 1
        fond (--panel) vs la carte   1,10 : 1   ← quasi invisible, et c'est assumé
   Un fond franchement plus sombre ferait un trou dans la carte ; l'ambre, lui, est réservé à
   « commande bloquée » et l'emprunter userait ce signal-là. */
.stale-note--info { border-color: var(--line-strong); background: var(--panel);
                    border-left: 3px solid var(--muted); }
/* Modale de choix (panier déjà occupé). Même principe que .lightbox : plein écran, fond assombri. */
.mg-modal { position: fixed; inset: 0; z-index: 210; background: rgba(15,12,10,.72); display: grid; place-items: center; padding: 4vmin; }
.mg-modal__panel { background: var(--paper); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2rem); max-width: 34rem; box-shadow: var(--shadow-lg); }
.mg-modal__actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.2rem; }
.mg-modal__actions .btn { justify-content: center; }
/* Actions d une carte du panier : empilees sur mobile, en ligne des qu il y a la place. */
/* Espace client sur UNE page : chaque section est une tuile dépliable (plus de sous-menu).
   Même carte que le reste de l'espace (.account-box) ; seul l'en-tête est cliquable. */
/* Chevron : le seul indice visuel qu'une tuile s'ouvre. Pivote à l'ouverture. */
.acc-tile__count { font-size: .82rem; font-weight: 600; color: var(--muted, #8a8178); margin-left: auto; margin-right: .6rem; }

/* Tuiles panier / liste d'envie : vignette + nom + prix. Le panier reste ouvert (une seule guitare,
   celle qu'on s'apprête à commander) ; les envies sont repliables pour survoler une longue liste. */
.cart-tile { margin-bottom: 1rem; }
.cart-tile__head { display: flex; align-items: center; gap: 1rem; cursor: pointer; list-style: none; }
.cart-tile--open .cart-tile__head { cursor: default; }
.cart-tile__head::-webkit-details-marker { display: none; }
.cart-tile__img { width: 120px; height: 90px; object-fit: cover; border-radius: 3px; flex: 0 0 auto; background: rgba(0,0,0,.15); }
.cart-tile__txt { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 auto; min-width: 0; }
.cart-tile__txt b { font-size: 1.05rem; }
/* NOTE PERSONNELLE, a cote du titre et editable sur place. Reste visible tuile repliee :
   c est exactement la qu elle sert, pour distinguer deux versions du meme modele. */
.cart-note { display: inline-flex; align-items: center; gap: .3rem; margin-left: .5rem; vertical-align: middle; }
.cart-note__val { font-weight: 500; font-size: .82rem; color: var(--amber-deep); background: rgba(var(--amber-rgb), .13); border-radius: 100px; padding: .12em .7em; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-note__val i { color: var(--muted, #8a8178); font-weight: 400; }
.cart-note__input { font: inherit; font-size: .85rem; font-weight: 400; padding: .12em .6em; border: 1px solid var(--amber-deep); border-radius: 100px; background: var(--paper); color: inherit; width: 15rem; max-width: 45vw; }
.cart-note__btn { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 0; background: none; color: var(--muted, #8a8178); cursor: pointer; border-radius: 50%; flex: 0 0 auto; }
.cart-note__btn svg { width: 15px; height: 15px; }
.cart-note__btn:hover { color: var(--amber-deep); background: rgba(var(--amber-rgb), .13); }
.cart-note.is-editing .cart-note__btn { color: var(--amber-deep); }
@media (max-width: 560px) { .cart-note { margin-left: 0; margin-top: .3rem; } }
.cart-tile__txt small { font-size: .8rem; }
.cart-tile__price { font-weight: 700; text-align: right; display: flex; flex-direction: column; gap: .25rem; align-items: flex-end; }
/* Reste visible tuile REPLIÉE : sans ça, on peut passer devant une config périmée sans la voir. */
.cart-tile__warn { font-style: normal; font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--amber-deep); background: rgba(var(--amber-rgb), .15); border-radius: 100px; padding: .2em .7em; }
details.cart-tile[open] .cart-tile__head { margin-bottom: .4rem; }
@media (max-width: 560px) {
  .cart-tile__head { flex-wrap: wrap; }
  .cart-tile__img { width: 84px; height: 63px; }
  .cart-tile__price { text-align: left; align-items: flex-start; width: 100%; }
}
.cart-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.1rem; }
.cart-actions .btn { justify-content: center; }
/* « Retirer » : lien discret, PAS un quatrième bouton pleine largeur identique aux trois autres
   (5ᵉ audit UX, UX5-3 — l'action destructrice avait exactement le même poids visuel que « Mettre en
   liste d'envie », collée 9 px au-dessus). La cible reste ≥ 44 px de haut (padding). */
.cart-remove { align-self: flex-start; margin-top: .2rem; padding: .8em .6em; margin-left: -.6em; background: none; border: 0;
  font: inherit; font-size: .88rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cart-remove:hover, .cart-remove:focus-visible { color: #c25b4b; }
@media (min-width: 620px) { .cart-remove { margin-left: auto; align-self: center; } }
/* Récap de commande : lignes « port » et « TOTAL » ajoutées sous l'estimation (UX5-4). */
.co-total__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .3rem 0; font-size: .95rem; color: var(--ink-soft); }
.co-total__row--sum { border-top: 1px solid var(--line); margin-top: .2rem; padding-top: .5rem; color: var(--ink); }
.co-total__row--sum b { font-size: 1.15rem; }
.co-total__hint { margin: .1rem 0 0; font-size: .8rem; color: var(--muted); text-align: right; }
/* Acceptation des CGV, au-dessus du bouton qui engage (UX5-2). */
.co-cgv { margin: 1.2rem 0 .3rem; padding: .85rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper-2); }
.co-cgv__terms { margin: 0 0 .6rem; font-size: .86rem; line-height: 1.5; color: var(--ink-soft); }
.co-cgv__check { display: flex; align-items: flex-start; gap: .6rem; font-size: .92rem; cursor: pointer; }
.co-cgv__check input { flex: none; width: 18px; height: 18px; margin-top: .15rem; }
.co-cgv__check a { text-decoration: underline; color: var(--amber-deep); }
@media (min-width: 620px) { .cart-actions { flex-direction: row; flex-wrap: wrap; } .cart-actions .btn { flex: 0 1 auto; } }
@media (min-width: 620px) { .mg-modal__actions { flex-direction: row; flex-wrap: wrap; } }
.account-info { margin: 1rem 0 1.5rem; border-top: 1px solid var(--line); }
.account-info > div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.account-info dt { color: var(--muted); font-size: .9rem; }
.account-info dd { font-weight: 500; text-align: right; }

/* Page de paiement — MODE SIMULATION (démonstration ; cf. paiement-demo.html) */
.paydemo { margin: .5rem auto; }
.paydemo__badge { background: rgba(var(--amber-rgb), .14); color: var(--ink); border: 1px solid rgba(var(--amber-rgb), .5); border-radius: 8px; padding: .55rem .8rem; font-size: .84rem; text-align: center; margin: 0 0 1rem; }
.paydemo__card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.3rem, 3vw, 1.7rem); box-shadow: var(--shadow-sm); }
.paydemo__head { display: flex; align-items: center; gap: .5rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.paydemo__merchant { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }
.paydemo__lock { opacity: .75; }
.paydemo__order { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; margin-bottom: .2rem; }
.paydemo__order-lab { color: var(--muted); }
.paydemo__amount { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .7rem 0; margin: .5rem 0 1.1rem; }
.paydemo__amount b { font-size: 1.4rem; font-family: var(--font-mono); }
.paydemo__cancel { display: block; text-align: center; margin-top: .9rem; font-size: .9rem; color: var(--muted); }
.paydemo__note { font-size: .76rem; color: var(--muted); text-align: center; margin: 1rem 0 0; line-height: 1.5; }

/* Annulation d'une commande (espace client) — lien discret */
.order-cancel-wrap { margin-top: 1.2rem; text-align: right; }
.link-cancel { background: none; border: 0; color: var(--muted); font-size: .82rem; cursor: pointer; text-decoration: underline; padding: .3rem; }
.link-cancel:hover { color: var(--ink-soft); }
.link-cancel:disabled { opacity: .6; cursor: default; }

/* Devis dans l'espace client */
.quote-ref { font-size: .78rem; color: var(--muted); }
/* Photos d'avancement dans l'espace client */
.quote-photos { margin-top: .8rem; }
.quote-photos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; }
.quote-photos__grid figure { margin: 0; }
.quote-photos__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; box-shadow: var(--shadow-sm); }
.quote-photos__grid figcaption { font-size: .74rem; color: var(--muted); margin-top: .25rem; line-height: 1.3; }
/* Encart paiement (acompte par virement) */
.quote-pay { margin-top: .8rem; padding: 1rem 1.1rem; background: rgba(var(--amber-rgb), .08); border: 1px solid rgba(var(--amber-rgb), .22); border-radius: 8px; }
.quote-pay__lab { display: block; font-weight: 600; color: var(--amber-deep); }
.quote-pay__hint { font-size: .85rem; color: var(--ink-soft); margin: .3rem 0 .7rem; }
.pay-rib { margin: 0 0 .8rem; font-size: .88rem; }
.pay-rib div { display: flex; gap: .6rem; padding: .15rem 0; }
.pay-rib dt { color: var(--muted); min-width: 92px; }
.pay-rib dd { margin: 0; font-weight: 600; letter-spacing: .02em; }

/* Messagerie client <-> atelier (par devis) */
.quote-msgs { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.quote-msgs__lab { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--amber-deep); margin-bottom: .5rem; }
.quote-msgs__list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .7rem; }
.msg { max-width: 85%; padding: .5rem .75rem; border-radius: 8px; font-size: .88rem; }
.msg p { margin: .15rem 0 0; white-space: pre-line; }
.msg__who { font-size: .72rem; color: var(--muted); }
.msg--in { align-self: flex-start; background: rgba(var(--amber-rgb), .10); border: 1px solid rgba(var(--amber-rgb), .20); }
.msg--out { align-self: flex-end; background: var(--paper-2); border: 1px solid var(--line); }
.quote-msgs__form { display: flex; gap: .5rem; align-items: flex-end; }
.quote-msgs__form textarea { flex: 1; min-width: 0; resize: vertical; }

/* Mes guitares — liste (master) + détail (master-detail) */
.orders-wrap { max-width: 760px; }
.orders-wrap.is-detail { max-width: none; }   /* le détail (2 colonnes) occupe toute la largeur du conteneur */
.order-info-block { margin: .9rem 0; }
.order-info-block .order-info-dl { margin-top: .35rem; }
.order-info-dl .is-total dt, .order-info-dl .is-total dd { font-weight: 700; color: var(--ink); }
.order-info-dl .is-total dd b { font-size: 1.08em; }
.pay-state { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .02em; padding: .1em .55em; border-radius: 100px; margin-left: .5rem; vertical-align: middle; }
.pay-state.is-paid { background: rgba(90, 150, 90, .18); color: #9ed3a0; }   /* = .s-ok (cohérence des puces de statut) */
.pay-state.is-due { background: rgba(200, 130, 60, .20); color: #e8b07f; }   /* = .s-warn */
.order-list { display: flex; flex-direction: column; gap: .7rem; }
/* Espace client — DEUX COLONNES (2026-08-14, demande Vinz) : contenu principal (Mes commandes +
   Mes guitares, sections ouvertes) + colonne profil sticky. Empilé sous 920px (ordre inchangé). */
.acc-layout { display: grid; grid-template-columns: 1fr; gap: 1.4rem; align-items: start; }
@media (min-width: 920px) {
  .acc-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.8rem; }
  .acc-side { position: sticky; top: calc(var(--header-h, 72px) + 1rem); }
}
.acc-main { min-width: 0; }
.acc-sec { margin-bottom: 1.4rem; }
.acc-sec__head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.acc-sec__head h2 { margin: 0; }
.acc-sec__head .acc-tile__count { margin-left: auto; margin-right: 0; }
/* Mini-jauge d'avancement d'une carte commande (position du statut dans la séquence, décorative) */
.order-card__gauge { display: block; height: 3px; border-radius: 99px; background: var(--line); margin-top: .45rem; overflow: hidden; }
.order-card__gauge > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--amber), var(--amber-deep)); }

.order-card { display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left; background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.15rem; cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.order-card:hover { border-color: var(--amber); box-shadow: 0 2px 6px rgba(28,23,20,.10), 0 14px 30px rgba(28,23,20,.10); transform: translateY(-1px); }
.order-card__media { flex: none; width: 96px; height: 72px; border-radius: 8px; overflow: hidden; background: var(--paper-2); }
.order-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.order-card__main { display: flex; flex-direction: column; gap: .25rem; flex: 1; min-width: 0; }
.order-card__name { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.order-card__ref { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.order-card__side { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; flex: none; }
.order-card__est { font-weight: 600; font-variant-numeric: tabular-nums; }
.order-card__arrow { color: var(--amber-deep); flex: none; display: inline-flex; transition: transform .18s ease; }
.order-card:hover .order-card__arrow { transform: translateX(3px); }

/* Refus serveur affiché dans une tuile de panier (4ᵉ audit UX). Texte CLAIR : la palette du site est
   sombre (--paper-2 #1c1611) — un rouge de thème clair y tombait à 2:1. Même convention que
   `.newsletter__note.is-err`. */
.cart-tile__err { margin: .6rem 0 0; padding: .55rem .8rem; border-radius: 6px; background: rgba(176,60,44,.14); border: 1px solid rgba(230,163,163,.45); color: #e6a3a3; font-size: .88rem; }

/* MOBILE (4ᵉ audit UX, mesuré à 375 px) : la carte n'avait AUCUNE media query. `.order-card__side`
   en `flex:none` + `.status` en `nowrap` faisaient porter toute la compression sur le nom du modèle,
   réduit à 23 px de large — il passait sous le badge de statut, et la carte montait à 198 px de haut.
   C'est l'écran de suivi principal du client, sur l'appareil majoritaire. On repasse en deux rangs :
   vignette + nom, puis statut et montant côte à côte en dessous. */
@media (max-width: 620px) {
  .order-card { flex-wrap: wrap; gap: .75rem 1rem; }
  .order-card__media { width: 64px; height: 48px; }
  .order-card__main { flex: 1 1 auto; }
  .order-card__side { order: 3; flex: 1 0 100%; flex-direction: row; align-items: center; justify-content: space-between; }
  .order-card__arrow { order: 2; }
  .order-card .status { white-space: normal; }
}

.order-back { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 0; padding: .25rem 0; margin-bottom: .9rem; color: var(--ink-soft); font-weight: 600; font-size: .9rem; cursor: pointer; }
.order-back:hover { color: var(--amber-deep); }
.order-back__ar { display: inline-flex; transform: rotate(180deg); }
.order-detail__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.order-detail__title { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0; outline: none; }

/* Détail commande : galerie à gauche, carte à droite. Empilé sous 860px. */
.order-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.order-split__col-media { min-width: 0; position: sticky; top: calc(var(--header-h, 72px) + 1rem); }
.order-split__media { display: flex; flex-direction: column; gap: .6rem; }
.order-gal__cap { margin: 0; font-size: .85rem; color: var(--muted); text-align: center; }
.order-split__card { min-width: 0; }
@media (max-width: 860px) {
  .order-split { grid-template-columns: 1fr; }
  .order-split__col-media { position: static; }
}

/* Évènement d'historique dans le fil (timeline système) — distinct des bulles client/atelier */
.msg-evt { align-self: stretch; display: flex; align-items: center; gap: .7rem; margin: .35rem 0; }
.msg-evt::before, .msg-evt::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.msg-evt__txt { font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--amber-deep); }
.msg-evt__date { font-size: .68rem; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .order-card, .order-card__arrow { transition: none; } }

/* Édition du compte (infos + mot de passe) */
.account-banner { background: rgba(var(--amber-rgb), .10); border: 1px solid rgba(var(--amber-rgb), .28); border-radius: 8px; padding: .7rem .9rem; font-size: .9rem; color: var(--ink-soft); margin-bottom: 1rem; }
.account-edit { margin-top: .9rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.account-edit > summary { cursor: pointer; font-weight: 600; color: var(--ink-soft); list-style: none; }
.account-edit > summary::-webkit-details-marker { display: none; }
.account-edit > summary::before { content: "+ "; color: var(--amber-deep); font-weight: 700; }
.account-edit[open] > summary::before { content: "– "; }
.account-edit form { margin-top: .8rem; }

/* Sous-onglets de l'espace client (Infos | Mes guitares) */
.account-tab.is-active { background: var(--amber); color: var(--paper); border-color: var(--amber); }

.status { display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .02em; padding: .3em .75em; border-radius: 100px; white-space: nowrap; }
.s-new { background: rgba(90,130,180,.18); color: #a9c6e6; }
.s-prog { background: rgba(180,150,80,.18); color: #e0c389; }
.s-warn { background: rgba(200,130,60,.20); color: #e8b07f; }
.s-ok { background: rgba(90,150,90,.18); color: #9ed3a0; }
.s-off { background: rgba(150,140,125,.18); color: #c9bfae; }

/* =========================================================
   Passe webdesign — conversion & attrait
   ========================================================= */

/* Hero vivant (Ken Burns discret) */
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
.kenburns { animation: kenburns 22s var(--ease) forwards; transform-origin: 55% 40%; }
@media (prefers-reduced-motion: reduce) { .kenburns { animation: none; } }

/* Tuiles vidéo (réutilisées sur la page modèle) */
.press-card { display: flex; flex-direction: column; gap: 1rem; cursor: pointer; }
.press-card__media { position: relative; display: block; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.press-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.press-card:hover .press-card__media img { transform: scale(1.05); }
.press-card:hover .news-card__play { background: var(--amber); transform: scale(1.08); }

/* Vidéos sur la page modèle (tuiles, jusqu'à 3 par ligne) */
.model-videos { display: grid; gap: 1.3rem; grid-template-columns: 1fr; margin-top: 1.1rem; }
@media (min-width: 560px) { .model-videos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .model-videos { grid-template-columns: 1fr 1fr 1fr; } }
/* Page modèle (2026-09-17, demande Loïc) — vidéo PRINCIPALE, 2ᵉ galerie « Réalisations », prix près du bouton. */
.model-mainvideo { display: block; max-width: 980px; margin: 1.1rem auto 0; }
.model-mainvideo .news-card__play { width: 84px; height: 84px; font-size: 1.6rem; }
.model-mainvideo .model-video__title { text-align: center; font-size: 1rem; }
.model-builds__lead { margin-top: .5rem; color: var(--ink-soft); font-size: .95rem; }
.model-builds { display: grid; gap: 1.4rem 1.2rem; grid-template-columns: 1fr; margin-top: 1.2rem; }
@media (min-width: 560px) { .model-builds { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .model-builds { grid-template-columns: 1fr 1fr 1fr; } }
.model-build { margin: 0; }
.model-build__media { display: block; width: 100%; padding: 0; aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow-sm); cursor: zoom-in; }
.model-build__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.model-build__media:hover img { transform: scale(1.03); }
.model-build figcaption { margin-top: .6rem; font-size: .88rem; line-height: 1.4; color: var(--ink-soft); }
/* Lien « Configurer cette guitare » (2026-10-06) : une invitation LÉGÈRE par photo — un lien texte, pas un bouton,
   le bouton plein « Configurer & commander » existe déjà plus haut sur la page. */
.model-build__cfg { display: inline-block; margin-top: .45rem; font-size: .88rem; font-weight: 600; color: var(--amber-deep); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s var(--ease); }
.model-build__cfg:hover, .model-build__cfg:focus-visible { border-bottom-color: currentColor; }
.model-build__cfg span { display: inline-block; transition: transform .2s var(--ease); }
.model-build__cfg:hover span { transform: translateX(3px); }
.model-info__price { margin-top: 1.6rem; font-size: 1.05rem; }
.model-info__price small { text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; color: var(--muted); }
.model-info__price b { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--amber-deep); margin-left: .35rem; }
.model-info__cta { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .7rem; }
.model-video__title { display: block; margin-top: .6rem; font-size: .9rem; line-height: 1.35; color: var(--ink-soft); }

/* Cartes modèle : 2e photo au survol */
.mcard__alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s var(--ease); }
.mcard:hover .mcard__alt { opacity: 1; }

/* Portfolio de modèles sur une page (non cliquable) : cartes statiques réutilisant .mcard, sans survol. */
.pf-card { cursor: default; }
.pf-card:hover .mcard__media { transform: none; box-shadow: var(--shadow-sm); }
.pf-card:hover .mcard__media img { transform: none; }
.pf-card__price { margin-top: .35rem; color: var(--amber-deep); font-size: .95rem; }

/* Vidéo « guide de configuration » en haut du configurateur (carte cliquer-pour-lire, compacte). */
.cfg-video { margin: 0 0 1.8rem; }
.cfg-video__card { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: var(--ink); max-width: 460px; }
.cfg-video__media { position: relative; flex: 0 0 170px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(0,0,0,.15); }
.cfg-video__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.cfg-video__card:hover .news-card__play { background: var(--amber); transform: scale(1.08); }
.cfg-video__media .news-card__play { width: 44px; height: 44px; font-size: 1rem; }
.cfg-video__title { font-weight: 600; font-size: .95rem; }

/* Carte « composez la vôtre » en fin de grille */
.mcard--cta { display: flex; flex-direction: column; justify-content: center; background: var(--panel); color: var(--cream); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.mcard--cta:hover { box-shadow: var(--shadow-lg); }
.mcard--cta .mcard__cta-in { padding: clamp(1.8rem, 4vw, 2.6rem); display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.mcard--cta .eyebrow { color: #d9a566; }
.mcard--cta h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.15; }
.mcard--cta p { font-size: .92rem; color: rgba(243,236,225,.78); }
.mcard--cta .btn { margin-top: .4rem; }

/* Fiche modèle : prix, barre mobile */
.price-tag small { display: block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.price-tag b { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--amber-deep); }

.model-bar { position: fixed; inset: auto 0 0 0; z-index: 90; display: none; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem var(--gutter); background: rgba(20,16,13,.92); backdrop-filter: blur(8px); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(0,0,0,.5); }
.model-bar .lab { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.model-bar b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; }
@media (max-width: 919px) {
  .model-bar { display: flex; }
  body[data-page="model"] .site-footer { margin-bottom: 64px; }
}

/* ── Bandeaux MODE DÉMO / TEST (recette beta) — injectés par app.js (patchAccountNav) ─────────────
   Barre fixe en bas : n'entre pas en conflit avec le header, reste visible (lien « revenir à l'admin »). */
.mg-demo-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 99999;
  padding: .5rem 1rem; text-align: center;
  font: 600 .82rem/1.35 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #fff; background: #7a1f1f; box-shadow: 0 -2px 10px rgba(0, 0, 0, .28);
}
.mg-demo-banner.is-imp { background: #7a4a12; }
.mg-demo-banner a { color: #fff; text-decoration: underline; margin-left: .5rem; white-space: nowrap; }
.mg-demo-banner strong { font-weight: 800; }
.mg-demo-banner__close {
  margin-left: .6rem; border: 0; cursor: pointer; vertical-align: middle;
  width: 1.5rem; height: 1.5rem; line-height: 1; border-radius: 50%;
  background: rgba(255, 255, 255, .18); color: #fff; font-size: .9rem;
}
.mg-demo-banner__close:hover { background: rgba(255, 255, 255, .34); }
body.has-demo-banner { padding-bottom: 2.8rem; }
/* BARRES COLLANTES DE BAS D'ÉCRAN remontées au-dessus du bandeau de recette (5ᵉ audit UX).
   Le bandeau (z-index 99999) et les barres (.cfg-bar / .model-bar, z-index 90) occupent tous
   `bottom: 0` : mesuré à 375 px, le bandeau recouvrait les 40 derniers pixels de la barre et
   `document.elementFromPoint()` au centre du bouton « Configurer » renvoyait le BANDEAU — le seul
   appel à l'action de la fiche modèle ne recevait plus le doigt. On ne joue pas sur le z-index (le
   bandeau d'impersonation doit rester au-dessus de tout : c'est un contexte de sécurité) mais sur
   la position : la barre se pose SUR le bandeau. --demo-h est publiée par app.js avec la hauteur
   réelle du bandeau (elle change avec le retour à la ligne) ; le repli 0px garde le rendu de prod,
   où le bandeau n'existe pas. */
@media (max-width: 919px) {
  body.has-demo-banner .cfg-bar,
  body.has-demo-banner .model-bar { bottom: var(--demo-h, 0px); }
  /* Et le footer se dégage des DEUX (le décalage existant ne comptait que la barre). Même media
     query que les règles d'origine : au-dessus de 919 px les barres sont en display:none. */
  body.has-demo-banner[data-page="configurateur"] .site-footer { margin-bottom: calc(72px + var(--demo-h, 0px)); }
  body.has-demo-banner[data-page="model"] .site-footer { margin-bottom: calc(64px + var(--demo-h, 0px)); }
}

/* ── Bandeau MODE ATELIER du configurateur (?admin_quote — composer la config d'une commande) ──────
   En haut et DANS le flux (pas fixed) : il ne doit pas se superposer aux bandeaux démo/impersonation
   de la beta, qui occupent déjà le bas de l'écran. Rendu par configurator.js (adminBanner). */
.admin-cfg-banner {
  padding: .6rem 1.2rem; text-align: center;
  font: 600 .85rem/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #fff; background: #7a4a12;
}
.admin-cfg-banner a { color: #fff; text-decoration: underline; white-space: nowrap; margin-left: .4rem; }

/* Autocomplétion d'adresse (API Adresse / BAN — cf. app.js addressAutocomplete). Liste ancrée sous le champ. */
.addr-suggest {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  margin: .2rem 0 0; padding: .25rem; list-style: none;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35); max-height: 230px; overflow-y: auto;
}
.addr-suggest li { padding: .48rem .6rem; border-radius: 5px; cursor: pointer; font-size: .9rem; }
.addr-suggest li:hover, .addr-suggest li.is-hi { background: rgba(212, 154, 42, .18); }

/* Bouton flottant « Back-office » (admin connecté sur le front uniquement, cf. app.js renderAdminLink). */
.mg-admin-link {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 99998;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .85rem; border-radius: 100px; text-decoration: none;
  font: 700 .82rem/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #2a2018; background: var(--amber, #d49a2a);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3); transition: transform .15s ease, box-shadow .15s ease;
}
.mg-admin-link:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 0, 0, .38); }
/* Le bouton flottant se pose au-dessus du bandeau (hauteur réelle publiée par app.js ; le 3.4rem
   codé en dur d'avant était une estimation qui ne suivait pas le retour à la ligne du bandeau). */
body.has-demo-banner .mg-admin-link { bottom: calc(var(--demo-h, 2.4rem) + 1rem); }
/* …et au-dessus de la barre collante de bas d'écran quand il y en a une (5ᵉ audit UX) : sinon la
   pastille « Back-office », z-index 99998, recouvrait le coin droit de `.cfg-bar` / `.model-bar` —
   exactement là où se trouve le bouton d'action (« Configurer », « Demander le devis »). Les
   64/72 px reprennent les hauteurs déjà utilisées par les décalages de footer ci-dessus. */
@media (max-width: 919px) {
  body[data-page="model"] .mg-admin-link { bottom: calc(64px + var(--demo-h, 0px) + 1.2rem); }
  body[data-page="configurateur"] .mg-admin-link { bottom: calc(72px + var(--demo-h, 0px) + 1.2rem); }
}

/* Pastille « commande en attente de paiement » sur le lien compte (cf. patchAccountNav, app.js). */
.nav__account, .nav__cart { position: relative; }
.nav-pay-dot { display: inline-block; min-width: 1.15em; padding: .04em .3em; margin-left: .35em;
  font-size: .68rem; font-weight: 700; line-height: 1.35; text-align: center; color: #1c1710;
  background: var(--amber, #d4a94f); border-radius: 999px; }
.pending-pay-banner { position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(24,19,12,.94); border-bottom: 1px solid rgba(212,169,79,.45);
  color: #f3ece1; font-size: .88rem; text-align: center; padding: .5rem 1rem; }
.pending-pay-banner a { color: var(--amber, #d4a94f); font-weight: 600; text-decoration: underline; margin-left: .4rem; }
/* Le bandeau est hors flux (absolute sous le header fixe) : sans ces deux règles, il RECOUVRE le
   haut de la page (63 px mesurés à 375 px). --pending-h est posée par app.js avec la hauteur
   réelle du bandeau (elle change avec le retour à la ligne). Cf. UX5-11. */
body.has-pending-banner[data-header="solid"] { padding-top: calc(var(--header-h) + var(--pending-h, 0px)); }
body.has-pending-banner .hero__inner { padding-top: calc(var(--header-h) + var(--pending-h, 0px) + 2rem); }