/* MetarPad, site de présentation v2. Voir DESIGN.md (section Landing v2). Aucune dépendance externe. */
:root{
  --paper:#f7fafc; --sky:#e6f0f8; --sky2:#d4e5f3; --card:#ffffff;
  --ink:#0d1824; --ink2:#2b3a49; --mut:#5d6e7f; --line:#dbe5ee;
  --air:#6fa8d6;            /* lignes de vent */
  --amber:#ffd84d; --amber-ink:#2d2300;  /* surbrillance « ce qui a changé », reprise de la TV */
  --solid:#0d1824; --solid-ink:#f7fafc;
  --vfr:#22a55a; --mvfr:#2f7fe0; --ifr:#e0453a; --lifr:#c23fd0;
  --night:#0a121b; --night2:#111d2a; --night-ink:#e8eff6; --night-mut:#93a5b7; --night-line:#22324299;
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Charter","Palatino Linotype",Palatino,Georgia,ui-serif,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:14px; --wrap:1180px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --paper:#0b1219; --sky:#0f1b26; --sky2:#132232; --card:#111c27;
  --ink:#eaf1f7; --ink2:#c5d2de; --mut:#93a4b5; --line:#1f2e3c; --air:#3f6f99;
  --solid:#eaf1f7; --solid-ink:#0b1219;
}}
:root[data-theme=dark]{
  --paper:#0b1219; --sky:#0f1b26; --sky2:#132232; --card:#111c27;
  --ink:#eaf1f7; --ink2:#c5d2de; --mut:#93a4b5; --line:#1f2e3c; --air:#3f6f99;
  --solid:#eaf1f7; --solid-ink:#0b1219;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:640;letter-spacing:-.025em;line-height:1.08;text-wrap:balance}
p{margin:0}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--solid);color:var(--solid-ink);padding:.6rem 1rem;z-index:99;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}

/* En-tête */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.top.scrolled{border-bottom-color:var(--line)}
.top-in{display:flex;align-items:center;gap:1rem;height:64px}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;font-weight:680;letter-spacing:-.02em;font-size:1.08rem}
.brand img{border-radius:8px}
.nav{display:none;gap:1.6rem;margin-left:auto}
.nav a{text-decoration:none;color:var(--mut);font-size:.95rem;transition:color .2s}
.nav a:hover{color:var(--ink)}
.top-act{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.theme{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:background .2s}
.theme:hover{background:var(--sky)}
.theme svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme .moon{display:none}
:root[data-theme=dark] .theme .sun{display:none} :root[data-theme=dark] .theme .moon{display:inline}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .theme .sun{display:none}:root:not([data-theme=light]) .theme .moon{display:inline}}
@media (min-width:860px){.nav{display:flex}.top-act{margin-left:1.4rem}}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.35rem;border-radius:999px;font-weight:600;font-size:1rem;text-decoration:none;letter-spacing:-.01em;transition:transform .25s var(--ease),background .2s,border-color .2s,box-shadow .25s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-solid{background:var(--solid);color:var(--solid-ink);box-shadow:0 6px 20px -8px color-mix(in srgb,var(--ink) 55%,transparent)}
.btn-ghost{border:1.5px solid color-mix(in srgb,var(--ink) 22%,transparent);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-sm{min-height:40px;padding:0 1rem;font-size:.92rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem}

/* Typo commune */
.kicker{font-size:.8rem;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:1rem}
.kicker-s{text-transform:none;letter-spacing:0;font-size:.98rem;font-weight:600;line-height:1.45;color:var(--ink2);max-width:40ch}
.lede{font-size:clamp(1.08rem,1.6vw,1.24rem);line-height:1.55;color:var(--ink2);max-width:58ch}
.soft{color:var(--mut)}
mark{background:var(--amber);color:var(--amber-ink);padding:0 .25em;border-radius:4px}

/* Vent */
.wind{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;color:var(--air)}
.wind path{fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-dasharray:160 1400;stroke-dashoffset:1560;opacity:.55;animation:gust 11s linear infinite}
.wind path:nth-child(2){animation-duration:14s;animation-delay:-4s;opacity:.4}
.wind path:nth-child(3){animation-duration:9s;animation-delay:-7s}
.wind path:nth-child(4){animation-duration:13s;animation-delay:-2s;opacity:.35}
.wind path:nth-child(5){animation-duration:16s;animation-delay:-9s;opacity:.3}
@keyframes gust{to{stroke-dashoffset:0}}

/* Héros */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--sky) 0%,var(--paper) 78%);padding:clamp(2.5rem,7vw,6rem) 0 clamp(3.5rem,8vw,7rem)}
.hero-in{position:relative;display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center}
.hero h1{font-size:clamp(2.7rem,7.6vw,4.7rem);line-height:.98;letter-spacing:-.045em;margin-bottom:1.4rem}
.hero .lede{margin-bottom:2rem}
.live-link{margin-top:1.3rem;font-size:.95rem}
.live-link a{color:var(--mut);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .2s,border-color .2s}
.live-link a:hover{color:var(--ink);border-color:var(--ink)}
.hero-vis{position:relative;padding:0 0 18% 0}
.dev.hero-phone{position:absolute;right:2%;bottom:0;width:27%;max-width:180px}
@media (min-width:980px){
  .hero-in{grid-template-columns:minmax(0,6fr) minmax(0,7fr)}
  .hero-vis{padding-bottom:14%;margin-right:-4vw}
  .dev.hero-phone{width:22%;right:auto;left:-7%;bottom:0}
}

/* Cadres d'appareils (CSS pur) */
.dev{margin:0;position:relative}
.dev img{width:100%;height:100%;object-fit:cover;object-position:top center}
.tv{background:#06090d;border-radius:12px;padding:1.1%;box-shadow:0 1px 0 #2a3644 inset,0 40px 70px -30px rgba(10,30,55,.45),0 12px 24px -12px rgba(10,30,55,.3)}
.tv::after{content:"";position:absolute;left:50%;bottom:-16px;width:22%;height:16px;transform:translateX(-50%);background:linear-gradient(#1a222c,#0c1117);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);border-radius:0 0 4px 4px}
.tv-screen{aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:#0c1520}
.tablet{background:#111;border-radius:22px;padding:5.5% 7%;box-shadow:0 30px 60px -28px rgba(10,30,55,.45),0 0 0 1px #2b2b2b inset}
.tablet-screen{aspect-ratio:16/9;overflow:hidden;border-radius:3px;background:#fff}
.phone{background:#0b0d10;border-radius:clamp(26px,13%,46px)/clamp(26px,6%,46px);padding:3.2%;box-shadow:0 30px 60px -24px rgba(10,30,55,.5),0 0 0 1.5px #3a3f46 inset}
.phone::before{content:"";position:absolute;top:2.6%;left:50%;transform:translateX(-50%);width:30%;height:2.6%;background:#0b0d10;border-radius:99px;z-index:2}
.phone-screen{aspect-ratio:390/844;overflow:hidden;border-radius:clamp(20px,11%,38px)/clamp(20px,5%,38px);background:#fff}

/* Carte qui se retourne (signature de la TV) */
.flip{position:absolute;top:-9%;right:4%;perspective:900px;z-index:3}
.flip-card{position:relative;width:min(62vw,250px);height:68px;transform-style:preserve-3d;transition:transform .9s var(--ease)}
.flip-card.on{transform:rotateX(-180deg)}
.flip-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:.65rem .9rem;border-radius:12px;background:var(--card);border:1px solid var(--line);box-shadow:0 18px 40px -18px rgba(10,30,55,.35);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-b{transform:rotateX(180deg)}
.fl-k{font:600 .7rem/1 var(--mono);letter-spacing:.06em;color:var(--mut)}
.fl-v{font:500 clamp(.8rem,3.2vw,1.05rem)/1.3 var(--mono);white-space:nowrap;color:var(--ink)}
.fl-v b{font-weight:700}
.flip-card.on .chg{animation:chg 4.2s .9s var(--ease) both}
@keyframes chg{0%{background:var(--amber);color:var(--amber-ink);box-shadow:0 0 0 4px var(--amber)}70%{background:var(--amber);color:var(--amber-ink);box-shadow:0 0 0 4px var(--amber)}100%{background:transparent;color:inherit;box-shadow:0 0 0 4px transparent}}
.chg{border-radius:3px}

/* Sections */
.sec{position:relative;padding:clamp(4.5rem,10vw,8.5rem) 0}
.sec-tint{background:var(--sky)}
.sec-head{max-width:760px;margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.sec h2{font-size:clamp(2rem,5vw,3.4rem);letter-spacing:-.035em}
.sec-head .lede{margin-top:1.3rem}
.h2s{font-size:clamp(1.6rem,3.2vw,2.3rem)!important;margin-bottom:1.6rem}

.row{display:grid;gap:2.2rem;align-items:center;margin-bottom:clamp(4rem,9vw,7rem)}
.row:last-child{margin-bottom:0}
.row .phone{width:min(62%,300px);margin-inline:auto}
.row-txt{max-width:520px}
.row-txt h3{font-size:clamp(1.5rem,3vw,2.1rem);margin:.4rem 0 1rem}
.row-txt>p{color:var(--ink2)}
.tag{display:inline-block;font-size:.82rem;font-weight:620;color:var(--ink2);background:var(--sky);border:1px solid var(--line);padding:.25rem .7rem;border-radius:999px}
.ticks{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.55rem}
.ticks li{position:relative;padding-left:1.7rem;color:var(--ink2)}
.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:.95rem;height:.55rem;border-left:2px solid var(--vfr);border-bottom:2px solid var(--vfr);transform:rotate(-45deg) translate(2px,-3px)}
.cat{display:inline-block;font:700 .72rem/1 var(--sans);color:#fff;padding:.28em .5em;border-radius:5px;vertical-align:.12em}
.c-vfr{background:var(--vfr)}.c-mvfr{background:var(--mvfr)}.c-ifr{background:var(--ifr)}.c-lifr{background:var(--lifr)}
@media (min-width:900px){
  .row{grid-template-columns:7fr 5fr;gap:4.5rem}
  .row-rev{grid-template-columns:5fr 7fr}
  .row-rev .row-txt{order:-1;justify-self:end}
}

.two{display:grid;gap:3.5rem}
@media (min-width:900px){.two{grid-template-columns:1fr 1fr;gap:5rem}}
.rule{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.rule li{padding:1.05rem 0;border-bottom:1px solid var(--line);color:var(--ink2)}
.rule b{color:var(--ink);font-weight:640}

/* Nuit : la TV */
.night{background:radial-gradient(120% 80% at 50% 0%,var(--night2) 0%,var(--night) 70%);color:var(--night-ink)}
.night .kicker,.night .soft{color:var(--night-mut)}
.night .lede{color:#c9d6e2}
.night .sec-head{margin-inline:auto;text-align:center}
.night .sec-head .lede{margin-inline:auto}
.tv-xl{max-width:1040px;margin:0 auto clamp(3.5rem,7vw,5.5rem)}
.night .tv{box-shadow:0 0 0 1px #1f2b38,0 50px 120px -40px rgba(70,140,220,.35)}
.tv-cols{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));border-top:1px solid var(--night-line);padding-top:2rem}
.tv-cols h3{font-size:1.05rem;letter-spacing:-.01em;margin-bottom:.5rem}
.tv-cols p{color:var(--night-mut);font-size:.98rem}
.sounds{margin-top:clamp(3rem,6vw,4.5rem);text-align:center}
.sounds-l{font-family:var(--serif);font-style:italic;font-size:1.25rem;color:#c9d6e2;margin-bottom:1rem}
.chips{list-style:none;padding:0;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;max-width:760px}
.chips li{font-size:.9rem;padding:.42rem .9rem;border:1px solid #2a3b4d;border-radius:999px;color:#d2dde8}
.chips li:first-child{border-color:var(--amber);color:var(--amber)}

/* Frais et léger */
.fresh{display:grid;gap:3rem;align-items:start}
@media (min-width:960px){.fresh{grid-template-columns:6fr 5fr;gap:5rem}}
.fresh .lede{margin-top:1.3rem}
.src{margin-top:1.4rem;font-size:.9rem;color:var(--mut);max-width:58ch}
.cadence{list-style:none;padding:0;margin:0;position:relative}
.cadence::before{content:"";position:absolute;left:4.6rem;top:.6rem;bottom:.6rem;width:1px;background:linear-gradient(var(--air),var(--line))}
.cadence li{display:grid;grid-template-columns:4.6rem 1fr;align-items:baseline;gap:1.4rem;padding:.75rem 0;position:relative}
.cadence li::after{content:"";position:absolute;left:calc(4.6rem - 4px);top:1.25rem;width:9px;height:9px;border-radius:50%;background:var(--paper);border:2px solid var(--air)}
.cadence li:first-child::after{background:var(--air)}
.cd-t{font:640 1.35rem/1 var(--sans);letter-spacing:-.03em;text-align:right;padding-right:.4rem;font-variant-numeric:tabular-nums}
.cd-l{color:var(--ink2)}

/* Étapes */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:2.5rem}
@media (min-width:860px){.steps{grid-template-columns:repeat(3,1fr);gap:3rem}}
.steps li{position:relative;padding-top:1.2rem;border-top:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}
.steps .n{display:block;font:italic 400 3.6rem/1 var(--serif);color:var(--air);margin-bottom:1rem}
.steps h3{font-size:1.35rem;margin-bottom:.6rem}
.steps p{color:var(--ink2)}

/* FAQ */
.faq{max-width:820px}
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 0;font-weight:600;font-size:1.08rem;letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg) translate(-3px,-3px);transition:transform .3s var(--ease)}
.qa details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.qa details p{padding:0 0 1.35rem;color:var(--ink2);max-width:66ch}
.qa a{text-underline-offset:3px}

/* Fin */
.end{overflow:hidden;background:linear-gradient(180deg,var(--paper),var(--sky));text-align:center}
.end-in{position:relative}
.end h2{font-size:clamp(2.2rem,6vw,4.2rem);letter-spacing:-.04em;margin-bottom:2.2rem}
.end .cta-row{justify-content:center}

/* Formulaire « Équiper mon club » (POST /contact) */
.contact{display:grid;gap:clamp(2rem,5vw,4rem);text-align:left;align-items:start}
.contact h2{margin-bottom:1.3rem}
.contact-login{margin-top:1.4rem}
.contact-login a{text-underline-offset:3px}
@media (min-width:960px){.contact{grid-template-columns:5fr 6fr}}
.cform{display:grid;gap:1rem;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);padding:clamp(1.2rem,3.5vw,2rem);box-shadow:0 30px 60px -36px rgba(10,30,55,.35)}
.f2{display:grid;gap:1rem;min-width:0}
@media (min-width:560px){.f2{grid-template-columns:1fr 1fr}}
.fld{display:grid;gap:.4rem;min-width:0;font-size:.92rem;font-weight:600;color:var(--ink2)}
.fld small{font-weight:400;color:var(--mut)}
.fld input,.fld textarea{width:100%;min-width:0;font:400 1rem/1.4 var(--sans);color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:10px;padding:.72rem .85rem;transition:border-color .2s,box-shadow .2s}
.fld textarea{resize:vertical;min-height:6.5rem}
.fld input:hover,.fld textarea:hover{border-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 70%,transparent)}
.fld input[name=icao]{text-transform:uppercase;font-family:var(--mono);letter-spacing:.08em}
.fld [aria-invalid=true]{border-color:var(--ifr)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform .btn{justify-self:start;border:0;cursor:pointer;font-family:inherit}
.cform .btn[disabled]{opacity:.6;cursor:progress;transform:none}
.cform-msg{min-height:1.4em;font-size:.95rem;color:var(--ink2)}
.cform-msg.err{color:var(--ifr);font-weight:600}
.cform.done .f2,.cform.done>.fld,.cform.done .btn{display:none}
.cform.done .cform-msg{font-size:1.08rem;color:var(--ink);font-weight:600}
.cform.done .cform-msg::before{content:"✓";display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;margin-right:.6rem;border-radius:50%;background:var(--vfr);color:#fff;font-size:.95rem}

/* Pied */
.foot{background:var(--sky);border-top:1px solid var(--line);padding:2rem 0 2.6rem;font-size:.92rem}
.foot-in{display:grid;gap:.8rem}
.warn{display:inline-block;background:color-mix(in srgb,var(--amber) 30%,var(--paper));color:var(--ink);border:1px solid color-mix(in srgb,var(--amber) 70%,transparent);padding:.6rem .9rem;border-radius:10px;justify-self:start}
.mut{color:var(--mut)}
.foot a{text-underline-offset:3px}

/* Apparition au défilement (seulement si JS actif) */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .steps .rv:nth-child(2){transition-delay:.08s}.js .steps .rv:nth-child(3){transition-delay:.16s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wind path{animation:none;stroke-dasharray:none;opacity:.18}
  .js .rv{opacity:1;transform:none;transition:none}
  .flip-card,.btn{transition:none}
  .flip-card.on .chg{animation:none}
}