/* ============================================================================
   catalog.css — Vitrine catalogue. Cartes de catégorie « image à gauche qui
   déborde + bandeau horizontal portant le nom à droite » (composition cap 1),
   à la charte. Nom du rite en Playfair Display. + cartes produit & boutons.
   Markup Kadence ciblé : li.product-category > a > img + div.product-details > h2
   ============================================================================ */

/* ---- Bannière d'en-tête des pages MAÇONNIQUES (façon hero d'accueil) ----
   La hero section d'archive Kadence reçoit l'image d'ambiance en grand ;
   texte INCRUSTÉ directement dessus (overlay léger), aucun bandeau beige. */
.sl-cat-archive .entry-hero.product-archive-hero-section{
  position:relative;min-height:66vh;display:flex;align-items:center;overflow:hidden;
  background-image:var(--sl-banner,none);background-size:cover;background-position:center 72%;
  background-repeat:no-repeat;background-color:var(--sl-chocolat);}
.sl-cat-archive .entry-hero.product-archive-hero-section::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(26,20,16,.26),rgba(26,20,16,.56));}
/* tout transparent à l'intérieur -> le texte est sur la photo, pas dans une boîte */
.sl-cat-archive .product-archive-hero-section .entry-hero-container-inner,
.sl-cat-archive .product-archive-hero-section .entry-header,
.sl-cat-archive .product-archive-hero-section .archive-description,
.sl-cat-archive .product-archive-hero-section .content-bg{
  background:transparent !important;box-shadow:none !important;border:none !important;}
.sl-cat-archive .entry-hero-container-inner{position:relative;z-index:1;width:100%;text-align:center;}
/* l'autre header (vide), habillé par erreur auparavant : neutralisé */
.sl-cat-archive .woocommerce-products-header{
  background:none !important;min-height:0 !important;width:auto !important;
  margin:0 auto !important;padding:0 !important;}
.sl-cat-archive .woocommerce-products-header::before{display:none !important;}
.sl-cat-archive .page-title.archive-title{
  font-family:var(--sl-serif-name);font-weight:600;color:#fff !important;
  font-size:clamp(2.2rem,4.2vw,3.4rem);letter-spacing:.05em;text-transform:uppercase;
  text-shadow:0 2px 22px rgba(0,0,0,.6);margin:0;}
.sl-cat-archive .archive-description{max-width:48rem;margin:1.2rem auto 0;}
.sl-cat-archive .archive-description p{color:#f4ecdd;font-family:var(--sl-serif-text);
  font-size:1.1rem;line-height:1.65;margin:0;text-shadow:0 1px 10px rgba(0,0,0,.6);}
.sl-cat-archive .archive-description strong{color:#E0BE7E;}

/* Litho : nom gravé en haut (cadrage 72%). NOTRE phrase est posée en ABSOLU dans
   la zone basse-GAUCHE du marbre dégagé (à gauche des cristaux), comme demandé. */
body.term-lithotherapie.sl-cat-archive .entry-hero.product-archive-hero-section{
  align-items:flex-end;background-position:center 72%;}
body.term-lithotherapie.sl-cat-archive .entry-hero.product-archive-hero-section::before{
  display:none;}
/* on neutralise les contextes de positionnement intermédiaires -> la phrase se
   cale par rapport au BANDEAU entier */
body.term-lithotherapie.sl-cat-archive .entry-hero-container-inner,
body.term-lithotherapie.sl-cat-archive .product-archive-hero-section .hero-container,
body.term-lithotherapie.sl-cat-archive .product-archive-hero-section .entry-header{
  position:static !important;}
/* l'image porte déjà son nom -> on masque NOTRE gros titre */
body.term-lithotherapie.sl-cat-archive .page-title.archive-title{display:none !important;}
/* phrase = SOUS-TITRE : calée juste sous le titre gravé, à gauche, brun foncé lisible */
body.term-lithotherapie.sl-cat-archive .archive-description{
  position:absolute;left:13%;bottom:37%;max-width:30rem;margin:0;z-index:3;text-align:left;}
body.term-lithotherapie.sl-cat-archive .archive-description p{
  color:#463528 !important;text-shadow:0 1px 3px rgba(255,255,255,.55);font-size:1.04rem;line-height:1.55;}
@media (max-width:782px){
  body.term-lithotherapie.sl-cat-archive .entry-hero.product-archive-hero-section{
    background-position:30% center;}
  body.term-lithotherapie.sl-cat-archive .archive-description{left:7%;bottom:24%;max-width:90%;}
}

/* Prix « sur commande » (produits sans prix tant que le client ne l'a pas saisi) */
.sl-sur-commande{font-family:var(--sl-serif-text);font-style:italic;color:var(--sl-corail);font-size:.96rem;}
.sl-sur-commande a{color:var(--sl-corail);text-decoration:underline;text-underline-offset:2px;}
.sl-sur-commande a:hover{color:var(--sl-chocolat);}

/* Grille 2 colonnes UNIQUEMENT pour les listes de catégories (vitrine) */
ul.products:has(li.product-category){
  display:grid !important;grid-template-columns:repeat(2,1fr);gap:1.8rem 2.4rem;
  margin:0;padding:0;list-style:none;}

/* ---- on remet la carte à plat : tuer les boîtes blanches Kadence ---- */
ul.products li.product-category,
ul.products li.product-category.content-bg{
  width:auto !important;max-width:none !important;margin:0 !important;float:none !important;
  padding:0 !important;background:transparent !important;box-shadow:none !important;border:none !important;}

ul.products li.product-category a{
  display:flex;align-items:center;position:relative;min-height:124px;
  text-decoration:none;padding:0;}

/* le bandeau coloré (derrière), plus court que l'image -> elle déborde haut/bas */
ul.products li.product-category a::before{
  content:"";position:absolute;left:14%;right:0;top:50%;transform:translateY(-50%);
  height:92px;background:#6b5a48;border-radius:3px;z-index:0;
  box-shadow:0 8px 20px rgba(47,39,34,.16);}

/* l'image (tablier / décor) à gauche, transparente, par-dessus le bandeau */
ul.products li.product-category a img{
  position:relative;z-index:2;flex:0 0 auto;width:40%;max-width:160px;
  height:auto;max-height:124px;object-fit:contain;
  background:transparent !important;padding:0 !important;margin:0;border-radius:0;
  filter:drop-shadow(0 10px 16px rgba(47,39,34,.34));transition:transform .4s ease;}
/* Kadence remonte le bloc texte de 2rem au survol (révélation d'actions) :
   inutile sur une catégorie -> on ANNULE ce déplacement vertical. */
ul.products li.product-category:hover .entry-content-wrap,
ul.products li.product-category:hover .product-details,
ul.products li.product-category:focus-within .entry-content-wrap,
ul.products li.product-category:focus-within .product-details{
  transform:none !important;}

/* survol : UNIQUEMENT un zoom (pas de déplacement) — image ET nom de rubrique */
ul.products li.product-category a:hover img{transform:scale(1.14) !important;}
ul.products li.product-category a:hover .woocommerce-loop-category__title{transform:scale(1.1) !important;}

/* le bloc nom (ex-boîte blanche) : transparent, poussé à droite sur le bandeau */
ul.products li.product-category .product-details,
ul.products li.product-category .product-details.content-bg{
  position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;
  background:transparent !important;box-shadow:none !important;border:none !important;
  padding:0 !important;margin:0 !important;}

/* le NOM du rite — Cinzel (capitales romaines), CENTRÉ sur le bandeau */
ul.products li.product-category .woocommerce-loop-category__title{
  margin:0;text-align:center;padding:0 1.2rem;
  font-family:var(--sl-serif-name);font-weight:600;
  font-size:clamp(1.15rem,1.5vw,1.7rem);letter-spacing:.08em;text-transform:uppercase;
  color:var(--sl-texte-clair);line-height:1.15;
  transition:transform .4s ease;transform-origin:center;}
/* bandeaux UNIFORMES (chocolat + nom clair partout) — fini l'alternance sombre/clair
   qui déséquilibrait la grille 2 colonnes */
ul.products li.product-category .count{display:none;}

/* « Les rites » = cœur de l'espace maçonnique : toujours en tête de vitrine,
   pleine largeur (l'ordre alphabétique le reléguait au 5e rang). */
ul.products li.product-category.sl-cat-first{grid-column:1 / -1 !important;position:relative;}

/* Grands blocs transverses (Hauts grades, Matériels de loge, Accessoires, Bijoux
   et cadeaux) : différenciés SANS être différents — même carte, mais détachés en
   PLEINE LARGEUR après les rites, séparés par un filet doré et un liseré or. */
ul.products li.product-category.sl-cat-general{
  grid-column:1 / -1 !important;order:50;position:relative;}
/* rang exact demandé par le client (le tri alphabétique de Woo ne suffit pas) */
ul.products li.product-category.sl-ord-1{order:1;}
ul.products li.product-category.sl-ord-2{order:2;}
ul.products li.product-category.sl-ord-3{order:3;}
ul.products li.product-category.sl-ord-4{order:4;}
ul.products li.product-category.sl-ord-5{order:5;}
ul.products li.product-category.sl-ord-6{order:6;}
ul.products li.product-category.sl-cat-general a::before{
  box-shadow:0 8px 20px rgba(47,39,34,.16),inset 5px 0 0 var(--sl-or);}
/* un seul filet, au-dessus du premier bloc (juste après « Les rites ») */
ul.products li.product-category.sl-cat-first{margin-bottom:2.6rem;}
ul.products li.product-category.sl-cat-first::after{
  content:"";position:absolute;bottom:-1.3rem;left:6%;right:6%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(169,138,82,.55),transparent);}

/* GLFF = obédience (pas un rite) -> TOUJOURS en dernier, après les grands blocs. */
ul.products li.product-category.sl-cat-obedience{
  grid-column:1 / -1 !important;margin-top:2.6rem;position:relative;}
ul.products li.product-category.sl-cat-obedience::before{
  content:"";position:absolute;top:-1.3rem;left:6%;right:6%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(169,138,82,.55),transparent);}

/* ---- Cartes PRODUIT (pages de grade / feuilles) ---- */
ul.products li.product{text-align:center;}
ul.products li.product img{border-radius:5px;background:#fff;}
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2{
  font-family:var(--sl-serif-display);font-weight:500;color:var(--sl-chocolat);
  font-size:1.05rem;margin-top:.7rem;}
ul.products li.product .price{
  font-family:var(--sl-serif-text);color:var(--sl-corail)!important;font-weight:600;}

/* ---- Boutons WooCommerce à la charte ---- */
.woocommerce a.button,.woocommerce button.button,.woocommerce .button,
.wc-block-components-button{
  background:var(--sl-corail);color:#fff;border-radius:3px;
  font-family:var(--sl-serif-text);letter-spacing:.05em;}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce .button:hover{
  background:var(--sl-chocolat);color:#fff;}

/* ---- Fil d'Ariane sobre ---- */
.woocommerce-breadcrumb{font-family:var(--sl-serif-text);font-size:.85rem;
  letter-spacing:.03em;color:#6b5f56;}
.woocommerce-breadcrumb a{color:var(--sl-corail);}

/* ---- responsive : 1 colonne sur mobile ---- */
@media (max-width:680px){
  ul.products:has(li.product-category){grid-template-columns:1fr;}
}

/* ---- Carte cadeau : champs de personnalisation sur la fiche produit ---- */
.sl-cc{margin:1.4rem 0;padding:1.2rem 1.3rem;background:#fbf4ea;
  border:1px solid rgba(169,138,82,.35);border-left:3px solid var(--sl-or);border-radius:3px;
  display:flex;flex-direction:column;gap:.85rem;}
.sl-cc__intro{font-family:var(--sl-serif-text);font-size:.97rem;color:#6b5f56;margin:0;}
.sl-cc__f{display:flex;flex-direction:column;gap:.35rem;font-family:var(--sl-serif-text);}
.sl-cc__f>span{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:#6b5f56;}
.sl-cc__f>span em{text-transform:none;letter-spacing:0;font-style:italic;opacity:.75;}
.sl-cc__f input,.sl-cc__f textarea{font-family:var(--sl-serif-text);font-size:1rem;
  color:var(--sl-texte);background:#fff;border:1px solid rgba(47,39,34,.18);border-radius:3px;
  padding:.6rem .8rem;width:100%;transition:border-color .2s ease,box-shadow .2s ease;}
.sl-cc__f input:focus,.sl-cc__f textarea:focus{outline:none;border-color:var(--sl-corail);
  box-shadow:0 0 0 3px rgba(194,97,74,.12);}
.sl-cc__f textarea{resize:vertical;}
.sl-cc__note{font-family:var(--sl-serif-text);font-size:.88rem;line-height:1.6;color:#6b5f56;margin:0;}
.sl-cc__note strong{color:var(--sl-chocolat);}
