/* ==========================================================================
   Lagriffe Studio · Design System unifié
   ==========================================================================
   Source unique de vérité pour la peau visuelle de tout le parcours :
   - Page d'accueil
   - Formulaire d'entrée (demande-site.html)
   - Formulaire de personnalisation (personnaliser.html)
   - Page merci.html
   - (Mails HTML : reprennent les mêmes valeurs en inline)

   Trois thèmes : clair (par défaut), tamisé, sombre.
   Préférence persistée en localStorage par js/theme.js.
   ========================================================================== */

/* ── Tokens — thème clair (par défaut) ─────────────────────────────────── */
/* Palette alignee sur l'index lagriffe-studio.fr : indigo / violet / rose,
   fond pastel/blanc. Plus de vert/or — la marque est en gamme tech-premium. */
:root,
html[data-theme="light"] {
  /* Surfaces */
  --lg-cream:         #F8FAFC;   /* fond page principal (slate-50) */
  --lg-cream-soft:    #EEF2FF;   /* fond secondaire (indigo-50) */
  --lg-paper:         #FFFFFF;   /* surface carte */
  --lg-paper-2:       #FAFBFF;   /* surface carte alt */

  /* Texte */
  --lg-ink:           #0F172A;   /* titre, texte fort (slate-900) */
  --lg-ink-soft:      #334155;   /* corps de texte (slate-700) */
  --lg-mute:          #64748B;   /* texte secondaire / hint (slate-500) */
  --lg-mute-2:        #94A3B8;   /* texte très soft / footer (slate-400) */

  /* Indigo (couleur primaire — CTA, titres, accent fort) */
  --lg-green:         #4F46E5;   /* indigo-600 */
  --lg-green-hover:   #4338CA;   /* indigo-700 */
  --lg-green-soft:    #EEF2FF;   /* indigo-50 — fond carte info */
  --lg-green-border:  #C7D2FE;   /* indigo-200 — bordure carte info */

  /* Violet / rose (couleur secondaire — accents, gradients) */
  --lg-gold:          #8B5CF6;   /* violet-500 */
  --lg-gold-deep:     #6D28D9;   /* violet-700 — texte sur fond violet */
  --lg-gold-soft:     #F5F3FF;   /* violet-50 — fond carte accent */
  --lg-gold-soft-2:   #FAF5FF;   /* violet-50 plus clair */
  --lg-gold-border:   #DDD6FE;   /* violet-200 */

  /* Structure */
  --lg-border:        #E2E8F0;   /* slate-200 */
  --lg-border-soft:   #EDF1F7;
  --lg-divider:       linear-gradient(90deg, transparent, #8B5CF6, transparent);

  /* Effets — ombres avec teinte indigo */
  --lg-shadow-sm:     0 2px 12px rgba(99,102,241,.08);
  --lg-shadow:        0 8px 24px rgba(99,102,241,.12);
  --lg-shadow-strong: 0 14px 36px rgba(15,23,42,.18);
  --lg-cta-shadow:    0 8px 22px rgba(99,102,241,.35);

  /* États */
  --lg-error:         #DC2626;
  --lg-error-soft:    #FEE2E2;
  --lg-success:       #059669;
  --lg-success-soft:  #D1FAE5;

  /* Hero gradient (en-tête de mail / pages) */
  --lg-hero-gradient: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);

  /* Polices */
  --lg-font-serif:    'Fraunces', Georgia, 'Times New Roman', serif;
  --lg-font-sans:     'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Rayons */
  --lg-radius-sm:     8px;
  --lg-radius:        12px;
  --lg-radius-lg:     16px;
  --lg-radius-xl:     20px;
  --lg-radius-pill:   999px;
}

/* ── Tokens — thème tamisé (intermédiaire) ─────────────────────────────── */
/* Slate moyen + accents indigo/violet : ambiance feutrée tech-premium. */
html[data-theme="dim"] {
  --lg-cream:         #1E293B;       /* slate-800 — fond principal */
  --lg-cream-soft:    #172033;
  --lg-paper:         #2A3447;       /* surfaces cards */
  --lg-paper-2:       #232D40;

  --lg-ink:           #F1F5F9;
  --lg-ink-soft:      #CBD5E1;
  --lg-mute:          #94A3B8;
  --lg-mute-2:        #64748B;

  --lg-green:         #818CF8;       /* indigo-400 — lisible sur fond sombre */
  --lg-green-hover:   #A5B4FC;
  --lg-green-soft:    rgba(129,140,248,.12);
  --lg-green-border:  rgba(129,140,248,.30);

  --lg-gold:          #C084FC;       /* purple-400 */
  --lg-gold-deep:     #F0ABFC;
  --lg-gold-soft:     rgba(192,132,252,.10);
  --lg-gold-soft-2:   rgba(192,132,252,.06);
  --lg-gold-border:   rgba(192,132,252,.25);

  --lg-border:        rgba(148,163,184,.18);
  --lg-border-soft:   rgba(148,163,184,.10);
  --lg-divider:       linear-gradient(90deg, transparent, #C084FC, transparent);

  --lg-shadow-sm:     0 2px 12px rgba(0,0,0,.30);
  --lg-shadow:        0 8px 24px rgba(0,0,0,.45);
  --lg-shadow-strong: 0 14px 36px rgba(0,0,0,.60);
  --lg-cta-shadow:    0 8px 22px rgba(99,102,241,.40);

  --lg-error:         #FCA5A5;
  --lg-error-soft:    rgba(220,38,38,.15);
  --lg-success:       #86E5B0;
  --lg-success-soft:  rgba(16,185,129,.15);

  --lg-hero-gradient: linear-gradient(180deg, #2A3447 0%, #1E293B 100%);
}

/* ── Tokens — thème sombre ─────────────────────────────────────────────── */
/* Navy profond + accents indigo/violet vifs. Cohérent avec l'index sombre. */
html[data-theme="dark"] {
  --lg-cream:         #0B0B14;       /* navy quasi-noir */
  --lg-cream-soft:    #060610;
  --lg-paper:         #15172E;
  --lg-paper-2:       #0F1226;

  --lg-ink:           #F8FAFC;
  --lg-ink-soft:      #CBD5E1;
  --lg-mute:          #94A3B8;
  --lg-mute-2:        #64748B;

  --lg-green:         #818CF8;       /* indigo-400 */
  --lg-green-hover:   #A5B4FC;
  --lg-green-soft:    rgba(99,102,241,.18);
  --lg-green-border:  rgba(99,102,241,.35);

  --lg-gold:          #C084FC;       /* purple-400 */
  --lg-gold-deep:     #F0ABFC;
  --lg-gold-soft:     rgba(192,132,252,.15);
  --lg-gold-soft-2:   rgba(192,132,252,.08);
  --lg-gold-border:   rgba(192,132,252,.30);

  --lg-border:        rgba(148,163,184,.14);
  --lg-border-soft:   rgba(148,163,184,.07);
  --lg-divider:       linear-gradient(90deg, transparent, #C084FC, transparent);

  --lg-shadow-sm:     0 2px 14px rgba(0,0,0,.45);
  --lg-shadow:        0 8px 28px rgba(0,0,0,.55);
  --lg-shadow-strong: 0 14px 40px rgba(0,0,0,.75);
  --lg-cta-shadow:    0 8px 22px rgba(99,102,241,.50);

  --lg-error:         #FCA5A5;
  --lg-error-soft:    rgba(220,38,38,.18);
  --lg-success:       #86E5B0;
  --lg-success-soft:  rgba(16,185,129,.15);

  --lg-hero-gradient: linear-gradient(180deg, #15172E 0%, #0B0B14 100%);
}

/* ==========================================================================
   Reset doux + base typographique
   ========================================================================== */
.lg-page {
  margin: 0;
  background: var(--lg-cream);
  color: var(--lg-ink);
  font-family: var(--lg-font-sans);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 220ms ease, color 220ms ease;
}
.lg-page *,
.lg-page *::before,
.lg-page *::after { box-sizing: border-box; }

.lg-page p,
.lg-page h1, .lg-page h2, .lg-page h3, .lg-page h4,
.lg-page li, .lg-page label,
.lg-page .lg-hint { text-wrap: pretty; }

.lg-page h1, .lg-page h2, .lg-page h3, .lg-page h4 {
  font-family: var(--lg-font-serif);
  color: var(--lg-green);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  line-height: 1.2;
}
.lg-page h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); }
.lg-page h2 { font-size: 1.75rem; }
.lg-page h3 { font-size: 1.35rem; }

.lg-page a {
  color: var(--lg-green);
  text-decoration: none;
  border-bottom: 1px solid var(--lg-gold);
  transition: color 150ms;
}
.lg-page a:hover { color: var(--lg-green-hover); }
/* Le logo et les liens de nav ne doivent pas porter le soulignement par defaut */
.lg-page .lg-nav__brand,
.lg-page .lg-nav__link,
.lg-page .lg-btn,
.lg-page .lg-page-footer a { border-bottom: none; }

/* ==========================================================================
   Composants partagés
   ========================================================================== */

/* ── Container ───────────────────────────────────────────────────────────── */
.lg-container {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 20px;
}
.lg-container--narrow { max-width: 720px; }
.lg-container--wide { max-width: 1080px; }

/* ── Header / Nav ────────────────────────────────────────────────────────── */
.lg-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--lg-paper) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--lg-border);
  transition: background 220ms, border-color 220ms;
}
.lg-nav__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.lg-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  text-decoration: none;
  font-family: var(--lg-font-serif);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--lg-green);
  letter-spacing: -0.3px;
}
.lg-nav__brand img { width: 34px; height: 34px; display: block; }
.lg-nav__brand .lg-dot { color: var(--lg-gold); margin: 0 2px; }
.lg-nav__right {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
.lg-nav__link {
  color: var(--lg-ink-soft);
  font-size: 0.92rem;
  font-weight: 500;
  border: none;
}
.lg-nav__link:hover { color: var(--lg-green); }

/* ── Sélecteur de thème (3 boutons) ─────────────────────────────────────── */
.lg-theme-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--lg-cream-soft);
  border: 1px solid var(--lg-border);
  border-radius: var(--lg-radius-pill);
  padding: 3px;
  gap: 2px;
}
.lg-theme-toggle button {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--lg-radius-pill);
  color: var(--lg-mute);
  cursor: pointer;
  padding: 0;
  transition: all 150ms;
}
.lg-theme-toggle button:hover {
  color: var(--lg-ink);
  background: color-mix(in srgb, var(--lg-gold) 12%, transparent);
}
.lg-theme-toggle button.active {
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(99,102,241,.35);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.lg-hero {
  padding: 72px 20px 40px;
  text-align: center;
}
.lg-hero__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lg-gold);
  margin-bottom: 14px;
}
.lg-hero h1 em {
  font-style: italic;
  color: var(--lg-gold-deep);
  font-weight: 500;
}
.lg-hero__lead {
  max-width: 620px;
  margin: 16px auto 0;
  font-size: 1.075rem;
  color: var(--lg-ink-soft);
  line-height: 1.65;
}
.lg-hero__sep {
  display: inline-block;
  width: 56px;
  height: 2px;
  background: var(--lg-gold);
  margin: 18px 0 0;
}
.lg-hero__buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.lg-btn--with-icon {
  font-size: 0.95rem;
  padding: 12px 22px;
  gap: 8px;
}
.lg-btn--with-icon svg { flex-shrink: 0; }

/* ── Carte ───────────────────────────────────────────────────────────────── */
.lg-card {
  background: var(--lg-paper);
  border: 1px solid var(--lg-border);
  border-radius: var(--lg-radius-lg);
  padding: 32px 32px 28px;
  box-shadow: var(--lg-shadow-sm);
  transition: background 220ms, border-color 220ms, box-shadow 220ms;
}
.lg-card:hover { box-shadow: var(--lg-shadow); }
.lg-card:focus-within {
  border-color: color-mix(in srgb, var(--lg-green) 35%, var(--lg-border));
  box-shadow: 0 10px 36px color-mix(in srgb, var(--lg-green) 12%, transparent);
}

/* En-tête de carte numérotée (étape de formulaire) */
.lg-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--lg-border-soft);
}
.lg-step-num {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  color: #FFFFFF;
  border-radius: 50%;
  font-family: var(--lg-font-serif);
  font-weight: 600;
  font-size: 1.05rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(99,102,241,.35);
}

.lg-card__head h2 {
  margin: 0;
  font-family: var(--lg-font-serif);
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--lg-ink);
}

.lg-card__intro {
  color: var(--lg-ink-soft);
  margin: -6px 0 18px;
  font-size: 0.95rem;
  line-height: 1.65;
}
.lg-card__intro strong { color: var(--lg-green); }

/* Encadré "info" (vert tendre) */
.lg-info {
  background: var(--lg-green-soft);
  border: 1px solid var(--lg-green-border);
  border-radius: var(--lg-radius);
  padding: 18px 22px;
  margin: 14px 0;
}
.lg-info__title {
  margin: 0 0 6px;
  font-family: var(--lg-font-serif);
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--lg-green);
}
.lg-info p { margin: 0; font-size: 0.94rem; color: var(--lg-ink-soft); line-height: 1.6; }

/* Encadré "accent" (or tendre) */
.lg-accent {
  background: var(--lg-gold-soft);
  border: 1px solid var(--lg-gold-border);
  border-radius: var(--lg-radius);
  padding: 18px 22px;
  margin: 14px 0;
}
.lg-accent__title {
  margin: 0 0 6px;
  font-family: var(--lg-font-serif);
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--lg-gold-deep);
}
.lg-accent p { margin: 0; font-size: 0.94rem; color: var(--lg-gold-deep); line-height: 1.6; opacity: .92; }

/* Bandeau gauche or */
.lg-banner {
  margin: 18px 0;
  padding: 14px 20px;
  background: var(--lg-gold-soft-2);
  border-left: 3px solid var(--lg-gold);
  border-radius: 0 var(--lg-radius) var(--lg-radius) 0;
}
.lg-banner p { margin: 0; font-size: 0.94rem; color: var(--lg-gold-deep); line-height: 1.55; }
.lg-banner strong { color: var(--lg-green); }

/* Diviseur or */
.lg-divider {
  height: 1px;
  background: var(--lg-divider);
  margin: 28px 0;
}

/* ── Champs de formulaire ───────────────────────────────────────────────── */
.lg-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.lg-field label,
.lg-field > .lg-field__label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--lg-ink);
  letter-spacing: 0.005em;
}
.lg-field input[type="text"],
.lg-field input[type="email"],
.lg-field input[type="tel"],
.lg-field input[type="url"],
.lg-field input[type="number"],
.lg-field select,
.lg-field textarea {
  font-family: inherit;
  font-size: 0.98rem;
  padding: 12px 16px;
  background: var(--lg-paper);
  border: 1.5px solid var(--lg-border);
  border-radius: var(--lg-radius);
  color: var(--lg-ink);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 150ms, background 150ms, box-shadow 150ms;
}
.lg-field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%236B746E' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.lg-field textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.6;
}
.lg-field input::placeholder,
.lg-field textarea::placeholder { color: var(--lg-mute); opacity: 0.7; }
.lg-field input:focus,
.lg-field select:focus,
.lg-field textarea:focus {
  outline: none;
  border-color: var(--lg-green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lg-green) 14%, transparent);
}

/* Fix autofill */
.lg-field input:-webkit-autofill,
.lg-field input:-webkit-autofill:hover,
.lg-field input:-webkit-autofill:focus,
.lg-field textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--lg-paper) inset !important;
  -webkit-text-fill-color: var(--lg-ink) !important;
  caret-color: var(--lg-ink) !important;
}

.lg-field__hint {
  font-size: 0.82rem;
  color: var(--lg-mute);
  margin: 2px 0 0;
}

.lg-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  .lg-field-row { grid-template-columns: 1fr; }
}

/* ── Cartes radio (choix exclusifs) ─────────────────────────────────────── */
.lg-radio-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.lg-radio-cards .lg-field__label--block {
  width: 100%;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--lg-ink);
  margin-bottom: 6px;
}
.lg-radio-card {
  flex: 1;
  min-width: 200px;
  cursor: pointer;
  position: relative;
}
.lg-radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.lg-radio-card__inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: var(--lg-paper);
  border: 2px solid var(--lg-border);
  border-radius: var(--lg-radius);
  transition: border-color 150ms, background 150ms, box-shadow 150ms, transform 150ms;
  height: 100%;
}
.lg-radio-card__inner strong {
  color: var(--lg-ink);
  font-weight: 600;
  font-size: 0.98rem;
}
.lg-radio-card__inner small {
  color: var(--lg-mute);
  font-size: 0.82rem;
  line-height: 1.5;
}
.lg-radio-card input:checked + .lg-radio-card__inner {
  border-color: var(--lg-green);
  background: var(--lg-green-soft);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--lg-green) 14%, transparent);
}
.lg-radio-card:hover .lg-radio-card__inner {
  border-color: color-mix(in srgb, var(--lg-green) 40%, var(--lg-border));
  transform: translateY(-1px);
}

/* ── Cases à cocher en cartes (multi) ───────────────────────────────────── */
.lg-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.lg-check-card {
  position: relative;
  cursor: pointer;
}
.lg-check-card input { position: absolute; opacity: 0; pointer-events: none; }
.lg-check-card__inner {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 18px;
  background: var(--lg-paper);
  border: 2px solid var(--lg-border);
  border-radius: var(--lg-radius);
  transition: border-color 150ms, background 150ms, box-shadow 150ms, transform 150ms;
  height: 100%;
  position: relative;
}
.lg-check-card:hover .lg-check-card__inner {
  border-color: color-mix(in srgb, var(--lg-green) 40%, var(--lg-border));
  transform: translateY(-1px);
}
.lg-check-card__icon { font-size: 1.5rem; line-height: 1; margin-bottom: 4px; }
.lg-check-card__label { font-weight: 600; color: var(--lg-ink); font-size: 0.98rem; }
.lg-check-card__hint { font-size: 0.82rem; color: var(--lg-mute); line-height: 1.5; }
.lg-check-card input:checked + .lg-check-card__inner {
  border-color: var(--lg-green);
  background: var(--lg-green-soft);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--lg-green) 14%, transparent);
}
.lg-check-card input:checked + .lg-check-card__inner .lg-check-card__label { color: var(--lg-green); }
.lg-check-card input:checked + .lg-check-card__inner::after {
  content: '✓';
  position: absolute;
  top: 10px;
  right: 12px;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: #FFFFFF;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.lg-checkbox-grid.lg-maxed .lg-check-card:not(.is-checked) .lg-check-card__inner {
  opacity: 0.42;
  cursor: not-allowed;
}

/* ── Boutons ────────────────────────────────────────────────────────────── */
.lg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: var(--lg-radius);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 150ms, box-shadow 150ms, background 150ms, color 150ms;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.lg-btn--primary {
  /* Gradient indigo→violet aligne sur la marque (cf index hero CTA) */
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  color: #FFFFFF;
  box-shadow: var(--lg-cta-shadow);
  border-bottom: none;
}
.lg-btn--primary:hover {
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(99,102,241,.45);
  color: #FFFFFF;
}

.lg-btn--ghost {
  background: transparent;
  color: var(--lg-ink-soft);
  border: 1.5px solid var(--lg-border);
}
.lg-btn--ghost:hover {
  border-color: var(--lg-green);
  color: var(--lg-green);
  background: color-mix(in srgb, var(--lg-green) 6%, transparent);
}

.lg-btn--lg { font-size: 1.06rem; padding: 18px 36px; }

.lg-btn--incomplete {
  background: color-mix(in srgb, var(--lg-mute) 30%, transparent);
  color: var(--lg-mute);
  box-shadow: none;
  cursor: pointer;
}
.lg-btn--incomplete:hover {
  background: color-mix(in srgb, var(--lg-mute) 35%, transparent);
  transform: none;
  box-shadow: none;
  color: var(--lg-mute);
}

.lg-btn:disabled,
.lg-btn[aria-disabled="true"] { cursor: wait; opacity: 0.7; }

/* Spinner inline pour les boutons en cours d'envoi */
.lg-btn__spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: lg-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes lg-spin { to { transform: rotate(360deg); } }

/* ── Footer formulaire (zone submit) ────────────────────────────────────── */
.lg-form-footer {
  /* Gradient navy → indigo profond pour matcher le hero du site */
  background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 100%);
  border-radius: var(--lg-radius-lg);
  padding: 36px 28px;
  text-align: center;
  color: #F8FAFC;
  margin-top: 14px;
  box-shadow: var(--lg-shadow-strong);
}
.lg-form-footer__recap {
  color: rgba(248,250,252,.85);
  font-size: 0.96rem;
  margin: 0 0 22px;
  line-height: 1.55;
}
.lg-form-footer__recap strong { color: #FFFFFF; }

/* ── Liste de rappels (3 points cles) ───────────────────────────────── */
.lg-form-footer__recap-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 24px 36px;
  flex-wrap: wrap;
}
.lg-form-footer__recap-list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: color-mix(in srgb, var(--lg-cream) 92%, transparent);
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.45;
}
.lg-form-footer__recap-list li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--lg-cream) 18%, transparent);
  color: var(--lg-cream);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .lg-form-footer__recap-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    padding-inline: 8px;
  }
}
.lg-form-footer .lg-btn--primary {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  color: #FFFFFF;
}
.lg-form-footer .lg-btn--primary:hover {
  background: linear-gradient(135deg, #818CF8 0%, #A78BFA 100%);
  color: #FFFFFF;
  box-shadow: 0 14px 36px rgba(99,102,241,.5);
}
.lg-form-footer .lg-btn--incomplete {
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.62);
}
.lg-form-footer .lg-btn--incomplete:hover {
  background: rgba(255,255,255,.16);
  color: rgba(255,255,255,.62);
}

/* ── Counter sticky ─────────────────────────────────────────────────────── */
.lg-sticky-counter {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--lg-paper);
  border: 1px solid var(--lg-border);
  border-radius: var(--lg-radius-pill);
  padding: 10px 18px 10px 10px;
  box-shadow: var(--lg-shadow);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.92rem;
  z-index: 40;
  max-width: calc(100% - 32px);
  color: var(--lg-ink);
  transition: background 220ms, border-color 220ms, box-shadow 220ms;
}
.lg-sticky-counter__pill {
  display: inline-flex;
  align-items: baseline;
  background: var(--lg-green);
  color: var(--lg-cream);
  padding: 6px 14px;
  border-radius: var(--lg-radius-pill);
  font-weight: 700;
  font-size: 0.95rem;
}
html[data-theme="dim"] .lg-sticky-counter__pill,
html[data-theme="dark"] .lg-sticky-counter__pill { color: #0F1410; }
.lg-sticky-counter__pill strong {
  font-family: var(--lg-font-serif);
  font-weight: 600;
  font-size: 1.15rem;
  margin-right: 2px;
}
.lg-sticky-counter__status { color: var(--lg-mute); }
.lg-sticky-counter.is-complete {
  background: var(--lg-green-soft);
  border-color: var(--lg-green);
}
.lg-sticky-counter.is-complete .lg-sticky-counter__status::before {
  content: '✓ ';
  color: var(--lg-green);
  font-weight: 700;
}

/* ── Flash erreur sur étape ─────────────────────────────────────────────── */
.lg-flash {
  animation: lg-flash 1.2s ease-out;
}
@keyframes lg-flash {
  0%, 100% { box-shadow: var(--lg-shadow-sm); }
  20%, 60% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-error) 50%, transparent),
                          0 12px 30px color-mix(in srgb, var(--lg-error) 22%, transparent); }
}

/* ── Écrans success / error pleins ──────────────────────────────────────── */
.lg-screen {
  max-width: 560px;
  margin: 32px auto 64px;           /* marge bottom pour ne pas coller le footer/viewport */
  padding: 44px 32px 64px;          /* + d'air en bas pour le CTA "Retour" */
  text-align: center;
  background: var(--lg-paper);
  border: 1px solid var(--lg-border);
  border-radius: var(--lg-radius-xl);
  box-shadow: var(--lg-shadow-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.lg-screen__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  font-size: 2.1rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--lg-cream);
}
.lg-screen__icon--ok { background: linear-gradient(135deg, #6366F1, #8B5CF6); color: #FFFFFF; }
.lg-screen__icon--error { background: var(--lg-error); }
.lg-screen h2 {
  font-family: var(--lg-font-serif);
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--lg-ink);
  margin: 0;
}
.lg-screen p {
  color: var(--lg-ink-soft);
  line-height: 1.6;
  margin: 0;
  font-size: 0.98rem;
  max-width: 460px;
}
.lg-screen .lg-screen__hint {
  font-size: 0.88rem;
  color: var(--lg-mute);
}
.lg-screen .lg-screen__hint a { color: var(--lg-green); border-bottom: 1px solid var(--lg-gold); }
.lg-screen__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}

/* ── Footer page ────────────────────────────────────────────────────────── */
.lg-page-footer {
  margin-top: 64px;
  padding: 28px 20px;
  text-align: center;
  font-size: 12px;
  color: var(--lg-mute);
  border-top: 1px solid var(--lg-border);
  background: var(--lg-cream-soft);
}
.lg-page-footer a {
  color: var(--lg-mute);
  border-bottom: none;
}
.lg-page-footer a:hover { color: var(--lg-green); }

/* ── Utilitaires ────────────────────────────────────────────────────────── */
.lg-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[hidden],
.lg-page [hidden] { display: none !important; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .lg-card { padding: 24px 22px; }
  .lg-checkbox-grid { grid-template-columns: 1fr; }
  .lg-radio-card { min-width: 0; flex: 1 1 100%; }
  .lg-sticky-counter {
    flex-direction: column;
    gap: 4px;
    padding: 10px 16px;
    text-align: center;
  }
  .lg-hero { padding: 48px 18px 24px; }
  .lg-form-footer { padding: 28px 22px; }
}