/* ============================================================
   GETAX — responsive layer (tablet / mobile)
   ------------------------------------------------------------
   The Claude Design source is desktop-only and styles every
   element inline. These rules override the inline styles with
   !important, targeting them by their inline-style substrings so
   no template edits are needed (except the header menu button).
   ============================================================ */

/* Mobile menu button — hidden on desktop, shown from 900px down */
#getax-burger{
  display:none; margin-left:auto; flex:none;
  align-items:center; justify-content:center;
  width:44px; height:44px; padding:0;
  background:transparent; border:1px solid #E3E8EF; border-radius:8px;
  color:#14203A; cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
#getax-burger:hover{ background:#F6F8FB; border-color:#cbd5e1; }
#getax-burger:focus-visible{ outline:2px solid #1F3C88; outline-offset:2px; }

/* ---------------- Tablet & below (<= 900px) ---------------- */
@media (max-width: 1080px){
  #getax-burger{ display:inline-flex; }

  /* Header collapses into a toggled panel (≤1080 : la 3e action « Payer ma taxe »
     ne tient plus sur une ligne avec la nav — on bascule en menu plus tôt) */
  header .getax-hdr-inner{
    flex-wrap:wrap !important;
    height:auto !important;
    min-height:64px;
    padding:10px 20px !important;
    row-gap:0;
  }
  header nav{
    order:3; flex-basis:100% !important;
    flex-direction:column; align-items:stretch !important;
    gap:0 !important; margin:0 !important;
    background:#fff;
    max-height:0; overflow:hidden;
    transition:max-height .34s cubic-bezier(.16,1,.3,1);
  }
  header [data-mcta]{
    order:4; flex-basis:100% !important;
    flex-direction:column; align-items:stretch !important;
    gap:10px !important;
    background:#fff;
    max-height:0; overflow:hidden; padding:0;
    transition:max-height .34s cubic-bezier(.16,1,.3,1);
  }
  header.nav-open nav{ max-height:70vh; overflow:auto; padding:6px 0 4px; }
  header.nav-open [data-mcta]{ max-height:220px; padding:8px 0 14px; }
  header nav a{
    padding:14px 6px !important;
    border-bottom:1px solid #eef1f6;
    font-size:16px !important;
  }
  header nav a::after{ display:none !important; }         /* underline anim off in the panel */
  header [data-mcta] a{ justify-content:center; padding:14px 16px !important; font-size:14px !important; }
}

@media (max-width: 900px){
  /* 3- and 4-column grids → 2 columns */
  main [style*="grid-template-columns:repeat(3"]{ grid-template-columns:repeat(2,1fr) !important; }
  main [style*="grid-template-columns:repeat(4"]{ grid-template-columns:repeat(2,1fr) !important; }
}

/* ---------------- Phone (<= 600px) ---------------- */
@media (max-width: 600px){
  /* Stack every grid (multi-col, asymmetric, footer) */
  main [style*="grid-template-columns"],
  footer [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }

  /* Container side padding */
  main [style*="max-width:1180px"],
  main [style*="max-width:940px"],
  footer [style*="max-width:1180px"]{
    padding-left:20px !important; padding-right:20px !important;
  }

  /* Fluid headings & lead text */
  main h1[style]{ font-size:clamp(30px,8.5vw,42px) !important; line-height:1.08 !important; letter-spacing:-.02em !important; }
  main h2[style]{ font-size:clamp(23px,6.4vw,32px) !important; line-height:1.16 !important; }
  main p[style*="font-size:31px"]{ font-size:19px !important; line-height:1.5 !important; }
  main p[style*="font-size:19px"],
  main p[style*="font-size:18.5px"]{ font-size:16px !important; }

  /* Hero heights */
  main [style*="min-height:620px"]{ min-height:80vh !important; }
  main [style*="min-height:460px"]{ min-height:auto !important; }

  /* Sticky side columns shouldn't stick once stacked.
     NB: match on the bare word "sticky" (not "position:sticky"): the reveal
     animation calls commitStyles() on these [data-anim] columns, which makes the
     browser re-serialize the whole inline style attribute WITH spaces
     ("position: sticky"), so a "position:sticky" substring selector would no
     longer match. "sticky" only ever appears in position declarations here. */
  main [style*="sticky"]{ position:static !important; top:auto !important; }
}

/* ---------------- « Pourquoi GETAX » : radial → liste (<= 1024px) ----------------
   The radial is a fixed 1080x700 canvas whose 5 reasons, 5 orbiting nodes and CTA
   are absolutely positioned at hard-coded pixels — it cannot shrink and simply
   overflows the viewport. Scaling it down would make the labels unreadable, so on
   narrow screens we reflow the 5 central panels (which already hold the full
   number + title + description of each reason) into a single stacked card, hide the
   decorative rings + orbiting icons, and drop the CTA below as a full-width block. */
@media (max-width: 1024px){
  /* 1. Un-fix the 1080x700 canvas → fluid, auto-height column */
  main [style*="width:1080px"][style*="height:700px"]{
    width:100% !important; height:auto !important; margin:0 !important;
    display:flex !important; flex-direction:column !important; gap:16px !important;
  }
  /* 2. Hide the SVG rings and the 5 orbiting icon nodes.
     The nodes carry a bound transform ({{ qSc* }}) that dc-lite rewrites, so their
     style attribute re-serializes with spaces ("width: 160px") — match instead on
     the bare "pointer" of their cursor:pointer, which is space-proof and unique to
     the nodes (the center card and CTA have no pointer cursor). */
  main [style*="width:1080px"] > svg,
  main [style*="width:1080px"] > div[style*="pointer"]{ display:none !important; }
  /* 3. Center circle → full-width rounded card wrapping the 5 reasons */
  main [style*="width:1080px"] > div[style*="width:360px"]{
    position:static !important; left:auto !important; top:auto !important;
    width:100% !important; height:auto !important;
    border-radius:16px !important; overflow:hidden;
    order:1;
  }
  /* 4. The 5 reason panels → all visible, stacked as contextual photo cards.
     position:relative (not static) so each panel's absolute scrim/overlay is
     anchored to the panel, not to a distant positioned ancestor. Text sits at the
     bottom over the darkest part of the gradient, like the site's image cards. */
  main [style*="width:1080px"] > div[style*="width:360px"] > div{
    position:relative !important; inset:auto !important;
    opacity:1 !important; transform:none !important; transition:none !important;
    align-items:flex-start !important; justify-content:flex-end !important; text-align:left !important;
    min-height:210px !important;
    padding:26px 24px !important;
    border-bottom:2px solid #0A1430 !important;
  }
  main [style*="width:1080px"] > div[style*="width:360px"] > div:last-child{
    border-bottom:none !important;
  }
  /* 5. CTA card → full-width block at the end */
  main [style*="width:1080px"] > a{
    position:static !important; left:auto !important; top:auto !important;
    width:100% !important; box-sizing:border-box !important;
    order:2;
  }
}

/* ============================================================
   « Pourquoi GETAX » — centre SVG + images contextuelles (PC)
   Desktop only: an SVG geolocation motif fills the centre circle,
   and each active reason bursts 3 contextual photos out of the
   centre into the space around the circle. On <=1024px this whole
   spatial layer is dropped and the reasons reflow into photo cards.
   ============================================================ */
.q-svg-pulse{ transform-box:fill-box; transform-origin:center; opacity:0; }
@media (prefers-reduced-motion: no-preference){
  .q-svg-pulse{ animation:q-svg-pulse 4.4s ease-out infinite; }
}
@keyframes q-svg-pulse{ 0%{ transform:scale(.30); opacity:.6 } 70%{ opacity:.12 } 100%{ transform:scale(1); opacity:0 } }

/* burst layer: scales out from the circle centre (transform-origin = canvas centre = circle centre) */
.q-media{ position:absolute; inset:0; z-index:1; transform-origin:50% 50%;
  transition:transform .8s cubic-bezier(.22,.9,.24,1), opacity .55s ease; pointer-events:none; will-change:transform,opacity; }
.q-shot{ position:absolute;
  /* several DISTINCT shapes (blob, hexagon, arch, leaf) per slot, each with a
     ~5px feathered edge via a slightly blurred SVG-path mask (blur = the contour) */
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%20200%27%3E%3Cdefs%3E%3Cfilter%20id%3D%27f%27%20x%3D%27-25%25%27%20y%3D%27-25%25%27%20width%3D%27150%25%27%20height%3D%27150%25%27%3E%3CfeGaussianBlur%20stdDeviation%3D%271.15%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20filter%3D%27url%28%23f%29%27%20fill%3D%27%23fff%27%20d%3D%27M112%2C20%20C158%2C26%20184%2C58%20180%2C102%20C176%2C140%20150%2C166%20108%2C178%20C74%2C188%2030%2C176%2016%2C136%20C4%2C102%2020%2C54%2052%2C32%20C70%2C20%2088%2C17%20112%2C20Z%27%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%20200%27%3E%3Cdefs%3E%3Cfilter%20id%3D%27f%27%20x%3D%27-25%25%27%20y%3D%27-25%25%27%20width%3D%27150%25%27%20height%3D%27150%25%27%3E%3CfeGaussianBlur%20stdDeviation%3D%271.15%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20filter%3D%27url%28%23f%29%27%20fill%3D%27%23fff%27%20d%3D%27M112%2C20%20C158%2C26%20184%2C58%20180%2C102%20C176%2C140%20150%2C166%20108%2C178%20C74%2C188%2030%2C176%2016%2C136%20C4%2C102%2020%2C54%2052%2C32%20C70%2C20%2088%2C17%20112%2C20Z%27%2F%3E%3C%2Fsvg%3E");
  filter:drop-shadow(0 16px 30px rgba(9,17,40,.26)); }
.q-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.q-media .q-shot:nth-child(2){ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%20200%27%3E%3Cdefs%3E%3Cfilter%20id%3D%27f%27%20x%3D%27-25%25%27%20y%3D%27-25%25%27%20width%3D%27150%25%27%20height%3D%27150%25%27%3E%3CfeGaussianBlur%20stdDeviation%3D%271.15%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20filter%3D%27url%28%23f%29%27%20fill%3D%27%23fff%27%20d%3D%27M10%2C100%20L55%2C22%20L145%2C22%20L190%2C100%20L145%2C178%20L55%2C178%20Z%27%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%20200%27%3E%3Cdefs%3E%3Cfilter%20id%3D%27f%27%20x%3D%27-25%25%27%20y%3D%27-25%25%27%20width%3D%27150%25%27%20height%3D%27150%25%27%3E%3CfeGaussianBlur%20stdDeviation%3D%271.15%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20filter%3D%27url%28%23f%29%27%20fill%3D%27%23fff%27%20d%3D%27M10%2C100%20L55%2C22%20L145%2C22%20L190%2C100%20L145%2C178%20L55%2C178%20Z%27%2F%3E%3C%2Fsvg%3E"); }
.q-media .q-shot:nth-child(3){ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%20200%27%3E%3Cdefs%3E%3Cfilter%20id%3D%27f%27%20x%3D%27-25%25%27%20y%3D%27-25%25%27%20width%3D%27150%25%27%20height%3D%27150%25%27%3E%3CfeGaussianBlur%20stdDeviation%3D%271.15%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20filter%3D%27url%28%23f%29%27%20fill%3D%27%23fff%27%20d%3D%27M20%2C190%20L20%2C92%20A80%2C80%200%200%201%20180%2C92%20L180%2C190%20Z%27%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%20200%27%3E%3Cdefs%3E%3Cfilter%20id%3D%27f%27%20x%3D%27-25%25%27%20y%3D%27-25%25%27%20width%3D%27150%25%27%20height%3D%27150%25%27%3E%3CfeGaussianBlur%20stdDeviation%3D%271.15%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20filter%3D%27url%28%23f%29%27%20fill%3D%27%23fff%27%20d%3D%27M20%2C190%20L20%2C92%20A80%2C80%200%200%201%20180%2C92%20L180%2C190%20Z%27%2F%3E%3C%2Fsvg%3E"); }
.q-media .q-shot:nth-child(4){ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%20200%27%3E%3Cdefs%3E%3Cfilter%20id%3D%27f%27%20x%3D%27-25%25%27%20y%3D%27-25%25%27%20width%3D%27150%25%27%20height%3D%27150%25%27%3E%3CfeGaussianBlur%20stdDeviation%3D%271.15%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20filter%3D%27url%28%23f%29%27%20fill%3D%27%23fff%27%20d%3D%27M26%2C174%20C6%2C98%2058%2C22%20174%2C26%20C194%2C102%20142%2C178%2026%2C174%20Z%27%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%20200%27%3E%3Cdefs%3E%3Cfilter%20id%3D%27f%27%20x%3D%27-25%25%27%20y%3D%27-25%25%27%20width%3D%27150%25%27%20height%3D%27150%25%27%3E%3CfeGaussianBlur%20stdDeviation%3D%271.15%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20filter%3D%27url%28%23f%29%27%20fill%3D%27%23fff%27%20d%3D%27M26%2C174%20C6%2C98%2058%2C22%20174%2C26%20C194%2C102%20142%2C178%2026%2C174%20Z%27%2F%3E%3C%2Fsvg%3E"); }

@media (max-width: 1024px){
  /* desktop-only spatial layer off; reflowed reasons become photo cards */
  .q-media, .q-svg{ display:none !important; }
  main [style*="width:1080px"] > div[style*="width:360px"] > div:nth-child(2){
    background:linear-gradient(180deg,rgba(7,14,34,.30),rgba(7,14,34,.84)),url('../assets/photos/04-fiscalite-entreprises-basilique-mairie.webp') center/cover !important; }
  main [style*="width:1080px"] > div[style*="width:360px"] > div:nth-child(3){
    background:linear-gradient(180deg,rgba(7,14,34,.30),rgba(7,14,34,.84)),url('../assets/photos/06-adressage-urbain-agents-terrain.webp') center/cover !important; }
  main [style*="width:1080px"] > div[style*="width:360px"] > div:nth-child(4){
    background:linear-gradient(180deg,rgba(7,14,34,.30),rgba(7,14,34,.84)),url('../assets/photos/12-analystes-sig-administration.webp') center/cover !important; }
  main [style*="width:1080px"] > div[style*="width:360px"] > div:nth-child(5){
    background:linear-gradient(180deg,rgba(7,14,34,.30),rgba(7,14,34,.84)),url('../assets/photos/14-numerisation-archives-fiscales.webp') center/cover !important; }
  main [style*="width:1080px"] > div[style*="width:360px"] > div:nth-child(6){
    background:linear-gradient(180deg,rgba(7,14,34,.30),rgba(7,14,34,.84)),url('../assets/photos/07-accompagnement-fiscal-commercante.webp') center/cover !important; }
}

/* ============================================================
   Mobile quick-action bar — fixed bottom bar on phones (<=600px)
   WhatsApp / Appeler / Devis, always within thumb reach. Additive,
   desktop untouched. Hidden while typing (see mobile-nav.js) so it
   never covers a focused field or the form's submit button.
   ============================================================ */
.getax-mbar{ display:none; }
@media (max-width:600px){
  .getax-mbar{
    display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:#fff; border-top:1px solid #E3E8EF;
    box-shadow:0 -6px 24px rgba(20,32,57,.14);
    padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));
  }
  .getax-mbar-btn{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    padding:9px 3px; border-radius:11px; text-decoration:none;
    font:800 11px/1 Montserrat,sans-serif; letter-spacing:.005em;
    -webkit-tap-highlight-color:transparent;
    transition:filter .18s ease, transform .1s ease;
  }
  .getax-mbar-btn:active{ transform:translateY(1px); filter:brightness(.95); }
  .getax-mbar-btn i, .getax-mbar-btn svg{ width:19px; height:19px; }
  .mbar-pay{ background:#F9B438; color:#14203A; }
  .mbar-wa{ background:#25D366; color:#08351E; }
  .mbar-call{ background:#152039; color:#fff; }
  .mbar-quote{ background:#EEF2F8; color:#14203A; }
  @media (max-width:360px){ .getax-mbar-btn{ font-size:10px; padding:9px 2px; } }
  /* keep the page end clear of the bar */
  footer[data-curve]{ padding-bottom:78px !important; }
  /* hidden while a field is focused (keyboard open) */
  body.mbar-typing .getax-mbar{ display:none; }
}

/* ── Bande « Paiement en ligne » (Service 01) : empilement mobile ── */
@media (max-width: 760px){
  .getax-payband{ grid-template-columns:1fr !important; gap:22px !important; padding:30px 26px !important; }
  .getax-payband > a{ justify-content:center; width:100%; }
}
@media (max-width: 420px){
  .getax-payband-ops{ flex-wrap:wrap; }
}

/* ============================================================
   Contact — formulaire en wizard (3 étapes)
   ============================================================ */
.wz-step{ display:none; }
.wz-step.is-active{ display:grid; }
.wz-form input:focus,.wz-form select:focus,.wz-form textarea:focus{ border-color:#1F3C88; outline:2px solid rgba(31,60,136,.18); }
.wz-steps{ display:flex; align-items:center; gap:10px; margin-bottom:30px; }
.wz-dot{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; color:#8A94A6; }
.wz-dot .wz-num{ display:flex; width:30px; height:30px; flex:none; border-radius:50%; align-items:center; justify-content:center; background:#EEF1F6; color:#8A94A6; font:800 13px/1 Montserrat,sans-serif; transition:background .25s ease,color .25s ease; }
.wz-dot b{ font:700 12.5px/1.2 Montserrat,sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wz-dot.is-active{ color:#14203A; }
.wz-dot.is-active .wz-num{ background:#1F3C88; color:#fff; }
.wz-dot.is-done{ color:#4B5568; }
.wz-dot.is-done .wz-num{ background:#1E9E4A; color:#fff; }
.wz-nav{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:26px; }
.wz-back,.wz-next,.wz-submit{ border-radius:6px; padding:13px 26px; font:700 14px/1 'Source Sans 3',sans-serif; cursor:pointer; border:0; transition:background .2s ease,border-color .2s ease; }
.wz-next,.wz-submit{ background:#1F3C88; color:#fff; }
.wz-next:hover,.wz-submit:hover{ background:#2E51A8; }
.wz-back{ background:#fff; color:#14203A; border:1.5px solid #C7D0E0; }
.wz-back:hover{ background:#F6F8FB; border-color:#1F3C88; }
.wz-note{ font-size:13px; line-height:1.5; color:#7B8698; }
@media (max-width:600px){
  .wz-dot b{ display:none; }
  .wz-dot{ flex:none; }
  .wz-steps{ gap:16px; }
  .wz-back,.wz-next,.wz-submit{ flex:1; min-width:130px; text-align:center; }
}