@font-face{font-family:"Bricolage Grotesque";src:url("fonts/bricolage-800.woff2") format("woff2");font-weight:800;font-display:swap}
:root{
  --nuit:#1a2557;--nuit-fonce:#141d4a;--clabord:#243372;--clabord-2:#2e4088;--trait:#3a4d9a;
  --ampoule:#ffc53d;--ampoule-pale:#ffe6a1;--bardeau:#c8423a;
  --texte:#f3f5ff;--texte-2:#c3cbf0;--texte-3:#a9b3e3;
  --display:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --page:min(1120px,100% - 40px);
}
*{box-sizing:border-box}
html{background:var(--nuit);color-scheme:dark;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;font-family:var(--ui);font-size:1.0625rem;line-height:1.55;color:var(--texte);background:var(--nuit)}
::selection{background:var(--ampoule);color:var(--nuit)}
:focus-visible{outline:3px solid var(--ampoule);outline-offset:3px;border-radius:6px}
a{color:var(--ampoule);text-underline-offset:.2em;text-decoration-thickness:1.5px}
a:hover{color:var(--ampoule-pale)}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:-.025em;margin:0;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
.wrap{width:var(--page);margin-inline:auto}
html{scrollbar-color:var(--trait) var(--nuit-fonce)}

/* top bar */
.barre{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0}
.marque{display:flex;align-items:center;gap:10px;color:var(--texte);text-decoration:none;font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.02em}
.marque img{width:36px;height:36px;border-radius:9px}
.barre nav{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.barre nav a{color:var(--texte-2);text-decoration:none;font-weight:600;font-size:.9375rem;padding:10px 12px;border-radius:10px;min-height:44px;display:inline-flex;align-items:center}
.barre nav a:hover{color:var(--texte);background:var(--clabord)}

/* buttons */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:0 28px;border:0;border-radius:16px;
  background:var(--ampoule);color:var(--nuit);font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;box-shadow:0 8px 20px -8px rgba(5,9,30,.8),0 1px 2px rgba(5,9,30,.4);
  transition:transform .15s var(--ease),background .35s var(--ease),color .35s}
.bouton:hover{color:var(--nuit);background:#ffcf5c}
.bouton:active{transform:scale(.97)}
.bouton.fait{background:var(--clabord-2);color:var(--ampoule-pale);box-shadow:none;font-size:1.0625rem}
.bouton.second{background:var(--clabord);color:var(--texte);box-shadow:none;font-family:var(--ui);font-weight:600;font-size:1.0625rem}
.bouton.second:hover{background:var(--clabord-2);color:var(--texte)}

/* house */
.maison svg{display:block;width:100%;height:auto}
.glow{transition:opacity 1.1s var(--ease)}
.allumee .glow{opacity:1}
.bulb{transition:fill .4s var(--ease)}
.win-pane{transition:fill .8s var(--ease) .15s}

/* sections */
section{padding:clamp(64px,10vw,120px) 0}
.titre-section{font-size:clamp(2rem,4.6vw,3.25rem);max-width:18ch;margin-bottom:20px}
.chapo{font-size:clamp(1.125rem,1.6vw,1.3125rem);color:var(--texte-2);max-width:56ch}
.mesure{max-width:66ch}
.note{font-size:.875rem;color:var(--texte-3)}

footer{border-top:1px solid var(--trait);padding:32px 0 48px;color:var(--texte-3);font-size:.9375rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:4px 20px}
footer a{color:var(--texte-2)}
.marque{white-space:nowrap}
@media (max-width:560px){.barre nav a:not(.garder){display:none}.barre nav a{padding:10px 8px}}
@media (max-width:560px){.barre nav{flex-wrap:nowrap;gap:0}.barre nav a{padding:10px 6px;font-size:.875rem}.marque{font-size:1.0625rem;gap:8px}.marque img{width:30px;height:30px}}