/* creer-ton-site.e-kclt.fr — design tokens
   Palette : plan (bleu structurel) + signal (ambre construction) sur papier clair.
   Métaphore : le site du prospect se dessine en direct, en fond du formulaire
   qui sert justement à le construire — un vrai plan bleu tracé à l'encre sur papier. */

@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('/assets/fonts/CabinetGrotesk-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('/assets/fonts/CabinetGrotesk-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('/assets/fonts/SpaceMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('/assets/fonts/SpaceMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --paper: #faf6ec;
  --surface: #ffffff;
  --surface-line: rgba(28, 111, 191, 0.18);
  --blueprint: #1c6fbf;
  --blueprint-dim: rgba(28, 111, 191, 0.45);
  --signal: #ff7a33;
  --signal-soft: rgba(255, 122, 51, 0.16);
  /* Lavis pêche opaque des blocs commerciaux de la slide d'upsells (§84). Opaque et non
     dérivé de --signal en alpha : ces blocs se superposent à --surface ET à --paper selon
     l'écran, et une couleur translucide changeait donc de teinte d'un bloc à l'autre. */
  --signal-wash: #fee7d9;
  --signal-wash-line: #f2b894;
  --ink: #12181f;
  --graphite: #5b6472;
  --danger: #c23a3a;
  --danger-soft: rgba(194, 58, 58, 0.08);

  --font-display: 'Cabinet Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  --radius: 10px;
  --container: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Topbar ---------- */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(to bottom, rgba(250, 246, 236, 0.94), rgba(250, 246, 236, 0));
}

.topbar__brand {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}

.topbar__call {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--surface-line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.topbar__call:hover { border-color: var(--blueprint-dim); background: var(--surface); }

.topbar__call svg { width: 15px; height: 15px; stroke: var(--signal); flex-shrink: 0; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 96px 20px 48px;
  perspective: 1200px;
}

.hero__blueprint {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.4s ease-out;
}

.hero__blueprint svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__grid { fill: none; stroke: var(--surface-line); stroke-width: 1; }

.hero__wire {
  fill: none;
  stroke: var(--blueprint);
  stroke-width: 1.4;
  opacity: 0.45;
  stroke-dasharray: 6 4;
}

.hero__block {
  fill: var(--blueprint);
  fill-opacity: 0.05;
  stroke: var(--blueprint);
  stroke-opacity: 0.4;
  stroke-width: 1.2;
  transition: fill-opacity 0.6s ease, stroke-opacity 0.6s ease;
}

.hero__block.is-built {
  fill: var(--signal);
  fill-opacity: 0.2;
  stroke: var(--signal);
  stroke-opacity: 0.9;
}

.hero__scanline {
  position: absolute;
  left: 0; right: 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent, rgba(28, 111, 191, 0.08), transparent);
  animation: scan 9s linear infinite;
}

@keyframes scan {
  0% { transform: translateY(-140px); }
  100% { transform: translateY(100vh); }
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blueprint);
  margin: 0 0 20px;
}

.eyebrow::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--signal);
  border-radius: 50%;
  box-shadow: 0 0 10px 2px var(--signal-soft);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6.5vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  max-width: 14ch;
  color: var(--ink);
}

.hero__sub {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--graphite);
  max-width: 46ch;
  margin: 0 0 28px;
}

.promise-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink);
  margin-bottom: 14px;
}

.promise-badge svg { width: 16px; height: 16px; stroke: var(--signal); flex-shrink: 0; }

.hero__proof {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 44px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--graphite);
}

.hero__proof svg { width: 14px; height: 14px; stroke: var(--signal); flex-shrink: 0; }

/* ---------- Funnel card ---------- */

.funnel {
  position: relative;
  z-index: 2;
  max-width: 480px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: 28px 26px 30px;
  box-shadow: 0 30px 70px -32px rgba(18, 24, 31, 0.22);
}

.funnel__step-count {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--blueprint);
  margin-bottom: 10px;
}

.funnel__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0 0 22px;
  color: var(--ink);
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 7px;
  font-weight: 700;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"] {
  width: 100%;
  padding: 13px 14px;
  background: #ffffff;
  border: 1px solid var(--surface-line);
  border-radius: 7px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.15s ease;
}

.field input::placeholder { color: #a2a9b4; }

.field input:focus {
  border-color: var(--blueprint);
  outline: none;
}

.field--invalid input { border-color: var(--danger); }

.field__error {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--danger);
  margin-top: 6px;
}

.field--invalid .field__error { display: block; }

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 22px;
  cursor: pointer;
}

.checkbox-field input {
  margin-top: 3px;
  accent-color: var(--signal);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.checkbox-field span {
  font-size: 0.84rem;
  color: var(--graphite);
  line-height: 1.4;
}

.field--checkbox { margin-bottom: 0; }

.field--checkbox.field--invalid .checkbox-field span { color: var(--danger); }

.field--checkbox.field--invalid input[type="checkbox"] {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}

.field--checkbox .field__error { margin: -12px 0 18px; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 20px;
  background: var(--signal);
  color: #1c1006;
  border: none;
  border-radius: 7px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.btn-primary:hover { box-shadow: 0 12px 30px -10px var(--signal-soft); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.6; cursor: progress; transform: none; }

.btn-primary svg { width: 18px; height: 18px; transition: transform 0.15s ease; }
.btn-primary:hover svg { transform: translateX(3px); }

/* Deux CTA côte à côte à l'étape 1 : "Prévisualiser mon futur site" reste le chemin
   principal (mêmes proportions que .btn-primary seul dans les autres étapes), "Me
   faire rappeler" est un second choix légitime, pas une échappatoire discrète —
   d'où un contour plein plutôt que le style texte de .funnel__back/.step5-skip. */
.step1-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.step1-actions .btn-primary { flex: 1 1 220px; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 220px;
  padding: 15px 20px;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--surface-line);
  border-radius: 7px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.btn-secondary:hover { border-color: var(--blueprint-dim); background: rgba(28, 111, 191, 0.06); transform: translateY(-1px); }
.btn-secondary:active { transform: translateY(0); }
.btn-secondary:disabled { opacity: 0.6; cursor: progress; transform: none; }

.funnel__note {
  margin: 14px 0 0;
  font-size: 0.76rem;
  color: var(--graphite);
  text-align: center;
}

.funnel__form-error {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid rgba(194, 58, 58, 0.3);
  border-radius: 7px;
  padding: 10px 12px;
  margin-bottom: 16px;
}

.funnel__form-error.is-visible { display: block; }

.funnel-step { display: none; }
.funnel-step.is-active { display: block; }

.funnel__success {
  display: none;
  text-align: center;
  padding: 12px 0 4px;
}

.funnel__success.is-visible { display: block; }

.funnel__success svg {
  width: 40px; height: 40px;
  stroke: var(--signal);
  margin: 0 auto 16px;
}

.funnel__success h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin: 0 0 10px;
  color: var(--ink);
}

.funnel__success p {
  color: var(--graphite);
  font-size: 0.92rem;
  margin: 0;
}

/* Refus de rédaction (§84). Repris de .funnel__success mais aligné à gauche : c'est un
   texte d'explication qu'on lit, pas une confirmation qu'on survole. Piloté par [hidden]
   et non par .is-visible — le bloc est masqué par défaut dans le HTML. */
.funnel__retry {
  padding: 12px 0 4px;
  text-align: left;
}

.funnel__retry svg {
  width: 40px;
  height: 40px;
  stroke: var(--signal);
  margin: 0 0 16px;
}

.funnel__retry h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin: 0 0 10px;
  color: var(--ink);
}

.funnel__retry p {
  color: var(--graphite);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 12px;
}

.funnel__retry-punch {
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--signal-wash);
  border: 1px solid var(--signal-wash-line);
  color: var(--ink) !important;
  font-weight: 700;
}

.funnel__retry .btn-primary {
  margin-top: 6px;
}

/* ---------- Scroll cue ---------- */

.scroll-cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--graphite);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.scroll-cue svg {
  width: 16px; height: 16px;
  stroke: var(--graphite);
  animation: bob 2s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* ---------- Layout helpers ---------- */

@media (min-width: 860px) {
  .hero { padding: 0 48px; }
  .hero__content { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; }
  .hero__intro { padding-right: 20px; }
}

@media (max-width: 859px) {
  .funnel { max-width: 100%; margin-top: 8px; }
}

main { position: relative; }

/* ---------- Compléments étapes 2-5 (champs non couverts par le pattern .field de base) ---------- */

.field__optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--graphite);
  opacity: 0.8;
}

.field select {
  width: 100%;
  padding: 13px 14px;
  background: #ffffff;
  border: 1px solid var(--surface-line);
  border-radius: 7px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.15s ease;
}

.field select:focus {
  border-color: var(--blueprint);
  outline: none;
}

.field--invalid select { border-color: var(--danger); }


/* ================= Étape 3 (style-picker) ================= */
/* Étape 3 du funnel — style de site + qualification.
   Réutilise les tokens du design system (voir assets/css/main.css) : aucune nouvelle
   couleur/police définie ici. Composant sélecteur de style préfixé .style-picker__
   pour ne rien casser dans le reste du CSS existant. */

/* ---------- Reset du <fieldset> utilisé comme .field ---------- */

fieldset.field {
  min-width: 0;
  border: none;
  padding: 0;
}

/* Libellé du groupe de cartes : même traitement visuel que .field label,
   sans toucher à la règle globale ".field label" (une <legend> n'est pas un <label>). */
.style-picker__legend {
  display: block;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 7px;
  padding: 0;
  font-weight: 700;
}

/* ---------- Grille de cartes ---------- */

.style-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 4px 2px 2px;
  margin: 0 0 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--blueprint-dim) transparent;
}

.style-picker::-webkit-scrollbar { width: 6px; }
.style-picker::-webkit-scrollbar-track { background: transparent; }
.style-picker::-webkit-scrollbar-thumb {
  background: var(--blueprint-dim);
  border-radius: 999px;
}

.style-picker__option {
  position: relative;
}

/* Radio visuellement masqué mais toujours accessible au clavier/lecteur d'écran. */
.style-picker__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.style-picker__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  height: 100%;
  min-height: 46px;
  padding: 7px 8px 9px;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: 7px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.22;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

/* Miniature de style — dégradé 3 tons repris tel quel de la charte du gabarit CSS
   correspondant (generation/gabarits/css/{slug}.css), pas une image (léger, pas de
   requête réseau). Donne un aperçu de l'ambiance avant même la génération réelle. */
.style-swatch {
  display: block;
  width: 100%;
  height: 26px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.style-swatch--minimaliste { background: linear-gradient(135deg, #faf8f5 0%, #e4ded4 55%, #b5502f 100%); }
.style-swatch--luxury-editorial { background: linear-gradient(135deg, #14120f 0%, #3a3226 55%, #c9a227 100%); }
.style-swatch--swiss-international { background: linear-gradient(135deg, #ffffff 0%, #ffffff 55%, #d81c1c 100%); border-color: #111; }
.style-swatch--tech-apple { background: linear-gradient(135deg, #f5f5f7 0%, #ffffff 55%, #0071e3 100%); }
.style-swatch--saas-startup { background: linear-gradient(135deg, #ffffff 0%, #6366f1 55%, #a855f7 100%); }
.style-swatch--playful-fun { background: linear-gradient(135deg, #ffd53d 0%, #ff6b5c 55%, #23c4b6 100%); }
.style-swatch--brutaliste { background: linear-gradient(135deg, #f2f0e6 0%, #0a0a0a 55%, #fff200 100%); }
.style-swatch--futuriste-experimental { background: linear-gradient(135deg, #070b1a 0%, #2ef2ff 55%, #ff3ec8 100%); }
.style-swatch--y2k-retro { background: linear-gradient(135deg, #cfe8ff 0%, #ffd6f0 55%, #ff2ec4 100%); }
.style-swatch--organic-naturel { background: linear-gradient(135deg, #f2f3e6 0%, #7c9463 55%, #5f7a49 100%); }
.style-swatch--dark-cyber { background: linear-gradient(135deg, #050806 0%, #0b120e 55%, #39ff88 100%); }
.style-swatch--bold-impactant { background: linear-gradient(135deg, #0a0a0a 0%, #ffffff 55%, #dbff1e 100%); }
.style-swatch--editorial-magazine { background: linear-gradient(135deg, #ffffff 0%, #131110 55%, #c8102e 100%); }
.style-swatch--corporate-professionnel { background: linear-gradient(135deg, #0d1f33 0%, #204769 55%, #ffffff 100%); }
.style-swatch--glassmorphism { background: linear-gradient(135deg, #6d28d9 0%, #db2777 55%, #f59e0b 100%); }
.style-swatch--neumorphism { background: linear-gradient(135deg, #e0e5ec 0%, #cdd3dc 55%, #5b7fdb 100%); }
.style-swatch--3d-immersif { background: linear-gradient(135deg, #0b0714 0%, #241752 55%, #8b5cf6 100%); }
.style-swatch--retro-vintage { background: linear-gradient(135deg, #f1e0ae 0%, #3a2313 55%, #c1601a 100%); }
.style-swatch--artisanal-handmade { background: linear-gradient(135deg, #cdb28c 0%, #f3e8d2 55%, #7a3826 100%); }
.style-swatch--luxury-minimal { background: linear-gradient(135deg, #17130f 0%, #1d1813 55%, #c9a769 100%); }

.style-picker__card:hover {
  border-color: var(--blueprint-dim);
}

.style-picker__radio:checked + .style-picker__card {
  border-color: var(--signal);
  background: var(--signal-soft);
  color: var(--ink);
  font-weight: 700;
}

.style-picker__radio:focus-visible + .style-picker__card {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

/* Fieldset invalide : réutilise le pattern .field--invalid déjà défini globalement
   pour l'affichage du .field__error (aucune règle à dupliquer ici), on ajoute
   uniquement le retour visuel propre aux cartes. */
.field--invalid .style-picker__card {
  border-color: var(--danger);
}

/* ---------- Textarea (non stylée globalement, complète le pattern .field) ---------- */

.field textarea {
  width: 100%;
  padding: 13px 14px;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: 7px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.15s ease;
}

.field textarea::placeholder { color: #a2a9b4; }

.field textarea:focus {
  border-color: var(--blueprint);
  outline: none;
}

.field--invalid textarea { border-color: var(--danger); }

/* Texte d'aide sous un champ (distinct de .field__error, ton neutre). */
.field__hint {
  font-size: 0.8rem;
  color: var(--graphite);
  margin: 6px 0 0;
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .style-picker__card {
    transition: none;
  }
}

/* ================= Étape 4 (toggles NDD/charte graphique) ================= */
/*
  Styles scopés à l'étape 4 (aucune classe globale de main.css n'est modifiée).
  Réutilise les tokens du design system (--paper, --surface, --blueprint, --signal, --ink,
  --graphite, --surface-line, --danger, --radius, --font-mono, --font-body) tels quels.
*/
.field__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 7px;
  font-weight: 700;
}

.field__help {
  margin: 0 0 12px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--graphite);
}

.toggle-group {
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
}

.toggle-option {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: 7px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.toggle-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.toggle-option:hover {
  border-color: var(--blueprint-dim);
}

.toggle-option input:focus-visible ~ span {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

/* Sélection : ciblée via :has() (navigateurs modernes) + classe .is-selected posée par le JS
   pour les navigateurs sans support de :has(). */
.toggle-option:has(input:checked),
.toggle-option.is-selected {
  background: var(--signal-soft);
  border-color: var(--signal);
  color: var(--ink);
}

.field--invalid .toggle-option {
  border-color: var(--danger);
}

.field--conditional {
  overflow: hidden;
}

/* Le JS bascule l'attribut [hidden] ; ce style ne fait qu'habiller la transition
   d'ouverture quand prefers-reduced-motion n'est pas actif (voir JS_NOTES). */
@media (prefers-reduced-motion: no-preference) {
  .field--conditional {
    transition: max-height 0.25s ease, opacity 0.2s ease;
  }
}

/* ---------- Propositions de nom de domaine (étape 4, §9) ---------- */

.ndd-suggestions__status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--graphite);
  padding: 4px 0;
}

/* Bug constaté en test réel (2026-09-09) : `display: flex` posé sur ces deux classes
   l'emporte sur `[hidden] { display: none }` du navigateur à spécificité égale (la
   feuille de la page passe après celle du navigateur) — le spinner ET le message
   "aucun nom disponible" restaient visibles en même temps, quel que soit l'attribut
   `hidden` réellement posé par le JS. Toute classe qui redéfinit `display` sur un
   élément basculé par `.hidden = true/false` doit reprendre cette règle. */
.ndd-suggestions[hidden],
.ndd-suggestions__status[hidden] {
  display: none;
}

.ndd-suggestions__spinner {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--surface-line);
  border-top-color: var(--signal);
  animation: ndd-spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ndd-suggestions__spinner { animation: none; }
}

@keyframes ndd-spin {
  to { transform: rotate(360deg); }
}

.ndd-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 6px;
}

.ndd-suggestion-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: 7px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ndd-suggestion-card input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.ndd-suggestion-card:hover {
  border-color: var(--blueprint-dim);
}

.ndd-suggestion-card:has(input:checked),
.ndd-suggestion-card.is-selected {
  background: var(--signal-soft);
  border-color: var(--signal);
}

.ndd-suggestion-card__domain {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.95rem;
}

.ndd-suggestion-card__badge {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--signal-ink, var(--ink));
  background: var(--signal-soft);
  padding: 3px 8px;
  border-radius: 999px;
}

.ndd-custom__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  background: var(--signal-soft);
  border: 1px dashed var(--signal);
  border-radius: 999px;
  padding: 9px 16px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.ndd-custom__toggle::before {
  content: '+';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--signal);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
  flex-shrink: 0;
}

.ndd-custom__toggle:hover {
  background: var(--signal-wash);
  border-color: var(--signal);
  transform: translateY(-1px);
}

.ndd-custom {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--blueprint-dim);
  border-radius: 10px;
}

.ndd-custom__row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 6px;
}

.ndd-custom__row input {
  flex: 1 1 auto;
  min-width: 0;
}

.ndd-custom__row .btn-secondary {
  flex: 0 0 auto;
  padding: 0 18px;
}

.ndd-custom__status {
  margin-top: 8px;
  font-size: 0.9rem;
}

.ndd-custom__status--ok {
  color: var(--signal-ink, var(--ink));
}

.ndd-custom__status--error {
  color: #c0392b;
}

/* ================= Étape 5 (upload photos + loader) ================= */
/* Étape 5 — dépôt de photos + génération finale du site.
   Réutilise uniquement les tokens définis dans /assets/css/main.css. */

.step5-intro {
  margin: 0 0 20px;
  font-size: 0.92rem;
  color: var(--graphite);
  line-height: 1.55;
}

/* ---------- Dropzone ---------- */

.photo-drop {
  position: relative;
}

/* Input réel masqué visuellement mais toujours focusable/actionnable au clavier
   (pas de display:none, qui le sortirait de l'ordre de tabulation). */
.photo-drop__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.photo-drop__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 28px 16px;
  background: rgba(28, 111, 191, 0.03);
  border: 1.5px dashed var(--surface-line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.photo-drop__zone:hover {
  border-color: var(--blueprint-dim);
  background: rgba(28, 111, 191, 0.06);
}

/* Anneau de focus visible quand l'input caché reçoit le focus clavier (Tab). */
.photo-drop__input:focus-visible + .photo-drop__zone {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

/* Classe à basculer en JS pendant un glisser-déposer actif au-dessus de la zone. */
.photo-drop.photo-drop--dragover .photo-drop__zone {
  border-color: var(--signal);
  border-style: solid;
  background: var(--signal-soft);
}

.photo-drop__icon {
  width: 26px;
  height: 26px;
  stroke: var(--blueprint);
  margin-bottom: 2px;
}

.photo-drop__label {
  font-size: 0.9rem;
  color: var(--ink);
  font-weight: 500;
}

.photo-drop__hint {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--graphite);
}

/* ---------- Miniatures (peuplées en JS après sélection) ---------- */

.photo-drop__previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.photo-drop__previews:empty {
  margin-top: 0;
}

.photo-drop__preview {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--surface-line);
  background: var(--surface);
}

.photo-drop__preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-drop__preview-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(18, 24, 31, 0.72);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.photo-drop__preview-remove:hover {
  background: var(--danger);
}

/* ---------- Actions ---------- */

.step5-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

/* Retour en arrière (§84) — volontairement discret : c'est une issue de secours pour
   celui qui s'est trompé, pas une invitation à faire l'aller-retour. Aligné à gauche et
   sans fond, il ne concurrence jamais le bouton principal. */
.funnel__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 4px 0;
  background: none;
  border: none;
  color: var(--graphite);
  font-family: var(--font-body);
  font-size: 0.82rem;
  cursor: pointer;
  transition: color 0.15s ease;
}

.funnel__back svg {
  width: 15px;
  height: 15px;
}

.funnel__back:hover {
  color: var(--ink);
}

/* Dans .step5-actions (flex column centrée) il retrouve l'alignement de ses voisins. */
.step5-actions .funnel__back {
  margin-top: 0;
}

.step5-skip {
  background: none;
  border: none;
  padding: 4px 8px;
  color: var(--graphite);
  font-family: var(--font-body);
  font-size: 0.86rem;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.step5-skip:hover {
  color: var(--ink);
}

.step5-skip:disabled,
#step5-submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ---------- Loader de génération ---------- */

.generation-loader {
  text-align: center;
  padding: 18px 4px 4px;
}

.generation-loader[hidden] {
  display: none;
}

.generation-loader__bar {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: var(--signal-soft);
  overflow: hidden;
  margin: 0 0 16px;
}

/* La largeur est pilotée en JS d'après l'étape réelle remontée par le serveur (§52).
   L'ancienne version était un balayage indéterminé : joli, mais il mentait — il tournait
   à l'identique que la génération avance ou soit bloquée. */
.generation-loader__bar-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--signal);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .generation-loader__bar-fill { transition: none; }
}

/* Liste des étapes : le prospect voit ce qui est fait, ce qui est en cours, et ce qui
   reste. C'est ce qui rend une attente de 90 s acceptable — pas la barre seule. */
.generation-steps {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
}

.generation-steps__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--graphite);
  opacity: 0.5;
  transition: opacity 0.3s ease, color 0.3s ease;
}

/* Pastille d'état, en ::before : pas de markup supplémentaire à maintenir. */
.generation-steps__item::before {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: transparent;
}

.generation-steps__item.is-current {
  opacity: 1;
  color: var(--ink);
  font-weight: 600;
}

.generation-steps__item.is-current::before {
  background: var(--signal);
  border-color: var(--signal);
  animation: generation-step-pulse 1.4s ease-in-out infinite;
}

.generation-steps__item.is-done {
  opacity: 0.85;
  color: var(--graphite);
}

.generation-steps__item.is-done::before {
  background: var(--signal);
  border-color: var(--signal);
}

@keyframes generation-step-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.65; }
}

@media (prefers-reduced-motion: reduce) {
  .generation-steps__item.is-current::before { animation: none; }
}

/* Chronomètre par étape (retour client 2026-09-09) : l'étape avant "site" (attente du
   cron, ARCHITECTURE.md §54) fait déjà avancer la barre mais ne coche aucune ligne —
   sans ce repère, cette période paraît figée. Affiché seulement pour l'étape en cours
   et l'étape terminée : les étapes pas encore atteintes n'ont rien à chronométrer. */
.generation-steps__timer {
  margin-left: auto;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: var(--graphite);
  opacity: 0.8;
}

.generation-steps__item.is-current .generation-steps__timer {
  color: var(--ink);
  font-weight: 600;
}

/* Message final de durée totale — reste affiché un court instant avant que l'aperçu
   ne prenne le relais, pour que le prospect ait le temps de le lire. */
.generation-loader__done {
  margin: 14px 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}

.generation-loader__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--ink);
  text-align: center;
}

.generation-loader__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--graphite);
  text-align: center;
}

/* ---------- Preview du site généré (iframe, ARCHITECTURE.md §19) ---------- */

.generation-preview {
  display: none;
  text-align: center;
  padding: 12px 0 4px;
}

.generation-preview.is-visible { display: block; }

.generation-preview__check {
  width: 40px; height: 40px;
  stroke: var(--signal);
  margin: 0 auto 16px;
}

.generation-preview h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin: 0 0 10px;
  color: var(--ink);
}

.generation-preview p {
  color: var(--graphite);
  font-size: 0.92rem;
  margin: 0 0 20px;
}

.generation-preview__frame-wrap {
  width: 100%;
  height: 480px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--blueprint);
  box-shadow: 0 12px 32px rgba(28, 111, 191, 0.14);
  background: var(--surface);
}

.generation-preview__frame {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 640px) {
  .generation-preview__frame-wrap { height: 340px; }
}

/* ---------- Checkout Stripe (ARCHITECTURE.md §27) ---------- */

.checkout {
  margin-top: 20px;
  text-align: center;
}

.checkout__start {
  width: 100%;
  justify-content: center;
}

.checkout__form {
  margin-top: 16px;
  text-align: left;
}

.checkout__summary {
  list-style: none;
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--surface-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkout__summary li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem;
}

.checkout__summary li span:first-child {
  color: var(--graphite);
}

.checkout__summary li span:last-child {
  font-weight: 600;
  white-space: nowrap;
}

/* Total réellement débité, renvoyé par le serveur (amount_total Odoo, TTC) —
   séparé visuellement des lignes de prix HT pour lever toute ambiguïté au moment
   de payer (ARCHITECTURE.md §42). */
.checkout__summary-total {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--surface-line);
  font-size: 0.95rem;
}

.checkout__summary-total span:first-child {
  color: var(--ink);
  font-weight: 600;
}

.checkout__summary-total span:last-child {
  font-weight: 700;
}

/* Léger échéancier après le montant débité aujourd'hui (retour client 2026-09-09) :
   texte discret, pas un montant à retenir comme les lignes ci-dessus. */
.checkout__summary-schedule {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--graphite);
  line-height: 1.4;
}

.checkout__payment-element {
  margin-bottom: 14px;
  min-height: 40px;
}

.checkout__submit {
  width: 100%;
  justify-content: center;
  margin-bottom: 10px;
}

.checkout__note {
  margin: 0;
  font-size: 0.78rem;
  color: var(--graphite);
  text-align: center;
}

.checkout__error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 7px;
  background: rgba(194, 58, 58, 0.08);
  border: 1px solid var(--danger);
  color: var(--danger);
  font-size: 0.85rem;
}

.checkout__success {
  margin-top: 16px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--signal-soft);
  text-align: center;
}

.checkout__success svg {
  width: 32px; height: 32px;
  stroke: var(--signal);
  margin: 0 auto 12px;
}

.checkout__success h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink);
}

.checkout__success p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--graphite);
}

.modifications {
  margin-top: 16px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--surface-line);
  text-align: left;
}

.modifications h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink);
}

.modifications__lead {
  margin: 0 0 18px;
  font-size: 0.88rem;
  color: var(--graphite);
}

.modifications .field {
  margin-bottom: 14px;
}

.modifications__step-count {
  margin: 0 0 16px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--graphite);
}

.enrich-step {
  display: none;
}

.enrich-step.is-active {
  display: block;
}

/* Cible des recentrages de app.js (remonterVers) : la topbar est en position fixe,
   sans cette réserve le haut du formulaire passerait dessous. */
#modifications-enrich-wrap,
.enrich-step {
  scroll-margin-top: 88px;
}

.enrich-next,
#enrich-submit {
  width: 100%;
  justify-content: center;
  margin-bottom: 8px;
}

.modifications__offer {
  margin: 4px 0 18px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--signal-soft);
  border: 1px solid var(--blueprint-dim);
}

.modifications__offer-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.86rem;
  color: var(--ink);
  line-height: 1.45;
}

.modifications__offer-check input {
  margin-top: 3px;
  flex: none;
}

.modifications__error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 7px;
  background: rgba(194, 58, 58, 0.08);
  border: 1px solid var(--danger);
  color: var(--danger);
  font-size: 0.85rem;
}

#modifications-submit {
  width: 100%;
  justify-content: center;
  margin-bottom: 8px;
}

.modifications__skip {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  padding: 4px 8px;
  color: var(--graphite);
  font-family: var(--font-body);
  font-size: 0.86rem;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.modifications__skip:hover {
  color: var(--ink);
}

.modifications__success {
  margin-top: 16px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--signal-soft);
  text-align: center;
}

.modifications__success svg {
  width: 32px; height: 32px;
  stroke: var(--signal);
  margin: 0 auto 12px;
}

.modifications__success h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink);
}

.modifications__success p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--graphite);
}

/* ================= Section témoignages ================= */
/* ---------- Testimonials ---------- */

.testimonials {
  position: relative;
  padding: 88px 20px 96px;
  border-top: 1px solid var(--surface-line);
  overflow: hidden;
}

.testimonials__container {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
}

.testimonials__header {
  position: relative;
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}


.testimonials__header .eyebrow {
  justify-content: center;
}

.testimonials__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}

.testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 860px) {
  .testimonials__grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

.testimonials__card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: 28px 26px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.testimonials__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -28px rgba(18, 24, 31, 0.18);
  border-color: var(--blueprint-dim);
}

.testimonials__quote-mark {
  width: 30px;
  height: 22px;
  fill: var(--blueprint);
  opacity: 0.3;
  flex-shrink: 0;
}

.testimonials__text {
  margin: 0;
  flex-grow: 1;
}

.testimonials__text p {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.55;
}

.testimonials__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.testimonials__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--signal-soft);
  color: var(--blueprint);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}

.testimonials__name {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--graphite);
}

.testimonials__card--video {
  padding: 12px 12px 20px;
}

.testimonials__video {
  width: 100%;
  height: 320px;
  border-radius: 8px;
  background: var(--paper);
  object-fit: cover;
  object-position: top center;
}

.testimonials__card--video .testimonials__author {
  padding: 0 10px;
}

/* ================= Section réalisations ================= */
/* ---------- Portfolio ("Nos réalisations") ---------- */

.portfolio {
  padding: 96px 20px;
  border-top: 1px solid var(--surface-line);
  background: var(--paper);
}

.portfolio__container {
  max-width: var(--container);
  margin: 0 auto;
}

.portfolio__head {
  max-width: 56ch;
  margin: 0 0 48px;
}

.portfolio__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 14px;
}

.portfolio__lead {
  font-size: 1rem;
  color: var(--graphite);
  margin: 0;
}

.portfolio__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.portfolio__card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: 18px 18px 22px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.portfolio__card:hover {
  border-color: var(--blueprint-dim);
  box-shadow: 0 20px 44px -28px rgba(18, 24, 31, 0.22);
  transform: translateY(-2px);
}

/* Capture d'écran réelle du site client */

.portfolio__visual {
  display: block;
  border-radius: 7px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--surface-line);
  margin-bottom: 18px;
  aspect-ratio: 8 / 5;
  cursor: pointer;
}

.portfolio__screenshot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.3s ease;
}

.portfolio__card:hover .portfolio__screenshot {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .portfolio__card:hover .portfolio__screenshot { transform: none; }
}

.portfolio__sector {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blueprint);
  margin: 0 0 8px;
}

.portfolio__desc {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--graphite);
  margin: 0 0 18px;
  flex-grow: 1;
}

.portfolio__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 10px 16px;
  border: 1px solid var(--surface-line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.portfolio__link svg {
  width: 14px;
  height: 14px;
  stroke: var(--signal);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.portfolio__link:hover {
  border-color: var(--signal);
  background: var(--signal-soft);
}

.portfolio__link:hover svg {
  transform: translate(2px, -2px);
}

@media (min-width: 860px) {
  .portfolio__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio__card,
  .portfolio__link,
  .portfolio__link svg {
    transition: none;
  }
}

/* ================= Section storytelling ================= */
/* ---------- Story (fondateur) ---------- */

.story {
  padding: 88px 20px 96px;
  border-top: 1px solid var(--surface-line);
}

.story__container {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 860px) {
  .story__container {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
  }
}

.story__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 14px 0 28px;
  color: var(--ink);
}

.story__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.story__body p {
  margin: 0;
  color: var(--graphite);
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 62ch;
}

.story__body p:first-child {
  color: var(--ink);
}

.story__name {
  color: var(--signal);
  font-family: var(--font-display);
  font-weight: 700;
}

.story__cta {
  margin-top: 36px;
}

.story__aside {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 28px 26px;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
}

@media (min-width: 860px) {
  .story__aside {
    position: sticky;
    top: 96px;
  }
}

.story__portrait-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.story__portrait {
  width: 84px;
  height: 84px;
  object-fit: cover;
  object-position: top center;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--surface-line);
  flex-shrink: 0;
}

.story__portrait-caption {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink);
}

.story__portrait-caption span {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--graphite);
}

.story__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.story__list-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.story__list-item span {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.5;
}

.story__list-item a {
  color: var(--blueprint);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.story__list-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--blueprint);
}

.story__contact {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--surface-line);
  color: var(--graphite);
  font-size: 0.92rem;
  line-height: 1.55;
}

.story__contact a {
  color: var(--blueprint);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ================= Section KPI + CTA final ================= */
/* ---------- KPI ---------- */

.kpi {
  padding: 88px 20px 72px;
  border-top: 1px solid var(--surface-line);
}

.kpi__container {
  max-width: var(--container);
  margin: 0 auto;
}

.kpi__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}

.kpi__header .eyebrow {
  justify-content: center;
}

.kpi__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}

.kpi__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}

@media (min-width: 860px) {
  .kpi__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}

.kpi__tile {
  min-width: 0; /* empêche un contenu incassable (ex. texte sans espace) d'élargir la colonne
                   de la grille au-delà du conteneur et de faire déborder la page horizontalement */
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.kpi__tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -28px rgba(18, 24, 31, 0.18);
  border-color: var(--blueprint-dim);
}

.kpi__value {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 3.2vw, 1.9rem);
  line-height: 1;
  color: var(--blueprint);
  letter-spacing: -0.01em;
  overflow-wrap: break-word; /* filet de sécurité si un futur contenu est à nouveau incassable */
}

.kpi__unit {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--graphite);
  margin-left: 2px;
}

.kpi__label {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--graphite);
}

.kpi__source {
  text-align: center;
  font-size: 0.85rem;
  color: var(--graphite);
  margin: 0;
}

.kpi__source a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--blueprint);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kpi__source-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ---------- FAQ ---------- */

.faq {
  padding: 80px 20px;
  border-top: 1px solid var(--surface-line);
}

.faq__container {
  max-width: 720px;
  margin: 0 auto;
}

.faq__container .eyebrow { justify-content: center; }

.faq__title {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--ink);
  margin: 0 0 40px;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq__item {
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 4px 20px;
}

.faq__item summary {
  padding: 16px 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--signal);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.faq__item[open] summary::after {
  transform: rotate(45deg);
}

.faq__item p {
  margin: 0 0 18px;
  color: var(--graphite);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* ---------- CTA final ---------- */

.cta-final {
  padding: 80px 20px 100px;
  border-top: 1px solid var(--surface-line);
}

.cta-final__container {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.cta-final__eyebrow {
  justify-content: center;
}

.cta-final__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--ink);
}

.cta-final__sub {
  margin: 0 0 32px;
  font-size: clamp(1rem, 2vw, 1.1rem);
  color: var(--graphite);
  line-height: 1.5;
}

.cta-final__button {
  width: auto;
  max-width: 100%;
  padding: 17px 36px;
  font-size: 1.05rem;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--surface-line);
  background: var(--surface);
}

.site-footer__container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 64px 20px 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 860px) {
  .site-footer__container {
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 48px;
  }
}

.site-footer__brand {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  margin-bottom: 12px;
}

.site-footer__desc {
  margin: 0;
  color: var(--graphite);
  font-size: 0.9rem;
  line-height: 1.55;
  max-width: 38ch;
}

.site-footer__heading {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blueprint);
  margin: 0 0 16px;
}

.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 0.92rem;
  text-decoration: none;
}

.site-footer__links a:hover { color: var(--blueprint); }

.site-footer__links svg {
  width: 16px;
  height: 16px;
  stroke: var(--signal);
  flex-shrink: 0;
}

.site-footer__address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.4;
}

.site-footer__address svg {
  width: 16px;
  height: 16px;
  stroke: var(--signal);
  flex-shrink: 0;
  margin-top: 2px;
}

.site-footer__bottom {
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px 20px 32px;
  border-top: 1px solid var(--surface-line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--graphite);
}

.site-footer__bottom p { margin: 0; }

.site-footer__bottom a {
  color: var(--graphite);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__bottom a:hover { color: var(--ink); }

.site-footer__bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}

/* ---------- Page mentions légales ---------- */

.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 140px 20px 100px;
}

.legal-page__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blueprint);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  margin-bottom: 32px;
}

.legal-page__back svg { width: 16px; height: 16px; }

.legal-page h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin: 0 0 36px;
  color: var(--ink);
}

.legal-page h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  margin: 36px 0 12px;
  color: var(--ink);
}

.legal-page p, .legal-page li {
  color: var(--graphite);
  font-size: 0.96rem;
  line-height: 1.65;
}

.legal-page a { color: var(--blueprint); }

.legal-page ul { padding-left: 20px; }

.legal-page .legal-note {
  border-left: 3px solid var(--blueprint);
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.03);
  font-size: 0.88rem;
}

/* ---------- Section "Styles disponibles" ---------- */

.styles {
  padding: 96px 20px;
  border-top: 1px solid var(--surface-line);
}

.styles__container {
  max-width: var(--container);
  margin: 0 auto;
}

.styles__head {
  max-width: 60ch;
  margin: 0 0 44px;
}

.styles__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 14px;
}

.styles__lead {
  font-size: 1rem;
  color: var(--graphite);
  margin: 0;
}

.styles__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 28px;
}

@media (min-width: 640px) {
  .styles__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 980px) {
  .styles__grid { grid-template-columns: repeat(4, 1fr); }
}

.styles__card {
  display: block;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: 14px 14px 18px;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.styles__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -28px rgba(18, 24, 31, 0.2);
  border-color: var(--blueprint-dim);
}

.styles__swatch {
  position: relative;
  height: 88px;
  border-radius: 7px;
  overflow: hidden;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.styles__name {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}

.styles__desc {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--graphite);
}

.styles__preview-hint {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--blueprint);
}

.styles__card:hover .styles__preview-hint {
  color: var(--signal);
}

.styles__more {
  text-align: center;
  color: var(--graphite);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  margin: 0 0 32px;
}

.styles__cta {
  width: auto;
  max-width: 320px;
  margin: 0 auto;
}

/* Swatches — un traitement visuel abstrait distinct par style */

.styles__card--minimaliste .styles__swatch { background: #ffffff; border: 1px solid var(--surface-line); }
.styles__swatch-line { width: 60%; height: 2px; background: var(--ink); }

.styles__card--tech .styles__swatch { background: linear-gradient(160deg, #1a1f2b, #363c4a); }
.styles__swatch-glow { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%); }

.styles__card--saas .styles__swatch { background: linear-gradient(135deg, #7c3aed, #ec4899); }
.styles__swatch-card { width: 60%; height: 44%; background: rgba(255,255,255,0.92); border-radius: 8px; }

.styles__card--futuriste .styles__swatch { background: #0a0e14; }
.styles__swatch-grid {
  width: 100%; height: 100%;
  background-image: linear-gradient(rgba(75,180,255,0.35) 1px, transparent 1px), linear-gradient(90deg, rgba(75,180,255,0.35) 1px, transparent 1px);
  background-size: 14px 14px;
}

.styles__card--organic .styles__swatch { background: #efe6d8; }
.styles__swatch-blob { width: 54px; height: 44px; background: #8a9a6b; border-radius: 60% 40% 55% 45% / 55% 45% 55% 45%; }

.styles__card--corporate .styles__swatch { background: #142238; }
.styles__swatch-band { width: 70%; height: 3px; background: #c9a24b; }

.styles__card--artisanal .styles__swatch { background: #f1e6d4; border: 1.5px dashed #b79a6d; }
.styles__swatch-dashed { width: 40px; height: 40px; border: 2px dashed #b79a6d; border-radius: 50%; }

.styles__card--dark .styles__swatch { background: #0d0d12; }
.styles__swatch-neon { width: 50%; height: 3px; background: #ff2fd0; box-shadow: 0 0 12px 2px rgba(255,47,208,0.7); }

@media (prefers-reduced-motion: reduce) {
  .styles__card { transition: none; }
}

/* ---------- Bulle d'aide flottante ---------- */

.help-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.help-widget__bubble {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 18px;
  border: none;
  border-radius: 999px;
  background: var(--signal);
  color: #1c1006;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 14px 32px -14px rgba(255, 122, 51, 0.7);
  animation: help-bump 3.5s ease-in-out infinite;
}

.help-widget__bubble svg { width: 20px; height: 20px; flex-shrink: 0; }

.help-widget__bubble:hover { animation-play-state: paused; }

@keyframes help-bump {
  0%, 80%, 100% { transform: translateY(0); }
  85% { transform: translateY(-6px); }
  90% { transform: translateY(0); }
  93% { transform: translateY(-3px); }
  96% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .help-widget__bubble { animation: none; }
}

.help-widget__panel {
  width: min(340px, calc(100vw - 40px));
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: 20px 20px 18px;
  box-shadow: 0 24px 60px -24px rgba(18, 24, 31, 0.35);
}

.help-widget__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
}

.help-widget__text {
  margin: 0 0 16px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--graphite);
}

.help-widget__action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--surface-line);
  border-radius: 7px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.88rem;
  margin-bottom: 8px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.help-widget__action:last-child { margin-bottom: 0; }

.help-widget__action svg { width: 17px; height: 17px; stroke: var(--signal); flex-shrink: 0; }

.help-widget__action:hover { border-color: var(--blueprint-dim); background: var(--paper); }

/* ---------- Fil de chat de l'assistant (ARCHITECTURE.md §23) ---------- */

.chat-thread {
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  padding-right: 2px;
}

.chat-thread::-webkit-scrollbar { width: 5px; }
.chat-thread::-webkit-scrollbar-thumb { background: var(--blueprint-dim); border-radius: 999px; }

.chat-message {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 0.85rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-message--assistant {
  align-self: flex-start;
  background: var(--paper);
  border: 1px solid var(--surface-line);
  color: var(--ink);
  border-bottom-left-radius: 3px;
}

.chat-message--user {
  align-self: flex-end;
  background: var(--signal);
  color: #1c1006;
  border-bottom-right-radius: 3px;
}

.chat-message--pending {
  align-self: flex-start;
  background: var(--paper);
  border: 1px solid var(--surface-line);
  color: var(--graphite);
  font-style: italic;
}

.chat-form {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.chat-form__input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--surface-line);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--ink);
  background: var(--surface);
}

.chat-form__input:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 1px;
}

.chat-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: none;
  border-radius: 8px;
  background: var(--signal);
  color: #1c1006;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.chat-form__submit svg { width: 18px; height: 18px; }

.chat-form__submit:disabled { opacity: 0.5; cursor: default; }

.help-widget__escalation {
  padding-top: 12px;
  border-top: 1px solid var(--surface-line);
}

.funnel__help-hint {
  margin: 14px 0 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--graphite);
}

.funnel__help-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--blueprint);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font-size: inherit;
}

/* ---------- Bandeau de consentement cookies ---------- */

.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  background: var(--ink);
  box-shadow: 0 -12px 30px -10px rgba(18, 24, 31, 0.35);
}

.consent-banner[hidden] { display: none; }

.consent-banner__text {
  margin: 0;
  flex: 1 1 260px;
  color: var(--paper);
  font-size: 0.86rem;
  line-height: 1.5;
}

.consent-banner__text a {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent-banner__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.consent-banner__btn {
  padding: 10px 18px;
  border-radius: 7px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
  border: 1px solid transparent;
}

.consent-banner__btn--reject {
  background: transparent;
  border-color: rgba(250, 246, 236, 0.35);
  color: var(--paper);
}

.consent-banner__btn--reject:hover { border-color: var(--paper); }

.consent-banner__btn--accept {
  background: var(--signal);
  color: #1c1006;
}

.consent-banner__btn--accept:hover { filter: brightness(1.05); }

/* Quand le bandeau est visible, on remonte la bulle d'aide pour éviter le chevauchement. */
body.has-consent-banner .help-widget {
  bottom: 96px;
  transition: bottom 0.2s ease;
}

@media (max-width: 640px) {
  body.has-consent-banner .help-widget { bottom: 140px; }
}

/* ---------- Fin de parcours après régénération post-questionnaire (§58) ---------- */

.regeneration-done {
  text-align: left;
  padding: 20px 22px;
  margin: 4px 0 0;
  border-radius: 14px;
  background: var(--signal-soft);
  border: 1px solid color-mix(in srgb, var(--signal) 22%, transparent);
}

.regeneration-done[hidden] { display: none; }

.regeneration-done h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0 0 10px;
  color: var(--ink);
}

.regeneration-done p {
  color: var(--graphite);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 10px;
}

.regeneration-done p:last-child { margin-bottom: 0; }

/* Mot mis en évidence dans une phrase d'attente ou de conclusion. Nommée par son rôle
   (« accent ») et non par sa couleur : elle suit le jeton de marque, pas un orange
   codé en dur qui deviendrait faux au premier changement de charte. */
.accent {
  color: var(--signal);
  font-weight: 700;
}

.regeneration-done__url {
  color: var(--signal);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--signal) 45%, transparent);
  word-break: break-all;
}

.regeneration-done__url:hover { border-bottom-color: var(--signal); }

/* CTA "expéditeur de confiance" (retour client 2026-09-09) : encart distinct dans le
   même bloc, pour qu'il ne se noie pas dans le paragraphe informatif au-dessus. */
.regeneration-done__cta {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--signal) 30%, transparent);
  border-radius: 10px;
  padding: 12px 14px;
}

.regeneration-done__cta a {
  color: var(--signal);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--signal) 45%, transparent);
}

.regeneration-done__cta a:hover { border-bottom-color: var(--signal); }

.regeneration-done__contact a {
  color: var(--signal);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--signal) 40%, transparent);
}

.regeneration-done__contact a:hover { border-bottom-color: var(--signal); }

/* --- Slide d'upsells post-paiement (ARCHITECTURE.md §83) -------------------
   Réutilise les tokens et le vocabulaire visuel du bloc `.modifications`, qui la
   suit immédiatement : les deux écrans s'enchaînent, ils doivent se ressembler. */

.upsells {
  margin-top: 16px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--surface-line);
  text-align: left;
}

.upsells h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink);
}

/* Même fond que les deux cartes d'upsell : c'est la bordure — deux fois plus épaisse et
   nettement plus contrastée — qui dit « ceci est déjà acquis », et non la couleur (§84). */
.upsells__recap {
  margin: 0 0 18px;
  padding: 14px 16px;
  list-style: none;
  border-radius: var(--radius);
  background: var(--signal-wash);
  border: 2px solid var(--signal);
  font-size: 0.86rem;
  color: var(--graphite);
}

.upsells__recap li + li {
  margin-top: 6px;
}

.upsells__recap strong {
  color: var(--ink);
}

.upsells__lead {
  margin: 0 0 14px;
  font-size: 0.88rem;
  color: var(--graphite);
}

/* La carte entière est le label : toute sa surface coche la case, pas seulement
   les 16 px du carré — c'est un écran majoritairement consulté au doigt. */
.upsells__card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--signal-wash-line);
  background: var(--signal-wash);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.upsells__card:hover {
  border-color: var(--signal);
}

/* `:has()` porte l'état coché sur la carte entière. Sans support, la case reste
   cochée et lisible — la mise en évidence est un confort, jamais l'information.
   ⚠️ Le FOND NE CHANGE PAS en cochant (§84) : un bloc commercial qui change de couleur
   au clic se lit comme un autre bloc, pas comme le même bloc sélectionné. La sélection
   s'exprime par la bordure et un liseré, deux signaux qui ne déplacent rien. */
.upsells__card:has(input:checked) {
  border-color: var(--signal);
  box-shadow: inset 0 0 0 1px var(--signal);
}

.upsells__card input {
  margin-top: 3px;
  flex: none;
}

.upsells__card-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.upsells__card-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}

.upsells__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blueprint);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: 2px;
}

.upsells__card-desc {
  font-size: 0.86rem;
  color: var(--graphite);
  line-height: 1.45;
}

.upsells__card-price {
  font-size: 0.86rem;
  color: var(--ink);
}

.upsells__free {
  color: var(--signal);
  font-weight: 700;
}

/* L'entretien SEO est OFFERT : fond papier, pas le lavis pêche des deux blocs payants.
   La couleur sépare ici ce qui coûte de ce qui ne coûte rien (§84), et elle ne change pas
   davantage en cochant. */
.upsells__offer {
  margin: 16px 0 18px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--surface-line);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.upsells__offer:has(input:checked) {
  border-color: var(--blueprint);
  box-shadow: inset 0 0 0 1px var(--blueprint);
}

.upsells__offer-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.86rem;
  color: var(--ink);
  line-height: 1.45;
}

.upsells__offer-check input {
  margin-top: 3px;
  flex: none;
}

.upsells__error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 7px;
  background: rgba(194, 58, 58, 0.08);
  border: 1px solid var(--danger);
  color: var(--danger);
  font-size: 0.85rem;
}

#upsells-submit {
  width: 100%;
  justify-content: center;
}

/* ---------- Embed overlay : liens sortants + aperçus de style ---------- */

.embed-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  background: var(--ink);
}

/* Un style d'auteur (même à spécificité égale) l'emporte toujours sur la règle
   navigateur `[hidden] { display: none }` — sans cette ligne, `display: flex`
   ci-dessus s'appliquait MÊME avec l'attribut `hidden` posé, et l'overlay recouvrait
   le site dès le chargement de la page (constaté en prod le 2026-09-17). */
.embed-overlay[hidden] {
  display: none;
}

.embed-overlay__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--surface-line);
  flex-wrap: wrap;
}

.embed-overlay__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--signal-soft);
  border: 1px solid var(--signal-wash-line);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  flex-shrink: 0;
}

.embed-overlay__back svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.embed-overlay__back:hover {
  background: var(--signal-wash);
}

.embed-overlay__title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--graphite);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.embed-overlay__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.embed-overlay__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #ffffff;
}

/* Le chargement d'un site déjà réalisé peut prendre plusieurs secondes (DNS, TLS,
   rendu WordPress) : sans indicateur, l'attente ressemblait à un plantage (retour
   client 2026-09-17 — "affichage long 3-6s"). Masqué via `hidden` : même piège que
   `.embed-overlay` (§ ci-dessus) si un display explicite l'emporte sur l'attribut. */
.embed-overlay__loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--graphite);
}

.embed-overlay__loading[hidden] {
  display: none;
}

.embed-overlay__spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--surface-line);
  border-top-color: var(--signal);
  border-radius: 50%;
  animation: embed-spin 0.7s linear infinite;
}

@keyframes embed-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .embed-overlay__spinner { animation: none; }
}

@media (max-width: 640px) {
  .embed-overlay__title {
    display: none;
  }
}