/* =========================================================
   KromaDev — styles
   Structure & règles : DESIGN.md
   Couleurs : palette KromaDev (Sombre / Foncé / Accent / Clair / Blanc)
   ========================================================= */

/* ---------- Polices hébergées en local (fonts/, licence SIL OFL 1.1) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/caveat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/caveat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Palette KromaDev */
  --color-sombre: #0e0916;   /* texte, footer */
  --color-fonce: #341c5f;    /* complément accent, bande sombre, annonce */
  --color-accent: #7c3bed;   /* boutons, liens */
  --color-clair: #ede7f9;    /* fond de page */
  --color-blanc: #ffffff;    /* cartes */

  /* Teintes de l'accent */
  --accent-80: #9662f1;
  --accent-60: #b089f4;
  --accent-40: #cbb1f8;
  --accent-20: #e5d8fb;

  /* Rôles (mapping DESIGN.md → palette) */
  --canvas: var(--color-clair);
  --surface: var(--color-blanc);
  --text: var(--color-sombre);
  --text-muted: #5b5370;
  --border: #ddd3f2;
  --primary: var(--color-accent);
  --primary-hover: #6a2bd9;
  --link: var(--color-accent);
  --secondary-fill: var(--accent-20);
  --dark-band: var(--color-fonce);
  --footer: var(--color-sombre);
  --accent-text: var(--color-fonce);
  --soft-fill: var(--accent-20);
  --selected-fill: var(--accent-40);
  --header-bg: rgba(237, 231, 249, 0.92); /* assez opaque pour garder « Dev » lisible au-dessus des zones sombres */
  --glass: rgba(255, 255, 255, 0.85);
  --glass-soft: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(255, 255, 255, 0.4);
  --gradient-glow: rgba(229, 216, 251, 0.9);
  --gradient-base: var(--accent-20);
  --toast-bg: var(--color-sombre);
  --footer-border: transparent;
  /* Erreurs de formulaire : texte AA (6,5:1 sur blanc, 5,4:1 sur le fond de page) */
  --danger: #c42a2a;
  --danger-text: #b91c1c;
  --danger-fill: rgba(196, 42, 42, 0.08);
  --danger-ring: rgba(196, 42, 42, 0.2);
  color-scheme: light;

  /* Typo */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-script: "Caveat", cursive;

  --text-caption: 12px;
  --text-body-sm: 14px;
  --text-body: 16px;
  --text-label-bold: 19px;
  --text-subheading: 26px;
  --text-heading-sm: 28px;
  --text-heading-lg: 49px;
  --text-display: 64px;

  /* Rayons */
  --radius-tabs: 8px;
  --radius-cards: 16px;
  --radius-buttons: 16px;
  --radius-small: 8px;
  --radius-pill: 999px;

  --shadow-subtle: rgb(124, 59, 237) 0 0 0 1px inset;

  --max-w: 1200px;
  --section-gap: 96px;

  /* Mouvement : décélération douce, commune à tout le site */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Thème sombre ---------- */
:root[data-theme="dark"] {
  --canvas: var(--color-sombre);
  --surface: #160f24;
  --text: var(--color-clair);
  --text-muted: #a79dbf;
  --border: rgba(203, 177, 248, 0.14);
  --link: var(--accent-60);
  --primary-hover: var(--accent-80);
  --secondary-fill: rgba(124, 59, 237, 0.16);
  --dark-band: var(--color-fonce);
  --footer: #08050d;
  --accent-text: var(--accent-40);
  --soft-fill: rgba(124, 59, 237, 0.18);
  --selected-fill: rgba(124, 59, 237, 0.32);
  --header-bg: rgba(14, 9, 22, 0.72);
  --glass: rgba(30, 20, 50, 0.78);
  --glass-soft: rgba(52, 28, 95, 0.45);
  --glass-border: rgba(203, 177, 248, 0.16);
  --gradient-glow: rgba(52, 28, 95, 0.9);
  --gradient-base: #1b1130;
  --toast-bg: var(--color-fonce);
  --footer-border: rgba(203, 177, 248, 0.1);
  /* Erreurs : 8,2:1 sur la carte sombre */
  --danger: #f87171;
  --danger-text: #ff8a8a;
  --danger-fill: rgba(248, 113, 113, 0.12);
  --danger-ring: rgba(248, 113, 113, 0.25);
  color-scheme: dark;
}
:root[data-theme="dark"] .hero__atmos { opacity: 0.6; }

/* Changement de thème : fondu global via View Transitions (main.js / legal.js),
   transitions individuelles coupées le temps du basculement pour éviter un rendu à moitié changé. */
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after { transition: none !important; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.3s; animation-timing-function: ease; }

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

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--text-body);
  font-weight: 460;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

img, svg { display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 12px; }
h1, h2, h3, h4 { margin: 0; font-weight: 460; }

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding-top: var(--section-gap); }

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

/* Texte réservé aux lecteurs d'écran */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Typo ---------- */
.display {
  font-size: var(--text-display);
  line-height: 0.96;
  letter-spacing: -0.028em;
  font-weight: 460;
}
/* Mot clé du titre du hero, en couleur (contraste ≥ 3:1 pour un texte de cette taille) */
.display__accent { color: var(--color-accent); }
:root[data-theme="dark"] .display__accent { color: var(--accent-60); }
.display--light { color: var(--color-blanc); }

.heading-lg {
  font-size: var(--text-heading-lg);
  line-height: 1.04;
  letter-spacing: -0.027em;
}
.heading-sm {
  font-size: var(--text-heading-sm);
  line-height: 1.14;
  letter-spacing: -0.022em;
}
.label-bold {
  font-size: var(--text-label-bold);
  font-weight: 700;
  line-height: 1.3;
  margin: 12px 0 8px;
}
.caption-title {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 540;
  margin: 0;
}

.link {
  color: var(--link);
  font-weight: 540;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease;
}
.link:hover { background-size: 100% 1px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-buttons);
  font: inherit;
  font-weight: 540;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { transition: transform 0.2s ease; }
.btn:hover svg { transform: translateX(3px); }

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

.btn--secondary {
  background: var(--secondary-fill);
  color: var(--text);
  border: 1px solid var(--accent-text);
  border-radius: var(--radius-small);
}
.btn--secondary:hover { background: var(--selected-fill); }

.btn--outline-light {
  background: transparent;
  color: var(--color-blanc);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-small);
  height: 44px;
}
.btn--outline-light:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }

.btn--white { background: var(--color-blanc); color: var(--color-sombre); }
.btn--white:hover { background: var(--accent-20); }

.btn--sm { height: 40px; padding: 0 16px; border-radius: 12px; font-size: 15px; }
.btn--block { width: 100%; }


/* Focus clavier visible partout ; le contour suit l'arrondi de l'élément
   (on ne modifie plus border-radius au focus, ce qui déformait les boutons) */
:focus-visible { outline: 2px solid var(--accent-80); outline-offset: 3px; }
a:not([class]):focus-visible, .link:focus-visible, .nav a:focus-visible, .footer a:focus-visible { border-radius: 4px; }
/* Lien d'évitement : invisible jusqu'au focus clavier */
.skip-link {
  position: absolute; left: 16px; top: 12px; z-index: 200;
  padding: 10px 16px; border-radius: var(--radius-small);
  background: var(--color-sombre); color: var(--color-blanc); font-weight: 540;
  transform: translateY(-200%);
  transition: transform 0.2s var(--ease-out);
}
.skip-link:focus { transform: none; }

/* ---------- Bandeau annonce ---------- */
.announce {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 16px;
  background: var(--color-fonce);
  color: var(--color-blanc);
  font-size: var(--text-body-sm);
}
.announce__text { margin: 0; }
.announce__dot {
  flex: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-60);
  box-shadow: 0 0 0 4px rgba(176, 137, 244, 0.25);
}
.announce__link {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-pill);
  padding: 2px 12px;
  transition: background 0.2s ease;
}
.announce__link:hover { background: rgba(255, 255, 255, 0.12); }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.header.is-scrolled { border-bottom-color: var(--border); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 24px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
/* Logo = favicon (assets/brand/kromadev-logo.svg) : l'ours en dégradé violet sur tuile sombre. */
.logo__mark { width: 30px; height: 30px; flex: none; display: block; }
:root[data-theme="dark"] .logo__tile,
.logo--light .logo__tile { fill: var(--color-accent); }
:root[data-theme="dark"] .logo__chevron,
.logo--light .logo__chevron { stroke: #1c0f33; }
.logo__accent { color: var(--color-accent); }
/* Contraste AA (4,5:1) : dans le header translucide, « Dev » passe un ton plus foncé
   (#6a2bd9, couleur de survol des boutons) pour rester lisible au-dessus des zones sombres ;
   en thème sombre, violet clair. */
.header .logo__accent { color: var(--primary-hover); }
:root[data-theme="dark"] .logo__accent { color: var(--accent-60); }
.logo--light { color: var(--color-blanc); }

.nav { display: flex; gap: 32px; }
.nav a { font-weight: 460; transition: color 0.2s ease; }
.nav a:hover { color: var(--color-accent); }

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

.burger {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-small);
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: 11px; right: 11px;
  top: calc(50% - 0.8px);
  height: 1.6px;
  background: var(--text);
  transition: transform 0.3s var(--ease-out);
}
/* Animation en transform uniquement (plus de « top » animé) */
.burger span:first-child { transform: translateY(-4px); }
.burger span:last-child { transform: translateY(4px); }
.burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  /* Halos : ne couper qu'à l'horizontale (pas de défilement latéral), pour qu'ils débordent
     en fondu sous l'en-tête et sur la section suivante au lieu de s'arrêter net. */
  overflow-x: clip;
  overflow-y: visible;
  padding: 120px 0 160px;
  text-align: center;
}
.hero__atmos {
  position: absolute;
  inset: -160px 0 -180px;
  z-index: -1;
  /* Nuages ronds de taille fixe (px) : en % de la largeur, les halos devenaient des bandes
     plates au bas presque droit sur grand écran (effet « coupé net »). */
  background:
    radial-gradient(560px 440px at 16% 34%, rgba(176, 137, 244, 0.5), transparent 70%),
    radial-gradient(440px 360px at 30% 64%, rgba(124, 59, 237, 0.3), transparent 70%),
    radial-gradient(520px 420px at 84% 30%, rgba(124, 59, 237, 0.42), transparent 70%),
    radial-gradient(420px 340px at 70% 66%, rgba(150, 98, 241, 0.26), transparent 70%),
    radial-gradient(700px 380px at 52% 78%, rgba(203, 177, 248, 0.38), transparent 72%),
    radial-gradient(380px 320px at 95% 74%, rgba(150, 98, 241, 0.3), transparent 70%),
    radial-gradient(360px 300px at 4% 70%, rgba(124, 59, 237, 0.24), transparent 70%);
  /* Pas de filter: blur() : les dégradés sont déjà flous, et un flou sur un calque
     animé plein écran coûte cher au GPU à chaque frame. Seul transform est animé. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 50%, transparent 92%);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 50%, transparent 92%);
  animation: drift 18s ease-in-out infinite alternate;
  will-change: transform;
  pointer-events: none;
}
@keyframes drift {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.08) translate(-2%, 2%); }
}

.hero__content { position: relative; z-index: 2; }
.hero .display { max-width: 900px; margin: 24px auto 24px; }
/* Mot-clé SEO dans le H1 : la pastille garde son look, le titre accrocheur reste dessous */
.hero .hero__title { margin-top: 0; }
.hero__title .hero__kicker {
  display: table;
  margin: 0 auto 24px;
  line-height: 1.5;
  letter-spacing: normal;
}
.hero__lead {
  max-width: 560px;
  margin: 0 auto 36px;
  font-size: 18px;
  color: var(--text-muted);
  letter-spacing: -0.008em;
}
.hero__ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--glass-soft);
  box-shadow: var(--shadow-subtle);
  color: var(--accent-text);
  font-size: var(--text-body-sm);
  font-weight: 540;
}

/* Cartes flottantes (glass)
   Fluidité : seules transform / translate / opacity sont animées, donc tout tourne
   sur le compositeur (plus de layout à chaque frame comme avec margin-top).
   - arrivée : opacity + transform (card-in), décalée pour démarrer après le premier rendu ;
   - flottement : propriété individuelle translate (float), indépendante de l'arrivée
     et de la rotation (rotate), donc aucune des trois ne s'écrase.
   Pas de backdrop-filter : le fond est déjà presque opaque, et un flou d'arrière-plan
   sous une carte qui bouge au-dessus d'un fond animé est recalculé à chaque frame. */
.float-card {
  position: absolute;
  z-index: 1;
  width: 240px;
  padding: 16px;
  border-radius: var(--radius-cards);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  text-align: left;
  font-size: var(--text-body-sm);
  animation:
    card-in 0.9s var(--ease-out) var(--in-delay, 0.25s) both,
    float 6s ease-in-out var(--float-delay, 0s) infinite;
  will-change: transform, translate, opacity;
}
.float-card p { margin: 0; }
.float-card--left { left: max(24px, calc(50% - 680px)); top: 56px; rotate: -3deg; }
/* Carte de droite au niveau du sous-titre et des boutons (plus étroits que le titre) pour ne jamais le chevaucher */
.float-card--right { right: max(24px, calc(50% - 680px)); top: 400px; --in-delay: 0.4s; --float-delay: -2s; }
.float-card--bottom {
  left: 0; right: 0; bottom: 32px;
  width: max-content; max-width: calc(100% - 32px);
  margin-inline: auto;
  display: flex; align-items: center; gap: 12px;
  --in-delay: 0.55s; --float-delay: -4s;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(28px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

.float-card__row { display: flex; align-items: center; gap: 8px; }
.float-card__meta { color: var(--text-muted); font-size: var(--text-caption); margin-top: 4px !important; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #2fbf71; }

.scores { display: flex; gap: 8px; margin-top: 10px; }
.score {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 0;
  border-radius: 10px;
  background: var(--soft-fill);
}
.score b { font-size: 20px; font-weight: 600; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.score span { font-size: 11px; color: var(--text-muted); }

.avatars { display: flex; }
.avatars span {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -8px;
  font-size: 11px; font-weight: 700; color: #fff;
}
.avatars span:first-child { margin-left: 0; background: var(--color-fonce); }

/* ---------- Bande techno ---------- */
.stack { text-align: center; }
.stack .caption-title { margin-bottom: 20px; }
.stack__grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-cards);
  overflow: hidden;
}
.stack__grid li {
  padding: 24px 8px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  opacity: 0.75;
  border-left: 1px solid var(--border);
  transition: opacity 0.2s ease, color 0.2s ease;
}
.stack__grid li:first-child { border-left: 0; }
.stack__grid li:hover { opacity: 1; color: var(--color-accent); }

/* ---------- En-têtes de section ---------- */
.section__head { max-width: 720px; margin-bottom: 40px; }
.section__head .muted { margin-top: 16px; font-size: 18px; }
.section__head--row {
  max-width: none;
  display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}

/* ---------- Cartes ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-cards);
  padding: 24px;
}
.card p { color: var(--text-muted); }

.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.icon-chip {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--soft-fill);
  color: var(--color-accent);
  font-size: 18px;
}

/* ---------- Tabs ---------- */
.tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-tabs);
  overflow: hidden;
  margin-bottom: 16px;
}
.tab {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px;
  border: 0;
  border-left: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 540;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.tab:first-child { border-left: 0; }
.tab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tab:hover { background: var(--canvas); }
.tab.is-active { background: var(--selected-fill); color: var(--accent-text); }
.tab.is-active svg { stroke: var(--color-accent); }

.tab-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 40px;
  align-items: center;
}
.tab-panel__text p { font-size: 18px; margin: 16px 0 20px; }
.tab-panel.is-switching .tab-panel__text { animation: fadeUp 0.35s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.checklist { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.checklist li { position: relative; padding-left: 28px; }
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--soft-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' fill='none' stroke='%237C3BED' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;
}

.tab-panel__visual {
  position: relative;
  overflow: hidden;
  container-type: size;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  background:
    radial-gradient(60% 60% at 30% 30%, var(--accent-60), transparent 70%),
    radial-gradient(60% 60% at 80% 80%, var(--color-accent), transparent 70%),
    var(--color-fonce);
  display: grid; place-items: center;
  padding: 32px;
}

/* ---------- Visuels animés des services ----------
   Une scène par onglet. Sans la classe .is-playing (JS absent ou
   prefers-reduced-motion), chaque scène affiche son état final, immobile.
   main.js ajoute .is-playing pour jouer la séquence, puis .is-leaving pour
   la fondre avant de la rejouer. Uniquement transform et opacity. */
.scene {
  --s-surface: var(--surface);
  --s-soft: var(--accent-20);
  --s-mid: var(--accent-40);
  --s-title: var(--accent-60);
  display: none;
  position: relative;
  width: 100%; height: 100%;
  place-items: center;
  transition: opacity 0.4s ease;
}
:root[data-theme="dark"] .scene {
  --s-soft: rgba(203, 177, 248, 0.14);
  --s-mid: rgba(203, 177, 248, 0.3);
}
.scene.is-active { display: grid; grid-template-rows: minmax(0, 1fr); }
.scene.is-leaving { opacity: 0; }
/* Hors de l'écran : séquence figée là où elle en est (main.js), reprise au retour */
.scene.is-paused, .scene.is-paused * { animation-play-state: paused !important; }

@keyframes scene-build { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
@keyframes scene-pop {
  from { opacity: 0; transform: scale(0.5); }
  70% { opacity: 1; transform: scale(1.06); }
}

/* Sites web */
.sw-browser {
  display: flex; flex-direction: column;
  width: 100%; max-width: 420px;
  height: min(100%, 300px);
  background: var(--s-surface);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 48px -24px rgba(14, 9, 22, 0.7);
}
.sw-bar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.sw-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--s-mid); }
.sw-page { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 9px; padding: 14px; }
.sw-page > span { flex: none; border-radius: 6px; background: var(--s-soft); }
.sw-nav { height: 8px; }
.sw-page .sw-title { height: 12px; width: 62%; background: var(--s-title); }
.sw-text { height: 8px; width: 44%; }
.sw-page .sw-cta { height: 16px; width: 28%; border-radius: var(--radius-pill); background: var(--color-accent); }
.sw-products { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 2px; }
.sw-product { position: relative; border-radius: 8px; background: var(--s-soft); }
.sw-product i {
  position: absolute; right: 6px; top: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--color-accent);
}
.sw-product i::before {
  content: "+";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--color-blanc); font: 700 12px/1 var(--font);
}
.sw-cart {
  position: absolute; right: 2%; bottom: 4%;
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 10px 24px -8px rgba(14, 9, 22, 0.6);
}
.sw-cart svg { width: 24px; height: 24px; fill: none; stroke: var(--color-blanc); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sw-badge {
  position: absolute; top: -4px; right: -4px;
  width: 20px; height: 20px; border-radius: 50%;
  overflow: hidden;
  background: var(--color-blanc); color: var(--color-fonce);
  font: 700 12px/20px var(--font); text-align: center;
}
.sw-count { display: block; transform: translateY(-40px); }
.sw-count b { display: block; height: 20px; }

.scene.is-playing :is(.sw-page > span, .sw-product) { animation: scene-build 0.5s var(--ease-out) var(--d) both; }
.scene.is-playing .sw-product i { animation: sw-press 0.4s ease var(--add); }
.scene.is-playing .sw-cart { animation: sw-cart 4.4s ease both; }
.scene.is-playing .sw-badge { animation: sw-badge 4.4s ease both; }
.scene.is-playing .sw-count { animation: sw-count 4.4s ease both; }
@keyframes sw-press { 50% { transform: scale(0.7); } }
@keyframes sw-cart {
  0%, 36% { opacity: 0; transform: scale(0.6); }
  42%, 52% { opacity: 1; transform: scale(1); }
  55% { transform: scale(1.15); }
  59%, 70% { transform: scale(1); }
  73% { transform: scale(1.15); }
  77%, 88% { transform: scale(1); }
  91% { transform: scale(1.15); }
  95%, 100% { transform: scale(1); }
}
@keyframes sw-badge {
  0%, 53% { opacity: 0; transform: scale(0.4); }
  57%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes sw-count {
  0%, 71% { transform: translateY(0); }
  74%, 89% { transform: translateY(-20px); }
  92%, 100% { transform: translateY(-40px); }
}

/* Applications web */
.sa-board {
  display: grid; grid-template-columns: 34px 1fr;
  width: 100%; max-width: 440px;
  height: min(100%, 300px);
  background: var(--s-surface);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 48px -24px rgba(14, 9, 22, 0.7);
}
.sa-side { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0; background: var(--color-sombre); }
.sa-side i { width: 12px; height: 12px; border-radius: 4px; background: rgba(237, 231, 249, 0.22); }
.sa-side i:first-child { background: var(--accent-60); }
.sa-main { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; min-height: 0; padding: 12px; }
.sa-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sa-kpi { display: grid; gap: 6px; padding: 8px; border-radius: 8px; background: var(--s-soft); }
.sa-kpi i { height: 5px; width: 60%; border-radius: 3px; background: var(--s-mid); }
.sa-kpi b { height: 9px; width: 80%; border-radius: 3px; background: var(--color-accent); transform-origin: left; }
.sa-chart { position: relative; min-height: 0; overflow: hidden; }
.sa-reveal { position: absolute; inset: 0; overflow: hidden; }
.sa-reveal svg { display: block; width: 100%; height: 100%; }
.sa-area { fill: var(--s-soft); }
.sa-line { fill: none; stroke: var(--color-accent); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sa-line--alt { stroke: var(--s-title); stroke-width: 2; }
.sa-dot {
  position: absolute; right: 1px; top: calc(10% - 5px);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(124, 59, 237, 0.25);
}
.sa-bars { display: flex; align-items: end; gap: 6px; height: 34px; }
.sa-bars i { flex: 1; height: 100%; border-radius: 3px; background: var(--s-mid); transform: scaleY(var(--h)); transform-origin: bottom; }
.sa-bars i:nth-child(6) { background: var(--color-accent); }

.scene.is-playing .sa-kpi { animation: scene-build 0.5s var(--ease-out) var(--d) both; }
.scene.is-playing .sa-kpi b { animation: sa-grow 0.8s var(--ease-out) calc(var(--d) + 0.2s) both; }
/* La courbe se dévoile de gauche à droite : le cadre glisse vers la droite
   pendant que le dessin glisse d'autant vers la gauche, il reste donc immobile. */
.scene.is-playing .sa-reveal { animation: sa-slide 1.4s ease-in-out 0.5s both; }
.scene.is-playing .sa-reveal svg { animation: sa-slide-back 1.4s ease-in-out 0.5s both; }
.scene.is-playing .sa-dot { animation: scene-pop 0.4s ease 1.9s both; }
.scene.is-playing .sa-bars i { animation: sa-bar 0.6s var(--ease-out) var(--d) both; }
@keyframes sa-grow { from { transform: scaleX(0); } }
@keyframes sa-slide { from { transform: translateX(-100%); } }
@keyframes sa-slide-back { from { transform: translateX(100%); } }
@keyframes sa-bar { from { transform: scaleY(0); } }

/* Mobile */
.sm-phone {
  position: relative;
  height: min(100%, 330px);
  aspect-ratio: 9 / 18;
  padding: 7px;
  border-radius: 26px;
  background: var(--color-sombre);
  box-shadow: 0 24px 48px -20px rgba(14, 9, 22, 0.8), inset 0 0 0 1px rgba(237, 231, 249, 0.14);
}
.sm-screen { position: relative; height: 100%; overflow: hidden; border-radius: 20px; background: var(--s-surface); }
.sm-feed { display: grid; gap: 8px; padding: 18px 10px 44px; }
.sm-feed > span { border-radius: 6px; background: var(--s-soft); }
.sm-feed .sm-head { height: 9px; width: 50%; background: var(--s-title); }
.sm-card { aspect-ratio: 2 / 1; }
.sm-feed .sm-card--hero { aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--color-accent), var(--color-fonce)); }
.sm-feed .sm-row { height: 7px; width: 85%; background: var(--s-mid); }
.sm-feed .sm-row + .sm-row { width: 55%; }
.sm-tabbar {
  position: absolute; left: 7px; right: 7px; bottom: 7px;
  display: flex; justify-content: space-around; align-items: center;
  height: 30px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 20px 20px;
  background: var(--s-surface);
}
.sm-tabbar i { width: 8px; height: 8px; border-radius: 50%; background: var(--s-mid); }
.sm-tabbar i:first-child { background: var(--color-accent); }
.sm-finger {
  position: absolute; left: calc(50% - 11px); bottom: 28%;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid var(--color-accent);
  opacity: 0;
}
.scene.is-playing .sm-feed { animation: sm-scroll 6s ease-in-out both; }
.scene.is-playing .sm-finger { animation: sm-swipe 6s ease-in-out both; }
@keyframes sm-scroll {
  0%, 15% { transform: translateY(0); }
  35%, 55% { transform: translateY(-20%); }
  75%, 100% { transform: translateY(-40%); }
}
@keyframes sm-swipe {
  0%, 12% { opacity: 0; transform: translateY(0); }
  15% { opacity: 1; transform: translateY(0); }
  33% { opacity: 1; transform: translateY(-60px); }
  37%, 52% { opacity: 0; transform: translateY(-60px); }
  53% { opacity: 0; transform: translateY(0); }
  55% { opacity: 1; transform: translateY(0); }
  73% { opacity: 1; transform: translateY(-60px); }
  77%, 100% { opacity: 0; transform: translateY(-60px); }
}

/* Design UI/UX */
.scene--design.is-active { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.sd-canvas {
  position: relative;
  justify-self: center;
  height: min(100%, 290px);
  aspect-ratio: 4 / 3;
  max-width: 100%;
  border-radius: 12px;
  background: radial-gradient(var(--s-mid) 1px, transparent 1.5px) 0 0 / 14px 14px, var(--s-surface);
  box-shadow: 0 24px 48px -24px rgba(14, 9, 22, 0.7);
}
.sd-el { position: absolute; border-radius: 6px; outline: 1.5px dashed transparent; }
.sd-el--title { left: 10%; top: 12%; width: 55%; height: 9%; background: var(--s-title); }
.sd-el--text { left: 10%; top: 27%; width: 40%; height: 18%; background: repeating-linear-gradient(var(--s-mid) 0 6px, transparent 6px 12px); }
.sd-el--img { left: 58%; top: 27%; width: 32%; height: 42%; border-radius: 8px; background: linear-gradient(135deg, var(--color-accent), var(--color-fonce)); }
.sd-el--btn { left: 10%; top: 56%; width: 26%; height: 11%; border-radius: var(--radius-pill); background: var(--color-accent); }
/* Le rail couvre tout le plan de travail : ses translate en % suivent donc la taille du plan. */
.sd-track { position: absolute; inset: 0; transform: translate(68%, 78%); pointer-events: none; }
.sd-cursor {
  display: block; width: 22px; height: 22px;
  fill: var(--color-blanc); stroke: var(--color-sombre); stroke-width: 1.5; stroke-linejoin: round;
  transform-origin: 20% 10%;
}
.sd-swatches { display: grid; gap: 8px; align-content: center; }
.sd-swatches i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(237, 231, 249, 0.5); }
.sd-swatches i:nth-child(1) { background: var(--color-sombre); }
.sd-swatches i:nth-child(2) { background: var(--color-fonce); }
.sd-swatches i:nth-child(3) { background: var(--color-accent); }
.sd-swatches i:nth-child(4) { background: var(--color-clair); }

.scene.is-playing .sd-el { animation: scene-pop 0.45s var(--ease-out) var(--d) both; }
.scene.is-playing .sd-track { animation: sd-move 5s ease-in-out both; }
.scene.is-playing .sd-cursor { animation: sd-click 5s linear both; }
@keyframes sd-move {
  0% { transform: translate(85%, 88%); }
  16%, 20% { transform: translate(30%, 15%); }
  36%, 40% { transform: translate(24%, 34%); }
  56%, 60% { transform: translate(72%, 46%); }
  76%, 80% { transform: translate(20%, 60%); }
  100% { transform: translate(68%, 78%); }
}
@keyframes sd-click {
  0%, 16%, 20%, 36%, 40%, 56%, 60%, 76%, 80%, 100% { transform: scale(1); }
  18%, 38%, 58%, 78% { transform: scale(0.8); }
}

/* ---------- Bande sombre ---------- */
.dark-band {
  margin-top: var(--section-gap);
  background: var(--dark-band);
  color: var(--color-blanc);
  padding: 96px 0;
  overflow: hidden;
}
.dark-band__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.dark-band__text > p { color: rgba(255, 255, 255, 0.8); font-size: 18px; margin: 24px 0 32px; }

.dark-band__art { position: relative; min-height: 460px; }
.geo { position: absolute; border-radius: 6px; }
.geo--1 { inset: 4% 30% 40% 4%; background: rgba(176, 137, 244, 0.5); }
.geo--2 { inset: 22% 6% 22% 26%; background: rgba(124, 59, 237, 0.55); mix-blend-mode: screen; }
.geo--3 { inset: 56% 44% 2% 12%; background: rgba(229, 216, 251, 0.35); }
.geo--4 { inset: 10% 2% 66% 62%; background: rgba(14, 9, 22, 0.5); border: 1px solid rgba(255,255,255,0.25); }
.script {
  position: absolute;
  font-family: var(--font-script);
  font-size: 34px;
  color: #fff;
  transform: rotate(-6deg);
}
.script--1 { top: 44%; left: 8%; }
.script--2 { bottom: 8%; right: 6%; transform: rotate(4deg); color: var(--accent-20); }

.steps { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 4px; }
.steps li {
  display: flex; gap: 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.steps b { font-size: 14px; font-weight: 600; color: var(--accent-60); font-variant-numeric: tabular-nums; padding-top: 2px; }
.steps strong { display: block; font-weight: 600; }
.steps span { color: rgba(255, 255, 255, 0.7); font-size: 15px; }

/* ---------- Réalisations ---------- */
.project { padding: 12px 12px 20px; }
.project > :not(.project__thumb) { padding: 0 8px; }
.project .caption-title { margin-top: 16px; }
.project__thumb {
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  display: flex; align-items: end;
  padding: 16px;
  transition: transform 0.35s ease;
}
.project:hover .project__thumb { transform: scale(1.015); }
.project__thumb span {
  background: var(--glass);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 540;
}
.project__thumb--a { background: linear-gradient(135deg, var(--color-fonce), var(--color-accent)); }
.project__thumb--b { background: linear-gradient(135deg, var(--accent-40), var(--accent-80)); }
.project__thumb--c { background: linear-gradient(135deg, var(--color-sombre), var(--color-fonce) 60%, var(--accent-80)); }

/* Carte cliquable (vraie réalisation) : même structure visuelle que les autres cartes */
.project > .project__link { display: block; padding: 0; color: inherit; text-decoration: none; }
.project__link > :not(.project__thumb) { padding: 0 8px; }
.project__link .caption-title { margin-top: 16px; }
.project__link:hover .link { background-size: 100% 1px; }
.project__link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 10px; }
.project__thumb--img { position: relative; overflow: hidden; background: var(--soft-fill); }
.project__thumb--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.project__thumb--img span { position: relative; }
.project__link .link { margin: 4px 8px 0; padding: 6px 0; }

/* ---------- Bandeau gradient ---------- */
.gradient-band {
  margin-top: var(--section-gap);
  border-radius: 24px;
  padding: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  background:
    radial-gradient(50% 80% at 68% 50%, rgba(124, 59, 237, 0.55), transparent 70%),
    radial-gradient(40% 70% at 93% 50%, rgba(150, 98, 241, 0.6), transparent 70%),
    radial-gradient(60% 60% at 50% 98%, rgba(203, 177, 248, 0.8), transparent 70%),
    radial-gradient(50% 60% at 10% 20%, var(--gradient-glow), transparent 70%),
    var(--gradient-base);
}
.gradient-band .heading-lg { font-size: 48px; }

/* ---------- Constat : récit au défilement ----------
   Par défaut (sans JS, prefers-reduced-motion ou écran trop bas) : les 4 étapes
   s'affichent l'une sous l'autre. Avec .is-enhanced (main.js, « Récit #constat »),
   la scène reste collée sous le header et le défilement fait passer d'une étape à
   l'autre ; --p (0 → 1) remplit la barre de progression. Uniquement transform/opacity. */
.story {
  --story-top: 65px; /* hauteur du header collant */
  --sv-soft: var(--accent-20);
  --sv-mid: var(--accent-40);
}
:root[data-theme="dark"] .story {
  --sv-soft: rgba(203, 177, 248, 0.14);
  --sv-mid: rgba(203, 177, 248, 0.3);
}
.story__progress { display: none; }
.story__steps { display: grid; gap: 16px; }
.story__step {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  padding: 40px;
  border: 1px solid var(--border); border-radius: var(--radius-cards);
  background: var(--surface);
}
.story__kicker { font-size: var(--text-caption); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-text); }
.story__text .heading-sm { margin: 12px 0 16px; }
.story__desc { font-size: 18px; color: var(--text-muted); }
.story__list { margin: 20px 0 0; gap: 12px; }
.story__list li { color: var(--text-muted); }
.story__list strong { color: var(--text); font-weight: 600; }
.story__visual {
  display: grid; place-items: center;
  aspect-ratio: 4 / 3;
  padding: 28px;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 30% 30%, var(--accent-60), transparent 70%),
    radial-gradient(60% 60% at 80% 80%, var(--color-accent), transparent 70%),
    var(--color-fonce);
}

/* Mode récit */
.story.is-enhanced { height: calc(100svh - var(--story-top) + 240vh); }
.story.is-enhanced .story__stage {
  position: sticky; top: var(--story-top);
  display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 48px; align-items: center;
  height: calc(100svh - var(--story-top));
  padding-block: 24px;
}
.story.is-enhanced .story__progress { display: block; position: relative; }
.story__progress ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; }
.story__progress li { display: flex; align-items: center; gap: 14px; color: var(--text-muted); font-weight: 540; transition: color 0.3s ease; }
.story__progress b {
  position: relative; z-index: 1;
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 13px; font-weight: 700;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.story__progress li.is-done { color: var(--text); }
.story__progress li.is-done b { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-blanc); }
.story__progress::before,
.story__fill { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; background: var(--border); }
.story__fill { background: var(--color-accent); transform-origin: top; transform: scaleY(var(--p, 0)); }
.story.is-enhanced .story__steps { position: relative; height: 100%; max-height: 560px; }
.story.is-enhanced .story__step {
  position: absolute; inset: 0;
  padding: 0; border: 0; background: none;
  opacity: 0; transform: translateY(48px);
  transition: opacity 0.45s ease, transform 0.6s var(--ease-out);
}
.story.is-enhanced .story__step.is-past { transform: translateY(-48px); }
.story.is-enhanced .story__step.is-active { opacity: 1; transform: none; }
.story.is-enhanced .story__text .heading-sm { font-size: 36px; }

/* Illustrations (état final par défaut ; animées seulement à l'étape affichée) */
.sv-card {
  position: relative;
  display: grid; gap: 10px;
  width: 100%; max-width: 340px;
  padding: 14px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 24px 48px -24px rgba(14, 9, 22, 0.7);
  font-size: 13px;
}
.sv-card svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sv-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sv-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text-muted); }
.sv-search svg { width: 16px; height: 16px; flex: none; }
.sv-results li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; background: var(--sv-soft); }
.sv-results b, .sv-spam b { font-weight: 600; }
.sv-results i { width: 40%; height: 6px; border-radius: 3px; background: var(--sv-mid); }
.sv-results .sv-you { border: 1px dashed var(--sv-mid); background: none; color: var(--text-muted); }
.sv-you b { font-weight: 540; }
.sv-you span { font-weight: 700; color: var(--accent-text); }

.sv-bar { display: flex; gap: 5px; }
.sv-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--sv-mid); }
.sv-page { position: relative; display: grid; gap: 8px; align-content: start; min-height: 130px; padding-top: 4px; }
.sv-page span { height: 9px; width: 80%; border-radius: 5px; background: var(--sv-soft); }
.sv-page span:first-child { width: 55%; background: var(--sv-mid); }
.sv-page span:last-of-type { width: 68%; }
.sv-page em { position: absolute; right: 0; bottom: 0; padding: 2px 6px; border-radius: var(--radius-pill); background: var(--sv-soft); color: var(--text-muted); font: 9px/1.4 var(--font); }
/* Visiteurs : le rail couvre la largeur de la carte, ses translate en % la suivent donc. */
.sv-visitor { position: absolute; left: 14px; right: 14px; top: var(--y); height: 0; transform: translateX(var(--x)); }
.sv-visitor i { position: absolute; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-60); box-shadow: 0 0 0 3px var(--surface); }
.sv-exit { position: absolute; right: 12px; top: calc(50% - 11px); width: 22px; height: 22px; color: var(--text-muted); }
.sv-chip { justify-self: start; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--danger-fill); color: var(--danger-text); font-weight: 700; font-size: 12px; }

.sv-url { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--sv-soft); color: var(--text-muted); overflow: hidden; white-space: nowrap; }
.sv-warn { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--danger-fill); color: var(--danger-text); font-weight: 700; }
.sv-warn svg, .sv-lock svg { width: 14px; height: 14px; }
.sv-spam li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border); }
.sv-spam svg { width: 18px; height: 18px; flex: none; color: var(--danger-text); }
.sv-spam i { flex: 1; height: 6px; border-radius: 3px; background: var(--sv-soft); }
.sv-lock { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-accent); color: var(--color-blanc); }
.sv-url--safe { color: var(--text); font-weight: 540; }
.sv-wins li { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 8px; background: var(--sv-soft); font-weight: 600; }
.sv-wins i { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--color-accent); }
.sv-wins i::after { content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 9px; border: solid var(--color-blanc); border-width: 0 2px 2px 0; transform: rotate(45deg); }

.story.is-enhanced .is-active :is(.sv-results li, .sv-spam li) { animation: sv-in 0.5s var(--ease-out) var(--d) both; }
.story.is-enhanced .is-active .sv-wins li { animation: sv-pop 0.5s var(--ease-out) var(--d) both; }
.story.is-enhanced .is-active .sv-lock { animation: sv-pop 0.5s var(--ease-out) both; }
.story.is-enhanced .is-active .sv-visitor { animation: sv-walk 3.2s ease-in-out var(--d) infinite both; }
.story.is-enhanced .is-active .sv-chip { animation: sv-pop 0.5s var(--ease-out) 1.6s both; }
.story.is-enhanced .is-active .sv-warn { animation: sv-shake 2.6s ease-in-out 0.6s infinite; }
@keyframes sv-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes sv-pop {
  from { opacity: 0; transform: scale(0.6); }
  70% { opacity: 1; transform: scale(1.05); }
}
@keyframes sv-walk {
  0% { opacity: 0; transform: translateX(0); }
  15% { opacity: 1; }
  45%, 60% { opacity: 1; transform: translateX(45%); }
  100% { opacity: 0; transform: translateX(92%); }
}
@keyframes sv-shake {
  0%, 70%, 100% { transform: rotate(0); }
  75% { transform: rotate(-5deg); }
  80% { transform: rotate(5deg); }
  85% { transform: rotate(-3deg); }
  90% { transform: rotate(3deg); }
}

@media (max-width: 900px) {
  .story__step { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .story__visual { aspect-ratio: 16 / 10; padding: 20px; }
  .story.is-enhanced .story__stage { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 20px; padding-block: 16px; }
  /* Progression en ligne au-dessus de l'étape */
  .story__progress ol { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .story__progress li { flex-direction: column; gap: 6px; font-size: 12px; }
  .story__progress::before,
  .story__fill { left: 12.5%; right: 12.5%; top: 15px; bottom: auto; width: auto; height: 2px; }
  .story__fill { transform-origin: left; transform: scaleX(var(--p, 0)); }
  .story.is-enhanced .story__steps { max-height: none; }
  .story.is-enhanced .story__step { gap: 20px; align-content: center; }
  .story.is-enhanced .story__text .heading-sm { font-size: 26px; }
  .story.is-enhanced .story__visual { aspect-ratio: auto; padding: 16px; }
  .story.is-enhanced :is(.sv-results, .sv-spam, .sv-wins) { gap: 6px; }
  .story.is-enhanced :is(.sv-results li, .sv-spam li, .sv-wins li) { padding-block: 7px; }
  .story.is-enhanced .sv-page { min-height: 80px; }
}
@media (max-width: 640px) {
  .story__desc { font-size: 16px; }
  .story__visual { border-radius: 14px; }
  .sv-card { max-width: 300px; padding: 12px; font-size: 12px; }
  .sv-page { min-height: 90px; }
  /* La liste de la solution suffit : pas d'illustration sur petit écran */
  .story__step--solution .story__visual { display: none; }
  .story.is-enhanced .story__list { margin-top: 14px; gap: 8px; }
  .story.is-enhanced .story__list li { font-size: 15px; }
}
/* Téléphone à l'écran bas : le texte d'abord, l'illustration n'a plus la place */
@media (max-width: 900px) and (max-height: 700px) {
  .story.is-enhanced .story__visual { display: none; }
}

.constat__cta {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-top: 40px;
  text-align: center;
}
.constat__cta p { margin: 0; font-size: var(--text-body-sm); }

/* Comparateur « Sans / Avec KromaDev »
   Sans JavaScript : deux cartes côte à côte. Avec (.is-ready, main.js) : cartes superposées,
   la carte « Avec » est découpée à partir du curseur (--pos). Les rangées des deux cartes
   partagent la même grille (subgrid) pour rester alignées quand un texte passe à la ligne. */
.compare { margin-top: 64px; }
.compare__head {
  display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap;
  gap: 8px 24px;
  margin-bottom: 20px;
}
.compare__hint { margin: 0; font-size: var(--text-body-sm); }
.compare:not(.is-ready) .compare__hint { display: none; }
.compare__note { margin: 12px 0 0; font-size: var(--text-caption); color: var(--text-muted); }

.compare__stage {
  --pos: 50%;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.compare__card {
  --line: var(--border);
  --soft: var(--text-muted);
  --meter-track: var(--soft-fill);
  --meter-fill: var(--accent-40);
  display: grid;
  align-content: start;
  padding: 28px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-cards);
  background: var(--surface);
}
.compare__card--after {
  --line: rgba(255, 255, 255, 0.14);
  --soft: rgba(255, 255, 255, 0.72);
  --meter-track: rgba(255, 255, 255, 0.14);
  --meter-fill: var(--accent-60);
  border-color: transparent;
  color: var(--color-blanc);
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(124, 59, 237, 0.55), transparent 70%),
    radial-gradient(50% 60% at 80% 100%, rgba(176, 137, 244, 0.25), transparent 70%),
    var(--color-fonce);
}
.compare__title {
  margin: 0 0 8px;
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soft);
}
.compare__row {
  display: grid;
  /* Deux moitiés égales : au repos (curseur au centre), le libellé « Sans » et la valeur
     « Avec » restent entiers de part et d'autre du curseur */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 10px 32px;
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.compare__label { font-size: var(--text-body-sm); color: var(--soft); }
.compare__value { font-weight: 600; text-align: right; }
.compare__meter {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 6px;
  background:
    linear-gradient(var(--meter-fill), var(--meter-fill)) 0 0 / var(--level, 0%) 100% no-repeat,
    var(--meter-track);
}

/* Mode curseur */
.compare.is-ready .compare__stage {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(6, auto);
  gap: 0;
  border-radius: var(--radius-cards);
  overflow: hidden;
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.compare.is-ready .compare__card { grid-area: 1 / 1 / -1 / -1; grid-template-rows: subgrid; }
.compare.is-ready .compare__card--after {
  clip-path: inset(0 0 0 var(--pos));
  transition: clip-path 0.25s var(--ease-out);
}
.compare.is-ready .compare__card--after .compare__title { text-align: right; }

.compare__handle { display: none; }
.compare.is-ready .compare__handle {
  display: block;
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  z-index: 2;
  width: 48px;
  margin-left: -24px;
  transition: left 0.25s var(--ease-out);
}
.compare__handle::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--color-accent);
}
.compare__knob {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  background: var(--color-blanc);
  color: var(--color-accent);
  box-shadow: 0 8px 20px -8px rgba(14, 9, 22, 0.5);
  transition: scale 0.2s ease;
}
.compare__knob svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.compare__handle:hover .compare__knob,
.compare__stage.is-dragging .compare__knob { scale: 1.08; }
.compare__handle:focus-visible { outline: none; }
.compare__handle:focus-visible .compare__knob { outline: 2px solid var(--accent-80); outline-offset: 3px; }
/* Pendant le glisser, le curseur suit le doigt sans retard */
.compare__stage.is-dragging .compare__card--after,
.compare__stage.is-dragging .compare__handle { transition: none; }

@media (max-width: 640px) {
  .compare { margin-top: 48px; }
  .compare__stage { grid-template-columns: 1fr; }
  .compare__card { padding: 20px 18px; }
  .compare__row { gap: 8px 36px; padding: 12px 0; }
  .compare__value { font-size: 15px; }
  .constat__cta .btn { width: 100%; }
}

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.contact__intro .muted { margin: 20px 0 32px; font-size: 18px; }
.contact__info { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.contact__info li { display: grid; gap: 4px; }
/* Très petits écrans : les colonnes peuvent rétrécir, l'adresse email passe à la ligne */
.contact > * { min-width: 0; }
.contact__info a { overflow-wrap: anywhere; }

.form { display: grid; gap: 18px; padding: 32px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: grid; gap: 6px; font-size: var(--text-body-sm); font-weight: 540; }
.form input[type="text"],
.form input[type="email"],
.form select,
.form textarea {
  font: inherit;
  font-size: 15px;
  font-weight: 460;
  color: var(--text);
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  resize: vertical;
}
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(124, 59, 237, 0.18);
}
.form .is-invalid { border-color: var(--danger) !important; }
.form .is-invalid:focus { box-shadow: 0 0 0 3px var(--danger-ring); }

/* Champ avec message d'erreur / suggestion sous la saisie (email) */
.form__row { align-items: start; }
.form__field { display: grid; gap: 6px; }
.form__field > label { font-size: var(--text-body-sm); font-weight: 540; }
.form .field-error { margin: 0; font-size: var(--text-body-sm); line-height: 1.45; font-weight: 500; color: var(--danger-text); }
.form .field-error:empty { margin-top: -6px; }
.form .field-error:not(:empty)::before { content: "⚠\FE0E"; margin-right: 6px; }
.form .field-suggest { margin: 0; font-size: var(--text-body-sm); line-height: 1.45; color: var(--text); }
.form .field-suggest[hidden] { display: none; }
.field-suggest__btn {
  font: inherit;
  font-weight: 650;
  color: var(--link);
  background: none;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  text-align: left;
}
.field-suggest__btn:hover { text-decoration-thickness: 2px; }
.field-suggest__btn:focus-visible { outline: 2px solid var(--accent-80); outline-offset: 2px; border-radius: 4px; }

.chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { font-size: var(--text-body-sm); font-weight: 540; margin-bottom: 8px; padding: 0; }
.chips label { display: block; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--canvas);
  font-weight: 460;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.chips input:checked + span { background: var(--selected-fill); border-color: var(--accent-text); color: var(--accent-text); }
.chips input:focus-visible + span { outline: 2px solid var(--accent-80); outline-offset: 2px; }

.form__note { font-size: var(--text-caption); text-align: center; margin: 0; }

/* Places disponibles, juste au-dessus du bouton d'envoi (valeurs : CONFIG dans main.js) */
.form .places {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  font-size: var(--text-body-sm);
  color: var(--text);
  text-align: center;
}
.places__dot {
  flex: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px var(--soft-fill);
}
.places.is-full .places__dot { background: var(--text-muted); }

/* Envoi du formulaire : pot de miel, état de chargement, message de retour */
.form__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form .btn:disabled { opacity: 0.75; cursor: progress; transform: none; }
.form.is-sending .btn::after {
  content: "";
  width: 14px; height: 14px; margin-left: 10px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  display: inline-block; vertical-align: -2px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.form__status { margin: 0; font-size: var(--text-body-sm); line-height: 1.5; border-radius: 10px; }
.form__status:empty { margin: -9px 0; }
.form__status--success,
.form__status--error { padding: 12px 14px 12px 16px; border-left: 4px solid; }
.form__status--success { background: var(--soft-fill); border-color: var(--color-accent); color: var(--accent-text); }
.form__status--error { background: var(--danger-fill); border-color: var(--danger); color: var(--danger-text); }

/* ---------- Footer ---------- */
.footer {
  margin-top: var(--section-gap);
  background: var(--footer);
  border-top: 1px solid var(--footer-border);
  color: var(--color-blanc);
  padding: 64px 0 32px;
}
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.footer__brand p { color: rgba(255, 255, 255, 0.7); margin-top: 16px; font-size: var(--text-body-sm); }
.footer__brand .footer__phone { margin-top: 8px; }
.footer h2 { font-size: 14px; font-weight: 700; margin-bottom: 16px; }
.footer__grid > div:not(.footer__brand) { display: grid; gap: 12px; align-content: start; }
.footer__grid a:not(.logo) { color: rgba(255, 255, 255, 0.7); font-size: 14px; transition: color 0.2s ease; }
.footer__grid a:not(.logo):hover { color: #fff; }
.footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-top: 64px; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translate(-50%, 20px);
  background: var(--toast-bg);
  color: #fff;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 100;
  max-width: calc(100% - 32px);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Bandeau cookies (consent.js) ----------
   Non bloquant, en bas à gauche (pleine largeur sur mobile). « Tout refuser » et
   « Tout accepter » ont exactement le même style (exigence CNIL). */
.consent {
  position: fixed;
  left: 24px; bottom: 24px;
  z-index: 90;
  width: min(480px, calc(100% - 48px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-cards);
  box-shadow: 0 18px 48px rgba(14, 9, 22, 0.18), 0 2px 6px rgba(14, 9, 22, 0.08);
  opacity: 0;
  translate: 0 16px;
  transition: opacity 0.35s var(--ease-out), translate 0.35s var(--ease-out);
}
.consent[hidden] { display: none; }
.consent.is-visible { opacity: 1; translate: none; }
:root[data-theme="dark"] .consent { box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5); border-color: rgba(203, 177, 248, 0.22); }
.consent__inner { padding: 22px 22px 20px; }
.consent__title { margin: 0 0 8px; font-size: var(--text-label-bold); font-weight: 650; letter-spacing: -0.01em; }
.consent__title:focus { outline: none; }
.consent__title:focus-visible { outline: 2px solid var(--accent-80); outline-offset: 3px; border-radius: 4px; }
.consent__desc { margin: 0 0 16px; font-size: var(--text-body-sm); line-height: 1.55; color: var(--text-muted); }
.consent__desc a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.consent__prefs { display: grid; gap: 10px; margin: 0 0 16px; }
.consent__prefs[hidden] { display: none; }
.consent__row { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--canvas); }
.consent__label { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; cursor: pointer; }
.consent__label input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--primary); cursor: pointer; }
.consent__label input:disabled { cursor: not-allowed; }
.consent__label input:disabled + span { cursor: default; }
.consent__hint { margin: 6px 0 0 30px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.consent__btn { flex: 1 1 0; min-width: 132px; background: var(--primary); color: var(--color-blanc); }
.consent__btn:hover { background: var(--primary-hover); }
.consent__btn[hidden] { display: none; }
.consent__save { flex-basis: 100%; }
.consent__more {
  flex-basis: 100%;
  padding: 6px 2px; border: 0; background: none;
  font: inherit; font-size: var(--text-body-sm); font-weight: 540; color: var(--link);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  justify-self: start; text-align: left;
}
.consent__more:hover { text-decoration-thickness: 2px; }
.consent__more:focus-visible { border-radius: 4px; }
/* Bouton « Gérer mes cookies » dans le pied de page : aspect d'un lien du footer */
.footer__consent {
  justify-self: start;
  padding: 0; border: 0; background: none;
  font: inherit; font-size: 14px; text-align: left;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer; transition: color 0.2s ease;
}
.footer__consent:hover { color: #fff; }
.footer__consent:focus-visible { border-radius: 4px; }
/* Le toast ne doit pas passer sous le bandeau */
.has-consent-banner .toast { bottom: auto; top: 88px; }
@media (max-width: 560px) {
  .consent { left: 12px; right: 12px; bottom: 12px; width: auto; max-height: calc(100dvh - 24px); }
  .consent__inner { padding: 18px 16px 16px; }
  .consent__btn { min-width: 0; }
}
@media (pointer: coarse) {
  .footer__consent { padding: 12px 0; }
  .consent__btn { height: 44px; }
}
@media print { .consent { display: none !important; } }

/* ---------- Reveal ----------
   Apparition au scroll en opacity + translate (propriété individuelle) : transform reste
   libre pour les survols (.plan, .project…). La liste de transitions reprend aussi celles
   des éléments concernés, pour ne pas écraser leurs effets de survol. */
.reveal { opacity: 0; translate: 0 16px; }
.reveal.is-in {
  opacity: 1; translate: none;
  transition:
    opacity 0.7s var(--ease-out) var(--reveal-delay, 0s),
    translate 0.7s var(--ease-out) var(--reveal-delay, 0s),
    transform 0.25s ease, border-color 0.25s ease;
}
.cards-3 > .reveal:nth-child(2), .pricing > .reveal:nth-child(2) { --reveal-delay: 0.08s; }
.cards-3 > .reveal:nth-child(3), .pricing > .reveal:nth-child(3) { --reveal-delay: 0.16s; }
.pricing > .reveal:nth-child(4) { --reveal-delay: 0.24s; }
.pricing > .reveal:nth-child(5) { --reveal-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; translate: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .float-card--left, .float-card--right { display: none; }
}

@media (max-width: 900px) {
  :root {
    --text-display: 44px;
    --text-heading-lg: 36px;
    --text-heading-sm: 24px;
    --section-gap: 72px;
  }
  /* Menu mobile : accroché sous le header (même quand le bandeau d'annonce est visible),
     ouvert/fermé en opacity + transform seulement. */
  .nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 16px 16px;
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--canvas);
    border-bottom: 1px solid var(--border);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s var(--ease-out), transform 0.3s var(--ease-out), visibility 0s linear 0.3s;
  }
  .nav.is-open {
    transform: none; opacity: 1; visibility: visible;
    transition: opacity 0.25s var(--ease-out), transform 0.3s var(--ease-out), visibility 0s;
  }
  .nav a { padding: 14px 8px; border-bottom: 1px solid var(--border); }
  .burger { display: block; }

  .stack__grid { grid-template-columns: repeat(3, 1fr); }
  .stack__grid li:nth-child(4) { border-left: 0; }
  .stack__grid li:nth-child(n+4) { border-top: 1px solid var(--border); }

  .tabs { grid-template-columns: repeat(2, 1fr); }
  .tab:nth-child(3) { border-left: 0; }
  .tab:nth-child(n+3) { border-top: 1px solid var(--border); }

  .tab-panel, .dark-band__inner, .contact { grid-template-columns: 1fr; }
  .tab-panel { padding: 24px; gap: 24px; }
  .cards-3 { grid-template-columns: 1fr; }
  .dark-band__art { min-height: 300px; }
  .gradient-band { padding: 40px 24px; }
  .gradient-band .heading-lg { font-size: 34px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .container { padding: 0 16px; }
  :root { --text-display: 38px; }
  .hero { padding: 72px 0 120px; }
  .header__actions .btn--sm { display: none; }
  .form__row { grid-template-columns: 1fr; }
  .form { padding: 20px; }
  .stack__grid { grid-template-columns: repeat(2, 1fr); }
  .stack__grid li:nth-child(odd) { border-left: 0; }
  .stack__grid li:nth-child(4) { border-left: 1px solid var(--border); }
  .stack__grid li:nth-child(n+3) { border-top: 1px solid var(--border); }
  .tab { padding: 12px 8px; font-size: 14px; }
  .float-card--bottom { font-size: 12px; white-space: nowrap; }
}
/* Écrans tactiles : zones de toucher d'au moins 44 px, sans changer le rendu à la souris */
@media (pointer: coarse) {
  .burger, .theme-toggle { width: 44px; height: 44px; }
  .announce__link { padding: 10px 14px; margin: -8px 0; }
  .chips span { padding: 11px 16px; }
  .footer__grid > div:not(.footer__brand) { gap: 0; }
  .footer__grid a:not(.logo) { padding: 12px 0; }
  .footer h2 { margin-bottom: 4px; }
  .legal-toc a { padding: 12px 10px; }
}
.icon-chip svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Bouton thème ---------- */
.theme-toggle {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-small);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.theme-toggle:hover { border-color: var(--accent-60); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ---------- Tarifs ---------- */
.pricing { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
/* 5 formules : 3 cartes sur la 1re ligne, 2 plus larges sur la 2de */
.pricing > .plan { grid-column: span 2; }
.pricing > .plan:nth-child(n+4) { grid-column: span 3; }

.plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: 28px 24px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.plan:hover { transform: translateY(-4px); border-color: var(--accent-60); }
.plan--popular {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-subtle);
  background:
    radial-gradient(120% 60% at 50% 0%, var(--soft-fill), transparent 70%),
    var(--surface);
}
.plan__badge {
  position: absolute; top: 16px; right: 16px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
}
.plan .icon-chip { margin-bottom: 20px; }
.plan__kicker { font-size: var(--text-caption); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--link); margin: 0; }
.plan h3 { font-size: 24px; letter-spacing: -0.014em; margin: 8px 0 8px; font-weight: 600; }
.plan__desc { font-size: 15px; min-height: 46px; }
.plan .checklist { margin: 12px 0 24px; font-size: 15px; flex: 1; }
.plan__price { border-top: 1px solid var(--border); padding-top: 20px; }
.plan__from { font-size: var(--text-caption); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 2px; }
.plan__amount {
  font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.plan__amount small { font-size: 18px; font-weight: 500; color: var(--text-muted); margin-left: 4px; letter-spacing: 0; }
.plan__range {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0 4px !important;
  font-size: 13px;
}
.plan__range i {
  flex: 1; height: 4px; border-radius: 4px; position: relative;
  background: linear-gradient(90deg, var(--accent-20), var(--color-accent), var(--accent-20));
  opacity: 0.8;
}
.plan__range i::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--color-accent);
  translate: -50% -50%;
}
.plan__was { font-size: 18px; font-weight: 500; color: var(--text-muted); margin-left: 6px; letter-spacing: 0; }
.plan__note { font-size: 13px; margin: 0 !important; }
.plan__note--offer { margin-top: 10px !important; color: var(--accent-text) !important; font-weight: 600; }
.plan .btn { margin-top: 20px; }

/* Maintenance (abonnement facultatif), sous les formules */
.maintenance {
  display: grid; grid-template-columns: minmax(200px, 1fr) 3fr; gap: 24px; align-items: start;
  margin-top: 16px;
}
.maintenance h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 6px; }
.maintenance h3 .muted { font-size: 15px; font-weight: 400; letter-spacing: 0; }
.maintenance__head p { margin: 0; font-size: 15px; }
.maintenance__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.maintenance__list li { display: flex; flex-direction: column; gap: 2px; padding-left: 16px; border-left: 2px solid var(--accent-60); font-size: 15px; }
.maintenance__price { font-weight: 600; color: var(--accent-text); font-variant-numeric: tabular-nums; }

.pricing-note {
  display: flex; gap: 16px; align-items: flex-start;
  margin-top: 24px;
  padding: 20px 24px;
  border-radius: var(--radius-cards);
  background: var(--soft-fill);
  border: 1px dashed var(--accent-60);
}
.pricing-note svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--color-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.pricing-note p { margin: 0; color: var(--text); }
.pricing-note p + p { margin-top: 6px; color: var(--text-muted); font-size: 15px; }

@media (max-width: 1100px) {
  .pricing { grid-template-columns: repeat(2, 1fr); }
  .pricing > .plan, .pricing > .plan:nth-child(n+4) { grid-column: auto; }
  .pricing > .plan:first-child { grid-column: 1 / -1; }
  .maintenance { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 640px) {
  .pricing { grid-template-columns: 1fr; }
  .plan__desc { min-height: 0; }
  .maintenance__list { grid-template-columns: 1fr; }
}

/* ---------- Pages légales ---------- */
.legal-hero { padding-top: 72px; padding-bottom: 40px; }
.legal-hero .heading-lg { margin: 20px 0 16px; }
.legal-hero .muted { font-size: 18px; max-width: 720px; margin: 0; }
.legal-hero__meta { margin-top: 20px !important; font-size: var(--text-body-sm) !important; }

.legal { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; }

.legal-toc { position: sticky; top: 88px; padding: 20px; max-height: calc(100vh - 112px); overflow-y: auto; }
.legal-toc .caption-title { margin-bottom: 12px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.legal-toc a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--radius-small);
  font-size: var(--text-body-sm);
  color: var(--text-muted);
  transition: background 0.2s ease, color 0.2s ease;
}
.legal-toc a:hover { background: var(--soft-fill); color: var(--accent-text); }

.legal-body { padding: 40px 48px; max-width: 820px; }
.legal-body section + section { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border); }
.legal-body h2 { font-size: var(--text-subheading); line-height: 1.2; letter-spacing: -0.018em; margin-bottom: 16px; font-weight: 600; }
.legal-body h3 { font-size: 18px; font-weight: 600; margin: 24px 0 8px; }
.legal-body p, .legal-body li, .legal-body dd { color: var(--text-muted); }
.legal-body strong { color: var(--text); font-weight: 600; }
.legal-body ul, .legal-body ol { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 6px; }
.legal-body a:not(.btn) { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal-body a:not(.btn):hover { text-decoration-thickness: 2px; }

.legal-dl { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; margin: 0 0 12px; border: 1px solid var(--border); border-radius: var(--radius-small); overflow: hidden; }
.legal-dl dt, .legal-dl dd { margin: 0; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 15px; }
.legal-dl dt { color: var(--text); font-weight: 600; background: var(--soft-fill); }
.legal-dl dt:first-of-type, .legal-dl dt:first-of-type + dd { border-top: 0; }

.legal-table-wrap { overflow-x: auto; margin: 0 0 12px; border: 1px solid var(--border); border-radius: var(--radius-small); }
.legal-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 10px 14px; border-top: 1px solid var(--border); }
.legal-table thead th { border-top: 0; background: var(--soft-fill); color: var(--text); font-weight: 600; }
.legal-table td { color: var(--text-muted); }

.legal-callout {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 16px 0; padding: 16px 18px;
  border-radius: var(--radius-small);
  background: var(--secondary-fill);
  border: 1px solid var(--border);
}
.legal-callout svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--color-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.legal-callout p { margin: 0; color: var(--text); }

.legal-form { margin: 12px 0; padding: 20px 22px; border: 1px dashed var(--accent-60); border-radius: var(--radius-small); }
.legal-form p { margin: 0 0 8px; }

/* Repère « à compléter » : volontairement visible */
.todo {
  background: #fff3c4;
  color: #6b4b00;
  border-radius: 4px;
  padding: 0 4px;
  font-weight: 600;
}
:root[data-theme="dark"] .todo { background: #4a3a06; color: #ffe7a0; }

.form__legal { font-size: var(--text-caption); text-align: center; margin: 0; color: var(--text-muted); }
.form__legal a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 900px) {
  .legal { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .legal-toc { position: static; max-height: none; }
  .legal-body { padding: 28px 24px; }
}
@media (max-width: 560px) {
  .legal-hero { padding-top: 48px; padding-bottom: 24px; }
  .legal-body { padding: 24px 18px; }
  .legal-dl { grid-template-columns: 1fr; }
  .legal-dl dd { border-top: 0; padding-top: 0; }
  .legal-dl dt:first-of-type + dd { border-top: 0; }
}

/* ---------- Confort mobile (lisibilité, marges, zones tactiles) ---------- */
.display, .heading-lg, .heading-sm, h3 { text-wrap: balance; }
.nav__mobile { display: none; }
.link { display: inline-block; padding: 6px 0; }

@media (max-width: 900px) {
  /* Menu mobile : liens plus grands + accès direct au contact */
  .nav { padding: 8px 20px 20px; box-shadow: 0 24px 40px -24px rgba(14, 9, 22, 0.35); }
  .nav a { padding: 16px 4px; font-size: 18px; }
  .nav__mobile { display: block; }
  .nav a.nav__cta { margin-top: 16px; padding: 14px 20px; border-bottom: 0; text-align: center; justify-content: center; }
}

@media (max-width: 560px) {
  /* Marges latérales plus confortables que 16 px */
  .container { padding: 0 20px; }

  /* Les retours à la ligne forcés des titres cassent les lignes sur petit écran */
  .display br, .heading-lg br { display: none; }
  :root { --text-heading-lg: 32px; --section-gap: 64px; --text-caption: 13px; }
  .heading-lg { line-height: 1.1; }

  /* Bandeau d'annonce : texte puis bouton, bien espacés et décollés des bords */
  .announce {
    flex-direction: column;
    gap: 12px;
    padding: 14px 20px 16px;
    text-align: center;
    line-height: 1.45;
  }
  .announce__dot { display: none; }
  .announce .announce__link { margin: 0; padding: 10px 20px; min-height: 44px; display: inline-flex; align-items: center; }

  .plan__badge { font-size: 12px; }

  /* Boutons pleine largeur : plus faciles à toucher */
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn, .form .btn, .plan .btn { width: 100%; justify-content: center; }
}

@media print {
  .announce, .header, .legal-toc, .footer, .toast { display: none !important; }
  .legal-body { padding: 0; border: 0; box-shadow: none; }
}

/* =========================================================
   Blog (blog/index.html, blog/*.html)
   Lecture : corps 18 px, interligne 1.7, ~70 caractères par ligne.
   Réutilise .legal-hero, .legal-table, .checklist, .card, .badge.
   ========================================================= */

/* Bandeau « Brouillon » : à retirer des pages à la publication */
.draft-banner {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px;
  padding: 10px 20px;
  background: #fff3c4; color: #6b4b00;
  font-size: var(--text-body-sm); text-align: center;
  border-bottom: 1px solid #f0d77a;
}
:root[data-theme="dark"] .draft-banner { background: #4a3a06; color: #ffe7a0; border-bottom-color: #6b5410; }

.post-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* En-tête d'article */
.post-hero { max-width: 928px; padding-top: 64px; padding-bottom: 36px; }
.post-crumbs { font-size: var(--text-body-sm); color: var(--text-muted); margin-bottom: 20px; }
.post-crumbs a { color: var(--link); }
.post-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-crumbs span { margin: 0 6px; }
.post-hero .heading-lg { margin: 20px 0 16px; text-wrap: balance; }
.post-lede { font-size: 20px; line-height: 1.55; color: var(--text-muted); max-width: 40em; margin: 0 0 20px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--text-body-sm); color: var(--text-muted); margin: 0; }
.post-meta strong { color: var(--text); font-weight: 600; }

/* Corps d'article */
.post-body {
  max-width: 880px; margin: 0 auto;
  padding: 48px 64px;
  font-size: 18px; line-height: 1.7;
}
.post-body > section { max-width: 37rem; margin-left: auto; margin-right: auto; }
.post-body > section + section { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--border); }
.post-body h2 { font-size: var(--text-heading-sm); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; margin: 0 0 18px; }
.post-body h3 { font-size: 20px; line-height: 1.35; font-weight: 600; margin: 28px 0 8px; }
.post-body p, .post-body li { color: var(--text); }
.post-body p { margin: 0 0 18px; }
.post-body strong { font-weight: 600; }
.post-body ul:not(.checklist), .post-body ol { margin: 0 0 18px; padding-left: 24px; display: grid; gap: 8px; }
.post-body .checklist { margin: 0 0 18px; gap: 10px; }
.post-body a:not(.btn) { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.post-body a:not(.btn):hover { text-decoration-thickness: 2px; }

/* Réponse rapide en haut d'article */
.post-answer {
  padding: 24px 28px;
  border-radius: var(--radius-cards);
  background: var(--soft-fill);
  border: 1px dashed var(--accent-60);
}
.post-body > .post-answer + section { border-top: 0; }
.post-answer h2 { font-size: 20px; margin-bottom: 12px; }
.post-answer ul:not(.checklist) { margin-bottom: 12px; }

.post-source { font-size: 15px; line-height: 1.55; color: var(--text-muted) !important; margin: 0 0 18px; }

/* Tableau comparatif : plus large que la colonne de texte si besoin */
.post-body .legal-table-wrap { margin: 8px 0 12px; }
/* Grand écran : le tableau déborde de la colonne de texte (592 px) jusqu'aux bords de la carte (752 px) */
@media (min-width: 1000px) {
  .post-body .legal-table-wrap { margin-left: -80px; margin-right: -80px; }
}
.post-table { font-size: 15px; line-height: 1.5; min-width: 560px; }
.post-table tbody th { color: var(--text); font-weight: 600; background: var(--soft-fill); white-space: nowrap; }
.post-table td { color: var(--text) !important; }

/* FAQ */
.post-faq h3:first-child { margin-top: 0; }

/* Fin d'article */
.post-sources { font-size: 15px; line-height: 1.55; }
.post-sources li { color: var(--text-muted) !important; }
.post-cta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  margin: 32px 0 28px; padding: 24px 28px;
  border-radius: var(--radius-cards);
  background: var(--soft-fill);
  box-shadow: var(--shadow-subtle);
}
.post-cta p { margin: 0; }
.post-author { font-size: 16px; color: var(--text-muted) !important; margin-bottom: 6px !important; }
.post-ai { font-size: 14px; color: var(--text-muted) !important; font-style: italic; margin: 0 !important; }

/* Liste des articles (blog/index.html) */
.blog-list { list-style: none; margin: 0 auto; padding: 0; max-width: 880px; display: grid; gap: 16px; }
.blog-card { position: relative; padding: 28px 32px; transition: border-color 0.2s ease, transform 0.2s ease; }
.blog-card:hover { border-color: var(--accent-60); transform: translateY(-2px); }
.blog-card h2 { font-size: var(--text-heading-sm); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; margin: 10px 0 10px; }
.blog-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.blog-card h2 a:focus-visible { outline: none; }
.blog-card:focus-within { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.blog-card p:not(.caption-title) { font-size: 17px; line-height: 1.6; }
.blog-card__more { color: var(--link); font-weight: 540; }

@media (max-width: 900px) {
  .post-body { padding: 36px 28px; }
}
@media (max-width: 560px) {
  .post-hero { padding-top: 40px; padding-bottom: 24px; }
  .post-lede { font-size: 18px; }
  .post-body { padding: 24px 18px; font-size: 17px; }
  .post-answer, .post-cta { padding: 20px; }
  .post-cta .btn { width: 100%; }
  .blog-card { padding: 22px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-card, .blog-card:hover { transition: none; transform: none; }
}
@media print {
  .draft-banner, .post-cta { display: none !important; }
  .post-body { padding: 0; border: 0; box-shadow: none; }
}

/* =========================================================
   Mobile (≤ 640 px) : version plus douce et plus aérée
   Bureau et tablette inchangés : tout est dans cette requête média
   (les points des carrousels, ajoutés par main.js, restent masqués au-dessus).
   - formes arrondies, ombres légères au lieu des filets ;
   - technos en pastilles, services en onglets défilants ;
   - tarifs et réalisations en carrousels à faire glisser ;
   - méthode en frise, bandes sombres aux coins arrondis.
   ========================================================= */
.carousel-dots { display: none; }

@media (max-width: 640px) {
  :root { --radius-cards: 22px; }

  /* Respiration entre sections : sous 560 px, « .container { padding: 0 20px } »
     annulait l'espace du haut des sections qui sont aussi des conteneurs */
  .section.container { padding-top: var(--section-gap); }

  /* Bandeau d'annonce : une rangée compacte, texte à gauche, bouton à droite */
  .announce {
    flex-direction: row; flex-wrap: nowrap; justify-content: space-between;
    gap: 14px; padding: 10px 20px;
    text-align: left; font-size: 13px; line-height: 1.4;
  }
  .announce .announce__link {
    flex: none; white-space: nowrap;
    padding: 0 16px; min-height: 44px;
    background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28);
  }

  /* Header et menu : boutons ronds, menu aux coins arrondis */
  .burger, .theme-toggle { border-radius: 50%; }
  .nav { border-radius: 0 0 24px 24px; }

  /* Boutons en pilule */
  .btn, .btn--secondary, .btn--outline-light { border-radius: var(--radius-pill); }
  .btn--secondary { border-color: var(--accent-40); }
  :root[data-theme="dark"] .btn--secondary { border-color: rgba(203, 177, 248, 0.35); }

  /* Cartes : ombre douce plutôt qu'un filet (le filet reste en thème sombre) */
  .card:not(.plan--popular) {
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(14, 9, 22, 0.04), 0 14px 34px -20px rgba(52, 28, 95, 0.32);
  }
  :root[data-theme="dark"] .card:not(.plan--popular) { border-color: var(--border); box-shadow: none; }

  /* Hero : plus compact, carte « Performance » visible sous les boutons */
  .hero { padding: 48px 0 112px; }
  .hero .display { margin: 20px auto 18px; }
  .hero .hero__title { margin-top: 0; }
  .hero__title .hero__kicker { margin-bottom: 20px; }
  .hero__lead { font-size: 17px; margin-bottom: 28px; }
  .float-card--right {
    display: block; position: relative; right: auto; top: auto;
    width: 248px; margin: 36px auto 0; rotate: 2deg;
    box-shadow: 0 18px 40px -22px rgba(52, 28, 95, 0.45);
  }
  .float-card--bottom { bottom: 28px; box-shadow: 0 18px 40px -22px rgba(52, 28, 95, 0.45); }

  /* Technos : pastilles qui passent à la ligne, plus de tableau */
  .stack__grid {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    background: none; border: 0; border-radius: 0; overflow: visible;
  }
  .stack .stack__grid li {
    border: 0; padding: 9px 16px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: 0 6px 18px -12px rgba(52, 28, 95, 0.45);
    font-size: 15px; opacity: 1;
  }
  :root[data-theme="dark"] .stack .stack__grid li { box-shadow: inset 0 0 0 1px var(--border); }

  /* En-têtes de section */
  .section__head { margin-bottom: 28px; }
  .section__head .muted { font-size: 17px; margin-top: 12px; }

  /* Services : onglets en pastilles qui défilent horizontalement */
  .tabs {
    display: flex; gap: 8px;
    margin: 0 -20px 16px; padding: 4px 20px 8px;
    background: none; border: 0; border-radius: 0;
    overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 20px;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .tab {
    flex: none; scroll-snap-align: start;
    min-height: 44px; padding: 0 18px; font-size: 15px;
    border: 1px solid var(--border); border-radius: var(--radius-pill);
    background: var(--surface);
  }
  .tabs .tab.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-blanc); }
  .tabs .tab.is-active svg { stroke: var(--color-blanc); }
  .tab-panel { padding: 22px; gap: 22px; }
  .tab-panel__text p { font-size: 17px; }
  .tab-panel__visual { aspect-ratio: 16 / 10; padding: 22px; border-radius: 16px; }

  /* Méthode : bande arrondie posée dans la page, étapes en frise */
  .dark-band { margin-inline: 10px; border-radius: 28px; padding: 56px 0 48px; }
  .dark-band__art { min-height: 220px; }
  .script { font-size: 28px; }
  .steps { gap: 0; margin-bottom: 28px; }
  .steps li { position: relative; gap: 14px; padding: 0 0 22px; border-top: 0; }
  .steps li:last-child { padding-bottom: 0; }
  .steps li:not(:last-child)::after {
    content: ""; position: absolute; left: 15.5px; top: 38px; bottom: 6px;
    width: 1px; background: rgba(255, 255, 255, 0.2);
  }
  .steps b {
    flex: none; width: 32px; height: 32px; padding: 0;
    display: grid; place-items: center;
    border-radius: 50%; background: rgba(176, 137, 244, 0.22);
    color: var(--color-blanc); font-size: 12px;
  }
  .steps strong { padding-top: 5px; }
  .dark-band .btn--outline-light { width: 100%; height: 48px; }

  /* Carrousels (tarifs, réalisations) : on fait glisser, la carte suivante dépasse */
  [data-carousel] {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%;
    gap: 12px;
    margin: 0 -20px; padding: 6px 20px 18px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
    scrollbar-width: none;
  }
  [data-carousel]::-webkit-scrollbar { display: none; }
  .pricing > .plan,
  .pricing > .plan:first-child,
  .pricing > .plan:nth-child(n+4),
  [data-carousel] > * { grid-column: auto; scroll-snap-align: start; }
  .plan:hover { transform: none; }
  .plan { padding: 26px 22px; }
  .plan__amount { font-size: 36px; }

  .carousel-dots { display: flex; justify-content: center; gap: 6px; margin: 2px 0 8px; }
  .carousel-dots i {
    width: 6px; height: 6px; border-radius: var(--radius-pill);
    background: var(--accent-40);
    transition: width 0.3s var(--ease-out), background-color 0.3s ease;
  }
  .carousel-dots i.is-on { width: 20px; background: var(--color-accent); }

  .maintenance { margin-top: 8px; }
  .maintenance__list li { padding: 2px 0 2px 14px; }
  .pricing-note { flex-direction: column; gap: 10px; padding: 20px; border-radius: 20px; }
  .pricing-note p + p { font-size: 14px; }

  /* Réalisations */
  .project__thumb { border-radius: 14px; }
  .project:hover .project__thumb { transform: none; }

  /* Pourquoi KromaDev : rangées icône + texte, plus légères */
  #apropos .cards-3 { gap: 12px; }
  #apropos .card {
    display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; align-items: start;
    padding: 20px;
  }
  #apropos .card > .icon-chip { grid-row: 1 / span 3; width: 44px; height: 44px; border-radius: 14px; }
  #apropos .card .label-bold { margin: 2px 0 6px; }
  #apropos .card p { margin-bottom: 4px; }

  /* Bandeau « Un projet en tête ? » */
  .gradient-band { border-radius: 28px; padding: 40px 24px; gap: 24px; }
  .gradient-band .heading-lg { font-size: 32px; }
  .gradient-band .btn { width: 100%; }

  /* Formulaire : champs arrondis, 16 px pour éviter le zoom automatique d'iOS */
  .form { gap: 16px; }
  .form input[type="text"],
  .form input[type="email"],
  .form select,
  .form textarea { font-size: 16px; border-radius: 14px; }
  .contact { gap: 32px; }

  /* Pied de page arrondi */
  .footer { border-radius: 28px 28px 0 0; padding-top: 48px; }
  .footer__bottom { margin-top: 40px; }

  /* Bandeau cookies et toast assortis */
  .consent { border-radius: 22px; }
  .toast { border-radius: 16px; }
}

/* =========================================================
   Garanties, avis clients, calculateur de gain, FAQ
   ========================================================= */

/* ---------- Garanties (fin de #tarifs) ---------- */
.guarantees { margin-top: 56px; }
.guarantees > .heading-sm { margin-bottom: 24px; }
.guarantees__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.guarantee { display: grid; align-content: start; gap: 12px; }
.guarantee p { font-size: var(--text-body-sm); }
.guarantees__note { margin-top: 16px; font-size: var(--text-body-sm); }

/* ---------- Avis clients ---------- */
.reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.review { margin: 0; display: flex; flex-direction: column; gap: 20px; }
.review__text { margin: 0; flex: 1; }
.review__text p { color: var(--text); font-size: 17px; line-height: 1.55; }
.review__text p::before { content: "« "; color: var(--color-accent); font-weight: 700; }
.review__text p::after { content: " »"; color: var(--color-accent); font-weight: 700; }
.review__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: var(--text-body-sm); color: var(--text-muted); }
.review__name { color: var(--text); font-weight: 700; }
.review__project { padding: 2px 10px; border-radius: var(--radius-pill); background: var(--soft-fill); color: var(--accent-text); }
.review__source::before { content: "· "; }

/* ---------- Calculateur de gain ---------- */
.gain { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 40px; align-items: center; }
.gain__intro .muted { margin-top: 16px; font-size: 18px; }
.gain__intro .caption-title { margin-bottom: 12px; }
.gain__body { display: grid; gap: 24px; }
.gain__label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.gain__label label { font-weight: 540; }
.gain__label output { font-weight: 700; color: var(--accent-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Curseurs : piste arrondie remplie en violet jusqu'au bouton (--fill, mis à jour par main.js) */
.gain { --range-empty: var(--accent-20); }
:root[data-theme="dark"] .gain { --range-empty: rgba(203, 177, 248, 0.18); }
.gain__field input[type="range"] {
  --fill: 0%;
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 44px; margin: 0;
  background: transparent;
  cursor: pointer;
}
.gain__field input[type="range"]:focus { outline: none; }
.gain__field input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--color-accent) var(--fill), var(--range-empty) var(--fill));
}
.gain__field input[type="range"]::-moz-range-track { height: 8px; border-radius: var(--radius-pill); background: var(--range-empty); }
.gain__field input[type="range"]::-moz-range-progress { height: 8px; border-radius: var(--radius-pill); background: var(--color-accent); }
.gain__field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box; width: 24px; height: 24px; margin-top: -8px;
  border: 3px solid var(--color-accent); border-radius: 50%;
  background: var(--color-blanc);
  box-shadow: 0 2px 8px rgba(52, 28, 95, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gain__field input[type="range"]::-moz-range-thumb {
  box-sizing: border-box; width: 24px; height: 24px;
  border: 3px solid var(--color-accent); border-radius: 50%;
  background: var(--color-blanc);
  box-shadow: 0 2px 8px rgba(52, 28, 95, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gain__field input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.1); }
.gain__field input[type="range"]:hover::-moz-range-thumb { transform: scale(1.1); }
.gain__field input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
.gain__field input[type="range"]:active::-moz-range-thumb { transform: scale(1.15); }
.gain__field input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(124, 59, 237, 0.35); }
.gain__field input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 5px rgba(124, 59, 237, 0.35); }
.gain__scale { display: flex; justify-content: space-between; font-size: var(--text-caption); color: var(--text-muted); }
.gain__result { display: grid; justify-items: start; gap: 8px; padding: 24px; border-radius: var(--radius-cards); background: var(--soft-fill); }
.gain .gain__total { font-size: var(--text-heading-lg); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.gain .gain__note { font-size: var(--text-body-sm); margin-bottom: 8px; }

/* ---------- FAQ filtrable ---------- */
.faq-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.faq-filter {
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text);
  font: inherit; font-weight: 540; cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.faq-filter:hover { border-color: var(--accent-40); }
.faq-filter[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-blanc); }
.faq-filter:focus-visible { outline: 2px solid var(--accent-80); outline-offset: 2px; }
.faq-list { display: grid; gap: 10px; max-width: 860px; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius-cards); background: var(--surface); }
.faq-item summary {
  position: relative;
  min-height: 44px; padding: 18px 56px 18px 22px;
  font-weight: 700; cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  position: absolute; right: 22px; top: 50%;
  width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease-out);
}
.faq-item[open] summary::after { transform: translateY(4px) rotate(225deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent-80); outline-offset: 2px; border-radius: var(--radius-cards); }
.faq-item p { padding: 0 22px 20px; color: var(--text-muted); }

@media (max-width: 1100px) {
  .guarantees__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .gain { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
}
@media (max-width: 640px) {
  /* Les scènes animées ont besoin d'un peu plus de hauteur que l'ancienne maquette */
  .tab-panel__visual { aspect-ratio: 4 / 3; padding: 16px; }
  .guarantees { margin-top: 40px; }
  .guarantees__grid { grid-template-columns: 1fr; gap: 12px; }
  .gain { border-radius: 24px; }
  .gain__intro .muted { font-size: 17px; }
  .gain .gain__total { font-size: 40px; }
  .faq-filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: -20px; padding: 2px 20px 4px; scrollbar-width: none; }
  .faq-filters::-webkit-scrollbar { display: none; }
  .faq-filter { flex: none; }
  .faq-item summary { padding: 16px 48px 16px 18px; }
  .faq-item summary::after { right: 18px; }
  .faq-item p { padding: 0 18px 18px; }
}

/* Bandeau d'annonce sur mobile : une seule ligne fine (texte court + « Réserver ») ;
   la phrase sur les mini-sites reste sur PC et dans la section contact. */
@media (max-width: 640px) {
  .announce__long { display: none; }
  .announce { gap: 12px; padding: 6px 16px; font-size: 13px; }
  .announce__dot { display: block; }
  .announce__text { flex: 1; min-width: 0; }
  .announce [data-places-per-month] { white-space: nowrap; }
  .announce .announce__link { min-height: 36px; padding: 0 14px; font-weight: 540; }
}

/* =========================================================
   Parcours mobile vers le contact (≤ 768 px uniquement ; le bureau ne change pas)
   ========================================================= */
.mobile-cta { display: none; }
.faq-more { display: none; }

@media (max-width: 768px) {
  /* Respiration un peu réduite : on arrive plus vite au contact */
  :root { --section-gap: 56px; }
  .section__head { margin-bottom: 28px; }

  /* Bouton « Appeler » collant en bas d'écran (affiché par main.js : .is-shown) */
  .mobile-cta {
    position: fixed; z-index: 40;
    left: 50%; bottom: calc(14px + env(safe-area-inset-bottom));
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 26px;
    border-radius: var(--radius-pill);
    background: var(--primary); color: var(--color-blanc);
    font-weight: 600;
    box-shadow: 0 12px 28px -10px rgba(52, 28, 95, 0.6);
    opacity: 0; visibility: hidden;
    transform: translate(-50%, 16px);
    transition: opacity 0.25s ease, transform 0.3s var(--ease-out), visibility 0s linear 0.3s;
  }
  .mobile-cta.is-shown {
    opacity: 1; visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity 0.25s ease, transform 0.3s var(--ease-out), visibility 0s;
  }
  .mobile-cta:focus-visible { outline: 2px solid var(--accent-80); outline-offset: 3px; }
  /* Jamais par-dessus le bandeau cookies */
  .has-consent-banner .mobile-cta { display: none; }

  /* FAQ : 5 questions, puis « Voir les autres questions » */
  .faq-list.is-collapsed .faq-item:nth-child(n+6) { display: none; }
  .faq-more:not([hidden]) {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 48px; margin-top: 12px;
    border: 1px dashed var(--accent-40); border-radius: var(--radius-cards);
    background: none; color: var(--accent-text);
    font: inherit; font-weight: 600; cursor: pointer;
  }
  .faq-more:focus-visible { outline: 2px solid var(--accent-80); outline-offset: 2px; }

  /* Récit Constat : un peu moins long que sur bureau (200 vh au lieu de 240), mais assez
     pour qu'un geste rapide ne saute pas d'étape ; la scène laisse la place au bouton collant */
  .story.is-enhanced { height: calc(100svh - var(--story-top) + 200vh); }
  .story.is-enhanced .story__stage { height: calc(100svh - var(--story-top) - 64px); }

  /* Carte « Un seul interlocuteur » : peut passer sur deux lignes sur petit écran */
  .float-card--bottom { white-space: normal; }
}
@media (max-width: 640px) {
  /* Garanties en carrousel (data-carousel) : annule la colonne unique définie plus haut */
  .guarantees__grid[data-carousel] { grid-template-columns: none; gap: 12px; }
  [data-carousel]:focus-visible { outline: 2px solid var(--accent-80); outline-offset: -2px; border-radius: var(--radius-cards); }
}

/* ==========================================================================
   Écran d'intro (preloader) — preloader.js / preloader-gate.js
   Affiché seulement si preloader-gate.js a posé html.has-intro (avant le rendu).
   ========================================================================== */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.intro { display: none; }
html.has-intro { overflow: hidden; }
/* iPhone (Safari, barre flottante en bas) : un élément fixe ne passe pas sous la barre,
   on y voyait le site par transparence. Pendant l'intro, le site est masqué et le fond de
   la page prend la couleur de l'intro ; il réapparaît au début de la sortie (.intro-exit).
   Filet de sécurité : le site revient seul à 12 s si le script ne tourne pas. */
html.has-intro,
html.has-intro body { background: #08080C; }
html.has-intro:not(.intro-exit) body > :not(.intro) {
  visibility: hidden;
  animation: intro-reveal 0s 12s forwards;
}
@keyframes intro-reveal { to { visibility: visible; } }
html.has-intro .intro {
  position: fixed;
  inset: 0;
  /* Mobile : couvrir la hauteur MAXIMALE de l'écran (barre d'adresse rétractée comprise),
     sinon une bande du site apparaît en bas quand la barre se replie. Le logo et le
     compteur restent centrés dans la partie visible (padding = partie cachée). */
  bottom: auto;
  height: 100vh;
  height: 100lvh;
  padding-bottom: calc(100lvh - 100dvh);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #08080C;
  will-change: clip-path;
  /* Filet de sécurité : si le script ne tourne pas, l'écran disparaît seul */
  animation: intro-fallback 0.4s ease 12s forwards;
}
@keyframes intro-fallback { to { opacity: 0; visibility: hidden; } }
.intro__glow,
.intro__dust { position: absolute; inset: 0; pointer-events: none; }
.intro__glow { background: radial-gradient(45% 45% at 50% 45%, rgba(124, 59, 237, 0.22) 0%, rgba(124, 59, 237, 0.06) 45%, transparent 75%); }
.kd-dust {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #CDB0D2;
  opacity: 0;
  will-change: transform;
}
.kd-hud {
  position: absolute;
  inset: auto 0 0 0;
  inset: auto 0 calc(100lvh - 100dvh) 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 24px 24px;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: rgba(205, 176, 210, 0.6);
  pointer-events: none;
}
.kd-count {
  font-size: 24px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: normal;
  color: #E4D3EC;
}
.kd-progress {
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, #7C3BED, #CDB0D2);
}
.intro__actions {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
  display: flex;
  gap: 8px;
}
.intro__btn {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(205, 176, 210, 0.35);
  border-radius: 999px;
  background: rgba(8, 8, 12, 0.6);
  color: #E4D3EC;
  font: 500 13px/1 "Inter", system-ui, sans-serif;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.intro__btn:hover { border-color: #CDB0D2; background: rgba(124, 59, 237, 0.25); }
.intro__btn:focus-visible { outline: 2px solid #CDB0D2; outline-offset: 2px; }
.kd-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  will-change: transform;
}
.kd-logo { width: min(420px, 80vw); overflow: visible; }
.kd-word { width: min(400px, 78vw); overflow: visible; will-change: transform; }
.kd-drop { will-change: transform; }
.kd-text { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 76px; letter-spacing: -0.035em; }
.kd-kroma { font-weight: 800; }
.kd-dev { font-weight: 300; }
@media (min-width: 640px) {
  .kd-hud { padding: 0 40px 32px; }
  .intro__actions { top: 28px; right: 40px; }
}