/*
 * Vidéo de présentation des 4 apps en en-tête de la page d'accueil (videos/accueil-quatre-apps.mp4, 4:5,
 * muette, en boucle). Ordinateur : à côté de la carte de texte, même hauteur et même haut qu'elle.
 * Mobile / tablette : au-dessus de la carte.
 */
.hero.hero-has-video > .container:not(.navbar) { align-items: center !important; justify-content: space-between; gap: 2.5rem; height: auto !important; }
.hero.hero-has-video .hero-content { flex: 0 0 600px; max-width: 600px; }
.hero-video { position: relative; flex: none; border-radius: 24px; overflow: hidden; background: #f8f3ea;
  border: 1px solid rgba(255,255,255,.2); box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); }
.hero-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1100px) {
  .hero.hero-has-video { justify-content: flex-start !important; padding-top: 90px !important; padding-bottom: 90px !important; }
  .hero.hero-has-video > .container:not(.navbar) { flex-direction: column; align-items: center !important; gap: 1.5rem; }
  .hero.hero-has-video .hero-content { transform: none !important; width: 100%; flex: none; }
  /* la vidéo d'abord : c'est ce qu'on voit en arrivant, la carte de texte suit */
  .hero-video { order: -1; width: min(100%, 440px); aspect-ratio: 4 / 5; }
}

/*
 * Variante « plein écran » (.hero-full, essai) : plus de carte de texte ni de photo, la vidéo occupe tout
 * l'en-tête sur le fond crème de la vidéo, sans cadre. Le texte reste dans le HTML (titre h1, référencement),
 * masqué à l'écran. Portrait étroit : version 9:16 de la vidéo.
 */
.hero.hero-full { background: #FAF5EC; padding: 0 !important; }
.hero.hero-full > div:has(> picture), .hero.hero-full > div:has(> .living-blob), .hero.hero-full .hero-overlay { display: none; }
.hero.hero-full .hero-content { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 !important; }
.hero.hero-full > .container:not(.navbar) { position: static !important; max-width: none; margin: 0; padding: 0; }
/* bas : place réservée au bouton flottant « Découvrir nos 4 applications » (.mobile-sticky-cta, ~85 px) */
.hero.hero-full .hero-video { position: absolute; left: 0; right: 0; top: 80px; bottom: 100px; width: auto !important; height: auto !important;
  order: 0; margin: 0; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.hero.hero-full .hero-video video { object-fit: contain;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%); }
.hero.hero-full .scroll-indicator { display: none; }
/* barre de navigation lisible sur fond clair */
.hero.hero-full .navbar .nav-content { background: rgba(255,255,255,.7) !important; border-color: rgba(0,0,0,.08) !important; }
.hero.hero-full .navbar .nav-links > a, .hero.hero-full .navbar .nav-links .nav-dropdown > a,
.hero.hero-full .navbar .nav-links .nav-dropdown-trigger, .hero.hero-full .navbar .logo, .hero.hero-full .navbar .logo span,
.hero.hero-full .navbar .theme-toggle, .hero.hero-full .navbar button { color: #1f2937 !important; text-shadow: none !important; }
@media (max-width: 1100px) {
  .hero.hero-full .hero-video { top: 70px; bottom: 96px; }
}