/* Guillac Parts — couche « moderne » (2026-10) posée par-dessus front.css.
   Volontairement légère : formes plus douces, profondeur, micro-interactions. Rien ne change de place, rien ne gêne l'achat.
   Pour revenir en arrière : retirer le chargement dans functions.php (gp_modern). */

:root{
  --r:14px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --shadow:0 1px 2px color-mix(in srgb,var(--ink) 6%,transparent),0 12px 32px -14px color-mix(in srgb,var(--ink) 30%,transparent);
  --shadow-lift:0 2px 4px color-mix(in srgb,var(--ink) 6%,transparent),0 22px 44px -18px color-mix(in srgb,var(--ink) 38%,transparent);
  --ring:0 0 0 4px color-mix(in srgb,var(--red) 22%,transparent);
  --card-bg:color-mix(in srgb,var(--paper) 60%,var(--white));
}
html{scroll-padding-top:calc(var(--sticky-h,84px) + 12px)}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
input,select,textarea{accent-color:var(--red)}
::selection{background:color-mix(in srgb,var(--red) 22%,var(--white))}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}

/* ---------- Boutons : dégradé discret, reflet au survol ---------- */
.btn-red,.btn-plate{position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--red) 88%,white),var(--red));
  box-shadow:inset 0 1px 0 color-mix(in srgb,white 28%,transparent),0 6px 16px -8px color-mix(in srgb,var(--red) 70%,transparent)}
.btn-red::after,.btn-plate::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,color-mix(in srgb,white 32%,transparent) 50%,transparent 70%);translate:-120% 0}
.btn-red:hover,.btn-plate:hover{background:linear-gradient(180deg,var(--red),var(--plate));
  box-shadow:inset 0 1px 0 color-mix(in srgb,white 22%,transparent),0 10px 22px -10px color-mix(in srgb,var(--red) 80%,transparent)}
.btn-red:hover::after,.btn-plate:hover::after{translate:120% 0;transition:translate .7s var(--ease)}
.btn.is-done{background:#1f8a5c}
.btn:focus-visible{box-shadow:var(--ring);outline:0}

/* ---------- En-tête : verre dépoli plus net, recherche qui s'élargit ---------- */
.top{background:color-mix(in srgb,var(--white) 78%,transparent);
  -webkit-backdrop-filter:saturate(1.8) blur(16px);backdrop-filter:saturate(1.8) blur(16px)}
.nav a{position:relative;border-bottom:0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--red);
  scale:0 1;transform-origin:left;transition:scale .3s var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{scale:1 1}
.top .search input{transition:width .35s var(--ease),box-shadow .2s,border-color .2s,background-color .2s}
.top .search input:focus{box-shadow:var(--ring)}
@media (min-width:1200px){.top .search input:focus{width:21rem}}

/* ---------- Bannière : halo sarcelle qui respire lentement ---------- */
.hero:not(.has-img){background:
  radial-gradient(900px 380px at var(--hx,82%) var(--hy,18%),color-mix(in srgb,var(--red) 18%,transparent),transparent 70%),
  radial-gradient(600px 300px at 8% 110%,color-mix(in srgb,var(--plate) 9%,transparent),transparent 70%),
  linear-gradient(180deg,var(--white),var(--paper))}
.hero-title{letter-spacing:-.04em}
.hero-title::before{width:56px;background:linear-gradient(90deg,var(--red),var(--plate))}

/* ---------- Titres de section : petit trait d'accent ---------- */
.h-section::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 16%,transparent);margin:0 -.35rem 0 4px}
.h-page{letter-spacing:-.035em}
.h-page::after{background:linear-gradient(90deg,var(--red),var(--plate))}

/* ---------- Tuiles catégories : pastille douce, survol plus vivant ---------- */
.cat{border-color:color-mix(in srgb,var(--ink) 7%,transparent);box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 5%,transparent);
  transition:border-color .25s,box-shadow .3s var(--ease),transform .3s var(--ease)}
.cat img{background:radial-gradient(closest-side,var(--card-bg) 70%,var(--white))}
.cat span{border-top-color:color-mix(in srgb,var(--ink) 6%,transparent)}
.cat span::after{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--tint);font-size:.85rem;flex:none;
  transition:transform .3s var(--ease),background .25s,color .25s}
.cat:hover{border-color:color-mix(in srgb,var(--red) 45%,transparent);box-shadow:var(--shadow-lift);transform:translateY(-4px)}
.cat:hover span::after{background:var(--red);color:var(--white);transform:translateX(2px)}

/* ---------- Cartes produits : photo sur fond doux, prix plus lisible ---------- */
.card{border-color:color-mix(in srgb,var(--ink) 7%,transparent);box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 5%,transparent);
  transition:border-color .25s,box-shadow .3s var(--ease),transform .3s var(--ease)}
.card:hover{border-color:color-mix(in srgb,var(--red) 40%,transparent);box-shadow:var(--shadow-lift);transform:translateY(-4px)}
.card-img{background:var(--card-bg);border-radius:calc(var(--r) - 5px);border-bottom:0;padding:8%;margin-bottom:.9rem}
.card-img img{mix-blend-mode:multiply} /* les photos sur fond blanc se fondent dans la vignette */
.card .plate{font-size:1.2rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.card .plate s{font-size:.8em;margin-right:.2rem}
.tag{box-shadow:0 4px 10px -4px color-mix(in srgb,var(--ink) 40%,transparent);top:10px;left:10px}
.tag.promo{background:linear-gradient(135deg,#ff6a3d,#e0392b)}
/* Le bouton reste discret au repos et s'affirme au survol de la carte (ordinateur seulement) */
@media (hover:hover) and (min-width:761px){
  .card .btn-add{background:var(--tint);border-color:color-mix(in srgb,var(--red) 22%,transparent);color:var(--plate);box-shadow:none}
  .card .btn-add::after{display:none}
  .card:hover .btn-add,.card .btn-add:focus-visible{background:linear-gradient(180deg,color-mix(in srgb,var(--red) 88%,white),var(--red));
    border-color:var(--red);color:var(--white);box-shadow:0 6px 16px -8px color-mix(in srgb,var(--red) 70%,transparent)}
  .card .btn-add.is-done{background:#1f8a5c;border-color:#1f8a5c;color:var(--white)}
}
.fav{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:color-mix(in srgb,var(--white) 80%,transparent)}

/* ---------- Carrousels : bords fondus pour suggérer la suite ---------- */
@media (min-width:761px){
  .rail-track{-webkit-mask:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  .rail:has(.rail-btn.prev:not([disabled])) .rail-track{
    -webkit-mask:linear-gradient(90deg,transparent,#000 24px calc(100% - 24px),transparent);mask:linear-gradient(90deg,transparent,#000 24px calc(100% - 24px),transparent)}
  .rail:has(.rail-btn.next[disabled]) .rail-track{-webkit-mask:linear-gradient(90deg,transparent,#000 24px);mask:linear-gradient(90deg,transparent,#000 24px)}
  .rail:has(.rail-btn.prev[disabled]):has(.rail-btn.next[disabled]) .rail-track{-webkit-mask:none;mask:none}
}
.rail-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow)}

/* ---------- Réassurance : pastilles en dégradé ---------- */
.trust-ico{background:linear-gradient(145deg,color-mix(in srgb,var(--red) 16%,var(--white)),var(--tint));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--red) 18%,transparent)}

/* ---------- Fiche produit ---------- */
.gallery-main{border-color:color-mix(in srgb,var(--ink) 7%,transparent);box-shadow:var(--shadow)}
.buy .plate.big{font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.add .btn-red{flex:1;min-width:14rem;padding-block:1rem}
.specs tr:nth-child(odd){background:var(--card-bg)}

/* Barre d'achat collante (mobile) : apparaît quand le bouton principal sort de l'écran */
.buybar{display:none}
@media (max-width:760px){
  .buybar{display:flex;align-items:center;gap:.8rem;position:fixed;z-index:40;left:10px;right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom,0px));padding:.55rem .55rem .55rem 1rem;border-radius:999px;
    background:color-mix(in srgb,var(--white) 82%,transparent);-webkit-backdrop-filter:saturate(1.8) blur(16px);backdrop-filter:saturate(1.8) blur(16px);
    border:1px solid var(--line);box-shadow:var(--shadow-lift);
    translate:0 calc(100% + 30px);opacity:0;visibility:hidden;transition:translate .35s var(--ease),opacity .25s,visibility 0s .35s}
  .buybar.show{translate:none;opacity:1;visibility:visible;transition:translate .35s var(--ease),opacity .25s}
  .buybar-txt{flex:1;min-width:0;line-height:1.15}
  .buybar-name{display:block;font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .buybar-price{font-weight:700;font-size:1.05rem;color:var(--red);font-variant-numeric:tabular-nums}
  .buybar .btn{padding:.75rem 1.1rem;font-size:.92rem;flex:none}
  html:has(.buybar.show) .toast{bottom:84px}
  html:has(.buybar.show) .consent{display:none}
}

/* ---------- Panier & formulaires ---------- */
select:focus,input:focus,textarea:focus{box-shadow:var(--ring)}

/* ---------- Pied de page ---------- */
.foot::before{width:96px;margin-left:-48px;background:linear-gradient(90deg,var(--red),var(--plate))}

/* ---------- Mouvement (jamais avec « réduire les animations ») ---------- */
@media (prefers-reduced-motion:no-preference){
  @property --hx{syntax:"<percentage>";inherits:false;initial-value:82%}
  @property --hy{syntax:"<percentage>";inherits:false;initial-value:18%}
  .hero:not(.has-img){animation:gp-halo 18s ease-in-out infinite alternate}
  /* Les vignettes « respirent » : légère inclinaison de l'illustration au survol */
  .cat:hover img{scale:1.06;rotate:-2deg}
  .cat img{transition:scale .45s var(--ease),rotate .45s var(--ease)}
  /* Le point du titre de section s'allume quand il entre à l'écran */
  @supports (animation-timeline:view()){
    .h-section::before{animation:gp-dot linear both;animation-timeline:view();animation-range:entry 20% entry 80%}
  }
}
@keyframes gp-halo{0%{--hx:82%;--hy:18%}50%{--hx:64%;--hy:34%}100%{--hx:90%;--hy:6%}}
@keyframes gp-dot{from{scale:0;opacity:0}to{scale:1;opacity:1}}