/* ========================================================================
   Petit Loup — styles partagés
   Règles communes extraites des blocs <style> dupliqués dans app.py et
   routes_*.py (voir notes du projet "GNSS Chats", 01/10/2026).
   Chaque page garde ses styles propres à son écran dans son bloc <style>
   local, chargé APRES ce fichier (cascade : les règles locales passent
   devant en cas de conflit sur un même sélecteur).
   ======================================================================== */

:root {
  --bg:#0d0e12; --surface:#1a1c22; --surface2:#20232b; --text:#f2f2f2; --text2:#9a9ea6;
  --success:#34c759; --danger:#ff453a; --warning:#ff9f0a; --info:#5ac8fa; --accent:#2dd4bf;
  --border:#2a2d35;
}

* { box-sizing:border-box; }

body { font-family: -apple-system, sans-serif; background:var(--bg); color:var(--text); margin:0; padding:20px; }

h1 { text-align:center; font-size:22px; margin:10px 0 6px; }

.retour { display:block; text-align:center; color:var(--accent); margin-bottom:20px; text-decoration:none; font-size:14px; }

.section-titre-groupe { max-width:420px; margin:20px auto 8px; font-size:13px; color:var(--text2); text-transform:uppercase; letter-spacing:0.5px; }

.reglage-section { background:var(--surface); border-radius:14px; padding:16px; margin:8px auto; max-width:420px; border:1px solid var(--border); }
.reglage-titre { font-size:16px; font-weight:600; margin-bottom:8px; }
.reglage-desc { font-size:13px; color:var(--text2); margin-bottom:14px; line-height:1.4; }

/* Boutons — standard unifié 2026-10-01 : gabarit calqué sur les boutons de
   la fiche chat (hauteur, arrondi), alignement centré conservé, espacement
   entre boutons empilés calqué sur le menu Réglages (8px). */
.btn-accent { background:var(--accent); color:#0d0e12; border:none; border-radius:12px; padding:14px 24px;
              font-size:16px; font-weight:600; cursor:pointer; }
.btn-accent:active { opacity:0.85; }
.btn-accent:disabled { opacity:0.4; cursor:not-allowed; }
.btn-secondaire { background:transparent; border-radius:12px; padding:14px 24px; font-size:16px; cursor:pointer;
                   color:var(--accent); border:1px solid var(--accent); }

/* Variante compacte (action en ligne dans une liste, p. ex. Enregistrer/
   Annuler d'une édition) — mêmes proportions que les petits boutons déjà
   utilisés dans l'éditeur de photo (photo_editor.js::petitBouton/bouton),
   réutilisées ici pour la cohérence de charte graphique (01/10/2026).
   Les resets sur .btn-petit empêchent toute propriété redéclarée localement
   par une page (width, margin-top...) de refaire dérailler la hauteur. */
.btn-petit { padding:7px 12px; font-size:13px; border-radius:10px; width:auto; margin-top:0; }
.btn-accent.btn-petit { border:1px solid transparent; }

/* Pavé "carte" (périmètre) — décision validée 2026-10-01 : ombre portée
   resserrée façon surlignage, à la place de l'ancien liseret/halo coloré. */
.perimetre-card { background:var(--surface); border-radius:14px; padding:14px 16px; margin:10px auto; max-width:420px; border:1px solid var(--border); cursor:pointer;
                   box-shadow: 2px 3px 10px -1px rgba(61,255,197,0.65), 0 1px 2px rgba(0,0,0,0.4); }
.perimetre-nom { font-size:19px; font-weight:700; }
.perimetre-compte { font-size:12px; color:var(--text2); margin-top:3px; }
.perimetre-detail { display:none; margin-top:14px; text-align:left; cursor:default; }
.perimetre-detail.ouvert { display:block; }

.box-liste { list-style:none; padding:0; margin:0; }
.box-mac { display:block; }

.sous-titre { font-size:12px; color:var(--text2); text-transform:uppercase; letter-spacing:0.5px; margin:12px 0 6px; }
.sous-titre:first-child { margin-top:0; }

.box-ligne:last-child { border-bottom:none; }

.vide { color:var(--text2); font-size:13px; padding:4px 0; }

.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; z-index:10; padding:20px; }
.modal-contenu { background:var(--surface); border-radius:14px; padding:18px; max-width:360px; width:100%;
                  border:1px solid rgba(45,212,191,0.4); box-shadow: 0 16px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(45,212,191,0.08); }
.modal-titre { font-size:15px; font-weight:700; text-align:center; margin-bottom:10px; }
.modal-avertissement { background:rgba(255,159,10,0.10); border:1px solid var(--warning); border-radius:10px; padding:10px 12px; font-size:12px; color:var(--text2); margin-bottom:12px; }

.compteur { font-size:14px; font-weight:600; margin:14px 0 10px; text-align:center; }
.compteur.rouge { color:var(--danger); }
.compteur.orange { color:var(--warning); }
.compteur.ok { color:var(--success); }

.badge-perime { display:inline-block; background:rgba(255,159,10,0.2); color:var(--warning); border-radius:999px; padding:2px 9px; font-size:11px; margin-left:8px; }

/* Cases à cocher turquoise (et non bleu navigateur par défaut) — toute la
   page, pas seulement l'écran ZEE d'où vient cette règle à l'origine. */
input[type=checkbox] { width:18px; height:18px; accent-color: var(--accent); }