/* mockup/atelier.css — l'habillage des pages d'ATELIER.
   Vit dans `mockup/` parce qu'il ne part JAMAIS en thème : il n'existe que
   pour que le fondateur puisse juger un composant isolé, sur téléphone. Ses
   gris en dur sont délibérés — la chrome de maquette ne doit jamais pouvoir se
   confondre avec le design de la marque. */
.atelier-entete { padding-block: var(--sp-7) var(--sp-5); border-bottom: 1px dashed #b9c0c6; }
.atelier-bloc { padding-block: var(--sp-6) var(--sp-9); }
.atelier-titre { margin-bottom: var(--sp-5); }
.atelier-titre code { font-family: var(--font-data); background: #e8ebee; padding: 0 4px; border-radius: 3px; }
.atelier-note {
  margin: var(--sp-7) 0 var(--sp-4); padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid #b9c0c6; background: #eef1f3; color: #40464b;
  font-size: var(--fs-body-sm); line-height: var(--lh-normal);
}
.atelier-note b { color: #1f2327; }
/* Les cartes s'ÉTIRENT : c'est la condition pour que leurs actions s'alignent.
   Une carte qui n'a pas besoin de la hauteur garde son contenu en haut grâce à
   son propre `align-content: start`. */
.atelier-bloc .grille { align-items: stretch; }

/* ═══════════════════════════════════════════════════════════════════════════
   LA SCÈNE — l'établi qui permet de montrer une superposition
   ═══════════════════════════════════════════════════════════════════════════
   Un tiroir fermé ne se voit pas sur une capture, et deux tiroirs OUVERTS sont
   deux `position: fixed` qui se peignent l'un sur l'autre, au même endroit de
   la page. `.scene` porte un `transform`, ce qui en fait le **bloc conteneur**
   de ses descendants `fixed` : chaque panneau ouvert reste dans sa vignette et
   se juge à côté des autres.

   Ce n'est PAS du design de marque, c'est de l'établi : sa place est ici, dans
   `mockup/`, qui ne part jamais en thème.

   ⚠ POURQUOI CE FICHIER EST LA SEULE DÉFINITION.
   Les lots A et D ont inventé `.scene` chacun de leur côté, pour le même
   besoin, et l'ont tous deux signalée « à promouvoir » — le protocole a
   fonctionné. Mais avant la promotion, les deux définitions coexistaient : le
   lot D posait `aspect-ratio: 39 / 64` dans `lib/components/filtres.css`, le
   lot A posait `height: 780px` dans le `<style>` de sa page. Les deux
   s'appliquaient ensemble, et une boîte qui a une hauteur ET un ratio calcule
   sa LARGEUR depuis le ratio : 780 × 39/64 = **475 px dans un parent de
   390 px**. La page entière défilait horizontalement — la plainte n°1 du
   fondateur — sans qu'aucun des deux lots ne puisse le voir depuis sa moitié.

   D'où la garde ci-dessous : la largeur est bornée en dur, et hauteur fixe et
   ratio s'excluent mutuellement. */
.scene {
  position: relative;
  transform: translate(0);      /* fait de la scène le bloc conteneur des `fixed` */
  overflow: hidden;
  width: 100%;
  max-width: 100%;              /* garde : aucune règle ne peut plus la faire déborder */
  background: var(--bg-page);
  border: 1px dashed #b9c0c6;
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-4);
  /* Défaut : la proportion d'un téléphone. Sans hauteur par défaut, une
     `<div class="scene">` nue s'effondre — mesurée à 358 × 102 px le
     2026-08-22 — et les superpositions qu'elle devait contenir s'échappent :
     la page se remettait à défiler horizontalement, 978 px pour 390. */
  aspect-ratio: 39 / 64;
}
/* Hauteur fixe → le ratio est explicitement neutralisé. */
.scene--courte     { height: 260px; aspect-ratio: auto; }
.scene--moyenne    { height: 420px; aspect-ratio: auto; }
.scene--haute      { height: 620px; aspect-ratio: auto; }
.scene--tres-haute { height: 780px; aspect-ratio: auto; }
/* Alias explicite du défaut, quand on veut le dire dans le balisage. */
.scene--telephone  { aspect-ratio: 39 / 64; height: auto; }

.scene > .scene__fond { position: absolute; inset: 0; overflow: hidden; padding: var(--sp-4); }
.scene .tiroir--bas { max-height: 100%; }
.scene .voile  { z-index: 1; }
.scene .tiroir { z-index: 2; }

/* Les composants pleine largeur (bandeau, en-tête, pied) se montrent HORS de
   `.bande` : leur padding intérieur EST leur gouttière, et les emboîter dans
   une seconde en ferait mentir la mesure. */
.atelier-bloc--large { padding-inline: 0; }
.atelier-bloc--large > .atelier-note,
.atelier-bloc--large > .atelier-titre { margin-inline: var(--sp-4); }


/* ═══════════════════════════════════════════════════════════════════════════
   LA MARQUE DES VALEURS INVENTÉES
   ═══════════════════════════════════════════════════════════════════════════
   Tout ce qui porte `data-placeholder` est souligné en rouge sourd, pour qu'on
   voie d'un coup d'œil ce qui est de la donnée et ce qui est du remplissage.

   Cette règle vivait dans `lib/components/app-compagnon.css`, donc elle serait
   PARTIE EN THÈME : un soulignement « ceci est une valeur de maquette » livré
   en production est un défaut, pas un détail. Sa place est ici, dans `mockup/`,
   qui disparaît au port. */
[data-placeholder] { box-shadow: inset 0 -2px 0 0 var(--fg-alert); }

/* Le titre de l'en-tête d'atelier : Cormorant a de longues hampes, et à
   `line-height: 1.05` la descendante du « p » de « composants » touchait le
   chapô. C'est de la chrome d'atelier — la règle appartient ici, pas à la page
   de chaque lot, où deux d'entre eux l'avaient déjà rustinée en local. */
.atelier-entete h1 { line-height: var(--lh-snug); margin-bottom: var(--sp-2); }