/* =============================================================================
   Mot de passe by Belentia — v3.2 « visuels » (22/09/2026)
   -----------------------------------------------------------------------------
   Chargée APRÈS affine.css sur A.html, blog.html et tarifs.html.
   v3.3 (23/09/2026) : les photos composites du téléphone (.phone-shot, masques,
   fondus, recadrages) sont retirées. Les appareils sont dessinés par le kit
   _assets/device.css avec de vraies captures ; leur mise en page est dans
   _assets/motdepasse/v33.css.
   Elle n'ajoute que des blocs d'image : moment vidéo, galerie d'usages,
   bandeau large, grands chiffres, visuel d'en-tête du blog.
   Règles tenues : aucune ombre CSS, aucun texte posé sur une image ou une
   vidéo, coins 24 px (grands médias) et 20 px (cartes), pas d'orange ajouté
   hors des pastilles d'icônes déjà présentes en v3.1.
   ========================================================================== */

:root {
  --stage: #FAFAFA;          /* fond des photos du produit (mesuré sur l'image) */
  --r-media: 24px;
  --r-card: 20px;
}

/* ---------------------------------------------------------------------------
   2. Moment vidéo : les dés (boucle muette, lue seulement à l'écran)
      Boucle 3 (23/09/2026) : plus affiché (A.html montre la section ambiance
      du kit _assets/ambiance.css à sa place) ; règles gardées pour mémoire.
   ------------------------------------------------------------------------ */
.film__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr);
  gap: var(--space-6);
  align-items: center;
}
.film__frame {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--stage);
  border-radius: var(--r-media);
}
.film__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.film__text > * + * { margin-top: var(--space-2); }
.film__text p:not(.eyebrow) { color: var(--muted); font-size: 17px; }

/* ---------------------------------------------------------------------------
   3. Galerie d'usages : cartes photo, rail à accroche sur mobile
   ------------------------------------------------------------------------ */
.uses__rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.use__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--stage);
  border-radius: var(--r-card);
}
.use__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Clé en papier : petite dans le cadre, on la rapproche (source 1 800 px, reste nette). */
.use__media--zoom img { transform: scale(1.9); transform-origin: 50% 35%; }
.use h3 { margin-top: var(--space-2); font-size: 19px; }
.use p { margin-top: 4px; font-size: 15px; color: var(--muted); }
.use .link-arrow { margin-top: 2px; font-size: 15px; }

/* ---------------------------------------------------------------------------
   4. Bandeau large (cadenas) en tête de « Vos données »
   ------------------------------------------------------------------------ */
.band {
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--stage);
  border-radius: var(--r-media);
}
.band img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
}
.band-wrap { margin-bottom: var(--space-6); }
.facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------------------------------------------------------------------------
   5. Grands chiffres (faits réels du code)
   ------------------------------------------------------------------------ */
.numbers { padding-block: var(--space-8); border-top: 1px solid var(--line); }
.numbers__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
.num__value {
  display: block;
  font-family: var(--font-title);
  font-size: clamp(48px, 5.6vw, 72px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.num__value.is-accent { color: var(--accent); }
.num__label { display: block; margin-top: var(--space-1); font-size: 15px; line-height: 1.45; color: var(--muted); }

/* ---------------------------------------------------------------------------
   7. Pages secondaires : visuel d'en-tête
   ------------------------------------------------------------------------ */
.head-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}
.head-visual {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--stage);
  border-radius: var(--r-media);
}
.head-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* ---------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .numbers__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
}
@media (max-width: 900px) {
  .film__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .head-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}
@media (max-width: 720px) {
  /* Vidéo pleine largeur, carrée : les dés (centrés dans la source) remplissent l'écran. */
  .film__frame {
    aspect-ratio: 1 / 1;
    margin-inline: calc(-1 * var(--gutter));
    border-radius: 0;
  }
  .facts--3 { grid-template-columns: minmax(0, 1fr); }

  .band { aspect-ratio: 4 / 3; }
  .band-wrap { margin-bottom: var(--space-4); }

  /* Rail horizontal à accroche : la carte suivante dépasse pour inviter au geste. */
  .uses__rail {
    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);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .uses__rail::-webkit-scrollbar { display: none; }
  .use { flex: 0 0 82%; scroll-snap-align: start; }
  /* v3.3 : cartes carrées (4:5 en v3.2). En carré, chaque photo garde son sujet
     entier : les mains et le téléphone, la clé en papier, et tout le trousseau
     (anneau compris) — le gros plan ×1,3 de la v3.2 coupait l'anneau et les clés. */
  .use__media { aspect-ratio: 1 / 1; }
  .use__media img { object-position: var(--pos, 50% 50%); }
  /* Clé en papier : le bord flou de la feuille (70 % de la hauteur) sort du cadre. */
  .use__media--zoom img { transform: scale(1.5); transform-origin: 50% 10%; }

  .numbers { padding-block: var(--space-6); }
  .num__value { font-size: 48px; }
  .num__label { font-size: 14px; }
}