/* Thèmes de l'appli sur le site : mêmes couleurs que app/src/theme.ts (or, argent, émeraude, clair, rose, saphir, améthyste).
   Chargé après le style de la page : ne fait que remplacer des couleurs et ajouter des effets.
   Tout ce qui bouge s'arrête si l'appareil demande moins de mouvement. */

:root {
  --acc: 230,196,138; --ink: 255,255,255; --bg-rgb: 11,11,13;
  --warn: #F2C14E; --phone: #1C1C20; --discord: #AEB6FF;
}
html[data-theme="silver"]   { --gold: #C9D0DB; --gold-l: #E3E8EF; --gold-d: #AEB6C3; --on-gold: #11141A; --acc: 201,208,219; }
html[data-theme="emerald"]  { --gold: #5FD3A6; --gold-l: #9BE6C8; --gold-d: #43B88B; --on-gold: #06150F; --acc: 95,211,166; }
html[data-theme="rose"]     { --gold: #F2A7B8; --gold-l: #F8CBD6; --gold-d: #DE8BA0; --on-gold: #1C0A10; --acc: 242,167,184; }
html[data-theme="sapphire"] { --gold: #7FA8FF; --gold-l: #B3CBFF; --gold-d: #5F8CEB; --on-gold: #070E1F; --acc: 127,168,255; }
html[data-theme="amethyst"] { --gold: #B79CFF; --gold-l: #D6C7FF; --gold-d: #9C7EEB; --on-gold: #110A20; --acc: 183,156,255; }
html[data-theme="sand"] { --gold: #D8CBB2; --gold-l: #E8DFCD; --gold-d: #C2B397; --on-gold: #17130B; --acc: 216,203,178; }
html[data-theme="lagoon"] { --gold: #67D6E8; --gold-l: #A6E8F3; --gold-d: #48BDD1; --on-gold: #04161A; --acc: 103,214,232; }
html[data-theme="lime"] { --gold: #C5E26B; --gold-l: #DDEEA5; --gold-d: #ABCB4E; --on-gold: #121805; --acc: 197,226,107; }
html[data-theme="glacier"] { --gold: #BFE3F5; --gold-l: #DBF0FA; --gold-d: #9FCCE2; --on-gold: #08151C; --acc: 191,227,245; }
html[data-theme="orchid"] { --gold: #E79CF0; --gold-l: #F2C6F7; --gold-d: #D07FDB; --on-gold: #1B0A1E; --acc: 231,156,240; }
html[data-theme="indigo"] { --gold: #9499FF; --gold-l: #C2C5FF; --gold-d: #777CEB; --on-gold: #0A0B22; --acc: 148,153,255; }
html[data-theme="turquoise"] { --gold: #4FD1C5; --gold-l: #94E5DD; --gold-d: #37B7AB; --on-gold: #041512; --acc: 79,209,197; }
html[data-theme="peony"] { --gold: #FF8FC7; --gold-l: #FFBBDD; --gold-d: #EB74B0; --on-gold: #200A16; --acc: 255,143,199; }
html[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F5F1; --bg2: #ECEAE4; --panel: #FFFFFF; --panel2: #F0EEE9;
  --line: rgba(0,0,0,0.08); --line2: rgba(0,0,0,0.14);
  --fg: #141417; --text: #45454D; --muted: #62626B;
  --gold: #B8862F; --gold-l: #C99843; --gold-d: #9E7224; --on-gold: #FFFFFF; --acc: 184,134,47;
  --ok: #14915C; --risk: #D2412F; --risk-bg: rgba(210,65,47,0.09); --warn: #A86A00;
  --ink: 0,0,0; --bg-rgb: 246,245,241; --phone: #2A2A2F; --discord: #4752C4;
}

/* Couleurs fixes de la page, ramenées aux variables du thème */
header { background: rgba(var(--bg-rgb),0.8); }
header.scrolled { background: rgba(var(--bg-rgb),0.92); box-shadow: 0 10px 30px -20px rgba(0,0,0,0.35); }
.hero::before, .final { --glow: rgba(var(--ink),0.05); }
.hero::before { background: radial-gradient(70% 50% at 50% 0%, var(--glow), transparent 70%); }
.final { background: radial-gradient(60% 70% at 50% 0%, rgba(var(--acc),0.10), transparent 70%), var(--panel); }
.phone { background: var(--phone); }
.screen { background: var(--bg); color: var(--fg); }
.s-muted, .s-x, .s-seg span, .s-lab, .s-amount small, .s-sub, .s-find span, .s-name em { color: var(--muted); }
.s-chip { background: var(--panel2); border-color: var(--line); }
.s-actions { color: var(--text); }
.s-actions i { background: rgba(var(--ink),0.07); border-color: rgba(var(--ink),0.08); }
.s-card { background: var(--panel); border-color: var(--line); }
.s-asset { border-top-color: rgba(var(--ink),0.06); }
.s-seg { background: rgba(var(--ink),0.045); border-color: rgba(var(--ink),0.08); }
.s-seg span.on { background: rgba(var(--ink),0.09); color: var(--fg); }
.s-amount, .s-addr, .s-list, .s-no { border-color: rgba(var(--ink),0.085); background: rgba(var(--ink),0.045); }
.s-find + .s-find, .s-list div + div { border-top-color: rgba(var(--ink),0.07); }
.s-x { border-color: rgba(var(--ink),0.1); }
.s-slide::before { background: var(--bg); }
.s-sheet { background: var(--panel); border-color: rgba(var(--ink),0.1); }
.s-grab { background: rgba(var(--ink),0.14); }
.float-alert { background: var(--panel); }
.tag { color: var(--gold); background: rgba(var(--acc),0.12); }
.news .card .ico { background: rgba(var(--acc),0.08); border-color: rgba(var(--acc),0.22); }
.news .card:hover { border-color: rgba(var(--acc),0.4); }
.discord-box { background: radial-gradient(120% 140% at 0% 0%, rgba(88,101,242,0.18), transparent 55%), radial-gradient(90% 120% at 100% 100%, rgba(var(--acc),0.10), transparent 60%), var(--panel); }
.discord-grid > div { background: rgba(var(--bg-rgb),0.55); }
.discord-grid .ico svg { stroke: var(--discord); }
.plan.hot { border-color: rgba(var(--acc),0.55); background: linear-gradient(180deg, rgba(var(--acc),0.08), transparent 45%), var(--panel); box-shadow: 0 30px 80px -40px rgba(var(--acc),0.35); }
.periods div { background: rgba(var(--bg-rgb),0.5); }
.btn.gold:hover { box-shadow: 0 10px 30px -12px rgba(var(--acc),0.45); }
.compare .me { background: rgba(var(--acc),0.06); }
.compare .y { color: var(--ok); }
.compare .r { color: var(--warn); }
.trust li::before { color: var(--ok); }
.cant h3::before { background: rgba(var(--ink),0.06); }
.result.info { background: rgba(var(--ink),0.04); }
.checker input::placeholder { color: var(--muted); }
html[data-theme="light"] .result.risk, html[data-theme="light"] .result.ok { color: var(--fg); }
html[data-theme="light"] .faq summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141417' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
html[data-theme="light"] .mobile-dl { box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.mv-progress { background: linear-gradient(90deg, var(--gold), var(--gold-l)); }
.mv-glow:hover { background-image: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--acc),.10), transparent 70%); border-color: rgba(var(--acc),.28); }
html[data-theme="light"] .mv-glow:hover { box-shadow: 0 14px 34px rgba(0,0,0,.08); }
::selection { background: rgba(var(--acc),0.35); }

/* Menu des langues (son style est injecté plus tard : préfixe « html » pour passer devant) */
html .lm-btn { background: rgba(var(--ink),0.04); border-color: rgba(var(--ink),0.12); color: var(--fg); }
html .lm-btn:hover, html .lm.open .lm-btn { border-color: rgba(var(--acc),0.45); background: rgba(var(--acc),0.06); }
html .lm-btn:focus-visible { outline-color: rgba(var(--acc),0.65); }
html .lm-code { color: var(--gold); background: rgba(var(--acc),0.12); }
html .lm-chev { color: var(--muted); }
html .lm-list { background: var(--panel); border-color: var(--line2); }
html .lm-opt { color: var(--text); }
html .lm-opt[aria-selected="true"], html .lm-opt.active, html .lm-opt:hover { color: var(--fg); }
html .lm-opt.active, html .lm-opt:hover { background: rgba(var(--ink),0.06); }
html .lm-opt .lm-check { color: var(--gold); }

/* Lueurs d'ambiance du haut de page : les mêmes que l'appli (accent, bleu, vert d'eau) */
.aurora { position: absolute; inset: -68px 0 auto; height: 900px; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent); mask-image: linear-gradient(180deg, #000 45%, transparent); }
.aurora i { position: absolute; border-radius: 50%; will-change: transform; }
.aurora .a1 { width: 760px; height: 760px; top: -380px; left: calc(50% - 760px); background: radial-gradient(closest-side, rgba(var(--acc),0.22), rgba(var(--acc),0.08) 55%, transparent); }
.aurora .a2 { width: 660px; height: 660px; top: -320px; left: calc(50% + 60px); background: radial-gradient(closest-side, rgba(59,79,216,0.18), rgba(59,79,216,0.06) 55%, transparent); }
.aurora .a3 { width: 560px; height: 560px; top: 40px; left: calc(50% - 280px); background: radial-gradient(closest-side, rgba(20,163,148,0.10), rgba(20,163,148,0.035) 55%, transparent); }
html[data-theme="light"] .aurora .a1 { background: radial-gradient(closest-side, rgba(var(--acc),0.30), rgba(var(--acc),0.10) 55%, transparent); }
@keyframes mv-drift-a { from { transform: translate(-40px,-24px) scale(.88); } to { transform: translate(40px,24px) scale(1.12); } }
@keyframes mv-drift-b { from { transform: translate(50px,-30px) scale(.88); } to { transform: translate(-50px,30px) scale(1.12); } }
@keyframes mv-drift-c { from { transform: translate(-60px,-20px) scale(.8); } to { transform: translate(60px,20px) scale(1.2); } }

/* Entrée du haut de page */
.hero .eyebrow, .hero h1, .hero .lead, .hero .cta, .hero .trust, .hero .themes { animation: mv-rise .9s cubic-bezier(.22,1,.36,1) both; }
.hero h1 { animation-delay: .08s; }
.hero h1 span { display: inline-block; animation: mv-rise 1s cubic-bezier(.22,1,.36,1) .28s both; }
.hero .lead { animation-delay: .2s; }
.hero .cta { animation-delay: .3s; }
.hero .trust { animation-delay: .38s; }
.hero .themes { animation-delay: .46s; }
@keyframes mv-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Point qui respire (comme le statut actif de l'appli) */
.eyebrow i { position: relative; }
.eyebrow i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--ok); opacity: 0; }
@keyframes mv-pulse { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(2.8); } }

/* Reflet qui traverse les éléments en accent (comme les cartes de l'appli) */
.btn.gold, .plan.hot, .devices .center .screen { position: relative; overflow: hidden; isolation: isolate; }
.btn.gold::after, .plan.hot::after, .devices .center .screen::after { content: ''; position: absolute; top: -60%; bottom: -60%; left: 0; width: 120px; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent); transform: translateX(-220px) rotate(18deg); display: none; }
.plan.hot::after, .devices .center .screen::after { background: linear-gradient(90deg, transparent, rgba(var(--acc),0.10), transparent); width: 160px; }
.devices .center .screen::after { animation-delay: 2.4s; }
@keyframes mv-sheen { 0% { transform: translateX(-220px) rotate(18deg); } 16%, 100% { transform: translateX(calc(100vw + 220px)) rotate(18deg); } }

@keyframes mv-sheen-btn { 0% { left: -40%; transform: rotate(18deg); } 16%, 100% { left: 140%; transform: rotate(18deg); } }

/* Téléphones qui suivent légèrement la souris */
.devices { transition: transform .6s cubic-bezier(.22,1,.36,1); transform: perspective(1600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; }

/* Icônes des cartes : l'accent au survol */
.pillar .ico, .card .ico { transition: background .25s ease, border-color .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1); }
.pillar .ico svg, .card .ico svg { transition: stroke .25s ease; }
.pillar:hover .ico, .card:hover .ico { background: rgba(var(--acc),0.12); border-color: rgba(var(--acc),0.35); transform: scale(1.08) rotate(-4deg); }
.pillar:hover .ico svg, .card:hover .ico svg { stroke: var(--gold); }

/* Prix : la meilleure période ressort doucement */
.periods div { transition: border-color .25s ease, transform .25s cubic-bezier(.22,1,.36,1); }
.periods div:hover { transform: translateX(3px); border-color: rgba(var(--acc),0.5); }
.periods div.best { box-shadow: 0 0 0 3px rgba(var(--acc),0.10); }

/* Choix du thème */
.themes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin: 26px auto 0; font-size: 13.5px; color: var(--muted); }
.themes-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sw { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: 600 13px Figtree, system-ui, sans-serif; cursor: pointer; }
.sw:hover { border-color: var(--line2); color: var(--fg); }
.sw[aria-pressed="true"] { border-color: var(--gold); color: var(--fg); box-shadow: 0 0 0 3px rgba(var(--acc),0.14); }
.sw .dot { width: 24px; height: 24px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--sb) 50%, var(--sa) 50%); box-shadow: inset 0 0 0 1px rgba(127,127,127,0.35); }
.sw .plus { font-size: 10.5px; font-weight: 700; color: var(--gold); padding: 1px 6px; border-radius: 999px; background: rgba(var(--acc),0.12); }
.theme-btn { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 11px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; flex: none; }
.theme-btn:hover { background: var(--panel2); }
.theme-btn .dot { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--bg) 50%, var(--gold) 50%); box-shadow: inset 0 0 0 1px var(--line2); }
.theme-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 50; width: 230px; padding: 8px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line2); box-shadow: 0 24px 48px -16px rgba(0,0,0,.55); display: grid; gap: 2px; text-align: left;
  opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: top right; pointer-events: none; transition: opacity .18s ease, transform .22s cubic-bezier(.22,1,.36,1); }
.theme-pop.open { opacity: 1; transform: none; pointer-events: auto; }
.theme-pop .h { font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 8px 4px; }
.theme-pop .sw { border: 0; background: none; width: 100%; justify-content: flex-start; height: 38px; border-radius: 10px; box-shadow: none; }
.theme-pop .sw:hover { background: var(--panel2); }
.theme-pop .sw[aria-pressed="true"] { background: rgba(var(--acc),0.10); }
.theme-pop .sw .plus { margin-left: auto; }
.theme-wrap { position: relative; display: inline-flex; }
header .wrap > .theme-wrap { margin: 0 -18px; }
@media (max-width: 900px) { header .wrap > .theme-wrap { margin: 0; } }

/* Passage d'un thème à l'autre */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease, stroke .45s ease !important; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

@media (prefers-reduced-motion: reduce) {
  .aurora i, .eyebrow i::after, .btn.gold::after, .plan.hot::after, .devices .center .screen::after { animation: none; }
  .btn.gold::after, .plan.hot::after, .devices .center .screen::after { display: none; }
  .hero .eyebrow, .hero h1, .hero h1 span, .hero .lead, .hero .cta, .hero .trust, .hero .themes { animation: none; }
  .devices { transition: none; transform: none; }
  .pillar .ico, .card .ico, .periods div, .theme-pop { transition: none; }
  .pillar:hover .ico, .card:hover .ico, .periods div:hover { transform: none; }
}

/* ---------- Accueil 2 : démo animée de Shield, avis, vérificateur, page Fonctions ---------- */

/* Démo : sans JavaScript ou avec moins de mouvement, l'état final (envoi bloqué) reste affiché */
#shield-demo .demo-card { position: relative; transition: opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1); }
#shield-demo .demo-scan { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 11.5px var(--display); color: var(--muted); opacity: 0; transition: opacity .25s ease; }
#shield-demo .demo-scan i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(var(--acc),0.25); border-top-color: var(--gold); animation: mv-spin .8s linear infinite; }
@keyframes mv-spin { to { transform: rotate(360deg); } }
#shield-demo .demo-res { transition: opacity .3s ease; }
#shield-demo .demo-res > * { transition: opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1); }
#shield-demo .demo-res > :nth-child(2) { transition-delay: .12s; }
#shield-demo .demo-res > :nth-child(3) { transition-delay: .24s; }
#shield-demo .demo-caret { display: none; width: 1.5px; height: 1.15em; margin-left: 1px; vertical-align: -2px; background: var(--gold); animation: mv-blink 1s steps(1) infinite; }
@keyframes mv-blink { 50% { opacity: 0; } }
#shield-demo .demo-go { display: none; }
#shield-demo .s-slide { transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
#shield-demo[data-step="type"] .demo-caret { display: inline-block; }
#shield-demo[data-step="type"] .demo-card { opacity: 0; transform: translateY(8px); }
#shield-demo[data-step="scan"] .demo-scan { opacity: 1; }
#shield-demo:is([data-step="type"], [data-step="scan"]) .demo-res > * { opacity: 0; transform: translateY(6px); }
#shield-demo:is([data-step="type"], [data-step="scan"]) .s-slide { background: rgba(var(--acc),0.12); border-color: rgba(var(--acc),0.35); color: var(--gold); }
#shield-demo:is([data-step="type"], [data-step="scan"]) .demo-go { display: inline; }
#shield-demo:is([data-step="type"], [data-step="scan"]) .demo-no { display: none; }
#shield-demo[data-step="done"] .s-slide { animation: mv-shake .5s cubic-bezier(.36,.07,.19,.97) .3s both; }
@keyframes mv-shake { 20%, 60% { translate: -4px 0; } 40%, 80% { translate: 4px 0; } }
#devices .float-alert { transition: opacity .35s ease, translate .5s cubic-bezier(.34,1.56,.64,1); }
#devices:is([data-step="type"], [data-step="scan"]) .float-alert { opacity: 0; translate: 0 12px; }

/* Avis et chiffres */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 48px auto 0; max-width: 960px; }
.stats > div { border: 1px solid var(--line); background: var(--panel); border-radius: 20px; padding: 22px 24px; text-align: center; }
.stats b { display: block; font: 700 clamp(36px, 4.4vw, 48px)/1 var(--display); letter-spacing: -0.03em; color: var(--fg); font-variant-numeric: tabular-nums; }
.stats b small { font-size: .5em; color: var(--muted); letter-spacing: 0; margin-left: 2px; }
.stats span { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); }
.stats:has(> .hidden) { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
.reviews { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 16px; }
.review { margin: 0; grid-column: span 2; display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--line); background: var(--panel); border-radius: 22px; padding: 24px; }
.review:first-child { grid-column: 1 / -1; padding: 30px 32px; border-color: rgba(var(--acc),0.35); background: radial-gradient(90% 140% at 0% 0%, rgba(var(--acc),0.09), transparent 60%), var(--panel); }
.review:nth-child(n+5) { grid-column: span 3; }
.review blockquote { margin: 0; flex: 1; color: var(--fg); font-size: 16px; line-height: 1.55; }
.review:first-child blockquote { font: 600 clamp(19px, 2.2vw, 24px)/1.4 var(--display); letter-spacing: -0.01em; }
.review blockquote::before { content: '« '; color: var(--gold); }
.review blockquote::after { content: ' »'; color: var(--gold); }
html[lang="en"] .review blockquote::before, html[lang="de"] .review blockquote::before, html[lang="pt"] .review blockquote::before { content: '“'; }
html[lang="en"] .review blockquote::after, html[lang="de"] .review blockquote::after, html[lang="pt"] .review blockquote::after { content: '”'; }
.review figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; color: var(--muted); }
.review figcaption b { color: var(--fg); font-size: 14.5px; }
.stars { display: flex; gap: 3px; }
.stars i { width: 17px; height: 17px; display: block; background: rgba(var(--ink),0.16);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.2l-5.7 3.1 1.2-6.4-4.7-4.4 6.4-.8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.2l-5.7 3.1 1.2-6.4-4.7-4.4 6.4-.8z'/%3E%3C/svg%3E") center/contain no-repeat; }
.stars i svg { display: none; }
.stars i.on { background: var(--gold); }
.stars i.half { background: linear-gradient(90deg, var(--gold) 50%, rgba(var(--ink),0.16) 50%); }
.review, .stats > div { transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .25s ease; }
.review:hover, .stats > div:hover { transform: translateY(-3px); border-color: rgba(var(--acc),0.35); }
@media (max-width: 900px) { .reviews { grid-template-columns: 1fr 1fr; } .review, .review:nth-child(n+5) { grid-column: span 1; } .review:first-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .stats, .stats:has(> .hidden) { grid-template-columns: 1fr; } .reviews { grid-template-columns: 1fr; } .review:first-child { padding: 24px; } }

/* Shield : le vérificateur prend la place du téléphone */
.shield-check .checker { margin: 0; max-width: none; padding: 26px; }
.shield-check .checker h3 { font-size: 22px; margin-bottom: 6px; }
#verifier.shield-check { padding: 0; }

/* Questions : lien vers toutes les autres */
.faq-more { text-align: center; margin-top: 26px; }
.faq-more a { color: var(--gold); font-weight: 600; text-decoration: none; }
.faq-more a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Page Fonctions */
.page-hero { padding: 84px 0 8px; }
.page-hero h1 { font-size: clamp(40px, 6.5vw, 78px); margin-top: 8px; }
.page-hero .lead { margin: 22px auto 0; max-width: 620px; font-size: 18px; }

@media (prefers-reduced-motion: reduce) {
  #shield-demo .demo-scan i, #shield-demo .demo-caret, #shield-demo[data-step="done"] .s-slide { animation: none; }
  .review, .stats > div { transition: none; }
  .review:hover, .stats > div:hover { transform: none; }
}
/* Sur petit écran, l'alerte flottante cacherait le résultat de la démo (qui dit déjà la même chose) */
@media (max-width: 900px) { #devices .float-alert { display: none; } }

/* Téléphone : les thèmes tiennent sur une ligne qui défile au doigt */
@media (max-width: 640px) {
  .hero .themes { flex-direction: column; gap: 10px; }
  .hero .themes-list { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; max-width: calc(100vw - 32px); padding: 4px 3px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .hero .themes-list::-webkit-scrollbar { display: none; }
  .hero .themes-list .sw { flex: none; scroll-snap-align: start; }
}

/* Téléphone : barre « Télécharger » fixe en bas (voir demo.js) */
.dl-bar { display: none; }
@media (max-width: 900px) {
  .dl-bar { display: block; position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 60; opacity: 0; transform: translateY(150%); pointer-events: none; transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .25s; }
  .dl-bar.on { opacity: 1; transform: none; pointer-events: auto; }
  .dl-bar .btn { display: flex; width: 100%; justify-content: center; box-shadow: 0 12px 32px rgba(0,0,0,0.45); }
}
@media (prefers-reduced-motion: reduce) { .dl-bar { transition: none; } }

/* Menu : section en cours (voir demo.js) — un trait à l'accent sous le lien */
nav.links a { position: relative; transition: color .2s; }
nav.links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--gold); transform: scaleX(0); transition: transform .3s cubic-bezier(.22,1,.36,1); }
nav.links a.on { color: var(--fg); }
nav.links a.on::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { nav.links a::after { transition: none; } }

/* Haut de l'accueil, version 2 : le titre à gauche, le vérificateur d'adresse à droite, les téléphones dessous. */
.hero2 { text-align: left; padding-top: 72px; }
.hero2 .hero-top { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.hero2 .hero-top > * { min-width: 0; }
.hero2 h1 { margin: 0; max-width: none; font-size: clamp(42px, 5.6vw, 76px); line-height: 1; }
.hero2 .lead { margin: 24px 0 0; max-width: 540px; }
.hero2 .cta, .hero2 .trust { justify-content: flex-start; }
.hero2 .trust { margin: 22px 0 0; }
.hero2 .hero-news { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 22px; min-height: 44px; color: var(--muted); font-size: 13.5px; text-decoration: none; }
.hero2 .hero-news b { color: var(--gold); }
.hero2 .hero-news:hover { color: var(--fg); }
.hero2 #verifier .checker { margin: 0; max-width: none; }
.hero2 { padding-bottom: 64px; }
/* Section Shield : un seul téléphone, dessiné en HTML (net à toutes les tailles), éclairé par derrière. */
.shield-stage { isolation: isolate; padding: 28px 0; }
.shield-stage::before { content: ''; position: absolute; inset: -6% -14%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(var(--acc),0.30), rgba(var(--acc),0.08) 55%, transparent 78%); }
.shield-stage .phone { zoom: 1.18; border-color: rgba(var(--ink),0.16); box-shadow: 0 60px 100px -45px rgba(0,0,0,0.85), 0 0 0 1px rgba(0,0,0,0.5) inset; }
@media (max-width: 520px) { .shield-stage .phone { zoom: 1; } }
.hero2 .hero-copy > *, .hero2 #verifier { animation: mv-rise .6s cubic-bezier(.22,1,.36,1) both; }
.hero2 #verifier { animation-delay: .2s; }
[data-themes-slot] .themes { margin: 34px auto 0; }
@media (max-width: 920px) {
  .hero2 { padding-top: 32px; }
  .hero2 .hero-top { grid-template-columns: 1fr; gap: 24px; }
  .hero2 .hero-news { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .hero2 .hero-copy > *, .hero2 #verifier { animation: none; } }

/* ---------- Accessibilité et téléphone ---------- */
/* Lien d'évitement : visible seulement au clavier */
.skip { position: absolute; left: 16px; top: -80px; z-index: 100; padding: 12px 16px; border-radius: 12px; background: var(--gold); color: var(--on-gold); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
/* Plus de texte sous 12 px */
html .sw .plus, html .lm-code { font-size: 12px; }
/* Les logos ne flottent plus en continu */
.coin > img { animation: none; }
/* Écrans tactiles : zones de 44 px au moins, sans changer l'aspect sur ordinateur */
@media (pointer: coarse) {
  header .brand, header .btn.sm, .lm-btn, .theme-btn { min-height: 44px; }
  .theme-btn { min-width: 44px; }
  footer .fcols ul { gap: 0; }
  footer .fcols a { display: flex; align-items: center; min-height: 44px; }
  .checker .ex, .faq-more a { display: inline-flex; align-items: center; min-height: 44px; }
  #discord a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
  .checker input { font-size: 16px; } /* sous 16 px, iOS zoome sur le champ */
  .themes-list .sw, .theme-pop .sw { position: relative; }
  .coin::after, .themes-list .sw::after, .theme-pop .sw::after { content: ''; position: absolute; inset: -5px; }
}
/* Téléphone : les avis défilent de côté au lieu d'allonger la page */
@media (max-width: 640px) {
  .reviews { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -20px; padding: 2px 20px 10px; scrollbar-width: none; }
  .reviews::-webkit-scrollbar { display: none; }
  .reviews .review { flex: 0 0 84%; scroll-snap-align: center; }
}

/* Menu des thèmes : 15 thèmes ne tiennent plus en une colonne. Deux colonnes sur écran large,
   et dans tous les cas le menu ne dépasse jamais l'écran : il défile à l'intérieur. */
.theme-pop { max-height: min(72vh, 620px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.theme-pop .h { grid-column: 1 / -1; }
@media (min-width: 560px) {
  .theme-pop { width: 430px; grid-template-columns: 1fr 1fr; column-gap: 4px; }
}