/* ==== SupplyLab design system — mobile first, calé sur les mesures des pages ClickFunnels ====
   Mobile (<770px) puis desktop (>=770px). Toutes les valeurs reprennent le rendu CF mesuré. */
:root{
  --c-brand:#5cc2a4; --c-brand-mark:rgba(92,194,164,.25); --c-brand-glow:rgba(92,194,164,.5); --c-brand-tint:rgba(92,194,164,.12);
  --c-danger:#dc3535; --c-danger-mark:rgba(220,53,53,.25); --c-danger-glow:rgba(220,53,53,.5); --c-danger-tint:rgba(220,53,53,.36);
  --c-pill:#d6f0e8; --c-pill-danger:#f6cccc;
  --c-title:#000; --c-text:#2f2f2f; --c-muted:rgba(47,47,47,.69); --c-legal:rgba(107,107,107,.51);
  --c-line:#d3d3d3; --c-gray-box:#f1f1f1; --c-chevron:#e5e5e5;
  --font:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-hl-l:25.5px; --fs-hl:21.25px; --fs-hl-s:17px; --fs-sub:13.6px; --fs-body:14px; --fs-btn:16px;
  --col:610px; --pad-x:15px;
  --gap:20px; --gap-m:40px; --gap-l:100px;
}
@media (min-width:770px){:root{--fs-hl-l:50px;--fs-hl:41px;--fs-hl-s:26px;--fs-sub:18px;--fs-body:16px;--gap-l:110px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:var(--fs-body);line-height:1.43;color:var(--c-text);background:#fff;overflow-x:hidden}
img,svg,iframe,video{max-width:100%}
img{height:auto;display:block}
/* ---- layout : une colonne centrée ---- */
.col{width:100%;max-width:calc(var(--col) + 2*var(--pad-x));margin:0 auto;padding:0 var(--pad-x);text-align:center}
.blk{margin-top:var(--gap)} .blk-m{margin-top:var(--gap-m)} .blk-l{margin-top:var(--gap-l)} .blk-0{margin-top:0}
.narrow{max-width:320px;margin-left:auto;margin-right:auto} .w340{max-width:340px;margin-left:auto;margin-right:auto}
.w300{max-width:300px;margin-left:auto;margin-right:auto} .w75{width:75%;margin-left:auto;margin-right:auto}
@media (min-width:770px){.w75{width:100%}}
.center{text-align:center}
/* ---- header / footer ---- */
.site-header{padding-top:20px;display:flex;justify-content:center}
.site-logo{width:30%;max-width:256px}
@media (min-width:770px){.site-logo{width:20%}}
.legal{margin:66px auto 40px;max-width:1108px;padding:0 30px;text-align:center}
.legal p{font-size:var(--fs-sub);color:var(--c-legal);margin:30px 0 0}
.legal img{margin:0 auto;max-height:45px;width:auto}
/* ---- typo ---- */
.hl,.hl-l,.hl-s{font-weight:700;color:var(--c-title);margin:0;line-height:1.4;overflow-wrap:break-word}
.hl{font-size:var(--fs-hl)} .hl-l{font-size:var(--fs-hl-l)} .hl-s{font-size:var(--fs-hl-s)}
.hl b,.hl-l b,.hl-s b{font-weight:900;color:var(--c-brand)}
.mark b{background:linear-gradient(to top,var(--c-brand-mark) 50%,transparent 50%);display:inline}
.red b{color:var(--c-danger)} .red.mark b{background:linear-gradient(to top,var(--c-danger-mark) 50%,transparent 50%)}
.t-brand{color:var(--c-brand)} .t-text{color:var(--c-text)}
.sub{font-size:var(--fs-sub);font-weight:500;line-height:1.4;margin:0;color:var(--c-text)}
.sub--black{color:#000} .sub--muted{color:var(--c-muted)} .sub--lg{font-size:var(--fs-hl-s);color:rgb(107,107,107)}
.sub b{font-weight:700}
/* ---- pastilles Étape ---- */
.pill{display:inline-block;padding:10px;background:var(--c-pill);font-size:var(--fs-sub);font-weight:500;line-height:1.4}
.pill--danger{background:var(--c-pill-danger)}
/* ---- encadrés ---- */
.alert{max-width:615px;margin:0 auto;border:5px solid var(--c-danger);box-shadow:0 0 15px var(--c-danger-glow)}
.alert__in{background:var(--c-danger-tint);padding:20px 20px 21px}
.alert-wrap{background:#fdfdfd;padding:20px 15px;margin-top:20px}
.card{border:1px solid var(--c-line);border-radius:5px;padding:20px 15px}
.box-brand{border:7px solid var(--c-brand);background:var(--c-brand-tint);padding:20px 15px}
.lockbox{border:1px solid rgba(107,107,107,.31);border-radius:16px;background:rgba(228,228,228,.41);padding:20px 15px}
.graybox{border:1px solid rgba(107,107,107,.31);border-radius:15px;background:var(--c-gray-box);padding:20px 15px}
/* ---- icônes ---- */
.ico{display:inline-block;vertical-align:-.12em;width:1em;height:1em;fill:currentColor}
.chevron{display:block;margin:0 auto;padding:10px 0;color:var(--c-chevron);width:30px}
.chevron svg{width:24px;height:24px;fill:currentColor;display:block;margin:0 auto}
.arrow-down{display:block;margin:0 auto;width:69px;color:var(--c-text)}
.arrow-down svg{width:34px;height:55px;fill:currentColor;display:block;margin:10px auto}
/* ---- vidéos ---- */
.video-frame{position:relative;background:#000}
.video--danger{border:4px solid var(--c-danger);box-shadow:0 0 27px var(--c-danger-glow)}
.video--danger.rounded{border-radius:13px;overflow:hidden}
.video--brand{border:5px solid var(--c-brand);border-radius:5px;box-shadow:0 0 37px 3px var(--c-brand-glow);overflow:hidden;background:#fff}
.video-stack>.video-frame+.video-frame{margin-top:20px}
.video-placeholder,.ratio-16x9{position:relative;width:100%;padding-top:56.25%;background:#000}
.ratio-16x9 iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
wistia-player{display:block;width:100%}
/* ---- embeds ---- */
.embed{width:100%}
.embed iframe{width:100%;border:0;display:block}
.embed--iclosed .iclosed-widget{min-height:620px}
/* ---- boutons (style CF) ---- */
.btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-height:48px;max-width:100%;
  padding:10px 25px;background:var(--c-brand);border:1px solid var(--c-line);border-radius:3px;color:#fff;text-decoration:none;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;line-height:1.3}
.btn--danger{background:var(--c-danger)}
.btn__main{font-size:var(--fs-btn);font-weight:600;text-transform:uppercase}
.btn__sub{font-size:var(--fs-btn);font-weight:100}
.btn__sub:empty{display:none}
.btn:active{filter:brightness(.95)}
/* ---- compteur LIVE (copie du widget CF) ---- */
.live{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.08);font-size:13px;color:var(--c-text)}
.live__pill{display:inline-flex;align-items:center;gap:5px;background:#ff3b3b;color:#fff;font-weight:700;padding:2px 8px;border-radius:999px;font-size:11px}
.live__dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.3}}
/* ---- reveal (délai identique à ClickFunnels) ---- */
[data-reveal]{display:none}
[data-reveal].is-revealed{display:block;animation:elevate 1.2s ease both}
@keyframes elevate{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* ---- galerie ---- */
.gallery{display:flex;flex-direction:column;gap:14px;max-width:300px;margin-left:auto;margin-right:auto}
.gallery img{width:100%}
@media (min-width:770px){.gallery{gap:18px}}
.img-center{margin-left:auto;margin-right:auto}
.socials .btn+.btn{margin-top:21px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

.socials{display:flex;flex-direction:column;align-items:center;gap:21px}
.socials .btn{min-width:200px}

/* ---- pré-formulaire / Tally : reproduction exacte CF (fade 1.2s ease, fill both, délai depuis le chargement) ---- */
.prereveal{width:auto;margin:0}
.prereveal.is-done{animation:cf-fade-out 1.2s ease both;pointer-events:none}
.tally-slot{position:relative;margin-top:-150px;opacity:0;pointer-events:none}
.tally-slot.is-done{animation:cf-fade-in 1.2s ease both;pointer-events:auto}
@keyframes cf-fade-in{from{opacity:0}to{opacity:1}}
@keyframes cf-fade-out{from{opacity:1}to{opacity:0}}
.prereveal .lockbox .sub{padding-top:41px}
@media (min-width:768px){.prereveal .lockbox .sub{padding-top:29px}}
/* ===== Composant titre unifié (.headline) — mobile-first ===== */
.headline{text-align:center;max-width:760px;margin:0 auto}
.headline__kicker{display:inline-block;margin:0 0 12px;padding:6px 14px;border-radius:999px;background:var(--c-brand-tint);color:var(--c-brand);font-size:15px;font-weight:800;letter-spacing:.02em;line-height:1.3}
.headline__title{margin:0;color:var(--c-title);font-weight:800;font-size:24px;line-height:1.28;letter-spacing:-.01em;overflow-wrap:break-word;text-wrap:balance}
.headline .hl-line,.headline .hl-amount{display:block}
.headline .hl-amount{width:max-content;max-width:100%;margin:4px auto;padding:0 6px;font-size:1.22em;font-weight:900;white-space:nowrap;color:var(--c-title);background:linear-gradient(to top,var(--c-brand-mark) 55%,transparent 55%)}
.headline .hl-key{color:var(--c-brand);font-weight:900;white-space:nowrap}
@media (min-width:770px){.headline__kicker{font-size:20px;padding:8px 20px;margin-bottom:16px}.headline__title{font-size:40px;line-height:1.22}.headline .hl-line{display:inline}.headline .hl-amount{display:inline;margin:0;padding:0 4px}}
/* Variante militaire : bandeau camouflage kaki/olive */
.headline--military .headline__kicker{color:#fff;border-radius:6px;padding:7px 18px;text-transform:uppercase;letter-spacing:.08em;text-shadow:0 1px 2px rgba(0,0,0,.55);border:2px solid #3b4228;
 background-color:#5b6236;background-image:radial-gradient(ellipse 22px 12px at 18% 30%,#3d4425 98%,transparent),radial-gradient(ellipse 18px 10px at 62% 70%,#8a7d55 98%,transparent),radial-gradient(ellipse 26px 11px at 85% 25%,#2f3520 98%,transparent),radial-gradient(ellipse 16px 9px at 40% 85%,#7a8450 98%,transparent),radial-gradient(ellipse 20px 10px at 5% 80%,#8a7d55 98%,transparent);background-size:90px 40px}
.headline--military .headline__kicker::before{content:"★ ";color:#e6d9a8}
.headline__title b{font-weight:900;color:var(--c-brand)} .headline__title.red b{color:var(--c-danger)} .headline__title.t-brand{color:var(--c-brand)}