/* =====================================================================
   SONDLY — Design system v2  ·  23/08/2026
   ---------------------------------------------------------------------
   Un seul fichier de style pour tout le site. Si tu changes une valeur
   dans le bloc « TOKENS » ci-dessous, TOUT le site suit.

   Principes de cette version :
   - Palette « nuance foncée » : une échelle de gris très sombres, jamais
     de noir pur, avec un accent braise (orange) et un violet profond.
   - Typographie mixte : Geist (sans, variable) pour la structure,
     Instrument Serif en italique pour les mots mis en valeur. C'est ce
     contraste de graisses et de styles DANS une même phrase qui donne
     l'effet « développé » / éditorial des sites pro.
   - Toutes les animations sont en transform / opacity / filter : ce sont
     les propriétés que le navigateur anime sans recalculer la page,
     donc sans à-coups.
   ===================================================================== */

/* =====================================================================
   1. TOKENS
   ===================================================================== */
:root {
  /* --- Échelle de fonds (du plus sombre au plus clair) --- */
  --bg:        #08080a;
  --bg-1:      #0a0a0d;
  --bg-2:      #0e0e12;
  --bg-3:      #131318;
  --bg-4:      #191920;
  --bg-5:      #21212a;

  /* --- Surfaces en verre --- */
  --glass:     rgba(255, 255, 255, 0.022);
  --glass-2:   rgba(255, 255, 255, 0.045);
  --glass-3:   rgba(255, 255, 255, 0.075);

  /* --- Traits --- */
  --line:      rgba(255, 255, 255, 0.055);
  --line-2:    rgba(255, 255, 255, 0.10);
  --line-3:    rgba(255, 255, 255, 0.16);

  /* --- Texte --- */
  --text:      #f7f7f8;
  --text-2:    #adadb8;
  --text-3:    #77777f;
  --text-4:    #4e4e57;

  /* --- Accent braise (identité Sondly) --- */
  --accent:    #ff5a3c;
  --accent-2:  #ffa079;
  --accent-3:  #c93a1e;
  --accent-a:  rgba(255, 90, 60, 0.09);
  --accent-b:  rgba(255, 90, 60, 0.22);
  --glow:      rgba(255, 90, 60, 0.40);

  /* --- Secondaires (profondeur des dégradés de fond) --- */
  --violet:    #7c5cff;
  --violet-a:  rgba(124, 92, 255, 0.22);

  /* --- États --- */
  --green:     #2ee6a8;
  --green-a:   rgba(46, 230, 168, 0.11);
  --green-b:   rgba(46, 230, 168, 0.32);
  --amber:     #ffc46b;
  --red:       #ff6b81;
  --red-a:     rgba(255, 107, 129, 0.11);
  --red-b:     rgba(255, 107, 129, 0.34);

  /* --- Dégradés réutilisables --- */
  --grad-ember: linear-gradient(135deg, #ff8a5c 0%, #ff5a3c 55%, #e8401f 100%);
  --grad-text:  linear-gradient(105deg, #ffc4ab 0%, #ff8a5c 40%, #ff5a3c 100%);

  /* --- Rayons --- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 30px;

  /* --- Typo --- */
  --ff:      "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ff-serif:"Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --ff-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Courbes d'animation --- */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Rythme vertical --- */
  --section:   clamp(76px, 9vw, 132px);
}

/* =====================================================================
   2. BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 90px;
}

body {
  font-family: var(--ff);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
svg, img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #170603; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 5px;
}

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #26262e; border-radius: 10px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #34343e; }

/* Conteneurs */
.wrap        { max-width: 1200px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 2; }
.wrap-narrow { max-width: 800px;  margin: 0 auto; padding: 0 28px; position: relative; z-index: 2; }
.mono        { font-family: var(--ff-mono); }

section { padding: var(--section) 0; position: relative; z-index: 2; }

/* Lien d'évitement clavier */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: #170603; padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip:focus { left: 0; text-decoration: none; }

/* =====================================================================
   3. TYPOGRAPHIE
   ---------------------------------------------------------------------
   L'effet « développé » : dans un même titre on fait cohabiter une
   graisse légère (.lite), une graisse forte, et un mot en serif italique
   (.ital). L'œil accroche sur le contraste, pas sur la taille.
   ===================================================================== */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.035em; line-height: 1.06; }

h1 { font-size: clamp(38px, 6.2vw, 76px); }
h2 { font-size: clamp(29px, 4vw, 47px); line-height: 1.1; }
h3 { font-size: 19px; letter-spacing: -0.022em; line-height: 1.3; }

/* Mot en graisse légère : ouvre la phrase, crée la respiration */
.lite { font-weight: 300; }
.semi { font-weight: 600; }

/* Mot en serif italique : la signature typographique de Sondly */
.ital {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.012em;
  font-size: 1.07em;
  padding-right: 0.04em;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Variante claire (sur fond déjà orangé, ou quand le dégradé fait trop) */
.ital-plain {
  font-family: var(--ff-serif);
  font-weight: 400; font-style: italic;
  font-size: 1.07em; letter-spacing: -0.012em;
  color: var(--text);
}

/* Texte en dégradé (sans serif) */
.hl {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.lead   { font-size: clamp(16.5px, 1.5vw, 19px); color: var(--text-2); line-height: 1.62; font-weight: 400; }
.muted  { color: var(--text-2); }
.faint  { color: var(--text-3); }
.small  { font-size: 13.5px; }
.center { text-align: center; }

/* Chiffres alignés (prix, compteurs, tableaux) */
.tnum { font-variant-numeric: tabular-nums; }

/* =====================================================================
   4. DÉCOR DE FOND
   ===================================================================== */
.bg-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* Grille technique, masquée en dégradé pour ne pas saturer */
.bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.026) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 15%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 15%, transparent 78%);
}

/* Faisceaux qui descendent le long de la grille (inspiré des « grid beams ») */
.bg-beams { position: absolute; inset: 0; overflow: hidden; }
.bg-beams i {
  position: absolute; top: -30%; width: 1px; height: 30%;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  opacity: 0; filter: blur(0.4px);
  animation: beamfall 9s linear infinite;
}
.bg-beams i:nth-child(1) { left: 12%;  animation-delay: 0s;   }
.bg-beams i:nth-child(2) { left: 34%;  animation-delay: 2.6s; background: linear-gradient(180deg, transparent, var(--violet), transparent); }
.bg-beams i:nth-child(3) { left: 58%;  animation-delay: 5.1s; }
.bg-beams i:nth-child(4) { left: 79%;  animation-delay: 7.3s; background: linear-gradient(180deg, transparent, var(--green), transparent); }
@keyframes beamfall {
  0%   { transform: translateY(0);     opacity: 0; }
  10%  { opacity: 0.55; }
  90%  { opacity: 0.55; }
  100% { transform: translateY(430%);  opacity: 0; }
}

/* Halos colorés qui dérivent lentement */
.orb { position: absolute; border-radius: 50%; filter: blur(100px); will-change: transform; }
.orb.o1 { width: 620px; height: 620px; top: -250px; right: -130px; background: radial-gradient(circle, rgba(255,90,60,0.50), transparent 66%); opacity: 0.5;  animation: drift1 28s ease-in-out infinite alternate; }
.orb.o2 { width: 540px; height: 540px; top: 16%;  left: -210px;   background: radial-gradient(circle, rgba(124,92,255,0.32), transparent 68%); opacity: 0.55; animation: drift2 36s ease-in-out infinite alternate; }
.orb.o3 { width: 700px; height: 500px; bottom: -300px; left: 28%; background: radial-gradient(circle, rgba(46,230,168,0.16), transparent 70%); opacity: 0.5;  animation: drift3 32s ease-in-out infinite alternate; }
@keyframes drift1 { from { transform: translate(0,0) scale(1); }    to { transform: translate(-90px,70px) scale(1.16); } }
@keyframes drift2 { from { transform: translate(0,0) scale(1); }    to { transform: translate(120px,40px) scale(1.11); } }
@keyframes drift3 { from { transform: translate(0,0) scale(1.05); } to { transform: translate(-60px,-50px) scale(0.95); } }

/* Aurore : voile de couleur posé derrière le hero */
.aurora {
  position: absolute; inset: -22% -10% auto -10%; height: 820px;
  pointer-events: none; opacity: 0.5; filter: blur(72px); z-index: 0;
  background:
    radial-gradient(38% 55% at 22% 30%, rgba(255,90,60,0.30), transparent 70%),
    radial-gradient(34% 48% at 74% 20%, rgba(124,92,255,0.24), transparent 70%),
    radial-gradient(40% 42% at 52% 70%, rgba(46,230,168,0.12), transparent 72%);
  animation: aurora 24s ease-in-out infinite alternate;
}
@keyframes aurora {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-3%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(3%, -2%, 0) scale(1.04); }
}

/* Grain : casse l'aspect « aplat numérique » */
.grain {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  opacity: 0.032; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Halo qui suit le curseur sur toute la page */
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 560px; height: 560px;
  border-radius: 50%; pointer-events: none; z-index: 1; opacity: 0;
  background: radial-gradient(circle, rgba(255,90,60,0.085), transparent 62%);
  transform: translate3d(var(--cx, -50vw), var(--cy, -50vh), 0) translate(-50%, -50%);
  transition: opacity 0.4s ease;
  will-change: transform;
}

/* Barre de progression du défilement */
.scroll-bar {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--accent-3), var(--accent), var(--accent-2));
  z-index: 95; box-shadow: 0 0 14px var(--glow);
}

/* Bande lumineuse de séparation entre deux sections */
.beam { position: relative; height: 1px; overflow: hidden; background: var(--line); z-index: 2; }
.beam::after {
  content: ""; position: absolute; top: 0; left: -30%; width: 30%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: beam 6s ease-in-out infinite;
}
@keyframes beam { 0% { left: -30%; } 60%, 100% { left: 100%; } }

/* Bande de section légèrement plus claire */
.band {
  background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.004));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Parallaxe (le décor bouge moins vite que la page) */
.par { will-change: transform; }

/* =====================================================================
   5. EN-TÊTE
   ===================================================================== */
header {
  position: sticky; top: 0; z-index: 80;
  background: rgba(8, 8, 10, 0.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s ease, background 0.35s ease;
}
header.scrolled { border-bottom-color: var(--line); background: rgba(8, 8, 10, 0.84); }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 15px 28px; max-width: 1200px; margin: 0 auto;
}

.logo {
  font-weight: 600; font-size: 19.5px; letter-spacing: -0.045em; color: var(--text);
  display: inline-block; white-space: nowrap; line-height: 1.4;
}
.logo:hover { text-decoration: none; }
.logo b { font-weight: 600; }
.logo em { font-family: var(--ff-serif); font-style: italic; font-weight: 400; font-size: 1.09em; color: var(--accent); letter-spacing: -0.02em; }
.logo .dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); margin-left: 6px; vertical-align: 3px;
  box-shadow: 0 0 12px var(--glow);
  animation: blink 2.2s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links > a:not(.btn) {
  color: var(--text-2); font-size: 14px; font-weight: 450;
  padding: 8px 13px; border-radius: 100px;
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-links > a:not(.btn):hover { color: var(--text); background: var(--glass-2); text-decoration: none; }
.nav-sep { width: 1px; height: 18px; background: var(--line-2); margin: 0 8px; }

/* Étiquette d'en-tête */
.tag-live {
  font-size: 11.5px; font-weight: 450; color: var(--text-3);
  border: 1px solid var(--line); border-radius: 100px;
  padding: 4px 11px; background: var(--glass); white-space: nowrap;
}
.logo-group { display: flex; align-items: center; gap: 13px; }


/* ---------- Selecteur de langue ---------- */
.lang {
  font-family: var(--ff-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
  color: var(--text-3); border: 1px solid var(--line-2); border-radius: 100px;
  padding: 5px 10px; line-height: 1;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.lang:hover { color: var(--text); border-color: var(--line-3); background: var(--glass-2); text-decoration: none; }
.nav-links > a.lang { padding: 5px 10px; }

/* --- Menu mobile --- */
.burger {
  display: none; width: 40px; height: 40px; border: 1px solid var(--line-2);
  background: var(--glass); border-radius: 11px; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.burger i { display: block; width: 16px; height: 1.5px; background: var(--text); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s ease; }
.burger.open i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.open i:nth-child(2) { opacity: 0; }
.burger.open i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 61px 0 auto 0; z-index: 79;
  background: rgba(8,8,10,0.97);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--line);
  padding: 14px 24px 26px;
  display: flex; flex-direction: column; gap: 2px;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  /* `visibility` bascule d'un coup, jamais en fondu : a la fermeture on la
     retarde le temps de l'animation, a l'ouverture elle passe immediatement.
     Sans ca, l'affichage du menu dependrait du bon deroulement de la
     transition — un pari inutile sur un menu de navigation. */
  transition: opacity 0.25s ease, transform 0.25s var(--ease), visibility 0s linear 0.25s;
}
.mobile-menu.open {
  transform: translateY(0); opacity: 1; visibility: visible;
  transition: opacity 0.25s ease, transform 0.25s var(--ease), visibility 0s linear 0s;
}
.mobile-menu a:not(.btn) {
  color: var(--text-2); font-size: 16px; font-weight: 450;
  padding: 13px 4px; border-bottom: 1px solid var(--line);
}
.mobile-menu a:not(.btn):hover { color: var(--text); text-decoration: none; }
.mobile-menu .btn { margin-top: 16px; }

@media (max-width: 900px) {
  .burger { display: flex; }
  .nav-links { display: none; }
  .tag-live { display: none; }
}

/* =====================================================================
   6. BOUTONS
   ---------------------------------------------------------------------
   Trois familles : plein (braise), fantôme (verre), et lien fléché.
   Le reflet qui traverse au survol est le détail qui « fait cher ».
   ===================================================================== */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: none; cursor: pointer;
  padding: 12px 21px; border-radius: 100px;
  font-family: inherit; font-weight: 550; font-size: 14.5px; letter-spacing: -0.012em;
  text-decoration: none; text-align: center; white-space: nowrap;
  color: #170603;
  background: var(--grad-ember);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.42) inset,
    0 0 0 1px rgba(255,90,60,0.55),
    0 10px 30px -12px var(--glow);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), filter 0.3s ease;
}
/* Reflet diagonal */
.btn::after {
  content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.btn:hover {
  color: #170603; text-decoration: none; transform: translateY(-2px);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.5) inset,
    0 0 0 1px rgba(255,90,60,0.75),
    0 18px 44px -14px var(--glow);
}
.btn:hover::after { animation: sheen 0.85s var(--ease); }
@keyframes sheen { from { left: -130%; } to { left: 180%; } }
.btn:active { transform: translateY(0) scale(0.985); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn:disabled::after { display: none; }
.btn svg { width: 16px; height: 16px; flex: none; transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn-lg { padding: 15px 28px; font-size: 15.5px; }
.btn-sm { padding: 9px 16px; font-size: 13.5px; }
.btn-block { display: flex; width: 100%; }

/* Fantôme : verre + bordure qui s'allume */
.btn-ghost {
  background: var(--glass-2); color: var(--text);
  box-shadow: 0 0 0 1px var(--line-2) inset;
}
.btn-ghost::after { display: none; }
.btn-ghost:hover {
  color: var(--text); background: var(--accent-a);
  box-shadow: 0 0 0 1px rgba(255,90,60,0.5) inset, 0 12px 34px -18px var(--glow);
}

/* Sombre : pour poser un second bouton sans concurrencer le principal */
.btn-dark {
  background: var(--bg-4); color: var(--text);
  box-shadow: 0 0 0 1px var(--line-2) inset;
}
.btn-dark::after { display: none; }
.btn-dark:hover { background: var(--bg-5); color: var(--text); box-shadow: 0 0 0 1px var(--line-3) inset; }

/* Le bouton impose SA couleur même dans un menu dont les liens ont la leur */
a.btn, .nav-links a.btn, .footer-links a.btn, .mobile-menu a.btn { color: #170603; }
a.btn:hover, .nav-links a.btn:hover, .footer-links a.btn:hover { color: #170603; }
a.btn-ghost, .nav-links a.btn-ghost, .mobile-menu a.btn-ghost,
a.btn-dark, .nav-links a.btn-dark { color: var(--text); }
a.btn-ghost:hover, .nav-links a.btn-ghost:hover, a.btn-dark:hover { color: var(--text); }

/* Lien fléché */
.link-arrow {
  font-size: 14.5px; font-weight: 500; color: var(--text-2);
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 0.2s ease;
}
.link-arrow:hover { color: var(--text); text-decoration: none; }
.link-arrow svg { width: 15px; height: 15px; transition: transform 0.28s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* Bouton magnétique (le script lui applique un translate au survol) */
.magnetic { will-change: transform; }

/* Roue d'attente */
.spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(23,6,3,0.28); border-top-color: #170603;
  border-radius: 50%; animation: spin 0.7s linear infinite;
  vertical-align: -2px; margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =====================================================================
   7. CARTES
   ===================================================================== */
.card {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: border-color 0.35s ease, transform 0.35s var(--ease), background 0.35s ease;
}
.card-hover:hover { border-color: var(--line-2); transform: translateY(-4px); background: var(--glass-2); }

/* Halo qui suit le curseur À L'INTÉRIEUR de la carte */
.spot { overflow: hidden; }
.spot::before {
  content: ""; position: absolute; width: 340px; height: 340px;
  background: radial-gradient(circle, var(--accent-a), transparent 62%);
  left: var(--mx, 50%); top: var(--my, 0%);
  transform: translate(-50%, -50%);
  opacity: 0; transition: opacity 0.35s ease; pointer-events: none; z-index: 0;
}
.spot:hover::before { opacity: 1; }
.spot > * { position: relative; z-index: 1; }

/* Bordure en dégradé qui tourne au survol */
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.glow-border { position: relative; }
.glow-border::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  padding: 1px; pointer-events: none; opacity: 0; z-index: 2;
  background: conic-gradient(from var(--angle), transparent 0deg, var(--accent) 70deg, var(--accent-2) 110deg, transparent 190deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity 0.4s ease;
  animation: spin-angle 4.5s linear infinite;
}
.glow-border:hover::after { opacity: 1; }
@keyframes spin-angle { to { --angle: 360deg; } }

/* Inclinaison 3D au survol */
.tilt-scene { perspective: 1200px; }
.tilt {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform 0.4s var(--ease);
}

/* =====================================================================
   8. APPARITION AU DÉFILEMENT
   ===================================================================== */
/* Le `.js` est pose sur <html> par un mini-script en haut de page.
   Consequence : si le JavaScript est desactive, bloque par une extension,
   ou s'il plante, RIEN n'est masque — la page reste entierement lisible.
   Ne jamais masquer du contenu sans cette garantie. */
.js .reveal {
  opacity: 0; transform: translateY(22px); filter: blur(6px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), filter 0.7s ease;
}
.js .reveal.visible { opacity: 1; transform: none; filter: none; }
.reveal-d1 { transition-delay: 0.07s; }
.reveal-d2 { transition-delay: 0.14s; }
.reveal-d3 { transition-delay: 0.21s; }
.reveal-d4 { transition-delay: 0.28s; }

/* Titre révélé mot par mot (le texte reste dans le HTML : les robots le lisent) */
.word-wrap { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.06em; }
.js .word {
  display: inline-block; transform: translateY(108%); opacity: 0;
  transition: transform 0.85s var(--ease-out), opacity 0.6s ease;
}
.words-in .word { transform: translateY(0); opacity: 1; }

/* =====================================================================
   9. EN-TÊTE DE SECTION
   ===================================================================== */
.section-head { margin-bottom: clamp(40px, 5vw, 62px); max-width: 780px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--text-2); max-width: 620px; margin-top: 18px; font-size: 16.5px; line-height: 1.62; }
.section-head.center p { margin-left: auto; margin-right: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--ff-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: 20px;
}
.eyebrow .ln {
  width: 26px; height: 1px; background: var(--accent); opacity: 0.8;
  transform-origin: left; transform: scaleX(0); transition: transform 0.7s var(--ease) 0.2s;
}
.reveal.visible .ln, .visible .eyebrow .ln { transform: scaleX(1); }

/* Puce d'annonce (badge du hero) */
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 450; color: var(--text-2);
  border: 1px solid var(--line-2); border-radius: 100px;
  padding: 6px 15px 6px 11px; background: var(--glass);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.pill .d { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green-b); flex: none; }
.pill .sep { width: 1px; height: 12px; background: var(--line-2); }
.pill b { color: var(--text); font-weight: 550; }

/* Puce qui pulse */
.ring { position: relative; }
.ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid currentColor; color: var(--green); opacity: 0.55;
  animation: ringpulse 2.6s ease-out infinite;
}
@keyframes ringpulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* =====================================================================
   10. BANDEAU DÉFILANT
   ===================================================================== */
.ticker-wrap {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg-1); overflow: hidden; position: relative; z-index: 2;
}
.ticker-wrap::before, .ticker-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 130px; z-index: 2; pointer-events: none;
}
.ticker-wrap::before { left: 0;  background: linear-gradient(90deg, var(--bg-1), transparent); }
.ticker-wrap::after  { right: 0; background: linear-gradient(270deg, var(--bg-1), transparent); }
.ticker { display: flex; width: max-content; animation: tick 48s linear infinite; }
.ticker-wrap:hover .ticker { animation-play-state: paused; }
.ticker-item { display: flex; align-items: center; padding: 14px 0; white-space: nowrap; }
.ti { font-size: 13.5px; color: var(--text-2); padding: 0 26px; display: inline-flex; align-items: center; gap: 9px; }
.ti b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ti .up   { color: var(--green); }
.ti .down { color: var(--accent-2); }
.ti .sep  { color: var(--text-4); padding-left: 26px; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =====================================================================
   11. FORMULAIRES
   ===================================================================== */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13.5px; font-weight: 500; margin-bottom: 9px; color: var(--text-2); }
.field .hint { display: block; font-size: 12.5px; color: var(--text-3); font-weight: 400; margin-top: 7px; line-height: 1.5; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px;
  background: var(--bg-3); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-size: 15px; font-family: inherit;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); background: var(--bg-4);
  box-shadow: 0 0 0 3px var(--accent-a);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-4); }

/* Messages */
.msg { padding: 14px 16px; border-radius: var(--r-sm); font-size: 14px; margin-bottom: 18px; display: none; line-height: 1.55; }
.msg.show { display: block; }
.msg-error { background: var(--red-a);   border: 1px solid var(--red-b);   color: #ffccd4; }
.msg-ok    { background: var(--green-a); border: 1px solid var(--green-b); color: #b3f6de; }
.msg-info  { background: var(--accent-a);border: 1px solid rgba(255,90,60,0.4); color: #ffd6c9; }

/* =====================================================================
   12. PUCES DE CONFIANCE
   ===================================================================== */
.trust-row { display: flex; flex-wrap: wrap; gap: 10px; }
.trust-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 450; color: var(--text-2);
  border: 1px solid var(--line); background: var(--glass);
  border-radius: 100px; padding: 8px 14px;
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s var(--ease);
}
.trust-chip:hover { border-color: var(--line-2); color: var(--text); transform: translateY(-2px); }
.trust-chip svg { width: 14px; height: 14px; color: var(--green); flex: none; }

/* =====================================================================
   13. ACCORDÉON (FAQ)
   ===================================================================== */
.acc { border-bottom: 1px solid var(--line); }
.acc-head {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 21px 0; font-family: inherit; font-size: 16.5px; font-weight: 500;
  color: var(--text); text-align: left; letter-spacing: -0.018em;
  transition: color 0.2s ease;
}
.acc-head:hover { color: var(--accent-2); }
.acc-icon {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--line-2); position: relative;
  transition: transform 0.4s var(--ease), border-color 0.25s ease, background 0.25s ease;
}
.acc-icon::before, .acc-icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--accent);
  transform: translate(-50%, -50%); transition: opacity 0.25s ease;
}
.acc-icon::before { width: 9px; height: 1.5px; }
.acc-icon::after  { width: 1.5px; height: 9px; }
.acc.open .acc-icon { transform: rotate(180deg); border-color: var(--accent); background: var(--accent-a); }
.acc.open .acc-icon::after { opacity: 0; }
.acc-body { overflow: hidden; height: 0; transition: height 0.45s var(--ease); }
.acc-body p { color: var(--text-2); font-size: 15px; line-height: 1.68; padding-bottom: 22px; max-width: 680px; }

/* =====================================================================
   14. PAGES DE CONTENU (mentions légales, CGU, confidentialité)
   ===================================================================== */
.legal { padding: 70px 0 100px; }
.legal h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 12px; }
.legal h2 { font-size: 22px; margin: 44px 0 14px; letter-spacing: -0.025em; }
.legal h3 { font-size: 17px; margin: 28px 0 10px; }
.legal p, .legal li { color: var(--text-2); margin-bottom: 13px; line-height: 1.7; }
.legal ul, .legal ol { padding-left: 24px; margin-bottom: 18px; }
.legal strong { color: var(--text); font-weight: 550; }
.legal a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.legal table {
  width: 100%; border-collapse: collapse; margin: 18px 0 28px; font-size: 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
}
.legal th, .legal td { border-bottom: 1px solid var(--line); padding: 12px 14px; text-align: left; vertical-align: top; }
.legal th { background: var(--glass); font-weight: 550; color: var(--text); }
.legal tr:last-child td { border-bottom: none; }
.legal .updated { color: var(--text-3); font-size: 13.5px; margin-bottom: 36px; }

/* =====================================================================
   15. PIED DE PAGE
   ===================================================================== */
footer {
  border-top: 1px solid var(--line);
  padding: 40px 0; margin-top: var(--section);
  color: var(--text-3); font-size: 13px;
  position: relative; z-index: 2;
}
.footer-inner { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-links a { color: var(--text-3); transition: color 0.2s ease; }
.footer-links a:hover { color: var(--text-2); }
.foot-status { display: flex; align-items: center; gap: 9px; }
.foot-status .d { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green-b); }

/* =====================================================================
   16. UTILITAIRES
   ===================================================================== */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 22px; }
.mt-3 { margin-top: 36px; }
.mt-4 { margin-top: 52px; }
.mb-1 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 22px; }
.mb-3 { margin-bottom: 36px; }
.hidden { display: none !important; }
/* Visible uniquement pour les lecteurs d'ecran (personnes non voyantes).
   Sert a donner une phrase propre la ou l'ecran affiche une animation. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.nowrap { white-space: nowrap; }

/* =====================================================================
   17. RESPONSIVE GLOBAL
   ===================================================================== */
@media (max-width: 640px) {
  .wrap, .wrap-narrow { padding: 0 20px; }
  .nav { padding: 13px 20px; }
  .card { padding: 22px; }
  .footer-links { gap: 16px; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .orb { filter: blur(70px); }
}

/* =====================================================================
   18. MOUVEMENT RÉDUIT
   ---------------------------------------------------------------------
   Certaines personnes règlent leur système pour supprimer les animations
   (vertiges, migraines). On respecte ce choix : le site reste complet,
   simplement immobile.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none; }
  .word { transform: none; opacity: 1; transition: none; }
  .eyebrow .ln { transform: scaleX(1); }
  .cursor-glow, .grain, .bg-beams { display: none; }
  .aurora, .beam::after, .ring::before, .glow-border::after, .orb, .ticker, .logo .dot { animation: none; }
  .acc-body { transition: none; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}