/*
  Augmented — Hero - Video (spec 0004). Fork de Hero - Static (spec 0001, T10bis) : toute la géométrie ci-dessous en
  vient sans changement. Différences : la composition est une boîte (poster + vidéo superposés, règles plus bas) et le
  fond est #F0EEEF, celui de la vidéo v2 décodée et de son poster (mesuré), pour que le cadre de la vidéo ne se voie pas.
  Valeurs Figma HERO 3359:3200 (cadre 1440 × 844, dont 46 de bandeau) :
  section 798 de haut, sous la nav fixe (qui la recouvre, PLAN-b) ; composition 1154 × 650 centrée à y 50 ;
  boîte du logotype 1184 × 120 centrée à y 584, elle chevauche les 116 px du bas de la composition (bas à y 704) ;
  signature Kanit 400 15/1,5, capitales, 1,05 px, #010205, haut des capitales à y 713.
  Logotype : SVG en ligne (194 × 15), blanc. Dans la boîte Figma, les glyphes du PNG mesurés au seuil alpha
  occupent 79,97 % de la largeur, centrés, et commencent à 19,15 % de sa hauteur : 946,9 × 73,2 à x 246,6 / y 607
  en 1440 (1412,3 × 109,2 à x 573,8 / y 882,3 en 2560). Le SVG est posé sur ces glyphes.
  Ombre portée : celle cuite dans le PNG, mesurée autour des glyphes (ajustement d'une gaussienne) : #353535,
  opacité 0,22, sigma 1,64 % de la largeur des glyphes (15,5 px en 1440 : flou CSS = 2 sigma = 31 px), descente
  0,18 % (1,7 px), aucun décalage horizontal. Elle suit la largeur des glyphes.
  Échelle : --hv-u vaut 1 px à 1440 et au-delà, moins en dessous (100cqi / 1440, mesuré sur la section,
  conteneur de requête) : composition, logotype, chevauchement et hauteur se réduisent ensemble.
  Le haut suit la nav : (--aug-nav-h − 30 u) = 50 à 1440, comme Figma.
  Signature : Figma rogne la boîte à la capitale (text-box-trim). Sans rognage, la boîte de ligne commence
  ≈ 9 px au-dessus des capitales : 9 px dans Figma → 2 px ici. Largeur 347 dans Figma : max 480 ici (une ligne
  à 1440, retour à la ligne propre si le texte s'allonge).
  Grand format (≥ 1440, Figma HERO 2560 3402:4311, PLAN-xl) : chaque cote s'interpole par --aug-xl (augmented.css)
  jusqu'à la maquette 2560 : section 798 → 1098, composition 1154 × 650 → 1780 × 1002 à y 50 → 34, boîte du
  logotype 1184 × 120 → 1766 × 179 (glyphes aux mêmes proportions), remontée 116 → 188 (en 2560 il tient entier
  sur la composition, 9 px au-dessus de son bas) ; signature et écart logotype → signature inchangés. Figées
  au-delà de 2560.
  Mobile (< 900, proposition T9) : réduits à l'échelle, les objets 3D ne feraient que 160 px de large. La
  composition passe en pleine largeur dans une boîte 1 / 0,85 en object-fit: cover (elle perd ses marges latérales
  vides) ; les glyphes en pleine largeur moins 2 × 16 px, la boîte du logotype gardant autour d'eux les proportions
  de Figma (même chevauchement relatif). Haut = nav + 16.
  Ligne de flottaison (décision d'Hugo, 06/10) : le bandeau vert qui suit le hero ferme le premier écran, puis une bande
  du fond gris (le padding haut de l'intro), jamais le contenu de la section suivante. Hauteur du hero =
  max(hauteur maquette, 100svh − bandeau − bande grise) ; bandeau 46 / 40 (augmented-marquee, ≥ 900 / < 900), bande
  48 / 24. Repli 100vh sans svh. Jamais plus bas que la maquette : fenêtre plus basse, rien ne change. Hauteur en
  plus : partagée moitié au-dessus, moitié au-dessous du groupe composition + logotype + signature (rien ne s'étire,
  les tailles ne bougent pas) ; desktop par le padding haut (la hauteur maquette est connue), mobile par des marges
  auto (la hauteur maquette y est celle du contenu).
*/
.aug-hero-video {
  --hv-bg-rgb: 240 238 239;    /* #F0EEEF */
  --hv-bg: rgb(var(--hv-bg-rgb));
  container-type: inline-size;
  background: var(--hv-bg);
}

.aug-hero-video__inner {
  --hv-u: min(1px, 100cqi / 1440);
  --hv-comp-w: calc(1154 * var(--hv-u) + 626 * var(--aug-xl));
  --hv-comp-ratio: 1154 / 650;
  --hv-logo-w: calc(1184 * var(--hv-u) + 582 * var(--aug-xl));
  --hv-logo-h: calc(120 * var(--hv-u) + 59 * var(--aug-xl));
  --hv-logo-up: calc(116 * var(--hv-u) + 72 * var(--aug-xl));
  --hv-glyph-w: calc(var(--hv-logo-w) * 0.7997);
  --hv-h: calc(798 * var(--hv-u) + 300 * var(--aug-xl));
  --hv-band: 46px;
  --hv-gap: 48px;
  --hv-fold: calc(100vh - var(--hv-band) - var(--hv-gap));
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  min-height: max(var(--hv-h), var(--hv-fold));
  padding: calc(var(--aug-nav-h) - 30 * var(--hv-u) - 16 * var(--aug-xl) + max(0px, var(--hv-fold) - var(--hv-h)) / 2) 0 calc(24 * var(--hv-u));
  text-align: center;
}

/* Une propriété personnalisée n'a pas de repli par double déclaration : svh passe par @supports. */
@supports (height: 100svh) {
  .aug-hero-video__inner { --hv-fold: calc(100svh - var(--hv-band) - var(--hv-gap)); }
}

/* Boîte de la composition : poster dans le flux, vidéo posée dessus. Boîte 1154 / 650 (Figma) pour un média 16:9 :
   object-fit: cover en rogne 0,15 % en hauteur, invisible (fond uni). */
/* Bords fondus. La v1 (sans balise colorimétrique) se décodait en gris neutre, de #ECECEC à #F0F0F0 selon le décodeur,
   et son cadre se voyait. La v2 porte la balise BT.709 : Chrome la décode en #F0EEEF, le fond exact. Le voile reste
   pour les décodeurs qui s'en écarteraient encore de quelques niveaux (bord net = cadre visible). Un voile ::after de
   la couleur du fond, en dégradé, fond les bords de la boîte dans la section : 10 % sur les côtés, 6 % en haut et en
   bas. Dégradé adouci : opacité 1 → 0,85 sur le premier tiers du fondu, puis 0,85 → 0. Un fondu linéaire laissait
   passer un saut au bord quand le fondu est court (mobile : 6 % de 319 px = 19 px ; saut de 1,5 niveau pour une vidéo
   décodée 5 niveaux plus claire, batterie du 07/10) ; adouci, les premiers pixels restent presque à la couleur du fond. Les objets en restent loin
   (23 % de marge latérale, 7 % verticale, mesurés sur le poster). Voile plutôt que mask-image : WebKit n'applique pas
   toujours le masque d'un ancêtre à une vidéo composée à part. Mobile : la boîte touche les bords de l'écran, fondu
   vertical seul (règle plus bas). */
.aug-hero-video__composition {
  --hv-fade-x: 10%;
  --hv-fade-y: 6%;
  position: relative;
  width: var(--hv-comp-w);
  max-width: 100%;
  aspect-ratio: var(--hv-comp-ratio);
  overflow: hidden;
}

.aug-hero-video__composition::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--hv-bg), rgb(var(--hv-bg-rgb) / 0.85) calc(var(--hv-fade-x) * 0.35), transparent var(--hv-fade-x),
      transparent calc(100% - var(--hv-fade-x)), rgb(var(--hv-bg-rgb) / 0.85) calc(100% - var(--hv-fade-x) * 0.35), var(--hv-bg)),
    linear-gradient(to bottom, var(--hv-bg), rgb(var(--hv-bg-rgb) / 0.85) calc(var(--hv-fade-y) * 0.35), transparent var(--hv-fade-y),
      transparent calc(100% - var(--hv-fade-y)), rgb(var(--hv-bg-rgb) / 0.85) calc(100% - var(--hv-fade-y) * 0.35), var(--hv-bg));
}

.aug-hero-video__poster,
.aug-hero-video__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Transparente jusqu'à sa première image affichée (module.js pose is-playing) : la première image de la boucle est le
   poster, la bascule ne se voit pas. Pas de transition : un fondu montrerait deux images superposées. */
.aug-hero-video__video {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.aug-hero-video__video.is-playing { opacity: 1; }

/* Mouvement réduit : module.js ne lance pas la vidéo ; si elle tournait déjà (réglage changé en cours de visite),
   elle est mise en pause et masquée ici, le poster reste. */
@media (prefers-reduced-motion: reduce) {
  .aug-hero-video__video { display: none; }
}

/* Le logotype passe au-dessus de la composition : 116 de ses 120 px de haut remontent sur elle (188 de 179 en 2560).
   Le filtre et position: relative le gardent au-dessus d'elle (ordre du DOM), ombre comprise. */
.aug-hero-video__title {
  position: relative;
  box-sizing: border-box;
  width: var(--hv-logo-w);
  max-width: 100%;
  height: var(--hv-logo-h);
  margin: calc(-1 * var(--hv-logo-up)) 0 0;
  padding-top: calc(var(--hv-logo-h) * 0.1915);
  font-size: inherit;
  line-height: 0;
}

.aug-hero-video__logotype {
  display: block;
  width: var(--hv-glyph-w);
  height: auto;
  aspect-ratio: 194 / 15;
  margin: 0 auto;
  overflow: visible;
  color: #fff;
  filter: drop-shadow(0 calc(var(--hv-glyph-w) * 0.0018) calc(var(--hv-glyph-w) * 0.0327) rgb(53 53 53 / 0.22));
}

.aug-hero-video__signature {
  max-width: min(480px, 100% - 32px);
  margin: 2px 0 0;
  color: #010205;
  font-family: var(--aug-font-label);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 1.05px;
  text-transform: uppercase;
  overflow-wrap: break-word;
  text-wrap: balance;
}

@media (max-width: 899.98px) {
  .aug-hero-video__inner {
    --hv-comp-w: 100cqi;
    --hv-comp-ratio: 1 / 0.85;
    --hv-logo-w: 100cqi;
    --hv-glyph-w: calc(100cqi - 32px);
    --hv-logo-h: calc(var(--hv-glyph-w) * 120 / 946.9);
    --hv-logo-up: calc(var(--hv-logo-h) * 116 / 120);
    --hv-band: 40px;
    --hv-gap: 24px;
    min-height: var(--hv-fold);
    padding: calc(var(--aug-nav-h) + 16px) 0 40px;
  }

  /* Hauteur en plus : moitié au-dessus de la composition, moitié sous le dernier élément. */
  .aug-hero-video__composition { margin-top: auto; --hv-fade-x: 0%; }
  .aug-hero-video__inner > :last-child { margin-bottom: auto; }
}

/* Logotype qui monte au défilement (repasse DA du 10/10, inspiration tbp.studio). Au chargement, la pose Figma ; puis,
   sur les premiers 70 % d'écran défilés, il remonte d'un quart de la largeur de la composition (44 % de sa hauteur en
   desktop) et passe devant les objets. Animation liée au défilement, sans JS : un navigateur qui ne la connaît pas
   (Firefox) garde la pose fixe ; mouvement réduit → pose fixe. */
@keyframes aug-hv-logo-rise {
  to { transform: translateY(calc(var(--hv-comp-w) * -0.25)); }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .aug-hero-video__title {
      animation: aug-hv-logo-rise linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 70svh;
    }
  }
}