/* alphaware, socle commun.
   Tokens, reset, animations et barre de defilement, repris du bloc <style>
   global des maquettes .dc.html. Partage par les trois ecrans du site. */

:root {
  /* surfaces */
  --bg: #0a0b0f;
  --surface: #0c0e14;
  --surface-accent: #0e0f18;
  --surface-hero: #0d0f15;
  --field: #0e1016;

  /* texte */
  --text: #eef0f4;
  --text-strong: #fff;
  --text-alt: #f2f4f8;
  --text-card: #f4f6fa;
  --text-ghost: #dfe2e9;
  --text-2: #9297a4;
  --text-3: #8b909e;
  --text-4: #7d8391;
  --text-pill: #a9aebb;
  /* Remonté de #6d7382 : le pied de page et le texte indicatif du champ mail
     tombaient à 4,1:1 sur le fond, sous le seuil AA de 4,5:1. */
  --text-foot: #767c8b;
  --text-on-accent: #c4c8d3;
  --text-soft: #e4e7ee;
  --link: #c8ccd6;

  /* accent violet */
  /* Le violet plein porte du texte blanc : au-dessus de L 0.58 il tombe sous
     le seuil de contraste AA. La maquette éclaircissait de 0.58 à 0.64, ce qui
     rendait le libellé du bouton d'achat moins lisible au moment précis où le
     pointeur est dessus. Les deux valeurs descendent d'autant, le geste reste
     le même, le bouton s'éclaircit toujours au survol. */
  --accent: oklch(0.55 0.21 285);
  --accent-hover: oklch(0.58 0.21 285);
  --accent-text: #bdb1ff;
  --accent-bd: oklch(0.62 0.2 285 / .6);
  --accent-bd-mid: oklch(0.62 0.2 285 / .5);
  --accent-bd-soft: oklch(0.62 0.2 285 / .35);
  --accent-fill: oklch(0.62 0.2 285);
  --accent-fill-bd: oklch(0.7 0.18 285);
  /* La lueur est plus large sur l'accueil et la fiche que sur le paiement,
     chaque maquette a sa propre valeur. */
  --glow: oklch(0.62 0.2 285 / .16);
  --glow-fiche: oklch(0.62 0.2 285 / .18);
  --glow-accueil: oklch(0.62 0.2 285 / .2);

  /* bordures */
  --bd: rgba(255, 255, 255, .08);
  --bd-inner: rgba(255, 255, 255, .07);
  --bd-card-soft: rgba(255, 255, 255, .09);
  --bd-card: rgba(255, 255, 255, .1);
  --bd-ghost: rgba(255, 255, 255, .14);
  --bd-ghost-hover: rgba(255, 255, 255, .32);
  --bd-card-hover: rgba(255, 255, 255, .22);
  --bd-field: rgba(255, 255, 255, .12);
  --bd-dot: rgba(255, 255, 255, .24);
  --bd-dash: rgba(255, 255, 255, .16);

  /* ombres */
  --shadow-hero: 0 40px 90px rgba(0, 0, 0, .5);

  /* emplacement d'image, en attendant les visuels */
  --shot-haut: #14161f;
  --shot-bas: #0b0d13;
  --shot-lueur: oklch(0.62 0.2 285 / .1);

  /* ESP de la banniere du pack. Le canvas ne sait pas lire une variable CSS :
     ces valeurs sont relues sur l'element au demarrage, elles restent donc
     definies ici comme le reste des couleurs du site. */
  --esp-boite: oklch(0.68 0.18 285);
  --esp-os: rgba(226, 230, 240, .6);
  --esp-texte: rgba(226, 230, 240, .78);
  --esp-loin: oklch(0.62 0.2 285 / .3);
  --esp-vie: #8de6a4;
  --esp-bas: #dcb26a;
  --esp-caisse: #151824;
  --esp-arete: rgba(163, 152, 224, .3);

  /* etats */
  --ok: #a8e6bb;
  --ok-bd: rgba(141, 230, 164, .3);
  --ok-bg: #0b1310;
  --warn: #dcb26a;
  --warn-bd: rgba(220, 178, 106, .6);
  --focus: rgba(189, 177, 255, .55);

  /* bouton clair */
  --btn-light: #eef0f4;
  --btn-light-hover: #fff;

  /* typo et courbes */
  --titre: 'Archivo', system-ui, sans-serif;
  /* Pour le mot de la marque, qui porte un alpha grec. Aucune des deux
     polices du site ne l'a : elles sont sous-ensemblées en latin, et ni
     Archivo ni Instrument Sans ne livrent de grec. Le glyphe retombe donc
     sur une police système, et laissée au hasard elle change d'une machine
     à l'autre au milieu du mot. La pile est nommée pour que la retombée
     soit la même partout : Archivo porte les lettres latines, la suivante
     qui existe porte l'alpha. */
  --titre-marque: 'Archivo', 'Segoe UI', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --texte: 'Instrument Sans', system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*,
*::before,
*::after { box-sizing: border-box }

html {
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--texte);
  -webkit-font-smoothing: antialiased;
}

/* La couverture du hero fait 100vw pour atteindre les bords de la fenêtre.
   100vw compte la barre de défilement, que la largeur utile n'a pas : le
   bandeau dépasse de quelques pixels de chaque côté et la page se laisse tirer
   latéralement. Aucune autre unité CSS ne connaît la largeur sans la barre,
   c'est donc coupé ici.
   Posé sur la racine ET sur le corps : l'overflow du corps remonte à la
   fenêtre tant que la racine est visible, et le corps se retrouve traité comme
   visible, donc ne coupe rien.
   `hidden` d'abord, `clip` ensuite : clip ne crée pas de conteneur de
   défilement et serait préférable partout, mais il n'existe que depuis Safari
   16 et les versions antérieures l'ignorent purement et simplement, ce qui
   rendait la page glissante sur un iPhone un peu ancien. Le site n'a aucun
   élément collant, `hidden` n'y coûte rien.
   Ce n'est pas un tapis pour glisser la poussière dessous : tout autre
   débordement se corrige à sa source. Le dernier en date, la bannière du pack
   qui élargissait la grille du catalogue sous 360px, a été corrigé sur la
   bannière, pas ici. */
html,
body { overflow-x: hidden }

@supports (overflow: clip) {
  html,
  body { overflow-x: clip }
}

h1, h2, p { margin: 0 }

a { color: var(--link); text-decoration: none; transition: color .2s ease }
a:hover { color: var(--text-strong) }

input, button { font: inherit; color: inherit }
input::placeholder { color: var(--text-foot) }

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--texte);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* hidden doit gagner sur les display: flex/grid des composants */
[hidden] { display: none !important }

/* Lien d'évitement. Invisible tant qu'il n'a pas le focus, il évite de
   traverser les seize cartes du catalogue à la tabulation pour atteindre le
   reste de la page. */
.skip {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 10;
  transform: translateY(-200%);
  font: 500 14px var(--texte);
  color: var(--bg);
  background: var(--btn-light);
  border-radius: 100px;
  padding: 11px 18px;
  transition: transform .18s var(--ease);
}

.skip:focus-visible {
  transform: none;
  color: var(--bg);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Animations. Entree de page en fondu, revelation au defilement quand le
   navigateur supporte animation-timeline, sinon tout reste visible. */
@keyframes fade {
  from { opacity: 0; transform: translateY(10px) }
  to   { opacity: 1; transform: none }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px) }
  to   { opacity: 1; transform: none }
}

@keyframes soft {
  from { opacity: 0; transform: translateY(8px) }
  to   { opacity: 1; transform: none }
}

.f1 { animation: fade .8s var(--ease) both }
.rv, .rvc { opacity: 1 }

/* Reponse de FAQ depliee. */
.ans { animation: fade .35s ease both }

@supports (animation-timeline: view()) {
  .rv {
    animation: rise .9s var(--ease) both;
    animation-timeline: view();
    animation-range: entry 2% cover 20%;
  }

  /* Variante pour les cartes d'une grille, elles entrent plus tot. Le --i posé
     par la page decale les cartes d'une meme rangee, la grille se remplit de
     gauche a droite au lieu d'apparaitre d'un bloc. */
  .rvc {
    animation: rise .8s var(--ease) both;
    animation-timeline: view();
    animation-range: entry calc(var(--i, 0) * 4%) cover calc(16% + var(--i, 0) * 4%);
  }
}

.card {
  transition: transform .35s var(--ease), border-color .25s ease, background-color .25s ease;
}
.card:hover { transform: translateY(-3px) }

/* Emplacement d'image. Aucun visuel n'est fourni : le bloc porte le texte du
   placeholder de la maquette et l'identifiant du slot en data-slot, pour
   brancher la vraie image plus tard.
   Un aplat gris sur seize cartes donnait un catalogue de trous ; un dégradé et
   une lueur reprennent le décor du site en attendant les vrais visuels. */
.shot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background:
    radial-gradient(90% 72% at 50% 0%, var(--shot-lueur), transparent 62%),
    linear-gradient(165deg, var(--shot-haut), var(--shot-bas));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  font: 500 12.5px/1.5 var(--texte);
  color: var(--text-pill);
  text-align: center;
  text-wrap: balance;
  transition: transform .55s var(--ease), filter .35s ease;
}

.card:hover .shot {
  transform: scale(1.05);
  filter: brightness(1.12);
}

.btn {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px) }
.btn:active { transform: translateY(0) scale(.985) }

/* Barre de defilement */
* {
  scrollbar-width: thin;
  scrollbar-color: #24262e transparent;
}
::-webkit-scrollbar { width: 11px; height: 11px }
::-webkit-scrollbar-track { background: var(--bg) }
::-webkit-scrollbar-thumb {
  background: #23252d;
  border-radius: 100px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: #32353f }

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