/* Rekotla : feuille de style du site statique (rekotla.fr, /pionniers, /aide).
   Dépend de tokens.css. Mobile d'abord. Pas de framework. */

/* Polices : Poppins 400 et 600 auto-hébergées. Déposer les woff2 dans /assets/fonts/. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400.woff2?v=202608181532') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500.woff2?v=202608181532') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600.woff2?v=202608181532') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700.woff2?v=202608181532') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/poppins-900.woff2?v=202608181532') format('woff2'); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-ui); font-size: 17px; line-height: 1.6; color: var(--ink-900); background: var(--surface); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--range-1); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a, button, summary, input, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: rgba(0,167,75,.18); }
/* Focus clavier : anneau vert foncé (6.2:1 sur blanc), jamais supprimé sans remplacement */
:focus-visible { outline: 3px solid var(--range-1); outline-offset: 3px; }
.btn:focus-visible, .store:focus-visible, .nav-toggle:focus-visible { outline-offset: 3px; }
.final :focus-visible { outline-color: #fff; }
/* Ancres sous l'en-tête collant (64 px) : les cibles ne sont jamais masquées */
[id] { scroll-margin-top: 88px; }
h1, h2, h3 { margin: 0 0 var(--s-4); font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
/* Respiration entre les blocs : un titre qui suit du contenu prend de l'air au-dessus */
* + h2 { margin-top: var(--s-7); }
* + h3 { margin-top: var(--s-5); }
.kicker + h2, .kicker + h3, .kicker + h1 { margin-top: 0; }
h1 { margin-bottom: var(--s-5); }
h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.hero h1 { font-size: clamp(2.125rem, 6vw, 3.25rem); font-weight: 900; line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: 1.75rem; line-height: 1.2; }
h3 { font-size: 1.125rem; line-height: 1.3; }
p { margin: 0 0 var(--s-4); }
.lead { font-size: 1.125rem; color: var(--ink-900); }
.muted { color: var(--ink-600); }
.small { font-size: 0.9375rem; }
.wrap { width: min(100% - 2 * var(--s-5), 1080px); margin-inline: auto; }
.section { padding-block: clamp(var(--s-7), 7vw, 80px); }
.section.soft { background: var(--surface-soft); }
.section.tint { background: var(--range-100); }
.kicker { display: inline-block; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-primary); font-weight: 700; margin-bottom: var(--s-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Boutons (hauteur DS : 56 px, pill) */
/* Boutons : base .btn et modifieurs du DS 7 (Éléments UI, communication & marketing). Cible tactile garantie à 44 px. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 22px; border-radius: var(--rpill); font-family: var(--font-ui); font-size: 0.875rem; font-weight: 600; line-height: 1.2; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: opacity .2s, transform .15s; }
.btn:hover { opacity: .88; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-ink { background: var(--ink-900); color: #fff; }
.btn-deep { background: var(--range-1); color: #fff; }
.btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn-ghost { background: transparent; color: var(--ink-900); border-color: var(--border); }
.btn-sm { padding: 7px 16px; font-size: 0.8rem; min-height: 40px; }
.btn-lg { padding: 15px 34px; font-size: 1rem; }
.btn-block { width: 100%; }
/* Badges et tags du DS 7 */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: var(--rpill); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.badge-tint { background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--range-1); border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent); }
.badge-neutral { background: var(--surface-2); color: var(--ink-600); border: 1px solid var(--border); }
.badge-solid { background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary); }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: var(--r); font-size: 0.75rem; font-weight: 500; }
.tag-tint { background: color-mix(in srgb, var(--color-primary) 8%, transparent); color: var(--range-1); border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent); }
.tag-neutral { background: var(--surface-2); color: var(--ink-900); border: 1px solid var(--border); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.link-arrow::after { content: " \2192"; }

/* En-tête */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: var(--s-4); }
.brand { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-ui); font-weight: 700; font-size: 1.125rem; color: var(--ink-900); text-decoration: none; letter-spacing: -0.01em; }
.brand img { width: 32px; height: 32px; flex: 0 0 auto; }
.brand .wordmark { color: var(--ink-900); }
.site-nav { display: none; align-items: center; gap: var(--s-5); }
.site-nav a:not(.btn) { color: var(--ink-900); text-decoration: none; font-weight: 600; font-size: 0.9375rem; display: inline-flex; align-items: center; min-height: 44px; }
.site-nav a:not(.btn):hover { color: var(--range-1); text-decoration: underline; text-underline-offset: 4px; }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-btn); height: var(--icon-btn); border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; font: inherit; color: var(--ink-900); cursor: pointer; }
.nav-toggle:hover { border-color: var(--range-500); color: var(--range-1); }
.site-nav.open { display: flex; position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; align-items: stretch; background: #fff; border-bottom: 1px solid var(--border); padding: var(--s-4) var(--s-5) var(--s-5); gap: var(--s-4); }
.site-nav.open a { font-size: 1.0625rem; padding: var(--s-2) 0; min-height: 48px; }
.site-nav.open a.btn { justify-content: center; }
@media (min-width: 900px) { .site-nav { display: flex; } .nav-toggle { display: none; } }

/* Hero */
.hero { padding-block: var(--s-7) var(--s-8); }
.hero .grid { display: grid; gap: var(--s-6); align-items: center; }
.hero h1 { margin-bottom: var(--s-3); }
.hero .base { font-size: 1.25rem; font-weight: 600; color: var(--range-1); margin-bottom: var(--s-4); }
.hero .lead { margin-bottom: var(--s-5); }
.hero .note { margin-top: var(--s-3); font-size: 0.9375rem; color: var(--ink-600); }
.hero figure { margin: 0; }
.hero figure > img { border-radius: var(--radius-xl); aspect-ratio: 4/5; object-fit: cover; width: 100%; background: var(--range-100); }
.hero-visual { position: relative; aspect-ratio: 4/5; max-height: 640px; border-radius: var(--radius-xl); background: linear-gradient(160deg, var(--range-500) 0%, var(--range-1) 100%); display: grid; place-items: center; overflow: hidden; }
.hero-visual .hero-mark { position: absolute; width: 62%; height: auto; right: -14%; bottom: -10%; opacity: .12; }
.hero-visual .phone-frame { width: min(250px, 58%); box-shadow: 0 30px 60px rgba(0,0,0,.28); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 900px) { .hero .grid { grid-template-columns: 1.1fr 0.9fr; } }
.stores { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); align-items: flex-start; }
.store { display: inline-grid; justify-items: center; gap: 4px; text-decoration: none; border-radius: 6px; transition: opacity .2s, transform .15s; }
.store img { display: block; height: 40px; width: auto; }
.store:hover { opacity: .88; transform: translateY(-1px); }
a.store.is-soon { cursor: default; }
.store.is-soon img { opacity: .45; }
.store.is-soon:hover { opacity: 1; transform: none; }
.store small { font-weight: 600; color: var(--ink-600); font-size: 0.75rem; }

/* Moments (section 2) */
.moments { display: grid; gap: var(--s-4); counter-reset: moment; }
.moment { display: grid; grid-template-columns: 36px 1fr; gap: var(--s-4); padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.moment::before { counter-increment: moment; content: counter(moment, decimal-leading-zero); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: var(--color-primary); font-weight: 700; font-size: 0.875rem; }
.moment h3 { margin-bottom: var(--s-1); font-size: 1rem; }
.moment p { margin: 0; color: var(--ink-600); }
@media (min-width: 900px) { .moments { grid-template-columns: repeat(5, 1fr); } .moment { grid-template-columns: 1fr; } }

/* Piliers */
.pillar { display: grid; gap: var(--s-7); align-items: center; }
.pillar figure { margin: 0; }
.pillar img { border-radius: var(--radius-xl); background: var(--range-100); aspect-ratio: 1/2; object-fit: cover; object-position: top; max-height: 520px; margin-inline: auto; }
@media (min-width: 900px) { .pillar { grid-template-columns: 1fr 1fr; } .pillar.flip > figure { order: -1; } }
.callout { background: color-mix(in srgb, var(--color-primary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent); padding: var(--s-4) var(--s-5); border-radius: var(--r); margin: var(--s-5) 0; }
.callout p:last-child { margin: 0; }
details { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0 var(--s-4); background: #fff; }
details + details { margin-top: var(--s-3); }
summary { cursor: pointer; padding: var(--s-4) 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-height: 44px; }
summary:hover { color: var(--range-1); }
summary:focus-visible { outline-offset: -3px; }
summary::marker { content: ""; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--range-1); font-size: 1.5rem; line-height: 1; }
details[open] summary::after { content: "\2212"; }
details p { color: var(--ink-600); padding-bottom: var(--s-4); margin: 0; }

/* Bande métier */
.metier { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
.metier div { padding: var(--s-4); background: #fff; border-radius: var(--radius-md); border: 1px solid var(--border); }
.metier b { display: block; font-size: 1rem; font-weight: 700; color: var(--ink-900); margin-bottom: var(--s-1); }
.metier p { margin: 0; font-size: 0.9375rem; color: var(--ink-600); }
@media (min-width: 700px) { .metier { grid-template-columns: repeat(3, 1fr); } }
[hidden] { display: none !important; }

/* Tarif */
.price-card { max-width: 560px; margin-inline: auto; padding: var(--s-6); border: 2px solid var(--color-primary); border-radius: var(--rlg); background: var(--surface); text-align: center; }
.price-card .price { font-size: clamp(2.5rem, 8vw, 3.5rem); font-weight: 900; color: var(--color-primary); line-height: 1; margin: var(--s-3) 0; font-variant-numeric: tabular-nums; }
.price-card .price small { font-size: 1.125rem; color: var(--ink-600); font-weight: 400; }
.price-card .fees { text-align: left; font-size: 0.9375rem; color: var(--ink-600); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--border); }

/* Triptyque */
.tri { display: grid; gap: var(--s-4); }
.tri div { padding: var(--s-5); border-radius: var(--rlg); background: var(--surface); border: 1px solid var(--border); }
.tri h3 { color: var(--ink-900); font-size: 1.05rem; }
.tri ul { margin: 0; padding-left: 1.1em; color: var(--ink-600); }
.tri li { margin-bottom: var(--s-2); }
@media (min-width: 900px) { .tri { grid-template-columns: repeat(3, 1fr); } }

/* Pionniers */
.portraits { display: grid; gap: var(--s-4); }
.portrait { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: #fff; }
.portrait img { aspect-ratio: 1; object-fit: cover; width: 100%; background: var(--range-100); }
.portrait figcaption { padding: var(--s-4); }
.portrait b { display: block; }
.portrait q { display: block; margin-top: var(--s-2); color: var(--ink-600); font-style: italic; }
@media (min-width: 700px) { .portraits { grid-template-columns: repeat(3, 1fr); } }

/* Formulaires */
.form { display: grid; gap: var(--s-3); max-width: 480px; }
.form label { font-weight: 600; font-size: 0.9375rem; }
.form input { font: inherit; font-size: max(1rem, 1em); min-height: var(--control-h); padding: 0 var(--s-4); border: 1px solid var(--border); border-radius: var(--radius-md); width: 100%; background: #fff; color: var(--ink-900); }
.form input::placeholder { color: var(--ink-600); opacity: 1; }
.form input:hover { border-color: var(--ink-400); }
.form input:focus-visible { outline: 3px solid var(--range-1); outline-offset: 2px; border-color: var(--range-500); }
.form button[type="submit"][disabled] { opacity: .7; cursor: progress; }
.hp { position: absolute; left: -9999px; }

/* Bloc final */
.final { background: var(--gradient); color: #fff; }
.final h2, .final p { color: #fff; }
.final .btn-primary { background: #fff; color: var(--range-1); }
.final .btn-outline { color: #fff; border-color: #fff; }
.final .form input { border-color: transparent; }
.final .signature { font-size: 1.25rem; font-weight: 600; margin-top: var(--s-6); }
.final .grid { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .final .grid { grid-template-columns: 1fr 1fr; } }
.final img { border-radius: var(--radius-xl); aspect-ratio: 4/3; object-fit: cover; }

/* Scène « Encaissez partout » : téléphone Tap to Pay + carte qui vient se poser au dos (CSS seul) */
.tap-scene { position: relative; width: min(340px, 100%); margin-inline: auto; padding: var(--s-5) 0 var(--s-6); }
.tap-scene .phone-frame { width: min(240px, 72%); margin-inline: 0 auto; z-index: 1; }
.tap-scene .phone-screen img { position: static; opacity: 1; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.tap-card { position: absolute; right: 0; bottom: 14%; width: 44%; aspect-ratio: 1.586; border-radius: 10px; background: linear-gradient(135deg, #2b2e33 0%, #1f2124 55%, #3a3d42 100%); box-shadow: 0 18px 40px rgba(31,33,36,.35), inset 0 0 0 1px rgba(255,255,255,.08); transform: rotate(-14deg) translate(0, 0); animation: tap 4.6s ease-in-out infinite; color: #fff; overflow: hidden; z-index: 2; }
.tap-card i { position: absolute; left: 10%; top: 30%; width: 18%; aspect-ratio: 1.3; border-radius: 3px; background: linear-gradient(135deg, #e6c26a, #b98d2f); }
.tap-card b { position: absolute; left: 10%; bottom: 14%; font-size: clamp(9px, 2.6vw, 12px); letter-spacing: .12em; font-weight: 500; opacity: .9; font-variant-numeric: tabular-nums; }
.tap-card svg { position: absolute; right: 9%; top: 12%; width: 16%; height: auto; opacity: .85; }
.tap-card em { position: absolute; right: 9%; bottom: 14%; font-style: normal; font-size: clamp(8px, 2.2vw, 11px); font-weight: 600; letter-spacing: .06em; opacity: .75; }
@keyframes tap { 0%, 16% { transform: rotate(-14deg) translate(0, 0); } 44%, 64% { transform: rotate(-6deg) translate(-58%, -235%); } 88%, 100% { transform: rotate(-14deg) translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { .tap-card { animation: none; transform: rotate(-6deg) translate(-58%, -235%); } }

/* Bande de logos (facturation électronique, collectivités) */
.logos-bar { padding-block: var(--s-5); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
.logos-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-5) var(--s-7); }
.logos-bar img { height: 44px; width: auto; max-width: 100%; }
.logos-bar img:first-child { height: 52px; }
@media (max-width: 600px) { .logos-bar img { height: 36px; } .logos-bar img:first-child { height: 44px; } .logos-bar .wrap { gap: var(--s-4) var(--s-5); } }

/* Pied de page */
.site-footer { padding-block: var(--s-7) var(--s-6); border-top: 1px solid var(--border); font-size: 0.9375rem; color: var(--ink-600); }
.site-footer .cols { display: grid; gap: var(--s-5); margin-bottom: var(--s-5); }
.site-footer h3 { font-size: 0.9375rem; color: var(--ink-900); margin-bottom: var(--s-2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--s-1); }
.site-footer a { color: inherit; display: inline-block; padding-block: var(--s-1); }
.site-footer a:hover { color: var(--range-1); }
@media (min-width: 700px) { .site-footer .cols { grid-template-columns: repeat(3, 1fr); } }

/* Aide */
.aide { padding-block: var(--s-6) var(--s-9); width: min(100% - 2 * var(--s-5), 760px); margin-inline: auto; }
.aide > p { margin-bottom: var(--s-5); }
.aide h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); }
.aide strong, .section strong { font-weight: 600; }
.aide .callout h2 { margin-top: 0; }
.crumbs { font-size: 0.9375rem; color: var(--ink-600); }
.steps { padding-left: 0; list-style: none; counter-reset: step; }
.steps { margin: var(--s-5) 0; }
.steps > li { position: relative; padding-left: 52px; margin-bottom: var(--s-5); }
.steps > li:last-child { margin-bottom: 0; }
.steps > li::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 9px; background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: var(--color-primary); font-weight: 700; font-size: 0.875rem; display: grid; place-items: center; }
.steps strong { display: block; margin-bottom: var(--s-1); }
.shot { margin: var(--s-4) 0 0; }
.shot img { border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--range-100); width: min(100%, 300px); }
.shot figcaption { font-size: 0.875rem; color: var(--ink-600); margin-top: var(--s-2); }
.aide .callout h2 { font-size: 1.125rem; margin-bottom: var(--s-2); }
.help-cta { margin-top: var(--s-7); padding: var(--s-5); background: var(--surface-soft); border-radius: var(--radius-md); }
.aide-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.aide-list li { padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--radius-md); position: relative; }
.aide-list li:hover, .toc li:hover { border-color: var(--range-500); background: var(--surface-soft); }
.aide-list li:focus-within, .toc li:focus-within { outline: 3px solid var(--range-1); outline-offset: 2px; }
.aide-list a { font-weight: 600; text-decoration: none; }
/* Toute la carte est cliquable : le lien couvre son conteneur */
.aide-list a::after, .toc a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.aide-list a:hover, .toc a:hover { text-decoration: underline; }
.aide-list p { margin: var(--s-1) 0 0; color: var(--ink-600); font-size: 0.9375rem; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } .btn:active { transform: none; } }

/* Recherche et menu de l'aide */
.aide-search { position: relative; margin: var(--s-4) 0 var(--s-5); }
.aide-search input[type="search"] { font: inherit; font-size: max(1rem, 1em); min-height: var(--control-h); width: 100%; padding: 0 var(--s-4) 0 48px; border: 1px solid var(--border); border-radius: var(--rpill); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363666c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px center / 22px 22px; color: var(--ink-900); -webkit-appearance: none; appearance: none; }
.aide-search input[type="search"]::placeholder { color: var(--ink-400); opacity: 1; }
.aide-search input[type="search"]:focus-visible { outline: 3px solid var(--range-1); outline-offset: 2px; border-color: var(--range-500); }
.aide-search-sm input[type="search"] { min-height: 44px; font-size: 0.9375rem; }
.aide-search-sm .aide-results { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-md); padding: var(--s-3); max-height: 60vh; overflow: auto; }
.aide-results-count { font-size: 0.875rem; color: var(--ink-600); margin: var(--s-2) 0 0 var(--s-4); }
.aide-hits li span, .toc li span { display: block; color: var(--ink-600); font-size: 0.9375rem; margin-top: var(--s-1); }
.aide-hits mark, .toc mark { background: color-mix(in srgb, var(--color-primary) 18%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
.aide-none { color: var(--ink-600); padding: var(--s-3) var(--s-4); background: var(--surface-0); border-radius: var(--r); }
.aide-menu { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.aide-menu a { display: inline-flex; align-items: center; min-height: 40px; padding: 7px 16px; border-radius: var(--rpill); border: 1.5px solid var(--border); color: var(--ink-900); text-decoration: none; font-weight: 600; font-size: 0.875rem; }
.aide-menu a:hover { border-color: var(--color-primary); color: var(--range-1); }
.aide-cat { margin-bottom: var(--s-7); }
.aide-cat h2 { margin-top: 0; }
.aide-cat h2 { font-size: 1.125rem; margin-bottom: var(--s-3); scroll-margin-top: 88px; }

/* Sommaire de l'aide (liste .toc produite par les pages d'aide) */
.toc { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); counter-reset: toc; }
.toc li { padding: var(--s-4) var(--s-4) var(--s-4) 56px; border: 1px solid var(--border); border-radius: var(--radius-md); position: relative; }
.toc li::before { counter-increment: toc; content: counter(toc); position: absolute; left: var(--s-4); top: var(--s-4); width: 28px; height: 28px; border-radius: 50%; background: var(--range-100); color: var(--range-1); font-weight: 600; font-size: 0.875rem; display: grid; place-items: center; }
.toc a { font-weight: 600; text-decoration: none; display: block; position: static; }
.toc a:focus-visible, .aide-list a:focus-visible { outline: none; }
.toc span { display: block; color: var(--ink-600); font-size: 0.9375rem; margin-top: var(--s-1); }
/* En-tête simplifié des pages d'aide (brand + nav sans .wrap) : même gabarit que l'en-tête principal */
.site-header:has(> nav:not(.site-nav)) { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; min-height: 64px; padding: var(--s-2) var(--s-5); }
.site-header nav:not(.site-nav) { display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.site-header nav:not(.site-nav) a:not(.btn) { color: var(--ink-900); text-decoration: none; font-weight: 600; font-size: 0.9375rem; display: inline-flex; align-items: center; min-height: 44px; }
.site-header nav:not(.site-nav) a:not(.btn):hover { color: var(--range-1); text-decoration: underline; text-underline-offset: 4px; }
.crumbs a, .help-cta a { display: inline-block; padding-block: var(--s-1); }

/* Garde-fou : les enfants de grille ne débordent jamais du viewport (images à largeur intrinsèque) */
.hero .grid > *, .pillar > *, .final .grid > *, .moments > *, .tri > *, .metier > *, .portraits > *, #candidature .wrap > * { min-width: 0; }
figure img { width: 100%; }
.pillar img { width: auto; max-width: 100%; }

/* Démo animée (section 2) : moments en onglets + téléphone qui joue le geste */
.demo { display: grid; gap: var(--s-6); align-items: start; }
.demo .moments { grid-template-columns: 1fr; counter-reset: none; }
.demo .moment { text-align: left; font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r); padding: var(--s-4) var(--s-5); display: block; transition: border-color .15s, box-shadow .15s; }
.demo .moment::before { display: none; }
.demo .moment b { display: block; font-size: 1.0625rem; margin-bottom: var(--s-1); color: var(--ink-900); }
.demo .moment span { display: block; color: var(--ink-600); font-size: 0.9375rem; }
.demo .moment:hover { border-color: var(--range-500); }
.demo .moment.is-active { border-color: var(--range-500); box-shadow: 0 0 0 3px var(--range-100); }
.demo .moment.is-active b { color: var(--color-primary); }
.phone { margin: 0; display: grid; justify-items: center; gap: var(--s-3); position: sticky; top: 88px; }
.phone-frame { width: min(280px, 80vw); aspect-ratio: 390/808; border-radius: 40px; background: #1f2124; padding: 30px 12px 22px; box-shadow: 0 20px 50px rgba(31,33,36,.18); position: relative; }
.phone-frame::before { content: ""; position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 9px; height: 9px; border-radius: 50%; background: #3a3d42; box-shadow: inset 0 0 0 2px #0f1012; z-index: 2; }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: #fff; }
.phone-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.phone-screen img.is-on { opacity: 1; }
.phone figcaption { font-weight: 600; color: var(--range-1); text-align: center; min-height: 2.6em; max-width: 320px; }
.phone-dots { display: flex; gap: 6px; }
.phone-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border); display: block; }
.phone-dots i.is-on { background: var(--range-500); }
@media (min-width: 900px) { .demo { grid-template-columns: 1.1fr 0.9fr; } .demo .moments { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .phone-screen img { transition: none; } }