/* ──────────────────────────────────────────────────────────────────────────
   Cadrage — wanda-studio.com · 6 octobre 2026 · v5

   Règle du dirigeant, sans exception : plus rien en plein écran. Ni photo,
   ni vidéo, ni section calée sur la hauteur de la fenêtre. Un média étiré à
   l'écran est pixelisé, le texte posé dessus est illisible, et les boutons
   qui flottent par-dessus se cliquent mal.

   Ce que fait cette feuille, gabarit par gabarit :
   — la section reprend sa hauteur naturelle et le fond de la page ;
   — le texte vient D'ABORD, en encre, lisible ;
   — le média vient ENSUITE, dans un cadre : 1180 px maximum, 16/9, coins à
     20, bordure fine, jamais étiré — exactement le langage des cartes
     studios, du diptyque et du bloc d'avis, que le dirigeant a validé ;
   — les voiles, vignettes et dégradés qui servaient à rendre le texte
     lisible sur la vidéo n'ont plus de raison d'être : masqués.

   Le markup n'est pas touché : l'ordre texte → média est obtenu par
   `order` sur un conteneur flex. Les clés data-i18n des pages EN et DE
   restent donc exactement où elles sont.

   Liée en DERNIER dans le <head> des pages concernées — 28 pages. PAS sur
   l'accueil ni sur Agence : le dirigeant a tranché le 06/10 au soir que ces
   deux heros vidéo restent PLEIN ÉCRAN, comme avant. Le bloc tarif de
   l'accueil a sa propre feuille, wanda-cadre-tarif.css.

   v4 — pourquoi tant de !important : trois choses contournaient la v3.
   1. L'accueil pose `.hero-video-mobile { width/height: 100% !important }`
      sous 768 px : seul un !important plus spécifique le bat.
   2. La parallaxe de l'accueil écrit `style="transform: translateY(…%)"`
      sur la vidéo à chaque défilement : seul `transform: none !important`
      bat un style en ligne.
   3. Les sélecteurs :has() ne sont plus utilisés pour les règles critiques :
      `.hero` est unique sur chacune des 34 pages liées (vérifié le 06/10),
      un navigateur sans :has() recevait sinon une feuille à moitié vide.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Le cadre, commun à tous les médias ─────────────────────────────────── */
.hero-media, .hero-bg-saleve, .hero-bg-rhone,
.wp-vivante > picture,
.hero > .bg-img {
  position: relative !important;
  inset: auto !important; top: auto !important; left: auto !important;
  right: auto !important; bottom: auto !important;
  z-index: auto !important; order: 2;
  display: block; width: 100% !important; max-width: 1180px !important;
  height: auto !important; min-height: 0 !important; max-height: none !important;
  margin: 40px auto 0;
  aspect-ratio: 16 / 9;
  border-radius: 20px; overflow: hidden;
  border: 1px solid var(--border, #D3CFC8);
  background: #111111;
  opacity: 1 !important; transform: none !important;
  clip-path: inset(0 round 20px);
}
.hero-media video, .hero-media img,
.hero-bg-saleve video, .hero-bg-rhone video,
.wp-vivante > picture img {
  position: absolute !important;
  inset: 0 !important; top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  min-width: 0 !important; min-height: 0 !important; max-width: none !important;
  object-fit: cover; object-position: center;
  opacity: 1 !important; transform: none !important; border-radius: 0;
}
.hero > .bg-img { object-fit: cover; }

/* ── Création site web : .hero-bg est un div VIDE ────────────────────────────
   <div class="hero-bg"></div> n'y porte qu'un dégradé : il se tait, c'est
   l'image .bg-img qui porte le cadre. (L'accueil a aussi ce div, mais
   l'accueil n'est plus lié à cette feuille : son hero est plein écran.) */
.hero > .hero-bg { display: none !important; }

/* ── Les voiles : plus rien à rendre lisible par-dessus une vidéo ───────── */
.hero-overlay, .hero-veil, .hero-photo-overlay, .hero-vignette,
.bg-overlay, .page-grain, .hero-tc { display: none !important; }

/* ── La section : hauteur naturelle, fond de page, texte puis média ──────── */
.hero,                            /* réservation, projets, création site web, landing */
.page-hero, .hero-w,
.pf section.pf-hero, .sw section.sw-hero {
  position: relative !important; top: auto;
  height: auto !important; min-height: 0 !important; max-height: none !important;
  display: flex !important; flex-direction: column !important;
  align-items: stretch; justify-content: flex-start;
  padding: 132px 48px 72px;
  overflow: visible !important; isolation: auto;
  background: var(--bg, #E6E3DE);
  color: var(--encre, #111111);
}
.sw section.sw-hero { z-index: auto; }
.sw-hero .in, .pf-hero .in { min-height: 0 !important; padding-top: 0 !important; }

/* ── Le bloc de texte : premier, centré dans la même largeur que le cadre ── */
.hero-body, .hero-in, .hero-content,
.hero-inner, .hero-w-in, .pf-hero .in, .sw-hero .in,
.hero > .card {
  order: 1; position: relative !important; z-index: auto;
  inset: auto !important; top: auto !important; left: auto !important;
  width: 100%; max-width: 1180px !important;
  margin: 0 auto; padding: 0 !important;
  height: auto !important; flex: none;
  text-align: left;
}
.hero-body { display: block; }
.sw-hero .in, .pf-hero .in { align-items: center; text-align: center; }
.hero > .card { max-width: 720px !important; align-items: flex-start; text-align: left; }

/* ── Le texte des heros qui étaient blancs sur vidéo passe en encre ──────── */
.hero-title, .page-title,
.hero > .hero-inner h1 {
  color: var(--encre, #111111) !important;
  background: none !important; -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important; text-shadow: none;
}
.hero-sub-mob, .page-sub, .hero-prix, .hero-meta-item { color: var(--gray, #5F5B56) !important; }
.hero-kicker, .page-eyebrow, .hero-proof-mob { color: var(--rouge, #FF2A1A) !important; }
.hero-meta-item .dot { background: var(--rouge, #FF2A1A); }


/* ── Production vidéo : deux boucles côte à côte, chacune dans son cadre ─── */
.hero-bg-rhone:has(.hero-duo) {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  aspect-ratio: auto; border: 0; background: none; overflow: visible; border-radius: 0;
  clip-path: none;
}
.hero-bg-rhone:has(.hero-duo) .hero-duo {
  position: relative !important; inset: auto !important; aspect-ratio: 16 / 9;
  width: 100% !important; height: auto !important;
  border-radius: 20px; overflow: hidden; border: 1px solid var(--border, #D3CFC8);
  background: #111111; opacity: 1 !important; clip-path: inset(0 round 20px);
}

/* ── Portfolio : les « slots » reprennent leur hauteur naturelle ─────────── */
.pf-slot { height: auto !important; }
.pf-magnet { margin-top: 36px; width: min(1180px, 100%); }
.pf-frame { border-radius: 20px; border-bottom: 1px solid var(--border, #D3CFC8); }

/* ── Photo « en cours de session » des pages studio ──────────────────────── */
.wp-vivante { padding: 72px 48px 24px; }
.wp-vivante > picture { margin-top: 0; aspect-ratio: 16 / 9; }
.wp-vivante .wp-cap { max-width: 1180px; margin: 14px auto 0; }

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .hero, .page-hero, .hero-w,
  .pf section.pf-hero, .sw section.sw-hero {
    padding: 104px 20px 56px;
  }
  .hero-media, .hero-bg-saleve, .hero-bg-rhone,
  .wp-vivante > picture, .hero > .bg-img,
  .hero-bg-rhone:has(.hero-duo) .hero-duo {
    margin-top: 28px; border-radius: 16px; clip-path: inset(0 round 16px);
  }
  .hero-bg-rhone:has(.hero-duo) { grid-template-columns: 1fr; gap: 12px; clip-path: none; }
  .wp-vivante { padding: 56px 20px 18px; }
  .hero-body { padding: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-media video, .hero-bg-saleve video, .hero-bg-rhone video { display: none !important; }
}