/* Fantastix Ant V7 — stabilité, accessibilité et performance mobile */

html{scroll-padding-top:78px}
#boutique,#comparatif,#configurateur,#couleurs,#galerie{scroll-margin-top:78px}
.product-open{display:block;width:100%;padding:0;border:0;background:transparent;text-align:left;color:inherit;cursor:pointer}
.card-swatch{appearance:none;padding:0;display:inline-grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at center,var(--swatch,#777) 0 9px,#eee9de 9px 11px,transparent 11px)!important;border:0;box-shadow:none;cursor:pointer;touch-action:manipulation}
.card-swatch::before{content:none!important}
.card-swatch.selected{outline:2px solid #132017;outline-offset:-6px}
.card-swatch:focus-visible{outline:3px solid #607d4b;outline-offset:1px}
.variant-option[aria-pressed="true"]{border-color:#61714d;background:#e0e5cf}
.catalog-load-error,.catalog-empty{grid-column:1/-1;min-height:260px;padding:44px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;background:#ded8cd;border:1px solid #c8c0b4}
.catalog-load-error strong,.catalog-empty strong{font:500 clamp(28px,4vw,44px) var(--serif)}
.catalog-load-error p,.catalog-empty p{max-width:520px;color:#687168;font-size:12px;line-height:1.7}
.catalog-load-error .btn,.catalog-empty .btn{margin-top:10px}
.modal-buy-cta{margin-bottom:24px!important}

/* Les sections sous la ligne de flottaison ne sont peintes que lorsqu'elles approchent du viewport. */
.colors-section,.included-section,.real-setups,.ant-gallery-preview,.compact-story,.config-v4,.faq-preview{content-visibility:auto;contain-intrinsic-size:700px}

/* Comparatif mobile dédié : le tableau desktop reste inchangé. */
.compare-mobile{display:none}
.compare-mobile-card{background:#e7e1d6;border:1px solid #b9b3a8;padding:22px}
.compare-mobile-card.recommended{border-color:#7d925f;box-shadow:inset 0 3px 0 #b5c985}
.compare-mobile-card>small{font-size:8px;font-weight:800;letter-spacing:.14em;color:#6a7f55;text-transform:uppercase}
.compare-mobile-card h3{font:500 30px var(--serif);margin:8px 0 4px}
.compare-mobile-card>strong{display:block;font:500 25px var(--serif);margin-bottom:17px}
.compare-mobile-card dl{margin:0;border-top:1px solid #c4bdb1}
.compare-mobile-card dl div{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid #c4bdb1}
.compare-mobile-card dt{font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:#747c74}
.compare-mobile-card dd{margin:0;font-size:10px;line-height:1.5;color:#313b33}
.compare-mobile-card button{width:100%;margin-top:17px;min-height:48px;border:1px solid #17241b;background:transparent;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;touch-action:manipulation}
.compare-mobile-card.recommended button{background:#b5c985;border-color:#b5c985;color:#07110b}

@media(max-width:900px){
  /* Un même header compact sur tablette/mobile, sans supprimer la recherche. */
  .header{padding-left:14px!important;padding-right:14px!important}
  .head-actions{gap:6px!important}
  .head-actions .round{display:inline-grid!important;place-items:center}
  .header .round,.header .hamb{width:42px;height:42px;min-width:42px}
  .header .cart-trigger{min-height:42px}

  /* La modale devient une fiche verticale plus légère à manipuler. */
  .product-modal{overscroll-behavior:contain}
  .product-modal-inner{min-height:92dvh}
  .variant-main{min-height:360px}
  .modal-copy{padding-top:52px}
}

@media(max-width:700px){
  html{scroll-padding-top:68px}
  #boutique,#comparatif,#configurateur,#couleurs,#galerie{scroll-margin-top:68px}

  /* Header : zones tactiles renforcées, éléments non essentiels compactés. */
  .header{height:64px!important;padding:0 10px!important}
  .header .logo{gap:7px;min-width:0}
  .header .logo span:last-child{font-size:9px!important;letter-spacing:.1em!important}
  .header .logo-dot{width:20px!important;height:20px!important}
  .header .logo-dot:after{left:7px;top:7px}
  .head-actions{margin-left:auto}
  .header .round,.header .hamb,.header .account-trigger{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important}
  .header .cart-trigger{position:relative;width:42px;min-width:42px;height:42px;min-height:42px;padding:0!important;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);display:inline-flex!important;align-items:center;justify-content:center;font-size:0;color:transparent;touch-action:manipulation}
  .header .cart-trigger::before{content:"";display:block;width:19px;height:19px;flex:0 0 19px;background-repeat:no-repeat;background-position:center;background-size:19px 19px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.15 9.9a2 2 0 0 0 1.95 1.58h8.63a2 2 0 0 0 1.95-1.56L21 8H6.25'/%3E%3Ccircle cx='9.5' cy='19.5' r='1.25'/%3E%3Ccircle cx='18' cy='19.5' r='1.25'/%3E%3C/svg%3E")}
  .header .cart-trigger .count{position:absolute;right:-3px;top:-3px;margin:0;width:18px;height:18px;min-width:18px;display:grid;place-items:center;font-size:9px;line-height:1;color:var(--forest)}

  /* Header mobile : 4 actions fixes, sans chevauchement. */
  .header .head-actions{
    display:grid!important;
    grid-template-columns:repeat(4,42px);
    align-items:center;
    justify-content:end;
    gap:5px!important;
    flex:0 0 auto;
    margin-left:8px!important;
  }
  .header .head-actions>*{margin:0!important;position:relative;flex:0 0 42px;max-width:42px}
  .header .account-trigger{padding:0!important;justify-content:center}
  .header .cart-trigger{overflow:visible}
  .header .cart-trigger .cart-icon,.header .cart-trigger .cart-copy{display:none!important}
  .header .hamb{display:grid!important;place-items:center!important;padding:0!important}

  /* Comparatif : carrousel tactile explicite avec aperçu de la carte suivante. */
  .compare-wrap{overflow:visible!important;margin-top:28px}
  .compare-wrap>.setup-compare,.compare-wrap>.compare-actions{display:none!important}
  .compare-wrap::before{content:"↔  Faites glisser pour comparer les 3 formats";display:block;width:max-content;max-width:100%;margin:0 0 12px auto;padding:9px 12px;border:1px solid #b7b0a4;border-radius:999px;background:rgba(245,241,232,.58);color:#566157;font-size:7px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap}
  .compare-mobile{display:flex!important;gap:12px;margin-top:0;overflow-x:auto;overflow-y:visible;padding:2px 12vw 14px 0;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
  .compare-mobile::-webkit-scrollbar{display:none}
  .compare-mobile-card{flex:0 0 min(82vw,360px);scroll-snap-align:start;scroll-snap-stop:always;box-shadow:0 10px 24px rgba(17,28,20,.07)}
  .compare-mobile-card.recommended{box-shadow:inset 0 3px 0 #b5c985,0 10px 24px rgba(17,28,20,.08)}
  .compare-mobile::after{content:"→";flex:0 0 36px;width:36px;height:36px;align-self:center;display:grid;place-items:center;border:1px solid #17241b;border-radius:50%;font-size:16px;color:#17241b}

  /* Photos réelles : carrousel tactile, au lieu de 7 grandes images empilées. */
  .real-setups{padding-left:4vw;padding-right:0}
  .real-setups .section-head{padding-right:4vw}
  .real-setups-grid{display:flex!important;grid-template-columns:none!important;overflow-x:auto;gap:10px;padding:0 4vw 12px 0;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
  .real-setups-grid::-webkit-scrollbar{display:none}
  .real-setups-grid img{flex:0 0 min(84vw,420px);width:min(84vw,420px)!important;height:310px!important;min-height:310px!important;object-fit:cover;scroll-snap-align:start}
  .real-setups::after{content:"Faites glisser pour voir les autres photos →";display:block;padding:8px 4vw 0 0;text-align:right;font-size:7px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#6f786f}

  /* Modale produit : vraie vue plein écran mobile. */
  .product-modal{inset:0!important;width:100vw;height:100dvh;max-height:none;border-radius:0}
  .product-modal-inner{display:block;min-height:100dvh}
  .modal-close{position:fixed;right:12px;top:12px;width:44px;height:44px;min-width:44px;min-height:44px;background:rgba(244,240,232,.94);box-shadow:0 7px 20px rgba(0,0,0,.12);touch-action:manipulation}
  .modal-visual{min-height:0!important;height:auto;max-height:none}
  .variant-gallery{height:auto}
  .variant-main{min-height:0!important;height:40dvh;max-height:420px}
  .variant-main>img,.variant-main>picture,.variant-main>picture>img{object-fit:contain;width:100%;height:100%}
  .variant-thumbs{padding:8px 12px;scroll-snap-type:x proximity}
  .variant-thumb{flex-basis:68px;width:68px;height:56px;scroll-snap-align:start;touch-action:manipulation}
  .modal-copy{padding:24px 20px calc(42px + env(safe-area-inset-bottom))!important}
  .modal-copy h2{font-size:clamp(38px,12vw,56px)}
  .variant-options{grid-template-columns:1fr!important}
  .variant-option{min-height:48px;touch-action:manipulation}
  .modal-copy .btn.primary.full{min-height:54px;touch-action:manipulation}
  .card-swatch{width:44px;height:44px}

  /* GPU : conserver l'esthétique sans animations de grands calques floutés. */
  .grain{display:none!important}
  .header.scrolled{backdrop-filter:blur(9px)!important;-webkit-backdrop-filter:blur(9px)!important}
  .config-v4::before,.config-v4::after{animation:none!important;filter:none!important;opacity:.13!important}
  .config-preview-top i,.config-preview-pulse span{animation:none!important}
  .included-section .included-grid article>span,.included-section .included-grid article::after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .setup-card:hover,.color-card:hover,.included-section .included-grid article:hover,.gallery-preview-card:hover img{transform:none!important}
  .setup-card,.color-card,.included-section .included-grid article{box-shadow:none}
}

@media(max-width:430px){
  .header .account-trigger,.header .round,.header .hamb,.header .cart-trigger{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important}
  .header .account-avatar,.header .account-guest-icon{width:27px;height:27px}
}

@media(hover:none),(pointer:coarse){
  .btn.primary:hover,.setup-card:hover,.color-card:hover,.quick-step .choice:hover,.config-preview:hover .config-preview-media img{transform:none!important}
}

/* Section 07 — immersion forêt tropicale */
.micro-story.dark.compact-story{
  position:relative;
  display:flex!important;
  grid-template-columns:none!important;
  align-items:center;
  min-height:clamp(560px,72vh,760px)!important;
  padding:0!important;
  overflow:hidden;
  isolation:isolate;
  background:#07110b;
}
.micro-story.dark.compact-story::before{
  content:"";
  position:absolute;
  inset:-2%;
  z-index:-2;
  background-image:url("https://images.pexels.com/photos/36105292/pexels-photo-36105292.jpeg?auto=compress&cs=tinysrgb&w=2000");
  background-size:cover;
  background-position:center 48%;
  transform:scale(1.025);
}
.micro-story.dark.compact-story::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(2,9,5,.88) 0%,rgba(2,9,5,.69) 34%,rgba(2,9,5,.34) 66%,rgba(2,9,5,.18) 100%),
    linear-gradient(180deg,rgba(3,10,6,.14),rgba(3,10,6,.36));
}
.micro-story.dark.compact-story .story-image{display:none!important}
.micro-story.dark.compact-story .story-copy{
  position:relative;
  z-index:2;
  width:min(1180px,89%);
  max-width:none;
  margin:0 auto;
  padding:110px 0 100px!important;
  color:#fff;
}
.micro-story.dark.compact-story .story-copy .overline{color:rgba(255,255,255,.72);opacity:1}
.micro-story.dark.compact-story .story-copy h2{
  max-width:760px;
  color:#fff;
  text-shadow:0 2px 28px rgba(0,0,0,.22);
}
.micro-story.dark.compact-story .story-copy>p:not(.overline){
  max-width:570px;
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:14px;
  line-height:1.85;
}

@media(max-width:700px){
  .micro-story.dark.compact-story{min-height:560px!important}
  .micro-story.dark.compact-story::before{
    inset:0;
    background-image:url("https://images.pexels.com/photos/36105292/pexels-photo-36105292.jpeg?auto=compress&cs=tinysrgb&w=1200");
    background-position:58% center;
    transform:none;
  }
  .micro-story.dark.compact-story::after{
    background:linear-gradient(180deg,rgba(2,9,5,.48) 0%,rgba(2,9,5,.60) 42%,rgba(2,9,5,.82) 100%);
  }
  .micro-story.dark.compact-story .story-copy{
    width:calc(100% - 40px);
    padding:86px 0 72px!important;
    justify-content:flex-end;
  }
  .micro-story.dark.compact-story .story-copy h2{font-size:clamp(42px,13vw,62px);margin-bottom:22px}
  .micro-story.dark.compact-story .story-copy>p:not(.overline){font-size:13px;line-height:1.75}
}

/* Section 07 — finition premium */
@keyframes fantastixMistDrift{
  0%{background-position:0 0,12% 54%,82% 42%,0 0}
  100%{background-position:0 0,19% 48%,75% 47%,0 0}
}

.micro-story.dark.compact-story::after{
  background-image:
    linear-gradient(90deg,rgba(2,9,5,.90) 0%,rgba(2,9,5,.70) 34%,rgba(2,9,5,.33) 66%,rgba(2,9,5,.18) 100%),
    radial-gradient(ellipse at 18% 58%,rgba(220,233,211,.13) 0%,rgba(220,233,211,.055) 28%,transparent 56%),
    radial-gradient(ellipse at 78% 43%,rgba(211,229,204,.10) 0%,rgba(211,229,204,.035) 30%,transparent 60%),
    linear-gradient(180deg,rgba(3,10,6,.08),rgba(3,10,6,.38));
  background-size:100% 100%,78% 82%,74% 76%,100% 100%;
  background-repeat:no-repeat;
  animation:fantastixMistDrift 18s ease-in-out infinite alternate;
}

.micro-story.dark.compact-story .story-copy::before{
  content:"FANTASTIX ANT · HABITAT / DESIGN / OBSERVATION";
  display:block;
  width:max-content;
  max-width:100%;
  margin:0 0 22px;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:999px;
  background:rgba(6,17,11,.20);
  color:rgba(255,255,255,.70);
  font-size:7px;
  font-weight:800;
  letter-spacing:.17em;
  text-transform:uppercase;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

.micro-story.dark.compact-story .story-copy::after{
  content:"Un habitat pensé pour elles. Un univers conçu pour magnifier chaque observation.";
  display:block;
  max-width:650px;
  margin-top:30px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.23);
  color:#eef3e7;
  font:500 clamp(19px,2vw,27px)/1.35 var(--serif);
  letter-spacing:-.015em;
  text-shadow:0 2px 22px rgba(0,0,0,.28);
}

.micro-story.dark.compact-story .story-copy h2 em{
  color:#dce8c2;
  text-shadow:0 0 30px rgba(181,201,133,.18);
}

@media(min-width:901px){
  .micro-story.dark.compact-story::before{
    inset:-8% -3%;
    background-attachment:fixed;
    background-position:center 42%;
    transform:scale(1.07);
  }
}

@media(max-width:700px){
  .micro-story.dark.compact-story::after{
    animation:none;
    background-image:
      linear-gradient(180deg,rgba(2,9,5,.43) 0%,rgba(2,9,5,.57) 45%,rgba(2,9,5,.84) 100%),
      radial-gradient(ellipse at 46% 53%,rgba(222,235,215,.08),transparent 62%);
    background-size:100% 100%,115% 88%;
    background-position:center,center;
  }
  .micro-story.dark.compact-story .story-copy::before{
    margin-bottom:18px;
    padding:8px 10px;
    font-size:6px;
    letter-spacing:.13em;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .micro-story.dark.compact-story .story-copy::after{
    margin-top:24px;
    padding-top:18px;
    font-size:19px;
  }
}

@media(prefers-reduced-motion:reduce){
  .micro-story.dark.compact-story::after{animation:none!important}
  .micro-story.dark.compact-story::before{background-attachment:scroll!important}
}

/* Swipe tactile galerie produit */
@media(max-width:900px){
  #variantMainVisual{touch-action:pan-y;overscroll-behavior-x:contain}
  #variantMainVisual>img,#variantMainVisual>picture,#variantMainVisual>picture>img{-webkit-user-drag:none;user-select:none}
}

/* Transition fluide du swipe produit */
#variantMainVisual{isolation:isolate}
#variantMainVisual>img,#variantMainVisual>.generated-product-visual{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.modal-gallery-swipe-layer{pointer-events:none!important;will-change:transform,opacity;z-index:2}
@media(max-width:900px){
  #variantMainVisual{touch-action:pan-y;overscroll-behavior-x:contain}
  #variantMainVisual>img{-webkit-user-drag:none;user-select:none}
}