/* ============================================================
   JPM — Jeune Patronat de Madagascar
   Design System · Foundations (colors + type)
   Source: brand-guide.md / brand-tokens.json (Logia Studios × Publicis Africa, 2026)
   Font: Inter (SIL OFL 1.1) — open-source 1:1 substitute for Instagram Sans
   ============================================================ */

/* ---- Font (Inter via Google Fonts CDN; self-host woff2 for production) ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ===========================================================
     COLOR — RAW TOKENS
     =========================================================== */

  /* Primary — Bordeaux institutionnel (55–90% of surface) */
  --primary-300: #cd0d57;  /* Magenta vif — accent in bordeaux family, CTA/highlight */
  --primary-400: #89093a;  /* Bordeaux JPM — MAIN background */
  --primary-500: #500522;  /* Wine deep — shadow, hero overlay, depth */

  /* Secondary — Bleu (25–45%) */
  --secondary-100: #6a9cff; /* Sky */
  --secondary-200: #206aff; /* Cobalt */
  --secondary-300: #0047d4; /* Royal */
  --secondary-400: #002e8a; /* Navy */
  --secondary-500: #00153f; /* Midnight — duotone half on billboards */

  /* Neutrals (text, surfaces, dividers) */
  --neutral-100: #ffffff;
  --neutral-200: #e3e3e3;
  --neutral-300: #c8c8c8;
  --neutral-400: #acacac;
  --neutral-500: #919191;
  --neutral-600: #757575;
  --neutral-700: #5a5a5a;
  --neutral-800: #3e3e3e;
  --neutral-900: #232323;
  --neutral-1000: #070707;

  /* Accents (3–5% only) */
  --accent-electric: #004cff; /* Electric blue — interactive/info */
  --accent-saffron:  #ffc300; /* Saffron yellow — labels, highlight */
  --accent-pink:     #fc68bf; /* Hot pink — tags */
  --accent-purple:   #6311a0; /* Royal purple — categorisation */
  --accent-red:      #fa1e45; /* Signal red — alert/danger */
  --accent-orange:   #ed4c05; /* Orange burn — data viz */
  --accent-yellow-10:#ffdb43; /* Light yellow */
  --accent-green-10: #1fc16b; /* Light green — success */

  /* ===========================================================
     COLOR — SEMANTIC
     =========================================================== */
  --bg-default:      var(--primary-400);   /* institutional bordeaux */
  --bg-alt:          var(--secondary-500); /* midnight navy */
  --bg-neutral:      var(--neutral-100);   /* white paper */
  --bg-deep:         var(--primary-500);   /* wine depth */

  --fg1:             var(--neutral-100);   /* primary text on dark */
  --fg2:             var(--neutral-300);   /* muted text on dark */
  --fg-on-light:     var(--neutral-1000);  /* text on white */
  --fg-on-light-2:   var(--neutral-700);   /* muted text on white */

  --cta:             var(--primary-300);   /* magenta CTA in bordeaux family */
  --link:            var(--accent-electric);

  --border-on-dark:  rgba(255,255,255,0.18);
  --border-on-light: rgba(7,7,7,0.12);
  --divider-on-dark: rgba(255,255,255,0.12);

  --success: var(--accent-green-10);
  --warning: var(--accent-saffron);
  --danger:  var(--accent-red);
  --info:    var(--accent-electric);

  /* Signature gradients */
  --grad-hero-radial: radial-gradient(circle at 50% 38%, #a30b46 0%, #89093a 60%, #500522 100%);
  --grad-duotone-split: linear-gradient(90deg, #89093a 0%, #89093a 50%, #00153f 50.01%, #00153f 100%);

  /* ===========================================================
     TYPOGRAPHY
     =========================================================== */
  --font-sans: 'Inter', 'Helvetica Neue', system-ui, -apple-system, sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* Type scale — spec values from brandbook slide 8 (px-locked).
     Note: brandbook is print/deck-scale. For screen UI, scale up via --type-scale. */
  --display-size: 54px;  --display-lh: 54px;  --display-weight: 400;
  --h1-size: 54px;       --h1-lh: 54px;       --h1-weight: 700;
  --h2-size: 42px;       --h2-lh: 42px;       --h2-weight: 700;
  --h3-size: 32px;       --h3-lh: 32px;       --h3-weight: 700;
  --h4-size: 24px;       --h4-lh: 25px;       --h4-weight: 700;
  --body-lg-size: 18px;  --body-lg-lh: 23px;  --body-lg-weight: 500;
  --body-md-size: 14px;  --body-md-lh: 18px;  --body-md-weight: 400;
  --body-sm-size: 10px;  --body-sm-lh: 15px;  --body-sm-weight: 400;
  --caption-size: 8px;   --caption-lh: 12px;  --caption-weight: 400;

  /* ===========================================================
     RADII / SHADOW / SPACING
     (brandbook is largely sharp-edged; radii reserved for cards & social)
     =========================================================== */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-card: 12px;   /* member gallery card */
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(7,7,7,0.20);
  --shadow-md: 0 6px 18px rgba(7,7,7,0.28);
  --shadow-lg: 0 18px 48px rgba(7,7,7,0.40);

  /* 4px base spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.jpm-display {
  font-family: var(--font-sans);
  font-weight: var(--display-weight);
  font-size: var(--display-size);
  line-height: var(--display-lh);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.jpm-h1 { font-family: var(--font-sans); font-weight: var(--h1-weight); font-size: var(--h1-size); line-height: var(--h1-lh); }
.jpm-h2 { font-family: var(--font-sans); font-weight: var(--h2-weight); font-size: var(--h2-size); line-height: var(--h2-lh); }
.jpm-h3 { font-family: var(--font-sans); font-weight: var(--h3-weight); font-size: var(--h3-size); line-height: var(--h3-lh); }
.jpm-h4 { font-family: var(--font-sans); font-weight: var(--h4-weight); font-size: var(--h4-size); line-height: var(--h4-lh); }
.jpm-body-lg { font-family: var(--font-sans); font-weight: var(--body-lg-weight); font-size: var(--body-lg-size); line-height: var(--body-lg-lh); }
.jpm-body-md { font-family: var(--font-sans); font-weight: var(--body-md-weight); font-size: var(--body-md-size); line-height: var(--body-md-lh); }
.jpm-body-sm { font-family: var(--font-sans); font-weight: var(--body-sm-weight); font-size: var(--body-sm-size); line-height: var(--body-sm-lh); }
.jpm-caption  { font-family: var(--font-sans); font-weight: var(--caption-weight); font-size: var(--caption-size); line-height: var(--caption-lh); }

/* Section label — uppercase tracking, the signature deck/UI label */
.jpm-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--body-md-size);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}


/* ===== Page styles (inlined from v2) ===== */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { font-family: var(--font-sans); background: #fff; color: #070707; -webkit-font-smoothing: antialiased; }

    /* ─── Layout base 1440px ─── */
    .container {
      width: 1280px;
      max-width: 100%;
      margin: 0 auto;
      padding: 0 80px;
    }

    /* ─── Section label  — LABEL ─── */
    .sec-label {
      display: flex; align-items: center; gap: 12px;
      margin-bottom: 40px;
    }
    .sec-label .bar { display: block; width: 33px; height: 2px; background: #89093a; flex-shrink: 0; }
    .sec-label span { font-size: 15px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #89093a; }
    .sec-label--white .bar  { background: #fff; }
    .sec-label--white span  { color: #fff; }

    /* ─── Buttons ─── */
    .btn {
      display: inline-flex; align-items: center; gap: 12px;
      font-family: var(--font-sans); font-size: 20px; border: none;
      cursor: pointer; border-radius: 53px; padding: 0 32px; height: 64px;
      text-decoration: none; transition: opacity .16s; white-space: nowrap;
    }
    .btn:hover { opacity: .88; }
    .btn svg { width: 20px; height: 20px; flex-shrink: 0; }
    .btn-bordeaux { background: #89093a; color: #fff; font-weight: 800; }
    .btn-outline  { background: transparent; border: 1.5px solid #00153f; color: #00153f; font-weight: 500; }
    .btn-white    { background: #fff; color: #89093a; font-weight: 800; }

    /* SVG arrow inline */
    .arrow { display:inline-block; width:20px; height:20px; vertical-align:middle; flex-shrink:0; }

    /* ═══════════════════════════════════
       HERO V2 — Full-width group photo background
    ═══════════════════════════════════ */

    /* ── Container hero ── */
    .hero-v2 {
      position: relative; width: 100%; min-height: 100vh;
      display: flex; flex-direction: column; overflow: hidden;
    }

    /* ── Photo background ── */
    .hv2-bg {
      position: absolute; inset: 0; z-index: 0;
    }
    .hv2-bg picture { display: block; width: 100%; height: 100%; }
    .hv2-bg img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: center 28%;
      filter: saturate(.9);
    }

    /* ── Overlay multi-couches ──
       1. Wash bordeaux : gauche → disparaît à 55%
       2. Vignette navy : haut transparent → bas opaque
       3. Voile de base léger pour lisibilité globale */
    .hv2-overlay {
      position: absolute; inset: 0; z-index: 1;
      background:
        linear-gradient(108deg, rgba(80,5,34,.88) 0%, rgba(137,9,58,.55) 28%, rgba(137,9,58,.1) 52%, transparent 65%),
        linear-gradient(180deg, rgba(0,21,63,.18) 0%, rgba(0,21,63,.48) 45%, rgba(0,21,63,.86) 100%),
        rgba(0,21,63,.22);
    }

    /* Grain subtil pour profondeur */
    .hv2-overlay::after {
      content: '';
      position: absolute; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
      opacity: .025;
      mix-blend-mode: overlay;
    }

    /* ── Logo Forum (en haut du hero, pas de nav) ── */
    .hv2-brand {
      position: relative; z-index: 10;
      display: flex; justify-content: center;
      padding: 40px 80px 0;
    }
    .forum-logo {
      display: inline-flex; align-items: center; gap: 18px;
    }
    .forum-tree { height: 72px; width: auto; display: block; }
    .forum-rule { width: 2px; height: 56px; background: rgba(255,255,255,.45); }
    .forum-text {
      display: flex; flex-direction: column; align-items: flex-start;
      font-family: 'Poppins', var(--font-sans); color: #fff; line-height: 1;
    }
    .ft-forum  { font-size: 24px; font-weight: 400; letter-spacing: .01em; }
    .ft-emploi { font-size: 34px; font-weight: 700; margin-top: 2px; }
    .ft-badge  {
      margin-top: 6px; align-self: stretch; text-align: center;
      font-size: 15px; font-weight: 700; letter-spacing: .28em;
      color: #fff; border: 2px solid #fff; border-radius: 4px;
      padding: 2px 0 1px; text-indent: .28em;
    }

    /* ── Contenu central ── */
    .hv2-body {
      position: relative; z-index: 2; flex: 1;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      text-align: center;
      padding: 60px 80px 160px;
      max-width: 1200px; margin: 0 auto; width: 100%;
    }
    .hv2-eyebrow {
      display: inline-flex; align-items: center; gap: 14px;
      margin-bottom: 32px;
    }
    .hv2-eyebrow .ebar { width: 28px; height: 2px; background: #250d45; }
    .hv2-eyebrow span { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.6); }

    .hv2-body h1 {
      font-size: 72px; font-weight: 900; line-height: 79px;
      color: #fff; margin-bottom: 24px; max-width: 820px;
      text-shadow: 0 2px 24px rgba(0,21,63,.4);
    }
    .hv2-body > p {
      font-size: 19px; font-weight: 400; line-height: 30px;
      color: rgba(255,255,255,.72);
      max-width: 560px; margin: 0 auto 52px;
    }
    .hv2-ctas { display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; }

    .hv2-btn-p {
      display: inline-flex; align-items: center; gap: 12px;
      background: #89093a; color: #fff;
      font-family: var(--font-sans); font-size: 18px; font-weight: 800;
      padding: 0 36px; height: 64px; border-radius: 53px;
      border: none; cursor: pointer; text-decoration: none;
      transition: opacity .16s; white-space: nowrap;
    }
    .hv2-btn-p:hover { opacity: .88; }
    .hv2-btn-p svg { width: 20px; height: 20px; flex-shrink: 0; }

    .hv2-btn-o {
      display: inline-flex; align-items: center; gap: 12px;
      background: transparent; color: #fff;
      font-family: var(--font-sans); font-size: 18px; font-weight: 500;
      padding: 0 32px; height: 64px; border-radius: 53px;
      border: 1.5px solid rgba(255,255,255,.5);
      text-decoration: none; transition: all .16s; white-space: nowrap;
    }
    .hv2-btn-o:hover { border-color: #fff; background: rgba(255,255,255,.08); }

    /* ── Stats strip — minimaliste ── */
    .hv2-stats {
      position: absolute; bottom: 0; left: 0; right: 0; z-index: 4;
      background: rgba(0,21,63,.55);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    }
    .hv2-stats-inner {
      max-width: 1280px; margin: 0 auto; padding: 0 80px;
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 0;
    }
    .hv2-stat {
      padding: 18px 20px; text-align: left;
      border-left: 1px solid rgba(255,255,255,.08);
    }
    .hv2-stat:first-child { border-left: none; }
    .hv2-stat strong {
      display: block; font-size: 18px; font-weight: 700; color: #fff;
      white-space: nowrap; letter-spacing: -.01em;
    }
    .hv2-stat span { font-size: 10px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.38); margin-top: 2px; display: block; }

    /* ── Accent ligne magenta ── */
    .hv2-accent {
      position: absolute; bottom: 73px; left: 0; right: 0; z-index: 3;
      height: 2px;
      background: linear-gradient(90deg, transparent 0%, #250d45 20%, rgba(37,13,69,.6) 70%, transparent 100%);
    }

    /* ── Responsive hero v2 ── */
    @media (max-width: 1200px) {
      .hv2-brand { padding: 32px 48px 0; }
      .hv2-body { padding: 48px 48px 160px; }
      .hv2-stats-inner { padding: 0 48px; }
    }
    @media (max-width: 768px) {
      .hv2-brand { padding: 24px 24px 0; }
      .forum-tree { height: 56px; }
      .ft-forum { font-size: 19px; } .ft-emploi { font-size: 27px; } .ft-badge { font-size: 12px; }
      /* Padding bottom = hauteur stats mobile (~112px) + marge */
      .hv2-body { padding: 32px 24px 136px; }
      .hv2-body h1 { font-size: 40px; line-height: 47px; }
      .hv2-body > p { font-size: 16px; }
      .hv2-btn-p, .hv2-btn-o { font-size: 16px; height: 56px; padding: 0 24px; }
      /* Stats : 2×2 compact */
      .hv2-stats-inner { grid-template-columns: repeat(2, 1fr); padding: 0 16px; }
      .hv2-stat { padding: 14px 14px; border-left: none; border-top: 1px solid rgba(255,255,255,.08); }
      .hv2-stat:nth-child(1), .hv2-stat:nth-child(2) { border-top: none; }
      .hv2-stat strong { font-size: 15px; }
      .hv2-stat span { font-size: 9px; letter-spacing: .08em; }
    }

    /* ─── Badges ─── */
    .badge {
      position: absolute; z-index: 2;
      background: #fff;
      border-radius: 999px;
      box-shadow: 0 8px 24px rgba(0,21,63,.13);
      display: flex; align-items: center; gap: 10px;
      padding: 6px 18px 6px 6px;
      font-size: 14px; font-weight: 700; color: #00153f;
      white-space: nowrap;
    }
    .badge-circle {
      width: 38px; height: 38px; border-radius: 50%;
      background: #00153f;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .badge-circle svg { width: 18px; height: 18px; }
    /* Badge "Accès jusqu'au 30 Novembre" — cercle à DROITE */
    .badge-right-icon {
      padding: 6px 6px 6px 18px;
      flex-direction: row-reverse; /* cercle à droite */
    }
    .badge-top    { top: 90px;  left: -30px; }
    .badge-mid    { top: 280px; right: -16px; }
    .badge-bottom { bottom: 150px; left: -24px; }

    /* ═══════════════════════════════════
       INSCRIPTION ENTREPRISE
    ═══════════════════════════════════ */
    .section-inscription {
      position: relative; z-index: 1;
      padding: 80px 0 0;
      background: transparent;
      overflow: hidden;
    }
    /* Layer_1 : watermark ghost centré derrière les cards (plus de coupe) */
    .layer1-watermark {
      position: absolute;
      left: 50%; top: 56%;
      transform: translate(-50%, -50%);
      max-width: 920px; width: 88%; height: auto;
      opacity: 0.04;
      pointer-events: none; z-index: 0;
    }
    .section-inscription .container { position: relative; z-index: 1; }
    .inscription-head {
      text-align: center;
      margin-bottom: 56px;
    }
    .inscription-head h2 {
      font-size: 68px; font-weight: 900; line-height: 74px;
      color: #00153f; margin-bottom: 20px;
    }
    .inscription-head p {
      font-size: 20px; font-weight: 500; line-height: 30px;
      color: #919191; max-width: 640px; margin: 0 auto;
    }

    /* ─── 6-card grid ─── */
    .pricing-wrap { padding-bottom: 96px; }

    .prow {
      display: flex; gap: 8px; margin-bottom: 8px;
    }
    .prow:last-child { margin-bottom: 0; }

    .pcard {
      border-radius: 30px;
      padding: 32px 28px 36px;
      flex-shrink: 1;    /* autorise rétrécissement */
      min-width: 0;      /* évite overflow sur petits écrans */
      display: flex; flex-direction: column;  /* contenu vertical */
    }
    /* Ombres pour lever les cards au-dessus du watermark */
    .pcard-b1, .pcard-b2, .pcard-b3, .pcard-b4 {
      box-shadow: 0 6px 28px rgba(0,21,63,.06);
      border: 1px solid rgba(0,21,63,.04);
    }
    .pcard-pricing { box-shadow: 0 12px 40px rgba(137,9,58,.22); }
    .pcard-checklist { box-shadow: 0 12px 40px rgba(0,21,63,.28); }
    /* Row 1 — proportions en % (basées Figma 477/1096 | 325/1096 | 294/1096) */
    .pcard-pricing   { flex: 0 0 43.5%; background: #89093a; }
    .pcard-b1        { flex: 1; min-width: 200px; background: #f9f6f5; padding-top: 24px; }
    .pcard-b2        { flex: 0 0 26.8%; background: #f9f6f5; padding-top: 24px; }
    /* Row 2 — proportions en % (413/1105 | 338/1105 | 354/1105) */
    .pcard-checklist { flex: 0 0 37.4%; background: #250d45; }  /* violet Forum */
    .pcard-b3        { flex: 1; min-width: 200px; background: #f9f6f5; padding-top: 24px; }
    .pcard-b4        { flex: 0 0 32%;   background: #f9f6f5; padding-top: 24px; }

    /* Benefit icon — in-flow, top of card */
    .bcard-icon {
      width: 74px; height: 74px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 20px; flex-shrink: 0;
    }
    /* Icônes forcées en blanc → contraste uniforme sur tous les cercles colorés */
    .bcard-icon img { width: 52%; height: 52%; object-fit: contain; filter: brightness(0) invert(1); }
    /* Alternance bordeaux / violet (palette Forum) — distinctes, pas de collision navy */
    .icon-navy    { background: #89093a; }   /* bordeaux (rangée 1) */
    .icon-white   { background: #fff; }
    .icon-white img { filter: none; }  /* sur cercle blanc, garder l'icône d'origine */
    .icon-magenta { background: #250d45; }   /* violet Forum (rangée 2) */

    /* Pricing card */
    .price-label  { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); display: block; margin-bottom: 6px; }
    .price-amount { font-size: 52px; font-weight: 900; line-height: 1.05; color: #fff; display: block; margin-bottom: 6px; }
    .price-sub    { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.7); margin-bottom: 28px; }

    /* Benefit text */
    .btext       { font-size: 14px; font-weight: 500; line-height: 21px; }
    .btext-dark  { color: #3e3e3e; }
    .btext-white { color: rgba(255,255,255,.9); }

    /* Checklist card — header + pills sur fond navy */
    .pcard-checklist { justify-content: center; }
    .checklist-title {
      font-size: 13px; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; color: rgba(255,255,255,.45);
      margin-bottom: 18px;
    }
    .cpills { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
    .cpill {
      display: flex; align-items: center; gap: 12px;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 999px;
      padding: 11px 18px;
      font-size: 14px; font-weight: 600; color: #fff;
    }
    .cpill svg { width: 18px; height: 18px; flex-shrink: 0; color: rgba(255,255,255,.92); }
    /* Pill mise en avant (feature clé) — blanc plein sur fond violet → pop max */
    .cpill-right {
      background: #fff; border-color: #fff; color: #250d45;
    }
    .cpill-right svg { color: #250d45; }

    /* ═══════════════════════════════════
       CE QU'ON PROPOSE
    ═══════════════════════════════════ */
    .section-propose {
      padding: 96px 0 0; background: #fff;
    }
    .propose-top {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 64px; align-items: start; margin-bottom: 56px;
    }
    .propose-left { padding-top: 8px; }
    .propose-left p { font-size: 17px; font-weight: 400; line-height: 27px; color: #3e3e3e; margin-bottom: 16px; }
    .propose-left p:last-child { margin-bottom: 0; }
    .propose-left strong { font-weight: 700; color: #00153f; }
    .propose-left .p-price { font-weight: 700; color: #250d45; }
    h2.propose-right { font-size: 68px; font-weight: 900; line-height: 74px; color: #00153f; }

    /* Feature cards */
    .feature-row {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
      padding-bottom: 96px;
    }
    .fcard {
      background: #f9f6f5; border-radius: 32px;
      padding: 28px 28px 36px; min-height: 320px;
    }
    .fcard-icon {
      width: 73px; height: 73px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 24px;
    }
    .fcard-icon img { width: 52%; height: 52%; object-fit: contain; }
    .fcard h3 { font-size: 17px; font-weight: 700; color: #00153f; margin-bottom: 10px; line-height: 23px; }
    .fcard p  { font-size: 13px; font-weight: 400; line-height: 20px; color: #757575; }

    /* ═══════════════════════════════════
       LA PLATEFORME
    ═══════════════════════════════════ */
    .section-plateforme {
      position: relative; overflow-x: hidden;
      background: #00153f; padding: 96px 0 180px;
    }
    .pf-bg { position: absolute; inset: 0; opacity: .13;
      background: image-set(url('../images/plateforme-bg.webp') type('image/webp'),
                            url('../images/plateforme-bg.jpg') type('image/jpeg')) center/cover;
      background: url('../images/plateforme-bg.jpg') center/cover; /* fallback navigateurs sans image-set */
      background: -webkit-image-set(url('../images/plateforme-bg.webp') 1x) center/cover;
    }
    @supports (background: image-set(url('x.webp') type('image/webp'))) {
      .pf-bg { background: image-set(url('../images/plateforme-bg.webp') type('image/webp'),
                                     url('../images/plateforme-bg.jpg') type('image/jpeg')) center/cover; }
    }
    .pf-inner { position: relative; }

    .pf-head { text-align: center; margin-bottom: 80px; }
    .pf-head .sec-label { justify-content: center; }
    .pf-head h2 { font-size: 56px; font-weight: 900; line-height: 62px; color: #fff; margin-bottom: 20px; }
    .pf-head p  { font-size: 16px; font-weight: 400; line-height: 26px; color: rgba(255,255,255,.65); max-width: 760px; margin: 0 auto; }

    /* Steps */
    .steps-par-label {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 14px;
    }
    .steps-par-label .bar { display: block; width: 33px; height: 2px; background: #fff; flex-shrink: 0; }
    .steps-par-label span { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #fff; }

    /* Escalier : 3 colonnes strictement égales, bottom-alignées */
    .steps-row {
      display: flex; gap: 20px;
      align-items: flex-end;
    }
    /* Force égalité parfaite sur les 3 enfants directs */
    .steps-row > * {
      flex: 0 0 calc((100% - 40px) / 3);
      width: calc((100% - 40px) / 3);
      min-width: 0;
    }
    /* Col 01 : flex-column pour empiler label + card */
    .step-col { display: flex; flex-direction: column; }
    /* Col 03 : flex-column pour card + bouton extérieur */
    .step-col-3 { display: flex; flex-direction: column; gap: 8px; }
    /* Cards */
    .step-card { background: #fff; border-radius: 20px; padding: 32px 28px 36px; }
    .step-card-2 { height: 250px; }

    /* Bubble : couleur brand + chiffre blanc */
    .step-bubble { width: 60px; height: 60px; border-radius: 50%; background: #00153f; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
    .step-bubble span { font-size: 20px; font-weight: 900; color: #fff; }
    /* Bubble 02 rouge */
    .step-card-2 .step-bubble { background: #89093a; }
    .step-card h3 { font-size: 20px; font-weight: 700; color: #00153f; margin-bottom: 10px; }
    .step-card p  { font-size: 13px; font-weight: 400; line-height: 21px; color: #5a5a5a; }
    .step-cta { margin-top: 24px; }
    .btn-step-cta {
      display: flex; align-items: center; justify-content: center; gap: 12px;
      width: 100%; height: 68px; background: #89093a; color: #fff;
      font-family: var(--font-sans); font-size: 16px; font-weight: 800;
      border: none; border-radius: 12px; cursor: pointer; text-decoration: none; transition: opacity .16s;
      position: relative; overflow: hidden;
    }
    .btn-step-cta:hover { opacity: .9; }
    .btn-step-cta svg { width: 18px; height: 18px; }

    /* ═══════════════════════════════════
       NOS PARTENAIRES
    ═══════════════════════════════════ */
    .section-partenaires { padding: 96px 0; background: #fff; }
    .part-head { margin-bottom: 48px; }
    .part-head h2 { font-size: 56px; font-weight: 900; line-height: 62px; color: #00153f; }
    .partners-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .partner-card {
      background: transparent; border-radius: 16px;
      display: flex; align-items: center; justify-content: center;
    }
    .partner-card img { max-width: 100%; object-fit: contain; }
    .partner-empty { background: #f9f6f5; opacity: .3; }

    /* ═══════════════════════════════════
       INSCRIPTION FORM
    ═══════════════════════════════════ */
    .section-form {
      padding: 96px 0; background: #fff;
      position: relative; overflow: hidden;
    }
    /* Blob PNG — miroir, aura gauche */
    .form-blob-img {
      position: absolute;
      left: 0; bottom: -50px;
      height: auto;
      transform: scale(-1);
      opacity: .75;
      pointer-events: none; z-index: 0;
    }
    .form-grid {
      position: relative; z-index: 1;
      display: grid; grid-template-columns: 1fr 560px; gap: 64px; align-items: start;
    }
    .form-left { padding-top: 8px; }
    .form-left h2 { font-size: 52px; font-weight: 900; line-height: 58px; color: #00153f; margin-bottom: 44px; }
    .form-checks { display: flex; flex-direction: column; gap: 18px; margin-bottom: 48px; }
    .form-check {
      display: flex; align-items: center; gap: 14px;
      font-size: 16px; font-weight: 600; color: #00153f;
    }
    .form-check .ci { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .form-check .ci img { width: 100%; height: 100%; object-fit: contain; }
    .form-logo { height: 80px; display: block; }

    /* Navy form card */
    .form-card { background: #00153f; border-radius: 48px; padding: 48px 40px 40px; }
    .form-field {
      background: #fff; height: 72px;
      display: flex; align-items: center; gap: 14px;
      padding: 0 22px; margin-bottom: 2px;
    }
    .form-field:first-child     { border-radius: 12px 12px 0 0; }
    .form-field:nth-child(5)    { border-radius: 0 0 12px 12px; margin-bottom: 18px; }
    .form-field .fi { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .form-field .fi img { width: 100%; height: 100%; object-fit: contain; }
    .form-field input {
      border: none; outline: none; flex: 1; background: transparent;
      font-family: var(--font-sans); font-size: 17px; font-weight: 500; color: #acacac;
    }
    .form-field input::placeholder { color: #acacac; }

    .form-option {
      background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.2);
      border-radius: 14px; padding: 18px 20px; margin-bottom: 18px;
    }
    .form-opt-row { display: flex; align-items: flex-start; gap: 12px; }
    .form-checkbox {
      position: relative; width: 22px; height: 22px;
      border: 2px solid rgba(255,255,255,.45); border-radius: 5px;
      background: transparent; cursor: pointer; flex-shrink: 0; margin-top: 2px;
      appearance: none; -webkit-appearance: none;
      transition: background .14s, border-color .14s;
    }
    .form-checkbox:checked { background: #fff; border-color: #fff; }
    .form-checkbox:checked::after {
      content: '';
      position: absolute; left: 4px; top: 1px;
      width: 10px; height: 6px;
      border-left: 2.5px solid #00153f;
      border-bottom: 2.5px solid #00153f;
      transform: rotate(-45deg);
    }
    .form-opt-title { font-size: 14px; font-weight: 700; color: #fff; line-height: 22px; }
    .form-opt-desc  { font-size: 13px; font-weight: 400; color: rgba(255,255,255,.55); line-height: 19px; margin-top: 6px; padding-left: 34px; }

    .btn-submit {
      width: 100%; height: 76px; background: #89093a; border: none; border-radius: 12px;
      display: flex; align-items: center; justify-content: center; gap: 12px;
      font-family: var(--font-sans); font-size: 18px; font-weight: 800; color: #fff;
      cursor: pointer; transition: opacity .16s; margin-bottom: 14px;
      position: relative; overflow: hidden;
    }
    .btn-submit:hover { opacity: .9; }
    .btn-submit svg { width: 20px; height: 20px; }

    .form-note { display: flex; align-items: flex-start; gap: 10px; padding: 0 2px; }
    .form-note svg { width: 16px; height: 16px; color: rgba(255,255,255,.4); flex-shrink: 0; margin-top: 2px; }
    .form-note p   { font-size: 12px; font-weight: 400; line-height: 18px; color: rgba(255,255,255,.4); }

    /* ═══════════════════════════════════
       FOOTER
    ═══════════════════════════════════ */
    .site-footer { background: #00153f; padding: 72px 0 0; }
    .footer-top { display: grid; grid-template-columns: 1fr auto; gap: 80px; padding-bottom: 48px; }
    .footer-brand img { height: 44px; display: block; margin-bottom: 18px; }
    .footer-brand p { font-size: 13px; font-weight: 400; line-height: 21px; color: rgba(255,255,255,.45); max-width: 300px; }
    .footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px; }
    .fnav h4 { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 18px; }
    .fnav ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
    .fnav a { font-size: 13px; font-weight: 400; color: rgba(255,255,255,.45); text-decoration: none; transition: color .14s; }
    .fnav a:hover { color: #fff; }
    .footer-hr { height: 1px; background: rgba(255,255,255,.1); }
    .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding: 22px 0 28px; }
    .footer-bottom span { font-size: 13px; color: rgba(255,255,255,.35); }

    /* ═══════════════════════════════════
       RESPONSIVE — LARGE TABLET  ≤ 1200px
       (couvre les écrans 1025–1200px qui
       casseraient avec des flex-basis fixes)
    ═══════════════════════════════════ */
    @media (max-width: 1200px) {
      .container  { padding: 0 48px; }
      .hero-nav   { padding: 28px 48px 0; }
      .hero-body  { padding: 0 48px; min-height: auto; }

      /* Hero */
      .hero-left  { flex: 1; padding: 48px 0 64px; }
      .hero-left h1 { font-size: 52px; line-height: 58px; }
      .hero-photo { width: 360px; height: 500px; }
      .hero-blob-img { width: 700px; }

      /* Inscription — les % se réduisent naturellement, on affine juste */
      .layer1-watermark { max-width: 980px; }
      .inscription-head h2 { font-size: 48px; line-height: 54px; }
      .pricing-wrap { padding-bottom: 64px; }
      .bcard-icon { width: 60px; height: 60px; margin-bottom: 14px; }
      .bcard-icon img { width: 48%; height: 48%; }

      /* Ce qu'on propose */
      h2.propose-right { font-size: 52px; line-height: 56px; }
      .feature-row { grid-template-columns: repeat(2, 1fr); }
      .fcard { min-height: unset; }

      /* La plateforme — 3 cols + escalier corrigé */
      .section-plateforme { padding: 72px 0 120px; }
      .steps-row > * { flex: 0 0 calc((100% - 40px) / 3); min-width: 0; }
      .pf-head h2 { font-size: 44px; line-height: 50px; }
      .pf-head { margin-bottom: 56px; }
      .step-card { padding: 22px 18px 26px; }
      .step-card-2 { height: 220px; } /* < step-col-3 (~240px) → escalier correct */
      .step-bubble { width: 48px; height: 48px; margin-bottom: 12px; }
      .step-bubble span { font-size: 16px; }
      .step-card h3 { font-size: 16px; margin-bottom: 8px; }
      .step-card p  { font-size: 12px; line-height: 18px; }

      /* Partenaires */
      .part-head h2 { font-size: 44px; line-height: 50px; }

      /* Form */
      .form-grid { grid-template-columns: 1fr; }
      .form-left h2 { font-size: 40px; line-height: 46px; }
      .form-blob-img { display: none; }

      /* Footer */
      .footer-top { grid-template-columns: 1fr; gap: 40px; }
      .footer-nav { grid-template-columns: repeat(3, 1fr); }
    }

    /* ═══════════════════════════════════
       RESPONSIVE — TABLET/MOBILE  ≤ 768px
    ═══════════════════════════════════ */
    @media (max-width: 768px) {
      .container { padding: 0 24px; }
      .hero-nav  { padding: 24px 24px 0; }
      .hero-body { padding: 0 24px; min-height: auto; }

      /* ── Best practices mobile : centrage ── */
      .sec-label { justify-content: center; }
      .inscription-head { text-align: center; }
      .pf-head .sec-label { justify-content: center; }

      /* Hero — texte pleine largeur, photo cachée */
      .hero-left  { flex: none; width: 100%; padding: 32px 0 48px; text-align: center; }
      .hero-left h1 { font-size: 40px; line-height: 46px; }
      .hero-left p  { font-size: 16px; line-height: 24px; margin-bottom: 32px; }
      .hero-right { display: none; }
      .hero-ctas  { justify-content: center; flex-wrap: wrap; gap: 12px; }
      .btn { font-size: 17px; height: 56px; padding: 0 24px; }

      /* Inscription */
      .section-inscription { padding: 48px 0 0; }
      .inscription-head h2 { font-size: 32px; line-height: 38px; }
      .inscription-head p  { font-size: 16px; line-height: 24px; }
      .layer1-watermark { display: none; }
      .pricing-wrap { padding-bottom: 48px; }
      /* Pricing : pricing/checklist 100%, benefit cards en 2 colonnes centrées */
      .prow { flex-wrap: wrap; gap: 8px; justify-content: center; }
      .pcard-pricing, .pcard-checklist { flex: 0 0 100%; }
      .pcard-b1, .pcard-b2, .pcard-b3, .pcard-b4 {
        flex: 0 0 calc(50% - 4px);
        min-width: 0;
      }

      /* Ce qu'on propose */
      .section-propose { padding: 56px 0 0; }
      .propose-top { grid-template-columns: 1fr; gap: 24px; }
      .propose-left .sec-label { justify-content: flex-start; } /* label gauche dans propose */
      h2.propose-right { font-size: 36px; line-height: 40px; }
      .feature-row { grid-template-columns: repeat(2, 1fr); gap: 12px; padding-bottom: 56px; }
      .fcard { min-height: unset; padding: 24px 20px 28px; }

      /* La plateforme — escalier désactivé, cards empilées */
      .section-plateforme { padding: 56px 0 64px; }
      .pf-head h2 { font-size: 32px; line-height: 38px; text-align: center; }
      .pf-head p  { font-size: 15px; text-align: center; }
      .pf-head    { margin-bottom: 40px; }
      .steps-row  { flex-direction: column; align-items: stretch; gap: 12px; }
      .steps-row > * { flex: none; width: 100%; }
      .step-card   { padding: 24px 20px 28px; }
      .step-bubble { width: 48px; height: 48px; }
      .step-card-2 { height: auto; }
      .step-col, .step-col-3 { width: 100%; }

      /* Partenaires */
      .section-partenaires { padding: 56px 0; }
      .part-head h2 { font-size: 32px; line-height: 38px; }
      .partners-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .partner-card { min-height: 120px; }
      .partner-empty { background: #f9f6f5; opacity: .2; min-height: 80px; }

      /* Form */
      .section-form { padding: 56px 0 56px; } /* espace en bas sur mobile */
      .form-grid { grid-template-columns: 1fr; gap: 40px; }
      .form-left { text-align: center; }
      .form-left .sec-label { justify-content: center; }
      .form-left h2 { font-size: 32px; line-height: 38px; }
      .form-checks { align-items: center; }
      .form-logo { margin: 0 auto; display: block; } /* logo centré */
      .form-card { border-radius: 28px; padding: 32px 24px 28px; }

      /* Footer — tout centré */
      .footer-top { gap: 32px; }
      .footer-brand { text-align: center; display: flex; flex-direction: column; align-items: center; }
      .footer-brand img { margin: 0 auto 20px; }
      .footer-brand p { text-align: center; } /* fix décalage gauche */
      .footer-nav { grid-template-columns: 1fr 1fr; gap: 32px; }
      .fnav { text-align: center; }
      .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
    }

    /* ═══════════════════════════════════
       RESPONSIVE — SMALL MOBILE  ≤ 480px
    ═══════════════════════════════════ */
    @media (max-width: 480px) {
      .container { padding: 0 16px; }
      .hero-nav  { padding: 20px 16px 0; }
      .hero-body { padding: 0 16px; }

      .hero-left h1 { font-size: 30px; line-height: 36px; }
      .inscription-head h2 { font-size: 26px; line-height: 32px; }
      h2.propose-right { font-size: 28px; line-height: 32px; }
      /* feature-row passe en 1 colonne sur petit mobile */
      .feature-row { grid-template-columns: 1fr; }
      /* benefit cards aussi en 1 colonne */
      .pcard-b1, .pcard-b2, .pcard-b3, .pcard-b4 { flex: 0 0 100%; }
      .pf-head h2  { font-size: 26px; line-height: 32px; }
      .part-head h2 { font-size: 26px; line-height: 32px; text-align: center; }
      .form-left h2 { font-size: 26px; line-height: 32px; }
      .price-amount { font-size: 40px; }

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

      .btn { font-size: 16px; height: 52px; }
    }

    /* ═══ ANIMATIONS ═══ */
    @media (prefers-reduced-motion: no-preference) { .anim { opacity: 0; } }

    .btn, .hv2-btn-p, .hv2-btn-o {
      transition: opacity .18s, transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s;
      position: relative; overflow: hidden;
    }
    .btn:hover  { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.18); }
    .btn:active { transform: translateY(0) scale(.97); box-shadow: none; transition-duration: .08s; }
    .hv2-btn-p:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(137,9,58,.4); }
    .hv2-btn-p:active, .hv2-btn-o:active { transform: scale(.97); transition-duration: .08s; }

    .btn-bordeaux::before, .btn-magenta::before, .btn-white::before,
    .hv2-btn-p::before, .btn-step-cta::before, .btn-submit::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
      transform: translateX(-100%); transition: transform .5s cubic-bezier(.16,1,.3,1);
      pointer-events: none;
    }
    .btn-bordeaux:hover::before, .btn-magenta:hover::before, .btn-white:hover::before,
    .hv2-btn-p:hover::before, .btn-step-cta:hover::before, .btn-submit:hover::before {
      transform: translateX(100%);
    }
    .ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.28); transform: scale(0); animation: ripple-anim .55s linear; pointer-events: none; }
    @keyframes ripple-anim { to { transform: scale(4); opacity: 0; } }
    .partner-card { transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s; }
    .partner-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,21,63,.12); }
  
/* ═══════════════════════════════════
   FORM — états submit / erreur / validation
═══════════════════════════════════ */
.form-field input:invalid:not(:placeholder-shown) { color: #b3261e; }
.form-field.has-error { box-shadow: inset 0 0 0 2px #fa1e45; }
.form-error {
  color: #ffd2d8; background: rgba(250,30,69,.18);
  border: 1px solid rgba(250,30,69,.35); border-radius: 10px;
  font-size: 13px; font-weight: 500; line-height: 19px;
  padding: 12px 16px; margin-bottom: 14px;
}
.btn-submit[aria-busy="true"] { opacity: .75; pointer-events: none; }
.btn-submit .spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: spin .7s linear infinite; display: none;
}
.btn-submit[aria-busy="true"] .spinner { display: inline-block; }
.btn-submit[aria-busy="true"] svg { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════
   RGPD consent + Turnstile
═══════════════════════════════════ */
.form-consent {
  display: flex; align-items: flex-start; gap: 11px;
  margin-bottom: 16px; padding: 0 2px;
}
.form-consent input { margin-top: 2px; }
.form-consent label {
  font-size: 12px; font-weight: 400; line-height: 18px;
  color: rgba(255,255,255,.62); cursor: pointer;
}
.form-consent a { color: #fff; text-decoration: underline; }
.cf-turnstile { margin-bottom: 16px; min-height: 65px; }

/* ═══════════════════════════════════
   Bandeau de consentement cookies (RGPD)
═══════════════════════════════════ */
/* Petite carte discrète, coin bas-gauche */
.cookie-banner {
  position: fixed; left: 18px; bottom: 18px; right: auto; z-index: 9999;
  width: 320px; max-width: calc(100vw - 36px);
  display: flex; flex-direction: column; gap: 11px;
  background: rgba(0,21,63,.94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 13px; padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(0,21,63,.28);
  transform: translateY(160%); opacity: 0;
  transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .35s;
}
.cookie-banner.cb-show { transform: translateY(0); opacity: 1; }
.cookie-banner .cb-text { margin: 0; font-size: 11.5px; line-height: 16px; color: rgba(255,255,255,.7); }
.cookie-banner .cb-text a { color: rgba(255,255,255,.9); text-decoration: underline; }
.cookie-banner .cb-actions { display: flex; gap: 8px; justify-content: flex-end; }
.cookie-banner .cb-btn { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; border: none; border-radius: 999px; padding: 6px 16px; cursor: pointer; transition: opacity .15s, background .15s; }
.cookie-banner .cb-refuse { background: transparent; color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.22); }
.cookie-banner .cb-refuse:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.85); }
.cookie-banner .cb-accept { background: #89093a; color: #fff; }
.cookie-banner .cb-accept:hover { opacity: .9; }
@media (max-width: 480px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; width: auto; }
}