/* ============================================================================
   fiche.css - habillage du panneau « voir la fiche » (js/lien-fiche.js).

   Feuille PRODUIT, chargée pour toutes les configurations : le panneau est une
   capacité du socle, pas une particularité d'un client. Seul le mode déclaré
   dans `CONFIG.lienFiche` décide s'il s'ouvre.

   C'est la feuille du noyau (piège de focus, Échap, retour du focus déjà
   gérés) posée sur le côté : plein écran à 375 px, colonne de droite au-delà.
   Les sélecteurs doublent la classe (`.feuille.feuille--fiche`) pour gagner
   sur app.css quel que soit l'ordre des `<link>` de l'index.
   Aucune valeur en dur : tout vient de tokens.css.
   ========================================================================== */

.voile.voile--fiche {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
}

.feuille.feuille--fiche {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  border-radius: 0;
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
}
.feuille--fiche .feuille__poignee { display: none; }
.feuille--fiche .feuille__titre { white-space: normal; }

/* L'en-tête reste collé en haut du panneau : la croix de fermeture ne peut
   pas disparaître au défilement de la fiche. Le titre ne passe jamais
   dessous - d'où la réserve de largeur à droite. */
.feuille--fiche .feuille__entete {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-top: var(--sp-3);
  padding-right: calc(var(--cible) + var(--sp-3));
  background: var(--surface);
  border-bottom: 1px solid var(--ligne);
}

.btn-icone.fiche__fermer {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  border-color: transparent;
  background: none;
  color: var(--encre-douce);
}
.btn-icone.fiche__fermer:hover { background: var(--surface-appui); color: var(--encre); }
.feuille--fiche .feuille__corps { padding-top: var(--sp-3); }

/* Les valeurs de fiche (statut d'adresse notamment) ne doivent pas être
   coupées : c'est l'information que le panneau existe pour montrer. */
.feuille--fiche .champ {
  align-items: baseline;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--ligne);
}
.feuille--fiche .champ:last-child { border-bottom: 0; }
.feuille--fiche .champ__valeur { white-space: normal; font-weight: var(--gras-appui); }
.feuille--fiche .champs { gap: 0; }

.fiche .reserve { margin-top: var(--sp-3); }
.champ-aide.fiche__legende { margin-top: var(--sp-1); margin-bottom: var(--sp-3); }

.fiche__description {
  margin-top: var(--sp-4);
  font-size: var(--tx-1);
  line-height: 1.6;
  color: var(--encre-douce);
  white-space: pre-wrap;
}

/* Visuel : aucune ressource externe n'est autorisée, l'emplacement est donc
   figuré et sa légende dit pourquoi. Sa hauteur est plafonnée pour que les
   chiffres de la fiche restent visibles sans défilement à 375 px. */
.fiche__visuel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--sp-12);
  max-height: calc(var(--sp-12) * 3);
  aspect-ratio: 16 / 10;
  background: var(--surface-creuse);
  border: 1px solid var(--ligne);
  border-radius: var(--r-2);
  color: var(--ligne-forte);
  overflow: hidden;
}
.fiche__visuel .photo-placeholder__dessin {
  width: 42%;
  max-width: 8rem;
}

.fiche__image {
  display: block;
  width: 100%;
  max-height: calc(var(--sp-12) * 3);
  object-fit: cover;
  border-radius: var(--r-2);
  border: 1px solid var(--ligne);
}

/* Même seuil que le shell (app.css) : en dessous, la maquette est en mode
   mobile et la fiche occupe l'écran ; au-delà, elle devient une colonne. */
@media (min-width: 840px) {
  .feuille.feuille--fiche {
    max-width: var(--fiche-large);
    border-radius: var(--r-3) 0 0 var(--r-3);
    animation: fiche-entre var(--duree-3) var(--courbe);
  }
}

@keyframes fiche-entre {
  from { transform: translateX(var(--sp-5)); opacity: 0; }
}