/* ==========================================================================
   CTLServ, main.css
   Fond #05070c, bleus #2691f5 / #6cc6ff, Montserrat, tuiles biseautees a -34deg
   (motif du loading screen). Aucune dependance, aucune requete externe.

   Regles de style imposees:
     - Montserrat partout, y compris code et kbd.
     - Poids maximum 600, jamais plus epais.
     - Aucun letter-spacing, sur aucun element.
     - Tout element clique se lit comme une tuile biseautee.
   ========================================================================== */

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900;          /* fichier variable: un seul telechargement */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

:root {
  --blue:    #2691f5;
  --blue-lt: #6cc6ff;
  --blue-dk: #0b4f96;
  --amber:   #f5b226;
  --ok:      #3cd97b;

  --bg:      #05070c;
  --bg-alt:  #080b12;
  --surface: rgba(255, 255, 255, .045);
  --surface-2: rgba(255, 255, 255, .075);
  --br:      rgba(255, 255, 255, .09);
  --br-lt:   rgba(255, 255, 255, .17);

  --txt:     #eceff6;
  --muted:   #98a1b4;
  --dim:     #6e768a;

  --font:    "Montserrat", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  --r:       8px;
  --skew:    -34deg;
  --unskew:  34deg;
  --ease:    cubic-bezier(.22, .61, .36, 1);
  --wrap:    1240px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font: 400 16px/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--blue-lt); text-decoration: none; }
a:hover { color: #fff; }
h1, h2, h3 { margin: 0; line-height: 1.12; font-weight: 600; }
p { margin: 0; }
b, strong { font-weight: 600; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Montserrat aussi pour le code: une seule police sur tout le site. */
code, kbd { font-family: var(--font); font-size: .95em; font-weight: 500; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--blue-lt);
  outline-offset: 3px;
  border-radius: 2px;
}

[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

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

.skip {
  position: fixed; top: -60px; left: 12px; z-index: 100;
  padding: 10px 16px;
  background: var(--blue); color: #fff; font-weight: 600;
  border-radius: var(--r);
  transition: top .18s var(--ease);
}
.skip:focus { top: 12px; color: #fff; }

/* ------------------------------------------------------------------ Header */

/* Barre: logo, filet, liens ancres a GAUCHE, puis reseaux / compteur / bouton
   pousses a droite. Fond opaque, un seul filet en bas. */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 9, 14, .9);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--br);
  transition: background .25s var(--ease);
}
.hdr.is-scrolled { background: rgba(5, 7, 12, .97); }
.hdr__in { display: flex; align-items: center; min-height: 78px; }

.hdr__sep {
  width: 1px; height: 30px; flex: none;
  margin: 0 30px 0 26px;
  background: var(--br-lt);
}
.hdr__side { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* Logo: le fichier complet « CTLServ » fait 720x117, la partie CTL occupe les
   57,3 % de gauche. On l'affiche en hauteur fixe dans une boite qui coupe. */
.brand--mark {
  display: block; flex: none;
  width: 162px; height: 46px;
  overflow: hidden;
}
.brand--mark picture { display: block; }
.brand--mark img {
  width: 283px; height: 46px; max-width: none;
  transition: filter .18s var(--ease);
}
.brand--mark:hover img { filter: brightness(1.14); }

.nav { display: flex; align-items: center; gap: 38px; }
.nav a {
  position: relative;
  color: var(--txt); font-size: 15px; font-weight: 500;
  transition: color .18s var(--ease);
}
.nav a::after {                       /* soulignement biseaute au survol */
  content: ""; position: absolute; left: -4px; right: -4px; bottom: -8px;
  height: 2px;
  background: linear-gradient(100deg, var(--blue-lt), var(--blue));
  transform: skewX(var(--skew)) scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav a:hover { color: #fff; }
.nav a:hover::after { transform: skewX(var(--skew)) scaleX(1); }

/* Icones reseaux: pas de pastille, juste la couleur qui s'eclaircit. */
.ibtn {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  color: var(--muted);
  transition: color .18s var(--ease), transform .18s var(--ease);
}
.ibtn svg { width: 19px; height: 19px; fill: currentColor; }
.ibtn:hover { color: #fff; transform: translateY(-1px); }

/* Pastille d'etat, a la place du selecteur de devise de la reference. */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  color: var(--muted); font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--br-lt);
  border-radius: 999px;
  white-space: nowrap;
}
.pill b { color: var(--txt); font-weight: 600; }
.pill__dot {
  width: 7px; height: 7px; flex: none;
  background: var(--ok); border-radius: 50%;
  animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(60, 217, 123, .5); }
  70%  { box-shadow: 0 0 0 8px rgba(60, 217, 123, 0); }
  100% { box-shadow: 0 0 0 0 rgba(60, 217, 123, 0); }
}

.hdr__cta { margin-left: 4px; }

.burger { display: none; }

/* ----------------------------------------------------------------- Boutons */
/* Un bouton = une tuile. Memes valeurs que `.tiles > i`: fond, liseré bas,
   aucune bordure laterale, meme degrade et meme halo a l'etat allume. */

.cta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 34px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 32px;
  color: var(--txt); font-size: 14px; font-weight: 600;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .07);
  border: 0;
  border-bottom: 2px solid rgba(255, 255, 255, .09);
  transform: skewX(var(--skew));
  transition: transform .18s var(--ease), background .18s var(--ease),
              border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn__in {
  display: inline-flex; align-items: center; gap: 10px;
  transform: skewX(var(--unskew));
}
.btn:hover {
  color: var(--txt);
  background: rgba(255, 255, 255, .13);
  border-bottom-color: rgba(255, 255, 255, .22);
  transform: translateY(-2px) skewX(var(--skew));
}
.btn:active { transform: skewX(var(--skew)); }
.btn .ico { width: 17px; height: 17px; fill: currentColor; flex: none; }

/* Etat allume, identique a `.tiles > i.on`. */
.btn--primary {
  color: #04070d;
  background: linear-gradient(110deg, var(--blue) 0%, var(--blue-lt) 50%, var(--blue) 100%);
  border-bottom-color: var(--blue-lt);
  box-shadow: 0 0 16px rgba(38, 145, 245, .55);
}
.btn--primary:hover {
  color: #04070d;
  background: linear-gradient(110deg, #3a9df8 0%, #8ad4ff 50%, #3a9df8 100%);
  border-bottom-color: #8ad4ff;
  box-shadow: 0 0 22px rgba(38, 145, 245, .7);
}
.btn--sm { padding: 10px 22px; font-size: 12.5px; }
.btn--lg { padding: 16px 40px; font-size: 15px; }

/* -------------------------------------------------------------------- Hero */

.hero {
  position: relative;
  padding: clamp(56px, 8vw, 104px) 0 clamp(72px, 8vw, 116px);
  overflow: hidden;
}

.hero__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* Grille technique, estompee vers les bords. */
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(78% 68% at 42% 34%, #000 12%, transparent 76%);
  mask-image: radial-gradient(78% 68% at 42% 34%, #000 12%, transparent 76%);
}
/* Volontairement discret: c'est la lueur propre des objets qui doit se voir,
   pas un lavis bleu general. */
.hero__glow {
  position: absolute; inset: -34% -12% auto -12%; height: 900px;
  background:
    radial-gradient(42% 48% at 70% 34%, rgba(38, 145, 245, .17), transparent 72%),
    radial-gradient(38% 42% at 16% 10%, rgba(38, 145, 245, .09), transparent 72%);
}
/* Filigrane: le tag peint, equivalent du graffiti derriere le header de la
   reference. L'image est un tracé blanc sur alpha (le noir de la source a ete
   converti en transparence par tools/build-tag.js), on ne fait que baisser
   l'opacite. */
.hero__mark {
  position: absolute; top: -4%; right: -6%;
  display: block;
  width: min(74%, 900px);
  opacity: .07;
  user-select: none;
}
.hero__mark img { width: 100%; height: auto; }

/* La colonne des objets doit tenir le grand ancre a droite (416 px) ET le moyen
   ancre a gauche (170 px) sans qu'ils se touchent, donc au moins 600 px. */
.hero__in {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 24px; align-items: center;
}

.hero__h1 {
  font-size: clamp(34px, 4.2vw, 56px); font-weight: 600;
  text-transform: uppercase;
  hyphens: none; word-break: normal;
}
.hero__h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--blue-lt), var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.hero__lede {
  max-width: 560px; margin-top: 22px;
  color: var(--muted); font-size: clamp(15px, 1.5vw, 17.5px);
}
.hero__lede strong { color: var(--txt); font-weight: 600; }

/* Page 404: une seule colonne, centree. */
.hero--solo { display: grid; place-items: center; min-height: 82vh; padding-bottom: 120px; }
.hero__solo { position: relative; text-align: center; }
.hero__solo .hero__lede { margin-inline: auto; }
.hero__solo .cta { justify-content: center; }

/* Trois objets en levitation: le rendu 3D du sigle CTL, en trois tailles, trois
   rotations et trois cycles. `.obj` porte le mouvement, `.obj__img` l'image et
   sa lueur. */
.hero__art { position: relative; min-height: 460px; }

/* Rendu 3D detoure, 860x324, ratio 2,654: seule la largeur (`--w`) est a
   regler, la hauteur en decoule. Ancrage par les bords du conteneur, pas par
   le centre: petit en haut a gauche, moyen en bas a gauche, grand en bas a
   droite. Aucun `transform` ici, il est deja pris par l'animation. */
.obj {
  position: absolute; display: block;
  width: var(--w);
  height: calc(var(--w) / 2.654);
}
.obj__img { display: block; width: 100%; height: 100%; }
.obj__img img { display: block; width: 100%; height: 100%; }

/* La lueur epouse la silhouette (drop-shadow lit le canal alpha), au lieu d'un
   halo elliptique pose derriere. Deux passes: une serree qui detache l'objet du
   fond, une large qui diffuse. Le rayon ne s'adapte pas a la taille de
   l'element, donc chaque objet a ses propres valeurs. */
/* Le grand: en bas a droite, et c'est lui qui flotte le plus vite. */
.obj--1 {
  --w: 416px; right: 0; bottom: 15%;
  animation: float1 6.5s ease-in-out infinite;
}
.obj--1 .obj__img {
  filter: drop-shadow(0 0 7px rgba(108, 198, 255, .5))
          drop-shadow(0 0 26px rgba(38, 145, 245, .45))
          drop-shadow(0 18px 30px rgba(0, 0, 0, .7));
}

/* Le moyen: en bas a gauche, aligne sur le meme fond que le grand. */
.obj--2 {
  --w: 170px; left: 0; bottom: 15%;
  animation: float2 8.6s ease-in-out infinite; animation-delay: -3.1s;
}
.obj--2 .obj__img {
  opacity: .95;
  filter: drop-shadow(0 0 4px rgba(108, 198, 255, .5))
          drop-shadow(0 0 13px rgba(38, 145, 245, .45))
          drop-shadow(0 8px 14px rgba(0, 0, 0, .65));
}

/* Le petit: en haut a gauche, le plus loin, donc le plus lent. */
.obj--3 {
  --w: 66px; left: 0; top: 40px;
  animation: float3 11s ease-in-out infinite; animation-delay: -5.4s;
}
.obj--3 .obj__img {
  opacity: .8;
  filter: drop-shadow(0 0 3px rgba(108, 198, 255, .45))
          drop-shadow(0 0 8px rgba(38, 145, 245, .4))
          drop-shadow(0 4px 8px rgba(0, 0, 0, .6));
}

/* Un cycle par objet: amplitude, rotation et duree differentes, donc les trois
   ne repassent jamais en phase. Les inclinaisons sont volontairement bien
   distinctes, c'est la seule variete possible avec un rendu unique (on ne peut
   pas changer l'angle de vue en 3D depuis une image plate). */
@keyframes float1 {
  0%, 100% { translate: 0 -18px; rotate: -9deg; }
  50%      { translate: 0 18px;  rotate: -3deg; }
}
@keyframes float2 {
  0%, 100% { translate: 0 15px;  rotate: 14deg; }
  50%      { translate: 0 -15px; rotate: 6deg; }
}
@keyframes float3 {
  0%, 100% { translate: 0 -12px; rotate: -24deg; }
  50%      { translate: 0 12px;  rotate: -33deg; }
}

/* ------------------------------------- Barre de progression (tuiles, fixe) */
/* Remplissage par tuile entiere: une tuile est allumee ou eteinte, jamais
   coupee au milieu. main.js allume les N premieres selon le defilement. */

.tiles {
  position: fixed; left: 0; bottom: 0; z-index: 60;
  display: flex; gap: 4px;
  width: 100%; height: 26px;
  overflow: hidden;
  pointer-events: none;
}
.tiles > i {
  position: relative;
  flex: 1; height: 100%;
  background: rgba(255, 255, 255, .07);
  border-bottom: 2px solid rgba(255, 255, 255, .09);
  transform: skewX(var(--skew));
  transition: border-color .45s var(--ease), box-shadow .45s var(--ease);
}
/* Le degrade allume vit dans un calque separe dont on fait varier l'opacite.
   Transitionner `background` ne marche pas: une couleur plate et un degrade ne
   s'interpolent pas, le navigateur bascule d'un coup. */
.tiles > i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, var(--blue) 0%, var(--blue-lt) 50%, var(--blue) 100%);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.tiles > i.on::after { opacity: 1; }
.tiles > i.on {
  border-bottom-color: var(--blue-lt);
  box-shadow: 0 0 16px rgba(38, 145, 245, .55);
  animation: pulse 3.2s ease-in-out infinite;
}
.tiles > i:nth-child(2n).on { animation-delay: .2s; }
.tiles > i:nth-child(3n).on { animation-delay: .4s; }
.tiles > i:nth-child(5n).on { animation-delay: .6s; }
@keyframes pulse { 50% { opacity: .82; } }

/* ---------------------------------------------------------------- Sections */

.sec { position: relative; padding: clamp(64px, 7vw, 100px) 0; }
.sec--alt { background: var(--bg-alt); border-block: 1px solid var(--br); }

/* Titre de section centre entre deux filets, comme « Top-Selling Products ». */
.divider {
  display: flex; align-items: center; gap: 24px;
  margin-bottom: 44px;
  color: var(--txt); font-size: clamp(19px, 2.4vw, 26px); font-weight: 600;
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--br-lt));
}
.divider::after { background: linear-gradient(90deg, var(--br-lt), transparent); }
.divider span { flex: none; }

.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 20px;
  color: var(--blue-lt); font-size: 13px; font-weight: 600;
  text-transform: uppercase;
}
.kicker i {
  width: 26px; height: 8px;
  background: linear-gradient(100deg, var(--blue-lt), var(--blue));
  transform: skewX(var(--skew));
}

.h2 { margin-bottom: 14px; font-size: clamp(26px, 3.6vw, 40px); font-weight: 600; }
.h2 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--blue-lt), var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sub { max-width: 620px; margin-bottom: 34px; color: var(--muted); }
.sub--center { max-width: 640px; margin-inline: auto; text-align: center; }

/* ------------------------------------------------------------------ Cartes */

.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.card {
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--br);
  border-radius: var(--r);
  transition: transform .24s var(--ease), border-color .24s var(--ease), background .24s var(--ease);
}
.card:hover { transform: translateY(-5px); border-color: var(--br-lt); background: var(--surface-2); }

/* Visuel du mode. Motif de tuiles tant qu'aucun screenshot n'est fourni:
   `img.card__media` prend exactement la meme place. */
.card__media {
  display: block; width: 100%; height: 148px;
  object-fit: cover;
  background:
    linear-gradient(180deg, rgba(5, 7, 12, 0) 40%, rgba(5, 7, 12, .92) 100%),
    repeating-linear-gradient(124deg,
      rgba(38, 145, 245, .34) 0 22px, rgba(38, 145, 245, .05) 22px 30px),
    linear-gradient(140deg, var(--blue-dk), #071322);
  border-bottom: 1px solid var(--br);
}
.card__body { position: relative; padding: 22px 24px 26px; }
.card__body::before {                /* liseré biseauté, motif des tuiles */
  content: ""; position: absolute; top: -1px; left: -14px;
  width: 74px; height: 4px;
  background: linear-gradient(100deg, var(--blue-lt), var(--blue));
  transform: skewX(var(--skew));
  transition: width .3s var(--ease);
}
.card:hover .card__body::before { width: 150px; }
.card__ico { width: 28px; height: 28px; margin-bottom: 14px; fill: var(--blue-lt); }
.card h3 { margin-bottom: 10px; font-size: 17px; font-weight: 600; text-transform: uppercase; }
.card p { color: var(--muted); font-size: 14.6px; }

/* ------------------------------------------------------------------- Split */

.split { display: grid; gap: 48px; grid-template-columns: 1fr 1fr; align-items: center; }

.specs { display: grid; gap: 10px; }
.specs li {
  position: relative;
  padding: 14px 18px 14px 42px;
  color: var(--muted); font-size: 14.6px;
  background: var(--surface);
  border: 1px solid var(--br);
  border-radius: var(--r);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.specs li:hover { border-color: var(--br-lt); background: var(--surface-2); }
.specs li::before {
  content: ""; position: absolute; left: 16px; top: 22px;
  width: 13px; height: 5px;
  background: linear-gradient(100deg, var(--blue-lt), var(--blue));
  transform: skewX(var(--skew));
}
.specs b { color: var(--txt); font-weight: 600; }

/* ---------------------------------------------------------------- Chiffres */

.stats { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stat {
  position: relative; overflow: hidden;
  padding: 30px 26px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--br);
  border-radius: var(--r);
  transition: border-color .24s var(--ease), background .24s var(--ease);
}
.stat:hover { border-color: var(--br-lt); background: var(--surface-2); }
.stat::after {                        /* liseré bas, rappel des tuiles */
  content: ""; position: absolute; left: -14px; bottom: 0;
  width: 90px; height: 3px;
  background: linear-gradient(100deg, var(--blue-lt), var(--blue));
  transform: skewX(var(--skew));
  transition: width .3s var(--ease);
}
.stat:hover::after { width: 190px; }
.stat__v {
  display: block;
  font-size: clamp(30px, 4vw, 44px); font-weight: 600; font-style: italic;
  background: linear-gradient(100deg, #fff, var(--blue-lt));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat__v--ok {
  background: linear-gradient(100deg, #fff, var(--ok));
  -webkit-background-clip: text; background-clip: text;
}
.stat__k { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }

/* ------------------------------------------------------------------ Etapes */

.steps {
  display: grid; gap: 18px; margin-bottom: 48px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.steps li {
  padding: 26px 24px;
  background: var(--surface);
  border: 1px solid var(--br);
  border-radius: var(--r);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.steps li:hover { border-color: var(--br-lt); background: var(--surface-2); }
.steps__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 30px; margin-bottom: 16px;
  color: #04070d; font-size: 15px; font-weight: 600; font-style: italic;
  background: linear-gradient(110deg, var(--blue) 0%, var(--blue-lt) 50%, var(--blue) 100%);
  border-bottom: 2px solid var(--blue-lt);
  box-shadow: 0 0 16px rgba(38, 145, 245, .45);
  transform: skewX(var(--skew));
}
.steps h3 { margin-bottom: 9px; font-size: 16.5px; font-weight: 600; text-transform: uppercase; }
.steps p { color: var(--muted); font-size: 14.6px; }
.steps code {
  padding: 2px 7px;
  color: var(--blue-lt);
  background: rgba(38, 145, 245, .12);
  border-radius: 3px;
  white-space: nowrap;
}
kbd {
  padding: 2px 7px;
  color: var(--txt);
  background: var(--surface-2);
  border: 1px solid var(--br-lt);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-weight: 600;
}

/* ------------------------------------------------------------ Carte Discord */

/* Le visuel occupe la moitie droite et deborde jusqu'aux bords bas et droit de
   la carte, son bord gauche est fondu au masque. Le texte reste dans la moitie
   gauche, en flux normal, donc la hauteur de la carte suit le texte. */
.promo {
  position: relative; overflow: hidden;
  padding: 46px 48px;
  background:
    radial-gradient(64% 130% at 82% 60%, rgba(38, 145, 245, .16), transparent 70%),
    var(--surface);
  border: 1px solid var(--br);
  border-radius: var(--r);
}
.promo__txt { position: relative; z-index: 1; max-width: 520px; }
.promo__h { margin-bottom: 14px; font-size: clamp(24px, 3vw, 32px); font-weight: 600; }
.promo__h em {
  font-style: normal;
  background: linear-gradient(100deg, var(--blue-lt), var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.promo__p { margin-bottom: 26px; color: var(--muted); font-size: 15px; }
.promo__note { margin-top: 22px; color: var(--dim); font-size: 12.5px; line-height: 1.7; }
.promo__note code { color: var(--muted); }

.promo__art {
  position: absolute; right: 0; bottom: 0;
  display: block; width: 52%; max-width: 640px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%);
  mask-image: linear-gradient(90deg, transparent, #000 34%);
}
.promo__art img { width: 100%; height: auto; }

/* ------------------------------------------------------------------ Footer */

.ftr { padding: 60px 0 34px; background: var(--bg-alt); border-top: 1px solid var(--br); }
.ftr__grid {
  display: grid; gap: 36px;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  padding-bottom: 40px;
}
.ftr__pitch { max-width: 300px; margin-top: 18px; color: var(--muted); font-size: 14px; }
.ftr__addr { margin-top: 12px; }
.ftr__addr code { color: var(--blue-lt); font-size: 14px; }

.ftr__col { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.ftr__col h2 { margin-bottom: 4px; font-size: 14px; font-weight: 600; color: var(--txt); }
.ftr__col a { color: var(--muted); font-size: 14px; }
.ftr__col a:hover { color: var(--txt); }

.ftr__legal {
  /* 26 px de marge basse: la barre de progression est fixee par-dessus. */
  padding: 26px 0 34px; border-top: 1px solid var(--br);
  color: var(--dim); font-size: 12.5px; line-height: 1.8;
}

/* ---------------------------------------------------------- Apparitions */

/* Le masquage initial n'existe QUE si le JS peut le lever ensuite: sans script
   (ou si main.js est bloque), `scripting: none` laisse tout visible. */
@media (scripting: enabled) {
  [data-reveal] > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
  }
  [data-reveal] > :nth-child(2) { transition-delay: .07s; }
  [data-reveal] > :nth-child(3) { transition-delay: .14s; }
  [data-reveal] > :nth-child(4) { transition-delay: .21s; }
  [data-reveal] > :nth-child(5) { transition-delay: .28s; }
  [data-reveal] > :nth-child(6) { transition-delay: .35s; }
  [data-reveal].is-in > * { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- Responsive */

/* Pas d'equivalent au `2xl:right-[5%]` de la reference: leur conteneur est bien
   plus large que nos 1240 px, rentrer les objets de 5 % de chaque cote les
   ferait se toucher. On decale seulement le petit vers le bas. */
@media (min-width: 1536px) {
  .obj--3 { top: 80px; }
}

@media (max-width: 1080px) {
  .hero { padding-bottom: 132px; }
  .hero__in { grid-template-columns: 1fr; gap: 20px; }
  .hero__art { min-height: 300px; order: -1; }
  .obj--1 { --w: 320px; }
  .obj--2 { --w: 130px; }
  .obj--3 { --w: 52px; top: 16px; }
  .hero__lede { margin-inline: 0; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  /* Le visuel passe sous le texte et s'estompe, sinon il le traverse. */
  .promo { padding: 34px 28px 190px; }
  .promo__txt { max-width: none; }
  .promo__art {
    width: 92%; max-width: 460px; right: -6%;
    -webkit-mask-image: linear-gradient(0deg, #000 55%, transparent);
    mask-image: linear-gradient(0deg, #000 55%, transparent);
  }
  .ftr__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 760px) {
  .burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    margin-left: auto;
    width: 42px; height: 38px; padding: 0 9px;
    background: var(--surface);
    border: 1px solid var(--br);
    border-radius: var(--r);
    cursor: pointer;
  }
  .burger span {
    display: block; height: 2px; width: 100%;
    background: var(--txt);
    transition: transform .2s var(--ease), opacity .2s var(--ease);
  }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hdr__sep { display: none; }
  .hdr__side { margin-left: auto; gap: 12px; }
  .hdr__side .pill { display: none; }
  .hdr__cta { display: none; }

  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 8px 24px 18px;
    background: rgba(5, 7, 12, .98);
    border-bottom: 1px solid var(--br);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 15px 2px; font-size: 16px; border-bottom: 1px solid var(--br); }
  .nav a:last-child { border-bottom: 0; }
  .nav a::after { display: none; }

  .hero__mark { width: 120%; top: 2%; right: -18%; }
  .divider { gap: 14px; }
  .ftr__grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 460px) {
  /* Le biseau deborde de la largeur du bouton: on laisse la marge du .wrap
     l'absorber plutot que d'etirer les boutons bord a bord. */
  .cta { flex-direction: column; align-items: stretch; padding-inline: 14px; }
  .btn { width: 100%; padding-inline: 18px; }
  .hero__art { min-height: 210px; }
  .obj--1 { --w: 208px; }
  .obj--2 { --w: 84px; }
  .obj--3 { --w: 34px; top: 8px; }
}

/* ------------------------------------------------ Preferences utilisateur */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] > * { opacity: 1; transform: none; }
  /* Les objets gardent leur inclinaison, ils cessent seulement de bouger. */
  .obj--1 { translate: none; rotate: -6deg; }
  .obj--2 { translate: none; rotate: 10deg; }
  .obj--3 { translate: none; rotate: -28deg; }
}