/* Couleurs des îles : l'identité entoure le plan, sa légende métier reste stable. */
:root, [data-charte] { --ile-fonce:#203246; --ile-pale:#F4F0E8; --ile-fond:#F4F0E8; --ile-second:#B38B55; --ile-vegetal:#7E927D; --ile-bord:#D8D3C8; }
body[data-app] { --bleu-nuit:#203246; --accent:#203246; --accent-doux:#F4F0E8; --ivoire:#F4F0E8; --or:#B38B55; --sauge:#7E927D; --anthracite:#2B2B2B; --gris-pierre:#56615b; --r:10px; --r-l:20px; color:var(--anthracite); background:var(--ivoire); }
.esd-header { border-top:5px solid var(--ile-second); border-bottom-color:var(--ile-bord); background:#ffffffed; box-shadow:0 4px 24px #124b4510; }
.esd-header nav button { background:var(--ile-pale); color:var(--ile-fonce); border-color:var(--ile-bord); border-radius:12px; }
.esd-header nav button:hover { border-color:var(--ile-fonce); background:var(--ile-fond); }
.esd-header nav button[aria-current="page"] { background:var(--ile-fonce); border-color:var(--ile-fonce); box-shadow:0 3px 0 var(--ile-second); }
.esd-header nav button:focus-visible,:focus-visible { outline:3px solid var(--ile-fonce); outline-offset:3px; }
.hero { gap:2.6rem; padding-top:2.6rem; }
.hero h1 { font-size:clamp(2.7rem,5vw,4.2rem); letter-spacing:-.035em; }
.hero .signature { color:var(--ile-vegetal); }
.hero figure { border-radius:75px 22px 75px 22px; border:7px solid #fff; box-shadow:12px 12px 0 var(--ile-pale),-8px -8px 0 var(--ile-second); }
.porte { border-color:var(--ile-bord); border-top:4px solid var(--ile-vegetal); padding:1.15rem; transition:transform .15s,box-shadow .15s; }
.porte:nth-child(2) { border-top-color:var(--ile-second); }
.porte:hover { transform:translateY(-3px); border-color:var(--ile-fonce); box-shadow:0 10px 24px #184d4219; }
.carte,.compteur { border-color:var(--ile-bord); box-shadow:0 6px 24px #184d4208; }
.verbes { color:var(--ile-vegetal); }
.ligne-memoire path { stroke:var(--ile-second); stroke-width:3; }
.connexion-paysage { border-radius:28px 10px 28px 10px; border-bottom:5px solid var(--ile-second); }
.btn.or { color:#fff; }
.plan-document .source-controls,.source-actions button { background:var(--ile-pale); }
.source-actions button { border-color:var(--ile-bord); color:var(--ile-fonce); }
.source-status { background:var(--ile-fond); color:#344b41; }
.plan-wrap { border-color:var(--ile-bord); }
footer { border-top:2px solid var(--ile-bord); }
.charte-choix { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin:1rem 0; }
.charte-option { display:block; padding:1rem; border:2px solid var(--ile-bord); border-radius:14px; background:var(--ile-fond); cursor:pointer; color:#273a35; }
.charte-option:has(input:checked) { border-color:var(--ile-fonce); box-shadow:0 0 0 2px var(--ile-pale); }
.charte-option strong { display:block; margin:.3rem 0; color:var(--ile-fonce); }
.charte-nuancier { display:flex; gap:.3rem; margin:.6rem 0; }
.charte-nuancier i { width:27px; height:27px; border-radius:50%; background:var(--ile-fonce); }
.charte-nuancier i:nth-child(2) { background:var(--ile-second); }
.charte-nuancier i:nth-child(3) { background:var(--ile-vegetal); }
.charte-nuancier i:nth-child(4) { background:var(--ile-pale); border:1px solid var(--ile-bord); }
body[data-app="admin"] button:not(.secondaire):not(.discret):not(.danger) { background:var(--ile-fonce); border-color:var(--ile-fonce); color:white; border-radius:10px; }
body[data-app="admin"] section,body[data-app="admin"] .admin-accueil { border-color:var(--ile-bord); }
@media(max-width:600px) { .hero { gap:1.5rem; padding-top:.6rem; } .hero figure { margin:8px; border-radius:42px 16px; } .charte-choix { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .porte { transition:none; } .porte:hover { transform:none; } }

/* Refonte tropicale et maritime : volumes lagon, feuillage et rivage. */
body[data-app] { --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; background:var(--ile-fond); }
.esd-header { background:var(--ile-fonce); border-top:0; border-bottom:4px solid var(--ile-second); padding:1rem 1.4rem; }
.esd-header .esd-wordmark,.esd-header .user,.esd-header .qualif,.esd-header>strong,.esd-header nav a { color:#fff; }
.esd-header .esd-wordmark { font-family:var(--sans); font-weight:600; font-size:1.18rem; }
.esd-header .esd-logo { background:#fff; border-radius:50%; padding:4px; height:46px; }
.esd-header nav button { color:#fff; background:#ffffff12; border-color:#ffffff66; }
.esd-header nav button:hover { background:#ffffff28; border-color:#fff; }
.esd-header nav button[aria-current=page] { background:var(--ile-pale); color:var(--ile-fonce); border-color:var(--ile-pale); box-shadow:0 3px 0 var(--ile-second); }
.esd-header .btn { color:var(--ile-fonce); background:#fff; border-color:#fff; }
.esd-header :focus-visible { outline-color:#fff; }
main { max-width:1280px; padding-top:1.5rem; }
h1,h2 { font-family:var(--sans); letter-spacing:-.035em; font-weight:600; }
.hero { position:relative; isolation:isolate; overflow:hidden; grid-template-columns:1.12fr .88fr; background:linear-gradient(125deg,var(--ile-fonce) 0%,var(--ile-fonce) 42%,var(--ile-vegetal) 100%); border-radius:28px 28px 0 0; padding:3.2rem 2.4rem 6rem; gap:2.8rem; color:#fff; }
.hero::before { content:''; position:absolute; inset:0; z-index:-1; opacity:.23; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 600'%3E%3Cg fill='none' stroke='%23d2f3cf' stroke-width='3'%3E%3Cpath d='M1010 0Q850 75 755 245M920 30Q815 -10 740 13M899 52Q789 12 691 65M876 77Q764 42 674 116M854 105Q766 86 704 166M828 139Q777 130 747 201M919 34Q947 113 910 201M896 61Q917 140 870 225M873 89Q883 158 831 247M846 121Q853 194 789 277'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2' opacity='.4'%3E%3Cpath d='M-80 460Q90 370 250 455T580 455T1090 450M-80 483Q90 393 250 478T580 478T1090 473M-80 506Q90 416 250 501T580 501T1090 496'/%3E%3C/g%3E%3C/svg%3E");background-size:cover;background-position:center; }
.hero::after { content:''; position:absolute; bottom:-1px; left:0; width:100%; height:65px; background:var(--ile-fond); clip-path:polygon(0 47%,6% 57%,12% 63%,18% 64%,24% 59%,30% 47%,36% 34%,42% 23%,48% 20%,54% 23%,60% 34%,66% 47%,72% 59%,78% 64%,84% 63%,90% 55%,96% 44%,100% 36%,100% 100%,0 100%); }
.hero h1 { color:#fff; font-size:clamp(2.2rem,4.4vw,3.7rem); line-height:1.1; }
.hero .signature { color:#fff; font-size:1.5rem; margin:1rem 0; }
.hero p { color:#fff; }
.hero .verbes { color:#fff; font-family:var(--sans); font-size:.88rem; margin-top:1.3rem; }
.hero .verbes i { color:var(--ile-second); }
.hero figure { border-radius:160px 160px 24px 24px; aspect-ratio:4/4.3; border:6px solid #fff; box-shadow:12px 12px 0 var(--ile-second); margin:0 12px 10px 0; }
.hero .portes { gap:.8rem; margin-top:1.4rem; }
.hero .porte { padding:1rem; border:0; border-radius:14px; border-bottom:5px solid var(--ile-second); box-shadow:0 8px 22px #0002; }
.hero .porte:nth-child(2) { background:var(--ile-pale); }
.hero .porte strong { font-family:var(--sans); font-size:1rem; line-height:1.4; color:var(--ile-fonce); }
.hero .porte small { display:block; margin-top:.45rem; color:#445850; font-size:.78rem; }
.hero-kicker { display:inline-block; font-size:.73rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1.1rem; padding:.45rem .75rem; border:1px solid #ffffff77; border-radius:999px; }
.hero~.ligne-memoire { display:none; }
.hero~.grille { margin-top:1rem; }
.hero~.grille .carte { padding:1.5rem; border:0; border-left:5px solid var(--ile-second); background:var(--ile-pale); }
.hero~.grille h3 { font-family:var(--sans); font-size:1.05rem; margin-bottom:.7rem; }
.carte { border-radius:16px; }
.connexion-paysage { border:5px solid var(--ile-pale); border-bottom:8px solid var(--ile-second); }
.admin-accueil { padding:1.5rem!important; background:var(--ile-pale); border-radius:24px; border-bottom:6px solid var(--ile-second); }
@media(max-width:1000px) { .hero{gap:1.8rem;padding:2rem 1.5rem 5rem}.hero .portes{grid-template-columns:1fr}.hero h1{font-size:2.5rem} }
@media(max-width:820px) { .hero{grid-template-columns:1fr}.hero figure{max-height:420px;aspect-ratio:4/3;border-radius:90px 90px 20px 20px}.hero .portes{grid-template-columns:1fr 1fr} }
@media(max-width:500px) { main{padding-left:.8rem;padding-right:.8rem}.esd-header{padding:.7rem}.hero{padding:1.6rem 1.1rem 4.5rem;border-radius:20px 20px 0 0}.hero h1{font-size:2rem}.hero .portes{grid-template-columns:1fr}.hero .signature{font-size:1.25rem}.hero figure{box-shadow:7px 7px 0 var(--ile-second)} }

/* Fond réservé aux comptes de la collectivité des Abymes. */
body[data-app="collectivite"][data-fond="abymes"] {
  background: #e9e4da url("./cimetiere-abymes-marbre-sombre.png") center / cover fixed no-repeat;
}
body[data-app="collectivite"][data-fond="abymes"] main {
  margin-top: 1.5rem; margin-bottom: 1.5rem;
  background: rgba(250,248,243,.96); border-radius: 24px;
  box-shadow: 0 12px 48px #15251e26;
}
body[data-app="collectivite"][data-fond="abymes"] footer.esd-footer { background: #faf8f3; }
.espace-deplacement { display:none; }
/* Fond du cimetière sélectionné et fenêtre déplaçable après connexion. */
body[data-fond="gosier"] { background:#e9e4da url('./cimetieres/gosier-mer-lambis-panneau.png') center / cover fixed no-repeat; }
body[data-fond="formation"] { background:#e9e4da url('./cimetieres/formation-pedagogique.png') center / cover fixed no-repeat; }
body[data-fond="abymes"] { background:#e9e4da url('./cimetiere-abymes-marbre-sombre.png') center / cover fixed no-repeat; }
body[data-fond] { isolation:isolate; }
body[data-fond]::before { content:'';position:fixed;inset:0;background:inherit;background-attachment:scroll;pointer-events:none;z-index:-1; }
body[data-fond] main { width:calc(100% - 3rem);background:rgba(250,248,243,.95);border-radius:20px;margin-top:1.5rem;margin-bottom:1.5rem;box-shadow:0 12px 48px #15251e26; }
body[data-espace-deplacable="oui"] { overflow-x:clip; }
body[data-espace-deplacable="oui"] main { position:relative;transform:translate(var(--espace-x,0px),var(--espace-y,0px)); }
body[data-espace-deplacable="oui"] .espace-deplacement { display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem;margin-bottom:1rem;border-bottom:1px solid var(--ile-bord); }
.espace-poignee { cursor:grab;touch-action:none;user-select:none;background:transparent;border:1px dashed var(--ile-bord);border-radius:8px;padding:.6rem .8rem;color:var(--ile-fonce);font:inherit; }
.espace-poignee.en-deplacement { cursor:grabbing; }
.espace-poignee:focus-visible { outline:3px solid #4169E1;outline-offset:3px; }
@media(max-width:820px) {
 body[data-fond] main { width:calc(100% - 3rem); }
 body[data-fond] { background-attachment:scroll; }
 body[data-espace-deplacable="oui"] .espace-poignee { font-size:.85rem; }
}
@media print {
 body[data-fond] { background:white!important; }
 body[data-fond] main { transform:none!important;box-shadow:none;background:white; }
}
@media(min-width:821px) {
 body[data-app="collectivite"][data-fond="abymes"] { overflow-x:clip; }
 body[data-app="collectivite"][data-fond="abymes"] main { position:relative; transform:translate(var(--espace-x,0px),var(--espace-y,0px)); }
 body[data-app="collectivite"][data-fond="abymes"] .espace-deplacement { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:0 0 .8rem; margin-bottom:1rem; border-bottom:1px solid var(--ile-bord); }
 .espace-poignee { cursor:grab; touch-action:none; user-select:none; background:transparent; border:1px dashed var(--ile-bord); border-radius:8px; padding:.6rem .8rem; color:var(--ile-fonce); font:inherit; }
 .espace-poignee.en-deplacement { cursor:grabbing; }
 .espace-poignee:focus-visible { outline:3px solid #4169E1; outline-offset:3px; }
}
@media(max-width:820px) {
  body[data-app="collectivite"][data-fond="abymes"] { background-attachment: scroll; }
  body[data-app="collectivite"][data-fond="abymes"] main { margin-top:.8rem; border-radius:16px; }
}
@media print {
  body[data-app="collectivite"][data-fond="abymes"] { background:white; }
  body[data-app="collectivite"][data-fond="abymes"] main { background:white; box-shadow:none; transform:none; }
  .espace-deplacement { display:none!important; }
}

/* Contexte unique et espace de travail mobile. */
body[data-fond="morne"] { background:#e9e4da url('./cimetieres/morne-a-leau-colline-panneau.png') center / cover fixed no-repeat; }
.cimetiere-selectionne .esd-header nav { display:none!important; }
.navigation-cimetiere { display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem; }
.navigation-cimetiere strong { margin-right:auto; }
body[data-espace-deplacable="oui"] main.espace-replie { flex:none;align-self:flex-start;width:max-content;max-width:calc(100% - 2rem);min-height:0; }
body[data-espace-deplacable="oui"] main.espace-replie > :not(.espace-deplacement) { display:none!important; }
body[data-espace-deplacable="oui"] main.espace-replie .espace-deplacement { flex-wrap:wrap;margin:0;border:0; }
@media print { main.espace-replie > :not(.espace-deplacement) { display:revert!important; } .espace-deplacement { display:none!important; } }

body[data-espace-deplacable="oui"] .espace-deplacement { flex-wrap:wrap; }