/* ===================================================================
   AZZKARA — thème (design system + header)
   Porté du prototype preview/. Noir profond · accent rouge · Cinzel/Cormorant/Jost.
=================================================================== */

/* ---------- Polices (vendorisées : assets/fonts) ---------- */
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/jost-latin-300-normal.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jost-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jost-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/jost-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/cinzel-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/cinzel-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/cinzel-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/cinzel-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('../fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2');}

/* ---------- Tokens ---------- */
:root{
  --ink:#0c0c0e; --ink-2:#141417; --ink-3:#1c1c20; --ink-4:#25252b;
  --bone:#f1ede4; --silver:#c9c9cf; --muted:#8d8d95; --muted-2:#66666e;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18);
  --red:#b3171d; --gold:#9a8047; --green-ok:#85d996;
  --font-display:'Cinzel'; --font-ed:'Cormorant Garamond'; --font-ui:'Jost';
  --wrap:1280px;
  --rounded: 6px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-ui),system-ui,sans-serif;
  background:var(--ink); color:#ececef;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; color:inherit;}
img{max-width:100%; display:block;}
::selection{background:var(--red); color:#fff;}

.wrap{width:min(var(--wrap),100% - 80px); margin-inline:auto;}
/* Mobile : la marge latérale de 40px/côté est trop large sur petit écran → on la réduit. */
@media (max-width:600px){ .wrap{width:min(var(--wrap),100% - 40px);} }
@media (max-width:420px){ .wrap{width:min(var(--wrap),100% - 28px);} }
.display{font-family:var(--font-display),serif; font-weight:600; letter-spacing:.012em; line-height:1.08;}
.editorial{font-family:var(--font-ed),serif; font-weight:400;}
.eyebrow{font-family:var(--font-ui); text-transform:uppercase; letter-spacing:.24em; font-size:11px; font-weight:500; color:var(--muted);}

/* =====================================================================
   GLOBAL - CONFIGURATION
===================================================================== */
.azz_radius {border-radius: var(--rounded);}
.azz_radius_top {border-top-left-radius: var(--rounded); border-top-right-radius: var(--rounded);}
.azz_radius_bottom {border-bottom-left-radius: var(--rounded); border-bottom-right-radius: var(--rounded);}
.azz_radius_left {border-top-left-radius: var(--rounded); border-bottom-left-radius: var(--rounded);}
.azz_radius_right {border-top-right-radius: var(--rounded); border-bottom-right-radius: var(--rounded);}
.azz_radius_top_left {border-top-left-radius: var(--rounded);}
.azz_radius_top_right {border-top-right-radius: var(--rounded);}
.azz_radius_bottom_left {border-bottom-left-radius: var(--rounded);}
.azz_radius_bottom_right {border-bottom-right-radius: var(--rounded);}

/* =====================================================================
   BANDEAU ANNONCE
===================================================================== */
.announce{
  background:#000; color:#cdcdd2; height:38px;
  display:flex; align-items:center; justify-content:center; gap:18px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; border-bottom:1px solid var(--line);
}
.announce__a{background:none; border:0; color:#777; display:inline-flex; align-items:center; padding:0;}
.announce__a:hover{color:#fff;}
.announce__t{display:grid; justify-items:center; min-width:0;}                       /* messages empilés dans une seule cellule (crossfade) */
.announce__msg{grid-area:1 / 1; opacity:0; transition:opacity .55s ease; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
.announce__msg.is-on{opacity:1;}

/* =====================================================================
   EN-TÊTE
===================================================================== */
.hdr{
  position:sticky; top:0; z-index:80;
  background:rgba(9,9,11,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); transition:border-color .3s ease, box-shadow .3s ease;
}
/* Header frosted EN PERMANENCE : le blur reste actif au scroll (on NE ré-opacifie PAS le fond,
   sinon le contenu flouté derrière disparaît). Au scroll on ajoute juste un ancrage discret. */
.hdr.is-scrolled{border-bottom-color:var(--line-2); box-shadow:0 14px 34px -18px rgba(0,0,0,.65);}
.hdr__bar{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:18px; padding:14px clamp(18px,4vw,44px); position:relative;
}
.hdr__nav{display:flex; align-items:center; gap:26px; margin:0; padding:0; list-style:none;}
.hdr__nav--l{justify-content:flex-start;}
.navlink{
  background:none; border:0; padding:6px 0; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:#cfcfd4; position:relative; font-weight:500; white-space:nowrap;
  display:inline-block; text-decoration:none;
}
.navlink::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--red); transition:width .22s;}
.navlink:hover{color:#fff;}
.navlink:hover::after{width:100%;}

.hdr__logo{grid-column:2; display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:0; color:#fff; padding:0; text-decoration:none;}
.hdr__logo .hdr__word, .hdr__logo .hdr__mark{color:#fff;}
.hdr__mark{display:none;}            /* monogramme : mobile */
.hdr__word{display:inline-flex;}      /* lettrage : desktop */
.hdr__word svg, .hdr__mark svg{display:block;}

.hdr__icons{grid-column:3; display:flex; align-items:center; justify-content:flex-end; gap:6px;}
.iconbtn{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; color:#cfcfd4; position:relative; border-radius:50%; text-decoration:none;
}
.iconbtn:hover{color:#fff; background:rgba(255,255,255,.06);}
.iconbtn__dot{
  position:absolute; top:4px; right:2px; background:var(--red); color:#fff;
  font-size:9px; font-weight:700; min-width:15px; height:15px; border-radius:var(--rounded);
  display:flex; align-items:center; justify-content:center; padding:0 3px;
}
.hdr__burger{display:none; background:none; border:0; color:#fff; width:38px; height:38px; align-items:center; justify-content:center; padding:0;}
/* Cluster gauche mobile (burger + loupe). Masqué en desktop → le menu garde la colonne 1. */
.hdr__leftm{display:none;}

/* =====================================================================
   DRAWER MOBILE
===================================================================== */
.drawer{position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.55); animation:azzFade .2s;}
@keyframes azzFade{from{opacity:0;}}
.drawer__panel{
  position:absolute; top:0; left:0; bottom:0; width:min(86%,360px);
  background:var(--ink-2); border-right:1px solid var(--line); display:flex; flex-direction:column;
  animation:azzSlideIn .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes azzSlideIn{from{transform:translateX(-100%);}}
.drawer__top{display:flex; align-items:center; justify-content:space-between; padding:18px; border-bottom:1px solid var(--line);}
.drawer__top svg{color:#fff;}
.drawer__nav{display:flex; flex-direction:column; padding:8px 0; flex:1;}
.drawer__nav a{
  display:flex; align-items:center; justify-content:space-between; background:none; border:0;
  padding:16px 20px; color:#e7e7ea; font-size:14px; letter-spacing:.12em; text-transform:uppercase;
  border-bottom:1px solid var(--line); text-decoration:none;
}
.drawer__nav a:hover{background:rgba(255,255,255,.04); color:#fff;}
.drawer__foot{display:flex; flex-direction:column; gap:4px; padding:14px 20px; border-top:1px solid var(--line);}
.drawer__foot a{display:flex; align-items:center; gap:12px; background:none; border:0; color:#b6b6bc; padding:10px 0; font-size:13px; text-decoration:none;}
.drawer__foot a:hover{color:#fff;}
body.azz-noscroll{overflow:hidden;}

/* =====================================================================
   CATALOGUE — boutons / badges (partagés cartes & pages)
===================================================================== */
.btn{
  font-family:var(--font-ui); font-size:12.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.16em;
  padding:14px 26px; border:0; display:inline-flex; align-items:center; gap:10px;
  transition:.18s ease; white-space:nowrap; text-decoration:none;
}
.btn--full{width:100%; justify-content:center;}
.btn--primary{background:var(--red); color:#fff;}
.btn--primary:hover{background:#fff; color:#000;}
.btn--line{background:transparent; color:#fff; box-shadow:inset 0 0 0 1px var(--line-2);}
.btn--line:hover{background:#fff; color:#000; box-shadow:inset 0 0 0 1px #fff;}
.btn--ghost{background:transparent; color:var(--silver); box-shadow:inset 0 0 0 1px var(--line);}
.btn--ghost:hover{color:#fff; box-shadow:inset 0 0 0 1px var(--red);}

.badge{
  position:absolute; top:12px; left:12px; z-index:3;
  font-family:var(--font-ui); font-size:10px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; padding:5px 9px;
}
.badge--red{background:var(--red); color:#fff;}
.badge--gold{background:var(--gold); color:#15130d;}
.badge--ink{background:#0e0e10; color:#fff; box-shadow:inset 0 0 0 1px var(--line-2);}

/* ---------- Fil d'ariane ---------- */
.crumb{display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.crumb a{color:var(--muted); text-decoration:none;}
.crumb a:hover{color:#fff;}
.crumb b{color:#fff; font-weight:500;}
.crumb i{color:var(--muted-2); font-style:normal;}

/* =====================================================================
   CATÉGORIE — en-tête
===================================================================== */
.cat__hero{position:relative; min-height:200px; display:flex; overflow:hidden; background:linear-gradient(165deg,#16161a,#0c0c0e);}
.cat__hero--plain{min-height:0; background:none; border-bottom:1px solid var(--line);}
.cat__heroimg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.cat__hverl{position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.55));}
.cat__htxt{position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; gap:12px; padding:48px 0;}
.cat__hero--plain .cat__htxt{padding:34px 0 26px;}
.cat__title{font-family:var(--font-display),serif; font-weight:600; font-size:clamp(30px,4vw,44px); color:#fff; margin:0; line-height:1.05;}
.cat__sub{color:var(--silver);}

.cat__desc{max-width:760px; margin:28px auto 0; color:var(--silver); font-size:17px; line-height:1.6; text-align:center;}

/* ---------- Corps : sidebar + grille ---------- */
.cat__body{display:grid; grid-template-columns:248px 1fr; gap:40px; padding:40px 0 80px; align-items:start;}
.cat__body--full{grid-template-columns:1fr;}
.cat__main{min-width:0;}

.filters{position:sticky; top:90px;}
.filters__top{display:none; align-items:center; justify-content:space-between; margin-bottom:6px;}
.filters__x{background:none; border:0; color:#fff; padding:4px; cursor:pointer;}
.fgroup{border-bottom:1px solid var(--line); padding:6px 0;}
.fgroup__h{width:100%; display:flex; align-items:center; justify-content:space-between; padding:14px 0; color:#fff; background:none; border:0; cursor:pointer; font:inherit;}
.fgroup__chev{color:var(--muted); transition:transform .2s ease;}
.fgroup__h[aria-expanded="false"] .fgroup__chev{transform:rotate(-90deg);}
.fgroup__l{list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:10px;}
.fgroup__l[hidden]{display:none;}
.fgroup__l--nav a{display:flex; color:#b6b6bc; font-size:13px; letter-spacing:.04em; text-decoration:none;}
.fgroup__l--nav a:hover{color:#fff;}

/* ---------- Facettes (ps_facetedsearch, habillage Azzkara) ---------- */
.filters__clear{margin-bottom:6px;}
.filters__clearbtn{background:none; border:0; color:var(--red); font-family:var(--font-ui); font-size:11px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; padding:4px 0;}
.filters__clearbtn:hover{text-decoration:underline;}
.fcheck{display:flex; align-items:center; gap:10px; cursor:pointer;}
.fcheck input[type="checkbox"],.fcheck input[type="radio"]{accent-color:var(--red); width:15px; height:15px; flex:0 0 auto; cursor:pointer; margin:0;}
.fcheck__swatch{width:15px; height:15px; border:1px solid var(--line-2); background-size:cover; flex:0 0 auto;}
.fcheck__lab{display:flex; align-items:center; justify-content:space-between; gap:8px; flex:1; min-width:0; color:#b6b6bc; font-size:13px; letter-spacing:.02em; text-decoration:none;}
.fcheck__lab:hover{color:#fff;}
.fcheck.is-active .fcheck__lab,.fcheck__lab.is-active{color:#fff;}
.fcheck__n{color:var(--muted-2); font-size:11px;}

/* Puces de filtres actifs */
.active-filters{margin-bottom:18px;}
.active-filters--empty{display:none;}
.active-filters__lab{display:block; color:var(--muted); font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:10px;}
.active-filters__list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px;}
.active-filters__chip{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; background:var(--ink-2); border:1px solid var(--line); color:#e6e6ea; font-size:12px;}
.active-filters__x{display:inline-flex; color:var(--muted); text-decoration:none;}
.active-filters__x:hover{color:var(--red);}

/* Kicker rouge au-dessus du titre de catégorie (remplace le fil d'ariane). */
.cat__kicker{color:var(--red); margin:0 0 10px;}

/* ---------- Barre de tri ---------- */
.cat__bar{display:flex; align-items:center; gap:16px; margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--line);}
.cat__count{color:var(--muted); font-size:13px;}
.cat__filtbtn{display:none; align-items:center; gap:9px; background:none; border:1px solid var(--line); color:#fff; padding:9px 16px; font-family:var(--font-ui); font-size:11px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer;}
.cat__filtbtn:hover{border-color:var(--line-2);}
.sortsel{margin-left:auto; color:var(--muted); font-size:12px; display:flex; align-items:center; gap:8px; letter-spacing:.06em;}
.sortsel__select{background:var(--ink-2); color:#fff; border:1px solid var(--line); padding:9px 12px; font-family:var(--font-ui); font-size:12px;}
.sortsel__select:focus{outline:none; border-color:var(--line-2);}

.cat__empty{color:var(--silver); font-size:18px; padding:40px 0;}

/* =====================================================================
   GRILLE + CARTE PRODUIT
===================================================================== */
.pgrid{display:grid; gap:clamp(14px,2vw,26px);}
.pgrid--3{grid-template-columns:repeat(3,1fr);}
.pgrid--4{grid-template-columns:repeat(4,1fr);}

.card{display:flex; flex-direction:column; min-width:0;}
.card__media{position:relative; display:block; width:100%; overflow:hidden; background:var(--ink); border:1px solid var(--line);}
.card__img{width:100%; aspect-ratio:1/1; height:auto; object-fit:contain; background:var(--ink); transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.card__media:hover .card__img{transform:scale(1.04);}
.card__img--empty{display:block; aspect-ratio:1/1; background:linear-gradient(135deg,#cfcfd5 0%,#aeaeb6 42%,#c6c6cd 60%,#9b9ba3 100%); box-shadow:inset 0 0 0 1px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.45);}
.card__body{padding:14px 2px 4px;}
.card__name{font-family:var(--font-display),serif; font-size:16px; font-weight:600; margin:0; line-height:1.2;}
.card__name a{color:#f0f0f3; text-decoration:none;}
.card__name a:hover{color:#fff;}
.card__matiere{color:var(--muted); font-size:12px; margin:4px 0 0; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.card__foot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:11px; min-height:18px;}
.card__rate{display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:11px;}
.card__rate:empty{display:none;}
.card__price{font-family:var(--font-ui); font-weight:600; font-size:14px; color:#fff; display:inline-flex; gap:8px; align-items:baseline; margin-left:auto;}
.card__price s{color:var(--muted-2); font-weight:400; font-size:12px;}

/* =====================================================================
   PAGINATION
===================================================================== */
.pagination{display:flex; flex-direction:column; align-items:center; gap:16px; margin-top:48px;}
.pagination__info{color:var(--muted); font-size:12px; letter-spacing:.1em; text-transform:uppercase;}
.pagination__list{display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0;}
.pagination__item{display:flex;}
.pagination__item--spacer{color:var(--muted-2); padding:0 4px; align-items:flex-end;}
.pagination__link{
  display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 10px;
  color:#cfcfd4; font-size:13px; font-weight:500; border:1px solid var(--line); text-decoration:none; transition:.16s ease;
}
.pagination__link:hover{color:#fff; border-color:var(--line-2);}
.pagination__item.is-current .pagination__link{background:var(--red); border-color:var(--red); color:#fff;}
.pagination__link--disabled{opacity:.35; pointer-events:none;}

/* =====================================================================
   RESPONSIVE
===================================================================== */
@media (max-width:1024px){
  .pgrid--3,.pgrid--4{grid-template-columns:repeat(3,1fr);}
  .cat__body{grid-template-columns:208px 1fr; gap:28px;}
}
@media (max-width:860px){
  .hdr__nav{display:none;}
  .hdr__burger{display:inline-flex;}
  .hdr__leftm{display:flex; align-items:center; gap:2px;}
  .hdr__word{display:none;}
  .hdr__mark{display:inline-flex;}
  .hide-m{display:none;}
  .announce{font-size:9.5px; letter-spacing:.12em; gap:8px;}
  .announce__t{padding:0 4px;}

  /* catalogue */
  .cat__body{grid-template-columns:1fr; padding:28px 0 56px;}
  .pgrid--3,.pgrid--4{grid-template-columns:repeat(2,1fr); gap:12px;}
  .cat__htxt{padding:36px 0;}
  .card__name{font-size:15px;}
  .sortsel__lab{display:none;}
  .sortsel{margin-left:auto;}

  /* filtres en overlay plein écran (déclenché par « Filtrer ») */
  .cat__filtbtn{display:inline-flex;}
  .filters{position:fixed; inset:0; z-index:310; background:var(--ink); padding:18px 18px 40px; overflow-y:auto; display:none;}
  .filters.is-open{display:block; animation:azzFade .2s;}
  .filters__top{display:flex;}
}
@media (max-width:420px){
  .pgrid--3,.pgrid--4{grid-template-columns:1fr 1fr; gap:10px;}
  .pagination__link{min-width:34px; height:34px; padding:0 7px; font-size:12px;}
}
/* =====================================================================
   FICHE PRODUIT (PDP)
===================================================================== */
.pdp__top{padding:26px 0 0;}
.pdp__grid{
  display:grid; grid-template-columns:minmax(0,500px) minmax(0,1fr);
  gap:clamp(28px,4vw,64px); align-items:start; padding:24px 0 64px;
}

/* -- Galerie : photo principale + colonne de miniatures à DROITE (proto) -- */
.pdp__gallery{position:sticky; top:88px; min-width:0;}
/* Conteneur d'images : par défaut une seule image -> photo seule pleine largeur.
   Avec plusieurs images (--multi) -> grille [photo | colonne miniatures]. */
.js-images-container{display:block;}
.js-images-container--multi{
  display:grid; grid-template-columns:1fr 78px; gap:14px; align-items:start;
}
.pdp__main{position:relative; background:#000000; overflow:hidden;}
/* Photo principale à HAUTEUR FIXE façon proto, fond clair, contain (pas d'étirement). */
.pdp__mainimg{display:block; width:100%; height:min(54vh,460px); object-fit:contain; background:#000000;}
.pdp__mainimg--empty{height:min(54vh,460px); background:linear-gradient(165deg,#16161a,#0c0c0e);}
.pdp__zoom{
  position:absolute; bottom:14px; right:14px; width:42px; height:42px; border:0; cursor:pointer;
  background:rgba(12,12,14,.72); color:#fff; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px); transition:.18s;
}
.pdp__zoom:hover{background:var(--red);}
/* Colonne de miniatures verticale, à droite de la photo principale. */
.pdp__thumbs{display:flex; flex-direction:column; gap:10px; list-style:none; margin:0; padding:0;}
.pdp__thumb-li{flex:0 0 auto;}
.pdp__th{
  width:78px; height:78px; padding:0; border:1px solid var(--line); background:#000000; cursor:pointer; overflow:hidden;
  transition:border-color .16s; display:block;
}
.pdp__th img{width:100%; height:100%; object-fit:contain; display:block; background:#000000;}
.pdp__th:hover{border-color:var(--line-2);}
.pdp__th.on{border-color:var(--red); box-shadow:0 0 0 1px var(--red);}

/* -- Colonne info -- */
.pdp__info{display:flex; flex-direction:column; align-items:flex-start;}
.pdp__name{font-size:clamp(28px,3.4vw,40px); margin:0; color:#fff;}
.pdp__matiere{color:var(--muted); font-size:13px; letter-spacing:.04em; margin:8px 0 0;}
.pdp__rate{display:inline-flex; align-items:center; gap:8px; margin:12px 0 0; color:var(--muted); font-size:12px;}
.pdp__rate i{font-style:normal;}
.pdp__stars{color:var(--gold); letter-spacing:2px; font-size:14px;}

/* -- Prix -- */
.pdp__price{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 14px; margin:18px 0 0;}
.pdp__price .regular-price{color:var(--muted-2); font-size:16px; font-weight:400;}
.pdp__price .current-price{display:inline-flex; align-items:baseline; gap:10px;}
.pdp__price .current-price-value{font-family:var(--font-ui); font-weight:600; font-size:28px; color:#fff; line-height:1;}
.pdp__price .discount{
  background:var(--red); color:#fff; font-family:var(--font-ui); font-weight:600; font-size:11px;
  letter-spacing:.06em; padding:4px 8px; border-radius:var(--rounded);
}
.pdp__pay{flex-basis:100%; color:var(--muted); font-size:12px; letter-spacing:.03em;}
/* Paiement en plusieurs fois — affichage maison (pastilles 2×/3×/4×). On masque le message
   Stripe natif (fiche + panier ; on garde le vrai paiement fractionné au tunnel). */
#payment-method-messaging-element{display:none !important;}
.pdp__split{flex-basis:100%; display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; margin:10px 0 0;}
.pdp__split-pills{display:inline-flex; gap:6px;}
.pdp__split-pill{font-family:var(--font-ui); font-size:12px; font-weight:600; line-height:1; color:#fff; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--rounded); padding:6px 10px; cursor:pointer; transition:background .15s, border-color .15s;}
.pdp__split-pill:hover{border-color:var(--line-2);}
.pdp__split-pill.is-active{background:var(--red); border-color:var(--red);}
.pdp__split-amount{font-family:var(--font-ui); font-size:12.5px; color:var(--silver);}
.pdp__taxlbl{flex-basis:100%; color:var(--muted-2); font-size:11px; letter-spacing:.04em;}
.pdp__taxlbl .delivery-information{display:block; margin-top:4px;}

.pdp__descwrap{width:100%; margin:20px 0 0;}
.pdp__desc{color:var(--silver); font-size:15px; line-height:1.7; margin:0;}
.js-readmore .pdp__desc{position:relative; max-height:9.5em; overflow:hidden;}
.js-readmore .pdp__desc::after{content:''; position:absolute; left:0; right:0; bottom:0; height:2.6em; background:linear-gradient(to bottom, rgba(12,12,14,0), var(--ink)); pointer-events:none;}
.js-readmore.is-open .pdp__desc{max-height:none;}
.js-readmore.is-open .pdp__desc::after{display:none;}
.pdp__readmore{margin-top:12px; background:none; border:0; padding:0; color:var(--red); font-family:var(--font-ui); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; cursor:pointer;}
.pdp__readmore:hover{color:#fff;}
.pdp__readmore[hidden]{display:none;}
.pdp__desc p{margin:0 0 .6em;}

/* -- Options / variantes -- */
.product-actions{width:100%;}
.product-variants{width:100%;}
.pdp__opt{margin:26px 0 0;}
.pdp__optlab{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 12px; margin:0 0 12px;}
.pdp__optlab .pdp__guide{margin-left:auto;}
.pdp__optlab .control-label{color:#cfcfd4;}
.pdp__guide{background:none; border:0; color:var(--red); font-family:var(--font-ui); font-size:11px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; padding:0; text-decoration:none;}
.pdp__guide:hover{text-decoration:underline;}
.pdp__sizes{display:flex; flex-wrap:wrap; gap:10px;}
.sizechip{
  position:relative; display:inline-flex; align-items:center; justify-content:center; min-width:64px; padding:11px 16px;
  border:1px solid var(--line-2); color:#dcdce0; font-family:var(--font-ui); font-size:13px; letter-spacing:.03em; cursor:pointer;
  transition:.15s; user-select:none;
}
.sizechip span{pointer-events:none;}
.sizechip:hover{border-color:#fff;}
.sizechip.on{background:#fff; color:#0c0c0e; border-color:#fff;}
.pdp__select{background:var(--ink-2); color:#fff; border:1px solid var(--line-2); padding:11px 14px; font-family:var(--font-ui); font-size:14px; min-width:200px;}
.pdp__colors{display:flex; gap:10px; list-style:none; margin:0; padding:0;}
.colorchip{display:block; width:30px; height:30px; border-radius:50%; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); background-size:cover; background-position:center;}
.colorchip.on{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--red);}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}

/* -- Achat : stepper + bouton -- */
.pdp__buy-wrap{width:100%; margin:28px 0 0;}
.pdp__buy{display:flex; align-items:stretch; gap:12px;}
.stepper{display:inline-flex; align-items:center; border:1px solid var(--line-2); flex:0 0 auto;}
.stepper button{width:46px; background:none; border:0; color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0;}
.stepper button:hover{background:rgba(255,255,255,.07);}
.stepper input{width:46px; text-align:center; background:none; border:0; color:#fff; font-family:var(--font-ui); font-size:15px; font-weight:600; -moz-appearance:textfield;}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.stepper input:focus{outline:none;}
.pdp__add{flex:1 1 auto; min-height:50px; gap:10px;}
.pdp__add .pdp__add-total{font-weight:600;}
.pdp__avail{display:flex; align-items:center; gap:8px; margin:14px 0 0; color:var(--muted); font-size:12px;}
.pdp__avail:empty{display:none; margin:0;}
.pdp__avail-dot{width:8px; height:8px; border-radius:50%; flex:0 0 auto;}
.pdp__avail-dot--ok{background:#3fae6b;}
.pdp__avail-dot--warn{background:var(--gold);}
.pdp__avail-dot--out{background:var(--red);}
.pdp__minq{color:var(--muted-2); font-size:12px; margin:8px 0 0;}
.pdp__minq:empty{display:none; margin:0;}

.pdp__wish{
  display:inline-flex; align-items:center; gap:9px; margin:18px 0 0; background:none; border:0; cursor:pointer;
  color:var(--muted); font-family:var(--font-ui); font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:0;
}
.pdp__wish .pdp__wishicon{transition:fill .2s ease, transform .2s ease;}
.pdp__wish:hover{color:#fff;}
.pdp__wish:hover .pdp__wishicon{transform:scale(1.12);}
.pdp__wish.is-on{color:var(--red);}
.pdp__wish.is-on .pdp__wishicon{fill:var(--red);}

/* -- Bandeau confiance -- */
.pdp__trust{display:flex; flex-wrap:wrap; gap:10px 22px; margin:28px 0 0; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); width:100%;}
.pdp__trust span{display:inline-flex; align-items:center; gap:8px; color:var(--silver); font-size:12px; letter-spacing:.02em;}
.pdp__trust svg{color:var(--muted); flex:0 0 auto;}

/* -- Accordéon -- */
.acc{width:100%; margin:18px 0 0;}
.acc__i{border-bottom:1px solid var(--line);}
.acc__h{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; background:none; border:0; cursor:pointer; padding:18px 0; color:#fff; text-align:left;}
.acc__chev{transition:transform .2s; color:var(--muted); flex:0 0 auto;}
.acc__h[aria-expanded="false"] .acc__chev{transform:rotate(-90deg);}
.acc__b{padding:0 0 20px; color:var(--silver); font-size:14px; line-height:1.7;}
.acc__b p{margin:0 0 .7em;}
.acc__b .editorial{color:var(--silver);}

/* -- Détails (dans l'accordéon) -- */
.pdp__details{margin-top:14px; display:flex; flex-direction:column; gap:8px;}
.pdp__detrow{display:flex; gap:10px; font-size:13px; color:var(--silver);}
.pdp__detrow .label{color:var(--muted); min-width:110px;}
.pdp__detrow a{color:#fff;}
.pdp__sheet{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:8px 0 0; font-size:13px;}
.pdp__sheet dt{color:var(--muted);}
.pdp__sheet dd{margin:0; color:var(--silver);}

/* -- Remises sur quantité -- */
.pdp__discounts{width:100%; border-collapse:collapse; margin-top:8px; font-size:13px;}
.pdp__discounts th,.pdp__discounts td{border:1px solid var(--line); padding:6px 10px; text-align:left; color:var(--silver);}
.pdp__discounts th{color:var(--muted); font-weight:500;}
.pdp__discounts-title{margin:18px 0 8px;}

/* -- Vous aimerez aussi -- */
.related{margin-top:8px; padding:clamp(46px,6vw,80px) 0; background:var(--ink-2); border-top:1px solid var(--line);}
.related__t{font-size:clamp(24px,3vw,34px); margin:0 0 36px;}
.sec--bone{background:var(--ink-2);}
.center{text-align:center;}

/* -- Lightbox zoom -- */
.pdp-modal{position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; padding:24px;}
.pdp-modal[hidden]{display:none;}
.pdp-modal__overlay{position:absolute; inset:0; background:rgba(8,8,10,.92); animation:azzFade .2s;}
.pdp-modal__dialog{position:relative; z-index:1; max-width:min(900px,94vw); max-height:92vh; display:flex; flex-direction:column; align-items:center; gap:14px;}
.pdp-modal__x{position:absolute; top:-8px; right:-8px; width:44px; height:44px; border:0; background:rgba(255,255,255,.08); color:#fff; cursor:pointer; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;}
.pdp-modal__x:hover{background:var(--red);}
.pdp-modal__fig{margin:0; max-height:78vh; overflow:hidden;}
.pdp-modal__img{display:block; max-width:100%; max-height:78vh; object-fit:contain; background:#000000;}
.pdp-modal__thumbs{display:flex; gap:8px; list-style:none; margin:0; padding:0; flex-wrap:wrap; justify-content:center;}
.pdp-modal__th{width:60px; height:60px; padding:0; border:1px solid rgba(255,255,255,.18); background:#000000; cursor:pointer; overflow:hidden;}
.pdp-modal__th img{width:100%; height:100%; object-fit:contain;}
.pdp-modal__th:hover{border-color:#fff;}

/* -- Modal de confirmation panier (maison) -- */
.cartconfirm{position:fixed; inset:0; z-index:380; display:flex; align-items:center; justify-content:center; padding:20px; overflow:auto;}
.cartconfirm[hidden]{display:none;}
.cartconfirm__overlay{position:absolute; inset:0; background:rgba(8,8,10,.6); animation:azzFade .2s;}
.cartconfirm__box{position:relative; z-index:1; width:min(440px,100%); background:var(--ink-2); border:1px solid var(--line); padding:26px; animation:azzSlideDown .26s cubic-bezier(.2,.8,.2,1);}
@keyframes azzSlideDown{from{transform:translateY(-14px); opacity:0;}}
.cartconfirm__x{position:absolute; top:12px; right:12px; width:34px; height:34px; border:0; background:none; color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center;}
.cartconfirm__x:hover{color:#fff;}
.cartconfirm__ok{display:flex; align-items:center; gap:9px; color:#fff; font-family:var(--font-display),serif; font-size:18px; margin:0 0 4px;}
.cartconfirm__ok svg{color:#3fae6b;}
.cartconfirm__sum{display:flex; align-items:baseline; justify-content:space-between; gap:12px; color:var(--silver); font-size:13px; margin:14px 0 20px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.cartconfirm__sum b{color:#fff; font-family:var(--font-ui); font-size:16px;}
.cartconfirm__act{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px;}
.cartconfirm__act .btn{min-height:46px; justify-content:center; width:100%; min-width:0; padding:13px 10px; font-size:11px; letter-spacing:.08em;}

/* -- PDP responsive -- */
@media (max-width:980px){
  .pdp__grid{grid-template-columns:minmax(0,1fr); gap:30px; padding:18px 0 48px;}
  .pdp__gallery{position:static;}
  .pdp__info{align-items:stretch;}
  .pdp__wish{align-self:flex-start;}
  .pdp__desc{max-width:none;}
  /* Mobile : galerie au-dessus de l'info, miniatures en bande sous la photo. */
  .pdp__mainimg,.pdp__mainimg--empty{height:min(58vh,440px);}
  .js-images-container--multi{display:flex; flex-direction:column; gap:12px; max-width:100%;}
  .js-images-container,.pdp__main,.pdp__thumbs{min-width:0; max-width:100%;}
  .pdp__thumbs{flex-direction:row; flex-wrap:nowrap; overflow-x:auto; gap:8px; padding-bottom:4px;}
}
@media (max-width:600px){
  /* Quantité à GAUCHE du bouton (côte à côte) ; prix retiré du bouton (déjà affiché au-dessus). */
  .pdp__buy{flex-wrap:nowrap;}
  .stepper button,.stepper input{width:40px;}
  .pdp__add{gap:8px;}
  .pdp__add .pdp__add-total{display:none;}
  .pdp__trust{gap:10px 16px;}
  .cartconfirm__act{grid-template-columns:1fr;}
  .pdp__th{width:64px; height:64px;}
}

/* =====================================================================
   ESPACE CLIENT — notifications, formulaires partagés
===================================================================== */
.acct-top{padding:26px 0 0;}

/* Notifications (erreurs/succès PS, dans le style Azzkara) */
.notif{margin:0 0 18px; padding:13px 16px; font-size:13.5px; line-height:1.5; border:1px solid var(--line);}
.notif ul{margin:0; padding:0 0 0 18px;}
.notif li{margin:2px 0;}
.notif--error{background:rgba(179,23,29,.10); border-color:rgba(179,23,29,.45); color:#f1b9bb;}
.notif--warning{background:rgba(154,128,71,.10); border-color:rgba(154,128,71,.45); color:#e3cf9f;}
.notif--success{background:rgba(63,174,107,.10); border-color:rgba(63,174,107,.40); color:#a7e0bf;}
.notif--info{background:var(--ink-2); color:var(--silver);}

/* Champs (proto .field) */
.field{display:flex; flex-direction:column; gap:7px; margin:0 0 16px;}
.field > span{font-family:var(--font-ui); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}
.field > span i{text-transform:none; letter-spacing:0; color:var(--muted-2); font-style:italic; font-size:12px;}
.field input,.field textarea,.field select{
  background:var(--ink); color:#ececef; border:1px solid var(--line-2);
  padding:13px 14px; font-family:var(--font-ui); font-size:14.5px; width:100%;
  transition:border-color .16s, background .16s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2);}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:#fff; background:var(--ink-2);}
.field--error input,.field--error textarea,.field--error select{border-color:var(--red);}
.field__err{color:#e98a8e; font-style:normal; font-size:12px; letter-spacing:.01em;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}

/* Cases à cocher (proto .chk) */
.chk{display:flex; align-items:flex-start; gap:10px; margin:4px 0 16px; cursor:pointer; color:var(--silver); font-size:13.5px; line-height:1.5;}
.chk input[type="checkbox"]{accent-color:var(--red); width:16px; height:16px; margin:2px 0 0; flex:0 0 auto; cursor:pointer;}

/* Civilité (proto .civ) */
.civ{display:flex; gap:8px; margin:0 0 16px; flex-wrap:wrap;}
.civ__b{position:relative; display:inline-flex; align-items:center; padding:10px 16px; border:1px solid var(--line-2); background:transparent; color:#dcdce0; font-family:var(--font-ui); font-size:12.5px; letter-spacing:.04em; cursor:pointer; transition:.15s;}
.civ__b:hover{border-color:#fff;}
.civ__b.on{background:#fff; color:#0c0c0e; border-color:#fff;}
.civ__b span{pointer-events:none;}
.civ--error{outline:1px solid rgba(179,23,29,.4); outline-offset:4px;}

/* Liens (mot de passe oublié, connectez-vous…) */
.authlink{align-self:flex-start; background:none; border:0; padding:0; color:var(--muted); font-family:var(--font-ui); font-size:12px; letter-spacing:.06em; text-decoration:none; margin:-4px 0 4px; transition:color .15s;}
.authlink:hover{color:#fff; text-decoration:underline;}
.authlink--inline{display:inline; color:var(--red); margin:0;}
.authlink--inline:hover{color:#fff;}
.authform .btn{margin-top:6px;}

/* =====================================================================
   PAGE CONNEXION / INSCRIPTION
===================================================================== */
.acc-auth{padding:30px 0 80px;}
.acc-auth--solo{max-width:560px;}
.acc-auth__head{text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; margin:24px 0 44px;}
.acc-auth__mark{color:#fff; display:inline-flex;}
.acc-auth__head h1{font-size:clamp(30px,4.4vw,46px); color:#fff; margin:0;}
.acc-auth__head .editorial{color:var(--silver); font-size:18px; max-width:48ch; margin:0;}

.acc-auth__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,34px); align-items:start; max-width:980px; margin-inline:auto;}
.authcard{background:var(--ink-2); border:1px solid var(--line); padding:clamp(26px,3vw,38px);}
.authcard--reg{background:linear-gradient(180deg,var(--ink-3),var(--ink-2));}
.authcard--solo{background:var(--ink-2);}
.authcard__eye{display:block; color:var(--red); margin:0 0 8px;}
.authcard h2{font-size:24px; color:#fff; margin:0 0 22px;}
.authcard__trust{display:flex; align-items:center; gap:8px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted-2); letter-spacing:.1em; line-height:1.5;}
.authcard__trust svg{color:var(--gold); flex:0 0 auto;}
.authcard__legal{color:var(--muted-2); font-size:11.5px; line-height:1.6; margin:14px 0 0; letter-spacing:.01em;}

/* =====================================================================
   ESPACE CLIENT CONNECTÉ — coquille (hello + sidebar + panneau)
===================================================================== */
.acct{padding:26px 0 80px;}
.acct__hello{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:18px 0 26px; border-bottom:1px solid var(--line); margin-bottom:30px;}
.acct__hello .eyebrow{color:var(--red); display:block; margin-bottom:8px;}
.acct__hello h1{font-size:clamp(28px,3.6vw,42px); color:#fff; margin:0;}
.acct__email{color:var(--muted); font-size:14px; margin:8px 0 0;}
.acct__logout{background:none; border:1px solid var(--line-2); color:#dcdce0; padding:10px 18px; font-family:var(--font-ui); font-size:11px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; transition:.15s;}
.acct__logout:hover{background:#fff; color:#0c0c0e; border-color:#fff;}

.acct__grid{display:grid; grid-template-columns:262px 1fr; gap:40px; align-items:start;}

/* Sidebar de navigation */
.acct__nav{position:sticky; top:90px;}
.acct__navtoggle{display:none;}
.acct__navlist{display:flex; flex-direction:column; border:1px solid var(--line); background:var(--ink-2);}
.acct__navlist a{display:flex; align-items:center; gap:13px; padding:15px 18px; color:#cfcfd4; font-family:var(--font-ui); font-size:13px; letter-spacing:.04em; text-decoration:none; border-bottom:1px solid var(--line); transition:.15s; position:relative;}
.acct__navlist a:last-child{border-bottom:0;}
.acct__navlist a:hover{background:rgba(255,255,255,.04); color:#fff;}
.acct__navlist a.on{color:#fff; background:rgba(255,255,255,.04);}
.acct__navlist a.on::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--red);}
.acct__navic{display:inline-flex; color:var(--muted);}
.acct__navlist a:hover .acct__navic,.acct__navlist a.on .acct__navic{color:var(--red);}
.acct__nav-out{color:var(--muted)!important; font-size:12px!important; letter-spacing:.1em!important; text-transform:uppercase;}
.acct__nav-out:hover{color:#fff!important;}

/* Panneau de contenu */
.acct__panel{min-width:0;}
.acct__cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:28px;}
.statc{display:flex; flex-direction:column; gap:6px; padding:24px 22px; background:var(--ink-2); border:1px solid var(--line); text-decoration:none; transition:.15s; cursor:pointer;}
a.statc:hover{border-color:var(--line-2); background:var(--ink-3);}
.statc__n{font-size:38px; color:#fff; line-height:1;}
.statc__l{font-family:var(--font-ui); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}

.acct__block{background:var(--ink-2); border:1px solid var(--line); padding:24px clamp(18px,2.4vw,28px); margin:0 0 18px;}
.acct__bh{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 18px;}
.acct__bh h3{font-size:19px; color:#fff; margin:0;}
.acct__more{background:none; border:0; padding:0; color:var(--red); font-family:var(--font-ui); font-size:12px; letter-spacing:.06em; text-decoration:none; transition:color .15s;}
.acct__more:hover{color:#fff;}
.acct__empty{display:flex; flex-direction:column; align-items:flex-start; gap:14px; color:var(--silver); font-size:15px; padding:8px 0;}
.acct__empty p{margin:0;}

/* Ligne de commande (proto OrderRow) */
.orders{display:flex; flex-direction:column; gap:12px;}
.orow{display:grid; grid-template-columns:1fr auto auto auto; align-items:center; gap:16px; padding:16px 18px; background:var(--ink); border:1px solid var(--line);}
.orow__main{display:flex; flex-direction:column; gap:4px; min-width:0;}
.orow__id{color:#fff; font-family:var(--font-ui); font-weight:600; font-size:14px;}
.orow__meta{color:var(--muted); font-size:12.5px;}
.ostatus{display:inline-flex; align-items:center; font-family:var(--font-ui); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; padding:6px 11px; color:#fff; background:var(--ost,#8d8d95); white-space:nowrap;}
.orow__total{color:#fff; font-family:var(--font-ui); font-weight:600; font-size:15px; white-space:nowrap;}
.orow__btn{background:none; border:1px solid var(--line-2); color:#dcdce0; padding:9px 16px; font-family:var(--font-ui); font-size:11px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; transition:.15s; white-space:nowrap;}
.orow__btn:hover{background:#fff; color:#0c0c0e; border-color:#fff;}

/* Carte adresse (proto AddressCard) */
.addrs{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px;}
.addr{position:relative; background:var(--ink); border:1px solid var(--line); padding:22px;}
.addr__tag{position:absolute; top:16px; right:16px; color:var(--gold);}
.addr__name{display:block; color:#fff; font-family:var(--font-display),serif; font-size:17px; margin:0 0 10px; padding-right:80px;}
.addr__lines{color:var(--silver); font-size:14px; line-height:1.6; margin:0 0 8px;}
.addr__tel{color:var(--muted); font-size:13px; margin:0 0 16px;}
.addr__acts{display:flex; gap:18px; padding-top:14px; border-top:1px solid var(--line);}
.addr__acts a{background:none; border:0; padding:0; color:var(--muted); font-family:var(--font-ui); font-size:12px; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:color .15s;}
.addr__acts a:hover{color:#fff;}
.addr__del:hover{color:var(--red)!important;}

/* Formulaire d'adresse natif (champs génériques .ffield) */
.addrform__grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 18px;}
.addrform__foot{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; padding-top:20px; border-top:1px solid var(--line);}
.ffield{display:flex; flex-direction:column; gap:7px; margin:0;}
.ffield--checkbox,.ffield--textarea,.ffield--radio-buttons{grid-column:1 / -1;}
.ffield__lab{font-family:var(--font-ui); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}
.ffield__lab.is-required::after{content:" *"; color:var(--red);}
.ffield__input,.ffield__select{background:var(--ink); color:#ececef; border:1px solid var(--line-2); padding:13px 14px; font-family:var(--font-ui); font-size:14.5px; width:100%; transition:border-color .16s, background .16s;}
.ffield__input::placeholder{color:var(--muted-2);}
.ffield__input:focus,.ffield__select:focus{outline:none; border-color:#fff; background:var(--ink-2);}
.ffield__textarea{min-height:90px; resize:vertical;}
.ffield__hint{color:var(--muted-2); font-size:12px;}
.ffield__errs{list-style:none; margin:2px 0 0; padding:0; color:#e98a8e; font-size:12px;}
.ffield--error .ffield__input,.ffield--error .ffield__select{border-color:var(--red);}
.ffield__civ{margin:0;}

/* Profil : largeur de lecture confortable */
.profileform{max-width:560px;}

/* =====================================================================
   ESPACE CLIENT — responsive
===================================================================== */
@media (max-width:1024px){
  .acct__grid{grid-template-columns:220px 1fr; gap:28px;}
}
@media (max-width:860px){
  .acc-auth__grid{grid-template-columns:1fr; max-width:560px;}
  .acct__grid{grid-template-columns:1fr; gap:18px;}
  /* Sidebar repliable en mobile */
  .acct__nav{position:static;}
  .acct__navtoggle{display:flex; align-items:center; gap:12px; width:100%; padding:14px 18px; background:var(--ink-2); border:1px solid var(--line); color:#fff; font-family:var(--font-ui); font-size:13px; letter-spacing:.06em; cursor:pointer;}
  .acct__navchev{margin-left:auto; transition:transform .2s;}
  .acct__navtoggle[aria-expanded="true"] .acct__navchev{transform:rotate(180deg);}
  .acct__navlist{display:none; border-top:0;}
  .acct__navlist.is-open{display:flex;}
  .addrform__grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .field-row{grid-template-columns:1fr;}
  .acct__cards{grid-template-columns:1fr;}
  .acct__hello{align-items:flex-start;}
  .orow{grid-template-columns:1fr auto; row-gap:10px;}
  .orow__main{grid-column:1 / -1;}
  .ostatus{grid-column:1;}
  .orow__total{grid-column:2; text-align:right; justify-self:end;}
  .orow__btn{grid-column:1 / -1; text-align:center; justify-content:center;}
}

/* =====================================================================
   PANIER (checkout/cart) — porté du proto CartPage
===================================================================== */
.cart{padding:clamp(28px,4vw,52px) 0 clamp(56px,7vw,90px);}
.cart__h{font-size:clamp(28px,4vw,40px); margin:0 0 clamp(26px,3.4vw,40px);}
.cart__h span{color:var(--muted); font-weight:400;}
.cart__grid{display:grid; grid-template-columns:1fr 380px; gap:clamp(28px,4vw,56px); align-items:start;}

/* ---- Lignes ---- */
.cart__lines{display:flex; flex-direction:column;}
.line{display:flex; gap:20px; padding:22px 0; border-bottom:1px solid var(--line); align-items:flex-start;}
.line:first-child{padding-top:0;}
.line__media{flex:0 0 auto; display:block;}
.line__img{width:104px; height:104px; object-fit:contain; background:#000000; display:block;}
.line__img--ph{background:linear-gradient(165deg,#16161a,#0c0c0e); box-shadow:inset 0 0 0 1px var(--line);}
.line__mid{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:8px;}
.line__top{display:flex; align-items:flex-start; justify-content:space-between; gap:14px;}
.line__name{font-family:var(--font-display),serif; font-weight:500; font-size:16px; line-height:1.25; color:#fff; transition:color .16s;}
.line__name:hover{color:var(--silver);}
.line__rm{flex:0 0 auto; background:none; border:0; color:var(--muted-2); display:inline-flex; align-items:center; justify-content:center; padding:2px; cursor:pointer; transition:color .16s;}
.line__rm:hover{color:var(--red);}
.line__meta{margin:0; color:var(--muted); font-size:12.5px; letter-spacing:.04em;}
.line__meta:empty{display:none;}
.line__bot{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:4px;}
.line__price{font-family:var(--font-ui); font-size:16px; font-weight:600; color:#fff; white-space:nowrap;}

/* Stepper compact (lignes panier) — boutons en <a> ou <button> */
.stepper--sm{border-color:var(--line-2);}
.stepper--sm > a,.stepper--sm > button{width:36px; height:36px; background:none; border:0; color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; transition:background .15s;}
.stepper--sm > a:hover,.stepper--sm > button:hover{background:rgba(255,255,255,.07);}
.stepper--sm .line__qty{width:40px; height:36px; text-align:center; background:none; border:0; border-left:1px solid var(--line); border-right:1px solid var(--line); color:#fff; font-family:var(--font-ui); font-size:14px; font-weight:600;}
.stepper--sm .line__qty:focus{outline:none;}
.stepper--sm.is-busy{opacity:.5; pointer-events:none;}

/* ---- Récapitulatif ---- */
.summary{background:var(--ink-2); border:1px solid var(--line); padding:clamp(22px,2.4vw,30px); position:sticky; top:96px;}
.summary__t{margin:0 0 18px; display:block;}
.summary__subtotals{display:flex; flex-direction:column; gap:12px;}
.summary__row{display:flex; align-items:baseline; justify-content:space-between; gap:14px; font-size:14px; color:var(--silver);}
.summary__row span:last-child{color:#fff;}
.summary__row--discount span:last-child{color:#a7e0bf;}
.summary__ship.is-free{color:#a7e0bf;}
.summary__hint{font-size:12.5px; color:var(--gold); letter-spacing:.02em; line-height:1.5; margin-top:2px;}
.summary__hint[hidden]{display:none;}

/* Code promo */
.summary__voucher{margin:18px 0 0;}
.summary__voucher:empty{display:none;}
.voucher__list{list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:8px;}
.voucher__item{display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--ink); border:1px solid var(--line); font-size:13px;}
.voucher__code{display:inline-flex; align-items:center; gap:7px; color:#fff; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.voucher__code svg{color:var(--gold); flex:0 0 auto;}
.voucher__val{color:#a7e0bf; font-weight:600; white-space:nowrap;}
.voucher__rm{background:none; border:0; color:var(--muted-2); cursor:pointer; display:inline-flex; padding:2px; flex:0 0 auto; transition:color .15s;}
.voucher__rm:hover{color:var(--red);}
.summary__promo{display:flex; gap:0; margin:0;}
.summary__promo input{flex:1 1 auto; min-width:0; background:var(--ink); color:#ececef; border:1px solid var(--line-2); border-right:0; padding:12px 14px; font-family:var(--font-ui); font-size:13.5px; letter-spacing:.04em;}
.summary__promo input::placeholder{color:var(--muted-2);}
.summary__promo input:focus{outline:none; border-color:#fff;}
.summary__promo button{flex:0 0 auto; background:var(--ink-4); color:#fff; border:1px solid var(--line-2); padding:0 20px; font-family:var(--font-ui); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:.16s;}
.summary__promo button:hover{background:#fff; color:#000; border-color:#fff;}
.summary__promo-err{color:#e98a8e; font-size:12.5px; margin:8px 0 0; line-height:1.45;}
.summary__promo-err[hidden]{display:none;}

/* Total + actions */
.summary__total{display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin:20px 0 0; padding:18px 0 0; border-top:1px solid var(--line); font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--silver);}
.summary__total b{font-family:var(--font-ui); font-size:22px; font-weight:600; color:#fff; letter-spacing:0; text-transform:none;}
.summary__actions{margin:20px 0 0;}
.summary__actions .btn{margin:0 0 14px;}
.summary__actions .btn.is-disabled{background:var(--ink-4); color:var(--muted); cursor:not-allowed; pointer-events:none;}
.summary__minwarn{color:#e3cf9f; font-size:12.5px; line-height:1.5; margin:0 0 12px;}
.summary__cont{display:block; width:100%; text-align:center; background:none; border:0; color:var(--muted); font-family:var(--font-ui); font-size:12px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; padding:4px; transition:color .16s;}
.summary__cont:hover{color:#fff;}
.summary__pay{margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--line); text-align:center; font-size:10px; line-height:1.6; letter-spacing:.18em; color:var(--muted-2);}

/* ---- Panier vide ---- */
.cart__empty{text-align:center; padding:clamp(40px,7vw,90px) 20px; display:flex; flex-direction:column; align-items:center; gap:0;}
.cart__empty-mark{color:var(--muted-2); margin:0 0 26px;}
.cart__empty-h{font-size:clamp(26px,3.4vw,36px); margin:0 0 12px; color:#fff;}
.cart__empty-sub{font-size:clamp(17px,2vw,20px); color:var(--silver); margin:0 0 30px;}

/* ---- Panier responsive ---- */
@media (max-width:920px){
  .cart__grid{grid-template-columns:1fr; gap:34px;}
  .summary{position:static;}
}
@media (max-width:560px){
  .line{gap:14px; padding:18px 0;}
  .line__img{width:84px; height:84px;}
  .line__name{font-size:15px;}
  .line__bot{flex-wrap:wrap; gap:12px;}
}

/* =====================================================================
   TUNNEL DE COMMANDE (checkout/checkout) — porté du proto CheckoutPage
   Étapes natives PS9 restylées ; Colissimo (point relais) & Stripe intacts.
===================================================================== */
.checkout{padding:clamp(14px,1.6vw,22px) 0 clamp(56px,7vw,80px);}
.checkout__grid{display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(30px,4vw,56px); align-items:start;}
.checkout__back{display:inline-block; background:none; border:0; color:var(--muted); font-family:var(--font-ui); font-size:13px; text-decoration:none; padding:0 0 22px; transition:color .16s;}
.checkout__back::before{content:"\2190\00a0";}
.checkout__back:hover{color:#fff;}

/* ---- Récap (colonne droite) ---- */
.checkout__sum{background:var(--ink-2); border:1px solid var(--line); padding:clamp(22px,2.4vw,28px); position:sticky; top:90px;}
.checkout__sum > h3{margin:0 0 18px; color:#fff; display:block;}
.checkout__items{display:flex; flex-direction:column; gap:14px; margin:0 0 20px; padding:0 0 20px; border-bottom:1px solid var(--line);}
.ci{display:flex; align-items:center; gap:12px;}
.ci__media{position:relative; flex:0 0 auto; display:block;}
.ci__img{width:56px; height:56px; object-fit:contain; background:#f4f4f6; display:block;}
.ci__img--ph{background:linear-gradient(165deg,#16161a,#0c0c0e); box-shadow:inset 0 0 0 1px var(--line);}
.ci__q{position:absolute; top:-7px; right:-7px; background:var(--ink-4); color:#fff; font-size:10px; min-width:18px; height:18px; border-radius:var(--rounded); display:flex; align-items:center; justify-content:center; border:1px solid var(--line); padding:0 4px;}
.ci__n{flex:1 1 auto; min-width:0;}
.ci__n b{display:block; font-family:var(--font-display),serif; font-weight:500; font-size:13.5px; color:#fff; line-height:1.3;}
.ci__n a{text-decoration:none;}
.ci__n a:hover b{color:var(--silver);}
.ci__n i{font-style:normal; font-size:11.5px; color:var(--muted);}
.ci__p{font-family:var(--font-ui); font-size:13px; font-weight:600; color:#fff; white-space:nowrap;}
/* (le récap réutilise .summary__row / .summary__total / .summary__voucher du panier) */
.checkout__sec{display:flex; align-items:center; justify-content:center; gap:8px; margin:16px 0 0; padding:14px 0 0; border-top:1px solid var(--line); color:var(--muted-2); letter-spacing:.12em; line-height:1.5; text-align:center;}
.checkout__sec svg{color:var(--gold); flex:0 0 auto;}

/* ---- Étapes (accordéon natif) ---- */
.cstep{border:1px solid var(--line); background:var(--ink-2); margin:0 0 14px;}
.cstep__title{display:flex; align-items:center; gap:14px; margin:0; padding:18px clamp(16px,2vw,24px); font-family:var(--font-display),serif; font-weight:500; font-size:clamp(17px,2vw,20px); color:#fff; cursor:pointer;}
.cstep.-unreachable .cstep__title{cursor:default; color:var(--muted-2);}
.cstep__num{flex:0 0 auto; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line-2); border-radius:50%; font-family:var(--font-ui); font-size:13px; font-weight:600; color:var(--silver);}
.cstep.-current .cstep__num{background:var(--red); border-color:var(--red); color:#fff;}
.cstep.-complete .cstep__num{background:transparent; border-color:var(--gold); color:transparent; position:relative;}
.cstep__label{flex:1 1 auto;}
.cstep__done{display:none; flex:0 0 auto; color:var(--gold);}
.cstep.-complete .cstep__done{display:inline-flex;}
.cstep.-complete .cstep__num{display:none;}
.cstep__edit{display:none; flex:0 0 auto; color:var(--muted); font-family:var(--font-ui); font-size:11px; letter-spacing:.12em; text-transform:uppercase;}
.cstep.-complete.-reachable .cstep__edit{display:inline-flex;}
.cstep.-current .cstep__edit{display:none;}
.cstep__content{display:none; padding:0 clamp(16px,2vw,24px) clamp(20px,2.4vw,26px); border-top:1px solid var(--line);}
.cstep.-current .cstep__content{display:block;}
.cstep__content > *:first-child{margin-top:clamp(18px,2vw,22px);}
/* Étape paiement : le 1er enfant est un div masqué (.js-cart-payment-step-refresh, display:none),
   la marge :first-child tombait dessus (invisible) → « Pay online » restait collé en haut. On la reporte. */
.cstep__content > .js-cart-payment-step-refresh:first-child + *{margin-top:clamp(18px,2vw,22px);}
.cstep__actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:22px;}
.cstep__actions .btn{margin:0;}

/* ---- Étape Identification ---- */
.ci-tabs{display:flex; align-items:center; gap:4px; list-style:none; margin:0 0 4px; padding:0;}
.ci-tabs__item{display:inline-flex;}
.ci-tabs__sep{color:var(--muted-2);}
.ci-tabs__link{display:inline-block; padding:8px 4px; color:var(--muted); font-family:var(--font-ui); font-size:12px; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; border-bottom:2px solid transparent; transition:.15s; cursor:pointer;}
.ci-tabs__link:hover{color:#fff;}
.ci-tabs__link.active{color:#fff; border-bottom-color:var(--red);}
.ci-tabs__content{margin-top:18px;}
.ci-tabs__content .tab-pane{display:none;}
.ci-tabs__content .tab-pane.active{display:block;}
.ci-optin-note{display:flex; flex-direction:column; gap:4px; margin:0 0 20px; padding:14px 16px; background:var(--ink); border:1px solid var(--line); font-size:13px; color:var(--silver); line-height:1.5;}
.ci-optin-note b{color:#fff; font-family:var(--font-ui); font-size:12px; letter-spacing:.1em; text-transform:uppercase;}
.ci-identity{color:var(--silver); font-size:15px; margin:0 0 6px;}
.ci-identity a{color:#fff; text-decoration:underline;}
.ci-identity__alt{color:var(--muted); font-size:14px; margin:0 0 6px;}
.ci-identity__alt a{color:var(--red);}
.ci-identity__warn{color:var(--muted-2); font-size:12.5px; margin:0 0 8px;}

/* ---- Étape Adresses ---- */
.ckaddr__h{font-family:var(--font-display),serif; font-weight:500; font-size:18px; color:#fff; margin:0 0 16px;}
.ckaddr__note{color:var(--silver); font-size:14px; line-height:1.5; margin:0 0 10px;}
.ckaddr__add{margin:14px 0 0;}
.ckaddr__add a{color:var(--muted); font-family:var(--font-ui); font-size:12px; letter-spacing:.06em; text-decoration:none;}
.ckaddr__add a::before{content:"+\00a0";}
.ckaddr__add a:hover{color:#fff;}
.ckaddr__diff{margin:14px 0 0;}
.ckaddr__diff a{color:var(--red); font-size:13px; text-decoration:none;}
.ckaddr__diff a:hover{color:#fff;}
.ckaddr__same{margin:18px 0 0;}
.ckaddr__form{margin:0 0 8px;}

/* Sélecteur d'adresses (cartes radio) */
.addrsel{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin:0 0 4px;}
.addrsel__item{display:flex; gap:12px; padding:16px; border:1px solid var(--line); background:var(--ink); cursor:pointer; transition:border-color .15s;}
.addrsel__item:hover{border-color:var(--line-2);}
.addrsel__item.selected,.addrsel__item.-checked{border-color:var(--red);}
.addrsel__radio{flex:0 0 auto; position:relative; width:18px; height:18px; margin-top:2px;}
.addrsel__radio input{position:absolute; inset:0; opacity:0; cursor:pointer; margin:0;}
.addrsel__radio > span{display:block; width:18px; height:18px; border:1px solid var(--line-2); border-radius:50%; transition:.15s;}
.addrsel__radio input:checked + span{border-color:var(--red); box-shadow:inset 0 0 0 4px var(--red);}
.addrsel__body{flex:1 1 auto; min-width:0;}
.addrsel__alias{display:block; font-family:var(--font-ui); font-weight:600; font-size:13px; color:#fff; margin:0 0 6px;}
.addrsel__lines{display:block; color:var(--silver); font-size:13px; line-height:1.5;}
.addrsel__lines address{font-style:normal;}
.addrsel__acts{display:flex; gap:16px; margin:12px 0 0; padding:10px 0 0; border-top:1px solid var(--line);}
.addrsel__acts a{color:var(--muted); font-family:var(--font-ui); font-size:11px; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; transition:color .15s;}
.addrsel__acts a:hover{color:#fff;}
.addrsel__del:hover{color:var(--red)!important;}

/* ---- Étape Livraison (transporteurs + point relais Colissimo) ---- */
.ckship{margin:0;}
.ship-opt{display:flex; flex-direction:column; gap:10px; margin:0;}
.delivery-option{margin:0;}
.ship-opt__label{display:flex; align-items:center; gap:14px; border:1px solid var(--line); padding:14px 16px; cursor:pointer; transition:border-color .15s; margin:0;}
.ship-opt__label:hover{border-color:var(--line-2);}
.delivery-option.-checked .ship-opt__label,.ship-opt__label:has(input:checked){border-color:var(--red);}
.ship-opt__radio{flex:0 0 auto; position:relative; width:18px; height:18px;}
.ship-opt__radio input{position:absolute; inset:0; opacity:0; cursor:pointer; margin:0;}
.ship-opt__radio > span{display:block; width:18px; height:18px; border:1px solid var(--line-2); border-radius:50%; transition:.15s;}
.ship-opt__radio input:checked + span{border-color:var(--red); box-shadow:inset 0 0 0 4px var(--red);}
.ship-opt__logo{flex:0 0 auto; display:inline-flex;}
.ship-opt__logo img{max-width:46px; max-height:30px; display:block;}
.ship-opt__body{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px;}
.ship-opt__name{font-family:var(--font-ui); font-weight:600; font-size:14px; color:#fff;}
.ship-opt__delay{font-style:normal; font-size:12px; color:var(--muted);}
.ship-opt__price{flex:0 0 auto; font-style:normal; font-family:var(--font-ui); font-weight:600; font-size:14px; color:#fff; white-space:nowrap;}
/* Contenu additionnel transporteur (Colissimo : sélecteur de point relais, carte, bouton) */
.carrier-extra-content{padding:14px 16px 4px; margin:0 0 4px;}
.carrier-extra-content:empty{display:none; padding:0;}
.ckship__opts{margin:22px 0 0; display:flex; flex-direction:column; gap:14px;}
.ckship__msg label{display:block; color:var(--muted); font-family:var(--font-ui); font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 8px;}
.ckship__msg textarea,.ckship__gift textarea{width:100%; background:var(--ink); color:#ececef; border:1px solid var(--line-2); padding:12px 14px; font-family:var(--font-ui); font-size:14px; resize:vertical; min-height:64px;}
.ckship__msg textarea:focus,.ckship__gift textarea:focus{outline:none; border-color:#fff;}
.ckship__chk{margin:0;}
.ckship__gift{margin:6px 0 0;}
.ckship__gift label{display:block; color:var(--muted); font-size:13px; margin:0 0 8px;}
.ckship__gift:not(.in){display:none;}

/* ---- Étape Paiement (options natives ; Stripe intact) ---- */
.ckpay{display:flex; flex-direction:column; gap:0; margin:0;}
.ckpay__opt{margin:0;}
/* Espace ENTRE les options de paiement (l'info éventuelle reste collée ; le formulaire a son espace ci-dessous). */
.ckpay__opt:not(:first-child){margin-top:12px;}
.ckpay__option{display:flex; align-items:center; gap:14px; border:1px solid var(--line); padding:16px; cursor:pointer; transition:border-color .15s;}
.ckpay__option:hover{border-color:var(--line-2);}
.ckpay__option:has(input:checked){border-color:var(--red);}
.ckpay__radio{flex:0 0 auto; position:relative; width:18px; height:18px;}
.ckpay__radio input{position:absolute; inset:0; opacity:0; cursor:pointer; margin:0;}
.ckpay__radio > span{display:block; width:18px; height:18px; border:1px solid var(--line-2); border-radius:50%; transition:.15s;}
.ckpay__radio input:checked + span{border-color:var(--red); box-shadow:inset 0 0 0 4px var(--red);}
.ckpay__label{flex:1 1 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; margin:0;}
.ckpay__cta{font-family:var(--font-ui); font-size:14px; color:#fff;}
.ckpay__logo{max-height:26px; max-width:120px; display:block; flex:0 0 auto;}
.ckpay__info{margin:0; padding:14px 16px; border:1px solid var(--line); border-top:0; background:var(--ink); color:var(--silver); font-size:13.5px; line-height:1.6;}
/* Le Payment Element (Stripe : onglets Carte/Klarna + champs) ne colle plus au libellé de l'option. */
.ckpay__form{margin:14px 0 0;}
.ckpay__form:not(:empty){padding:0;}
.ckpay__form .ps-hidden,.ckpay__info.ps-hidden{display:none;}

/* Overlay « Paiement en cours » : on transforme le spinner natif du module
   (#stripeSpinnerWrapper, affiché par checkout.js pendant la confirmation) en modale
   plein écran (backdrop + spinner rouge + texte FR). Le display reste piloté par le
   module (inline none↔flex) ; on ne restyle que l'apparence. Sélecteurs #id pour
   battre le <style> inline du template du module. */
#stripeSpinnerWrapper{
  position:fixed; inset:0; z-index:9999; margin:0; padding:24px;
  flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:rgba(10,10,12,.84); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  text-align:center;
}
#stripeSpinnerWrapper .stripe-spinner{
  width:46px; height:46px; border:3px solid rgba(255,255,255,.16); border-top-color:var(--red);
}
#stripeSpinnerWrapper .processing-order-text{font-size:0; color:transparent;}
#stripeSpinnerWrapper .processing-order-text::after{
  content:"Paiement en cours\2026"; display:block;
  font-family:var(--font-ui); font-size:17px; letter-spacing:.03em; color:#fff;
}
#stripeSpinnerWrapper::after{
  content:"Vérification et validation de votre paiement.\AMerci de patienter, ne quittez pas cette page.";
  white-space:pre-line; max-width:300px; font-size:13px; line-height:1.55; color:rgba(255,255,255,.6);
}
/* CGV */
.ckpay__cgv-intro{color:var(--silver); font-size:13.5px; margin:20px 0 8px;}
.ckpay__cgv{margin:18px 0 0;}
.ckpay__cgv ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.ckpay__cgv-item{display:flex; align-items:flex-start; gap:11px;}
.ckpay__cgv-box{flex:0 0 auto; position:relative; width:18px; height:18px; margin-top:1px;}
.ckpay__cgv-box input{position:absolute; inset:0; opacity:0; cursor:pointer; margin:0; width:18px; height:18px;}
.ckpay__cgv-box > span{display:block; width:18px; height:18px; border:1px solid var(--line-2); transition:.15s;}
.ckpay__cgv-box input:checked + span{background:var(--red); border-color:var(--red);}
.ckpay__cgv-box input:checked + span::after{content:""; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}
.ckpay__cgv-label{color:var(--silver); font-size:13.5px; line-height:1.5; cursor:pointer;}
.ckpay__cgv-label a{color:#fff; text-decoration:underline;}
.ckpay__confirm{margin:24px 0 0;}
.ckpay__confirm .btn{margin:0;}
.ckpay__free{color:#a7e0bf; font-size:15px; margin:0 0 10px;}

/* =====================================================================
   CONFIRMATION DE COMMANDE (checkout/order-confirmation) — proto
===================================================================== */
.confirm{display:flex; flex-direction:column; align-items:center; padding:clamp(40px,6vw,80px) 0;}
.confirm__head{text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; max-width:540px;}
.confirm__mark{width:84px; height:84px; border-radius:50%; border:1px solid var(--green-ok); background:rgba(133,217,150,.08); display:flex; align-items:center; justify-content:center; color:var(--green-ok);}
.confirm__title{font-size:clamp(28px,4vw,42px); color:#fff; margin:6px 0 0;}
.confirm__lead{color:var(--silver); font-size:17px; line-height:1.6; margin:0;}
.confirm__lead a{color:#fff; text-decoration:underline;}
.confirm__ref{color:var(--muted); font-family:var(--font-ui); font-size:14px; letter-spacing:.04em; margin:2px 0 0;}
.confirm__ref b{color:#fff;}
.confirm__back{margin:18px 0 0;}

/* Détails de la commande sous le remerciement */
.confirm__detail{width:100%; max-width:760px; margin:clamp(40px,5vw,60px) auto 0; display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(20px,3vw,34px); align-items:start; text-align:left;}
.confirm__items{background:var(--ink-2); border:1px solid var(--line); padding:24px clamp(18px,2.4vw,26px);}
.confirm__items-h{display:block; margin:0 0 18px; color:#fff;}
.confirm__lines{display:flex; flex-direction:column; gap:14px; margin:0 0 18px; padding:0 0 18px; border-bottom:1px solid var(--line);}
.confirm__lines .ci__n a{text-decoration:none;}
.confirm__totals{width:100%; border-collapse:collapse;}
.confirm__totals td{padding:6px 0; color:var(--silver); font-size:14px; vertical-align:top;}
.confirm__totals td:last-child{text-align:right; color:#fff; white-space:nowrap;}
.confirm__totals-grand td{padding-top:14px; border-top:1px solid var(--line); color:#fff; font-family:var(--font-ui); font-weight:600; font-size:16px;}
.confirm__totals-tax td{color:var(--muted-2); font-size:12px;}
.confirm__meta{background:var(--ink-2); border:1px solid var(--line); padding:24px clamp(18px,2.4vw,26px);}
.confirm__meta-h{display:block; margin:0 0 16px; color:#fff;}
.confirm__meta-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.confirm__meta-list li{color:var(--silver); font-size:14px; line-height:1.5;}
.confirm__meta-list em{color:var(--muted); font-style:normal; font-size:13px;}
.confirm__payreturn{width:100%; max-width:760px; margin:24px auto 0; padding:22px 24px; background:var(--ink-2); border:1px solid var(--line); color:var(--silver); font-size:14px; line-height:1.6; text-align:left;}
.confirm__transform{width:100%; max-width:540px; margin:28px auto 0; text-align:left;}

/* Transformation invité → compte */
.gtoc{background:var(--ink-2); border:1px solid var(--line); padding:28px clamp(20px,2.6vw,30px);}
.gtoc__h{font-size:21px; color:#fff; margin:0 0 16px;}
.gtoc__list{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:8px;}
.gtoc__list li{color:var(--silver); font-size:14px; padding-left:18px; position:relative;}
.gtoc__list li::before{content:""; position:absolute; left:0; top:8px; width:6px; height:6px; background:var(--gold); border-radius:50%;}
.gtoc__form{max-width:360px;}

/* =====================================================================
   TUNNEL — responsive
===================================================================== */
@media (max-width:920px){
  .checkout__grid{grid-template-columns:1fr; gap:30px;}
  .checkout__sum{position:static; order:-1;}
  .confirm__detail{grid-template-columns:1fr; gap:18px;}
}
@media (max-width:560px){
  .cstep__title{padding:16px 16px; gap:12px;}
  .ckpay__option,.ship-opt__label,.addrsel__item{padding:13px 14px;}
  .addrsel{grid-template-columns:1fr;}
  .ckpay__label{flex-wrap:wrap;}
}

/* =====================================================================
   FOOTER  (rendu par le module azzkara_footer — hook displayFooter)
   Porté du prototype (preview/) ; liens en <a> (résolus côté module).
===================================================================== */
.footer{background:#08080a; border-top:1px solid var(--line);}
.footer__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr .9fr 1.1fr; gap:32px; padding:54px 0;}
.footer__brand{display:flex; flex-direction:column; align-items:flex-start; gap:16px;}
.footer__word{display:inline-flex; color:#fff;}
.footer__word svg{display:block; width:auto; height:24px;}
.footer__soc{display:flex; gap:8px;}
.footer__soc .iconbtn{border:1px solid var(--line); color:var(--silver); transition:border-color .15s, color .15s;}
.footer__soc .iconbtn:hover{border-color:var(--red); color:#fff;}
.footer__col h4{font-family:var(--font-display),serif; font-size:14px; color:#fff; margin:0 0 16px; letter-spacing:.04em;}
.footer__col a{display:block; color:var(--muted); font-size:13px; padding:7px 0; transition:color .15s;}
.footer__col a:hover{color:#fff;}
.footer__pay-note{color:var(--muted); font-size:12px; margin:0 0 16px;}
.paylogos{display:flex; flex-wrap:wrap; gap:9px;}
.paylogo{width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:#101013; display:inline-flex; align-items:center; justify-content:center; color:#d8d8da; filter:grayscale(1); transition:border-color .15s, color .15s;}
.paylogo:hover{border-color:var(--silver); color:#fff;}
.paylogo svg{display:block;}
.footer__bottom{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:22px 0; border-top:1px solid var(--line); color:var(--muted-2); font-size:11.5px; letter-spacing:.04em; text-align:center;}

@media (max-width:900px){
  .footer__grid{grid-template-columns:1fr 1fr; gap:30px;}
  .footer__pay-col{grid-column:1 / -1;}
}
/* Mobile : marque centrée (logo + réseaux), puis colonnes 2 par 2
   (Mes services | Notre univers, puis Côté légal | Paiement). */
@media (max-width:560px){
  .footer__grid{grid-template-columns:1fr 1fr; gap:32px 22px; padding:40px 0;}
  .footer__brand{grid-column:1 / -1; align-items:center; text-align:center; gap:14px;}
  .footer__soc{justify-content:center;}
  .footer__pay-col{grid-column:auto;}
}

/* =====================================================================
   PAGES CMS  (cms/page.tpl — livraison, retours, FAQ, légal, tailles…)
===================================================================== */
.cmspage{max-width:1040px; margin:0 auto; padding:10px 0 clamp(56px,8vw,96px);}
.cmspage__title{font-size:clamp(30px,4vw,44px); color:#fff; margin:6px 0 30px; line-height:1.08;}
.cmspage__body{max-width:820px; font-family:var(--font-ed),serif; color:var(--silver); font-size:18px; line-height:1.75;}
.cmspage__body > :first-child{margin-top:0;}
.cmspage__body h2{font-family:var(--font-display),serif; color:#fff; font-size:clamp(20px,2.4vw,26px); margin:40px 0 14px; letter-spacing:.01em;}
.cmspage__body h3{font-family:var(--font-display),serif; color:#fff; font-size:19px; margin:30px 0 10px;}
.cmspage__body h4{color:#fff; font-size:17px; font-weight:600; margin:24px 0 8px;}
.cmspage__body p{margin:0 0 16px;}
.cmspage__body ul,.cmspage__body ol{margin:0 0 18px; padding-left:24px;}
.cmspage__body li{margin:0 0 9px;}
.cmspage__body a{color:var(--red); text-decoration:underline; text-underline-offset:2px;}
.cmspage__body strong,.cmspage__body b{color:#ececef; font-weight:600;}
.cmspage__body hr{border:0; border-top:1px solid var(--line); margin:34px 0;}
.cmspage__body table{width:100%; border-collapse:collapse; margin:0 0 24px; font-family:var(--font-ui); font-size:15px;}
.cmspage__body th,.cmspage__body td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--line);}
.cmspage__body th{color:#fff; font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:11.5px;}
.cmspage__body td{color:var(--silver);}
.cmspage__body tr:hover td{background:rgba(255,255,255,.02);}

/* ---- Blocs éditables (module azzkara_page_editor — hook displayAzzkaraCmsContent) ----
   Look porté du prototype (ship-hero / ship-free / shipreg / rates / ship-cta / faq). */
.cmspage__blocks > * + *{margin-top:30px;}
/* lead / chapô */
.pg-lead{max-width:780px; font-family:var(--font-ed),serif; color:var(--silver); font-size:19px; line-height:1.7; margin:0;}
/* texte riche */
.pg-rich{font-family:var(--font-ed),serif; color:var(--silver); font-size:18px; line-height:1.75;}
/* Texte/listes contraints à une largeur lisible ; les <div> de motifs (stats, process, cards,
   cols, grid…) restent pleine largeur automatiquement (non listés ici). */
.pg-rich > p, .pg-rich > h2, .pg-rich > h3, .pg-rich > h4, .pg-rich > ol, .pg-rich > ul{max-width:800px;}
.pg-rich > ul.pg-list{max-width:none;}
.pg-rich h2{font-family:var(--font-display),serif; color:#fff; font-size:clamp(20px,2.4vw,26px); margin:32px 0 14px;}
.pg-rich h3{font-family:var(--font-display),serif; color:#fff; font-size:19px; margin:26px 0 10px;}
.pg-rich h4{color:#fff; font-size:17px; font-weight:600; margin:22px 0 8px;}
.pg-rich p{margin:0 0 16px;}
.pg-rich ul,.pg-rich ol{margin:0 0 18px; padding-left:24px;} .pg-rich li{margin:0 0 9px;}
.pg-rich a{color:var(--red); text-decoration:underline; text-underline-offset:2px;} .pg-rich strong,.pg-rich b{color:#ececef; font-weight:600;}
/* heading de section */
.pg-sec{max-width:820px; margin-top:44px;}
.pg-sec__t{font-size:clamp(20px,2.6vw,28px); color:#fff; margin:0;}
.pg-sec__sub{color:var(--muted); font-size:13.5px; margin:6px 0 0;}
/* encadré (highlight) */
.pg-note{display:flex; align-items:center; gap:20px; padding:22px 26px; border:1px solid var(--red); background:rgba(179,23,29,.08);}
.pg-note__ic{flex:0 0 auto; width:52px; height:52px; border-radius:50%; border:1px solid var(--red); display:grid; place-items:center; color:var(--red);}
.pg-note__ic svg{width:24px; height:24px;}
.pg-note__tx b{display:block; color:#fff; font-size:17px; margin-bottom:4px;}
.pg-note__tx p{margin:0; color:var(--muted); font-size:13.5px; line-height:1.5;}
/* accordéon */
.pg-acc__item{border:1px solid var(--line); background:var(--ink-2); margin-bottom:12px;}
.pg-acc__head{display:flex; align-items:center; justify-content:space-between; gap:18px; width:100%; background:none; border:0; text-align:left; padding:20px 24px; color:#fff;}
.pg-acc__head:hover .pg-acc__t{color:var(--red);}
.pg-acc__id{display:flex; flex-direction:column; gap:3px;}
.pg-acc__t{font-family:var(--font-display),serif; font-size:19px; color:#fff; transition:color .15s;}
.pg-acc__sub{color:var(--muted); font-size:13px;}
.pg-acc__chev{flex:0 0 auto; color:var(--muted); transition:transform .3s ease;}
.pg-acc__head[aria-expanded="true"]{border-bottom:1px solid var(--line);}
.pg-acc__head[aria-expanded="true"] .pg-acc__chev{transform:rotate(180deg); color:var(--red);}
.pg-acc__body{padding:0 24px 20px;}
.pg-acc__body[hidden]{display:none;}
.pg-acc__body .rte-content{color:var(--silver); font-size:14px; line-height:1.6; padding-top:14px;}
/* tableau */
.pg-tablewrap{overflow-x:auto;}
.pg-table{width:100%; border-collapse:collapse; font-family:var(--font-ui); font-size:14px;}
.pg-table th,.pg-table td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top;}
.pg-table th{color:var(--muted); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:500; border-bottom:1px solid var(--line-2);}
.pg-table td{color:var(--silver);}
.pg-table th:last-child,.pg-table td:last-child{text-align:right; white-space:nowrap; color:#fff;}
.pg-acc__body .pg-table{font-size:13.5px;}
/* étapes */
.pg-steps{max-width:820px; list-style:none; counter-reset:st; padding:0; margin:0; display:flex; flex-direction:column; gap:16px;}
.pg-steps li{counter-increment:st; position:relative; padding-left:48px; color:var(--silver); font-family:var(--font-ed),serif; font-size:17px; line-height:1.6;}
.pg-steps li::before{content:counter(st); position:absolute; left:0; top:-2px; width:32px; height:32px; border-radius:50%; border:1px solid var(--red); color:var(--red); display:grid; place-items:center; font-family:var(--font-ui); font-size:13px; font-weight:600;}
.pg-steps__t{color:#fff; font-weight:600; font-family:var(--font-ui);}
/* CTA */
.pg-cta{text-align:center; padding:28px 0 0; display:flex; flex-direction:column; align-items:center; gap:14px; border-top:1px solid var(--line); margin-top:44px;}
.pg-cta__tx{color:var(--silver); font-size:16px; margin:0;}
.pg-cta__btns{display:flex; gap:12px; flex-wrap:wrap; justify-content:center;}
/* bouton outline (réutilisable) */
.btn--line{display:inline-flex; align-items:center; justify-content:center; padding:13px 26px; border:1px solid var(--line-2); background:none; color:#fff; font-family:var(--font-ui); font-size:12px; letter-spacing:.14em; text-transform:uppercase; transition:border-color .15s, background .15s, color .15s;}
.btn--line:hover{border-color:#fff; background:#fff; color:#000;}

/* Heading centré (option align) : prend toute la largeur du contenu pour être centré par rapport
   au tableau/accordéon (sinon il est centré dans la boîte étroite de 820px, calée à gauche). */
.pg-sec--center{max-width:none; text-align:center;}
/* Accordéon : prix/fourchette à droite, à côté du chevron (façon .shipreg__range du proto) */
.pg-acc__right{display:flex; align-items:center; gap:18px; flex:0 0 auto;}
.pg-acc__range{color:var(--silver); font-family:var(--font-display),serif; font-size:14px; white-space:nowrap;}
/* Cellules de tableau riches (mode + note, prix + « gratuit », code zone) */
.pg-table td strong{color:#fff; font-weight:600;}
.pg-table__code{display:inline-block; font-family:var(--font-display),serif; font-size:11px; letter-spacing:.08em; color:var(--red); border:1px solid var(--red); padding:1px 7px; margin-bottom:7px;}
.pg-table__note{display:block; color:var(--muted-2); font-size:11.5px; line-height:1.4; margin-top:3px; font-weight:400;}
.pg-table__free{display:block; color:var(--red); font-size:11px; margin-top:4px;}
.pg-table td:last-child strong{font-size:16px;}

/* ---- Motifs bespoke des pages (rendus en blocs richtext, stylés ici) ---- */
/* eyebrow dans un heading (kicker rouge au-dessus du titre) */
.pg-sec__eye{display:block; color:var(--red); margin:0 0 8px;}
/* stats : rangée de chiffres-clés (proto ret-highlights) */
.pg-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:30px 0;}
.pg-stat{border:1px solid var(--line); background:var(--ink-2); padding:26px 24px; display:flex; flex-direction:column; gap:8px;}
.pg-stat b{font-family:var(--font-display),serif; font-size:28px; color:#fff; line-height:1;}
.pg-stat span{color:var(--muted); font-size:13.5px; line-height:1.5;}
/* liste à puces rouges, 2 colonnes (proto ret-list) */
.pg-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:16px 36px;}
.pg-list li{position:relative; padding-left:28px; color:var(--silver); font-size:14.5px; line-height:1.6; margin:0;}
.pg-list li::before{content:""; position:absolute; left:0; top:7px; width:12px; height:12px; border:1px solid var(--red); border-radius:50%;}
.pg-list li::after{content:""; position:absolute; left:4px; top:11px; width:4px; height:4px; background:var(--red); border-radius:50%;}
/* process : étapes en cartes (numéro + icône) (proto ret-steps/retstep) */
.pg-process{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.pg-pstep{border:1px solid var(--line); background:var(--ink-2); padding:26px 24px;}
.pg-pstep__top{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.pg-pstep__n{font-family:var(--font-display),serif; font-size:44px; color:var(--line-2); line-height:1;}
.pg-pstep__ic{width:44px; height:44px; border-radius:50%; border:1px solid var(--red); display:grid; place-items:center; color:var(--red); flex:0 0 auto;}
.pg-pstep__ic svg{width:20px; height:20px;}
.pg-pstep h3{font-family:var(--font-display),serif; font-size:18px; color:#fff; margin:0 0 10px;}
.pg-pstep p{margin:0; color:var(--muted); font-size:13px; line-height:1.6;}
/* cartes 2-up à liseré rouge (proto ret-cards/ret-card) */
.pg-cards{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.pg-card{border:1px solid var(--line); background:var(--ink); padding:30px 32px; border-top:2px solid var(--red);}
.pg-card h3{font-family:var(--font-display),serif; font-size:21px; color:#fff; margin:0 0 12px;}
.pg-card p{margin:0; color:var(--silver); font-size:14.5px; line-height:1.7;}
@media (max-width:760px){
  .pg-stats, .pg-list, .pg-cards{grid-template-columns:1fr;}
  .pg-process{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){ .pg-process{grid-template-columns:1fr;} }

/* Highlight variant « subtle » : encadré gris (vs rouge) — astuce/conseil (proto care-tip) */
.pg-note--subtle{border-color:var(--line-2); background:var(--ink-2);}

/* Entretien — 2 colonnes (éviter / retirer) : blocs bordés, h3 souligné, liste à puces rouges */
.care-cols{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.care-block{border:1px solid var(--line); background:var(--ink-2); padding:28px 30px;}
.care-block h3{font-family:var(--font-display),serif; font-size:19px; color:#fff; margin:0 0 18px; padding-bottom:14px; border-bottom:1px solid var(--line);}
.care-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px;}
.care-list li{position:relative; padding-left:26px; color:var(--silver); font-size:14px; line-height:1.55;}
.care-list li::before{content:""; position:absolute; left:0; top:6px; width:12px; height:12px; border:1px solid var(--red); border-radius:50%;}
.care-list li::after{content:""; position:absolute; left:4px; top:10px; width:4px; height:4px; background:var(--red); border-radius:50%;}

/* Entretien — intro de section + grille 3 matières numérotées */
.care-lead{color:var(--silver); font-size:15px; line-height:1.7; margin:0 0 24px; max-width:820px;}
.care-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.care-mat{border:1px solid var(--line); background:var(--ink); padding:28px 28px 30px; border-top:2px solid var(--red);}
.care-mat__no{display:block; font-family:var(--font-display),serif; font-size:26px; color:var(--line-2); margin-bottom:10px;}
.care-mat h3{font-family:var(--font-display),serif; font-size:19px; color:#fff; margin:0 0 12px;}
.care-mat p{margin:0; color:var(--muted); font-size:13.5px; line-height:1.65;}
@media (max-width:760px){ .care-cols, .care-grid{grid-template-columns:1fr;} }

/* Devenir distributeur — grille aside (bénéfices) + formulaire (proto distributor.jsx).
   Le module azzkara_distributor rend le markup ; le form réutilise .authform/.field/.btn. */
.distri-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:start; margin-top:8px;}
.distri-aside h2{font-family:var(--font-display),serif; font-size:clamp(20px,2.4vw,26px); color:#fff; margin:0 0 22px;}
.distri-benefits{list-style:none; margin:0 0 30px; padding:0; display:flex; flex-direction:column; gap:20px;}
.distri-benefits li{display:flex; gap:16px;}
.distri-benefits__n{font-family:var(--font-display),serif; font-size:14px; color:var(--red); border:1px solid var(--red); width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto;}
.distri-benefits b{display:block; color:#fff; font-size:15px; margin-bottom:4px;}
.distri-benefits p{margin:0; color:var(--muted); font-size:13.5px; line-height:1.55;}
.distri-aside__note{border-top:1px solid var(--line); padding-top:22px;}
.distri-aside__note p{margin:0 0 12px; color:var(--silver); font-size:14px;}
.distri-form{background:var(--ink-2); border:1px solid var(--line); padding:30px 30px 32px;}
.distri-form select, .distri-form textarea{background:var(--ink-3); border:1px solid var(--line); color:#fff; padding:13px 14px; font-family:var(--font-ui),sans-serif; font-size:14px; width:100%;}
.distri-form select:focus, .distri-form textarea:focus{outline:0; border-color:var(--red);}
.distri-form textarea{resize:vertical; min-height:96px; line-height:1.5;}
.distri-form select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px;}
.distri-form__city{grid-template-columns:1.6fr 1fr;}
.distri-form__req{color:var(--muted-2); font-size:12px; margin:2px 0 4px;}
/* erreurs (injectées par le JS) */
.distri-form__error{background:rgba(179,23,29,.08); border:1px solid var(--red); color:#fff; font-size:13.5px; padding:11px 14px; margin:0 0 18px;}
.distri-form .field.is-error input, .distri-form .field.is-error select, .distri-form .field.is-error textarea{border-color:var(--red);}
.distri-form .field-error{display:block; color:var(--red); font-size:12px; margin-top:5px;}
/* confirmation : affichée quand le JS pose .is-sent sur la grille (aside + form masqués) */
.distri-grid.is-sent{display:block;}
.distri-grid.is-sent .distri-aside{display:none;}
.distri-sent{max-width:620px; margin:40px auto 0; text-align:center; gap:16px; padding:40px 0;}
.distri-grid.is-sent .distri-sent{display:flex; flex-direction:column; align-items:center;}
.distri-sent__ic{width:64px; height:64px; border:1px solid var(--red); color:var(--red); display:grid; place-items:center;}
.distri-sent__ic svg{width:26px; height:26px;}
.distri-sent__title{font-family:var(--font-display),serif; font-size:clamp(28px,4vw,40px); color:#fff; margin:0;}
.distri-sent .ship-cta__btns{margin-top:10px;}
@media (max-width:760px){ .distri-grid{grid-template-columns:1fr; gap:36px;} .distri-form .field-row{grid-template-columns:1fr;} }
/* « Demande envoyée » : la confirmation prend toute la page → masque le H1 + l'intro/blocs
   qui précèdent le widget (le JS du module pose .azzd-sent sur .cmspage). Le fil d'Ariane reste. */
.cmspage.azzd-sent .cmspage__title{display:none;}
.cmspage.azzd-sent .cmspage__blocks > *:not(.pg-widget){display:none;}

/* FAQ — groupes de Q/R en accordéon +/- (proto faq.jsx). Le toggle réutilise le handler
   accordéon générique du thème (data-acc-toggle → aria-expanded ; data-acc-body hidden). */
.faq-groups{display:flex; flex-direction:column; gap:46px; max-width:820px; margin:0 auto;}
.faq-group__t{font-family:var(--font-display),serif; font-size:24px; color:#fff; margin:0 0 8px; padding-bottom:14px; border-bottom:2px solid var(--red); display:inline-block;}
.faq-group .shipfaq-list{margin-top:6px;}
.shipfaq-list{border-top:1px solid var(--line);}
.shipfaq{border-bottom:1px solid var(--line);}
.shipfaq__q{display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; background:none; border:0; cursor:pointer; text-align:left; padding:22px 4px; color:#fff; font-family:var(--font-display),serif; font-size:17px; transition:color .15s;}
.shipfaq__q:hover{color:var(--red);}
.shipfaq__ic{position:relative; width:16px; height:16px; flex:0 0 auto; color:var(--muted); display:inline-block;}
.shipfaq__ic::before, .shipfaq__ic::after{content:""; position:absolute; background:currentColor;}
.shipfaq__ic::before{top:50%; left:0; right:0; height:1.5px; margin-top:-.75px;}
.shipfaq__ic::after{left:50%; top:0; bottom:0; width:1.5px; margin-left:-.75px; transition:opacity .15s;}
.shipfaq__q[aria-expanded="true"] .shipfaq__ic{color:var(--red);}
.shipfaq__q[aria-expanded="true"] .shipfaq__ic::after{opacity:0;}
.shipfaq__a{color:var(--muted); font-size:14.5px; line-height:1.7;}
.shipfaq__a > div{padding:0 4px 24px;}
.faq-help{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; max-width:820px; margin:56px auto 0; padding:30px 32px; border:1px solid var(--line); background:var(--ink-2);}
.faq-help .eyebrow{color:var(--red); display:block;}
.faq-help h3{font-family:var(--font-display),serif; font-size:22px; color:#fff; margin:8px 0 0;}
.faq-help__btns{display:flex; gap:12px; flex-wrap:wrap;}

/* Paiement sécurisé — cartes « moyens de paiement » (page créée sur-mesure, style du site). */
.pay-methods{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.pay-method{border:1px solid var(--line); background:var(--ink-2); padding:24px 26px; display:flex; flex-direction:column; gap:12px;}
.pay-method__logos{display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:#d8d8da; min-height:30px;}
.pay-method__logos > span{display:inline-flex; align-items:center; justify-content:center; height:30px; min-width:44px; padding:0 9px; border:1px solid var(--line); border-radius:var(--rounded); background:#101013;}
.pay-method__3x{font-family:var(--font-display),serif; font-size:14px; color:var(--red); letter-spacing:.04em;}
.pay-method h3{font-family:var(--font-display),serif; font-size:17px; color:#fff; margin:0;}
.pay-method p{margin:0; color:var(--muted); font-size:13.5px; line-height:1.6;}
@media (max-width:680px){ .pay-methods{grid-template-columns:1fr;} }

/* Pages légales (Mentions / CGV / CGU / RGPD) — proto legal.jsx. Bloc « legal » du page_editor. */
.legal-body{color:var(--muted); max-width:820px;}
.legal-lead{color:var(--silver); font-size:15px; line-height:1.75; margin:0 0 30px; padding-bottom:26px; border-bottom:1px solid var(--line);}
.legal-id{margin:0; display:flex; flex-direction:column;}
.legal-id__row{display:grid; grid-template-columns:220px 1fr; gap:20px; padding:15px 0; border-bottom:1px solid var(--line);}
.legal-id__row dt{color:var(--muted); font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin:0;}
.legal-id__row dd{color:#fff; font-size:14.5px; margin:0; line-height:1.5;}
.legal-arts{list-style:none; margin:0; padding:0;}
.legal-art{padding:26px 0; border-bottom:1px solid var(--line);}
.legal-art:first-child{padding-top:0;}
.legal-art h3{font-family:var(--font-display),serif; display:flex; align-items:baseline; gap:14px; font-size:17px; color:#fff; margin:0 0 12px;}
.legal-art__n{font-size:13px; color:var(--red); flex:0 0 auto;}
.legal-art p{margin:0; font-size:14px; line-height:1.8; color:var(--silver);}
.legal-annex, .legal-rev{font-size:13px; line-height:1.7; color:var(--muted);}
.legal-annex{margin:26px 0 0; padding:18px 20px; background:var(--ink-2); border:1px solid var(--line);}
.legal-rev{margin:34px 0 0; padding-top:20px; border-top:1px solid var(--line); color:var(--muted-2); font-size:12px; letter-spacing:.04em;}
@media (max-width:560px){ .legal-id__row{grid-template-columns:1fr; gap:4px;} }

@media (max-width:680px){
  .pg-note{flex-direction:column; align-items:flex-start; gap:12px; padding:18px;}
  .pg-acc__head{padding:16px;} .pg-acc__body{padding:0 16px 16px;}
  .pg-table th,.pg-table td{padding:10px 9px; font-size:12.5px;}
}

/* Nous contacter — formulaire de contact natif (widget contactform, restylé thème).
   1 colonne sobre, largeur contenue ; réutilise .authform/.field/.notif/.btn--primary. */
.contactpage .pg-lead{margin-bottom:34px;}
.contactpage__form{max-width:620px; margin:0 auto; background:var(--ink-2); border:1px solid var(--line); padding:30px 30px 32px;}
/* Select & file posés sur un fond plus profond, comme la page distributeur (sans en dépendre). */
.contactpage__form select{background:var(--ink-3); appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px;}
.contactpage__form select:focus{background-color:var(--ink-2);}
.contactpage__file{background:var(--ink-3); padding:11px 14px; font-size:13px; color:var(--silver); cursor:pointer;}
.contactpage__file::file-selector-button{margin-right:14px; background:var(--ink-4); color:#ececef; border:1px solid var(--line-2); padding:7px 14px; font-family:var(--font-ui); font-size:12px; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; transition:border-color .15s;}
.contactpage__file::file-selector-button:hover{border-color:#fff;}
/* Honeypot anti-spam : invisible mais présent dans le DOM. */
.contactpage__hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none;}
.contactpage__footer{margin-top:24px;}
@media (max-width:560px){ .contactpage__form{padding:24px 20px 26px;} }

/* ============================================================
   Détail de commande (customer/order-detail.tpl)
   Rendu dans la coquille espace client (.acct__panel → .acct__block).
   Réutilise .acct__block / .acct__bh / .ostatus / .btn / .field /
   .confirm__items (tableau produits inclus). Ici : en-tête, timeline,
   listes clé/valeur livraison, colonnes adresses, retour, fil de messages.
   ============================================================ */
.od__headtop{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 0 18px;}
.od__back{display:inline-block; color:var(--muted); font-family:var(--font-ui); font-size:11px; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; margin:0 0 10px; transition:color .15s;}
.od__back:hover{color:#fff;}
.od__id h3{font-size:22px; color:#fff; margin:0;}
.od__date{display:block; margin:8px 0 0;}
.od__status{align-self:flex-start;}
.od__actions{display:flex; flex-wrap:wrap; gap:12px;}
.od__actions .btn{min-width:0;}
.od__notes{list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:6px; color:var(--silver); font-size:13.5px; line-height:1.5;}
.od__notes em{color:var(--muted); font-style:italic;}

/* Timeline des statuts */
.od__steps{list-style:none; margin:0; padding:0;}
.od__step{position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:0 0 18px 4px;}
.od__step:last-child{padding-bottom:0;}
.od__step::before{content:""; position:absolute; left:9px; top:18px; bottom:-2px; width:1px; background:var(--line);}
.od__step:last-child::before{display:none;}
.od__dot{position:relative; z-index:1; width:14px; height:14px; border-radius:50%; background:var(--ost,#8d8d95); box-shadow:0 0 0 3px var(--ink-2);}
.od__step-state{color:#fff; font-family:var(--font-ui); font-size:14px;}
.od__step-date{color:var(--muted); font-size:12.5px; white-space:nowrap; text-align:right;}

/* Statut de la commande — pilule colorée automatiquement selon le statut (--ost = couleur de l'état). */
.od__statusrow{display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px;}
.od__statuspill{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid var(--ost,#8d8d95); background:color-mix(in srgb, var(--ost,#8d8d95) 8%, transparent);}
.od__statuspill-dot{width:8px; height:8px; border-radius:50%; background:var(--ost,#8d8d95); box-shadow:0 0 0 2px color-mix(in srgb, var(--ost,#8d8d95) 18%, transparent);}
.od__statuspill-txt{font-family:var(--font-ui); font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ost,#8d8d95);}
.od__statusdate{color:var(--muted); font-size:12.5px;}

/* Livraison / suivi */
.od__shipline + .od__shipline{margin-top:16px; padding-top:16px; border-top:1px solid var(--line);}
.od__kv{margin:0; display:flex; flex-direction:column; gap:10px;}
.od__kv > div{display:flex; gap:14px; align-items:baseline;}
.od__kv dt{flex:0 0 130px; margin:0; color:var(--muted); font-family:var(--font-ui); font-size:11px; letter-spacing:.1em; text-transform:uppercase;}
.od__kv dd{margin:0; color:var(--silver); font-size:14px; line-height:1.5;}
.od__kv dd a{color:#fff; text-decoration:underline;}
.od__kv dd em{color:var(--muted); font-style:italic;}
.od__track{margin:16px 0 0; padding:14px 0 0; border-top:1px solid var(--line); color:var(--silver); font-size:13.5px; line-height:1.6;}
.od__track a{display:inline-block; color:#fff; text-decoration:underline; word-break:break-all;}

/* Colonnes paiement + adresses */
.od__cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px;}
.od__cols .acct__block{margin:0;}
.od__alias{display:block; margin:0 0 10px; color:var(--red);}
.od__addrlines{font-style:normal; color:var(--silver); font-size:14px; line-height:1.7;}
.od__pay{margin:0; color:#fff; font-family:var(--font-ui); font-size:15px;}

/* Tableau produits inclus : il porte déjà .confirm__items (fond + bordure). */
.od__items{margin:0 0 18px;}

/* Téléchargements */
.od__dllist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.od__dllist li{display:flex; align-items:center; justify-content:space-between; gap:14px; color:#fff; font-family:var(--font-display),serif; font-size:14px;}
.od__dllist .btn{min-width:0; padding:9px 18px;}

/* Retour marchandise */
.od__returnlead{margin:0 0 18px; color:var(--silver); font-size:14px; line-height:1.6;}
.od__returnlist{list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:0;}
.od__returnitem{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:14px 0; border-bottom:1px solid var(--line);}
.od__returnitem:first-child{padding-top:0;}
.od__returncheck{display:flex; align-items:center; gap:12px; cursor:pointer; min-width:0;}
.od__returncheck input{flex:0 0 auto; width:18px; height:18px; accent-color:var(--red);}
.od__returnname{color:#fff; font-family:var(--font-display),serif; font-size:14px;}
.od__returnqty{display:flex; align-items:center; gap:14px; flex-wrap:wrap; color:var(--muted); font-size:12.5px;}
.od__returndone{color:var(--green-ok);}
.od__returnselect{background:var(--ink-3); color:#fff; border:1px solid var(--line-2); padding:8px 12px; font-family:var(--font-ui); font-size:13px; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:32px;}
.od__returnselect:focus{outline:none; border-color:#fff;}
.od__returntext{width:100%; background:var(--ink); color:#fff; border:1px solid var(--line-2); padding:12px 14px; font-family:var(--font-ui); font-size:14px; line-height:1.5; resize:vertical;}
.od__returntext:focus{outline:none; border-color:#fff; background:var(--ink-2);}
.od__returntext::placeholder{color:var(--muted-2);}

/* Fil de messages + formulaire d'ajout */
.od__msglist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
.od__msg{background:var(--ink); border:1px solid var(--line); padding:14px 16px;}
.od__msgmeta{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 8px;}
.od__msgmeta b{color:#fff; font-family:var(--font-ui); font-size:13px;}
.od__msgmeta span{color:var(--muted); font-size:12px;}
.od__msgbody{color:var(--silver); font-size:14px; line-height:1.6;}
.od__form .field__label{font-family:var(--font-ui); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}

@media (max-width:560px){
  .od__headtop{flex-direction:column;}
  .od__actions .btn{flex:1 1 100%;}
  .od__kv > div{flex-direction:column; gap:3px;}
  .od__kv dt{flex:none;}
  .od__step-date{display:none;}
}

/* =====================================================================
   ARRONDI GLOBAL — piloté par UNE variable : --rounded (cf. :root, ~L29)
   ---------------------------------------------------------------------
   Tous les éléments rectangulaires d'UI (cards, champs, boutons, badges,
   conteneurs, modales, accordéons, cases à cocher carrées…) reçoivent
   border-radius:var(--rounded). Changer --rounded suffit pour tout régler :
     0    -> angles droits partout
     6px  -> léger arrondi (défaut)
     16px -> très arrondi
   Bloc placé EN FIN de feuille : il l'emporte (cascade) sur les règles
   sans radius définies plus haut, SANS toucher aux ronds (50%) ni aux
   vraies pilules (999px) qui gardent leur forme telle quelle.
===================================================================== */

/* -- Boutons -- */
.btn,
.cat__filtbtn,
.acct__logout,
.orow__btn,
.civ__b,
.sizechip,
.pdp__split-pill,
.acct__navtoggle{border-radius:var(--rounded);}

/* -- Badges / pastilles rectangulaires / tags -- */
.badge,
.iconbtn__dot,
.ci__q,
.ostatus,
.active-filters__chip,
.pdp__price .discount,
.od__statuspill,
.pg-table__code{border-radius:var(--rounded);}

/* -- Champs de formulaire (inputs, selects, textareas) -- */
.field input,.field textarea,.field select,
.ffield__input,.ffield__select,.ffield__textarea,
.pdp__select,
.sortsel__select,
.summary__promo input,
.ckship__msg textarea,.ckship__gift textarea,
.distri-form select,.distri-form textarea,
.contactpage__form select,
.contactpage__file,
.od__returnselect,.od__returntext,
.fcheck__swatch{border-radius:var(--rounded);}

/* -- Steppers (quantité) : conteneur arrondi + overflow pour clipper le hover des boutons internes -- */
.stepper{border-radius:var(--rounded); overflow:hidden;}
/* coins du couple promo : input à gauche, bouton à droite (collés) */
.summary__promo input{border-top-right-radius:0; border-bottom-right-radius:0;}
.summary__promo button{border-radius:var(--rounded); border-top-left-radius:0; border-bottom-left-radius:0;}

/* -- Cards / miniatures produit / conteneurs -- */
.card__media,
.card__img,.card__img--empty,
.statc,
.acct__block,
.acct__navlist,
.summary,
.checkout__sum,
.confirm__items,.confirm__meta,.confirm__payreturn,
.gtoc,
.cstep,
.authcard,
.addr,
.addrsel__item,
.ship-opt__label,
.ckpay__option,.ckpay__info,
.ci-optin-note,
.voucher__item,
.notif,
.pg-stat,.pg-pstep,.pg-card,.care-block,.care-mat,
.pg-note,.pg-note--subtle,
.pg-acc__item,
.faq-help,
.pay-method,
.legal-annex,
.distri-form,.distri-form__error,
.contactpage__form,
.od__msg,
.line__img,.line__img--ph,
.ci__img,.ci__img--ph,
.pdp__main,.pdp__mainimg,.pdp__mainimg--empty,
.pdp__th,
.pdp-modal__th{border-radius:var(--rounded);}

/* -- Drawer / modales / toasts -- */
.drawer__panel,
.cartconfirm__box{border-radius:var(--rounded);}

/* -- Pagination -- */
.pagination__link{border-radius:var(--rounded);}

/* -- Cases à cocher CARRÉES custom (les radios ronds gardent leur 50%) -- */
.ckpay__cgv-box > span{border-radius:var(--rounded);}

/* -- Tableaux encadrés (remises quantité) -- */
.pdp__discounts{border-radius:var(--rounded); overflow:hidden;}

/* -- Conteneurs à enfants pleine largeur AVEC fond/hover propre : clipper pour
      que l'arrondi soit net aux 4 coins. (.cstep exclu : contient le Payment
      Element Stripe / des dropdowns qu'il ne faut pas rogner.) -- */
.acct__navlist,
.pg-acc__item{overflow:hidden;}