/* ==========================================================================
   Lokimo - feuille de style partagée
   --------------------------------------------------------------------------
   Chargée par toutes les pages du site marketing, avant le <style> propre à
   chaque page. Ne contient que ce qui est identique partout : reset, base
   typographique, animations communes et composants de navigation.

   Les règles spécifiques à une page (breakpoints, keyframes d'illustration,
   mises en page) restent dans le <style> de la page concernée : placées après
   ce fichier, elles le surchargent naturellement.

   Sommaire
     0. Police Inter, auto-hébergée
     1. Reset & base
     2. Animations partagées
     3. Préférences de mouvement
     3 bis. Lien d'évitement
     3 ter. Indicateur de focus
     4. Navigation - menu déroulant
     5. Navigation - menu mobile
     6. Contrôle des animations
   ========================================================================== */

/* 0. Police Inter, auto-hébergée
   Auparavant chargée depuis fonts.googleapis.com : elle arrivait vers 1,2 s
   sur mobile et décalait tout le hero de 32 px en changeant les métriques du
   texte (CLS de 0,138). Servie depuis la même origine et préchargée, elle
   arrive avant le premier rendu.
   Cela supprime aussi deux domaines tiers du chemin critique - et le transfert
   d'adresses IP vers Google, que la CNIL a déjà sanctionné.
   Fichier variable : un seul poids couvre 100 à 900.
   ------------------------------------------------------------------------ */

/* Une seule fonte est servie : Inter latin, graisse normale (fichier variable,
   100-900). Retirées faute d'usage : les deux variantes « latin-ext »
   (alphabets d'Europe de l'Est - 0 glyphe correspondant sur le site) et
   l'italique (l'unique citation en italique est rendue en oblique synthétique).
   Soit 3 fichiers et ~229 Ko de moins dans le dépôt. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Police de repli aux métriques d'Inter.
   Précharger ne suffisait pas : la police arrivait encore après le premier
   rendu, et le hero descendait alors de 32 px d'un coup (CLS de 0,138).
   Ce repli occupe exactement la même place qu'Inter, si bien que son arrivée
   ne déplace plus rien.
   Valeurs mesurées dans le navigateur, en comparant les largeurs rendues aux
   poids 400 et 700 ; les overrides dérivent des métriques d'Inter
   (unitsPerEm 2048, ascender 1984, descender −494, lineGap 0). */
@font-face {
  font-family: 'Inter repli';
  src: local('Arial'), local('Helvetica Neue'), local('Segoe UI'), local('Roboto');
  size-adjust: 105.84%;
  ascent-override: 91.53%;
  descent-override: 22.79%;
  line-gap-override: 0%;
}

/* 1. Reset & base
   ------------------------------------------------------------------------ */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #fff;
  font-family: 'Inter', 'Inter repli', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
  color: #374151;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Shell du runtime DC : il pose `#dc-root > .sc-host { height: 100% }`, soit la
   hauteur d'un écran. Or `.sc-host` est le bloc conteneur de l'en-tête
   `position: sticky` : borné à un écran, l'en-tête se décolle dès qu'on dépasse
   le hero. On laisse le conteneur grandir avec le contenu - `min-height` garde
   le plancher plein écran - pour que l'en-tête reste collé jusqu'au footer.
   Sélecteur plus spécifique que la règle du shell (elle-même injectée après
   cette feuille), donc il l'emporte sans `!important`. */
html #dc-root > .sc-host {
  height: auto;
  min-height: 100%;
}

h1, h2, h3, h4, p {
  margin: 0;
}

a {
  color: #0A6ED1;
  text-decoration: none;
}

a:hover {
  color: #083E70;
}

/* Liens dans le flux du texte : soulignés, pour être distingués autrement que
   par la couleur seule - WCAG 2.1, 1.4.1 « Utilisation de la couleur » (niveau
   A). Le bleu #0A6ED1 sur le corps de texte #374151 n'offre qu'un écart de
   ~2,1:1, insuffisant pour signaler un lien sans autre indice visuel.
   Cadré sur la prose de <main> : les CTA (`display:inline-flex`, fond plein) et
   la navigation sont des <a> hors <p>/<li>, ils gardent leur allure de bouton.
   L'anneau de focus, lui, est déjà géré plus bas par :focus-visible. */
main p a,
main li a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  text-decoration-skip-ink: auto;
}

::selection {
  background: #E6F7FF;
}

/* 2. Animations partagées
   Utilisées par les dégradés animés du logo, les libellés « scan » et les
   bandeaux défilants. Les keyframes propres aux illustrations d'une page
   restent définies dans cette page.
   ------------------------------------------------------------------------ */

@keyframes lokiGrad {
  to { background-position: 200% center; }
}

@keyframes lokiScan {
  to { background-position: -200% center; }
}

@keyframes lokiMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes shimmer {
  0%   { opacity: .5; }
  50%  { opacity: 1; }
  100% { opacity: .5; }
}

/* 3. Préférences de mouvement
   `data-motion="off"` est posé par la prop « Ambiance » de l'éditeur ;
   `prefers-reduced-motion` respecte le réglage système du visiteur.
   ------------------------------------------------------------------------ */

html {
  scroll-behavior: smooth;
}

html[data-motion="off"] * {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* 3 bis. Lien d'évitement (WCAG 2.4.1)
   Hors écran par défaut, il descend dès qu'il reçoit le focus. Permet à un
   utilisateur clavier de sauter la navigation, répétée sur les 8 pages.
   ------------------------------------------------------------------------ */

.lk-skip {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 200;
  padding: 12px 20px;
  background: #0A6ED1;
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 10px 10px;
  transition: top .15s ease;
}

/* !important pour l'emporter sur le repli en style en ligne posé par le build. */
.lk-skip:focus {
  top: 0 !important;
  color: #fff;
}

/* La cible du saut ne doit pas afficher de contour : le focus y est posé par
   programme, uniquement pour que les lecteurs d'écran suivent le déplacement. */
#contenu:focus {
  outline: none;
}

/* 3 ter. Indicateur de focus (WCAG 2.4.11)
   `:focus-visible` plutôt que `:focus` : l'anneau apparaît à la navigation
   clavier, mais pas au clic souris, où il ferait du bruit visuel.
   ------------------------------------------------------------------------ */

:focus-visible {
  outline: 3px solid #0A6ED1;
  outline-offset: 2px;
  border-radius: 3px;
}

/* Le pied de page est bleu marine : l'anneau bleu s'y confondrait. */
footer :focus-visible,
.lk-skip:focus-visible {
  outline-color: #8FC2FF;
}

/* 4. Navigation - menu déroulant
   Trois façons de l'ouvrir, dans cet ordre de priorité :
     · survol souris ;
     · focus clavier seul, quand JavaScript est absent (`:focus-within`) ;
     · classe `.lk-dd--open` posée par lokimo.js, qui gère en plus Échap et
       l'état `aria-expanded`.
   Quand le script est actif il ajoute `.lk-dd--js`, ce qui neutralise la
   variante `:focus-within` - sans quoi Échap ne pourrait jamais refermer le
   menu, le focus étant encore à l'intérieur.
   ------------------------------------------------------------------------ */

.lk-dd {
  position: relative;
}

.lk-dd-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: #0E2954;
  cursor: pointer;
}

.lk-dd-caret {
  transition: transform .2s ease;
}

.lk-dd-menu {
  position: absolute;
  top: 100%;
  left: -16px;
  z-index: 60;
  width: 344px;
  margin-top: 12px;
  padding: 8px;
  background: #fff;
  border: 1px solid #E9EEF4;
  border-radius: 14px;
  box-shadow: 0 22px 48px -20px rgba(16, 32, 64, .36);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

/* Pont invisible entre le déclencheur et le menu : évite que le survol se
   perde dans la gouttière de 12px. */
.lk-dd-menu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 16px;
}

.lk-dd:hover .lk-dd-menu,
.lk-dd:focus-within:not(.lk-dd--js) .lk-dd-menu,
.lk-dd--open .lk-dd-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.lk-dd:hover .lk-dd-caret,
.lk-dd:focus-within:not(.lk-dd--js) .lk-dd-caret,
.lk-dd--open .lk-dd-caret {
  transform: rotate(180deg);
}

.lk-dd-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: background .14s ease;
}

.lk-dd-item:hover {
  background: #F4F8FD;
}

/* 5. Navigation - menu mobile
   Le bouton bascule la classe `open` (état React). Le point de rupture qui
   fait apparaître le bouton est propre à chaque page.
   ------------------------------------------------------------------------ */

.lk-mob-group {
  padding: 14px 6px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5C6472;
}

.lk-burger .lk-ico-close {
  display: none;
}

.lk-burger.open .lk-ico-open {
  display: none;
}

.lk-burger.open .lk-ico-close {
  display: block;
}

/* 6. Contrôle des animations (WCAG 2.2.2)
   L'accueil anime en continu plusieurs centaines d'éléments décoratifs.
   `prefers-reduced-motion` couvre ceux qui l'ont réglé au niveau système ;
   ce bouton, ajouté par lokimo.js dans le pied de page, donne le même choix
   à tous les autres. C'est `data-motion="off"` qui met tout en pause.
   ------------------------------------------------------------------------ */

.lk-motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 9px 15px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  color: #C9D8EE;
  font: 600 13px 'Inter', sans-serif;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.lk-motion-toggle:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .4);
}

.lk-motion-toggle::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4ADE80;
}

.lk-motion-toggle[aria-pressed="true"]::before {
  background: #94A3B8;
}