/* ==========================================================================
   Chaussette Leblond — feuille de style principale (pixel-perfect maquettes)
   Polices : Oswald (titres/UI, uppercase) + DM Sans (corps).
   ========================================================================== */
:root{
  --blue:#0042e3; --blue-hover:#00329f; --navy:#07184a;
  --blue-soft:#eef2fd; --blue-border:#dbe4fb;
  --ink:#161514; --ink-2:#4a473f; --ink-3:#2a2823; --muted:#6a655c; --grey:#8a857c; --grey-2:#a8a196;
  --page:#f4f2ee; --card:#fff; --line:#eceae5; --line-2:#e0ddd6; --line-3:#f0eee9;
  --star:#f5a623; --amber:#e8820c; --ok:#207a45; --err:#b4453a;
  --u-travail:#e8820c; --u-rando:#2f8a4c; --u-chasse:#7a4a1e; --u-sensibles:#7c3aed; --u-ville:#0042e3;
  --fr-blue:#0042e3; --fr-red:#e3122b;
  --shadow-card:0 16px 34px rgba(7,24,74,.12);
  --shadow-cta:0 12px 26px rgba(0,66,227,.28);
  --shadow-drop:0 18px 40px rgba(20,18,15,.14);
  --wrap:1200px; --gutter:24px;
  --osw:"Oswald",system-ui,sans-serif; --body:"DM Sans",system-ui,sans-serif;
  --accent:#0042e3;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--page);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
/* Garde-fou : aucun élément ne peut faire déborder la page horizontalement.
   « clip » et non « hidden » : hidden créerait un conteneur de défilement et
   casserait le position:sticky de l'en-tête. Le défilement vertical n'est pas
   affecté, et les carrousels gardent leur propre défilement horizontal. */
html,body{overflow-x:clip;max-width:100%}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-hover)}
h1,h2,h3,h4,h5,h6,p,ul,figure,blockquote{margin:0}
ul{list-style:none;padding:0}
button,input,select,textarea{font-family:inherit}
button{cursor:pointer;border:0;background:none}
.osw{font-family:var(--osw)}
.cl-up{text-transform:uppercase}
.cl-container{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.cl-eyebrow{font-family:var(--osw);text-transform:uppercase;letter-spacing:.16em;font-weight:600;font-size:13px;color:var(--blue)}
.cl-h2{font-family:var(--osw);text-transform:uppercase;font-weight:700;font-size:40px;line-height:1;color:var(--ink)}
.cl-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cl-link-more{font-family:var(--osw);text-transform:uppercase;font-weight:600;font-size:14px;letter-spacing:.05em;color:var(--blue);display:inline-flex;align-items:center;gap:8px}

/* Étoiles /5 (helper cl_star5) */
.cl-star5{display:inline-flex;line-height:1;letter-spacing:1px}
.cl-star5 .cl-star{color:var(--line-2)}
.cl-star5 .cl-star.is-on{color:var(--star)}
.cl-rating-inline{display:inline-flex;align-items:center;gap:.4em;font-size:13px;color:var(--grey)}
.is-loading{opacity:.6;pointer-events:none}

/* ---- Boutons génériques ---- */
.cl-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-family:var(--osw);text-transform:uppercase;font-weight:600;letter-spacing:.05em;border:0;border-radius:11px;padding:15px 24px;cursor:pointer;transition:.15s;color:#fff;background:var(--blue)}
.cl-btn:hover{color:#fff;background:var(--blue-hover)}
.cl-btn--primary{background:var(--blue);box-shadow:var(--shadow-cta)}
.cl-btn--lg{padding:19px 30px;font-size:17px}
.cl-btn--ink{background:var(--ink)}
.cl-btn--ink:hover{background:#2c2a26}
.cl-btn--amber{background:var(--amber);color:var(--ink)}
.cl-btn--amber:hover{color:var(--ink);filter:brightness(1.06)}
.cl-btn--ghost{background:transparent;border:1.5px solid var(--blue);color:var(--blue)}
.cl-btn--ghost:hover{background:var(--blue);color:#fff}

/* ==========================================================================
   Chrome — barre promo
   ========================================================================== */
.cl-announce{background:var(--blue);color:#fff;font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.02em}
.cl-announce__row{max-width:var(--wrap);margin:0 auto;padding:11px var(--gutter);display:flex;align-items:center;justify-content:center;gap:14px;position:relative}
.cl-announce__label{opacity:.85;font-weight:700}
.cl-announce__dot{width:4px;height:4px;border-radius:50%;background:#fff;opacity:.6}
.cl-announce__close{position:absolute;right:24px;top:50%;transform:translateY(-50%);color:#fff;opacity:.75;font-size:16px;line-height:1;padding:4px}
.cl-announce__close:hover{opacity:1}
/* Sur téléphone, le message tient sur UNE seule ligne.
   L'étiquette est masquée pour libérer la largeur, et la taille du texte suit
   celle de l'écran (clamp) : elle descend jusqu'à 10 px sur les plus petits
   appareils, ce qui laisse passer environ 55 caractères sans repli. */
.cl-announce__ico{flex:0 0 auto;opacity:.9}
@media (max-width:640px){
  /* Remplissage symétrique : sans lui, le bouton de fermeture décalait le
     message vers la gauche et il n'était plus centré. */
  .cl-announce__row{
    gap:7px;padding-left:34px;padding-right:34px;
    flex-wrap:nowrap;white-space:nowrap;justify-content:center;
    font-size:clamp(10px,3.15vw,13px);letter-spacing:0}
  .cl-announce__label,.cl-announce__dot{display:none}
  .cl-announce__row > span{overflow:hidden;text-overflow:ellipsis}
  .cl-announce__ico{width:15px;height:15px}
  .cl-announce__close{right:10px}
}

/* Chrome — barre de confiance */
.cl-trust{background:var(--navy);color:#cdd6ee;font-family:var(--body);font-weight:500;font-size:12.5px}
.cl-trust__row{max-width:var(--wrap);margin:0 auto;padding:12px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:20px}
.cl-trust__item{display:flex;align-items:center;gap:9px}
.cl-trust__item--white{color:#fff}
.cl-trust b{color:#fff}
.cl-trust__star{color:var(--star);letter-spacing:1px}
/* Pictogramme d'un élément de la barre ([remise]). Il ne doit jamais se
   comprimer : sans flex-shrink:0, le flex l'écrase avant le texte et le ticket
   devient un trait. Le décalage d'1px remet son centre optique sur la ligne de
   base du texte — un tracé à angles droits paraît sinon monter légèrement. */
.cl-trust__ico{flex:0 0 auto;position:relative;top:.5px}
/* Défilement continu de la barre de confiance sur petit écran.
   Le rail contient la ligne et sa copie exacte, côte à côte. Le translater de
   -50 % le ramène très exactement sur la position de départ : la boucle est
   invisible. Le rail est le seul élément animé, en transform pur — composé par
   le GPU, sans recalcul de mise en page.
   En version bureau, display:contents neutralise complètement le rail. */
.cl-trust__track{display:contents}
.cl-trust__row--copie{display:none}
@media (max-width:860px){
  .cl-trust--defile{overflow:hidden}
  /* Pas de « gap » sur le rail : avec deux enfants seulement, 50 % de sa largeur
     ne vaut pas « une ligne + un écart » et la boucle sauterait de la moitié de
     l'écart à chaque tour. L'écart est donc porté par chaque ligne, ce qui rend
     les deux moitiés du rail strictement identiques. */
  .cl-trust--defile .cl-trust__track{
    display:flex;width:max-content;gap:0;
    animation:cl-defile 34s linear infinite;will-change:transform}
  .cl-trust--defile .cl-trust__row,
  .cl-trust--defile .cl-trust__row--copie{
    display:flex;flex-wrap:nowrap;flex:0 0 auto;
    width:max-content;max-width:none;margin:0;
    justify-content:flex-start;gap:28px;padding:12px 28px 12px 0}
  .cl-trust--defile .cl-trust__item{flex:0 0 auto;white-space:nowrap}
  /* Le doigt posé ou le curseur suspend le défilement (WCAG 2.2.2). */
  .cl-trust--defile:hover .cl-trust__track,
  .cl-trust--defile:active .cl-trust__track{animation-play-state:paused}
}
@keyframes cl-defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Réglage système « réduire les animations » : rien ne bouge tout seul,
   la barre se fait simplement glisser au doigt. */
@media (max-width:860px) and (prefers-reduced-motion:reduce){
  .cl-trust--defile{overflow:hidden}
  .cl-trust--defile .cl-trust__track{
    animation:none;width:auto;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-inline:var(--gutter)}
  .cl-trust--defile .cl-trust__track::-webkit-scrollbar{display:none}
  .cl-trust--defile .cl-trust__row--copie{display:none}
}
.cl-flag{display:inline-flex}
.cl-flag span{width:6px;height:12px}
.cl-flag i:nth-child(1){background:var(--fr-blue)}
.cl-flag i{width:6px;height:12px;display:inline-block}
.cl-flag i.b{background:var(--fr-blue)}.cl-flag i.w{background:#fff}.cl-flag i.r{background:var(--fr-red)}
/* Drapeau portugais : proportions officielles, 2/5 vert et 3/5 rouge. */
.cl-flag--pt i.g{width:7px;background:#046a38}
.cl-flag--pt i.r2{width:11px;background:#da291c}
/* Deux drapeaux côte à côte : un petit espace pour qu'ils ne se collent pas. */
.cl-flag + .cl-flag{margin-left:5px}

/* Chrome — header sticky */
.cl-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.cl-header__row{max-width:var(--wrap);margin:0 auto;padding:14px var(--gutter);display:flex;align-items:center;gap:36px}
.cl-logo{display:flex;align-items:center;gap:12px;color:inherit}
.cl-logo:hover{color:inherit}
.cl-logo img{width:52px;height:52px;object-fit:contain;display:block}
.cl-logo__lock{font-family:var(--osw);line-height:.92;display:block}
.cl-logo__top{display:block;font-weight:600;font-size:15px;letter-spacing:.14em;color:var(--grey);text-transform:uppercase}
.cl-logo__main{display:block;font-weight:700;font-size:24px;letter-spacing:.02em;color:var(--ink);text-transform:uppercase}
.cl-nav{display:flex;align-items:center;gap:26px;margin-left:8px;font-family:var(--osw);font-weight:600;font-size:15px;letter-spacing:.04em}
.cl-nav>a,.cl-nav__btn{color:var(--ink);padding:6px 0;text-transform:uppercase;display:inline-flex;align-items:center;gap:5px}
.cl-nav>a:hover,.cl-nav__btn:hover{color:var(--blue)}
.cl-nav>a.is-active,.cl-nav__btn.is-active{color:var(--blue)}
.cl-nav__caret{font-size:10px;opacity:.7}
.cl-nav__has{position:relative}
.cl-nav__drop{position:absolute;top:34px;left:-14px;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-drop);padding:8px;z-index:50;display:none}
.cl-nav__has.open .cl-nav__drop{display:block}
.cl-nav__drop a{display:block;padding:10px 12px;border-radius:7px;font-family:var(--body);font-weight:500;font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink-3)}
.cl-nav__drop a:hover{background:var(--page);color:var(--ink-3)}
.cl-header__tools{margin-left:auto;display:flex;align-items:center;gap:6px}
.cl-icon-btn{width:42px;height:42px;border-radius:9px;display:grid;place-items:center;color:var(--ink-3);background:none}
.cl-icon-btn:hover{background:var(--blue-soft)}
.cl-cart-btn{position:relative;width:44px;height:44px;border-radius:9px;display:grid;place-items:center;color:#fff;background:var(--blue)}
.cl-cart-btn:hover{background:var(--blue-hover);color:#fff}
.cl-cart-count{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--navy);color:#fff;font-family:var(--body);font-weight:700;font-size:11px;line-height:20px;text-align:center;border:2px solid #fff}
.cl-burger{display:none;width:26px;height:20px;flex-direction:column;justify-content:space-between}
.cl-burger span{display:block;height:2px;background:var(--ink);border-radius:2px}

/* ==========================================================================
   Mini-panier (drawer) + overlay + guide tailles
   ========================================================================== */
.cl-overlay{position:fixed;inset:0;background:rgba(7,24,74,.5);z-index:60;opacity:0;pointer-events:none;transition:opacity .28s}
.cl-overlay.open{opacity:1;pointer-events:auto}
.cl-drawer{position:fixed;top:0;right:0;height:100%;width:420px;max-width:92vw;background:#fff;z-index:61;display:flex;flex-direction:column;box-shadow:-18px 0 50px rgba(7,24,74,.24);transform:translateX(105%);transition:transform .32s cubic-bezier(.4,0,.2,1)}
.cl-drawer.open{transform:translateX(0)}
.cl-drawer__head{padding:22px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.cl-drawer__head h3{font-family:var(--osw);text-transform:uppercase;font-weight:700;font-size:22px}
.cl-drawer__head h3 span{color:var(--grey)}
.cl-drawer__close{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;color:var(--ink-3);font-size:17px}
.cl-drawer__close:hover{background:var(--blue-soft)}
#cl-cart-content{flex:1;display:flex;flex-direction:column;min-height:0}
.cl-drawer__body{flex:1;overflow-y:auto;padding:8px 24px}
.cl-drawer__empty{text-align:center;padding:60px 10px;color:var(--grey)}
.cl-drawer__empty .cl-btn{margin-top:18px}
.cl-cartline{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line-3)}
.cl-cartline__img{width:66px;height:66px;flex:none;border-radius:9px;overflow:hidden;background:#f0eee9}
.cl-cartline__img img{width:100%;height:100%;object-fit:cover}
.cl-cartline__mid{flex:1}
.cl-cartline__title{font-family:var(--osw);text-transform:uppercase;font-weight:600;font-size:15px;line-height:1.1}
.cl-cartline__meta{font-size:13px;color:var(--grey);margin-top:4px}
.cl-cartline__ctrl{display:flex;align-items:center;gap:12px;margin-top:10px}
.cl-qtybox{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.cl-qtybox button{width:30px;height:30px;color:var(--ink-3);font-size:16px}
.cl-qtybox span{min-width:26px;text-align:center;font-weight:600;font-size:14px}
.cl-cartline__remove{font-size:13px;color:var(--err)}
.cl-cartline__line{font-family:var(--osw);font-weight:700;font-size:16px}
/* Bloc pack unique dans le tiroir : titre + composants listés dessous. */
.cl-cartline--pack{background:linear-gradient(0deg,rgba(7,24,74,.02),rgba(7,24,74,.02));border-radius:10px;padding:14px 12px;margin:6px 0;border-bottom:1px solid var(--line-3)}
.cl-pack-badge{display:inline-block;font-family:var(--osw);font-weight:700;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--blue,#0042e3);border-radius:5px;padding:2px 6px;vertical-align:middle;margin-right:4px}
.cl-pack-contents{list-style:none;margin:7px 0 2px;padding:0;font-size:12.5px;color:var(--muted);line-height:1.45}
.cl-pack-contents li{position:relative;padding-left:12px}
.cl-pack-contents li:before{content:"›";position:absolute;left:0;color:var(--blue,#0042e3);font-weight:700}
.cl-pack-contents li span{color:var(--ink-3)}
.cl-pack-free{color:#1f9d55;font-style:normal;font-weight:600}
.cl-pack-unit{font-size:12px;color:var(--grey)}
.cl-cartline--removing{transition:opacity .2s}
.cl-drawer__foot{padding:20px 24px;border-top:1px solid var(--line);background:#faf9f6}
.cl-drawer__sub{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--muted);margin-bottom:8px}
.cl-drawer__sub b{font-family:var(--osw);font-weight:700;font-size:20px;color:var(--ink)}
.cl-drawer__ship{font-size:12.5px;color:var(--grey);margin-bottom:14px}
.cl-drawer__foot .cl-btn{width:100%}
.cl-drawer__cont{width:100%;margin-top:10px;font-weight:500;font-size:13px;color:var(--muted);padding:8px}

/* ==========================================================================
   Accueil — Hero (photo immersive) + slider + sceau
   ========================================================================== */
.cl-hero{position:relative;background:var(--ink);overflow:hidden}
.cl-hero__photo{position:absolute;inset:0;left:38%;background-position:center right;background-size:cover;background-repeat:no-repeat}
.cl-hero__grad{position:absolute;inset:0;background:linear-gradient(90deg,#fbfaf7 0 34%,rgba(251,250,247,.94) 44%,rgba(251,250,247,0) 62%)}
.cl-hero__inner{position:relative;max-width:var(--wrap);margin:0 auto;padding:64px var(--gutter) 52px;min-height:560px}
.cl-hero__text{max-width:560px}
.cl-hero__title{font-family:var(--osw);font-weight:700;font-size:66px;line-height:1.14;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink)}
.cl-hero__cats{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;font-family:var(--osw);font-weight:600;font-size:21px;color:var(--blue);letter-spacing:.01em}
.cl-hero__cats i{color:#c9c4ba;font-style:normal}
.cl-hero__sub{margin-top:20px;font-weight:400;font-size:19px;line-height:1.5;color:var(--ink-2);max-width:430px}
.cl-hero__rating{display:flex;align-items:center;gap:12px;margin-top:22px}
.cl-hero__rating .cl-star5{color:var(--star);font-size:19px;letter-spacing:2px}
.cl-hero__rating span{font-size:16px;color:var(--ink-2)}
.cl-hero__rating b{color:var(--ink)}
.cl-hero .cl-btn{margin-top:30px}
.cl-hero__features{display:flex;gap:30px;margin-top:34px;flex-wrap:wrap}
.cl-feature{display:flex;align-items:center;gap:11px;color:#3a382f}
.cl-feature svg,.cl-feature img{display:block;width:27px;height:27px;object-fit:contain}
.cl-feature span{font-weight:600;font-size:13.5px;line-height:1.25}
.cl-feature span b,.cl-feature>span>span{display:block;font-weight:600}
/* Sceau SAG */
/* Cocarde officielle Société des Avis Garantis.
   Leur script l'injecte en position fixe en bas à gauche de l'écran, où elle
   masque la quantité et le bouton d'ajout sur mobile. On la déplace dans le
   bandeau d'accueil (voir main.js) et on la neutralise ailleurs sur petit écran. */
/* Cocarde officielle Avis Garantis.
   Leur script l'injecte en position fixe en bas à gauche, où elle recouvrait le
   sélecteur de quantité et le bouton d'ajout sur mobile. On la déplace dans le
   bandeau d'accueil (voir main.js) ; partout ailleurs elle est masquée.
   Les !important sont nécessaires : leur script anime le badge et réimpose sa
   propre échelle. */
.agJsWidget:not(.cl-sag--inline){display:none!important}
.agJsWidget.cl-sag--inline{position:static!important;inset:auto!important;
  transform:scale(1.5)!important;transform-origin:top right!important;
  margin:0!important;z-index:auto!important;animation:none!important;opacity:1!important}
.cl-hero__sagslot{position:absolute;top:34px;right:26px;width:150px;min-height:200px;z-index:3}
@media (max-width:860px){
  /* Sur mobile, la cocarde passe AU-DESSUS du titre : c'est l'argument qui
     rassure avant même qu'on lise l'accroche, et elle a enfin la place d'être
     lisible. La hauteur réservée tient compte de l'agrandissement. */
  .cl-hero__inner{display:flex;flex-direction:column;padding-top:18px}
  /* Marge haute réduite : la cocarde arrive juste sous l'en-tête, sans le grand
     vide qu'imposait le remplissage d'origine du bandeau. */
  .cl-hero__sagslot{position:static;order:-1;width:100%;margin:0 0 16px;
    display:flex;justify-content:center;min-height:0;padding:0 0 62px}
  /* Un peu plus discrète que sur ordinateur : sur un écran étroit, une cocarde
     trop grande écrase le titre au lieu de l'accompagner. */
  .agJsWidget.cl-sag--inline{transform:scale(1.32)!important;transform-origin:top center!important}
}
.cl-seal{position:absolute;top:44px;right:10px;width:160px;height:212px}
.cl-seal svg.cl-seal__medal{position:absolute;top:0;left:0;filter:drop-shadow(0 10px 22px rgba(20,18,15,.32))}
.cl-seal__num{position:absolute;top:55px;left:0;width:160px;text-align:center}
.cl-seal__rate{font-family:var(--osw);font-weight:700;font-size:36px;line-height:.9;color:var(--ink)}
.cl-seal__rate small{font-size:15px;color:var(--grey)}
.cl-seal__stars{color:var(--star);font-size:13px;letter-spacing:1.5px;margin-top:3px}
.cl-seal__count{font-weight:600;font-size:9px;line-height:1.1;color:var(--grey);letter-spacing:.04em;margin-top:3px}

/* Bande livraison mobile sous le hero */
.cl-hero-ship{display:none;background:var(--navy);color:#fff;text-align:center;font-family:var(--body);font-weight:600;font-size:12px;padding:11px 16px}
@media(max-width:900px){.cl-hero-ship{display:block}}

/* Slider controls */
.cl-slider{position:relative}
.cl-slider__viewport{overflow:hidden}
.cl-slider__track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.cl-slide{min-width:100%;flex:0 0 100%;position:relative;background:#161514;overflow:hidden}
.cl-slider__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.92);width:44px;height:44px;border-radius:50%;font-size:1.6rem;line-height:1;color:var(--navy);box-shadow:var(--shadow-card);z-index:6}
.cl-slider__prev{left:16px}.cl-slider__next{right:16px}
.cl-slider__dots{position:absolute;bottom:20px;left:0;right:0;display:flex;gap:8px;justify-content:center;z-index:6}
.cl-slider__dots button{width:10px;height:10px;padding:0;border-radius:50%;background:rgba(7,24,74,.28)}
.cl-slider__dots button.is-active{background:var(--blue);width:22px;border-radius:6px}

/* ==========================================================================
   Accueil — Best-sellers (carte "accueil")
   ========================================================================== */
.cl-sec{max-width:var(--wrap);margin:0 auto;padding:56px var(--gutter) 20px}
.cl-sec--tight{padding-top:24px}
.cl-bs__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:26px}
.cl-bs__filters{display:flex;gap:8px;flex-wrap:wrap}
.cl-fpill{font-family:var(--osw);font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase;padding:11px 16px;border-radius:9px;background:#fff;color:var(--ink-2);border:1px solid var(--line-2)}
.cl-fpill.is-active{background:var(--blue);color:#fff;border-color:var(--blue)}
.cl-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cl-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* État de chargement AJAX de la grille catalogue (filtrage sans rechargement) */
.cl-grid3.is-loading{opacity:.55;pointer-events:none;transition:opacity .15s}
.cl-catwrap{display:contents}
.cl-avis__stars .cl-star5{font-size:16px}
.cl-dnote__stars .cl-star5{font-size:18px;justify-content:center}
.cl-pcard__rate .cl-star5,.cl-ccard__rate .cl-star5{font-size:13px}
.cl-hero__rating .cl-star5{font-size:19px}
.cl-pdp__rating .cl-star5{font-size:17px}
.cl-rsummary__stars .cl-star5{font-size:20px;justify-content:center}
.cl-ritem__sub .cl-star5{font-size:12px}

.cl-pcard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(20,18,15,.05);transition:.18s}
.cl-pcard:hover{box-shadow:var(--shadow-card);transform:translateY(-3px)}
/* ⚠️ CADRE CARRÉ, ET NON PLUS UNE HAUTEUR FIXE EN PAYSAGE.
   Le cadre valait 280×210 (paysage 1,33) alors que la moitié du catalogue est
   photographiée en portrait : ces visuels perdaient 42 à 49 % de leur hauteur.
   Le carré ne supprime pas le vide — rien ne le peut avec deux orientations —
   mais il le répartit : 25 % sur les côtés d'un portrait, 33 % en haut et en bas
   d'un paysage, au lieu de 44 % de vide latéral dans un cadre large. */
.cl-pcard__media{position:relative;aspect-ratio:1;overflow:hidden;background:#0d1730;display:block}
.cl-pcard__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Fond blanc porté par le CADRE et non par l'image : sinon le fond marine du
   conteneur reste visible dans les marges laissées par une photo qui ne remplit
   pas le carré, et la vignette se retrouve encadrée de bleu foncé. */
.cl-pcard__media.contain{background:#fff}
.cl-pcard__media.contain img{object-fit:contain;background:#fff}
.cl-pbadge{position:absolute;top:14px;left:14px;z-index:2;background:var(--accent);color:#fff;font-family:var(--osw);font-weight:600;font-size:11px;letter-spacing:.08em;padding:8px 11px;border-radius:7px;text-transform:uppercase}
.cl-pcard__body{padding:20px;display:flex;flex-direction:column;flex:1}
.cl-pcard__title{font-family:var(--osw);font-weight:600;font-size:22px;line-height:1.06;text-transform:uppercase;min-height:48px;color:var(--ink)}
.cl-pcard__desc{margin-top:8px;font-size:14px;line-height:1.45;color:var(--muted);min-height:40px}
.cl-pcard__feats{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.cl-pcard__feats li{display:flex;align-items:center;gap:9px;font-size:13.5px;line-height:1.3;color:var(--ink-3)}
.cl-pcard__feats li b{color:var(--accent);font-weight:700}
.cl-pcard__price{display:flex;align-items:center;gap:10px;margin-top:18px}
.cl-pcard__old{font-size:15px;color:var(--grey-2);text-decoration:line-through}
.cl-pcard__now{font-family:var(--osw);font-weight:700;font-size:26px;color:var(--ink)}
.cl-pcard__disc{margin-left:auto;background:var(--accent);color:#fff;font-family:var(--body);font-weight:700;font-size:12px;padding:6px 8px;border-radius:6px}
.cl-pcard__rate{display:flex;align-items:center;gap:8px;margin-top:12px}
.cl-pcard__rate .cl-star5{color:var(--star);font-size:13px;letter-spacing:1px}
.cl-pcard__rate span{font-size:13px;color:var(--grey)}
.cl-pcard__actions{display:flex;gap:8px;margin-top:16px}
.cl-pcard__voir{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--blue);color:#fff;font-family:var(--osw);font-weight:600;font-size:14px;letter-spacing:.05em;text-transform:uppercase;padding:15px;border-radius:9px}
.cl-pcard__voir:hover{background:var(--blue-hover);color:#fff}
.cl-pcard__add{width:48px;flex:none;border-radius:9px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:22px;line-height:1}
.cl-pcard__add:hover{color:#fff;filter:brightness(1.05)}

/* ==========================================================================
   Accueil — Univers
   ========================================================================== */
.cl-univ-head{text-align:center;margin-bottom:26px}
.cl-univ{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cl-utile{position:relative;border-radius:14px;overflow:hidden;height:280px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff}
.cl-utile:hover{transform:translateY(-3px);color:#fff}
.cl-utile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cl-utile__grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,24,74,0) 34%,rgba(7,24,74,.85))}
.cl-utile__sq{position:absolute;top:16px;left:16px;z-index:2;width:38px;height:38px;border-radius:9px;background:var(--accent)}
.cl-utile__body{position:relative;padding:20px}
.cl-utile__title{font-family:var(--osw);font-weight:700;font-size:25px;line-height:1;text-transform:uppercase}
.cl-utile__tag{margin-top:6px;font-size:13.5px;line-height:1.35;color:rgba(255,255,255,.85)}
.cl-utile__link{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-family:var(--osw);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase}

/* Accueil — Réassurance */
.cl-reassure-panel{background:var(--blue-soft);border:1px solid var(--blue-border);border-radius:16px;padding:34px 30px;display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.cl-reassure-item{display:flex;flex-direction:column;gap:12px}
.cl-reassure-item__ico{width:44px;height:44px;border-radius:11px;background:#fff;border:1px solid #d3ddf7;display:grid;place-items:center;color:var(--blue)}
.cl-reassure-item__t{font-family:var(--osw);font-weight:600;font-size:14px;line-height:1.15;letter-spacing:.03em;text-transform:uppercase}
.cl-reassure-item p{font-size:13px;line-height:1.45;color:#5a6478}

/* Accueil — double note */
.cl-dnote{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:720px;margin:0 auto}
.cl-dnote__card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;text-align:center}
.cl-dnote__logo{font-family:var(--osw);text-transform:uppercase;font-weight:600;font-size:12px;letter-spacing:.08em;color:var(--muted)}
.cl-dnote__rate{font-family:var(--osw);font-weight:700;font-size:46px;line-height:1;color:var(--ink);margin-top:6px}
.cl-dnote__rate small{font-size:18px;color:var(--grey)}
.cl-dnote__stars{color:var(--star);font-size:18px;letter-spacing:2px;margin-top:6px}
.cl-dnote__count{font-size:13px;color:var(--muted);margin-top:8px}
.cl-dnote__count a{color:var(--muted)}

/* Accueil — avis clients */
.cl-avis{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cl-avis__card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px}
.cl-avis__stars{color:var(--star);font-size:16px;letter-spacing:2px}
.cl-avis__quote{margin:14px 0 18px;font-size:15.5px;line-height:1.55;color:var(--ink-3)}
.cl-avis__who{display:flex;align-items:center;gap:12px}
.cl-avis__ava{width:44px;height:44px;border-radius:50%;background:repeating-linear-gradient(135deg,#e0dbd1 0 8px,#e9e4da 8px 16px);flex:none;overflow:hidden}
.cl-avis__name{font-weight:700;font-size:14px}
.cl-avis__verif{display:inline-flex;align-items:center;gap:6px;background:#e9f6ee;color:var(--ok);font-weight:600;font-size:11px;padding:5px 8px;border-radius:20px;width:fit-content;margin-top:5px}

/* Accueil — garantie */

/* Accueil — journal */
.cl-jcard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;color:inherit}
.cl-jcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);color:inherit}
.cl-jcard__media{height:180px;position:relative;background:repeating-linear-gradient(135deg,#e9e5dd 0 12px,#f1eee7 12px 24px);overflow:hidden}
.cl-jcard__media img{width:100%;height:100%;object-fit:cover}
.cl-jtag{position:absolute;top:14px;left:14px;background:var(--accent);color:#fff;font-family:var(--osw);font-weight:600;font-size:11px;letter-spacing:.06em;padding:7px 10px;border-radius:6px;text-transform:uppercase}
.cl-jcard__body{padding:20px;display:flex;flex-direction:column;gap:10px}
.cl-jcard__title{font-family:var(--osw);font-weight:600;font-size:21px;line-height:1.1;text-transform:uppercase;color:var(--ink)}
.cl-jcard__excerpt{font-size:14px;line-height:1.5;color:var(--muted)}
.cl-jcard__more{font-family:var(--osw);font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);display:inline-flex;gap:7px;align-items:center}

/* Accueil — newsletter */
.cl-news{background:var(--blue);color:#fff}
.cl-news__inner{max-width:1000px;margin:0 auto;padding:56px var(--gutter);text-align:center}
.cl-news__eyebrow{font-family:var(--osw);font-weight:600;font-size:13px;letter-spacing:.16em;color:rgba(255,255,255,.75);margin-bottom:12px;text-transform:uppercase}
.cl-news h2{font-family:var(--osw);font-weight:700;font-size:42px;text-transform:uppercase;color:#fff}
.cl-news p{margin-top:14px;font-size:17px;line-height:1.5;color:rgba(255,255,255,.9);max-width:520px;margin-left:auto;margin-right:auto}
.cl-news form{margin-top:26px;display:flex;gap:10px;max-width:480px;margin-left:auto;margin-right:auto}
.cl-news input{flex:1;border:0;border-radius:11px;padding:16px 18px;font-size:15px;color:var(--ink);outline:none}
.cl-news__btn{background:var(--navy);color:#fff;font-family:var(--osw);font-weight:600;font-size:15px;letter-spacing:.05em;text-transform:uppercase;padding:0 26px;border-radius:11px}
.cl-news__btn:hover{background:#04123a;color:#fff}
.cl-news__ok{margin-top:14px;font-weight:600;font-size:14px;color:#ffd35e}
/* Mention légale du bloc newsletter : la contrepartie et la sortie annoncées
   avant la saisie, pas après. */
.cl-news__legal{margin-top:12px;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.7);max-width:460px;margin-left:auto;margin-right:auto}
.cl-newsletter-form button[disabled]{opacity:.6;cursor:progress}

/* Accueil — instagram */
.cl-insta-head{text-align:center;margin-bottom:22px}
.cl-insta-head h2{font-family:var(--osw);font-weight:700;font-size:32px;text-transform:uppercase}
.cl-insta-head a{font-weight:600;font-size:16px;color:var(--blue)}
.cl-insta{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.cl-insta a{aspect-ratio:1;border-radius:11px;overflow:hidden;background:repeating-linear-gradient(135deg,#e2ddd3 0 10px,#eae5db 10px 20px)}
.cl-insta a:hover{filter:brightness(.96)}
.cl-insta img{width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   Footer riche (accueil) + bande confiance
   ========================================================================== */
.cl-ftrust{background:#fff;border-top:1px solid var(--line)}
.cl-ftrust__grid{max-width:var(--wrap);margin:0 auto;padding:34px var(--gutter);display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.cl-ftrust__item{display:flex;align-items:flex-start;gap:14px}
.cl-ftrust__ico{width:44px;height:44px;flex:none;border-radius:11px;background:var(--blue-soft);display:grid;place-items:center;color:var(--blue)}
.cl-ftrust__t{font-family:var(--osw);font-weight:600;font-size:14px;line-height:1.15;letter-spacing:.03em;text-transform:uppercase}
.cl-ftrust__item p{margin-top:5px;font-size:13px;line-height:1.4;color:var(--muted)}

.cl-footer{background:var(--navy);color:#c3ccdf}
.cl-footer__grid{max-width:var(--wrap);margin:0 auto;padding:56px var(--gutter) 30px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.cl-footer__brandline{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.cl-footer__logobox{width:52px;height:52px;flex:none;border-radius:12px;background:#fff;display:grid;place-items:center}
.cl-footer__logobox img{width:42px;height:42px;object-fit:contain}
.cl-footer__lock{font-family:var(--osw);line-height:.92}
.cl-footer__lock .t{display:block;font-weight:600;font-size:13px;letter-spacing:.14em;color:#8fa0c8;text-transform:uppercase}
.cl-footer__lock .m{display:block;font-weight:700;font-size:22px;color:#fff;text-transform:uppercase}
.cl-footer__brand p{font-size:14px;line-height:1.6;max-width:320px}
.cl-footer__social{display:flex;gap:10px;margin-top:18px}
.cl-footer__social a{width:40px;height:40px;border-radius:10px;border:1px solid #1e315f;display:grid;place-items:center;color:#c3ccdf}
.cl-footer__social a:hover{background:#0d2258;color:#fff}
.cl-footer__col h4{font-family:var(--osw);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.cl-footer__col ul{display:flex;flex-direction:column;gap:11px}
.cl-footer__col a{font-size:14px;line-height:1.3;color:#c3ccdf}
.cl-footer__col a:hover{color:#fff}
.cl-footer__bottom{border-top:1px solid #16264f}
.cl-footer__bottomrow{max-width:var(--wrap);margin:0 auto;padding:20px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#8fa0c8}
.cl-pay{display:flex;align-items:center;gap:8px}
/* Signature du créateur : lisible sans se disputer l'attention avec la mention
   légale qui la précède. Souligné seulement au survol. */
.cl-footer__auteur{color:#8fa0c8;text-decoration:none;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.cl-footer__auteur:hover{color:#fff;border-bottom-color:rgba(255,255,255,.45)}
.cl-pay span{background:#0d2258;border:1px solid #1e315f;border-radius:6px;padding:6px 10px;font-weight:600;font-size:11px;color:#c3ccdf}

/* Footer compact (pages internes) */
.cl-footer-compact{background:var(--navy);color:#c3ccdf}
.cl-footer-compact__row{max-width:var(--wrap);margin:0 auto;padding:44px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cl-footer-compact__brand{display:flex;align-items:center;gap:12px}
.cl-footer-compact__logobox{width:48px;height:48px;flex:none;border-radius:12px;background:#fff;display:grid;place-items:center}
.cl-footer-compact__logobox img{width:38px;height:38px;object-fit:contain}
.cl-footer-compact p{font-size:13px}

/* ==========================================================================
   Fil d'ariane
   ========================================================================== */
.cl-crumb{max-width:var(--wrap);margin:0 auto;padding:20px var(--gutter) 0;font-weight:500;font-size:13px;color:var(--grey);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cl-crumb a{color:var(--grey)}
.cl-crumb a:hover{color:var(--blue)}
.cl-crumb .cur{color:var(--ink)}

/* ==========================================================================
   Catalogue / Catégorie
   ========================================================================== */
.cl-shop-head{max-width:var(--wrap);margin:0 auto;padding:14px var(--gutter) 8px}
.cl-shop-head h1{font-family:var(--osw);font-weight:700;font-size:40px;text-transform:uppercase}
.cl-shop-head p{margin-top:10px;font-size:16px;line-height:1.5;color:var(--muted);max-width:640px}
.cl-shop-layout{max-width:var(--wrap);margin:0 auto;padding:16px var(--gutter) 60px;display:grid;grid-template-columns:262px 1fr;gap:32px;align-items:start}
.cl-filters{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;position:sticky;top:92px}
.cl-filters__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cl-filters__head h2{font-family:var(--osw);font-weight:700;font-size:18px;text-transform:uppercase}
.cl-filters__reset{font-weight:500;font-size:12px;color:var(--blue)}
.cl-fgroup{border-top:1px solid var(--line-3);padding:18px 0 4px}
.cl-fgroup__t{font-family:var(--osw);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin-bottom:12px}
.cl-fcheck{display:flex;align-items:center;gap:10px;font-weight:500;font-size:14px;color:var(--ink-3);cursor:pointer;margin-bottom:11px}
.cl-fcheck input{display:none}
.cl-fbox{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;border:2px solid #cfcabf;background:#fff;flex:none;color:#fff;font-size:12px}
.cl-fcheck input:checked+.cl-fbox{background:var(--blue);border-color:var(--blue)}
.cl-fcheck__count{margin-left:auto;font-weight:500;font-size:12px;color:var(--grey-2)}
.cl-fsizes{display:flex;flex-wrap:wrap;gap:8px}
.cl-fsize{font-family:var(--osw);font-weight:600;font-size:12px;letter-spacing:.03em;padding:9px 11px;border-radius:8px;background:#fff;color:var(--ink-2);border:1px solid var(--line-2)}
.cl-fsize.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.cl-fprice input[type=range]{width:100%;accent-color:var(--blue)}
.cl-fprice__row{display:flex;justify-content:space-between;font-weight:500;font-size:13px;color:var(--muted);margin-top:8px}
.cl-fprice__row b{color:var(--ink)}
.cl-fswatches{display:flex;flex-wrap:wrap;gap:10px}
.cl-fswatch{width:28px;height:28px;border-radius:50%;outline:1px solid var(--line-2);outline-offset:2px;cursor:pointer}
.cl-fswatch.on{outline:2px solid var(--blue)}
.cl-fbox.is-checked{background:var(--blue);border-color:var(--blue)}
.cl-fsize:has(input:checked){background:var(--blue);color:#fff;border-color:var(--blue)}
.cl-fswatch:has(input:checked){outline:2px solid var(--blue)}
.cl-filters-form .cl-filters__head{border:0;padding:0}
.cl-sort-form label,.cl-sort-list label{display:flex;align-items:center;gap:10px;font-weight:500;font-size:14px;color:var(--muted)}
.cl-sort-form select,.cl-sort-list select{border:1px solid var(--line-2);border-radius:8px;padding:9px 12px;font-weight:600;font-size:13px;color:var(--ink);background:#fff}
.cl-sort-list{padding:20px}
.cl-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:12px 18px}
.cl-toolbar__count{font-weight:500;font-size:14px;color:var(--muted)}
.cl-toolbar__count b{color:var(--ink)}
.cl-toolbar label{display:flex;align-items:center;gap:10px;font-weight:500;font-size:14px;color:var(--muted)}
.cl-toolbar select{border:1px solid var(--line-2);border-radius:8px;padding:9px 12px;font-weight:600;font-size:13px;color:var(--ink);background:#fff}
/* Bascule d'affichage 1/2 colonnes : masquée sur desktop (la grille reste en 3 colonnes,
   rendu strictement inchangé) ; affichée et stylée uniquement en mobile (@media ≤560px). */
.cl-viewswitch{display:none}

/* Carte catalogue (variante compacte, CTA encre) */
.cl-ccard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;color:inherit;box-shadow:0 1px 3px rgba(20,18,15,.05)}
.cl-ccard:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);color:inherit}
.cl-ccard__media{position:relative;aspect-ratio:1;overflow:hidden;background:#0d1730}
.cl-ccard__media.contain{background:#fff}
.cl-ccard__media.contain img{object-fit:contain}
.cl-ccard__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cl-ccard__body{padding:18px;display:flex;flex-direction:column;flex:1}
.cl-ccard__eyebrow{font-family:var(--osw);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:7px}
.cl-ccard__title{font-family:var(--osw);font-weight:600;font-size:19px;line-height:1.08;text-transform:uppercase;min-height:42px;color:var(--ink)}
.cl-ccard__rate{display:flex;align-items:center;gap:7px;margin-top:9px}
.cl-ccard__rate .cl-star5{color:var(--star);font-size:12px;letter-spacing:1px}
.cl-ccard__rate span{font-size:12px;color:var(--grey)}
.cl-ccard__price{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:14px}
.cl-ccard__old{font-size:14px;color:var(--grey-2);text-decoration:line-through}
.cl-ccard__now{font-family:var(--osw);font-weight:700;font-size:23px;color:var(--ink)}
.cl-ccard__disc{margin-left:auto;background:var(--accent);color:#fff;font-weight:700;font-size:11px;padding:5px 7px;border-radius:5px}
.cl-ccard__voir{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--ink);color:#fff;font-family:var(--osw);font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase;padding:13px;border-radius:9px}
.cl-ccard__voir:hover{background:#2c2a26}
.cl-cbadge{position:absolute;top:12px;left:12px;z-index:2;background:var(--accent);color:#fff;font-family:var(--osw);font-weight:600;font-size:10px;letter-spacing:.08em;padding:7px 10px;border-radius:6px;text-transform:uppercase}

/* Pagination */
.cl-pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:34px}
.cl-pagination a,.cl-pagination span{min-width:42px;height:42px;border-radius:9px;display:grid;place-items:center;font-family:var(--osw);font-weight:600;font-size:14px;background:#fff;color:var(--ink-3);border:1px solid var(--line-2)}
.cl-pagination .current{background:var(--blue);color:#fff;border-color:var(--blue)}
.cl-pagination .dots{border:0;background:none}
.cl-pagination a:hover{border-color:var(--blue);color:var(--blue)}

/* Bannière catégorie */
/* ⚠️ HAUTEUR MINIMALE, JAMAIS FIXE.
   Avec `height`, la bannière rognait sa propre description : sur téléphone, le
   contenu réclamait 317 à 376 px pour 200 px accordés, et le texte disparaissait
   sous le bord — d'autant plus silencieusement que `overflow:hidden` le masque
   proprement, sans barre de défilement ni débordement visible.
   `min-height` garde la même allure quand le texte est court, et laisse la
   bannière grandir quand il ne tient pas. La correction vaut donc aussi pour les
   descriptions qu'on écrira plus tard en back-office : c'est ce qui la rend
   durable, la seule réduction des tailles ne ferait que reculer le problème.
   `overflow:hidden` reste : il détoure l'image de fond. Il ne coupe plus rien
   puisque la hauteur suit désormais le contenu. */
.cl-catbanner{position:relative;background:var(--navy);overflow:hidden;min-height:260px}
.cl-catbanner>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.cl-catbanner__grad{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,24,74,.92) 0 30%,rgba(7,24,74,.45) 70%,rgba(7,24,74,.2))}
.cl-catbanner__inner{position:relative;max-width:var(--wrap);margin:0 auto;padding:44px var(--gutter);height:100%;display:flex;flex-direction:column;justify-content:center;color:#fff}
.cl-catbanner__crumb{font-weight:500;font-size:13px;color:#aeb9d6;display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.cl-catbanner__crumb a{color:#aeb9d6}
.cl-catbanner__crumb .cur{color:#fff}
.cl-catbanner__pill{display:inline-block;width:fit-content;background:var(--accent);color:#fff;font-family:var(--osw);font-weight:600;font-size:12px;letter-spacing:.12em;padding:7px 13px;border-radius:100px;margin-bottom:14px;text-transform:uppercase}
.cl-catbanner__inner h1{font-family:var(--osw);font-weight:700;font-size:52px;line-height:1.14;text-transform:uppercase}
.cl-catbanner__inner p{margin-top:12px;font-size:17px;line-height:1.5;color:rgba(255,255,255,.9);max-width:560px}

/* ==========================================================================
   Fiche produit
   ========================================================================== */
.cl-pdp{max-width:var(--wrap);margin:0 auto;padding:22px var(--gutter) 8px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.cl-gallery{display:flex;gap:16px;position:sticky;top:92px}
.cl-gallery__thumbs{display:flex;flex-direction:column;gap:12px}
.cl-gallery__thumb{width:72px;height:72px;padding:0;border-radius:11px;overflow:hidden;background:#0d1730;border:1px solid var(--line-2)}
.cl-gallery__thumb.is-active{border:2px solid var(--blue)}
.cl-gallery__thumb img{width:100%;height:100%;object-fit:cover}
.cl-gallery__main{flex:1;position:relative;background:#0d1730;border:1px solid var(--line);border-radius:16px;overflow:hidden;aspect-ratio:1}
.cl-gallery__main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cl-gallery__main.contain img{object-fit:contain;background:#fff}
.cl-pdp__badge{position:absolute;top:16px;left:16px;z-index:2;background:var(--accent);color:#fff;font-family:var(--osw);font-weight:600;font-size:12px;letter-spacing:.08em;padding:9px 13px;border-radius:8px;text-transform:uppercase}
.cl-pdp__eyebrow{font-family:var(--osw);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.cl-pdp__title{font-family:var(--osw);font-weight:700;font-size:40px;line-height:1;text-transform:uppercase}
.cl-pdp__rating{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.cl-pdp__rating .cl-star5{color:var(--star);font-size:17px;letter-spacing:2px}
.cl-pdp__rating .txt{font-size:14px;color:var(--muted)}
.cl-pdp__rating .txt b{color:var(--ink)}
.cl-pdp__rating .dot{width:4px;height:4px;border-radius:50%;background:#cfcabf}
.cl-pdp__stock{font-weight:600;font-size:13px;color:var(--ok)}
.cl-pdp__stock.out{color:var(--err)}
.cl-pdp__readreviews{display:none;margin-left:auto;font-weight:600;font-size:12px;color:var(--blue)}
@media(max-width:900px){.cl-pdp__readreviews{display:inline}}
.cl-pdp__price{display:flex;align-items:baseline;gap:12px;margin-top:20px}
.cl-pdp__now{font-family:var(--osw);font-weight:700;font-size:40px;color:var(--ink)}
.cl-pdp__old{font-size:19px;color:var(--grey-2);text-decoration:line-through}
.cl-pdp__disc{background:var(--accent);color:#fff;font-weight:700;font-size:13px;padding:7px 10px;border-radius:7px}
.cl-pdp__note{margin-top:6px;font-size:13px;color:var(--grey)}
.cl-pdp__short{margin-top:20px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.cl-pdp__bullets{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cl-pdp__bullets li{display:flex;align-items:center;gap:10px;font-weight:500;font-size:14px;line-height:1.3;color:var(--ink-3)}
.cl-pdp__bullets li span{width:24px;height:24px;flex:none;border-radius:7px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-size:13px}
.cl-size{margin-top:26px}
.cl-size__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cl-size__head span{font-family:var(--osw);font-weight:600;font-size:14px;letter-spacing:.05em;text-transform:uppercase}
.cl-size__guide{font-weight:600;font-size:13px;color:var(--blue);display:flex;align-items:center;gap:6px}
.cl-size__opts{display:flex;flex-wrap:wrap;gap:10px}
.cl-size__btn{min-width:64px;height:48px;padding:0 14px;border-radius:10px;font-family:var(--osw);font-weight:600;font-size:14px;letter-spacing:.03em;background:#fff;color:var(--ink-3);border:1px solid var(--line-2)}
.cl-size__btn.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.cl-size__btn:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.cl-size__err{margin-top:10px;font-weight:600;font-size:13px;color:var(--err);display:none}
.cl-size__err.show{display:block}
/* RÈGLE R3.2 — sélecteur fautif signalé en rouge. Réutilise la couleur d'erreur
   existante (--err) : aucune nouvelle charte. Le rouge ne porte JAMAIS l'information
   seul, le texte .cl-size__err le double systématiquement. */
.cl-size.is-invalid .cl-size__head span{color:var(--err)}
.cl-size.is-invalid .cl-size__opts{border-radius:12px;box-shadow:0 0 0 2px rgba(180,69,58,.18);padding:4px;margin:-4px}
.cl-size.is-invalid .cl-size__btn{border-color:var(--err)}
.cl-size.is-invalid .cl-size__btn.on{border-color:var(--blue)}
.cl-buy__err,.cl-qv__err{margin-top:10px}
.cl-buy__err.show,.cl-qv__err.show{display:block}
/* R3.6 — bouton d'ajout à sélection incomplète : il reste cliquable et RÉPOND par un
   message (un bouton mort ferait croire à une panne, c'est le défaut à corriger). */
.cl-buy__add[aria-disabled="true"],.cl-mbuy__add[aria-disabled="true"]{opacity:.62;cursor:not-allowed}
/* Déclinaison épuisée : barrée et estompée, mais toujours cliquable — le client
   doit pouvoir comparer les coloris, et un clic répond par un message explicite
   plutôt que par un silence. Le barré est doublé d'une baisse de contraste et du
   `title` « Épuisé » : la couleur seule ne suffit pas (daltonisme, écran mobile
   en plein soleil). */
.cl-size__btn.is-epuise{
    color:var(--err);
    border-color:rgba(180,69,58,.35);
    background:repeating-linear-gradient(135deg,#fff 0 6px,rgba(180,69,58,.05) 6px 12px);
    text-decoration:line-through;
    text-decoration-color:var(--err);
    text-decoration-thickness:2px;
    opacity:.72;
    cursor:not-allowed;
}
.cl-size__btn.is-epuise:hover{border-color:var(--err);opacity:1}
/* Choisie malgré tout : on garde le barré rouge lisible au lieu du bleu « actif »,
   sinon l'option paraîtrait validée. */
.cl-size__btn.is-epuise.on{
    background:rgba(180,69,58,.10);
    color:var(--err);
    border-color:var(--err);
    opacity:1;
}
.cl-buy__add.is-epuise,.cl-mbuy__add.is-epuise{background:var(--ink-3);box-shadow:none}
.cl-buy__add.is-epuise:hover,.cl-mbuy__add.is-epuise:hover{background:var(--ink-3)}
.cl-buy{display:flex;align-items:center;gap:14px;margin-top:24px}
.cl-stepper{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:11px;overflow:hidden;background:#fff}
.cl-stepper button{width:48px;height:54px;color:var(--ink-3);font-size:20px}
.cl-stepper span{min-width:40px;text-align:center;font-family:var(--osw);font-weight:700;font-size:18px}
.cl-buy__add{flex:1;display:flex;align-items:center;justify-content:center;gap:12px;background:var(--blue);color:#fff;font-family:var(--osw);font-weight:600;font-size:17px;letter-spacing:.05em;text-transform:uppercase;height:54px;border-radius:11px;box-shadow:var(--shadow-cta)}
.cl-buy__add:hover{background:var(--blue-hover);color:#fff}
.cl-added{margin-top:12px;font-weight:600;font-size:14px;color:var(--ok);display:none}
.cl-added.show{display:block}
.cl-pdp__reassure{display:flex;gap:22px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line);flex-wrap:wrap}
.cl-pdp__reassure span{display:flex;align-items:center;gap:9px;font-weight:500;font-size:13px;line-height:1.3;color:var(--ink-2)}
.cl-pdp__reassure i{color:var(--blue);font-style:normal}

/* Onglets */
.cl-tabs{max-width:var(--wrap);margin:0 auto;padding:44px var(--gutter)}
.cl-tabs__bar{display:flex;gap:6px;border-bottom:1px solid #e6e2da}
.cl-tabs__btn{font-family:var(--osw);font-weight:600;font-size:15px;letter-spacing:.04em;text-transform:uppercase;padding:14px 18px;color:var(--grey);border-bottom:3px solid transparent;margin-bottom:-1px}
.cl-tabs__btn.on{color:var(--ink);border-bottom-color:var(--blue)}
.cl-tabs__panel{padding:28px 2px;max-width:820px;display:none}
.cl-tabs__panel.on{display:block}
.cl-tabs__panel p{font-size:16px;line-height:1.7;color:#3a382f}
.cl-compo{display:flex;flex-direction:column;gap:12px}
.cl-compo li{display:flex;justify-content:space-between;gap:20px;font-size:15px;line-height:1.4;color:#3a382f;border-bottom:1px solid var(--line-3);padding-bottom:12px}
.cl-compo li span{color:var(--grey)}
.cl-compo li b{color:var(--ink)}
.cl-care{display:flex;gap:26px;flex-wrap:wrap}
.cl-care__item{display:flex;flex-direction:column;align-items:center;gap:10px;width:120px;text-align:center}
.cl-care__ico{width:52px;height:52px;border-radius:50%;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-size:22px}
.cl-care__item span{font-weight:500;font-size:13px;line-height:1.35;color:var(--ink-2)}

/* Bloc avis SAG (fiche) */
.cl-reviews-sec{max-width:var(--wrap);margin:0 auto;padding:8px var(--gutter) 24px}
.cl-reviews-grid{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:start}
.cl-rsummary{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;text-align:center;position:sticky;top:92px}
.cl-rsummary__big{font-family:var(--osw);font-weight:700;font-size:56px;line-height:1;color:var(--ink)}
.cl-rsummary__big small{font-family:var(--osw);font-weight:600;font-size:20px;color:var(--grey)}
.cl-rsummary__stars{color:var(--star);font-size:20px;letter-spacing:3px;margin-top:8px}
.cl-rsummary__count{margin-top:8px;font-weight:500;font-size:14px;color:var(--muted)}
.cl-rbars{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.cl-rbar{display:flex;align-items:center;gap:9px;font-weight:500;font-size:12px;color:var(--grey)}
.cl-rbar__n{width:14px}
.cl-rbar__track{flex:1;height:7px;border-radius:4px;background:var(--line-3);overflow:hidden}
.cl-rbar__fill{display:block;height:100%;background:var(--star)}
.cl-rbar__c{width:32px;text-align:right}
.cl-rlist{display:flex;flex-direction:column;gap:16px}
.cl-ritem{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
.cl-ritem__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cl-ritem__who{display:flex;align-items:center;gap:12px}
.cl-ritem__ava{width:42px;height:42px;border-radius:50%;background:repeating-linear-gradient(135deg,#e0dbd1 0 8px,#e9e4da 8px 16px);flex:none}
.cl-ritem__name{font-weight:700;font-size:14px}
.cl-ritem__sub{display:flex;align-items:center;gap:8px;margin-top:5px}
.cl-ritem__sub .cl-star5{color:var(--star);font-size:12px;letter-spacing:1px}
.cl-ritem__verif{display:inline-flex;align-items:center;gap:5px;background:#e9f6ee;color:var(--ok);font-weight:600;font-size:10px;padding:4px 7px;border-radius:20px}
.cl-ritem__date{font-size:12px;color:var(--grey-2)}
.cl-ritem p{margin-top:14px;font-size:15px;line-height:1.6;color:var(--ink-3)}
.cl-reviews-empty{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px;color:var(--muted);text-align:center}

/* Cross-sell */
.cl-cross{max-width:var(--wrap);margin:0 auto;padding:24px var(--gutter) 60px}
.cl-cross h2{font-family:var(--osw);font-weight:700;font-size:32px;text-transform:uppercase;margin-bottom:24px}
.cl-cross__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cl-xcard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;color:inherit}
.cl-xcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);color:inherit}
.cl-xcard__media{position:relative;aspect-ratio:1;overflow:hidden;background:#0d1730}
.cl-xcard__media.contain{background:#fff}
.cl-xcard__media.contain img{object-fit:contain}
.cl-xcard__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cl-xcard__body{padding:16px;display:flex;flex-direction:column;flex:1}
.cl-xcard__eyebrow{font-family:var(--osw);font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.cl-xcard__title{font-family:var(--osw);font-weight:600;font-size:17px;line-height:1.1;text-transform:uppercase;min-height:38px;color:var(--ink)}
.cl-xcard__price{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:12px}
.cl-xcard__now{font-family:var(--osw);font-weight:700;font-size:20px}
.cl-xcard__old{font-size:13px;color:var(--grey-2);text-decoration:line-through}

/* Guide des tailles (tiroir) */
.cl-guide{position:fixed;top:0;right:0;height:100%;width:440px;max-width:92vw;background:#fff;z-index:61;box-shadow:-18px 0 50px rgba(7,24,74,.24);transform:translateX(105%);transition:transform .32s cubic-bezier(.4,0,.2,1);overflow-y:auto}
.cl-guide.open{transform:translateX(0)}
.cl-guide__head{padding:22px 26px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.cl-guide__head h3{font-family:var(--osw);font-weight:700;font-size:22px;text-transform:uppercase}
.cl-guide__body{padding:24px 26px}
.cl-guide__body p{font-size:14px;line-height:1.6;color:var(--muted);margin-bottom:18px}
.cl-guide table{width:100%;border-collapse:collapse;font-size:14px}
.cl-guide th{text-align:left;padding:12px 8px;border-bottom:2px solid var(--ink);font-family:var(--osw);font-weight:700;font-size:13px;text-transform:uppercase}
.cl-guide td{padding:13px 8px;border-bottom:1px solid var(--line-3)}
.cl-guide td:first-child{font-weight:600}
.cl-guide td:last-child{color:var(--ink-2)}

/* Barre d'ajout fixe (mobile) */
.cl-mbuy{display:none}

/* ==========================================================================
   Blog / Journal
   ========================================================================== */
.cl-blog-head{max-width:var(--wrap);margin:0 auto;padding:14px var(--gutter) 8px}
.cl-blog-head h1{font-family:var(--osw);font-weight:700;font-size:44px;text-transform:uppercase;margin-top:8px}
.cl-blog-head p{margin-top:10px;font-size:16px;line-height:1.5;color:var(--muted);max-width:640px}
.cl-topics{max-width:var(--wrap);margin:0 auto;padding:12px var(--gutter) 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cl-topic{font-family:var(--osw);font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase;padding:11px 16px;border-radius:9px;background:#fff;color:var(--ink-2);border:1px solid var(--line-2)}
.cl-topic.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.cl-feat{max-width:var(--wrap);margin:0 auto;padding:24px var(--gutter) 8px}
.cl-feat__card{display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;color:inherit}
.cl-feat__card:hover{box-shadow:0 20px 44px rgba(7,24,74,.14);color:inherit}
.cl-feat__media{position:relative;min-height:340px;background:repeating-linear-gradient(135deg,#e2ddd3 0 14px,#eae5db 14px 28px);overflow:hidden}
.cl-feat__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.cl-feat__body{padding:40px 38px;display:flex;flex-direction:column;justify-content:center}
.cl-feat__eyebrow{font-family:var(--osw);font-weight:600;font-size:12px;letter-spacing:.12em;color:var(--blue);margin-bottom:14px;text-transform:uppercase}
.cl-feat__title{font-family:var(--osw);font-weight:700;font-size:34px;line-height:1.02;text-transform:uppercase}
.cl-feat__excerpt{margin-top:14px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.cl-feat__meta{display:flex;align-items:center;gap:14px;margin-top:22px;font-weight:500;font-size:13px;color:var(--grey)}
.cl-feat__meta .dot{width:4px;height:4px;border-radius:50%;background:#cfcabf}
.cl-blog-grid{max-width:var(--wrap);margin:0 auto;padding:24px var(--gutter) 20px}
.cl-bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cl-bcard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;color:inherit;display:flex;flex-direction:column}
.cl-bcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);color:inherit}
.cl-bcard__media{position:relative;height:190px;background:repeating-linear-gradient(135deg,#e9e5dd 0 12px,#f1eee7 12px 24px);overflow:hidden}
.cl-bcard__media img{width:100%;height:100%;object-fit:cover}
.cl-bcard__body{padding:22px;display:flex;flex-direction:column;flex:1}
.cl-bcard__title{font-family:var(--osw);font-weight:600;font-size:22px;line-height:1.08;text-transform:uppercase;min-height:52px;color:var(--ink)}
.cl-bcard__excerpt{margin-top:10px;font-size:14px;line-height:1.55;color:var(--muted);flex:1}
.cl-bcard__meta{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-3);font-weight:500;font-size:12.5px;color:var(--grey)}
.cl-bcard__meta .dot{width:4px;height:4px;border-radius:50%;background:#cfcabf}

/* ==========================================================================
   Article
   ========================================================================== */
.cl-art-crumb{max-width:760px}
.cl-article-head{max-width:760px;margin:0 auto;padding:20px var(--gutter) 8px}
.cl-article-head__pill{display:inline-block;background:var(--accent);color:#fff;font-family:var(--osw);font-weight:600;font-size:12px;letter-spacing:.1em;padding:8px 13px;border-radius:100px;text-transform:uppercase}
.cl-article-head h1{font-family:var(--osw);font-weight:700;font-size:50px;line-height:1.02;text-transform:uppercase;margin-top:16px}
.cl-article-head__chapo{margin-top:16px;font-size:19px;line-height:1.6;color:#5a564d}
.cl-article-meta{display:flex;align-items:center;gap:14px;margin-top:22px;padding:16px 0;border-top:1px solid #e6e2da;border-bottom:1px solid #e6e2da}
.cl-article-meta__ava{width:44px;height:44px;border-radius:50%;background:repeating-linear-gradient(135deg,#e0dbd1 0 8px,#e9e4da 8px 16px);flex:none;overflow:hidden}
.cl-article-meta__who{flex:1}
.cl-article-meta__who b{font-weight:700;font-size:14px}
.cl-article-meta__who div{font-size:12.5px;color:var(--grey);margin-top:5px}
.cl-article-meta__actions{display:flex;gap:8px}
.cl-article-meta__actions button{width:40px;height:40px;border-radius:9px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink-3)}
.cl-article-meta__actions button:hover{background:var(--blue-soft)}
.cl-article-hero{max-width:920px;margin:0 auto;padding:24px var(--gutter) 0}
.cl-article-hero__img{position:relative;height:440px;border-radius:16px;overflow:hidden;background:repeating-linear-gradient(135deg,#dfd9cf 0 16px,#e8e3d9 16px 32px)}
.cl-article-hero__img img{width:100%;height:100%;object-fit:cover}
.cl-article-body{max-width:760px;margin:0 auto;padding:12px var(--gutter) 40px}
.cl-toc{background:var(--blue-soft);border:1px solid var(--blue-border);border-radius:14px;padding:22px 24px;margin:24px 0 8px}
.cl-toc__t{font-family:var(--osw);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.cl-toc ol{display:flex;flex-direction:column;gap:9px}
.cl-toc li{display:flex;gap:11px;font-weight:500;font-size:15px;line-height:1.4;color:var(--ink-3)}
.cl-toc li b{font-family:var(--osw);color:var(--blue);font-weight:700}
.cl-toc a{color:var(--ink-3)}
.cl-toc a:hover{color:var(--blue)}
.prose{margin-top:22px}
.prose p{font-weight:400;font-size:17px;line-height:1.75;color:#2f2c26;margin:0 0 20px}
.prose h2{font-family:var(--osw);font-weight:700;font-size:30px;line-height:1.1;text-transform:uppercase;margin:38px 0 16px;color:var(--ink)}
.prose h3{font-family:var(--osw);font-weight:600;font-size:22px;line-height:1.15;text-transform:uppercase;margin:28px 0 12px;color:var(--ink)}
.prose ul{margin:0 0 22px;display:flex;flex-direction:column;gap:11px}
.prose ul li{display:flex;gap:11px;font-size:16.5px;line-height:1.6;color:#2f2c26}
.prose ul li::before{content:"";flex:none;width:9px;height:9px;margin-top:9px;border-radius:3px;background:var(--blue)}
.prose ol{margin:0 0 22px;padding-left:20px;display:flex;flex-direction:column;gap:11px}
.prose ol li{font-size:16.5px;line-height:1.6;color:#2f2c26}
.prose strong{color:var(--ink)}
.prose blockquote{margin:28px 0;padding:22px 26px;background:#fff;border-left:4px solid var(--blue);border-radius:0 12px 12px 0;font-weight:500;font-size:18px;line-height:1.6;color:var(--ink-3)}
.prose img{border-radius:12px;margin:8px 0 22px}

/* =========================================================================
   LE GUIDE — bloc éditorial de la page d'accueil.

   Le contenu SEO était rendu dans un pavé gris de mille mots, collé sous le
   journal : ça se voyait, et ça ne servait personne. Trois partis pris ici.

   1. Pas de fond distinct. Le bloc respire sur le fond de page comme les
      autres sections, au lieu de s'annoncer comme une pièce rapportée.
   2. Une colonne de lecture resserrée (66 caractères) et des chapitres très
      espacés : c'est la mesure typographique, pas la largeur du site, qui
      rend un texte long lisible.
   3. Un repli après deux écrans. Le visiteur voit un guide qu'il peut ouvrir,
      pas un mur qu'il doit franchir. Le texte reste intégralement dans le
      HTML — seule sa hauteur est contrainte, les moteurs le lisent en entier.
   ====================================================================== */
.cl-edito{padding:56px 24px 64px;max-width:1200px;margin:0 auto}
.cl-edito__head{text-align:center;max-width:640px;margin:0 auto 40px}
.cl-edito__chapo{margin-top:12px;font-size:17px;line-height:1.6;color:var(--grey)}

.cl-edito__wrap{position:relative;max-width:720px;margin:0 auto}
/* Hauteur repliée : assez pour donner envie, trop peu pour lasser. */
.cl-edito__wrap[data-etat="replie"]{max-height:440px;overflow:hidden}
.cl-edito__wrap[data-etat="ouvert"]{max-height:none;overflow:visible}

/* Le dégradé n'existe que replié, et ne doit jamais intercepter un clic. */
.cl-edito__fade{display:none}
.cl-edito__wrap[data-etat="replie"] .cl-edito__fade{
  display:block;position:absolute;left:0;right:0;bottom:0;height:170px;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(244,242,238,0),var(--page) 88%)}

/* --- Rythme des chapitres ------------------------------------------------ */
.cl-edito__body > h2{
  font-family:var(--osw);font-weight:700;font-size:27px;line-height:1.15;
  text-transform:uppercase;color:var(--ink);
  margin:52px 0 18px;padding-top:22px;position:relative}
.cl-edito__body > h2:first-child{margin-top:0}
/* Filet court plutôt qu'un numéro : on marque le chapitre sans le compter. */
.cl-edito__body > h2::before{
  content:"";position:absolute;top:0;left:0;width:42px;height:3px;
  border-radius:2px;background:var(--blue)}

.cl-edito__body p{font-size:17px;line-height:1.8;color:#2f2c26;margin:0 0 20px}
/* Chapô : la première phrase du guide porte plus que les suivantes. */
.cl-edito__body > h2:first-child + p{font-size:19px;line-height:1.7;color:var(--ink-3)}
.cl-edito__body strong{color:var(--ink)}
.cl-edito__body a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.cl-edito__body a:hover{text-decoration-thickness:2px}

.cl-edito__body figure,.cl-edito__body img{margin:30px 0 34px}
.cl-edito__body img{width:100%;height:auto;border-radius:16px;display:block}

.cl-edito__more{text-align:center;margin-top:26px}
/* Une fois ouvert, le bouton n'a plus de raison d'être. */
.cl-edito__more[hidden]{display:none}

@media(max-width:640px){
  .cl-edito{padding:40px 20px 48px}
  .cl-edito__head{margin-bottom:30px}
  .cl-edito__wrap[data-etat="replie"]{max-height:340px}
  .cl-edito__body > h2{font-size:22px;margin:40px 0 14px}
  .cl-edito__body p{font-size:16px;line-height:1.75}
  .cl-edito__body > h2:first-child + p{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  .cl-edito__wrap{transition:none}
}

/* Texte de présentation des catégories, sous la grille de produits.
   Fond légèrement teinté pour le détacher de la grille sans créer de rupture. */
.cl-cattexte{background:#f7f8fa;border-top:1px solid var(--line);margin-top:44px;padding:44px 0 52px}
.cl-cattexte__inner{max-width:840px;margin:0 auto;padding:0 20px}
.cl-cattexte__inner > :first-child{margin-top:0}
.cl-cattexte h2{font-size:26px;margin:32px 0 14px}
.cl-cattexte p{font-size:16.5px}
@media(max-width:560px){
  .cl-cattexte{margin-top:32px;padding:32px 0 38px}
  .cl-cattexte h2{font-size:22px}
}

/* Accordéon de la FAQ — blocs « Détails » natifs de WordPress.
   On style la balise <details> plutôt qu'une classe : la cliente peut ajouter
   une question depuis l'éditeur sans avoir à connaître le moindre nom de classe,
   et le repli/dépli fonctionne sans une ligne de JavaScript. */
.prose details{background:#fff;border:1px solid var(--line);border-radius:12px;margin:0 0 12px;overflow:hidden;transition:border-color .15s}
.prose details[open]{border-color:#c7d4f5}
.prose details summary{cursor:pointer;list-style:none;padding:18px 52px 18px 22px;font-family:var(--osw);font-weight:600;font-size:18px;line-height:1.35;text-transform:uppercase;color:var(--ink);position:relative}
.prose details summary::-webkit-details-marker{display:none}
/* Le chevron est dessiné en CSS : pas d'image à charger, et il pivote à l'ouverture. */
.prose details summary::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;margin-top:-6px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(45deg);transition:transform .18s}
.prose details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.prose details summary:hover{background:#f7f9ff}
.prose details summary:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.prose details > p{padding:0 22px;margin:0 0 16px;font-size:16px}
.prose details > p:first-of-type{padding-top:2px}
.prose h2 + details{margin-top:4px}
@media(max-width:560px){
  .prose details summary{font-size:16px;padding:15px 44px 15px 17px}
  .prose details > p{padding:0 17px;font-size:15.5px}
}
@media(prefers-reduced-motion:reduce){
  .prose details summary::after{transition:none}
}
.prose a{text-decoration:underline}
.cl-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.cl-tag-pill{font-family:var(--osw);font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;background:#efece6;color:#5a564d;padding:9px 13px;border-radius:100px}
.cl-artprod{max-width:920px;margin:0 auto;padding:8px var(--gutter) 20px}
.cl-artprod__card{background:var(--navy);border-radius:16px;padding:30px 34px;display:flex;align-items:center;gap:26px;color:#fff;flex-wrap:wrap}
.cl-artprod__img{width:110px;height:110px;flex:none;border-radius:12px;overflow:hidden;background:#0d1730}
.cl-artprod__img img{width:100%;height:100%;object-fit:cover}
.cl-artprod__mid{flex:1;min-width:240px}
.cl-artprod__eyebrow{font-family:var(--osw);font-weight:600;font-size:11px;letter-spacing:.12em;color:#7fa0ff;margin-bottom:8px;text-transform:uppercase}
.cl-artprod__mid h3{font-family:var(--osw);font-weight:700;font-size:26px;text-transform:uppercase}
.cl-artprod__mid p{margin-top:8px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.82)}
.cl-artprod__right{text-align:right}
.cl-artprod__price{font-family:var(--osw);font-weight:700;font-size:30px}
.cl-artprod__right .cl-btn{margin-top:12px}
.cl-alire{max-width:var(--wrap);margin:0 auto;padding:34px var(--gutter) 20px}
.cl-alire h2{font-family:var(--osw);font-weight:700;font-size:32px;text-transform:uppercase;margin-bottom:22px}

/* ==========================================================================
   À propos
   ========================================================================== */
.cl-about-hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.cl-about-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
.cl-about-hero__grad{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,24,74,.95) 0 42%,rgba(7,24,74,.55))}
.cl-about-hero__inner{position:relative;max-width:var(--wrap);margin:0 auto;padding:80px var(--gutter)}
.cl-about-hero__crumb{font-weight:500;font-size:13px;color:#aeb9d6;display:flex;align-items:center;gap:8px;margin-bottom:20px}
.cl-about-hero__crumb a{color:#aeb9d6}
.cl-about-hero__crumb .cur{color:#fff}
.cl-about-hero__pill{display:inline-block;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);padding:7px 14px;border-radius:100px;font-family:var(--osw);font-weight:600;font-size:12px;letter-spacing:.14em;margin-bottom:22px;text-transform:uppercase}
.cl-about-hero__inner h1{font-family:var(--osw);font-weight:700;font-size:60px;line-height:1.14;text-transform:uppercase;max-width:760px}
.cl-about-hero__inner p{margin-top:20px;font-size:19px;line-height:1.6;color:rgba(255,255,255,.9);max-width:560px}
.cl-stats{max-width:var(--wrap);margin:0 auto;padding:44px var(--gutter)}
.cl-stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cl-stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 24px;text-align:center}
.cl-stat__v{font-family:var(--osw);font-weight:700;font-size:46px;line-height:1;color:var(--blue)}
.cl-stat__l{margin-top:8px;font-weight:500;font-size:14px;line-height:1.35;color:var(--muted)}
.cl-story{max-width:var(--wrap);margin:0 auto;padding:24px var(--gutter) 44px}
.cl-story__grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.cl-story__img{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:repeating-linear-gradient(135deg,#dfd9cf 0 16px,#e8e3d9 16px 32px)}
.cl-story__img img{width:100%;height:100%;object-fit:cover}
.cl-story h2{font-family:var(--osw);font-weight:700;font-size:38px;line-height:1.02;text-transform:uppercase}
.cl-story p{margin-top:16px;font-size:16.5px;line-height:1.7;color:var(--ink-2)}
.cl-engage{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cl-engage__inner{max-width:var(--wrap);margin:0 auto;padding:56px var(--gutter)}
.cl-engage__head{text-align:center;margin-bottom:34px}
.cl-engage__head h2{font-family:var(--osw);font-weight:700;font-size:40px;text-transform:uppercase}
.cl-engage__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cl-engage__card{border:1px solid var(--line);border-radius:14px;padding:28px}
.cl-engage__ico{width:52px;height:52px;border-radius:12px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;margin-bottom:16px}
.cl-engage__card h3{font-family:var(--osw);font-weight:600;font-size:20px;line-height:1.1;text-transform:uppercase}
.cl-engage__card p{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--muted)}
.cl-timeline{max-width:1000px;margin:0 auto;padding:56px var(--gutter)}
.cl-timeline__head{text-align:center;margin-bottom:38px}
.cl-timeline__head h2{font-family:var(--osw);font-weight:700;font-size:40px;text-transform:uppercase}
.cl-tl{display:grid;grid-template-columns:130px 1fr;gap:26px}
.cl-tl__year{font-family:var(--osw);font-weight:700;font-size:28px;color:var(--blue);text-align:right;padding-top:2px}
.cl-tl__body{position:relative;padding:0 0 34px 30px;border-left:2px solid #dbe0ea}
.cl-tl__dot{position:absolute;left:-9px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--blue);border:3px solid var(--page)}
.cl-tl__body h3{font-family:var(--osw);font-weight:600;font-size:21px;line-height:1.1;text-transform:uppercase}
.cl-tl__body p{margin-top:8px;font-size:15px;line-height:1.6;color:#5a564d}
.cl-franco{max-width:var(--wrap);margin:0 auto;padding:8px var(--gutter) 52px}
.cl-franco__card{background:var(--blue-soft);border:1px solid var(--blue-border);border-radius:16px;padding:44px 40px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.cl-franco__card h2{font-family:var(--osw);font-weight:700;font-size:34px;line-height:1.05;text-transform:uppercase}
.cl-franco__card p{margin-top:14px;font-size:16px;line-height:1.7;color:var(--ink-2)}
.cl-franco__list{margin-top:18px;display:flex;flex-direction:column;gap:12px}
.cl-franco__list li{display:flex;align-items:center;gap:11px;font-weight:500;font-size:15px;line-height:1.4;color:var(--ink-3)}
.cl-franco__list li span{width:26px;height:26px;flex:none;border-radius:8px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:13px}
.cl-franco__img{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:repeating-linear-gradient(135deg,#d9d4ca 0 14px,#e2ddd3 14px 28px)}
.cl-franco__img img{width:100%;height:100%;object-fit:cover}
.cl-team{max-width:var(--wrap);margin:0 auto;padding:8px var(--gutter) 52px}
.cl-team__head{text-align:center;margin-bottom:34px}
.cl-team__head h2{font-family:var(--osw);font-weight:700;font-size:40px;text-transform:uppercase}
/* Flex et non grid : la grille déclarait deux colonnes en dur, donc une carte
   seule se plaçait dans la première — décalée d'une demi-grille vers la gauche
   sous un titre, lui, centré. En flex, la ligne se dimensionne sur son contenu
   réel : une carte est centrée, deux restent côte à côte comme avant. */
.cl-team__grid{display:flex;flex-wrap:wrap;gap:22px;justify-content:center}
.cl-team__card{flex:0 1 240px;max-width:240px;text-align:center}
.cl-team__photo{aspect-ratio:1;border-radius:14px;overflow:hidden;background:repeating-linear-gradient(135deg,#e0dbd1 0 12px,#e9e4da 12px 24px)}
.cl-team__photo img{width:100%;height:100%;object-fit:cover}
.cl-team__card h3{font-family:var(--osw);font-weight:600;font-size:19px;text-transform:uppercase;margin-top:14px}
.cl-team__card p{margin-top:5px;font-weight:500;font-size:13px;color:var(--blue)}
.cl-about-cta{background:var(--navy);color:#fff}
.cl-about-cta__inner{max-width:1000px;margin:0 auto;padding:60px var(--gutter);text-align:center}
.cl-about-cta h2{font-family:var(--osw);font-weight:700;font-size:42px;text-transform:uppercase}
.cl-about-cta p{margin-top:14px;font-size:17px;line-height:1.5;color:rgba(255,255,255,.88);max-width:520px;margin-left:auto;margin-right:auto}
.cl-about-cta__btns{display:flex;gap:12px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.cl-btn--white-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.5);color:#fff}
.cl-btn--white-ghost:hover{background:rgba(255,255,255,.12);color:#fff}

/* Generic page/prose fallback */
.cl-page{max-width:820px;margin:0 auto;padding:40px var(--gutter) 60px}
.cl-page h1{font-family:var(--osw);font-weight:700;font-size:40px;text-transform:uppercase;margin-bottom:20px}
.cl-404{max-width:760px;margin:0 auto;padding:80px var(--gutter);text-align:center}
.cl-404 h1{font-family:var(--osw);font-weight:700;font-size:44px;text-transform:uppercase;margin-bottom:14px}

/* ==========================================================================
   Responsive (Mobile.dc.html)
   ========================================================================== */
/* Barre "Filtrer/Trier" mobile + tiroirs filtres/tri
   ─────────────────────────────────────────────────────────────────────────
   ⚠️ CES RÈGLES DOIVENT RESTER AVANT LES BLOCS @media.
   Un @media n'ajoute aucune priorité : à force égale, c'est la dernière
   règle écrite qui gagne. Placée après, « display:none » écrasait le
   « display:flex » du bloc mobile — la barre restait invisible sur
   téléphone, et comme la colonne de filtres y est masquée elle aussi,
   plus aucun accès au filtrage. */
.cl-mobile-bar{display:none;position:sticky;top:74px;z-index:30;background:var(--page);padding:12px 0;gap:10px}
.cl-mobile-bar button{flex:1;border:1px solid var(--line-2);border-radius:9px;background:#fff;padding:11px;font-family:var(--osw);font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;justify-content:center;gap:7px}

@media(max-width:1024px){
  .cl-grid4{grid-template-columns:repeat(2,1fr)}
  .cl-cross__grid{grid-template-columns:repeat(2,1fr)}
  .cl-hero__title{font-size:52px}
}
@media(max-width:900px){
  .cl-nav{display:none}
  .cl-burger{display:flex}
  .cl-header__row{gap:12px;padding:12px var(--gutter)}
  .cl-header__row .cl-logo{margin:0 auto}
  .cl-header__tools{margin-left:0}
  .cl-logo img{width:36px;height:36px}
  .cl-logo__main{font-size:16px}.cl-logo__top{font-size:9px}
  .cl-header__tools .cl-icon-btn--account{display:none}
  .cl-trust__row{gap:12px;font-size:11.5px;flex-wrap:wrap;justify-content:center}
  .cl-hero__photo{left:0;opacity:.5}
  .cl-hero__grad{background:linear-gradient(180deg,rgba(22,20,19,.15) 30%,rgba(22,20,19,.88))}
  .cl-hero__inner{min-height:auto;padding:220px var(--gutter) 26px}
  .cl-hero__title,.cl-hero__cats,.cl-hero__sub,.cl-hero__rating span,.cl-hero__rating b{color:#fff}
  .cl-hero__title{font-size:34px}
  .cl-hero__features{display:none}
  .cl-seal{top:16px;right:16px;width:70px;height:88px}
  .cl-seal svg.cl-seal__medal{width:70px;height:70px}
  .cl-seal__num{top:24px;width:70px}
  .cl-seal__rate{font-size:17px}.cl-seal__rate small{font-size:8px}
  .cl-seal__stars{font-size:7px}.cl-seal__count{display:none}
  .cl-univ,.cl-avis,.cl-grid3,.cl-bgrid,.cl-alire .cl-grid3{grid-template-columns:repeat(2,1fr)}
  .cl-reassure-panel{grid-template-columns:repeat(2,1fr)}
  .cl-dnote{grid-template-columns:1fr}
  .cl-insta{grid-template-columns:repeat(3,1fr)}
  .cl-footer__grid{grid-template-columns:1fr 1fr}
  .cl-ftrust__grid{grid-template-columns:1fr 1fr}
  .cl-pdp{grid-template-columns:1fr;gap:20px}
  .cl-gallery{position:static;flex-direction:column-reverse}
  .cl-gallery__thumbs{flex-direction:row}
  .cl-gallery__thumb{width:56px;height:56px}
  .cl-reviews-grid{grid-template-columns:1fr}
  .cl-rsummary{position:static}
  .cl-cross__grid{grid-template-columns:repeat(2,1fr)}
  .cl-feat__card,.cl-story__grid,.cl-franco__card{grid-template-columns:1fr}
  .cl-feat__media{min-height:200px}
  .cl-engage__grid{grid-template-columns:1fr 1fr}
  .cl-stats__grid{grid-template-columns:repeat(2,1fr)}
  .cl-about-hero__inner h1{font-size:40px}
  .cl-article-head h1{font-size:34px}
  /* Bannière de catégorie sur tablette et téléphone.
     Le titre à 52 px et le texte à 17 px n'étaient réduits nulle part : c'est la
     vraie cause du débordement, la hauteur ne faisait que le masquer. 36 px reste
     une accroche franche sur un écran étroit, et « Pieds sensibles » tient sur
     une seule ligne — c'est le titre le plus long du catalogue.
     Les marges verticales passent de 44 à 28 px : sur un téléphone, chaque
     dizaine de pixels gagnée en haut, ce sont les premiers produits qui
     apparaissent sans avoir à faire défiler. */
  .cl-catbanner{min-height:200px}
  .cl-catbanner__inner{padding:28px var(--gutter)}
  .cl-catbanner__inner h1{font-size:36px}
  .cl-catbanner__inner p{margin-top:10px;font-size:15px;max-width:none}
  .cl-catbanner__crumb{margin-bottom:10px}
  .cl-catbanner__pill{margin-bottom:10px}
  /* Sidebar filtres -> tiroirs */
  .cl-shop-layout{grid-template-columns:1fr}
  .cl-filters{display:none}
  .cl-mobile-bar{display:flex}
}
@media(max-width:560px){
  .cl-grid4,.cl-univ,.cl-avis,.cl-grid3,.cl-bgrid,.cl-cross__grid,.cl-engage__grid,.cl-stats__grid{grid-template-columns:1fr 1fr}
  .cl-insta{grid-template-columns:repeat(2,1fr)}
  .cl-footer__grid,.cl-ftrust__grid{grid-template-columns:1fr}
  .cl-h2,.cl-shop-head h1,.cl-blog-head h1{font-size:30px}
  .cl-pdp__title{font-size:28px}
  .cl-pdp__now{font-size:30px}
  .cl-news form,.cl-news__inner form{flex-direction:column}
  .cl-tabs__panel{padding:20px 0}
  /* RWD-04 — cartes produit compactes en mobile : image ~130px, titre ~14px */
  /* aspect-ratio:1 hérité : plus de hauteur fixe à rectifier ici. */
  .cl-pcard__title,.cl-ccard__title{font-size:14px;min-height:0}
  /* Listing produits (boutique + catégorie) : 1 colonne par défaut sur mobile.
     Le sélecteur attribut+classe l'emporte sur la règle partagée .cl-grid3 (1fr 1fr)
     ci-dessus, et ne vise QUE la zone [data-cl-shop] (pas .cl-grid4 nouveautés ni le
     carrousel best-sellers). */
  [data-cl-shop] .cl-grid3{grid-template-columns:1fr}
  /* 2 colonnes si le visiteur l'a choisi (classe .cols2 posée sur [data-cl-shop],
     mémorisée en localStorage cl_cols). */
  [data-cl-shop].cols2 .cl-grid3{grid-template-columns:1fr 1fr}
  /* Bascule 1 / 2 colonnes : petites icônes, visible uniquement sur mobile. */
  .cl-viewswitch{display:inline-flex;gap:4px}
  .cl-viewswitch button{display:inline-flex;align-items:center;justify-content:center;padding:7px;border:1px solid var(--line-2);border-radius:8px;background:#fff;color:var(--ink-3);transition:.15s}
  .cl-viewswitch button svg{display:block;width:18px;height:18px}
  .cl-viewswitch button.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
  /* Le tri du toolbar est redondant sur mobile (accessible via le tiroir « Trier ») :
     on garde le compteur (gauche) et on affiche la bascule (droite). */
  .cl-toolbar .cl-sort-form{display:none}
}

.cl-drawer--left{right:auto;left:0;transform:translateX(-105%);width:340px}
.cl-drawer--left.open{transform:translateX(0)}

/* Menu mobile (burger) */
.cl-mmenu{position:fixed;top:0;left:0;height:100%;width:320px;max-width:88vw;background:#fff;z-index:61;transform:translateX(-105%);transition:transform .3s;box-shadow:18px 0 50px rgba(7,24,74,.24);overflow-y:auto;padding:22px}
.cl-mmenu.open{transform:translateX(0)}
.cl-mmenu__close{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:9px;display:grid;place-items:center;font-size:18px}
.cl-mmenu a{display:block;padding:14px 6px;border-bottom:1px solid var(--line-3);font-family:var(--osw);font-weight:600;font-size:16px;text-transform:uppercase;color:var(--ink)}

/* Accordéons fiche (mobile) */
.cl-acc__head{display:none}
@media(max-width:900px){
  .cl-tabs__bar{display:none}
  .cl-tabs{padding:20px var(--gutter)}
  .cl-tabs__panel{display:none;max-width:none;padding:4px 0 16px;border-bottom:1px solid var(--line-3)}
  .cl-tabs__panel.acc-open{display:block}
  .cl-tabs__panel.on:not(.acc-open){display:none}
  .cl-buy{display:none}
  .cl-acc__head{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line-3);font-family:var(--osw);font-weight:600;font-size:14px;text-transform:uppercase;width:100%}
  .cl-acc__head span:last-child{color:var(--grey);font-size:18px}
  /* Barre d'ajout fixe */
  .cl-mbuy{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line);padding:14px 16px calc(14px + env(safe-area-inset-bottom));align-items:center;gap:12px}
  .cl-mbuy .cl-stepper button{width:38px;height:46px}
  .cl-mbuy__add{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--blue);color:#fff;font-family:var(--osw);font-weight:600;font-size:15px;letter-spacing:.05em;text-transform:uppercase;height:48px;border-radius:10px}
  body.single-product{padding-bottom:84px}
}

/* ==========================================================================
   Lot best-sellers — Carrousel + pastille Saison + facette filtre Saison
   ========================================================================== */
/* Carrousel best-sellers (indépendant du hero slider) */
.cl-carousel{position:relative}
.cl-carousel .cl-bs__head{margin-bottom:22px}
.cl-carousel__nav{display:flex;gap:10px;flex:none}
.cl-carousel__arrow{width:46px;height:46px;border-radius:11px;border:1px solid var(--line-2);background:#fff;color:var(--navy);font-size:24px;line-height:1;display:grid;place-items:center;transition:.15s}
.cl-carousel__arrow:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.cl-carousel__viewport{overflow:hidden}
.cl-carousel__track{display:flex;gap:22px;transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform}
.cl-carousel__slide{flex:0 0 calc((100% - 66px) / 4);min-width:0}
.cl-carousel__slide .cl-pcard{height:100%}

/* Pastille saison (2e pastille, distincte de l'étiquette) */
.cl-season{position:absolute;top:13px;right:13px;z-index:3;display:inline-flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--season,#cfcabf);border-radius:100px;padding:5px 11px 5px 8px;box-shadow:0 3px 10px rgba(20,18,15,.14)}
.cl-season__ico{display:inline-flex;align-items:center;color:var(--season,#161514);line-height:0}
.cl-season__ico svg{display:block;width:15px;height:15px}
.cl-season__lbl{font-family:var(--osw);font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase;line-height:1;color:var(--ink-3)}

/* Facette filtre « Saison » (catalogue + catégorie) */
.cl-fseasons{display:flex;flex-wrap:wrap;gap:8px}
.cl-fseason{font-family:var(--osw);font-weight:600;font-size:12px;letter-spacing:.03em;padding:9px 12px;border-radius:8px;background:#fff;color:var(--ink-2);border:1px solid var(--line-2);cursor:pointer}
.cl-fseason.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.cl-fseason:has(input:checked){background:var(--blue);color:#fff;border-color:var(--blue)}

@media(max-width:980px){
  .cl-carousel__slide{flex:0 0 calc((100% - 22px) / 2)}
}
@media(max-width:640px){
  .cl-carousel__slide{flex:0 0 100%}
  .cl-carousel .cl-bs__head{flex-wrap:wrap}
}

/* ==========================================================================
   Couleur par catégorie — vignette pleine couleur + points forts (listings)
   ========================================================================== */
/* Vignette en couleur pleine : le fond (accent de la catégorie) est posé en inline sur
   .cl-pcard__media / .cl-ccard__media (voir inc/woocommerce.php). L'image se fond dans
   la couleur via mix-blend-mode:normal — les photos produit étant souvent sur fond
   blanc, le blanc prend l'accent et donne un vrai aplat. isolation:isolate confine le
   mélange à la vignette. Repli propre : sans support de multiply, l'image s'affiche
   normalement (cover : photo pleine ; contain : image centrée sur fond blanc). */
.cl-pcard__media,.cl-ccard__media{isolation:isolate;display:block}
.cl-pcard__media img,.cl-ccard__media img{mix-blend-mode:normal}
@supports not (mix-blend-mode:normal){
  .cl-pcard__media img,.cl-ccard__media img{mix-blend-mode:normal}
}

/* Carte compacte (boutique + catégorie) : check-list des points forts à la place de la
   description (coches ✓ à l'accent de la catégorie), cohérente avec la carte riche. */
.cl-ccard__title a{color:inherit}
.cl-ccard__title a:hover{color:var(--accent)}
.cl-ccard__feats{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.cl-ccard__feats li{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.3;color:var(--ink-3)}
.cl-ccard__feats li b{color:var(--accent);font-weight:700}
.cl-ccard__desc{margin-top:8px;font-size:13.5px;line-height:1.45;color:var(--muted)}

/* Carte compacte : rangée d'actions « Voir le produit » (encre) + bouton d'ajout « + » (accent). */
.cl-ccard__actions{display:flex;gap:8px;margin-top:14px}
.cl-ccard__voir{flex:1;margin-top:0}
.cl-ccard__voir:hover{color:#fff}
.cl-ccard__add{width:46px;flex:none;border-radius:9px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:22px;line-height:1}
.cl-ccard__add:hover{color:#fff;filter:brightness(1.05)}

/* ==========================================================================
   Badge « Lot / conditionnement » (bas-droite de la photo) — méta _cl_lot
   ========================================================================== */
/* Badge neutre et lisible, distinct de l'étiquette (haut-gauche) et de la pastille
   saison (haut-droite). Placé en bas à droite dans les conteneurs .cl-*__media
   (position:relative) et sur la photo principale de la fiche (#cl-main-wrap).
   z-index:3 pour passer au-dessus de l'image ; n'écrase aucun badge existant. */
.cl-lot{position:absolute;right:12px;bottom:12px;z-index:3;max-width:calc(100% - 24px);display:inline-flex;align-items:center;background:#161514;color:#f4f2ee;font-family:var(--osw);font-weight:600;font-size:10.5px;letter-spacing:.06em;line-height:1;text-transform:uppercase;padding:6px 10px;border-radius:7px;box-shadow:0 3px 10px rgba(20,18,15,.22);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-gallery__mainwrap .cl-lot{right:16px;bottom:16px;font-size:12px;padding:8px 12px;border-radius:8px}

/* ==========================================================================
   Pastilles produit — regroupement photo + badges (desktop overlay / mobile ligne)
   ========================================================================== */
/* Carte (cl_product_card_home) & fiche (single-product.php) : la photo et le wrapper
   de pastilles sont regroupés dans un conteneur relatif (.cl-pcard__top /
   .cl-gallery__mainwrap). Le wrapper de pastilles (.cl-pcard__tags / .cl-pdp__tags)
   recouvre EXACTEMENT la photo via inset:0 — les badges (.cl-pbadge/.cl-pdp__badge
   haut-gauche, .cl-season haut-droite, .cl-lot bas-droite) conservent donc leurs
   positions, tailles, couleurs et ombres actuelles : rendu desktop STRICTEMENT
   identique. pointer-events:none laisse le lien photo cliquable (les pastilles sont
   des <span> non interactifs). */
.cl-pcard__top{position:relative}
.cl-pcard__tags{position:absolute;inset:0;z-index:2;pointer-events:none}
.cl-gallery__mainwrap{position:relative;flex:1}
.cl-pdp__tags{position:absolute;inset:0;z-index:3;pointer-events:none}

/* Mobile (≤560px) : la photo se libère complètement ; les pastilles quittent l'image
   et forment une ligne compacte JUSTE SOUS la photo — sur la carte avant le titre,
   sur la fiche sous la photo principale. La ligne passe à la ligne si besoin. */
@media(max-width:560px){
  .cl-pcard__tags,.cl-pdp__tags{position:static;inset:auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px;pointer-events:auto}
  .cl-pcard__tags{padding:9px 12px 0}
  .cl-pdp__tags{padding:10px 0 0}
  .cl-pcard__tags .cl-pbadge,.cl-pcard__tags .cl-season,.cl-pcard__tags .cl-lot,
  .cl-pdp__tags .cl-pdp__badge,.cl-pdp__tags .cl-season,.cl-pdp__tags .cl-lot{
    position:static;top:auto;right:auto;bottom:auto;left:auto;box-shadow:none;max-width:none;font-size:11px}
  /* Étiquette catégorie -> pastille pleine (fond accent conservé). */
  .cl-pcard__tags .cl-pbadge,.cl-pdp__tags .cl-pdp__badge{border-radius:100px;padding:3px 9px}
  /* Lot -> pastille foncée compacte. */
  .cl-pcard__tags .cl-lot,.cl-pdp__tags .cl-lot{border-radius:100px;padding:3px 9px}
  /* Saison -> conserve sa pastille contour (icône + libellé), compactée. */
  .cl-pcard__tags .cl-season,.cl-pdp__tags .cl-season{padding:3px 9px 3px 7px}
  .cl-pcard__tags .cl-season__ico svg,.cl-pdp__tags .cl-season__ico svg{width:13px;height:13px}
}

@media(max-width:560px){.cl-shop-layout{padding-left:12px;padding-right:12px}}



/* Actions carte : le bouton "Voir le produit" peut rétrécir (jamais de + coupé) */
.cl-pcard__voir{min-width:0}
/* Cartes 2 colonnes en mobile : empiler Voir le produit + bouton d'ajout (pleine largeur, tout visible).
   Les nouveautés (.cl-grid4) ne sont plus concernées : elles passent en 1 colonne
   pleine largeur sur mobile, où les deux boutons tiennent côte à côte. */
@media(max-width:560px){
  [data-cl-shop].cols2 .cl-pcard__actions{flex-direction:column;gap:8px}
  [data-cl-shop].cols2 .cl-pcard__voir{width:100%;padding:13px 10px;font-size:12.5px}
  [data-cl-shop].cols2 .cl-pcard__add{width:100%;height:42px;font-size:20px}
}

/* ==========================================================================
   Modale d'ajout rapide (quick-view) — déclinaison + quantité
   ========================================================================== */
/* Ouverture partagée avec le guide/panier : classe .open + overlay #cl-overlay. Centrée
   sur desktop ; feuille basse (bottom-sheet, glisse depuis le bas) sur mobile ≤560px.
   Réutilise .cl-size* (sélecteurs), .cl-stepper (quantité) et .cl-buy__add (bouton bleu). */
.cl-qv{position:fixed;z-index:62;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);width:560px;max-width:calc(100vw - 32px);max-height:calc(100vh - 48px);overflow-y:auto;background:#fff;border-radius:16px;box-shadow:0 30px 70px rgba(7,24,74,.32);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s,transform .24s,visibility .24s}
.cl-qv.open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.cl-qv__head{position:sticky;top:0;z-index:2;background:#fff;border-radius:16px 16px 0 0;padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px}
.cl-qv__head h3{font-family:var(--osw);text-transform:uppercase;font-weight:700;font-size:19px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#cl-qv-body{padding:22px}

/* Résumé : image + nom + prix */
.cl-qv__top{display:flex;gap:18px;align-items:flex-start}
.cl-qv__media{flex:0 0 132px;width:132px;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#faf9f6;border:1px solid var(--line)}
.cl-qv__media img{width:100%;height:100%;object-fit:cover;display:block}
.cl-qv__sum{flex:1;min-width:0}
.cl-qv__name{font-family:var(--osw);font-weight:600;font-size:18px;line-height:1.2;text-transform:uppercase;color:var(--ink)}
.cl-qv__price{margin-top:8px;font-family:var(--osw);font-weight:700;font-size:22px;color:var(--ink);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cl-qv__price del{color:var(--grey-2);font-weight:500;font-size:16px;text-decoration:line-through}
.cl-qv__price ins{text-decoration:none;color:var(--ink)}

/* Sélecteurs (réutilisent .cl-size*) : premier groupe collé au résumé */
#cl-qv-body .cl-size:first-of-type{margin-top:22px}

/* Ligne quantité + ajout */
.cl-qv__buy{display:flex;align-items:stretch;gap:12px;margin-top:22px}
.cl-qv__add{flex:1}

@media(max-width:560px){
  /* Bottom-sheet : ancrée en bas, pleine largeur, glisse depuis le bas. */
  .cl-qv{left:0;right:0;top:auto;bottom:0;width:100%;max-width:100%;max-height:88vh;transform:translateY(100%);border-radius:18px 18px 0 0}
  .cl-qv.open{transform:translateY(0)}
  .cl-qv__head{border-radius:18px 18px 0 0}
  #cl-qv-body{padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
}

/* Galerie fiche : photo principale carrée EN HAUT + miniatures en ligne (scroll horizontal) DESSOUS — desktop + mobile */
.cl-gallery{flex-direction:column-reverse}
.cl-gallery__mainwrap{flex:none;width:100%}
.cl-gallery__thumbs{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:10px;padding-bottom:4px}
.cl-gallery__thumb{flex:none}

/* Fiche : colonnes 50/50 stables — la ligne de miniatures (scroll horizontal) ne doit pas élargir la colonne galerie */
.cl-pdp{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cl-gallery,.cl-gallery__thumbs,.cl-gallery__mainwrap{min-width:0}

/* Fiche : 2 colonnes 50/50 en desktop, mais UNE seule colonne sur mobile (réaffirmé après la règle minmax globale) */
@media(max-width:900px){.cl-pdp{grid-template-columns:1fr}}

/* Mini-panier : lignes « Remise » + « Total » (remise automatique -30%). */
.cl-drawer__sub--promo{color:#0a7d33}
.cl-drawer__sub--promo b{color:#0a7d33}
.cl-drawer__sub--total{margin-top:4px;padding-top:8px;border-top:1px solid #e6e2da}
.cl-drawer__sub--total span,.cl-drawer__sub--total b{font-weight:700}
.cl-drawer__sub--total b{font-size:1.08em}

/* Bandeau « livraison offerte » (message + jauge) — mini-panier + panier + commande. */
.cl-freeship{background:linear-gradient(180deg,var(--blue-soft),#fff);border:1.5px solid var(--blue-border);border-radius:12px;padding:13px 15px;margin:0 0 16px}
.cl-freeship__msg{display:flex;align-items:center;gap:9px;font-family:var(--body);font-size:14.5px;line-height:1.3;color:var(--navy)}
.cl-freeship__msg strong{color:var(--blue);font-weight:700}
.cl-freeship__ico{flex:0 0 auto;color:var(--blue)}
.cl-freeship__bar{height:9px;margin-top:10px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px var(--blue-border);overflow:hidden}
.cl-freeship__bar span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--blue),#3d74ff);transition:width .45s ease}
.cl-freeship--done{background:linear-gradient(180deg,#eaf7ef,#fff);border-color:#bfe6cd}
.cl-freeship--done .cl-freeship__msg,.cl-freeship--done .cl-freeship__msg strong,.cl-freeship--done .cl-freeship__ico{color:var(--ok)}
.cl-freeship--done .cl-freeship__bar span{background:var(--ok)}
.cl-drawer__foot .cl-freeship{margin:4px 0 14px}
.woocommerce-cart .cl-freeship,.woocommerce-checkout .cl-freeship{margin:0 0 20px}

/* Panier : état de chargement pendant la MAJ AJAX de la quantité. */
.cl-cart-loading{opacity:.55;pointer-events:none;transition:opacity .15s}

/* Packs — préfixe « Dès » devant le prix des cartes (prix variable uniquement).
   Le prix barré et le badge de remise gardent leur style existant. */
.cl-pcard__from,.cl-ccard__from{font-size:12px;font-weight:600;color:var(--grey);margin-right:2px}
.cl-pcard__gift,.cl-ccard__gift{display:inline-block;font-size:11px;font-weight:700;color:#1f9d55;background:#e9f7ef;border-radius:100px;padding:2px 8px;margin-left:6px}

/* Bandeau d'accueil sur mobile : remplissage haut resserré quand la cocarde
   Avis Garantis est présente.
   Le bloc @media(max-width:900px) impose 220 px en haut pour laisser voir la
   photo au-dessus du texte. Depuis que la cocarde occupe cette zone, ces 220 px
   créaient un grand vide au-dessus d'elle. On ne réduit QUE dans ce cas : les
   diapositives sans cocarde gardent leur cadrage d'origine.
   Sur un navigateur trop ancien pour :has(), rien ne change — on retombe
   simplement sur l'espacement précédent, sans casse. */
@media (max-width:900px){
  .cl-hero__inner:has(.cl-hero__sagslot){padding-top:64px}
}

/* Bloc Avis Garantis dans le pied de page, entre la description et les réseaux
   sociaux. Le gabarit du service est prévu pour un fond clair : on lui donne
   une pastille blanche pour qu'il ressorte sur le bleu marine du pied. */
.cl-footer__sag{margin:16px 0 20px}
/* Le gabarit du service est dessiné pour un fond clair : pastille blanche pour
   qu'il ressorte sur le bleu marine du pied de page. */
.cl-footer__sag .grc-site-rating{background:#fff;border-radius:12px;padding:10px 14px;
  display:inline-block;max-width:100%}
.cl-footer__sag .grc-site-rating:empty{display:none}
.cl-footer__sag img{max-width:56px;height:auto}
.cl-footer__sag a{text-decoration:none}
@media (max-width:860px){
  .cl-footer__sag{margin:14px 0 18px;display:flex;justify-content:center}
}

/* ==========================================================================
   Journal de l'accueil — défilement à flèches sur mobile
   --------------------------------------------------------------------------
   Trois cartes d'article empilées font une colonne très longue sur téléphone :
   la newsletter et le pied de page se retrouvent hors de portée. On les fait
   donc défiler une par une.

   Le défilement natif (`overflow-x` + `scroll-snap`) est préféré à un carrousel
   en `transform` : le glissement du doigt, l'inertie et l'accessibilité clavier
   viennent du navigateur, et si le JS ne se charge pas la zone reste
   simplement glissable — jamais bloquée sur une seule carte.

   Au-dessus de 560 px, ce bloc n'existe pas : la grille 3 colonnes est intacte.
   ========================================================================== */
.cl-jcarr__nav{display:none}

@media (max-width:560px){
  .cl-jcarr{position:relative}
  .cl-jcarr__track{
    display:flex;
    grid-template-columns:none;      /* neutralise la grille .cl-grid3 */
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* C'est ce qui anime le déplacement des flèches : le JS se contente
       d'écrire la nouvelle position. */
    scroll-behavior:smooth;
    /* Débordement pleine largeur : la carte occupe l'écran sans que la marge
       de section ne la rétrécisse, tout en gardant un alignement propre. */
    padding:2px 20px 4px;
    margin:0 -20px;
    scroll-padding-left:20px;
  }
  .cl-jcarr__track::-webkit-scrollbar{display:none}
  /* 100 % de la zone de contenu (hors padding) : la carte se cale exactement sur
     la largeur des cartes « Nouveautés » au-dessus, une seule visible à la fois. */
  .cl-jcarr__track .cl-jcard{
    flex:0 0 100%;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
  .cl-jcarr__track .cl-jcard__media{height:200px}

  .cl-jcarr__nav{
    display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px;
  }
  .cl-jcarr__nav .cl-carousel__arrow{width:42px;height:42px;font-size:22px}
  .cl-jcarr__nav .cl-carousel__arrow[disabled]{opacity:.35;pointer-events:none}
  .cl-jcarr__pos{
    font-family:var(--osw);font-weight:600;font-size:14px;letter-spacing:.06em;
    color:var(--ink-3);min-width:44px;text-align:center;
  }
  .cl-jcarr__pos b{color:var(--navy)}
}
/* Respect du réglage système « réduire les animations » : le saut est instantané,
   la navigation reste identique. */
@media (max-width:560px) and (prefers-reduced-motion:reduce){
  .cl-jcarr__track{scroll-behavior:auto}
}

/* ==========================================================================
   Nouveautés de l'accueil — carrousel sur mobile seulement
   --------------------------------------------------------------------------
   Le bloc utilise le composant carrousel (mêmes flèches, même défilement
   automatique que les best-sellers), mais UNIQUEMENT en dessous de 640 px.
   Au-dessus, on remet la grille d'origine : `transform:none` annule le
   déplacement éventuellement posé par le script, et les flèches disparaissent.
   Le rendu desktop est donc identique à ce qu'il était avant.
   ========================================================================== */
@media (min-width:641px){
  #cl-nouveautes .cl-carousel__track{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
    transform:none !important;
    transition:none;
  }
  #cl-nouveautes .cl-carousel__slide{flex:none;min-width:0}
  #cl-nouveautes .cl-carousel__nav{display:none}
}
@media (min-width:641px) and (max-width:1024px){
  #cl-nouveautes .cl-carousel__track{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================================
   Avis clients de l'accueil — carrousel sur mobile seulement
   --------------------------------------------------------------------------
   Trois témoignages en 2 colonnes sur téléphone, cela donnait deux cartes
   serrées et une troisième seule sur sa ligne, avec des citations coupées tous
   les trois mots. Un témoignage à la fois, en pleine largeur, se lit.

   Même mécanique que les nouveautés : au-dessus de 640 px on rétablit la
   grille d'origine (3 colonnes, puis 2 sous 900 px) et les flèches disparaissent.
   ========================================================================== */
@media (min-width:641px){
  #cl-avis-clients .cl-carousel__track{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    transform:none !important;
    transition:none;
  }
  #cl-avis-clients .cl-carousel__slide{flex:none;min-width:0}
  #cl-avis-clients .cl-carousel__nav{display:none}
}
@media (min-width:641px) and (max-width:900px){
  #cl-avis-clients .cl-carousel__track{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  /* Pas de bandeau de titre ici : les flèches se placent seules, centrées sous
     le titre de section. */
  .cl-avis-carr__nav{justify-content:center;gap:16px;margin:-8px 0 18px}
  /* La carte occupe toute la hauteur du volet : pas de bas de carte flottant
     quand un avis est plus court que le précédent. */
  #cl-avis-clients .cl-carousel__slide{display:flex}
  #cl-avis-clients .cl-avis__card{width:100%}
}

/* Fiche produit — moyens de paiement annoncés (et non cliquables).
   Remplace les boutons express, retirés parce qu'ils permettaient d'acheter
   sans créer de compte. Variante claire de la rangée du pied de page. */
.cl-pdp__pay{margin-top:14px}
.cl-pdp__pay-lib{display:block;margin-bottom:7px;font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:rgba(7,24,74,.45)}
.cl-pay--pdp{flex-wrap:wrap;gap:6px}
.cl-pay--pdp span{background:#fff;border:1px solid rgba(7,24,74,.14);color:rgba(7,24,74,.6);padding:5px 9px;font-size:10.5px;border-radius:5px}