/* SHIFT89 — version E : site complet par public, charte blanche de la version D. Aucune dépendance externe. */
@font-face { font-family: "OpenS"; src: url("../fonts/open-sans-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "OpenS"; src: url("../fonts/open-sans-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "OpenS"; src: url("../fonts/open-sans-700-latin.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }

:root {
  /* Palette SHIFT89 2026 (Associés Shift89/Assets/Couleurs). Couleur par défaut : le bleu vif #0379D9 (décision d'Emmanuel,
     27/10/2026) ; le bleu moyen #025BA3 est secondaire. Le bleu vif donne 4,4:1 avec le blanc (seuil RGAA 3.2 : 4,5:1),
     écart déclaré dans accessibilite.html. */
  --s89-black: #00060C; --s89-blue-m: #025BA3; --s89-blue: #0379D9; --s89-blue-c: #7AB4E5;
  --s89-red-l: #F17F80; --s89-red: #F10F0F; --s89-grey: #B6B3A9; --s89-grey-l: #F1EFF1;
  --bg: #fff; --fg: var(--s89-black); --muted: rgba(0,6,12,.7); --line: rgba(0,6,12,.1); --card: #fff; --soft: var(--s89-grey-l);
  --accent: var(--s89-blue); --accent-2: var(--s89-red); --on-accent: #fff; --navy: var(--s89-black); --navy-2: var(--s89-blue-m);
  --ok: var(--s89-blue); --ko: var(--s89-red); --warn: var(--s89-black);
  --tri-blue: var(--s89-blue); --tri-mid: var(--s89-grey-l); --tri-red: var(--s89-red);
  --font: "OpenS", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --radius: 20px; --wrap: 1200px; --gutter: clamp(16px, 4vw, 40px); --sec: clamp(56px, 8vw, 112px);
  --shadow: 0 1px 2px rgba(0,6,12,.04), 0 12px 40px -20px rgba(0,6,12,.2);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 3px; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(34px, 4.4vw, 58px); font-weight: 800; letter-spacing: -.035em; line-height: 1.07; max-width: 22ch; }
.home h1 { font-size: clamp(38px, 5vw, 70px); max-width: 17ch; }
h2 { font-size: clamp(28px, 3.4vw, 46px); font-weight: 800; letter-spacing: -.03em; max-width: 24ch; }
h3 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; }
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--muted); max-width: 62ch; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { max-width: 860px; }
.wrap-wide { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 28px; height: 28px; flex: none; }
.ic-sm { width: 18px; height: 18px; flex: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 0; z-index: 100; }
.skip:focus { left: 16px; top: 12px; background: var(--fg); color: #fff; padding: 10px 14px; border-radius: 8px; }

.kicker { display: flex; align-items: center; gap: 12px; font: 700 13px/1.35 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; }
.tri { display: block; width: 220px; height: 4px; margin: 12px auto 0; border-radius: 2px; background: linear-gradient(90deg, var(--tri-blue) 0 33.3%, #fff 33.3% 66.6%, var(--tri-red) 66.6%); }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; padding: 12px 22px; font: 700 15px/1.2 var(--font); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .2s, background .2s, box-shadow .2s, color .2s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--s89-blue-m); }
.btn-ghost { border-color: var(--accent); color: var(--accent); background: #fff; }
.btn-ghost:hover { background: rgba(3,121,217,.08); }
.btn-light { background: #fff; color: var(--navy); }
.btn-lg { padding: 16px 26px; font-size: 16px; }
.btn-sm { padding: 10px 16px; font-size: 14px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta-row.left { justify-content: flex-start; margin-top: 28px; }
.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--accent); text-decoration: none; }
.more:hover { text-decoration: underline; }
.sec-more { margin: 32px 0 0; }

/* En-tête */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); transition: box-shadow .3s; }
.hdr.scrolled { box-shadow: 0 10px 30px -24px rgba(0,6,12,.5); }
.hdr-in { display: flex; align-items: center; gap: 16px; max-width: 1440px; margin: 0 auto; padding: 10px var(--gutter); min-height: 64px; }
.logo { flex: none; border-radius: 8px; }
.logo img { height: 48px; width: auto; }
.nav { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.nav-list > li { position: relative; }
.nav a { color: var(--fg); text-decoration: none; }
.nav a.btn-primary { color: var(--on-accent); }
.nav a.btn-ghost { color: var(--accent); }
.nav-top { display: flex; align-items: center; }
.nav-list a { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.3; padding: 9px 9px; border-radius: 10px; white-space: nowrap; }
.nav-list a:hover { background: var(--soft); }
.nav-list a[aria-current="page"], .nav-list > .is-active > .nav-top > a { color: var(--accent); }
.has-sub > .nav-top > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: translateY(-3px) rotate(45deg); opacity: .55; }
.sub-toggle { display: none; }
.sub { display: none; position: absolute; left: -6px; top: 100%; min-width: 250px; list-style: none; margin: 0; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px -24px rgba(0,6,12,.4); z-index: 5; }
.nav-list > li:nth-last-child(-n+2) > .sub { left: auto; right: -6px; }
.has-sub:hover > .sub, .has-sub:focus-within > .sub { display: block; }
.has-sub:hover > .sub.cols2, .has-sub:focus-within > .sub.cols2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4px; min-width: 500px; }
.sub a { padding: 9px 12px; font-size: 14.5px; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-list > .nav-defi { margin-right: 6px; }
.nav-list .nav-defi > a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1.5px solid var(--accent); border-radius: 999px; color: var(--accent); font-weight: 700; }
.nav-list .nav-defi > a:hover { background: rgba(3,121,217,.07); }
.nav-defi small { font-size: .82em; font-weight: 600; opacity: .8; }
.nav-actions .btn { white-space: nowrap; }
@media (min-width: 1280px) and (max-width: 1439px) { .nav { gap: 10px; } .nav-actions { gap: 8px; } .nav-list a { padding: 9px 7px; } }
.hdr-demo { display: none; align-items: center; gap: 6px; margin-left: auto; padding: 8px 14px; border: 1.5px solid var(--accent); border-radius: 999px; color: var(--accent); font: 700 14px/1 var(--font); text-decoration: none; white-space: nowrap; }
.hdr-demo:hover { background: rgba(3,121,217,.07); }
.menu-toggle { display: none; align-items: center; gap: 10px; margin-left: auto; padding: 9px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--fg); font: 700 14px/1 var(--font); cursor: pointer; }
.mt-bars { position: relative; width: 18px; height: 12px; }
.mt-bars > span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s; }
.mt-bars > span:first-child { top: 1px; } .mt-bars > span:last-child { bottom: 1px; }
.menu-toggle[aria-expanded="true"] .mt-bars > span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .mt-bars > span:last-child { transform: translateY(-5px) rotate(-45deg); }

/* Menu replié (téléphone, tablette, petit portable) : chaque public se déplie à la demande */
@media (max-width: 1279px) {
  .menu-toggle { display: inline-flex; margin-left: 8px; }
  .hdr-demo { display: inline-flex; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 8px var(--gutter) 22px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(0,6,12,.45); max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; }
  .nav.open { display: flex; }
  .no-js .nav { display: flex; position: static; box-shadow: none; max-height: none; }
  .no-js .menu-toggle { display: none; }
  .nav-list { flex-direction: column; align-items: stretch; }
  .nav-list > li { border-bottom: 1px solid var(--line); }
  .nav-top { justify-content: space-between; gap: 8px; }
  .nav-top > a { flex: 1; }
  .nav-list a { font-size: 17px; padding: 13px 10px; white-space: normal; }
  .has-sub > .nav-top > a::after { display: none; }
  .js .sub-toggle { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--fg); cursor: pointer; }
  .sub-toggle::before { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
  .sub-toggle[aria-expanded="true"]::before { transform: translateY(2px) rotate(-135deg); }
  .sub-toggle:hover { background: var(--soft); }
  .has-sub:hover > .sub, .has-sub:focus-within > .sub, .has-sub:hover > .sub.cols2, .has-sub:focus-within > .sub.cols2 { display: none; }
  .sub, .has-sub.open > .sub, .has-sub.open > .sub.cols2, .no-js .sub { display: none; position: static; min-width: 0; padding: 0 0 10px 12px; border: 0; border-left: 2px solid var(--soft); margin: 0 0 4px 10px; border-radius: 0; box-shadow: none; background: transparent; }
  .js .has-sub.open > .sub, .js .has-sub.open > .sub.cols2, .no-js .sub { display: block; }
  .sub a { font-size: 15.5px; padding: 9px 10px; color: var(--muted); }
  .nav-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 14px; padding-top: 6px; }
  .nav-list > .nav-defi { margin: 6px 0 10px; border-bottom: 0; }
  .nav-list .nav-defi > a { justify-content: center; padding: 13px 16px; }
  .nav-actions .btn { padding: 14px 18px; font-size: 16px; }
}

/* Fil d'Ariane */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; margin: 0 0 26px; padding: 0; font-size: 14px; color: var(--muted); }
.crumbs li + li::before { content: "›"; margin: 0 9px; opacity: .6; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; color: var(--fg); }
.crumbs [aria-current] { color: var(--fg); font-weight: 600; }

/* Héros de page */
.phero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(26px, 3.5vw, 44px) 0 clamp(44px, 6vw, 80px); border-bottom: 1px solid var(--line); }
.phero::before { content: ""; position: absolute; z-index: -1; inset: -60% -10% auto; height: 900px; background: radial-gradient(closest-side at 28% 50%, rgba(3,121,217,.08), transparent), radial-gradient(closest-side at 78% 42%, rgba(241,15,15,.10), transparent); filter: blur(10px); }
.phero-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.phero.has-aside .phero-grid { grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 5vw, 64px); }
.phero .lead { margin-bottom: 0; }
.phero-aside img.rounded { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; aspect-ratio: 16/11; object-fit: cover; }
.phero-aside img.square { aspect-ratio: 1; }
.home-hero { padding-top: clamp(36px, 5vw, 72px); }
.hero-visual { position: relative; padding-bottom: 28px; }
.hero-photo { width: 100%; border-radius: 24px; aspect-ratio: 8/6.2; object-fit: cover; object-position: 40% 30%; box-shadow: 0 40px 80px -40px rgba(0,6,12,.55); }
.hero-badge { position: absolute; left: -18px; bottom: 6px; width: clamp(72px, 6.5vw, 100px); height: auto; filter: drop-shadow(0 14px 24px rgba(0,6,12,.35)); }
.about-badge { width: min(320px, 70%); margin: 0 auto; filter: drop-shadow(0 20px 40px rgba(0,6,12,.25)); }
.badges { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14.5px; font-weight: 600; color: var(--muted); }
.badges li { display: inline-flex; align-items: center; gap: 8px; }
.badges .ic-sm { color: var(--accent); }

/* Sections */
.sec { padding: var(--sec) 0; }
.sec-tight { padding-top: clamp(40px, 5vw, 64px); }
.sec-alt { background: var(--soft); }
.sec-navy { background: var(--navy); color: #fff; --muted: #B6B3A9; --line: rgba(255,255,255,.16); --tri-mid: #fff; }
.sec-navy .kicker { color: #7AB4E5; }
.sec-navy a:not(.btn) { color: #fff; }
.sec-navy :focus-visible, .ftr :focus-visible, .promise :focus-visible, .guides :focus-visible { outline-color: #fff; }
.sec-head { margin-bottom: clamp(28px, 4vw, 44px); }
.sec-head .lead { margin-bottom: 0; }
.sec-head.center { text-align: center; }
.center h2, .center .lead { margin-left: auto; margin-right: auto; }
.center .kicker { justify-content: center; }
.small-h { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }

/* Grilles et cartes */
.g2, .g3, .g4 { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--card); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); color: var(--fg); }
.card > .ic, .card-body > .ic { color: var(--accent); margin-bottom: 14px; display: block; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 15.5px; margin: 0 0 12px; }
.card p:last-child { margin-bottom: 0; }
.card .more { margin-top: 4px; }
.card-link { display: flex; flex-direction: column; text-decoration: none; transition: transform .25s, box-shadow .25s; }
.card-link:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(0,6,12,.04), 0 28px 60px -28px rgba(0,6,12,.35); }
.card-link .card-body { display: flex; flex-direction: column; flex: 1; }
.card-link .more { margin-top: auto; padding-top: 6px; }
.card-media { padding: 0; overflow: hidden; }
.card-media > img, .card-ill { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.card-media .card-body { padding: 24px 26px 28px; }
.card-ill { display: flex; align-items: center; justify-content: center; gap: 22px; background: linear-gradient(135deg, var(--navy), var(--s89-blue)); color: #fff; }
.card-ill .ic { width: 44px; height: 44px; opacity: .9; }

/* Deux promesses (style des panneaux) */
.promises { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.promise { position: relative; display: flex; flex-direction: column; background: var(--navy); color: #fff; border-radius: 26px; padding: clamp(26px, 3.4vw, 44px) clamp(22px, 3vw, 40px) clamp(34px, 4vw, 48px); overflow: hidden; }
.promise::after { content: ""; position: absolute; left: 50%; bottom: 18px; width: 160px; height: 4px; margin-left: -80px; border-radius: 2px; background: linear-gradient(90deg, var(--tri-blue) 0 33.3%, #fff 33.3% 66.6%, var(--tri-red) 66.6%); }
.promise-label { font: 700 13px/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: #7AB4E5; margin: 0 0 12px; }
.promise h3 { font-size: clamp(22px, 2.2vw, 29px); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 28px; text-transform: uppercase; }
.promise ol { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 22px; }
.promise li { display: grid; grid-template-columns: 104px 1fr; gap: 16px; align-items: start; }
.glyph { font-weight: 800; font-size: 36px; line-height: 1; letter-spacing: -.03em; text-align: center; white-space: nowrap; }
.promise strong { display: block; font-size: 18px; line-height: 1.3; }
.promise em { display: block; margin-top: 4px; color: #B6B3A9; font-size: 15.5px; }
.promise .more { color: #fff; margin-top: auto; }

/* Piliers (pages de message) */
.pillars { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pillars li { background: var(--navy-2); border-radius: var(--radius); padding: 30px 28px; display: flex; flex-direction: column; }
.pillar-n { font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -.03em; margin-bottom: 18px; color: #fff; white-space: nowrap; }
.pillars h3 { font-size: 21px; }
.pillar-why { font-style: italic; color: #F1EFF1; }
.pillars p { color: #B6B3A9; font-size: 15.5px; }
.pillars .more { margin-top: auto; color: #fff; }

/* Chiffres */
.nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.num { background: var(--card); border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--shadow); }
.num strong { display: block; white-space: nowrap; font: 800 clamp(40px, 4.4vw, 60px)/1 var(--font); letter-spacing: -.04em; margin-bottom: 14px; color: var(--accent); }
.num-d { display: block; font-weight: 700; font-size: 17px; line-height: 1.35; }
.num small { display: block; color: var(--muted); font-size: 14px; margin-top: 6px; }

/* Étapes */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.step-media { aspect-ratio: 16/10; overflow: hidden; background: #00060C; }
.step-media img { width: 100%; height: 100%; object-fit: cover; }
.step-body { position: relative; padding: 24px 26px 28px; }
.step-n { position: absolute; right: 22px; top: 18px; font: 800 44px/1 var(--font); color: #0379D9; }
.step-body .ic { color: var(--accent); margin-bottom: 12px; display: block; }
.step-body p { color: var(--muted); font-size: 15.5px; margin: 0; }

/* Texte + image */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.split.rev > :first-child { order: 2; }
.media { margin: 0; }
.media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); background: #00060C; }
.media figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
.media.wide { margin-bottom: 30px; }
.ticks { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks .ic { width: 22px; height: 22px; color: var(--ok); margin-top: 2px; }
.sec-navy .ticks .ic { color: #7AB4E5; }
.numbered { counter-reset: n; list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 12px; }
.numbered li { counter-increment: n; position: relative; padding: 14px 16px 14px 58px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow); }
.numbered li::before { content: counter(n); position: absolute; left: 16px; top: 13px; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); color: var(--accent); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.icon-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.icon-list li { display: flex; gap: 14px; align-items: flex-start; }
.icon-list .ic { color: #7AB4E5; }
.icon-list b { display: block; font-size: 17px; }
.icon-list span { color: var(--muted); font-size: 15.5px; }

/* Démo */
.device { position: relative; max-width: 1180px; margin: 0 auto; padding: 14px; border-radius: 34px; background: linear-gradient(180deg, #00060C, #00060C); box-shadow: 0 60px 120px -40px rgba(0,6,12,.55), inset 0 1px 0 rgba(255,255,255,.12); }
.device::before { content: ""; position: absolute; top: 5px; left: 50%; width: 90px; height: 4px; margin-left: -45px; border-radius: 4px; background: rgba(255,255,255,.18); }
.demo { position: relative; text-align: left; border-radius: 22px; overflow: hidden; background: #00060C; color: #fff; }
.demo:focus-visible { outline-offset: 6px; }
.demo-stage { position: relative; }
.demo-view { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.demo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.demo-img.in { animation: demoIn .6s cubic-bezier(.2,.7,.2,1); }
@keyframes demoIn { from { opacity: .35; transform: scale(1.025); } to { opacity: 1; transform: none; } }
.demo-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0,6,12,.45) 100%); pointer-events: none; }
.demo-reticle { position: absolute; inset: 14px; border-radius: 18px; pointer-events: none; opacity: .55; background:
  linear-gradient(#fff,#fff) top left/26px 2px no-repeat, linear-gradient(#fff,#fff) top left/2px 26px no-repeat,
  linear-gradient(#fff,#fff) top right/26px 2px no-repeat, linear-gradient(#fff,#fff) top right/2px 26px no-repeat,
  linear-gradient(#fff,#fff) bottom left/26px 2px no-repeat, linear-gradient(#fff,#fff) bottom left/2px 26px no-repeat,
  linear-gradient(#fff,#fff) bottom right/26px 2px no-repeat, linear-gradient(#fff,#fff) bottom right/2px 26px no-repeat; }
.demo-marker { position: absolute; width: 0; height: 0; transition: left .6s cubic-bezier(.2,.7,.2,1), top .6s cubic-bezier(.2,.7,.2,1); }
.demo-marker span { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, rgba(3,121,217,.95) 0 28%, rgba(122,180,229,.45) 30% 60%, transparent 62%); box-shadow: 0 0 0 2px rgba(255,255,255,.9) inset; }
.demo-marker.go span { animation: pulse 1.8s ease-in-out 2; }
.demo-marker.qr span { border-radius: 10px; }
@keyframes pulse { 0%, 100% { transform: scale(.85); } 50% { transform: scale(1.12); } }
.demo-hud { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(620px, calc(100% - 28px)); padding: 16px 18px 14px; border-radius: 16px; background: rgba(0,6,12,.76); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255,255,255,.16); }
.demo-hud-top { display: flex; justify-content: space-between; gap: 12px; font: 700 11.5px/1.25 var(--font); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.demo-progress { height: 3px; background: rgba(255,255,255,.15); border-radius: 3px; margin: 10px 0 12px; overflow: hidden; }
.demo-progress span { display: block; height: 100%; width: 0; background: #7AB4E5; transition: width .5s; }
.demo-text { font: 600 clamp(15px, 1.6vw, 19px)/1.4 var(--font); margin: 0 0 12px; min-height: 2.8em; }
.demo-quiz { display: flex; gap: 10px; margin-bottom: 12px; }
.demo-quiz button { flex: 1; padding: 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; font: 700 16px/1 var(--font); cursor: pointer; }
.demo-quiz button:hover { background: rgba(255,255,255,.18); }
.demo.is-ko .demo-hud { border-color: #F17F80; box-shadow: 0 0 0 2px #F17F80; }
.demo.is-ok .demo-hud { border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok); }
.demo-end-time { font-size: 14.5px; color: rgba(255,255,255,.88); margin-bottom: 12px; }
.demo-end-time strong { color: #7AB4E5; }
.demo-end-cta { display: inline-block; margin-bottom: 12px; padding: 10px 16px; border-radius: 999px; background: #fff; color: #00060C; font-weight: 700; font-size: 14px; text-decoration: none; }
.demo-nav { display: flex; justify-content: space-between; gap: 8px; }
.demo-nav button { border: 0; background: rgba(255,255,255,.12); color: #fff; font: 700 13px/1 var(--font); padding: 10px 14px; border-radius: 999px; cursor: pointer; }
.demo-nav button:disabled { opacity: .35; cursor: default; }
.demo-nav .demo-next { background: #fff; color: #00060C; }
.demo-voice { display: inline-flex; align-items: center; gap: 8px; }
.demo-voice .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); }
.demo-voice[aria-pressed="true"] .dot { background: #7AB4E5; box-shadow: 0 0 0 4px rgba(122,180,229,.25); }
.demo-cover { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 14px; padding: 16px; text-align: center; background: linear-gradient(180deg, rgba(0,6,12,.15), rgba(0,6,12,.55)); }
.demo-start { display: inline-flex; align-items: center; gap: 14px; border: 0; cursor: pointer; padding: 14px 26px 14px 14px; border-radius: 999px; background: #fff; color: #00060C; font: 800 18px/1 var(--font); transition: transform .2s; }
.demo-start:hover { transform: scale(1.04); }
.demo-start .play { width: 46px; height: 46px; border-radius: 50%; background: var(--accent); position: relative; flex: none; }
.demo-start .play::after { content: ""; position: absolute; left: 18px; top: 14px; border-left: 15px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.demo-hint { color: #fff; font-size: 13.5px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,6,12,.85), 0 0 12px rgba(0,6,12,.6); }
.demo-free { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 20px 0 0; color: var(--muted); font-weight: 600; font-size: 15px; text-align: center; }
.demo-free .ic { width: 20px; height: 20px; color: var(--ok); }

/* Après Guides */
.guides { display: grid; grid-template-columns: auto 1fr; gap: clamp(26px, 4vw, 48px); align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: 30px; background: var(--navy) linear-gradient(135deg, var(--navy), #025BA3); color: #fff; --muted: #F1EFF1; --tri-mid: #fff; }
.guides .kicker { color: #F1EFF1; }
.guides-t { font-size: clamp(26px, 3.2vw, 42px); max-width: 22ch; }
.guides .lead { margin-bottom: 0; }
.gdate { display: grid; place-items: center; width: 150px; height: 170px; border-radius: 18px; background: #fff; color: var(--navy); line-height: 1; padding: 14px 0; }
.gdate span { font-size: 72px; font-weight: 800; letter-spacing: -.04em; }
.gdate small { font-size: 16px; font-weight: 700; letter-spacing: .1em; opacity: .75; }
.timeline { display: grid; gap: 14px; border-left: 3px solid var(--accent); padding-left: 22px; }
.tl-item { position: relative; background: var(--card); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); }
.tl-item::before { content: ""; position: absolute; left: -31px; top: 22px; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.tl-item.next::before { background: var(--bg); border: 2px dashed var(--accent); }
.tl-item b { display: block; font-size: 18px; }
.tl-item span { color: var(--muted); font-size: 15.5px; }

/* Souveraineté */
.sov-diagram { margin: 0; display: grid; grid-template-columns: 1fr 12px 180px; align-items: center; gap: 28px; }
.sd-site { position: relative; display: flex; flex-wrap: wrap; justify-content: space-around; gap: 18px; padding: 34px 24px 28px; border-radius: var(--radius); border: 1.5px solid var(--accent); background: var(--card); }
.sd-tag { position: absolute; top: -11px; left: 20px; padding: 0 8px; background: var(--bg); font: 700 11.5px/20px var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.sd-site span { display: grid; justify-items: center; gap: 8px; }
.sd-site .ic { width: 64px; height: 64px; padding: 16px; border-radius: 16px; background: var(--soft); color: var(--accent); }
.sd-site em, .sd-cloud em { font: 600 13.5px/1.2 var(--font); font-style: normal; color: var(--muted); }
.sd-wall { height: 120px; border-radius: 6px; background: repeating-linear-gradient(0deg, var(--accent-2) 0 10px, transparent 10px 16px); }
.sd-cloud { height: 110px; border-radius: var(--radius); border: 1.5px dashed rgba(0,6,12,.25); display: grid; place-items: center; align-content: center; gap: 6px; color: var(--muted); text-decoration: line-through; }
.sd-cloud .ic { width: 44px; height: 44px; }
.sov-diagram figcaption { grid-column: 1 / -1; font-size: 14.5px; color: var(--muted); }

/* Matériel */
.hw-item { position: relative; padding: 26px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.hw-item .ic { color: var(--accent); margin-bottom: 14px; display: block; }
.hw-item p { color: var(--muted); font-size: 15px; margin: 0; }
.hw-item.next { box-shadow: none; background: transparent; border: 1.5px dashed rgba(0,6,12,.22); }
.hw-item.now::after, .dot-now { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(3,121,217,.2); }
.hw-item.now::after { position: absolute; top: 20px; right: 20px; }
.dot-now, .dot-next { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 6px 0 14px; vertical-align: middle; }
.dot-now:first-child { margin-left: 0; }
.dot-next { border: 1.5px dashed var(--muted); }
.legend { margin: 18px 0 0; font-size: 14.5px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.legend .ok { color: var(--ok); } .legend .warn { color: var(--warn); } .legend .ko { color: var(--ko); }
.legend .ic-sm { margin-left: 10px; } .legend .ic-sm:first-child { margin-left: 0; }

/* Tableau comparatif */
.table-wrap { position: relative; overflow-x: auto; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
table.vs { width: 100%; border-collapse: collapse; min-width: 700px; }
.vs th, .vs td { padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--line); }
.vs thead th { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; vertical-align: bottom; }
.vs tbody th { text-align: left; font-weight: 600; font-size: 15.5px; }
.vs tr:last-child th, .vs tr:last-child td { border-bottom: 0; }
.vs .ic { width: 22px; height: 22px; margin: 0 auto; display: block; }
.vs td.check .ic { color: var(--ok); } .vs td.x .ic { color: var(--ko); opacity: .6; } .vs td.tilde .ic { color: var(--warn); }
.vs .us { background: rgba(3,121,217,.08); }
.vs thead .us { color: var(--accent); }

/* Preuve scientifique */
.sci-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
.sci-ref { margin: 22px 0 0; display: flex; gap: 14px; padding: 20px 22px; border-left: 3px solid var(--accent); background: var(--card); border-radius: 0 var(--radius) var(--radius) 0; font-style: italic; font-size: 15.5px; box-shadow: var(--shadow); }
.sci-ref .ic { color: var(--accent); }
.sci-points { list-style: none; padding: 0; margin: 0; }
.sci-points li { font: 700 21px/1.25 var(--font); padding: 18px 0; border-bottom: 1px solid var(--line); }

/* Références */
.ref-col { border-top: 3px solid var(--accent); padding-top: 16px; }
.ref-col h3, .trust-col h3 { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ref-list { list-style: none; margin: 0; padding: 0; }
.ref-list li { font-weight: 700; font-size: 18px; line-height: 1.3; padding: 12px 0; border-bottom: 1px solid var(--line); }
.trust-col { border-top: 3px solid var(--accent); padding-top: 16px; }
.trust-col p { font-weight: 600; font-size: 17px; }
.note-discret { margin: 22px 0 0; font-size: 14.5px; color: var(--muted); font-style: italic; }
.award { display: flex; align-items: center; gap: 14px; margin: 28px 0 0; padding: 18px 22px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); font-weight: 600; }
.award .ic { color: var(--accent-2); }
.partners { margin-top: 36px; }
.eco-col { border-top: 3px solid var(--accent); padding-top: 16px; }
.eco-col h3 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.eco-col ul { list-style: none; margin: 0; padding: 0; }
.eco-col li { font-weight: 700; font-size: 17px; padding: 10px 0; border-bottom: 1px solid var(--line); }

/* Études de cas */
.case { background: var(--card); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.case-tag { display: inline-flex; align-items: center; gap: 8px; font: 700 12.5px/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
.case p { color: var(--muted); font-size: 15.5px; }
.case-res { color: var(--fg) !important; background: var(--soft); border-radius: 12px; padding: 12px 14px; }
.case-todo { margin: auto 0 0; font-size: 14px !important; }

/* AFEST */
.conds { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.conds li { background: var(--card); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); border-top: 4px solid var(--accent); }
.cond-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); color: var(--accent); font-weight: 800; margin-bottom: 14px; }
.conds p { color: var(--muted); font-size: 15.5px; margin: 0; }

/* FAQ */
.faq { max-width: 880px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 44px 20px 0; font: 700 18.5px/1.35 var(--font); position: relative; border-radius: 6px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font-size: 28px; font-weight: 400; color: var(--accent); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq-a p { color: var(--muted); padding-bottom: 20px; margin: 0; max-width: 70ch; }
.faq-group + .faq-group { margin-top: 44px; }
.faq-h { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 6px; }

/* Bandeau d'appel final */
.cta-band { text-align: center; background: radial-gradient(ellipse at 50% 0%, rgba(3,121,217,.08), transparent 62%); border-top: 1px solid var(--line); }
.cta-band h2 { margin: 0 auto .4em; max-width: 30ch; text-wrap: balance; font-size: clamp(32px, 4.6vw, 60px); }
.cta-band .lead { margin: 0 auto 32px; }
.cta-mail { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; align-items: center; margin: 24px 0 0; color: var(--muted); font-size: 15px; }

/* Formulaire */
.contact-form { max-width: 900px; }
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; background: #F1EFF1; border: 1px solid #F17F80; color: #00060C; font-size: 15.5px; margin: 0 0 24px; }
.notice .ic { width: 22px; height: 22px; color: #F10F0F; }
.notice a { color: #00060C; font-weight: 700; }
.form { display: grid; gap: 18px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.req { font-weight: 400; color: var(--muted); font-size: 13.5px; }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1.5px solid rgba(0,6,12,.55); border-radius: 12px; background: #fff; color: var(--fg); }
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--accent); outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: var(--ko); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.consent input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--accent); }
.form .btn { justify-self: start; }
.form-status { padding: 16px 18px; border-radius: 14px; background: rgba(3,121,217,.08); border: 1px solid #7AB4E5; color: #025BA3; font-weight: 600; }
.form-status.err { background: rgba(241,127,128,.16); border-color: #F17F80; color: #00060C; }

/* Mentions légales */
.legal h2 { font-size: clamp(22px, 2.4vw, 28px); margin-top: 36px; }
.legal h2:first-child { margin-top: 0; }
.legal p { color: #00060C; }

/* Éléments à compléter (prototype) */
mark.todo { background: #F17F80; color: #00060C; padding: 1px 6px; border-radius: 6px; font-weight: 600; font-size: .92em; }

/* Pied de page */
.ftr { background: var(--navy); color: #F1EFF1; --muted: #B6B3A9; }
.ftr-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr; gap: 32px; padding-top: 56px; padding-bottom: 36px; }
.ftr-badge { width: 112px; height: auto; margin-bottom: 16px; }
.ftr-brand p { font-size: 15px; margin: 0 0 8px; max-width: 34ch; }
.ftr-h { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #7AB4E5; margin: 0 0 14px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15px; }
.ftr a { color: #fff; text-decoration: none; }
.ftr a:hover { text-decoration: underline; }
.ftr-net { border-top: 1px solid rgba(255,255,255,.14); padding-top: 20px; padding-bottom: 6px; font-size: 14.5px; }
.ftr-net b { color: #fff; margin-right: 6px; }
.ftr-url { text-align: center; padding: 22px 16px 8px; }
.ftr-url a { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: clamp(17px, 2.2vw, 24px); }
.ftr-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; padding-top: 16px; padding-bottom: 30px; font-size: 13.5px; color: #B6B3A9; }
.ftr mark.todo { background: #F17F80; }

.variants-pill { position: fixed; left: 14px; bottom: 14px; z-index: 60; padding: 9px 14px; border-radius: 999px; background: rgba(0,6,12,.82); color: #fff; font: 700 12.5px/1 var(--font); text-decoration: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* ---------- Adaptation aux écrans ---------- */
@media (max-width: 1080px) {
  .g4, .conds { grid-template-columns: repeat(2, 1fr); }
  .g3, .steps, .pillars, .promises { grid-template-columns: 1fr; }
  .nums { grid-template-columns: repeat(2, 1fr); }
  .phero.has-aside .phero-grid, .split, .sci-grid { grid-template-columns: 1fr; }
  .split.rev > :first-child { order: 0; }
  .phero-aside img.rounded { max-width: 720px; }
  .hero-visual { max-width: 720px; }
  .hero-badge { left: 12px; }
  .ftr-grid { grid-template-columns: repeat(3, 1fr); }
  .ftr-brand { grid-column: 1 / -1; }
  .steps .step, .g3 .card-media { max-width: 720px; }
}
@media (max-width: 760px) {
  .g2, .row2 { grid-template-columns: 1fr; }
  .guides { grid-template-columns: 1fr; }
  .gdate { width: 120px; height: 132px; } .gdate span { font-size: 54px; }
  .sov-diagram { grid-template-columns: 1fr; gap: 16px; }
  .sd-wall { height: 12px; }
  .sd-cloud { height: 90px; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .g4, .conds, .nums { grid-template-columns: 1fr; }
  .card, .case, .num { padding: 22px; }
  .card-media { padding: 0; }
  .promise li { grid-template-columns: 76px 1fr; gap: 12px; }
  .glyph { font-size: 28px; }
  .pillars li { padding: 24px 22px; }
  .btn { white-space: normal; text-align: center; }
  .cta-row .btn { width: 100%; }
  .hdr-in { min-height: 58px; }
  .logo img { height: 90px; }
  .demo-text { min-height: 4.2em; }
  .demo-reticle { inset: 8px; }
  .variants-pill { display: none; }
  .demo-start { font-size: 16px; padding: 12px 20px 12px 12px; }
  .device { padding: 8px; border-radius: 22px; }
  .demo { border-radius: 16px; }
  .ftr-grid { grid-template-columns: 1fr; gap: 26px; }
  .numbered li { padding-left: 54px; }
  .faq summary { font-size: 17px; }
  .vs th, .vs td { padding: 12px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .hdr, .variants-pill, .menu-toggle, .cta-band, .ftr-grid, .device { display: none !important; }
}

/* =====================================================================
   Ajouts de la version E
   ===================================================================== */
/* Pied de page élargi */
.ftr .ftr-top { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; padding-top: 56px; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.14); }
.ftr .ftr-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 28px 26px; padding-top: 32px; padding-bottom: 32px; }
.ftr .ftr-grid ul { font-size: 14.5px; gap: 7px; }
.ftr-h a { color: #7AB4E5 !important; }
.ftr-contact ul { font-size: 15px; }

/* Héros de l'accueil : les arguments dans l'ordre des panneaux */
.args { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; max-width: 640px; }
.args li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 14px 18px 14px 14px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); }
.args .arg-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 2px solid var(--accent); color: var(--accent); font-weight: 800; font-size: 20px; }
.args b { display: block; font-size: 17px; line-height: 1.3; }
.args .arg-d { display: block; color: var(--muted); font-size: 15px; margin-top: 2px; }
.home-hero .phero-copy .lead { max-width: 58ch; }
.hero-pitch { list-style: none; margin: 4px 0 26px; padding: 0; display: grid; gap: 10px; }
/* L'étiquette et sa phrase se lisent d'un trait : la phrase suit l'étiquette sur la même ligne (Emmanuel, 28/10/2026). */
.hero-pitch li { display: block; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.4; font-weight: 600; color: var(--navy); }
.pitch-tag { display: inline-block; margin-right: 8px; padding: 2px 10px; border-radius: 999px; background: #fff; border: 1px solid rgba(3,121,217,.35); color: var(--accent); font-size: .78em; font-weight: 800; letter-spacing: .02em; }
/* Retour à la ligne après la virgule de l'accroche, sur grand écran seulement (Emmanuel, 28/10/2026). */
.br-wide { display: none; }
@media (min-width: 1081px) { .br-wide { display: inline; } }
.home-hero .phero-grid { align-items: start; }
.home-hero .hero-visual { margin-top: clamp(0px, 3vw, 44px); }

/* Univers */
.doors-more { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; color: var(--muted); font-size: 15.5px; }

/* Garanties */
.garanties { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.garanties li { display: flex; gap: 14px; align-items: flex-start; padding: 22px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.garanties .ic { color: var(--accent); }
.garanties b { display: block; font-size: 17px; line-height: 1.3; margin-bottom: 4px; }
.garanties span { color: var(--muted); font-size: 15px; }
.sec-navy .garanties li { background: var(--navy-2); box-shadow: none; }
.sec-navy .garanties .ic { color: #7AB4E5; }

/* Ce que les autres approches imposent / ce que fait SHIFT89 */
.contrast { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.contrast li { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--card); }
.ct-them, .ct-us { display: flex; gap: 12px; align-items: flex-start; padding: 20px 22px; }
.ct-them { background: #F1EFF1; color: rgba(0,6,12,.78); }
.ct-us { background: rgba(3,121,217,.06); }
.ct-them .ic { color: var(--ko); opacity: .7; width: 22px; height: 22px; margin-top: 2px; }
.ct-us .ic { color: var(--ok); width: 22px; height: 22px; margin-top: 2px; }
.ct-them b, .ct-us b { display: block; font-size: 16.5px; line-height: 1.35; }
.ct-them small, .ct-us small { display: block; font-size: 14.5px; color: var(--muted); margin-top: 3px; }
.ct-head { display: grid; grid-template-columns: 1fr 1fr; font: 700 12.5px/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 0 22px 2px; }

/* Étapes sur quatre colonnes (parcours casque → PC) */
.steps.s4 { grid-template-columns: repeat(4, 1fr); }
.steps.s4 .step-body { padding: 22px 22px 24px; }
.step-tag { display: inline-block; margin-top: 12px; padding: 4px 10px; border-radius: 999px; background: var(--soft); font: 700 12px/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.duo-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.duo-cols .card h3 { display: flex; align-items: center; gap: 10px; }
.duo-cols .card h3 .ic { margin: 0; color: var(--accent); }

/* Tableau comparatif à cinq colonnes */
table.vs5 { min-width: 900px; }
.vs5 td { vertical-align: top; }
.vs-note { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.vs5 td.us .vs-note { color: var(--accent); font-weight: 600; }
.vs-foot { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); max-width: 90ch; }

/* Notes de bas de page */
sup.fn { font-size: .68em; line-height: 0; margin-left: 2px; }
sup.fn a { text-decoration: none; font-weight: 700; padding: 0 2px; }
.sources-sec { padding-top: 32px; padding-bottom: 32px; border-top: 1px solid var(--line); }
.sources { margin: 0; padding-left: 22px; font-size: 14px; color: var(--muted); display: grid; gap: 6px; }
.sources a { word-break: break-word; }
.sources li:target { background: rgba(241,127,128,.25); border-radius: 6px; }

/* Leviers (Ce que change SHIFT89) */
.pillars.n4 { grid-template-columns: repeat(4, 1fr); }
.pillars.n2 { grid-template-columns: repeat(2, 1fr); }
.pillar-ic { width: 34px; height: 34px; color: #7AB4E5; margin-bottom: 16px; }
.pillars.light li { background: var(--card); box-shadow: var(--shadow); }
.pillars.light h3 { color: var(--fg); } .pillars.light p { color: var(--muted); } .pillars.light .more { color: var(--accent); } .pillars.light .pillar-ic { color: var(--accent); }

/* Vocabulaire du métier : ce que nous outillons */
.terms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 0; }
.term { padding: 20px 22px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); border-left: 4px solid var(--accent); }
.term dt { font-weight: 700; font-size: 17px; margin-bottom: 4px; }
.term dd { margin: 0; color: var(--muted); font-size: 15.5px; }
.terms-note { margin: 18px 0 0; font-size: 14.5px; color: var(--muted); }
.sub-block { margin-top: 40px; }

/* Pages sœurs */
.sisters-sec { padding-top: 40px; padding-bottom: 40px; border-top: 1px solid var(--line); }
.sisters { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sisters a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); font-weight: 600; font-size: 15px; text-decoration: none; color: var(--fg); }
.sisters a:hover { color: var(--accent); }
.sisters .ic-sm { color: var(--accent); }

/* Simulateur de gains */
.simu { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 44px); align-items: start; }
.simu-form { display: grid; gap: 26px; }
.simu fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 16px; min-width: 0; }
.simu legend { font-weight: 800; font-size: 19px; margin-bottom: 10px; padding: 0; }
.simu .field input { font-variant-numeric: tabular-nums; }
.simu .hint { display: block; font-size: 13.5px; color: var(--muted); margin-top: 5px; }
.scen { display: flex; flex-wrap: wrap; gap: 10px; }
.scen label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1.5px solid rgba(0,6,12,.55); border-radius: 999px; font-weight: 600; cursor: pointer; background: #fff; }
.scen input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
.scen label:has(input:checked) { border-color: var(--accent); background: rgba(3,121,217,.07); color: var(--accent); }
.hyp { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 18px; border-radius: 16px; background: var(--soft); }
.simu-out { position: sticky; top: 90px; background: var(--navy); color: #fff; border-radius: 24px; padding: clamp(22px, 3vw, 34px); }
.simu-out h2 { font-size: clamp(22px, 2.4vw, 30px); color: #fff; }
.simu-out .kicker { color: #7AB4E5; }
.res { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 14px; }
.res li { padding: 16px 18px; border-radius: 16px; background: var(--navy-2); }
.res strong { display: block; font: 800 clamp(26px, 3vw, 36px)/1.1 var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.res span { display: block; color: #B6B3A9; font-size: 14.5px; margin-top: 4px; }
.res li.total { background: #fff; color: var(--navy); }
.res li.total span { color: var(--muted); }
.simu-note { font-size: 13.5px; color: #B6B3A9; margin: 0 0 16px; }
.simu-out .btn-light { width: 100%; }

/* Plan du site */
.plan { columns: 3 260px; column-gap: 40px; }
.plan section { break-inside: avoid; margin-bottom: 30px; }
.plan h2 { font-size: 20px; margin-bottom: 10px; }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 15.5px; }
.plan .prov { color: var(--muted); font-size: 13px; }

/* Articles (Ressources) */
.art-meta { margin: 18px 0 0; color: var(--muted); font-size: 15px; }
.art-grid { display: grid; grid-template-columns: 280px 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.art-side { position: sticky; top: 90px; display: grid; gap: 22px; }
.keypoints, .toc { padding: 20px 22px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.keypoints .ticks { margin: 0; font-size: 15px; }
.toc ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; }
.prose { max-width: 72ch; min-width: 0; }
.prose h2 { font-size: clamp(24px, 2.6vw, 32px); margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.4em; }
.prose p, .prose li { color: #00060C; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose blockquote { margin: 1.4em 0; padding: 16px 20px; border-left: 3px solid var(--accent); background: var(--card); border-radius: 0 14px 14px 0; box-shadow: var(--shadow); }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 1em 0; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }

/* Liste de ressources */
.res-meta { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; font-weight: 600; letter-spacing: .04em; }

/* Flux techniques (sécurité) */
.flows { width: 100%; border-collapse: collapse; min-width: 640px; }
.flows th, .flows td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 15.5px; }
.flows thead th { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.flows tbody th { font-weight: 700; }
.pill-ok, .pill-ko { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.pill-ok { background: rgba(3,121,217,.08); color: #025BA3; } .pill-ko { background: #F1EFF1; color: rgba(0,6,12,.78); }

/* Encadrés */
.callout { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); border-left: 4px solid var(--accent-2); }
.callout .ic { color: var(--accent-2); }
.callout p { margin: 0; }
.callout p + p { margin-top: 8px; }
.lead-strong { font-size: clamp(20px, 2vw, 26px); font-weight: 700; line-height: 1.35; max-width: 40ch; letter-spacing: -.01em; }

@media (max-width: 1080px) {
  .garanties, .steps.s4, .pillars.n4 { grid-template-columns: repeat(2, 1fr); }
  .simu, .art-grid { grid-template-columns: 1fr; }
  .simu-out, .art-side { position: static; }
  .ftr .ftr-top { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .contrast li { grid-template-columns: 1fr; }
  .ct-head { display: none; }
  .terms, .duo-cols, .pillars.n2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .garanties, .steps.s4, .pillars.n4, .hyp { grid-template-columns: 1fr; }
  .ftr .ftr-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .args li { grid-template-columns: 38px 1fr; padding: 12px 14px 12px 12px; gap: 12px; }
  .args .arg-n { width: 38px; height: 38px; font-size: 17px; }
  .sisters a { font-size: 14.5px; padding: 9px 14px; }
}
.devices-line { display: flex; gap: 10px; align-items: flex-start; margin: 22px 0 0; font-size: 14.5px; color: var(--muted); max-width: 90ch; }
.devices-line .ic-sm { color: var(--accent); margin-top: 3px; }

/* Vidéo chargée au clic */
.vid { margin: 0; }
.vid-frame { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: #00060C; box-shadow: var(--shadow); }
.vid-frame > img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.vid-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid-cover { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 12px; padding: 18px; text-align: center; color: #fff; }
.vid-play { display: inline-flex; align-items: center; gap: 14px; border: 0; cursor: pointer; padding: 12px 22px 12px 12px; border-radius: 999px; background: #fff; color: #00060C; font: 800 16px/1.25 var(--font); text-align: left; }
.vid-play .play { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); position: relative; flex: none; }
.vid-play .play::after { content: ""; position: absolute; left: 16px; top: 12px; border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.vid-note { font-size: 13px; text-shadow: 0 1px 3px rgba(0,6,12,.8); }
.vid-soon { margin: 0; display: grid; gap: 8px; font-size: 18px; text-shadow: 0 1px 3px rgba(0,6,12,.8); }
.vid-soon span { font-size: 14px; }
.vid figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
.demo-free-2 { margin-top: 8px; font-size: 14px; }
.demo-free b { color: var(--fg); }
.home h1 { font-size: clamp(34px, 3.2vw, 46px); max-width: none; }
.quote-big { margin: 0; padding: clamp(24px, 4vw, 44px); border-radius: 26px; background: var(--navy); color: #fff; }
.quote-big p { font: 800 clamp(24px, 3vw, 38px)/1.2 var(--font); letter-spacing: -.02em; margin: 0 0 14px; max-width: 30ch; }
.quote-big cite { font-style: normal; color: #B6B3A9; font-size: 15px; }
.events { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.events li { padding: 10px 16px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); font-weight: 600; font-size: 15px; }
.hw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }

.g1 { display: grid; gap: 22px; }

/* Lien « Connexion » (espace client) dans l'en-tête : un mot, pas de cadenas. */
.nav-client { display: inline-flex; align-items: center; font-weight: 600; font-size: 14.5px; color: var(--accent) !important; padding: 9px 8px; border-radius: 10px; white-space: nowrap; }
.nav-client:hover { background: var(--soft); text-decoration: underline; }
@media (max-width: 1279px) { .nav-client { justify-content: center; padding: 10px; font-size: 15.5px; } }
.vid-frame.is-playing { aspect-ratio: auto; height: min(720px, 85vh); background: #fff; }
.vid figcaption a { font-weight: 600; }
.vid-stack { display: grid; gap: 28px; }

.approche-fin { margin: 34px 0 0; }
/* Preuve Thales en tête d'accueil */
.proof-band { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.proof-band h2 { font-size: clamp(24px, 2.4vw, 34px); max-width: 26ch; }
.proof-quote { margin: 0; padding: 26px 28px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); border-left: 4px solid var(--accent); }
.proof-quote p { margin: 0 0 12px; font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; line-height: 1.4; color: var(--navy); }
.proof-quote footer { color: var(--muted); font-size: 14px; }
@media (max-width: 1080px) { .proof-band { grid-template-columns: 1fr; } }
.case-link { margin: 12px 0 0; }
.case-link a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
/* Pages publics et enjeux : un titre qui laisse voir le bouton sans défiler */
.phero.has-aside:not(.home-hero) h1 { font-size: clamp(30px, 3.3vw, 46px); }
.callout-suite { border-left: 4px solid var(--accent); }
.callout-suite .lead-strong { max-width: none; margin: 0 0 8px; }
.callout-suite .cta-row { margin: 16px 0 0; }
.form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status.ok { color: #025BA3; }
.sec-navy .card { --muted: rgba(0,6,12,.7); }
@media (min-width: 1081px) { .home-hero.has-aside .phero-grid { grid-template-columns: 1.25fr .75fr; } }
/* Accueil, sur ordinateur : la photo passe en format vertical pour accompagner toute la hauteur du texte. */
.hero-visual picture { display: block; }
@media (min-width: 1081px) { .home-hero .hero-photo { aspect-ratio: 3 / 5; object-position: 50% 30%; } }

.sec-navy .card a:not(.btn) { color: var(--accent); }

/* Audit RGAA du 27/10/2026 */
ul.card-list, ul.nums, ul.pillars, ul.ftr-legal, ul.doors-more-list, ol.timeline { list-style: none; margin: 0; padding: 0; }
ul.card-list > li { display: flex; }
ul.card-list > li > .card { flex: 1; }
ul.doors-more-list { display: contents; }
ul.doors-more-list > li { display: inline; }
.has-sub.closed > .sub, .has-sub.closed:hover > .sub, .has-sub.closed:focus-within > .sub { display: none !important; }
.form-status:empty, .form-error:empty { display: none; }
.form-error { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: rgba(241,127,128,.16); color: #00060C; font-weight: 600; }
q { quotes: "«\00a0" "\00a0»" "“" "”"; }
.proof-quote blockquote { margin: 0; }
.proof-quote figcaption { color: var(--muted); font-size: 14px; }

/* Logo rond en badge : plus grand que la barre, il déborde d'environ la moitié vers le bas (Emmanuel, 27/10/2026). */
.logo { position: relative; z-index: 2; display: block; flex: none; width: 110px; height: 44px; border-radius: 0; }
.logo img { position: absolute; left: 0; top: 0; height: 104px; width: auto; filter: drop-shadow(0 8px 16px rgba(0,6,12,.22)); }
.logo:focus-visible { outline: none; }
.logo:focus-visible img { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 50%; }
.phero { padding-top: clamp(64px, 6vw, 76px); }
@media (min-width: 1280px) and (max-width: 1439px) { .logo { width: 92px; } .logo img { height: 86px; } }
@media (max-width: 560px) { .logo { width: 96px; height: 40px; } .logo img { height: 90px; } .phero { padding-top: 50px; } }

/* Audit RGAA du 27/10/2026 : présentation, formulaires, consultation */
.sec-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.simu-out :focus-visible { outline-color: #fff; }
.sec-navy .card :focus-visible { outline-color: var(--accent); }
.ftr-legal a, .ftr-h a, sup.fn a { text-decoration: underline; text-underline-offset: 2px; }
.nav { scroll-padding-block: 8px; }
@media (min-width: 1081px) { .art-side { max-height: calc(100vh - 110px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 18px 26px; margin: -4px -18px -26px; } }
.ct-lbl { display: block; font: 700 12px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
@media (min-width: 761px) { .ct-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (max-width: 760px) {
  .demo-hud { position: static; transform: none; width: auto; padding: 14px 14px 12px; border-radius: 0; border: 0; border-top: 1px solid rgba(255,255,255,.14); background: #00060C; }
  .demo.is-ko .demo-hud { box-shadow: inset 0 3px 0 #F17F80; }
  .demo.is-ok .demo-hud { box-shadow: inset 0 3px 0 var(--ok); }
}
@media (max-width: 374px) {
  .hdr-in { gap: 8px; }
  .hdr-demo { padding: 8px 10px; }
  .menu-toggle { margin-left: 0; padding: 9px 10px; gap: 6px; }
  .logo { width: 80px; } .logo img { height: 78px; }
}
@media (max-width: 480px) {
  .vid-frame:not(.is-playing) { aspect-ratio: auto; }
  .vid-frame:not(.is-playing) > img { position: absolute; inset: 0; }
  .vid-frame:not(.is-playing) .vid-cover { position: relative; min-height: calc((100vw - 32px) * 9 / 16); }
}
/* Espacements du texte agrandis : le menu de bureau passe sur deux lignes au lieu de sortir de l’écran. */
@media (min-width: 1280px) { .nav { min-width: 0; flex-wrap: wrap; justify-content: flex-end; } .nav-list { flex-wrap: wrap; justify-content: flex-end; } }
.field-err { margin: 6px 0 0; color: var(--fg); font-size: 14px; font-weight: 600; }
.field-err::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--s89-red); vertical-align: 1px; }
.consent + .field-err { margin-top: -10px; padding-left: 32px; }
.consent input[aria-invalid="true"] { outline: 2px solid var(--ko); outline-offset: 2px; }
/* Le menu de bureau tient sur une ligne avec de la marge (il ne passe sur deux lignes qu'avec des espacements de texte agrandis). */
@media (min-width: 1280px) and (max-width: 1439px) { .nav-list a { padding: 9px 6px; font-size: 14px; } .nav-list > .nav-defi { margin-right: 2px; } .nav { gap: 8px; } }
@media (min-width: 1500px) { .hdr-in { max-width: 1540px; } }

/* Audit RGAA du 27/10/2026 : couleurs (3.1, 3.3) */
.nav-list a[aria-current="page"], .nav-list > .is-active > .nav-top > a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.sub a[aria-current="page"] { font-weight: 700; }
/* Dans les panneaux de menu, libellés sur deux lignes : soulignement fin et proche du texte, pour ne pas toucher la
   ligne du dessous (Emmanuel, 29/10/2026). Le menu principal garde son soulignement plus marqué. */
.nav-list .sub a[aria-current="page"] { text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.demo-voice .dot { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.8); }
.demo-voice[aria-pressed="true"] .dot { background: #7AB4E5; box-shadow: 0 0 0 4px rgba(122,180,229,.25); }
.demo-marker span { box-shadow: 0 0 0 2px rgba(255,255,255,.9) inset, 0 0 0 2px rgba(0,6,12,.45); }
.field input, .field select, .field textarea, .scen label { border-color: rgba(0,6,12,.55); }
.field [aria-invalid="true"] { border-color: var(--ko); border-width: 2px; }
.vs td.x .ic, .ct-them .ic { opacity: 1; }
.vs td.check .ic, .ct-us .ic, .legend .ok { color: var(--s89-blue); }

/* Menus en grand panneau (Vos enjeux, Écoles, Industrie, Défense, Nos solutions) : vignettes à pictogramme en couleur,
   colonne « Découvrir » et photo vers la vue d'ensemble. Sur téléphone, les vignettes deviennent des lignes à pastille. */
.mega-tiles, .mega-side ul { list-style: none; margin: 0; padding: 0; }
.mega-ic { display: grid; place-items: center; flex: none; background: var(--t-bg); color: var(--t-fg); transition: transform .2s, background-color .2s, color .2s; }
/* Familles des menus en trois bleus (Emmanuel, 28/10/2026, plutôt que bleu / rouge / noir) : t1 #025BA3, t2 #0379D9, t4 #7AB4E5.
   --t-on : pictogramme sur la pastille pleine ; --t-tx : texte au survol. Sur le bleu clair, blanc et texte clair seraient
   illisibles (2,2:1) : pictogramme et texte y passent en bleu foncé (3,1:1 et 6,6:1). */
.t1 { --t-bg: rgba(2,91,163,.12); --t-fg: var(--s89-blue-m); --t-on: #fff; --t-tx: var(--s89-blue-m); } .t2 { --t-bg: rgba(3,121,217,.12); --t-fg: var(--s89-blue); --t-on: #fff; --t-tx: var(--s89-blue); } .t3, .t4 { --t-bg: rgba(122,180,229,.28); --t-fg: var(--s89-blue-c); --t-on: var(--s89-blue-m); --t-tx: var(--s89-blue-m); }
.mega-h { margin: 0 0 4px; font: 700 12px/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mega-photo { display: none; }
@media (min-width: 1280px) {
  .nav-list > li.has-mega { position: static; }
  .has-mega > .nav-top { position: relative; }
  /* Pont invisible entre l'entrée du menu et le panneau, pour que la souris ne le referme pas en descendant. */
  .has-mega:hover > .nav-top::after { content: ""; position: absolute; left: -24px; right: -24px; top: 100%; height: 26px; }
  /* Le badge du logo reste au-dessus du panneau ; le contenu commence sous lui. */
  .logo { z-index: 6; }
  .nav-list > li > .sub.mega, .nav-list > li:nth-last-child(-n+2) > .sub.mega { left: 0; right: 0; top: 100%; min-width: 0; padding: 40px 0 32px; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 24px 24px; background: #fff; box-shadow: 0 50px 80px -50px rgba(0,6,12,.5); max-height: calc(100vh - 66px); overflow-y: auto; overscroll-behavior: contain; }
  .mega-in { max-width: 1280px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 44px; }
  .mega-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; align-content: start; }
  .nav-list .mega-tiles a { display: flex; flex-direction: column; align-items: center; gap: 12px; height: 100%; padding: 16px 10px 14px; border-radius: 18px; text-align: center; white-space: normal; font-size: 14.5px; line-height: 1.3; }
  .mega-tiles .mega-ic { width: 68px; height: 68px; border-radius: 20px; }
  .mega-tiles .mega-ic svg { width: 32px; height: 32px; }
  .nav-list .mega-tiles a:hover { background: var(--soft); }
  .mega-tiles a:hover .mega-ic, .mega-tiles a:focus-visible .mega-ic { transform: translateY(-3px); background: var(--t-fg); color: var(--t-on); }
  .mega-side { display: flex; flex-direction: column; gap: 6px; padding-left: 32px; border-left: 1px solid var(--line); }
  .nav-list .mega-side ul a { padding: 7px 0; border-radius: 0; font-weight: 500; font-size: 15px; white-space: normal; }
  .nav-list .mega-side ul a:hover { background: none; color: var(--accent); text-decoration: underline; }
  .nav-list a.mega-photo { display: block; position: relative; margin-top: auto; padding: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10; white-space: normal; background: var(--navy); }
  .mega-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
  .mega-photo span { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 34px 16px 14px; background: linear-gradient(transparent, rgba(0,6,12,.85)); color: #fff; font-weight: 700; font-size: 15.5px; }
  .nav-list a.mega-photo:hover { background: var(--navy); }
  .mega-photo:hover img { transform: scale(1.04); }
  .mega-photo:focus-visible { outline-offset: 3px; }
}
@media (max-width: 1279px) {
  .sub.mega { padding-right: 0; }
  .nav-list .mega-tiles a { display: flex; align-items: center; gap: 12px; }
  .mega-tiles .mega-ic { width: 34px; height: 34px; border-radius: 10px; }
  .mega-tiles .mega-ic svg { width: 18px; height: 18px; }
  .mega-side { margin-top: 6px; padding-left: 10px; }
  .mega-h { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .mega-ic, .mega-photo img { transition: none; } .mega-tiles a:hover .mega-ic, .mega-photo:hover img { transform: none; } }

/* Cartes bleu moyen sur fond noir : le gris et le bleu clair n'y atteignent pas 4,5:1, texte secondaire en gris clair. */
.pillars li p, .sec-navy .garanties li p, .res li span { color: #F1EFF1; }

/* Publications scientifiques (Méthode et preuves, #publications) */
.pub-grid { display: grid; gap: 12px 48px; }
@media (min-width: 900px) { .pub-grid { grid-template-columns: 1.2fr 1fr; } }
.pub-grid h3 { margin: 18px 0 10px; font-size: 18px; }
.pubs { margin: 0; padding-left: 1.3em; }
.pubs li { margin-bottom: 14px; line-height: 1.45; }
.pubs cite { font-style: normal; font-weight: 600; }
.pub-src { display: block; margin-top: 2px; color: var(--muted); font-size: 15px; }

/* Carte en double largeur dans une grille de trois (HoloLens 2 et PC sur la page des appareils) */
@media (min-width: 1081px) { .g3 > .card.wide { grid-column: span 2; } }

.ftr-net a { text-decoration: underline; text-underline-offset: 2px; }

/* Libellés des champs obligatoires en bleu (Emmanuel, 27/10/2026) ; la mention « (obligatoire) » reste écrite. */
.field:has(> [required]) > label, .field:has(> [required]) > label .req, .consent .req { color: var(--accent); }
/* Libellé « Objet » du formulaire de contact en bleu, comme les champs obligatoires (Emmanuel, 27/10/2026). */
.field-accent > label { color: var(--accent); }

/* Menu « Vos enjeux » en familles : titre de famille, lignes compactes alignées à gauche, couleur de la famille. */
.mega-rows { list-style: none; margin: 0; padding: 0; }
.mega-gt { margin: 0 0 6px; padding-left: 6px; font: 700 12.5px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--fg); }
.nav-list .mega-rows a { display: flex; align-items: center; gap: 12px; white-space: normal; }
.mega-rows a:hover .mega-ic, .mega-rows a:focus-visible .mega-ic { background: var(--t-fg); color: var(--t-on); }
@media (min-width: 1280px) {
  .mega-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; align-content: start; }
  .nav-list .mega-rows a { padding: 7px 10px 7px 6px; border-radius: 12px; font-size: 15px; line-height: 1.3; }
  .nav-list .mega-rows a:hover { background: var(--soft); }
  .mega-rows .mega-ic { width: 40px; height: 40px; border-radius: 12px; }
  .mega-rows .mega-ic svg { width: 20px; height: 20px; }
}
@media (max-width: 1279px) {
  .mega-group + .mega-group { margin-top: 10px; }
  .mega-gt { margin-top: 8px; }
  .mega-rows .mega-ic { width: 34px; height: 34px; border-radius: 10px; }
  .mega-rows .mega-ic svg { width: 18px; height: 18px; }
}
/* Le contenu du panneau en familles commence sous le badge du logo, qui déborde de l'en-tête. */
@media (min-width: 1280px) { .nav-list > li > .sub.mega.mega-grouped { padding-top: 60px; } }
@media (min-width: 1280px) { .mega-groups-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Quatre familles (Défense et sécurité, 28/10/2026) : quatre colonnes un peu plus serrées. */
/* Avec « Défense et sécurité », l'en-tête ne tient plus sur une ligne entre 1 280 et 1 339 px : « (2 min) » du défi s'efface. */
@media (min-width: 1280px) and (max-width: 1339px) { .nav-defi small { display: none; } }
@media (min-width: 1280px) { .mega-groups-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 18px; } }
/* Menus en familles (Emmanuel, 28/10/2026) : pastilles en couleur pleine dès le départ ; au survol, fond gris et texte
   à la couleur de la famille ; un peu plus d'air entre les lignes. */
.mega-rows .mega-ic { background: var(--t-fg); color: var(--t-on); }
.nav-list .mega-rows a:hover, .nav-list .mega-rows a:focus-visible { color: var(--t-tx); }
@media (min-width: 1280px) {
  .nav-list .mega-rows a { padding-top: 10px; padding-bottom: 10px; }
  .mega-rows li + li { margin-top: 4px; }
}
/* Colonne de droite des menus (Découvrir, Autres secteurs, Les preuves, Nous joindre) : au survol, fond gris et texte bleu,
   comme les lignes des familles. Le texte reste aligné sur le titre de la colonne. */
@media (min-width: 1280px) {
  .nav-list .mega-side ul a { margin: 0 -10px; padding: 7px 10px; border-radius: 10px; }
  .nav-list .mega-side ul a:hover, .nav-list .mega-side ul a:focus-visible { background: var(--soft); color: var(--accent); text-decoration: none; }
}

/* Accueil : titre tournant (28/10/2026). Tous les titres occupent la même case de grille : la hauteur suit le plus
   long, la page ne saute pas. Les titres d'enjeu, plus longs, sont un peu plus petits (87 %) pour tenir dans la
   hauteur du titre principal. Sans JavaScript ou avec l'animation réduite, seul le H1 existe à l'écran. Le H1 caché
   reste lisible par les lecteurs d'écran (opacité nulle, pas visibility). */
.rotor-alt { display: none; }
.js .rotor-on { display: grid; position: relative; margin: 0 0 clamp(17px, 1.6vw, 23px); }
.js .rotor-on > .rotor-item { grid-area: 1 / 1; align-self: start; margin: 0; }
.js .rotor-on > .rotor-alt { display: block; visibility: hidden; }
.js .rotor-on > .rotor-item.is-on, .js .rotor-on > .rotor-item.is-anim { visibility: visible; }
.js .rotor-on > h1.rotor-item:not(.is-on):not(.is-anim) { opacity: 0; pointer-events: none; }
.js .rotor-on > .is-on { position: relative; z-index: 1; }
.home .rotor-alt { font-size: clamp(27px, 2.8vw, 40px); font-weight: 800; letter-spacing: -.035em; line-height: 1.07; text-wrap: balance; }
.rotor-alt a { color: inherit; text-decoration: none; }
.rotor-alt a:hover { text-decoration: underline; text-decoration-color: var(--s89-blue); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.rotor-n { color: var(--accent); }
.rotor .rw { display: inline-block; white-space: nowrap; }
.rotor .rc { display: inline-block; }
.rotor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.rotor-head .kicker { margin: 0; }
.rotor-pause { flex: none; display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 5px 12px 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--accent); font: 600 13px/1.2 var(--font); cursor: pointer; }
.rotor-pause[hidden] { display: none; }
.rotor-pause:hover { background: var(--soft); }
.rotor-pause:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rotor-pause svg { width: 11px; height: 11px; fill: currentColor; }
.rotor-pause .i-play, .rotor-pause.is-paused .i-pause { display: none; }
.rotor-pause.is-paused .i-play { display: block; }

/* Menus déroulants animés (Emmanuel, 28/10/2026) : à l'ouverture, les éléments apparaissent les uns après les autres
   (fondu et légère montée, 0,56 s, décalés de 44 ms selon --i posé par e.js ; durée doublée le 28/10 au soir) ; au survol, le pictogramme rebondit et ses
   traits se redessinent ; menu ouvert sans bouger, un pictogramme au hasard se redessine toutes les 1,25 s (ic-auto). Rien de
   tout cela si l'utilisateur a demandé moins d'animations. */
@keyframes m-in { from { opacity: 0; transform: translateY(7px); } }
@keyframes ic-pop { 0% { transform: none; } 35% { transform: scale(1.15) rotate(-8deg); } 70% { transform: scale(.97) rotate(3deg); } 100% { transform: none; } }
@keyframes ic-draw { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
@keyframes ic-nudge { 50% { transform: translateX(5px); } }
@media (prefers-reduced-motion: no-preference) {
  .js .sub .m-in { animation: m-in .56s cubic-bezier(.2,.75,.25,1) backwards; animation-delay: calc(var(--i, 0) * 44ms); }
  .mega-ic.ic-auto .ic-d { stroke-dasharray: 1.02; animation: ic-draw 1s ease-out; }
  .mega-rows a:hover .mega-ic svg, .mega-rows a:focus-visible .mega-ic svg, .mega-tiles a:hover .mega-ic svg, .mega-tiles a:focus-visible .mega-ic svg { animation: ic-pop .5s cubic-bezier(.3,.7,.3,1); }
  .mega-rows a:hover .mega-ic .ic-d, .mega-rows a:focus-visible .mega-ic .ic-d, .mega-tiles a:hover .mega-ic .ic-d, .mega-tiles a:focus-visible .mega-ic .ic-d { stroke-dasharray: 1.02; animation: ic-draw 1s ease-out; }
  .nav-list a.mega-photo:hover span svg, .nav-list a.mega-photo:focus-visible span svg { animation: ic-nudge .5s ease-in-out; }
}

/* Boutons « Relever le défi » (Emmanuel, 28/10/2026) : au survol, le contour se trace dans le bleu principal (0,45 s), puis le
   triangle bondit en tournant, s'écrase un peu, se redresse, et lâche une gerbe de points aux couleurs SHIFT89 ; le tracé du contour reste dans le bleu principal (Emmanuel). Rien de
   tout cela si l'utilisateur a demandé moins d'animations. Le tracé et la gerbe sont ajoutés par e.js (defi()). */
.defi-fx { position: relative; }
.defi-ic { position: relative; display: inline-flex; flex: none; }
.defi-ring { position: absolute; pointer-events: none; overflow: visible; }
.defi-ring rect { fill: none; stroke: var(--s89-blue); stroke-width: 3; stroke-dasharray: 1.02; stroke-dashoffset: 1.02; }
.defi-burst { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; opacity: 0; pointer-events: none; }
@keyframes defi-joy {
  0% { transform: none; }
  22% { transform: translateY(-7px) rotate(-120deg) scale(1.35); }
  42% { transform: translateY(0) rotate(-300deg) scale(1.2, .8); }
  58% { transform: translateY(-3px) rotate(-360deg) scale(.95, 1.1); }
  76% { transform: rotate(-360deg) scale(1.08); }
  100% { transform: rotate(-360deg); }
}
@keyframes defi-burst {
  0% { opacity: 1; box-shadow: 0 0 0 -2.5px #025BA3, 0 0 0 -2.5px #F10F0F, 0 0 0 -2.5px #7AB4E5, 0 0 0 -2.5px #0379D9, 0 0 0 -2.5px #025BA3, 0 0 0 -2.5px #F17F80, 0 0 0 -2.5px #7AB4E5, 0 0 0 -2.5px #0379D9; }
  70% { opacity: 1; }
  100% { opacity: 0; box-shadow: 0 -17px 0 -1px #025BA3, 12px -12px 0 -1.5px #F10F0F, 17px 0 0 -1px #7AB4E5, 12px 12px 0 -1.5px #0379D9, 0 17px 0 -1px #025BA3, -12px 12px 0 -1.5px #F17F80, -17px 0 0 -1px #7AB4E5, -12px -12px 0 -1.5px #0379D9; }
}
@media (prefers-reduced-motion: no-preference) {
  /* La bordure s'éclaircit pour que le tracé bleu se voie. */
  .defi-fx.btn-ghost:hover, .nav-list .nav-defi > a.defi-fx:hover, .hdr-demo.defi-fx:hover { border-color: rgba(122,180,229,.55); }
  .defi-fx:hover .defi-ring rect, .defi-fx:focus-visible .defi-ring rect { animation: ic-draw .45s ease-in-out forwards; }
  .defi-fx:hover .defi-ic > svg, .defi-fx:focus-visible .defi-ic > svg { animation: defi-joy .7s cubic-bezier(.3,.7,.3,1) .4s; }
  .defi-fx:hover .defi-burst, .defi-fx:focus-visible .defi-burst { animation: defi-burst .6s ease-out .48s backwards; }
}

/* Boutons « Demander une démo » (Emmanuel, 28/10/2026) : au premier survol, les arguments défilent dans le bouton (les
   messages montent, le bouton s'élargit en douceur si besoin, un reflet le traverse), puis le libellé revient. e.js
   (demoBtn()) n'agit qu'une fois par page et jamais si l'utilisateur a demandé moins d'animations. */
.demo-orig { display: inline-flex; align-items: center; gap: inherit; transition: opacity .25s, transform .25s; }
.btn.demo-on { position: relative; overflow: hidden; transition: width .3s cubic-bezier(.2,.8,.25,1), transform .2s, background .2s, box-shadow .2s, color .2s; }
.demo-on .demo-orig { opacity: 0; transform: translateY(-60%); }
.demo-say { position: absolute; inset: 0; pointer-events: none; }
.demo-line { position: absolute; left: 50%; top: 50%; margin: 0; white-space: nowrap; translate: -50% -50%; }
.btn.demo-on::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-100%); animation: demo-shine 1.1s ease-in-out 2; }
@keyframes demo-shine { to { transform: translateX(100%); } }

/* Étapes qui s'enchaînent (accueil, Emmanuel, 29/10/2026) : chaque bloc monte en fondu, son pictogramme se trace et son
   numéro apparaît ; une barre bleue se remplit au bas du bloc avant que le suivant n'arrive. e.js (stepsSeq()) n'active
   .seq-on que si l'utilisateur n'a pas demandé moins d'animations. */
.steps-seq .step { position: relative; }
/* La transition n'est portée que par .is-in : les blocs se cachent d'un coup au chargement, sans s'estomper sous les yeux. */
.steps-seq.seq-on .step { opacity: 0; transform: translateY(22px); }
.steps-seq.seq-on .step.is-in { opacity: 1; transform: none; transition: opacity .4s ease, transform .47s cubic-bezier(.2,.8,.25,1); }
.steps-seq.seq-on .step::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s ease-in-out; }
.steps-seq.seq-on .step.is-link::after { transform: scaleX(1); }
.steps-seq.seq-on .step.is-in .ic-d { stroke-dasharray: 1.02; animation: ic-draw .67s ease-out .1s backwards; }
.steps-seq.seq-on .step.is-in .step-n { animation: step-n-in .4s cubic-bezier(.3,.7,.3,1.3) .17s backwards; }
@keyframes step-n-in { from { opacity: 0; transform: scale(.5) translateY(8px); } }

/* Pavés qui descendent (accueil, Emmanuel, 29/10/2026) : chaque chiffre descend d'en haut comme un bloc rigide et se pose en
   douceur, en ralentissant jusqu'à l'arrêt : ni rebond, ni déformation (« des arguments solides », « atterrir en douceur
   avec élégance ») ; 180 ms entre deux pavés (numsFall() dans e.js, actif seulement sans demande de moins d'animations). */
.nums-fall.fall-on .num { opacity: 0; transform: translateY(-60px); }
.nums-fall.fall-on .num.is-down { animation: num-fall .8s cubic-bezier(.16,1,.3,1) both; }
@keyframes num-fall {
  0% { opacity: 0; transform: translateY(-60px); }
  45% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); }
}

/* Portes de l'accueil : le pictogramme cliqué grossit jusqu'à ×20 en s'effaçant pendant le changement de page (doorsZoom()). */
.ic-ghost { position: fixed; z-index: 1000; margin: 0; color: var(--accent); pointer-events: none; transform-origin: 50% 50%; }
.doors .ic-zooming { visibility: hidden; }

/* À propos : rôle de chaque cofondateur, sous son nom. */
.card-role { margin: -4px 0 12px; font-weight: 700; color: var(--accent); }

/* Blocs cliquables (.card-link, 64 sur le site), Emmanuel, 29/10/2026 : au survol ou au clavier, un liseré bleu fin et une
   auréole bleue qui palpite doucement autour du bloc, pour qu'on voie qu'il se passe quelque chose et qu'on peut cliquer.
   Sans animation si l'utilisateur en a demandé moins : le liseré et une auréole fixe restent. */
.card-link:hover, .card-link:focus-visible {
  box-shadow: 0 28px 60px -28px rgba(0,6,12,.35), 0 0 0 1.5px rgba(3,121,217,.55), 0 0 22px 2px rgba(3,121,217,.18);
}
@keyframes card-halo {
  0% { box-shadow: 0 28px 60px -28px rgba(0,6,12,.35), 0 0 0 1.5px rgba(3,121,217,.55), 0 0 0 0 rgba(3,121,217,.38); }
  70% { box-shadow: 0 28px 60px -28px rgba(0,6,12,.35), 0 0 0 1.5px rgba(3,121,217,.55), 0 0 0 13px rgba(3,121,217,0); }
  100% { box-shadow: 0 28px 60px -28px rgba(0,6,12,.35), 0 0 0 1.5px rgba(3,121,217,.55), 0 0 0 13px rgba(3,121,217,0); }
}
@media (prefers-reduced-motion: no-preference) {
  .card-link:hover, .card-link:focus-visible { animation: card-halo 1.6s cubic-bezier(.25,.6,.4,1) infinite; }
}

/* Pictogramme de la page devant le surtitre du héros (pageIcon() dans lib.mjs). */
/* Juste l'icône, sans pastille (Emmanuel, 29/10/2026 : « le carré, ça fait too much »), dans la couleur du surtitre. */
.kicker-ic { width: auto; height: auto; border-radius: 0; margin-right: -2px; background: none; color: inherit; }
.kicker-ic svg { width: 20px; height: 20px; }

/* Même auréole sur les autres blocs cliquables du corps de page (Emmanuel, 29/10/2026) : vignettes vidéo et écran de départ
   du défi, désormais cliquables en entier (e.js). Le liseré suit l'arrondi du bloc. */
.vid[data-embed] .vid-cover, .demo-cover { cursor: pointer; }
.vid[data-embed] .vid-frame:not(.is-playing):hover, .vid[data-embed] .vid-frame:not(.is-playing):focus-within,
.demo:has(.demo-cover:not([hidden])):hover, .demo:has(.demo-cover:not([hidden])):focus-within {
  box-shadow: 0 28px 60px -28px rgba(0,6,12,.35), 0 0 0 1.5px rgba(3,121,217,.55), 0 0 22px 2px rgba(3,121,217,.18);
}
@media (prefers-reduced-motion: no-preference) {
  .vid[data-embed] .vid-frame:not(.is-playing):hover, .vid[data-embed] .vid-frame:not(.is-playing):focus-within,
  .demo:has(.demo-cover:not([hidden])):hover, .demo:has(.demo-cover:not([hidden])):focus-within { animation: card-halo 1.6s cubic-bezier(.25,.6,.4,1) infinite; }
}

/* Phrase de conclusion sous une grille de cartes (À propos et ailleurs) : de l'air au-dessus, elle ne colle plus aux blocs
   (Emmanuel, 29/10/2026). */
.g2 + .lead-strong, .g3 + .lead-strong, .g4 + .lead-strong, .card-list + .lead-strong { margin-top: clamp(32px, 4vw, 52px); }

/* Blocs qui se révèlent (reveals() dans e.js, Emmanuel, 29/10/2026). Les transitions ne sont portées que par l'état visible :
   au chargement, les éléments se cachent d'un coup, sans s'estomper sous les yeux. */
.rv-on .ic-d { stroke-dasharray: 1.02; stroke-dashoffset: 1.02; }
.rv-on .rv-drawn .ic-d { animation: ic-draw .55s ease-out forwards; }
/* 1. Tableau comparatif : lignes en fondu (pas de déplacement sur une ligne de tableau), coches tracées ensuite. */
table.vs.rv-on tbody tr { opacity: 0; }
table.vs.rv-on tbody tr.rv-in { opacity: 1; transition: opacity .45s ease; }
/* 2. Engagements */
.garanties.rv-on li { opacity: 0; transform: translateY(14px); }
.garanties.rv-on li.rv-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.25,1); }
.garanties.rv-on li.rv-drawn .ic-d { animation-delay: .15s; }
/* 3. Contraste : la ligne et sa colonne de gauche, puis la réponse SHIFT89 qui glisse depuis la droite. */
.contrast.rv-on li { opacity: 0; transform: translateY(12px); }
.contrast.rv-on li.rv-in { opacity: 1; transform: none; transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.25,1); }
.contrast.rv-on .ct-us { opacity: 0; transform: translateX(18px); }
.contrast.rv-on .ct-us.rv-in { opacity: 1; transform: none; transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.25,1); }
/* 4. Frise : la ligne se trace de haut en bas, les étapes et leurs points s'allument dans l'ordre. */
.timeline.rv-on { position: relative; border-left-color: transparent; }
.timeline.rv-on::after { content: ""; position: absolute; left: -3px; top: 0; bottom: 0; width: 3px; background: var(--accent); transform: scaleY(0); transform-origin: 50% 0; }
.timeline.rv-on.rv-line::after { transform: scaleY(1); transition: transform 1.2s cubic-bezier(.4,0,.2,1); }
.timeline.rv-on .tl-item { opacity: 0; transform: translateX(-10px); }
.timeline.rv-on .tl-item::before { transform: scale(0); }
.timeline.rv-on .tl-item.rv-in { opacity: 1; transform: none; transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.25,1); }
.timeline.rv-on .tl-item.rv-in::before { transform: scale(1); transition: transform .4s cubic-bezier(.3,.7,.3,1.4) .1s; }

/* Vidéos hébergées sur le site, format vertical (videoSite() dans lib.mjs, 29/10/2026). */
.vid-v { max-width: 380px; margin: 0 auto; width: 100%; }
.vid-v .vid-frame { aspect-ratio: 9 / 16; background: #00060C; }
.vid-v video { display: block; width: 100%; height: 100%; object-fit: cover; }
.vid-sub { display: block; margin-top: 2px; font-size: 13px; }
a.vid-play { text-decoration: none; }

/* Pied de page (Emmanuel, 29/10/2026) : parcours et adhésions centrés ; mentions sur une seule ligne. */
.ftr-net { text-align: center; }
/* margin auto : la remise à zéro des listes (ul.ftr-legal { margin: 0 }) décentrait la ligne ; espace au-dessus (Emmanuel). */
ul.ftr-legal { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 22px; margin: 0 auto; padding: 30px var(--gutter) 30px; }
ul.ftr-legal > li { display: inline; width: auto; }

/* Titre tournant : flèches précédent / suivant (Emmanuel, 29/10/2026), sur la ligne de base du titre, à droite. Sur grand écran,
   une marge à droite leur est réservée pour qu'elles ne chevauchent jamais le texte ; sur téléphone, elles passent dessous. */
.rotor-nav[hidden] { display: none; }
.rotor-nav { display: flex; gap: 8px; }
.rotor-nav button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1.5px solid var(--accent); border-radius: 50%; background: #fff; color: var(--accent); cursor: pointer; transition: background .2s, color .2s; }
.rotor-nav button:hover { background: var(--accent); color: #fff; }
.rotor-nav .ic { width: 18px; height: 18px; }
.rotor-prev .ic { transform: rotate(180deg); }
.js .rotor-on > .rotor-nav { grid-area: auto; justify-self: start; margin-top: 12px; }
@media (min-width: 900px) {
  .js .rotor-on { padding-right: 104px; }
  .js .rotor-on > .rotor-nav { position: absolute; right: 0; bottom: .3em; margin: 0; }
}

/* Pied de page : la même accroche qu'en haut de l'accueil (étiquettes « L’IA », « La réalité augmentée »), sur fond sombre
   (Emmanuel, 29/10/2026). */
.ftr-pitch { margin: 14px 0 48px; gap: 10px; } /* une ligne d’air avant « Conçu et développé en France. » */
.ftr-pitch li { font-size: 15.5px; line-height: 1.45; font-weight: 600; color: #F1EFF1; }
/* Étiquettes du pied de page : juste un tour bleu et le texte en bleu, sans fond blanc (Emmanuel ; #0379D9 sur #00060C : 4,6:1). */
.ftr-pitch .pitch-tag { background: transparent; border-color: #fff; color: #fff; } /* essai en blanc (Emmanuel, 29/10/2026) ; avant : bleu #0379D9 */

/* Accueil, à l'affichage (Emmanuel, 29/10/2026) : le titre principal entre par un balayage de gauche à droite avec une légère
   montée, puis les pastilles 1, 2 et 3 apparaissent l'une après l'autre, plus discrètement (petit rebond et halo bleu). */
@keyframes home-title-in { from { opacity: 0; transform: translateY(14px); clip-path: inset(0 100% 0 0); } 45% { opacity: 1; } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
@keyframes home-arg-in { 0% { opacity: 0; transform: scale(.4); box-shadow: 0 0 0 0 rgba(3,121,217,.4); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: none; box-shadow: 0 0 0 12px rgba(3,121,217,0); } }
@media (prefers-reduced-motion: no-preference) {
  .home .phero .rotor h1 { animation: home-title-in .9s cubic-bezier(.2,.7,.2,1) .15s backwards; }
  .home .phero .args .arg-n { animation: home-arg-in .6s cubic-bezier(.3,.7,.3,1) backwards; }
  .home .phero .args li:nth-child(1) .arg-n { animation-delay: 1.05s; }
  .home .phero .args li:nth-child(2) .arg-n { animation-delay: 1.25s; }
  .home .phero .args li:nth-child(3) .arg-n { animation-delay: 1.45s; }
}