/* =============================================================================
   v32.css — CV by Belentia, v3.2 « visuels » (22/09/2026)
   -----------------------------------------------------------------------------
   Chargée APRÈS v31.css. Rien de la v3.1 n'est retiré : on ajoute des images.
     1. Révélation produit : l'éditeur dans un ordinateur, qui s'agrandit au défilement.
     2. Moment animé : trois vrais exports qui tournent, seulement quand on les voit.
     3. Chiffres : quatre faits réels en grand.
     4. « Ce que vous obtenez » : trois vrais PDF en éventail + trois atouts en trois mots.
     4 bis. Avant / après : le même CV recalé à la main face à l'export.
     5. Galerie d'usages : trois photos, 4:5, défilement à accroche sur mobile.
     6. Bandeau final : le PDF ouvert sur un téléphone, à côté de l'appel.
   v3.3 (23/09) : 1 et 6 passent au kit d'appareils (_assets/device.css) avec
   de vraies captures (_assets/cv/ecrans/) ; leurs règles ci-dessous ne servent plus.
   Contrôle v3.2 (22/09, soir) : image vedette nette (2 800 px), cadre limité à
   1 000 px et 72vh, bande photo 21:9 colorée, offres All Access en tête sur mobile.
   Aucune ombre, aucun filet latéral, aucun fond sombre. Teal inchangé.
   ========================================================================== */

:root {
  --r-media: 24px;        /* grands médias : révélation, vidéo */
  --r-card: 20px;         /* cartes photo */
  --media-bg: #F4F5F6;    /* fond d'attente d'une image (gris très clair, neutre) */
}

/* Titre « à la Apple » : une phrase, Sora, 28–36 px. */
.say {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(28px, 2.2vw + 12px, 36px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
  max-width: 22ch;
}
.say .accent { color: var(--accent); }

/* ---------------------------------------------------- 1. Révélation produit */
/* v3.3 : .reveal__frame n'est plus utilisé par A.html. L'image recomposée
   (appareil-editeur-hd.webp) est remplacée par le kit _assets/device.css et la
   vraie capture _assets/cv/ecrans/cv-generateur-ordinateur.webp (voir le <style>
   v3.3 de A.html). Règles gardées pour la sauvegarde v3.2. */
.reveal { padding-block: var(--space-6) var(--space-8); }
.reveal + .section--ruled { border-top: 0; }
.reveal__head { text-align: center; }
.reveal__head .say { margin-inline: auto; max-width: 30ch; }
.reveal__head p { margin-top: var(--space-2); color: var(--muted); }
.reveal__stage { margin-top: var(--space-5); }
.reveal__frame {
  position: relative;
  /* Phrase + ordinateur tiennent ensemble dans un écran (fin du scrub) :
     largeur plafonnée à 1 000 px et à 72 % de la hauteur d'écran. */
  width: min(100%, 1000px, calc(72vh * 1.5));
  margin-inline: auto;
  aspect-ratio: 3 / 2;
  overflow: clip;
  border-radius: var(--r-media);
  background: #F8F8F8;          /* le fond de la photo : pas de liseré gris */
  transform-origin: 50% 40%;
}
/* Fichier recadré sur l'ordinateur et recomposé à 2 800 px : affiché à 100 %,
   net jusqu'à 1 400 px CSS sur écran Retina. */
.reveal__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------- 2. Moment vidéo */
.film {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-6);
  align-items: center;
}
.film__text > * + * { margin-top: var(--space-2); }
.film__text p { color: var(--muted); max-width: 34ch; }
.film__frame {
  position: relative;
  aspect-ratio: 1172 / 784;
  overflow: clip;
  border-radius: var(--r-media);
  background: var(--media-bg);
}
.film__frame video,
.film__frame > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Carrousel des vrais exports : une feuille au centre, deux sur les côtés,
   sur une photo floutée (la couleur vient de la photo, pas de l'interface). */
.film__stage { position: absolute; inset: 0; overflow: clip; }
.film__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film__sheet {
  --x: 0%;
  --s: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  aspect-ratio: 210 / 297;
  border-radius: 6px;
  overflow: clip;
  background: #FFFFFF;
  outline: 1px solid rgba(17, 24, 39, .06);
  transform: translate(-50%, -50%) translateX(var(--x)) scale(var(--s));
  transition: transform .9s cubic-bezier(.22, 1, .36, 1), opacity .45s ease;
}
.film__sheet img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.film__sheet[data-pos="0"] { --x: 0%;   --s: 1;   z-index: 3; }
.film__sheet[data-pos="1"] { --x: 82%;  --s: .78; z-index: 2; }
.film__sheet[data-pos="2"] { --x: -82%; --s: .78; z-index: 1; }
.film__sheet.is-wrap { opacity: 0; z-index: 0; }
.film__caption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.film__dots { display: inline-flex; gap: 6px; }
.film__dots i, .plans__dots i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #D1D5DB;
  transition: background var(--t) var(--ease), width var(--t) var(--ease);
}
.film__dots i.is-on, .plans__dots i.is-on { width: 18px; background: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .film__sheet { transition: none; }
}
.film__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin-top: var(--space-3);
  padding: 0 14px;
  border: 1px solid var(--btn-line, #D9DCE3);
  border-radius: 999px;
  background: var(--canvas);
  color: var(--text);
  font: 600 14px/1 var(--font-body);
  cursor: pointer;
  transition: border-color var(--t) var(--ease);
}
.film__toggle:hover { border-color: var(--accent); }
.film__toggle svg { width: 14px; height: 14px; }
.film__toggle .i-play { display: none; }
.film__toggle[aria-pressed="true"] .i-play { display: block; }
.film__toggle[aria-pressed="true"] .i-pause { display: none; }
@media (prefers-reduced-motion: reduce) {
  .film__toggle { display: none; }
}

/* ------------------------------------------------------------ 3. Chiffres */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
.stats li { display: flex; flex-direction: column; gap: 6px; }
.stats__n {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 72px;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stats__n--accent { color: var(--accent); }
.stats__l { font-size: 16px; color: var(--muted); }

/* ------------------------------------------------- 4. Ce que vous obtenez */
.gain {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "media head" "media list";
  grid-template-rows: auto 1fr;
  column-gap: var(--space-6);
  align-items: start;
}
.gain__head { grid-area: head; align-self: end; }
.gain__head > * + * { margin-top: var(--space-2); }
.gain__media { grid-area: media; align-self: center; }
.gain__list { grid-area: list; display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.gain__list li { display: flex; align-items: center; gap: 14px; }
.gain__list .tile__icon { flex: 0 0 44px; width: 44px; height: 44px; }
.gain__list b { font-family: var(--font-title); font-size: 19px; font-weight: 700; color: var(--ink); }
.fan--result { height: 470px; }
.fan--result .fan__sheet { width: 236px; }
.fan--result .fan__sheet:nth-child(1) { translate: -150px 18px; }
.fan--result .fan__sheet:nth-child(3) { translate: 150px 18px; }
.fan__tag {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 4;
  translate: -50% 0;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--canvas);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

/* ------------------------------------------------ 4 bis. Avant / après */
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  max-width: 900px;
}
.duo__panel {
  margin: 0;
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-radius: var(--r-media);
  background: var(--soft);
}
.duo__page {
  position: relative;
  width: min(100%, 300px);
  margin-inline: auto;
  aspect-ratio: 210 / 297;
  overflow: clip;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #FFFFFF;
}
.duo__page img, .duo__doc { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.duo__marks { position: absolute; inset: 0; width: 100%; height: 100%; }
.duo__panel figcaption { margin-top: var(--space-3); text-align: center; }
.duo__panel figcaption b { display: block; font-family: var(--font-title); font-size: 18px; font-weight: 700; color: var(--ink); }
.duo__panel figcaption span { display: block; margin-top: 2px; font-size: 15px; color: var(--muted); }

/* ----------------------------------------------------- 5. Galerie d'usages */
.uses {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.use { margin: 0; }
.use__img {
  aspect-ratio: 4 / 5;
  overflow: clip;
  border-radius: var(--r-card);
  background: var(--media-bg);
}
.use__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
.use:hover .use__img img { transform: scale(1.03); }
.use figcaption { margin-top: 14px; }
.use figcaption b {
  display: block;
  font-family: var(--font-title);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
}
.use figcaption span { display: block; margin-top: 2px; font-size: 15.5px; color: var(--muted); }
.use figcaption span b { display: inline; font: inherit; font-weight: 600; color: var(--text); }

/* Bande photo 21:9 qui ouvre « Pour qui » : la seule photo en couleur franche. */
.band { margin-bottom: var(--space-4); }
.band__media {
  aspect-ratio: 21 / 9;
  overflow: clip;
  border-radius: var(--r-media);
  background: var(--media-bg);
}
.band__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }

/* ------------------------------------------------- « Vos données », court */
.facts--short .fact p { margin-top: 2px; }
@media (min-width: 1001px) {
  .facts--short { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------ 6. Bandeau final visuel */
/* v3.3 : .cta-photo n'est plus utilisé par A.html. appareil-telephone-pdf.webp
   est remplacée par le téléphone du kit _assets/device.css et la vraie capture
   _assets/cv/ecrans/cv-apercu-pdf-telephone.webp (.cta-device, A.html). */
.cta-band--visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  text-align: left;
  padding: var(--space-6);
  border-radius: var(--r-media);
}
.cta-band--visual .actions { justify-content: flex-start; }
.cta-band--visual p.lead { margin-inline: 0; }
.fan {
  position: relative;
  height: 360px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fan__sheet {
  position: absolute;
  width: 190px;
  aspect-ratio: 210 / 297;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: clip;
  background: var(--canvas);
}
.fan__sheet img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* Rotation par la propriété « rotate » : elle se compose avec le transform
   du scrub (qui ne pilote que la montée) et survit à reduced-motion. */
.fan__sheet:nth-child(1) { rotate: -9deg; translate: -118px 14px; }
.fan__sheet:nth-child(2) { rotate: 0deg;  z-index: 2; }
.fan__sheet:nth-child(3) { rotate: 9deg;  translate: 118px 14px; }

.cta-photo__media {
  width: min(100%, 420px);
  margin-inline: auto;
  aspect-ratio: 4 / 5;
  overflow: clip;
  border-radius: var(--r-card);
  background: var(--media-bg);
}
.cta-photo__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

/* Points sous les offres : seulement quand elles défilent (mobile). */
.plans__dots { display: none; }

/* ------------------------------------------- Pages secondaires : visuel d'en-tête */
.head-visual {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--space-6);
  align-items: center;
}
.head-visual .page-head { max-width: none; }
.head-visual__media {
  aspect-ratio: 3 / 2;
  overflow: clip;
  border-radius: var(--r-card);
  background: var(--media-bg);
}
.head-visual__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ============================ Points de rupture ============================ */
@media (max-width: 1000px) {
  .film { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .film__media { order: -1; }
  .gain { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "media" "list"; }
  .gain__media { margin-top: var(--space-4); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-5); }
  .cta-band--visual { grid-template-columns: minmax(0, 1fr); }
  .cta-band--visual .fan,
  .cta-band--visual .cta-photo { order: -1; }
  .head-visual { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}

@media (max-width: 720px) {
  .reveal { padding-block: var(--space-4) var(--space-5); }
  .reveal__stage { margin-top: var(--space-4); }
  /* Mobile : on garde la gouttière de 16 px et les coins de 24 px pendant toute
     la mise à l'échelle ; l'ordinateur garde environ 30 px d'air de chaque côté. */
  .reveal__frame { width: 100%; }

  .film__frame { aspect-ratio: 1 / 1; }
  .film__sheet { width: 46%; }
  .film__sheet[data-pos="1"] { --x: 74%; --s: .76; }
  .film__sheet[data-pos="2"] { --x: -74%; --s: .76; }

  .fan--result { height: 300px; }
  .fan--result .fan__sheet { width: 150px; }
  .fan--result .fan__sheet:nth-child(1) { translate: -92px 12px; }
  .fan--result .fan__sheet:nth-child(3) { translate: 92px 12px; }

  .duo { gap: 10px; }
  .duo__panel { padding: 16px 12px 14px; border-radius: 20px; }
  .duo__panel figcaption { margin-top: 12px; }
  .duo__panel figcaption b { font-size: 15px; }
  .duo__panel figcaption span { font-size: 13.5px; }

  .band__media { aspect-ratio: 3 / 2; border-radius: 20px; }
  .band__media img { object-position: 42% 60%; }

  .cta-photo__media { aspect-ratio: 1 / 1; }

  .stats__n { font-size: 52px; }
  .stats__l { font-size: 15px; }

  .gain__list { gap: var(--space-2); }
  .gain__list b { font-size: 17px; }

  /* Galerie : défilement horizontal avec accroche, la carte suivante dépasse. */
  .uses {
    display: flex;
    gap: 14px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .uses::-webkit-scrollbar { display: none; }
  .use { flex: 0 0 76%; scroll-snap-align: start; }

  /* Grille des modèles : deux colonnes plutôt qu'une, la galerie se lit deux fois plus vite. */
  .models { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .model__body { padding: 10px 12px; }
  .model__name { font-size: 15px; }
  .model__body .chip { font-size: 12px; }

  /* Guides : même défilement à accroche que la galerie d'usages. */
  #guides .grid-3 {
    display: flex;
    gap: 14px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  #guides .grid-3::-webkit-scrollbar { display: none; }
  #guides .guide-card { flex: 0 0 80%; scroll-snap-align: start; }

  .cta-band--visual { padding: var(--space-5) var(--space-3); gap: var(--space-4); }
  .fan { height: 250px; }
  .fan__sheet { width: 132px; }
  .fan__sheet:nth-child(1) { translate: -82px 10px; }
  .fan__sheet:nth-child(3) { translate: 82px 10px; }
}

/* Guides en défilement mobile : la carte est plus étroite, l'extrait passe sur deux lignes au lieu d'être coupé. */
@media (max-width: 720px) {
  #guides .guide-card__excerpt { white-space: normal; -webkit-line-clamp: 2; line-clamp: 2; }
}

/* Tarifs et « Vos données » sur mobile : moins de hauteur de texte d'affilée.
   Les quatre offres passent en défilement à accroche (la suivante dépasse),
   comme la galerie d'usages ; les faits se resserrent. */
@media (max-width: 720px) {
  #tarifs .plans {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  #tarifs .plans::-webkit-scrollbar { display: none; }
  #tarifs .plan { flex: 0 0 78%; scroll-snap-align: start; }
  /* 24/09 : ordre du DOM partout (Gratuit, Premium, Premium Plus, All Access). */
  .plans__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
  }
  .plans__dots span { margin-left: 8px; font-size: 13px; color: var(--muted); }
  #tarifs .plan__flag--empty { display: block; }

  .facts--short { gap: 12px; }
  .facts--short .fact { padding: var(--space-2) var(--space-3); }
  .facts--short .h3 { font-size: 18px; }
}