/* Page d'accueil et page de connexion UNIS 2026 — présentation commune */
:root{
      --bg-gradient: radial-gradient(1200px 600px at 10% 10%, #e0f2fe 0%, rgba(224,242,254,0) 60%),
                     radial-gradient(1000px 500px at 90% 10%, #fce7f3 0%, rgba(252,231,243,0) 60%),
                     linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
      --card-bg: rgba(255,255,255,0.9);
      --text: #0f172a;
      --muted: #475569;
      --primary: #0ea5e9;
      --primary-dark: #0284c7;
      --ring: rgba(14,165,233,.4);
      --shadow: 0 10px 25px rgba(2,6,23,.08), 0 6px 12px rgba(2,6,23,.06);
    }
    *{ box-sizing:border-box; margin:0; padding:0; }
    html,body{ height:100% }
    body{
      font-family: Inter, system-ui, sans-serif;
      color: var(--text);
      background: var(--bg-gradient);
    }
    header{
      text-align:center;
      padding:20px;
    }
    header img{
      max-width:200px;
      height:auto;
    }
    .wrapper{
      min-height:calc(100dvh - 150px);
      display:grid;
      place-items:center;
      padding: 24px;
    }
    .card{
      width:100%;
      max-width:920px;
      background: var(--card-bg);
      backdrop-filter: saturate(1.2) blur(10px);
      border: 1px solid rgba(2,6,23,.08);
      border-radius: 24px;
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .grid{
      display:grid;
      grid-template-columns: 1.2fr 1fr;
    }
    @media (max-width: 900px){
      .grid{ grid-template-columns: 1fr; }
      .hero{ border-right: none; border-bottom: 1px solid rgba(2,6,23,.06); }
    }
    .hero{
      padding: 32px;
      border-right: 1px solid rgba(2,6,23,.06);
      background: linear-gradient(180deg, rgba(14,165,233,.08), rgba(14,165,233,0));
    }
    .badge{
      display:inline-flex; align-items:center; gap:8px;
      background:#e0f2fe; color:#075985; font-weight:600; padding:8px 12px; border-radius:999px; font-size:12px;
    }
    .title{ font-size: clamp(24px, 4vw, 32px); font-weight:800; margin:14px 0 8px; }
    .subtitle{ color: var(--muted); margin:0 0 18px; font-size:14px }
    .countdown{
      display:flex; gap:10px; flex-wrap:wrap; margin: 4px 0 8px 0;
    }
    .unit{
      flex:1 1 100px; min-width:110px; background:white; border:1px solid rgba(2,6,23,.06);
      border-radius:16px; padding:16px; text-align:center; box-shadow: var(--shadow);
    }
    .value{ font-size: clamp(28px, 6vw, 40px); font-weight:800; }
    .label{ color: var(--muted); font-size:12px; text-transform:uppercase; }
    .status{ margin-top:10px; font-weight:600; font-size:14px; }

    .form{
      padding: 32px; display:flex; flex-direction:column; gap:14px;
    }
    .field label{ font-weight:600; font-size:14px }
    .hint{ color: var(--muted); font-size:12px; }
    .input{
      width:100%; padding:14px; border:1px solid rgba(2,6,23,.12); border-radius:12px; font-size:16px; outline:none;
    }
    .input:focus{ border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
    .btn{
      padding:14px 16px; border:none; border-radius:12px; background: var(--primary);
      color:white; font-weight:700; cursor:pointer;
    }
    .btn:hover{ background: var(--primary-dark) }
    .footer{
      padding: 18px 24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
      border-top:1px solid rgba(2,6,23,.06); background: #ffffffc7; backdrop-filter: blur(6px);
    }
    .brand{ display:flex; align-items:center; gap:10px; color: var(--muted); font-size:13px }
    .brand strong{ color: var(--text) }
    .brand img{ height:24px; width:auto; }
    .links{ display:flex; gap:16px; font-size:12px }
    .links a{ color: var(--muted); text-decoration:none }
    .links a:hover{ text-decoration:underline }
.secure{ font-size:12px; color:#065f46; margin-top:4px; }
.alert-error{
  background:#fef2f2; color:#991b1b; border:1px solid #fecaca; border-radius:12px; padding:12px 14px; font-size:14px;
}
.societes{ margin:0 0 14px 18px; font-size:15px; font-weight:600; line-height:1.7; }
.hint a{ color: var(--primary-dark); }
.alert-success{
  background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; border-radius:12px; padding:12px 14px; font-size:14px;
}
.email-dest{ font-size:18px; font-weight:700; margin:4px 0 10px; word-break:break-all; }
.code-input{ font-size:28px; letter-spacing:.35em; text-align:center; font-weight:700; }
.btn-secondary{
  display:block; text-align:center; padding:12px 16px; border-radius:12px; font-weight:600; font-size:14px;
  color: var(--muted); background:#f1f5f9; text-decoration:none;
}
.btn-secondary:hover{ background:#e2e8f0; color: var(--text); }
.resend{ margin-top:18px; padding-top:14px; border-top:1px solid rgba(2,6,23,.06); display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; }
.btn-link{ background:none; border:none; padding:0; font:inherit; font-size:13px; font-weight:600; color: var(--primary-dark); cursor:pointer; text-decoration:underline; }
[hidden]{ display:none !important; }
.alert-info{
  background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; border-radius:12px; padding:12px 14px; font-size:14px;
}
.fields{ border:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.fields:disabled{ opacity:.55; }
.fields:disabled .btn{ cursor:not-allowed; }