/* ange.foxchip.com — feuille de style (mobile-first, palette boulangerie) */

:root {
    /* ░░ Charte Boulangerie Ange : vert anis #cad400 (logo) + noir, sur fond vert clair ░░ */
    --ange:       #cad400;   /* accent : soulignement actif, focus, boutons d'action */
    --ange-fonce: #a3ab00;   /* survol de l'accent, bordures */
    --noir:       #121212;   /* bandeaux, barres, boutons */
    --noir-2:     #333333;   /* survol des boutons noirs */
    --fond:       #cad400;   /* fond de page = vert anis du logo (identique aux boutons d'accent) */
    --fond-2:     #dfe95c;   /* en-têtes de tableaux (dans les cartes blanches) */

    /* Alias historiques : conservés pour les styles en ligne des pages (var(--brun)…). */
    --brun:       var(--noir);
    --brun-fonce: var(--noir);
    --creme:      var(--fond);
    --creme-2:    var(--fond-2);
    --or:         var(--ange);

    --ink: #14170a;
    --muted: #55602a;
    --ok: #2e7d32;
    --warn: #b35309;
    --err: #c62828;
    --matin: #fbf4c6;
    --apresmidi: #d9e8f8;
    --soir: #e4dcf4;
    --repos: #ebece6;
    --conge: #d7efd3;
    --radius: 10px;
    --shadow: 0 1px 4px rgba(18, 18, 18, .13);
    --bord: #b6c23c;         /* bordures sur fond vert */
}

* { box-sizing: border-box; }
/* ⚠ L'attribut `hidden` doit VRAIMENT cacher. Le navigateur ne lui donne qu'un `display: none`
   de sa feuille par défaut, que la moindre règle d'auteur écrase — un `<div class="frow" hidden>`
   restait affiché parce que `.frow` déclare `display: flex`. Le défaut était visible sur
   « Mes disponibilités » : les heures « De / À » s'affichaient alors qu'on avait choisi
   « toute la journée », et semblaient donc à remplir. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; background: var(--creme); color: var(--ink);
    font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── Barre du haut ── */
.topbar {
    display: flex; align-items: center; gap: 14px;
    background: var(--brun-fonce); color: #fff;
    padding: 0 14px; min-height: 52px; position: sticky; top: 0; z-index: 50;
}
.brand { color: #fff; text-decoration: none; font-weight: 700; letter-spacing: .06em; font-size: 17px; }
.mainnav { display: flex; align-items: stretch; gap: 2px; flex: 1; }
.mainnav > a, .mainnav .ddbtn {
    color: #d6d6d6; text-decoration: none; padding: 15px 13px; font-weight: 500;
    border-bottom: 3px solid transparent; display: block;
}
.mainnav > a:hover, .mainnav .ddbtn:hover { color: #fff; }
.mainnav > a.on, .mainnav .ddbtn.on { color: #fff; border-bottom-color: var(--or); }
.dd { position: relative; }
.ddmenu {
    display: none; position: absolute; left: 0; top: 100%; min-width: 230px;
    background: #fff; color: var(--ink); border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 6px 18px rgba(0,0,0,.25); overflow: hidden;
}
.dd:hover .ddmenu, .dd:focus-within .ddmenu { display: block; }
.ddmenu a { display: block; padding: 10px 16px; color: var(--ink); text-decoration: none; }
.ddmenu a:hover { background: var(--fond-2); }
.ddmenu .sep { border-top: 1px solid #eee; margin: 4px 0; }
.userbox { display: flex; align-items: center; gap: 10px; }
/* Le nom dans la barre est devenu un LIEN vers « Mon compte » : il doit rester discret,
   mais se donner à cliquer au survol — sinon personne ne devine qu'on peut y changer son code. */
.uname { opacity: .9; font-size: 13px; color: #fff; text-decoration: none; }
.uname:hover { opacity: 1; text-decoration: underline; }
.burger { display: none; background: none; border: 0; color: #fff; font-size: 22px; padding: 6px; }

/* ── Page ── */
.page { max-width: 1180px; margin: 0 auto; padding: 18px 14px 60px; }
h1 { font-size: 22px; margin: 8px 0 16px; color: var(--brun-fonce); }
h2 { font-size: 17px; margin: 22px 0 10px; color: var(--brun-fonce); }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* ── Cartes / tableaux ── */
.card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 16px; }
table.list { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
table.list th { text-align: left; background: var(--creme-2); padding: 9px 10px; font-size: 13px; color: var(--brun-fonce); }
table.list td { padding: 9px 10px; border-top: 1px solid var(--bord); vertical-align: middle; }
table.list tr:hover td { background: #f4fbd2; }
/* Ligne de SAISIE d'une nouvelle entrée, en dernière ligne de son groupe : discrète tant qu'elle
   est vide (elle ne doit pas se lire comme une équipe existante), mais franchement identifiée dès
   qu'on la survole ou qu'on y écrit. Le trait haut pointillé marque la frontière entre ce qui est
   enregistré et ce qui ne l'est pas encore. */
table.list tr.ligne-ajout td { border-top: 1px dashed var(--bord); background: #fcfdf6; }
table.list tr.ligne-ajout:hover td, table.list tr.ligne-ajout:focus-within td { background: #f4fbd2; }
.scrollx { overflow-x: auto; }

/* ── Boutons / formulaires ── */
.btn {
    display: inline-block; background: var(--brun); color: #fff; border: 0; cursor: pointer;
    padding: 9px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none;
}
.btn:hover { background: var(--noir-2); }
.btn.gold { background: var(--ange); color: var(--noir); }
.btn.gold:hover { background: var(--ange-fonce); }
.btn.danger { background: var(--err); }
.btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,.5); }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn.outline { background: #fff; color: var(--noir); border: 1px solid var(--noir); }
.btn.outline:hover { background: var(--fond-2); color: var(--noir); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
label.f { display: block; margin: 10px 0 4px; font-weight: 600; font-size: 13px; color: var(--brun-fonce); }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=time], input[type=tel], select, textarea {
    width: 100%; padding: 9px 10px; border: 1px solid #aec25a; border-radius: 8px;
    font: inherit; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--or); border-color: var(--or); }
.frow { display: flex; gap: 12px; flex-wrap: wrap; }
.frow > div { flex: 1; min-width: 140px; }
.actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Flash / badges ── */
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-weight: 500; }
.flash.ok { background: #e5f2e6; color: var(--ok); }
.flash.err { background: #fbe4e4; color: var(--err); }
.flash.warn { background: #fdeedd; color: var(--warn); }
/* Bouton d'un message qui a une SUITE : il doit se voir comme une action, pas comme un mot
   souligné perdu au fil du texte — c'est lui qui emmène là où le refus se résout. */
.flash-lien {
    display: inline-block; margin-left: 6px; padding: 3px 10px; border-radius: 999px;
    background: currentColor; font-weight: 700; font-size: 13px; text-decoration: none;
    white-space: nowrap;
}
.flash.err   .flash-lien { color: #fbe4e4; }
.flash.warn  .flash-lien { color: #fdeedd; }
.flash.ok    .flash-lien { color: #e5f2e6; }
.flash-lien:hover { filter: brightness(1.15); }

/* Pastille de compteur dans la barre de navigation : un nombre qui attend une action. */
.pastille {
    display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 5px;
    border-radius: 999px; background: var(--ange); color: var(--noir);
    font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
}

/* ── Demande d'aménagement : une CARTE, pas une ligne de tableau ──
   Ces écrans se consultent d'abord sur un téléphone. Un tableau à cinq colonnes y déborde et
   pousse son bouton d'action hors de l'écran ; la carte se replie naturellement. */
.carte-demande { padding: 14px; }
.carte-demande-tete {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 10px; margin-bottom: 6px;
}
.carte-demande .flash { margin-bottom: 0; }
.carte-demande .actions { margin-top: 10px; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge.ok { background: #e5f2e6; color: var(--ok); }
.badge.warn { background: #fdeedd; color: var(--warn); }
.badge.err { background: #fbe4e4; color: var(--err); }
.badge.info { background: #e3f0fb; color: #1565c0; }
.badge.neutral { background: var(--repos); color: var(--muted); }

/* ── Grille planning ── */
.planning-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.planning-nav .title { font-weight: 700; color: var(--brun-fonce); font-size: 16px; flex: 1; }
table.planning { width: 100%; border-collapse: collapse; background: #fff; box-shadow: var(--shadow); border-radius: var(--radius); overflow: hidden; }
table.planning th { background: var(--brun-fonce); color: #fff; padding: 8px 6px; font-size: 12.5px; }
table.planning th.today { background: var(--ange); color: var(--noir); }
table.planning td {
    border: 1px solid var(--bord); padding: 4px; text-align: center; font-size: 12.5px;
    min-width: 96px; height: 44px; vertical-align: middle;
}
table.planning td.rowhead {
    text-align: left; font-weight: 600; background: var(--creme-2); color: var(--brun-fonce);
    min-width: 130px; padding: 6px 8px; font-size: 13px;
}
.shift { border-radius: 7px; padding: 4px 6px; font-weight: 600; display: block; }
.shift .poste { display: block; font-weight: 400; font-size: 11px; opacity: .75; }
.shift.matin { background: var(--matin); }
.shift.apresmidi { background: var(--apresmidi); }
.shift.soir { background: var(--soir); }
.cell-repos { color: #8b9668; font-size: 11.5px; }
.cell-conge { background: var(--conge); color: var(--ok); font-size: 12px; border-radius: 7px; padding: 4px; font-weight: 600; }
.hours-sum { font-size: 12px; color: var(--muted); white-space: nowrap; }
.hours-sum.over { color: var(--err); font-weight: 700; }

/* ── Mon planning (cartes jour, mobile) ── */
.daycards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.daycard { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; border-left: 5px solid var(--or); }
.daycard.off { border-left-color: #aec25a; opacity: .85; }
.daycard .dc-day { font-weight: 700; color: var(--brun-fonce); }
.daycard .dc-hours { font-size: 19px; font-weight: 700; margin: 4px 0; }
.daycard .dc-sub { font-size: 12.5px; color: var(--muted); }

/* ── Login ── */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { background: #fff; border-radius: 14px; box-shadow: 0 8px 30px rgba(18,18,18,.22); padding: 34px 30px; width: 100%; max-width: 380px; }
.login-card .brand2 { text-align: center; font-size: 26px; font-weight: 800; letter-spacing: .08em; color: var(--brun-fonce); }
.login-card .brand-sub { text-align: center; color: var(--muted); margin: 4px 0 22px; }


/* ── Responsive ── */
@media (max-width: 860px) {
    .burger { display: block; margin-left: auto; }
    .userbox { margin-left: auto; }
    .mainnav {
        display: none; position: absolute; top: 52px; left: 0; right: 0;
        background: var(--brun-fonce); flex-direction: column; padding: 6px 0 10px;
        box-shadow: 0 8px 16px rgba(0,0,0,.3);
    }
    .mainnav.open { display: flex; }
    .mainnav > a, .mainnav .ddbtn { padding: 12px 18px; border-bottom: 0; border-left: 3px solid transparent; }
    .mainnav > a.on, .mainnav .ddbtn.on { border-left-color: var(--or); }
    .dd:hover .ddmenu, .dd:focus-within .ddmenu, .ddmenu { position: static; display: block; box-shadow: none; background: #262626; }
    .ddmenu a { color: #d6d6d6; padding-left: 34px; }
    .ddmenu a:hover { background: #3a3a3a; }
    .ddmenu .sep { border-color: rgba(255,255,255,.15); }
}

/* ══ Module M5 — Vues planning (ajouts, ne rien modifier au-dessus) ══ */

/* ── Onglets : UN SEUL rendu pour toute l'application ──
   Deux familles coexistent dans le HTML — `.onglets/.onglet` (étapes numérotées : Équipes,
   Salariés, Bilan, Planning) et `.tabbar a` (vues d'un même contenu : Ma semaine / Toute
   l'équipe / Chronologie, Par salarié / Par poste). Elles partagent désormais exactement la
   même apparence : l'utilisateur qui apprend à lire un jeu d'onglets sait lire l'autre. */
.onglets, .tabbar { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 0; }
.onglet, .tabbar a {
    display: flex; align-items: center; gap: 7px; text-decoration: none;
    background: #fff; color: var(--noir); border: 1px solid var(--bord);
    border-bottom: none; border-radius: var(--radius) var(--radius) 0 0;
    padding: 9px 14px; font-weight: 600; font-size: 14px;
}
.onglet:hover, .tabbar a:hover { background: var(--fond-2); color: var(--noir); }
.onglet.on, .tabbar a.on { background: var(--noir); color: #fff; border-color: var(--noir); }
.onglet.on .etape-num { background: var(--ange); color: var(--noir); }
.onglet .etape-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%; background: var(--fond-2);
    color: var(--noir); font-size: 12px; font-weight: 700;
}
.onglet-resume { font-weight: 400; font-size: 12px; opacity: .75; }
.etape-bloc { background: #fff; border: 1px solid var(--bord); border-radius: 0 var(--radius) var(--radius); padding: 0; margin-bottom: 18px; }
.etape-bloc > .etape-corps { padding: 16px; }
/* Conteneur d'onglet SANS panneau (la page Postes empile déjà ses propres cartes) : il doit
   quand même prolonger l'onglet actif, sinon celui-ci flotte au-dessus du fond avec un espace
   qui n'a pas de sens visuel. La première carte vient se coller sous les onglets. */
.etape-bloc-plat { margin-top: 0; }
.etape-bloc-plat > .card:first-child,
.etape-bloc-plat > form:first-child > .card:first-child { border-top-left-radius: 0; margin-top: 0; }
@media (max-width: 860px) {
    .onglet, .tabbar a { padding: 8px 10px; font-size: 13px; }
    .onglet-resume { display: none; }
}

/* Carte jour : congé + repos */
.daycard.conge { border-left-color: var(--ok); background: var(--conge); }
.daycard.off .dc-hours { color: #b7ad9d; font-size: 15px; }

/* Bandeau total semaine (vue salarié) */
.total-banner { font-weight: 600; color: var(--brun-fonce); }

/* Bandeau des versions (admin) */
.version-line {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 6px; border-top: 1px solid #f0e9dc;
}
.version-line:first-of-type { border-top: 0; }
.version-line.cur { background: #fdf6e7; border-radius: 8px; }
.version-line form { display: inline; margin: 0; }

/* Grille par poste : badges nominatifs + retouches */
table.planning td.eqcell { text-align: left; vertical-align: top; padding: 6px; }
.badge-name {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--creme-2); border: 1px solid #e2d7c2; border-radius: 14px;
    padding: 2px 8px; font-size: 12px; font-weight: 600; margin: 1px;
}
.badge-name form { display: inline; margin: 0; }
.badge-name .xbtn {
    background: none; border: 0; color: var(--err); font-weight: 700; cursor: pointer;
    padding: 0 2px; font-size: 13px; line-height: 1;
}
.badge-name .xbtn:hover { color: #7f1010; }
.eq-cap { margin-top: 3px; }
.add-form { display: flex; gap: 4px; margin-top: 5px; align-items: center; }
.add-form select { width: auto; max-width: 190px; padding: 4px 6px; font-size: 12px; }
.poste-dot {
    display: inline-block; width: 12px; height: 12px; border-radius: 50%;
    vertical-align: baseline; margin-right: 2px;
}

/* Rapport de génération */
.rapport summary { cursor: pointer; font-weight: 700; color: var(--brun-fonce); }
.rapport ul { margin: 6px 0 12px; padding-left: 20px; }
.pnp-item { margin-bottom: 10px; }

/* Cellule multi-équipes (équipes en doublon même poste/jour/libellé/plage) */
.eqcell .eq-sub + .eq-sub { border-top: 1px dashed #d8cdb9; margin-top: 6px; padding-top: 6px; }

/* ── Logo officiel (public/assets/logo.png) ── */
.brand-logo { height: 40px; width: auto; display: block; padding: 4px 0; }
.brand2.brand2-logo {
    background: var(--noir); border-radius: 12px; padding: 14px;
    display: flex; justify-content: center; margin-bottom: 4px;
}
.brand2.brand2-logo img { height: 72px; width: auto; }

/* ── Tableaux compacts (listes admin denses) ── */
table.list.compact td, table.list.compact th { padding: 7px 8px; }
table.list.compact td .badge { margin: 1px 0; }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions .btn { padding: 5px 9px; font-size: 14px; line-height: 1.1; }
.row-actions form { display: inline; }
.scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scrollx > table.list { min-width: 720px; }

/* ── En-tête de jour + recopie vers d'autres jours (éditeur de plages) ── */
.dayhead {
    background: var(--creme-2); font-weight: 700; color: var(--brun-fonce);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.dayhead-nom { flex: 1; min-width: 90px; }
.daycopy { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 400; }
.daycopy-j {
    display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px;
    background: #fff; border: 1px solid #b6c85e; border-radius: 6px; padding: 2px 7px; cursor: pointer;
}
.daycopy-j:hover { border-color: var(--ange-fonce); }
.daycopy-j input { margin: 0; accent-color: var(--ange-fonce); }
/* Ancres de retour après enregistrement : dégagent la barre sticky (52 px) */
.anchor { scroll-margin-top: 68px; }

/* Texte discret hors carte : sur le vert vif du fond, on assombrit pour rester lisible */
.page > .muted, .page > p.muted, .page > .small.muted { color: #3f4700; }

/* ── Fil d'étapes « Préparer → Générer → Publier » ──────────────────────────────────────────
   Affiché en tête de « Semaine & équipes » et de « Génération & publication » : l'exploitant
   doit savoir où il en est dans la vie de la semaine. Étape courante = .on, étapes déjà
   franchies = .fait (lien cliquable vers l'écran qui les porte). */
.etapes {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin: 0 0 12px; font-size: 14.5px;
}
.etape {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px 6px 7px; border-radius: 999px;
    background: #fff; border: 1px solid var(--bord); color: var(--ink);
    text-decoration: none; white-space: nowrap; box-shadow: var(--shadow);
}
.etape + .etape::before {
    content: "→"; color: var(--muted); margin-right: 2px; font-weight: 700;
}
a.etape:hover { border-color: var(--ange-fonce); }
.etape.fait { color: var(--muted); }
.etape.fait .etape-num { background: var(--ok); color: #fff; border-color: var(--ok); }
.etape.on {
    background: var(--noir); color: #fff; border-color: var(--noir); font-weight: 700;
}
.etape.on .etape-num { background: var(--ange); color: var(--noir); border-color: var(--ange); }
.etape-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--fond-2); border: 1px solid var(--bord);
    font-size: 12.5px; font-weight: 700; line-height: 1;
}

/* ── Étapes repliables de « Génération & publication » ── */
details.etape-bloc { margin: 0 0 14px; }
details.etape-bloc > summary {
    cursor: pointer; list-style: none;
    background: #fff; border: 1px solid var(--bord); border-radius: var(--radius);
    padding: 11px 14px; box-shadow: var(--shadow); font-weight: 700;
}
details.etape-bloc > summary::-webkit-details-marker { display: none; }
details.etape-bloc > summary::before { content: "▸ "; color: var(--muted); }
details.etape-bloc[open] > summary::before { content: "▾ "; }
details.etape-bloc[open] > summary { border-radius: var(--radius) var(--radius) 0 0; }
details.etape-bloc > summary .etape-resume { font-weight: 400; color: var(--muted); }
details.etape-bloc > .etape-corps {
    border: 1px solid var(--bord); border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius); padding: 12px 14px 4px;
    background: rgba(255, 255, 255, .45);
}
details.etape-bloc > .etape-corps > h2:first-child { margin-top: 0; }

/* ── Grilles planning : la semaine entière tient sans défilement horizontal ──
   Colonnes de largeur fixe et égale (7 jours), première colonne étroite, contenu compacté. */
table.planning { table-layout: fixed; }
table.planning th:first-child, table.planning td:first-child { width: 108px; }
table.planning th:not(:first-child), table.planning td:not(:first-child) { width: calc((100% - 108px) / 7); }
table.planning td { min-width: 0; padding: 3px; font-size: 11.5px; word-break: break-word; }
table.planning td.rowhead { min-width: 0; padding: 5px 6px; font-size: 12px; }
table.planning th { padding: 6px 4px; font-size: 11.5px; }
/* Cellules « par poste » : badges de noms sur toute la largeur, sélecteur compact */
table.planning td.eqcell { padding: 4px; }
table.planning td.eqcell .badge { display: block; margin: 0 0 2px; padding: 2px 5px; font-size: 11px; line-height: 1.25; text-align: left; white-space: normal; }
table.planning td.eqcell select { width: 100%; max-width: 100%; padding: 3px 4px; font-size: 11px; }
table.planning td.eqcell .btn { padding: 2px 6px; font-size: 11px; }
table.planning td.eqcell form { display: flex; gap: 3px; align-items: center; }
table.planning .shift { padding: 3px 4px; font-size: 11.5px; }
table.planning .shift .poste { font-size: 10px; }
@media (max-width: 1100px) {
    table.planning th:first-child, table.planning td:first-child { width: 88px; }
    table.planning th:not(:first-child), table.planning td:not(:first-child) { width: calc((100% - 88px) / 7); }
    table.planning td, table.planning th { font-size: 10.5px; }
}



/* ── Vue chronologique (Gantt) : les services placés à leur heure réelle ── */
.gantt-jours { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.gantt-jour {
    text-decoration: none; color: var(--noir); background: #fff; border: 1px solid var(--bord);
    border-radius: 7px; padding: 5px 10px; font-size: 13px; font-weight: 600;
}
.gantt-jour:hover { background: var(--fond-2); }
.gantt-jour.on { background: var(--noir); color: #fff; border-color: var(--noir); }
.gantt-jour.on .muted { color: #cfcfcf; }
.gantt { border-top: 1px solid var(--bord); }
.gantt-ligne, .gantt-regle { display: flex; align-items: stretch; border-bottom: 1px solid var(--bord); }
.gantt-regle { border-bottom: 2px solid var(--noir); }
.gantt-nom {
    flex: 0 0 190px; padding: 6px 8px; font-size: 12.5px; font-weight: 600;
    display: flex; align-items: center; gap: 6px; background: var(--fond-2); color: var(--noir);
}
.gantt-nom .muted { font-weight: 400; margin-left: auto; }
.gantt-piste { position: relative; flex: 1; min-height: 34px; background: #fff; }
.gantt-regle .gantt-piste { min-height: 22px; background: transparent; }
.gantt-heure { position: absolute; top: 3px; transform: translateX(-50%); font-size: 11px; color: var(--muted); }
.gantt-trait { position: absolute; top: 0; bottom: 0; width: 1px; background: #eef0e2; }
/* La barre ne rogne plus son contenu : c'est le LIBELLÉ (.gantt-lib) qui est tronqué. Sinon
   `overflow:hidden` avalait le bouton « × » de tout service court (moins de ~2h30 de large). */
.gantt-barre {
    position: absolute; top: 4px; bottom: 4px; border-radius: 5px; color: #fff;
    font-size: 11px; font-weight: 600; padding: 2px 6px; overflow: visible; white-space: nowrap;
    display: flex; align-items: center; gap: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.2);
    min-width: 26px;
}
/* Barre portant un bouton de retrait : la place du « × » est réservée en pixels, elle ne dépend
   donc plus de la durée du service. */
.gantt-barre.avec-x { min-width: 46px; padding-right: 24px; }
.gantt-barre.forcee { outline: 2px dashed var(--err); outline-offset: -2px; }
.gantt-lib {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gantt-barre .gantt-poste { font-weight: 400; opacity: .85; margin-left: 4px; }
.gantt-eff .gantt-piste { min-height: 46px; background: #fbfdf2; }
.gantt-eff-case { position: absolute; bottom: 0; background: var(--ange-fonce); opacity: .55; }
.gantt-eff-case.alerte { background: var(--err); opacity: .8; }
@media (max-width: 860px) { .gantt-nom { flex-basis: 120px; font-size: 11.5px; } }
/* Groupes de postes dans la chronologie */
.gantt-groupe {
    display: flex; align-items: baseline; gap: 10px; padding: 5px 10px;
    background: var(--fond-2); border-left: 5px solid var(--brun);
    font-weight: 700; font-size: 13px; color: var(--noir);
    border-bottom: 1px solid var(--bord);
}
.gantt-ligne.moi .gantt-nom { background: var(--ange); }
/* Places non pourvues dans la chronologie : rouge, hachuré, sans nom */
.gantt-ligne.manque .gantt-nom { background: #fbe4e4; color: var(--err); font-style: italic; }
.gantt-barre.vide {
    background: repeating-linear-gradient(45deg, #f7c5c5, #f7c5c5 6px, #fbe4e4 6px, #fbe4e4 12px);
    color: var(--err); border: 1px dashed var(--err); box-shadow: none;
}
.gantt-ajout { display: flex; flex-direction: column; gap: 4px; padding: 5px 10px 8px 200px; background: #fffafa; border-bottom: 1px solid var(--bord); }
.gantt-ajout-ligne { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gantt-ajout select { max-width: 340px; font-size: 12px; padding: 3px 6px; }
@media (max-width: 860px) { .gantt-ajout { padding-left: 12px; } }
/* Bouton de retrait sur une barre de la chronologie */
/* Posé en absolu sur le bord droit de la barre, hors du libellé rogné : toujours cliquable,
   même sur un service d'une heure. */
.gantt-x { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); margin: 0; z-index: 2; }
.gantt-x button {
    background: rgba(255,255,255,.25); border: 0; color: #fff; cursor: pointer;
    border-radius: 4px; padding: 0 5px; font-size: 13px; line-height: 1.3; font-weight: 700;
}
.gantt-x button:hover { background: var(--err); }


/* ══════════════════════════════════════════════════════════════════════════════
   TÉLÉPHONE — palier réel (≤ 700 px)
   ──────────────────────────────────────────────────────────────────────────────
   Jusqu'ici le plus petit palier visait 860 px : un téléphone de 375 px et une
   tablette de 855 px recevaient EXACTEMENT le même rendu. Or c'est le téléphone
   qui est l'appareil des salariés — consulter son planning, poser un congé,
   signaler une indisponibilité se fait debout, d'une main.

   Trois principes, appliqués partout ci-dessous :
     · un tableau large DÉFILE, il ne se comprime pas — sept colonnes réparties
       sur 375 px font 38 px chacune, où « 06:00-14:00 » se découpe en morceaux ;
     · ce qui identifie la ligne (le nom) reste VISIBLE pendant qu'on défile ;
     · un champ de saisie fait au moins 16 px, sinon Safari iOS zoome à chaque
       prise de focus et l'utilisateur doit repincer l'écran après chaque champ.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

    /* ── Saisie ──────────────────────────────────────────────────────────────
       16 px est un SEUIL, pas une préférence : en dessous, Safari iOS zoome au
       focus. Le zoom ne se défait pas tout seul, et l'écran reste décalé pour la
       suite du formulaire. */
    input[type=text], input[type=email], input[type=password], input[type=number],
    input[type=date], input[type=time], input[type=tel], select, textarea {
        font-size: 16px; padding: 11px 12px;
    }
    label.f { font-size: 14px; }

    /* ── Cibles tactiles ─────────────────────────────────────────────────────
       Un doigt vise mal : les boutons compacts, dessinés pour une souris, sont
       à la limite de l'inatteignable. On les remonte sans toucher au bureau. */
    .btn            { padding: 12px 18px; font-size: 15px; }
    .btn.small      { padding: 9px 14px;  font-size: 14px; }
    .onglet, .tabbar a { padding: 11px 13px; font-size: 14px; }
    .gantt-jour     { padding: 9px 12px; font-size: 14px; }
    .ddmenu a       { padding: 13px 16px; }
    .mainnav > a, .mainnav .ddbtn { padding: 14px 18px; }

    /* ── Page ────────────────────────────────────────────────────────────────
       Marges resserrées : chaque pixel latéral perdu l'est sur la donnée. */
    .page {
        padding: 14px max(10px, env(safe-area-inset-right))
                 calc(72px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    }
    h1 { font-size: 20px; margin: 6px 0 12px; }
    h2 { font-size: 16px; margin: 18px 0 8px; }
    .card { padding: 13px; }
    .frow { gap: 10px; }
    .frow > div { min-width: 130px; }

    /* ── Tableaux : défiler plutôt qu'écraser ────────────────────────────────
       `table-layout: fixed` fait tenir la semaine entière sans défilement — c'est
       ce qu'on veut sur un écran large, et c'est ce qui la rend illisible sur un
       téléphone. On repasse donc en largeurs naturelles avec un minimum par
       colonne, et le conteneur `.scrollx` fait son travail.

       ⚠ `overflow: visible` sur la table est NÉCESSAIRE : avec `overflow: hidden`
       (posé pour arrondir les coins), la table devient elle-même le conteneur de
       défilement de référence, et la colonne collante ci-dessous se collerait au
       bord de la table au lieu du bord de l'écran. */
    table.planning {
        table-layout: auto; min-width: 600px; overflow: visible;
    }
    table.planning th:first-child, table.planning td:first-child {
        width: auto; min-width: 88px;
        position: sticky; left: 0; z-index: 3;
    }
    table.planning th:not(:first-child), table.planning td:not(:first-child) {
        width: auto; min-width: 74px;
    }
    table.planning td, table.planning th { font-size: 11.5px; }
    table.planning td.rowhead { min-width: 88px; font-size: 12px; }

    /* Les listes gardent un minimum lisible, mais 720 px faisaient 2 écrans de
       large sur un téléphone — le bouton d'action de fin de ligne s'y perdait. */
    .scrollx > table.list { min-width: 560px; }
    table.list td, table.list th { padding: 8px 8px; }

    /* Indice de défilement : sans lui, rien ne dit qu'il reste du contenu à
       droite — on croit simplement que la colonne manque. */
    .scrollx {
        background:
            linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left / 24px 100% no-repeat,
            linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right / 24px 100% no-repeat,
            radial-gradient(farthest-side at 0 50%, rgba(18,18,18,.16), transparent) left / 10px 100% no-repeat,
            radial-gradient(farthest-side at 100% 50%, rgba(18,18,18,.16), transparent) right / 10px 100% no-repeat;
        background-attachment: local, local, scroll, scroll;
    }

    /* ── Chronologie ─────────────────────────────────────────────────────────
       Le Gantt n'était dans AUCUN conteneur défilant : sur un téléphone sa piste
       se réduisait à quelques dizaines de pixels pour une journée entière. Il
       défile désormais, et le nom reste collé à gauche — une barre sans son nom
       ne veut rien dire. */
    .gantt { overflow-x: auto; }
    .gantt-regle, .gantt-ligne, .gantt-groupe { min-width: 620px; }
    .gantt-nom {
        flex-basis: 104px; font-size: 11px; padding: 6px;
        position: sticky; left: 0; z-index: 2;
    }
    .gantt-jours { gap: 5px; }

    /* ── Cartes jour (« Ma semaine ») : l'écran principal du salarié ─────────
       Une seule colonne, chiffres lisibles à bout de bras. */
    .daycards { grid-template-columns: 1fr; gap: 8px; }
    .daycard .dc-hours { font-size: 22px; }

    /* ── Barre du haut ───────────────────────────────────────────────────────
       Le prénom cède la place au strict nécessaire quand l'écran est étroit :
       le logo et le menu doivent tenir sans se chevaucher. */
    .topbar {
        gap: 8px;
        padding-left:  max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
    }
    .uname { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* ── Connexion ───────────────────────────────────────────────────────────*/
    .login-card { padding: 26px 20px; }
    .login-wrap { padding: 14px; }
}

/* Très petits écrans (≤ 380 px) : le prénom disparaît de la barre plutôt que de
   pousser le bouton de déconnexion hors de l'écran. */
@media (max-width: 380px) {
    .uname { display: none; }
    .page  { padding: 12px 8px 72px; }
}