/* ============================================================================
   TRISKELL STUDIO — Landing officielle
   ============================================================================
   Charte alignée sur le Lanceur (La Table Ronde) :
   - Palette : indigo/violet (CTA tech) + or doré (héraldique, services humains)
   - Typo : Cinzel (titres, sceau Round Table) + Inter (corps)
   - Dark theme dominant
   - Glow effects, gradients, micro-animations
   ============================================================================ */

/* ---- Imports fonts ----
   Fraunces : variable serif moderne avec optical sizing (les gros titres
   sont plus contrastés et affirmés que les petits). Choisi pour donner du
   caractère sans tomber dans le cliché médiéval (le Cinzel précédent).
   Inter : sans-serif neutre, très lisible, pour le corps. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---- Palette (alignée sur le Lanceur) ---- */
  --triskell-indigo: #6366f1;
  --triskell-violet: #a78bfa;
  --triskell-orange: #f97316;

  --accent: #7c7fe9;
  --accent-hot: #9396f0;
  --accent-shadow: rgba(124, 127, 233, 0.22);

  --gold: #d4b35a;
  --gold-soft: #e6cd87;
  --gold-deep: #c9a961;
  --gold-shadow: rgba(212, 179, 90, 0.20);

  --green: #6db285;

  /* ---- Backgrounds dark ---- */
  --bg: #0c0f15;
  --bg-2: #11151e;
  --bg-3: #1d222e;
  --bg-card: #161a23;
  --bg-card-hover: #1c2030;

  /* ---- Texte ---- */
  --text: #ecebf5;
  --text-dim: #9da3b3;
  --text-muted: #6b7180;

  /* ---- Bordures ---- */
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-gold: rgba(212, 179, 90, 0.40);

  /* ---- Layout ---- */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;

  /* ---- Fonts ---- */
  --font-quest: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Shadows ---- */
  --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.30);
  --shadow-strong: 0 22px 56px rgba(0, 0, 0, 0.55);
  --shadow-gold: 0 12px 40px rgba(212, 179, 90, 0.20);
  --shadow-violet: 0 12px 40px rgba(124, 127, 233, 0.30);
}

/* ============================================================================
   BASE
   ============================================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 1200px 700px at 50% -200px, rgba(124, 127, 233, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 800px 500px at 80% 30%, rgba(212, 179, 90, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 600px 400px at 10% 70%, rgba(167, 139, 250, 0.05) 0%, transparent 50%);
  background-attachment: fixed;
  overflow-x: hidden;
}

main { display: block; }

a { color: var(--accent-hot); text-decoration: none; transition: color 0.18s; }
a:hover { color: var(--gold-soft); }

img { max-width: 100%; display: block; }

.muted { color: var(--text-dim); }
.small { font-size: 13px; }
.accent { color: var(--gold-soft); }

/* Typo de base — Fraunces avec letter-spacing TIGHT pour effet editorial moderne */
h1, h2, h3, h4 {
  font-family: var(--font-quest);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 16px;
  color: var(--text);
  font-variation-settings: "opsz" 144, "WONK" 0;
}
h1 {
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.035em;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
}
h2 { font-size: clamp(28px, 3.5vw, 42px); letter-spacing: -0.025em; }
h3 { font-size: 20px; letter-spacing: -0.015em; }
p { margin: 0 0 14px; }

/* ============================================================================
   NAV
   ============================================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px;
  background: rgba(12, 15, 21, 0.80);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand-logo {
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 0 16px rgba(167, 139, 250, 0.40));
}
.brand-name {
  font-family: var(--font-quest);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.brand-sub {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-soft);
  opacity: 0.75;
  margin-left: 6px;
}
.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
}
.nav-links a {
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.4px;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--gold-soft); }

/* ============================================================================
   HERO — paysage Excalibur en parallax + titre énorme
   ============================================================================ */
.hero {
  position: relative;
  padding: 100px 40px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
/* Voile doré radial qui descend du haut */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 1000px 500px at 50% 0%,
      rgba(212, 179, 90, 0.12) 0%,
      rgba(124, 127, 233, 0.08) 35%,
      transparent 75%);
  pointer-events: none;
  z-index: 0;
}
/* Paysage Excalibur en bas du hero */
.hero::after {
  content: '';
  position: absolute;
  left: -10vw;
  right: -10vw;
  bottom: -20px;
  height: 280px;
  background-image: url('assets/chateau.png');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
}

.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-quest);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--gold-soft);
  padding: 8px 18px;
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  background: rgba(212, 179, 90, 0.05);
  margin-bottom: 32px;
  animation: hero-fade-in 0.8s ease 0.1s both;
}

.hero h1 {
  font-size: clamp(44px, 7vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 800;
  margin-bottom: 28px;
  animation: hero-fade-in 0.9s ease 0.25s both;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
}
.hero h1 .accent {
  background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 24px rgba(212, 179, 90, 0.30));
}

.lede {
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 720px;
  margin: 0 auto 36px;
  animation: hero-fade-in 1s ease 0.4s both;
}
.lede strong { color: var(--text); font-weight: 600; }

.cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
  animation: hero-fade-in 1.1s ease 0.55s both;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 60%, var(--gold-deep) 100%);
  color: #1a1408;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  border: 1px solid rgba(212, 179, 90, 0.6);
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.10) inset,
    0 12px 36px rgba(212, 179, 90, 0.30),
    0 2px 0 rgba(0, 0, 0, 0.20) inset;
  transition: all 0.22s ease;
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.30) 50%,
    transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16) inset,
    0 16px 44px rgba(212, 179, 90, 0.45);
  color: #1a1408;
}
.btn-primary:hover::before { transform: translateX(100%); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 28px;
  background: transparent;
  color: var(--text);
  font-weight: 500;
  font-size: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}
.btn-ghost:hover {
  border-color: var(--gold-soft);
  color: var(--gold-soft);
  background: rgba(212, 179, 90, 0.05);
}

.dl-icon { font-size: 18px; }
.dl-meta { font-size: 12px; opacity: 0.65; font-weight: 500; }

.reassurance-row {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-muted);
  animation: hero-fade-in 1.2s ease 0.7s both;
}
.reassurance-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.reassurance-row .check {
  color: var(--green);
  font-weight: 700;
}

.smartscreen-hint {
  margin-top: 12px;
  font-size: 12px;
  animation: hero-fade-in 1.3s ease 0.85s both;
}
.smartscreen-hint a {
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.15);
}
.smartscreen-hint a:hover { color: var(--gold-soft); }

@keyframes hero-fade-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   HERO MOCKUP — Faux Lanceur en CSS pur sous le titre
   ============================================================================ */
.hero-mockup {
  position: relative;
  z-index: 1;
  margin: 56px auto 0;
  max-width: 920px;
  width: 100%;
  perspective: 1800px;
  animation: hero-fade-in 1.2s ease 0.85s both;
}

/* === Vrai screenshot du Lanceur (remplace le mockup CSS) === */
.hero-real-shot {
  margin: 0;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(212, 179, 90, 0.25);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 50px 100px -30px rgba(0, 0, 0, 0.85),
    0 30px 60px -20px rgba(124, 127, 233, 0.25);
  background: var(--bg-card);
  transform: rotateX(6deg) translateZ(0);
  transition: transform 0.5s ease;
}
.hero-mockup:hover .hero-real-shot {
  transform: rotateX(0deg) translateZ(0);
}
.hero-real-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.hero-real-glow {
  position: absolute;
  inset: -40px -60px -60px -40px;
  background: radial-gradient(
    ellipse at 50% 60%,
    rgba(212, 179, 90, 0.14) 0%,
    rgba(124, 127, 233, 0.10) 35%,
    transparent 70%
  );
  z-index: -1;
  filter: blur(40px);
  pointer-events: none;
}
.mockup-frame {
  background: linear-gradient(180deg, #1d222e 0%, #161a23 100%);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(212, 179, 90, 0.10),
    0 50px 100px -30px rgba(0, 0, 0, 0.85),
    0 30px 60px -20px rgba(124, 127, 233, 0.30);
  overflow: hidden;
  transform: rotateX(6deg) translateZ(0);
  transition: transform 0.5s ease;
}
.hero-mockup:hover .mockup-frame {
  transform: rotateX(0deg) translateZ(0);
}
.mockup-titlebar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.30);
  border-bottom: 1px solid var(--border);
}
.mockup-dots { display: inline-flex; gap: 6px; }
.mockup-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.20);
}
.mockup-dots i:nth-child(1) { background: #ff5f57; }
.mockup-dots i:nth-child(2) { background: #febc2e; }
.mockup-dots i:nth-child(3) { background: #28c841; }
.mockup-title {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.3px;
}
.mockup-body {
  padding: 24px 26px 32px;
}
.mockup-tabs {
  display: flex;
  gap: 28px;
  align-items: baseline;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
}
.mockup-tab {
  font-family: var(--font-quest);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  opacity: 0.55;
  text-transform: uppercase;
}
.mockup-tab.is-active {
  color: var(--gold-soft);
  opacity: 1;
  font-size: 16px;
  text-shadow: 0 0 14px rgba(212, 179, 90, 0.25);
  position: relative;
}
.mockup-tab.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -19px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
}
.mockup-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  gap: 12px;
}
.mockup-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  position: relative;
}
.mockup-tile img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}
.mockup-tile-name {
  font-family: var(--font-quest);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  text-align: center;
}
.mockup-tile-featured {
  grid-column: span 2;
  grid-row: span 2;
  background: linear-gradient(135deg,
    rgba(212, 179, 90, 0.12) 0%,
    rgba(167, 139, 250, 0.06) 60%,
    var(--bg-card) 100%);
  border-color: rgba(212, 179, 90, 0.32);
}
.mockup-tile-featured img { width: 60px; height: 60px; }
.mockup-tile-featured .mockup-tile-name {
  font-size: 16px;
  color: var(--gold-soft);
  margin-top: 4px;
}
.mockup-ribbon {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, rgba(212, 179, 90, 0.20), rgba(212, 179, 90, 0.08));
  color: var(--gold-soft);
  border: 1px solid rgba(212, 179, 90, 0.42);
  font-family: var(--font-body);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
}
@media (max-width: 700px) {
  .mockup-grid { grid-template-columns: repeat(3, 1fr); }
  .mockup-tile-featured { grid-column: span 3; grid-row: auto; }
  .mockup-frame { transform: none; }
}

/* ============================================================================
   STATS — Bandeau de chiffres clés entre hero et manifeste
   ============================================================================ */
.stats {
  padding: 48px 40px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(212, 179, 90, 0.03);
}
.stats-row {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.stat {
  flex: 1;
  text-align: center;
  min-width: 160px;
}
.stat-num {
  display: block;
  font-family: var(--font-quest);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 800;
  color: var(--gold-soft);
  letter-spacing: -0.04em;
  line-height: 1;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  text-shadow: 0 0 28px rgba(212, 179, 90, 0.20);
}
.stat-num i {
  font-style: normal;
  font-size: 0.55em;
  color: var(--gold);
  font-weight: 700;
  margin-left: 2px;
}
.stat-label {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--text-dim);
}
.stat-sep {
  width: 1px;
  height: 50px;
  background: linear-gradient(180deg, transparent, var(--gold-shadow) 50%, transparent);
  flex: 0 0 auto;
}
@media (max-width: 720px) {
  .stat-sep { display: none; }
  .stats-row { gap: 32px; }
  .stat { flex: 0 0 calc(50% - 16px); }
}

/* ============================================================================
   PRICING PHILOSOPHY — Le deal, sans entourloupe
   ============================================================================ */
.pricing-philosophy {
  text-align: center;
  position: relative;
  background:
    radial-gradient(ellipse 700px 400px at 20% 30%, rgba(124, 127, 233, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 600px 350px at 80% 70%, rgba(212, 179, 90, 0.05) 0%, transparent 60%);
  max-width: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 110px 40px;
}
.pricing-philosophy h2 {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
.philosophy-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 1100px;
  margin: 60px auto 50px;
  text-align: left;
}
.philosophy-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}
.philosophy-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-gold);
  box-shadow: var(--shadow-gold);
}
.philosophy-num {
  font-family: var(--font-quest);
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  color: var(--gold-shadow);
  letter-spacing: -0.04em;
  margin-bottom: 12px;
  font-variation-settings: "opsz" 144, "WONK" 1;
}
.philosophy-card h3 {
  font-size: 20px;
  margin-bottom: 12px;
  color: var(--gold-soft);
  letter-spacing: -0.015em;
}
.philosophy-card p {
  font-size: 14.5px;
  color: var(--text-dim);
  line-height: 1.7;
  margin: 0;
}
.philosophy-card-highlight {
  background:
    linear-gradient(180deg,
      rgba(212, 179, 90, 0.10) 0%,
      rgba(212, 179, 90, 0.04) 50%,
      var(--bg-card) 100%);
  border-color: rgba(212, 179, 90, 0.35);
}
.philosophy-card-highlight .philosophy-num { color: rgba(212, 179, 90, 0.55); }
.philosophy-signature {
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--font-quest);
  font-size: 19px;
  font-style: italic;
  color: var(--text);
  line-height: 1.5;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 144, "WONK" 1;
}
.philosophy-signature em {
  font-style: italic;
  color: var(--text);
}
.philosophy-author {
  display: block;
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-style: normal;
  color: var(--gold-soft);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 600;
}
@media (max-width: 800px) {
  .philosophy-cols { grid-template-columns: 1fr; }
}

/* ============================================================================
   FAQ — Questions qui reviennent
   ============================================================================ */
.faq {
  text-align: center;
  position: relative;
}
.faq-list {
  max-width: 820px;
  margin: 50px auto 0;
  text-align: left;
}
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  transition: all 0.25s ease;
  overflow: hidden;
}
.faq-item:hover {
  border-color: var(--border-strong);
}
.faq-item[open] {
  border-color: var(--border-gold);
  background: linear-gradient(180deg, rgba(212, 179, 90, 0.04) 0%, var(--bg-card) 60%);
  box-shadow: var(--shadow-gold);
}
.faq-item summary {
  cursor: pointer;
  padding: 22px 28px;
  font-family: var(--font-quest);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.015em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  position: relative;
  transition: color 0.2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 300;
  color: var(--gold-soft);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.faq-item[open] summary { color: var(--gold-soft); }
.faq-item[open] summary::after {
  content: '×';
  transform: rotate(0deg);
}
.faq-item p {
  padding: 0 28px 24px;
  margin: 0;
  font-size: 14.5px;
  color: var(--text-dim);
  line-height: 1.75;
}
.faq-item p strong { color: var(--text); }

/* ============================================================================
   FOOTER ENRICHI — Multi-colonnes
   ============================================================================ */
.footer {
  border-top: 1px solid var(--border);
  background:
    radial-gradient(ellipse 800px 300px at 50% 0%, rgba(212, 179, 90, 0.04) 0%, transparent 70%),
    var(--bg-2);
  padding: 70px 40px 30px;
}
.footer-cols {
  max-width: 1240px;
  margin: 0 auto 40px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 56px;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-col-brand {
  max-width: 360px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  margin-bottom: 8px;
}
.footer-logo {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 0 14px rgba(167, 139, 250, 0.30));
}
.footer-brand-name {
  display: block;
  font-family: var(--font-quest);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.footer-brand-sub {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-soft);
  opacity: 0.75;
}
.footer-tagline {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-dim);
  margin: 0;
}
.footer-place {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}
.footer-col h4 {
  font-family: var(--font-quest);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 4px;
}
.footer-col a {
  color: var(--text-dim);
  font-size: 13.5px;
  text-decoration: none;
  transition: color 0.18s;
  letter-spacing: 0.1px;
}
.footer-col a:hover { color: var(--gold-soft); }
.footer-bottom {
  max-width: 1240px;
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom .muted { color: var(--text-muted); }
@media (max-width: 900px) {
  .footer-cols {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .footer-col-brand { grid-column: span 2; max-width: none; }
  .footer-bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 540px) {
  .footer-cols { grid-template-columns: 1fr; }
  .footer-col-brand { grid-column: auto; }
}

/* ============================================================================
   MANIFESTE — la promesse Triskell (fond ambiance "scriptorium")
   ============================================================================ */
.manifesto {
  padding: 110px 40px;
  text-align: center;
  position: relative;
  background:
    radial-gradient(ellipse 700px 400px at 80% 20%, rgba(212, 179, 90, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 600px 350px at 20% 80%, rgba(167, 139, 250, 0.05) 0%, transparent 60%),
    var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
/* Glyphe décoratif Triskell géant en filigrane */
.manifesto::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -120px;
  transform: translateY(-50%);
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(212, 179, 90, 0.06) 0%, transparent 60%);
  pointer-events: none;
}
.manifesto::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(80%, 900px);
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--gold-shadow) 30%,
    var(--gold) 50%,
    var(--gold-shadow) 70%,
    transparent);
}
.manifesto-eyebrow {
  font-family: var(--font-quest);
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold-soft);
  font-style: italic;
  margin-bottom: 14px;
  opacity: 0.75;
}
.manifesto h2 {
  max-width: 880px;
  margin: 0 auto 28px;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.25;
  letter-spacing: 0.6px;
}
.manifesto h2 em {
  font-style: italic;
  color: var(--gold-soft);
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.manifesto-text {
  max-width: 680px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-dim);
}

/* Pillars : 3 piliers de la marque */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  max-width: 1100px;
  margin: 60px auto 0;
}
.pillar {
  background: linear-gradient(180deg, rgba(212, 179, 90, 0.04) 0%, var(--bg-card) 80%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: left;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.pillar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  opacity: 0.4;
}
.pillar:hover {
  border-color: var(--border-gold);
  background: linear-gradient(180deg, rgba(212, 179, 90, 0.08) 0%, var(--bg-card-hover) 80%);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}
.pillar-icon {
  font-size: 28px;
  margin-bottom: 14px;
  display: inline-block;
  filter: drop-shadow(0 0 8px var(--gold-shadow));
}
.pillar h3 {
  font-size: 18px;
  letter-spacing: 0.6px;
  color: var(--gold-soft);
  margin-bottom: 8px;
}
.pillar p {
  font-size: 14.5px;
  color: var(--text-dim);
  line-height: 1.65;
  margin: 0;
}

/* ============================================================================
   SECTION (générique)
   ============================================================================ */
.section {
  padding: 100px 40px;
  max-width: 1240px;
  margin: 0 auto;
}
.section-alt {
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  max-width: none;
}
.section h2 {
  text-align: center;
  letter-spacing: -0.03em;
}
.section-sub {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 50px;
  font-size: 16px;
  font-style: italic;
}

/* ============================================================================
   ÉCOSYSTÈME — sections par univers (Quotidien / Pros / Bâtiment)
   ============================================================================ */
#ecosysteme {
  background:
    radial-gradient(ellipse 900px 500px at 50% 30%, rgba(212, 179, 90, 0.05) 0%, transparent 65%),
    radial-gradient(ellipse 700px 400px at 80% 80%, rgba(124, 127, 233, 0.05) 0%, transparent 65%);
  max-width: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-left: 0;
  padding-right: 0;
}
#ecosysteme > h2,
#ecosysteme > .section-sub,
#ecosysteme > .tools-section,
#ecosysteme > .tools-future {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
}
.tools-section {
  margin-top: 70px;
}
.tools-section:first-of-type { margin-top: 30px; }

.tools-section-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 8px;
}
.tools-section-head::before,
.tools-section-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-shadow) 30%, var(--gold) 50%, var(--gold-shadow) 70%, transparent);
}
.tools-section-title {
  font-family: var(--font-quest);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gold-soft);
  text-shadow: 0 0 24px rgba(212, 179, 90, 0.20);
  margin: 0;
  white-space: nowrap;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.tools-section-sub {
  text-align: center;
  font-style: italic;
  font-size: 14px;
  margin: 0 0 28px;
  color: var(--text-dim);
}

/* Grille bento : 6 colonnes pour permettre des cards de taille variable
   (1 col = standard, 2 cols = vedette, 3 cols = service horizontal). Les
   cards ont des classes .tool-card-large / .tool-card-wide / .tool-card-mini
   pour casser l'uniformité du pavé. */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(220px, auto);
  gap: 16px;
  grid-auto-flow: dense;
}
/* Card standard : 2 cols (donc 3 par ligne) */
.tools-grid > .tool-card { grid-column: span 2; }
/* Card vedette : 4 cols (avec layout interne plus généreux) */
.tools-grid > .tool-card-large {
  grid-column: span 4;
  grid-row: span 2;
}
/* Card service horizontale : 3 cols (icône + texte côte à côte) */
.tools-grid > .tool-card-wide { grid-column: span 3; }
/* Card mini : 2 cols mais visuellement compacte (coming-soon) */
.tools-grid > .tool-card-mini {
  grid-column: span 2;
  grid-row: auto;
}
/* Teaser full-width : sert pour les "en quête" en bas de section
   (AlphaCast). Évite les rangées avec un trou. */
.tools-grid > .tool-card-teaser {
  grid-column: 1 / -1;
  grid-row: auto;
}

@media (max-width: 1100px) {
  .tools-grid { grid-template-columns: repeat(4, 1fr); }
  .tools-grid > .tool-card { grid-column: span 2; }
  .tools-grid > .tool-card-large { grid-column: span 4; grid-row: span 1; }
  .tools-grid > .tool-card-wide { grid-column: span 2; }
  .tools-grid > .tool-card-mini { grid-column: span 2; }
  .tools-grid > .tool-card-teaser { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .tools-grid { grid-template-columns: 1fr; }
  .tools-grid > .tool-card,
  .tools-grid > .tool-card-large,
  .tools-grid > .tool-card-wide,
  .tools-grid > .tool-card-mini,
  .tools-grid > .tool-card-teaser {
    grid-column: span 1;
    grid-row: auto;
  }
}

/* Carte produit */
.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-decoration: none;
  color: inherit;
  transition: all 0.25s ease;
  overflow: hidden;
  cursor: pointer;
}
.tool-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.25s;
}
.tool-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  background: var(--bg-card-hover);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.50), 0 0 28px var(--accent-shadow);
}
.tool-card:hover::before { opacity: 0.6; }
.tool-card:hover .tool-icon {
  transform: scale(1.05);
  box-shadow:
    0 0 0 1px rgba(212, 179, 90, 0.35),
    0 0 18px rgba(212, 179, 90, 0.30);
}

.tool-icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  overflow: hidden;
  transition: all 0.25s;
  box-shadow:
    0 0 0 1px rgba(212, 179, 90, 0.18),
    0 0 12px rgba(212, 179, 90, 0.12);
}
.tool-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Eliks Studio : le "E" du SVG remplit tout le carré, on le réduit
   pour qu'il respire dans son cercle doré (même fix que dans le Lanceur). */
.tool-icon img[src*="eliks-studio"] {
  transform: scale(0.62);
}

.tool-card h3 {
  font-family: var(--font-quest);
  font-size: 19px;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tool-card:hover h3 { color: var(--gold-soft); }
.tool-card p {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0 0 18px;
  flex: 1;
}

.tool-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.tool-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.tag-available {
  background: rgba(109, 178, 133, 0.18);
  color: var(--green);
  border: 1px solid rgba(109, 178, 133, 0.30);
}
.tag-soon {
  background: rgba(167, 139, 250, 0.14);
  color: var(--triskell-violet);
  border: 1px solid rgba(167, 139, 250, 0.30);
}
.tag-beta {
  background: rgba(212, 179, 90, 0.16);
  color: var(--gold-soft);
  border: 1px solid rgba(212, 179, 90, 0.36);
}
.tool-price {
  font-family: var(--font-quest);
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-soft);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.tool-card-dim { opacity: 0.65; }
.tool-card-dim .tool-icon { filter: grayscale(0.4); }
.tool-card-dim:hover { opacity: 0.95; }

/* === LARGE : vedette de section (span 4 cols × 2 rows) === */
.tool-card-large {
  padding: 36px 32px;
  background:
    radial-gradient(ellipse 400px 250px at 80% 20%, rgba(212, 179, 90, 0.10) 0%, transparent 65%),
    linear-gradient(135deg, rgba(212, 179, 90, 0.08) 0%, rgba(167, 139, 250, 0.06) 60%, var(--bg-card) 100%) !important;
  border-color: rgba(212, 179, 90, 0.32) !important;
  box-shadow:
    0 0 0 1px rgba(212, 179, 90, 0.10),
    0 16px 50px rgba(0, 0, 0, 0.30);
}
.tool-card-large::before {
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent) !important;
  opacity: 0.6 !important;
}
.tool-card-large .tool-icon {
  width: 88px;
  height: 88px;
  border-radius: 18px;
  margin-bottom: 22px;
}
.tool-card-large h3 {
  font-size: 28px;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
  margin-bottom: 14px;
}
.tool-card-large p {
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 22px;
  max-width: 520px;
}
.tool-card-large .tool-meta { padding-top: 18px; }
.tool-card-large .tool-tag { font-size: 11.5px; padding: 5px 12px; }
.tool-card-large .tool-price { font-size: 18px; }
.tool-card-large .tool-vedette-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  font-family: var(--font-quest);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--gold-soft);
  padding: 5px 12px;
  background: rgba(212, 179, 90, 0.10);
  border: 1px solid rgba(212, 179, 90, 0.40);
  border-radius: 999px;
  text-transform: uppercase;
}

/* === WIDE : service horizontal (icône à gauche, texte à droite) === */
.tool-card-wide {
  flex-direction: row;
  align-items: center;
  gap: 22px;
  padding: 26px 28px;
}
.tool-card-wide .tool-icon {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  margin: 0;
}
.tool-card-wide-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tool-card-wide h3 {
  font-size: 19px;
  margin: 0;
}
.tool-card-wide p {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
  flex: initial;
}
.tool-card-wide .tool-meta {
  margin-top: 8px;
  padding-top: 8px;
}

/* === MINI : compact pour coming-soon === */
.tool-card-mini {
  padding: 18px 20px;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}
.tool-card-mini .tool-icon {
  width: 48px;
  height: 48px;
  margin: 0;
  flex-shrink: 0;
}
.tool-card-mini-body { flex: 1; }
.tool-card-mini h3 {
  font-size: 15px;
  margin: 0 0 4px;
}
.tool-card-mini p {
  font-size: 12.5px;
  line-height: 1.45;
  margin: 0;
  color: var(--text-muted);
}
.tool-card-mini .tool-meta {
  margin-top: 6px;
  padding-top: 6px;
  border: 0;
}
.tool-card-mini .tool-tag { font-size: 9.5px; padding: 2px 7px; }

/* === TEASER : bandeau "en quête" pleine largeur, façon banner === */
.tool-card-teaser {
  flex-direction: row;
  align-items: center;
  gap: 22px;
  padding: 22px 28px;
  background:
    linear-gradient(90deg,
      rgba(124, 127, 233, 0.10) 0%,
      rgba(124, 127, 233, 0.04) 50%,
      rgba(212, 179, 90, 0.06) 100%);
  border-style: dashed;
  border-color: rgba(167, 139, 250, 0.35);
}
.tool-card-teaser:hover {
  border-color: rgba(167, 139, 250, 0.6);
  background:
    linear-gradient(90deg,
      rgba(124, 127, 233, 0.16) 0%,
      rgba(124, 127, 233, 0.06) 50%,
      rgba(212, 179, 90, 0.10) 100%);
}
.tool-card-teaser .tool-icon {
  width: 64px;
  height: 64px;
  margin: 0;
  flex-shrink: 0;
}
.tool-card-teaser .tool-card-mini-body,
.tool-card-teaser .tool-card-wide-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tool-card-teaser h3 {
  font-size: 17px;
  margin: 0;
}
.tool-card-teaser p {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  color: var(--text-muted);
}
.tool-card-teaser .tool-meta {
  margin-top: 8px;
  padding-top: 8px;
}

@media (max-width: 720px) {
  .tool-card-wide,
  .tool-card-mini,
  .tool-card-teaser {
    flex-direction: column;
    align-items: flex-start;
  }
  .tool-card-wide .tool-icon,
  .tool-card-mini .tool-icon,
  .tool-card-teaser .tool-icon { width: 64px; height: 64px; }
}

/* === SERVICES (prestations humaines) — accent doré marqué === */
.tool-card-service {
  border-color: rgba(212, 179, 90, 0.45) !important;
  background:
    linear-gradient(180deg,
      rgba(212, 179, 90, 0.10) 0%,
      rgba(212, 179, 90, 0.03) 40%,
      var(--bg-card) 80%) !important;
  box-shadow:
    0 0 0 1px rgba(212, 179, 90, 0.18),
    0 0 24px rgba(212, 179, 90, 0.12);
}
.tool-card-service::before {
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent) !important;
  opacity: 0.7 !important;
}
.tool-card-service:hover {
  border-color: var(--gold) !important;
  box-shadow:
    0 0 0 1px rgba(212, 179, 90, 0.40),
    0 18px 50px rgba(0, 0, 0, 0.50),
    0 0 36px rgba(212, 179, 90, 0.25) !important;
}
.tool-card-service .tool-icon {
  border-radius: 50%;
  border-color: rgba(212, 179, 90, 0.40);
  box-shadow:
    0 0 0 1px rgba(212, 179, 90, 0.30),
    0 0 16px rgba(212, 179, 90, 0.25);
}
.tool-card-service h3 { color: var(--gold-soft); }
.tool-card-service:hover h3 { color: var(--gold); }

.service-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: linear-gradient(135deg, rgba(212, 179, 90, 0.26), rgba(212, 179, 90, 0.10));
  border: 1px solid rgba(212, 179, 90, 0.50);
  border-radius: 999px;
  color: var(--gold-soft);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* Teaser fin de section écosystème */
.tools-future {
  text-align: center;
  margin: 50px auto 0;
  padding: 22px;
  max-width: 700px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  font-style: italic;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.7;
}

/* ============================================================================
   COMMENT ÇA MARCHE — Timeline horizontale (rupture visuelle vs grid de cards)
   ============================================================================ */
#comment {
  background:
    radial-gradient(ellipse 700px 400px at 50% 0%, rgba(124, 127, 233, 0.08) 0%, transparent 65%),
    var(--bg);
  position: relative;
  /* Section full-width — sinon le fond crée un rectangle limité à 1240px */
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
#comment > h2,
#comment > .section-sub,
#comment > .steps {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
}
#comment > .steps {
  /* Le steps a son propre max-width 1100px déjà, ce padding fait double — on le contre */
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 1100px;
  margin: 60px auto 0;
  padding: 0;
  position: relative;
}
/* Ligne reliant les 4 étapes (comme une chaîne héraldique) */
.steps::before {
  content: '';
  position: absolute;
  top: 19px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg,
    var(--gold-deep) 0%,
    var(--gold-soft) 50%,
    var(--gold-deep) 100%);
  opacity: 0.35;
  z-index: 0;
}
.steps li {
  background: transparent;
  border: 0;
  padding: 0 18px;
  position: relative;
  text-align: center;
  z-index: 1;
}
.step-num {
  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #1a1408;
  font-family: var(--font-quest);
  font-weight: 800;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  box-shadow:
    0 0 0 6px var(--bg),
    0 0 0 7px rgba(212, 179, 90, 0.30),
    0 8px 24px rgba(212, 179, 90, 0.45);
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
}
.steps h3 {
  font-size: 17px;
  margin: 0 0 10px;
  color: var(--gold-soft);
  text-align: center;
  letter-spacing: -0.01em;
}
.steps p {
  font-size: 14px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.6;
  text-align: center;
}
.steps li:hover .step-num {
  transform: translateX(-50%) scale(1.08);
  box-shadow:
    0 0 0 6px var(--bg),
    0 0 0 7px var(--gold),
    0 12px 32px rgba(212, 179, 90, 0.60);
  transition: all 0.3s ease;
}
@media (max-width: 800px) {
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .steps::before { display: none; }
}

/* ============================================================================
   SMARTSCREEN
   ============================================================================ */
.section-smartscreen {
  background:
    radial-gradient(ellipse 800px 400px at 30% 50%, rgba(167, 139, 250, 0.06) 0%, transparent 60%),
    rgba(255, 255, 255, 0.02);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  max-width: none;
}
.ss-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}
.ss-text h2 {
  text-align: left;
  font-size: clamp(26px, 3vw, 36px);
}
.ss-text h2 .accent { color: var(--gold-soft); }
.ss-lede {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-dim);
  margin-bottom: 14px;
}
.ss-lede strong { color: var(--text); }
.badge {
  display: inline-block;
  padding: 5px 14px;
  background: linear-gradient(135deg, rgba(124, 127, 233, 0.22), rgba(124, 127, 233, 0.10));
  color: var(--accent-hot);
  border: 1px solid rgba(124, 127, 233, 0.40);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.badge-warn {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.22), rgba(249, 115, 22, 0.08));
  color: var(--triskell-orange);
  border-color: rgba(249, 115, 22, 0.40);
}
.ss-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ss-steps li {
  display: flex;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.ss-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hot));
  color: white;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.ss-steps strong { display: block; margin-bottom: 4px; color: var(--text); }
.ss-trust {
  text-align: center;
  margin: 38px auto 0;
  font-size: 14px;
  color: var(--text-dim);
}

/* ============================================================================
   CTA FINAL — Moment "fin de chapitre" avec ambiance dorée intense
   ============================================================================ */
.section-cta {
  text-align: center;
  position: relative;
  padding: 140px 40px 130px;
  background:
    radial-gradient(ellipse 1000px 500px at 50% 50%, rgba(212, 179, 90, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 600px 300px at 50% 100%, rgba(124, 127, 233, 0.14) 0%, transparent 60%),
    var(--bg-2);
  overflow: hidden;
  /* Section full-width — sinon le fond crée un rectangle limité à 1240px */
  max-width: none;
}
/* Voile chateau en fond bas, miroir du hero */
.section-cta::after {
  content: '';
  position: absolute;
  left: -10vw;
  right: -10vw;
  bottom: 0;
  height: 200px;
  background-image: url('assets/chateau.png');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
  opacity: 0.06;
  pointer-events: none;
}
.section-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(80%, 800px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
}
.section-cta h2 {
  font-size: clamp(40px, 5vw, 64px);
  margin-bottom: 18px;
  letter-spacing: -0.04em;
  font-weight: 800;
  position: relative;
  z-index: 1;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
}
.section-cta .section-sub {
  margin-bottom: 38px;
  position: relative;
  z-index: 1;
}
.section-cta .btn-primary {
  position: relative;
  z-index: 1;
  font-size: 16px;
  padding: 18px 32px;
}

/* ============================================================================
   FOOTER
   ============================================================================ */
.footer {
  border-top: 1px solid var(--border);
  background: var(--bg-2);
  padding: 50px 40px 30px;
}
.footer-row {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 13px;
}
.footer-row .muted { color: var(--text-muted); }
.footer-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.footer-links a {
  color: var(--text-dim);
  font-size: 13px;
  transition: color 0.18s;
}
.footer-links a:hover { color: var(--gold-soft); }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 900px) {
  .nav { padding: 14px 20px; }
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 13px; }
  .hero { padding: 80px 20px 100px; }
  .section { padding: 70px 20px; }
  .ss-grid { grid-template-columns: 1fr; gap: 32px; }
  .manifesto { padding: 70px 20px; }
  .pillars { gap: 16px; }
  .footer { padding: 40px 20px 28px; }
  .footer-row { flex-direction: column; text-align: center; }
}

@media (max-width: 540px) {
  .hero h1 { font-size: 38px; letter-spacing: 0.8px; }
  .lede { font-size: 14.5px; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .btn-primary, .btn-ghost { justify-content: center; }
  .reassurance-row { flex-direction: column; gap: 8px; }
  .tools-section-head::before,
  .tools-section-head::after { display: none; }
  .tools-section-title { font-size: 18px; }
}

/* Reveal on scroll (subtle) */
@media (prefers-reduced-motion: no-preference) {
  .pillar, .tool-card, .steps li {
    opacity: 0;
    animation: section-reveal 0.6s ease forwards;
  }
  @keyframes section-reveal {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
}