/* ==========================================================================
   Norma : site vitrine, dans le langage d'Allgood Studio
   Blanc, encre presque noire et un vert lime réservé aux signaux. Grotesque
   (Onest) pour les titres, un mot en italique serif (Instrument Serif) comme
   ponctuation, chasse fixe (Geist Mono) pour les annotations.
   Les couleurs sont typées (@property) pour basculer en douceur en mode nuit.
   ========================================================================== */

@property --taste-primary {
  syntax: '<color>';
  inherits: true;
  initial-value: #3a1610;
}

@property --taste-secondary {
  syntax: '<color>';
  inherits: true;
  initial-value: #ec4b22;
}

@property --loader-reveal {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vh;
}

@property --fond { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --surface { syntax: '<color>'; inherits: true; initial-value: #fafafa; }
@property --surface-haute { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --verre { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --verre-bord { syntax: '<color>'; inherits: true; initial-value: rgba(13, 13, 13, 0.08); }
@property --encre { syntax: '<color>'; inherits: true; initial-value: #0d0d0d; }
@property --ardoise { syntax: '<color>'; inherits: true; initial-value: #3b3a35; }
@property --gris { syntax: '<color>'; inherits: true; initial-value: #767369; }
@property --trait { syntax: '<color>'; inherits: true; initial-value: rgba(13, 13, 13, 0.1); }
@property --trait-fort { syntax: '<color>'; inherits: true; initial-value: rgba(13, 13, 13, 0.26); }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #c6fb50; }
@property --accent-fort { syntax: '<color>'; inherits: true; initial-value: #5fa314; }
@property --accent-pale { syntax: '<color>'; inherits: true; initial-value: #f1fcd9; }
@property --bouton { syntax: '<color>'; inherits: true; initial-value: #0d0d0d; }
@property --bouton-texte { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --sol-lumiere { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --sol-milieu { syntax: '<color>'; inherits: true; initial-value: #f7f7f6; }
@property --sol-bas { syntax: '<color>'; inherits: true; initial-value: #eeeeec; }

:root {
  /* Palette (jour) */
  --fond: #ffffff;
  --surface: #fafafa;
  --surface-haute: #ffffff;
  --verre: #ffffff;
  --verre-bord: rgba(13, 13, 13, 0.08);
  --encre: #0d0d0d;
  --ardoise: #3b3a35;
  --gris: #767369;
  --trait: rgba(13, 13, 13, 0.1);
  --trait-fort: rgba(13, 13, 13, 0.26);
  --accent: #c6fb50;
  --accent-fort: #5fa314;
  --accent-pale: #f1fcd9;
  --bouton: #0d0d0d;
  --bouton-texte: #ffffff;
  --sol-lumiere: #ffffff;
  --sol-milieu: #f7f7f6;
  --sol-bas: #eeeeec;
  --nuit: #0d0d0d;
  --craie: #ffffff;
  --blanc: #ffffff;

  /* Typo */
  --font-display: 'Onest', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Instrument Serif', 'Times New Roman', serif;
  --font-body: 'Onest', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Espacements */
  --pad: clamp(1.25rem, 2.8vw, 2.5rem);
  --nav-h: 4.75rem;
  --nav-h-hero: clamp(4.75rem, 13vh, 7.5rem);
  --ease: cubic-bezier(0.2, 0.9, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  transition:
    --taste-primary 0.6s ease-in-out,
    --taste-secondary 0.6s ease-in-out,
    --fond 0.9s cubic-bezier(0.65, 0, 0.35, 1),
    --surface 0.9s cubic-bezier(0.65, 0, 0.35, 1),
    --surface-haute 0.9s cubic-bezier(0.65, 0, 0.35, 1),
    --verre 0.9s cubic-bezier(0.65, 0, 0.35, 1),
    --verre-bord 0.9s cubic-bezier(0.65, 0, 0.35, 1),
    --encre 0.9s cubic-bezier(0.65, 0, 0.35, 1),
    --ardoise 0.9s cubic-bezier(0.65, 0, 0.35, 1),
    --gris 0.9s cubic-bezier(0.65, 0, 0.35, 1),
    --trait 0.9s cubic-bezier(0.65, 0, 0.35, 1),
    --trait-fort 0.9s cubic-bezier(0.65, 0, 0.35, 1),
    --accent 0.9s cubic-bezier(0.65, 0, 0.35, 1),
    --accent-fort 0.9s cubic-bezier(0.65, 0, 0.35, 1),
    --accent-pale 0.9s cubic-bezier(0.65, 0, 0.35, 1),
    --bouton 0.9s cubic-bezier(0.65, 0, 0.35, 1),
    --bouton-texte 0.9s cubic-bezier(0.65, 0, 0.35, 1),
    --sol-lumiere 0.9s cubic-bezier(0.65, 0, 0.35, 1),
    --sol-milieu 0.9s cubic-bezier(0.65, 0, 0.35, 1),
    --sol-bas 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Mode nuit : la rangée de téléphones présentée comme sur les cartes sombres d'Allgood. */
:root.is-night {
  --fond: #0d0d0d;
  --surface: #151515;
  --surface-haute: #1c1c1c;
  --verre: #151515;
  --verre-bord: rgba(255, 255, 255, 0.08);
  --encre: #ffffff;
  --ardoise: #c9c8c3;
  --gris: #8f8d86;
  --trait: rgba(255, 255, 255, 0.12);
  --trait-fort: rgba(255, 255, 255, 0.3);
  --accent: #c6fb50;
  --accent-fort: #c6fb50;
  --accent-pale: #22300d;
  --bouton: #c6fb50;
  --bouton-texte: #0d0d0d;
  --sol-lumiere: #161616;
  --sol-milieu: #0d0d0d;
  --sol-bas: #060606;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: clamp(0.9rem, 0.45rem + 0.55vw, 1.0625rem);
  scrollbar-width: none;
}

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: hidden;
}

h1,
h2,
h3,
p,
ol,
ul {
  margin: 0;
  padding: 0;
  font-weight: inherit;
}

ol,
ul {
  list-style: none;
}

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

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

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

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

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 20000;
  padding: 0.75rem 1rem;
  background: var(--encre);
  color: var(--fond);
  font-size: 0.875rem;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Lenis */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* ---------- Typographie ---------- */

.label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.display-xl,
.display-l {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.display-xl {
  font-size: clamp(2.8rem, 5.6vw, 5.8rem);
  line-height: 1.02;
}

.display-l {
  font-size: clamp(2.2rem, 3.5vw, 3.6rem);
  line-height: 1.04;
}

/* Le mot en italique serif qui ponctue chaque titre */
.ital {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}

/* Petit titre : annotation en chasse fixe, précédée d'un trait court. */
.eyebrow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--gris);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: '';
  flex: none;
  width: 1.6rem;
  height: 1px;
  background: var(--encre);
  transform-origin: left center;
}

.is-upper {
  text-transform: uppercase;
}

/* Masques SplitText : un peu d'air sous les lignes pour les jambages. */
.line-mask {
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

/* ---------- Logo ---------- */

.logo {
  display: block;
  height: 1.35rem;
  width: auto;
  aspect-ratio: 1384 / 305;
  color: currentColor;
  overflow: visible;
}

/* ---------- Fonds ---------- */

body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.6s;
}

/* Sol du studio : il monte à la fin du chargement. */
body::before {
  height: 100vh;
  background:
    radial-gradient(60% 55% at 72% 38%, var(--sol-lumiere) 0%, transparent 70%),
    linear-gradient(9deg, var(--sol-bas) -30%, var(--sol-milieu) 24%, var(--fond) 62%);
  transform: translateY(var(--loader-reveal, 100vh));
  will-change: transform;
}

/* Halo du métier actif, très doux sur le sable. */
body::after {
  background: radial-gradient(
    80% 110% at 70% 110%,
    color-mix(in srgb, var(--taste-secondary) 26%, var(--fond)) 0%,
    color-mix(in srgb, var(--taste-secondary) 8%, var(--fond)) 45%,
    var(--fond) 85%
  );
  opacity: 0;
}

body.is-profile-active::after {
  opacity: 1;
}

.gradient_overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--fond) 80%, transparent) 100%);
}

canvas.webgl {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

/* ---------- Boutons et liens ---------- */

.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  height: 3rem;
  padding: 0 1.5rem;
  border-radius: 999px;
  background: var(--bouton);
  color: var(--bouton-texte);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 14px 40px -16px rgba(15, 15, 14, 0.55);
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease),
    background-color 0.35s var(--ease),
    color 0.35s var(--ease);
}

/* Halo lime qui s'allume au survol */
.button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle, rgba(198, 251, 80, 0.55), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 60px -20px rgba(15, 15, 14, 0.7);
}

.button:hover::before {
  opacity: 1;
}

.button:active {
  transform: scale(0.98);
}

/* Pastille ronde de la flèche : elle passe au lime et s'incline au survol. */
.button_arrow {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--bouton-texte);
  color: var(--bouton);
  transition:
    transform 0.55s var(--ease),
    background-color 0.35s var(--ease),
    color 0.35s var(--ease);
}

.button:hover .button_arrow {
  transform: translate(2px, -2px) rotate(-6deg);
  background: var(--accent);
  color: #0d0d0d;
}

.button svg {
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button.has-arrow {
  height: 3.6rem;
  padding: 0 0.55rem 0 1.75rem;
}

.button.is-outline {
  background: transparent;
  color: var(--encre);
  box-shadow: inset 0 0 0 1px var(--trait-fort);
}

.button.is-outline .button_arrow {
  background: var(--encre);
  color: var(--fond);
}

.button.is-outline:hover {
  background: var(--encre);
  color: var(--fond);
  box-shadow: 0 24px 60px -20px rgba(15, 15, 14, 0.5);
}

.button.is-light {
  background: var(--accent);
  color: #0d0d0d;
}

.button.is-light .button_arrow {
  background: #0d0d0d;
  color: var(--accent);
}

.button.is-light::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.65), transparent 65%);
}

.button.is-small {
  height: 2.6rem;
  padding: 0 1.25rem;
  font-size: 0.8125rem;
  box-shadow: none;
}

.button.is-small.has-arrow {
  padding: 0 0.4rem 0 1.25rem;
}

.button.is-small .button_arrow {
  width: 1.6rem;
  height: 1.6rem;
}

.button.is-full {
  width: 100%;
}

.button_text .char {
  will-change: transform;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: auto;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size 0.4s var(--ease);
}

.text-link:hover {
  background-size: 100% 1px;
}

.round-arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--encre);
  border-radius: 50%;
  color: var(--encre);
  pointer-events: auto;
  transition:
    background-color 0.25s,
    color 0.25s;
}

.round-arrow:hover {
  background: var(--encre);
  color: var(--fond);
}

.round-arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Navigation ---------- */

.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  background: color-mix(in srgb, var(--fond) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
  transition:
    background-color 0.5s,
    border-color 0.5s;
}

.scroll_track {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
}

.scroll_indicator {
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  background: var(--accent);
}

.navbar_container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  padding: 0 var(--pad);
  transition: height 0.6s var(--ease);
}

.navbar_brand .logo {
  height: 1.45rem;
  transition: height 0.6s var(--ease);
}

.navbar_links {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  display: flex;
}

.nav_item {
  position: relative;
}










/* Menus déroulants */
/* Pont invisible : la souris passe du lien au menu sans le refermer. */
.nav_dropdown::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 1.25rem;
}

.nav_dropdown {
  position: absolute;
  top: calc(100% + 0.9rem);
  border-radius: 1rem;
  left: -1.25rem;
  min-width: 15rem;
  display: flex;
  flex-direction: column;
  padding: 0.6rem;
  background: var(--surface);
  box-shadow: 0 18px 40px -18px rgba(16, 26, 46, 0.3);
  opacity: 0;
  visibility: hidden;
  translate: 0 6px;
  transition:
    opacity 0.3s,
    translate 0.3s var(--ease),
    visibility 0.3s;
}

.nav_dropdown a {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  font-size: 0.9375rem;
  transition: background-color 0.2s;
}

.nav_dropdown a:hover {
  background: var(--fond);
}

.nav_num {
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--accent-fort);
}

.nav_item:not(.is-dismissed):hover .nav_dropdown,
.nav_item:not(.is-dismissed):focus-within .nav_dropdown {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}


.navbar_actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.navbar_mail {
  font-size: 0.8125rem;
  transition: color 0.2s;
}

.navbar_mail:hover {
  color: var(--accent-fort);
}

.navbar_divider {
  width: 1px;
  height: 1.6rem;
  background: var(--trait-fort);
}

/* Sur l'accueil, la barre s'agrandit et se fond dans le décor. */
.navbar.is-hero {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: transparent;
}

.navbar.is-hero .navbar_container {
  height: var(--nav-h-hero);
}

.navbar.is-hero .navbar_brand .logo {
  height: clamp(2.4rem, 3.9vw, 3.75rem);
}

.navbar.is-hero .button.is-small {
  height: 2.9rem;
  padding: 0 1.5rem;
}

.navbar_menu-button {
  display: none;
  align-items: center;
  gap: 0.6rem;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.navbar_menu-icon {
  position: relative;
  width: 18px;
  height: 9px;
}

.navbar_menu-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition:
    transform 0.4s var(--ease),
    top 0.4s var(--ease);
}

.navbar_menu-icon span:first-child {
  top: 0;
}

.navbar_menu-icon span:last-child {
  top: calc(100% - 1.5px);
}

.navbar_menu-button[aria-expanded='true'] .navbar_menu-icon span:first-child {
  top: calc(50% - 0.75px);
  transform: rotate(45deg);
}

.navbar_menu-button[aria-expanded='true'] .navbar_menu-icon span:last-child {
  top: calc(50% - 0.75px);
  transform: rotate(-45deg);
}

.navbar_menu {
  display: none;
}

/* ---------- Chargement ---------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Teintes du coucher de soleil, le temps que la photo arrive */
  background: linear-gradient(180deg, #b9bcc6 0%, #ecd3bc 58%, #d9a67c 100%);
  color: #0d0d0d;
}

.loader_scene {
  position: absolute;
  inset: 0;
}

/* La photo se révèle puis continue de reculer lentement. */
.loader_photo {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* Lumière plus douce que la photo brute, comme sur la maquette */
  filter: saturate(0.76) brightness(1.07);
  opacity: 0;
  transform: scale(1.09);
  transition:
    opacity 1.2s var(--ease-out),
    transform 9s cubic-bezier(0.16, 1, 0.3, 1);
}

.loader_photo.is-loaded {
  opacity: 1;
  transform: scale(1);
}

/* Voile clair : le ciel s'adoucit et le logo noir reste lisible. */
.loader_veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 55% at 50% 48%, rgba(255, 244, 232, 0.28), transparent 75%),
    rgba(255, 240, 232, 0.2);
}

/* Bandeau vitré du haut */
.loader_top {
  position: absolute;
  top: clamp(0.9rem, 2.7vh, 1.75rem);
  left: clamp(0.9rem, 3vw, 3rem);
  right: clamp(0.9rem, 3vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: clamp(3.5rem, 5.5vw, 5.4rem);
  padding: 0 clamp(1rem, 2vw, 2rem) 0 clamp(1rem, 1.6vw, 1.6rem);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.36);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 18px 44px -30px rgba(50, 35, 20, 0.5);
  animation: loader-drop 1.1s var(--ease-out) 0.2s backwards;
}

.loader_brand,
.loader_tags {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 2.5rem);
}

.loader_brand .logo {
  height: clamp(1.35rem, 2vw, 2rem);
}

.loader_divider {
  flex: none;
  width: 1px;
  height: 1.4rem;
  background: rgba(13, 13, 13, 0.55);
}

.loader_tagline {
  font-size: clamp(0.9375rem, 1.25vw, 1.25rem);
}

.loader_tags {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(0.6875rem, 1.1vw, 1.0625rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Bloc central : logo, barre et légende font la même largeur */
.loader_center {
  position: relative;
  width: clamp(15rem, 27.6vw, 30rem);
  text-align: center;
}

.loader_mark-wrap {
  animation: loader-mark 1.3s var(--ease-out) 0.35s backwards;
}

.loader_mark-wrap .logo {
  width: 100%;
  height: auto;
}

.loader_progress {
  position: relative;
  margin-top: clamp(1.5rem, 2.6vw, 2.5rem);
  animation: loader-rise 1s var(--ease-out) 0.7s backwards;
}

.loader_bar {
  height: clamp(0.7rem, 1.05vw, 1rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Le remplissage glisse dans la piste : son bout arrondi et son dégradé ne se déforment pas. */
.loader_bar-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #0d0d0d 0%, #0d0d0d 55%, #5c5a57 100%);
  translate: -100% 0;
}

.loader_percent {
  position: absolute;
  top: 50%;
  left: calc(100% + clamp(0.6rem, 1.2vw, 1.15rem));
  translate: 0 -50%;
  font-weight: 600;
  font-size: clamp(0.875rem, 1.25vw, 1.25rem);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.loader_caption {
  margin-top: clamp(0.9rem, 1.4vw, 1.4rem);
  font-style: italic;
  font-size: clamp(0.9375rem, 1.25vw, 1.25rem);
  animation: loader-rise 1s var(--ease-out) 0.9s backwards;
}

@keyframes loader-drop {
  from {
    opacity: 0;
    transform: translateY(-1.5rem);
  }
}

@keyframes loader-mark {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 -10% 0);
    transform: none;
  }
}

@keyframes loader-rise {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

/* ---------- Sections (espaceurs du scroll) et couches fixes ---------- */

.main {
  position: relative;
}

.section {
  position: relative;
  min-height: 125svh;
  pointer-events: none;
}

.layer {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  visibility: hidden;
}

/* 0 · Accueil */

/* Décor derrière les tablettes : une arche claire et des rais de lumière */
.hero_backdrop {
  z-index: 0;
  overflow: hidden;
}



.hero_intro {
  position: absolute;
  left: var(--pad);
  top: calc(var(--nav-h-hero) + clamp(1rem, 5vh, 4rem));
  width: min(37rem, 40vw);
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.hero_intro .eyebrow {
  margin-bottom: 0.4rem;
}

.hero_lead {
  max-width: 29rem;
  color: var(--ardoise);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.hero_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 0.6rem;
}

/* Bandeau du bas : choix du métier puis trois points forts */
.hero_strip {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: clamp(1.25rem, 4vh, 2.75rem);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: stretch;
  padding-top: clamp(1.25rem, 3.5vh, 2.25rem);
  border-top: 1px solid var(--trait);
  pointer-events: auto;
}

.selector {
  padding-right: 2.5rem;
}

.selector_head {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Le compteur ne s'affiche qu'en gros plan : l'accueil montre seulement le nom du métier. */
.gamme_container:not(.is-closeup) .selector_head {
  display: none;
}

.selector_count {
  letter-spacing: 0.14em;
}

.selector_track {
  position: relative;
  width: 4.5rem;
  height: 1rem;
  cursor: pointer;
  touch-action: none;
}

.selector_ticks {
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--trait-fort);
}

.selector_ticks span {
  display: none;
}

.selector_thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: calc(100% / 6);
  height: 2px;
  translate: 0 -50%;
  background: var(--encre);
}

.selector_row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.35rem;
}

.selector_titles {
  position: relative;
  flex: 1;
  height: 3.4rem;
}

.selector_slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.1rem, 2.9vw, 2.9rem);
  letter-spacing: -0.015em;
  line-height: 1;
  white-space: nowrap;
}

.hero_features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hero_features li {
  display: flex;
  gap: 1.1rem;
  padding: 0.25rem 1.5rem 0.25rem 2.25rem;
  border-left: 1px solid var(--trait);
}

.hero_features svg {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: var(--encre);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero_feature-title {
  margin-bottom: 0.45rem;
  font-weight: 500;
  font-size: 0.9375rem;
}

.hero_feature-text {
  color: var(--gris);
  font-size: 0.8125rem;
  line-height: 1.55;
}

/* 1 · Le logiciel du métier : grand titre à gauche, téléphone au centre, cotes à droite */

.profile_container {
  display: flex;
  align-items: center;
  padding: var(--nav-h) var(--pad) 0;
}

.profile_main {
  width: min(38rem, 41vw);
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  margin-top: -5vh;
}

.profile_stack {
  position: relative;
  width: 100%;
  height: clamp(24rem, 52vh, 31rem);
}

.profile_desc {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.6rem;
}

.profile_desc .display-xl {
  font-size: clamp(2.8rem, 4.7vw, 5rem);
  line-height: 0.98;
}

.profile_desc .eyebrow {
  margin-bottom: 0.2rem;
}

.profile_p {
  max-width: 31rem;
  color: var(--ardoise);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.profile_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.profile_list {
  display: none;
}

/* En gros plan, le bandeau du bas ne garde que le compteur et les flèches. */
.gamme_container.is-closeup .selector_titles {
  display: none;
}

.gamme_container.is-closeup .selector_row {
  margin-top: 1rem;
}

.callouts {
  position: absolute;
  inset: 0;
}

.callouts_lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.callouts_lines path {
  fill: none;
  stroke: var(--trait-fort);
  stroke-width: 1;
}

.callouts_lines circle {
  fill: var(--fond);
  stroke: var(--encre);
  stroke-width: 1.25;
}

.callout {
  position: absolute;
  right: calc(var(--pad) + 1.5rem);
  width: min(21rem, 24vw);
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
}

.callout:nth-of-type(1) {
  top: 23%;
}

.callout:nth-of-type(2) {
  top: 41%;
}

.callout:nth-of-type(3) {
  top: 59%;
}

.callout_icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.85rem;
  background: var(--surface);
  box-shadow: 0 14px 32px -16px rgba(16, 26, 46, 0.4);
}

.callout_icon svg {
  width: 1.45rem;
  height: 1.45rem;
  fill: none;
  stroke: var(--encre);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.callout_body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-top: 0.2rem;
}

.callout_title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.45vw, 1.45rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.callout_text {
  color: var(--gris);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* 2 à 5 · La méthode : texte à gauche, rapport qui se remplit au dos du téléphone */

.benefits_container {
  display: flex;
  align-items: center;
  padding: var(--nav-h) var(--pad) 0;
}

.benefits_text {
  width: min(36rem, 40vw);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin-top: -6vh;
}

.step_head {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  margin-top: 0.6rem;
}

/* Grand numéro en italique serif, suivi de « sur 04 » en chasse fixe */
.step_num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(4.6rem, 7.5vw, 7.6rem);
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: var(--encre);
}

.step_num span {
  margin-left: 0.6rem;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris);
}

.step_when {
  padding: 0.45rem 0.8rem;
  margin-bottom: 0.4rem;
  box-shadow: inset 0 0 0 1px var(--trait-fort);
  color: var(--encre);
}

.benefits_text .display-xl {
  font-size: clamp(2.8rem, 4.6vw, 4.8rem);
  line-height: 0.98;
}

.benefits_p {
  max-width: 32rem;
  color: var(--ardoise);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.step_compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0.4rem 0 0;
  border-top: 1px solid var(--trait-fort);
}

.step_compare > div {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1rem 1.25rem 0 0;
}

.step_compare > div + div {
  padding-left: 1.25rem;
  border-left: 1px solid var(--trait);
}

.step_compare dt {
  color: var(--gris);
}

.step_compare > div + div dt {
  color: var(--accent-fort);
}

.step_compare dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.step_old {
  color: var(--gris);
  /* Le trait se dessine sur chaque ligne, même si le texte passe à la ligne. */
  background: linear-gradient(var(--encre), var(--encre)) 0 58% / calc(var(--benefits-line, 0) * 100%) 1px no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Frise : quatre segments qui se remplissent au fil des étapes */
.steps_nav {
  position: fixed;
  left: var(--pad);
  bottom: clamp(1.75rem, 5vh, 3rem);
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  width: min(36rem, 40vw);
  visibility: hidden;
}

.steps_item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  color: var(--gris);
  font-size: 0.875rem;
  transition: color 0.3s;
}

.steps_bar {
  position: relative;
  flex: 0 0 100%;
  height: 2px;
  margin-bottom: 0.7rem;
  background: var(--trait);
  overflow: hidden;
}

.steps_bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--encre);
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    transform 0.7s var(--ease),
    background-color 0.3s;
}

.steps_num {
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
}

.steps_item:hover,
.steps_item.is-done,
.steps_item.is-active {
  color: var(--encre);
}

.steps_item.is-done .steps_bar::after {
  transform: scaleX(1);
}

.steps_item.is-active .steps_bar::after {
  transform: scaleX(1);
  background: var(--accent);
}

/* 6 · Engagements : texte à gauche, téléphone penché sur la pierre, cotes à droite,
   quatre bénéfices en bandeau */

.argument_container {
  display: flex;
  align-items: center;
  padding: var(--nav-h) var(--pad) 0;
}

.argument_main {
  width: min(48rem, 50vw);
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin-top: -14vh;
}

.argument_main .display-xl {
  font-size: clamp(2.9rem, 4.8vw, 5rem);
  line-height: 0.98;
}

.argument_p {
  max-width: 33rem;
  color: var(--ardoise);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.argument_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 0.4rem;
}

.argument_container .callout:nth-of-type(1) {
  top: 19%;
}

.argument_container .callout:nth-of-type(2) {
  top: 35%;
}

.argument_container .callout:nth-of-type(3) {
  top: 51%;
}

.benefits_strip {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  padding-top: clamp(1.25rem, 3.5vh, 2rem);
  border-top: 1px solid var(--trait);
  background: linear-gradient(180deg, color-mix(in srgb, var(--fond) 70%, transparent), var(--fond) 40%);
}

.benefits_strip ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.benefits_strip li {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 0.25rem 1.5rem;
  border-left: 1px solid var(--trait);
}

.benefits_strip li:first-child {
  padding-left: 0;
  border-left: 0;
}

.benefit_icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 10px 26px -14px rgba(16, 26, 46, 0.35);
}

.benefit_icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: var(--encre);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.benefit_title {
  margin-bottom: 0.4rem;
  font-weight: 500;
  font-size: 0.9375rem;
}

.benefit_text {
  color: var(--gris);
  font-size: 0.8125rem;
  line-height: 1.55;
}

/* 7 · La rangée de téléphones : texte et atouts à gauche, rangée en perspective à droite */

.packshot_container {
  padding: var(--nav-h) var(--pad) 0;
}

.packshot_main {
  position: absolute;
  left: var(--pad);
  top: calc(var(--nav-h) + clamp(2rem, 7vh, 4.5rem));
  width: min(46rem, 49vw);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.eyebrow.is-accent {
  color: var(--accent-fort);
}

.packshot_main .display-xl {
  font-size: clamp(2.5rem, 3.9vw, 4.1rem);
  line-height: 0.98;
}

.packshot_p {
  max-width: 30rem;
  color: var(--ardoise);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.packshot_features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 11.5rem));
  margin-top: 1.25rem;
}

.packshot_features li {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0 1.4rem;
  border-left: 1px solid var(--trait);
}

.packshot_features li:first-child {
  padding-left: 0;
  border-left: 0;
}

.packshot_features svg {
  width: 1.6rem;
  height: 1.6rem;
  margin-bottom: 0.9rem;
  fill: none;
  stroke: var(--encre);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.packshot_feature-title {
  font-weight: 500;
  font-size: 0.9375rem;
}

.packshot_feature-text {
  color: var(--gris);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* Choix du métier sous le texte : compteur, segments, flèches */
.row_selector {
  position: absolute;
  left: var(--pad);
  bottom: clamp(1.75rem, 6vh, 3.5rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  pointer-events: auto;
}

.row_count {
  color: var(--gris);
  letter-spacing: 0.14em;
}

.row_index {
  color: var(--encre);
}

.row_segments {
  display: flex;
  gap: 0.35rem;
  margin-right: 1.25rem;
}

.row_segments span {
  width: 1.9rem;
  height: 2px;
  background: var(--trait);
  transition: background-color 0.4s;
}

.row_segments span.is-active {
  background: var(--accent);
}

/* Carte vitrée en bas à droite */
.app_card {
  position: absolute;
  right: 0;
  bottom: clamp(4rem, 9vh, 5.5rem);
  display: flex;
  align-items: center;
  gap: 2.25rem;
  padding: 1.6rem var(--pad) 1.6rem 3rem;
  background: color-mix(in srgb, var(--verre) 72%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 50px -30px rgba(16, 26, 46, 0.45);
  pointer-events: auto;
}

.app_card-text {
  max-width: 17rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-right: 2.25rem;
  border-right: 1px solid var(--trait);
  font-size: 0.875rem;
  line-height: 1.5;
}

.app_card-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--gris);
}

.app_card-dot {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
}

.app_card-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  translate: -50% -50%;
  border-left: 0.42rem solid #0d0d0d;
  border-top: 0.26rem solid transparent;
  border-bottom: 0.26rem solid transparent;
}

/* 8 · Questions, contact, pied de page (contenu qui défile normalement) */

.section.is-faq {
  --faq-top: clamp(2.5rem, 7vh, 4.5rem);
  z-index: 3;
  pointer-events: auto;
  padding: calc(var(--nav-h) + var(--faq-top)) var(--pad) 0;
  background: linear-gradient(180deg, transparent, var(--fond) 16rem);
}

/* En-tête : titre et texte, carte de contact, arche décorative à droite */
.faq_head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 21.5rem);
  align-items: start;
  gap: clamp(2rem, 4vw, 4rem);
  padding-right: clamp(10rem, 17vw, 15rem);
  margin-bottom: clamp(2rem, 4.5vh, 3rem);
}

.faq_intro {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.faq_title {
  font-size: clamp(2.75rem, 5vw, 5.75rem);
  white-space: nowrap;
}

.faq_lead {
  max-width: 33rem;
  color: var(--ardoise);
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* Pastille d'icône commune : la carte de contact et chaque question */
.faq_chip {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--accent-pale);
}

.faq_chip.is-large {
  width: 3rem;
  height: 3rem;
}

.faq_chip svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: var(--encre);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.faq_ask {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 1.1rem;
  margin-top: 1.1rem;
  padding: 1.6rem 1.75rem 1.75rem 1.4rem;
  border: 1px solid var(--verre-bord);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--verre) 70%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -28px rgba(16, 26, 46, 0.45);
}

.faq_ask-title {
  margin: 0.35rem 0 0.7rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1.1;
}

.faq_ask-text {
  margin-bottom: 1.3rem;
  font-size: 0.8125rem;
  line-height: 1.6;
}

.faq_ask-text a {
  color: var(--gris);
  transition: color 0.2s;
}

.faq_ask-text a:hover {
  color: var(--accent-fort);
}

/* Même arche que l'accueil, coupée en fondu au-dessus des questions */




/* Accordéon : une carte par question */
.faq_list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-right: 3.5vw;
}

.faq_accordion {
  border: 1px solid var(--verre-bord);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: 0 12px 30px -24px rgba(16, 26, 46, 0.45);
  transition: background-color 0.3s;
}

.faq_accordion:hover {
  background: var(--surface-haute);
}

.faq_accordion h3 {
  font-size: inherit;
}

.faq_question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: 0.85rem 1.1rem 0.85rem 1.2rem;
  text-align: left;
}

.faq_text {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.35vw, 1.35rem);
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.faq_icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--encre) 5%, transparent);
  transition: background-color 0.25s;
}

.faq_icon svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: none;
  stroke: var(--encre);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.faq_icon path {
  transition: opacity 0.3s;
}

.faq_minus,
.faq_question[aria-expanded='true'] .faq_chevron {
  opacity: 0;
}

.faq_question[aria-expanded='true'] .faq_minus {
  opacity: 1;
}

.faq_question:hover .faq_icon {
  background: color-mix(in srgb, var(--encre) 10%, transparent);
}

.faq_answer {
  height: 0;
  overflow: hidden;
}

.faq_answer p {
  max-width: 56rem;
  padding: 0 4rem 1.6rem calc(1.2rem + 2.6rem + 1.75rem);
  color: var(--gris);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.contact_panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
  margin-top: clamp(5rem, 12vh, 8rem);
  padding: clamp(2rem, 5vw, 4.5rem);
  background: var(--surface);
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}

.contact_side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.content_lead {
  max-width: 26rem;
  color: var(--ardoise);
}

.next_steps {
  margin-top: 0.75rem;
  border-top: 1px solid var(--trait);
}

.next_steps li {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--trait);
  font-size: 0.9375rem;
}

.next_steps .label {
  color: var(--accent-fort);
}

.contact_form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 1.5rem;
  align-self: start;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field em {
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gris);
}

.field.is-wide {
  grid-column: 1 / -1;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 0.95rem;
  border: 1px solid transparent;
  border-bottom-color: var(--trait-fort);
  border-radius: 0;
  background: var(--blanc);
  color: var(--encre);
  font: 400 1rem/1.4 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  transition: border-color 0.2s;
  appearance: none;
}

.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--encre) 50%), linear-gradient(135deg, var(--encre) 50%, transparent 50%);
  background-position:
    calc(100% - 1.2rem) 55%,
    calc(100% - 0.9rem) 55%;
  background-size: 0.3rem 0.3rem;
  background-repeat: no-repeat;
}

.field textarea {
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--encre);
}

.field.is-invalid input,
.field.is-invalid select {
  border-color: #b3261e;
}

.contact_actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.25rem;
}

.contact_status {
  color: var(--ardoise);
  font-size: 0.9rem;
}

.contact_status.is-error {
  color: #b3261e;
}

.footer_container {
  margin: clamp(5rem, 12vh, 8rem) calc(var(--pad) * -1) 0;
  padding: clamp(3rem, 7vw, 5.5rem) var(--pad) 1.5rem;
  background: var(--nuit);
  color: var(--craie);
}

.footer_top {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 3fr);
  gap: 2.5rem;
  padding-bottom: 4rem;
}

.footer_pitch {
  max-width: 34rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 3vw, 3rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.footer_pitch .ital {
  color: var(--accent);
}

.footer_col {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer_col .label {
  margin-bottom: 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(233, 236, 241, 0.2);
  color: color-mix(in srgb, var(--craie) 65%, transparent);
}

.footer_col a:hover,
.footer_link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer_brand {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  font-size: 0.875rem;
}

.footer_brand .logo {
  height: 2.6rem;
  margin-bottom: 0.5rem;
}

.footer_bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(233, 236, 241, 0.14);
  color: color-mix(in srgb, var(--craie) 65%, transparent);
  font-size: 0.75rem;
}

/* ---------- Index des chapitres ---------- */

.chapters {
  position: fixed;
  top: 50%;
  right: calc(var(--pad) * 0.55);
  z-index: 4;
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  visibility: hidden;
}

.chapter {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0;
  color: var(--gris);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
}

.chapter_num {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Points de côté : le chapitre actif s'allonge en pilule. */
.chapter_num {
  font-size: 0;
}

.chapter_num::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--trait-fort);
  transition:
    width 0.35s var(--ease),
    background-color 0.35s var(--ease);
}

.chapter_label {
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--fond);
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  translate: 6px 0;
  transition:
    opacity 0.3s,
    translate 0.3s var(--ease);
}

.chapter:hover .chapter_label,
.chapter:focus-visible .chapter_label {
  opacity: 1;
  translate: 0 0;
}

.chapter.is-active {
  color: var(--encre);
}

.chapter.is-active .chapter_num::after {
  width: 18px;
  background: var(--encre);
}

/* ---------- Signature et mouvements ---------- */

::selection {
  background: var(--accent);
  color: #0d0d0d;
}

/* Annotations en chasse fixe */
.nav_num,
.steps_num,
.chapter,
.row_count,
.selector_count,
.step_when,
.app_card-label {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}



/* Le trait du petit titre se tire quand le titre apparaît. */
.eyebrow.is-armed::before {
  transform: scaleX(0);
}

.eyebrow.is-snapped::before {
  animation: eyebrow-draw 0.9s var(--ease-out) both;
}

@keyframes eyebrow-draw {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Icônes tracées au trait */
.draw-icon :is(path, circle, rect) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease-out) var(--draw-delay, 0s);
}

.draw-icon.is-drawn :is(path, circle, rect) {
  stroke-dashoffset: 0;
}

@keyframes redraw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Reflet qui suit le curseur sur les cartes vitrées */
.sheen::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(22rem circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, 0.5), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}

:root.is-night .sheen::after {
  background: radial-gradient(22rem circle at var(--sx, 50%) var(--sy, 50%), color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%);
}

.sheen:hover::after {
  opacity: 1;
}

/* Menus déroulants : ils se déplient depuis leur lien, les entrées arrivent une à une. */
.nav_dropdown {
  transform-origin: top left;
  scale: 0.97;
  filter: blur(4px);
  transition:
    opacity 0.3s var(--ease-out),
    translate 0.35s var(--ease-out),
    scale 0.35s var(--ease-out),
    filter 0.3s var(--ease-out),
    visibility 0.3s;
}

.nav_item:not(.is-dismissed):hover .nav_dropdown,
.nav_item:not(.is-dismissed):focus-within .nav_dropdown {
  scale: 1;
  filter: none;
}

.nav_dropdown a {
  opacity: 0;
  translate: 0 4px;
  transition:
    opacity 0.2s,
    translate 0.3s var(--ease-out),
    background-color 0.2s;
}

.nav_item:not(.is-dismissed):hover .nav_dropdown a,
.nav_item:not(.is-dismissed):focus-within .nav_dropdown a {
  opacity: 1;
  translate: 0 0;
  transition-delay: calc(var(--i, 0) * 35ms + 60ms), calc(var(--i, 0) * 35ms + 60ms), 0s;
}

.nav_dropdown a:nth-child(2) { --i: 1; }
.nav_dropdown a:nth-child(3) { --i: 2; }
.nav_dropdown a:nth-child(4) { --i: 3; }
.nav_dropdown a:nth-child(5) { --i: 4; }
.nav_dropdown a:nth-child(6) { --i: 5; }

.nav_dropdown a:hover .nav_num {
  color: var(--accent);
}

/* Cartes de la FAQ : légère élévation, pastille qui passe au bleu et icône redessinée */
.faq_accordion {
  position: relative;
  transition:
    background-color 0.3s,
    transform 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out);
}

.faq_accordion:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 40px -28px rgba(16, 26, 46, 0.5);
}

.faq_chip {
  transition: background-color 0.35s var(--ease-out);
}

.faq_chip svg {
  transition: stroke 0.35s var(--ease-out);
}

.faq_accordion:hover .faq_chip,
.faq_accordion.is-open .faq_chip {
  background: var(--accent);
}

.faq_accordion:hover .faq_chip svg,
.faq_accordion.is-open .faq_chip svg {
  stroke: #0d0d0d;
}

.faq_accordion:hover .faq_chip.draw-icon.is-drawn :is(path, circle, rect) {
  animation: redraw 0.8s var(--ease-out);
}

/* Réponse : le texte se met au point après l'ouverture ; à la fermeture, il s'efface vite. */
.faq_answer p {
  opacity: 0;
  translate: 0 6px;
  filter: blur(4px);
  transition:
    opacity 0.2s,
    translate 0.2s,
    filter 0.2s;
}

.faq_accordion.is-open .faq_answer p {
  opacity: 1;
  translate: 0 0;
  filter: none;
  transition:
    opacity 0.5s var(--ease-out) 0.15s,
    translate 0.55s var(--ease-out) 0.15s,
    filter 0.5s var(--ease-out) 0.15s;
}

.faq_icon path {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 0.3s var(--ease-out),
    scale 0.35s var(--ease-out),
    filter 0.3s;
}

.faq_minus,
.faq_question[aria-expanded='true'] .faq_chevron {
  scale: 0.5;
  filter: blur(2px);
}

.faq_question[aria-expanded='true'] .faq_minus {
  scale: 1;
  filter: none;
}

/* Champs du formulaire : le trait bleu se tire sous le champ actif. */
.field input,
.field textarea {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-position: left bottom;
  background-size: 0 2px;
  background-repeat: no-repeat;
  transition:
    background-size 0.5s var(--ease-out),
    border-color 0.2s;
}

.field select {
  background-image: linear-gradient(var(--accent), var(--accent)), linear-gradient(45deg, transparent 50%, var(--encre) 50%), linear-gradient(135deg, var(--encre) 50%, transparent 50%);
  background-position:
    left bottom,
    calc(100% - 1.2rem) 55%,
    calc(100% - 0.9rem) 55%;
  background-size:
    0 2px,
    0.3rem 0.3rem,
    0.3rem 0.3rem;
  transition:
    background-size 0.5s var(--ease-out),
    border-color 0.2s;
}

.field input:focus,
.field textarea:focus {
  background-size: 100% 2px;
}

.field select:focus {
  background-size:
    100% 2px,
    0.3rem 0.3rem,
    0.3rem 0.3rem;
}

/* Pied de page : le grand mot-symbole monte dans son cadre. */
.footer_mark {
  overflow: hidden;
  margin: 0 0 1.5rem;
  color: #262626;
}

.footer_mark .logo {
  width: 100%;
  height: auto;
  translate: 0 102%;
  transition: translate 1.4s var(--ease-out);
}

.footer_mark.is-in .logo {
  translate: 0 0;
}

/* Compteurs : le chiffre monte à chaque changement de métier. */
.selector_index,
.row_index {
  display: inline-block;
}

/* Mode nuit : halo bleu sous la rangée, barre de navigation sombre. */
:root.is-night body::after {
  opacity: 1;
  background:
    radial-gradient(55% 60% at 64% 62%, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 70%),
    radial-gradient(90% 60% at 50% 110%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 70%);
}

/* ---------- Pilule de navigation, tampons, ondes, curseur ---------- */

/* Pilule d'eau : vitre, shader WebGL de la goutte, et goutte CSS si WebGL manque */
.nimbus-nav {
  --n-tint: rgba(13, 13, 13, 0.05);
  --n-fg: var(--encre);
  --n-fg-soft: color-mix(in srgb, var(--encre) 62%, transparent);
  --n-rim: rgba(255, 255, 255, 0.7);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border-radius: 999px;
  isolation: isolate;
  user-select: none;
}

.nimbus-nav[data-tone='dark'] {
  --n-tint: rgba(255, 255, 255, 0.08);
  --n-rim: rgba(255, 255, 255, 0.34);
}

.nimbus-glass {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  border-radius: inherit;
  background: var(--n-tint);
  -webkit-backdrop-filter: blur(10px) saturate(1.2) brightness(1.08);
  backdrop-filter: blur(10px) saturate(1.2) brightness(1.08);
  box-shadow:
    inset 0 1px 1px var(--n-rim),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    0 12px 32px -14px rgba(0, 40, 90, 0.5),
    0 2px 6px rgba(0, 40, 90, 0.1);
}

.nimbus-nav[data-refract='on'] .nimbus-glass {
  -webkit-backdrop-filter: url(#nimbus-refract) blur(2px) saturate(1.2) brightness(1.08);
  backdrop-filter: url(#nimbus-refract) blur(2px) saturate(1.2) brightness(1.08);
}

.nimbus-water {
  position: absolute;
  left: -14px;
  top: -14px;
  z-index: -1;
  pointer-events: none;
}

.nimbus-nav[data-gl='off'] .nimbus-water {
  display: none;
}

.nimbus-drop {
  display: none;
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
  will-change: transform, width;
  background: radial-gradient(120% 140% at 30% 0%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 55%), rgba(255, 255, 255, 0.38);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.95),
    inset 0 -2px 6px rgba(0, 162, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    0 6px 16px -6px rgba(0, 70, 140, 0.45);
}

.nimbus-nav[data-gl='off'] .nimbus-drop {
  display: block;
}

.nimbus-nav .nav_item {
  display: flex;
}

.nimbus-item {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--n-fg-soft);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color 0.25s;
}

.nimbus-item:hover,
.nimbus-item[aria-current] {
  color: var(--n-fg);
}

.nimbus-item:focus-visible {
  outline: 2px solid var(--accent-fort);
  outline-offset: 2px;
}

.nv-ico {
  position: relative;
  display: inline-flex;
  flex: none;
}

.nv-ico svg {
  transition: transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.nimbus-item[aria-current] .nv-ico svg {
  transform: translateY(-1px) scale(1.08);
}

.nv-door {
  fill: transparent;
}

/* Les petites scènes des icônes, jouées au clic */
.nv-ico[data-fx='drop'] svg {
  animation: nv-drop 0.95s cubic-bezier(0.4, 0, 0.3, 1) both;
  transform-origin: 50% 100%;
}

@keyframes nv-drop {
  0% { transform: translateY(-1px); }
  26% { transform: translateY(-13px) scale(0.88, 1.12); }
  46% { transform: translateY(3px) scale(1.3, 0.68); }
  62% { transform: translateY(-3px) scale(0.92, 1.08); }
  80% { transform: translateY(0) scale(1.04, 0.97); }
  100% { transform: translateY(-1px) scale(1.08); }
}

.nv-ico[data-fx='drop']::before,
.nv-ico[data-fx='drop']::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
}

.nv-ico[data-fx='drop']::before {
  animation: nv-splash-l 0.95s ease-out both;
}

.nv-ico[data-fx='drop']::after {
  animation: nv-splash-r 0.95s ease-out both;
}

@keyframes nv-splash-l {
  0%, 44% { opacity: 0; transform: none; }
  50% { opacity: 0.9; transform: translate(-5px, -6px); }
  75%, 100% { opacity: 0; transform: translate(-11px, 1px) scale(0.4); }
}

@keyframes nv-splash-r {
  0%, 44% { opacity: 0; transform: none; }
  50% { opacity: 0.9; transform: translate(5px, -7px); }
  75%, 100% { opacity: 0; transform: translate(12px, 1px) scale(0.4); }
}

.nv-ico[data-fx='spin'] svg {
  animation: nv-spin 1s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

@keyframes nv-spin {
  0% { transform: perspective(80px) rotateY(0); }
  100% { transform: perspective(80px) rotateY(360deg) translateY(-1px) scale(1.08); }
}

.nv-ico[data-fx='glow'] svg {
  animation: nv-hop 0.8s cubic-bezier(0.3, 1.4, 0.5, 1) both;
  transform-origin: 50% 100%;
}

@keyframes nv-hop {
  0% { transform: none; }
  30% { transform: translateY(-5px) scale(1.04, 0.96); }
  55% { transform: translateY(0) scale(1.12, 0.88); }
  75% { transform: translateY(-2px) scale(0.98, 1.04); }
  100% { transform: translateY(-1px) scale(1.08); }
}

.nv-ico[data-fx='glow'] .nv-door {
  animation: nv-door 1.3s ease both;
}

@keyframes nv-door {
  0% { fill: transparent; }
  30% { fill: #c6fb50; }
  100% { fill: rgba(198, 251, 80, 0.6); }
}

.nv-ico[data-fx='wave'] svg {
  animation: nv-wave 0.9s ease-in-out both;
  transform-origin: 50% 92%;
}

@keyframes nv-wave {
  0% { transform: none; }
  20% { transform: rotate(-15deg); }
  40% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(4deg); }
  100% { transform: translateY(-1px) scale(1.08); }
}

/* Tampon rond de la FAQ : texte qui tourne autour de deux étincelles */
.spin-badge {
  position: absolute;
  width: clamp(7.5rem, 10vw, 10.5rem);
  aspect-ratio: 1;
  pointer-events: none;
}

.spin-badge_ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: spin-badge 18s linear infinite;
}

.spin-badge_ring text {
  fill: var(--encre);
  font-family: var(--font-mono);
  font-size: 7.4px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.78;
}

.spin-badge_core {
  position: absolute;
  inset: 31%;
  width: 38%;
  height: 38%;
  fill: #0d0d0d;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linejoin: round;
  animation: badge-twinkle 3.6s ease-in-out infinite;
}

.spin-badge.is-faq {
  top: calc(-1 * var(--faq-top) + 1.5rem);
  right: 0;
  width: clamp(9rem, 13vw, 12.5rem);
}

@keyframes spin-badge {
  to {
    transform: rotate(360deg);
  }
}

@keyframes badge-twinkle {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.12) rotate(10deg);
  }
}

/* Ondes de lignes derrière les téléphones (dessinées en canvas) */
.hero_waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Disponibilité : pastille lime qui pulse */
.hero_meta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  margin-top: 0.15rem;
  padding: 0.3rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ardoise);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
}

.hero_meta li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem 0.5rem 0.7rem;
  white-space: nowrap;
}

.hero_meta svg {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Le délai est l'information forte : il prend sa propre pastille foncée. */
.hero_meta .hero_meta-reply {
  border-radius: 999px;
  background: #0d0d0d;
  color: #fff;
}

.live-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(198, 251, 80, 0.5);
  animation: livepulse 2.4s ease-out infinite;
}

@keyframes livepulse {
  0% {
    box-shadow: 0 0 0 0 rgba(198, 251, 80, 0.5);
  }
  80%,
  100% {
    box-shadow: 0 0 0 12px rgba(198, 251, 80, 0);
  }
}

/* Curseur : flèche, pastille lime sur les liens, disque « glisser » sur les téléphones */
html.cur-on,
html.cur-on * {
  cursor: none !important;
}

.cur {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

.cur.is-visible {
  opacity: 1;
}

.cur > * {
  position: absolute;
  top: 0;
  left: 0;
}

.cur-arrow {
  width: 22px;
  height: 22px;
  margin: -3px 0 0 -4px;
  fill: #0d0d0d;
  stroke: #fff;
  stroke-width: 1.4;
  stroke-linejoin: round;
  transform-origin: 4px 3px;
  transition:
    opacity 0.18s,
    transform 0.25s var(--ease);
}

.cur-hand {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 8px 20px -8px rgba(95, 163, 20, 0.7);
  opacity: 0;
  transform: scale(0.35);
  transition:
    opacity 0.18s,
    transform 0.3s var(--ease);
}

.cur-hand svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: #0d0d0d;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cur.is-hand .cur-arrow {
  opacity: 0;
  transform: scale(0.5);
}

.cur.is-hand .cur-hand {
  opacity: 1;
  transform: scale(1);
}

.cur.is-down .cur-arrow {
  transform: scale(0.82);
}

.cur.is-down.is-hand .cur-hand {
  transform: scale(0.88);
}

.cur-text {
  width: 2px;
  height: 26px;
  margin: -13px 0 0 -1px;
  border-radius: 2px;
  background: #0d0d0d;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75);
  opacity: 0;
  transition: opacity 0.15s;
}

.cur.is-text .cur-text {
  opacity: 1;
}

.cur.is-text .cur-arrow {
  opacity: 0;
}

.cur-ring {
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
}

.cur.is-click .cur-ring {
  animation: cur-ripple 0.55s var(--ease);
}

@keyframes cur-ripple {
  0% {
    transform: scale(0.25);
    opacity: 0.9;
  }
  100% {
    transform: scale(3.4);
    opacity: 0;
  }
}

.cur-view {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  margin: -45px 0 0 -45px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 10px 30px -8px rgba(198, 251, 80, 0.55);
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 0.25s var(--ease),
    transform 0.4s var(--ease);
}

.cur-view-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: spin-badge 9s linear infinite;
}

.cur-view-ring text {
  fill: #0d0d0d;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.cur-view-arrow {
  position: relative;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #0d0d0d;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cur.is-view .cur-view {
  opacity: 1;
  transform: scale(1);
}

.cur.is-view .cur-arrow,
.cur.is-view .cur-hand {
  opacity: 0;
}

.cur.is-down.is-view .cur-view {
  transform: scale(0.9);
}

@media (any-hover: none) {
  .cur {
    display: none;
  }
}

/* ---------- Solutions agentiques ---------- */

/* Le bloc prend toute la largeur et remonte en haut de la section de fin de page. */
.agents {
  margin: calc(-1 * (var(--nav-h) + var(--faq-top))) calc(-1 * var(--pad)) clamp(3rem, 8vh, 6rem);
}

.agents_intro {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.4vh, 1.6rem);
  max-width: 62rem;
  padding: calc(var(--nav-h) + clamp(4rem, 14vh, 9rem)) var(--pad) clamp(2rem, 7vh, 5rem);
}

.agents_intro .display-xl {
  font-size: clamp(2.4rem, 5vw, 5.2rem);
}

.agents_lead {
  max-width: 40rem;
  color: var(--ardoise);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.agents_pains {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.agents_pains li {
  padding: 0.55rem 1rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 500;
  font-size: 0.8125rem;
}

/* overflow: clip et non hidden : hidden casserait le collant de la piste. */
.agents_pin {
  position: relative;
  overflow-x: clip;
  background: var(--fond);
}

.agents_sticky {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  perspective: 2600px;
}

/* Dimensions de la carte : toutes ses mesures dérivent de --u, 1 pixel de la maquette (1394 x 894). */
.agents_track {
  --card-w: min(70vw, calc((100vh - var(--nav-h) - 2.5rem) * 1.37));
  --card-w: min(70vw, calc((100svh - var(--nav-h) - 2.5rem) * 1.37));
  --u: calc(var(--card-w) / 1394);
  --menthe: #6fe3a1;
  display: flex;
  align-items: center;
  gap: 5vw;
  width: max-content;
  height: 100%;
  padding: var(--nav-h) calc((100vw - var(--card-w)) / 2) 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.agents_slot {
  position: relative;
  flex: none;
  width: var(--card-w);
  height: calc(894 * var(--u));
  transform-style: preserve-3d;
}

.agent_card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: calc(38 * var(--u));
  background:
    radial-gradient(calc(620 * var(--u)) calc(520 * var(--u)) at 74% 62%, rgba(70, 200, 130, 0.09), transparent 70%),
    linear-gradient(140deg, #0e1215, #0b0e11 60%, #0c1012);
  color: #fff;
  transform-origin: right center;
  box-shadow: 0 calc(40 * var(--u)) calc(90 * var(--u)) rgba(0, 0, 0, 0.45);
}

/* Colonne de gauche */
.ax_tile-main {
  position: absolute;
  left: calc(50 * var(--u));
  top: calc(44 * var(--u));
  display: grid;
  place-items: center;
  width: calc(83 * var(--u));
  height: calc(83 * var(--u));
  border: 1px solid rgba(111, 227, 161, 0.5);
  border-radius: calc(21 * var(--u));
  background: linear-gradient(150deg, #1a3b2d, #10211b);
  box-shadow: 0 0 calc(26 * var(--u)) rgba(111, 227, 161, 0.14);
}

.ax_tile-main svg {
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  fill: none;
  stroke: #fff;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.agent_kicker {
  position: absolute;
  left: calc(184 * var(--u));
  top: calc(74 * var(--u));
  color: #8d9498;
  font-family: var(--font-mono);
  font-size: calc(18 * var(--u));
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.agent_count {
  position: absolute;
  right: calc(51 * var(--u));
  top: calc(48 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(30 * var(--u));
  color: #c9ced0;
  font-family: var(--font-mono);
  font-size: calc(18 * var(--u));
  letter-spacing: 0.08em;
}

.agent_meter {
  display: block;
  width: calc(164 * var(--u));
  height: calc(6 * var(--u));
  overflow: hidden;
  border-radius: 9px;
  background: #2b3134;
}

.agent_meter i {
  display: block;
  height: 100%;
  border-radius: 9px;
  background: var(--menthe);
  transform: scaleX(var(--p));
  transform-origin: left center;
}

.agent_name {
  position: absolute;
  left: calc(58 * var(--u));
  top: calc(152 * var(--u));
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(88 * var(--u));
  letter-spacing: -0.025em;
  line-height: 1.05;
  white-space: nowrap;
}

.agent_name.is-long {
  font-size: calc(78 * var(--u));
  line-height: 1.18;
}

.agent_name em {
  color: var(--menthe);
  font-style: normal;
}

.agent_lead {
  position: absolute;
  left: calc(58 * var(--u));
  top: calc(358 * var(--u));
  width: calc(530 * var(--u));
  color: #9aa1a5;
  font-size: calc(28 * var(--u));
  line-height: 1.4;
}

.agent_col {
  position: absolute;
  top: calc(530 * var(--u));
  height: calc(150 * var(--u));
}

.agent_col.is-problem {
  left: calc(58 * var(--u));
  width: calc(330 * var(--u));
}

.agent_col.is-action {
  left: calc(465 * var(--u));
  width: calc(330 * var(--u));
}

.agent_label {
  color: #7f868a;
  font-family: var(--font-mono);
  font-size: calc(17 * var(--u));
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.agent_chip {
  position: absolute;
  left: 0;
  top: calc(36 * var(--u));
  display: grid;
  place-items: center;
  width: calc(62 * var(--u));
  height: calc(62 * var(--u));
  border-radius: calc(14 * var(--u));
  background: #1b2023;
}

.agent_chip svg {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  fill: none;
  stroke: #d8dcde;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.agent_chip.is-bolt {
  background: #16302a;
}

.agent_chip.is-bolt svg {
  fill: var(--menthe);
  stroke: none;
}

.agent_body {
  position: absolute;
  left: calc(84 * var(--u));
  top: calc(34 * var(--u));
  width: calc(238 * var(--u));
  color: #d5d8da;
  font-size: max(calc(19 * var(--u)), 11px);
  line-height: 1.42;
}

.agent_sep {
  position: absolute;
  left: calc(412 * var(--u));
  top: calc(526 * var(--u));
  width: 1px;
  height: calc(150 * var(--u));
  background: rgba(255, 255, 255, 0.13);
}

.agent_rule {
  position: absolute;
  left: 0;
  top: calc(722 * var(--u));
  width: 100%;
  height: calc(60 * var(--u));
  fill: none;
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.agent_examples-label {
  position: absolute;
  left: calc(58 * var(--u));
  top: calc(757 * var(--u));
}

.agent_examples {
  position: absolute;
  left: calc(56 * var(--u));
  top: calc(796 * var(--u));
  display: flex;
  gap: calc(22 * var(--u));
}

.agent_examples li {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
  height: calc(56 * var(--u));
  padding: 0 calc(28 * var(--u)) 0 calc(15 * var(--u));
  border: 1px solid #2c3235;
  border-radius: 99px;
  background: #15191b;
  color: #e2e5e6;
  font-size: calc(20 * var(--u));
  white-space: nowrap;
}

.agent_examples li span,
.ax_ok {
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--menthe);
}

.agent_examples li span {
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
}

.agent_examples li svg,
.ax_ok svg {
  width: 62%;
  height: 62%;
  fill: none;
  stroke: #0d1512;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Scène 3D : chaque couche flotte à sa propre profondeur */
.ax_stage {
  --tx: 0deg;
  --ty: 0deg;
  position: absolute;
  left: calc(768 * var(--u));
  top: calc(108 * var(--u));
  width: calc(620 * var(--u));
  height: calc(650 * var(--u));
  transform: perspective(calc(1700 * var(--u))) rotateX(calc(4deg + var(--tx))) rotateY(calc(-9deg + var(--ty))) skewY(5.2deg);
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease-out);
}

.ax_glow {
  position: absolute;
  left: 30%;
  top: 30%;
  width: 70%;
  height: 72%;
  background: radial-gradient(closest-side, rgba(90, 225, 150, 0.17), transparent);
  transform: translateZ(calc(-60 * var(--u)));
}

.ax_wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--menthe);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.6;
  filter: drop-shadow(0 0 calc(5 * var(--u)) rgba(111, 227, 161, 0.75));
  transform: translateZ(calc(20 * var(--u)));
}

.ax_wires path {
  stroke-dasharray: none;
}

.ax_pulse {
  stroke: #d8ffe9;
  stroke-width: 2.5;
  stroke-dasharray: 30 100 !important;
  stroke-dashoffset: 30;
}

.ax_bubble,
.ax_row .ax_slot,
.ax_tile,
.ax_notif,
.ax_hub,
.ax_orb {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(150deg, rgba(58, 66, 68, 0.95), rgba(26, 31, 33, 0.97));
}

.ax_bubble {
  position: absolute;
  left: calc(52 * var(--u));
  top: calc(16 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(26 * var(--u));
  width: calc(478 * var(--u));
  height: calc(122 * var(--u));
  padding: 0 calc(28 * var(--u)) 0 calc(22 * var(--u));
  border-radius: calc(26 * var(--u));
  background: linear-gradient(150deg, rgba(46, 53, 55, 0.96), rgba(19, 24, 26, 0.98));
  box-shadow: 0 calc(10 * var(--u)) calc(34 * var(--u)) rgba(70, 215, 140, 0.16), inset 0 -1px 0 rgba(111, 227, 161, 0.6);
  transform: translateZ(calc(60 * var(--u)));
}

.ax_bubble p {
  flex: 1;
  color: #eef0f1;
  font-size: calc(26 * var(--u));
  line-height: 1.34;
  white-space: nowrap;
}

.ax_spark {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(76 * var(--u));
  height: calc(76 * var(--u));
  border: calc(2 * var(--u)) solid rgba(111, 227, 161, 0.55);
  border-radius: 50%;
  background: #141a1b;
}

.ax_spark svg {
  width: 56%;
  height: 56%;
  fill: #e9fff3;
  filter: drop-shadow(0 0 calc(5 * var(--u)) rgba(111, 227, 161, 0.8));
}

.ax_tail {
  position: absolute;
  left: calc(50 * var(--u));
  bottom: calc(-10 * var(--u));
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  border-radius: 50% 50% 50% 0;
  border: 1px solid rgba(111, 227, 161, 0.75);
  background: #16211d;
  box-shadow: 0 0 calc(12 * var(--u)) rgba(111, 227, 161, 0.7);
  transform: rotate(-45deg);
}

.ax_dots {
  display: flex;
  gap: calc(7 * var(--u));
}

.ax_dots i {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  border-radius: 50%;
  background: var(--menthe);
  opacity: 0.45;
}

.ax_panel {
  position: absolute;
  left: calc(10 * var(--u));
  top: calc(184 * var(--u));
  width: calc(418 * var(--u));
  height: calc(322 * var(--u));
  padding: calc(38 * var(--u)) calc(34 * var(--u)) 0 calc(26 * var(--u));
  transform-style: preserve-3d;
}

.ax_plate {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: calc(24 * var(--u));
  background: linear-gradient(150deg, rgba(33, 38, 41, 0.95), rgba(15, 19, 21, 0.97));
}

.ax_plate.is-back {
  inset: calc(150 * var(--u)) calc(-30 * var(--u)) calc(-8 * var(--u)) 60%;
  opacity: 0.55;
  transform: translateZ(calc(-30 * var(--u)));
}

.ax_row {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(24 * var(--u));
  margin-bottom: calc(9 * var(--u));
  transform: translateZ(calc(26 * var(--u)));
}

.ax_row time {
  flex: none;
  width: calc(44 * var(--u));
  color: #8f979a;
  font-size: calc(19 * var(--u));
  white-space: nowrap;
}

.ax_slot {
  flex: 1;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  height: calc(55 * var(--u));
  padding: 0 calc(18 * var(--u));
  border-radius: calc(12 * var(--u));
}

.ax_slot i {
  flex: none;
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  border-radius: 50%;
  background: var(--c);
}

.ax_slot span {
  flex: 1;
  overflow: hidden;
  color: #e8eaeb;
  font-size: calc(19 * var(--u));
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ax_slot svg {
  flex: none;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  fill: none;
  stroke: #dfe3e4;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ax_tile {
  position: absolute;
  display: grid;
  place-items: center;
  width: calc(86 * var(--u));
  height: calc(86 * var(--u));
  border-radius: calc(18 * var(--u));
  box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(0, 0, 0, 0.45);
}

.ax_tile svg {
  width: 46%;
  height: 46%;
  fill: none;
  stroke: #fff;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ax_tile.is-1 {
  left: calc(444 * var(--u));
  top: calc(168 * var(--u));
  transform: translateZ(calc(70 * var(--u)));
}

.ax_tile.is-2 {
  left: calc(508 * var(--u));
  top: calc(268 * var(--u));
  transform: translateZ(calc(95 * var(--u)));
}

.ax_tile.is-3 {
  left: calc(452 * var(--u));
  top: calc(372 * var(--u));
  transform: translateZ(calc(60 * var(--u)));
}

.ax_notif {
  position: absolute;
  left: calc(146 * var(--u));
  top: calc(476 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  width: calc(384 * var(--u));
  height: calc(112 * var(--u));
  padding: 0 calc(22 * var(--u));
  border-radius: calc(22 * var(--u));
  box-shadow: 0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(70, 215, 140, 0.16);
  transform: translateZ(calc(120 * var(--u)));
}

.ax_ok {
  width: calc(54 * var(--u));
  height: calc(54 * var(--u));
}

.ax_notif > div {
  flex: 1;
  min-width: 0;
}

.ax_notif p {
  overflow: hidden;
  color: #f0f2f3;
  font-size: calc(20 * var(--u));
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ax_notif small {
  display: block;
  margin-top: calc(3 * var(--u));
  color: #868e91;
  font-size: calc(15 * var(--u));
}

.ax_bar {
  display: block;
  height: calc(4 * var(--u));
  margin-top: calc(9 * var(--u));
  overflow: hidden;
  border-radius: 9px;
  background: #343a3d;
}

.ax_bar i {
  display: block;
  height: 100%;
  border-radius: 9px;
  background: var(--menthe);
  transform: scaleX(0.4);
  transform-origin: left center;
}

/* Carte finale : les cinq agents reliés au même logiciel */
.agent_card.is-final .agent_name {
  top: calc(236 * var(--u));
}

.agent_card.is-final .agent_lead {
  top: calc(452 * var(--u));
  width: calc(600 * var(--u));
}

.agent_cols {
  display: contents;
}

.agent_tabs {
  display: none;
}

.agent_cta {
  position: absolute;
  left: calc(58 * var(--u));
  top: calc(652 * var(--u));
  --bouton: #6fe3a1;
  --bouton-texte: #0d1512;
}

.ax_stage.is-hub {
  transform: perspective(calc(1700 * var(--u))) rotateX(calc(4deg + var(--tx))) rotateY(calc(-9deg + var(--ty))) skewY(3deg);
}

.ax_hub {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
  margin: calc(-54 * var(--u)) 0 0 calc(-155 * var(--u));
  width: calc(310 * var(--u));
  height: calc(108 * var(--u));
  padding: 0 calc(18 * var(--u));
  border-color: rgba(111, 227, 161, 0.5);
  border-radius: calc(24 * var(--u));
  color: #fff;
  font-size: calc(22 * var(--u));
  line-height: 1.25;
  box-shadow: 0 0 calc(50 * var(--u)) rgba(111, 227, 161, 0.22);
  transform: translateZ(calc(70 * var(--u)));
}

.ax_orb {
  position: absolute;
  display: grid;
  place-items: center;
  width: calc(92 * var(--u));
  height: calc(92 * var(--u));
  margin: calc(-46 * var(--u)) 0 0 calc(-46 * var(--u));
  border-radius: calc(20 * var(--u));
  transform: translateZ(calc(90 * var(--u)));
}

.ax_orb svg {
  width: 46%;
  height: 46%;
  fill: none;
  stroke: #fff;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ax_orb.is-1 { left: 50%; top: 14%; }
.ax_orb.is-2 { left: 86%; top: 38%; }
.ax_orb.is-3 { left: 72%; top: 84%; }
.ax_orb.is-4 { left: 28%; top: 84%; }
.ax_orb.is-5 { left: 14%; top: 38%; }

/* Mouvements : l'entrée se joue quand la carte arrive au centre, puis la scène vit en boucle. */
.ax_bubble,
.ax_row,
.ax_tile,
.ax_notif,
.ax_wires,
.ax_plate,
.ax_hub,
.ax_orb {
  opacity: 0;
  transition: opacity 0.35s;
}

.is-live .ax_plate,
.is-live .ax_wires {
  opacity: 1;
}

.is-live .ax_wires {
  opacity: 0.6;
}

.is-live .ax_pulse {
  animation: ax-flow 2.6s linear infinite;
  animation-delay: calc(var(--i) * 0.35s);
}

@keyframes ax-flow {
  from {
    stroke-dashoffset: 30;
  }
  to {
    stroke-dashoffset: -100;
  }
}

.is-live .ax_bubble {
  opacity: 1;
  animation: ax-bubble 0.9s var(--ease-out) backwards;
}

@keyframes ax-bubble {
  from {
    opacity: 0;
    transform: translateZ(calc(160 * var(--u))) translateY(calc(-30 * var(--u)));
  }
}

.is-live .ax_dots i {
  animation: ax-dot 1.2s ease-in-out infinite;
}

.is-live .ax_dots i:nth-child(2) {
  animation-delay: 0.18s;
}

.is-live .ax_dots i:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes ax-dot {
  0%, 60%, 100% {
    opacity: 0.35;
    transform: none;
  }
  30% {
    opacity: 1;
    transform: translateY(calc(-5 * var(--u)));
  }
}

.is-live .ax_spark svg {
  animation: badge-twinkle 3.2s ease-in-out infinite;
}

.is-live .ax_row {
  opacity: 1;
  animation: ax-row 0.8s var(--ease-out) backwards;
  animation-delay: calc(0.35s + var(--i) * 0.13s);
}

@keyframes ax-row {
  from {
    opacity: 0;
    transform: translateZ(calc(90 * var(--u))) translateX(calc(30 * var(--u)));
  }
}

/* Le planning s'active ligne après ligne. */
.is-live .ax_slot {
  animation: ax-slot 6s ease-in-out infinite;
  animation-delay: calc(1.4s + var(--i) * 1.5s);
}

@keyframes ax-slot {
  0%, 22%, 100% {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
  }
  8% {
    border-color: color-mix(in srgb, var(--c) 70%, transparent);
    box-shadow: 0 0 calc(20 * var(--u)) color-mix(in srgb, var(--c) 35%, transparent);
  }
}

.is-live .ax_tile {
  opacity: 1;
  animation: ax-tile-1 7s ease-in-out 1s infinite;
}

.is-live .ax_tile.is-2 {
  animation-name: ax-tile-2;
  animation-delay: 1.3s;
}

.is-live .ax_tile.is-3 {
  animation-name: ax-tile-3;
  animation-delay: 1.6s;
}

@keyframes ax-tile-1 {
  0%, 100% { transform: translateZ(calc(70 * var(--u))); }
  50% { transform: translateZ(calc(95 * var(--u))) translateY(calc(-9 * var(--u))); }
}

@keyframes ax-tile-2 {
  0%, 100% { transform: translateZ(calc(95 * var(--u))); }
  50% { transform: translateZ(calc(125 * var(--u))) translateY(calc(9 * var(--u))); }
}

@keyframes ax-tile-3 {
  0%, 100% { transform: translateZ(calc(60 * var(--u))); }
  50% { transform: translateZ(calc(85 * var(--u))) translateY(calc(-7 * var(--u))); }
}

.is-live .ax_notif {
  opacity: 1;
  animation: ax-notif 1s var(--ease-out) 1.1s backwards;
}

@keyframes ax-notif {
  from {
    opacity: 0;
    transform: translateZ(calc(220 * var(--u))) translateY(calc(50 * var(--u)));
  }
}

.is-live .ax_ok {
  animation: ax-ok 0.7s cubic-bezier(0.3, 1.6, 0.5, 1) 1.5s backwards;
}

@keyframes ax-ok {
  from {
    transform: scale(0.4);
  }
}

.is-live .ax_bar i {
  animation: ax-bar 5s var(--ease) 1.6s infinite;
}

@keyframes ax-bar {
  0% { transform: scaleX(0); }
  70%, 100% { transform: scaleX(1); }
}

.is-live .agent_meter i {
  animation: ax-meter 1.2s var(--ease-out) backwards;
}

@keyframes ax-meter {
  from {
    transform: scaleX(0);
  }
}

.is-live .ax_hub {
  opacity: 1;
  animation: ax-bubble 0.9s var(--ease-out) backwards;
}

.is-live .ax_orb {
  opacity: 1;
  animation: ax-orb 7s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.2s);
}

@keyframes ax-orb {
  0%, 100% { transform: translateZ(calc(90 * var(--u))); }
  50% { transform: translateZ(calc(125 * var(--u))) translateY(calc(-9 * var(--u))); }
}

/* ---------- Responsive ---------- */

/* Accueil sur ordinateur : le texte et le bandeau partagent le même flux, ils ne peuvent plus
   se croiser, et les tailles suivent la hauteur de la fenêtre autant que sa largeur. */
@media (min-width: 992px) {
  .gamme_container {
    display: flex;
    flex-direction: column;
    padding: calc(var(--nav-h-hero) + clamp(0.4rem, 2.2vh, 3rem)) var(--pad) clamp(1rem, 3.6vh, 2.75rem);
  }

  .hero_intro {
    position: relative;
    top: auto;
    left: auto;
    flex: none;
    gap: clamp(0.7rem, 2.1vh, 1.6rem);
    width: min(37rem, 42vw);
  }

  .hero_intro .eyebrow {
    margin-bottom: 0;
  }

  .hero_intro .display-xl {
    font-size: min(5.6vw, 10.4vh, 5.8rem);
  }

  .hero_lead {
    max-width: 35rem;
    font-size: clamp(0.875rem, 2.1vh, 1.0625rem);
    line-height: 1.5;
  }

  .hero_actions {
    gap: clamp(0.75rem, 1.2vw, 1.5rem);
    margin-top: 0;
  }

  .hero_meta {
    margin-top: 0;
  }

  .hero_strip {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    flex: none;
    margin-top: auto;
    padding-top: clamp(0.7rem, 2.6vh, 2.25rem);
  }
}

/* Petits écrans d'ordinateur : boutons plus compacts, points forts réduits à leur titre. */
@media (min-width: 992px) and (max-height: 760px) {
  .hero_actions .button.has-arrow {
    height: 3rem;
  }

  .hero_actions .button_arrow {
    width: 1.5rem;
    height: 1.5rem;
  }

  .hero_intro .display-xl {
    font-size: min(5.6vw, 9.6vh);
  }

  .selector_titles {
    height: 2.8rem;
  }

  .hero_feature-text {
    display: none;
  }

  .hero_features li {
    align-items: center;
  }

  .hero_feature-title {
    margin-bottom: 0;
  }

  /* Gros plan métier : le texte part du haut pour laisser la place au bandeau du bas. */
  .profile_container {
    align-items: flex-start;
    padding-top: calc(var(--nav-h) + 1.5vh);
  }

  .profile_main {
    gap: 0.8rem;
    margin-top: 0;
  }

  .profile_stack {
    height: 49vh;
  }

  .profile_desc {
    gap: 0.75rem;
  }

  .profile_desc .display-xl {
    font-size: min(4.7vw, 8.4vh);
  }

  .profile_p {
    font-size: 0.9375rem;
    line-height: 1.45;
  }

  .profile_actions .button.has-arrow {
    height: 3rem;
  }

  /* Rangée de téléphones : atouts réduits à leur titre, au-dessus du sélecteur. */
  .packshot_main {
    top: calc(var(--nav-h) + 1.5vh);
    gap: 0.7rem;
  }

  .packshot_main .display-xl {
    font-size: min(3.9vw, 8vh);
  }

  .packshot_p {
    font-size: 0.9375rem;
    line-height: 1.45;
  }

  .packshot_features {
    margin-top: 0.15rem;
  }

  .packshot_features svg {
    margin-bottom: 0.3rem;
  }

  .packshot_feature-text {
    display: none;
  }

  .row_selector {
    bottom: 1rem;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  /* Gros plan métier : colonne étroite, le texte part du haut au-dessus du bandeau. */
  .profile_container {
    align-items: flex-start;
    padding-top: calc(var(--nav-h) + 2vh);
  }

  .profile_main {
    gap: 1rem;
    margin-top: 0;
  }

  .hero_actions .button.has-arrow {
    height: 3rem;
    padding: 0 0.4rem 0 1.15rem;
    gap: 0.55rem;
    font-size: 0.8125rem;
  }

  .hero_actions .button_arrow {
    width: 1.5rem;
    height: 1.5rem;
  }

  .hero_meta {
    font-size: 0.75rem;
  }

  .hero_meta li {
    padding: 0.4rem 0.55rem;
    gap: 0.35rem;
  }

  .hero_features li {
    gap: 0.6rem;
    padding: 0.25rem 0.75rem 0.25rem 1rem;
  }
}

/* La pilule compte cinq liens : on libère de la place autour d'elle. */
@media (max-width: 1360px) {
  .navbar_mail,
  .navbar_divider {
    display: none;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .nimbus-item {
    gap: 6px;
    padding: 0 11px;
    font-size: 0.8125rem;
  }
}

/* Fenêtres étroites : la carte garde une largeur lisible. */
@media (min-width: 768px) and (max-width: 1199px) {
  .agents_track {
    --card-w: min(84vw, calc((100svh - var(--nav-h) - 2.5rem) * 1.37));
  }
}

/* Téléphone : même langage, empilé dans une carte verticale. */
@media (max-width: 767px) {
  .agents_track {
    --card-w: 90vw;
    --u: calc(var(--card-w) / 640);
    gap: 6vw;
  }

  .agents_slot {
    height: min(calc(100svh - var(--nav-h) - 1.25rem), calc(1400 * var(--u)));
  }

  .agent_card {
    display: flex;
    flex-direction: column;
    padding: calc(34 * var(--u));
    gap: calc(20 * var(--u));
  }

  .ax_tile-main {
    position: absolute;
    left: calc(34 * var(--u));
    top: calc(30 * var(--u));
    width: calc(70 * var(--u));
    height: calc(70 * var(--u));
  }

  .agent_kicker {
    left: calc(126 * var(--u));
    top: calc(52 * var(--u));
    font-size: calc(21 * var(--u));
  }

  .agent_count {
    right: calc(34 * var(--u));
    top: calc(52 * var(--u));
    font-size: calc(21 * var(--u));
    gap: calc(14 * var(--u));
  }

  .agent_meter {
    width: calc(90 * var(--u));
  }

  .agent_name,
  .agent_name.is-long {
    position: static;
    margin-top: calc(84 * var(--u));
    font-size: calc(68 * var(--u));
    line-height: 1.08;
  }

  .agent_lead,
  .agent_card.is-final .agent_lead {
    position: static;
    width: auto;
    font-size: calc(28 * var(--u));
    line-height: 1.35;
  }

  .agent_sep,
  .agent_rule,
  .agent_examples,
  .agent_examples-label {
    display: none;
  }

  .agent_col,
  .agent_col.is-problem,
  .agent_col.is-action {
    position: relative;
    left: auto;
    top: auto;
    order: 5;
    width: auto;
    height: auto;
    min-height: calc(120 * var(--u));
    padding-left: calc(90 * var(--u));
  }

  .agent_label {
    font-size: calc(20 * var(--u));
  }

  .agent_chip {
    top: 0;
    width: calc(70 * var(--u));
    height: calc(70 * var(--u));
  }

  .agent_body {
    position: static;
    width: auto;
    margin-top: calc(6 * var(--u));
    font-size: calc(27 * var(--u));
    line-height: 1.35;
  }

  .agent_cols {
    display: flex;
    flex-direction: column;
    order: 5;
    gap: calc(20 * var(--u));
  }

  /* Les connexions restent nettes et visibles : Safari perd ce filtre sur les couches 3D. */
  .ax_wires {
    filter: none;
    stroke-width: 3;
  }

  .is-live .ax_wires {
    opacity: 0.95;
  }

  .ax_pulse {
    stroke-width: 3.5;
  }

  /* La scène garde ses tuiles et ses connexions, à une échelle calculée d'après la place libre (agents.js). */
  .ax_stage,
  .ax_stage.is-hub {
    position: relative;
    left: auto;
    top: auto;
    flex: none;
    order: 4;
    zoom: var(--stage-zoom, 0.8);
    align-self: center;
    margin-block: auto;
    transform: perspective(calc(1700 * var(--u))) rotateX(4deg) rotateY(-7deg) skewY(4deg);
  }

  .agent_card > * {
    flex-shrink: 0;
  }

  .agent_card.is-final {
    justify-content: flex-start;
  }

  .agent_cta {
    position: static;
    align-self: flex-start;
    order: 6;
  }

  .agents_lead {
    font-size: 0.9375rem;
  }
}

/* Hauteur réelle d'un iPhone dans Safari : un seul texte à la fois, la scène garde sa taille. */
@media (max-width: 767px) and (max-height: 800px) {
  .agent_card:not(.is-final) .agent_lead {
    display: none;
  }

  .agent_name,
  .agent_name.is-long {
    margin-top: calc(76 * var(--u));
    font-size: calc(62 * var(--u));
  }

  .agent_tabs {
    display: flex;
    order: 5;
    gap: calc(10 * var(--u));
  }

  .agent_tab {
    flex: 1;
    min-height: 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: none;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background-color 0.25s, color 0.25s, border-color 0.25s;
  }

  .agent_tab.is-on {
    border-color: var(--menthe);
    background: var(--menthe);
    color: #0d1512;
  }

  .agent_cols {
    display: grid;
    order: 6;
  }

  .agent_cols .agent_col {
    grid-area: 1 / 1;
    min-height: 0;
    padding-left: 0;
    visibility: hidden;
  }

  .agent_cols[data-tab='action'] .is-action,
  .agent_cols[data-tab='problem'] .is-problem {
    visibility: visible;
  }

  .agent_cols .agent_label,
  .agent_cols .agent_chip {
    display: none;
  }

  .agent_cols .agent_body {
    margin-top: 0;
  }
}

@media (max-width: 1199px) {
  .chapters {
    display: none;
  }

  .navbar_mail {
    display: none;
  }

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

@media (max-width: 480px) {
  .hero_meta {
    font-size: 0.75rem;
    padding: 0.2rem;
  }

  .hero_meta li {
    gap: 0.35rem;
    padding: 0.4rem 0.55rem 0.4rem 0.5rem;
    letter-spacing: -0.02em;
  }

  .hero_meta svg {
    width: 0.8rem;
    height: 0.8rem;
  }
}

@media (max-width: 640px) {
  .loader_tagline,
  .loader_brand .loader_divider {
    display: none;
  }

  .loader_center {
    width: 60vw;
  }
}

@media (max-width: 991px) {
  .spin-badge.is-faq {
    display: none;
  }

  :root {
    --nav-h: 4rem;
  }

  .hide-tablet,
  .navbar_links {
    display: none !important;
  }

  /* Sur mobile, la barre compacte reste visible partout. */
  .navbar.is-hero {
    background: color-mix(in srgb, var(--fond) 92%, transparent);
    border-color: var(--trait);
  }

  .navbar.is-hero .navbar_container {
    height: var(--nav-h);
  }

  .navbar.is-hero .navbar_brand .logo {
    height: 1.45rem;
  }

  .navbar_menu-button {
    display: flex;
  }

  .navbar_menu {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100svh;
    padding: calc(var(--nav-h) + 2rem) var(--pad) 2.5rem;
    background: var(--fond);
  }

  .navbar_menu-list {
    display: flex;
    flex-direction: column;
  }

  .navbar_menu-link {
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--trait);
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.035em;
    font-size: 2.6rem;
    line-height: 1.1;
    text-transform: uppercase;
  }

  .navbar_menu-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }

  /* Accueil : tablettes en haut, choix du métier puis accroche en bas */

  .gamme_container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1.25rem;
    padding: 0 var(--pad) 1.25rem;
  }

  .hero_intro,
  .hero_strip {
    position: relative;
    inset: auto;
    width: 100%;
  }

  .hero_intro {
    gap: 0.9rem;
  }

  .hero_intro .eyebrow {
    display: none;
  }

  .hero_intro .display-xl {
    font-size: clamp(2.5rem, 11vw, 3.4rem);
  }

  .hero_lead {
    font-size: 0.875rem;
  }

  .hero_actions {
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin-top: 0.2rem;
  }

  .hero_actions .button {
    flex: 1;
    gap: 0.5rem;
    height: 2.9rem;
    padding: 0 0.6rem;
    font-size: 0.625rem;
    letter-spacing: 0.05em;
  }

  .hero_strip {
    order: -1;
    display: block;
    padding-top: 0;
    border-top: 0;
  }

  .selector {
    padding-right: 0;
  }

  .hero_features {
    display: none;
  }

  .selector_titles {
    height: 2.6rem;
  }

  .selector_slide {
    font-size: 1.85rem;
  }

  .profile_container,
  .benefits_container {
    align-items: flex-start;
    padding: calc(var(--nav-h) + 1.25rem) var(--pad) 0;
  }

  .profile_main {
    width: 100%;
    margin-top: 0;
  }

  .profile_stack {
    width: 100%;
    height: 25rem;
  }

  .profile_desc {
    justify-content: flex-start;
    gap: 0.8rem;
  }

  .profile_desc .display-xl {
    font-size: clamp(2.1rem, 9vw, 2.8rem);
  }

  .profile_actions {
    display: none;
  }

  .profile_p,
  .benefits_p {
    font-size: 0.9375rem;
  }

  .profile_list {
    display: block;
    border-top: 1px solid var(--trait);
  }

  .profile_list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--trait);
    font-size: 0.875rem;
  }

  .profile_list strong {
    font-weight: 500;
  }

  .profile_list span {
    color: var(--gris);
  }

  .callouts {
    display: none;
  }

  .benefits_text {
    width: 100%;
    gap: 0.75rem;
    margin-top: 0;
  }

  .benefits_text .eyebrow {
    display: none;
  }

  .step_num {
    font-size: 3.2rem;
  }

  .benefits_text .display-xl {
    font-size: clamp(2.1rem, 9vw, 2.8rem);
  }

  .step_compare dd {
    font-size: 0.8125rem;
  }

  .steps_nav {
    right: var(--pad);
    width: auto;
  }

  .steps_item {
    font-size: 0.75rem;
  }

  .argument_container {
    align-items: flex-start;
    padding: calc(var(--nav-h) + 1.25rem) var(--pad) 0;
  }

  .argument_main {
    width: 100%;
    gap: 0.8rem;
    margin-top: 0;
  }

  .argument_main .display-xl {
    font-size: clamp(2.2rem, 9.5vw, 3rem);
  }

  .argument_p {
    font-size: 0.9375rem;
  }

  .argument_actions {
    display: none;
  }

  .benefits_strip {
    bottom: 1rem;
    padding-top: 0.9rem;
  }

  .benefits_strip ul {
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 0;
  }

  .benefits_strip li {
    gap: 0.6rem;
    padding: 0 0.6rem;
  }

  .benefits_strip li:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .benefit_icon {
    width: 2.3rem;
    height: 2.3rem;
  }

  .benefit_icon svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  .benefit_text {
    display: none;
  }

  .benefit_title {
    font-size: 0.8125rem;
  }

  .packshot_main {
    top: calc(var(--nav-h) + 1.25rem);
    width: auto;
    right: var(--pad);
    gap: 0.8rem;
  }

  .packshot_main .display-xl {
    font-size: clamp(2.1rem, 9vw, 2.8rem);
  }

  .packshot_p {
    font-size: 0.9375rem;
  }

  .packshot_features,
  .app_card {
    display: none;
  }

  .row_selector {
    right: var(--pad);
    bottom: 1.25rem;
    gap: 0.75rem;
  }

  .row_count {
    white-space: nowrap;
  }

  .row_segments {
    flex: 1;
    margin-right: 0.5rem;
  }

  .row_segments span {
    flex: 1;
    width: auto;
  }

  .faq_head,
  .contact_panel,
  .contact_form {
    grid-template-columns: 1fr;
  }

  .faq_head {
    gap: 1.5rem;
    padding-right: 0;
  }

  .faq_title {
    font-size: clamp(2.3rem, 10.5vw, 3.2rem);
    white-space: normal;
  }


  .faq_ask {
    margin-top: 0;
  }

  .faq_list {
    padding-right: 0;
  }

  .faq_question {
    gap: 0.9rem;
    padding: 0.8rem 0.8rem 0.8rem 0.9rem;
  }

  .faq_question .faq_chip {
    width: 2.2rem;
    height: 2.2rem;
  }

  .faq_text {
    font-size: 1.15rem;
  }

  .contact_actions {
    flex-direction: column;
    align-items: stretch;
  }

  .faq_answer p {
    padding: 0 1rem 1.3rem 0.9rem;
  }

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

  .footer_pitch,
  .footer_brand {
    grid-column: 1 / -1;
  }

  .footer_brand {
    align-items: flex-start;
  }

  .footer_bottom {
    flex-direction: column;
  }
}

/* ---------- Tablette ---------- */

@media (min-width: 768px) and (max-width: 991px) {
  html {
    font-size: 17px;
  }

  .hero_intro .display-xl {
    font-size: 4.4rem;
  }

  .hero_lead {
    max-width: 38rem;
    font-size: 1.125rem;
  }

  .hero_actions {
    gap: 0.75rem;
  }

  .hero_actions .button {
    flex: none;
    gap: 0.75rem;
    height: 3.4rem;
    padding: 0 0.5rem 0 1.5rem;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
  }

  .selector_slide {
    font-size: 2.5rem;
  }

  .profile_stack {
    height: 36vh;
  }

  .profile_desc .display-xl,
  .benefits_text .display-xl,
  .argument_main .display-xl,
  .packshot_main .display-xl {
    font-size: 3.4rem;
    line-height: 1.04;
  }

  .profile_p,
  .benefits_p,
  .argument_p,
  .packshot_p {
    max-width: 40rem;
    font-size: 1.0625rem;
  }

  .profile_list {
    display: none;
  }

  .step_compare dd {
    font-size: 1rem;
  }

  .step_num {
    font-size: 4.2rem;
  }

  .benefit_title {
    font-size: 0.9375rem;
  }

  .faq_title {
    font-size: 4rem;
  }

  .field input,
  .field select,
  .field textarea {
    font-size: 16px;
  }
}

/* ---------- Téléphone ---------- */

@media (max-width: 767px) {
  /* Base de lecture : 16 px, et pas de zoom automatique d'iOS sur les champs. */
  html {
    font-size: 16px;
  }

  .gradient_overlay {
    background: linear-gradient(180deg, transparent 82%, color-mix(in srgb, var(--fond) 45%, transparent) 100%);
  }

  .hero_waves {
    opacity: 0.4;
  }

  .eyebrow {
    font-size: 0.625rem;
    letter-spacing: 0.12em;
  }

  /* Accueil */
  .gamme_container {
    gap: 1rem;
    padding: 0 1.25rem max(1.25rem, env(safe-area-inset-bottom));
  }

  .hero_intro {
    gap: 0.85rem;
  }

  .hero_intro .display-xl {
    font-size: min(11.2vw, 3.2rem);
    line-height: 1.02;
  }

  .hero_lead {
    max-width: none;
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .hero_actions {
    display: flex;
    gap: 0.5rem;
  }

  .hero_actions .button.has-arrow,
  .hero_actions .button {
    flex: none;
    height: 3.1rem;
    padding: 0 0.45rem 0 1.05rem;
    font-size: 0.875rem;
    letter-spacing: 0;
    gap: 0.6rem;
    white-space: nowrap;
  }

  .hero_actions .button:not(.is-outline) {
    flex: 1 1 auto;
    justify-content: space-between;
  }

  .hero_actions .button_arrow {
    width: 2.1rem;
    height: 2.1rem;
  }

  .hero_actions .button_arrow svg {
    width: 0.8rem;
    height: 0.8rem;
  }

  .hide-phone {
    display: none;
  }

  /* Le bandeau passe à la ligne s'il manque de place, jamais hors de l'écran. */
  .hero_meta {
    display: flex;
    flex-wrap: wrap;
    align-self: stretch;
    gap: 0.35rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-size: 0.8125rem;
  }

  .hero_meta li,
  .hero_meta .hero_meta-reply {
    gap: 0.4rem;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    letter-spacing: 0;
  }

  .hero_meta li:not(.hero_meta-reply) {
    box-shadow: inset 0 0 0 1px var(--trait);
  }

  .hero_meta svg {
    width: 0.85rem;
    height: 0.85rem;
  }

  /* Le nom du métier le plus long doit tenir à côté des deux flèches. */
  .selector_row {
    gap: 0.5rem;
  }

  .selector_titles {
    min-width: 0;
  }

  .selector_slide {
    font-size: min(7.6vw, 1.9rem);
  }

  .round-arrow {
    width: 2.75rem;
    height: 2.75rem;
  }

  /* Gros plan métier : le texte en haut, le téléphone entier en dessous. */
  .profile_container,
  .benefits_container,
  .argument_container {
    padding: calc(var(--nav-h) + 1rem) 1.25rem 0;
  }

  .profile_stack {
    height: 44vh;
    height: 44svh;
  }

  .profile_desc .display-xl {
    font-size: min(9.4vw, 2.6rem);
    line-height: 1.04;
  }

  .profile_p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .profile_list {
    display: none;
  }

  /* Méthode */
  .benefits_text {
    gap: 0.65rem;
  }

  .step_num {
    font-size: 3.4rem;
  }

  .step_head {
    gap: 0.9rem;
    margin-top: 0;
  }

  .step_when {
    margin-bottom: 0.2rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.625rem;
  }

  .benefits_text .display-xl {
    font-size: min(9.4vw, 2.6rem);
    line-height: 1.04;
  }

  .benefits_p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  /* Le téléphone passe avant le comparatif : c'est lui qui raconte l'étape. */
  .step_compare {
    display: none;
  }

  .steps_nav {
    left: 0;
    right: 0;
    bottom: 0;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem max(0.75rem, env(safe-area-inset-bottom));
    background: var(--fond);
  }

  .steps_bar {
    margin-bottom: 0.45rem;
  }

  .steps_item {
    gap: 0.1rem 0.3rem;
    font-size: 0.6875rem;
  }

  .steps_num {
    display: none;
  }

  /* Engagements : le téléphone passe entre le texte et les bénéfices, sans se faire recouvrir. */
  .argument_main .display-xl {
    font-size: min(8.7vw, 2.5rem);
    line-height: 1.04;
  }

  .argument_p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .benefits_strip {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.7rem 0 max(0.85rem, env(safe-area-inset-bottom));
    background: var(--fond);
  }

  .benefits_strip ul {
    gap: 0.6rem 0;
    padding: 0 1.25rem;
  }

  .benefit_icon {
    width: 2rem;
    height: 2rem;
  }

  .benefit_title {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.25;
  }

  .benefits_strip li {
    align-items: center;
  }

  /* Rangée de téléphones */
  .packshot_main {
    left: 1.25rem;
    right: 1.25rem;
    top: calc(var(--nav-h) + 1rem);
  }

  .packshot_main .display-xl {
    font-size: min(8vw, 2.4rem);
    line-height: 1.06;
  }

  .packshot_p {
    max-width: none;
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .row_selector {
    left: 1.25rem;
    right: 1.25rem;
    bottom: max(1rem, env(safe-area-inset-bottom));
  }

  /* Agents : intro */
  .agents_intro {
    padding: calc(var(--nav-h) + 2.5rem) 1.25rem 2.5rem;
  }

  .agents_intro .display-xl {
    font-size: min(10vw, 2.8rem);
    line-height: 1.04;
  }

  /* FAQ */
  .section.is-faq {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .agents {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }

  .faq_head {
    gap: 1.1rem;
    margin-bottom: 1.25rem;
  }

  .faq_lead {
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .faq_ask {
    gap: 0.8rem;
    padding: 1rem;
  }

  .faq_ask .faq_chip {
    display: none;
  }

  .faq_ask-title {
    margin-top: 0;
    font-size: 1.25rem;
  }

  .faq_ask-text {
    margin-bottom: 0.85rem;
    font-size: 0.875rem;
  }

  .faq_question {
    gap: 0.7rem;
    padding: 0.75rem;
  }

  .faq_text {
    font-size: 1rem;
    line-height: 1.25;
  }

  .faq_icon {
    width: 2.25rem;
    height: 2.25rem;
  }

  .faq_answer p {
    padding: 0 0.9rem 1.1rem;
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  /* Contact : des champs qu'on voit et qu'on touche facilement */
  .contact_panel {
    gap: 2rem;
    margin-top: 3.5rem;
    padding: 1.5rem 1.25rem;
    border-radius: 1.25rem;
  }

  .contact_form {
    gap: 1.1rem;
  }

  .field {
    letter-spacing: 0.05em;
  }

  .field input,
  .field select,
  .field textarea {
    min-height: 3.1rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--trait-fort);
    border-radius: 0.75rem;
    font-size: 16px;
  }

  .contact_actions .button {
    width: 100%;
    height: 3.25rem;
  }

  /* Pied de page */
  .footer_container {
    margin-top: 3.5rem;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding: 2.75rem 1.25rem 1.25rem;
  }

  .footer_top {
    gap: 2rem 1.25rem;
    padding-bottom: 2.25rem;
  }

  .footer_pitch {
    font-size: min(7.4vw, 2rem);
  }

  /* Menu */
  .navbar_menu {
    padding: calc(var(--nav-h) + 1rem) 1.25rem max(1.5rem, env(safe-area-inset-bottom));
  }

  .navbar_menu-link {
    padding: 0.85rem 0;
    font-size: min(9vw, 2.4rem);
    text-transform: none;
  }

  .navbar_menu-bottom .button {
    height: 3.25rem;
  }
}

/* Téléphones étroits : tout tient sur la largeur. */
@media (max-width: 400px) {
  .hero_actions .button.is-outline .button_arrow {
    display: none;
  }


  .hero_actions .button.is-outline {
    padding: 0 1rem;
  }
}

@media (max-width: 340px) {
  .hero_actions .button.has-arrow,
  .hero_actions .button {
    padding: 0 0.35rem 0 0.8rem;
    font-size: 0.8125rem;
    gap: 0.35rem;
  }

  .hero_actions .button.is-outline {
    padding: 0 0.75rem;
  }

  .hero_actions .button_arrow {
    width: 1.8rem;
    height: 1.8rem;
  }
}

/* Très petits écrans : la dernière carte laisse sa place à la scène. */
@media (max-width: 767px) and (max-height: 620px) {
  .agent_card.is-final .agent_lead {
    display: none;
  }
}

/* Téléphones bas : on garde l'essentiel à l'écran. */
@media (max-width: 767px) and (max-height: 720px) {
  .hero_lead {
    display: none;
  }

  .hero_intro .display-xl {
    font-size: min(10vw, 2.6rem);
  }

  .gamme_container {
    gap: 0.6rem;
  }

  .profile_stack {
    height: 46svh;
  }

  .profile_desc .display-xl,
  .benefits_text .display-xl,
  .argument_main .display-xl {
    font-size: min(8vw, 2rem);
  }

  .profile_p,
  .benefits_p,
  .argument_p,
  .packshot_p {
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .packshot_main .display-xl {
    font-size: min(7vw, 1.9rem);
  }

  .step_num {
    font-size: 2.6rem;
  }

  .benefit_icon {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    transition: none;
  }

  .spin-badge_ring,
  .spin-badge_core,
  .cur-view-ring,
  .live-dot,
  .cur.is-click .cur-ring {
    animation: none;
  }

  .nv-ico svg,
  .nv-ico::before,
  .nv-ico::after,
  .nv-door,
  .loader_top,
  .loader_mark-wrap,
  .loader_progress,
  .loader_caption,
  .eyebrow.is-snapped::before,
  .faq_accordion:hover .faq_chip.draw-icon.is-drawn :is(path, circle, rect) {
    animation: none;
  }

  .eyebrow.is-armed::before {
    transform: none;
  }

  .loader_photo {
    transform: none;
    transition: opacity 0.3s;
  }


  .draw-icon :is(path, circle, rect) {
    stroke-dashoffset: 0;
    transition: none;
  }

  .ax_bubble,
  .ax_row,
  .ax_tile,
  .ax_notif,
  .ax_plate,
  .ax_hub,
  .ax_orb,
  .ax_wires {
    opacity: 1;
  }

  .is-live .ax_bubble,
  .is-live .ax_row,
  .is-live .ax_slot,
  .is-live .ax_tile,
  .is-live .ax_notif,
  .is-live .ax_ok,
  .is-live .ax_bar i,
  .is-live .ax_dots i,
  .is-live .ax_spark svg,
  .is-live .ax_wires path,
  .is-live .ax_hub,
  .is-live .ax_orb,
  .is-live .agent_meter i {
    animation: none;
  }

  .faq_answer p {
    opacity: 1;
    translate: none;
    filter: none;
    transition: none;
  }

  .footer_mark .logo {
    translate: none;
    transition: none;
  }

  .faq_accordion:hover {
    transform: none;
  }

  .button::before {
    transition: none;
  }
}

/* Champ piège anti-robots du formulaire de contact */
.field_trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }