/* ============================================================
   L'ÉCHAPPÉE — Moto Club Côte d'Azur
   Système de design partagé — noir & rouge biker, chrome & or
   ============================================================ */

@font-face{font-family:'Archivo Black';src:url('assets/ArchivoBlack-Regular.ttf')}
@font-face{font-family:'Space Grotesk';src:url('assets/SpaceGrotesk.ttf')}
@font-face{font-family:'Space Mono';src:url('assets/SpaceMono-Regular.ttf');font-weight:400}
@font-face{font-family:'Space Mono';src:url('assets/SpaceMono-Bold.ttf');font-weight:700}

:root{
  --noir:#0C0A09;--noir2:#141110;--card:#1A1512;--card2:#231B15;
  --bone:#F4EDE3;--muted:#A89785;--faint:#7E6F5F;
  --line:#2B231C;--line2:#3B2E24;
  --rouge:#C8102E;--rougevif:#FF3B30;
  --rouge-grad:linear-gradient(140deg,#E2372F,#B00D28 55%,#7E0C1F);
  --or:#F0C46A;--or-grad:linear-gradient(140deg,#FFE9B8,#E0A94A 55%,#A96F1B);
  --chrome:linear-gradient(180deg,#FFFFFF 8%,#DDE2E7 38%,#98A0A8 62%,#EFF3F6 88%);
  --vert:#7FBF6A;--orange:#E8A33D;
  --shadow:0 26px 60px -30px rgba(0,0,0,.95);
  --r:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{background:var(--noir);color:var(--bone);font-family:'Space Grotesk',system-ui,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1000px 520px at 85% -140px, rgba(200,16,46,.12), transparent 60%)}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 44px}

/* ---------- typographie ---------- */
.display{font-family:'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:-.01em;line-height:.99;margin:0}
h1.display{font-size:54px}h2.display{font-size:36px}h3.display{font-size:21px}
.mono{font-family:'Space Mono',monospace}
.kicker{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#FF6B6B}
.kicker::before{content:"✦ ";color:var(--rouge)}
.sub{color:var(--muted);font-size:17px}
.small{font-size:13.5px}.muted{color:var(--muted)}.faint{color:var(--faint)}
.chrome-txt{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.or-txt{background:var(--or-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.center{text-align:center}

/* ---------- structure ---------- */
.row{display:flex;align-items:center;gap:12px}
.col{display:flex;flex-direction:column}
.spread{display:flex;align-items:center;justify-content:space-between;gap:20px}
.mt8{margin-top:8px}.mt14{margin-top:14px}.mt22{margin-top:22px}.mt34{margin-top:34px}
.head{padding:52px 0 8px}
.sec{padding:54px 0 6px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:26px}
.g2{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.g2t{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:start}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;text-decoration:none;font-family:'Space Grotesk';
  font-weight:700;font-size:15px;border-radius:10px;padding:13px 24px;color:#fff;background:var(--rouge);box-shadow:0 16px 30px -16px rgba(200,16,46,.9)}
.btn.big{font-size:17px;padding:16px 30px}
.btn.small{padding:9px 16px;font-size:13.5px;box-shadow:none}
.btn.ghost{background:transparent;color:var(--bone);border:1.5px solid var(--line2);box-shadow:none}
.btn.green{background:#2F7A2A;box-shadow:0 16px 30px -16px rgba(47,122,42,.9)}
.btn.or{background:var(--or-grad);color:#2A1B07;box-shadow:none}
.btn.dark{background:#0C0A09;color:var(--bone);box-shadow:none}
.btn.wide{width:100%;justify-content:center}

/* ---------- chips, tags, badges ---------- */
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);background:var(--card);border-radius:999px;padding:8px 14px;font-size:13px;color:var(--muted);white-space:nowrap}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--rouge)}
.chip.on{background:rgba(200,16,46,.16);border-color:rgba(255,90,90,.5);color:#FFB3B3}
.tag{font-family:'Space Mono';font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#FF8E8E;border:1px dashed rgba(200,16,46,.55);padding:3px 8px;border-radius:7px;white-space:nowrap}
.tag.solid{background:rgba(200,16,46,.16);border-style:solid;border-color:rgba(255,90,90,.5)}
.tag.green{background:rgba(127,191,106,.14);border-color:rgba(127,191,106,.45);color:#A8D996;border-style:solid}
.tag.gold{color:#F0C46A;border-color:rgba(240,196,106,.55)}
.tag.pub{background:var(--rouge);border:0;color:#fff;font-weight:700}
.plabel{display:inline-flex;align-items:center;gap:10px;background:var(--rouge);color:#fff;font-family:'Space Mono';font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;padding:9px 18px;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 50%,100% 100%,0 100%,14px 50%)}
.plabel.or{background:var(--or-grad);color:#2A1B07}

/* ---------- cartes ---------- */
.card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 40%),var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card.pad{padding:22px 24px}

/* ---------- navigation ---------- */
.nav{position:sticky;top:0;z-index:60;height:78px;display:flex;align-items:center;background:rgba(12,10,9,.93);backdrop-filter:blur(12px);border-bottom:2px solid var(--rouge)}
.nav .wrap{display:flex;align-items:center;gap:22px;width:100%}
.logo{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--bone);flex:none}
.logo .patchmini{width:46px;height:46px;border-radius:50%;background:#0B0908;border:2px solid var(--rouge);display:grid;place-items:center;overflow:hidden}
.logo .patchmini img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.logo .word{font-family:'Archivo Black';font-size:18px;text-transform:uppercase;letter-spacing:.01em}
.logo .word i{font-style:normal;color:var(--rougevif)}
.logo .word span{display:block;font-family:'Space Mono';font-size:9px;letter-spacing:.28em;color:var(--muted);margin-top:2px}
.navlinks{display:flex;gap:13px;margin-left:4px;flex-wrap:nowrap}
.navlinks a{color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:500;white-space:nowrap}
.navlinks a:hover{color:var(--bone)}
.navlinks a.on{color:var(--bone);font-weight:700}
.navlinks a.on::after{content:"";display:block;height:3px;border-radius:2px;background:var(--rouge);margin-top:5px}
.navcta{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.bell{width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;position:relative;background:var(--card);font-size:16px}
.bell b{position:absolute;top:-3px;right:-3px;background:var(--rouge);color:#fff;font-size:10px;font-family:'Space Mono';border-radius:99px;padding:2px 5px}

/* ---------- bandeau urgent (toutes les pages) ---------- */
.urgent{background:var(--rouge-grad);color:#fff;box-shadow:0 18px 40px -18px rgba(200,16,46,.9);position:relative;z-index:50}
.urgent .wrap{display:flex;align-items:center;gap:16px;padding-top:12px;padding-bottom:12px}
.urgent .sos{width:44px;height:44px;border-radius:12px;background:#0B0908;display:grid;place-items:center;font-family:'Archivo Black';font-size:15px;flex:none;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,.55)}50%{box-shadow:0 0 0 8px rgba(0,0,0,0)}}
.urgent b{font-size:15.5px}
.urgent span{font-size:13px;color:#FFD9D9;display:block}
.urgent .go{margin-left:auto;background:#0B0908;border:0;color:#fff;font-weight:700;font-family:'Space Grotesk';border-radius:10px;padding:11px 18px;font-size:14px;cursor:pointer;white-space:nowrap}

/* ---------- bandeau défilant ---------- */
.marquee{background:#0B0908;color:#FF6B6B;overflow:hidden;white-space:nowrap;padding:13px 0;font-family:'Space Mono';font-size:13px;letter-spacing:.14em;text-transform:uppercase;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.marquee .in{display:inline-block}
.marquee b{color:#FFF;font-weight:700}
.marquee i{font-style:normal;color:#7E0C1F;padding:0 18px}

/* ---------- héros avec l'écusson (patch + fanion) ---------- */
.hero{position:relative;overflow:hidden;padding:60px 0 54px;border-bottom:1px solid var(--line2);
  background:
    radial-gradient(760px 460px at 50% 8%, rgba(226,55,47,.24), transparent 62%),
    radial-gradient(600px 420px at 10% 82%, rgba(226,55,47,.12), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0 2px, transparent 2px 26px),
    linear-gradient(180deg,#120D0B,#0B0908)}
.hero .filbg{position:absolute;right:-150px;top:-130px;width:880px;height:880px;opacity:.10;transform:rotate(-9deg);pointer-events:none}
.hero .filbg img{width:100%;height:100%;object-fit:contain}
.hero .orn{position:absolute;z-index:2;font-size:62px;color:rgba(240,196,106,.30)}
.hero .orn.l{left:6.5%;top:32%;transform:rotate(-14deg)}
.hero .orn.r{right:6.5%;top:24%;transform:rotate(12deg)}
.hero .center{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center}
.patchbig{position:relative;display:flex;flex-direction:column;align-items:center;transform:rotate(-1.4deg)}
.patchbig .rocker,.patchbig .brocker{display:block;filter:drop-shadow(0 18px 30px rgba(0,0,0,.75))}
.patchbig .ov{position:relative;margin-top:-48px}
.patchbig .ov .glow{position:absolute;inset:-42px;border-radius:50%;box-shadow:0 0 175px 45px rgba(226,55,47,.42);z-index:1}
.patchbig .ov img{width:400px;height:auto;border-radius:50%;display:block;position:relative;z-index:2;box-shadow:0 40px 80px -30px rgba(0,0,0,.95)}
.patchbig .ov .ring{position:absolute;inset:-14px;border-radius:50%;border:9px solid var(--rouge);z-index:3;box-shadow:0 0 0 3px rgba(255,150,140,.32)}
.patchbig .ov .stitch{position:absolute;inset:-33px;border-radius:50%;border:1.8px dashed rgba(244,237,227,.48);z-index:3}
.patchbig .studs span{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--or-grad);box-shadow:0 2px 6px rgba(0,0,0,.75);z-index:4}
.patchbig .brocker{margin-top:-42px}
.hero .slogan{font-family:'Space Mono';font-size:13px;letter-spacing:.42em;text-transform:uppercase;color:var(--muted);margin-top:22px}
.hero .slogan i{font-style:normal;color:var(--rouge);padding:0 10px}
.hero .ctas{display:flex;gap:14px;margin-top:22px}
.hero .cities{font-family:'Space Mono';font-size:12px;letter-spacing:.22em;color:var(--faint);margin-top:18px}
.hero.split{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;text-align:left;padding:56px 0}
.hero.split .center{align-items:flex-start;text-align:left}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{padding:20px;text-align:center}
.stat .n{font-family:'Archivo Black';font-size:34px;color:#fff;line-height:1}
.stat span{font-family:'Space Mono';font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- sorties ---------- */
.ride{display:grid;grid-template-columns:86px 1fr;gap:20px;padding:24px}
.dateblock{border-radius:14px;background:var(--rouge-grad);text-align:center;padding:12px 6px;height:fit-content;color:#fff;box-shadow:0 14px 26px -14px rgba(200,16,46,.9)}
.dateblock .dow{font-family:'Space Mono';font-size:11px;letter-spacing:.16em;opacity:.9}
.dateblock .day{font-family:'Archivo Black';font-size:30px;line-height:1.05}
.dateblock .mon{font-family:'Space Mono';font-size:11px;letter-spacing:.12em;opacity:.9}
.route{display:flex;align-items:center;gap:10px;margin-top:10px;color:var(--muted);font-size:14px;flex-wrap:wrap}
.route .arrow{color:var(--rougevif);font-weight:700}
.route .km{margin-left:auto;font-family:'Space Mono';font-size:12px;color:var(--faint)}
.ride .bottom{display:flex;align-items:center;gap:14px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.ride .bottom .btn{margin-left:auto}
.avs{display:flex}.av{width:34px;height:34px;border-radius:50%;border:2px solid #0C0A09;margin-left:-10px;display:grid;place-items:center;font-family:'Archivo Black';font-size:12px;color:#fff;text-transform:uppercase}
.av:first-child{margin-left:0}
.av.a1{background:#7E0C1F}.av.a2{background:#B01029}.av.a3{background:#5A4A3A}.av.a4{background:#8C1D2F}.av.a5{background:#6B5B3E}
.av.more{background:var(--card2);color:var(--muted);font-family:'Space Mono';font-size:11px;border-color:var(--line2)}

/* ---------- planning ---------- */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.dayc{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:12px 12px 14px;min-height:210px;display:flex;flex-direction:column;gap:9px}
.dayc .d{font-family:'Space Mono';font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.dayc .n{font-family:'Archivo Black';font-size:22px;color:#fff;line-height:1}
.dayc.today{border-color:rgba(255,90,90,.55);box-shadow:0 0 0 1px rgba(255,90,90,.35) inset}
.ev{font-size:12.5px;border-radius:9px;padding:7px 9px;background:var(--noir2);border:1px solid var(--line2);color:var(--bone)}
.ev.rouge{background:rgba(200,16,46,.16);border-color:rgba(255,90,90,.45)}
.ev.vert{background:rgba(127,191,106,.12);border-color:rgba(127,191,106,.4)}
.ev b{display:block;font-size:12.5px}
.ev span{color:var(--muted);font-size:11px}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;border-radius:16px;overflow:hidden}
.tbl th,.tbl td{padding:13px 16px;border-bottom:1px solid var(--line);font-size:14px;text-align:left}
.tbl th{font-family:'Space Mono';font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:var(--noir2)}
.tbl tr:last-child td{border-bottom:0}
.tbl td b{color:#fff}
.tbl .pr{font-family:'Archivo Black';color:#FF8E8E;white-space:nowrap}
.tbl .hi{color:#FF8E8E;font-weight:700}

/* ---------- formules partenaires ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.tier{padding:26px;display:flex;flex-direction:column;gap:14px;position:relative}
.tier .ptag{position:absolute;top:-13px;left:26px}
.tier .price{font-family:'Archivo Black';font-size:42px;line-height:1;color:#fff}
.tier .price small{font-family:'Space Grotesk';font-size:15px;color:var(--muted);font-weight:600}
.tier ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.tier li{font-size:13.5px;color:var(--muted);display:flex;gap:9px;align-items:flex-start}
.tier li b{color:var(--bone)}
.tier li::before{content:"✦";color:var(--rouge);font-size:11px;margin-top:3px}
.tier.s{border-top:3px solid #5A4A3A}
.tier.m{border-top:3px solid var(--rouge);box-shadow:0 0 0 1px rgba(255,90,90,.35) inset, var(--shadow)}
.tier.l{border-top:3px solid var(--or)}

/* ---------- encarts annuaire (rendu réel) ---------- */
.annu{background:#131010;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow)}
.annu .bar{display:flex;align-items:center;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.annu .bar b{font-family:'Archivo Black';font-size:15px;text-transform:uppercase;letter-spacing:.04em}
.annu .bar span{font-family:'Space Mono';font-size:11px;color:var(--faint);letter-spacing:.12em;text-transform:uppercase}
.encrow{display:grid;grid-template-columns:250px 320px 1fr;gap:18px;align-items:start}
.enc{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.enc .ph{display:grid;place-items:center;font-size:30px;background:linear-gradient(135deg,#31261D,#1B1411);color:#8A7562}
.enc .bd{padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.enc b.name{font-size:15px}
.enc .meta{font-size:12.5px;color:var(--muted)}
.enc .offer{font-size:13px;color:#F2D9C8;background:var(--noir2);border:1px dashed var(--line2);border-radius:10px;padding:8px 10px}
.enc.s .ph{height:74px}
.enc.m .ph{height:118px;font-size:38px}
.enc.m{border-color:rgba(255,90,90,.35)}
.banner2{border-left:4px solid var(--rouge);border-radius:14px;background:linear-gradient(140deg,rgba(226,55,47,.16),rgba(126,12,31,.22)),var(--card);border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1.25fr .9fr;gap:18px;align-items:center;padding:20px 22px}
.banner2 .promo-tag{display:inline-block;background:var(--rouge);color:#fff;font-family:'Space Mono';font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;padding:5px 10px;border-radius:6px}
.banner2 .promo{font-family:'Archivo Black';font-size:26px;text-transform:uppercase;margin-top:10px;color:#fff;line-height:1.05}
.banner2 .prices{display:flex;align-items:baseline;gap:12px;margin-top:10px;flex-wrap:wrap}
.banner2 .prices .old{font-size:17px;color:#8A7562;text-decoration:line-through}
.banner2 .prices .new{font-family:'Archivo Black';font-size:30px;color:#FF6B6B;line-height:1}
.banner2 .prices .pc{font-family:'Space Mono';font-size:12px;color:#FFC9C9}
.banner2 .who{font-size:13.5px;color:var(--muted);margin-top:8px}
.banner2 .side{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.banner2 .badge{align-self:flex-end;background:var(--or-grad);color:#2A1B07;font-family:'Archivo Black';font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;border-radius:8px}
.lab{font-family:'Space Mono';font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}

/* ---------- messagerie ---------- */
.msgr{display:grid;grid-template-columns:400px 1fr;gap:20px;align-items:start}
.msgr3{display:grid;grid-template-columns:300px 1fr 320px;gap:18px;align-items:start}
.panelbox{padding:20px 22px}
.mlist{display:flex;flex-direction:column}
.mrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.mrow:last-child{border-bottom:0}
.mrow b{font-size:14.5px;display:block}
.mrow .who{font-size:12.5px;color:var(--muted)}
.st{font-family:'Space Mono';font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:4px 9px;margin-left:auto;flex:none}
.st.visible{background:rgba(127,191,106,.16);color:#A8D996;border:1px solid rgba(127,191,106,.45)}
.st.contacts{background:rgba(240,196,106,.14);color:#F0C46A;border:1px solid rgba(240,196,106,.45)}
.st.hidden{background:rgba(255,255,255,.06);color:var(--faint);border:1px solid var(--line2)}
.settings{background:var(--noir2);border:1px dashed var(--line2);border-radius:14px;padding:16px 18px;margin-top:16px;display:flex;flex-direction:column;gap:12px}
.setrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.setrow .lbl{font-size:13.5px;color:var(--muted)}
.setrow b{font-size:14px}
.switch{width:46px;height:26px;border-radius:999px;background:#2F7A2A;position:relative;flex:none;margin-left:auto}
.switch::after{content:"";position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:#fff}
.switch.off{background:#3B2E24}.switch.off::after{right:auto;left:3px}
.chat{overflow:hidden;display:flex;flex-direction:column}
.chat .top{padding:15px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.chat .msgs{padding:18px 20px;display:flex;flex-direction:column;gap:12px;min-height:280px}
.bub{max-width:78%;border-radius:14px;padding:10px 14px;font-size:13.5px}
.bub .nm{font-family:'Space Mono';font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.85;display:block;margin-bottom:3px}
.bub.them{background:var(--card2);border:1px solid var(--line2);color:var(--bone)}
.bub.me{background:var(--rouge-grad);color:#fff;align-self:flex-end}
.chat .foot{padding:13px 20px;border-top:1px solid var(--line);display:flex;gap:10px}
.chat .foot .f{flex:1;background:#1D1613;border:1px solid var(--line2);border-radius:999px;padding:11px 16px;font-size:13.5px;color:var(--faint)}
.groups{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.gitem{display:flex;align-items:center;gap:12px;background:var(--noir2);border:1px solid var(--line);border-radius:12px;padding:11px 14px}
.gitem .e{font-size:17px}
.gitem b{font-size:13.5px;display:block}
.gitem span{font-size:12px;color:var(--muted)}

/* ---------- carte / GPS ---------- */
.mapwrap{position:relative;height:740px;border:1px solid var(--line2);border-radius:22px;overflow:hidden;box-shadow:0 60px 120px -50px rgba(0,0,0,.95)}
.mapwrap.tall{height:820px}
.mapopen{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);z-index:40;background:var(--rouge);color:#fff;
font-weight:700;font-size:14.5px;text-decoration:none;border-radius:999px;padding:13px 22px;white-space:nowrap;
box-shadow:0 20px 45px -14px rgba(200,16,46,.95);border:2px solid rgba(255,255,255,.35)}
.mapopen:hover{background:var(--rougevif)}
.mapwrap .map{position:absolute;inset:0}
.mapwrap .map svg{display:block;width:100%;height:100%}
.mp{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:6}
.mp .dot{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:'Archivo Black';font-size:13px;color:#0B0908;border:2.5px solid #0B0908;box-shadow:0 12px 24px -8px rgba(0,0,0,.95)}
.mp.g .dot{background:var(--vert)}
.mp.o .dot{background:var(--orange)}
.mp.p .dot{background:var(--or)}
.mp.t .dot{background:var(--bone);font-size:15px}
.mp .nm2{background:rgba(12,10,9,.93);border:1px solid var(--line2);border-radius:999px;padding:4px 10px;font-size:11.5px;font-family:'Space Mono';color:#F4EDE3;white-space:nowrap}
.mp .nm2 b{color:#A8D996;font-weight:400}
.mp.cl .dot{background:#3B2E24;color:#F4EDE3;font-size:12.5px;font-family:'Space Mono'}
.mp.sos .dot{background:var(--rougevif);color:#fff;width:46px;height:46px;font-size:19px;border-color:#FFB3B3;animation:sosp 1.4s infinite}
.mp.sos .nm2{background:var(--rouge);border-color:#FF9A9A;color:#fff;font-weight:700}
@keyframes sosp{0%,100%{box-shadow:0 0 0 0 rgba(255,59,48,.75)}50%{box-shadow:0 0 0 14px rgba(255,59,48,0)}}
.rip{position:absolute;width:190px;height:190px;border-radius:50%;border:2px solid rgba(255,59,48,.6);transform:translate(-50%,-50%);animation:ringp 2.6s infinite;z-index:5}
@keyframes ringp{0%{transform:translate(-50%,-50%) scale(.75);opacity:.95}100%{transform:translate(-50%,-50%) scale(1.35);opacity:0}}
.gpanel{position:absolute;z-index:20;background:rgba(12,10,9,.90);backdrop-filter:blur(10px);border:1px solid var(--line2);border-radius:16px;padding:14px 16px;box-shadow:0 30px 60px -30px rgba(0,0,0,.95)}
.gpanel h4{font-family:'Archivo Black';font-size:15px;text-transform:uppercase;letter-spacing:.02em;margin:0 0 8px}
.gpl{top:22px;left:22px;width:320px}
.gpr{top:22px;right:22px;width:320px}
.gbl{top:196px;left:22px;width:320px}
.live{display:flex;align-items:center;gap:9px;font-family:'Space Mono';font-size:12.5px;color:#A8D996}
.live .d{width:9px;height:9px;border-radius:50%;background:var(--vert);animation:sosp 1.4s infinite}
.frow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.melist{display:flex;flex-direction:column}
.mel{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.mel:last-child{border-bottom:0}
.mel .a{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:'Archivo Black';font-size:12px;color:#0B0908;flex:none}
.mel b{font-size:13.5px;display:block}
.mel .w{font-size:11.5px;color:var(--muted)}
.mel .d2{margin-left:auto;font-family:'Space Mono';font-size:11.5px;color:var(--faint);flex:none}
.balade{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.brow{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);background:var(--noir2);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.brow.on{border-color:rgba(127,191,106,.5);background:rgba(127,191,106,.10);color:var(--bone)}
.brow .rad{width:14px;height:14px;border-radius:50%;border:2px solid var(--line2);flex:none}
.brow.on .rad{border-color:var(--vert);background:var(--vert);box-shadow:0 0 0 3px rgba(127,191,106,.25)}
.gfoot{position:absolute;left:22px;right:22px;bottom:20px;z-index:22;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.legend{background:rgba(12,10,9,.90);border:1px solid var(--line2);border-radius:999px;padding:10px 16px;font-family:'Space Mono';font-size:11.5px;color:var(--muted);display:flex;gap:14px;align-items:center;backdrop-filter:blur(8px)}
.dotl{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:5px}
.pwa{position:absolute;top:22px;left:50%;transform:translateX(-50%);z-index:21;background:rgba(12,10,9,.9);border:1px solid var(--line2);border-radius:999px;padding:9px 16px;font-size:12.5px;color:#F4EDE3;backdrop-filter:blur(8px)}
.sosrow{margin-left:auto;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sosbig{display:flex;align-items:center;gap:12px;background:var(--rouge-grad);border:0;border-radius:14px;padding:14px 22px;color:#fff;font-family:'Space Grotesk';font-weight:700;font-size:16px;cursor:pointer;box-shadow:0 22px 50px -18px rgba(200,16,46,.95)}
.sosbig .ic{font-family:'Archivo Black';font-size:19px}

/* mode route (navigation) */
.routecard{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.navcard{border:2px solid rgba(255,90,90,.5);border-radius:20px;overflow:hidden;background:linear-gradient(180deg,rgba(226,55,47,.10),rgba(226,55,47,0) 40%),var(--card)}
.navcard .top{background:var(--rouge-grad);color:#fff;padding:13px 20px;display:flex;align-items:center;gap:12px}
.navcard .top b{font-family:'Archivo Black';font-size:15px;text-transform:uppercase;letter-spacing:.05em}
.navcard .bd{padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.stepon{display:flex;gap:14px;align-items:flex-start}
.stepon .ar{width:44px;height:44px;border-radius:12px;background:var(--rouge-grad);display:grid;place-items:center;font-family:'Archivo Black';color:#fff;font-size:19px;flex:none}
.stepon b{display:block;font-size:15.5px}
.stepon span{font-size:13px;color:var(--muted)}
.ahead{display:flex;gap:12px;align-items:center;background:var(--noir2);border:1px solid var(--line2);border-radius:14px;padding:12px 14px}
.ahead .e{width:42px;height:42px;border-radius:12px;background:rgba(240,196,106,.14);border:1px solid rgba(240,196,106,.4);display:grid;place-items:center;font-size:19px;flex:none}
.ahead b{display:block;font-size:14.5px}
.ahead span{font-size:12.5px;color:var(--muted)}
.ahead .km2{margin-left:auto;text-align:right;flex:none}
.ahead .km2 b{font-family:'Archivo Black';font-size:17px;color:#FF8E8E}
.ahead .km2 span{font-family:'Space Mono';font-size:10.5px}

/* ---------- entraide / alertes ---------- */
.alarm{border:2px solid rgba(226,55,47,.65);border-radius:20px;overflow:hidden;background:linear-gradient(180deg,rgba(226,55,47,.10),rgba(226,55,47,0) 42%),var(--card);box-shadow:0 40px 90px -40px rgba(200,16,46,.7)}
.alarm .top{background:var(--rouge-grad);padding:14px 20px;display:flex;align-items:center;gap:12px;color:#fff}
.alarm .top .pulse{width:12px;height:12px;border-radius:50%;background:#fff;animation:pulse2 1.2s infinite}
@keyframes pulse2{0%,100%{opacity:1}50%{opacity:.25}}
.alarm .top b{font-family:'Archivo Black';font-size:16px;letter-spacing:.06em;text-transform:uppercase}
.alarm .top .t{margin-left:auto;font-family:'Space Mono';font-size:11.5px;color:#FFD9D9}
.alarm .bd{padding:20px 22px;display:flex;flex-direction:column;gap:14px}
.alarm .moto{background:var(--noir2);border:1px solid var(--line2);border-radius:12px;padding:12px 14px;font-size:13.5px;display:flex;flex-direction:column;gap:6px}
.alarm .moto b{color:#fff}
.livechat{display:flex;flex-direction:column;gap:9px;background:var(--noir2);border:1px solid var(--line);border-radius:12px;padding:13px 14px}
.livechat .ln{font-size:13px;color:var(--bone);display:flex;gap:8px}
.livechat .ln b{color:#FF8E8E;font-family:'Space Mono';font-size:11.5px;flex:none;padding-top:2px}
.livechat .ln span{color:var(--muted)}
.resolved{display:flex;align-items:center;gap:12px;background:rgba(127,191,106,.10);border:1px solid rgba(127,191,106,.45);border-radius:14px;padding:14px 16px}
.resolved .e{font-size:20px}
.resolved b{font-size:14.5px}
.resolved span{font-size:12.5px;color:var(--muted);display:block}
.notif{background:#1E1613;border:1px solid var(--line2);border-left:4px solid var(--rouge);border-radius:14px;padding:13px 15px;display:flex;gap:12px;align-items:flex-start}
.notif .ic{width:38px;height:38px;border-radius:10px;background:var(--rouge-grad);display:grid;place-items:center;font-size:17px;flex:none}
.notif b{display:block;font-size:13.5px}
.notif span{font-size:12.5px;color:var(--muted)}
.notif .when{margin-left:auto;font-family:'Space Mono';font-size:10.5px;color:var(--faint);flex:none}
.pagefr{background:#0B0908;border:1px solid var(--line2);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.pagefr .chrome{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#131010;border-bottom:1px solid var(--line)}
.pagefr .chrome i{width:10px;height:10px;border-radius:50%;background:#3B2E24;display:block}
.pagefr .url{margin-left:12px;font-family:'Space Mono';font-size:11px;color:var(--faint);background:var(--noir2);border-radius:999px;padding:5px 12px}
.pagefr .content{padding:22px;display:flex;flex-direction:column;gap:14px}
.faketxt{height:12px;border-radius:6px;background:#1E1712}
.faketxt.w60{width:60%}.faketxt.w85{width:85%}.faketxt.w40{width:40%}

/* ---------- carte de membre ---------- */
.carte2{position:relative;border-radius:24px;padding:28px 28px 24px;overflow:hidden;color:#fff;
  background:linear-gradient(140deg,#E2372F,#B00D28 55%,#7E0C1F);
  box-shadow:0 60px 110px -45px rgba(200,16,46,.85)}
.carte2::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 2px, transparent 2px 12px),
  radial-gradient(300px 180px at 88% -10%, rgba(255,255,255,.28), transparent 60%)}
.carte2 .in{position:relative;z-index:2;display:flex;flex-direction:column;gap:14px}
.carte2 .toprow{display:flex;align-items:center;gap:12px}
.carte2 .toprow .nmc{font-family:'Space Mono';font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:#FFD1D1}
.carte2 .toprow img{width:56px;height:56px;border-radius:50%;border:3px solid var(--or);margin-left:auto;box-shadow:0 0 0 2px rgba(240,196,106,.35)}
.carte2 .who{font-family:'Archivo Black';font-size:32px;line-height:1}
.carte2 .who span{display:block;font-family:'Space Grotesk';font-weight:600;font-size:13.5px;color:#F6D8D8;margin-top:6px}
.carte2 .meta{display:flex;gap:18px;font-size:13px;color:#FFE3E3;flex-wrap:wrap}
.carte2 .strip{height:24px;border-radius:5px;background:repeating-linear-gradient(90deg,#F4EDE3 0 3px,transparent 3px 9px);opacity:.4}
.carte2 .botrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.carte2 .sealgold{position:absolute;right:-26px;bottom:-30px;width:150px;height:150px;border-radius:50%;z-index:3;transform:rotate(12deg);
  background:radial-gradient(circle at 34% 28%, #FFF3CF, #E0A94A 52%, #8E5E13);box-shadow:0 26px 50px -18px rgba(0,0,0,.85), inset 0 0 0 6px rgba(255,255,255,.25), inset 0 0 0 11px rgba(120,70,10,.35)}
.carte2 .sealgold img{position:absolute;left:50%;top:50%;width:92px;height:92px;border-radius:50%;transform:translate(-50%,-50%);border:3px solid rgba(120,70,10,.5)}

/* ---------- profils / rencontres ---------- */
.prof{padding:20px;display:flex;flex-direction:column;gap:12px}
.prof .top{display:flex;align-items:center;gap:14px}
.prof .pa{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-family:'Archivo Black';font-size:20px;color:#fff;flex:none}
.prof b{font-size:16px;display:block}
.prof .w{font-size:12.5px;color:var(--muted)}
.prof .txt{font-size:13.5px;color:var(--muted)}
.prof .tags{display:flex;gap:8px;flex-wrap:wrap}
.prof .foot2{display:flex;gap:10px;align-items:center;margin-top:auto}

/* ---------- offres / promos ---------- */
.promo{padding:22px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.promo .e{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:rgba(240,196,106,.12);border:1px solid rgba(240,196,106,.35)}
.promo b{font-size:16px}
.promo .pr2{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.promo .old{font-size:15px;color:#8A7562;text-decoration:line-through}
.promo .new{font-family:'Archivo Black';font-size:26px;color:#FF6B6B}
.promo .pc{font-family:'Space Mono';font-size:11.5px;color:#FFC9C9}
.promo span.d{font-size:12.5px;color:var(--muted)}

/* ---------- formulaires ---------- */
.form{display:flex;flex-direction:column;gap:12px}
.field{background:#1D1613;border:1px solid var(--line2);border-radius:10px;padding:12px 14px;font-size:14px;color:var(--faint);display:flex;gap:10px;align-items:center}
.field.lite{background:var(--noir2);border-style:dashed}
.formrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---------- notes & footer ---------- */
.pnote{margin-top:36px;border-radius:16px;border:1px dashed var(--line2);padding:18px 22px;display:flex;gap:14px;align-items:flex-start;background:var(--noir2)}
.pnote .e{font-size:20px}
.pnote b{display:block;font-size:14.5px}
.pnote span{font-size:13.5px;color:var(--muted)}
.foot{background:#080706;color:#9A8A79;padding:44px 0 34px;font-size:13.5px;border-top:3px solid var(--rouge);margin-top:56px}
.foot .cols{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:26px}
.foot b{color:var(--bone);display:block;margin-bottom:10px;font-size:14px}
.foot a{color:#9A8A79;text-decoration:none;display:block;margin-bottom:7px}
.foot a:hover{color:var(--bone)}
.foot .bottom{margin-top:26px;padding-top:18px;border-top:1px solid #1C1713;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:'Space Mono';font-size:11px;letter-spacing:.08em;color:#6E6055}
.foot .logo .word{color:var(--bone)}

/* ---------- champs de formulaire réels ---------- */
.inp{width:100%;background:#1D1613;border:1px solid var(--line2);border-radius:10px;padding:12px 14px;
font-size:14px;color:var(--bone);font-family:'Space Grotesk'}
.inp::placeholder{color:var(--faint)}
.inp:focus{outline:none;border-color:var(--rouge);box-shadow:0 0 0 3px rgba(200,16,46,.18)}

/* ---------- confirmation d'inscription ---------- */
.conf{border:2px solid rgba(240,196,106,.5);border-radius:18px;padding:24px;
background:linear-gradient(180deg,rgba(240,196,106,.08),rgba(240,196,106,0) 45%),var(--card);box-shadow:var(--shadow)}
.confrow{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 14px}
.confrow b,.confrow span{background:var(--noir2);border:1px solid var(--line2);border-radius:999px;padding:8px 14px;font-size:13px}
.confrow b{color:#F0C46A}

/* ---------- bulle de confirmation ---------- */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);z-index:3000;
background:#1E1613;border:1px solid var(--line2);border-left:4px solid var(--rouge);border-radius:14px;
padding:13px 18px;font-size:13.5px;color:var(--bone);max-width:min(520px,92vw);
box-shadow:0 24px 50px -20px rgba(0,0,0,.95);opacity:0;transition:.25s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================
   TÉLÉPHONE & PETITS ÉCRANS
   ============================================================ */
.navtog{display:none}
.burger{display:none}
.onlym{display:none}
.langs{display:flex;gap:2px;background:var(--card);border:1px solid var(--line2);border-radius:9px;padding:3px}
.langs a{font-family:'Space Mono';font-size:11.5px;color:var(--muted);text-decoration:none;padding:6px 9px;border-radius:6px}
.langs a.on{background:var(--rouge);color:#fff;font-weight:700}

@media (max-width:1400px){
  .wrap{padding:0 22px}
  .nav .wrap{gap:14px}
  .navlinks{gap:9px}
  .navlinks a{font-size:12.5px}
  .navcta .btn{padding:11px 16px;font-size:14px}
  h1.display{font-size:46px}
}

@media (max-width:980px){
  .wrap{padding:0 16px}
  h1.display{font-size:33px}
  h2.display{font-size:25px}
  h3.display{font-size:18px}
  .sub{font-size:15px}
  .head{padding:28px 0 2px}
  .sec{padding:32px 0 2px}
  .sec-head{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:18px}
  .btn.big{font-size:15px;padding:14px 20px}

  /* ---- menu : logo + burger + rejoindre, et le menu se déplie ---- */
  .nav{height:auto}
  .nav .wrap{flex-wrap:wrap;padding:10px 16px;gap:10px}
  .logo{order:1}
  .logo .patchmini{width:38px;height:38px}
  .logo .word{font-size:15px}
  .logo .word span{font-size:8px;letter-spacing:.18em}
  .burger{display:grid;place-items:center;order:2;margin-left:auto;width:44px;height:44px;border-radius:12px;
    border:1px solid var(--line2);background:var(--card);color:var(--bone);font-size:20px;cursor:pointer;user-select:none}
  .navcta{order:3;margin-left:0;gap:8px}
  .navcta .btn{display:none}
  .onlym{display:block;color:var(--rougevif) !important;font-weight:700}
  .bell{display:none}
  .navlinks{display:none;order:4;width:100%;flex-direction:column;gap:0;margin:0;padding:4px 0 8px;border-top:1px solid var(--line)}
  .navtog:checked ~ .navlinks{display:flex}
  .navlinks a{padding:12px 4px;font-size:15.5px;border-bottom:1px solid var(--line)}
  .navlinks a:last-child{border-bottom:0}
  .navlinks a.on::after{display:none}

  /* ---- bandeau urgent ---- */
  .urgent .wrap{flex-wrap:wrap;gap:10px;padding-top:10px;padding-bottom:10px}
  .urgent .sos{width:38px;height:38px;font-size:12px}
  .urgent b{font-size:13.5px}
  .urgent span{font-size:11.5px}
  .urgent .go{margin-left:0;width:100%;text-align:center}

  /* ---- héros ---- */
  .hero{padding:30px 0 28px}
  .hero .orn{display:none}
  .hero .filbg{width:430px;height:430px;right:-150px;top:-70px;opacity:.08}
  .patchbig svg.rocker{width:302px;height:auto}
  .patchbig svg.brocker{width:272px;height:auto}
  .patchbig .ov{margin-top:-24px}
  .patchbig .ov img{width:min(232px,60vw)}
  .patchbig .ov .glow{inset:-20px;box-shadow:0 0 90px 22px rgba(226,55,47,.4)}
  .patchbig .ov .ring{inset:-8px;border-width:5px}
  .patchbig .ov .stitch{inset:-17px;border-width:1.2px}
  .patchbig .studs span{width:7px;height:7px}
  .patchbig .brocker{margin-top:-22px}
  .hero .slogan{font-size:10.5px;letter-spacing:.26em;margin-top:16px}
  .hero .ctas{flex-direction:column;width:100%;gap:10px;margin-top:18px}
  .hero .ctas .btn{width:100%;justify-content:center}
  .hero .cities{font-size:10px;letter-spacing:.12em}
  .hero.split{grid-template-columns:1fr !important;gap:26px;padding:30px 0}

  /* ---- grilles : tout s'empile ---- */
  .g2,.g2t,.g3,.routecard,.msgr,.msgr3,.encrow,.tiers{grid-template-columns:1fr !important;gap:16px}
  .g4,.g5,.stats{grid-template-columns:1fr 1fr !important;gap:12px}
  .formrow{grid-template-columns:1fr}
  .foot .cols{grid-template-columns:1fr;gap:20px}
  .stat{padding:14px}
  .stat .n{font-size:26px}
  .stat span{font-size:10px;letter-spacing:.08em}

  /* ---- cartes ---- */
  .card.pad{padding:16px}
  .ride{grid-template-columns:1fr !important;gap:12px;padding:18px}
  .dateblock{width:92px}
  .ride .bottom{flex-wrap:wrap;gap:10px}
  .ride .bottom .btn{margin-left:0;width:100%;justify-content:center}
  .route .km{margin-left:0;width:100%}
  .spread{flex-wrap:wrap}
  .row{flex-wrap:wrap}
  .chip{white-space:normal;text-align:left}
  .pnote{flex-direction:column;gap:8px;padding:16px}

  /* ---- formules & encarts ---- */
  .tier .price{font-size:34px}
  .annu{padding:14px}
  .banner2{grid-template-columns:1fr !important;padding:16px}
  .banner2 .promo{font-size:20px}
  .banner2 .prices .new{font-size:24px}
  .banner2 .badge{align-self:flex-start}
  .banner2 .side{align-items:flex-start}

  /* ---- planning ---- */
  .week{display:flex !important;overflow-x:auto;gap:10px;padding-bottom:10px}
  .dayc{min-width:156px;min-height:auto;flex:none}

  /* ---- tableaux ---- */
  .tbl th,.tbl td{padding:9px 10px;font-size:12.5px}
  .card:has(.tbl){overflow-x:auto}

  /* ---- carte & GPS ---- */
  .mapwrap,.mapwrap.tall{height:440px !important}
  .gpanel{width:auto !important;left:10px !important;right:10px !important;padding:11px 13px}
  .gpanel h4{font-size:13.5px}
  .gpl{top:10px !important}
  .gbl{display:none}
  .gpr{top:auto !important;bottom:auto;top:120px !important;display:none}
  .gfoot{left:10px;right:10px;bottom:10px;gap:8px}
  .legend{font-size:10px;gap:8px;padding:8px 11px;flex-wrap:wrap}
  .sosrow{width:100%;gap:8px}
  .sosbig{flex:1;padding:12px 14px;font-size:14px;justify-content:center}
  .pwa{display:none}
  .mel .d2{font-size:10.5px}
  .routecard .navcard .top{flex-wrap:wrap;gap:8px}
  .navcard .bd{padding:14px}
  .stepon .ar{width:38px;height:38px;font-size:16px}

  /* ---- messagerie ---- */
  .chat .msgs{min-height:230px}
  .bub{max-width:92%}
  .setrow{flex-wrap:wrap}

  /* ---- carte de membre ---- */
  .carte2{padding:20px 18px}
  .carte2 .who{font-size:23px}
  .carte2 .who span{font-size:12px}
  .carte2 .toprow img{width:44px;height:44px}
  .carte2 .sealgold{width:104px;height:104px;right:-16px;bottom:-20px}
  .carte2 .sealgold img{width:62px;height:62px}
  .carte2 .meta{gap:10px;font-size:12px}

  /* ---- profils, promos, divers ---- */
  .prof{padding:16px}
  .prof .pa{width:46px;height:46px;font-size:17px}
  .promo{padding:16px}
  .field{padding:11px 12px;font-size:13.5px}
  .marquee{font-size:11.5px;padding:10px 0}
  .foot{padding:30px 0 22px;margin-top:34px}
  .foot .bottom{font-size:10px}
  .pagefr .content{padding:14px}
  .alarm .top{flex-wrap:wrap;gap:8px}
  .alarm .bd{padding:15px}
  .notif{flex-wrap:wrap}
  .resolved{flex-wrap:wrap}
}

@media (max-width:560px){
  h1.display{font-size:29px}
  .g4,.g5{grid-template-columns:1fr !important}
  .stats{grid-template-columns:1fr 1fr !important}
  .hero .ctas .btn{font-size:14px}
  .mapwrap,.mapwrap.tall{height:400px !important}
}