/* =============================================================================
   WEBNEXORA — Design System
   Architecture de tokens 3 couches : Primitive → Semantic → Component
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. TOKENS PRIMITIFS (valeurs brutes — ne jamais utiliser directement en UI)
   -------------------------------------------------------------------------- */
:root {
  /* Neutres — échelle slate */
  --slate-950: #020617;
  --slate-900: #0f172a;
  --slate-850: #0e1223;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-400: #94a3b8;
  --slate-200: #e2e8f0;
  --white:     #ffffff;

  /* Marque — Bleu électrique → Violet profond (logo WX) */
  --blue-400:   #60a5fa;
  --blue-500:   #3b82f6;
  --blue-600:   #2563eb;
  --violet-500: #8b5cf6;
  --purple-600: #9333ea;
  --purple-700: #7e22ce;

  /* Typographie */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Échelle d'espacement — rythme 4/8 */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Rayons */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-pill: 999px;

  /* Durées & courbes (motion.csv — tier Standard, power2.out) */
  --dur-fast:   180ms;
  --dur-base:   280ms;
  --dur-reveal: 620ms;
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --container:     1200px;
  --header-height: 104px;  /* accueille le logo de 80px sur desktop */
  --z-header:      100;

  /* Rythme vertical — source unique pour TOUTES les sections.
     Le haut est volontairement plus serré que le bas : après un clic dans le
     menu, le sur-titre arrive presque contre le bord de la section, sans
     l'espace vide qu'imposait un padding symétrique. Le bas conserve de quoi
     séparer deux sections. Modifier ici change tout le site d'un coup. */
  --section-pad-top:    clamp(1.5rem, 3vw, 2rem);     /* 24 → 32px  (pt-6 / pt-8)  */
  --section-pad-bottom: clamp(2.5rem, 5vw, 3rem);     /* 40 → 48px  (pb-10 / pb-12) */
  --section-head-gap:   clamp(1.5rem, 3vw, 2rem);
}

/* -----------------------------------------------------------------------------
   2. TOKENS SÉMANTIQUES (intention — c'est ce qu'on consomme)
   -------------------------------------------------------------------------- */
:root {
  --color-bg:            var(--slate-950);
  --color-surface:       var(--slate-850);
  --color-fg:            var(--white);
  --color-fg-muted:      var(--slate-400);   /* 8.5:1 sur --color-bg ✓ WCAG AA */
  --color-fg-subtle:     var(--slate-600);
  --color-border:        rgba(148, 163, 184, 0.14);
  --color-border-strong: rgba(148, 163, 184, 0.28);
  --color-primary:       var(--blue-500);
  --color-focus:         var(--blue-400);

  --gradient-wx:      linear-gradient(100deg, var(--blue-500) 0%, var(--violet-500) 52%, var(--purple-600) 100%);
  --gradient-wx-soft: linear-gradient(100deg, var(--blue-600), var(--purple-700));

  --shadow-glow:  0 18px 45px -12px rgba(59, 130, 246, 0.55);
  --shadow-glow-strong: 0 22px 60px -10px rgba(124, 88, 246, 0.7);
  --shadow-header: 0 12px 40px -24px rgba(2, 6, 23, 0.9);
}

/* -----------------------------------------------------------------------------
   3. TOKENS COMPOSANTS
   -------------------------------------------------------------------------- */
:root {
  --header-bg:          rgba(2, 6, 23, 0.55);
  --header-bg-scrolled: rgba(2, 6, 23, 0.82);
  --header-blur:        16px;

  --btn-height:      48px;
  --btn-height-sm:   40px;
  --btn-padding-x:   var(--space-6);

  --nav-link-fg:       var(--slate-400);
  --nav-link-fg-hover: var(--white);

  --card-bg:              rgba(15, 23, 42, 0.5);
  --card-bg-hover:        rgba(15, 23, 42, 0.68);
  --card-border:          rgba(255, 255, 255, 0.08);
  --card-border-hover:    rgba(147, 51, 234, 0.5);
  --card-radius:          2rem;
  --card-blur:            12px;
  --card-shadow-hover:    0 28px 60px -32px rgba(88, 28, 235, 0.75);

  /* Scène "Notre approche" — un dégradé par étape */
  --stage-radius: 2rem;
  --stage-1: linear-gradient(135deg, rgba(37, 99, 235, 0.30) 0%, rgba(126, 34, 206, 0.32) 100%);
  --stage-2: linear-gradient(135deg, rgba(8, 145, 178, 0.32) 0%, rgba(37, 99, 235, 0.32) 100%);
  --stage-3: linear-gradient(135deg, rgba(147, 51, 234, 0.34) 0%, rgba(244, 63, 94, 0.26) 100%);

  --fab-shadow: 0 18px 45px -12px rgba(124, 88, 246, 0.75);
  --z-fab:      50;
}

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

* { margin: 0; padding: 0; }

html,
.scroll-smooth {
  scroll-behavior: smooth;
}

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

/* Cadrage des ancres, 100 % natif — aucun JavaScript n'intervient.
   Le 24 de Tailwind vaut 96px, or le header en fait 104 sur desktop : le titre
   passerait dessous. La valeur suit donc la hauteur réelle du header, plus 8px.
   Résultat : 112px sur desktop, 88px sur mobile — calé juste sous le menu. */
.scroll-mt-24 { scroll-margin-top: calc(var(--header-height) + 0.5rem); }

/* Filet de sécurité si une section est ajoutée plus tard sans la classe */
section[id] { scroll-margin-top: calc(var(--header-height) + 0.5rem); }

body {
  min-height: 100vh;
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

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

ul { list-style: none; }

/* Focus visible — jamais supprimé (ux : accessibilité, priorité 1) */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 999;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-fg);
  font-weight: 600;
  transition: top var(--dur-fast) var(--ease-soft);
}
.skip-link:focus-visible { top: var(--space-4); }

/* Visible uniquement par les lecteurs d'écran */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

/* -----------------------------------------------------------------------------
   5. HEADER — fixe, glassmorphism
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(var(--header-blur)) saturate(160%);
  backdrop-filter: blur(var(--header-blur)) saturate(160%);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--dur-base) var(--ease-soft),
              border-color var(--dur-base) var(--ease-soft),
              box-shadow var(--dur-base) var(--ease-soft);
}

.site-header.is-scrolled {
  background: var(--header-bg-scrolled);
  border-bottom-color: var(--color-border-strong);
  box-shadow: var(--shadow-header);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

/* --- Logo --- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}

/* hover:scale-105 — porté par le lien entier plutôt que par l'image : à
   l'intérieur de la fenêtre de recadrage, agrandir l'image décalerait le
   monogramme hors de son cadrage. */
.brand:hover { transform: scale(1.05); }

/* ---------------------------------------------------------------------------
   RECADRAGE DU LOGO (logo1.png)
   Le fichier est un carré de 512px largement margé : le logo n'y occupe que
   43,0 % de la hauteur et 67,2 % de la largeur, centré à 50,8 % / 49,6 %
   (valeurs mesurées sur le canal alpha, pas estimées). Un simple
   object-contain l'afficherait à 34px de haut dans un header de 104px.
   .brand__logo est donc une fenêtre au ratio du logo (1,56:1) dans laquelle
   l'image est agrandie à 214 % et décalée pour tomber pile au centre.
   Les décalages étant en pourcentage, la fenêtre se redimensionne librement.
   Avec un fichier recadré au plus près, ce bloc entier devient inutile.
   ------------------------------------------------------------------------ */
.brand__logo {
  position: relative;
  display: block;
  overflow: hidden;
  flex-shrink: 0;
  height: 56px;                    /* h-14 */
  width: 87px;                     /* 1,56 × la hauteur */
}

.brand__mark {
  position: absolute;
  height: 214%;                    /* le logo occupe alors 92 % de la fenêtre */
  width: auto;
  max-width: none;
  left: -19.7%;
  top: -56.1%;
}

@media (min-width: 768px) {
  .site-header .brand__logo { height: 80px; width: 125px; }   /* md:h-20 */
}

.footer .brand__logo { height: 52px; width: 81px; }

/* --- Navigation centrale --- */
.nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding-inline: var(--space-4);
  border-radius: var(--radius-pill);
  color: var(--nav-link-fg);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-soft),
              background-color var(--dur-fast) var(--ease-soft);
}
.nav__link:hover {
  color: var(--nav-link-fg-hover);
  background-color: rgba(148, 163, 184, 0.08);
}

/* Soulignement dégradé au survol */
.nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--gradient-wx);
  transform: translateX(-50%);
  transition: width var(--dur-base) var(--ease-out);
}
.nav__link:hover::after { width: 42%; }

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

/* --- Burger (mobile) --- */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
}
.burger__bar {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-fg);
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-soft);
}
.burger[aria-expanded="true"] .burger__bar:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* -----------------------------------------------------------------------------
   6. BOUTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--btn-height);
  padding-inline: var(--btn-padding-x);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-soft),
              border-color var(--dur-base) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}

.btn--sm {
  height: var(--btn-height-sm);
  padding-inline: var(--space-5);
  font-size: 0.875rem;
}

/* Primaire — dégradé WX + halo */
.btn--primary {
  position: relative;
  background-image: var(--gradient-wx);
  color: var(--white);
  box-shadow: var(--shadow-glow);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-strong);
}
.btn--primary:active { transform: translateY(0); }

.btn__icon {
  width: 18px;
  height: 18px;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn--primary:hover .btn__icon { transform: translateX(4px); }

/* Contour — fond transparent */
.btn--outline {
  background-color: transparent;
  border-color: var(--slate-600);
  color: var(--color-fg);
}
.btn--outline:hover {
  border-color: var(--slate-400);
  background-color: rgba(148, 163, 184, 0.07);
  transform: translateY(-2px);
}
.btn--outline:active { transform: translateY(0); }

/* Bouton rond icône seule — appel direct depuis le header */
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--color-fg);
  transition: background-color var(--dur-base) var(--ease-soft),
              border-color var(--dur-base) var(--ease-soft),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

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

.icon-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(96, 165, 250, 0.6);
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 30px -12px rgba(59, 130, 246, 0.8);
}
.icon-btn:active { transform: translateY(0); }

/* Le rond fait 40px : on étend la zone tactile à 44px sans décaler la mise en page */
.icon-btn::after {
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

/* -----------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-top: calc(var(--header-height) + var(--space-10));
  padding-bottom: var(--space-12);
  overflow: hidden;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* --- Atmosphère : halos néon, grille, grain --- */
.hero__ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  will-change: transform;
}

.glow--blue {
  top: -18%;
  left: -8%;
  width: 46vw;
  height: 46vw;
  max-width: 680px;
  max-height: 680px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.42), transparent 68%);
  animation: drift 18s var(--ease-soft) infinite alternate;
}

.glow--violet {
  top: 4%;
  right: -12%;
  width: 44vw;
  height: 44vw;
  max-width: 640px;
  max-height: 640px;
  background: radial-gradient(circle, rgba(147, 51, 234, 0.38), transparent 68%);
  animation: drift 22s var(--ease-soft) infinite alternate-reverse;
}

.glow--core {
  bottom: -26%;
  left: 50%;
  width: 74vw;
  height: 42vw;
  max-width: 980px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(99, 102, 241, 0.24), transparent 70%);
}

/* Grille technique, masquée en fondu radial */
.grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(148, 163, 184, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, 0.055) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 42%, #000 15%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 60% at 50% 42%, #000 15%, transparent 78%);
}

/* Grain subtil (SVG inline, aucune requête réseau) */
.noise {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3%, 5%, 0) scale(1.12); }
}

/* --- Sur-titre --- */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: rgba(15, 23, 42, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--color-fg-muted);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  line-height: 1.4;
}

.eyebrow__dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gradient-wx);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.9);
  animation: pulse 2.6s var(--ease-soft) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.72); }
}

/* --- Titre H1 --- */
.hero__title {
  margin-top: var(--space-8);
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7.4vw, 5.75rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.hero__title-line { display: block; }

/* Dégradé WX appliqué au texte — utilitaire partagé */
.hero__title-line--gradient,
.text-gradient {
  background-image: var(--gradient-wx);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.08em;   /* évite le rognage des jambages (p, g) */
}

/* Repli si background-clip:text n'est pas supporté */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__title-line--gradient,
  .text-gradient {
    color: var(--violet-500);
    -webkit-text-fill-color: var(--violet-500);
    background-image: none;
  }
}

/* --- Sous-titre --- */
.hero__subtitle {
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-fg);
  text-wrap: balance;
}

/* --- Paragraphe --- */
.hero__text {
  margin-top: var(--space-5);
  max-width: 42rem;
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--color-fg-muted);
  text-wrap: pretty;
}

/* --- Boutons --- */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

/* --- Indicateur de scroll --- */
.hero__scroll {
  margin-top: var(--space-10);
  height: 56px;
  width: 1px;
  overflow: hidden;
  background: linear-gradient(to bottom, transparent, var(--color-border-strong));
}

.hero__scroll-line {
  display: block;
  width: 100%;
  height: 40%;
  background: var(--gradient-wx);
  animation: scroll-hint 2.4s var(--ease-soft) infinite;
}

@keyframes scroll-hint {
  0%        { transform: translateY(-100%); opacity: 0; }
  35%, 65%  { opacity: 1; }
  100%      { transform: translateY(250%); opacity: 0; }
}

/* -----------------------------------------------------------------------------
   8. EN-TÊTE DE SECTION (motif réutilisable)
   -------------------------------------------------------------------------- */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--section-head-gap);
}

.section-head__eyebrow {
  color: var(--color-fg-muted);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  line-height: 1.4;
}

/* Chapô sous le titre — mesure de lecture bornée */
.section-head__lead {
  max-width: 46rem;
  margin-top: var(--space-5);
  color: var(--color-fg-muted);
  font-size: 1rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.section-head__title {
  margin-top: var(--space-5);
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.2vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

/* -----------------------------------------------------------------------------
   9. SERVICES — Bento grid asymétrique
   -------------------------------------------------------------------------- */
.services {
  position: relative;
  isolation: isolate;
  padding-top: var(--section-pad-top);
  padding-bottom: var(--section-pad-bottom);
}

/* Nappe lumineuse très diffuse — évite l'aplat et nourrit le backdrop-blur */
.services::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 8%;
  left: 50%;
  width: min(1100px, 92vw);
  height: 420px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(88, 80, 236, 0.14), transparent 70%);
  filter: blur(70px);
  pointer-events: none;
}

/* --- Carte --- */
.bento__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  min-height: 260px;
  padding: clamp(1.75rem, 2.8vw, 2.5rem);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(var(--card-blur));
  backdrop-filter: blur(var(--card-blur));
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-soft),
              background-color var(--dur-base) var(--ease-soft),
              box-shadow var(--dur-base) var(--ease-out);
}

.bento__card:hover {
  transform: translateY(-4px);
  border-color: var(--card-border-hover);
  background-color: var(--card-bg-hover);
  box-shadow: var(--card-shadow-hover);
}

/* Liseré dégradé qui s'allume sur le bord supérieur */
.bento__card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;   /* pas de valeur négative : overflow:hidden la rognerait */
  height: 1px;
  background: var(--gradient-wx);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-soft);
}
.bento__card:hover::after { opacity: 0.9; }


/* --- Texte --- */
.bento__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-fg);
}


.bento__text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-fg-muted);
  text-wrap: pretty;
}

/* --- Halo interne des grandes cartes --- */
.bento__halo {
  position: absolute;
  z-index: 0;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-soft);
}

.bento__card:hover .bento__halo { opacity: 0.85; }

.bento__halo--blue {
  top: -22%;
  right: -8%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.55), transparent 68%);
}

.bento__halo--violet {
  bottom: -28%;
  right: -6%;
  background: radial-gradient(circle, rgba(147, 51, 234, 0.5), transparent 68%);
}


/* =============================================================================
   BLOCS DE CONVERSION — écrits en MOBILE-FIRST
   Base = téléphone (une colonne, padding 24px, boutons pleine largeur).
   Les media queries min-width n'ajoutent des colonnes que sur écran large.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   10. LE PROBLÈME VS LA SOLUTION
   -------------------------------------------------------------------------- */
.compare {
  position: relative;
  padding-top: var(--section-pad-top);
  padding-bottom: var(--section-pad-bottom);
}

.compare__title { max-width: 22ch; }

.compare__grid {
  display: grid;
  gap: var(--space-6);            /* mobile : une colonne */
}

.compare__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);        /* p-6 sur mobile */
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  -webkit-backdrop-filter: blur(var(--card-blur));
  backdrop-filter: blur(var(--card-blur));
}

/* Le problème : teinte rouge sourde, jamais criarde */
.compare__card--problem {
  border-color: rgba(248, 113, 113, 0.22);
  background-color: rgba(38, 20, 26, 0.45);
}

/* La solution : dégradé WX subtil, mise en avant */
.compare__card--solution {
  border-color: rgba(147, 51, 234, 0.42);
  background-color: var(--card-bg);
  background-image: linear-gradient(160deg, rgba(59, 130, 246, 0.16), rgba(147, 51, 234, 0.16));
}

.compare__halo {
  position: absolute;
  z-index: -1;
  top: -25%;
  right: -15%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(147, 51, 234, 0.4), transparent 68%);
  filter: blur(70px);
  pointer-events: none;
}

.compare__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.compare__tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.compare__tag--problem {
  border: 1px solid rgba(248, 113, 113, 0.3);
  background-color: rgba(248, 113, 113, 0.12);
  color: #fca5a5;                 /* 7.4:1 sur le fond sombre */
}

.compare__tag--solution {
  background-image: var(--gradient-wx);
  color: var(--white);
}

.compare__heading {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-fg);
}

.compare__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.compare__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.compare__item p {
  color: var(--color-fg-muted);
  font-size: 0.9375rem;
  line-height: 1.7;
  text-wrap: pretty;
}

/* Pastille : la forme distingue les deux listes, pas seulement la couleur */
.compare__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-top: 2px;
  border-radius: 50%;
}

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

.compare__mark--x {
  background-color: rgba(248, 113, 113, 0.14);
  color: #fca5a5;
}

.compare__mark--check {
  background-image: var(--gradient-wx);
  color: var(--white);
}

.compare__cta {
  margin-top: auto;
  width: 100%;                    /* pleine largeur au pouce sur mobile */
}

@media (min-width: 640px) {
  .compare__cta { width: auto; align-self: flex-start; }
}

@media (min-width: 768px) {
  .compare__grid { grid-template-columns: repeat(2, 1fr); }
  .compare__card { padding: clamp(1.75rem, 2.6vw, 2.5rem); }
  .compare__item p { font-size: 1rem; }
}

/* -----------------------------------------------------------------------------
   10b. SERVICES CONCRETS — trois cartes
   -------------------------------------------------------------------------- */
.svc__grid {
  display: grid;
  gap: var(--space-6);
}

.svc__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background-color: var(--card-bg);
  -webkit-backdrop-filter: blur(var(--card-blur));
  backdrop-filter: blur(var(--card-blur));
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-soft),
              box-shadow var(--dur-base) var(--ease-out);
}

.svc__card:hover {
  transform: translateY(-4px);
  border-color: var(--card-border-hover);
  box-shadow: var(--card-shadow-hover);
}

.svc__card--featured {
  border-color: rgba(147, 51, 234, 0.45);
  background-image: linear-gradient(160deg, rgba(59, 130, 246, 0.14), rgba(147, 51, 234, 0.14));
}

.svc__halo {
  position: absolute;
  z-index: -1;
  top: -30%;
  right: -20%;
  width: 75%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(147, 51, 234, 0.42), transparent 68%);
  filter: blur(70px);
  pointer-events: none;
}

.svc__badge {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background-image: var(--gradient-wx);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.svc__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: linear-gradient(140deg, rgba(59, 130, 246, 0.16), rgba(147, 51, 234, 0.16));
  color: var(--blue-400);
  transition: color var(--dur-base) var(--ease-soft),
              transform var(--dur-base) var(--ease-out);
}

.svc__icon svg { width: 25px; height: 25px; }

.svc__card:hover .svc__icon { color: var(--white); transform: scale(1.06); }

.svc__title {
  max-width: 16ch;                /* le titre ne passe jamais sous le badge */
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 4vw, 1.375rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-fg);
}

.svc__text {
  color: var(--color-fg-muted);
  font-size: 0.9375rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.svc__bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.svc__bullets li {
  position: relative;
  padding-left: var(--space-6);
  color: var(--color-fg-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* Puce dessinée en CSS — pas d'emoji comme icône structurelle */
.svc__bullets li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-image: var(--gradient-wx);
}

@media (min-width: 768px) {
  .svc__card { padding: clamp(1.75rem, 2.6vw, 2.25rem); }
  .svc__text, .svc__bullets li { font-size: 1rem; }
}

@media (min-width: 1024px) {
  .svc__grid { grid-template-columns: repeat(3, 1fr); }
}

/* -----------------------------------------------------------------------------
   10c. LE DÉROULEMENT — onglets + carte d'affichage
   -------------------------------------------------------------------------- */
.steps {
  position: relative;
  padding-top: var(--section-pad-top);
  padding-bottom: var(--section-pad-bottom);
}

/* --- Piste défilante : scroll horizontal avec accrochage --- */
/* --- Onglets pilules --- */
.wxtabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.wxtab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;                 /* cible tactile confortable */
  padding: var(--space-2) var(--space-6);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--color-fg-muted);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: color var(--dur-base) var(--ease-soft),
              border-color var(--dur-base) var(--ease-soft),
              background-color var(--dur-base) var(--ease-soft),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.wxtab:hover {
  color: var(--color-fg);
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}

.wxtab__num {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(148, 163, 184, 0.85);
  transition: color var(--dur-base) var(--ease-soft);
}

/* Actif : dégradé WX, texte blanc, halo — l'état ne repose pas sur la seule couleur */
.wxtab[aria-selected="true"] {
  border-color: transparent;
  background-image: var(--gradient-wx);
  color: var(--white);
  box-shadow: var(--shadow-glow);
}

.wxtab[aria-selected="true"] .wxtab__num { color: rgba(255, 255, 255, 0.75); }

/* --- Carte d'affichage unique --- */
.showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 350px;
  padding: var(--space-6);
  border: 1px solid rgba(99, 102, 241, 0.28);
  border-radius: var(--card-radius);
  background-color: var(--slate-950);
  transition: border-color 500ms var(--ease-soft);
}

/* Bordure unique : les trois étapes partagent désormais la même palette */
.showcase[data-stage] { border-color: rgba(129, 140, 248, 0.45); }

/* --- Fonds : un calque par étape, croisés en opacité sur 500ms --- */
.showcase__layer {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0;
  transition: opacity 500ms var(--ease-soft);
  pointer-events: none;
}

.showcase__layer.is-active { opacity: 1; }

/* Les trois étapes partagent le dégradé WX, identique au bouton principal.
   Un voile sombre le recouvre : sur le dégradé nu, le sur-titre de 12px
   tombe à 3,1:1, sous le seuil de 4,5:1. Avec le voile il remonte à 5,4:1,
   et le dégradé de marque reste parfaitement reconnaissable. */
.showcase__layer--1,
.showcase__layer--2,
.showcase__layer--3 {
  background-image:
    linear-gradient(rgba(2, 6, 23, 0.34), rgba(2, 6, 23, 0.34)),
    var(--gradient-wx);
}

/* Motif de grille très discret */
.showcase__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 25% 15%, #000, transparent 78%);
  mask-image: radial-gradient(ellipse 85% 85% at 25% 15%, #000, transparent 78%);
  pointer-events: none;
}

/* Les trois volets partagent une même cellule de grille : la carte se dimensionne
   sur le plus haut, donc aucun soubresaut de hauteur au changement d'onglet. */
.showcase__panels {
  position: relative;
  display: grid;
  width: 100%;
}

.pane {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  max-width: 44rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 380ms var(--ease-out),
              transform 380ms var(--ease-out),
              visibility 380ms;
}

.pane.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pane__eyebrow {
  color: rgba(255, 255, 255, 0.88);   /* remonté : les fonds sont plus clairs */
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

.pane__text {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3.4vw, 2.125rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--color-fg);
  text-wrap: pretty;
}

.pane__badge {
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill);
  background-color: rgba(2, 6, 23, 0.35);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

@media (max-width: 640px) {
  /* Les pilules passent en pleine largeur, alignées à gauche */
  .wxtabs { flex-direction: column; align-items: stretch; }
  .wxtab { justify-content: flex-start; }
  .showcase { min-height: 320px; }
}

@media (min-width: 768px) {
  .showcase { padding: clamp(2rem, 4vw, 2.5rem); }
}

/* -----------------------------------------------------------------------------
   11. RÉALISATIONS — cartes projet
   (elles réutilisent le composant .bento__card : même surface, même hover)
   -------------------------------------------------------------------------- */
.work {
  position: relative;
  padding-top: var(--section-pad-top);
  padding-bottom: var(--section-pad-bottom);
}

/* Mobile-first : une colonne par défaut, deux à partir de 900px */
.work__grid {
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.5rem);
}

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

/* L'image est à fleur de carte : le padding passe sur le corps de texte */
.work__card {
  flex-direction: column;
  gap: 0;
  padding: 0;
  min-height: 0;
}

/* --- Média : coins arrondis hérités du overflow:hidden de la carte --- */
.work__media {
  position: relative;
  z-index: 1;
  overflow: hidden;
  aspect-ratio: 16 / 9;          /* espace réservé → aucun décalage au chargement */
  border-bottom: 1px solid var(--color-border);
  background-image: var(--media-tint, var(--gradient-wx));
}

.work__media--blue   { --media-tint: linear-gradient(135deg, rgba(37, 99, 235, 0.55), rgba(126, 34, 206, 0.4)); }
.work__media--violet { --media-tint: linear-gradient(135deg, rgba(147, 51, 234, 0.5), rgba(59, 130, 246, 0.4)); }

.work__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--dur-base) var(--ease-out);
}

.work__card:hover .work__img { transform: scale(1.04); }

/* Repli affiché si l'image est absente (classe posée par script.js) */
.work__fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
}

.work__media.is-missing .work__img { display: none; }
.work__media.is-missing .work__fallback { display: flex; }

.work__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: auto;
  padding: clamp(1.5rem, 2.5vw, 2rem);
}

/* --- Bouton "Visiter le site" --- */
.btn--visit {
  margin-top: var(--space-3);
  border-color: var(--color-border-strong);
  background-color: transparent;
  color: var(--color-fg);
}

.btn--visit:hover {
  transform: translateY(-2px);
  border-color: transparent;
  background-image: var(--gradient-wx);
  box-shadow: var(--shadow-glow);
}
.btn--visit:hover .btn__icon { transform: translateX(4px); }
.btn--visit:active { transform: translateY(0); }

/* -----------------------------------------------------------------------------
   11b. AVIS GOOGLE — bento de témoignages
   -------------------------------------------------------------------------- */
.reviews {
  position: relative;
  padding-top: var(--section-pad-top);
  padding-bottom: var(--section-pad-bottom);
}

/* --- Étoiles --- */
.stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #fbbf24;                  /* ambre : 10,4:1 sur le fond sombre */
  flex-shrink: 0;
}

.star {
  width: 16px;
  height: 16px;
}

/* --- Badge de note globale --- */
.rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-2) var(--space-5);
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: var(--radius-pill);
  background-color: rgba(251, 191, 36, 0.08);
  color: var(--color-fg);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

.rating .star { width: 15px; height: 15px; }

/* --- Piste défilante en boucle --- */
.marquee {
  --marquee-gap: var(--space-6);
  position: relative;
  margin-top: var(--space-8);
  overflow-x: auto;                /* sans JS : la piste reste consultable au doigt */
  overflow-y: hidden;
  scrollbar-width: none;
  /* Fondu latéral : les cartes naissent et disparaissent au lieu d'être coupées net */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.marquee::-webkit-scrollbar { display: none; }

.marquee__track {
  display: flex;
  gap: var(--marquee-gap);
  width: max-content;
  padding-inline: var(--space-6);
  list-style: none;
}

/* La classe est posée par script.js une fois la seconde copie insérée : sans
   duplication, l'animation laisserait un vide en fin de boucle. */
.marquee.is-looping {
  overflow-x: hidden;
}

.marquee.is-looping .marquee__track {
  padding-inline: 0;
  animation: marquee var(--marquee-duration, 60s) linear infinite;
}

/* Pause à la souris ET au clavier, pour laisser le temps de lire */
.marquee.is-looping:hover .marquee__track,
.marquee.is-looping:focus-within .marquee__track {
  animation-play-state: paused;
}

/* La piste contient exactement 2 copies : un demi-tour vaut une copie
   plus une demi-gouttière, d'où le -50% corrigé de la moitié du gap. */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--marquee-gap) / 2)); }
}

.review {
  width: min(350px, 78vw);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1rem;             /* rounded-2xl */
  background-color: rgba(15, 23, 42, 0.4);
  -webkit-backdrop-filter: blur(var(--card-blur));
  backdrop-filter: blur(var(--card-blur));
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-soft),
              background-color var(--dur-base) var(--ease-soft);
}

.review:hover {
  transform: translateY(-3px);
  border-color: rgba(147, 51, 234, 0.4);
  background-color: rgba(15, 23, 42, 0.6);
}

/* margin-top:auto pousse la signature en bas : toutes les cartes d'une même
   rangée alignent leur bas malgré des avis de longueurs très différentes */
.review__text {
  flex: 1;
  color: var(--color-fg-muted);
  font-size: 0.9375rem;
  font-style: normal;
  line-height: 1.75;
  text-wrap: pretty;
}

.review__author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.review__name {
  color: var(--color-fg);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
}

.review__source {
  color: var(--color-fg-muted);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

.reviews__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
}

@media (min-width: 768px) {
  .review__text { font-size: 1rem; }
}

/* -----------------------------------------------------------------------------
   12. QUI SOMMES-NOUS
   -------------------------------------------------------------------------- */
.about {
  position: relative;
  padding-top: var(--section-pad-top);
  padding-bottom: var(--section-pad-bottom);
}

.about__title { max-width: 24ch; }

.about__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 62rem;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(var(--card-blur));
  backdrop-filter: blur(var(--card-blur));
}

.about__halo {
  position: absolute;
  z-index: -1;
  top: -40%;
  left: 50%;
  width: 70%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.3), transparent 68%);
  filter: blur(80px);
  pointer-events: none;
}

.about__text {
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  line-height: 1.8;
  color: var(--color-fg-muted);
  text-wrap: pretty;
}

.about__accent {
  font-weight: 700;
  color: var(--color-fg);
}

/* -----------------------------------------------------------------------------
   13. FAQ — accordéon
   -------------------------------------------------------------------------- */
.faq {
  position: relative;
  padding-top: var(--section-pad-top);
  padding-bottom: var(--section-pad-bottom);
}

.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 52rem;
  margin-inline: auto;
}

.accordion__item {
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(var(--card-blur));
  backdrop-filter: blur(var(--card-blur));
  transition: border-color var(--dur-base) var(--ease-soft),
              background-color var(--dur-base) var(--ease-soft);
}

.accordion__item:hover { border-color: var(--color-border-strong); }

.accordion__item:has(.accordion__trigger[aria-expanded="true"]) {
  border-color: var(--card-border-hover);
  background-color: var(--card-bg-hover);
}

.accordion__heading { margin: 0; }

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: 68px;
  padding: var(--space-5) clamp(1.25rem, 2.4vw, 1.75rem);
  text-align: left;
  color: var(--color-fg);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.7vw, 1.125rem);
  font-weight: 600;
  line-height: 1.4;
}

.accordion__question { flex: 1; }

.accordion__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  color: var(--color-fg-muted);
  transition: transform var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-soft),
              border-color var(--dur-base) var(--ease-soft),
              background-color var(--dur-base) var(--ease-soft);
}

.accordion__icon svg { width: 17px; height: 17px; }

/* Le "+" pivote en "×" : l'état est signalé par la forme, pas par la couleur seule */
.accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(135deg);
  border-color: transparent;
  background-image: var(--gradient-wx);
  color: var(--white);
}

/* Ouverture fluide : 0fr → 1fr, sans hauteur codée en dur */
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease-out);
}

.accordion__panel.is-open { grid-template-rows: 1fr; }

.accordion__content {
  overflow: hidden;
  color: var(--color-fg-muted);
  line-height: 1.75;
}

.accordion__content > p {
  padding: 0 clamp(1.25rem, 2.4vw, 1.75rem) var(--space-6);
  max-width: 60ch;
  text-wrap: pretty;
}

/* -----------------------------------------------------------------------------
   14. CONTACT & AUDIT — accès rapides, formulaire, réservation
   -------------------------------------------------------------------------- */
.contact {
  position: relative;
  padding-top: var(--section-pad-top);
  padding-bottom: var(--section-pad-bottom);
}

/* --- Accès rapides : téléphone et email, atteignables au pouce --- */
.quick {
  display: flex;
  flex-direction: column;         /* mobile : empilés, pleine largeur */
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.quick__btn {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 60px;               /* bien au-delà des 44px minimum */
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background-color: var(--card-bg);
  -webkit-backdrop-filter: blur(var(--card-blur));
  backdrop-filter: blur(var(--card-blur));
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-soft),
              background-color var(--dur-base) var(--ease-soft);
}

.quick__btn:hover {
  transform: translateY(-2px);
  border-color: var(--blue-500);
  background-color: rgba(59, 130, 246, 0.1);
}

.quick__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(140deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2));
  color: var(--blue-400);
}

.quick__icon svg { width: 19px; height: 19px; }

.quick__value {
  color: var(--color-fg);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

@media (min-width: 640px) {
  .quick { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}

/* --- Disposition : formulaire puis réservation, empilés sur mobile --- */
.contact__grid {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

.contact__form-card {
  position: relative;
  overflow: hidden;
  padding: var(--space-6);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background-color: var(--card-bg);
  -webkit-backdrop-filter: blur(var(--card-blur));
  backdrop-filter: blur(var(--card-blur));
}

@media (min-width: 768px) {
  .contact__form-card { padding: clamp(1.75rem, 2.6vw, 2.5rem); }
}

@media (min-width: 1024px) {
  .contact__grid { grid-template-columns: 1.3fr 0.7fr; }
}

/* --- Réservation directe --- */
.booking {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid rgba(147, 51, 234, 0.42);
  border-radius: var(--card-radius);
  background-color: var(--card-bg);
  background-image: linear-gradient(160deg, rgba(59, 130, 246, 0.16), rgba(147, 51, 234, 0.16));
  -webkit-backdrop-filter: blur(var(--card-blur));
  backdrop-filter: blur(var(--card-blur));
}

.booking__halo {
  position: absolute;
  z-index: -1;
  top: -25%;
  right: -20%;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(147, 51, 234, 0.4), transparent 68%);
  filter: blur(70px);
  pointer-events: none;
}

.booking__title {
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 4vw, 1.375rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-fg);
}

.booking__text {
  color: var(--color-fg-muted);
  font-size: 0.9375rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.booking__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.booking__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-fg-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.booking__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
  border-radius: 50%;
  background-image: var(--gradient-wx);
  color: var(--white);
}

.booking__mark svg { width: 12px; height: 12px; }

.booking__badge {
  align-self: flex-start;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  color: var(--color-fg);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.booking__cta {
  margin-top: auto;
  width: 100%;                    /* pleine largeur, y compris sur desktop */
}

@media (min-width: 768px) {
  .booking { padding: clamp(1.75rem, 2.6vw, 2.25rem); }
  .booking__text, .booking__item { font-size: 1rem; }
}

/* --- Formulaire --- */
.form {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
}

/* Rangée : une colonne sur mobile, deux dès qu'il y a la place */
.form__row {
  display: grid;
  gap: var(--space-5);
}

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

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;                   /* empêche un champ de déborder de sa colonne */
}

.field__req { color: #fca5a5; }

/* Label toujours visible — jamais de placeholder en guise de label */
.field__label {
  color: var(--color-fg-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.field__input {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: rgba(2, 6, 23, 0.5);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  transition: border-color var(--dur-base) var(--ease-soft),
              box-shadow var(--dur-base) var(--ease-soft),
              background-color var(--dur-base) var(--ease-soft);
}

.field__input::placeholder { color: var(--color-fg-subtle); }

.field__input:focus {
  outline: none;
  border-color: var(--blue-500);
  background-color: rgba(2, 6, 23, 0.75);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
}

.field__input--area {
  min-height: 132px;
  resize: vertical;
}

/* Menu déroulant : chevron dessiné en SVG inline, aucune requête réseau */
.field__input--select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  cursor: pointer;
}

/* Les options héritent du thème de l'OS : on force un rendu sombre lisible */
.field__input--select option {
  background-color: var(--slate-900);
  color: var(--color-fg);
}

/* Erreur : couleur + texte explicite (jamais la couleur seule) */
.field__input[aria-invalid="true"] {
  border-color: #f87171;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18);
}

.field__error {
  color: #fca5a5;               /* 7.4:1 sur le fond sombre */
  font-size: 0.8125rem;
  line-height: 1.5;
}

.form__submit {
  align-self: flex-start;
  margin-top: var(--space-2);
}

.form__status {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-fg);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.form__status:empty { display: none; }

/* Succès et erreur : le texte porte l'information, la couleur ne fait que l'appuyer */
.form__status--success {
  border-color: rgba(52, 211, 153, 0.45);
  background-color: rgba(16, 185, 129, 0.12);
  color: #a7f3d0;                 /* 11:1 sur le fond sombre */
}

.form__status--error {
  border-color: rgba(248, 113, 113, 0.45);
  background-color: rgba(248, 113, 113, 0.1);
  color: #fca5a5;                 /* 7,4:1 */
}

.form__hint {
  color: var(--color-fg-muted);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* -----------------------------------------------------------------------------
   15. FAB — bouton flottant
   -------------------------------------------------------------------------- */
.fab {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-fab);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  background-image: var(--gradient-wx);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  box-shadow: var(--fab-shadow);
  /* Masqué tant que le Hero est à l'écran (piloté par script.js) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.96);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
}

.fab.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.fab:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-glow-strong);
}
.fab:active { transform: translateY(0) scale(1); }

.fab__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--color-border);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: calc(clamp(2.5rem, 5vw, 3.5rem) + env(safe-area-inset-bottom, 0px));
}

/* Mobile-first : tout empilé à gauche, puis deux colonnes sur large écran */
.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 34rem;
}

.footer__tagline {
  color: var(--color-fg-muted);
  font-size: 0.9375rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.footer__badge {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--card-bg);
  color: var(--color-fg-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* Réutilise .icon-btn du header : même rond, même halo au survol */
.footer__social {
  margin-top: var(--space-2);
  color: var(--color-fg-muted);
}

.footer__social:hover { color: var(--color-fg); }

.footer__end {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

@media (min-width: 900px) {
  .footer__inner {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .footer__end { align-items: flex-end; }
}



.footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                       /* cible tactile ≥ 44px */
  padding-inline: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-fg-muted);
  font-size: 0.9375rem;
  transition: color var(--dur-fast) var(--ease-soft);
}
.footer__link:hover { color: var(--color-fg); }

/* Libellé en attente de sa page : ni cliquable, ni suivi par les robots */
.footer__note {
  color: var(--color-fg-muted);   /* 8.5:1 — --color-fg-subtle échouerait le 4.5:1 */
  font-size: 0.875rem;
}

/* -----------------------------------------------------------------------------
   17. MOTION — révélation "fade-in up" en cascade
   (motion.csv, tier Standard : y 24px / 500-620ms / power2.out / stagger 80ms)
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  animation: fade-in-up var(--dur-reveal) var(--ease-out) forwards;
  animation-delay: var(--d, 0ms);
}

@keyframes fade-in-up {
  to { opacity: 1; transform: translateY(0); }
}

/* Section suivante : révélation au scroll (activée par script.js) */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -----------------------------------------------------------------------------
   18. RESPONSIVE (mobile-first friendly overrides)
   -------------------------------------------------------------------------- */

/* Réalisations : une colonne jusqu'à 900px (déclaré en max-width car la grille
   desktop est définie plus haut ; les nouvelles sections, elles, sont
   entièrement mobile-first) */

@media (max-width: 1023px) {
  .nav {
    position: fixed;
    left: 0;
    top: var(--header-height);
    width: 100%;
    padding: var(--space-4) var(--space-6) var(--space-8);
    background: var(--header-bg-scrolled);
    -webkit-backdrop-filter: blur(var(--header-blur)) saturate(160%);
    backdrop-filter: blur(var(--header-blur)) saturate(160%);
    border-bottom: 1px solid var(--color-border-strong);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur-base) var(--ease-soft),
                transform var(--dur-base) var(--ease-out),
                visibility var(--dur-base);
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
  }

  .nav__link {
    height: 48px;                 /* cible tactile ≥ 44px */
    padding-inline: var(--space-4);
    font-size: 1rem;
  }
  .nav__link::after { display: none; }

  .burger { display: inline-flex; }
}

@media (max-width: 640px) {
  :root { --header-height: 80px; }

  .container { padding-inline: var(--space-5); }


  .header__inner { gap: var(--space-3); }
  .header__actions { gap: var(--space-2); }

  /* Place comptée sur petit écran : le logo est réduit, ratio 1,56 conservé */
  .site-header .brand__logo { height: 48px; width: 75px; }

  .hero { padding-top: calc(var(--header-height) + var(--space-12)); }

  .hero__eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    padding-inline: var(--space-4);
  }

  .hero__title { margin-top: var(--space-6); }

  .hero__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .hero__actions .btn { width: 100%; }

  .hero__scroll { margin-top: var(--space-10); }

  /* FAB compact — le libellé cède la place à l'icône seule */
  .fab {
    min-height: 56px;
    width: 56px;
    padding: 0;
    justify-content: center;
  }
  .fab__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .fab__icon { width: 22px; height: 22px; }

  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .footer__nav { margin-inline: calc(var(--space-3) * -1); }

  /* Le bouton "Visiter le site" prend toute la largeur de la carte */
  .work__body { align-self: stretch; }
  .btn--visit { width: 100%; }

  .accordion__trigger { padding-inline: var(--space-4); }
  .accordion__content > p { padding-inline: var(--space-4); }

  .form__submit { align-self: stretch; width: 100%; }
}

/* -----------------------------------------------------------------------------
   19. PRÉFÉRENCES UTILISATEUR
   -------------------------------------------------------------------------- */
/* Très petits écrans (iPhone SE) : on resserre les CTA du header */
@media (max-width: 380px) {
  .btn--sm { padding-inline: var(--space-4); font-size: 0.8125rem; }
  .container { padding-inline: var(--space-4); }
}

/* -----------------------------------------------------------------------------
   19b. PRÉFÉRENCES UTILISATEUR
   -------------------------------------------------------------------------- */
@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;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --color-fg-muted: #cbd5e1;
    --color-border: rgba(226, 232, 240, 0.3);
    --color-border-strong: rgba(226, 232, 240, 0.5);
  }
}