/*
Theme Name: Axyrium
Theme URI: https://axyrium.com
Author: Axyrium
Author URI: https://axyrium.com
Description: Premium marketing theme for Axyrium
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: Proprietary
Text Domain: axyrium
*/
/* ============================================
   AXYRIUM - Marketing Website Styles
   Premium Light Theme
   ============================================ */

/* ---- Page Loader ---- */
.loader {
  z-index: 9999;
  color: #fff;
  width: 100%;
  height: 100dvh;
  position: fixed;
  inset: 0% 0% auto;
  display: none;
  overflow: clip;
}
.loader__bg {
  background-color: var(--dark-section-bg);
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}
.loader__container {
  z-index: 2;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}
.loader__bg-bar {
  z-index: 1;
  transform-origin: 0%;
  transform-style: preserve-3d;
  background-color: #fff;
  width: 100%;
  height: .5em;
  position: absolute;
  inset: auto 0% 0%;
  transform: scale3d(0, 1, 1);
}
.loader__bg-curve {
  transform-origin: top;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 6vw;
  display: flex;
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  overflow: hidden;
}
.loader__bg-circle {
  background-color: var(--dark-section-bg);
  border-radius: 50%;
  width: 125%;
  height: 500%;
  position: absolute;
}
.loader__logo-wrap {
  justify-content: center;
  align-items: center;
  width: 4em;
  height: 4em;
  display: flex;
  position: relative;
}
.loader__logo-item {
  width: 100%;
  position: absolute;
}
.loader__logo-item.is--base {
  opacity: .2;
}
.loader__logo-item.is--top {
  -webkit-clip-path: inset(0% 100% 0% 0%);
  clip-path: inset(0% 100% 0% 0%);
}
.loader__logo-img {
  width: 100%;
  display: block;
}
.loader__text-wrap {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  bottom: 3.5em;
}
.loader__text-el {
  text-transform: uppercase;
  white-space: nowrap;
  margin-bottom: -.25em;
  padding-bottom: .25em;
  font-family: var(--font);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  font-weight: 500;
  position: absolute;
}
[data-load-reset] { opacity: 0; }

/* ---- Willem-style intro loader (axl) ---- */
.loader--axl {
  background-color: var(--bg-primary, #f5f5f7);
  color: #1c1d20;
}

.axl {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.axl__h1 {
  white-space: nowrap;
  justify-content: center;
  font-family: var(--font);
  font-size: calc(12.5rem + 2px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  display: flex;
  position: relative;
}

/* Equal fixed widths keep the box (and the expanding image) exactly
   viewport-centered: "axy" = 1.473em, "rium" = 1.825em rendered */
.axl__half {
  display: flex;
  overflow: hidden;
  width: 1.83em;
}

.axl__half--start {
  justify-content: flex-end;
}

.axl__half--end {
  justify-content: flex-start;
}

/* Initial state: hidden below the reveal window (pre-JS safe) */
.axl__letter {
  display: block;
  position: relative;
  transform: translateY(120%);
}

.axl__box {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 0;
  display: flex;
  position: relative;
}

.axl__box-inner {
  justify-content: center;
  align-items: center;
  min-width: 1em;
  height: 95%;
  display: flex;
  position: relative;
}

.axl__growing-image {
  justify-content: center;
  align-items: center;
  width: 0%;
  height: 100%;
  display: flex;
  position: absolute;
  overflow: hidden;
}

.axl__growing-image-wrap {
  width: 100%;
  min-width: 1em;
  height: 100%;
  position: absolute;
}

.axl__cover,
.axl__cover-extra {
  pointer-events: none;
  object-fit: cover;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* Final image matches the hero bg crop (center bottom / cover) for a seamless fade */
.axl__cover {
  object-position: center center;
  /* Match the hero's 20% black overlay so the loader→hero reveal is seamless */
  filter: brightness(0.8);
}

/* Accueil : le loader atterrit sur le cadre sombre du hero (8 oct. 2026) */
.axl__cover--dark {
  background: var(--dark-section-bg);
  filter: none;
}

.axl__cover-extra.is--1 { z-index: 3; }
.axl__cover-extra.is--2 { z-index: 2; }
.axl__cover-extra.is--3 { z-index: 1; }

@media screen and (max-width: 991px) {
  .axl__h1 {
    font-size: calc(9rem + 2px);
  }
}

@media screen and (max-width: 767px) {
  .axl__h1 {
    font-size: calc(5rem + 2px);
  }
}

/* ---- Page Transition Overlay ----
   Osmo « two panels wipe » (12 oct. 2026), panneau 1 --green-100, panneau 2 --green-200 ; essais avant :
   A (blanc puis --green-200), --green-300 puis --green-500, --green-400 puis --green-600, --green-500 puis --green-700, --green-700 puis --green-900, --green-900 puis --dark-section-bg, A = blanc
   puis --green-200, B = --green-200 puis --green-300) : deux
   panneaux montent l'un après l'autre pour couvrir l'écran, le premier
   disparaît et le second continue vers le haut pour révéler la page.
   JS : runLeaveAnimation / runEnterAnimation dans script.js.
   Ancienne version (panneau foncé + libellé de page) : backups/*.pre-osmo-transition */
.transition {
  z-index: 9000;
  pointer-events: none;
  position: fixed;
  inset: 0;
  overflow: clip;
}
.transition__panels {
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}
.transition__panel-2 { /* panneau unique depuis le 12 oct. 2026 (panneau 1 --green-100 retiré) */
  background-color: var(--green-200); /* aplat : le bord de révélation reste net sur le fond #f5f5f7 */
  width: 100%;
  height: 100%;
  position: absolute;
  top: 100%;
}

/* Loader visible immediately on first load - before JS runs */
html.loader-active .loader {
  display: flex;
}


/* ---- CSS Custom Properties ---- */
:root {
  --bg-primary: #f5f5f7;
  --bg-secondary: #f5f5f7;
  --bg-card: #ffffff;
  --bg-card-hover: rgba(0, 0, 0, 0.04);
  --bg-elevated: rgba(0, 0, 0, 0.03);

  --accent: #111111;
  --accent-hover: #333333;
  --accent-glow: rgba(0, 0, 0, 0.08);
  --accent-subtle: rgba(0, 0, 0, 0.03);
  --accent-gradient: linear-gradient(135deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 100%);
  --accent-gradient-text: linear-gradient(135deg, #111 0%, #555 100%);

  /* Palette verte — accent de marque */
  --green-100: #E9F0E7;
  --green-200: #D3E1D1;
  --green-300: #A3C19B;
  --green-400: #83AA7B;
  --green-500: #628B59;
  --green-600: #4C7145;
  --green-700: #3C5B39;
  --green-800: #354931;
  --green-900: #2B3C29;
  --green-950: #151F13;
  /* Pistache « deco » (palette d'accent fournie par l'utilisateur, 12 oct. 2026) ;
     --accent = --color-deco-200 */
  --color-deco-50: #f5f9ec;
  --color-deco-100: #e8f0d7;
  --color-deco-200: #c8dca0;
  --color-deco-300: #b6d086;
  --color-deco-400: #9abc5f;
  --color-deco-500: #7ca042;
  --color-deco-600: #607f31;
  --color-deco-700: #4a6229;
  --color-deco-800: #3d4f25;
  --color-deco-900: #354423;
  --color-deco-950: #1a240f;

  /* Orange — accent d'attention (12 oct. 2026). Petites doses seulement
     (badge, point, prix, mot clé) ; les boutons principaux restent green-900.
     Contrastes : 500 = déco/fonds (2.6:1 sur #f5f5f7, 5.9:1 sur #1c1d20) ;
     600 = grand texte sur clair (3.5:1) ; 700 = petit texte sur clair ou
     texte blanc posé dessus (5.3:1 / 5.75:1). Usages à décider avec Billy. */
  --orange-100: #FFEAE2;
  --orange-500: #FF6A3D;
  --orange-600: #E5501F;
  --orange-700: #B83A12;

  --text-primary: #1c1d20;
  --text-secondary: rgba(0, 0, 0, 0.55);
  --text-tertiary: rgba(0, 0, 0, 0.35);
  --text-quaternary: rgba(0, 0, 0, 0.2);

  --border: rgba(0, 0, 0, 0.08);
  --border-hover: rgba(0, 0, 0, 0.15);
  --border-subtle: rgba(0, 0, 0, 0.05);

  --success: #059669;
  --warning: #d97706;
  --error: #dc2626;

  --font: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* police du site hors titres serif (12 oct. 2026, avant : Inter / Inter Tight) */
  /* Serifs retirés du site : la variable pointe sur la police principale */
  --font-serif: var(--font);
  /* Police de titre : Instrument Serif (400 uniquement) */
  --font-display: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --dark-section-bg: #1b1b1b; /* LE noir du site (12 oct. 2026) : fond de toutes les sections sombres (.dark-frame, .is--dark-section, hero accueil, domes), header sombre, loader, menus et cartes sombres ; remplace #202020 / #1c1d20 / #292929 (texte --text-primary inchangé) */
  /* Police des éléments orange (accent) : Instrument Serif italique depuis le
     12 oct. 2026 (avant : 'Caveat', 'Bradley Hand', cursive ; backup
     backups/style-before-accent-serif-2026-10-12.css) */
  --font-hand: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --section-subtitle-font: var(--font);
  --section-subtitle-size: 1.1875rem;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 28px;

  --nav-height: 72px;
  --section-gap: 140px;
  --container-max: 1200px;
  --container-pad: 24px;

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   DARK THEME
   ============================================ */
[data-theme="dark"] {
  --bg-primary: #1b1b1b;
  --bg-secondary: #16161a;
  --bg-card: #202124;
  --bg-card-hover: rgba(255, 255, 255, 0.04);
  --bg-elevated: rgba(255, 255, 255, 0.04);

  --accent: #ffffff;
  --accent-hover: #e0e0e0;
  --accent-glow: rgba(255, 255, 255, 0.06);
  --accent-subtle: rgba(255, 255, 255, 0.03);
  --accent-gradient: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.03) 100%);
  --accent-gradient-text: linear-gradient(135deg, #fff 0%, #aaa 100%);

  --text-primary: #f0f0f3;
  --text-secondary: rgba(255, 255, 255, 0.55);
  --text-tertiary: rgba(255, 255, 255, 0.35);
  --text-quaternary: rgba(255, 255, 255, 0.2);

  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.15);
  --border-subtle: rgba(255, 255, 255, 0.04);

  color-scheme: dark;
}

/* ---- Reset ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px; /* reste à 16px : les rem ne bougent pas, le +2px est sur body et sur chaque règle */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
}

html::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

body {
  font-family: var(--font);
  font-size: calc(1rem + 2px); /* Hanken Grotesk paraît plus petite qu'Inter : +2px (12 oct. 2026) */
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
ul { list-style: none; }

::selection {
  background: rgba(0, 0, 0, 0.12);
  color: var(--text-primary);
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }

/* ---- Utility ---- */
.text-gradient {
  background: var(--accent-gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.serif-accent {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
}

/* ---- Button Character Stagger Animation ---- */
.btn-animate-chars {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn-animate-chars__text {
  white-space: nowrap;
  line-height: 1.3;
  position: relative;
  z-index: 1;
}

/* Stagger par caractère retiré le 12 oct. 2026 : remplacé par le roulement
   style Cuberto (bloc « Boutons style Cuberto » en fin de fichier). */
.btn-animate-chars [data-button-animate-chars] {
  overflow: hidden;
  position: relative;
  display: inline-block;
}

.btn-animate-chars__bg {
  border-radius: inherit;
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: inset 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

/* Dark buttons: light bg reveal */
.hero-btn-primary .btn-animate-chars__bg,
.nav-btn-primary .btn-animate-chars__bg,
.mega-nav__bar-cta .btn-animate-chars__bg,
.pricing-btn-filled .btn-animate-chars__bg,
.cta-btn-primary .btn-animate-chars__bg {
  background-color: transparent;
}

/* Light/outline buttons: dark bg reveal */
.pricing-btn-outline .btn-animate-chars__bg,
.cta-btn-secondary .btn-animate-chars__bg {
  background-color: rgba(0, 0, 0, 0.06);
}

.hero-btn-secondary .btn-animate-chars__bg {
  background-color: transparent;
}

a.btn-animate-chars:hover .btn-animate-chars__bg,
button.btn-animate-chars:hover .btn-animate-chars__bg {
  inset: 0;
}

.btn-animate-chars svg {
  position: relative;
  z-index: 1;
}

.section-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ---- Section Headers ---- */
.section-header {
  text-align: center;
  margin-bottom: 64px;
}

/* Kicker de section en texte nu majuscule — même style que les badges de
   hero (.hero:not(#hero) .hero-badge), plus de pilule */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-tertiary);
  font-size: calc(0.75rem + 2px);
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.8vw, 4.2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
  color: var(--text-primary);
}

.section-subtitle {
  font-size: calc(var(--section-subtitle-size, 1.1rem) + 2px);
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
  font-family: var(--section-subtitle-font, var(--font));
}


/* ============================================
   MEGA NAVIGATION - Light Theme
   ============================================ */
[data-menu-wrap] {
  --nav-height: 4em;
}

.mega-nav {
  z-index: 100;
  position: fixed;
  top: 0.5em;
  left: 1em;
  right: 1em;
  font-family: var(--font);
  /* top is scroll-driven over the photo hero (inline style from initNavDarkMode) */
}

.mega-nav__bar {
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  width: 100%;
  max-width: 80em;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.06);
}

.mega-nav__bar .glass-effect__fill {
  background-color: rgba(212, 212, 212, 0.15);
}

.mega-nav__container {
  height: var(--nav-height);
  justify-content: space-between;
  align-items: center;
  padding: 1em 1.5em;
  display: flex;
}

.mega-nav__bar-start {
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.mega-nav__bar-logo {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 3em;
  text-decoration: none;
  color: var(--text-primary);
}

.mega-nav__logo-icon {
  height: 28px;
  width: auto;
  display: block;
  flex-shrink: 0;
  transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mega-nav__logo-type {
  height: 22px;
  width: auto;
  display: block;
}

.mega-nav__bar-logo:hover .mega-nav__logo-icon {
  transform: rotate(360deg);
}

.mega-nav__logo-img {
  height: 28px;
  width: auto;
  display: block;
}

.mega-nav__logo-text {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.mega-nav__bar-list {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
}

.mega-nav__bar-list.is--actions {
  margin-left: auto;
}

.mega-nav__bar-link {
  color: var(--text-secondary);
  background-color: transparent;
  border: none;
  border-radius: 8px;
  justify-content: flex-start;
  align-items: center;
  padding: .375em .75em;
  text-decoration: none;
  display: flex;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
  font-family: var(--font);
  position: relative;
}

.mega-nav__bar-link.is--dropdown::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: -10px;
  right: -10px;
  height: 24px;
}

.mega-nav__bar-link:hover {
  color: var(--text-primary);
  background-color: rgba(0, 0, 0, 0.04);
}

.mega-nav__bar-link-label {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
}

.mega-nav__bar-link-icon {
  width: 1.25em;
}

.mega-nav__bar-end {
  grid-column-gap: .75em;
  grid-row-gap: .75em;
  justify-content: flex-end;
  align-items: center;
  display: none;
}

.mega-nav__bar-cta {
  color: #ffffff;
  background: var(--green-900);
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
  padding: .625em 1.125em;
  text-decoration: none;
  display: flex;
  gap: 2px;
  font-size: .875rem; /* 14px comme avant (était .875em du header, qui hérite maintenant de 18px) */
  transition: filter 0.2s ease, transform 0.15s ease;
  font-weight: 500;
}

.mega-nav__bar-cta:hover {
  filter: brightness(0.9);
  transform: scale(0.97);
}

/* Black primary CTA: brightness(0.9) is invisible on near-black, lighten instead */
.mega-nav__bar-cta:not(.is--secondary):not(.is--launch):hover {
  background: var(--green-700);
  filter: none;
}

.mega-nav__bar-cta.is--secondary {
  color: #1c1d20;
  background: transparent;
  border: 1.5px solid #1c1d20; /* comme les autres secondaires (8 oct. 2026) */
}

.mega-nav__bar-cta.is--secondary:hover {
  color: #1c1d20;
  border-color: #1c1d20;
  background: rgba(0, 0, 0, 0.04);
}

.mega-nav__bar-cta.is--launch {
  cursor: default;
  gap: 7px;
  pointer-events: none;
}

.mega-nav__bar-cta.is--launch .mega-nav__soon-badge {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.75);
}

/* Theme Toggle */
.lang-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(0, 0, 0, 0.4);
  transition: color 0.2s ease, background 0.2s ease;
  cursor: pointer;
}

.lang-toggle:hover {
  color: rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.04);
}

/* ---- Nav Dark Mode (over dark sections) ---- */
.mega-nav__bar {
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.mega-nav.is--nav-dark .mega-nav__bar {
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.25);
}

.mega-nav.is--nav-dark .mega-nav__bar .glass-effect__fill {
  background-color: rgba(27, 27, 27, 0.55);
}

.mega-nav.is--nav-dark .mega-nav__bar .glass-effect__inner-glow {
  mix-blend-mode: screen;
  box-shadow: inset 0 0 1.75em rgba(255, 255, 255, 0.04);
}

.mega-nav.is--nav-dark .mega-nav__bar-link {
  color: rgba(255, 255, 255, 0.6);
}

.mega-nav.is--nav-dark .mega-nav__bar-link:hover {
  color: rgba(255, 255, 255, 0.95);
  background-color: rgba(255, 255, 255, 0.06);
}

.mega-nav.is--nav-dark .mega-nav__bar-logo {
  color: #fff;
}

.mega-nav.is--nav-dark .mega-nav__logo-icon,
.mega-nav.is--nav-dark .mega-nav__logo-type {
  filter: brightness(0) invert(1);
}

.mega-nav.is--nav-dark .mega-nav__bar-cta {
  background: #fff;
  color: #1c1d20;
}

.mega-nav.is--nav-dark .mega-nav__bar-cta:hover {
  background: #e8e8e8;
  filter: none;
}

.mega-nav.is--nav-dark .mega-nav__bar-cta.is--secondary {
  color: #fff;
  background: transparent;
  border-color: #fff;
}

.mega-nav.is--nav-dark .mega-nav__bar-cta.is--secondary:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.mega-nav.is--nav-dark .lang-toggle {
  color: rgba(255, 255, 255, 0.5);
}

.mega-nav.is--nav-dark .lang-toggle:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.06);
}

.mega-nav.is--nav-dark .mega-nav__burger-line {
  background-color: rgba(255, 255, 255, 0.8);
}

/* Mega menu dropdown - dark glass */
.mega-nav.is--nav-dark .mega-nav__dropdown-bg {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.mega-nav.is--nav-dark .mega-nav__dropdown-bg .glass-effect__fill {
  background-color: rgba(27, 27, 27, 0.92);
}

.mega-nav.is--nav-dark .mega-nav__dropdown-bg .glass-effect__inner-glow {
  mix-blend-mode: screen;
  box-shadow: inset 0 0 1.75em rgba(255, 255, 255, 0.04);
}

.mega-nav.is--nav-dark .mega-nav__panel-col {
  border-color: rgba(255, 255, 255, 0.06);
}

.mega-nav.is--nav-dark .mega-nav__panel-col.is--colored {
  background-color: transparent;
}

.mega-nav.is--nav-dark .mega-nav__panel-label {
  color: rgba(255, 255, 255, 0.4);
}

.mega-nav.is--nav-dark .mega-nav__panel-link {
  color: rgba(255, 255, 255, 0.85);
}

.mega-nav.is--nav-dark .mega-nav__panel-link:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.mega-nav.is--nav-dark .mega-nav__panel-link-desc {
  color: rgba(255, 255, 255, 0.4);
}

.mega-nav.is--nav-dark .mega-nav__soon-badge {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.45);
}

.mega-nav.is--nav-dark .mega-nav__card {
  background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("assets/img/megamenu/megamenu-visual (1).jpg");
}

.mega-nav.is--nav-dark .mega-nav__panel-link-text {
  color: rgba(255, 255, 255, 0.85);
}

/* ---- Nav Photo Mode (photo hero: light glass bar kept, bar elements white; dropdown stays light) ---- */
.mega-nav.is--nav-photo .mega-nav__bar-cta:not(.is--secondary):not(.is--launch) {
  background: #fff;
  color: #1c1d20;
}

.mega-nav.is--nav-photo .mega-nav__bar-cta:not(.is--secondary):not(.is--launch):hover {
  background: #e8e8e8;
  filter: none;
}

.mega-nav.is--nav-photo .mega-nav__bar-link {
  color: rgba(255, 255, 255, 0.75);
}

.mega-nav.is--nav-photo .mega-nav__bar-link:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.08);
}

.mega-nav.is--nav-photo .mega-nav__bar-logo {
  color: #fff;
}

.mega-nav.is--nav-photo .mega-nav__logo-icon,
.mega-nav.is--nav-photo .mega-nav__logo-type {
  filter: brightness(0) invert(1);
}

.mega-nav.is--nav-photo .mega-nav__bar-cta.is--secondary {
  color: rgba(255, 255, 255, 0.85);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
}

.mega-nav.is--nav-photo .mega-nav__bar-cta.is--secondary:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.08);
}

.mega-nav.is--nav-photo .lang-toggle {
  color: rgba(255, 255, 255, 0.7);
}

.mega-nav.is--nav-photo .lang-toggle:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.mega-nav.is--nav-photo .mega-nav__burger-line {
  background-color: rgba(255, 255, 255, 0.9);
}

/* Bar glass matches the hero secondary button exactly: default glass fill
   (0.06 white) instead of the bar's grey fill, no border, no shadow */
.mega-nav.is--nav-photo .mega-nav__bar {
  border-color: transparent;
  box-shadow: none;
}

.mega-nav.is--nav-photo .mega-nav__bar .glass-effect__fill {
  background-color: rgba(255, 255, 255, 0.06);
}


/* ---- Header plein blanc (défaut depuis le 6 oct. 2026) ----
   Barre + dropdown en blanc opaque, sans verre, et en noir plein sur les
   sections sombres (is--nav-dark). Le hero photo garde le header blanc. VARIANTE VERRE : ajouter la
   classe is--glass sur <nav id="navbar"> (header.php) pour retrouver l'effet
   liquid glass et les modes is--nav-dark / is--nav-photo d'origine (le JS
   initNavDarkMode ne pose ces classes de couleur qu'en variante verre). */
.mega-nav:not(.is--glass) .mega-nav__bar .glass-effect,
.mega-nav:not(.is--glass) .mega-nav__dropdown-bg .glass-effect {
  display: none;
}

.mega-nav:not(.is--glass) .mega-nav__bar {
  background-color: #ffffff;
  border-color: rgba(0, 0, 0, 0.06);
}

.mega-nav:not(.is--glass) .mega-nav__dropdown-bg {
  background-color: #ffffff;
  border-color: rgba(0, 0, 0, 0.06);
}

.mega-nav__dropdown-bg {
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

/* Rayons concentriques (7 oct. 2026) : les boutons du header sont des
   pilules, la barre suit (pilule aussi). Le dropdown ne peut plus se glisser
   10px sous la barre (ses coins carrés dépasseraient des arrondis) : il
   devient une carte détachée, 8px sous la barre, arrondie partout. Desktop
   seulement : sous 992px la barre est pleine largeur sans rayon. Sélecteurs
   préfixés .mega-nav pour passer devant les règles de base plus bas. */
@media screen and (min-width: 992px) {
  .mega-nav .mega-nav__bar {
    border-radius: 24px; /* même rayon que le dropdown (pilule 9999px testée) */
  }
  .mega-nav .mega-nav__dropdown-wrapper {
    top: calc(100% + 8px);
  }
  .mega-nav .mega-nav__dropdown-container,
  .mega-nav .mega-nav__dropdown-bg {
    border-radius: 24px;
  }
  .mega-nav .mega-nav__dropdown-bg {
    border-top: 1px solid rgba(255, 255, 255, 0.35);
  }
  .mega-nav:not(.is--glass) .mega-nav__dropdown-bg {
    border-color: rgba(0, 0, 0, 0.06);
  }
  .mega-nav:not(.is--glass).is--nav-dark .mega-nav__dropdown-bg {
    border-color: rgba(255, 255, 255, 0.1);
  }
}

/* Sur les sections sombres : même header, en noir plein --dark-section-bg (les couleurs de
   texte, logo et boutons viennent des règles .is--nav-dark ci-dessus) */
.mega-nav:not(.is--glass).is--nav-dark .mega-nav__bar,
.mega-nav:not(.is--glass).is--nav-dark .mega-nav__dropdown-bg {
  background-color: var(--dark-section-bg);
  border-color: rgba(255, 255, 255, 0.1);
}

@media screen and (max-width: 991px) {
  .mega-nav:not(.is--glass) .mega-nav__bar-inner,
  .mega-nav:not(.is--glass) .mega-nav__dropdown-panel {
    background-color: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .mega-nav:not(.is--glass).is--nav-dark .mega-nav__bar-inner,
  .mega-nav:not(.is--glass).is--nav-dark .mega-nav__dropdown-panel {
    background-color: var(--dark-section-bg);
  }
}


.mega-nav__bar-inner {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
}

.mega-nav__bar-inner.is--actions {
  margin-left: auto;
}

.mega-nav__burger {
  grid-column-gap: .2em;
  grid-row-gap: .2em;
  background-color: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 8px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  padding: 0;
  display: flex;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.mega-nav__burger:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

.mega-nav__burger-line {
  z-index: 1;
  background-color: var(--text-primary);
  border-radius: .125em;
  flex: none;
  width: 1.25em;
  height: 2px;
  padding: 0;
  display: block;
  position: relative;
}

.mega-nav__back {
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: -.625em;
}

.mega-nav__backdrop {
  z-index: 0;
  opacity: 0;
  will-change: opacity;
  pointer-events: none;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.25);
  position: fixed;
  inset: 0%;
}

.mega-nav__dropdown-wrapper {
  z-index: 2;
  pointer-events: none;
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: calc(100% - 10px);
  left: 0;
  right: 0;
}



.mega-nav__dropdown-container {
  position: relative;
  overflow: hidden;
}



.mega-nav__dropdown-bg {
  will-change: transform;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  border-right: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  /* pas de box-shadow : elle serait entièrement clippée par l'overflow:hidden
     du conteneur (même boîte) et coûtait un repaint par frame */
  position: absolute;
  inset: 0;
}

.mega-nav__dropdown-bg .glass-effect {
  transform: translateZ(0); /* calque compositeur dédié : le flou n'est pas recomposé avec le reste pendant l'animation de hauteur */
}

.mega-nav__dropdown-bg .glass-effect__fill {
  background-color: rgba(255, 255, 255, 0.55);
}

.mega-nav__dropdown-panel {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  position: absolute;
  inset: 0 0 auto;
  overflow: hidden;
}

.mega-nav__dropdown-inner {
  display: flex;
}

.mega-nav__panel-col {
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  flex-flow: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 2em 1.5em;
  display: flex;
}

.mega-nav__panel-col:last-of-type {
  border: none;
}

.mega-nav__panel-col.is--colored {
  background-color: rgba(0, 0, 0, 0.02);
}

.mega-nav__panel-col.is--colored.has--card {
  padding-top: 1.5em;
  padding-bottom: 1.5em;
}

.mega-nav__panel-label {
  text-transform: uppercase;
  padding-left: 1em;
  font-size: calc(.7rem + 2px);
  font-weight: 500;
  line-height: 1;
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
}

.mega-nav__panel-list {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.mega-nav__panel-link {
  color: var(--text-primary);
  border-radius: 8px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: .625em .75em;
  text-decoration: none;
  display: flex;
  transition: background-color 0.15s ease;
}

.mega-nav__panel-link:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

/* ── Liens à icône (panneau Produit) : pastille verte encadrée + texte ── */
.mega-nav__panel-link.has--icon {
  flex-flow: row;
  align-items: center;
  gap: .75em;
}

.mega-nav__panel-link-body {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
}

/* Finition liquid glass : même recette que .glass-effect de la nav (flou de
   fond + fill translucide + highlights inset), mais en CSS pur pour éviter
   d'empiler 7 div dans chaque pastille. Teinte verte, jamais de fond plein. */
.mega-nav__panel-icon {
  flex: none;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 2.5em;
  border: 1px solid rgba(76, 113, 69, 0.22);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--green-800);
  box-shadow:
    inset .18em .18em .06em -.2em rgba(255, 255, 255, 0.55),
    inset -.18em -.18em .06em -.2em rgba(255, 255, 255, 0.3),
    inset 0 0 .9em rgba(255, 255, 255, 0.12);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Reflet diagonal */
.mega-nav__panel-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.1) 42%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

.mega-nav__panel-icon svg {
  position: relative;
  z-index: 1;
  width: 1.125em;
  height: 1.125em;
}

/* Les path des SVG sources portent stroke-width="2" en attribut de présentation :
   une valeur déclarée sur l'élément l'emporte sur l'héritage, il faut donc les
   viser directement pour affiner le trait. */
.mega-nav__panel-icon svg path {
  stroke-width: 1.35;
}

.mega-nav__panel-link.has--icon:hover .mega-nav__panel-icon {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(76, 113, 69, 0.35);
  color: var(--green-900);
}

/* Nav sombre / thème sombre : verre clair translucide */
.mega-nav.is--nav-dark .mega-nav__panel-icon,
[data-theme="dark"] .mega-nav__panel-icon {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--green-300);
  box-shadow:
    inset .18em .18em .06em -.2em rgba(255, 255, 255, 0.28),
    inset -.18em -.18em .06em -.2em rgba(255, 255, 255, 0.14),
    inset 0 0 .9em rgba(255, 255, 255, 0.06);
}

.mega-nav.is--nav-dark .mega-nav__panel-icon::before,
[data-theme="dark"] .mega-nav__panel-icon::before {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 42%, rgba(255, 255, 255, 0) 70%);
}

.mega-nav.is--nav-dark .mega-nav__panel-link.has--icon:hover .mega-nav__panel-icon,
[data-theme="dark"] .mega-nav__panel-link.has--icon:hover .mega-nav__panel-icon {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--green-200);
}

.mega-nav__panel-link.is--coming-soon {
  pointer-events: none;
  cursor: default;
}

.mega-nav__panel-link.is--coming-soon .mega-nav__panel-link-text,
.mega-nav__panel-link.is--coming-soon .mega-nav__panel-link-desc {
  opacity: 0.45;
}

.mega-nav__panel-link.is--coming-soon .mega-nav__panel-icon {
  opacity: 0.45;
}

.mega-nav__panel-link-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mega-nav__soon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.07);
  color: var(--text-secondary);
  font-size: calc(0.65rem + 2px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  position: relative;
  overflow: hidden;
}

.mega-nav__panel-link-head .mega-nav__soon-badge {
  display: inline-block;
  padding: 3px 7px 2px;
}

.mega-nav__soon-badge::after {
  content: '';
  position: absolute;
  top: -50%;
  left: 0;
  width: 45%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 0%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 100%
  );
  transform: translateX(-200%);
  animation: badge-shimmer 4s linear infinite;
  pointer-events: none;
}

@keyframes badge-shimmer {
  0%       { transform: translateX(-200%); }
  20%      { transform: translateX(450%); }
  20.01%   { transform: translateX(-200%); }
  100%     { transform: translateX(-200%); }
}

.mega-nav__panel-link-text {
  font-weight: 500;
  font-size: calc(.9rem + 2px);
}

.mega-nav__panel-link-desc {
  opacity: .6;
  font-size: calc(.8rem + 2px);
  font-weight: 500;
  color: var(--text-secondary);
}

.mega-nav__card {
  background-color: #fff;
  background-image: url("assets/img/megamenu/megamenu-visual (1).jpg");
  background-size: cover;
  background-position: center;
  border: none;
  border-radius: 10px;
  flex-flow: column;
  flex: 1;
  width: 100%;
  display: flex;
  overflow: hidden;
}



.mega-nav__card-content {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1.25em;
  display: flex;
}

.mega-nav__card-text {
  grid-column-gap: .25em;
  grid-row-gap: .25em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.mega-nav__card-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0;
}

.mega-nav__card .mega-nav__panel-link-desc {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  opacity: 1;
  width: 60%;
}

.mega-nav__card-cta {
  display: inline-flex;
  text-decoration: none;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.mega-nav__card-cta:hover {
  opacity: 0.75;
}




/* ── Carte CTA verte du panneau Produit (mêmes marques de logo que les cartes cas d'usage) ── */
.mega-nav .mega-nav__dropdown-panel .mega-nav__card.is--promo {
  background-color: var(--green-800);
  background-image: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  justify-content: flex-start;
}

.mega-nav__card.is--promo::before,
.mega-nav__card.is--promo::after {
  content: '';
  position: absolute;
  width: 260px;
  height: 260px;
  background: url('assets/img/logo/axyrium-icon-white.svg') center/contain no-repeat;
  opacity: 0.07;
  z-index: -1;
  pointer-events: none;
}

/* Quadrant inférieur droit visible, ancré en haut à gauche (comme les cartes cas d'usage) */
.mega-nav__card.is--promo::before {
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
}

/* Quadrant supérieur gauche visible, ancré en bas à droite */
.mega-nav__card.is--promo::after {
  right: 0;
  bottom: 0;
  width: 180px;
  height: 180px;
  transform: translate(50%, 50%);
}

.mega-nav__card.is--promo .mega-nav__card-content {
  gap: 0.4em;
  padding: 1.5em 1.5em 1.75em;
  height: 100%;
}

.mega-nav__card-kicker {
  font-size: calc(0.6rem + 2px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.75; /* toujours 75 % (12 oct. 2026), sur toutes les cartes */
  margin-bottom: 0.5em;
}

/* Photos des fondateurs à la suite du titre (carte Entreprise) */
/* Taille du texte : posées sur la ligne de base, hauteur des capitales,
   comme un mot de plus dans la 2e ligne du titre */
.mega-nav__card-avatars {
  display: inline-flex;
  align-items: flex-end;
  margin-left: 0.22em;
  vertical-align: baseline;
}

.mega-nav__card-avatars img {
  width: 0.74em;
  height: 0.74em;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1.5px rgb(217, 222, 215); /* liseré couleur de la carte */
}

/* La photo de gauche passe par-dessus celle de droite, chevauchement léger */
.mega-nav__card-avatars img {
  position: relative;
}

.mega-nav__card-avatars img:first-child {
  z-index: 1;
}

.mega-nav__card-avatars img + img {
  margin-left: -0.1em;
}

.mega-nav__card.is--promo .mega-nav__card-title {
  font-family: var(--font-display);
  font-size: 1.92rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
}

.mega-nav__card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 0.7em 1.4em;
  border-radius: 9999px;
  background: #fff;
  color: var(--green-900);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mega-nav__card-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* ── Variante claire (Entreprise) : visuel « Frame 84 » + bordure verte.
   Mêmes styles de textes/bouton que la carte Produit, couleurs inversées
   pour le fond clair. Le visuel apporte ses propres ondulations : pas de
   quadrants de logo. ── */
.mega-nav .mega-nav__dropdown-panel .mega-nav__card.is--promo.is--light {
  background-color: var(--green-100);
  background-image: url('assets/img/megamenu/megamenu-entreprise.jpg');
  background-size: cover;
  background-position: center;
  border: 1px solid var(--green-700);
}

.mega-nav__card.is--promo.is--light::before,
.mega-nav__card.is--promo.is--light::after {
  content: none;
}

.mega-nav__card.is--promo.is--light .mega-nav__card-kicker {
  color: var(--green-700);
  position: relative;
  z-index: 0;
}

/* Halo dégradé couleur du fond du visuel : garde le kicker lisible quand une
   ondulation vert foncé de l'image passe derrière */
.mega-nav__card.is--promo.is--light .mega-nav__card-kicker::before {
  content: '';
  position: absolute;
  inset: -0.9em -1.8em;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgb(217, 222, 215) 0%, rgba(217, 222, 215, 0.9) 45%, rgba(217, 222, 215, 0) 78%);
  pointer-events: none;
}

.mega-nav__card.is--promo.is--light .mega-nav__card-title {
  color: var(--green-950);
}

.mega-nav__card.is--promo.is--light .mega-nav__card-btn {
  background: var(--green-900);
  color: #fff;
}

/* ── Carte Entreprise : fond sauge uni et même bordure, quadrants de logo
   vert 700 à 10 % aux mêmes emplacements que la carte Produit (le visuel à
   ondulations est sur la carte Ressources). Le SVG source est blanc : on passe
   par un mask pour le teinter. ── */
.mega-nav [data-nav-content="company"] .mega-nav__card.is--promo.is--light {
  background-image: none;
  background-color: rgb(217, 222, 215);
}

[data-nav-content="company"] .mega-nav__card.is--promo.is--light::before,
[data-nav-content="company"] .mega-nav__card.is--promo.is--light::after {
  content: '';
  background: var(--green-700);
  -webkit-mask: url('assets/img/logo/axyrium-icon-white.svg') center/contain no-repeat;
  mask: url('assets/img/logo/axyrium-icon-white.svg') center/contain no-repeat;
  opacity: 0.1;
}


/* Mega Nav - Mobile (≤991px) */
@media screen and (max-width: 991px) {
  .mega-nav {
    top: 0;
    left: 0;
    right: 0;
  }

  .mega-nav__bar {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    box-shadow: none;
  }

  .mega-nav__bar-start {
    justify-content: space-between;
    align-items: center;
  }

  .mega-nav__bar-list {
    grid-column-gap: 0em;
    grid-row-gap: 0em;
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
  }

  .mega-nav__bar-list.is--actions {
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    flex-flow: row;
    justify-content: space-between;
    align-items: stretch;
  }

  .mega-nav__bar-link {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 0;
    width: 100%;
    padding: .75em 0;
    font-size: calc(1.25rem + 2px);
  }

  .mega-nav__bar-link.is--dropdown {
    justify-content: space-between;
    align-items: center;
  }

  .mega-nav__bar-link.is--back {
    border-bottom-style: none;
    font-size: calc(1rem + 2px);
  }

  .mega-nav__bar-link-label {
    font-size: calc(1.125em - 0.25px); /* = 1.125 × taille d'avant + 2px (le parent a déjà +2px) */
  }

  .mega-nav__bar-link-icon {
    width: 1.5em;
  }

  .mega-nav__bar-link-icon.is--dropdown {
    transform: rotate(-90deg);
  }

  .mega-nav__bar-end {
    display: flex;
  }

  .mega-nav__bar-cta {
    padding: 1em .75em 1em 1em;
  }

  .mega-nav__bar-inner {
    opacity: 0;
    bottom: 0%;
    left: 0%;
    right: 0%;
    top: var(--nav-height);
    visibility: hidden;
    background-color: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    padding: 2em 1.5em;
    position: fixed;
    overflow: auto;
  }

  .mega-nav__backdrop {
    display: none;
  }

  .mega-nav__dropdown-wrapper {
    z-index: 4;
    bottom: 0;
    top: var(--nav-height);
    position: fixed;
  }

  .mega-nav__dropdown-container {
    height: 100%;
    overflow: auto;
  }

  .mega-nav__dropdown-bg {
    display: none;
  }

  .mega-nav__dropdown-panel {
    background-color: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    bottom: 0;
    overflow: auto;
  }

  .mega-nav__dropdown-inner {
    flex-flow: column;
  }

  .mega-nav__panel-col {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    border-right-style: none;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
  }

  .mega-nav__panel-label {
    width: 100%;
  }

  .mega-nav__card.is--promo .mega-nav__card-title {
    font-size: 1.68rem;
  }

  .mega-nav__bar-action {
    flex: 1;
  }
}

@media screen and (max-width: 479px) {
  .mega-nav__bar-link-label {
    font-size: 1em;
  }

  .mega-nav__bar-link-icon {
    width: 1.375em;
  }

  .mega-nav__panel-col.is--colored.has--card {
    padding: 0;
  }

  .mega-nav__card {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 0;
  }

  .mega-nav__card-content {
    padding: 1em 1em 1.5em;
  }
}


/* ============================================
   HERO SECTION
   ============================================ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: transparent; /* transparent so the dither cursor trail shows; body paints --bg-primary */
}

/* (fondu bas de hero supprimé : sur les heros à fond uni il peignait
   par-dessus le dither trail du curseur et le masquait ; le hero photo de
   l'accueil l'avait déjà désactivé de son côté.) */

.hero--home::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 750px;
  height: 750px;
  background: url('assets/img/circle-visual.svg') center/contain no-repeat;
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%) rotate(var(--circle-rot, -120deg));
}

#pricing-hero {
  height: 80vh;
  min-height: 400px;
}

/* Hero Floating Decorations */
.hero-floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.hero-float {
  position: absolute;
  will-change: translate;
  transition: translate 0.15s ease-out;
}

.hero-float-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 18px 22px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06);
  min-width: 200px;
  transform: rotate(var(--float-rotate, 0deg));
  animation: heroFloatBob 6s ease-in-out infinite;
}

.hero-float-card--sm {
  min-width: 150px;
  padding: 14px 18px;
  border-radius: 12px;
}

.hero-float:nth-child(2) .hero-float-card { animation-delay: -1.5s; }
.hero-float:nth-child(3) .hero-float-card { animation-delay: -3s; }
.hero-float:nth-child(4) .hero-float-card { animation-delay: -4.5s; }

@keyframes heroFloatBob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}

.hero-float-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.hero-float-card__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: 0.01em;
}

.hero-float-card__badge {
  font-size: 0.65rem;
  font-weight: 700;
  color: #16a34a;
  background: rgba(34, 197, 94, 0.1);
  padding: 2px 8px;
  border-radius: 100px;
}

.hero-float-card__count {
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.35);
}

.hero-float-card__chart {
  width: 100%;
  height: 40px;
  display: block;
}

/* Mini notification */
.hero-float-notif {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.hero-float-notif__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-500);
  margin-top: 3px;
  flex-shrink: 0;
}

.hero-float-notif__lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.hero-float-notif__line {
  height: 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.08);
}

/* Mini avatar group */
.hero-float-avatars {
  display: flex;
  gap: 0;
}

.hero-float-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -6px;
}

.hero-float-avatar:first-child {
  margin-left: 0;
}

.hero-float-avatar--more {
  background: rgba(0, 0, 0, 0.06) !important;
  font-size: 0.55rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mini task list */
.hero-float-card__tasks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-float-task {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-float-task__check {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  position: relative;
}

.hero-float-task__check.is--done {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(0, 0, 0, 0.8);
}

.hero-float-task__check.is--done::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 1px;
  width: 5px;
  height: 8px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.hero-float-task__text {
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
}

.hero-float-task__text.is--done {
  text-decoration: line-through;
  color: rgba(0, 0, 0, 0.25);
}

/* Article preview card */
.hero-article-card {
  position: absolute;
  bottom: 3%;
  right: 2%;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 9px;
  border-radius: 18px;
  background-color: rgba(212, 212, 212, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 1px 20px rgba(0, 0, 0, 0.06),
    inset 0.28125em 0.28125em 0.09375em -0.328125em rgba(255, 255, 255, 0.4),
    inset 0 0 1.75em rgba(242, 242, 242, 0.15);
  max-width: 360px;
  text-decoration: none;
  color: inherit;
  -webkit-backdrop-filter: saturate(120%) blur(0.75em);
  backdrop-filter: saturate(120%) blur(0.75em);
}

.hero-article-card__img {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}

.hero-article-card__img--placeholder {
  background: rgba(0, 0, 0, 0.07);
}

.hero-article-card__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  gap: 8px;
}

.hero-article-card__title {
  font-family: var(--font);
  font-size: 24px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  line-height: 1.25;
  margin: 0;
}

.hero-article-card__desc {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 768px) {
  .hero-floats {
    display: none;
  }
}


/* Background Video */
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin-left: 200px;
  transform: scale(1.2);
  transform-origin: left center;
  z-index: 0;
}

/* Bottom fade gradient */
.hero-bottom-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 10rem; /* h-40 */
  background: linear-gradient(to top, #ffffff, transparent);
  z-index: 10;
  pointer-events: none;
}

/* Content wrapper */
.hero-content-wrapper {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  padding-top: 64px; /* offset for fixed navbar */
}

@media (min-width: 1024px) {
  .hero-content-wrapper {
    padding: 64px 3rem 0; /* lg:px-12 + navbar offset */
  }
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3rem;
}

/* Badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 4px 16px;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  width: fit-content;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: -1.75rem;
  text-decoration: none;
  cursor: default;
}

a.hero-badge {
  cursor: pointer;
}

.hero-badge--home {
  padding-left: 4px;
}

.hero-badge-img {
  width: 40px;
  height: 24px;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
}

.hero-badge-icon {
  width: 12px;
  height: 12px;
  color: currentColor;
  flex-shrink: 0;
}

.hero-badge span {
  font-size: calc(0.875rem + 2px);
  font-weight: 500;
}

/* Badges de hero en texte nu majuscule — partout sauf l'accueil (#hero garde sa pilule).
   Même style que les labels de colonnes de la section releases (.preview-container__label) */
.hero:not(#hero) .hero-badge {
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero:not(#hero) .hero-badge span {
  font-size: calc(0.75rem + 2px);
  font-weight: 600;
}

.hero:not(#hero) .hero-badge .hero-badge-icon,
.hero:not(#hero) .hero-badge .hero-badge-img {
  display: none;
}

.hero.is--dark-section:not(#hero) .hero-badge {
  color: rgba(255, 255, 255, 0.7);
}

/* Social proof pill */
.hero-badge--sp {
  gap: 10px;
  cursor: default;
}
a.hero-badge--sp {
  cursor: pointer;
}
.hero-badge--sp-naked {
  background: transparent;
  border-color: transparent;
  padding: 0;
  margin-bottom: -1.75rem;
}
.hero-badge-avatars {
  display: flex;
  align-items: center;
}
.hero-badge-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
  flex-shrink: 0;
  margin-left: -8px;
}
.hero-badge-avatar:first-child {
  margin-left: 0;
}
.hero-badge-sp-text {
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font);
  color: rgba(0, 0, 0, 0.7);
}
.hero-badge-sp-text strong {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
}

/* Text group - gap-6 between elements */
.hero-text-group {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* gap-6 */
}

/* Main Heading */
.hero-title {
  font-family: var(--font-display);
  font-size: 3.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.hero-title-line {
  display: block;
}

.hero-title-serif {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
}

.hero-title .split-word {
  display: inline-block;
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 4.8rem;
  }
}

@media (min-width: 1024px) {
  .hero-title {
    font-size: 6rem;
    line-height: 1;
  }
}

/* Subtitle */
.hero-subtitle {
  font-family: var(--hero-subtitle-font, var(--font));
  color: var(--text-secondary);
  font-size: calc(1.5rem + 2px); /* 24px */
  font-weight: 500;
  line-height: 1.5;
  max-width: 36rem;
  margin: 0 auto;
}

/* CTA Buttons */
.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 1rem; /* gap-4 */
  flex-wrap: wrap;
}

.hero-trust {
  font-size: calc(0.8rem + 2px);
  color: rgba(0, 0, 0, 0.35);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.01em;
  margin-top: -2rem;
}

.hero-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 18px 36px;
  border-radius: 9999px;
  background: var(--green-900);
  color: #ffffff;
  font-size: calc(1rem + 2px);
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background var(--transition-fast), transform var(--transition-fast);
  text-decoration: none;
}

.hero-btn-primary:hover {
  background: var(--green-700);
  transform: scale(0.97);
}

.hero-btn-primary svg {
  transition: transform var(--transition-fast);
}

.hero-btn-primary:hover svg {
  transform: translateX(3px);
}

.hero-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 18px 36px;
  border-radius: 9999px;
  background: transparent;
  border: 1.5px solid #1c1d20; /* 1.5px pleine opacité sur tous les secondaires (8 oct. 2026) */
  color: #1c1d20;
  font-size: calc(1rem + 2px);
  font-weight: 500;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  text-decoration: none;
  position: relative;
}

.hero-btn-secondary:hover {
  background: rgba(28, 29, 32, 0.05);
  border-color: #1c1d20;
  transform: scale(0.97);
}

/* ============================================
   HERO - PHOTO BACKGROUND VARIANT (.hero--img)
   ============================================ */
.hero.hero--img {
  /* .hero specificity bump - .is--dark-section sets background:#1c1d20 later in file */
  --hero-inset: 12px;
  background: var(--bg-primary);
}

/* Fond du hero : cadre sombre, mêmes specs que le composant .dark-frame
   (8 oct. 2026) : --dark-section-bg (#1b1b1b depuis le 12 oct. 2026), rayon 30px, inset 12px (8px mobile), logos
   Axyrium blancs à 5 % centrés sur les coins haut gauche / bas droite.
   Avant : photo du lac (hero-lac-2880.avif / -2400.jpg + voile noir 20 %),
   backup : backups/style-before-dark-hero-2026-10-08.css. */
.hero--img .hero-box-bg {
  --hero-logo: 640px;
  position: absolute;
  inset: var(--hero-inset);
  border-radius: 30px;
  background: var(--dark-section-bg);
  overflow: hidden;
  isolation: isolate;
  z-index: 0;
  pointer-events: none;
}

.hero--img .hero-box-bg::before,
.hero--img .hero-box-bg::after {
  content: '';
  position: absolute;
  width: var(--hero-logo);
  height: var(--hero-logo);
  background: url('assets/img/logo/axyrium-icon-white.svg') center / contain no-repeat;
  opacity: 0.05;
}

.hero--img .hero-box-bg::before {
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
}

.hero--img .hero-box-bg::after {
  right: 0;
  bottom: 0;
  transform: translate(50%, 50%);
}

/* No circle visual over the photo */
.hero--img.hero--home::before {
  display: none;
}


/* Left-aligned content */
.hero--img .hero-inner {
  align-items: flex-start;
  text-align: left;
  width: 100%;
}

.hero--img .hero-title {
  color: #fff;
}

.hero--img .hero-subtitle {
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  max-width: 43rem;
}

/* Social proof pill on photo */
.hero--img .hero-badge-sp-text,
.hero--img .hero-badge-sp-text strong {
  color: #fff;
}

/* Avatars: no ring - a crescent is masked out where the next avatar overlaps,
   so the photo behind shows through the gap */
.hero--img .hero-badge-avatar {
  border: none;
}

/* Next sibling overlaps by 8px, so its center sits at 34px (20px offset + 14px
   radius) from this avatar's left edge; cut = neighbor radius (14px) + ~2.5px gap */
.hero--img .hero-badge-avatar:not(:last-child) {
  -webkit-mask: radial-gradient(circle at 34px 50%, transparent 16px, #000 17px);
  mask: radial-gradient(circle at 34px 50%, transparent 16px, #000 17px);
}

/* Primary button: white pill, dark text */
.hero--img .hero-btn-primary {
  background: #fff;
  color: #16171a;
}

/* Bouton secondaire sur fond sombre (hero de l'accueil + toute section
   sombre) : même contour que .cta-btn-secondary (8 oct. 2026). L'effet
   verre (.glass-effect) a été retiré de tous les boutons secondaires. */
.hero--img .hero-btn-secondary,
.is--dark-section .hero-btn-secondary {
  border: 1.5px solid #fff;
  color: #fff;
  transition: transform var(--transition-fast), border-color 0.2s ease;
}

.hero--img .hero-btn-secondary:hover,
.is--dark-section .hero-btn-secondary:hover {
  background: transparent;
  border-color: #fff;
  transform: scale(0.97);
}

.hero--img .hero-btn-secondary .btn-animate-chars__bg,
.is--dark-section .hero-btn-secondary .btn-animate-chars__bg {
  transition: inset 0.6s cubic-bezier(0.625, 0.05, 0, 1), background-color 0.2s ease;
}

.hero--img .hero-btn-secondary:hover .btn-animate-chars__bg,
.is--dark-section .hero-btn-secondary:hover .btn-animate-chars__bg {
  background-color: rgba(255, 255, 255, 0.08);
}

/* Trust line hidden on photo hero (not in design) */
.hero--img .hero-trust {
  display: none;
}

/* Carte app « Recommandation de prix » à droite du hero photo, dans un
   contour verre (liquid glass) qui déborde de 10px autour de l'image.
   Le backdrop-filter est sur .hero-card, l'élément animé par l'entrée du
   hero : un ancêtre animé formerait une racine de backdrop et le flou
   n'apparaîtrait qu'à la fin de l'animation. Masquée sous 1280px (le titre
   à 5rem passerait dessous). */
.hero--img .hero-card-wrap {
  position: absolute;
  inset: var(--hero-inset);
  top: calc(32px + 4em); /* bas du header (nav photo : top 32px, hauteur 4em) → centrée entre le header et le bas de la boîte */
  /* Bord droit aligné sur celui de la barre de nav (.mega-nav : 1em de marge, barre max 80em centrée) */
  right: max(var(--hero-inset), calc((100vw - 80em) / 2));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 21; /* au-dessus de .hero-content-wrapper (20) sinon il capte le survol de la carte */
}

.hero-card {
  position: relative;
  width: min(316px, 100vw - 1030px); /* visuel 296 × 408 + cadre de 10px */
  padding: 10px;
  border-radius: 16px;
  -webkit-backdrop-filter: saturate(120%) blur(0.75em);
  backdrop-filter: saturate(120%) blur(0.75em);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
  isolation: isolate;
  pointer-events: auto; /* le wrap est en pointer-events: none ; la carte reçoit le survol (sheen) */
}

/* Balayage lumineux au survol : au-dessus de l'image */
.hero-card .ax-sheen {
  z-index: 2;
}

.hero-card .glass-effect {
  display: block;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Wrapper média seul : cible du masque diagonal et du sheen (pas le cadre) */
.hero-card__media {
  position: relative;
  z-index: 1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.hero-card__img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1279px) {
  .hero--img .hero-card-wrap {
    display: none;
  }
}

/* Glass card (bottom right) - removed for now; code in hero-glass-card-backup.md */

@media (max-width: 991px) {
  .hero--img .hero-box-bg {
    border-radius: 24px;
  }
}

@media (max-width: 768px) {
  .hero--img .hero-box-bg {
    --hero-logo: 320px;
    border-radius: 20px;
  }

  .hero.hero--img {
    --hero-inset: 8px;
  }
}

/* Blur-in animation */
.blur-in {
  opacity: 1;
  filter: none;
  transform: none;
}



/* ---- Buttons (shared, used by CTA etc.) ---- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: var(--radius-lg);
  background: var(--accent);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(30, 165, 255, 0.35);
}

.btn-primary.btn-lg {
  padding: 18px 40px;
  font-size: 1rem;
  border-radius: var(--radius-xl);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  font-size: 0.9375rem;
  font-weight: 500;
  border: 1px solid var(--border-hover);
  background: rgba(255,255,255,0.02);
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.btn-secondary:hover {
  color: var(--text-primary);
  border-color: var(--text-tertiary);
  background: rgba(255,255,255,0.04);
}


/* ============================================
   SOCIAL PROOF
   ============================================ */
.social-proof {
  padding: 80px 0 80px;
  border-top: 1px solid var(--border);
}

.social-proof-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  text-align: center;
}

.social-proof-label {
  font-size: calc(0.8125rem + 2px);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  margin-bottom: 36px;
}

.logo-wall {
  display: flex;
  justify-content: center;
  width: 100%;
}

.logo-wall__collection {
  width: 100%;
}

.logo-wall__list {
  display: flex;
  flex-flow: nowrap;
  justify-content: center;
}

.logo-wall__item {
  flex: 0 0 16.666%;
  position: relative;
}

[data-logo-wall-list] [data-logo-wall-item]:nth-child(n+7) {
  display: none;
}

.logo-wall__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.logo-wall__logo-before {
  padding-top: 50%;
}

.logo-wall__logo-target {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40%;
  display: flex;
  position: absolute;
  padding: 0 1.5em;
}

.logo-wall__logo-img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  opacity: 0.4;
  filter: grayscale(100%) invert(1) brightness(0.2);
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.logo-wall__logo-img:hover {
  opacity: 0.7;
}

@media screen and (max-width: 991px) {
  .logo-wall__list {
    flex-wrap: wrap;
    justify-content: center;
  }
  .logo-wall__item {
    width: 33.333%;
  }
  [data-logo-wall-list] [data-logo-wall-item]:nth-child(n+7) {
    display: none;
  }
}


/* ============================================
   FEATURES
   ============================================ */
/* ============================================
   HOME STATS / BUILT FOR YOU SECTION
   ============================================ */
.home-stats {
  padding: 0 0 var(--section-gap);
}

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

.hs-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: var(--radius-xl);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.hs-card--split {
  justify-content: space-between;
  gap: 48px;
}

.hs-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Colonne de droite : 2/3 en haut, 1/3 en bas */
.hs-col .hs-card:first-child {
  flex: 2;
}

.hs-col .hs-card:last-child {
  flex: 1;
}

.hs-card--photo {
  position: relative;
  min-height: 500px;
  background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.07)), url('assets/img/new-brand/girl-new-branding.jpg') center 30% / cover no-repeat;
  border: none;
}

.hs-photo-kicker {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 10px;
}

.hs-photo-title {
  font-family: var(--font);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
  max-width: 18ch;
}

.hs-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.hs-value {
  font-family: var(--font);
  font-size: clamp(2.5rem, 3.5vw, 3.25rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.hs-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.hs-quote {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hs-quote-text {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .hs-grid {
    grid-template-columns: 1fr;
  }

  .hs-card--photo {
    min-height: 420px;
  }

  .hs-card--split {
    gap: 32px;
  }
}

.features {
  padding: 50px 0 var(--section-gap);
}

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

.features-grid-wrapper {
  position: relative;
}

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

.features-product-badge {
  position: absolute;
  right: -60px;
  bottom: 160px;
  width: 150px;
  height: 150px;
  z-index: 10;
  animation: badgeFloat 3s ease-in-out infinite;
  border-radius: 50%;
}


.features-grid .feature-card-large {
  grid-column: span 3;
}

.features-grid .feature-card:not(.feature-card-large) {
  grid-column: span 2;
}

.feature-card {
  position: relative;
  padding: 28px;
  border-radius: var(--radius-xl);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
  overflow: hidden;
}

.feature-card:hover {
}

.feature-card-glow {
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0;
  transition: opacity var(--transition-slow);
  pointer-events: none;
}

.feature-card:nth-child(1) .feature-card-glow { background: rgba(30, 165, 255, 0.15); }
.feature-card:nth-child(2) .feature-card-glow { background: rgba(108, 92, 231, 0.15); }

.feature-card:hover .feature-card-glow {
}

.feature-icon-wrap {
  margin-bottom: 20px;
}

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon-blue { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.6); }
.feature-icon-purple { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.6); }
.feature-icon-cyan { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.6); }
.feature-icon-green { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.6); }
.feature-icon-orange { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.6); }
.feature-icon-pink { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.6); }

.feature-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

.feature-desc {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* Feature card large visuals */
.feature-card-large {
  padding-bottom: 0;
}

.feature-card-large .feature-icon-wrap {
  display: none;
}

.feature-cta-wrap {
  margin-top: 20px;
}

.feature-cta-wrap .hero-btn-primary {
  padding: 14px 28px;
  font-size: 0.875rem;
}
.feature-visual {
  margin-top: 16px;
  padding: 0;
  background: transparent;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: none;
  overflow: hidden;
  max-height: 150px;
}

/* Dashboard Mockup */
.dash-mockup {
  display: flex;
  background: #fafafa;
  border-radius: 0;
  overflow: hidden;
}

.dash-sidebar {
  width: 36px;
  background: #fff;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 10px;
  flex-shrink: 0;
}

.dash-sidebar-dot {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.08);
}

.dash-sidebar-dot.is--active {
  background: rgba(0, 0, 0, 0.25);
}

.dash-main {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.dash-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.dash-stat-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  padding: 8px 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dash-stat-label {
  font-size: 0.5rem;
  color: rgba(0, 0, 0, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dash-stat-value {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.dash-stat-change {
  font-size: 0.5rem;
  color: rgba(0, 0, 0, 0.25);
  font-weight: 500;
}

.dash-stat-change.is--up {
  color: rgba(16, 160, 80, 0.75);
}

.dash-charts-row {
  display: flex;
  gap: 6px;
  flex: 1;
  min-height: 0;
}

.dash-chart-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.dash-chart-card.dash-chart-wide {
  flex: 2;
}

.dash-chart-title {
  font-size: 0.5rem;
  color: rgba(0, 0, 0, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dash-area-chart {
  width: 100%;
  flex: 1;
  min-height: 50px;
}

.dash-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  flex: 1;
  min-height: 50px;
}

.dash-bar {
  flex: 1;
  height: var(--h);
  background: rgba(0, 0, 0, 0.07);
  border-radius: 2px 2px 0 0;
  transition: background 0.2s ease;
}

.dash-bar.is--active {
  background: rgba(0, 0, 0, 0.2);
}

/* AI Task Creator Mockup */
.ai-mockup {
  background: #fafafa;
  border-radius: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-msg {
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.75rem;
  line-height: 1.4;
}

.ai-msg--user {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.5);
  align-self: flex-start;
  border-bottom-left-radius: 3px;
  font-weight: 500;
  font-style: italic;
}

.ai-msg--ai {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  align-self: flex-start;
  width: 100%;
  border-bottom-left-radius: 3px;
  padding: 12px 14px;
}

.ai-msg-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  color: rgba(0, 0, 0, 0.5);
  margin-bottom: 10px;
}

.ai-msg-header svg {
  color: rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.ai-msg-header strong {
  color: var(--text-primary);
  font-weight: 600;
}

.ai-breakdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-breakdown-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
  color: var(--text-primary);
  font-weight: 500;
}

.ai-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

.ai-due {
  margin-left: auto;
  font-size: 0.625rem;
  color: rgba(0, 0, 0, 0.3);
  font-weight: 500;
}
.mini-chart {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.mini-stat {
  text-align: center;
  padding: 16px 8px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.mini-stat-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.mini-stat-label {
  display: block;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* AI Pulse */
.ai-pulse-ring {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 10px auto;
}

.ai-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  animation: ai-pulse 3s ease-in-out infinite;
}

.ai-ring-1 { animation-delay: 0s; }
.ai-ring-2 { inset: -15px; animation-delay: 0.5s; }
.ai-ring-3 { inset: -30px; animation-delay: 1s; }

@keyframes ai-pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.05); }
}

.ai-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #222, #555);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}


/* ============================================
   HOW IT WORKS
   ============================================ */
.how-it-works {
  position: relative;
  padding: 110px 0;
  overflow: visible;
  z-index: 10;
}

.how-it-works .section-title {
  color: rgba(255, 255, 255, 0.6);
}

.how-it-works.is--dark-section::after {
  content: '';
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  width: 110%;
  height: var(--dome-bottom-height, 0px);
  background: var(--dark-section-bg);
  border-radius: 0 0 50% 50%;
  pointer-events: none;
  will-change: height;
  z-index: 10;
}

.is--dark-section .step-card__square {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
}

.is--dark-section .step-card:hover .step-card__square {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.is--dark-section .step-title {
  color: #fff;
}

.is--dark-section .step-desc {
  color: rgba(255, 255, 255, 0.5);
}

.is--dark-section .step-number {
  color: rgba(255, 255, 255, 0.12);
}

.is--dark-section .step-line {
  background: rgba(255, 255, 255, 0.1);
}

.is--dark-section .step-visual {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

.is--dark-section .step-visual__line {
  background: rgba(255, 255, 255, 0.15);
}

/* Step 1: setup header box */
.is--dark-section .step-visual__setup-header {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Step 2: kanban board */
.is--dark-section .step-visual__board-card {
  background: rgba(255, 255, 255, 0.1);
}

.is--dark-section .step-visual__board-card.is--active {
  background: rgba(255, 255, 255, 0.22);
}

.is--dark-section .step-visual__board-card.is--done {
  background: rgba(34, 197, 94, 0.2);
}

.is--dark-section .step-visual__col-title {
  color: rgba(255, 255, 255, 0.35);
}

/* Step 1 & 3: checkboxes */
.is--dark-section .step-visual__ai-check {
  border-color: rgba(255, 255, 255, 0.2);
}

.is--dark-section .step-visual__ai-check.is--checked {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.75);
}

.is--dark-section .step-visual__ai-check.is--checked::after {
  border-color: #1c1d20;
}

/* Step 3: AI prompt box */
.is--dark-section .step-visual__ai-prompt {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.is--dark-section .step-visual__ai-sparkle {
  color: rgba(255, 255, 255, 0.5);
}

/* Step 1: invite button + avatars */
.is--dark-section .step-visual__invite-btn {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

.is--dark-section .step-visual__avatar {
  border-color: rgba(255, 255, 255, 0.12);
  filter: brightness(0.6);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
  align-items: start;
}

.step-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.step-card__square {
  aspect-ratio: 1;
  width: 100%;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: border-radius 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease, transform 0.5s ease;
}

.step-card:hover .step-card__square {
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  transform: scale(1.02);
}

.step-card:hover .step-visual {
  opacity: 0.1;
}

.steps-grid:has(.step-card:hover) .step-card:not(:hover) {
  opacity: 0.4;
  transform: scale(0.95);
}

.steps-grid:has(.step-card:hover) .step-card:not(:hover) .step-card__square {
  transform: scale(0.95);
}

.step-number {
  font-size: 3rem;
  font-weight: 500;
  font-family: var(--font-serif);
  color: rgba(0, 0, 0, 0.15);
  margin-bottom: 20px;
  line-height: 1;
}

.step-line {
  width: 40px;
  height: 1px;
  background: rgba(0, 0, 0, 0.12);
  margin: 0 auto 20px;
}

.step-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  position: relative;
  z-index: 1;
}

.step-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 16px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.5s ease, margin 0.4s ease;
}

.step-card:hover .step-desc {
  opacity: 1;
  max-height: 120px;
  margin-top: 20px;
}

/* Step Visuals */
.step-visual {
  position: absolute;
  bottom: -20%;
  right: -20%;
  width: 65%;
  height: 65%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.06;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.step-visual__line {
  height: 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.07);
}

/* Step 1: Setup Checklist */
.step-visual__setup {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.step-visual__setup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 6px;
}

.step-visual__setup-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 4px;
}

.step-visual__ai-check.is--checked {
  background: rgba(0, 0, 0, 0.75);
  border-color: rgba(0, 0, 0, 0.75);
}

.step-visual__ai-check.is--checked::after {
  content: '';
  position: absolute;
  left: 2.5px;
  top: 0.5px;
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.step-visual__invite-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.step-visual__avatar-stack {
  display: flex;
}

.step-visual__avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -6px;
}

.step-visual__avatar:first-child {
  margin-left: 0;
}

.step-visual__invite-btn {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.4);
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.06);
}

/* Step 2: Kanban Board */
.step-visual__board {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.step-visual__board-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.step-visual__col-title {
  font-size: 0.55rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.step-visual__board-card {
  height: 22px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.06);
}

.step-visual__board-card.is--active {
  background: rgba(0, 0, 0, 0.15);
}

.step-visual__board-card.is--done {
  background: rgba(34, 197, 94, 0.2);
}

/* Step 3: AI Generation */
.step-visual__ai {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.step-visual__ai-prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.step-visual__ai-sparkle {
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.3);
}

.step-visual__ai-output {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 4px;
}

.step-visual__ai-task {
  display: flex;
  align-items: center;
  gap: 8px;
}

.step-visual__ai-check {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
  position: relative;
}

/* ============================================
   PRICING
   ============================================ */
.pricing {
  padding: 220px 0 var(--section-gap);
}

/* circle-visual on pricing - keep as option
.pricing {
  position: relative;
}
.pricing::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 900px;
  background: url('assets/img/circle-visual.svg') center/contain no-repeat;
  pointer-events: none;
  z-index: -1;
}
*/

/* (#pricing-hero ~ #pricing { padding-top: 0 } retiré le 3 oct. 2026 : règle site-wide 80px) */

.pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 56px;
}

.toggle-pill {
  display: flex;
  align-items: center;
  position: relative;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 9999px;
  padding: 4px;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.toggle-pill-bg {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  width: calc(50% - 4px);
  background: var(--green-900);
  border-radius: 9999px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.toggle-pill.active .toggle-pill-bg {
  transform: translateX(100%);
}

.toggle-pill-option {
  position: relative;
  z-index: 1;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 8px 20px;
  color: var(--text-tertiary);
  transition: color 0.3s ease;
  user-select: none;
}

.toggle-pill-option.toggle-active {
  color: #ffffff;
}

.toggle-save {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--success);
  background: rgba(52, 211, 153, 0.1);
  padding: 4px 10px;
  border-radius: 100px;
}

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

.pricing-card {
  position: relative;
  padding: 40px 32px;
  border-radius: var(--radius-xl);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
  display: flex;
  flex-direction: column;
}

.pricing-card .pricing-features {
  flex: 1;
}

.pricing-card:not(.pricing-card-featured):hover {
}

.pricing-card-featured {
  border: none;
  background: linear-gradient(180deg, var(--green-200) 0%, var(--green-300) 100%);
  color: var(--green-950);
}



.pricing-card-featured .pricing-plan,
.pricing-card-featured .pricing-currency,
.pricing-card-featured .pricing-value,
.pricing-card-featured .pricing-amount {
  color: var(--green-950);
}

.pricing-card-featured .pricing-period {
  color: rgba(21, 31, 19, 0.55);
}

.pricing-card-featured .pricing-desc {
  color: rgba(21, 31, 19, 0.65);
}

.pricing-card-featured .pricing-features li {
  color: rgba(21, 31, 19, 0.85);
}

.pricing-card-featured .pricing-features svg {
  color: var(--green-600);
}

.pricing-card-featured .pricing-btn-filled {
  background: var(--green-900);
  color: #ffffff;
}

.pricing-card-featured .pricing-btn-filled:hover {
  background: var(--green-700);
}

.pricing-popular {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 18px;
  border-radius: 9999px;
  background: var(--green-600);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 3px solid #ffffff;
}

.pricing-header {
  margin-bottom: 32px;
}

.pricing-plan {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pricing-amount {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin: 12px 0 10px;
}

.pricing-currency {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-tertiary);
}

.pricing-value {
  font-size: 3.5rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* Odometer roller styles */
[data-odometer-element] {
  display: inline-flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
}

[data-odometer-part="mask"],
[data-odometer-part="static"] {
  display: inline-block;
  overflow: clip;
  padding: 0.05em;
  margin: -0.05em;
}

[data-odometer-part="roller"] {
  display: block;
  white-space: pre;
  text-align: center;
  will-change: transform;
}

[data-odometer-part="static"] {
  display: inline-block;
}

.pricing-period {
  font-size: 0.875rem;
  color: var(--text-tertiary);
  margin-left: 4px;
}

.pricing-desc {
  font-size: 0.875rem;
  color: var(--text-tertiary);
  line-height: 1.5;
}

.pricing-save-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.75);
  background: transparent;
  border: 1.5px solid #000000;
  border-radius: 100px;
  padding: 0 14px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.35s ease, padding 0.35s ease;
}

.pricing-save-badge.visible {
  padding: 7px 14px;
  max-height: 40px;
  opacity: 1;
  margin-top: 32px;
}

.pricing-save-badge svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.pricing-card-featured .pricing-save-badge {
  color: #ffffff;
  border-color: #ffffff;
}

.pricing-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.pricing-features li svg {
  color: var(--accent);
  flex-shrink: 0;
}

.pricing-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  padding: 18px 32px;
  border-radius: 9999px;
  font-size: 1rem;
  font-weight: 600;
  transition: all var(--transition-fast), transform var(--transition-fast);
}

.pricing-btn-outline {
  border: none;
  color: var(--text-primary);
  background: transparent;
}

.pricing-btn-outline:hover {
  background: rgba(0,0,0,0.03);
  transform: scale(0.97);
}

.pricing-btn-filled {
  background: var(--green-900);
  color: #ffffff;
}

.pricing-btn-filled:hover {
  background: var(--green-700);
  filter: none;
  transform: scale(0.97);
}


/* ============================================
   PRICING COMPARISON TABLE
   ============================================ */
.pricing-comparison {
  padding: 0 0 var(--section-gap);
}

.comparison-wrap {
  width: 100%;
  position: relative;
  --columns-in-view: 3;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.comparison-header {
  z-index: 10;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  display: flex;
  position: sticky;
  top: 72px;
}

.comparison-header__corner {
  min-width: 0;
  max-width: calc(100% / (var(--columns-in-view) + 1));
  flex: 1;
}

.comparison-header__inner {
  flex: var(--columns-in-view);
  min-width: 0;
  max-width: calc(var(--columns-in-view) * 100% / (var(--columns-in-view) + 1));
  border-left: 1px solid var(--border);
}

.comparison-header__list {
  display: flex;
  height: 100%;
}

.comparison-header__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 20px 16px;
  border-right: 1px solid var(--border);
  text-align: center;
}

.comparison-header__col:last-child {
  border-right: none;
}

.comparison-header__name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
}

.comparison-header__meta {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  font-weight: 500;
  margin: 0;
}

.comparison-group-label {
  padding: 10px 20px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  background: var(--accent-subtle);
  border-bottom: 1px solid var(--border);
}

.comparison-row {
  border-bottom: 1px solid var(--border);
  display: flex;
}

.comparison-row:last-child {
  border-bottom: none;
}

.comparison-row__name {
  flex: 1;
  max-width: calc(100% / (var(--columns-in-view) + 1));
  display: flex;
  align-items: center;
  padding: 16px 20px;
}

.comparison-row__cells {
  flex: var(--columns-in-view);
  max-width: calc(var(--columns-in-view) * 100% / (var(--columns-in-view) + 1));
  display: flex;
  border-left: 1px solid var(--border);
}

.comparison-row__cell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  border-right: 1px solid var(--border);
  text-align: center;
}

.comparison-row__cell:last-child {
  border-right: none;
}

.comparison-row__h {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 0;
}

.comparison-row__label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
}

.comparison-row__icon {
  width: 1.125em;
  aspect-ratio: 1;
  color: var(--text-primary);
}

.comparison-row__cell[aria-label="not included"] .comparison-row__icon {
  color: var(--border);
  opacity: 0.6;
}

.comparison-row__pill {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--accent-subtle);
  color: var(--text-tertiary);
  border: 1px solid var(--border);
}

@media (max-width: 767px) {
  .comparison-header__corner {
    display: none;
  }

  .comparison-header__inner {
    max-width: none;
    border-left: none;
  }

  .comparison-row {
    flex-direction: column;
  }

  .comparison-row__name {
    max-width: none;
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
  }

  .comparison-row__cells {
    max-width: none;
    border-left: none;
  }

  .comparison-row__cell {
    padding: 14px 12px;
  }
}

[data-theme="dark"] .comparison-header {
  background: var(--bg-primary);
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials {
  padding: 0 0 var(--section-gap);
}

.centered-slider-group {
  width: 100%;
  position: relative;
}

/* Circular Drag Cursor */
.drag-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.625, 0.05, 0, 1);
}

.drag-cursor.is--visible {
  opacity: 1;
}

.drag-cursor__circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--dark-section-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.4s cubic-bezier(0.625, 0.05, 0, 1);
}

.drag-cursor:hover .drag-cursor__circle,
.drag-cursor.is--visible .drag-cursor__circle {
  transform: scale(1);
}

.drag-cursor__label {
  color: #fff;
  font-size: calc(0.8rem + 2px);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-family: var(--font);
  text-transform: uppercase;
}

.drag-cursor__arrow {
  color: #1c1d20;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Dark mode */
[data-theme="dark"] .drag-cursor__circle {
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .drag-cursor__label {
  color: #1c1d20;
}

[data-theme="dark"] .drag-cursor__arrow {
  color: #fff;
}

.drag-cursor.is--vertical {
  flex-direction: column;
}

/* Grab cursor on slider */
.centered-slider-group:hover,
.centered-slider-group:hover * {
  cursor: grab;
}

.centered-slider-group:active,
.centered-slider-group:active * {
  cursor: grabbing;
}

.centered-slider-button,
.centered-slider-button *,
.centered-slider-button:hover,
.centered-slider-button:hover *,
.centered-slider-button:active,
.centered-slider-button:active * {
  cursor: pointer !important;
}


.centered-slider-row {
  width: 100%;
  margin-top: 2em;
  margin-bottom: 1.5em;
  padding-top: 1em;
  padding-bottom: 1em;
  display: flex;
  position: relative;
  overflow: clip;
}

.centered-slider-list {
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
}

.centered-slider-slide {
  flex: none;
  padding: 0.75em;
  transition: opacity .25s cubic-bezier(.77, 0, .175, 1);
  position: relative;
}

.centered-slider-slide__inner {
  position: relative;
  display: flex;
  width: 21em;
  padding: 1.5em;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.5em;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background-color: rgba(0, 0, 0, 0.02);
  border-radius: var(--radius-xl);
}

.centered-slider-row:has(.centered-slider-slide.active) .centered-slider-slide:not(.active) {
  opacity: 0.4;
}

/* Corner accents on active slide */
.centered-slider-slide::after {
  --size: 1em;
  --width: 1px;
  --gap: 0.125em;
  --color: #1c1d20;
  content: '';
  position: absolute;
  inset: calc(var(--gap) * -1);
  z-index: 1;
  opacity: 0;
  padding: calc(var(--gap) + var(--width));
  outline: var(--width) solid var(--color);
  outline-offset: calc(var(--gap)/-1);
  border-radius: var(--radius-xl);
  mask:
    conic-gradient(at var(--size) var(--size),#0000 75%,#000 0)
    0 0/calc(100% - var(--size)) calc(100% - var(--size)),
    linear-gradient(#000 0 0) content-box;
  transition: all 0.4s cubic-bezier(0.65, 0.05, 0, 1);
}

.centered-slider-slide.active::after {
  outline-offset: calc(-1*var(--width));
  opacity: 1;
}

.slide-demo__description {
  font-size: calc(0.9375rem + 2px);
  line-height: 1.7;
  color: var(--text-secondary);
}

.slide-demo__details {
  gap: 0.75em;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.slide-demo__avatar {
  border-radius: 100em;
  width: 2.5em;
  height: 2.5em;
  object-fit: cover;
  overflow: hidden;
}

.slide-demo__stars {
  color: #f5a623;
  font-size: 0.875rem;
  letter-spacing: 2px;
}

.slide-demo__eyebrow {
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
}

.slide-demo__author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.slide-demo__name {
  font-size: calc(0.875rem + 2px);
  font-weight: 600;
  color: var(--text-primary);
}

.slide-demo__role {
  font-size: calc(0.75rem + 2px);
  font-weight: 500;
  color: var(--text-tertiary);
}

.centered-slider-content {
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.centered-slider-bullet__list {
  gap: 0.75em;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.centered-slider-bullet {
  background-color: transparent;
  border: none;
  border-radius: 100em;
  width: 2.5em;
  height: 2.5em;
  padding: 0;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.centered-slider-bullet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 100em;
}

.centered-slider-bullet:focus {
  border: none;
  outline: none;
}

.centered-slider-bullet::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 100em;
  z-index: -1;
  border: 1px solid #202020;
  transition: all 0.5s cubic-bezier(0.65, 0.05, 0, 1);
}

.centered-slider-bullet:hover::after,
.centered-slider-bullet.active::after,
.centered-slider-bullet:focus::after {
  inset: -5px;
}

.centered-slider-buttons {
  gap: 1em;
  justify-content: center;
  align-items: center;
  display: flex;
}

.centered-slider-button {
  background-color: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.5em;
  justify-content: center;
  align-items: center;
  width: 3em;
  height: 3em;
  padding: 0;
  transition: border-color .2s, background-color .2s;
  display: flex;
  cursor: pointer;
  color: var(--text-primary);
}

.centered-slider-button:hover {
  background-color: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.15);
}

.centered-slider-button.is--prev {
  transform: rotate(-180deg);
}

.slider-button-arrow {
  justify-content: center;
  align-items: center;
  width: 1.25em;
}

@media screen and (max-width: 479px) {
  .centered-slider-slide {
    width: 85vw;
  }
  .centered-slider-slide__inner {
    width: 100%;
  }
}


/* ============================================
   ÉTUDE DE CAS - carte photo + texte (template-parts/case-studies.php)
   Carte blanche arrondie (30px) avec 16px de marge interne : photo à gauche
   (flex 1, radius 20px), colonne texte à droite (370px) répartie haut/bas.
   ============================================ */
.case-studies {
  padding: 80px 0;
}
.case-studies__header {
  margin-bottom: 32px;
}
.case-studies__header .section-title {
  margin-bottom: 0;
}

.case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: var(--bg-card, #fff);
  border-radius: 30px;
}
/* Panneaux empilés (grid-area 1/1) : la carte garde la hauteur du plus haut,
   rien ne bouge au changement. data-case-status posé par initCaseCard. */
.case-card__panels {
  display: grid;
}
.case-card__case {
  grid-area: 1 / 1;
  display: flex;
  align-items: stretch;
  gap: 48px;
  visibility: hidden;
}
.case-card__case:first-child {
  visibility: visible;
}
[data-case-panel][data-case-status="inactive"] {
  visibility: hidden;
}
[data-case-panel][data-case-status="active"],
[data-case-panel][data-case-status="leaving"] {
  visibility: visible;
}
.case-card__logo-slot {
  display: flex;
  height: 32px;
  overflow: hidden;
  margin-bottom: 10px; /* 20px de gap + 10px = 30px entre le logo et le titre (1,5x) */
}

/* Indicateur « n de N » + flèche : pastille blanche (96x109) qui déborde de
   40px à droite de la carte ; le contenu (≈30px) commence quasi au ras du
   bord de la carte (padding-left 52px, centré dans les 44px restants). */
.case-card__next {
  position: absolute;
  top: 50%;
  right: -40px;
  width: 96px;
  height: 109px;
  margin-top: -54px;
  padding: 0 0 0 52px;
  border: 0;
  border-radius: 50%;
  background: var(--bg-card, #fff);
  color: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s;
}
.case-card__next:hover,
.case-card__next:focus-visible {
  color: var(--text-primary);
  outline: none;
}
.case-card__count {
  font-family: var(--font);
  font-size: 13px;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.case-card__arrow {
  display: block;
  width: 22px;
  height: 8px;
  transition: transform 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.case-card__next:hover .case-card__arrow {
  transform: translateX(4px);
}
.case-card__media {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 699 / 610;
  border-radius: 20px;
  overflow: hidden;
  background: #e9e7e2;
}
.case-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.case-card__body {
  flex: 0 0 370px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: 24px 0;
}
.case-card__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 324px;
}
.case-card__logo {
  width: 125px;
  height: 32px;
  object-fit: contain;
  object-position: left center;
}
.case-card__logo--text {
  display: flex;
  align-items: center;
  width: auto;
  font-family: var(--font);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  white-space: nowrap;
}
.case-card__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0;
}
.case-card__desc {
  font-family: var(--font);
  font-size: 1.1875rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.55);
  max-width: 17em;
  margin: -12px 0 0;
}
.case-card__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.case-card__point {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: 324px;
}
.case-card__point + .case-card__point {
  margin-top: 19px;
  padding-top: 19px;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  max-width: none;
}
.case-card__point + .case-card__point > * {
  max-width: 324px;
}
.case-card__point-title {
  font-family: var(--font);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0;
}
.case-card__point-desc {
  font-family: var(--font);
  font-size: 1.1875rem;
  line-height: 1.25;
  color: rgba(0, 0, 0, 0.55);
  margin: 0;
}

.case-studies__note {
  margin: 16px 0 0;
  padding: 0 16px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-tertiary);
}

@media screen and (max-width: 991px) {
  .case-card { padding: 12px; border-radius: 24px; }
  .case-card__case { flex-direction: column; gap: 8px; }
  .case-card__next { position: static; margin: 8px 12px 4px auto; width: 72px; height: 72px; padding: 0; background: var(--bg-primary, #f5f5f7); }
  .case-card__media { flex: none; width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; }
  .case-card__body { flex: none; padding: 20px 12px 16px; gap: 36px; }
}
@media screen and (max-width: 767px) {
  .case-studies { padding: 50px 0; }
  .case-studies__header { margin-bottom: 24px; }
  .case-card__desc,
  .case-card__point-desc { font-size: 1.0625rem; }
}

/* ============================================
   REFLET LUMINEUX AU SURVOL (site entier : tous les blocs image masqués)
   initImageSheen() (script.js) pose au mouseenter un <span class="ax-sheen">
   calé exactement sur la boîte de l'image (même rayon), retiré à la fin.
   Deux bandes claires en diagonale balaient du bas-gauche vers le haut-droit,
   une fois par survol.
   ============================================ */
.ax-sheen {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.ax-sheen::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: linear-gradient(45deg,
    transparent 0 39%,
    rgba(255, 255, 255, 0.16) 43.5%,
    rgba(255, 255, 255, 0.5) 47%,
    rgba(255, 255, 255, 0.16) 50.5%,
    transparent 53% 56%,
    rgba(255, 255, 255, 0.28) 58.5%,
    transparent 61% 100%);
  mix-blend-mode: screen;
  /* ease-in-out vrai (mi-temps = mi-course) + course courte : la bande
     traverse l'image en ~0,7 s. Une courbe à départ rapide la faisait
     passer en 150 ms, invisible. */
  animation: ax-sheen 1.2s cubic-bezier(0.42, 0, 0.58, 1) forwards;
}
@keyframes ax-sheen {
  0%   { transform: translate(-45%, 45%); }
  100% { transform: translate(45%, -45%); }
}

/* ============================================
   FINAL CTA
   ============================================ */
.final-cta-dark-wrap {
  background: transparent;
  padding: var(--section-gap) 0;
}

.final-cta {
  padding: 0;
  position: relative;
  margin-bottom: 60px;
}

.cta-content {
  position: relative;
  text-align: center;
  padding: 64px 40px; /* 100px avant le 7 oct. 2026 */
  border-radius: var(--radius-2xl);
  /* Fond v2 (7 oct. 2026, collines floues au coucher du soleil). Backup v1 :
     assets/img/new-brand/cta-img.jpg (remettre l'url ci-dessous, sans image-set) */
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), var(--dark-section-bg) url('assets/img/new-brand/cta-bg-v2-1920.jpg') center / cover no-repeat;
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), image-set(url('assets/img/new-brand/cta-bg-v2-2304.avif') type('image/avif'), url('assets/img/new-brand/cta-bg-v2-1920.jpg') type('image/jpeg'));
  overflow: hidden;
}

@media (max-width: 767px) {
  .cta-content:not(.cta-content--light) {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), image-set(url('assets/img/new-brand/cta-bg-v2-1200.avif') type('image/avif'), url('assets/img/new-brand/cta-bg-v2-1920.jpg') type('image/jpeg'));
  }
}

/* Rayons lumineux (conic-gradient) : retirés du CTA photo le 7 oct. 2026
   (règle :not(--light) juste en dessous), gardés sur la variante claire */
.cta-content:not(.cta-content--light)::before {
  display: none;
}

.cta-content::before {
  content: '';
  position: absolute;
  bottom: -80%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg at 50% 60%,
    transparent 0deg,
    rgba(255, 255, 255, 0.07) 5deg,
    transparent 25deg,
    transparent 45deg,
    rgba(255, 255, 255, 0.06) 50deg,
    transparent 70deg,
    transparent 85deg,
    rgba(255, 255, 255, 0.09) 90deg,
    transparent 115deg,
    transparent 140deg,
    rgba(255, 255, 255, 0.06) 145deg,
    transparent 165deg,
    transparent 185deg,
    rgba(255, 255, 255, 0.08) 190deg,
    transparent 215deg,
    transparent 240deg,
    rgba(255, 255, 255, 0.06) 245deg,
    transparent 265deg,
    transparent 280deg,
    rgba(255, 255, 255, 0.09) 285deg,
    transparent 310deg,
    transparent 335deg,
    rgba(255, 255, 255, 0.06) 340deg,
    transparent 360deg
  );
  mask-image: radial-gradient(ellipse 80% 70% at 50% 60%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 60%, black 0%, transparent 70%);
  pointer-events: none;
}

.cta-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.8vw, 4.2rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
  color: #ffffff;
  max-width: 64rem; /* 1024px (75 % avant le 7 oct. 2026) */
  margin-left: auto;
  margin-right: auto;
}

.cta-subtitle {
  /* mirror .hero-subtitle as rendered on the photo hero */
  font-family: var(--hero-subtitle-font, var(--font));
  color: rgba(255, 255, 255, 0.9);
  font-size: calc(1.5rem + 2px);
  font-weight: 500;
  line-height: 1.5;
  max-width: 36rem; /* = .hero-subtitle (43rem avant le 7 oct. 2026, valeur du hero photo) */
  margin: 0 auto 36px;
}

.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.cta-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 18px 36px;
  border-radius: 9999px;
  background: #ffffff;
  color: #181818;
  font-size: calc(1rem + 2px);
  font-weight: 600;
  transition: background var(--transition-fast), transform var(--transition-fast);
  text-decoration: none;
}

.cta-btn-primary:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: scale(0.97);
}

.cta-btn-primary svg {
  transition: transform var(--transition-fast);
}

.cta-btn-primary:hover svg {
  transform: translateX(3px);
}

.cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 18px 36px;
  border-radius: 9999px;
  background: transparent;
  color: #f0f0f3;
  font-size: calc(1rem + 2px);
  font-weight: 500;
  transition: transform var(--transition-fast);
  text-decoration: none;
  position: relative;
}

/* Contour simple (glass effect retiré du markup cta.php le 7 oct. 2026) ;
   1.5px blanc plein depuis le 8 oct. 2026 */
.cta-btn-secondary {
  color: #fff;
  border: 1.5px solid #fff;
  transition: transform var(--transition-fast), border-color 0.2s ease;
}

.cta-btn-secondary:hover {
  transform: scale(0.97);
  border-color: #fff;
}

.cta-btn-secondary .btn-animate-chars__bg {
  background-color: transparent;
  transition: inset 0.6s cubic-bezier(0.625, 0.05, 0, 1), background-color 0.2s ease;
}

.cta-btn-secondary:hover .btn-animate-chars__bg {
  background-color: rgba(255, 255, 255, 0.08);
}

.cta-note {
  font-size: calc(0.8125rem + 2px);
  font-style: italic;
  color: rgba(255, 255, 255, 0.80);
}

.cta-content .serif-accent {
  color: #ffffff;
}

.cta-content--light {
  background: #ffffff;
}

.cta-content--light::before {
  background: conic-gradient(
    from 0deg at 50% 60%,
    transparent 0deg,
    rgba(0, 0, 0, 0.04) 5deg,
    transparent 25deg,
    transparent 45deg,
    rgba(0, 0, 0, 0.03) 50deg,
    transparent 70deg,
    transparent 85deg,
    rgba(0, 0, 0, 0.05) 90deg,
    transparent 115deg,
    transparent 140deg,
    rgba(0, 0, 0, 0.03) 145deg,
    transparent 165deg,
    transparent 185deg,
    rgba(0, 0, 0, 0.04) 190deg,
    transparent 215deg,
    transparent 240deg,
    rgba(0, 0, 0, 0.03) 245deg,
    transparent 265deg,
    transparent 280deg,
    rgba(0, 0, 0, 0.05) 285deg,
    transparent 310deg,
    transparent 335deg,
    rgba(0, 0, 0, 0.03) 340deg,
    transparent 360deg
  );
}

.cta-content--light .cta-title {
  color: #1c1d20;
}

.cta-content--light .cta-subtitle {
  color: rgba(0, 0, 0, 0.55);
}

.cta-content--light .serif-accent {
  color: #1c1d20;
}

.cta-note--light {
  color: rgba(0, 0, 0, 0.35);
}

.cta-light-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 18px 36px;
  border-radius: 9999px;
  background: transparent;
  color: #1c1d20;
  font-size: 1rem;
  font-weight: 500;
  border: 1px solid rgba(0, 0, 0, 0.15);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
  text-decoration: none;
  position: relative;
}

.cta-light-btn-secondary:hover {
  transform: scale(0.97);
  border-color: rgba(0, 0, 0, 0.3);
}

.cta-light-btn-secondary .btn-animate-chars__bg {
  background-color: rgba(0, 0, 0, 0.04);
}

/* Glass Effect */
.glass-effect {
  -webkit-backdrop-filter: saturate(120%) blur(.75em);
  backdrop-filter: saturate(120%) blur(.75em);
  pointer-events: none;
  isolation: isolate;
  color: #ffffff;
  border-radius: inherit;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.glass-effect__fill {
  opacity: 1;
  border-radius: inherit;
  background-color: rgba(255, 255, 255, 0.06);
  position: absolute;
  inset: 0;
}

.glass-effect__fill-burn {
  opacity: .05;
  mix-blend-mode: color-burn;
  border-radius: inherit;
  background-color: currentColor;
  position: absolute;
  inset: 0;
}

.glass-effect__highlight-soft {
  mix-blend-mode: overlay;
  border-radius: inherit;
  position: absolute;
  inset: 0;
  box-shadow: inset -.28125em -.28125em .09375em -.328125em rgba(255, 255, 255, 0.25);
}

.glass-effect__highlight-strong {
  border-radius: inherit;
  position: absolute;
  inset: 0;
  box-shadow: inset .28125em .28125em .09375em -.328125em rgba(255, 255, 255, 0.4);
}

.glass-effect__edge-light {
  border-radius: inherit;
  mix-blend-mode: plus-lighter;
  position: absolute;
  inset: 0;
  box-shadow: inset .1875em .28125em .09375em -.1875em rgba(180, 180, 180, 0.25);
}

.glass-effect__edge-dark {
  mix-blend-mode: overlay;
  border-radius: inherit;
  position: absolute;
  inset: 0;
  box-shadow: inset -.1875em -.28125em .09375em -.1875em rgba(180, 180, 180, 0.3);
}

.glass-effect__inner-glow {
  mix-blend-mode: darken;
  border-radius: inherit;
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 1.75em rgba(242, 242, 242, 0.15);
}

/* Button handles its own glass - suppress inner overlay entirely */
.hero-btn-secondary .glass-effect {
  display: none;
}


/* ============================================
   FOOTER
   ============================================ */
.footer {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding: 64px 0 40px;
}

.footer-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

/* Ressources + Contact share a sub-grid so the trust badges can sit
   directly under them instead of below the tallest footer column */
.footer-col-duo {
  grid-column: 4 / 6;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-content: start;
}

.footer-trust {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 4px;
}

.trust-badge {
  position: relative;
  display: inline-flex;
  width: 70px;
  height: 70px;
  cursor: help;
}

a.trust-badge {
  cursor: pointer;
}

.trust-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.trust-badge:hover img,
.trust-badge:focus-visible img {
  transform: scale(1.06);
}

.trust-badge::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 250px;
  padding: 10px 14px;
  background: var(--dark-section-bg);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.78rem;
  line-height: 1.45;
  border-radius: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 20;
}

.trust-badge::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1c1d20;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 20;
}

.trust-badge:hover::after,
.trust-badge:hover::before,
.trust-badge:focus-visible::after,
.trust-badge:focus-visible::before {
  opacity: 1;
  visibility: visible;
}

.trust-badge:hover::after,
.trust-badge:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}

/* Les infobulles (même invisibles) débordaient du bord droit sur mobile et
   élargissaient toute la page (441px pour un écran de 390px : le bouton
   menu sortait de l'écran). On coupe le débordement horizontal de la rangée
   (clip garde le débordement vertical, donc les infobulles restent visibles
   au-dessus) et l'infobulle du dernier badge s'aligne sur son bord droit. */
.footer-trust {
  overflow-x: clip;
  overflow-y: visible;
}

.footer-trust .trust-badge:last-child::after {
  left: auto;
  right: 0;
  transform: translateY(4px);
}

.footer-trust .trust-badge:last-child:hover::after,
.footer-trust .trust-badge:last-child:focus-visible::after {
  transform: translateY(0);
}

@media (max-width: 991px) {
  .footer-col-duo {
    grid-column: 1 / -1;
    gap: 36px;
  }
}

@media (max-width: 480px) {
  .footer-col-duo {
    grid-template-columns: 1fr;
  }

  .trust-badge::after {
    max-width: 210px;
  }
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
}

.footer-logo svg {
  color: var(--text-primary);
}

.footer-logo-img {
  height: 28px;
  width: auto;
  display: block;
}

.footer-desc {
  font-size: calc(1rem + 2px);
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.7;
  max-width: 280px;
}

.footer-time-block {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-time-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-time-label {
  font-size: 0.8rem;
  color: var(--text-quaternary);
  min-width: 80px;
}

.footer-time-value {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.footer-time-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: var(--text-quaternary);
}

.footer-time-status.is--open {
  color: #10b981;
}

.footer-time-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.footer-link {
  width: fit-content;
  font-size: calc(1rem + 2px);
  color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.footer-link:hover {
  color: var(--text-primary);
}

.footer-link [data-footer-link-chars] {
  overflow: hidden;
  display: inline-block;
}

.footer-link [data-footer-link-chars] span {
  display: inline-block;
  text-shadow: 0px 1.3em currentColor;
  transform: translateY(0em) rotate(0.001deg);
  transition: transform 0.5s cubic-bezier(0.625, 0.05, 0, 1);
}

.footer-link:hover [data-footer-link-chars] span {
  transform: translateY(-1.3em) rotate(0.001deg);
}

.footer-link.is--coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  cursor: default;
  color: rgba(0, 0, 0, 0.18);
}

/* Animated underline links */
[data-underline-link] {
  text-decoration: none;
  position: relative;
}

[data-underline-link]::before,
[data-underline-link="alt"]::before,
[data-underline-link="alt"]::after {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background-color: currentColor;
  transition: transform 0.4s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}

[data-underline-link="alt"]::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
  transition-delay: 0.3s;
}

[data-underline-link="alt"]::after {
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
  transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {
  [data-hover]:hover [data-underline-link]::before,
  [data-underline-link]:hover::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }

  [data-hover]:hover [data-underline-link="alt"]::before,
  [data-underline-link="alt"]:hover::before {
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
    transition-delay: 0s;
  }

  [data-hover]:hover [data-underline-link="alt"]::after,
  [data-underline-link="alt"]:hover::after {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
    transition-delay: 0.3s;
  }
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.footer-wordmark {
  text-align: center;
  font-size: clamp(72px, 17vw, 240px);
  font-weight: 800;
  color: #e0e0e0;
  letter-spacing: -0.02em;
  line-height: 0.85;
  user-select: none;
  pointer-events: none;
  overflow: hidden;
  height: 0.55em;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 85%);
  mask-image: linear-gradient(to bottom, black 0%, transparent 85%);
}

.footer-copy {
  font-size: 0.8125rem;
  color: var(--text-quaternary);
}

.footer-socials {
  display: flex;
  gap: 16px;
}

.social-link {
  color: var(--text-quaternary);
  transition: color var(--transition-fast);
}

.social-link:hover {
  color: var(--accent);
}

.social-share {
  grid-column-gap: 0.35em;
  grid-row-gap: 0.35em;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  display: flex;
}

.social-share__button {
  color: rgba(0, 0, 0, 0.5);
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 2.8em;
  height: 2.8em;
  font-size: calc(1rem + 2px);
  display: flex;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  padding: 0;
  transition: all 0.4s cubic-bezier(0.625, 0.05, 0, 1);
  transform: scale(1) rotate(0.001deg);
}

.social-share__icon {
  width: 1.2em;
  display: flex;
}

.social-share__icon.is--success {
  position: absolute;
}

@keyframes icon-slide-through {
  0% {
    transform: translateY(0) translateZ(0);
  }
  35% {
    transform: translateY(-140%) translateZ(0);
    visibility: hidden;
  }
  65% {
    transform: translateY(140%) translateZ(0);
    visibility: hidden;
  }
  100% {
    transform: translateY(0) translateZ(0);
  }
}

.social-share__button .social-share__icon:not(.is--success) {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.social-share__button:hover .social-share__icon:not(.is--success) {
  animation: icon-slide-through 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Clipboard success animation */
[data-social-share-type="clipboard"] .social-share__icon {
  transition: transform 0.4s cubic-bezier(0.625, 0.05, 0, 1);
  transform: translateY(0%) rotate(0.001deg);
}

[data-social-share-type="clipboard"] .social-share__icon.is--success {
  color: #009E3B;
  transform: translateY(200%) rotate(0.001deg);
}

[data-social-share-type="clipboard"][data-social-share-success] .social-share__icon {
  transform: translateY(-200%) rotate(0.001deg);
}

[data-social-share-type="clipboard"][data-social-share-success] .social-share__icon.is--success {
  transform: translateY(0%) rotate(0.001deg);
}

/* Hover scaling */
.social-share:has(.social-share__button:hover) .social-share__button {
  transform: scale(0.9) rotate(0.001deg);
}

.social-share:has(.social-share__button:hover) .social-share__button:hover {
  transform: scale(1.1) rotate(0.001deg);
  color: rgba(0, 0, 0, 0.7);
}


/* ============================================
   TITLE REVEAL (SplitText lignes + masque)
   Tous les h1/h2/h3 du container Barba sont cachés tant que JS n'a pas
   tourné (html.ax-js posé inline dans header.php) pour éviter le flash
   avant le split. initSplitReveal() (script.js) les rend visibles puis
   anime chaque ligne depuis le bas. Opt-out : class="no-reveal".
   ============================================ */
html.ax-js [data-barba="container"] :is(h1, h2, h3, .split-reveal):not(.no-reveal, [data-no-anim] *) {
  visibility: hidden;
}

/* Compagnons de titre : rien en CSS, état initial posé par GSAP
   (prepareRevealGroups) pour ne jamais laisser un élément invisible. */

/* Lignes qui se dessinent de gauche à droite (prepareLines / revealLines).
   La bordure d'origine reste dans le flux mais devient transparente ; un
   pseudo-élément la redessine en scaleX. Les barres fines (hr, .plan-card__sep)
   sont scalées directement. */
.ax-line--rel { position: relative; }
.ax-line--top    { border-top-color: transparent !important; }
.ax-line--bottom { border-bottom-color: transparent !important; }
.ax-line--top::before,
.ax-line--bottom::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: var(--ax-line-w, 1px);
  background: var(--ax-line-color, currentColor);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--ax-line-delay, 0s);
  pointer-events: none;
}
.ax-line--top::before    { top: calc(-1 * var(--ax-line-w, 1px)); }
.ax-line--bottom::after  { bottom: calc(-1 * var(--ax-line-w, 1px)); }
.ax-line--inset.ax-line--top::before   { top: 0; }
.ax-line--inset.ax-line--bottom::after { bottom: 0; }
.ax-line--bar {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--ax-line-delay, 0s);
}
.ax-line--top.is-drawn::before,
.ax-line--bottom.is-drawn::after,
.ax-line--bar.is-drawn { transform: scaleX(1); }

/* Titre découpé : colonne flex pour que les marges négatives des masques
   ne fusionnent pas (margin collapsing) */
.is-split-reveal {
  display: flex;
  flex-direction: column;
}

/* Masque de ligne (overflow: clip posé par SplitText) : un peu d'air en
   haut/bas pour ne pas rogner accents et jambages avec line-height serré */
.split-line-mask {
  padding-block: 0.12em;
  margin-block: -0.12em;
}

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */
[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  :root {
    --section-gap: 100px;
  }

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

  .features-grid .feature-card-large,
  .features-grid .feature-card:not(.feature-card-large) {
    grid-column: span 1;
  }

}


@media (max-width: 768px) {
  :root {
    --section-gap: 80px;
    --container-pad: 20px;
  }

  /* Hero */
  .hero-video {
    margin-left: 0;
    transform: scale(1.3);
    transform-origin: center center;
  }

  /* Grids */
  .features-grid,
  .steps-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
  }

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

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .section-header {
    margin-bottom: 48px;
  }

  .cta-content {
    padding: 40px 24px;
  }
}

@media (max-width: 480px) {
  .hero-cta-group {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-btn-primary, .hero-btn-secondary, .btn-primary, .btn-secondary {
    justify-content: center;
  }

  .pricing-card {
    padding: 32px 24px;
  }

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


/* ============================================
   CAREERS PAGE
   ============================================ */

/* Perks : .careers-why est un .dark-frame depuis le 8 oct. 2026
   (padding / fond gérés par le composant) */

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

.careers-perk {
  background: var(--bg-secondary);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 32px 28px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.careers-perk:hover {
  border-color: rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.careers-perk__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.careers-perk__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.careers-perk__desc {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* Positions */
.careers-positions {
  padding: 160px 0 100px;
  background: transparent;
}

.careers-positions__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.careers-role-card {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.careers-role-card:hover {
}

.careers-role-card__dept {
  font-size: calc(0.75rem + 2px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}

.careers-role-card__title {
  font-size: calc(1.125rem + 2px);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.careers-role-card__desc {
  font-size: calc(0.875rem + 2px);
  line-height: 1.65;
  color: var(--text-secondary);
  flex: 1;
  margin-bottom: 20px;
}

.careers-role-card__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.careers-role-card__tag {
  font-size: calc(0.75rem + 2px);
  font-weight: 500;
  color: var(--text-tertiary);
  background: rgba(0, 0, 0, 0.04);
  padding: 4px 10px;
  border-radius: 6px;
}

.careers-role-card__arrow {
  font-size: calc(0.8rem + 2px);
  font-weight: 600;
  color: var(--text-primary);
  margin-left: auto;
  transition: transform 0.2s ease;
}

.careers-role-card:hover .careers-role-card__arrow {
}

/* Responsive */
@media (max-width: 991px) {
  .careers-perks__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .careers-perks__grid {
    grid-template-columns: 1fr;
  }
  .careers-positions__grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================
   ABOUT PAGE
   ============================================ */

/* Split Hero */
.about-hero-split {
  z-index: 1;
}

.about-hero-split .hero-content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px 0;
}

.about-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: stretch;
}

.about-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
}

.about-hero__text .hero-badge {
  margin: 0 0 -1.5rem;
}


#product-hero {
  margin-bottom: 80px;
}

.about-hero__text .hero-text-group {
  align-items: flex-start;
}

.about-hero__text .hero-title {
  text-align: left;
}

.about-hero__text .hero-subtitle {
  text-align: left;
}

.about-hero__text .hero-cta-group {
  justify-content: flex-start;
}

.about-hero__image {
  border-radius: 20px;
  overflow: hidden;
  min-height: 0;
  position: relative;
  z-index: 1;
}

#blog-hero::before,
#careers-hero::before,
#about-hero .about-hero__text {
  justify-content: center;
}

#about-hero::before {
  left: var(--circle-x, 75%);
  top: var(--circle-y, 50%);
}

.about-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 991px) {
  .about-hero__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-hero__text {
    align-items: center;
  }
  .about-hero__text .hero-title,
  .about-hero__text .hero-subtitle {
    text-align: center;
  }
  .about-hero__text .hero-cta-group {
    justify-content: center;
  }
}

/* Story */
.about-story {
  padding: 80px 0;
  background: transparent;
}

.about-story__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 64px;
  align-items: start;
}

.about-story__content .section-badge {
  margin-bottom: 16px;
}

.about-story__content .section-title {
  text-align: left;
  margin-bottom: 32px;
}

.about-story__text {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.about-story__text:last-child {
  margin-bottom: 0;
}

.about-story__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  position: sticky;
  top: 120px;
}

.about-stat {
  background: var(--bg-secondary);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.about-stat:hover {
  border-color: rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.about-stat__number {
  font-size: 2.75rem;
  font-weight: 500;
  font-family: var(--font-serif);
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1;
}

.about-stat__label {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* ── Timeline Section ── */
.about-timeline {
  padding: 110px 0;
  background: var(--dark-section-bg);
  color: #fff;
  position: relative;
  overflow: visible;
  z-index: 10;
}

.about-timeline.is--light {
  padding: var(--section-gap) 0;
  background: var(--bg);
  color: var(--text-primary);
}

.about-timeline.is--light::before,
.about-timeline.is--light::after {
  display: none;
}

.about-timeline.is--light .section-title {
  color: var(--text-primary);
}

.about-timeline.is--light .section-subtitle {
  color: var(--text-secondary);
}

.about-timeline.is--light .about-timeline__item {
  border-left-color: var(--border);
}


.about-timeline.is--light .about-timeline__title {
  color: var(--text-primary);
}

.about-timeline.is--light .about-timeline__desc {
  color: var(--text-secondary);
}

.about-timeline.is--light .about-timeline__year {
  color: var(--text-tertiary);
}

.about-timeline::before {
  content: '';
  position: absolute;
  bottom: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  width: 110%;
  height: var(--dome-height, 0px);
  background: var(--dark-section-bg);
  border-radius: 50% 50% 0 0;
  pointer-events: none;
  will-change: height;
  z-index: 10;
}

.about-timeline::after {
  content: '';
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  width: 110%;
  height: var(--dome-bottom-height, 0px);
  background: var(--dark-section-bg);
  border-radius: 0 0 50% 50%;
  pointer-events: none;
  will-change: height;
  z-index: 10;
}

.about-timeline .section-title {
  color: #fff;
}

.about-timeline .section-subtitle {
  color: rgba(255, 255, 255, 0.5);
}

.about-timeline__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 72px;
}

.about-timeline__item {
  padding: 0 32px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
}

.about-timeline__item:first-child {
  padding-left: 0;
  border-left: none;
}

/* Mêmes gros chiffres masqués (image dans le texte) que .prod-steps__num */
.about-timeline__number {
  display: inline-block;
  font-family: var(--font);
  font-size: calc(128px + 2px);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 24px;
  background: url('assets/img/new-brand/numbers-bg.jpg') center / cover no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.about-timeline__title {
  font-size: calc(1.15rem + 2px);
  font-weight: 600;
  color: #fff;
  margin: 0 0 16px;
  line-height: 1.3;
}

.about-timeline__desc {
  font-size: calc(0.9rem + 2px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
  flex: 1;
}

.about-timeline__year {
  margin-top: 24px;
  font-size: calc(0.8rem + 2px);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.25);
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .about-timeline__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .about-timeline__item {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 32px 0 0;
  }
  .about-timeline__item:first-child {
    border-top: none;
    padding-top: 0;
  }
}

/* ── Vision & Mission ── */
.about-vm {
  padding: 0 0 100px;
  background: transparent;
}


.about-vm__wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Light card - Mission */
.about-vm__card--light {
  padding: 48px 44px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.03);
}

.about-vm__card--light .section-title {
  font-size: 2.04rem;
  line-height: 1.25;
  margin-bottom: 0;
}

.about-vm__text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 420px;
}

.about-vm__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.about-vm__tag {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 100px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

.about-vm__cta {
  margin-top: auto;
  align-self: flex-start;
}

/* Dark card - Vision */
.about-vm__card--dark {
  padding: 48px 44px;
  background: var(--dark-section-bg);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.about-vm__dark-title {
  font-family: var(--font-display);
  font-size: 2.04rem;
  font-weight: 400;
  line-height: 1.25;
  color: #f0f0f3;
  letter-spacing: -0.01em;
  margin-bottom: 0;
}

.about-vm__dark-title .serif-accent {
  color: #f0f0f3;
}

.about-vm__dark-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
  max-width: 420px;
}

/* Decorative visual */
.about-vm__visual {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  margin-top: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
}

.about-vm__grid-svg {
  width: 100%;
  height: auto;
  display: block;
}

.about-vm__visual-tags {
  display: flex;
  justify-content: space-around;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.about-vm__visual-tag {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Dark card footer */
.about-vm__dark-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 16px;
}

.about-vm__trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.08);
  padding: 8px 16px;
  border-radius: 100px;
}

.about-vm__trust-badge svg {
  stroke: #4ade80;
}

.about-vm__link {
  font-size: 0.82rem;
  font-weight: 600;
  color: #f0f0f3;
  text-decoration: none;
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.about-vm__link:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.25);
}

/* Dark mode */
[data-theme="dark"] .about-vm__card--light {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .about-vm__tag {
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .about-vm__card--dark {
  background: #111;
}

@media (max-width: 767px) {
  .about-vm__wrapper {
    grid-template-columns: 1fr;
  }

  .about-vm__card--light,
  .about-vm__card--dark {
    padding: 36px 28px;
  }
}

/* Values */
.about-values {
  padding: 100px 0;
  background: transparent;
}

.about-values__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.about-value-card {
  background: var(--bg-secondary);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 36px 32px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.about-value-card:hover {
}

.about-value-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.about-value-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.about-value-card__desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* Team */
.about-team {
  padding: 100px 0;
  background: transparent;
}

.about-team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.about-team-card {
  background: var(--bg-secondary);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.about-team-card:hover {
}

.about-team-card__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 20px;
  border: 3px solid rgba(0, 0, 0, 0.06);
}

.about-team-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-team-card__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.about-team-card__role {
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 600;
  display: block;
  margin-bottom: 14px;
}

.about-team-card__bio {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-tertiary);
}

/* Numbers */
.about-numbers {
  padding: 100px 0;
  background: transparent;
}

.about-numbers__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.about-numbers__item {
  text-align: center;
  padding: 40px 20px;
  background: var(--bg-secondary);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.about-numbers__item:hover {
  border-color: rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.about-numbers__value {
  display: block;
  font-size: 2.75rem;
  font-weight: 500;
  font-family: var(--font-serif);
  color: var(--text-primary);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 10px;
}

.about-numbers__label {
  font-size: 0.875rem;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* Careers CTA */
.about-careers {
  padding: 60px 0 100px;
  background: transparent;
}

.about-careers__card {
  background: var(--dark-section-bg);
  border-radius: 24px;
  padding: 64px;
  position: relative;
  overflow: hidden;
}

.about-careers__card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
  pointer-events: none;
}

.about-careers__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 600px;
}

.about-careers__content .section-badge {
  color: rgba(255, 255, 255, 0.5);
}

.about-careers__content .section-title {
  color: #ffffff;
  text-align: left;
  margin-bottom: 0;
}

.about-careers__content .section-subtitle {
  color: rgba(255, 255, 255, 0.6);
  text-align: left;
  margin-bottom: 8px;
}

/* Responsive */
@media (max-width: 991px) {
  .about-story__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-story__stats {
    position: static;
  }
  .about-team__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .about-numbers__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .about-values__grid {
    grid-template-columns: 1fr;
  }
  .about-team__grid {
    grid-template-columns: 1fr;
  }
  .about-numbers__grid {
    grid-template-columns: 1fr;
  }
  .about-careers__card {
    padding: 40px 24px;
  }
}


/* ============================================
   PRODUCT PAGE
   ============================================ */

/* Hero */
.product-hero {
  padding: 180px 0 80px;
  text-align: center;
}

.product-hero__inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

.product-hero__title {
  font-family: var(--font-display);
  font-size: 3.6rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--text-primary);
}

@media (min-width: 768px) {
  .product-hero__title { font-size: 4.8rem; }
}

@media (min-width: 1024px) {
  .product-hero__title { font-size: 6rem; }
}

.product-hero__subtitle {
  font-size: 1.125rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 540px;
}

/* Rotating word */
.rotating-word-wrap {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: bottom;
  white-space: nowrap;
}

.rotating-word {
  display: inline-block;
}

/* Sticky Steps */
.sticky-steps {
  min-height: 100dvh;
  position: relative;
  overflow: clip;
}

.sticky-steps__container {
  max-width: 74em;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.sticky-steps__collection {
  min-height: 100dvh;
  display: flex;
  position: relative;
}

.sticky-steps__list {
  grid-column-gap: 30dvh;
  grid-row-gap: 30dvh;
  flex-flow: column;
  flex: 1;
  padding-top: calc(50dvh - 7.5em);
  padding-bottom: calc(50dvh - 7.5em);
  display: flex;
}

.sticky-steps__text {
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  flex-flow: column;
  width: 50%;
  padding-right: 6em;
  display: flex;
}

.sticky-steps__eyebrow {
  opacity: .5;
  text-transform: uppercase;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.sticky-steps__h2 {
  letter-spacing: -0.03em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--text-primary);
}

.sticky-steps__p {
  opacity: .6;
  margin-bottom: 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.sticky-steps__list-features {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sticky-steps__list-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.sticky-steps__list-features svg {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.sticky-steps__media {
  width: 50%;
  height: 100%;
  padding-left: 3em;
  position: absolute;
  top: 0;
  right: 0;
}

.sticky-steps__sticky {
  align-items: center;
  width: 100%;
  min-height: 100dvh;
  display: flex;
  position: sticky;
  top: 0;
}

.sticky-steps__visual {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-2xl);
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--dark-section-bg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.04);
}

.sticky-steps__cover-image {
  object-fit: cover;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (min-width: 992px) {
  [data-sticky-steps-item-status] .sticky-steps__visual {
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    opacity: 0;
    visibility: hidden;
  }

  [data-sticky-steps-item-status="before"] .sticky-steps__visual,
  [data-sticky-steps-item-status="active"] .sticky-steps__visual {
    opacity: 1;
    visibility: visible;
  }

  [data-sticky-steps-item-status] .sticky-steps__text {
    transition: opacity 0.5s ease-in-out;
    opacity: 0.25;
  }

  [data-sticky-steps-item-status="active"] .sticky-steps__text {
    opacity: 1;
  }
}

@media screen and (max-width: 991px) {
  .sticky-steps__list {
    grid-column-gap: 5em;
    grid-row-gap: 5em;
    padding-top: 6em;
    padding-bottom: 6em;
  }

  .sticky-steps__text {
    width: 100%;
    padding-bottom: 2em;
    padding-right: 0;
  }

  .sticky-steps__sticky {
    min-height: auto;
    position: relative;
    top: auto;
  }

  .sticky-steps__media {
    width: 100%;
    height: auto;
    padding-left: 0;
    position: relative;
    top: auto;
    right: auto;
  }
}

@media screen and (max-width: 767px) {
  .sticky-steps__text {
    grid-column-gap: 1em;
    grid-row-gap: 1em;
  }
}

/* Integrations */
.product-integrations {
  padding: 80px 0 var(--section-gap);
}

.product-integrations__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 40px 72px;
  margin-top: 56px;
}

.product-integrations__logo {
  width: 100px;
  height: 24px;
  object-fit: contain;
  opacity: 0.35;
  transition: opacity 0.3s ease;
}

.product-integrations__logo:hover {
  opacity: 0.65;
}

/* Active nav link */
.nav-link.active {
  color: var(--text-primary);
}

/* Product page responsive */
@media screen and (max-width: 768px) {
  .product-hero {
    padding: 140px 0 60px;
  }

  .product-integrations__grid {
    gap: 36px 40px;
  }
}

@media screen and (max-width: 479px) {
  .product-integrations__grid {
    gap: 28px 32px;
  }
}

/* Product Radial Visual */
.product-radial {
  position: relative;
  width: 100%;
  height: 480px;
  margin-top: -100px;
  overflow: visible;
  z-index: 2;
}

.product-radial__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.product-radial__hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  z-index: 3;
}

/* Icon cards - rounded squares like the reference */
.product-radial__card {
  position: absolute;
  z-index: 2;
  animation: radialFloat 6s ease-in-out infinite;
}

.product-radial__card:nth-child(odd) {
  animation-delay: -2s;
}

.product-radial__card:nth-child(3n) {
  animation-delay: -4s;
}

.product-radial__card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
}

.product-radial__card:hover .product-radial__card-icon {
  transform: translateY(-3px);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.1),
    0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Size variants */
.product-radial__card--sm .product-radial__card-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.product-radial__card--md .product-radial__card-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
}

.product-radial__card--lg .product-radial__card-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
}

.product-radial__card--featured .product-radial__card-icon {
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.1),
    0 2px 6px rgba(0, 0, 0, 0.06);
}

@keyframes radialFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Keep transform for featured card centered */
.product-radial__card--featured {
  animation: radialFloatCentered 6s ease-in-out infinite;
}

@keyframes radialFloatCentered {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-8px); }
}

@media screen and (max-width: 768px) {
  .product-radial {
    height: 340px;
    margin-top: -80px;
  }

  .product-radial__card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .product-radial__card--md .product-radial__card-icon {
    width: 46px;
    height: 46px;
  }

  .product-radial__card--lg .product-radial__card-icon {
    width: 50px;
    height: 50px;
  }

  .product-radial__card--sm .product-radial__card-icon {
    width: 34px;
    height: 34px;
  }

  .product-radial__hub {
    width: 44px;
    height: 44px;
  }

  .product-radial__hub svg {
    width: 18px;
    height: 18px;
  }
}

@media screen and (max-width: 479px) {
  .product-radial {
    height: 260px;
    margin-top: -60px;
  }

  .product-radial__card-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }

  .product-radial__card-icon svg {
    width: 14px;
    height: 14px;
  }

  .product-radial__card--sm {
    display: none;
  }
}

/* ---- Dark Section Override ---- */
.is--dark-section {
  background: var(--dark-section-bg);
  color: #f0f0f2;
}

.is--dark-section .section-title,
.is--dark-section .feature-title {
  color: #f0f0f2;
}

.is--dark-section .section-subtitle,
.is--dark-section .feature-desc {
  color: rgba(255, 255, 255, 0.55);
}

.is--dark-section .section-badge {
  color: rgba(255, 255, 255, 0.7);
}

.is--dark-section .product-highlight__text {
  color: #f0f0f2;
}

.is--dark-section .feature-card {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
}

.is--dark-section .feature-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.is--dark-section .feature-card-glow {
  background: radial-gradient(600px circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(255,255,255,0.03), transparent 40%);
}

/* Mockup overrides */
.is--dark-section .dash-mockup {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.is--dark-section .dash-sidebar {
  border-color: rgba(255, 255, 255, 0.06);
}

.is--dark-section .dash-sidebar-dot {
  background: rgba(255, 255, 255, 0.1);
}

.is--dark-section .dash-sidebar-dot.is--active {
  background: rgba(255, 255, 255, 0.3);
}

.is--dark-section .dash-stat-card {
  background: rgba(255, 255, 255, 0.02);
}

.is--dark-section .dash-stat-label {
  color: rgba(255, 255, 255, 0.4);
}

.is--dark-section .dash-stat-value {
  color: rgba(255, 255, 255, 0.9);
}

.is--dark-section .dash-stat-change.is--up {
  color: #4ade80;
}

.is--dark-section .dash-chart-card {
  background: rgba(255, 255, 255, 0.03);
}

.is--dark-section .dash-chart-title {
  color: rgba(255, 255, 255, 0.4);
}

.is--dark-section .dash-bar {
  background: rgba(255, 255, 255, 0.1);
}

.is--dark-section .dash-bar.is--active {
  background: rgba(255, 255, 255, 0.3);
}

/* AI mockup overrides */
.is--dark-section .ai-mockup {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.is--dark-section .ai-msg--user {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
}

.is--dark-section .ai-msg--ai {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.is--dark-section .ai-msg-header {
  color: rgba(255, 255, 255, 0.7);
}

.is--dark-section .ai-breakdown-row {
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.06);
}

.is--dark-section .ai-dot {
  background: rgba(255, 255, 255, 0.2);
}

.is--dark-section .ai-due {
  color: rgba(255, 255, 255, 0.3);
}

/* Feature icons - keep their colors but soften */
.is--dark-section .feature-icon-wrap {
  opacity: 0.85;
}

/* Highlight text coloring for dark */
.is--dark-section [data-highlight-text] {
  color: rgba(255, 255, 255, 0.7);
}

.is--dark-section [data-highlight-text] .is--highlighted {
  color: #f0f0f2;
}

/* Icon colors for dark section */
.is--dark-section .feature-icon-blue,
.is--dark-section .feature-icon-purple,
.is--dark-section .feature-icon-cyan,
.is--dark-section .feature-icon-green,
.is--dark-section .feature-icon-orange,
.is--dark-section .feature-icon-pink {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
}

/* SVG charts in dark section */
.is--dark-section .dash-area-chart line {
  stroke: rgba(255, 255, 255, 0.05);
}

.is--dark-section .dash-area-chart path[fill*="url"] {
  opacity: 0.6;
}

.is--dark-section .dash-area-chart path[fill="none"] {
  stroke: rgba(255, 255, 255, 0.3);
}

.is--dark-section .dash-area-chart circle {
  fill: rgba(255, 255, 255, 0.4);
}

/* ---- Marquee (Scroll Direction) ---- */
.dark-marquee-divider {
  padding: 0 0 9rem 0;
  overflow: hidden;
}

.marquee-advanced {
  width: 100vw;
  position: relative;
  overflow: hidden;
}

.marquee-advanced__scroll {
  will-change: transform;
  width: 100%;
  display: flex;
  position: relative;
}

.marquee-advanced__collection {
  will-change: transform;
  display: flex;
  position: relative;
}

.marquee-advanced__item {
  justify-content: flex-start;
  align-items: center;
  font-size: clamp(3rem, 6vw, 5rem);
  display: flex;
}

.marquee__advanced__p {
  white-space: nowrap;
  margin: 0;
  margin-right: 0.4em;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.35);
}

.marquee__advanced__dot {
  font-size: 1em;
  margin-right: 0.4em;
  color: rgba(255, 255, 255, 0.15);
}

/* ---- Stacking Cards ---- */
.stacking-cards__collection {
  width: 100%;
  position: relative;
  z-index: 21;
}

.stacking-cards__list {
  display: flex;
  flex-direction: column;
}

.stacking-cards__list > [data-stacking-cards-item] {
  border-top-left-radius: 2em;
  border-top-right-radius: 2em;
  position: relative;
  z-index: 1;
  will-change: transform;
}
.stacking-cards__list > [data-stacking-cards-item]:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.stacking-cards__list > [data-stacking-cards-item]:not(:first-child) {
  margin-top: -2em;
}

/* Bottom dome on last dark section */
.features.is--dark-section {
  position: relative;
  overflow: visible;
}

.features.is--dark-section::after {
  content: '';
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  width: 110%;
  height: var(--dome-bottom-height, 250px);
  background: var(--dark-section-bg);
  border-radius: 0 0 50% 50%;
  pointer-events: none;
  will-change: height;
  z-index: 10;
}
/* Highlight Text */
.product-highlight {
  padding: 110px 0;
  position: relative;
  overflow: visible;
  z-index: 2;
}

.product-highlight::before {
  content: '';
  position: absolute;
  bottom: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  width: 110%;
  height: var(--dome-height, 0px);
  background: var(--dark-section-bg);
  border-radius: 50% 50% 0 0;
  pointer-events: none;
  will-change: height;
  z-index: 10;
}

.product-highlight__text {
  font-family: var(--font-display);
  font-size: 3em;
  font-weight: 400;
  line-height: 1.05;
  color: var(--text-primary);
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* How It Works Steps */
.product-how-it-works {
  padding: var(--section-gap) 0;
  background: transparent;
}

.product-integrations {
  background: transparent;
}

.product-security {
  background: transparent;
}

.product-faq {
  background: transparent;
}

.product-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.product-step {
  flex: 1;
  text-align: left;
  padding: 40px 32px;
  border-radius: var(--radius-xl);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: border-color var(--transition-base), transform var(--transition-base), background var(--transition-base);
}

.product-step:hover {
  border-color: rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
  background: rgba(0, 0, 0, 0.03);
}

.product-step__number {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-tertiary);
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.product-step__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.product-step__desc {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.product-step__connector {
  display: none;
}

/* Featured dark card */
.product-step.is--featured {
  background: var(--dark-section-bg);
  border-color: rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

.product-step.is--featured:hover {
  background: #1e1e1e;
  border-color: rgba(255, 255, 255, 0.14);
}

.product-step.is--featured .product-step__number {
  color: rgba(255, 255, 255, 0.25);
}

.product-step.is--featured .product-step__title {
  color: #ffffff;
}

.product-step.is--featured .product-step__desc {
  color: rgba(255, 255, 255, 0.55);
}

/* Unidirectional light rays from top-right */
.product-step.is--featured::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 300%;
  height: 300%;
  background: conic-gradient(
    from 220deg at 100% 0%,
    transparent 0deg,
    rgba(255, 255, 255, 0.08) 8deg,
    transparent 25deg,
    transparent 40deg,
    rgba(255, 255, 255, 0.10) 48deg,
    transparent 65deg,
    transparent 75deg,
    rgba(255, 255, 255, 0.07) 82deg,
    transparent 100deg,
    transparent 360deg
  );
  pointer-events: none;
  z-index: 0;
}

.product-step.is--featured > * {
  position: relative;
  z-index: 1;
}

/* Security */
.product-security {
  padding: 60px 0 var(--section-gap);
}

.product-security.is--dark-section {
  background: var(--dark-section-bg);
  color: #fff;
  position: relative;
  overflow: visible;
  z-index: 10;
  padding: 110px 0;
}

.product-security.is--dark-section::before {
  content: '';
  position: absolute;
  bottom: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  width: 110%;
  height: var(--dome-height, 0px);
  background: var(--dark-section-bg);
  border-radius: 50% 50% 0 0;
  pointer-events: none;
  will-change: height;
  z-index: 10;
}

.product-security.is--dark-section::after {
  content: '';
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  width: 110%;
  height: var(--dome-bottom-height, 250px);
  background: var(--dark-section-bg);
  border-radius: 0 0 50% 50%;
  pointer-events: none;
  will-change: height;
  z-index: 10;
}

.section-header--split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  text-align: left;
}

.section-header--split .section-title {
  flex: 1;
  min-width: 0;
  font-size: clamp(2.4rem, 4.8vw, 3.6rem);
}

.section-header--split .section-subtitle {
  flex: 1;
  min-width: 0;
  max-width: 480px;
  margin-top: 0.3em;
}

.product-security__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 56px;
  align-items: start;
}

.product-security__grid--3col {
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.product-security__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Big square */
.product-security__square {
  aspect-ratio: 1;
  width: 100%;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: border-radius 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease, transform 0.5s ease;
}

.product-security__icon {
  position: absolute;
  bottom: -20%;
  right: -20%;
  width: 65%;
  height: 65%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  opacity: 0.06;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.product-security__icon svg {
  width: 100%;
  height: 100%;
}

.product-security__item h4 {
  font-size: calc(1.25rem + 2px);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

/* Description - hidden by default */
.product-security__desc {
  font-size: calc(0.875rem + 2px);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 16px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.5s ease, margin 0.4s ease;
}

/* Hover: square morphs to circle */
.product-security__item:hover .product-security__square {
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  transform: scale(1.02);
}

.product-security__item:hover .product-security__icon {
  opacity: 0.1;
}

/* Reveal description on hover */
.product-security__item:hover .product-security__desc {
  opacity: 1;
  max-height: 100px;
  margin-top: 20px;
}

/* Siblings: shrink + fade when one is hovered */
.product-security__grid:has(.product-security__item:hover) .product-security__item:not(:hover) {
  opacity: 0.4;
  transform: scale(0.95);
}

.product-security__grid:has(.product-security__item:hover) .product-security__item:not(:hover) .product-security__square {
  transform: scale(0.95);
}

/* Security cards inside dark sections */
.is--dark-section .product-security__square {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
}

.is--dark-section .product-security__square h4 {
  color: #fff;
}

.is--dark-section .product-security__icon {
  color: #fff;
}

.is--dark-section .product-security__desc {
  color: rgba(255, 255, 255, 0.5);
}

.is--dark-section .product-security__item:hover .product-security__square {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

/* FAQ (template site-wide du 7 oct. 2026, partial template-parts/faq.php) :
   titre serif à gauche, questions à droite (700px) en cartes blanches
   rayon 28px / padding 24px / 8px d'écart, bouton pilule 48x32 vert
   (--green-900) avec un + fermé et un - ouvert. La réponse garde la largeur
   de la question : --faq-gap = écart question / bouton (150px sur maquette). */
.product-faq {
  padding: var(--section-gap) 0;
}

.product-faq__layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
}

.product-faq__title {
  flex: 0 1 auto;
  max-width: 400px;
  margin: 0;
  padding-bottom: 18px;
  font-family: 'Instrument Serif', var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 4.5vw, 3.6rem); /* 57.6px au max */
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #1C1D20;
  text-align: left;
}

.product-faq__wrap {
  flex: 0 1 700px;
  min-width: 0;
  max-width: 700px;
}

/* Accordion CSS */
.accordion-css {
  position: relative;
  --faq-gap: 150px;
}

.accordion-css__list {
  flex-flow: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  display: flex;
}

.accordion-css__item {
  list-style: none;
  padding: 24px;
  border-radius: 28px;
  background-color: #ffffff;
}

.accordion-css__item-top {
  cursor: pointer;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
  gap: var(--faq-gap);
}

.accordion-css__item-bottom {
  transition: grid-template-rows 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  grid-template-rows: 0fr;
  display: grid;
  overflow: hidden;
}

[data-accordion-status="active"] .accordion-css__item-bottom {
  grid-template-rows: 1fr;
}

.accordion-css__item-bottom-wrap {
  flex-flow: column;
  height: 100000%;
  display: flex;
  overflow: hidden;
}

.accordion-css__item-bottom-content {
  padding-top: 9px;
  padding-right: calc(48px + var(--faq-gap));
}

.accordion-css__item-h3 {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding-top: 1.5px; /* centre la 1re ligne (29px) sur le bouton (32px) */
  font-family: var(--font);
  font-size: calc(18.4px + 2px);
  font-weight: 600;
  line-height: 29px;
  color: #1C1D20;
}

.accordion-css__item-icon {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 32px;
  border-radius: 500px;
  background-color: var(--green-900);
  color: #ffffff;
  transition: background-color 0.2s ease;
}

.accordion-css__item-top:hover .accordion-css__item-icon {
  background-color: var(--green-800);
}

.accordion-css__item-icon-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.625, 0.05, 0, 1);
}

.accordion-css__item-icon-svg.is--minus {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
}

[data-accordion-status="active"] .accordion-css__item-icon-svg.is--plus {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

[data-accordion-status="active"] .accordion-css__item-icon-svg.is--minus {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.accordion-css__item-p {
  margin: 0;
  font-family: var(--font);
  font-size: calc(19px + 2px);
  font-weight: 400;
  line-height: 1.5; /* 1.25 sur la maquette, aéré le 7 oct. 2026 */
  color: rgba(0, 0, 0, 0.55);
}

.accordion-css__item-p a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 1199px) {
  .accordion-css { --faq-gap: 48px; }
}

@media (max-width: 991px) {
  .product-faq__layout {
    flex-direction: column;
    gap: 32px;
  }
  .product-faq__title { max-width: none; padding-bottom: 0; }
  .product-faq__wrap { flex-basis: auto; width: 100%; max-width: none; }
}

@media (max-width: 767px) {
  .accordion-css { --faq-gap: 16px; }
  .accordion-css__item { padding: 20px; border-radius: 22px; }
  .accordion-css__item-bottom-content { padding-right: 0; }
  .accordion-css__item-h3 { font-size: calc(17px + 2px); line-height: 26px; padding-top: 3px; }
  .accordion-css__item-p { font-size: calc(17px + 2px); }
}

/* Product page responsive additions */
@media screen and (max-width: 768px) {
  .product-stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .product-steps {
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }

  .product-step__connector {
    width: 1px;
    height: 32px;
    margin: 0;
  }

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

@media screen and (max-width: 479px) {
  .product-security__grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================
   BLOG PAGE
   ============================================ */

/* Hero centré (7 oct. 2026) : hauteur auto pour que la section « Dernier
   article » remonte et soit en partie visible au-dessus de la ligne de
   flottaison. overflow visible : le cercle (.hero--home::before) passe
   derrière le cadre sombre au lieu d'être coupé net. */
#blog-hero,
#changelog-hero,
#thanks-hero {
  height: auto;
  overflow: visible;
  overflow-x: clip; /* le cercle ne doit pas élargir la page sur mobile */
}

#blog-hero .hero-content-wrapper,
#changelog-hero .hero-content-wrapper,
#thanks-hero .hero-content-wrapper {
  height: auto;
  padding-top: calc(var(--nav-height) + 120px);
  padding-bottom: 72px;
}

#blog-hero .hero-inner,
#changelog-hero .hero-inner,
#thanks-hero .hero-inner {
  gap: 2rem;
}

/* Dernier article : carte verte du CTA final (--green-900 + logos Axyrium
   aux coins), largeur du contenu. Texte centré à gauche, visuel qui déborde
   à droite (la carte, overflow hidden, le coupe). */
main[data-barba="container"] > section.blog-latest.blog-latest {
  padding-top: 0;
}

.blog-latest {
  position: relative;
  z-index: 1;
}

.blog-latest__card {
  --bl-logo: 440px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 40px;
  padding: 96px 0;
  border-radius: var(--radius-2xl);
  background: var(--green-900);
  color: #fff;
}

/* Page Blog (8 oct. 2026) : même contenu dans le composant .dark-frame
   (.dark-frame__inner > .blog-latest__grid), visuel collé au bord droit
   du cadre */
.blog-latest__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 48px;
}

.blog-latest .dark-frame__inner {
  --dark-frame-pad: 120px;
}

.dark-frame .blog-latest__bezel {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.dark-frame .blog-latest__kicker {
  color: rgba(248, 248, 248, 0.55);
}

.dark-frame .blog-latest__excerpt {
  color: rgba(248, 248, 248, 0.55);
}

.dark-frame .blog-latest__meta {
  color: rgba(248, 248, 248, 0.4);
}

.blog-latest__card::before,
.blog-latest__card::after {
  content: '';
  position: absolute;
  width: var(--bl-logo);
  height: var(--bl-logo);
  background: url('assets/img/logo/axyrium-icon-white.svg') center / contain no-repeat;
  opacity: 0.05;
  z-index: -1;
  pointer-events: none;
}

.blog-latest__card::before {
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
}

.blog-latest__card::after {
  right: 0;
  bottom: 0;
  transform: translate(50%, 50%);
}

.blog-latest__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 clamp(24px, 4vw, 56px);
}

.blog-latest__kicker {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 24px;
}

.blog-latest__title {
  font-family: 'Instrument Serif', var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 3.6vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
  max-width: 520px;
  margin: 0 auto;
}

.blog-latest__excerpt {
  font-family: var(--font);
  font-size: 18px;
  line-height: 27px;
  color: rgba(255, 255, 255, 0.65);
  max-width: 440px;
  margin: 24px auto 0;
}

.blog-latest__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  margin-top: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

.blog-latest__meta span + span::before {
  content: '·';
  margin-right: 10px;
}

.blog-latest__btn {
  margin-top: 36px;
}

.blog-latest__visual {
  margin-right: -2px; /* colle au bord droit de la carte */
}

.blog-latest__bezel {
  padding: 10px 0 10px 10px; /* l'image touche le bord droit de la carte */
  border-radius: 24px 0 0 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 0;
}

.blog-latest__bezel img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 16px 0 0 16px;
}

@media (max-width: 991px) {
  .blog-latest .dark-frame__inner { --dark-frame-pad: 80px; }
  .blog-latest__grid { grid-template-columns: 1fr; gap: 56px; }
  .blog-latest__card { grid-template-columns: 1fr; gap: 48px; padding: 72px 0; }
  .blog-latest__visual { margin-left: 24px; }
}

@media (max-width: 767px) {
  #blog-hero .hero-content-wrapper,
  #changelog-hero .hero-content-wrapper,
  #thanks-hero .hero-content-wrapper {
    padding-top: calc(var(--nav-height) + 64px);
    padding-bottom: 48px;
  }
  .blog-latest__card { --bl-logo: 260px; padding: 56px 0; gap: 40px; }
  .blog-latest .dark-frame__inner { --dark-frame-pad: 56px; }
  .blog-latest__grid { gap: 40px; }
  .blog-latest__excerpt { font-size: 17px; line-height: 26px; }
  .blog-latest__visual { margin-left: 16px; }
  .blog-latest__bezel { padding: 6px 0 6px 6px; border-radius: 16px 0 0 16px; }
  .blog-latest__bezel img { border-radius: 11px 0 0 11px; }
}

/* Newsletter */
.blog-newsletter {
  display: flex;
  align-items: center;
  width: 70%;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 100px;
  padding: 5px 5px 5px 20px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.blog-newsletter:focus-within {
  border-color: rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

.blog-newsletter__input {
  flex: 1;
  padding: 8px 0;
  border: none;
  background: transparent;
  font-size: 0.9rem;
  font-family: inherit;
  color: #1c1d20;
  outline: none;
  min-width: 0;
}

.blog-newsletter__input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

.blog-newsletter__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 100px;
  border: none;
  background: var(--green-900);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.blog-newsletter__btn:hover {
  background: var(--green-700);
  transform: translateY(-1px);
}

/* Featured Post (standalone) */
.blog-featured {
  padding: 0 0 var(--section-gap);
}

.blog-featured__card {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  background: var(--bg-secondary, #f8f8f8);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.blog-featured__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.blog-featured__image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.blog-featured__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.blog-featured__card:hover .blog-featured__image img {
  transform: scale(1.04);
}

.blog-featured__content {
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.blog-featured__title {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.blog-featured__excerpt {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.5);
}

/* Filter Buttons */
.filter-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.filter-btn {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.25em;
  padding: 0 1.75em;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: transparent;
  font-size: calc(0.9375rem + 2px);
  font-weight: 500;
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  font-family: inherit;
  overflow: hidden;
}

.filter-btn__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: transparent;
  transition: background-color 0.5s cubic-bezier(0.625, 0.05, 0, 1);
}

.filter-btn__circle-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}

.filter-btn__circle {
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.9);
  border-radius: 50%;
  width: 100%;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: transform 0.7s cubic-bezier(0.625, 0.05, 0, 1),
              background-color 0.4s cubic-bezier(0.625, 0.05, 0, 1);
  transform: translate(-50%, -50%) scale(0) rotate(0.001deg);
}

.filter-btn__circle-sizer {
  padding-top: 100%;
  display: block;
}

.filter-btn__text {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  color: currentColor;
  transition: color 0.7s cubic-bezier(0.625, 0.05, 0, 1);
}

/* Hover: expand circle */
.filter-btn:hover .filter-btn__circle {
  transform: translate(-50%, -50%) scale(1) rotate(0.001deg);
}

.filter-btn:hover {
  border-color: rgba(0, 0, 0, 0.15);
  color: #fff;
}

/* Active state: solid dark bg, white text */
.filter-btn[data-filter-status="active"] {
  border-color: rgba(0, 0, 0, 0.9);
  color: #fff;
}

.filter-btn[data-filter-status="active"] .filter-btn__bg {
  background-color: rgba(0, 0, 0, 0.9);
}

.filter-btn[data-filter-status="active"] .filter-btn__circle {
  background-color: rgba(212, 212, 212, 0.15);
}

.filter-btn[data-filter-status="active"]:hover .filter-btn__text {
  color: #fff;
}

/* Dark mode */
[data-theme="dark"] .filter-btn {
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .filter-btn__circle {
  background-color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .filter-btn:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: #1c1d20;
}

[data-theme="dark"] .filter-btn[data-filter-status="active"] {
  border-color: rgba(255, 255, 255, 0.9);
  color: #1c1d20;
}

[data-theme="dark"] .filter-btn[data-filter-status="active"] .filter-btn__bg {
  background-color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .filter-btn[data-filter-status="active"] .filter-btn__circle {
  background-color: rgba(0, 0, 0, 0.1);
}

/* Filter List */
.filter-list {
  flex-flow: wrap;
  width: 100%;
  display: flex;
}

.filter-list__item {
  padding: 0;
}

.filter-list__item[data-filter-status="active"] {
  transition: opacity 0.6s cubic-bezier(0.625, 0.05, 0, 1), transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  transform: scale(1) rotate(0.001deg);
  opacity: 1;
  visibility: visible;
  position: relative;
}

.filter-list__item[data-filter-status="transition-out"] {
  transition: opacity 0.45s cubic-bezier(0.625, 0.05, 0, 1), transform 0.45s cubic-bezier(0.625, 0.05, 0, 1);
  transform: scale(0.95) rotate(0.001deg);
  opacity: 0;
  visibility: visible;
}

.filter-list__item[data-filter-status="not-active"] {
  transform: scale(0.95) rotate(0.001deg);
  opacity: 0;
  visibility: hidden;
  position: absolute;
}

.blog-grid-section {
  padding: 0 0 var(--section-gap);
}

/* Cursor Marquee */
.cursor-marquee {
  z-index: 100;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}

.cursor-marquee__card {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  overflow: hidden;
  border-radius: 50em;
  transition: all 0.4s cubic-bezier(.75, 0, .25, 1);
  transform: translateY(0%) rotate(0.001deg);
  clip-path: inset(calc(50% - 0.25em) round 50em);
  will-change: clip-path;
  opacity: 0;
}

[data-cursor-marquee-status="active"] .cursor-marquee__card {
  clip-path: inset(0 round 50em);
  transform: translateY(-25%) rotate(0.001deg);
  opacity: 1;
}

[data-cursor-marquee-status="not-active"] .cursor-marquee__card {
  clip-path: inset(0 round 50em);
  transform: translateY(-25%) rotate(0.001deg);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.625, 0.05, 0, 1);
}

@keyframes translateXCursor {
  to { transform: translateX(-100%); }
}

.cursor-marquee__text-span {
  white-space: nowrap;
  transform-origin: 0;
  padding: .5em .75em;
  font-size: calc(1.25rem + 2px);
  font-weight: 500;
  line-height: 1;
  display: block;
  position: relative;
  animation: translateXCursor 10s linear infinite paused;
  transition: opacity 0.15s ease-in-out 0.25s;
  opacity: 0;
}

[data-cursor-marquee-status="active"] .cursor-marquee__text-span {
  transition: opacity 0.15s ease-in-out 0s;
  opacity: 1;
}

[data-cursor-marquee-status="not-active"] .cursor-marquee__text-span {
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.625, 0.05, 0, 1);
}

.cursor-marquee__text-span.is--duplicate {
  position: absolute;
  left: 100%;
}

/* Dark mode cursor */
[data-theme="dark"] .cursor-marquee__card {
  background-color: rgba(20, 20, 25, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

/* Dark variant (used on feature cards) */
.cursor-marquee.is--dark .cursor-marquee__card {
  background: var(--dark-section-bg) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  color: #fff;
}

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

.blog-grid .filter-list__item {
  transition: opacity 0.5s cubic-bezier(0.625, 0.05, 0, 1),
              transform 0.5s cubic-bezier(0.625, 0.05, 0, 1);
}

.blog-grid:has(.filter-list__item:hover) .filter-list__item:not(:hover) {
  opacity: 0.4;
  transform: scale(0.90);
}

.blog-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

.blog-card:hover {
  transform: none;
  box-shadow: none;
}

.blog-card {
  position: relative;
}

.blog-card__image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 16px;
  transition: border-radius 0.7s cubic-bezier(0.625, 0.05, 0, 1);
}

/* New Badge (auto-expires after 7 days) */
.new-badge__wrapper {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}

.new-badge {
  background-color: #fff;
  border-radius: 6px;
  padding: 8px 10px;
  display: none;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease, border-radius 0.7s cubic-bezier(0.625, 0.05, 0, 1);
}

.blog-card:hover .new-badge {
  opacity: 0;
}

.new-badge__span {
  color: #3a7a5c;
  font-size: calc(0.7rem + 2px);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
}

/* Inline variant (next to titles) */
.new-badge--inline {
  vertical-align: middle;
  margin-left: 12px;
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 0.65rem;
  position: relative;
  top: -2px;
}

/* Article title variant (big starburst badge) */
.article-hero__title-row {
  max-width: 720px;
}

.article-hero__author {
  font-size: 0.9rem;
  color: var(--text-tertiary);
  margin: 4px 0 0;
}

.article-hero__author-position {
  color: var(--text-tertiary);
}

.article-hero__badge-area {
  position: absolute;
  right: 40px;
  bottom: -120px;
  z-index: 10;
  width: 150px;
  height: 150px;
  animation: badgeFloat 3s ease-in-out infinite;
}

@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.new-badge--article {
  width: 100%;
  height: 100%;
  display: none;
  background: none;
  border-radius: 0;
  padding: 0;
  cursor: default;
}

.new-badge--article.is--visible {
  display: block !important;
}

.new-badge--article__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(15deg);
}

.article-hero__badge-area--read {
  animation: none;
  right: auto;
  left: 76%;
  bottom: -107px;
}

/* Tablette / mobile : à 76 % le badge (192px) sortait de l'écran et créait
   un défilement horizontal ; on l'ancre à droite (9 oct. 2026) */
@media (max-width: 991px) {
  .article-hero__badge-area--read {
    left: auto;
    right: 24px;
  }
}

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

.read-badge {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-20deg);
  cursor: pointer;
}

.read-badge__glass-base {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 0.5px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1.5px 3px rgba(255, 255, 255, 0.85),
    inset 0 -1px 2px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.07);
}

.read-badge__glass-outer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.12) 28%,
    transparent 55%
  );
  pointer-events: none;
}

.read-badge__glass-border {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    150deg,
    transparent 50%,
    rgba(0, 0, 0, 0.05) 100%
  );
  pointer-events: none;
}

.read-badge__glass-inner {
  display: none;
}

.read-badge__ring-border {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1.5px solid var(--green-900);
}

.read-badge__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: read-badge-spin 12s linear infinite;
}

.read-badge__text {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--green-900);
  font-family: inherit;
}

.read-badge__btn {
  position: absolute;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--green-900);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 2px 10px rgba(43, 60, 41, 0.35);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(20deg);
}

.blog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-card:hover .blog-card__image {
  border-radius: 50%;
}

.blog-card:hover .blog-card__image img {
  transform: scale(1.04);
}

.blog-card__body {
  padding: 20px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.blog-card__title {
  font-size: calc(1.1rem + 2px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: calc(0.8rem + 2px);
  color: var(--text-tertiary);
}

.blog-card__category {
  font-size: inherit;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.blog-card__date,
.blog-card__read {
  position: relative;
  padding-left: 16px;
}

.blog-card__date::before,
.blog-card__read::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-quaternary);
}

/* ============================================
   SINGLE ARTICLE
   ============================================ */

/* Hero */
.article-hero {
  padding: 160px 0 48px;
}

.article-hero__inner {
  position: relative;
}

.article-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: calc(0.85rem + 2px);
  font-weight: 500;
  color: var(--text-tertiary);
  text-decoration: none;
  margin-bottom: 32px;
  transition: color 0.2s ease;
}

.article-hero__back:hover {
  color: var(--text-primary);
}

.article-hero__back-text {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.article-hero__back-label {
  display: block;
  transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.article-hero__back-label--dup {
  position: absolute;
  top: 100%;
  left: 0;
}

.article-hero__back:hover .article-hero__back-label {
  transform: translateY(-100%);
}

.article-hero__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(0.8rem + 2px);
  color: var(--text-tertiary);
  margin-bottom: 20px;
}

.article-hero__category {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.article-hero__dot {
  opacity: 0.4;
}

.article-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.4vw, 3.84rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 20px;
}

.article-hero__excerpt {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  max-width: 600px;
}

/* Featured Image */
.article-featured-image {
  padding: 0 0 64px;
}

.article-featured-image__img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

/* Article Body Typography */
.article-body {
  padding-bottom: 64px;
}

.article-body__content {
  max-width: 720px;
  font-size: calc(1.05rem + 2px);
  line-height: 1.8;
  color: var(--text-secondary);
}

.article-body__content p {
  margin: 0 0 1.5em;
}

.article-body__content h2 {
  font-size: calc(1.6rem + 2px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 2.5em 0 0.8em;
}

.article-body__content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 2em 0 0.6em;
}

.article-body__content h4 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 1.5em 0 0.5em;
}

.article-body__content ul,
.article-body__content ol {
  margin: 0 0 1.5em;
  padding-left: 1.5em;
}

.article-body__content ul {
  list-style-type: disc;
}

.article-body__content ol {
  list-style-type: decimal;
}

.article-body__content li {
  margin-bottom: 0.5em;
  display: list-item;
}

.article-body__content li strong {
  color: var(--text-primary);
}

.article-body__content blockquote {
  margin: 2em 0;
  padding: 24px 28px;
  border-left: 3px solid var(--text-primary);
  background: rgba(0, 0, 0, 0.02);
  border-radius: 0 12px 12px 0;
  font-style: italic;
  color: var(--text-secondary);
}

.article-body__content blockquote p:last-child {
  margin-bottom: 0;
}

.article-body__content a {
  color: var(--text-primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s;
}

.article-body__content a:hover {
  opacity: 0.6;
}

.article-body__content code {
  font-family: var(--font);
  font-size: 0.9em;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
}

.article-body__content pre {
  background: #1a1a2e;
  border-radius: 12px;
  padding: 24px;
  overflow-x: auto;
  margin: 1.5em 0;
}

.article-body__content pre code {
  background: none;
  padding: 0;
  color: #e2e8f0;
  font-size: 0.85rem;
  line-height: 1.7;
}

.article-body__content img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1.5em 0;
}

.article-body__content hr {
  border: none;
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 3em 0;
}

/* Article Footer (Tags + Share) */
.article-footer-section {
  padding-bottom: 80px;
}

.article-footer__inner {
  max-width: 720px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 32px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.article-footer__tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.article-footer__tag {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.04);
  padding: 6px 12px;
  border-radius: 6px;
}

.article-footer__share {
  display: flex;
  align-items: center;
  gap: 12px;
}

.article-footer__share-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-tertiary);
}

.article-footer__share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: none;
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.article-footer__share-btn:hover {
  border-color: rgba(0, 0, 0, 0.2);
  color: var(--text-primary);
}

/* Related Posts */
.article-related {
  padding: 80px 0 120px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.article-related__header {
  margin-bottom: 40px;
}

.article-related__title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.article-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* Article Responsive */
@media (max-width: 768px) {
  .article-hero {
    padding: 120px 0 32px;
  }

  .article-hero__title {
    font-size: 2.1rem;
  }

  .article-featured-image__img {
    border-radius: 12px;
    aspect-ratio: 16 / 9;
  }

  .article-body__content {
    font-size: calc(1rem + 2px);
  }

  .article-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .article-related__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ── Job Single Meta (hero) ── */
.job-single__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.job-single__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: calc(0.875rem + 2px);
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface);
  line-height: 1;
}

.job-single__meta-item svg {
  flex-shrink: 0;
  opacity: 0.6;
}

.job-single__divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 48px 0 0;
}

/* ── Job Single ── */
.job-single {
  padding: 18px 0 var(--section-gap);
}

.job-single__inner {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.job-single__lead,
.job-single__heading,
.job-single__block p,
.job-single__list li {
  font-size: calc(1.125rem + 2px);
  line-height: 1.75;
  color: var(--text-secondary);
}

.job-single__heading {
  font-size: calc(1.25rem + 2px);
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.job-single__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.job-single__list li {
  padding-left: 20px;
  position: relative;
}

.job-single__list li::before {
  content: '-';
  position: absolute;
  left: 0;
  color: var(--text-tertiary);
}

.job-single__apply {
  padding-top: 8px;
}

/* CF7 form inside job single */
.job-single__form .wpcf7 {
  margin-top: 28px;
}

.job-single__form .wpcf7-response-output {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.875rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.job-single__form .wpcf7-not-valid-tip {
  font-size: 0.8125rem;
  color: #e53e3e;
  margin-top: 4px;
}

.job-single__form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.job-single__form .wpcf7-form textarea::placeholder {
  color: rgba(0, 0, 0, 0.25);
}

.job-single__form textarea.contact-form__input,
.job-single__form .wpcf7-form textarea {
  resize: vertical;
  min-height: 140px;
  width: 100%;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.1);
  background: #fff;
  font-size: calc(0.92rem + 2px);
  font-family: inherit;
  color: #1c1d20;
  outline: none;
  box-sizing: border-box;
}

.file-upload-ui__wrap {
  border: 1px dashed rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.02);
  transition: border-color 0.2s, background 0.2s;
  cursor: pointer;
}

.file-upload-ui__wrap:hover {
  border-color: rgba(0, 0, 0, 0.35);
  background: rgba(0, 0, 0, 0.04);
}

.file-upload-ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 28px 20px;
  text-align: center;
  pointer-events: none;
  color: rgba(0, 0, 0, 0.4);
}

.file-upload-ui svg {
  margin-bottom: 4px;
  opacity: 0.5;
}

.file-upload-ui__text {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
}

.file-upload-ui__hint {
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.35);
}

@media (max-width: 900px) {
  .blog-featured__card {
    grid-template-columns: 1fr;
  }
  .blog-featured__content {
    padding: 32px;
  }
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 600px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
  .blog-featured__title {
    font-size: 1.62rem;
  }
}


/* ============================================
   CURVED REVEAL SECTION (Unfold24-style)
   ============================================ */

/* --- Dome v1 pseudo-elements disabled - replaced by shape-round injection --- */
.home-quebec::before, .home-quebec::after,
.product-highlight::before,
.how-it-works.is--dark-section::after,
.product-security.is--dark-section::before, .product-security.is--dark-section::after,
.about-timeline::before, .about-timeline::after,
.docs-categories::before, .docs-categories::after {
  display: none !important;
}

/* --- Reusable shape-round system --- */
.shape-round {
  --height-percentage: 10;
  position: absolute;
  width: 100%;
  padding-top: calc(var(--height-percentage) * 1%);
  pointer-events: none;
  overflow: hidden;
  /* above .hero::after (z:10) so the white bottom fade never overlays the dome */
  z-index: 11;
}

.shape-round::after {
  --width-round: 266vw;
  content: '';
  width: var(--width-round);
  height: var(--width-round);
  display: block;
  background-color: #f5f5f7;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  border-radius: 50%;
}

.shape-round.dark::after {
  background-color: var(--dark-section-bg);
}

.shape-round.light::after {
  background-color: #f5f5f7;
}

.shape-round.bottom {
  transform-origin: center bottom;
  bottom: -1px;
}

.shape-round.bottom::after {
  top: 0;
}

.shape-round.top {
  transform-origin: center top;
  top: -1px;
}

.shape-round.top::after {
  bottom: 0;
}

.shape-round.grow {
  transform: scaleY(0);
}

.shape-round.shrink {
  transform: scaleY(1);
}

/* Dome that grows UPWARD from top of section - not used with clip-path approach */
[data-curve-up] {
  display: none;
}
[data-curve-up]::after {
  display: none;
}

/* --- Curve reveal section --- */
.curve-reveal-wrapper {
  position: relative;
  z-index: 2;
}

.curve-reveal {
  position: relative;
  background: #272727;
}

.curve-reveal__content {
  position: relative;
  padding: 100px 0 120px;
}

.curve-reveal__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 64px;
}

.curve-reveal__stat {
  text-align: center;
  padding: 40px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.curve-reveal__stat-value {
  display: block;
  font-size: 2.8rem;
  font-weight: 700;
  color: #f0f0f3;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
}

.curve-reveal__stat-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.01em;
}

@media (max-width: 767px) {
  .curve-reveal__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .curve-reveal__stat-value {
    font-size: 2rem;
  }

  .curve-reveal__content {
    padding: 60px 0 80px;
  }
}


/* ============================================
   WAITLIST PAGE
   ============================================ */

.waitlist-page {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 80px;
}

.waitlist-container {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
}

.waitlist-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.waitlist-title {
  font-family: var(--font-display);
  font-size: clamp(2.88rem, 6vw, 4.32rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.waitlist-subtitle {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  max-width: 460px;
}

.waitlist-form-wrap {
  width: 100%;
}

.waitlist-form {
  width: 100%;
}

.waitlist-form__fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.waitlist-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.waitlist-submit-btn {
  width: 100%;
  margin-top: 4px;
}

.waitlist-fine-print {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  margin: 0;
  text-align: center;
}

.waitlist-form__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 24px;
  text-align: center;
}

.waitlist-success__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
}

.waitlist-success__title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.waitlist-success__text {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: 0;
  max-width: 320px;
}

.waitlist-perks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  padding: 20px 24px;
  border-radius: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
}

.waitlist-perk {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.waitlist-perk svg {
  flex-shrink: 0;
  color: var(--text-primary);
}

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

/* ============================================
   SIGNUP PAGE
   ============================================ */
.signup-body {
  overflow: hidden;
}

.signup-body .mega-nav,
.signup-body footer,
.signup-body .global-cta {
  display: none !important;
}

.signup-page {
  height: 100vh;
  display: flex;
  padding: 0;
  background: transparent;
}

.signup-card {
  display: grid;
  grid-template-columns: 3fr 2fr;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #fff;
}

/* Left: Visual panel with gradient */
.signup-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 36px;
  margin: 12px;
  border-radius: 20px;
  background: url('assets/img/Cover-login.jpg') center center / cover no-repeat;
  overflow: hidden;
}

.signup-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%);
  pointer-events: none;
}

.signup-visual__logo {
  position: relative;
  z-index: 1;
}

.signup-visual__text {
  position: relative;
  z-index: 1;
}

.signup-visual__eyebrow {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
}

.signup-visual__heading {
  font-family: var(--font-display);
  font-size: 2.64rem;
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
  letter-spacing: -0.01em;
  max-width: 420px;
}

/* Right: Form side */
.signup-form-side {
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.signup-form-side__inner {
  max-width: 360px;
  margin: 0 auto;
  width: 100%;
}

.signup-form-header {
  margin-bottom: 28px;
}

.signup-logo-img {
  height: 32px;
  width: auto;
}

.signup-form-logo {
  margin-bottom: 20px;
}

.signup-form-title {
  font-size: 2.4rem;
  font-weight: 400;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.signup-form-subtitle {
  font-size: var(--section-subtitle-size, 1.1rem);
  color: var(--text-secondary);
  line-height: 1.5;
  font-family: var(--section-subtitle-font, var(--font));
}

.signup-form__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.signup-submit-btn {
  width: 100%;
  margin-top: 2px;
}

.signup-divider {
  display: flex;
  align-items: center;
  gap: 14px;
}

.signup-divider::before,
.signup-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
}

.signup-divider span {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  font-weight: 500;
  white-space: nowrap;
}

/* Social login row */
.signup-social-row {
  display: flex;
  gap: 10px;
}

.signup-social-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.signup-social-btn:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.2);
}

/* Login link */
.signup-error {
  font-size: 0.82rem;
  color: #ef4444;
  margin-bottom: 4px;
}

.signup-login {
  margin-top: 20px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-align: center;
}

.signup-login a {
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: none;
}

.signup-login a:hover {
  text-decoration: underline;
}

/* Login-specific options row */
.login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.login-remember input[type="checkbox"] {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  accent-color: #1c1d20;
  cursor: pointer;
}

.login-forgot {
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.login-forgot:hover {
  color: var(--text-primary);
}

/* Success state */
.signup-form__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  padding: 60px 20px;
  color: var(--text-primary);
}

.signup-form__success svg {
  stroke: #4ade80;
}

.signup-form__success h3 {
  font-size: 1.3rem;
  font-weight: 600;
}

.signup-form__success p {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Dark mode */
[data-theme="dark"] .signup-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .signup-social-btn {
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .signup-social-btn:hover {
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .signup-divider::before,
[data-theme="dark"] .signup-divider::after {
  background: rgba(255, 255, 255, 0.08);
}

/* Responsive */
@media (max-width: 767px) {
  .signup-page {
    padding: 16px;
    height: 100vh;
  }

  .signup-card {
    grid-template-columns: 1fr;
    height: auto;
    max-height: 100vh;
    overflow-y: auto;
  }

  .signup-visual {
    padding: 28px;
    min-height: 180px;
  }

  .signup-form-side {
    padding: 28px 24px;
  }
}


/* ============================================
   CONTACT PAGE
   ============================================ */
.contact-section {
  padding: 0 0 var(--section-gap);
}

.contact-layout {
  display: grid;
  grid-template-columns: 2fr 0.6fr;
  gap: 80px;
  align-items: start;
}

/* Contact Form */
.contact-form__fields {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.contact-form__group {
  display: flex;
  flex-direction: column;
  gap: 0px;
  margin-top: 10px;
}

.contact-form__label {
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: 0.01em;
}

.contact-form__input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 0;
  border-radius: 0;
  border: none;
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.15);
  background: transparent;
  font-size: 1rem;
  font-family: inherit;
  color: #1c1d20;
  outline: none;
  transition: border-color 0.25s ease;
}

.contact-form__input::placeholder {
  color: rgba(0, 0, 0, 0.25);
}

.contact-form__input:focus {
  border-bottom-color: #1c1d20;
}

.contact-form__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 24px;
  cursor: pointer;
}

.contact-form__textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 12px;
  border: none;
  background: var(--green-900);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease;
  align-self: flex-start;
}

.contact-form__submit:hover {
  background: var(--green-700);
  transform: translateY(-1px);
}

.signup-page .contact-form__submit {
  background: var(--green-900);
  transition: background 0.25s ease, transform 0.2s ease;
}

.signup-page .contact-form__submit:hover {
  background: var(--green-700);
}

/* Success State */
.contact-form__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  padding: 80px 40px;
  color: rgba(0, 0, 0, 0.6);
}

.contact-form__success svg {
  color: #22c55e;
}

.contact-form__success h3 {
  font-size: calc(1.5rem + 2px);
  font-weight: 600;
  color: #1c1d20;
}

.contact-form__success p {
  font-size: calc(1rem + 2px);
  color: rgba(0, 0, 0, 0.5);
}

/* Contact Info Cards */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-info__card {
  padding: 28px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: border-color 0.3s ease;
}

.contact-info__card:hover {
}

.contact-info__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: rgba(0, 0, 0, 0.5);
}

.contact-info__title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.contact-info__text {
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.45);
  line-height: 1.5;
  margin-bottom: 10px;
}

.contact-info__link {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1c1d20;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.contact-info__link:hover {
  opacity: 0.7;
}

/* Contact Details Panel */
.contact-details-panel {
  background: transparent;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-self: stretch;
  text-align: left;
}

.contact-details__group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-details__label {
  font-size: calc(0.7rem + 2px);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.35);
  margin-bottom: 4px;
}

.contact-details__item {
  font-size: calc(1.05rem + 2px);
  color: rgba(0, 0, 0, 0.75);
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.2s ease;
}

a.contact-details__item:hover {
  color: #1c1d20;
}

/* Contact FAQ */
.contact-faq {
  padding: 0 0 var(--section-gap);
}

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

.faq-item {
  padding: 32px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.faq-item__question {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.4;
}

.faq-item__answer {
  font-size: 0.88rem;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.65;
}

/* Contact Responsive */
@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .faq-grid {
    grid-template-columns: 1fr;
  }
}

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


/* ============================================
   AI TASK CREATION PAGE
   ============================================ */

/* Hero Image Showcase */
.hero-image-showcase {
  padding: 0 0 var(--section-gap);
}

.hero-image-showcase img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.08);
}

/* How It Works Steps */
.ai-how-it-works {
  padding: var(--section-gap) 0;
}

.ai-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 64px;
}

.ai-step {
  flex: 1;
  padding: 0 32px;
  text-align: center;
}

.ai-step__number {
  font-size: calc(3rem + 2px);
  font-weight: 700;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, rgba(0,0,0,0.12), rgba(0,0,0,0.04));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
  line-height: 1;
}

.ai-step__title {
  font-size: calc(1.1rem + 2px);
  font-weight: 600;
  margin-bottom: 10px;
}

.ai-step__text {
  font-size: calc(0.88rem + 2px);
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.45);
}

.ai-step__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
  color: rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

/* Showcase */
.ai-showcase {
  padding: 0 0 var(--section-gap);
}

.ai-showcase__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.ai-showcase__image {
  border-radius: 20px;
  overflow: hidden;
}

.ai-showcase__image img {
  width: 100%;
  height: auto;
  display: block;
}

.ai-showcase__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ai-showcase__text {
  font-size: calc(1rem + 2px);
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.5);
}

.ai-showcase__list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ai-showcase__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: calc(0.92rem + 2px);
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
}

.ai-showcase__list li svg {
  color: #22c55e;
  flex-shrink: 0;
}

/* Capabilities Grid */
.ai-capabilities {
  padding: 0 0 var(--section-gap);
}

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

.ai-capability-card {
  padding: 32px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.ai-capability-card:hover {
}

.ai-capability-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: rgba(0, 0, 0, 0.5);
}

.ai-capability-card__title {
  font-size: calc(1.05rem + 2px);
  font-weight: 600;
  margin-bottom: 8px;
}

.ai-capability-card__desc {
  font-size: calc(0.88rem + 2px);
  color: rgba(0, 0, 0, 0.45);
  line-height: 1.65;
}

/* AI Page Responsive */
@media (max-width: 900px) {
  .ai-steps {
    flex-direction: column;
    gap: 32px;
  }
  .ai-step {
    text-align: left;
    padding: 0;
  }
  .ai-step__divider {
    display: none;
  }
  .ai-showcase__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ai-capabilities__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .ai-capabilities__grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================
   CHANGELOG PAGE
   ============================================ */
.changelog-section {
  padding: 0 0 var(--section-gap);
}

.changelog-entry {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  padding: 48px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.changelog-entry:first-child {
  padding-top: 0;
}

.changelog-entry:last-child {
  border-bottom: none;
}

/* Aside (date + version) */
.changelog-entry__aside {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: 120px;
  align-self: start;
}

.changelog-entry__date {
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
}

.changelog-entry__version {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.3);
  font-family: var(--font);
  letter-spacing: 0.02em;
}

/* Content */
.changelog-entry__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.changelog-entry__title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.changelog-entry__desc {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.5);
  max-width: 600px;
}

/* Tags */
.changelog-entry__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.changelog-tag {
  padding: 4px 12px;
  border-radius: 100px;
  font-size: calc(0.72rem + 2px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.changelog-tag--new {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.changelog-tag--improved {
  background: rgba(76, 113, 69, 0.1);
  color: var(--green-600);
}

.changelog-tag--fix {
  background: rgba(249, 115, 22, 0.1);
  color: #ea580c;
}

.changelog-tag--feature {
  background: rgba(139, 92, 246, 0.1);
  color: #7c3aed;
}

.changelog-tag--ai {
  background: rgba(236, 72, 153, 0.1);
  color: #db2777;
}

.changelog-tag--design {
  background: rgba(14, 165, 233, 0.1);
  color: #0284c7;
}

/* Change list */
.changelog-entry__list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.changelog-entry__list li {
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1.5;
  padding-left: 20px;
  position: relative;
}

.changelog-entry__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
}

/* Changelog Responsive */
@media (max-width: 768px) {
  .changelog-entry {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .changelog-entry__aside {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
}


/* ============================================
   CHANGELOG PAGE v2 - liste image-curseur (réutilise .preview-* de la
   section releases de l'accueil). La une est la carte verte .blog-latest
   depuis le 7 oct. 2026 (ancienne .changelog-featured supprimée).
   ============================================ */
/* Liste : la colonne Type reçoit des badges (pas du texte), largeur auto */
.preview-container--changelog {
  margin-top: 0;
}

.preview-item__tags {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.preview-item__tags .changelog-tag {
  white-space: nowrap;
}

@media screen and (min-width: 992px) {
  .preview-container--changelog .preview-item__col.is--medium {
    width: auto;
    min-width: 10em;
  }
}

@media screen and (max-width: 991px) {
  .preview-container--changelog .preview-item__col.is--medium {
    flex: 1;
    max-width: none;
  }
  /* Date sur une seule ligne (la colonne 20 % de l'accueil la coupait) */
  .preview-container--changelog .preview-item__col.is--small {
    flex: 0 0 auto;
    max-width: none;
    white-space: nowrap;
  }
  .preview-item__tags {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}


/* ============================================
   STATUS PAGE
   ============================================ */

/* Status Banner - toute la palette suit l'état (ok / degraded / down) */
.status-banner {
  --status-rgb: 34, 197, 94;
  --status-text: #16a34a;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border-radius: 100px;
  background: rgba(var(--status-rgb), 0.08);
  border: 1px solid rgba(var(--status-rgb), 0.2);
}

.status-banner--degraded {
  --status-rgb: 245, 158, 11;
  --status-text: #b45309;
}

.status-banner--down {
  --status-rgb: 239, 68, 68;
  --status-text: #dc2626;
}

.status-banner__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(var(--status-rgb));
  animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--status-rgb, 34, 197, 94), 0.4); }
  50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(var(--status-rgb, 34, 197, 94), 0); }
}

.status-banner__text {
  font-size: calc(0.9rem + 2px);
  font-weight: 600;
  color: var(--status-text);
}

/* Status Section */
.status-section {
  padding: 0 0 var(--section-gap);
}

/* Uptime Bar */
.status-uptime {
  margin-bottom: 48px;
}

.status-uptime__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.status-uptime__title {
  font-size: calc(1rem + 2px);
  font-weight: 600;
}

.status-uptime__percent {
  font-size: calc(1.5rem + 2px);
  font-weight: 700;
  color: #16a34a;
  letter-spacing: -0.02em;
}

/* One vertical bar per day, statuspage-style */
.status-uptime__days {
  display: flex;
  align-items: stretch;
  gap: 3px;
  height: 34px;
}

.status-uptime__day {
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: #22c55e;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.status-uptime__day:hover {
  transform: scaleY(1.12);
  filter: brightness(1.1);
}

.status-uptime__day--degraded {
  background: #f59e0b;
}

.status-uptime__day--down {
  background: #ef4444;
}

.status-uptime__legend {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: calc(0.78rem + 2px);
  color: var(--text-secondary);
}

/* Narrow screens: show the 60 most recent days */
@media (max-width: 640px) {
  .status-uptime__day:nth-child(-n+30) {
    display: none;
  }
}

/* Service List */
.status-services {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 64px;
}

.status-service {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 28px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: background 0.2s ease;
}

.status-service:last-child {
  border-bottom: none;
}

.status-service:hover {
  background: rgba(0, 0, 0, 0.015);
}

.status-service__info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.status-service__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-service__dot--ok {
  background: #22c55e;
}

.status-service__dot--degraded {
  background: #f59e0b;
}

.status-service__dot--down {
  background: #ef4444;
}

.status-service__dot--not_launched {
  background: #9ca3af;
  animation: none;
}

.status-service__name {
  font-size: calc(0.92rem + 2px);
  font-weight: 500;
}

.status-service__status {
  font-size: calc(0.82rem + 2px);
  font-weight: 600;
}

.status-service__status--ok {
  color: #16a34a;
}

.status-service__status--degraded {
  color: #d97706;
}

.status-service__status--down {
  color: #dc2626;
}

.status-service__status--not_launched {
  color: var(--text-secondary);
}

/* Incident History */
.status-incidents__title {
  font-size: calc(1.2rem + 2px);
  font-weight: 600;
  margin-bottom: 24px;
}

.status-incident {
  padding: 28px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.status-incident:last-child {
  border-bottom: none;
}

.status-incident__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.status-incident__date {
  font-size: calc(0.82rem + 2px);
  color: rgba(0, 0, 0, 0.4);
  font-weight: 500;
}

.status-incident__badge {
  padding: 3px 10px;
  border-radius: 100px;
  font-size: calc(0.7rem + 2px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.status-incident__badge--resolved {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.status-incident__badge--investigating {
  background: rgba(249, 115, 22, 0.1);
  color: #ea580c;
}

.status-incident__name {
  font-size: calc(1rem + 2px);
  font-weight: 600;
  margin-bottom: 6px;
}

.status-incident__desc {
  font-size: calc(0.88rem + 2px);
  color: rgba(0, 0, 0, 0.45);
  line-height: 1.65;
  max-width: 700px;
}


/* ============================================
   DOCUMENTATION PAGE
   ============================================ */

/* Hero Search */
.docs-hero-search {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 480px;
  width: 100%;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  color: rgba(0, 0, 0, 0.3);
}

.docs-hero-search:focus-within {
  border-color: rgba(0, 0, 0, 0.2);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.04);
}

.docs-hero-search__input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 0.92rem;
  font-family: inherit;
  color: #1c1d20;
  outline: none;
  min-width: 0;
}

.docs-hero-search__input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

.docs-hero-search__kbd {
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.06);
  font-size: 0.72rem;
  font-family: inherit;
  color: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(0, 0, 0, 0.06);
  line-height: 1;
}

/* Quick Start */
.docs-quickstart {
  padding: 0 0 var(--section-gap);
}

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

.docs-quickstart__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.docs-quickstart__card:hover {
}

.docs-quickstart__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.5);
}

.docs-quickstart__title {
  font-size: 1.05rem;
  font-weight: 600;
}

.docs-quickstart__desc {
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.45);
  line-height: 1.6;
  flex: 1;
}

.docs-quickstart__link {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1c1d20;
  margin-top: 4px;
  transition: opacity 0.2s ease;
}

.docs-quickstart__card:hover .docs-quickstart__link {
  opacity: 0.7;
}

/* Categories */
.docs-categories {
  padding: 110px 0;
  background: var(--dark-section-bg);
  color: #fff;
  position: relative;
  overflow: visible;
  z-index: 10;
}

.docs-categories::before {
  content: '';
  position: absolute;
  bottom: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  width: 110%;
  height: var(--dome-height, 0px);
  background: var(--dark-section-bg);
  border-radius: 50% 50% 0 0;
  pointer-events: none;
  will-change: height;
  z-index: 10;
}

.docs-categories::after {
  content: '';
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  width: 110%;
  height: var(--dome-bottom-height, 250px);
  background: var(--dark-section-bg);
  border-radius: 0 0 50% 50%;
  pointer-events: none;
  will-change: height;
  z-index: 10;
}

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

.docs-category {
  padding: 32px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.docs-category__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 16px;
  color: rgba(0, 0, 0, 0.7);
}

.docs-category__title svg {
  color: rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

.docs-category__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.docs-category__list li a {
  font-size: 0.88rem;
  color: rgba(0, 0, 0, 0.5);
  text-decoration: none;
  transition: color 0.2s ease;
}

.docs-category__list li a:hover {
  color: #1c1d20;
}

/* Docs Responsive */
@media (max-width: 1024px) {
  .docs-quickstart__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

@media (max-width: 600px) {
  .docs-quickstart__grid {
    grid-template-columns: 1fr;
  }
  .docs-categories__grid {
    grid-template-columns: 1fr;
  }
}

/* Dark section overrides for docs categories */
.is--dark-section .docs-category {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

.is--dark-section .docs-category__title {
  color: rgba(255, 255, 255, 0.9);
}

.is--dark-section .docs-category__title svg {
  color: rgba(255, 255, 255, 0.4);
}

.is--dark-section .docs-category__list li a {
  color: rgba(255, 255, 255, 0.45);
}

.is--dark-section .docs-category__list li a:hover {
  color: #fff;
}


/* ============================================
   HELP CENTER PAGE
   ============================================ */

/* Help Topics */
.help-topics {
  padding: 0 0 var(--section-gap);
}

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

.help-topic-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.help-topic-card:hover {
}

.help-topic-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.45);
}

.help-topic-card__title {
  font-size: 1.1rem;
  font-weight: 600;
}

.help-topic-card__desc {
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.45);
  line-height: 1.55;
}

.help-topic-card__count {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.25);
  margin-top: auto;
}

/* Contact Support */
.help-contact {
  padding: 0 0 var(--section-gap);
}

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

.help-contact__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 48px 40px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.help-contact__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.4);
}

.help-contact__title {
  font-size: 1.15rem;
  font-weight: 600;
}

.help-contact__desc {
  font-size: 0.88rem;
  color: rgba(0, 0, 0, 0.45);
  line-height: 1.6;
  max-width: 320px;
}

.help-contact__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 12px;
  background: var(--green-900);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  font-family: inherit;
  margin-top: 4px;
  transition: background 0.25s ease, transform 0.2s ease;
}

.help-contact__btn:hover {
  background: var(--green-700);
  transform: translateY(-1px);
}

/* Help Responsive */
@media (max-width: 900px) {
  .help-topics__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .help-contact__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .help-topics__grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================
   LEGAL / PRIVACY / TERMS
   ============================================ */

/* Legal Hero Overrides
   Hauteur auto + padding-top fixe : le haut du titre est toujours à la même
   distance du header sur toutes les pages légales, peu importe la hauteur
   du viewport ou la longueur du sous-titre (avant : 65vh aligné en bas). */
.legal-hero {
  height: auto;
}

.legal-hero .hero-content-wrapper {
  justify-content: flex-start;
  align-items: flex-end;
  height: auto;
  padding-top: calc(var(--nav-height) + 160px);
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.legal-hero .hero-inner {
  text-align: left;
  align-items: flex-start;
  position: relative;
  width: 100%;
}

.legal-hero .hero-title {
  text-align: left;
}

.legal-hero .hero-subtitle {
  text-align: left;
}

.legal-hero__date {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: calc(0.8rem + 2px);
  font-weight: 500;
  color: rgba(0, 0, 0, 0.3);
}

.legal-section {
  padding: 60px 0 var(--section-gap);
}

.legal-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 60px;
  align-items: start;
}

/* Sidebar TOC */
.legal-sidebar {
  position: sticky;
  top: 120px;
}

.legal-toc {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}

.legal-toc__label {
  font-size: calc(0.7rem + 2px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.35);
  margin-bottom: 16px;
  text-align: right;
}

.legal-toc__link {
  font-size: calc(0.85rem + 2px);
  color: rgba(0, 0, 0, 0.45);
  padding: 8px 16px 8px 12px;
  border-right: 2px solid transparent;
  text-align: right;
  display: inline-block;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  text-decoration: none;
}

.legal-toc__link:hover {
  color: rgba(0, 0, 0, 0.8);
  border-right-color: rgba(0, 0, 0, 0.2);
}

.legal-toc__link.active,
.legal-toc__link[data-toc-status="active"] {
  color: var(--green-600);
  border-right-color: var(--green-400);
  background: rgba(131, 170, 123, 0.1);
  font-weight: 500;
  border-radius: 4px 0 0 4px;
}

.legal-toc__link[data-toc-status="active"] span,
.legal-toc__link.active span {
  opacity: 1;
}

.legal-toc__link[data-toc-depth="3"] {
  padding-right: 28px;
  font-size: 0.8rem;
}

/* Main Content */
.legal-content {
  max-width: 720px;
}

.legal-updated {
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.35);
  margin-bottom: 32px;
  font-weight: 500;
}

.legal-intro {
  font-size: calc(1.05rem + 2px);
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.legal-block {
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  scroll-margin-top: 120px;
}

.legal-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.legal-block__title {
  font-size: calc(1.25rem + 2px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.legal-block__subtitle {
  font-size: calc(1rem + 2px);
  font-weight: 600;
  margin-top: 24px;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.legal-block p {
  font-size: calc(0.9375rem + 2px);
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 16px;
}

.legal-block ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.legal-block li {
  position: relative;
  padding-left: 20px;
  font-size: calc(0.9375rem + 2px);
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 8px;
}

.legal-block li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
}

.legal-block li strong {
  color: var(--text-primary);
  font-weight: 600;
}

.legal-block a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0, 0, 0, 0.2);
  transition: text-decoration-color 0.2s ease;
}

.legal-block a:hover {
  text-decoration-color: rgba(0, 0, 0, 0.6);
}

/* Legal Responsive */
@media (max-width: 900px) {
  .legal-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .legal-sidebar {
    position: static;
  }
  .legal-toc {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 16px;
  }
  .legal-toc__label {
    width: 100%;
    margin-bottom: 8px;
  }
  .legal-toc__link {
    border-left: none;
    padding-left: 0;
    padding: 4px 0;
  }
}


/* ============================================
   DARK THEME - Component Overrides
   ============================================ */

/* ---- Global Hardcoded Color Inversions ---- */
[data-theme="dark"] .section-title,
[data-theme="dark"] .section-subtitle,
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4 {
  color: var(--text-primary);
}

/* ---- Selection ---- */
[data-theme="dark"] ::selection {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* ---- Logos ---- */
[data-theme="dark"] .mega-nav__logo-icon,
[data-theme="dark"] .mega-nav__logo-type,
[data-theme="dark"] .footer-logo-img {
  filter: invert(1);
}

/* ---- Navigation ---- */
[data-theme="dark"] .mega-nav {
  background: rgba(17, 17, 20, 0.85);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .mega-nav__link {
  color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .mega-nav__link:hover {
  color: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .mega-nav__cta--login {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .mega-nav__cta--login:hover {
  color: #fff;
}

[data-theme="dark"] .mega-nav__cta--primary {
  background: #fff;
  color: #1c1d20;
}

[data-theme="dark"] .mega-nav__cta--primary:hover {
  background: #e8e8e8;
}

[data-theme="dark"] .mega-nav__dropdown {
  background: #1c1c22;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .mega-nav__dropdown-item {
  color: rgba(255, 255, 255, 0.65);
}

[data-theme="dark"] .mega-nav__dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

[data-theme="dark"] .mega-nav__dropdown-icon {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .mega-nav__dropdown-desc {
  color: rgba(255, 255, 255, 0.35);
}

/* Theme Toggle */
[data-theme="dark"] .lang-toggle {
  color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .lang-toggle:hover {
  color: #fff;
}

/* ---- Hero ---- */
[data-theme="dark"] .hero {
  background: var(--bg-primary);
}

[data-theme="dark"] .hero-title {
  color: var(--text-primary);
  font-weight: 400;
}

[data-theme="dark"] .hero-subtitle {
  color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .hero-badge {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .hero-cta--primary {
  background: #fff;
  color: #1c1d20;
}

[data-theme="dark"] .hero-cta--primary:hover {
  background: #e8e8e8;
}

[data-theme="dark"] .hero-btn-secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.65);
}

[data-theme="dark"] .hero-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.35);
}

[data-theme="dark"] .hero-cta--secondary {
  color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .hero-cta--secondary:hover {
  color: #fff;
}

[data-theme="dark"] .hero-proof__text {
  color: rgba(255, 255, 255, 0.35);
}

/* ---- Cards (Generic) ---- */
[data-theme="dark"] .feature-card,
[data-theme="dark"] .about-value-card,
[data-theme="dark"] .careers-perk-card,
[data-theme="dark"] .careers-role-card,
[data-theme="dark"] .blog-card,
[data-theme="dark"] .help-category,
[data-theme="dark"] .docs-card,
[data-theme="dark"] .contact-info-card {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .pricing-card {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .feature-card__title,
[data-theme="dark"] .pricing-card__name {
  color: var(--text-primary);
}

[data-theme="dark"] .feature-card__desc {
  color: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .feature-card__icon-wrap {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
}

/* ---- Pricing ---- */
[data-theme="dark"] .pricing-toggle {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .pricing-toggle__btn {
  color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .pricing-toggle__btn.active {
  color: #1c1d20;
  background: #fff;
}

[data-theme="dark"] .pricing-card__price {
  color: var(--text-primary);
}

[data-theme="dark"] .pricing-card__period {
  color: rgba(255, 255, 255, 0.35);
}

[data-theme="dark"] .pricing-card__desc {
  color: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .pricing-card__feature {
  color: rgba(255, 255, 255, 0.55);
}

[data-theme="dark"] .pricing-card__feature-icon {
  color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .pricing-card__cta {
  background: #fff;
  color: #1c1d20;
  border-color: transparent;
}

[data-theme="dark"] .pricing-card__cta:hover {
  background: #e8e8e8;
}

[data-theme="dark"] .pricing-card__cta--outline {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .pricing-card__cta--outline:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

[data-theme="dark"] .pricing-featured-badge {
  background: #fff;
  color: #1c1d20;
}

/* ---- CTA Section ---- */
[data-theme="dark"] .cta-section {
  background: linear-gradient(180deg, var(--bg-primary) 0%, #18182e 100%);
}

[data-theme="dark"] .cta-title {
  color: var(--text-primary);
}

[data-theme="dark"] .cta-subtitle {
  color: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .cta-btn--primary {
  background: #fff;
  color: #1c1d20;
}

[data-theme="dark"] .cta-btn--primary:hover {
  background: #e8e8e8;
}

[data-theme="dark"] .cta-btn--secondary {
  color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .cta-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

/* ---- Footer ---- */
[data-theme="dark"] .footer {
  background: var(--bg-secondary);
}

[data-theme="dark"] .footer-heading {
  color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .footer-link {
  color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .footer-link:hover {
  color: #fff;
}

[data-theme="dark"] .footer-link.is--coming-soon {
  color: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .footer-desc {
  color: rgba(255, 255, 255, 0.35);
}

[data-theme="dark"] .footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .social-share__button {
  color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .social-share:has(.social-share__button:hover) .social-share__button:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* ---- Dashboard Mockups ---- */
[data-theme="dark"] .dash-mock,
[data-theme="dark"] .step-visual {
  background: #1c1c22;
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .dash-sidebar {
  background: #18181e;
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .dash-topbar {
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .dash-stat-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .dash-stat-label {
  color: rgba(255, 255, 255, 0.35);
}

[data-theme="dark"] .dash-stat-value {
  color: var(--text-primary);
}

[data-theme="dark"] .dash-nav-item {
  color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .dash-nav-item.active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

/* ---- How It Works ---- */
[data-theme="dark"] .step-card__square {
  background: var(--bg-card);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .step-card:hover .step-card__square {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .step-number {
  color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .step-title {
  color: var(--text-primary);
}

[data-theme="dark"] .step-desc {
  color: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .kanban-col {
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .kanban-col-title {
  color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .kanban-card {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .ai-line {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .ai-line-dot {
  background: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .chart-bar {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .chart-bar-fill {
  background: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .timeline-dot {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .timeline-bar {
  background: rgba(255, 255, 255, 0.08);
}

/* ---- Sticky Features ---- */
[data-theme="dark"] .sticky-features {
  background: var(--bg-primary);
}

[data-theme="dark"] .sticky-step__title {
  color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .sticky-step__title.is-active {
  color: var(--text-primary);
}

[data-theme="dark"] .sticky-step__desc {
  color: rgba(255, 255, 255, 0.4);
}

/* ---- Legal Pages ---- */
[data-theme="dark"] .legal-hero .hero-content-wrapper {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

@media (max-width: 767px) {
  .legal-hero .hero-content-wrapper {
    padding-top: calc(var(--nav-height) + 80px);
  }
}

[data-theme="dark"] .legal-hero__date {
  color: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .legal-intro {
  color: rgba(255, 255, 255, 0.55);
}

[data-theme="dark"] .legal-block__title {
  color: var(--text-primary);
}

[data-theme="dark"] .legal-block p,
[data-theme="dark"] .legal-block li {
  color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .legal-block a {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .legal-toc__label {
  color: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .legal-toc__link {
  color: rgba(255, 255, 255, 0.35);
  border-right-color: transparent;
}

[data-theme="dark"] .legal-toc__link:hover {
  color: rgba(255, 255, 255, 0.7);
  border-right-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .legal-toc__link.active {
  color: rgba(255, 255, 255, 0.9);
  border-right-color: rgba(255, 255, 255, 0.6);
}

/* ---- Changelog ---- */
[data-theme="dark"] .changelog-entry {
  background: var(--bg-card);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .changelog-tag {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .changelog-date {
  color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .changelog-title {
  color: var(--text-primary);
}

[data-theme="dark"] .changelog-desc {
  color: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .changelog-list li {
  color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .changelog-list li::before {
  color: rgba(255, 255, 255, 0.2);
}

/* ---- Status ---- */
[data-theme="dark"] .status-card {
  background: var(--bg-card);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .status-service__name {
  color: var(--text-primary);
}

[data-theme="dark"] .status-uptime {
  background: var(--bg-card);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .status-uptime__title {
  color: var(--text-primary);
}

[data-theme="dark"] .status-incident {
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .status-incident__name {
  color: var(--text-primary);
}

[data-theme="dark"] .status-incident__desc {
  color: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .status-incident__date {
  color: rgba(255, 255, 255, 0.3);
}

/* ---- Contact ---- */
[data-theme="dark"] .contact-form {
  background: var(--bg-card);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .contact-form label {
  color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form textarea,
[data-theme="dark"] .contact-form select {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

[data-theme="dark"] .contact-form input:focus,
[data-theme="dark"] .contact-form textarea:focus,
[data-theme="dark"] .contact-form select:focus {
  border-color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .contact-form input::placeholder,
[data-theme="dark"] .contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .contact-form__submit {
  background: #fff;
  color: #1c1d20;
}

[data-theme="dark"] .contact-form__submit:hover {
  background: #e8e8e8;
}

[data-theme="dark"] .contact-info__title {
  color: var(--text-primary);
}

[data-theme="dark"] .contact-info__text {
  color: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .contact-info__link {
  color: rgba(255, 255, 255, 0.6);
}

/* ---- Contact Form 7 overrides ---- */

/* CF7 injects <p> wrappers around every field and a <br> between label and input */
.contact-form__group p {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-form__group br {
  display: none;
}
/* Submit button also gets a <p> wrapper */
.contact-form__fields > p {
  margin: 0;
}

/* Custom subject dropdown */
.custom-select {
  position: relative;
  width: 100%;
}
.custom-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: border-color 0.25s ease;
  user-select: none;
}
.custom-select.is-open .custom-select__trigger,
.custom-select__trigger:hover {
  border-bottom-color: #1c1d20;
}
.custom-select__trigger svg {
  flex-shrink: 0;
  color: rgba(0,0,0,0.4);
  transition: transform 0.25s ease;
}
.custom-select.is-open .custom-select__trigger svg {
  transform: rotate(180deg);
}
.custom-select__value {
  font-size: calc(1rem + 2px);
  font-family: inherit;
  color: rgba(0, 0, 0, 0.25);
}
.custom-select__value.is-selected {
  color: #1c1d20;
}
.custom-select__panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  overflow: hidden;
  z-index: 100;
}
.custom-select.is-open .custom-select__panel {
  display: block;
}
.custom-select__option {
  padding: 13px 18px;
  font-size: calc(1rem + 2px);
  font-family: inherit;
  color: rgba(0,0,0,0.7);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.custom-select__option:hover,
.custom-select__option.is-active {
  background: rgba(0,0,0,0.04);
  color: #1c1d20;
}

.wpcf7-form-control-wrap { display: block; width: 100%; }
.wpcf7-spinner { display: none !important; }
.wpcf7-form.sent .wpcf7-response-output { display: none !important; }
.wpcf7-response-output {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  border: 1px solid currentColor;
}
.wpcf7-not-valid-tip {
  color: #e53e3e;
  font-size: 0.8rem;
  margin-top: 0.25rem;
  display: block;
}
.wpcf7 input[type="submit"].contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  background: var(--green-900);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: calc(0.92rem + 2px);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease;
  align-self: flex-start;
}
.wpcf7 input[type="submit"].contact-form__submit:hover {
  background: var(--green-700);
  transform: translateY(-1px);
}

/* ---- About ---- */
[data-theme="dark"] .about-story__text {
  color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .about-value-card__title {
  color: var(--text-primary);
}

[data-theme="dark"] .about-value-card__desc {
  color: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .about-value-card__icon {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .about-team-card {
  background: var(--bg-card);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .about-team-card__name {
  color: var(--text-primary);
}

[data-theme="dark"] .about-team-card__role {
  color: rgba(255, 255, 255, 0.4);
}

/* ---- Careers ---- */
[data-theme="dark"] .careers-perk__title {
  color: var(--text-primary);
}

[data-theme="dark"] .careers-perk__desc {
  color: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .careers-perk__icon {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .careers-role-card__dept {
  color: rgba(255, 255, 255, 0.35);
}

[data-theme="dark"] .careers-role-card__title {
  color: var(--text-primary);
}

[data-theme="dark"] .careers-role-card__desc {
  color: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .careers-role-card__tag {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.45);
}

/* ---- Blog ---- */
[data-theme="dark"] .blog-card__title {
  color: var(--text-primary);
}

[data-theme="dark"] .blog-card__excerpt {
  color: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .blog-card__meta {
  color: rgba(255, 255, 255, 0.3);
}

/* ---- Help / Docs ---- */
[data-theme="dark"] .help-category__title,
[data-theme="dark"] .docs-card__title {
  color: var(--text-primary);
}

[data-theme="dark"] .help-category__desc,
[data-theme="dark"] .docs-card__desc {
  color: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .help-category__icon,
[data-theme="dark"] .docs-card__icon {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .help-search input {
  background: var(--bg-card);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

[data-theme="dark"] .help-search input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .help-contact-card {
  background: var(--bg-card);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .help-contact__title {
  color: var(--text-primary);
}

[data-theme="dark"] .help-contact__desc {
  color: rgba(255, 255, 255, 0.45);
}

/* ---- AI Tasks ---- */
[data-theme="dark"] .ai-step {
  background: var(--bg-card);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .ai-step__number {
  color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .ai-step__title {
  color: var(--text-primary);
}

[data-theme="dark"] .ai-step__text {
  color: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .ai-showcase {
  background: var(--bg-card);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .ai-showcase__title {
  color: var(--text-primary);
}

[data-theme="dark"] .ai-showcase__text {
  color: rgba(255, 255, 255, 0.45);
}

/* ---- Mobile Menu ---- */
[data-theme="dark"] .mega-nav__mobile-menu {
  background: var(--dark-section-bg);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .mega-nav__mobile-link {
  color: rgba(255, 255, 255, 0.6);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .mega-nav__hamburger span {
  background: rgba(255, 255, 255, 0.7);
}

/* Nav dropdown bg */
[data-theme="dark"] .mega-nav__dropdown-bg {
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .mega-nav__dropdown-bg .glass-effect__fill {
  background-color: rgba(28, 28, 34, 0.85);
}

[data-theme="dark"] .mega-nav__panel-label {
  color: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .mega-nav__panel-link-text {
  color: rgba(255, 255, 255, 0.75);
}

[data-theme="dark"] .mega-nav__panel-link-desc {
  color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .mega-nav__panel-link:hover .mega-nav__panel-link-text {
  color: #fff;
}

[data-theme="dark"] .mega-nav__soon-badge {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .mega-nav__card {
  background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("assets/img/megamenu/megamenu-visual (1).jpg");
}


[data-theme="dark"] .mega-nav__panel-col.is--colored {
  background: rgba(255, 255, 255, 0.02);
}

/* Nav CTA dark */
[data-theme="dark"] .mega-nav__bar-cta {
  background: #fff;
  color: #1c1d20;
}

[data-theme="dark"] .mega-nav__bar-cta:hover {
  background: #e8e8e8;
  filter: none;
}

[data-theme="dark"] .mega-nav__bar-cta.is--secondary {
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .mega-nav__bar-cta.is--secondary:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.04);
}

/* Transition for smooth theme switch */
[data-theme="dark"] body,
[data-theme="dark"] .mega-nav,
[data-theme="dark"] .footer {
  transition: background 0.3s ease, color 0.3s ease;
}

[data-theme="dark"] .mega-nav__burger-line {
  background: rgba(255, 255, 255, 0.7) !important;
}


/* ============================================
   MESSAGING PAGE
   ============================================ */

/* Message Feed Visual (Hero) */
.msg-feed-visual {
  width: 100%;
  min-height: 480px;
  max-height: 560px;
  background: transparent;
  overflow: hidden;
  position: relative;
}

.msg-feed-visual__inner {
  padding: 0 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: 100%;
  overflow: hidden;
}

#messaging-hero .about-hero__grid {
  align-items: center;
}

#messaging-hero .about-hero__image {
  overflow: visible;
  align-self: stretch;
}

/* Fade-out at top and bottom */
.msg-feed-visual::before,
.msg-feed-visual::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 90px;
  pointer-events: none;
  z-index: 2;
}

.msg-feed-visual::before {
  top: 0;
  background: linear-gradient(to bottom, var(--bg-primary, #ffffff) 0%, transparent 100%);
}

.msg-feed-visual::after {
  bottom: 0;
  background: linear-gradient(to top, var(--bg-primary, #ffffff) 0%, transparent 100%);
}

/* Day cards - white container per day */
.msg-feed__day-card-wrap {
  width: 100%;
  position: relative;
}

.msg-feed__day-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 340px;
  margin: 0 auto;
  width: 100%;
  will-change: transform;
}

/* Slight rotation angles per card */
.msg-feed__day-card-wrap:nth-child(1) .msg-feed__day-card {
  transform: rotate(-1.5deg);
}

.msg-feed__day-card-wrap:nth-child(2) .msg-feed__day-card {
  transform: rotate(1deg);
}

.msg-feed__day-card-wrap:nth-child(3) .msg-feed__day-card {
  transform: rotate(-0.8deg);
}

.msg-feed__day-card-wrap:nth-child(4) .msg-feed__day-card {
  transform: rotate(1.2deg);
}

.msg-feed__day-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 2px;
}

.msg-feed__day-label {
  font-size: calc(0.72rem + 2px);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  text-transform: uppercase;
}

.msg-feed__day-date {
  font-size: calc(0.7rem + 2px);
  font-weight: 500;
  color: rgba(0, 0, 0, 0.35);
  letter-spacing: 0.02em;
}

/* Message rows inside day cards */
.msg-feed__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 10px;
}

.msg-feed__avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  max-width: 32px;
  min-height: 32px;
  max-height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.msg-feed__row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.msg-feed__row-title {
  font-size: calc(0.82rem + 2px);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-feed__row-time {
  font-size: calc(0.7rem + 2px);
  color: rgba(0, 0, 0, 0.4);
  font-weight: 450;
}

.msg-feed__duration {
  font-size: calc(0.68rem + 2px);
  font-weight: 600;
  color: rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 6px;
}

/* Dark mode */
[data-theme="dark"] .msg-feed-visual::before {
  background: linear-gradient(to bottom, var(--bg-primary) 0%, transparent 100%);
}

[data-theme="dark"] .msg-feed-visual::after {
  background: linear-gradient(to top, var(--bg-primary) 0%, transparent 100%);
}

[data-theme="dark"] .msg-feed__day-card {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .msg-feed__day + .msg-feed__day {
  border-color: var(--border-primary);
}

[data-theme="dark"] .msg-feed__day-date {
  color: var(--text-muted);
}

[data-theme="dark"] .msg-feed__row {
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .msg-feed__row-time {
  color: var(--text-muted);
}

[data-theme="dark"] .msg-feed__duration {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
}

/* ============================================
   KANBAN VISUAL - Hex Grid (Hero)
   ============================================ */
#kanban-hero .about-hero__grid {
  align-items: center;
}

#kanban-hero .about-hero__image {
  overflow: visible;
  align-self: stretch;
}

.hex-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.hex-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: -4px;
}

.hex-row:first-child {
  margin-top: 0;
}

.hex-row--offset {
  /* 4 cells centered under 5 cells = natural half-cell offset */
}

.hex-cell {
  width: 100px;
  height: 87px;
  position: relative;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.06));
}

.hex-cell__inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #1c1d20;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 174'%3E%3Cpath d='M65 0 L135 0 Q150 0 160 13 L190 74 Q200 87 190 100 L160 161 Q150 174 135 174 L65 174 Q50 174 40 161 L10 100 Q0 87 10 74 L40 13 Q50 0 65 0Z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 174'%3E%3Cpath d='M65 0 L135 0 Q150 0 160 13 L190 74 Q200 87 190 100 L160 161 Q150 174 135 174 L65 174 Q50 174 40 161 L10 100 Q0 87 10 74 L40 13 Q50 0 65 0Z' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
  will-change: transform;
}

/* Dark mode */
[data-theme="dark"] .hex-cell__inner {
  background: #2a2a2a;
  color: #e0e0e0;
}

@media (max-width: 767px) {
  .hex-cell {
    width: 90px;
    height: 78px;
  }

  .hex-row {
    gap: 6px;
    margin-top: -20px;
  }

  .hex-cell__inner svg {
    width: 22px;
    height: 22px;
  }
}

/* Features Grid */
.messaging-features {
  padding: var(--section-gap) 0;
}

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

.messaging-feature-card {
  padding: 32px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.messaging-feature-card:hover {
  border-color: rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.messaging-feature-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.messaging-feature-card__title {
  font-size: calc(1.1rem + 2px);
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-primary);
}

.messaging-feature-card__desc {
  font-size: calc(0.92rem + 2px);
  line-height: 1.65;
  color: var(--text-secondary);
}

/* Showcase */
.messaging-showcase {
  padding: 0 0 var(--section-gap);
}

.messaging-showcase__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.messaging-showcase__grid--reversed {
  direction: rtl;
}

.messaging-showcase__grid--reversed > * {
  direction: ltr;
}

.messaging-showcase__image {
  border-radius: 20px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.03);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.messaging-showcase__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.messaging-showcase__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.messaging-showcase__content .section-title {
  text-align: left;
}

.messaging-showcase__text {
  font-size: calc(1rem + 2px);
  line-height: 1.7;
  color: var(--text-secondary);
}

.messaging-showcase__list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.messaging-showcase__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: calc(0.92rem + 2px);
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
}

.messaging-showcase__list li svg {
  color: #22c55e;
  flex-shrink: 0;
}

/* Comparison Section */
.messaging-compare {
  padding: 0 0 var(--section-gap);
}

.messaging-compare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.messaging-compare__col {
  padding: 40px;
  border-radius: 16px;
}

.messaging-compare__col--other {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.messaging-compare__col--axyrium {
  background: var(--text-primary);
  color: #fff;
}

.messaging-compare__heading {
  font-size: calc(1rem + 2px);
  font-weight: 600;
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}

.messaging-compare__col--axyrium .messaging-compare__heading {
  color: #fff;
}

.messaging-compare__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.messaging-compare__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: calc(0.9rem + 2px);
  font-weight: 450;
}

.messaging-compare__col--other .messaging-compare__list li {
  color: var(--text-secondary);
}

.messaging-compare__col--other .messaging-compare__list li svg {
  color: rgba(0, 0, 0, 0.3);
}

.messaging-compare__col--axyrium .messaging-compare__list li {
  color: rgba(255, 255, 255, 0.85);
}

.messaging-compare__col--axyrium .messaging-compare__list li svg {
  color: #22c55e;
}

/* Responsive */
@media (max-width: 991px) {
  .messaging-features__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .messaging-showcase__grid,
  .messaging-showcase__grid--reversed {
    grid-template-columns: 1fr;
    gap: 40px;
    direction: ltr;
  }

  .messaging-showcase__content .section-title {
    text-align: center;
  }

  .messaging-showcase__content {
    align-items: center;
    text-align: center;
  }

  .messaging-showcase__list li {
    justify-content: center;
  }

  .messaging-compare__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 479px) {
  .messaging-features__grid {
    grid-template-columns: 1fr;
  }

  .messaging-feature-card {
    padding: 24px;
  }

  .messaging-compare__col {
    padding: 28px;
  }
}

/* Dark mode overrides */
[data-theme="dark"] .messaging-feature-card {
  background: var(--card-bg);
  border-color: var(--border-primary);
}

[data-theme="dark"] .messaging-feature-card:hover {
  border-color: var(--border-hover);
}

[data-theme="dark"] .messaging-showcase__list li {
  color: var(--text-secondary);
}

[data-theme="dark"] .messaging-compare__col--other {
  background: var(--card-bg);
  border-color: var(--border-primary);
}

[data-theme="dark"] .messaging-compare__col--other .messaging-compare__list li {
  color: var(--text-secondary);
}

[data-theme="dark"] .messaging-compare__col--other .messaging-compare__list li svg {
  color: var(--text-muted);
}

[data-theme="dark"] .messaging-compare__col--axyrium {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .messaging-showcase__image {
  background: var(--card-bg);
}

/* ============================================
   FAQ PAGE
   ============================================ */
.faq-page {
  padding: 40px 0 var(--section-gap);
  position: relative;
  overflow: hidden;
}

.circle-visual-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 750px;
  height: 750px;
  background: url('assets/img/circle-visual.svg') center/contain no-repeat;
  pointer-events: none;
  z-index: 0;
}

.faq-page .section-container {
  position: relative;
  z-index: 1;
}

.faq-page__inner {
  max-width: 720px;
  margin: 0 auto;
}

.faq-page__section {
  margin-bottom: var(--section-gap);
}

.faq-page__section:last-child {
  margin-bottom: 0;
}

.faq-page__section[data-filter-status="not-active"] {
  display: none;
}

.faq-page__section-title {
  font-size: calc(0.75rem + 2px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  margin-bottom: 0;
}

.faq-page__empty {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text-tertiary);
  font-size: 0.9375rem;
}

.faq-filter-list {
  display: flex;
  flex-direction: column;
}

/* ============================================
   PRODUCT OVERVIEW SECTION
   ============================================ */

.product-overview {
  padding: var(--section-gap) 0;
  overflow: hidden;
}

.product-overview__frame {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: visible;
  box-shadow: 0 0 40px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.07);
}

.product-overview__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(var(--po-circle-rot, 0deg));
  width: 900px;
  height: 900px;
  background: url('assets/img/circle-visual.svg') center/contain no-repeat;
  pointer-events: none;
  z-index: -1;
}

.product-overview__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .product-overview__frame {
    border-radius: 10px;
  }
  .product-overview__img {
    border-radius: 10px;
  }
  .product-overview__circle {
    width: 600px;
    height: 600px;
  }
}

/* ============================================
   PRODUCT USE CASES SECTION
   ============================================ */

.product-use-cases {
  padding: 0 0 var(--section-gap);
}

.product-uc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Alignement entre les deux cartes (à propos + accueil) : chaque carte
   partage les mêmes pistes de rangées (subgrid), donc indicateur, titre,
   badge, texte, CTA et avantages restent alignés entre les colonnes peu
   importe la longueur des textes. Desktop seulement - en mobile les
   cartes sont empilées et l'alignement ne s'applique pas. */
@media (min-width: 768px) {
  @supports (grid-template-rows: subgrid) {
    #home-use-cases .product-uc__grid,
    #about-use-cases .product-uc__grid {
      row-gap: 0;
    }

    #home-use-cases .product-uc__card,
    #about-use-cases .product-uc__card {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 6;
      align-content: start;
    }

    /* Les items de grid s'étirent par défaut : garder le chip à sa largeur */
    #home-use-cases .product-uc__card .product-uc__indicator,
    #about-use-cases .product-uc__card .product-uc__indicator {
      justify-self: start;
    }
  }
}

.product-uc__card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
}

.product-uc__card.is--dark {
  background: var(--text-primary);
  border-color: transparent;
}

#about-use-cases .product-uc__card.is--dark,
#home-use-cases .product-uc__card.is--dark {
  background: var(--green-800);
  border: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Même logo au coin supérieur gauche : seul son quadrant inférieur droit reste visible */
#about-use-cases .product-uc__card.is--dark::before,
#home-use-cases .product-uc__card.is--dark::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 420px;
  height: 420px;
  transform: translate(-50%, -50%);
  background: url('assets/img/logo/axyrium-icon-white.svg') center/contain no-repeat;
  opacity: 0.05;
  z-index: -1;
  pointer-events: none;
}

/* Gros logo décoratif ancré au coin inférieur droit : seul son quadrant supérieur gauche (Q2) reste visible */
#about-use-cases .product-uc__card.is--dark::after,
#home-use-cases .product-uc__card.is--dark::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 420px;
  height: 420px;
  transform: translate(50%, 50%);
  background: url('assets/img/logo/axyrium-icon-white.svg') center/contain no-repeat;
  opacity: 0.05;
  z-index: -1;
  pointer-events: none;
}

/* Carte Vision (claire) : badge et bouton en vert */
#about-use-cases .product-uc__card:not(.is--dark) .product-uc__indicator,
#home-use-cases .product-uc__card:not(.is--dark) .product-uc__indicator {
  background: var(--green-900);
}

/* Badges des deep-dives (section en alternance, page produit) en vert */
.prod-deep .product-uc__indicator {
  background: var(--green-900);
}

#about-use-cases .product-uc__card:not(.is--dark) .product-uc__cta,
#home-use-cases .product-uc__card:not(.is--dark) .product-uc__cta {
  background: var(--green-900);
}

#product-use-cases .product-uc__card.is--dark {
  background: var(--text-primary) url('assets/img/blue-images/square-new-blue.jpg') center/cover no-repeat;
  border: none;
}

.product-uc__indicator {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  background: var(--text-primary);
  color: #fff;
  font-size: calc(0.6rem + 2px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  margin-bottom: 40px;
}

.product-uc__card.is--dark .product-uc__indicator {
  background: #fff;
  color: #1c1d20;
}

.product-uc__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.6rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text-primary);
}

.product-uc__card.is--dark .product-uc__title {
  color: #f0f0f3;
}

.product-uc__badge-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
  margin-bottom: 19px;
}

.product-uc__badge {
  font-size: calc(0.6rem + 2px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #E8E8E8;
  color: #3E3D3F;
  padding: 3px 6px;
  border-radius: 2px;
  white-space: nowrap;
}

.product-uc__card.is--dark .product-uc__badge {
  background: rgba(255,255,255,0.12);
  color: #f0f0f3;
  border-radius: 2px;
}

.product-uc__rule {
  flex: 1;
  height: 1px;
  background: var(--border);
}

.product-uc__card.is--dark .product-uc__rule {
  background: rgba(255,255,255,0.1);
}

.product-uc__body {
  font-family: var(--font);
  font-size: calc(1.1rem + 2px);
  line-height: 1.65;
  color: var(--text-primary);
  margin: 0 0 30px;
}

.product-uc__card.is--dark .product-uc__body {
  color: rgba(255,255,255,0.82);
}

.product-uc__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 0;
  padding: 14px 24px;
  font-size: calc(1.1rem + 2px);
  font-weight: 500;
  border-radius: 4px;
  background: var(--text-primary);
  color: #fff;
  text-decoration: none;
}

.product-uc__cta .btn-animate-chars__bg {
  background-color: rgba(255,255,255,0.08);
}

.product-uc__card.is--dark .product-uc__cta {
  background: #fff;
  color: #1c1d20;
}

.product-uc__card.is--dark .product-uc__cta .btn-animate-chars__bg {
  background-color: rgba(0,0,0,0.06);
}

.product-uc__benefits {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 40px;
}

.product-uc__benefits-label {
  font-family: var(--font);
  font-size: calc(1.1rem + 2px);
  font-weight: 600;
  color: var(--text-primary);
}

.product-uc__card.is--dark .product-uc__benefits-label {
  color: #f0f0f3;
}

.product-uc__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.product-uc__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
  font-family: var(--font);
  font-size: calc(1.1rem + 2px);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

.product-uc__card.is--dark .product-uc__list li {
  border-bottom-color: rgba(255,255,255,0.08);
  color: #f0f0f3;
}

.product-uc__list li::before {
  content: '•';
  opacity: 0.35;
  flex-shrink: 0;
}

.product-uc__see-all {
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--text-secondary);
  transition: color 0.2s;
  margin-top: auto;
}

.product-uc__see-all:hover { color: var(--text-primary); }

.product-uc__card.is--dark .product-uc__see-all {
  color: rgba(255,255,255,0.5);
}

.product-uc__card.is--dark .product-uc__see-all:hover {
  color: #f0f0f3;
}

@media (max-width: 768px) {
  .product-uc__grid { grid-template-columns: 1fr; }
  .product-uc__card { padding: 32px 24px; }
}

/* ============================================
   INTEGRATIONS
   ============================================ */

.integrations-section {
  padding: 80px 0;
  border-top: 1px solid var(--border);
}

.integrations-label {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  text-align: center;
  margin-bottom: 48px;
}

.integrations-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.integrations-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
}

.integrations-logo img {
  display: block;
  width: 100%;
  height: 44px;
  object-fit: contain;
  object-position: center;
  filter: grayscale(100%) invert(1) brightness(0.2);
  opacity: 0.4;
}

@media (max-width: 768px) {
  .integrations-grid { grid-template-columns: repeat(3, 1fr); }
  .integrations-logo { padding: 20px 12px; }
}

/* ============================================
   DEPTH TILES
   ============================================ */

.depth-tiles {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: visible;
}

.depth-tiles__collection {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.depth-tiles__list {
  place-items: center;
  display: grid;
}

.depth-tiles__item {
  will-change: transform, opacity, filter;
  grid-area: 1 / 1;
  justify-content: center;
  align-items: center;
  width: max-content;
  height: max-content;
  display: flex;
}

.demo-card {
  aspect-ratio: 1;
  border-radius: 1.5em;
  width: clamp(16em, 24vw, 30em);
  position: relative;
  overflow: hidden;
  transform: scale(1) rotate(0.001deg);
}

.cover-image {
  object-fit: cover;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* ============================================
   ABOUT TEAM
   ============================================ */

.about-team {
  padding: var(--section-gap) 0;
}

.about-team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 56px;
}

.about-team__card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.about-team__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.about-team__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background 0.35s ease;
}

.about-team__card:hover .about-team__info {
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
}

.about-team__name {
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  margin: 0;
}

.about-team__role {
  font-size: var(--section-subtitle-size, 1.1rem);
  color: rgba(255,255,255,0.75);
}

.about-team__email-row {
  display: flex;
  align-items: center;
  gap: 6px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.35s ease;
  margin-top: 0;
}

.about-team__card:hover .about-team__email-row {
  max-height: 24px;
  opacity: 1;
  margin-top: 6px;
}

.about-team__email-link {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.about-team__email-link:hover {
  color: #fff;
}

.about-team__email-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: rgba(255,255,255,0.4);
  transition: color 0.2s ease;
  flex-shrink: 0;
  line-height: 1;
}

.about-team__email-copy:hover {
  color: #fff;
}

.about-team__copy-icon {
  width: 12px;
  height: 12px;
  display: block;
}

.about-team__copy-icon.is--success {
  display: none;
}

.about-team__email-copy.is--copied {
  color: #fff;
}

.about-team__email-copy.is--copied .about-team__copy-icon:not(.is--success) {
  display: none;
}

.about-team__email-copy.is--copied .about-team__copy-icon.is--success {
  display: block;
}

@media (max-width: 768px) {
  .about-team__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   GLOBAL PADDING VARIANT
   ============================================ */

/* Home Quebec section */
.home-quebec {
  padding: 110px 0;
  position: relative;
  overflow: visible;
  z-index: 10;
}
.home-quebec::before {
  content: '';
  position: absolute;
  bottom: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  width: 110%;
  height: var(--dome-height, 250px);
  background: var(--dark-section-bg);
  border-radius: 50% 50% 0 0;
  pointer-events: none;
  will-change: height;
  z-index: 10;
}
.home-quebec::after {
  content: '';
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  width: 110%;
  height: var(--dome-bottom-height, 250px);
  background: var(--dark-section-bg);
  border-radius: 0 0 50% 50%;
  pointer-events: none;
  will-change: height;
  z-index: 10;
}
.home-quebec__grid {
  align-items: center;
}
.home-quebec__text {
  justify-content: center;
  gap: 0;
}
.home-quebec__title {
  font-family: var(--font-display);
  color: #fff;
  font-size: clamp(2.4rem, 4.8vw, 4.2rem);
  margin: 0 0 1.25rem;
}
.home-quebec__subtitle {
  color: rgba(255,255,255,0.65);
  font-family: var(--font);
}
.home-quebec__map {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.home-quebec__map img {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
}

.normal-section-padding {
  padding-top: 110px;
  padding-bottom: 110px;
}

/* Product V2 use case cards */
.product-use-cases--v2 .product-uc__card:not(.is--dark) {
  background: #D2E2EB;
  border-color: transparent;
}
.product-use-cases--v2 .product-uc__card:not(.is--dark) .product-uc__indicator {
  background: var(--dark-section-bg);
  color: #fff;
}
.product-use-cases--v2 .product-uc__card:not(.is--dark) .product-uc__badge {
  background: rgba(255,255,255,0.35);
  color: #1c1d20;
}
.product-use-cases--v2 .product-uc__card:not(.is--dark) .product-uc__cta {
  background: var(--text-primary);
  color: #fff;
}
.product-use-cases--v2 .product-uc__card:not(.is--dark) .product-uc__cta .btn-animate-chars__bg {
  background-color: rgba(0,0,0,0.06);
}
.product-use-cases--v2 .product-uc__card.is--dark .product-uc__indicator {
  background: #B4CEDC;
  color: #1c1d20;
}
.product-use-cases--v2 .product-uc__card.is--dark .product-uc__cta {
  background: #B4CEDC;
  color: #1c1d20;
}
.product-use-cases--v2 .product-uc__card.is--dark .product-uc__cta .btn-animate-chars__bg {
  background-color: rgba(0,0,0,0.06);
}

/* Product V2 overview circle */
.product-overview--v2 .product-overview__circle {
  background-image: url('assets/img/circle-visual-v2.svg');
}

/* Product V2 secondary button: no bg, brand-black border (dark rules further down) */

/* Product V2 hero image */
#product-hero .about-hero__grid {
  align-items: center;
}
#product-hero .about-hero__image {
  overflow: visible;
  border-radius: 0;
  background: none;
}
#product-hero .product-v2-hero-img {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
  object-fit: unset;
  margin-left: auto;
  margin-top: 60px;
}


/* ── Soft text shadow for text sitting on photo backgrounds ── */
.hero--img .hero-title,
.hero--img .hero-subtitle,
.hs-card--photo,
.cta-content:not(.cta-content--light),
.pricing-card-featured,
.product-uc__card.is--dark {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.18);
}

/* Buttons, badges and pills carry their own background - no shadow */
.cta-content .btn-animate-chars,
.pricing-card-featured .btn-animate-chars,
.product-uc__card.is--dark .product-uc__indicator {
  text-shadow: none;
}

/* ── Product hero: brand-black buttons + right-side product image ── */
#product-hero .hero-btn-primary {
  background: var(--green-900);
  color: #ffffff;
}

#product-hero .hero-btn-secondary {
  border-color: #1c1d20;
  color: #1c1d20;
}

#product-hero .hero-btn-secondary:hover {
  background: rgba(28, 29, 32, 0.05);
  border-color: #1c1d20;
}

#product-hero .about-hero__image {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: visible;
}

/* <picture> (hero Pré-achat, AVIF) : transparent pour la mise en page flex */
#product-hero .about-hero__image picture {
  display: contents;
}

#product-hero .product-hero__img {
  width: min(100%, 31.25vw); /* 450px on a 1440 viewport */
  height: auto;
  border-radius: 20px;
}

@media (max-width: 991px) {
  #product-hero .about-hero__image {
    justify-content: center;
  }
  #product-hero .product-hero__img {
    width: min(100%, 450px);
  }
}

/* ── Product bento layout ── */
.prod-bento {
  padding: 110px 0 100px;
}

.prod-bento__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.prod-bento__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  min-height: 420px;
}

.prod-bento__card--wide { grid-column: span 8; display: flex; align-items: center; }
.prod-bento__card--tall { grid-column: span 4; }
.prod-bento__card--bg   { grid-column: span 4; }

.prod-bento__content {
  position: relative;
  z-index: 2;
  padding: 40px;
  max-width: 46%;
}

.prod-bento__card--wide.is--reverse .prod-bento__content {
  margin-left: auto;
}

.prod-bento__card--tall .prod-bento__content {
  max-width: none;
  padding-bottom: 0;
}

.prod-bento__title {
  font-family: var(--font-display);
  font-size: var(--bento-title-size, 2.4rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.prod-bento__desc {
  font-size: calc(1rem + 2px);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Media: image pinned to one edge, always full width or full height */
.prod-bento__media { position: absolute; z-index: 1; }
.prod-bento__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Image right, full height */
.prod-bento__media--right { inset: 0 0 0 44%; }
.prod-bento__media--right img { object-position: left top; }
.prod-bento__media--right::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 45%);
}

/* Image left, full height */
.prod-bento__media--left { inset: 0 44% 0 0; }
.prod-bento__media--left img { object-position: right top; }
.prod-bento__media--left::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0) 45%);
}

/* Image bottom, full width */
.prod-bento__media--bottom { inset: 44% 0 0 0; }
.prod-bento__media--bottom img { object-position: top left; }
.prod-bento__media--bottom::after {
  content: '';
  position: absolute;
  inset: 0;
  /* eased ramp, finishes in the image's sky margin before the UI visual */
  background: linear-gradient(to bottom,
    #fff 0%,
    rgba(255, 255, 255, 0.85) 10%,
    rgba(255, 255, 255, 0.55) 18%,
    rgba(255, 255, 255, 0.25) 26%,
    rgba(255, 255, 255, 0.08) 31%,
    rgba(255, 255, 255, 0) 36%);
}

/* Full-background box: image covers, caption fades to white */
.prod-bento__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.prod-bento__caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 72px 28px 28px;
  background: linear-gradient(to top, #fff 30%, rgba(255, 255, 255, 0) 100%);
}

.prod-bento__caption .prod-bento__title { margin-bottom: 0; }

@media (max-width: 991px) {
  .prod-bento__card--wide,
  .prod-bento__card--tall,
  .prod-bento__card--bg {
    grid-column: span 12;
  }
  .prod-bento__card--wide { display: block; min-height: 0; }
  .prod-bento__card--wide.is--reverse { display: flex; flex-direction: column; }
  .prod-bento__card--wide.is--reverse .prod-bento__media { order: 2; }
  .prod-bento__content { max-width: none; padding-bottom: 0; }
  .prod-bento__media--right,
  .prod-bento__media--left {
    position: relative;
    inset: auto;
    height: 260px;
    margin-top: 24px;
  }
  .prod-bento__media--right img,
  .prod-bento__media--left img { object-position: top left; }
  .prod-bento__media--right::after,
  .prod-bento__media--left::after {
    background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 45%);
  }
  .prod-bento__card--tall { min-height: 420px; }
  .prod-bento__card--bg { min-height: 320px; }
}

/* Bento media that matches the card height exactly (no horizontal crop):
   the zone takes the image's own ratio, anchored to the card edge */
.prod-bento__media--right.is--fit {
  inset: 0 0 0 auto;
  aspect-ratio: 1830 / 1502; /* briefing-matinal.jpg */
  max-width: 75%;
}

@media (max-width: 991px) {
  .prod-bento__media--right.is--fit {
    aspect-ratio: auto;
    max-width: none;
  }
}

/* Box A fade: stay solid white until the text column ends (~20% of the
   media zone), then dissolve before the UI visual starts */
.prod-bento__media--right.is--fit::after {
  /* eased ramp: no visible edge where the solid white ends */
  background: linear-gradient(to right,
    #fff 0%,
    #fff 16%,
    rgba(255, 255, 255, 0.85) 23%,
    rgba(255, 255, 255, 0.55) 30%,
    rgba(255, 255, 255, 0.25) 37%,
    rgba(255, 255, 255, 0.08) 42%,
    rgba(255, 255, 255, 0) 48%);
}

/* Box D: image fits card height (no crop), fade mirrored on the right edge */
.prod-bento__media--left.is--fit {
  inset: 0 auto 0 0;
  aspect-ratio: 1830 / 1502; /* finances.jpg */
  max-width: 75%;
}

.prod-bento__media--left.is--fit::after {
  background: linear-gradient(to left,
    #fff 0%,
    #fff 16%,
    rgba(255, 255, 255, 0.85) 23%,
    rgba(255, 255, 255, 0.55) 30%,
    rgba(255, 255, 255, 0.25) 37%,
    rgba(255, 255, 255, 0.08) 42%,
    rgba(255, 255, 255, 0) 48%);
}

@media (max-width: 991px) {
  .prod-bento__media--left.is--fit {
    aspect-ratio: auto;
    max-width: none;
  }
  .prod-bento__media--left.is--fit::after {
    background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 45%);
  }
}

/* ── Product steps ("En 3 étapes simples") ── */
.prod-steps {
  padding: 80px 0;
}

.prod-steps__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 3.6vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 48px;
}

.prod-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.prod-steps__card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-xl);
  padding: 28px;
}

/* Big numbers: 128px, max weight, filled with the numbers-bg image */
.prod-steps__num {
  display: inline-block;
  font-family: var(--font);
  font-size: calc(128px + 2px);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 28px;
  background: url('assets/img/new-brand/numbers-bg.jpg') center / cover no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.prod-steps__card-title {
  font-family: var(--font);
  font-size: calc(1.15rem + 2px);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.prod-steps__desc {
  font-size: calc(0.95rem + 2px);
  line-height: 1.65;
  color: var(--text-secondary);
}

@media (max-width: 991px) {
  .prod-steps__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Product deep-dives: alternating blocks, home-quebec typography on light bg ── */
.prod-deep {
  padding: 80px 0;
}

.prod-deep__row {
  align-items: center; /* same as .home-quebec__grid */
}

.prod-deep__row + .prod-deep__row {
  margin-top: 110px;
}

.prod-deep__row.is--reverse .about-hero__text {
  order: 2;
}

.prod-deep__row.is--reverse .prod-deep__media {
  order: 1;
  justify-content: flex-start;
}

.prod-deep__text {
  justify-content: center; /* same as .home-quebec__text */
  gap: 0;
}

.prod-deep__title {
  font-family: var(--font-display);
  /* same scale as .home-quebec__title, light theme color */
  color: var(--text-primary);
  font-size: clamp(2.4rem, 4.8vw, 4.2rem);
  margin: 0 0 1.25rem;
  text-align: left;
}

.prod-deep__subtitle {
  color: var(--text-secondary);
  margin: 0 0 1rem;
  text-align: left;
  max-width: none;
}

.prod-deep__subtitle:last-child {
  margin-bottom: 0;
}

.prod-deep__media {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.prod-deep__img {
  /* same sizing as the product hero image */
  width: min(100%, 31.25vw); /* 450px on a 1440 viewport */
  height: auto;
  border-radius: 20px;
  display: block;
}

@media (max-width: 991px) {
  .prod-deep__row + .prod-deep__row {
    margin-top: 80px;
  }
  .prod-deep__row.is--reverse .about-hero__text {
    order: 0;
  }
  .prod-deep__row.is--reverse .prod-deep__media {
    order: 0;
    justify-content: center;
  }
  .prod-deep__media {
    justify-content: center;
  }
  .prod-deep__img {
    width: min(100%, 450px);
  }
}

/* ============================================
   PRICING - nouvelles cartes (portées de l'app)
   ============================================ */

.billing-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.05);
}

/* Pastille blanche qui glisse sous l'onglet actif (positionnée en JS) */
.billing-switch__thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: 0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(39, 39, 41, 0.12);
  transition: left 0.35s cubic-bezier(0.625, 0.05, 0, 1),
              width 0.35s cubic-bezier(0.625, 0.05, 0, 1);
}

.billing-switch__tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: calc(15px + 2px);
  line-height: 1;
  /* graisse fixe : le texte ne change pas de largeur au basculement,
     la pastille glisse sans que les onglets bougent */
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  transition: color 0.25s ease;
  cursor: pointer;
}

.billing-switch__tab.toggle-active {
  color: #272729;
}

.billing-switch__badge {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: calc(12px + 2px);
  font-weight: 600;
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
}

/* pt 40px : réserve la place du panneau qui dépasse vers le haut au survol */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
  padding-top: 40px;
  margin-top: 24px;
}

.plan-card-wrap {
  position: relative;
  height: 100%;
  cursor: pointer;
}

/* Panneau caché derrière la carte : au repos il épouse la carte (opaque, rien
   ne transparaît); au survol il déborde de 40px en haut et 6px ailleurs.
   On anime les décalages, pas un translate : le bas doit déborder, pas remonter.
   Rayon 26 = 20 (carte) + 6 : coins concentriques. */
.plan-card__reveal {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12px;
  border-radius: 26px;
  overflow: hidden;
  background: var(--green-100);
  font-size: calc(15px + 2px);
  font-weight: 600;
  color: var(--green-700);
  text-decoration: none;
  transition: top 0.35s cubic-bezier(0.625, 0.05, 0, 1),
              right 0.35s cubic-bezier(0.625, 0.05, 0, 1),
              bottom 0.35s cubic-bezier(0.625, 0.05, 0, 1),
              left 0.35s cubic-bezier(0.625, 0.05, 0, 1);
}

.plan-card-wrap:hover .plan-card__reveal,
.plan-card-wrap:focus-within .plan-card__reveal {
  top: -40px;
  right: -6px;
  bottom: -6px;
  left: -6px;
}

.plan-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  padding: 24px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 0 2px rgba(39, 39, 41, 0.04), 0 0 24px rgba(39, 39, 41, 0.07);
}

/* Bague verte du forfait populaire, ajoutée à l'ombre (pas à sa place) */
.plan-card.is--popular {
  box-shadow: inset 0 0 0 2px var(--green-600), 0 0 2px rgba(39, 39, 41, 0.04), 0 0 24px rgba(39, 39, 41, 0.07);
}

.plan-card__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.plan-card__name {
  font-size: calc(18px + 2px);
  font-weight: 600;
  color: #272729;
}

.plan-card__popular {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: calc(12px + 2px);
  font-weight: 600;
  background: var(--green-600);
  color: #ffffff;
}

.plan-card__tagline {
  margin-top: 4px;
  font-size: calc(13px + 2px);
  color: rgba(39, 39, 41, 0.4);
}

.plan-card__pricing {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.plan-card__price {
  font-size: calc(38px + 2px);
  font-weight: 500;
  line-height: 1;
  color: #272729;
  letter-spacing: -0.02em;
}

.plan-card__per {
  font-size: calc(13px + 2px);
  color: rgba(39, 39, 41, 0.4);
}

/* Badge d'économie : apparition animée (hauteur + fondu + glissement),
   le margin-top négatif annule le gap du parent quand il est caché,
   pour que toute la carte glisse doucement au lieu de sauter. */
.plan-card__save {
  align-self: flex-start;
  white-space: nowrap;
  display: inline-flex;
  padding: 0 10px;
  max-height: 0;
  margin-top: -12px;
  opacity: 0;
  transform: translateY(-4px);
  overflow: hidden;
  border: none; /* neutralise la bordure noire de l'ancien .pricing-save-badge */
  border-radius: 999px;
  font-size: calc(12px + 2px);
  font-weight: 600;
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
  transition: max-height 0.35s cubic-bezier(0.625, 0.05, 0, 1),
              margin-top 0.35s cubic-bezier(0.625, 0.05, 0, 1),
              padding 0.35s cubic-bezier(0.625, 0.05, 0, 1),
              opacity 0.3s ease,
              transform 0.35s cubic-bezier(0.625, 0.05, 0, 1);
}

.plan-card__save.visible {
  max-height: 30px;
  margin-top: 0;
  padding: 4px 10px;
  opacity: 1;
  transform: none;
}

.plan-card__sep {
  height: 1px;
  flex-shrink: 0;
  margin: 4px 0;
  background: #dddddd;
}

.plan-card__tokens {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #dddddd;
}

.plan-card__tokens img { flex-shrink: 0; }

.plan-card__tokens-count {
  display: block;
  font-size: calc(15px + 2px);
  font-weight: 500;
  line-height: 1.2;
  color: #272729;
}

.plan-card__tokens-note {
  display: block;
  margin-top: 4px;
  font-size: calc(13px + 2px);
  color: rgba(39, 39, 41, 0.4);
}

.plan-card__features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.plan-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: calc(0.9rem + 2px);
  color: #767676;
}

.plan-card__features svg {
  margin-top: 4px;
  flex-shrink: 0;
}

/* mt-auto : les boutons s'alignent malgré des listes de longueurs différentes */
.plan-card__btn {
  margin-top: auto;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border-radius: 9999px;
  font-size: calc(0.9rem + 2px);
  font-weight: 600;
  text-decoration: none;
  color: #272729;
  background: #ffffff;
  box-shadow: inset 0 0 0 1.4px #d2d2d2;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.plan-card__btn:hover {
  background: #f4f4f4;
  transform: scale(0.98);
}

.plan-card__btn.is--filled {
  background: var(--green-600);
  color: #ffffff;
  box-shadow: none;
}

.plan-card__btn.is--filled:hover {
  background: var(--green-700);
}

/* Page Tarifs Pré-achat : deux forfaits pleine largeur */
@media (min-width: 992px) {
  .pricing.is--two-plans .plan-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .plan-grid {
    grid-template-columns: 1fr;
    padding-top: 24px;
  }

  /* Au tactile, pas de survol : on neutralise le débordement du panneau */
  .plan-card-wrap:hover .plan-card__reveal,
  .plan-card-wrap:focus-within .plan-card__reveal {
    top: 0; right: 0; bottom: 0; left: 0;
  }
}

.plan-tokens-note {
  margin-top: 24px;
  max-width: 720px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}


/* ============================================
   HOME RELEASES - liste avec image-curseur
   (section "Dernières mises à jour", accueil)
   ============================================ */
.home-releases {
  padding: var(--section-gap) 0;
}

.home-releases__more {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}

.preview-container {
  width: 100%;
  margin-top: 48px;
}

.preview-collection {
  width: 100%;
  margin-top: .5em;
}

.preview-item__row {
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
}

.preview-item__col {
  flex: 1;
}

.preview-item__col.is--large {
  max-width: 45%;
}

.preview-item__col.is--medium {
  max-width: 25%;
}

.preview-item__col.is--small {
  max-width: 15%;
}

.preview-container__label {
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: calc(.75rem + 2px);
  font-weight: 600;
}

.preview-list {
  flex-flow: column;
  width: 100%;
  display: flex;
  position: relative;
}

.preview-item {
  width: 100%;
  transition: opacity .2s;
}

.preview-item__heading {
  margin-top: 0;
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--text-primary);
}

.preview-item__text {
  margin-top: 0;
  margin-bottom: 0;
  font-size: calc(1.05rem + 2px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--text-secondary);
}

.preview-item__visual {
  aspect-ratio: 3 / 2;
  width: 17em;
  display: none;
  position: absolute;
  overflow: hidden;
}

.preview-follower [data-follower-visual] {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.preview-item__inner {
  border-top: 1px solid var(--border-hover);
  width: 100%;
  padding-top: 2.5em;
  padding-bottom: 2.5em;
  display: block;
  text-decoration: none;
}

.preview-item__visual-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.preview-follower {
  z-index: 100;
  aspect-ratio: 3 / 2;
  pointer-events: none;
  border-radius: .75em;
  justify-content: center;
  align-items: center;
  width: 17em;
  display: flex;
  position: fixed;
  inset: 0% auto auto 0%;
  overflow: hidden;
}

.preview-follower__inner {
  z-index: 2;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.1s ease, transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

@media screen and (min-width: 992px) {
  .preview-item:last-of-type {
    border-bottom: 1px solid var(--border-hover);
  }

  /* Colonnes méta compactes, groupées contre le bord droit */
  .preview-item__col.is--large {
    flex: 1;
    max-width: none;
  }

  .preview-item__col.is--small {
    flex: 0 0 auto;
    width: 8em;
    max-width: none;
  }

  .preview-item__col.is--medium {
    flex: 0 0 auto;
    width: 10em;
    max-width: none;
    text-align: right;
  }
}

@media (hover: hover) and (min-width: 992px) {
  body:has([data-follower-collection]:hover) .preview-follower__inner {
    opacity: 1;
    transform: scale(1);
  }
  body:has(.preview-item:hover) .preview-item:not(:hover) {
    opacity: 0.5;
  }
}

@media screen and (max-width: 991px) {
  .preview-item__row {
    grid-row-gap: .5em;
  }

  .preview-item__row.tablet--hide {
    display: none;
  }

  .preview-item__col.is--large {
    flex: none;
    order: -1;
    width: 100%;
    max-width: none;
  }

  .preview-item__col.is--medium {
    order: -1;
    max-width: 80%;
  }

  .preview-item__col.is--small {
    text-align: right;
    max-width: 20%;
  }

  .preview-item__col.is--small.tablet--hide {
    display: none;
  }

  .preview-list {
    grid-column-gap: 1em;
    grid-row-gap: 4em;
    flex-flow: wrap;
  }

  .preview-item {
    width: calc(50% - .5em);
  }

  .preview-item__heading {
    font-size: 2.1rem;
  }

  .preview-item__visual {
    border-radius: .75em;
    order: -1;
    width: 100%;
    margin-bottom: 1em;
    display: block;
    position: relative;
  }

  .preview-item__inner {
    border: none;
    flex-flow: column;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
  }

  .preview-follower {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .preview-list {
    grid-row-gap: 3em;
  }

  .preview-item {
    width: 100%;
  }
}

/* Single changelog : espace entre les badges et le texte d'intro */
.article-hero .changelog-entry__tags {
  margin-bottom: 20px;
}

/* ============================================
   Dither cursor trail
   Fixed canvas at z-index:-1 - sits above the body's --bg-primary
   background but below every element that paints its own background,
   so the trail only shows on white/transparent sections and is
   naturally hidden by images, dark sections and the homepage hero.
   ============================================ */
.ax-dither-trail {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.ax-dither-trail canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  image-rendering: pixelated;
  opacity: 0.14; /* trail opacity on white sections (shader draws solid dots) */
}

/* Dark-section mirrors: a clipped overlay canvas per dark section, kept
   viewport-aligned by JS and recolored light green. Injected by
   refreshTrailDarkLayers() in script.js. */
.ax-trail-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ax-trail-clip canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  image-rendering: pixelated;
  opacity: 0.2; /* trail opacity on dark sections */
}
/* Dome mirrors sit in the dome's parent (light) section; JS sets their
   z-index to the dome's own z-index + 1 (.shape-round is z-index: 11) */
.ax-trail-clip--dome {
  z-index: 12;
}
/* Lifts a dark section's static children above the trail overlay */
.ax-trail-lift {
  position: relative;
  z-index: 1;
}

/* ============================================
   ONGLETS AUTOPLAY : SECTIONS DÉTAILLÉES (8 oct. 2026)
   D'après « Tab System with Autoplay » (Osmo), aux couleurs du site.
   Markup : template-parts/product-deepdives.php ; JS : initTabSystem.
   Gauche : titre + onglets (pastille numéro, titre serif, description qui
   se déplie, barre de progression verte) ; droite : visuel de l'onglet
   actif dans un cadre. Les visuels sont empilés en absolu, seul .active
   est visible (GSAP gère le fondu + glissement).
   ============================================ */
.tab-layout__wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-flow: wrap;
  align-items: stretch;
  row-gap: 3em;
}

.tab-layout__col {
  width: 50%;
}

.tab-layout__col:first-child {
  padding-right: 2em;
}

.tab-content__wrap {
  width: 100%;
  max-width: 36em;
  height: 100%;
}

.tab-content__inner {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3em;
  min-height: 100%;
}

.tab-content__top {
  display: flex;
  flex-flow: column;
  gap: 2em;
}

.tab-heading {
  margin: 0;
  max-width: 12em;
}

.tab-content__bottom {
  display: flex;
  flex-flow: column;
  width: 100%;
  max-width: 30em;
}

.tab-content__item {
  position: relative;
  display: block;
  width: 100%;
  padding: 2em 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--text-primary);
  cursor: pointer;
  transition: opacity 0.25s;
}

.tab-content__item:not(.active) {
  opacity: 0.55;
}

.tab-content__item:not(.active):hover {
  opacity: 0.85;
}

.tab-content__item:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 4px;
  border-radius: 4px;
}

.tab-content__item-main {
  display: flex;
  align-items: flex-start;
  gap: 1.5em;
  width: 100%;
}

.content-item__nr {
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  margin-top: 0.15em;
  border-radius: 100em;
  background: var(--green-900);
  color: #fff;
  font-size: calc(0.75rem + 2px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.content-item__heading {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.tab-content__item-detail {
  display: block;
  width: 100%;
  height: 0;
  padding-left: calc(1.875rem + 1.5em); /* pastille + gap : aligné sur le titre */
  overflow: hidden;
}

.tab-content__item.active .tab-content__item-detail {
  height: auto; /* état initial avant le JS (onglet 1 ouvert) */
}

.tab-description {
  display: block;
  margin: 0;
  font-size: calc(1rem + 2px);
  line-height: 1.6;
  color: var(--text-secondary);
}

.tab-description__spacer {
  display: block;
  padding-top: 1em;
}

.tab-content__item-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.12);
}

.tab-progress {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--green-600);
  transform-origin: 0% 50%;
  transform: scaleX(0);
}

.tab-visual__wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 640px;
}

.tab-visual__item {
  position: absolute;
  inset: 0;
  display: flex;
  visibility: hidden;
}

.tab-visual__item.active {
  visibility: visible;
}

.tab-visual__inner {
  width: 100%;
  height: 100%;
  padding: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  background: #fff;
  overflow: hidden;
}

.tab-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

@media screen and (max-width: 991px) {
  .tab-layout__col { width: 100%; }
  .tab-layout__col:first-child { padding-right: 0; }
  .tab-content__wrap { max-width: none; }
  .tab-content__bottom { max-width: none; }
  .tab-visual__wrap { max-height: none; aspect-ratio: 4 / 3; }
}

@media screen and (max-width: 767px) {
  .tab-layout__wrap { row-gap: 2em; }
  .tab-content__inner { gap: 1.5em; }
  .tab-content__item { padding: 1.5em 0; }
  .tab-content__item-main { gap: 1em; }
  .content-item__heading { font-size: 1.5rem; }
  .tab-content__item-detail { padding-left: calc(1.875rem + 1em); }
  .tab-visual__inner { padding: 6px; border-radius: 18px; }
  .tab-image { border-radius: 12px; }
}

/* ---- Variante sombre (dans un .dark-frame, 8 oct. 2026 : Confidentialité
   du Pré-achat). Visuels = .fviz animés dans .feat-slider__media (taille en
   cqi) ; les styles sombres des .fviz sont partagés avec .feat-slider.is--dark.
   Pas de titre dans la colonne : l'en-tête du cadre est au-dessus. ---- */
.tab-layout__wrap.is--dark .tab-layout__col:first-child {
  display: flex;
  align-items: center;
}

.tab-layout__wrap.is--dark .tab-content__item {
  color: #F8F8F8;
}

.tab-layout__wrap.is--dark .tab-description {
  color: rgba(248, 248, 248, 0.55);
}

.tab-layout__wrap.is--dark .content-item__nr {
  background: #F8F8F8;
  color: #202020;
}

.tab-layout__wrap.is--dark .tab-content__item-bottom {
  background: rgba(255, 255, 255, 0.12);
}

.tab-layout__wrap.is--dark .tab-progress {
  background: var(--green-300);
}

.tab-layout__wrap.is--dark .tab-visual__wrap {
  max-height: 520px;
}

.tab-layout__wrap.is--dark .tab-visual__inner {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Le média du slider, en plein dans le cadre de l'onglet */
.tab-visual__media {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 16px;
}

/* Visuels plus grands que les cartes de 384px : on plafonne le texte */
.tab-visual__media .fviz {
  font-size: min(4.2cqi, 19px);
}

@media screen and (max-width: 767px) {
  .tab-visual__media { border-radius: 12px; }
}

/* ============================================
   PAGE MERCI (8 oct. 2026) : hero centré (règles partagées avec #blog-hero)
   + 3 étapes « La suite ». template-thanks.php
   ============================================ */
/* Hero sombre centré (cadre .hero-box-bg de l'accueil) : on annule
   l'alignement à gauche de .hero--img */
#thanks-hero.hero--img .hero-inner {
  align-items: center;
  text-align: center;
}

#thanks-hero.hero--img .hero-subtitle {
  margin: 0 auto;
}

#thanks-hero .hero-badge {
  color: rgba(248, 248, 248, 0.6);
}

#thanks-hero .hero-content-wrapper {
  padding-bottom: 120px;
}

#thanks-hero .hero-subtitle {
  text-wrap: balance;
}

@media (max-width: 767px) {
  #thanks-hero .hero-content-wrapper {
    padding-bottom: 72px;
  }
}

.thanks-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.thanks-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 28px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.thanks-step__nr {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  margin-bottom: 12px;
  border-radius: 100em;
  background: var(--green-900);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.thanks-step__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.thanks-step__desc {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

@media (max-width: 991px) {
  .thanks-steps { grid-template-columns: 1fr; }
}

/* ============================================
   COMPOSANT : DARK FRAME (section sombre arrondie, 3 oct. 2026)
   À utiliser pour toutes les sections sombres (actuelles et futures).
   Structure :
     <section class="dark-frame [ma-section]">
       <div class="dark-frame__inner is--dark-section">
         <div class="section-container">
           <div class="section-header section-header--split dark-frame__header">
             <h2 class="section-title">…</h2>
             <p class="section-subtitle">…</p>
           </div>
           … contenu (ex. .dark-frame__media, ou une grille de cartes)
         </div>
       </div>
     </section>
   - Section : inset 12px sur les côtés (8px mobile) ; le haut/bas suit le
     rythme site-wide (80px, surcharge globale en fin de feuille).
   - Cadre : --dark-section-bg (#1b1b1b depuis le 12 oct. 2026), rayon 30px, 160px de padding vertical, logos Axyrium
     blancs à 5 % centrés sur les coins haut gauche et bas droit.
   - is--dark-section sur le cadre : nav sombre + pas de traînée curseur au
     passage. Pas de dôme (les dômes visent des sections précises).
   - Variables : --dark-frame-bg, --dark-frame-radius, --dark-frame-pad,
     --dark-frame-logo (taille des logos) pour les variantes.
   ============================================ */
.dark-frame {
  padding: 80px 12px;
}

.dark-frame__inner {
  --dark-frame-bg: var(--dark-section-bg);
  --dark-frame-radius: 30px;
  --dark-frame-pad: 160px;
  --dark-frame-logo: 640px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--dark-frame-bg);
  border-radius: var(--dark-frame-radius);
  padding: var(--dark-frame-pad) 0;
  color: #F8F8F8;
}

/* Fond animé (initDarkFrameScale) : quand le JS a posé le calque, le fond
   du cadre passe sur .dark-frame__bg (sous les logos et le contenu) */
.dark-frame__inner.is--bg-anim {
  background: transparent;
}

.dark-frame__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: var(--dark-frame-bg);
  pointer-events: none;
  will-change: clip-path;
}

/* Les logos des coins passent sur le calque de fond : découpés avec lui */
.dark-frame__inner.is--bg-anim::before,
.dark-frame__inner.is--bg-anim::after {
  display: none;
}

.dark-frame__bg {
  overflow: hidden;
}

.dark-frame__bg::before,
.dark-frame__bg::after {
  content: '';
  position: absolute;
  width: var(--dark-frame-logo);
  height: var(--dark-frame-logo);
  background: url('assets/img/logo/axyrium-icon-white.svg') center/contain no-repeat;
  opacity: 0.05;
  pointer-events: none;
}

.dark-frame__bg::before {
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
}

.dark-frame__bg::after {
  right: 0;
  bottom: 0;
  transform: translate(50%, 50%);
}

.dark-frame__inner::before,
.dark-frame__inner::after {
  content: '';
  position: absolute;
  width: var(--dark-frame-logo);
  height: var(--dark-frame-logo);
  background: url('assets/img/logo/axyrium-icon-white.svg') center/contain no-repeat;
  opacity: 0.05;
  z-index: -1;
  pointer-events: none;
}

.dark-frame__inner::before {
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
}

.dark-frame__inner::after {
  right: 0;
  bottom: 0;
  transform: translate(50%, 50%);
}

/* En-tête : titre serif blanc à gauche, sous-titre gris aligné à droite.
   18px sous le titre + 32px de gap = 50px avant le contenu */
.dark-frame .section-header--split {
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  margin-bottom: 50px;
}

.dark-frame .section-title {
  font-family: 'Instrument Serif', var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 4.5vw, 3.6rem); /* 57.6px au max */
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #F8F8F8;
  max-width: 624px;
  margin: 0;
}

.dark-frame .section-subtitle {
  font-family: var(--font);
  font-size: calc(19px + 2px);
  font-weight: 400;
  line-height: 28px;
  text-align: right;
  color: rgba(248, 248, 248, 0.55);
  max-width: 480px;
  padding-top: 5.7px;
  margin: 0;
}

/* Image pleine largeur du conteneur (rayon 20px) */
.dark-frame__media {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: #2a2a2a;
}

.dark-frame__media picture,
.dark-frame__media img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 991px) {
  .dark-frame__inner { --dark-frame-pad: 100px; --dark-frame-radius: 24px; }
  .dark-frame .section-header--split { flex-direction: column; gap: 1rem; margin-bottom: 40px; }
  .dark-frame .section-subtitle { max-width: none; text-align: left; padding-top: 0; }
}

@media (max-width: 767px) {
  .dark-frame { padding-left: 8px; padding-right: 8px; }
  .dark-frame__inner { --dark-frame-pad: 64px; --dark-frame-radius: 20px; --dark-frame-logo: 320px; }
  .dark-frame__media { border-radius: 14px; }
}

/* ── Product Pré-achat : 3 cartes features (image portrait + titre + desc) ──
   Dans un .dark-frame (cadre, en-tête et logos : voir le composant ci-dessus). */
.prod-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.prod-features__card {
  min-width: 0;
}

.prod-features__media {
  position: relative;
  aspect-ratio: 1742 / 2536;
  overflow: hidden;
  border-radius: 16px;
  background: #e9e7e2;
  margin-bottom: 8px;
}

.prod-features__media picture,
.prod-features__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prod-features__title {
  font-family: var(--font);
  font-size: calc(20px + 2px);
  font-weight: 600;
  line-height: 26px;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  padding: 2.4px 0;
  margin: 0 0 4px;
}

.prod-features__desc {
  font-family: var(--font);
  font-size: calc(16px + 2px);
  line-height: 26px;
  color: var(--text-secondary);
  margin: 0;
}

/* Variante dans un .dark-frame (avant le 7 oct. 2026, les features étaient
   dans un cadre sombre) */
.dark-frame .prod-features__title { color: #F8F8F8; }
.dark-frame .prod-features__desc { color: rgba(248, 248, 248, 0.55); }

/* Fond clair : en-tête split comme les études de cas */
.prod-features__header {
  margin-bottom: 50px;
}
.prod-features__header .section-title {
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .prod-features__header {
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 40px;
  }
  .prod-features__header .section-subtitle {
    max-width: none;
  }
}

/* ── Product Pré-achat : Confidentialité (dans un .dark-frame, 7 oct. 2026) ──
   En-tête : kicker + titre à gauche, texte + lien Sécurité à droite (aligné
   en bas), puis 4 engagements en cartes. */
.prod-trust__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  margin-bottom: 56px;
}

.prod-trust__head-text {
  min-width: 0;
}

.dark-frame .prod-trust__kicker {
  margin-bottom: 28px;
  color: rgba(248, 248, 248, 0.5);
}

.dark-frame .prod-trust__heading {
  margin: 0;
}

.prod-trust__head-aside {
  flex: 0 1 400px;
  min-width: 0;
}

.prod-trust__lead {
  margin: 0;
  font-family: var(--font);
  font-size: calc(17px + 2px);
  line-height: 27px;
  color: rgba(248, 248, 248, 0.55);
}

.prod-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.prod-trust__item {
  min-width: 0;
  padding: 28px 24px 32px;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.prod-trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 40px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--green-300);
}

.prod-trust__title {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.2px;
  color: #F8F8F8;
  margin: 0 0 8px;
}

.prod-trust__desc {
  font-family: var(--font);
  font-size: 15px;
  line-height: 24px;
  color: rgba(248, 248, 248, 0.55);
  margin: 0;
}

.prod-trust__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: calc(15px + 2px);
  font-weight: 500;
  color: #F8F8F8;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s ease, gap 0.2s ease;
}

.prod-trust__link:hover {
  opacity: 1;
  gap: 12px;
}

@media (max-width: 991px) {
  .prod-trust__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 40px;
  }
  .prod-trust__head-aside {
    flex-basis: auto;
  }
  .prod-trust__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .prod-trust__grid {
    grid-template-columns: 1fr;
  }
  .prod-trust__icon {
    margin-bottom: 24px;
  }
}

@media (max-width: 767px) {
  .prod-features__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ── Product Pré-achat : énoncé du problème (v2, 3 oct. 2026) ──
   Phrase serif centrée (914px max, 57.6px / 105%) avec de petites photos
   arrondies glissées entre les mots, puis une ligne de réassurance. */
.prod-problem {
  padding: 80px 0; /* 80 + 80 = 160px entre sections (page Pré-achat, 3 oct. 2026) */
}

.prod-problem__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.prod-problem__text {
  font-family: 'Instrument Serif', var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.6rem); /* 57.6px au max */
  line-height: 105%;
  text-align: center;
  color: #1C1D20;
  max-width: 914px;
  margin: 0 auto;
  text-wrap: balance;
}

/* Photo inline : hauteur ~0.85em, ratio 1.6, centrée sur la ligne */
.prod-problem__pic {
  display: inline-block;
  width: 1.45em;
  height: 0.9em;
  margin: 0 0.06em;
  vertical-align: -0.12em;
  border-radius: 0.12em;
  overflow: hidden;
  background: var(--green-100, #e8efe9);
}

.prod-problem__pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prod-problem__note {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #1C1D20;
  text-align: center;
}

@media (max-width: 767px) {
  .prod-problem { padding: 50px 0; }
  .prod-steps,
  .prod-deep { padding: 50px 0; }
  .prod-problem__block { gap: 32px; }
  .prod-problem__text { line-height: 1.1; }
}


/* ============================================
   PRODUCT PRÉ-ACHAT : COMMENT ÇA MARCHE (7 oct. 2026)
   Timeline verticale centrée. Chaque étape = grille 3 colonnes
   [côté gauche | pastille sur la ligne | côté droit] ; les étapes impaires
   mettent la tuile icône + numéro à gauche et le texte à droite, les paires
   l'inverse. États posés par initStepTimeline (js/script.js) :
   data-status="active" (ligne passée) et data-current (étape courante :
   bande blanche, tuile foncée, texte à 100 %).
   Empilement : bande (::before, z 0) < ligne (z 1) < contenu (z 2).
   ============================================ */
.prod-how__header {
  margin-bottom: 72px;
}

.step-tl {
  position: relative;
  max-width: 56rem;
  margin: 0 auto;
}

.step-tl__line {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 0; /* top / height posés par le JS (du centre de la 1re pastille à la dernière) */
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
}

.step-tl__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--green-400), var(--green-600));
  border-radius: inherit;
  transform-origin: 50% 0;
  transform: scaleY(0);
}

.step-tl__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.step-tl__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  align-items: center;
  column-gap: 32px;
  padding: 32px 40px;
}

/* Bande de l'étape courante */
.step-tl__item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 24px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 24px rgba(0, 0, 0, 0.04);
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.625, 0.05, 0, 1);
}

.step-tl__item[data-current]::before {
  opacity: 1;
  transform: none;
}

.step-tl__media,
.step-tl__marker,
.step-tl__content {
  position: relative;
  z-index: 2;
  grid-row: 1;
}

.step-tl__marker {
  grid-column: 2;
  justify-self: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 1.5px solid rgba(0, 0, 0, 0.14);
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.step-tl__item[data-status="active"] .step-tl__marker {
  background-color: var(--green-600);
  border-color: var(--green-600);
}

.step-tl__item[data-current] .step-tl__marker {
  box-shadow: 0 0 0 6px rgba(76, 113, 69, 0.16);
}

/* Tuile icône + numéro */
.step-tl__media {
  display: flex;
  align-items: center;
  gap: 14px;
}

.step-tl__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.05);
  color: #1c1d20;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.step-tl__item[data-current] .step-tl__icon {
  background-color: #292929;
  border-color: #292929;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.12);
}

.step-tl__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 24px;
  padding: 0 8px;
  border-radius: 8px;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-size: calc(0.75rem + 2px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

/* Texte */
.step-tl__content {
  max-width: 24rem;
  opacity: 0.4;
  transition: opacity 0.4s ease;
}

.step-tl__item[data-status="active"] .step-tl__content {
  opacity: 0.65;
}

.step-tl__item[data-current] .step-tl__content {
  opacity: 1;
}

.step-tl__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-family: var(--font);
  font-size: calc(1.25rem + 2px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.step-tl__tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background-color: var(--green-100);
  color: var(--green-800);
  font-size: calc(0.6875rem + 2px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.step-tl__desc {
  margin: 0;
  font-size: calc(1rem + 2px);
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Étapes impaires : média à gauche (collé à la ligne), texte à droite */
.step-tl__item:nth-child(odd) .step-tl__media {
  grid-column: 1;
  justify-self: end;
}
.step-tl__item:nth-child(odd) .step-tl__content {
  grid-column: 3;
  justify-self: start;
}

/* Étapes paires : texte à gauche (aligné à droite), média à droite */
.step-tl__item:nth-child(even) .step-tl__content {
  grid-column: 1;
  justify-self: end;
  text-align: right;
}
.step-tl__item:nth-child(even) .step-tl__title {
  justify-content: flex-end;
}
.step-tl__item:nth-child(even) .step-tl__media {
  grid-column: 3;
  justify-self: start;
  flex-direction: row-reverse;
}

/* Mobile : ligne à gauche, média au-dessus du texte. :nth-child(n) donne la
   même spécificité que les règles odd/even du bureau pour les surcharger. */
@media (max-width: 767px) {
  .prod-how__header {
    margin-bottom: 48px;
  }
  .step-tl__list {
    gap: 12px;
  }
  .step-tl__item {
    grid-template-columns: 14px 1fr;
    grid-template-rows: auto auto;
    column-gap: 20px;
    row-gap: 16px;
    align-items: start;
    padding: 24px 20px;
  }
  .step-tl__line {
    left: 27px; /* padding 20px + moitié de la pastille 7px */
  }
  .step-tl__item:nth-child(n) .step-tl__marker {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }
  .step-tl__item:nth-child(n) .step-tl__media {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    flex-direction: row;
  }
  .step-tl__item:nth-child(n) .step-tl__content {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    text-align: left;
    max-width: none;
  }
  .step-tl__item:nth-child(n) .step-tl__title {
    justify-content: flex-start;
  }
  .step-tl__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
  }
}

/* ============================================
   CTA FINAL : FOND VERT + LOGOS AUX COINS (7 oct. 2026)
   Même principe que les logos du .dark-frame (icône Axyrium blanche à 5 %,
   centrée sur les coins haut-gauche et bas-droite), sur fond --green-900.
   Remplace la photo (cta-bg-v2-*, déclarée plus haut dans .cta-content) :
   pour revenir à la photo, supprimer ce bloc. La variante claire
   (.cta-content--light) n'est pas touchée.
   ============================================ */
.cta-content:not(.cta-content--light) {
  --cta-logo: 440px;
  isolation: isolate;
  background: var(--green-900);
  text-shadow: none;
}

.cta-content:not(.cta-content--light)::before,
.cta-content:not(.cta-content--light)::after {
  content: '';
  display: block;
  position: absolute;
  width: var(--cta-logo);
  height: var(--cta-logo);
  background: url('assets/img/logo/axyrium-icon-white.svg') center / contain no-repeat;
  opacity: 0.05;
  z-index: -1;
  pointer-events: none;
}

.cta-content:not(.cta-content--light)::before {
  left: 0;
  top: 0;
  bottom: auto;
  -webkit-mask-image: none; /* hérité des anciens rayons */
  mask-image: none;
  transform: translate(-50%, -50%);
}

.cta-content:not(.cta-content--light)::after {
  right: 0;
  bottom: 0;
  transform: translate(50%, 50%);
}

@media (max-width: 767px) {
  .cta-content:not(.cta-content--light) {
    --cta-logo: 260px;
    background: var(--green-900);
  }
}

/* ============================================
   FORMULAIRES : VALIDATION (site-wide, 7 oct. 2026)
   Styles d'après « Advanced Form Validation » (Osmo), palette du site.
   Markup complété par initFormValidation (js/script.js) : .form-field-group
   sur chaque [data-validate], .form-label, .form-field (conteneur relatif)
   avec .form-input + icônes .form-field-icon.is--success / .is--error
   (+ .form-field-chevron pour les <select>). États sur le groupe :
   .is--success / .is--error / .is--filled. Préfixe [data-form-validate]
   pour passer devant les anciens styles .contact-form__input (soulignés).
   ============================================ */
[data-form-validate] {
  --form-error: #E5484D;
  --form-border: rgba(0, 0, 0, 0.1);
  --form-border-focus: var(--green-600);
}

[data-form-validate] .form-field-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 0;
}

[data-form-validate] .form-label {
  display: block;
  width: 100%;
  margin: 0;
  font-size: calc(0.875rem + 2px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: #1c1d20;
}

[data-form-validate] .form-required {
  color: var(--form-error);
}

[data-form-validate] .form-optional {
  margin-left: 2px;
  font-weight: 400;
  opacity: 0.5;
}

[data-form-validate] .form-field {
  position: relative;
  width: 100%;
}

[data-form-validate] .form-field .wpcf7-form-control-wrap {
  display: block;
}

[data-form-validate] .form-input {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 14px 52px 14px 16px;
  border: 1px solid var(--form-border);
  border-radius: 12px;
  background: #ffffff;
  background-image: none;
  font: inherit;
  font-size: calc(1rem + 2px);
  font-weight: 500;
  line-height: 1.3;
  color: #1c1d20;
  outline: none;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-form-validate] .form-input::placeholder {
  color: rgba(0, 0, 0, 0.3);
  font-weight: 400;
}

[data-form-validate] .form-input:focus {
  border-color: var(--form-border-focus);
  box-shadow: 0 0 0 3px rgba(76, 113, 69, 0.12);
}

[data-form-validate] .form-input.is--textarea {
  min-height: 9em;
  resize: vertical;
}

[data-form-validate] select.form-input {
  padding-right: 80px;
  cursor: pointer;
}

[data-form-validate] select.form-input:has(option[value=""]:checked) {
  color: rgba(0, 0, 0, 0.3);
  font-weight: 400;
}

[data-form-validate] .form-field-icon,
[data-form-validate] .form-field-chevron {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  max-height: 52px;
  padding: 0 15px;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

[data-form-validate] .form-field-icon {
  opacity: 0;
  color: var(--green-500);
  transition: opacity 0.2s ease;
}

[data-form-validate] .form-field-icon.is--error {
  color: var(--form-error);
}

[data-form-validate] .form-field-icon.is--select {
  right: 28px;
}

[data-form-validate] .form-field-chevron {
  color: #1c1d20;
}

/* États */
[data-form-validate] [data-validate].is--error .form-input,
[data-form-validate] .form-input.wpcf7-not-valid {
  border-color: var(--form-error);
}

[data-form-validate] [data-validate].is--error .form-input:focus {
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.12);
}

[data-form-validate] [data-validate].is--error .form-field-icon.is--error,
[data-form-validate] [data-validate].is--error .radiocheck-field-icon.is--error,
[data-form-validate] [data-validate].is--success .form-field-icon.is--success,
[data-form-validate] [data-validate].is--success .radiocheck-field-icon.is--success {
  opacity: 1;
}

/* Contact Form 7 : la validation du site remplace ses bulles d'erreur */
[data-form-validate] .wpcf7-not-valid-tip {
  display: none;
}

/* Cases à cocher / boutons radio ([data-radiocheck-group]) */
[data-form-validate] .radiocheck-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

[data-form-validate] .radiocheck-field {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 0;
}

[data-form-validate] .radiocheck-field input {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

[data-form-validate] .radiocheck-label {
  flex-grow: 1;
  margin: 0;
  padding-left: 30px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  color: #1c1d20;
  cursor: pointer;
}

[data-form-validate] .radiocheck-custom {
  position: absolute;
  top: 1px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  background: #ffffff;
  color: transparent;
  pointer-events: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

[data-form-validate] .radiocheck-custom.is--radio {
  border-radius: 50%;
}

[data-form-validate] .radiocheck-custom svg {
  width: 24px;
  position: absolute;
}

[data-form-validate] .radio-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}

[data-form-validate] .radiocheck-field input:checked ~ .radiocheck-custom {
  background-color: var(--green-900);
  border-color: var(--green-900);
  color: #ffffff;
}

[data-form-validate] .radiocheck-field input:focus-visible ~ .radiocheck-custom {
  box-shadow: 0 0 0 3px rgba(76, 113, 69, 0.2);
}

[data-form-validate] [data-validate].is--error .radiocheck-custom {
  border-color: var(--form-error);
}

[data-form-validate] .radiocheck-field-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  opacity: 0;
  color: var(--green-500);
  pointer-events: none;
}

[data-form-validate] .radiocheck-field-icon.is--error {
  color: var(--form-error);
}

/* Liste déroulante personnalisée de la page Contact (.custom-select,
   remplace le <select> Sujet) : même boîte que les autres champs */
[data-form-validate] .form-field:has(.custom-select) .form-field-chevron {
  display: none;
}

[data-form-validate] .custom-select__trigger {
  padding: 14px 16px;
  border: 1px solid var(--form-border);
  border-radius: 12px;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-form-validate] .custom-select__trigger:hover {
  border-color: rgba(0, 0, 0, 0.2);
}

[data-form-validate] .custom-select.is-open .custom-select__trigger,
[data-form-validate] .custom-select:focus-visible .custom-select__trigger {
  border-color: var(--form-border-focus);
  box-shadow: 0 0 0 3px rgba(76, 113, 69, 0.12);
}

[data-form-validate] .custom-select:focus {
  outline: none;
}

[data-form-validate] .custom-select__value {
  line-height: 1.3;
  color: rgba(0, 0, 0, 0.3);
}

[data-form-validate] .custom-select__value.is-selected {
  font-weight: 500;
  color: #1c1d20;
}

[data-form-validate] [data-validate].is--error .custom-select__trigger {
  border-color: var(--form-error);
}

/* Groupe sans validation (ex. CV du formulaire de candidature) : même
   label, et bouton de fichier aux couleurs du site */
[data-form-validate] .contact-form__group:not([data-validate]) {
  gap: 8px;
}

[data-form-validate] .contact-form__group:not([data-validate]) > .contact-form__label {
  font-size: calc(0.875rem + 2px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: #1c1d20;
}

[data-form-validate] input[type="file"] {
  font: inherit;
  font-size: calc(0.875rem + 2px);
  color: rgba(0, 0, 0, 0.55);
}

[data-form-validate] input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 10px 16px;
  border: 1px solid var(--form-border);
  border-radius: 9999px;
  background: #ffffff;
  font: inherit;
  font-weight: 500;
  color: #1c1d20;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

[data-form-validate] input[type="file"]::file-selector-button:hover {
  border-color: rgba(0, 0, 0, 0.25);
}

/* Espacements : champs encadrés plus serrés que les anciens soulignés */
[data-form-validate] .contact-form__fields {
  gap: 20px;
}

[data-form-validate] .contact-form__row {
  gap: 16px;
}

/* Message de formulaire (anti-spam, erreurs globales) */
[data-form-validate] .form-notifcation {
  position: relative;
  width: 100%;
  margin-top: 16px;
  padding: 16px 52px 16px 18px;
  border: 1px solid currentColor;
  border-radius: 12px;
  color: var(--green-600);
  text-align: left;
}

[data-form-validate] .form-notifcation[hidden] {
  display: none;
}

[data-form-validate] .form-notifcation.is--error {
  color: var(--form-error);
}

[data-form-validate] .form-notification-bg {
  position: absolute;
  inset: 0;
  border-radius: 11px;
  background-color: currentColor;
  opacity: 0.08;
  pointer-events: none;
}

[data-form-validate] .form-notification-p {
  position: relative;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
}

[data-form-validate] .form-notification-icon {
  position: absolute;
  top: 50%;
  right: 0;
  width: 52px;
  padding: 0 15px;
  transform: translateY(-50%);
  pointer-events: none;
}

/* ============================================
   SLIDER DE FONCTIONNALITÉS (7 oct. 2026, d'après « Build your world, your
   way » de cosmos.so). Rangée à défilement natif : alignée sur le bord
   gauche du conteneur (--fs-inset), elle déborde jusqu'au bord droit de
   l'écran. Cartes de --fs-card (384px comme Cosmos, 80vw sur mobile) : visuel carré
   arrondi + titre + description. Boutons ronds précédent / suivant centrés
   sur la hauteur des visuels, masqués aux extrémités (initFeatSlider).
   ============================================ */
.feat-slider {
  --fs-card: 384px; /* = cosmos.so (480px avant, à la demande : même taille que Cosmos) */
  --fs-gap: 24px;
  /* 100 % = largeur du slider (écran, ou intérieur du cadre sombre) */
  --fs-inset: max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad)));
}

.feat-slider__heading {
  margin: 0 0 40px;
  text-align: left;
}

.feat-slider__viewport {
  position: relative;
}

.feat-slider__track {
  display: flex;
  gap: var(--fs-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-inline: var(--fs-inset);
  scroll-padding-inline: var(--fs-inset);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.feat-slider__track::-webkit-scrollbar {
  display: none;
}

.feat-slider__card {
  flex: 0 0 var(--fs-card);
  min-width: 0;
  scroll-snap-align: start;
}

.feat-slider__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 20px;
  background-color: #e9e7e2;
}

.feat-slider__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feat-slider__title {
  margin: 20px 0 6px;
  font-family: var(--font);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-wrap: balance;
}

.feat-slider__desc {
  margin: 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* Boutons : calque sur la hauteur des visuels, seuls les boutons captent la souris */
.feat-slider__nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--fs-card);
  pointer-events: none;
}

.feat-slider__btn {
  position: absolute;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  color: #1c1d20;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 0.25s ease, transform 0.2s ease;
}

.feat-slider__btn:hover {
  transform: scale(1.06);
}

.feat-slider__btn.is--prev {
  left: calc(var(--fs-inset) + 16px);
}

.feat-slider__btn.is--next {
  right: calc(var(--fs-inset) + 16px);
}

.feat-slider__btn[data-hidden] {
  opacity: 0;
  pointer-events: none;
}

/* ---- Visuels animés des cartes (7 oct. 2026) ----
   Mini-interfaces en HTML / CSS animées par initFeatVisuals (GSAP), à la
   manière de la carte « Hide AI » de cosmos.so. Tailles en em, et 1em =
   4.2 % de la largeur du visuel (container query) : le visuel garde ses
   proportions à 480px comme à 80vw. */
.feat-slider__media {
  position: relative;
  container-type: inline-size;
  background-color: #ebebee;
}

.fviz {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  font-family: var(--font);
  font-size: 4.2cqi; /* 16px sur une carte de 384px */
  color: #1c1d20;
  -webkit-user-select: none;
  user-select: none;
}

.fviz__ico {
  width: 1em;
  height: 1em;
  flex: none;
}

.fviz__doc,
.fviz__metrics,
.fviz__alert,
.fviz__report,
.fviz__note {
  background: #ffffff;
  border-radius: 0.9em;
  box-shadow: 0 0.05em 0.15em rgba(0, 0, 0, 0.04), 0 0.6em 1.6em rgba(0, 0, 0, 0.06);
}

.fviz__lines {
  display: flex;
  flex-direction: column;
  gap: 0.55em;
}

.fviz__lines > span {
  position: relative;
  display: block;
  height: 0.5em;
  border-radius: 0.25em;
  background: #e6e6ea;
}

/* 01 : scan du bilan + indicateurs */
.fviz__doc {
  position: relative;
  width: 18em;
  padding: 1em 1.1em 1.2em;
  overflow: hidden;
}

.fviz__doc-head {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 1em;
  font-size: calc(0.8em + 2px);
  font-weight: 500;
}

.fviz__file-ico {
  width: 1.25em;
  height: 1.25em;
  color: var(--green-700);
}

.fviz__file {
  flex: 1;
}

.fviz__status {
  position: relative;
  display: inline-grid;
  font-size: 0.9em;
}

.fviz__status > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  justify-content: flex-end;
  white-space: nowrap;
}

.fviz__status-busy {
  color: rgba(0, 0, 0, 0.45);
}

.fviz__status-done {
  color: var(--green-600);
  opacity: 0;
}

.fviz__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 2.6em;
  height: 1.6em;
  background: linear-gradient(180deg, rgba(131, 170, 123, 0) 0%, rgba(131, 170, 123, 0.28) 85%, rgba(98, 139, 89, 0.9) 100%);
  opacity: 0;
  pointer-events: none;
}

.fviz__metrics {
  width: 18em;
  margin: 0;
  padding: 0.4em 1.1em;
  list-style: none;
}

.fviz__metrics li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.6em 0;
  font-size: 0.82em;
}

.fviz__metrics li + li {
  border-top: 1px solid #efeff2;
}

.fviz__m-label {
  flex: 1;
  color: rgba(0, 0, 0, 0.55);
}

.fviz__m-val {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fviz__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  font-size: 0.85em;
}

.fviz__flag .fviz__ico {
  width: 1.05em;
  height: 1.05em;
}

.fviz__flag.is--ok {
  background: var(--green-100);
  color: var(--green-700);
}

.fviz__flag.is--warn .fviz__ico {
  width: 1.25em;
  height: 1.25em;
}

.fviz__flag.is--warn {
  background: #fdecec;
  color: #d93d42;
}

/* 02 : alertes empilées */
.fviz--alerts {
  gap: 0.55em;
}

/* Colonne aussi large que l'alerte la plus longue : toutes de même largeur */
.fviz__stack {
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  width: max-content;
}

.fviz__alert {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.85em 1.2em 0.85em 1em;
  font-size: 0.82em;
  white-space: nowrap;
  font-weight: 500;
}

.fviz__sev {
  flex: none;
  padding: 0.3em 0.65em;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 600;
}

.fviz__sev.is--high {
  background: #fdecec;
  color: #c9363b;
}

.fviz__sev.is--mid {
  background: #fdf3e2;
  color: #a86a12;
}

.fviz__pill {
  margin-top: 0.5em;
  padding: 0.6em 1.1em;
  border-radius: 999px;
  background: var(--dark-section-bg);
  color: #ffffff;
  font-size: 0.8em;
  font-weight: 500;
}

/* 03 : annotation de l'expert */
.fviz--expert {
  gap: 0;
}

.fviz__report {
  width: 18em;
  padding: 1.1em 1.2em 1.3em;
}

.fviz__report-title {
  display: block;
  margin-bottom: 1em;
  font-size: 0.8em;
  font-weight: 600;
}

.fviz__hl-line {
  background: #e6e6ea;
}

.fviz__hl {
  position: absolute;
  inset: -0.35em -0.3em;
  border-radius: 0.3em;
  background: rgba(163, 193, 155, 0.55);
  transform-origin: left center;
  transform: scaleX(0);
}

.fviz__note {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  width: 16.5em;
  margin: -0.8em 0 0 3em;
  padding: 0.85em 1em;
  border-top-left-radius: 0.25em;
  position: relative;
  z-index: 1;
}

.fviz__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: var(--green-900);
  color: #ffffff;
}

.fviz__avatar svg {
  width: 1.1em;
  height: 1.1em;
}

.fviz__note-body {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  font-size: 0.8em;
  line-height: 1.35;
}

.fviz__note-who {
  font-weight: 600;
}

.fviz__note-t {
  color: rgba(0, 0, 0, 0.6);
}

.fviz__stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 1.1em;
  padding: 0.55em 1em;
  border: 1.5px solid var(--green-600);
  border-radius: 999px;
  background: var(--green-100);
  color: var(--green-700);
  font-size: 0.8em;
  font-weight: 600;
}

/* ---- Visuels : éléments des engagements de confidentialité ---- */
.fviz__lockbadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 0.45em;
  background: var(--green-100);
  color: var(--green-700);
}

.fviz__progress {
  height: 0.4em;
  margin-top: 1em;
  border-radius: 0.2em;
  background: #e6e6ea;
  overflow: hidden;
}

.fviz__progress > span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green-500), var(--green-300));
  transform-origin: left center;
  transform: scaleX(0);
}

.fviz__progress-label {
  display: inline-grid;
  margin-top: 0.6em;
  font-size: calc(0.75em + 2px);
  font-weight: 500;
}

.fviz__progress-label > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

.fviz__progress-label > span + span {
  color: var(--green-600);
}

.fviz__chips {
  display: flex;
  gap: 0.5em;
}

.fviz__chip,
.fviz__member,
.fviz__core,
.fviz__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.5em 0.85em;
  border-radius: 0.6em;
  background: #ffffff;
  font-size: calc(0.78em + 2px);
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 0.05em 0.15em rgba(0, 0, 0, 0.04), 0 0.4em 1em rgba(0, 0, 0, 0.05);
}

.fviz__chip .fviz__ico,
.fviz__member .fviz__ico {
  color: var(--green-500);
}

.fviz--access {
  gap: 0.9em;
}

.fviz__core {
  padding: 0.75em 1.4em;
  border-radius: 999px;
  border: 1.5px solid var(--green-500);
  font-size: calc(0.85em + 2px);
  font-weight: 600;
}

.fviz__members {
  display: flex;
  gap: 0.5em;
}

.fviz__member.is--denied {
  color: #d93d42;
}

.fviz__member.is--denied .fviz__ico {
  color: inherit;
}

.fviz__label {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: calc(0.7em + 2px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

.fviz__settings {
  width: 18em;
  padding: 0.3em 1em;
  border-radius: 0.9em;
  background: #ffffff;
  box-shadow: 0 0.05em 0.15em rgba(0, 0, 0, 0.04), 0 0.6em 1.6em rgba(0, 0, 0, 0.06);
}

.fviz__setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8em;
  padding: 0.8em 0;
  font-size: calc(0.8em + 2px);
  font-weight: 500;
}

.fviz__setting + .fviz__setting {
  border-top: 1px solid #efeff2;
}

.fviz__setting.is--off > span:first-child {
  opacity: 0.55;
}

.fviz__switch {
  position: relative;
  flex: none;
  width: 2.2em;
  height: 1.25em;
  border-radius: 1em;
  background: #d9d9de;
  transition: background-color 0.3s ease;
}

.fviz__switch::after {
  content: '';
  position: absolute;
  top: 0.15em;
  left: 0.15em;
  width: 0.95em;
  height: 0.95em;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fviz__switch[data-on="1"] {
  background: var(--green-500);
}

.fviz__switch[data-on="1"]::after {
  transform: translateX(0.95em);
}

.fviz__tag {
  padding: 0.3em 0.65em;
  border-radius: 999px;
  background: #fdecec;
  box-shadow: none;
  color: #c9363b;
  font-size: calc(0.85em + 0.3px); /* parent déjà +2px : 0.85 × (P−2) + 2 */
  font-weight: 600;
}

.fviz__btn-del {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 0.95em;
  border-radius: 0.6em;
  background: #fdecec;
  color: #c9363b;
  font-size: calc(0.8em + 2px);
  font-weight: 600;
}

.fviz__meta {
  display: flex;
  justify-content: space-between;
  margin-top: 0.6em;
  font-size: calc(0.72em + 2px);
  color: rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.fviz--lock .fviz__doc,
.fviz--erase .fviz__doc {
  width: 17em;
}

/* ---- Variante sombre (slider dans un .dark-frame) ---- */
:is(.feat-slider, .tab-layout__wrap).is--dark .feat-slider__media {
  background-color: rgba(255, 255, 255, 0.05);
}

:is(.feat-slider, .tab-layout__wrap).is--dark .feat-slider__title {
  color: #F8F8F8;
}

:is(.feat-slider, .tab-layout__wrap).is--dark .feat-slider__desc {
  color: rgba(248, 248, 248, 0.55);
}

:is(.feat-slider, .tab-layout__wrap).is--dark .fviz {
  color: #F8F8F8;
}

:is(.feat-slider, .tab-layout__wrap).is--dark :is(.fviz__doc, .fviz__settings, .fviz__chip, .fviz__member, .fviz__core) {
  background: #2c2c2c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0.6em 1.6em rgba(0, 0, 0, 0.35);
}

:is(.feat-slider, .tab-layout__wrap).is--dark .fviz__core {
  box-shadow: none;
  background: rgba(98, 139, 89, 0.18);
}

:is(.feat-slider, .tab-layout__wrap).is--dark .fviz__lines > span,
:is(.feat-slider, .tab-layout__wrap).is--dark .fviz__progress {
  background: rgba(255, 255, 255, 0.1);
}

:is(.feat-slider, .tab-layout__wrap).is--dark .fviz__setting + .fviz__setting {
  border-top-color: rgba(255, 255, 255, 0.08);
}

:is(.feat-slider, .tab-layout__wrap).is--dark .fviz__switch {
  background: rgba(255, 255, 255, 0.18);
}

:is(.feat-slider, .tab-layout__wrap).is--dark .fviz__switch[data-on="1"] {
  background: var(--green-500);
}

:is(.feat-slider, .tab-layout__wrap).is--dark .fviz__meta {
  color: rgba(248, 248, 248, 0.5);
}

:is(.feat-slider, .tab-layout__wrap).is--dark :is(.fviz__lockbadge) {
  background: rgba(98, 139, 89, 0.2);
  color: var(--green-300);
}

:is(.feat-slider, .tab-layout__wrap).is--dark :is(.fviz__chip, .fviz__member) .fviz__ico,
:is(.feat-slider, .tab-layout__wrap).is--dark .fviz__progress-label > span + span {
  color: var(--green-300);
}

:is(.feat-slider, .tab-layout__wrap).is--dark :is(.fviz__tag, .fviz__btn-del) {
  background: rgba(229, 72, 77, 0.16);
  color: #ff8a8d;
}

:is(.feat-slider, .tab-layout__wrap).is--dark .fviz__member.is--denied {
  color: #ff8a8d;
  background: rgba(229, 72, 77, 0.1);
}

/* Espacement : la rangée de cartes sous l'en-tête du cadre */
.prod-trust .feat-slider {
  margin-top: 0;
}

@media (max-width: 767px) {
  .feat-slider {
    --fs-card: 80vw;
    --fs-gap: 16px;
  }
  .feat-slider__heading {
    margin-bottom: 28px;
  }
  .feat-slider__title {
    font-size: 20px;
  }
}

/* ============================================
   ESPACEMENT VERTICAL SITE-WIDE (3 oct. 2026)
   Règle : chaque section a 80px de padding haut et bas → 160px entre deux
   sections. Surcharge globale en fin de feuille (spécificité (0,2,2), au-dessus
   des règles par section). Exclus : les heros (100vh, contenu centré ; le hero
   split garde son margin-bottom 80px), les heros d'article / légaux
   (dégagement sous la nav), la page signup, le marquee curseur et le CTA final
   (padding 0 + margin-bottom 60px verrouillé : il reçoit seulement 80px en haut).
   Section qui suit une section sombre : le dôme (.shape-round.top, 10vw de
   haut, injecté par initStandaloneDomes) couvre le haut de la section, on garde
   80px de dégagement en plus (160px) pour que le contenu ne passe pas dessous.
   Mobile (< 768px) : 50px partout, 90px sous un dôme.
   ============================================ */
main[data-barba="container"] > section:not(.hero, .article-hero, .legal-hero, .signup-page, .cursor-marquee, .final-cta) {
  padding-top: 80px;
  padding-bottom: 80px;
}
.final-cta {
  padding-top: 80px;
}
:is(.about-timeline:not(.is--light), .docs-categories, .product-security.is--dark-section, .product-highlight.is--dark-section, .how-it-works.is--dark-section, .home-quebec, .is--dark-section):not(.hero) + section:not(.is--dark-section, .final-cta, .hero) {
  padding-top: 160px;
}
@media (max-width: 767px) {
  main[data-barba="container"] > section:not(.hero, .article-hero, .legal-hero, .signup-page, .cursor-marquee, .final-cta) {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .final-cta {
    padding-top: 50px;
  }
  :is(.about-timeline:not(.is--light), .docs-categories, .product-security.is--dark-section, .product-highlight.is--dark-section, .how-it-works.is--dark-section, .home-quebec, .is--dark-section):not(.hero) + section:not(.is--dark-section, .final-cta, .hero) {
    padding-top: 90px;
  }
}


/* ============================================
   GRILLE 12 COLONNES (9 oct. 2026)
   Une seule grille pour tout le site : 12 colonnes dans le conteneur
   (--container-max 1200px, --container-pad 24px → contenu de 1152px),
   gouttière --grid-gutter (24px, 16px mobile). À 1440px : colonnes de 74px,
   une nouvelle colonne tous les 98px, contenu de x = 144 à 1296.
   Règles :
   - Grilles égales (2, 3, 4 colonnes) : écart horizontal = gouttière,
     donc chaque bord tombe sur la grille (6+6, 4+4+4, 3+3+3+3).
   - Texte + visuel : texte sur 5 colonnes, 1 colonne vide, visuel sur 6.
     Heros : 6 + 6.
   - Contenu + barre latérale (légal, contact) : 8 colonnes + 3 à droite.
   - Colonnes de lecture centrées (article, FAQ, offre d'emploi) : 8
     colonnes ; frise des étapes : 10 colonnes.
   - Sections pleine largeur (cadre sombre du Blog) : grille « breakout »,
     colonnes alignées sur la page, visuel jusqu'au bord du cadre.
   Placements de colonnes à partir de 992px (en dessous, les grilles
   passent en 1 ou 2 colonnes comme avant). Les écarts verticaux (row-gap)
   ne changent pas.
   Superposition de contrôle : Maj + G, ou ?grid dans l'URL (initGridOverlay).
   Backup : backups/style-before-12col-grid-2026-10-09.css
   ============================================ */
:root {
  --grid-cols: 12;
  --grid-gutter: 24px;
  /* Largeur d'une colonne (exacte dès que le conteneur atteint 1200px) */
  --grid-col: calc((min(100vw, var(--container-max)) - 2 * var(--container-pad) - (var(--grid-cols) - 1) * var(--grid-gutter)) / var(--grid-cols));
  --grid-span-8: calc(8 * var(--grid-col) + 7 * var(--grid-gutter));
  --grid-span-10: calc(10 * var(--grid-col) + 9 * var(--grid-gutter));
}

@media (max-width: 767px) {
  :root { --grid-gutter: 16px; }
}

/* Superposition de contrôle (Maj + G) */
.ax-grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  display: none;
}

html.ax-grid-on .ax-grid-overlay {
  display: block;
}

.ax-grid-overlay__inner {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  height: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.ax-grid-overlay__inner > span {
  background: rgba(248, 65, 49, 0.04);
  box-shadow: inset 1px 0 rgba(248, 65, 49, 0.2), inset -1px 0 rgba(248, 65, 49, 0.2);
}

/* ---- Bords extérieurs : les heros sur le même conteneur que les sections ---- */
@media (min-width: 1024px) {
  .hero-content-wrapper {
    max-width: var(--container-max);
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }
}

/* Heros légaux : la ligne du bas (border-bottom du wrapper, dessinée par
   le reveal des lignes) suit le contenu, de la 1re à la 12e colonne */
.legal-hero .hero-content-wrapper {
  width: calc(100% - 2 * var(--container-pad));
  max-width: calc(var(--container-max) - 2 * var(--container-pad));
  padding-left: 0;
  padding-right: 0;
}

/* Carte du hero de l'accueil : bord droit sur la dernière colonne */
.hero--img .hero-card-wrap {
  right: max(var(--hero-inset), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
}

/* ---- Grilles égales : écart horizontal = gouttière (toutes largeurs) ---- */
.about-hero__grid,
.product-uc__grid,
.plan-grid,
.prod-features__grid,
.messaging-features__grid,
.messaging-compare__grid,
.ai-capabilities__grid,
.blog-grid,
.contact-form__row,
.product-security__grid,
.careers-positions__grid,
.about-timeline__grid,
.prod-steps__grid,
.article-related__grid,
.thanks-steps {
  column-gap: var(--grid-gutter);
}

/* Champs côte à côte du formulaire (règle de validation plus spécifique) */
[data-form-validate] .contact-form__row {
  column-gap: var(--grid-gutter);
}

/* Étapes Tâches IA : 3 tiers de la grille ; les flèches (2e et 4e enfants)
   sortent du flux et se centrent dans les gouttières */
@media (min-width: 901px) {
  .ai-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--grid-gutter);
    position: relative;
  }
  .ai-step__divider {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
  }
  .ai-step__divider:nth-child(2) { left: calc((100% - 2 * var(--grid-gutter)) / 3 + var(--grid-gutter) / 2); }
  .ai-step__divider:nth-child(4) { left: calc(2 * (100% - 2 * var(--grid-gutter)) / 3 + 1.5 * var(--grid-gutter)); }
}

/* ---- Colonnes centrées (desktop seulement : sur mobile, 8 colonnes ne
   font que ~220px, les largeurs d'origine s'appliquent) ---- */
@media (min-width: 992px) {
  /* Lecture : 8 colonnes */
  .article-hero__title-row,
  .article-body__content,
  .article-footer__inner,
  .job-single__inner,
  .faq-page__inner {
    max-width: var(--grid-span-8);
  }

  /* Frise des étapes et comparatif Messagerie : 10 colonnes */
  .step-tl,
  .messaging-compare__grid {
    max-width: var(--grid-span-10);
  }
}

/* ---- Placements sur 12 colonnes (desktop) ---- */
@media (min-width: 992px) {
  .home-quebec__grid,
  .messaging-showcase__grid,
  .ai-showcase__grid,
  .legal-layout,
  .contact-layout,
  .product-faq__layout,
  .tab-layout__wrap,
  .blog-latest__card,
  .preview-item__row {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    column-gap: var(--grid-gutter);
  }

  /* Texte + visuel : texte 5 colonnes, visuel 6, une colonne d'air */
  .home-quebec__text { grid-column: 1 / span 5; }
  .home-quebec__map { grid-column: 7 / span 6; }

  /* Image à gauche, texte à droite (orientation actuelle conservée) */
  .messaging-showcase__image,
  .ai-showcase__image { grid-column: 1 / span 6; }
  .messaging-showcase__content,
  .ai-showcase__content { grid-column: 8 / span 5; }
  /* Variante --reversed (direction: rtl, la colonne 1 est à droite) */
  .messaging-showcase__grid--reversed .messaging-showcase__image { grid-column: 7 / span 6; }
  .messaging-showcase__grid--reversed .messaging-showcase__content { grid-column: 1 / span 5; }

  /* Contenu 8 colonnes + barre latérale 3 colonnes à droite */
  .legal-layout > :first-child,
  .contact-layout > :first-child { grid-column: 1 / span 8; }
  .legal-layout > :last-child,
  .contact-layout > :last-child { grid-column: 10 / span 3; }
  .legal-content { max-width: none; }

  /* FAQ (gabarit commun) : titre 5 colonnes, questions 7 colonnes */
  .product-faq__title { grid-column: 1 / span 5; max-width: none; }
  .product-faq__wrap { grid-column: 6 / span 7; max-width: none; }

  /* Onglets autoplay : liste 5 colonnes, visuel 6 colonnes */
  .tab-layout__wrap > .tab-layout__col { width: auto; }
  .tab-layout__wrap > .tab-layout__col:first-child { grid-column: 1 / span 5; padding-right: 0; }
  .tab-layout__wrap > .tab-layout__col:last-child { grid-column: 7 / span 6; }

  /* Carte verte « Dernière mise à jour » (Journal) : 6 + 6 */
  .blog-latest__card > .blog-latest__text { grid-column: 1 / span 6; }
  .blog-latest__card > .blog-latest__visual { grid-column: 7 / span 6; }

  /* Listes « mises à jour » (accueil, Journal) : 6 / 2 / 2 / 2 */
  .preview-item__row > .preview-item__col { width: auto; max-width: none; flex: none; }
  .preview-item__row > .preview-item__col.is--large { grid-column: span 6; }
  .preview-item__row > .preview-item__col.is--small,
  .preview-item__row > .preview-item__col.is--medium { grid-column: span 2; }

  /* Cadre sombre pleine largeur (Blog) : grille « breakout ». Une piste
     souple de chaque côté + 12 colonnes centrées sur celles de la page
     (largeur du contenu calculée depuis la largeur du cadre, en cqw). */
  .blog-latest .dark-frame__inner {
    container-type: inline-size;
  }
  .blog-latest__grid {
    --bk-content: min(var(--container-max) - 2 * var(--container-pad), 100cqw + 24px - 2 * var(--container-pad));
    grid-template-columns: minmax(0, 1fr) repeat(12, calc((var(--bk-content) - 11 * var(--grid-gutter)) / 12)) minmax(0, 1fr);
    column-gap: var(--grid-gutter);
  }
  .blog-latest__grid > .blog-latest__text { grid-column: 2 / span 6; padding: 0; }
  .blog-latest__grid > .blog-latest__visual { grid-column: 8 / -1; }
}


/* ---- En-têtes séparés (titre à gauche, texte à droite) sur la grille
   (9 oct. 2026) : titre sur 7 colonnes, texte des colonnes 8 à 12,
   toujours aligné à gauche (y compris dans les cadres sombres). Sous
   992px : titre puis texte, empilés. ---- */
.section-header--split .section-subtitle,
.dark-frame .section-subtitle,
.prod-trust__lead {
  text-align: left;
}

@media (min-width: 992px) {
  /* :is() prend la spécificité la plus forte (0,2,0) : passe devant le
     gap: 48px de .dark-frame .section-header--split */
  :is(.section-header--split, .dark-frame .section-header--split, .prod-trust__head) {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    column-gap: var(--grid-gutter);
  }
  .section-header--split > .section-title,
  .prod-trust__head-text { grid-column: 1 / span 7; }
  .section-header--split > .section-subtitle,
  .prod-trust__head-aside {
    grid-column: 8 / span 5;
    justify-self: stretch;
    width: auto;
    max-width: none;
    margin-left: 0; /* .section-subtitle a margin: 0 auto (centrait le texte dans sa zone) */
    margin-right: 0;
  }
  .prod-trust__head-aside { align-self: end; }
}

@media (max-width: 991px) {
  .section-header--split {
    flex-direction: column;
    gap: 1rem;
  }
  .section-header--split .section-subtitle {
    max-width: none;
  }
}


/* Hero Pré-achat (9 oct. 2026) : texte sur les colonnes 1 à 6, carte
   « Recommandation de prix » sur les colonnes 8 à 12 (5 colonnes, bord
   droit sur la grille) au lieu de 450px calés à droite */
@media (min-width: 992px) {
  #product-hero.product-hero--pre .about-hero__grid {
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  }
  #product-hero.product-hero--pre .about-hero__text { grid-column: 1 / span 6; }
  #product-hero.product-hero--pre .about-hero__image { grid-column: 8 / span 5; }
  #product-hero.product-hero--pre .product-hero__img {
    width: 100%;
  }
}


/* ---- Header sur la grille (9 oct. 2026) ----
   La barre fait la largeur du conteneur (1200px, soit 24px de plus que le
   contenu de chaque côté) et son padding est calculé pour que le logo
   démarre sur la colonne 1 et les boutons finissent sur la colonne 12,
   à toutes les largeurs (bord de la barre : 1px, compté). Avant : barre de
   80em (1280px), logo à x = 104 au lieu de 144 à 1440px. */
@media screen and (min-width: 992px) {
  /* 12 oct. 2026 : même espace tout autour des boutons (13px du bord de la
     barre, bordure de 1px comprise) : la barre déborde du contenu de 13px
     de chaque côté (1178px à 1440 au lieu de 1200), hauteur auto. */
  .mega-nav {
    --nav-gap: 12px;
    --nav-content-edge: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
    --nav-bar-edge: max(8px, calc(var(--nav-content-edge) - var(--nav-gap) - 1px));
    left: var(--nav-bar-edge);
    right: var(--nav-bar-edge);
    /* bord du contenu de la page − bord de la barre − 1px de bordure */
    --nav-pad-x: calc(var(--nav-content-edge) - var(--nav-bar-edge) - 1px);
  }
  .mega-nav .mega-nav__bar {
    max-width: none;
  }
  /* Le logo n'a pas de fond comme les boutons : 8px d'air en plus pour ne
     pas paraître collé au bord (21px du bord de la barre) */
  .mega-nav .mega-nav__bar-logo {
    margin-left: 8px;
  }
  .mega-nav .mega-nav__container {
    height: auto;
    /* -1px : un élément de la barre fait 43px (boutons 41px) ; ainsi les
       boutons sont à 13px du bord en haut et en bas aussi */
    padding: calc(var(--nav-gap) - 1px) var(--nav-pad-x);
  }
  /* Menu déroulant : icônes et libellés de la 1re colonne à 24px du bord,
     comme la carte de droite (24px du bord droit, en haut et en bas). Les
     liens ont 0.75em de padding pour leur fond au survol (12 oct. 2026). */
  .mega-nav .mega-nav__dropdown-inner > .mega-nav__panel-col:first-child {
    padding-left: calc(24px - 0.75em);
  }
}

/* Mobile : barre pleine largeur sans bordure latérale, même marge que la page */
@media screen and (max-width: 991px) {
  .mega-nav .mega-nav__container {
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }
}


/* Texte de la barre du header plus grand (9 oct. 2026) : liens et boutons
   14px → 16px sur desktop. Menus déroulants et menu mobile inchangés. */
@media screen and (min-width: 992px) {
  .mega-nav .mega-nav__bar-link-label {
    font-size: calc(1rem + 2px);
  }
  .mega-nav .mega-nav__bar-cta {
    font-size: 1rem; /* boutons du header : taille d'avant, sans le +2px */
  }
}


/* ============================================
   ÉQUIPE : CARTES PORTRAIT (10 oct. 2026, page À propos)
   template-parts/team-cards.php. Sur la grille (11 oct. 2026) : titre
   colonnes 1 à 5, les deux photos ensemble colonnes 6 à 12 (7 colonnes,
   comme les questions de la FAQ), gouttière entre elles (~319 × 478 à
   1440px). Titre : style des titres de FAQ.
   ============================================ */
.team-cards__layout {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 32px;
}

.team-cards__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gutter);
}

.team-cards__title {
  margin: 0;
  font-family: 'Instrument Serif', var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 4.5vw, 3.6rem); /* 57.6px au max */
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #1C1D20;
  text-align: left;
}

.team-card__photo {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 20px;
  overflow: hidden;
  background: #3a3a3a;
  display: flex;
  align-items: flex-end;
}

.team-card__media,
.team-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.team-card__img {
  object-fit: cover;
}

/* Voile en bas pour la lisibilité du nom */
.team-card__photo::after {
  content: '';
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent);
  pointer-events: none;
}

.team-card__info {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 28px;
}

.team-card__name {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: var(--font);
  font-size: calc(22px + 2px);
  font-weight: 600;
  line-height: 1;
  color: #fff;
}

.team-card__verified {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--accent); /* pistache (13 oct. 2026, avant #628B59) : posé sur la photo assombrie */
}

.team-card__role {
  margin: 0;
  font-family: var(--font);
  font-size: calc(17px + 2px);
  font-weight: 400;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.55);
}

@media (min-width: 992px) {
  .team-cards__layout {
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    column-gap: var(--grid-gutter);
    align-items: start;
  }
  .team-cards__title { grid-column: 1 / span 5; padding-bottom: 18px; }
  .team-cards__list { grid-column: 6 / span 7; }
}

@media (max-width: 600px) {
  .team-cards__list { grid-template-columns: 1fr; }
  .team-card { max-width: 420px; }
  .team-card__info { padding: 24px; }
}


/* ============================================
   ATTRIBUTION (11 oct. 2026) : « Écrit par [photo] Nom »
   Généré par axyrium_attribution() (functions.php). Inter 15px / 28px,
   libellé 55 % noir, nom 600 noir, photo ronde 26px, 8px d'écart. Variante sombre automatique dans .is--dark-section.
   ============================================ */
.attribution {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font); /* Inter (11 oct. 2026, avant Inter Tight) */
  font-size: calc(15px + 2px);
  line-height: 28px;
}

.attribution__label {
  font-weight: 400;
  color: rgba(0, 0, 0, 0.55);
}

.attribution__avatar {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  background: #d9d9d9;
}

.attribution__avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green-900);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.attribution__name {
  font-weight: 600;
  color: #000;
}

.is--dark-section .attribution__label { color: rgba(255, 255, 255, 0.55); }
.is--dark-section .attribution__name { color: #fff; }

/* Article : sous le titre */
/* Article : rangée d'infos sous le titre (11 oct. 2026, maquette).
   « Écrit par » / « Catégorie » / « Date » / « Lecture » (libellé gris +
   valeur en gras, style .attribution) sur les colonnes 1, 4, 7 et 10, filet sur toute la
   largeur dessous. Mobile : empilés. */
.article-hero__meta-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 44px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}

.article-hero__meta-item {
  margin: 0;
  min-height: 28px;
  display: flex;
  align-items: center;
}

@media (min-width: 992px) {
  .article-hero__meta-row {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    column-gap: var(--grid-gutter);
    margin-top: 52px;
  }
  .article-hero__meta-item.is--author { grid-column: 1 / span 3; }
  .article-hero__meta-item.is--category { grid-column: 4 / span 3; }
  .article-hero__meta-item.is--date { grid-column: 7 / span 3; }
  .article-hero__meta-item.is--read { grid-column: 10 / span 3; }
}

.article-hero:has(.article-hero__meta-row) {
  padding-bottom: 72px;
}

@media (max-width: 767px) {
  .article-hero:has(.article-hero__meta-row) {
    padding-bottom: 36px;
  }
}


/* Photo de profil devant les courriels des auteurs (11 oct. 2026,
   axyrium_author_email_map dans functions.php) : pastille ronde dans le
   texte, même photo que l'attribution. */
.has-email-avatar {
  white-space: nowrap;
}

.email-avatar {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  margin-right: 0.35em;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: -0.28em;
  background: #d9d9d9;
}

.email-avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* inline-flex : aligné sur la ligne de base de « WN » (pas sur son bas
     comme l'image) ; valeur mesurée pour centrer la pastille sur le texte */
  vertical-align: 0.31em;
  background: var(--green-900);
  color: #fff;
  font-size: 0.55em;
  width: 2.27em;  /* 1.25em du texte parent */
  height: 2.27em;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}


/* ============================================
   PAGE BLOG : REFONTE DE L'INDEX (12 oct. 2026)
   template-blog.php. 1) hero éditorial (mot en italique + nombre
   d'articles), 2) cadre « À la une » vedette + liste, 3) archive en
   rangées (composant .preview-* de l'accueil) avec filtres.
   ============================================ */

/* 1. Hero : le mot entre ** du titre en Instrument Serif italique */
#blog-hero .hero-title-serif {
  font-style: italic;
}

/* Nombre d'articles en exposant, accroché en haut à droite du titre */
.blog-hero__title-wrap {
  position: relative;
  display: inline-block;
}

.blog-hero__count {
  position: absolute;
  top: 0.35em;
  right: 0;
  transform: translateX(calc(100% + 6px));
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  color: var(--text-tertiary);
}

@media (max-width: 767px) {
  /* Mobile : sous le titre, centré, au lieu d'être collé au bord */
  .blog-hero__title-wrap { display: block; }
  .blog-hero__count {
    position: static;
    display: block;
    transform: none;
    margin-top: 10px;
    font-size: 0.875rem;
  }
}

/* 2. À la une : image (colonnes 1 à 7) + vedette et liste (9 à 12) */
.blog-latest .dark-frame__inner {
  --dark-frame-pad: 80px;
}

.blog-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.blog-feature__media {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: #2a2a2a;
}

.blog-feature__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.625, 0.05, 0, 1);
}

.blog-feature__media:hover img {
  transform: scale(1.03);
}

.blog-feature__side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}

.blog-feature .blog-feature__kicker {
  display: block;
  margin-bottom: 16px;
  color: rgba(248, 248, 248, 0.5);
}

.blog-feature__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(248, 248, 248, 0.5);
}

.blog-feature__meta span + span::before {
  content: '·';
  margin-right: 10px;
}

.blog-feature__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 2.6vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #F8F8F8;
}

.blog-feature__title a {
  color: inherit;
  text-decoration: none;
}

.blog-feature__excerpt {
  margin: 16px 0 0;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(248, 248, 248, 0.55);
}

.blog-feature__btn {
  margin-top: 28px;
}

.blog-feature__list ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.blog-feature__list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.blog-feature__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 0;
  text-decoration: none;
}

.blog-feature__item-meta {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(248, 248, 248, 0.45);
}

.blog-feature__item-title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(248, 248, 248, 0.9);
  transition: color 0.2s ease;
}

.blog-feature__item:hover .blog-feature__item-title {
  color: var(--green-300);
}

@media (min-width: 992px) {
  .blog-feature {
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    column-gap: var(--grid-gutter);
    align-items: stretch;
  }
  .blog-feature__media { grid-column: 1 / span 7; aspect-ratio: auto; min-height: 520px; }
  .blog-feature__side { grid-column: 9 / span 4; }
}

@media (max-width: 767px) {
  .blog-latest .dark-frame__inner { --dark-frame-pad: 48px; }
  .blog-feature__title { font-size: 1.8rem; }
}

/* 3. Archive en rangées */
.blog-archive__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 40px;
}

.blog-archive__title {
  margin: 0;
  text-align: left;
}

.blog-archive .filter-buttons {
  margin: 0;
}

/* Filtres (initFilterBasic) appliqués aux rangées */
.blog-archive .preview-item[data-filter-status="not-active"] {
  display: none;
}

.blog-archive .preview-item[data-filter-status="transition-out"] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Archive sur tablette / mobile : ligne d'infos « Catégorie · Date · Lecture »
   dans l'ordre et sans retour à la ligne */
@media (max-width: 991px) {
  .blog-archive .preview-item__row {
    column-gap: 0;
  }
  .blog-archive .preview-item__col.is--small,
  .blog-archive .preview-item__col.is--medium {
    order: 0;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    text-align: left;
    white-space: nowrap;
  }
  .blog-archive .preview-item__col.is--small + .preview-item__col::before {
    content: '·';
    margin: 0 8px;
    color: var(--text-tertiary);
  }
  .blog-archive .preview-item__col.is--small .preview-item__text,
  .blog-archive .preview-item__col.is--medium .preview-item__text {
    display: inline;
  }
}


/* ============================================
   PAGE BLOG FAÇON BASEMENT.STUDIO (12 oct. 2026)
   template-blog.php. Structure de basement.studio/blog, couleurs et typos
   du site, sur la grille 12 colonnes. Classes .bsm-*.
   ============================================ */
.bsm-grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 16px;
}

@media (min-width: 992px) {
  .bsm-grid {
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    column-gap: var(--grid-gutter);
  }
}

/* Espacements propres (passent devant la règle globale de 80px) */
main[data-barba="container"] > section.bsm-hero.bsm-hero {
  padding: calc(var(--nav-height) + 160px) 0 48px; /* même haut que les pages légales ; 48px jusqu'au dernier article */
}
main[data-barba="container"] > section.bsm-latest.bsm-latest {
  padding: 0;
}
main[data-barba="container"] > section.bsm-more.bsm-more {
  padding: 120px 0 80px;
}

/* En-tête : « Blog » + nombre géant en gris */
.bsm-hero__title {
  margin: 0;
  /* line-height 1 + padding : le jambage du « g » n'est plus coupé */
  padding-bottom: 0.08em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 3.6rem; /* même échelle que .hero-title : 57.6 / 76.8 / 96px */
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .bsm-hero__title { font-size: 4.8rem; }
}

@media (min-width: 1024px) {
  .bsm-hero__title { font-size: 6rem; }
}

/* Nombre d'articles en exposant, collé à « Blog » */
.bsm-hero__count {
  margin-left: 0.24em;
  font-size: 0.5em;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: 0.85em;
  color: rgba(28, 29, 32, 0.3);
}

.bsm-hero__intro {
  margin: 0;
  max-width: 26rem;
  font-family: var(--font);
  font-size: calc(1.1875rem + 2px);
  line-height: 1.45;
  color: var(--text-secondary);
}

@media (min-width: 992px) {
  .bsm-hero__title { grid-column: 1 / span 6; }
  .bsm-hero__intro { grid-column: 9 / span 4; align-self: end; padding-bottom: 0.6em; }
}

/* Libellés gris (« Dernier article », « Catégories », « Plus d'articles ») */
.bsm-label {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--text-tertiary);
  text-align: left;
}

@media (min-width: 992px) {
  /* aligné sur la colonne 5, comme les titres */
  .bsm-label--title {
    margin-left: calc(4 * (var(--grid-col) + var(--grid-gutter)));
  }
}

/* Puces de catégorie + date */
.bsm-tags {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px;
}

.bsm-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(28, 29, 32, 0.07);
  font-size: calc(0.8125rem + 2px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-secondary);
}

.bsm-date {
  font-size: calc(0.875rem + 2px);
  font-weight: 600;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Dernier article */
.bsm-latest__row {
  padding: 8px 0;
  border-top: 1px solid rgba(28, 29, 32, 0.15);
  border-bottom: 1px solid rgba(28, 29, 32, 0.15);
  color: inherit;
  text-decoration: none;
}

.bsm-latest__media,
.bsm-row__media {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: #e6e6e8;
  aspect-ratio: 16 / 9;
}

.bsm-latest__media img,
.bsm-row__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.625, 0.05, 0, 1);
}

.bsm-latest__row:hover img,
.bsm-row:hover img {
  transform: scale(1.04);
}

.bsm-latest__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  transition: color 0.25s ease;
}

.bsm-latest__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bsm-latest__excerpt {
  font-family: var(--font);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--text-primary);
}

.bsm-latest__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--grid-gutter); /* date sur la colonne 11, comme les rangées */
  row-gap: 16px;
  padding-top: 12px;
  border-top: 1px dashed rgba(28, 29, 32, 0.2);
}

@media (min-width: 992px) {
  .bsm-latest__media { grid-column: 1 / span 4; }
  .bsm-latest__title { grid-column: 5 / span 4; }
  .bsm-latest__side { grid-column: 9 / span 4; }
}

/* Catégories (filtres) */
.bsm-cats {
  margin-bottom: 40px; /* proche de la liste d'articles */
}

.bsm-cats__list {
  display: flex;
  flex-direction: column; /* empilées verticalement (12 oct. 2026) */
  align-items: flex-start;
}

/* Survol : même effet de texte que les boutons (lettres qui défilent,
   .btn-animate-chars). Actif : souligné. */
.bsm-cats__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3vw, 2.5rem);
  line-height: 1.1;
  color: var(--text-primary);
  cursor: pointer;
  overflow: visible;
}

/* Au survol d'une catégorie, les autres pâlissent */
.bsm-cats__btn {
  transition: opacity 0.3s ease;
}

.bsm-cats__list:hover .bsm-cats__btn:not(:hover) {
  opacity: 0.3;
}

/* Soulignement de l'actif (text-decoration ne traverse pas les lettres en
   inline-block de l'effet) */
.bsm-cats__btn::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.12em;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.bsm-cats__btn[data-filter-status="active"]::after {
  transform: scaleX(1);
}

@media (min-width: 992px) {
  .bsm-cats__inner { grid-column: 11 / span 2; } /* aligné sur les infos empilées des articles */
}

/* Plus d'articles : rangées */
.bsm-row {
  padding: 16px 0;
  border-top: 1px solid rgba(28, 29, 32, 0.15);
  color: inherit;
  text-decoration: none;
}

.bsm-row:last-child {
  border-bottom: 1px solid rgba(28, 29, 32, 0.15);
}

.bsm-row__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.1vw, 1.875rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  transition: color 0.25s ease;
}

.bsm-row:hover .bsm-row__title,
.bsm-latest__row:hover .bsm-latest__title {
  color: var(--green-900);
}

/* Catégorie, date et temps de lecture empilés */
.bsm-row__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.bsm-read {
  font-weight: 500;
  color: var(--text-tertiary);
}

.bsm-row[data-filter-status="not-active"] {
  display: none;
}

.bsm-row[data-filter-status="transition-out"] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

@media (min-width: 992px) {
  .bsm-row__media { grid-column: 1 / span 3; }
  .bsm-row__title { grid-column: 5 / span 5; }
  .bsm-row__meta { grid-column: 11 / span 2; }
}

/* Mobile : image, titre, puis catégorie + date sur une ligne */
@media (max-width: 991px) {
  main[data-barba="container"] > section.bsm-hero.bsm-hero { padding: calc(var(--nav-height) + 80px) 0 32px; }
  main[data-barba="container"] > section.bsm-more.bsm-more { padding: 72px 0 56px; }
  .bsm-cats { margin-bottom: 32px; }
  .bsm-row { padding: 20px 0; row-gap: 12px; }
  .bsm-row__meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
}


/* ============================================
   JOURNAL : CARTE QUI S'ÉLARGIT AU SCROLL (12 oct. 2026)
   Comme la carte sous le hero d'anthropic.com : l'image est à la largeur
   du contenu (16:9, rayon 20px) ; quand elle arrive dans le haut de
   l'écran, son fond (.xcard__bg) s'étend jusqu'aux bords de l'écran, perd
   ses coins et grandit de 48px en haut et en bas. Le JS anime --xcard-x,
   --xcard-y et --xcard-r (initExpandCard).
   ============================================ */
.xcard-section {
  overflow-x: clip; /* le fond pleine largeur ne crée pas de défilement horizontal */
}

main[data-barba="container"] > section.xcard-section.xcard-section {
  padding-top: 0; /* 48px sous le hero (padding du .bsm-hero), comme le Blog */
}

/* Hero gauche / droite à titre long (Journal) : titre sur 8 colonnes,
   retour à la ligne permis */
.bsm-hero--wide .bsm-hero__title {
  white-space: normal;
}

@media (min-width: 992px) {
  .bsm-hero--wide .bsm-hero__title { grid-column: 1 / span 8; }
}

/* Cachée jusqu'à son entrée (initExpandCard ajoute .is--in), pas de flash */
html.ax-js .xcard:not(.is--in) {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html.ax-js .xcard:not(.is--in) { visibility: visible; }
}

.xcard {
  display: block;
  cursor: pointer;
  --xcard-x: 0px;
  --xcard-y: 0px;
  --xcard-r: 20px;
  position: relative;
  aspect-ratio: 16 / 9;
}

.xcard__bg {
  position: absolute;
  top: calc(-1 * var(--xcard-y));
  bottom: calc(-1 * var(--xcard-y));
  left: calc(-1 * var(--xcard-x));
  right: calc(-1 * var(--xcard-x));
  overflow: hidden;
  border-radius: var(--xcard-r);
  background: #5b8fc7;
}

.xcard__bg picture {
  display: contents;
}

.xcard__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.625, 0.05, 0, 1);
}

.xcard:hover .xcard__img {
  transform: scale(1.02);
}

.xcard:focus-visible .xcard__bg {
  outline: 2px solid var(--green-600);
  outline-offset: 4px;
}

/* Plus de texte sous l'image : la liste suit directement */
.xcard-section + .changelog-section {
  padding-top: 96px;
}

/* Infos de la dernière mise à jour sous l'image, sur la grille */
.xcard-latest {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 24px;
  margin-top: 96px;
}

.xcard-latest__kicker {
  display: block;
  margin-bottom: 16px;
}

.xcard-latest__title {
  margin: 0;
  text-align: left;
}

.xcard-latest__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.xcard-latest__desc {
  margin: 0;
  font-family: var(--font);
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.xcard-latest__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-tertiary);
}

.xcard-latest__meta span + span::before {
  content: '·';
  margin-right: 10px;
}

.xcard-latest__btn {
  margin-top: 8px;
}

@media (min-width: 992px) {
  .xcard-latest {
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    column-gap: var(--grid-gutter);
  }
  .xcard-latest__head { grid-column: 1 / span 7; }
  .xcard-latest__side { grid-column: 8 / span 5; }
}

@media (max-width: 767px) {
  .xcard { --xcard-r: 14px; }
  .xcard-latest { margin-top: 64px; }
}

/* Journal (single changelog, 12 oct. 2026) : pas d'auteur, la rangée d'infos
   montre Version / Date / Catégorie sur les colonnes 1, 4 et 7 ; la catégorie
   garde les pastilles colorées des étiquettes. */
.article-hero__meta-row.is--changelog .changelog-entry__tags {
  margin: 0;
}

/* Pastilles dans la hauteur de ligne de la rangée (28px) : sinon elles
   héritent du line-height 28px de .attribution, font 36px de haut et
   écartent la rangée plus que sur les articles du blog */
.article-hero__meta-row.is--changelog .changelog-tag {
  line-height: 1.4;
  padding: 4px 10px;
}
@media (min-width: 992px) {
  .article-hero__meta-row.is--changelog .article-hero__meta-item.is--version { grid-column: 1 / span 3; }
  .article-hero__meta-row.is--changelog .article-hero__meta-item.is--date { grid-column: 4 / span 3; }
  .article-hero__meta-row.is--changelog .article-hero__meta-item.is--category { grid-column: 7 / span 6; }
}


/* ---- Partage dans la rangée d'infos des articles (12 oct. 2026) ----
   axyrium_share_item() : « Partager » + X / LinkedIn / copier le lien,
   aligné à droite sur la dernière colonne, sur la même ligne que les autres
   infos (blog et Journal). Remplace la barre « Share » du bas de page. */
.share-btns {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.share-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  background: none;
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.share-btn:hover {
  background: var(--green-900);
  border-color: var(--green-900);
  color: #fff;
}

.share-btn__ok {
  display: none;
}

.share-btn.is--copied .share-btn__ico {
  display: none;
}

.share-btn.is--copied .share-btn__ok {
  display: block;
}

@media (min-width: 992px) {
  .article-hero__meta-row > .article-hero__meta-item {
    grid-row: 1;
  }
  /* Partage sur les 2 dernières colonnes ; « Lecture » passe en colonne 9 */
  .article-hero__meta-row > .article-hero__meta-item.is--share {
    grid-column: 11 / span 2;
    justify-self: end;
  }
  .article-hero__meta-row > .article-hero__meta-item.is--read { grid-column: 9 / span 2; }
  .article-hero__meta-row.is--changelog > .article-hero__meta-item.is--category { grid-column: 7 / span 4; }
}


/* ---- Variante « boutons carrés » (design system, 12 oct. 2026) ----
   Rayon 12px au lieu de la pilule. Modificateur .is--square sur n'importe
   quel bouton. Plus utilisé nulle part depuis le 12 oct. 2026 (retour aux
   pilules partout), conservé dans le design system.
   Documenté dans AXYRIUM-DESIGN-SYSTEM.md (Buttons — Square Variant). */
:root {
  --btn-radius-square: 12px;
}

.is--square,
.is--square .btn-animate-chars__bg {
  border-radius: var(--btn-radius-square) !important; /* passe devant les rayons pilule par composant */
}

/* Header et mégamenu : le forçage à 12px (Connexion / Commencer, boutons
   des cartes, liens de la barre, burger, liens des panneaux) a été retiré
   le 12 oct. 2026 : tous les boutons repassent en pilule. Pour un bouton
   carré, ajouter .is--square. */

/* Boutons des cartes du mégamenu plus grands, surtout plus hauts
   (44px, comme Connexion / Commencer) */
.mega-nav .mega-nav__card-btn {
  min-height: 44px;
  padding: 0.85em 1.5em;
  font-size: calc(0.9375rem + 2px);
}


/* ---- Accent souligné au pinceau (12 oct. 2026) ----
   <span class="ax-scribble">texte<svg class="ax-scribble__line">…</svg></span> :
   texte orange (--orange-600) en Instrument Serif italique (--font-hand : TOUS les éléments
   orange utilisent cette police) et trait de pinceau orange vif
   (--orange-500) dessous : forme pleine effilée aux deux bouts, comme la
   flèche de référence de Billy, 1px au plus épais (demande de Billy).
   Aucune animation propre : il apparaît avec sa section (Billy, 12 oct. 2026 ;
   l'ancien dessin de gauche à droite a été retiré).
   Markup : axyrium_scribble($texte) dans functions.php.
   Utilisé : hero Produit Pré-achat (« Vérification par des experts en option »,
   délai 1.3s) et note du CTA Pré-achat (« Aucun abonnement », sur photo sombre). */
.ax-scribble {
  position: relative;
  display: inline-block;
  color: var(--orange-600);
  font-family: var(--font-hand);
  font-style: italic;
  font-weight: 400;
  font-size: 1.12em; /* Instrument Serif italique : un peu plus grande que le texte autour */
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.ax-scribble__line {
  position: absolute;
  left: -2%;
  bottom: -0.55em;
  width: 104%;
  height: 0.5em;
  overflow: visible;
  pointer-events: none;
  color: var(--orange-500);
}

/* Sur fond sombre / photo (CTA) : orange vif pour le texte aussi */
.cta-content .ax-scribble,
.is--dark-section .ax-scribble {
  color: var(--orange-500);
}

@media (max-width: 479px) {
  .ax-scribble { white-space: normal; }
}

/* ---- Note manuscrite orange (12 oct. 2026) ----
   axyrium_note($texte, $dir, $classe) dans functions.php : texte Caveat
   --orange-600 (--orange-500 sur fond sombre) + flèche au pinceau effilée
   (--orange-500, viewBox 48x32, pointe vers la gauche par défaut). Aucune
   animation propre : la note apparaît avec sa section. Placement : une
   classe par endroit. */
.ax-note {
  display: inline-flex;
  align-items: flex-start;
  gap: 2px;
  color: var(--orange-600);
  font-family: var(--font-hand);
  font-style: italic;
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}
.ax-note.is--right { flex-direction: row-reverse; }
.ax-note__text {
  display: inline-block;
}
.ax-note__arrow {
  flex-shrink: 0;
  width: 60px;
  height: 40px;
  margin-top: 0.45em;
  overflow: visible;
  color: var(--orange-500);
}
.ax-note.is--right .ax-note__arrow { transform: scaleX(-1); }
.is--dark-section .ax-note,
.cta-content .ax-note { color: var(--orange-500); }

/* -- Journal : « Correction » en neutre pour ne pas concurrencer l'accent */
.changelog-tag--fix {
  background: rgba(28, 29, 32, 0.06);
  color: #55565b;
}

/* -- Contact : pastille de statut (verte et pulsée si disponible) */
.contact-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  vertical-align: 0.08em;
}
.contact-status-dot.is--open {
  background: #059669;
  box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.45);
  animation: contact-status-pulse 2s ease-out infinite;
}
@keyframes contact-status-pulse {
  70% { box-shadow: 0 0 0 7px rgba(5, 150, 105, 0); }
  100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-status-dot.is--open { animation: none; }
}


/* Hero de l'accueil centré (12 oct. 2026) : carte app de droite retirée
   (backup : backups/template-home-before-centered-hero-2026-10-12.php).
   On annule l'alignement à gauche de .hero--img, comme #thanks-hero. */
#hero.hero--img .hero-inner {
  align-items: center;
  text-align: center;
}

#hero.hero--img .hero-subtitle {
  margin: 0 auto;
}

#hero .hero-cta-group {
  justify-content: center;
}

#hero .hero-card-wrap {
  display: none;
}

/* Hero de l'accueil clair (12 oct. 2026) : la section n'est plus
   .is--dark-section (header blanc par défaut), le cadre passe en blanc
   et le texte / les boutons reprennent leurs styles clairs.
   Backup : backups/style-before-light-hero-2026-10-12.css */
/* Pas de fond (12 oct. 2026) : le cadre reste dans le DOM (le loader
   mesure .hero-box-bg pour sa géométrie) mais sans couleur ni logos */
#hero.hero--img .hero-box-bg {
  background: transparent;
}

#hero.hero--img .hero-box-bg::before,
#hero.hero--img .hero-box-bg::after {
  display: none;
}

#hero.hero--img .hero-title {
  color: var(--text-primary);
  text-shadow: none;
}

#hero.hero--img .hero-subtitle {
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
}

#hero.hero--img .hero-badge-sp-text,
#hero.hero--img .hero-badge-sp-text strong {
  color: rgba(0, 0, 0, 0.7);
}

#hero.hero--img .hero-btn-primary {
  background: var(--green-900);
  color: #fff;
}

#hero.hero--img .hero-btn-primary:hover {
  background: var(--green-700);
}

#hero.hero--img .hero-btn-secondary {
  border-color: #1c1d20;
  color: #1c1d20;
}

#hero.hero--img .hero-btn-secondary:hover {
  border-color: #1c1d20;
}

#hero.hero--img .hero-btn-secondary:hover .btn-animate-chars__bg {
  background-color: rgba(28, 29, 32, 0.05);
}

/* Loader de l'accueil : atterrit sur le fond de page du hero (Merci reste sombre) */
.home .axl__cover--dark {
  background: var(--bg-primary);
}


/* ---- Boutons style Cuberto (12 oct. 2026) ----
   Remplace le stagger par caractère sur tous les .btn-animate-chars.
   Repris de cuberto.com (CtaButton, header et footer) :
   1. Remplissage « liquide » : ::before de .btn-animate-chars__bg, couleur =
      --btn-fx-fill (blanc ou vert, jamais noir, posé par initButtonRoll), monte depuis le bas avec un haut arrondi
      (50% 50% 0 0) qui s'aplatit pendant la montée.
   2. Le libellé monte et sort, sa copie (::after, attr(data-text)) arrive
      d'en bas dans la couleur inverse (--btn-fx-text, sinon --btn-fx-auto
      posé par initButtonRoll dans script.js).
   3. Étirement élastique scaleX(1.02) au lieu de l'ancien scale(0.97).
   Durées raccourcies le 12 oct. 2026 (Cuberto : 0.5/0.9/0.8/0.6 s) :
   remplissage 0.35 s (aplatissement 0.55 s), libellé 0.45 s, étirement 0.4 s.
   Liens texte sans __bg (retour au blog, filtres du blog) : roulement seul.
   Survol uniquement sur pointeur fin, comme Cuberto. Retour arrière :
   supprimer ce bloc + backups/script.js.pre-cuberto-btn. */
.btn-animate-chars .btn-animate-chars__text {
  display: block;
  overflow: hidden;
}

.btn-animate-chars .btn-roll {
  display: block;
  position: relative;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-animate-chars .btn-roll::after {
  content: attr(data-text);
  position: absolute;
  top: 110%;
  left: 0;
  right: 0;
  display: block;
}

.has-btn-fill .btn-roll::after {
  color: var(--btn-fx-text, var(--btn-fx-auto, #fff));
}

.btn-animate-chars.has-btn-fill {
  overflow: visible; /* le clip est fait par __bg, qui déborde sur la bordure */
  filter: none !important;
  box-shadow: none !important;
}

.has-btn-fill > .btn-animate-chars__bg {
  inset: calc(var(--btn-fx-bw, 0px) * -1) !important; /* couvre la bordure */
  background: transparent !important;
  border-radius: inherit !important;
  overflow: hidden;
  pointer-events: none;
  transition: none;
}

/* Bouton plein survolé : plus de bordure depuis le 13 oct. 2026 (avant :
   liseré 1.5px de sa couleur d'origine sur __bg::after). */

.has-btn-fill > .btn-animate-chars__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--btn-fx-fill, var(--btn-green));
  border-radius: 50% 50% 0 0;
  transform: translateY(101%);
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0, 1),
    border-radius 0.35s cubic-bezier(0.4, 0, 0, 1);
}

.has-btn-fill svg {
  transition: color 0.3s;
}

@media (pointer: fine) {
  .btn-animate-chars:hover .btn-roll {
    transform: translateY(-110%);
  }

  .btn-animate-chars.has-btn-fill:hover {
    transform: scaleX(1.02) !important;
    transition: transform 0.4s cubic-bezier(0.34, 5.56, 0.64, 1), color 0.25s, background-color 0.25s, border-color 0.25s;
  }

  .has-btn-fill:hover > .btn-animate-chars__bg::before {
    transform: translateY(0);
    border-radius: 0;
    transition-duration: 0.35s, 0.55s;
  }

  /* Boutons pleins : plus de bordure au survol (retirée le 13 oct. 2026) */

  .has-btn-fill:hover svg {
    color: var(--btn-fx-text, var(--btn-fx-auto, #fff));
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-animate-chars .btn-roll,
  .has-btn-fill > .btn-animate-chars__bg::before {
    transition-duration: 0.01s !important;
  }
  .btn-animate-chars.has-btn-fill:hover {
    transform: none !important;
  }
}


/* ---- Boutons : vert au lieu du noir (12 oct. 2026) ----
   Plus aucun bouton noir : les contours foncés (#1c1d20) passent en
   --green-900, les boutons pleins foncés en vert. Les boutons blancs restent
   blancs. Les variantes sur fond foncé (is--nav-dark, is--nav-photo,
   .is--dark-section, .hero--img) gardent leurs règles plus spécifiques. */
.mega-nav__bar-cta.is--secondary,
.mega-nav__bar-cta.is--secondary:hover,
.hero-btn-secondary:not(.hero--img *, .is--dark-section *, .dark-frame *),
.hero-btn-secondary:not(.hero--img *, .is--dark-section *, .dark-frame *):hover,
#product-hero .hero-btn-secondary,
#product-hero .hero-btn-secondary:hover,
#hero.hero--img .hero-btn-secondary,
#hero.hero--img .hero-btn-secondary:hover,
.cta-light-btn-secondary,
.cta-light-btn-secondary:hover {
  color: var(--btn-green);
  border-color: var(--btn-green);
}

.pricing-btn-outline,
.pricing-btn-outline:hover {
  color: var(--btn-green);
}

.product-uc__cta,
.product-use-cases--v2 .product-uc__card:not(.is--dark) .product-uc__cta {
  background: var(--btn-green);
}


/* ---- Boutons pleins : même taille que les contours (12 oct. 2026) ----
   Les secondaires ont une bordure de 1.5px, les pleins n'en avaient pas :
   à padding égal ils étaient 3px plus petits. Bordure transparente de 1.5px
   (le fond passe dessous) ; au survol, le remplissage et le liseré de
   .is-btn-solid la recouvrent (--btn-fx-bw). */
.mega-nav__bar-cta:not(.is--secondary),
.hero-btn-primary,
.cta-btn-primary,
.pricing-btn-filled,
.product-uc__cta {
  border: 1.5px solid transparent;
}

/* Boutons blancs : texte au vert des sections vertes (--green-900, fond du
   bloc CTA) au lieu du quasi-noir #181818 / #1c1d20 (12 oct. 2026). */
.cta-btn-primary,
.product-uc__card.is--dark .product-uc__cta {
  color: var(--btn-green);
}


/* ---- Vert des boutons = vert des cartes sombres (12 oct. 2026) ----
   Les boutons prennent le vert des sections vertes de l'accueil (carte
   « L'entreprise est à vous. Prenez le contrôle. », .product-uc__card.is--dark
   = --green-800) au lieu de --green-900. Token unique --btn-green : fonds des
   boutons pleins, contours, texte des boutons blancs, remplissage au survol
   (initButtonRoll). Les variantes sur fond sombre (nav sombre/photo, cartes
   sombres) gardent leurs règles plus spécifiques. Les :hover figent le fond
   (avant : --green-700 au survol, maintenant couvert par le remplissage). */
:root {
  --btn-green: var(--green-800);
}

.mega-nav:not(.is--nav-dark):not(.is--nav-photo) .mega-nav__bar-cta:not(.is--secondary):not(.is--launch),
.mega-nav:not(.is--nav-dark):not(.is--nav-photo) .mega-nav__bar-cta:not(.is--secondary):not(.is--launch):hover,
.hero-btn-primary:not(.hero--img *),
.hero-btn-primary:not(.hero--img *):hover,
#hero.hero--img .hero-btn-primary,
#hero.hero--img .hero-btn-primary:hover,
#product-hero .hero-btn-primary,
#product-hero .hero-btn-primary:hover,
.pricing-btn-filled,
.pricing-btn-filled:hover,
.pricing-card-featured .pricing-btn-filled,
.pricing-card-featured .pricing-btn-filled:hover,
#home-use-cases .product-uc__card:not(.is--dark) .product-uc__cta,
.product-use-cases--v2 .product-uc__card:not(.is--dark) .product-uc__cta,
.product-uc__card:not(.is--dark) .product-uc__cta {
  background: var(--btn-green);
}

/* ---- Police Hanken Grotesk partout (12 oct. 2026) ----
   Tout le texte hors titres serif = --font (Hanken Grotesk). Les champs de
   formulaire n'héritent pas de la police par défaut (Arial dans Chrome) :
   on force l'héritage. Hanken n'a ni flèches (→), ni ≈, ni étoiles : ces
   glyphes sont remplacés par des SVG (.ax-arrow, .ax-star) ou des mots. */
input,
textarea,
select,
optgroup,
option {
  font-family: inherit;
}

.ax-arrow {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.14em;
  flex-shrink: 0;
}

.ax-star {
  display: inline-block;
  width: 1em;
  height: 1em;
}

.slide-demo__stars {
  display: flex;
  gap: 2px;
  letter-spacing: 0;
}

/* ---- Sous-titres de hero : 24px max, graisse normale (12 oct. 2026) ----
   Avant : 26px (calc(1.5rem + 2px)) à toutes les largeurs, graisse 500.
   Maintenant 20px sur mobile → 24px max sur desktop, graisse 400.
   !important : plusieurs variantes par page (#hero, .hero--img, #thanks-hero,
   .about-hero__text, .legal-hero) redéfinissent la taille. */
.hero-subtitle {
  font-size: clamp(20px, 1rem + 0.6vw, 24px) !important; /* 24px max (26px essayé avant) */
  font-weight: 400 !important;
}

.hero-subtitle a,
.hero-subtitle strong,
.hero-subtitle span {
  font-weight: inherit;
}

/* ---- Accent lime (12 oct. 2026) ----
   Couleur d'accent de marque, choisie sur /comparaison-accents/ (« Lime vert »,
   teinte 90°). À utiliser avec parcimonie, sur les surfaces vertes/sombres ou
   en pastille avec du texte foncé (--accent-ink) : jamais comme texte sur
   fond clair (contraste 1.2:1). Accueil d'abord (12 oct.), tout le site
   depuis le 13 oct. 2026 (règles par contexte clair / sombre). Retour arrière :
   backups/style.css.pre-accent-home + backups/dark-quebec-map.pre-accent.svg */
:root {
  --accent: var(--color-deco-200); /* pistache #c8dca0 (12 oct. 2026) : le lime faisait trop « playful ». Essais avant : #ADF972, #A1FF62, #B8F27F */
  --accent-ink: var(--color-deco-950); /* texte et bordure posés sur l'accent */
  /* Contraste simultané : une couleur paraît plus claire sur fond sombre et
     plus délavée sur fond clair. Pour un même poids visuel : teinte plus
     foncée sur fond clair, plus claire sur fond sombre (12 oct. 2026).
     --accent = fonds sombres/verts ; sur fond clair : */
  --accent-on-light: var(--color-deco-300);      /* aplats : badges, pastilles, survol des boutons */
  --accent-mark-on-light: var(--color-deco-500); /* petites marques : puces (3:1 sur blanc) */
}

/* Cartes en paire (moitiés de page, une claire, une sombre ; accueil
   Pré-achat / Post-achat, À propos Mission / Vision) : badges et puces
   TOUJOURS de la même couleur perçue sur les deux, l'accent (règle de
   l'utilisateur, 12 oct. 2026). Sur la carte claire, un cran plus foncé
   (contraste simultané). Étendu à tout le site le 13 oct. 2026. */
:is(#home-use-cases, #about-use-cases) .product-uc__card .product-uc__indicator,
:is(#home-use-cases, #about-use-cases) .product-uc__card.is--dark .product-uc__indicator {
  background: var(--accent);
  color: var(--accent-ink);
}
:is(#home-use-cases, #about-use-cases) .product-uc__card:not(.is--dark) .product-uc__indicator {
  background: var(--accent-on-light);
}
/* Badge secondaire (« SOLUTION », « Comment? ») : accent à faible opacité ;
   texte foncé sur la carte claire, accent sur la carte sombre */
:is(#home-use-cases, #about-use-cases) .product-uc__card .product-uc__badge {
  background: color-mix(in srgb, var(--color-deco-400) 30%, transparent);
  color: var(--accent-ink);
}
:is(#home-use-cases, #about-use-cases) .product-uc__card.is--dark .product-uc__badge {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
}
:is(#home-use-cases, #about-use-cases) .product-uc__card .product-uc__list li::before {
  color: var(--accent-mark-on-light);
  opacity: 1;
}
:is(#home-use-cases, #about-use-cases) .product-uc__card.is--dark .product-uc__list li::before {
  color: var(--accent);
}

/* Même style de badge secondaire sur fond clair ailleurs (timeline Pré-achat) */
.step-tl__tag {
  background: color-mix(in srgb, var(--color-deco-400) 30%, transparent);
  color: var(--accent-ink);
}

/* Surtitres posés sur un fond sombre ou vert (bloc Québec, cadres sombres) */
:is(.product-uc__card.is--dark, .dark-frame, .cta-content, .is--dark-section, .home-quebec, .about-timeline:not(.is--light), .docs-categories) .section-badge {
  color: var(--accent);
}

/* Tarifs : pastilles « Le plus populaire » / « Recommandé » et « -17 % »
   (posées sur fond clair) */
.plan-card__popular,
.billing-switch__badge {
  background: var(--accent-on-light);
  color: var(--accent-ink);
}

/* Boutons (tout le site + header) : remplissage accent au survol, texte
   foncé (--accent-ink) ; bordure foncée seulement sur les boutons contour
   (pleins : aucune, 13 oct.). Teinte selon le fond : --accent-on-light sur
   fond clair, --accent sur fond sombre ou vert. */
@media (pointer: fine) {
  .has-btn-fill > .btn-animate-chars__bg::before {
    background: var(--accent-on-light) !important; /* bouton posé sur fond clair */
  }
  :is(.product-uc__card.is--dark, .dark-frame, .cta-content, .is--dark-section, .home-quebec, .about-timeline:not(.is--light), .docs-categories) .has-btn-fill > .btn-animate-chars__bg::before,
  .mega-nav:is(.is--nav-dark, .is--nav-photo) .has-btn-fill > .btn-animate-chars__bg::before {
    background: var(--accent) !important; /* bouton posé sur fond sombre ou vert */
  }
  .has-btn-fill .btn-roll::after,
  .has-btn-fill:hover svg {
    color: var(--accent-ink) !important;
  }
  .has-btn-fill:not(.is-btn-solid):hover > .btn-animate-chars__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 1;
    box-shadow: inset 0 0 0 var(--btn-fx-bw, 1.5px) var(--accent-ink) !important;
  }
}


/* ---- Hero de l'accueil + visuel du tableau de bord (13 oct. 2026) ----
   Pastille « Rejoignez ... » retirée (composant : template-parts/hero-badge.php).
   Espacements : titre → description 8px, description → boutons 32px,
   boutons → visuel 48px. Le hero n'est plus à 100vh : il suit son contenu,
   le visuel occupe la largeur du contenu (1152px, grille 12 colonnes).
   Le cadre .hero-box-bg (mesuré par le loader) reste à la hauteur de l'écran.
   Backup : backups/style-before-hero-visual-2026-10-13.css */
#hero.hero--img {
  height: auto;
}

#hero.hero--img .hero-box-bg {
  bottom: auto;
  height: calc(100dvh - 2 * var(--hero-inset));
}

#hero .hero-content-wrapper {
  height: auto;
  padding-top: 176px;
  padding-bottom: 0;
}

#hero .hero-inner {
  gap: 0;
  width: 100%;
}

#hero .hero-text-group {
  gap: 8px;
  margin-bottom: 32px;
}

#hero .hero-cta-group {
  margin-bottom: 48px;
}

#hero .hero-visual {
  width: 100%;
  max-width: calc(var(--container-max) - 2 * var(--container-pad));
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
}

#hero .hero-visual img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 991px) {
  #hero .hero-content-wrapper {
    padding-top: 136px;
  }
}

@media (max-width: 768px) {
  #hero .hero-content-wrapper {
    padding-top: 120px;
  }

  #hero .hero-visual {
    border-radius: 12px;
  }
}

/* Pas de ligne entre le hero de l'accueil et la bande de logos (14 oct. 2026).
   border: none (pas transparent) : prepareLines() ne trace alors aucune
   ligne animée. La page Pré-achat garde la sienne. */
#hero ~ .social-proof {
  border-top: none;
}


/* ============================================
   MENU MOBILE / TABLETTE : TIROIR EMPILÉ (14 oct. 2026)
   Osmo « Stacked Drawer Navigation », pleine largeur sous 992px, sous le
   header (z-index 99 < .mega-nav 100) : le logo et le burger restent
   visibles et cliquables. Markup : header.php (#drawerNav), JS :
   initStackedDrawerNavigation. Backup :
   backups/style-before-drawer-nav-2026-10-14.css
   ============================================ */
.drawer-nav {
  --drawer-nav-edge: 3.5em;
  --drawer-nav-top: calc(72px + 2em); /* hauteur du header mobile + air */
  --drawer-nav-bg: #ffffff;
  --drawer-nav-ink: #1c1d20;
  --drawer-nav-muted: rgba(28, 29, 32, 0.55);
  --drawer-nav-line: rgba(0, 0, 0, 0.08);
  display: none;
  color: var(--drawer-nav-ink);
  font-family: var(--font);
}

@media screen and (max-width: 991px) {
  .drawer-nav {
    display: block;
  }
  /* L'ancien menu mobile n'est plus ouvert : on le neutralise */
  .mega-nav__bar-inner,
  .mega-nav__back {
    display: none !important;
  }
}

.drawer-nav__drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  visibility: hidden;
  background-color: var(--drawer-nav-bg);
  overflow: hidden;
}

.drawer-nav__sheet {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--drawer-nav-edge);
  right: 0;
  z-index: 2;
  visibility: hidden;
  background-color: var(--drawer-nav-bg);
  border-left: 1px solid var(--drawer-nav-line);
  box-shadow: -1em 0 2em rgba(0, 0, 0, 0.05);
}

.drawer-nav__edge {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: var(--drawer-nav-edge);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--drawer-nav-top) 0 2em;
  color: inherit;
  background-color: var(--bg-primary, #f5f5f7);
  border: none;
  font: inherit;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transition: background-color 0.2s ease;
}

.drawer-nav__edge:hover,
.drawer-nav__edge:focus-visible {
  background-color: #ececef;
}

.drawer-nav__edge-icon {
  flex: none;
  width: 1.25em;
}

.drawer-nav__content {
  display: flex;
  flex-direction: column;
  gap: 2em;
  height: 100%;
  padding: var(--drawer-nav-top) 2em 2em;
  overflow: auto;
  overscroll-behavior: contain;
}

.drawer-nav__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1em;
}

.drawer-nav__back {
  display: flex;
  align-items: center;
  gap: 0.25em;
  margin-left: -0.25em;
  padding: 0;
  color: var(--drawer-nav-muted);
  background: transparent;
  border: none;
  font: inherit;
  font-size: calc(1rem + 2px);
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s cubic-bezier(0.625, 0.05, 0, 1);
}

.drawer-nav__back:hover,
.drawer-nav__back:focus-visible {
  color: var(--drawer-nav-ink);
}

.drawer-nav__back-icon {
  width: 1.25em;
}

.drawer-nav__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--drawer-nav-ink);
}

.drawer-nav__collection {
  width: 100%;
}

.drawer-nav__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.drawer-nav__item {
  display: block;
}

.drawer-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  width: 100%;
  padding: 0.5em 0;
  color: inherit;
  background: transparent;
  border: none;
  font: inherit;
  font-size: calc(1.5rem + 2px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s cubic-bezier(0.625, 0.05, 0, 1);
}

.drawer-nav__list.is--main > .drawer-nav__item > .drawer-nav__link {
  font-size: calc(2rem + 2px);
  padding: 0.3em 0;
}

.drawer-nav__link:hover,
.drawer-nav__link:focus-visible {
  color: var(--drawer-nav-muted);
}

.drawer-nav__link.is--soon {
  cursor: default;
  color: var(--drawer-nav-muted);
}

.drawer-nav__link-body {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

.drawer-nav__link-label {
  display: block;
}

.drawer-nav__link-desc {
  display: block;
  font-size: calc(0.875rem + 2px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--drawer-nav-muted);
}

.drawer-nav__soon {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.3em 0.6em;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  font-size: calc(0.6875rem + 2px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  vertical-align: middle;
}

.drawer-nav__link-icon {
  flex: none;
  width: 0.75em;
}

.drawer-nav__group {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding-top: 1.5em;
  border-top: 1px solid var(--drawer-nav-line);
}

/* Kicker : caps nues, comme partout sur le site */
.drawer-nav__group-label,
.drawer-nav__promo-kicker {
  font-size: calc(0.75rem + 2px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--drawer-nav-muted);
}

.drawer-nav__group-list {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.drawer-nav__group-link {
  color: inherit;
  font-size: calc(1.125rem + 2px);
  line-height: 1.25;
  text-decoration: none;
  transition: color 0.3s cubic-bezier(0.625, 0.05, 0, 1);
}

.drawer-nav__group-link:hover,
.drawer-nav__group-link:focus-visible {
  color: var(--drawer-nav-muted);
}

.drawer-nav__promo {
  display: flex;
  margin-top: auto;
  padding: 1.5em;
  border-radius: 16px;
  background-color: var(--bg-primary, #f5f5f7);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.3s cubic-bezier(0.625, 0.05, 0, 1);
}

.drawer-nav__promo:hover,
.drawer-nav__promo:focus-visible {
  background-color: #ececef;
}

.drawer-nav__promo-text {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

.drawer-nav__promo-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.1;
}

.drawer-nav__promo-cta {
  margin-top: 0.25em;
  font-size: calc(0.875rem + 2px);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.drawer-nav__footer {
  display: flex;
  gap: 0.75em;
}

.drawer-nav__footer .drawer-nav__btn {
  flex: 1 1 0;
  justify-content: center;
}

@media screen and (max-width: 767px) {
  .drawer-nav {
    --drawer-nav-edge: 2.5em;
    --drawer-nav-top: calc(72px + 1.5em);
  }
  .drawer-nav__content {
    padding: var(--drawer-nav-top) 1.25em 1.25em;
  }
  .drawer-nav__title {
    font-size: 2.5rem;
  }
  .drawer-nav__list.is--main > .drawer-nav__item > .drawer-nav__link {
    font-size: calc(1.75rem + 2px);
  }
  .drawer-nav__link {
    font-size: calc(1.25rem + 2px);
  }
}

/* ---- CTA final : photo floue v3 (14 oct. 2026) ----
   Remplace le fond vert + logos (bloc « CTA FINAL : FOND VERT » plus haut) :
   pour revenir au vert, supprimer ce bloc. Source :
   assets/img/cta-bg-v3-source.jpg (2304x1070), même voile noir 20 % que la v2. */
.cta-content:not(.cta-content--light) {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), var(--dark-section-bg) url('assets/img/new-brand/cta-bg-v3-1920.jpg') center / cover no-repeat;
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), image-set(url('assets/img/new-brand/cta-bg-v3-2304.avif') type('image/avif'), url('assets/img/new-brand/cta-bg-v3-1920.jpg') type('image/jpeg'));
}

.cta-content:not(.cta-content--light)::before,
.cta-content:not(.cta-content--light)::after {
  display: none;
}

@media (max-width: 767px) {
  .cta-content:not(.cta-content--light) {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), image-set(url('assets/img/new-brand/cta-bg-v3-1200.avif') type('image/avif'), url('assets/img/new-brand/cta-bg-v3-1920.jpg') type('image/jpeg'));
  }
}