:root {
  --fond: #f4f6f8; --carte: #ffffff; --texte: #1c2733; --discret: #5b6b7b; --bord: #d5dce3;
  --principal: #0b5cad; --principal-texte: #ffffff; --ok: #1b7f4b; --alerte: #a15c00; --danger: #b3261e;
  --ok-fond: #e3f4ea; --alerte-fond: #fff1d6; --danger-fond: #fde8e6; --neutre-fond: #e8edf2;
  --rayon: 10px; --barre-nav: 56px;
}
@media (prefers-color-scheme: dark) {
  :root { --fond: #11171d; --carte: #1a232c; --texte: #e8eef4; --discret: #9fb0c0; --bord: #2d3b48; --principal: #5aa7ef; --principal-texte: #08131f;
    --ok: #62d394; --alerte: #f0b95a; --danger: #ff8f86; --ok-fond: #17382a; --alerte-fond: #3d2f12; --danger-fond: #42201d; --neutre-fond: #26323d; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fond); color: var(--texte); }
h1 { font-size: 1.35rem; margin: .2rem 0 .8rem; } h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
a { color: var(--principal); }
.chargement { text-align: center; padding: 3rem 1rem; color: var(--discret); }
.discret { color: var(--discret); font-size: .9rem; } .gros { font-weight: 600; }
.erreur { background: var(--danger-fond); color: var(--danger); border-radius: var(--rayon); padding: .6rem .8rem; margin: .6rem 0; }
.info, .vide { color: var(--discret); padding: .6rem 0; }

/* Coque : barre du haut + contenu ; navigation en bas sur téléphone, en haut sur grand écran */
.coque { min-height: 100dvh; padding-bottom: calc(var(--barre-nav) + env(safe-area-inset-bottom)); }
.barre { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; justify-content: space-between; padding: .6rem 1rem; background: var(--carte); border-bottom: 1px solid var(--bord); padding-top: calc(.6rem + env(safe-area-inset-top)); }
.marque { font-size: 1.05rem; display: inline-flex; align-items: center; gap: .5rem; }
.logo-barre { height: 1.8rem; width: auto; max-width: 5rem; object-fit: contain; }
.logo-apercu { max-height: 6rem; max-width: 100%; object-fit: contain; display: block; margin-bottom: .6rem; }
.utilisateur { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.onglets { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--barre-nav) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: flex; overflow-x: auto; scrollbar-width: none; background: var(--carte); border-top: 1px solid var(--bord); z-index: 5; }
.onglets a { font-size: .78rem; padding: 0 .7rem; text-align: center; flex: 1 0 auto; white-space: nowrap; display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--discret); font-weight: 600; min-height: 44px; }
.onglets a.actif { color: var(--principal); box-shadow: inset 0 3px 0 var(--principal); }
#contenu { max-width: 1100px; margin: 0 auto; padding: 1rem; outline: none; }

.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1rem; margin: 0 0 1rem; }
.centre { min-height: 100dvh; display: grid; place-items: center; padding: 1rem; }
.etroite { width: 100%; max-width: 380px; }

/* Formulaires : champs larges, hauteur tactile ≥ 44 px, taille 16 px (évite le zoom automatique sur iPhone) */
.champ { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .8rem; min-width: 0; }
.champ label { font-weight: 600; font-size: .9rem; }
.aide { color: var(--discret); }
input, select, button, .bouton { font: inherit; }
input, select { min-height: 44px; padding: .5rem .7rem; border: 1px solid var(--bord); border-radius: 8px; background: var(--carte); color: var(--texte); width: 100%; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--principal); outline-offset: 2px; }
input[readonly] { background: var(--neutre-fond); }
button, .bouton { min-height: 44px; padding: .5rem 1rem; border-radius: 8px; border: 1px solid var(--bord); background: var(--carte); color: var(--texte); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
button.principal, .bouton.principal { background: var(--principal); color: var(--principal-texte); border-color: var(--principal); font-weight: 600; }
button:disabled { opacity: .55; cursor: default; }
button.lien { border: 0; background: none; color: var(--principal); padding: 0 .2rem; min-height: 32px; }
.formulaire { display: flex; flex-direction: column; }
.formulaire > button { margin-top: .4rem; }
.grille { display: grid; grid-template-columns: 1fr; column-gap: 1rem; }
.filtres { display: grid; grid-template-columns: 1fr; gap: 0 1rem; align-items: end; margin-bottom: .6rem; }
.filtres > button { margin-bottom: .8rem; }
.actions, .groupe { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: .6rem 0 1rem; }
.groupe select, .groupe input { width: auto; flex: 1 1 10rem; }
.entete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.retour { display: inline-block; margin-bottom: .4rem; text-decoration: none; }

.indicateurs { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin-bottom: 1rem; }
.indicateur { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: .8rem; }
.indicateur .valeur { font-size: 1.8rem; font-weight: 700; line-height: 1.1; } .indicateur .titre { color: var(--discret); font-size: .9rem; } .indicateur .detail { font-size: .8rem; color: var(--discret); }
.pastilles { display: flex; flex-wrap: wrap; gap: .4rem; }
.pastille { display: inline-block; padding: .15rem .6rem; border-radius: 999px; background: var(--neutre-fond); font-size: .82rem; margin: .1rem .2rem .1rem 0; }
.pastille.ok { background: var(--ok-fond); color: var(--ok); } .pastille.alerte { background: var(--alerte-fond); color: var(--alerte); } .pastille.danger { background: var(--danger-fond); color: var(--danger); }
.liste, .cartes { list-style: none; margin: 0; padding: 0; }
.liste li { padding: .6rem 0; border-top: 1px solid var(--bord); } .liste li:first-child { border-top: 0; }
.cartes li { margin-bottom: .6rem; }
.ligne-employe { display: flex; flex-direction: column; gap: .15rem; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: .7rem .9rem; text-decoration: none; color: var(--texte); min-height: 44px; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin: 1rem 0; }
.entete-fiche { display: flex; gap: 1rem; align-items: center; margin-bottom: .8rem; }
.photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: var(--neutre-fond); display: grid; place-items: center; font-size: 1.6rem; color: var(--discret); flex: none; }
.dl { margin: 0; } .kv { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-top: 1px solid var(--bord); } .kv:first-child { border-top: 0; } .kv dt { color: var(--discret); } .kv dd { margin: 0; text-align: right; overflow-wrap: anywhere; }

.table-defilante { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { padding: .45rem .6rem; text-align: right; border-top: 1px solid var(--bord); white-space: nowrap; }
th[scope="col"], th[scope="row"] { text-align: left; font-weight: 600; } thead th { border-top: 0; color: var(--discret); font-size: .82rem; }
tfoot th, tfoot td { font-weight: 700; border-top: 2px solid var(--bord); }
td.alerte { color: var(--alerte); font-weight: 700; }

@media (min-width: 720px) {
  .coque { padding-bottom: 0; }
  .barre { padding: .6rem 1.5rem; }
  .onglets { position: static; height: auto; padding: 0 1.5rem; border-top: 0; border-bottom: 1px solid var(--bord); }
  .onglets a { flex: none; font-size: 1rem; padding: 0 1.2rem; min-height: 46px; } .onglets a.actif { box-shadow: inset 0 -3px 0 var(--principal); }
  .grille { grid-template-columns: repeat(2, 1fr); } .filtres { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .indicateurs { grid-template-columns: repeat(4, 1fr); }
  .cartes { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; } .cartes li { margin: 0; }
}
@media (min-width: 1000px) { .cartes { grid-template-columns: repeat(3, 1fr); } .grille { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media print { .onglets, .barre, .actions, .filtres { display: none !important; } body { background: #fff; color: #000; } }

/* Présence par section */
.recap th[scope="row"] { text-align: left; font-weight: 600; } .recap td { text-align: right; font-variant-numeric: tabular-nums; }
.recap thead th:not(:first-child) { text-align: right; }
.recap tfoot th, .recap tfoot td { border-top: 2px solid var(--bord); font-weight: 700; }
.section-presence { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); margin: 0 0 .8rem; }
.section-presence > summary { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; align-items: center; min-height: 44px; padding: .7rem 1rem; cursor: pointer; }
.section-presence .nom-section { font-weight: 700; } .section-presence .compte { color: var(--discret); font-size: .9rem; }
.section-presence progress { grid-column: 1 / -1; width: 100%; height: .5rem; }
.section-presence > .vide, .section-presence > .liste { margin: 0; padding: .4rem 1rem .8rem; }
.liste.agents li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem .8rem; align-items: center; }
.liste.agents .agent-id { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; } .statut-agent { flex: 0 0 auto; }

/* Absences, congés, heures sup. */
.segments { display: flex; gap: .4rem; margin-bottom: 1rem; } .segments button { flex: 1; } .segments button[aria-pressed="true"] { background: var(--principal); color: var(--principal-texte); border-color: var(--principal); }
.demande .actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; margin-top: .5rem; }
.action-motif { display: inline-flex; flex-direction: column; gap: .4rem; } .motif { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; } .motif[hidden] { display: none; } .motif input { flex: 1 1 12rem; }
.choix-employe .resultats { list-style: none; margin: .3rem 0 0; padding: 0; } .choix-employe .resultats button { width: 100%; text-align: left; } .choix-employe .choisi { padding: .5rem 0; }

/* Badges */
.avertissement { background: var(--alerte-fond); color: var(--alerte); border-radius: var(--rayon); padding: .6rem .8rem; margin: .6rem 0; }
.case { display: flex; gap: .5rem; align-items: flex-start; margin: .6rem 0; min-height: 44px; } .case input { width: 1.4rem; height: 1.4rem; flex: none; }
.groupe { margin-top: .8rem; } a.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1rem; border-radius: var(--rayon); text-decoration: none; }

/* Terminaux */
.jeton { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .02em; }
.terminal { padding: .8rem 0; } .terminal .actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }

/* Correction de pointages */
.demande.annule strong, .demande.annule > div:first-child { text-decoration: line-through; opacity: .7; }
.historique { margin: .25rem 0 .5rem; padding-left: 1.1rem; font-size: .85rem; }
button.danger { color: var(--danger); border-color: var(--danger); }

/* Un élément « hidden » doit toujours disparaître, même si une classe lui donne un affichage (display) */
[hidden] { display: none !important; }

/* Tableau de bord : camemberts */
.tableau-bord { margin: 0 0 1rem; }
.grille-camemberts { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 700px) { .grille-camemberts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grille-camemberts { grid-template-columns: repeat(3, 1fr); } }
.camembert-bloc { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.camembert { flex: none; max-width: 100%; height: auto; }
.legende { list-style: none; margin: 0; padding: 0; flex: 1 1 10rem; }
.legende li { display: flex; align-items: center; gap: .4rem; padding: .15rem 0; border: 0; }
.pastille-couleur { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; flex: none; }
.carte-section-bord h3 { margin: 0 0 .2rem; font-size: 1rem; }
.carte-section-bord .resume { margin: 0 0 .6rem; color: var(--discret); font-size: .9rem; }
.actions-section { display: flex; flex-wrap: wrap; gap: .5rem; padding: .4rem 0 .6rem; }

/* Licence */
.bandeau-licence { padding: .6rem 1rem; font-size: .92rem; }
.bandeau-licence.alerte { background: var(--alerte-fond); color: var(--alerte); }
.bandeau-licence.danger { background: var(--danger-fond); color: var(--danger); }
.bandeau-licence a { color: inherit; font-weight: 600; }
.jauge { margin: .6rem 0; } .jauge progress { width: 100%; height: .7rem; }
.fiche { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: .6rem 0; } .fiche dt { color: var(--discret); } .fiche dd { margin: 0; }

/* ───── Modèle de badge importé ───── */
.mb-etapes { margin: 0 0 .6rem 1.2rem; padding: 0; } .mb-etapes li { margin: .25rem 0; }
.mb-reglages { display: grid; grid-template-columns: 1fr; gap: 0 1rem; } .mb-options { display: grid; gap: .4rem; margin: .2rem 0 .8rem; } .mb-options label { font-weight: 500; }
.mb-faces { display: flex; gap: .4rem; margin: .4rem 0; } .mb-faces button { min-height: 44px; padding: 0 1rem; border: 1px solid var(--bord); background: var(--carte); border-radius: var(--rayon) var(--rayon) 0 0; font: inherit; cursor: pointer; }
.mb-faces button.actif, .mb-faces button[aria-selected="true"] { background: var(--principal); color: var(--principal-texte); border-color: transparent; }
.mb-ajout { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .8rem; } .mb-ajout select { min-height: 44px; max-width: 100%; } .mb-sep { flex: 1 0 1rem; }
.mb-editeur { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: .6rem 0 1rem; }
.mb-scene { position: relative; width: min(100%, 380px); margin: 0 auto; background: #fff; border: 1px solid var(--bord); box-shadow: 0 2px 10px rgba(0,0,0,.15); overflow: hidden; touch-action: none; user-select: none; }
.mb-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; } .mb-fond-vide { display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; color: var(--discret); font-size: .9rem; background: repeating-linear-gradient(45deg, #fafafa, #fafafa 10px, #f0f0f0 10px, #f0f0f0 20px); }
.mb-el { position: absolute; box-sizing: border-box; outline: 1px dashed rgba(11,92,173,.55); display: flex; align-items: center; cursor: move; overflow: hidden; line-height: 1.15; }
.mb-el.choisi { outline: 2px solid var(--principal); background: rgba(11,92,173,.12); overflow: visible; z-index: 2; } .mb-el:focus-visible { outline: 3px solid #e07b39; }
.mb-texte { display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: clip; pointer-events: none; } .mb-multi .mb-texte { white-space: pre-wrap; align-self: flex-start; }
.mb-bloc { justify-content: center; font-size: .75rem; color: #555; background: rgba(120,120,120,.25); } .mb-bloc.forme-rond { border-radius: 50%; } .mb-bloc.forme-arrondi { border-radius: 12%; }
.mb-el[data-type="QR"] { background: repeating-conic-gradient(#222 0 25%, #fff 0 50%) 0 0 / 14% 14%; color: transparent; } .mb-logo { max-width: 100%; max-height: 100%; object-fit: contain; margin: 0 auto; pointer-events: none; }
.mb-poignee { position: absolute; right: -9px; bottom: -9px; width: 22px; height: 22px; border-radius: 50%; background: var(--principal); border: 2px solid #fff; cursor: nwse-resize; touch-action: none; }
.mb-panneau { min-width: 0; } .mb-panneau h3 { margin: 0 0 .6rem; font-size: 1rem; } .mb-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .8rem; }
.mb-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: .6rem 0; }
@media (min-width: 760px) { .mb-reglages { grid-template-columns: 2fr 1fr 1fr; } .mb-editeur { grid-template-columns: 380px 1fr; align-items: start; } .mb-scene { margin: 0; } }
/* Modèle de badge : cadrage de l'image, zones à effacer, forme hexagonale */
.mb-fond { overflow: hidden; } .mb-fond-img { position: absolute; max-width: none; pointer-events: none; user-select: none; }
.mb-cadre-scene { position: relative; width: min(100%, 520px); margin: .6rem auto; border: 1px solid var(--bord); touch-action: none; user-select: none; line-height: 0; }
.mb-cadre-img { width: 100%; height: auto; display: block; pointer-events: none; }
.mb-cadre { position: absolute; box-sizing: border-box; border: 2px solid var(--principal); background: rgba(11,92,173,.15); box-shadow: 0 0 0 9999px rgba(0,0,0,.35); cursor: move; }
.mb-masque { outline: 1px dashed rgba(224,123,57,.9); } .mb-masque.forme-rond { border-radius: 50%; } .mb-masque.forme-arrondi { border-radius: 12%; }
.mb-masque.forme-hexagone, .mb-bloc.forme-hexagone { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }