/* Theme commun aux pages du site demo.symetis.ai.

   Valeurs relevees sur symetis.ai (styles calcules, pas a l'oeil) : fond #060F1F,
   texte #EEF2F7, accent cyan #4AC9E3, cartes plates blanc 3 % + filet blanc 10 %,
   rayon 14px, boutons solides, libelles en JetBrains Mono, titres Figtree 800.
   LE SITE FAIT FOI : s'il bouge, remesurer et changer ce fichier, une seule fois
   (avant, ces regles etaient recopiees dans les trois pages du site).

   Chaque page charge ce fichier AVANT son propre <style> : ses regles l'emportent,
   ce qui laisse place aux variantes (--maxw, jetons de couleur en plus, taille de
   titre, barre de navigation enrichie du portail).

   Recopie dans chaque dossier au deploiement : chacun est servi depuis sa propre
   racine, comme `fond-anime.js`. */

:root {
  --bg:#060F1F; --bg-nav:rgba(6,15,31,.82);
  --fg:#EEF2F7; --fg-dim:rgba(238,242,247,.65); --fg-dim2:rgba(238,242,247,.58);
  --surface:rgba(255,255,255,.03); --surface-haut:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.1); --border-nav:rgba(255,255,255,.08);
  --cyan:#4AC9E3; --teal:#30878F; --gold:#FAD965; --green:#6EE7B7;
  --r-btn-sm:8px; --r-btn:10px; --r-carte:14px; --r-panneau:20px;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --maxw:1320px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--cyan); color:var(--bg); }

/* --- Fond : les degrades sont le socle, et le seul fond si le visiteur a demande
       moins d'animation ; le canvas s'ajoute par-dessus quand il tourne. --- */
canvas.fond { position:fixed; inset:0; z-index:-1; pointer-events:none;
  width:100%; height:100%; }
.ciel { position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(74,201,227,.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 76% 12%, rgba(238,242,247,.4), transparent 60%),
    radial-gradient(1.6px 1.6px at 33% 62%, rgba(74,201,227,.35), transparent 60%),
    radial-gradient(1.1px 1.1px at 88% 48%, rgba(238,242,247,.3), transparent 60%),
    radial-gradient(1.3px 1.3px at 58% 82%, rgba(74,201,227,.3), transparent 60%),
    radial-gradient(60% 45% at 78% 8%, rgba(74,201,227,.07), transparent 72%),
    radial-gradient(45% 40% at 12% 72%, rgba(48,135,143,.07), transparent 72%); }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* --- Libelles techniques (signature du theme) --- */
.mono { font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em; font-size:12px; }
.mono--cyan { color:var(--cyan); }

/* --- Barre de navigation --- */
header.nav { position:sticky; top:0; z-index:50; background:var(--bg-nav);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border-nav); }
.nav-in { display:flex; align-items:center; gap:22px; height:72px; }
.logo { display:flex; align-items:center; gap:12px; }
.logo svg { height:30px; width:30px; display:block; }
.logo .dot { animation:pouls 2.6s ease-in-out infinite; transform-origin:20px 20px; }
@keyframes pouls { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(1.3)} }
/* Le nom et la signature sont empiles. Deux ecritures de balisage a couvrir :
   `<span class="mot">` (parcours, portail) et un `<span>` nu (diagnostic).
   `.logo > span` vise l'enveloppe, `.logo span span` la signature : viser
   `.logo span` tout court mettait l'enveloppe en capitales, et le nom heritait
   de la transformation. Sans ces regles, la signature remonte sur la ligne du
   nom : c'est ce que la premiere extraction avait casse. */
.logo > span { display:flex; flex-direction:column; line-height:1; }
.logo b { font-size:19px; font-weight:700; letter-spacing:-.02em; color:var(--fg);
  text-transform:none; }
.logo span span { display:block; font-family:var(--mono); font-size:9px;
  text-transform:uppercase; letter-spacing:.16em; color:var(--fg-dim2); margin-top:4px; }
.liens { margin-left:auto; display:flex; align-items:center; gap:26px; }
.liens a { font-size:14px; font-weight:500; color:var(--fg-dim); }
.liens a:hover { color:var(--fg); }
.liens a.actif { color:var(--fg); }

/* --- Boutons (solide clair / cyan / fantome) --- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:inherit; font-size:14.5px; font-weight:700; padding:13px 22px;
  border-radius:var(--r-btn); border:1px solid transparent; cursor:pointer;
  transition:background 180ms ease,border-color 180ms ease,color 180ms ease,transform 120ms ease; }
.btn:active { transform:translateY(1px); }
.btn--clair { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.btn--clair:hover { background:#fff; border-color:#fff; }
.btn--cyan { background:var(--cyan); color:var(--bg); border-color:var(--cyan);
  border-radius:var(--r-btn-sm); font-size:13.5px; padding:11px 20px; }
.btn--cyan:hover { background:#6ED6EA; border-color:#6ED6EA; }
.btn--fantome { background:transparent; color:var(--fg); border-color:var(--border); font-weight:600; }
.btn--fantome:hover { border-color:rgba(74,201,227,.5); background:var(--surface); }
.btn--sm { padding:9px 15px; font-size:13px; }
.btn:disabled { opacity:.35; cursor:not-allowed; }
.btn:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }

/* --- Typographie. Chaque page ajuste la taille de ses titres par-dessus, et la
       largeur de ligne reste a la charge de la page : elle depend du gabarit. --- */
h1 { font-size:clamp(34px,4.6vw,60px); font-weight:800; letter-spacing:-.035em;
  line-height:1.04; margin:18px 0 18px; text-wrap:balance; }
h1 .cy { color:var(--cyan); }
h2 { font-size:clamp(24px,2.8vw,34px); font-weight:800; letter-spacing:-.03em;
  margin:0 0 12px; text-wrap:balance; }
h3 { font-size:19px; font-weight:700; letter-spacing:-.02em; margin:0; }
.lede { max-width:64ch; font-size:clamp(15.5px,1.4vw,18px); color:var(--fg-dim); margin:0; }

/* --- Barre de defilement --- */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(238,242,247,.12); border-radius:999px; }
::-webkit-scrollbar-thumb:hover { background:rgba(238,242,247,.22); }

/* --- Cibles tactiles : 44px de haut au doigt, sinon les liens de navigation et
       de pied de page passent sous le seuil confortable (audit du 2026-07-27). --- */
@media (max-width:900px){
  .liens a, .bas a, footer a, .nav-in a { min-height:44px; display:inline-flex;
    align-items:center; }
}

/* --- Mouvement : on coupe tout si le visiteur l'a demande. --- */
@media (prefers-reduced-motion:reduce){
  * { animation:none!important; transition-duration:.01ms!important; }
  html { scroll-behavior:auto; }
}