/* OUSTARSH · site vitrine v2 · base commune (accueil, bilan, pages légales)
   Style v4 : sombre, braise #FF5A1F (hommes), rose #F49AB0 (femmes), Barlow / Barlow Condensed.
   Polices auto-hébergées (SIL OFL 1.1, voir fonts/OFL-*.txt). Aucun appel externe. */
@font-face{font-family:'Barlow';font-weight:400;font-display:swap;src:url(fonts/barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:500;font-display:swap;src:url(fonts/barlow-500.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:600;font-display:swap;src:url(fonts/barlow-600.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:700;font-display:swap;src:url(fonts/barlow-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:800;font-display:swap;src:url(fonts/barlow-condensed-800.woff2) format('woff2')}
@font-face{font-family:'Jost';font-weight:300 700;font-display:swap;src:url(fonts/jost-var.woff2) format('woff2')}

:root{
  --bg:#111111; --card:#1C1C1C; --card2:#262626; --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --tx:#F5F5F4; --tx2:#BDBDBA; --mut:#929290;
  --ac:#FF5A1F; --ac-tx:#FF7A45; --on-ac:#170A04;
  --f-bg:#120E12; --f-card:#1E171E; --f-card2:#2A212A; --f-tx:#F8F1F5; --f-tx2:#CFC1CA; --f-mut:#A0909B;
  --rose:#F49AB0; --rose-tx:#F7A8BB; --on-rose:#2B0E1A;
  --ok:#3DD68C;
  --f-ui:'Barlow',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-ti:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
  --f-fe:'Jost',system-ui,sans-serif;
  --r:12px; --r-sm:10px; --gut:20px; --max:1180px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
/* univers femme : mêmes jetons, valeurs de la palette « Femme sombre » */
.u-f{--bg:var(--f-bg);--card:var(--f-card);--card2:var(--f-card2);--tx:var(--f-tx);--tx2:var(--f-tx2);--mut:var(--f-mut);
  --ac:var(--rose);--ac-tx:var(--rose-tx);--on-ac:var(--on-rose);--line:rgba(255,235,245,.09);--line2:rgba(255,235,245,.17)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--tx);font:400 1.0625rem/1.55 var(--f-ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--ac-tx);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ac);color:var(--on-ac);padding:10px 16px;border-radius:999px;font-weight:700;text-decoration:none}
.skip:focus{top:10px}
.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico.fill{fill:currentColor;stroke:none}

/* ── En-tête ── */
.hd{position:sticky;top:0;z-index:50;background:rgba(17,17,17,.86);-webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
.hd.is-scrolled{border-bottom-color:var(--line)}
.hd-in{max-width:var(--max);margin:0 auto;height:64px;padding:0 var(--gut);display:flex;align-items:center;gap:16px}
.brand{display:inline-flex;align-items:center;text-decoration:none;flex:none}
.brand img{height:20px;width:auto}
.hd-nav{display:none;margin-left:auto;gap:4px;align-items:center}
.hd-nav a{font-weight:500;font-size:.95rem;color:var(--tx2);text-decoration:none;padding:8px 12px;border-radius:999px;transition:color .2s,background-color .2s}
.hd-nav a:hover{color:var(--tx);background:rgba(255,255,255,.05)}
.hd-cta{margin-left:auto}
.hd-nav + .hd-cta{margin-left:8px}
.burger{width:44px;height:44px;border-radius:999px;border:1px solid var(--line2);background:transparent;display:grid;place-items:center;cursor:pointer;flex:none}
.burger span{display:block;width:16px;height:1.6px;background:var(--tx);border-radius:2px;position:relative;transition:transform .25s var(--ease),background-color .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.6px;background:var(--tx);border-radius:2px;transition:transform .25s var(--ease)}
.burger span::before{top:-5px}.burger span::after{top:5px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg)}
.menu{position:fixed;inset:64px 0 0 0;z-index:49;background:var(--bg);padding:8px var(--gut) 24px;display:grid;align-content:start;gap:2px;overflow-y:auto;overscroll-behavior:contain;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .22s,transform .22s var(--ease),visibility 0s .22s}
.menu.open{opacity:1;transform:none;visibility:visible;transition:opacity .22s,transform .22s var(--ease)}
.menu a{display:flex;align-items:center;justify-content:space-between;min-height:52px;font:700 1.35rem/1 var(--f-ti);text-transform:uppercase;letter-spacing:.02em;text-decoration:none;border-bottom:1px solid var(--line)}
.menu a.sub{font:500 1rem var(--f-ui);text-transform:none;letter-spacing:0;color:var(--tx2);border:0;min-height:44px}
@media (min-width:960px){.hd-nav{display:flex}.burger,.menu{display:none}.hd-in{height:72px}.brand img{height:22px}}

/* ── Boutons pilule ── */
.btn{--h:56px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 28px;border-radius:999px;border:0;cursor:pointer;
  font:700 1.125rem/1 var(--f-ti);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  transition:transform .18s var(--ease),background-color .2s,color .2s,border-color .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.975)}
.btn .ico{width:20px;height:20px;transition:transform .2s var(--ease)}
.btn:hover .ico.arr{transform:translateX(3px)}
.btn-p{background:var(--ac);color:var(--on-ac)}
.btn-p:hover{background:#FF6B35;box-shadow:0 8px 24px -10px rgba(255,90,31,.55)}
.btn-f{background:var(--rose);color:var(--on-rose)}
.btn-f:hover{background:#F7AABD;box-shadow:0 8px 24px -10px rgba(244,154,176,.5)}
.btn-g{background:transparent;color:var(--tx);border:1.5px solid var(--line2)}
.btn-g:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.04)}
.btn-sm{--h:42px;padding:0 18px;font-size:1rem}
.btn-lg{--h:60px;font-size:1.25rem;padding:0 32px}
.btn-block{display:flex;width:100%}
.u-f .btn-p:hover{background:#F7AABD;box-shadow:0 8px 24px -10px rgba(244,154,176,.5)}

/* ── Titres ── */
.kicker{font:600 .8125rem/1.3 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ac-tx)}
.h1,.h2,.h3{font-family:var(--f-ti);font-weight:800;text-transform:uppercase;line-height:.94;letter-spacing:.004em}
.h2{font-size:clamp(2.25rem,7.4vw,3.75rem)}
.h3{font-size:1.5rem;line-height:1}
.lead{color:var(--tx2);font-size:1.0625rem;max-width:38rem}
.ac{color:var(--ac-tx)}

/* ── Pied de page ── */
.ft{border-top:1px solid var(--line);padding:48px var(--gut) calc(28px + env(safe-area-inset-bottom))}
.ft-in{max-width:var(--max);margin:0 auto;display:grid;gap:32px}
.ft p,.ft a{color:var(--tx2);font-size:.95rem}
.ft a{text-decoration:none}
.ft a:hover{color:var(--tx);text-decoration:underline;text-underline-offset:3px}
.ft h2{font:700 .8125rem/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:14px}
.ft ul{display:grid;gap:10px}
.ft-bot{max-width:var(--max);margin:36px auto 0;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--mut);font-size:.875rem}
.ft-bot a{color:var(--tx2);font-size:.875rem}
@media (min-width:760px){.ft-in{grid-template-columns:1.4fr 1fr 1fr}}

/* ── Pages légales ── */
.legal{max-width:44rem;margin:0 auto;padding:40px var(--gut) 72px}
.legal h1{font:800 clamp(2.25rem,8vw,3.25rem)/.95 var(--f-ti);text-transform:uppercase;margin-bottom:12px}
.legal .lead{margin-bottom:28px}
.legal h2{font:700 1.375rem/1.1 var(--f-ti);text-transform:uppercase;letter-spacing:.02em;margin:32px 0 10px;padding-top:20px;border-top:1px solid var(--line)}
.legal p,.legal li{color:var(--tx2);margin-bottom:10px}
.legal ul{list-style:disc;padding-left:1.2rem}
.legal a{color:var(--ac-tx);text-underline-offset:3px}
.legal strong,.legal b{color:var(--tx);font-weight:600}
.legal .note{margin-top:32px;padding:14px 16px;border-left:3px solid var(--ac);background:var(--card);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.95rem;color:var(--tx2)}
.legal .todo{font-size:.95rem;color:var(--mut)}

/* ── Apparition au défilement (uniquement si JS actif) ── */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .rv{opacity:1;transform:none}
}