/* ==========================================================================
   Keystone One — jetons de design et effets de marque
   --------------------------------------------------------------------------
   Reprend la charte de copy/brand-kit.md (points 6, 7 et 11) sous forme
   utilisable directement. Aucune dépendance, aucun bitmap : grain, halos,
   grille et vignettage sont générés en CSS/SVG, pour zéro octet d'image.

   À copier dans website/styles/ au moment de la construction du site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons
   -------------------------------------------------------------------------- */

:root {
  /* Base — neutres profonds */
  --ks-obsidian:    #08090B;
  --ks-basalt:      #0F1115;
  --ks-slate:       #171A20;
  --ks-granite:     #232830;
  --ks-concrete:    #3A414D;

  /* Texte */
  --ks-lime:        #F2F4F7;
  --ks-mist:        #A2AAB6;
  /* Fumée corrigée : #6B7382 (valeur d'origine du brand kit) ne donnait que
     4,17:1 sur Obsidienne et 3,96:1 sur Basalte — sous le seuil WCAG AA de
     4,5:1 pour du texte normal. Or ce ton porte tous les labels de section,
     les légendes et les intitulés du pied de page. Relevé à #7B8391 :
     5,23:1 sur Obsidienne, 4,95:1 sur Basalte. */
  --ks-smoke:       #7B8391;

  /* Accent */
  --ks-copper:      #FF6B2C;
  --ks-copper-lt:   #FF8F5C;
  --ks-copper-dk:   #C4451A;
  --ks-copper-veil: rgba(255, 107, 44, .12);

  /* Soutien — data-viz et états */
  --ks-cyan:        #4FD1C5;
  --ks-success:     #3DD68C;
  --ks-warning:     #F5B544;
  --ks-error:       #F0553F;

  /* Typographie */
  --ks-font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --ks-font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --ks-font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* Mouvement — point 11 du brand kit */
  --ks-ease:        cubic-bezier(.16, 1, .3, 1);
  --ks-dur-micro:   200ms;
  --ks-dur-enter:   700ms;

  /* Ombres : noires et longues, jamais grises */
  --ks-shadow-card: 0 24px 64px -16px rgba(0, 0, 0, .7);
  --ks-shadow-lift: 0 32px 80px -20px rgba(0, 0, 0, .85);
}

/* --------------------------------------------------------------------------
   2. Échelle typographique
   -------------------------------------------------------------------------- */

.ks-display,
.ks-h1, .ks-h2, .ks-h3 {
  font-family: var(--ks-font-display);
  color: var(--ks-lime);
  text-wrap: balance;
}

.ks-display { font-weight: 700; font-size: clamp(2.75rem, 6.5vw, 5.25rem); line-height: 1.05; letter-spacing: -.035em; }
.ks-h1      { font-weight: 700; font-size: clamp(2.125rem, 4.5vw, 3.75rem); line-height: 1.08; letter-spacing: -.03em; }
.ks-h2      { font-weight: 600; font-size: clamp(1.75rem, 3.2vw, 2.625rem); line-height: 1.15; letter-spacing: -.025em; }
.ks-h3      { font-weight: 600; font-size: clamp(1.375rem, 2vw, 1.75rem);   line-height: 1.2;  letter-spacing: -.02em; }

.ks-lead {
  font-family: var(--ks-font-body);
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.55;
  color: var(--ks-mist);
  max-width: 46ch;
}

.ks-body {
  font-family: var(--ks-font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ks-mist);
  max-width: 68ch;
}

/* Label de section : « 03 — LE PROBLÈME » */
.ks-label {
  font-family: var(--ks-font-mono);
  font-weight: 500;
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ks-smoke);
  display: block;
  margin-bottom: 1.25rem;
}
.ks-label > span { color: var(--ks-copper); }   /* le numéro */

/* Chiffres clés — toujours en mono, grands, cuivre */
.ks-metric {
  font-family: var(--ks-font-mono);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ks-copper);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   3. Grain de pellicule
   --------------------------------------------------------------------------
   SVG feTurbulence en data-URI : ~600 octets, aucune requête réseau.
   À poser en overlay sur les sections sombres et par-dessus les visuels.
   -------------------------------------------------------------------------- */

.ks-grain { position: relative; isolation: isolate; }

.ks-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

/* Variante plus marquée, pour les grands aplats vides */
.ks-grain--strong::after { opacity: .055; }

/* --------------------------------------------------------------------------
   4. Halos radiaux
   --------------------------------------------------------------------------
   Point 11 du brand kit : « uniquement radiaux et très diffus, jamais
   linéaires plein cadre ». Se pose derrière l'élément clé, jamais sur toute
   la largeur d'une section.
   -------------------------------------------------------------------------- */

/* overflow: clip empêche le halo de créer une barre de défilement horizontale
   sans créer de conteneur de défilement (contrairement à overflow: hidden). */
.ks-halo { position: relative; isolation: isolate; overflow: clip; }

.ks-halo::before {
  content: '';
  position: absolute;
  z-index: -1;
  /* Aucun débordement latéral : la dégressivité du dégradé suffit à éviter
     toute arête visible, et la page ne gagne pas de largeur parasite. */
  inset: -20% 0;
  pointer-events: none;
  background: radial-gradient(
    55% 45% at 22% 38%,
    var(--ks-copper-veil) 0%,
    rgba(255, 107, 44, .05) 38%,
    transparent 72%
  );
}

/* Halo centré, pour les bandeaux de CTA (sections 11 et 14) */
.ks-halo--center::before {
  background: radial-gradient(
    50% 60% at 50% 50%,
    rgba(255, 107, 44, .16) 0%,
    rgba(255, 107, 44, .05) 42%,
    transparent 74%
  );
}

/* Halo froid, pour les sections techniques (pile, architecture) */
.ks-halo--cool::before {
  background: radial-gradient(
    50% 50% at 78% 30%,
    rgba(79, 209, 197, .09) 0%,
    transparent 70%
  );
}

/* --------------------------------------------------------------------------
   5. Grille technique
   --------------------------------------------------------------------------
   Trait 1 px, Granit, pas de 64 px, très faible opacité. Estompée sur les
   bords par un masque radial pour éviter l'effet « papier millimétré ».
   -------------------------------------------------------------------------- */

.ks-grid { position: relative; isolation: isolate; }

.ks-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--ks-granite) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ks-granite) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .5;
  -webkit-mask-image: radial-gradient(72% 62% at 50% 42%, #000 0%, transparent 78%);
          mask-image: radial-gradient(72% 62% at 50% 42%, #000 0%, transparent 78%);
}

/* --------------------------------------------------------------------------
   6. Vignettage
   --------------------------------------------------------------------------
   À poser sur les visuels et sur la vidéo du hero. Assombrit les angles et
   ramène l'œil au centre — indispensable pour que le titre superposé tienne.
   -------------------------------------------------------------------------- */

.ks-vignette { position: relative; isolation: isolate; }

.ks-vignette::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 45%, transparent 42%, rgba(8, 9, 11, .72) 100%),
    linear-gradient(to top, var(--ks-obsidian) 0%, transparent 32%);
}

/* Voile de lisibilité pour la vidéo du hero — 40 % comme prévu au point 14 */
.ks-media-veil::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(8, 9, 11, .82) 0%,
    rgba(8, 9, 11, .58) 42%,
    rgba(8, 9, 11, .28) 100%
  );
}

/* --------------------------------------------------------------------------
   7. Liseré cuivré
   --------------------------------------------------------------------------
   Le « rim light » du brand kit, transposé en interface : un fin trait
   lumineux sur l'arête haute des surfaces élevées.
   -------------------------------------------------------------------------- */

.ks-rim {
  position: relative;
  background: var(--ks-slate);
  border: 1px solid var(--ks-granite);
  border-radius: 14px;
  box-shadow: var(--ks-shadow-card);
}

.ks-rim::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 107, 44, .55) 24%,
    rgba(255, 143, 92, .8) 50%,
    rgba(255, 107, 44, .55) 76%,
    transparent 100%
  );
}

/* --------------------------------------------------------------------------
   8. Boutons
   --------------------------------------------------------------------------
   Un seul CTA cuivre plein par écran visible (règle 80/15/5, point 6).
   Texte sur cuivre : toujours Obsidienne, jamais blanc.
   -------------------------------------------------------------------------- */

.ks-btn {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: .875rem 1.5rem;
  border-radius: 10px;
  font-family: var(--ks-font-body);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background-color var(--ks-dur-micro) var(--ks-ease),
    border-color     var(--ks-dur-micro) var(--ks-ease),
    transform        var(--ks-dur-micro) var(--ks-ease);
}

.ks-btn--primary {
  background: var(--ks-copper);
  color: var(--ks-obsidian);
}
.ks-btn--primary:hover  { background: var(--ks-copper-lt); }
.ks-btn--primary:active { background: var(--ks-copper-dk); transform: translateY(1px); }

.ks-btn--ghost {
  background: transparent;
  color: var(--ks-lime);
  border-color: var(--ks-granite);
}
.ks-btn--ghost:hover { border-color: var(--ks-concrete); }

.ks-btn:focus-visible {
  outline: 2px solid var(--ks-copper);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   9. Entrées au scroll
   --------------------------------------------------------------------------
   Fondu + translation de 16 px maximum. Rien ne rebondit, rien ne tourne.
   -------------------------------------------------------------------------- */

@keyframes ks-enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.ks-enter {
  animation: ks-enter var(--ks-dur-enter) var(--ks-ease) both;
  animation-timeline: view();
  animation-range: entry 8% cover 26%;
}

/* Repli pour les navigateurs sans animation-timeline : ajouter .is-visible
   via IntersectionObserver. */
@supports not (animation-timeline: view()) {
  .ks-enter { opacity: 0; animation: none; }
  .ks-enter.is-visible { animation: ks-enter var(--ks-dur-enter) var(--ks-ease) both; }
}

/* Décalages en cascade pour les grilles de cartes */
.ks-enter--d1 { animation-delay:  80ms; }
.ks-enter--d2 { animation-delay: 160ms; }
.ks-enter--d3 { animation-delay: 240ms; }

/* --------------------------------------------------------------------------
   10. Perspective des maquettes d'interface
   --------------------------------------------------------------------------
   Point 11 : « graphes de workflow présentés en perspective légère (10–15°) ».
   Appliqué en CSS et non dans le SVG : le rendu reste vectoriel et net.
   -------------------------------------------------------------------------- */

.ks-perspective {
  perspective: 1600px;
  perspective-origin: 50% 40%;
}

.ks-perspective > * {
  transform: rotateY(-12deg) rotateX(4deg) translateZ(0);
  transform-style: preserve-3d;
  box-shadow: var(--ks-shadow-lift);
  border-radius: 14px;
  transition: transform var(--ks-dur-enter) var(--ks-ease);
}

.ks-perspective:hover > * { transform: rotateY(-6deg) rotateX(2deg); }

/* --------------------------------------------------------------------------
   11. Accessibilité du mouvement
   --------------------------------------------------------------------------
   Non négociable. Toute animation décorative disparaît, la vidéo du hero
   est masquée au profit de son poster.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .ks-enter { opacity: 1; transform: none; }

  .ks-perspective > * { transform: none; }

  .ks-hero-video { display: none; }
  .ks-hero-poster { display: block; }

  /* Le bandeau de consentement se montre sans glisser. La transition n'était
     qu'un confort ; sa visibilité, elle, n'est pas négociable. */
  .consent__in { transform: none !important; opacity: 1 !important; }
}