:root{--bg:#070b18;--card:rgba(17,25,54,.78);--pn:#050916;--tx:#dde6f7;--mu:#93a4cc;--cy:#4fd1e8;--mg:#d46ad0;--bl:#4d7cff;--gn:#4ade80;--rd:#f2677f;--am:#f5b049;--ink:#04101f;--hi:#f1f2f6;--nav:rgba(8,13,32,.9);--bd:color-mix(in srgb,var(--bl) 28%,transparent);--warn:var(--am);--air:var(--cy);color-scheme:dark}
/* ===== THÈMES (neon = défaut ci-dessus) : modifie les couleurs ici ===== */
:root[data-theme=sunset]{--bg:#1b0a12;--card:rgba(48,18,32,.78);--pn:#14060d;--tx:#fff1e8;--mu:#d7a99a;--cy:#ffb347;--mg:#ff3d81;--bl:#ff7a3d;--gn:#7dff9b;--rd:#ff5a5f;--am:#ffd166;--ink:#2a0d05;--hi:#f1f2f6;--nav:rgba(30,10,18,.9);color-scheme:dark}
:root[data-theme=noir]{--bg:#000;--card:rgba(14,14,18,.9);--pn:#000;--tx:#d8dbe2;--mu:#8e94a3;--cy:#7aa7ff;--mg:#b794f6;--bl:#5b8def;--gn:#4ade80;--rd:#f87171;--am:#fbbf24;--ink:#05070d;--hi:#f2f4f8;--nav:#09090c;color-scheme:dark}
:root[data-theme=lagon]{--bg:#eefaf6;--card:rgba(255,255,255,.82);--pn:#ffffff;--tx:#0c2b2e;--mu:#4a6b6e;--cy:#00857a;--mg:#d9480f;--bl:#1f7ae0;--gn:#0f8f4a;--rd:#d6285a;--am:#b86e00;--ink:#ffffff;--hi:#08262a;--nav:rgba(255,255,255,.92);color-scheme:light}
:root[data-theme=foret]{--bg:#06140e;--card:rgba(12,40,28,.78);--pn:#040d09;--tx:#e8fff1;--mu:#8fbfa4;--cy:#7dff6b;--mg:#ffd23f;--bl:#2fd0a0;--gn:#39ff88;--rd:#ff6b6b;--am:#ffb02e;--ink:#04140a;--hi:#f1f2f6;--nav:rgba(5,22,15,.9);color-scheme:dark}
:root[data-theme=royal]{--bg:#0c0720;--card:rgba(34,20,70,.78);--pn:#070414;--tx:#f1eaff;--mu:#b5a3dc;--cy:#c9a4ff;--mg:#ffcf5a;--bl:#7c5cff;--gn:#5dffb0;--rd:#ff5d8f;--am:#ffb02e;--ink:#12062b;--hi:#f1f2f6;--nav:rgba(16,9,40,.9);color-scheme:dark}
:root[data-theme=lagon] *{text-shadow:none!important}:root[data-theme=lagon] .clk::after{display:none}
body{transition:background-color .4s}
.thb{margin-left:auto;min-width:46px;min-height:46px;border-radius:50%;border:1.5px solid var(--cy);background:color-mix(in srgb,var(--cy) 8%,transparent);color:var(--cy);font-size:1.3rem;cursor:pointer;box-shadow:0 0 10px color-mix(in srgb,var(--cy) 45%,transparent);transition:transform .3s}
.thb:active{transform:rotate(90deg) scale(.9)}
body{background:radial-gradient(1100px 560px at 8% -10%,color-mix(in srgb,var(--bl) 30%,transparent),transparent 60%),radial-gradient(900px 520px at 105% 0,color-mix(in srgb,var(--mg) 20%,transparent),transparent 55%),var(--bg);background-attachment:fixed;color:var(--tx);min-height:100vh;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding-bottom:calc(104px + env(safe-area-inset-bottom,0px));padding-top:env(safe-area-inset-top,0px)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(color-mix(in srgb,var(--bl) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--bl) 7%,transparent) 1px,transparent 1px);background-size:44px 44px;animation:grid 14s linear infinite;-webkit-mask-image:linear-gradient(#000,transparent 85%);mask-image:linear-gradient(#000,transparent 85%)}
.wrap{max-width:780px;margin:auto;padding:12px 14px}
h1{font-size:1.35rem;margin:.4rem 0 .8rem;font-weight:800;background:linear-gradient(90deg,var(--cy),var(--mg));-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:1.08rem;margin:0 0 .6rem;font-weight:700}
/* marque */
.brand{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.brand b{display:block;font-size:1.3rem;letter-spacing:.04em;color:var(--hi);text-shadow:0 0 10px var(--cy),0 0 24px var(--bl)}
.brand small{color:var(--mu);letter-spacing:.12em;text-transform:uppercase;font-size:0.78rem}
.logo{font-size:1.9rem;filter:drop-shadow(0 0 8px var(--cy));animation:float 3s ease-in-out infinite}
/* horloges */
.clocks{display:grid;gap:10px;grid-template-columns:1fr;margin-bottom:16px}
@media(min-width:640px){.clocks{grid-template-columns:1fr auto 1fr;align-items:center}}
.clk{--c:var(--cy);position:relative;overflow:hidden;text-align:center;padding:14px 12px 12px;border-radius:22px;background:var(--card);border:1.5px solid var(--c);box-shadow:0 0 22px -3px var(--c),inset 0 0 34px -20px var(--c);animation:rise .6s both}
.clk.cn{--c:var(--mg)}
.clk::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);animation:sweep 5s linear infinite}
.clk .lbl{font-weight:800;letter-spacing:.2em;font-size:0.90rem;color:var(--c);text-shadow:0 0 8px var(--c)}
.clk .sub{font-size:0.80rem;color:var(--mu);margin-bottom:2px}
.clk .time{font:800 clamp(2.5rem,12.5vw,4.2rem)/1.05 ui-monospace,"Cascadia Mono",Consolas,monospace;font-variant-numeric:tabular-nums;color:var(--hi);text-shadow:0 0 6px var(--c),0 0 18px var(--c),0 0 40px var(--c);animation:glow 3s ease-in-out infinite alternate}
.clk .time i{font-style:normal;animation:blink 1s steps(2,start) infinite}
.clk .date{font-weight:700;font-size:clamp(1rem,4.2vw,1.2rem);text-transform:capitalize;margin-top:2px}
.clk .dn{display:inline-block;margin-top:6px;padding:2px 12px;border-radius:99px;font-size:0.88rem;border:1px solid var(--c);color:var(--c)}
.gap{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;color:var(--mu);font-size:0.88rem}
.gap b{display:inline-block;padding:8px 14px;border-radius:99px;font-size:1.15rem;color:var(--ink);background:linear-gradient(90deg,var(--cy),var(--mg));box-shadow:0 0 14px var(--cy),0 0 30px var(--mg);animation:pulse 2s ease-in-out infinite}
@media(min-width:640px){.gap{flex-direction:column;max-width:96px;text-align:center}}
/* cartes */
.card{background:var(--card);border:1px solid var(--bd);border-radius:20px;padding:16px;margin-bottom:14px;color:var(--tx);backdrop-filter:blur(6px);box-shadow:0 0 18px -8px var(--bl);animation:rise .5s both}
.card.glow{border-color:var(--gn);box-shadow:0 0 24px -4px var(--gn),inset 0 0 30px -22px var(--gn)}
label{display:block;font-size:0.93rem;color:var(--mu);margin:.7rem 0 .3rem}
.mu{color:var(--mu);font-size:0.90rem}.warn{color:var(--am);font-size:1.00rem}
.form-control,.form-select{min-height:50px;border-radius:14px;background:color-mix(in srgb,var(--pn) 80%,transparent);border:1px solid var(--bd);color:var(--hi)}
.form-control:focus{border-color:var(--cy);box-shadow:0 0 0 .2rem color-mix(in srgb,var(--cy) 25%,transparent),0 0 16px color-mix(in srgb,var(--cy) 40%,transparent);background:color-mix(in srgb,var(--pn) 90%,transparent);color:var(--hi)}
pre{white-space:pre-wrap;word-break:break-word;margin:0 0 10px;font:.88rem/1.45 ui-monospace,Consolas,monospace;color:var(--cy);text-shadow:0 0 6px color-mix(in srgb,var(--cy) 50%,transparent)}
.alert{border-radius:16px;background:color-mix(in srgb,var(--pn) 70%,transparent);border:1.5px solid;color:var(--tx)}
.alert-danger{border-color:var(--rd);box-shadow:0 0 18px -4px var(--rd)}.alert-warning{border-color:var(--am);box-shadow:0 0 18px -4px var(--am)}
/* boutons néon */
.btn{position:relative;min-height:50px;border-radius:14px;font-weight:700;letter-spacing:.02em;transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.btn:active{transform:scale(.97)}
.btn-primary{color:var(--ink);border:0;background:linear-gradient(90deg,var(--cy),var(--bl),var(--mg),var(--cy));background-size:300% 100%;box-shadow:0 0 12px color-mix(in srgb,var(--cy) 70%,transparent),0 0 28px color-mix(in srgb,var(--bl) 50%,transparent);animation:flow 5s linear infinite,pulse 2.6s ease-in-out infinite}
.btn-primary:hover{color:var(--ink);transform:translateY(-2px) scale(1.02)}
.btn-outline-primary{color:var(--cy);background:color-mix(in srgb,var(--cy) 5%,transparent);border:1.5px solid var(--cy);box-shadow:0 0 8px color-mix(in srgb,var(--cy) 40%,transparent),inset 0 0 10px color-mix(in srgb,var(--cy) 12%,transparent)}
.btn-outline-primary:hover,.btn-check:checked+.btn-outline-primary,.btn-check:active+.btn-outline-primary{color:var(--ink);background:var(--cy);border-color:var(--cy);box-shadow:0 0 18px var(--cy),0 0 40px color-mix(in srgb,var(--cy) 55%,transparent);transform:translateY(-1px)}
.btn-check:checked+.btn-outline-primary{animation:pop .35s}
.btn-check:focus-visible+.btn,.btn:focus-visible{outline:2px solid var(--hi);outline-offset:2px}
.btn-check:disabled+.btn{opacity:.4;filter:grayscale(.6);box-shadow:none}
.chip{margin:0 .4rem .55rem 0;white-space:normal;text-align:left;padding:.55rem .9rem}
.svc{display:block;width:100%;text-align:left;white-space:normal;margin-bottom:.6rem;padding:.7rem 1rem}
.svc b{font-size:1.05rem}.svc .small{opacity:.9}
.btn-check:checked+.svc .text-danger,.btn-check:checked+.svc .warn,.btn-check:checked+.svc .text-success{color:var(--ink)!important}
/* tuiles de dates */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.tiles.hero{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.tile{--c:var(--bl);text-align:center;padding:12px 8px 10px;border-radius:18px;background:color-mix(in srgb,var(--pn) 70%,transparent);border:1.5px solid var(--c);box-shadow:0 0 18px -4px var(--c),inset 0 0 24px -18px var(--c);animation:rise .6s both;animation-delay:calc(var(--i,0)*.12s)}
.t-cy{--c:var(--cy)}.t-mg{--c:var(--mg)}.t-gn{--c:var(--gn)}.t-am{--c:var(--am)}.t-rd{--c:var(--rd)}
.tl-l{font-size:0.80rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mu);min-height:2.2em}
.tl-w{font-weight:800;text-transform:capitalize;color:var(--c);font-size:1.05rem;text-shadow:0 0 8px var(--c)}
.tl-d{font:800 clamp(3rem,14vw,4.4rem)/1 ui-monospace,Consolas,monospace;color:var(--hi);text-shadow:0 0 8px var(--c),0 0 24px var(--c);animation:glow 3s ease-in-out infinite alternate}
.tl-m{font-weight:700;text-transform:capitalize}
.tl-h{margin-top:8px;padding-top:8px;border-top:1px dashed var(--bd);font-size:0.98rem;line-height:1.6}.tl-h b{font:800 1.3rem ui-monospace,Consolas,monospace;color:var(--hi);text-shadow:0 0 10px var(--c)}
/* navigation */
nav{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom,0px));width:min(600px,calc(100% - 20px));display:flex;z-index:10;border-radius:22px;background:var(--nav);backdrop-filter:blur(12px);border:1px solid var(--bd);box-shadow:0 0 26px color-mix(in srgb,var(--bl) 40%,transparent)}
nav button{flex:1;background:none;border:0;color:var(--mu);font-size:0.84rem;min-height:60px;border-radius:22px;transition:color .2s,text-shadow .2s}
nav button.on{color:var(--cy);text-shadow:0 0 10px var(--cy);font-weight:700;background:radial-gradient(60px 40px at 50% 100%,color-mix(in srgb,var(--cy) 25%,transparent),transparent)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes blink{50%{opacity:.15}}
@keyframes glow{from{text-shadow:0 0 5px var(--c),0 0 14px var(--c)}to{text-shadow:0 0 8px var(--c),0 0 26px var(--c),0 0 48px var(--c)}}
@keyframes pulse{50%{box-shadow:0 0 20px color-mix(in srgb,var(--cy) 95%,transparent),0 0 46px color-mix(in srgb,var(--mg) 60%,transparent)}}
@keyframes flow{to{background-position:300% 0}}
@keyframes sweep{to{left:130%}}
@keyframes grid{to{background-position:44px 44px}}
@keyframes float{50%{transform:translateY(-4px)}}
@keyframes pop{50%{transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ===== Lisibilité : texte plus grand, néon adouci ===== */
html{font-size:112.5%}
body{line-height:1.55;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
body::before{opacity:.4}
.ic{width:1.2em;height:1.2em;vertical-align:-.24em;margin-right:.3em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.im{object-fit:contain}
.num{display:inline-grid;place-items:center;width:1.55em;height:1.55em;border-radius:50%;background:var(--c,var(--cy));color:var(--ink);font-size:.82em;margin-right:.3em}
.sw{display:inline-block;width:1.05em;height:1.05em;border-radius:50%;background:linear-gradient(135deg,var(--a),var(--b));vertical-align:-.18em;margin-right:.4em;border:1px solid rgba(255,255,255,.35)}
@keyframes glow{from{text-shadow:0 0 3px color-mix(in srgb,var(--c,var(--cy)) 40%,transparent)}to{text-shadow:0 0 9px color-mix(in srgb,var(--c,var(--cy)) 40%,transparent)}}
@keyframes pulse{50%{box-shadow:0 0 14px color-mix(in srgb,var(--cy) 40%,transparent)}}
.brand b,.tl-w,.tl-h b,.clk .lbl,pre{text-shadow:none}
.clk,.tile{box-shadow:0 0 14px -8px var(--c)}
.card.glow{box-shadow:0 0 16px -8px var(--gn)}
.btn-outline-primary{border-width:1px;box-shadow:none;background:color-mix(in srgb,var(--cy) 6%,transparent)}
.btn-outline-primary:hover,.btn-check:checked+.btn-outline-primary,.btn-check:active+.btn-outline-primary{box-shadow:0 2px 10px -2px color-mix(in srgb,var(--cy) 45%,transparent)}
.btn-primary{box-shadow:0 2px 12px -2px color-mix(in srgb,var(--cy) 40%,transparent)}
.logo{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--cy),var(--bl));color:var(--ink);filter:none;animation:none;font-size:1rem}
.logo .ic{width:26px;height:26px;margin:0}
:root[data-theme=noir] body{background:#000}
:root[data-theme=noir] body::before{display:none}
:root[data-theme=noir] *{text-shadow:none!important}
:root[data-theme=noir] :is(.card,.clk,.tile,.card.glow){box-shadow:none}
/* ===== Menu du bas (style barre Facebook) ===== */
nav{left:0;right:0;margin:auto;transform:none;bottom:0;width:100%;max-width:640px;border-radius:20px 20px 0 0;border:0;border-top:1px solid var(--bd);background:var(--nav);box-shadow:0 -8px 26px -14px rgba(0,0,0,.6);padding:0 6px env(safe-area-inset-bottom,0px)}
nav button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:60px;margin:4px 2px;border-radius:14px;font-size:.78rem;font-weight:600;color:var(--mu);text-shadow:none;-webkit-tap-highlight-color:transparent;transition:color .2s,background .2s,transform .15s}
nav button .ic{width:26px;height:26px;margin:0;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
nav button:active{transform:scale(.92);background:color-mix(in srgb,var(--cy) 10%,transparent)}
nav button.on{color:var(--cy);background:color-mix(in srgb,var(--cy) 9%,transparent);text-shadow:none}
nav button.on .ic{transform:translateY(-1px) scale(1.12);stroke-width:2.2}
nav button.on .nl{font-weight:800}
nav .ind{position:absolute;top:0;left:0;width:25%;height:3px;background:linear-gradient(var(--cy),var(--cy)) center/46px 3px no-repeat;border-radius:0 0 4px 4px;transform:translateX(calc(var(--k,0)*100%));transition:transform .4s cubic-bezier(.3,1.4,.5,1)}

/* ===== Horloge : les secondes tiennent dans la carte + animation à chaque seconde ===== */
.clk{container-type:inline-size}
.clk .time{font-size:clamp(1.8rem,16cqw,3.8rem);white-space:nowrap}
.clk .time span{display:inline-block;min-width:1.2ch;text-align:center}
.clk .time span:last-of-type{color:var(--c)}
.sx{animation:secpop .9s ease-out}
@keyframes secpop{0%{transform:translateY(-22%) scale(1.12);opacity:.25}50%{opacity:1}100%{transform:none}}
/* ===== Apparition au scroll ===== */
.card,.tile{animation:none}
.rv{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}

/* === Logo animé « Mora Ship » === */
.brand b.mora{display:flex;gap:.28em;font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;font-weight:900;font-size:1.65rem;line-height:1.1;letter-spacing:.01em;text-shadow:none;position:relative;overflow:hidden;padding:3px 2px}
.mora .mw{display:inline-flex}
.mora .ms{font-style:italic}
.mora i{font-style:inherit;display:inline-block;color:var(--cy);background:linear-gradient(100deg,var(--cy),var(--bl),var(--mg),var(--am),var(--cy));background-size:400% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:moraFlow 6s linear infinite,moraWave 2.8s ease-in-out infinite;animation-delay:calc(var(--i)*-.35s),calc(var(--i)*.12s);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--cy) 50%,transparent))}
.mora::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:moraSheen 4.5s ease-in-out infinite;mix-blend-mode:overlay;pointer-events:none}
.brand small{animation:moraFade 1.2s ease both .3s}
@keyframes moraFlow{to{background-position:400% 0}}
@keyframes moraWave{0%,60%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-.14em) scale(1.12) rotate(-3deg)}}
@keyframes moraSheen{0%,55%{left:-40%}100%{left:130%}}
@keyframes moraFade{from{opacity:0;letter-spacing:.4em}to{opacity:1;letter-spacing:.12em}}
:root[data-theme=lagon] .mora i{filter:none}