/* Configurateur La Cornue (issue #71)

   Charte Patrigeon : noir #141412, jaune #ffce44, Inter. Rien de La Cornue ici,
   ni couleur, ni typographie : le design est le nôtre, c'est la raison d'être
   du ticket.

   Deux contraintes de mise en page portent tout le reste :

   - **La mise en page ne doit jamais sauter.** Le cadre de l'image a un rapport
     fixe, et l'image précédente reste dedans pendant le calcul du rendu
     suivant. Un changement d'option ne déplace donc rien.
   - **Le panneau descend sous l'image en dessous de 1080 px**, en tiroir, et
     l'image n'est jamais rognée : sur un téléphone, un piano coupé ne se vend
     pas. */

.conf { max-width: 1360px; }

/* Réservé au lecteur d'écran : le nom commercial d'une teinte, que la pastille
   ne peut pas afficher. Aucune information n'est portée par la seule couleur. */
.conf .sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------- en-tête */

.conf-tete { max-width: 760px; margin-bottom: 2.6rem; }
.conf-sur {
  font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--or); margin-bottom: .9rem;
}
.conf-tete h1 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); margin-bottom: .9rem; }
.conf-intro { color: #cfcfcf; line-height: 1.65; }

/* ----------------------------------------------------------------- grille */

.conf-grille {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .95fr);
  gap: 2.4rem; align-items: start;
}

/* ------------------------------------------------------------------ scène */

.conf-cadre {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  /* Le rendu arrive en WebP à canal alpha : le piano se pose sur notre fond,
     pas sur le beige de La Cornue. Ce dégradé est ce fond. */
  background:
    radial-gradient(120% 90% at 50% 108%, rgba(255, 206, 68, .13), transparent 62%),
    linear-gradient(180deg, #1a1a17 0%, #101010 100%);
  border: 1px solid rgba(255, 206, 68, .16);
}
.conf-img { width: 100%; height: 100%; object-fit: contain; transition: opacity .25s; }
/* Aucune image encore : un aplat discret, jamais une zone vide ni un cadre cassé. */
.conf-img-vide { opacity: .12; object-fit: contain; padding: 18%; }
.conf-cadre.calcul .conf-img { opacity: .62; }
.conf-cadre.indispo::after {
  content: "Rendu momentanément indisponible. Nos conseillers composent votre piano en magasin.";
  position: absolute; inset: auto 0 0 0; padding: 1rem 1.2rem;
  background: rgba(0, 0, 0, .72); color: var(--or-clair); font-size: .82rem;
}
.conf-chargement {
  position: absolute; top: 1rem; left: 1rem; padding: .38rem .8rem;
  background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 206, 68, .35);
  color: var(--or-clair); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
}
.conf-cadre .conf-chargement[hidden] { display: none; }

.conf-vues { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.conf-vue {
  background: transparent; border: 1px solid rgba(255, 255, 255, .18); color: #dcdcdc;
  font: inherit; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .62rem 1rem; min-height: 40px; cursor: pointer; transition: border-color .2s, color .2s;
}
.conf-vue:hover { border-color: var(--or); color: var(--or-clair); }
.conf-vue.on { border-color: var(--or); color: var(--noir); background: var(--or); }
.conf-vue:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }

/* --------------------------------------------------------------- panneau */

.conf-panneau {
  border: 1px solid rgba(255, 255, 255, .12); padding: 1.6rem;
  max-height: 78vh; overflow-y: auto;
}
.conf-modele { display: block; margin-bottom: 1.8rem; }
.conf-modele > span {
  display: block; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gris); margin-bottom: .5rem;
}
.conf-modele select {
  width: 100%; padding: .8rem .9rem; min-height: 44px;
  background: #101010; border: 1px solid rgba(255, 255, 255, .2); color: var(--blanc);
  font: inherit;
}
.conf-modele select:focus { outline: none; border-color: var(--or); }

.conf-q { padding-bottom: 1.6rem; margin-bottom: 1.6rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.conf-q:last-child { border-bottom: 0; margin-bottom: 0; }
.conf-q-titre {
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--or); margin-bottom: .9rem;
}
.conf-famille {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gris); margin: .9rem 0 .5rem;
}
.conf-famille:first-of-type { margin-top: 0; }

.conf-pastilles { display: flex; flex-wrap: wrap; gap: .5rem; }
.conf-pastille {
  /* 34 px de dessin dans une cible de 44 px : la pastille reste fine à l'oeil
     et prenable au doigt. */
  width: 34px; height: 34px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--teinte, #4a4a4a);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 0 0 0 rgba(255, 206, 68, 0); transition: box-shadow .2s, transform .15s;
  position: relative;
}
.conf-pastille::after { content: ""; position: absolute; inset: -5px; }
.conf-pastille:hover { transform: scale(1.08); }
.conf-pastille.on { box-shadow: 0 0 0 2px var(--noir), 0 0 0 4px var(--or); }
.conf-pastille:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
/* Teinte que nous n'avons pas de valeur pour approcher : une trame neutre,
   jamais un aplat faux. Le nom reste lisible sous la palette. */
.conf-pastille-inconnue {
  background: repeating-linear-gradient(45deg, #3a3a38 0 6px, #4a4a48 6px 12px);
}
.conf-choisi { margin-top: .8rem; font-size: .86rem; color: #dcdcdc; }

.conf-choix { display: flex; flex-direction: column; gap: .4rem; }
.conf-choix-item {
  display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; min-height: 44px;
  border: 1px solid rgba(255, 255, 255, .12); cursor: pointer; font-size: .88rem;
  color: #dcdcdc; transition: border-color .2s, color .2s;
}
.conf-choix-item:hover { border-color: rgba(255, 206, 68, .5); }
.conf-choix-item.on { border-color: var(--or); color: var(--or-clair); }
.conf-choix-item input { accent-color: var(--or); width: 16px; height: 16px; flex: none; }
.conf-texte {
  width: 100%; padding: .7rem .8rem; min-height: 44px; font: inherit;
  background: #101010; border: 1px solid rgba(255, 255, 255, .2); color: var(--blanc);
}
.conf-texte:focus { outline: none; border-color: var(--or); }

/* -------------------------------------------------------------- synthèse */

.conf-synthese {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 2.4rem;
  margin-top: 2.6rem; padding-top: 2.2rem; border-top: 1px solid rgba(255, 255, 255, .12);
}
.conf-modele-nom { font-size: 1.3rem; margin-bottom: 1.1rem; }
.conf-recap { display: grid; gap: .55rem; }
.conf-recap > div { display: grid; grid-template-columns: minmax(140px, 32%) 1fr; gap: 1rem; }
.conf-recap dt { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.conf-recap dd { font-size: .9rem; color: #e4e4e4; }
.conf-cta { display: inline-flex; align-items: center; gap: .6rem; }
.conf-cta svg { width: 15px; height: 15px; }
.conf-partage {
  display: block; margin-top: .9rem; padding: .5rem 0; background: none; border: 0;
  color: var(--gris); font: inherit; font-size: .78rem; text-decoration: underline;
  text-underline-offset: 4px; cursor: pointer;
}
.conf-partage:hover { color: var(--or-clair); }

/* ----------------------------------------------------------------- devis */

.conf-devis {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr); gap: 3rem;
  margin-top: 4rem; padding-top: 3rem; border-top: 1px solid rgba(255, 255, 255, .12);
  scroll-margin-top: 110px;
}
.conf-devis h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.conf-devis p { color: #cfcfcf; line-height: 1.65; margin-bottom: 1.6rem; }
.conf-noscript { margin-top: 2rem; color: var(--or-clair); }

/* ----------------------------------------------------- gamme et secours */

.conf-secours { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.conf-secours h2 { font-size: 1.4rem; margin-bottom: .9rem; }
.conf-secours p { color: #cfcfcf; margin-bottom: 1.6rem; }
.conf-gamme {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.2rem; margin-bottom: 2rem;
}
.conf-gamme-item span {
  display: block; margin-top: .6rem; font-size: .84rem; letter-spacing: .06em; color: #dcdcdc;
}
.conf-gamme-item:hover span { color: var(--or-clair); }

/* ------------------------------------------------------------- réactif */

@media (max-width: 1080px) {
  /* Le panneau passe sous l'image, en tiroir : l'image garde toute la largeur
     et n'est jamais rognée. */
  .conf-grille, .conf-synthese, .conf-devis { grid-template-columns: 1fr; }
  .conf-panneau { max-height: none; }
  .conf-vues { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .3rem; }
  .conf-vue { flex: none; }
}

@media (max-width: 620px) {
  .conf-recap > div { grid-template-columns: 1fr; gap: .1rem; }
  .conf-cadre { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .conf-img, .conf-pastille, .conf-vue, .conf-choix-item { transition: none; }
  .conf-pastille:hover { transform: none; }
}