/* =============================================================================
   SEO by Belentia — v3.2 « visuels » (23/09/2026), complétée en v3.3
   « appareils » (bloc en fin de feuille, avec _assets/device.css).
   Chargée après la feuille de la page : elle n'ajoute que les blocs d'images,
   la vidéo en boucle, la galerie d'usages et le bandeau de chiffres.
   Règles tenues : aucune ombre CSS, aucun texte posé sur une image, coins
   24 px (grands visuels) ou 20 px (cartes photo), violet inchangé (touches).
   ========================================================================== */

/* Cadre commun des visuels : fond neutre pendant le chargement, rien d'autre. */
.vis {
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  background: #F3F4F6;
}
.vis > img,
.vis > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------ Révélation du produit --------------------------- */
.reveal { padding-top: var(--space-8); }
.reveal__head {
  max-width: 760px;
  margin: 0 auto var(--space-5);
  text-align: center;
}
.reveal__head .eyebrow { margin-inline: auto; }
.reveal__title {
  margin-top: var(--space-2);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
}
.reveal__media {
  max-width: 1100px;
  margin: 0 auto;
  transform-origin: 50% 20%;
}

.perks {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: var(--space-3) var(--space-8);
  margin-top: var(--space-5);
}
.perks li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
}
.perks .card__icon { flex: 0 0 auto; }

/* --------------------------- Moment vidéo --------------------------------- */
.loupe__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-8);
  align-items: center;
}
.loupe__frame { aspect-ratio: 3 / 2; background: #EFEFEF; }
.loupe__text .h2 { margin-top: var(--space-2); }
.loupe__line { margin-top: 12px; font-size: 19px; line-height: 1.5; color: var(--text); max-width: 34ch; }

/* Bandeau de chiffres réels, en grand. */
.bignums {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.bignum__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;
}
.bignum__l { display: block; margin-top: 10px; font-size: 16px; color: var(--muted); }

/* ------------------- En-tête accompagné d'un visuel ----------------------- */
.head-vis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: var(--space-6);
  align-items: center;
  margin-bottom: var(--space-6);
}
.head-vis .section-head { margin-bottom: 0; }
.head-vis .vis { aspect-ratio: 3 / 2; }

/* ---------------------------- Galerie d'usages ---------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.shot { margin: 0; }
.shot__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 20px;
  background: #EEF0F3;
}
.shot__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.shot:hover .shot__media img { transform: scale(1.03); }
.shot figcaption { margin-top: 14px; }
.shot__t { display: block; font-family: var(--font-title); font-weight: 700; font-size: 19px; line-height: 1.3; color: var(--ink); }
.shot__d { display: block; margin-top: 4px; font-size: 16px; color: var(--muted); }

/* ------------------------ Bandeau final avec visuel ----------------------- */
.cta-band--vis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-6);
  text-align: left;
}
.cta-band--vis .audit-field { margin-inline: 0; }
.cta-band--vis .ticks-row { justify-content: flex-start; }
.cta-band--vis .vis { aspect-ratio: 3 / 2; border-radius: 20px; }

/* ----------------------------- Téléphone ---------------------------------- */
@media (max-width: 900px) {
  .loupe__grid,
  .head-vis,
  .cta-band--vis { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .cta-band--vis .vis { order: -1; }
  .bignums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-3); }
}
@media (max-width: 720px) {
  .reveal { padding-top: var(--space-6); }
  .reveal__title { font-size: 28px; }
  .perks { grid-template-columns: minmax(0, max-content); gap: var(--space-2); }
  .loupe__frame { border-radius: 20px; }
  .loupe__line { font-size: 17px; }
  .bignum__n { font-size: 46px; }
  .bignum__l { font-size: 15px; }
  .head-vis .vis { aspect-ratio: 16 / 10; border-radius: 20px; }
  /* Galerie : défilement horizontal avec accroche. */
  .gallery {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .gallery::-webkit-scrollbar { display: none; }
  .shot { flex: 0 0 78%; scroll-snap-align: start; }
  .shot__t { font-size: 18px; }
  .cta-band--vis { padding: var(--space-3) var(--space-3) var(--space-5); }
}
@media (prefers-reduced-motion: reduce) {
  .shot__media img { transition: none; }
  .shot:hover .shot__media img { transform: none; }
}


/* « Ce que l'audit ne mesure pas » : pictogramme + quelques mots. */
.scope--compact { margin-top: var(--space-5); }
.scope__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
}
.scope__grid li { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.scope__grid svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--muted); }
.scope__note { margin-top: var(--space-2); font-size: 15px; color: var(--muted); }
@media (max-width: 1024px) { .scope__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .scope__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } }


/* Téléphone : « Vos données » en liste légère, offres plus compactes —
   on ne reste jamais plus d'un écran et demi sans image. */
@media (max-width: 720px) {
  #donnees .facts { gap: 0; }
  #donnees .fact { padding: 14px 0; border: 0; border-radius: 0; background: transparent; gap: var(--space-2); }
  #donnees .fact + .fact { border-top: 1px solid var(--line); }
  #tarifs .plan { padding: 20px; gap: 12px; }
  #tarifs .plan .ticks { gap: 10px; }
  #tarifs .grid-2 { gap: var(--space-2); }
  #tarifs .section-head { margin-bottom: var(--space-4); }
}

/* v3.2 (contrôle) — Téléphone : les deux offres l'une sous l'autre, le Pass Pro
   d'abord ; aucune carte n'est étirée (plus de vide entre liste et bouton). */
@media (max-width: 720px) {
  #tarifs .grid-2 { align-items: start; }
  #tarifs .grid-2 > .plan { height: auto; }
  #tarifs .grid-2 > .plan--featured { order: -1; }
  #tarifs .plan .btn { margin-top: var(--space-1); }
  /* Carte Gratuit compacte : nom et prix sur la même ligne ; « sans carte,
     sans compte » est déjà dit par « sans inscription » et le bandeau final. */
  #tarifs .plan:not(.plan--featured) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: var(--space-2);
    padding: 18px 20px;
  }
  #tarifs .plan:not(.plan--featured) > :not(.h3):not(.plan__price) { grid-column: 1 / -1; }
  #tarifs .plan:not(.plan--featured) .plan__foot { display: none; }
  #tarifs .plan .ticks { gap: 8px; }
  /* Section plus serrée, un seul lien sous les offres (l'accompagnement reste
     dans le détail des offres, tarifs.html). */
  #tarifs.section { padding-block: 48px; }
  #pour-qui.section { padding-bottom: 48px; }
  #guides.section { padding-top: 48px; }
  #tarifs .small:has(a[href*="contact"]) { display: none; }
}

/* =============================================================================
   v3.2 — corrections du contrôle (23/09/2026)
   ========================================================================== */

/* Recadrage précis d'une photo dans son cadre : l'image est placée en
   pourcentage du cadre (--w largeur, --l et --t décalages). Fonctionne partout,
   sans object-view-box. */
.crop { position: relative; }
.crop > img {
  position: absolute;
  max-width: none;
  width: var(--w, 100%);
  height: auto;
  left: var(--l, 0%);
  top: var(--t, 0%);
  object-fit: fill;
}

/* Visuel « qui flotte » : pas de carte grise, le fond de la photo se fond dans
   la section par un masque radial (ni ombre, ni bordure). */
.vis--float {
  background: transparent;
  border-radius: 0;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 72%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 72%, transparent 100%);
}

#obtenir { overflow-x: clip; }

/* Moment vidéo — pleine largeur du conteneur, titre et ligne dessous, centrés. */
.loupe__stack { display: grid; gap: var(--space-5); }
.loupe__stack .loupe__frame { aspect-ratio: 16 / 9; }
.loupe__stack .loupe__frame > video { object-position: 50% 45%; }
.loupe__stack .loupe__text { max-width: 640px; margin-inline: auto; text-align: center; }
.loupe__stack .loupe__text .eyebrow { margin-inline: auto; }
.loupe__stack .loupe__line { margin-inline: auto; }
@media (max-width: 720px) {
  .loupe__stack { gap: var(--space-3); }
  .loupe__stack .loupe__frame { aspect-ratio: 3 / 2; }
}

/* Bandeau de chiffres : même hauteur de chiffre partout, légendes alignées. */
.bignums li { display: flex; flex-direction: column; justify-content: flex-start; }
.bignum__n { height: 1.15em; line-height: 1.15; }

/* Galerie d'usages — ordinateur : l'atelier en grand (2 colonnes sur 4), puis
   deux photos 4:5 de même hauteur. */
@media (min-width: 721px) {
  .gallery { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .shot--wide .shot__media { aspect-ratio: 8 / 5; }
}
.shot__media { position: relative; }
.shot--wide .shot__media img,
.shot--sheet .shot__media img {
  position: absolute;
  max-width: none;
  height: auto;
  object-fit: fill;
}
/* Atelier : l'intérieur boisé (fenêtre 960 × 600 de la photo). */
.shot--wide .shot__media img { width: 187.5%; left: -66.7%; top: -38.3%; transform-origin: 62% 47%; }
/* Indépendant : la feuille annotée et le stylo violet (fenêtre 560 × 700). */
.shot--sheet .shot__media img { width: 321.4%; left: -208.9%; top: -42.9%; transform-origin: 80% 54%; }
@media (max-width: 720px) {
  .shot--wide .shot__media img { width: 300%; left: -126.7%; top: -24%; transform-origin: 59% 45%; }
}
/* Pastille de constat réel, sous la photo (jamais dessus). */
.shot__f {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.shot__f .sev { flex: 0 0 auto; }

/* Explorateur — téléphone : une ligne par description, ouverte au toucher. */
@media (max-width: 720px) {
  .vcheck .check__why {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  .vcheck.is-open .check__why { display: block; -webkit-line-clamp: unset; }
  .vcheck[data-clamped] { cursor: pointer; }
}

/* En-tête du blog : vignette de 96 px à côté du titre sur téléphone. */
@media (max-width: 720px) {
  .head-vis--thumb {
    grid-template-columns: minmax(0, 1fr) 96px;
    align-items: start;
    gap: var(--space-2);
  }
  .head-vis--thumb .vis { aspect-ratio: 1 / 1; border-radius: 16px; }
  .head-vis--thumb .vis > img { object-position: 0% 40%; }
}

/* =============================================================================
   v3.3 — appareils (23/09/2026)
   Les photos d'appareils composites (appareil-rapport.webp) sont remplacées par
   le kit partagé _assets/device.css : téléphone et ordinateur dessinés en CSS,
   vraies captures du rapport d'audit dans l'écran (_assets/seo/ecrans/).
   Appareil toujours entier : ni masque, ni recadrage, ni rotation, ni flou.
   ========================================================================== */

/* Barre d'état du téléphone : le fond réel de l'app (#F4F3F8), pas du blanc. */
.dv--phone { --dv-status-bg: #F4F3F8; }

/* Révélation de l'accueil : le duo à 1040 px au plus, centré. */
.reveal__media .dv-duo { --dv-duo-w: 1040px; }

/* Tarifs : l'ordinateur dans la colonne de l'en-tête ; sur téléphone, le
   téléphone passe après les offres (les prix restent dans le premier écran). */
.head-vis__device { display: flex; justify-content: center; }
.head-vis__device .dv--laptop { --dv-w: 520px; }
.plans-device { margin-top: var(--space-6); text-align: center; }
.plans-device__cap { margin-top: var(--space-4); font-size: 15px; line-height: 1.5; color: var(--muted); }
@media (max-width: 900px) {
  .head-vis__device .dv--laptop { --dv-w: 600px; }
}

/* Ordinateur ou duo au-dessus de 720 px ; téléphone seul en dessous : classes
   .dv-only-desktop / .dv-only-mobile du kit (device.css, en !important).
   Boucle 4 : leur copie dans la page, que DEVICE.md demande de ne pas
   redéfinir, est retirée. */