@charset "utf-8";
/*
Theme Name:  TennisShop
Theme URI:   https://tennis-shop.tn/
Author:      KisyTech
Author URI:  https://kisytech.fr/
Description: Thème WooCommerce sur mesure pour Tennis Shop (tennis-shop.tn), boutique de tennis en ligne en Tunisie. Nunito Sans, panneaux gris arrondis, titres en capitales très grasses, boutons pilule jaune balle ; tunnel pensé pour le paiement à la livraison dans les 24 gouvernorats.
Version:     1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tennisshop
Tags:        e-commerce, woocommerce, custom-colors, custom-menu, translation-ready
WC requires at least: 8.0
WC tested up to: 9.4
*/

/* ============================================================
   Socle du thème : police, tokens, base, boutons, en-tête, nav
   collante, carte produit, carrousels, panneaux, pied de page, et
   composants des pages intérieures. Repris tel quel des maquettes
   Tennis Shop (maquettes/assets/theme.css).

   Le CSS propre à un gabarit vit dans assets/css/<gabarit>.css et
   n'est chargé que sur la page concernée (voir inc/assets.php). Tout
   composant présent sur plus d'un gabarit doit vivre ICI.
   Le raccord avec le balisage WooCommerce (notices, onglets,
   variations, select2) est dans assets/css/woocommerce.css.

   Les couleurs du bloc :root sont dupliquées dans theme.json.
   ============================================================ */

/* ---------- Police : Nunito Sans variable, auto-hébergée ---------- */
@font-face{
  font-family:'Nunito Sans';font-style:normal;font-weight:400 1000;font-display:swap;
  src:url(assets/fonts/nunito-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Nunito Sans';font-style:italic;font-weight:400 900;font-display:swap;
  src:url(assets/fonts/nunito-sans-latin-italique.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Couleurs */
  --encre:      #121212;   /* texte, titres, fonds sombres */
  --gris:       #6B6B6B;   /* texte secondaire */
  --gris-clair: #F4F4F2;   /* panneaux de section */
  --ligne:      #E6E6E3;   /* filets */
  --blanc:      #FFFFFF;
  --balle:      #D4F24B;   /* jaune-vert balle : boutons, accent unique */
  --balle-2:    #C3E433;   /* survol */
  --terre:      #D2572C;   /* terre battue : promo, urgence */
  --terre-pale: #F6E3D9;
  --dur:        #2F5DA8;   /* court en dur : étiquettes d'usage */
  --gazon:      #3E7D3A;   /* gazon */

  /* Rayons */
  --r-panneau: 10px;
  --r-carte:   10px;
  --r-pilule:  999px;

  --ombre: 0 2px 10px -4px rgba(0,0,0,.12);
  --ombre-2: 0 18px 40px -18px rgba(0,0,0,.28);

  --gouttiere: clamp(1rem, 3vw, 3rem);
  --max: 1410px;

  /* Alias des anciens jetons : les composants partagés plus bas et les
     gabarits pas encore refaits s'en servent. Ne pas en créer de nouveaux. */
  --court:      var(--encre);
  --court-2:    #2A2A2A;
  --azur:       var(--encre);
  --azur-2:     #333;
  --azur-pale:  var(--gris-clair);
  --brique:     #C8392B;
  --vert:       #2E9B4E;
  --chaux:      var(--gris-clair);
  --lift-1:     var(--ombre);
  --lift-2:     var(--ombre-2);
  --r-tuile:    6px;
  --r-btn:      var(--r-carte);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--blanc);color:var(--encre);
  font-family:'Nunito Sans',Arial,Helvetica,sans-serif;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
img{height:auto}
body a{color:inherit}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select,textarea{font:inherit}
h1,h2,h3,h4,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--encre);outline-offset:3px;border-radius:4px}
.sr,.screen-reader-text,.vh,.says{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gouttiere)}
.section{padding-block:clamp(2.5rem,5vw,4.5rem)}

/* Titres de section : capitales, centrés, très gras — la signature du modèle */
.titre{text-align:center;margin-bottom:clamp(1.4rem,2.6vw,2.2rem)}
.titre h2{font-size:clamp(1.7rem,3.4vw,2.75rem);font-weight:1000;text-transform:uppercase;letter-spacing:.01em;line-height:1.05}
.titre p{margin-top:.45rem;font-size:clamp(.95rem,1.3vw,1.1rem)}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.6rem;border-radius:var(--r-pilule);font-weight:800;font-size:1rem;
  transition:background-color .15s ease,transform .15s ease}
.btn:active{transform:translateY(1px)}
.btn-balle{background:var(--balle);color:var(--encre)}
.btn-balle:hover{background:var(--balle-2)}
.btn-blanc{background:var(--blanc);color:var(--encre);box-shadow:var(--ombre)}
.btn-blanc:hover{background:var(--balle)}
.btn-noir{background:var(--encre);color:#fff}
.btn-noir:hover{background:#333}

/* ---------- Bandeau d'annonce ---------- */
.annonce{background:var(--terre);color:#fff;font-size:.95rem;text-align:center;padding:.45rem var(--gouttiere)}
.annonce b{font-weight:900}
.annonce code{font-family:inherit;font-weight:900;background:#fff;color:var(--encre);padding:.05rem .45rem;border-radius:5px;margin-inline:.15rem}
.annonce a{font-size:.8rem;font-weight:800;text-decoration:underline;margin-left:.6rem}
/* Mobile : un message à la fois (ils tournent, voir annonce() dans theme.js) */
@media(max-width:600px){
  .annonce{font-size:.85rem;padding-block:.55rem}
  .annonce-sep,.annonce-message{display:none}
  .annonce-message.est-visible{display:inline;animation:annonce-entree .35s ease-out}
}
@keyframes annonce-entree{from{opacity:0;transform:translateY(4px)}}

/* ---------- En-tête ---------- */
.entete-haut{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(1rem,4vw,4rem);padding-block:1.1rem}
.logo{display:flex;align-items:center;gap:.55rem}
.logo svg{flex:none}
.logo img{display:block;width:auto;max-width:none;height:56px}
.logo img.logo-petit{height:44px}
@media(max-width:600px){.entete-haut .logo img{height:42px}}

.recherche{justify-self:end;width:min(100%,540px);display:flex;align-items:center;background:var(--gris-clair);border-radius:var(--r-pilule);padding-inline:1.6rem .9rem;border:2px solid transparent}
.recherche:focus-within{border-color:var(--encre);background:#fff}
.recherche input{flex:1;border:0;background:transparent;padding:.95rem 0;outline:none;min-width:0;font-size:1rem}
.recherche input::placeholder{color:#7a7a7a}
.recherche button{width:40px;height:40px;display:grid;place-items:center;border-radius:50%}
.recherche button:hover{background:var(--balle)}

.icones{display:flex;align-items:center;gap:.4rem}
.icone{position:relative;width:52px;height:52px;display:grid;place-items:center;border-radius:50%}
.icone:hover{background:var(--gris-clair)}
.icone .compteur{position:absolute;top:6px;right:5px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--balle);font-size:.68rem;font-weight:900;display:grid;place-items:center}

/* Barre de navigation : colle en haut au défilement et récupère logo + icônes */
.nav{position:sticky;top:0;z-index:50;background:var(--gris-clair);transition:box-shadow .2s}
.nav .wrap{display:flex;align-items:center;gap:1rem;min-height:62px}
.nav-mini{display:none;flex:none}
/* Barre collée : raquette complète sur ordinateur (place comptée, 11 rubriques),
   logo complet sur mobile. L'ancien mini.png (balle seule) paraissait coupé. */
.nav-mini img{display:block;height:42px;width:auto;max-width:none}
@media(max-width:900px){.nav-mini img{height:36px}}
.nav ul{flex:1;display:flex;justify-content:center;gap:clamp(.2rem,1.4vw,1.6rem);overflow-x:auto;scrollbar-width:none}
.nav ul::-webkit-scrollbar{display:none}
.nav ul a{display:block;padding:.95rem .35rem;font-weight:800;font-size:1.07rem;white-space:nowrap;border-bottom:3px solid transparent}
.nav ul a:hover{border-bottom-color:var(--balle)}
.nav ul .promo{color:var(--terre)}
.nav .icones{display:none}
.nav .icone{width:44px;height:44px}
.nav.colle{background:#fafafa;box-shadow:0 6px 18px -12px rgba(0,0,0,.35)}
.nav.colle .nav-mini,.nav.colle .icones{display:flex}

/* Bouton « Menu » : mobile seulement (tiroir de menu-mobile.php) */
.bouton-menu{display:none;flex:none;width:46px;height:46px;place-items:center;border-radius:50%;color:var(--encre)}
.bouton-menu:hover{background:var(--gris-clair)}

/* Sous 900 px : en-tête menu · logo · compte · panier, recherche en dessous ;
   la barre de catégories disparaît au profit du tiroir et ne revient, fixée
   en haut, qu'une fois l'en-tête sorti de l'écran. */
@media(max-width:900px){
  .entete-haut{grid-template-columns:auto 1fr auto;gap:.35rem .5rem;padding-block:.65rem .9rem}
  .entete-haut .bouton-menu{display:grid;margin-left:-.5rem}
  .entete-haut .logo{justify-self:start}
  .entete-haut .icone-aide{display:none}
  .entete-haut .icones{gap:0;margin-right:-.4rem}
  .entete-haut .icone{width:46px;height:46px}
  .recherche{grid-column:1/-1;order:3;justify-self:stretch;width:100%;margin-top:.3rem}
  .nav{display:none}
  .nav.colle{display:block;position:fixed;top:0;left:0;right:0}
  .nav .wrap{min-height:58px;gap:.4rem}
  .nav ul{display:none}
  .nav .bouton-menu{display:grid;margin-left:-.5rem}
  .nav.colle .icones{display:flex;margin-left:auto;margin-right:-.4rem;gap:0}
}
@media(min-width:601px) and (max-width:900px){.admin-bar .nav.colle{top:46px}}
@media(max-width:600px){.entete-haut .logo img{height:46px}}

/* Tiroir du menu mobile */
.tiroir{position:fixed;inset:0 auto 0 0;margin:0;width:min(88vw,380px);max-width:none;height:100%;max-height:none;padding:0;border:0;background:var(--blanc);color:var(--encre)}
.tiroir[open]{display:flex;flex-direction:column;animation:tiroir-entree .22s ease-out}
.tiroir::backdrop{background:rgba(17,17,17,.5)}
@keyframes tiroir-entree{from{transform:translateX(-100%)}}
body.menu-ouvert{overflow:hidden}
.tiroir-tete{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem .6rem .75rem var(--gouttiere);border-bottom:1px solid var(--ligne)}
.tiroir-fermer{width:46px;height:46px;display:grid;place-items:center;border-radius:50%}
.tiroir-fermer:hover{background:var(--gris-clair)}
.tiroir-corps{flex:1;overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(1.5rem + env(safe-area-inset-bottom,0px))}
.tiroir-liste{list-style:none;margin:0;padding:0}
.tiroir-liste>li{border-bottom:1px solid var(--ligne)}
.tiroir-lien,.tiroir summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:56px;padding:.6rem var(--gouttiere);font-weight:800;font-size:1.1rem;cursor:pointer;list-style:none}
.tiroir summary::-webkit-details-marker{display:none}
.tiroir summary svg{flex:none;color:#888;transition:transform .2s}
.tiroir details[open] summary svg{transform:rotate(90deg)}
.tiroir details[open] summary{background:var(--gris-clair)}
.tiroir details ul{list-style:none;margin:0;padding:.2rem 0 .6rem;background:var(--gris-clair)}
.tiroir details ul a{display:block;padding:.75rem var(--gouttiere) .75rem calc(var(--gouttiere) + 1rem);font-size:1rem}
.tiroir details li:first-child a{font-weight:800}
.tiroir [aria-current="page"]{box-shadow:inset 4px 0 var(--balle);font-weight:800}
.tiroir .promo{color:var(--terre)}
.tiroir-pratique{list-style:none;margin:1rem 0 0;padding:0 var(--gouttiere)}
.tiroir-pratique a{display:flex;align-items:center;gap:.8rem;min-height:48px;font-weight:700}
.tiroir-whatsapp{display:grid;gap:.1rem;margin:1rem var(--gouttiere) 0;padding:1rem 1.2rem;border-radius:var(--r-carte);background:#E7F6EC}
.tiroir-whatsapp span{font-size:.9rem;font-weight:700}
.tiroir-whatsapp b{font-size:1.35rem;font-weight:900}
.tiroir-whatsapp small{font-size:.85rem;color:var(--gris)}
@media(min-width:901px){.tiroir{display:none!important}}

/* ---------- Héros : une seule bannière pleine largeur ---------- */
.heros{display:grid;padding-top:1rem;min-height:clamp(420px,36vw,540px)}
.banniere{position:relative;overflow:hidden;border-radius:var(--r-panneau);display:flex;isolation:isolate}
.banniere .btn{position:absolute;right:1.3rem;bottom:1.3rem;z-index:3}

/* Grande bannière — court en terre battue */
.terre{background:radial-gradient(120% 90% at 70% 30%,#E3784C 0%,#D2572C 45%,#B4461F 100%);color:#fff}
.lignes{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.terre-contenu{position:relative;z-index:2;padding:clamp(1.5rem,3.4vw,2.8rem);display:flex;flex-direction:column;justify-content:space-between;width:100%}
.surtitre{display:inline-block;font-weight:900;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);border-radius:var(--r-pilule);padding:.35rem .9rem;align-self:flex-start}
.terre h1{font-size:clamp(2.4rem,5.2vw,4.8rem);font-weight:1000;line-height:.86;text-transform:uppercase;letter-spacing:-.015em;margin-top:1rem}
.terre h1 em{font-style:italic;font-weight:900;display:block;color:var(--balle)}
.terre .remise{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.terre .remise b{font-size:clamp(4rem,9vw,8rem);font-weight:1000;line-height:.8;letter-spacing:-.04em}
.terre .remise span{font-size:clamp(1.1rem,2vw,1.6rem);font-weight:900;line-height:1.1;padding-bottom:.4rem}
.terre .remise code{font-family:inherit;background:#fff;color:var(--terre);padding:.05rem .5rem;border-radius:6px}
/* le fondu « multiply » se pose sur le conteneur : posé sur les images, il resterait enfermé dans le contexte d'empilement */
.terre-produits{position:absolute;right:6%;top:5%;bottom:5%;width:40%;z-index:1;pointer-events:none;mix-blend-mode:multiply}
.terre-produits img{position:absolute;mix-blend-mode:multiply}
.terre-produits .r{height:108%;top:-4%;right:4%;transform:rotate(14deg)}
.terre-produits .c{width:58%;bottom:-4%;right:42%;transform:rotate(-8deg)}
.terre .btn{background:var(--balle);color:var(--encre);right:clamp(1.5rem,3.4vw,2.8rem);bottom:clamp(1.5rem,3.4vw,2.8rem)}

@media(max-width:960px){
  .heros{min-height:0}
  .banniere-grande{min-height:440px}
  .terre-produits{right:-2%;width:46%}
}
@media(max-width:600px){
  .terre-contenu{padding-bottom:5.2rem}
  .terre-produits{width:60%;right:-8%;bottom:30%;opacity:.95}
  .terre-produits .c{display:none}
  .terre .btn{left:clamp(1.5rem,3.4vw,2.8rem);right:auto}
}

/* ---------- Réassurance ---------- */
.reassurance{margin-top:16px;background:var(--gris-clair);border-radius:var(--r-carte)}
.reassurance ul{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:.95rem 1.6rem}
.reassurance li{display:flex;align-items:center;justify-content:center;gap:.7rem;font-size:.95rem;line-height:1.3}
.reassurance svg{flex:none}
@media(max-width:960px){.reassurance ul{grid-template-columns:1fr 1fr}.reassurance li{justify-content:flex-start}}
@media(max-width:520px){.reassurance ul{grid-template-columns:1fr}}

/* ---------- Carrousels ---------- */
.carrousel{position:relative}
.piste{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4*18px)/5);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 4px 14px}
.piste::-webkit-scrollbar{display:none}
.piste>*{scroll-snap-align:start}
.fleche{position:absolute;top:42%;transform:translateY(-50%);z-index:4;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:var(--ombre)}
.fleche:hover{background:var(--balle)}
.fleche[disabled]{opacity:0;pointer-events:none}
.fleche-g{left:-14px}.fleche-d{right:-14px}
@media(max-width:1180px){.piste{grid-auto-columns:calc((100% - 3*18px)/4)}}
@media(max-width:900px){.piste{grid-auto-columns:calc((100% - 2*14px)/3);gap:14px}}
@media(max-width:620px){.piste{grid-auto-columns:72%}.fleche{display:none}}

/* ---------- Collections : chaque carte prend la couleur d'une surface ---------- */
.collections .piste{grid-auto-columns:calc((100% - 3*22px)/4);gap:22px}
.collection{position:relative;aspect-ratio:4/3;border-radius:var(--r-carte);overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding-bottom:1.3rem;isolation:isolate;transition:transform .2s}
.collection:hover{transform:translateY(-4px)}
.collection img{position:absolute;inset:6% 12% 20%;width:76%;height:74%;object-fit:contain;mix-blend-mode:multiply;z-index:1;transition:transform .3s}
.collection:hover img{transform:scale(1.05) rotate(-3deg)}
.collection .lignes{opacity:.55}
.collection .btn{position:relative;z-index:2;padding:.8rem 1.9rem;font-size:1.05rem}
.s-terre{background:radial-gradient(circle at 50% 40%,#E9906A,#D2572C)}
.s-dur{background:radial-gradient(circle at 50% 40%,#A9C6EC,#5C8BCB)}
.s-gazon{background:radial-gradient(circle at 50% 40%,#A9D486,#6BA94F)}
.s-indoor{background:radial-gradient(circle at 50% 40%,#E9E3D6,#C9BFA9)}
.s-balle{background:radial-gradient(circle at 50% 40%,#EEF8B6,#CDE65A)}
.s-rose{background:radial-gradient(circle at 50% 40%,#F7D2E3,#E79ABF)}
@media(max-width:1180px){.collections .piste{grid-auto-columns:calc((100% - 2*22px)/3)}}
@media(max-width:720px){.collections .piste{grid-auto-columns:78%;gap:14px}}

/* ---------- Carte produit ---------- */
.produit{background:#fff;border:1px solid #EFEFEC;border-radius:var(--r-carte);box-shadow:0 3px 10px -6px rgba(0,0,0,.18);
  display:flex;flex-direction:column;padding:1rem 1rem 1.15rem;transition:box-shadow .2s,transform .2s}
.produit:hover{box-shadow:var(--ombre-2);transform:translateY(-3px)}
.produit-visuel{position:relative;aspect-ratio:1;display:grid;place-items:center;margin-bottom:.8rem}
.produit-visuel img{width:92%;height:92%;object-fit:contain;transition:transform .25s}
.produit:hover .produit-visuel img{transform:scale(1.04)}
.etiquettes{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px;z-index:2}
.etiq{font-size:.74rem;font-weight:900;padding:.22rem .5rem;border-radius:6px;color:#fff;line-height:1.2}
.etiq-promo{background:#C8392B}
.etiq-neuf{background:var(--balle);color:var(--encre)}
.etiq-puissance{background:#C8392B}
.etiq-effet{background:#D08A17}
.etiq-controle{background:var(--dur)}
.etiq-junior{background:#C04C8A}
.produit h3{font-size:.98rem;font-weight:800;text-align:center;line-height:1.3;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.produit .marque{display:block;text-align:center;font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);margin-bottom:.15rem}
.prix{display:flex;justify-content:center;align-items:center;gap:.6rem;margin:.75rem 0 .9rem;flex-wrap:wrap}
.prix s{color:var(--gris);font-size:.95rem}
.prix b{font-size:1.3rem;font-weight:900;letter-spacing:-.01em}
.produit .btn{margin-top:auto;width:100%;padding:.8rem 1rem}

/* Panneau gris arrondi autour d'un carrousel */
.panneau{background:var(--gris-clair);border-radius:var(--r-panneau);padding:clamp(1.8rem,4vw,3.2rem) clamp(1rem,2.6vw,2.6rem)}
.panneau .fleche-g{left:-8px}.panneau .fleche-d{right:-8px}

/* ---------- Outils maison ---------- */
.outils{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.outil{position:relative;overflow:hidden;border-radius:var(--r-panneau);background:#1B1B1B;color:#fff;min-height:330px;padding:clamp(1.5rem,3vw,2.4rem);display:flex;flex-direction:column;isolation:isolate}
.outil .lignes{opacity:.5}
.outil-nom{font-size:clamp(2rem,3.6vw,3rem);font-weight:1000;line-height:.95;text-transform:uppercase;position:relative;z-index:2}
.outil-nom span{color:var(--balle)}
.outil p{position:relative;z-index:2;max-width:34ch;margin-top:.8rem;color:rgba(255,255,255,.8);font-size:1.02rem}
.outil ol{position:relative;z-index:2;margin:1.2rem 0 0;padding:0;list-style:none;display:grid;gap:.5rem;counter-reset:q}
.outil ol li{display:flex;align-items:center;gap:.7rem;font-weight:700;font-size:.95rem;counter-increment:q}
.outil ol li::before{content:counter(q);width:26px;height:26px;border-radius:50%;background:var(--balle);color:var(--encre);display:grid;place-items:center;font-size:.8rem;font-weight:900;flex:none}
.outil .btn{position:absolute;right:1.4rem;bottom:1.4rem;z-index:3}
.outil-deco{position:absolute;z-index:1;right:-4%;top:50%;transform:translateY(-50%);width:46%;opacity:.95;pointer-events:none}
.outil-cordage{background:radial-gradient(120% 120% at 85% 50%,#2A3B2A 0%,#151915 60%)}
.tarifs{position:relative;z-index:2;display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem}
.tarifs span{border:1px solid rgba(255,255,255,.25);border-radius:8px;padding:.55rem .85rem;font-size:.85rem;line-height:1.3}
.tarifs b{display:block;color:var(--balle);font-size:1.05rem}
@media(max-width:900px){.outils{grid-template-columns:1fr}.outil-deco{width:40%;opacity:.35}}

/* ---------- Raquette selon le niveau ---------- */
.niveaux{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:1.6rem}
.niveau-btn{padding:.7rem 1.3rem;border-radius:var(--r-pilule);border:2px solid var(--ligne);font-weight:800;background:#fff}
.niveau-btn:hover{border-color:var(--encre)}
.niveau-btn[aria-selected="true"]{background:var(--encre);border-color:var(--encre);color:#fff}
.niveau-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.niveau-conseil{background:var(--balle);border-radius:var(--r-carte);padding:1.6rem;display:flex;flex-direction:column;gap:1rem}
.niveau-conseil-titre{font-size:1.5rem;font-weight:1000;text-transform:uppercase;line-height:1}
.niveau-conseil p{font-size:1.02rem}
.niveau-conseil .btn{margin-top:auto}
@media(max-width:1080px){.niveau-grille{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.niveau-conseil{grid-column:1/-1}.niveau-grille .produit:nth-child(4){display:none}}

/* Jauges dans les cartes de gammes */
.jauges{position:relative;z-index:2;display:grid;gap:.3rem;width:100%;max-width:220px;margin:0 0 1rem;font-size:.75rem;font-weight:800;text-align:left}
.jauges span{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:.5rem}
.jauges i{height:7px;border-radius:4px;background:rgba(255,255,255,.7);position:relative;overflow:hidden}
.jauges i::after{content:"";position:absolute;inset:0;width:var(--v);background:var(--encre);border-radius:4px}

/* ---------- Atelier cordage ---------- */
.atelier{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-panneau);background:#1B1B1B;color:#fff;display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding:clamp(1.6rem,3.6vw,3rem)}
.atelier-texte{position:relative;z-index:2}
.atelier-texte p{max-width:46ch;margin-top:.8rem;color:rgba(255,255,255,.8)}
.atelier-texte ol{margin:1.2rem 0 0;padding:0;list-style:none;display:grid;gap:.5rem;counter-reset:q}
.atelier-texte li{display:flex;align-items:center;gap:.7rem;font-weight:700;counter-increment:q}
.atelier-texte li::before{content:counter(q);width:26px;height:26px;border-radius:50%;background:var(--balle);color:var(--encre);display:grid;place-items:center;font-size:.8rem;font-weight:900;flex:none}
.atelier-tarifs{position:relative;z-index:2;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-carte);padding:1.2rem;display:grid;gap:.2rem}
.atelier-tarifs div{display:flex;justify-content:space-between;align-items:baseline;padding:.7rem .3rem;border-bottom:1px solid rgba(255,255,255,.14)}
.atelier-tarifs b{color:var(--balle);font-size:1.35rem;font-weight:900}
.atelier-tarifs .btn{margin-top:1rem}
@media(max-width:860px){.atelier{grid-template-columns:1fr}}

/* ---------- Gammes du moment ---------- */
.gammes .piste{grid-auto-columns:calc((100% - 3*22px)/4);gap:22px}
.gamme{position:relative;aspect-ratio:3/4.1;border-radius:var(--r-carte);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:1.4rem;text-align:center;isolation:isolate}
.gamme img{position:absolute;top:3%;left:50%;width:68%;transform:translateX(-50%);mix-blend-mode:multiply;z-index:1;transition:transform .35s}
.gamme:hover img{transform:translateX(-50%) translateY(-6px) rotate(-2deg)}
.gamme small{position:relative;z-index:2;font-weight:800;letter-spacing:.2em;font-size:.9rem;text-transform:uppercase}
.gamme strong{position:relative;z-index:2;font-size:clamp(1.6rem,2.4vw,2.35rem);white-space:nowrap;font-weight:1000;line-height:1;text-transform:uppercase;margin:.15rem 0 .3rem}
.gamme em{position:relative;z-index:2;font-style:normal;font-weight:700;font-size:.9rem;margin-bottom:1rem;opacity:.8}
.gamme .btn{position:relative;z-index:2;padding:.7rem 1.6rem}
.g-aero{background:linear-gradient(180deg,#F4F7C9 0%,#E2EE6E 100%)}
.g-drive{background:linear-gradient(180deg,#E3EEFB 0%,#99BDE9 100%)}
.g-strike{background:linear-gradient(180deg,#FBEAE6 0%,#EDA597 100%)}
.g-rafa{background:linear-gradient(180deg,#FCE6F1 0%,#F1A9CB 100%)}
.g-boost{background:linear-gradient(180deg,#EFEFEF 0%,#CFCFCF 100%)}
@media(max-width:1180px){.gammes .piste{grid-auto-columns:calc((100% - 2*22px)/3)}}
@media(max-width:720px){.gammes .piste{grid-auto-columns:70%;gap:14px}}

/* ---------- Bloc mise en avant (bannière + 2 produits) ---------- */
.vedette{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;align-items:stretch}
.vedette-banniere{position:relative;overflow:hidden;border-radius:var(--r-panneau);min-height:440px;padding:clamp(1.6rem,3.4vw,2.8rem);display:flex;flex-direction:column;justify-content:space-between;isolation:isolate;
  background:linear-gradient(150deg,#FFE45C 0%,#FFB5D3 62%,#F48DBE 100%)}
.vedette-banniere h2{position:relative;z-index:2;font-size:clamp(2.6rem,5.4vw,4.8rem);font-weight:1000;line-height:.86;text-transform:uppercase;letter-spacing:-.02em}
.vedette-banniere h2 small{display:block;font-size:.3em;letter-spacing:.2em;font-weight:900;margin-bottom:.8rem}
.vedette-banniere p{position:relative;z-index:2;max-width:30ch;font-weight:700;font-size:1.05rem;margin-top:1rem}
.vedette-banniere .tailles{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.4rem;max-width:56%}
.vedette-banniere .tailles a{background:rgba(255,255,255,.75);border-radius:var(--r-pilule);padding:.4rem .9rem;font-weight:800;font-size:.85rem}
.vedette-banniere .tailles a:hover{background:#fff}
.vedette-banniere .btn{position:relative;z-index:2;align-self:flex-start;margin-top:1.4rem}
.vedette-banniere img{position:absolute;right:-2%;bottom:-6%;height:108%;mix-blend-mode:multiply;transform:rotate(12deg);z-index:1}
.vedette-produits{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:960px){.vedette{grid-template-columns:1fr}.vedette-banniere img{height:80%;opacity:.9}}
@media(max-width:480px){.vedette-produits{grid-template-columns:1fr 1fr;gap:10px}.vedette-banniere .tailles{max-width:100%}}

/* ---------- Espace clubs (à la place du parrainage) ---------- */
.club{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r-panneau);overflow:hidden;min-height:380px}
.club-visuel{position:relative;background:linear-gradient(180deg,#5C8BCB,#3F6CB0);overflow:hidden}
.club-visuel .lignes{opacity:.9}
.club-visuel img{position:absolute;width:30%;mix-blend-mode:multiply}
.club-texte{background:var(--encre);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:clamp(2rem,4vw,3.5rem)}
.club-texte h2{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:1000;text-transform:uppercase;line-height:1.05}
.club-texte .accroche{color:var(--balle);font-weight:900;font-size:clamp(1.2rem,2vw,1.6rem);margin-top:.4rem}
.club-texte ul{margin:1.4rem 0 1.8rem;display:grid;gap:.45rem;font-weight:700}
.club-texte li::before{content:"✓";color:var(--balle);font-weight:900;margin-right:.5rem}
@media(max-width:860px){.club{grid-template-columns:1fr}.club-visuel{min-height:240px}}

/* ---------- Babolat ---------- */
.partenaire{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(1.2rem,3vw,3rem);border:2px solid var(--ligne);border-radius:var(--r-panneau);padding:clamp(1.4rem,3vw,2.2rem) clamp(1.4rem,3vw,2.8rem)}
.partenaire-logo{font-weight:1000;font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.02em;font-style:italic}
.partenaire p{color:var(--gris);max-width:62ch}
.partenaire p b{color:var(--encre)}
@media(max-width:860px){.partenaire{grid-template-columns:1fr;text-align:center}.partenaire p{margin-inline:auto}.partenaire .btn{justify-self:center}}

/* ---------- Communauté + avis ---------- */
.communaute{background:var(--gris-clair)}
.communaute-haut{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:clamp(1rem,3vw,3rem);padding-block:2rem}
.communaute-haut p{font-size:1.05rem;line-height:1.35}
.reseaux{display:flex;gap:.9rem}
.reseaux a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff}
.reseaux a:hover{transform:translateY(-2px)}
.newsletter{display:flex;background:#fff;border-radius:var(--r-pilule);overflow:hidden;min-width:min(380px,100%)}
.newsletter input{flex:1;border:0;padding:.9rem 1.4rem;outline:none;min-width:0}
.newsletter button{background:var(--balle);font-weight:900;padding:0 1.5rem}
.newsletter button:hover{background:var(--balle-2)}
@media(max-width:1000px){.communaute-haut{grid-template-columns:1fr 1fr}.newsletter{grid-column:1/-1}}
@media(max-width:560px){.communaute-haut{grid-template-columns:1fr}}

.avis{display:grid;grid-template-columns:240px 1fr;gap:1.4rem;background:#fff;border-radius:var(--r-carte);padding:1.4rem;align-items:center}
.avis-note{text-align:center}
.avis-note b{font-size:2.6rem;font-weight:1000;line-height:1}
.avis-note b small{font-size:.45em;font-weight:700;color:var(--gris)}
.etoiles{color:#F3B200;letter-spacing:.08em;font-size:1.2rem}
.avis-note p{font-size:.85rem;color:var(--gris)}
.avis-liste{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.avis-liste blockquote{margin:0;border:1px solid var(--ligne);border-radius:8px;padding:1rem;display:flex;flex-direction:column;gap:.5rem;font-size:.9rem}
.avis-liste blockquote .etoiles{font-size:.95rem}
.avis-liste footer{margin-top:auto;font-size:.8rem;color:var(--gris)}
.avis-liste footer b{color:var(--encre)}
.verifie{color:#2E9B4E;font-weight:800}
@media(max-width:1100px){.avis{grid-template-columns:1fr}.avis-liste{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.avis-liste{grid-template-columns:1fr}}

/* ---------- Texte d'accueil (SEO) ---------- */
.bienvenue{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);font-size:.95rem;color:#2b2b2b}
.bienvenue p+p{margin-top:.9rem}
.bienvenue a{text-decoration:underline}
@media(max-width:860px){.bienvenue{grid-template-columns:1fr}}

/* ---------- Pied de page ---------- */
.pied{background:var(--gris-clair);border-top:1px solid var(--ligne)}
.pied-haut{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2rem;padding-block:clamp(2.5rem,5vw,3.5rem)}
.pied h4{font-size:1rem;font-weight:900;text-transform:uppercase;margin-bottom:1.1rem}
.pied li{margin-bottom:.5rem;font-size:.92rem}
.pied li a:hover{text-decoration:underline}
.pied-intro{font-size:.92rem;color:#3a3a3a;margin:1rem 0;max-width:36ch}
.pied .contact{display:flex;gap:.55rem;align-items:flex-start;font-size:.92rem;margin-bottom:.5rem}
.pied .contact svg{flex:none;margin-top:3px}
.pied-bas{background:#EAEAE6}
.pied-bas .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding-block:1rem;font-size:.85rem}
.paiements{display:flex;flex-wrap:wrap;gap:.5rem}
.paiements span{background:#fff;border:1px solid var(--ligne);border-radius:6px;padding:.3rem .65rem;font-weight:800;font-size:.78rem}
@media(max-width:900px){.pied-haut{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pied-haut{grid-template-columns:1fr}}

/* Retour en haut */
.haut{position:fixed;right:1.4rem;bottom:1.4rem;z-index:60;width:50px;height:50px;border-radius:50%;background:#fff;box-shadow:var(--ombre-2);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .2s}
.haut.visible{opacity:1;pointer-events:auto}
.haut:hover{background:var(--balle)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}


/* ============================================================
   COMPOSANTS DES PAGES INTÉRIEURES
   ============================================================ */

/* Fil d'Ariane */
.ariane{margin:0;padding:0;list-style:none}
.ariane{display:flex;flex-wrap:wrap;gap:.35rem;font-size:.85rem;color:var(--gris);padding-block:1.1rem .2rem}
.ariane a:hover{color:var(--encre);text-decoration:underline}
.ariane li+li::before{content:"›";margin-right:.35rem;color:#aaa}
.ariane [aria-current]{color:var(--encre);font-weight:700}
/* Fiche produit sur mobile : le titre suit juste en dessous, inutile de le
   répéter dans le fil (il passait sur deux lignes, séparateur en tête). */
/* Sur mobile, le dernier maillon répète le titre affiché juste en dessous :
   on le retire dès trois maillons (il passait sur deux lignes, séparateur en tête). */
@media(max-width:600px){.ariane li:last-child:nth-child(n+3){display:none}}

/* Rangées à défilement horizontal : bord estompé tant qu'il reste du contenu (theme.js) */
[data-suite]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}

/* Titre de page (capitales, aligné à gauche) */
.page-titre{padding-block:clamp(1rem,2.4vw,1.8rem) clamp(1.2rem,2.6vw,2rem)}
.page-titre h1{font-size:clamp(2rem,4.2vw,3.4rem);font-weight:1000;text-transform:uppercase;line-height:.95;letter-spacing:-.01em}
.page-titre p{margin-top:.6rem;color:var(--gris);max-width:70ch;font-size:1.05rem}
.page-titre.centre{text-align:center}
.page-titre.centre p{margin-inline:auto}

/* Bloc blanc bordé, et variante panneau gris */
.bloc{background:#fff;border:1px solid var(--ligne);border-radius:var(--r-carte);padding:clamp(1.1rem,2.4vw,1.7rem)}
.bloc-gris{background:var(--gris-clair);border-radius:var(--r-carte);padding:clamp(1.1rem,2.4vw,1.7rem)}
.bloc h2,.bloc-gris h2{font-size:1.25rem;font-weight:1000;text-transform:uppercase;margin-bottom:1rem}

/* Grille de produits (catalogue, recherche, favoris) */
.grille-produits{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grille-produits .produit{width:auto}
@media(max-width:1100px){.grille-produits{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.grille-produits{grid-template-columns:repeat(2,1fr);gap:10px}}

/* Formulaires */
.champ{display:grid;gap:.35rem}
.champ label,.champ .label{font-weight:800;font-size:.9rem}
.champ label small,.champ .label small{font-weight:600;color:var(--gris)}
.champ input,.champ select,.champ textarea{width:100%;font:inherit;padding:.8rem 1rem;border:2px solid var(--ligne);border-radius:var(--r-carte);background:#fff;color:var(--encre)}
.champ textarea{min-height:130px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--encre)}
.champ .aide{font-size:.82rem;color:var(--gris)}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.champs .plein{grid-column:1/-1}
@media(max-width:600px){.champs{grid-template-columns:1fr}}
.case{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem}
.case input{width:20px;height:20px;accent-color:var(--encre);flex:none;margin-top:.1rem}

/* Choix en tuiles (livraison, paiement, cordage…) */
.choix{display:grid;gap:.6rem}
.choix label{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;border:2px solid var(--ligne);border-radius:var(--r-carte);padding:1rem 1.1rem;cursor:pointer;background:#fff}
.choix label:has(input:checked){border-color:var(--encre);box-shadow:inset 0 0 0 1px var(--encre)}
.choix input{width:20px;height:20px;accent-color:var(--encre)}
.choix b{display:block}
.choix small{color:var(--gris);font-size:.85rem}

/* Pastilles d'information */
.pastille-info{display:inline-flex;align-items:center;gap:.4rem;background:var(--gris-clair);border-radius:var(--r-pilule);padding:.35rem .8rem;font-size:.85rem;font-weight:700}
.ok{color:#2E9B4E}

/* Récapitulatif chiffré (panier, commande, confirmation) */
.recap dl{display:grid;grid-template-columns:1fr auto;gap:.55rem 1rem;margin:0}
.recap dt{color:var(--gris)}
.recap dd{margin:0;text-align:right;font-weight:700}
.recap .total{border-top:2px solid var(--encre);padding-top:.8rem;margin-top:.4rem;font-size:1.25rem;font-weight:1000}

/* Tableaux */
.tableau{width:100%;border-collapse:collapse;font-size:.95rem}
.tableau th,.tableau td{text-align:left;padding:.8rem .9rem;border-bottom:1px solid var(--ligne);vertical-align:top}
.tableau th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gris)}
.defile{overflow-x:auto}

/* Questions fréquentes */
.faq details{border-bottom:1px solid var(--ligne)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;padding:1.05rem 0;font-weight:800}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:1.1rem;color:#444}

/* Pagination */
.pagination{display:flex;justify-content:center;gap:.4rem;margin-top:2rem}
.pagination a,.pagination span{min-width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-pilule);font-weight:800;padding:0 .9rem}
.pagination a:hover{background:var(--gris-clair)}
.pagination [aria-current]{background:var(--encre);color:#fff}

/* Encart d'aide WhatsApp, réutilisé en bas de plusieurs pages */
.aide-whatsapp{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;background:var(--encre);color:#fff;border-radius:var(--r-panneau);padding:clamp(1.2rem,2.8vw,2rem)}
.aide-whatsapp strong{display:block;font-size:1.3rem;font-weight:1000;text-transform:uppercase}
.aide-whatsapp p{color:rgba(255,255,255,.75)}


/* ============================================================
   COMPLÉMENTS WORDPRESS (hors maquettes)
   ============================================================ */

/* Lien d'évitement */
.lien-evitement{position:absolute;left:-9999px}
.lien-evitement:focus{position:fixed;top:.5rem;left:.5rem;z-index:99;width:auto;height:auto;clip:auto;background:var(--balle);color:var(--encre);padding:.7rem 1.1rem;border-radius:var(--r-pilule);font-weight:800}

/* Logo image (personnalisateur) à la place du logo dessiné */
.logo-image{display:block;height:56px;width:auto;max-width:none}
.custom-logo-link{display:block}

/* Sous-menus de la barre de catégories (seulement si le menu en a) */
.nav-deroulante ul{overflow:visible;flex-wrap:wrap}
.nav ul>li{position:relative}
.nav .sous-menu{position:absolute;top:100%;left:0;z-index:40;min-width:15rem;display:none;flex-direction:column;gap:0;
  background:#fff;border:1px solid var(--ligne);border-radius:var(--r-carte);box-shadow:var(--ombre-2);padding:.35rem}
.nav ul>li:hover>.sous-menu,.nav ul>li:focus-within>.sous-menu{display:flex}
.nav .sous-menu a{padding:.6rem .75rem;border-bottom:0;border-radius:6px;white-space:normal;font-size:.95rem}
.nav .sous-menu a:hover{background:var(--gris-clair)}
.nav .current-menu-item>a,.nav .est-actif>a{border-bottom-color:var(--balle)}

/* En-tête et pied réduits du tunnel de commande (maquette commande-v1) */
.entete-tunnel{background:#fff;border-bottom:1px solid var(--ligne);position:sticky;top:0;z-index:50}
.entete-tunnel .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding-block:.9rem}
.tunnel-secu{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.4rem;font-size:.9rem}
.tunnel-secu span{display:flex;align-items:center;gap:.45rem}
.tunnel-secu svg{flex:none}
.tunnel-secu b{font-weight:900}
@media(max-width:640px){.tunnel-secu span:first-child{display:none}}
.pied-tunnel{background:var(--gris-clair);margin-top:3rem}
.pied-tunnel .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem 1.4rem;padding-block:1.2rem;font-size:.85rem;color:var(--gris)}
.pied-tunnel nav{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.pied-tunnel a:hover{color:var(--encre);text-decoration:underline}

/* Pied : liens de contact, cookies */
.pied .contact a:hover{text-decoration:underline}
.pied-cookies{margin-left:.75rem;text-decoration:underline}
/* Le bouton « haut » passe au-dessus de la barre d'achat mobile */
@media(max-width:720px){body:has(.barre-mobile) .haut{bottom:96px}}

/* Contenus de l'éditeur de blocs */
.alignwide{max-width:min(1100px,100%);margin-inline:auto}
.alignfull{width:100%;max-width:none}
.alignleft{float:left;margin:.3rem 1.5rem 1rem 0}
.alignright{float:right;margin:.3rem 0 1rem 1.5rem}
.aligncenter{margin-inline:auto;text-align:center}
.wp-block-image img{border-radius:var(--r-carte);height:auto}
.wp-block-image figcaption,.wp-caption-text,figcaption{font-size:.82rem;color:var(--gris);margin-top:.5rem;text-align:center}
.wp-caption{max-width:100%}
.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;padding:.85rem 1.6rem;border-radius:var(--r-pilule);font-weight:800;background:var(--balle);color:var(--encre)}
.wp-block-button__link:hover{background:var(--balle-2)}
.wp-block-separator{border:0;border-top:1px solid var(--ligne);margin-block:2rem}

/* Utilitaires */
.wrap-etroit{max-width:960px;margin-inline:auto;padding-inline:var(--gouttiere)}
.band{padding-block:clamp(2.25rem,4.5vw,4rem)}
.band-serre{padding-block:clamp(1.5rem,3vw,2.5rem)}
.gris{color:var(--gris)}
.mini{font-size:.8rem}
.h1{font-size:clamp(2rem,4.2vw,3.4rem);font-weight:1000;text-transform:uppercase;line-height:.95;letter-spacing:-.01em}
.h2{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:1000;text-transform:uppercase;line-height:1.05}
.h3{font-size:1.05rem;font-weight:800;line-height:1.25}
.h4{font-size:.95rem;font-weight:800;line-height:1.3}
.tete-section{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:1.75rem}
.tete-section p{color:var(--gris);margin-top:.55rem;max-width:52ch}
@media(max-width:700px){.tete-section{display:block}.tete-section .lien-tout{display:inline-block;margin-top:.8rem}}
.lien-tout{font-weight:800;font-size:.95rem;border-bottom:2px solid var(--balle);white-space:nowrap}
.lien-tout:hover{background:var(--balle)}

/* Variantes de boutons utilisées par le PHP et WooCommerce */
.btn-primaire{background:var(--balle);color:var(--encre)}
.btn-primaire:hover{background:var(--balle-2)}
.btn-encre{background:var(--encre);color:#fff}
.btn-encre:hover{background:#333}
.btn-ligne{border:2px solid var(--ligne);color:var(--encre);background:#fff}
.btn-ligne:hover{border-color:var(--encre)}
.btn-fantome{border:2px solid rgba(255,255,255,.4);color:#fff}
.btn-fantome:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn-wa{background:#25D366;color:#06301A}
.btn-wa:hover{background:#1FBA5A}
.btn-bloc{width:100%}
.btn-grand{padding:1.05rem 1.8rem;font-size:1.05rem}
.btn-petit{padding:.55rem 1.1rem;font-size:.88rem}
.btn[aria-disabled="true"],.btn:disabled{opacity:.45;pointer-events:none}

/* Visuels « photo » à taille fixe (panier, récap, mini-fiches) */
.ligne-visuel img,.ajout-visuel img,.recent-visuel img,.barre-fixe-visuel img,.mini-visuel img,.recap-visuel img,.encart-visuel img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.ligne-visuel,.ajout-visuel,.recent-visuel,.barre-fixe-visuel,.mini-visuel,.recap-visuel,.encart-visuel{grid-template:minmax(0,1fr)/minmax(0,1fr);background:#fff}

/* ============================================================
   COMPOSANTS PARTAGÉS HÉRITÉS (re-teintés par les alias de jetons)
   Les forks de pages peuvent les remplacer par ceux des maquettes.
   ============================================================ */
/* ---------- 9. Cartes, encarts, notes ---------- */
.carte{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-carte);padding:clamp(1.15rem,2.4vw,1.75rem)}
.carte-tete{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.carte-plate{border-radius:var(--r-tuile)}

.note{display:flex;gap:.75rem;align-items:flex-start;border-radius:var(--r-tuile);padding:.85rem 1rem;font-size:.86rem;line-height:1.5}
.note svg{flex:none;margin-top:2px}
.note b{font-weight:700}
.note-info{background:var(--azur-pale);color:var(--court)}
.note-info svg{color:var(--azur)}
.note-ok{background:#E6F4EC;color:#0F5C31}
.note-ok svg{color:var(--vert)}
.note-alerte{background:#FDECEA;color:#8C1F17}
.note-alerte svg{color:var(--brique)}
.note-balle{background:var(--balle);color:var(--court)}

/* Bandeau code promo, repris de la fiche produit */
.promo-code{display:flex;align-items:center;gap:.7rem;background:var(--balle);color:var(--court);
  border-radius:var(--r-tuile);padding:.7rem .9rem;font-size:.85rem;font-weight:600}
.promo-code code{font-family:inherit;background:var(--court);color:var(--balle);padding:.15rem .5rem;border-radius:4px;font-weight:800}
/* Formulaires : compléments */
.champs-2{grid-template-columns:1fr 1fr}
.champs-3{grid-template-columns:repeat(3,1fr)}
.champ-large{grid-column:1/-1}
.champ label .opt{font-weight:600;color:var(--gris)}
.champ input::placeholder,.champ textarea::placeholder{color:#9a9a9a}
.champ .aide-champ{font-size:.8rem;color:var(--gris)}
.champ-erreur input,.champ-erreur select{border-color:var(--brique);background:#FFF8F7}
.champ .msg-erreur{font-size:.8rem;font-weight:700;color:var(--brique)}
.case a{text-decoration:underline}
@media(max-width:640px){.champs-2,.champs-3{grid-template-columns:1fr}}
.bloc-intro{font-size:.9rem;color:var(--gris);margin-bottom:1.35rem}
.mdp-ligne{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.oubli{font-size:.82rem;font-weight:800;text-decoration:underline}
.option{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:start;
  border:2px solid var(--ligne);border-radius:var(--r-btn);background:var(--blanc);padding:1rem 1.1rem;cursor:pointer;
  transition:border-color .16s, background-color .16s}
.option:hover{border-color:var(--azur)}
.option input{accent-color:var(--azur);width:19px;height:19px;margin:0;margin-top:2px}
.option:has(input:checked){border-color:var(--court);background:var(--azur-pale)}
.option-nom{font-size:.94rem;font-weight:700;line-height:1.3}
.option-nom small{display:block;font-weight:500;color:var(--gris);font-size:.8rem;margin-top:.2rem}
.option-prix{text-align:right;font-weight:800;font-size:.92rem;white-space:nowrap}
.option-prix small{display:block;font-weight:700;color:var(--vert);font-size:.72rem}
.option-detail{grid-column:2/-1;padding-top:.85rem;margin-top:.15rem;border-top:1px solid var(--ligne);font-size:.84rem;color:var(--gris)}
/* Placement explicite : WooCommerce masque le bouton radio quand il n'y a
   qu'un moyen de paiement, et sans ces règles tout remonte d'une colonne. */
.option>input{grid-column:1}
.option-nom{grid-column:2}
.option-prix,.logo-paiement{grid-column:3}
.option-detail p{margin:0}
.option-detail p+p{margin-top:.5rem}
.option-marque{display:inline-block;margin-left:.45rem;padding:.1rem .45rem;border-radius:999px;
  background:var(--balle);color:var(--court);font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;vertical-align:middle}

/* Compteur de quantité (WooCommerce : .quantity.compteur) */
.quantity.compteur{display:inline-flex;align-items:center;border:2px solid var(--ligne);border-radius:var(--r-btn);background:var(--blanc)}
.quantity.compteur button{width:38px;height:40px;font-size:1.15rem;font-weight:700;color:var(--gris)}
.quantity.compteur button:hover{color:var(--encre)}
.quantity.compteur input{width:38px;text-align:center;border:0;background:transparent;font-weight:700;outline:none;-moz-appearance:textfield}
.quantity.compteur input::-webkit-outer-spin-button,.quantity.compteur input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* ---------- 11. Puces de filtre ---------- */
.puces{display:flex;flex-wrap:wrap;gap:.5rem}
.puce{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .9rem;border:2px solid var(--ligne);
  border-radius:999px;font-size:.84rem;font-weight:600;background:var(--blanc)}
.puce:hover{border-color:var(--azur);color:var(--azur)}
.puce[aria-pressed="true"],.puce-actif{background:var(--court);border-color:var(--court);color:#fff}
.puce-retrait{background:var(--azur-pale);border-color:var(--azur-pale);color:var(--court)}
.puce-retrait:hover{border-color:var(--azur)}
.puce-retrait b{font-weight:800}
.tableau .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tableau tbody tr:last-child td{border-bottom:0}
.tableau-defile{overflow-x:auto}
/* Miniature produit en ligne (panier, commande, compte) */
.mini-prod{display:flex;gap:.9rem;align-items:center;min-width:0}
.mini-visuel{width:62px;height:74px;flex:none;background:linear-gradient(165deg,#EAF1FA,#DCE7F5);
  border-radius:var(--r-tuile);display:grid;place-items:center;padding:.4rem}
.mini-visuel svg{width:100%;height:100%;color:var(--court)}
.mini-nom{font-size:.9rem;font-weight:700;line-height:1.3}
.mini-nom .marque{display:block;margin-bottom:.15rem}
.mini-var{font-size:.78rem;color:var(--gris);margin-top:.25rem}
/* Lignes d'articles du récapitulatif (panier, commande, confirmation) */
/* Lignes d'articles du récapitulatif — panier, commande et confirmation */
.recap-articles{display:grid;gap:.9rem;margin-bottom:1.1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--ligne)}
.recap-article{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center}
.recap-visuel{position:relative;width:52px;height:62px;flex:none;background:linear-gradient(165deg,#EAF1FA,#DCE7F5);
  border-radius:var(--r-tuile);display:grid;place-items:center;padding:.3rem}
.recap-visuel svg{width:100%;height:100%;color:var(--court)}
.recap-qte{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;border-radius:10px;background:var(--court);
  color:#fff;font-size:.68rem;font-weight:800;display:grid;place-items:center;padding:0 5px}
.recap-nom{font-size:.85rem;font-weight:700;line-height:1.3}
.recap-nom small{display:block;font-weight:500;color:var(--gris);font-size:.76rem;margin-top:.15rem}
.recap-montant{font-size:.88rem;font-weight:800;white-space:nowrap}
.recap-modifier{font-size:.82rem;font-weight:700;color:var(--azur)}
.recap-modifier:hover{text-decoration:underline}
.recap-lignes{display:grid;gap:.6rem;font-size:.9rem}
.recap-lignes div{display:flex;justify-content:space-between;gap:1rem}
.recap-lignes .offert{color:var(--vert);font-weight:700}
.recap-total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-top:2px solid var(--encre);margin-top:.9rem;padding-top:.9rem}
.recap-total b{font-size:1.6rem;font-weight:900;letter-spacing:-.02em}


/* Jauge de franco de port */
.jauge{display:grid;gap:.5rem}
.jauge-barre{height:8px;border-radius:5px;background:var(--ligne);overflow:hidden}
.jauge-barre span{display:block;height:100%;background:linear-gradient(90deg,var(--azur),var(--balle));border-radius:5px}
.jauge-texte{display:flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:600}
.jauge-texte .icone{flex:none;color:var(--vert)}
.jauge-texte b{color:var(--azur)}
/* ---------- 14. Étapes et chronologie ---------- */
.etapes{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:center;font-size:.85rem;font-weight:600;color:var(--gris)}
.etapes li{display:flex;align-items:center;gap:.55rem}
.etapes .n{width:24px;height:24px;border-radius:50%;background:var(--ligne);color:var(--blanc);
  display:grid;place-items:center;font-size:.75rem;font-weight:800;flex:none}
.etapes .faite .n{background:var(--vert)}
.etapes .faite{color:var(--encre)}
.etapes [aria-current] .n{background:var(--azur)}
.etapes [aria-current]{color:var(--encre)}

.chrono{display:grid;gap:0;position:relative}
.chrono li{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding-bottom:1.6rem;position:relative}
.chrono li:last-child{padding-bottom:0}
.chrono li::before{content:"";position:absolute;left:13px;top:30px;bottom:0;width:2px;background:var(--ligne)}
.chrono li:last-child::before{display:none}
.chrono .pion{width:28px;height:28px;border-radius:50%;background:var(--blanc);border:2px solid var(--ligne);
  display:grid;place-items:center;color:var(--gris);z-index:1}
.chrono .faite .pion{background:var(--vert);border-color:var(--vert);color:#fff}
.chrono .faite::before{background:var(--vert)}
.chrono .encours .pion{background:var(--azur);border-color:var(--azur);color:#fff}
.chrono b{display:block;font-size:.94rem;font-weight:700;line-height:1.3}
.chrono span{font-size:.82rem;color:var(--gris)}
.aide{display:flex;align-items:center;gap:.85rem;font-size:.85rem}
.aide svg{flex:none;color:#25D366}
.aide b{display:block}
.aide span{color:var(--gris);font-size:.8rem}

/* ---------- 17. Entête de page sombre ---------- */
.tete-page{background:linear-gradient(160deg,var(--court-2) 0%,var(--court) 68%);color:#fff;position:relative;overflow:hidden}
.tete-page .wrap,.tete-page .wrap-etroit{position:relative;z-index:2;padding-block:clamp(1.75rem,3.5vw,3rem)}
.tete-page h1{margin-bottom:.7rem;text-wrap:balance}
.tete-page .surtitre{font-size:.82rem;font-weight:700;color:rgba(255,255,255,.62);margin-bottom:.35rem}
.tete-page p{color:rgba(255,255,255,.76);max-width:64ch}
/* Le visuel de tête est un filigrane : jamais de hauteur intrinsèque, sinon
   le SVG prend toute la largeur de la page. */
.tete-visuel{position:absolute;z-index:1;right:clamp(1rem,5vw,4rem);top:50%;
  transform:translateY(-50%) rotate(-10deg);width:clamp(90px,11vw,150px);height:auto;
  opacity:.26;color:#fff;pointer-events:none}
@media(max-width:860px){.tete-visuel{display:none}}
.trame{position:absolute;inset:0;z-index:1;opacity:.09;pointer-events:none;
  background-image:repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 16px),
                   repeating-linear-gradient(-45deg,#fff 0 1px,transparent 1px 16px)}

/* ---------- 19. Barre mobile persistante ---------- */
.barre-mobile{display:none}
@media(max-width:720px){
  .barre-mobile{
    display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--blanc);padding:.65rem var(--gouttiere);border-top:1px solid var(--ligne);
    box-shadow:0 -6px 20px -10px rgba(8,40,74,.35);
  }
  .barre-mobile-prix{display:flex;align-items:center;font-size:1.15rem;font-weight:900;
    line-height:1.2}
  .barre-mobile-prix del{font-size:.82rem;font-weight:600;color:var(--gris);margin-right:.4rem}
  /* En promo, l'ancien prix passe au-dessus : sur une ligne il écrase le bouton. */
  .barre-mobile-prix:has(del){flex-direction:column;align-items:flex-start;justify-content:center}
  .barre-mobile-prix:has(del) del{margin-right:0}
  .barre-mobile .btn{white-space:nowrap}
  .barre-mobile{transition:transform .2s ease}
  .barre-mobile.est-masquee{transform:translateY(110%)}
  /* Place pour la barre, seulement sur les pages qui l'affichent */
  body:has(.barre-mobile){padding-bottom:84px}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .produit:hover{transform:none}
}
/* ---------- 20. Encart d'aide (page de contenu et suivi de commande) ---------- */
/* Partagé par deux gabarits : il vit donc ici, pas dans une feuille de page. */
.aide-carte{background:var(--court);color:#fff;border-radius:var(--r-carte);padding:1.35rem;position:relative;overflow:hidden}
.aide-carte>*{position:relative;z-index:2}
/* déclarée après : sinon la trame perdrait son absolute et disparaîtrait */
.aide-carte>.trame{position:absolute;inset:0;z-index:1}
.aide-carte b{display:block;font-size:1rem;margin-bottom:.5rem}
.aide-carte p{font-size:.85rem;color:rgba(255,255,255,.72);line-height:1.55;margin-bottom:1.1rem}
.aide-carte .btn+.btn{margin-top:.6rem}
.aide-liens b{display:block;font-size:1rem;margin-bottom:.7rem}
.aide-liens ul{display:grid;gap:.5rem;font-size:.9rem}
.aide-liens a{color:var(--azur);font-weight:600}
.aide-liens a:hover{text-decoration:underline}
/* ---------- 21. Composants partages entre gabarits ----------
   Une seule feuille de gabarit est chargee par page (voir
   tennisshop_feuille_gabarit) : tout composant qui apparait sur plus d'un
   gabarit doit vivre ici, sinon il sort sans style sur les autres pages. */

/* Carte d'article : rubrique Conseils, article (« À lire ensuite »), 404.
   L'accueil garde sa propre variante dans accueil.css. */
.articles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.conseil{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-carte);overflow:hidden;display:flex;flex-direction:column}
.conseil:hover{box-shadow:var(--lift-2)}
.conseil:hover .conseil-titre{color:var(--azur)}
.conseil-visuel{aspect-ratio:16/9;background:linear-gradient(150deg,var(--court-2),var(--court));position:relative;display:grid;place-items:center;overflow:hidden}
.conseil-visuel svg.sujet{width:auto;height:62%;color:rgba(255,255,255,.85);position:relative;z-index:2}
.conseil-visuel img.sujet{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.conseil-corps{padding:1.15rem 1.25rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.conseil-cat{font-size:.74rem;font-weight:700;color:var(--azur)}
.conseil-titre{font-size:1.05rem;font-weight:700;line-height:1.3;transition:color .16s}
.conseil p{font-size:.86rem;color:var(--gris);line-height:1.55}
.conseil .meta{margin-top:auto;padding-top:.6rem}
@media(max-width:1080px){
  .articles{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .articles{grid-template-columns:1fr}
}
.meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.8rem;color:var(--gris);align-items:center}
.meta i{width:3px;height:3px;border-radius:50%;background:var(--ligne)}

/* Prose : page de contenu, accueil editorial, texte SEO d'une categorie. */
.contenu{max-width:74ch}
.contenu>p{font-size:1rem;line-height:1.75;color:#22323F;margin-bottom:1.05rem}
.contenu .chapeau{font-size:1.12rem;line-height:1.65;color:var(--encre);font-weight:500;margin-bottom:1.75rem}
.contenu h2{font-size:clamp(1.3rem,2.2vw,1.7rem);margin:2.5rem 0 .9rem;
  padding-top:1.5rem;border-top:1px solid var(--ligne);scroll-margin-top:160px}
.contenu h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.contenu h3{font-size:1.05rem;font-weight:700;margin:1.6rem 0 .55rem}
.contenu ul.liste{display:grid;gap:.55rem;margin-bottom:1.15rem}
.contenu ul.liste li{display:grid;grid-template-columns:auto 1fr;gap:.65rem;font-size:.96rem;line-height:1.65;color:#22323F}
.contenu ul.liste svg{color:var(--azur);flex:none;margin-top:5px}
.contenu b{font-weight:700;color:var(--encre)}
.contenu a.lien{color:var(--azur);font-weight:600;border-bottom:1px solid var(--azur)}
.contenu .tableau{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-carte);overflow:hidden;margin:1.35rem 0}
.contenu .tableau th{background:var(--chaux)}
/* Prose saisie dans l'éditeur (pages et articles) : listes, liens, tableaux,
   citations et images n'ont pas de classe, ils doivent quand même se lire. */
:is(.contenu,.corps) :is(ul,ol):not(.liste){margin:0 0 1.15rem;padding-left:1.35rem;display:grid;gap:.4rem}
:is(.contenu,.corps) ul:not(.liste){list-style:disc}
:is(.contenu,.corps) ol:not(.liste){list-style:decimal}
:is(.contenu,.corps) :is(ul,ol):not(.liste) li{font-size:.97rem;line-height:1.65;color:#22323F;padding-left:.2rem}
:is(.contenu,.corps) :is(ul,ol):not(.liste) li::marker{color:var(--azur);font-weight:700}
:is(.contenu,.corps) :is(p,li,td) a:not([class]){color:var(--azur);font-weight:600;text-decoration:underline;text-underline-offset:2px}
:is(.contenu,.corps) :is(p,li,td) a:not([class]):hover{color:var(--azur-2)}
:is(.contenu,.corps) blockquote{margin:1.5rem 0;padding:1rem 1.25rem;background:var(--azur-pale);border-left:4px solid var(--azur);border-radius:0 var(--r-btn) var(--r-btn) 0}
:is(.contenu,.corps) blockquote p{margin:0;font-size:.97rem;line-height:1.65;color:var(--encre)}
:is(.contenu,.corps) figure{margin:1.75rem 0}
:is(.contenu,.corps) figure img{border-radius:var(--r-carte);width:100%;height:auto}
:is(.contenu,.corps) figcaption{font-size:.8rem;color:var(--gris);margin-top:.5rem}
:is(.contenu,.corps) .wp-block-table{margin:1.5rem 0;overflow-x:auto}
:is(.contenu,.corps) .wp-block-table table{width:100%;border-collapse:collapse;background:var(--blanc);font-size:.9rem;min-width:480px}
:is(.contenu,.corps) .wp-block-table :is(th,td){border:1px solid var(--ligne);padding:.6rem .8rem;text-align:left;vertical-align:top;line-height:1.5}
:is(.contenu,.corps) .wp-block-table th{background:var(--chaux);font-weight:700}

/* FAQ depliante : page de contenu et bas de page categorie. */
.faq summary .icone-chevron{transform:rotate(90deg);color:var(--gris);flex:none;transition:transform .18s}
.faq details[open] summary .icone-chevron{transform:rotate(-90deg)}


/* Etat vide : recherche sans resultat, categorie sans produit, panier vide. */
.rien{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-carte);
  padding:clamp(2rem,5vw,3.25rem);display:grid;justify-items:center;text-align:center;gap:1rem}
.rien-visuel{width:88px;color:var(--ligne)}
.rien p{color:var(--gris);max-width:52ch}
.rien-pistes{display:grid;gap:.6rem;text-align:left;width:100%;max-width:520px;margin-top:.5rem;font-size:.9rem;color:var(--gris)}
.rien-pistes li{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start}
.rien-pistes svg{color:var(--azur);flex:none;margin-top:3px}
.rien-actions,
.vide-ctas{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:.5rem}

/* Pastille de statut : tableau des commandes du compte, page de suivi. */
.statut{display:inline-flex;align-items:center;gap:.4rem;font-size:.76rem;font-weight:700;padding:.25rem .6rem;border-radius:999px;white-space:nowrap}
.statut i{width:6px;height:6px;border-radius:50%;background:currentColor}
.statut-attente{background:#EEF2F6;color:var(--gris)}
.statut-route{background:var(--azur-pale);color:var(--azur)}
.statut-livre{background:#E6F4EC;color:#0F5C31}
.statut-annule{background:#FDECEA;color:#8C1F17}

.lien{color:var(--azur);font-weight:600;border-bottom:1px solid var(--azur)}
.lien:hover{color:var(--court);border-bottom-color:var(--court)}

/* Reactions d'article : wp_list_comments et comment_form sortent leur propre
   balisage, on l'habille ici plutot que de reecrire le walker. */
.commentaires{display:grid;gap:1.35rem}
.commentaires .h2{font-size:1.25rem;}
.liste-commentaires{list-style:none;display:grid;gap:1.1rem;margin:0;padding:0}
.liste-commentaires .children{list-style:none;display:grid;gap:1.1rem;margin:1.1rem 0 0;padding-left:clamp(1rem,4vw,2.5rem);
  border-left:2px solid var(--ligne)}
.comment-body{display:grid;gap:.55rem}
.comment-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;font-size:.82rem;color:var(--gris)}
.comment-author{display:flex;align-items:center;gap:.6rem}
.comment-author .avatar{width:36px;height:36px;border-radius:50%;flex:none}
.comment-author .fn{font-weight:700;font-style:normal;color:var(--encre)}
.comment-author .says{display:none}
.comment-metadata a{color:inherit}
.comment-content p{font-size:.95rem;line-height:1.7;color:#22323F}
.comment-content p+p{margin-top:.7rem}
.comment-body .reply{font-size:.82rem;font-weight:700}
.comment-body .reply a{color:var(--azur)}
.comment-awaiting-moderation{font-size:.8rem;color:var(--gris);font-style:italic}
.comment-respond{display:grid;gap:.9rem}
.liste-commentaires+.comment-respond{margin-top:.4rem;padding-top:1.35rem;border-top:1px solid var(--ligne)}
.comment-reply-title{font-size:1.1rem;font-weight:800;}
.comment-reply-title small{font-size:.8rem;font-weight:600;margin-left:.6rem}
.comment-form{display:grid;gap:1rem}
.comment-form .champ label{font-size:.82rem;font-weight:700}
.comment-form textarea,
.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url]{width:100%;padding:.8rem .95rem;border:2px solid var(--ligne);border-radius:var(--r-btn);
  background:var(--blanc);color:var(--encre);outline:none;transition:border-color .16s}
.comment-form textarea{min-height:120px;resize:vertical;line-height:1.55}
.comment-form textarea:focus,.comment-form input:focus{border-color:var(--azur)}
.comment-form-author,.comment-form-email,.comment-form-url{display:grid;gap:.35rem}
.comment-form-author label,.comment-form-email label,.comment-form-url label{font-size:.82rem;font-weight:700}
.comment-form-cookies-consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem}
.comment-form-cookies-consent input{accent-color:var(--azur);width:18px;height:18px;margin:0;flex:none;margin-top:2px}
.comment-form .form-submit{margin:0}
.comment-notes,.logged-in-as{font-size:.84rem;color:var(--gris)}
@media(min-width:640px){
  .comment-form{grid-template-columns:1fr 1fr}
  .comment-form>p:not(.comment-form-author):not(.comment-form-email){grid-column:1/-1}
}
/* ---------- Bandeau cookies (inc/mesure.php) ---------- */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:90;padding:0 var(--gouttiere) calc(var(--gouttiere) + env(safe-area-inset-bottom,0px));pointer-events:none}
.cookies-boite{pointer-events:auto;max-width:640px;background:var(--blanc);color:var(--encre);border-radius:var(--r-carte);box-shadow:var(--lift-2);border:1px solid var(--ligne);padding:1.1rem 1.25rem;display:grid;gap:.7rem;font-size:.9rem;line-height:1.5}
.cookies[hidden],.cookies [hidden]{display:none!important}
.cookies-titre{font-size:1rem}
.cookies-boite p{margin:0;color:var(--gris)}
.cookies-boite p a{color:var(--azur);text-decoration:underline}
.cookies-choix{display:grid;gap:.45rem}
.cookies-choix label{display:flex;gap:.55rem;align-items:center}
.cookies-actions{display:flex;flex-wrap:wrap;gap:.5rem}

/* Visuel d'article en photo d'ambiance : plein cadre, sans fondu ni inclinaison
   (les photos détourées de produits gardent le fond de court). */
div.visuel-produit.visuel-photo{inset:0;mix-blend-mode:normal}
div.visuel-produit.visuel-photo img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;transform:none}