.territory-page { --atlas-dark: #080b32; --atlas-gold: #e7da85; --atlas-paper: #f5f3e6; }
.atlas-kicker { font-size:var(--fs-xs, 0.875rem); font-weight: 650; letter-spacing: .19em; text-transform: uppercase; }
.atlas-hero { position: relative; isolation: isolate; min-height: 39rem; color: #ffffff; background: #080b32; overflow: clip; }
.atlas-hero-image { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(5, 8, 37, .9),rgba(5, 8, 37, .48) 60%,rgba(5, 8, 37, .12)),url("/assets/mayotte-film-poster.jpg") center 54% / cover; }
.atlas-hero-content { position: relative; padding-top: 2rem; padding-bottom: 5.5rem; }
.atlas-hero .breadcrumb { margin-bottom: 3.8rem; }
.atlas-hero .atlas-kicker { color: var(--atlas-gold); }
.atlas-hero h1 { margin: 1.3rem 0 2.5rem; font-family: var(--display); font-size: clamp(4.5rem,8.8vw,9rem); letter-spacing: -.065em; line-height: .99; font-weight: 700; }
.atlas-hero h1 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.065em; color: #e8dfa1; }
.atlas-hero-bottom { display: flex; align-items: end; gap: 5rem; }
.atlas-hero-bottom p { margin: 0; color: #dde0d8; font-size: .98rem; }
.atlas-explore { display: flex; gap: 2rem; align-items: center; font-size: var(--fs-sm, 0.9375rem); }
.atlas-explore span { display: grid; place-items: center; border: 1px solid #b8bdaf; border-radius: 50%; width: 3rem; height: 3rem; transition: background .2s,color .2s,transform .2s; font-size: 1.2rem; }
.atlas-explore:hover span { background: var(--atlas-gold); color: var(--atlas-dark); transform: translateY(4px); }
.atlas-hero-coordinate { position: absolute; right: 0; top: 46%; padding: 1rem 1.5rem; border-left: 1px solid #fff6; font-size:var(--fs-xs, 0.875rem); line-height: 1.8; letter-spacing: .22em; }
.atlas-photo-credit { position: absolute; bottom: .8rem; right: 1.5rem; margin: 0; font-size:var(--fs-xs, 0.875rem); color: #e4e6e2; }
.atlas-section { background: var(--atlas-dark); color: var(--atlas-paper); padding: var(--section-space) 0; }
.atlas-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; }
.atlas-heading .atlas-kicker { color: var(--atlas-gold); margin-bottom: .8rem; }
.atlas-heading h2 { font-size: clamp(2.4rem,3.5vw,4rem); line-height: 1.1; letter-spacing: -.045em; margin-bottom: 0; }
.atlas-heading > p { margin: 0; font-size: var(--fs-sm, 0.9375rem); color: #cacec3; }
.atlas-tabs { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); border-top: 1px solid #c5cabb40; border-bottom: 1px solid #c5cabb40; position: sticky; top: 5.35rem; z-index: 3; background: var(--atlas-dark); }
.atlas-tab { display: grid; grid-template-columns: 1fr auto; position: relative; padding: 1.3rem 1.2rem 1.5rem; border-right: 1px solid #c5cabb40; transition: background .25s,color .25s; gap: .5rem; }
.atlas-tab:last-child { border-right: 0; }
.atlas-tab > span:first-child { grid-column: 1/-1; font-size:var(--fs-xs, 0.875rem); font-variant-numeric: tabular-nums; color: #b3b8a9; }
.atlas-tab strong { font-weight: 550; font-size: 1rem; white-space: nowrap; }
.atlas-tab .tab-arrow { opacity: .3; transition: transform .25s; }
.atlas-tab:hover { background: #ffffff0c; }
.atlas-tab:hover .tab-arrow { transform: translate(2px,-2px); opacity: 1; }
.atlas-tab[aria-current="true"] { background: var(--atlas-gold); color: var(--atlas-dark); }
.atlas-tab[aria-current="true"] > span { color: var(--atlas-dark); opacity: 1; }
.atlas-tab:focus-visible { z-index: 2; outline-offset: -5px; outline-color: #ffffff; }
.atlas-tab[aria-current="true"]:focus-visible { outline-color: var(--atlas-dark); }
.atlas-workspace { display: grid; grid-template-columns: 1fr 1fr; align-items: start; border: 1px solid #c5cabb40; border-top: 0; }
.atlas-map { min-width: 0; position: sticky; top: 6rem; overflow: hidden; background: radial-gradient(ellipse at 50% 44%,#3a4725 0%,#0b0e35 68%); }
.atlas-map-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.3rem 1.5rem; }
.atlas-map-top > span { font-size:var(--fs-xs, 0.875rem); letter-spacing: .14em; color: #bec4b3; }
.atlas-motion { background: none; color: #d0d5c9; padding: .4rem .1rem; border: 0; border-bottom: 1px solid #879078; cursor: pointer; font-size:var(--fs-xs, 0.875rem); min-height: 2.75rem; }
.atlas-chart { width: 100%; max-height: 40rem; margin-inline: auto; }
.point-halo { fill: #e7da85; opacity: 0; transition: opacity .3s; }
.point-dot { fill: #0e1139; stroke: #c7cebc; stroke-width: 1.2; transition: fill .25s; }
.point-number { text-anchor: middle; fill: #f1eed9; font-size: 12px; font-family: var(--body); pointer-events: none; }
.point-label { fill: #f1eed9; font-size: 15px; font-weight: 600; paint-order: stroke; stroke: #394329; stroke-width: 5px; stroke-linejoin: round; }
.atlas-point:hover .point-halo,.atlas-point:focus-visible .point-halo { opacity: .17; }
.atlas-point[aria-current="true"] .point-halo { opacity: .23; }
.atlas-point[aria-current="true"] .point-dot { fill: #e7da85; stroke: #e7da85; }
.atlas-point[aria-current="true"] .point-number { fill: #090c30; font-weight: 750; }
.atlas-point:focus-visible { outline: none; }
.atlas-point:focus-visible .point-halo { fill: none; stroke: #ffffff; stroke-width: 3; opacity: 1; }
.atlas-compass { fill: #cbd0c4; stroke: #cbd0c4; stroke-width: 1; }
.atlas-compass text { text-anchor: middle; stroke: none; font-size: 10px; }
.atlas-map-bottom { padding: 1rem 1.5rem 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; }
.atlas-map-bottom p { font-size:var(--fs-xs, 0.875rem); margin: 0; }
.atlas-map-bottom small { font-size:var(--fs-xs, 0.875rem); color: #b3b9a9; }
.atlas-live-dot { display: inline-block; width: .4rem; height: .4rem; border-radius: 50%; margin-right: .5rem; background: var(--atlas-gold); }
.atlas-dossier { background: var(--atlas-paper); color: var(--atlas-dark); min-width: 0; min-height: 48rem; scroll-margin-top: 6rem; }
.atlas-dossier-toolbar { display: flex; justify-content: space-between; gap: 1rem; padding: 1.2rem 2.3rem; border-bottom: 1px solid #090c3024; align-items: center; }
.atlas-dossier-toolbar > span { font-size:var(--fs-xs, 0.875rem); letter-spacing: .08em; }
.atlas-pager { display: flex; align-items: center; gap: .9rem; }
.atlas-pager[hidden],.village-panel[hidden] { display: none; }
.atlas-pager button { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid #090c3033; background: transparent; cursor: pointer; transition: background .2s,color .2s; }
.atlas-pager button:hover { background: var(--atlas-dark); color: var(--atlas-paper); }
.atlas-pager > span { font-size:var(--fs-xs, 0.875rem); white-space: nowrap; font-variant-numeric: tabular-nums; }
.village-panel { padding: 2.5rem 2.3rem 2rem; }
.village-panel-head { position: relative; padding-top: .75rem; }
.village-panel-head .atlas-kicker { position: relative; z-index: 1; font-size:var(--fs-xs, 0.875rem); color: #585e4e; max-width: 75%; }
.village-index { position: absolute; right: -.2rem; top: -1.8rem; font-size: 8.5rem; line-height: 1; font-family: var(--serif); color: #090c330b; letter-spacing: -.09em; pointer-events: none; }
.village-panel h3 { position: relative; font-size: clamp(2.6rem,4.2vw,4.8rem); letter-spacing: -.055em; line-height: 1.08; margin: 1.3rem 0; }
.village-description { font-size: var(--fs-sm, 0.9375rem); line-height: 1.85; max-width: 48ch; color: #5a6051; }
.atlas-text-link { display: inline-flex; gap: 1.5rem; align-items: center; font-size: var(--fs-xs, 0.875rem); font-weight: 650; border-bottom: 1px solid #909587; padding-bottom: .45rem; }
.atlas-text-link span { font-size: 1.2rem; transition: transform .2s; }
.atlas-text-link:hover span { transform: translate(3px,-3px); }
.village-people { margin-top: 2.3rem; border-top: 1px solid #090c3033; padding-top: 1.2rem; }
.people-heading { margin-bottom: 1.1rem; display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.people-heading h4 { font-weight: 650; font-size: var(--fs-sm, 0.9375rem); margin: 0; }
.people-heading > span { font-family: var(--serif); font-size: 1.2rem; }
.people-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 1rem; list-style: none; padding: 0; margin: 0; }
.people-list li { display: flex; align-items: center; gap: .65rem; padding: .65rem 0; min-width: 0; border-bottom: 1px solid #090c3015; }
.people-list li > span:last-child { font-size: var(--fs-sm, 0.9375rem); overflow-wrap: anywhere; }
.person-monogram { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; flex: 0 0 auto; border-radius: 50%; background: #dfe2da; color: #535b46; font-size:var(--fs-xs, 0.875rem); font-weight: 650; }
.atlas-editorial-note { display: flex; gap: 1rem; align-items: start; max-width: 70rem; margin-top: 1.5rem; color: #cacdc4; }
.atlas-editorial-note > span { font-family: var(--serif); flex: 0 0 auto; border: 1px solid #a1a797; border-radius: 50%; width: 1.3rem; height: 1.3rem; text-align: center; line-height: 1.2rem; }
.atlas-editorial-note p { font-size:var(--fs-xs, 0.875rem); margin: 0; }
.atlas-editorial-note strong { color: #eeebd8; font-weight: 600; }
.atlas-services { padding: var(--section-space) 0; background: var(--atlas-paper); }
.atlas-services > .container { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
.atlas-services h2 { font-size: clamp(2.5rem,4vw,4rem); line-height: 1.12; letter-spacing: -.045em; margin-bottom: 0; }
.atlas-services h2 em { font-family: var(--serif); font-weight: 400; color: #666d5a; }
.atlas-services nav a { display: flex; gap: 1.5rem; align-items: center; padding: 1.2rem 0; border-bottom: 1px solid #090c3033; }
.atlas-services nav a:first-child { padding-top: 0; }
.atlas-services nav a > span:first-child { font-size:var(--fs-xs, 0.875rem); color: #575a52; }
.atlas-services nav div { flex: 1; }
.atlas-services nav strong,.atlas-services nav small { display: block; }
.atlas-services nav strong { font-size: 1.1rem; font-weight: 600; }
.atlas-services nav small { font-size: var(--fs-xs, 0.875rem); color: #575a52; margin-top: .3rem; }
.atlas-services nav a > span:last-child { font-size: 1.4rem; transition: transform .2s; }
.atlas-services nav a:hover > span:last-child { transform: translate(4px,-4px); }
@media(min-width:1500px) { .atlas-chart { max-height: 45rem; } }
@media(max-width:1100px) {
  .atlas-hero-coordinate { display: none; }
  .atlas-tab { padding: 1rem .7rem; }
  .atlas-tab strong { font-size: var(--fs-sm, 0.9375rem); }
  .village-panel { padding: 2rem 1.4rem; }
  .atlas-dossier-toolbar { padding: 1rem 1.4rem; }
  .atlas-dossier-toolbar > span { max-width: 7rem; }
  .people-list { grid-template-columns: 1fr; }
  .atlas-dossier { min-height: 51rem; }
}
@media(max-width:760px) {
  .atlas-hero { min-height: auto; }
  .atlas-hero-content { padding-top: 1.5rem; padding-bottom: 4.5rem; }
  .atlas-hero .breadcrumb { margin-bottom: 3rem; }
  .atlas-hero h1 { font-size: clamp(3.4rem,12.5vw,5.5rem); margin-bottom: 2rem; }
  .atlas-hero-image { background-position: 65% center; }
  .atlas-hero-bottom { align-items: start; flex-direction: column; gap: 1.7rem; }
  .atlas-hero-bottom p { font-size: var(--fs-sm, 0.9375rem); }
  .atlas-explore { gap: 1.5rem; }
  .atlas-photo-credit { font-size:var(--fs-xs, 0.875rem); right: 1rem; }
  .atlas-section { padding: var(--section-space) 0; }
  .atlas-heading { display: block; margin-bottom: 1.7rem; }
  .atlas-heading h2 { font-size: 2.4rem; }
  .atlas-heading > p { margin-top: 1rem; font-size: var(--fs-xs, 0.875rem); }
  .atlas-tabs { grid-template-columns: repeat(3,minmax(0,1fr)); top: 4.625rem; }
  .atlas-tab { padding: .85rem .7rem; gap: .25rem; border-bottom: 1px solid #c5cabb40; }
  .atlas-tab strong { font-size: var(--fs-xs, 0.875rem); }
  .atlas-tab:nth-child(3n) { border-right: 0; }
  .atlas-tab .tab-arrow { display: none; }
  .atlas-tab > span:first-child { font-size:var(--fs-xs, 0.875rem); }
  .atlas-workspace { grid-template-columns: 1fr; }
  .atlas-map { position: relative; top: auto; }
  .atlas-chart { max-height: 28rem; }
  .atlas-map-top { padding: .6rem 1rem; gap: .5rem; }
  .atlas-map-top > span { font-size:var(--fs-xs, 0.875rem); }
  .atlas-map-bottom { padding: .5rem 1rem 1.1rem; }
  .atlas-map-bottom p { font-size:var(--fs-xs, 0.875rem); }
  .atlas-dossier { min-height: 0; scroll-margin-top: 14rem; }
  .atlas-dossier-toolbar { padding: .9rem 1.2rem; }
  .village-panel { padding: 1.8rem 1.2rem; }
  .village-panel h3 { font-size: 3.3rem; }
  .village-description { font-size: var(--fs-sm, 0.9375rem); }
  .people-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 .8rem; }
  .people-list li { gap: .45rem; }
  .person-monogram { width: 1.8rem; height: 1.8rem; font-size:var(--fs-xs, 0.875rem); }
  .people-list li > span:last-child { font-size: var(--fs-sm, 0.9375rem); }
  .atlas-services { padding: var(--section-space) 0; }
  .atlas-services > .container { grid-template-columns: 1fr; gap: 2rem; }
}
@media(max-width:360px) {
  .village-panel h3 { font-size: 2.7rem; }
  .people-list { grid-template-columns: 1fr; }
  .atlas-pager { gap: .45rem; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .territory-page *, .territory-page *::before, .territory-page *::after { transition: none !important; animation: none !important; }
}
.territory-page.motion-reduced *, .territory-page.motion-reduced *::before { transition: none !important; }
@media print {
  .atlas-hero-image,.atlas-map,.atlas-tabs,.atlas-pager,.atlas-motion,.atlas-services { display: none !important; }
  .atlas-hero,.atlas-section,.atlas-dossier { background: white; color: #111333; }
  .atlas-workspace { display: block; }
  .village-panel[hidden] { display: block !important; }
  .village-panel { break-inside: avoid; }
  .atlas-hero h1 { font-size: 3rem; }
}

/* La carte est réduite à 57 % sur mobile : les points n'y offraient que 40 px de cible.
   Ce disque transparent porte la zone de clic sans rien changer à l'image. */
.point-hit { fill: transparent; pointer-events: all; }
@media (max-width: 760px) {
  /* Sans cela, les noms des villages tombaient à 8,5 px une fois la carte réduite. */
  .point-label { font-size: 21px; stroke-width: 6px; }
  .point-number { font-size: 17px; }
  .point-dot { r: 18px; }
  .point-halo { r: 34px; }
  .point-hit { r: 26px; }
  .atlas-compass text { font-size: 21px; }
  .atlas-scale text { font-size: 15px; }
}

/* Carte réelle de la commune et de ses six villages (scripts/carte-territoire.mjs) */
.atlas-shore { fill: #4f5a3b; stroke: #d8cf8f; stroke-width: 1.4; stroke-linejoin: round; }
.atlas-relief { opacity: .9; pointer-events: none; }
.atlas-built path { fill: #f3e6a6; fill-opacity: .4; stroke: #f3e6a6; stroke-opacity: .65; stroke-width: .6; }
.atlas-scale path { fill: none; stroke: #cbd0c4; stroke-width: 1.2; }
.atlas-scale text { fill: #cbd0c4; font-size: 10px; }