/* SYDIAG Terrain — styles tablette */
:root { --p: #0f766e; --p2: #115e59; --fond: #f1f5f9; --surface: #fff; --texte: #0f172a; --texte2: #475569; --texte3: #94a3b8; --bord: #cbd5e1; --bord2: #e2e8f0; --r: 12px; --vert: #16a34a; --ambre: #f59e0b; --rouge: #dc2626; --orange: #ea580c; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html { font-size: 16px; }
body { margin: 0; font-family: "Segoe UI", Roboto, -apple-system, Arial, sans-serif; background: var(--fond); color: var(--texte); line-height: 1.45; padding-top: 58px; padding-bottom: env(safe-area-inset-bottom); }
a { color: var(--p); text-decoration: none; }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; } h2 { font-size: 1.1rem; } h3 { font-size: 1rem; }
p { margin: 0 0 .6rem; }
.petit { font-size: .85rem; } .tres-petit { font-size: .74rem; } .discret { color: var(--texte3); } .rangee { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.noscript { padding: 2rem; text-align: center; }
/* En-tête */
.entete { position: fixed; top: 0; left: 0; right: 0; height: 58px; background: var(--p); color: #fff; z-index: 50; box-shadow: 0 2px 8px rgba(0,0,0,.2); padding-top: env(safe-area-inset-top); }
.entete-int { display: flex; align-items: center; gap: .5rem; height: 58px; padding: 0 .6rem; max-width: 1100px; margin: 0 auto; }
.marque { display: flex; align-items: center; gap: .4rem; color: #fff; font-weight: 700; } .marque small { font-weight: 400; opacity: .8; } .marque img { border-radius: 6px; }
.entete-titre { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.entete-etat { display: flex; align-items: center; gap: .4rem; }
.btn-icone { background: rgba(255,255,255,.14); border: 0; color: #fff; width: 44px; height: 44px; border-radius: 10px; font-size: 1.4rem; display: grid; place-items: center; cursor: pointer; }
.ind-sync { display: inline-flex; align-items: center; gap: .2rem; color: #fff; background: rgba(255,255,255,.14); border-radius: 999px; padding: .2rem .6rem; font-size: .85rem; min-height: 32px; }
.ind-sync.a-faire { background: var(--ambre); color: #0f172a; font-weight: 700; }
.ind-reseau { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; opacity: .9; } .ind-point { width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; }
.ind-reseau.en-ligne .ind-point { background: #4ade80; } .ind-reseau.hors-ligne .ind-point { background: #f87171; }
.ind-sauvegarde { font-size: .72rem; opacity: 0; transition: opacity .2s; } .ind-sauvegarde.ok { opacity: 1; }
/* Structure */
#vue { max-width: 1100px; margin: 0 auto; padding: .8rem .8rem 4rem; }
.carte { background: var(--surface); border: 1px solid var(--bord2); border-radius: var(--r); padding: .9rem 1rem; margin-bottom: .8rem; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.barre-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 48px; padding: .6rem 1.1rem; border-radius: 10px; border: 1px solid var(--bord); background: var(--surface); color: var(--texte); font-weight: 600; font-size: 1rem; cursor: pointer; text-decoration: none; }
.btn.primaire { background: var(--p); color: #fff; border-color: var(--p); } .btn.vert { background: var(--vert); color: #fff; border-color: var(--vert); } .btn.danger { background: #fff; color: var(--rouge); border-color: #fca5a5; }
.btn.secondaire { background: #f8fafc; } .btn.petit { min-height: 38px; padding: .3rem .7rem; font-size: .88rem; } .btn.large { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.liste { display: flex; flex-direction: column; gap: .5rem; margin: .5rem 0; }
.ligne { display: flex; align-items: center; gap: .7rem; padding: .75rem .9rem; background: var(--surface); border: 1px solid var(--bord2); border-radius: 10px; color: var(--texte); min-height: 60px; }
.ligne:active { background: #f1f5f9; } .ligne-corps { flex: 1; min-width: 0; } .ligne-titre { font-weight: 650; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .ligne-sous { font-size: .82rem; color: var(--texte2); }
.ligne-extra { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; } .chevron { color: var(--texte3); font-size: 1.4rem; }
.ligne-num { flex: none; min-width: 2rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texte2); }
.point-sale { color: var(--ambre); font-weight: 900; } .pastille { display: inline-flex; align-items: center; gap: .2rem; padding: .1rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 600; border: 1px solid var(--c, var(--bord)); color: var(--c, var(--texte2)); background: color-mix(in srgb, var(--c, #94a3b8) 12%, #fff); }
.pastille.rouge { --c: var(--rouge); }
.jauge { display: inline-flex; align-items: center; gap: .4rem; min-width: 110px; } .jauge span { flex: 1; height: 8px; border-radius: 999px; background: currentColor; display: block; min-width: 2px; } .jauge b { font-size: .8rem; }
.jauge { position: relative; } .jauge::before { content: ""; position: absolute; left: 0; right: 40px; height: 8px; background: var(--bord2); border-radius: 999px; z-index: 0; } .jauge span { position: relative; z-index: 1; }
.vide { text-align: center; padding: 2rem 1rem; color: var(--texte2); font-size: 1rem; } .vide > :first-child { font-size: 2.2rem; }
.bandeau { padding: .7rem .9rem; border-radius: 10px; margin-bottom: .7rem; font-weight: 600; } .bandeau.rouge { background: #fef2f2; color: #7f1d1d; border: 1px solid #fca5a5; }
.entete-fiche .compl { margin-top: .5rem; } .manques ul { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .85rem; } .manques li { margin: .2rem 0; }
/* Sections et champs */
.section-form { background: var(--surface); border: 1px solid var(--bord2); border-radius: var(--r); padding: .8rem 1rem 1rem; margin-bottom: .9rem; }
.section-titre { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; padding-bottom: .5rem; border-bottom: 1px solid var(--bord2); margin-bottom: .6rem; }
.section-num { font-family: monospace; font-size: .75rem; background: var(--fond); padding: .1rem .4rem; border-radius: 6px; color: var(--texte2); }
.section-pct { margin-left: auto; font-size: .8rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; } .section-pct.ok { color: var(--vert); background: #f0fdf4; } .section-pct.moyen { color: #b45309; background: #fffbeb; } .section-pct.ko { color: var(--rouge); background: #fef2f2; }
.section-intro { font-size: .85rem; color: var(--texte2); }
.sous-section { border: 1px solid var(--bord2); border-radius: 10px; margin: .6rem 0; padding: 0 .8rem; } .sous-section > summary { cursor: pointer; padding: .7rem 0; font-weight: 700; color: var(--texte2); display: flex; align-items: center; gap: .5rem; list-style: none; min-height: 48px; }
.sous-section > summary::-webkit-details-marker { display: none; } .sous-section > summary::before { content: "▸"; color: var(--texte3); } .sous-section[open] > summary::before { content: "▾"; }
.sous-num { font-family: monospace; font-size: .78rem; background: var(--fond); padding: .1rem .4rem; border-radius: 6px; } .sous-pct { margin-left: auto; font-size: .78rem; font-weight: 600; }
.champ { padding: .7rem 0; border-bottom: 1px dashed var(--bord2); } .champ:last-child { border-bottom: 0; }
.champ.en-manque { background: #fff7ed; margin: 0 -.5rem; padding-left: .5rem; padding-right: .5rem; border-radius: 8px; }
.champ.flash { animation: flash 1.4s; } @keyframes flash { 0% { background: #fef3c7; } 100% { background: transparent; } }
.champ-lib { display: block; font-weight: 600; margin-bottom: .4rem; } .champ-num { font-family: monospace; font-size: .75rem; color: var(--texte3); margin-right: .2rem; } .oblig { color: var(--rouge); }
.champ-aide { font-size: .8rem; color: var(--texte2); margin: -.2rem 0 .4rem; }
.champ-precision { margin-top: .5rem; padding: .5rem .7rem; background: #fffbeb; border: 1px dashed #fcd34d; border-radius: 8px; } .champ-precision label { display: block; font-weight: 600; color: #92400e; margin-bottom: .2rem; }
.champ-photos { margin-top: .5rem; padding: .5rem .7rem; background: #fff7ed; border: 1px dashed #fdba74; border-radius: 8px; }
/* Liste de points géolocalisés (127 Points d'eau) */
.points { display: flex; flex-direction: column; gap: .6rem; }
.point { border: 1px solid var(--bord2); border-left: 4px solid var(--p); border-radius: 10px; padding: .6rem .8rem; background: #f8fafc; display: flex; flex-direction: column; gap: .4rem; }
.point-titre { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.champ-documents { margin-top: .5rem; padding: .5rem .7rem; background: #eff6ff; border: 1px dashed #93c5fd; border-radius: 8px; } .champ-documents-titre { font-weight: 600; color: #1e40af; margin-bottom: .3rem; }
.champ-manque { font-size: .8rem; color: var(--orange); font-weight: 600; margin-top: .3rem; }
input[type=text], input[type=number], input[type=date], input[type=time], input[type=password], select, textarea { width: 100%; min-height: 48px; font: inherit; padding: .55rem .75rem; border: 1px solid var(--bord); border-radius: 10px; background: #fff; color: var(--texte); }
textarea { min-height: 80px; resize: vertical; } input:focus, select:focus, textarea:focus { outline: 2px solid #99f6e4; border-color: var(--p); }
.compteur { text-align: right; font-size: .75rem; color: var(--texte3); }
.lecture { padding: .6rem .8rem; background: var(--fond); border-radius: 10px; color: var(--texte2); font-family: monospace; }
.segments { display: flex; flex-wrap: wrap; gap: .45rem; } .segments.grille .seg { flex: 1 1 calc(50% - .45rem); }
.seg { min-height: 48px; padding: .5rem .9rem; border-radius: 10px; border: 2px solid var(--bord); background: #fff; font: inherit; font-weight: 600; cursor: pointer; color: var(--texte2); text-align: left; }
.seg.actif { border-color: var(--c, var(--p)); background: color-mix(in srgb, var(--c, var(--p)) 14%, #fff); color: var(--c, var(--p)); }
.segments.petits .seg { min-height: 40px; padding: .3rem .7rem; font-size: .9rem; }
.tri-liste { align-items: center; margin-bottom: .6rem; }
.puces { display: flex; flex-wrap: wrap; gap: .45rem; } .puce { min-height: 44px; padding: .4rem .9rem; border-radius: 999px; border: 2px solid var(--bord); background: #fff; font: inherit; font-weight: 600; color: var(--texte2); cursor: pointer; }
.puce.actif { border-color: var(--p); background: #ccfbf1; color: var(--p2); } .puce.actif::before { content: "✓ "; }
.cascade { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .5rem; }
.composite { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem; } .sous-champ label { display: block; color: var(--texte2); margin-bottom: .2rem; }
.sous-champ.inactif { opacity: .45; } .sous-champ.inactif input { background: #f8fafc; }
input.calcule { background: var(--fond); color: var(--texte2); font-weight: 700; }
input.invalide { border-color: var(--rouge); background: #fef2f2; }
/* Nombre suivi de son unité (« 120 m² ») */
.avec-unite { display: flex; align-items: center; border: 1px solid var(--bord); border-radius: 10px; background: #fff; overflow: hidden; }
.avec-unite input { flex: 1; min-width: 0; border: 0; border-radius: 0; } .avec-unite input:focus { outline: none; } .avec-unite:focus-within { outline: 2px solid #99f6e4; border-color: var(--p); }
.avec-unite .unite { padding: 0 .75rem; color: var(--texte2); font-weight: 600; white-space: nowrap; border-left: 1px solid var(--bord2); align-self: stretch; display: flex; align-items: center; background: var(--fond); }
.gps-etat { padding: .5rem .8rem; border-radius: 10px; background: var(--fond); margin-bottom: .5rem; font-weight: 600; } .gps-etat.bon { background: #f0fdf4; color: #166534; } .gps-etat.moyen { background: #fffbeb; color: #92400e; } .gps-etat.faible { background: #fef2f2; color: #7f1d1d; }
.gps details { margin-top: .5rem; } .gps summary { cursor: pointer; color: var(--texte2); }
.gps-etat.renseignee { background: #f0fdf4; border: 1px solid #bbf7d0; color: var(--texte); margin-bottom: .2rem; }
.gps-origine { font-size: .8rem; color: var(--texte2); margin-bottom: .5rem; } .gps-origine.bon { color: #166534; } .gps-origine.moyen { color: #92400e; } .gps-origine.faible { color: #991b1b; }
/* Capture assistée de la position (PositionGps) */
.sans-defilement { overflow: hidden; }
.voile { position: fixed; inset: 0; background: rgba(15,23,42,.6); z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
.feuille-gps { background: var(--surface); width: 100%; max-width: 720px; max-height: 96vh; border-radius: var(--r) var(--r) 0 0; padding: .8rem 1rem calc(1rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; box-sizing: border-box; }
.poignee { width: 42px; height: 4px; border-radius: 2px; background: var(--bord2); margin: 0 auto .6rem; }
.gps-entete { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; } .gps-titre { font-weight: 700; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pastille.bon { --c: var(--vert); } .pastille.moyen { --c: var(--ambre); } .pastille.faible { --c: var(--rouge); }
.onglets-gps { display: flex; background: var(--fond); border-radius: 10px; padding: 3px; margin-bottom: .6rem; }
.onglet { flex: 1; min-height: 40px; border: 1px solid transparent; border-radius: 8px; background: transparent; font: inherit; font-weight: 600; font-size: .88rem; color: var(--texte2); cursor: pointer; }
.onglet.actif { background: var(--surface); border-color: var(--bord2); color: var(--texte); }
.bandeau.ambre { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; } .bandeau.ambre, .feuille-gps .bandeau.rouge { font-size: .85rem; margin: .4rem 0 0; }
.carte-gps { position: relative; height: clamp(200px, calc(100vh - 400px), 760px); flex: 0 1 auto; min-height: 160px; margin: 0 -1rem .6rem; background: #dfe3e6; border-top: 1px solid var(--bord2); border-bottom: 1px solid var(--bord2); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.carte-gps.pointage { cursor: crosshair; }
.calque-tuiles img { position: absolute; pointer-events: none; } .calque-svg { position: absolute; inset: 0; pointer-events: none; }
.gps-attente { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; color: var(--texte2); }
.gps-attente .spin { width: 32px; height: 32px; border: 3px solid var(--bord); border-top-color: var(--p); border-radius: 50%; animation: gps-rotation .9s linear infinite; }
@keyframes gps-rotation { to { transform: rotate(360deg); } }
.echelle { position: absolute; left: 10px; bottom: 10px; background: rgba(255,255,255,.85); border-radius: 4px; padding: 3px 6px; font-size: .68rem; font-weight: 700; text-align: center; pointer-events: none; }
.echelle-barre { display: block; width: 80px; height: 3px; background: var(--texte); margin-bottom: 2px; }
.zoom { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.zoom-btn { width: 40px; height: 40px; border-radius: 6px; border: 1px solid var(--bord2); background: rgba(255,255,255,.94); font-size: 1.2rem; font-weight: 700; color: var(--texte); cursor: pointer; display: grid; place-items: center; }
.consigne { position: absolute; left: 50%; transform: translateX(-50%); top: 10px; font-size: .72rem; font-weight: 600; color: var(--texte); background: rgba(255,255,255,.88); padding: 4px 10px; border-radius: 999px; white-space: nowrap; pointer-events: none; }
.attribution { position: absolute; right: 6px; bottom: 4px; font-size: .62rem; color: var(--texte2); background: rgba(255,255,255,.75); padding: 0 4px; border-radius: 3px; pointer-events: none; }
.gps-lecture { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; padding: .6rem 0; border-top: 1px solid var(--bord2); border-bottom: 1px solid var(--bord2); margin-bottom: .3rem; }
.gps-lecture .droite { text-align: right; } .gps-lecture .etiquette { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: var(--texte3); }
.gps-lecture .coordonnees { font-size: .98rem; font-weight: 600; } .gps-lecture .precision { font-size: 1.3rem; font-weight: 800; color: var(--texte3); }
.precision.bon { color: var(--vert); } .precision.moyen { color: var(--ambre); } .precision.faible { color: var(--rouge); }
.gps-actions { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
/* Consultation d'une photo : horodatage, position, légende */
.alerte-texte { color: #b45309; }
.visionneuse-feuille { max-height: 96vh; overflow: auto; }
.visionneuse-image { margin: 0 -1rem .6rem; background: #0f172a; text-align: center; } .visionneuse-image img { max-width: 100%; max-height: 60vh; object-fit: contain; display: inline-block; }
.visionneuse-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .5rem .9rem; padding: .5rem 0; border-top: 1px solid var(--bord2); border-bottom: 1px solid var(--bord2); }
.visionneuse-meta .etiquette { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: var(--texte3); } .visionneuse-meta a { font-weight: 600; }
/* Numérisation multipage (ScanPdf) */
.feuille-scan { background: var(--surface); width: 100%; max-width: 720px; max-height: 96vh; overflow: auto; border-radius: var(--r) var(--r) 0 0; padding: .8rem 1rem calc(1rem + env(safe-area-inset-bottom)); box-sizing: border-box; display: flex; flex-direction: column; gap: .6rem; }
.scan-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.scan-page { margin: 0; border: 1px solid var(--bord2); border-radius: 10px; padding: .4rem; background: #fff; }
.scan-page img { width: 100%; height: 180px; object-fit: contain; background: var(--fond); border-radius: 6px; display: block; }
.scan-page figcaption { display: flex; align-items: center; justify-content: space-between; gap: .3rem; margin-top: .3rem; font-size: .85rem; } .scan-page .rangee { gap: .25rem; } .btn.ambre { background: var(--ambre); color: #fff; border-color: var(--ambre); }
.zone-medias { display: flex; flex-direction: column; gap: .5rem; }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; } .galerie:empty { display: none; }
.vignette { margin: 0; border: 1px solid var(--bord2); border-radius: 10px; padding: .4rem; background: #fff; display: flex; flex-direction: column; gap: .3rem; }
.vignette img { width: 100%; height: 120px; object-fit: cover; border-radius: 6px; display: block; } .vign-ico { height: 80px; display: grid; place-items: center; font-size: 2rem; background: var(--fond); border-radius: 6px; }
.vignette .legende { min-height: 36px; font-size: .85rem; padding: .3rem .5rem; }
.signature-pad { width: 100%; max-width: 640px; height: 220px; border: 2px dashed var(--bord); border-radius: 10px; background: #fff; touch-action: none; display: block; margin: .5rem 0; }
.nav-sections { display: flex; gap: .5rem; justify-content: space-between; margin-bottom: .8rem; } .nav-sections .btn { flex: 1; }
.bloc-repetable { border-color: #99f6e4; background: #f0fdfa; }
/* Parcours de saisie étape par étape : barre d'étapes, rang des étapes du sommaire, reprise */
.etape-legende { font-size: .85rem; color: var(--texte2); margin: 0 0 .35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etapes { display: flex; gap: .35rem; overflow-x: auto; padding: .15rem .1rem .55rem; margin-bottom: .5rem; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.etape { --c: var(--texte3); flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem; min-height: 40px; padding: .25rem .6rem .25rem .3rem; border-radius: 999px; border: 1px solid var(--bord2); background: var(--surface); color: var(--texte2); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.etape .etape-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--c) 16%, #fff); color: var(--c); border: 2px solid var(--c); font-weight: 800; font-size: .78rem; }
.etape.ok { --c: var(--vert); } .etape.moyen { --c: var(--ambre); } .etape.ko { --c: var(--rouge); }
.etape.ok .etape-num { background: var(--vert); color: #fff; }
.etape.actif { border-color: var(--p); background: color-mix(in srgb, var(--p) 10%, #fff); color: var(--p2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--p) 35%, transparent); }
.etape-rang { --c: var(--texte3); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--c); color: var(--c); font-weight: 800; background: color-mix(in srgb, var(--c) 12%, #fff); }
.etape-rang.ok { --c: var(--vert); background: var(--vert); color: #fff; } .etape-rang.moyen { --c: var(--ambre); } .etape-rang.ko { --c: var(--rouge); }
.btn-continuer { display: flex; justify-content: center; text-align: center; margin: 0 0 .8rem; white-space: normal; }
.nav-sections .btn { white-space: normal; text-align: center; justify-content: center; }
.grille-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin-bottom: .8rem; } .stat { background: var(--fond); border-radius: 10px; padding: .6rem .8rem; font-size: .8rem; color: var(--texte2); } .stat b { display: block; font-size: 1.3rem; color: var(--texte); }
.journal { list-style: none; padding: 0; margin: 0; font-size: .82rem; } .journal li { padding: .3rem 0; border-bottom: 1px dashed var(--bord2); } .journal li.ok { color: #166534; } .journal li.erreur { color: #991b1b; } .journal li.alerte { color: #92400e; }
/* Connexion */
.page-connexion { min-height: calc(100vh - 58px); display: grid; place-items: center; padding: 1rem; margin-top: -58px; background: linear-gradient(160deg, #0f172a, #134e4a 60%, #0f766e); }
.boite { width: 100%; max-width: 420px; background: #fff; border-radius: 18px; padding: 1.6rem; display: flex; flex-direction: column; gap: .7rem; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.logo { display: flex; align-items: center; gap: .8rem; font-size: 1.1rem; } .logo img { border-radius: 12px; }
/* Toasts */
#toasts { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: .4rem; z-index: 100; width: min(92vw, 520px); }
.toast { background: #0f172a; color: #fff; padding: .7rem 1rem; border-radius: 10px; opacity: 0; transform: translateY(10px); transition: all .25s; font-weight: 600; text-align: center; }
.toast.visible { opacity: 1; transform: none; } .toast.ok { background: var(--vert); } .toast.erreur { background: var(--rouge); } .toast.alerte { background: var(--ambre); color: #0f172a; }
@media (min-width: 900px) { .segments.grille .seg { flex-basis: calc(25% - .45rem); } }
@media (max-width: 560px) { .entete-titre { font-size: .9rem; } .ind-reseau .ind-lib { display: none; } .marque-txt { display: none; } }

/* Menu latéral gauche (☰) : navigation, contexte de saisie en cours, actions */
.menu-voile { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 60; display: none; }
.menu-voile.ouvert { display: block; }
.menu-lateral { position: fixed; top: 0; bottom: 0; left: 0; width: min(320px, 86vw); background: var(--surface); z-index: 61; box-shadow: 4px 0 24px rgba(0,0,0,.25); overflow-y: auto; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); transform: translateX(-105%); transition: transform .2s ease; }
.menu-lateral.ouvert { transform: none; }
.menu-tete { background: var(--p); color: #fff; padding: .8rem .9rem; display: flex; align-items: center; gap: .6rem; min-height: 58px; }
.menu-tete img { border-radius: 8px; } .menu-tete b { display: block; font-size: 1.05rem; } .menu-tete .petit { opacity: .85; }
.menu-tete .menu-fermer { margin-left: auto; }
.menu-groupe { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texte3); padding: .9rem 1rem .3rem; }
.menu-item { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 46px; padding: .5rem 1rem; color: var(--texte); background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.menu-item:hover { background: var(--fond); } .menu-item[disabled] { opacity: .5; cursor: default; }
.menu-item.actif { background: #ccfbf1; color: var(--p2); font-weight: 700; box-shadow: inset 4px 0 0 var(--p); }
.menu-item.sous { padding-left: 1.9rem; min-height: 40px; font-size: .92rem; }
.menu-emoji { width: 1.5rem; text-align: center; flex: 0 0 auto; }
.menu-item .badge { margin-left: auto; background: var(--ambre); color: #0f172a; border-radius: 999px; padding: .1rem .55rem; font-size: .78rem; font-weight: 700; }
.menu-item .pct { margin-left: auto; font-size: .76rem; color: var(--texte3); font-weight: 600; }
.menu-item.actif .pct { color: var(--p2); }
.menu-pied { margin-top: auto; padding: .8rem 1rem; font-size: .74rem; color: var(--texte3); border-top: 1px solid var(--bord2); }
@media print { .menu-lateral, .menu-voile { display: none !important; } }