/* =========================================================
   La page de l'application de gestion (/gestion). Chargée après /socle.css
   et /formation/ressources/vente.css, dont elle reprend les jetons et les
   composants (v-*) : ici, seulement ce qui lui est propre, sous body.vg.
   - Le téléphone : un cadre de nuit autour d'une VRAIE capture de
     l'application (gestion/ressources/ecran-*.webp, 780 x 1688, densité 2).
   - Les sections à capture (vg-trait) : le texte, puis l'écran ; sur un
     grand écran, côte à côte, l'écran tenu pendant qu'on lit la liste, et de
     part et d'autre d'une section à l'autre.
   Aucune couleur écrite, hors l'ombre du téléphone (celle des photos de
   vente.css) : les jetons de socle.css et de vente.css.
   ========================================================= */

/* La barre des sections : cinq liens, qui ne tiennent sur une ligne qu'à partir
   de 1240 px (mesuré) ; entre 1080 et 1239 px, l'en-tête garde la marque et
   ses deux boutons, comme en dessous de 1080 px. */
.vg .v-nav a{white-space:nowrap}
@media (min-width:1080px) and (max-width:1239px){
  .vg .v-nav{display:none}
  .vg .v-nav+.v-entete__actions{margin-left:auto}
}

/* La pastille « Bientôt disponible », sous le repère du héros. */
.vg-statut{margin-top:16px}
/* « Le reste se calcule. » sur sa propre ligne : jamais « Le » seul en bout de ligne. */
.vg .v-heros__titre em{display:block}

/* ---------- Le téléphone ---------- */
.vg-ecran{justify-self:center;width:min(100%,300px);margin:0}
.vg-ecran__boite{position:relative}
.vg-tel{padding:8px;border-radius:36px;background:var(--nuit);box-shadow:0 34px 60px -34px rgba(26,20,15,.65),inset 0 0 0 1px var(--filet-nuit)}
.vg-tel img{display:block;width:100%;height:auto;aspect-ratio:780/1688;border-radius:29px;background:var(--papier)}
.vg-ecran figcaption{margin-top:16px;color:var(--encre-sourde);font-size:.84rem;line-height:1.45;text-align:center;text-wrap:balance}
/* Le héros : le petit tableau posé sur le coin du téléphone, comme sur la
   photo de la formation. Il ne couvre que le bas du cadre (la barre des
   onglets) : jamais le carnet. */
.vg-ecran--heros{width:min(100%,320px)}
.vg-ecran--heros .v-tableau{left:-10px;bottom:-34px}
.vg-ecran--heros .v-palettes{--c:clamp(30px,7vw,40px)}
.vg-ecran--heros figcaption{margin-top:52px}
@media (min-width:960px){
  .vg-ecran--heros{justify-self:end;width:340px;margin-right:clamp(0px,3vw,40px)}
  .vg-ecran--heros .v-tableau{left:-64px}
}

/* ---------- Les sections à capture ---------- */
.vg-trait{display:grid;gap:clamp(40px,6vw,72px)}
.vg-trait__texte{display:grid;gap:clamp(24px,3vw,36px);align-content:start}
.vg-trait .v-tete{margin-bottom:0}
.vg-trait .v-note{margin-top:0}
@media (min-width:960px){
  .vg-trait{grid-template-columns:minmax(0,1fr) 300px;column-gap:clamp(56px,7vw,112px);align-items:start}
  .vg-trait--inverse{grid-template-columns:300px minmax(0,1fr)}
  .vg-trait--inverse .vg-ecran{order:-1}
  .vg-trait .vg-ecran{position:sticky;top:calc(var(--haut-entete) + 32px)}
}
@media (min-width:1200px){
  .vg-trait{grid-template-columns:minmax(0,1fr) 320px}
  .vg-trait--inverse{grid-template-columns:320px minmax(0,1fr)}
  .vg-trait .vg-ecran{width:320px}
}

/* ---------- L'offre ---------- */
.vg-offre{margin-top:0;background:var(--papier);border:1px solid var(--filet)}
.vg-offre dd .pastille{display:flex;width:max-content;margin-bottom:8px}
.vg-offre dd b{color:var(--encre)}

/* ---------- L'appel : un lien sur la braise ---------- */
.vg .v-appel__rappel a{color:var(--papier);font-weight:600;text-underline-offset:3px}
.vg .v-appel__rappel a:hover{color:var(--nuit)}

/* ---------- Le mouvement ---------- */
@media (prefers-reduced-motion:no-preference){
  .vg-ecran--heros .vg-tel{animation:v-leve .9s .2s var(--sortie) both}
  .vg-ecran--heros .v-tableau{animation:v-pose .8s .7s var(--sortie) both}
  .vg-ecran--heros .v-tableau .v-case{transform-origin:50% 50%;animation:v-palette .5s var(--sortie) both;animation-delay:calc(.95s + var(--n,0) * .05s)}
}

/* ---------- L'impression ---------- */
@media print{
  .vg-ecran,.vg-statut{display:none}
  .vg-trait{display:block}
}