/* ═══════════════════════════════════════════════════
   BIRSG HEPHC — shared.css
   Styles communs à toutes les pages
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --navy:#0d1b35; --blue:#1648a0; --blue-mid:#2563c8;
  --blue-light:#e8f0fd; --blue-ultra:#f0f5ff;
  --teal:#0e7a6e; --teal-mid:#12998a; --teal-light:#e0f5f2;
  --gold:#b86a00; --gold-mid:#d98a10; --gold-light:#fef3e0;
  --red:#c0282a; --red-light:#fde8e8;
  --green:#1a7a3a; --green-light:#e4f7ea;
  --gray-50:#f5f7fc; --gray-100:#eceef6; --gray-200:#d8dcea;
  --gray-300:#b8bdd4; --gray-400:#8188a8; --gray-600:#424966;
  --text:#111827; --white:#fff;
  --shadow:0 3px 20px rgba(13,27,53,.10);
  --shadow-lg:0 8px 40px rgba(13,27,53,.14);
  --r:12px; --rlg:18px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--gray-50);
  background-image:radial-gradient(ellipse at 20% 0%,rgba(22,72,160,.06) 0%,transparent 60%);
  color:var(--text);
  font-size:14px;
  min-height:100vh;
}

/* ── HEADER ── */
.hdr {
  background:linear-gradient(145deg,var(--branding-primary,var(--navy)) 0%,var(--branding-primary-mid,#1a3a80) 60%,var(--branding-primary-end,#1e5090) 100%);
  color:#fff;
  padding:24px 40px 20px;
  position:relative;
  overflow:hidden;
}
.hdr::after {
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),var(--gold-mid),rgba(255,255,255,.15),transparent);
}
.hdr-inner { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; position:relative; z-index:1; }
.institute  { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:5px; font-weight:600; }
.doc-title  { font-family:'Playfair Display',serif; font-size:25px; font-weight:700; line-height:1.1; }
.doc-sub    { font-size:13px; color:rgba(255,255,255,.5); margin-top:3px; }
.hdr-btns   { display:flex; gap:7px; margin-top:12px; flex-wrap:wrap; position:relative; z-index:1; }

/* ── STATS HEADER ── */
.hdr-stats { display:flex; gap:18px; align-items:center; }
.hstat     { text-align:center; }
.hstat-v   { font-family:'Playfair Display',serif; font-size:27px; font-weight:700; line-height:1; }
.hstat-l   { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.4); margin-top:3px; font-weight:600; }
.hdiv      { width:1px; height:38px; background:rgba(255,255,255,.15); }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:8px 16px; border-radius:9px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:13px; font-weight:700; cursor:pointer;
  border:none; transition:all .15s;
  letter-spacing:.01em; white-space:nowrap;
}
.btn-primary  { background:linear-gradient(135deg,var(--blue),var(--blue-mid)); color:#fff; box-shadow:0 2px 10px rgba(22,72,160,.3); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(22,72,160,.4); }
.btn-ghost    { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2); }
.btn-ghost:hover { background:rgba(255,255,255,.18); }
.btn-secondary{ background:var(--gray-100); color:var(--navy); border:1.5px solid var(--gray-200); }
.btn-secondary:hover { background:var(--gray-200); }
.btn-teal     { background:linear-gradient(135deg,var(--teal),var(--teal-mid)); color:#fff; }
.btn-sm       { padding:6px 12px; font-size:12px; }

/* ── CONTAINER ── */
.container { max-width: clamp(700px, 92vw, 1600px); margin:0 auto; padding:22px 18px 80px; }

/* ── CARD ── */
.card {
  background:var(--white);
  border-radius:var(--rlg);
  box-shadow:var(--shadow);
  border:1px solid var(--gray-100);
  overflow:hidden;
  transition:all .2s;
}
.card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); }

/* ── BADGES BLOC ── */
.bloc-badge { display:inline-block; padding:1px 7px; border-radius:20px; font-size:10px; font-weight:700; margin-left:4px; }
.bb-dcb  { background:var(--blue-ultra);  color:var(--blue-mid); }
.bb-mcb2 { background:var(--teal-light);  color:var(--teal);     }
.bb-mcb3 { background:var(--gold-light);  color:var(--gold);     }
.bb-fcb  { background:var(--red-light);   color:var(--red);      }

/* ── PROGRESS BAR ── */
.prog-track { height:3px; background:var(--gray-200); border-radius:20px; overflow:hidden; }
.prog-fill  { height:100%; border-radius:20px; background:linear-gradient(90deg,var(--blue-mid),var(--teal-mid)); transition:width .4s; }

/* ── FORM FIELDS ── */
.fl       { display:flex; flex-direction:column; gap:4px; margin-bottom:11px; }
.fl label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--gray-400); }
.fi {
  width:100%; padding:8px 12px; border-radius:8px;
  border:1.5px solid var(--gray-200); background:var(--gray-50);
  font-size:13px; font-family:'Plus Jakarta Sans',sans-serif;
  color:var(--text); outline:none; transition:all .15s;
}
.fi:focus         { border-color:var(--blue-mid); background:var(--white); box-shadow:0 0 0 3px rgba(37,99,200,.1); }
.fi[readonly]     { background:var(--gray-100); cursor:default; }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:11px; }

/* ── MODAL ── */
.ov {
  position:fixed; inset:0;
  background:rgba(13,27,53,.5);
  backdrop-filter:blur(4px);
  z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:14px;
}
.modal {
  background:var(--white); border-radius:var(--rlg);
  box-shadow:var(--shadow-lg); width:100%; max-width:510px;
  overflow:hidden; max-height:90vh;
  display:flex; flex-direction:column;
}
.modal-lg { max-width:620px; }
.mh { padding:17px 22px; color:#fff; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.mh-navy  { background:linear-gradient(135deg,var(--navy),#1e3d82); }
.mh-red   { background:linear-gradient(135deg,#6b1a1a,#922222); }
.mh-teal  { background:linear-gradient(135deg,var(--teal),var(--teal-mid)); }
.mh-title { font-family:'Playfair Display',serif; font-size:17px; font-weight:700; }
.mh-sub   { font-size:12px; color:rgba(255,255,255,.55); margin-top:2px; }
.mx { width:27px; height:27px; border-radius:7px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:#fff; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; }
.mb { padding:17px 21px 21px; overflow-y:auto; flex:1; }
.mfoot { display:flex; gap:8px; justify-content:flex-end; padding-top:5px; }

/* ── TOAST ── */
.toast {
  position:fixed; bottom:20px; right:20px;
  background:var(--navy); color:#fff;
  padding:10px 17px; border-radius:var(--r);
  font-size:13px; font-weight:600;
  z-index:9999;
  transform:translateY(20px); opacity:0;
  transition:all .25s;
  box-shadow:var(--shadow-lg);
  pointer-events:none;
}
.toast.show { transform:translateY(0); opacity:1; }

/* ── EMPTY STATE ── */
.empty { text-align:center; padding:65px 20px; color:var(--gray-400); }
.empty-icon  { font-size:44px; margin-bottom:12px; }
.empty-title { font-family:'Playfair Display',serif; font-size:19px; font-weight:700; color:var(--navy); margin-bottom:8px; }

/* ── PILLS ── */
.pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 9px; border-radius:20px;
  font-size:11px; font-weight:600; cursor:pointer;
  transition:all .12px; border:1.5px solid transparent;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.pill-todo  { background:var(--gray-50);    border-color:var(--gray-200);  color:var(--gray-600); }
.pill-todo:hover { background:var(--blue-light); border-color:var(--blue-mid); color:var(--blue-mid); }
.pill-done  { background:var(--green-light); border-color:#a8ddb8;         color:var(--green);    }
.pill-draft { background:var(--gold-light);  border-color:var(--gold-mid); color:var(--gold);     }
.pill-draft:hover { background:var(--gold-mid); color:#fff; }
.pill-form            { background:var(--gray-50);    border-color:var(--gray-200);  border-style:dashed; color:var(--gray-400); font-style:italic; }
.pill-form:hover      { background:var(--gold-light); border-color:#f5d89a;           color:var(--gold); }
.pill-form.pill-done  { background:var(--green-light); border-color:#a8ddb8;          color:var(--green); }
.pill-form.pill-draft { background:var(--gold-light);  border-color:var(--gold-mid);  color:var(--gold);  }

/* ── STATUS BADGES ── */
.status-badge { display:inline-flex; align-items:center; gap:3px; padding:1px 7px; border-radius:20px; font-size:10px; font-weight:700; margin-left:4px; vertical-align:middle; }
.sb-inactif   { background:var(--gold-light); color:var(--gold); }
.sb-abandonne { background:var(--red-light);  color:var(--red);  }

/* ── ICON BUTTONS ── */
.ic-btn { width:25px; height:25px; border-radius:6px; background:var(--gray-50); border:1.5px solid var(--gray-200); cursor:pointer; font-size:11px; display:flex; align-items:center; justify-content:center; transition:all .12s; }
.ic-btn:hover         { background:var(--blue-light);  border-color:var(--blue-mid); }
.ic-btn.red:hover     { background:var(--red-light);   border-color:var(--red); }
.ic-btn.pen-on        { background:var(--red-light);   border-color:var(--red); }
.ic-btn.st-inactif    { background:var(--gold-light);  border-color:var(--gold-mid); }
.ic-btn.st-abandonne  { background:var(--red-light);   border-color:var(--red); }

/* ── SETTINGS PANEL ── */
.sp { background:var(--white); border-radius:var(--rlg); box-shadow:var(--shadow); border:1px solid var(--gray-100); margin-bottom:16px; overflow:hidden; display:none; }
.sp.open { display:block; }
.sp-hd   { background:linear-gradient(135deg,var(--navy),#1e3d82); padding:12px 18px; color:#fff; display:flex; align-items:center; gap:8px; }
.sp-title{ font-family:'Playfair Display',serif; font-size:16px; font-weight:700; flex:1; }

/* ── Tuiles d'accueil réglages ── */
.sp-home  { padding:20px 20px 10px; }
.sp-tiles { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.sp-tile  { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
            padding:22px 10px 18px; border-radius:var(--r); border:1.5px solid var(--gray-200);
            background:var(--gray-50); cursor:pointer; transition:all .14s;
            font-family:'Plus Jakarta Sans',sans-serif; text-align:center; }
.sp-tile:hover { background:var(--blue-ultra); border-color:var(--blue-light); transform:translateY(-2px); box-shadow:0 4px 12px rgba(26,98,178,.10); }
.sp-tile-icon  { font-size:32px; line-height:1; }
.sp-tile-label { font-size:12px; font-weight:600; color:var(--gray-700); line-height:1.3; }
.sp-tile:hover .sp-tile-label { color:var(--blue-mid); }
.sp-tile-admin { border-style:dashed; }

/* Bouton retour dans sp-body */
.sp-back-btn { margin-bottom:14px; padding:5px 12px; border-radius:var(--r); border:1.5px solid var(--gray-200); background:var(--white); color:var(--gray-600); font-size:12px; font-weight:600; cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif; transition:all .12s; }
.sp-back-btn:hover { background:var(--gray-100); color:var(--navy); }

.sp-body { padding:18px; }
.sp-pane { display:none; }
.sp-pane.on  { display:block; }
.sp-sec-title{ font-family:'Playfair Display',serif; font-size:15px; font-weight:700; color:var(--navy); margin-bottom:10px; }

/* ── TOGGLES ── */
.bp-toggle { width:38px; height:22px; border-radius:11px; border:none; cursor:pointer; position:relative; background:var(--gray-200); transition:background .15s; flex-shrink:0; }
.bp-toggle.on { background:var(--teal-mid); }
.bp-toggle::after { content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .15s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.bp-toggle.on::after { transform:translateX(16px); }

/* ── RESPONSIVE ── */

/* Tablet : 641px – 1024px */
@media(min-width:641px) and (max-width:1024px) {
  .hdr          { padding:18px 24px 16px; }
  .doc-title    { font-size:22px; }
  .container    { padding:16px 16px 70px; }

  /* Tuiles réglages : 3 colonnes sur tablette */
  .sp-tiles     { grid-template-columns:repeat(3,1fr); }

  /* Cibles tactiles agrandies */
  .ic-btn       { width:36px; height:36px; font-size:14px; border-radius:8px; }
  .btn-sm       { padding:9px 16px; font-size:13px; }
  .pill         { padding:7px 13px; font-size:12px; }

  /* Champs de formulaire plus hauts pour le toucher */
  .fi           { padding:11px 14px; font-size:14px; }

  /* Modale plein-largeur sur petite tablette */
  .modal        { max-width:96vw; }
}

/* Téléphone : ≤ 640px */
@media(max-width:640px) {
  .hdr          { padding:14px 12px 12px; }
  .doc-title    { font-size:18px; }
  .doc-sub      { font-size:11px; }
  .container    { padding:10px 10px 60px; }
  .frow         { grid-template-columns:1fr; }

  /* Tuiles réglages : 2 colonnes sur mobile */
  .sp-tiles     { grid-template-columns:repeat(2,1fr); gap:8px; }
  .sp-tile      { padding:16px 8px 14px; }
  .sp-tile-icon { font-size:26px; }

  /* Cibles tactiles */
  .ic-btn       { width:38px; height:38px; font-size:15px; border-radius:8px; }
  .btn-sm       { padding:10px 16px; font-size:13px; }
  .pill         { padding:8px 13px; font-size:12px; }
  .fi           { padding:12px 14px; font-size:14px; }

  /* Header : empilement vertical */
  .hdr-inner    { flex-direction:column; align-items:flex-start; gap:10px; }
  .hdr-btns     { width:100%; }
  .hdr-stats    { gap:12px; }

  /* Modales plein-écran */
  .ov           { padding:6px; }
  .modal        { max-width:100%; max-height:95vh; border-radius:14px; }
  .mh           { padding:14px 16px; }
  .mb           { padding:14px 16px 16px; }

  /* Toast en bas centré */
  .toast        { left:12px; right:12px; bottom:14px; text-align:center; }
}

/* Assurer un minimum de cible tactile sur tout écran tactile */
@media(pointer:coarse) {
  .btn          { min-height:44px; padding-top:10px; padding-bottom:10px; }
  .btn-sm       { min-height:40px; }
  .ic-btn       { min-width:40px; min-height:40px; }
  .fi           { min-height:44px; }
  select.fi     { min-height:44px; }
  .pill         { min-height:36px; }
  .bp-toggle    { width:44px; height:26px; border-radius:13px; }
  .bp-toggle::after { width:20px; height:20px; }
  .bp-toggle.on::after { transform:translateX(18px); }
}