/* ==========================================================================
   VAGABON — COMPONENTS.CSS
   Composants réutilisables : header, navigation plein écran, footer,
   boutons, cartes, formulaires, placeholders média, loader, curseur,
   fil d'Ariane, badges, FAQ, etc. Convention de nommage : BEM simplifiée
   préfixée "c-" (composant) ou "media-" / usage direct pour les utilitaires.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* Logo de marque                                                          */
/* ---------------------------------------------------------------------- */

.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 32px;
}

.brand-logo img,
.brand-logo svg {
  height: 28px;
  width: auto;
}

/* ---------------------------------------------------------------------- */
/* Placeholder média — remplace toute image/vidéo/logo non encore livrée   */
/* ---------------------------------------------------------------------- */

.media-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  text-align: center;
  width: 100%;
  min-height: 220px;
  background:
    repeating-linear-gradient(135deg, var(--color-surface), var(--color-surface) 10px, var(--color-surface-elevated) 10px, var(--color-surface-elevated) 20px);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-subtle);
  padding: var(--space-md);
}

.media-placeholder span {
  font-family: var(--font-display);
  color: var(--color-text-muted);
  font-size: var(--font-size-body);
  letter-spacing: 0.02em;
}

.media-placeholder small {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  max-width: 34ch;
}

.media-placeholder--16x9 { aspect-ratio: 16 / 9; min-height: unset; }
.media-placeholder--9x16 { aspect-ratio: 9 / 16; min-height: unset; max-width: 360px; margin-inline: auto; }
.media-placeholder--square { aspect-ratio: 1 / 1; min-height: unset; }
.media-placeholder--portrait { aspect-ratio: 3 / 4; min-height: unset; }
.media-placeholder--logo { min-height: 64px; padding: var(--space-sm); border-radius: var(--radius-sm); }
.media-placeholder--cover { min-height: 55vh; border-radius: 0; }

/* Le mot-symbole Vagabon ne doit jamais être simulé avec Good Times (charte
   section 24) : ce placeholder représente l'emplacement du logo officiel,
   pas un titre — il reste donc volontairement en police courante. */
.media-placeholder--logo span {
  font-family: var(--font-body);
}

/* ---------------------------------------------------------------------- */
/* Header & navigation                                                     */
/* ---------------------------------------------------------------------- */

.c-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, rgba(242, 242, 242, 0.82), transparent);
  transition: height var(--duration-base) var(--ease-standard),
              background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}

.c-header.is-scrolled {
  height: var(--nav-height-scrolled);
  background-color: color-mix(in srgb, var(--color-background) 88%, transparent);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(10px);
}

/* Ancien dégradé sombre, conservé pour le thème sombre alternatif (voir
   variables.css → [data-theme="dark"]). Le header de la page d'accueil
   reste par ailleurs figé dans son apparence actuelle quel que soit le
   thème (voir la règle dédiée dans css/pages/home.css, scoped body.page-home) —
   ceci ne concerne donc que les autres pages, lorsque le visiteur bascule
   manuellement en thème sombre. */
[data-theme="dark"] .c-header {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), transparent);
}

.c-header__inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.c-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Icônes réseaux sociaux dans le header (déplacées depuis la section
   Contact de universe.html) : simple conteneur flex au même espacement que
   .c-header__actions, rempli par js/data-renderer.js avec des .c-icon-btn
   — aucun style propre, elles héritent donc exactement des couleurs, tailles
   et hover déjà définis pour .c-icon-btn ci-dessous (et de tout override
   propre à une page, ex. body.page-universe .c-icon-btn). Masqué ≤768px par
   la règle globale existante .c-header__actions .c-icon-btn:not(.c-menu-toggle)
   (voir css/responsive.css), comme les autres actions du header : les icônes
   restent accessibles sur mobile via le menu plein écran. */
.c-header__social {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.c-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  background: transparent;
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}

/* Doré sitewide (audit uniformisation boutons/CTA, voir variables.css,
   --color-warm-on-light) : ce fallback global est celui utilisé par défaut
   sur fond clair, ce qui couvre la majorité des pages. Les pages posées sur
   un fond sombre (ex. header de l'accueil sur le Hero vidéo) ont leur
   propre surcharge en --color-warm, la variante vive (voir home.css). */
/* Doré sitewide (audit uniformisation boutons/CTA, passe 2) : outline-color
   ajouté sur ce bloc et tous les autres blocs :hover/:focus-visible/:active
   de boutons du site — sans cela, la bague de focus clavier (outline)
   restait bleue partout (héritée de :focus-visible dans base.css, jamais
   surchargée jusqu'ici), au-dessus même des couleurs déjà corrigées. Ajout
   sans risque dans ce bloc groupé : l'outline ne s'affiche de toute façon
   que lorsque :focus-visible s'applique réellement. */
/* Doré sitewide (audit uniformisation boutons/CTA, passe 3) : demande
   explicite du client — plus de palier "fond clair" (--color-warm-on-light,
   #5A420F, perçu comme grisâtre/terne). Toutes les règles d'interaction
   (:hover/:focus-visible/:active) ci-dessous copient désormais EXACTEMENT
   les valeurs du bouton de référence .universe-cta (css/pages/universe.css) :
   border-color: var(--color-warm-soft), background: rgba(199, 163, 78,
   0.08), color: var(--color-warm), outline-color: var(--color-warm). */
.c-icon-btn:hover,
.c-icon-btn:focus-visible,
.c-icon-btn:active {
  border-color: var(--color-warm-soft);
  background: rgba(199, 163, 78, 0.08);
  color: var(--color-warm);
  outline-color: var(--color-warm);
}

/* Doré sitewide (audit uniformisation boutons/CTA, passe 2) : .c-menu-toggle
   (bouton burger) ne partage pas la classe .c-icon-btn dans le HTML — sans
   cette règle dédiée, il n'avait AUCUN comportement de survol/focus/clic nulle
   part sur le site en dehors de la page d'accueil (voir .page-home
   .c-menu-toggle dans home.css), et affichait donc uniquement la bague de
   focus clavier bleue par défaut. Même traitement que .c-icon-btn ci-dessus
   (palier fond clair, fallback global) ; les pages qui ont leur propre
   variante de .c-icon-btn (universe/contact/legal) étendent aussi ce
   sélecteur à .c-menu-toggle dans leur fichier respectif. */
.c-menu-toggle:hover,
.c-menu-toggle:focus-visible,
.c-menu-toggle:active {
  border-color: var(--color-warm-soft);
  background: rgba(199, 163, 78, 0.08);
  outline-color: var(--color-warm);
}

.c-menu-toggle:hover .c-menu-toggle__bar,
.c-menu-toggle:focus-visible .c-menu-toggle__bar,
.c-menu-toggle:active .c-menu-toggle__bar {
  background: var(--color-warm);
}

.c-icon-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.c-icon-btn svg { width: 18px; height: 18px; }

/* Bouton d'ouverture du menu (icône burger animée en croix) */
.c-menu-toggle {
  position: relative;
  width: 52px;
  height: 52px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  z-index: calc(var(--z-menu) + 1);
}

.c-menu-toggle__bar {
  width: 20px;
  height: 2px;
  background: var(--color-text);
  transition: transform var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard);
}

.c-menu-toggle[aria-expanded="true"] .c-menu-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.c-menu-toggle[aria-expanded="true"] .c-menu-toggle__bar:nth-child(2) {
  opacity: 0;
}
.c-menu-toggle[aria-expanded="true"] .c-menu-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Menu plein écran */
/* Palette : jetons --color-transition-* (variables.css), même source de
   vérité que .loader ci-dessus — identité "chrome" récente du site (fond
   glacier + anthracite + doré sombre), strictement identique quelle que
   soit la page depuis laquelle le menu est ouvert. La hiérarchie visuelle
   entre liens principaux / numéros / sous-labels est portée par l'opacité
   (une seule couleur de base), pas par des tons supplémentaires. */
.c-nav-fullscreen {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--color-transition-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-2xl) var(--space-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard),
              visibility 0s linear var(--duration-base);
  overflow-y: auto;
}

.c-nav-fullscreen[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard),
              visibility 0s linear 0s;
}

.c-nav-fullscreen__grid {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-2xl);
}

.c-nav-fullscreen__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.c-nav-fullscreen__link {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.5vw, 4rem);
  color: var(--color-transition-text-muted);
  padding-block: var(--space-2xs);
  border-bottom: 1px solid transparent;
}

.c-nav-fullscreen__link:hover,
.c-nav-fullscreen__link:focus-visible,
.c-nav-fullscreen__link:active {
  color: var(--color-warm);
}

.c-nav-fullscreen__link[aria-current="page"] {
  color: var(--color-transition-accent);
}

.c-nav-fullscreen__link-number {
  font-size: var(--font-size-small);
  color: var(--color-transition-text-muted);
  opacity: 0.65;
  font-family: var(--font-body);
}

.c-nav-fullscreen__link-sub {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  color: var(--color-transition-text-muted);
  opacity: 0.65;
  margin-left: auto;
  display: none;
}

.c-nav-fullscreen__aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-top: var(--space-sm);
}

.c-nav-fullscreen__meta {
  color: var(--color-transition-text-muted);
  opacity: 0.65;
  font-size: var(--font-size-small);
}

.c-nav-fullscreen__social {
  display: flex;
  gap: var(--space-sm);
}

/* Boutons/icônes intégrés au menu (bouton "Réserver un appel", lien
   e-mail, bouton fermer, icônes sociales) : les classes .c-btn--primary/
   --ghost et .c-icon-btn sont partagées avec le reste du site (header,
   contenu des pages), donc non modifiées elles-mêmes. Ces overrides sont
   scopés au conteneur .c-nav-fullscreen — pas à une page — pour ne changer
   que leur rendu À L'INTÉRIEUR du menu, sur toutes les pages identiquement. */
.c-nav-fullscreen .c-btn--primary {
  background: var(--color-transition-bg);
  border-color: var(--color-transition-text-muted);
  color: var(--color-transition-text-muted);
}

/* Doré sitewide (audit uniformisation boutons/CTA) : l'inversion utilisait
   le gris --color-transition-text-muted — passe au doré déjà utilisé par
   .c-nav-fullscreen__link:hover juste au-dessus (--color-transition-accent,
   qui référence maintenant --color-warm-on-light, voir variables.css), pour
   que ce bouton suive la même teinte de survol que le reste du menu. */
.c-nav-fullscreen .c-btn--primary:hover,
.c-nav-fullscreen .c-btn--primary:focus-visible,
.c-nav-fullscreen .c-btn--primary:active {
  background: var(--color-warm);
  border-color: var(--color-warm);
  color: var(--color-transition-bg);
  outline-color: var(--color-warm);
}

.c-nav-fullscreen .c-btn--ghost {
  color: var(--color-transition-accent);
}

/* Doré sitewide (audit uniformisation boutons/CTA) : ce lien e-mail est
   déjà doré au repos (--color-transition-accent) — son survol/focus
   repassait au gris neutre (--color-transition-text), soit l'inverse de la
   règle demandée ("hover = doré"). Corrigé pour qu'il RESTE doré aux trois
   états, comme tous les autres boutons du menu. */
.c-nav-fullscreen .c-btn--ghost:hover,
.c-nav-fullscreen .c-btn--ghost:focus-visible,
.c-nav-fullscreen .c-btn--ghost:active {
  color: var(--color-warm);
  outline-color: var(--color-warm);
}

.c-nav-fullscreen [data-menu-close],
.c-nav-fullscreen .c-icon-btn {
  border-color: var(--color-transition-border-strong);
  color: var(--color-transition-text-muted);
  background: transparent;
}

.c-nav-fullscreen [data-menu-close]:hover,
.c-nav-fullscreen [data-menu-close]:focus-visible,
.c-nav-fullscreen [data-menu-close]:active,
.c-nav-fullscreen .c-icon-btn:hover,
.c-nav-fullscreen .c-icon-btn:focus-visible,
.c-nav-fullscreen .c-icon-btn:active {
  border-color: var(--color-warm);
  color: var(--color-warm);
  background: transparent;
  outline-color: var(--color-warm);
}

@media (max-width: 860px) {
  .c-nav-fullscreen__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .c-nav-fullscreen__link { font-size: clamp(1.75rem, 9vw, 2.75rem); }
}

/* ---------------------------------------------------------------------- */
/* Indicateur de progression de page                                       */
/* ---------------------------------------------------------------------- */

.c-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--color-accent);
  z-index: var(--z-progress);
  transition: width 120ms linear;
}

/* ---------------------------------------------------------------------- */
/* Boutons                                                                  */
/* ---------------------------------------------------------------------- */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 48px;
  padding: 0 var(--space-lg);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--font-size-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.c-btn:hover { transform: translateY(-2px); }
.c-btn:active { transform: translateY(0); }

/* Fond sombre discret par défaut (thème clair) plutôt que le bleu Vagabon,
   qui reste réservé au hover / aux boutons secondaires (voir plus bas et
   .c-btn--secondary:hover) — conforme à la consigne "le bleu ne doit jamais
   devenir la couleur dominante". En thème sombre alternatif, ces jetons
   repointent vers l'accent bleu (voir variables.css), comportement inchangé. */
.c-btn--primary {
  background: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);
}
/* Doré sitewide (audit uniformisation boutons/CTA) : le hover devenait un
   simple assombrissement (--color-button-primary-hover-bg, gris) — passe au
   doré partagé par tous les boutons du site. Structure inchangée (même
   bouton plein, seule sa teinte de survol change), texte clair inchangé
   (contraste conservé sur ce fond doré sombre). */
.c-btn--primary:hover,
.c-btn--primary:focus-visible,
.c-btn--primary:active {
  background: var(--color-warm);
  outline-color: var(--color-warm);
}

.c-btn--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.c-btn--secondary:hover,
.c-btn--secondary:focus-visible,
.c-btn--secondary:active {
  border-color: var(--color-warm-soft);
  background: rgba(199, 163, 78, 0.08);
  color: var(--color-warm);
  outline-color: var(--color-warm);
}

.c-btn--ghost {
  background: transparent;
  color: var(--color-accent);
  min-height: auto;
  padding: 0;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
}
.c-btn--ghost:hover,
.c-btn--ghost:focus-visible,
.c-btn--ghost:active { color: var(--color-warm); outline-color: var(--color-warm); }

.c-btn--block { width: 100%; }
.c-btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ---------------------------------------------------------------------- */
/* Cartes                                                                    */
/* ---------------------------------------------------------------------- */

.c-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}

.c-card:hover {
  border-color: var(--color-border-accent);
  box-shadow: 0 8px 26px rgba(33, 37, 41, 0.09);
}

.c-card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  flex: 1;
}

.c-card__eyebrow {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 700;
}

.c-card__title {
  font-family: var(--font-display);
  font-size: var(--font-size-h4);
  color: var(--color-text);
}

.c-card__text {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.c-card__footer {
  margin-top: auto;
  padding-top: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

/* Carte projet : numéro de mission mis en avant, cf. section 6.7 */
.c-card-project__number {
  font-family: var(--font-display);
  color: var(--color-accent);
  font-size: var(--font-size-small);
  letter-spacing: 0.08em;
}

.c-card-project[data-cursor-label] { cursor: none; }

/* Carte témoignage */
.c-card-testimonial__quote {
  font-family: var(--font-display);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-heading);
  color: var(--color-text);
}

.c-card-testimonial__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.c-card-testimonial__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------- */
/* Tags / badges / filtres                                                  */
/* ---------------------------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3xs) var(--space-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.filter-btn {
  padding: var(--space-2xs) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  transition: all var(--duration-fast) var(--ease-standard);
}

/* Doré sitewide (audit uniformisation boutons/CTA) : .filter-btn n'est
   actuellement référencé par aucun fichier HTML/JS du site (composant
   hérité, non utilisé en production) — corrigé par cohérence avec le
   reste de la famille .c-btn/.c-icon-btn au cas où il serait réactivé,
   mais sans impact visuel actuel. :focus-visible/:active ajoutés (absents
   jusqu'ici) pour suivre le même triptyque que tous les autres boutons. */
.filter-btn:hover,
.filter-btn:focus-visible,
.filter-btn:active {
  border-color: var(--color-warm-soft);
  background: rgba(199, 163, 78, 0.08);
  color: var(--color-warm);
  outline-color: var(--color-warm);
}

.filter-btn[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

/* ---------------------------------------------------------------------- */
/* Fil d'Ariane                                                             */
/* ---------------------------------------------------------------------- */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--font-size-small);
  color: var(--color-text-subtle);
}

.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb [aria-current="page"] { color: var(--color-text); }

/* ---------------------------------------------------------------------- */
/* Section heading                                                          */
/* ---------------------------------------------------------------------- */

.section-heading {
  max-width: 46rem;
  margin-bottom: var(--space-xl);
}

.section-heading__eyebrow {
  display: inline-block;
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.section-heading--center {
  margin-inline: auto;
  text-align: center;
}

/* ---------------------------------------------------------------------- */
/* Formulaires                                                              */
/* ---------------------------------------------------------------------- */

.c-form { display: flex; flex-direction: column; gap: var(--space-md); }

.c-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }

.c-form__group { display: flex; flex-direction: column; gap: var(--space-2xs); }

.c-form__label {
  font-size: var(--font-size-small);
  color: var(--color-text);
  font-weight: 700;
}

.c-form__label .u-optional {
  color: var(--color-text-subtle);
  font-weight: 400;
  text-transform: none;
}

.c-form__input,
.c-form__textarea,
.c-form__select {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--font-size-body);
  min-height: 48px;
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.c-form__textarea { min-height: 140px; resize: vertical; }

.c-form__input::placeholder,
.c-form__textarea::placeholder {
  color: var(--color-placeholder);
}

.c-form__input:focus,
.c-form__textarea:focus,
.c-form__select:focus {
  border-color: var(--color-accent);
}

.c-form__input[aria-invalid="true"],
.c-form__textarea[aria-invalid="true"],
.c-form__select[aria-invalid="true"] {
  border-color: var(--color-error);
}

.c-form__error {
  display: none;
  color: var(--color-error);
  font-size: var(--font-size-xs);
}

.c-form__error.is-visible { display: block; }

.c-form__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

.c-form__checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
}

.c-form__checkbox-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--color-accent);
}

.c-form__checkbox-row label {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.c-form__status {
  display: none;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-small);
}

.c-form__status.is-visible { display: flex; }
.c-form__status--success { background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); border: 1px solid color-mix(in srgb, var(--color-success) 40%, transparent); }
.c-form__status--error { background: color-mix(in srgb, var(--color-error) 14%, transparent); color: var(--color-error); border: 1px solid color-mix(in srgb, var(--color-error) 40%, transparent); }
.c-form__status--loading { background: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-border); }

.c-form__submit {
  position: relative;
}

.c-form__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: vg-spin 700ms linear infinite;
}

.c-form__submit.is-loading .c-form__spinner { display: inline-block; }
.c-form__submit.is-loading .c-form__submit-label { opacity: 0.7; }

@media (max-width: 640px) {
  .c-form__row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- */
/* Bandeau CTA                                                              */
/* ---------------------------------------------------------------------- */

.c-cta-banner {
  background: var(--color-surface);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.c-cta-banner__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: center;
}

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

.c-faq-item {
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-sm);
}

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

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

.c-faq-item summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-accent);
  transition: transform var(--duration-fast) var(--ease-standard);
  flex-shrink: 0;
}

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

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

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

.c-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-background-secondary);
  padding-block: var(--space-2xl) var(--space-lg);
}

.c-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-lg);
}

.c-footer__heading {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-eyebrow);
  color: var(--color-text-subtle);
  margin-bottom: var(--space-sm);
}

.c-footer__list { display: flex; flex-direction: column; gap: var(--space-2xs); }

.c-footer__list a { color: var(--color-text-muted); font-size: var(--font-size-small); }
.c-footer__list a:hover { color: var(--color-accent); }

.c-footer__social { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); }

.c-footer__bottom {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

.c-footer__bottom a { color: var(--color-text-subtle); }
.c-footer__bottom a:hover { color: var(--color-accent); }

@media (max-width: 860px) {
  .c-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .c-footer__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- */
/* Bouton retour en haut                                                    */
/* ---------------------------------------------------------------------- */

.scroll-top-btn {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: 400;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard),
              visibility 0s linear var(--duration-base);
}

.scroll-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}

/* ---------------------------------------------------------------------- */
/* Loader                                                                    */
/* ---------------------------------------------------------------------- */

/* Palette : jetons --color-transition-* (variables.css), identité "chrome"
   récente du site (fond glacier + anthracite + doré sombre), distincte des
   jetons --color-background/--color-accent utilisés par le contenu des
   pages. Visible dès la première frame : ces variables sont définies dans
   :root, sans dépendance à un attribut posé par JavaScript. */
.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  background: var(--color-transition-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  transition: opacity var(--duration-slow) var(--ease-standard), visibility 0s linear var(--duration-slow);
}

.loader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.loader__mark {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  border: 2px solid var(--color-transition-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  color: var(--color-transition-accent);
  transform: rotate(-6deg);
}

.loader__wordmark {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: var(--color-transition-text-muted);
}

.loader__bar-track {
  width: 160px;
  height: 2px;
  background: var(--color-transition-border);
  overflow: hidden;
  border-radius: var(--radius-full);
}

.loader__bar {
  height: 100%;
  width: 0%;
  background: var(--color-loader-progress);
  animation: vg-loader-bar 1.1s var(--ease-standard) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .loader__bar { animation: none; width: 100%; }
}

/* ---------------------------------------------------------------------- */
/* Curseur personnalisé (desktop uniquement, voir js/cursor.js)             */
/* ---------------------------------------------------------------------- */

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--color-accent);
}

.cursor-ring {
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-border-accent);
  transition: width var(--duration-fast) var(--ease-standard),
              height var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cursor-ring.is-label {
  width: 72px;
  height: 72px;
  background: var(--color-accent);
  border-color: transparent;
}

/* Curseur désactivé sur tactile / mouvement réduit / hors zone body */
html.no-custom-cursor .cursor-dot,
html.no-custom-cursor .cursor-ring {
  display: none;
}

/* ---------------------------------------------------------------------- */
/* Boîtes de statistiques ("résultats à venir")                             */
/* ---------------------------------------------------------------------- */

.stat-block {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
  color: var(--color-text-subtle);
}

/* ---------------------------------------------------------------------- */
/* Toast (confirmation newsletter, etc.)                                    */
/* ---------------------------------------------------------------------- */

.c-toast {
  position: fixed;
  bottom: var(--space-md);
  left: 50%;
  transform: translate(-50%, 12px);
  z-index: var(--z-toast);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-accent);
  color: var(--color-text);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-small);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), visibility 0s linear var(--duration-base);
}

.c-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}