/* « Seuil » de Vidéoflex : ouverture (index.html) -> Qui regarde ? (profils.html) -> connexion.html
   (demande du 1er nov 2026, 21 h 32, iPhone). Trois règles :
   1. Le logo est au MÊME endroit, à la MÊME taille sur les trois pages, dans le premier tiers de
      l'écran : une boîte .seuil-logo de proportions fixes (viewBox de l'ouverture, 1104 × 420),
      posée en haut du flux à --seuil-haut. Sur profils/connexion, l'image logo-videoflex.svg
      (viewBox 374 64 1068 386) est recalée DANS cette boîte pour que le dessin tombe au pixel
      près sur celui de l'ouverture.
   2. « Ouvert 24 heures » (.seuil-mention) se loge juste sous le logo, comme la signature de la
      barre d'onglets une fois connecté. À l'ouverture il part sous l'accroche et glisse à sa
      place à l'appui sur « Entrer » (voir seuil.js).
   3. Rien au-dessus des vagues : elles occupent le bas (horizon à 78 %, fond-vagues.js), tout
      le contenu tient au-dessus — vérifié sur iPhone 15, iPhone SE et 1440 × 900.
   Passage d'une page à l'autre : fondu enchaîné lent avec un flou qui se dissipe (View
   Transitions entre documents ; repli CSS si le navigateur ne les connaît pas). Le logo, la
   mention et les vagues restent en place (voir plus bas). */
:root{
  --seuil-l:min(58vw,340px,29svh);
  --seuil-haut:max(calc(env(safe-area-inset-top,0px) + 64px),10svh);
  --seuil-duree:.55s;
  --seuil-courbe:cubic-bezier(.45,0,.2,1);
}
/* Grand écran : le logo peut grandir (toujours dans le premier tiers, contenu au-dessus des vagues). */
@media (min-width:900px){:root{--seuil-l:min(340px,34svh)}}
.seuil-logo{position:relative;display:block;flex:none;width:var(--seuil-l);aspect-ratio:1104/420;height:auto;
  margin:0 auto;overflow:visible;filter:drop-shadow(0 6px 30px rgba(211,32,42,.25))}
.seuil-logo>img{position:absolute;left:1.6304%;top:5.7143%;width:96.7391%;height:auto;display:block}
.seuil-mention{position:relative;display:block;width:max-content;flex:none;margin:12px auto 0;height:14px;line-height:14px;white-space:nowrap;
  font-size:10.5px;font-weight:600;letter-spacing:.18em;padding-left:.18em;text-transform:uppercase;
  color:#a9afb8;text-align:center}
/* Petit point néon : éteint tant que la mention n'est pas à sa place, allumé ensuite. Hors du
   flux (à gauche du texte) : le texte reste centré sous le logo, point allumé ou non. */
.seuil-mention::before{content:"";position:absolute;left:-12px;top:4.5px;width:5px;height:5px;border-radius:50%;background:#ff373f;box-shadow:0 0 6px #ff373f,0 0 12px rgba(211,32,42,.8);
  opacity:0;transform:scale(.4);transition:opacity .35s ease,transform .35s ease}
.seuil-mention.amarree::before{opacity:1;transform:none}

/* ---- Transition entre deux pages du seuil (html.seuil-arrivee, posé par seuil.js) ----
   Pas de view-transition-name sur le logo, la mention ni les vagues : WebKit (iPhone) rend leurs
   nouvelles images vides pendant le fondu (logo et vagues éteints ~0,5 s, vérifié). À la place :
   la nouvelle page est affichée d'emblée SOUS l'ancienne (logo, mention, vagues déjà à la même
   place) ; l'ancienne s'efface lentement par-dessus (le néon de l'ouverture s'éteint en douceur),
   et seul le contenu qui change (.seuil-contenu) arrive dans un flou qui se dissipe. */
html.seuil-arrivee::view-transition-group(root){animation-duration:var(--seuil-duree)}
html.seuil-arrivee::view-transition-new(root){animation:none;opacity:1}
html.seuil-arrivee::view-transition-old(root){animation:seuil-fondu-sortie calc(var(--seuil-duree)*.8) var(--seuil-courbe) .12s both;mix-blend-mode:normal}
html.seuil-arrivee .seuil-contenu{animation:seuil-entree var(--seuil-duree) var(--seuil-courbe) calc(var(--seuil-duree)*.2) both}
html.seuil-arrivee #fv-scene{transition:none}
@keyframes seuil-entree{from{opacity:0;filter:blur(12px)}}

/* Réduire les animations (système ou Options) : simple fondu court, sans flou ni glissement. */
@media (prefers-reduced-motion:reduce){
  html.seuil-arrivee::view-transition-old(root){animation:seuil-fondu-sortie .3s ease both !important}
  html.seuil-arrivee .seuil-contenu{animation:seuil-fondu-entree .3s ease both}
}
html.reduire-anim.seuil-arrivee::view-transition-old(root){animation:seuil-fondu-sortie .3s ease both}
html.reduire-anim.seuil-arrivee .seuil-contenu{animation:seuil-fondu-entree .3s ease both}
@keyframes seuil-fondu-sortie{to{opacity:0}}
@keyframes seuil-fondu-entree{from{opacity:0}}