/* =====================================================================
 * site.css — identité « Nuit bleue » des pages publiques (classe .nuit)
 * Fond bleu nuit, halos bleus, trame de plan discrète, cartes en verre.
 * Titres : Archivo étroit et gras ; texte : Inter (polices hébergées sur le site).
 * ===================================================================== */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(../assets/fonts/archivo-latin-wdth-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../assets/fonts/inter-latin-wght-normal.woff2) format('woff2'); }
body.nuit {
  --a1: 90 162 255; --a2: 61 139 255; --a3: 37 99 235; --g: 46 108 255; --g2: 0 153 255; --e: 148 180 255;
  --n0: 5 11 28; --n1: 10 21 48; --n2: 20 36 74; --tint1: #8DBBFF; --tint2: #B9D6FF; --t1: #E7EDF8; --t2: #A3B1CC; --t3: #7E8CA8;
}
/* Variante orange (bouton du site public, mémorisé dans un cookie) */
html[data-site="orange"] body.nuit {
  --a1: 255 172 96; --a2: 255 130 36; --a3: 226 92 4; --g: 255 112 24; --g2: 255 166 64; --e: 255 204 168;
  --n0: 14 9 6; --n1: 30 19 11; --n2: 58 36 20; --tint1: #FFC08A; --tint2: #FFDAB8; --t1: #F8EFE8; --t2: #D2BBA8; --t3: #A68E7C;
}
body.nuit {
  --night: rgb(var(--n0)); --night-2: rgb(var(--n1)); --glass: rgb(var(--e) / .06); --glass-2: rgb(var(--e) / .10); --edge: rgb(var(--e) / .16);
  --text: var(--t1); --text-2: var(--t2); --muted: var(--t3); --accent: rgb(var(--a2)); --accent-dark: var(--tint1); --accent-soft: rgb(var(--a2) / .16);
  --border: var(--edge); --bg: var(--night); --font: 'Inter', system-ui, sans-serif; --display: 'Archivo', 'Arial Narrow', sans-serif;
  font-family: var(--font); color: var(--text); font-size: 16px;
  background:
    radial-gradient(1100px 620px at 80% -8%, rgb(var(--g) / .38), transparent 62%),
    radial-gradient(800px 600px at -10% 30%, rgb(var(--g2) / .16), transparent 60%),
    var(--night);
}
body.nuit { isolation: isolate; }
body.nuit::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background-image: linear-gradient(rgb(var(--e) / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--e) / .05) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%); }
.nuit h1, .nuit h2, .nuit h3 { color: #fff; font-family: var(--display); font-stretch: 78%; font-weight: 800; letter-spacing: -.01em; }
.nuit .brand-name, .nuit .lg-brand { font-family: var(--display); font-stretch: 85%; }
.nuit a { color: var(--accent-dark); }
.nuit a.btn-primary { color: #fff; }
.nuit .brand-sub { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); }

/* Barre du haut */
.nuit .h-top { background: rgb(var(--n0) / .6); backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--edge); position: sticky; z-index: 20; }
.nuit .h-nav a { color: var(--text-2); font-weight: 600; }
.nuit .h-nav a:hover { color: #fff; }
.nuit .h-login { border-color: var(--edge); background: var(--glass); }
@media (max-width: 900px) { .nuit .h-nav { background: var(--night-2); } }

/* Boutons : dégradé lumineux */
.nuit .btn-primary { background: linear-gradient(135deg, rgb(var(--a1)), rgb(var(--a3))); border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 10px 30px -6px rgb(var(--a2) / .65); }
.nuit .btn-primary:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset, 0 14px 40px -6px rgb(var(--a2) / .85); }
.nuit .btn-outline { background: var(--glass); border: 1px solid var(--edge); color: #fff; border-radius: 12px; }
.nuit .btn-outline:hover { background: var(--glass-2); }

/* Premier écran */
.nuit .h-hero { background: transparent; padding: clamp(56px, 11vh, 120px) 0 clamp(56px, 9vh, 100px); }
.nuit .eyebrow { display: inline-block; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 14px; color: var(--accent-dark);
  padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); border: 1px solid rgb(var(--a2) / .35); }
.nuit .h-hero h1 { font-size: clamp(40px, 4.5vw, 70px); line-height: .96; font-stretch: 70%; font-weight: 800; letter-spacing: -.01em;
  background: linear-gradient(180deg, #fff 30%, var(--tint2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nuit .h-hero h1 em { background: linear-gradient(90deg, rgb(var(--a1)), rgb(var(--a2)) 60%, rgb(var(--g2))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nuit .h-hero .lead { color: var(--text-2); font-size: 19px; }
.nuit .h-note { color: var(--muted); }
.nuit .h-hero-video { border-radius: 18px; border: 1px solid var(--edge); background: var(--night-2);
  box-shadow: 0 0 0 6px rgb(var(--e) / .05), 0 40px 120px -20px rgb(var(--g) / .55); }

/* Sections */
.nuit .h-sec, .nuit .h-sec.alt { background: transparent; }
.nuit .h-sec.alt { background: linear-gradient(180deg, transparent, rgb(var(--g) / .06) 30%, transparent); }
.nuit .h-sec h2 { font-size: clamp(34px, 4vw, 54px); line-height: 1; }
.nuit .muted, .nuit .disclaimer { color: var(--text-2); }
.nuit .step, .nuit .h-feat, .nuit .faq, .nuit .price, .nuit .demo-convert {
  background: linear-gradient(180deg, var(--glass-2), var(--glass)); border: 1px solid var(--edge); border-radius: 18px; box-shadow: none; backdrop-filter: blur(6px); }
.nuit .step i { font-family: var(--display); font-stretch: 75%; font-size: 22px; background: linear-gradient(135deg, rgb(var(--a1)), rgb(var(--a3))); box-shadow: 0 8px 24px -6px rgb(var(--a2) / .7); }
.nuit .step p, .nuit .h-feat p, .nuit .faq p, .nuit .checks li, .nuit .h-trio figcaption, .nuit .demo-convert span, .nuit .limits ul { color: var(--text-2); }
.nuit .h-feat .feature-ico { background: var(--accent-soft); color: var(--tint1); box-shadow: 0 0 0 1px rgb(var(--a2) / .3) inset; }
.nuit .demo-box { border: 1px solid var(--edge); box-shadow: 0 40px 120px -30px rgb(var(--g) / .5); }
.nuit .shot { border: 1px solid var(--edge); box-shadow: 0 30px 80px -30px rgb(var(--g) / .45); }
.nuit .demo-full { color: var(--accent-dark); }

/* Tarifs */
.nuit .price.featured { border-color: rgb(var(--a1) / .7); background: linear-gradient(180deg, rgb(var(--a2) / .2), var(--glass)); box-shadow: 0 30px 90px -30px rgb(var(--a2) / .7); }
.nuit .ribbon { background: linear-gradient(135deg, rgb(var(--a1)), rgb(var(--a3))); }
.nuit .amount b { color: #fff; font-family: var(--display); font-stretch: 70%; font-weight: 800; font-size: 60px; }
.nuit .amount span, .nuit .price .muted { color: var(--muted); }
.nuit .price-users { color: var(--accent-dark); }
.nuit .price li { color: var(--text-2); border-color: var(--edge); }
.nuit .price li::before, .nuit .checks li::before { color: rgb(var(--a1)); }

/* FAQ, formulaire, pied de page */
.nuit .faq summary { color: #fff; font-family: var(--display); font-stretch: 85%; font-weight: 700; font-size: 18px; }
.nuit .faq summary::after { color: rgb(var(--a1)); }
.nuit input[type=email], .nuit input[type=password], .nuit input[type=text], .nuit input:not([type]), .nuit input[type=tel], .nuit select, .nuit textarea {
  background: rgb(var(--n0) / .6); color: var(--text); border: 1px solid var(--edge); border-radius: 12px; }
.nuit select option { background: var(--night-2); }
.nuit .contact-form label { color: var(--text-2); }
.nuit .hint { color: var(--muted); }
.nuit .alert-success { background: rgba(30,142,62,.15); color: #9BE3B0; border-color: rgba(30,142,62,.4); }
.nuit .pres-foot { border-top: 1px solid var(--edge); color: var(--muted); background: rgb(var(--n0) / .6); }
.nuit .pres-foot a, .nuit.page-home .pres-foot a { color: var(--accent-dark); }

.nuit .step h3, .nuit .h-feat h3 { font-size: 22px; font-stretch: 80%; }
.nuit .price h3 { font-size: 28px; }

@media (max-width: 900px) { .nuit .h-hero { padding-top: 36px; } }

/* Formulaires et messages sur fond sombre */
.nuit input:focus, .nuit select:focus, .nuit textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgb(var(--a2) / .22); }
.nuit .form label { color: var(--text-2); }
.nuit .pw-toggle { background: var(--glass-2); color: var(--text-2); }
.nuit .alert-warn { background: rgba(255,170,40,.1); color: #FFD08A; border-color: rgba(255,170,40,.3); }
.nuit .alert-error { background: rgba(240,80,70,.12); color: #FFB4AC; border-color: rgba(240,80,70,.35); }
.nuit .alert-info { background: var(--accent-soft); color: var(--tint2); border-color: rgb(var(--a2) / .35); }

/* Page de connexion */
.nuit .hero { background: transparent !important; border-right: 1px solid var(--edge); }
.nuit .hero h1 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1; font-stretch: 72%; }
.nuit .hero h1 em { color: rgb(var(--a1)); }
.nuit .lead { color: var(--text-2); }
.nuit .feature { background: linear-gradient(180deg, var(--glass-2), var(--glass)); border-color: var(--edge); }
.nuit .feature h3 { font-size: 17px; font-stretch: 82%; }
.nuit .feature p { color: var(--text-2); }
.nuit .panel { background: transparent; }
.nuit .card { background: linear-gradient(180deg, rgb(var(--n2) / .85), rgb(var(--n1) / .85)); border: 1px solid var(--edge); border-top: 3px solid var(--accent);
  backdrop-filter: blur(10px); box-shadow: 0 40px 100px -30px rgb(var(--g) / .55); color: var(--text); }
.nuit .card h2 { font-size: 30px; }
.nuit .hint.discover { border-color: var(--edge); }
.nuit .foot { color: var(--muted); }

/* Choix de l'outil (après connexion) */
.nuit .topbar { background: rgb(var(--n0) / .6); backdrop-filter: blur(14px); border-bottom: 1px solid var(--edge); }
.nuit .topbar .brand-name { color: #fff; }
.nuit .topbar nav a { color: var(--text-2); }
.nuit .topbar nav a:hover { color: #fff; }
.nuit .hub .muted { color: var(--text-2); }
.nuit .tile { background: linear-gradient(180deg, var(--glass-2), var(--glass)); border: 1px solid var(--edge); color: var(--text); box-shadow: none; }
.nuit a.tile:hover { border-color: rgb(var(--a1) / .6); box-shadow: 0 30px 80px -30px rgb(var(--a2) / .6); }
.nuit .tile-body p { color: var(--text-2); }
.nuit .tile-badge.ok { background: rgba(46,180,90,.15); color: #8FE0A8; }
.nuit .tile-badge.soon { background: var(--accent-soft); color: var(--tint2); }
.nuit .tile-go { color: var(--tint1); }
.nuit .tile.disabled { background: var(--glass); opacity: .5; }
.nuit .card-flat { background: linear-gradient(180deg, var(--glass-2), var(--glass)); border-color: var(--edge); color: var(--text); }

/* Pages légales */
.nuit .lg-top { background: rgb(var(--n0) / .6); backdrop-filter: blur(14px); border-bottom: 1px solid var(--edge); }
.nuit .lg-brand b { color: var(--accent); }
.nuit .lg-main { background: linear-gradient(180deg, rgb(var(--n2) / .7), rgb(var(--n1) / .7)); border: 1px solid var(--edge); color: var(--text); box-shadow: none; }
.nuit .lg-main h1 { font-size: 42px; }
.nuit .lg-main h2 { font-size: 22px; font-stretch: 82%; }
.nuit .lg-main a { color: var(--accent-dark); }
.nuit .lg-date { color: var(--muted); }
.nuit .lg-lead { color: var(--text-2); }
.nuit .lg-table th { background: var(--glass-2); color: #fff; }
.nuit .lg-table th, .nuit .lg-table td { border-color: var(--edge); }

/* « En savoir plus » (connexion) : texte blanc franc, fond bleu plus soutenu */
.nuit a.more-btn { color: #fff; background: linear-gradient(135deg, rgb(var(--a1)), rgb(var(--a3))); border-color: rgba(255,255,255,.85); text-shadow: 0 1px 2px rgb(var(--n0) / .45); }
.nuit a.more-btn span { color: #fff; opacity: 1; font-weight: 600; }

/* Bouton bleu / orange du site public */
.site-color { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 6px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgb(var(--e) / .3); background: rgb(var(--e) / .08); color: var(--t1, #fff); font: 600 13.5px var(--font, sans-serif); white-space: nowrap; }
.site-color:hover { background: rgb(var(--e) / .16); }
.site-color:focus-visible { outline: 2px solid rgb(var(--a1)); outline-offset: 2px; }
.site-color-dot { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #FF8A2A 50%, #3D8BFF 50%); box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
html[data-site="orange"] .site-color-dot { background: linear-gradient(135deg, #3D8BFF 50%, #FF8A2A 50%); }
.topbar nav { align-items: center; }
.lg-top nav { align-items: center; }
/* Logo : teinte orange en variante orange */
html[data-site="orange"] .nuit .brand img, html[data-site="orange"] .nuit .lg-brand img { filter: hue-rotate(175deg) saturate(1.15); }
html[data-site="orange"] .nuit .brand-name span, html[data-site="orange"] .nuit .lg-brand b { color: rgb(var(--a2)); }
@media (max-width: 560px) { .site-color-txt { display: none; } .site-color { padding: 0 6px; } }
html[data-site="orange"] .nuit .hero::before { background: radial-gradient(closest-side, rgb(var(--g) / .40), rgb(var(--g) / .12) 55%, transparent); }
html[data-site="orange"] .nuit .hero::after { background: radial-gradient(closest-side, rgb(var(--g) / .26), rgb(var(--g) / .08) 55%, transparent); }
html[data-site="orange"] .nuit .more-btn { animation: none; box-shadow: 0 0 12px rgb(var(--a1) / .8), 0 0 28px rgb(var(--g) / .5); }
html[data-site="orange"] .nuit .more-btn::after { border-color: rgb(var(--a1) / .9); }
html[data-site="orange"] .nuit .mod i { background: rgb(var(--a2)); box-shadow: 0 0 8px rgb(var(--a2)); }
html[data-site="orange"] .nuit .tile-ico:not(.tile-wifi):not(.tile-alarm) { background: linear-gradient(145deg, rgb(var(--a1)), rgb(var(--a3))); box-shadow: 0 10px 24px rgb(var(--g) / .35); }

/* Bouton bleu / orange : toujours au même endroit, tout en haut à droite */
.nuit .site-color { position: fixed; top: 13px; right: 16px; z-index: 60; backdrop-filter: blur(10px); background: rgb(var(--n0) / .7); }
.nuit .site-color:hover { background: rgb(var(--n1) / .9); }
.nuit .h-top, .nuit .topbar { padding-right: 150px; }
.nuit .lg-top { padding-right: max(150px, calc(50% - 440px)); }
.nuit .hero-in { padding-top: 22px; }
@media (max-width: 900px) {
  .nuit .h-top, .nuit .topbar, .nuit .lg-top { padding-right: 64px; }
  .nuit .site-color { padding: 0 6px; } .nuit .site-color-txt { display: none; }
}
@media (max-width: 600px) { .nuit .h-top .brand-sub { display: none; } }
@media (max-width: 900px) { .nuit.page-login .panel, .nuit.page-login .hero { padding-top: 60px; } }

/* Pages simples (mot de passe, double authentification…) et administration */
.nuit .center .card { margin: 0 auto; }
.nuit .card .muted, .nuit .card .hint { color: var(--text-2); }
.nuit .btn-ghost { color: var(--text-2); }
.nuit .btn-ghost:hover { background: var(--glass-2); color: #fff; }
.nuit .btn-small { background: var(--glass); border-color: var(--edge); color: var(--text); }
.nuit .btn-small:hover { border-color: rgb(var(--a2)); color: #fff; }
.nuit .btn-small.danger { color: #FF9A92; border-color: rgba(240,80,70,.4); }
.nuit .btn-small.danger:hover { background: rgba(240,80,70,.14); color: #FFB4AC; }
.nuit .admin h1 { font-size: 40px; }
.nuit .admin .muted { color: var(--text-2); }
.nuit .card-flat h2 { font-size: 21px; font-stretch: 82%; }
.nuit .users th { color: var(--t3); border-color: var(--edge); }
.nuit .users td { border-color: rgb(var(--e) / .1); }
.nuit .users .rename input { color: #fff; background: transparent; border-color: transparent; }
.nuit .users .rename input:hover, .nuit .users .rename input:focus { background: rgb(var(--n0) / .6); border-color: var(--edge); }
.nuit .users small.sub, .nuit .hint { color: var(--muted); }
.nuit .tag, .nuit .acc.on { background: var(--accent-soft); color: var(--tint2); border-color: rgb(var(--a2) / .4); }
.nuit .acc { background: var(--glass); }
.nuit .acc.off { color: var(--muted); border-color: var(--edge); }
.nuit .acc.all, .nuit .role-admin { background: #fff; color: rgb(var(--n0)); border-color: #fff; }
.nuit .role { background: var(--glass-2); color: var(--text-2); }
.nuit .state.on { color: #7FDC9B; } .nuit .state.off { color: #FF9A92; } .nuit .state.wait { color: #FFC56B; }
.nuit .reveal { background: var(--accent-soft); border-color: rgb(var(--a2) / .4); border-left-color: rgb(var(--a2)); }
.nuit .reveal.ok { background: rgba(46,180,90,.12); border-color: rgba(46,180,90,.35); border-left-color: #2EB45A; }
.nuit .reveal p { color: var(--text-2); }
.nuit .cred div { background: rgb(var(--n0) / .6); border-color: var(--edge); }
.nuit .cred span { color: var(--muted); }
.nuit .mods-pick { border-color: var(--edge); }
.nuit .mods-pick legend, .nuit .form-inline label { color: var(--text-2); }
.nuit .form-inline .chk { color: var(--text) !important; }
.nuit .lic-form { background: var(--glass); border-color: var(--edge); }
.nuit .lic-form summary { color: var(--tint1); }
.nuit .lic-form[open] summary, .nuit .lic-table tfoot td { border-color: var(--edge); }
.nuit .seats.full { color: #FF9A92; }
.nuit input[type=number], .nuit input[type=date] { background: rgb(var(--n0) / .6); color: var(--text); border: 1px solid var(--edge); border-radius: 12px; }
.nuit .mono { color: #fff; }
.nuit .alert-success { background: rgba(46,180,90,.12); color: #9BE3B0; border-color: rgba(46,180,90,.35); }
/* Administration : tableau des comptes plus large, actions sur 2 lignes maximum */
.nuit.page-admin .admin { max-width: 1600px; }
.nuit .users .actions { display: grid; grid-template-columns: repeat(2, max-content); justify-content: end; }
.nuit .users td { padding: 8px; }