/* =========================================================================
   FLUVIA — Design system partagé (maquette privée v0)
   Marque = suite logicielle, 6 branches métier. Ruban = fil graphique.
   Wordmark marine #152A52. Baseline "La gestion fluide de vos établissements".
   ========================================================================= */

/* ---------- Tokens ---------- */
:root{
  /* couleurs métier */
  --aqua:#009FB5; --culture:#8053B8; --building:#D87527;
  --ice:#279ACA; --court:#399963; --fitness:#CB3F69;

  /* marque + neutres (biais marine, choisis) */
  --marine:#152A52;
  --ink:#0E1B33;
  --muted:#5A6B85;
  --faint:#8A99B3;
  --line:#E4EAF3;
  --line-soft:#EEF2F8;
  --paper:#F6F8FC;
  --surface:#FFFFFF;
  --surface-2:#FBFCFE;

  /* statut produit */
  --ok:#2E9E6B; --wip:#C8841F; --opt:#3E72C9;

  /* accent par page (par défaut marine) */
  --accent:var(--marine);
  --accent-ink:#FFFFFF;

  /* typo */
  --disp:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:"Figtree", "Segoe UI", system-ui, sans-serif;

  /* rythme */
  --maxw:1180px;
  --gut:clamp(16px,4vw,40px);
  --r-s:10px; --r-m:16px; --r-l:26px; --r-xl:34px;
  --sh-s:0 1px 2px rgba(21,42,82,.06), 0 2px 8px rgba(21,42,82,.05);
  --sh-m:0 10px 30px rgba(21,42,82,.10), 0 2px 8px rgba(21,42,82,.05);
  --sh-l:0 24px 60px rgba(21,42,82,.16), 0 6px 18px rgba(21,42,82,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--body); color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-size:17px; line-height:1.6;
}
h1,h2,h3,h4{font-family:var(--disp); color:var(--marine); line-height:1.08;
  letter-spacing:-.02em; margin:0; text-wrap:balance; font-weight:700}
p{margin:0}
a{color:inherit; text-decoration:none}
img,svg{display:block; max-width:100%}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.eyebrow{font-size:.78rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent)}
.lede{font-size:clamp(1.05rem,1.8vw,1.28rem); color:var(--muted); line-height:1.55}

/* ---------- Boutons ---------- */
.btn{display:inline-flex; align-items:center; gap:.55em; font-family:var(--body);
  font-weight:600; font-size:1rem; border:0; cursor:pointer; border-radius:999px;
  padding:.85em 1.5em; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  line-height:1; white-space:nowrap}
.btn svg{width:1.1em; height:1.1em}
.btn-primary{position:relative; overflow:hidden; color:var(--accent-ink); box-shadow:var(--sh-m);
  background:linear-gradient(120deg,
    color-mix(in srgb,var(--accent) 86%,white 14%),
    var(--accent) 45%,
    color-mix(in srgb,var(--accent) 78%,black 22%));
  background-size:180% 100%; background-position:0% 50%;
  transition:transform .2s ease, box-shadow .2s ease, background-position .5s ease}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--sh-l); background-position:100% 50%}
.btn-primary::after{content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.35) 50%,transparent 80%);
  transform:translateX(-120%); transition:transform .6s ease}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-primary>*{position:relative; z-index:1}
.btn-ghost{background:transparent; color:var(--marine);
  box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--accent); color:var(--accent)}
.btn-light{background:rgba(255,255,255,.14); color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.btn-light:hover{background:rgba(255,255,255,.22)}

/* ---------- Badge maquette ---------- */
.draftflag{position:fixed; z-index:200; top:0; right:0;
  background:repeating-linear-gradient(135deg,#152A52,#152A52 10px,#1d376a 10px,#1d376a 20px);
  color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.4em 3.2em; transform:rotate(45deg) translate(28%,-10%); transform-origin:center;
  box-shadow:0 6px 18px rgba(0,0,0,.2); pointer-events:none}

/* ---------- Header ---------- */
.site-head{position:sticky; top:0; z-index:100; backdrop-filter:saturate(1.3) blur(10px);
  background:rgba(246,248,252,.82); border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s}
.site-head.scrolled{border-color:var(--line); box-shadow:var(--sh-s); background:rgba(255,255,255,.9)}
.nav{display:flex; align-items:center; gap:1.4rem; height:72px}
.nav-links{display:flex; align-items:center; gap:.3rem; margin-left:auto}
.nav-links a, .nav-drop>button{font-family:var(--body); font-weight:500; font-size:.97rem;
  color:var(--marine); background:none; border:0; cursor:pointer; padding:.55em .8em;
  border-radius:999px; display:inline-flex; align-items:center; gap:.4em; transition:background .15s,color .15s}
.nav-links a:hover, .nav-drop>button:hover{background:var(--line-soft); color:var(--accent)}
.nav-drop{position:relative}
.nav-drop .caret{width:.7em; transition:transform .2s}
.nav-drop.open .caret{transform:rotate(180deg)}
.nav-menu{position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(6px);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--sh-l);
  padding:10px; width:320px; opacity:0; visibility:hidden; transition:.2s}
.nav-drop.open .nav-menu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.nav-menu a{display:flex; align-items:center; gap:.8em; padding:.6em .7em; border-radius:10px; font-size:.95rem}
.nav-menu a:hover{background:var(--line-soft)}
.nav-menu .dot{width:26px; height:26px; border-radius:8px; flex:0 0 auto; display:grid; place-items:center}
.nav-menu .dot svg{width:15px; height:15px; color:#fff}
.nav-menu small{display:block; color:var(--faint); font-size:.78rem; font-weight:500}
.lang{display:flex; align-items:center; gap:.2em; font-size:.82rem; font-weight:600; color:var(--muted);
  border-left:1px solid var(--line); padding-left:1rem; margin-left:.4rem}
.lang button{background:none; border:0; cursor:pointer; color:var(--faint); font-weight:600;
  padding:.25em .4em; border-radius:6px; font-size:.82rem}
.lang button.on{color:var(--marine); background:var(--line-soft)}
.nav .btn{padding:.6em 1.15em; font-size:.93rem}
.burger{display:none; margin-left:auto; background:none; border:0; cursor:pointer; padding:.4em}
.burger svg{width:26px; height:26px; color:var(--marine)}

/* ---------- Wordmark / ruban ---------- */
.brand{display:inline-flex; align-items:center; gap:.5em}
.brand-logo{height:30px; width:auto; display:block}
.brand-branch{font-family:var(--disp); font-weight:700; font-size:1.2rem; letter-spacing:-.01em; line-height:1}
.site-foot .brand-logo{filter:brightness(0) invert(1); height:28px; opacity:.95}
@media(max-width:560px){ .brand-logo{height:26px} }
.brand .mark{width:34px; height:34px; flex:0 0 auto}
.brand .word{font-family:var(--disp); font-weight:700; font-size:1.42rem; letter-spacing:.01em;
  color:var(--marine)}
.brand .word b{color:var(--accent); font-weight:700}

/* ---------- Sections génériques ---------- */
section{position:relative}
.sec{padding:clamp(56px,8vw,110px) 0}
.sec-head{max-width:720px; margin-bottom:clamp(28px,4vw,52px)}
.sec-head h2{font-size:clamp(1.9rem,4vw,2.9rem); margin:.5rem 0 .7rem}

/* grille cartes */
.grid{display:grid; gap:20px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:26px; box-shadow:var(--sh-s); transition:transform .2s, box-shadow .2s, border-color .2s}
.card:hover{transform:translateY(-4px); box-shadow:var(--sh-m); border-color:var(--line-soft)}
.card h3{font-size:1.18rem; margin-bottom:.4rem}
.card p{color:var(--muted); font-size:.97rem}
.ico{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin-bottom:16px;
  background:linear-gradient(135deg,#17c7d1 0%,#2f74e6 55%,#7b5cf2 100%)}
.ico svg{width:23px; height:23px; color:#fff}

/* statut */
.chip{display:inline-flex; align-items:center; gap:.4em; font-size:.74rem; font-weight:700;
  letter-spacing:.03em; padding:.3em .7em; border-radius:999px; text-transform:uppercase}
.chip::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.chip.ok{color:var(--ok); background:color-mix(in srgb,var(--ok) 12%,white)}
.chip.wip{color:var(--wip); background:color-mix(in srgb,var(--wip) 13%,white)}
.chip.opt{color:var(--opt); background:color-mix(in srgb,var(--opt) 11%,white)}

/* bandeau honnêteté */
.notice{display:flex; gap:.9em; align-items:flex-start; background:color-mix(in srgb,var(--marine) 5%,white);
  border:1px solid var(--line); border-radius:var(--r-m); padding:16px 20px; color:var(--muted); font-size:.92rem}
.notice svg{width:20px; height:20px; color:var(--marine); flex:0 0 auto; margin-top:2px}
.notice b{color:var(--marine)}

/* ---------- Footer ---------- */
.site-foot{background:var(--marine); color:#cfd8ea; position:relative; overflow:hidden}
.site-foot .ribbon-bg{position:absolute; inset:0; opacity:.5; pointer-events:none}
.foot-grid{position:relative; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px;
  padding:clamp(48px,7vw,84px) 0 32px}
.site-foot .brand .word, .site-foot .brand .word b{color:#fff}
.foot-grid h4{color:#fff; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px}
.foot-grid a{display:block; color:#b7c4dc; padding:.28em 0; font-size:.95rem; transition:color .15s}
.foot-grid a:hover{color:#fff}
.foot-note{color:#9fb0cf; font-size:.92rem; max-width:34ch; margin-top:14px; line-height:1.55}
.foot-bottom{position:relative; border-top:1px solid rgba(255,255,255,.12); padding:20px 0;
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; color:#9fb0cf; font-size:.85rem}

/* ---------- Mobile nav ---------- */
.m-nav{position:fixed; inset:0; z-index:150; background:var(--surface); transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; padding:20px var(--gut);
  overflow:auto}
.m-nav.open{transform:none}
.m-nav .m-top{display:flex; align-items:center; justify-content:space-between; height:52px}
.m-nav .m-close{background:none; border:0; cursor:pointer}
.m-nav .m-close svg{width:28px; height:28px; color:var(--marine)}
.m-nav a{font-family:var(--disp); font-weight:600; font-size:1.25rem; color:var(--marine);
  padding:.7em 0; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; gap:.6em}
.m-nav .m-sub a{font-size:1rem; font-family:var(--body); font-weight:500; padding-left:1.4em}
.m-nav .btn{margin-top:22px; justify-content:center}

/* ---------- util ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
.center{text-align:center}
.mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:42px}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .nav-links,.lang{display:none}
  .nav .btn.desk{display:none}
  .burger{display:inline-flex}
  .g-3{grid-template-columns:1fr}
  .g-2{grid-template-columns:1fr}
}
@media(max-width:560px){
  body{font-size:16px}
  .g-4{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
}

/* ============ THÈME SOMBRE (via toggle — clair par défaut) ============ */
:root[data-theme="dark"]{
  --marine:#e4edfb;                 /* texte titres/marque -> clair */
  --ink:#d8e3f2; --muted:#9fb2cd; --faint:#7389a4;
  --paper:#0a1322; --surface:#111f37; --surface-2:#0e1b30;
  --line:#243653; --line-soft:#1a2740;
  --sh-s:0 1px 2px rgba(0,0,0,.45);
  --sh-m:0 12px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
  --sh-l:0 26px 64px rgba(0,0,0,.6), 0 6px 18px rgba(0,0,0,.45);
}
:root[data-theme="dark"] .site-head{background:rgba(10,19,34,.82)}
:root[data-theme="dark"] .site-head .brand-logo{filter:brightness(0) invert(1)}
:root[data-theme="dark"] .site-head.scrolled{background:rgba(10,19,34,.95); border-color:var(--line)}
:root[data-theme="dark"] .site-foot{background:#0b1830}
:root[data-theme="dark"] .notice{background:#13223c}
:root[data-theme="dark"] .ico{background:linear-gradient(135deg,#17c7d1 0%,#2f74e6 55%,#7b5cf2 100%)}
:root[data-theme="dark"] .notice svg{color:var(--marine)}
:root[data-theme="dark"] .nav-menu{box-shadow:0 20px 60px rgba(0,0,0,.6)}

/* bouton toggle thème */
.theme-tog{background:none; border:0; cursor:pointer; color:var(--marine);
  padding:.45em; border-radius:999px; display:inline-flex; align-items:center;
  margin-left:.2rem; transition:background .15s, color .15s}
.theme-tog:hover{background:var(--line-soft); color:var(--accent)}
.theme-tog svg{width:20px; height:20px}
.theme-tog .moon{display:none}
:root[data-theme="dark"] .theme-tog .sun{display:none}
:root[data-theme="dark"] .theme-tog .moon{display:inline-flex}
.m-nav .theme-tog{margin:18px 0 0; font-family:var(--body); font-weight:500; font-size:1rem; color:var(--marine); gap:.5em}
.m-nav .theme-tog::after{content:"Thème sombre"}
:root[data-theme="dark"] .m-nav .theme-tog::after{content:"Thème clair"}

/* liven-icons */
.ico svg,.fcard .ico svg,.afeat .ico svg,.pp-body .ico svg{color:#fff}

/* === Correctif mode sombre : surfaces claires codées en dur === */
:root[data-theme="dark"]{ --bld-paper:#0b1526; --bld-line:#223450; --fit-paper:#0b1526; }
:root[data-theme="dark"] .fcard,
:root[data-theme="dark"] .pm-step,
:root[data-theme="dark"] .matrix-wrap,
:root[data-theme="dark"] .bgrid,
:root[data-theme="dark"] .logline{ background:var(--surface); border-color:var(--line); box-shadow:var(--sh-s) }
:root[data-theme="dark"] .matrix-head{ background:#16243f; border-color:var(--line) }