/* =============================================================================
   Saisia — Espace pro : feuille de style (identite de marque saisia.fr)
   Bleu marine #0B3B5C · turquoise #00ACC1 · orange CTA #E2620F->#D24818 · Inter
   ============================================================================= */
:root{
  --bleu:#0B3B5C; --bleu-2:#0E4A6E; --bleu-fonce:#06222f;
  --teal:#00ACC1; --teal-clair:#7fe0ec;
  --orange-1:#E2620F; --orange-2:#D24818;
  --gris:#F2F5F7; --gris-bord:#DCE3E8; --blanc:#fff;
  --txt:#0B3B5C; --txt-doux:#4a6477;
  --ok:#0f9d6b; --warn:#b9541b; --err:#c0392b;
  --radius:14px; --shadow:0 6px 24px rgba(11,59,92,.08);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:Inter,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--txt); background:var(--gris); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal); text-underline-offset:2px;}
.hidden{display:none !important;}

/* --- Topbar --------------------------------------------------------------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 22px; color:#fff; position:sticky; top:0; z-index:10;
  background:linear-gradient(135deg,var(--bleu),var(--bleu-fonce));
  box-shadow:var(--shadow);
}
.brand{display:flex; align-items:center; gap:11px;}
.brand-logo{ display:inline-flex; }
.brand-logo svg{ width:34px; height:34px; display:block; }
.brand-name{display:flex; flex-direction:column; line-height:1.05; font-weight:800; font-size:1.18rem; letter-spacing:.2px;}
.brand-name small{font-weight:600; font-size:.6rem; letter-spacing:1.6px; text-transform:uppercase; color:var(--teal-clair); margin-top:3px;}
.userbar{display:flex; align-items:center; gap:12px;}
.org-chip{
  font-weight:600; font-size:.9rem; color:#eaf6f9;
  background:rgba(255,255,255,.10); padding:6px 13px; border-radius:999px;
  max-width:42vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* --- Boutons -------------------------------------------------------------- */
.btn,.btn-ghost{
  font:inherit; font-weight:700; cursor:pointer; border-radius:10px;
  padding:12px 18px; border:1px solid transparent; transition:.15s; line-height:1;
}
.btn{ color:#fff; background:linear-gradient(135deg,var(--orange-1),var(--orange-2));
  box-shadow:0 4px 14px rgba(210,72,24,.28); }
.btn:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--bleu); border-color:var(--gris-bord); }
.btn-ghost:hover{ background:#fff; border-color:var(--teal); }
.topbar .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.35); }
.topbar .btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn-block{ display:block; width:100%; margin-top:10px; }

/* --- Cartes --------------------------------------------------------------- */
.card{
  background:var(--blanc); border:1px solid var(--gris-bord);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:24px;
}
h1{font-size:1.5rem; margin:0 0 4px;}
h2{font-size:1.2rem; margin:0 0 16px; color:var(--bleu);}

/* --- Page d'entree vendeuse (connexion / inscription) --------------------- */
.login-wrap{ max-width:980px; margin:5vh auto; padding:0 18px; }
.landing{
  display:grid; grid-template-columns:1.15fr .85fr;
  border-radius:18px; overflow:hidden; box-shadow:var(--shadow);
  border:1px solid var(--gris-bord); background:#fff;
}

/* colonne argumentaire (sombre, punchy) */
.pitch{
  background:linear-gradient(160deg,var(--bleu) 0%, #07273c 100%);
  color:#fff; padding:38px 34px;
}
.pitch-brand{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.pitch-brand .login-mark svg{ width:46px; height:46px; display:block; }
.login-word{ line-height:1.05; }
.login-word b{ font-weight:800; font-size:1.25rem; color:#fff; letter-spacing:.3px; }
.login-word small{ display:block; font-size:.62rem; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--teal-clair); margin-top:3px; }
.pitch-eyebrow{ font-size:.72rem; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--teal-clair); margin:0 0 10px; }
.pitch-h1{ font-size:1.95rem; line-height:1.12; margin:0 0 12px; font-weight:800; color:#fff; }
.pitch-h1 .accent{ color:var(--teal-clair); }
.pitch-tag{ color:#cfe0ea; font-size:1.02rem; margin:0 0 22px; }
.pitch-tag b{ color:#fff; }
.pitch-list{ list-style:none; padding:0; margin:0 0 22px; display:flex; flex-direction:column; gap:11px; }
.pitch-list li{ color:#e4eef4; font-size:.96rem; display:flex; gap:10px; align-items:flex-start; }
.pitch-list b{ color:#fff; }
.pitch-list .ck{ color:#19e3a4; font-weight:900; flex:0 0 auto; }
.pitch-price{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:14px 16px; border-radius:12px; margin-bottom:18px;
  background:rgba(0,172,193,.14); border:1px solid rgba(0,172,193,.35);
}
.pitch-price b{ color:var(--teal-clair); font-size:1.55rem; font-weight:800; }
.pitch-price span{ color:#cfe0ea; font-size:.9rem; }
.pitch-trust{ color:#9fb6c5; font-size:.86rem; margin:0 0 10px; }
.pitch-trust b{ color:#cfe0ea; }
.pitch-sign{ color:var(--teal-clair); font-weight:800; font-size:1.02rem; margin:0; letter-spacing:.2px; }

/* colonne action (claire, formulaire) */
.action{ padding:32px 30px; display:flex; flex-direction:column; justify-content:center; }
.action-h{ font-size:1.3rem; margin:0 0 4px; color:var(--bleu); }
.action-sub{ margin:0 0 18px; }
.action-or{ text-align:center; color:var(--txt-doux); font-size:.78rem; font-weight:600; margin:14px 0 4px; }
.login-foot{ text-align:center; color:var(--txt-doux); font-size:.82rem; margin:18px 0 0; line-height:1.6; }

form label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:14px; color:var(--bleu); }
input{
  display:block; width:100%; margin-top:6px; font:inherit;
  padding:11px 13px; border:1px solid var(--gris-bord); border-radius:10px;
  background:#fbfdfe; color:var(--txt); transition:.15s;
}
input::placeholder{ color:#9bb0bd; }
input:focus{ outline:none; border-color:var(--teal); background:#fff;
  box-shadow:0 0 0 3px rgba(0,172,193,.18); }

/* --- Application ---------------------------------------------------------- */
.app-wrap{ max-width:900px; margin:24px auto; padding:0 18px;
  display:flex; flex-direction:column; gap:18px; }

/* --- Bandeaux ------------------------------------------------------------- */
.banner{
  border-radius:12px; padding:14px 18px; font-weight:600; font-size:.95rem;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; color:var(--bleu);
  background:linear-gradient(135deg,rgba(0,172,193,.12),rgba(0,172,193,.05));
  border:1px solid rgba(0,172,193,.35);
}
.banner .btn{ margin-left:auto; padding:9px 16px; }
.banner.sav{
  background:linear-gradient(135deg,#fff1e8,#ffe6d6);
  border-color:rgba(210,72,24,.45); color:var(--warn);
}

/* --- Tableau -------------------------------------------------------------- */
.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:.95rem; }
thead th{
  text-align:left; font-size:.72rem; letter-spacing:.6px; text-transform:uppercase;
  color:var(--txt-doux); padding:10px 12px; border-bottom:2px solid var(--gris-bord);
}
tbody td{ padding:12px; border-bottom:1px solid var(--gris); }
tbody tr:hover{ background:#f7fbfc; }

/* --- Divers --------------------------------------------------------------- */
.muted{ color:var(--txt-doux); font-size:.92rem; }
.error{ color:var(--err); font-weight:600; font-size:.9rem; margin:10px 0 0; min-height:1em; }
.sav-box summary{ cursor:pointer; font-weight:700; color:var(--bleu); }
.sav-box label{ margin-top:12px; }
.app-foot{ text-align:center; margin:2px 0 0; }
.link-btn{ background:none; border:none; color:var(--teal); font:inherit; font-weight:600;
  cursor:pointer; text-decoration:underline; text-underline-offset:2px; padding:6px; }
.link-btn:hover{ color:var(--bleu); }

/* --- Responsive ----------------------------------------------------------- */
@media(max-width:780px){
  .landing{ grid-template-columns:1fr; }
  .pitch{ padding:30px 24px; }
  .pitch-h1{ font-size:1.7rem; }
  .action{ padding:26px 22px; }
}
@media(max-width:560px){
  .topbar{ padding:12px 16px; }
  .brand-name{ font-size:1.05rem; }
  .org-chip{ display:none; }
  .card{ padding:18px; }
}