@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@1,600&display=swap');
.pduo{gap:12px;margin:8px 0 12px}
.pbox{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 6px;border:2px dashed #a9b1ab;border-radius:18px;color:var(--gris);font-size:13px;margin:0;background:transparent;cursor:pointer;text-align:center}
.pico{width:38px;height:38px;border-radius:50%;display:grid;place-items:center}
.pico svg{width:20px;height:20px}
.pico.cam{background:#f3e9d8;color:#16241c}
.pico.gal{background:#dbe7f5;color:#2a4a6b}
body.sombre .pbox{border-color:#4a5a50}
body.sombre .pico.cam{background:#3a3220;color:#f3e9d8}
body.sombre .pico.gal{background:#22303f;color:#9ab7d8}
.graph .val{font-size:12px;font-weight:700;min-height:16px;margin-bottom:4px}
details.carte summary{cursor:pointer}
.mbadge.certif{left:auto;right:8px;background:#dcebdc;color:#154a30}
.plan-pill{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;margin-left:10px;vertical-align:middle;background:#fff2d4;color:#7a5200}

.score .nb{font-size:36px}
.score .nb small{font-size:14px}

:root{--c-principal:#17264a;--c-principal-2:#25365f;--c-accent:#c79a3b;--c-fond:#faf6ee;--c-carte:#fff;--c-bord:#e9e1d0;--c-texte-doux:#6b6558;--c-ok:#2f7a4a;--c-alerte:#e0653a;--rayon:18px}
body:not(.sombre){--accent:var(--c-principal);--accent-texte:var(--c-principal);--accent-clair:#e3e9f6;--ambre:var(--c-accent);--fond:var(--c-fond);--carte:var(--c-carte);--texte:#1d2433;--gris:var(--c-texte-doux);--bord:var(--c-bord);--chip:#efe8d8;--jaune:#fff7e6;--bleu:#e3e9f6;--rouge-fond:#f9e3d6}
body{font-family:'Manrope',system-ui,sans-serif}
.hero{background:var(--c-principal);margin:-4px 0 16px;border-radius:26px;padding:20px 20px 22px}
.hero .titre{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:600;font-size:30px;color:#fff}
.etiquette-hero{letter-spacing:1.6px;font-weight:600;color:#c9d2e8;opacity:1}
.hero .avatar{background:var(--c-accent);color:var(--c-principal)}
.hero .ico{background:var(--c-principal-2);border-radius:14px}
.hero .ico.contour{border:0;background:var(--c-principal-2)}
.pastille{background:var(--c-alerte);color:#fff}
.hero .gros{font-size:52px}
.progress{height:7px;background:#2c3d68}
.progress i{background:var(--c-accent)}
.etiquette{letter-spacing:1.6px;font-size:11px;font-weight:700;color:var(--c-texte-doux)}
.terrain{gap:10px}
.terrain button{background:var(--c-carte);border:1px solid var(--c-bord);border-radius:16px;min-height:74px;justify-content:center;font-weight:700}
.terrain .t-v{color:var(--c-principal)}
.terrain .t-o{color:#b4532a}
.terrain .t-r{color:#a4352a}
.stats{gap:12px}
.stat{border:1px solid var(--c-bord);border-radius:var(--rayon)}
.stat small{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700}
.stat b{font-size:34px;font-weight:800}
.carte{background:var(--c-carte);border-radius:var(--rayon);border:1px solid var(--c-bord);box-shadow:none;padding:16px}
.carte.verte{background:#e3f1e7;border-color:#cfe5d6}
.carte.nuit{background:var(--c-principal);color:#fff;border-color:var(--c-principal)}
.carte.nuit small{color:#c9d2e8;letter-spacing:1.4px;font-weight:700}
.alerte{background:var(--c-carte);border:1px solid var(--c-bord);border-radius:var(--rayon)}
.alerte.jaune{background:#fff7e6;border-color:#ecd9a8}
.alerte.rouge{background:#f9e3d6;border-color:#f0c9b3}
.jour{border-radius:16px;border:1px solid var(--c-bord)}
.actions{gap:10px}
.actions button,.actions button.j,.actions button.b{background:var(--c-carte);border:1px solid var(--c-bord);border-radius:16px;color:var(--c-principal);font-weight:700;padding:18px 16px}
.actions button.j{color:#b4532a}
h2.section{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--c-texte-doux);font-weight:700;margin:20px 0 10px}
h1.titre{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:600;font-size:34px}
.entete h1{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:600;font-size:30px}
.retour,.chip-btn{background:var(--chip)}
.btn{background:var(--c-principal);color:#fff;border-radius:16px;min-height:52px;font-weight:800;border:0}
.btn.or{background:var(--c-accent);color:var(--c-principal)}
.badge{background:#f4e8cb;color:#7a5a14;border-radius:999px;padding:4px 12px;font-weight:700}
.chip{background:var(--c-principal);border-radius:999px}
.onglets button{border-radius:999px}
.onglets button.actif{background:var(--c-principal);color:#fff}
input,select,textarea{border-radius:14px;border:1px solid var(--c-bord);min-height:46px}
.bottombar{background:var(--c-carte);border-top:1px solid var(--c-bord);height:78px;align-items:center}
.bottombar button{color:#7a7466;font-weight:600}
.bottombar button.active{color:var(--c-principal);font-weight:800}
.bottombar .plus{background:var(--c-principal);border:5px solid var(--c-fond);box-shadow:none;width:58px;height:58px;flex:0 0 58px;transform:translateY(-22px)}
body.sombre .carte,body.sombre .stat,body.sombre .alerte,body.sombre .terrain button{border-color:var(--c-principal-2)}
body.sombre .hero{background:var(--c-principal)}
#etat-reseau{position:fixed;left:50%;transform:translateX(-50%);bottom:92px;z-index:50;background:#1d2433;color:#fff;font-size:13px;font-weight:700;padding:8px 14px;border-radius:999px;max-width:calc(100% - 32px);text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.18)}
#etat-reseau.off{background:#8a3b17}
#etat-reseau.sync{background:var(--c-principal,#17264a)}
#etat-reseau.ok{background:#2f7a4a}