/* Configurateur Lacanche (issue #190)

   Charte Patrigeon : noir #141412, or, Inter. Rien de Lacanche ici, ni couleur
   ni typographie — le design est le nôtre, comme pour le configurateur
   La Cornue.

   Ce qui distingue cette feuille de celle de La Cornue tient à la nature de
   l'image. Là-bas, un rendu unique calculé par un serveur ; ici, une **pile de
   calques PNG transparents** que le navigateur superpose. D'où deux règles qui
   portent tout le reste :

   - **Les calques d'une même vue se superposent exactement.** Ils sont en
     position absolue dans un cadre au rapport fixe, et dimensionnés en
     pourcentage de ce cadre. Le premier calque de chaque vue est en flux et
     donne sa hauteur au cadre : c'est lui qui réserve la place avant le premier
     octet, donc pas de saut de mise en page.
   - **Le placement des calques d'options vient du HTML**, en style en ligne,
     parce qu'il change d'un modèle à l'autre (16 modèles sur 24 ont leurs
     propres pourcentages). Ne rien mettre ici qui les contredise : une règle de
     position dans cette feuille gagnerait sur certains modèles seulement, et le
     défaut serait invisible en développement. */

.lac { max-width: 1360px; }

.lac .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 */

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

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

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

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

.lac-scene { display: grid; gap: 1.4rem; }

.lac-vue {
  position: relative; margin: 0; overflow: hidden;
  /* Les calques amont sont en 680 x 440 : le rapport du cadre est le leur, sinon
     l'ombre portée serait tronquée ou flotterait. */
  aspect-ratio: 680 / 440;
  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);
}

/* Un calque. Tous se superposent au pixel près sur le cadre ; seuls ceux de la
   vue de dessus reçoivent en plus un top/left/width en ligne, venu du
   catalogue. */
.lac-c {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}

/* Les calques positionnés de la vue de dessus : leur `inset` est remplacé par
   le style en ligne, donc on annule `right`/`bottom` pour que `width` décide.
   `height:100%` et non `auto` : le calque doit couvrir toute la hauteur du
   cadre, la transparence du PNG faisant le reste.

   `background-size: 50%` — et non `100%` — parce que c'est la moitié de la
   **boîte du calque**, pas du cadre, et que la boîte fait le double de l'image
   qu'elle porte : l'amont pose `width: 40%` sur un logement d'option dont le
   PNG n'occupe que 20 % du piano, et `width: 110%` sur une table qui en couvre
   55 %. Les deux valeurs vont donc ensemble et se corrigent ensemble.

   C'est le défaut de l'issue #195 : à `100%`, chaque calque était dessiné deux
   fois trop large, et une option latérale mordait sur la table centrale. La
   valeur vient du style en ligne des calques amont, où elle est écrite en
   toutes lettres (`background-size: 50%`, avec `no-repeat top center`) ; le
   moissonnage ne relève que la feuille de style, elle n'est donc pas dans le
   catalogue. Elle n'a pas à y être : elle ne varie pas d'un modèle à l'autre. */
.lac-dessus .lac-c-table,
.lac-dessus .lac-c-opt {
  inset: auto auto auto auto; height: 100%;
  background-size: 50% auto;
}

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

.lac-panneau { display: grid; gap: 1.6rem; align-content: start; }

.lac-q { border-top: 1px solid rgba(255, 255, 255, .09); padding-top: 1rem; }
.lac-q-titre {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: #9d9d95; margin-bottom: .8rem;
}
.lac-q-choisi { text-transform: none; letter-spacing: 0; color: var(--or-clair, #ffce44); font-size: .86rem; }

/* Une grille de cellules égales, et non un flux flottant (issue #193). Des
   vignettes de largeur libre donnaient des rangées en escalier : le bord droit
   ne tombait jamais deux fois au même endroit, et deux noms de longueurs
   différentes voisinaient dans des boîtes de tailles différentes. En grille,
   toutes les cellules d'une rangée ont la même largeur et la même hauteur —
   c'est la grille qui aligne, pas le hasard des libellés. */
.lac-choix {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: .5rem;
}

.lac-vignette {
  display: flex; align-items: center; gap: .55rem;
  padding: .35rem .6rem .35rem .35rem;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 3px;
  background: rgba(255, 255, 255, .03);
  color: #ded9cf; text-decoration: none; font-size: .82rem; line-height: 1.2;
  /* Cible tactile d'au moins 24 px (WCAG 2.5.8), comme les puces du carrousel
     de l'issue #129 : une vignette de nuancier se rate au doigt sinon. */
  min-height: 44px;
  transition: border-color .15s, background .15s;
}
.lac-vignette img {
  width: 34px; height: 34px; object-fit: cover; border-radius: 2px; display: block;
  background: #201f1c;
}
.lac-vignette:hover, .lac-vignette:focus-visible {
  border-color: rgba(255, 206, 68, .5); background: rgba(255, 206, 68, .06);
}
.lac-vignette.on {
  border-color: var(--or, #a8894c); background: rgba(255, 206, 68, .12); color: #fff;
}

/* Le nuancier : 32 teintes, des noms de « Anis » à « Crème Anglaise » (issue
   #193). Alignés en vignettes texte, ils ne donnaient rien de régulier ; on ne
   montre donc que la matière, en carrés de taille égale, et le nom paraît au
   survol, au focus clavier et pendant l'appui du doigt.

   Trois choses à ne pas défaire :

   - **Le nom reste le texte du lien.** Il n'est ni retiré du DOM ni caché à
     l'arbre d'accessibilité : `opacity` ne l'en sort pas. Il est donc lu par
     les lecteurs d'écran, visible sans feuille de style, et écrit en clair dans
     le titre du groupe (`.lac-q-choisi`) et dans le récapitulatif pour la
     teinte choisie. Aucune information n'est portée par la seule couleur.
   - **Le nom se pose dans une ligne réservée au-dessus de la grille**, pas en
     bulle flottante accrochée à la pastille : une bulle centrée sur la dernière
     colonne déborderait du panneau, qui touche le bord droit de la page. Ici le
     bloc est en position absolue dans `.lac-choix-nuancier`, dont le
     `padding-top` réserve la place — donc pas de débordement, et pas de saut de
     mise en page à l'affichage. Les 32 noms se superposent au même endroit, ce
     qui est sans conséquence : un seul est survolé à la fois.
   - **La cible garde ses 24 px** (WCAG 2.5.8), comme les vignettes texte. */
.lac-choix-nuancier {
  position: relative;
  grid-template-columns: repeat(auto-fill, minmax(3.25rem, 1fr));
  gap: .4rem;
  padding-top: 1.7rem;
}
.lac-choix-nuancier .lac-vignette {
  min-height: 0; padding: .25rem; justify-content: center;
}
.lac-choix-nuancier .lac-vignette img {
  width: 100%; height: auto; aspect-ratio: 1 / 1;
}
.lac-choix-nuancier .lac-vignette-nom {
  position: absolute; top: 0; left: 0; max-width: 100%;
  /* Crème et non or : l'or du titre du groupe dit « votre choix », et deux
     libellés dorés à deux lignes d'écart se confondraient. */
  font-size: .82rem; line-height: 1.2; color: #ded9cf;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; pointer-events: none; transition: opacity .12s;
}
.lac-choix-nuancier .lac-vignette:hover .lac-vignette-nom,
.lac-choix-nuancier .lac-vignette:focus-visible .lac-vignette-nom,
.lac-choix-nuancier .lac-vignette:active .lac-vignette-nom { opacity: 1; }

.lac-select {
  width: 100%; padding: .7rem .8rem;
  background: #1a1a17; color: #f2efe8;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 3px; font: inherit;
}

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

.lac-synthese {
  margin-top: 2.6rem; padding: 1.6rem;
  border: 1px solid rgba(255, 206, 68, .18); background: rgba(255, 255, 255, .02);
}
.lac-modele-nom { font-size: 1.35rem; margin-bottom: 1rem; }
.lac-recap { display: grid; gap: .1rem; margin-bottom: 1rem; }
.lac-recap > div {
  display: flex; justify-content: space-between; gap: 1.2rem;
  padding: .5rem 0; border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.lac-recap dt { color: #9d9d95; font-size: .86rem; }
.lac-recap dd { color: #f2efe8; font-size: .9rem; text-align: right; }

/* La réserve de l'amont. Discrète mais lisible : elle n'est pas une note de bas
   de page décorative, c'est ce qui empêche de lire le récapitulatif comme une
   commande ferme. */
.lac-reserve { font-size: .8rem; color: #9d9d95; font-style: italic; margin-bottom: 1.2rem; }

.lac-cta { display: inline-flex; align-items: center; gap: .4rem; }
.lac-cta svg { width: 1em; height: 1em; }
.lac-partage {
  display: block; margin-top: .9rem; padding: .4rem 0;
  background: none; border: 0; color: #9d9d95;
  font: inherit; font-size: .82rem; text-decoration: underline; cursor: pointer;
}
.lac-partage:hover { color: var(--or-clair, #ffce44); }

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

.lac-devis {
  margin-top: 3.4rem; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2.6rem;
  padding-top: 2.6rem; border-top: 1px solid rgba(255, 255, 255, .1);
}
.lac-devis-intro h2 { font-size: 1.6rem; margin-bottom: .9rem; }
.lac-devis-intro p { color: #cfcfcf; line-height: 1.65; margin-bottom: 1.4rem; }

.lac-noscript {
  margin-top: 2rem; padding: 1rem 1.2rem;
  border-left: 2px solid var(--or, #a8894c); color: #cfcfcf; font-size: .9rem;
}

/* -------------------------------------------------------------- secours */

.lac-secours { margin-top: 3.4rem; padding-top: 2.6rem; border-top: 1px solid rgba(255, 255, 255, .1); }
.lac-secours h2 { font-size: 1.5rem; margin-bottom: .9rem; }
.lac-secours p { color: #cfcfcf; margin-bottom: 1.4rem; }
.lac-gamme { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.6rem; }
.lac-gamme-item {
  padding: .5rem .9rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: 3px;
  color: #ded9cf; text-decoration: none; font-size: .86rem;
}
.lac-gamme-item:hover { border-color: var(--or, #a8894c); color: #fff; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1080px) {
  .lac-grille { grid-template-columns: minmax(0, 1fr); }
  .lac-devis { grid-template-columns: minmax(0, 1fr); }
}

/* Le piano n'est jamais rogné : sur un téléphone, un piano coupé ne se vend
   pas. Le cadre garde son rapport et rétrécit, il ne se recadre pas. */
@media (max-width: 560px) {
  .lac-choix { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
  .lac-vignette { font-size: .78rem; min-height: 40px; }
  .lac-vignette img { width: 28px; height: 28px; }
  /* La pastille ne descend pas sous 44 px : c'est déjà la plus petite cible du
     panneau, et elle se rate au doigt en dessous. */
  .lac-choix-nuancier { grid-template-columns: repeat(auto-fill, minmax(2.9rem, 1fr)); }
  .lac-choix-nuancier .lac-vignette { min-height: 44px; }
  .lac-choix-nuancier .lac-vignette img { width: 100%; height: auto; }
}

/* Le visiteur qui demande moins d'animation : la page elle-même ne bouge pas,
   elle change d'image. Ne restent que les fondus de survol — celui du cadre
   d'une vignette et, depuis l'issue #193, celui du nom d'une teinte. Ils
   s'effacent, et le nom paraît alors d'un coup : c'est le comportement voulu,
   pas une perte. */
@media (prefers-reduced-motion: reduce) {
  .lac-vignette, .lac-choix-nuancier .lac-vignette-nom { transition: none; }
}