/* ============================================================
   signature.css — habillage éditorial des pages publiques de
   SouverainCode. Chargé après app.css, uniquement sur les pages
   publiques (accueil, SouverainBox, auth, aide, légal, devis,
   FR + EN). N'affecte pas l'application (app.html, bureau, talk...).

   Direction « Québec moderne » : grand sans serif net, bleu
   ardoise + blanc cassé, étiquettes monospace discrètes (clin
   d'œil au code), motif de courbes très léger façon archipel.
   Aucune police externe (CSP style-src 'self') : piles système.
   ============================================================ */

:root{
  /* Sans d'affichage net, pile système (pas de dépendance externe). */
  --display:"Helvetica Neue","Arial Nova","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --read:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --radius:14px;
  --radius-lg:20px;
  /* Bleu ardoise Québec + sable chaud comme second accent (loin du corail). */
  --ardoise:#1d2b3a;
  --sable:#c9a35b;
}
:root:not([data-theme="light"]){ --ardoise:#dbe4f0; }
:root[data-theme="dark"]{ --ardoise:#dbe4f0; }

/* --- Lecture en sans, plus chaleureuse que le monospace --- */
body.landing,
body.auth,
body.devis-page,
body.admin,
body:not([class]){
  font-family:var(--read);
}

/* --- Titres en grand sans serif serré --- */
.hero-title,
.section-title,
h1, h2,
.brand-name,
.pricing-card h3,
.interface h3,
.footer-message{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--ardoise);
}
.hero-title{ line-height:.98; }

/* La deuxième ligne du hero passe du dégradé bleu à un aplat ardoise :
   sobre, ancré, et surtout pas la signature d'un autre. */
.grad{
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  color:var(--accent);
}

/* --- Étiquette / kicker : monospace discret + filet ardoise --- */
.hero-kicker{
  font-family:var(--font); /* JetBrains Mono, déjà locale */
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12px;
  color:var(--text-dim);
  display:inline-flex;
  align-items:center;
  gap:12px;
}
.hero-kicker::before{
  content:"";
  width:28px;
  height:2px;
  background:var(--accent);
  display:inline-block;
}
.hero-badge{
  border-radius:999px;
  font-family:var(--read);
  letter-spacing:.01em;
}

/* --- Boutons : coins doux (14px), pas la pilule pleine « éditoriale » --- */
.btn{ border-radius:12px; font-weight:600; }
.btn-lg{ border-radius:12px; padding:14px 28px; }
.btn-primary{
  background:var(--accent);
  color:#fff;
  box-shadow:0 10px 24px rgba(79,110,247,.22);
}
.btn-primary:hover{ filter:brightness(1.06); }
.btn-ghost{ border-color:var(--border); }

/* --- Nav --- */
.brand-name{ font-weight:800; font-size:19px; letter-spacing:-.02em; }

/* --- Hero : motif de courbes très léger, façon archipel / relief.
   Uniquement des dégradés CSS (aucune image, compatible CSP). --- */
.hero{
  padding-block:92px 60px;
  position:relative;
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-10% -20% auto -20%;
  height:80%;
  z-index:-1;
  background:
    radial-gradient(60% 40% at 30% 20%, color-mix(in srgb,var(--accent) 12%,transparent), transparent 70%),
    radial-gradient(50% 40% at 78% 30%, color-mix(in srgb,var(--sable) 14%,transparent), transparent 72%);
  opacity:.7;
  pointer-events:none;
}

/* --- Cartes de prix : radius généreux, léger relief --- */
.pricing-card{ border-radius:var(--radius-lg); }
.pricing-price{ font-family:var(--display); font-weight:800; letter-spacing:-.02em; }

/* --- Sections : titres plus présents --- */
.section-title{ font-size:clamp(28px,4.4vw,46px); line-height:1.02; }
.section-eyebrow{
  font-family:var(--font);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12px;
  color:var(--accent);
}

/* --- Pied de page --- */
.footer-message{ font-family:var(--display); font-weight:700; }