/* EnSouvenirDe — système visuel commun (charte §30) : pierre, végétation, lumière.
   Une identité, trois densités : public (bleu nuit + ivoire), Pro (bleu nuit + sauge),
   Collectivité (bleu nuit + gris minéral / or discret). */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Inter:wght@400;500;600&display=swap');

:root {
  --bleu-nuit: #17324D; --ivoire: #F6F3EC; --sauge: #829886; --or: #B99A62; --gris-pierre: #747571; --anthracite: #292D30; --blanc: #FFFFFF;
  --accent: var(--bleu-nuit); --accent-doux: #E7ECF1; --halo: #5B8DD9;
  --ok: var(--sauge); --alerte: #B3702F; --erreur: #9C3B2E;
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif; --sans: 'Inter', 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 6px; --r-l: 12px; --ombre: 0 1px 2px rgba(23,50,77,.06), 0 6px 20px -8px rgba(23,50,77,.12);
}
body[data-app="pro"] { --accent: #5F7A63; --accent-doux: #E8EEE8; }
body[data-app="collectivite"] { --accent: #5B6168; --accent-doux: #E9E9E6; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--anthracite); background: var(--ivoire); min-height: 100dvh; }
h1, h2, h3 { font-family: var(--serif); color: var(--bleu-nuit); font-weight: 600; line-height: 1.15; margin: 0 0 .5rem; letter-spacing: .005em; }
h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); } h2 { font-size: 1.55rem; } h3 { font-size: 1.2rem; }
p { margin: 0 0 .8rem; max-width: 68ch; }
a { color: var(--bleu-nuit); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }

/* En-tête : mot-marque à gauche, logo en haut à droite en faibles proportions (charte 5.1) */
.esd-header { display: flex; align-items: center; gap: 1rem; padding: .7rem 1.1rem; background: var(--blanc); border-bottom: 1px solid #E5E1D8; position: sticky; top: 0; z-index: 20; }
.esd-wordmark { font-family: var(--serif); font-size: 1.45rem; color: var(--bleu-nuit); text-decoration: none; letter-spacing: .01em; display: flex; align-items: baseline; gap: 0; white-space: nowrap; }
.esd-wordmark b { font-weight: 600; } .esd-wordmark span { font-weight: 500; }
.esd-wordmark .qualif { font-family: var(--sans); font-size: .8rem; color: var(--accent); font-weight: 500; margin-left: .3rem; padding: .1rem .45rem; border: 1px solid var(--accent-doux); border-radius: 999px; }
.esd-header nav { display: flex; gap: .2rem; margin-left: .5rem; flex-wrap: wrap; }
.esd-header nav button { background: none; border: 0; padding: .45rem .7rem; border-radius: var(--r); color: var(--gris-pierre); cursor: pointer; }
.esd-header nav button[aria-current="page"] { color: var(--bleu-nuit); background: var(--accent-doux); font-weight: 500; }
.esd-header .spacer { flex: 1; }
.esd-header .user { font-size: .85rem; color: var(--gris-pierre); display: flex; gap: .6rem; align-items: center; }
.esd-logo { height: 42px; width: auto; display: block; }
@media (max-width: 860px) { .esd-header { flex-wrap: wrap; padding: .6rem .8rem; gap: .5rem; } .esd-header nav { order: 3; width: 100%; margin: .2rem 0 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .esd-header nav button { white-space: nowrap; } .esd-logo { height: 34px; } .esd-header .user span.nom { display: none; } }

main { max-width: 1180px; margin: 0 auto; padding: 1.2rem 1.1rem 4rem; }
.ligne-memoire { display: block; width: 100%; height: 14px; margin: .6rem 0 1.2rem; }

/* Accueil */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; padding: 2rem 0 1rem; }
.hero .signature { font-family: var(--serif); font-size: 1.35rem; font-style: italic; color: var(--gris-pierre); margin-bottom: 1.4rem; }
.hero figure { margin: 0; aspect-ratio: 4/3; border-radius: var(--r-l); background: linear-gradient(160deg, #F0EBDF 0%, #E6E1D6 45%, #D9D5CB 100%); position: relative; overflow: hidden; }
.hero figure::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 20%, rgba(255,255,255,.75), transparent 55%); }
.hero figure svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.portes { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 1rem 0; }
.porte { text-align: left; background: var(--blanc); border: 1px solid #E5E1D8; border-radius: var(--r-l); padding: 1.1rem 1.2rem; cursor: pointer; box-shadow: var(--ombre); transition: border-color .15s; }
.porte:hover { border-color: var(--or); }
.porte strong { display: block; font-family: var(--serif); font-size: 1.3rem; color: var(--bleu-nuit); }
.porte small { color: var(--gris-pierre); }
.verbes { color: var(--gris-pierre); font-family: var(--serif); font-size: 1.15rem; }
.verbes i { font-style: normal; color: var(--or); margin: 0 .5rem; }
@media (max-width: 820px) { .hero { grid-template-columns: 1fr; padding-top: .6rem; } .portes { grid-template-columns: 1fr; } }

/* Composants */
.carte { background: var(--blanc); border: 1px solid #E5E1D8; border-radius: var(--r-l); padding: 1rem 1.1rem; }
.grille { display: grid; gap: 1rem; } .grille.deux { grid-template-columns: 1fr 1fr; } .grille.plan-fiche { grid-template-columns: minmax(0, 1.4fr) minmax(300px, .8fr); }
@media (max-width: 900px) { .grille.deux, .grille.plan-fiche { grid-template-columns: 1fr; } }
.btn { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--accent); background: var(--accent); color: #fff; padding: .55rem 1rem; border-radius: var(--r); cursor: pointer; font-weight: 500; text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.secondaire { background: transparent; color: var(--accent); }
.btn.discret { background: transparent; border-color: transparent; color: var(--gris-pierre); padding: .45rem .6rem; }
.btn.or { background: var(--or); border-color: var(--or); }
.btn.danger { background: var(--erreur); border-color: var(--erreur); }
.btn.petit { padding: .3rem .6rem; font-size: .85rem; }
.champ { display: block; margin-bottom: .8rem; }
.champ > span { display: block; font-size: .85rem; color: var(--gris-pierre); margin-bottom: .25rem; }
.champ input, .champ select, .champ textarea { width: 100%; padding: .55rem .7rem; border: 1px solid #D8D3C8; border-radius: var(--r); background: #fff; }
.champ textarea { min-height: 84px; resize: vertical; }
.recherche { display: flex; gap: .6rem; flex-wrap: wrap; }
.recherche input[type="search"] { flex: 1; min-width: 200px; font-size: 1.05rem; padding: .7rem .9rem; border: 1px solid #D8D3C8; border-radius: var(--r); background: #fff; }
.recherche select { padding: .6rem; border: 1px solid #D8D3C8; border-radius: var(--r); background: #fff; }
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { padding: .7rem .2rem; border-bottom: 1px solid #ECE8DF; display: flex; gap: .8rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.liste li:last-child { border-bottom: 0; }
.liste .titre { font-weight: 500; color: var(--bleu-nuit); }
.liste .meta { font-size: .85rem; color: var(--gris-pierre); }
.cliquable { cursor: pointer; } .cliquable:hover .titre { text-decoration: underline; }
.badge { display: inline-block; font-size: .75rem; padding: .12rem .5rem; border-radius: 999px; background: var(--accent-doux); color: var(--bleu-nuit); white-space: nowrap; }
.badge.ok { background: #E4EBE4; color: #3E5741; } .badge.alerte { background: #F3E6D3; color: #7A4A17; } .badge.erreur { background: #F1DCD8; color: #7B2C22; } .badge.neutre { background: #EDEDEB; color: var(--gris-pierre); }
.tableau { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tableau th, .tableau td { text-align: left; padding: .5rem .5rem; border-bottom: 1px solid #ECE8DF; vertical-align: top; }
.tableau th { color: var(--gris-pierre); font-weight: 500; }
.compteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .7rem; }
.compteur { background: var(--blanc); border: 1px solid #E5E1D8; border-radius: var(--r-l); padding: .8rem 1rem; cursor: pointer; text-align: left; }
.compteur b { display: block; font-family: var(--serif); font-size: 2rem; color: var(--bleu-nuit); line-height: 1; }
.compteur span { font-size: .82rem; color: var(--gris-pierre); }
.vide { color: var(--gris-pierre); padding: 1.2rem; text-align: center; border: 1px dashed #D8D3C8; border-radius: var(--r-l); }
.note { font-size: .85rem; color: var(--gris-pierre); }
.alerte-bloc { border-left: 3px solid var(--alerte); background: #FBF4EA; padding: .6rem .9rem; border-radius: 0 var(--r) var(--r) 0; font-size: .9rem; }
.erreur-bloc { border-left: 3px solid var(--erreur); background: #F8ECEA; padding: .6rem .9rem; border-radius: 0 var(--r) var(--r) 0; font-size: .9rem; }
.chrono { list-style: none; margin: .4rem 0; padding: 0 0 0 1rem; border-left: 1px solid var(--or); }
.chrono li { position: relative; padding: .15rem 0 .5rem .6rem; font-size: .88rem; }
.chrono li::before { content: ''; position: absolute; left: -1.28rem; top: .55rem; width: 7px; height: 7px; border-radius: 50%; background: var(--or); }
.preuves { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; }
.preuve { border: 1px solid #E5E1D8; border-radius: var(--r); overflow: hidden; background: #fff; font-size: .78rem; }
.preuve img, .preuve video { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: #eee; }
.preuve .legende { padding: .4rem .5rem; color: var(--gris-pierre); overflow-wrap: anywhere; } .preuve .badge { white-space: normal; }
.preuve .legende b { color: var(--anthracite); display: block; }
.filigrane { position: relative; } .filigrane::after { content: 'EnSouvenirDe Pro'; position: absolute; right: .4rem; bottom: 2.4rem; font-family: var(--serif); color: rgba(255,255,255,.75); font-size: .8rem; text-shadow: 0 0 3px rgba(0,0,0,.6); }

/* Plan interactif */
.plan-wrap { background: var(--blanc); border: 1px solid #E5E1D8; border-radius: var(--r-l); overflow: hidden; position: relative; }
.plan-outils { position: absolute; top: .5rem; right: .5rem; display: flex; gap: .3rem; z-index: 2; }
.plan-outils button { width: 34px; height: 34px; border-radius: var(--r); border: 1px solid #D8D3C8; background: rgba(255,255,255,.92); cursor: pointer; font-size: 1.1rem; }
.plan-legende { position: absolute; left: .6rem; bottom: .5rem; font-size: .72rem; color: var(--gris-pierre); background: rgba(255,255,255,.9); padding: .3rem .5rem; border-radius: var(--r); display: flex; gap: .7rem; flex-wrap: wrap; }
.plan-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }
.plan-svg { display: block; width: 100%; height: clamp(320px, 60vh, 640px); touch-action: none; background: #FBFAF6; cursor: grab; user-select: none; }
.plan-svg.drag { cursor: grabbing; }
.plan-svg .carre { fill: #F1EEE6; stroke: #C9C3B5; stroke-width: 1; }
.plan-svg .carre-nom { font-family: var(--serif); font-size: 12px; fill: var(--gris-pierre); pointer-events: none; }
.plan-svg .allee { fill: #E9E5DB; stroke: none; }
.plan-svg .allee-nom { font-size: 8px; fill: #9A958A; pointer-events: none; }
.plan-svg .sep { stroke: #A9A296; stroke-width: .7; cursor: pointer; transition: fill .15s; }
.plan-svg .sep.vacant { fill: #FFFFFF; } .plan-svg .sep.occupe { fill: #D7DEE6; } .plan-svg .sep.a_entretenir { fill: #E9E3D2; } .plan-svg .sep.masque { fill: #EFEFEF; stroke-dasharray: 2 2; }
.plan-svg .sep.caveau { stroke-width: 1.3; } .plan-svg .sep.cavurne { rx: 5; ry: 5; }
.plan-svg .sep:hover, .plan-svg .sep.selection { fill: #C6D3E3; stroke: var(--bleu-nuit); }
.plan-svg .sep.deplacable { cursor: move; }
.plan-svg .objet { fill: #D9E4DA; stroke: var(--sauge); stroke-width: 1; }
.plan-svg .objet-nom { font-size: 8px; fill: var(--sauge); pointer-events: none; }
.plan-svg .halo { fill: none; stroke: var(--halo); stroke-width: 3; pointer-events: none; animation: halo 1.4s ease-in-out infinite; }
@keyframes halo { 0%, 100% { opacity: .95; stroke-width: 3; } 50% { opacity: .25; stroke-width: 9; } }
@media (prefers-reduced-motion: reduce) { .plan-svg .halo { animation: none; stroke-width: 5; } }
.plan-svg .gps-point { fill: var(--or); stroke: #fff; stroke-width: 1.5; pointer-events: none; }
.infobulle { position: absolute; pointer-events: none; background: var(--bleu-nuit); color: #fff; font-size: .78rem; padding: .35rem .55rem; border-radius: var(--r); max-width: 240px; z-index: 3; transform: translate(-50%, calc(-100% - 10px)); }
.infobulle::after { content: ''; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--bleu-nuit); border-bottom: 0; }

/* Modales, notifications */
.modal-fond { position: fixed; inset: 0; background: rgba(23,50,77,.45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1rem; }
.modal { background: var(--blanc); border-radius: var(--r-l); max-width: 640px; width: 100%; max-height: 92dvh; overflow: auto; padding: 1.2rem 1.3rem; box-shadow: 0 20px 60px -20px rgba(0,0,0,.4); }
.modal header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.modal .actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1rem; flex-wrap: wrap; }
.toasts { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: .4rem; z-index: 60; width: min(92vw, 420px); }
.toast { background: var(--bleu-nuit); color: #fff; padding: .6rem .9rem; border-radius: var(--r); font-size: .9rem; box-shadow: var(--ombre); }
.toast.erreur { background: var(--erreur); } .toast.ok { background: #4E6A51; }

/* Capture caméra */
.capture-zone { background: #111; border-radius: var(--r); overflow: hidden; aspect-ratio: 4/3; position: relative; }
.capture-zone video, .capture-zone img, .capture-zone canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
.capture-gps { display: flex; align-items: center; gap: .6rem; margin: .7rem 0; font-size: .88rem; }
.capture-gps .point { width: 10px; height: 10px; border-radius: 50%; background: #BBB; flex: none; }
.capture-gps.precis .point { background: #4E6A51; } .capture-gps.approximatif .point { background: var(--alerte); } .capture-gps.insuffisant .point, .capture-gps.indisponible .point { background: var(--erreur); }
.capture-gps.attente .point { animation: pulse 1s infinite; } @keyframes pulse { 50% { opacity: .3; } }

/* Connexion */
.connexion { max-width: 420px; margin: 3rem auto; }
.connexion .logo-centre { display: block; margin: 0 auto 1rem; height: 96px; width: auto; }
.comptes-demo { font-size: .8rem; color: var(--gris-pierre); margin-top: 1rem; }
.comptes-demo code { background: var(--accent-doux); padding: 0 .3rem; border-radius: 3px; }
footer.esd-footer { text-align: center; font-size: .8rem; color: var(--gris-pierre); padding: 2rem 1rem; }
footer.esd-footer .sig { font-family: var(--serif); font-style: italic; font-size: 1rem; }