:root {
  --ink: #eaf4ee;
  --muted: #b7c5bf;
  --mist: #78918a;
  --night: #061114;
  --night-deep: #030a0d;
  --line: rgba(223, 244, 235, .18);
  --paper: rgba(9, 28, 29, .78);
  --lime: #b9fb68;
  --cyan: #8be5e1;
  --max: 76rem;
  --reading: clamp(1.1rem, 1.18vw, 1.27rem);
  --small: clamp(.86rem, .98vw, 1rem);
  --space: clamp(1.25rem, 2.8vw, 2.75rem);
  --space-xl: clamp(3.5rem, 9vw, 8rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 7.5rem; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--night-deep); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.75; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 72%, transparent); text-decoration-thickness: 1px; text-underline-offset: .24em; }
a:hover, a:focus-visible { color: var(--accent, var(--lime)); }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--accent, var(--lime)); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 100; top: .75rem; left: .75rem; transform: translateY(-200%); padding: .6rem .85rem; background: var(--lime); color: #07110a; font-weight: 800; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: sticky; z-index: 30; top: 0; border-bottom: 1px solid rgba(226, 244, 236, .12); background: rgba(3, 12, 15, .9); backdrop-filter: blur(14px); }
.header-inner { width: min(var(--max), calc(100% - 2.4rem)); min-height: 4.6rem; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); text-decoration: none; font-size: .78rem; font-weight: 900; letter-spacing: .13em; line-height: 1.1; text-transform: uppercase; }
.brand-mark { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border: 1px solid var(--accent, var(--lime)); border-radius: 50%; color: var(--accent, var(--lime)); font-size: 1rem; }
.menu-toggle { display: none; border: 1px solid var(--line); border-radius: .15rem; padding: .48rem .65rem; color: var(--ink); background: transparent; font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.site-nav { display: flex; align-items: center; gap: .25rem; }
.site-nav a { padding: .5rem .62rem; color: var(--muted); text-decoration: none; font-size: .78rem; font-weight: 800; letter-spacing: .085em; text-transform: uppercase; }
.site-nav a[aria-current="page"], .site-nav a:hover, .site-nav a:focus-visible { color: #07110a; background: var(--accent, var(--lime)); }

.hero { position: relative; isolation: isolate; min-height: min(44rem, 80svh); overflow: clip; display: grid; align-items: end; border-bottom: 1px solid var(--line); background: #071317; }
.hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(3, 11, 14, .95) 0%, rgba(3, 11, 14, .62) 43%, rgba(3, 11, 14, .26)), linear-gradient(0deg, rgba(3, 11, 14, .92) 0%, transparent 55%), var(--hero-image) center / cover no-repeat; }
.hero::after { content: ""; position: absolute; z-index: -1; right: 6vw; top: 14%; width: min(38vw, 33rem); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--accent, var(--lime)) 54%, transparent); border-radius: 50%; opacity: .7; }
.hero-inner { width: min(var(--max), calc(100% - 2.4rem)); margin: 0 auto; padding: clamp(6rem, 13vw, 11rem) 0 clamp(3.5rem, 8vw, 7rem); }
.kicker { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.6rem; color: var(--accent, var(--lime)); font-size: .78rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.kicker::before { content: ""; width: 1.6rem; height: 1px; background: currentColor; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -.047em; text-wrap: balance; }
h1 { max-width: 18ch; font-size: clamp(3rem, 7.1vw, 6.7rem); line-height: .99; }
h2 { max-width: 24ch; font-size: clamp(2.05rem, 4.4vw, 4rem); line-height: 1.03; }
h3 { font-size: clamp(1.4rem, 2.3vw, 2rem); line-height: 1.13; }
h4 { font-size: 1.2rem; line-height: 1.25; }
.hero-copy { max-width: 38rem; margin: 1.65rem 0 0; color: #d5e0dc; font-size: var(--reading); line-height: 1.72; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.15rem; padding: .75rem 1.05rem; border: 1px solid var(--accent, var(--lime)); color: #07110a; background: var(--accent, var(--lime)); font-size: .9rem; font-weight: 900; letter-spacing: .075em; text-align: center; text-decoration: none; text-transform: uppercase; }
.button::after { content: "→"; font-size: 1.25rem; line-height: 1; }
.button--quiet { color: var(--ink); background: transparent; border-color: var(--line); }
.button--quiet::after { content: "↗"; }

main { overflow: hidden; background: radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--accent, var(--lime)) 8%, transparent), transparent 28rem), var(--night); }
.section { width: min(var(--max), calc(100% - 2.4rem)); margin: 0 auto; padding: var(--space-xl) 0; }
.section + .section { border-top: 1px solid var(--line); }
.section-label { margin: 0 0 1.5rem; color: var(--accent, var(--lime)); font-size: .8rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.section-lead { max-width: 61rem; margin: 1.45rem 0 0; color: #d3dfda; font-size: var(--reading); line-height: 1.8; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, .8fr); gap: clamp(2rem, 8vw, 8rem); align-items: start; }
.prose > * + * { margin-top: 1.15rem; }
.prose p, .prose li, .prose blockquote { font-size: var(--reading); line-height: 1.8; }
.prose ul { padding-left: 1.2rem; }
.prose blockquote { margin: 0; padding: 1.1rem 1.2rem; border-left: 2px solid var(--accent, var(--lime)); color: #e2ece7; background: rgba(238, 255, 246, .035); }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2rem, 5vw, 4.5rem); }
.cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { min-height: 100%; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); background: linear-gradient(135deg, rgba(234, 247, 240, .065), rgba(234, 247, 240, .018)); }
.card-number { display: block; margin-bottom: 2.4rem; color: var(--accent, var(--lime)); font-size: .8rem; font-weight: 900; letter-spacing: .1em; }
.card h3 { max-width: 14ch; }
.card p { margin: 1rem 0 0; color: var(--muted); font-size: var(--reading); line-height: 1.7; }
.card a { display: inline-flex; gap: .4rem; margin-top: 1.4rem; color: var(--accent, var(--lime)); font-size: .92rem; font-weight: 800; }
.card a::after { content: "↗"; }

.journey { border: 1px solid color-mix(in srgb, var(--accent, var(--lime)) 36%, transparent); background: color-mix(in srgb, var(--accent, var(--lime)) 7%, rgba(5, 18, 20, .92)); }
.journey-head { padding: clamp(1.4rem, 3vw, 2.4rem); border-bottom: 1px solid var(--line); }
.journey-head p { max-width: 58rem; margin: 1.1rem 0 0; color: var(--muted); font-size: var(--reading); }
.station-nav { display: flex; gap: .55rem; overflow-x: auto; padding: .8rem clamp(1.4rem, 3vw, 2.4rem); border-bottom: 1px solid var(--line); scrollbar-color: var(--accent, var(--lime)) transparent; }
.station-nav a { flex: 0 0 auto; padding: .55rem .7rem; border: 1px solid rgba(236, 248, 242, .22); color: var(--ink); font-size: .86rem; font-weight: 800; line-height: 1.2; text-decoration: none; }
.station-nav a:hover, .station-nav a:focus-visible { border-color: var(--accent, var(--lime)); color: var(--accent, var(--lime)); }
.station { scroll-margin-top: 7.5rem; padding: clamp(1.45rem, 3.4vw, 2.7rem); border-bottom: 1px solid var(--line); }
.station:last-child { border-bottom: 0; }
.station-head { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.station-index { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--accent, var(--lime)); color: var(--accent, var(--lime)); font-size: .82rem; font-weight: 900; }
.station-copy { margin: 1rem 0 0; color: var(--muted); font-size: var(--reading); line-height: 1.78; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .8rem; margin-top: 1.6rem; }
.choice { width: 100%; min-height: 6rem; padding: 1.1rem; border: 1px solid rgba(238, 249, 243, .25); color: var(--ink); background: rgba(3, 14, 16, .55); cursor: pointer; text-align: left; }
.choice:hover, .choice:focus-visible, .choice[aria-pressed="true"] { border-color: var(--accent, var(--lime)); background: color-mix(in srgb, var(--accent, var(--lime)) 13%, rgba(3, 14, 16, .6)); }
.choice strong { display: block; font-size: 1.08rem; line-height: 1.25; text-decoration: underline dotted color-mix(in srgb, var(--accent, var(--lime)) 80%, transparent); text-underline-offset: .23em; }
.choice span { display: block; margin-top: .55rem; color: var(--muted); font-size: .94rem; line-height: 1.45; }
.choice span::after { content: " ↗"; color: var(--accent, var(--lime)); }
.response { display: none; max-width: 56rem; margin-top: 1.25rem; padding: 1.15rem 1.2rem; border-left: 3px solid var(--accent, var(--lime)); background: rgba(1, 8, 10, .35); color: #dce9e3; font-size: var(--reading); line-height: 1.75; }
.response.is-open { display: block; animation: reveal .28s ease-out; }
.response strong { color: var(--accent, var(--lime)); }
@keyframes reveal { from { opacity: .1; transform: translateY(.4rem); } to { opacity: 1; transform: translateY(0); } }
.response[tabindex="-1"] { outline: 0; }
.media-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-top: 1.8rem; }
.media-card { position: relative; min-height: 14rem; overflow: hidden; border: 1px solid var(--line); background: #0b1c1d; }
.media-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.media-card:hover img { transform: scale(1.045); }
.media-card span { position: absolute; right: .8rem; bottom: .7rem; left: .8rem; color: #fff; font-size: .96rem; font-weight: 800; text-shadow: 0 2px 10px #000; }

.details { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); padding: 1rem 0; }
summary { display: flex; align-items: baseline; gap: .7rem; cursor: pointer; font-size: 1.15rem; font-weight: 700; }
summary::before { content: "+"; color: var(--accent, var(--lime)); font-size: 1.45rem; line-height: 1; }
details[open] summary::before { content: "–"; }
details p { max-width: 65rem; margin: 1rem 0 .35rem 2rem; color: var(--muted); font-size: var(--reading); }
.sources { margin: 1.5rem 0 0; padding: 1.25rem; border: 1px solid var(--line); background: rgba(234, 247, 240, .035); }
.sources h3 { font-size: 1.2rem; }
.sources ul { margin: .75rem 0 0; padding-left: 1.2rem; }
.sources li { margin: .5rem 0; color: var(--muted); font-size: var(--small); }
.sources a { color: var(--accent, var(--lime)); }

.cta-band { background: linear-gradient(110deg, color-mix(in srgb, var(--accent, var(--lime)) 17%, #071819), #071215); }
.cta-band .section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.site-footer { border-top: 1px solid var(--line); background: #030a0d; }
.footer-inner { width: min(var(--max), calc(100% - 2.4rem)); margin: auto; padding: 2.5rem 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; }
.footer-inner p { max-width: 36rem; margin: 0; color: var(--muted); font-size: .95rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1rem; align-items: start; }
.footer-links a { color: var(--muted); font-size: .92rem; }
.back-top { position: fixed; right: 1rem; bottom: 1rem; z-index: 20; display: none; min-width: 3rem; min-height: 3rem; border: 1px solid var(--line); color: var(--ink); background: rgba(3, 12, 15, .88); cursor: pointer; }
.back-top.is-visible { display: block; }

@media (max-width: 820px) {
  body { font-size: 17px; }
  .header-inner { width: min(var(--max), calc(100% - 1.5rem)); min-height: 4.1rem; }
  .menu-toggle { display: inline-flex; }
  .site-nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: none; padding: .65rem .75rem 1rem; border-bottom: 1px solid var(--line); background: rgba(3, 12, 15, .98); }
  .site-nav.is-open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-nav a { padding: .8rem .55rem; }
  .hero { min-height: min(42rem, 80svh); }
  .hero::before { background: linear-gradient(0deg, rgba(3,11,14,.93), rgba(3,11,14,.34) 75%), var(--hero-image) center / cover no-repeat; }
  .hero::after { right: -5rem; top: 8%; width: 18rem; }
  .hero-inner, .section, .footer-inner { width: min(var(--max), calc(100% - 1.5rem)); }
  h1 { font-size: clamp(3rem, 15vw, 4.5rem); }
  h2 { font-size: clamp(2rem, 9vw, 3.25rem); }
  .hero-copy, .section-lead, .prose p, .prose li, .prose blockquote, .card p, .station-copy, .response, details p { font-size: 1.12rem; }
  .split, .cards, .cards--two { grid-template-columns: 1fr; }
  .cards { gap: .8rem; }
  .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .station { padding: 1.3rem; scroll-margin-top: 6.6rem; }
  .station-nav { position: sticky; z-index: 8; top: 4.1rem; padding: .6rem; background: rgba(4, 18, 20, .96); }
  .choice-grid { grid-template-columns: 1fr; }
  .choice { min-height: 5.6rem; padding: 1rem; }
  .footer-inner { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.expedition-status{position:sticky;z-index:12;top:4.6rem;border-bottom:1px solid var(--line);background:rgba(3,12,15,.96);backdrop-filter:blur(12px)}.expedition-status__inner{width:min(var(--max),calc(100% - 2.4rem));margin:auto;padding:.72rem 0;display:grid;grid-template-columns:auto minmax(8rem,1fr) auto;gap:1rem;align-items:center}.expedition-status__name{color:var(--accent,var(--lime));font-size:.78rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.expedition-status__track{height:.42rem;overflow:hidden;border:1px solid var(--line);background:rgba(255,255,255,.025)}.expedition-status__fill{width:0;height:100%;background:var(--accent,var(--lime));transition:width .35s ease}.expedition-status__count{color:var(--muted);font-size:.82rem;white-space:nowrap}.station.is-discovered .station-index{color:#07110a;background:var(--accent,var(--lime))}.discovery-toast{position:fixed;z-index:60;right:1rem;bottom:1rem;max-width:min(26rem,calc(100% - 2rem));padding:1rem 1.1rem;border:1px solid var(--accent,var(--lime));color:var(--ink);background:rgba(3,12,15,.97);box-shadow:0 12px 40px rgba(0,0,0,.35)}.discovery-toast strong{color:var(--accent,var(--lime))}.expedition-complete{margin:1.5rem 0 0;padding:1.2rem;border:1px solid var(--accent,var(--lime));background:color-mix(in srgb,var(--accent,var(--lime)) 8%,rgba(3,14,16,.7))}.expedition-complete__eyebrow{margin:0 0 .45rem;color:var(--accent,var(--lime));font-size:.78rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.expedition-complete p{margin:.45rem 0 0;color:var(--muted)}.expedition-complete a{color:var(--accent,var(--lime));font-weight:800}.archipelago-progress{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1rem}.archipelago-progress span{padding:.42rem .58rem;border:1px solid var(--line);color:var(--muted);font-size:.8rem;font-weight:800}.archipelago-progress span.is-complete{border-color:var(--lime);color:var(--lime)}@media(max-width:820px){.expedition-status{top:4.1rem}.expedition-status__inner{width:min(var(--max),calc(100% - 1.5rem));grid-template-columns:1fr auto;gap:.45rem .8rem}.expedition-status__track{grid-column:1/-1;grid-row:2}.station-nav{top:8.35rem}}



/* V1.8: images et lightbox */
main img[data-lightbox]{cursor:zoom-in}

/* Les images carrées ne dépassent jamais 1150 x 1150 px */
img.media-square{
  width:auto;
  height:auto;
  max-width:min(1150px, 100%);
  max-height:min(1150px, calc(100vh - 80px));
}

/* Les autres images ne peuvent jamais déborder de l'écran */
main img:not(.media-square){
  max-width:100%;
  height:auto;
}

/* Agrandissement centré, sans modifier la position de la page */
html.lightbox-open,
body.lightbox-open{
  overflow:hidden !important;
}

.archipel-lightbox{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483647 !important;
  display:none;
  align-items:center;
  justify-content:center;
  width:100vw;
  height:100dvh;
  padding:24px;
  box-sizing:border-box;
  margin:0 !important;
  background:rgba(1,7,9,.96);
  backdrop-filter:blur(8px);
  overscroll-behavior:contain;
}

.archipel-lightbox.is-open{
  display:flex !important;
}

.archipel-lightbox__figure{
  margin:0 !important;
  padding:0;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  overflow:hidden;
}

.archipel-lightbox__image{
  display:block;
  width:auto !important;
  height:auto !important;
  max-width:calc(100vw - 48px) !important;
  max-height:calc(100dvh - 110px) !important;
  margin:0 auto !important;
  object-fit:contain !important;
  border-radius:12px;
  box-shadow:0 24px 80px rgba(0,0,0,.6);
}

.archipel-lightbox__image.media-square{
  max-width:min(1150px, calc(100vw - 48px)) !important;
  max-height:min(1150px, calc(100dvh - 110px)) !important;
}

.archipel-lightbox__caption{
  max-width:min(900px, calc(100vw - 48px));
  margin:0 auto;
  color:#e8f0ec;
  text-align:center;
  line-height:1.5;
}

.archipel-lightbox__close{
  position:fixed;
  top:14px;
  right:16px;
  z-index:2147483647;
  width:48px;
  height:48px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  background:rgba(0,0,0,.45);
  color:#fff;
  font-size:30px;
  line-height:1;
  cursor:pointer;
}

.archipel-lightbox__close:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
}

@media(max-width:650px){
  .archipel-lightbox{padding:14px}
  .archipel-lightbox__image{
    max-width:calc(100vw - 28px) !important;
    max-height:calc(100dvh - 92px) !important;
  }
  .archipel-lightbox__image.media-square{
    max-width:min(1150px, calc(100vw - 28px)) !important;
    max-height:min(1150px, calc(100dvh - 92px)) !important;
  }
  .archipel-lightbox__close{
    top:8px;
    right:8px;
  }
}

/* V1.11: passerelles inter-sites */
.cross-site-link{margin:30px 0 4px}.cross-site-link a{display:grid;grid-template-columns:1fr auto;gap:3px 18px;align-items:center;padding:17px 20px;border:1px solid rgba(255,255,255,.13);border-radius:15px;background:rgba(255,255,255,.035);color:inherit;text-decoration:none;transition:transform .18s ease,border-color .18s ease,background .18s ease}.cross-site-link a:hover,.cross-site-link a:focus-visible{transform:translateY(-2px);border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.065)}.cross-site-kicker{grid-column:1;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;opacity:.7}.cross-site-label{grid-column:1;font-weight:650;line-height:1.35}.cross-site-arrow{grid-column:2;grid-row:1/span 2;font-size:1.35rem;opacity:.8}html.external-dialog-open,body.external-dialog-open{overflow:hidden!important}.external-site-dialog{position:fixed;inset:0;z-index:2147483646;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(1,7,9,.9);backdrop-filter:blur(8px)}.external-site-dialog.is-open{display:flex}.external-site-dialog__panel{width:min(560px,100%);padding:28px;border:1px solid rgba(255,255,255,.18);border-radius:20px;background:#0b1719;box-shadow:0 28px 90px rgba(0,0,0,.58)}.external-site-dialog__eyebrow{margin:0 0 8px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;opacity:.68}.external-site-dialog__panel h2{margin:.15rem 0 .8rem}.external-site-dialog__panel p{line-height:1.6}.external-site-dialog__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.external-site-dialog__actions button{min-height:46px;padding:10px 16px;border-radius:999px;cursor:pointer}.external-site-dialog__continue{font-weight:700}.external-site-dialog__once{margin:16px 0 0;font-size:.82rem;opacity:.62}@media(max-width:650px){.cross-site-link{margin-top:26px}.external-site-dialog{padding:16px}.external-site-dialog__panel{padding:22px}.external-site-dialog__actions{flex-direction:column}.external-site-dialog__actions button{width:100%}}@media(prefers-reduced-motion:reduce){.cross-site-link a{transition:none}}

/* V1.12: Boussole évolutive de l'Archipel */
.archipel-compass{
  --vivant-progress:0;
  --climat-progress:0;
  --oasis-progress:0;
  --futurs-progress:0;
  position:relative;
  z-index:2147483000;
}
.archipel-compass__button{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:2147483000;
  display:flex;
  align-items:center;
  gap:9px;
  min-height:54px;
  padding:7px 14px 7px 7px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(6,19,21,.92);
  color:#f2f6f2;
  box-shadow:0 12px 36px rgba(0,0,0,.34);
  backdrop-filter:blur(9px);
  cursor:pointer;
}
.archipel-compass__mini{width:40px;height:40px;overflow:visible}
.compass-ring{fill:none;stroke:rgba(255,255,255,.28);stroke-width:2}
.mini-needle{fill:rgba(255,255,255,.12);transition:fill .35s ease,opacity .35s ease}
.vivant-started .mini-vivant{fill:rgba(126,210,145,calc(.3 + var(--vivant-progress) * .7))}
.climat-started .mini-climat{fill:rgba(117,190,225,calc(.3 + var(--climat-progress) * .7))}
.oasis-started .mini-oasis{fill:rgba(220,184,112,calc(.3 + var(--oasis-progress) * .7))}
.futurs-started .mini-futurs{fill:rgba(182,156,222,calc(.3 + var(--futurs-progress) * .7))}
.compass-core{fill:#e6d69b}
.archipel-compass__button-text{font-size:.86rem;font-weight:650}
.archipel-compass.just-evolved .archipel-compass__button{animation:compass-pulse .9s ease}
@keyframes compass-pulse{0%,100%{transform:scale(1)}45%{transform:scale(1.08);box-shadow:0 0 0 8px rgba(230,214,155,.12),0 12px 36px rgba(0,0,0,.34)}}
html.compass-open,body.compass-open{overflow:hidden!important}
.archipel-compass__modal{
  position:fixed;
  inset:0;
  z-index:2147483001;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(1,7,9,.93);
  backdrop-filter:blur(10px);
}
.archipel-compass__modal.is-open{display:flex}
.archipel-compass__panel{
  position:relative;
  width:min(880px,100%);
  max-height:calc(100dvh - 48px);
  overflow:auto;
  padding:30px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:24px;
  background:#091719;
  box-shadow:0 30px 100px rgba(0,0,0,.62);
}
.archipel-compass__close{
  position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.25);color:#fff;
  font-size:28px;line-height:1;cursor:pointer
}
.archipel-compass__eyebrow{margin:0 52px 6px 0;font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;opacity:.65}
.archipel-compass__panel h2{margin:.15rem 52px .55rem 0}
.archipel-compass__intro{max-width:690px;margin:0 auto 12px;line-height:1.6;text-align:center;opacity:.82}
.archipel-compass__stage{display:flex;justify-content:center;margin:6px auto 2px}
.archipel-compass__large{width:min(470px,76vw);height:auto;overflow:visible}
.compass-outer,.compass-inner{fill:none;stroke:rgba(255,255,255,.15);stroke-width:2}
.compass-inner{stroke-dasharray:4 9}
.compass-axis{stroke:rgba(255,255,255,.1);stroke-width:1}
.direction{fill:rgba(255,255,255,.055);stroke:rgba(255,255,255,.12);stroke-width:1.5;transition:fill .45s ease,filter .45s ease}
.vivant-started .direction-vivant{fill:rgba(126,210,145,calc(.14 + var(--vivant-progress) * .56))}
.climat-started .direction-climat{fill:rgba(117,190,225,calc(.14 + var(--climat-progress) * .56))}
.oasis-started .direction-oasis{fill:rgba(220,184,112,calc(.14 + var(--oasis-progress) * .56))}
.futurs-started .direction-futurs{fill:rgba(182,156,222,calc(.14 + var(--futurs-progress) * .56))}
.vivant-complete .direction-vivant,.climat-complete .direction-climat,.oasis-complete .direction-oasis,.futurs-complete .direction-futurs{filter:drop-shadow(0 0 10px rgba(255,255,255,.18))}
.compass-center{fill:#102629;stroke:#e6d69b;stroke-width:2}
.compass-center-text{fill:#f0e5b7;font-size:18px;font-weight:700;letter-spacing:2px}
.compass-word{fill:rgba(255,255,255,.28);font-size:14px;font-weight:700;letter-spacing:1.5px;transition:fill .35s ease}
.vivant-started .word-vivant,.climat-started .word-climat,.oasis-started .word-oasis,.futurs-started .word-futurs{fill:#f4f7f4}
.compass-links line{stroke:rgba(230,214,155,0);stroke-width:3;stroke-linecap:round;transition:stroke .5s ease}
.connections-visible .compass-links line{stroke:rgba(230,214,155,.16)}
.compass-complete .compass-links line{stroke:rgba(230,214,155,.5)}
.archipel-compass__directions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:8px}
.compass-direction-card{display:flex;flex-direction:column;gap:5px;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:13px;color:inherit;text-decoration:none;background:rgba(255,255,255,.025)}
.compass-direction-card:hover,.compass-direction-card:focus-visible{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.05)}
.compass-direction-card__name{font-weight:700}
.compass-direction-card__status{font-size:.77rem;opacity:.67;min-height:2.1em}
.compass-direction-card__bar{height:4px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.compass-direction-card__bar i{display:block;height:100%;border-radius:inherit;background:currentColor;opacity:.7}
.archipel-compass__message{margin:18px auto 0;max-width:690px;text-align:center;line-height:1.55;font-style:italic;opacity:.76}
@media(max-width:700px){
  .archipel-compass__button{right:12px;bottom:12px;padding-right:10px}
  .archipel-compass__button-text{display:none}
  .archipel-compass__modal{padding:10px}
  .archipel-compass__panel{padding:22px 16px;max-height:calc(100dvh - 20px);border-radius:18px}
  .archipel-compass__large{width:min(390px,88vw)}
  .archipel-compass__directions{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  .mini-needle,.direction,.compass-word,.compass-links line{transition:none}
  .archipel-compass.just-evolved .archipel-compass__button{animation:none}
}

/* V1.13: boussole déplacée pour ne pas masquer le retour en haut */
.archipel-compass__button{
  left:20px !important;
  right:auto !important;
  bottom:20px;
}
@media(max-width:700px){
  .archipel-compass__button{
    left:12px !important;
    right:auto !important;
    bottom:12px;
  }
}

/* V1.13: confidentialité, RGPD et politique des cookies */
html.privacy-entry-open,
body.privacy-entry-open{
  overflow:hidden !important;
}
.privacy-entry{
  position:fixed;
  inset:0;
  z-index:2147483647;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(1,7,9,.82);
  backdrop-filter:blur(7px);
}
.privacy-entry__panel{
  width:min(620px,100%);
  padding:26px 28px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:20px;
  background:linear-gradient(180deg,#0a1a20,#071216);
  box-shadow:0 28px 90px rgba(0,0,0,.58);
  text-align:center;
}
.privacy-entry__panel h2{
  margin:0 0 14px;
}
.privacy-entry__panel p{
  margin:10px auto;
  max-width:540px;
  line-height:1.62;
}
.privacy-entry__panel a{
  text-decoration:underline;
  text-underline-offset:3px;
}
.privacy-entry__support{
  margin-top:16px !important;
}
.privacy-entry__ok{
  margin-top:14px;
  min-width:150px;
  min-height:46px;
  padding:10px 20px;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
}
.legal-page{
  padding:80px 20px;
}
.legal-page__inner{
  width:min(900px,100%);
  margin:0 auto;
}
.legal-page__inner h1{
  margin-bottom:24px;
}
.legal-page__inner h2{
  margin-top:34px;
}
.legal-page__inner p{
  line-height:1.72;
}
.legal-page__back{
  margin-top:42px;
}
.legal-links{
  display:block;
  margin-top:8px;
  font-size:.9rem;
  opacity:.8;
}
@media(max-width:650px){
  .privacy-entry{padding:12px}
  .privacy-entry__panel{padding:22px 18px;border-radius:16px}
  .legal-page{padding:56px 16px}
}

/* V1.14: soutien propre à Archipel */
.archipel-support{padding:72px 20px;border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.018)}
.archipel-support__inner{width:min(1120px,100%);margin:0 auto;text-align:center}
.archipel-support__eyebrow{margin:0 0 8px;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;opacity:.66}
.archipel-support h2{margin:.1rem 0 14px}
.archipel-support__lead,.archipel-support__invitation{max-width:790px;margin:10px auto;line-height:1.65}
.archipel-support__invitation{opacity:.82}
.archipel-support__options{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:34px 0 20px}
.archipel-support__card{display:flex;flex-direction:column;align-items:center;min-height:210px;padding:24px 18px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:rgba(255,255,255,.035)}
.archipel-support__amount{font-size:1.35rem}
.archipel-support__label{flex:1;margin:12px 0 18px;line-height:1.45;opacity:.78}
.archipel-support__button{display:inline-flex;align-items:center;justify-content:center;min-width:130px;min-height:44px;padding:9px 18px;border:1px solid rgba(255,255,255,.25);border-radius:999px;color:inherit;text-decoration:none;font-weight:700;background:rgba(255,255,255,.07)}
.archipel-support__button:hover,.archipel-support__button:focus-visible{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.42)}
.archipel-support__note{margin:10px 0 0;font-size:.9rem;opacity:.7}
.archipel-support__share{max-width:720px;margin:24px auto 0;line-height:1.55;font-style:italic;opacity:.72}
.footer-support-link{margin-top:10px}
@media(max-width:900px){.archipel-support__options{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.archipel-support{padding:54px 16px}.archipel-support__options{grid-template-columns:1fr}.archipel-support__card{min-height:0}}

/* V1.15: boussole hors de la zone des liens de footer */
.archipel-compass__button{
  left:20px !important;
  right:auto !important;
  bottom:92px !important;
}
@media(max-width:700px){
  .archipel-compass__button{
    left:12px !important;
    right:auto !important;
    bottom:88px !important;
  }
}

/* Réserve visuelle en bas de page afin que les contrôles flottants
   ne masquent jamais les derniers liens du footer. */
footer{
  position:relative;
  padding-bottom:max(110px, env(safe-area-inset-bottom)) !important;
}
.legal-links,
.footer-support-link{
  position:relative;
  z-index:2;
}

/* V1.16: Boussole intégrée au header */
.archipel-compass--header{
  position:relative;
  z-index:auto;
  display:flex;
  align-items:center;
  margin-left:10px;
}
.archipel-compass--header .archipel-compass__button{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  top:auto !important;
  margin:0;
  min-height:42px;
  padding:5px 10px 5px 5px;
  box-shadow:none;
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.16);
  backdrop-filter:none;
}
.archipel-compass--header .archipel-compass__mini{
  width:32px;
  height:32px;
}
.archipel-compass--header .archipel-compass__button-text{
  font-size:.78rem;
}
.archipel-compass--header .archipel-compass__modal{
  position:fixed;
}
@media(max-width:900px){
  .archipel-compass--header{
    margin-left:6px;
  }
  .archipel-compass--header .archipel-compass__button{
    min-width:42px;
    width:42px;
    height:42px;
    padding:4px;
    border-radius:50%;
  }
  .archipel-compass--header .archipel-compass__button-text{
    display:none;
  }
  .archipel-compass--header .archipel-compass__mini{
    width:30px;
    height:30px;
  }
}

/* La réserve de footer ajoutée en V1.15 n'est plus nécessaire pour la boussole */
footer{
  padding-bottom:max(36px, env(safe-area-inset-bottom)) !important;
}

/* V1.17: alignement des liens légaux et soutien dans le footer */
footer .legal-links,
footer .footer-support-link{
  width:min(1120px, calc(100% - 40px));
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box;
  text-align:left;
}
footer .footer-support-link{
  margin-top:10px !important;
}
@media(max-width:700px){
  footer .legal-links,
  footer .footer-support-link{
    width:min(100% - 24px, 1120px);
  }
}

/* V1.18: boussole réellement visible dans le header, y compris menu mobile */
.header-inner{justify-content:flex-start}
.site-nav{margin-left:auto}
.archipel-compass--header{margin-left:8px}
@media(max-width:820px){
  .menu-toggle{margin-left:auto}
  .site-nav{margin-left:0}
  .archipel-compass--header{margin-left:6px}
}

/* V1.19: fenêtre de la boussole légèrement abaissée */
.archipel-compass__modal{
  align-items:center !important;
  padding-top:72px !important;
  padding-bottom:24px !important;
}
.archipel-compass__dialog{
  transform:translateY(28px);
}

@media(max-width:700px){
  .archipel-compass__modal{
    padding-top:64px !important;
    padding-bottom:18px !important;
  }
  .archipel-compass__dialog{
    transform:translateY(20px);
  }
}

/* V1.20: centrage réel de la grande boussole dans le viewport */
.archipel-compass__modal{
  position:fixed !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  padding:clamp(72px, 10vh, 120px) 24px clamp(32px, 6vh, 72px) !important;
  overflow:hidden !important;
}

.archipel-compass__dialog{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;
  margin:0 auto !important;
  width:min(1180px, calc(100vw - 48px)) !important;
  max-height:calc(100vh - clamp(120px, 18vh, 190px)) !important;
  overflow:auto !important;
  overscroll-behavior:contain;
}

@media(max-height:820px){
  .archipel-compass__modal{
    padding:84px 20px 28px !important;
  }
  .archipel-compass__dialog{
    max-height:calc(100vh - 112px) !important;
  }
  .archipel-compass__visual{
    transform:scale(.88);
    transform-origin:center center;
    margin-block:-24px !important;
  }
}

@media(max-height:700px){
  .archipel-compass__modal{
    padding:76px 16px 20px !important;
  }
  .archipel-compass__dialog{
    max-height:calc(100vh - 96px) !important;
  }
  .archipel-compass__visual{
    transform:scale(.78);
    margin-block:-52px !important;
  }
}

@media(max-width:700px){
  .archipel-compass__modal{
    padding:76px 12px 20px !important;
  }
  .archipel-compass__dialog{
    width:calc(100vw - 24px) !important;
    max-height:calc(100vh - 96px) !important;
  }
  .archipel-compass__visual{
    transform:scale(.86);
    transform-origin:center center;
    margin-block:-24px !important;
  }
}

/* V1.21: correction définitive du centrage de la boussole */

/* Fermée par défaut, ouverte uniquement avec .is-open */
.archipel-compass__modal{
  display:none !important;
  position:fixed !important;
  inset:0 !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  padding:clamp(80px, 11vh, 120px) 24px clamp(28px, 5vh, 60px) !important;
  overflow:hidden !important;
}
.archipel-compass__modal.is-open{
  display:flex !important;
}

/* La vraie fenêtre est .archipel-compass__panel */
.archipel-compass__panel{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;
  margin:0 auto !important;
  width:min(980px, calc(100vw - 48px)) !important;
  max-height:calc(100vh - 150px) !important;
  overflow:auto !important;
  overscroll-behavior:contain;
}

/* Écrans peu hauts comme la capture fournie */
@media(max-height:820px){
  .archipel-compass__modal{
    padding:92px 20px 24px !important;
  }
  .archipel-compass__panel{
    width:min(920px, calc(100vw - 40px)) !important;
    max-height:calc(100vh - 116px) !important;
  }
  .archipel-compass__visual{
    transform:scale(.82) !important;
    transform-origin:center top !important;
    margin-bottom:-70px !important;
  }
}

@media(max-height:700px){
  .archipel-compass__modal{
    padding:84px 16px 18px !important;
  }
  .archipel-compass__panel{
    max-height:calc(100vh - 102px) !important;
  }
  .archipel-compass__visual{
    transform:scale(.74) !important;
    margin-bottom:-105px !important;
  }
}

@media(max-width:700px){
  .archipel-compass__modal{
    padding:76px 12px 18px !important;
  }
  .archipel-compass__panel{
    width:calc(100vw - 24px) !important;
    max-height:calc(100vh - 94px) !important;
  }
  .archipel-compass__visual{
    transform:scale(.82) !important;
    transform-origin:center top !important;
    margin-bottom:-58px !important;
  }
}

/* V1.22: la grande boussole est hors du header et liée au viewport */
body > .archipel-compass__modal{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483001 !important;
}

/* V1.23: boussole corrigée et responsive */

/* Le bouton seul vit dans le header */
.archipel-compass--header{
  position:relative !important;
  z-index:20 !important;
  flex:0 0 auto;
}
.archipel-compass--header .archipel-compass__button{
  position:relative !important;
  inset:auto !important;
  z-index:auto !important;
  margin:0 !important;
  min-height:42px !important;
  padding:5px 11px 5px 5px !important;
  border-radius:999px !important;
  box-shadow:none !important;
}
.archipel-compass--header .archipel-compass__mini{
  width:32px !important;
  height:32px !important;
}

/* La grande fenêtre vit directement sous body */
body > .archipel-compass__modal{
  display:none !important;
  position:fixed !important;
  inset:0 !important;
  z-index:2147483001 !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  padding:88px 24px 34px !important;
  overflow:hidden !important;
  background:rgba(1,7,9,.93) !important;
}
body > .archipel-compass__modal.is-open{
  display:flex !important;
}

body > .archipel-compass__modal .archipel-compass__panel{
  position:relative !important;
  width:min(900px, calc(100vw - 48px)) !important;
  max-height:calc(100dvh - 122px) !important;
  margin:0 !important;
  padding:26px 28px 24px !important;
  overflow:auto !important;
  border-radius:22px !important;
  box-sizing:border-box !important;
  transform:none !important;
}

body > .archipel-compass__modal .archipel-compass__stage{
  margin:2px auto 0 !important;
}
body > .archipel-compass__modal .archipel-compass__large{
  width:min(430px, 62vh, 72vw) !important;
  max-width:100% !important;
}
body > .archipel-compass__modal .archipel-compass__directions{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:9px !important;
}
body > .archipel-compass__modal .archipel-compass__message{
  margin-top:14px !important;
}

/* Écrans de bureau peu hauts */
@media(max-height:780px) and (min-width:701px){
  body > .archipel-compass__modal{
    padding:76px 20px 20px !important;
  }
  body > .archipel-compass__modal .archipel-compass__panel{
    max-height:calc(100dvh - 96px) !important;
    width:min(820px, calc(100vw - 40px)) !important;
    padding:20px 24px !important;
  }
  body > .archipel-compass__modal .archipel-compass__intro{
    margin-bottom:4px !important;
  }
  body > .archipel-compass__modal .archipel-compass__large{
    width:min(350px, 50vh, 60vw) !important;
  }
  body > .archipel-compass__modal .archipel-compass__directions{
    margin-top:2px !important;
  }
}

/* Mobile: bouton discret et fenêtre pensée pour le téléphone */
@media(max-width:700px){
  .archipel-compass--header{
    margin-left:6px !important;
  }
  .archipel-compass--header .archipel-compass__button{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    padding:4px !important;
    border-radius:50% !important;
    justify-content:center !important;
  }
  .archipel-compass--header .archipel-compass__button-text{
    display:none !important;
  }
  .archipel-compass--header .archipel-compass__mini{
    width:29px !important;
    height:29px !important;
  }

  body > .archipel-compass__modal{
    align-items:center !important;
    padding:68px 10px 14px !important;
  }
  body > .archipel-compass__modal .archipel-compass__panel{
    width:100% !important;
    max-height:calc(100dvh - 82px) !important;
    padding:18px 14px 16px !important;
    border-radius:18px !important;
  }
  body > .archipel-compass__modal .archipel-compass__close{
    top:10px !important;
    right:10px !important;
    width:38px !important;
    height:38px !important;
    font-size:24px !important;
  }
  body > .archipel-compass__modal .archipel-compass__eyebrow{
    margin:0 42px 5px !important;
    text-align:center !important;
    font-size:.7rem !important;
  }
  body > .archipel-compass__modal .archipel-compass__panel h2{
    margin:0 42px 7px !important;
    text-align:center !important;
    font-size:clamp(1.25rem, 6vw, 1.6rem) !important;
  }
  body > .archipel-compass__modal .archipel-compass__intro{
    margin:0 auto 5px !important;
    max-width:34rem !important;
    font-size:.9rem !important;
    line-height:1.45 !important;
  }
  body > .archipel-compass__modal .archipel-compass__stage{
    margin:-2px auto -4px !important;
  }
  body > .archipel-compass__modal .archipel-compass__large{
    width:min(292px, 78vw, 39vh) !important;
  }
  body > .archipel-compass__modal .archipel-compass__directions{
    grid-template-columns:1fr 1fr !important;
    gap:7px !important;
    margin-top:0 !important;
  }
  body > .archipel-compass__modal .compass-direction-card{
    min-width:0 !important;
    padding:9px 10px !important;
    border-radius:11px !important;
  }
  body > .archipel-compass__modal .compass-direction-card__name{
    font-size:.87rem !important;
  }
  body > .archipel-compass__modal .compass-direction-card__status{
    min-height:0 !important;
    font-size:.7rem !important;
    line-height:1.25 !important;
  }
  body > .archipel-compass__modal .archipel-compass__message{
    margin:10px auto 0 !important;
    font-size:.82rem !important;
    line-height:1.4 !important;
  }
}

/* Très petits téléphones */
@media(max-width:390px){
  body > .archipel-compass__modal{
    padding:62px 8px 10px !important;
  }
  body > .archipel-compass__modal .archipel-compass__panel{
    max-height:calc(100dvh - 72px) !important;
    padding:16px 10px 14px !important;
  }
  body > .archipel-compass__modal .archipel-compass__large{
    width:min(260px, 76vw, 36vh) !important;
  }
  body > .archipel-compass__modal .archipel-compass__intro{
    font-size:.84rem !important;
  }
}