/* ============================================================
   Vistempos — les visuels de « Comment ça marche »
   ============================================================
   Trois familles, et une règle qui les commande toutes : ON NE DESSINE QUE CE
   QUI EXISTE DANS L'APPLICATION. Chaque écran reproduit ici a son équivalent
   dans `app-convoyeur/` — textes, ordre, couleurs. La correspondance est écrite
   dans `docs/VITRINE-PROMESSES.md`, écran par écran.

     1. `.eventail`  — les modèles de formulaire, en fiches décalées ;
     2. `.tels`      — le parcours, écran par écran, dans des cadres de téléphone ;
     3. `.feuille-image` — la première page du document, fabriquée par le vrai
        générateur puis tirée en image (voir `scripts/vitrine-images.mjs`).

   ⚑ AUCUNE IMAGE. Tout est du HTML et du CSS : ça pèse quelques kilo-octets,
   ça suit le thème clair/sombre, et ça reste net sur un écran de téléphone
   comme sur un grand écran. Une capture aurait figé l'ancien nom du produit —
   c'est exactement ce qui est arrivé au PNG de `docs/maquettes/pdf-exemple/`,
   rendu avant le renommage.

   Les couleurs de l'appli sur fond noir (`SUR_NOIR` dans
   `app-convoyeur/src/theme.js`) sont recopiées ici : ce sont les seules du site
   qui ne suivent PAS le thème, parce que dans l'appli non plus elles ne le
   suivent pas — le fond d'un écran de prise de vue est la photo elle-même.
   ============================================================ */

/* ── 1. L'ÉVENTAIL DES FORMULAIRES ──────────────────────────────────── */

/* UN VRAI ÉVENTAIL, ET ASSEZ OUVERT POUR QU'ON LISE LES QUATRE NOMS.

   ATTENTION — TROIS VERSIONS ONT ÉCHOUÉ AVANT CELLE-CI, et chacune pour une
   raison différente. (1) Des fiches superposées et décalées : trois noms sur
   quatre disparaissaient. (2) Deux colonnes bien rangées : lisible, mais ce
   n'était plus un éventail — Jibril l'a dit, et c'était juste. (3) Un arc trop
   fermé : joli, mais on ne lisait encore qu'un nom.

   CE QUI MANQUAIT : de l'ÉCART. Une rotation seule ne sépare presque pas deux
   cartes — à pivot proche, 6° ne déplacent que quinze pixels. Il faut décaler
   horizontalement ET incliner. Chaque fiche est donc posée à son abscisse, puis
   tournée de quelques degrés autour de son propre bas : l'arc se voit, et il
   reste 116 px de chaque fiche à découvert — de quoi lire un nom sur deux
   lignes. Les fiches sont plus étroites pour cela ; elles portent toutes les
   mêmes informations, aucune n'est privilégiée. */
.eventail {
  position: relative;
  width: 100%;
  height: 232px;
}
.fiche {
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 132px;
  background: var(--v-surface);
  border: 1px solid var(--v-bordure-carte);
  border-radius: var(--rayon);
  box-shadow: var(--v-ombre-haute);
  padding: 11px;
  transform-origin: 50% 100%;
}
/* ATTENTION — UNE FICHE INCLINÉE EST PLUS LARGE QU'ELLE. Son encombrement
   n'est pas 132 px mais 132·cos(11°) + hauteur·sin(11°) ≈ 159 px. Les trois
   premiers réglages l'ont oublié, et la dernière fiche passait sous le
   téléphone à chaque fois. Les décalages ci-dessous sont MESURÉS à l'écran. */
.fiche.f1 { transform: translateX(-233px) rotate(-11deg); z-index: 1; }
.fiche.f2 { transform: translateX(-127px) rotate(-4deg); z-index: 2; }
.fiche.f3 { transform: translateX(-16px) rotate(4deg); z-index: 3; }
.fiche.devant { transform: translateX(103px) rotate(11deg); z-index: 4; }

.fiche-secteur {
  font-size: 9px; text-transform: uppercase; letter-spacing: .9px;
  font-weight: 700; color: var(--v-principale);
}
.fiche-nom { margin: 4px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.25; min-height: 2.5em; }
.fiche-chiffres {
  display: flex; gap: 9px; border-top: 1px solid var(--v-bordure);
  margin-top: 8px; padding-top: 7px;
}
.fiche-chiffres div { display: grid; gap: 1px; }
.fiche-chiffres b { font-size: 13px; font-weight: 700; line-height: 1; }
.fiche-chiffres span { font-size: 8.5px; color: var(--v-texte-2); }

/* L'ÉVENTAIL ET LE TÉLÉPHONE, COMPOSÉS — pas mis côte à côte dans une grille.
   ATTENTION — la grille `1fr auto` a échoué deux fois : les fiches sont
   `position: absolute`, donc elles ne poussent rien, et l'arc venait recouvrir
   l'écran du téléphone. Ici le téléphone est ancré en haut à droite et
   l'éventail occupe la place qui reste : les deux se croisent sans se cacher. */
/* ATTENTION — `width: 100%`, SINON TOUT SE SUPERPOSE. `.duo` n'a que des
   enfants `position: absolute` : sans largeur imposée, il se réduit à zéro dans
   `.visuel` (une grille centrée), et l'éventail comme le téléphone se
   retrouvent empilés au même point. Troisième version de ce bloc, et c'est ce
   détail-là qui manquait aux deux premières. */
/* ⚑ LE TÉLÉPHONE PASSE SOUS L'ARC, À TOUTES LES LARGEURS. Côte à côte, il ne
   restait que 400 px pour quatre fiches : chacune n'en découvrait que 80, et
   trois noms sur quatre étaient coupés par la fiche suivante — c'est ce que
   Jibril demandait justement de réparer. Sous l'arc, les 512 px de la colonne
   sont à lui seul : les quatre noms se lisent en entier. */
.duo { display: grid; justify-items: end; gap: 12px; width: 100%; }
.duo > .cadre { width: 124px; }
/* ⚑ L'ÉCART EST MESURÉ, PAS DEVINÉ. La colonne fait 512 px, le téléphone
   commence à 402 : quatre fiches de 152 px espacées de 90 px laissent leurs
   quatre NOMS (qui vivent en haut à gauche de chaque fiche) entièrement à
   découvert, et seule la tranche droite de la dernière passe derrière le
   téléphone. Deux réglages précédents ont été essayés et mesurés : à 105 px
   d'écart, le nom de la quatrième était coupé ; à 116, la première mordait sur
   le texte. */
.duo > .eventail { width: 100%; justify-self: stretch; }

/* Les deux écrans du bloc 2, eux, vont bien côte à côte : ils ont la même
   forme et aucun ne déborde. */
.duo-ecrans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  align-items: end; min-height: 0; }
.duo-ecrans > .cadre { position: static; width: 100%; }

/* ── 2. LE PARCOURS, ÉCRAN PAR ÉCRAN ────────────────────────────────── */

/* ⚑ ÇA DÉFILE DANS SON CADRE, ça ne pousse pas la page. Six téléphones ne
   tiennent pas côte à côte sur un écran de 390 px, et les empiler ferait une
   colonne de deux mètres qu'on ne lit plus comme un parcours. */
.tels {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 220px;
  gap: 18px;
  overflow-x: auto;
  padding: 6px 2px 18px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.tels > figure { margin: 0; scroll-snap-align: center; }
/* Le fondu du bord droit : sans lui, sur un grand écran, le sixième cadre est
   coupé net et rien ne dit qu'il y a une suite. */
.tels-cadre { position: relative; }
.tels-cadre::after {
  content: ''; position: absolute; top: 0; bottom: 20px; right: 0; width: 46px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--v-fond));
}
.tels figcaption {
  margin-top: 10px; font-size: var(--taille-petit); color: var(--v-texte-2); line-height: 1.45;
}
.tels figcaption b { display: block; color: var(--v-texte); font-size: 13px; }

/* ATTENTION — UNE LARGEUR, SINON LE CADRE S'ÉCRASE. Dans `.visuel`
   (`place-items: center`), une boîte sans largeur se réduit à son contenu, et
   `aspect-ratio` la rend alors minuscule : le téléphone de l'étape 2 faisait
   60 px de large. Vu à l'écran. */
.visuel > .cadre { width: min(232px, 72vw); }

.cadre {
  border: 7px solid var(--v-texte);
  border-radius: var(--rayon-appareil);
  background: var(--v-fond);
  overflow: hidden;
  aspect-ratio: 9 / 17;
  display: grid;
  grid-template-rows: auto 1fr auto;
  box-shadow: var(--v-ombre-haute);
}
.cadre-haut {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px 4px; font-size: 9px; color: var(--v-texte-2);
}
.cadre-corps { padding: 10px; overflow: hidden; display: grid; align-content: start; gap: 8px; }
.cadre-socle { padding: 8px 10px 10px; display: grid; gap: 6px; }

/* Les pièces de l'application, aux mêmes noms que là-bas. */
.a-surtitre { font-size: 8px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: var(--v-texte-2); }
.a-titre { font-size: 16px; font-weight: 700; line-height: 1.15; }
.a-aide { font-size: 9.5px; color: var(--v-texte-2); line-height: 1.4; }
.a-saisie {
  border: 1.5px solid var(--v-bordure); border-radius: var(--rayon-bulle);
  padding: 9px 10px; font-size: 13px; letter-spacing: 1.5px;
  color: var(--v-texte-2); background: var(--v-surface); text-align: center;
}
.a-case { display: flex; gap: 7px; align-items: flex-start; }
.a-case i {
  width: 13px; height: 13px; flex: none; margin-top: 1px; border-radius: var(--rayon-petit);
  border: 1.5px solid var(--v-bordure); background: var(--v-surface);
}
.a-case.cochee i { background: var(--v-principale); border-color: var(--v-principale); }
.a-case span { font-size: 8.5px; color: var(--v-texte-2); line-height: 1.35; }
.a-bouton {
  background: var(--v-principale); color: var(--v-principale-texte);
  border-radius: var(--rayon-bulle); padding: 9px; text-align: center;
  font-size: 12px; font-weight: 600;
}
.a-bouton.clair { background: var(--v-surface); color: var(--v-texte); border: 1px solid var(--v-bordure); }
.a-puce {
  display: inline-block; background: var(--fond-principale-doux); color: var(--v-principale);
  border-radius: var(--rayon-pilule); padding: 2px 7px; font-size: 8.5px; font-weight: 700;
}
.a-puce.verrou { background: var(--fond-attention); color: var(--couleur-attention); }
.a-rangee { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.a-fil { display: flex; gap: 4px; }
.a-fil i { flex: 1; height: 4px; border-radius: var(--rayon-pilule); background: var(--v-bordure); }
.a-fil i.faite { background: var(--couleur-succes); }
.a-fil i.ici { background: var(--v-principale); }
.a-carte {
  background: var(--v-surface); border: 1px solid var(--v-bordure);
  border-radius: var(--rayon-bulle); padding: 8px; display: grid; gap: 7px;
}
.a-champ { display: grid; gap: 2px; }
.a-champ span { font-size: 8px; color: var(--v-texte-2); }
.a-champ b { font-size: 11px; font-weight: 500; }
.a-champ + .a-champ { border-top: 1px solid var(--v-bordure); padding-top: 6px; }

/* LA JAUGE À CRANS — le cinquième type de champ. Une case « 0 » détachée (sans
   elle, on ne peut pas DÉSIGNER un réservoir vide : ne rien faire voudrait dire
   « pas répondu »), puis une case par cran, qui se remplit. */
.a-jauge { display: flex; align-items: center; gap: 2px; margin-top: 2px; }
.a-jauge i {
  height: 12px; border-radius: var(--rayon-petit); border: 1px solid var(--couleur-bordure);
  background: var(--v-creux);
}
.a-jauge i.zero {
  width: 13px; margin-right: 3px; border-radius: var(--rayon-petit); font-style: normal;
  font-size: 8px; line-height: 10px; text-align: center; color: var(--v-texte-2);
}
.a-jauge i.cran { flex: 1; }
.a-jauge i.cran.plein { background: var(--v-principale); border-color: var(--v-principale); }
.a-jauge b { margin-left: 5px; font-size: 10px; font-weight: 700; }

/* LES PHOTOS, NOMMÉES UNE FOIS. Les fichiers sont écrits par
   `scripts/photos-vitrine.mjs` : les vraies photos de Jibril dès qu'il les
   dépose, des dégradés neutres en attendant. Rien d'autre à changer le jour
   venu — mêmes noms, mêmes emplacements. */
.photo-avant { --photo: url('../images/vue-avant.jpg'); }
.photo-degat { --photo: url('../images/degat.jpg'); }
.photo-bord { --photo: url('../images/tableau-de-bord.jpg'); }

/* L'écran de prise de vue : fond noir, couleurs de `SUR_NOIR`. */
.cadre.noir { background: var(--app-noir); grid-template-rows: auto 1fr auto; }
.cadre.noir .cadre-haut { color: var(--app-noir-doux); }
/* ⚑ UNE VRAIE PHOTO, PLUS UN RECTANGLE VIDE (Jibril, 28/09/2026). Le fond est
   l'image elle-même, posée en `background-image` : elle se recadre toute seule
   (`cover`) quelle que soit la hauteur du cadre, et elle ne peut pas décaler la
   mise en page comme le ferait une balise `img` qui charge en retard. */
.vue {
  position: relative; margin: 0 8px; border-radius: var(--rayon-bulle); overflow: hidden;
  background-image: var(--photo, none);
  background-size: cover; background-position: center;
  background-color: var(--app-photo-mi);
}
.n-bulle {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  background: var(--app-verre-dense); color: var(--app-noir-texte);
  border-radius: var(--rayon-pilule); padding: 5px 9px; font-size: 8.5px; text-align: center;
}
.n-rond {
  width: 44px; height: 44px; border-radius: var(--rayon-pilule); border: 3px solid var(--app-trait);
  display: grid; place-items: center; margin: 0 auto;
}
.n-rond i { width: 32px; height: 32px; border-radius: var(--rayon-pilule); background: var(--app-noir-texte); }
.n-plat { color: var(--app-noir-doux); font-size: 8.5px; text-align: center; }
.n-action {
  border-radius: var(--rayon-bulle); padding: 8px; text-align: center; font-size: 11px; font-weight: 700;
  background: var(--app-noir-texte); color: var(--app-noir);
}
.n-action.second { background: var(--app-verre); color: var(--app-noir-texte); font-weight: 500; }
.n-action.degat { background: var(--app-attention-fond); color: var(--app-attention-texte); font-weight: 600; }

/* Le point rouge d'un dégât, et sa bande de gros plans. */
.point-degat {
  position: absolute; width: 26px; height: 26px; border-radius: var(--rayon-pilule);
  background: var(--app-alerte); border: 3px solid var(--app-noir-texte); color: var(--app-noir-texte);
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  left: 46%; top: 48%;
}
.gros-plans { display: flex; gap: 6px; padding: 0 8px; }
.gros-plans i {
  width: 38px; height: 38px; border-radius: var(--rayon); position: relative;
  background-image: var(--photo, none);
  background-size: cover; background-position: center;
  background-color: var(--app-photo-mi);
  border: 1px solid var(--app-trait);
}
.gros-plans i::after {
  content: attr(data-n); position: absolute; left: -4px; top: -4px;
  width: 15px; height: 15px; border-radius: var(--rayon-pilule); background: var(--app-alerte); color: var(--app-noir-texte);
  font-size: 9px; display: grid; place-items: center; font-weight: 700;
}
.gros-plans i.vide { background: var(--app-verre); border-style: dashed; }
.gros-plans i.vide::after { content: ''; display: none; }

/* La signature, et la pastille de fin. */
.a-trace {
  height: 46px; border: 1px dashed var(--v-bordure); border-radius: var(--rayon-bulle);
  background: var(--v-surface); display: grid; place-items: center;
}
.a-trace svg { width: 84%; height: 30px; }
.a-preuves { display: flex; gap: 6px; }
.a-preuves div { flex: 1; background: var(--v-creux); border-radius: var(--rayon); padding: 5px 6px; display: grid; gap: 1px; }
.a-preuves span { font-size: 7.5px; color: var(--v-texte-2); text-transform: uppercase; letter-spacing: .5px; }
.a-preuves b { font-size: 9px; font-weight: 500; }
.a-sceau {
  width: 46px; height: 46px; border-radius: var(--rayon-pilule); background: var(--v-principale);
  color: var(--v-principale-texte);
  display: grid; place-items: center; margin: 0 auto 8px;
}
.a-sceau svg { width: 24px; height: 24px; }

/* ── 3. LA PREMIÈRE PAGE DU DOCUMENT ────────────────────────────────── */

/* ⚑ UNE IMAGE DU VRAI DOCUMENT, plus une page redessinée en HTML (Jibril,
   28/09/2026). Elle est fabriquée par le VRAI générateur — `pdf-vitrine.ts`
   appelle `fabriquerLeDocument`, exactement comme la fonction en ligne — puis
   tirée en JPEG par `scripts/vitrine-images.mjs`. Une page reconstituée à la
   main finit toujours par mentir sur un détail, et c'est le seul visuel du site
   qui montre le produit fini. */
.feuille-image {
  display: block; width: 100%; max-width: 330px; height: auto;
  border: 1px solid var(--v-bordure-carte); border-radius: var(--rayon);
  box-shadow: var(--v-ombre-haute);
}

@media (max-width: 900px) {
  .tels { grid-auto-columns: 200px; }
}
@media (max-width: 420px) {
  /* À 390 px, l'éventail et le téléphone côte à côte ne tiennent plus : le
     téléphone passe dessous, et l'arc se resserre. */
  .duo { grid-template-columns: 1fr; justify-items: center; gap: 18px; }
  .duo > .cadre { width: 176px; }
  /* ⚑ AU TÉLÉPHONE, LE TÉLÉPHONE DESCEND. Côte à côte, il ne resterait que
     182 px pour quatre fiches : aucun nom ne serait lisible. L'arc prend toute
     la largeur, et l'écran du code se pose dessous, centré. */
  .duo { justify-items: center; gap: 14px; }
  .duo > .cadre { width: 150px; }
  .eventail { height: 212px; }
  .fiche { width: 132px; padding: 9px; }
  .fiche.f1 { transform: translateX(-158px) rotate(-10deg); }
  .fiche.f2 { transform: translateX(-98px) rotate(-3.5deg); }
  .fiche.f3 { transform: translateX(-38px) rotate(3.5deg); }
  .fiche.devant { transform: translateX(22px) rotate(10deg); }
}