/* Le plateau · un modèle en grand, posé dans le salon d'hiver, sa hauteur cotée, sa fiche à côté.
   Même composant pour la sélection de l'accueil, les résultats du questionnaire et la fiche du catalogue. */

.plateau { display: grid; gap: 1.75rem; align-items: center; }
.plateau > * { min-width: 0; }

/* ---------- la scène : un pan de mur clair, la lumière de la fenêtre, le sol ---------- */
.scene {
  --sol: 70%;
  position: relative; isolation: isolate; overflow: hidden;
  height: clamp(330px, 96vw, 430px);
  border-radius: 6px;
  background:
    radial-gradient(38% 42% at 50% 62%, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 74%),
    linear-gradient(116deg, rgba(255, 255, 255, .7) 0 16%, rgba(255, 255, 255, 0) 44%),
    linear-gradient(180deg, #EAEFF4 0%, #E3E9EF var(--sol), #D7DDE4 var(--sol), #DFE4EA 100%);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  cursor: grab;
}
.scene:active { cursor: grabbing; }
/* la plinthe : un trait de lumière là où le mur rencontre le sol */
.scene::before { content: ""; position: absolute; left: 0; right: 0; top: var(--sol); height: 1px; background: rgba(255, 255, 255, .8); z-index: -1; }
.scene-poele {
  position: absolute; max-width: none; height: auto; z-index: 1;
  transition: opacity 300ms var(--ease-out), transform 480ms var(--ease-out), filter 300ms var(--ease-out);
  will-change: transform, opacity;
  pointer-events: none; -webkit-user-drag: none;
}
.scene-poele.est-vignette { mix-blend-mode: multiply; }
.scene-poele.cache { opacity: 0; transform: translateX(calc(var(--d, 1) * 52px)) scale(.97); filter: blur(6px); transition-duration: 180ms, 240ms, 180ms; }
.scene-poele:not([src]) { visibility: hidden; }
.scene-ombre {
  position: absolute; height: 30px; width: 0; z-index: 0;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(30, 36, 46, .34), rgba(30, 36, 46, 0));
  transition: width 420ms var(--ease-out), left 420ms var(--ease-out), top 420ms var(--ease-out);
  pointer-events: none;
}
/* la cote de hauteur, dessinée comme sur un plan */
.cote {
  position: absolute; width: 22px; z-index: 2; color: var(--encre-2);
  transition: top 420ms var(--ease-out), height 420ms var(--ease-out), left 420ms var(--ease-out);
  pointer-events: none;
}
.cote[hidden] { display: none; }
.cote::before {
  content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, currentColor 0 calc(50% - 36px), transparent calc(50% - 36px) calc(50% + 36px), currentColor calc(50% + 36px));
  opacity: .6;
}
.cote::after { content: ""; position: absolute; left: 4px; right: 4px; top: 0; bottom: 0; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: .6; }
.cote-val {
  position: absolute; left: 11px; top: 50%; transform: translate(-50%, -50%) rotate(-90deg);
  white-space: nowrap; font: 600 .8125rem/1 var(--f-texte); letter-spacing: .01em; font-variant-numeric: tabular-nums; color: var(--encre);
}
/* la cote de largeur, sous le poêle ; trop étroit pour loger le chiffre dans le trait, il passe dessous */
.cote-larg {
  position: absolute; height: 22px; z-index: 2; color: var(--encre-2);
  transition: top 420ms var(--ease-out), width 420ms var(--ease-out), left 420ms var(--ease-out);
  pointer-events: none;
}
.cote-larg[hidden] { display: none; }
.cote-larg::before {
  content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 1px;
  background: linear-gradient(90deg, currentColor 0 calc(50% - 34px), transparent calc(50% - 34px) calc(50% + 34px), currentColor calc(50% + 34px));
  opacity: .6;
}
.cote-larg::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; bottom: 4px; border-left: 1px solid currentColor; border-right: 1px solid currentColor; opacity: .6; }
.cote-larg .cote-val { left: 50%; top: 11px; transform: translate(-50%, -50%); }
.cote-larg.serree::before { background: currentColor; }
.cote-larg.serree .cote-val { top: 30px; }
@media (prefers-reduced-motion: reduce) {
  .scene-poele, .scene-ombre, .cote, .cote-larg { transition: none; }
  .scene-poele.cache { transform: none; filter: none; }
}

/* ---------- la fiche ---------- */
.pfiche { display: grid; align-content: start; gap: 1.35rem; color: var(--encre); transition: opacity 200ms ease, filter 200ms ease, transform 260ms var(--ease-out); }
.pfiche.change { opacity: 0; filter: blur(3px); transform: translateY(6px); transition-duration: 120ms; }
@media (prefers-reduced-motion: reduce) { .pfiche, .pfiche.change { transition: none; transform: none; filter: none; } }
.pfiche-nom { font-family: var(--f-titre); font-weight: 400; font-size: clamp(2.15rem, 1.5rem + 2.1vw, 3.3rem); letter-spacing: -.02em; line-height: 1.02; text-wrap: balance; }
.pfiche-type { margin-top: .55rem; color: var(--encre-2); font-size: 1rem; }
.pfiche-type b { color: var(--encre); font-weight: 600; }
.pfiche-corps { display: grid; gap: 1.2rem; }
.pchiffres { margin: 0; border-top: 1.5px solid var(--encre); }
.pchiffres div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .72rem 0; border-bottom: 1px solid var(--trait-doux); }
.pchiffres dt { font-size: .9375rem; color: var(--encre-2); }
.pchiffres dd { margin: 0; white-space: nowrap; text-align: right; }
.pchiffre { font-family: var(--f-titre); font-size: clamp(1.45rem, 1.2rem + .75vw, 1.85rem); line-height: 1; letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; }
.pchiffres small, .pdims small { font: 500 .875rem var(--f-texte); color: var(--encre-2); margin-left: .3em; letter-spacing: 0; }
.pvide { font-size: .9375rem; color: var(--encre-2); white-space: normal; }
.pdims-titre { font-size: .9375rem; color: var(--encre-2); }
.pdims-titre small { margin-left: .25em; }
.pdims dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: .55rem 0 0; }
.pdims dl div { display: grid; gap: .3rem; padding: .7rem .75rem .75rem; border-radius: 6px; background: rgba(255, 255, 255, .7); }
.quiz .pdims dl div { background: var(--neige); }
.pdims dt { font-size: .8125rem; color: var(--encre-2); }
.pdims dd { margin: 0; font-family: var(--f-titre); font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.pdims-brute .pdims-val { margin-top: .35rem; font-family: var(--f-titre); font-size: 1.4rem; line-height: 1.1; }
.pdims-note { font-size: .875rem; color: var(--encre-2); margin-top: .25rem; }
.ptraits { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.ptraits li { font-size: .8125rem; font-weight: 500; line-height: 1; padding: .48rem .7rem; border-radius: 999px; background: rgba(34, 32, 30, .07); color: var(--encre-2); }
.ptraits li.exclu { background: var(--encre); color: var(--papier); }
.pfiche-actions { display: grid; gap: .2rem; }
.pfiche-actions .btn { width: 100%; }

@media (min-width: 900px) {
  .plateau { grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr); gap: clamp(2rem, 3.5vw, 4rem); }
  .scene { height: clamp(460px, 42vw, 600px); }
}

/* ---------- la rangée de modèles qu'on touche ou qu'on glisse ---------- */
.selecteur { display: grid; gap: .6rem; margin-top: 1.25rem; }
.selecteur-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.selecteur-pos { font-size: .9375rem; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.fleches { display: flex; gap: .5rem; }
.fleche {
  width: 48px; height: 48px; border-radius: 999px; border: 1.5px solid var(--trait); background: transparent; color: var(--encre);
  display: grid; place-items: center; cursor: pointer; touch-action: manipulation;
  transition: background-color 200ms ease, transform 160ms var(--ease-out), opacity 200ms ease;
}
.fleche:active { transform: scale(.94); }
.fleche:disabled { opacity: .35; cursor: default; }
.fleche .ic { width: 1.2rem; height: 1.2rem; }
@media (hover: hover) and (pointer: fine) { .fleche:not(:disabled):hover { background: rgba(34, 32, 30, .06); } }
.rangee {
  position: relative; display: flex; gap: .4rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(-1 * var(--marge)); padding: .2rem var(--marge) .4rem; scroll-padding-inline: var(--marge);
}
.rangee::-webkit-scrollbar { display: none; }
.vignette {
  position: relative; flex: none; width: 100px; scroll-snap-align: start;
  display: grid; justify-items: center; align-content: end; gap: .45rem; padding: .6rem .4rem .65rem;
  border: 0; border-radius: 6px; background: transparent; color: var(--encre-2); cursor: pointer;
  font: 600 .8125rem/1.2 var(--f-texte); text-align: center;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 160ms var(--ease-out);
}
.vignette:active { transform: scale(.96); }
.vignette img { width: 84px; height: 78px; object-fit: contain; object-position: 50% 100%; transition: transform 320ms var(--ease-out); }
.vignette img.est-vignette { mix-blend-mode: multiply; }
.vignette[aria-pressed="true"] { background: #fff; color: var(--encre); box-shadow: 0 1px 2px rgba(34, 40, 52, .06), 0 10px 22px -14px rgba(34, 40, 52, .4); }
@media (hover: hover) and (pointer: fine) { .vignette:hover { color: var(--encre); } .vignette:hover img { transform: translateY(-3px); } }
.selecteur-tout { justify-self: start; color: var(--flamme-fonce); }
@media (min-width: 900px) {
  .selecteur { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--trait-doux); }
  .selecteur-tete { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .rangee { margin: 0; padding: 0; overflow: visible; justify-content: space-between; }
  .vignette { flex: 1 1 0; width: auto; max-width: 150px; }
  .vignette img { width: 100%; height: 96px; }
}

/* ---------- l'entrée en scène du premier poêle, une seule fois ---------- */
@media (prefers-reduced-motion: no-preference) {
  .attend-entree .scene .scene-poele:not(.cache), .attend-entree .scene .scene-ombre { opacity: 0; }
  .entre .scene .scene-poele:not(.cache) { animation: poele-monte 900ms var(--ease-out) both; }
  .entre .scene .scene-ombre { animation: ombre-pose 900ms var(--ease-out) both; }
  @keyframes poele-monte { from { opacity: 0; transform: translateY(28px) scale(.985); filter: blur(6px); } }
  @keyframes ombre-pose { from { opacity: 0; transform: translate(-50%, -50%) scaleX(.55); } }
}

/* ---------- sur téléphone : le poêle, puis la rangée, puis la fiche (on parcourt avant de lire) ---------- */
@media (max-width: 899px) {
  .vitrine { display: flex; flex-direction: column; }
  .vitrine > .plateau, .vitrine > .selecteur { display: contents; }
  .vitrine .scene { order: 1; }
  .vitrine .selecteur-tete { order: 2; margin-top: .9rem; }
  .vitrine .rangee { order: 3; margin-top: .35rem; }
  .vitrine .pfiche { order: 4; margin-top: 1.4rem; }
  .vitrine .selecteur-tout { order: 5; margin-top: 1rem; }
}