/* ==========================================================================
   LM GRAPHIK — Configurateur de poster
   Complète style.css (mêmes variables de couleur et de typographie).
   1. Ossature   2. Aperçu   3. Scène intérieur   4. Panneau d'étapes
   5. Contrôles  6. Résumé   7. Plein écran       8. Responsive
   ========================================================================== */

/* -------------------------------- 1. OSSATURE --------------------------- */
.config {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}

.config__colonne-apercu { position: sticky; top: 96px; }
#configurateur { scroll-margin-top: 80px; }

/* --------------------------------- 2. APERÇU ---------------------------- */
.config__scene {
  position: relative;
  display: grid; place-items: center;
  min-height: clamp(320px, 52vh, 620px);
  padding: clamp(1rem, 3vw, 2.25rem);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  background:
    radial-gradient(120% 120% at 50% 0%, #16191d 0%, var(--fond) 62%);
  overflow: hidden;
}

/* Le cadre porte les proportions du format choisi. */
.config__cadre {
  position: relative;
  max-width: 100%; max-height: min(62vh, 620px);
  aspect-ratio: var(--ratio, .707);
  touch-action: none;
  cursor: grab;
  transition: box-shadow .35s, transform .35s;
  box-shadow: 0 26px 60px -22px rgba(0, 0, 0, .95);
}
.config__cadre.est-tire { cursor: grabbing; }
.config__cadre:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.config__cadre canvas { display: block; width: 100%; height: 100%; border-radius: 1px; }

.config__cadre--vide { cursor: default; }

/* Invite affichée tant qu'aucune photo n'est chargée */
.config__invite {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; gap: .55rem;
  padding: 1.5rem; text-align: center;
  color: var(--texte-doux); font-size: .84rem;
  background: rgba(5, 6, 7, .55);
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.config__invite strong { color: var(--texte); font-weight: 600; font-size: .95rem; }
.config__invite svg { margin-inline: auto; opacity: .7; }

/* ---------------------------- 3. SCÈNE INTÉRIEUR ------------------------ */
.config__scene[data-mode="interieur"] {
  padding: 0;
  background: none;
  min-height: clamp(340px, 54vh, 640px);
}
.scene {
  position: absolute; inset: 0; z-index: 0;
  display: none;
}
.config__scene[data-mode="interieur"] .scene,
.config__scene[data-mode="interieur"] .scene__mention { display: block; }
.scene__mur {
  position: absolute; inset: 0 0 26% 0;
  background:
    radial-gradient(78% 66% at 50% 8%, #454a52 0%, #313539 46%, #1e2125 100%);
}
.scene__mur::after {          /* lumière rasante */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(255,255,255,.07) 0%, transparent 42%);
}
.scene__plinthe {
  position: absolute; left: 0; right: 0; bottom: 26%;
  height: 3.4%;
  background: linear-gradient(180deg, #3c4046, #23262a);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.scene__sol {
  position: absolute; inset: auto 0 0 0; height: 26%;
  background: linear-gradient(180deg, #2a2d31 0%, #15171a 100%);
}
.scene__sol::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 55%);
}
.scene__console {              /* meuble bas, silhouette simple */
  position: absolute; left: 8%; bottom: 12%;
  width: 30%; height: 15%;
  background: linear-gradient(180deg, #34383e, #1c1f23);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 -1px 0 rgba(255,255,255,.1) inset, 0 -14px 26px -12px rgba(0,0,0,.7);
}

/* Le poster prend un vrai cadre physique en mode intérieur */
.config__scene[data-mode="interieur"] .config__cadre {
  z-index: 1;
  max-height: min(46vh, 430px);
  padding: 2.4%;
  background: linear-gradient(150deg, #23262a, #0d0e10);
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow:
    0 2px 0 rgba(255,255,255,.06) inset,
    18px 26px 44px -18px rgba(0, 0, 0, .9);
  transform: translateY(-9%);
}
.config__scene[data-mode="interieur"] .config__cadre canvas {
  box-shadow: 0 0 0 1px rgba(0,0,0,.6);
}

.scene__mention {
  display: none;
  position: absolute; left: 0; right: 0; bottom: .7rem; z-index: 2;
  text-align: center;
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

/* Barre d'outils sous l'aperçu */
.config__outils {
  display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: space-between; align-items: center;
  margin-top: .9rem;
}
.groupe-bascule {
  display: inline-flex; padding: 3px;
  border: 1px solid var(--bord); border-radius: 100px;
  background: var(--fond-2);
}
.groupe-bascule button {
  padding: .45rem .9rem;
  background: none; border: none; border-radius: 100px;
  color: var(--texte-doux); font-size: .78rem; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background .25s, color .25s;
}
.groupe-bascule button[aria-pressed="true"] {
  background: var(--blanc-casse); color: #000; font-weight: 600;
}
.config__outils-droite { display: flex; gap: .45rem; }

.btn-outil {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .8rem;
  background: transparent; border: 1px solid var(--bord);
  border-radius: var(--r);
  color: var(--texte-doux); font-size: .78rem; cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.btn-outil:hover:not(:disabled) { color: var(--texte); border-color: var(--bord-fort); }
.btn-outil[aria-pressed="true"] { color: var(--texte); border-color: var(--texte-doux); background: rgba(255,255,255,.06); }
.btn-outil:disabled { opacity: .38; cursor: not-allowed; }

.config__mention--mobile { display: none; }
.config__mention {
  margin-top: .85rem;
  font-size: .78rem; line-height: 1.55; color: var(--texte-faible);
  border-left: 2px solid var(--bord-fort);
  padding-left: .85rem;
}

/* ---------------------------- 4. PANNEAU D'ÉTAPES ----------------------- */
.config__panneau {
  border: 1px solid var(--bord); border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
}

.etapes-onglets {
  display: flex; gap: 0;
  margin: 0; padding: 0 .4rem; list-style: none;
  border-bottom: 1px solid var(--bord);
  overflow-x: auto; scrollbar-width: none;
}
.etapes-onglets::-webkit-scrollbar { display: none; }
.etapes-onglets button {
  display: flex; align-items: center; gap: .5rem;
  padding: 1rem .7rem;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--texte-faible); font-size: .8rem; font-weight: 500;
  white-space: nowrap; cursor: pointer;
  transition: color .25s, border-color .25s;
}
.etapes-onglets button:hover { color: var(--texte-doux); }
.etapes-onglets button[aria-selected="true"] {
  color: var(--texte); border-bottom-color: var(--accent); font-weight: 600;
}
.etapes-onglets .num {
  display: grid; place-items: center;
  width: 20px; height: 20px; flex: none;
  border: 1px solid currentColor; border-radius: 50%;
  font-size: .64rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.etapes-onglets button[aria-selected="true"] .num {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.etapes-onglets button[data-fait="oui"]:not([aria-selected="true"]) .num {
  background: rgba(255,255,255,.1); border-color: transparent; color: var(--texte);
}

.volet { padding: clamp(1.1rem, 2.6vw, 1.7rem); }
.volet[hidden] { display: none; }
.volet__titre {
  font-family: var(--font-titre);
  font-size: 1.05rem; font-weight: 700; font-style: italic;
  text-transform: uppercase; letter-spacing: -.01em;
  margin-bottom: .4rem;
}
.volet__intro { font-size: .84rem; color: var(--texte-doux); margin-bottom: 1.3rem; }

.config__pied {
  display: flex; gap: .6rem; justify-content: space-between;
  padding: 1rem clamp(1.1rem, 2.6vw, 1.7rem);
  border-top: 1px solid var(--bord);
  background: var(--fond-2);
}
.config__pied .btn { flex: 1; justify-content: center; }

.config__actions {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding: .8rem clamp(1.1rem, 2.6vw, 1.7rem);
  border-top: 1px solid var(--bord);
  font-size: .78rem; color: var(--texte-faible);
}
.config__actions .etat-sauvegarde { margin-left: auto; text-align: right; }

/* ------------------------------- 5. CONTRÔLES --------------------------- */
.reglage { margin-bottom: 1.25rem; }
.reglage:last-child { margin-bottom: 0; }
.reglage__label {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: .5rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-doux);
}
.reglage__valeur {
  font-variant-numeric: tabular-nums; letter-spacing: 0;
  text-transform: none; color: var(--texte-faible); font-weight: 500;
}

/* Grilles de choix (formats, orientations, styles) */
.choix { display: grid; gap: .5rem; }
.choix--3 { grid-template-columns: repeat(3, 1fr); }
.choix--2 { grid-template-columns: repeat(2, 1fr); }

.puce {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .75rem .8rem; text-align: left;
  background: var(--fond); border: 1px solid var(--bord);
  border-radius: var(--r);
  color: var(--texte-doux); cursor: pointer;
  transition: border-color .22s, background .22s, color .22s;
}
.puce:hover { border-color: var(--bord-fort); color: var(--texte); }
.puce[aria-pressed="true"] {
  border-color: var(--texte); background: rgba(255, 255, 255, .07); color: var(--texte);
}
.puce__nom { display: block; font-size: .86rem; font-weight: 600; }
.puce__note { display: block; font-size: .72rem; line-height: 1.45; color: var(--texte-faible); }
.puce[aria-pressed="true"] .puce__note { color: var(--texte-doux); }

/* Vignettes d'orientation */
.puce--orientation { align-items: center; text-align: center; }
.puce--orientation .forme {
  width: 26px; border: 1.5px solid currentColor; border-radius: 1px;
  margin-bottom: .15rem;
}
.forme--portrait { height: 34px; width: 24px; }
.forme--paysage  { height: 22px; width: 34px; }
.forme--carre    { height: 28px; width: 28px; }

/* Vignettes de style : aperçu miniature dessiné en CSS */
.puce--style { padding: 0; overflow: hidden; }
.puce--style .apercu-style {
  position: relative; aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--bord);
  background: var(--noir);
  overflow: hidden;
}
.puce--style .apercu-style canvas { display: block; width: 100%; height: 100%; }
.puce--style .texte { display: block; padding: .6rem .7rem; }
.puce--style .puce__nom { font-size: .8rem; }
.puce--style .puce__note { font-size: .68rem; line-height: 1.4; }

/* Curseurs */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; background: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 3px; border-radius: 2px;
  background: linear-gradient(90deg,
    var(--bord-fort) 0 var(--debut, 0%),
    var(--accent) var(--debut, 0%) var(--fin, 0%),
    var(--bord-fort) var(--fin, 0%) 100%);
}
input[type="range"]::-moz-range-track {
  height: 3px; border-radius: 2px;
  background: linear-gradient(90deg,
    var(--bord-fort) 0 var(--debut, 0%),
    var(--accent) var(--debut, 0%) var(--fin, 0%),
    var(--bord-fort) var(--fin, 0%) 100%);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -6.5px;
  border-radius: 50%; background: var(--blanc-casse);
  border: 1px solid rgba(0,0,0,.4);
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--blanc-casse); border: 1px solid rgba(0,0,0,.4);
}
input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* Sélecteurs de couleur */
.couleur { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.couleur input[type="color"] {
  -webkit-appearance: none; appearance: none;
  width: 42px; height: 34px; padding: 0;
  background: none; border: 1px solid var(--bord-fort); border-radius: var(--r);
  cursor: pointer; flex: none;
}
.couleur input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
.couleur input[type="color"]::-webkit-color-swatch { border: none; border-radius: 1px; }
.couleur input[type="color"]::-moz-color-swatch { border: none; border-radius: 1px; }
.nuancier { display: flex; gap: .3rem; flex-wrap: wrap; }
.nuancier button {
  width: 24px; height: 24px; padding: 0;
  border: 1px solid var(--bord-fort); border-radius: 50%;
  cursor: pointer; transition: transform .18s, box-shadow .18s;
}
.nuancier button:hover { transform: scale(1.14); }
.nuancier button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--fond), 0 0 0 3px var(--texte); }
.couleur__code {
  font-size: .74rem; color: var(--texte-faible);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
}

/* Interrupteurs */
.interrupteur {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .7rem 0;
  border-top: 1px solid var(--bord);
  cursor: pointer;
}
.interrupteur:first-of-type { border-top: none; }
.interrupteur__texte { font-size: .86rem; color: var(--texte); }
.interrupteur__note { display: block; font-size: .74rem; color: var(--texte-faible); }
.interrupteur input { position: absolute; opacity: 0; pointer-events: none; }
.interrupteur .piste {
  position: relative; flex: none;
  width: 42px; height: 24px; border-radius: 100px;
  background: var(--fond); border: 1px solid var(--bord-fort);
  transition: background .25s, border-color .25s;
}
.interrupteur .piste::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--texte-doux);
  transition: transform .25s, background .25s;
}
.interrupteur input:checked + .piste { background: var(--accent); border-color: var(--accent); }
.interrupteur input:checked + .piste::after { transform: translateX(18px); background: #fff; }
.interrupteur input:focus-visible + .piste { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Champs texte du configurateur */
.champ-config { margin-bottom: 1rem; }
.champ-config label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-doux);
  margin-bottom: .4rem;
}
.champ-config .compteur {
  font-size: .7rem; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--texte-faible);
  font-variant-numeric: tabular-nums;
}
.champ-config .compteur.est-plein { color: var(--accent-texte); }
.champ-config input[type="text"],
.champ-config input[type="tel"],
.champ-config input[type="email"],
.champ-config input[type="number"],
.champ-config textarea {
  width: 100%; padding: .7rem .85rem;
  background: var(--fond); border: 1px solid var(--bord);
  border-radius: var(--r); font-size: .9rem;
  transition: border-color .2s, background .2s;
}
.champ-config textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.champ-config input:focus, .champ-config textarea:focus {
  outline: none; border-color: var(--accent); background: var(--surface-2);
}
.champ-config input::placeholder, .champ-config textarea::placeholder { color: var(--texte-faible); }

.duo-champs { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

/* Zone photo du configurateur */
.depose-config {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 1.6rem 1rem; text-align: center;
  border: 1px dashed var(--bord-fort); border-radius: var(--r);
  background: var(--fond); cursor: pointer;
  transition: border-color .22s, background .22s;
}
.depose-config:hover, .depose-config.est-survolee { border-color: var(--accent); background: var(--surface-2); }
.depose-config input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.depose-config strong { font-size: .92rem; }
.depose-config span { font-size: .78rem; color: var(--texte-faible); }

.fiche-photo {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem; margin-bottom: 1rem;
  border: 1px solid var(--bord); border-radius: var(--r);
  background: var(--fond);
}
.fiche-photo img {
  width: 60px; height: 60px; flex: none;
  object-fit: cover; border-radius: 2px; background: var(--noir);
}
.fiche-photo__infos { flex: 1; min-width: 0; font-size: .76rem; color: var(--texte-faible); }
.fiche-photo__nom {
  display: block; color: var(--texte); font-weight: 600; font-size: .85rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fiche-photo__actions { display: flex; flex-direction: column; gap: .3rem; flex: none; }

/* Message qualité */
.alerte {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .75rem .9rem; margin-top: .8rem;
  border-radius: var(--r); font-size: .8rem; line-height: 1.5;
}
.alerte svg { flex: none; margin-top: .15rem; }
.alerte--ok      { background: rgba(120, 200, 140, .09); color: #8fd6a4; border: 1px solid rgba(120,200,140,.22); }
.alerte--attention { background: rgba(230, 170, 60, .1); color: #f0c064; border: 1px solid rgba(230,170,60,.25); }
.alerte--probleme  { background: rgba(217, 4, 41, .1);  color: #ff8095; border: 1px solid rgba(217,4,41,.3); }

/* ---------------------------------- 6. RÉSUMÉ --------------------------- */
.resume {
  border: 1px solid var(--bord); border-radius: var(--r);
  background: var(--fond);
  padding: 1rem; margin-bottom: 1.3rem;
}
.resume__entete { display: flex; gap: .9rem; align-items: center; margin-bottom: .9rem; }
.resume__vignette {
  width: 62px; height: 62px; flex: none;
  object-fit: cover; border-radius: 2px;
  background: var(--surface); border: 1px solid var(--bord);
}
.resume__vide {
  width: 62px; height: 62px; flex: none;
  display: grid; place-items: center;
  border: 1px dashed var(--bord-fort); border-radius: 2px;
  color: var(--texte-faible); font-size: .62rem; text-align: center; padding: .2rem;
}
.resume__titre { font-size: .95rem; font-weight: 600; }
.resume__soustitre { font-size: .78rem; color: var(--texte-faible); }

.resume__liste { display: grid; gap: 0; margin: 0; }
.resume__liste > div {
  display: flex; gap: 1rem; justify-content: space-between;
  padding: .5rem 0; border-top: 1px solid var(--bord);
  font-size: .82rem;
}
.resume__liste dt { color: var(--texte-faible); flex: none; }
.resume__liste dd {
  margin: 0; text-align: right; color: var(--texte);
  overflow-wrap: anywhere;
}
.pastille-couleur {
  display: inline-block; width: 11px; height: 11px;
  border-radius: 50%; border: 1px solid var(--bord-fort);
  vertical-align: -1px; margin-right: .35rem;
}

/* ------------------------------ 7. PLEIN ÉCRAN -------------------------- */
.plein-ecran {
  border: none; padding: 0; margin: 0;
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  background: rgba(4, 4, 5, .95);
  backdrop-filter: blur(10px);
  color: var(--texte);
}
.plein-ecran::backdrop { background: rgba(0, 0, 0, .85); }
.plein-ecran[open] { display: grid; place-items: center; }
.plein-ecran__boite {
  display: grid; gap: 1rem; justify-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  max-width: 100%;
}
.plein-ecran canvas {
  max-width: min(92vw, 78vh * var(--ratio, .707));
  max-height: 78vh;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .95);
}
.plein-ecran__note { font-size: .78rem; color: var(--texte-faible); text-align: center; max-width: 46ch; }

/* ------------------------------- 8. RESPONSIVE -------------------------- */
@media (max-width: 1000px) {
  /* En pile, l'aperçu reste épinglé en haut : chaque réglage se voit
     immédiatement sans avoir à remonter. */
  .config { display: block; }
  .config__colonne-apercu {
    position: sticky; top: 62px; z-index: 6;
    padding-bottom: .7rem;
    background: var(--fond);
    box-shadow: 0 12px 18px -10px rgba(8, 9, 10, .98);
  }
  .config__panneau { margin-top: 1.1rem; }
  .config__scene { min-height: 0; padding: 1rem; }
  .config__scene[data-mode="interieur"] { min-height: 0; }
  .config__cadre { max-height: min(36vh, 340px); }
  .config__scene[data-mode="interieur"] .config__cadre { max-height: min(30vh, 280px); }
  .config__mention { display: none; }
  .config__mention--mobile { display: block; margin: 1rem 0 0; }
}

@media (max-width: 620px) {
  .choix--3 { grid-template-columns: repeat(2, 1fr); }
  .duo-champs { grid-template-columns: 1fr; }
  /* Barre d'outils sur une seule ligne : les deux boutons passent en icônes
     seules (leur nom reste lisible par les lecteurs d'écran via aria-label). */
  .config__outils { flex-wrap: nowrap; gap: .4rem; justify-content: space-between; }
  .config__outils-droite { gap: .35rem; flex: none; }
  .groupe-bascule { min-width: 0; }
  .groupe-bascule button { padding: .42rem .6rem; font-size: .72rem; }
  .config__outils .btn-outil { padding: .45rem .6rem; }
  .config__outils .btn-outil .libelle { display: none; }
  .config__cadre { max-height: min(32vh, 300px); }
  .config__scene[data-mode="interieur"] { padding-bottom: 1.7rem; }
  .config__scene[data-mode="interieur"] .config__cadre { max-height: min(27vh, 250px); }
  .scene__mention { bottom: .3rem; font-size: .56rem; letter-spacing: .08em; }
  .config__pied { flex-direction: column-reverse; }
  .config__pied .btn { width: 100%; }
  .etapes-onglets button { padding: .9rem .55rem; font-size: .76rem; }
}

@media (prefers-reduced-motion: reduce) {
  .config__cadre, .btn-outil, .puce, .nuancier button, .interrupteur .piste,
  .interrupteur .piste::after { transition: none; }
}

/* ==========================================================================
   9. FOND, CALQUES ET DESCRIPTION SUR-MESURE
   ========================================================================== */

/* Aperçu réductible (utile sur téléphone) */
.config__colonne-apercu.est-reduit .config__cadre { max-height: min(20vh, 190px); }
.config__colonne-apercu.est-reduit .config__scene { min-height: 0; padding: .7rem; }
.config__colonne-apercu.est-reduit .config__mention { display: none; }

/* Sélecteur du calque déplacé par les gestes */
.groupe-bascule--calque {
  display: flex; width: 100%;
  margin-top: .5rem;
}
.groupe-bascule--calque button { flex: 1; }

/* Cartes de fond LM Graphik */
.puce--fond { padding: 0; overflow: hidden; }
.puce--fond__vignette {
  display: block; aspect-ratio: 16 / 10;
  background: var(--noir);
  border-bottom: 1px solid var(--bord);
  overflow: hidden;
}
.puce--fond__vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.puce--fond .texte { display: block; padding: .6rem .7rem; }

/* Messages d'erreur : jamais plus larges que l'écran */
.message-erreur {
  display: block; margin: .45rem 0 0;
  font-size: .78rem; line-height: 1.45; color: #ff8095;
  overflow-wrap: anywhere;
}
.message-erreur:empty { display: none; }

/* Zone de dépôt compacte (photos en plus, référence) */
.depose-config--compact { padding: 1rem; gap: .25rem; }
.depose-config--compact strong { font-size: .86rem; }

/* Liste des fichiers importés */
.liste-fichiers { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .45rem; }
.fichier {
  display: flex; align-items: center; gap: .7rem;
  padding: .45rem .55rem;
  border: 1px solid var(--bord); border-radius: var(--r);
  background: var(--fond);
}
.fichier img {
  width: 38px; height: 38px; flex: none;
  object-fit: cover; border-radius: 2px; background: var(--noir);
}
.fichier__infos { flex: 1; min-width: 0; font-size: .74rem; color: var(--texte-faible); }
.fichier__nom {
  display: block; color: var(--texte); font-weight: 600; font-size: .8rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fichier .btn-outil { flex: none; padding: .35rem .6rem; font-size: .72rem; }

/* Bloc « Décris précisément ta création » */
.bloc-description {
  margin-top: 1.6rem; padding-top: 1.4rem;
  border-top: 1px solid var(--bord);
}
.bloc-description.est-obligatoire {
  padding: 1.2rem; margin-top: 1.8rem;
  border: 1px solid var(--bord-fort); border-left: 2px solid var(--accent);
  border-radius: var(--r);
  background: rgba(217, 4, 41, .04);
}
.bloc-description[data-erreur] textarea { border-color: var(--accent); }
.etiquette-obligatoire {
  display: inline-block; vertical-align: middle;
  margin-left: .5rem; padding: .18rem .45rem;
  border: 1px solid var(--accent-texte); border-radius: 2px;
  font-family: var(--font-texte); font-style: normal;
  font-size: .6rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-texte);
}
.grande-zone { min-height: 168px; }

.pistes-titre {
  margin: .3rem 0 .4rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-faible);
}
.pistes {
  list-style: none; margin: 0 0 1.2rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.pistes li {
  padding: .28rem .6rem;
  border: 1px solid var(--bord); border-radius: 100px;
  font-size: .74rem; color: var(--texte-doux);
}

/* Récapitulatif par blocs */
.resume__bloc {
  border: 1px solid var(--bord); border-radius: var(--r);
  background: var(--fond);
  padding: 1rem; margin-bottom: .8rem;
}
.resume__bloc-titre {
  font-family: var(--font-titre);
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--texte-faible);
  margin: 0 0 .6rem;
}
.resume__devis {
  margin: 1rem 0 1.4rem;
  padding: .8rem 1rem;
  border: 1px solid var(--bord); border-left: 2px solid var(--accent);
  border-radius: var(--r);
  font-size: .84rem; color: var(--texte-doux);
}
.resume__devis strong { color: var(--texte); }

.lien-modifier {
  margin-left: .5rem; padding: 0;
  background: none; border: none; border-bottom: 1px solid var(--bord-fort);
  color: var(--texte-doux); font-size: .76rem; cursor: pointer;
  transition: color .2s, border-color .2s;
}
.lien-modifier:hover { color: var(--accent-texte); border-color: var(--accent-texte); }

/* --------------------------- Téléphone ---------------------------------- */
@media (max-width: 620px) {
  /* Cibles tactiles confortables */
  .config__outils .btn-outil { min-height: 38px; }
  .groupe-bascule button { min-height: 34px; }
  .btn-outil { min-height: 36px; }
  .puce { min-height: 46px; }
  .config__pied .btn { min-height: 46px; }
  .liste-fichiers .btn-outil { min-height: 34px; }
  input[type="range"] { height: 30px; }
  input[type="range"]::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -8.5px; }
  input[type="range"]::-moz-range-thumb { width: 19px; height: 19px; }

  /* L'aperçu laisse toujours voir le panneau */
  .config__cadre { max-height: min(28vh, 250px); }
  .config__scene[data-mode="interieur"] .config__cadre { max-height: min(24vh, 210px); }
  .config__colonne-apercu.est-reduit .config__cadre { max-height: min(13vh, 120px); }

  .fichier__nom, .fiche-photo__nom { font-size: .76rem; }
  .resume__liste dd { text-align: left; }
  .resume__liste > div { flex-direction: column; gap: .15rem; }
}

/* ==========================================================================
   10. TARIFS, RÉFÉRENCE ET NOUVEAUX CHAMPS DE BRIEF
   ========================================================================== */
.bloc-tarifs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
  padding: 1.1rem 1.3rem;
  margin-bottom: clamp(2rem, 5vw, 3rem);
  border: 1px solid var(--bord); border-left: 2px solid var(--accent);
  border-radius: var(--r);
  background: var(--surface);
}
.bloc-tarifs__prix {
  font-family: var(--font-titre);
  font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; font-style: italic;
  letter-spacing: -.02em;
}
.bloc-tarifs__prix span { font-size: .62em; font-style: normal; font-weight: 600; color: var(--texte-doux); }
.bloc-tarifs__note { font-size: .84rem; color: var(--texte-doux); max-width: 52ch; }
/* Grilles de tarifs : un groupe par colonne (Poster, Support rigide, Encadré…) */
.bloc-tarifs__grilles {
  flex: 1 1 100%;
  display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem;
}
.bloc-tarifs__groupe-bloc { flex: 1 1 auto; min-width: 11rem; }
.bloc-tarifs__groupe {
  margin: 0 0 .5rem;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texte); font-weight: 600;
}
.bloc-tarifs__notes { flex: 1 1 100%; }
.bloc-tarifs__note + .bloc-tarifs__note { margin-top: .45rem; }
@media (max-width: 560px) {
  .bloc-tarifs__grilles { gap: 1rem; }
  .bloc-tarifs__groupe-bloc { flex: 1 1 100%; }
}
.bloc-tarifs__liste {
  display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0;
}
.bloc-tarifs__liste li {
  padding: .3rem .65rem;
  border: 1px solid var(--bord); border-radius: 100px;
  font-size: .8rem; color: var(--texte-doux);
}
.bloc-tarifs__liste strong { color: var(--texte); }

.reference-demande {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem;
  padding: .8rem 1rem; margin-bottom: 1.2rem;
  border: 1px dashed var(--bord-fort); border-radius: var(--r);
  font-size: .74rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-faible);
}
.reference-demande strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem; letter-spacing: .04em; color: var(--accent-texte);
  text-transform: none;
}
.reference-demande span {
  font-size: .72rem; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--texte-faible);
}

.aide-champ {
  display: block; margin-top: .35rem;
  font-size: .74rem; color: var(--texte-faible);
}

.separateur-volet {
  border: none; border-top: 1px solid var(--bord);
  margin: 1.8rem 0 1.4rem;
}

/* Sections repliables : raccourcissent l'étape Fond sur téléphone */
.repli {
  border: 1px solid var(--bord); border-radius: var(--r);
  background: var(--fond);
}
.repli > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem;
  font-size: .84rem; font-weight: 600; color: var(--texte);
  cursor: pointer; list-style: none;
  min-height: 44px;
}
.repli > summary::-webkit-details-marker { display: none; }
.repli > summary::after {
  content: ''; flex: none;
  width: 9px; height: 9px; margin-right: .2rem;
  border-right: 1.6px solid var(--texte-doux);
  border-bottom: 1.6px solid var(--texte-doux);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s;
}
.repli[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.repli__note {
  margin-left: auto; margin-right: .6rem;
  font-size: .72rem; font-weight: 500; color: var(--texte-faible);
}
.repli__corps { padding: 0 1rem 1.1rem; display: grid; gap: 1.6rem; }

/* Prix du format sélectionné, affiché sous les choix de dimensions. */
.prix-format {
  margin-top: .7rem;
  font-family: var(--font-titre); font-style: italic; font-weight: 800;
  font-size: 1.25rem; letter-spacing: -.01em; color: var(--texte);
}
.prix-format span {
  display: block; margin-top: .15rem;
  font-family: var(--font-corps); font-style: normal; font-weight: 500;
  font-size: .78rem; letter-spacing: 0; color: var(--texte-doux);
}
.prix-format--devis { font-size: 1rem; color: var(--texte-doux); }

/* Ajout au panier, dans le récapitulatif de l'étape 5 */
.bloc-panier-config {
  background: var(--surface-2, #1a1d21);
  border: 1px solid var(--bord); border-radius: var(--r);
  padding: 1.2rem; margin: 0 0 1.6rem;
}
.bloc-panier-config__prix {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: .9rem;
}
.bloc-panier-config__prix span   { color: var(--texte-doux); font-size: .85rem; }
.bloc-panier-config__prix strong { font-family: var(--font-titre); font-size: 1.35rem; }
.bloc-panier-config__note {
  margin: .8rem 0 0; color: var(--texte-faible); font-size: .78rem; line-height: 1.5;
}
.bloc-panier-config__note a { color: var(--accent-texte); text-decoration: underline; }