/* Servyka - site vitrine. Aucune ressource externe. */
:root {
  --papier: #F4F7FA;
  --papier-2: #E8EEF4;
  --encre: #14304A;
  --encre-2: #3A5169;
  --gris: #5B6B7A;
  --bleu: #0F6FB8;
  --bleu-vif: #1688DC;
  --orange: #FF7F1F;
  --vert: #3F7D1E;
  --vert-vif: #62A93A;
  --ligne: #CBD6E1;
  --rayon: 10px;
  --corps: "Avenir Next", "Avenir", "Segoe UI", "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --ticket: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, "Courier New", monospace;
  --largeur: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--corps);
  font-size: 1.0625rem;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu); text-underline-offset: 3px; }
a:hover { color: var(--encre); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.passer { position: absolute; left: 12px; top: -60px; background: var(--encre); color: #fff; padding: 10px 14px; border-radius: 6px; z-index: 50; }
.passer:focus { top: 12px; }

.enveloppe { width: min(100% - 32px, var(--largeur)); margin-inline: auto; }

/* ---------- Titres ---------- */
h1, h2, h3 { font-family: var(--corps); line-height: 1.08; margin: 0; letter-spacing: -0.025em; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
p { margin: 0 0 1em; }
.chapo { font-size: clamp(1.125rem, 1.6vw, 1.3rem); color: var(--encre-2); max-width: 36em; }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 20; background: rgba(244, 247, 250, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ligne); }
.entete .enveloppe { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }
.marque { display: flex; align-items: center; text-decoration: none; }
.marque img { height: 62px; width: auto; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a:not(.bouton) { color: var(--encre); text-decoration: none; font-weight: 600; font-size: .98rem; }
.nav a:not(.bouton):hover { color: var(--bleu); text-decoration: underline; text-underline-offset: 6px; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border-radius: 8px;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  border: 2px solid var(--encre); background: transparent; color: var(--encre);
  transition: background-color .15s, color .15s, transform .15s;
}
.bouton:hover { background: var(--encre); color: #fff; }
.bouton.plein { background: var(--orange); border-color: var(--orange); color: var(--encre); }
.bouton.plein:hover { background: var(--encre); border-color: var(--encre); color: #fff; }
.bouton:active { transform: translateY(1px); }

/* ---------- Accueil ---------- */
.accueil { padding: clamp(40px, 7vw, 88px) 0 clamp(48px, 7vw, 96px); }
.accueil .enveloppe { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.accueil h1 { margin-bottom: 24px; }
.accueil .chapo { margin-bottom: 32px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.accueil .note { margin: 22px 0 0; color: var(--gris); font-size: .95rem; }

/* Le ticket : seul élément spectaculaire de la page */
.imprimante { position: relative; justify-self: center; width: min(100%, 340px); padding-top: 14px; }
.fente { height: 14px; border-radius: 7px; background: var(--encre); box-shadow: 0 6px 0 -2px rgba(20, 48, 74, .18); position: relative; z-index: 2; }
.ticket-cadre { margin-top: -6px; transform: rotate(-1.4deg); transform-origin: top center; }
.ticket {
  background: #fff; color: #1d2b38;
  font-family: var(--ticket); font-size: .84rem; line-height: 1.55;
  padding: 26px 22px 40px;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
  box-shadow: 0 1px 0 var(--ligne);
  animation: impression 3.2s steps(34, end) .4s both;
}
.ticket-ombre { filter: drop-shadow(0 14px 18px rgba(20, 48, 74, .16)); }
@keyframes impression { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.ticket .nom { font-family: var(--corps); font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; text-align: center; margin: 0; }
.ticket .sous { text-align: center; margin: 0 0 12px; color: #5b6b7a; }
.ticket hr { border: 0; border-top: 2px dashed #b9c6d3; margin: 12px 0; }
.ticket ul { list-style: none; margin: 0; padding: 0; }
.ticket li { display: grid; grid-template-columns: 3.4em 1fr auto; gap: 8px; }
.ticket li span:last-child { color: #5b6b7a; }
.ticket .entree { color: var(--vert); font-weight: 700; }
.ticket .sortie { color: var(--bleu); font-weight: 700; }
.ticket dl { margin: 0; }
.ticket dl div { display: flex; justify-content: space-between; gap: 12px; }
.ticket dt { margin: 0; }
.ticket dd { margin: 0; font-weight: 700; }
.ticket .alerte dd { color: #b3470a; }
.ticket .legende { margin: 12px 0 0; text-align: center; color: #5b6b7a; font-size: .76rem; }

/* ---------- Sections ---------- */
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section.bande { background: var(--papier-2); }
.section .tete { max-width: 40em; margin-bottom: clamp(32px, 5vw, 56px); }
.section .tete h2, .duo h2 { margin-bottom: 16px; }

/* Modules : liste à filets, pas une grille de cartes */
.modules { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--encre); }
.modules li { display: grid; grid-template-columns: minmax(0, .38fr) minmax(0, .62fr); gap: 8px 40px; padding: 22px 0; border-bottom: 1px solid var(--ligne); }
.modules h3 { margin: 0; display: flex; align-items: center; gap: 12px; }
.modules h3::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--c, var(--bleu-vif)); }
.modules p { margin: 0; color: var(--encre-2); }
.modules .bleu { --c: var(--bleu-vif); }
.modules .orange { --c: var(--orange); }
.modules .vert { --c: var(--vert-vif); }
.modules .marine { --c: var(--encre); }
.avenir { margin-top: 28px; color: var(--gris); font-size: .98rem; }

/* Correction de pointage : démonstration utilisable */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.demande { background: #fff; border: 2px solid var(--encre); border-radius: var(--rayon); padding: 22px; box-shadow: 8px 8px 0 var(--bleu-vif); max-width: 460px; }
.demande .qui { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-weight: 700; }
.demande .qui span { font-weight: 500; color: var(--gris); }
.demande .heures { display: flex; align-items: center; gap: 14px; font-family: var(--ticket); font-size: 1.5rem; margin: 0 0 6px; }
.demande .avant { color: var(--gris); text-decoration: line-through; }
.demande .fleche { color: var(--gris); }
.demande .apres { font-weight: 700; }
.demande .motif { color: var(--encre-2); margin: 0 0 18px; font-size: .98rem; }
.demande .boutons { display: flex; gap: 10px; }
.demande .bouton { min-height: 44px; flex: 1; }
.demande .etat { display: none; margin: 0; padding: 12px 14px; border-radius: 8px; font-weight: 700; }
.demande.valide .etat.ok { display: block; background: #E2F1D8; color: #25500F; }
.demande.refuse .etat.non { display: block; background: #F6E1D5; color: #7A2E05; }
.demande.valide .boutons, .demande.refuse .boutons { display: none; }
.demande .refaire { margin-top: 12px; background: none; border: 0; padding: 0; color: var(--bleu); font: inherit; text-decoration: underline; cursor: pointer; display: none; }
.demande.valide .refaire, .demande.refuse .refaire { display: inline; }

/* Étapes : une vraie suite, donc numérotée */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); counter-reset: e; }
.etapes li { counter-increment: e; padding-top: 18px; border-top: 4px solid var(--encre); }
.etapes li:nth-child(1) { border-top-color: var(--bleu-vif); }
.etapes li:nth-child(2) { border-top-color: var(--orange); }
.etapes li:nth-child(3) { border-top-color: var(--vert-vif); }
.etapes li::before { content: counter(e); display: block; font-weight: 800; font-size: 2.6rem; line-height: 1; letter-spacing: -.04em; margin-bottom: 14px; }
.etapes h3 { margin-bottom: 8px; }
.etapes p { margin: 0; color: var(--encre-2); }

/* Sécurité */
.securite { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(32px, 6vw, 80px); }
.securite h3 { margin-bottom: 6px; }
.securite p { margin: 0; color: var(--encre-2); }

/* Tarif */
.tarif { background: var(--encre); color: #fff; border-radius: 14px; padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); }
.tarif h2 { color: #fff; margin-bottom: 12px; }
.tarif .prix { font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: 18px 0 6px; }
.tarif .prix small { font-size: 1.1rem; font-weight: 600; letter-spacing: 0; color: #B3C4D4; }
.tarif .detail { color: #B3C4D4; margin: 0 0 24px; }
.tarif ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: start; }
.tarif li { display: flex; gap: 12px; align-items: baseline; }
.tarif li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: .35em; border-radius: 2px; background: var(--vert-vif); }
.tarif .bouton.plein:hover { background: #fff; border-color: #fff; color: var(--encre); }

/* Questions */
.questions { max-width: 46em; }
.questions details { border-bottom: 1px solid var(--ligne); }
.questions details:first-child { border-top: 2px solid var(--encre); }
.questions summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; font-weight: 700; font-size: 1.1rem; position: relative; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; font-weight: 500; color: var(--bleu); }
.questions details[open] summary::after { content: "\2212"; }
.questions details p { margin: 0 0 22px; color: var(--encre-2); max-width: 38em; }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 80px); }
.contact .texte p { color: var(--encre-2); }
.formulaire { display: grid; gap: 18px; }
.formulaire .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.formulaire label { display: grid; gap: 6px; font-weight: 700; font-size: .98rem; }
.formulaire .facultatif { font-weight: 500; color: var(--gris); }
.formulaire input, .formulaire textarea {
  font: inherit; color: var(--encre); background: #fff;
  border: 2px solid var(--ligne); border-radius: 8px; padding: 12px 14px; width: 100%;
}
.formulaire textarea { min-height: 140px; resize: vertical; }
.formulaire input:focus, .formulaire textarea:focus { border-color: var(--bleu); outline: none; box-shadow: 0 0 0 3px rgba(22, 136, 220, .25); }
.formulaire .accord { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; font-size: .93rem; color: var(--encre-2); }
.formulaire .accord input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--bleu); }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.retour { margin: 0; padding: 14px 16px; border-radius: 8px; font-weight: 600; display: none; }
.retour.visible { display: block; }
.retour.ok { background: #E2F1D8; color: #25500F; }
.retour.erreur { background: #F6E1D5; color: #7A2E05; }

/* Pied de page */
.pied { background: var(--encre); color: #B3C4D4; padding: 40px 0; font-size: .95rem; }
.pied .enveloppe { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.pied img { height: 46px; width: auto; }
.pied nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.pied a { color: #fff; }

/* Pages légales */
.page-legale { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 104px); }
.page-legale .enveloppe { max-width: 760px; }
.page-legale h1 { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 28px; }
.page-legale h2 { font-size: 1.35rem; margin: 36px 0 10px; letter-spacing: -.015em; }
.page-legale .a-completer { background: #FFF1D6; border-left: 5px solid var(--orange); padding: 12px 16px; border-radius: 4px; margin: 0 0 24px; }
.page-legale mark { background: #FFE2B8; color: var(--encre); padding: 0 4px; border-radius: 3px; }

/* Connexion / espace client */
.page-connexion { padding: clamp(40px, 7vw, 88px) 0 clamp(56px, 8vw, 104px); }
.page-connexion .enveloppe { max-width: 520px; }
.page-connexion h1 { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 12px; }
.page-connexion .chapo { margin-bottom: 28px; }
.carte-connexion { background: #fff; border: 2px solid var(--encre); border-radius: var(--rayon); padding: 26px; box-shadow: 8px 8px 0 var(--bleu-vif); }
.carte-connexion h2 { font-size: 1.3rem; margin-bottom: 10px; }
.carte-connexion p:last-child { margin-bottom: 0; }
.formulaire .aide { margin: 0; color: var(--gris); font-size: .93rem; }
.formulaire .retour.visible { margin: 0; }

/* ---------- Mobile ---------- */
@media (max-width: 880px) {
  .accueil .enveloppe, .duo, .contact, .tarif { grid-template-columns: minmax(0, 1fr); }
  .imprimante { margin-top: 12px; }
  .etapes, .securite { grid-template-columns: minmax(0, 1fr); }
  .modules li { grid-template-columns: minmax(0, 1fr); }
  .nav a:not(.bouton) { display: none; }
  .formulaire .deux { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .marque img { height: 46px; }
  .entete .bouton { padding: 0 14px; min-height: 44px; font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticket { animation: none; }
  .bouton { transition: none; }
}
@media print {
  .entete, .pied, .formulaire { display: none; }
}

/* Administration */
.page-admin { padding: clamp(32px, 5vw, 64px) 0 clamp(56px, 8vw, 96px); }
.page-admin h1 { font-size: clamp(2rem, 4vw, 2.6rem); margin-bottom: 20px; }
.page-admin .titre-liste { font-size: 1.3rem; margin: 40px 0 14px; }
.carte-admin { margin-bottom: 8px; }
.page-admin .retour.visible { margin-bottom: 16px; }
.admin-qui { color: var(--gris); font-size: .93rem; }
.mdp-affiche { background: #FFF1D6; border: 2px solid var(--orange); border-radius: var(--rayon); padding: 16px 20px; margin-bottom: 20px; }
.mdp-affiche p { margin: 0 0 6px; }
.mdp-affiche .mdp { font-family: var(--ticket); font-size: 1.6rem; font-weight: 700; letter-spacing: .04em; user-select: all; word-break: break-all; }
.table-defilante { overflow-x: auto; border: 2px solid var(--encre); border-radius: var(--rayon); background: #fff; }
table.clients { border-collapse: collapse; width: 100%; min-width: 880px; font-size: .95rem; }
table.clients th, table.clients td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--ligne); vertical-align: middle; }
table.clients th { background: var(--papier-2); font-size: .88rem; }
table.clients tr:last-child td { border-bottom: 0; }
table.clients tr.inactif td { color: var(--gris); }
.actions-ligne { display: flex; gap: 8px; flex-wrap: wrap; }
.actions-ligne form { margin: 0; }
.bouton.petit { min-height: 36px; padding: 0 12px; font-size: .88rem; border-width: 1.5px; }

.formulaire label .lib { display: block; }

.actions-ligne .suppr{display:flex;gap:6px;align-items:center}
.actions-ligne .suppr input{padding:4px 6px;font-size:.8rem;border:1px solid #c9d2dc;border-radius:6px;width:6.5rem}
.bouton.danger{border-color:#b3261e;color:#b3261e}
.bouton.danger:hover{background:#b3261e;color:#fff}

/* Modules par restaurant */
.modules { border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 12px 14px; margin: 10px 0 14px; }
.modules legend { font-weight: 700; padding: 0 6px; }
.case { display: block; margin: 6px 0; font-weight: 400; }
.case input { width: auto; margin-right: 6px; }
.modules-ligne { display: inline-block; vertical-align: top; }
.modules-ligne summary { cursor: pointer; list-style: none; }
.modules-ligne summary::-webkit-details-marker { display: none; }
.modules-ligne form { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--ligne); border-radius: var(--rayon); background: #fff; min-width: 240px; }

/* Personnalisation du restaurant (espace client) */
.carte-marque { margin-top: 20px; }
.carte-marque input[type=color] { width: 72px; height: 46px; padding: 2px; }
.carte-marque input[type=file] { width: 100%; }
.logo-apercu { max-width: 200px; max-height: 120px; background: #222; border-radius: 10px; padding: 8px; display: block; margin: 4px 0 12px; }
.actions-marque { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.actions-marque form { margin: 0; }
.retour.ok { color: #1b5e20; }

.logo-apercu[hidden] { display: none; }

/* Editeur de couleurs des touches (apercu de l'ecran de pointage) */





.liste-pages { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.liste-pages form { margin: 0; }

/* ---- Administration : filtres et tri ---- */
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.filtre { display: inline-flex; gap: 8px; align-items: center; padding: 7px 12px; border: 1px solid #cfd8e6; border-radius: 999px; background: #fff; color: #1d3557; font-weight: 700; font-size: .9rem; text-decoration: none; }
.filtre .nb { background: #e8eef6; border-radius: 999px; padding: 1px 8px; font-size: .8rem; }
.filtre.actif { background: #1d3557; color: #fff; border-color: #1d3557; }
.filtre.actif .nb { background: #ffffff33; color: #fff; }
.filtre.alerte:not(.actif) { border-color: #f4783b; }
.filtre.alerte:not(.actif) .nb { background: #f4783b; color: #fff; }
.barre-liste { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 14px; }
.barre-liste input[type=search] { flex: 1 1 240px; padding: 9px 12px; border: 1px solid #cfd8e6; border-radius: 10px; font: inherit; }
.barre-liste select { padding: 8px 10px; border: 1px solid #cfd8e6; border-radius: 10px; font: inherit; }
tr.attente td { background: #fff6ee; }
.pastille { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .82rem; font-weight: 700; }
.pastille.ok { background: #e3f6e8; color: #1c6b34; }
.pastille.attente { background: #ffe9d6; color: #9a4a10; }
.pastille.suspendu { background: #fde2e2; color: #9a1c1c; }

/* ---- Champs et cases (tous écrans) ---- */
.formulaire select { width: 100%; min-height: 46px; padding: 0 12px; border: 2px solid var(--ligne); border-radius: 12px; background: #fff; font: inherit; color: inherit; }
.case { display: flex; gap: 10px; align-items: flex-start; line-height: 1.35; }
.case input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; }
.form-journee { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ligne); }
.barre-liste select, .barre-liste input[type=search] { min-height: 42px; }

/* ---- Téléphone : administration et espace client ---- */
@media (max-width: 760px) {
  input, select, textarea { font-size: 16px; }              /* évite le zoom automatique sur iPhone */
  .bouton { min-height: 48px; }
  .bouton.petit { min-height: 44px; padding: 0 14px; }
  .carte-connexion { padding: 20px 18px; box-shadow: 5px 5px 0 var(--bleu-vif); }
  .carte-marque .bouton.plein, .form-journee .bouton.plein, .carte-admin .bouton.plein { width: 100%; }
  .liste-pages { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .liste-pages .bouton { width: 100%; text-align: center; line-height: 1.2; padding: 8px 10px; }
  .actions-marque .bouton, .actions-marque form { width: 100%; }
  .modules { padding: 10px 12px; }
  .modules .case { margin: 10px 0; }

  .filtres { flex-wrap: nowrap; overflow-x: auto; margin: 10px -16px; padding: 4px 16px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .filtres::-webkit-scrollbar { display: none; }
  .filtre { flex: none; padding: 10px 14px; }
  .barre-liste { display: grid; grid-template-columns: 1fr 1fr; }
  .barre-liste input[type=search] { grid-column: 1 / -1; flex: none; }
  .barre-liste label { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
  .barre-liste label select { flex: 1; }
  .barre-liste .bouton { width: 100%; }

  /* le tableau des clients devient une liste de cartes */
  .table-defilante { border: 0; background: none; overflow: visible; }
  table.clients, table.clients tbody, table.clients tr, table.clients td { display: block; min-width: 0; width: 100%; }
  table.clients thead { display: none; }
  table.clients tr { background: #fff; border: 2px solid var(--encre); border-radius: var(--rayon); margin: 0 0 14px; padding: 6px 0; overflow: hidden; }
  table.clients tr.attente { border-color: #f4783b; }
  table.clients tr.attente td { background: transparent; }
  table.clients td { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 8px; padding: 8px 14px; border: 0; align-items: start; overflow-wrap: anywhere; }
  table.clients td::before { content: attr(data-label); font-size: .8rem; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: .03em; padding-top: 2px; }
  table.clients td:first-child { display: block; font-size: 1.1rem; padding-top: 10px; }
  table.clients td:first-child::before { content: none; }
  table.clients td.actions-ligne { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; padding: 14px; border-top: 1px solid var(--ligne); }
  table.clients td.actions-ligne::before { content: none; }
  .actions-ligne form, .actions-ligne .bouton, .modules-ligne, .modules-ligne summary { width: 100%; }
  .actions-ligne .bouton { text-align: center; justify-content: center; }
  .actions-ligne .suppr { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .actions-ligne .suppr input { width: 100%; min-height: 44px; padding: 8px 10px; font-size: 16px; }
  .modules-ligne form { min-width: 0; }
}

/* ---- Espace client : démarrage, résumé, abonnement, sécurité ---- */
.raccourcis { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.raccourcis a { padding: 8px 14px; border: 1.5px solid var(--ligne); border-radius: 999px; background: #fff; color: var(--encre); font-weight: 700; font-size: .92rem; text-decoration: none; }
.raccourcis a:hover { border-color: var(--bleu); color: var(--bleu); }
.page-connexion .carte-connexion { margin-bottom: 22px; }
.compteur { font-size: .85rem; font-weight: 700; color: var(--gris); margin-left: 6px; }
.pas-demarrage { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.pas-demarrage li { display: flex; gap: 12px; align-items: flex-start; }
.pas-demarrage .coche { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ligne); display: grid; place-items: center; font-weight: 800; color: #fff; font-size: .9rem; }
.pas-demarrage li.fait .coche { background: var(--vert-vif); border-color: var(--vert-vif); }
.pas-demarrage li.fait strong { color: var(--gris); }
.pas-demarrage .sous { display: block; color: var(--gris); font-size: .93rem; margin-top: 2px; }
.en-ligne { display: inline-block; margin: 8px 8px 0 0; }
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 8px 0 12px; }
.chiffres > div { background: var(--papier); border: 1px solid var(--ligne); border-radius: 10px; padding: 14px 12px; text-align: center; }
.chiffres b { display: block; font-size: 1.7rem; color: var(--bleu); line-height: 1.1; }
.chiffres span { display: block; color: var(--gris); font-size: .88rem; margin-top: 4px; }
.alerte-liste { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #FFF1E3; border: 1px solid var(--orange); }
.alerte-liste ul { margin: 6px 0; padding-left: 20px; }
.actions-marque { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.actions-marque form { margin: 0; }
.sous-titre { font-size: 1.05rem; margin: 22px 0 8px; }
.connexions { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.connexions li { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr; gap: 10px; padding: 8px 10px; background: var(--papier); border-radius: 8px; font-size: .92rem; }
.faq details { border-bottom: 1px solid var(--ligne); padding: 12px 0; }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq details p { margin: 8px 0 0; color: var(--encre-2); }
@media (max-width: 640px) {
  .chiffres { grid-template-columns: repeat(2, 1fr); }
  .connexions li { grid-template-columns: 1fr; gap: 2px; }
  .raccourcis a { padding: 10px 14px; }
}

/* Choix par boutons (à la place des menus déroulants) */
.groupe-choix .etiquette { display: block; font-weight: 700; margin-bottom: 8px; }
.choix-heures { display: flex; flex-wrap: wrap; gap: 8px; }
.choix { position: relative; margin: 0; }
.choix input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.choix span { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; min-height: 46px; padding: 0 14px; border: 2px solid var(--ligne); border-radius: 12px; background: #fff; font-weight: 700; color: var(--encre); }
.choix input:checked + span { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.choix input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }

/* Espace client : une rubrique à la fois */
.onglets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.onglets a { padding: 10px 16px; border: 2px solid var(--ligne); border-radius: 999px; background: #fff; color: var(--encre); font-weight: 700; text-decoration: none; white-space: nowrap; }
.onglets a:hover { border-color: var(--bleu); color: var(--bleu); }
.onglets a.actif { background: var(--encre); border-color: var(--encre); color: #fff; }

/* Sécurité du compte */
.force { height: 8px; border-radius: 999px; background: var(--papier-2); overflow: hidden; }
.force span { display: block; height: 100%; width: 0; background: var(--ligne); transition: width .2s; }
.force-1 span { width: 25%; background: #C0392B; }
.force-2 span { width: 50%; background: var(--orange); }
.force-3 span { width: 75%; background: var(--vert-vif); }
.force-4 span { width: 100%; background: var(--vert); }
.force-0 span { width: 10%; background: #C0392B; }
.pas-secu { margin: 12px 0; padding-left: 20px; display: grid; gap: 14px; }
.cle-secrete { margin: 8px 0; padding: 12px 14px; border: 2px dashed var(--bleu); border-radius: 10px; background: var(--papier); font-family: var(--ticket); font-size: 1.15rem; letter-spacing: .06em; word-break: break-all; user-select: all; }

/* Journal d'activité du compte */
.activite { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.activite li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--ligne); border-radius: 10px; background: #fff; }
.activite li.courante { border-color: var(--vert-vif); background: #F2F9EC; }
.activite li.refuse { border-color: var(--orange); background: #FFF6EE; }
.activite .icone { flex: none; font-size: 1.4rem; width: 32px; text-align: center; }
.activite .detail { flex: 1; min-width: 0; display: grid; gap: 2px; }
.activite .meta { color: var(--gris); font-size: .88rem; }
.activite .pastille { flex: none; white-space: nowrap; }
@media (max-width: 560px) { .activite li { flex-wrap: wrap; } .activite .detail { flex: 1 1 calc(100% - 52px); } .activite .pastille { margin-left: 44px; } }
.filtre-activite { display: flex; gap: 8px; margin: 0 0 10px; font-size: .9rem; }
.filtre-activite a { padding: 4px 12px; border: 1px solid var(--ligne); border-radius: 999px; text-decoration: none; color: var(--gris); }
.filtre-activite a.actif { background: var(--bleu, #1a9bff); border-color: transparent; color: #fff; }
.activite .pas-moi { flex: none; font-size: .85rem; margin-left: 8px; color: var(--orange); font-weight: 600; }
.niveau-barre { height: 10px; margin: 6px 0 14px; }
.niveau-0 span { width: 6%; background: #C0392B; } .niveau-1 span { width: 25%; background: #C0392B; }
.niveau-2 span { width: 50%; background: var(--orange); } .niveau-3 span { width: 75%; background: var(--orange); }
.niveau-4 span { width: 100%; background: var(--vert-vif); }
.controles { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.controles li { display: flex; gap: 10px; align-items: flex-start; }
.controles small { display: block; color: var(--gris); }
.controles li.mauvais { font-weight: 600; }
.codes-secours { border: 1px dashed var(--orange); border-radius: 10px; padding: 12px; background: #FFF6EE; margin-bottom: 14px; }
.liste-codes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.liste-codes code { display: block; text-align: center; padding: 6px; background: #fff; border: 1px solid var(--ligne); border-radius: 8px; font-size: 1.05rem; letter-spacing: .06em; }
.codes-bas { color: var(--orange); }
.tableau-tarif { width: 100%; border-collapse: collapse; margin: 6px 0 10px; }
.tableau-tarif td { padding: 8px 0; border-bottom: 1px solid var(--ligne); }
.tableau-tarif td:last-child { text-align: right; white-space: nowrap; }
.tableau-tarif tr.total td { font-weight: 700; border-bottom: 0; font-size: 1.05rem; }
.faq-abo { border-bottom: 1px solid var(--ligne); padding: 8px 0; }
.faq-abo summary { cursor: pointer; font-weight: 600; }
.faq-abo p { margin: 8px 0 0; color: var(--gris); }
.essai-0 span { width: 3%; background: var(--vert-vif); }
.essai-1 span { width: 10%; background: var(--vert-vif); }
.essai-2 span { width: 20%; background: var(--vert-vif); }
.essai-3 span { width: 30%; background: var(--vert-vif); }
.essai-4 span { width: 40%; background: var(--vert-vif); }
.essai-5 span { width: 50%; background: var(--vert-vif); }
.essai-6 span { width: 60%; background: var(--vert-vif); }
.essai-7 span { width: 70%; background: var(--vert-vif); }
.essai-8 span { width: 80%; background: var(--vert-vif); }
.essai-9 span { width: 90%; background: var(--vert-vif); }
.essai-10 span { width: 100%; background: var(--vert-vif); }
.essai-8 span, .essai-9 span, .essai-10 span { background: var(--orange); }
.formulaire label.case { display: flex; font-weight: 400; }
.case.module { padding: 10px 12px; border: 1px solid var(--ligne); border-radius: 10px; background: #fff; margin: 8px 0; }
.case.module:has(input:checked) { border-color: var(--vert-vif); background: #F2F9EC; }
.carte-accueil p { margin: 8px 0; }
.resto-ligne { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.demandes { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.demandes li { padding: 8px 12px; border: 1px solid var(--ligne); border-radius: 10px; background: #fff; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.demandes .meta { color: var(--gris); font-size: .88rem; margin-left: auto; }

/* ===== Espace client : mise en page propre (portée : main.espace) ===== */
main.espace { padding: 28px 0 64px; }
main.espace .enveloppe { max-width: 760px; }
main.espace .espace-tete { margin-bottom: 18px; }
main.espace h1 { font-size: 1.7rem; margin: 0 0 2px; letter-spacing: -.02em; }
main.espace .chapo { margin: 0; color: var(--gris); font-size: .95rem; }
main.espace .onglets { flex-wrap: nowrap; overflow-x: auto; gap: 4px; margin: 0 0 22px; padding: 0; border-bottom: 1px solid var(--ligne); scrollbar-width: none; }
main.espace .onglets::-webkit-scrollbar { display: none; }
main.espace .onglets a { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; padding: 10px 14px; margin-bottom: -1px; font-weight: 600; color: var(--gris); }
main.espace .onglets a:hover { color: var(--encre); border-color: var(--ligne); }
main.espace .onglets a.actif { background: none; color: var(--encre); border-bottom-color: var(--bleu-vif); }
main.espace .carte-connexion { border: 1px solid var(--ligne); border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 40, 70, .05); padding: 22px; margin-bottom: 16px; }
main.espace .carte-connexion h2 { font-size: 1.1rem; margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
main.espace .carte-connexion h3, main.espace .sous-titre { font-size: .95rem; margin: 18px 0 8px; }
main.espace .carte-connexion p { margin: 0 0 10px; }
main.espace .carte-connexion p.aide, main.espace .aide { color: var(--gris); font-size: .92rem; }
main.espace .formulaire { gap: 14px; }
main.espace .formulaire label { font-weight: 600; font-size: .92rem; }
main.espace .formulaire input:not([type=checkbox]), main.espace .formulaire select { min-height: 44px; border-width: 1px; border-radius: 10px; }
main.espace .bouton { border-width: 1px; border-radius: 10px; padding: 11px 18px; font-weight: 600; }
main.espace .bouton.plein { border-color: transparent; }
main.espace .bouton.petit { padding: 7px 14px; font-size: .9rem; }
main.espace .actions-marque { display: flex; flex-wrap: wrap; gap: 10px; }
main.espace .chiffres { gap: 10px; }
main.espace .chiffres > div { border: 0; background: var(--papier-2, #F2F6FA); border-radius: 12px; }
main.espace .pas-demarrage li { padding: 10px 0; border-bottom: 1px solid var(--ligne); }
main.espace .pas-demarrage li:last-child { border-bottom: 0; }
main.espace .carte-accueil { background: var(--encre); color: #fff; border-color: var(--encre); }
main.espace .carte-accueil h2, main.espace .carte-accueil p { color: #fff; }
main.espace .carte-accueil .aide { color: #D5E1EC; }
main.espace .carte-accueil .bouton.plein { background: var(--orange); }
main.espace .case.module { margin: 6px 0; padding: 10px 12px; }
main.espace .formulaire .case.module { gap: 12px; }
main.espace .retour.visible { border-radius: 10px; margin: 0 0 16px; }
main.espace .activite li { border-radius: 10px; }
@media (min-width: 720px) {
  main.espace .modules-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
}
@media (max-width: 560px) {
  main.espace { padding-top: 18px; }
  main.espace .carte-connexion { padding: 18px 16px; }
  main.espace .actions-marque .bouton, main.espace .carte-accueil .bouton { width: 100%; text-align: center; }
}
main.espace .plus-activite { margin-top: 10px; }
main.espace .plus-activite summary { cursor: pointer; font-weight: 600; color: var(--bleu); padding: 8px 0; }
main.espace .plus-activite .activite { margin-top: 6px; }
main.espace .carte-connexion > .aide:last-child { margin-top: 12px; }

/* ===== Espace client : coque d'application (menu latéral / barre du bas) ===== */
body.app { background: #F3F6FA; }
body.app .coque { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
body.app .lateral { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; padding: 22px 16px; background: #fff; border-right: 1px solid var(--ligne); }
body.app .lateral .marque img { height: 44px; width: auto; display: block; }
body.app .resto-id { display: grid; gap: 2px; margin: 14px 0 10px; padding: 12px; background: var(--papier); border-radius: 12px; min-width: 0; }
body.app .resto-id b { font-size: .98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app .resto-id small { color: var(--gris); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app .menu { display: grid; gap: 2px; }
body.app .menu a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; color: var(--encre-2); font-weight: 600; text-decoration: none; }
body.app .menu a svg { flex: none; }
body.app .menu a:hover { background: var(--papier); color: var(--encre); }
body.app .menu a.actif { background: var(--encre); color: #fff; }
body.app .sortie { margin-top: auto; }
body.app .sortie .bouton { width: 100%; }
body.app main.espace { padding: 36px clamp(18px, 4vw, 48px) 64px; }
body.app main.espace .enveloppe { max-width: 820px; margin: 0; padding: 0; }
body.app .tete-page { margin-bottom: 22px; }
body.app .tete-page h1 { font-size: 1.9rem; margin: 0 0 4px; letter-spacing: -.02em; }
body.app .tete-page p { margin: 0; color: var(--gris); }

@media (max-width: 860px) {
  body.app .coque { display: block; padding-bottom: 76px; }
  body.app .lateral { position: static; height: auto; flex-direction: row; align-items: center; justify-content: space-between; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--ligne); }
  body.app .lateral .marque img { height: 34px; }
  body.app .resto-id { flex: 1; margin: 0 12px; padding: 0; background: none; text-align: right; }
  body.app .resto-id small { display: none; }
  body.app .sortie { margin: 0; }
  body.app .sortie .bouton { width: auto; padding: 7px 12px; font-size: .85rem; }
  body.app .menu { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--ligne); box-shadow: 0 -2px 10px rgba(15, 40, 70, .06); }
  body.app .menu a { flex-direction: column; gap: 3px; padding: 6px 2px; font-size: .68rem; text-align: center; border-radius: 10px; }
  body.app .menu a.actif { background: none; color: var(--bleu); }
  body.app .menu a.actif svg { stroke: var(--bleu-vif); }
  body.app main.espace { padding: 20px 16px 24px; }
  body.app .tete-page h1 { font-size: 1.5rem; }
}

/* ===== Pages légales : lecture confortable ===== */
.page-legale article { background: #fff; border: 1px solid var(--ligne); border-radius: 14px; padding: clamp(22px, 5vw, 48px); }
.page-legale h1 { margin-bottom: 8px; letter-spacing: -.02em; }
.page-legale section { padding-top: 6px; }
.page-legale section + section { margin-top: 8px; border-top: 1px solid var(--ligne); }
.page-legale section h2 { margin-top: 26px; }
.page-legale p { max-width: 68ch; line-height: 1.65; }
.page-legale .bloc-adresse { font-style: normal; margin: 0 0 14px; padding: 12px 16px; background: var(--papier); border-left: 4px solid var(--bleu-vif); border-radius: 6px; line-height: 1.6; }
.page-legale a { color: var(--bleu); text-underline-offset: 3px; overflow-wrap: anywhere; }
.page-legale a.lien-legal { display: inline-block; padding: 9px 16px; border: 1px solid var(--ligne); border-radius: 10px; font-weight: 600; text-decoration: none; background: var(--papier); }
.page-legale a.lien-legal:hover { border-color: var(--bleu); }
.pied nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 560px) { .page-legale { padding-top: 24px; } }
.page-legale ul { margin: 0 0 16px; padding-left: 1.3em; max-width: 68ch; display: grid; gap: 8px; line-height: 1.6; }
.page-legale li::marker { color: var(--bleu-vif); }
.fiche { margin: 0 0 16px; display: grid; gap: 0; border: 1px solid var(--ligne); border-radius: 10px; overflow: hidden; }
.fiche dt { padding: 10px 14px 0; font-weight: 700; background: var(--papier); }
.fiche dd { margin: 0; padding: 2px 14px 10px; background: var(--papier); border-bottom: 1px solid var(--ligne); line-height: 1.6; }
.fiche dd:last-child { border-bottom: 0; }
.form-abonner { display: grid; gap: 12px; }

/* ===== Espace client : gestion de l'équipe (assets/equipe.js) ===== */
.eq-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.eq-kpi { display: block; width: 100%; text-align: left; background: #fff; border: 1px solid var(--ligne); border-radius: 14px; padding: 14px 16px; cursor: pointer; font: inherit; color: var(--encre); box-shadow: 0 1px 3px rgba(15, 40, 70, .06); }
.eq-kpi:hover { border-color: var(--bleu-vif); }
.eq-kpi b { display: block; font-size: 1.7rem; line-height: 1.1; color: var(--bleu); }
.eq-kpi span { font-size: .85rem; color: #4b6178; }
.eq-nav { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; margin-bottom: 8px; }
.eq-pill, .eq-puce { border: 1px solid var(--ligne); background: #fff; color: var(--encre); border-radius: 999px; padding: 9px 16px; font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; white-space: nowrap; }
.eq-pill.on { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.eq-puce { padding: 6px 14px; font-size: .85rem; }
.eq-puce.on { background: var(--encre); color: #fff; border-color: var(--encre); }
.eq-puces { display: flex; gap: 6px; }
.eq-zone { display: grid; gap: 16px; }
.eq-carte { background: #fff; border: 1px solid var(--ligne); border-radius: 16px; padding: 20px; box-shadow: 0 1px 3px rgba(15, 40, 70, .06); }
.eq-carte h2 { margin: 0 0 6px; font-size: 1.15rem; }
.eq-carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.eq-carte-tete h2 { margin: 0; }
.eq-aide { color: #4b6178; font-size: .9rem; line-height: 1.5; margin: 2px 0 12px; }
.eq-etat { padding: 10px 12px; background: var(--papier); border-left: 4px solid var(--bleu-vif); border-radius: 8px; margin: 0 0 12px; }
.eq-barre { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0 12px; }
.eq-barre input[type="search"], .eq-recherche { flex: 1; min-width: 200px; }
.eq-compte { flex: 1; font-size: .85rem; color: #4b6178; }
.eq-carte input, .eq-carte select, .eq-carte textarea, .eq-dlg input, .eq-dlg select, .eq-dlg textarea { font: inherit; padding: 9px 12px; border: 1px solid var(--ligne); border-radius: 10px; background: #fff; color: var(--encre); max-width: 100%; box-sizing: border-box; }
.eq-btn { font: inherit; font-weight: 600; font-size: .9rem; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--ligne); background: #fff; color: var(--encre); cursor: pointer; }
.eq-btn:hover { border-color: var(--bleu-vif); }
.eq-btn.primaire { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.eq-btn.orange { background: #fff4e8; border-color: #f4c690; color: #9a4a00; }
.eq-btn.danger { background: #fff; border-color: #f0c4c0; color: #b3261e; }
.eq-btn:disabled, .eq-fl:disabled { opacity: .4; cursor: default; }
.eq-liste { display: grid; gap: 8px; }
.eq-ligne { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--ligne); border-radius: 12px; background: #fafbfd; }
.eq-nom { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 180px; font-weight: 700; }
.eq-nom small { display: block; font-weight: 400; color: #4b6178; font-size: .8rem; }
.eq-av { width: 34px; height: 34px; border-radius: 50%; background: var(--bleu); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: .9rem; }
.eq-av.cuisine { background: #e5791a; }
.eq-ordre { display: flex; flex-direction: column; gap: 2px; }
.eq-fl { border: 1px solid var(--ligne); background: #fff; border-radius: 6px; width: 28px; height: 20px; line-height: 1; font-size: .65rem; cursor: pointer; padding: 0; color: var(--encre); }
.eq-code { font-family: ui-monospace, Menlo, monospace; letter-spacing: 2px; background: var(--papier); border: 1px dashed var(--ligne); border-radius: 8px; padding: 5px 12px; cursor: pointer; color: var(--encre); font-size: .9rem; }
.eq-badge { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: #eef3f8; color: var(--encre); white-space: nowrap; }
.eq-badge.salle { background: #e3f0fb; color: #0b5a99; }
.eq-badge.cuisine, .eq-badge.orange { background: #ffebd9; color: #a04a00; }
.eq-badge.vert { background: #e4f3da; color: #2f6414; }
.eq-badge.rouge { background: #fde4e1; color: #b3261e; }
.eq-badges { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.eq-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.eq-edit { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.eq-edit input[type="text"] { min-width: 160px; flex: 1; }
.eq-vide { padding: 22px; text-align: center; color: #4b6178; background: var(--papier); border: 1px dashed var(--ligne); border-radius: 12px; }
.eq-defile { overflow-x: auto; }
.eq-table { width: 100%; border-collapse: collapse; }
.eq-table th, .eq-table td { padding: 9px 8px; border-bottom: 1px solid var(--ligne); text-align: left; font-size: .88rem; }
.eq-table th { background: var(--papier); white-space: nowrap; }
.eq-pages { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.eq-journal { display: grid; gap: 0; padding-left: 22px; background: linear-gradient(var(--ligne), var(--ligne)) no-repeat 9px 0 / 2px 100%; max-height: 560px; overflow: auto; }
.eq-evt { position: relative; padding: 8px 0 10px; border-bottom: 1px solid #f0f4f8; }
.eq-evt::before { content: ""; position: absolute; left: -17px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--bleu-vif); }
.eq-evt.securite::before { background: #c25e00; }
.eq-evt.reglages::before { background: #7a5af8; }
.eq-quand { color: #4b6178; font-size: .8rem; margin-left: 8px; }
.eq-det { font-size: .86rem; color: #33495e; margin-top: 2px; overflow-wrap: anywhere; }
.eq-cle { font-family: ui-monospace, Menlo, monospace; font-size: .8rem; overflow-wrap: anywhere; background: var(--papier); border-radius: 10px; padding: 12px; margin: 0 0 8px; display: grid; gap: 6px; }
.eq-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.eq-champ { display: grid; gap: 4px; font-size: .85rem; font-weight: 600; }
.eq-champ.pleine { grid-column: 1 / -1; }
.eq-champ[hidden] { display: none; }
.eq-champ span { color: #4b6178; font-weight: 600; }
.eq-details { margin: 14px 0; }
.eq-details summary { cursor: pointer; font-weight: 700; padding: 8px 0; }
.eq-dlg { border: 0; border-radius: 18px; padding: 0; width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 24px); box-shadow: 0 20px 60px rgba(10, 30, 50, .35); }
.eq-dlg.large { width: min(760px, calc(100vw - 24px)); }
.eq-dlg::backdrop { background: rgba(10, 25, 40, .55); }
.eq-dlg-tete { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--ligne); position: sticky; top: 0; background: #fff; z-index: 1; }
.eq-dlg-tete h3 { margin: 0; font-size: 1.1rem; }
.eq-x { border: 0; background: none; font-size: 1.2rem; cursor: pointer; color: var(--encre); padding: 4px 8px; }
.eq-dlg-corps { padding: 18px 20px 20px; display: grid; gap: 14px; }
.eq-dlg-corps p { margin: 0; line-height: 1.5; }
.eq-dlg-pied { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; }
.eq-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--encre); color: #fff; padding: 11px 20px; border-radius: 999px; font-size: .92rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 3000; max-width: calc(100vw - 32px); text-align: center; }
.eq-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.eq-toast.erreur { background: #b3261e; }
@media (max-width: 640px) {
  .eq-grille { grid-template-columns: 1fr; }
  .eq-actions { margin-left: 0; width: 100%; }
  .eq-actions .eq-btn { flex: 1; }
  .eq-toast { bottom: 84px; }
  .eq-dlg-pied .eq-btn { flex: 1; }
}

/* ===== Espace client : demandes de modification (assets/modifications.js) ===== */
.md-lignes { display: grid; gap: 6px; margin: 4px 0 10px; }
.md-ligne { padding: 8px 12px; background: var(--papier); border-radius: 10px; font-size: .92rem; overflow-wrap: anywhere; }
.md-ancien { color: #b3261e; font-weight: 700; text-decoration: line-through; }
.md-nouveau { color: #2f6414; font-weight: 700; }
.md-neutre { color: #4b6178; font-style: italic; }
.md-motif { margin: 0 0 6px; font-size: .92rem; line-height: 1.5; }
.md-ligne-edit { padding: 10px 12px; border: 1px solid var(--ligne); border-radius: 12px; display: grid; gap: 6px; background: #fafbfd; }

/* Tips (espace client) */
.tp-periode { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin: 0 0 12px; }
.tp-avis { color: #b3261e; font-weight: 600; margin: 0; }
.tp-grille { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 16px; align-items: start; }
.tp-cartes { display: grid; gap: 12px; }
.tp-defile { overflow-x: auto; background: #fff; border: 1px solid var(--ligne); border-radius: 14px; }
.tp-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tp-table th, .tp-table td { padding: 9px 12px; border-bottom: 1px solid var(--ligne); text-align: right; white-space: nowrap; }
.tp-table th:first-child, .tp-table td:first-child { text-align: left; }
.tp-table thead th { background: var(--papier); font-size: .85rem; }
.tp-table tfoot td { font-weight: 700; background: var(--papier); }
.tp-table input { width: 90px; text-align: right; }
.tp-nom.sans { color: #b3261e; }
.tp-tip { font-weight: 700; }
.tp-tip.negatif { color: #b3261e; }
.tp-valeur { font-size: 1.5rem; font-weight: 800; }
.tp-bal.neg { color: #b3261e; } .tp-bal.pos { color: #1a7f3c; }
.tp-pdf { display: grid; gap: 8px; }
.tp-pdf .eq-btn { text-align: left; justify-content: flex-start; }
@media (max-width: 800px) { .tp-grille { grid-template-columns: minmax(0, 1fr); } }
.nv-table td { vertical-align: top; text-align: left; white-space: normal; }
.nv-table td.nb { text-align: right; white-space: nowrap; }
.nv-table textarea { width: 150px; min-height: 40px; }
.nv-table input[type="date"] { width: 140px; }
.nv-cp { color: #c25a00; font-size: .8rem; white-space: pre-line; background: #fff1e3; border-radius: 6px; padding: 4px 6px; margin-bottom: 4px; }
@media print { .eq-barre, .eq-nav { display: none !important; } body.app .lateral, body.app .tete-page, .eq-toast { display: none !important; } body.app .coque { display: block !important; } }

/* Formulaire du futur salarié : recherche de commune */
.rj-champ { position: relative; }
.rj-liste { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--ligne); border-radius: 12px; box-shadow: 0 8px 24px rgba(15, 40, 70, .14); max-height: 280px; overflow-y: auto; }
.rj-liste[hidden] { display: none; }
.rj-liste li { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: .96rem; }
.rj-liste li.on, .rj-liste li:hover { background: var(--papier); }
.rj-liste li.rj-info { cursor: default; color: #4b6178; font-size: .9rem; }
.formulaire label.rj-cache { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.formulaire label.rj-cache input { width: auto; }
.formulaire input[readonly] { background: var(--papier); }
.formulaire label[hidden] { display: none; }
body.app main.espace.large .enveloppe { max-width: none; }

/* ---------- Refonte : espace client, fiche salarié, groupes de modules ---------- */
.ecrans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.ecran { background: #fff; border: 2px solid var(--encre); border-radius: var(--rayon); padding: clamp(22px, 3vw, 34px); }
.ecran.sombre { background: var(--encre); color: #fff; border-color: var(--encre); box-shadow: 8px 8px 0 var(--orange); }
.ecran .etiquette, .fiche .etiquette { margin: 0 0 8px; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bleu); }
.ecran.sombre .etiquette { color: #ffb36b; }
.ecran h3 { margin-bottom: 14px; font-size: 1.45rem; }
.ecran ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ecran li { position: relative; padding-left: 26px; }
.ecran li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 3px; background: var(--bleu-vif); }
.ecran.sombre li::before { background: var(--orange); }
.groupe { margin: 8px 0 14px; font-size: .9rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.groupe:not(:first-of-type) { margin-top: 44px; }
.fiche { background: #fff; border: 2px solid var(--encre); border-radius: var(--rayon); padding: 24px; box-shadow: 8px 8px 0 var(--vert-vif); max-width: 480px; }
.fiche dl { margin: 0 0 12px; display: grid; gap: 0; }
.fiche dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--ligne); }
.fiche dt { color: var(--gris); font-size: .95rem; }
.fiche dd { margin: 0; font-weight: 700; text-align: right; font-family: var(--ticket); font-size: .95rem; }
.fiche .legende { margin: 0; color: var(--gris); font-size: .85rem; }
.securite { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 880px) {
  .ecrans, .securite { grid-template-columns: minmax(0, 1fr); }
}

/* Espace client : autres outils (ouverts dans l'application) */
.outils-app { margin-bottom: 16px; }
.outils-liste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.outils-liste li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid var(--ligne); border-radius: 12px; background: #fafbfd; }
.outils-liste li div { display: grid; gap: 2px; min-width: 0; }
.outils-liste li span { color: var(--gris); font-size: .92rem; }
.outils-liste form { margin: 0; flex: none; }

/* ---------- Accueil : bandeau marine, le ticket sort de l'imprimante ---------- */
.accueil { background: var(--encre); color: #fff; padding: clamp(44px, 7vw, 96px) 0 clamp(72px, 8vw, 120px); position: relative; overflow: hidden; }
.accueil::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: radial-gradient(circle at 12px 18px, var(--papier-2) 11px, transparent 12px) 0 0 / 24px 18px repeat-x; }
.accueil h1 { color: #fff; font-size: clamp(2.3rem, 5.2vw, 3.9rem); }
.accueil .chapo { color: #D3DEEA; }
.accueil .note { color: #A9BBCD; }
.accueil .bouton:not(.plein) { border-color: #fff; color: #fff; }
.accueil .bouton:not(.plein):hover { background: #fff; color: var(--encre); }
.accueil .bouton.plein:hover { background: #fff; border-color: #fff; color: var(--encre); }
.accueil :focus-visible { outline-color: var(--orange); }
.fente { background: var(--orange); box-shadow: 0 0 28px rgba(255, 127, 31, .45); }
.ticket-ombre { filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .35)); }
.ticket .nom { font-size: 1.25rem; }
h1, h2 { letter-spacing: -0.035em; }
.modules h3 { font-size: 1.3rem; }
.modules h3::before { border-radius: 50%; }
.etiquette { text-transform: none; }
.ecran .etiquette, .fiche .etiquette { letter-spacing: 0; text-transform: none; font-size: .95rem; }

.tableau-admin { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tableau-admin th, .tableau-admin td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--ligne); vertical-align: middle; }
.page-admin section { margin-top: 36px; }
.page-admin select { font: inherit; padding: 12px 14px; border: 2px solid var(--ligne); border-radius: 8px; background: #fff; width: 100%; }

/* ---- Administration : fiche restaurant ---- */
.page-admin .fil { margin: 0 0 8px; }
.page-admin h1 .pastille { font-size: .9rem; vertical-align: middle; margin-left: 8px; }
.fiche-resto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; align-items: start; }
.fiche-resto .carte-admin { margin: 0; }
.fiche-resto .large { grid-column: 1 / -1; }
.fiche-resto h2 { font-size: 1.2rem; margin-bottom: 12px; }
.fiche-resto h3 { font-size: 1rem; margin: 18px 0 6px; }
.faits { margin: 0; display: grid; gap: 8px; }
.faits div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--ligne); padding-bottom: 8px; }
.faits dt { color: var(--gris); }
.faits dd { margin: 0; font-weight: 700; text-align: right; }
.liste-simple { margin: 8px 0 0; padding-left: 18px; color: var(--encre-2); font-size: .95rem; }
.grille-modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin-bottom: 14px; }
.fiche-resto .actions-ligne { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fiche-resto .actions-ligne form { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.danger-zone { border-color: #B3261E; }
.danger-zone h2 { color: #B3261E; }
@media (max-width: 880px) { .fiche-resto, .grille-modules { grid-template-columns: minmax(0, 1fr); } }
.fiche-resto .carte-connexion { box-shadow: none; border-width: 1px; border-radius: 14px; }

/* ---- Administration : vue d'ensemble ---- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 8px 0 28px; }
.kpi { display: grid; gap: 2px; padding: 16px 18px; background: #fff; border: 1px solid var(--ligne); border-radius: 14px; text-decoration: none; color: var(--encre); }
.kpi b { font-size: 1.9rem; line-height: 1.1; letter-spacing: -.03em; }
.kpi span { color: var(--gris); font-size: .9rem; }
a.kpi:hover { border-color: var(--bleu-vif); }
.kpi.alerte { border-color: #E5791A; background: #FFF6EE; }
.kpi.alerte b { color: #B3470A; }
.nouveau > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.nouveau > summary::-webkit-details-marker { display: none; }
.nouveau > summary h2 { margin: 0; }
.nouveau > summary::after { content: "+ Ajouter"; font-weight: 700; color: var(--bleu); }
.nouveau[open] > summary::after { content: "Fermer"; }
.nouveau[open] > summary { margin-bottom: 14px; }

/* ---- Administration : gabarit et nouvelles pages ---- */
body.admin main.espace .enveloppe { max-width: 1180px; }
body.admin main section + section, body.admin main .carte-admin + .carte-admin { margin-top: 24px; }
.duo-admin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; margin-top: 8px; }
.duo-admin .carte-admin { margin: 0; }
body.admin .carte-connexion.carte-admin { box-shadow: none; border: 1px solid var(--ligne); border-radius: 14px; }
body.admin .carte-admin h2 { font-size: 1.2rem; margin-bottom: 12px; }
body.admin .carte-admin h3 { font-size: 1rem; margin: 16px 0 6px; }
.a-faire { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.a-faire li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-bottom: 10px; border-bottom: 1px solid var(--ligne); }
.a-faire li:last-child { border-bottom: 0; padding-bottom: 0; }
.a-faire small { color: var(--gris); }
.vide { color: var(--gris); margin: 0; }
.actions-rapides { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.pastille-menu { font-style: normal; margin-left: auto; background: var(--orange); color: var(--encre); border-radius: 999px; padding: 0 8px; font-size: .78rem; font-weight: 800; }
body.app .menu a { position: relative; }
.pastille { background: var(--papier-2); color: var(--encre-2); }
.pastille.ok { background: #e3f6e8; color: #1c6b34; }
.pastille.attente { background: #ffe9d6; color: #9a4a10; }
.pastille.suspendu { background: #fde4e1; color: #b3261e; }
.fil { margin: 0 0 12px; }
body.admin .barre-liste { margin: 14px 0; }
@media (max-width: 880px) { .duo-admin { grid-template-columns: minmax(0, 1fr); } .pastille-menu { position: absolute; top: 2px; right: 18%; margin: 0; } }

/* ---- Vue support (lecture seule) ---- */
.bandeau-support { background: #fff3cd; border: 1px solid #e0b73c; color: #5c4400; border-radius: 12px; padding: 10px 14px; margin: 0 0 16px; font-size: .95rem; }
.support-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }
.support-form small { color: var(--gris); }