/* Fiches Google — Agro Service 2000. Charte groupe 2025 (Realist / Basic Sans → Oswald / Source Sans 3 en web). */
:root {
  --rouge: #F23E4D; --rouge-fonce: #c2303c;
  --fond: #F9F9F9; --encre: #01140E; --encre-2: #3d4c47; --encre-3: #6b7a75;
  --vert-clair: #DFF4F0; --menthe: #90E0D1; --teal: #45A393; --vert: #154C41;
  --blanc: #fff; --bord: #e3ebe8; --hausse: #1f7a5c; --baisse: #c2303c; --alerte: #b7791f;
  --rayon: 10px; --ombre: 0 1px 2px rgba(1,20,14,.06), 0 4px 14px rgba(1,20,14,.05);
  --titre: 'Oswald', 'Arial Narrow', Arial, sans-serif; --texte: 'Source Sans 3', Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fond); color: var(--encre); font: 15px/1.5 var(--texte); }
a { color: var(--vert); }
h1, h2, h3 { font-family: var(--titre); font-weight: 600; letter-spacing: .2px; margin: 0 0 .5em; line-height: 1.2; }
h1 { font-size: 28px; } h2 { font-size: 20px; } h3 { font-size: 16px; }
.muet { color: var(--encre-3); } .petit { font-size: 13px; }

/* Structure */
.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.barre { background: var(--blanc); border-right: 1px solid var(--bord); padding: 20px 14px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.logo { display: block; text-decoration: none; padding: 4px 8px 18px; border-bottom: 3px solid var(--rouge); margin-bottom: 14px; }
.logo b { font-family: var(--titre); font-weight: 700; font-size: 19px; white-space: nowrap; color: var(--rouge); letter-spacing: .5px; }
.logo b span { color: var(--vert); }
.logo small { display: block; color: var(--teal); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--encre-2); text-decoration: none; font-weight: 600; margin-bottom: 2px; }
.nav a:hover { background: var(--fond); }
.nav a.actif { background: var(--vert-clair); color: var(--vert); }
.nav .badge { margin-left: auto; }
.nav svg { width: 18px; height: 18px; flex: none; }
.barre .bas { margin-top: auto; font-size: 13px; color: var(--encre-3); padding: 10px; border-top: 1px solid var(--bord); }
.barre .bas button { background: none; border: 0; padding: 0; color: var(--vert); cursor: pointer; font: inherit; text-decoration: underline; }
main { padding: 28px 32px 60px; max-width: 1280px; width: 100%; }
.entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.entete h1 { margin: 0; }
.entete .sous { color: var(--encre-3); margin-top: 4px; }
.bandeau-demo { background: #fff4d6; border: 1px solid #f0d58a; color: #6b4e00; border-radius: var(--rayon); padding: 10px 14px; margin-bottom: 18px; font-size: 14px; }

/* Cartes */
.carte { background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 20px; margin-bottom: 20px; }
.carte > h2:first-child, .carte > h3:first-child { margin-top: 0; }
.grille { display: grid; gap: 20px; }
.g2 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: repeat(3, 1fr); } .g-21 { grid-template-columns: 2fr 1fr; }

/* Tuiles KPI */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; }
.tuile { background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px; box-shadow: var(--ombre); }
.tuile .lib { font-size: 13px; color: var(--encre-3); font-weight: 600; }
.tuile .val { font-family: var(--titre); font-size: 30px; font-weight: 600; line-height: 1.1; margin: 4px 0 2px; }
.tuile .val small { font-size: 16px; color: var(--encre-3); }
.tuile canvas { width: 100% !important; height: 46px !important; margin-top: 8px; }
.evol { font-size: 13px; font-weight: 700; }
.evol.hausse { color: var(--hausse); } .evol.baisse { color: var(--baisse); } .evol.neutre { color: var(--encre-3); }

/* Tableaux */
.tableau-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--encre-3); font-weight: 700; padding: 8px 10px; border-bottom: 2px solid var(--bord); white-space: nowrap; }
table.t td { padding: 10px; border-bottom: 1px solid var(--bord); vertical-align: middle; }
table.t tr:hover td { background: #fbfdfc; }
table.t .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.t a.lien-ligne { font-weight: 700; text-decoration: none; color: var(--encre); }
table.t a.lien-ligne:hover { color: var(--vert); text-decoration: underline; }

/* Éléments */
.badge { display: inline-block; min-width: 22px; padding: 1px 8px; border-radius: 999px; background: var(--rouge); color: #fff; font-size: 12px; font-weight: 700; text-align: center; }
.pastille { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.pastille.ok { background: #e3f4ec; color: var(--hausse); } .pastille.ko { background: #fde8ea; color: var(--baisse); } .pastille.attente { background: #f1f3f2; color: var(--encre-3); } .pastille.alerte { background: #fff4d6; color: #7a5300; }
.score { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 26px; border-radius: 6px; font-weight: 800; font-size: 13px; color: #fff; }
.score.bon { background: var(--hausse); } .score.moyen { background: var(--alerte); } .score.faible { background: var(--baisse); }
.etoiles { color: var(--rouge); letter-spacing: 1px; white-space: nowrap; } .etoiles .vide { color: #d9dfdd; }
.btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 8px; padding: 9px 16px; font: 700 14px var(--texte); cursor: pointer; text-decoration: none; background: var(--rouge); color: #fff; }
.btn:hover { background: var(--rouge-fonce); }
.btn.second { background: var(--blanc); color: var(--vert); border: 1px solid var(--bord); }
.btn.second:hover { background: var(--vert-clair); }
.btn.petit { padding: 6px 11px; font-size: 13px; }
.btn[disabled] { opacity: .55; cursor: wait; }
.segments { display: inline-flex; background: var(--blanc); border: 1px solid var(--bord); border-radius: 8px; padding: 3px; }
.segments a { padding: 6px 12px; border-radius: 6px; text-decoration: none; color: var(--encre-2); font-weight: 600; font-size: 13px; }
.segments a.actif { background: var(--vert); color: #fff; }
label { display: block; font-weight: 600; font-size: 13px; margin: 0 0 4px; color: var(--encre-2); }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=date], input[type=time], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid #cdd8d4; border-radius: 8px; font: 15px var(--texte); background: #fff; color: var(--encre); }
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--menthe); border-color: var(--teal); }
.champ { margin-bottom: 14px; }
.ligne-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.ligne-form > * { flex: 1 1 160px; }
.case { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.case input { width: 18px; height: 18px; accent-color: var(--vert); }
.alerte-boite { padding: 11px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; }
.alerte-boite.erreur { background: #fde8ea; color: #8a1c26; } .alerte-boite.ok { background: #e3f4ec; color: #145a42; } .alerte-boite.info { background: var(--vert-clair); color: var(--vert); }
.vide-etat { text-align: center; padding: 30px 10px; color: var(--encre-3); }

/* Avis */
.avis { border-bottom: 1px solid var(--bord); padding: 14px 0; }
.avis:last-child { border-bottom: 0; }
.avis .tete { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.avis .auteur { font-weight: 700; }
.avis .texte { margin: 6px 0 0; white-space: pre-line; }
.avis .reponse { margin: 10px 0 0 18px; padding: 8px 12px; border-left: 3px solid var(--menthe); background: #f6fbfa; font-size: 14px; white-space: pre-line; }
.avis .zone-reponse { margin-top: 10px; display: none; }
.avis .zone-reponse.ouverte { display: block; }
.avis .zone-reponse select { margin-bottom: 8px; }

/* Score détail */
.criteres { list-style: none; padding: 0; margin: 0; }
.criteres li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--bord); font-size: 14px; }
.criteres li:last-child { border: 0; }
.criteres .ic { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--hausse); }
.criteres .ic.non { background: var(--baisse); } .criteres .ic.mi { background: var(--alerte); }
.criteres .pts { margin-left: auto; color: var(--encre-3); white-space: nowrap; }

/* Horaires */
.horaires-grille { display: grid; grid-template-columns: 110px 90px 1fr; gap: 8px 12px; align-items: center; }
.horaires-grille .creneaux input { width: 105px; display: inline-block; margin-right: 6px; }
.conseil { background: var(--vert-clair); border-radius: var(--rayon); padding: 16px 18px; }
.conseil .etq { font-size: 12px; font-weight: 800; color: var(--teal); text-transform: uppercase; letter-spacing: .5px; }
.qr { display: inline-block; padding: 10px; background: #fff; border: 1px solid var(--bord); border-radius: 8px; }
.podium { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--bord); }
.podium:last-child { border: 0; }
.podium .r { font-family: var(--titre); font-size: 18px; width: 30px; color: var(--vert); }
.toast { position: fixed; right: 20px; bottom: 20px; background: var(--encre); color: #fff; padding: 12px 16px; border-radius: 8px; box-shadow: var(--ombre); z-index: 50; max-width: 420px; font-size: 14px; }
.toast.erreur { background: #8a1c26; }

/* Connexion */
.page-connexion { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.page-connexion .carte { width: 100%; max-width: 400px; }

/* Mobile */
.burger { display: none; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .barre { position: fixed; z-index: 40; left: 0; top: 0; width: 260px; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--ombre); }
  .barre.ouverte { transform: none; }
  .burger { display: inline-flex; position: fixed; top: 12px; left: 12px; z-index: 45; background: var(--blanc); border: 1px solid var(--bord); border-radius: 8px; padding: 8px 10px; font-size: 18px; }
  main { padding: 60px 16px 40px; }
  .g2, .g3, .g-21 { grid-template-columns: 1fr; }
  .horaires-grille { grid-template-columns: 1fr; }
}