/* Dréa Digital, Brin de Stef, fiche produit (direction Didone chorégraphiée).
   2026-09-14. Complément de index-didone-v1.css et boutique-didone-v1.css,
   tous deux chargés avant celui-ci.

   Rôle : habiller la fiche produit en superposition qui s'ouvre au clic sur
   une pièce de la boutique. Le panneau est un <dialog> natif, donc il vit
   dans la top layer du navigateur : il passe au-dessus du tiroir du panier
   sans qu'aucun z-index n'ait à être inventé.

   Aucun token n'est redéfini ici, aucune couleur en dur hors variables. */

/* ------------------------------------------- APPEL SUR LA CARTE */
/* La pièce est cliquable : on le dit, plutôt que de laisser deviner.
   Le cartouche se pose sur la photo au survol et au focus clavier. */
.ip .frame { position: relative; }
.ip-voir {
  position: absolute; left: 0; bottom: 0;
  background: var(--accent); color: var(--on-accent);
  padding: 9px 16px;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  transform: translateY(100%);
  transition: transform .45s var(--ease);
}
.ip > a:hover .ip-voir,
.ip > a:focus-visible .ip-voir { transform: none; }

/* Quand la fiche est ouverte, la boutique ne défile plus derrière elle.
   Le dialog natif rend la page inerte, mais pas immobile. */
.fiche-ouverte { overflow: hidden; }

/* -------------------------------------------------------- LE PANNEAU */
.fiche {
  /* Le dialog natif arrive avec des valeurs d'agent utilisateur à neutraliser. */
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  max-width: min(1080px, 94vw);
  max-height: min(88vh, 900px);
  width: 100%;
  background: var(--surface-page);
  color: var(--ink);
  overflow: hidden;
}
.fiche::backdrop {
  background: rgba(33, 30, 21, .52);
}

/* Ouverture : le panneau monte et se pose, le fond se teinte.
   Pas d'animation de fermeture : le dialog quitte la top layer aussitôt,
   et une fermeture animée demanderait de retarder le close() pour rien. */
@keyframes fiche-entree {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes fiche-voile {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fiche[open]            { animation: fiche-entree .42s var(--ease); }
.fiche[open]::backdrop  { animation: fiche-voile .42s var(--ease); }

/* Le corps du panneau : image à gauche, feuille de détail à droite. */
.fiche-corps {
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  max-height: inherit;
}

/* ----------------------------------------------------------- L'IMAGE */
.fiche-image {
  background: var(--sand-200);
  overflow: hidden;
  min-height: 0;
}
.fiche-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Même palliatif photo que sur l'index des pièces, voir DESIGN.md :
     à cuire dans le fichier image dès que les vraies prises de vue arrivent. */
  filter: sepia(.22) saturate(.8) brightness(1.1) contrast(.94);
}

/* --------------------------------------------------------- LE DÉTAIL */
.fiche-detail {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: clamp(24px, 3.4vw, 46px);
  min-height: 0;
}

/* Ligne de tête : numéro de pièce d'un côté, fermeture de l'autre. */
.fiche-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 12px;
}
.fiche-num {
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
.fiche-fermer {
  appearance: none; background: none; border: 0; border-radius: 0; cursor: pointer;
  font-family: var(--serif); color: var(--ink-muted);
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  border-bottom: 1px solid var(--hairline);
  /* cible tactile : le trait reste fin, la zone cliquable ne l'est pas */
  min-height: 44px; padding: 0 2px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.fiche-fermer:hover { color: var(--accent-strong); border-bottom-color: var(--accent); }

.fiche-nom {
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  line-height: 1.08; letter-spacing: -.03em; font-weight: 600;
  margin: clamp(16px, 2.4vw, 24px) 0 0;
  max-width: 20ch;
}
.fiche-prix {
  font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600;
  color: var(--accent); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin: .3em 0 0;
}
/* Le titre reçoit le focus à l'ouverture pour les lecteurs d'écran : pas
   d'anneau visible sur un texte qui n'est pas un contrôle. */
.fiche-nom:focus { outline: none; }
.fiche-desc {
  font-style: italic; line-height: 1.6; color: var(--ink-muted);
  margin: clamp(14px, 2vw, 20px) 0 0; max-width: 46ch;
}

/* Les matières reprennent le brin garance de l'index des pièces. */
.fiche-mat-titre {
  margin: clamp(18px, 2.6vw, 28px) 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.fiche-mat { list-style: none; margin: 0; padding: 0; }
.fiche-mat li {
  position: relative; padding-left: 20px; margin-bottom: 5px;
  font-size: .9rem; line-height: 1.55; color: var(--ink-muted);
}
.fiche-mat li::before {
  content: ""; position: absolute; left: 0; top: .7em;
  width: 11px; height: 1px; background: var(--accent);
}

/* --------------------------------------------- QUANTITÉ ET ACHAT */
/* Le pied de fiche reste collé en bas quand le détail est plus court que
   le panneau : le geste d'achat ne flotte jamais au milieu du vide. */
.fiche-achat {
  margin-top: auto;
  padding-top: clamp(20px, 3vw, 30px);
}
/* Le seul message d'erreur de la fiche : visible, en toutes lettres, jamais
   un bouton qui ne répond pas sans explication. */
.fiche-alerte[hidden] { display: none; }
.fiche-alerte {
  margin: 0 0 clamp(14px, 2vw, 18px);
  padding: 12px 14px;
  background: var(--surface-shell);
  border-left: 2px solid var(--accent);
  color: var(--ink); font-size: .92rem; line-height: 1.55;
}

.fiche-qte {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: clamp(14px, 2vw, 20px);
}
.fiche-qte-label { color: var(--ink-muted); }
.fiche-qte-groupe {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--hairline);
}
.qte-btn {
  appearance: none; background: none; border: 0; border-radius: 0; cursor: pointer;
  font-family: var(--serif); color: var(--ink);
  font-size: 1.1rem; line-height: 1;
  min-width: 44px; min-height: 44px;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.qte-btn:hover { background: var(--surface-shell); color: var(--accent-strong); }
.qte-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#qtyValue {
  appearance: textfield; -moz-appearance: textfield;
  width: 3.4em; min-height: 44px;
  border: 0; border-inline: 1px solid var(--hairline);
  background: none; color: var(--ink);
  font-family: var(--serif); font-size: 1rem; font-weight: 600;
  text-align: center; font-variant-numeric: tabular-nums;
}
#qtyValue::-webkit-outer-spin-button,
#qtyValue::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* Le geste principal prend toute la largeur, comme au checkout. */
.fiche-ajouter {
  appearance: none; border: 0; border-radius: 0; cursor: pointer;
  font-family: var(--serif); width: 100%;
  background: var(--accent); color: var(--on-accent);
  padding: 16px 28px; min-height: 44px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.fiche-ajouter:hover { background: var(--accent-strong); transform: translateY(-2px); }
.fiche-ajouter:active { transform: translateY(0); }

/* Confirmation d'ajout : apparaît sous le bouton, avec les deux suites
   possibles, continuer à regarder ou aller payer. Masquée tant que rien
   n'a été ajouté (l'attribut hidden est piloté par fiche-produit.js). */
.fiche-suite[hidden] { display: none; }
.fiche-suite {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--hairline);
  display: flex; align-items: center; gap: clamp(12px, 2vw, 22px); flex-wrap: wrap;
}
.fiche-suite p { margin: 0; color: var(--ink-muted); font-size: .92rem; }
.fiche-suite button {
  appearance: none; background: none; border: 0; border-radius: 0; cursor: pointer;
  font-family: var(--serif); color: var(--ink);
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  border-bottom: 1px solid var(--accent);
  min-height: 44px; padding: 0 2px;
  transition: color .25s var(--ease);
}
.fiche-suite button:hover { color: var(--accent-strong); }

.fiche-mention {
  margin: 14px 0 0; font-size: .85rem; line-height: 1.55; color: var(--ink-faint);
}

/* -------------------------------------------------------- RESPONSIF */
/* Sous 960 px, la fiche devient une feuille pleine hauteur : l'image en
   bandeau, le détail dessous, le tout défilant d'un seul tenant. */
@media (max-width: 960px) {
  .fiche { max-width: 100vw; max-height: 100vh; height: 100dvh; }
  .fiche-corps { grid-template-columns: 1fr; grid-template-rows: auto 1fr; max-height: 100dvh; }
  /* La photo ne prend jamais plus de deux cinquièmes de la hauteur : le prix
     et le bouton d'achat restent visibles sans faire défiler, y compris sur
     un téléphone tenu à l'horizontale. */
  .fiche-image { aspect-ratio: 16 / 10; max-height: 40dvh; }
  .fiche-nom { max-width: none; }
}
@media (max-width: 640px) {
  .fiche-image { aspect-ratio: 4 / 3; }
  .fiche-suite { flex-direction: column; align-items: flex-start; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .fiche[open], .fiche[open]::backdrop { animation: none; }
  .ip-voir { transition: none; }
  .fiche-ajouter:hover { transform: none; }
  .qte-btn, .fiche-fermer, .fiche-ajouter, .fiche-suite button { transition: none; }
}