/* ============================================================
   FPRO - back-office. Interface de travail, pas de vitrine.
   Dense, lisible, sans dependance.
   ============================================================ */

:root{
  --bo-fond:#f4f5f3; --bo-surface:#fff; --bo-encre:#1b211c; --bo-encre2:#5c655d;
  --bo-trait:#dfe3dd; --bo-trait2:#c6ccc4; --bo-accent:#3d5c47; --bo-accent2:#2c4534;
  --bo-clair:#e9efe9; --bo-rouge:#8c3030; --bo-rouge-f:#fbeded;
  --bo-orange:#8a5a1f; --bo-orange-f:#fdf3e4; --bo-vert:#2c6b45; --bo-vert-f:#e9f4ed;
  --bo-r:8px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bo-fond);color:var(--bo-encre);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--bo-accent2)}
h1{font-size:24px;letter-spacing:-.02em;margin:0}
h2{font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--bo-encre2);margin:0 0 14px}
code{background:var(--bo-clair);padding:1px 5px;border-radius:4px;font-size:13px}
:focus-visible{outline:3px solid var(--bo-accent);outline-offset:2px}

/* en-tete */
.bo-entete{background:var(--bo-surface);border-bottom:1px solid var(--bo-trait);position:sticky;top:0;z-index:20}
.bo-in{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:14px;min-height:56px}
.bo-marque{font-weight:700;text-decoration:none;color:var(--bo-encre);letter-spacing:-.02em}
.bo-marque span{font-weight:400;color:var(--bo-encre2);font-size:13px}
.bo-fil{font-size:13px;color:var(--bo-encre2);background:var(--bo-clair);padding:4px 10px;border-radius:99px}
.bo-nav{margin-left:auto;display:flex;gap:14px;font-size:14px}
.bo-nav a{color:var(--bo-encre2);text-decoration:none}
.bo-nav a:hover{color:var(--bo-accent2)}

.bo-main{max-width:1180px;margin:0 auto;padding:26px 20px 80px}

/* blocs */
.bo-carte{background:var(--bo-surface);border:1px solid var(--bo-trait);border-radius:12px;padding:24px;margin-bottom:20px}
.bo-carte--etroite{max-width:430px;margin:40px auto}
.bo-groupe{background:var(--bo-surface);border:1px solid var(--bo-trait);border-radius:12px;padding:22px 24px 26px;margin-bottom:18px}
.bo-tete{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.bo-barre-actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bo-barre-basse{position:sticky;bottom:0;background:color-mix(in srgb,var(--bo-fond) 92%,transparent);
  backdrop-filter:blur(6px);padding:12px 0;display:flex;gap:8px;justify-content:flex-end;
  border-top:1px solid var(--bo-trait)}

/* boutons */
.bo-bouton{display:inline-flex;align-items:center;gap:7px;background:var(--bo-accent);color:#fff;border:1px solid var(--bo-accent);
  border-radius:var(--bo-r);padding:10px 16px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none}
.bo-bouton:hover{background:var(--bo-accent2);color:#fff}
.bo-bouton--fantome{background:transparent;color:var(--bo-encre);border-color:var(--bo-trait2)}
.bo-bouton--fantome:hover{background:var(--bo-clair);color:var(--bo-accent2);border-color:var(--bo-accent)}
.bo-lien{background:none;border:0;color:var(--bo-accent2);font:inherit;font-size:13px;cursor:pointer;
  text-decoration:underline;padding:2px 4px}

/* formulaire */
.bo-grille{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.bo-champ{display:flex;flex-direction:column;gap:5px;min-width:0}
.bo-champ--large{grid-column:1/-1}
.bo-champ>label span,.bo-champ>span{font-size:13px;font-weight:600;color:var(--bo-encre2)}
.bo-champ input[type=text],.bo-champ input[type=tel],.bo-champ input[type=email],
.bo-champ input[type=url],.bo-champ input[type=number],.bo-champ input[type=password],
.bo-champ select,.bo-champ textarea{
  font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--bo-trait2);border-radius:var(--bo-r);
  background:var(--bo-surface);color:var(--bo-encre);width:100%}
.bo-champ textarea{resize:vertical;line-height:1.55}
.bo-champ input:focus,.bo-champ select:focus,.bo-champ textarea:focus{border-color:var(--bo-accent)}
.bo-aide{font-size:12.5px;color:var(--bo-encre2);margin:2px 0 0;line-height:1.45}
.bo-aide--large{background:var(--bo-surface);border:1px solid var(--bo-trait);border-radius:10px;padding:12px 16px;margin-bottom:16px}
.bo-compte{font-size:12px;margin:2px 0 0;color:var(--bo-rouge)}
.bo-compte[data-etat=ok]{color:var(--bo-vert)}
.bo-suffixe{display:flex;align-items:center;gap:6px}
.bo-suffixe em{font-style:normal;color:var(--bo-encre2);font-size:13px}
.bo-bascule{display:flex;align-items:center;gap:8px;font-size:14px}
.bo-bascule input{width:18px;height:18px;accent-color:var(--bo-accent)}
.bo-cases{display:grid;gap:7px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));font-size:14px}
.bo-cases label{display:flex;gap:8px;align-items:flex-start}
.bo-cases input{margin-top:3px;accent-color:var(--bo-accent)}
.bo-repet{display:grid;gap:8px}
.bo-repet__ligne{display:flex;gap:8px;align-items:center}
.bo-repet__ligne input{flex:1}
.bo-repet__ligne input[type=number]{max-width:110px}
.bo-image{display:grid;gap:8px}
.bo-horaires{width:100%;border-collapse:collapse;font-size:13px}
.bo-horaires th{text-align:left;font-weight:600;color:var(--bo-encre2);padding:4px 8px 4px 0;font-size:12px}
.bo-horaires td{padding:3px 4px 3px 0}
.bo-horaires input{font:inherit;font-size:13px;padding:5px 6px;border:1px solid var(--bo-trait2);
  border-radius:6px;width:100%;background:var(--bo-surface);color:var(--bo-encre)}

/* messages */
.bo-flash{border-radius:var(--bo-r);padding:11px 14px;font-size:14px;margin:0 0 14px}
.bo-flash--ok{background:var(--bo-vert-f);color:var(--bo-vert)}
.bo-flash--erreur{background:var(--bo-rouge-f);color:var(--bo-rouge)}
.bo-flash--attention{background:var(--bo-orange-f);color:var(--bo-orange)}
.bo-controle{margin:0 0 16px;padding-left:18px;font-size:14px}
.bo-controle li{margin-bottom:6px}
.bo-ecartees{margin:0;padding-left:18px;font-size:13.5px;color:var(--bo-encre2)}

/* liste des clients */
.bo-table{width:100%;border-collapse:collapse;background:var(--bo-surface);
  border:1px solid var(--bo-trait);border-radius:12px;overflow:hidden;font-size:14px}
.bo-table th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--bo-encre2);padding:11px 14px;border-bottom:1px solid var(--bo-trait);background:#fafbfa}
.bo-table td{padding:12px 14px;border-bottom:1px solid var(--bo-trait);vertical-align:middle}
.bo-table tr:last-child td{border-bottom:0}
.bo-table a{text-decoration:none}
.bo-table a:hover{text-decoration:underline}
.bo-actions{white-space:nowrap;display:flex;gap:10px;font-size:13px}
.bo-gris{color:var(--bo-encre2)}
.bo-compteur{font-size:14px;font-weight:600;color:var(--bo-encre2);background:var(--bo-clair);
  padding:3px 9px;border-radius:99px;vertical-align:middle}
.bo-etat{font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px}
.bo-etat--en_ligne{background:var(--bo-vert-f);color:var(--bo-vert)}
.bo-etat--brouillon{background:var(--bo-clair);color:var(--bo-encre2)}
.bo-pastille{display:inline-block;font-size:12px;font-weight:600;background:var(--bo-clair);
  color:var(--bo-accent2);padding:2px 9px;border-radius:99px;margin-right:4px}
.bo-pastille--off{background:#eee;color:#9aa19b;text-decoration:line-through}
.bo-vide{color:var(--bo-encre2);background:var(--bo-surface);border:1px dashed var(--bo-trait2);
  border-radius:12px;padding:36px;text-align:center}
.bo-nouveau summary{list-style:none;display:inline-flex}
.bo-nouveau summary::-webkit-details-marker{display:none}
.bo-nouveau[open] summary{background:var(--bo-accent2)}
.bo-nouveau .bo-carte{position:absolute;z-index:10;margin-top:8px;width:340px;box-shadow:0 12px 40px rgba(0,0,0,.14)}

@media (max-width:700px){
  .bo-main{padding:18px 14px 70px}
  .bo-table,.bo-table thead,.bo-table tbody,.bo-table tr,.bo-table td{display:block;width:100%}
  .bo-table thead{display:none}
  .bo-table tr{border-bottom:1px solid var(--bo-trait);padding:6px 0}
  .bo-table td{border:0;padding:4px 14px}
  .bo-barre-actions{margin-left:0;width:100%}
}

/* ------------------------------------------------ photos et fermetures */

.bo-photo {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: .8rem;
  align-items: start;
  width: 100%;
}
.bo-photo__vue {
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--bo-bord, #cfd3d8);
  border-radius: .4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fafbfc;
}
.bo-photo__vue img { width: 100%; height: 100%; object-fit: cover; }
.bo-photo__vue span { font-size: .72rem; color: #8a9099; text-align: center; padding: .4rem; }
.bo-photo__champs { display: grid; gap: .4rem; }
.bo-photo__etat { font-size: .78rem; color: #5c6570; margin: 0; min-height: 1.1em; }
.bo-photo__etat[data-erreur] { color: #a3311f; }

.bo-fichier { position: relative; overflow: hidden; display: inline-block; }
.bo-fichier input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.bo-fichier span {
  display: inline-block;
  padding: .38rem .8rem;
  border: 1px solid var(--bo-bord, #cfd3d8);
  border-radius: .35rem;
  background: #fff;
  font-size: .82rem;
  cursor: pointer;
}
.bo-fichier:hover span { border-color: #9aa2ab; }

.bo-repet__ligne--photo { align-items: start; }
.bo-repet__ligne--3 { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.bo-mini { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: #5c6570; }
.bo-mini input { width: auto; }

/* ------------------------------------------------------- statistiques */

.bo-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .8rem;
}
.bo-chiffre {
  border: 1px solid var(--bo-bord, #cfd3d8);
  border-radius: .45rem;
  padding: .7rem .8rem;
  background: #fff;
}
.bo-chiffre__val { display: block; font-size: 1.65rem; line-height: 1.1; font-weight: 600; }
.bo-chiffre__cle { display: block; font-size: .78rem; color: #5c6570; margin-top: .2rem; }

.bo-barres {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 140px;
  padding-bottom: 1.1rem;
  position: relative;
}
.bo-barre {
  flex: 1 1 0;
  height: 100%;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.bo-barre__pleine {
  width: 100%;
  background: #46664f;
  border-radius: 2px 2px 0 0;
  min-height: 0;
}
.bo-barre:hover .bo-barre__pleine { background: #2f4a37; }
.bo-barre__point {
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #96543a;
}
.bo-barre__jour {
  position: absolute;
  bottom: -1.05rem;
  font-size: .68rem;
  color: #8a9099;
}

.bo-brut {
  background: #f4f6f7;
  border: 1px solid var(--bo-bord, #cfd3d8);
  border-radius: .35rem;
  padding: .6rem .7rem;
  font-size: .74rem;
  line-height: 1.45;
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* --- ecran Ajuster ------------------------------------------------------- */
.bo-ajuster__in{display:grid;gap:20px;align-items:start}
@media(min-width:1100px){.bo-ajuster__in{grid-template-columns:minmax(380px,520px) 1fr}.bo-ajuster__apercu{position:sticky;top:16px}}
.bo-ajuster__cadre{background:#fff;border:1px solid var(--bo-trait);border-radius:12px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.06)}
.bo-ajuster__cadre iframe{display:block;width:100%;height:calc(100vh - 120px);min-height:640px;border:0}
.bo-directions{display:grid;gap:10px}
.bo-direction{display:grid;grid-template-columns:36px 1fr;gap:4px 12px;align-items:center;text-align:left;background:#fff;border:1px solid var(--bo-trait2);border-radius:10px;padding:12px 14px;font:inherit;cursor:pointer;color:var(--bo-encre)}
.bo-direction:hover{border-color:var(--bo-accent)}
.bo-direction--active{border-color:var(--bo-accent);box-shadow:0 0 0 2px var(--bo-accent);background:var(--bo-clair)}
.bo-direction[disabled]{opacity:.55;cursor:not-allowed}
.bo-direction__num{grid-row:1/span 3;width:36px;height:36px;border-radius:50%;background:var(--bo-accent);color:#fff;display:grid;place-items:center;font-weight:700}
.bo-direction strong{font-size:15px}
.bo-direction small{color:var(--bo-encre2);font-size:13px}
.bo-direction em{font-size:12px;color:var(--bo-orange);font-style:normal}
.bo-palettes{display:flex;flex-wrap:wrap;gap:10px}
.bo-palette{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:1px solid transparent;border-radius:10px;padding:8px;font:inherit;font-size:12px;color:var(--bo-encre2);cursor:pointer;text-transform:capitalize}
.bo-palette i{display:block;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 3px #fff,0 0 0 1px var(--bo-trait2)}
.bo-palette:hover{border-color:var(--bo-trait2)}
.bo-palette--active{border-color:var(--bo-accent);background:var(--bo-clair);color:var(--bo-encre)}
.bo-palette--active i{box-shadow:inset 0 0 0 3px #fff,0 0 0 2px var(--bo-accent)}
.bo-bloc{border-top:1px solid var(--bo-trait);padding:16px 0}
.bo-bloc__tete{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.bo-bloc__apercu b{display:block;margin-bottom:4px}
.bo-bloc__apercu p{margin:0 0 10px;color:var(--bo-encre2);font-size:14px}
.bo-bloc__editeur .bo-champ{margin-bottom:10px}
.bo-bloc__editeur textarea{width:100%;font:inherit;padding:10px;border:1px solid var(--bo-trait2);border-radius:var(--bo-r);resize:vertical}
.bo-bloc__editeur input[type=text]{width:100%;font:inherit;padding:8px 10px;border:1px solid var(--bo-trait2);border-radius:var(--bo-r)}
.bo-bloc .bo-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---- domaine propre (formule Pro) */
.bo-domaine{margin-top:16px;padding:16px 18px;background:var(--bo-fond);border:1px solid var(--bo-trait);border-radius:12px}
.bo-domaine .bo-bloc__tete{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.bo-table--serree{margin:8px 0 10px}
.bo-table--serree td,.bo-table--serree th{padding:7px 10px;font-size:13px}
.bo-ok{color:var(--bo-vert);font-weight:600}
.bo-aide--alerte{color:var(--bo-orange);background:var(--bo-orange-f);padding:8px 12px;border-radius:8px}
.bo-pastille--actif{background:var(--bo-vert-f);color:var(--bo-vert)}
.bo-pastille--parque{background:var(--bo-orange-f);color:var(--bo-orange)}
.bo-pastille--erreur,.bo-pastille--manuel{background:var(--bo-rouge-f);color:var(--bo-rouge)}
.bo-valeur{margin:0;padding:10px 12px;background:var(--bo-clair);border-radius:var(--bo-r);font-weight:600}
