:root{
  --bg:#0b1220; --bg2:#0f172a; --text:#ffffff; --muted:#b6c3e0; --ring:rgba(255,255,255,.12);
  --indigo:#6366f1; --fuchsia:#d946ef; --card:rgba(255,255,255,.06);
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:linear-gradient(180deg, #020617 0%, var(--bg2) 100%);
}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
.hidden{display:none!important}
.container{min-height:60vh}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.upper{text-transform:uppercase;letter-spacing:.06em}
.tiny{font-size:.85rem}
.mt{margin-top:12px}.mb{margin-bottom:12px}
.center{text-align:center}
.muted{color:var(--muted)}
.accent{color:#a5b4fc}
.dot{opacity:.5;margin:0 8px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(15,23,42,.6);backdrop-filter:blur(8px);border-bottom:1px solid var(--ring)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{height:36px;width:36px;border-radius:12px;border:1px solid var(--ring);background:rgba(255,255,255,.05);object-fit:contain}
.brand-text{line-height:1}
.brand-name{font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;opacity:.9}
.brand-operator{font-size:.78rem;opacity:.6}
.main-nav{display:none;gap:8px}
.main-nav a{padding:8px 10px;border-radius:12px}
.main-nav a:hover{background:rgba(255,255,255,.06)}
.auth-area{display:flex;align-items:center;gap:8px}
.user-email{font-size:.78rem;opacity:.7;margin-right:6px}
@media (min-width: 760px){ .main-nav{display:flex} }

/* Hero */
.hero{position:relative;border-bottom:1px solid var(--ring)}
.hero:before, .hero:after{content:"";position:absolute;filter:blur(60px);opacity:.45;z-index:0}
.hero:before{right:-60px;top:-60px;height:280px;width:280px;background:var(--indigo);border-radius:50%}
.hero:after{left:-40px;bottom:-60px;height:280px;width:280px;background:var(--fuchsia);border-radius:50%}
.hero-grid{display:grid;grid-template-columns:1fr;gap:24px;padding:60px 0;position:relative;z-index:1}
.hero h1{font-size:2.2rem;line-height:1.2;margin:0 0 10px}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.hero-illustration{border:1px solid var(--ring);border-radius:20px;background:rgba(255,255,255,.05);padding:24px;display:flex;align-items:center;justify-content:center;min-height:220px}
@media (min-width: 900px){ .hero-grid{grid-template-columns:1.2fr 1fr} .hero h1{font-size:3rem} }

/* Apps/cards */
.apps{padding:10px 0}
.cards{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width: 760px){ .cards{grid-template-columns:1fr 1fr} }
.card{border:1px solid var(--ring);border-radius:22px;background:var(--card);padding:22px;display:block;transition:transform .2s ease, background .2s ease}
.card:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.card-head{display:flex;justify-content:space-between;align-items:center}
.card h3{margin:0;font-size:1.2rem}
.card .icon{font-size:1.3rem;opacity:.9;background:rgba(255,255,255,.1);border:1px solid var(--ring);padding:10px;border-radius:16px}
.card-link{margin-top:12px;color:#c7d2fe;font-size:.95rem}

/* Generic pages */
.page{padding:40px 0}
.grid-3{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
@media (min-width: 760px){ .grid-3{grid-template-columns:1fr 1fr 1fr} }
.info{border:1px solid var(--ring);background:var(--card);border-radius:16px;padding:16px}
.info .label{font-size:.85rem;color:var(--muted)}
.info .value{font-weight:600}

.legal-list{line-height:1.9}
.settings-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px}
.setting{display:flex;flex-direction:column;gap:6px;border:1px solid var(--ring);background:var(--card);border-radius:16px;padding:14px}
.setting input{background:#0b1220;border:1px solid var(--ring);border-radius:12px;color:var(--text);padding:10px}

/* Panels & width helpers */
.panel{border:1px solid var(--ring);background:var(--card);border-radius:18px;padding:22px}
.narrow{max-width:480px}

/* Footer */
.site-footer{border-top:1px solid var(--ring);margin-top:40px}
.site-footer .wrap{padding:24px 20px}
.footer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.brand-mini{display:flex;align-items:center;gap:8px}
.brand-mini img{height:24px;width:24px;border-radius:8px;border:1px solid var(--ring);background:rgba(255,255,255,.05)}
.footer-bottom{font-size:.85rem;color:var(--muted)}
.legal-small{margin-top:6px;font-size:.8rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ring);background:rgba(255,255,255,.08);padding:10px 14px;border-radius:14px;cursor:pointer}
.btn:hover{background:rgba(255,255,255,.12)}
.btn.primary{background:#4f46e5;border-color:transparent}
.btn.primary:hover{background:#4338ca}
.btn.ghost{background:transparent}
.btn.small{padding:6px 10px;border-radius:10px;font-size:.9rem}
.btn.full{width:100%;justify-content:center}

/* ===========================
   Login (auth) page styling
   =========================== */
.auth-screen{
  min-height: calc(100vh - 140px); /* espace pour header/footer */
  display: grid;
  place-items: center;
  padding: 32px 16px;
}
.auth-panel{
  width: 100%;
  max-width: 460px;
  border-radius: 20px;
  padding: 24px 22px;
  background: var(--card);
  border: 1px solid var(--ring);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.auth-panel .brand-mini{
  display: flex;
  align-items: center;
  gap: 12px;
}
.auth-panel .brand-mini img{
  height: 28px; width: 28px;
  border-radius: 10px;
  border: 1px solid var(--ring);
  background: rgba(255,255,255,.05);
}
.alert{
  margin: 12px 0 4px;
  padding: 10px 12px;
  border: 1px solid #fca5a5;
  background: rgba(239,68,68,.15);
  border-radius: 10px;
}

/* Form spacing & fields */
.auth-panel form{ margin-top: 10px; }
.auth-panel label{ display:block; margin: 12px 0; }
.auth-panel label span{
  display:block;
  font-size: .9rem;
  color: var(--muted);
  margin-bottom: 6px;
}
.auth-panel input[type="email"],
.auth-panel input[type="password"]{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--ring);
  background: #0b1220;
  color: var(--text);
  outline: none;
}
.auth-panel input:focus{
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(99,102,241,.25);
}

/* Button & links */
.auth-panel .btn.primary{
  width: 100%;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 14px;
}
.links{ margin-top: 10px; text-align: center; }

/* Small screens */
@media (max-width: 380px){
  .auth-panel{ padding: 20px 16px; }
}

/* --- FIX Empilement champs login (force) --- */
.auth-panel form{ display:block !important; width:100%; }
.auth-panel label{ display:block !important; width:100%; margin:12px 0 !important; }
.auth-panel label + label{ margin-top:14px !important; }
.auth-panel label span{
  display:block !important;
  font-size:.9rem; color:var(--muted);
  margin-bottom:6px !important;
}
.auth-panel input[type="email"],
.auth-panel input[type="password"]{
  display:block !important;
  width:100% !important;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--ring);
  background:#0b1220; color:var(--text);
}
.auth-panel .btn.primary{
  width:100% !important;
  margin-top:14px !important;
  padding:12px 16px;
  border-radius:14px;
}
.alert{margin:10px 0;padding:10px 12px;border:1px solid #fca5a5;background:rgba(239,68,68,.15);border-radius:10px}
/* === Fix layout login pour markup .page .panel (sans changer le HTML) === */
.page .panel form{ display:block !important; width:100% !important; }
.page .panel form label{
  display:block !important;
  width:100% !important;
  margin:12px 0 !important;
  float:none !important;               /* au cas où un style global float les labels */
  clear:both !important;
}
.page .panel form label + label{ margin-top:14px !important; }
.page .panel form label > span{
  display:block !important;
  font-size:.9rem; color:var(--muted);
  margin-bottom:6px !important;
  line-height:1.2 !important;
}
.page .panel input[type="email"],
.page .panel input[type="password"]{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  padding:12px 14px !important;
  border-radius:12px !important;
  border:1px solid var(--ring) !important;
  background:#0b1220 !important;
  color:var(--text) !important;
  box-sizing:border-box !important;
}
.page .panel input[type="email"]:focus,
.page .panel input[type="password"]:focus{
  border-color:#818cf8 !important;
  box-shadow:0 0 0 3px rgba(99,102,241,.25) !important;
  outline:0 !important;
}
.page .panel .btn.primary{
  width:100% !important;
  margin-top:14px !important;
  padding:12px 16px !important;
  border-radius:14px !important;
}
.page.wrap.narrow{ max-width:480px !important; margin-left:auto; margin-right:auto; }
/* === Sticky footer : pousse le footer en bas de l'écran === */
html, body { height: 100%; }

body{
  display: flex;
  min-height: 100vh;      /* toute la hauteur de l’écran */
  flex-direction: column; /* header -> main -> footer en colonne */
}

/* le contenu principal prend la place restante */
.container{
  flex: 1 0 auto;
  min-height: unset !important; /* override l'ancienne règle 60vh s'il y en a une */
}

/* le footer s'ancre en bas si le contenu est court */
.site-footer{
  margin-top: auto;       /* pousse le footer au bas du flex container */
}
/* Revenir au padding normal de la section */

/* Ajouter un petit espace uniquement sous la grille des cartes */
.apps .cards{ margin-bottom:16px; }

/* S’assurer que le footer ne rajoute pas d’espace au-dessus */
.site-footer{ margin-top:auto !important; }