/* ==========================================================================
   Studeva — vitrine publique
   Feuille de style unique, sans build. Les tokens reprennent ceux du produit
   (apps/web/src/index.css) pour que la vitrine et l'écran de connexion se
   ressemblent : même noir, même beige chaud, mêmes grands rayons.
   ========================================================================== */

/* --------------------------------------------------------------- 1. tokens */

:root {
  color-scheme: light;

  --background: #ffffff;
  --foreground: #000000;
  --card: #ffffff;
  --muted: #f5f5f5;
  --muted-foreground: #6b6b6b;
  --accent: #f1e4db;
  --accent-foreground: #000000;
  --primary: #000000;
  --primary-foreground: #ffffff;
  --border: #e5e5e5;
  --ring: #000000;

  /* Scène chaude : le dégradé du panneau de connexion. */
  --warm-from: #fff7ed;
  --warm-via: #fff1f2;
  --warm-to: #ffe4e6;
  --warm-foreground: #171717;
  --warm-muted: #57534e;
  --warm-surface: rgb(255 255 255 / 0.72);
  --warm-hairline: rgb(0 0 0 / 0.06);

  --radius-sm: 0.75rem;
  --radius: 1rem;
  --radius-lg: 1.5rem;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 3px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.06), 0 2px 4px rgb(0 0 0 / 0.04);
  --shadow-xl: 0 24px 60px -20px rgb(0 0 0 / 0.22), 0 8px 20px -12px rgb(0 0 0 / 0.12);

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --container: 72rem;
  --gutter: 1.25rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --background: #0a0a0a;
    --foreground: #f5f5f5;
    --card: #171717;
    --muted: #171717;
    --muted-foreground: #a3a3a3;
    --accent: #f1e4db;
    --accent-foreground: #000000;
    --primary: #ffffff;
    --primary-foreground: #000000;
    --border: #262626;
    --ring: #ffffff;

    --shadow-xl: 0 24px 60px -20px rgb(0 0 0 / 0.8), 0 8px 20px -12px rgb(0 0 0 / 0.6);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.5);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --background: #0a0a0a;
  --foreground: #f5f5f5;
  --card: #171717;
  --muted: #171717;
  --muted-foreground: #a3a3a3;
  --accent: #f1e4db;
  --accent-foreground: #000000;
  --primary: #ffffff;
  --primary-foreground: #000000;
  --border: #262626;
  --ring: #ffffff;

  --shadow-xl: 0 24px 60px -20px rgb(0 0 0 / 0.8), 0 8px 20px -12px rgb(0 0 0 / 0.6);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.5);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.5);
}

/* Le panneau chaud reste clair dans les deux thèmes — comme l'aside de
   l'écran de connexion, qui ne bascule pas non plus. */

/* ---------------------------------------------------------------- 2. reset */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  font-weight: 600;
  color: var(--primary-foreground);
  background: var(--primary);
  border-radius: 999px;
  transform: translateY(-160%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* ------------------------------------------------------------ 3. structure */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 40rem) {
  :root {
    --gutter: 2rem;
  }
}

.section {
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

.section--tight {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.section-head {
  max-width: 46rem;
}

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* ---------------------------------------------------------- 4. typographie */

h1,
h2,
h3 {
  font-weight: 800;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.h-display {
  font-size: clamp(2.5rem, 6.2vw, 4rem);
  line-height: 1.02;
}

.h-section {
  font-size: clamp(1.875rem, 3.6vw, 2.6rem);
  line-height: 1.1;
}

.h-card {
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 700;
}

.lead {
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
  color: var(--muted-foreground);
  max-width: 46ch;
}

.muted {
  color: var(--muted-foreground);
}

.small {
  font-size: 0.875rem;
}

.tabular {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- 5. boutons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding-inline: 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  color: var(--primary-foreground);
  background: var(--primary);
}

.btn--primary:hover {
  background: color-mix(in srgb, var(--primary) 88%, var(--background));
}

.btn--outline {
  border-color: var(--border);
  background: var(--background);
}

.btn--outline:hover {
  background: var(--muted);
}

.btn--ghost:hover {
  background: var(--muted);
}

.btn--lg {
  height: 3.5rem;
  padding-inline: 2rem;
  font-size: 1rem;
}

.btn--block {
  width: 100%;
}

/* Boutons posés sur la scène chaude : toujours en valeurs fixes, le panneau ne
   bascule pas avec le thème. */
.btn--on-warm {
  color: #ffffff;
  background: #171717;
}

.btn--on-warm:hover {
  background: #2f2f2f;
}

.btn--on-warm-outline {
  color: #171717;
  background: rgb(255 255 255 / 0.75);
  border-color: rgb(0 0 0 / 0.12);
}

.btn--on-warm-outline:hover {
  background: #ffffff;
}

.icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm {
  width: 1rem;
  height: 1rem;
}

/* ------------------------------------------------------------- 6. en-tête */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--background) 82%, transparent);
  backdrop-filter: blur(16px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 4rem;
}

/* Le nom en toutes lettres tient lieu de logo tant qu'il n'y en a pas. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.site-nav {
  display: none;
  gap: 1.5rem;
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}

.site-nav a:hover {
  color: var(--foreground);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: auto;
}

.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  min-width: 2.25rem;
  padding-inline: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background-color 0.18s ease;
}

.pill-btn:hover {
  background: var(--muted);
}

.pill-btn--icon {
  padding-inline: 0;
  border-color: transparent;
}

/* Le bouton propose l'action inverse du thème courant : lune en clair, soleil
   en sombre. Piloté en CSS pour rester juste avant même que le JS se charge. */
.theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun {
    display: block;
  }

  :root:not([data-theme="light"]) .theme-toggle .icon-moon {
    display: none;
  }
}

/* Sur un téléphone, « Essayer gratuitement » à côté du nom, de la langue et du
   thème dépasse la largeur de l'écran — d'où un libellé court en dessous de
   30rem. Les deux sont dans le HTML : c'est le même lien, pas deux appels à
   l'action, et aucun n'est caché à l'indexation. */
.cta-long {
  display: none;
}

@media (min-width: 30rem) {
  .cta-short {
    display: none;
  }

  .cta-long {
    display: inline;
  }
}

/* ------------------------------------------------- 6b. menu de petite largeur */

/* Un `<details>` plutôt qu'un bouton piloté en JS : le panneau s'ouvre et se
   ferme sans script, exactement comme les questions plus bas. Le JS n'ajoute
   que le confort — fermeture au clic sur un lien, à l'échappement, ou à côté. */

.menu {
  display: block;
}

.menu__button {
  cursor: pointer;
  list-style: none;
}

.menu__button::-webkit-details-marker {
  display: none;
}

.menu__button .icon-close {
  display: none;
}

.menu[open] .menu__button .icon-burger {
  display: none;
}

.menu[open] .menu__button .icon-close {
  display: block;
}

/* Ancré sur l'en-tête, qui est déjà un bloc conteneur (`sticky`, et son
   `backdrop-filter` en crée un de toute façon) : le panneau part du bas de la
   barre sur toute sa largeur, sans dépendre de la place du bouton dans la
   rangée d'actions. Fond opaque et non flouté : un `backdrop-filter` imbriqué
   dans un autre échantillonne un arrière-plan déjà composité, et le texte y
   perd son contraste. */
.menu__panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: grid;
  padding: 0.25rem var(--gutter) 0.75rem;
  background: var(--background);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

/* Enfants directs seulement : la bascule de langue contient elle aussi un
   lien, qui n'a rien à faire d'un rembourrage de rangée ni d'un filet. */
.menu__panel > a {
  padding: 0.875rem 0.25rem;
  font-size: 1rem;
  font-weight: 500;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.menu__panel > a:hover {
  color: var(--muted-foreground);
}

.menu__panel > a:first-child {
  border-top: 0;
}

.menu__lang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.25rem 0.25rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.menu__lang-label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

/* Passé le téléphone, le panneau cesse de barrer l'écran d'un bord à l'autre :
   il tombe sous le bouton, comme un menu. Le menu vivant jusqu'à 64rem et le
   conteneur ne butant sur sa largeur maximale qu'à 72rem, `right` calé sur la
   gouttière aligne toujours le panneau sur le bord du contenu. */
@media (min-width: 30rem) {
  .menu__panel {
    left: auto;
    right: var(--gutter);
    width: 16rem;
    margin-top: 0.5rem;
    padding: 0.25rem 1rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
}

/* --------------------------------------------------- 6c. bascule de langue */

/* Les deux langues sont montrées ensemble, la courante en plein : on voit d'un
   coup où l'on est ET où l'on peut aller, ce qu'une pastille unique ne disait
   qu'à moitié. La hauteur est calée sur celle de `.pill-btn` — 3 + 28 + 3, plus
   2 de filet — pour que la barre reste alignée. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  height: 2.25rem;
  padding: 0.1875rem;
  border: 1px solid var(--border);
  border-radius: 999px;
}

.lang-switch > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.75rem;
  min-width: 2rem;
  padding-inline: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  transition: background-color 0.18s ease, color 0.18s ease;
}

/* La langue courante est un `<span>`, pas un lien : elle mène à la page où l'on
   se trouve déjà. Elle sort ainsi de l'ordre de tabulation, et aucun lecteur
   d'écran ne l'annonce comme une destination. */
.lang-switch [aria-current] {
  color: var(--primary-foreground);
  background: var(--primary);
}

.lang-switch a {
  color: var(--muted-foreground);
}

.lang-switch a:hover {
  color: var(--foreground);
  background: var(--muted);
}

/* Cinq contrôles ne tiennent pas dans une barre de 320 px : le nom, la langue,
   le thème, l'appel à l'action et le menu font 312 px pour 280 px utiles, et la
   page part en défilement horizontal. La langue est celui qu'on consulte le
   moins souvent, et le panneau la présente mieux — c'est donc elle qui quitte
   la barre, sur toute la plage où le menu existe. Sélecteur composé pour ne pas
   dépendre de l'ordre des règles face à `.lang-switch`. */
.lang-switch.lang-switch--bar {
  display: none;
}

/* Le seuil est celui de la barre, pas celui du héros. Les quatre liens en
   clair, le nom et les actions demandent ~920 px : à 48rem, « Comment ça
   marche » se repliait sur trois lignes et l'en-tête doublait de hauteur. Le
   menu tient donc jusqu'à 64rem, ce qui laisse une marge confortable. */
@media (min-width: 64rem) {
  .site-header__inner {
    gap: 1.5rem;
  }

  .site-nav {
    display: flex;
  }

  .menu {
    display: none;
  }

  .lang-switch.lang-switch--bar {
    display: inline-flex;
  }
}

/* ----------------------------------------------------------------- 7. héro */

.hero {
  padding-top: 1.5rem;
}

.hero__card {
  display: grid;
  overflow: hidden;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

/* C'est cette colonne, et elle seule, qui donne sa hauteur au héros : la scène
   de droite s'y ajuste (voir `.stage__figure`). Garder ce bloc compact est donc
   ce qui fait tenir le héros dans une hauteur d'écran. */
.hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.75rem, 3.5vw, 3rem);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* Plus petit que le `.h-display` du CTA final : là-bas le titre est seul sur un
   panneau, ici il partage la hauteur avec un chapô, un bouton et une mention. */
.hero h1 {
  margin-top: 1.25rem;
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  line-height: 1.05;
}

.hero .lead {
  margin-top: 1.125rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.reassurance {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* Scène chaude — dégradé, halos et illustration détourée, comme la connexion. */
/* La figure étant hors du flux (voir `.stage__figure`), la scène n'a aucune
   hauteur propre : empilée sous le texte, il faut la lui donner.

   Une hauteur, et surtout pas un `aspect-ratio` : sur un élément de grille, un
   rapport imposé désactive l'étirement, si bien que le plafond de hauteur
   rétrécissait aussi la LARGEUR. La scène devenait un carré de 320 px collé à
   gauche d'un bloc deux fois plus large. Avec une hauteur seule, la largeur
   reste pleine et le personnage se centre dedans. */
.stage {
  position: relative;
  display: block;
  height: clamp(18rem, 88vw, 22rem);
  margin: 0.75rem;
  overflow: hidden;
  background: linear-gradient(135deg, var(--warm-from), var(--warm-via) 45%, var(--warm-to));
  border-radius: var(--radius);
}

.stage__halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
}

.stage__halo--one {
  top: -4rem;
  right: -4rem;
  width: 18rem;
  height: 18rem;
  background: rgb(0 0 0 / 0.12);
}

.stage__halo--two {
  bottom: -5rem;
  left: -5rem;
  width: 18rem;
  height: 18rem;
  background: rgb(253 164 175 / 0.45);
}

/* L'illustration est sortie du flux : sans ça, c'est elle qui imposait sa
   hauteur au héros, et la section débordait de l'écran. En absolu, elle
   s'inscrit dans la hauteur que la colonne de texte a déjà fixée, et se réduit
   d'elle-même sur un écran court. */
.stage__figure {
  position: absolute;
  inset: 1.25rem 1.25rem 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* `<picture>` n'est qu'une enveloppe. Sans ceci, c'est elle qui devient
   l'élément flex, et le `max-height: 100%` de l'image se résout alors contre une
   hauteur automatique — autant dire contre rien : la figure reprend sa taille
   réelle et fait déborder la scène. `display: contents` l'efface de la mise en
   page, l'image redevient l'élément flex, et les règles ci-dessous valent comme
   avant. L'élément n'ayant aucun rôle ARIA, rien ne se perd. */
.stage__figure picture {
  display: contents;
}

.stage__figure img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.float-card {
  position: absolute;
  z-index: 2;
  padding: 0.625rem;
  color: var(--warm-foreground);
  background: rgb(255 255 255 / 0.85);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  outline: 1px solid var(--warm-hairline);
  backdrop-filter: blur(8px);
}

/* Repoussées dans les angles : la scène étant plus étroite qu'avant, elles
   mordaient sur le visage du personnage. */
.float-card--progress {
  top: 0.75rem;
  left: 0.75rem;
}

.float-card--certificate {
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-right: 0.75rem;
}

.float-card__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #78716c;
}

.float-card__value {
  margin-top: 0.125rem;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.meter {
  width: 5rem;
  height: 0.375rem;
  margin-top: 0.5rem;
  overflow: hidden;
  background: #e7e5e4;
  border-radius: 999px;
}

.meter > span {
  display: block;
  height: 100%;
  background: #171717;
  border-radius: 999px;
}

.float-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  flex: none;
  color: #ffffff;
  background: #171717;
  border-radius: 999px;
}

.float-card__title {
  font-size: 0.875rem;
  font-weight: 600;
}

.float-card__sub {
  font-size: 0.75rem;
  color: #78716c;
}

/* À partir de la tablette la scène repasse en colonne : elle reprend alors la
   hauteur que le texte a fixée, donc plus de hauteur imposée. Les cartes
   retrouvent au passage leurs cotes pleines. Ce seuil-ci est celui du héros ;
   celui de la barre est plus haut (64rem), les deux n'ont pas les mêmes
   contraintes. */
@media (min-width: 48rem) {
  .hero__card {
    grid-template-columns: 58fr 42fr;
  }

  .stage {
    height: auto;
  }

  .float-card {
    padding: 0.75rem;
  }

  .float-card--progress {
    top: 1.25rem;
    left: 1rem;
  }

  .float-card--certificate {
    right: 1rem;
    bottom: 1.25rem;
    gap: 0.75rem;
    padding-right: 1rem;
  }

  .float-card__value {
    font-size: 1.5rem;
  }

  .float-card__badge {
    width: 2.25rem;
    height: 2.25rem;
  }

  .meter {
    width: 6.5rem;
  }
}

@media (min-width: 56rem) {
  .hero__card {
    grid-template-columns: 60fr 40fr;
  }
}

/* -------------------------------------------------------------- 8. preuves */

.proof {
  display: grid;
  gap: 1px;
  overflow: hidden;
  list-style: none;
  padding: 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.proof > li {
  padding: 1.5rem;
  background: var(--background);
}

.proof strong {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.proof p {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

@media (min-width: 40rem) {
  .proof {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .proof {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------------------------------------------------- 9. grille de features */

.grid-cards {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
}

@media (min-width: 40rem) {
  .grid-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .grid-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  padding: 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--accent-foreground);
  background: var(--accent);
  border-radius: var(--radius-sm);
}

.card h3 {
  margin-top: 1.25rem;
}

.card p {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}

/* ------------------------------------------------------------ 10. panneaux */

.warm-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 3.5rem);
  color: var(--warm-foreground);
  background: linear-gradient(135deg, var(--warm-from), var(--warm-via) 45%, var(--warm-to));
  border-radius: var(--radius-lg);
}

.warm-panel .muted {
  color: var(--warm-muted);
}

/* Le panneau reste clair en thème sombre : le sur-titre ne peut pas hériter du
   gris de texte secondaire, qui y devient illisible. Valeur fixe, comme le
   reste de ce qui se pose sur la scène chaude. */
.warm-panel .eyebrow {
  color: #78716c;
}

.steps {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

@media (min-width: 56rem) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.step {
  padding: 1.5rem;
  background: var(--warm-surface);
  border-radius: var(--radius);
  outline: 1px solid var(--warm-hairline);
  backdrop-filter: blur(6px);
}

.step__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #78716c;
}

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  font-size: 0.875rem;
  font-weight: 700;
  color: #ffffff;
  background: #171717;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.step h3 {
  margin-top: 1.25rem;
}

.step p {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--warm-muted);
}

/* -------------------------------------------------------------- 11. tarifs */

.tiers {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
}

@media (min-width: 40rem) {
  .tiers {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .tiers {
    grid-template-columns: repeat(5, 1fr);
  }
}

.tier {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.tier--featured {
  color: var(--primary-foreground);
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: var(--shadow-xl);
}

.tier__name {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* L'unité passe sous le montant plutôt qu'à côté : sur cinq colonnes, « 189 € »
   et « / mois HT » côte à côte se coupaient en plein milieu du prix. */
.tier__price {
  margin-top: 1rem;
}

.tier__amount {
  display: block;
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tier__unit {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.tier--featured .tier__unit,
.tier--featured .tier__meta {
  color: color-mix(in srgb, var(--primary-foreground) 75%, transparent);
}

.tier__meta {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.tier .btn {
  margin-top: 1.5rem;
}

/* La carte inverse le fond et le texte : sans cette règle, le bouton `--outline`
   héritait du blanc de la carte pour son texte et posait du blanc sur blanc. Les
   couleurs sont donc reprises explicitement, dans l'ordre inverse. */
.tier--featured .btn {
  color: var(--primary);
  background: var(--primary-foreground);
  border-color: var(--primary-foreground);
}

.tier--featured .btn:hover {
  background: color-mix(in srgb, var(--primary-foreground) 90%, var(--primary));
}

.included {
  margin-top: 2.5rem;
  padding: clamp(1.5rem, 4vw, 2rem);
  background: color-mix(in srgb, var(--muted) 60%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.included ul {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .included ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .included ul {
    grid-template-columns: repeat(3, 1fr);
  }
}

.included li {
  display: flex;
  gap: 0.625rem;
  font-size: 0.9375rem;
}

.included .icon {
  margin-top: 0.25rem;
  color: var(--foreground);
}

/* ----------------------------------------------------------------- 12. FAQ */

.faq {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 64rem) {
  .faq {
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
  }
}

.faq__list {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.faq__item {
  border-top: 1px solid var(--border);
}

.faq__item:first-child {
  border-top: 0;
}

.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
}

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

.faq__sign {
  flex: none;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--muted-foreground);
  transition: transform 0.2s ease;
}

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

.faq__item p {
  max-width: 68ch;
  padding-bottom: 1.25rem;
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}

/* ----------------------------------------------------------- 13. CTA final */

.final {
  text-align: center;
}

.final .lead,
.final .cta-row {
  margin-inline: auto;
  justify-content: center;
}

.final .lead {
  margin-top: 1.25rem;
  color: var(--warm-muted);
  max-width: 52ch;
}

.final__halo {
  position: absolute;
  top: -5rem;
  left: 50%;
  width: 22rem;
  height: 22rem;
  background: rgb(0 0 0 / 0.08);
  border-radius: 50%;
  filter: blur(72px);
  transform: translateX(-50%);
  pointer-events: none;
}

.final .reassurance {
  color: #78716c;
}

/* --------------------------------------------------------------- 14. footer */

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

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-block: 2.5rem;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.site-footer nav a:hover {
  color: var(--foreground);
}

.site-footer__legal {
  padding-block: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

@media (min-width: 40rem) {
  .site-footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* -------------------------------------------------------- 15. page d'erreur */

.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  min-height: 70vh;
  text-align: center;
}