/* =========================================================
   Palette moderne 2025 (mode par défaut : DARK)
========================================================= */
:root {
  --primary: #3C7E91;
  --accent:  #2A5E97;
  --bg:      #0B1220;
  --muted:   #D7ECF6;
  --border:  rgba(255,255,255,0.12);
}

html, body {
  background: var(--bg);
  color: #fff;
  font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
}

/* Inputs */
.input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: #fff;
  outline: none;
  transition: border .2s, box-shadow .2s;
}
.input::placeholder { color: color-mix(in srgb, var(--muted) 55%, transparent); }
.input:focus {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Cartes */
.card {
  padding: 24px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .06s;
}
.btn:hover { background: rgba(255,255,255,0.08); border-color: color-mix(in srgb, var(--muted) 30%, transparent); }
.btn:active { transform: translateY(1px); }

.btn-primary { background: color-mix(in srgb, var(--primary) 85%, transparent); border: none; color: #fff; }
.btn-primary:hover { background: color-mix(in srgb, var(--primary) 70%, transparent); }

.btn-accent { background: var(--accent); border: none; color: #0b0b0b; }
.btn-accent:hover { filter: brightness(1.05); }

/* Cadres image 16:9 */
.imgframe{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:16px; overflow:hidden; border:1px solid var(--border);
  background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 35%, transparent), rgba(10,18,32,.6));
  display:flex; align-items:center; justify-content:center;
}
.imgframe > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.imgph{ color:var(--muted); font-weight:600; font-size:14px; opacity:.85; text-align:center; padding:0 12px; }

/* Carousel héro */
.carousel{ position:relative; }
.carousel .slide{ position:absolute; inset:0; opacity:0; transform:scale(1.02); transition:opacity .5s ease, transform .6s cubic-bezier(.22,.7,.3,1); }
.carousel .slide.active{ opacity:1; transform:scale(1); }
.carousel .nav{ position:absolute; top:50%; transform:translateY(-50%); }
.carousel .prev{ left:8px; }
.carousel .next{ right:8px; }

/* Password toggle */
.pw-wrap { position: relative; width: 100%; }
.pw-wrap > .input { padding-right: 42px; }
.pw-toggle{
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 10px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.06);
  color: #fff; cursor: pointer; transition: background .15s, border-color .15s, transform .06s;
}
.pw-toggle:hover{ background: rgba(255,255,255,0.1); border-color: color-mix(in srgb, var(--muted) 30%, transparent); }
.pw-toggle:active{ transform: translateY(calc(-50% + 1px)); }
.pw-toggle.on { background: var(--accent); color: #0b0b0b; border-color: transparent; }
.pw-toggle .eye-ico { font-size: 14px; line-height: 1; }

/* Mobile 2025 */
:root{ --gap:16px; --radius:16px; }
html { -webkit-text-size-adjust:100%; }
* { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }

h1 { font-size: clamp(1.6rem, 4.5vw, 2.6rem); line-height:1.15; }
h2 { font-size: clamp(1.3rem, 3.6vw, 2rem); line-height:1.2; }
h3 { font-size: clamp(1.15rem, 3.1vw, 1.5rem); line-height:1.25; }

.btn { min-height:44px; }
.input { min-height:44px; }
.input-lg { padding:14px 16px; font-size:1rem; }

/* Drawer mobile */
.mnav-overlay{position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; z-index:60;}
.mnav-panel{position:fixed; top:0; bottom:0; left:0; width:300px; max-width:86vw;
  background:rgba(255,255,255,.06); border-right:1px solid color-mix(in srgb, var(--border) 100%, transparent);
  backdrop-filter: blur(8px); transform: translateX(-100%); transition: transform .25s ease; z-index:61;
}
.mnav-open .mnav-overlay{display:block;}
.mnav-open .mnav-panel{transform: translateX(0);}

/* CTA mobile */
.mobile-cta{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 10px clamp(12px, 4vw, 20px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
  background: linear-gradient(180deg, rgba(11,18,32,0) 0%, rgba(11,18,32,.75) 25%, rgba(11,18,32,.85) 100%);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(10px);
}
.mobile-cta .row{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.mobile-cta .btn{ width: 100%; justify-content: center; }

/* Footer special */
.btn-portail {
  background-color: rgba(255,215,0,0.30);
  color: #FFFFFF;
  border: 1px solid color-mix(in srgb, var(--muted) 60%, transparent);
  backdrop-filter: blur(4px);
}
.btn-portail:hover { background-color: rgba(255,215,0,0.99); color: #000000; }

/* Admin polish */
.card:hover { box-shadow: 0 14px 40px rgba(0,0,0,.28); }
.small { font-size: .95rem; }
code { background: rgba(255,255,255,.06); padding: 2px 6px; border-radius: 8px; border:1px solid var(--border); }

/* News 2025 */
.news-aside-left .title{ color:#fff; }
.hero, .box{ border-radius:20px; }

/* Logo responsive */
.site-logo{ height: clamp(44px, 7vw, 64px); width: clamp(44px, 7vw, 64px); border-radius:16px; }
@media (min-width: 1024px){ .site-logo{ height:64px; width:64px; } }

/* Light Mode */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f7fafc;
  --primary: #2A5E97;
  --accent:  #3C7E91;
  --border:  rgba(0,0,0,0.12);
}
html[data-theme="light"] body { color:#0b1220; background:var(--bg); }
html[data-theme="light"] .card { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); }
html[data-theme="light"] .btn  { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color:#0b1220; }
html[data-theme="light"] .btn:hover { background: rgba(0,0,0,0.07); }
html[data-theme="light"] .imgframe {
  border-color: rgba(0,0,0,0.12);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), rgba(11,18,32,.08));
}

/* Bottom Glass Bar */
.bottom-glassbar{
  position: fixed; left:0; right:0; bottom:0; z-index:60;
  padding: 10px clamp(12px,4vw,20px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
  display: flex; align-items:center; justify-content:center; gap:10px;
  background: linear-gradient(180deg, rgba(11,18,32,0) 0%, rgba(11,18,32,.55) 45%, rgba(11,18,32,.75) 100%);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(10px);
}
.bottom-glassbar .btn{ min-height:40px; }
@media (min-width:768px){ .bottom-glassbar{ justify-content:flex-end; } }
body.has-bottombar{ padding-bottom:80px; }