/* ============================================================
   Lycée Le Cleusmeur — Portail Intranet — Design system unique
   Utilisé par toutes les pages (sauf /sup/, projet séparé).
   Modifier ici = modifier partout. Ne pas dupliquer ces règles
   dans un <style> local.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg: #f6f1e7;
  --card: #ffffff;
  --card-border: rgba(28,35,51,0.10);
  --text: #1c2333;
  --text-muted: #6b7280;
  --accent: #d8871f;
  --accent-hover: #b96f19;
  --accent-text: #ffffff;
  --accent-soft: rgba(216,135,31,0.12);
  --divider: rgba(28,35,51,0.08);
  --danger: #e15b4f;
  --danger-soft: rgba(225,91,79,0.10);
  --success: #2f9e63;
  --success-soft: rgba(47,158,99,0.12);
  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 16px 40px rgba(28,35,51,0.10);
}
:root[data-theme="dark"]{
  --bg: #1c2333;
  --card: #242d40;
  --card-border: rgba(246,241,231,0.08);
  --text: #f6f1e7;
  --text-muted: #9aa3b8;
  --accent: #efa23d;
  --accent-hover: #d8871f;
  --accent-text: #1c2333;
  --accent-soft: rgba(239,162,61,0.14);
  --divider: rgba(246,241,231,0.08);
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Inter',sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; }
h1,h2,h3,h4,.mono{ font-family:'JetBrains Mono',monospace; }
::selection{ background: var(--accent); color: var(--accent-text); }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- page chrome (header commun à toutes les pages de service) ---------- */
.page-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 28px; background: var(--card);
  border-bottom: 1px solid var(--divider);
  flex-wrap: wrap; gap: 10px;
}
.page-header .logo{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.page-header .logo img{ height:44px; width:auto; display:block; }
.page-header .logo-text{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:13px; letter-spacing:.04em; color:var(--text); }
.header-right{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
@media (max-width:480px){
  .page-header{ padding: 12px 16px; }
  .logo-text{ display:none; }
}
.breadcrumb{ font-size:12.5px; color:var(--text-muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.breadcrumb a{ text-decoration:none; color:var(--text-muted); }
.breadcrumb a:hover{ color:var(--accent); }
.breadcrumb .sep{ opacity:.5; }
.breadcrumb .current{ color:var(--text); font-weight:600; }

.icon-btn{
  width:34px; height:34px; border-radius:8px; border:1px solid var(--card-border);
  background: var(--card); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-muted); font-size:14px; text-decoration:none;
}
.icon-btn:hover{ color:var(--accent); border-color:var(--accent); }

.notif-wrap{ position:relative; }
.notif-wrap .icon-btn{ position:relative; }
.notif-badge{
  position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 3px;
  border-radius:9px; background:var(--danger); color:#fff; font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace;
}
.notif-dropdown{
  display:none; position:absolute; top:calc(100% + 8px); right:0; width:280px; max-width:80vw;
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius);
  box-shadow:var(--shadow); z-index:50; overflow:hidden;
}
.notif-dropdown.open{ display:block; }
.notif-empty{ padding:16px; font-size:12.5px; color:var(--text-muted); text-align:center; }
.notif-item{
  display:flex; align-items:center; gap:10px; padding:11px 14px; font-size:12.5px; color:var(--text);
  text-decoration:none; border-bottom:1px solid var(--divider);
}
.notif-item:last-child{ border-bottom:none; }
.notif-item:hover{ background:var(--accent-soft); }
.notif-icon{ font-size:15px; flex-shrink:0; }

.user-chip{ display:flex; align-items:center; gap:8px; font-size:13px; }
.avatar{
  width:28px; height:28px; border-radius:50%; background:var(--accent); color:var(--accent-text);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px;
  font-family:'JetBrains Mono',monospace;
}
.logout-link{ color: var(--text-muted); font-size:12px; text-decoration:none; padding:5px 10px; border:1px solid var(--card-border); border-radius:6px; }
.logout-link:hover{ color: var(--danger); border-color: var(--danger); }

/* ---------- layout ---------- */
.wrap{ max-width: 820px; margin: 0 auto; padding: 30px 22px 60px; }
.wrap.wide{ max-width: 1100px; }
.eyebrow{ font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); margin-bottom:8px; font-weight:600; }
h1.title{ font-size:23px; margin:0 0 6px; }
.subtitle{ color:var(--text-muted); font-size:13.5px; margin:0 0 26px; }

/* ---------- panels / forms ---------- */
.panel{ background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:22px; margin-bottom:18px; }
.panel h2{ font-size:14px; margin:0 0 14px; }
.panel h3{ font-size:12.5px; margin:16px 0 10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }

.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12.5px; color:var(--text-muted); margin-bottom:5px; font-weight:600; }
.field .required::after{ content:" *"; color: var(--danger); }
.field input, .field select, .field textarea{
  width:100%; background:var(--bg); border:1px solid var(--card-border); border-radius:var(--radius-sm);
  padding:10px 12px; color:var(--text); font-family:'Inter',sans-serif; font-size:13.5px;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background:#fff;
}
.field textarea{ resize:vertical; min-height:80px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field-row.cols-3{ grid-template-columns:1fr 1fr 1fr; }
@media (max-width:640px){ .field-row, .field-row.cols-3{ grid-template-columns:1fr; } }
.field-hint{ font-size:11.5px; color:var(--text-muted); margin-top:5px; }
.radio-row{ display:flex; flex-wrap:wrap; gap:14px; }
.radio-row label{ display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:500; color:var(--text); }
.radio-row input[type="radio"]{ width:auto; }

.stats-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; }
.stat-card{ display:flex; gap:12px; align-items:center; }
.pie{ width:56px; height:56px; border-radius:50%; flex-shrink:0; border:1px solid var(--card-border); }
.pie-legend{ font-size:11px; color:var(--text-muted); line-height:1.7; }
.pie-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--accent); color:var(--accent-text); border:none; border-radius:8px;
  padding:11px 20px; font-size:13.5px; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif;
  transition: filter .15s ease, transform .1s ease; text-decoration:none;
}
.btn:hover{ filter: brightness(1.08); }
.btn:active{ transform: scale(.98); }
.btn:disabled{ opacity:.5; cursor:not-allowed; filter:none; }
.btn.secondary{ background:transparent; color:var(--text); border:1.5px solid var(--card-border); }
.btn.secondary:hover{ background: var(--bg); filter:none; }
.btn.danger{ background: var(--danger); color:#fff; }
.submit-row{ display:flex; align-items:center; gap:12px; margin-top:6px; flex-wrap:wrap; }

/* ---------- dynamic line-item rows (frais, produits, budget…) ---------- */
.line-row{ display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:10px; align-items:end; margin-bottom:10px; }
.line-row.with-file{ grid-template-columns:1.6fr 1fr 1.4fr auto; }
@media (max-width:640px){ .line-row, .line-row.with-file{ grid-template-columns:1fr; } }
.remove-row{ background:transparent; border:1px solid var(--card-border); color:var(--text-muted); border-radius:7px; width:34px; height:34px; cursor:pointer; font-size:14px; }
.remove-row:hover{ color:var(--danger); border-color:var(--danger); }
.add-row{ background:transparent; border:1.5px dashed var(--card-border); color:var(--accent); border-radius:7px; padding:9px 14px; font-size:12.5px; cursor:pointer; font-family:'Inter',sans-serif; font-weight:600; }
.add-row:hover{ border-color:var(--accent); background:var(--accent-soft); }
.total-line{ display:flex; justify-content:space-between; font-size:14px; font-weight:600; padding-top:10px; margin-top:6px; border-top:1px solid var(--divider); font-family:'JetBrains Mono',monospace; }
.total-line .amount{ color:var(--accent); }

/* ---------- alerts / badges ---------- */
.alert{ padding:13px 15px; border-radius:8px; margin:16px 0; font-size:13px; }
.alert-success{ background:var(--success-soft); color:#1d6b45; border:1px solid rgba(47,158,99,0.25); }
.alert-error{ background:var(--danger-soft); color:#a13c32; border:1px solid rgba(225,91,79,0.25); }
.alert-info{ background:var(--accent-soft); color:#8a5813; border:1px solid rgba(216,135,31,0.25); }
.badge{ font-size:10px; padding:2px 8px; border-radius:20px; font-weight:600; font-family:'JetBrains Mono',monospace; display:inline-block; }
.badge-ext{ font-size:9.5px; font-family:'Inter',sans-serif; color:var(--text-muted); border:1px solid var(--card-border); border-radius:4px; padding:1px 5px; font-weight:500; }
.badge-primary{ background:var(--accent-soft); color:var(--accent-hover); }
.badge-info{ background:rgba(23,162,184,0.14); color:#0f6674; }
.badge-warning{ background:#fff3cd; color:#8a6d1c; }
.badge-success{ background:var(--success-soft); color:#1d6b45; }
.badge-danger{ background:var(--danger-soft); color:#a13c32; }

/* ---------- état des lieux : listes de chambres, comparaison ---------- */
.info-box{ background:var(--accent-soft); border-left:3px solid var(--accent); border-radius:6px; padding:10px 14px; }
.info-box.danger{ background:var(--danger-soft); border-left-color:var(--danger); }
.info-box.success{ background:var(--success-soft); border-left-color:var(--success); }
.categories-container{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:10px; }
@media (max-width:640px){ .categories-container{ grid-template-columns:1fr; } }
.categorie-titre-colonne{ font-size:13px; margin:0 0 8px; display:flex; align-items:center; justify-content:space-between; }
tr.diff-neg td{ background: var(--danger-soft); }
tr.diff-pos td{ background: var(--success-soft); }

/* ---------- portail : grille de services ---------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:14px; }
.section{ margin-bottom:30px; }
.section-label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); margin-bottom:12px; display:flex; align-items:center; gap:8px; font-weight:600; }
.section-label::after{ content:""; flex:1; height:1px; background:var(--divider); }
.card{ background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:10px; transition:border-color .15s, transform .15s; text-decoration:none; color:var(--text); }
.card:hover{ border-color:var(--accent); transform:translateY(-2px); }
.card-icon{ width:34px; height:34px; border-radius:8px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; font-size:16px; }
.card-title{ font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:6px; }
.card-desc{ font-size:12.5px; color:var(--text-muted); line-height:1.4; flex:1; }
.card-link{ font-size:12.5px; color:var(--accent); text-decoration:none; font-weight:600; }

/* ---------- side widgets (horloge / météo / vacances) ---------- */
.s-widget{ background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:14px 16px; }
.s-widget-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-bottom:6px; font-weight:600; }
.s-widget-value{ font-size:24px; font-weight:700; font-family:'JetBrains Mono',monospace; line-height:1.1; }
.s-widget-sub{ font-size:12px; color:var(--text-muted); margin-top:2px; }

/* ---------- tables ---------- */
table.data-table{ width:100%; border-collapse:collapse; font-size:13px; background:var(--card); border-radius:var(--radius); overflow:hidden; }
table.data-table th{ text-align:left; background:var(--accent); color:var(--accent-text); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; padding:9px 10px; }
table.data-table td{ padding:9px 10px; border-bottom:1px solid var(--divider); }
table.data-table tr:last-child td{ border-bottom:none; }
table.data-table tr:hover td{ background: var(--accent-soft); }

/* ---------- calendrier (réservation repas) ---------- */
.cal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:10px; flex-wrap:wrap; }
.cal-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
@media (max-width:640px){ .cal-grid{ grid-template-columns:repeat(2,1fr); } }
.cal-day{ border:1px solid var(--card-border); border-radius:8px; padding:10px 6px; text-align:center; font-size:12px; cursor:pointer; color:var(--text-muted); background:var(--card); }
.cal-day .d-num{ font-family:'JetBrains Mono',monospace; font-size:14px; color:var(--text); display:block; margin-bottom:4px; }
.cal-day.past{ opacity:.4; cursor:not-allowed; }
.cal-day.reserved{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:600; }
.cal-day.reserved.valide{ border-color:var(--success); background:var(--success-soft); color:var(--success); }
.counters{ display:flex; gap:18px; margin-top:16px; flex-wrap:wrap; }
.counter{ text-align:center; }
.counter .n{ font-family:'JetBrains Mono',monospace; font-size:22px; color:var(--accent); font-weight:700; }
.counter .l{ font-size:11px; color:var(--text-muted); }

/* ---------- signature pad ---------- */
.sign-pad{ background:var(--bg); border:1px solid var(--card-border); border-radius:8px; width:100%; height:130px; touch-action:none; cursor:crosshair; }
.sign-actions{ display:flex; justify-content:flex-end; margin-top:6px; }
.sign-actions button{ font-size:11px; background:transparent; border:none; color:var(--text-muted); cursor:pointer; text-decoration:underline; }
.signature-field input{ font-family:'Brush Script MT','Pacifico',cursive; font-size:1.3em !important; }
.signature-display{ font-family:'Brush Script MT','Pacifico',cursive; font-size:1.8em; border-bottom:2px solid var(--text); padding-bottom:8px; margin-bottom:6px; }

/* ---------- notation état des lieux (0-5) ---------- */
.note-select{ font-weight:600; }
.note-select.note-5{ background:var(--success-soft); border-color:var(--success); }
.note-select.note-4{ background:rgba(23,162,184,0.12); border-color:#17a2b8; }
.note-select.note-3{ background:var(--accent-soft); border-color:var(--accent); }
.note-select.note-2{ background:#fff3cd; border-color:#e0a72e; }
.note-select.note-1{ background:var(--danger-soft); border-color:var(--danger); }
.note-select.note-0{ background:#e2e3e5; border-color:#6c757d; }
.equip-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px dashed var(--divider); }
.equip-row label{ font-size:12.5px; margin:0; flex:1; }
.equip-row select{ width:auto; min-width:120px; }

/* ---------- misc ---------- */
.note{ font-size:12px; color:var(--text-muted); border:1px dashed var(--card-border); border-radius:8px; padding:11px 13px; margin-top:18px; }
.spinner{ width:16px; height:16px; border-radius:50%; border:2.5px solid rgba(255,255,255,0.4); border-top-color:#fff; animation:spin .7s linear infinite; display:inline-block; }
.spinner.dark{ border:2.5px solid rgba(28,35,51,0.2); border-top-color:var(--accent); }
@keyframes spin{ to{ transform:rotate(360deg); } }
footer.page-footer{ text-align:center; margin-top:20px; padding-top:16px; border-top:1px solid var(--divider); font-size:11.5px; color:var(--text-muted); }

@media print{
  .page-header, .no-print, footer.page-footer, .btn, form button{ display:none !important; }
  body{ background:#fff; }
  .panel{ box-shadow:none; border:1px solid #ccc; }
}