/* Skywayback — pages éditoriales SEO (transformations) */
*{box-sizing:border-box}
html,body{margin:0;background:#0b0b0c;color:#e9eaec;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;line-height:1.55}
a{color:#ff7a5c}
.wrap{max-width:760px;margin:0 auto;padding:20px 18px 48px}

/* --- Logo (mark dessiné en CSS, pas de SVG) --- */
.brand-mark{width:26px;height:26px;border-radius:50%;flex:0 0 auto;position:relative;display:inline-block;
  background:radial-gradient(120% 120% at 32% 26%, #8fd0ff 0%, #2f7ff0 46%, #ff7a3c 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.10), inset 0 -3px 7px rgba(0,0,0,.30), 0 2px 8px rgba(47,127,240,.35)}
.brand-mark::after{content:'';position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.45);transform:rotate(-24deg) scaleY(.42)}

/* --- Header --- */
.site-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:11px 18px;background:rgba(11,11,12,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid #1b1d23}
.site-header .brand{display:flex;align-items:center;gap:9px;text-decoration:none}
.brand-name{font-size:18px;font-weight:800;letter-spacing:-.4px;color:#fff}
.brand-sky{color:#7cc4ff}
.site-nav{display:flex;align-items:center;gap:16px;font-size:14px}
.site-nav a{color:#cdd1d6;text-decoration:none}
.site-nav a:hover{color:#fff}
.site-nav .nav-cta{background:linear-gradient(135deg,#ff5a3c,#ff2d55);color:#fff;font-weight:700;
  padding:8px 13px;border-radius:10px}
@media(max-width:520px){.site-nav{gap:13px;font-size:13px}.site-nav .nav-cta{display:none}}

/* --- Footer léger --- */
.site-footer{max-width:760px;margin:0 auto;padding:22px 18px calc(28px + env(safe-area-inset-bottom));
  border-top:1px solid #1b1d23;text-align:center;color:#8b9097;font-size:13px}
.site-footer .sf-brand{display:inline-flex;align-items:center;gap:8px;color:#e9eaec;font-weight:700;font-size:15px}
.site-footer .sf-tag{margin:8px 0 12px;max-width:520px;margin-left:auto;margin-right:auto}
.site-footer .sf-links{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.site-footer .sf-links a{color:#aab0b7;text-decoration:none}
.site-footer .sf-links a:hover{color:#fff;text-decoration:underline}
.crumb{font-size:13px;color:#8b9097;margin-bottom:10px}
.crumb a{color:#8b9097;text-decoration:none}
h1{font-size:26px;line-height:1.2;margin:6px 0 16px}
h2{font-size:19px;margin:30px 0 10px}
p{margin:0 0 14px}
.lead{font-size:16px;color:#cdd1d6}

/* Comparateur avant/après (deux cartes superposées + slider) */
#scene{position:relative;width:100%;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:#000;margin:8px 0 6px}
#scene .map{position:absolute;inset:0}
#after{clip-path:inset(0 0 0 var(--x,50%))}
#poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:opacity .4s}
#handle{position:absolute;top:0;bottom:0;left:50%;width:4px;margin-left:-2px;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.25);z-index:3;cursor:ew-resize;touch-action:none}
#handle::after{content:'‹ ›';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;background:#fff;color:#111;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:17px}
.lbl{position:absolute;bottom:12px;z-index:4;background:rgba(17,17,18,.72);color:#fff;padding:5px 11px;
  border-radius:999px;font-size:13px;font-weight:600;pointer-events:none}
.lbl-l{left:10px} .lbl-r{right:10px}
.wm{position:absolute;top:10px;right:10px;z-index:4;background:rgba(0,0,0,.5);color:#fff;font-size:11px;
  padding:3px 7px;border-radius:6px}
.attrib{font-size:12px;color:#8b9097;margin:0 0 18px}

.cta{display:inline-block;background:linear-gradient(135deg,#ff5a3c,#ff2d55);color:#fff;text-decoration:none;
  font-weight:700;padding:13px 18px;border-radius:12px;margin:6px 0 8px}
.score{display:inline-block;margin:-6px 0 10px;background:#241016;color:#ff8a6b;border:1px solid #4a2230;
  font-size:13px;padding:4px 11px;border-radius:999px}
.score strong{color:#ff5a3c}

/* Classement des transformations (hub département) */
ol.topt{list-style:none;counter-reset:t;padding:0;margin:6px 0 4px}
ol.topt li{counter-increment:t;display:flex;align-items:center;gap:10px;padding:10px 12px;background:#15161a;
  border-radius:10px;margin:6px 0}
ol.topt li::before{content:counter(t);flex:0 0 24px;height:24px;border-radius:6px;background:#2a2c33;color:#cfd3d8;
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
ol.topt a{font-weight:700;text-decoration:none;color:#e9eaec;flex:1}
ol.topt .mult{color:#ff7a5c;font-weight:800}
ol.topt .pop{color:#8b9097;font-size:12px;flex-basis:100%;margin-left:34px}

/* Listes de communes (maillage interne) */
.communes{list-style:none;padding:0;margin:8px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.communes a{display:block;padding:9px 11px;background:#15161a;border-radius:9px;text-decoration:none;color:#e9eaec;font-size:14px}
.communes a:hover{background:#1d1f25}
.communes .pop{color:#8b9097;font-size:12px}

/* FAQ */
/* Formulaire de contact */
.form .fld{display:block;margin:14px 0;font-size:14px;color:#cdd1d6}
.form .fld input,.form .fld textarea{display:block;width:100%;margin-top:5px;padding:11px 12px;border-radius:10px;
  border:1px solid #2a2c33;background:#15161a;color:#e9eaec;font:inherit}
.form .fld textarea{resize:vertical}
.form button.cta{border:0;cursor:pointer}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice{padding:11px 13px;border-radius:10px;font-size:14px;margin:6px 0 14px}
.notice.ok{background:#10301d;color:#7ee2a8}
.notice.err{background:#3a1414;color:#ff9a9a}
.rgpd-note{font-size:12px;color:#8b9097;margin-top:10px}

.muted-link{margin-top:26px;font-size:14px}
.muted-link a{color:#8b9097;text-decoration:none}
.muted-link a:hover{color:#fff}

.faq dt{font-weight:700;margin-top:14px}
.faq dd{margin:4px 0 0;color:#cdd1d6}

footer{margin-top:34px;padding-top:16px;border-top:1px solid #20222a;font-size:12px;color:#6b7178}
.maplibregl-ctrl-attrib,.maplibregl-ctrl-logo{display:none!important}