/* ══════════════════════════════════════════════════════════════════════════
   Explicode — feuille de styles du site de lancement
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --ink: #0D1B2A;
  --ink-soft: #475569;
  --muted: #64748B;
  --muted-light: #94A3B8;
  --line: #E2E8F0;
  --line-soft: #EEF2F5;
  --bg: #FFFFFF;
  --bg-soft: #F5F7F8;
  --blue: #2094F3;
  --blue-dark: #0070CC;
  --blue-tint: #F4F9FE;
  --blue-pale: #EAF5FE;
  --yellow: #F4E01B;
  --navy: #0A1622;
  --navy-card: #12222F;
  --book-bg: #30414B;
  --green: #22C55E;
  --green-dark: #15803D;
  --green-tint: #ECFDF3;
  --amber-tint: #FFFBEB;
  --amber-ink: #92400E;
  --shell: 1296px;
  --pad: 72px;
  --radius: 22px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Poppins, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--blue-dark); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--ink); }

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 32px; }
.section { padding: 84px 0; }
.section--soft { background: var(--bg-soft); }
.section--navy { background: var(--navy); color: #FFFFFF; }
.section--book { background: var(--book-bg); color: #FFFFFF; }
.section--tight { padding: 56px 0; }

.eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  color: var(--blue);
  text-transform: uppercase;
}
.eyebrow--muted { color: var(--muted-light); }
.eyebrow--yellow { color: var(--yellow); }

.h1 { font-size: clamp(2.25rem, 5.2vw, 3.875rem); line-height: 1.06; font-weight: 700; letter-spacing: -.035em; }
.h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.14; font-weight: 700; letter-spacing: -.03em; }
.h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; }
.lead { font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.64; font-weight: 300; color: var(--ink-soft); }
.body { font-size: .95rem; line-height: 1.62; font-weight: 300; color: var(--muted); }
.small { font-size: .8125rem; line-height: 1.55; font-weight: 300; color: var(--muted); }

.stack { display: flex; flex-direction: column; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.gap-22 { gap: 22px; } .gap-32 { gap: 32px; } .gap-40 { gap: 40px; }

/* ── Bandeau de lancement ───────────────────────────────────────────────── */
.launchbar { background: var(--ink); color: #C7D2DC; font-size: .8125rem; font-weight: 300; }
.launchbar__inner { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 12px 32px; text-align: center; }
.launchbar__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); flex: none; }
.launchbar strong { font-weight: 600; color: var(--yellow); }
.launchbar a { color: #FFFFFF; border-bottom: 1px solid #3A4C5F; }
.launchbar a:hover { color: var(--yellow); border-color: var(--yellow); }

/* ── En-tête ────────────────────────────────────────────────────────────── */
.header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 32px; max-width: var(--shell); margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand img { width: 44px; height: 44px; object-fit: contain; }
.brand__name { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.brand__tag { font-size: .6875rem; font-weight: 400; color: var(--muted); letter-spacing: .03em; }
.nav { display: flex; align-items: center; gap: 32px; }
.nav__link { font-size: .90625rem; font-weight: 500; color: var(--ink); }
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--blue); }
.nav__toggle { display: none; }

/* ── Boutons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 26px; border: none; border-radius: 13px;
  font-family: inherit; font-size: .96875rem; font-weight: 600; cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--blue { background: var(--blue); color: #FFFFFF; }
.btn--blue:hover { color: #FFFFFF; box-shadow: 0 16px 32px rgba(32,148,243,.32); }
.btn--ink { background: var(--ink); color: #FFFFFF; }
.btn--ink:hover { color: #FFFFFF; box-shadow: 0 16px 32px rgba(13,27,42,.26); }
.btn--white { background: #FFFFFF; color: var(--ink); }
.btn--white:hover { color: var(--ink); box-shadow: 0 16px 32px rgba(0,0,0,.16); }
.btn--pill { border-radius: 999px; min-height: 46px; padding: 12px 24px; }
.btn--full { width: 100%; }
.btn--store { padding: 13px 24px; }
.btn__label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.btn__label span:first-child { font-size: .65625rem; font-weight: 400; opacity: .74; letter-spacing: .02em; }
.btn__label span:last-child { font-size: 1rem; font-weight: 600; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding: 80px 0 88px; }
.hero__blob { position: absolute; top: -190px; right: -170px; width: 460px; height: 460px; border-radius: 50%; background: var(--blue-tint); z-index: 0; }
.hero__square { position: absolute; top: 340px; right: 44%; width: 74px; height: 74px; border-radius: 18px; background: var(--yellow); transform: rotate(-14deg); z-index: 0; }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.06fr 1fr; gap: 56px; align-items: center; }
.hero__grid--form { grid-template-columns: 1fr 460px; gap: 60px; }
.hero__media { position: relative; display: flex; justify-content: center; align-items: center; }
.hero__halo { position: absolute; width: 430px; height: 430px; border-radius: 50%; background: var(--blue); opacity: .07; }
.hero--plain { padding: 76px 0 68px; }

.badge { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 8px 16px 8px 9px; border: 1px solid var(--line); border-radius: 999px; background: #FFFFFF; font-size: .78125rem; font-weight: 500; color: #334155; }
.badge__check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); flex: none; }
.badge--green { background: var(--green-tint); border-color: transparent; color: var(--green-dark); padding: 9px 16px; }
.badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }

.mark { position: relative; display: inline-block; z-index: 1; }
.mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: .08em; height: .22em; background: var(--yellow); z-index: -1; transform-origin: left center; }

.phone { position: relative; width: 306px; max-width: 78vw; border-radius: 42px; padding: 11px; background: var(--ink); box-shadow: 0 40px 80px rgba(13,27,42,.28); }
.phone img { width: 100%; height: auto; border-radius: 32px; }
.phone--float { animation: floatY 7s ease-in-out infinite; }

.chip-note { position: absolute; display: flex; align-items: center; gap: 9px; padding: 13px 17px; border-radius: 16px; background: #FFFFFF; box-shadow: 0 20px 44px rgba(13,27,42,.16); font-size: .8125rem; font-weight: 600; }
.chip-note--left { left: 0; bottom: 66px; max-width: 214px; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 18px; }
.chip-note--right { right: -6px; top: 74px; background: var(--yellow); box-shadow: 0 18px 36px rgba(244,224,27,.42); }
.chip-note__icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--blue-pale); flex: none; }

.status { display: flex; align-items: flex-start; gap: 10px; font-size: .84375rem; font-weight: 300; color: var(--muted); line-height: 1.5; }
.status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; margin-top: 6px; }

.cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ── Partenaires ────────────────────────────────────────────────────────── */
.partners { padding: 46px 0 54px; background: var(--bg-soft); border-top: 1px solid var(--line-soft); }
.partners__top { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; }
.partners__lead { display: flex; flex-direction: column; gap: 8px; min-width: 224px; }
.partners__lead img { height: 46px; width: auto; object-fit: contain; object-position: left; }
.partners__divider { width: 1px; align-self: stretch; min-height: 62px; background: var(--line); }
.partners__logos { display: flex; align-items: center; gap: 44px; flex-wrap: wrap; }
.partners__logos img { width: auto; object-fit: contain; }
.partners__inst { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 34px; margin-top: 32px; border-top: 1px solid var(--line); }
.partners__strip { width: 638px; max-width: 100%; height: auto; }

/* ── Cartes & grilles ───────────────────────────────────────────────────── */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.grid--media { grid-template-columns: 1.15fr 1fr; }
.grid--aside { grid-template-columns: minmax(0, 1fr) 520px; }
.hero__grid--wide { grid-template-columns: 1.05fr 1fr; }

.card { display: flex; flex-direction: column; gap: 12px; padding: 30px; border-radius: var(--radius); background: var(--bg-soft); }
.card--white { background: #FFFFFF; border: 1px solid var(--line-soft); }
.card--navy { background: var(--navy-card); color: #FFFFFF; }
.card--ink { background: var(--ink); color: #FFFFFF; }
.card--outline { background: transparent; border: 1px solid var(--line); }
/* une carte peut aussi porter une grille : la grille l'emporte sur le flex */
.card.grid { display: grid; }
/* dans une carte ou un panneau, une image ne doit jamais s'étirer pour remplir sa cellule */
.card > img, .card img[style*="height"], .panel img { align-self: flex-start; justify-self: start; object-fit: contain; }
.card--lift { transition: transform .3s cubic-bezier(.16,.84,.44,1), box-shadow .3s ease; }
.card--lift:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(13,27,42,.12); }
.card__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--blue-pale); flex: none; }
.card__icon--white { background: #FFFFFF; }
.card__icon--navy { background: #1B2E3E; }

.stat { display: flex; flex-direction: column; gap: 8px; padding: 30px 32px; border-radius: var(--radius); background: var(--bg-soft); }
.stat__num { font-size: 2.875rem; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.stat__label { font-size: .9375rem; font-weight: 600; }
.stat--ink { background: var(--ink); color: #FFFFFF; }
.stat--ink .stat__num { color: var(--yellow); }
.stat--ink .body { color: var(--muted-light); }

.feature { display: grid; grid-template-columns: 1fr 190px; gap: 22px; align-items: center; padding: 32px; border-radius: 26px; background: var(--bg-soft); }
.feature img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 16px 34px rgba(13,27,42,.14); }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding-bottom: 40px; flex-wrap: wrap; }
.section-head__text { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.section-head__aside { max-width: 350px; }

.quote { display: flex; flex-direction: column; gap: 14px; padding: 26px 28px; border-left: 3px solid var(--yellow); background: #FAFBFC; }
.quote__text { font-size: 1.0625rem; font-weight: 400; line-height: 1.6; }
.author { display: flex; align-items: center; gap: 14px; }
.author img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }

.pill-list { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { font-size: .875rem; font-weight: 400; padding: 10px 18px; border-radius: 999px; border: 1px solid #2C3E52; color: #DDE5EC; }
.pill--active { background: var(--yellow); color: var(--ink); border-color: var(--yellow); font-weight: 500; }

.check-item { display: flex; align-items: flex-start; gap: 12px; }
.check-item__mark { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--yellow); flex: none; margin-top: 2px; }
.check-item__mark--green { background: var(--green-tint); }

.figure { position: relative; }
.figure img { width: 100%; height: auto; border-radius: 26px; }
.figure__caption { position: absolute; left: 22px; right: 22px; bottom: 22px; padding: 14px 20px; border-radius: 14px; background: rgba(255,255,255,.94); font-size: .78125rem; line-height: 1.5; color: #334155; }

/* ── Timeline / calendrier ──────────────────────────────────────────────── */
.timeline { background: var(--navy); color: #FFFFFF; padding: 82px 0 88px; position: relative; }
.timeline::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--yellow) 0 33.33%, var(--blue) 33.33% 66.66%, var(--green) 66.66% 100%); }
.tl-card { display: flex; flex-direction: column; gap: 16px; padding: 30px 28px; border-radius: var(--radius); background: var(--navy-card); }
.tl-card--current { background: var(--yellow); color: var(--navy); }
.tl-card--todo { background: transparent; border: 1px solid #23364A; }
.tl-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tl-card__state { font-size: .65625rem; font-weight: 600; letter-spacing: .12em; }
.tl-card__bullet { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--green); flex: none; }
.tl-card__bullet--current { background: var(--navy); }
.tl-card__bullet--todo { background: transparent; border: 2px solid #2C3E52; }
.tl-card__title { font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }
.tl-card__date { font-size: .8125rem; font-weight: 600; color: var(--yellow); }
.tl-card__text { font-size: .84375rem; font-weight: 300; line-height: 1.6; color: #8CA0B3; }
.tl-card--current .tl-card__text { color: #3B3B29; }

/* ── Formulaire ─────────────────────────────────────────────────────────── */
.form-card { display: flex; flex-direction: column; gap: 18px; padding: 34px; border-radius: 26px; background: #FFFFFF; border: 1px solid var(--line-soft); box-shadow: 0 28px 56px rgba(13,27,42,.10); }
.form-card--soft { background: var(--bg-soft); box-shadow: none; border-color: #E7EDF2; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { display: flex; align-items: center; gap: 8px; font-size: .78125rem; font-weight: 600; letter-spacing: .02em; color: #334155; }
.field__optional { font-size: .71875rem; font-weight: 400; color: var(--muted-light); padding: 3px 9px; border-radius: 999px; background: var(--line-soft); }
.input-wrap { display: flex; align-items: center; gap: 11px; padding: 0 16px; border-radius: 12px; border: 1px solid #DDE5EC; background: #FFFFFF; transition: border-color .2s ease, box-shadow .2s ease; }
.input-wrap:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(32,148,243,.14); }
.input-wrap svg { flex: none; }
.input-wrap input { flex: 1; min-width: 0; min-height: 52px; padding: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: .90625rem; font-weight: 400; color: var(--ink); }
.input-wrap input::placeholder { color: var(--muted-light); font-weight: 300; }

.device-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.device { position: relative; }
.device input { position: absolute; opacity: 0; pointer-events: none; }
.device__box { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 14px 16px; border-radius: 12px; border: 1px solid #DDE5EC; background: #FFFFFF; cursor: pointer; font-size: .90625rem; font-weight: 500; color: var(--muted); transition: border-color .2s ease, color .2s ease; }
.device__box svg { stroke: var(--muted-light); transition: stroke .2s ease; }
.device input:checked + .device__box { border: 2px solid var(--blue); color: var(--ink); font-weight: 600; padding: 13px 15px; }
.device input:checked + .device__box svg { stroke: var(--blue); }
.device input:focus-visible + .device__box { outline: 3px solid var(--blue); outline-offset: 3px; }

.form-note { font-size: .78125rem; font-weight: 300; line-height: 1.5; color: var(--muted-light); text-align: center; }
.form-status { display: none; padding: 14px 16px; border-radius: 12px; font-size: .875rem; line-height: 1.5; }
.form-status--ok { display: block; background: var(--green-tint); color: var(--green-dark); }
.form-status--err { display: block; background: var(--amber-tint); color: var(--amber-ink); }

.mini-stats { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.mini-stat { display: flex; flex-direction: column; gap: 2px; }
.mini-stat__num { font-size: 1.625rem; font-weight: 700; letter-spacing: -.03em; }
.mini-stat__num--blue { color: var(--blue); }
.mini-stat__num--yellow { color: var(--yellow); }
.mini-stat__label { font-size: .78125rem; font-weight: 300; color: var(--muted); }
.mini-stats__sep { width: 1px; height: 34px; background: var(--line); }

/* ── Blocs de couleur ───────────────────────────────────────────────────── */
.panel { position: relative; padding: 66px 60px; border-radius: 34px; overflow: hidden; }
.panel--blue { background: var(--blue); color: #FFFFFF; }
.panel__blob { position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: #FFFFFF; opacity: .09; }
.panel__square { position: absolute; right: 200px; bottom: -70px; width: 155px; height: 155px; border-radius: 34px; transform: rotate(20deg); background: var(--yellow); opacity: .2; }
.panel__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 52px; flex-wrap: wrap; }
.panel__text { display: flex; flex-direction: column; gap: 14px; max-width: 620px; }
.panel__text p { color: #E4F1FD; }
.panel__actions { display: flex; flex-direction: column; gap: 12px; min-width: 268px; }
.panel--form .panel__inner { display: grid; grid-template-columns: 1fr 460px; align-items: center; }

/* ── Le livre ───────────────────────────────────────────────────────────── */
.book { display: grid; grid-template-columns: 400px 1fr; gap: 64px; align-items: center; }
.book__cover { width: 100%; height: auto; }
.book__meta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 20px 26px; border-radius: 14px; background: #26343D; }
.book__phones { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.book__phone { font-size: 1.0625rem; font-weight: 600; color: var(--yellow); }
.book__phone:hover { color: #FFFFFF; }

/* ── Procédure de test ──────────────────────────────────────────────────── */
.proc { display: flex; flex-direction: column; gap: 22px; padding: 38px; border-radius: 26px; border: 1px solid var(--line); }
.proc__head { display: flex; align-items: center; gap: 14px; }
.proc__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px; flex: none; }
.proc__icon--android { background: var(--green-tint); }
.proc__icon--ios { background: #F1F5F9; }
.proc__title { font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; }
.proc__state { font-size: .8125rem; font-weight: 400; }
.proc__state--open { color: #16A34A; }
.proc__state--later { color: #B45309; }
.proc__steps { display: flex; flex-direction: column; gap: 16px; }
.proc__step { display: flex; gap: 13px; font-size: .90625rem; font-weight: 300; line-height: 1.6; color: var(--ink-soft); }
.proc__step b { font-weight: 500; color: var(--ink); }
.proc__num { font-size: .8125rem; font-weight: 600; color: var(--muted-light); min-width: 18px; }
.notice { display: flex; align-items: flex-start; gap: 11px; padding: 16px 18px; border-radius: 14px; font-size: .84375rem; font-weight: 300; line-height: 1.55; }
.notice svg { flex: none; margin-top: 1px; }
.notice--amber { background: var(--amber-tint); color: var(--amber-ink); }
.notice--grey { background: #F1F5F9; color: var(--ink-soft); }

.report-row { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 12px; background: var(--navy); }
.report-row__key { font-size: .75rem; font-weight: 600; color: var(--yellow); min-width: 78px; }
.report-row__val { font-size: .875rem; font-weight: 300; color: #DDE5EC; }

/* ── Document légal ─────────────────────────────────────────────────────── */
.doc { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; align-items: start; }
.doc__body { display: flex; flex-direction: column; gap: 40px; max-width: 820px; }
.doc__section { display: flex; flex-direction: column; gap: 12px; }
.doc__head { display: flex; align-items: baseline; gap: 14px; }
.doc__num { font-size: .8125rem; font-weight: 600; color: var(--blue); min-width: 26px; }
.doc__title { font-size: 1.5rem; font-weight: 600; letter-spacing: -.025em; }
.doc__content { display: flex; flex-direction: column; gap: 12px; padding-left: 40px; }
.doc__content p { font-size: .96875rem; font-weight: 300; line-height: 1.72; color: var(--ink-soft); }
.doc__list { display: flex; flex-direction: column; gap: 10px; }
.doc__li { display: flex; align-items: flex-start; gap: 11px; font-size: .96875rem; font-weight: 300; line-height: 1.7; color: var(--ink-soft); }
.doc__li b { font-weight: 500; color: var(--ink); }
.doc__li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #CBD5E1; margin-top: 10px; flex: none; }
.doc__aside { display: flex; flex-direction: column; gap: 22px; padding: 32px; border-radius: var(--radius); background: var(--bg-soft); position: sticky; top: 100px; }

/* ── Pied de page ───────────────────────────────────────────────────────── */
.footer { background: var(--ink); color: #FFFFFF; padding: 56px 0 44px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 40px; border-bottom: 1px solid #1E3448; }
.footer__brand { display: flex; align-items: center; gap: 11px; }
.footer__brand img { width: 40px; height: 40px; object-fit: contain; background: #FFFFFF; border-radius: 10px; padding: 3px; }
.footer__col { display: flex; flex-direction: column; gap: 11px; }
.footer__title { font-size: .75rem; font-weight: 600; letter-spacing: .1em; color: var(--yellow); }
.footer a { font-size: .875rem; font-weight: 300; color: #C7D2DC; }
.footer a:hover { color: var(--yellow); }
.footer__text { font-size: .84375rem; font-weight: 300; line-height: 1.6; color: #8CA0B3; max-width: 300px; }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 26px; flex-wrap: wrap; font-size: .78125rem; font-weight: 300; color: #6B8098; }

/* ── Animations ─────────────────────────────────────────────────────────── */
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes riseIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes drawLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* sans JavaScript, rien n'est masqué : la classe .js n'est posée que par main.js */
.js .reveal { opacity: 0; transform: translateY(24px); }
.js .reveal.is-in { animation: riseIn .9s cubic-bezier(.16,.84,.44,1) forwards; }
.reveal[data-delay="1"].is-in { animation-delay: .08s; }
.reveal[data-delay="2"].is-in { animation-delay: .16s; }
.reveal[data-delay="3"].is-in { animation-delay: .24s; }
.reveal[data-delay="4"].is-in { animation-delay: .32s; }
.reveal[data-delay="5"].is-in { animation-delay: .4s; }
.mark::after { transform: scaleX(0); }
.is-in .mark::after, .mark.is-in::after { animation: drawLine 1s cubic-bezier(.16,.84,.44,1) .45s forwards; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal.is-in { animation: none; }
  .phone--float { animation: none; }
  .mark::after { transform: scaleX(1); animation: none; }
  .btn:hover, .card--lift:hover { transform: none; }
}

/* ══ Tablette ═══════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .section { padding: 64px 0; }
  .hero { padding: 56px 0 64px; }
  .hero__grid, .hero__grid--form, .hero__grid--wide { grid-template-columns: 1fr; gap: 44px; }
  .grid--media, .grid--aside { grid-template-columns: 1fr; gap: 36px; }
  .hero__square { display: none; }
  .hero__halo { width: 320px; height: 320px; }
  .book { grid-template-columns: 1fr; gap: 36px; }
  .book img.book__cover { max-width: 300px; margin: 0 auto; }
  .doc { grid-template-columns: 1fr; gap: 40px; }
  .doc__aside { position: static; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .panel--form .panel__inner { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .partners__divider { display: none; }
}

/* ══ Mobile ═════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .shell { padding: 0 20px; }
  .section { padding: 44px 0; }
  .section--tight { padding: 36px 0; }
  .hero { padding: 32px 0 40px; }
  .hero__blob { top: -96px; right: -96px; width: 220px; height: 220px; }

  .header__inner { padding: 12px 20px; }
  .brand img { width: 34px; height: 34px; }
  .brand__name { font-size: 1rem; }
  .brand__tag { display: none; }
  .nav {
    position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: stretch;
    gap: 0; padding: 12px 20px 20px; background: #FFFFFF; border-bottom: 1px solid var(--line-soft);
    box-shadow: 0 20px 40px rgba(13,27,42,.12); transform: translateY(-130%); transition: transform .3s ease;
  }
  .nav.is-open { transform: translateY(0); }
  .nav__link { padding: 16px 4px; border-bottom: 1px solid var(--line-soft); font-size: 1rem; }
  .nav .btn { margin-top: 14px; }
  .nav__toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; border: none; background: transparent; cursor: pointer;
  }
  .nav__toggle span { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s ease, opacity .25s ease; }
  .nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

  .launchbar__inner { padding: 10px 20px; font-size: .75rem; }

  .grid--2, .grid--3, .grid--4, .grid--media, .grid--aside { grid-template-columns: 1fr; gap: 14px; }
  .grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature { grid-template-columns: 1fr; gap: 16px; padding: 22px; }
  .feature img { width: auto; max-height: 340px; margin: 0 auto; }
  .card, .stat { padding: 22px; }
  .stat { flex-direction: row; align-items: flex-start; gap: 16px; }
  .stat__num { font-size: 2.125rem; min-width: 62px; }
  .stat__body { display: flex; flex-direction: column; gap: 4px; }
  .section-head { padding-bottom: 24px; gap: 16px; }

  .phone { width: 214px; padding: 8px; border-radius: 30px; }
  .phone img { border-radius: 23px; }
  .chip-note--left { display: none; }
  .chip-note--right { right: 0; top: 40px; }

  .partners__top { flex-direction: column; align-items: flex-start; gap: 22px; }
  .partners__logos { gap: 24px; }
  .partners__logos img { height: 28px !important; }
  .partners__inst { align-items: flex-start; padding-top: 24px; margin-top: 24px; }

  .panel { padding: 34px 24px; border-radius: 24px; }
  .panel__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .panel__actions { width: 100%; min-width: 0; }
  .panel__square { display: none; }

  .form-card { padding: 24px 22px; border-radius: 22px; }
  .device-group { gap: 9px; }
  .proc { padding: 24px 22px; }
  .doc__content { padding-left: 0; }
  .doc__head { gap: 10px; }
  .doc__title { font-size: 1.25rem; }
  .doc__aside { padding: 24px 22px; }

  .footer { padding: 40px 0 32px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .footer__brand-col { grid-column: 1 / -1; }
  .btn { width: 100%; }
  .cta-row .btn { width: auto; flex: 1 1 auto; }
  .mini-stats { gap: 18px; }
  .mini-stats__sep { display: none; }
}

@media (max-width: 420px) {
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; }
}