/* ==========================================================================
   Polices (hébergées avec le site, rien n'est chargé depuis Google)
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/inter.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("../assets/fonts/playfair-display-italic.woff2") format("woff2");
}

/* Police du logo « Secrets de Monteur Pro » */
@font-face {
  font-family: "Changa";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../assets/fonts/changa.woff2") format("woff2");
}

/* Police des titres de l'« Accelerator Program » */
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/syne.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../assets/fonts/cormorant.woff2") format("woff2");
}

/* ==========================================================================
   Base
   ========================================================================== */

:root {
  --bg: #000;
  --surface: #0c0c0e;
  --surface-2: #131316;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #fff;
  --muted: #a3a3ad;
  --dim: #6d6d78;
  --accent: #3b82f6;
  --accent-soft: #6ea3ff;
  --whatsapp: #25d366;

  /* Verre « liquid glass » : presque transparent. Le flou d'arrière-plan et les
     reflets sur les arêtes font le volume, pas une teinte sombre. */
  --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.018) 34%, rgba(255, 255, 255, 0.006) 66%, rgba(255, 255, 255, 0.045) 100%);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-blur: blur(14px) saturate(190%) brightness(1.08);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    inset 1px 0 0 rgba(255, 255, 255, 0.07),
    inset -1px 0 0 rgba(255, 255, 255, 0.07),
    inset 0 0 28px rgba(255, 255, 255, 0.03),
    0 24px 48px -26px rgba(0, 0, 0, 0.8);

  --radius: 20px;
  --container: 1140px;
  --header-h: 76px;

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-logo: "Cormorant", Georgia, "Times New Roman", serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Pas de barre de défilement : la ligne d'avancement en bas de l'écran la remplace. */
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

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

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

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

/* Images et vidéos : pas de glisser-déposer, pas de menu « Enregistrer l'image »,
   pas d'appui long sur téléphone. Le clic passe à l'élément situé dessous, donc
   les cartes et les liens restent cliquables. */
img,
video {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

/* Exception : une vidéo ouverte dans le lecteur doit garder ses commandes. */
.lightbox__frame video {
  pointer-events: auto;
}

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

:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: 6px;
}

[hidden] {
  display: none !important;
}

/* Halos fixes derrière la page, que le verre laisse deviner. Une seule teinte (le bleu
   du site) et peu d'intensité : le fond reste sobre. */
.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.ambient i {
  position: absolute;
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
  will-change: transform;
  animation: drift 26s ease-in-out infinite alternate;
}

.ambient i:nth-child(1) {
  top: -18vmax;
  left: -16vmax;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.2), transparent 62%);
}

.ambient i:nth-child(2) {
  top: 22%;
  right: -24vmax;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.13), transparent 62%);
  animation-duration: 34s;
  animation-delay: -8s;
}

.ambient i:nth-child(3) {
  bottom: -26vmax;
  left: 18%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.11), transparent 62%);
  animation-duration: 30s;
  animation-delay: -15s;
}

.ambient i:nth-child(4) {
  top: 48%;
  left: -22vmax;
  width: 48vmax;
  height: 48vmax;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.1), transparent 62%);
  animation-duration: 38s;
  animation-delay: -22s;
}

@keyframes drift {
  to {
    transform: translate3d(8vmax, 6vmax, 0) scale(1.12);
  }
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-weight: 600;
  font-size: 14px;
  /* Lien réservé à la navigation au clavier. Le décaler hors de l'écran ne suffit pas :
     Safari le laisse apparaître quand on tire la page vers le bas (effet élastique,
     rechargement). Il est donc aussi rendu transparent tant qu'il n'a pas le focus. */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* ==========================================================================
   Éléments communs
   ========================================================================== */

.container {
  width: min(var(--container), 100% - 48px);
  margin-inline: auto;
}

.container--narrow {
  --container: 820px;
}

.section {
  position: relative;
  padding: 120px 0;
  scroll-margin-top: 20px;
}

.section--glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 60% at 50% 55%, rgba(37, 99, 235, 0.13), transparent 70%);
  pointer-events: none;
}

.section > .container {
  position: relative;
}

.section-head {
  max-width: 720px;
  margin: 0 auto 64px;
  text-align: center;
}

.section-head h2,
.cta h2 {
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.section-head p:not(.chip) {
  margin-top: 18px;
  color: var(--muted);
  font-size: 17px;
  text-wrap: pretty;
}

/* Information affichée avant tout clic : lancer une vidéo charge le lecteur YouTube. */
.section-head p.youtube-note {
  margin-top: 10px;
  color: #9a9aa6;
  font-size: 13.5px;
}

.youtube-note a {
  color: #a9a9b4;
  text-decoration: underline;
  text-underline-offset: 3px;
}

h2 em,
.offer__price em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--accent-soft);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  padding: 7px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 20px -12px rgba(0, 0, 0, 0.7);
  color: #d4d4dc;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card {
  position: relative;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}

/* Liseré lumineux sur l'arête du verre */
.card::before,
.faq__item::before,
.dock::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.04) 28%, rgba(255, 255, 255, 0.02) 66%, rgba(140, 180, 255, 0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* Reflet qui suit le curseur (position fournie par main.js) */
.card::after,
.faq__item::after,
.dock::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.1), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

.card:hover::after,
.faq__item:hover::after,
.dock:hover::after {
  opacity: 1;
}

.kicker {
  color: var(--accent-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Boutons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background-color 0.25s, border-color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s;
}

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

.btn--sm {
  min-height: 40px;
  padding: 0 20px;
  font-size: 13.5px;
}

.btn--lg {
  min-height: 56px;
  padding: 0 34px;
  font-size: 16px;
}

.btn--block {
  width: 100%;
  white-space: normal;
  text-align: center;
}

.btn--primary {
  background: linear-gradient(180deg, #5d98ff 0%, #3b82f6 45%, #2c6be0 100%);
  border-color: rgba(160, 196, 255, 0.55);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 6px rgba(13, 51, 140, 0.45), 0 10px 30px -10px rgba(59, 130, 246, 0.75);
}

.btn--primary:hover {
  background: linear-gradient(180deg, #74a8ff 0%, #4c8ef8 45%, #3676ea 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 6px rgba(13, 51, 140, 0.4), 0 12px 38px -8px rgba(59, 130, 246, 0.9);
}

.btn--light {
  background: linear-gradient(180deg, #fff, #e3e6ee);
  color: #000;
  box-shadow: inset 0 1px 0 #fff, 0 10px 30px -14px rgba(255, 255, 255, 0.45);
}

.btn--light:hover {
  background: linear-gradient(180deg, #fff, #f1f3f8);
}

.btn--ghost {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 26px -14px rgba(0, 0, 0, 0.8);
}

.btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.4);
}

/* Apparition au défilement */

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--delay, 0ms);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   En-tête
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-h);
  padding: 0 clamp(20px, 3vw, 40px);
  pointer-events: none;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -28px;
  background: linear-gradient(#000 0%, rgba(0, 0, 0, 0.75) 45%, transparent);
  opacity: 0;
  transition: opacity 0.4s;
  z-index: -1;
}

.site-header.is-scrolled::before {
  opacity: 1;
}

.site-header > * {
  pointer-events: auto;
}

/* En-tête sans menu (page de mentions légales) */
.site-header--simple {
  grid-template-columns: 1fr auto;
}

.logo {
  justify-self: start;
  font-family: var(--font-logo);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
}

.site-header .btn {
  justify-self: end;
}

.nav {
  display: flex;
  gap: 2px;
  padding: 5px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg), rgba(0, 0, 0, 0.1);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}

.nav a {
  padding: 8px 16px;
  border-radius: 999px;
  color: #d6d6de;
  font-size: 13px;
  font-weight: 600;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}

.nav a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.nav a.is-active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.12));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 14px -6px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   Accueil
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  --hero-pad: 24px;
  padding: calc(var(--header-h) + 24px) var(--hero-pad) 0;
  text-align: center;
  overflow: hidden;
}

@keyframes track-slide {
  to {
    transform: translateX(-50%);
  }
}

/* Vidéo de fond : de vrais extraits de montage, assombris pour laisser le titre lisible. */
.hero__bg,
.hero__bg video,
.hero__shade {
  position: absolute;
  inset: 0;
}

.hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}

/* Elle apparaît en fondu une fois la lecture lancée (classe posée par main.js). */
.hero__bg video.is-ready {
  opacity: 0.64;
}

.hero__shade {
  background:
    radial-gradient(ellipse 60% 50% at 50% 45%, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.4) 58%, rgba(0, 0, 0, 0.1) 100%),
    linear-gradient(#000 0%, rgba(0, 0, 0, 0.18) 18%, rgba(0, 0, 0, 0.12) 56%, #000 95%);
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
  margin-block: auto;
  padding-block: 28px;
}

.hero__title {
  font-size: clamp(38px, 6.2vw, 72px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  /* Une ombre douce détache le texte des images qui passent derrière. */
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.55);
  text-wrap: balance;
  animation: rise 1s var(--ease) 0.08s both;
}

.hero__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
  animation: rise 1s var(--ease) 0.24s both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
}

.hero__trained {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 0 34px;
  animation: rise 1s var(--ease) 0.4s both;
}

.hero__trained-label {
  color: var(--dim);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero__trained-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px 48px;
  color: #fff;
  opacity: 0.72;
  transition: opacity 0.3s;
}

.hero__trained:hover .hero__trained-list {
  opacity: 1;
}

/* Clients : photos de profil et noms qui défilent en continu */
.hero__clients {
  position: relative;
  z-index: 1;
  align-self: stretch;
  margin-inline: calc(-1 * var(--hero-pad));
  padding: 14px 0 18px;
  border-top: 1px solid var(--line);
  animation: rise 1s var(--ease) 0.5s both;
}

.hero__clients .hero__trained-label {
  display: block;
  margin-bottom: 10px;
  font-size: 10px;
}

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

/* La liste est écrite deux fois à la suite : glisser de -50 % ramène exactement au départ. */
.marquee__track {
  display: flex;
  width: max-content;
  animation: track-slide 42s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* Espacement en marge interne (et non en "gap") pour que les deux moitiés aient la même largeur. */
.marquee__item {
  flex: none;
  padding: 3px 26px;
}

/* Photo ronde et nom, sans cadre autour */
.client {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #9d9daa;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: color 0.25s;
}

a.client:hover {
  color: #fff;
}

.client img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Formations dans le bandeau d'accueil : logo en vignette et nom */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* ==========================================================================
   Services
   ========================================================================== */

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

.service {
  padding: 16px 16px 30px;
}

.service:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
}

.service > :not(.illu) {
  padding-inline: 12px;
}

.service h3 {
  margin-top: 10px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.service h3 + p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 15px;
}

/* Chiffre ou fait marquant mis en avant dans une carte de service */
.service .service__fact {
  margin: 16px 12px 0;
  padding: 13px 15px;
  border: 1px solid rgba(110, 163, 255, 0.22);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.04));
  color: #dfe6f5;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
}

.service__fact a {
  display: block;
  margin-top: 6px;
  color: var(--accent-soft);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Petites illustrations animées */

.illu {
  position: relative;
  height: 172px;
  margin-bottom: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 0%, rgba(59, 130, 246, 0.16), transparent 65%), rgba(4, 4, 6, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 12px 30px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

/* 1. Montage : une tête de lecture parcourt les plans */
.illu--cut {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
}

.illu__track {
  display: flex;
  gap: 6px;
}

.illu__track i {
  width: var(--w);
  height: 26px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.illu__track:first-child i:nth-child(odd),
.illu__track:nth-child(2) i:nth-child(2) {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.6), rgba(59, 130, 246, 0.28));
  border-color: rgba(110, 163, 255, 0.45);
}

.illu__track--audio i {
  height: 20px;
  border-color: rgba(110, 163, 255, 0.22);
  background:
    repeating-linear-gradient(90deg, rgba(110, 163, 255, 0.5) 0 2px, transparent 2px 5px),
    rgba(59, 130, 246, 0.07);
}

.illu__playhead {
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 22px;
  width: 2px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 14px 2px rgba(255, 255, 255, 0.5);
  animation: playhead 5.5s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

.illu__playhead::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  width: 12px;
  height: 9px;
  border-radius: 3px 3px 6px 6px;
  background: #fff;
}

@keyframes playhead {
  to {
    left: calc(100% - 24px);
  }
}

/* 2. Motion design : des graphiques qui prennent vie */
.illu--motion {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 26px;
  padding: 0 26px 30px;
}

.illu__bars {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  height: 104px;
}

.illu__bars i {
  width: 20px;
  height: 100%;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--accent-soft), rgba(59, 130, 246, 0.35));
  transform-origin: bottom;
  animation: bar-grow 4s var(--ease) infinite;
}

.illu__bars i:nth-child(1) { --h: 0.38; animation-delay: 0s; }
.illu__bars i:nth-child(2) { --h: 0.58; animation-delay: 0.12s; }
.illu__bars i:nth-child(3) { --h: 0.76; animation-delay: 0.24s; }
.illu__bars i:nth-child(4) { --h: 1; animation-delay: 0.36s; }

@keyframes bar-grow {
  0%, 8% { transform: scaleY(0.04); }
  38%, 82% { transform: scaleY(var(--h)); }
  100% { transform: scaleY(0.04); }
}

.illu__lines {
  display: grid;
  gap: 10px;
  width: 110px;
  padding-bottom: 8px;
}

.illu__lines b {
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  transform-origin: left;
  animation: line-write 4s var(--ease) infinite;
}

.illu__lines b:nth-child(1) { width: 100%; height: 14px; animation-delay: 0.3s; }
.illu__lines b:nth-child(2) { width: 78%; background: rgba(255, 255, 255, 0.3); animation-delay: 0.45s; }
.illu__lines b:nth-child(3) { width: 52%; background: rgba(255, 255, 255, 0.3); animation-delay: 0.6s; }

@keyframes line-write {
  0%, 8% { transform: scaleX(0); opacity: 0; }
  38%, 82% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0); opacity: 0; }
}

/* 3. Direction artistique : une palette, une typo, un style constant */
.illu--da {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 14px 22px;
  padding: 22px 26px;
}

.illu__aa {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 52px;
  line-height: 1;
}

.illu__swatches {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.illu__swatches i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  animation: swatch 4.8s var(--ease) infinite;
}

.illu__swatches i:nth-child(1) { background: var(--accent); animation-delay: 0s; }
.illu__swatches i:nth-child(2) { background: var(--accent-soft); animation-delay: 0.5s; }
.illu__swatches i:nth-child(3) { background: #fff; animation-delay: 1s; }
.illu__swatches i:nth-child(4) { background: #1c1c21; animation-delay: 1.5s; }

@keyframes swatch {
  0%, 22%, 100% { transform: none; }
  10% { transform: translateY(-7px) scale(1.12); }
}

.illu__frames {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.illu__frames u {
  position: relative;
  height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.26), rgba(255, 255, 255, 0.03));
}

.illu__frames u::before,
.illu__frames u::after {
  content: "";
  position: absolute;
  left: 9px;
  height: 5px;
  border-radius: 999px;
}

.illu__frames u::before {
  bottom: 17px;
  width: 48%;
  background: #fff;
}

.illu__frames u::after {
  bottom: 8px;
  width: 28%;
  background: var(--accent-soft);
}

/* ==========================================================================
   Réalisations
   ========================================================================== */

.work {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Vidéos rangées par format : le nom du format et ce qu'il apporte à gauche,
   les exemples à droite. Le texte reste à l'écran pendant qu'on parcourt les vidéos. */
.work-groups {
  display: grid;
  gap: 76px;
}

.work-group {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.75fr);
  align-items: start;
  gap: 22px 52px;
}

.work-group__intro {
  position: sticky;
  top: calc(var(--header-h) + 28px);
}

.work-group__intro h3 {
  font-size: clamp(23px, 2.5vw, 30px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.work-group__intro p {
  margin-top: 14px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.65;
  text-wrap: pretty;
}

.work-group .work {
  gap: 18px;
}

.work__card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #101012;
  overflow: hidden;
  text-align: left;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}

button.work__card:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
}

.work__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

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

.work__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 45%, rgba(0, 0, 0, 0.82));
}

.work__meta {
  position: absolute;
  inset: auto 20px 18px 20px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}

.work__play {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: var(--glass-bg), rgba(0, 0, 0, 0.12);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 20px -8px rgba(0, 0, 0, 0.7);
  color: #fff;
  transition: background-color 0.3s, color 0.3s, transform 0.4s var(--ease);
}

.work__play svg {
  margin-left: 3px;
}

button.work__card:hover .work__play {
  background: var(--accent);
  color: #fff;
  transform: scale(1.08);
}

.work__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.work__tag {
  display: block;
  margin-top: 2px;
  color: #b4b4be;
  font-size: 13px;
}

/* Nombre impair de vidéos : la première prend toute la largeur. */
.work__card:first-child:nth-last-child(odd) {
  grid-column: 1 / -1;
}

.work__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  padding: 6px 12px;
  border: 1px solid rgba(140, 180, 255, 0.5);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.42), rgba(59, 130, 246, 0.14)), rgba(8, 12, 24, 0.45);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(200, 220, 255, 0.45), 0 8px 20px -10px rgba(0, 0, 0, 0.7);
  color: #e6efff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.work__card.is-empty {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(59, 130, 246, 0.1), transparent 60%),
    #0e0e10;
}

.work__card.is-empty .work__play {
  color: var(--dim);
}

/* Lecteur vidéo */

.lightbox {
  width: min(1120px, 100% - 32px, (100vh - 140px) * 16 / 9);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  overflow: visible;
}

.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lightbox[open] {
  animation: lightbox-in 0.45s var(--ease);
}

@keyframes lightbox-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

.lightbox__frame {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: #000;
  overflow: hidden;
}

.lightbox.is-vertical {
  width: min(420px, 100% - 32px, (100vh - 120px) * 9 / 16);
}

.lightbox.is-vertical .lightbox__frame {
  aspect-ratio: 9 / 16;
}

.lightbox__frame iframe,
.lightbox__frame video {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Capture d'écran affichée en grand (message d'origine d'un client) */
.lightbox.is-image {
  width: min(784px, 100% - 32px);
}

.lightbox.is-image .lightbox__frame {
  aspect-ratio: auto;
}

.lightbox__frame img {
  display: block;
  width: 100%;
}

/* Demande d'accord avant de charger YouTube */
.lightbox.is-asking {
  width: min(560px, 100% - 32px);
}

.lightbox.is-asking .lightbox__frame {
  aspect-ratio: auto;
  border-color: var(--glass-border);
  background: var(--glass-bg), rgba(0, 0, 0, 0.25);
  box-shadow: var(--glass-shadow);
}

.consent {
  padding: 36px 32px 30px;
  text-align: center;
}

.consent__title {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.consent__title + p {
  margin-top: 12px;
  color: #c4c4ce;
  font-size: 15px;
  text-wrap: pretty;
}

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.consent__more {
  margin-top: 22px;
  color: var(--dim);
  font-size: 12.5px;
  line-height: 1.6;
}

.consent__more a {
  color: #b4b4be;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lightbox__close {
  position: absolute;
  top: -50px;
  right: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: var(--glass-bg), rgba(0, 0, 0, 0.2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  font-size: 24px;
  line-height: 1;
}

.lightbox__close:hover {
  background: #fff;
  color: #000;
}

/* ==========================================================================
   Résultats
   ========================================================================== */

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

.result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px 28px 0;
  overflow: hidden;
}

.result:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
}

.result__rank {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 84px;
  line-height: 0.95;
  color: var(--accent-soft);
}

.result__rank span {
  margin-left: 2px;
  font-size: 0.38em;
  color: rgba(110, 163, 255, 0.55);
}

.result .kicker {
  margin-top: 20px;
}

.result h3 {
  margin-top: 8px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.result__text {
  margin: 10px 0 18px;
  color: var(--muted);
  font-size: 15px;
}

.link-ext {
  color: #d4d4dc;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: color 0.25s, border-color 0.25s;
}

.link-ext:hover {
  color: #fff;
  border-color: #fff;
}

.fineprint {
  max-width: 640px;
  margin: 32px auto 0;
  color: var(--dim);
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
  text-wrap: pretty;
}

/* Vues d'une chaîne avant / après : un titre, une phrase, une courbe.
   La courbe est grise avant mon arrivée, puis prend le bleu du site (validé sur fond
   sombre). Les textes gardent les teintes de texte, jamais celle de la courbe. */
.stats {
  --mine: #3b82f6;
  --other: #7d7e89;
  margin-top: 44px;
  padding: 34px;
}

.stats__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px 48px;
}

/* La phrase choc : la situation d'avant en gris, le résultat en blanc. */
.stats__claim {
  margin-top: 12px;
  font-size: clamp(27px, 3.7vw, 42px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.03em;
}

.stats__claim span,
.stats__claim strong {
  display: block;
  font-weight: 600;
}

.stats__claim span {
  color: #8a8b96;
}

/* Ce que ces vues représentent pour le client */
.stats__lead {
  max-width: 520px;
  margin-top: 14px;
  color: #c2c2cc;
  font-size: 15.5px;
  line-height: 1.6;
  text-wrap: pretty;
}

.stats__streak {
  max-width: 520px;
  margin-top: 10px;
  color: #fff;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.5;
}

/* Le chiffre principal : un seul par bloc, dans la police de texte du site. */
.stats__hero {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.stats__hero strong {
  font-size: clamp(58px, 8vw, 92px);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.045em;
}

.stats__hero span {
  max-width: 120px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.stats__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: 22px;
}

.stats__plot {
  position: relative;
  margin-top: 22px;
  border-radius: 8px;
  outline-offset: 6px;
  touch-action: pan-y;
}

.stats__plot svg {
  display: block;
  overflow: visible;
}

.stats__grid {
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
}

.stats__baseline {
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 1;
}

.stats__marker,
.stats__cursor {
  stroke: rgba(255, 255, 255, 0.38);
  stroke-width: 1;
}

.stats__tick {
  fill: #8f8f9a;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.stats__label {
  fill: #e4e4ea;
  font-size: 12.5px;
  font-weight: 600;
}

/* Courbe : 2 px, extrémités arrondies. Elle se trace de gauche à droite quand le bloc
   arrive à l'écran, la partie bleue prenant le relais de la grise. */
.stats__line {
  fill: none;
  stroke: var(--other);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.stats__line--mine {
  stroke: var(--mine);
  stroke-width: 2.5;
  transition-duration: 0.8s;
  transition-delay: 0.95s;
}

.stats__area,
.stats__end {
  transition: opacity 0.7s ease 1.5s;
}

.stats__end circle {
  fill: var(--mine);
  stroke: #0a0b10;
  stroke-width: 2;
}

.stats__point {
  fill: #fff;
  stroke: #0a0b10;
  stroke-width: 2;
}

.js .stats:not(.is-visible) .stats__line {
  stroke-dashoffset: 1;
}

.js .stats:not(.is-visible) .stats__area,
.js .stats:not(.is-visible) .stats__end {
  opacity: 0;
}

.stats__tooltip {
  position: absolute;
  z-index: 2;
  width: max-content;
  max-width: min(240px, 80%);
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(14, 15, 20, 0.96);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.9);
  font-size: 12.5px;
  line-height: 1.4;
  pointer-events: none;
}

.stats__tooltip strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
}

.stats__tooltip span {
  color: #a9a9b4;
}

.stats__note {
  flex: 1 1 260px;
  color: var(--dim);
  font-size: 12.5px;
  line-height: 1.6;
}

/* Appels venus de YouTube, mois par mois : une barre par mois, grise avant mes vidéos,
   bleue ensuite. Les barres poussent depuis la ligne de base quand le bloc arrive à l'écran.
   --h (de 0 à 1, posé par main.js) est la hauteur du mois rapportée au meilleur mois. */
.leads__chart {
  --plot: 230px;
  --gap: clamp(6px, 2vw, 18px);
  display: flex;
  gap: var(--gap);
  margin-top: 30px;
}

.leads__month {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: 8px;
  outline-offset: 4px;
}

/* La plus haute barre occupe 82 % de la zone : le reste accueille son chiffre et le repère. */
.leads__plot {
  position: relative;
  height: var(--plot);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.leads__bar,
.leads__value {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.leads__bar {
  bottom: 0;
  width: min(64px, 78%);
  height: calc(var(--h) * 82%);
  border-radius: 4px 4px 0 0;
  background: var(--other);
  transform-origin: bottom;
  transition: transform 0.8s var(--ease) calc(0.3s + var(--i) * 0.09s), filter 0.25s;
}

.leads__month.is-mine .leads__bar {
  background: var(--mine);
}

.leads__month:hover .leads__bar,
.leads__month:focus .leads__bar {
  filter: brightness(1.25);
}

/* Le chiffre du mois, juste au-dessus de sa barre, dans la couleur du texte. */
.leads__value {
  bottom: calc(var(--h) * 82% + 6px);
  color: #e4e4ea;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.5s ease calc(0.9s + var(--i) * 0.09s);
}

.leads__name {
  display: block;
  margin-top: 9px;
  color: #8f8f9a;
  font-size: 12.5px;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}

.leads__name small {
  display: block;
  color: var(--dim);
  font-size: 11px;
}

/* Repère : ma première vidéo, un trait entre le dernier mois d'avant et le premier
   avec moi. Le texte se place à gauche du trait, au-dessus des barres d'avant. */
.leads__marker {
  position: absolute;
  top: -4px;
  left: calc(var(--gap) / -2);
  height: calc(var(--plot) + 4px);
  border-left: 1px dashed rgba(255, 255, 255, 0.38);
  pointer-events: none;
}

.leads__marker span {
  position: absolute;
  top: 0;
  right: 8px;
  color: #e4e4ea;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* Détail du mois au survol ou au toucher : posé juste au-dessus du chiffre de la barre. */
.leads__tip {
  max-width: 200px;
  top: calc(var(--plot) * (1 - var(--h) * 0.82) - 30px);
  left: 50%;
  display: grid;
  opacity: 0;
  transform: translate(-50%, calc(-100% + 4px));
  transition: opacity 0.2s, transform 0.2s;
}

.leads__month:first-child .leads__tip {
  left: 0;
  transform: translate(0, calc(-100% + 4px));
}

.leads__month:last-child .leads__tip {
  left: auto;
  right: 0;
  transform: translate(0, calc(-100% + 4px));
}

.leads__month:hover .leads__tip,
.leads__month:focus .leads__tip {
  opacity: 1;
  transform: translate(-50%, -100%);
}

.leads__month:first-child:hover .leads__tip,
.leads__month:first-child:focus .leads__tip,
.leads__month:last-child:hover .leads__tip,
.leads__month:last-child:focus .leads__tip {
  transform: translate(0, -100%);
}

.leads__tip span:first-child {
  color: #8f8f9a;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.js .leads:not(.is-visible) .leads__bar {
  transform: scaleY(0);
}

.js .leads:not(.is-visible) .leads__value {
  opacity: 0;
}

/* Chiffre d'affaires et prospects en réflexion, sous le graphique. */
.leads__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.leads__facts li {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.leads__facts strong {
  flex: none;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.leads__facts span {
  max-width: 230px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

/* Retour client : le message à gauche, la citation et le bouton de contact à droite */
.feedback {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 28px 48px;
  margin-top: 44px;
  padding: 34px;
}

.feedback__message {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.feedback__message img {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.feedback__message figcaption strong {
  font-size: 15.5px;
  font-weight: 600;
}

.feedback__message figcaption span {
  margin-left: 9px;
  color: var(--dim);
  font-size: 12.5px;
}

.feedback__message blockquote {
  display: grid;
  gap: 4px;
  margin: 6px 0 0;
  color: #e4e4ea;
  font-size: 15.5px;
  line-height: 1.5;
}

.mention {
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(110, 163, 255, 0.22);
  color: #c9dbff;
  font-weight: 500;
}

.feedback__side h3 {
  margin-top: 10px;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.feedback__side h3 + p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 15.5px;
}

.feedback__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 24px;
}

/* La capture dépasse du bas de la carte, comme un écran de téléphone. */
.result__proof {
  position: relative;
  align-self: center;
  width: min(250px, 100%);
  margin: auto 0 0;
  padding: 30px 0 0;
}

.result__proof img {
  width: 100%;
  aspect-ratio: 281 / 340;
  border: 6px solid #1b1b20;
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 0 0 1px var(--line-strong), 0 -10px 40px -12px rgba(59, 130, 246, 0.35);
  -webkit-mask-image: linear-gradient(#000 62%, transparent);
  mask-image: linear-gradient(#000 62%, transparent);
}

.result__proof figcaption {
  position: absolute;
  bottom: 14px;
  left: 50%;
  padding: 5px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(12, 12, 14, 0.85);
  color: #b4b4be;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  transform: translateX(-50%);
}

/* ==========================================================================
   Méthode
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.step {
  padding: 28px 24px 30px;
}

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

/* Bloc large sous les étapes : ce qui se passe après la mise en ligne */
.steps-after {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 16px 48px;
  margin-top: 20px;
  padding: 30px 32px;
}

.steps-after h3 {
  margin-top: 10px;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.steps-after > p {
  color: #b9b9c4;
  font-size: 15.5px;
  line-height: 1.7;
  text-wrap: pretty;
}

.step__num {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 40px;
  line-height: 1;
  color: rgba(110, 163, 255, 0.45);
}

.step__who {
  display: inline-block;
  margin-top: 16px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.14);
  color: var(--accent-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.step h3 {
  margin-top: 18px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.step p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14.5px;
}

/* ==========================================================================
   Témoignages
   ========================================================================== */

.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
}

.testimonial {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 30px 28px;
}

.testimonial__stars {
  color: var(--accent);
  letter-spacing: 3px;
}

.testimonial blockquote {
  margin: 0;
  color: #d6d6de;
  font-size: 15.5px;
  font-style: italic;
  line-height: 1.7;
}

.testimonial figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.testimonial img,
.testimonial__avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial__avatar {
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  font-weight: 600;
  font-size: 14px;
}

.testimonial strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.testimonial small {
  color: var(--dim);
  font-size: 12.5px;
}

/* ==========================================================================
   Formations
   ========================================================================== */

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

/* Chaque carte reprend l'identité de sa formation : --brand est sa couleur,
   le logo, la police et le bouton suivent le site d'origine. */
.training {
  --brand: 59, 130, 246;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 26px 28px;
  overflow: hidden;
}

.training:hover {
  border-color: rgba(var(--brand), 0.5);
  transform: translateY(-4px);
}

.training__done {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 6px;
  border: 1px solid rgba(var(--brand), 0.45);
  border-radius: 999px;
  background: rgba(var(--brand), 0.14);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.training__done::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgb(var(--brand)) center / 9px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.4l2.3 2.3 4.7-5'/%3E%3C/svg%3E");
}

.training__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  margin: 18px 0 16px;
  color: #fff;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.training__brand img {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 10px 24px -10px rgba(var(--brand), 0.7);
}

.training__what {
  color: #c2c2cc;
  font-size: 15px;
}

.training__benefit {
  align-self: stretch;
  margin: 22px 0 24px;
  padding: 16px 18px;
  border: 1px solid rgba(var(--brand), 0.28);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--brand), 0.2), rgba(var(--brand), 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.training__benefit span {
  color: rgb(var(--brand-soft, var(--brand)));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.training__benefit p {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.training__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin-top: auto;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.25s var(--ease), filter 0.25s, background-color 0.25s;
}

.training__link:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

/* Carte large : la formation à gauche, ses chiffres à droite. Sur petit écran,
   elle redevient une colonne, dans l'ordre du HTML. */
.training--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  grid-template-rows: auto auto auto 1fr;
  column-gap: 48px;
  justify-items: start;
  padding: 30px 32px 32px;
}

.training--wide > * {
  grid-column: 1;
}

.training--wide > .training__proof {
  grid-column: 2;
  grid-row: 1 / -1;
  justify-self: stretch;
  align-self: center;
}

.training--wide > .training__link {
  align-self: end;
  margin-top: 26px;
}

.training__proof-title {
  color: rgb(var(--brand-soft, var(--brand)));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.training__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 14px;
}

.training__stats strong {
  display: block;
  color: #fff;
  font-family: "Syne", var(--font-sans);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.training__stats span {
  display: block;
  margin-top: 9px;
  color: #c2c2cc;
  font-size: 13.5px;
  line-height: 1.4;
}

.training--wide .training__benefit {
  margin: 24px 0 0;
}

.training__source {
  margin-top: 12px;
  color: var(--dim);
  font-size: 12px;
}

/* Editing 360 : noir, bleu électrique, boutons en pilule blanche */
.training--e360 {
  --brand: 0, 89, 255;
  --brand-soft: 143, 180, 255;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(130, 150, 185, 0.3), transparent 60%),
    radial-gradient(100% 70% at 0% 100%, rgba(0, 89, 255, 0.3), transparent 65%),
    rgba(0, 0, 0, 0.35);
}

.training--e360 .training__link {
  border-radius: 999px;
  background: #fff;
  color: #000;
}

/* Secrets de Monteur Pro : bleu nuit, cyan, police Changa, boutons rectangulaires */
.training--smp {
  --brand: 11, 195, 239;
  background:
    radial-gradient(110% 70% at 50% 0%, rgba(24, 34, 55, 0.9), transparent 75%),
    linear-gradient(180deg, rgba(13, 22, 27, 0.5), rgba(12, 15, 19, 0.5));
}

.training--smp .training__brand {
  font-family: "Changa", var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
  color: #f3f3f7;
  text-transform: uppercase;
}

.training--smp .training__link {
  border-radius: 8px;
  background: rgb(11, 195, 239);
  color: #06161c;
  font-family: "Changa", var(--font-sans);
  font-size: 15px;
  text-transform: uppercase;
}

/* Crack Editing : noir violacé, dégradé rose-violet, diamant */
.training--crack {
  --brand: 224, 64, 251;
  --brand-soft: 240, 127, 255;
  background:
    radial-gradient(100% 60% at 50% 0%, rgba(155, 0, 217, 0.42), transparent 70%),
    rgba(3, 0, 5, 0.45);
}

.training--crack .training__brand {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.training--crack .training__link {
  border-radius: 12px;
  background: linear-gradient(135deg, #f57ff7, #e040fb 50%, #9b00d9);
  box-shadow: 0 0 0 1.5px rgba(155, 0, 217, 0.6), 0 0 24px rgba(155, 0, 217, 0.3);
  color: #fff;
  font-weight: 700;
}

/* Accelerator Program : dégradé rose-violet, police Syne, bouton rose en pilule */
.training--ap {
  --brand: 255, 19, 118;
  --brand-soft: 255, 150, 196;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(214, 61, 160, 0.42), transparent 60%),
    radial-gradient(110% 80% at 100% 100%, rgba(122, 62, 224, 0.4), transparent 65%),
    rgba(10, 10, 15, 0.45);
}

.training--ap .training__brand {
  font-family: "Syne", var(--font-sans);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.training--ap .training__link {
  border-radius: 999px;
  background: rgb(255, 19, 118);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ==========================================================================
   À propos
   ========================================================================== */

.about {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: clamp(40px, 7vw, 96px);
}

.about__visual {
  position: relative;
  width: min(420px, 100%);
  aspect-ratio: 1;
  margin-inline: auto;
}

.about__visual::before {
  content: "";
  position: absolute;
  inset: -18%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.22), transparent 65%);
}

.about__photo {
  position: absolute;
  inset: 14%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #26324d, #0c0e14 70%);
  box-shadow: 0 0 0 1px var(--line-strong), 0 0 0 12px rgba(255, 255, 255, 0.03), 0 0 0 13px var(--line);
  overflow: hidden;
}

.about__photo span {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(72px, 12vw, 120px);
  color: rgba(255, 255, 255, 0.85);
}

.about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

.badge {
  position: absolute;
  padding: 12px 18px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--glass-bg), rgba(0, 0, 0, 0.1);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  text-align: center;
  white-space: nowrap;
  animation: float 7s ease-in-out infinite;
}

.badge strong {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
}

.badge span {
  color: #a8a8b3;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.badge--1 { top: 4%; left: -4%; }
.badge--2 { top: 30%; right: -8%; animation-delay: -2.3s; }
.badge--3 { bottom: 6%; left: 2%; animation-delay: -4.6s; }

@keyframes float {
  50% {
    transform: translateY(-9px);
  }
}

.about__text h2 {
  font-size: clamp(34px, 4.6vw, 52px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.about__role {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 21px;
  color: var(--accent-soft);
}

.about__role ~ p {
  margin-top: 20px;
  color: #b9b9c4;
  font-size: 16.5px;
  line-height: 1.75;
  text-wrap: pretty;
}

.about__text .btn {
  margin-top: 32px;
}

/* ==========================================================================
   Offre
   ========================================================================== */

/* Les chiffres d'un client, rappelés en une ligne avant l'offre */
.offer-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 44px;
  margin-bottom: 24px;
  padding: 26px 32px;
}

.offer-proof .kicker {
  flex: 0 0 150px;
  line-height: 1.5;
}

/* Chaque chiffre au-dessus de sa légende : les trois tiennent sur une ligne. */
.offer-proof__list {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px 32px;
}

.offer-proof__list li {
  display: grid;
  align-content: start;
  gap: 6px;
}

.offer-proof__list strong {
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.offer-proof__list span {
  max-width: 190px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.offer {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 24px;
}

.offer__card {
  display: flex;
  flex-direction: column;
  padding: 40px 36px;
}

/* Le bouton reste en bas de la carte, quelle que soit la hauteur de la colonne voisine */
.offer__card .btn {
  margin-top: auto;
}

/* Colonne de droite : le comparatif, puis la prestation en supplément */
.offer__side {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.offer__side .compare {
  flex: 1;
}

.offer__card h3 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.offer__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 10px;
}

.offer__price em {
  font-size: 44px;
  line-height: 1.15;
}

.offer__price span {
  color: var(--dim);
  font-size: 14px;
  font-weight: 500;
}

.offer__desc {
  margin-top: 14px;
  color: var(--muted);
  font-size: 15.5px;
}

.checklist {
  display: grid;
  gap: 14px;
  margin: 28px 0 34px;
}

/* Prestation en supplément, distincte de ce qui est inclus dans le pack */
.offer__option {
  padding: 20px 24px;
  border: 1px dashed rgba(110, 163, 255, 0.4);
  border-radius: var(--radius);
  color: #c2c2cc;
  font-size: 14.5px;
  line-height: 1.6;
}

.offer__option strong {
  display: block;
  margin-bottom: 3px;
  color: var(--accent-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.checklist li,
.compare li {
  position: relative;
  padding-left: 34px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.checklist li::before,
.compare li::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 21px;
  height: 21px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: center / 11px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.4l2.3 2.3 4.7-5'/%3E%3C/svg%3E");
}

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.compare__col {
  padding: 40px 34px;
}

.compare__col h3 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.compare ul {
  display: grid;
  gap: 22px;
  margin-top: 28px;
}

.compare__col--before {
  color: #8d8d98;
}

.compare__col--before li {
  font-weight: 400;
}

.compare__col--before li::before {
  border-color: rgba(255, 255, 255, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%238d8d98' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 3l6 6M9 3l-6 6'/%3E%3C/svg%3E");
}

.compare__col--after {
  border-left: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(59, 130, 246, 0.16), rgba(59, 130, 246, 0.03) 70%);
}

.compare__col--after h3 {
  color: var(--accent-soft);
}

.compare__col--after li::before {
  border-color: var(--accent);
  background-color: var(--accent);
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq {
  display: grid;
  gap: 12px;
}

.faq__item {
  position: relative;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  transition: border-color 0.3s;
}

.faq__item:hover,
.faq__item.is-open {
  border-color: var(--line-strong);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 26px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  text-align: left;
}

.faq__icon {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform 0.45s var(--ease);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
}

.faq__icon::after {
  transform: rotate(90deg);
}

.faq__item.is-open .faq__icon {
  transform: rotate(45deg);
}

.faq__a {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.45s var(--ease), visibility 0.45s;
}

.js .faq__item:not(.is-open) .faq__a {
  grid-template-rows: 0fr;
  visibility: hidden;
}

.faq__a > div {
  overflow: hidden;
}

.faq__a p {
  padding: 0 26px 24px;
  max-width: 660px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.7;
}

/* ==========================================================================
   Contact & pied de page
   ========================================================================== */

.cta {
  padding-bottom: 110px;
  text-align: center;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 45% 55% at 50% 50%, rgba(37, 99, 235, 0.16), transparent 70%);
  pointer-events: none;
}

.cta p {
  max-width: 520px;
  margin: 20px auto 36px;
  color: var(--muted);
  font-size: 17.5px;
  text-wrap: pretty;
}

.site-footer {
  padding: 0 0 130px;
  text-align: center;
}

.site-footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}

.socials {
  display: flex;
  gap: 10px;
}

.socials:empty {
  display: none;
}

.socials a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: #d4d4dc;
  transition: background-color 0.25s, color 0.25s, transform 0.25s var(--ease);
}

.socials a:hover {
  background: #fff;
  color: #000;
  transform: translateY(-2px);
}

.site-footer__legal {
  color: var(--dim);
  font-size: 12.5px;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  margin-top: -12px;
  font-size: 12.5px;
}

.site-footer__links a {
  color: #8f8f9a;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.2);
  text-underline-offset: 3px;
  transition: color 0.25s;
}

.site-footer__links a:hover {
  color: #fff;
}

/* ==========================================================================
   Page « Mentions légales & confidentialité »
   ========================================================================== */

.legal {
  padding: calc(var(--header-h) + 56px) 0 90px;
}

.legal__intro {
  margin-bottom: 44px;
  text-align: center;
}

.legal__intro h1 {
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.legal__intro h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-soft);
}

.legal__intro p {
  margin-top: 14px;
  color: var(--dim);
  font-size: 14px;
}

.legal__block {
  margin-top: 20px;
  padding: 36px clamp(22px, 4vw, 40px);
  scroll-margin-top: calc(var(--header-h) + 12px);
}

.legal__block h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.legal__block h3 {
  margin-top: 30px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.legal__block p,
.legal__block li {
  color: #b9b9c4;
  font-size: 15px;
  line-height: 1.7;
}

.legal__block p,
.legal__block ul,
.legal__block dl {
  margin-top: 12px;
}

.legal__block ul {
  display: grid;
  gap: 8px;
  padding-left: 20px;
  list-style: disc;
}

.legal__block dl {
  display: grid;
  grid-template-columns: minmax(150px, max-content) 1fr;
  gap: 8px 24px;
  font-size: 15px;
  line-height: 1.6;
}

.legal__block dt {
  color: var(--dim);
}

.legal__block dd {
  margin: 0;
  color: #e4e4ea;
}

.legal__block a {
  color: var(--accent-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal__block strong {
  color: #fff;
  font-weight: 600;
}

/* Champ encore à remplir avant la mise en ligne */
mark.todo {
  padding: 1px 7px;
  border: 1px dashed rgba(250, 204, 21, 0.6);
  border-radius: 6px;
  background: rgba(250, 204, 21, 0.14);
  color: #fde68a;
  font-size: 0.93em;
}

.legal__consent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(110, 163, 255, 0.2);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.16), rgba(59, 130, 246, 0.04));
}

.legal__consent p {
  flex: 1 1 240px;
  margin: 0;
  color: #e4e4ea;
}

/* ==========================================================================
   Ligne d'avancement de la lecture
   ========================================================================== */

/* Fine ligne blanche collée au bas de l'écran. Sa longueur suit le défilement.
   En fin de page elle rejoint le trait du pied de page et en prend la forme et le gris.
   Tout est calculé par main.js à partir de la position de défilement (variables --bar-*),
   sans animation dans le temps : à une position donnée correspond toujours le même dessin,
   que l'on descende ou que l'on remonte. */
.progress {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 70;
  width: var(--bar-width, 0px);
  height: var(--bar-height, 2px);
  background: rgba(255, 255, 255, var(--bar-alpha, 1));
  translate: var(--bar-left, 0px) var(--bar-y, 0px);
  pointer-events: none;
}

/* Le trait d'origine s'efface : c'est la ligne d'avancement qui prend sa place. */
.is-line-slot {
  border-top-color: transparent !important;
}

/* ==========================================================================
   Bouton WhatsApp flottant
   ========================================================================== */

.dock {
  position: fixed;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 22px 6px 6px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.14);
  background-image: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(200%) brightness(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(200%) brightness(1.08);
  box-shadow:
    0 22px 44px -12px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 18px rgba(255, 255, 255, 0.04);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  /* --dock-shift : décalage vertical calculé par main.js quand le bouton se pose en bas de page.
     Déplacement et agrandissement sont des propriétés séparées : le zoom ne fausse pas la position. */
  translate: -50% var(--dock-shift, 0px);
  scale: 1;
  transition:
    translate 0.45s var(--ease),
    transform 0.3s var(--ease),
    scale 0.45s var(--ease),
    opacity 0.35s,
    visibility 0.35s,
    background-color 0.45s,
    border-color 0.3s,
    box-shadow 0.45s;
}

/* Arrivé en bas de page, le bouton flottant vient se poser à la place du bouton bleu
   et en prend l'apparence : un seul bouton au lieu de deux. Il suit alors la page
   sans délai, d'où l'absence de transition sur son déplacement. */
.dock.is-docked {
  scale: 1.12;
  border-color: rgba(160, 196, 255, 0.6);
  background-color: #3b82f6;
  box-shadow:
    0 16px 44px -12px rgba(59, 130, 246, 0.85),
    0 0 0 1px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 18px rgba(255, 255, 255, 0.08);
  transition-property: transform, scale, opacity, visibility, background-color, border-color, box-shadow;
}

/* L'emplacement garde sa place dans la page mais reste invisible : c'est le bouton flottant qu'on voit. */
.dock-slot {
  visibility: hidden;
}

/* Caché tant qu'on est en haut de la page d'accueil, pour laisser le premier écran dégagé.
   La classe est posée par main.js ; sans JavaScript le bouton reste toujours visible. */
.js .dock:not(.is-visible) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  translate: -50% 28px;
}

.dock:hover {
  transform: translateY(-3px);
  border-color: rgba(37, 211, 102, 0.55);
  box-shadow:
    0 26px 50px -12px rgba(0, 0, 0, 0.85),
    0 0 34px -6px rgba(37, 211, 102, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 0 18px rgba(255, 255, 255, 0.05);
}

.dock__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: #fff;
}

.dock__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--whatsapp);
  animation: dock-ping 2.8s ease-out infinite;
}

@keyframes dock-ping {
  0% { transform: scale(1); opacity: 0.7; }
  60%, 100% { transform: scale(1.55); opacity: 0; }
}

/* ==========================================================================
   Adaptation aux écrans
   ========================================================================== */

@media (max-width: 1020px) {
  .nav a {
    padding-inline: 12px;
  }

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

  .services,
  .trainings,
  .results {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
  }

  .training--wide {
    display: flex;
    padding: 26px 26px 28px;
  }

  .training--wide > .training__proof {
    align-self: stretch;
    margin-top: 22px;
  }

  .training__stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .training__stats li {
    display: grid;
    grid-template-columns: 112px 1fr;
    align-items: baseline;
    gap: 14px;
  }

  .training__stats strong {
    font-size: 20px;
  }

  .training__stats span {
    margin-top: 0;
  }

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

  /* En une colonne : le pack, puis l'option en supplément, puis le comparatif */
  .offer__side {
    display: contents;
  }

  .offer__option {
    order: 1;
  }

  .compare {
    order: 2;
  }
}

@media (max-width: 860px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .nav {
    display: none;
  }

  .section {
    padding: 84px 0;
  }

  .section-head {
    margin-bottom: 44px;
  }

  .about {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about__visual {
    width: min(320px, 82%);
  }

  .work {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .work-groups {
    gap: 56px;
  }

  .work-group {
    grid-template-columns: 1fr;
  }

  .work-group__intro {
    position: static;
  }

  .steps-after {
    grid-template-columns: 1fr;
    padding: 26px 24px;
  }

  .feedback {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .stats {
    padding: 24px 20px;
  }
}

@media (max-width: 600px) {
  :root {
    --header-h: 64px;
    --glass-blur: blur(14px) saturate(160%);
  }

  .container {
    width: calc(100% - 36px);
  }

  .hide-sm {
    display: none;
  }

  /* Sur téléphone, l'accueil est resserré pour que le bandeau des clients arrive le plus tôt possible. */
  .hero {
    --hero-pad: 18px;
    padding-top: calc(var(--header-h) + 12px);
  }

  .hero__content {
    padding-block: 16px;
  }

  .hero__actions {
    margin-top: 26px;
  }

  .hero__trained {
    gap: 12px;
    padding: 14px 0 24px;
  }

  .brand {
    gap: 9px;
    font-size: 14.5px;
  }

  .brand img {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }

  /* Le nom le plus long passe sur sa propre ligne : deux rangées au lieu de trois. */
  .brand:nth-child(2) {
    order: 1;
  }

  .hero__clients {
    padding: 12px 0 16px;
  }

  .btn--block {
    padding-inline: 16px;
  }

  .hero__actions {
    flex-direction: column;
    width: 100%;
    max-width: 340px;
  }

  .hero__trained-list {
    gap: 12px 22px;
  }

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

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

  .compare__col {
    padding: 30px 24px;
  }

  .compare__col--after {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .offer__card {
    padding: 32px 24px;
  }

  .offer-proof {
    padding: 24px;
  }

  .offer-proof .kicker {
    flex-basis: 100%;
  }

  .offer-proof__list {
    flex-basis: 100%;
    grid-template-columns: 1fr 1fr;
  }

  .offer-proof__list strong {
    font-size: 28px;
  }

  .leads__chart {
    --plot: 190px;
  }

  .leads__facts strong {
    font-size: 26px;
  }

  /* Sur téléphone, la chaîne et la date passent sous le nom plutôt que de se couper. */
  .feedback__message figcaption span {
    display: block;
    margin-left: 0;
  }

  .legal__block dl {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .legal__block dd {
    margin-bottom: 10px;
  }

  .consent {
    padding: 28px 20px 24px;
  }

  .consent__actions .btn {
    width: 100%;
    white-space: normal;
  }

  .faq__q {
    padding: 19px 20px;
    font-size: 16px;
  }

  .faq__a p {
    padding: 0 20px 20px;
  }

  .badge {
    padding: 9px 13px;
  }

  .badge strong {
    font-size: 16px;
  }

  .badge--1 { left: -8%; }
  .badge--2 { right: -12%; }
  .badge--3 { left: -4%; }

  .work__meta {
    inset: auto 14px 12px 14px;
    gap: 11px;
  }

  .work__play {
    width: 40px;
    height: 40px;
  }
}

/* Écrans peu hauts (petits portables) : l'accueil se resserre pour que
   les boutons restent au-dessus du bouton WhatsApp flottant. */
@media (max-height: 720px) and (min-width: 601px) {
  .hero {
    padding-top: calc(var(--header-h) + 8px);
  }

  .hero__content {
    padding-block: 16px;
  }

  .hero__title {
    font-size: clamp(34px, 5vw, 56px);
  }

  .hero__actions {
    margin-top: 24px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-blur: none;
    --glass-bg: linear-gradient(var(--surface-2), var(--surface));
  }
}

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

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

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  /* Sans animation, le bandeau des clients devient une simple rangée centrée. */
  .marquee__track {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    animation: none;
  }

  .marquee__item[aria-hidden="true"] {
    display: none;
  }
}