/* ==============================
   Work4Fun — Clean CSS (2025-10)
   ============================== */

/* ---- Design tokens ---- */
:root{
  --bg:#f6f7fb; --card:#fff; --text:#111827; --muted:#6b7280;
  --primary:#2563eb; --primary-600:#1d4ed8; --ring:rgba(37,99,235,.35);
  --radius:14px; --shadow:0 8px 24px rgba(0,0,0,.06);

  /* Base type (comfortable on phones, modest on desktop) */
  --fs-body: clamp(18px, 4.0vw, 19px);
  --lh-body: 1.7;

  /* Home section backgrounds */
  --bg-what:#f4f4ed;  --bg-wfmr:#fff7ed; --bg-parental:#f6fef7; --bg-wellbeing:#fefaf5; --bg-double:#f5f7ff;

  /* Features section backgrounds */
  --bg-feat-hero:#000; --bg-feat-ftc:#f0fdfa; --bg-feat-stats:#f8fafc; --bg-feat-control:#f6fef7;
  --bg-feat-apps:#fff7ed; --bg-feat-time:#f5f7ff; --bg-feat-params:#f7f7fb;

  /* WFMR */
  --col-work:#10b981; --col-fun:#2563eb; --col-mon:#f59e0b; --col-res:#ef4444;
  --wfmr-logo-h: clamp(18px, 1.8vw, 24px);

  /* Screenshots */
  --shot-min: 180px; --shot-max: 300px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220; --card:#0f172a; --text:#e5e7eb; --muted:#98a2b3;
    --primary:#60a5fa; --primary-600:#3b82f6; --ring:rgba(96,165,250,.45);
    --shadow:0 10px 28px rgba(0,0,0,.35);

    --bg-what:#f4f4ed;  --bg-wfmr:#fff7ed; --bg-parental:#0f1b14; --bg-wellbeing:#1b1510; --bg-double:#141a2b;
    --bg-feat-ftc:#0e1716; --bg-feat-stats:#0e1627; --bg-feat-control:#0f1b14;
    --bg-feat-apps:#20170f; --bg-feat-time:#141a2b; --bg-feat-params:#14151e;
  }
}

/* ---- Base ---- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font: var(--fs-body)/var(--lh-body) ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Slight text scale on iOS (Safari/Firefox iOS share WebKit) */
@supports (-webkit-touch-callout:none){
  html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
}

/* ---- Header (overlay over hero) ---- */
.header.fixed{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:transparent; pointer-events:none;
}
.header.fixed .header-inner{ pointer-events:auto; }

.header.overlay .header-inner{
  max-width:1080px; margin:0 auto; padding:16px 20px;
  padding-top:calc(16px + env(safe-area-inset-top));
  display:flex; align-items:center; gap:18px;
}
.header.overlay .logo{ height:36px; width:auto; }
.header.overlay nav ul{ margin:0; padding:0; list-style:none; display:flex; gap:14px; flex-wrap:wrap; }
.header.overlay nav a{
  display:inline-block; padding:10px 14px; border-radius:10px;
  text-decoration:none; font-weight:600; color:#fff;
  transition:background .15s ease, transform .12s ease;
}
.header.overlay nav a:hover{ background:rgba(255,255,255,.12); transform:translateY(-1px); }
.header.overlay nav a.active{ background:rgba(255,255,255,.18); }

.header.fixed.scrolled{
  background:rgba(17,24,39,.85); backdrop-filter:blur(12px);
  box-shadow:0 2px 12px rgba(0,0,0,.25);
}

/* ---- Main spacing ---- */
main{ padding-top:72px; }
body.home main{ padding-top:0; }
body.features main{ padding-top:0; }  /* hero noir en tête */

/* ---- Hero video (Home) ---- */
.hero-full{
  width:100%; height:100svh; min-height:100vh; margin:0;
  position:relative; display:grid; place-items:center; overflow:hidden; background:#000;
}
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:brightness(.65) saturate(1.05); z-index:0; }
.hero-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.68) 100%); }
.hero-content{ position:relative; z-index:2; text-align:center; color:#fff; padding:clamp(16px,3vw,28px); width:min(92vw,980px); }
.hero-content h1{ margin:0 0 10px; font-size:clamp(36px,7vw,72px); line-height:1.03; letter-spacing:-.02em; }
.hero-content p{ margin:0 auto 18px; max-width:800px; color:#e8ebf1; font-size:clamp(16px,2.6vw,22px); }
.btn-cta{
  display:inline-block; margin-top:6px; padding:12px 18px; border-radius:12px;
  background:var(--primary); color:#fff; font-weight:700; text-decoration:none;
  box-shadow:0 8px 18px rgba(37,99,235,.28);
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.btn-cta:hover{ background:var(--primary-600); transform:translateY(-1px); }

@media (max-width:768px){
  .hero-overlay{ background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.78) 70%, rgba(0,0,0,.88) 100%); }
}

/* ---- Sections ---- */
.section{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px; margin:18px auto; max-width:980px;
}
.wrap{ max-width:1080px; margin:0 auto; }
.slice + .slice{ padding-top:clamp(16px,3vw,24px); }
.section{ scroll-margin-top:90px; }

/* Full-width colored slices on Home & Features */
body.home .section.slice,
body.features .section.slice{
  max-width:none; margin:0; border-radius:0; box-shadow:none; border:0;
  padding: clamp(28px, 6vw, 72px) min(5vw, 48px);
}

/* Home backgrounds */
.bg-what{ background:var(--bg-what); }
.bg-wfmr{ background:var(--bg-wfmr); }
.bg-parental{ background:var(--bg-parental); }
.bg-wellbeing{ background:var(--bg-wellbeing); }
.bg-double{ background:var(--bg-double); }

/* Features backgrounds */
.bg-feat-hero{ background:var(--bg-feat-hero); }
.bg-feat-ftc{ background:var(--bg-feat-ftc); }
.bg-feat-stats{ background:var(--bg-feat-stats); }
.bg-feat-control{ background:var(--bg-feat-control); }
.bg-feat-apps{ background:var(--bg-feat-apps); }
.bg-feat-time{ background:var(--bg-feat-time); }
.bg-feat-params{ background:var(--bg-feat-params); }

/* ---- Columns & text ---- */
.cols{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:18px; }
h2{ font-size:clamp(22px,5.2vw,28px); margin:0 0 12px; }
h3{ font-size:clamp(18px,4.5vw,22px); margin:0 8px 8px 0; }
p{ margin:8px 0 14px; color:var(--muted); }
@media (max-width:768px){ p{ color:var(--text); } } /* stronger contrast on phones */

/* ---- WFMR grid ---- */
.wfmr-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:14px; margin-top:12px; }
.wfmr-card{
  padding:16px 18px; background:var(--card); border-radius:12px; box-shadow:var(--shadow);
  border:1px solid rgba(0,0,0,.08);
}
@media (prefers-color-scheme:dark){ .wfmr-card{ border:1px solid rgba(255,255,255,.08); } }
.wfmr-head{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.badge-logo{ height:var(--wfmr-logo-h); width:auto; display:block; object-fit:contain; }
.wfmr-card.work{ border-left:6px solid var(--col-work); }
.wfmr-card.fun{ border-left:6px solid var(--col-fun); }
.wfmr-card.monitored,.wfmr-card.mixed{ border-left:6px solid var(--col-mon); }
.wfmr-card.restricted{ border-left:6px solid var(--col-res); }

/* ---- Title icons (used in features & stats/control) ---- */
.title-with-icon{ display:flex; align-items:center; gap:10px; margin:0 0 8px; }
.title-icon{ height:22px; width:auto; display:block; object-fit:contain; }
@media (min-width:1200px){ .title-icon{ height:24px; } }

/* ---- Features hero (screenshot phone frame) ---- */
.feature-hero .hero-wrap{ display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; }
.feature-hero .hero-copy{ color:#fff; }
.feature-hero .hero-copy h1{ font-size:clamp(28px,5vw,48px); margin:0 0 8px; }
.feature-hero .hero-copy p{ color:#dbe3ff; max-width:680px; }

.phone-mockup{
  position:relative; overflow:hidden; border:10px solid #111827; border-radius:34px; background:#000;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.phone-mockup::before{
  content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:38%; height:14px; border-radius:0 0 12px 12px; background:#111827;
}
@media (prefers-color-scheme:dark){ .phone-mockup,.phone-mockup::before{ border-color:#e5e7eb; background:#000; } }
.phone-mockup.large{ width:120px; }
@media (max-width:900px){ .feature-hero .hero-wrap{ grid-template-columns:1fr; text-align:center; } .phone-mockup.large{ margin:8px auto 0; } }
@media (max-width:768px){ .phone-mockup.large{ width:100px; } }
.phone-mockup img{ display:block; width:100%; height:auto; object-fit:cover; }

/* ---- Screenshot grids (features) ---- */
.shots-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--shot-min), var(--shot-max)));
  gap:12px; margin-top:10px;
  justify-content:center; justify-items:center;
}
.shot{ width:100%; max-width:var(--shot-max); background:var(--card); border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:8px; box-shadow:var(--shadow); }
@media (prefers-color-scheme:dark){ .shot{ border:1px solid rgba(255,255,255,.08); } }
.shot img{ width:100%; height:auto; display:block; border-radius:8px; }
.shot figcaption{ text-align:center; font-size:12px; color:var(--muted); margin-top:6px; }
@media (max-width:768px){ .shots-grid{ grid-template-columns:1fr; } }

/* ---- Forms & buttons ---- */
form{ display:grid; gap:12px; max-width:560px; }
label{ font-weight:600; }
input,textarea,select{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(0,0,0,.12);
  background:var(--card); color:var(--text); outline:none; transition:box-shadow .12s ease, border-color .12s ease;
  font-size:17px; /* ≥16px to avoid iOS zoom */
}
input:focus,textarea:focus,select:focus{ border-color:var(--primary-600); box-shadow:0 0 0 4px var(--ring); }
textarea{ min-height:140px; resize:vertical; }
button{
  justify-self:start; padding:12px 16px; border:0; border-radius:12px; background:var(--primary);
  color:#fff; font-weight:700; cursor:pointer; transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
  box-shadow:0 8px 18px rgba(37,99,235,.18);
}
button:hover{ background:var(--primary-600); transform:translateY(-1px); }
button:active{ transform:translateY(0); }
button:focus-visible{ outline:0; box-shadow:0 0 0 4px var(--ring); }

/* ---- Footer ---- */
footer{
  max-width:980px; margin:28px auto 34px; padding:0 20px; color:var(--muted);
  display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .hero-bg{ display:none; }
  .hero-full{ background-image:url("media/sablier.jpg"); background-size:cover; background-position:center; }
}

/* =========================
   MOBILE NAV (single source)
   ========================= */
.nav-toggle{ display:none; } /* hidden on desktop */

@media (max-width:768px){
  /* Button (3 bars) */
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    gap:6px; width:44px; height:44px; margin-left:auto;
    border:0; border-radius:10px; background:rgba(0,0,0,.35); color:#fff; z-index:1200;
  }
  .nav-toggle .bar{ width:24px; height:2px; background:#fff; border-radius:2px; display:block; }
  .sr-only{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); }

  /* Container: full screen for click-capture, but TRANSPARENT */
  .header.overlay nav{
    position:fixed; inset:0; z-index:1100;
    padding: calc(12px + env(safe-area-inset-top)) 12px 12px;
    background: transparent; backdrop-filter: none;
    transform: translateY(-100%); transition: transform .2s ease;
  }
  body.menu-open .header.overlay nav{ transform: none; }

  /* The visible "window" = UL */
  .header.overlay nav ul{
    list-style:none; margin:0 auto; padding:14px;
    width:min(92vw, 420px);
    max-height: calc(100vh - 2*24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow:auto;

    display:flex; flex-direction:column; gap:10px;

    background: rgba(17,24,39,.92);
    border-radius:14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
  }

  .header.overlay nav a{
    font-size:18px; padding:14px 12px; color:#fff; text-decoration:none; border-radius:10px;
  }

  /* Prevent scroll behind */
  body.menu-open{ overflow:hidden; }
}

/* =========================
   MOBILE TYPO BOOST (phones)
   ========================= */
@media (max-width:768px){
  :root{ --fs-body: 24px; }   /* bump body font on phones; set 22px if needed */
  body{ line-height: 1.85; }
  h2{ font-size: clamp(26px, 6.5vw, 30px); }
  h3{ font-size: clamp(22px, 5.8vw, 24px); }
  .hero-content p{ font-size: 19px; }
}



/* =========================
   NAV OVERLAY — CLEAN RULES
   ========================= */

/* 0) Desktop par défaut : hamburger caché, menu horizontal normal */
.nav-toggle{ display:none; }

/* 1) État OVERLAY (appliqué à TOUTES tailles quand .menu-open est présent) */
/*    -> pas de voile plein écran, seule la "fenêtre" (le <ul>) a un fond */
body.menu-open .header.overlay nav{
  position: fixed; inset: 0; z-index: 1100;
  padding: calc(12px + env(safe-area-inset-top)) 12px 12px;
  background: transparent;        /* pas de scrim global */
  backdrop-filter: none;
}

/* Fenêtre centrée et semi-transparente */
body.menu-open .header.overlay nav ul{
  list-style:none; margin:0 auto; padding:14px;

  /* largeur de la fenêtre : confortable sur desktop aussi */
  width: min(92vw, 520px);
  max-height: calc(100vh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow:auto;

  display:flex; flex-direction:column; gap:10px;

  background: rgba(17,24,39,.92); /* <- fond de la fenêtre, pas de voile derrière */
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
}

/* Liens dans la fenêtre overlay */
body.menu-open .header.overlay nav a{
  font-size: 18px;
  padding: 14px 12px;
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
}

/* Empêche le scroll de la page quand la fenêtre est ouverte */
body.menu-open{ overflow:hidden; }

/* 2) MOBILE (≤768px) : on affiche le hamburger et on utilise une transition d’entrée */
@media (max-width: 768px){
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    gap:6px; width:44px; height:44px; margin-left:auto;
    border:0; border-radius:10px; background:rgba(0,0,0,.35); color:#fff; z-index:1200;
  }
  .nav-toggle .bar{ width:24px; height:2px; background:#fff; border-radius:2px; display:block; }
  .sr-only{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); }

  /* Conteneur overlay : on le fait glisser depuis le haut sur mobile */
  .header.overlay nav{
    position: fixed; inset: 0; z-index: 1100;
    padding: calc(12px + env(safe-area-inset-top)) 12px 12px;
    background: transparent; backdrop-filter: none;
    transform: translateY(-100%); transition: transform .2s ease;
  }
  body.menu-open .header.overlay nav{ transform: none; }

  /* Fenêtre : un peu plus étroite sur mobile */
  body.menu-open .header.overlay nav ul{
    width: min(92vw, 420px);
  }
}

/* 3) Très grands écrans : fenêtre un peu plus large (optionnel) */
@media (min-width: 1400px){
  body.menu-open .header.overlay nav ul{ width: min(720px, 70vw); }
}


/* ===== DESKTOP: full-width translucent header bar (logo + menu) ===== */
@media (min-width: 768px){
  /* La barre entière (sur toute la largeur) */
  .header.fixed{
    background: rgba(17, 24, 39, .42);   /* semi-transparent */
    backdrop-filter: blur(8px);           /* léger effet glass */
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
  }
  /* Un peu plus opaque une fois scrollé */
  .header.fixed.scrolled{
    background: rgba(17, 24, 39, .82);
  }

  /* IMPORTANT : on retire le fond appliqué au <ul> en desktop
     (si tu as gardé mon ancien patch qui mettait un fond sur le ul) */
  body:not(.menu-open) .header.overlay nav ul{
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important; /* les <a> ont déjà leur padding */
  }
}

/* Mobile typography boost */
@media (max-width: 768px){
  :root{ --fs-body: 21px; }   /* 20–22px selon ton goût */
  body{ line-height: 1.85; }
  h2{ font-size: clamp(26px, 6.5vw, 30px); }
  h3{ font-size: clamp(22px, 5.8vw, 26px); }
}

/* Très petits écrans (iPhone SE, etc.) */
@media (max-width: 380px){
  :root{ --fs-body: 22px; }   /* pousse un peu plus */
}


/* Center a single screenshot figure */
.shot--narrow{
  width: min(100%, 520px);   /* ajuste la largeur max si tu veux */
  margin: 12px auto;         /* ← centre horizontalement */
}
.shot--narrow img{
  display: block;
  margin: 0 auto;            /* centre l’image si plus étroite */
}
.shot--narrow figcaption{
  text-align: center;
}




/* Contact page layout */
.contact-page .wrap{
  max-width: 780px;      /* un peu plus large que les formulaires par défaut */
  margin: 0 auto;
}

.contact-form{
  max-width: 560px;      /* cohérent avec le style global */
  margin: 12px auto 0;   /* centre le formulaire */
  display: grid;
  gap: 12px;
}

/* Notices (success / error) */
.notice{
  margin: 10px 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--text);
}

.notice.success{
  border-left: 6px solid #10b981;   /* green */
}

.notice.error{
  border-left: 6px solid #ef4444;   /* red */
}

.notice ul{ margin: 8px 0 0 18px; }