/* ===================================================================
   COACH SPORTIF — LANDING PAGE
   Feuille de style organisée en variables + composants (mobile-first).
   Aucune DA définitive appliquée : voir les blocs "TODO DA" pour les
   endroits où couleurs, typo et images réelles viendront remplacer
   ces valeurs neutres par défaut.
   =================================================================== */

/* ---------------------------------------------------------------
   1. VARIABLES CSS (design tokens)
   Modifier uniquement ces valeurs pour appliquer la DA définitive
   sans toucher au reste du fichier.
   --------------------------------------------------------------- */
:root {
  /* Couleurs — DA appliquée : fond blanc éclatant, accent rouge dominant,
     boutons or/doré. Rester strictement dans rouge / blanc / doré / noir. */
  --color-bg: #ffffff;
  --color-bg-alt: #f5f5f5;
  --color-text: #1a1a1a;
  --color-text-muted: #5c5c5c;
  --color-border: #e0e0e0;

  /* Accent dominant : rouge (utilisé pour titres, icônes, badges, hover —
     PAS pour le fond des boutons, voir --color-gold ci-dessous) */
  --color-primary: #e2001a;
  --color-primary-contrast: #ffffff; /* texte blanc sur fond rouge */
  --color-accent: #a3000f;           /* rouge plus profond (hover, dégradés) */
  --color-primary-rgb: 226, 0, 26;
  --color-white: #ffffff;

  /* Boutons : or / doré, avec hover assombri */
  --color-gold: #d9a627;
  --color-gold-light: #f0c14e;
  --color-gold-dark: #a97e1e;
  --gradient-gold: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 100%);
  --glow-gold: 0 0 20px rgba(217, 166, 39, 0.4);

  /* Fond des cartes/blocs sur les sections avec image (fond-landing.jpg) :
     semi-opaque pour laisser deviner l'image tout en garantissant le contraste */
  --card-on-image-bg: rgba(255, 255, 255, 0.94);
  --text-on-image: rgba(255, 255, 255, 0.95);
  --text-on-image-muted: rgba(255, 255, 255, 0.82);

  /* Typographie — TODO DA : remplacer par les polices de marque (Google Fonts / self-hosted) */
  --font-heading: "Helvetica Neue", Arial, sans-serif;
  --font-body: "Helvetica Neue", Arial, sans-serif;

  --fs-h1: 2rem;
  --fs-h2: 1.6rem;
  --fs-h3: 1.15rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  --lh-heading: 1.2;
  --lh-body: 1.6;

  /* Espacements */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Layout */
  --container-width: 1140px;
  --radius: 8px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.08);

  /* Hauteur réelle de la nav sticky, mesurée en JS (main.js) via
     getBoundingClientRect() et injectée ici à chaque changement de
     taille du header. La valeur ci-dessous n'est qu'un secours pour
     le tout premier rendu avant exécution du JS (ou si JS désactivé) :
     ne jamais s'appuyer dessus comme valeur définitive. */
  --nav-height: 6rem;

  /* Transitions */
  --transition-fast: 0.2s ease;
}

/* ---------------------------------------------------------------
   2. RESET / BASE
   --------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-sm);
  font-weight: 700;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p {
  margin: 0 0 var(--space-sm);
  color: var(--color-text-muted);
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

body.is-loading {
  overflow: hidden;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-sm);
}

/* ---------------------------------------------------------------
   2bis. ÉCRAN DE CHARGEMENT
   Pictogramme animé (bonhomme qui soulève des poids), affiché au
   chargement puis retiré en fondu par main.js (classe .is-hidden).
   --------------------------------------------------------------- */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.loading-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-screen__figure {
  overflow: visible;
}

.loading-screen__head {
  fill: var(--color-text);
}

.loading-screen__torso,
.loading-screen__leg,
.loading-screen__arm,
.loading-screen__bar {
  stroke: var(--color-text);
  stroke-width: 6;
  stroke-linecap: round;
  fill: none;
}

.loading-screen__bar {
  stroke-width: 4;
}

.loading-screen__plate {
  fill: var(--color-primary);
}

.loading-screen__lift {
  transform-origin: 50px 36px;
  animation: loading-lift 1s ease-in-out infinite;
}

@keyframes loading-lift {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

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

section {
  /* Marge de sécurité verticale entre sections : 4rem en bas + 4rem en
     haut de la suivante = 8rem d'espace réel à chaque frontière. Aucune
     section ne redéfinit padding-top/bottom à une valeur plus faible
     (vérifié : .hero ne redéfinit que padding-top, à la même valeur),
     donc pas de risque de chevauchement visuel entre deux sections
     consécutives même en cas de léger décalage de scroll. */
  padding: var(--space-xl) 0;
}

/* Compense la hauteur RÉELLE (et non une valeur figée) de la nav sticky,
   pour que le titre de la section ciblée par une ancre ne reste jamais
   caché/chevauché par la barre au scroll. --nav-height est recalculée en
   JS (main.js) à chaque changement de taille du header. Un petit surplus
   (+12px) absorbe les arrondis de sous-pixel du scroll natif du navigateur
   pour éviter tout filet de chevauchement résiduel entre deux sections.
   Liste exhaustive des 7 sections ciblées par une ancre du menu : Accueil,
   À propos, Méthode, Offre et tarifs, Témoignages, FAQ, Contact. */
#accueil,
#a-propos,
#methode,
#offre,
#temoignages,
#faq,
#contact {
  scroll-margin-top: calc(var(--nav-height, 6rem) + 12px);
}

.section-title {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-lg);
}

.section-subtitle {
  text-align: center;
  max-width: 640px;
  margin: calc(var(--space-md) * -1) auto var(--space-lg);
}

/* ---------------------------------------------------------------
   3. BOUTONS
   --------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 0.9rem 1.8rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--fs-body);
  text-align: center;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.btn--primary {
  background: var(--gradient-gold);
  color: var(--color-text);
  border-color: transparent;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-gold-dark);
  box-shadow: var(--glow-gold);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-gold-dark);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background-color: var(--color-gold);
  color: var(--color-text);
  border-color: var(--color-gold);
}

.btn--small {
  padding: 0.55rem 1.1rem;
  font-size: var(--fs-small);
}

/* ---------------------------------------------------------------
   4. NAVIGATION
   --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  /* z-index élevé volontairement : aucun élément de section (position:
     relative, z-index max = 1 dans .hero) ne doit jamais passer par-dessus
     la nav au scroll. Vérifié : plus haut que tout z-index du contenu
     des sections (voir .hero__grid / .hero__decor). */
  z-index: 100;
  background-color: #0d0d0d;
  border-bottom: 1px solid var(--color-border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
  position: relative;
}

.nav__logo {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  /* Fond de la nav désormais noir plein : logo repassé en blanc pour rester visible */
  color: var(--color-primary-contrast);
}

.nav__toggle-input {
  display: none;
}

.nav__toggle-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 0.4rem;
}

.nav__toggle-label span {
  width: 24px;
  height: 2px;
  background-color: var(--color-primary);
  display: block;
}

.nav__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-bg);
  /* Fermé par défaut : padding et bordure à 0. max-height:0 + overflow:hidden
     ne suffisent pas à eux seuls à masquer le panneau — le padding et la
     bordure font partie de la boîte elle-même et ne sont jamais compressés
     par overflow:hidden (contrairement au contenu). Les laisser à une valeur
     non nulle ici laissait un bandeau blanc en permanence sous la nav, avec
     le premier lien ("À propos") qui dépassait dedans. */
  border-bottom: 1px solid transparent;
  padding: 0 var(--space-md);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-fast), padding var(--transition-fast);
}

.nav__toggle-input:checked ~ .nav__links {
  max-height: 400px;
  padding: var(--space-md);
  border-bottom-color: var(--color-border);
}

/* Menu mobile ouvert : masque le contenu de la page derrière le panneau
   pour éviter qu'un élément similaire (ex. le CTA du Hero) ne transparaisse
   juste sous le bouton "Réserver..." du menu et ne donne l'impression d'un
   bouton dédoublé */
body:has(.nav__toggle-input:checked) main,
body:has(.nav__toggle-input:checked) .site-footer {
  visibility: hidden;
}

.nav__links a:not(.btn) {
  display: block;
  padding: var(--space-xs) 0;
  color: #8b0000;
}

.nav__links a:not(.btn):hover {
  color: var(--color-primary);
}

.nav__cta {
  align-self: flex-start;
}

/* ---------------------------------------------------------------
   5. HERO — #accueil — fond img/fond-gpt.png (cette section uniquement)
   Tant qu'elle est absente/invalide, background-color + voile blanc
   dégradé assurent un fond propre et un bon contraste pour le texte.
   --------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--space-xl);
  background-color: var(--color-bg);
  /* Voile noir semi-transparent (50%) pour garder le texte en dégradé
     lisible par-dessus la photo, tout en laissant l'image visible */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
    url("../img/fond-gpt.png");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

/* Décor : haltères qui défilent en diagonale sur la partie gauche du Hero,
   purement décoratif (aria-hidden), sous le texte, sans gêner la lecture */
.hero__decor {
  position: absolute;
  inset: 0;
  width: 22%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.hero__decor-icon {
  position: absolute;
  width: 26px;
  height: 26px;
  color: var(--color-primary);
  opacity: 0;
  animation: hero-decor-drift 13s linear infinite;
}

.hero__decor-icon:nth-child(1) { left: 2%;  animation-delay: 0s; }
.hero__decor-icon:nth-child(2) { left: 18%; animation-delay: -2.6s; }
.hero__decor-icon:nth-child(3) { left: 34%; animation-delay: -5.2s; }
.hero__decor-icon:nth-child(4) { left: 10%; animation-delay: -7.8s; }
.hero__decor-icon:nth-child(5) { left: 26%; animation-delay: -10.4s; }

@keyframes hero-decor-drift {
  0% {
    transform: translate(-30px, 70vh) rotate(-25deg);
    opacity: 0;
  }
  8% {
    opacity: 0.18;
  }
  85% {
    opacity: 0.18;
  }
  100% {
    transform: translate(140px, -20vh) rotate(-25deg);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__decor-icon {
    animation: none;
    opacity: 0.12;
    transform: none;
  }
}

/* Pas d'image de coach dans le Hero : colonne de texte unique, centrée,
   qui occupe naturellement tout l'espace disponible, au-dessus du décor */
.hero__grid {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* Titre + sous-titre : dégradé rouge → orange → doré, texte transparent */
.hero__title,
.hero__subtitle {
  background: linear-gradient(90deg, var(--color-primary) 0%, #f2711f 50%, var(--color-gold-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__title {
  font-size: 2rem;
}

.hero__subtitle {
  font-size: 1.05rem;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
  font-weight: 500;
}

.hero__cta-block {
  margin: var(--space-md) 0;
}

.hero__cta-note {
  margin-top: var(--space-xs);
  font-size: var(--fs-small);
  /* Fond du Hero assombri : texte gris éclairci pour rester lisible
     (surcharge locale, ne touche pas --color-text-muted ailleurs) */
  color: rgba(255, 255, 255, 0.8);
}

.hero__trust {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.8);
}

/* ---------------------------------------------------------------
   FOND COMMUN — img/fond-landing.jpg (À propos, Offre et tarifs, FAQ)
   et img/fond-landing2.jpg (Méthode, Témoignages uniquement).
   Sections SAUF Accueil (garde fond-gpt) et Contact (garde son fond
   actuel). Voile noir 55% (cohérent avec le Hero) + fallback couleur
   unie si l'image ne charge pas.
   --------------------------------------------------------------- */
.about,
.method,
.pricing,
.testimonials,
.faq {
  position: relative;
  background-color: var(--color-bg-alt);
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
    url("../img/fond-landing.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Méthode et Témoignages : image de fond différente (fond-landing2.jpg),
   même traitement de voile/lisibilité que les autres sections */
.method,
.testimonials {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
    url("../img/fond-landing2.jpg");
}

/* Titres/intros posés directement sur l'image (hors cartes) : couleur claire */
.about .section-title,
.method .section-title,
.pricing .section-title,
.testimonials .section-title,
.faq .section-title {
  color: var(--text-on-image);
}

.pricing .section-subtitle {
  color: var(--text-on-image-muted);
}

/* ---------------------------------------------------------------
   6. À PROPOS — #a-propos
   --------------------------------------------------------------- */
.about__compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.about__card {
  padding: var(--space-md);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-alt);
}

.about__card h3 {
  margin-bottom: var(--space-sm);
}

.about__card li {
  padding-left: 1.4em;
  position: relative;
  margin-bottom: var(--space-xs);
  color: var(--color-text-muted);
}

.about__card--before li::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: var(--color-text-muted);
}

.about__card--after li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}

.about__transition {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-on-image);
  max-width: 640px;
  margin: 0 auto var(--space-2xl);
}

.about__bio {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: center;
}

.about__bio-media {
  width: 100%;
  max-width: 320px;
}

.about__bio-img {
  border-radius: var(--radius);
  background-color: var(--color-bg-alt);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
  box-shadow: var(--shadow-sm);
}

.about__bio-text {
  text-align: center;
}

/* Texte posé directement sur l'image (pas de carte ici) : couleur claire */
.about__bio-text h3 {
  color: var(--text-on-image);
}

.about__bio-text p {
  color: var(--text-on-image-muted);
}

/* ---------------------------------------------------------------
   7. MÉTHODE — #methode
   --------------------------------------------------------------- */
.method__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
  counter-reset: none;
}

.method__step {
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-align: center;
  background-color: var(--card-on-image-bg);
}

.method__step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.method__included {
  max-width: 640px;
  margin: 0 auto;
  background-color: var(--card-on-image-bg);
  border-radius: var(--radius);
  padding: var(--space-xs) var(--space-md);
}

.method__included li {
  padding: var(--space-sm) 0 var(--space-sm) 1.8em;
  position: relative;
  border-bottom: 1px solid var(--color-border);
}

.method__included li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}

.method__included li:last-child {
  border-bottom: none;
}

/* ---------------------------------------------------------------
   8. OFFRE ET TARIFS — #offre
   --------------------------------------------------------------- */
.pricing__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.pricing-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  text-align: center;
}

.pricing-card--featured {
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-md);
  position: relative;
}

.pricing-card__badge {
  position: absolute;
  top: -0.9rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
  font-size: var(--fs-small);
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  white-space: nowrap;
  margin: 0;
}

.pricing-card__name {
  margin-bottom: var(--space-xs);
}

.pricing-card__for {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  margin-bottom: var(--space-md);
}

.pricing-card__features {
  text-align: left;
  flex-grow: 1;
  margin-bottom: var(--space-md);
}

.pricing-card__features li {
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.pricing-card__features li:last-child {
  border-bottom: none;
}

.pricing-card__price {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.pricing-card__price span {
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--color-text-muted);
}

.pricing__reassurance {
  text-align: center;
  max-width: 640px;
  margin: var(--space-lg) auto 0;
  font-size: var(--fs-small);
  color: var(--text-on-image-muted);
}

/* ---------------------------------------------------------------
   9. TÉMOIGNAGES — #temoignages
   --------------------------------------------------------------- */
.testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.testimonial-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--card-on-image-bg);
}

.testimonial-card__body {
  padding: var(--space-md);
}

.testimonial-card__quote {
  font-style: italic;
  color: var(--color-text);
}

.testimonial-card__stars {
  color: var(--color-gold);
  letter-spacing: 0.15em;
  margin-bottom: var(--space-xs);
}

.testimonial-card__author {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0;
}

.testimonial-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.testimonial-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background-color: var(--color-bg-alt);
}

/* ---------------------------------------------------------------
   10. FAQ — #faq
   --------------------------------------------------------------- */
.faq__list {
  max-width: 720px;
  margin: 0 auto;
}

.faq-item {
  background-color: var(--card-on-image-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
}

.faq-item:last-child {
  margin-bottom: 0;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-family: var(--font-heading);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
}

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

.faq-item summary::after {
  content: "+";
  color: var(--color-primary);
  font-size: 1.4rem;
  font-weight: 400;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

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

.faq-item p {
  margin-top: var(--space-sm);
  margin-bottom: 0;
}

/* ---------------------------------------------------------------
   11. CONTACT FINAL — #contact
   --------------------------------------------------------------- */
.contact {
  /* Orange plein, proche de la teinte déjà utilisée dans le dégradé du
     Hero (#f2711f) — cohérent avec la palette or/orange des boutons */
  background-color: #f2711f;
  text-align: center;
}

.contact__inner {
  max-width: 640px;
}

.contact__text {
  margin-bottom: var(--space-md);
  /* Texte gris (--color-text-muted) trop peu contrasté sur l'orange :
     repassé en texte foncé, lisible (contraste ~7:1) */
  color: var(--color-text);
}

.contact__note {
  margin-top: var(--space-md);
  font-size: var(--fs-small);
  color: var(--color-text);
}

/* ---------------------------------------------------------------
   12. FOOTER
   --------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-lg) 0;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
  text-align: center;
}

.site-footer__legal {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin: 0;
}

.site-footer__socials {
  display: flex;
  gap: var(--space-sm);
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.social-icon:hover,
.social-icon:focus-visible {
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
}

/* ===================================================================
   13. BREAKPOINTS — approche mobile-first
   =================================================================== */

/* Tablette : à partir de 768px */
@media (min-width: 768px) {
  :root {
    --fs-h1: 2.75rem;
    --fs-h2: 2rem;
    --fs-h3: 1.25rem;
  }

  .nav__toggle-label {
    display: none;
  }

  .nav__links {
    position: static;
    flex-direction: row;
    align-items: center;
    max-height: none;
    overflow: visible;
    border-bottom: none;
    padding: 0;
    background-color: transparent;
  }

  .nav__links a:not(.btn) {
    padding: 0;
  }

  .nav__cta {
    align-self: center;
  }

  .hero__trust {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-lg);
  }

  .hero__decor {
    width: 50%;
  }

  .about__compare {
    grid-template-columns: 1fr 1fr;
  }

  .about__bio {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
  }

  .about__bio-text {
    text-align: left;
  }

  .about__bio-media {
    flex-shrink: 0;
  }

  .method__steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .testimonials__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop : à partir de 1024px */
@media (min-width: 1024px) {
  .method__steps {
    grid-template-columns: repeat(4, 1fr);
  }

  .testimonials__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .pricing-card--featured {
    transform: scale(1.04);
  }
}