/* ==================================================================
   ARBYTEK — Système
   Papier, encre, cobalt et orange.
   Le bleu structure les messages, l'orange porte les accents commerciaux.
   Markup aligné WooCommerce/Storefront pour portage direct en child theme.
   ================================================================== */
:root{
  --papier:      #F6F6F2;
  --papier-2:    #ECECE6;   /* fonds de médias produit */
  --encre:       #14161A;
  --gris:        #686D75;
  --ligne:       #DDDDD5;   /* filets d'information uniquement */
  --cobalt:      #0055A4;   /* actions — bleu drapeau */
  --cobalt-fonce:#00417D;
  --orange:      #DE4E00;   /* réservé à la bande pré-footer (bouton + texte décoré) */
  --france-blue: #0055A4;
  --france-red:  #EF4135;
  --blanc:       #FFFFFF;

  --f-display:'Archivo',sans-serif;
  --f-body:'Instrument Sans',sans-serif;
  --f-mono:'IBM Plex Mono',monospace;

  --max: 1240px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  /* Radio signature : trois angles arrondis, le haut-droit reste vif */
  --r-asym: 20px 0 20px 20px;
  /* AJOUT V18 (ajusté V20) : radios d'interface — léger pour les commandes,
     12px pour les surfaces. Les étiquettes produit portent la signature du site
     en miniature : trois angles arrondis, le haut-droit reste vif. */
  --r-ui: 12px;
  --r-soft: 6px;
  --r-asym-s: 8px 0 8px 8px;
  --r-pill: 999px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;interpolate-size:allow-keywords}
body{
  font-family:var(--f-body);
  background:var(--papier);
  color:var(--encre);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{max-width:100%;display:block}
.container{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}

/* ------------------------------------------------------------------
   Barre utilitaire — registre "instrument"
   ------------------------------------------------------------------ */
.topbar{
  background:var(--encre);
  color:var(--papier);
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.04em;
}
.topbar .container{
  display:flex;justify-content:space-between;align-items:center;
  min-height:34px;gap:1rem;
}
.topbar a:hover{color:var(--blanc);text-decoration:underline}
.topbar .tb-right{display:flex;gap:1.75rem}
@media(max-width:640px){.topbar .tb-right span:first-child{display:none}}

/* ------------------------------------------------------------------
   Header  (.site-header — classe Storefront)
   ------------------------------------------------------------------ */
.site-header{
  background:var(--papier);
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--ligne);
}
.site-header .container{
  display:flex;align-items:center;gap:2.5rem;
  min-height:72px;
}
.site-branding a{
  font-family:var(--f-display);
  font-variation-settings:'wdth' 125;
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.site-branding sup{
  font-family:var(--f-mono);font-size:.55rem;letter-spacing:0;
  color:var(--gris);margin-left:.4em;vertical-align:super;
}
.main-navigation{margin-left:auto}
.main-navigation ul{display:flex;gap:2rem}
.main-navigation a{
  position:relative;
  font-size:.9rem;font-weight:500;
  padding:.4rem 0;
  border-bottom:2px solid transparent;
  transition:color .22s ease,transform .22s cubic-bezier(.22,1,.36,1);
}
.main-navigation a::after{
  content:"";
  position:absolute;
  left:50%;right:50%;bottom:-2px;
  height:2px;
  /* AJOUT V23 : ligne bicolore bleu/rouge — moitié bleu drapeau à gauche,
     moitié rouge à droite. En grandissant depuis le centre, le bleu file vers
     la gauche et le rouge vers la droite, comme les lignes de l'intro. */
  background:linear-gradient(90deg,var(--france-blue) 0 50%,var(--france-red) 50% 100%);
  transition:left .28s cubic-bezier(.22,1,.36,1),right .28s cubic-bezier(.22,1,.36,1);
}
.main-navigation a:hover{color:var(--cobalt);transform:translateY(-2px)}
.main-navigation a:hover::after,
.main-navigation .current-menu-item a::after{left:0;right:0}

.header-tools{display:flex;align-items:center;gap:1.4rem}
.header-tools a{
  display:flex;align-items:center;gap:.45rem;font-size:.85rem;
  transition:color .22s ease,transform .22s cubic-bezier(.22,1,.36,1);
}
.header-tools a:hover{color:var(--cobalt);transform:translateY(-2px)}
.cart-contents .count{
  font-family:var(--f-mono);font-size:.72rem;
  background:var(--cobalt);color:var(--blanc);
  min-width:1.35rem;height:1.35rem;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
}
.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;padding:.5rem;margin-left:auto;
  transition:color .22s ease,transform .22s cubic-bezier(.22,1,.36,1);
}
.nav-toggle:hover{color:var(--cobalt);transform:translateY(-1px)}
.nav-toggle svg{display:block}
@media(max-width:900px){
  .main-navigation{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    background:var(--papier);border-bottom:1px solid var(--ligne);
    margin:0;padding:1rem var(--pad) 1.5rem;
  }
  .main-navigation.is-open{display:block}
  .main-navigation ul{flex-direction:column;gap:.25rem}
  .main-navigation a{display:block;padding:.65rem 0;font-size:1rem}
  .main-navigation a::after{display:none}
  .main-navigation a:hover{border-bottom-color:var(--cobalt)}
  .main-navigation .current-menu-item a{border-bottom-color:var(--encre)}
  .nav-toggle{display:block}
  .header-tools{margin-left:0}
  .site-header .container{gap:1.25rem}
}

/* ------------------------------------------------------------------
   HERO — slider "fiches". Signature de la page.
   3 fiches, index mono, lignes de progression.
   ------------------------------------------------------------------ */
.hero{position:relative;overflow:hidden;background:var(--papier)}
.hero-track{
  display:flex;
  transition:transform .65s cubic-bezier(.77,0,.18,1);
}
.hero-slide{
  min-width:100%;
  min-height:min(68vh, 620px);
  display:flex;align-items:center;
}
.hero-slide .container{
  width:100%;
  padding-top:3.5rem;padding-bottom:5rem;
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:3.5rem;align-items:center;
}
.hs-media{
  background:var(--papier-2);
  border-radius:var(--r-asym);
  aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.hs-media img{width:100%;height:100%;object-fit:cover}
.hs-media svg{width:72%;height:auto;color:var(--encre);opacity:.8}
.hs-media .ph-note{
  position:absolute;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.08em;
  color:var(--gris);
}
@media(max-width:860px){
  .hero-slide .container{grid-template-columns:1fr;gap:2rem}
  .hs-media{aspect-ratio:16/9}
}
.hs-index{
  font-family:var(--f-mono);
  font-size:.75rem;letter-spacing:.08em;
  color:var(--gris);
  display:block;margin-bottom:2rem;
}
.hs-index b{color:var(--encre);font-weight:500}
.hero-slide h2{
  font-family:var(--f-display);
  font-variation-settings:'wdth' 62;
  font-weight:700;
  font-size:clamp(2.6rem, 5.5vw, 4.6rem);
  line-height:.96;
  letter-spacing:-.01em;
  text-transform:uppercase;
  max-width:14ch;
  color:var(--encre);
}
.hero-slide h2 .accent-cobalt{color:var(--cobalt)}
.hero-slide h2 .accent-orange{color:var(--france-red)}
.hero-slide:nth-child(1) h2{color:var(--encre)}
.hero-slide:nth-child(1) h2 span{color:var(--france-blue)}
.hero-slide:nth-child(2) h2{color:var(--france-red)}
.hero-slide:nth-child(2) h2 span{color:var(--encre)}
.hero-slide:nth-child(3) h2{color:var(--encre)}
.hero-slide:nth-child(3) h2 span{color:var(--france-red)}
.hero-slide p{
  margin-top:1.75rem;
  max-width:44ch;
  font-size:1.05rem;
  color:var(--gris);
}
.hs-cta{margin-top:2.5rem;display:flex;align-items:center;gap:1.75rem;flex-wrap:wrap}

.button, .hs-cta .button{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-body);font-weight:600;font-size:.92rem;
  background:var(--cobalt);color:var(--blanc);
  padding:.95rem 1.9rem;
  border:0;cursor:pointer;
  border-radius:var(--r-soft);
  transition:background .28s ease,color .28s ease,border-color .28s ease,transform .28s cubic-bezier(.22,1,.36,1);
}
.button:hover{background:var(--cobalt-fonce);color:var(--blanc);transform:translateY(-2px)}
.button.button-ghost{
  background:transparent;color:var(--encre);
  padding:.95rem 0;
  border-bottom:2px solid var(--encre);
}
.button.button-ghost:hover{color:var(--cobalt);border-color:var(--cobalt);background:transparent}
.button.button-pro{background:var(--france-red)}
.button.button-pro:hover{background:#C9342A}
/* AJOUT V22 : l'orange ne subsiste que dans la bande pré-footer (.pro-band) —
   bouton et texte décoré. Partout ailleurs, la palette est bleu + rouge drapeau. */
.pro-band .button-pro{background:var(--orange)}
.pro-band .button-pro:hover{background:#B84000}

/* Contrôles du slider */
.hero-controls{
  position:absolute;left:0;right:0;bottom:0;
  border-top:1px solid var(--ligne);
  background:var(--papier);
}
.hero-controls .container{
  display:flex;align-items:center;gap:2rem;
  min-height:56px;
}
.hero-progress{display:flex;gap:.75rem;flex:1;max-width:340px}
.hp-step{
  flex:1;height:2px;background:var(--ligne);
  position:relative;cursor:pointer;border:0;padding:0;
}
.hp-step::after{
  content:'';position:absolute;inset:0;
  background:var(--encre);
  transform:scaleX(0);transform-origin:left;
}
.hp-step.is-active::after{
  animation:fill var(--hero-delay,6.5s) linear forwards;
}
.hp-step.is-done::after{transform:scaleX(1)}
@keyframes fill{to{transform:scaleX(1)}}
.hero-arrows{margin-left:auto;display:flex;gap:.25rem}
.hero-arrows button{
  background:none;border:0;cursor:pointer;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  color:var(--encre);
}
.hero-arrows button:hover{color:var(--cobalt)}
.hero-caption{
  font-family:var(--f-mono);font-size:.72rem;color:var(--gris);
  letter-spacing:.05em;
}
@media(max-width:640px){.hero-caption{display:none}}
@media (prefers-reduced-motion: reduce){
  .hero-track{transition:none}
  .hp-step.is-active::after{animation:none;transform:scaleX(1)}
}

/* ------------------------------------------------------------------
   Catégories — liste texte. Le compte est l'information.
   ------------------------------------------------------------------ */
.section{padding:5.5rem 0}
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:2rem;margin-bottom:3rem;flex-wrap:wrap;
}
.section-head h2{
  font-family:var(--f-display);
  font-variation-settings:'wdth' 110;
  font-weight:600;
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing:-.01em;
}
.section-head .all-link{
  font-family:var(--f-mono);font-size:.8rem;color:var(--gris);
}
.section-head .all-link:hover{color:var(--cobalt)}

/* ------------------------------------------------------------------
   Catégories — tuiles visuelles compactes
   ------------------------------------------------------------------ */
.cat-tiles{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1.25rem;
}
.cat-tile{display:block}
.ct-media{
  background:var(--papier-2);
  border-radius:var(--r-asym);
  aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:.8rem;overflow:hidden;position:relative;
}
.ct-media svg{width:46%;height:auto;color:var(--encre);opacity:.85;transition:transform .3s ease}
.cat-tile:hover .ct-media svg{transform:scale(1.07)}
.ct-media .tag-pro{top:.7rem;left:.7rem}
.ct-name{font-weight:600;font-size:.92rem;line-height:1.3}
.cat-tile:hover .ct-name{color:var(--cobalt)}
.ct-count{
  display:block;font-family:var(--f-mono);font-size:.7rem;
  color:var(--gris);margin-top:.2rem;
}
@media(max-width:1000px){.cat-tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.cat-tiles{grid-template-columns:repeat(2,1fr)}}

/* ------------------------------------------------------------------
   Produits — ul.products (markup WooCommerce)
   ------------------------------------------------------------------ */
ul.products{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2.5rem 1.75rem;
}
@media(max-width:1000px){ul.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){ul.products{grid-template-columns:1fr}}

ul.products li.product{position:relative}
.product-media{
  background:var(--papier-2);
  border-radius:var(--r-asym);
  aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.1rem;
  overflow:hidden;
}
.product-media svg{width:58%;height:auto;color:var(--encre);opacity:.85;transition:transform .3s ease}
li.product:hover .product-media svg{transform:scale(1.045)}

.tag-pro{
  position:absolute;top:.9rem;left:.9rem;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;
  color:var(--blanc);background:var(--france-red);
  padding:.3rem .6rem;
  border-radius:var(--r-asym-s);
  z-index:2;
  transition:background .28s ease,color .28s ease;
}
.tag-pro.tag-pro--blue{background:var(--cobalt)}
.woocommerce-loop-product__title{
  font-family:var(--f-body);font-weight:600;font-size:.98rem;
  line-height:1.35;
}
li.product a:hover .woocommerce-loop-product__title{color:var(--cobalt)}
.product-meta{
  font-family:var(--f-mono);font-size:.72rem;color:var(--gris);
  margin-top:.3rem;letter-spacing:.02em;
}
.price{
  display:block;margin-top:.6rem;
  font-family:var(--f-mono);font-size:.95rem;font-weight:500;
}
.stock-line{
  display:inline-flex;align-items:center;gap:.5rem;
  margin-top:.6rem;
  padding:.3rem .65rem;
  background:var(--papier-2);
  border-radius:var(--r-asym-s);
  font-family:var(--f-mono);font-size:.68rem;color:var(--gris);
  transition:background .28s ease,color .28s ease;
}
.stock-dot{width:7px;height:7px;border-radius:50%;background:var(--cobalt)}
.stock-line.on-order{color:#8a6100}
.stock-line.on-order .stock-dot{background:#b8860b}
.stock-line.out-of-stock{color:#b42318}
.stock-line.out-of-stock .stock-dot{background:#b42318}
#product-options .store-btn[disabled]{background:#fdecea;color:#b42318;border-color:#f2b8b5;cursor:not-allowed;opacity:1}
#product-options .product-quantity[disabled]{background:#f4f4f4;color:#9a9a9a;cursor:not-allowed}

/* ------------------------------------------------------------------
   Bande "réassurance" — trois faits, registre mono
   ------------------------------------------------------------------ */
.facts{border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.facts .container{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:2rem;padding-top:2.2rem;padding-bottom:2.2rem;
}
.fact b{
  display:block;font-family:var(--f-mono);font-weight:500;
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:.4rem;
}
.fact span{font-size:.88rem;color:var(--gris)}
@media(max-width:760px){.facts .container{grid-template-columns:1fr;gap:1.5rem}}

/* ------------------------------------------------------------------
   Espace pro — le seul bloc où l'orange s'exprime
   ------------------------------------------------------------------ */
.pro-band{background:var(--encre);color:var(--papier)}
.pro-band .container{
  padding-top:5rem;padding-bottom:5rem;
  display:grid;grid-template-columns:1.2fr .8fr;gap:4rem;align-items:center;
}
.pro-band .hs-index b{color:var(--orange)}
.pro-band .hs-index{color:#9BA0A8;margin-bottom:1.5rem}
.pro-band h2{
  font-family:var(--f-display);
  font-variation-settings:'wdth' 62;
  font-weight:700;text-transform:uppercase;
  font-size:clamp(2rem,5vw,3.6rem);line-height:1;
}
.pro-band p{color:#9BA0A8;margin-top:1.4rem;max-width:52ch}
.pro-points{margin-top:0}
.pro-points li{
  border-top:1px solid #2A2D33;
  padding:1.1rem 0;
  display:flex;gap:1rem;align-items:baseline;
  font-size:.9rem;
}
.pro-points li:last-child{border-bottom:1px solid #2A2D33}
.pro-points .pp-k{
  font-family:var(--f-mono);font-size:.7rem;color:var(--orange);
  letter-spacing:.08em;white-space:nowrap;
}
.pro-band .button{margin-top:2.2rem}
@media(max-width:860px){.pro-band .container{grid-template-columns:1fr;gap:2.5rem}}

/* ------------------------------------------------------------------
   Footer  (.site-footer — classe Storefront)
   ------------------------------------------------------------------ */
.site-footer{background:var(--papier);border-top:1px solid var(--ligne)}
.site-footer .container{
  padding-top:4rem;padding-bottom:2.5rem;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:3rem;
}
.site-footer h3{
  font-family:var(--f-mono);font-weight:500;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gris);
  margin-bottom:1.1rem;
}
.site-footer li{margin-bottom:.55rem;font-size:.9rem}
.site-footer a:hover{color:var(--cobalt)}
.f-brand{
  font-family:var(--f-display);
  font-variation-settings:'wdth' 125;
  font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  margin-bottom:1rem;display:block;
}
.f-addr{font-size:.9rem;color:var(--gris);font-style:normal;line-height:1.7}
.site-info{
  border-top:1px solid var(--ligne);
}
.site-info .container{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-top:1.4rem;padding-bottom:1.4rem;
  font-family:var(--f-mono);font-size:.7rem;color:var(--gris);
}
@media(max-width:860px){.site-footer .container{grid-template-columns:1fr 1fr;gap:2.5rem}}
@media(max-width:520px){
  /* AJOUT V24 : footer centré en une colonne sur mobile — logo, adresse,
     titres, liens et barre inférieure alignés au centre. */
  .site-footer .container{grid-template-columns:1fr;text-align:center;justify-items:center}
  .f-brand-logo{margin-left:auto;margin-right:auto}
  .site-info .container{justify-content:center;text-align:center}
}


/* Brand assets */
.site-branding{flex:0 0 auto}
.site-branding a{display:flex;align-items:center}
.site-logo{width:clamp(150px,18vw,230px);height:auto}
.f-brand-logo{width:190px;max-width:100%;height:auto;margin-bottom:1.2rem}
@media(max-width:520px){.site-logo{width:145px}.header-tools{gap:.8rem}}

/* Inner pages */
.page-hero{padding:5rem 0 4rem;border-bottom:1px solid var(--ligne)}
.page-kicker{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;color:var(--gris);text-transform:uppercase}
.page-hero h1{font-family:var(--f-display);font-variation-settings:'wdth' 62;font-weight:700;text-transform:uppercase;font-size:clamp(2.6rem,7vw,5.8rem);line-height:.92;max-width:12ch;margin-top:1rem}
.page-hero p{max-width:58ch;margin-top:1.5rem;color:var(--gris);font-size:1.05rem}
.page-hero.pro h1,.page-hero.pro .page-kicker{color:var(--france-red)}
.filterbar{
  position:relative;z-index:1;
  padding:1rem 0;
  background:var(--papier);
}
.filterbar .container{display:flex;gap:.7rem;flex-wrap:wrap}
/* AMÉLIORATION V18 : pilules avec fondu d'entrée/sortie au survol.
   Le fond passe à l'encre, le texte au papier — contraste toujours lisible. */
.filter-chip{border:1px solid var(--ligne);background:transparent;padding:.55rem .95rem;font:500 .78rem var(--f-mono);cursor:pointer;border-radius:var(--r-soft);transition:background .3s ease,color .3s ease,border-color .3s ease}
.filter-chip:hover,.filter-chip.is-active{border-color:var(--encre);background:var(--encre);color:var(--papier)}
.content-grid{display:grid;grid-template-columns:280px 1fr;gap:3rem}
.sidebar{border-right:1px solid var(--ligne);padding-right:2rem}
.sidebar h3{font:500 .72rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-bottom:1rem}
.sidebar a{display:block;padding:.55rem 0;border-bottom:1px solid var(--ligne);font-size:.92rem}
.sidebar a:hover{color:var(--cobalt)}
.info-panel{background:var(--papier-2);border-radius:var(--r-asym);padding:2rem;margin-bottom:2.5rem}
.info-panel h2{font-family:var(--f-display);font-variation-settings:'wdth' 100;font-size:1.8rem;margin-bottom:.8rem}
.info-panel p{color:var(--gris);max-width:70ch}
.empty-state{padding:5rem 0;text-align:center;border-top:1px solid var(--ligne)}
.empty-state h2{font-family:var(--f-display);font-size:2rem}
.empty-state p{color:var(--gris);margin:.8rem auto 1.5rem;max-width:45ch}
.breadcrumb{font:400 .72rem var(--f-mono);color:var(--gris);margin-bottom:1.2rem}
.breadcrumb a:hover{color:var(--cobalt)}
.legal-note{border-left:3px solid var(--france-blue);padding:1rem 1.2rem;background:var(--blanc);color:var(--encre);margin-top:2rem;max-width:70ch;border-radius:0 10px 10px 0}
@media(max-width:860px){.content-grid{grid-template-columns:1fr}.sidebar{border-right:0;border-bottom:1px solid var(--ligne);padding:0 0 1.5rem}}

.section-tight{padding-top:0}

/* Inner-page animated promotional slider */
.page-promo{position:relative;overflow:hidden;border-bottom:0;background:var(--papier)}
.page-promo-track{display:flex;transition:transform .7s cubic-bezier(.77,0,.18,1)}
.page-promo-slide{min-width:100%}
.page-promo-grid{min-height:520px;padding-top:3.4rem;padding-bottom:5.8rem;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:4rem}
.page-promo-copy h1{font-family:var(--f-display);font-variation-settings:'wdth' 62;font-weight:700;text-transform:uppercase;font-size:clamp(2.6rem,6vw,5.5rem);line-height:.94;max-width:12ch;margin-top:1rem;color:var(--encre)}
.page-promo-copy h1 .accent-cobalt{color:var(--cobalt)}
.page-promo-copy h1 .accent-orange{color:var(--france-red)}
.page-promo-slide:nth-child(1) h1{color:var(--encre)}
.page-promo-slide:nth-child(1) h1 span{color:var(--france-blue)}
.page-promo-slide:nth-child(2) h1{color:var(--france-red)}
.page-promo-slide:nth-child(2) h1 span{color:var(--encre)}
.page-promo-slide:nth-child(3) h1{color:var(--encre)}
.page-promo-slide:nth-child(3) h1 span{color:var(--france-red)}
.page-promo-copy p{max-width:56ch;margin-top:1.45rem;color:var(--gris);font-size:1.05rem}
.page-promo-copy>.button{margin-top:2rem}
.page-promo-media{background:var(--papier-2);border-radius:var(--r-asym);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.page-promo-media svg{width:70%;height:70%;color:var(--encre);opacity:.82;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.page-promo-slide[aria-hidden="false"] .page-promo-media svg,.page-promo-slide:first-child .page-promo-media svg{transform:scale(1.03)}
.page-promo-media>span{position:absolute;right:1.2rem;bottom:1rem;font:400 .68rem var(--f-mono);letter-spacing:.08em;color:var(--gris)}
.page-promo-controls{position:absolute;left:0;right:0;bottom:0;border-top:1px solid var(--ligne);background:rgba(246,246,242,.96);backdrop-filter:blur(8px)}
.page-promo-controls .container{min-height:55px;display:flex;align-items:center;gap:1.5rem}
.page-promo-progress{display:flex;gap:.75rem;flex:1;max-width:360px}
.page-promo-step{position:relative;flex:1;height:2px;border:0;padding:0;background:var(--ligne);cursor:pointer}
.page-promo-step:after{content:"";position:absolute;inset:0;background:var(--encre);transform:scaleX(0);transform-origin:left}
.page-promo-step.is-done:after{transform:scaleX(1)}
.page-promo-step.is-active:after{animation:pagePromoFill var(--page-promo-delay,6000ms) linear forwards}
@keyframes pagePromoFill{to{transform:scaleX(1)}}
.page-promo-arrows{margin-left:auto;display:flex}
.page-promo-arrows button{width:45px;height:45px;border:0;background:transparent;font-size:1.25rem;cursor:pointer;color:var(--encre)}
.page-promo-arrows button:hover{color:var(--cobalt)}
.page-promo.is-pro .page-kicker{color:var(--france-red)}
.page-promo.is-pro .page-promo-step.is-active:after,.page-promo.is-pro .page-promo-step.is-done:after{background:var(--france-red)}
.breadcrumb-placeholder{visibility:hidden}
.section-band{border-top:0}
.section-band:not(:has(.button-pro)) .hs-index b{color:#8FA9FF}
.section-band:not(:has(.button-pro)) .button{background:var(--cobalt)}
.section-band:not(:has(.button-pro)) .pp-k{color:#8FA9FF}
@media(max-width:860px){.page-promo-grid{grid-template-columns:1fr;gap:2rem;min-height:auto;padding-top:2.6rem;padding-bottom:6.5rem}.page-promo-media{aspect-ratio:16/9}.page-promo-copy h1{max-width:15ch}.breadcrumb-placeholder{display:none}}
@media(max-width:560px){.page-promo-grid{padding-bottom:6rem}.page-promo-copy h1{font-size:clamp(2.35rem,13vw,3.8rem)}.page-promo-media svg{width:76%;height:76%}.page-promo-copy>.button{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){
  .page-promo-track{transition:none}
  .page-promo-step.is-active:after{animation:none;transform:scaleX(1)}
  .main-navigation a,.main-navigation a::after,.header-tools a,.nav-toggle{transition:none}
}

/* Branded page entrance */
.site-intro{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
  background:var(--papier);
  transition:opacity .6s ease,visibility .6s ease;
}
.site-intro__mark{display:grid;justify-items:center;gap:1.35rem}
.site-intro__logo{width:min(300px,58vw);height:auto}
.site-intro__lines{display:flex;width:min(300px,58vw);height:3px;overflow:hidden}
/* AMÉLIORATION V18 : tracé plus lent pour laisser le temps de lire la légende */
.site-intro__line{width:50%;transform:scaleX(0);animation:introLine .95s .25s cubic-bezier(.22,1,.36,1) forwards}
.site-intro__line--blue{background:var(--france-blue);transform-origin:right}
.site-intro__line--orange{background:var(--france-red);transform-origin:left}
.site-intro__caption{font:500 .67rem var(--f-mono);letter-spacing:.18em;color:var(--gris);text-transform:uppercase}
.site-intro.is-leaving{opacity:0;visibility:hidden}
@keyframes introLine{to{transform:scaleX(1)}}

/* Editorial text reveal, replayed on every slide */
.hero-slide .hs-index,.hero-slide h2,.hero-slide h2 span,.hero-slide p,.hero-slide .button,
.page-promo-slide .breadcrumb,.page-promo-slide .page-kicker,.page-promo-slide h1,.page-promo-slide h1 span,.page-promo-slide p,.page-promo-slide .button{
  opacity:0;transform:translateY(20px);
  transition:opacity .5s ease,transform .62s cubic-bezier(.22,1,.36,1);
}
.hero-slide h2 span,.page-promo-slide h1 span{display:inline-block}
.hero-slide[aria-hidden="false"] .hs-index,.page-promo-slide[aria-hidden="false"] .breadcrumb{opacity:1;transform:translateY(0);transition-delay:.06s}
.hero-slide[aria-hidden="false"] h2,.page-promo-slide[aria-hidden="false"] .page-kicker{opacity:1;transform:translateY(0);transition-delay:.13s}
.hero-slide[aria-hidden="false"] h2 span,.page-promo-slide[aria-hidden="false"] h1{opacity:1;transform:translateY(0);transition-delay:.21s}
.hero-slide[aria-hidden="false"] p,.page-promo-slide[aria-hidden="false"] h1 span{opacity:1;transform:translateY(0);transition-delay:.29s}
.hero-slide[aria-hidden="false"] .button,.page-promo-slide[aria-hidden="false"] p{opacity:1;transform:translateY(0);transition-delay:.37s}
.page-promo-slide[aria-hidden="false"] .button{opacity:1;transform:translateY(0);transition-delay:.45s}
.hero-slide .hs-media,.page-promo-slide .page-promo-media{opacity:.55;transform:scale(.975);transition:opacity .6s ease,transform .85s cubic-bezier(.22,1,.36,1)}
.hero-slide[aria-hidden="false"] .hs-media,.page-promo-slide[aria-hidden="false"] .page-promo-media{opacity:1;transform:scale(1)}

/* Product entrance */
li.product.reveal-product{
  opacity:0;
  transform:translateY(17px);
  transition:opacity .42s ease,transform .42s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--reveal-delay,0ms);
}
li.product.reveal-product .product-media{transform:scale(.98);transition:transform .42s cubic-bezier(.22,1,.36,1)}
li.product.reveal-product.is-revealed{opacity:1;transform:translateY(0)}
li.product.reveal-product.is-revealed .product-media{transform:scale(1)}

/* Compact consent panel */
.consent-banner{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:9000;
  width:min(360px,calc(100vw - 2rem));
  background:rgba(255,255,255,.97);color:var(--encre);
  border:1px solid var(--ligne);
  border-top:3px solid var(--france-blue);
  border-radius:16px 0 16px 16px;
  padding:1rem;
  box-shadow:0 22px 60px rgba(20,22,26,.18);
  opacity:0;transform:translateX(34px) scale(.97);
  transition:opacity .38s ease,transform .48s cubic-bezier(.22,1,.36,1),visibility .38s ease;
  visibility:hidden;
}
.consent-banner.is-visible{opacity:1;transform:translateX(0) scale(1);visibility:visible}
.consent-banner.is-closing{opacity:0;transform:translateX(40px) scale(.97);visibility:hidden}
.consent-banner__row{display:block}
.consent-banner__copy{font-size:.8rem;line-height:1.45;color:var(--gris)}
.consent-banner__copy strong{display:block;font:600 .67rem var(--f-mono);letter-spacing:.1em;color:var(--france-blue);margin-bottom:.3rem}
.consent-banner__actions{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.8rem}
.consent-button{
  border:1px solid var(--encre);background:transparent;color:var(--encre);
  padding:.58rem .7rem;font:500 .65rem var(--f-mono);cursor:pointer;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.consent-button:hover{transform:translateY(-1px);background:var(--encre);color:var(--blanc)}
.consent-button--primary{background:var(--encre);border-color:var(--encre);color:var(--blanc)}
.consent-button--primary:hover{background:var(--france-blue);border-color:var(--france-blue)}
.consent-links{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.65rem}
.consent-link{border:0;background:none;color:var(--france-blue);padding:0;font:400 .61rem var(--f-mono);text-decoration:underline;cursor:pointer}
.consent-link[data-consent="settings"]{margin-left:auto;color:var(--gris)}
.consent-settings{display:none;margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--ligne)}
.consent-banner.is-configuring .consent-settings{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.consent-settings label{font-size:.72rem;color:var(--gris)}
.consent-settings input{accent-color:var(--france-red);margin-right:.4rem}
.policy-dialog{
  width:min(620px,calc(100% - 2rem));max-height:80vh;border:0;padding:0;
  border-radius:18px 0 18px 18px;background:var(--papier);color:var(--encre);
  box-shadow:0 24px 80px rgba(20,22,26,.3);
}
.policy-dialog::backdrop{background:rgba(20,22,26,.54);backdrop-filter:blur(3px)}
.policy-dialog__inner{padding:2rem}
.policy-dialog h2{font-family:var(--f-display);font-size:2rem;color:var(--cobalt);margin-bottom:.8rem}
.policy-dialog p{color:var(--gris);margin-bottom:.8rem}
.policy-dialog__close{margin-top:.7rem}
@media(max-width:720px){
  .consent-banner{right:1rem;bottom:1rem}
}
@media(prefers-reduced-motion:reduce){
  .site-intro{transition:none}.site-intro__line{animation:none;transform:scaleX(1)}
  li.product.reveal-product,li.product.reveal-product .product-media{transition:none}
  .consent-banner{transition:none}
  .hero-slide .hs-index,.hero-slide h2,.hero-slide h2 span,.hero-slide p,.hero-slide .button,
  .page-promo-slide .breadcrumb,.page-promo-slide .page-kicker,.page-promo-slide h1,.page-promo-slide h1 span,.page-promo-slide p,.page-promo-slide .button{transition:none}
}

/* ==================================================================
   AJOUTS V18 — Entrée de page douce
   ------------------------------------------------------------------
   Toutes les pages fondent à l'apparition. Sur les pages dotées de
   l'intro de marque, le fondu se produit sous le voile et reste
   invisible : aucun conflit. Désactivé si l'utilisateur préfère
   réduire les animations.
   ================================================================== */
@keyframes page-fade{from{opacity:0}to{opacity:1}}
body{animation:page-fade .55s ease both}
@media(prefers-reduced-motion:reduce){
  body{animation:none}
  .filter-chip,.tag-pro,.stock-line,.button{transition:none}
}

/* ---- Agrandissement photo produit ---- */
.lightbox{position:fixed;inset:0;z-index:9999;background:rgba(6,8,6,.94);display:flex;align-items:center;justify-content:center;padding:2rem;cursor:zoom-out}
.lightbox__media{max-width:min(92vw,1000px);max-height:88vh;display:flex;align-items:center;justify-content:center}
.lightbox__media img,.lightbox__media svg{max-width:100%;max-height:88vh;width:auto;height:auto;object-fit:contain;display:block}
.lightbox__close{position:absolute;top:1rem;right:1.25rem;background:none;border:0;color:#f5f0e8;font-size:2.5rem;line-height:1;cursor:pointer;padding:.25rem .5rem}
.lightbox__arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.45);border:0;color:#f5f0e8;font-size:1.75rem;line-height:1;cursor:pointer;padding:.75rem 1rem}
.lightbox__arrow--prev{left:.75rem}
.lightbox__arrow--next{right:.75rem}
[data-gallery-main]{cursor:zoom-in}
@media(max-width:640px){.lightbox{padding:1rem}.lightbox__arrow{font-size:1.4rem;padding:.5rem .7rem}}