/* LP redevance de marque (RemUp) · direction A « carte rémunération »
   Mobile first strict : une colonne pensée pour 390 px, centrée telle quelle sur grand écran (BRIEF §7).
   Couleurs relevées dans la pub V2 A. Le corail pur (#F07C54) ne sert qu'aux aplats :
   en texte sur crème il tombe à 2,4:1. --accent-strong (3,6:1) pour les gros titres,
   --accent-ink (4,3:1) pour le texte courant. */

@font-face{font-family:Inter;src:url(public/fonts/inter-400.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(public/fonts/inter-500.woff) format("woff");font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(public/fonts/inter-600.woff) format("woff");font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url(public/fonts/inter-700.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:Inter;src:url(public/fonts/inter-800.woff) format("woff");font-weight:800;font-display:swap}

:root{
  --accent:#F07C54; --accent-deep:#C94A25; --accent-strong:#D4552F; --accent-ink:#C24A22; --accent-soft:#F8D9CC;
  --paper:#F5F0EA; --mist:#FBF8F4; --white:#FFFFFF;
  --navy:#18243C; --ink:#18243C; --ink-2:#3A4558; --mute:#5B6577; --line:#E6DED4;
  --radius:14px; --radius-sm:10px;
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow:0 18px 40px -28px rgba(24,36,60,.35);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:12px}
body{font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--paper);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
ul,ol{list-style:none}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent-strong);outline-offset:2px;border-radius:6px}

.wrap{width:100%;max-width:480px;margin-left:auto;margin-right:auto;padding:0 20px}
section h2{font-size:25px;line-height:1.14;letter-spacing:-.022em;font-weight:800}
section h2 em{font-style:normal;color:var(--accent-strong)}
section+section{margin-top:64px}

/* En-tête */
.top{display:flex;align-items:center;justify-content:space-between;height:60px}
.top .brand{height:20px;width:auto}
.top .meta{font-size:13px;font-weight:500;color:var(--ink-2);margin-left:auto;white-space:nowrap}
@media (max-width:260px){.top .meta{display:none}}

/* 1er écran */
.hero{padding-top:8px}
.hero h1{font-size:30px;line-height:1.12;letter-spacing:-.025em;font-weight:800;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--accent-strong)}

.card{margin-top:18px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px 16px;box-shadow:var(--shadow);outline:none}
.card .lbl{font-size:13px;color:var(--mute);font-weight:500}

/* La barre de la pub : « + Redevance » s'ajoute après un temps, c'est la promesse de la page */
.bar{display:flex;height:46px;margin-top:10px;border-radius:var(--radius-sm);overflow:hidden;font-size:13px;font-weight:600}
.bar span{display:flex;align-items:center;padding:0 12px;white-space:nowrap}
.bar .you{flex:1.1;background:var(--accent);color:var(--navy)}
.bar .chg{flex:1;background:var(--navy);color:var(--white)}
.bar .roy{flex:1.15;background:var(--accent-deep);color:var(--white);box-shadow:inset 2px 0 0 var(--white)}
.legend{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:10px;font-size:13px;color:var(--ink-2)}
.legend b{font-size:20px;letter-spacing:-.02em;color:var(--accent-strong)}

.q{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.q h2{font-size:17px;line-height:1.3;font-weight:700;letter-spacing:-.01em;outline:none}
.q .hint{font-size:14px;color:var(--mute);margin-top:4px}
.ok h2{color:var(--accent-ink)}
.opts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px}
.opts.two{grid-template-columns:1fr 1fr}
.opts button{min-height:54px;padding:6px 8px;border:1.5px solid var(--line);background:var(--mist);border-radius:var(--radius-sm);font-weight:600;font-size:15px;line-height:1.2;transition:transform .12s var(--ease),border-color .2s,background-color .2s,color .2s}
.opts button:active{transform:scale(.97)}
.opts button.picked{background:var(--navy);border-color:var(--navy);color:var(--white)}
.back{margin-top:12px;font-size:14px;color:var(--mute);text-decoration:underline;text-underline-offset:3px;min-height:32px}
.link{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* Zone agenda : chargement, intégration Cal.com, bientôt disponible, erreur */
.cal{margin-top:12px;position:relative}
.cal-load{position:absolute;inset:0 0 auto 0;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#cal-embed.waiting{opacity:0;pointer-events:none}
#cal-embed{transition:opacity .3s var(--ease)}
.cal-load i{height:44px;border-radius:8px;background:linear-gradient(90deg,var(--mist) 0%,var(--accent-soft) 50%,var(--mist) 100%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
#cal-embed{min-height:520px;width:100%;overflow:auto}
.cal-msg{border:1.5px dashed var(--accent);border-radius:var(--radius-sm);padding:16px;background:var(--mist);font-size:14px;color:var(--ink-2)}
.cal-msg strong{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}

.safe{margin-top:10px;font-size:13px;font-weight:600;color:var(--navy)}
.safe:before{content:"✓";display:inline-grid;place-items:center;width:18px;height:18px;margin-right:6px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font-size:11px}
.proof{display:flex;justify-content:space-between;gap:16px;margin-top:16px;font-size:13px;color:var(--ink-2)}
.proof b{color:var(--ink)}

/* Changement de question : la nouvelle étape glisse depuis le bas */
.step.enter{animation:step-in .38s var(--ease) both}
@keyframes step-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Concept : un flux vertical vous → société → vous */
.bridge{font-size:15px;font-weight:600;color:var(--accent-ink);margin-bottom:6px}
.flow{margin-top:24px}
.node{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 16px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm)}
.node b{font-size:17px}
.node span{font-size:13px;color:var(--mute);text-align:right}
.node.you{background:var(--navy);border-color:var(--navy);color:var(--white)}
.node.you span{color:#CBD2DC}
.flow .arrow{position:relative;display:block;margin-left:22px;padding:12px 0 12px 22px;font-size:14px;color:var(--ink-2);text-decoration:none}
.flow .arrow:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--navy);transform-origin:top}
.flow .arrow.up:before{background:var(--accent)}
.flow .arrow:after{content:"";position:absolute;left:-4px;bottom:2px;width:10px;height:10px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg)}
.flow .arrow.up:after{border-color:var(--accent)}
.figures{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.fig{display:flex;flex-direction:column;gap:2px;padding-top:12px;border-top:2px solid var(--accent)}
.fig.alt{border-top-color:var(--navy)}
.fig .for{font-size:12px;font-weight:600;color:var(--mute)}
.fig .num{font-size:19px;line-height:1.2;font-weight:800;letter-spacing:-.02em;color:var(--accent-strong)}
.fig.alt .num{color:var(--navy)}
.fig .txt{font-size:13px;color:var(--ink-2)}

/* Condition : deux cas acceptés, un refusé (tirets) */
.cases{display:grid;gap:10px;margin-top:20px}
.case{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:16px;border-radius:var(--radius);border:1.5px solid var(--line);background:var(--white)}
.case .mk{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;background:var(--accent-soft);color:var(--accent-ink)}
.case.no{background:transparent;border-style:dashed}
.case.no .mk{background:#E9E4DD;color:var(--mute)}
.case b{display:block;font-size:16px}
.case span{font-size:14px;color:var(--ink-2)}
.case.no b{color:var(--mute)}

/* Cadre légal : bande blanche pleine largeur, parcours en 3 étapes */
.legal{background:var(--white);padding:44px 0 40px;border-block:1px solid var(--line)}
.path{counter-reset:etape;margin-top:24px;position:relative}
.path:before{content:"";position:absolute;left:15px;top:10px;bottom:30px;width:2px;background:var(--accent-soft)}
.path li{counter-increment:etape;position:relative;padding:0 0 22px 48px}
.path li:before{content:counter(etape);position:absolute;left:0;top:-3px;width:32px;height:32px;border-radius:50%;background:var(--white);border:2px solid var(--accent);color:var(--accent-ink);font-weight:700;font-size:14px;display:grid;place-items:center}
.path b{display:block;font-size:16px}
.path span{font-size:14px;color:var(--ink-2)}
.seal{display:inline-block;margin-top:4px;padding:10px 14px;border-radius:var(--radius-sm);background:var(--navy);color:var(--white);font-weight:700;font-size:14px}

/* Vidéo de la pub */
.player{position:relative;margin:18px auto 0;width:min(260px,72%);aspect-ratio:9/16;border-radius:var(--radius);overflow:hidden;background:var(--navy);box-shadow:var(--shadow)}
.player video{width:100%;height:100%;object-fit:cover}
.play{position:absolute;inset:auto 12px 12px 12px;display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;border-radius:999px;background:var(--white);color:var(--navy);font-weight:700;font-size:15px;transition:transform .12s var(--ease)}
.play:active{transform:scale(.97)}
.play span{width:0;height:0;border-left:11px solid var(--accent-strong);border-top:7px solid transparent;border-bottom:7px solid transparent}

/* Clôture */
.closing{padding-bottom:12px}
.closing p{margin-top:10px;font-size:16px;color:var(--ink-2);max-width:40ch}
.cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;margin-top:18px;border-radius:var(--radius);background:var(--navy);color:var(--white);font-weight:700;font-size:18px;transition:transform .12s var(--ease),background-color .2s}
.cta:active{transform:scale(.98)}

/* Pied de page */
.foot{margin-top:48px;padding-top:24px;padding-bottom:calc(96px + env(safe-area-inset-bottom));border-top:1px solid var(--line);font-size:12px;color:var(--mute)}
.foot p+p{margin-top:6px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:10px}
.foot a,.foot .link{color:var(--mute);min-height:32px;display:inline-flex;align-items:center}

/* Bouton collant : apparaît quand la carte sort de l'écran */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 20px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--paper) 70%,rgba(245,240,234,0));transform:translateY(110%);transition:transform .35s var(--ease)}
.sticky .cta{max-width:440px;margin:0 auto}
.sticky.on{transform:none}

/* Consentement : bandeau bas, au-dessus du bouton collant */
.consent{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;max-width:456px;margin:0 auto;padding:16px;border-radius:var(--radius);background:var(--navy);color:#E5E9EF;font-size:14px;box-shadow:0 20px 50px -20px rgba(24,36,60,.6)}
.consent-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.consent-actions button{min-height:46px;border-radius:var(--radius-sm);border:1.5px solid #46516A;color:var(--white);font-weight:600}
.consent-actions .accept{background:var(--white);border-color:var(--white);color:var(--navy)}

/* Moins de 375 px : légende et preuves empilées plutôt que coupées en colonnes bancales */
@media (max-width:374px){
  .legend,.proof{flex-direction:column;align-items:flex-start;gap:2px}
  .opts button{font-size:14px}
}

/* Animations : barre au chargement, apparition des sections, flèches du flux dessinées au défilement */
@media (prefers-reduced-motion:no-preference){
  .bar .roy{flex:0 0 0;padding:0;overflow:hidden;animation:grow 1.1s .45s var(--ease) forwards}
  @keyframes grow{to{flex:1.15;padding:0 12px}}
  .js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .js [data-reveal].in{opacity:1;transform:none}
  .js [data-reveal] .flow .arrow:before{transform:scaleY(0);transition:transform .7s var(--ease)}
  .js [data-reveal].in .flow .arrow:before{transform:scaleY(1)}
  .js [data-reveal].in .flow .arrow.up:before{transition-delay:.35s}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
}