/* ============================================
   ProLuTimer v2 — aligné sur la DA du site ProLudiQ
   ============================================ */

:root{
  /* Thème sombre — charte graphique ProLudiQ (identique au site) */
  --bg:#0c121f;            /* Bleu profond */
  --bg-soft:#172a47;
  --card:#14223c;          /* Navy — cartes */
  --text:#ffffff;
  --muted:#9aa9c2;
  --primary:#2b57a3;       /* Bleu électrique */
  --primary-2:#51b68f;     /* Pistache */
  --vermillon:#ea4f38;
  --pill:rgba(23,55,94,.6);
  --border:rgba(255,255,255,.12);
  --shadow:0 8px 30px rgba(0,0,0,.45);
  --radius:18px;
  --gradient:linear-gradient(90deg,#2b57a3 0%, #51b68f 55%, #ea4f38 100%);

  --header-h:72px;
  --footer-h:44px;
}
[data-theme="light"]{
  --bg:#fdf6e8;            /* Coquille d'œuf */
  --bg-soft:#f7eed9;
  --card:#ffffff;
  --text:#0c121f;
  --muted:#4f5a6e;
  --pill:#ffffffd9;
  --border:rgba(12,18,31,.1);
  --shadow:0 8px 24px rgba(12,18,31,.12);
  --gradient:linear-gradient(90deg,#0c121f 0%, #2b57a3 38%, #51b68f 70%, #ea4f38 100%);
}

/* ==== Reset & base ==== */
*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  background:var(--bg); color:var(--text);
  transition:background .3s ease,color .3s ease;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
button,input,select,textarea{font-family:inherit}

/* ==== Header (style « verre » comme le site) ==== */
.site-header{
  position:fixed; top:10px; left:50%; transform:translateX(-50%);
  width:min(1120px,94%);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; z-index:10;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(8px);
  box-shadow:0 8px 28px rgba(0,0,0,.25), inset 0 0 0 1px var(--border);
}
[data-theme="light"] .site-header{ background:rgba(255,255,255,.85) }
.brand .logo{height:40px; display:block}
.nav-links{display:flex; align-items:center; gap:8px; flex-wrap:nowrap}
.nav-links a{
  position:relative;
  text-decoration:none; font-weight:600; font-size:.95rem; color:var(--text);
  padding:8px 14px; border-radius:8px; white-space:nowrap;
  transition:background .16s ease, transform .16s ease;
}
.nav-links a:hover{ background:var(--pill); transform:translateY(-1px) }
.nav-links a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:5px; height:2px;
  background:var(--primary); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.nav-links a:hover::after{ transform:scaleX(1) }
[data-theme="light"] .nav-links a{ color:var(--text) }
.only-desktop{display:inline}
.toggle-theme{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:36px;border-radius:10px;border:1px solid var(--border);cursor:pointer;
  background:var(--pill);color:inherit;
  transition:transform .16s ease;
}
.toggle-theme:hover{ transform:translateY(-1px) }
.toggle-theme svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;display:none}
#moon{fill:currentColor;stroke:none}
[data-theme="dark"] #moon{display:block}
[data-theme="light"] #sun{display:block}

/* ==== Bouton flottant Règles ==== */
.rules-floating{
  position:fixed; right:14px; bottom:14px; z-index:20;
  text-decoration:none; font-weight:700; padding:10px 14px;
  border-radius:12px; background:var(--pill); color:var(--text);
  border:1px solid var(--border);
  backdrop-filter:blur(6px);
  transition:transform .16s ease;
}
.rules-floating:hover{ transform:translateY(-2px) }

/* ==== Layout principal ==== */
.container{
  min-height:100dvh;
  padding:calc(var(--header-h) + 24px) 16px calc(var(--footer-h) + 16px);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:16px;
}
@supports not (height: 100dvh){
  .container{ min-height:calc(var(--app-vh, 1vh) * 100); }
}
.timer-wrap{position:relative; width:min(92vw, 720px); z-index:2}

/* Confettis : SOUS la carte du timer (z-index 1) -> ils jaillissent
   de derrière le cadran et émergent par ses bords, jamais devant. */
#confetti{
  position:fixed; inset:0; width:100vw; height:100dvh;
  pointer-events:none; z-index:1;
}

/* ==== Carte du timer (même style que les cartes du site) ==== */
.timer-card{
  width:100%; max-width:720px; min-width:290px;
  display:flex; flex-direction:column; align-items:center;
  gap:16px; padding:30px 22px; border-radius:26px;
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  animation:card-in .7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes card-in{ from{ opacity:0; transform:translateY(26px) scale(.97) } }

.time{
  font-weight:800; letter-spacing:1px;
  font-size:clamp(54px, 11vw, 140px);
  line-height:1; text-align:center;
  font-variant-numeric:tabular-nums;
  transition:color .3s ease;
}
/* Sprint final : pulsation rouge réaliste (cœur qui bat) */
.time.is-danger{
  color:var(--vermillon);
  animation:heartbeat 1s ease-in-out infinite;
}
@keyframes heartbeat{
  0%,100%{ transform:scale(1) }
  14%{ transform:scale(1.06) }
  28%{ transform:scale(1) }
  42%{ transform:scale(1.04) }
  56%{ transform:scale(1) }
}
/* Fin : flash + tremblement */
.timer-card.is-finished{ animation:finish-shake .5s ease }
@keyframes finish-shake{
  0%,100%{ transform:translateX(0) }
  20%{ transform:translateX(-7px) rotate(-.6deg) }
  40%{ transform:translateX(6px) rotate(.5deg) }
  60%{ transform:translateX(-4px) }
  80%{ transform:translateX(3px) }
}
.flash{
  position:fixed; inset:0; z-index:49; pointer-events:none;
  background:#fff; opacity:0;
}
.flash.go{ animation:flash-out .5s ease }
@keyframes flash-out{ 0%{opacity:.75} 100%{opacity:0} }

/* ==== Boutons (repris du site : dégradé + reflet) ==== */
.controls{display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center}
.btn{
  position:relative; overflow:hidden;
  font-weight:700; font-size:15px; letter-spacing:.2px;
  padding:12px 18px; border-radius:12px; border:0; cursor:pointer;
  color:var(--text); background:var(--pill);
  border:1px solid var(--border);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn::after{
  content:""; position:absolute; top:0; bottom:0; left:-130%; width:55%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg); transition:left .55s ease; pointer-events:none;
}
.btn:hover::after{ left:150% }
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.25) }
.btn:active{ transform:translateY(0) scale(.98) }
.btn.primary{
  background:linear-gradient(90deg, var(--primary), var(--primary-2));
  color:#fff; border:0;
}
.btn.ghost{ background:transparent; border:1px solid var(--border) }
[data-theme="light"] .btn.ghost{ color:var(--primary); border-color:rgba(43,87,163,.4) }

/* ==== Tagline (dégradé de la charte, comme le site) ==== */
.tagline{
  font-weight:700; text-align:center; max-width:900px; margin:0;
  background:var(--gradient);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ==== Durées rapides ==== */
.quick-times{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.quick-times.under-tagline{margin-top:4px}
.qt{
  font-weight:700; padding:11px 18px; border-radius:12px; border:1px solid var(--border);
  cursor:pointer; color:var(--text); background:var(--pill);
  transition:transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.qt:hover{ transform:translateY(-2px) }
.qt.is-selected{
  background:linear-gradient(90deg, var(--primary), var(--primary-2)) border-box;
  color:#fff; border:1px solid transparent;
  box-shadow:0 8px 20px rgba(43,87,163,.35);
}

/* ==== Footer ==== */
.site-footer{
  position:fixed; bottom:10px; left:0; right:0;
  display:flex; justify-content:center;
  pointer-events:none; opacity:.7; font-weight:600; color:var(--muted);
}

/* ==== Help modal (ouverture « wow ») ==== */
.help-btn{
  position:fixed; right:14px; bottom:66px; width:48px; height:48px;
  border-radius:50%; border:0; cursor:pointer; font-weight:900; font-size:20px;
  color:#fff; z-index:19; box-shadow:0 12px 28px rgba(0,0,0,.35);
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  transition:transform .3s cubic-bezier(.3,1.6,.4,1);
}
.help-btn:hover{ transform:rotate(360deg) scale(1.12) }
.help-modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); z-index:60}
.help-modal.open{display:flex; animation:help-bg .25s ease both}
@keyframes help-bg{ from{ opacity:0 } }
.help-content{
  border-radius:18px; padding:24px 22px; width:min(92vw,520px);
  background:var(--card); color:var(--text);
  border:1px solid var(--border); box-shadow:var(--shadow);
}
.help-modal.open .help-content{
  animation:help-pop .5s cubic-bezier(.25,1.6,.35,1) both;
}
@keyframes help-pop{
  0%{ opacity:0; transform:scale(.4) rotate(-8deg) translateY(40px) }
  60%{ opacity:1; transform:scale(1.05) rotate(1.5deg) }
  100%{ transform:scale(1) rotate(0) }
}
.help-modal.open .help-content li{
  animation:help-li .4s ease both;
}
.help-modal.open .help-content li:nth-child(1){ animation-delay:.18s }
.help-modal.open .help-content li:nth-child(2){ animation-delay:.28s }
.help-modal.open .help-content li:nth-child(3){ animation-delay:.38s }
@keyframes help-li{ from{ opacity:0; transform:translateX(-14px) } }
.help-content h2{ margin:0 0 12px; font-weight:800; font-size:22px; color:var(--primary) }
.help-content ul{ margin:0 0 12px 22px; line-height:1.9; font-weight:600 }

/* ==== Intro « chronomètre » (1re visite) + transitions de page ==== */
.t-intro{
  position:fixed; inset:0; z-index:100; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
}
.t-intro__watch{ width:130px; height:130px }
.t-intro__ring{
  fill:none; stroke:var(--primary); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:326.7; stroke-dashoffset:326.7;
  transform:rotate(-90deg); transform-origin:center;
  animation:ring-draw 1.15s cubic-bezier(.5,0,.2,1) .15s forwards;
}
@keyframes ring-draw{ to{ stroke-dashoffset:0 } }
.t-intro__hand{
  stroke:var(--vermillon); stroke-width:5; stroke-linecap:round;
  transform-origin:60px 60px;
  animation:hand-sweep 1.15s cubic-bezier(.5,0,.2,1) .15s forwards;
}
@keyframes hand-sweep{ from{ transform:rotate(0) } to{ transform:rotate(360deg) } }
.t-intro__dot{ fill:var(--text) }
.t-intro__logo{ height:44px; opacity:0; animation:intro-fade .4s ease 1.05s forwards }
.t-intro__tag{
  font-weight:700; color:var(--muted); opacity:0; font-size:14px;
  animation:intro-fade .4s ease 1.2s forwards;
}
@keyframes intro-fade{ to{ opacity:1 } }
.t-intro.done{ animation:intro-up .6s cubic-bezier(.76,0,.24,1) forwards }
@keyframes intro-up{ to{ transform:translateY(-101%) } }

/* Voile de sortie / d'arrivée entre pages (balayage d'aiguille) */
@property --sweep{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
.t-veil{
  position:fixed; inset:0; z-index:99; pointer-events:none;
  background:conic-gradient(var(--bg) var(--sweep), transparent var(--sweep));
  opacity:0;
}
.t-veil.out{ opacity:1; animation:veil-sweep .42s cubic-bezier(.6,0,.4,1) forwards }
@keyframes veil-sweep{ from{ --sweep:0deg } to{ --sweep:360deg } }
.t-veil.in{ opacity:1; background:var(--bg); animation:veil-fade .45s ease .05s forwards }
@keyframes veil-fade{ to{ opacity:0 } }

@media (prefers-reduced-motion: reduce){
  .t-intro,.t-veil{ display:none !important }
  .help-modal.open .help-content,.help-modal.open .help-content li{ animation:none }
}

/* ==== MOBILE (<=640px) ==== */
@media (max-width:640px){
  :root{ --footer-h:64px }
  .site-header{ top:8px; padding:8px 12px }
  .brand .logo{height:34px}
  .nav-links{gap:6px}
  .nav-links a{font-size:14px; padding:6px 10px}
  .only-desktop{display:none}

  .container{
    justify-content:center;
    padding:calc(var(--header-h) + 16px) 12px calc(var(--footer-h) + 40px);
  }

  .timer-wrap{width:100%}
  .timer-card{max-width:620px; margin:0 auto; padding:22px 16px; gap:12px}
  .time{font-size:clamp(56px, 20vw, 112px)}

  .controls{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:"start stop" "reset reset";
    gap:12px; width:100%; max-width:560px;
  }
  .controls .ctrl-start{grid-area:start}
  .controls .ctrl-stop{grid-area:stop}
  .controls .ctrl-reset{grid-area:reset; width:100%}

  .btn{font-size:16px; padding:12px 14px}
  .quick-times{gap:8px}
  .quick-times .qt{flex:1; min-width:84px; font-size:14px; padding:8px 10px}
  .rules-floating{right:12px; bottom:16px}
  .help-btn{display:none}
  .tagline{font-size:14px; padding:0 6px}
  .site-footer{display:none}
}
@media (max-width:360px){
  .time{font-size:clamp(48px, 18vw, 96px)}
  .btn{min-width:88px; font-size:14px; padding:10px 12px}
  .quick-times .qt{min-width:72px}
}

/* ==== Pages À propos / Règles ==== */
.apropos{ max-width:950px; margin:120px auto 80px; padding:0 20px }
.apropos h1{
  font-weight:800; margin-bottom:22px; font-size:2rem;
  background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.apropos-card,.rules-card{
  border-radius:20px; padding:24px 22px; margin-bottom:24px; line-height:1.7;
  background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow);
}
.apropos-card h2,.rules-card h2{ font-size:1.3rem; margin-bottom:12px; font-weight:700; color:var(--primary) }
.apropos-card ul{ padding-left:20px; margin:0 }
.apropos-card ul li{ margin-bottom:8px }
.contact-card .contacts{ display:flex; flex-wrap:wrap; gap:40px; margin-top:12px }
.contact-card h3{ margin-bottom:6px; font-weight:700 }
.contact-card a{ color:var(--primary); text-decoration:none; font-weight:600 }
.contact-card a:hover{ text-decoration:underline }
.muted{ color:var(--muted) }

/* ==== Animations réduites ==== */
@media (prefers-reduced-motion: reduce){
  .timer-card{ animation:none }
  .time.is-danger{ animation:none }
  .btn::after{ display:none }
}