/* Galbe — configurateur de vase. Mise en page reprise de « Nous, en relief » : sur ordinateur, l'aperçu 3D à gauche,
   fixe sur la hauteur de l'écran ; à droite, une colonne de 600 px avec les étapes numérotées et, collée en bas, la barre
   du prix. Sur téléphone : l'aperçu reste en haut, les étapes passent une à une sous des onglets, la barre propose
   « Suivant ». */
.configurateur { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 600px); align-items: start; }
.scene { position: sticky; top: 0; height: 100vh; height: 100dvh; min-height: 560px; background: var(--scene); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 76px 32px 28px; }
.scene-haut { position: absolute; left: 32px; right: 32px; top: 28px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; pointer-events: none; }
.scene-haut .badge { font-size: 12px; padding: 6px 12px; }
.scene-info { font-size: 14px; line-height: 1.5; color: var(--texte-2); text-align: right; }
.scene .plateau { width: min(500px, 100%, calc(100vh - 300px)); width: min(500px, 100%, calc(100dvh - 300px)); min-width: 220px; }
.consigne { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--texte-2); text-align: center; }
.consigne .ic { font-size: 18px; }
.sous-apercu { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 20px; font-size: 14px; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.sous-apercu .lien-mineur { font-size: 14px; }
.sous-apercu .case { align-items: center; min-height: 44px; font-size: 14px; }
.sous-apercu .case input { margin: 0; width: 18px; height: 18px; }
.scene .alerte, .scene .erreur { max-width: 520px; }

.panneau { min-width: 0; padding: 36px 48px 0; display: flex; flex-direction: column; gap: 40px; }
.titre-produit { display: flex; flex-direction: column; gap: 6px; }
.titre-produit h1 { font-size: 40px; font-weight: 620; font-stretch: 78%; line-height: 1.02; letter-spacing: 0; }
.titre-produit p { font-size: 16px; color: var(--texte-2); }
.etape { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 24px; }
.etape .tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.etape .num { font-size: 14px; font-weight: 640; font-stretch: 120%; color: var(--framboise); }
.etape h2 { font-size: 22px; font-weight: 620; font-stretch: 85%; line-height: 1.2; letter-spacing: 0; }
.etape .tete-info { font-size: 15px; color: var(--texte-2); }
.etape .info { display: flex; gap: 8px; font-size: 14px; color: var(--texte-2); }
.etape .info .ic { font-size: 18px; margin-top: 1px; }
.formats { display: flex; flex-direction: column; gap: 12px; }
/* une taille impossible avec cette silhouette (trop élancée) : visible mais grisée, la note dit pourquoi */
.option.indisponible { opacity: 0.5; cursor: not-allowed; }
.option.indisponible input { cursor: not-allowed; }
.onglets { display: none; }

/* couleurs : une grande pastille par ambiance, le nom dessous ; anneau couleur encre autour du choix */
.teintes { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.teinte { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 64px; padding: 6px 4px; color: var(--vin); font-size: 14px; cursor: pointer; text-align: center; }
.teinte input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.teinte .pastille { width: 60px; height: 60px; outline: 2px solid transparent; outline-offset: 3px; }
.teinte:has(input:checked) .pastille { outline-color: var(--vin); }
.teinte:has(input:checked) .nom { font-weight: 640; }
.teinte:has(input:focus-visible) .pastille { outline-color: var(--framboise); }
.teinte small { display: none; }


/* récapitulatif */
.recap-liste { margin: 0; display: flex; flex-direction: column; }
.recap-liste > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--filet); font-size: 15px; line-height: 1.45; }
.recap-liste dt { color: var(--texte-2); }
.recap-liste dd { margin: 0; overflow-wrap: anywhere; }
.delais .encadre > div { display: flex; flex-direction: column; gap: 6px; }

/* barre du bas : le prix, la date d'expédition, le bouton */
.barre { position: sticky; bottom: 0; z-index: 10; margin: 0 -48px; padding: 14px 48px 16px; border-top: 1px solid var(--filet); background: var(--fond); display: flex; flex-direction: column; gap: 0; }
.barre-ligne { display: flex; align-items: center; gap: 20px; }
.barre-prix { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.barre-prix .prix { font-size: 26px; font-weight: 640; font-stretch: 90%; line-height: 1.1; font-variant-numeric: tabular-nums; }
.barre-prix .discret { font-size: 13px; }
.barre .btn { min-height: 52px; padding: 0 32px; }
.barre #suivant { display: none; }
/* badge de l'hébergeur en bas à droite (style.css, site.js) : les boutons de la barre remontent au-dessus de lui ; la
   barre, plus haute, passe devant les onglets d'étapes (téléphone, au chargement) pour que son bouton reste visible */
.avec-badge .barre { padding-bottom: calc(14px + var(--place-badge)); z-index: 16; }
/* la zone de confirmation reste dans la page même vide (annonce aux lecteurs d'écran) : seule sa marge disparaît */
.confirmation { font-size: 14.5px; line-height: 1.45; }
.confirmation:not(:empty) { margin-bottom: 8px; }
.barre #ajouter[data-occupe] { cursor: progress; }

/* fabricant et consignes de sécurité (règlement européen sur la sécurité des produits) */
.fabricant { display: flex; flex-direction: column; gap: 6px; padding-bottom: 40px; font-size: 14px; line-height: 1.5; color: var(--texte-2); }
.fabricant h2 { font-size: 15.5px; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--vin); }

/* texte réservé aux lecteurs d'écran */
.lecteur-seul { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* titre d'étape focalisé par le script (téléphone) : pas d'anneau après un toucher, l'anneau au clavier */
.etape h2:focus { outline: none; }
.etape h2:focus-visible { outline: 2px solid var(--framboise); outline-offset: 4px; border-radius: 2px; }

/* sans JavaScript, le message du <noscript> suffit : ni étapes, ni barre, ni commandes inertes */
html:not(.js) .etape, html:not(.js) .barre, html:not(.js) .modeles-rapides, html:not(.js) .commandes-vue, html:not(.js) .consigne { display: none; }

/* la barre collée en bas ne masque pas le champ qui reçoit le focus */
html { scroll-padding-bottom: 120px; }

/* téléphone et tablette : l'aperçu en haut, collé ; une étape à la fois */
@media (max-width: 900px) {
  .configurateur { grid-template-columns: minmax(0, 1fr); }
  .scene { z-index: 20; height: auto; min-height: 0; padding: 14px 16px 10px; gap: 8px; box-shadow: 0 10px 14px -12px rgba(47, 42, 37, 0.45); }
  .scene-haut { position: static; order: 2; justify-content: center; align-items: center; pointer-events: auto; }
  .scene-haut .badge { font-size: 11px; padding: 4px 9px; }
  .scene-info { display: none; }
  .scene .plateau { width: min(232px, 62vw); min-width: 0; }
  .scene .plateau-large { width: min(560px, 100%); }
  .consigne { display: none; }
  .scene .sous-apercu { display: none; }
  .scene .alerte, .scene .erreur { order: 3; font-size: 13px; padding: 8px 10px; }
  .panneau { padding: 0 20px; gap: 20px; }
  .titre-produit { padding-top: 16px; }
  .titre-produit h1 { font-size: 24px; }
  .titre-produit p { display: none; }
  .js .onglets { position: sticky; top: var(--haut-scene, 0px); z-index: 15; display: flex; gap: 6px; margin: 0 -20px; padding: 10px 12px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; background: var(--fond); border-bottom: 1px solid var(--filet); }
  .onglets::-webkit-scrollbar { display: none; }
  .onglets button { flex: none; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--bord-choix); background: var(--surface); color: var(--vin); font: inherit; font-size: 14px; font-weight: 560; display: flex; align-items: center; gap: 6px; cursor: pointer; }
  .onglets button span { font-size: 12px; font-weight: 640; font-stretch: 112%; }
  .onglets button[aria-current="step"] { background: var(--vin); border-color: var(--vin); color: var(--fond); }
  .js .etape { display: none; }
  .js .etape.active { display: flex; }
  .etape .num { display: none; }
  .barre { margin: 0 -20px; padding: 12px 20px 14px; }
  .barre-prix .prix { font-size: 22px; }
  .js .barre #suivant { display: inline-flex; }
  .js .barre.derniere #suivant { display: none; }
  .js .barre:not(.derniere) #ajouter { display: none; }
  .fabricant { padding-bottom: 32px; }
  .teintes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .teinte { min-width: 0; }
  .teinte .pastille { width: 56px; height: 56px; }
  .barre .long { display: none; }
  .barre .court { display: inline; }
}
.barre .court { display: none; }
/* ------------------------------------------------------------------ propre aux vases */
/* aperçu 3D : toute la hauteur libre de la scène ; on fait tourner le vase à l'horizontale, la page défile à la verticale */
/* sur ordinateur, le studio 3D occupe toute la scène ; les légendes et les commandes flottent par-dessus */
.scene:has(.plateau-3d) { background: #E8DDCD; }
.plateau-3d { position: absolute; inset: 0; display: grid; place-items: center; }
.scene:has(.plateau-3d) .scene-haut, .scene:has(.plateau-3d) .consigne { z-index: 1; }
.scene:has(.plateau-3d) .consigne { position: absolute; left: 32px; bottom: 26px; margin: 0; pointer-events: none; }
.consigne .court { display: none; }
.commandes-vue { position: absolute; right: 24px; bottom: 20px; z-index: 1; display: flex; gap: 12px; }
.commandes-vue .groupe { display: flex; gap: 6px; }
.commandes-vue button { min-width: 40px; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(47, 42, 37, 0.18); background: rgba(250, 246, 240, 0.85); color: var(--vin); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.commandes-vue button:hover { background: var(--surface); }
.commandes-vue button[aria-pressed="true"] { background: var(--vin); color: var(--surface); border-color: var(--vin); }

/* outils de la scène : mise en scène (studio, chêne, eucalyptus) et autres vues (de près, tailles, image, réalité augmentée) */
.outils-scene { position: absolute; left: 32px; top: 92px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.outils-scene .rang { display: flex; flex-wrap: wrap; gap: 6px; }
.puce-outil { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(47, 42, 37, 0.16);
  background: rgba(250, 246, 240, 0.82); color: var(--vin); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.puce-outil:hover { background: var(--surface); }
.puce-outil[aria-pressed="true"] { background: var(--vin); color: var(--surface); border-color: var(--vin); }
.puce-outil[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.puce-outil:focus-visible { outline: 2px solid var(--framboise); outline-offset: 2px; }
.puce-outil .ic { font-size: 15px; }
/* comparaison des tailles : une étiquette sous chaque vase, qui choisit cette taille */
.etiquettes-tailles { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.etiquette-taille { position: absolute; transform: translate(-50%, 10px); pointer-events: auto; display: flex; flex-direction: column; align-items: center;
  padding: 5px 10px; border-radius: 10px; border: 1px solid rgba(47, 42, 37, 0.14); background: rgba(250, 246, 240, 0.9); color: var(--vin);
  font: inherit; font-size: 12.5px; line-height: 1.3; cursor: pointer; white-space: nowrap; }
.etiquette-taille strong { font-size: 13px; }
.etiquette-taille[aria-current="true"] { border-color: var(--vin); box-shadow: 0 0 0 1px var(--vin); }
.etiquette-taille:focus-visible { outline: 2px solid var(--framboise); outline-offset: 2px; }
/* réalité augmentée (Android) : consigne et bouton par-dessus l'image de la caméra */
.ar-calque { position: fixed; inset: 0; pointer-events: none; font-family: var(--sans); }
.ar-consigne { position: absolute; left: 16px; right: 16px; bottom: max(24px, env(safe-area-inset-bottom)); margin: 0; padding: 12px 14px; border-radius: 12px;
  background: rgba(31, 27, 24, 0.72); color: #fff; font-size: 15px; text-align: center; }
.ar-fermer { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; pointer-events: auto; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 0; background: rgba(250, 246, 240, 0.92); color: #2F2A25; font: inherit; font-weight: 600; }
.commandes-vue button:focus-visible { outline: 2px solid var(--framboise); outline-offset: 2px; }
.toile-3d:focus-visible { outline: 2px solid var(--framboise); outline-offset: -4px; }
.toile-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
.toile-3d:active { cursor: grabbing; }
.plateau-3d.sans-3d svg { width: min(300px, 80%); height: auto; filter: drop-shadow(0 10px 12px rgba(47, 42, 37, 0.22)); }
.cotes-mobile { display: none; }

/* partir d'un modèle */
.modeles-rapides { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; font-size: 14px; color: var(--texte-2); }
.modeles-rapides > div { display: flex; flex-wrap: wrap; gap: 6px; }
.puce { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--bord-choix); background: var(--surface); color: var(--vin); font: inherit; font-size: 14px; font-weight: 560; cursor: pointer; }
.puce:hover { border-color: var(--bord-champ); }
.puce[aria-pressed="true"] { background: var(--vin); border-color: var(--vin); color: var(--fond); }
.puce:focus-visible { outline: 2px solid var(--framboise); outline-offset: 2px; }

/* silhouettes et motifs : une carte par choix, le dessin au-dessus du nom */
.choix-formes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.choix-motifs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.forme { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px 10px; border: 1.5px solid var(--bord-choix); border-radius: 12px; background: var(--surface); cursor: pointer; text-align: center; }
.forme:hover { border-color: var(--bord-champ); }
.forme:has(input:checked) { border-color: var(--vin); box-shadow: inset 0 0 0 1px var(--vin); }
.forme:has(input:focus-visible) { outline: 2px solid var(--framboise); outline-offset: 2px; }
.forme input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.forme svg { width: 100%; max-width: 76px; height: 72px; }
.choix-motifs .forme svg { height: 52px; }
.forme svg path { fill: var(--zone); stroke: var(--vin); stroke-width: 1.4; stroke-linejoin: round; }
.forme:has(input:checked) svg path { fill: #DCCBB6; }
.forme .nom { font-size: 15px; font-weight: 600; line-height: 1.2; }
.forme small { font-size: 12.5px; line-height: 1.3; color: var(--texte-2); }

/* surface : lisse ou grainée */
.bloc-surface { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.sous-titre { margin: 0; font-size: 15.5px; font-weight: 600; }
.choix-surfaces .forme svg { height: 44px; max-width: 44px; border-radius: 50%; }

/* curseurs du relief */
.reglages { display: flex; flex-direction: column; gap: 16px; margin-top: 6px; }
.reglage { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 12px; }
.reglage label { font-size: 15.5px; font-weight: 600; }
.reglage output { font-size: 15px; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.reglage input[type="range"] { grid-column: 1 / -1; width: 100%; height: 32px; margin: 0; accent-color: var(--vin); cursor: pointer; }
.reglage input[type="range"]:disabled { cursor: not-allowed; opacity: 0.45; }
.reglage .info { grid-column: 1 / -1; }

/* couleurs : une pastille pleine par filament ; le doré a son reflet */
.teinte .pastille-vase { display: block; width: 60px; height: 60px; border-radius: 50%; background: var(--f);
  box-shadow: inset 0 -8px 12px rgba(0, 0, 0, 0.18), inset 0 5px 8px rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(47, 42, 37, 0.15);
  outline: 2px solid transparent; outline-offset: 3px; }
.teinte .pastille-vase.soie { background: radial-gradient(circle at 34% 28%, #F6E7B5 0%, var(--f) 42%, #8A6823 100%); }
.teinte:has(input:checked) .pastille-vase { outline-color: var(--vin); }
/* focus : un second anneau framboise autour de l'anneau du choix (qui garde sa couleur), séparé par le fond */
.teinte:has(input:focus-visible) .pastille-vase {
  box-shadow: inset 0 -8px 12px rgba(0, 0, 0, 0.18), inset 0 5px 8px rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(47, 42, 37, 0.15),
    0 0 0 5px var(--fond), 0 0 0 7px var(--framboise); }
.teinte:has(input:focus-visible:not(:checked)) .pastille-vase { outline-color: var(--framboise); }

.garder { display: flex; flex-direction: column; gap: 0; }
#garder-zone:not(:empty) { margin-top: 6px; }
.garder .lien-mineur { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 1250px) and (min-width: 901px) {
  .choix-motifs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* scène étroite : les commandes de la vue passent au-dessus de la consigne */
  .commandes-vue { bottom: 62px; }
}
@media (max-width: 1400px) and (min-width: 901px) {
  .scene:has(.plateau-3d) .consigne .long { display: none; }
  .scene:has(.plateau-3d) .consigne .court { display: inline; }
}
@media (max-width: 900px) {
  /* trois éléments collés (aperçu, onglets, barre) : l'aperçu reste modeste, le défilement au clavier les évite */
  html { scroll-padding-top: calc(var(--haut-scene, 0px) + 72px); scroll-padding-bottom: 110px; }
  .scene { --h-apercu: min(30vh, 260px); }
  .plateau-3d { position: relative; inset: auto; flex: none; width: calc(100% + 32px); margin: -14px -16px 0; height: var(--h-apercu); }
  /* rotation à gauche, zoom à droite : le pied du vase, au centre, reste dégagé (et se fait tourner du doigt) */
  .commandes-vue { left: 12px; right: 12px; bottom: auto; top: calc(var(--h-apercu) - 48px); justify-content: space-between; pointer-events: none; }
  .commandes-vue button { min-width: 36px; min-height: 36px; font-size: 14px; pointer-events: auto; }
  .scene-haut { display: none; }
  /* téléphone : les outils en une ligne qui défile, sous l'aperçu */
  .outils-scene { position: static; order: 2; flex-direction: row; width: calc(100% + 32px); margin: 0 -16px; padding: 2px 16px; overflow-x: auto; scrollbar-width: none; }
  .outils-scene::-webkit-scrollbar { display: none; }
  .outils-scene .rang { flex-wrap: nowrap; }
  .puce-outil { min-height: 32px; font-size: 12.5px; padding: 0 10px; }
  .cotes-mobile { display: block; order: 3; margin: 0; font-size: 13px; color: var(--texte-2); text-align: center; }
  .cotes-mobile b { font-weight: 640; font-stretch: 112%; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vin); }
  .titre-produit .modeles-rapides { display: flex; }
  .teinte .pastille-vase { width: 54px; height: 54px; }
}
@media (max-width: 900px) and (pointer: coarse) {
  .commandes-vue { top: calc(var(--h-apercu) - 52px); }
}
@supports (height: 1svh) {
  @media (max-width: 900px) { .scene { --h-apercu: min(30svh, 260px); } }
}
@media (max-width: 480px) {
  .choix-formes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choix-motifs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .forme small { display: none; }
}
@media (max-width: 400px) {
  .barre .btn { padding: 0 16px; }
  .barre-ligne { gap: 12px; }
}

/* cibles tactiles de 44 px */
@media (pointer: coarse) {
  .puce { min-height: 44px; }
  .commandes-vue button { min-width: 44px; min-height: 44px; }
}

/* paysage bas (téléphone couché) : l'aperçu défile avec la page au lieu de rester collé en haut */
@media (max-height: 560px) {
  .scene { position: relative; }
}
@media (max-height: 560px) and (max-width: 900px) {
  .scene { --h-apercu: min(62vh, 300px); }
  .js .onglets { top: 0; }
  html { scroll-padding-top: 72px; }
}

/* contraste élevé (Windows) : couleurs de fond et ombres disparaissent, le choix se marque d'un contour système */
@media (forced-colors: active) {
  .forme:has(input:checked), .teinte:has(input:checked) .pastille-vase { outline: 3px solid Highlight; outline-offset: 2px; }
  .forme:has(input:focus-visible), .teinte:has(input:focus-visible) .pastille-vase { outline: 3px dashed Highlight; outline-offset: 5px; }
  .puce[aria-pressed="true"], .onglets button[aria-current="step"] { outline: 3px solid Highlight; outline-offset: 1px; }
  .teinte .pastille-vase { forced-color-adjust: none; }
}