:root{
  --red:#E51F31;
  --red-dark:#B91525;
  --blue:#0B57A4;
  --blue-deep:#0A3E75;
  --sky:#00A0DE;
  --sky-light:#78CFEE;
  --orange:#00A0DE;      /* ancien orange remplacé par le bleu ciel RAMATEK */
  --orange-dark:#0B7FB3;
  --bg:#F4F6F9;
  --surface:#FFFFFF;
  --ink:#0E1D33;
  --ink-soft:#5B6B84;
  --border:#E1E6EE;
  --radius:2px;
  --ease:cubic-bezier(.22,.9,.3,1);
  /* Typographie façon Jumia : une seule famille, portée par les graisses
     (nos outils n'ont pas d'accès réseau vers jumia.ci pour en extraire la
     police exacte, donc on reprend ici une humaniste grasse et non
     condensée — même esprit que les titres/prix visibles sur le site —
     au lieu de l'ancien duo Barlow Condensed + Inter). */
  --font-display:'Nunito Sans', system-ui, -apple-system, sans-serif;
  --font-body:'Nunito Sans', system-ui, -apple-system, sans-serif;
  box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit;}
/* Le site reste volontairement en thème clair (fond blanc) quel que soit le
   mode du système, pour garder des fiches produit toujours blanches sur les
   bandeaux de couleur (ventes flash, bandeaux promo…), comme sur Jumia.
   Un futur bouton "mode sombre" pourra réactiver ce bloc via [data-theme="dark"]. */
:root[data-theme="dark"]{
  --bg:#0A1220; --surface:#101B2D; --ink:#EAF0F8; --ink-soft:#93A2B9;
  --border:#233150; --red:#FF4C5A; --sky:#39C1F2;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}
html{scroll-behavior:smooth;}
html,body{height:100%;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased;}
h1,h2,h3,.display{font-family:var(--font-display); font-weight:800; letter-spacing:-.01em; line-height:1.08; margin:0;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
.wrap{max-width:1200px; margin:0 auto; padding:0 20px;}

.frag-field{position:absolute; inset:0; overflow:hidden; pointer-events:none;}

/* =======================================================================
   MOTION DESIGN GLOBAL — légers mouvements cohérents sur tout le site :
   apparition au scroll, en-tête qui se resserre, retours de pression sur
   les boutons, entrée des pastilles de réduction. Tout est neutralisé par
   la media query prefers-reduced-motion en haut de ce fichier.
   ======================================================================= */
body{animation:bodyFadeIn .4s ease both;}
@keyframes bodyFadeIn{from{opacity:0;} to{opacity:1;}}

.reveal{opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .6s var(--ease);}
.reveal.is-visible{opacity:1; transform:none;}

.btn,.quick-add,.header-link,.cat-circle,.pagination a,.account-nav a,.admin-nav a{-webkit-tap-highlight-color:transparent;}
.btn{transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease, opacity .15s ease;}
.btn:active:not(:disabled){transform:scale(.96);}
.quick-add:active{transform:scale(.88);}

.discount-pill{animation:pillPop .35s var(--ease);}
@keyframes pillPop{from{transform:scale(.55); opacity:0;} to{transform:scale(1); opacity:1;}}

/* ---------- Top utility bar ---------- */
.utility{background:#F5F6F8; color:var(--ink-soft); font-size:12px; border-bottom:1px solid var(--border);}
.utility .wrap{display:flex; justify-content:space-between; align-items:center; height:32px; gap:16px; overflow:hidden;}
.utility-left{display:flex; align-items:center; gap:6px; color:var(--red); font-weight:700;}
.utility-left svg{flex-shrink:0;}
.utility-left:hover{text-decoration:underline;}
.utility a{opacity:.95;}
.utility .right a:hover{opacity:1; text-decoration:underline;}
.utility .right{display:flex; align-items:center; gap:14px;}
.utility .right a:not(:last-child){padding-right:14px; border-right:1px solid var(--border);}

/* ---------- Header ---------- */
header.site{position:sticky; top:0; z-index:40; background:var(--surface); border-bottom:1px solid var(--border); transition:box-shadow .25s ease;}
header.site.is-scrolled{box-shadow:0 8px 22px rgba(10,20,40,.08);}
.header-row{display:flex; align-items:center; gap:28px; padding:16px 0; transition:padding .25s var(--ease);}
header.site.is-scrolled .header-row{padding:10px 0;}
.brand{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.search{flex:1; position:relative; display:flex; align-items:center; background:var(--surface); border:1.5px solid var(--border); height:44px; padding:0 0 0 42px;}
.search-ic{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink-soft); pointer-events:none;}
.search input{flex:1; border:0; background:transparent; outline:0; font-size:14px; color:var(--ink); height:100%;}
.search input::placeholder{color:var(--ink-soft);}
.search button{background:var(--red); color:#fff; border:0; height:100%; padding:0 22px; font-weight:700; font-size:13.5px; display:flex; align-items:center; gap:6px; flex-shrink:0;}
.search button:hover{background:var(--red-dark);}
.header-actions{display:flex; align-items:center; gap:4px; flex-shrink:0;}
.header-link{display:flex; align-items:center; gap:7px; padding:8px 12px; color:var(--ink); font-size:13px; font-weight:600; border-radius:var(--radius);}
.header-link:hover{background:var(--bg);}
.header-link span:first-of-type{white-space:nowrap;}
.header-link .chev{color:var(--ink-soft); margin-left:-2px;}
.cart-link{position:relative;}
.cart-ic-wrap{position:relative; display:flex;}
.cart-count{position:absolute; top:-6px; right:-8px; background:var(--red); color:#fff; font-size:10px; font-weight:700; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 3px;}

.catnav{border-top:1px solid var(--border); overflow-x:auto; scrollbar-width:none;}
.catnav::-webkit-scrollbar{display:none;}
.catnav .row{display:flex; gap:2px; padding:0; white-space:nowrap;}
.catnav a{display:inline-flex; align-items:center; gap:7px; color:var(--ink-soft); font-size:13.5px; font-weight:600; padding:11px 14px; border-bottom:2.5px solid transparent;}
.catnav a:hover{color:var(--red); border-bottom-color:var(--red);}
.catnav .cat-ic{width:17px; height:17px; display:flex; flex-shrink:0;}
.catnav .cat-ic svg{width:100%; height:100%;}

@media (max-width:860px){
  /* Sur mobile on masque les libellés, jamais le compteur du panier */
  .header-link > span:first-of-type:not(.cart-ic-wrap):not(.hd-ic){display:none;}
  .header-link .chev{display:none;}
  .header-link{padding:8px;}
}

/* ---------- Hero banner carousel (en tête de page) ---------- */
.hero-banner{position:relative; padding:22px 0; background:var(--bg);}
.hero-banner .wrap{position:relative;}
.hero-banner-card{position:relative; border-radius:16px; overflow:hidden; background:var(--blue-deep); box-shadow:0 10px 30px rgba(10,20,40,.12);}
.hero-banner-track{position:relative; width:100%; aspect-ratio:1248/357;}
@media (max-width:640px){ .hero-banner-track{aspect-ratio:3/2;} }
.hero-banner-slide{
  position:absolute; inset:0; display:block; opacity:0; z-index:1;
  transition:opacity .7s ease; pointer-events:none;
}
.hero-banner-slide.is-active{opacity:1; z-index:2; pointer-events:auto;}
.hero-banner-slide img{width:100%; height:100%; object-fit:cover; display:block;}
.hero-arrow{
  position:absolute; top:50%; z-index:5; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
  background:#fff; color:var(--ink); display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(10,20,40,.22);
  transition:transform .2s ease, box-shadow .2s ease;
}
.hero-arrow svg{width:16px; height:16px;}
.hero-arrow:hover{transform:translateY(-50%) scale(1.08); box-shadow:0 6px 18px rgba(10,20,40,.3);}
.hero-arrow.prev{left:4px;}
.hero-arrow.next{right:4px;}
.hero-dots{position:absolute; left:50%; bottom:16px; z-index:5; transform:translateX(-50%); display:flex; gap:7px;}
.hero-dots button{width:8px; height:8px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; transition:background .2s ease, transform .2s ease;}
.hero-dots button.is-active{background:#fff; transform:scale(1.3);}
@media (max-width:640px){
  .hero-arrow{width:30px; height:30px;} .hero-arrow svg{width:14px; height:14px;}
  .hero-arrow.prev{left:-2px;} .hero-arrow.next{right:-2px;}
}

/* ---------- Generic homepage section ---------- */
.hp-section{padding:22px 0; position:relative;}
.hp-section.bg-light{background:var(--bg);}
.hp-section.bg-surface{background:var(--surface);}
.hp-section.bg-light, .hp-section.bg-surface{padding:40px 0;}

/* Compartiments de couleur (ventes flash, carrousel sombre, bandeaux marque) :
   présentés comme une carte à coins arrondis sur fond neutre, avec un léger
   débord visible du dernier élément (effet "coupé" en bout de carrousel). */
.hp-section.bg-dark, .hp-section.bg-brand, .hp-section.bg-red, .hp-section.bg-orange{background:var(--bg); color:inherit;}
.hp-section.bg-dark > .wrap, .hp-section.bg-brand > .wrap, .hp-section.bg-red > .wrap, .hp-section.bg-orange > .wrap{
  border-radius:16px; overflow:hidden; padding:26px 24px 24px; color:#fff;
  box-shadow:0 10px 30px rgba(10,20,40,.1);
}
.hp-section.bg-dark > .wrap{background:var(--blue-deep);}
.hp-section.bg-brand > .wrap{background:linear-gradient(115deg, var(--blue-deep) 0%, var(--blue) 100%);}
.hp-section.bg-red > .wrap{background:linear-gradient(115deg, var(--red-dark) 0%, var(--red) 100%);}
.hp-section.bg-orange > .wrap{background:linear-gradient(115deg, var(--orange-dark) 0%, var(--orange) 100%);}
.hp-section.bg-dark .ink-soft, .hp-section.bg-dark .sub{color:#C7DAF0;}
.hp-section.bg-orange .sub{color:#E0F4FC;}
@media (max-width:640px){
  .hp-section.bg-dark > .wrap, .hp-section.bg-brand > .wrap, .hp-section.bg-red > .wrap, .hp-section.bg-orange > .wrap{border-radius:12px; padding:20px 16px 18px;}
}

.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:22px; border-bottom:1px solid var(--border); padding-bottom:14px;}
.hp-section.bg-dark .section-head, .hp-section.bg-brand .section-head, .hp-section.bg-red .section-head, .hp-section.bg-orange .section-head{border-bottom-color:rgba(255,255,255,.2);}
.section-head h2{font-size:26px;}
.section-head .sub{color:var(--ink-soft); font-size:13.5px; margin-top:6px;}
.tag{font-size:11.5px; font-weight:700; color:var(--red); text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:4px;}
.tag-light{color:#FFE8EA;}
.see-more{font-size:13px; font-weight:700; color:var(--blue); white-space:nowrap;}
.see-more:hover{text-decoration:underline;}

/* Bouton "Voir plus" en pilule blanche (bandeaux colorés) */
.btn-pill-white{
  display:inline-flex; align-items:center; gap:6px; background:#fff; color:var(--ink);
  font-size:13px; font-weight:700; padding:9px 16px; border-radius:999px; white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-pill-white:hover{transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.18);}

/* ---------- Product card (shared) ---------- */
.prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
/* ---------- Carte produit (modèle façon Jumia) ----------
   Photo entière sur fond blanc, bouton "+" rond en haut à droite,
   bandeau de stock pleine largeur, titre sur 2 lignes, note, prix en
   gros puis ancien prix barré + remise en pastille verte. */
.card{background:#fff; border:0; border-radius:10px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 1px 3px rgba(10,20,40,.08);
  transition:box-shadow .25s ease, transform .25s cubic-bezier(.22,.9,.3,1);}
.card:hover{transform:translateY(-3px); box-shadow:0 12px 26px rgba(10,20,40,.14);}
.card .media{
  aspect-ratio:1/1; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:#fff; padding:10px;
}
/* Ombre portée sous l'icône, quand aucune photo réelle n'a été envoyée */
.card .media::before{
  content:""; position:absolute; left:50%; bottom:13%; width:48%; height:9%; transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(10,20,40,.18) 0%, rgba(10,20,40,0) 72%); border-radius:50%;
}
.card .media img{position:relative; z-index:1;}
.card .media:has(img)::before{display:none;}
.card .media svg, .card .media div svg{width:58%; height:58%; position:relative; z-index:1; transition:transform .45s cubic-bezier(.22,.9,.3,1); filter:drop-shadow(0 12px 14px rgba(10,20,40,.2));}
.card:hover .media svg, .card:hover .media img{transform:scale(1.05);}
.card .media img{transition:transform .45s cubic-bezier(.22,.9,.3,1);}
.quick-add{
  position:absolute; top:8px; right:8px; z-index:2; width:36px; height:36px; border-radius:50%; border:0; cursor:pointer;
  background:#2B2B2B; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  transition:background .15s ease, transform .15s ease;
}
.quick-add svg{width:18px; height:18px;}
.quick-add:hover{background:var(--red); transform:scale(1.08);}
.quick-add:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
.stock-band{
  background:#E6F5FC; color:var(--blue); font-size:12px; font-weight:600; text-align:center;
  padding:5px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.stock-band-out{background:#FBE4E4; color:var(--red-dark, #B3121F);}
.card-out .media img, .card-out .media svg{opacity:.55;}
.card .body{padding:10px 12px 14px; display:flex; flex-direction:column; gap:6px; flex:1;}
.card .title{font-size:14px; font-weight:500; line-height:1.4; min-height:39px; color:#282828;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;}
.card .title:hover{color:var(--blue);}
.rating-row{display:flex; align-items:center; gap:4px; font-size:12.5px; font-weight:600; color:#282828;}
.rating-row .star-ic{width:14px; height:14px; color:var(--sky); display:flex;}
.rating-row .review-count{color:#75757A; font-weight:500;}
.card .price-block{display:flex; flex-direction:column; gap:3px; margin-top:auto; padding-top:2px;}
.card .price{font-family:var(--font-display); font-weight:800; font-size:19px; line-height:1.2; color:#282828; white-space:nowrap;}
.card .old-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.card .old-price{font-size:12.5px; color:#75757A; text-decoration:line-through; font-family:var(--font-body); font-weight:500; white-space:nowrap;}
.discount-pill{background:#1E8E4E; color:#fff; font-size:11.5px; font-weight:700; padding:2px 7px; border-radius:4px; line-height:1.4;}
@keyframes addPulse{ 0%{transform:scale(1);} 40%{transform:scale(.8);} 70%{transform:scale(1.15);} 100%{transform:scale(1);} }
.quick-add.pulse-add{animation:addPulse .4s ease;}

@media (max-width:980px){ .prod-grid{grid-template-columns:repeat(2,1fr);} }

/* ---------- Carousels (flash sale, essentiels, bons plans) ---------- */
.carousel-track{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; scrollbar-width:thin;}
.carousel-item{flex:0 0 200px; scroll-snap-align:start;}
.carousel-item .card{height:100%;}

/* Flèches de navigation flottantes, à cheval sur le bord du carrousel —
   mêmes proportions sur tous les compartiments (ventes flash, carrousels
   colorés, univers en cercle…), qu'ils soient sur fond clair ou coloré. */
.carousel-wrap{position:relative;}
.carousel-arrow{
  position:absolute; top:40%; transform:translateY(-50%); z-index:3;
  width:34px; height:34px; border-radius:50%; border:0; background:#fff; color:var(--ink);
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(10,20,40,.22);
  transition:transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.carousel-arrow:hover{transform:translateY(-50%) scale(1.08); box-shadow:0 8px 20px rgba(10,20,40,.3);}
.carousel-arrow:active{transform:translateY(-50%) scale(.92);}
.carousel-arrow-prev{left:-14px;}
.carousel-arrow-next{right:-14px;}
.carousel-arrow[hidden]{display:none;}
@media (max-width:640px){
  .carousel-arrow{width:28px; height:28px;}
  .carousel-arrow-prev{left:-10px;}
  .carousel-arrow-next{right:-10px;}
}
.flash-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap;}
.flash-head-title{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.flash-head-title h2{color:#fff; font-size:24px;}
.flash-head-title .sep{color:rgba(255,255,255,.5);}
.flash-head-title .flash-sub{color:#FFD9DC; font-size:14px; font-weight:600;}
.countdown-pill{
  display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.16); color:#fff;
  font-size:12.5px; font-weight:700; padding:6px 12px; border-radius:999px;
}
.flash-sale .tag{color:#FFE2E5;}
.bg-dark h2{color:#fff;}
.flash-sale .sub{color:#FFD9DC;}
/* Étiquette ("Officiel", "Promo"…) lisible sur les compartiments colorés */
.hp-section.bg-dark .tag, .hp-section.bg-brand .tag, .hp-section.bg-red .tag, .hp-section.bg-orange .tag{color:#fff; opacity:.85;}

/* ---------- Category circle strip ---------- */
.cat-circle-strip{display:flex; gap:18px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin;}
.cat-circle{flex:0 0 92px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;}
.cat-circle .ic{width:60px; height:60px; border-radius:50%; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; padding:16px; transition:transform .2s ease, border-color .2s ease;}
.cat-circle .ic svg{width:100%; height:100%;}
.cat-circle:hover .ic{transform:translateY(-3px); border-color:var(--blue);}
.cat-circle .lbl{font-size:12px; font-weight:600; color:var(--ink);}

/* ---------- Category tile grid ("Vos produits en un seul endroit") ---------- */
.cat-tiles-card{background:var(--surface); border-radius:14px; padding:24px 24px 26px; box-shadow:0 6px 20px rgba(10,20,40,.05);}
.cat-tile-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px;}
.cat-tile{
  --accent:var(--blue);
  position:relative; display:block; aspect-ratio:1/1.05; border-radius:12px; overflow:hidden;
  background:linear-gradient(135deg, var(--blue-deep), var(--blue)); isolation:isolate;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cat-tile:hover{transform:translateY(-4px); box-shadow:0 14px 28px rgba(10,20,40,.18);}
.cat-tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease);}
.cat-tile:hover img{transform:scale(1.07);}
.cat-tile .tile-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,20,40,.08) 0%, rgba(10,20,40,0) 38%, rgba(10,20,40,.72) 100%);
}
/* Sans photo réelle : un "packshot" studio dans la couleur de la catégorie (lumière douce,
   ombre portée sous l'icône) — même traitement que les fiches produit, répété sur chaque
   univers tant que la vraie photo n'est pas envoyée depuis l'admin. */
.cat-tile.no-photo{
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 50% 24%, color-mix(in srgb, var(--accent) 55%, #fff 10%) 0%, var(--accent) 60%, color-mix(in srgb, var(--accent), #000 30%) 100%);
}
.cat-tile.no-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,20,40,0) 45%, rgba(10,20,40,.55) 100%);}
.cat-tile.no-photo::before{
  content:""; position:absolute; left:50%; bottom:20%; width:40%; height:9%; transform:translateX(-50%); z-index:1;
  background:radial-gradient(ellipse, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 72%); border-radius:50%;
}
.cat-tile .tile-ic{position:relative; z-index:1; width:42%; height:42%; color:#fff; filter:drop-shadow(0 10px 12px rgba(0,0,0,.25));}
.cat-tile .tile-top{
  position:absolute; top:12px; left:12px; right:12px; z-index:2; display:flex; align-items:flex-start;
  justify-content:space-between; gap:6px;
}
.cat-tile .tile-name{color:#fff; font-weight:800; font-size:14.5px; line-height:1.2; text-shadow:0 1px 4px rgba(0,0,0,.35);}
.cat-tile .tile-arrow{width:18px; height:18px; flex:0 0 auto; color:#fff; opacity:.9; transition:transform .25s var(--ease);}
.cat-tile:hover .tile-arrow{transform:translateX(3px);}
.cat-tile .tile-cta{
  position:absolute; left:12px; bottom:12px; z-index:2; background:#fff; color:var(--ink);
  font-size:11px; font-weight:800; letter-spacing:.02em; padding:7px 12px; border-radius:999px;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
}
@media (max-width:1180px){ .cat-tile-grid{grid-template-columns:repeat(4,1fr);} }
@media (max-width:760px){
  .cat-tiles-card{padding:18px 16px 20px; border-radius:12px;}
  .cat-tile-grid{grid-template-columns:repeat(2,1fr); gap:10px;}
  .cat-tile .tile-name{font-size:13px;}
}

/* ---------- Services strip / cards ---------- */
.services-title{font-size:22px; margin-bottom:18px; text-align:center;}
.value-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--border); background:var(--surface);}
.value-item{padding:24px 20px; display:flex; gap:14px; align-items:flex-start; border-left:1px solid var(--border);}
.value-item:first-child{border-left:0;}
.value-item .ic{flex-shrink:0; width:26px; height:26px;}
.value-item h3{font-family:var(--font-body); font-weight:700; font-size:14px; margin-bottom:4px;}
.value-item p{font-size:12.5px; color:var(--ink-soft); margin:0; line-height:1.4;}
@media (max-width:980px){
  .value-grid{grid-template-columns:repeat(2,1fr);}
  .value-item{border-left:0; border-top:1px solid var(--border);}
  .value-item:nth-child(1),.value-item:nth-child(2){border-top:0;}
}

.service-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.service-card{background:var(--surface); border:1px solid var(--border); padding:22px 20px; text-align:center;}
.service-card .ic{width:34px; height:34px; color:var(--red); display:inline-flex; margin-bottom:12px;}
.service-card h3{font-family:var(--font-body); font-size:14.5px; font-weight:700; margin-bottom:6px;}
.service-card p{font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0;}
@media (max-width:980px){ .service-cards{grid-template-columns:repeat(2,1fr);} }

/* ---------- Promo banner ---------- */
.promo-banner{overflow:hidden;}
.promo-banner-row{display:flex; align-items:center; gap:22px; padding:34px 0; flex-wrap:wrap; position:relative; z-index:2;}
.promo-ic{width:52px; height:52px; flex-shrink:0; background:rgba(255,255,255,.15); border-radius:50%; display:flex; align-items:center; justify-content:center; padding:13px;}
.promo-text{flex:1; min-width:220px;}
.promo-text h2{color:#fff; font-size:24px; margin-bottom:6px;}
.promo-text p{color:rgba(255,255,255,.85); font-size:14px; max-width:60ch; margin:0;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; font-weight:700; font-size:13.5px; border:1.5px solid transparent; white-space:nowrap;}
.btn-primary{background:var(--red); color:#fff;}
.btn-primary:hover{background:var(--red-dark);}

/* ---------- SEO block ---------- */
.seo-block{font-size:14px;}
.seo-title{font-size:22px; margin-bottom:16px;}
.seo-body p{color:var(--ink-soft); line-height:1.7; margin:0 0 14px;}

/* ---------- FAQ ---------- */
.faq-list{display:flex; flex-direction:column; gap:10px; max-width:820px;}
.faq-item{background:var(--surface); border:1px solid var(--border); padding:4px 18px;}
.faq-item summary{padding:14px 0; font-weight:600; font-size:14.5px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-size:20px; color:var(--ink-soft); font-weight:400;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{margin:0 0 16px; color:var(--ink-soft); font-size:13.5px; line-height:1.6;}

/* ---------- CTA banner ---------- */
.cta-banner-row{display:flex; justify-content:space-between; align-items:center; gap:24px; padding:44px 0; flex-wrap:wrap;}
.cta-banner-row h2{color:#fff; font-size:26px;}
.cta-banner-row p{color:rgba(255,255,255,.85); font-size:14px; margin-top:6px; max-width:52ch;}

/* ---------- Footer ---------- */
footer{background:var(--ink); color:#B7C2D6;}
footer .wrap{padding:48px 20px 26px;}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px; padding-bottom:32px;}
.foot-brand p{font-size:13px; line-height:1.6; color:#8E9CB4; max-width:32ch; margin-top:10px;}
footer h4{font-family:var(--font-body); font-size:13px; font-weight:700; color:#fff; margin-bottom:14px; text-transform:uppercase; letter-spacing:.05em;}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
footer a{font-size:13.5px; color:#AEB9CE;}
footer a:hover{color:#fff;}
.foot-bottom{border-top:1px solid #22304A; padding-top:18px; display:flex; justify-content:space-between; font-size:12px; color:#7688A4; flex-wrap:wrap; gap:10px;}
@media (max-width:640px){ .foot-grid{grid-template-columns:1fr 1fr; row-gap:26px;} }
@media (max-width:480px){ .foot-grid{grid-template-columns:1fr;} }

@media (max-width:640px){
  .utility .wrap{font-size:11px;}
  .header-row{flex-wrap:wrap; padding:12px 0;}
  .search{order:3; width:100%;}
  .hp-section{padding:30px 0;}
}

/* =======================================================================
   BOUTIQUE : liens produit, stock, boutons génériques, fil d'Ariane
   ======================================================================= */
.media-link{display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:inherit;}
.card .media img{width:100%; height:100%; object-fit:contain;}
.stock-pill-out{background:#FBE4E4; color:var(--red-dark);}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:4px; font-size:14px; font-weight:700; border:0; transition:background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;}
.btn-block{width:100%;}
.btn-primary{background:var(--red); color:#fff;}
.btn-primary:hover{background:var(--red-dark);}
.btn-primary:disabled{background:var(--border); color:var(--ink-soft); cursor:not-allowed;}
.btn-outline{background:transparent; color:var(--ink); border:1.5px solid var(--border);}
.btn-outline:hover{border-color:var(--blue); color:var(--blue);}
.btn-dark{background:var(--blue-deep); color:#fff;}
.btn-dark:hover{background:var(--blue);}
.btn-sm{padding:8px 14px; font-size:13px;}
.btn-link{color:var(--blue); font-weight:700; font-size:13.5px;}
.btn-link:hover{text-decoration:underline;}

.breadcrumb{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12.5px; color:var(--ink-soft); padding:14px 0;}
.breadcrumb a{color:var(--ink-soft);}
.breadcrumb a:hover{color:var(--blue);}
.breadcrumb .sep{color:var(--border);}
.breadcrumb .current{color:var(--ink); font-weight:600;}

.alert{padding:13px 16px; border-radius:4px; font-size:13.5px; margin-bottom:18px; display:flex; gap:10px; align-items:flex-start;}
.alert-error{background:#FBE4E4; color:var(--red-dark); border:1px solid #F3C3C3;}
.alert-success{background:#E3F6EB; color:#176B41; border:1px solid #BCE8CD;}
.alert-info{background:#E8F1FB; color:var(--blue-deep); border:1px solid #C7DCF2;}

.badge{display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:700;}
.badge-en_attente{background:#E6F5FC; color:#0B6E99;}
.badge-confirmee,.badge-en_preparation{background:#E8F1FB; color:var(--blue-deep);}
.badge-expediee{background:#EDE6FB; color:#5B3DA6;}
.badge-livree,.badge-payee{background:#E3F6EB; color:#176B41;}
.badge-annulee,.badge-echouee{background:#FBE4E4; color:var(--red-dark);}
.badge-remboursee{background:#F1F1F1; color:var(--ink-soft);}

/* =======================================================================
   PAGE CATÉGORIE / RECHERCHE
   ======================================================================= */
.shop-layout{display:grid; grid-template-columns:240px 1fr; gap:28px; padding:22px 0 50px;}
.shop-filters{background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:18px; align-self:start; position:sticky; top:14px;}
.shop-filters h3{font-size:14px; margin-bottom:12px;}
.filter-group{border-bottom:1px solid var(--border); padding:2px 0 14px; margin-bottom:14px;}
.filter-group:last-of-type{border-bottom:0; margin-bottom:6px;}
.filter-group summary{display:flex; justify-content:space-between; align-items:center; cursor:pointer; list-style:none; padding:6px 0; font-size:12.5px; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:.04em;}
.filter-group summary::-webkit-details-marker{display:none;}
.filter-group summary .chev{width:14px; height:14px; flex-shrink:0; transition:transform .25s var(--ease,ease);}
.filter-group[open] summary .chev{transform:rotate(180deg);}
.filter-group .ft-body{padding-top:10px; display:flex; flex-direction:column; gap:10px; animation:filterOpen .25s ease;}
.filter-group .ft-label{font-size:12.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px; display:block;}
.filter-price{display:flex; align-items:center; gap:8px;}
.filter-price input{width:0; flex:1; min-width:0; border:1px solid var(--border); border-radius:4px; padding:8px 9px; font-size:13px; font-family:inherit;}
.filter-radio,.filter-check{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink); cursor:pointer; transition:color .15s ease;}
.filter-radio:hover,.filter-check:hover{color:var(--blue);}
.filter-radio input,.filter-check input{accent-color:var(--red); width:15px; height:15px; flex-shrink:0;}
a.filter-radio{color:var(--ink-soft);}
@keyframes filterOpen{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}
.shop-results-head{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap;}
.shop-results-head h1{font-size:22px;}
.shop-count{color:var(--ink-soft); font-size:13px; margin-top:4px;}
.sort-select{border:1px solid var(--border); border-radius:4px; padding:9px 12px; font-size:13px; font-family:inherit; background:#fff;}
.shop-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.shop-empty{padding:60px 20px; text-align:center; color:var(--ink-soft);}
.pagination{display:flex; justify-content:center; gap:6px; margin-top:32px;}
.pagination a,.pagination span{display:flex; align-items:center; justify-content:center; min-width:36px; height:36px; border-radius:4px; font-size:13px; font-weight:600; border:1px solid var(--border); color:var(--ink); transition:transform .15s ease, border-color .15s ease, color .15s ease;}
.pagination a:hover{transform:translateY(-2px);}
.pagination .active{background:var(--red); border-color:var(--red); color:#fff;}
.pagination a:hover{border-color:var(--blue); color:var(--blue);}
@media (max-width:860px){
  .shop-layout{grid-template-columns:1fr;}
  .shop-filters{position:static;}
  .shop-grid{grid-template-columns:repeat(2,1fr);}
}

/* =======================================================================
   FICHE PRODUIT
   ======================================================================= */
.pdp{display:grid; grid-template-columns:1fr 1fr; gap:44px; padding:26px 0 10px;}
.pdp-media{
  position:relative; border:1px solid var(--border); border-radius:8px; aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:radial-gradient(120% 110% at 50% 16%, #ffffff 0%, #F6F8FB 55%, #ECF0F6 100%);
}
.pdp-media::before{
  content:""; position:absolute; left:50%; bottom:11%; width:44%; height:8%; transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(10,20,40,.16) 0%, rgba(10,20,40,0) 72%); border-radius:50%;
}
.pdp-media:has(img)::before{display:none;}
.pdp-media img{width:100%; height:100%; object-fit:cover; position:relative; z-index:1;}
.pdp-media svg{width:40%; height:40%; position:relative; z-index:1; filter:drop-shadow(0 14px 16px rgba(10,20,40,.2));}
.pdp-title{font-size:24px; margin-bottom:8px;}
.pdp-meta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--ink-soft); margin-bottom:16px;}
.pdp-sku{color:var(--ink-soft);}
.pdp-price-row{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding:18px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-bottom:20px;}
.pdp-price{font-family:var(--font-display); font-weight:800; font-size:32px; color:var(--ink);}
.pdp-old-price{font-size:15px; color:var(--ink-soft); text-decoration:line-through;}
.pdp-short-desc{color:var(--ink-soft); font-size:14px; line-height:1.7; margin-bottom:22px;}
.pdp-stock{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:#176B41; margin-bottom:18px;}
.pdp-stock.out{color:var(--red-dark);}
.pdp-stock svg{width:16px; height:16px;}
.qty-stepper{display:inline-flex; align-items:center; border:1.5px solid var(--border); border-radius:4px; overflow:hidden;}
.qty-stepper button{width:38px; height:42px; background:#fff; display:flex; align-items:center; justify-content:center; color:var(--ink);}
.qty-stepper button:hover{background:var(--bg);}
.qty-stepper button svg{width:14px; height:14px;}
.qty-stepper input{width:46px; height:42px; border:0; border-left:1px solid var(--border); border-right:1px solid var(--border); text-align:center; font-size:14px; font-family:inherit;}
.pdp-actions{display:flex; align-items:center; gap:14px; margin-bottom:26px; flex-wrap:wrap;}
.pdp-actions .btn{flex:1; min-width:200px;}
.pdp-tabs{margin-top:36px;}
.pdp-tabs h2{font-size:18px; margin-bottom:14px;}
.pdp-tabs .desc-body{color:var(--ink-soft); font-size:14px; line-height:1.8;}
.pdp-related{padding:36px 0 50px;}
.pdp-related h2{font-size:20px; margin-bottom:18px;}
@media (max-width:860px){ .pdp{grid-template-columns:1fr; gap:24px;} }

/* =======================================================================
   PANIER
   ======================================================================= */
.cart-layout{display:grid; grid-template-columns:1fr 340px; gap:28px; padding:26px 0 50px; align-items:start;}
.cart-table{background:var(--surface); border:1px solid var(--border); border-radius:8px; overflow:hidden;}
.cart-row{display:grid; grid-template-columns:70px 1fr auto auto auto; gap:16px; align-items:center; padding:16px 18px; border-bottom:1px solid var(--border);}
.cart-row:last-child{border-bottom:0;}
.cart-row .thumb{width:70px; height:70px; border-radius:4px; background:radial-gradient(120% 120% at 50% 20%, #fff 0%, #F4F6F9 70%); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.cart-row .thumb svg{filter:drop-shadow(0 6px 8px rgba(10,20,40,.18));}
.cart-row .thumb img{width:100%; height:100%; object-fit:cover;}
.cart-row .thumb svg{width:55%; height:55%; color:var(--blue);}
.cart-row .name{font-size:13.5px; font-weight:600; line-height:1.4;}
.cart-row .name a{color:var(--ink);}
.cart-row .name a:hover{color:var(--blue);}
.cart-row .unit-price{font-size:12.5px; color:var(--ink-soft); margin-top:4px;}
.cart-row .line-total{font-family:var(--font-display); font-weight:800; font-size:16px; white-space:nowrap;}
.cart-row .remove-btn{width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink-soft);}
.cart-row .remove-btn:hover{color:var(--red); background:#FBE4E4;}
.cart-row .remove-btn svg{width:16px; height:16px;}
.cart-empty{background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:60px 20px; text-align:center;}
.cart-empty p{color:var(--ink-soft); margin:10px 0 20px;}
.cart-summary{background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:22px;}
.cart-summary h3{font-size:16px; margin-bottom:16px;}
.summary-line{display:flex; justify-content:space-between; font-size:13.5px; padding:8px 0; color:var(--ink-soft);}
.summary-line.total{border-top:1px solid var(--border); margin-top:6px; padding-top:14px; font-size:16px; font-weight:800; color:var(--ink); font-family:var(--font-display);}
@media (max-width:860px){ .cart-layout{grid-template-columns:1fr;} .cart-row{grid-template-columns:54px 1fr; grid-template-areas:"thumb name" "thumb qty" "thumb total"; row-gap:8px;} }

/* =======================================================================
   CHECKOUT
   ======================================================================= */
.checkout-layout{display:grid; grid-template-columns:1fr 360px; gap:28px; padding:26px 0 50px; align-items:start;}
.checkout-card{background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:24px; margin-bottom:20px;}
.checkout-card h2{font-size:16px; margin-bottom:16px; display:flex; align-items:center; gap:10px;}
.checkout-card h2 .step-num{width:24px; height:24px; border-radius:50%; background:var(--blue-deep); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-family:var(--font-body); font-weight:700;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form-field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.form-field.full{grid-column:1/-1;}
.form-field label{font-size:12.5px; font-weight:700; color:var(--ink-soft);}
.form-field input,.form-field select,.form-field textarea{border:1.5px solid var(--border); border-radius:4px; padding:11px 13px; font-size:14px; font-family:inherit; background:#fff; color:var(--ink);}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none; border-color:var(--blue);}
.form-field textarea{resize:vertical; min-height:70px;}
.pay-options{display:flex; flex-direction:column; gap:10px;}
.pay-option{display:flex; align-items:flex-start; gap:12px; border:1.5px solid var(--border); border-radius:6px; padding:14px 16px; cursor:pointer; transition:border-color .15s ease, background .15s ease;}
.pay-option:has(input:checked){border-color:var(--blue); background:#F3F8FD;}
.pay-option input{margin-top:3px;}
.pay-option .pay-title{font-size:14px; font-weight:700;}
.pay-option .pay-desc{font-size:12.5px; color:var(--ink-soft); margin-top:3px;}
.pay-option.disabled{opacity:.55; cursor:not-allowed;}
.order-summary-list{display:flex; flex-direction:column; gap:12px; max-height:260px; overflow-y:auto; margin-bottom:16px; padding-right:4px;}
.order-summary-item{display:flex; gap:12px; align-items:center; font-size:13px;}
.order-summary-item .thumb{width:46px; height:46px; border-radius:4px; background:radial-gradient(120% 120% at 50% 20%, #fff 0%, #F4F6F9 70%); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.order-summary-item .thumb svg{width:55%; height:55%; color:var(--blue);}
.order-summary-item .qty{color:var(--ink-soft); font-size:12px;}
.order-summary-item .price{margin-left:auto; font-weight:700; white-space:nowrap;}
@media (max-width:900px){ .checkout-layout{grid-template-columns:1fr;} .form-grid{grid-template-columns:1fr;} }

/* =======================================================================
   COMPTE CLIENT (connexion / inscription / tableau de bord)
   ======================================================================= */
.auth-wrap{max-width:440px; margin:40px auto 60px; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:32px;}
.auth-wrap h1{font-size:22px; margin-bottom:6px;}
.auth-wrap .sub{color:var(--ink-soft); font-size:13.5px; margin-bottom:24px;}
.auth-switch{text-align:center; margin-top:18px; font-size:13.5px; color:var(--ink-soft);}
.account-layout{display:grid; grid-template-columns:230px 1fr; gap:28px; padding:26px 0 60px; align-items:start;}
.account-nav{background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:10px; display:flex; flex-direction:column; gap:2px;}
.account-nav a{padding:11px 14px; border-radius:6px; font-size:13.5px; font-weight:600; color:var(--ink-soft); display:flex; align-items:center; gap:10px;}
.account-nav a svg{width:16px; height:16px;}
.account-nav a:hover{background:var(--bg); color:var(--ink);}
.account-nav a.active{background:#FBE4E4; color:var(--red-dark);}
.account-card{background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:24px;}
.account-card h1{font-size:19px; margin-bottom:18px;}
.order-list-item{border:1px solid var(--border); border-radius:6px; padding:16px 18px; margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;}
.order-list-item:last-child{margin-bottom:0;}
.order-list-item .num{font-weight:700; font-size:14px;}
.order-list-item .date{font-size:12px; color:var(--ink-soft); margin-top:3px;}
.order-list-item .total{font-family:var(--font-display); font-weight:800; font-size:16px;}
.order-detail-items{border-top:1px solid var(--border); margin-top:16px; padding-top:16px;}
.order-detail-row{display:flex; justify-content:space-between; font-size:13.5px; padding:8px 0; border-bottom:1px dashed var(--border);}
@media (max-width:760px){ .account-layout{grid-template-columns:1fr;} }

/* =======================================================================
   BACK-OFFICE (admin)
   ======================================================================= */
body.admin-body{background:#F1F4F9;}
.admin-shell{display:flex; min-height:100vh;}
.admin-sidebar{width:230px; background:var(--blue-deep); color:#fff; flex-shrink:0; display:flex; flex-direction:column;}
.admin-sidebar .brand{padding:22px 20px; font-family:var(--font-display); font-size:20px; font-weight:900; letter-spacing:-.01em; color:#fff; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.12);}
.admin-nav{padding:14px 10px; display:flex; flex-direction:column; gap:2px;}
.admin-nav a{display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:6px; font-size:13.5px; font-weight:600; color:#C7D6EC;}
.admin-nav a svg{width:17px; height:17px;}
.admin-nav a:hover{background:rgba(255,255,255,.08); color:#fff;}
.admin-nav a.active{background:var(--red); color:#fff;}
.admin-sidebar .foot{margin-top:auto; padding:16px 20px; border-top:1px solid rgba(255,255,255,.12); font-size:12.5px; color:#9FB2CF;}
.admin-main{flex:1; min-width:0;}
.admin-topbar{background:#fff; border-bottom:1px solid var(--border); padding:16px 28px; display:flex; justify-content:space-between; align-items:center;}
.admin-topbar h1{font-size:19px;}
.admin-content{padding:24px 28px 50px;}
.admin-card{background:#fff; border:1px solid var(--border); border-radius:8px; padding:22px; margin-bottom:20px;}
.admin-stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px;}
.admin-stat{background:#fff; border:1px solid var(--border); border-radius:8px; padding:18px 20px;}
.admin-stat .label{font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; font-weight:700;}
.admin-stat .value{font-family:var(--font-display); font-size:28px; font-weight:800; margin-top:6px;}
.admin-table-wrap{overflow-x:auto;}
.admin-table{width:100%; border-collapse:collapse; font-size:13.5px;}
.admin-table th{text-align:left; padding:10px 14px; background:#F7F9FC; color:var(--ink-soft); font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; font-weight:700; border-bottom:1px solid var(--border);}
.admin-table td{padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle;}
.admin-table tr:last-child td{border-bottom:0;}
.admin-table .row-thumb{width:38px; height:38px; border-radius:4px; background:var(--bg); display:flex; align-items:center; justify-content:center;}
.admin-table .row-thumb svg{width:60%; height:60%; color:var(--blue);}
.admin-table .row-actions{display:flex; gap:8px;}
.admin-form .form-grid{grid-template-columns:1fr 1fr;}
.admin-login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--blue-deep);}
.admin-login-card{background:#fff; border-radius:10px; padding:38px; width:100%; max-width:380px; box-shadow:0 20px 60px rgba(0,0,0,.25);}
.admin-login-card .brand{font-family:var(--font-display); font-size:24px; font-weight:800; margin-bottom:4px; display:block; text-align:center;}
.admin-login-card .sub{text-align:center; color:var(--ink-soft); font-size:13px; margin-bottom:26px;}
@media (max-width:900px){
  .admin-sidebar{position:fixed; left:-230px; top:0; bottom:0; z-index:40; transition:left .2s ease;}
  .admin-sidebar.open{left:0;}
  .admin-stat-grid{grid-template-columns:repeat(2,1fr);}
}

/* =====================================================================
   Ajouts version améliorée
   ===================================================================== */

/* Lien "Aller au contenu" (accessibilité clavier / lecteurs d'écran) */
.skip-link{position:absolute; left:-9999px; top:8px; z-index:1000; background:#fff; color:var(--blue, var(--blue)); padding:8px 14px; border-radius:4px; font-weight:700;}
.skip-link:focus{left:8px;}

/* Message flottant (ajout au panier, erreurs) */
.toast{position:fixed; left:50%; bottom:22px; transform:translate(-50%, 20px); z-index:999;
  background:#1d2433; color:#fff; padding:12px 18px; border-radius:8px; font-size:14px; font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.18); opacity:0; transition:opacity .2s ease, transform .2s ease;
  max-width:calc(100% - 32px); text-align:center;}
.toast.is-visible{opacity:1; transform:translate(-50%, 0);}
.toast.toast-error{background:var(--red-dark, #B3121F);}
@media (prefers-reduced-motion: reduce){ .toast{transition:none;} }

/* Pagination compacte */
.pagination .dots{display:inline-flex; align-items:center; padding:0 6px; color:var(--ink-soft, #667);}

/* Boutons désactivés */
.btn[disabled], button[disabled]{opacity:.6; cursor:not-allowed;}

/* Admin : détail de commande sur 2 colonnes, 1 seule sur mobile */
.admin-order-grid{display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start;}
@media (max-width: 900px){ .admin-order-grid{grid-template-columns:1fr;} }

/* =====================================================================
   MISE EN PAGE "FAÇON JUMIA" — page d'accueil compacte
   Chaque compartiment est une carte arrondie, les compartiments sont
   très rapprochés, les carrousels sont serrés (cartes ~150 px).
   Couleurs de fond (colonne bg_style de homepage_sections) :
     light   -> carte blanche, titre foncé, bouton "Voir plus" rouge RAMATEK
     surface -> carte bleu très pâle, titre et bouton "Voir plus" bleus
     red / orange (= bleu ciel) / brand / dark -> carte colorée, titre blanc, bouton blanc
   ===================================================================== */
:root{ --jm-orange:var(--red); --jm-cream:#EAF6FD; --jm-gap:6px; } /* accent = rouge RAMATEK, fond clair = bleu ciel très pâle */

/* --- Espacement entre compartiments : très réduit --- */
.hp-section,
.hp-section.bg-light, .hp-section.bg-surface,
.hp-section.bg-dark, .hp-section.bg-brand, .hp-section.bg-red, .hp-section.bg-orange{
  padding:var(--jm-gap) 0; background:transparent;
}

/* --- Chaque compartiment = carte arrondie, même largeur que le carrousel d'accueil --- */
.hp-section > .wrap,
.hp-section.bg-dark > .wrap, .hp-section.bg-brand > .wrap, .hp-section.bg-red > .wrap, .hp-section.bg-orange > .wrap{
  width:calc(100% - 20px); max-width:1200px; box-sizing:border-box;
  border-radius:12px; padding:14px 16px 16px; overflow:hidden; box-shadow:none;
}
.hp-section.bg-light > .wrap{background:#fff;}
.hp-section.bg-surface > .wrap{background:var(--jm-cream);}
.hp-section.bg-red > .wrap{background:var(--red-dark);}
.hp-section.bg-orange > .wrap{background:var(--sky);}
.hp-section.bg-brand > .wrap{background:var(--blue);}
.hp-section.bg-dark > .wrap{background:var(--blue-deep);}
@media (max-width:640px){
  .hp-section > .wrap,
  .hp-section.bg-dark > .wrap, .hp-section.bg-brand > .wrap, .hp-section.bg-red > .wrap, .hp-section.bg-orange > .wrap{
    width:calc(100% - 12px); border-radius:10px; padding:12px 10px 12px;
  }
}

/* --- En-tête de compartiment : grand titre gras + pilule "Voir plus" --- */
.section-head{align-items:center; margin-bottom:12px; padding-bottom:0; border-bottom:0; gap:12px;}
.section-head h2{font-size:26px; font-weight:800; letter-spacing:0;}
.section-head .sub{font-size:13px; margin-top:3px;}
.section-head .tag{margin-bottom:2px;}
.hp-section.bg-light .section-head h2{color:#282828;}
.hp-section.bg-surface .section-head h2{color:var(--blue);}
.hp-section.bg-red h2, .hp-section.bg-orange h2, .hp-section.bg-brand h2, .hp-section.bg-dark h2{color:#fff;}
.hp-section.bg-red .sub, .hp-section.bg-orange .sub, .hp-section.bg-brand .sub, .hp-section.bg-dark .sub{color:rgba(255,255,255,.85);}
.btn-pill-white{padding:9px 18px; font-size:13px; font-weight:600; gap:8px; color:#282828;}
.btn-pill-white svg{width:16px; height:16px;}
.hp-section.bg-light .btn-pill-white{background:var(--red); color:#fff;}
.hp-section.bg-surface .btn-pill-white{background:var(--blue); color:#fff;}
.hp-section.bg-orange .btn-pill-white{color:var(--blue);}
.hp-section.bg-red .btn-pill-white{color:var(--red-dark);}
.hp-section.bg-brand .btn-pill-white, .hp-section.bg-dark .btn-pill-white{color:var(--blue);}
@media (max-width:640px){
  .section-head h2{font-size:19px;}
  .section-head .sub{display:none;}
  .btn-pill-white{padding:7px 12px; font-size:12px;}
}

/* --- Carrousels serrés, sans barre de défilement visible --- */
.carousel-track, .cat-circle-strip{gap:8px; padding-bottom:0; scrollbar-width:none;}
.carousel-track::-webkit-scrollbar, .cat-circle-strip::-webkit-scrollbar{display:none;}
.carousel-item{flex:0 0 150px;}
.prod-grid{gap:8px; grid-template-columns:repeat(6,1fr);}
@media (max-width:1100px){ .prod-grid{grid-template-columns:repeat(4,1fr);} }
@media (max-width:640px){ .prod-grid{grid-template-columns:repeat(2,1fr);} .carousel-item{flex-basis:140px;} }
/* Flèches : discrètes, n'apparaissent qu'au survol du carrousel (ordinateur) */
.carousel-arrow{opacity:0; top:42%;}
.carousel-wrap:hover .carousel-arrow{opacity:1;}
.carousel-arrow-prev{left:4px;} .carousel-arrow-next{right:4px;}
@media (hover:none){ .carousel-arrow{display:none;} }

/* --- Cartes produit plus compactes dans les compartiments d'accueil --- */
.hp-section .card{border-radius:6px; box-shadow:none;}
.hp-section .card:hover{transform:none; box-shadow:0 4px 14px rgba(0,0,0,.18);}
.hp-section .card .media{padding:0;}
.hp-section .card .media img{object-fit:contain;}
.hp-section .quick-add{width:32px; height:32px; top:6px; right:6px;}
.hp-section .quick-add svg{width:16px; height:16px;}
.hp-section .stock-band{font-size:11px; padding:3px 6px; font-weight:500;}
.hp-section .card .body{padding:8px 8px 10px; gap:3px;}
.hp-section .card .title{font-size:12.5px; line-height:1.35; min-height:34px; font-weight:400;}
.hp-section .rating-row{font-size:11.5px; gap:3px;}
.hp-section .rating-row .star-ic{width:12px; height:12px;}
.hp-section .card .price{font-size:16px;}
.hp-section .card .old-row{gap:5px;}
.hp-section .card .old-price{font-size:11px;}
.hp-section .discount-pill{font-size:11px; padding:1px 5px; border-radius:3px;}

/* --- Carrousel d'accueil (bannières) : comme Jumia --- */
.hero-banner{padding:10px 0 var(--jm-gap);}
.hero-banner > .wrap{width:calc(100% - 20px); max-width:1200px; padding:0; box-sizing:border-box;}
.hero-banner-card{border-radius:12px; box-shadow:none;}
.hero-arrow{opacity:0; transition:opacity .2s ease, transform .2s ease;}
.hero-banner:hover .hero-arrow{opacity:1;}
.hero-arrow.prev{left:12px;} .hero-arrow.next{right:12px;}
@media (hover:none){ .hero-arrow{display:none;} }
.hero-dots{bottom:10px; gap:6px; padding:6px 9px; border-radius:999px; background:rgba(0,0,0,.45);}
.hero-dots button{width:8px; height:8px; background:transparent; border:1.5px solid rgba(255,255,255,.85);}
.hero-dots button.is-active{width:22px; border-radius:999px; background:#fff; transform:none;}
@media (max-width:640px){
  .hero-banner > .wrap{width:calc(100% - 12px);}
  .hero-banner-card{border-radius:10px;}
  .hero-dots{bottom:6px; padding:4px 7px;}
  .hero-dots button{width:6px; height:6px;} .hero-dots button.is-active{width:16px;}
}

/* --- Ventes flash : titre "Ventes flash | Chaque jour", compte à rebours en pilule blanche --- */
.flash-head{margin-bottom:12px; gap:10px;}
.flash-head-title{gap:12px;}
.flash-head-title h2{font-size:26px; font-weight:800; color:#fff;}
.flash-head-title h2 .sep{color:#fff; font-weight:400; margin:0 2px;}
.countdown-pill{background:#fff; color:#282828; font-size:13px; font-weight:700; padding:4px 10px; border-radius:6px; gap:6px;}
.countdown-pill svg{color:var(--red-dark);}
@media (max-width:640px){
  .flash-head-title h2{font-size:18px;}
  .countdown-pill{font-size:11.5px; padding:3px 7px;}
}

/* --- "Des engagements qui comptent" (section services) : comme l'image Jumia --- */
.services-strip > .wrap{padding:14px 18px 16px;}
.services-title{font-size:22px; font-weight:800; text-align:left; margin:0 0 12px; color:#282828;}
.value-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; border:0; background:transparent;}
.value-item{padding:0; border:0 !important; display:flex; gap:12px; align-items:center;}
.value-item .ic{width:48px; height:48px; flex:0 0 48px;}
.value-item .ic svg{width:100%; height:100%;}
.value-item h3{font-size:15px; font-weight:600; color:#282828; margin:0 0 3px; font-family:var(--font-body);}
.value-item p{font-size:12.5px; color:#3A3A3D; line-height:1.4; margin:0;}
@media (max-width:900px){
  /* Sur mobile : une seule ligne qui défile horizontalement, comme Jumia */
  .value-grid{display:flex; overflow-x:auto; gap:18px; scrollbar-width:none; scroll-snap-type:x mandatory;}
  .value-grid::-webkit-scrollbar{display:none;}
  .value-item{flex:0 0 230px; scroll-snap-align:start;}
  .services-title{font-size:18px;}
}

/* --- Les blocs internes qui avaient déjà leur propre carte s'alignent sur le compartiment --- */
.hp-section .cat-tiles-card{background:transparent; padding:0; box-shadow:none; border-radius:0;}
.hp-section .cat-tiles-card .section-head{margin-bottom:12px !important;}
.service-cards{gap:10px;}
.hp-section.bg-light .service-card{background:#F7F7F8; border:0; border-radius:8px;}
.hp-section.bg-surface .service-card{background:#fff; border:0; border-radius:8px;}
.service-card .ic{width:48px; height:48px;}
.service-card .ic svg{width:100%; height:100%;}
.cat-circle .ic{background:#fff;}
@media (max-width:640px){
  /* Bannière entière visible sur mobile (pas de recadrage du texte) */
  .hero-banner-track{aspect-ratio:1248/357;}
  /* En-tête Ventes flash : titre + compte à rebours à gauche, "Voir plus" à droite */
  .flash-head{flex-wrap:nowrap; align-items:flex-start;}
  .flash-head-title{gap:6px;}
  .flash-head .btn-pill-white{flex-shrink:0;}
}

/* =====================================================================
   FICHE PRODUIT "FAÇON JUMIA"
   Colonne principale (photo + infos d'achat, détails, fiche technique,
   avis) et colonne de droite (livraison & retours, vendeur, rappel
   "J'achète" collant au défilement).
   ===================================================================== */
.pdp2{display:grid; grid-template-columns:minmax(0,1fr) 236px; gap:12px; align-items:start; padding-bottom:6px;}
.pdp2-main{display:flex; flex-direction:column; gap:12px; min-width:0;}
.pdp2-side{display:flex; flex-direction:column; gap:12px;}
.pdp2-sticky{position:sticky; top:12px; display:flex; flex-direction:column; gap:12px;}
.pdp2-card{background:#fff; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.08);}
.pdp2 .breadcrumb{padding:10px 0;}

/* --- Bloc du haut : galerie + infos --- */
.pdp2-top{display:grid; grid-template-columns:300px minmax(0,1fr); gap:20px; padding:14px;}
.pdp2-media{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:4px; overflow:hidden;}
.pdp2-media img{width:100%; height:100%; object-fit:contain;}
.pdp2-media svg{width:45%; height:45%;}
.pdp2-thumbs{display:flex; gap:6px; margin-top:8px; overflow-x:auto; scrollbar-width:none;}
.pdp2-thumb{flex:0 0 52px; height:52px; padding:2px; border:1.5px solid #E5E5E5; border-radius:4px; background:#fff; cursor:pointer;}
.pdp2-thumb img{width:100%; height:100%; object-fit:contain;}
.pdp2-thumb.is-active{border-color:var(--red);}
.pdp2-share{border-top:1px solid #EDEDED; margin-top:14px; padding-top:10px;}
.pdp2-label{font-size:12.5px; font-weight:600; text-transform:uppercase; color:#282828; margin-bottom:8px;}
.pdp2-share-row{display:flex; gap:8px;}
.pdp2-share-row a{width:30px; height:30px; border-radius:50%; border:1.5px solid #282828; color:#282828; display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s;}
.pdp2-share-row a:hover{background:#282828; color:#fff;}
.pdp2-share-row svg{width:15px; height:15px;}

.pdp2-info{min-width:0;}
.pdp2-badge{display:inline-block; background:#2E3192; color:#fff; font-size:11.5px; font-weight:600; padding:2px 6px; border-radius:2px; margin-bottom:6px;}
.pdp2-title{font-family:var(--font-body); font-weight:500; font-size:20px; line-height:1.35; color:#282828; letter-spacing:0; margin-bottom:4px;}
.pdp2-brand{font-size:13px; color:#282828; margin-bottom:12px;}
.pdp2-brand a{color:#264996;}
.pdp2-brand a:hover{text-decoration:underline;}
.pdp2-brand .bar{color:#264996; margin:0 3px;}

/* Encadré Ventes flash */
.pdp2-flash{border:1px solid var(--red-dark); border-radius:4px; overflow:hidden; margin-bottom:8px;}
.pdp2-flash-head{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; background:var(--red-dark); color:#fff; padding:6px 10px; font-size:13px;}
.pdp2-flash-title{display:flex; align-items:center; gap:6px; font-weight:600; font-size:14px;}
.pdp2-flash-title svg{color:#fff;}
.pdp2-flash-head .cd-value{font-weight:600;}
.pdp2-flash-body{padding:8px 10px 10px;}
.pdp2-price-line{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.pdp2-price{font-family:var(--font-display); font-size:26px; font-weight:800; color:#282828; white-space:nowrap;}
.pdp2-old{font-size:15px; color:#75757A; text-decoration:line-through; white-space:nowrap;}
.pdp2-discount{background:#FDE8EA; color:var(--red); font-size:13px; font-weight:600; padding:2px 6px; border-radius:2px;}
.pdp2-stock-line{display:flex; flex-direction:column; gap:4px; margin-top:6px; font-size:12px; color:#282828;}
.pdp2-gauge{display:block; height:6px; background:#D9D9D9; border-radius:4px; overflow:hidden;}
.pdp2-gauge span{display:block; height:100%; background:var(--red); border-radius:4px;}
.pdp2-price-block{margin-bottom:6px;}
.pdp2-stock-text{font-size:12.5px; color:#2A7A3C; font-weight:600; margin-top:4px;}
.pdp2-stock-text.out{color:var(--red-dark, #B3121F);}

.pdp2-ship-note{font-size:12px; color:#282828; margin:6px 0 8px;}
.pdp2-saving{display:inline-flex; align-items:center; gap:6px; color:var(--red); background:#FDE8EA; border:1px solid #F8C5CA; font-size:13px; padding:6px 12px; border-radius:4px; margin-bottom:10px;}
.pdp2-rating{display:flex; align-items:center; gap:8px; font-size:13px; color:#264996; margin-bottom:12px;}
.pdp2-rating:hover span{text-decoration:underline;}

/* Étoiles (remplissage partiel) */
.stars{display:inline-flex; gap:2px;}
.stars .star{width:17px; height:17px; position:relative; display:inline-block;
  background:linear-gradient(90deg, var(--sky) var(--fill), #C7C7CD var(--fill));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6L22 9.3l-5 4.7 1.3 7-6.3-3.6-6.3 3.6 1.3-7-5-4.7 7.1-.7z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6L22 9.3l-5 4.7 1.3 7-6.3-3.6-6.3 3.6 1.3-7-5-4.7 7.1-.7z'/%3E%3C/svg%3E") center/contain no-repeat;}

/* Bouton J'achète */
.pdp2-buy{display:flex; gap:10px; align-items:stretch;}
.pdp2-buy .qty-stepper{flex-shrink:0;}
.pdp2-cta{flex:1; display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  background:var(--red); color:#fff; border:0; border-radius:4px; padding:12px 16px; font-size:15px; font-weight:700; cursor:pointer;
  box-shadow:0 4px 8px rgba(0,0,0,.18); transition:background .15s ease, box-shadow .15s ease;}
.pdp2-cta:hover{background:var(--red-dark); box-shadow:0 6px 12px rgba(0,0,0,.22);}
.pdp2-cta svg{width:22px; height:22px;}
.pdp2-cta[disabled]{background:#C7C7CD; box-shadow:none;}

.pdp2-promos{border-top:1px solid #EDEDED; margin-top:14px; padding-top:10px;}
.pdp2-promo{display:flex; align-items:flex-start; gap:10px; font-size:13px; color:#264996; padding:5px 0; line-height:1.4;}
.pdp2-promo .pi{flex:0 0 18px; width:18px; height:18px; color:var(--red);}
.pdp2-promo .pi svg{width:100%; height:100%;}
.pdp2-report{display:inline-block; font-size:12.5px; color:#264996; margin-top:10px;}

/* Détails / fiche technique / avis */
.pdp2-h2{font-family:var(--font-body); font-size:18px; font-weight:600; color:#282828; padding:12px 16px; border-bottom:1px solid #EDEDED; margin:0;}
.pdp2-desc{padding:16px; font-size:14px; line-height:1.7; color:#282828;}
.pdp2-desc img{max-width:100%; height:auto;}
.pdp2-specs{display:grid; grid-template-columns:1fr 1fr; gap:0; padding:8px 16px 14px;}
.pdp2-specs > div{display:flex; flex-direction:column; gap:2px; padding:8px 0; border-bottom:1px solid #F1F1F2; font-size:13px;}
.pdp2-specs > div.full{grid-column:1/-1;}
.pdp2-specs span{color:#75757A; font-size:12px;}
.pdp2-specs strong{color:#282828; font-weight:500;}
.pdp2-review-sum{display:flex; align-items:center; gap:18px; padding:16px;}
.pdp2-review-sum .big{font-size:34px; font-weight:800; color:#282828;}
.pdp2-review-sum .big small{font-size:16px; color:#75757A; font-weight:500;}
.pdp2 .muted, .pdp2-card .muted{color:#75757A; font-size:13px; margin-top:4px; padding:0;}
#avis > .muted{padding:16px;}

/* Colonne de droite */
.pdp2-box{padding:10px 12px;}
.pdp2-box-title{font-size:13px; font-weight:600; text-transform:uppercase; color:#282828; border-bottom:1px solid #EDEDED; margin:-2px -12px 8px; padding:0 12px 8px;}
.pdp2-express{font-size:12px; letter-spacing:.04em;}
.pdp2-express strong{color:#282828;} .pdp2-express em{color:var(--red-dark); font-style:italic; font-weight:700; margin-left:3px;}
.pdp2-small{font-size:12px; color:#282828; line-height:1.45;}
.pdp2-small a, .pdp2-box a{color:#264996;}
.pdp2-svc{display:flex; gap:10px; padding:10px 0 4px; border-top:1px solid #F1F1F2; margin-top:8px;}
.pdp2-svc .pi{flex:0 0 32px; width:32px; height:32px; border:1px solid #E5E5E5; border-radius:4px; display:flex; align-items:center; justify-content:center; color:#282828;}
.pdp2-svc .pi svg{width:18px; height:18px;}
.pdp2-svc strong{font-size:13px; font-weight:600; color:#282828;}
.pdp2-tabs-nav{display:flex; flex-direction:column; overflow:hidden;}
.pdp2-tabs-nav a{display:flex; align-items:center; gap:12px; padding:11px 12px; font-size:13px; color:#282828; border-bottom:1px solid #EDEDED;}
.pdp2-tabs-nav a:last-child{border-bottom:0;}
.pdp2-tabs-nav a:first-child{background:#E5E5E5;}
.pdp2-tabs-nav a:hover{background:#F1F1F2;}
.pdp2-tabs-nav svg{width:18px; height:18px; flex-shrink:0;}
.pdp2-mini{padding:10px;}
.pdp2-mini-row{display:flex; gap:10px; margin-bottom:10px;}
.pdp2-mini-img{flex:0 0 64px; height:64px; display:flex; align-items:center; justify-content:center;}
.pdp2-mini-img img{width:100%; height:100%; object-fit:contain;}
.pdp2-mini-img svg{width:70%; height:70%;}
.pdp2-mini-name{font-size:12.5px; color:#282828; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;}
.pdp2-mini-price{font-weight:700; font-size:15px; color:#282828;}
.pdp2-mini .pdp2-old{font-size:11.5px;} .pdp2-mini .pdp2-discount{font-size:11px; padding:1px 4px;}
.pdp2-mini .pdp2-cta{padding:9px 10px; font-size:14px;}
.pdp2-chat{padding:10px; text-align:center; font-size:13px; color:#282828;}
.pdp2-chat a{display:inline-flex; align-items:center; gap:6px; color:var(--red); font-weight:600; margin-top:6px;}
.pdp2-chat svg{width:20px; height:20px;}
.pdp2-related{padding-top:0;}

@media (max-width:980px){
  .pdp2{grid-template-columns:1fr;}
  .pdp2-sticky{position:static;}
  .pdp2-tabs-nav, .pdp2-mini{display:none;}
}
@media (max-width:700px){
  .pdp2-top{grid-template-columns:1fr; gap:14px; padding:10px;}
  .pdp2-media{max-width:340px; margin:0 auto; width:100%;}
  .pdp2-share{display:none;}
  .pdp2-title{font-size:17px;}
  .pdp2-price{font-size:22px;}
  .pdp2-specs{grid-template-columns:1fr;}
  /* Bouton J'achète toujours accessible en bas de l'écran sur mobile */
  .pdp2-buy{position:sticky; bottom:0; z-index:20; background:#fff; padding:8px 0;}
}

/* =====================================================================
   BARRE DES CATÉGORIES "FAÇON JUMIA"
   Texte plus grand et foncé, icônes au trait, défilement horizontal
   avec flèches rondes de part et d'autre.
   ===================================================================== */
.catnav{background:#fff; border-top:1px solid #EDEDED; border-bottom:1px solid #EDEDED; overflow:visible;}
.catnav-inner{display:flex; align-items:center; gap:8px; padding-top:0; padding-bottom:0;}
.catnav-track{display:flex; align-items:center; gap:4px; flex:1; min-width:0; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; white-space:nowrap;}
.catnav-track::-webkit-scrollbar{display:none;}
.catnav-track a{display:inline-flex; align-items:center; gap:8px; flex-shrink:0;
  color:#282828; font-size:15px; font-weight:400; padding:12px 12px; border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;}
.catnav-track a:hover, .catnav-track a.is-active{color:var(--jm-orange, var(--red)); border-bottom-color:var(--jm-orange, var(--red));}
.catnav .cat-ic{width:20px; height:20px; display:flex; flex-shrink:0; color:#282828;}
.catnav-track a:hover .cat-ic, .catnav-track a.is-active .cat-ic{color:inherit;}
.catnav .cat-ic svg{width:100%; height:100%;}
.catnav-arrow{flex:0 0 26px; width:26px; height:26px; border-radius:50%; background:#fff; border:1.5px solid #282828; color:#282828;
  display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; transition:opacity .15s ease, background .15s ease;}
.catnav-arrow svg{width:16px; height:16px;}
.catnav-arrow:hover:not(:disabled){background:#F1F1F2;}
.catnav-arrow:disabled{border-color:#C7C7CD; color:#C7C7CD; cursor:default;}
.catnav-inner.no-overflow .catnav-arrow{display:none;}
@media (max-width:640px){
  .catnav-track a{font-size:14px; padding:10px 9px; gap:6px;}
  .catnav .cat-ic{width:18px; height:18px;}
  .catnav-arrow{display:none;}
}

/* =====================================================================
   PANIER "FAÇON JUMIA"
   ===================================================================== */
.cart2{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:12px; align-items:start; padding-bottom:24px;}
.cart2-card{background:#fff; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.08);}
.cart2-title{font-family:var(--font-body); font-size:20px; font-weight:600; color:#282828; letter-spacing:0; padding:12px 16px; border-bottom:1px solid #EDEDED; margin:0;}
.cart2-item{padding:14px 16px 10px; border-bottom:1px solid #EDEDED;}
.cart2-item:last-child{border-bottom:0;}
.cart2-row{display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:14px; align-items:start;}
.cart2-thumb{width:72px; height:72px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:4px;}
.cart2-thumb img{width:100%; height:100%; object-fit:contain;}
.cart2-thumb svg{width:60%; height:60%;}
.cart2-name{display:block; font-size:15px; color:#282828; line-height:1.35;}
.cart2-name:hover{color:var(--blue);}
.cart2-stock{font-size:12px; color:var(--red-dark); margin-top:3px;}
.cart2-stock.ok{color:#2A7A3C;}
.cart2-stock.out{color:var(--red-dark, #B3121F); font-weight:600;}
.cart2-express{font-size:10.5px; letter-spacing:.04em; margin-top:2px;}
.cart2-express strong{color:#282828; font-weight:800;}
.cart2-express em{color:var(--red-dark); font-style:italic; font-weight:700; margin-left:2px;}
.cart2-prices{text-align:right;}
.cart2-price{font-size:19px; font-weight:700; color:#282828; white-space:nowrap;}
.cart2-old-row{display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:4px;}
.cart2-old{font-size:14px; color:#75757A; text-decoration:line-through; white-space:nowrap;}
.cart2-pct{background:#FDE8EA; color:var(--red); font-size:13px; padding:1px 6px; border-radius:2px;}
.cart2-actions{display:flex; align-items:center; justify-content:space-between; margin-top:10px;}
.cart2-remove{display:inline-flex; align-items:center; gap:8px; background:none; border:0; padding:6px 6px 6px 0; color:var(--red); font-size:14px; font-weight:500; cursor:pointer; border-radius:4px;}
.cart2-remove:hover{background:#FDE8EA; padding-left:6px; margin-left:-6px;}
.cart2-remove svg{width:20px; height:20px;}
/* Sélecteur de quantité : carré gris "−", nombre, carré orange "+" */
.cart2-stepper{border:0; gap:14px; overflow:visible;}
.cart2-stepper button{width:32px; height:32px; border:0 !important; border-radius:4px; background:var(--red); color:#fff; box-shadow:0 2px 4px rgba(0,0,0,.2);}
.cart2-stepper button:hover{background:var(--red-dark);}
.cart2-stepper button:disabled{background:#B5B5B5; box-shadow:none; cursor:default;}
.cart2-stepper button svg{width:16px; height:16px;}
.cart2-stepper input{width:34px; height:32px; border:0; background:transparent; font-size:15px; text-align:center; -moz-appearance:textfield;}
.cart2-stepper input::-webkit-outer-spin-button, .cart2-stepper input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}

/* Résumé */
.cart2-side{position:sticky; top:12px; display:flex; flex-direction:column; gap:10px;}
.cart2-summary{overflow:hidden;}
.cart2-sum-title{font-size:13px; font-weight:600; text-transform:uppercase; color:#282828; padding:10px 12px; border-bottom:1px solid #EDEDED;}
.cart2-line{display:flex; justify-content:space-between; gap:12px; padding:8px 12px; font-size:13.5px; color:#282828; border-bottom:1px solid #F1F1F2;}
.cart2-line span:last-child{white-space:nowrap;}
.cart2-line.save span:last-child{color:#2A7A3C;}
.cart2-line.total{font-size:15px; font-weight:600; padding:12px;}
.cart2-line.total span:last-child{font-size:20px; font-weight:700;}
.cart2-note{display:flex; gap:10px; padding:10px 12px; font-size:12px; color:#282828; line-height:1.45; border-bottom:1px solid #EDEDED;}
.cart2-note .ok{flex:0 0 18px; width:18px; height:18px; border:1.5px solid #2A7A3C; border-radius:50%; color:#2A7A3C; display:flex; align-items:center; justify-content:center; margin-top:1px;}
.cart2-note .ok svg{width:11px; height:11px;}
.cart2-sum-foot{padding:12px;}
.cart2-cta{display:flex; align-items:center; justify-content:center; width:100%; background:var(--red); color:#fff; border:0; border-radius:4px;
  padding:12px 14px; font-size:15px; font-weight:700; cursor:pointer; box-shadow:0 4px 8px rgba(0,0,0,.18); text-align:center; transition:background .15s ease;}
.cart2-cta:hover{background:var(--red-dark); color:#fff;}
.cart2-cta[disabled]{background:#C7C7CD; box-shadow:none; cursor:default;}
.cart2-continue{font-size:13px; color:#264996; text-align:center;}
.cart2-empty{grid-column:1/-1; text-align:center; padding:44px 20px;}
.cart2-empty .ic{width:90px; height:90px; margin:0 auto 10px; border-radius:50%; background:#FDE8EA; color:var(--red); display:flex; align-items:center; justify-content:center;}
.cart2-empty .ic svg{width:46px; height:46px;}
.cart2-empty h1{font-family:var(--font-body); font-size:17px; font-weight:600; margin-bottom:6px;}
.cart2-empty p{font-size:14px; color:#75757A; margin:0 0 18px;}
.cart2-empty .cart2-cta{display:inline-flex; width:auto; padding:12px 28px;}

@media (max-width:860px){
  .cart2{grid-template-columns:1fr;}
  .cart2-side{position:static;}
  /* Bouton Commander toujours visible en bas de l'écran */
  .cart2-sum-foot{position:fixed; left:0; right:0; bottom:0; background:#fff; z-index:50; box-shadow:0 -2px 10px rgba(0,0,0,.12); padding:10px 12px calc(10px + env(safe-area-inset-bottom));}
  .cart2{padding-bottom:84px;}
}
@media (max-width:520px){
  .cart2-row{grid-template-columns:60px minmax(0,1fr);}
  .cart2-thumb{width:60px; height:60px;}
  .cart2-prices{grid-column:2; text-align:left;}
  .cart2-old-row{justify-content:flex-start;}
  .cart2-name{font-size:14px;}
}

/* =====================================================================
   EN-TÊTE "FAÇON JUMIA" : recherche arrondie grise, bouton orange,
   menus Compte / Aide déroulants, pastille orange sur le panier.
   ===================================================================== */
.header-row{gap:24px; padding:10px 0;}
header.site.is-scrolled .header-row{padding:8px 0;}
.search{height:42px; background:#F1F1F2; border:0; border-radius:999px; padding:0 4px 0 44px; transition:box-shadow .15s ease, background .15s ease;}
.search:focus-within{background:#fff; box-shadow:0 0 0 2px var(--red) inset;}
.search-ic{left:16px; color:#282828;}
.search input{font-size:15px; color:#282828;}
.search input::placeholder{color:#75757A;}
.search input::-webkit-search-cancel-button{cursor:pointer;}
.search button{height:34px; background:var(--red); border-radius:999px; padding:0 20px; font-size:14px; font-weight:600;
  box-shadow:0 2px 4px rgba(0,0,0,.15); transition:background .15s ease;}
.search button:hover{background:var(--red-dark);}

.header-actions{gap:6px;}
.hd-menu{position:relative;}
.header-link{background:none; border:0; cursor:pointer; font-family:inherit; color:#282828; font-size:15px; font-weight:400; gap:8px; padding:8px 10px; border-radius:4px;}
.header-link:hover, .hd-menu.is-open > .header-link{background:transparent; color:var(--red);}
.header-link .hd-ic{width:26px; height:26px; flex-shrink:0;}
.header-link .chev{color:currentColor; margin-left:0; transition:transform .2s ease;}
.hd-menu.is-open .chev{transform:rotate(180deg);}
.cart-count{background:var(--red); top:-5px; right:-6px; font-size:11px; min-width:18px; height:18px; border-radius:9px; border:2px solid #fff; box-sizing:content-box; padding:0 2px;}
.cart-count[hidden]{display:none;}

/* Panneau déroulant */
.hd-panel{position:absolute; top:calc(100% + 6px); right:0; min-width:230px; z-index:60; background:#fff; border-radius:4px;
  box-shadow:0 6px 24px rgba(0,0,0,.18); padding:8px 0; display:none;}
.hd-menu.is-open .hd-panel{display:block; animation:hdIn .15s ease;}
@keyframes hdIn{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;}}
.hd-panel a{display:flex; align-items:center; gap:12px; padding:10px 16px; color:#282828; font-size:14px;}
.hd-panel a:hover{background:#F1F1F2;}
.hd-panel a svg{width:20px; height:20px; flex-shrink:0;}
.hd-panel .hd-btn{justify-content:center; margin:4px 12px 6px; background:var(--red); color:#fff; font-weight:600; border-radius:4px; box-shadow:0 2px 4px rgba(0,0,0,.15);}
.hd-panel .hd-btn:hover{background:var(--red-dark);}
.hd-panel .hd-link-center{justify-content:center; color:var(--red); font-weight:600;}
.hd-panel .hd-link-center:hover{background:#FDE8EA;}
.hd-panel .hd-logout{justify-content:center; color:var(--red); font-weight:600;}
.hd-sep{height:1px; background:#EDEDED; margin:6px 0;}

@media (max-width:860px){
  .cart-link .cart-ic-wrap{display:flex !important;} /* l'ancienne règle masquait l'icône du panier sur mobile */
  .header-link .hd-label, .header-link .chev{display:none !important;}
  .header-link{padding:6px;}
  .header-link .hd-ic{width:24px; height:24px;}
}
@media (max-width:640px){
  .search{height:40px;}
  .search button{padding:0 14px; font-size:13px;}
}

/* =====================================================================
   WHATSAPP — boutons de commande, bouton flottant, page de confirmation
   ===================================================================== */
.btn-whatsapp{display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  background:#25D366; color:#fff; border:0; border-radius:4px; padding:12px 16px; font-size:15px; font-weight:700; cursor:pointer;
  box-shadow:0 4px 10px rgba(37,211,102,.35); transition:background .15s ease, box-shadow .2s ease; text-align:center;}
.btn-whatsapp:hover{background:#1EBE5A; color:#fff; box-shadow:0 6px 16px rgba(37,211,102,.45);}
.btn-whatsapp .wa-ic{width:22px; height:22px; flex-shrink:0;}
.btn-whatsapp[disabled]{background:#9BD9B2; box-shadow:none;}
.pdp2-wa{margin-top:10px;}
.cart2-wa{margin-top:10px;}
.or-sep{display:flex; align-items:center; gap:10px; margin:14px 0 10px; color:#75757A; font-size:12px; text-transform:uppercase; letter-spacing:.08em;}
.or-sep::before, .or-sep::after{content:""; flex:1; height:1px; background:#E5E5E5;}
.wa-hint{font-size:12px; color:#75757A; line-height:1.5; margin:8px 0 0; text-align:center;}
.wa-hint a{color:var(--blue);}
.alert-wa{display:flex; gap:10px; align-items:center; background:#E8F9EF; color:#14532D; border:1px solid #BDEBCF;}
.alert-wa .wa-ic{width:22px; height:22px; color:#25D366; flex-shrink:0;}
.badge-wa{background:#E8F9EF; color:#128C4B;}

/* Bouton flottant */
.wa-float{position:fixed; right:18px; bottom:18px; z-index:70; display:flex; align-items:center; gap:0; height:56px; min-width:56px;
  padding:0 16px; border-radius:999px; background:#25D366; color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.22);
  transition:gap .3s cubic-bezier(.16,1,.3,1), padding .3s cubic-bezier(.16,1,.3,1), transform .2s ease;}
.wa-float .wa-ic{width:26px; height:26px; flex-shrink:0; position:relative; z-index:1;}
.wa-float-label{max-width:0; overflow:hidden; white-space:nowrap; font-weight:700; font-size:14px; transition:max-width .35s cubic-bezier(.16,1,.3,1); position:relative; z-index:1;}
.wa-float:hover{gap:10px; color:#fff; transform:translateY(-2px);}
.wa-float:hover .wa-float-label{max-width:240px;}
.wa-float::before, .wa-float::after{content:""; position:absolute; inset:0; border-radius:inherit; background:#25D366; z-index:0;}
.motion-on .wa-float::before{animation:waPulse 2.4s cubic-bezier(.2,.6,.3,1) infinite;}
.motion-on .wa-float::after{animation:waPulse 2.4s cubic-bezier(.2,.6,.3,1) 1.2s infinite;}
.wa-float::after, .wa-float::before{opacity:0;}
@keyframes waPulse{0%{transform:scale(1); opacity:.55;} 100%{transform:scale(1.7); opacity:0;}}
@media (max-width:860px){
  .wa-float{right:12px; bottom:14px; height:52px; min-width:52px; padding:0 13px;}
  body:has(.cart2-sum-foot) .wa-float{bottom:86px;}
  body:has(.pdp2-buy) .wa-float{bottom:84px;}
}

/* Page "Envoyer ma commande sur WhatsApp" */
.wa-done{padding:30px 0 50px;}
.wa-card{max-width:520px; margin:0 auto; background:#fff; border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,.08); padding:28px 24px; text-align:center;}
.wa-badge{width:76px; height:76px; margin:0 auto 14px; border-radius:50%; background:#E8F9EF; color:#25D366; display:flex; align-items:center; justify-content:center;}
.wa-badge .wa-ic{width:42px; height:42px;}
.motion-on .wa-badge{animation:waBadge 1.4s cubic-bezier(.16,1,.3,1) both;}
@keyframes waBadge{0%{transform:scale(.3) rotate(-25deg); opacity:0;} 60%{transform:scale(1.12) rotate(6deg); opacity:1;} 100%{transform:none;}}
.wa-card h1{font-family:var(--font-body); font-size:20px; font-weight:700; margin-bottom:8px;}
.wa-sub{font-size:14px; color:#4B4B50; line-height:1.5; margin:0 0 18px;}
.wa-recap{text-align:left; border:1px solid #EDEDED; border-radius:6px; margin-bottom:18px;}
.wa-line{display:flex; justify-content:space-between; gap:12px; padding:9px 12px; font-size:13.5px; border-bottom:1px solid #F1F1F2;}
.wa-line:last-child{border-bottom:0;}
.wa-line span:last-child{white-space:nowrap; font-weight:600;}
.wa-line.total{font-weight:700; background:#F8F9FB;}
.wa-line.total span:last-child{font-size:17px;}
.wa-links{display:flex; justify-content:center; gap:18px; margin-top:16px; font-size:13px;}
.wa-links a{color:var(--blue);}

/* =====================================================================
   MOTION DESIGN — actif seulement si le visiteur n'a pas demandé
   "réduire les animations" (classe .motion-on posée par motion.js)
   Courbe signature : cubic-bezier(.16,1,.3,1) — départ vif, arrivée douce.
   ===================================================================== */
:root{ --ease-out-expo:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); }

/* Transitions fluides entre les pages (navigateurs récents) */
@view-transition{ navigation:auto; }
header.site{view-transition-name:site-header;}
::view-transition-old(root){animation:vtOut .28s ease both;}
::view-transition-new(root){animation:vtIn .45s var(--ease-out-expo) both;}
@keyframes vtOut{to{opacity:0; transform:translateY(-10px);}}
@keyframes vtIn{from{opacity:0; transform:translateY(18px);}}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root), ::view-transition-new(root){animation:none;}
}

/* 1. Barre de progression de lecture */
.scroll-progress{position:fixed; top:0; left:0; right:0; height:3px; z-index:120; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, var(--red) 0%, var(--blue) 55%, var(--sky) 100%); pointer-events:none; will-change:transform;}

/* 2. Compartiments : montée + léger zoom, plus marqués qu'avant */
.motion-on .reveal{opacity:0; transform:translateY(48px) scale(.975);
  transition:opacity .8s var(--ease-out-expo), transform 1.05s var(--ease-out-expo);}
.motion-on .reveal.is-visible{opacity:1; transform:none;}

/* Cartes et éléments en cascade (stagger) */
.motion-on [data-reveal]:not(.is-visible) .stagger{opacity:0;}
.motion-on [data-reveal].is-visible .stagger{animation:staggerIn .85s var(--ease-out-expo) backwards; animation-delay:calc(var(--i, 0) * 65ms + 120ms);}
@keyframes staggerIn{
  0%{opacity:0; transform:translateY(34px) scale(.92) rotateX(10deg);}
  100%{opacity:1; transform:none;}
}

/* Blocs de la fiche produit et du panier */
.motion-on .rise{opacity:0; transform:translateY(30px);}
.motion-on .rise.in-view{animation:staggerIn .8s var(--ease-out-expo) both; animation-delay:calc(var(--i, 0) * 70ms);}

/* 3. Titres de section révélés par balayage */
.motion-on [data-reveal] .section-head h2,
.motion-on [data-reveal] .flash-head h2,
.motion-on [data-reveal] .services-title{clip-path:inset(0 100% 0 0); transition:clip-path 1s var(--ease-out-expo) .15s;}
.motion-on [data-reveal].is-visible .section-head h2,
.motion-on [data-reveal].is-visible .flash-head h2,
.motion-on [data-reveal].is-visible .services-title{clip-path:inset(0 -2% 0 0);}
.motion-on [data-reveal] .btn-pill-white{transition:opacity .6s ease .45s, transform .7s var(--ease-spring) .45s, box-shadow .15s;}
.motion-on [data-reveal]:not(.is-visible) .btn-pill-white{opacity:0; transform:translateX(20px) scale(.8);}

/* 4. Cartes produit en 3D + reflet lumineux */
.motion-on .card{position:relative; transform-style:preserve-3d; transition:transform .6s var(--ease-out-expo), box-shadow .4s ease;}
.motion-on .card.is-tilting{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-6px) scale(1.02);
  transition:transform .12s linear, box-shadow .3s ease; box-shadow:0 18px 40px rgba(10,20,40,.22); z-index:2;}
.motion-on .card::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3; opacity:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.55), rgba(255,255,255,0) 55%);
  mix-blend-mode:soft-light; transition:opacity .35s ease;}
.motion-on .card.is-tilting::after{opacity:1;}
.motion-on .card .media img, .motion-on .card .media svg{transition:transform .7s var(--ease-out-expo);}
.motion-on .card:hover .media img{transform:scale(1.08);}
.motion-on .card:hover .media svg{transform:scale(1.1) translateY(-4px);}
.motion-on .quick-add{transition:transform .35s var(--ease-spring), background .15s;}
.motion-on .card:hover .quick-add{transform:scale(1.12) rotate(90deg);}

/* Pastille de remise : reflet qui balaie périodiquement */
.motion-on .discount-pill{position:relative; overflow:hidden;}
.motion-on .discount-pill::after{content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent); transform:skewX(-20deg);
  animation:shine 3.6s ease-in-out infinite; animation-delay:calc(var(--i, 0) * 180ms);}
@keyframes shine{0%, 70%{left:-60%;} 100%{left:130%;}}

/* 5. Vol vers le panier */
.fly-to-cart{position:fixed; z-index:9999; pointer-events:none; border-radius:14px; background:#fff; overflow:hidden;
  box-shadow:0 16px 40px rgba(10,20,40,.35); display:flex; align-items:center; justify-content:center; will-change:transform;}
.fly-to-cart img{width:100%; height:100%; object-fit:contain;}
.fly-to-cart svg{width:60%; height:60%; color:var(--blue);}
.fx-particle{position:fixed; z-index:9999; width:7px; height:7px; border-radius:50%; pointer-events:none;}
.cart-link.cart-bump .cart-ic-wrap{animation:cartBump .7s var(--ease-spring);}
@keyframes cartBump{0%{transform:none;} 25%{transform:scale(1.35) rotate(-12deg);} 50%{transform:scale(.9) rotate(8deg);} 75%{transform:scale(1.1) rotate(-3deg);} 100%{transform:none;}}
.cart-count.badge-pop{animation:badgePop .6s var(--ease-spring);}
@keyframes badgePop{0%{transform:scale(.2);} 60%{transform:scale(1.45);} 100%{transform:scale(1);}}

/* 6. Ondulation au clic + effet magnétique */
.has-ripple{overflow:hidden;}
.has-ripple:not(.quick-add){position:relative;}
.fx-ripple{position:absolute; border-radius:50%; pointer-events:none; background:rgba(255,255,255,.45); transform:scale(0);
  animation:ripple .65s var(--ease-out-expo) forwards;}
.cart2-stepper .fx-ripple, .catnav-arrow .fx-ripple, .btn-outline .fx-ripple{background:rgba(11,87,164,.18);}
@keyframes ripple{to{transform:scale(1); opacity:0;}}
.motion-on .magnetic{transform:translate(var(--tx,0px), var(--ty,0px)); transition:transform .3s var(--ease-out-expo), background .15s, box-shadow .2s;}

/* 7. Ventes flash : reflet sur le bandeau + compte à rebours qui bat */
.motion-on .flash-sale > .wrap{position:relative;}
.motion-on .flash-sale > .wrap::before{content:""; position:absolute; top:0; bottom:0; left:-40%; width:30%; pointer-events:none; z-index:1;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent); transform:skewX(-18deg);
  animation:flashSweep 5.5s ease-in-out infinite;}
@keyframes flashSweep{0%, 55%{left:-40%;} 100%{left:140%;}}
.motion-on .flash-head-title svg{animation:clockSwing 2s ease-in-out infinite; transform-origin:50% 50%;}
@keyframes clockSwing{0%,100%{transform:rotate(0);} 20%{transform:rotate(-14deg);} 40%{transform:rotate(10deg);} 60%{transform:rotate(0);}}
.cd-value{display:inline-block;}
.cd-value.tick{animation:tick .4s var(--ease-spring);}
@keyframes tick{0%{transform:translateY(-3px) scale(1.06); opacity:.6;} 100%{transform:none; opacity:1;}}
.motion-on .pdp2-flash-title svg{animation:bolt 1.8s ease-in-out infinite;}
@keyframes bolt{0%,100%{transform:none; filter:none;} 10%{transform:scale(1.25) rotate(-8deg); filter:drop-shadow(0 0 6px #fff);} 20%{transform:none;}}
.motion-on .pdp2-gauge span{transform-origin:0 50%; animation:gaugeFill 1.4s var(--ease-out-expo) .3s both;}
@keyframes gaugeFill{from{transform:scaleX(0);}}

/* 8. Bannière d'accueil : fondu + zoom lent (Ken Burns) + jauge sur le point actif */
.motion-on .hero-banner-slide{transform:scale(1.06); transition:opacity .9s ease, transform 1.4s var(--ease-out-expo);}
.motion-on .hero-banner-slide.is-active{transform:scale(1);}
.motion-on .hero-banner-slide.is-active img{animation:kenburns 7s ease-out both;}
@keyframes kenburns{from{transform:scale(1.001);} to{transform:scale(1.07);}}
.motion-on .hero-banner-card{animation:heroIn 1.1s var(--ease-out-expo) both;}
@keyframes heroIn{from{opacity:0; transform:translateY(24px) scale(.97);} to{opacity:1; transform:none;}}
.hero-fx .hero-dots button.is-active{position:relative; overflow:hidden; background:rgba(255,255,255,.35); border-color:rgba(255,255,255,.85);}
.hero-fx .hero-dots button.is-active::after{content:""; position:absolute; inset:0; background:#fff; transform-origin:0 50%; animation:dotFill 5s linear both;}
.hero-fx.is-paused .hero-dots button.is-active::after{animation-play-state:paused;}
@keyframes dotFill{from{transform:scaleX(0);} to{transform:scaleX(1);}}

/* 9. Images : apparition floutée → nette */
.motion-on img.is-loading{opacity:0; filter:blur(10px);}
.motion-on img.is-loaded{transition:opacity .6s ease, filter .7s ease, transform .7s var(--ease-out-expo);}

/* Détails vivants */
.motion-on .value-item .ic svg{animation:floaty 3.6s ease-in-out infinite; animation-delay:calc(var(--i, 0) * .45s);}
@keyframes floaty{0%,100%{transform:translateY(0);} 50%{transform:translateY(-4px);}}
.motion-on .catnav-track a .cat-ic{transition:transform .4s var(--ease-spring);}
.motion-on .catnav-track a:hover .cat-ic{transform:translateY(-3px) scale(1.15) rotate(-6deg);}
.motion-on .catnav-track a{position:relative;}
.motion-on .header-link .hd-ic{transition:transform .4s var(--ease-spring);}
.motion-on .header-link:hover .hd-ic{transform:scale(1.12) rotate(-6deg);}
.motion-on .hd-menu.is-open .hd-panel{animation:panelIn .35s var(--ease-out-expo);}
@keyframes panelIn{from{opacity:0; transform:translateY(-8px) scale(.97); transform-origin:top right;} to{opacity:1; transform:none;}}
.motion-on .toast{transition:opacity .25s ease, transform .5s var(--ease-spring);}
.motion-on .pdp2-cta svg, .motion-on .cart2-cta svg{transition:transform .4s var(--ease-spring);}
.motion-on .pdp2-cta:hover svg{transform:translateX(3px) rotate(-10deg);}
.motion-on .btn-whatsapp .wa-ic{transition:transform .45s var(--ease-spring);}
.motion-on .btn-whatsapp:hover .wa-ic{transform:rotate(-14deg) scale(1.15);}
.motion-on .pdp2-media img{transition:transform .8s var(--ease-out-expo);}
.motion-on .pdp2-media:hover img{transform:scale(1.12);}
.motion-on .cat-circle .ic{transition:transform .45s var(--ease-spring), border-color .2s;}
.motion-on .cat-circle:hover .ic{transform:translateY(-5px) scale(1.08);}

@media (prefers-reduced-motion: reduce){
  .scroll-progress, .fly-to-cart, .fx-particle, .fx-ripple{display:none !important;}
}

/* =====================================================================
   PIED DE PAGE "FAÇON JUMIA" aux couleurs RAMATEK
   Bandeau du haut (logo + newsletter + contact) sur bleu nuit,
   colonnes de liens sur bleu marine, marques, ligne de bas de page.
   ===================================================================== */
footer.ft{background:#13243D; color:#C9D3E3; margin-top:12px;}
footer.ft .wrap{padding:0 20px;}
footer.ft a{color:#E6ECF5; font-size:13px; transition:color .15s ease;}
footer.ft a:hover{color:#fff; text-decoration:underline;}
footer.ft h4{font-size:13px; font-weight:800; color:#fff; text-transform:uppercase; letter-spacing:.02em; margin:0 0 12px;}
footer.ft ul{gap:6px;}

/* Bandeau du haut */
.ft-top{background:#0B1A2E; border-top:3px solid var(--red);}
.ft-top-grid{display:grid; grid-template-columns:220px minmax(0,1fr) 330px; gap:36px; padding:26px 20px 28px !important; align-items:start;}
.ft-logo{display:inline-flex; align-items:center; gap:10px; text-decoration:none !important;}
.ft-logo span{font-family:var(--font-display); font-weight:900; font-size:26px; color:#fff; letter-spacing:-.01em;}
.ft-news h3{font-family:var(--font-body); font-size:13px; font-weight:800; text-transform:uppercase; color:#fff; margin:0 0 6px;}
.ft-news p{font-size:12.5px; line-height:1.5; margin:0 0 12px; color:#C9D3E3; max-width:62ch;}
.ft-consent{display:flex; gap:10px; align-items:flex-start; font-size:12px; line-height:1.45; color:#A9B6CA; margin-bottom:12px; cursor:pointer; max-width:62ch;}
.ft-consent input{width:17px; height:17px; margin:1px 0 0; flex-shrink:0; accent-color:var(--red); cursor:pointer;}
.ft-consent a{font-size:12px !important; color:var(--sky-light) !important;}
.ft-news-row{display:flex; gap:10px; flex-wrap:wrap;}
.ft-email{flex:1 1 260px; max-width:360px; display:flex; align-items:center; gap:10px; background:#fff; border-radius:4px; padding:0 12px; height:44px;}
.ft-email svg{width:20px; height:20px; color:#75757A; flex-shrink:0;}
.ft-email input{flex:1; min-width:0; border:0; outline:0; font-size:14px; color:#282828; background:transparent; height:100%;}
.ft-news-btn{height:44px; padding:0 22px; border-radius:4px; border:1.5px solid #fff; background:transparent; color:#fff; font-weight:700; font-size:14px; cursor:pointer; transition:background .15s ease, color .15s ease;}
.ft-news-btn:hover{background:#fff; color:#0B1A2E;}
.ft-news-btn[disabled]{opacity:.6; cursor:default;}
.ft-news-msg{font-size:12.5px; margin-top:8px; min-height:18px;}
.ft-news-msg.ok{color:#7EE2A8;}
.ft-news-msg.err{color:#FF8A94;}
.ft-quick-head{display:flex; gap:12px; align-items:center; margin-bottom:12px;}
.ft-quick-ic{width:42px; height:42px; border-radius:8px; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.ft-quick-ic svg{width:24px; height:24px;}
.ft-quick-head strong{display:block; font-size:13px; font-weight:800; color:#fff;}
.ft-quick-head span{font-size:12.5px; color:#C9D3E3;}
.ft-quick-btns{display:flex; flex-wrap:wrap; gap:8px;}
.ft-chip{display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); font-size:12.5px !important; text-decoration:none !important;}
.ft-chip:hover{background:rgba(255,255,255,.16);}
.ft-chip svg{width:15px; height:15px;}
.ft-chip-wa{background:#25D366; border-color:#25D366;}
.ft-chip-wa:hover{background:#1EBE5A;}

/* Colonnes */
.ft-main{padding:28px 0 18px;}
.ft-cols{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:28px;}
.ft-cols-b{margin-top:28px;}
.ft-h4-gap{margin-top:22px !important;}
.ft-strong{font-size:14px !important;}
.ft-two{display:grid !important; grid-template-columns:1fr 1fr; gap:6px 14px !important;}
.ft-contact dl{display:grid; grid-template-columns:auto 1fr; gap:4px 10px; margin:0; font-size:12.5px;}
.ft-contact dt{color:#8E9CB4;}
.ft-contact dd{margin:0; color:#fff;}
.ft-social{display:flex; flex-wrap:wrap; gap:14px; align-items:center;}
.ft-social a{width:26px; height:26px; color:#fff; display:flex;}
.ft-social a:hover{color:var(--sky-light);}
.ft-social svg{width:100%; height:100%;}
.ft-muted{font-size:12.5px; color:#8E9CB4;}
.ft-span2{grid-column:span 2;}
.ft-pay{display:flex; flex-wrap:wrap; gap:8px;}
.ft-pay-item{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:4px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); font-size:12px; color:#E6ECF5;}
.ft-pay-item svg{width:15px; height:15px;}

/* Marques */
.ft-brands{display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:4px 16px; margin-top:28px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1);}
.ft-brands a{font-size:12.5px !important; color:#C9D3E3 !important;}

/* Bas de page */
.ft-bottom{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:22px; padding-top:16px; border-top:1px solid rgba(255,255,255,.1); font-size:12px; color:#8E9CB4;}
.ft-bottom-links{display:flex; gap:16px;}
.ft-bottom-links a{font-size:12px !important; color:#A9B6CA !important;}

@media (max-width:1024px){
  .ft-top-grid{grid-template-columns:1fr 1fr; gap:24px;}
  .ft-news{grid-column:1 / -1; order:3;}
  .ft-cols{grid-template-columns:repeat(2, minmax(0,1fr));}
  .ft-brands{grid-template-columns:repeat(4, minmax(0,1fr));}
}
@media (max-width:600px){
  .ft-top-grid{grid-template-columns:1fr;}
  .ft-cols{grid-template-columns:1fr 1fr; gap:22px 14px;}
  .ft-cols > div:nth-child(4), .ft-contact, .ft-span2{grid-column:1 / -1;}
  footer.ft a{font-size:12.5px;}
  .ft-brands{grid-template-columns:repeat(3, minmax(0,1fr));}
  .ft-news-btn{flex:1;}
  .ft-email{max-width:none;}
  .ft-bottom{flex-direction:column; align-items:flex-start;}
}
/* Laisse la place au bouton WhatsApp flottant en bas de page */
body:has(.wa-float) .ft-bottom{padding-right:70px;}
@media (max-width:600px){ body:has(.wa-float) .ft-bottom{padding-right:0; padding-bottom:60px;} }

/* Animations du pied de page */
.motion-on footer.ft .ft-cols > div, .motion-on .ft-top-grid > *{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease-out-expo), transform .8s var(--ease-out-expo); transition-delay:calc(var(--i, 0) * 70ms);}
.motion-on footer.ft.in-view .ft-cols > div, .motion-on footer.ft.in-view .ft-top-grid > *{opacity:1; transform:none;}
.motion-on .ft-social a{transition:transform .35s var(--ease-spring), color .15s;}
.motion-on .ft-social a:hover{transform:translateY(-4px) scale(1.15);}
.ft-news-form.is-shaking{animation:shake .45s ease;}
@keyframes shake{20%,60%{transform:translateX(-6px);} 40%,80%{transform:translateX(6px);}}

/* =====================================================================
   PAGE AIDE (centre d'assistance)
   ===================================================================== */
.help{display:grid; grid-template-columns:240px minmax(0,1fr); gap:16px; padding:16px 20px 40px; align-items:start;}
.help-nav{position:sticky; top:12px; background:#fff; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.08); overflow:hidden;}
.help-nav-title{font-size:13px; font-weight:800; text-transform:uppercase; padding:12px 14px; border-bottom:1px solid #EDEDED;}
.help-nav a{display:block; padding:9px 14px; font-size:13.5px; color:#282828; border-left:3px solid transparent;}
.help-nav a:hover{background:#F5F7FA; border-left-color:var(--red); color:var(--red);}
.help-body h1{font-size:24px; margin:0 0 12px;}
.help-card{background:#fff; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.08); padding:16px 18px; margin-bottom:12px; scroll-margin-top:90px;}
.help-card h2{font-family:var(--font-body); font-size:17px; font-weight:700; margin:0 0 8px;}
.help-card p, .help-card li{font-size:14px; line-height:1.7; color:#3A3A3D;}
.help-card p{margin:0 0 8px;}
.help-card ol{margin:0 0 8px; padding-left:20px;}
.help-card a{color:var(--blue);}
.help-card:target{box-shadow:0 0 0 2px var(--red), 0 6px 20px rgba(229,31,49,.15);}
.help-note{font-size:12px !important; color:#8E9CB4 !important; font-style:italic;}
@media (max-width:860px){ .help{grid-template-columns:1fr;} .help-nav{position:static;} }

/* =====================================================================
   ESPACE PUBLICITAIRE — haut des pages catégorie (modèle Jumia "Ad")
   ===================================================================== */
.adspace-wrap{padding-left:0; padding-right:0;}
.adspace-wrap + .shop-layout{padding-top:10px;}
.adspace{background:#fff; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.08); padding:12px 12px 8px; margin-bottom:12px;}
.adspace-banner{position:relative; display:block; border-radius:6px; overflow:hidden; aspect-ratio:1250/340; background:#EEF2F7;}
.adspace-banner img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease-out-expo, ease);}
.adspace-banner:hover img{transform:scale(1.03);}
.adspace-label{position:absolute; top:8px; left:8px; z-index:2; background:rgba(255,255,255,.92); color:#282828; font-size:11px; font-weight:700;
  padding:2px 7px; border-radius:3px; letter-spacing:.02em; box-shadow:0 1px 3px rgba(0,0,0,.15);}
.adspace-products{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; padding:12px 4px 2px;}
.adspace-item{display:flex; gap:10px; align-items:flex-start; padding:6px; border-radius:6px; color:#282828; transition:background .2s ease;}
.adspace-item:hover{background:#F5F7FA;}
.adspace-item:hover .adspace-name{color:var(--blue);}
.adspace-thumb{position:relative; flex:0 0 64px; width:64px; height:64px; display:flex; align-items:center; justify-content:center;}
.adspace-thumb img{width:100%; height:100%; object-fit:contain;}
.adspace-thumb svg{width:70%; height:70%;}
.adspace-pct{position:absolute; top:-4px; left:-4px; background:#FDE8EA; color:var(--red); font-size:11px; font-weight:700; padding:1px 5px; border-radius:3px;}
.adspace-info{display:flex; flex-direction:column; gap:3px; min-width:0;}
.adspace-name{font-size:13px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .15s;}
.adspace-prices{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.adspace-prices strong{font-size:15px; font-weight:700; white-space:nowrap;}
.adspace-prices s{font-size:11.5px; color:#75757A; white-space:nowrap;}
.adspace-rating{display:flex; align-items:center; gap:4px;}
.adspace-rating .stars .star{width:14px; height:14px;}
.adspace-rating small{font-size:11px; color:#75757A;}
.adspace-foot{display:flex; justify-content:flex-end; padding:4px 4px 2px;}
.adspace-more{display:inline-flex; align-items:center; gap:4px; color:var(--blue); font-size:14px; font-weight:600;}
.adspace-more svg{width:16px; height:16px; transition:transform .3s var(--ease-spring, ease);}
.adspace-more:hover{color:var(--red);}
.adspace-more:hover svg{transform:translateX(4px);}

@media (max-width:860px){
  .adspace-products{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; gap:8px;}
  .adspace-products::-webkit-scrollbar{display:none;}
  .adspace-item{flex:0 0 78%; scroll-snap-align:start; border:1px solid #EDEDED;}
}
@media (max-width:600px){
  .adspace{padding:8px 8px 6px;}
  .adspace-banner{aspect-ratio:1250/380;}
}

/* Animations : entrée de la bannière, reflet qui la balaie, produits en cascade */
.motion-on .adspace{animation:staggerIn .8s var(--ease-out-expo) both;}
.motion-on .adspace-banner::after{content:""; position:absolute; top:0; bottom:0; left:-45%; width:30%; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-18deg);
  animation:flashSweep 6s ease-in-out 1s infinite;}
.motion-on .adspace-item{animation:staggerIn .8s var(--ease-out-expo) both;}
.motion-on .adspace-item:nth-child(1){animation-delay:.25s;}
.motion-on .adspace-item:nth-child(2){animation-delay:.35s;}
.motion-on .adspace-item:nth-child(3){animation-delay:.45s;}

/* =====================================================================
   CONNEXION / CRÉATION DE COMPTE "FAÇON JUMIA" (compte/connexion.php)
   Page épurée, centrée, un seul champ au départ, libellés flottants.
   ===================================================================== */
.auth2-body{background:#fff; min-height:100vh;}
.auth2{max-width:440px; margin:0 auto; padding:56px 20px 28px; text-align:center; display:flex; flex-direction:column; min-height:100vh; box-sizing:border-box;}
.auth2-mark{display:block; width:min(250px, 72%); margin:0 auto 22px;}
.auth2-mark img{display:block; width:100%; height:auto;}
.auth2 h1{font-family:var(--font-body); font-size:21px; font-weight:700; color:#282828; margin:0 0 8px; letter-spacing:0;}
.auth2-sub{font-size:15px; line-height:1.55; color:#4B4B50; margin:0 0 26px;}
.auth2-error{background:#FDE8EA; color:#9C1020; border:1px solid #F8C5CA; border-radius:4px; padding:10px 12px; font-size:13.5px; margin-bottom:16px; text-align:left;}
.auth2-form{text-align:left;}

/* Champ à libellé flottant */
.fl{position:relative; margin-bottom:16px;}
.fl input{width:100%; box-sizing:border-box; height:54px; padding:20px 14px 6px; border:1px solid #BDBDC2; border-radius:4px; font-size:16px; color:#282828;
  background:#fff; outline:0; transition:border-color .15s ease, box-shadow .15s ease;}
.fl label{position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:15.5px; color:#75757A; pointer-events:none; transition:top .18s ease, font-size .18s ease, color .18s ease;}
.fl input:focus{border-color:var(--blue); box-shadow:0 0 0 1px var(--blue);}
.fl input:focus + label, .fl input:not(:placeholder-shown) + label{top:15px; font-size:12px; color:var(--blue);}
.fl input:not(:focus):not(:placeholder-shown) + label{color:#75757A;}
.fl-pass input{padding-right:48px;}
.fl-eye{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:38px; height:38px; border:0; background:none; color:#75757A; cursor:pointer; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.fl-eye:hover{background:#F1F1F2;}
.fl-eye.is-on{color:var(--blue);}
.fl-eye svg{width:20px; height:20px;}

.auth2-btn{width:100%; height:50px; margin-top:22px; border:0; border-radius:4px; background:var(--red); color:#fff; font-size:16px; font-weight:700; letter-spacing:.02em;
  cursor:pointer; box-shadow:0 4px 10px rgba(229,31,49,.3); transition:background .15s ease, box-shadow .2s ease;}
.auth2-btn:hover{background:var(--red-dark); box-shadow:0 6px 14px rgba(229,31,49,.38);}
.auth2-btn[disabled]{opacity:.75;}
.auth2-id{display:flex; justify-content:space-between; align-items:center; gap:10px; background:#F5F7FA; border:1px solid #E5E8EE; border-radius:4px; padding:10px 12px; margin-bottom:16px; font-size:14.5px; color:#282828;}
.auth2-id span{display:flex; align-items:center; gap:8px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.auth2-id svg{width:18px; height:18px; color:var(--blue); flex-shrink:0;}
.auth2-id a{color:var(--blue); font-weight:600; font-size:13.5px; flex-shrink:0;}
.auth2-forgot{text-align:center; font-size:13.5px; color:#4B4B50; margin:16px 0 0;}
.auth2-forgot a{color:var(--blue); font-weight:600;}
.pw-meter{height:4px; background:#EDEDED; border-radius:4px; overflow:hidden; margin:-8px 0 6px;}
.pw-meter span{display:block; height:100%; width:0; transition:width .3s ease, background .3s ease;}
.pw-hint{font-size:12px; color:#75757A; margin:0 0 14px;}
.auth2-check{display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.45; color:#4B4B50; margin-top:4px; cursor:pointer;}
.auth2-check input{width:18px; height:18px; margin:1px 0 0; accent-color:var(--red); flex-shrink:0;}
.auth2-check a{color:var(--blue);}

.auth2-or{display:flex; align-items:center; gap:12px; margin:30px 0 16px; color:#75757A; font-size:13.5px;}
.auth2-or::before, .auth2-or::after{content:""; flex:1; height:1px; background:#E5E5E5;}
.auth2-alt{display:flex; flex-direction:column; gap:10px;}
.auth2-ghost{display:flex; align-items:center; justify-content:center; gap:8px; height:46px; border:1px solid #D5D9E0; border-radius:4px; color:#282828; font-size:14.5px; font-weight:600; transition:border-color .15s, background .15s;}
.auth2-ghost:hover{border-color:var(--blue); background:#F5F9FD; color:var(--blue);}
.auth2-ghost svg{width:20px; height:20px;}
.auth2-wa{border-color:#25D366; color:#128C4B;}
.auth2-wa:hover{background:#E8F9EF; border-color:#1EBE5A; color:#128C4B;}
.auth2-terms{font-size:12.5px; color:#282828; margin:26px 0 0; line-height:1.6;}
.auth2-terms a{color:var(--red); text-decoration:underline;}
.auth2-benefits{display:flex; justify-content:center; flex-wrap:wrap; gap:8px 16px; margin-top:30px; font-size:12px; color:#4B4B50;}
.auth2-benefits span{display:inline-flex; align-items:center; gap:5px;}
.auth2-benefits svg{width:15px; height:15px; color:var(--blue);}
.auth2-foot{margin-top:auto; padding-top:40px; font-size:13.5px; color:#282828; line-height:1.7; background:none !important;}
.auth2-foot p{margin:0 0 14px;}
.auth2-foot a{color:var(--blue);}
.auth2-logo{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:900; font-size:19px; color:#0E1D33 !important; letter-spacing:-.01em;}

/* Animations d'entrée */
@media (prefers-reduced-motion: no-preference){
  .auth2 > *{animation:authIn .7s cubic-bezier(.16,1,.3,1) both;}
  .auth2 > *:nth-child(2){animation-delay:.06s;} .auth2 > *:nth-child(3){animation-delay:.12s;}
  .auth2 > *:nth-child(4){animation-delay:.18s;} .auth2 > *:nth-child(5){animation-delay:.24s;}
  .auth2 > *:nth-child(6){animation-delay:.3s;}  .auth2 > *:nth-child(n+7){animation-delay:.36s;}
  .auth2-mark{animation:markIn .9s cubic-bezier(.34,1.56,.64,1) both !important;}
  .auth2-error{animation:shake .45s ease both !important;}
}
@keyframes authIn{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;}}
@keyframes markIn{from{opacity:0; transform:scale(.4) rotate(-30deg);} to{opacity:1; transform:none;}}
@media (max-width:480px){ .auth2{padding-top:36px;} .auth2 h1{font-size:19px;} }

/* =====================================================================
   TUILES CATÉGORIES COLORÉES — section "category_strip" (modèle Jumia)
   ===================================================================== */
.ctile-track{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:8px 2px 10px; margin:-6px 0 -8px;}
.ctile-track::-webkit-scrollbar{display:none;}
.ctile{position:relative; flex:0 0 156px; height:146px; scroll-snap-align:start; border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; color:#fff; text-decoration:none; isolation:isolate;
  box-shadow:0 2px 6px rgba(10,20,40,.12); transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;}
/* Dégradés RAMATEK : couleur franche en haut, éclaircie vers le bas (comme Jumia) */
.ctile.t-red     {background:linear-gradient(180deg, var(--red) 0%, #F0525F 55%, #FBD5D9 100%);}
.ctile.t-blue    {background:linear-gradient(180deg, var(--blue) 0%, #3A7BC2 55%, #D3E3F5 100%);}
.ctile.t-sky     {background:linear-gradient(180deg, var(--sky) 0%, #3DB7E6 55%, #D2EFFA 100%);}
.ctile.t-navy    {background:linear-gradient(180deg, var(--blue-deep) 0%, #2D5E93 55%, #CCDAEA 100%);}
.ctile.t-redsky  {background:linear-gradient(180deg, var(--red-dark) 0%, #E0475B 50%, #CDEFFB 100%);}
.ctile.t-bluesky {background:linear-gradient(180deg, var(--blue) 0%, var(--sky) 55%, #D2EFFA 100%);}
/* Halo lumineux derrière le visuel */
.ctile::before{content:""; position:absolute; left:50%; top:56%; width:96px; height:96px; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 70%); z-index:-1;}
.ctile-head{align-self:stretch; display:flex; align-items:flex-start; justify-content:space-between; gap:6px; padding:8px 10px 0;}
.ctile-name{font-size:13px; font-weight:800; -webkit-hyphens:auto; hyphens:auto; line-height:1.15; text-shadow:0 1px 3px rgba(0,0,0,.25); text-align:left;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.ctile-arrow{width:18px; height:18px; flex-shrink:0; margin-top:1px; transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.ctile-visual{flex:1; display:flex; align-items:center; justify-content:center; width:100%; min-height:0;}
.ctile-visual img{max-width:78%; max-height:70px; object-fit:contain; filter:drop-shadow(0 8px 10px rgba(0,0,0,.28)); transition:transform .45s cubic-bezier(.16,1,.3,1);}
/* Icône "en relief" : pastille blanche bombée + ombre portée */
.ctile-orb{width:60px; height:60px; border-radius:16px; display:flex; align-items:center; justify-content:center; transform:rotate(-8deg);
  background:linear-gradient(145deg, #ffffff 0%, #EAF1F9 100%);
  box-shadow:0 10px 18px rgba(10,20,40,.28), inset 0 -3px 0 rgba(10,40,80,.08), inset 0 2px 0 rgba(255,255,255,.9);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);}
.ctile-orb svg{width:34px; height:34px; stroke-width:1.9;}
.t-red .ctile-orb svg, .t-redsky .ctile-orb svg{color:var(--red);}
.t-blue .ctile-orb svg, .t-navy .ctile-orb svg{color:var(--blue);}
.t-sky .ctile-orb svg, .t-bluesky .ctile-orb svg{color:var(--sky);}
.ctile-cta{margin:0 0 9px; max-width:calc(100% - 16px); padding:4px 10px; border-radius:999px; background:#fff; color:#282828;
  font-size:10.5px; font-weight:800; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  box-shadow:0 2px 6px rgba(0,0,0,.15);}
.t-red .ctile-cta, .t-redsky .ctile-cta{color:var(--red-dark);}
.t-blue .ctile-cta, .t-navy .ctile-cta, .t-bluesky .ctile-cta{color:var(--blue);}
.t-sky .ctile-cta{color:#0B7FB3;}

.ctile:hover{transform:translateY(-4px); box-shadow:0 12px 24px rgba(10,20,40,.22);}
.ctile:hover .ctile-arrow{transform:translateX(3px);}
.ctile:hover .ctile-orb{transform:rotate(0deg) scale(1.1) translateY(-3px);}
.ctile:hover .ctile-visual img{transform:scale(1.08) translateY(-3px);}

/* Animations : légère lévitation de l'icône + reflet qui balaie la tuile */
.motion-on .ctile-orb{animation:orbFloat 3.4s ease-in-out infinite; animation-delay:calc(var(--i, 0) * .25s);}
.motion-on .ctile:hover .ctile-orb{animation-play-state:paused;}
@keyframes orbFloat{0%,100%{transform:rotate(-8deg) translateY(0);} 50%{transform:rotate(-4deg) translateY(-4px);}}
.motion-on .ctile::after{content:""; position:absolute; top:0; bottom:0; left:-70%; width:45%; z-index:2; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-18deg); transition:left .7s ease;}
.motion-on .ctile:hover::after{left:130%;}

@media (max-width:640px){
  .ctile{flex-basis:128px; height:128px; border-radius:10px;}
  .ctile-name{font-size:11px; letter-spacing:-.01em;}
  .ctile-head{padding:7px 8px 0; gap:4px;}
  .ctile-arrow{width:15px; height:15px;}
  .ctile-orb{width:50px; height:50px; border-radius:13px;}
  .ctile-orb svg{width:28px; height:28px;}
  .ctile-cta{font-size:9px; padding:3px 8px; margin-bottom:7px;}
}

/* =====================================================================
   MÉGA-MENU — sous-catégories au survol de la barre des catégories
   ===================================================================== */
.catnav{position:relative;}
.mega-host{position:relative; height:0; z-index:45;}
.mega-wrap{position:relative; padding:0 !important;}
.mega{position:absolute; left:0; right:0; top:0; background:#fff; border-radius:0 0 8px 8px;
  box-shadow:0 18px 40px rgba(10,20,40,.18), 0 2px 6px rgba(10,20,40,.08); border-top:2px solid var(--red);
  padding:20px 28px 16px; max-height:calc(100vh - 170px); overflow-y:auto;}
.mega[hidden]{display:none;}
.mega-cols{columns:3 220px; column-gap:32px;}
.mega-group{break-inside:avoid; margin-bottom:22px;}
.mega-title{display:block; font-size:13px; font-weight:800; text-transform:uppercase; color:#282828; letter-spacing:.01em; padding:4px 8px 10px; border-bottom:1px solid #EDEDED;}
.mega-title:hover{color:var(--red);}
.mega-group ul{list-style:none; margin:0; padding:0;}
.mega-group li a{display:block; padding:10px 8px; font-size:13.5px; color:#3A3A3D; border-bottom:1px solid #EDEDED; transition:color .15s ease, background .15s ease, padding .2s ease;}
.mega-group li a:hover{color:var(--red); background:#FDF3F4; padding-left:12px;}
.mega-all{display:inline-flex; align-items:center; gap:4px; margin:2px 8px 0; font-size:13.5px; font-weight:700; color:var(--blue);}
.mega-all svg{width:15px; height:15px; transition:transform .25s ease;}
.mega-all:hover{color:var(--red);}
.mega-all:hover svg{transform:translateX(3px);}
.catnav-track a.is-mega-open{color:var(--red); border-bottom-color:var(--red);}
/* Petite flèche sous les catégories qui ont un sous-menu (ordinateur) */
@media (hover:hover) and (min-width:1024px){
  .catnav-track a[data-mega]::after{content:""; width:6px; height:6px; margin-left:2px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
    transform:rotate(45deg) translateY(-2px); opacity:.55; transition:transform .25s ease;}
  .catnav-track a.is-mega-open::after{transform:rotate(225deg) translateY(-1px);}
}
@media (max-width:1023px), (hover:none){ .mega-host{display:none;} }
/* Ouverture animée */
.motion-on .mega.is-opening{animation:megaIn .32s cubic-bezier(.16,1,.3,1);}
.motion-on .mega.is-opening .mega-group{animation:megaGroupIn .45s cubic-bezier(.16,1,.3,1) both;}
.motion-on .mega.is-opening .mega-group:nth-child(2){animation-delay:.04s;}
.motion-on .mega.is-opening .mega-group:nth-child(3){animation-delay:.08s;}
.motion-on .mega.is-opening .mega-group:nth-child(n+4){animation-delay:.12s;}
@keyframes megaIn{from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:none;}}
@keyframes megaGroupIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

/* Le méga-menu ne doit pas hériter du style des onglets de la barre (.catnav a) */
.catnav .mega a{display:block; padding:0; border:0; font-weight:400; color:#3A3A3D; font-size:13.5px; white-space:normal; gap:0;}
.catnav .mega a.mega-title, .catnav .mega .mega-title{font-size:13px; font-weight:800; text-transform:uppercase; color:#282828; padding:4px 8px 10px; border-bottom:1px solid #EDEDED;}
.catnav .mega a.mega-title:hover{color:var(--red);}
.catnav .mega .mega-title.is-empty{border-bottom-color:transparent;}
.catnav .mega .mega-group li a{padding:10px 8px; border-bottom:1px solid #EDEDED;}
.catnav .mega .mega-group li a:hover{color:var(--red); background:#FDF3F4; padding-left:12px;}
.catnav .mega a.mega-all{display:inline-flex; font-weight:700; color:var(--blue); padding:0; margin:2px 8px 0;}
.catnav .mega a.mega-all:hover{color:var(--red);}

/* Admin : galerie photo d'un produit */
.gal-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:10px; margin-bottom:10px;}
.gal-item{border:1px solid var(--border); border-radius:6px; overflow:hidden; background:#fff;}
.gal-item img{width:100%; aspect-ratio:1/1; object-fit:contain; display:block; background:#F7F8FA;}
.gal-actions{display:flex; flex-wrap:wrap; gap:4px; padding:6px;}
.gal-actions button{flex:1; min-width:26px; border:1px solid var(--border); background:#fff; border-radius:4px; font-size:11.5px; padding:4px 5px; cursor:pointer; color:var(--ink);}
.gal-actions button:hover{border-color:var(--blue); color:var(--blue);}
.gal-actions button.danger:hover{border-color:var(--red); color:var(--red);}
.gal-preview{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.gal-preview img{width:64px; height:64px; object-fit:cover; border-radius:4px; border:1px solid var(--border);}

/* =====================================================================
   FICHE PRODUIT : photo principale cliquable + visionneuse "Images du produit"
   ===================================================================== */
.pdp2-zoom{position:relative; display:block; width:100%; height:100%; padding:0; border:0; background:none; cursor:zoom-in;}
.pdp2-zoom img{width:100%; height:100%; object-fit:contain;}
.pdp2-zoom-hint{position:absolute; right:8px; bottom:8px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.92); color:#282828;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.18); opacity:.85; transition:opacity .2s ease, transform .25s ease;}
.pdp2-zoom-hint svg{width:18px; height:18px;}
.pdp2-zoom:hover .pdp2-zoom-hint, .pdp2-zoom:focus-visible .pdp2-zoom-hint{opacity:1; transform:scale(1.08);}
.pdp2-zoom:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:4px;}
#pdpMainImg.is-swapping{animation:imgSwap .3s ease;}
@keyframes imgSwap{from{opacity:.35;} to{opacity:1;}}
.pdp2-thumb{transition:border-color .15s ease, transform .2s ease;}
.pdp2-thumb:hover{border-color:var(--blue);}
.pdp2-thumb.is-active{border-color:var(--red) !important;}

html.lb-lock, html.lb-lock body{overflow:hidden;}
.lb{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px;}
.lb[hidden]{display:none;}
.lb-backdrop{position:absolute; inset:0; background:rgba(15,20,30,.62); opacity:0; transition:opacity .22s ease;}
.lb-box{position:relative; width:min(580px, 100%); max-height:calc(100vh - 40px); background:#fff; border-radius:6px; display:flex; flex-direction:column;
  box-shadow:0 24px 60px rgba(0,0,0,.35); opacity:0; transform:translateY(14px) scale(.97); transition:opacity .22s ease, transform .3s cubic-bezier(.16,1,.3,1);}
.lb.is-open .lb-backdrop{opacity:1;}
.lb.is-open .lb-box{opacity:1; transform:none;}
.lb-head{display:flex; align-items:center; gap:12px; padding:14px 12px 10px 20px;}
.lb-head h2{font-family:var(--font-body); font-size:16px; font-weight:600; color:#282828; letter-spacing:0; margin:0; flex:1;}
.lb-count{font-size:13px; color:#75757A;}
.lb-close{width:36px; height:36px; border:0; background:none; border-radius:50%; color:#282828; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.lb-close:hover{background:#F1F1F2;}
.lb-close svg{width:20px; height:20px;}
.lb-stage{position:relative; padding:0 20px;}
.lb-frame{position:relative; aspect-ratio:1/1; max-height:calc(100vh - 230px); margin:0 auto; overflow:hidden; cursor:zoom-in; display:flex; align-items:center; justify-content:center; background:#fff; touch-action:pan-y;}
.lb-img{max-width:100%; max-height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none; transition:transform .35s cubic-bezier(.16,1,.3,1);}
.lb-frame.is-zoomed{cursor:zoom-out; touch-action:none;}
.lb-frame.is-zoomed .lb-img{transform:scale(2.2); transition:transform .3s cubic-bezier(.16,1,.3,1), transform-origin .08s linear;}
.lb-img.fade-in{animation:lbFade .35s ease;}
.lb-img.slide-left{animation:lbSlideL .38s cubic-bezier(.16,1,.3,1);}
.lb-img.slide-right{animation:lbSlideR .38s cubic-bezier(.16,1,.3,1);}
@keyframes lbFade{from{opacity:0;} to{opacity:1;}}
@keyframes lbSlideL{from{opacity:0; transform:translateX(40px);} to{opacity:1; transform:none;}}
@keyframes lbSlideR{from{opacity:0; transform:translateX(-40px);} to{opacity:1; transform:none;}}
.lb-nav{position:absolute; top:50%; z-index:2; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:0; background:#fff; color:#282828;
  box-shadow:0 3px 12px rgba(0,0,0,.2); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .2s ease, background .15s ease;}
.lb-nav:hover{transform:translateY(-50%) scale(1.08); background:#F7F8FA;}
.lb-nav svg{width:20px; height:20px;}
.lb-nav.prev{left:6px;} .lb-nav.next{right:6px;}
.lb-tip{position:absolute; left:50%; bottom:8px; transform:translateX(-50%); font-size:11.5px; color:#fff; background:rgba(20,25,35,.6); padding:3px 10px; border-radius:999px; pointer-events:none; white-space:nowrap; opacity:.9;}
.lb-thumbs{display:flex; justify-content:center; gap:8px; padding:12px 16px 16px; overflow-x:auto; scrollbar-width:none;}
.lb-thumbs::-webkit-scrollbar{display:none;}
.lb-thumb{flex:0 0 52px; height:52px; padding:2px; border:1.5px solid #E5E5E5; border-radius:4px; background:#fff; cursor:pointer; transition:border-color .15s ease;}
.lb-thumb img{width:100%; height:100%; object-fit:contain;}
.lb-thumb:hover{border-color:var(--blue);}
.lb-thumb.is-active{border-color:var(--red);}
@media (max-width:600px){
  .lb{padding:0; align-items:stretch;}
  .lb-box{width:100%; max-height:none; border-radius:0;}
  .lb-stage{flex:1; display:flex; align-items:center; padding:0 8px;}
  .lb-frame{width:100%; max-height:none;}
  .lb-nav{width:34px; height:34px;}
  .lb-tip{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .lb-img.fade-in, .lb-img.slide-left, .lb-img.slide-right, #pdpMainImg.is-swapping{animation:none;}
}
.gal-actions button{height:auto; line-height:1.2; white-space:nowrap; width:auto;}
.gal-actions button:first-child{flex:1 1 100%;}

/* =====================================================================
   BARRE DE RECHERCHE : panneau de suggestions (modèle Jumia)
   ===================================================================== */
.search{position:relative;}
.search.is-open{z-index:60; background:#fff; box-shadow:0 0 0 2px var(--blue) inset, 0 0 0 100vmax rgba(10,18,30,.42);}
.search.is-loading .search-ic{animation:sxPulse .8s ease-in-out infinite;}
@keyframes sxPulse{50%{opacity:.35;}}
.sx-panel{position:absolute; top:calc(100% + 8px); left:-6px; right:-6px; min-width:min(560px, calc(100vw - 24px)); z-index:61; background:#fff; border-radius:14px;
  box-shadow:0 18px 44px rgba(10,20,40,.28); padding:6px 0 10px; max-height:min(72vh, 620px); overflow-y:auto; text-align:left;}
.sx-panel[hidden]{display:none;}
.motion-on .search.is-open .sx-panel{animation:sxIn .25s cubic-bezier(.16,1,.3,1);}
@keyframes sxIn{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}
.sx-sec{padding:6px 14px 4px;}
.sx-sec + .sx-sec{border-top:1px solid #F1F1F2; margin-top:4px; padding-top:10px;}
.sx-title{display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#6B6B70; margin:2px 0 8px;}
.sx-clear{border:0; background:none; color:var(--blue); font-size:12px; font-weight:600; text-transform:none; letter-spacing:0; cursor:pointer; padding:2px 4px;}
.sx-clear:hover{color:var(--red);}
/* Produits vus récemment : petites cartes côte à côte (comme Jumia) */
.sx-recent{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px;}
.sx-recent .sx-prod{background:#fff; border:1px solid #EDEDED; border-radius:8px;}
.sx-prod{display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:8px; color:#282828; text-decoration:none; transition:background .15s ease, border-color .15s ease;}
.sx-prod:hover, .sx-prod.is-hl{background:#F5F8FC; border-color:#D6E4F3;}
.sx-thumb{flex:0 0 44px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:4px; overflow:hidden; background:#fff;}
.sx-thumb img{width:100%; height:100%; object-fit:contain;}
.sx-thumb svg{width:70%; height:70%; color:var(--blue);}
.sx-info{display:flex; flex-direction:column; gap:2px; min-width:0;}
.sx-name{font-size:12.5px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sx-name strong{color:var(--red); font-weight:700;}
.sx-price{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; white-space:nowrap;}
.sx-pct{background:#1E8E4E; color:#fff; font-size:10.5px; font-weight:700; padding:1px 5px; border-radius:3px;}
/* Puces de recherche */
.sx-chips{display:flex; flex-wrap:wrap; gap:8px;}
.sx-chip{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:#F1F3F6; color:#282828; font-size:13px; text-decoration:none; transition:background .15s ease, color .15s ease;}
.sx-chip svg{width:14px; height:14px; color:#75757A;}
.sx-chip:hover, .sx-chip.is-hl{background:#E3ECF7; color:var(--blue);}
/* Lignes de suggestions pendant la frappe */
.sx-list{padding-left:6px; padding-right:6px;}
.sx-line{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:6px; color:#282828; font-size:14px; text-decoration:none;}
.sx-line svg{width:16px; height:16px; color:#75757A; flex-shrink:0;}
.sx-line strong{font-weight:700;}
.sx-line:hover, .sx-line.is-hl{background:#F5F8FC;}
.sx-line-main{font-weight:500;}
.sx-cat{color:var(--blue); padding-left:36px;}
.sx-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:4px 8px;}
.sx-all{display:block; margin:6px 14px 0; padding:10px; text-align:center; border-radius:8px; background:#F5F8FC; color:var(--blue); font-weight:700; font-size:13.5px; text-decoration:none;}
.sx-all:hover{background:#E3ECF7;}
.sx-empty{padding:12px 16px; font-size:13.5px; color:#6B6B70;}
@media (max-width:860px){
  .sx-panel{position:fixed; left:8px; right:8px; top:auto; min-width:0; margin-top:8px; max-height:70vh;}
  .search.is-open .sx-panel{top:var(--sx-top, 120px);}
  .sx-recent, .sx-grid{grid-template-columns:1fr;}
}

/* =====================================================================
   Publicités sur les côtés de l'écran (grands écrans uniquement)
   ===================================================================== */
.sky{display:none;}
@media (min-width:1580px){
  .sky{
    --sky-w:clamp(150px, calc((100vw - 1200px) / 2 - 56px), 300px);
    --sky-c:var(--red); --sky-c2:#B3121F;
    display:block; position:fixed; z-index:30; top:var(--sky-top, 150px);
    width:var(--sky-w); max-height:calc(100vh - var(--sky-top, 150px) - 16px);
    font-family:var(--font-body);
    animation:skyIn .7s cubic-bezier(.2,.8,.2,1) both .3s;
  }
  .sky--left{left:calc((100vw - 1200px) / 4 - var(--sky-w) / 2);}
  .sky--right{right:calc((100vw - 1200px) / 4 - var(--sky-w) / 2); --sky-dx:24px;}
}
.sky--bleu{--sky-c:var(--blue); --sky-c2:var(--blue-deep);}
.sky--marine{--sky-c:var(--blue-deep); --sky-c2:var(--blue-deep);}
.sky--ciel{--sky-c:var(--sky); --sky-c2:var(--blue);}
@keyframes skyIn{from{opacity:0; transform:translateX(var(--sky-dx, -24px));} to{opacity:1; transform:none;}}
.sky-tag{position:absolute; top:6px; right:6px; z-index:3; font-size:10px; font-weight:700; letter-spacing:.04em; color:#fff; background:rgba(0,0,0,.38); padding:2px 6px; border-radius:3px; pointer-events:none;}
.sky-card{display:flex; flex-direction:column; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 6px 24px rgba(10,30,60,.14), 0 1px 3px rgba(10,30,60,.08); max-height:inherit; text-decoration:none; color:var(--ink);}
.sky-card--img{display:block; transition:transform .25s ease, box-shadow .25s ease;}
.sky-card--img img{display:block; width:100%; aspect-ratio:1 / 2; object-fit:cover;}
.sky-card--img:hover{transform:translateY(-3px); box-shadow:0 12px 32px rgba(10,30,60,.2);}
.sky-head{position:relative; display:block; padding:16px 14px 14px; color:#fff; text-decoration:none; overflow:hidden;
  background:linear-gradient(135deg, var(--sky-c) 0%, var(--sky-c2) 100%);}
.sky-head::after{content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform:translateX(-100%); animation:skyShine 4.5s ease-in-out infinite 1.2s;}
@keyframes skyShine{0%,60%{transform:translateX(-100%);} 85%,100%{transform:translateX(100%);}}
.sky-kicker{display:block; font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; opacity:.85;}
.sky-title{display:block; margin-top:4px; font-size:clamp(17px, calc(var(--sky-w, 300px) / 11), 26px); line-height:1.08; font-weight:900; text-transform:uppercase; letter-spacing:-.01em;}
.sky-timer{font-size:11.5px; font-weight:600; color:var(--sky-c2); background:color-mix(in srgb, var(--sky-c) 10%, #fff); padding:6px 14px; border-bottom:1px solid color-mix(in srgb, var(--sky-c) 18%, #fff);}
.sky-timer b{font-variant-numeric:tabular-nums; color:var(--sky-c); font-weight:800;}
.sky-slides{position:relative; display:grid; flex:1 1 auto; min-height:0;}
.sky-slide{grid-area:1 / 1; display:flex; flex-direction:column; padding:12px 14px 4px; text-decoration:none; color:var(--ink);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .45s ease, transform .45s ease, visibility 0s linear .45s;}
.sky-slide.is-on{opacity:1; visibility:visible; transform:none; transition:opacity .45s ease, transform .45s ease, visibility 0s;}
.sky-img{position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1; background:#F6F8FB; border-radius:8px; overflow:hidden;}
.sky-img img{width:100%; height:100%; object-fit:contain; transition:transform .5s ease;}
.sky-ic svg{width:clamp(56px, calc(var(--sky-w, 300px) * .4), 110px); height:auto;}
.sky-slide:hover .sky-img img{transform:scale(1.06);}
.sky-pct{position:absolute; top:8px; left:8px; background:var(--sky-c); color:#fff; font-weight:900; font-size:13px; padding:3px 7px; border-radius:4px; box-shadow:0 2px 6px rgba(0,0,0,.18);}
.sky-name{margin-top:10px; font-size:13px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em;}
.sky-price{margin-top:6px; font-size:17px; font-weight:900; color:var(--ink);}
.sky-old{font-size:12px; color:var(--ink-soft);}
.sky-dots{display:flex; justify-content:center; gap:6px; padding:8px 0 2px;}
.sky-dots button{width:7px; height:7px; padding:0; border:0; border-radius:99px; background:#D5DBE5; cursor:pointer; transition:width .3s ease, background .3s ease;}
.sky-dots button.is-on{width:20px; background:var(--sky-c);}
.sky-cta{display:block; margin:10px 14px 14px; padding:10px 12px; text-align:center; font-weight:800; font-size:14px; color:#fff; text-decoration:none; border-radius:6px;
  background:var(--sky-c); box-shadow:0 3px 10px color-mix(in srgb, var(--sky-c) 40%, transparent); transition:transform .2s ease, background .2s ease;}
.sky-cta:hover{background:var(--sky-c2); transform:translateY(-1px);}
.sky-cta span{display:inline-block; transition:transform .2s ease;}
.sky-cta:hover span{transform:translateX(3px);}
@media (max-height:700px){ .sky-name{display:none;} .sky-head{padding:12px 14px 10px;} }
@media (prefers-reduced-motion:reduce){ .sky, .sky-head::after{animation:none;} .sky-slide{transition:none;} }

/* Admin : choix du format d'une publicité */
.ad-format{border:0; padding:0; margin:0 0 16px; display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.ad-format legend{font-weight:700; font-size:13px; margin-bottom:8px;}
.ad-format-opt{display:flex; gap:10px; align-items:flex-start; border:1.5px solid var(--border); border-radius:8px; padding:12px; cursor:pointer; font-weight:400; transition:border-color .2s, background .2s;}
.ad-format-opt:has(input:checked){border-color:var(--blue, var(--blue)); background:#F2F7FD;}
.ad-format-opt input{margin-top:3px;}
.ad-format-opt strong{display:block; font-size:13.5px;}
.ad-format-opt small{display:block; color:var(--ink-soft); font-size:12px; line-height:1.4; margin-top:2px;}
.ad-format-ill{flex:0 0 54px; height:40px; border-radius:4px; background:#E9EEF5; position:relative; overflow:hidden;}
.ad-format-ill::before{content:""; position:absolute; left:14px; right:14px; top:0; bottom:0; background:#fff;}
.ad-format-ill--cat i{position:absolute; left:17px; right:17px; top:5px; height:9px; background:var(--red); border-radius:2px;}
.ad-format-ill--side i{position:absolute; top:6px; width:9px; height:26px; background:var(--red); border-radius:2px; left:2px;}
.ad-format-ill--side i + i{left:auto; right:2px; background:var(--blue);}
@media (max-width:640px){ .ad-format{grid-template-columns:1fr;} }
[data-for-format][hidden]{display:none !important;}

/* Admin : les deux images d'une catégorie, avec aperçu fidèle */
.catimg-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; margin-top:4px;}
.catimg{min-width:0; border:1px solid var(--border); border-radius:10px; padding:14px; background:#FAFBFD; display:flex; flex-direction:column; gap:10px; font-weight:400;}
.catimg-head strong{display:block; font-size:13.5px;}
.catimg-head small{color:var(--ink-soft); font-size:12px;}
.catimg-help{color:var(--ink-soft); font-size:12px; line-height:1.45;}
.catimg-rm{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-soft); font-weight:400;}
.catimg-prev{position:relative; overflow:hidden; border-radius:12px; color:#fff; align-self:center; isolation:isolate;}
.catimg-prev .cp-ic svg{width:100%; height:100%;}
.catimg-prev--strip{width:156px; height:146px; display:flex; flex-direction:column; align-items:center;
  background:linear-gradient(180deg, var(--red) 0%, #F0525F 55%, #FBD5D9 100%); box-shadow:0 2px 6px rgba(10,20,40,.12);}
.catimg-prev--strip .cp-name{align-self:stretch; padding:8px 10px 0; font-size:13px; font-weight:800; text-shadow:0 1px 3px rgba(0,0,0,.25);}
.catimg-prev--strip .cp-vis{flex:1; display:flex; align-items:center; justify-content:center; width:100%; min-height:0;}
.catimg-prev--strip .cp-vis img{max-width:78%; max-height:70px; object-fit:contain; filter:drop-shadow(0 8px 10px rgba(0,0,0,.28));}
.catimg-prev--strip .cp-ic{width:58px; height:58px; padding:12px; box-sizing:border-box; border-radius:50%; background:#fff; color:var(--red); box-shadow:0 6px 12px rgba(0,0,0,.2);}
.catimg-prev--strip .cp-cta{margin:0 0 9px; background:#fff; color:var(--ink); font-size:10.5px; font-weight:800; padding:4px 12px; border-radius:99px;}
.catimg-prev--tile{width:170px; aspect-ratio:1/1.05; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--blue-deep), var(--blue));}
.catimg-prev--tile > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;}
.catimg-prev--tile .cp-ic{width:42%; height:42%;}
.catimg-prev--tile .cp-over{position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,20,40,.08) 0%, rgba(10,20,40,0) 38%, rgba(10,20,40,.72) 100%);}
.catimg-prev--tile .cp-name{position:absolute; top:10px; left:12px; font-weight:800; font-size:14px; text-shadow:0 1px 4px rgba(0,0,0,.35);}
.catimg-prev--tile .cp-cta{position:absolute; bottom:10px; left:12px; font-size:10.5px; font-weight:800; background:#fff; color:var(--ink); padding:5px 10px; border-radius:99px; box-shadow:0 4px 10px rgba(0,0,0,.15);}
.catimg-prev--tile .cp-note{position:absolute; top:34px; left:12px; font-size:10.5px; background:rgba(0,0,0,.55); padding:2px 6px; border-radius:3px;}
@media (max-width:760px){ .catimg-grid{grid-template-columns:1fr;} }
.catimg input[type=file]{width:100%; max-width:100%; box-sizing:border-box;}


/* =====================================================================
   Logo officiel RAMATEK (images assets/img/logo/)
   ===================================================================== */
.brand-logo{display:block; height:54px; width:auto; max-width:none;}
header.site .brand{line-height:0;}
header.site .brand-logo{transition:transform .25s ease;}
header.site .brand:hover .brand-logo{transform:scale(1.02);}
@media (max-width:900px){ header.site .brand-logo{height:44px;} }
@media (max-width:560px){ header.site .brand-logo{height:36px;} }
.ft-logo img{display:block; height:64px; width:auto;}
.auth2-logo img{display:block; height:30px; width:auto;}
.admin-sidebar .brand{padding:18px 18px;}
.admin-sidebar .brand-logo{height:auto; width:100%; max-width:200px;}
.admin-login-card .brand{margin-bottom:10px;}
.admin-login-card .brand-logo{height:auto; width:240px; max-width:100%; margin:0 auto;}

/* =====================================================================
   Pages « Votre avis », « Reconditionné », « Un projet à équiper ? »
   ===================================================================== */
.hp-field{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0;}
.lp{padding-bottom:40px;}
.lp-hero{color:#fff; padding:34px 0 30px; position:relative; overflow:hidden; isolation:isolate;}
.lp-hero::after{content:""; position:absolute; right:-120px; top:-140px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.12), rgba(255,255,255,0) 70%); z-index:-1;}
.lp-hero--blue{background:linear-gradient(120deg, var(--blue) 0%, var(--blue-deep) 60%, var(--blue-deep) 100%);}
.lp-hero--navy{background:linear-gradient(120deg, var(--blue-deep) 0%, var(--blue-deep) 70%, var(--blue-deep) 100%);}
.lp-hero-row{display:flex; align-items:center; gap:22px;}
.lp-hero-row > div{flex:1; min-width:0;}
.lp-hero-ic{flex:0 0 64px; height:64px; border-radius:50%; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center;}
.lp-hero-ic svg{width:30px; height:30px;}
.lp-crumbs{font-size:12.5px; opacity:.8; margin-bottom:6px;}
.lp-crumbs a{color:#fff; text-decoration:underline; text-underline-offset:2px;}
.lp-hero h1{font-family:var(--font-display); font-size:clamp(24px, 3.2vw, 34px); font-weight:900; margin:0 0 6px; color:#fff; letter-spacing:-.01em;}
.lp-hero p{margin:0; font-size:15px; line-height:1.55; opacity:.92; max-width:640px;}
.lp-hero-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.lp-hero-chips span{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); padding:6px 11px; border-radius:99px;}
.lp-hero-chips svg{width:15px; height:15px;}
.lp-hero-cta{flex-shrink:0;}
.lp-section{margin-top:30px;}
.lp-h2{font-family:var(--font-display); font-size:21px; font-weight:800; margin:0 0 14px; color:var(--ink);}
.lp-h2-row{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px;}
.lp-h2-row .lp-h2{margin:0;}
.lp-sub{margin:-6px 0 14px; color:var(--ink-soft); font-size:14px;}
.lp-card{background:var(--surface); border-radius:10px; padding:22px; box-shadow:0 1px 3px rgba(10,20,40,.08); border:1px solid var(--border);}
.lp-card h2{font-family:var(--font-display); font-size:20px; font-weight:800; margin:0 0 4px;}
.lp-card h3{font-size:15.5px; font-weight:800; margin:0 0 10px;}
.lp-card p{font-size:14px; line-height:1.6; color:var(--ink-soft); margin:0 0 10px;}
.lp-body{display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:20px; margin-top:24px; align-items:start;}
.lp-body--flush{margin-top:30px;}
.lp-side{display:flex; flex-direction:column; gap:14px; position:sticky; top:150px;}
.lp-side .btn-block + .btn-block{margin-top:8px;}
.lp-lead{margin:0 0 16px !important;}
.lp-muted{font-size:13px !important; color:var(--ink-soft);}
.lp-form .alert{flex-direction:column; gap:4px;}
.lp-field{border:0; padding:0; margin:0 0 14px; min-width:0;}
.lp-field label, .lp-field legend{display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:6px; padding:0;}
.lp-field input[type=text], .lp-field input[type=email], .lp-field input[type=tel], .lp-field input[type=number], .lp-field select, .lp-field textarea{
  width:100%; box-sizing:border-box; border:1.5px solid var(--border); border-radius:6px; padding:11px 12px; font:inherit; font-size:14.5px; background:var(--surface); color:var(--ink); transition:border-color .15s, box-shadow .15s;}
.lp-field textarea{resize:vertical; min-height:90px;}
.lp-field input:focus, .lp-field select:focus, .lp-field textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(11,87,164,.14);}
.lp-grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 14px;}
.lp-grid3{display:grid; grid-template-columns:repeat(3, 1fr); gap:0 14px;}
.lp-check{display:flex; gap:8px; align-items:flex-start; font-size:13.5px; margin:2px 0 16px;}
.lp-submit{min-width:220px; padding:14px 26px; font-size:15px;}
.lp-legal{font-size:12px !important; margin:10px 0 0 !important;}
.lp-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px;}
.chip-radios{display:flex; flex-wrap:wrap; gap:8px;}
.chip-radio{position:relative; cursor:pointer; margin:0 !important; font-weight:600 !important;}
.chip-radio input{position:absolute; opacity:0; pointer-events:none;}
.chip-radio span{display:inline-block; padding:8px 14px; border:1.5px solid var(--border); border-radius:99px; font-size:13px; color:var(--ink); transition:all .15s ease; background:var(--surface);}
.chip-radio:hover span{border-color:var(--blue);}
.chip-radio input:checked + span{background:var(--blue); border-color:var(--blue); color:#fff;}
.chip-radio input:focus-visible + span{outline:2px solid var(--sky, var(--sky)); outline-offset:2px;}
.stars-input{display:inline-flex; flex-direction:row-reverse; gap:4px;}
.stars-input input{position:absolute; opacity:0; pointer-events:none;}
.stars-input label{cursor:pointer; color:#D5DBE5; margin:0 !important; transition:transform .15s ease, color .15s ease;}
.stars-input label svg{width:34px; height:34px; display:block;}
.stars-input label:hover, .stars-input label:hover ~ label, .stars-input input:checked ~ label{color:#F5A623;}
.stars-input label:hover{transform:scale(1.12);}
.stars-input input:focus-visible + label{outline:2px solid var(--blue); outline-offset:2px; border-radius:4px;}
.stars-hint{display:block; font-size:12.5px; color:var(--ink-soft); margin-top:4px;}
.lp-ticks{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px;}
.lp-ticks li{position:relative; padding-left:24px; font-size:13.5px; line-height:1.5; color:var(--ink);}
.lp-ticks li::before{content:""; position:absolute; left:0; top:3px; width:15px; height:15px; border-radius:50%; background:#E3F6EB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23176B41' stroke-width='3.5'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat;}
.lp-steps-mini{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;}
.lp-steps-mini li{display:flex; gap:10px; font-size:13.5px; line-height:1.45; color:var(--ink);}
.lp-steps-mini li span{flex:0 0 22px; height:22px; border-radius:50%; background:var(--blue); color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center;}
.lp-help{background:linear-gradient(180deg, #F2F7FD, var(--surface));}
.lp-success{text-align:center; padding:36px 24px;}
.lp-success-ic{width:64px; height:64px; margin:0 auto 14px; border-radius:50%; background:#E3F6EB; color:#176B41; display:flex; align-items:center; justify-content:center; animation:lpPop .6s cubic-bezier(.34,1.56,.64,1) both;}
.lp-success-ic svg{width:32px; height:32px;}
.lp-success .lp-actions{justify-content:center;}
@keyframes lpPop{from{transform:scale(.4); opacity:0;} to{transform:none; opacity:1;}}
/* Reconditionné */
.cond-tag{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; padding:3px 8px; border-radius:4px; margin-bottom:6px; text-decoration:none !important;}
.cond-reconditionne{background:#E3F6EB; color:#176B41;}
.cond-fin_de_serie{background:#FFF1DB; color:#9A5B00;}
.card .cond-tag{font-size:10px; padding:2px 6px; margin-bottom:4px;}
.pdp2-info .cond-tag{margin:0 6px 8px 0;}
.lp-compare .lp-card{border-top:4px solid #176B41;}
.lp-compare .lp-card--accent2{border-top-color:#E59A1A;}
.lp-grades{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;}
.lp-grade{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:20px; text-align:center;}
.lp-grade h3{font-size:16px; margin:10px 0 6px;}
.lp-grade p{font-size:13.5px; color:var(--ink-soft); margin:0; line-height:1.55;}
.lp-grade-badge{display:inline-flex; width:52px; height:52px; border-radius:50%; align-items:center; justify-content:center; font-family:var(--font-display); font-size:24px; font-weight:900; color:#fff;}
.g-a{background:linear-gradient(135deg, #1E9E5A, #176B41);} .g-b{background:linear-gradient(135deg, var(--sky), var(--blue));} .g-c{background:linear-gradient(135deg, #F0A63A, #C97A00);}
.lp-checks{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;}
.lp-check-item{display:flex; gap:12px; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px;}
.lp-check-ic{flex:0 0 40px; height:40px; border-radius:10px; background:#EAF2FB; color:var(--blue); display:flex; align-items:center; justify-content:center;}
.lp-check-ic svg{width:22px; height:22px;}
.lp-check-item strong{display:block; font-size:14px;}
.lp-check-item small{display:block; font-size:12.5px; color:var(--ink-soft); margin-top:2px;}
.lp-tabs{display:flex; gap:6px; flex-wrap:wrap;}
.lp-tabs a{padding:7px 13px; border-radius:99px; border:1.5px solid var(--border); font-size:13px; font-weight:700; color:var(--ink); text-decoration:none; background:var(--surface);}
.lp-tabs a.is-on{background:var(--blue-deep); border-color:var(--blue-deep); color:#fff;}
.lp-empty{display:flex; gap:20px; align-items:center;}
.lp-empty-ic{flex:0 0 76px; height:76px; border-radius:50%; background:#EAF2FB; color:var(--blue); display:flex; align-items:center; justify-content:center;}
.lp-empty-ic svg{width:38px; height:38px;}
.lp-faq{display:flex; flex-direction:column; gap:8px;}
.lp-faq details{background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:0 18px;}
.lp-faq summary{cursor:pointer; padding:15px 0; font-weight:700; font-size:14.5px; list-style:none; display:flex; justify-content:space-between; gap:10px;}
.lp-faq summary::-webkit-details-marker{display:none;}
.lp-faq summary::after{content:"+"; font-size:20px; line-height:1; color:var(--blue); transition:transform .2s ease;}
.lp-faq details[open] summary::after{transform:rotate(45deg);}
.lp-faq details p{margin:0 0 15px; font-size:14px; line-height:1.6; color:var(--ink-soft);}
/* Projet */
.lp-types{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;}
.lp-type{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:20px; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease;}
.lp-type:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(10,30,60,.1);}
.lp-type-ic{width:46px; height:46px; border-radius:12px; background:linear-gradient(135deg, var(--blue), var(--sky)); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:12px;}
.lp-type-ic svg{width:24px; height:24px;}
.lp-type h3{font-size:16px; margin:0 0 6px;}
.lp-type p{font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin:0 0 12px; flex:1;}
.lp-type-links{display:flex; gap:14px; flex-wrap:wrap; font-size:13.5px; font-weight:700;}
.lp-type-links a{color:var(--red);}
.lp-type-links a.muted{color:var(--ink-soft); font-weight:600;}
.lp-steps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; counter-reset:none;}
.lp-steps li{position:relative; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:20px 18px;}
.lp-steps li:not(:last-child)::after{content:""; position:absolute; right:-12px; top:36px; width:10px; height:10px; border-top:2.5px solid var(--sky, var(--sky)); border-right:2.5px solid var(--sky, var(--sky)); transform:rotate(45deg); z-index:1;}
.lp-step-n{display:inline-flex; width:36px; height:36px; border-radius:50%; background:var(--red); color:#fff; font-weight:900; align-items:center; justify-content:center; margin-bottom:10px;}
.lp-steps h3{font-size:15px; margin:0 0 6px;}
.lp-steps p{font-size:13.5px; color:var(--ink-soft); margin:0; line-height:1.55;}
@media (max-width:1000px){
  .lp-body{grid-template-columns:1fr;}
  .lp-side{position:static;}
  .lp-types, .lp-checks{grid-template-columns:repeat(2, 1fr);}
  .lp-steps{grid-template-columns:repeat(2, 1fr);}
  .lp-steps li::after{display:none;}
}
@media (max-width:640px){
  .lp-hero-row{flex-wrap:wrap;}
  .lp-hero-ic{display:none;}
  .lp-hero-cta{width:100%;}
  .lp-grid2, .lp-grid3, .lp-grades, .lp-types, .lp-checks, .lp-steps{grid-template-columns:1fr;}
  .lp-empty{flex-direction:column; text-align:center;}
  .lp-card{padding:18px;}
  .lp-submit{width:100%;}
}
.admin-nav a .nav-badge{margin-left:auto; min-width:20px; height:20px; padding:0 6px; box-sizing:border-box; border-radius:99px; background:var(--red); color:#fff; font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center;}
.admin-nav a .nav-badge[hidden]{display:none;}

/* Admin → Demandes clients */
.req-stats{display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:16px;}
.req-stat{background:#fff; border-radius:8px; padding:14px 16px; box-shadow:0 1px 3px rgba(0,0,0,.06); border:2px solid transparent; text-decoration:none; color:var(--ink);}
.req-stat.is-on{border-color:var(--blue);}
.req-stat strong{display:block; font-size:22px; font-weight:900;}
.req-stat strong em{font-style:normal; font-size:11px; background:var(--red); color:#fff; padding:2px 7px; border-radius:99px; vertical-align:middle;}
.req-stat span{font-size:12.5px; color:var(--ink-soft);}
.req-filter{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:14px; font-size:13px;}
.req-filter span{color:var(--ink-soft); margin-right:4px;}
.req-filter a{padding:5px 12px; border-radius:99px; border:1px solid var(--border); color:var(--ink); text-decoration:none;}
.req-filter a.is-on{background:var(--blue-deep); color:#fff; border-color:var(--blue-deep);}
.req-list{display:flex; flex-direction:column; gap:8px;}
.req{border:1px solid var(--border); border-radius:8px; background:#fff;}
.req--nouveau{border-left:4px solid var(--red);}
.req summary{display:flex; align-items:center; gap:12px; padding:12px 14px; cursor:pointer; list-style:none;}
.req summary::-webkit-details-marker{display:none;}
.req-type{flex-shrink:0; font-size:11px; font-weight:800; padding:3px 8px; border-radius:4px; text-transform:uppercase; letter-spacing:.02em;}
.req-type--avis{background:#FFF1DB; color:#9A5B00;} .req-type--reconditionne{background:#E3F6EB; color:#176B41;} .req-type--projet{background:#E8F1FB; color:var(--blue);}
.req-title{flex:1; min-width:0;}
.req-title strong{display:block; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.req-title small{color:var(--ink-soft); font-size:12px;}
.req-stars{color:#F5A623; letter-spacing:1px; font-size:14px;} .req-stars span{color:#D5DBE5;}
.req-body{border-top:1px solid var(--border); padding:14px;}
.req-cols{display:grid; grid-template-columns:1fr 240px; gap:16px;}
.req-msg{margin:0 0 10px; font-size:14px; line-height:1.55; background:#F7F9FC; padding:12px; border-radius:6px;}
.req-dl{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:13px; margin:0;}
.req-dl dt{color:var(--ink-soft);} .req-dl dd{margin:0; font-weight:600;}
.req-contact{display:flex; flex-direction:column; gap:6px;}
.req-contact .btn{justify-content:flex-start; white-space:normal; text-align:left;}
.req-form{display:grid; grid-template-columns:1fr 180px auto; gap:12px; align-items:end; margin-top:14px; font-size:12.5px; font-weight:700; color:var(--ink-soft);}
.req-form textarea, .req-form select{width:100%; box-sizing:border-box; margin-top:4px; border:1px solid var(--border); border-radius:6px; padding:8px; font:inherit; font-weight:400; color:var(--ink);}
.req-form-btns{display:flex; gap:10px; align-items:center;}
@media (max-width:900px){ .req-stats{grid-template-columns:1fr 1fr;} .req-cols, .req-form{grid-template-columns:1fr;} }

/* =====================================================================
   Chat service client (bulle flottante à droite)
   ===================================================================== */
.chat{position:fixed; right:18px; bottom:18px; z-index:80; font-family:var(--font-body);}
.chat ~ .wa-float{bottom:86px;}
.chat-launcher{position:relative; display:flex; align-items:center; gap:10px; height:56px; padding:0 20px 0 16px; border:0; border-radius:99px; cursor:pointer;
  background:linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%); color:#fff; font:inherit; font-weight:800; font-size:14.5px;
  box-shadow:0 10px 26px rgba(229,31,49,.38), 0 2px 6px rgba(0,0,0,.12); transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;}
.chat-launcher:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 14px 30px rgba(229,31,49,.45);}
.chat-launcher-ic{width:26px; height:26px; display:flex;}
.chat-launcher-ic svg{width:100%; height:100%;}
.chat-ic-close{display:none;}
.chat.is-open .chat-ic-open{display:none;}
.chat.is-open .chat-ic-close{display:flex;}
.chat.is-open .chat-launcher-label{display:none;}
.chat.is-open .chat-launcher{width:56px; padding:0; justify-content:center; background:var(--blue-deep); box-shadow:0 8px 20px rgba(10,62,117,.35);}
.chat-badge{position:absolute; top:-5px; right:-3px; min-width:22px; height:22px; padding:0 6px; box-sizing:border-box; border-radius:99px; background:var(--blue-deep); color:#fff;
  font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid #fff; animation:chatBadge 1.6s ease infinite;}
.chat-badge[hidden]{display:none;}
@keyframes chatBadge{0%,100%{transform:scale(1);} 50%{transform:scale(1.15);}}
.chat-panel{position:absolute; right:0; bottom:70px; width:370px; max-width:calc(100vw - 24px); height:min(600px, calc(100vh - 110px));
  background:#fff; border-radius:16px; box-shadow:0 24px 60px rgba(10,30,60,.28), 0 4px 12px rgba(10,30,60,.1); display:flex; flex-direction:column; overflow:hidden;
  transform-origin:bottom right; animation:chatIn .32s cubic-bezier(.2,.9,.25,1.05) both;}
.chat-panel[hidden]{display:none;}
@keyframes chatIn{from{opacity:0; transform:translateY(14px) scale(.94);} to{opacity:1; transform:none;}}
.chat-head{display:flex; align-items:center; gap:11px; padding:14px 14px 14px 16px; color:#fff; background:linear-gradient(120deg, var(--blue) 0%, var(--blue-deep) 100%);}
.chat-avatar{flex:0 0 40px; height:40px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.18);}
.chat-avatar img{width:28px; height:28px;}
.chat-head-txt{flex:1; min-width:0;}
.chat-head-txt strong{display:block; font-size:15px;}
.chat-status{display:flex; align-items:center; gap:6px; font-size:12px; opacity:.9;}
.chat-status::before{content:""; width:8px; height:8px; border-radius:50%; background:#F5A623; flex-shrink:0;}
.chat-status.is-online::before{background:#2ED47A; box-shadow:0 0 0 3px rgba(46,212,122,.25);}
.chat-x{width:34px; height:34px; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.chat-x svg{width:18px; height:18px;}
.chat-x:hover{background:rgba(255,255,255,.26);}
.chat-body{flex:1; overflow-y:auto; padding:16px 14px 8px; background:#F4F6F9; display:flex; flex-direction:column; gap:8px; overscroll-behavior:contain;}
.chat-msg{display:flex; flex-direction:column; max-width:85%; animation:chatMsg .25s ease both;}
@keyframes chatMsg{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
.chat-msg--client{align-self:flex-end; align-items:flex-end;}
.chat-msg--agent, .chat-msg--bot{align-self:flex-start;}
.chat-bubble{padding:10px 13px; border-radius:16px; font-size:14px; line-height:1.45; white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere;}
.chat-msg--client .chat-bubble{background:var(--blue); color:#fff; border-bottom-right-radius:4px;}
.chat-msg--agent .chat-bubble{background:#fff; color:#18253A; border-bottom-left-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,.06);}
.chat-msg--bot .chat-bubble{background:#fff; color:#18253A; border-bottom-left-radius:4px; border:1px dashed #C9D5E5;}
.chat-bubble a{color:var(--red); font-weight:700;}
.chat-msg--client .chat-bubble a{color:#fff; text-decoration:underline;}
.chat-meta{font-size:11px; color:#8A97AB; margin:3px 4px 0;}
.chat-who-tag{font-size:11px; font-weight:800; color:var(--blue); margin:0 4px 3px;}
.chat-day{align-self:center; font-size:11px; color:#8A97AB; background:#E8EDF4; padding:3px 10px; border-radius:99px; margin:4px 0;}
.chat-quick{display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 6px;}
.chat-quick-title{width:100%; font-size:11.5px; font-weight:700; color:#8A97AB; text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px;}
.chat-chip{border:1.5px solid #CFDDEE; background:#fff; color:var(--blue); border-radius:99px; padding:7px 12px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; transition:all .15s ease;}
.chat-chip:hover{background:var(--blue); color:#fff; border-color:var(--blue);}
.chat-typing{display:inline-flex; gap:4px; padding:12px 14px;}
.chat-typing i{width:7px; height:7px; border-radius:50%; background:#9AA8BC; animation:chatDot 1s infinite;}
.chat-typing i:nth-child(2){animation-delay:.15s;} .chat-typing i:nth-child(3){animation-delay:.3s;}
@keyframes chatDot{0%,60%,100%{transform:translateY(0); opacity:.5;} 30%{transform:translateY(-4px); opacity:1;}}
.chat-form{border-top:1px solid #E5EAF1; padding:10px 12px 8px; background:#fff;}
.chat-who{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:6px;}
.chat-who[hidden]{display:none;}
.chat-who input{min-width:0; border:1px solid #DDE3EC; border-radius:8px; padding:8px 10px; font:inherit; font-size:13px;}
.chat-input-row{display:flex; gap:8px; align-items:flex-end;}
.chat-input-row textarea{flex:1; resize:none; border:1px solid #DDE3EC; border-radius:12px; padding:10px 12px; font:inherit; font-size:14px; max-height:110px; line-height:1.4;}
.chat-who input:focus, .chat-input-row textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(11,87,164,.12);}
.chat-send{flex:0 0 42px; height:42px; border:0; border-radius:50%; background:var(--red); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .15s ease, background .15s ease;}
.chat-send svg{width:19px; height:19px; margin-left:2px;}
.chat-send:hover{background:var(--red-dark); transform:scale(1.06);}
.chat-send:disabled{opacity:.5; cursor:default; transform:none;}
.chat-error{font-size:12.5px; color:var(--red-dark); margin-top:6px;}
.chat-foot{display:flex; justify-content:center; gap:16px; margin-top:8px; font-size:12px;}
.chat-foot a{display:inline-flex; align-items:center; gap:5px; color:#5B6B84; text-decoration:none; font-weight:600;}
.chat-foot a:hover{color:var(--blue);}
.chat-foot svg{width:14px; height:14px; color:#25D366;}
@media (max-width:560px){
  .chat{right:12px; bottom:14px;}
  .chat ~ .wa-float{bottom:78px;}
  .chat-launcher{width:56px; padding:0; justify-content:center;}
  .chat-launcher-label{display:none;}
  .chat.is-open{left:0; right:0; top:0; bottom:0;}
  .chat.is-open .chat-launcher{display:none;}
  .chat-panel{position:fixed; inset:0; width:auto; max-width:none; height:auto; border-radius:0;}
}
@media (prefers-reduced-motion:reduce){ .chat-panel, .chat-msg, .chat-badge{animation:none;} }

/* Admin → Messages clients */
.ac{display:grid; grid-template-columns:330px 1fr; height:calc(100vh - 150px); min-height:520px; background:#fff; border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,.08); overflow:hidden;}
.ac-list{border-right:1px solid var(--border); display:flex; flex-direction:column; min-height:0;}
.ac-list-head{padding:12px; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:8px;}
.ac-tabs{display:flex; gap:4px; background:#F1F4F8; padding:3px; border-radius:8px;}
.ac-tabs button{flex:1; border:0; background:none; padding:7px; border-radius:6px; font:inherit; font-size:12.5px; font-weight:700; color:var(--ink-soft); cursor:pointer;}
.ac-tabs button.is-on{background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08);}
.ac-list-head input{border:1px solid var(--border); border-radius:6px; padding:8px 10px; font:inherit; font-size:13px;}
.ac-convs{flex:1; overflow-y:auto;}
.ac-empty{padding:24px; text-align:center; color:var(--ink-soft); font-size:13px;}
.ac-item{display:block; width:100%; text-align:left; border:0; border-bottom:1px solid #F1F4F8; background:#fff; padding:12px 14px; cursor:pointer; font:inherit; border-left:3px solid transparent;}
.ac-item:hover{background:#F7F9FC;}
.ac-item.is-on{background:#EEF4FB; border-left-color:var(--blue);}
.ac-item.is-unread strong{color:var(--ink);} .ac-item.is-unread .ac-last{color:var(--ink); font-weight:700;}
.ac-item-top{display:flex; justify-content:space-between; gap:8px; font-size:14px;}
.ac-time{font-size:11.5px; color:var(--ink-soft); flex-shrink:0;}
.ac-item-sub{display:flex; justify-content:space-between; gap:8px; align-items:center; margin-top:3px;}
.ac-last{font-size:12.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ac-unread{flex-shrink:0; min-width:20px; height:20px; border-radius:99px; background:var(--red); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 6px; box-sizing:border-box;}
.ac-contact{display:block; font-size:11.5px; color:var(--blue); margin-top:3px;}
.ac-online{padding:10px 14px; font-size:11.5px; color:var(--ink-soft); border-top:1px solid var(--border); display:flex; gap:7px; align-items:center;}
.ac-online span{width:8px; height:8px; border-radius:50%; background:#2ED47A; box-shadow:0 0 0 3px rgba(46,212,122,.25); flex-shrink:0;}
.ac-thread{display:flex; flex-direction:column; min-height:0; background:#F4F6F9;}
.ac-placeholder{margin:auto; text-align:center; max-width:380px; padding:30px; color:var(--ink-soft);}
.ac-placeholder > span{display:inline-flex; width:64px; height:64px; border-radius:50%; background:#EAF2FB; color:var(--blue); align-items:center; justify-content:center;}
.ac-placeholder > span svg{width:30px; height:30px;}
.ac-placeholder h2{color:var(--ink); font-size:17px; margin:12px 0 6px;}
.ac-placeholder p{font-size:13.5px; line-height:1.55;}
.ac-sound{font-size:13px; display:inline-flex; gap:6px; align-items:center;}
.ac-conv{display:flex; flex-direction:column; min-height:0; height:100%;}
.ac-conv[hidden]{display:none;}
.ac-conv-head{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; background:#fff; border-bottom:1px solid var(--border); flex-wrap:wrap;}
.ac-conv-head strong{display:block; font-size:15px;}
.ac-conv-head small{color:var(--ink-soft); font-size:12px;}
.ac-conv-actions{display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
.ac-msgs{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:8px;}
.ac-msg{max-width:72%; display:flex; flex-direction:column;}
.ac-msg--client{align-self:flex-start;}
.ac-msg--agent{align-self:flex-end; align-items:flex-end;}
.ac-msg--bot{align-self:center; max-width:85%; align-items:center;}
.ac-bubble{padding:10px 13px; border-radius:14px; font-size:14px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere;}
.ac-msg--client .ac-bubble{background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.06); border-bottom-left-radius:4px;}
.ac-msg--agent .ac-bubble{background:var(--blue); color:#fff; border-bottom-right-radius:4px;}
.ac-msg--agent .ac-bubble a{color:#fff;}
.ac-msg--bot .ac-bubble{background:#E8EDF4; color:var(--ink-soft); font-size:12.5px; text-align:center;}
.ac-meta{font-size:11px; color:var(--ink-soft); margin:3px 4px 0;}
.ac-reply{background:#fff; border-top:1px solid var(--border); padding:10px 14px 12px;}
.ac-quick{display:flex; gap:10px; align-items:center; margin-bottom:8px; flex-wrap:wrap;}
.ac-quick select{border:1px solid var(--border); border-radius:6px; padding:6px 8px; font:inherit; font-size:12.5px; max-width:320px;}
.ac-quick small{color:var(--ink-soft); font-size:11.5px;}
.ac-reply-row{display:flex; gap:10px; align-items:stretch;}
.ac-reply-row textarea{flex:1; border:1px solid var(--border); border-radius:8px; padding:10px; font:inherit; font-size:14px; resize:none;}
.ac-err{color:var(--red); font-size:12.5px; margin-top:6px;}
@media (max-width:900px){ .ac{grid-template-columns:1fr; height:auto;} .ac-list{max-height:320px;} .ac-thread{min-height:520px;} }
/* Mobile : les bulles flottantes passent au-dessus des barres d'achat collées en bas */
@media (max-width:560px){
  body:has(.pdp2-buy) .chat{bottom:86px;}
  body:has(.pdp2-buy) .chat ~ .wa-float{bottom:150px;}
  body:has(.pdp2-buy) .chat.is-open{bottom:0;}
}
@media (max-width:560px){
  body:has(.cart2-sum-foot) .chat{bottom:96px;}
  body:has(.cart2-sum-foot) .chat ~ .wa-float{bottom:160px;}
  body:has(.cart2-sum-foot) .chat.is-open{bottom:0;}
}

/* =====================================================================
   Événements commerciaux (Black Friday, Noël…) — Admin → Événements
   Les couleurs sont injectées par <style id="event-theme"> (variables).
   ===================================================================== */
.ev-preview{background:#111; color:#fff; font-size:12.5px; text-align:center; padding:6px 12px;}
.ev-preview a{color:#FFC400; text-decoration:underline; margin:0 4px;}
.ev-bar{background:linear-gradient(90deg, var(--blue-deep), var(--blue), var(--blue-deep)); background-size:200% 100%; color:#fff; font-size:13.5px; position:relative; overflow:hidden; animation:evBarMove 8s linear infinite;}
@keyframes evBarMove{from{background-position:0 0;} to{background-position:200% 0;}}
.ev-bar-row{display:flex; align-items:center; justify-content:center; gap:12px; min-height:38px; padding-top:4px; padding-bottom:4px;}
.ev-bar-emoji{font-size:18px; line-height:1;}
.ev-bar-text{color:#fff; font-weight:800; text-align:center;}
a.ev-bar-text:hover{text-decoration:underline; color:#fff;}
.ev-bar-text span{color:var(--red); display:inline-block; transition:transform .2s ease;}
a.ev-bar-text:hover span{transform:translateX(3px);}
.ev-bar-count{flex-shrink:0; font-variant-numeric:tabular-nums; font-weight:900; background:var(--red); color:var(--on-red, #fff); padding:3px 10px; border-radius:99px; font-size:12.5px;}
.ev-bar-x{position:absolute; right:10px; top:50%; transform:translateY(-50%); width:26px; height:26px; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:18px; line-height:1; cursor:pointer;}
.ev-bar-x:hover{background:rgba(255,255,255,.25);}
.ev-bar.is-hidden{display:none;}
@media (max-width:640px){ .ev-bar-row{justify-content:flex-start; padding-right:40px; font-size:12.5px;} .ev-bar-emoji{display:none;} }

/* En-tête foncé (ex. Black Friday) : fond couleur principale, logo blanc */
html.ev-dark-header .utility{background:var(--blue-deep); color:rgba(255,255,255,.72); border-bottom-color:rgba(255,255,255,.08);}
html.ev-dark-header .utility a{color:rgba(255,255,255,.85);}
html.ev-dark-header .utility .right a:not(:last-child){border-right-color:rgba(255,255,255,.15);}
html.ev-dark-header .utility-left{color:var(--red) !important;}
html.ev-dark-header header.site{background:var(--blue); border-bottom-color:rgba(255,255,255,.08);}
html.ev-dark-header header.site .header-link{color:#fff;}
html.ev-dark-header header.site .header-link:hover, html.ev-dark-header .hd-menu.is-open > .header-link{color:var(--red);}
html.ev-dark-header .search{background:#fff;}
html.ev-dark-header .catnav{background:var(--blue-deep); border-color:rgba(255,255,255,.08);}
html.ev-dark-header .catnav-track a, html.ev-dark-header .catnav .cat-ic{color:rgba(255,255,255,.88);}
html.ev-dark-header .catnav-track a:hover, html.ev-dark-header .catnav-track a.is-active{color:var(--red); border-bottom-color:var(--red);}
html.ev-dark-header .catnav-track a:hover .cat-ic{color:var(--red);}
html.ev-dark-header .catnav-arrow{background:transparent; border-color:rgba(255,255,255,.7); color:#fff;}
html.ev-dark-header .catnav-arrow:hover:not(:disabled){background:rgba(255,255,255,.1);}
html.ev-dark-header .catnav-arrow:disabled{border-color:rgba(255,255,255,.25); color:rgba(255,255,255,.25);}
html.ev-dark-header footer.ft{border-top:3px solid var(--red);}
html.ev-on .chat ~ .wa-float{bottom:86px;}

/* Pop-up de l'événement */
.ev-pop{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:16px;}
.ev-pop[hidden]{display:none;}
.ev-pop-backdrop{position:absolute; inset:0; background:rgba(5,10,20,.62); backdrop-filter:blur(3px); animation:evFade .3s ease both;}
.ev-pop-card{position:relative; width:min(460px, 100%); max-height:calc(100vh - 32px); overflow:auto; background:#fff; border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.45);
  animation:evPopIn .55s cubic-bezier(.2,1.2,.3,1) both;}
@keyframes evFade{from{opacity:0;} to{opacity:1;}}
@keyframes evPopIn{from{opacity:0; transform:translateY(30px) scale(.9);} to{opacity:1; transform:none;}}
.ev-pop.is-closing .ev-pop-card{animation:evPopOut .25s ease both;} .ev-pop.is-closing .ev-pop-backdrop{animation:evFade .25s ease reverse both;}
@keyframes evPopOut{to{opacity:0; transform:translateY(16px) scale(.96);}}
.ev-pop-x{position:absolute; top:10px; right:10px; z-index:2; width:34px; height:34px; border:0; border-radius:50%; background:rgba(0,0,0,.45); color:#fff; font-size:22px; line-height:1; cursor:pointer;}
.ev-pop-x:hover{background:rgba(0,0,0,.7);}
.ev-pop-visual{position:relative; min-height:170px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; overflow:hidden; color:#fff;
  background:radial-gradient(120% 140% at 50% 0%, var(--blue) 0%, var(--blue-deep) 70%);}
.ev-pop-visual::before{content:""; position:absolute; inset:-50%; background:conic-gradient(from 0deg, transparent 0 20deg, rgba(255,255,255,.07) 20deg 40deg, transparent 40deg 60deg, rgba(255,255,255,.07) 60deg 80deg, transparent 80deg 100deg, rgba(255,255,255,.07) 100deg 120deg, transparent 120deg 140deg, rgba(255,255,255,.07) 140deg 160deg, transparent 160deg 180deg, rgba(255,255,255,.07) 180deg 200deg, transparent 200deg 220deg, rgba(255,255,255,.07) 220deg 240deg, transparent 240deg 260deg, rgba(255,255,255,.07) 260deg 280deg, transparent 280deg 300deg, rgba(255,255,255,.07) 300deg 320deg, transparent 320deg 340deg, rgba(255,255,255,.07) 340deg 360deg); animation:evSpin 30s linear infinite;}
@keyframes evSpin{to{transform:rotate(360deg);}}
.ev-pop-visual.has-img{min-height:0; background:#000;}
.ev-pop-visual.has-img::before{display:none;}
.ev-pop-visual img{display:block; width:100%; height:auto; max-height:260px; object-fit:cover;}
.ev-pop-emoji{position:relative; font-size:54px; line-height:1; filter:drop-shadow(0 6px 12px rgba(0,0,0,.35)); animation:evBounce 2.4s ease-in-out infinite;}
@keyframes evBounce{0%,100%{transform:translateY(0) rotate(-4deg);} 50%{transform:translateY(-8px) rotate(4deg);}}
.ev-pop-name{position:relative; font-family:var(--font-display); font-size:30px; font-weight:900; text-transform:uppercase; letter-spacing:.02em; color:var(--red); text-shadow:0 2px 0 rgba(0,0,0,.25); text-align:center; padding:0 20px;}
.ev-pop-body{padding:22px 24px 20px; text-align:center;}
.ev-pop-body h2{font-family:var(--font-display); font-size:22px; font-weight:900; margin:0 0 8px; color:#111; line-height:1.2;}
.ev-pop-body p{font-size:14.5px; line-height:1.55; color:#4B5568; margin:0 0 14px;}
.ev-count{margin:0 0 14px;}
.ev-count-label{display:block; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#8A97AB; margin-bottom:6px;}
.ev-count-blocks{display:flex; justify-content:center; gap:8px;}
.ev-count-blocks span{min-width:60px; background:var(--blue-deep); color:#fff; border-radius:10px; padding:8px 4px 6px; display:flex; flex-direction:column; align-items:center;}
.ev-count-blocks b{font-size:24px; font-weight:900; font-variant-numeric:tabular-nums; line-height:1; color:var(--red);}
.ev-count-blocks small{font-size:10.5px; opacity:.8; margin-top:3px;}
.ev-code{margin:0 0 16px;}
.ev-code > span{display:block; font-size:12px; color:#8A97AB; margin-bottom:5px;}
.ev-code button{display:inline-flex; align-items:center; gap:12px; border:2px dashed var(--red); background:#FFFBEA; padding:9px 16px; border-radius:10px; cursor:pointer; font:inherit;}
.ev-code strong{font-size:20px; letter-spacing:.12em; color:#111;}
.ev-code em{font-style:normal; font-size:12.5px; font-weight:800; color:var(--blue);}
.ev-pop-cta{width:100%; padding:14px 20px; font-size:16px; border-radius:10px; animation:evPulse 2s ease-in-out infinite 1s;}
@keyframes evPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--red) 55%, transparent);} 60%{box-shadow:0 0 0 12px color-mix(in srgb, var(--red) 0%, transparent);}}
.ev-pop-later{margin-top:10px; border:0; background:none; color:#8A97AB; font:inherit; font-size:13px; cursor:pointer; text-decoration:underline;}
.ev-fx{position:fixed; inset:0; pointer-events:none; z-index:150;}
@media (prefers-reduced-motion:reduce){ .ev-bar, .ev-pop-card, .ev-pop-visual::before, .ev-pop-emoji, .ev-pop-cta{animation:none !important;} }

/* Admin → Événements */
.ev-now{display:flex; align-items:center; gap:14px;}
.ev-now > div{flex:1;}
.ev-now strong{display:block; font-size:15px;}
.ev-now small{color:var(--ink-soft); font-size:13px;}
.ev-now-dot{width:12px; height:12px; border-radius:50%; background:#C7CDD8; flex-shrink:0;}
.ev-now-dot.is-on{background:#2ED47A; box-shadow:0 0 0 4px rgba(46,212,122,.25);}
.ev-list{display:flex; flex-direction:column; gap:8px;}
.ev-row{display:flex; align-items:center; gap:14px; padding:12px; border:1px solid var(--border); border-radius:10px;}
.ev-row:target{box-shadow:0 0 0 2px var(--blue);}
.ev-swatch{flex:0 0 52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:24px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);}
.ev-info{flex:1; min-width:0;}
.ev-info strong{display:block; font-size:14.5px;}
.ev-info small{color:var(--ink-soft); font-size:12.5px;}
.ev-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.evf{display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:18px; align-items:start;}
.evf-main{display:flex; flex-direction:column; gap:14px;}
.evf-main .admin-card{margin:0;}
.evf-h{font-size:15px; margin:0 0 12px;}
.evf-hint{display:block; color:var(--ink-soft); font-size:12px; margin-top:8px;}
.evf-presets{display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:8px;}
.evf-preset{position:relative; cursor:pointer; margin:0 !important;}
.evf-preset input{position:absolute; opacity:0;}
.evf-preset-card{display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 6px; border:2px solid var(--border); border-radius:10px; transition:border-color .15s, transform .15s; background:#fff;}
.evf-preset:hover .evf-preset-card{transform:translateY(-2px);}
.evf-preset input:checked + .evf-preset-card{border-color:var(--blue); box-shadow:0 0 0 3px rgba(11,87,164,.15);}
.evf-preset input:focus-visible + .evf-preset-card{outline:2px solid var(--blue); outline-offset:2px;}
.evf-preset-sw{width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);}
.evf-preset-name{font-size:12px; font-weight:700; text-align:center; line-height:1.2;}
.evf-colors{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px;}
.evf-color{display:flex; gap:10px; align-items:center; padding:8px; border:1px solid var(--border); border-radius:8px; margin:0 !important; cursor:pointer; font-weight:400 !important;}
.evf-color input{width:42px; height:42px; border:0; padding:0; background:none; cursor:pointer; flex-shrink:0;}
.evf-color strong{display:block; font-size:13px;}
.evf-color small{display:block; font-size:11.5px; color:var(--ink-soft);}
.evf-actions{display:flex; gap:10px; flex-wrap:wrap;}
.evf-side{position:sticky; top:16px;}
.evf-preview{--p:#0B57A4; --pd:#0A3E75; --a:#E51F31; --on:#fff; --s:#00A0DE; --bg:#F4F6F9; background:var(--bg); border-radius:12px; overflow:hidden; box-shadow:0 8px 24px rgba(10,30,60,.14); position:relative; font-size:11px;}
.evp-label{position:absolute; top:6px; right:8px; font-size:10px; font-weight:800; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.4); padding:2px 6px; border-radius:4px; z-index:2;}
.evp-bar{background:linear-gradient(90deg, var(--pd), var(--p)); color:#fff; font-weight:800; text-align:center; padding:6px 8px; font-size:10.5px;}
.evp-bar[hidden]{display:none;}
.evp-header{display:flex; align-items:center; gap:8px; padding:8px 10px; background:#fff;}
.evp-header img{height:24px;}
.evp-search{flex:1; height:20px; background:#F1F1F2; border-radius:99px; display:flex; justify-content:flex-end;}
.evp-search span{background:var(--a); color:var(--on); border-radius:99px; padding:3px 8px; font-size:9px; font-weight:700;}
.evp-nav{display:flex; gap:10px; padding:5px 10px; background:#fff; border-top:1px solid #eee; color:#444;}
.evf-preview.is-dark .evp-header{background:var(--p);}
.evf-preview.is-dark .evp-nav{background:var(--pd); color:#fff; border-color:transparent;}
.evp-page{padding:10px;}
.evp-band{display:flex; justify-content:space-between; align-items:center; color:#fff; padding:8px 10px; border-radius:6px; background:linear-gradient(115deg, var(--pd), var(--p)); box-shadow:inset 0 2px 0 var(--a);}
.evp-band span{background:var(--a); color:var(--on); padding:1px 6px; border-radius:4px; font-weight:800;}
.evp-cards{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin:8px 0;}
.evp-cards i{height:46px; background:#fff; border-radius:6px; border-bottom:3px solid var(--s);}
.evp-btn{background:var(--a); color:var(--on); text-align:center; font-weight:800; padding:7px; border-radius:6px;}
.evp-pop{margin:4px 10px 12px; background:#fff; border-radius:10px; overflow:hidden; text-align:center; box-shadow:0 6px 16px rgba(0,0,0,.18); display:flex; flex-direction:column; gap:4px; padding-bottom:10px;}
.evp-pop-vis{height:56px; background:radial-gradient(120% 140% at 50% 0%, var(--p), var(--pd)); display:flex; align-items:center; justify-content:center; font-size:26px;}
.evp-pop strong{font-size:12.5px; padding:4px 10px 0; color:#111;}
.evp-pop small{font-size:10.5px; color:#666; padding:0 10px;}
.evp-pop em{font-style:normal; font-weight:900; letter-spacing:.1em; border:1.5px dashed var(--a); margin:2px auto; padding:2px 8px; border-radius:6px; color:#111;}
.evp-pop em[hidden]{display:none;}
.evp-pop-btn{background:var(--a); color:var(--on); font-weight:800; margin:4px 10px 0; padding:6px; border-radius:6px;}
@media (max-width:1100px){ .evf{grid-template-columns:1fr;} .evf-side{position:static; max-width:360px;} }

/* Admin → Page en construction */
.cs-status{display:flex; align-items:center; gap:16px; border-left:5px solid #2ED47A;}
.cs-status.is-on{border-left-color:#F5A623; background:#FFFAF0;}
.cs-status-ic{font-size:34px; line-height:1;}
.cs-status-txt{flex:1;}
.cs-status-txt strong{display:block; font-size:16px;}
.cs-status-txt small{color:var(--ink-soft); font-size:13px; line-height:1.5;}
.cs-big{padding:14px 22px; font-size:14.5px;}
.cs-grid{display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:16px; align-items:start; margin-top:16px;}
.cs-grid .admin-card{margin:0;}
.cs-grid .form-field label + label{margin-top:6px;}
.cs-link{display:flex; gap:6px;}
.cs-link input{flex:1; min-width:0; border:1px solid var(--border); border-radius:6px; padding:8px; font:inherit; font-size:12.5px; background:#F7F9FC;}
@media (max-width:1000px){ .cs-grid{grid-template-columns:1fr;} .cs-status{flex-wrap:wrap;} }

/* Compteur du panier toujours visible, y compris sur téléphone */
.cart-link .cart-count:not([hidden]){display:flex !important;}

/* =====================================================================
   Suivre ma commande (suivi-commande.php)
   ===================================================================== */
.trk{padding:18px 0 40px; max-width:980px;}
.trk-crumbs{color:var(--ink-soft); margin-bottom:10px;}
.trk-crumbs a{color:var(--blue);}
.trk-card{background:var(--surface); border-radius:10px; box-shadow:0 1px 3px rgba(10,20,40,.08); padding:22px; margin-bottom:16px;}
.trk-search{max-width:520px; margin:10px auto 16px;}
.trk-search h1{font-size:24px; margin:0 0 6px;}
.trk-intro{color:var(--ink-soft); font-size:14.5px; line-height:1.55; margin:0 0 16px;}
.trk-form .lp-field input{text-transform:none;}
.trk-form #n{text-transform:uppercase;}
.trk-hint{font-size:12.5px; color:var(--ink-soft); margin:12px 0 0;}
.trk-last{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; padding:12px 14px; border:1.5px dashed var(--blue); border-radius:10px; text-decoration:none; color:var(--ink); background:#F2F7FD;}
.trk-last span{font-size:12.5px; color:var(--ink-soft); width:100%;}
.trk-last strong{font-size:15px;}
.trk-last em{margin-left:auto; font-style:normal; font-weight:800; color:var(--blue); font-size:13px;}
.trk-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:18px;}
.trk-label{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); font-weight:700;}
.trk-head h1{font-size:24px; margin:2px 0 4px; letter-spacing:.01em;}
.trk-head small{color:var(--ink-soft); font-size:13px;}
.trk-status{display:inline-block; font-style:normal; font-size:12.5px; font-weight:800; padding:6px 12px; border-radius:99px; background:#EEF2F7; color:var(--ink);}
.trk-status--confirmee, .trk-status--en_preparation{background:#E8F1FB; color:var(--blue);}
.trk-status--expediee{background:#FFF1DB; color:#9A5B00;}
.trk-status--livree{background:#E3F6EB; color:#176B41;}
.trk-status--annulee{background:#FDECEE; color:#B3121F;}
.trk-steps{list-style:none; margin:0 0 10px; padding:0; display:flex; position:relative;}
.trk-steps li{flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; z-index:1;}
.trk-steps li::before{content:""; position:absolute; top:17px; left:-50%; width:100%; height:4px; background:#E1E6EE; z-index:-1;}
.trk-steps li:first-child::before{display:none;}
.trk-steps li.is-done::before, .trk-steps li.is-current::before{background:#1E9E5A;}
.trk-dot{width:38px; height:38px; border-radius:50%; background:#E1E6EE; color:#7A889E; font-weight:800; display:flex; align-items:center; justify-content:center; border:3px solid var(--surface); box-shadow:0 0 0 1px #E1E6EE;}
.trk-dot svg{width:18px; height:18px;}
.is-done .trk-dot{background:#1E9E5A; color:#fff; box-shadow:none;}
.is-current .trk-dot{background:var(--blue); color:#fff; box-shadow:0 0 0 5px rgba(11,87,164,.18); animation:trkPulse 2s ease-in-out infinite;}
@keyframes trkPulse{50%{box-shadow:0 0 0 9px rgba(11,87,164,.06);}}
.trk-step-label{font-size:12.5px; font-weight:700; margin-top:8px; color:var(--ink-soft);}
.is-done .trk-step-label, .is-current .trk-step-label{color:var(--ink);}
.trk-next{background:#F2F7FD; border-radius:8px; padding:12px 14px; font-size:14px; margin:14px 0 20px;}
.trk-grid{display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:24px;}
.trk-grid h2{font-size:15px; margin:0 0 10px;}
.trk-items{list-style:none; margin:0; padding:0;}
.trk-items li{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border);}
.trk-thumb{flex:0 0 52px; height:52px; border-radius:8px; background:#F6F8FB; display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--blue);}
.trk-thumb img{width:100%; height:100%; object-fit:contain;}
.trk-thumb svg{width:26px; height:26px;}
.trk-item-name{flex:1; min-width:0; font-size:14px;}
.trk-item-name small{display:block; color:var(--ink-soft); font-size:12.5px;}
.trk-totals{display:grid; grid-template-columns:1fr auto; gap:6px 12px; margin:12px 0 0; font-size:14px;}
.trk-totals dt{color:var(--ink-soft);} .trk-totals dd{margin:0; text-align:right;}
.trk-totals .trk-total{font-weight:900; font-size:16px; color:var(--ink);}
.trk-totals dd.trk-total{color:var(--red);}
.trk-addr{font-size:14px; line-height:1.55; margin:0 0 16px;}
.trk-pay{display:inline-block; margin-top:4px; font-size:12.5px; font-weight:800; padding:3px 9px; border-radius:99px; background:#FFF1DB; color:#9A5B00;}
.trk-pay--payee{background:#E3F6EB; color:#176B41;}
.trk-pay--echouee{background:#FDECEE; color:#B3121F;}
.trk-help{margin-top:16px; padding:14px; background:#F7F9FC; border-radius:10px; display:flex; flex-direction:column; gap:8px;}
.trk-help strong{font-size:14px;}
.trk-other{text-align:center; font-size:14px; color:var(--ink-soft);}
.trk-other a{color:var(--blue); font-weight:700;}
.trk-mine{list-style:none; margin:0; padding:0;}
.trk-mine a{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 0; border-bottom:1px solid var(--border); color:var(--ink); text-decoration:none;}
.trk-mine span{color:var(--ink-soft); font-size:13px; flex:1;}
@media (max-width:700px){
  .trk-card{padding:16px;}
  .trk-grid{grid-template-columns:1fr;}
  .trk-dot{width:30px; height:30px; font-size:12px;}
  .trk-steps li::before{top:13px;}
  .trk-step-label{font-size:10.5px;}
}
.cart-ic-wrap{position:relative;}
@media (max-width:860px){
  .cart-link .cart-count{top:-7px; right:-10px; min-width:15px; height:15px; font-size:10px; line-height:15px; border-width:1.5px; padding:0 2px;}
}

/* =====================================================================
   Menu mobile (☰) — tiroir latéral façon Jumia
   ===================================================================== */
.mm-burger{display:none;}
@media (max-width:860px){
  .mm-burger{display:flex; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; padding:0 8px; margin-right:-4px; border:0; background:none; cursor:pointer; border-radius:8px; flex-shrink:0; order:-1;}
  .mm-burger span{display:block; height:2.4px; border-radius:2px; background:var(--ink); transition:transform .3s ease, opacity .2s ease;}
  .mm-burger:active{background:rgba(0,0,0,.05);}
  html.ev-dark-header .mm-burger span{background:#fff;}
  .header-row{gap:10px !important;}
  .header-row .brand{margin-right:auto;}
}
.mm{position:fixed; inset:0; z-index:300;}
.mm[hidden]{display:none;}
.mm-backdrop{position:absolute; inset:0; background:rgba(8,16,30,.55); opacity:0; transition:opacity .3s ease;}
.mm.is-open .mm-backdrop{opacity:1;}
.mm-drawer{position:absolute; top:0; left:0; bottom:0; width:min(340px, 86vw); background:var(--surface, #fff); box-shadow:12px 0 40px rgba(0,0,0,.25);
  transform:translateX(-102%); transition:transform .32s cubic-bezier(.2,.9,.25,1); overflow:hidden; display:flex;}
.mm.is-open .mm-drawer{transform:none;}
.mm-screen{position:absolute; inset:0; display:flex; flex-direction:column; background:var(--surface, #fff); transform:translateX(100%); transition:transform .3s cubic-bezier(.2,.9,.25,1); visibility:hidden;}
.mm-screen.is-on{transform:none; visibility:visible;}
.mm-screen.is-behind{transform:translateX(-30%); visibility:visible;}
.mm-top{display:flex; align-items:center; gap:10px; padding:12px 12px 12px 16px; border-bottom:1px solid var(--border); flex-shrink:0;}
.mm-logo{margin-right:auto; line-height:0;}
.mm-logo img{height:34px; width:auto;}
.mm-top--sub{background:var(--blue); color:#fff; border-bottom:0; padding-left:8px;}
.mm-top--sub strong{flex:1; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mm-x, .mm-back{width:38px; height:38px; border:0; border-radius:50%; background:#F1F4F8; color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
.mm-top--sub .mm-x, .mm-top--sub .mm-back{background:rgba(255,255,255,.15); color:#fff;}
.mm-x svg, .mm-back svg{width:20px; height:20px;}
.mm-scroll{flex:1; overflow-y:auto; overscroll-behavior:contain; padding-bottom:30px; -webkit-overflow-scrolling:touch;}
.mm-hello{display:flex; align-items:center; gap:12px; padding:16px; background:linear-gradient(120deg, var(--blue-deep), var(--blue)); color:#fff;}
.mm-avatar{flex:0 0 44px; height:44px; border-radius:50%; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:18px;}
.mm-avatar svg{width:22px; height:22px;}
.mm-hello strong{display:block; font-size:15.5px;}
.mm-hello small{font-size:12.5px; opacity:.85;}
.mm-auth{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:14px 16px 4px;}
.mm-auth .btn{padding:11px 8px; font-size:13.5px; justify-content:center;}
.mm-title{padding:18px 16px 6px; font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);}
.mm-list{list-style:none; margin:0; padding:0;}
.mm-list a, .mm-list button{display:flex; align-items:center; gap:12px; width:100%; min-height:50px; padding:8px 14px 8px 16px; border:0; background:none; font:inherit; font-size:14.5px; font-weight:600; color:var(--ink); text-align:left; text-decoration:none; cursor:pointer; border-bottom:1px solid #F1F4F8;}
.mm-list a:active, .mm-list button:active{background:#F2F7FD;}
.mm-ic{flex:0 0 34px; height:34px; border-radius:9px; background:#F1F5FA; color:var(--blue); display:flex; align-items:center; justify-content:center;}
.mm-ic svg{width:19px; height:19px;}
.mm-ic--cat{background:#FDF0F1; color:var(--red);}
.mm-ic--hot{background:var(--red); color:#fff;}
.mm-ic--wa{background:#E7F9EE; color:#25D366;}
.mm-chev{width:16px; height:16px; margin-left:auto; color:#A3AEC0; flex-shrink:0;}
.mm-count{margin-left:6px; min-width:20px; height:20px; padding:0 6px; border-radius:99px; background:var(--red); color:#fff; font-size:11.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center;}
.mm-list--sub a{font-weight:500; padding-left:20px; min-height:46px;}
.mm-all{display:flex; align-items:center; gap:8px; margin:14px 16px 4px; padding:12px 14px; border-radius:10px; background:#FDF0F1; color:var(--red); font-weight:800; font-size:14px; text-decoration:none;}
.mm-logout{display:block; margin:20px 16px 0; padding:12px; text-align:center; border:1.5px solid var(--border); border-radius:8px; color:var(--red); font-weight:700; text-decoration:none;}
html.mm-lock, html.mm-lock body{overflow:hidden;}
@media (min-width:861px){ .mm{display:none !important;} }
@media (prefers-reduced-motion:reduce){ .mm-drawer, .mm-screen, .mm-backdrop{transition:none;} }

/* =======================================================================
   FILET DE SÉCURITÉ « contenu jamais invisible »
   Si le script d'animation ne démarre pas (cache, erreur JS, bloqueur…),
   html.reveal-all est posé au bout de 2,5 s : tout s'affiche, sans animation.
   L'administration n'utilise plus du tout l'effet d'apparition.
   ======================================================================= */
html.reveal-all .reveal, html.reveal-all [data-reveal],
html.reveal-all .stagger, html.reveal-all .rise,
html.reveal-all footer.ft .ft-cols > div, html.reveal-all footer.ft .ft-top-grid > *{
  opacity:1 !important; transform:none !important; animation:none !important;}
@media print{ .reveal, [data-reveal], .stagger, .rise{opacity:1 !important; transform:none !important;} }
.admin-body .reveal{opacity:1 !important; transform:none !important;}
.pager{display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center; margin-top:18px;}
.pager a, .pager span{min-width:36px; padding:7px 11px; border:1.5px solid var(--border); border-radius:6px; text-align:center; font-size:13.5px; font-weight:700; color:var(--ink); text-decoration:none;}
.pager a:hover{border-color:var(--blue); color:var(--blue);}
.pager .is-current{background:var(--blue); border-color:var(--blue); color:#fff;}
.pager .gap{border:0; min-width:auto;}
.ptabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px;}
.ptabs a{padding:7px 13px; border-radius:999px; background:var(--bg-soft, #f2f5fa); color:var(--ink); font-weight:700; font-size:13px; text-decoration:none;}
.ptabs a.is-on{background:var(--blue); color:#fff;}
.ptabs a.is-warn:not(.is-on){background:#fff3e0; color:#a35200;}
.ptabs b{opacity:.75; font-weight:800; margin-left:4px;}