/* Configurateur éventail mariage : trois volets (réglages | aperçu | commande) et mécanique mobile Customcup.
   Couleurs et polices communes : assets/style.css (:root). Les valeurs propres au configurateur sont préfixées --cfg-. */
.config-section, .ccfg {
  --cfg-bandeau: 60px;                 /* hauteur du bandeau sur ordinateur, retirée de la hauteur de la grille */
  --cfg-papier: #f6f0e6;               /* fond papier de l'aperçu, plus chaud que les surfaces */
  --cfg-filet: #d9cfc0;                /* filet un peu plus marqué que --ligne, pour les séparations */
  --cfg-bronze-doux: #b89a78;          /* bronze clair : bords au repos des choix, anneaux */
  --cfg-rayon: 8px;                    /* contrôles */
  --cfg-rayon-panneau: 14px;           /* panneaux */
  --cfg-titre: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --cfg-ombre: 0 1px 2px rgba(43, 38, 34, .06);
  --cfg-transition: 200ms ease;
}

/* ── bandeau de titre ──────────────────────────────────────────────────── */
.config-section { scroll-margin-top: var(--entete); background: var(--carte); overflow-x: clip; } /* clip (pas hidden : les volets collants restent collants) : la vignette mobile transformée ne crée plus de défilement horizontal (U-B5) */
.bandeau { background: var(--fond); color: var(--encre); text-align: center; padding: 12px 16px; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 16px; border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); }
.bandeau h2 { margin: 0; font-family: var(--cfg-titre); font-weight: 600; font-size: 1.45rem; letter-spacing: .01em; color: var(--encre); }
.bandeau span { font-size: .88rem; color: var(--encre2); }

/* ── grille des trois volets ───────────────────────────────────────────── */
.ccfg { display: grid; grid-template-columns: minmax(320px, 380px) minmax(0, 1fr) minmax(300px, 350px); background: var(--carte); border-bottom: 1px solid var(--ligne); }
@media (min-width: 1001px) {
  .bandeau { height: var(--cfg-bandeau); flex-wrap: nowrap; overflow: hidden; white-space: nowrap; padding-block: 0; align-items: center; }
  .ccfg { height: calc(100vh - var(--entete) - var(--cfg-bandeau)); min-height: 640px; max-height: 920px; }
  .reglages, .commande { overflow-y: auto; overscroll-behavior: auto; position: static; height: 100%; scrollbar-width: thin; scrollbar-color: var(--cfg-filet) transparent; } /* overscroll auto : en bout de colonne, la molette rend la main à la page (U-I6) */
  .reglages::-webkit-scrollbar, .commande::-webkit-scrollbar { width: 8px; }
  .reglages::-webkit-scrollbar-thumb, .commande::-webkit-scrollbar-thumb { background: var(--cfg-filet); border-radius: 999px; border: 2px solid var(--carte); }
  .scene { position: static; height: 100%; max-height: none; }
}
/* Écrans bas (portable 13 pouces, 700 px de haut) : le volet commande garde sa hauteur naturelle et colle, réglages et aperçu
   collent à la hauteur de l'écran ; la page défile de quelques centaines de pixels pour révéler le bouton de maquette (U-I7). */
@media (min-width: 1001px) and (max-height: 819px) {
  .ccfg { height: auto; min-height: 0; max-height: none; align-items: start; }
  .reglages, .scene { position: sticky; top: var(--entete); height: calc(100vh - var(--entete)); }
  .commande { height: auto; overflow: visible; position: sticky; top: var(--entete); }
}
.ccfg { scroll-margin-top: var(--entete); } /* « Personnaliser ce modèle » depuis la galerie : la cible ne passe pas sous l'en-tête (U-I12) */

/* titres de colonne et de section : petites capitales espacées */
.col-titre, .section h3 { margin: 0 0 10px; font-family: var(--cfg-titre); font-size: .86rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--encre2); line-height: 1.3; }
.col-titre { margin-bottom: 6px; }
.section h3 b { font-family: var(--cfg-titre); text-transform: none; letter-spacing: 0; color: var(--encre); font-weight: 600; font-size: 1.15rem; margin-left: 8px; }

/* ── volet gauche : les réglages ───────────────────────────────────────── */
.reglages { padding: 22px 22px 32px; border-right: 1px solid var(--ligne); }
.section { padding: 22px 0; border-top: 1px solid var(--ligne); }
.section:first-of-type { border-top: 0; padding-top: 6px; }
.question { margin: 0 0 12px; font-family: var(--cfg-titre); font-size: 1.5rem; font-weight: 600; line-height: 1.2; color: var(--encre); }
.groupe { margin-top: 14px; }
.etiquette { margin: 0 0 8px; font-size: .84rem; color: var(--encre2); letter-spacing: .01em; }
.etiquette b { color: var(--encre); font-weight: 600; }
.etiquette.espace { margin-top: 16px; }
.reglages label, .commande label { display: block; font-size: .88rem; color: var(--encre2); margin-top: 14px; }
.reglages input[type=text], .reglages input[type=date], .commande input[type=text], .commande input[type=email] {
  display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border: 1px solid var(--ligne); border-radius: var(--cfg-rayon);
  font: inherit; font-size: 16px; line-height: 1.4; color: var(--encre); background: var(--carte); min-height: 48px;
  transition: border-color var(--cfg-transition), box-shadow var(--cfg-transition);
}
.reglages input:focus, .commande input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-c); outline: none; }
.reglages input:focus-visible, .commande input:focus-visible { outline: 3px solid #c9a97e; outline-offset: 2px; box-shadow: none; }
.facultatif { color: var(--encre2); font-size: .8rem; font-weight: 400; }
.note { margin: 10px 0 0; font-size: .85rem; color: var(--alerte); }
.aide { margin: 8px 0 0; font-size: .85rem; line-height: 1.5; color: var(--encre2); max-width: 46ch; }
.aide b { color: var(--encre); }
.delai { margin: 10px 0 0; padding: 10px 14px; font-size: .88rem; line-height: 1.5; color: var(--encre2); border-left: 2px solid var(--ligne); border-radius: 0 var(--cfg-rayon) var(--cfg-rayon) 0; background: var(--fond); transition: border-color var(--cfg-transition), background-color var(--cfg-transition), color var(--cfg-transition); }
.delai.ok { color: var(--ok); border-left-color: var(--ok); background: #f1f6f1; }
.delai.alerte { color: var(--alerte); border-left-color: var(--alerte); background: #faf1ee; font-weight: 500; }

/* boutons de choix (toile, taille, monture, emballage, quantité) */
.choix { display: flex; flex-wrap: wrap; gap: 8px; }
.choix button, .options button {
  background: var(--carte); color: var(--encre); border: 1px solid var(--ligne); border-radius: var(--cfg-rayon); text-align: left;
  padding: 10px 14px; min-height: 48px; line-height: 1.3; font-size: .95rem; cursor: pointer;
  transition: border-color var(--cfg-transition), background-color var(--cfg-transition), box-shadow var(--cfg-transition), color var(--cfg-transition);
}
.choix button small, .options button small { display: block; color: var(--encre2); font-size: .78rem; margin-top: 2px; line-height: 1.35; }
.choix button[aria-pressed=true], .options button[aria-pressed=true] { border-color: var(--accent); background: var(--accent-c); box-shadow: inset 0 0 0 1px var(--accent); }
.choix button[aria-pressed=true] small, .options button[aria-pressed=true] small { color: var(--accent); }
.choix.qte { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
.choix.qte button { text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; padding: 10px 6px; min-height: 44px; border-radius: 999px; }
.options { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.options button[disabled] { opacity: .5; cursor: not-allowed; background: var(--fond); }

/* pastilles de couleur : 44 px, double anneau quand choisie */
.pastilles { display: flex; flex-wrap: wrap; gap: 10px; padding: 2px; }
.pastille { width: 44px; height: 44px; min-height: 0; border-radius: 50%; border: 1px solid rgba(43, 38, 34, .18); padding: 0; background-clip: padding-box; box-shadow: var(--cfg-ombre); cursor: pointer; transition: box-shadow var(--cfg-transition), border-color var(--cfg-transition); }
.pastille[aria-pressed=true] { border-color: rgba(43, 38, 34, .25); box-shadow: 0 0 0 2px var(--carte), 0 0 0 4px var(--accent); }

/* filtres de style : puces fines */
.filtres { display: flex; flex-wrap: wrap; gap: 6px; }
.filtres button { background: var(--carte); color: var(--encre2); border: 1px solid var(--ligne); border-radius: 999px; padding: 6px 12px; font-size: .82rem; min-height: 34px; line-height: 1.2; cursor: pointer; transition: border-color var(--cfg-transition), background-color var(--cfg-transition), color var(--cfg-transition); }
.filtres button small { color: var(--encre2); font-size: .78rem; margin-left: 2px; }
.reglages .filtres button { min-height: 44px; } /* cible tactile (U-D5) ; prime sur les 40 px d'interactions.css */
.filtres button[aria-pressed=true] { background: var(--accent-c); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.filtres button[aria-pressed=true] small { color: var(--accent); }

/* vignettes des modèles : l'éventail d'abord, le nom dessous, filet bronze et coche quand choisie */
.vignettes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.vignette { position: relative; background: var(--carte); border: 1px solid transparent; border-radius: 10px; padding: 8px 6px 8px; color: var(--encre); text-align: center; min-height: 0; cursor: pointer; transition: border-color var(--cfg-transition), background-color var(--cfg-transition), box-shadow var(--cfg-transition); }
.vignette-fig { display: block; }
.vignette svg { width: 100%; height: auto; display: block; }
.vignette b { display: block; font-family: var(--cfg-titre); font-size: .98rem; font-weight: 600; margin-top: 6px; line-height: 1.2; color: var(--encre2); transition: color var(--cfg-transition); }
.vignette[aria-pressed=true] { border-color: var(--accent); background: var(--fond); }
.vignette[aria-pressed=true] b { color: var(--encre); }
.vignette[aria-pressed=true]::after {
  content: ""; position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; background-color: var(--accent);
  background-repeat: no-repeat; background-position: center; background-size: 11px 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5l2.4 2.3L9.6 3.4'/%3E%3C/svg%3E");
}

/* ── volet central : l'aperçu sur papier ───────────────────────────────── */
.scene {
  position: sticky; top: var(--entete); align-self: start; height: calc(100vh - var(--entete)); max-height: 820px; padding: 20px 28px 16px;
  background-color: var(--cfg-papier);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .15 0 0 0 0 .13 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  display: flex; flex-direction: column;
}
.scene-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.scene-titre { margin: 0; }
.scene-legende, .scene-titre span { margin: 0; font-size: .84rem; color: var(--encre2); text-transform: none; letter-spacing: 0; font-weight: 400; font-family: inherit; }
.scene-fig { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px 0; }
.scene-fig svg { width: 100%; height: 100%; max-height: 100%; display: block; }
.scene-agrandir { display: none; }

/* ── volet droit : la commande ─────────────────────────────────────────── */
.commande { padding: 22px 22px 32px; border-left: 1px solid var(--ligne); position: sticky; top: var(--entete); align-self: start; }
.cmd-qte-lib { margin: 6px 0 8px; font-size: .84rem; color: var(--encre2); }
.qte-ctrl { display: grid; grid-template-columns: 48px 1fr 48px; gap: 8px; }
.qte-ctrl button { padding: 0; min-height: 48px; font-size: 1.35rem; line-height: 1; background: var(--carte); color: var(--encre); border: 1px solid var(--ligne); border-radius: var(--cfg-rayon); cursor: pointer; transition: border-color var(--cfg-transition), background-color var(--cfg-transition), color var(--cfg-transition); }
.qte-ctrl input { text-align: center; font: inherit; font-size: 1.2rem; font-weight: 600; color: var(--encre); border: 1px solid var(--ligne); border-radius: var(--cfg-rayon); padding: 8px; min-width: 0; min-height: 48px; background: var(--carte); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; transition: border-color var(--cfg-transition), box-shadow var(--cfg-transition); }
.qte-ctrl input::-webkit-outer-spin-button, .qte-ctrl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qte-ctrl input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-c); outline: none; }
.qte-ctrl input:focus-visible { outline: 3px solid #c9a97e; outline-offset: 2px; box-shadow: none; }

.cmd-details { margin-top: 12px; }
.cmd-details summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--accent); font-weight: 600; min-height: 32px; list-style: none; user-select: none; }
.cmd-details summary::-webkit-details-marker { display: none; }
.cmd-details summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--cfg-transition); }
.cmd-details[open] summary::after { transform: rotate(-135deg) translateY(-1px); }

.cmd-total { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--ligne); display: flex; flex-direction: column; gap: 2px; }
.cmd-total b { font-family: var(--cfg-titre); font-weight: 600; font-size: 2.6rem; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--encre); }
.cmd-total span { font-size: .84rem; color: var(--encre2); }
.cmd-total [data-ht]:empty, .pied-total [data-ht]:empty { display: none; } /* prix HT en petit sous le TTC, rempli par app.js */
.cmd-liv { margin: 10px 0 0; font-size: .86rem; color: var(--ok); }
.cmd-liv.alerte { color: var(--alerte); font-weight: 600; }
.cmd-bat { margin: 8px 0 0; font-size: .84rem; color: var(--encre2); display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.cmd-bat svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; color: var(--ok); }

.cmd-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ligne); }
.cmd-form label:first-child { margin-top: 0; }
.cmd-envoyer { width: 100%; margin-top: 16px; min-height: 52px; font-weight: 600; font-size: 1rem; letter-spacing: .01em; border-radius: var(--cfg-rayon); transition: background-color var(--cfg-transition), box-shadow var(--cfg-transition), filter var(--cfg-transition); }
.cmd-form .petit { margin: 10px 0 0; line-height: 1.5; }
.cmd-form .erreur { margin: 10px 0 0; }

/* ── autres accès sous le détail : sur mesure, WhatsApp, e-mail ────────── */
.cmd-autre { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--ligne); line-height: 1.5; }
.cmd-question { margin: 4px 0 0; line-height: 1.5; }
.cmd-autre a, .cmd-question a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; display: inline-block; padding-block: 12px; margin-block: -12px; }
.cmd-autre a:hover, .cmd-question a:hover { color: var(--encre); }

/* lien vers la galerie, fin du volet modèle */
.modeles-grand { margin: 14px 0 0; font-size: .88rem; }
.modeles-grand .lien-doux { display: inline-block; padding: 10px 0 3px; }

.recap-table { width: 100%; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; margin-top: 8px; }
.recap-table td { padding: 8px 0; border-bottom: 1px solid var(--ligne); vertical-align: top; line-height: 1.45; color: var(--encre); }
.recap-table tr:last-child td { border-bottom: 0; }
.recap-table td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; }
.recap-table tr.actuel td { font-weight: 700; color: var(--accent); }
.recap-table small { color: var(--encre2); }

/* ── barre mobile : masquée sur ordinateur ─────────────────────────────── */
.pied { display: none; }

/* ── mobile et tablette : aperçu collant sous l'en-tête, réglages puis commande, barre de prix collante ── */
@media (max-width: 1000px) {
  .ccfg { display: flex; flex-direction: column; }
  .scene { order: -1; position: sticky; top: var(--entete); align-self: stretch; width: 100%; height: var(--apercu); max-height: none; padding: 10px 16px 8px; z-index: 3; border-bottom: 1px solid var(--ligne); transform-origin: 0 0; transition: transform .3s ease, clip-path .3s ease, box-shadow .3s ease; }
  .scene-tete { flex-wrap: nowrap; gap: 10px; margin-bottom: 2px; }
  .scene-titre { font-size: .76rem; letter-spacing: .14em; }
  .scene-legende, .scene-titre span { font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .scene-fig { padding: 2px 0; }
  .scene-fig svg { width: auto; max-width: 100%; }
  .scene.vignette { transform: translate(var(--tx), var(--ty)) scale(var(--k)); clip-path: inset(var(--iy) var(--ix) round calc(12px / var(--k))); box-shadow: 0 6px 18px rgba(43, 38, 34, .16); border-bottom-color: transparent; }
  .scene.vignette .scene-tete { opacity: 0; }
  .scene.vignette .scene-agrandir { display: block; position: absolute; inset: var(--iy) var(--ix); margin: 0; padding: 0; border: 0; border-radius: calc(12px / var(--k)); background: none; min-height: 0; cursor: pointer; }
  .scene.vignette .scene-agrandir::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 calc(1px / var(--k)) var(--cfg-bronze-doux); }
  .scene-agrandir span { position: absolute; left: 50%; bottom: calc(6px / var(--k)); transform: translateX(-50%); font-size: calc(10px / var(--k)); font-weight: 600; letter-spacing: .02em; padding: calc(3px / var(--k)) calc(9px / var(--k)); border-radius: 999px; background: var(--encre); color: #fff; white-space: nowrap; }
  /* la vignette (104 px, en haut à droite) ne recouvre pas la fin des titres de section ni du délai (U-I11) */
  .ccfg:has(.scene.vignette) .reglages :is(.question, .delai) { padding-right: 124px; }

  .reglages { padding: 18px 16px 28px; border-right: 0; scroll-margin-top: calc(var(--entete) + var(--apercu)); }
  .reglages :is(button, input, summary) { scroll-margin-top: calc(var(--entete) + var(--apercu) + 10px); scroll-margin-bottom: 130px; }
  .section { padding: 18px 0; }
  .question { font-size: 1.35rem; }
  .commande { position: static; padding: 20px 16px 28px; border-left: 0; border-top: 1px solid var(--ligne); scroll-margin-top: calc(var(--entete) + var(--apercu) + 10px); }

  /* bandeau de modèles défilant, avec accroche */
  .vignettes { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; padding: 2px 16px 8px; margin-inline: -16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .vignettes::-webkit-scrollbar { display: none; }
  .vignette { flex: 0 0 140px; scroll-snap-align: start; }

  /* barre de prix collante */
  .pied { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 14px; align-items: center; position: sticky; bottom: 0; z-index: 4; background: var(--carte); border-top: 1px solid var(--ligne); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -4px 14px rgba(43, 38, 34, .06); }
  /* barre ≤ 72 px : ligne 1 total TTC + HT en petit, ligne 2 le prix unitaire (une ligne, points de suspension) ; la livraison n'apparaît qu'en alerte (U-I1) */
  .pied-total { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 8px; min-width: 0; }
  .pied-total b { font-family: var(--cfg-titre); font-weight: 600; font-size: 1.45rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--encre); white-space: nowrap; }
  .pied .pied-total span { font-size: .76rem; color: var(--encre2); display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: clip; line-height: 1.3; }
  .pied .pied-total span[data-ht] { grid-column: 2; }
  .pied .pied-total span[data-unite] { grid-column: 1 / -1; margin-top: 2px; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .pied .pied-total span span { display: inline; font-size: inherit; } /* le HT que app.js glisse dans [data-unite] reste dans la ligne */
  .pied-liv { display: none; margin: 2px 0 0; font-size: .76rem; color: var(--ok); grid-column: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
  .pied .pied-liv.alerte { display: block; color: var(--alerte); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pied .bouton { grid-column: 2; grid-row: 1 / 3; align-self: center; padding: 10px 14px; min-height: 44px; display: inline-flex; align-items: center; font-size: .9rem; font-weight: 600; white-space: nowrap; }
  /* la barre s'efface quand le volet commande est à l'écran (assets/app.js, surDefilement) */
  .pied { transition: transform .2s ease; }
  .pied.pied-cache { transform: translateY(110%); }
}

@media (max-width: 420px) {
  .choix.qte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .options { grid-template-columns: 1fr; }
  .pied .bouton { padding-inline: 12px; font-size: .86rem; }
}
/* paysage de téléphone (moins de 500 px de haut) : rien ne colle, le contenu reprend l'écran (U-I2) */
@media (max-width: 1000px) and (max-height: 500px) {
  .scene { position: static; }
  .pied { position: static; box-shadow: none; }
  .reglages, .commande, .reglages :is(button, input, summary) { scroll-margin-top: calc(var(--entete) + 10px); }
}

@media (prefers-reduced-motion: reduce) {
  .scene, .scene > *, .ccfg button, .ccfg input, .cmd-details summary::after, .delai, .pied { transition: none !important; }
}

/* Filtres de thème du configurateur (01/10/2026) : une seule ligne qui défile (au doigt ou à la molette), au lieu de quatre
   ou cinq lignes de pastilles, sur mobile comme dans le volet de 380 px du bureau. Le bouton actif est ramené dans la vue
   par app.js (scrollIntoView inline nearest). Le fondu à droite signale la suite. */
.reglages { --reglages-pad: 22px; }
.reglages .filtres { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-inline: calc(-1 * var(--reglages-pad)); padding-inline: var(--reglages-pad) calc(var(--reglages-pad) + 32px); padding-block: 2px; scroll-snap-type: x proximity; scroll-padding-inline: var(--reglages-pad);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.reglages .filtres::-webkit-scrollbar { display: none; }
.reglages .filtres button { flex: none; white-space: nowrap; scroll-snap-align: start; }
@media (max-width: 1000px) { .reglages { --reglages-pad: 16px; } }

/* Éléments ajoutés par la passe d'audit (02/10/2026) : vignettes en photo, astuce de palier, aide quantité, bouton Réduire */
.vignette img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 6px; background: var(--accent-c); }
.aide.astuce { color: var(--encre); background: var(--accent-c); border-radius: var(--rayon-controle); padding: 8px 10px; margin-top: 10px; font-size: .88rem; line-height: 1.45; }
.aide.astuce button, .aide.astuce .lien-doux { background: none; border: 0; border-bottom: 1px solid var(--accent); color: var(--accent); padding: 0 0 1px; min-height: 0; font: inherit; cursor: pointer; border-radius: 0; }
[data-qte-aide] { margin: 6px 0 0; font-size: .85rem; color: var(--encre2); }
[data-qte-aide]:empty { display: none; }
.scene-agrandir.reduire span::before { content: ""; }

/* Paiement en ligne (02/10/2026) : choix particulier / entreprise, champs pro, deux boutons */
.cmd-client-lib { font-size: .88rem; color: var(--encre2); margin: 0 0 6px; }
.cmd-client { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cmd-client button { background: var(--carte); color: var(--encre); border: 1px solid var(--ligne); border-radius: var(--rayon-controle); padding: 9px 8px; min-height: 44px; font-size: .9rem; line-height: 1.2; }
.cmd-client button[aria-pressed="true"] { background: var(--accent-c); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.cmd-client-aide { margin: 8px 0 4px !important; }
.cmd-form .cmd-demande { margin-top: 14px; min-height: 48px; font-weight: 500; }
.cmd-form .cmd-demande:hover { background: var(--accent-c); color: var(--accent); }

/* Votre estimation (03/10/2026) : même organisation que le site FR, HT seul (TVA non applicable) */
.cmd-qte .qte-ctrl, [data-section="quantite"] .qte-ctrl { max-width: 260px; }
[data-section="quantite"] .qte-ctrl { margin: 4px 0 10px; }
.estimation { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--ligne); }
.est-titre { margin: 0; font-family: var(--cfg-titre); font-weight: 600; font-size: 1.45rem; line-height: 1.15; color: var(--accent); }
.est-matiere { margin: 4px 0 14px; font-size: .84rem; font-weight: 600; color: var(--ok); }
.est-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; font-size: .9rem; color: var(--encre2); font-variant-numeric: tabular-nums; }
.est-ligne > span:last-child { text-align: right; white-space: nowrap; }
.est-ligne small { font-size: .82em; color: var(--encre2); }
.est-unite b { font-size: 1.1rem; color: var(--encre); }
.est-unite s { color: var(--encre2); margin-right: 2px; }
.est-sous { font-size: .82rem; padding-left: 10px; }
.est-remise, .est-remise > span:last-child { color: var(--ok); }
.est-remise > span:last-child { font-weight: 700; }
.est-total { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--cfg-filet); color: var(--encre); font-size: 1rem; align-items: center; }
.est-total b { white-space: nowrap; font-family: var(--cfg-titre); font-weight: 600; font-size: 1.9rem; line-height: 1; color: #a4563c; }
.est-tva { margin: 4px 0 0; font-size: .78rem; color: var(--encre2); }
.est-delai { margin: 12px 0 0; font-size: .88rem; color: var(--encre); line-height: 1.45; }
.est-delai.alerte { color: var(--alerte); font-weight: 600; }
.incitation { margin: 14px 0 0; padding: 12px 14px; border: 1px solid rgba(63, 107, 75, .3); background: rgba(63, 107, 75, .07); border-radius: var(--cfg-rayon-panneau); }
.incitation p { margin: 0 0 10px; font-size: .86rem; line-height: 1.5; color: var(--encre); }
.incitation button { width: 100%; min-height: 44px; padding: 9px 12px; border: 0; border-radius: var(--cfg-rayon); background: var(--ok); color: #fff; font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; transition: filter var(--cfg-transition); }
.incitation button:hover { filter: brightness(1.08); }
.incitation button:focus-visible { outline: 3px solid #c9a97e; outline-offset: 2px; }

/* Raccourcis de personnalisation (03/10/2026) : sous l'aperçu sur ordinateur, en tête des réglages sur mobile */
.raccourcis { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.raccourcis-mobile { display: none; }
.racc-lib { font-family: var(--cfg-titre); font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--encre2); margin-right: 2px; }
.raccourcis button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 7px 14px; border: 1px solid var(--cfg-bronze-doux); border-radius: 999px; background: var(--carte); color: var(--encre); font: inherit; font-size: .88rem; line-height: 1.2; cursor: pointer; white-space: nowrap; box-shadow: var(--cfg-ombre); transition: border-color var(--cfg-transition), background-color var(--cfg-transition), color var(--cfg-transition); }
.raccourcis button:hover { border-color: var(--accent); color: var(--accent); }
.raccourcis button:focus-visible { outline: 3px solid #c9a97e; outline-offset: 2px; }
.raccourcis button svg { width: 15px; height: 15px; flex: 0 0 auto; }
.racc-bambou { display: inline-flex; border: 1px solid var(--cfg-bronze-doux); border-radius: 999px; background: var(--carte); padding: 3px; gap: 2px; box-shadow: var(--cfg-ombre); }
.racc-bambou button { border: 0; box-shadow: none; min-height: 34px; padding: 5px 12px; background: transparent; }
.racc-bambou button[aria-pressed=true] { background: var(--accent); color: #fff; }
.racc-bambou button[aria-pressed=true]:hover { color: #fff; }
.pastille-mini { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(42, 36, 32, .25); }
.raccourcis-scene { padding: 6px 0 4px; }
.montures button { display: inline-flex; align-items: center; gap: 8px; }
.montures .pastille-mini { width: 18px; height: 18px; }
.section.eclaire { animation: eclaire 1.6s ease; }
@keyframes eclaire { 0%, 40% { background: var(--accent-c); box-shadow: 0 0 0 10px var(--accent-c); } 100% { background: transparent; box-shadow: 0 0 0 10px transparent; } }
.section, #couleur-impression, #couleur-bambou { scroll-margin-top: 12px; }

@media (max-width: 1000px) {
  .raccourcis-scene { display: none; }
  .raccourcis-mobile { display: flex; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 10px; -webkit-overflow-scrolling: touch; }
  .raccourcis-mobile::-webkit-scrollbar { display: none; }
  .raccourcis-mobile .racc-lib { display: none; }
  .raccourcis-mobile button { min-height: 38px; padding: 6px 12px; font-size: .84rem; }
  .reglages > .col-titre { display: none; }
  .section, #couleur-impression, #couleur-bambou { scroll-margin-top: calc(var(--entete) + var(--apercu) + 8px); }
  /* aperçu mobile : le produit le plus grand possible, sans titre ; seule la mention « rendu indicatif » reste, en petit */
  :root { --apercu: clamp(180px, 36vh, 360px); }
  .scene { padding: 4px 8px 2px; }
  .scene-titre { display: none; }
  .scene-tete { display: contents; }
  .scene-legende { position: absolute; top: 4px; right: 10px; z-index: 1; max-width: calc(100% - 120px); }
  .scene-legende { font-size: .7rem; opacity: .85; }
  .scene-fig { padding: 0; }
  .scene-agrandir.reduire { position: absolute; left: 8px; top: 6px; width: auto; min-height: 0; margin: 0; padding: 4px 10px; border: 1px solid var(--ligne); border-radius: 999px; background: rgba(255, 253, 249, .9); color: var(--encre2); font-size: .72rem; font-weight: 500; line-height: 1.2; box-shadow: none; z-index: 2; }
  .scene-agrandir.reduire span { position: static; transform: none; padding: 0; background: none; color: inherit; font-size: inherit; }
}
@supports (height: 1svh) { @media (max-width: 1000px) { :root { --apercu: clamp(180px, 36svh, 360px); } } }
@media (prefers-reduced-motion: reduce) { .section.eclaire { animation: none; } }
.racc-sous { align-self: center; padding: 0 6px 0 10px; font-size: .84rem; color: var(--encre2); }
.vignettes-plus { margin: 10px 0 0; }
.vignettes-plus button { background: none; border: 0; border-bottom: 1px solid var(--accent); color: var(--accent); padding: 0 0 1px; min-height: 0; font: inherit; font-size: .92rem; cursor: pointer; border-radius: 0; }
@media (min-width: 1001px) { .vignettes.repliees > .vignette:nth-child(n+7) { display: none; } }
@media (max-width: 1000px) { .vignettes-plus { display: none; } }
.raccourcis .racc-option[aria-pressed=true] { border-color: var(--accent); background: var(--accent-c); color: var(--accent); font-weight: 600; }
.racc-coche { width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 4px; flex: 0 0 auto; position: relative; opacity: .7; }
.racc-option[aria-pressed=true] .racc-coche { background: var(--accent); border-color: var(--accent); opacity: 1; }
.racc-option[aria-pressed=true] .racc-coche::after { content: ""; position: absolute; left: 3.5px; top: .5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Partager (03/10/2026) : bouton discret dans l'en-tête de l'aperçu ; menu sous le bouton (ordinateur) ou feuille en bas (mobile) */
.partager { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; min-height: 36px; padding: 6px 13px; border: 1px solid var(--cfg-bronze-doux); border-radius: 999px; background: var(--carte); color: var(--encre); font: inherit; font-size: .84rem; cursor: pointer; transition: border-color var(--cfg-transition), color var(--cfg-transition); }
.partager:hover, .partager[aria-expanded=true] { border-color: var(--accent); color: var(--accent); }
.partager:focus-visible { outline: 3px solid #c9a97e; outline-offset: 2px; }
.partager svg { width: 15px; height: 15px; }
.scene-tete { align-items: center; }
.partage-menu { position: absolute; z-index: 60; width: 248px; padding: 8px; background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--cfg-rayon-panneau); box-shadow: 0 14px 34px rgba(42, 36, 32, .16); display: flex; flex-direction: column; }
.partage-titre { margin: 4px 8px 6px; font-family: var(--cfg-titre); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--encre2); }
.partage-menu [role=menuitem] { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: var(--cfg-rayon); background: none; color: var(--encre); font: inherit; font-size: .95rem; text-align: left; text-decoration: none; cursor: pointer; }
.partage-menu [role=menuitem]:hover, .partage-menu [role=menuitem]:focus-visible { background: var(--accent-c); outline: none; }
.partage-menu [role=menuitem] svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--encre2); }
.partage-note { margin: 6px 8px 4px; font-size: .78rem; line-height: 1.4; color: var(--encre2); }
.partage-feuille { position: fixed; left: 0; right: 0; bottom: 0; width: auto; border-radius: 18px 18px 0 0; padding: 12px 12px calc(14px + env(safe-area-inset-bottom, 0px)); animation: feuille .22s ease-out; }
@keyframes feuille { from { transform: translateY(100%); } to { transform: none; } }
@media (max-width: 1000px) {
  .scene .partager { position: absolute; right: 10px; bottom: 8px; z-index: 2; min-height: 34px; padding: 5px 11px; font-size: .8rem; background: rgba(255, 253, 249, .92); }
  .scene.vignette .partager { display: none; }
}
@media (prefers-reduced-motion: reduce) { .partage-feuille { animation: none; } }
@media (max-width: 1000px) { .scene.vignette .scene-legende { opacity: 0; } }
/* ligne Total (03/10/2026) : libellé sur une ligne, montant en chiffres droits (pas les chiffres elzéviriens du titre), HT en petit */
.est-total { align-items: center; }
.est-total > span { display: flex; flex-direction: column; gap: 2px; font-weight: 600; font-size: 1rem; color: var(--encre); white-space: nowrap; }
.est-total > span small { font-size: .78rem; font-weight: 400; color: var(--encre2); opacity: 1; }
.est-total b { font-family: var(--police-texte); font-weight: 700; font-size: 1.75rem; line-height: 1; letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; color: #a4563c; white-space: nowrap; }
.est-total b small { font-size: .5em; font-weight: 600; margin-left: 5px; color: #a4563c; opacity: 1; letter-spacing: .02em; }
.pied .pied-total b { font-family: var(--police-texte); font-weight: 700; letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; }