/* Gestion Calm Spa + Spa Louise — écrans au doigt (téléphone, tablette, ordinateur), clair et sombre */
:root {
  --fond: #f4f0e8; --carte: #ffffff; --texte: #24211c; --doux: #6b655b; --ligne: #e2dbcd; --or: #b08848; --or-fonce: #8a6a32;
  --nuit: #23211d; --vert: #1f8f4e; --vert-fond: #e8f5ec; --rouge: #b3261e; --rouge-fond: #fbeceb; --rouge-bouton: #c0261d; --vert-bouton: #1d7a45; /* vert foncé + texte blanc : « payé », lisible en clair et en sombre */ /* fond rouge foncé + texte blanc : lisible en clair ET en sombre (réponse d'Ahmad) */ --bleu: #24508a; --bleu-fond: #eaf1fb;
  --gris: #9a948a; --spa: #c9a86a; --mass: #7986cb; --mass-formule: #f4762a; --form: #c78aa0; --fem: #9c8ac7; --soin: #8ab3c7; --col-calm1: #dcefd6; --col-calm1-fond: #f3faf0; --col-calm2: #e6d9f2; --col-calm2-fond: #f8f3fc; --spa-louise: #2f6b3f; --spa-louise-texte: #ffffff; --col-calm1-fort: #6fbf5c; --col-calm2-fort: #a07ccc; --resa-calm1: #b5dea5; --resa-calm2: #d4bfec; --masseuse-tete: #ececec; --masseuse-fond: #fafafa; --viva-rose: #e0679a; --viva-rose-fond: #fde8f1; --supprimer-fond: #efefef; --supprimer-texte: #7a7a7a; --note-fond: #fff6d6; --note-texte: #6b5200; --ferme: repeating-linear-gradient(45deg, #ece6da 0 6px, #e2dbcd 6px 12px);
  --ombre: 0 6px 20px rgba(0, 0, 0, .12); color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --fond: #161512; --carte: #22201c; --texte: #ece6da; --doux: #a59e91; --ligne: #3a362f; --or: #d1aa66; --or-fonce: #e6c58a;
  --nuit: #0d0c0a; --vert: #5fc28a; --vert-fond: #14281d; --rouge: #ff8a80; --rouge-fond: #2e1513; --bleu: #9fc3f5; --bleu-fond: #142238;
  --gris: #6f695f; --ferme: repeating-linear-gradient(45deg, #2a2722 0 6px, #24221e 6px 12px); --col-calm1: #2c4a2a; --col-calm1-fond: #1f2a1d; --col-calm2: #3e2f52; --col-calm2-fond: #261f30; --spa-louise: #3f8a52; --col-calm1-fort: #5aa64a; --col-calm2-fort: #9474c4; --resa-calm1: #8fc47d; --resa-calm2: #b49ad6; --masseuse-tete: #2b2b2b; --masseuse-fond: #1d1d1d; --viva-rose: #f08cb6; --viva-rose-fond: #3a1f2b; --supprimer-fond: #2a2a2a; --supprimer-texte: #9a9a9a; --note-fond: #33290d; --note-texte: #f2d98a; --ombre: 0 6px 20px rgba(0, 0, 0, .5); color-scheme: dark; } }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); color: var(--texte); font: 16px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--or-fonce); }
.cache, [hidden] { display: none !important; }

/* Barre du haut */
.barre { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; background: var(--nuit); color: #fff; }
.barre .titre { font-weight: 800; letter-spacing: .02em; margin-right: auto; }
.barre .titre small { display: block; font-weight: 500; font-size: .75rem; color: #d9c79f; }
.barre select, .barre button { min-height: 42px; border-radius: 10px; border: 1px solid #4a463f; background: #2e2b26; color: #fff; padding: 0 12px; }
.barre .qui { font-size: .85rem; color: #d9c79f; }

/* Menu */
.menu { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; background: var(--carte); border-bottom: 1px solid var(--ligne); }
.menu a, .menu #menu-plus-bouton { flex: 0 0 auto; padding: 9px 14px; border-radius: 999px; text-decoration: none; color: var(--texte); background: var(--fond); border: 1px solid var(--ligne); font-weight: 600; font-size: .92rem; }
.menu #menu-plus-bouton { display: none; cursor: pointer; font: inherit; font-weight: 600; font-size: .92rem; }
.menu a.actif { background: var(--or); color: #1c1a17; border-color: var(--or); }
.menu .admin { border-style: dashed; }

main { padding: 14px 12px 90px; max-width: 1500px; margin: 0 auto; }
h1 { font-size: 1.35rem; margin: 4px 0 12px; } h2 { font-size: 1.1rem; margin: 18px 0 8px; } h3 { font-size: 1rem; margin: 12px 0 6px; }
.carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.grille2 { display: grid; gap: 12px; } @media (min-width: 900px) { .grille2 { grid-template-columns: 1fr 1fr; } }
.note { color: var(--doux); font-size: .88rem; }
.alerte { padding: 10px 12px; border-radius: 10px; margin: 8px 0; font-weight: 600; }
.alerte.rouge { background: var(--rouge-fond); color: var(--rouge); } .alerte.vert { background: var(--vert-fond); color: var(--vert); } .alerte.bleu { background: var(--bleu-fond); color: var(--bleu); }

/* Boutons et champs : gros, pour le doigt */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--carte); font-weight: 700; cursor: pointer; text-decoration: none; color: var(--texte); }
.bouton.principal { background: var(--or); border-color: var(--or); color: #1c1a17; }
.bouton.vert { background: var(--vert); border-color: var(--vert); color: #fff; } .bouton.rouge { background: var(--rouge-bouton); border-color: var(--rouge-bouton); color: #fff; }
.bouton.petit { min-height: 36px; padding: 0 10px; font-size: .88rem; }
.bouton:disabled { opacity: .5; cursor: not-allowed; }
.boutons { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
label.champ { display: grid; gap: 4px; font-weight: 600; font-size: .9rem; margin-bottom: 10px; }
label.champ input, label.champ select, label.champ textarea { min-height: 46px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--ligne); background: var(--fond); font-weight: 400; width: 100%; }
label.champ textarea { min-height: 80px; }
.ligne-champs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.coche { display: flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 600; }
.coche input { width: 22px; height: 22px; }
.jours-coches { display: flex; flex-wrap: wrap; gap: 6px; } .jours-coches label { display: flex; gap: 4px; align-items: center; padding: 6px 10px; border: 1px solid var(--ligne); border-radius: 999px; }

/* Tableaux */
.tableau { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tableau th, .tableau td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.tableau th { color: var(--doux); font-weight: 600; font-size: .82rem; }
.defile { overflow-x: auto; }
.pastille { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--fond); border: 1px solid var(--ligne); }
.pastille.rouge { background: var(--rouge-fond); color: var(--rouge); border-color: transparent; } .pastille.vert { background: var(--vert-fond); color: var(--vert); border-color: transparent; }

/* Navigation des dates */
.nav-date { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.nav-date .date { font-weight: 800; font-size: 1.05rem; min-width: 210px; text-align: center; }
.vues { display: inline-flex; border: 1px solid var(--ligne); border-radius: 12px; overflow: hidden; }
.vues button { min-height: 42px; padding: 0 14px; border: 0; background: var(--carte); font-weight: 700; cursor: pointer; }
.vues button.actif { background: var(--or); color: #1c1a17; }

/* Agenda jour : colonnes côte à côte */
.agenda { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 6px; overflow-x: auto; padding-bottom: 8px; position: relative; }
.agenda.avec-heures { grid-template-columns: 46px; }
.col-heures { position: relative; }
.col { position: relative; background: var(--carte); border: 1px solid var(--ligne); border-radius: 10px; min-width: 150px; }
.col-tete { position: sticky; top: 0; z-index: 3; padding: 8px; background: var(--carte); border-bottom: 1px solid var(--ligne); border-radius: 10px 10px 0 0; font-weight: 800; font-size: .92rem; min-height: 54px; }
.col-tete small { display: block; font-weight: 500; color: var(--doux); font-size: .75rem; }
.col-corps { position: relative; cursor: crosshair; }
.zone-fermee { position: absolute; left: 0; right: 0; background: var(--ferme); }
.zone-tardive { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(45deg, rgba(36, 80, 138, .08) 0 6px, rgba(36, 80, 138, .14) 6px 12px); border-top: 2px dashed var(--bleu); }
.trait-heure { position: absolute; left: 0; right: 0; border-top: 1px solid var(--ligne); }
.trait-heure.demi { border-top-style: dotted; opacity: .6; }
.etiquette-heure { position: absolute; right: 4px; font-size: .72rem; color: var(--doux); transform: translateY(-50%); }
.maintenant { position: absolute; left: 0; right: 0; border-top: 2px solid var(--rouge); z-index: 2; }
.bloc { position: absolute; left: 4px; right: 4px; border-radius: 8px; padding: 4px 6px; font-size: .78rem; line-height: 1.2; overflow: hidden; cursor: pointer; color: #1c1a17; box-shadow: 0 1px 3px rgba(0,0,0,.18); z-index: 1; border-left: 5px solid rgba(0,0,0,.25); }
.bloc b { display: block; font-size: .82rem; }
.bloc.spa { background: var(--spa); } .bloc.massage { background: var(--mass); color: #1c1a17; } .bloc.massage.avec-formule { background: var(--mass-formule); color: #1c1a17; } /* Ahmad, 14 oct. : massage seul = LAVANDE, massage d'une formule = ORANGE (mandarine), jamais le vert de Spa Louise */ .bloc.formule { background: var(--form); } .bloc.femmes { background: var(--fem); } .bloc.soin { background: var(--soin); }
.bloc.deplacee, .bloc.supprimee, .bloc.annulee { background: transparent !important; color: var(--doux); border: 2px dashed var(--gris); box-shadow: none; opacity: .75; z-index: 0; }
.bloc.supprimee { text-decoration: line-through; }
.bloc.pas_venu { outline: 3px solid var(--rouge); }
.bloc.indesirable::after { content: "⚠"; position: absolute; top: 2px; right: 4px; color: var(--rouge); font-size: 1rem; }
.bloc .pause { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.12); }
.bloc.en_attente { opacity: .7; border-left-style: dotted; }

/* Semaine et mois */
/* Vue Semaine : 7 jours côte à côte, heures à gauche (fixées en défilant de côté) */
.agenda-semaine { display: grid; grid-template-columns: 46px repeat(7, minmax(170px, 1fr)); gap: 6px; overflow-x: auto; padding-bottom: 8px; }
.agenda-semaine .col-heures { position: sticky; left: 0; z-index: 4; background: var(--fond); }
.jour-semaine { min-width: 0; display: flex; flex-direction: column; }
.jour-tete { display: block; position: sticky; top: 0; z-index: 4; padding: 6px 4px; text-align: center; font-weight: 800; font-size: .88rem; background: var(--carte); border: 1px solid var(--ligne); border-radius: 10px; margin-bottom: 4px; color: inherit; text-decoration: none; min-height: 34px; }
.jour-semaine.aujourdhui .jour-tete { border-color: var(--rouge); color: var(--rouge); }
.voies { display: grid; gap: 3px; }
.col.compacte { min-width: 0; border-radius: 8px; }
.col.compacte .col-tete { min-height: 34px; padding: 3px 2px; font-size: .66rem; line-height: 1.15; border-radius: 8px 8px 0 0; text-align: center; overflow-wrap: anywhere; display: grid; place-items: center; }
.col.compacte .col-tete small { display: none; }
.col.compacte .bloc { left: 1px; right: 1px; padding: 2px 3px; font-size: .66rem; border-left-width: 3px; }
.col.compacte .bloc b { font-size: .68rem; }
.semaine { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.jour-carte h3 { margin: 0 0 6px; } .jour-carte .resa { display: flex; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--ligne); cursor: pointer; font-size: .9rem; }
.jour-carte .resa .h { font-weight: 800; min-width: 50px; } .jour-carte .resa.grise { color: var(--doux); text-decoration: line-through; }
.mois { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .mois .nom-jour { text-align: center; font-size: .8rem; color: var(--doux); font-weight: 700; }
.mois .case { min-height: 74px; background: var(--carte); border: 1px solid var(--ligne); border-radius: 8px; padding: 5px; cursor: pointer; font-size: .8rem; }
.mois .case.vide { background: transparent; border: 0; cursor: default; } .mois .case.aujourdhui { outline: 2px solid var(--or); }
.mois .case b { display: block; font-size: .95rem; }

/* Fenêtre (fiche, formulaire) */
.voile { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .5); display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 760px) { .voile { align-items: center; } }
.fenetre { width: min(720px, 100%); max-height: 92vh; overflow: auto; background: var(--carte); border-radius: 18px 18px 0 0; padding: 18px 16px 24px; box-shadow: var(--ombre); }
@media (min-width: 760px) { .fenetre { border-radius: 18px; } }
.fenetre .fermer { float: right; border: 0; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--doux); }
.infos { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: .95rem; } .infos dt { color: var(--doux); } .infos dd { margin: 0; font-weight: 600; }

/* Connexion : grand clavier */
.connexion { max-width: 380px; margin: 8vh auto; text-align: center; }
.connexion input { font-size: 1.6rem; text-align: center; letter-spacing: .3em; }
.clavier { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.clavier button { min-height: 60px; font-size: 1.4rem; font-weight: 800; border-radius: 14px; border: 1px solid var(--ligne); background: var(--carte); cursor: pointer; }
.qr svg { width: 220px; height: 220px; background: #fff; padding: 8px; border-radius: 10px; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 80; background: var(--nuit); color: #fff; padding: 12px 18px; border-radius: 12px; box-shadow: var(--ombre); font-weight: 700; max-width: 92vw; }
.toast.rouge { background: var(--rouge-bouton); color: #fff; }
.legende { display: flex; flex-wrap: wrap; gap: 10px; font-size: .8rem; color: var(--doux); margin: 8px 0; } .legende span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; background: var(--c); }

/* Téléphone : en-tête compact, l'agenda commence tout de suite */
.legende-repli summary { cursor: pointer; color: var(--doux); font-size: .85rem; margin: 2px 0 6px; }
@media (min-width: 761px) { .legende-repli > summary { display: none; } .legende-repli > .legende { display: flex; } .legende-repli:not([open]) > .legende { display: flex; } }
@media (max-width: 760px) {
  .barre { padding: 6px 10px; gap: 6px; }
  .barre .titre { font-size: .95rem; } .barre .titre small, .barre .qui { display: none; }
  .barre select, .barre button { min-height: 38px; font-size: .88rem; padding: 0 8px; }
  .menu { padding: 6px 8px; } .menu a, .menu #menu-plus-bouton { padding: 7px 11px; font-size: .86rem; }
  .menu #menu-plus-bouton { display: inline-block; }
  .menu:not(.ouvert) a.secondaire:not(.actif) { display: none; }
  main { padding: 10px 8px 90px; }
  .nav-date { gap: 6px; } .nav-date .date { min-width: 0; flex: 1 1 100%; order: -1; text-align: left; font-size: 1rem; }
  .nav-date input[type=date] { min-height: 38px; padding: 0 8px; }
  .vues button { min-height: 38px; padding: 0 10px; }
  #btn-nouvelle { flex: 1 1 100%; }
  .agenda-semaine { grid-template-columns: 40px repeat(7, minmax(150px, 1fr)); }
  .agenda { grid-auto-columns: minmax(130px, 1fr); } .col { min-width: 130px; } .agenda.avec-heures { grid-template-columns: 40px; }
}
/* Créneaux : « un seul jour » ou « Répéter » sur plusieurs jours */
fieldset.repeter { border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 12px 12px; margin: 12px 0 0; display: grid; gap: 10px; min-width: 0; }
fieldset.repeter legend { font-weight: 700; padding: 0 6px; }
fieldset.repeter .jours-coches label { text-transform: capitalize; cursor: pointer; }
fieldset.repeter .jours-coches label:has(input:checked) { background: var(--or); border-color: var(--or); color: #1c1a17; }
.champ[hidden] { display: none !important; }
.champ select { max-width: 100%; min-width: 0; }
/* Suppléments de la réservation : un petit titre par famille, une icône par prestation */
.famille-extras { margin: 12px 0 2px; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--or-fonce); border-bottom: 1px solid var(--ligne); padding-bottom: 3px; }
.icone-extra { display: inline-block; width: 1.4em; text-align: center; }
/* Couleurs demandées par Ahmad : à Jette, colonne Calm Spa 1 en vert clair, Calm Spa 2 en mauve ;
   à Spa Louise, les réservations de spa privé en vert foncé (formules, massages, soins, spa entre femmes : inchangés) */
.col[data-ressource="calm1"] .col-tete { background: var(--col-calm1); } .col[data-ressource="calm1"] .col-corps { background: var(--col-calm1-fond); }
.col[data-ressource="calm2"] .col-tete { background: var(--col-calm2); } .col[data-ressource="calm2"] .col-corps { background: var(--col-calm2-fond); }
.col.etab-louise .bloc.spa:not(.deplacee):not(.supprimee):not(.annulee) { background: var(--spa-louise); color: var(--spa-louise-texte); }
.col.etab-louise .bloc.spa small { color: inherit; opacity: .85; }
/* Demandes d'Ahmad (fiche et agenda) */
.carre-spa { display: inline-block; width: .85em; height: .85em; border-radius: 3px; margin-right: 5px; vertical-align: -1px; border: 1px solid rgba(0,0,0,.25); background: var(--spa); }
.col[data-ressource="calm1"] .carre-spa { background: var(--col-calm1-fort); } .col[data-ressource="calm2"] .carre-spa { background: var(--col-calm2-fort); } .col.etab-louise .carre-spa { background: var(--spa-louise); }
.col.col-masseuse .col-tete { background: var(--masseuse-tete); } .col.col-masseuse .col-corps { background: var(--masseuse-fond); }
.bloc .reste { color: #fff; background: var(--rouge-bouton); border-radius: 5px; padding: 0 4px; font-size: .72rem; font-weight: 800; display: inline-block; max-width: 100%; white-space: normal; }
.bloc .visite { position: absolute; top: 2px; right: 3px; font-size: .64rem; font-weight: 800; background: rgba(255,255,255,.85); color: #1c1a17; border-radius: 5px; padding: 0 3px; }
.bloc.indesirable::after { right: 30px; }
.bloc .marques-extras, .bloc .marque-note { font-size: .8rem; }
.viva-pastille { display: inline-block; width: .7em; height: .7em; border-radius: 50%; vertical-align: 0; border: 1px solid rgba(0,0,0,.3); }
.viva-pastille.rose { background: var(--viva-rose); } .viva-pastille.vert { background: var(--vert); }
.bouton.viva-rose { background: var(--viva-rose-fond); border-color: var(--viva-rose); color: var(--texte); } .bouton.viva-vert { background: var(--vert-fond); border-color: var(--vert); color: var(--vert); cursor: default; }
.alerte.note-resa { background: var(--note-fond); color: var(--note-texte); white-space: pre-wrap; }
.zone-supprimer { margin-top: 28px; padding-top: 12px; border-top: 1px dashed var(--ligne); display: flex; justify-content: flex-end; }
.bouton-supprimer { background: var(--supprimer-fond); color: var(--supprimer-texte); border: 1px solid var(--ligne); border-radius: 6px; font-size: .78rem; padding: 6px 10px; min-height: 0; cursor: pointer; font-weight: 600; }
.col.compacte .bloc .visite { font-size: .56rem; }
/* Comme la légende : « Pas venu / indésirable » = rouge (avant : la couleur du type avec seulement un contour rouge) */
.bloc.pas_venu, .bloc.indesirable:not(.deplacee):not(.supprimee):not(.annulee) { background: var(--rouge-fond) !important; color: var(--rouge) !important; border-left-color: var(--rouge); outline: 2px solid var(--rouge); }
.bloc.deplacee, .bloc.supprimee, .bloc.annulee { background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(128,128,128,.12) 6px 12px) !important; }
/* Demande d'Ahmad : une réservation de spa privé prend la couleur de SA colonne (plus de doré) — Spa 1 vert clair, Spa 2 mauve */
.col[data-ressource="calm1"] .bloc.spa:not(.deplacee):not(.supprimee):not(.annulee):not(.pas_venu) { background: var(--resa-calm1); border-left-color: var(--col-calm1-fort); }
.col[data-ressource="calm2"] .bloc.spa:not(.deplacee):not(.supprimee):not(.annulee):not(.pas_venu) { background: var(--resa-calm2); border-left-color: var(--col-calm2-fort); }
.solde-rouge { color: var(--rouge); } .solde-vert { color: var(--vert); }
.calcul-solde { margin: 6px 0 10px; padding: 8px 10px; border-radius: 8px; background: var(--fond); font-size: .92rem; }
/* Panier de suppléments */
.grille-articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 14px; }
.article { display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left; margin: 3px 0; padding: 8px 10px; border: 1px solid var(--ligne); border-radius: 8px; background: var(--carte); color: var(--texte); cursor: pointer; font: inherit; min-height: 44px; }
.article:hover { border-color: var(--or); } .article b { color: var(--or-fonce); }
input.a-remplir { border-color: var(--rouge) !important; background: var(--rouge-fond) !important; }
table.panier input { min-height: 38px; }
/* Caisse */
.ligne-caisse { font-size: 1.05rem; }
.boutons.gros .bouton { min-height: 56px; font-size: 1.05rem; padding: 0 20px; }
.liste-depenses { list-style: none; padding: 0; margin: 0; } .liste-depenses li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ligne); }
.choix-gros { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.choix-gros label { border: 2px solid var(--ligne); border-radius: 12px; padding: 14px; font-weight: 800; font-size: 1.05rem; cursor: pointer; background: var(--carte); }
.choix-gros label:has(input:checked) { border-color: var(--or); background: var(--fond); }
.choix-gros small { font-weight: 500; color: var(--doux); }
.apercu-ticket { max-width: 220px; max-height: 260px; border-radius: 8px; border: 1px solid var(--ligne); margin: 6px 0; }
.surplus { color: #b26a00; }
.tickets { display: flex; flex-wrap: wrap; gap: 12px; } .tickets figure { margin: 0; width: 150px; } .tickets img { width: 150px; height: 190px; object-fit: cover; border-radius: 8px; border: 1px solid var(--ligne); }
.tickets figcaption { font-size: .82rem; margin-top: 4px; } .sans-ticket { width: 150px; height: 190px; display: grid; place-items: center; border: 1px dashed var(--ligne); border-radius: 8px; color: var(--doux); }
/* Trace d'une réservation annulée / supprimée : petit carré discret, le créneau reste libre (on peut cliquer à côté) */
.bloc.trace-mini { left: 18%; right: 18%; height: 26px !important; padding: 3px 6px; font-size: .68rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--carte) !important; border: 1px dashed var(--gris) !important; border-radius: 6px; color: var(--doux); box-shadow: none; opacity: .9; z-index: 0; text-decoration: none; }
.col.compacte .bloc.trace-mini { left: 4%; right: 4%; font-size: .58rem; padding: 2px 3px; height: 22px !important; }
/* Trace GRISE BARRÉE pour une réservation annulée ou supprimée (Ahmad, 21 oct. 2026) */
.bloc.trace-mini.annulee .trace-nom, .bloc.trace-mini.supprimee .trace-nom { text-decoration: line-through; }
/* Téléphone : le panier tient dans la fenêtre (le tableau défile de côté si besoin) */
@media (max-width: 760px) { table.panier td, table.panier th { padding: 6px 4px; } table.panier input { width: 64px !important; } }
/* Formule à Jette (réponse d'Ahmad) : case MOITIÉ-MOITIÉ — à gauche la couleur de sa colonne (Spa 1 vert / Spa 2 mauve), à droite le rose « formule » */
.col[data-ressource="calm1"] .bloc.formule:not(.deplacee):not(.supprimee):not(.annulee):not(.pas_venu):not(.indesirable) { background: linear-gradient(90deg, var(--resa-calm1) 0 50%, var(--form) 50% 100%); border-left-color: var(--col-calm1-fort); }
.col[data-ressource="calm2"] .bloc.formule:not(.deplacee):not(.supprimee):not(.annulee):not(.pas_venu):not(.indesirable) { background: linear-gradient(90deg, var(--resa-calm2) 0 50%, var(--form) 50% 100%); border-left-color: var(--col-calm2-fort); }
/* Petit carré (annulée, supprimée, déplacée) : discret mais bien visible */
.bloc.trace-mini { opacity: 1; color: var(--texte); border: 1.5px dashed var(--doux) !important; font-weight: 600; }
.bloc.trace-mini.deplacee { border-color: var(--bleu) !important; color: var(--bleu); }
/* Fiche : ce qu'il faut préparer */
.a-preparer { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 2px; }
/* Fiche client : trois compteurs séparés */
.compteurs-client { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 12px; }
.compteur { flex: 1 1 110px; min-width: 0; background: var(--carte); border: 1px solid var(--ligne); border-radius: 14px; padding: 10px 12px; display: grid; gap: 2px; }
.compteur b { font-size: 1.7rem; line-height: 1; font-variant-numeric: tabular-nums; }
.compteur span { color: var(--doux); font-size: .9rem; font-weight: 600; }
.compteur.venus b { color: var(--vert); } .compteur.annules b { color: var(--rouge); } .compteur.deplaces b { color: var(--bleu); }
/* Nuit en ligne fermée */
.alerte.nuit { background: var(--bleu-fond); color: var(--bleu); }
.alerte.nuit .bouton { margin-left: 6px; }
.liste-nuits { margin: 4px 0; padding-left: 18px; }
.liste-nuits li { margin: 4px 0; }
/* le petit carré garde 2 lignes lisibles même sur téléphone : le nom, puis « déplacée » / « annulée » / « supprimée par … » */
.bloc.trace-mini, .col.compacte .bloc.trace-mini { height: auto !important; min-height: 26px; white-space: normal; }
.bloc.trace-mini .trace-nom, .bloc.trace-mini .trace-quoi { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bloc.trace-mini .trace-quoi { font-weight: 800; }
/* Grand bouton rouge « stop service » (réponse d'Ahmad) : le même pour l'admin et pour les employés */
.bouton-stop { display: block; width: 100%; max-width: 520px; margin: 8px 0 10px; padding: 16px 18px; min-height: 56px; border: 0; border-radius: 10px; background: var(--rouge-bouton); color: #fff; font-size: 1.1rem; font-weight: 800; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.bouton-stop:hover { filter: brightness(1.08); } .bouton-stop:focus-visible { outline: 3px solid var(--texte, #000); outline-offset: 2px; }
.avertir-fermeture { font-size: 1.05rem; font-weight: 700; }
/* Page Chèques sur iPhone (réponse d'Ahmad) : le formulaire « Vendre un chèque » ne dépasse plus à droite */
.page-cheques > * { min-width: 0; } .page-cheques select, .page-cheques input { max-width: 100%; min-width: 0; }
/* Plage en ligne fermée : marque à l'heure de la fermeture, avec le nom (« Fermé par … ») */
.marque-fermeture { position: absolute; left: 0; right: 0; z-index: 3; border-top: 3px solid #c0261d; background: var(--carte); color: var(--rouge); font-size: .72rem; font-weight: 800; padding: 2px 4px; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; overflow: hidden; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.marque-fermeture.etroite { font-size: .62rem; padding: 0; background: transparent; box-shadow: none; overflow: visible; }
.marque-fermeture.etroite span { display: block; width: max-content; max-width: 160px; white-space: normal; margin-top: 2px; padding: 2px 5px; background: var(--carte); border: 1px solid #c0261d; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.marque-fermeture.etroite.large { z-index: 6; } .marque-fermeture.ligne-seule span { display: none; }

/* ---------- Fiche de réservation : tout sur une page, caisse à droite, solde toujours visible (demande d'Ahmad) ---------- */
.fiche2 { display: grid; gap: 14px; }
.fiche2 > * { min-width: 0; }
.fiche-infos h2 { margin-top: 0; padding-right: 30px; }
.fiche-caisse { display: grid; gap: 10px; align-content: start; }
.solde-fixe { position: sticky; top: -18px; z-index: 5; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 14px; border-radius: 12px; color: #fff; box-shadow: var(--ombre); }
.solde-fixe span { font-weight: 800; letter-spacing: .03em; }
.solde-fixe b { font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.solde-fixe small { flex-basis: 100%; opacity: .92; font-variant-numeric: tabular-nums; }
.solde-du { background: var(--rouge-bouton); }
.solde-ok { background: var(--vert-bouton); }
@media (min-width: 860px) {
  .fiche2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
  .fiche-caisse { position: sticky; top: 0; max-height: calc(92vh - 50px); overflow: auto; padding-right: 2px; }
  .solde-fixe { top: 0; }
}
.pay-ligne { border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 12px; background: var(--carte); display: grid; gap: 8px; }
.pay-ligne.payee { border-color: var(--vert-bouton); }
.pay-titre { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; }
.pay-titre b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pay-ok { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 8px; border-radius: 8px; background: var(--vert-fond); color: var(--texte); }
.pay-vert:not(.bloc) { background: var(--vert-bouton); color: #fff; font-weight: 800; padding: 3px 10px; border-radius: 999px; } /* pastille seulement : un bloc soldé reste RECTANGULAIRE, texte foncé (15 oct. 2026) */
.pay-due { display: grid; gap: 8px; padding: 8px; border-radius: 10px; background: var(--rouge-fond); }
.pay-due-tete { margin: 0; color: var(--texte); } .pay-due-tete b { color: var(--rouge); font-size: 1.15rem; }
.pay-choix { display: flex; flex-wrap: wrap; gap: 6px; }
.pay-btn { min-height: 44px; padding: 8px 14px; border-radius: 10px; border: 2px solid var(--ligne); background: var(--carte); color: var(--texte); font-weight: 700; cursor: pointer; }
.pay-btn.choisi { border-color: var(--or); background: var(--or); color: #1c1a17; }
.pay-due .champ { margin: 0; }
.pay-valider:disabled { opacity: .55; cursor: not-allowed; }
.pay-barre { text-decoration: line-through; color: var(--doux); font-size: .9rem; padding: 2px 0; }
.lien { background: none; border: 0; padding: 4px 0; color: var(--or-fonce); text-decoration: underline; cursor: pointer; font-size: .9rem; justify-self: start; }
.fiche-plus { margin-top: 12px; border-top: 1px solid var(--ligne); padding-top: 8px; }
.fiche-plus > summary { cursor: pointer; font-weight: 700; padding: 8px 0; }

/* ---------- Photos et textes du site (admin) ---------- */
.site-choix { align-items: end; }
.site-page { margin: 0; min-width: min(100%, 320px); flex: 1; }
.site-page select { width: 100%; }
.site-texte { border-top: 1px solid var(--ligne); padding-top: 10px; margin-top: 10px; }
.site-texte input, .site-texte textarea { width: 100%; }
.site-photos { display: grid; gap: 12px; }
@media (min-width: 760px) { .site-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site-photo { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: start; border: 1px solid var(--ligne); border-radius: 12px; padding: 10px; background: var(--carte); }
.site-photo img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; background: var(--fond); }
.site-photo-infos { min-width: 0; display: grid; gap: 6px; }
.site-photo-infos .champ { margin: 0; } .site-photo-infos input { width: 100%; }
.site-choisir { cursor: pointer; }
.site-avant-apres { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.site-avant-apres figure { margin: 0; } .site-avant-apres img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.site-avant-apres figcaption { text-align: center; font-weight: 700; color: var(--doux); }
@media (max-width: 420px) { .site-photo { grid-template-columns: 1fr; } .site-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; } }

/* ---------- Annonce avec photo ---------- */
.ann-photo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 12px; }
.ann-photo img { flex-basis: 100%; max-width: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; }
.ann-carte { border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; display: grid; gap: 4px; }
.ann-carte > p { margin: 0; }
.ann-carte img { width: 100%; max-height: 200px; object-fit: cover; border-radius: 8px; }
.ann-carte.retiree { opacity: .6; }

/* ---------- Paiements en ligne (Mollie) ---------- */
.el-totaux { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; font-size: 1.05rem; }
.el-table td { vertical-align: top; }
.pastille.el-calm { background: var(--col-calm1); color: var(--texte); }
.pastille.el-louise { background: var(--spa-louise); color: var(--spa-louise-texte, #fff); }
.el-alerte td { background: var(--rouge-fond); }
.pay-enligne { display: grid; gap: 4px; }
.pay-enligne-ligne { padding: 6px 8px; border-radius: 8px; background: var(--bleu-fond); color: var(--texte); font-size: .92rem; }
.pay-enligne-ligne.paye { background: var(--vert-fond); } .pay-enligne-ligne.a_rembourser, .pay-enligne-ligne.echoue { background: var(--rouge-fond); }
/* 16 oct. 2026 (Ahmad) : payé = VERT, pas payé = ROUGE — liste des paiements en ligne, fiche réservation, fiche client */
.el-ligne.el-vert td { background: var(--vert-fond); } .el-ligne.el-rouge td { background: var(--rouge-fond); }
.el-ligne.el-vert td:first-child { box-shadow: inset 5px 0 0 var(--vert); } .el-ligne.el-rouge td:first-child { box-shadow: inset 5px 0 0 var(--rouge); }
.el-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.el-modif { display: grid; gap: 4px; margin-top: 4px; max-width: 260px; }
.pay-enligne-titre { margin: 6px 0 2px; font-weight: 700; }
.pay-enligne-ligne.el-vert { background: var(--vert-fond); border-left: 5px solid var(--vert); } .pay-enligne-ligne.el-rouge { background: var(--rouge-fond); border-left: 5px solid var(--rouge); }
.resa-client.resa-payee { border-left: 5px solid var(--vert); padding-left: 8px; } .resa-client.resa-due { border-left: 5px solid var(--rouge); padding-left: 8px; }
/* Nouvelle fiche de réservation (maquette validée par Ahmad le 10 oct. 2026) */
.solde-haut { position: sticky; top: -18px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding: 14px 18px; margin: -4px 0 14px; border-radius: 14px; color: #fff; box-shadow: var(--ombre); }
.solde-haut span { font-weight: 800; letter-spacing: .05em; }
.solde-haut b { font-size: 2.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.solde-haut small { flex-basis: 100%; opacity: .92; font-variant-numeric: tabular-nums; }
.fiche-gauche { display: grid; gap: 14px; align-content: start; min-width: 0; }
.fiche-titre { margin: 0 0 4px; font-size: 1.05rem; }
.pay-type { font-weight: 800; letter-spacing: .04em; font-size: .85rem; color: var(--or-fonce); }
.pay-due.pay-acompte { background: var(--fond); border: 1px dashed var(--ligne); }
.fiche-supplements { display: grid; gap: 8px; align-content: start; min-width: 0; border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 12px; background: var(--carte); }
.sup-famille h4 { margin: 8px 0 2px; }
.sup-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 4px 0; border-top: 1px solid var(--ligne); }
.sup-ligne.choisi { background: linear-gradient(90deg, var(--vert-fond), transparent 75%); }
.sup-nom { text-align: left; background: none; border: 0; padding: 6px 0; font: inherit; font-weight: 700; color: var(--texte); cursor: pointer; min-height: 44px; }
.sup-nom small { display: block; font-weight: 500; font-size: .8rem; }
.sup-nom small.rouge, .mini.rouge { color: var(--rouge); }
.sup-carte { font-variant-numeric: tabular-nums; }
.sup-reglage { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: end; padding-bottom: 6px; }
.sup-reglage .qte { display: flex; border: 1px solid var(--ligne); border-radius: 10px; overflow: hidden; }
.sup-reglage .qte button { width: 44px; height: 44px; border: 0; background: var(--fond); color: var(--texte); font-size: 1.2rem; cursor: pointer; }
.sup-reglage .qte input { width: 52px; height: 44px; border: 0; text-align: center; background: var(--carte); color: var(--texte); }
.sup-prix { margin: 0; } .sup-prix input { width: 110px; } .sup-prix.erreur input { border-color: var(--rouge); background: var(--rouge-fond); }
.sup-total { margin-left: auto; align-self: center; font-variant-numeric: tabular-nums; }
.mini { flex-basis: 100%; font-size: .8rem; }
.sup-bas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; border-top: 2px solid var(--ligne); padding-top: 10px; }
.sup-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fiche-actions { margin-top: 14px; border-top: 1px solid var(--ligne); padding-top: 10px; }
.zone-supprimer--bas { margin-top: 22px; }
.fiche-gauche .fiche-caisse { position: static; max-height: none; overflow: visible; padding-right: 0; }
/* « Paiement dès la création » (maquette validée par Ahmad le 10 oct. 2026) */
.paiement-creation { position: relative; display: grid; gap: 12px; margin: 18px 0 6px; padding: 18px 14px 14px; border: 3px solid var(--or); border-radius: 16px; background: var(--carte); }
.repere-creation { position: absolute; top: -12px; left: 14px; background: var(--or); color: #1c1a17; font-size: .74rem; font-weight: 800; letter-spacing: .05em; padding: 2px 10px; border-radius: 999px; }
.etape-creation { display: grid; gap: 8px; }
.etape-creation h4 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: .98rem; }
.num-creation { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--or); color: #1c1a17; font-weight: 800; font-size: .85rem; flex: none; }
.modes-creation { display: flex; flex-wrap: wrap; gap: 8px; }
.paiement-creation .solde-haut { position: static; margin: 0; }
/* 🎒 Congés scolaires (calendrier belge) sur l'agenda */
.bandeau-conge { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 8px 0; padding: 10px 14px; border-radius: 12px; border: 2px solid var(--or); background: var(--carte); }
.bandeau-conge.en-cours { background: var(--vert-fond); border-color: var(--vert-bouton); }
.bandeau-conge b { letter-spacing: .02em; }
.bandeau-conge-offre { flex-basis: 100%; font-size: .92rem; }

/* ---------- Page unique de réservation (maquettes validées par Ahmad, 10 oct. 2026) ---------- */
/* La fiche et la nouvelle réservation prennent toute la page, « Retour à l'agenda » en haut et en bas */
.voile.page-entiere { background: var(--fond); align-items: stretch; z-index: 45; }
.voile.page-entiere > .fenetre.page { width: 100% !important; max-width: none; max-height: none; height: 100%; border-radius: 0; padding: 12px 16px 40px; display: grid; gap: 12px; align-content: start; background: var(--fond); box-shadow: none; }
.page-corps { width: min(1000px, 100%); margin: 0 auto; background: var(--carte); border: 1px solid var(--ligne); border-radius: 16px; padding: 16px; min-width: 0; }
.retour-agenda { justify-self: start; min-height: 48px; font-weight: 800; border: 2px solid var(--or); color: var(--or-fonce); background: var(--carte); }
.repere-phase { margin: 0 0 8px; font-size: .8rem; font-weight: 800; letter-spacing: .06em; color: var(--doux); text-transform: uppercase; }
/* Couleur du paiement sur les cases de l'agenda : VERT payé, acompte VERT + reste ROUGE, ROUGE pas payé ; clignote si le client est parti */
.bloc .bande-pay { display: flex; flex-wrap: wrap; gap: 2px; margin: 2px 0; }
.bloc .bp { border-radius: 5px; padding: 1px 5px; font-size: .72rem; font-weight: 800; color: #fff; line-height: 1.25; }
.bloc .bp.v { background: var(--vert-bouton); } .bloc .bp.r { background: var(--rouge-bouton); }
.bloc.pay-vert { box-shadow: inset 0 0 0 3px var(--vert-bouton), 0 1px 3px rgba(0,0,0,.18); }
.bloc.pay-rouge, .bloc.pay-partage { box-shadow: inset 0 0 0 3px var(--rouge-bouton), 0 1px 3px rgba(0,0,0,.18); }
.bloc.allume { animation: clignote-resa 1.4s ease-in-out infinite; }
@keyframes clignote-resa { 50% { box-shadow: inset 0 0 0 3px var(--rouge-bouton), 0 0 14px 4px rgba(192,38,29,.8); } }
@media (prefers-reduced-motion: reduce) { .bloc.allume { animation: none; } }
/* Fiche : acompte payé en VERT, reste à payer en ROUGE, total encaissé */
.bandeau-acompte { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding: 12px 18px; margin: 0 0 8px; border-radius: 14px; background: var(--vert-bouton); color: #fff; }
.bandeau-acompte span { font-weight: 800; letter-spacing: .05em; } .bandeau-acompte b { font-size: 1.8rem; line-height: 1; font-variant-numeric: tabular-nums; } .bandeau-acompte small { flex-basis: 100%; opacity: .92; }
.total-encaisse { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; margin: 0 0 10px; border-radius: 12px; background: var(--bleu-fond, #eef3fb); color: var(--bleu, #1f3d66); }
.total-encaisse span { font-weight: 800; letter-spacing: .04em; } .total-encaisse b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.monnaie { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--vert-fond); color: var(--vert); margin: 6px 0; }
.monnaie span { font-weight: 800; } .monnaie b { font-size: 1.5rem; font-variant-numeric: tabular-nums; } .monnaie .rouge { color: var(--rouge); }
.boite-duo { display: grid; gap: 8px; padding: 12px; margin: 8px 0; border: 2px solid var(--or); border-radius: 14px; }
.fiche-journal { margin-top: 14px; } .fiche-journal li.rouge { color: var(--rouge); font-weight: 700; }
.alerte.clignote { animation: clignote-alerte 1.4s ease-in-out infinite; } @keyframes clignote-alerte { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .alerte.clignote { animation: none; } }
/* Contrôle des cases : case refusée en ROUGE avec son message */
.champ.erreur input, .champ.erreur textarea { border-color: var(--rouge); background: var(--rouge-fond); }
.msg-erreur { display: block; color: var(--rouge); font-weight: 700; font-size: .85rem; }

/* Recherche intelligente dans l'agenda et fiche client complète (Ahmad, 11 oct. 2026) */
.recherche-agenda { position: relative; margin: 8px 0; max-width: 640px; }
.recherche-agenda input { width: 100%; min-height: 46px; border-radius: 12px; border: 2px solid var(--ligne); padding: 0 12px; font: inherit; background: var(--carte); color: var(--texte); box-sizing: border-box; }
#resultats-agenda { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; background: var(--carte); border: 1px solid var(--ligne); border-radius: 12px; box-shadow: var(--ombre); max-height: 60vh; overflow: auto; padding: 6px; display: grid; gap: 4px; }
.resultat-agenda { text-align: left; border: 0; background: var(--fond); color: var(--texte); border-radius: 10px; padding: 8px 10px; font: inherit; cursor: pointer; }
.resultat-agenda:hover, .resultat-agenda:focus-visible { outline: 2px solid var(--or); }
.resultat-agenda .rouge, .resa-client .rouge { color: var(--rouge); font-weight: 700; }
.bloc.trouve { outline: 4px solid var(--or) !important; z-index: 6; }
.resa-client { border-top: 1px solid var(--ligne); padding: 8px 0; }
.services-client { margin: 4px 0; padding-left: 18px; }

/* Choix d'établissement bien visible : VERT, plus grand, plus long (Ahmad, 11 oct. 2026) ; bouton « Voir le site » */
.barre #choix-etab { background: var(--vert-bouton, #1d7a45); border: 2px solid #5fc28a; color: #fff; font-weight: 800; font-size: 1.05rem; min-height: 50px; min-width: 300px; padding: 0 16px; cursor: pointer; }
.barre #choix-etab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.barre #choix-etab option { background: #fff; color: #24211c; font-weight: 600; }
#voir-site { display: flex; gap: 6px; flex-wrap: wrap; }
.barre .voir-site { display: inline-flex; align-items: center; min-height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid #d9c79f; color: #f2e3bf; text-decoration: none; font-weight: 700; white-space: nowrap; }
.barre .voir-site:hover, .barre .voir-site:focus-visible { background: #2e2b26; outline: 2px solid #d9c79f; }
@media (max-width: 700px) { .barre #choix-etab { min-width: 0; flex: 1 1 100%; order: 5; min-height: 46px; font-size: 1rem; } #voir-site { order: 6; } .barre .voir-site { min-height: 38px; font-size: .85rem; } }
/* Employés : niveau d'accès, lieu et code privé dans le tableau (Ahmad, 11 oct. 2026) */
.employes select { min-height: 38px; border-radius: 8px; border: 1px solid var(--ligne); background: var(--carte); color: var(--texte); padding: 0 6px; font: inherit; }
.code-emp { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.code-emp input { min-height: 36px; border-radius: 8px; border: 1px solid var(--ligne); padding: 0 8px; width: 13em; max-width: 100%; background: var(--carte); color: var(--texte); font: inherit; }
.employes tr.desactive td { opacity: .55; }

.infos-masseuse { display: grid; gap: 6px; margin: 12px 0; } .infos-masseuse p { margin: 0; display: flex; gap: 10px; flex-wrap: wrap; } .infos-masseuse span { color: var(--doux); min-width: 7em; }

/* « ✅ Client arrivé » (Ahmad, 11 oct. 2026) : bouton vert sur la fiche + petit repère vert sur la case de l'agenda */
/* message n°43 (18 oct. 2026) : ROUGE tant que personne n'a cliqué, VERT (.arrive-ok) seulement quand c'est fait, avec l'heure */
.parti-bouton { background: var(--rouge-bouton, #b3261e); color: #fff; border-color: #e08a84; font-weight: 800; min-height: 50px; width: 100%; }
.bloc .arrive-marque.pas-encore { background: #b3261e; }
.arrive-bouton { background: var(--rouge-bouton, #b3261e); color: #fff; border-color: #e08a84; font-weight: 800; font-size: 1.05rem; min-height: 50px; width: 100%; margin: 6px 0 10px; }
.arrive-ok { background: #e3f5ea; color: #145232; border: 2px solid #5fc28a; border-radius: 10px; padding: 10px 12px; margin: 6px 0 10px; font-size: 1rem; }
.arrive-ok .lien { margin-left: 6px; }
.bloc .arrive-marque { position: absolute; bottom: 2px; right: 3px; font-size: .64rem; font-weight: 800; background: #1d7a45; color: #fff; border-radius: 5px; padding: 0 4px; z-index: 2; }
.col.compacte .bloc .arrive-marque { font-size: .56rem; padding: 0 2px; }
#passage-masseuse { background: #3b2e4a; border-color: #8a6fb0; }
@media (prefers-color-scheme: dark) { .arrive-ok { background: #123522; color: #c9f0d8; } }
.code-emp .msg-code { display: block; color: var(--rouge-bouton, #b3261e); font-weight: 700; font-size: .85rem; margin-top: 3px; }

/* iPhone stable comme une application (Ahmad, 11 oct. 2026) : pas de zoom automatique, pas de glissement de côté, gros boutons */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: clip; overscroll-behavior-x: none; }
* { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238a6a32' stroke-width='2'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; padding-right: 30px !important; }
.barre select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E") !important; }
.connexion .clavier-complet { margin-top: 8px; }
@media (max-width: 760px) {
  /* Un champ de moins de 16px fait zoomer l'iPhone dès qu'on le touche */
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; }
  /* La barre du haut ne reste plus collée : elle ne cache plus l'écran */
  .barre { position: static; }
  .barre select, .barre button, .barre .voir-site, .barre #choix-etab { min-height: 46px; }
  .menu a, .menu #menu-plus-bouton { min-height: 44px; display: inline-flex; align-items: center; }
  /* « ☰ Plus » ouvert (18 oct. 2026) : 24 boutons depuis « 🔒 Remarques des clients » → grille compacte de 3 colonnes,
     pour que « Réglages, Droits, Mon compte » restent dans l'écran de l'iPhone (et défilement dans le menu, au cas où) */
  .menu.ouvert { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; max-height: calc(100dvh - 8px); overflow-y: auto; overscroll-behavior: contain; }
  .menu.ouvert a, .menu.ouvert #menu-plus-bouton { justify-content: center; text-align: center; white-space: normal; line-height: 1.15; padding: 4px 5px; font-size: .78rem; border-radius: 12px; overflow-wrap: anywhere; }
  .bouton, .bouton.petit, .lien, .bouton-supprimer, .vues button, .nav-date input[type=date] { min-height: 44px; }
  .employes select, .code-emp input { min-height: 44px; }
  .tableau select, .tableau input:not([type=checkbox]):not([type=radio]) { min-height: 44px; border-radius: 8px; border: 1px solid var(--ligne); background-color: var(--carte); color: var(--texte); padding-left: 8px; }
  /* Les tableaux larges glissent dans leur cadre, jamais la page entière */
  .carte:has(.tableau) { overflow-x: auto; }
  .connexion { margin: 12px auto; }
  .connexion h1 { margin: 0 0 6px; }
  .clavier button { min-height: 62px; font-size: 1.6rem; }
  .connexion #f-cnx > .bouton { min-height: 56px; font-size: 1.1rem; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .connexion .note { display: none; }
  .clavier { gap: 6px; margin: 8px 0; } .clavier button { min-height: 54px; }
  .connexion label.champ { margin-bottom: 4px; }
}

/* Écran du code : bouton « œil » collé à la case (Ahmad, 11 oct. 2026) */
.code-oeil { display: flex; gap: 6px; margin: 4px 0 10px; }
.code-oeil input { flex: 1 1 auto; min-width: 0; min-height: 56px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--ligne); background: var(--fond); }
.code-oeil button { flex: 0 0 56px; min-height: 56px; border-radius: 10px; border: 1px solid var(--ligne); background: var(--carte); font-size: 1.4rem; cursor: pointer; }
#msg-cnx { margin: 0 0 8px; }
/* 🚨 Alertes (Ahmad, 11 oct. 2026) : le menu devient rouge quand un compte social pose problème */
.menu a.alerte-menu { background: var(--rouge-bouton); border-color: var(--rouge-bouton); color: #fff; }
.alerte-carte { border-left: 6px solid var(--rouge-bouton); }
.alerte-carte h3 { margin-top: 0; } .alerte-carte ol { padding-left: 22px; margin: 6px 0 0; } .alerte-carte li { margin: 4px 0; }

/* 🔴 Heure actuelle qui avance toute seule (12 oct. 2026) */
.maintenant-heure { position: absolute; left: 2px; top: -9px; background: var(--rouge); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; padding: 2px 4px; border-radius: 4px; }
.horloge { font-weight: 700; color: var(--rouge); white-space: nowrap; }

/* 🔴 Promo en cours : EN ROUGE dans l'agenda, bien visible (Ahmad, 14 oct. 2026) */
.bandeau-conge.bandeau-promo { background: #fde8e8; border-color: #c62828; color: #7f1010; }
.bandeau-conge.bandeau-promo.en-cours { background: #c62828; border-color: #8e0000; color: #fff; }
.bandeau-conge.bandeau-promo.en-cours b, .bandeau-conge.bandeau-promo.en-cours small { color: #fff; }
/* Fiche : boutons importants tout en haut (15 oct. 2026) */
.fiche-rapide { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 14px; padding: 10px; border-radius: 12px; background: var(--fond); border: 1px solid var(--ligne); }
.fiche-rapide .arrive-ok { flex-basis: 100%; }
/* Confirmation « C'est enregistré » : verte et bien visible, en haut de l'écran */
.toast.ok { top: 18px; bottom: auto; background: var(--vert-bouton, #1f8f4e); color: #fff; font-size: 1.05rem; padding: 14px 22px; }
.sup-ouvrir { width: 100%; }
/* Compteur « En direct » toujours visible en haut de l'agenda (15 oct. 2026) */
/* 🔴 Bug I (20 oct. 2026) : HAUTEUR FIXE — la barre ne bouge plus et ne décale plus l'agenda (même vide, la place est gardée ; une seule
   ligne, défilement horizontal si besoin, au lieu de passer à 2 lignes). */
.compteur-direct:empty { background: transparent; border-color: transparent; }
.compteur-direct { display: flex; flex-wrap: nowrap; gap: 4px 16px; align-items: center; margin: 6px 0 8px; padding: 8px 12px; border-radius: 10px; background: #e9f7ef; color: #14532d; border: 1px solid #9fd6b4; font-size: .9rem; box-sizing: border-box; min-height: 2.6rem; overflow-x: auto; }
@media (prefers-color-scheme: dark) { .compteur-direct { background: #0f2a1b; color: #a7f3c4; border-color: #1f5c3a; } }
/* Spa public (15 oct. 2026) : bande de la session dans Calm Spa 2, sous les clientes */
.zone-public { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, rgba(156,138,199,.16) 0 10px, rgba(156,138,199,.08) 10px 20px); border-top: 2px solid #9c8ac7; border-bottom: 2px solid #9c8ac7; z-index: 0; pointer-events: none; }
.zone-public span { position: sticky; top: 0; display: inline-block; margin: 2px 4px; padding: 1px 6px; border-radius: 6px; background: #9c8ac7; color: #fff; font-size: .7rem; font-weight: 700; }
/* Spa public femme en ROSE + une pastille par place (Ahmad, 15 oct. 2026) */
.zone-public { background: repeating-linear-gradient(135deg, rgba(236,72,153,.16) 0 10px, rgba(236,72,153,.07) 10px 20px) !important; border-top: 2px solid #ec4899 !important; border-bottom: 2px solid #ec4899 !important; }
.zone-public span:first-child { background: #db2777 !important; }
.places-public { position: sticky; top: 22px; display: flex; flex-wrap: wrap; gap: 3px; margin: 2px 4px; }
.places-public i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #db2777; background: #fff; }
.places-public i.pris { background: #db2777; }
.col[data-ressource="calm2"] .bloc.femmes:not(.deplacee):not(.supprimee):not(.annulee), .bloc.femmes:not(.deplacee):not(.supprimee):not(.annulee) { background: #fbcfe8 !important; border-left-color: #db2777 !important; color: #500724; }
/* 🔴 Ahmad, 16 oct. 2026 : non payée = DEMI-case ROUGE (la moitié gauche de la colonne) ; la moitié droite reste libre (réservable) */
.col .bloc.non-paye { right: calc(50% + 1px) !important; background: var(--rouge-fond) !important; color: var(--rouge) !important; border-left: 5px solid var(--rouge) !important; outline: 2px dashed var(--rouge); box-shadow: none !important; opacity: 1; }
.col.compacte .bloc.non-paye { right: calc(50% + 1px) !important; border-left-width: 3px !important; }
/* 🧪 réservation faite avec le code de test à 1 € (17 oct. 2026) : pastille violette bien visible dans la case, et dans les listes */
.bloc .etiquette-test, .etiquette-test { display: inline-block; background: #6b21a8; color: #fff; border-radius: 5px; padding: 0 6px; font-size: .72rem; font-weight: 800; margin: 0 26px 2px 0; letter-spacing: .02em; }
.etiquette-test { margin: 0 4px; }
.alerte.test-code { border-left: 5px solid #6b21a8; }
.bloc .etiquette-non-paye { display: inline-block; background: var(--rouge-bouton); color: #fff; border-radius: 5px; padding: 0 5px; font-size: .7rem; font-weight: 800; margin: 0 26px 2px 0; } /* 26px : la place du petit « 1re / 2e visite » en haut à droite */
/* ⏳ liste d'attente (rouge) : dans la moitié droite, à l'heure de la réservation qui tient le créneau ; chaque nom ouvre sa fiche */
.liste-attente { position: absolute; left: calc(50% + 2px); right: 3px; z-index: 3; display: flex; flex-direction: column; gap: 2px; padding: 3px; border: 2px solid var(--rouge); border-radius: 8px; background: var(--rouge-fond); color: var(--rouge); font-size: .7rem; line-height: 1.2; }
.liste-attente .la-titre { font-weight: 800; }
.liste-attente .bloc.attente-item { position: static; display: block; height: auto; padding: 4px 5px; min-height: 26px; border-radius: 6px; border-left: 3px solid var(--rouge); background: #fff; color: var(--rouge); font-size: .7rem; font-weight: 700; white-space: normal; overflow-wrap: anywhere; box-shadow: none; }
.col.compacte .liste-attente { font-size: .6rem; padding: 2px; }
.col.compacte .liste-attente .bloc.attente-item { font-size: .6rem; padding: 3px 3px; min-height: 22px; }
/* ✋ Glisser-déposer (message n°2, point 4 — 18 oct. 2026) : 3 touchers = « prête à déplacer » (contour pointillé), puis glisser à la souris ou au doigt */
.bloc[data-glisser] { touch-action: manipulation; } /* pas de zoom au double toucher : les 3 touchers sont bien comptés */
.bloc.pret-deplacer { outline: 3px dashed var(--bleu); outline-offset: 1px; cursor: grab; touch-action: none; z-index: 20; user-select: none; -webkit-user-select: none; }
.bloc.pret-deplacer .marque-pret { display: block; margin: -2px -4px 3px; padding: 2px 4px; border-radius: 5px; background: var(--bleu); color: var(--carte); font-size: .7rem; font-weight: 800; }
.bloc.en-glisser { cursor: grabbing; opacity: .88; z-index: 60; box-shadow: 0 8px 22px rgba(0,0,0,.35); transition: none; }
/* 🎧 n°8 : bouton Formation posé DANS la fiche de réservation et la fiche client (même look doré que le bouton du haut) */
.bouton-formation-fiche { display: block; width: 100%; margin: 0 0 12px; padding: 11px 14px; border: 2px solid #b8923f; border-radius: 12px; background: #fff7e6; color: #1f1b17; font-weight: 700; font-size: .95rem; cursor: pointer; text-align: left; }
.bouton-formation-fiche:hover { background: #fdecc6; }
/* ↪ n°42 point 1 : déplacée ET payée → trace VERTE « Déjà payé — déplacé » (non payée : bleu, inchangé) */
.bloc.trace-mini.deplacee.paye { border-color: #176117 !important; color: #176117; background: #e8f5e9; }
/* 🧖‍♀️ n°42 point 8 : spa public = UNE liste lisible (une ligne par cliente), jamais des bandes superposées */
.liste-public { position: absolute; left: 3px; right: 3px; z-index: 3; display: flex; flex-direction: column; gap: 2px; padding: 3px; overflow-y: auto; border-radius: 8px; background: rgba(255,255,255,.85); }
.liste-public .bloc.public-item { position: static; display: block; flex-shrink: 0; height: auto; min-height: 24px; padding: 3px 6px; border-radius: 6px; border-left: 4px solid #ec4899; background: #fff; color: var(--texte); font-size: .74rem; line-height: 1.25; white-space: normal; overflow: visible; cursor: pointer; }
.liste-public .bloc.public-item.non-paye { border-left-color: var(--rouge); }
.liste-public .bloc.public-item.pas_venu { opacity: .6; text-decoration: line-through; }
.liste-public .bloc.public-item .bp { font-size: .66rem; padding: 0 4px; }
.col.compacte .liste-public .bloc.public-item { font-size: .6rem; padding: 2px 3px; min-height: 18px; }
/* 🧾 n°43 point 3 : facture déjà générée (une seule par réservation) */
.bloc-facture{border:1.5px solid #2e7d32;background:#eef7ee;border-radius:12px;padding:10px 12px;margin:10px 0}
.bloc-facture p{margin:0 0 6px;color:#1b5e20}
.bloc-facture .boutons{margin:0;flex-wrap:wrap}
/* n°42 P8 (contrôle du 21 oct.) : une cliente = UNE ligne (nom · personnes · payé) → plus de noms visibles dans la session */
.liste-public .bloc.public-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 20px; padding: 2px 6px; }
.liste-public .bloc.public-item b, .liste-public .bloc.public-item i { display: inline; }
.liste-public .bloc.public-item { display: flex; align-items: center; gap: 4px; }
.liste-public .bloc.public-item b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.liste-public .bloc.public-item > :not(b):not(i) { flex-shrink: 0; }