/* ============================================================
   AMIGRAPH — Homepage static integration
   Base styles, components & micro-interactions
   (Tailwind utilities loaded via CDN; this layer adds
    custom components, motion and decorative details.)
   ============================================================ */

:root {
  --primary: #E2161C;
  --navy: #00071E;
  --navy2: #0A1330;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: 'Roboto', sans-serif; }

::selection { background: var(--primary); color: #fff; }

/* hide scrollbars on horizontal sliders */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------- Logo mark ---------- */
.logo-mark {
  display: inline-block;
  width: 1.75rem;
  height: 1.75rem;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: var(--primary);
  position: relative;
}
.logo-mark::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 18%;
  width: 34%; height: 34%;
  transform: translateX(-50%);
  background: #fff;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* ---------- Buttons (micro-interaction) ---------- */
.btn {
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background-color .2s ease, color .2s ease;
  will-change: transform;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -8px rgba(226, 22, 28, .55);
  filter: brightness(1.05);
}
.btn-primary:active { transform: translateY(0); }
.btn-outline:hover { transform: translateY(-2px); }

/* arrow nudge inside buttons */
.btn .arrow { display: inline-block; transition: transform .25s ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Card lift ---------- */
.card-lift { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 24px 44px -20px rgba(0, 7, 30, .35); }

/* ---------- Nav underline ---------- */
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -9px;
  height: 9px;
  background: url("../img/nav-underline.svg") no-repeat center / 100% 100%;
  opacity: 0;
  transform: scaleX(.55);
  transform-origin: left center;
  transition: opacity .2s ease, transform .28s ease;
  pointer-events: none;
}
.nav-link:hover::after,
.nav-link.is-active::after { opacity: 1; transform: scaleX(1); }

/* dropdown caret rotation on hover */
.has-caret .caret { transition: transform .25s ease; }
.has-caret:hover .caret { transform: rotate(180deg); }

/* ---------- Hero ghost badge (outline ring + curved text) ---------- */
.badge-spin { animation: spin 22s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* the arrow in the middle stays upright while the ring text rotates */
.badge-arrow { color: var(--primary); }

/* soft floating motion on the hero press image */
.float-soft { animation: floatSoft 6s ease-in-out infinite; }
@keyframes floatSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ---------- Decorative curved line (testimonial bg) ---------- */
/* sweeps from the left mid-height up toward the top-right, behind the card */
.deco-curve {
  position: absolute;
  pointer-events: none;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.deco-curve svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Trust logo marquee ---------- */
.logo-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.logo-track { display: flex; align-items: center; width: max-content; animation: marquee 32s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-track img { height: 48px; width: auto; margin: 0 60px; object-fit: contain; opacity: 1; transition: opacity .3s ease; }
.logo-track img:hover { opacity: 1; }
/* About page: smaller trust-logo marquee, grayscale until hover */
.about-logos .logo-track img { height: 120px; filter: grayscale(1); transition: filter .3s ease; }
.about-logos:hover .logo-track img { filter: grayscale(0); }

/* Utilities absent from the compiled tailwind.css build (JIT never emitted
   them — no CDN). Used by the Boutique gamme icon chips. */
.w-14 { width: 3.5rem; }
.h-7  { height: 1.75rem; }
.w-7  { width: 1.75rem; }
/* pt-18 (4.5rem/72px) — not in Tailwind's default scale (16 -> 20) */
.pt-18 { padding-top: 4.5rem; }
@media (min-width: 1024px) { .lg\:pt-18 { padding-top: 4.5rem; } }

/* SociableKIT LinkedIn widget: remove border + hide free-plan branding/tutorial */
.sk-ww-linkedin-page-post { border: 0px solid #E5E5E5 !important; }
#tutorial_link, .tutorial_link,
[class*="custom-branding"], [id*="custom-branding"] { display: none !important; }

/* ---- Blog "Nos articles": hover a card to expand it (Figma) ----
   Desktop only: flex row so flex-grow animates the width. The active card
   (JS toggles .is-active on mouseenter) stays wide even after the mouse
   leaves — it only changes when another card is hovered. First card starts
   active (also the no-JS fallback). Mobile keeps the stacked grid. */
@media (min-width: 1024px) {
  .blog-featured { display: flex; }
  .blog-featured > a { flex: 1 1 0; min-width: 0; transition: flex-grow .6s cubic-bezier(.4, 0, .2, 1); }
  .blog-featured > a.is-active { flex-grow: 2.97; }
}

/* ---- Product detail: accordions (<details>) + quantity stepper (Figma) ---- */
.amg-acc { border: 1px solid rgba(0, 7, 30, .08); border-radius: 8px; }
.amg-acc + .amg-acc { margin-top: 12px; }
.amg-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 16px 24px; }
.amg-acc > summary::-webkit-details-marker { display: none; }
.amg-acc-title { font-size: 20px; font-weight: 500; color: #646464; }
.amg-acc-ico { height: 20px; width: 20px; flex: none; color: #9ca3af; transition: transform .25s ease; }
.amg-acc[open] > summary .amg-acc-ico { transform: rotate(180deg); }
.amg-acc-body { padding: 0 24px 22px; color: #6b7280; line-height: 1.7; }
.amg-acc-body :where(p, ul, ol) { margin: 0 0 12px; }
.amg-acc-body ul { list-style: disc; padding-left: 20px; }
.amg-acc-body dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.amg-acc-body dt { color: #9ca3af; }
.amg-acc-body dd { color: #00071e; font-weight: 500; }

.amg-qty { display: inline-flex; align-items: center; border: 1px solid rgba(0, 0, 0, .16); border-radius: 8px; overflow: hidden; }
.amg-qty button { width: 44px; height: 41px; display: flex; align-items: center; justify-content: center;
  color: #00071e; font-size: 20px; line-height: 1; transition: background .2s ease; }
.amg-qty button:hover { background: #f3f3f3; }
.amg-qty input { width: 46px; height: 41px; border: 0; text-align: center; font-weight: 500; color: #00071e;
  font-family: inherit; font-size: 16px; -moz-appearance: textfield; background: transparent; }
.amg-qty input::-webkit-outer-spin-button, .amg-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Global: all h2 headings using lg:text-[64px] -> 55px on desktop.
   Override lives here because the compiled tailwind.css only ships
   text-[64px] (no 55px utility); h2-scoped so the h3 slider title stays 64px. */
@media (min-width:1024px){
  h2.lg\:text-\[64px\]{ font-size:55px; }
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- GSAP reveal base state ---------- */
.reveal { opacity: 0; transform: translateY(28px); }
.reveal-img { opacity: 0; transform: scale(1.04); }

/* fallback: if JS/GSAP fails, show everything */
.no-js .reveal,
.no-js .reveal-img { opacity: 1; transform: none; }

/* ---------- Trust logos ---------- */
.trust-logo {
  filter: grayscale(1);
  opacity: 1;
  transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
.trust-logo:hover { filter: grayscale(0); opacity: 1; transform: translateY(-2px); }

/* ---------- Services slider thumbnails ---------- */
.service-thumb { transition: opacity .4s ease, transform .4s ease; }

/* ---------- Slider dots ---------- */
.dot { transition: width .3s ease, background-color .3s ease; }

/* ---------- Form fields ---------- */
.field {
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(226, 22, 28, .12);
  outline: none;
}

/* ---------- Footer watermark ---------- */
.footer-watermark {
  font-family: 'Roboto', sans-serif;
  font-weight: 800;
  line-height: .8;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .04);
  user-select: none;
  white-space: nowrap;
}

/* ---------- Social icons ---------- */
.social-ico { transition: background-color .25s ease, transform .25s ease; }
.social-ico:hover { transform: translateY(-3px); }

/* ---------- Scroll progress bar ---------- */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px; width: 0;
  background: var(--primary);
  z-index: 60;
  transition: width .1s linear;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .badge-spin, .float-soft, .logo-track { animation: none; }
  html { scroll-behavior: auto; }
  .reveal, .reveal-img { opacity: 1; transform: none; }
}

/* ===== Homepage CF7 quote form (scoped) ===== */
/* Deterministic 2-col layout (the Tailwind CDN doesn't reliably JIT-generate
   `sm:col-span-2` for the CF7-injected markup, so Adresse/message/submit were
   rendering half-width). Define the grid + full-row spans explicitly here. */
.amg-home-form .grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:1.75rem}
.amg-home-form .sm\:col-span-2{grid-column:1 / -1}
@media (max-width:640px){.amg-home-form .grid{grid-template-columns:1fr}}
.amg-home-form .amg-label{display:block;font-size:14px;font-weight:500;margin-bottom:6px;color:#00071E}
.amg-home-form p{margin:0}
.amg-home-form .wpcf7-form-control-wrap{display:block}
.amg-home-form input.wpcf7-form-control:not(.wpcf7-submit),
.amg-home-form textarea.wpcf7-form-control{
  width:100%;box-sizing:border-box;border:1px solid #e5e7eb;border-radius:10px;
  padding:11px 16px;font-size:14px;background:#fff;color:#00071E;outline:none;transition:border-color .15s;
}
.amg-home-form input.wpcf7-form-control:not(.wpcf7-submit):focus,
.amg-home-form textarea.wpcf7-form-control:focus{border-color:#E2161C;box-shadow:0 0 0 3px rgba(226,22,28,.08)}
.amg-home-form textarea.wpcf7-form-control{min-height:120px;resize:vertical}
.amg-home-form .wpcf7-submit{
  width:100%;max-width:200px;float:right;background:#E2161C;color:#fff;border:0;border-radius:10px;
  padding:14px 28px;font-weight:600;font-size:15px;cursor:pointer;transition:background .15s;
}
.amg-home-form .wpcf7-submit:hover{background:#c1121a}
.amg-home-form .wpcf7-not-valid-tip{color:#E2161C;font-size:12px;margin-top:4px}
.amg-home-form .wpcf7-response-output{margin:14px 0 0;border-radius:8px;font-size:14px}

/* ===== Content pages (Galerie / Partenaires / FAQ / Blog) ===== */
.amg-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.amg-gallery-item{display:block;border-radius:14px;overflow:hidden;background:#fff;border:1px solid #eee;aspect-ratio:4/3}
.amg-gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.amg-gallery-item:hover img{transform:scale(1.06)}

.amg-partners-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}
.amg-partner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#fff;border:1px solid #eee;border-radius:14px;padding:26px 18px;text-align:center}
.amg-partner img{max-height:120px;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.8;transition:.25s}
.amg-partner:hover img{filter:none;opacity:1}
.amg-partner span{font-size:13px;font-weight:600;color:#475569}

.amg-faq{display:flex;flex-direction:column;gap:14px}
.amg-faq-item{background:#fff;border:1px solid #eee;border-radius:12px;overflow:hidden}
.amg-faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font-weight:600;color:#00071E;font-size:16px}
.amg-faq-item summary::-webkit-details-marker{display:none}
.amg-faq-ic{flex:none;width:26px;height:26px;border-radius:999px;background:#E2161C;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:18px;line-height:1;transition:transform .2s}
.amg-faq-item[open] .amg-faq-ic{transform:rotate(45deg)}
.amg-faq-a{padding:0 22px 20px;color:#475569;line-height:1.65}

.amg-chips{}
.amg-chip{display:inline-block;padding:8px 16px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;font-size:14px;font-weight:600;color:#475569;text-decoration:none;transition:.2s}
.amg-chip:hover{border-color:#E2161C;color:#E2161C}
.amg-chip.is-active{background:#E2161C;border-color:#E2161C;color:#fff}

.amg-prose{color:#334155;line-height:1.75;font-size:16px}
.amg-prose h2{font-size:28px;font-weight:600;color:#00071E;margin:28px 0 12px}
.amg-prose h3{font-size:22px;font-weight:600;color:#00071E;margin:22px 0 10px}
.amg-prose p{margin:0 0 16px}
.amg-prose ul,.amg-prose ol{margin:0 0 16px 22px;list-style:disc}
.amg-prose ol{list-style:decimal}
.amg-prose li{margin:6px 0}
.amg-prose img{border-radius:12px;max-width:100%;height:auto;margin:18px 0}
.amg-prose a{color:#E2161C;text-decoration:underline}
.amg-prose blockquote{border-left:3px solid #E2161C;padding-left:16px;color:#475569;font-style:italic;margin:18px 0}


/* ===== À propos page (appended; not in homepage CSS) ===== */
/* ============================================================
   ABOUT PAGE
   ============================================================ */

/* ---- Shared page hero (all pages) ----
   .page-hero-bg  = CSS background image + flat navy gradient overlay (Figma),
                    responsive via background-size:cover. Use where a page keeps
                    its own layout (e.g. Boutique breadcrumb header).
   .page-hero     = same background + centered flex + min-height, for the
                    marketing page heroes (Services, Blog, FAQ, etc.). */
.page-hero-bg,
.page-hero {
  background-image:
    linear-gradient(0deg, rgba(0, 7, 30, 0.64), rgba(0, 7, 30, 0.64)),
    url('../img/about/hero-banner.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.about-hero,
.page-hero {
  position: relative;
  isolation: isolate;
  min-height: 557px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Homepage hero badge position on desktop */
@media (min-width: 1024px) {
  #heroBadge { right: 3rem; bottom: 35px; }
}

/* ---- Hero social icons (bottom-right corner of hero) ---- */
.about-social {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 1;
}
@media (min-width: 1024px) {
  .about-social { right: 2rem; bottom: 2rem; }
}

/* ---- Team section background ---- */
.team-section { background: linear-gradient(to top, #efefef 0%, #ffffff 100%); }

/* ---- Team card ---- */
.team-card {
  text-align: center;
  transform-style: preserve-3d;
  transform-origin: center;
  will-change: transform;
}

/* ---- Team photo warm radial-gradient frame ---- */
.team-photo-frame {
  width: 100%;
  max-width: 225px;
  margin-inline: auto;
  aspect-ratio: 1;
  border-radius: 9999px;
  background: radial-gradient(circle at 50% 50%, #f6f1f0 43%, #d3cfcc 100%);
  overflow: hidden;
  box-shadow: 0 14px 32px -16px rgba(0, 7, 30, .28);
  transition: box-shadow .35s ease;
}

.team-photo-frame img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
}

.team-card:hover .team-photo-frame {
  box-shadow: 0 26px 46px -18px rgba(226, 22, 28, .35);
}

/* ---- Team caption ---- */
.team-caption { margin-top: 1rem; padding: 0 .25rem; }

.team-name {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--navy);
  border-left: 2px solid rgba(226, 22, 28, .4);
  padding-left: .75rem;
  margin-left: auto; margin-right: auto;
  display: inline-block; text-align: left;
}

.team-role {
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
  color: rgba(0, 7, 30, .55);
  margin-top: .3rem;
  padding-left: 1rem;
}

.team-email {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: .75rem;
  color: var(--primary);
  margin-top: .25rem;
  padding-left: 1rem;
  word-break: break-all;
  text-decoration: none;
  transition: opacity .2s ease;
}

.team-email:hover { opacity: .75; }

/* ---- Expertise section image zoom ---- */
.expertise-img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }

.reveal-img:hover .expertise-img { transform: scale(1.04); }

/* ---- Contact form card ---- */
.contact-form-card {
  box-shadow: 0 40px 80px -30px rgba(0, 7, 30, .22);
}

/* ---- Distribution circle ---- */
.dist-circle { position: relative; aspect-ratio: 1; }

.dist-ring {
  position: absolute; inset: 8%;
  border: 1px dashed rgba(226, 22, 28, .35);
  border-radius: 9999px;
  transform-origin: center center;
}

.dist-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 128px; height: 58px;
  background: #fff; border-radius: 9999px;
  box-shadow: 0 8px 24px -8px rgba(0, 7, 30, .22);
  transition: transform .3s ease, box-shadow .3s ease;
}

.dist-node:hover { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 12px 28px -8px rgba(226, 22, 28, .35); }

.dist-node img { height: 30px; width: auto; max-width: 104px; object-fit: contain; }

/* ============================================================
   WooCommerce — Boutique (shop archive) + single product
   Rendered through woocommerce.php inside the design chrome.
   ============================================================ */
.amg-shop { font-family: '"DM Sans"', sans-serif; }
.amg-shop a { color: inherit; }

/* ---- Shop page title ---- */
.amg-shop .woocommerce-products-header__title,
.amg-shop .woocommerce-products-header { text-align: left; }
.amg-shop .woocommerce-products-header__title {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.1;
  color: #00071E;
  margin-bottom: 2rem;
}

/* ---- Result count + ordering toolbar ---- */
.amg-shop .woocommerce-result-count { color: #6b7280; font-size: .9rem; }
.amg-shop .woocommerce-ordering select {
  border: 1px solid #e5e7eb; border-radius: .5rem; padding: .5rem 2rem .5rem .75rem;
  font-size: .9rem; background: #fff; color: #00071E;
}

/* ---- Product grid ---- */
.amg-shop ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 2rem 0 0;
  list-style: none;
}
/* WooCommerce adds ::before/::after clearfix pseudo-elements that become
   stray empty grid cells — neutralise them. */
.amg-shop ul.products::before,
.amg-shop ul.products::after { content: none !important; display: none !important; }
@media (min-width: 640px)  { .amg-shop ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .amg-shop ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.amg-shop ul.products li.product {
  width: auto !important; margin: 0 !important; float: none !important;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #f1f1f1; border-radius: 1rem;
  overflow: hidden; box-shadow: 0 1px 3px rgba(0,7,30,.05);
  transition: transform .3s ease, box-shadow .3s ease;
}
.amg-shop ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -24px rgba(0,7,30,.22);
}
.amg-shop ul.products li.product a.woocommerce-LoopProduct-link {
  display: block; padding: 1rem; background: #fafafa;
}
.amg-shop ul.products li.product img {
  aspect-ratio: 4 / 3; width: 100%; object-fit: contain; margin: 0;
}
.amg-shop ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Roboto', sans-serif; font-weight: 600; font-size: 1rem;
  line-height: 1.35; color: #00071E; padding: 1rem 1.25rem 0;
}
.amg-shop ul.products li.product .price { padding: .35rem 1.25rem 0; display: block; }
.amg-shop .amg-price-na { color: #00071E; font-weight: 600; font-size: .95rem; }

/* push the quote button to the bottom of every card */
.amg-shop ul.products li.product .amg-quote-btn { margin: 1rem 1.25rem 1.25rem; }

/* ---- Quote button (loop + single) — brand pill ----
   The button also carries WooCommerce's `.button` class, so we element-qualify
   (a.amg-quote-btn) and force the brand fill to beat `.woocommerce a.button`. */
.amg-shop a.amg-quote-btn,
.woocommerce a.amg-quote-btn,
.amg-shop .amg-quote-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: #E2161C !important; color: #fff !important; border: 0; cursor: pointer;
  font-family: '"Roboto Flex"', sans-serif; font-weight: 500; font-size: .9rem;
  border-radius: .5rem; padding: .7rem 1.25rem; text-decoration: none; opacity: 1;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.amg-shop a.amg-quote-btn:hover,
.woocommerce a.amg-quote-btn:hover {
  transform: translateY(-2px); filter: brightness(1.05);
  box-shadow: 0 12px 26px -8px rgba(226,22,28,.55);
}
.amg-shop .amg-quote-single .amg-quote-btn { padding: .9rem 2rem; font-size: 1rem; }

/* ---- Pagination ---- */
.amg-shop .woocommerce-pagination ul { border: 0; display: flex; gap: .5rem; justify-content: center; margin-top: 3rem; }
.amg-shop .woocommerce-pagination ul li { border: 0; }
.amg-shop .woocommerce-pagination ul li a,
.amg-shop .woocommerce-pagination ul li span {
  border: 1px solid #e5e7eb; border-radius: .5rem; padding: .5rem .9rem; color: #00071E;
}
.amg-shop .woocommerce-pagination ul li span.current { background: #E2161C; color: #fff; border-color: #E2161C; }

/* ---- Single product layout ---- */
.amg-shop .product div.images,
.amg-shop .product div.summary { margin-bottom: 2rem; }
.amg-shop .single-product div.product .woocommerce-product-gallery { border: 1px solid #f1f1f1; border-radius: 1rem; overflow: hidden; background: #fafafa; }
.amg-shop .product .product_title {
  font-family: 'Roboto', sans-serif; font-weight: 600; color: #00071E;
  font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15;
}
.amg-shop .product .woocommerce-product-details__short-description { color: #4b5563; line-height: 1.7; margin-top: 1rem; }
.amg-shop .product .product_meta { color: #6b7280; font-size: .9rem; margin-top: 1.5rem; }
.amg-shop .product .product_meta a { color: #E2161C; }
.amg-shop .amg-quote-single { margin: 1.5rem 0; }

/* product tabs */
.amg-shop .woocommerce-tabs ul.tabs { padding: 0; }
.amg-shop .woocommerce-tabs ul.tabs li { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; }
.amg-shop .woocommerce-tabs ul.tabs li.active { border-bottom-color: #E2161C; }
.amg-shop .woocommerce-tabs ul.tabs li a { color: #00071E; font-family: 'Roboto', sans-serif; font-weight: 600; }

/* ---- Consommables compatibles section ---- */
.amg-shop .amg-consommables { margin-top: 3.5rem; border-top: 1px solid #f1f1f1; padding-top: 2.5rem; }
.amg-shop .amg-consommables > h2 {
  font-family: 'Roboto', sans-serif; font-weight: 600; color: #00071E;
  font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom: 1.75rem;
}
.amg-shop .amg-cons-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.25rem; }
@media (min-width: 640px)  { .amg-shop .amg-cons-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1024px) { .amg-shop .amg-cons-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.amg-shop .amg-cons-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid #f1f1f1; border-radius: 1rem; overflow: hidden; padding-bottom: 1rem;
  transition: transform .3s ease, box-shadow .3s ease;
}
.amg-shop .amg-cons-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(0,7,30,.22); }
.amg-shop .amg-cons-thumb { display: block; padding: 1rem; background: #fafafa; }
.amg-shop .amg-cons-thumb img { aspect-ratio: 4/3; width: 100%; object-fit: contain; }
.amg-shop .amg-cons-name { display: block; padding: 1rem 1.1rem .25rem; font-family: 'Roboto', sans-serif; font-weight: 600; color: #00071E; font-size: .95rem; line-height: 1.3; }
.amg-shop .amg-cons-card .amg-quote-btn { margin: .75rem 1.1rem 0; }

/* tame WooCommerce notice/message banners to the palette */
.amg-shop .woocommerce-message,
.amg-shop .woocommerce-info { border-top-color: #E2161C; }

/* ============================================================
   Generic page (page.php) — prose + My Account
   ============================================================ */
.amg-page-title { font-family: 'Roboto', sans-serif; }

/* Readable long-form content (privacy policy, terms, plain pages) */
.amg-prose { font-family: '"DM Sans"', sans-serif; color: #374151; line-height: 1.75; font-size: 1.0625rem; }
.amg-prose > * + * { margin-top: 1.15rem; }
.amg-prose h2 { font-family: 'Roboto', sans-serif; font-weight: 600; color: #00071E; font-size: 1.6rem; line-height: 1.25; margin-top: 2.25rem; }
.amg-prose h3 { font-family: 'Roboto', sans-serif; font-weight: 600; color: #00071E; font-size: 1.25rem; margin-top: 1.75rem; }
.amg-prose a { color: #E2161C; text-decoration: underline; text-underline-offset: 2px; }
.amg-prose ul, .amg-prose ol { padding-left: 1.4rem; }
.amg-prose ul { list-style: disc; }
.amg-prose ol { list-style: decimal; }
.amg-prose li + li { margin-top: .4rem; }
.amg-prose blockquote { border-left: 3px solid #E2161C; padding-left: 1rem; color: #4b5563; font-style: italic; }
.amg-prose img { border-radius: .75rem; }

/* WooCommerce My Account (rendered via page.php with .amg-shop) */
.amg-page.amg-shop .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; border-bottom: 1px solid #f1f1f1; }
.amg-page.amg-shop .woocommerce-MyAccount-navigation li a { display: inline-block; padding: .6rem 1rem; border-radius: .5rem .5rem 0 0; color: #00071E; font-family: 'Roboto', sans-serif; font-weight: 500; }
.amg-page.amg-shop .woocommerce-MyAccount-navigation li.is-active a { color: #E2161C; border-bottom: 2px solid #E2161C; }
.amg-page.amg-shop .woocommerce-MyAccount-content { color: #374151; line-height: 1.7; }
.amg-page.amg-shop form .button,
.amg-page.amg-shop .woocommerce-Button {
  background: #E2161C !important; color: #fff !important; border: 0; border-radius: .5rem;
  padding: .7rem 1.5rem; font-family: '"Roboto Flex"', sans-serif; font-weight: 500; cursor: pointer;
}
.amg-page.amg-shop form .input-text {
  border: 1px solid #e5e7eb; border-radius: .5rem; padding: .65rem .85rem; width: 100%;
}
.amg-page.amg-shop .woocommerce-form-login__rememberme,
.amg-page.amg-shop label { color: #374151; }

.dist-node:hover img { opacity: 1; }
/* ===== Expertise section ("Une expertise construite dans le temps") =====
   3-col layout: heading | square image | text (vertically centered).
   Defined explicitly since the compiled tailwind.css predates this arbitrary
   grid-template (no rebuild needed). */
@media (min-width:1024px){
  .expertise-section .grid{grid-template-columns:minmax(0,34fr) minmax(0,40fr) minmax(0,40fr)}
}
.expertise-section .self-center{align-self:center}


/* Partner-logos slider (Services) — grayscale, colour on hover-pause */
.logo-marquee--brands .logo-track img { filter: grayscale(1); opacity: .55; transition: filter .3s ease, opacity .3s ease; }
.logo-marquee--brands .logo-track img:hover { filter: grayscale(0); opacity: 1; }

/* ---- Hero stat dividers (2px × 70px, navy 76%) ---- */
@media (min-width: 640px) {
  .stat.stat-divider { position: relative; }
  .stat.stat-divider::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 70px;
    background: rgb(0 7 30 / 0.76);
  }
}

/* ---- Nos services counter (outline) ---- */
.s-counter-outline { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.5); }
#sCount { font-family: 'DM Sans'; }

/* ---- Blog detail prose (Figma "Blog details") ---- */
.blog-prose { font-family: 'DM Sans', sans-serif; color: #00071E; }
.blog-prose > p:first-of-type { font-size: 24px; line-height: 32px; font-weight: 500; }
.blog-prose p { font-size: 20px; line-height: 26px; font-weight: 500; color: #00071E; margin-top: 16px; }
.blog-prose h2 { font-family: 'Roboto', sans-serif; font-weight: 600; font-size: 40px; line-height: 46.875px; color: #00071E; margin-top: 40px; margin-bottom: 12px; }
.blog-prose h3 { font-family: 'Roboto', sans-serif; font-weight: 600; font-size: 28px; color: #00071E; margin-top: 28px; }
.blog-prose ul, .blog-prose ol { margin-top: 16px; padding-left: 1.25rem; font-size: 20px; line-height: 26px; color: #00071E; }
.blog-prose li { margin-top: 8px; }
.blog-prose img { border-radius: 8px; margin-top: 24px; }

/* Top bar (contact + réseaux) */
.amg-topbar a{transition:color .2s ease}
.amg-topbar a:hover{color:#fff}
.amg-topbar-social a:hover{color:#E2161C}

/* =========================================================
   HERO IMAGE SLIDER + overlay header  (added 2026-07-09)
   ========================================================= */
.amg-hero { min-height: 600px; }
@media (min-width: 1024px) { .amg-hero { min-height: 780px; } }
section#hero:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 1;
    background-image: radial-gradient(rgb(0 0 0 / 13%) 0.5px, #0000002b 0.5px), radial-gradient(rgb(255 255 255 / 19%) 0.5px, transparent 0.5px);
    background-size: 2px 2px;
    background-position: 0 0, 1px 1px;
}

.amg-hero__inner {
  min-height: inherit;
  padding-top: 140px;   /* clear the fixed overlay header */
  padding-bottom: 96px;
}
@media (min-width: 1024px) {
  .amg-hero__inner { padding-top: 190px; padding-bottom: 120px; }
}

/* slides */
.amg-hero__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.1s ease-in-out;
  will-change: opacity;
}
.amg-hero__slide.is-active { opacity: 1; }

/* legibility scrim: darker on the left where the text sits */
.amg-hero__scrim {
  background:
    linear-gradient(90deg, rgba(0,7,30,.82) 0%, rgba(0,7,30,.55) 42%, rgba(0,7,30,.18) 100%),
    linear-gradient(0deg, rgba(0,7,30,.45) 0%, rgba(0,7,30,.12) 40%);
}

.amg-hero__badge { right: 40px; bottom: 40px; }
@media (min-width: 1024px) { .amg-hero__badge { right: 140px; bottom: 60px; } }

/* scroll cue */
.amg-hero__scroll {
  margin-top: 56px; flex-direction: column; align-items: flex-start; gap: 10px;
  color: #E2161C; font-family: 'Roboto Flex', sans-serif; font-size: 16px;
}
.amg-hero__scroll-line { width: 1px; height: 72px; background: #E2161C; }

/* slide dots */
.amg-hero__dots { left: 20px; bottom: 24px; }
@media (min-width: 1024px) { .amg-hero__dots { left: 140px; bottom: 40px; } }
.amg-hero__dot {
  width: 9px; height: 9px; border-radius: 9999px;
  background: rgba(255,255,255,.45); transition: all .3s ease; cursor: pointer;
}
.amg-hero__dot.is-active { background: #E2161C; width: 26px; }

/* ---- overlay header (homepage) ---- */
.amg-topbar--hidden { display: none; }

.amg-header--overlay {
  position: fixed; left: 0; right: 0; top: 40px; /* below the 40px top bar */
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease, top .3s ease;
}
.amg-header--overlay.is-solid {
  top: 0; /* snap to the very top once scrolled past the top bar */
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom-color: #f3f4f6;
  box-shadow: 0 6px 24px rgba(0,7,30,.06);
}

/* logo swap */
.amg-logo--light { display: none; }
.amg-header--overlay:not(.is-solid) .amg-logo--dark  { display: none; }
.amg-header--overlay:not(.is-solid) .amg-logo--light { display: block; }

/* nav + controls turn white while transparent */
.amg-header--overlay:not(.is-solid) nav a { color: #fff; }
.amg-header--overlay:not(.is-solid) nav a.is-active,
.amg-header--overlay:not(.is-solid) nav a.text-primary { color: #E2161C; }
.amg-header--overlay:not(.is-solid) #burger { color: #fff; }
.amg-header--overlay:not(.is-solid) .btn-outline {
  border-color: rgba(255,255,255,.56); color: #fff;
}
.amg-header--overlay:not(.is-solid) .btn-outline:hover {
  background: #fff; color: #00071E; border-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .amg-hero__slide { transition: none; }
}

/* stat cards — explicit geometry (don't depend on JIT utilities) */
#stats .amg-stat {
  min-height: 180px;
  padding: 32px;
  height: 100%;
  display: flex;
  justify-content: flex-end;
}
#stats .amg-stat__icon {
  top: 5px; right: 10px; left: auto; bottom: auto;
  height: 44px; width: 44px;
  justify-content: center;
}
@media (min-width: 1024px) { #stats .amg-stat__icon { top: 5px; right: 10px; } }

/* per-slide hero headings — stacked crossfade */
.amg-hero__titles { display: grid; }
.amg-hero__title {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .8s ease;
  max-width: 1000px;
}
.amg-hero__title.is-active { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .amg-hero__title { transition: none; } }

/* stat cards — border + navy hover */
#stats .amg-stat {
  border: 1px solid rgba(0, 7, 30, .10);
  transition: background-color .3s ease, color .3s ease,
              border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
#stats .amg-stat:hover {
  background-color: var(--navy);
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(0, 7, 30, .45);
}
#stats .amg-stat:hover p { color: rgba(255, 255, 255, .64); }
#stats .amg-stat:hover .amg-stat__icon svg path { fill: var(--primary); }
#stats .amg-stat.bg-navy .amg-stat__icon svg path { fill: var(--primary); }
#stats .amg-stat.bg-navy .amg-stat__icon svg:has(circle) circle { fill: var(--primary); }
#stats .amg-stat.bg-navy .amg-stat__icon svg:has(circle) path { fill: #fff; }

/* ============ CATALOGUE pop-up (flipbook) — added phase 1 ============ */
.cat-modal { position: fixed; inset: 0; z-index: 200; display: none; }
.cat-modal.is-open { display: block; }
.cat-modal__backdrop { position: absolute; inset: 0; background: rgba(0,7,30,.88); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cat-modal__dialog { position: relative; height: 100%; max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; padding: 20px 16px 28px; }
.cat-modal__close { font-size: 16px; line-height: 1; }
.cat-toolbar { max-width: 1000px; width: 100%; margin: 0 auto 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cat-toolbar .cat-title { color: #fff; font-weight: 600; font-size: 18px; letter-spacing: .2px; }
.cat-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cat-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s; text-decoration: none; }
.cat-btn:hover { background: rgba(255,255,255,.14); }
.cat-btn--primary { background: #E2161C; border-color: #E2161C; }
.cat-btn--primary:hover { background: #c11015; }
.cat-btn[disabled] { opacity: .4; cursor: default; }
.cat-page { color: #fff; font-size: 14px; min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.cat-viewer { flex: 1; min-height: 0; max-width: 1000px; width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
#catModal #flipbook { visibility: hidden; margin: 0 auto; }
#catModal #flipbook .page { background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
#catModal #flipbook img { width: 100%; height: 100%; display: block; }
.cat-loading { color: #cbd3e6; text-align: center; padding: 48px 0; font-size: 15px; }
.cat-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: #E2161C; margin: 0 auto 16px; animation: catspin 1s linear infinite; }
@keyframes catspin { to { transform: rotate(360deg); } }
.cat-hint { color: #8b95ad; text-align: center; font-size: 13px; margin-top: 16px; }
[data-catalogue-open] { cursor: pointer; }

/* ============ GALERIE lightbox — added phase 1 ============ */
.amg-lb { position: fixed; inset: 0; z-index: 210; display: none; align-items: center; justify-content: center; background: rgba(0,7,30,.92); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); padding: 40px 16px; }
.amg-lb.is-open { display: flex; }
.amg-lb__fig { margin: 0; max-width: 92vw; max-height: 86vh; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.amg-lb__img { max-width: 92vw; max-height: 80vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.amg-lb__cap { color: #cbd3e6; font-size: 14px; text-align: center; }
.amg-lb__close { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; font-size: 18px; cursor: pointer; transition: background .2s, border-color .2s; }
.amg-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 9999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; transition: background .2s, border-color .2s; }
.amg-lb__nav:hover, .amg-lb__close:hover { background: var(--primary); border-color: var(--primary); }
.amg-lb__prev { left: 20px; } .amg-lb__next { right: 20px; }
@media (max-width: 640px) { .amg-lb__prev { left: 8px; } .amg-lb__next { right: 8px; } .amg-lb__nav { width: 44px; height: 44px; font-size: 22px; } }

/* Mobile menu: the dropdown panel is always white (bg-white), so its links must
   stay dark even under the transparent overlay header, which otherwise turns
   every "nav a" white (see .amg-header--overlay:not(.is-solid) nav a above).
   Exclude the red CTA button (.bg-primary) so it keeps its white label. */
#mobileMenu nav a:not(.bg-primary) { color: var(--navy); }
#mobileMenu nav a:not(.bg-primary):hover { color: #E2161C; }
#mobileMenu nav a.is-active,
#mobileMenu nav a.text-primary { color: #E2161C; }

/* #stats — wrapper padding: pt-14 (mobile) and lg:pt-20 (desktop) are NOT in the
   compiled Tailwind build (only pt-16 exists), so pin the top padding here. */
#stats > div { padding-top: 3.5rem; }                                  /* = pt-14 */
@media (min-width: 1024px) { #stats > div { padding-top: 5rem; } }     /* = lg:pt-20 */

/* #stats — on mobile show the 4 cards as a horizontal snap-slider (with a peek
   of the next card) instead of the cramped 2-col grid. Desktop keeps the grid. */
@media (max-width: 1023px) {
  #stats .grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    margin-inline: -1.25rem;      /* bleed past the px-5 wrapper to the screen edges */
    padding-inline: 1.25rem;
    scrollbar-width: none;
  }
  #stats .grid::-webkit-scrollbar { display: none; }
  #stats .amg-stat {
    scroll-snap-align: center;
    flex: 0 0 82%;                /* one card + a peek of the next */
    max-width: 82%;
  }
}

/* Desktop dropdown (.amg-dropdown) panel is white (bg-white), so keep its links
   dark even under the transparent overlay header, which otherwise turns every
   "nav a" white. Scoped to the overlay: solid-header pages already render fine. */
.amg-header--overlay:not(.is-solid) .amg-dropdown a { color: #4b5563; }        /* text-gray-600 */
.amg-header--overlay:not(.is-solid) .amg-dropdown a:hover,
.amg-header--overlay:not(.is-solid) .amg-dropdown a.text-primary { color: #E2161C; }

/* #stats — the icon SVG collapses to ~2px wide on mobile (its w-5 width loses
   the cascade inside the flex icon badge), making the icon invisible. Pin its
   size and stop it from shrinking. */
#stats .amg-stat__icon svg { width: 30px; height: 30px; flex: 0 0 auto; }

/* ============================================================
   Batch 2026-07-10 — engagement chips, footer, card-lift, px utils
   ============================================================ */

/* [1+2] "Pourquoi Amigraph" engagement chips: pill + circular check badge.
   Hover — and the backoffice "Primaire" card (.is-primary) — render filled. */
.amg-engage {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 20px 9px 10px;
  border: 1px solid rgba(0, 7, 30, .12);
  border-radius: 999px;
  background: #fff;
  font-family: 'Roboto', sans-serif; font-weight: 600;
  font-size: 18px; line-height: 1; color: var(--navy);
  transition: background-color .25s ease, color .25s ease,
              border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.amg-engage__check {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 999px;
  background: rgba(226, 22, 28, .12); color: var(--primary);
  transition: background-color .25s ease, color .25s ease;
}
.amg-engage__check svg { width: 17px; height: 17px; }
.amg-engage:hover,
.amg-engage.is-primary {
  background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: 0 14px 30px -14px rgba(226, 22, 28, .65);
  transform: translateY(-2px);
}
.amg-engage:hover .amg-engage__check,
.amg-engage.is-primary .amg-engage__check {
  background: rgba(255, 255, 255, .24); color: #fff;
}

/* [3] Footer watermark: the -mb-[3vw] arbitrary class isn't in the compiled
   Tailwind build — define it (softened to -.8vw). */
.-mb-\[3vw\] { margin-bottom: -.8vw; }

/* [4] Footer: make the first column (logo / newsletter / social) wider than
   the three link columns on desktop. */
@media (min-width: 1024px) {
  footer .grid.gap-10 { grid-template-columns: 1.9fr 1fr 1fr 1fr; }
  footer .grid.gap-10 > div:first-child { max-width: 80%; }
}

/* [6] About page .card-lift: on smaller laptops/tablets stack icon over text
   and drop the left divider (border-left + padding-left). */
@media (max-width: 1279px) {
  .card-lift { flex-direction: column; }
  .card-lift > div:last-child { border-left-width: 0; padding-left: 0; }
}

/* [5] Responsive horizontal padding: 120px from lg (1024+), 140px from xl
   (1280+). These arbitrary classes aren't in the compiled Tailwind build. */
@media (min-width: 1024px) { .lg\:px-\[120px\] { padding-left: 80px; padding-right: 80px; } }
@media (min-width: 1280px) { .xl\:px-\[140px\] { padding-left: 55px; padding-right: 55px; } }
@media (min-width: 1450px) { .xl\:px-\[140px\] { padding-left: 140px; padding-right: 140px; } }

/* Header — mid-laptop range (1024–1279px, e.g. ~1140px) is tight with the full
   4rem nav gap + 240px CTA. Tighten the gap and shrink the logo + button. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .amg-header nav.gap-16 { gap: 2rem; }
  .amg-header nav.gap-16 a { font-size: 16px; }
  .amg-header .amg-logo { height: 38px; }
  .amg-header a.btn-outline {
    width: auto; height: 46px;
    padding-left: 18px; padding-right: 18px;
    font-size: 15px;
  }
}

/* ---------- Mobile overrides (header, stats, devis FAB) ---------- */
@media (max-width: 767px) {
  .h-\[6\.5rem\] { height: 3.5rem; }
  .h-\[46px\] { height: 31px; }
  #stats .amg-stat__icon { right: 29px; }
  #stats .amg-stat { padding: 15px; }
  #stats .pb-16 { padding-bottom: 2rem; }
  #amg-devis-fab .amg-fab-label { display: none; }
  #amg-devis-fab { padding: 12px; }
}

/* ---- hero: bouton secondaire (« Découvrir ») ---- */
/* Outline sur fond photo — même convention que .btn-outline du header overlay. */
.amg-hero__cta2 {
  border: 1px solid rgba(255,255,255,.56);
  color: #fff;
  background: transparent;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.amg-hero__cta2:hover {
  background: #fff;
  color: #00071E;
  border-color: #fff;
  transform: translateY(-2px);
}
@media (max-width: 480px) {
  .amg-hero__ctas { gap: 12px; }
  .amg-hero__ctas .btn { width: 100%; max-width: 320px; }
}

/* ==========================================================================
   [404] Page introuvable (404.php)
   La build Tailwind est compilée/réduite : la géométrie de cette page est
   donc définie ici plutôt qu'en utilitaires arbitraires.
   ========================================================================== */

.amg-404__hero { min-height: 620px; }

/* Chiffre fantôme « 404 » en filigrane derrière le contenu du hero */
.amg-404__ghost {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-size: clamp(11rem, 34vw, 26rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 3px rgba(255, 255, 255, 0.22);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

.amg-404__eyebrow {
  letter-spacing: 0.25em;
  margin-bottom: 0.5rem;
}

.amg-404__title { font-size: clamp(2.5rem, 7vw, 4.5rem); }

.amg-404__lead {
  max-width: 640px;
  font-size: clamp(1rem, 2vw, 1.25rem);
}

/* ---- Grille « liens utiles » ---- */
.amg-404__h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }

.amg-404__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.amg-404__card {
  display: block;
  padding: 32px 28px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.amg-404__card:hover {
  border-color: #E2161C;
  box-shadow: 0 18px 40px -24px rgba(0, 7, 30, 0.45);
  transform: translateY(-4px);
}
.amg-404__card-arrow .arrow { transition: transform .25s ease; }
.amg-404__card:hover .amg-404__card-arrow .arrow { transform: translateX(4px); }

@media (max-width: 1023px) {
  .amg-404__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .amg-404__grid { grid-template-columns: 1fr; }
  .amg-404__hero { min-height: 540px; }
  .amg-404__ctas .btn { width: 100%; max-width: 320px; justify-content: center; }
}