/* =========================================================================
   CLIENT ZERO — Design system 2026
   Fichier partagé par toutes les pages. Chargé APRÈS les styles de chaque
   page : il harmonise couleurs, typographie, boutons, cartes et champs.
   Aucune police ni ressource externe (respect de la vie privée, RGPD).
   ========================================================================= */

:root{
  /* Couleurs */
  --bg:#050a07;
  --bg-2:#08110c;
  --panel:#0b1510;
  --card:#0c1712;
  --surface:rgba(255,255,255,.028);
  --surface-2:rgba(255,255,255,.05);
  --line:rgba(150,255,190,.10);
  --line-2:rgba(150,255,190,.18);
  --line-strong:rgba(120,255,159,.38);
  --g:#78ff9f;
  --g-2:#3ee08a;
  --g-3:#c8ffd9;
  --g-ink:#03140a;
  --g-glow:rgba(120,255,159,.32);
  --g-soft:rgba(120,255,159,.09);
  --text:#ecf7f0;
  --muted:#9fb3a6;
  --dim:#6d8176;
  --warn:#ffcf7a;
  --danger:#ff8d8d;

  /* Typo : polices système modernes (SF Pro, Segoe UI Variable, Roboto…) */
  --font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Code",Consolas,monospace;

  /* Formes & mouvement */
  --r-sm:10px;--r:14px;--r-lg:20px;--r-xl:28px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 20px 50px -20px rgba(0,0,0,.7);
  --shadow-glow:0 0 0 1px rgba(120,255,159,.25),0 18px 50px -12px rgba(120,255,159,.35);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* Halo d'ambiance + grain, fixes derrière le contenu */
body::before{
  content:"";position:fixed;inset:-10vmax;z-index:-2;pointer-events:none;
  background:
    radial-gradient(40vmax 30vmax at 82% -4%,rgba(62,224,138,.20),transparent 60%),
    radial-gradient(34vmax 26vmax at 6% 18%,rgba(40,140,90,.13),transparent 62%),
    radial-gradient(50vmax 40vmax at 50% 110%,rgba(30,110,70,.12),transparent 60%),
    var(--bg);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection{background:rgba(120,255,159,.28);color:#fff}
img{max-width:100%;height:auto}
a{color:var(--g);text-underline-offset:3px;text-decoration-thickness:1px;transition:color .2s var(--ease)}
a:hover{color:var(--g-3)}
:focus-visible{outline:2px solid var(--g);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--font-display);text-wrap:balance}
p{text-wrap:pretty}

/* ---------- Boutons ---------- */
.cz-btn,.btn,button:not(.option):not(.copier):not(.agent-btn):not([class*="diag-"]){
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.cz-btn,.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:48px;padding:13px 22px;border-radius:999px;
  font:inherit;font-weight:700;font-size:15px;letter-spacing:-.01em;line-height:1.1;
  text-decoration:none;cursor:pointer;
  color:var(--g-ink);
  background:linear-gradient(180deg,#a3ffbd 0%,var(--g) 45%,var(--g-2) 100%);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 -2px 0 rgba(0,0,0,.12) inset,0 10px 30px -8px var(--g-glow);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),filter .2s;
}
.cz-btn::after,.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .8s var(--ease);
}
.cz-btn:hover,.btn:hover{transform:translateY(-2px);color:var(--g-ink);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 -2px 0 rgba(0,0,0,.12) inset,0 16px 40px -8px rgba(120,255,159,.55)}
.cz-btn:hover::after,.btn:hover::after{transform:translateX(120%)}
.cz-btn:active,.btn:active{transform:translateY(0) scale(.98);transition-duration:.1s}
.cz-btn .arrow{display:inline-block;transition:transform .35s var(--ease)}
.cz-btn:hover .arrow{transform:translateX(4px)}

.cz-btn.ghost,.btn.secondary,.btn.ghost{
  color:var(--text);background:rgba(255,255,255,.04);
  border:1px solid var(--line-2);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.cz-btn.ghost:hover,.btn.secondary:hover,.btn.ghost:hover{color:#fff;border-color:var(--line-strong);background:rgba(120,255,159,.07);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 10px 30px -12px var(--g-glow)}
.cz-btn.ghost::after,.btn.secondary::after{background:linear-gradient(105deg,transparent 30%,rgba(120,255,159,.18) 50%,transparent 70%)}
.cz-btn.sm{min-height:40px;padding:9px 16px;font-size:14px}

/* ---------- Pastilles ---------- */
.tag,.pill,.cz-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--g);background:rgba(120,255,159,.07);
  border:1px solid rgba(120,255,159,.2);
  box-shadow:0 0 20px -6px rgba(120,255,159,.3) inset;
}

/* ---------- Champs de formulaire ---------- */
input:not([type="radio"]):not([type="checkbox"]):not([type="range"]),textarea,select{
  font:inherit;font-size:16px; /* 16px = pas de zoom automatique sur iPhone */
  color:var(--text);
  background:rgba(0,0,0,.35);
  border:1px solid var(--line-2);
  border-radius:var(--r);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s;
}
input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):hover,textarea:hover,select:hover{border-color:rgba(150,255,190,.28)}
input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):focus,textarea:focus,select:focus{
  outline:none;border-color:var(--g);background:rgba(0,0,0,.5);
  box-shadow:0 0 0 4px rgba(120,255,159,.14);
}
input::placeholder,textarea::placeholder{color:var(--dim)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--g)}

/* =========================================================================
   Harmonisation des pages secondaires (légales, connexion, espace PRO,
   résultat du diagnostic…). Ne s'applique pas à la page d'accueil.
   ========================================================================= */
body:not(.cz-home){line-height:1.65}
body:not(.cz-home) .logo{font-family:var(--font-display);font-weight:800;letter-spacing:.06em;display:inline-flex;align-items:center;gap:0;white-space:nowrap}
body:not(.cz-home) .logo::before{
  content:"";width:22px;height:22px;border-radius:7px;flex:none;margin-right:10px;
  background:radial-gradient(circle at 30% 30%,#d6ffe2,var(--g) 40%,var(--g-2) 70%,#145c33);
  box-shadow:0 0 18px -2px var(--g-glow);
}
body:not(.cz-home) .logo i{color:var(--g);font-style:normal;margin-left:.3em}
body:not(.cz-home) h1{letter-spacing:-.035em;line-height:1.02;font-weight:750}
body:not(.cz-home) h1 span,body:not(.cz-home) .hero h1 em{
  background:linear-gradient(100deg,var(--g-3),var(--g) 40%,var(--g-2));-webkit-background-clip:text;background-clip:text;color:transparent;
}
body:not(.cz-home) h2{letter-spacing:-.02em}
body:not(.cz-home) .lead,body:not(.cz-home) .muted{color:var(--muted)}

/* Cartes génériques */
body:not(.cz-home) .card,body:not(.cz-home) .week,body:not(.cz-home) .tool,body:not(.cz-home) .box,body:not(.cz-home) .legal-card{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
body:not(.cz-home) .card:hover,body:not(.cz-home) .week:hover,body:not(.cz-home) .tool:hover{border-color:var(--line-2)}
body:not(.cz-home) .box{background:rgba(0,0,0,.28)}
body:not(.cz-home) .card.notice,body:not(.cz-home) .notice{border-color:rgba(255,207,122,.25);background:linear-gradient(180deg,rgba(255,207,122,.06),rgba(255,207,122,.02))}
body:not(.cz-home) .notice strong{color:var(--warn)}

/* Boutons natifs des pages secondaires */
body:not(.cz-home) button:not(.copier):not(.agent-btn):not(.pipe-delete):not([class*="diag-"]):not(.option){
  min-height:46px;border-radius:999px;padding:12px 20px;font-weight:700;
  background:linear-gradient(180deg,#a3ffbd 0%,var(--g) 45%,var(--g-2) 100%);
  color:var(--g-ink);border:1px solid rgba(255,255,255,.35);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 10px 30px -10px var(--g-glow);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),opacity .2s;cursor:pointer;
}
body:not(.cz-home) button:not(.copier):not(.agent-btn):not(.pipe-delete):not([class*="diag-"]):not(.option):hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 16px 36px -10px rgba(120,255,159,.55)}
body:not(.cz-home) button:disabled{opacity:.55;cursor:wait;transform:none!important}
body:not(.cz-home) .account-panel button{min-height:36px!important;padding:7px 14px!important;background:rgba(255,255,255,.05)!important;color:var(--text)!important;border:1px solid var(--line-2)!important;box-shadow:none!important}

body:not(.cz-home) input:not([type="radio"]):not([type="checkbox"]):not([type="range"]),body:not(.cz-home) textarea{padding:13px 15px}
body:not(.cz-home) label{color:var(--muted)}

/* Lien « retour » */
body:not(.cz-home) .back{
  display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;
  padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);
  font-size:14px;transition:all .25s var(--ease);
}
body:not(.cz-home) .back:hover{color:var(--text);border-color:var(--line-2);background:rgba(120,255,159,.06)}

/* Barres de liens / navigation interne */
body:not(.cz-home) .links a:not(.link),body:not(.cz-home) .nav a{
  border:1px solid var(--line)!important;background:rgba(255,255,255,.03)!important;border-radius:999px!important;
  padding:9px 14px!important;color:var(--text)!important;text-decoration:none;font-size:13.5px;
  transition:all .25s var(--ease);
}
body:not(.cz-home) .links a:not(.link):hover,body:not(.cz-home) .nav a:hover{border-color:var(--line-strong)!important;color:var(--g)!important;background:rgba(120,255,159,.06)!important;transform:translateY(-1px)}

body:not(.cz-home) a.link{border-radius:var(--r-lg)!important;background:rgba(255,255,255,.03);border:1px solid var(--line)!important;transition:all .3s var(--ease)}
body:not(.cz-home) a.link:hover{border-color:var(--line-strong)!important;background:rgba(120,255,159,.05);transform:translateY(-2px)}

/* Espace PRO : éléments spécifiques */
body:not(.cz-home) .eyebrow{letter-spacing:.14em;font-size:11.5px;font-weight:700;color:var(--g)}
body:not(.cz-home) .deliver,body:not(.cz-home) .agent-out{border-left:2px solid var(--g);background:rgba(120,255,159,.05);border-radius:0 12px 12px 0}
body:not(.cz-home) .copier,body:not(.cz-home) .agent-btn{
  border-radius:999px!important;border:1px solid rgba(120,255,159,.3)!important;background:rgba(120,255,159,.08)!important;color:var(--g)!important;
  padding:8px 14px!important;font-weight:700;transition:all .25s var(--ease)!important;
}
body:not(.cz-home) .copier:hover,body:not(.cz-home) .agent-btn:hover{background:rgba(120,255,159,.16)!important;border-color:var(--g)!important;transform:translateY(-1px)}
body:not(.cz-home) .account-panel{border-radius:var(--r);border:1px solid rgba(120,255,159,.2);background:rgba(120,255,159,.05)}
body:not(.cz-home) .table,body:not(.cz-home) .rights{border-radius:var(--r);-webkit-overflow-scrolling:touch}
body:not(.cz-home) .table th,body:not(.cz-home) .rights th{color:var(--g);font-weight:700;letter-spacing:.02em}
body:not(.cz-home) .tool pre{font-family:var(--mono)}
body:not(.cz-home) .risk{background:linear-gradient(100deg,var(--g-3),var(--g));-webkit-background-clip:text;background-clip:text;color:transparent}

body:not(.cz-home) footer,body:not(.cz-home) .footer{border-top:1px solid var(--line);color:var(--dim)}
body:not(.cz-home) footer a,body:not(.cz-home) .footer a{color:var(--muted)}
body:not(.cz-home) footer a:hover,body:not(.cz-home) .footer a:hover{color:var(--g)}

/* Entrée douce des pages secondaires */
body:not(.cz-home) .wrap>*,body:not(.cz-home)>main,body:not(.cz-home) main.wrap>*{animation:cz-rise .8s var(--ease) both}
body:not(.cz-home) .wrap>*:nth-child(2){animation-delay:.06s}
body:not(.cz-home) .wrap>*:nth-child(3){animation-delay:.12s}
body:not(.cz-home) .wrap>*:nth-child(4){animation-delay:.18s}
body:not(.cz-home) .wrap>*:nth-child(n+5){animation-delay:.22s}
@keyframes cz-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Mobile : pages secondaires */
@media (max-width:640px){
  body:not(.cz-home) .card{padding:20px!important}
  body:not(.cz-home) h1{letter-spacing:-.03em}
  body:not(.cz-home) .btn{width:100%}
  body:not(.cz-home) .copier{float:none!important;margin-bottom:8px}
}

/* =========================================================================
   Animations au défilement (activées seulement si JavaScript est présent)
   ========================================================================= */
.js [data-reveal]{opacity:0;transform:translateY(22px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.js [data-reveal].in{opacity:1;transform:none;filter:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1;transform:none;filter:none}
}

/* Impression : texte foncé sur fond blanc, sans effets décoratifs */
@media print{
  body{background:#fff!important;color:#111!important}
  body::before,body::after{display:none!important}
  .card,.week,.tool,.box,.legal-card{box-shadow:none!important;background:#fff!important;border-color:#ccc!important}
  input:not([type="radio"]):not([type="checkbox"]),textarea,select{color:#111!important;background:#fff!important;border-color:#999!important;box-shadow:none!important}
  .tag,.pill,.eyebrow{color:#14532d!important;background:none!important;box-shadow:none!important}
  [data-reveal]{opacity:1!important;transform:none!important;filter:none!important}
}