/* =============================================================================
   Transcriptor — v3.2 « visuels », 22/09/2026 (révision v3.2b après contrôle)
   -----------------------------------------------------------------------------
   Chargée APRÈS v31.css. Ajoute les moments image de la page produit sans rien
   retirer de la v3.1 (couleurs, animations, démos) :

     1. Révélation produit : l'ordinateur et le vrai éditeur, posé sur le blanc
        de la page (fond de photo ramené au blanc pur), qui grandit au défilement.
     2. Moment animé : l'onde qui avance et se resserre, puis quatre phrases
        horodatées qui arrivent l'une après l'autre, dans un cadre bleu 9 %.
     3. Usages en photos : une grande photo pleine largeur (21:9) et deux
        moyennes ; défilement à accroche sur mobile.
     4. Objets détourés (« seat ») : fond de photo blanc pur + multiply, l'objet
        se pose sur la couleur de la section ou sur un fond bleu 9 %, sans cadre gris.
     5. Engagements en pictogramme + 3 mots, grands chiffres, bandeau final illustré.

   Règles tenues : aucune ombre CSS, aucun texte posé sur une image, coins
   24 px (grands visuels) et 20 px (cartes photo), accent inchangé.
   ========================================================================== */

:root {
  --r-media: 24px;       /* grands visuels : révélation, moment, photo large, bandeau final */
  --r-card: 20px;        /* cartes photo */
  --media-bg: #F4F5F6;   /* fond d'attente des photos, visible au chargement seulement */
  --tint-9: color-mix(in srgb, var(--accent) 9%, #FFF);   /* tuiles validées : 9 % */
}
@supports not (color: color-mix(in srgb, #000 8%, #fff)) {
  :root { --tint-9: #EBF1FD; }
}

/* Photo : bloc, coins, fond d'attente neutre. */
.media {
  display: block;
  overflow: hidden;
  overflow: clip;
  background: var(--media-bg);
}
.media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Objet détouré : le fond blanc pur de la photo se fond dans la couleur posée
   derrière (multiply). Les ombres naturelles de la photo restent. */
.seat {
  display: block;
  overflow: hidden;
  overflow: clip;
  background: transparent;
}
.seat img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.seat--tint { background: var(--tint-9); border-radius: var(--r-media); }

/* -----------------------------------------------------------------------------
   1. Révélation produit — juste après le hero
   -------------------------------------------------------------------------- */
.reveal { padding-block: var(--space-2) var(--space-6); }
.reveal__title {
  max-width: 820px;
  margin: 0 auto var(--space-4);
  text-align: center;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
}
.reveal__title .soft { color: #8A909C; }
.reveal__fig {
  margin: 0;
  transform-origin: 50% 0;
  will-change: transform;
}
.reveal__fig img { display: block; width: 100%; height: auto; }

/* -----------------------------------------------------------------------------
   2. Moment animé : le son devient texte
   -------------------------------------------------------------------------- */
.moment__grid { display: block; }
.moment__text { margin-bottom: var(--space-5); }
.moment__frame {
  position: relative;
  padding: 56px 64px;
  border-radius: var(--r-media);
  background: var(--tint-9);
}
.moment__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  max-width: 1000px;
  margin-inline: auto;
}
.moment__wave { display: block; width: 100%; height: auto; overflow: visible; }
.moment__strands path { stroke: var(--accent); }
.moment__strands path:nth-child(1) { stroke-width: 3.2; }
.moment__strands path:nth-child(2) { stroke-width: 2.6; opacity: .7; }
.moment__strands path:nth-child(3) { stroke-width: 2.2; opacity: .5; }
.moment__strands path:nth-child(4) { stroke-width: 2;   opacity: .36; }
.moment__strands path:nth-child(5) { stroke-width: 1.8; opacity: .24; }
.moment__node { fill: var(--accent); }
.moment__halo {
  fill: var(--accent);
  opacity: .16;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 380ms var(--ease), opacity 380ms var(--ease);
}
.moment__halo.is-pulse { transform: scale(1.6); opacity: .28; }

.moment__doc {
  padding: 16px 16px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--canvas);
}
.moment__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0 6px 10px;
  border-bottom: 1px solid var(--line);
}
.moment__file { font-family: var(--font-title); font-weight: 700; font-size: 14px; color: var(--ink); }
.moment__lines { margin-top: 8px; }
.moment__lines li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 8px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  transition: background-color 300ms linear, opacity 420ms var(--ease), transform 420ms var(--ease);
}
.moment__lines .out__t { flex: 0 0 auto; }
.moment__txt { transition: clip-path 700ms var(--ease); }

/* Pendant la lecture (classe posée par v32.js) : chaque ligne arrive à son tour. */
.moment__frame.is-live .moment__lines li { opacity: 0; transform: translateY(6px); }
.moment__frame.is-live .moment__lines li .moment__txt { clip-path: inset(0 100% 0 0); }
.moment__frame.is-live .moment__lines li.is-in { opacity: 1; transform: none; }
.moment__frame.is-live .moment__lines li.is-in .moment__txt { clip-path: inset(0 0 0 0); }
.moment__frame.is-live .moment__lines li.is-now { background: var(--hl); color: var(--ink); }
.moment__frame.is-live.is-out .moment__lines li { opacity: 0; transition-duration: 380ms; }



/* Bouton lecture / pause : icône seule, dans le coin, jamais de texte sur l'image. */
.vbtn {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--canvas);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--t) var(--ease);
}
.vbtn:hover { border-color: var(--line-strong); }
.vbtn svg { width: 14px; height: 14px; }
.vbtn .i-play { display: none; }
.moment__frame.is-paused .vbtn .i-play { display: block; }
.moment__frame.is-paused .vbtn .i-pause { display: none; }
.moment__frame.is-static .vbtn { display: none; }

/* -----------------------------------------------------------------------------
   3. Usages en photos : une grande pleine largeur, deux moyennes
   -------------------------------------------------------------------------- */
.wide { margin: 0 0 var(--space-4); }
.wide__media { border-radius: var(--r-media); aspect-ratio: 21 / 9; }
.wide__media img { object-position: 50% 58%; transform-origin: 50% 50%; }
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.gcard { margin: 0; }
.gcard__media { border-radius: var(--r-card); aspect-ratio: 3 / 2; }
.gcap__t {
  margin-top: var(--space-2);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}
.gcap__s { margin-top: 2px; font-size: 15px; color: var(--muted); }

/* -----------------------------------------------------------------------------
   4. « Ce que vous obtenez » : trois atouts en trois mots sous la capture
   -------------------------------------------------------------------------- */
.perks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-5);
}
.perks li,
.pledges li {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}
.perks__i {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--canvas);
  border: 1px solid var(--line);
  color: var(--accent);
}
.perks__i svg { width: 20px; height: 20px; }
/* Sur ordinateur, les trois étiquettes posées sur la capture disent déjà ces
   atouts : la rangée ne s'affiche que sur mobile, où les étiquettes sont masquées. */
@media (min-width: 901px) { .perks { display: none; } }

/* Vos données : trois engagements, pictogramme + trois mots, sans cartes. */
.pledges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-5);
}

/* -----------------------------------------------------------------------------
   5. Bandeau de faits en grands chiffres (uniquement des faits vrais)
   -------------------------------------------------------------------------- */
.bigfacts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  text-align: center;
}
.bigfacts__n {
  display: block;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bigfacts__u { font-size: .45em; letter-spacing: 0; color: var(--ink); }
.bigfacts__l { display: block; margin-top: var(--space-1); font-size: 15px; line-height: 1.45; color: var(--muted); }

/* -----------------------------------------------------------------------------
   6. Respiration : objet posé à côté d'un titre
   -------------------------------------------------------------------------- */
.aside-head {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: var(--space-6);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto var(--space-6);
}
.aside-head .section-head { margin: 0; text-align: left; }
.aside-head__media { aspect-ratio: 1800 / 734; }

/* -----------------------------------------------------------------------------
   7. Bandeau final illustré
   -------------------------------------------------------------------------- */
.final--visual .final__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}
.final--visual .final__inner { max-width: none; margin: 0; text-align: left; }
.final--visual .actions { justify-content: flex-start; }
.final__media { aspect-ratio: 5 / 4; padding: 5% 8%; }

/* -----------------------------------------------------------------------------
   8. Pages secondaires : visuel d'en-tête
   -------------------------------------------------------------------------- */
.head-visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}
.head-visual__media { border-radius: var(--r-media); aspect-ratio: 3 / 2; }

/* -----------------------------------------------------------------------------
   9. Parcours : sans les légendes d'étape (redites des nœuds), le sous-titre
   court de chaque nœud reste affiché dans la scène dépliée.
   -------------------------------------------------------------------------- */
.pscene.is-static .pnode__s { display: block; }

/* -----------------------------------------------------------------------------
   10. Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .moment__grid,
  .aside-head,
  .final--visual .final__split,
  .head-visual { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .aside-head .section-head { text-align: center; }
  .bigfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-5); }
}

@media (max-width: 720px) {
  .reveal { padding-bottom: var(--space-5); }
  .reveal__title { font-size: 28px; margin-bottom: var(--space-3); }
  /* Pleine largeur sur mobile : l'ordinateur remplit l'écran, sans bande grise
     (le fond de la photo est le blanc de la page). */
  .reveal .container { padding-inline: 0; }
  .reveal__title { padding-inline: var(--gutter); }

  .moment__text { margin-bottom: var(--space-4); }
  .moment__frame { padding: 20px 16px 60px; border-radius: var(--r-card); }
  .moment__stage { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .moment__lines li { font-size: 14px; padding: 7px 4px; }
  .vbtn { right: 12px; bottom: 12px; }

  .wide { margin-bottom: var(--space-3); }
  .wide__media { border-radius: var(--r-card); aspect-ratio: 16 / 10; }

  /* Deux cartes photo : défilement horizontal à accroche, la suivante dépasse. */
  .gallery {
    display: flex;
    gap: 12px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .gallery::-webkit-scrollbar { display: none; }
  .gcard { flex: 0 0 82%; scroll-snap-align: start; }
  .gcap__t { font-size: 17px; }

  /* « Ce que vous obtenez » : gros plan lisible sur la colonne Transcription,
     fondu à droite là où la ligne continue. */
  .browser--zoom img { -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); }

  .perks,
  .pledges { flex-direction: column; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
  .perks li,
  .pledges li { width: 292px; font-size: 16px; }

  .bigfacts__n { font-size: 48px; }
  .bigfacts__l { font-size: 14px; }

  .aside-head { margin-bottom: var(--space-4); }

  /* Offres : trois cartes qu'on fait glisser ; au chargement, la carte Pro
     (recommandée) est centrée, Gratuit et Business dépassent de chaque côté. */
  .plans--snap {
    display: flex;
    gap: 12px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 2px var(--gutter) 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .plans--snap::-webkit-scrollbar { display: none; }
  .plans--snap > .plan { flex: 0 0 80%; scroll-snap-align: center; height: auto; }
  .snap-hint { display: block; margin-top: var(--space-2); text-align: center; font-size: 14px; color: var(--muted); }

  .final__wrap { order: -1; }
  .final__media { aspect-ratio: 4 / 3; border-radius: var(--r-card); }
  .final--visual .final__inner { text-align: center; }
  .final--visual .actions { justify-content: center; }
}

.snap-hint { display: none; }

/* Captures et animations réduites : tout est à sa place d'arrivée. */
@media (prefers-reduced-motion: reduce) {
  .reveal__fig { will-change: auto; }
  .moment__halo { transition: none; }
}

/* Guides : la carte entière est le lien, plus de « Lire le guide » répété. */
.guide-card__go { display: none; }

/* Boucle 5 (contre-critique 4) : fondu droit allongé (70 → 98 %) : les lignes du ruban
   s'effacent au lieu d'être tranchées au bord du cadre.
   Ruban : il sort de la photo à gauche ; un fondu sur les bords évite la coupe franche.
   v3.3, boucle 2 : l'ombre de sol grise était coupée net au bas de l'image (marche
   de 4 à 6 niveaux, visible sur le fond gris) ; un second fondu, vertical, la
   fait disparaître dans le fond. Les deux masques se combinent (intersection). */
.seat--ruban img {
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 16%, #000 70%, transparent 98%),
    linear-gradient(180deg, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 16%, #000 70%, transparent 98%),
    linear-gradient(180deg, #000 78%, transparent 100%);
  mask-composite: intersect;
}

/* En-têtes de pages secondaires avec un objet détouré : pas de cadre, l'objet se pose. */
.head-visual__media.seat { border-radius: 0; aspect-ratio: 4 / 3; }
@media (max-width: 720px) {
  .head-visual__media.seat { aspect-ratio: auto; height: 220px; }
}

/* Objet détouré dans une bande grise : le fond du cadre prend le gris de la bande. */
.section--soft .seat { background: var(--soft); }