/* ==========================================================================
   SKYWAY TRAVELERS — animations et fluidité de navigation
   Chargée sur les 20 pages, juste avant `responsive.css`.

   Principe : rien ne bouge tant que `js/anim.js` n'a pas posé la classe
   `js-anim` sur <html>. Sans JavaScript, ou si l'utilisateur demande moins
   d'animations, la page s'affiche telle quelle — aucun contenu n'est caché.
   ========================================================================== */

/* ==========================================================================
   APPARITION AU DÉFILEMENT
   ========================================================================== */

/* état de départ : posé par le script, jamais par le HTML */
.js-anim [data-anim]{
  opacity:0;
  transform:translateY(1.8rem);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),
             transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--anim-delay, 0ms);
  will-change:opacity, transform;
}

/* variantes de direction, choisies par le script selon le type d'élément */
.js-anim [data-anim="left"]{ transform:translate3d(-2.4rem, 0, 0); }
.js-anim [data-anim="right"]{ transform:translate3d(2.4rem, 0, 0); }
.js-anim [data-anim="zoom"]{ transform:scale(.965); }

/* état d'arrivée */
.js-anim [data-anim].is-in{
  opacity:1;
  transform:none;
  will-change:auto;
}

/* les images révélées le sont dans leur cadre, sans déborder */
.js-anim [data-anim="zoom"]{ backface-visibility:hidden; }

/* ==========================================================================
   TITRES — le trait rouge se déploie quand le titre entre à l'écran
   ========================================================================== */
.js-anim .title__line{ position:relative; }
.js-anim .title[data-anim] .title__line::before{
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform .7s cubic-bezier(.22,.61,.36,1) .15s;
}
.js-anim .title[data-anim].is-in .title__line::before{ transform:scaleX(1); }

/* ==========================================================================
   MICRO-INTERACTIONS
   ========================================================================== */

/* boutons : légère élévation, jamais de déplacement brusque */
.btn{ transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; }
.btn:hover,
.btn:focus-visible{ transform:translateY(-.2rem); }
.btn:active{ transform:translateY(0); }

/* liens de navigation et de pied de page */
.menu > li > a,
.menu__btn,
.footer__nav a,
.crumb__path a,
.topbar__item{ transition:color .18s ease, opacity .18s ease; }

/* pastilles sociales */
.soc{ transition:transform .2s ease, opacity .2s ease; }
.soc:hover,
.soc:focus-visible{ transform:translateY(-.2rem) scale(1.06); }

/* ==========================================================================
   SÉLECTEUR DE LANGUE FLOTTANT
   Il quitte le flux du héros : il reste collé au bord gauche pendant tout
   le défilement, au même endroit sur toutes les pages.
   ========================================================================== */
.langs{
  position:fixed !important;
  left:0; top:50% !important;
  transform:translateY(-50%);
  z-index:60;
  transition:box-shadow .25s ease, transform .25s ease;
}
.langs:hover{ box-shadow:0 .5rem 2rem rgba(0,0,0,.24); }
.langs a{
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  transition:transform .18s ease;
}
.langs a:hover,
.langs a:focus-visible{ transform:scale(1.12); }
.langs a[aria-current="true"] img{ box-shadow:0 0 0 .2rem var(--red); border-radius:50%; }

/* même comportement sur toutes les pages : les feuilles de page le masquaient
   sur les pages intérieures dès 1199 px, il reste désormais accessible sur
   tablette et n'est replié que sur les petits écrans, où la place manque */
@media (min-width:768px){
  .langs, .phero .langs{ display:flex !important; }
}
@media (max-width:767px){
  .langs, .phero .langs{ display:none !important; }
}

/* ==========================================================================
   RETOUR EN HAUT — le bouton est injecté par js/anim.js
   ========================================================================== */
.totop{
  position:fixed; right:2.4rem; bottom:2.4rem; z-index:60;
  width:5.2rem; height:5.2rem; min-width:44px; min-height:44px;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; cursor:pointer;
  background:var(--red); color:#fff;
  box-shadow:0 .6rem 2rem rgba(7,48,100,.28);

  opacity:0; visibility:hidden; transform:translateY(1rem);
  transition:opacity .25s ease, transform .25s ease, visibility .25s,
             background-color .2s ease;
}
.totop.is-in{ opacity:1; visibility:visible; transform:none; }
.totop:hover{ background:var(--navy); }
.totop .ico{ width:2.2rem; height:2.2rem; transform:rotate(180deg); }   /* le chevron pointe vers le bas */

/* ==========================================================================
   FLUIDITÉ DE NAVIGATION
   ========================================================================== */
html{ scroll-behavior:smooth; }

/* une ancre ne se cale plus sous la barre de contact */
:target{ scroll-margin-top:12rem; }

/* focus clavier visible et homogène sur tout le site */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:.3rem solid var(--red);
  outline-offset:.3rem;
  border-radius:.4rem;
}

/* ==========================================================================
   RESPECT DES PRÉFÉRENCES SYSTÈME
   `js/anim.js` retire déjà la classe `js-anim` dans ce cas ; cette règle est
   la ceinture de sécurité côté CSS.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js-anim [data-anim],
  .js-anim [data-anim].is-in{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .js-anim .title[data-anim] .title__line::before{ transform:none !important; transition:none !important; }
  .btn:hover, .btn:focus-visible,
  .soc:hover, .soc:focus-visible,
  .langs a:hover, .langs a:focus-visible{ transform:none; }
  .totop{ transition:none; }
}