/* PoolPro : lisible au soleil (fort contraste), gros boutons pour le pouce (plan §3). Style : design A « Atelier » (06/11, fin du fichier). */
/* Couleur principale de l'instance : valeurs par défaut ici (bleu pétrole #0b5f73), remplacées par /marque.css si POOLPRO_COULEUR
   est réglée (poolpro2/marque.py, qui calcule aussi --sur-principale : texte blanc ou noir posé sur la couleur, et --principale-texte :
   la couleur lisible en texte sur fond clair). Le vert « fait / ok », l'orange « hors norme » et le rouge « urgent » ne changent jamais. */
:root { --principale: #0b5f73; --principale-fonce: #084250; --principale-clair: #eef4f5; --principale-pale: #dde9eb;
        --sur-principale: #ffffff; --principale-texte: #0b5f73; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  line-height: 1.45;
  color: #000;
  background: #fff;
}
.barre {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: var(--principale);
  color: var(--sur-principale);
  font-weight: 700;
  font-size: 20px;
}
.page { max-width: 640px; margin: 0 auto; padding: 16px; }
.carte { border: 2px solid #000; border-radius: 12px; padding: 16px; }
h1 { font-size: 24px; margin: 0 0 12px; }
.etat { margin: 16px 0; padding: 12px; border: 2px dashed var(--principale); border-radius: 8px; font-weight: 600; }
.gros-bouton {
  display: block;
  width: 100%;
  min-height: 64px;         /* ≈ 2 cm sur un téléphone : touchable avec des gants mouillés */
  margin-top: 12px;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--principale);
  color: var(--sur-principale);
  font: inherit;
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.gros-bouton:active { background: var(--principale-fonce); }
.flash { padding: 12px; border-radius: 8px; margin-bottom: 12px; font-weight: 600; border: 2px solid #000; }
.flash-erreur { background: #ffe0b2; }
.flash-ok { background: #c8e6c9; }
.htmx-request { opacity: .6; }

/* Étape 1 : connexion et « Mon compte ». */
[hidden] { display: none !important; }
.barre { justify-content: space-between; gap: 12px; }
.barre a { color: #fff; text-decoration: none; }
.qui { font-size: 18px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
       min-height: 44px; display: flex; align-items: center; }
h2 { font-size: 21px; margin: 0 0 8px; }
.carte + .carte, .carte + form, .flash + .carte { margin-top: 16px; }
.titre-logo { text-align: center; font-size: 30px; }
.pile { display: flex; flex-direction: column; }
.pile label { font-weight: 700; margin-top: 12px; }
.pile input[type=text], .pile input:not([type]), .pile input[type=password], .pile input[type=email] {
  width: 100%; min-height: 56px; padding: 10px 12px; margin-top: 4px;
  font: inherit; font-size: 20px;        /* 16 px ou plus : l'iPhone ne zoome pas sur le champ */
  color: #000; background: #fff; border: 2px solid #000; border-radius: 10px;
}
.pile input:focus, .voir:focus, .gros-bouton:focus { outline: 3px solid #ff6f00; outline-offset: 2px; }
.champ-mdp { display: flex; gap: 8px; align-items: stretch; margin-top: 4px; }
.champ-mdp input { margin-top: 0 !important; flex: 1; min-width: 0; }
.voir { min-width: 64px; min-height: 56px; font-size: 26px; border: 2px solid #000; border-radius: 10px;
        background: #fff; color: #000; cursor: pointer; }
.voir[aria-pressed="true"] { background: #000; color: #fff; }
.pile label.case { display: flex; align-items: center; gap: 12px; min-height: 56px; margin-top: 16px;
                   font-size: 20px; cursor: pointer; }
.case input { width: 32px; height: 32px; margin: 0; accent-color: var(--principale); }
.aide { margin: 12px 0 0; }
.retour { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; color: #000;
          font-size: 20px; }
.bouton-sortie { background: #000; margin-top: 24px; }
.bouton-sortie:active { background: #333; }
.flash-info { background: #bbdefb; }

/* Étape 2 : liste des piscines, page piscine, photo. */
.cache-visuel, .js .champ-fichier {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0;
}
.js .sans-js { display: none; }
.recherche input {
  width: 100%; min-height: 56px; padding: 10px 14px; font: inherit; font-size: 20px;
  color: #000; background: #fff; border: 2px solid #000; border-radius: 12px;
}
.recherche input:focus { outline: 3px solid #ff6f00; outline-offset: 2px; }
.liste-piscines { list-style: none; margin: 12px 0 0; padding: 0; }
.liste-piscines li + li { margin-top: 10px; }
.ligne-piscine {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px;
  min-height: 64px; padding: 10px 16px; border: 2px solid #000; border-radius: 12px;
  color: #000; text-decoration: none; background: #fff;
}
.ligne-piscine:active { background: var(--principale-pale); }
.nom-piscine { font-size: 21px; font-weight: 700; }
.petit { grid-column: 1; font-size: 16px; }
.fleche { grid-column: 2; grid-row: 1 / span 2; font-size: 32px; font-weight: 700; }
.pile textarea {
  width: 100%; padding: 10px 12px; margin-top: 4px; font: inherit; font-size: 20px;
  color: #000; background: #fff; border: 2px solid #000; border-radius: 10px; resize: vertical;
}
.pile textarea:focus { outline: 3px solid #ff6f00; outline-offset: 2px; }
.titre-piscine { font-size: 28px; margin-bottom: 4px; }
.note-piscine { margin: 8px 0 0; padding: 10px 12px; border-left: 6px solid var(--principale); background: var(--principale-clair); }
.widget { margin-top: 16px; }
.bouton-photo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 100%; min-height: 220px; height: 38vh; max-height: 340px; border-radius: 18px;
  background: var(--principale); color: var(--sur-principale); font-size: 24px; font-weight: 800; letter-spacing: .04em;
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.bouton-photo .icone { font-size: 88px; line-height: 1; }
.bouton-photo:active { background: var(--principale-fonce); }
.champ-fichier:focus + .bouton-photo, .champ-fichier:focus + .lien-galerie { outline: 3px solid #ff6f00; outline-offset: 2px; }
.lien-galerie {
  display: flex; align-items: center; justify-content: center; min-height: 52px; margin-top: 6px;
  color: #000; font-size: 18px; text-decoration: underline; cursor: pointer;
}
.photos-du-jour {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px;
}
.envoi img, .envoi a { display: block; }
.envoi img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border: 2px solid #000; border-radius: 8px; background: #eee;
}
.envoi .statut { display: block; margin-top: 4px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.envoi.attente img { opacity: .6; }
.envoi.echec .statut { color: #b71c1c; }
.reessayer {
  width: 100%; min-height: 52px; margin-top: 6px; border: 2px solid #000; border-radius: 10px;
  background: #ff6f00; color: #000; font: inherit; font-weight: 800; cursor: pointer;
}
.historique { margin-top: 28px; }
.passage { margin-top: 16px; padding-top: 12px; border-top: 2px solid #000; }
h3 { font-size: 18px; margin: 0; }

/* Étape 3 : test d'eau. Orange = hors norme ; pointillés violets = suggestion de l'IA (pas encore enregistrée). */
.test-eau { margin-top: 8px; padding-top: 14px; border-top: 3px solid #000; }
.titre-widget { font-size: 23px; margin-bottom: 10px; }
.bouton-bandelette { min-height: 120px; height: 18vh; max-height: 170px; font-size: 21px; }
.bouton-bandelette .icone { font-size: 52px; }
.ia { margin-top: 10px; }
.ia-texte { margin: 0; padding: 10px 12px; border: 2px dashed #6a1b9a; border-radius: 10px; font-size: 17px; font-weight: 600; }
.bouton-ia { background: #4a148c; margin-top: 8px; }
.bouton-ia:active { background: #311b92; }
.ligne-mesure { margin-top: 14px; }
.entete-mesure { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.nom-mesure { font-size: 21px; font-weight: 800; }
.nom-mesure small { font-size: 15px; font-weight: 600; }
.dernier { color: #555; font-size: 16px; text-align: right; }
.boutons-valeurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); gap: 8px; margin-top: 6px; }
.valeur {
  min-height: 64px; padding: 4px 2px; border: 3px solid #000; border-radius: 12px; background: #fff; color: #000;
  font: inherit; font-size: 21px; font-weight: 800; cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.valeur.hors-norme { border-bottom: 9px solid #ff6f00; }
.valeur.choisie { background: var(--principale); border-color: var(--principale); color: var(--sur-principale); }
.valeur.choisie.hors-norme { background: #ff6f00; border-color: #000; color: #000; }
.valeur.suggeree { border: 4px dashed #6a1b9a; background: #f3e5f5; color: #000; }
.valeur:focus-visible, .champ-autre:focus { outline: 3px solid #ff6f00; outline-offset: 2px; }
.etat-mesure { min-height: 1.4em; margin: 6px 0 0; font-size: 17px; font-weight: 700; }
.etat-mesure.alerte { padding: 6px 10px; background: #ffe0b2; border-left: 8px solid #ff6f00; }
.autre-valeur summary, .autres-mesures > summary { cursor: pointer; list-style: none; }
.autre-valeur summary::-webkit-details-marker, .autres-mesures > summary::-webkit-details-marker { display: none; }
.autre-valeur summary { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; text-decoration: underline; }
.form-autre { display: flex; gap: 8px; align-items: stretch; }
.champ-autre {
  width: 8em; min-height: 56px; padding: 8px 12px; font: inherit; font-size: 21px; color: #000; background: #fff;
  border: 2px solid #000; border-radius: 10px;
}
.champ-autre.suggeree { border: 4px dashed #6a1b9a; background: #f3e5f5; }
.bouton-ok { min-width: 72px; }
.autres-mesures { margin-top: 16px; }
.autres-mesures > summary {
  display: flex; align-items: center; justify-content: center; min-height: 56px; border: 2px dashed #000;
  border-radius: 12px; font-size: 19px; font-weight: 700;
}
.autres-mesures[open] > summary { margin-bottom: 4px; }
.bouton-termine { margin-top: 22px; min-height: 76px; font-size: 24px; letter-spacing: .03em; }
.bouton-termine.fait { background: #1b5e20; }
.petit-aide { font-size: 16px; margin-top: 6px; }
.releves { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.releves li { padding: 4px 10px; border: 2px solid #000; border-radius: 8px; font-size: 16px; }
.releves li.hors-norme { background: #ffe0b2; border-color: #ff6f00; }

/* Étape 3 bis : boutons photo impossibles à confondre (🏊 bleu / 🧪 violet, mot en gros), zones du tube,
   « entre deux », sel au compteur, fiche de la piscine, « ✖ Retirer ». */
.bouton-photo .mot { font-size: 30px; font-weight: 900; letter-spacing: .05em; line-height: 1.1; }
.bouton-photo .sous-mot { font-size: 17px; font-weight: 600; letter-spacing: 0; opacity: .95; }
.bouton-piscine { background: #0d47a1; }
.bouton-piscine:active { background: #002171; }
.bouton-bandelette { background: #6a1b9a; border: 4px dashed #fff; outline: 3px solid #6a1b9a; }
.bouton-bandelette:active { background: #38006b; }
.bouton-bandelette .mot { font-size: 27px; }
.bouton-sel { min-height: 96px; height: 13vh; margin-top: 14px; }
.bouton-sel .icone { font-size: 40px; }
/* Zones du tube : une bande de couleur sous chaque case (bas = orange, ok = vert, haut = rouge). */
.valeur.zone-bas { border-bottom: 9px solid #ff6f00; }
.valeur.zone-ok { border-bottom: 9px solid #2e7d32; }
.valeur.zone-haut { border-bottom: 9px solid #c62828; }
.valeur.choisie.zone-ok { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.valeur.choisie.zone-bas { background: #ff6f00; border-color: #000; color: #000; }
.valeur.choisie.zone-haut { background: #c62828; border-color: #000; color: #fff; }
.valeur.choisie.suggeree, .valeur.suggeree { border: 4px dashed #6a1b9a; background: #f3e5f5; color: #000; }
.boutons-fins { margin-top: 4px; margin-bottom: 8px; }
.boutons-fins .valeur { min-height: 56px; font-size: 19px; }
.autre-valeur .champ-autre { width: 7em; }
.ligne-mesure.discrete .nom-mesure { font-size: 18px; font-weight: 700; color: #333; }
.ligne-mesure.discrete .valeur { min-height: 54px; font-size: 18px; border-width: 2px; }
.compteur { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 8px; margin-top: 6px; }
.compteur .valeur { min-height: 76px; }
.compteur .chiffre { font-size: 38px; }
.compteur .chiffre.gris { color: #757575; border-color: #9e9e9e; border-style: dashed; }
.compteur .chiffre.attente { opacity: .7; }
.bandeau-fiche {
  display: flex; align-items: center; gap: 6px; min-height: 52px; margin-top: 10px; padding: 8px 12px;
  border: 2px dashed var(--principale); border-radius: 10px; color: #000; font-weight: 700; text-decoration: none;
  background: var(--principale-pale);
}
.bandeau-fiche small { font-weight: 600; }
.resume-fiche { margin: 8px 0 0; font-weight: 600; }
.resume-fiche a { color: #000; }
.choix { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.puce { position: relative; cursor: pointer; }
.puce input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.puce > span {   /* « > » : une pastille de couleur DANS la puce garde son style (retours n°5) */
  display: flex; align-items: center; min-height: 56px; padding: 8px 14px; border: 3px solid #000;
  border-radius: 12px; background: #fff; font-weight: 700; font-size: 18px; user-select: none;
}
.puce input:checked + span { background: var(--principale); border-color: var(--principale); color: var(--sur-principale); }
.puce input:focus-visible + span { outline: 3px solid #ff6f00; outline-offset: 2px; }
.pile .choix + label, .carte + .carte, .fiche .carte { margin-top: 12px; }
.sous-choix { margin-top: 14px; padding-top: 10px; border-top: 2px dashed #000; }
.js .sous-choix[data-cache] { display: none; }
.dimensions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dimensions label { font-weight: 700; font-size: 16px; }
.calcul { font-weight: 700; }
.form-retirer { margin: 4px 0 0; }
.retirer {
  width: 100%; min-height: 48px; border: 2px solid #b71c1c; border-radius: 10px; background: #fff;
  color: #b71c1c; font: inherit; font-weight: 800; cursor: pointer;
}
.retirer.confirmer { background: #b71c1c; color: #fff; }
.question-photo { margin-top: 6px; display: grid; gap: 6px; }
.question-photo p { margin: 0; font-weight: 700; }
.question-photo button {
  min-height: 52px; border: 2px solid #000; border-radius: 10px; font: inherit; font-weight: 800; cursor: pointer;
}
.question-photo .oui { background: var(--principale); color: var(--sur-principale); border-color: var(--principale); }
.question-photo .non { background: #fff; color: #000; }
.alerte-photo { margin-bottom: 10px; }
.pile .puce, .pile .dimensions label { margin-top: 0; }
.pile .dimensions { margin-top: 8px; }

/* Étape 4 : « Ma tournée du jour », calendrier de la semaine, planning (fiche + page piscine), saison.
   Vert = fait, orange = en retard, gros boutons ▲ ▼ pour le pouce. */
.fiche h3 { margin-top: 14px; }
.bouton-clair { background: #fff; color: #000; border: 3px solid #000; }
.bouton-clair:active { background: var(--principale-pale); }
.entete-tournee { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.entete-tournee h1 { margin: 0; }
.date-du-jour { margin: 2px 0 8px; font-size: 20px; font-weight: 700; }
.saison-pastille { padding: 4px 10px; border: 2px solid #000; border-radius: 999px; font-weight: 800; white-space: nowrap; }
.saison-ete { background: #fff3c4; }
.saison-hiver { background: #dbeafe; }
.avancement { margin: 8px 0 0; font-size: 18px; }
.tournee { list-style: none; margin: 10px 0 0; padding: 0; }
.ligne-tournee { display: grid; grid-template-columns: 1fr 64px; gap: 8px; align-items: stretch; }
.ligne-tournee + .ligne-tournee { margin-top: 10px; }
.ligne-tournee .ligne-piscine { min-height: 132px; }
.ordre { display: grid; grid-template-rows: 1fr 1fr; gap: 6px; }
.ordre form { display: flex; }
.bouton-ordre {
  width: 100%; min-height: 62px; border: 3px solid #000; border-radius: 12px; background: #fff; color: #000;
  font: inherit; font-size: 26px; font-weight: 900; cursor: pointer; touch-action: manipulation;
}
.bouton-ordre:active { background: var(--principale-pale); }
.bouton-ordre:disabled { border-color: #bdbdbd; color: #bdbdbd; cursor: default; }
.bouton-ordre:focus-visible { outline: 3px solid #ff6f00; outline-offset: 2px; }
.etat-fait .ligne-piscine, .entree.etat-fait > summary { background: #e8f5e9; border-color: #2e7d32; }
.etat-retard .ligne-piscine, .entree.etat-retard > summary, .entree.etat-manque > summary {
  background: #fff3e0; border-color: #ff6f00; border-width: 3px;
}
.etat-retard .petit, .entree.etat-retard .petit, .entree.etat-manque .petit, .prochain.etat-retard { color: #8a3b00; font-weight: 800; }
.etat-en_cours .ligne-piscine, .entree.etat-en_cours > summary { background: #fffde7; }
.rien-de-prevu { margin-top: 14px; }
.gros-texte { font-size: 23px; font-weight: 800; margin: 0 0 8px; }
.jour-suivant + .jour-suivant { margin-top: 10px; }
.noms-jour { margin: 4px 0 0; padding-left: 22px; font-size: 19px; }
.noms-jour a { color: #000; font-weight: 700; }
.semaines { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bouton-semaine {
  display: flex; align-items: center; justify-content: center; min-height: 60px; padding: 6px; border: 3px solid #000;
  border-radius: 12px; color: #000; background: #fff; font-weight: 800; text-decoration: none; text-align: center;
}
.bouton-semaine:active { background: var(--principale-pale); }
.periode { margin: 8px 0 0; font-weight: 600; }
.periode a { color: #000; }
.jour-cal { margin-top: 18px; padding-top: 10px; border-top: 3px solid #000; }
.jour-cal.aujourdhui h2 { color: var(--principale-texte); }
.jour-cal.passe { opacity: .85; }
.rien-ce-jour { margin-top: 4px; }
.entree { margin-top: 8px; }
.entree > summary {
  display: grid; align-items: center; min-height: 64px; padding: 8px 14px; border: 2px solid #000; border-radius: 12px;
  background: #fff; cursor: pointer; list-style: none;
}
.entree > summary::-webkit-details-marker { display: none; }
.entree > summary:focus-visible { outline: 3px solid #ff6f00; outline-offset: 2px; }
.entree[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.actions { padding: 6px 12px 12px; border: 2px solid #000; border-top: 0; border-radius: 0 0 12px 12px; }
.titre-actions { margin: 12px 0 0; font-weight: 800; }
.reports-principaux { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.bouton-report {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 68px;
  border: 0; border-radius: 12px; background: var(--principale); color: var(--sur-principale); font: inherit; font-weight: 800; font-size: 20px;
  cursor: pointer;
}
.bouton-report small { font-size: 15px; font-weight: 600; }
.bouton-report:active { background: var(--principale-fonce); }
.bouton-remettre { width: 100%; margin-top: 10px; background: #000; }
.reports-jours { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-top: 6px; }
.bouton-jour {
  min-height: 54px; padding: 4px; border: 2px solid #000; border-radius: 10px; background: #fff; color: #000;
  font: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
}
.bouton-jour:active { background: var(--principale-pale); }
.actions .retirer { margin-top: 12px; }
.lien-ajouter { display: inline-flex; align-items: center; min-height: 48px; margin-top: 6px; color: #000; font-weight: 700; }
.a-planifier { margin-top: 22px; }
.a-planifier ul { margin: 6px 0 0; padding-left: 22px; }
.a-planifier a { color: #000; font-weight: 700; }
.carte-saison { margin-top: 22px; }
.choix-saison { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.bouton-saison {
  min-height: 64px; border: 3px solid #000; border-radius: 12px; background: #fff; color: #000; font: inherit;
  font-size: 21px; font-weight: 800; cursor: pointer;
}
.bouton-saison.actuelle { background: var(--principale); border-color: var(--principale); color: var(--sur-principale); }
.bloc-planning { margin-top: 8px; padding-top: 14px; border-top: 3px solid #000; }
.prochain { margin: 8px 0 0; font-size: 19px; }
.bouton-ligne { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.deja-prevu { background: #f5f5f5; color: #555; }

/* Étape 5 : widget « Dosage » (🧴 À mettre). */
html:not(.js) .seulement-js { display: none; }
.doses { list-style: none; margin: 8px 0 0; padding: 0; }
.dose { margin-top: 12px; padding: 12px; border: 3px solid #000; border-radius: 12px; }
.dose-mise { border-color: #1b5e20; background: #e8f5e9; }
.dose-tete { display: flex; align-items: center; gap: 10px; }
.dose-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
            border-radius: 50%; background: #000; color: #fff; font-weight: 900; font-size: 20px; }
.dose-nom { font-size: 20px; font-weight: 800; }
.dose-qte { margin: 6px 0 0; font-size: 32px; font-weight: 900; }
.dose-etiquette { font-size: 21px; color: #4e342e; }
.dose-pourquoi { margin: 2px 0 0; font-weight: 700; }
.dose-delai { margin: 6px 0 0; padding: 6px 10px; background: #bbdefb; border-left: 8px solid #0d47a1; font-weight: 700; }
.dose-precautions { margin: 6px 0 0; padding-left: 20px; font-size: 16px; }
.dose-fait { margin: 8px 0 0; font-weight: 800; color: #1b5e20; font-size: 19px; }
.dose-info { margin: 8px 0 0; padding: 6px 10px; border-left: 6px solid var(--principale); background: var(--principale-pale); font-size: 17px; font-weight: 600; }
.dose-rien { font-size: 20px; font-weight: 800; color: #1b5e20; }
.qte-reglage { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 8px; margin-top: 10px; align-items: stretch; }
html:not(.js) .qte-reglage { grid-template-columns: 1fr; }
.qte-pas { font-size: 30px; }
.qte-champ { display: flex; align-items: center; gap: 6px; }
.champ-qte { width: 100%; min-width: 0; text-align: center; font-weight: 800; }
.qte-unite { font-weight: 700; }
.bouton-mis { background: #1b5e20; margin-top: 10px; }
.bouton-mis:active { background: #0d3c12; }
.extras { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.bouton-extra { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 6px;
                border: 2px solid #000; border-radius: 12px; color: #000; font-weight: 800; text-decoration: none; text-align: center; }
.bouton-extra.actif { background: #000; color: #fff; }
.panneau-extra { margin-top: 10px; padding: 10px; border: 2px dashed #000; border-radius: 12px; }
.panneau-extra h3, .deja-mis h3 { margin: 0; font-size: 19px; }
.deja-mis { margin-top: 14px; }
.deja-mis ul { list-style: none; margin: 6px 0 0; padding: 0; }
.deja-mis li { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 48px; border-bottom: 1px solid #9e9e9e; }
.securite-dosage { margin-top: 14px; }
.securite-dosage summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 800; }
.securite-dosage ul { margin: 4px 0 0; padding-left: 20px; font-size: 16px; }
/* R12 (06/11) : marche à suivre eau verte, repliée, texte seul. */
.marche-eau-verte { margin-top: 12px; }
.marche-eau-verte summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 800; }
.marche-eau-verte ol { margin: 4px 0 0; padding-left: 22px; font-size: 16px; }
.marche-eau-verte li + li { margin-top: 4px; }
.releves.deposes li { border-color: #1b5e20; }

/* Marque de l'instance (marque.py) : logo dans la barre et sur l'écran de connexion, s'il y en a un. */
/* Titre sur une ligne : c'est le nom de l'utilisateur (.qui, à droite) qui se raccourcit avec « … ». */
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; white-space: nowrap; flex-shrink: 0; }
.barre .qui { display: block; min-width: 0; line-height: 44px; }
.logo-barre { display: block; width: 40px; height: 40px; object-fit: contain; }
/* Retours n°6 : logo limité en hauteur pour que tout l'écran de connexion (bouton compris) tienne à 360×640. */
.logo-connexion { display: block; width: auto; max-width: min(260px, 100%); max-height: 130px; height: auto;
                  margin: 0 auto 6px; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
                      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.accroche { margin: 0 0 8px; text-align: center; font-style: italic; color: #333; }

/* Espace patron (plan du 2026-11-02) : chiffres du jour, cartes par technicien, gros boutons. */
.compteurs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 4px; }
.compteur-jour { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border: 3px solid #000;
                 border-radius: 12px; font-weight: 700; font-size: 17px; text-align: center; }
.compteur-jour .chiffre { font-size: 36px; line-height: 1.1; font-weight: 800; }
.compteur-fait { background: #c8e6c9; }
.compteur-retard { background: #ffe0b2; }
.titre-section { margin-top: 22px; }
.carte-tech { padding: 0; margin-top: 10px; overflow: hidden; }
.carte-tech + .carte-tech { margin-top: 10px; }
.tete-carte { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 12px 14px; min-height: 64px;
              color: #000; text-decoration: none; background: var(--principale-clair); }
.piscines-carte { list-style: none; margin: 0; padding: 4px 14px 10px; }
.piscines-carte li a { display: flex; align-items: center; min-height: 48px; color: #000; font-size: 19px;
                       font-weight: 600; text-decoration: none; border-top: 1px solid #ccc; }
.boutons-patron { margin-top: 20px; }
.carte-voir { margin-top: 24px; border-color: #c51162; }
.bouton-voir { background: #c51162; }
.bouton-danger { background: #b71c1c; margin-top: 16px; }
.inactif { opacity: .6; }
.piscines-tech { list-style: none; margin: 8px 0 0; padding: 0; }
.piscines-tech li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px;
                    min-height: 56px; padding: 6px 0; border-top: 1px solid #ccc; font-size: 19px; font-weight: 600; }
.piscines-tech a { color: #000; min-width: 0; overflow-wrap: break-word; }
.piscines-tech a .badge-remplace, .piscines-tech a .badge-tech { margin-top: 4px; }
.piscines-tech form { margin: 0; }
.bouton-retirer-piscine { min-height: 48px; min-width: 96px; font: inherit; font-size: 16px; font-weight: 700;
                          background: #fff; color: #b71c1c; border: 2px solid #b71c1c; border-radius: 10px; cursor: pointer; }
.gros-choix { width: 100%; min-height: 56px; margin-top: 4px; padding: 8px; font: inherit; font-size: 19px;
              border: 2px solid #000; border-radius: 10px; background: #fff; color: #000; }
.carte-mdp .ligne-mdp { font-size: 19px; margin: 8px 0; }
.mdp { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 24px; letter-spacing: .04em; user-select: all;
       word-break: break-all; }
.journal { list-style: none; margin: 10px 0 0; padding: 0; }
.journal li { padding: 10px 0; border-top: 1px solid #ccc; }

/* « 👁 Voir comme… » : bandeau collé en haut de CHAQUE page, couleur qu'aucun autre élément n'utilise. */
.bandeau-bascule { position: sticky; top: 0; z-index: 1000; display: flex; flex-wrap: wrap; align-items: center;
                   justify-content: space-between; gap: 8px; padding: 10px 14px;
                   padding-top: max(10px, env(safe-area-inset-top));
                   background: repeating-linear-gradient(135deg, #ff00a8 0 18px, #d4008c 18px 36px);
                   color: #fff; font-weight: 800; font-size: 18px; border-bottom: 5px solid #ffea00; }
.bandeau-bascule form { margin: 0; }
.bouton-revenir { min-height: 52px; padding: 8px 16px; font: inherit; font-weight: 800; font-size: 18px;
                  background: #ffea00; color: #000; border: 3px solid #000; border-radius: 12px; cursor: pointer; }

/* Retours du 02/11 au soir : badges (patron, vacances, désactivé), cases du rôle. */
.badge { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; font-size: 15px;
         font-weight: 700; vertical-align: middle; border: 2px solid #000; background: #fff; color: #000; }
.badge-vacances { background: #fff3c4; border-color: #8d6e00; }
.badge-inactif { background: #eee; border-color: #616161; color: #424242; }
.badge-patron { background: var(--principale-pale); border-color: var(--principale-fonce); }
.ligne-fixe { cursor: default; }
.cases-role { border: 0; margin: 10px 0 0; padding: 0; }
.cases-role legend { font-weight: 700; padding: 0; margin-bottom: 4px; }
.case-role { display: flex; align-items: flex-start; gap: 12px; min-height: 56px; padding: 10px; margin-top: 8px;
             border: 2px solid #000; border-radius: 12px; cursor: pointer; }
.case-role input { width: 30px; height: 30px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--principale); }
.case-role span { display: flex; flex-direction: column; font-size: 19px; }
.case-role small { font-size: 15px; font-weight: 400; color: #333; }
.case-role:has(input:checked) { background: var(--principale-pale); border-color: var(--principale); }

/* État de l'eau + Observations (widget etat_eau, 02/11 au soir) et « ⚠️ Problèmes signalés » (accueil du patron). */
.boutons-etat { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.bouton-etat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
               min-height: 84px; padding: 8px; font: inherit; font-size: 19px; font-weight: 800; cursor: pointer;
               border: 3px solid #000; border-radius: 14px; background: #fff; color: #000; }
.bouton-etat span { font-size: 30px; line-height: 1; }
.bouton-etat.etat-claire.actif { background: #bbdefb; border-color: #0d47a1; }
.bouton-etat.etat-trouble.actif { background: #e0e0e0; border-color: #424242; }
.bouton-etat.etat-verte.actif { background: #ffb74d; border-color: #e65100; }   /* retours n°11 : orange, pas vert (≠ « OK ») */
.bouton-etat.etat-trouble.actif { background: #fff176; border-color: #8a6d00; }
.bouton-etat.etat-probleme { border-color: #e65100; }
.bouton-etat.etat-probleme.actif { background: #c2410c; border-color: #000; color: #fff; }
.bouton-etat.etat-urgence { border-color: #b71c1c; border-width: 4px; color: #b71c1c; font-weight: 900; }
.bouton-etat.etat-urgence.actif { background: #b71c1c; border-color: #000; color: #fff; }
.bouton-etat.etat-hs.actif { background: #b71c1c; border-color: #000; color: #fff; }
.bouton-etat.actif { box-shadow: inset 0 0 0 3px #fff; }
.titre-observation { display: block; margin-top: 16px; font-weight: 800; font-size: 19px; }
.champ-observation { width: 100%; min-height: 96px; margin-top: 6px; padding: 10px; font: inherit; font-size: 18px;
                     border: 2px solid #000; border-radius: 10px; box-sizing: border-box; resize: vertical; }
.etat-choisi { font-size: 20px; font-weight: 800; }
.observation-texte { margin: 6px 0 0; white-space: pre-line; }
.autres-traitements { margin-top: 14px; }
.autres-traitements summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; }
.carte-problemes { border-color: #b71c1c; border-width: 3px; }
.problemes { list-style: none; margin: 6px 0 0; padding: 0; }
.problemes li { padding: 10px 0; border-top: 1px solid #ccc; }
.problemes li > a { color: #000; font-size: 19px; }
.problemes .petit { display: block; }
.bouton-vu { margin-top: 8px; min-height: 48px; padding: 0 16px; font: inherit; font-size: 17px; font-weight: 700;
             background: #fff; color: #1b5e20; border: 2px solid #1b5e20; border-radius: 10px; cursor: pointer; }

/* Retours n°2 du 02/11 : fiche du passage, page Produits, piscines faites cliquables */
.voir-passage { font-size: 14px; color: var(--principale-texte); white-space: nowrap; }
.infos-passage { list-style: none; margin: 0; padding: 0; font-size: 18px; }
.infos-passage li + li { margin-top: 6px; }
.filtres { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.catalogue { margin: 8px 0 0; padding-left: 20px; }
.catalogue li + li { margin-top: 4px; }
.aide-echec { background: #fff3e0; border-left: 4px solid #ff6f00; padding: 8px 10px; }

/* Retours n°3 du 03/11 : couleur attitrée de chaque technicien (couleurs.py : texte blanc, contraste AA ≥ 4,5),
 « ⚠️ Non attribuée » en rouge RÉSERVÉ, calendrier de l'équipe, tableau des passages, absences, fiches produits. */
.badge-tech { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 15px; font-weight: 800;
              color: #fff; border: 2px solid transparent; white-space: nowrap; vertical-align: middle; }
/* Retours n°8 : « ⚠️ Sans technicien : à attribuer » est long : il passe à la ligne entre deux mots (360 px). */
.badge-tech.tech-alerte { white-space: normal; max-width: 100%; }
.tech-bleu { background: #1d4ed8; }
.bord-bleu { border-left-color: #1d4ed8 !important; }
.pastille-bleu { background: #1d4ed8; }
.tech-vert { background: #15803d; }
.bord-vert { border-left-color: #15803d !important; }
.pastille-vert { background: #15803d; }
.tech-violet { background: #7e22ce; }
.bord-violet { border-left-color: #7e22ce !important; }
.pastille-violet { background: #7e22ce; }
.tech-orange { background: #b45309; }
.bord-orange { border-left-color: #b45309 !important; }
.pastille-orange { background: #b45309; }
.tech-sarcelle { background: #0f766e; }
.bord-sarcelle { border-left-color: #0f766e !important; }
.pastille-sarcelle { background: #0f766e; }
.tech-magenta { background: #a21caf; }
.bord-magenta { border-left-color: #a21caf !important; }
.pastille-magenta { background: #a21caf; }
.tech-olive { background: #4d7c0f; }
.bord-olive { border-left-color: #4d7c0f !important; }
.pastille-olive { background: #4d7c0f; }
.tech-ardoise { background: #334155; }
.bord-ardoise { border-left-color: #334155 !important; }
.pastille-ardoise { background: #334155; }
.tech-alerte { background: #b91c1c; }
.tech-neutre { background: #4b5563; }
.bord-neutre { border-left-color: #4b5563 !important; }
.pastille-neutre { background: #4b5563; }
.bord-alerte { border-left-color: #b91c1c !important; }
.pastille-alerte { background: #b91c1c; }
.tech-alerte { border: 2px dashed #ffea00; outline: 2px solid #b91c1c; }
.raison-badge { font-size: 14px; color: #7f1d1d; font-weight: 600; }
.fait-par { font-size: 14px; color: #333; }   /* retours n°8 : « fait par X » (jour passé, vrai passage) */
.badge-remplace { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 14px; font-weight: 700;
                  background: #fff; color: #000; border: 2px solid #000; white-space: nowrap; }
.badges-ligne { grid-column: 1; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 2px; }
.pastille-tech { display: inline-block; width: 18px; height: 18px; border-radius: 50%; vertical-align: -3px;
                 margin-right: 6px; border: 2px solid #000; }
/* Calendrier de l'équipe (accueil du patron) */
.cal-ligne { list-style: none; margin: 0; padding: 0; }
.cal-ligne li + li { margin-top: 6px; }
.compte-jour { font-size: 15px; font-weight: 600; color: #333; }
.carte-tech .tete-carte { border-left: 10px solid transparent; }
/* Tableau des passages (page piscine vue patron) */
.tableau-passages { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 17px; }
.tableau-passages th { text-align: left; font-size: 15px; padding: 4px 6px; border-bottom: 2px solid #000; }
.tableau-passages td { padding: 0; border-bottom: 1px solid #ccc; }
.tableau-passages td a, .tableau-passages td span.cellule { display: block; min-height: 48px; padding: 10px 6px; color: #000;
                                                   text-decoration: none; }
.tableau-passages tr.probleme { background: #fff7ed; }
.tableau-passages tr.pas_fait { background: #f5f5f5; }
/* Retours n°6 : passages en cartes (le tableau débordait à 360 px) */
.liste-passages { list-style: none; padding: 0; margin: 8px 0 0; }
.liste-passages li { border: 1px solid #ccc; border-radius: 10px; margin-top: 8px; min-width: 0; }
.liste-passages li.probleme { background: #fff7ed; border-color: #c2410c; }
.liste-passages li.pas_fait { background: #f5f5f5; }
.passage-carte { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px;
                 min-height: 48px; padding: 10px 12px; color: #000; text-decoration: none; }
.passage-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.passage-date { font-weight: 800; white-space: nowrap; }
.passage-tete .badge-tech { white-space: normal; max-width: 100%; overflow-wrap: break-word; }
.passage-etat { grid-column: 1; margin-top: 4px; min-width: 0; overflow-wrap: break-word; }
.passage-carte .fleche { grid-column: 2; grid-row: 1 / span 2; }
.liste-passages .raisons { overflow-wrap: break-word; }
.raisons { display: block; font-size: 14px; color: #7c2d12; }
.non-fait-titre { font-size: 26px; }
/* Absences et remplacements */
.carte-absence { border-color: #8d6e00; border-width: 3px; }
.badge-absent { background: #fff3c4; border-color: #8d6e00; }
.remplacement { padding: 10px 0; border-top: 1px solid #ccc; }
.remplacement label { font-weight: 800; font-size: 19px; }
.dates-absence { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dates-absence label { display: flex; flex-direction: column; font-weight: 700; }
.dates-absence input, .pile input[type=date] { min-height: 52px; font: inherit; font-size: 18px; padding: 6px 8px;
                    border: 2px solid #000; border-radius: 10px; }
/* Fiches produits */
.catalogue-liens { list-style: none; margin: 8px 0 0; padding: 0; }
.catalogue-liens li + li { margin-top: 8px; }
.periodes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.periodes a { display: flex; align-items: center; justify-content: center; min-height: 52px; border: 3px solid #000;
              border-radius: 12px; color: #000; font-weight: 800; text-decoration: none; background: #fff; }
.periodes a.actuelle { background: var(--principale); border-color: var(--principale); color: var(--sur-principale); }
.avertissement { background: #fff3e0; border-left: 6px solid #e65100; padding: 10px 12px; font-weight: 600; }

/* Retours n°5 (03/11) : téléphone 360-412 px. Rien ne dépasse de sa carte, pas de mot coupé, pastilles de couleur
   en grille avec leur nom, cases ≥ 44 px pour le doigt. Contrôle automatique : outils/verif_mobile.py. */
.page { overflow-wrap: break-word; }                  /* un très long mot (adresse) passe à la ligne au lieu de sortir */
.insecable { white-space: nowrap; }                   /* « e-mail », « 250 g » : jamais coupés */
.badge-remplace { white-space: normal; max-width: 100%; }
.pile .carte > label { display: block; }              /* l'étiquette d'un champ ne colle plus au champ du dessus */
/* Couleur du technicien : grille de cases égales (2 colonnes à 360 px, 3 à 393-412 px, 5 sur grand écran),
   pastille de 44 px et son nom DESSOUS ; la couleur choisie : cadre épais + ✓ dans la pastille + « choisie ». */
.palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 10px; }
.palette .puce > span { flex-direction: column; justify-content: center; align-items: center; gap: 6px; min-height: 96px;
                        padding: 8px 6px; font-size: 16px; line-height: 1.2; text-align: center; border-width: 2px; }
.palette .pastille-tech { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px;
                          height: 44px; margin: 0; border: 3px solid #fff; box-shadow: 0 0 0 2px #000; }
.palette .nom-couleur { display: flex; flex-direction: column; align-items: center; white-space: nowrap; }
.palette .coche, .palette .choisie { display: none; }
.palette .puce input:checked + span { background: var(--principale-pale); color: #000; border: 4px solid #000;
                                      padding: 6px 4px; }
.palette .puce input:checked + span .coche { display: block; color: #fff; font-size: 24px; font-weight: 900; line-height: 1; }
.palette .puce input:checked + span .choisie { display: block; font-size: 14px; font-weight: 700; }
/* Cartes des techniciens (accueil) : le nom, le badge « remplace » et « voir le passage » passent à la ligne. */
.piscines-carte li a { flex-wrap: wrap; column-gap: 8px; row-gap: 2px; padding: 6px 0; }
.piscines-carte .nom-ligne { flex: 1 1 12em; min-width: 0; }
.piscines-carte .voir-passage { margin-left: auto; }
/* Boutons de jour (report, passage ponctuel) : « Aujourd'hui » tient dans sa case. */
.reports-jours { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.bouton-jour { font-size: 16px; padding: 4px 2px; }
/* Cases du test d'eau : « 30-50 » ne se coupe plus au tiret. */
.boutons-valeurs { grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); }
.valeur { white-space: nowrap; }
.valeur.long { font-size: 17px; letter-spacing: -.01em; }
/* Dates d'une absence : « Du » et « Au » l'un sous l'autre si l'écran est trop étroit (le champ date a une largeur
   minimale dans Chrome). */
.dates-absence { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.dates-absence input { width: 100%; min-width: 0; }
/* Retours n°6 : stock à la piscine, page Produits du patron, miniatures des produits */
.miniature-produit { flex: none; width: 48px; height: 48px; object-fit: contain; border: 1px solid #bbb; border-radius: 8px;
                     background: #fff; vertical-align: middle; }
.photo-produit img { width: 96px; height: 96px; object-fit: contain; border: 1px solid #bbb; border-radius: 10px; background: #fff; }
.nom-avec-miniature { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nom-avec-miniature > span { min-width: 0; overflow-wrap: break-word; }
.stock-liste { list-style: none; margin: 8px 0 0; padding: 0; }
.stock-ligne { margin-top: 12px; padding: 12px; border: 3px solid #000; border-radius: 12px; min-width: 0; }
.stock-ligne.stock-bas { border-color: #b45309; background: #fff7ed; }
.stock-nom { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 19px; font-weight: 800; min-width: 0; }
.stock-nom > span { min-width: 0; overflow-wrap: break-word; }
.stock-reste { margin: 6px 0 0; font-size: 22px; }
.stock-alerte { margin: 6px 0 0; font-weight: 800; color: #9a3412; }
.stock-alerte-mini { font-weight: 800; color: #9a3412; white-space: nowrap; }
.stock-alerte small { font-weight: 400; }
.rappel-stock { grid-column: 1; display: block; margin-top: 4px; font-weight: 800; color: #9a3412; overflow-wrap: break-word; }
.stock-alerte-mini { white-space: normal; }
.stock-actions { margin-top: 8px; }
.stock-deposer { display: grid; grid-template-columns: 72px auto minmax(0, 1fr); gap: 8px; align-items: stretch; }
.stock-contenant { display: flex; align-items: center; font-size: 20px; font-weight: 800; }
.stock-nombre input { width: 100%; min-height: 64px; font: inherit; font-size: 24px; font-weight: 800; text-align: center;
                      border: 3px solid #000; border-radius: 12px; padding: 0; }
.stock-deposer .gros-bouton { margin: 0; }
.stock-corriger, .stock-ajouter, .stock-deja, .periode-dates, .detail-mis { margin-top: 10px; }
.stock-corriger summary, .stock-ajouter summary, .stock-deja summary, .periode-dates summary, .detail-mis summary {
  min-height: 48px; display: flex; align-items: center; font-weight: 800; cursor: pointer; }
.stock-ajouter { border-top: 2px dashed #000; padding-top: 6px; }
.periode-choisie { margin: 8px 0; font-size: 18px; }
.carte-depot { margin-top: 12px; padding: 12px; border: 2px solid #000; border-radius: 12px; min-width: 0; }
.carte-depot h3 { margin: 0; font-size: 19px; overflow-wrap: break-word; }
.carte-depot h3 a { color: #000; }
.carte-depot h4 { margin: 10px 0 0; font-size: 16px; }
.depot-colonnes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 16px; }
@media (min-width: 640px) { .depot-colonnes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.depot-colonnes .releves { flex-direction: column; align-items: stretch; }
.depot-colonnes .releves li { overflow-wrap: break-word; min-width: 0; }
.releves.restes li { border-color: #555; }
.releves li.stock-bas { border-color: #b45309; background: #fff7ed; }
.total-depots { flex-direction: column; align-items: stretch; }
.case-simple { display: flex; align-items: center; gap: 10px; min-height: 48px; font-weight: 700; }
.case-simple input { width: 24px; height: 24px; }
.ref-client { display: inline-block; padding: 1px 8px; border: 2px solid #000; border-radius: 6px; font-size: 15px;
              font-weight: 800; white-space: nowrap; background: #f1f5f9; }
.champ-recherche { width: 100%; min-height: 56px; margin-top: 4px; padding: 8px 12px; font: inherit; font-size: 19px;
                   border: 2px solid #000; border-radius: 10px; }
/* Deux colonnes, largeurs selon le contenu : aucun mot coupé à 360 px (« cartouches », références). */
.total-produits { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 16px; }
.total-produits th { text-align: left; font-size: 14px; padding: 4px; border-bottom: 2px solid #000; }
.total-produits .ref-produit { display: block; font-size: 14px; color: #333; }
.total-produits td { padding: 6px 4px; border-bottom: 1px solid #ccc; vertical-align: top; overflow-wrap: break-word; }

/* Retours n°9 : sections repliées (accueil patron, page Produits). Le titre reste lisible, ▸ / ▾ à gauche. */
.section-repliee > summary { cursor: pointer; list-style: none; display: flex; align-items: center; min-height: 48px; }
.section-repliee > summary::-webkit-details-marker { display: none; }
.section-repliee > summary::before { content: "▸"; font-size: 20px; margin-right: 8px; flex: none; }
.section-repliee[open] > summary::before { content: "▾"; }
.section-repliee > summary > h2 { margin: 0; min-width: 0; overflow-wrap: break-word; }
.section-repliee > summary:focus-visible { outline: 3px solid #ff6f00; outline-offset: 2px; }
.section-repliee[open] > summary { margin-bottom: 8px; }

/* Page ⚙️ Paramètres */
.carte-reglages h2 { margin-top: 0; }
.reglage { padding: 10px 0; border-top: 1px solid #ccc; }
.reglage:first-of-type { border-top: 0; }
.titre-reglage { display: block; margin: 0 0 6px; font-weight: 800; }
.choix-reglage, .cases-reglage { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.cases-reglage { flex-direction: column; }
.choix-reglage .case, .cases-reglage .case { min-height: 44px; display: flex; align-items: center; gap: 8px; }
.nombre-reglage { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nombre-reglage input { width: 96px; min-height: 48px; font: inherit; font-size: 20px; font-weight: 800; text-align: center;
                        border: 3px solid #000; border-radius: 12px; }
/* R17 (06/11) : les seuils décimaux (champ texte, virgule permise) ont la même taille que les nombres entiers. */
.pile .nombre-reglage input[type=text] { width: 96px; min-height: 48px; padding: 0; font-size: 20px; font-weight: 800;
                                         text-align: center; border: 3px solid #000; border-radius: 12px; }
.maj-reglage { font-style: italic; }

/* Catégories de problème (widget état de l'eau) */
.categories-probleme { border: 0; padding: 0; margin: 10px 0 0; }
.categories-probleme legend { font-weight: 800; padding: 0; margin-bottom: 4px; }
.case-categorie { min-height: 48px; display: flex; align-items: center; gap: 10px; }
.case-categorie input { width: 24px; height: 24px; flex: none; }
.categories-texte { font-weight: 800; color: #9a3412; }
.choix-reglage .case input, .cases-reglage .case input { flex: none; width: 24px; height: 24px; }

/* Retours n°10 : Techniciens et Calendrier encadrés comme les autres sections de l'accueil patron. */
.carte-section { padding: 12px; margin-top: 16px; min-width: 0; }
.carte-section .carte-tech:first-of-type { margin-top: 0; }
.observation-texte { overflow-wrap: break-word; white-space: pre-line; }
.observation-longue > summary { cursor: pointer; list-style: none; }
.observation-longue > summary::-webkit-details-marker { display: none; }
.observation-longue[open] > summary { display: none; }
.lire-suite { font-weight: 800; text-decoration: underline; white-space: nowrap; }

/* Retours n°11 : Problèmes signalés lisibles d'un coup d'œil (code feu : rouge = hors service, orange = à surveiller). */
.badges-pb { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.badge-pb { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border-radius: 999px;
            font-size: 17px; font-weight: 800; line-height: 1.2; border: 2px solid #000; max-width: 100%;
            overflow-wrap: break-word; }
.pb-urgence { background: #b71c1c; color: #fff; border: 3px solid #000; font-size: 19px; min-height: 42px;
              box-shadow: 0 0 0 3px #ffcdd2; }
.pb-probleme { background: #c2410c; color: #fff; border-color: #8f3200; }   /* ergonomie n°10 : 5,18:1 (avant #e65100 : 3,79:1) */
.pb-orange { background: #ffb74d; color: #000; border-color: #e65100; }
.pb-jaune { background: #fff176; color: #000; border-color: #b59f00; }
.pb-info { background: #fff; color: #000; border-color: #8f3200; }
.pb-ok { background: #e3f2fd; color: #000; border-color: #0d47a1; }
li.badges-pb { list-style: none; }
.case-hs-ancien { min-height: 56px; display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 12px;
           border: 3px solid #b71c1c; border-radius: 12px; font-size: 19px; font-weight: 800; }
.case-hs input { width: 28px; height: 28px; flex: none; }
.case-hs small { font-weight: 400; font-size: 14px; }

/* Retours n°11 : page terrain : chaque bloc encadré comme la vue patron, sauf la photo et le test d'eau (en haut). */
.widget.carte { padding: 12px; min-width: 0; }
.historique.carte { margin-top: 16px; padding: 12px; }

/* Retours n°11 : photos du problème (accueil patron, historique, saisie) et bouton de prise de vue. */
.photos-probleme { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; }
.photos-probleme img { display: block; width: 104px; height: 78px; object-fit: cover; border-radius: 8px;
                       border: 3px solid #e65100; }
.bloc-photo-probleme { margin-top: 14px; padding: 12px; border: 3px solid #e65100; border-radius: 12px; }
.bloc-photo-probleme.pb-cadre-urgence { border-color: #b71c1c; background: #fff5f5; }
.bloc-photo-probleme h3 { margin: 0 0 6px; }
.bouton-probleme { background: #c2410c; color: #fff; }
.pb-cadre-urgence .bouton-probleme { background: #b71c1c; }
.bouton-probleme .icone { font-size: 56px; }
.bouton-probleme .mot { font-size: 22px; letter-spacing: .02em; text-align: center; }

/* Retours n°15 : produit proposé sans stock à la piscine, choix avant « ✅ Mis », produits à apporter */
.dose-stock { margin: 8px 0 4px; font-weight: 800; color: #9a3412; }
.bouton-apporter { margin-bottom: 8px; }
.choix-sans-stock { display: grid; gap: 8px; margin-top: 8px; }
.bouton-choix-stock { min-height: 56px; overflow-wrap: break-word; }
.bouton-annuler-mis { min-height: 48px; padding: 8px 14px; border: 2px solid #000; border-radius: 10px; background: #fff; font-weight: 800; }
.a-apporter { border-color: #9a3412; }

/* Retours n°16 : le nom en haut déplie / replie tous les blocs */
h1[data-tout-replier] { cursor: pointer; }
h1[data-tout-replier]::after { content: " ▾▸"; font-size: 0.6em; opacity: 0.55; }

/* Retours n°18 : « 🧴 Produits à prendre (N) » (Ma tournée et chaque jour du calendrier du patron). Rien à prendre :
   cadre blanc et gris, aucune couleur d'alerte. Des produits : cadre orange doux (le compteur se lit plié). */
.a-prendre { margin: 10px 0; border-radius: 12px; background: #fff; border: 2px solid #d4d8d7; color: #000; }
.a-prendre > summary { padding: 0 12px; min-height: 48px; font-weight: 700; }
.a-prendre > summary::before { color: #6b7280; }
.a-prendre-nb { white-space: nowrap; }
.a-prendre-rien > summary { color: #4b5563; font-weight: 600; }
.a-prendre-oui { background: #fff4e0; border-color: #e08a1e; }
.a-prendre-oui > summary { color: #7a3e00; }
.a-prendre-oui > summary::before { color: #b45309; }
.a-prendre-liste { list-style: none; margin: 0; padding: 0 12px 10px; font-size: 18px; }
.a-prendre-liste li { padding: 6px 0; border-top: 1px solid #f0cf9c; overflow-wrap: break-word; }
.a-prendre-liste small { display: block; color: #4b5563; font-size: 14px; }
.a-prendre-vide { margin: 0; padding: 0 12px 12px; color: #4b5563; }
.section-repliee.a-prendre[open] > summary { margin-bottom: 0; }

/* Retours n°18 : calendrier de la semaine du patron, une carte par jour, piscines en pastilles aux couleurs des
   techniciens (classes tech-… : couleurs.py). */
.cal-equipe .jour-cal { margin-top: 10px; padding: 10px 12px 12px; border: 1px solid #d4d8d7; border-top: 1px solid #d4d8d7;
                        border-radius: 14px; background: #fff; }
.cal-equipe .jour-cal.aujourdhui { border: 2px solid var(--principale); background: var(--principale-clair);
                                   box-shadow: 0 2px 6px rgba(0, 77, 64, .18); }
.cal-equipe .jour-cal.passe { opacity: .7; }
.cal-equipe .jour-cal h2 { margin: 0 0 8px; font-size: 18px; line-height: 1.3; }
.cal-equipe .jour-cal.aujourdhui h2 { color: var(--principale-fonce); font-size: 20px; }
.cal-equipe .compte-jour { font-size: 14px; font-weight: 600; color: #4b5563; }
.cal-equipe .rien-ce-jour { margin: 0; color: #6b7280; }
/* Tests de Tommy n°7 (06/11) : cases des villas toutes de la même largeur (grille), quelle que soit la longueur du nom. */
.cal-equipe .cal-ligne { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 6px; }
.cal-equipe .cal-ligne li + li { margin-top: 0; }
.cal-equipe .cal-ligne li { min-width: 0; }
.cal-equipe .cal-ligne .cal-pastille { height: 100%; box-sizing: border-box; }
.cal-equipe .cal-ligne .cal-pastille { display: flex; flex-direction: column; min-height: 48px; padding: 6px 14px; border: 0;
                                         border-radius: 20px; color: #fff; text-decoration: none; justify-content: center; }
.cal-equipe .cal-ligne .cal-pastille:active { filter: brightness(.85); }
.cal-nom { font-weight: 800; font-size: 17px; overflow-wrap: break-word; }
.cal-qui { font-size: 13px; opacity: .95; overflow-wrap: break-word; }
.cal-equipe .cal-ligne .tech-alerte { border: 2px dashed #ffea00; }
.cal-equipe .cal-ligne li.fait .cal-pastille { opacity: .8; }
.cal-equipe .a-prendre { margin: 10px 0 0; }

/* Retours n°19 : même calendrier côté technicien ; la pastille est le titre d'un <details> (actions : reporter...). */
.cal-equipe .cal-ligne summary.cal-pastille { cursor: pointer; list-style: none; }
.cal-equipe .cal-ligne summary.cal-pastille::-webkit-details-marker { display: none; }
.cal-equipe .cal-ligne summary.cal-pastille:focus-visible { outline: 3px solid #ff6f00; outline-offset: 2px; }
.cal-equipe .cal-ligne li:has(> details[open]) { grid-column: 1 / -1; }
.cal-equipe .cal-plus .actions { margin-top: 6px; padding: 10px; background: #fff; border: 1px solid #d4d8d7; border-radius: 12px; }
.cal-equipe .lien-ajouter { display: inline-block; margin-top: 10px; }

/* Retours n°21 : un seul bouton vert après « Terminé » ; encart « Rouvrir (encore N min) » sur Ma tournée. */
.bloc-termine .fige { text-align: center; cursor: default; }
.bandeau-rouvrir { display: grid; gap: 8px; margin: 10px 0; }
.bandeau-rouvrir form[hidden] { display: none; }

/* Retours n°21 ter : « Rouvrir » dans la carte de la piscine, sous elle, sur toute la largeur. */
.ligne-tournee .rouvrir-ligne { grid-column: 1 / -1; margin-top: -2px; }
.ligne-tournee .rouvrir-ligne[hidden] { display: none; }
/* Collé sous la carte de la piscine terminée : le bouton fait corps avec elle (retours n°21 ter). */
.ligne-tournee.etat-fait .rouvrir-ligne { margin-top: -10px; padding-right: 72px; }
.ligne-tournee.etat-fait .rouvrir-ligne .bouton-rouvrir { border-color: #2e7d32; border-top-left-radius: 0; border-top-right-radius: 0; background: #f1f8f2; min-height: 54px; }
.ligne-tournee.etat-fait .rouvrir-ligne .bouton-rouvrir { font-size: 16px; padding: 6px 4px; }

.meteo-jour { display: inline-block; margin-left: 6px; font-size: 18px; font-weight: 600; white-space: nowrap; }
.meteo-moment small { font-size: 12px; font-weight: 400; color: #5a6b6a; }
.meteo-moment + .meteo-moment { margin-left: 8px; }
.meteo-icone { font-size: 18px; margin-left: 2px; } .meteo-icone small { font-size: 12px; font-weight: 400; color: #5a6b6a; }
.stock-contenants { font-weight: 600; color: #2e7d32; }

/* PoolPro 0.9 : pied de page discret (version, lien « À propos »). */
.pied { max-width: 640px; margin: 0 auto; padding: 8px 16px 24px; text-align: center; font-size: .85rem; }
.pied a { color: #555; }

/* =====================================================================================================================
   Design A « Atelier » (validé par Tommy le 06/11 ; maquettes : projets-code/poolpro-design/2026-11-06/a-atelier).
   Fond gris très clair, cartes blanches à fin liseré, barre du haut blanche avec le logo sur la couleur d'entreprise,
   police Inter (OFL, static/fonts, rien chargé d'internet), icônes Lucide au trait (poolpro2/icones.py), barre
   d'onglets en bas. La couleur d'entreprise ne colore que le logo, les gros boutons, l'onglet actif et les liens ;
   le texte posé dessus est blanc ou noir selon le contraste (--sur-principale, calculé par marque.py).
   ===================================================================================================================== */
@font-face { font-family: "Inter"; src: url("../fonts/Inter-latin.woff2") format("woff2"); font-weight: 100 900;
             font-style: normal; font-display: swap; }
:root { --fond: #f3f5f7; --carte: #ffffff; --bord: #d5dbe1; --bord-fort: #7b8794; --texte: #14212b; --texte2: #4a5866;
        --sep: #e3e8ed; --ok: #17663a; --ok-pale: #e5f3ea; --alerte: #8a4100; --alerte-pale: #fff1e0;
        --urgent: #a8201a; --urgent-pale: #fdecea; --rayon: 12px; --rayon-bouton: 10px;
        --ombre: 0 1px 2px rgba(16, 24, 40, .06); }
body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 17px; color: var(--texte);
       background: var(--fond); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
h1 { font-size: 28px; line-height: 1.15; font-weight: 750; letter-spacing: -.01em; margin: 2px 0 10px; }
h2 { font-size: 19px; font-weight: 700; }
.ic { display: inline-block; width: 22px; height: 22px; flex: none; vertical-align: -4px; }
.ic.mini { width: 17px; height: 17px; vertical-align: -3px; }
.ic.grande { width: 34px; height: 34px; }
h1 .ic, h2 .ic { color: var(--principale-texte); margin-right: 8px; }
h1 .ic { width: 26px; height: 26px; }
.surtitre { margin: 4px 0 0; font-size: 16px; font-weight: 600; color: var(--texte2); }

/* Cartes et listes : blanc, liseré fin, petite ombre (au lieu du cadre noir épais). */
.carte, .ligne-piscine, .entree > summary, .dose, .stock-ligne, .carte-depot, .case-role {
  border: 1px solid var(--bord); background: var(--carte); box-shadow: var(--ombre); }
.carte { border-radius: var(--rayon); }
.entree.etat-fait > summary, .etat-fait .ligne-piscine { background: var(--ok-pale); border-color: #9cc9ad; }
.etat-retard .ligne-piscine, .entree.etat-retard > summary, .entree.etat-manque > summary {
  background: var(--alerte-pale); border: 2px solid #d9822b; }
.actions { border: 1px solid var(--bord); border-top: 0; background: var(--carte); }
.carte-problemes { border: 2px solid var(--urgent); }
.passage, .test-eau, .bloc-planning, .jour-cal { border-top-width: 1px; border-top-color: var(--sep); }
/* « > » : sélecteurs distincts des règles complètes plus haut (tests/test_retours5 lit la DERNIÈRE règle de chacune). */
.piscines-tech > li, .piscines-carte > li > a, .problemes > li, .journal > li, .reglage, .remplacement { border-top-color: var(--sep); }
.liste-piscines li + li { margin-top: 8px; }
.nom-piscine { font-size: 18px; }
.petit, .aide { color: var(--texte2); }
.petit-aide { font-size: 16px; }

/* Boutons : coins de 10 px, la couleur d'entreprise pour l'action principale, le blanc à liseré pour le reste. */
.gros-bouton { min-height: 56px; border-radius: var(--rayon-bouton); font-size: 18px; display: flex; align-items: center;
               justify-content: center; gap: 10px; }
.gros-bouton .ic { width: 24px; height: 24px; }
.bouton-clair, .bouton-semaine, .bouton-extra, .periodes a, .bouton-jour, .bouton-saison, .bouton-ordre, .question-photo .non {
  background: var(--carte); color: var(--texte); border: 1px solid #9aa6b2; }
.bouton-clair:active, .bouton-semaine:active { background: var(--principale-pale); }
.bouton-saison.actuelle, .periodes a.actuelle { border-color: var(--principale); }
.retour { color: var(--principale-texte); font-size: 18px; min-height: 44px; }
.pile input[type=text], .pile input:not([type]), .pile input[type=password], .pile input[type=email], .pile textarea,
.recherche input, .champ-recherche, .gros-choix, .champ-autre, .champ-observation, .voir {
  border: 1px solid var(--bord-fort); border-radius: var(--rayon-bouton); }
.valeur { border: 2px solid #4a5866; border-radius: var(--rayon-bouton); white-space: nowrap; }
.flash { border: 1px solid var(--bord-fort); }

/* Barre du haut : blanche, logo carré sur la couleur d'entreprise, nom de l'appli et de l'entreprise, avatar. */
.barre { position: sticky; top: 0; z-index: 50; min-height: 64px; padding: 10px 16px;
         padding-top: max(10px, env(safe-area-inset-top)); background: var(--carte); color: var(--texte);
         border-bottom: 1px solid var(--bord); font-size: 17px; }
.bandeau-bascule ~ .barre { position: static; }
.barre a { color: inherit; }
.barre .logo { flex: 1 1 auto; min-width: 0; gap: 10px; }
.logo-carre { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px;
              background: var(--principale); color: var(--sur-principale); overflow: hidden; }
.logo-carre .ic { width: 24px; height: 24px; margin: 0; }
.logo-carre .logo-barre { width: 40px; height: 40px; }
.noms { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.nom-appli { font-weight: 700; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nom-entreprise { font-size: 14px; font-weight: 500; color: var(--texte2); overflow: hidden; text-overflow: ellipsis;
                  white-space: nowrap; }
.barre .qui.avatar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
                     background: var(--principale-pale); color: var(--principale-texte); font-size: 15px; font-weight: 700;
                     line-height: 1; text-decoration: none; }
.barre .qui.avatar.en-vue { border: 2px dashed #d4008c; }

/* Barre d'onglets en bas (Tournée · Piscines · Semaine · Compte ; Accueil · Calendrier · Piscines · Équipe pour le
   patron). Sur grand écran, les onglets restent sur la largeur de la page (640 px). */
.onglets { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid;
           grid-template-columns: repeat(var(--nb-onglets, 4), minmax(0, 1fr)); background: var(--carte);
           border-top: 1px solid var(--bord); padding: 6px max(6px, calc((100% - 640px) / 2));
           padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
.onglets.n3 { --nb-onglets: 3; }
.onglets.n2 { --nb-onglets: 2; }
.onglet { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px;
          font-size: 14px; font-weight: 600; color: var(--texte2); text-decoration: none; text-align: center; }
.onglet .ic { width: 24px; height: 24px; }
.onglet.actif { color: var(--principale-texte); font-weight: 800; box-shadow: inset 0 3px 0 var(--principale); }
.onglet:focus-visible { outline: 3px solid #ff6f00; outline-offset: -3px; }
body.avec-onglets { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

/* Gros chiffres de l'accueil patron. */
.chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
@media (min-width: 900px) { .chiffres { grid-template-columns: repeat(4, 1fr); } }
.chiffre-carte { display: flex; flex-direction: column; min-height: 96px; padding: 14px; border-radius: var(--rayon);
                 background: var(--carte); border: 1px solid var(--bord); box-shadow: var(--ombre); color: var(--texte);
                 text-decoration: none; }
.chiffre-carte .n { font-size: 32px; font-weight: 780; line-height: 1.05; }
.chiffre-carte .n small { font-size: 18px; font-weight: 600; color: var(--texte2); }
.chiffre-carte .l { margin-top: 4px; font-size: 16px; font-weight: 600; color: var(--texte2); }
.chiffre-carte.urgent .n { color: var(--urgent); }
.chiffre-carte.alerte .n { color: var(--alerte); }
.puces-entete { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.puces-entete .saison-pastille, .puces-entete .meteo-jour { display: inline-flex; align-items: center; gap: 6px; margin: 0;
  padding: 5px 12px; border: 0; border-radius: 999px; background: #e9edf1; color: #2b3a47; font-size: 16px; font-weight: 600; }

/* Page d'intervention : boutons photo au style A (photo de la piscine = case « ajouter » en pointillés ; bandelette =
   fond pâle et cadre plein de la couleur d'entreprise : impossibles à confondre). */
.bouton-photo { border-radius: var(--rayon); letter-spacing: 0; }
.bouton-photo .icone .ic { width: 52px; height: 52px; }
.bouton-photo .mot { font-size: 22px; font-weight: 800; letter-spacing: .02em; }
.bouton-photo .sous-mot { font-size: 16px; font-weight: 500; }
.bouton-piscine { background: var(--carte); color: var(--principale-texte); border: 2px dashed #9aa6b2; }
.bouton-piscine:active { background: var(--principale-pale); }
.bouton-bandelette { background: var(--principale-pale); color: var(--principale-texte); border: 2px solid var(--principale);
                     outline: 0; }
.bouton-bandelette:active { background: var(--principale-clair); }
.bouton-termine { background: var(--ok); color: #fff; min-height: 64px; font-size: 20px; }
.bouton-termine.fait { background: #1b5e20; }
.titre-widget .ic, .section-repliee > summary > h2 .ic { color: var(--principale-texte); }
.lien-galerie { color: var(--principale-texte); }

/* Repli : flèche au trait, plus discrète que ▸ / ▾. */
.section-repliee > summary::before { color: var(--texte2); }
.pied a { color: var(--texte2); }
.titre-logo { display: flex; align-items: center; justify-content: center; gap: 12px; }
.titre-logo .logo-carre { width: 52px; height: 52px; border-radius: 14px; }
.titre-logo .logo-carre .ic { width: 32px; height: 32px; }
/* Jauge d'avancement de « Ma tournée » (la CSP interdit style="width:…" : une classe par pas de 5 %). */
.jauge { height: 10px; margin: 6px 0 12px; border-radius: 6px; background: var(--sep); overflow: hidden; }
.jauge > span { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--principale); }
/* .jauge .jauge-N (2 classes) l'emporte sur « .jauge > span » (classe + balise). */
.jauge .jauge-5 { width: 5%; } .jauge .jauge-10 { width: 10%; } .jauge .jauge-15 { width: 15%; } .jauge .jauge-20 { width: 20%; } .jauge .jauge-25 { width: 25%; } .jauge .jauge-30 { width: 30%; } .jauge .jauge-35 { width: 35%; } .jauge .jauge-40 { width: 40%; } .jauge .jauge-45 { width: 45%; } .jauge .jauge-50 { width: 50%; } .jauge .jauge-55 { width: 55%; } .jauge .jauge-60 { width: 60%; } .jauge .jauge-65 { width: 65%; } .jauge .jauge-70 { width: 70%; } .jauge .jauge-75 { width: 75%; } .jauge .jauge-80 { width: 80%; } .jauge .jauge-85 { width: 85%; } .jauge .jauge-90 { width: 90%; } .jauge .jauge-95 { width: 95%; } .jauge .jauge-100 { width: 100%; }
.avancement { font-size: 17px; color: var(--texte2); } .avancement strong { color: var(--texte); }
.fleche .ic { width: 22px; height: 22px; color: var(--texte2); } .fait-ok { color: var(--ok); }
/* Accueil patron : les raccourcis (Techniciens, Piscines, Produits) en boutons secondaires compacts, 2 par ligne
   (lot 2 de l'ergonomie : ils passeront dans la barre d'onglets). */
.boutons-patron { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 4px; }
.boutons-patron .gros-bouton { margin-top: 0; min-height: 52px; font-size: 17px; }
.boutons-patron .ic { color: var(--principale-texte); }
/* Page d'intervention : en-tête au style A (fiche en une ligne grise, puces technicien / dernier passage). */
.titre-piscine { margin-bottom: 4px; }
.resume-fiche { margin: 0; font-weight: 500; color: var(--texte2); }
.resume-fiche a, .lien-historique { color: var(--principale-texte); font-weight: 700; }
.puce-info { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 36px; padding: 4px 12px;
             border-radius: 999px; background: #e9edf1; color: #2b3a47; font-size: 16px; font-weight: 600; }
.puce-info .ic { color: var(--texte2); }
.bandeau-fiche { border: 1px dashed var(--principale); color: var(--principale-texte); }
.logo-carre .ic, h1 .logo-carre .ic { color: var(--sur-principale); margin: 0; }

/* =====================================================================================================================
   Ergonomie, lot 1 (validé par Tommy le 06/11 ; maquettes : projets-code/poolpro-ux/2026-11-06). Règle : ce qu'on
   fait à chaque passage en haut ou sous le pouce ; ce qu'on règle une fois par an replié en bas.
   ===================================================================================================================== */
/* 1. Page d'intervention : barre fixe en bas « Photo · Signaler · Terminé » (boutons de 56 px au moins). */
.barre-action { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid;
                grid-template-columns: 1fr 1fr 1.6fr; gap: 8px; padding: 8px max(10px, calc((100% - 640px) / 2));
                padding-bottom: calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97);
                border-top: 1px solid var(--bord); box-shadow: 0 -2px 8px rgba(16, 24, 40, .08); }
.bouton-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
                 min-height: 56px; padding: 4px 6px; border: 1px solid #9aa6b2; border-radius: var(--rayon-bouton);
                 background: var(--carte); color: var(--texte); font: inherit; font-size: 16px; font-weight: 700;
                 text-decoration: none; text-align: center; cursor: pointer; }
.bouton-action .ic { width: 24px; height: 24px; }
.bouton-action.terminer { flex-direction: row; gap: 8px; border: 0; background: var(--ok); color: #fff; font-size: 18px; }
.bouton-action.terminer.fait { background: #1b5e20; }
.bouton-action:focus-visible { outline: 3px solid #ff6f00; outline-offset: 2px; }
.espace-barre-action { height: 96px; }
/* 6. Photo de la piscine et photo de la bandelette côte à côte : 2 cases de 120 px. Les blocs « photo_piscine » et
   « test_eau » restent deux widgets : leurs boîtes s'effacent (display: contents) pour partager la même grille. */
.duo-photos { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; align-items: start; }
.duo-photos > #widget-photo_piscine { grid-column: 1; grid-row: 1; min-width: 0; }
.duo-photos > #widget-test_eau, .duo-photos .test-eau { display: contents; }
.duo-photos .test-eau > * { grid-column: 1 / -1; min-width: 0; }
.duo-photos .test-eau > form.envoi-photo:first-of-type { grid-column: 2; grid-row: 1; margin-top: 16px; }
.duo-photos .test-eau > .titre-widget { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sep); }
.duo-photos .bouton-photo { min-height: 120px; height: 120px; padding: 6px; font-size: 17px; gap: 2px; }
.duo-photos .bouton-photo .icone .ic { width: 36px; height: 36px; }
.duo-photos .bouton-photo .mot { font-size: 17px; letter-spacing: 0; text-align: center; }
.duo-photos .bouton-photo .sous-mot { display: none; }
.duo-photos .lien-galerie { min-height: 44px; margin-top: 4px; font-size: 16px; }
/* 7. Constat à découvert : 4 boutons sur une ligne. */
.boutons-etat { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bouton-etat { min-height: 56px; padding: 6px 2px; font-size: 16px; line-height: 1.15; border-width: 2px; border-radius: var(--rayon-bouton); }
.bouton-etat span { font-size: 22px; }
.bouton-etat.etat-urgence { border-width: 3px; }
/* 2. Accueil patron : une carte par problème, 2 boutons de 56 px côte à côte. */
.actions-probleme { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.actions-probleme form { margin: 0; display: flex; }
.actions-probleme .gros-bouton { margin-top: 0; min-height: 56px; font-size: 17px; }
.actions-probleme .bouton-vu { width: 100%; padding: 8px; color: var(--ok); border-color: var(--ok); }
.carte-problemes-anciens h2 .ic { color: var(--texte2); }
/* 5. Ma tournée : ▲ ▼ cachés derrière « ⇅ Changer l'ordre » (avec JavaScript seulement). */
.bouton-changer-ordre { min-height: 48px; margin: 10px 0 0; font-size: 17px; }
.js .zone-tournee:not(.ordre-visible) .ordre { display: none; }
.js .zone-tournee:not(.ordre-visible) .ligne-tournee { grid-template-columns: 1fr; }
.js .zone-tournee:not(.ordre-visible) .rouvrir-ligne { padding-right: 0; }
.js .zone-tournee:not(.ordre-visible) .aide-ordre { display: none; }
.zone-tournee.ordre-visible .bouton-changer-ordre { background: var(--principale-pale); border-color: var(--principale); }
/* 9. « pas de suppléant » : badge gris neutre (situation normale, pas une alerte). */
.badge-neutre { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; font-size: 15px;
                font-weight: 700; white-space: nowrap; background: #fff; color: #111; border: 2px solid #4b5563; }
/* Liens texte trop petits pour le doigt (mesurés à 24-26 px) : 44 px de haut. */
.lien-historique, .resume-fiche a, .problemes li > a, .periode a, .lien-reglage, .lien-ajouter {
  min-height: 44px; display: inline-flex; align-items: center; }
.actions-probleme .gros-bouton { padding: 8px; }
.js .zone-tournee:not(.ordre-visible) .ligne-tournee .ligne-piscine { min-height: 88px; }
/* « Photo » et « Signaler » (ancres) : le bloc visé n'arrive pas sous la barre du haut collante. */
.widget, .historique { scroll-margin-top: 80px; }

/* Tests de Tommy n°6 (06/11) : « ⚙️ Choisir ce qui apparaît ici » aux couleurs du design Atelier (plus le lien violet
   souligné du navigateur). */
.lien-reglage { color: var(--principale-texte); font-weight: 700; text-decoration: none; gap: 6px; }
.lien-reglage:hover, .lien-reglage:focus-visible { text-decoration: underline; }

/* N13 (06/11) : saison dans ⚙️ Paramètres (maquette designer du 06/11). */
.saison-en-cours { margin: 4px 0 12px; }
.saison-grande { margin: 0; font-size: 26px; font-weight: 800; }
.date-annuelle { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.date-annuelle input, .date-annuelle select { min-height: 48px; font: inherit; font-size: 20px; font-weight: 800;
  border: 3px solid #000; border-radius: 12px; background: #fff; }
.pile .date-annuelle input[type=number] { width: 80px; text-align: center; }

/* N9 (06/11) : trousse de l'équipe dans ⚙️ Paramètres (sous-texte des cases, cases du test repliées). */
.case small { display: block; font-size: 16px; font-weight: 500; color: var(--texte2); }
.cases-trousse { margin-top: 10px; }
.cases-trousse summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; }

/* Contrôle designer du 06/11 (C1-C4) : Paramètres repliés par thème, résumé d'une ligne, bouton collant. */
.titre-repli { display: flex; flex-direction: column; min-width: 0; }
.resume-groupe { margin: 2px 0 0; color: var(--texte2); font-size: 16px; font-weight: 500; }
.carte-reglages details[open] > summary .resume-groupe { display: none; }
.carte-reglages .section-repliee > summary { min-height: 56px; }
.carte-seuils .carte-reglages { margin: 10px 0 0; box-shadow: none; }
.barre-enregistrer { position: sticky; bottom: calc(72px + env(safe-area-inset-bottom)); padding: 8px 0;
                     background: var(--fond); z-index: 5; }
.carte-reglages .choix-reglage .case, .pile .carte-reglages label.case { margin-top: 0; min-height: 48px; }
.choix-reglage.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.paliers-galet .ligne-palier { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.pile .paliers-galet input.champ-palier, .paliers-galet input.champ-palier { width: 72px; min-height: 48px;
  font: inherit; font-size: 20px; font-weight: 800; text-align: center; border: 3px solid #000; border-radius: 12px; }

/* Contrôle designer du 06/11 : C7 flèche des replis du dosage, C9 mêmes hauteurs par rangée du calendrier, C10
   bouton-lien sans fond, C11 date du prochain galet. */
.marche-eau-verte summary, .securite-dosage summary { list-style: none; }
.marche-eau-verte summary::-webkit-details-marker, .securite-dosage summary::-webkit-details-marker { display: none; }
.marche-eau-verte summary::before, .securite-dosage summary::before { content: "▸"; font-size: 20px; margin-right: 8px; }
.marche-eau-verte[open] summary::before, .securite-dosage[open] summary::before { content: "▾"; }
.cal-equipe .cal-ligne li { display: flex; }
.cal-equipe .cal-ligne li > * { flex: 1; }
button.lien-galerie { background: none; border: 0; width: 100%; font: inherit; font-size: 18px; color: var(--principale-texte); }
.prochain-galet { margin: 6px 0; padding: 8px 12px; border-radius: 10px; background: var(--fond); font-weight: 700; }
.prochain-galet small { font-weight: 500; color: var(--texte2); font-size: 16px; }
.dose-attente { color: var(--texte2); }

/* Designer D2 / D3 (07/11) : paliers du galet sur 2 lignes ; dates jamais coupées. */
.paliers-galet .palier-jours { flex-basis: 100%; display: flex; align-items: center; gap: 6px; padding-left: 16px; }
.paliers-galet .ligne-palier + .ligne-palier { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--bord, #e3e6ea); }
.sans-coupure { white-space: nowrap; }

/* Stock du dépôt, contrôle designer du 07/11 : vrais boutons en haut (56 px) et sur chaque produit (48 px), stock à 0
   atténué sans opacity (--texte2 sur --fond : 6,67:1). Ne touche pas .stock-ajouter / .stock-corriger (page piscine). */
.boutons-depot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 12px; }
.boutons-depot .gros-bouton { margin-top: 0; min-height: 56px; font-size: 17px; padding: 8px; text-align: center; }
.boutons-depot .bouton-clair .ic { color: var(--principale-texte); }
.stock-ligne .boutons-depot { margin: 10px 0 0; }
.stock-ligne .boutons-depot .gros-bouton { min-height: 48px; }
.stock-ligne.stock-vide { background: var(--fond); box-shadow: none; }
.stock-vide .stock-reste { color: var(--texte2); }

/* Stock du dépôt, étape 2 (07/11) : sous le seuil = rouge (--urgent, comme les problèmes), sur la page Dépôt et sur
   l'accueil du patron ; 3 boutons par produit (Livraison, Corriger, Seuil) ; prises avec « ↩ Annuler ». */
.alerte-depot { border: 2px solid var(--urgent); background: var(--urgent-pale); }
.alerte-depot h2, .alerte-depot h2 .ic { color: var(--urgent); }
a.alerte-depot { display: block; padding: 12px 14px; margin: 0 0 14px; border-radius: var(--rayon); color: var(--texte);
                 text-decoration: none; }
a.alerte-depot strong.titre { display: block; color: var(--urgent); font-size: 18px; }
.stock-ligne.stock-sous-seuil { border: 2px solid var(--urgent); background: var(--urgent-pale); }
.stock-sous-seuil .stock-reste strong { color: var(--urgent); }
.badge-seuil { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--urgent); color: #fff;
               font-size: 14px; font-weight: 700; }
.stock-ligne .boutons-depot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stock-ligne .boutons-depot .gros-bouton { font-size: 16px; padding: 6px 4px; gap: 6px; }
@media (max-width: 430px) { .stock-ligne .boutons-depot .gros-bouton .ic { display: none; } }
.prises-du-jour li, .journal li.ligne-prise { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex-wrap: wrap; }
.prises-du-jour form, .journal li.ligne-prise form { margin: 0; }
.prises-du-jour .gros-bouton, .journal li.ligne-prise .gros-bouton { margin: 0; min-height: 48px; width: auto; padding: 8px 14px; }
/* Contrôle designer de l'étape 2 (07/11) : cases d'une ligne au lieu de la liste déroulante, prises annulées en gris,
   « Voir le dépôt › », encart « Sous le seuil » sans cadres (liens vers la ligne du produit). */
.choix-produits { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.choix-produits legend { font-weight: 700; margin-bottom: 6px; }
.choix-produit { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px;
                 border: 1px solid var(--bord-fort); border-radius: var(--rayon-bouton); background: var(--carte); }
.choix-produit input { width: 24px; height: 24px; flex: none; accent-color: var(--principale); }
.choix-produit:has(input:checked) { border: 2px solid var(--principale); background: var(--fond); }
.prises-du-jour li { border: 1px solid var(--bord); }
.prise-annulee { background: var(--fond); color: var(--texte2); }
a.alerte-depot .voir-plus { display: block; margin-top: 4px; color: var(--urgent); font-weight: 700; text-decoration: underline; }
.liste-seuil { list-style: none; padding: 0; margin: 0; }
.liste-seuil li { padding: 10px 0; border-top: 1px solid #f3c4c0; }
.liste-seuil a { color: var(--texte); font-weight: 700; }
/* 0.9.4 (07/11) : dans la Semaine du technicien, la pastille est un lien vers la fiche ; « ⋯ Reporter » est un petit
   repli SOUS la pastille. Le <li> est une colonne : la pastille garde sa hauteur, le repli s'ajoute en dessous
   (plus de chevauchement avec « Produits à prendre »). */
.cal-equipe .cal-ligne li:has(> .cal-plus) { display: flex; flex-direction: column; }
.cal-equipe .cal-ligne li:has(> .cal-plus) > .cal-pastille { height: auto; flex: 1 1 auto; }
.cal-equipe .cal-ligne a.cal-pastille:focus-visible { outline: 3px solid #ff6f00; outline-offset: 2px; }
.cal-equipe .cal-plus > summary { cursor: pointer; list-style: none; align-self: flex-start; display: inline-block;
                                  margin-top: 2px; padding: 4px 10px; font-size: 13px; color: #4b5563; }
.cal-equipe .cal-plus > summary::-webkit-details-marker { display: none; }
.cal-equipe .cal-plus[open] > summary { color: var(--principale-fonce); font-weight: 700; }
.cal-equipe .cal-ligne li:has(> details[open]) > .cal-pastille { flex: 0 0 auto; }