/* Front-page-only styles.
 * Design tokens, base reset, container, header, buttons and typography
 * helpers live in style.css. Anything here is specific to the home page.
 *
 * Front-page-local supplemental tokens:
 */
:root{
  --r-xl:28px;
  --serif:var(--sans); /* Maquette uses Inter for titles too */
}

/* ===================== HEADER ===================== */
.site-header{
  position:sticky;top:0;left:0;right:0;z-index:50;
  background:var(--teal-900);
  color:var(--on-dark);
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(0,79,70,.92);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  box-shadow:0 4px 16px rgba(0,40,35,.18);
}
.site-header__inner{
  display:flex;align-items:center;gap:2.5rem;
  padding:18px 0;
}
.brand{
  display:flex;align-items:center;
  flex-shrink:0;color:var(--on-dark);
}
.brand__logo{
  height:54px;width:auto;display:block;
  image-rendering:auto;
}

.nav{flex:1;display:flex;justify-content:center}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.85rem}
.nav a{
  color:var(--on-dark);font-weight:500;font-size:.93rem;
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.6rem 0;position:relative;
  transition:color .2s var(--ease);
}
.nav a:hover{color:#fff}
.nav .has-sub::after{
  content:"";width:6px;height:6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);display:inline-block;margin-left:.3rem;opacity:.7;
}
.nav .is-active{color:#fff}
.nav .is-active::before{
  content:"";position:absolute;bottom:.18rem;left:0;right:0;
  height:1.5px;background:#fff;border-radius:1px;
}
.nav .has-sub.is-active::after{opacity:.85}

.search-btn{
  width:42px;height:42px;border-radius:50%;
  background:var(--terra);color:#fff;
  display:grid;place-items:center;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.search-btn:hover{background:var(--terra-deep);transform:scale(1.05)}
.search-btn svg{width:18px;height:18px}
.menu-toggle{display:none}

/* ===================== HERO ===================== */
.hero{
  position:relative;
  background:var(--teal-900);
  color:var(--on-dark);
  border-bottom-left-radius:32px;border-bottom-right-radius:32px;
  padding:3rem 0 3.5rem;
  min-height:460px;
}
.hero__photo{overflow:hidden;border-bottom-left-radius:32px;border-bottom-right-radius:32px}
.section-deco{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:6;
}
.hero__photo{
  position:absolute;inset:0;
  background-image:url("../images/hero-aerial-farm.png");
  background-size:cover;background-position:center;
}
.hero__photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(0,79,70,.55) 0%,
    rgba(0,79,70,.25) 45%,
    rgba(0,79,70,.10) 80%,
    rgba(0,79,70,.0) 100%);
}

/* Decorative band — panel + 3 root vegetables anchored at the bottom-
   center-left of the hero, slightly under the "En savoir plus" button,
   matching the maquette. Hidden on small viewports. */
.hero__veggies{
  position:absolute;left:max(3rem, calc(50vw - 620px + 140px));bottom:80px;
  width:min(26vw, 340px);height:auto;
  pointer-events:none;
  z-index:6;
  filter:drop-shadow(0 6px 14px rgba(0,40,35,.3));
}
@media (max-width:860px){
  .hero__veggies{display:none}
}
.hero__inner{
  position:relative;
  display:grid;grid-template-columns:1.05fr 1fr;
  gap:3rem;align-items:center;
  padding:1rem 0;
  z-index:2;
}
.hero__title{
  /* Figma: "Titre strate home" — Montserrat Bold (base 48), bumpé à 56 pour plus d'impact */
  font-family:var(--sans);font-weight:700;
  font-size:clamp(2.25rem, 3.9vw, 3.5rem);
  line-height:1.2;letter-spacing:0.04em;
  margin:0 0 1rem;color:#fff;
}
.hero__sub{
  /* Figma: "Grand - defaut" — Montserrat Regular 18 / 150% / 0% */
  font-family:var(--sans);font-weight:400;
  font-size:1.125rem;line-height:1.5;letter-spacing:0;
  color:var(--on-dark-soft);
  margin:0 0 2rem;
}
.hero__illu{
  position:relative;
  width:100%;max-width:480px;justify-self:end;
  margin-right:-1rem;
}
.hero__illu img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 8px 18px rgba(0,40,35,.45));
}

/* ===================== INTRO CARD ===================== */
.intro-wrap{
  margin-top:-110px;
  position:relative;z-index:10;
  padding:0 var(--gutter);
}
.intro-card{
  background:var(--teal-900);
  color:#fff;
  border-radius:24px;
  padding:3rem 3rem 2.75rem;
  text-align:center;
  max-width:1036px;margin:0 auto;
  box-shadow:0 24px 48px -12px rgba(0,40,35,.30);
}
.intro-card h2{
  font-family:var(--sans);font-weight:800;
  font-size:clamp(1.7rem,2.6vw,2.2rem);
  line-height:1.15;letter-spacing:-.018em;
  margin:0 0 1.25rem;color:#fff;
}
.intro-card p{
  /* Figma: "Chapo" — Montserrat Regular 20 / 150% / 0% */
  margin:0 auto 1.75rem;
  color:#fff;
  font-family:var(--sans);font-weight:400;
  font-size:1.25rem;line-height:1.5;letter-spacing:0;
  max-width:62ch;
}
.intro-card p strong{font-weight:600}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.5rem;border-radius:var(--r-pill);
  font-family:var(--sans);font-weight:600;font-size:.9rem;
  line-height:1;letter-spacing:.01em;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;cursor:pointer;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--terra);color:#fff;box-shadow:0 6px 16px -4px rgba(199,81,38,.45)}
.btn--primary:hover{background:var(--terra-deep);box-shadow:0 8px 20px -4px rgba(141,42,6,.5)}
.btn--outline{background:transparent;color:var(--terra);border:1.5px solid var(--terra)}
.btn--outline:hover{background:var(--terra);color:#fff}
.btn--white{background:#fff;color:var(--terra)}
.btn--white:hover{background:var(--cream)}
.btn .arrow{transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

/* ===================== SECTIONS ===================== */
.section{padding:5.5rem 0;position:relative}
.section--cream{background:var(--cream)}
.section--tight{padding:4rem 0}

/* (pattern overlay removed — cleaner cream sections) */

/* Section heading */
.section__head{
  text-align:center;
  margin-bottom:3rem;
  position:relative;
}
.h-section{
  font-family:var(--sans);font-weight:800;
  font-size:clamp(2rem, 3.4vw, 2.8rem);
  line-height:1.05;letter-spacing:-.018em;
  color:var(--terra);
  margin:0 0 .65rem;
}
.h-section--teal{color:var(--teal-900)}
.section__head .lead{
  /* Figma: "Chapo" — Montserrat Regular 20 / 150% / 0% */
  color:var(--teal-900);
  font-size:1.25rem;line-height:1.5;letter-spacing:0;
  font-weight:400;
  margin:0;
  opacity:.8;
}

.section__cta{text-align:center;margin-top:3rem}

/* ===================== ACTUALITÉS ===================== */
.news-grid{
  display:grid;grid-template-columns:1.45fr 1fr;
  gap:1.75rem;align-items:stretch;
}
.news-side{
  display:flex;flex-direction:column;
  gap:1rem;
}

.news-feature{
  background:#fff;border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-2);
  display:flex;flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.news-feature:hover{transform:translateY(-3px);box-shadow:var(--shadow-3)}
.news-feature__media{aspect-ratio:16/10;overflow:hidden}
.news-feature__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.news-feature:hover .news-feature__media img{transform:scale(1.04)}
.news-feature__body{padding:1.75rem 2rem 2rem}
.news-feature h3{
  font-family:var(--serif);font-weight:600;
  font-size:1.4rem;line-height:1.2;
  color:var(--teal-900);margin:.5rem 0 .85rem;
  letter-spacing:-.008em;
  font-variation-settings:"opsz" 96;
}
.news-feature p{margin:0 0 1rem;color:var(--slate-700);font-size:.93rem;line-height:1.55}

.tag{
  display:inline-block;
  padding:.3rem .7rem;
  background:var(--terra-50);
  color:var(--terra);
  font-size:.66rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;
  border-radius:6px;
}
.meta{
  display:inline-flex;align-items:center;gap:.4rem;
  color:var(--slate-700);font-size:.82rem;
}
.meta svg{width:13px;height:13px;flex-shrink:0}

.news-card{
  background:#fff;border-radius:var(--r-md);
  display:grid;grid-template-columns:130px 1fr;
  overflow:hidden;box-shadow:var(--shadow-1);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.news-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.news-card__media{aspect-ratio:1/1;overflow:hidden}
.news-card__media img{width:100%;height:100%;object-fit:cover}
.news-card__body{padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.4rem;justify-content:center}
.news-card h3{
  font-family:var(--serif);font-weight:600;
  font-size:1rem;line-height:1.25;
  color:var(--teal-900);margin:0;
  letter-spacing:-.005em;
}

/* ===================== VENTE (SVG extrait pixel-perfect) ===================== */
.vente{
  position:relative;
  background:var(--cream);
  padding:0;
  overflow:hidden;
}
.vente__svg{
  display:block;width:100%;height:auto;
  /* preserve native aspect ratio of the section in the maquette: 1440x352 */
}
/* clickable overlays positioned at the buttons drawn inside vente.svg.
   SVG viewBox = "0 1914 1440 352". Real rect coords found in the SVG:
   En savoir plus  → x=499,   y=2138.5, w=154, h=47
   J'achète        → x=669.5, y=2138,   w=248, h=48
   As % of 1440x352:
   Btn1: left=34.65%, top=63.78%, width=10.69%, height=13.35%
   Btn2: left=46.49%, top=63.64%, width=17.22%, height=13.64% */
.vente__btn{
  position:absolute;
  display:block;
  border-radius:9999px;
  z-index:2;
  /* invisible — purely for click capture */
}
.vente__btn--1{ left:34.65%; top:63.78%; width:10.69%; height:13.35% }
.vente__btn--2{ left:46.49%; top:63.64%; width:17.22%; height:13.64% }
.vente__mobile,.ferme__mobile{display:none}


/* ===================== ÉVÈNEMENTS ===================== */
.events-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.event-card{
  background:#fff;border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-2);
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.event-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-3)}
.event-card__media{
  position:relative;aspect-ratio:5/3;overflow:hidden;
}
.event-card__media img{width:100%;height:100%;object-fit:cover}
.event-date{
  position:absolute;top:14px;left:14px;
  background:var(--terra-50);color:var(--terra);
  border-radius:8px;padding:.4rem .65rem;
  text-align:center;line-height:1;
  min-width:50px;
}
.event-date strong{
  display:block;font-family:var(--serif);font-weight:600;
  font-size:1.4rem;letter-spacing:-.02em;margin-bottom:.15rem;
}
.event-date span{
  display:block;font-size:.65rem;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--terra-deep);font-weight:600;
}
.event-card__body{padding:1.25rem 1.5rem 1.5rem}
.event-card__body .tag{margin-bottom:.5rem}
.event-card h3{
  font-family:var(--serif);font-weight:600;
  font-size:1.1rem;line-height:1.2;
  color:var(--teal-900);
  margin:.5rem 0 .85rem;
  letter-spacing:-.005em;
}
.event-card .info{
  display:flex;align-items:flex-start;gap:.5rem;
  font-size:.85rem;color:var(--slate-700);
  margin:.3rem 0;line-height:1.4;
}
.event-card .info svg{width:14px;height:14px;color:var(--terra);flex-shrink:0;margin-top:.18rem}

/* ===================== FERME (SVG) ===================== */
.ferme{
  position:relative;
  background:var(--cream);
  padding:0;
  overflow:hidden;
}
.ferme__svg{display:block;width:100%;height:auto}
/* "Je découvre les 5 jardins" button position in ferme.svg.
   SVG viewBox = "0 3096.61 1440 514". Real rect coords found in the SVG:
   x=626, y=3482.61, w=238, h=48
   As % of 1440x514:
   left = 626/1440 = 43.47%
   top  = (3482.61-3096.61)/514 = 386/514 = 75.10%
   width  = 238/1440 = 16.53%
   height =  48/514  =  9.34% */
.ferme__btn{
  position:absolute;
  left:43.47%; top:75.10%;
  width:16.53%; height:9.34%;
  border-radius:9999px;
  z-index:2;
}

/* ===================== NOTRE PROJET (VIDÉO) ===================== */
.video-wrap{
  max-width:920px;margin:0 auto;
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-3);
  aspect-ratio:16/9;position:relative;cursor:pointer;
  display:block;width:100%;padding:0;border:0;background:transparent;
}
.video-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.video-wrap__play{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(0,0,0,.0) 50%,rgba(0,0,0,.25) 100%);
}
.video-wrap__play span{
  width:74px;height:74px;background:var(--terra);
  border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:1.4rem;
  box-shadow:0 12px 28px -6px rgba(199,81,38,.55);
  transition:transform .35s var(--ease), background .35s var(--ease);
}
.video-wrap:hover .video-wrap__play span{transform:scale(1.08);background:var(--terra-deep)}

/* ===================== DUAL CTAs (SVG) ===================== */
.dual-ctas{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1.5rem;margin-top:4rem;
}
.cta-svg-wrap{
  position:relative;
  border-radius:24px;
  overflow:hidden;
}
.cta-svg-wrap img{display:block;width:100%;height:auto}
/* Visible HTML button overlaying the SVG's broken "Ca m'intéresse" baked-in
   text (the SVG was exported from Figma without the ç glyph). The HTML pill
   covers the SVG button entirely and renders the correct "Ça m'intéresse !".
   SVG viewBox 612x322. Button rect: x=48, y=220 (dark) / y=226 (light), w=171, h=48.
   In %: left=7.84%, top=68.32%/70.19%, w=27.94%, h=14.91%. */
.cta-svg-btn{
  position:absolute;
  left:7.84%; width:27.94%; height:14.91%;
  border-radius:9999px;
  z-index:2;
  background:#fff;
  color:var(--terra);
  font-weight:700;
  font-size:clamp(.8rem, 1vw, 1rem);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.cta-svg-wrap--dark .cta-svg-btn{ top:68.32%; }
.cta-svg-wrap--light .cta-svg-btn{ top:70.19%; }
.cta-svg-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.cta-svg-btn:focus-visible{ outline:3px solid var(--terra); outline-offset:2px; }

/* ===================== PARTENAIRES (slider) ===================== */
.partners{
  position:relative;
  display:flex;align-items:center;gap:1rem;
}
.partners-track{
  flex:1;
  display:flex;
  gap:1rem;
  overflow-x:auto;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding:.5rem 0;
}
.partners-track::-webkit-scrollbar{display:none}
.partners-track__item{
  flex:0 0 calc((100% - 6rem) / 7);
  height:96px;
  display:grid;place-items:center;
  padding:.5rem;
  scroll-snap-align:start;
  transition:transform .25s var(--ease);
}
.partners-track__item:hover{transform:translateY(-2px)}
.partners-track__item img{
  max-height:80px;max-width:100%;
  object-fit:contain;
}
.partners__nav{
  width:42px;height:42px;
  border-radius:50%;
  background:var(--terra);color:#fff;
  display:grid;place-items:center;flex-shrink:0;
  transition:background .2s var(--ease), transform .2s var(--ease);
  cursor:pointer;
}
.partners__nav:hover{background:var(--terra-deep);transform:scale(1.05)}
.partners__nav:disabled{opacity:.35;cursor:default;transform:none}
@media(max-width:1100px){
  .partners-track__item{flex-basis:calc((100% - 4rem) / 5)}
}
@media(max-width:640px){
  .partners-track__item{flex-basis:calc((100% - 2rem) / 3)}
}

/* ===================== FOOTER (SVG) ===================== */
.site-footer{
  background:var(--cream);
  margin-top:4rem;
  padding:0 var(--gutter) 2rem;
  position:relative;
}
.site-footer__inner{
  position:relative;
  max-width:1248px;
  margin:0 auto;
}
.site-footer__svg{
  display:block;width:100%;height:auto;
  border-radius:24px;
}
.footer-overlay{
  position:absolute;
  border-radius:9999px;
  z-index:2;
}
.footer-overlay--don     { left:27.5%; top:35%;   width:8.5%;  height:21.6% }
.footer-overlay--adhere  { left:36.9%; top:35%;   width:6.4%;  height:21.6% }
.footer-overlay--legumes { left:44.2%; top:35%;   width:11%;   height:21.6% }
.footer-overlay--charte  { left:68.2%; top:40%;   width:8.5%;  height:12.9% }
.footer-overlay--cgu     { left:68.2%; top:62.4%; width:18.8%; height:12.4% }
.footer-overlay--fb      { left:12.7%; top:66%;   width:2.3%;  height:14.4%; border-radius:50% }
.footer-overlay--ig      { left:15.9%; top:66%;   width:2.3%;  height:14.4%; border-radius:50% }
.site-footer::before{display:none}
.footer-grid{
  position:relative;
  display:grid;grid-template-columns:1.3fr 1fr 1fr;
  gap:3rem;
}
.footer h4{
  color:#fff;font-family:var(--sans);font-weight:600;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  margin:0 0 1.2rem;
}
.footer-brand__address{
  color:var(--on-dark-soft);
  font-size:.92rem;line-height:1.55;
  margin:.5rem 0 1.25rem;
  font-style:italic;
}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin-bottom:.6rem}
.footer-links a{
  color:var(--on-dark-soft);font-size:.92rem;
  transition:color .2s var(--ease);
}
.footer-links a:hover{color:#fff;text-decoration:underline}
.footer-cta{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.footer-cta .btn{padding:.65rem 1.15rem;font-size:.85rem}

.social{display:flex;gap:.6rem;margin-top:.5rem}
.social a{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.08);
  display:grid;place-items:center;color:#fff;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.social a:hover{background:var(--terra);transform:translateY(-2px)}
.social svg{width:15px;height:15px}

.legal{
  position:relative;margin-top:3rem;padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;color:rgba(249,245,236,.55);font-size:.78rem;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1100px){
  .partners-track{grid-template-columns:repeat(4,1fr)}
  .section__head::before,.section__head::after{display:none}
}
@media (max-width:980px){
  :root{--gutter:24px}
  .hero__inner{grid-template-columns:1fr;gap:2rem}
  .hero__illu{display:none}
  .hero{padding:6.5rem 0 4rem;min-height:auto}
  .news-grid{grid-template-columns:1fr}
  .vente__inner,.farm{grid-template-columns:1fr;gap:2rem}
  .vente__deco-leaves{display:none}
  .events-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr;gap:2.5rem}
  .dual-ctas{grid-template-columns:1fr}
  .section{padding:4.5rem 0}
  .cta-card{grid-template-columns:1fr;gap:1.5rem;padding:2rem}
  .cta-card__illu{height:160px;margin:0 auto;justify-self:center}
}
@media (max-width:860px){
  .intro-wrap{margin-top:2rem;padding:0 1rem;box-sizing:border-box}
  /* Carte legere sur mobile : fond blanc, titre terra, texte teal — homogene avec
     les cartes Vente/Ferme. Reduit la masse visuelle teal sur petit ecran. */
  .intro-card{
    background:#fff;color:var(--teal-900);
    padding:1.75rem 1.5rem;border-radius:18px;
    max-width:none;width:100%;box-sizing:border-box;
    box-shadow:0 14px 32px -18px rgba(0,40,35,.45);
    overflow-wrap:break-word;
  }
  .intro-card h2{font-size:1.55rem;line-height:1.2;color:var(--terra)}
  .intro-card p{font-size:1rem;line-height:1.55;max-width:none;color:var(--teal-900)}
  .hero{padding:5rem 0 3rem;min-height:auto}
}
@media (max-width:640px){
  .events-grid{grid-template-columns:1fr}
  .partners-track{grid-template-columns:1fr 1fr}
  .news-card{grid-template-columns:100px 1fr}
  .news-feature__body{padding:1.5rem 1.5rem 1.75rem}
}


/* SVG home-page sections (vente/ferme) replaced by readable HTML on mobile.
   Placed at end of file so it wins over the base .vente__svg / .ferme__svg
   rules that come later in the cascade. */
@media (max-width:780px){
  .vente__svg,.ferme__svg{display:none}
  .vente__btn,.ferme__btn{display:none}
  .vente,.ferme{padding:2rem 1rem;text-align:center}
  .vente__mobile,.ferme__mobile{
    display:block;
    max-width:520px;margin:0 auto;
    background:#fff;
    border-radius:18px;
    padding:1.75rem 1.5rem;
    box-shadow:0 14px 32px -18px rgba(0,40,35,.45);
  }
  .vente__mobile-title,.ferme__mobile-title{
    font-family:var(--sans);font-weight:800;
    font-size:1.6rem;line-height:1.15;
    color:var(--terra);margin:0 0 .75rem;
    letter-spacing:-.01em;
  }
  .vente__mobile-text,.ferme__mobile-text{
    font-family:var(--sans);font-weight:400;
    font-size:1rem;line-height:1.5;
    color:var(--teal-900);margin:0 0 1.5rem;
  }
  .vente__mobile-ctas{display:flex;flex-direction:column;gap:.75rem;align-items:center}
}

/* Sur mobile la pastille "Ça m'intéresse" overlay devient illisible (~100x28).
   On l'agrandit pour bien recouvrir le bouton baked-in du SVG et rester lisible.
   Les top% respectent la position des baked-in buttons (68.32% dark / 70.19% light)
   centrée verticalement dans la zone élargie. */
@media (max-width:780px){
  .cta-svg-btn{
    left:5%;
    width:44%;
    height:18%;
    font-size:.92rem;
    padding:0 .5rem;
    border-radius:9999px;
  }
  .cta-svg-wrap--dark .cta-svg-btn{top:66.8%}
  .cta-svg-wrap--light .cta-svg-btn{top:68.7%}
}
@media (max-width:520px){
  .cta-svg-btn{
    width:50%;
    height:19%;
    font-size:.82rem;
  }
  .cta-svg-wrap--dark .cta-svg-btn{top:66.3%}
  .cta-svg-wrap--light .cta-svg-btn{top:68.2%}
}