@charset "UTF-8";
/* ======
   XÉDRIA — animation d'introduction
   Reprise de intro-vortex.css (Cédric), avec deux corrections :

   1. LE BUG BLOQUANT. Sans JavaScript, l'overlay restait en place avec
      z-index 999999 et interceptait tous les clics : le site devenait
      inutilisable. Le socle pose html.js ; tout ce qui suit est donc
      conditionné à html.js — pas de script, pas d'overlay.
   2. LA PALETTE. Le bleu-gris #4D6974 d'origine ne fait partie d'aucune des
      couleurs du site. Il est remplacé par --blue #80b6c4.

   Les identifiants (#xedria-intro-*) sont conservés : intro-vortex.js en dépend.
   ====== */

/* == 1. CORRECTIF — sans JavaScript, rien de tout ceci n'existe == */
#xedria-intro-v11{display:none}
html.js #xedria-intro-v11{display:block}

/* Ceinture : si le script échoue après avoir verrouillé le défilement, ou si
   l'overlay a déjà terminé, le verrou saute. */
html.xedria-intro-lock,
body.xedria-intro-lock{overflow:hidden}
@supports selector(:has(*)){
  html.xedria-intro-lock:not(:has(#xedria-intro-v11:not(.is-done))),
  body.xedria-intro-lock:not(:has(#xedria-intro-v11:not(.is-done))){overflow:visible}
}

/* == 2. PALETTE — accordée à celle du site == */
:root{
  --xd-intro:#80b6c4;         /* = --blue   (était #4D6974) */
  --xd-intro-soft:#a3cdd7;    /* interpolation blue → ice */
  --xd-intro-light:#d8f0f4;   /* = --ice    (était #A6B2B6) */
  --xd-intro-white:#f4f7f7;   /* = --ink    (était #EDF1F2) */
}

/* == 3. STRUCTURE == */
#xedria-intro-v11{
  position:fixed;inset:0;z-index:9999;
  overflow:hidden;
  background:#070a0c;         /* opaque : si le canvas ne peint pas, on voit
                                 quand même un fond, pas une vitre invisible */
  contain:strict;
  transition:opacity .24s ease,visibility .24s ease;
}
#xedria-intro-v11.is-done{opacity:0;visibility:hidden;pointer-events:none}

#xedria-intro-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

#xedria-intro-logo{
  position:absolute;left:50%;top:50%;
  width:min(72vw,695px);height:auto;
  transform:translate3d(-50%,-50%,0) scale(1);transform-origin:center;
  opacity:1;pointer-events:none;user-select:none;
  will-change:opacity,transform;backface-visibility:hidden;
  filter:drop-shadow(0 0 22px rgba(128,182,196,.18));
}

#xedria-intro-sweep{
  position:absolute;inset:-25%;
  opacity:0;pointer-events:none;
  mix-blend-mode:screen;
  transform:translate3d(-80%,0,0);
  will-change:opacity,transform;
  background:linear-gradient(104deg,
    transparent 43%,
    rgba(128,182,196,.03) 46%,
    rgba(244,247,247,.72) 49.7%,
    rgba(128,182,196,.14) 52%,
    transparent 57%);
}

#xedria-intro-flare{
  position:absolute;left:50%;top:50%;
  width:12vmin;height:12vmin;border-radius:50%;
  transform:translate3d(-50%,-50%,0) scale(.1);
  opacity:0;pointer-events:none;
  mix-blend-mode:screen;
  will-change:opacity,transform;
  background:radial-gradient(circle,
    rgba(244,247,247,.96) 0 4%,
    rgba(216,240,244,.72) 11%,
    rgba(128,182,196,.34) 34%,
    transparent 72%);
}

#xedria-intro-vignette{
  position:absolute;inset:0;
  opacity:.66;pointer-events:none;
  will-change:opacity;
  background:radial-gradient(ellipse at center,
    transparent 18%,
    rgba(0,0,0,.08) 46%,
    rgba(0,0,0,.66) 100%);
}

#xedria-intro-progress{
  position:absolute;left:0;bottom:0;
  width:100%;height:2px;
  transform:scaleX(0);transform-origin:left center;
  will-change:transform;
  background:linear-gradient(90deg, rgba(128,182,196,.10), #80b6c4);
  box-shadow:0 0 12px rgba(128,182,196,.55);
}

/* == 4. BOUTON « PASSER » — deuxième correction de fond ==
   Chez Cédric il était en opacity:0 / pointer-events:none sauf au focus clavier :
   un visiteur à la souris n'avait donc aucun moyen de sortir de l'animation.
   Il est désormais visible, discret, et sa cible atteint 44 px. */
#xedria-intro-skip{
  position:absolute;top:1rem;right:1rem;z-index:3;
  min-height:44px;
  display:inline-flex;align-items:center;
  padding:.6rem 1rem;
  border:1px solid rgba(216,240,244,.24);border-radius:4px;
  background:rgba(7,10,12,.88);   /* assez opaque pour tenir 4,5:1 meme quand le canvas s'illumine derriere */
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#f4f7f7;
  font:600 .875rem/1.2 'Inter', system-ui, sans-serif;
  cursor:pointer;
  opacity:.85;
  transition:opacity .16s ease,border-color .16s ease,background-color .16s ease;
}
/* intro.js pose .is-visible apres 1 s d'hesitation. On fait varier le CADRE,
   pas l'opacite du texte : sous .85 le bouton tombe a 1,3:1 quand le flare
   s'allume derriere. Discret au repos, affirme des qu'on hesite, toujours lu. */
#xedria-intro-skip.is-visible{opacity:1;border-color:rgba(216,240,244,.72);background:rgba(7,10,12,.94)}
#xedria-intro-skip:hover,#xedria-intro-skip:focus-visible{opacity:1;border-color:#d8f0f4;background:rgba(7,10,12,.96)}
#xedria-intro-skip:focus-visible{outline:3px solid #d6a66d;outline-offset:3px}

/* == 5. ADAPTATIONS == */
@media (max-width:700px){
  #xedria-intro-logo{width:88vw}
  #xedria-intro-skip{top:.75rem;right:.75rem;font-size:.82rem}
}

/* Écran court en paysage : le logo ne doit pas déborder en hauteur */
@media (max-height:520px){
  #xedria-intro-logo{width:auto;max-height:52vh}
}

@media (prefers-reduced-motion: reduce){
  #xedria-intro-v11{display:none!important}
  html.xedria-intro-lock,
  body.xedria-intro-lock{overflow:visible!important}
}