/* Les styles de mise en page vivent en attributs `style` dans index.html, tels
   que la maquette les portait. Ce fichier ne tient que ce qui ne peut pas s'y
   écrire : les polices, les règles globales et les animations.

   Aucune requête sortante : les polices sont dans `fonts/`, sous licence OFL
   (voir `fonts/OFL.txt`), et les icônes sont un sprite SVG en tête de page. */

/* IBM Plex Sans est servie en police variable : un seul fichier couvre 400 à
   600, ce que `font-weight: 400 600` déclare. Google Fonts en renvoyait trois
   copies identiques — 80 ko pour rien. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/IBMPlexSans.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/IBMPlexMono-400.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/IBMPlexMono-500.woff2') format('woff2');
}

html {
  background: #08090a;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #08090a;
  color: #f2f3f5;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

a {
  color: #b6bac1;
  text-decoration: none;
}

a:hover {
  color: #f2f3f5;
}

::selection {
  background: rgba(125, 118, 240, 0.3);
}

/* Le sprite est présent dans le flux pour que `<use>` le trouve, mais il ne
   doit rien occuper. */
body > svg:first-child {
  display: none;
}

@keyframes ovrsee-iris {
  0%, 100% { opacity: 0.34; }
  50% { opacity: 1; }
}

@keyframes ovrsee-pix {
  0%, 100% { opacity: 0.18; }
  45% { opacity: 1; }
}

/* La démo se pilote à la souris ; au clavier, le focus doit rester visible. */
[data-clone]:focus-visible,
a:focus-visible {
  outline: 2px solid #7d76f0;
  outline-offset: 2px;
}

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

  html {
    scroll-behavior: auto;
  }
}

/* ------------------------------------------------------------- survols -- */

/* La maquette portait ses états de survol dans un attribut `style-hover`, que
   `support.js` appliquait à l'exécution. Le runtime parti, ces 17 attributs ne
   faisaient plus rien : les voici en CSS, un sélecteur par déclaration
   distincte. `!important` est obligatoire — la règle doit battre le `style`
   inline de l'élément. */

[style-hover="color: #f2f3f5;"]:hover {
  color: #f2f3f5 !important;
}

[style-hover="color: #a2a8b2;"]:hover {
  color: #a2a8b2 !important;
}

[style-hover="background: #8b85f4; color: #0a0a12;"]:hover {
  background: #8b85f4 !important;
  color: #0a0a12 !important;
}

[style-hover="background: #1f212a; color: #f2f3f5;"]:hover {
  background: #1f212a !important;
  color: #f2f3f5 !important;
}

[style-hover="border-color: #363841; background: #191b22;"]:hover {
  border-color: #363841 !important;
  background: #191b22 !important;
}

[style-hover="color: #f2f3f5; border-bottom-color: #7d76f0;"]:hover {
  color: #f2f3f5 !important;
  border-bottom-color: #7d76f0 !important;
}

[style-hover] {
  transition: color .15s, background-color .15s, border-color .15s;
}

/* ---------------------------------------------------------- adaptatif -- */

/* La maquette est dessinée pour un écran large et porte toute sa mise en page
   en attributs `style` : pas une media query, pas une largeur relative. En
   dessous de 900 px le titre débordait horizontalement et la navigation
   sortait de l'écran.
   
   Les règles ci-dessous ciblent les déclarations inline elles-mêmes, par
   sélecteur d'attribut. C'est la seule façon de reprendre la main sans
   réécrire 130 ko de HTML — et `!important` n'est pas un raccourci ici, c'est
   la seule spécificité qui batte un `style` inline. */

@media (max-width: 900px) {
  /* Marges des conteneurs : 28 px mangent trop d'un écran de téléphone.

     Six déclarations distinctes portent ce 28 px horizontal, avec des valeurs
     verticales toutes différentes — d'où l'énumération, et l'usage de
     `padding-left/right` pour ne pas écraser le haut et le bas. Ne viser que
     `padding: 0 28px` en laissait quatre de côté, dont celle du hero. */
  [style*="padding: 0 28px"],
  [style*="padding: 96px 28px"],
  [style*="padding: 40px 28px"],
  [style*="padding: 26px 28px"],
  [style*="padding: 116px 28px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Le titre débordait : 68 px ne tiennent pas sur 390 px de large. */
  [style*="font-size: 68px"] {
    font-size: 40px !important;
    line-height: 1.06 !important;
  }

  [style*="font-size: 38px"] {
    font-size: 27px !important;
  }

  [style*="font-size: 34px"] {
    font-size: 25px !important;
  }

  /* Toutes les grilles se replient sur une colonne. */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: 1fr 460px"],
  [style*="grid-template-columns: 1fr 1fr"]:not([style*="width: 340px"]) {
    grid-template-columns: 1fr !important;
  }

  /* Les blocs numérotés « 01 / titre / texte » : le numéro passe au-dessus. */
  [style*="grid-template-columns: 44px 260px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Navigation : les trois ancres disparaissent, le sélecteur de langue et le
     bouton GitHub restent — ce sont les deux seules actions de la barre.

     Le sélecteur est ancré à la barre collante, et ce n'est pas du zèle : le
     bouton « Explorer l'interface » du hero pointe vers la même ancre `#demo`,
     et une règle non ancrée le faisait disparaître avec les autres. */
  [style*="position: sticky"] a[href="#demo"],
  [style*="position: sticky"] a[href="#comment"],
  [style*="position: sticky"] a[href="#donnees"] {
    display: none !important;
  }

  /* Les deux gouttières de 28 px de la barre suffisaient à la faire déborder
     de 5 px une fois les ancres retirées. */
  [style*="position: sticky"] [style*="max-width: 1180px"] {
    gap: 10px !important;
  }

  /* Le bandeau de statistiques du pied de page était figé à 340 px : c'est lui,
     et lui seul, qui faisait déborder toute la page sous 768 px.

     L'élargir ne suffisait pas : il partage une rangée flex avec le bloc de
     texte, qui l'écrasait en colonne verticale aux libellés tronqués. La
     rangée s'empile d'abord ; le bandeau prend alors toute la largeur, et
     garde ses deux colonnes. */
  [style*="padding: 54px 48px"][style*="gap: 48px"] {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 32px 22px !important;
    gap: 28px !important;
  }

  [style*="width: 340px"] {
    width: 100% !important;
    flex: none !important;
  }

  /* La fenêtre de démo est réduite par `mesurer()`, avec un plancher : en
     dessous, le texte de l'interface devient illisible et la démo ne
     démontre plus rien. Elle défile donc latéralement, dans son cadre. */
  [data-stage-wrap] {
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
  }
}

/* Boutons d'action pleine largeur sur téléphone.

   Les quatre boutons de la page — « Aller au dépôt », « Explorer l'interface »,
   le lien du dépôt et « Releases » — font tous 40 px de haut ; celui de la
   barre de navigation en fait 28 et reste donc à sa taille.

   Leurs deux rangées sont déjà en `flex-wrap: wrap` : un enfant à 100 % passe
   seul sur sa ligne, sans qu'il faille toucher au conteneur. La cible de clic
   passe ainsi de 160 px à toute la largeur, ce qui compte plus au pouce qu'à
   la souris. */

@media (max-width: 600px) {
  a[style*="height: 40px"] {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  /* La barre de navigation exige 406 px pour tenir sur une ligne : le logo et
     son badge de version en font 175, le groupe de droite 167, le reste étant
     marges et gouttière. Au-dessous, c'est le badge qui saute — il répète une
     information que la page donne déjà, et il libère 78 px. */
  [data-version] {
    display: none !important;
  }

  [style*="padding: 0 28px"],
  [style*="padding: 96px 28px"],
  [style*="padding: 40px 28px"],
  [style*="padding: 26px 28px"],
  [style*="padding: 116px 28px"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  [style*="font-size: 68px"] {
    font-size: 32px !important;
  }

  [style*="font-size: 38px"] {
    font-size: 23px !important;
  }
}