/* 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); }
.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: contain; position: static; height: 100%; scrollbar-width: thin; scrollbar-color: var(--cfg-filet) transparent; }
  .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; }
}

/* 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[type=date] { -webkit-appearance: none; appearance: none; }
.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 : 40 px, double anneau quand choisie */
.pastilles { display: flex; flex-wrap: wrap; gap: 10px; padding: 2px; }
.pastille { width: 40px; height: 40px; 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: .76rem; margin-left: 2px; }
.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-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); 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: .72rem; 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; }

  .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); }
  .pied-total { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
  .pied-total b { font-family: var(--cfg-titre); font-weight: 600; font-size: 1.55rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--encre); }
  .pied-total span { font-size: .74rem; color: var(--encre2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .pied-liv { margin: 2px 0 0; font-size: .76rem; color: var(--ok); grid-column: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pied-liv.alerte { color: var(--alerte); font-weight: 600; }
  .pied .bouton { grid-column: 2; grid-row: 1 / 3; align-self: center; padding: 10px 16px; min-height: 44px; display: inline-flex; align-items: center; font-size: .92rem; 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: 14px; font-size: .88rem; }
}

@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; } }