:root {
    --gold: #C8941A;
    --gold-dark: #A87714;
    --charcoal: #2B2B2B;
    --bg: #FFFFFF;
    --soft: #F5F2EA;
    --grid: #C9CCD1;
}
* { box-sizing: border-box; }
body {
    font-family: system-ui, "Segoe UI", Arial, sans-serif;
    margin: 0; color: var(--charcoal); background: var(--bg);
}
.brand {
    display: flex; align-items: center; gap: 16px;
    padding: 12px 22px; border-bottom: 3px solid var(--gold);
}
.brand img { height: 50px; width: auto; }
.brand .t1 { font-size: 1.4rem; font-weight: 700; letter-spacing: .5px; }
.brand .t2 { font-size: .9rem; color: var(--gold-dark); font-weight: 600; }
.brand .userbox { margin-left: auto; font-size: .9rem; }
.brand .role { color: var(--gold-dark); }
.brand .logout { color: var(--gold-dark); text-decoration: none; font-weight: 600; }
.brand .logout:hover { text-decoration: underline; }

nav.tabs { display: flex; gap: 4px; padding: 8px 18px; background: var(--soft); flex-wrap: wrap; }
nav.tabs a {
    padding: 8px 14px; border-radius: 8px 8px 0 0; text-decoration: none;
    color: var(--charcoal); font-weight: 600;
}
nav.tabs a.active { background: #fff; color: var(--gold-dark); border-bottom: 2px solid var(--gold); }
nav.tabs a:hover { background: #fff; }

.container { max-width: 1100px; margin: 18px auto; padding: 0 18px; }

h1, h2 { color: var(--charcoal); }
button, input[type=submit] {
    background: var(--gold); color: #fff; border: none; border-radius: 8px;
    padding: 10px 16px; font-weight: 600; cursor: pointer; font-size: 1rem;
}
button:hover { background: var(--gold-dark); }
input[type=text], input[type=password], input[type=date], input[type=time], input[type=number], select {
    padding: 9px 10px; border: 1px solid var(--grid); border-radius: 8px; font-size: 1rem; width: 100%;
}
label { font-weight: 600; display: block; margin: 10px 0 4px; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid var(--grid); padding: 8px 10px; text-align: left; }
th { background: #44546A; color: #fff; }
.card { border: 1px solid var(--grid); border-radius: 10px; padding: 18px; max-width: 420px; margin: 30px auto; }
.error { color: #b00020; font-weight: 600; }
.ok { color: #1b7a3d; font-weight: 600; }

/* Grille feuille du jour / mois */
.daygrid { border-collapse: collapse; width: 100%; table-layout: fixed; }
.daygrid td { border: 1px solid var(--grid); padding: 4px 6px; font-size: 12px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.daygrid td.num { width: 36px; text-align: center; font-weight: 700; }
.daygrid td.info { width: 30%; }
.daygrid tr.sep td { border: none; height: 8px; }
.daygrid .depart   { background: #E2C9C4; font-weight: 600; }
.daygrid .arrivee  { background: #D3DAC4; font-weight: 600; }
.daygrid .service  { background: #CBD5DC; font-weight: 600; }
.daygrid .turnover { background: #EAD9B0; font-weight: 600; }
.daygrid .manager  { background: #D9CFC0; font-weight: 600; }
.legend span { display: inline-block; padding: 3px 10px; margin-right: 8px;
    border: 1px solid var(--grid); font-size: 12px; }
.legend .depart{background:#E2C9C4;} .legend .arrivee{background:#D3DAC4;}
.legend .service{background:#CBD5DC;} .legend .turnover{background:#EAD9B0;}
.legend .manager{background:#D9CFC0;}
.hors-plan { color: #C00000; font-style: italic; }
.cal td, .cal th { text-align: center; font-size: 13px; }
.cal .we { background: var(--soft); }
.cal .over { background: #D9CFC0; font-weight: 700; }
@media print {
    @page { size: A4 landscape; margin: 8mm; }
    header.brand, nav.tabs, .noprint { display: none !important; }
    .container { max-width: none; margin: 0; padding: 0; }
    .daygrid td { font-size: 11px; }
}