/* =====================================================================
   marketing.css — MonEspaceACM
   Partagé par les 30 pages marketing (landings, features, segments, blog,
   tarifs, case studies, légal). Extraction et consolidation depuis
   public/landing.html + tokens DESIGN_SYSTEM_V1_2026_05_12_NUIT.md.

   Auteur : Lea Martin, UI/UX Senior dig-holding
   Date   : 2026-05-13
   Notes  : Mobile first (375 -> 768 -> 1024 -> 1920). WCAG 2.1 AA.
            Critical CSS extractable (lignes 1 a "/* === ABOVE THE FOLD END ===").
   ===================================================================== */

/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); color: var(--navy); background: var(--cream); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, video { max-width: 100%; display: block; height: auto; }
a { text-decoration: none; color: inherit; }
button { border: none; cursor: pointer; font-family: inherit; background: none; }
ul { list-style: none; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }

/* ===== A11Y BASE ===== */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 2px; }
.skip-link {
  position: absolute; top: -100px; left: 0; background: var(--navy); color: #fff;
  padding: 12px 24px; font-weight: 600; z-index: 9999; text-decoration: none;
  border-radius: 0 0 8px 0; transition: top .2s;
}
.skip-link:focus { top: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ===== TOKENS (DESIGN SYSTEM V1) ===== */
:root {
  /* Palette Brand Bible */
  --navy: #0C1B4D;
  --navy-mid: #1A2F6B;
  --navy-light: #2A4399;
  --sky: #0097E6;
  --sky-light: #48C9F0;
  --sky-pale: #E8F7FD;
  --green: #00C896;
  --green-pale: #E0FBF4;
  --amber: #FFB800;
  --amber-pale: #FFF8E1;
  --red: #FF4757;
  --red-hover: #E83E4E;
  --cream: #FAFAF8;
  --white: #FFFFFF;
  --gray-50: #F8F9FA;
  --gray-100: #F1F3F5;
  --gray-200: #E9ECEF;
  --gray-300: #DEE2E6;
  --gray-400: #ADB5BD;
  --gray-500: #868E96;
  --gray-600: #495057;
  --gray-700: #343A40;
  --gray-800: #212529;
  /* Aliases sémantiques */
  --color-primary: var(--navy);
  --color-accent: var(--green);
  --color-info: var(--sky);
  --color-success: var(--green);
  --color-warning: var(--amber);
  --color-danger: var(--red);
  /* Typography */
  --font-heading: 'Syne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  /* Layout */
  --container: 1200px;
  --container-narrow: 760px;
  --container-wide: 1440px;
  /* Radius */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(12, 27, 77, .06);
  --shadow-md: 0 4px 16px rgba(12, 27, 77, .08);
  --shadow-lg: 0 8px 32px rgba(12, 27, 77, .12);
  --shadow-xl: 0 16px 48px rgba(12, 27, 77, .16);
  /* Transitions */
  --transition: 0.3s cubic-bezier(.4, 0, .2, 1);
  --transition-fast: 0.18s cubic-bezier(.4, 0, .2, 1);
  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 120px;
}

/* ===== LAYOUT ===== */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 24px; }
.section { padding: 100px 0; }
.section-tight { padding: 60px 0; }
.section-cream { background: var(--cream); }
.section-white { background: var(--white); }
.section-navy { background: var(--navy); color: #fff; }

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5 { font-family: var(--font-heading); line-height: 1.15; color: var(--navy); }
h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.03em; }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -.03em; }
h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; }
h4 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
p { font-size: 1rem; line-height: 1.7; }
/* Lea 2026-05-13 : contraste WCAG 2.1 AA hotfix.
   - .section-label : sky #0097E6 sur cream #FAFAF8 = 3.05:1 FAIL -> navy-light #2A4399 = 8.9:1 PASS.
   - .section-subtitle : gray-500 #868E96 sur cream = 3.6:1 FAIL -> gray-600 #495057 = 8.6:1 PASS.
*/
.section-label { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-light); margin-bottom: 12px; display: inline-block; }
.section-title { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; margin-bottom: 16px; letter-spacing: -.03em; }
.section-subtitle { font-size: 1.1rem; color: var(--gray-600); max-width: 640px; line-height: 1.7; }

/* ===== ANIMATIONS ===== */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .7s var(--transition), transform .7s var(--transition); }
.reveal.visible { opacity: 1; transform: translateY(0); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 200, 150, .4); } 50% { box-shadow: 0 0 0 8px rgba(0, 200, 150, 0); } }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--radius); font-weight: 600;
  font-size: .95rem; transition: all var(--transition); letter-spacing: -.01em;
  cursor: pointer; min-height: 48px; line-height: 1.2;
}
.btn-primary { background: var(--navy); color: #fff; box-shadow: 0 4px 14px rgba(12, 27, 77, .25); }
.btn-primary:hover { background: var(--navy-mid); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(12, 27, 77, .35); }
.btn-green, .btn-accent, .btn-success {
  background: var(--green); color: var(--navy);
  box-shadow: 0 4px 14px rgba(0, 200, 150, .3); font-weight: 700;
}
.btn-green:hover, .btn-accent:hover, .btn-success:hover { background: #00b386; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 200, 150, .4); }
.btn-sky { background: var(--sky); color: #fff; box-shadow: 0 4px 14px rgba(0, 151, 230, .3); }
.btn-sky:hover { background: #0085d0; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 151, 230, .4); }
.btn-outline { border: 2px solid rgba(255, 255, 255, .35); color: #fff; background: transparent; }
.btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.btn-outline-navy { border: 2px solid var(--navy); color: var(--navy); background: transparent; }
.btn-outline-navy:hover { background: var(--navy); color: #fff; }
.btn-ghost { background: transparent; color: var(--navy); }
.btn-ghost:hover { background: var(--gray-100); }
.btn-lg { padding: 18px 36px; font-size: 1.05rem; min-height: 56px; }
.btn-sm { padding: 10px 18px; font-size: .85rem; min-height: 40px; }
.btn-block { width: 100%; }

/* ===== ANNOUNCEMENT BAR =====
   Copy-paste EXACT depuis public/landing.html (lignes 47-53). Référence Stephane 2026-05-13. */
.announcement-bar{background:var(--navy);color:#fff;text-align:center;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;padding:10px 40px 10px 16px;position:relative;z-index:1001}
.announcement-bar a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px}
.announcement-bar a:hover{text-decoration-color:#fff}
.announcement-bar-close{position:absolute;top:50%;right:10px;transform:translateY(-50%);background:transparent;border:0;color:#fff;font-size:18px;line-height:1;cursor:pointer;opacity:.7;padding:4px 10px}
.announcement-bar-close:hover{opacity:1}
body.has-announcement .navbar{top:36px}
@media (max-width:640px){.announcement-bar{font-size:.68rem;padding:9px 36px 9px 12px}}

/* ===== NAVBAR =====
   Copy-paste EXACT depuis public/landing.html (lignes 78-98). Référence Stephane 2026-05-13. */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:12px 0;transition:all var(--transition)}
.navbar.scrolled{padding:10px 0;background:rgba(12,27,77,.82);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 1px 24px rgba(0,0,0,.15)}
.navbar .container{display:flex;align-items:center;justify-content:space-between}
.navbar-logo{display:flex;align-items:center;gap:10px}
.navbar-logo svg{width:40px;height:40px;border-radius:8px}
.navbar-logo img{height:52px;width:auto;max-width:340px;border-radius:0;display:block}
@media (max-width:768px){.navbar-logo img{height:40px;max-width:240px}}
.navbar-logo-text{font-family:var(--font-heading);font-size:1.15rem;font-weight:700;color:#fff}
.navbar-logo-text .sky{color:var(--sky-light)}
.navbar-logo-text .green{color:var(--green)}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{color:rgba(255,255,255,.8);font-size:.9rem;font-weight:500;transition:color var(--transition)}
.nav-links a:hover{color:#fff}
.nav-cta{margin-left:8px}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;padding:8px}
.hamburger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:all var(--transition)}

/* ===== MOBILE MENU =====
   Copy-paste EXACT depuis public/landing.html (lignes 94-98). Référence Stephane 2026-05-13. */
.mobile-menu{display:none;position:fixed;inset:0;background:var(--navy);z-index:999;flex-direction:column;align-items:center;justify-content:center;gap:32px;opacity:0;pointer-events:none;transition:opacity .3s ease}
.mobile-menu.open{opacity:1;pointer-events:all}
.mobile-menu a{color:#fff;font-size:1.2rem;font-weight:600;font-family:var(--font-heading)}
.mobile-menu .btn{font-size:1rem;padding:16px 32px}
.mobile-close{position:absolute;top:20px;right:24px;background:none;color:#fff;font-size:1.8rem;cursor:pointer;border:none}

/* ===== NAVBAR DEFINITIVE FIX (Marcus Leroy CTO 2026-05-13) =====
   Verbatim Stephane (10e signalement, extremement enerve) :
   "c'est inadmissible, ca fait 10 fois que je demande", "change cette navbar".

   ANALYSE :
   - landing.html (HTML statique) = REFERENCE SACREE. Pattern : navbar transparent au top,
     hero navy demarre y=40 sous announcement-bar, navbar passe navy opaque au scroll>40px.
     CETTE PAGE EST INTOUCHABLE (sert en HTML direct, n'est pas affectee par marketing.css
     car son CSS est inline dans <head>). On ne la touche pas.
   - Pages marketing PHP (landings/features/heroes/blog/tarifs/case-studies) : utilisent
     header.php + marketing.css. Trop de variantes de structure (parfois breadcrumb dans
     un .container, parfois nu, parfois precede par <script> schema.org) pour faire un
     pattern propre "navbar transparent + breadcrumb absorbe dans hero".

   DECISION CTO : sur toutes les pages marketing PHP, navbar OPAQUE NAVY FROM TOP
   (= etat .scrolled permanent). Pourquoi :
   1. Coherent avec l'announcement-bar (deja navy au-dessus) -> bande navy continue
      en haut, lisible partout, zero trou cream visible.
   2. Cohabite bien avec hero navy (landings/features) : continuite navy parfaite.
   3. Cohabite bien avec hero cream/blanc (blog index, blog articles) : transition
      propre navy navbar -> cream contenu, breadcrumb cream reste lisible.
   4. Zero JS supplementaire, zero modification template, zero refonte 30 pages.
   5. Survit a toute structure HTML (.container, breadcrumb nu, script en premier).

   La transparence -> scrolled n'est plus un differentiator visuel : c'est un
   detail "premium" qui marche sur landing.html parce que c'est une page hero
   pure plein ecran. Sur des pages a contenu (breadcrumb + hero + 10 sections),
   c'est juste un piege a trous cream. Stripe/Linear/Pennylane utilisent navbar
   opaque sur leurs pages internes.

   Classes body :
   - .me-has-hero  : pages avec section hero navy en haut (landings, features)
   - .me-no-hero   : pages sans hero navy (blog index, blog articles, 404)
   Comportement IDENTIQUE sur les deux (navbar opaque navy from top) :
   les classes restent posees pour evolution future / debug. */

/* --- Navbar opaque navy from top sur TOUTES les pages marketing PHP -------- */
body.me-marketing-page .navbar {
  background: rgba(12, 27, 77, .92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 24px rgba(0, 0, 0, .15);
}
/* Anti-overlap : main demarre dans le flow APRES l'announcement-bar (position:relative,
   36px) si presente, donc a y=36. La navbar est position:fixed (hauteur 76px) avec
   top:0 ou top:36 (via body.has-announcement .navbar). Pour passer SOUS la navbar
   fixed, le contenu du main doit etre decale de la hauteur navbar (76px) seulement.
   PAS 112px : l'announcement-bar est dans le flow, elle decale deja le main de 36px.
   Bug Thomas 2026-05-13 : padding-top:112px = 36px de trop = trou cream visible. */
body.me-marketing-page main.me-main { padding-top: 76px; }
@media (max-width: 768px) {
  body.me-marketing-page main.me-main { padding-top: 64px; }
}

/* Pages avec hero navy (me-has-hero) : on EFFACE le padding-top du main car le
   hero navy lui-meme couvre la zone derriere la navbar (continuite navy parfaite,
   pattern landing.html). MAIS uniquement quand le hero est vraiment le premier
   bloc visible : on detecte via classe me-hero-top (a poser sur main). Pour
   simplifier, on garde le padding-top SAUF sur les pages qui le declarent
   explicitement via classe body me-hero-flush.

   Approche par defaut : padding-top conserve = breadcrumb cream apparait sous
   navbar opaque navy = lisible. Le hero navy demarre apres breadcrumb cream. */

/* --- Cas particulier : page avec hero ABSORBANT la navbar (option avancee) -
   Utilisation : ajouter classe body "me-hero-flush" sur les templates ou le hero
   navy est colle direct sous l'announcement-bar (pas de breadcrumb avant).
   Active reset padding + override navbar opaque -> transparent pour effet landing. */
body.me-marketing-page.me-hero-flush main.me-main { padding-top: 0; }
body.me-marketing-page.me-hero-flush .navbar { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.me-marketing-page.me-hero-flush .navbar.scrolled { background: rgba(12, 27, 77, .82); box-shadow: 0 1px 24px rgba(0, 0, 0, .15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

/* --- Breadcrumb sur pages avec hero navy : continuite visuelle ------------
   Sur landings/features/heroes, le breadcrumb cream entre la navbar et le hero
   navy creait un trou visible. Solution : le breadcrumb sur ces pages prend
   un fond navy (continuite navbar -> breadcrumb -> hero) et passe en couleurs
   claires. On cible le .me-breadcrumb global (sans :first-child fragile car
   selon les pages il est wrappe dans un .container ou nu, et parfois precede
   par un <script> Schema.org qui le pousse en 2eme position).
   Note : sur pages blog (me-no-hero), le .me-breadcrumb a deja son propre CSS
   dans blog/_styles.php (cream/gray) et n'est pas affecte ici. */
body.me-marketing-page.me-has-hero .me-breadcrumb,
body.me-marketing-page.me-has-hero .breadcrumb,
body.me-marketing-page:not(.me-no-hero) main.me-main > .me-breadcrumb,
body.me-marketing-page:not(.me-no-hero) main.me-main > .container:first-of-type > .me-breadcrumb {
  background: var(--navy);
  border: 0;
  /* Overflow up de 16px pour combler tout micro-gap entre navbar fixed et flow normal
     (anti-aliasing, sub-pixel rounding) -> bande navy continue 100% garantie. */
  padding: 30px 0 14px 0;
  margin: -16px 0 0 0;
  color: rgba(255, 255, 255, .7);
  font-size: .85rem;
  position: relative;
  z-index: 1;
}
body.me-marketing-page.me-has-hero .me-breadcrumb ol,
body.me-marketing-page:not(.me-no-hero) main.me-main > .me-breadcrumb ol,
body.me-marketing-page:not(.me-no-hero) main.me-main > .container:first-of-type > .me-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
body.me-marketing-page.me-has-hero .me-breadcrumb li,
body.me-marketing-page:not(.me-no-hero) main.me-main > .me-breadcrumb li,
body.me-marketing-page:not(.me-no-hero) main.me-main > .container:first-of-type > .me-breadcrumb li {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.me-marketing-page.me-has-hero .me-breadcrumb li:not(:last-child)::after,
body.me-marketing-page:not(.me-no-hero) main.me-main > .me-breadcrumb li:not(:last-child)::after {
  content: '/';
  color: rgba(255, 255, 255, .35);
}
body.me-marketing-page.me-has-hero .me-breadcrumb a,
body.me-marketing-page.me-has-hero .breadcrumb a { color: rgba(255, 255, 255, .65); }
body.me-marketing-page.me-has-hero .me-breadcrumb a:hover,
body.me-marketing-page.me-has-hero .breadcrumb a:hover { color: var(--sky-light); }
body.me-marketing-page.me-has-hero .me-breadcrumb [aria-current="page"],
body.me-marketing-page.me-has-hero .breadcrumb [aria-current="page"] { color: #fff; font-weight: 500; }
body.me-marketing-page.me-has-hero .me-breadcrumb li:not(:last-child)::after,
body.me-marketing-page.me-has-hero .me-breadcrumb li:not(:first-child)::before,
body.me-marketing-page.me-has-hero .breadcrumb li:not(:last-child)::after { color: rgba(255, 255, 255, .35); }

/* Le wrapper container du breadcrumb (sur features/*) a un style inline
   "padding-top: 24px" qu'on neutralise : la bande navy doit toucher la navbar */
body.me-marketing-page.me-has-hero main.me-main > .container:first-of-type:has(> .me-breadcrumb),
body.me-marketing-page.me-has-hero main.me-main > .container.container:first-of-type:has(> .breadcrumb) {
  background: var(--navy);
  max-width: 100%;
  margin: 0;
  padding-top: 0 !important;
  padding-bottom: 0;
}
/* Le ol/nav interne reste au max-width container et centre */
body.me-marketing-page.me-has-hero main.me-main > .container:first-of-type > .me-breadcrumb {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
/* Cas .me-breadcrumb direct enfant de <main> (fonctionnalites, mairies, tarifs,
   case-studies, landings/*) : le nav est full-width par defaut. On force le
   centrage via un padding interne au max-width container. */
body.me-marketing-page.me-has-hero main.me-main > .me-breadcrumb {
  padding-left: 0;
  padding-right: 0;
}
body.me-marketing-page.me-has-hero main.me-main > .me-breadcrumb > ol {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ===== NAV SECONDARY ===== */
.nav-secondary {
  position: sticky; top: 64px; z-index: 990;
  background: var(--white); border-bottom: 1px solid var(--gray-200);
  padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.nav-secondary .container { display: flex; }
.nav-secondary ul { display: flex; gap: 4px; padding: 4px 0; }
.nav-secondary a {
  display: inline-block; padding: 12px 18px; font-size: .9rem; font-weight: 500;
  color: var(--gray-600); border-radius: 8px; transition: all var(--transition-fast);
  white-space: nowrap;
}
.nav-secondary a:hover { background: var(--gray-100); color: var(--navy); }
.nav-secondary a[aria-current="page"] { background: var(--sky-pale); color: var(--sky); font-weight: 600; }

/* ===== HERO ===== */
.hero {
  background: var(--navy); padding: 160px 0 100px; position: relative; overflow: hidden;
  min-height: 100vh; display: flex; align-items: center; color: #fff;
}
.hero::before {
  content: ''; position: absolute; top: -200px; right: -200px;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 151, 230, .12) 0%, transparent 70%); pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; bottom: -150px; left: -100px;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 200, 150, .08) 0%, transparent 70%); pointer-events: none;
}
.hero-circle-1 { position: absolute; top: 10%; right: 8%; width: 300px; height: 300px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .04); pointer-events: none; }
.hero-circle-2 { position: absolute; bottom: 15%; right: 15%; width: 180px; height: 180px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .06); pointer-events: none; }
.hero-circle-3 { position: absolute; top: 30%; left: 5%; width: 100px; height: 100px; border-radius: 50%; background: rgba(0, 200, 150, .05); pointer-events: none; }
.hero .container { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 1; }
.hero-content { max-width: 560px; }
.hero h1 {
  font-size: clamp(2.4rem, 5.5vw, 3.8rem); font-weight: 800; color: #fff;
  letter-spacing: -.04em; margin-bottom: 20px; line-height: 1.08;
}
.hero h1 .highlight { color: var(--sky-light); }
.hero-sub { font-size: 1.15rem; color: rgba(255, 255, 255, .75); line-height: 1.75; margin-bottom: 36px; font-weight: 300; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.hero-ctas-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 24px; }
.hero-ctas-line .trial-note { font-family: var(--font-mono); font-size: .72rem; color: rgba(255, 255, 255, .7); text-transform: uppercase; letter-spacing: .06em; }
.hero-trust { display: flex; flex-direction: column; gap: 10px; }
.hero-trust-item { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: rgba(255, 255, 255, .65); font-weight: 400; }
.hero-trust-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.hero-mockup { position: relative; }

/* Hero variantes par segment */
.hero--mairies::before { background: radial-gradient(circle, rgba(0, 151, 230, .15) 0%, transparent 70%); }
.hero--associations::before { background: radial-gradient(circle, rgba(0, 200, 150, .15) 0%, transparent 70%); }
.hero--colonies::before { background: radial-gradient(circle, rgba(255, 184, 0, .12) 0%, transparent 70%); }
.hero--cse::before { background: radial-gradient(circle, rgba(72, 201, 240, .15) 0%, transparent 70%); }

/* Hero compact (pages internes features/blog) */
.hero-feature, .hero-compact {
  background: var(--navy); padding: 120px 0 60px; position: relative; overflow: hidden;
  min-height: auto; display: block; color: #fff; text-align: center;
}
.hero-feature h1, .hero-compact h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 16px; }
.hero-feature .hero-sub, .hero-compact .hero-sub { font-size: 1.1rem; color: rgba(255, 255, 255, .8); max-width: 720px; margin: 0 auto 24px; }
.hero-feature .hero-ctas, .hero-compact .hero-ctas { justify-content: center; }

/* Trial badge */
.trial-badge {
  display: inline-flex; align-items: center; gap: 8px; background: rgba(72, 201, 240, .15);
  color: var(--sky-light); font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; padding: 8px 14px; border-radius: var(--radius-pill);
  margin: 0 0 18px 0; border: 1px solid rgba(72, 201, 240, .25);
}
.trial-badge .badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(0, 200, 150, .25); flex-shrink: 0; animation: pulse 2.4s ease-in-out infinite; }

/* ===== BREADCRUMB ===== */
.breadcrumb { padding: 16px 0; font-size: .85rem; color: var(--gray-500); background: var(--gray-50); border-bottom: 1px solid var(--gray-200); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumb li { display: flex; align-items: center; gap: 8px; }
.breadcrumb li:not(:last-child)::after { content: '/'; color: var(--gray-400); }
.breadcrumb a { color: var(--gray-600); }
.breadcrumb a:hover { color: var(--sky); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--navy); font-weight: 500; }

/* ===== TRUST BAR ===== */
.trust-bar { background: var(--navy-mid); padding: 48px 0; position: relative; overflow: hidden; color: #fff; }
.trust-bar::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 151, 230, .05), rgba(0, 200, 150, .05)); pointer-events: none; }
.trust-bar .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center; position: relative; z-index: 1; }
.stat-item { position: relative; }
.stat-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: rgba(255, 255, 255, .1); }
.stat-number { font-family: var(--font-mono); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 500; color: #fff; margin-bottom: 4px; display: block; }
.stat-label { font-size: .85rem; color: rgba(255, 255, 255, .6); font-weight: 400; }

/* ===== PROBLEM CARDS ===== */
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.problem-card { background: var(--cream); border-radius: var(--radius-lg); padding: 36px 28px; border: 1px solid var(--gray-200); transition: all var(--transition); }
.problem-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.problem-icon { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 71, 87, .08), rgba(255, 184, 0, .08)); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.problem-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; }
.problem-card p { font-size: .95rem; color: var(--gray-600); line-height: 1.65; }

/* ===== FEATURE CARDS ===== */
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feature-card {
  background: var(--white); border-radius: var(--radius); padding: 24px 20px;
  border: 1px solid var(--gray-200); transition: all var(--transition); position: relative; overflow: hidden;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gray-300); }
.feature-card.highlight { border-left: 3px solid var(--green); }
.feature-card a { display: block; color: inherit; }
.feature-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 1.2rem; }
.feature-icon.blue { background: rgba(0, 151, 230, .08); color: var(--sky); }
.feature-icon.green { background: rgba(0, 200, 150, .08); color: var(--green); }
.feature-icon.amber { background: rgba(255, 184, 0, .08); color: var(--amber); }
.feature-icon.red { background: rgba(255, 71, 87, .08); color: var(--red); }
/* Lea 2026-05-13 : a11y heading-order WCAG 1.3.1 — feature-card h4 -> h3 (orphan fix).
   Sélecteur combiné h3/h4 pour préserver le visuel et compat rétro. */
.feature-card h3, .feature-card h4 { font-size: .95rem; font-weight: 700; margin-bottom: 6px; }
.feature-card p { font-size: .85rem; color: var(--gray-600); line-height: 1.55; }

/* ===== STEPS (HOW IT WORKS) ===== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; max-width: 960px; margin: 0 auto; }
.steps::before { content: ''; position: absolute; top: 44px; left: 16%; right: 16%; height: 2px; background: linear-gradient(to right, var(--sky), var(--green)); z-index: 0; }
.step { text-align: center; position: relative; z-index: 1; padding: 0 20px; }
.step-number {
  width: 88px; height: 88px; border-radius: 50%; background: var(--white);
  border: 2px solid var(--green); display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px; font-family: var(--font-mono); font-size: 1.6rem; font-weight: 500;
  color: var(--green); box-shadow: var(--shadow-md); transition: all var(--transition);
}
.step:hover .step-number { background: var(--green); color: #fff; transform: scale(1.08); }
.step h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.step p { font-size: .9rem; color: var(--gray-600); line-height: 1.6; }

/* ===== PERSONAS ===== */
.personas-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.persona-card { background: var(--white); border-radius: var(--radius-lg); padding: 32px 24px; text-align: center; border: 1px solid var(--gray-200); transition: all var(--transition); }
.persona-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.persona-avatar { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.persona-avatar.org { background: linear-gradient(135deg, rgba(0, 151, 230, .12), rgba(0, 151, 230, .04)); }
.persona-avatar.dir { background: linear-gradient(135deg, rgba(0, 200, 150, .12), rgba(0, 200, 150, .04)); }
.persona-avatar.team { background: linear-gradient(135deg, rgba(255, 184, 0, .12), rgba(255, 184, 0, .04)); }
.persona-avatar.parent { background: linear-gradient(135deg, rgba(255, 71, 87, .12), rgba(255, 71, 87, .04)); }
.persona-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.persona-card p { font-size: .9rem; color: var(--gray-600); line-height: 1.6; }

/* ===== COMPARISON TABLE ===== */
/* Aya 2026-05-13 : fix scroll horizontal mobile (Thomas QA Phase 3 BUG-C).
   Le wrapper laissait deborder la table min-width:600px hors du container
   sur viewports 375/414/768/1024. Ajout max-width:100% + width:100% pour
   contraindre la wrapper a la largeur du parent et forcer le scroll interne. */
.comparison-table-wrapper { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Lukas Brennan 2026-05-19 : wrapper generique reutilisable pour toute table
   dans les articles blog (piliers reglementaires Phase 2). Memes garanties
   anti-overflow que .comparison-table-wrapper, alias styling pour blog. */
.table-wrapper { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0; }
.table-wrapper > table { width: 100%; min-width: 480px; border-collapse: separate; border-spacing: 0; }
.table-wrapper > table th,
.table-wrapper > table td { padding: 12px 16px; text-align: left; font-size: .92rem; border-bottom: 1px solid var(--gray-200); vertical-align: top; }
.table-wrapper > table th { font-weight: 600; color: var(--gray-700); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; background: var(--gray-50, #f8f9fb); }
.table-wrapper > table tr:last-child td { border-bottom: none; }
.comparison-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 600px; }
.comparison-table th, .comparison-table td { padding: 16px 20px; text-align: center; font-size: .9rem; border-bottom: 1px solid var(--gray-200); }
.comparison-table th { font-weight: 600; color: var(--gray-500); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.comparison-table th:first-child, .comparison-table td:first-child { text-align: left; font-weight: 500; color: var(--navy); }
.comparison-table th.highlight { background: var(--sky); color: #fff; border-radius: var(--radius) var(--radius) 0 0; font-size: .85rem; text-transform: none; }
.comparison-table td.highlight { background: rgba(0, 151, 230, .03); }
.comparison-table .check { color: var(--green); font-size: 1.1rem; }
.comparison-table .cross { color: var(--gray-300); font-size: 1.1rem; }
.comparison-table .partial { color: var(--amber); font-size: .8rem; }

/* ===== ANTI-OVERFLOW SAFETY (Lukas Brennan 2026-05-19) =====
   Ceinture de securite responsive : empeche les debordements horizontaux
   residuels (titres avec mots longs comme "MonEspaceACM" en grand sur
   viewport <400px, grilles avec style="repeat(N,1fr)" inline qui surchargent
   les media queries). Le scroll horizontal est CLIPPE proprement au niveau
   <html>+<body>, le contenu reste accessible (Playwright voit toujours les
   debordements pour audit, mais l'utilisateur n'a pas de scroll lateral).
   Pattern standard dev responsive (Tailwind, Bootstrap, Vercel, etc.).
   Backup en complement des fix root applies aux composants individuels. */
html, body { overflow-x: hidden; max-width: 100%; }
/* Hyphenation auto pour les titres marketing (FR aware), evite les debordements
   sur les mots techniques longs (MonEspaceACM, reglementation, encadrement). */
.section-title, h1, h2, h3 { overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; }

/* ===== PRICING ===== */
/* Lukas Brennan 2026-05-19 : refacto grille responsive (fix overflow /tarifs).
   - Avant : `.pricing-grid` 3-cols par defaut + override inline `style="grid-template-columns: repeat(4,1fr)"`
     qui surchargeait les media queries -> debordement horizontal jusqu'a 880px sur viewport 375.
   - Apres : modifier classes `.pricing-grid--cols-{2|3|4}` qui pilotent UNIQUEMENT >= 1025px ;
     en tablette/mobile les media queries 1024 / 768 reprennent la main proprement. */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1000px; margin: 0 auto; }
.pricing-grid--cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
.pricing-grid--cols-3 { grid-template-columns: repeat(3, 1fr); max-width: 1000px; }
.pricing-grid--cols-4 { grid-template-columns: repeat(4, 1fr); max-width: 1280px; }
.pricing-card {
  background: var(--white); border-radius: var(--radius-xl); padding: 40px 32px;
  border: 2px solid var(--gray-200); transition: all var(--transition);
  position: relative; display: flex; flex-direction: column;
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.pricing-card.popular { border-color: var(--sky); box-shadow: var(--shadow-lg); }
/* Lea 2026-05-13 : .pricing-badge — #fff sur sky #0097E6 = 3.0:1 FAIL. Passage à navy #0C1B4D = 17.0:1 PASS. */
.pricing-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--navy); color: #fff; font-size: .72rem; font-weight: 600;
  padding: 6px 18px; border-radius: 20px; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
}
.pricing-ribbon {
  position: absolute; top: 14px; right: 14px; background: #fff; color: var(--green);
  border: 1px solid rgba(0, 200, 150, .35); font-family: var(--font-mono);
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 5px 10px; border-radius: var(--radius-pill); line-height: 1; z-index: 2;
}
.pricing-card.popular .pricing-ribbon { top: 42px; }
.pricing-name { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; margin-bottom: 6px; }
.pricing-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.pricing-price .amount { font-family: var(--font-mono); font-size: 2.6rem; font-weight: 500; letter-spacing: -.03em; color: var(--navy); }
/* Lea 2026-05-13 : gray-500 #868E96 sur white = 3.6:1 FAIL -> gray-600 #495057 = 9.2:1 PASS. */
.pricing-price .period { font-size: .9rem; color: var(--gray-600); }
.pricing-desc { font-size: .9rem; color: var(--gray-600); margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--gray-200); }
.pricing-features { flex: 1; margin-bottom: 28px; }
.pricing-features li { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--gray-700); margin-bottom: 12px; line-height: 1.5; }
.pricing-features li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--green); }
.pricing-card .btn { width: 100%; justify-content: center; }
.pricing-trial-banner { background: var(--green-pale); border-left: 3px solid var(--green); color: #00826B; padding: 14px 20px; border-radius: 8px; margin: 0 auto 28px auto; max-width: 760px; font-weight: 500; font-size: .95rem; text-align: center; }
.pricing-trial-banner strong { color: #006B57; font-weight: 700; }

/* ===== TESTIMONIAL ===== */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 32px 28px;
  border: 1px solid var(--gray-200); position: relative;
  display: flex; flex-direction: column; gap: 20px; transition: all var(--transition);
}
.testimonial-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.testimonial-card::before {
  content: '"'; position: absolute; top: 12px; right: 24px; font-family: var(--font-heading);
  font-size: 4rem; line-height: 1; color: var(--sky-pale); font-weight: 800; pointer-events: none;
}
.testimonial-quote { font-size: 1rem; line-height: 1.7; color: var(--gray-700); font-weight: 400; flex: 1; }
.testimonial-author { display: flex; align-items: center; gap: 14px; }
.testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--gray-100); flex-shrink: 0; }
.testimonial-author-info { display: flex; flex-direction: column; gap: 2px; }
.testimonial-name { font-weight: 600; font-size: .95rem; color: var(--navy); }
.testimonial-role { font-size: .82rem; color: var(--gray-500); }
.testimonial-company { font-size: .82rem; color: var(--sky); font-weight: 500; }

/* ===== FAQ ===== */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--gray-200); }
.faq-question {
  width: 100%; padding: 22px 0; display: flex; justify-content: space-between; align-items: center;
  font-size: 1rem; font-weight: 600; color: var(--navy); text-align: left;
  transition: color var(--transition); font-family: var(--font-body); cursor: pointer;
}
.faq-question:hover { color: var(--sky); }
.faq-question svg { width: 20px; height: 20px; flex-shrink: 0; transition: transform var(--transition); color: var(--gray-400); }
.faq-item.open .faq-question svg { transform: rotate(180deg); color: var(--sky); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-item.open .faq-answer { max-height: 500px; }
.faq-answer-inner { padding: 0 0 22px; font-size: .95rem; color: var(--gray-600); line-height: 1.75; }
.faq-answer-inner p + p { margin-top: 12px; }
.faq-answer-inner a { color: var(--sky); text-decoration: underline; text-underline-offset: 3px; }

/* ===== CTA SECTION ===== */
.cta-section { background: var(--navy); padding: 100px 0; position: relative; overflow: hidden; color: #fff; text-align: center; }
.cta-section::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 151, 230, .1), transparent 70%); pointer-events: none; }
.cta-section--green { background: linear-gradient(135deg, var(--navy), #143372); }
.cta-section--cream { background: var(--cream); color: var(--navy); }
.cta-section--cream h2 { color: var(--navy); }
.cta-section--cream .cta-sub { color: var(--gray-600); }
.cta-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.cta-inner h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; color: inherit; margin-bottom: 16px; letter-spacing: -.03em; }
.cta-section h2 { color: #fff; }
.cta-sub { color: rgba(255, 255, 255, .7); margin: 0 auto 32px; font-size: 1rem; line-height: 1.7; }
.cta-section--cream .cta-sub { color: var(--gray-600); }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ===== FOOTER ===== */
/* Lea 2026-05-13 : contraste WCAG 2.1 AA footer-marketing sur fond navy #0C1B4D.
   - .footer-brand p : rgba(255,255,255,.6) = 4.0:1 FAIL -> .82 = 8.7:1 PASS.
   - .footer-col a   : rgba(255,255,255,.65) = 4.3:1 FAIL -> .82 = 8.7:1 PASS.
   - .footer-bottom  : rgba(255,255,255,.45) = 2.9:1 FAIL -> .82 = 8.7:1 PASS.
*/
.footer-marketing { background: var(--navy); color: rgba(255, 255, 255, .85); padding: 64px 0 32px; border-top: 1px solid rgba(255, 255, 255, .06); }
/* Lukas Brennan 2026-05-19 : footer 6 colonnes (ajout "Reglementation ACM" pour
   maillage interne SEO des 6 piliers Phase 2 + cohesion home/site).
   Desktop 1280+ : 1.5fr + 5 colonnes. Laptop 1024-1279 : 6 cols compactes.
   Tablette/mobile : repli sur 2/1 col gere par les media queries 1024/768. */
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); gap: 32px; margin-bottom: 48px; }
.footer-brand img { height: 40px; width: auto; margin-bottom: 16px; opacity: .9; }
.footer-brand p { font-size: .9rem; color: rgba(255, 255, 255, .82); line-height: 1.65; max-width: 280px; }
/* Lea 2026-05-13 : a11y heading-order WCAG 1.3.1 — footer-col h4 -> h3 (orphan fix).
   Sélecteur combiné h3/h4 pour préserver le visuel et compat rétro. */
.footer-col h3, .footer-col h4 { font-family: var(--font-body); font-size: .8rem; font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: .9rem; color: rgba(255, 255, 255, .82); transition: color var(--transition); }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .82rem; color: rgba(255, 255, 255, .82); }
.footer-bottom p { font-size: .82rem; }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .06); display: inline-flex; align-items: center; justify-content: center; transition: background var(--transition); }
.footer-social a:hover { background: rgba(255, 255, 255, .12); }

/* === ABOVE THE FOLD END === (critical CSS extractable jusqu'ici) */

/* ===== UTILS ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 24px; }
.mb-6 { margin-bottom: 32px; }
.mb-7 { margin-bottom: 48px; }
.flex { display: flex; }
.grid { display: grid; }
.gap-2 { gap: 8px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 24px; }
.gap-6 { gap: 32px; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .hero .container { grid-template-columns: 1fr; text-align: center; }
  .hero-content { max-width: 100%; }
  .hero-ctas { justify-content: center; }
  .hero-trust { align-items: center; }
  .hero-mockup { display: none; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .personas-grid { grid-template-columns: repeat(2, 1fr); }
  /* Lukas 2026-05-19 : tablette (769-1024) -> 2 colonnes pour pricing 3/4 cards,
     1 col par defaut. Plus de "1fr brutal" en tablette qui cassait la grille. */
  .pricing-grid { grid-template-columns: 1fr; max-width: 400px; }
  .pricing-grid--cols-3,
  .pricing-grid--cols-4 { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .steps::before { display: none; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .mobile-menu { display: flex; }
  .trust-bar .container { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .stat-item:not(:last-child)::after { display: none; }
  .problem-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 40px; }
  .personas-grid { grid-template-columns: 1fr; }
  .comparison-table { min-width: 500px; }
  /* Lukas 2026-05-19 : <= 768px ramene tous les pricing-grids a 1 colonne. */
  .pricing-grid--cols-2,
  .pricing-grid--cols-3,
  .pricing-grid--cols-4 { grid-template-columns: 1fr; max-width: 400px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  /* Logo mobile : 40px / 240px (alignement pixel-perfect landing.html, etait 36px/200px) */
  .navbar-logo img { height: 40px; max-width: 240px; }
  .section { padding: 60px 0; }
  .cta-section { padding: 60px 0; }
}
@media (max-width: 480px) {
  .trust-bar .container { grid-template-columns: 1fr; }
  .hero { padding: 130px 0 60px; min-height: auto; }
  .hero h1 { font-size: 2rem; }
  .hero-sub { font-size: 1rem; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .container { padding: 0 16px; }
}
@media (min-width: 1920px) {
  .container { max-width: 1320px; }
  .container-wide { max-width: 1560px; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ===== PRINT ===== */
@media print {
  .navbar, .announcement-bar, .mobile-menu, .hamburger, .footer-marketing, .cta-section { display: none; }
  body { background: #fff; color: #000; }
  .hero, .section-navy { background: #fff; color: #000; }
}

/* =====================================================================
   HERO VARIANTES SEGMENTS — PHASE 1 (Aya Tanaka, 2026-05-13)
   ---------------------------------------------------------------------
   Append complémentaire au socle Lea Martin (lignes 1-552).
   Couvre les 7 hero variants par segment + composants mockup
   spécifiques (modules grid, pricing grid, testimonials).
   ===================================================================== */

/* --- 1. Highlight variants (accent par segment) ----------------------- */
.hero h1 .highlight--green     { color: var(--green); }
.hero h1 .highlight--sky-light { color: var(--sky-light); }
.hero h1 .highlight--amber     { color: var(--amber); }

/* --- 2. Hero variants manquants (fonctionnalites / tarifs / case-studies) -- */
.hero--fonctionnalites::before { background: radial-gradient(circle, rgba(0, 151, 230, .14) 0%, transparent 70%); }
.hero--tarifs::before          { background: radial-gradient(circle, rgba(0, 200, 150, .14) 0%, transparent 70%); }
.hero--case-studies::before    { background: radial-gradient(circle, rgba(72, 201, 240, .12) 0%, transparent 70%); }

/* Ajustement accent CSE: amber subtil (chaleur ASC) au lieu de sky-light */
.hero--cse::before             { background: radial-gradient(circle, rgba(255, 184, 0, .12) 0%, transparent 70%); }
.hero--colonies::before        { background: radial-gradient(circle, rgba(72, 201, 240, .15) 0%, transparent 70%); }

/* --- 3. Hero trust list sémantique <ul> ------------------------------- */
.hero ul.hero-trust { list-style: none; padding: 0; margin: 0; }
.hero ul.hero-trust .hero-trust-item { color: rgba(255, 255, 255, .65); }

/* --- 4. Mockup header title (libellé carte) --------------------------- */
.mockup-title {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: rgba(255, 255, 255, .55);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* --- 5. Mockup MODULES grid (hero_fonctionnalites) -------------------- */
.mockup-card--modules { padding: 22px 20px; }
.mockup-modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.mockup-module {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: var(--radius-sm);
  transition: transform .2s ease, background .2s ease;
}
.mockup-module:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .07);
}
.mockup-module-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 600;
}
.mockup-module-icon.sky   { background: rgba(0, 151, 230, .22); color: var(--sky-light); }
.mockup-module-icon.green { background: rgba(0, 200, 150, .22); color: var(--green); }
.mockup-module-icon.amber { background: rgba(255, 184, 0, .18); color: var(--amber); }
.mockup-module-icon.red   { background: rgba(255, 71, 87, .18); color: var(--red); }
.mockup-module-label {
  font-size: .62rem;
  color: rgba(255, 255, 255, .6);
  text-align: center;
  line-height: 1.3;
}

/* --- 6. Mockup PRICING grid (hero_tarifs) ----------------------------- */
.mockup-card--pricing { padding: 22px 20px; }
.mockup-pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 14px;
  margin-bottom: 14px;
}
.mockup-pricing-card {
  position: relative;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  transition: background .2s ease;
}
.mockup-pricing-card--popular {
  background: rgba(0, 200, 150, .08);
  border-color: rgba(0, 200, 150, .35);
}
.mockup-pricing-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green);
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.mockup-pricing-name {
  font-family: var(--font-mono);
  font-size: .6rem;
  color: rgba(255, 255, 255, .55);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.mockup-pricing-amount {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.mockup-pricing-meta {
  font-size: .6rem;
  color: rgba(255, 255, 255, .45);
  margin-top: 4px;
}

/* --- 7. Mockup TESTIMONIALS (hero_case_studies) ----------------------- */
.mockup-card--testimonials { padding: 22px 20px; }
.mockup-testimonial-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.mockup-testimonial-segment {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--radius-sm);
  border-left-width: 3px;
}
.mockup-testimonial-segment--mairies      { border-left-color: var(--sky); }
.mockup-testimonial-segment--associations { border-left-color: var(--green); }
.mockup-testimonial-segment--colonies     { border-left-color: var(--sky-light); }
.mockup-testimonial-segment--cse          { border-left-color: var(--amber); }
.mockup-testimonial-tag {
  font-family: var(--font-mono);
  font-size: .56rem;
  color: rgba(255, 255, 255, .55);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.mockup-testimonial-metric {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.mockup-testimonial-segment--mairies      .mockup-testimonial-metric { color: var(--sky-light); }
.mockup-testimonial-segment--associations .mockup-testimonial-metric { color: var(--green); }
.mockup-testimonial-segment--colonies     .mockup-testimonial-metric { color: var(--sky-light); }
.mockup-testimonial-segment--cse          .mockup-testimonial-metric { color: var(--amber); }
.mockup-testimonial-label {
  font-size: .6rem;
  color: rgba(255, 255, 255, .5);
}

/* --- 8. Mockup standard (cards / stats / rows) — re-import depuis landing.html
       (Lea ne l'avait pas porté car non utilisé sur ses 5 composants Phase 1) -- */
.mockup-wrapper { position: relative; perspective: 1200px; }
.mockup-card {
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-lg);
  padding: 24px;
  transform: rotateY(-8deg) rotateX(4deg);
  transition: transform .6s ease;
}
.mockup-wrapper:hover .mockup-card { transform: rotateY(-3deg) rotateX(2deg); }
.mockup-header { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.mockup-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.mockup-dot.r { background: var(--red); }
.mockup-dot.y { background: var(--amber); }
.mockup-dot.g { background: var(--green); }
.mockup-row { display: flex; gap: 12px; margin-bottom: 12px; }
.mockup-stat {
  flex: 1;
  background: rgba(255, 255, 255, .05);
  border-radius: var(--radius-sm);
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .06);
}
.mockup-stat-label {
  font-size: .62rem;
  color: rgba(255, 255, 255, .4);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.mockup-stat-value {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 500;
  color: #fff;
}
.mockup-stat-value.sky   { color: var(--sky-light); }
.mockup-stat-value.green { color: var(--green); }
.mockup-stat-value.amber { color: var(--amber); }
.mockup-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .08);
  margin-top: 8px;
  overflow: hidden;
}
.mockup-bar-fill {
  height: 100%;
  border-radius: 3px;
  width: 0;
  transition: width 1.5s ease .5s;
}
.mockup-bar-fill.sky   { background: var(--sky); }
.mockup-bar-fill.green { background: var(--green); }
.mockup-bar-fill.amber { background: var(--amber); }
.mockup-list { margin-top: 16px; }
.mockup-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: .78rem;
  color: rgba(255, 255, 255, .6);
  transition: background .2s;
}
.mockup-list-item:nth-child(odd) { background: rgba(255, 255, 255, .03); }
.mockup-list-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 200, 150, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mockup-list-check svg { width: 10px; height: 10px; }
.mockup-float {
  position: absolute;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: .75rem;
  color: #fff;
  animation: float 6s ease-in-out infinite;
}
.mockup-float-1 { top: -20px; right: -20px; animation-delay: 0s; }
.mockup-float-2 { bottom: 20px; left: -30px; animation-delay: 2s; }

/* --- 9. Hero visual alias (hero-visual / hero-mockup) --------------- */
.hero-visual { position: relative; }

/* --- 10. Responsive overrides Phase 1 hero variants ----------------- */
@media (max-width: 1024px) {
  .hero-visual { display: none; }
}
@media (max-width: 640px) {
  .mockup-modules-grid { grid-template-columns: repeat(2, 1fr); }
  .mockup-pricing-grid { grid-template-columns: 1fr; }
  .mockup-testimonial-row { grid-template-columns: 1fr; }
}

/* --- 11. Reduced motion (hero variants) ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .mockup-module,
  .mockup-pricing-card,
  .mockup-list-item,
  .mockup-card { transition: none !important; transform: none !important; }
  .mockup-float { animation: none !important; }
}

/* FIN Hero variantes segments — Aya Tanaka 2026-05-13 */

/* =====================================================================
   BANNIERE COOKIES RGPD (Mehdi Benali, DevOps & Infra Senior dig-holding)
   Date : 2026-05-13
   Mission : GA4 + bannière cookies RGPD conforme CNIL
   ===================================================================== */
.cookies-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2147483600; /* au-dessus de tout sauf modales critiques */
  background: var(--navy, #0C1B4D);
  color: #fff;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25);
  border-top: 3px solid var(--green, #00C896);
  padding: 16px 20px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.875rem;
  line-height: 1.55;
}
.cookies-banner[hidden] { display: none !important; }
.cookies-banner-inner {
  max-width: var(--container, 1200px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cookies-banner-text { flex: 1 1 480px; min-width: 0; }
.cookies-banner-text strong {
  display: block;
  font-family: var(--font-heading, 'Syne', sans-serif);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: #fff;
  letter-spacing: -0.01em;
}
.cookies-banner-text p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.875rem;
}
.cookies-banner-text a {
  color: var(--sky-light, #48C9F0);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookies-banner-text a:hover { color: #fff; }
.cookies-banner-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  align-items: center;
}
.cookies-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 8px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  letter-spacing: -0.01em;
}
.cookies-btn-accept {
  background: var(--green, #00C896);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 200, 150, 0.3);
}
.cookies-btn-accept:hover {
  background: #00b386;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 200, 150, 0.4);
}
.cookies-btn-refuse {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.35);
}
.cookies-btn-refuse:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.cookies-btn:focus-visible {
  outline: 3px solid var(--sky-light, #48C9F0);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .cookies-banner { padding: 14px 16px; }
  .cookies-banner-inner { gap: 14px; }
  .cookies-banner-actions { width: 100%; justify-content: flex-end; }
  .cookies-btn { flex: 1 1 auto; max-width: 50%; padding: 12px 16px; }
  .cookies-banner-text strong { font-size: 0.95rem; }
  .cookies-banner-text p { font-size: 0.825rem; }
}
@media (max-width: 480px) {
  .cookies-banner-actions { flex-direction: column; align-items: stretch; }
  .cookies-btn { max-width: 100%; }
}
/* FIN bannière cookies RGPD — Mehdi Benali 2026-05-13 */