/* ══════════════════════════════════════════════════════════════════
   Felix & Lassie — la direction artistique du tunnel et de la home.

   Titres en serif (Fraunces), texte en DM Sans, signature à la plume
   (Pinyon Script). Crème chaud et encre, accent bordeaux de musée.
   Angles nets et filets fins, qui rappellent le cadre et le
   passe-partout plutôt que les grandes cartes arrondies d'une appli.

   Corps de texte à 17 px : l'audience a 40-50 ans ; un point de plus
   ne se remarque pas, un point de moins se lit mal.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --creme: #f5f2ea;
  --creme-50: #fbf9f4;
  --creme-100: #efe9dd;
  --creme-200: #e2d9c8;
  --encre: #16130f;
  --encre-douce: #28231d;
  --gris: #675f55;
  --filet: #ddd4c3;
  --accent: #7a2e3b;
  --accent-doux: #efdcd8;
  --accent-fonce: #5c1f2b;
  --or: #a8844a;

  --police-titre: "Fraunces", Georgia, "Times New Roman", serif;
  --police: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-plume: "Pinyon Script", "Segoe Script", cursive;

  --rayon-s: 3px;
  --rayon: 6px;
  --rayon-l: 10px;
  --ombre-douce: 0 1px 2px #16130f0f, 0 10px 24px -16px #16130f33;
  --ombre-carte: 0 1px 2px #16130f14, 0 26px 50px -30px #16130f59;
  --courbe: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* La page s'empile : l'en-tete en haut, <main> prend tout le reste.
     C'est ce qui permet a l'ecran de finition de tenir exactement dans
     la fenetre sans qu'on ait a deviner la hauteur de l'en-tete — elle
     change avec le fil des etapes, et la deviner la coupait en deux. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; border-radius: 6px; }

.titre {
  font-family: var(--police-titre);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
.surtitre {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-fonce);
  margin: 0 0 14px;
}
.gris { color: var(--gris); }

/* ── Boutons ─────────────────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px;
  border: 1px solid var(--filet); border-radius: var(--rayon-s);
  background: #fff; color: var(--encre);
  font-size: 17px; text-decoration: none;
  box-shadow: var(--ombre-douce);
  transition: transform .2s var(--courbe), box-shadow .2s var(--courbe), background .2s;
}
.bouton:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--ombre-carte); }
.bouton:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.bouton--noir { background: var(--encre); color: #fff; border-color: var(--encre); }
.bouton--large { width: 100%; }
.lien-simple { background: none; border: 0; padding: 8px; color: var(--gris); text-decoration: underline; text-underline-offset: 4px; }

main { flex: 1 0 auto; display: flex; flex-direction: column; }

/* ── En-tête du tunnel ───────────────────────────────────────────── */
.tete {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 16px; padding: 14px 32px;
  background: color-mix(in oklab, var(--creme) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--filet);
}
.marque { font-family: var(--police-titre); font-size: 23px; font-weight: 600; text-decoration: none; letter-spacing: -.01em; white-space: nowrap; }
.marque span { color: var(--accent-fonce); }
.tete__actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.icone { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; border: 0; background: none; color: var(--encre); text-decoration: none; }
.icone:hover { background: var(--creme-200); }

.etapes { display: flex; align-items: flex-start; list-style: none; margin: 0; padding: 0; }
.etape { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 150px; position: relative; }
.etape + .etape::before {
  content: ""; position: absolute; top: 17px; right: 50%; width: 100%; height: 2px;
  background: var(--filet); z-index: 0;
}
.etape.est-faite::before, .etape.est-active::before { background: var(--encre); }
.etape button {
  position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 999px;
  border: 1.5px solid var(--creme-200); background: var(--creme); font-size: 14px; color: var(--gris);
  display: grid; place-items: center;
}
.etape button:disabled { cursor: default; }
.etape.est-active button, .etape.est-faite button { background: var(--encre); border-color: var(--encre); color: #fff; }
.etape small { font-size: 14px; color: var(--gris); }
.etape.est-active small { color: var(--encre); }

/* ── Scènes ──────────────────────────────────────────────────────── */
.scene { max-width: 1040px; margin: 0 auto; padding: 56px 24px 80px; animation: entree .5s var(--courbe) both; }
.scene > .titre { font-size: clamp(30px, 4.6vw, 54px); text-align: center; }
.scene__aide { text-align: center; margin: 14px auto 0; max-width: 56ch; }
@keyframes entree { from { opacity: 0; transform: translateY(20px) scale(.99); } to { opacity: 1; transform: none; } }

.colonne { max-width: 720px; margin: 40px auto 0; display: grid; gap: 20px; }

/* Étape 1 : dépôt de la photo */
.depot {
  display: grid; justify-items: center; gap: 10px; text-align: center;
  padding: 44px 28px 32px; border-radius: var(--rayon-l);
  border: 2px dashed var(--creme-200); background: #fff;
  cursor: pointer; transition: border-color .2s, background .2s;
}
.depot:hover, .depot.est-survole { border-color: var(--accent); background: var(--creme-50); }
.depot__icone { width: 72px; height: 72px; border-radius: 999px; display: grid; place-items: center; background: var(--creme-100); margin-bottom: 10px; }
.depot .titre { font-size: clamp(22px, 3vw, 32px); }
.depot__conseils { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid var(--filet); width: 100%; list-style: none; color: var(--gris); }
.depot__conseils li { display: flex; align-items: center; gap: 10px; }
.depot__conseils i { width: 40px; height: 40px; border-radius: 999px; background: var(--creme-100); display: grid; place-items: center; font-style: normal; }

.apercu-photo { display: flex; align-items: center; gap: 18px; padding: 16px; border-radius: var(--rayon-l); background: #fff; border: 1px solid var(--filet); }
.apercu-photo img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--rayon-s); }
.apercu-photo div { flex: 1; min-width: 0; }
.apercu-photo strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ou { display: flex; align-items: center; gap: 16px; color: var(--gris); letter-spacing: .2em; font-size: 14px; }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--filet); }
.mention { text-align: center; font-size: 15px; color: var(--gris); max-width: 60ch; margin: 0 auto; }
.mention a { color: inherit; text-underline-offset: 3px; }
.alerte { padding: 14px 18px; border-radius: var(--rayon); background: var(--accent-doux); color: var(--encre-douce); }

/* Le prénom */
.champ { display: grid; gap: 8px; }
.champ input {
  min-height: 64px; padding: 0 22px; border-radius: var(--rayon); border: 1.5px solid var(--filet);
  background: #fff; font-size: 22px;
}
.champ input:focus { outline: none; border-color: var(--encre); }
.champ__pied { display: flex; justify-content: space-between; color: var(--gris); font-size: 15px; }
.actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* Étape 2 : les styles */
.styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.carte-style {
  display: grid; gap: 14px; padding: 16px 16px 18px; text-align: left;
  background: #fff; border: 1px solid var(--filet); border-radius: var(--rayon-l);
  box-shadow: var(--ombre-douce); transition: transform .25s var(--courbe), box-shadow .25s var(--courbe);
}
.carte-style:hover { transform: translateY(-3px); box-shadow: var(--ombre-carte); }
.carte-style__visuel { position: relative; aspect-ratio: 4 / 5; border-radius: var(--rayon-s); overflow: hidden; background: var(--creme-100); }
.carte-style__visuel > img { width: 100%; height: 100%; object-fit: cover; }
/* Un filet intérieur, comme le bord d'un passe-partout. */
.carte-style__visuel::after { content: ""; position: absolute; inset: 8px; border: 1px solid #ffffff73; pointer-events: none; }
.carte-style__vous {
  position: absolute; left: 50%; top: 40%; translate: -50% -50%;
  width: 34%; aspect-ratio: 1; border-radius: 999px; overflow: hidden;
  border: 4px solid color-mix(in oklab, #fff 70%, transparent); box-shadow: 0 8px 24px -8px #0008;
}
.carte-style__vous img { width: 100%; height: 100%; object-fit: cover; }
.carte-style__vous span {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  font-size: 10px; letter-spacing: .12em; color: #fff; background: #0003; text-shadow: 0 1px 4px #000a; line-height: 1.2;
}
.carte-style__pied { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.carte-style__pied strong { display: block; font-size: 18px; }
.carte-style__pied small { color: var(--gris); font-size: 14px; }
.carte-style__pied b { display: block; font-family: var(--police-titre); font-weight: 600; font-size: 22px; }
.carte-style__choisir { padding: 10px 18px; border-radius: var(--rayon-s); border: 1px solid var(--filet); background: var(--creme-50); white-space: nowrap; }

/* Étape 3 : le compte puis l'attente */
.porte { max-width: 520px; margin: 36px auto 0; padding: 28px; border-radius: var(--rayon-l); background: #fff; border: 1px solid var(--filet); box-shadow: var(--ombre-carte); display: grid; gap: 18px; }
.porte__style { display: flex; align-items: center; gap: 14px; }
.porte__style img { width: 64px; height: 80px; object-fit: cover; border-radius: var(--rayon-s); }
.porte form { display: grid; gap: 12px; }
.porte input { min-height: 56px; padding: 0 18px; border-radius: var(--rayon); border: 1.5px solid var(--filet); font-size: 18px; }
.porte input:focus { outline: none; border-color: var(--encre); }

.attente { max-width: 560px; margin: 36px auto 0; display: grid; justify-items: center; gap: 22px; text-align: center; }
.chevalet { position: relative; width: 240px; aspect-ratio: 4 / 5; border-radius: 6px; background: #fff; padding: 14px; box-shadow: var(--ombre-carte); }
.chevalet__toile { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 2px; background: var(--creme-100); }
.chevalet__toile img { width: 100%; height: 100%; object-fit: cover; filter: blur(18px) saturate(.6); transform: scale(1.15); opacity: .7; }
.chevalet__toile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, #ffffffb0 50%, transparent 80%);
  transform: translateX(-100%); animation: balayage 2.2s var(--courbe) infinite;
}
@keyframes balayage { to { transform: translateX(100%); } }
.attente__message { font-size: 20px; min-height: 1.5em; }
.attente__jauge { width: 100%; height: 6px; border-radius: 999px; background: var(--creme-200); overflow: hidden; }
.attente__jauge span { display: block; height: 100%; width: 0; background: var(--encre); border-radius: inherit; transition: width .8s linear; }
.attente__infos { display: flex; gap: 18px; color: var(--gris); font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .chevalet__toile::after { animation: none; } .scene { animation: none; } }

/* Étape 4 : la finition */
.finition { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr); }

/* L'écran de finition tient dans la fenêtre, et ce sont les réglages qui
   défilent — pas la page.

   Il réclamait avant `min-height: calc(100vh - 73px)` — une hauteur d'en-tête
   devinée — et la colonne de droite poussait toute la page : sur un portable
   à 150 % d'échelle (1283 × 587 px CSS), l'écran faisait 977 px.
   Le tableau était coupé en deux et le choix du cadre passait sous la
   ligne de flottaison. On ne voyait ni ce qu'on achète, ni la moitié de
   ce qu'on choisit. */
@media (min-width: 901px) {
  /* `flex: 1 1 0` et non `1 0 auto` : sans base nulle, <main> prend la
     hauteur de son contenu et on retombe sur une page qui défile. La
     garde à 480 px rend la main à la page sur une fenêtre très basse,
     plutôt que d'écraser le tableau. */
  main:has(> .finition) { flex: 1 1 0; min-height: 480px; }
  .finition { flex: 1; min-height: 0; }
  .reglages { overflow: hidden; }
  /* min-height:0 est indispensable : sans lui un enfant flex refuse de
     rétrécir sous sa hauteur de contenu, et rien ne défile. */
  .reglages__corps { min-height: 0; overflow-y: auto; }
}
.vue { position: relative; background: #e9e4dc; overflow: hidden; }
.vue__onglets { position: absolute; top: 20px; left: 20px; z-index: 3; display: flex; gap: 4px; padding: 5px; border-radius: var(--rayon); background: #fffffff0; box-shadow: var(--ombre-douce); }
.vue__onglets button { border: 0; padding: 10px 18px; border-radius: var(--rayon-s); background: none; font-size: 15px; }
.vue__onglets button[aria-pressed="true"] { background: var(--encre); color: #fff; }

/* Le décor : une photo de salon, mur libre au-dessus du buffet. Le
   tableau s'y pose et change de taille avec le format choisi. */
.piece { position: absolute; inset: 0; display: grid; place-items: center; }
.piece__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }

.tableau {
  position: relative; z-index: 2; margin-bottom: 12%;
  transition: width .5s var(--courbe);
  filter: drop-shadow(0 22px 22px #0004);
}
.tableau__cadre { padding: var(--epaisseur, 0); background: var(--teinte, transparent); border-radius: 2px; }
.tableau__cadre.est-nu { padding: 0; background: none; }
.tableau__papier { position: relative; background: #fff; padding: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.tableau__papier img { width: 100%; height: 100%; object-fit: cover; }
.tableau__signature { position: absolute; right: 7%; bottom: 3%; font-family: var(--police-plume); font-size: clamp(17px, 2.8vw, 32px); color: #fffffff2; text-shadow: 0 1px 3px #0009; }

.vue--grand { display: grid; place-items: center; padding: 88px 32px 32px; background: var(--creme-100); }
.vue--grand .tableau { width: min(460px, 80%) !important; margin: 0; }

.reglages { display: flex; flex-direction: column; background: var(--creme); border-left: 1px solid var(--filet); }
.reglages__corps { flex: 1; padding: 32px 32px 24px; display: grid; gap: 30px; align-content: start; }
.reglages__corps { scrollbar-width: thin; }

/* Quand il reste des reglages sous le pli, le bas de la colonne s'estompe.
   Sans cet indice on croit l'ecran fini, et on ne voit jamais les options.
   La classe est posee par le JS, qui seul sait si ca deborde encore. */
.reglages { position: relative; }
.reglages::after {
  content: ""; position: absolute; left: 0; right: 0; height: 56px;
  bottom: var(--haut-barre, 0px);
  background: linear-gradient(to top, var(--creme), transparent);
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.reglages.est-coupe::after { opacity: 1; }
.groupe h2 { font-size: 13px; letter-spacing: .2em; font-weight: 400; color: var(--gris); margin: 0 0 12px; }
.tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tuiles--cadres { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tuile {
  position: relative; display: grid; justify-items: center; gap: 8px; padding: 16px 8px;
  border-radius: var(--rayon); border: 1.5px solid var(--filet); background: #fff; text-align: center;
  transition: border-color .15s;
}
.tuile:hover:not(:disabled) { border-color: var(--gris); }
/* Sélection en double filet, comme un passe-partout. */
.tuile[aria-checked="true"] { border-color: var(--encre); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px var(--encre); }
.tuile[aria-checked="true"]::after { content: "✓"; position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: var(--rayon-s); background: var(--encre); color: #fff; font-size: 12px; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
.tuile:disabled { opacity: .4; cursor: not-allowed; }
.tuile strong { font-family: var(--police-titre); font-weight: 500; font-size: 18px; }
.tuile small { color: var(--gris); font-size: 14px; }
.tuile__format { background: var(--creme-100); border-radius: 2px; }
.tuile__nuance { width: 40px; height: 40px; border-radius: 2px; border: 1px solid #0000001a; }
.tuile__nuance.est-nu { background: repeating-linear-gradient(45deg, #fff 0 5px, var(--creme-200) 5px 6px); }

.option { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--rayon); background: #fff; border: 1px solid var(--filet); }
.option + .option { margin-top: 10px; }

/* La sortie par le bas : le fichier seul, le prix d'appel. Discret par
   construction — il doit exister, pas concurrencer le tirage. */
.sortie { margin: 0; text-align: center; }
.sortie .lien-simple { font-size: 15px; }
.option div { flex: 1; }
.option strong { display: block; }
.option small { color: var(--gris); font-size: 15px; }
.option__prix { font-size: 16px; white-space: nowrap; }
.interrupteur { position: relative; width: 52px; height: 30px; border-radius: 999px; border: 0; background: var(--creme-200); flex: none; transition: background .2s; }
.interrupteur::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px #0003; transition: translate .2s var(--courbe); }
.interrupteur[aria-checked="true"] { background: var(--encre); }
.interrupteur[aria-checked="true"]::after { translate: 22px 0; }
.interrupteur:disabled { opacity: .4; }

.barre { position: sticky; bottom: 0; padding: 18px 32px 16px; background: var(--encre); color: #fff; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 18px; }
.barre small { font-size: 12px; letter-spacing: .16em; color: #ffffffa8; }
.barre__prix { font-family: var(--police-titre); font-weight: 600; font-size: 34px; line-height: 1; }
.barre__boutons { display: flex; gap: 10px; align-items: center; }
.barre__boutons .lien-simple { color: #fff; }
.barre__delai { grid-column: 1 / -1; font-size: 13px; color: #ffffffb3; text-align: center; }

/* Les portables sont larges mais bas, surtout à 125 ou 150 % d'échelle :
   587 px de haut pour 1283 de large. Les aérations dessinées pour un
   grand écran y coûtent deux écrans de défilement pour quatre réglages.
   On resserre, et presque tout le choix tient d'un coup d'œil. */
@media (min-width: 901px) and (max-height: 820px) {
  .reglages__corps { padding: 18px 24px 14px; gap: 14px; }
  .groupe h2 { margin-bottom: 7px; }

  /* Les tuiles se couchent : la vignette à gauche, le texte à côté.
     Même matière, mêmes filets, même double filet à la sélection — deux
     fois moins haut. */
  .tuile { grid-template-columns: auto 1fr; justify-items: start; text-align: left; align-items: center; gap: 0 10px; padding: 9px 34px 9px 12px; }
  .tuile > :first-child { grid-column: 1; grid-row: 1 / -1; }
  .tuile > strong, .tuile > small { grid-column: 2; }
  .tuile strong { font-size: 16px; }
  .tuile small { font-size: 13px; }
  .tuile__nuance { width: 26px; height: 26px; }
  .tuile[aria-checked="true"]::after { top: 50%; translate: 0 -50%; }

  /* Les cadres restent debout. Couches, quatre tuiles ne tiennent pas dans
     la colonne : « Sans cadre » se brisait en deux et la quatrieme sortait
     de l'ecran. Debout et serrees, elles tiennent, et la pastille de
     couleur se lit mieux en grand. */
  .tuiles--cadres .tuile { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 4px; padding: 8px 6px; }
  .tuiles--cadres .tuile > * { grid-column: 1; grid-row: auto; }
  .tuiles--cadres .tuile[aria-checked="true"]::after { top: 6px; right: 6px; translate: none; }

  .option { padding: 9px 12px; gap: 10px; }
  .option small { font-size: 13px; }
  .interrupteur { width: 46px; height: 26px; }
  .interrupteur::after { width: 20px; height: 20px; }
  .interrupteur[aria-checked="true"]::after { translate: 20px 0; }

  .barre { padding: 10px 24px 8px; }
  .barre__prix { font-size: 28px; }
  .barre__delai { font-size: 12px; }
}

/* Les tres petites hauteurs — 587 px sur un portable a 150 % d'echelle.
   Un cran de plus dans la densite : sans lui il manquait 126 px, et les
   options passaient sous le pli alors que ce sont elles qui ajoutent au
   panier. */
@media (min-width: 901px) and (max-height: 660px) {
  .reglages__corps { padding: 12px 20px 10px; gap: 10px; }
  .groupe h2 { font-size: 12px; margin-bottom: 5px; }
  .tuile { padding: 7px 28px 7px 10px; }
  .tuiles--cadres .tuile { padding: 6px 4px; gap: 2px; }
  .tuile__nuance { width: 22px; height: 22px; }
  .tuile small { font-size: 12px; }
  .option { padding: 7px 10px; }
  .option small { font-size: 12px; }
  .option + .option { margin-top: 6px; }
  .interrupteur { width: 42px; height: 24px; }
  .interrupteur::after { width: 18px; height: 18px; }
  .interrupteur[aria-checked="true"]::after { translate: 18px 0; }
  .barre { padding: 8px 20px 6px; }
  .barre__prix { font-size: 24px; }
  .barre__delai { font-size: 11px; }
  .sortie .lien-simple { font-size: 14px; padding: 4px; }
}

/* Le tiroir de l'historique */
.tiroir { position: fixed; inset: 0; z-index: 50; background: #0006; display: flex; justify-content: flex-end; }
.tiroir__panneau { width: min(420px, 100%); height: 100%; background: var(--creme); padding: 24px; overflow-y: auto; display: grid; align-content: start; gap: 14px; }
.tiroir__ligne { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: var(--rayon); border: 1px solid var(--filet); background: #fff; text-align: left; width: 100%; }
.tiroir__ligne img { width: 64px; height: 80px; object-fit: cover; border-radius: var(--rayon-s); }

.pied-tunnel { text-align: center; padding: 28px 16px 40px; font-size: 14px; color: var(--gris); }
.pied-tunnel a { margin: 0 8px; text-decoration: none; }

/* La largeur du tableau suit le format choisi (variable posée par le JS). */
.tableau { width: var(--largeur, 38%); }

/* L'aperçu ne se glisse pas, ne s'enregistre pas d'un appui long.
   Ça n'arrête pas une capture d'écran : c'est le rôle du filigrane. */
.tableau__papier img { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; pointer-events: none; }

/* ── Mobile ──────────────────────────────────────────────────────────
   Chaque écran doit montrer son action principale sans défiler :
   en-tête réduit à une barre de progression, marges serrées,
   aperçu plus grand et moins de décor. */
@media (max-width: 900px) {
  .tete { grid-template-columns: 1fr auto; padding: 8px 10px 8px 16px; gap: 12px; }
  .tete .marque, .tete__recommencer { display: none; }
  .icone { width: 40px; height: 40px; }

  /* Les étapes deviennent quatre segments, avec « Étape n sur 4 · Nom ». */
  .etapes { position: relative; gap: 4px; padding-bottom: 18px; counter-reset: etape; }
  .etape { position: static; flex: 1; width: auto; counter-increment: etape; }
  .etape + .etape::before { display: none; }
  .etape button { width: 100%; height: 22px; border: 0; background: none !important; font-size: 0; }
  .etape button::after { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 2px; background: var(--creme-200); }
  .etape.est-faite button::after, .etape.est-active button::after { background: var(--encre); }
  .etape small { display: none; }
  .etape.est-active small { display: block; position: absolute; left: 0; bottom: 0; font-size: 13px; line-height: 1; white-space: nowrap; }
  .etape.est-active small::before { content: "Étape " counter(etape) " sur 4 · "; color: var(--gris); }

  .scene { padding: 22px 16px 88px; }
  .scene > .titre { font-size: 27px; }
  .scene__aide { margin-top: 8px; font-size: 16px; }
  .colonne { margin-top: 20px; gap: 14px; }
  .depot { padding: 26px 18px 20px; gap: 6px; }
  .depot__icone { width: 56px; height: 56px; margin-bottom: 4px; }
  .depot__conseils { gap: 8px 16px; margin-top: 14px; padding-top: 14px; font-size: 14px; }
  .depot__conseils i { width: 28px; height: 28px; }
  .mention { font-size: 13px; }

  .styles { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 20px; }
  .carte-style { padding: 6px 6px 10px; gap: 8px; }
  /* Le prix est dit une fois en haut : chaque carte se réduit à son style. */
  .carte-style__pied small, .carte-style__pied b, .carte-style__choisir { display: none; }
  .carte-style__pied strong { font-size: 15px; padding: 0 4px; }

  .porte { margin-top: 20px; padding: 18px; gap: 14px; }
  .attente { margin-top: 20px; gap: 16px; }
  .chevalet { width: 180px; padding: 10px; }

  .finition { grid-template-columns: 1fr; min-height: 0; }
  .vue { height: 46vh; min-height: 300px; max-height: 440px; }
  /* En bas, sur le sol : en haut, les onglets couvraient le tableau. */
  .vue__onglets { top: auto; bottom: 10px; left: 50%; translate: -50% 0; padding: 3px; }
  .vue__onglets button { padding: 7px 12px; font-size: 14px; }
  /* Moins de mur, plus de portrait. */
  .piece .tableau { width: min(calc(var(--largeur, 38%) * 1.55), 72%); margin-bottom: 18%; }

  .reglages { border-left: 0; }
  .reglages__corps { padding: 18px 16px 20px; gap: 20px; }
  .groupe h2 { margin-bottom: 8px; }
  .tuiles { gap: 8px; }
  .tuile { padding: 10px 6px; gap: 6px; }
  .tuile strong { font-size: 16px; }
  /* Quatre cadres sur une ligne : on compare les teintes d'un coup d'œil. */
  .tuiles--cadres { grid-template-columns: repeat(4, 1fr); }
  .tuiles--cadres .tuile { padding: 8px 2px; }
  .tuiles--cadres .tuile strong { font-size: 13px !important; }
  .tuiles--cadres .tuile small { font-size: 11px; }
  .tuile__nuance { width: 32px; height: 32px; }
  .option { padding: 12px 14px; }
  .option small { font-size: 14px; }

  /* La barre tient sur une ligne : prix à gauche, Commander à droite. */
  .barre { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); grid-template-columns: 1fr auto; }
  .barre small { font-size: 10px; }
  .barre__prix { font-size: 24px; }
  .barre__boutons .lien-simple, .barre__delai { display: none; }
}