/**
 * site.css — StaticFec "Lumière"
 * Pages publiques : landing, tarifs, compte, authentification.
 *
 * Avant la refonte, chacune de ces six pages redéclarait sa propre palette
 * (--bg, --s1, --lav, --wh…) avec des valeurs déjà divergentes. Elles
 * consomment désormais les tokens de design-system.css et partagent
 * la même nav, le même pied de page et la même grammaire de section.
 */

/* ─────────────────────────────────────────
   DÉCOR DE FOND
───────────────────────────────────────── */
.sf-site-bg,
.sf-site-glow {
  position: fixed;
  pointer-events: none;
  z-index: 0;
}
/* Trame de points — en lavande translucide. Elle était en blanc à 5,5 %,
   hérité du thème sombre, donc parfaitement invisible sur fond clair. */
.sf-site-bg {
  inset: 0;
  background-image: radial-gradient(circle, rgba(109,87,212,.10) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 35%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 35%, transparent 100%);
}
.sf-site-glow {
  top: -260px;
  left: 50%;
  transform: translateX(-50%);
  width: 980px;
  height: 660px;
  background: radial-gradient(ellipse at center, rgba(124,92,252,.16) 0%, transparent 70%);
}
[data-theme="dark"] .sf-site-bg {
  background-image: radial-gradient(circle, rgba(167,139,250,.12) 1px, transparent 1px);
}

/* ─────────────────────────────────────────
   NAVIGATION
───────────────────────────────────────── */
.sf-site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--sf-space-3);
  height: 58px;
  padding: 0 var(--sf-space-10);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: var(--sf-border-w) solid var(--sf-border);
  box-shadow: 0 1px 0 rgba(109,87,212,.06);
}
[data-theme="dark"] .sf-site-nav { background: rgba(12,11,30,.9); }
.sf-site-nav-spacer { flex: 1; }
.sf-site-nav-links { display: flex; align-items: center; gap: 2px; }
.sf-site-nav-link {
  padding: 7px 13px;
  border-radius: var(--sf-radius);
  font-size: var(--sf-text-base);
  color: var(--sf-text-3);
  transition: all var(--sf-transition);
}
.sf-site-nav-link:hover { color: var(--sf-text); background: var(--sf-surface-3); }
.sf-site-nav-link.active { color: var(--sf-accent); }

/* ─────────────────────────────────────────
   ENVELOPPE
───────────────────────────────────────── */
.sf-site-wrap {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--sf-space-8);
}
.sf-site-wrap-narrow { max-width: 860px; }

/* ─────────────────────────────────────────
   EN-TÊTES DE SECTION
───────────────────────────────────────── */
.sf-site-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sf-space-2);
  padding: 5px 13px;
  border: var(--sf-border-w) solid var(--sf-accent-border);
  border-radius: 99px;
  background: var(--sf-accent-muted);
  color: var(--sf-accent);
  font-size: var(--sf-text-xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.sf-site-eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sf-accent);
  animation: sf-pulse-dot 2s ease-in-out infinite;
}
@keyframes sf-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.7); }
}

.sf-site-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sf-space-5);
  font-size: var(--sf-text-xs);
  font-weight: 600;
  color: var(--sf-text-3);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.sf-site-label::before,
.sf-site-label::after { content: ''; flex: 1; height: 1px; background: var(--sf-border); }

.sf-site-title {
  font-family: var(--sf-serif);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--sf-text);
  text-align: center;
  margin-bottom: var(--sf-space-3);
}
.sf-site-title em { font-style: italic; font-weight: 300; color: var(--sf-accent); }
.sf-site-sub {
  max-width: 620px;
  margin: 0 auto var(--sf-space-12);
  font-size: var(--sf-text-lg);
  color: var(--sf-text-2);
  text-align: center;
  line-height: 1.65;
}

/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
.sf-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sf-space-16);
  align-items: center;
  padding: var(--sf-space-20) 0 var(--sf-space-16);
}
.sf-hero h1 {
  font-family: var(--sf-serif);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.08;
  color: var(--sf-text);
  margin: var(--sf-space-6) 0 var(--sf-space-5);
}
.sf-hero h1 em { font-style: italic; font-weight: 300; color: var(--sf-accent); }
.sf-hero-sub {
  max-width: 490px;
  margin-bottom: var(--sf-space-8);
  font-size: var(--sf-text-lg);
  color: var(--sf-text-2);
  line-height: 1.7;
}
.sf-hero-ctas { display: flex; align-items: center; gap: var(--sf-space-3); flex-wrap: wrap; }
.sf-hero-meta {
  display: flex;
  align-items: center;
  gap: var(--sf-space-5);
  flex-wrap: wrap;
  margin-top: var(--sf-space-7);
}
.sf-hero-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--sf-text-sm);
  color: var(--sf-text-3);
}
.sf-hero-meta-item .sf-icon { color: var(--sf-accent); }

/* ─────────────────────────────────────────
   APERÇU D'INTERFACE
   Reconstruit avec les vrais composants plutôt qu'avec des rectangles gris.
───────────────────────────────────────── */
.sf-preview {
  border: var(--sf-border-w) solid var(--sf-border-strong);
  border-radius: var(--sf-radius-lg);
  overflow: hidden;
  background: var(--sf-surface-1);
  box-shadow: var(--sf-shadow-lg);
}
.sf-preview-bar {
  display: flex;
  align-items: center;
  gap: var(--sf-space-2);
  height: 34px;
  padding: 0 var(--sf-space-3);
  background: var(--sf-void);
  border-bottom: var(--sf-border-w) solid var(--sf-border);
}
.sf-preview-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sf-surface-5); flex-shrink: 0; }
.sf-preview-url {
  flex: 1;
  margin-left: var(--sf-space-2);
  padding: 2px 10px;
  border-radius: 99px;
  background: var(--sf-surface-2);
  font-family: var(--sf-mono);
  font-size: var(--sf-text-2xs);
  color: var(--sf-text-3);
  text-align: center;
}
.sf-preview-body { display: flex; min-height: 268px; }
.sf-preview-side {
  width: 128px;
  flex-shrink: 0;
  padding: var(--sf-space-2) 6px;
  background: var(--sf-void);
  border-right: var(--sf-border-w) solid var(--sf-border);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sf-preview-nav {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: var(--sf-radius);
  font-size: var(--sf-text-2xs);
  color: var(--sf-text-3);
  white-space: nowrap;
  overflow: hidden;
}
.sf-preview-nav .sf-icon { opacity: .65; flex-shrink: 0; }
.sf-preview-nav.active {
  background: var(--sf-accent-muted);
  color: var(--sf-accent);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--sf-accent);
}
.sf-preview-nav.active .sf-icon { opacity: 1; }
.sf-preview-main {
  flex: 1;
  padding: var(--sf-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-2);
  min-width: 0;
}
.sf-preview-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sf-preview-kpi {
  padding: 8px 9px;
  border: var(--sf-border-w) solid var(--sf-border);
  border-radius: var(--sf-radius);
  background: var(--sf-surface-1);
}
.sf-preview-kpi-lbl {
  font-size: 8px;
  font-weight: 600;
  color: var(--sf-text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}
.sf-preview-kpi-val {
  margin-top: 3px;
  font-family: var(--sf-mono);
  font-size: var(--sf-text-sm);
  font-weight: 700;
  color: var(--sf-text);
  font-variant-numeric: tabular-nums;
}
.sf-preview-kpi.pos { border-left: 2px solid var(--sf-positive); }
.sf-preview-kpi.pos .sf-preview-kpi-val { color: var(--sf-positive); }
.sf-preview-kpi.neg { border-left: 2px solid var(--sf-negative); }
.sf-preview-kpi.neg .sf-preview-kpi-val { color: var(--sf-negative); }
.sf-preview-kpi.acc { border-left: 2px solid var(--sf-accent); }

.sf-preview-chart {
  flex: 1;
  position: relative;
  padding: var(--sf-space-3) 10px 10px;
  border: var(--sf-border-w) solid var(--sf-border);
  border-radius: var(--sf-radius);
  background: var(--sf-surface-1);
  display: flex;
  flex-direction: column;
}
.sf-preview-chart-title {
  font-size: 8px;
  font-weight: 600;
  color: var(--sf-text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 8px;
}
.sf-preview-bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-height: 74px;
}
.sf-preview-bar {
  flex: 1;
  min-height: 4px;
  border-radius: 2px 2px 0 0;
  background: var(--sf-gradient-accent);
  transform-origin: bottom;
  animation: sf-bar-rise .6s cubic-bezier(.22,1,.36,1) backwards;
}
@keyframes sf-bar-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ─────────────────────────────────────────
   BANDEAU DE CHIFFRES
───────────────────────────────────────── */
.sf-site-stats {
  padding: var(--sf-space-8) 0;
  margin-bottom: var(--sf-space-20);
  border-top: var(--sf-border-w) solid var(--sf-border);
  border-bottom: var(--sf-border-w) solid var(--sf-border);
  background: var(--sf-surface-2);
}
.sf-site-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--sf-border);
  border: var(--sf-border-w) solid var(--sf-border);
  border-radius: var(--sf-radius-lg);
  overflow: hidden;
}
.sf-site-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sf-space-2);
  padding: var(--sf-space-7) var(--sf-space-5);
  background: var(--sf-surface-1);
  text-align: center;
}
.sf-site-stat-num {
  /* Fraunces plutôt que DM Mono : la police monospace dessine son zéro
     barré, si bien que « 0 € » se lisait comme un glyphe erroné. Ces
     chiffres relèvent de l'argumentaire, pas d'un tableau de données —
     ils n'ont donc pas besoin de chasse fixe, et le serif les raccorde
     aux titres de section. */
  font-family: var(--sf-serif);
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--sf-accent);
}
.sf-site-stat-num small {
  font-family: var(--sf-font);
  font-size: 22px;
  font-weight: 500;
  margin-left: 1px;
}
.sf-site-stat-label {
  max-width: 22ch;
  font-size: var(--sf-text-base);
  color: var(--sf-text-2);
  line-height: 1.5;
}
.sf-site-stat-label strong {
  display: block;
  margin-bottom: 3px;
  font-weight: 600;
  color: var(--sf-text);
}

/* ─────────────────────────────────────────
   GRILLE D'OUTILS
───────────────────────────────────────── */
/* Cartes autonomes plutôt qu'une grille en filets : avec 10 outils sur
   3 colonnes, la dernière rangée n'en contenait qu'une et les deux cases
   vides s'affichaient en aplat de la couleur de fond de la grille.
   En auto-fill, le nombre d'outils n'a plus d'incidence sur le rendu. */
.sf-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--sf-space-4);
  margin-bottom: var(--sf-space-20);
}
.sf-tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sf-space-3);
  width: 100%;
  padding: var(--sf-space-6);
  border: var(--sf-border-w) solid var(--sf-border);
  border-radius: var(--sf-radius-lg);
  background: var(--sf-surface-1);
  box-shadow: var(--sf-shadow-sm);
  font-family: var(--sf-font);
  text-align: left;
  overflow: hidden;
  transition: border-color var(--sf-transition),
              box-shadow var(--sf-transition),
              transform var(--sf-transition);
}
/* Liseré d'accent qui se déploie au survol */
.sf-tool-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--sf-gradient-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--sf-transition);
}
.sf-tool-card:hover {
  border-color: var(--sf-accent-border);
  box-shadow: var(--sf-shadow-md);
  transform: translateY(-2px);
}
.sf-tool-card:hover::before { transform: scaleY(1); }

.sf-tool-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.sf-tool-card-icon {
  width: 42px; height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sf-radius-md);
  background: var(--sf-accent-muted);
  color: var(--sf-accent);
  transition: background var(--sf-transition), color var(--sf-transition);
}
.sf-tool-card:hover .sf-tool-card-icon {
  background: var(--sf-gradient-accent);
  color: #fff;
}
.sf-tool-card-arrow {
  display: flex;
  color: var(--sf-text-4);
  transform: translateX(-4px);
  opacity: 0;
  transition: opacity var(--sf-transition), transform var(--sf-transition), color var(--sf-transition);
}
.sf-tool-card:hover .sf-tool-card-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--sf-accent);
}
.sf-tool-card-name {
  font-size: var(--sf-text-lg);
  font-weight: 600;
  color: var(--sf-text);
  letter-spacing: -.01em;
  line-height: 1.25;
}
.sf-tool-card-desc {
  flex: 1;
  font-size: var(--sf-text-base);
  color: var(--sf-text-3);
  line-height: 1.65;
}
.sf-tool-card-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  padding-top: var(--sf-space-1);
}
.sf-tool-tag {
  padding: 3px 8px;
  border: var(--sf-border-w) solid var(--sf-border);
  border-radius: 99px;
  background: var(--sf-surface-2);
  color: var(--sf-text-3);
  font-size: var(--sf-text-2xs);
  white-space: nowrap;
}

/* ─────────────────────────────────────────
   FORMES DÉCORATIVES
   Halos diffus posés derrière certaines sections. La page était une suite
   de rectangles blancs sur fond uni : ces masses colorées introduisent des
   courbes et de la profondeur là où il n'y avait que des angles droits.
   Purement ornementales — jamais interactives, jamais lues.
───────────────────────────────────────── */
.sf-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(60px);
  opacity: .55;
}
.sf-shape-violet { background: radial-gradient(circle, rgba(124,92,252,.30), transparent 70%); }
.sf-shape-mint   { background: radial-gradient(circle, rgba(5,150,105,.18),  transparent 70%); }
.sf-shape-amber  { background: radial-gradient(circle, rgba(217,119,6,.16),  transparent 70%); }
.sf-section-rel {
  position: relative;
  /* Les halos débordent volontairement de leur conteneur : sans rognage ils
     provoqueraient une barre de défilement horizontale sur écran étroit.
     `clip` rogne sans créer de conteneur de défilement — contrairement à
     `hidden`, il ne casserait pas un position:sticky — et la marge laisse
     passer les ombres portées et le soulèvement au survol des cartes. */
  overflow: clip;
  overflow-clip-margin: 28px;
}
.sf-section-rel > *:not(.sf-shape) { position: relative; z-index: 1; }

/* Relief : un filet clair sur l'arête supérieure simule une lumière rasante
   et détache la carte du fond, là où une simple bordure l'aplatissait. */
.sf-tool-card,
.sf-step,
.sf-privacy-col,
.sf-site-cta {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(109,87,212,.06),
    0 4px 12px rgba(109,87,212,.05);
}
[data-theme="dark"] .sf-tool-card,
[data-theme="dark"] .sf-step,
[data-theme="dark"] .sf-privacy-col,
[data-theme="dark"] .sf-site-cta {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 4px 16px rgba(0,0,0,.4);
}

/* ─────────────────────────────────────────
   ÉTAPES
───────────────────────────────────────── */
.sf-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sf-space-5);
  margin-bottom: var(--sf-space-20);
}
.sf-step {
  position: relative;
  padding: var(--sf-space-7) var(--sf-space-6) var(--sf-space-6);
  border: var(--sf-border-w) solid var(--sf-border);
  border-radius: var(--sf-radius-xl);
  background: var(--sf-surface-1);
  overflow: hidden;
  transition: transform var(--sf-transition), box-shadow var(--sf-transition);
}
/* Aplat coloré en fond de carte, qui remplit l'angle supérieur droit */
.sf-step::after {
  content: '';
  position: absolute;
  top: -48px; right: -48px;
  width: 132px; height: 132px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sf-accent-muted), transparent 70%);
  pointer-events: none;
}
.sf-step:hover { transform: translateY(-2px); }
.sf-step-num {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-bottom: var(--sf-space-5);
  border-radius: 50%;
  background: var(--sf-gradient-accent);
  color: #fff;
  font-family: var(--sf-serif);
  font-size: var(--sf-text-lg);
  font-weight: 600;
  /* Anneau clair : détache la pastille du fond de carte */
  box-shadow: 0 0 0 5px var(--sf-accent-muted), 0 4px 12px rgba(124,92,252,.3);
}
.sf-step-title {
  position: relative;
  font-size: var(--sf-text-lg);
  font-weight: 600;
  color: var(--sf-text);
  margin-bottom: 8px;
}
.sf-step-body {
  position: relative;
  font-size: var(--sf-text-base);
  color: var(--sf-text-3);
  line-height: 1.7;
}

/* ─────────────────────────────────────────
   CONFIDENTIALITÉ — deux colonnes
───────────────────────────────────────── */
.sf-privacy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sf-space-5);
  margin-bottom: var(--sf-space-8);
}
.sf-privacy-col {
  position: relative;
  padding: var(--sf-space-7);
  border: var(--sf-border-w) solid var(--sf-border);
  border-radius: var(--sf-radius-xl);
  background: var(--sf-surface-1);
  overflow: hidden;
}
/* Teinte de fond plutôt qu'un simple liseré : la distinction entre ce qui
   reste local et ce qui est transmis se lit alors d'un coup d'œil, sans
   avoir à repérer une bordure de 3px. */
.sf-privacy-col::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  pointer-events: none;
}
.sf-privacy-col.local::before  { background: linear-gradient(to bottom, var(--sf-positive-bg), transparent); }
.sf-privacy-col.remote::before { background: linear-gradient(to bottom, var(--sf-warning-bg),  transparent); }
.sf-privacy-col.local  { border-top: 3px solid var(--sf-positive); }
.sf-privacy-col.remote { border-top: 3px solid var(--sf-warning); }
.sf-privacy-col > * { position: relative; }
.sf-privacy-head {
  display: flex;
  align-items: center;
  gap: var(--sf-space-2);
  margin-bottom: var(--sf-space-2);
  font-size: var(--sf-text-md);
  font-weight: 600;
  color: var(--sf-text);
}
.sf-privacy-col.local  .sf-privacy-head .sf-icon { color: var(--sf-positive); }
.sf-privacy-col.remote .sf-privacy-head .sf-icon { color: var(--sf-warning); }
.sf-privacy-lead { font-size: var(--sf-text-sm); color: var(--sf-text-3); margin-bottom: var(--sf-space-5); line-height: 1.6; }
.sf-privacy-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.sf-privacy-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sf-space-2);
  font-size: var(--sf-text-base);
  color: var(--sf-text-2);
  line-height: 1.6;
}
.sf-privacy-list li .sf-icon { flex-shrink: 0; margin-top: 3px; }
.sf-privacy-col.local  .sf-privacy-list .sf-icon { color: var(--sf-positive); }
.sf-privacy-col.remote .sf-privacy-list .sf-icon { color: var(--sf-warning); }
.sf-privacy-list code {
  font-size: var(--sf-text-xs);
  background: var(--sf-surface-3);
}

/* ─────────────────────────────────────────
   FAQ
───────────────────────────────────────── */
.sf-faq { max-width: 760px; margin: 0 auto var(--sf-space-20); }
.sf-faq-item {
  margin-bottom: var(--sf-space-2);
  border: var(--sf-border-w) solid var(--sf-border);
  border-radius: var(--sf-radius-md);
  background: var(--sf-surface-1);
  overflow: hidden;
}
.sf-faq-item.open { border-color: var(--sf-accent-border); }
.sf-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sf-space-3);
  width: 100%;
  padding: var(--sf-space-4) var(--sf-space-5);
  border: none;
  background: none;
  color: var(--sf-text);
  font-family: var(--sf-font);
  font-size: var(--sf-text-md);
  font-weight: 500;
  text-align: left;
  transition: background var(--sf-transition);
}
.sf-faq-q:hover { background: var(--sf-surface-2); }
.sf-faq-caret { display: flex; color: var(--sf-text-3); flex-shrink: 0; transition: transform var(--sf-transition); }
.sf-faq-item.open .sf-faq-caret { transform: rotate(180deg); color: var(--sf-accent); }
.sf-faq-a {
  display: none;
  padding: 0 var(--sf-space-5) var(--sf-space-5);
  font-size: var(--sf-text-base);
  color: var(--sf-text-2);
  line-height: 1.75;
}
.sf-faq-item.open .sf-faq-a { display: block; }
.sf-faq-a p + p { margin-top: var(--sf-space-3); }

/* ─────────────────────────────────────────
   APPEL À L'ACTION
───────────────────────────────────────── */
.sf-site-cta {
  position: relative;
  overflow: hidden;
  padding: var(--sf-space-16);
  margin-bottom: var(--sf-space-20);
  border: var(--sf-border-w) solid var(--sf-accent-border);
  border-radius: var(--sf-radius-2xl);
  background: var(--sf-surface-1);
  text-align: center;
  box-shadow: var(--sf-shadow-md);
}
.sf-site-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(124,92,252,.14) 0%, transparent 62%);
  pointer-events: none;
}
.sf-site-cta > * { position: relative; }
.sf-site-cta-title {
  font-family: var(--sf-serif);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--sf-text);
  margin-bottom: var(--sf-space-3);
}
.sf-site-cta-sub {
  font-size: var(--sf-text-lg);
  color: var(--sf-text-2);
  line-height: 1.65;
  margin-bottom: var(--sf-space-8);
}
.sf-site-cta-note { margin-top: var(--sf-space-4); font-size: var(--sf-text-sm); color: var(--sf-text-3); }

/* ─────────────────────────────────────────
   PIED DE PAGE
───────────────────────────────────────── */
.sf-site-footer {
  border-top: var(--sf-border-w) solid var(--sf-border);
  padding: var(--sf-space-8) 0 var(--sf-space-10);
}
.sf-site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sf-space-4);
  flex-wrap: wrap;
}
.sf-site-footer-copy { font-size: var(--sf-text-sm); color: var(--sf-text-3); }
.sf-site-footer-links { display: flex; gap: var(--sf-space-5); flex-wrap: wrap; }
.sf-site-footer-links a { font-size: var(--sf-text-sm); color: var(--sf-text-3); transition: color var(--sf-transition); }
.sf-site-footer-links a:hover { color: var(--sf-accent); }

/* ─────────────────────────────────────────
   BASCULE DE THÈME
   Présente sur toutes les pages publiques : la préférence était jusqu'ici
   inaccessible hors de l'application, alors même qu'elle était enregistrée.
───────────────────────────────────────── */
.sf-theme-toggle {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--sf-radius-md);
  background: none;
  color: var(--sf-text-3);
  flex-shrink: 0;
  transition: all var(--sf-transition);
}
.sf-theme-toggle:hover { background: var(--sf-surface-3); color: var(--sf-text); }

/* Sur les écrans d'authentification, il n'y a pas de barre de navigation :
   le bouton se pose dans le coin, hors du flux. */
.sf-auth-theme {
  position: fixed;
  top: var(--sf-space-5);
  right: var(--sf-space-5);
  z-index: 10;
}

/* ─────────────────────────────────────────
   PAGES D'AUTHENTIFICATION
───────────────────────────────────────── */
.sf-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--sf-space-8) var(--sf-space-5);
  position: relative;
  z-index: 1;
  transition: opacity .18s ease;
}

/* Firebase met 100 à 400 ms à restaurer une session depuis IndexedDB. Sans
   cette attente, un utilisateur déjà connecté voyait le formulaire de
   connexion apparaître puis disparaître avant d'être redirigé. Une roue
   d'attente prend sa place, plutôt qu'un écran vide. */
.sf-auth-resolving > * { opacity: 0; pointer-events: none; }
.sf-auth-resolving::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--sf-border-strong);
  border-top-color: var(--sf-accent);
  border-radius: 50%;
  animation: sf-spin .7s linear infinite;
}
.sf-auth-card {
  width: 100%;
  max-width: 420px;
  padding: var(--sf-space-10);
  border: var(--sf-border-w) solid var(--sf-border);
  border-radius: var(--sf-radius-2xl);
  background: var(--sf-surface-1);
  box-shadow: var(--sf-shadow-lg);
}
.sf-auth-card-wide { max-width: 480px; }
.sf-auth-logo { display: flex; justify-content: center; margin-bottom: var(--sf-space-7); }
.sf-auth-title {
  font-family: var(--sf-serif);
  font-size: var(--sf-text-2xl);
  font-weight: 600;
  color: var(--sf-text);
  text-align: center;
  letter-spacing: -.02em;
}
.sf-auth-sub {
  margin: 6px 0 var(--sf-space-8);
  font-size: var(--sf-text-base);
  color: var(--sf-text-3);
  text-align: center;
  line-height: 1.6;
}
.sf-auth-form { display: flex; flex-direction: column; gap: var(--sf-space-4); }
.sf-auth-actions { margin-top: var(--sf-space-2); }
.sf-auth-sep {
  display: flex;
  align-items: center;
  gap: var(--sf-space-3);
  margin: var(--sf-space-6) 0;
  font-size: var(--sf-text-xs);
  color: var(--sf-text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.sf-auth-sep::before,
.sf-auth-sep::after { content: ''; flex: 1; height: 1px; background: var(--sf-border); }
.sf-auth-foot {
  margin-top: var(--sf-space-7);
  padding-top: var(--sf-space-5);
  border-top: var(--sf-border-w) solid var(--sf-border);
  font-size: var(--sf-text-base);
  color: var(--sf-text-3);
  text-align: center;
}
.sf-auth-legal {
  margin-top: var(--sf-space-4);
  font-size: var(--sf-text-xs);
  color: var(--sf-text-4);
  text-align: center;
  line-height: 1.6;
}
.sf-auth-msg { display: none; margin-bottom: var(--sf-space-5); }
.sf-auth-msg.visible { display: flex; }

/* Bouton fournisseur d'identité (Google…) */
.sf-btn-provider {
  width: 100%;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  border: var(--sf-border-w-2) solid var(--sf-border-strong);
  border-radius: var(--sf-radius-md);
  background: var(--sf-surface-1);
  color: var(--sf-text);
  font-family: var(--sf-font);
  font-size: var(--sf-text-md);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  transition: all var(--sf-transition);
}
.sf-btn-provider:hover { background: var(--sf-surface-2); border-color: var(--sf-accent-border); }
.sf-btn-provider svg { flex-shrink: 0; }
.sf-btn-block { width: 100%; justify-content: center; }

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 900px) {
  .sf-hero { grid-template-columns: 1fr; gap: var(--sf-space-10); padding: var(--sf-space-12) 0 var(--sf-space-10); }
  .sf-hero-visual { display: none; }
  .sf-steps { grid-template-columns: 1fr; }
  .sf-privacy-grid { grid-template-columns: 1fr; }
  .sf-site-nav { padding: 0 var(--sf-space-5); }
}
@media (max-width: 640px) {
  .sf-site-wrap { padding: 0 var(--sf-space-5); }
  .sf-site-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .sf-site-cta { padding: var(--sf-space-10) var(--sf-space-6); }
  .sf-site-nav-links { display: none; }
  .sf-auth-card { padding: var(--sf-space-7); }
}