/*
Theme Name: Sora Maps Canada
Theme URI: https://ca.soramaps.com
Author: SORATECH GROUP, LLC
Author URI: https://soramaps.com
Description: Thème pour Sora Maps Canada — gestion de fiches Google Business Profile et référencement local pour le marché québécois. Identité « Érable & Signature canadienne » avec le pin de géolocalisation en signature.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: sora-maps-canada
*/

:root{
  --erable:#C8102E;
  --erable-dp:#9B0E24;
  --or:#C9A24B;
  --or-dp:#A9842F;
  --ardoise:#2A3140;
  --ardoise-lt:#44506A;
  --creme:#FBF8F3;
  --creme-2:#F3ECE0;
  --craie:#FFFFFF;
  --encre:#1E222B;
  --gris:#6E7686;
  --line:rgba(42,49,64,.12);
  --shadow:0 20px 50px -24px rgba(42,49,64,.4);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--creme);
  color:var(--encre);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;line-height:1.08;font-weight:600;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ---------- Pin logo mark ---------- */
.pin-mark{display:inline-flex;align-items:center;gap:10px}
.pin-mark svg{flex:0 0 auto}
.pin-mark .name{font-family:'Fraunces',serif;font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--ardoise)}
.pin-mark .name b{color:var(--erable)}
.pin-mark .ca{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--or-dp);text-transform:uppercase;margin-left:2px;align-self:flex-start;margin-top:2px}

/* ---------- Header ---------- */
.site-head{position:sticky;top:0;z-index:100;background:rgba(251,248,243,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav{display:flex;align-items:center;gap:30px}
.nav a{font-size:14.5px;font-weight:500;color:var(--ardoise-lt);transition:color .18s}
.nav a:hover{color:var(--erable)}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;padding:11px 22px;border-radius:100px;transition:transform .18s,box-shadow .18s;cursor:pointer;border:none}
.btn-primary{background:var(--erable);color:#fff!important}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(200,16,46,.5)}
.btn-ghost{background:transparent;border:1.5px solid var(--line);color:var(--ardoise)}
.btn-ghost:hover{border-color:var(--erable);color:var(--erable)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer}

/* ---------- Hero ---------- */
.hero{position:relative;padding:92px 0 80px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(60% 50% at 85% 10%, rgba(201,162,75,.14), transparent 60%),
    radial-gradient(50% 45% at 10% 90%, rgba(200,16,46,.07), transparent 60%);
}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center}
.hero .kicker{display:inline-flex;align-items:center;gap:9px;background:var(--craie);border:1px solid var(--line);padding:7px 15px;border-radius:100px;font-size:12.5px;font-weight:600;color:var(--ardoise-lt);margin-bottom:22px}
.hero .kicker .leaf{color:var(--erable);font-size:14px}
.hero h1{font-size:clamp(38px,5.4vw,62px);color:var(--ardoise);margin-bottom:20px}
.hero h1 .thread{color:var(--erable);font-style:italic}
.hero p.lead{font-size:clamp(16px,2vw,19px);color:var(--ardoise-lt);max-width:30em;margin-bottom:30px}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .assurance{display:flex;gap:22px;margin-top:34px;flex-wrap:wrap}
.hero .assurance .a{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ardoise-lt);font-weight:500}
.hero .assurance .a svg{color:var(--or-dp);flex:0 0 auto}

/* hero visual — map pin card */
.hero-card{position:relative;background:var(--craie);border-radius:22px;box-shadow:var(--shadow);border:1px solid var(--line);padding:26px;transform:rotate(1.3deg)}
.hero-card .map{height:168px;border-radius:14px;background:
    linear-gradient(135deg,#EDE6D8,#F3ECE0);
  position:relative;overflow:hidden;border:1px solid var(--line)}
.hero-card .map .road{position:absolute;background:rgba(42,49,64,.08)}
.hero-card .map .r1{top:40%;left:0;right:0;height:10px}
.hero-card .map .r2{top:0;bottom:0;left:55%;width:10px}
.hero-card .map .r3{top:72%;left:0;right:0;height:7px;transform:rotate(-4deg)}
.hero-card .bigpin{position:absolute;top:28px;left:50%;transform:translateX(-50%);filter:drop-shadow(0 8px 10px rgba(200,16,46,.3))}
.hero-card .biz{margin-top:18px}
.hero-card .biz .rank{display:inline-flex;align-items:center;gap:6px;background:rgba(201,162,75,.14);color:var(--or-dp);font-weight:700;font-size:12px;padding:4px 11px;border-radius:100px}
.hero-card .biz h4{font-size:18px;margin:10px 0 4px;color:var(--ardoise)}
.hero-card .biz .stars{color:var(--or);font-size:15px;letter-spacing:2px}
.hero-card .biz .meta{font-size:12.5px;color:var(--gris);margin-top:3px}

/* ---------- Section shells ---------- */
.section{padding:84px 0}
.section-head{max-width:620px;margin-bottom:48px}
.section-head .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--erable);font-weight:700;font-size:13px;letter-spacing:.04em;margin-bottom:12px}
.section-head .eyebrow::before{content:"";width:22px;height:2px;background:var(--erable);display:inline-block;border-radius:2px}
.section-head h2{font-size:clamp(28px,3.6vw,42px);color:var(--ardoise);margin-bottom:14px}
.section-head p{font-size:16.5px;color:var(--ardoise-lt)}
.center{text-align:center;margin-left:auto;margin-right:auto}
.center .eyebrow{justify-content:center}

/* ---------- Services (what we do) ---------- */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat{background:var(--craie);border:1px solid var(--line);border-radius:18px;padding:30px 26px;transition:transform .2s,box-shadow .2s}
.feat:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.feat .ic{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(140deg,var(--erable),var(--erable-dp));color:#fff;margin-bottom:18px}
.feat h3{font-size:20px;color:var(--ardoise);margin-bottom:9px}
.feat p{font-size:14.5px;color:var(--ardoise-lt)}

/* ---------- Pricing / forfaits ---------- */
.pricing{background:var(--creme-2)}
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:900px;margin:0 auto}
.plan{position:relative;background:var(--craie);border:1px solid var(--line);border-radius:20px;padding:32px 28px;display:flex;flex-direction:column}
.plan.vip{border:2px solid var(--or);background:linear-gradient(180deg,#fffdf8,#fff)}
.plan .tag{position:absolute;top:-13px;left:28px;background:var(--erable);color:#fff;font-size:11px;font-weight:700;letter-spacing:.05em;padding:4px 13px;border-radius:100px;text-transform:uppercase}
.plan.vip .tag{background:var(--or);color:#3a2d08}
.plan .kind{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.plan.vip .kind{color:var(--or-dp)}
.plan h3{font-size:24px;color:var(--ardoise);margin:6px 0 2px}
.plan .price{font-family:'Fraunces',serif;font-weight:700;font-size:40px;color:var(--erable);margin:14px 0 2px;line-height:1}
.plan.vip .price{color:var(--or-dp)}
.plan .price span{font-size:15px;color:var(--gris);font-weight:400;font-family:'Inter',sans-serif}
.plan .per{font-size:13px;color:var(--gris);margin-bottom:20px}
.plan ul{list-style:none;margin-bottom:26px;flex:1}
.plan ul li{font-size:14.5px;color:var(--ardoise-lt);padding:9px 0 9px 28px;position:relative;border-bottom:1px solid var(--line)}
.plan ul li:last-child{border-bottom:none}
.plan ul li::before{content:"";position:absolute;left:0;top:13px;width:16px;height:16px;border-radius:50%;background:rgba(200,16,46,.1)}
.plan ul li::after{content:"✓";position:absolute;left:4px;top:9px;color:var(--erable);font-size:11px;font-weight:700}
.plan.vip ul li::before{background:rgba(201,162,75,.18)}
.plan.vip ul li::after{color:var(--or-dp)}
.plan .btn{width:100%;justify-content:center}
.plan.vip .btn-primary{background:var(--or);color:#3a2d08}
.plan.vip .btn-primary:hover{box-shadow:0 10px 24px -8px rgba(201,162,75,.6)}
.plan .lifetime{font-size:12px;color:var(--or-dp);font-weight:600;margin-top:10px;text-align:center}

/* ---------- Why us ---------- */
.why{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.why-list{display:flex;flex-direction:column;gap:22px}
.why-item{display:flex;gap:16px}
.why-item .n{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:var(--ardoise);color:var(--or);display:grid;place-items:center;font-family:'Fraunces',serif;font-weight:700;font-size:17px}
.why-item h4{font-size:17px;color:var(--ardoise);margin-bottom:4px}
.why-item p{font-size:14.5px;color:var(--ardoise-lt)}
.why-visual{background:linear-gradient(160deg,var(--ardoise),#1b2029);border-radius:22px;padding:40px;color:#fff;position:relative;overflow:hidden}
.why-visual .leaf-bg{position:absolute;right:-30px;bottom:-30px;font-size:200px;opacity:.06}
.why-visual h3{font-size:26px;color:#fff;margin-bottom:14px;position:relative}
.why-visual p{color:rgba(255,255,255,.75);font-size:15px;position:relative;margin-bottom:24px}
.why-visual .stat{position:relative;display:flex;gap:28px;flex-wrap:wrap}
.why-visual .stat .s .v{font-family:'Fraunces',serif;font-weight:700;font-size:34px;color:var(--or)}
.why-visual .stat .s .l{font-size:12.5px;color:rgba(255,255,255,.65)}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(135deg,var(--erable),var(--erable-dp));color:#fff;text-align:center;padding:72px 0}
.cta-band h2{font-size:clamp(28px,4vw,42px);margin-bottom:14px;color:#fff}
.cta-band p{font-size:17px;color:rgba(255,255,255,.9);max-width:34em;margin:0 auto 30px}
.cta-band .btn-primary{background:#fff;color:var(--erable)}
.cta-band .btn-primary:hover{box-shadow:0 12px 30px -8px rgba(0,0,0,.35)}

/* ---------- Footer ---------- */
.site-foot{background:var(--ardoise);color:rgba(255,255,255,.8);padding:56px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;margin-bottom:40px}
.site-foot .pin-mark .name{color:#fff}
.site-foot p.desc{font-size:14px;color:rgba(255,255,255,.6);margin-top:14px;max-width:26em}
.site-foot h5{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--or);margin-bottom:16px}
.site-foot ul{list-style:none}
.site-foot ul li{margin-bottom:10px}
.site-foot ul li a{font-size:14px;color:rgba(255,255,255,.7);transition:color .18s}
.site-foot ul li a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:rgba(255,255,255,.5)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  .hero-card{max-width:380px;margin:0 auto}
  .feats{grid-template-columns:1fr 1fr}
  .why{grid-template-columns:1fr;gap:34px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .nav{position:fixed;inset:72px 0 auto 0;background:var(--creme);flex-direction:column;padding:24px;gap:18px;border-bottom:1px solid var(--line);transform:translateY(-120%);transition:transform .3s;z-index:99}
  .nav.open{transform:translateY(0)}
  .nav-toggle{display:block}
  .feats{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero{padding:54px 0 60px}
  .section{padding:60px 0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}