/*
Theme Name:   Capri Scarpa
Theme URI:    https://capriscarpa.dz
Description:  Thème enfant Blocksy pour Capri Scarpa — maison familiale depuis 1980.
Author:       Capri Scarpa
Template:     blocksy
Version:      1.2.0
Text Domain:  capriscarpa
*/

/* ==========================================================================
   CAPRI SCARPA — habillage WordPress / WooCommerce
   Coller dans : Apparence → Personnaliser → CSS additionnel
   (ou, mieux, dans le style.css d'un thème enfant)

   Cible : Blocksy + Blocksy Companion. Les sélecteurs WooCommerce sont
   standards et les conteneurs Blocksy (.ct-media-container) sont doublés,
   donc ça marche aussi avec Kadence, Astra, GeneratePress, Storefront.

   Ce fichier s'appuie sur !important pour passer devant la feuille de style
   de WooCommerce. C'est acceptable pour une démo ; en production on préfère
   un thème enfant avec content-product.php surchargé (voir WORDPRESS.md §9).
   ========================================================================== */

/* ---------- 1. Tokens de marque ---------- */
:root{
  --cs-ink:#14110F; --cs-ink-soft:#5F564E; --cs-ink-faint:#71695F;
  --cs-brand:#6B1F2B; --cs-brand-dark:#4E141E; --cs-sole:#8E1220;
  --cs-gold:#B9975F; --cs-gold-soft:#DCC9A6;
  --cs-paper:#FAF7F3; --cs-paper-2:#F2ECE4; --cs-line:#E6DED3; --cs-line-soft:#F0E9E0;
  --cs-ok:#4A6B45;
  --cs-display:"Cormorant Garamond",Georgia,serif;
  --cs-body:"Inter",-apple-system,"Segoe UI",sans-serif;
  --cs-ease:cubic-bezier(.22,.61,.36,1);
}

body{background:var(--cs-paper);color:var(--cs-ink);font-family:var(--cs-body);line-height:1.65}
h1,h2,h3,h4,.product_title{
  font-family:var(--cs-display)!important;font-weight:400;letter-spacing:-.005em;line-height:1.12;
}

/* ---------- 2. Boutons ---------- */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt,
.wp-block-button__link,.ct-button{
  background:var(--cs-brand)!important;color:#fff!important;
  border-radius:2px!important;min-height:50px;padding:0 1.7rem!important;
  display:inline-flex!important;align-items:center;justify-content:center;
  font-size:.75rem!important;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  transition:background .25s var(--cs-ease);border:0;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce button.button.alt:hover,.wp-block-button__link:hover,
.ct-button:hover{background:var(--cs-brand-dark)!important}

/* Bouton WhatsApp — sous « Ajouter au panier » sur la fiche produit, en
   pleine largeur comme dans la démo. WooCommerce met .button en inline-block :
   il faut donc redéclarer display, sinon width:100% n'a pas d'effet visible
   sur un élément qui se laisse serrer par son contenu. */
a.button.cs-wa{
  display:flex!important;width:100%;box-sizing:border-box;
  align-items:center;justify-content:center;gap:.6rem;
  background:#1FA855!important;color:#fff!important;
  margin-top:.75rem;float:none!important;
}
a.button.cs-wa:hover{background:#17803F!important}
a.button.cs-wa .cs-wa__icon{width:20px;height:20px;flex:0 0 auto;fill:currentColor}
/* même habillage pour un bloc Bouton auquel on ajoute la classe cs-wa */
.cs-wa .wp-block-button__link{background:#1FA855!important;color:#fff!important}
.cs-wa .wp-block-button__link:hover{background:#17803F!important}

/* ---------- 3. Grille produits ---------- */
.woocommerce ul.products{gap:2rem 1rem;display:grid!important;float:none}
.woocommerce ul.products li.product{width:100%!important;margin:0!important;float:none!important;text-align:left;position:relative}
@media(max-width:639px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr)!important}}
@media(min-width:640px){.woocommerce ul.products{grid-template-columns:repeat(3,1fr)!important}}
@media(min-width:900px){.woocommerce ul.products{grid-template-columns:repeat(4,1fr)!important;gap:3rem 1.5rem}}

.woocommerce ul.products li.product a img{
  aspect-ratio:3/4;object-fit:cover;border-radius:2px;margin-bottom:.75rem;
  transition:transform .7s var(--cs-ease);
}
/* le zoom a besoin d'un conteneur qui coupe */
.woocommerce ul.products li.product .cs-thumb,
.woocommerce ul.products li.product .ct-image-container,
.woocommerce ul.products li.product .ct-media-container,
.woocommerce ul.products li.product .product-image,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
  display:block;overflow:hidden;border-radius:2px;position:relative;
}
.woocommerce ul.products li.product:hover a img{transform:scale(1.05)}

/* La semelle rouge : filet qui se remplit sous la vignette au survol.
   Il est posé sur .cs-thumb, le conteneur que functions.php enroule autour de
   la seule vignette. Auparavant il visait des classes de thème devinées, et
   selon le thème zéro, une ou deux correspondaient — d'où le double filet,
   a.woocommerce-LoopProduct-link enveloppant aussi le titre et le prix. */
.woocommerce ul.products li.product .cs-thumb:has(img)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--cs-sole);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--cs-ease);z-index:3;
}
.woocommerce ul.products li.product:hover .cs-thumb:has(img)::after{transform:scaleX(1)}

/* Repli quand la vignette n'est pas rendue par le hook standard — Blocksy a son
   propre gabarit de carte. La condition porte sur `.cs-thumb img`, pas sur
   `.cs-thumb` : un conteneur vide ne doit pas désactiver le repli, sinon plus
   aucun filet ne s'affiche. */
.woocommerce ul.products li.product:not(:has(.cs-thumb img)) .ct-media-container::after,
.woocommerce ul.products li.product:not(:has(.cs-thumb img)) .product-image::after,
.woocommerce ul.products li.product:not(:has(.cs-thumb img)) .ct-image-container::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--cs-sole);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--cs-ease);z-index:3;
}
.woocommerce ul.products li.product:not(:has(.cs-thumb img)):hover .ct-media-container::after,
.woocommerce ul.products li.product:not(:has(.cs-thumb img)):hover .product-image::after,
.woocommerce ul.products li.product:not(:has(.cs-thumb img)):hover .ct-image-container::after{transform:scaleX(1)}

/* Dernier repli : aucun des conteneurs connus n'est présent. Le filet passe
   alors sur l'image elle-même, en bordure basse. Il n'a plus l'effet de
   remplissage de gauche à droite, mais la signature de la marque ne disparaît
   pas — et la bordure transparente réserve déjà sa place, donc rien ne bouge
   au survol. */
.woocommerce ul.products li.product:not(:has(.cs-thumb img)):not(:has(.ct-media-container)):not(:has(.ct-image-container)):not(:has(.product-image)) a img{
  border-bottom:3px solid transparent;transition:transform .7s var(--cs-ease),border-color .45s var(--cs-ease);
}
.woocommerce ul.products li.product:not(:has(.cs-thumb img)):not(:has(.ct-media-container)):not(:has(.ct-image-container)):not(:has(.product-image)):hover a img{
  border-bottom-color:var(--cs-sole);
}

/* Et surtout : aucun filet ailleurs. Le lien de la boucle enveloppe l'image,
   le titre et le prix ; un ::after dessus se dessine sous le titre. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link::after,
.woocommerce ul.products li.product > a::after,
.woocommerce ul.products li.product .ct-woo-card-figure::after{content:none!important}

/* Titre de la vignette : posé sous :where(), qui annule la spécificité de la
   partie enveloppante. La règle ne pèse donc que ce que pèse
   .woocommerce-loop-product__title, et le Personnaliser de Blocksy reprend la
   main sur la police et le corps sans qu'on ait besoin de !important. */
:where(.woocommerce ul.products li.product) .woocommerce-loop-product__title{
  font-family:var(--cs-display);font-weight:400;letter-spacing:-.005em;line-height:1.12;
  font-size:1.25rem;padding:0;margin:.15rem 0 .3rem;
}
.woocommerce ul.products li.product .price{
  color:var(--cs-ink)!important;font-size:.875rem!important;font-weight:400;
}
.woocommerce ul.products li.product .price del{color:var(--cs-ink-faint);font-size:.8125rem;opacity:1}
.woocommerce ul.products li.product .price ins{color:var(--cs-sole);font-weight:600;text-decoration:none}

/* Catégorie de la vignette — même traitement : spécificité neutralisée pour
   rester modifiable depuis le Personnaliser. */
:where(.woocommerce ul.products li.product) .woocommerce-loop-product__category,
:where(.woocommerce ul.products li.product) .ct-woo-card-extra,
:where(.woocommerce ul.products li.product) .product-details .category{
  font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cs-ink-faint);
}

/* ---------- 4. Badges promo / rupture ---------- */
.woocommerce span.onsale,.woocommerce ul.products li.product .onsale{
  background:var(--cs-sole)!important;color:#fff!important;
  border-radius:2px!important;min-height:0!important;min-width:0!important;
  line-height:1!important;padding:.35rem .6rem!important;
  font-size:.625rem!important;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  top:10px!important;left:10px!important;right:auto!important;margin:0!important;
}
.woocommerce .out-of-stock-badge,.ct-out-of-stock-badge{
  background:rgba(20,17,15,.84)!important;color:#fff!important;border-radius:2px!important;
  font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;padding:.35rem .6rem;
}

/* ---------- 5. Fiche produit ---------- */
.woocommerce div.product .product_title{font-size:clamp(2rem,8vw,3rem)!important;margin-bottom:.5rem}
.woocommerce div.product p.price,.woocommerce div.product span.price{
  font-family:var(--cs-display)!important;font-size:1.5rem!important;color:var(--cs-ink)!important;
}
.woocommerce div.product p.price del{font-size:1.0625rem;color:var(--cs-ink-faint);opacity:1}
.woocommerce div.product p.price ins{color:var(--cs-sole);text-decoration:none}
.woocommerce div.product .woocommerce-product-gallery__image img{border-radius:2px}

/* variations : pointures en pastilles plutôt qu'en menu déroulant
   (nécessite Variation Swatches for WooCommerce ; sans lui, le <select> reste utilisable) */
.woocommerce div.product form.cart .variations td.label label{
  font-size:.6875rem;letter-spacing:.26em;text-transform:uppercase;color:var(--cs-ink-faint);font-weight:500;
}
.variable-items-wrapper .variable-item:not(.radio-variable-item){
  border-radius:2px!important;box-shadow:none!important;border:1px solid var(--cs-line)!important;
  min-width:54px;min-height:48px;
}
.variable-items-wrapper .variable-item.selected,
.variable-items-wrapper .variable-item:hover{
  border-color:var(--cs-ink)!important;box-shadow:none!important;
}
.variable-items-wrapper .button-variable-item.selected{background:var(--cs-ink)!important}
.variable-items-wrapper .button-variable-item.selected .variable-item-span{color:#fff!important}
.variable-items-wrapper .color-variable-item{border-radius:50%!important;width:44px;height:44px}

.woocommerce div.product form.cart .quantity input.qty{
  min-height:48px;border:1px solid var(--cs-line);border-radius:2px;text-align:center;
}

/* onglets de la fiche produit rendus comme l'accordéon de la démo */
.woocommerce div.product .woocommerce-tabs ul.tabs{border:0;padding:0;margin:0}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent!important;border:0!important;border-radius:0!important;margin:0 1.5rem 0 0!important;padding:0!important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family:var(--cs-body)!important;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;color:var(--cs-ink-faint)!important;padding:1.15rem 0!important;
  border-bottom:1px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--cs-ink)!important;border-bottom-color:var(--cs-brand);
}
.woocommerce div.product .woocommerce-tabs .panel{
  border-top:1px solid var(--cs-line);padding-top:1.5rem;color:var(--cs-ink-soft);font-size:.875rem;
}
.woocommerce table.shop_attributes th{color:var(--cs-ink);font-weight:600}
.woocommerce table.shop_attributes th,.woocommerce table.shop_attributes td{
  border-bottom:1px solid var(--cs-line-soft);padding:.5rem .4rem;font-size:.8125rem;
}
.woocommerce table.shop_attributes td{font-style:normal}

/* encadré « semelle rouge » — bloc Paragraphe avec la classe cs-sole-note */
.cs-sole-note{
  display:flex;align-items:center;gap:.65rem;
  padding:.85rem 1rem;background:var(--cs-paper-2);border-left:3px solid var(--cs-sole);
  border-radius:2px;font-size:.8125rem;color:var(--cs-ink-soft);margin:1.5rem 0;
}
.cs-sole-note strong{color:var(--cs-ink);font-weight:600}
.cs-sole-note svg{
  width:20px;height:20px;flex:0 0 auto;margin-top:.1rem;
  stroke:var(--cs-sole);stroke-width:1.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
/* le texte est enveloppé d'un <span> : sans lui, chaque morceau de phrase
   autour du <strong> devient un élément flex et la phrase part en colonnes */
.cs-sole-note>span{flex:1;min-width:0}

/* ---------- 6. Panier & commande ---------- */
.woocommerce table.shop_table{border-radius:2px;border-color:var(--cs-line)}
.woocommerce table.shop_table th{
  font-family:var(--cs-body);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
}
.woocommerce-cart .cart-collaterals .cart_totals>h2,
.woocommerce-checkout #order_review_heading{
  font-family:var(--cs-body)!important;font-size:.6875rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;
}
.woocommerce .cart_totals .order-total .amount,.woocommerce-checkout .order-total .amount{
  font-family:var(--cs-display);font-size:1.375rem;color:var(--cs-ink);font-weight:400;
}
.woocommerce form .form-row label{
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cs-ink-soft);font-weight:500;
}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce form .form-row select,.select2-container .select2-selection--single{
  min-height:50px!important;border:1px solid var(--cs-line)!important;border-radius:2px!important;
  background:#fff;padding:0 1rem;font-size:.9375rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:50px!important}
.woocommerce form .form-row input.input-text:focus{border-color:var(--cs-brand)!important;outline:none}

/* le paiement à la livraison doit être la première option et se voir */
.woocommerce-checkout #payment ul.payment_methods{
  border-bottom:0;padding:0;display:flex;flex-direction:column;gap:.75rem;
}
.woocommerce-checkout #payment ul.payment_methods li{
  border:1px solid var(--cs-line);border-radius:2px;background:#fff;padding:1rem!important;margin:0;
  transition:border-color .2s var(--cs-ease);
}
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked){
  border-color:var(--cs-brand);background:#FFFCFA;
}
.woocommerce-checkout #payment ul.payment_methods li label{
  font-size:.9375rem;font-weight:600;text-transform:none;letter-spacing:0;color:var(--cs-ink);
}
.woocommerce-checkout #payment div.payment_box{
  background:transparent;color:var(--cs-ink-soft);font-size:.8125rem;padding:.35rem 0 0;margin:0;
}
.woocommerce-checkout #payment div.payment_box::before{display:none}
.woocommerce-checkout #payment ul.payment_methods li input[type=radio]{accent-color:var(--cs-brand);width:18px;height:18px}

/* ---------- 7. Messages & divers ---------- */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border-top-color:var(--cs-brand)!important;background:var(--cs-paper-2);border-radius:2px;
}
.woocommerce .woocommerce-breadcrumb,.ct-breadcrumbs{font-size:.75rem;color:var(--cs-ink-faint);letter-spacing:.04em}
.woocommerce .star-rating span{color:var(--cs-gold)}
.woocommerce-store-notice,p.demo_store{background:var(--cs-ink);color:#EFE6DA;font-size:.75rem;letter-spacing:.08em}

/* ---------- 8. Sections de la page d'accueil (blocs + classes CSS) ---------- */
.cs-announce{
  background:var(--cs-ink);color:#EFE6DA;text-align:center;
  font-size:.75rem;letter-spacing:.08em;padding:.65rem 20px;
}
.cs-announce strong{color:#fff}

.cs-hero{position:relative}
/* hauteur fixée directement : aspect-ratio + max-height ferait rétrécir la largeur */
.cs-hero .wp-block-cover{min-height:min(76vh,128vw)!important}
@media(min-width:900px){.cs-hero .wp-block-cover{min-height:min(84vh,54vw)!important}}
.cs-hero h1{font-size:clamp(2.6rem,13vw,5.5rem)!important;color:#fff;font-weight:300}
.cs-hero em{font-style:italic;font-weight:400}

/* « Since 1980 » encadré de deux filets dorés */
.cs-since{
  display:flex;align-items:center;justify-content:center;gap:.75rem;
  font-family:var(--cs-display);font-size:.9375rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--cs-gold);
}
.cs-since::before,.cs-since::after{content:"";width:32px;height:1px;background:currentColor;opacity:.6}

.cs-trust{background:var(--cs-ink);color:#E7DED2;padding-block:1.5rem}
.cs-trust h3{
  font-family:var(--cs-body)!important;font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;font-weight:600;
}
.cs-trust p{font-size:.75rem;color:#ADA093;margin-top:.25rem}
.cs-trust img,.cs-trust svg{width:24px;height:24px;margin:0 auto .6rem;filter:none}
/* 2 colonnes sur mobile, 4 à partir de 700px — comme la démo. Le motif pose
   is-not-stacked-on-mobile pour empêcher l'empilement, le retour à la ligne
   se fait ici. */
.cs-trust .wp-block-columns{flex-wrap:wrap!important;gap:1.5rem 1rem}
.cs-trust .wp-block-column{flex-basis:calc(50% - .5rem)!important;flex-grow:0}
@media(min-width:700px){.cs-trust .wp-block-column{flex-basis:calc(25% - .75rem)!important}}

/* Pastilles de catégories — rendues par [capriscarpa_categories], donc avec
   le même balisage que la démo. Piège n°1 du playbook : l'anneau est un
   conteneur dimensionné, il doit être en display:block — un <span> laissé en
   inline ignore width/height et le cercle devient un ovale. */
.cs-cats-section{padding-block:3.5rem}
.cs-cats{
  display:flex;gap:1rem;overflow-x:auto;padding-block:.25rem 1rem;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.cs-cats::-webkit-scrollbar{display:none}
/* Une page montée avant le passage au code court porte encore .cs-cats sur un
   groupe de blocs : il ne doit surtout pas devenir une rangée flex, sinon le
   titre de section se retrouve à côté des pastilles. */
.wp-block-group.cs-cats{display:block;overflow:visible}
.cs-cat{
  flex:0 0 auto;width:108px;text-align:center;scroll-snap-align:start;
  text-decoration:none!important;min-height:44px;
}
.cs-cat__ring{
  display:block;width:108px;height:108px;box-sizing:border-box;
  border:1px solid var(--cs-line);border-radius:50%;padding:4px;background:#fff;
  transition:border-color .3s var(--cs-ease);
}
.cs-cat__ring>span{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden}
.cs-cat__ring img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--cs-ease)}
.cs-cat:hover .cs-cat__ring{border-color:var(--cs-brand)}
.cs-cat:hover .cs-cat__ring img{transform:scale(1.08)}
.cs-cat__name{
  display:block;margin-top:.65rem;font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cs-ink);font-weight:500;line-height:1.3;
}
@media(min-width:900px){
  .cs-cats{gap:2rem;justify-content:center;overflow-x:visible;flex-wrap:wrap}
  .cs-cat{width:132px}
  .cs-cat__ring{width:132px;height:132px}
}

/* Repli pour une page d'accueil encore montée avec les blocs Colonnes : on ne
   peut pas y ronder proprement la vignette, mais au moins la rangée défile au
   lieu d'écraser cinq colonnes de 30px sur un écran de téléphone. */
.cs-cats .wp-block-columns{
  flex-wrap:nowrap!important;gap:1rem;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.cs-cats .wp-block-columns::-webkit-scrollbar{display:none}
.cs-cats .wp-block-column{flex:0 0 108px!important;min-width:108px}
.cs-cats .wp-block-column figure.wp-block-image{display:block;width:108px;height:auto;margin:0 auto}
.cs-cats .wp-block-column figure.wp-block-image a{display:block;width:108px;height:108px;overflow:hidden;border-radius:50%;border:1px solid var(--cs-line);padding:4px;box-sizing:border-box;background:#fff}
.cs-cats .wp-block-column figure.wp-block-image img{width:100%;height:100%;object-fit:cover;border-radius:50%}
/* WordPress met la légende du bloc Image en display:table-caption. Dans une
   <figure> repassée en display:block, elle génère une boîte de tableau anonyme
   qui se rétracte à la largeur d'un caractère — d'où « ESCARPINS » écrit à la
   verticale. On la remet en bloc, sur la largeur de la pastille. */
.cs-cats figcaption{
  display:block!important;caption-side:initial;width:100%;box-sizing:border-box;
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cs-ink);font-weight:500;margin-top:.65rem;text-align:center;line-height:1.3;
}
@media(min-width:900px){
  .cs-cats .wp-block-columns{justify-content:center;gap:2rem}
}

/* Avis clientes. La carte est portée par le blockquote seul : en la mettant
   aussi sur la colonne, on obtenait un encadré dans un encadré. La colonne
   devient un conteneur flex pour que les trois cartes aient la même hauteur
   quand un avis est plus long que les autres. */
.cs-avis .wp-block-column{display:flex}
.cs-avis blockquote{
  flex:1;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--cs-line);border-radius:2px;padding:1.5rem;margin:0;
}
.cs-avis blockquote p{flex:1}
.cs-avis blockquote p{font-family:var(--cs-display);font-size:1.25rem;line-height:1.5;color:var(--cs-ink)}
.cs-avis cite{
  display:block;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--cs-line-soft);
  font-family:var(--cs-body);font-style:normal;font-size:.6875rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cs-ink-faint);
}
.cs-avis cite strong{color:var(--cs-ink);font-weight:600}

.cs-ar{font-family:"Amiri",serif;direction:rtl;font-size:1.125rem;color:var(--cs-brand);line-height:2.1}

/* ---------- 9. Accessibilité — cibles tactiles ≥ 44px ---------- */
.woocommerce a.button,.woocommerce button.button,
.cs-cats a,.woocommerce ul.products li.product .button{min-height:44px}
:focus-visible{outline:2px solid var(--cs-brand);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* ---------- 10. Barre d'ajout au panier collante (mobile) ----------
   Blocksy réserve cette fonction à sa version Pro. Le snippet PHP n°5 du
   manuel injecte le balisage ; à retirer si Blocksy Pro est activé. */
.cs-sticky-buy{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  background:rgba(250,247,243,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--cs-line);
  padding:.65rem 20px calc(.65rem + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:1rem;
}
.cs-sticky-buy__info{flex:1;min-width:0}
.cs-sticky-buy__info strong{
  display:block;font-family:var(--cs-display);font-size:1.0625rem;font-weight:400;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cs-sticky-buy__info span{font-size:.8125rem;color:var(--cs-ink-soft)}
.cs-sticky-buy .button{flex:0 0 auto;padding-inline:1.3rem!important}
@media(min-width:900px){.cs-sticky-buy{display:none}}

/* ---------- 11. En-tête de boutique et fil des catégories ----------
   Rendu par inc/shop.php sur /boutique/ et sur chaque archive de catégorie.
   Reprend la .page-head + les .chip de la démo statique. */
.cs-shop-head{text-align:center;padding-block:1.5rem 2rem}
.cs-shop-head .cs-eyebrow{margin-bottom:.6rem}
.cs-shop-head h1{
  font-family:var(--cs-display)!important;font-weight:400;
  font-size:clamp(2.2rem,9vw,3.5rem)!important;line-height:1.08;margin:0;
}
.cs-shop-head p{color:var(--cs-ink-soft);margin-top:.75rem;font-size:.9375rem;max-width:56ch;margin-inline:auto}

.cs-crumb{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cs-ink-faint);padding-top:1rem}
.cs-crumb a{color:var(--cs-ink-faint)}
.cs-crumb a:hover{color:var(--cs-ink)}
.cs-crumb span{margin-inline:.4rem}

.cs-chips{
  display:flex;gap:.5rem;overflow-x:auto;padding-bottom:1rem;margin-bottom:1rem;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.cs-chips::-webkit-scrollbar{display:none}
.cs-chips a{
  flex:0 0 auto;min-height:44px;padding:0 1.1rem;border:1px solid var(--cs-line);
  border-radius:99px;background:#fff;
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cs-ink-soft);
  display:inline-flex;align-items:center;transition:all .25s var(--cs-ease);text-decoration:none;
}
.cs-chips a:hover{border-color:var(--cs-brand);color:var(--cs-brand)}
.cs-chips a[aria-current="page"]{background:var(--cs-ink);border-color:var(--cs-ink);color:#fff}

/* Blocksy affiche son propre titre de page sur la boutique : on le masque,
   .cs-shop-head le remplace. Retirer cette règle si on préfère l'inverse. */
.woocommerce-shop .ct-page-title,
.tax-product_cat .ct-page-title{display:none}

/* ---------- 12. Sections de la page d'accueil (motif « Accueil ») ---------- */
.cs-eyebrow{
  font-size:.6875rem!important;letter-spacing:.26em;text-transform:uppercase;
  color:var(--cs-ink-faint);font-weight:500;margin-bottom:.5rem;
}
.cs-section-head{text-align:center;margin-bottom:2rem}
.cs-section-head h2{font-size:clamp(1.9rem,7vw,3rem)!important;margin:0}
.cs-section-head p{color:var(--cs-ink-soft);font-size:.9375rem;margin-top:.6rem;max-width:54ch;margin-inline:auto}

/* Le hero : piège n°2 du playbook — on fixe la hauteur, jamais un aspect-ratio
   plafonné par max-height, sinon la largeur se rétracte à travers le ratio. */
.cs-hero .wp-block-cover__inner-container{max-width:760px}
.cs-hero p.has-text-align-center{color:#EDE4D8}

/* Piège n°2 du playbook : on borne la hauteur ET on fixe la largeur. Un
   max-height seul, avec un ratio, ferait rétrécir la largeur de l'image. */
.cs-story .wp-block-media-text__media img{
  border-radius:2px;width:100%;height:min(62vh,520px);object-fit:cover;
}
@media(max-width:781px){
  .cs-story .wp-block-media-text__media img{height:min(58vh,420px)}
}
.cs-story h2{font-size:clamp(1.9rem,7vw,3rem)!important}
.cs-story p{color:var(--cs-ink-soft)}

.cs-news{text-align:center;background:var(--cs-paper-2);padding-block:3.5rem}
.cs-news h2{font-size:clamp(1.8rem,6.5vw,2.75rem)!important}
.cs-news p{color:var(--cs-ink-soft);font-size:.9375rem}

/* Les grilles produits posées par le bloc « Code court » [products] :
   même habillage que la section 3, rien à ajouter. */
.cs-produits{padding-block:3.5rem}
.cs-produits .woocommerce{margin:0}
.cs-avis{padding-block:3.5rem}
.cs-story{padding-block:3.5rem}

/* ---------- 13. Apparition au défilement ----------
   L'attribut data-cs-reveal est posé par assets/js/reveal.js, jamais dans le
   HTML : sans JavaScript, ou avec « réduire les animations », rien n'est
   masqué et la page reste lisible telle quelle. */
[data-cs-reveal]{opacity:0;transform:translateY(18px)}
[data-cs-reveal].is-in{
  opacity:1;transform:none;
  transition:opacity .7s var(--cs-ease),transform .7s var(--cs-ease);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-cs-reveal]{opacity:1;transform:none}
}

/* ---------- 14. Checkout classique, habillé comme le checkout en blocs ----------
   Voir inc/checkout.php pour la partie PHP. Blocksy enveloppe le formulaire
   dans .ct-customer-details / .ct-order-review et pose déjà ses deux colonnes :
   on ne lui impose une grille que s'il ne l'a pas fait. */

.woocommerce-checkout .woocommerce{max-width:1180px;margin-inline:auto}

@media(min-width:1000px){
  /* Blocksy pose déjà deux colonnes, mais à peu près 50/50. Le bloc, lui,
     donne les deux tiers au formulaire. On reprend la grille : `!important`
     est nécessaire ici, Blocksy déclare sa largeur de colonne en variable CSS
     appliquée en ligne. */
  .woocommerce-checkout form.checkout{
    display:grid!important;grid-template-columns:minmax(0,1fr) 400px!important;
    gap:0 3rem!important;align-items:start;
  }
  .woocommerce-checkout form.checkout>.ct-customer-details{grid-column:1;min-width:0}
  .woocommerce-checkout form.checkout>.ct-order-review{grid-column:2;min-width:0;position:sticky;top:24px}

  /* thème sans les conteneurs Blocksy : on place les blocs natifs */
  .woocommerce-checkout form.checkout:not(:has(.ct-customer-details))>#customer_details{grid-column:1;grid-row:1/span 2}
  .woocommerce-checkout form.checkout:not(:has(.ct-customer-details))>#order_review_heading{grid-column:2;grid-row:1;margin-top:0}
  .woocommerce-checkout form.checkout:not(:has(.ct-customer-details))>#order_review{grid-column:2;grid-row:2;position:sticky;top:24px}
}

/* facturation et livraison l'une sous l'autre, pas côte à côte */
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{width:100%;float:none;margin:0}
.woocommerce-checkout .col2-set .col-2:not(:empty){margin-top:1.25rem}

/* ---- titres de section ---- */
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading{
  font-family:var(--cs-display)!important;font-size:1.5rem!important;font-weight:400;
  letter-spacing:-.005em;text-transform:none;color:var(--cs-ink);
  margin:0 0 1rem;padding:0;border:0;
}

/* ---- les champs : la boîte arrondie du bloc, libellé en haut ----
   Le libellé du checkout classique précède l'input dans le balisage, donc pas
   de vrai label flottant sans JavaScript. On garde la position « champ
   rempli » en permanence : même rendu, et le libellé reste lisible quand le
   champ est vide. */
.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout #customer_details .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout #customer_details .woocommerce-additional-fields__field-wrapper{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;
}
.woocommerce-checkout #customer_details .form-row{
  position:relative;grid-column:1/-1;float:none!important;width:auto!important;
  margin:0!important;padding:1.4rem .9rem .55rem!important;min-height:62px;box-sizing:border-box;
  border:1px solid var(--cs-line);border-radius:8px;background:transparent;
  transition:border-color .2s var(--cs-ease),box-shadow .2s var(--cs-ease);
}
.woocommerce-checkout #customer_details .form-row-first,
.woocommerce-checkout #customer_details .form-row-last{grid-column:span 1}
/* un « form-row-last » sans son « first » (une extension a retiré le prénom)
   ne doit pas rester en demi-largeur tout seul */
.woocommerce-checkout #customer_details .form-row-last:first-child,
.woocommerce-checkout #customer_details .form-row-first:last-child{grid-column:1/-1}
@media(max-width:560px){
  .woocommerce-checkout #customer_details .form-row-first,
  .woocommerce-checkout #customer_details .form-row-last{grid-column:1/-1}
}
.woocommerce-checkout #customer_details .form-row:focus-within{
  border-color:var(--cs-brand);box-shadow:0 0 0 1px var(--cs-brand);
}
.woocommerce-checkout #customer_details .form-row label{
  position:absolute;top:.45rem;left:.9rem;right:.9rem;margin:0;
  font-family:var(--cs-body);font-size:.75rem;font-weight:400;line-height:1.2;
  letter-spacing:0;text-transform:none;color:var(--cs-ink-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;
}
.woocommerce-checkout #customer_details .form-row .required,
.woocommerce-checkout #customer_details .form-row abbr.required{
  border:0;text-decoration:none;color:var(--cs-sole);
}
.woocommerce-checkout #customer_details .form-row .optional{color:var(--cs-ink-faint)}
.woocommerce-checkout #customer_details .form-row .woocommerce-input-wrapper{display:block;width:100%}
.woocommerce-checkout #customer_details .form-row .input-text,
.woocommerce-checkout #customer_details .form-row textarea,
.woocommerce-checkout #customer_details .form-row select{
  min-height:0!important;height:auto!important;
  border:0!important;border-radius:0!important;background:transparent!important;
  padding:0!important;margin:0!important;
  font-size:1rem;line-height:1.45;color:var(--cs-ink);width:100%;box-shadow:none!important;
}
/* Blocksy peint le fond de ses champs : on garde le fond de la page, la
   boîte n'est qu'un filet. */
.woocommerce-checkout #customer_details .form-row .input-text,
.woocommerce-checkout #customer_details .form-row textarea,
.woocommerce-checkout #customer_details .form-row select,
.woocommerce-checkout #customer_details .form-row .select2-selection{
  background:transparent!important;background-color:transparent!important;
}
.woocommerce-checkout #customer_details .form-row .input-text::placeholder,
.woocommerce-checkout #customer_details .form-row textarea::placeholder{color:var(--cs-ink-faint);opacity:1}
.woocommerce-checkout #customer_details .form-row .input-text:focus,
.woocommerce-checkout #customer_details .form-row select:focus{outline:none}
.woocommerce-checkout #customer_details .form-row textarea{min-height:58px!important;resize:vertical}
/* la wilaya, rendue par Select2 */
.woocommerce-checkout #customer_details .form-row .select2-container{width:100%!important}
.woocommerce-checkout #customer_details .form-row .select2-container--default .select2-selection--single{
  border:0!important;background:transparent!important;height:auto!important;min-height:0!important;
}
.woocommerce-checkout #customer_details .form-row .select2-selection__rendered{
  line-height:1.45!important;padding:0!important;color:var(--cs-ink);font-size:1rem;
}
.woocommerce-checkout #customer_details .form-row .select2-selection__arrow{top:0;right:0;height:100%}

/* les lignes à case à cocher ne sont pas des champs : pas de boîte */
.woocommerce-checkout #ship-to-different-address,
.woocommerce-checkout #customer_details .form-row:has(>label.checkbox),
.woocommerce-checkout #customer_details .form-row:has(input[type=checkbox]){
  border:0!important;background:transparent!important;padding:0!important;min-height:0;
}
.woocommerce-checkout #ship-to-different-address{
  margin:1.25rem 0!important;font-size:inherit!important;font-family:var(--cs-body)!important;
}
.woocommerce-checkout #ship-to-different-address label{
  position:static!important;display:inline-flex;align-items:center;gap:.6rem;
  font-size:.9375rem!important;color:var(--cs-ink)!important;
  white-space:normal!important;font-weight:400;text-transform:none;letter-spacing:0;
}
.woocommerce-checkout input[type=checkbox]{accent-color:var(--cs-brand);width:18px;height:18px}

/* ---- code promo : une ligne discrète au-dessus du formulaire ----
   Il reste là où WooCommerce le met. Le déplacer dans le récapitulatif
   reviendrait à imbriquer son <form> dans celui du checkout : le navigateur
   supprime la balise interne et le champ se retrouve sans habillage. */
.woocommerce-checkout .woocommerce-form-coupon-toggle{max-width:1180px;margin:0 auto 1rem}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{
  background:var(--cs-paper-2);border:1px solid var(--cs-line);border-radius:8px;
  color:var(--cs-ink-soft);font-size:.875rem;padding:.85rem 1rem;margin:0;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before{display:none}
.woocommerce-checkout form.checkout_coupon{
  max-width:1180px;margin:0 auto 1.5rem!important;
  border:1px solid var(--cs-line)!important;border-radius:8px;background:transparent;
  padding:1rem!important;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;
}
.woocommerce-checkout form.checkout_coupon .form-row{
  padding:0!important;border:0!important;margin:0!important;flex:1;min-width:180px;width:auto!important;
}
.woocommerce-checkout form.checkout_coupon .input-text{
  min-height:48px!important;border:1px solid var(--cs-line)!important;
  border-radius:6px!important;padding:0 .8rem!important;background:transparent!important;width:100%;
}
.woocommerce-checkout form.checkout_coupon .button{min-height:48px!important;flex:0 0 auto}

/* ---- le récapitulatif, en carte ----
   Une seule bordure : quand Blocksy encadre .ct-order-review, c'est lui la
   carte et #order_review redevient transparent. Sinon la carte est portée par
   #order_review. Deux bordures imbriquées, c'était le cadre dans le cadre. */
.woocommerce-checkout .ct-order-review{
  border:1px solid var(--cs-line);border-radius:12px;background:transparent;
  padding:1.5rem;box-sizing:border-box;
}
.woocommerce-checkout .ct-order-review>#order_review{
  border:0;border-radius:0;background:transparent;padding:0;
}
.woocommerce-checkout form.checkout:not(:has(.ct-order-review)) #order_review{
  border:1px solid var(--cs-line);border-radius:12px;background:transparent;
  padding:1.25rem;box-sizing:border-box;
}
/* le filet sous une ligne article se coupait entre les deux cellules :
   c'est l'espacement de tableau par défaut, pas une bordure manquante */
.woocommerce-checkout #order_review table.shop_table{
  border:0!important;border-radius:0;margin:0;width:100%;
  border-collapse:collapse!important;border-spacing:0!important;
}
.woocommerce-checkout #order_review table.shop_table thead{display:none}
.woocommerce-checkout #order_review table.shop_table td,
.woocommerce-checkout #order_review table.shop_table th{border:0;padding:.7rem 0;vertical-align:middle}
.woocommerce-checkout #order_review table.shop_table tbody tr:not(:last-child) td{
  border-bottom:1px solid var(--cs-line-soft);
}
.woocommerce-checkout #order_review td.product-name{
  position:relative;display:flex;align-items:center;gap:.75rem;
  font-size:.875rem;line-height:1.3;color:var(--cs-ink);
}
.woocommerce-checkout .cs-recap__media{flex:0 0 auto;display:block;width:48px;height:60px}
.woocommerce-checkout .cs-recap__media img{
  width:100%;height:100%;object-fit:cover;border-radius:4px;display:block;margin:0;
}
.woocommerce-checkout .cs-recap__nom{flex:1;min-width:0}
.woocommerce-checkout .cs-recap__nom .variation{font-size:.75rem;color:var(--cs-ink-faint);margin:.2rem 0 0}
.woocommerce-checkout .cs-recap__nom .variation p,
.woocommerce-checkout .cs-recap__nom .variation dt,
.woocommerce-checkout .cs-recap__nom .variation dd{margin:0;display:inline}
.woocommerce-checkout .cs-recap__qte{
  position:absolute;top:.3rem;left:34px;z-index:2;
  min-width:20px;height:20px;padding:0 .28rem;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--cs-brand);color:#fff;border-radius:99px;
  font-size:.6875rem;font-weight:600;line-height:1;
}
.woocommerce-checkout #order_review td.product-total,
.woocommerce-checkout #order_review .cart-subtotal td,
.woocommerce-checkout #order_review .order-total td{
  text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.woocommerce-checkout #order_review tfoot th{
  font-family:var(--cs-body);font-size:.8125rem;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--cs-ink-soft);text-align:left;
}
.woocommerce-checkout #order_review tfoot tr.order-total th,
.woocommerce-checkout #order_review tfoot tr.order-total td{
  border-top:1px solid var(--cs-line);padding-top:1rem;
}
.woocommerce-checkout #order_review tfoot tr.order-total th{font-size:1rem;font-weight:600;color:var(--cs-ink)}
.woocommerce-checkout #order_review tfoot tr.order-total .amount{
  font-family:var(--cs-display);font-size:1.375rem;
}

/* ---- modes de livraison : des lignes radio encadrées ---- */
.woocommerce-checkout .ct-shipping-heading,
.woocommerce-checkout #order_review .woocommerce-shipping-totals th{
  font-family:var(--cs-body);font-size:.8125rem;font-weight:600;color:var(--cs-ink);
  text-transform:none;letter-spacing:0;margin-bottom:.5rem;
}
.woocommerce-checkout ul#shipping_method{
  margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.5rem;
}
.woocommerce-checkout ul#shipping_method li{
  margin:0;padding:.8rem .85rem;border:1px solid var(--cs-line);border-radius:8px;
  display:flex;align-items:center;gap:.6rem;text-indent:0;
  transition:border-color .2s var(--cs-ease),background .2s var(--cs-ease);
}
.woocommerce-checkout ul#shipping_method li:has(input:checked){
  border-color:var(--cs-brand);background:#FFFCFA;box-shadow:inset 0 0 0 1px var(--cs-brand);
}
.woocommerce-checkout ul#shipping_method li input[type=radio]{
  accent-color:var(--cs-brand);width:18px;height:18px;margin:0;flex:0 0 auto;
}
.woocommerce-checkout ul#shipping_method li label{
  flex:1;margin:0;font-size:.8125rem;line-height:1.3;color:var(--cs-ink);display:flex;
  justify-content:space-between;gap:.75rem;align-items:center;
}
.woocommerce-checkout ul#shipping_method li label .amount{
  font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600;
}
.woocommerce-checkout .woocommerce-shipping-destination{
  font-size:.75rem;color:var(--cs-ink-faint);margin:.5rem 0 0;
}

/* ---- paiement et bouton final ---- */
.woocommerce-checkout #payment{background:transparent;border-radius:0;margin-top:1.25rem}
.woocommerce-checkout #payment ul.payment_methods{padding:0!important;border:0!important}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method{
  border-radius:8px;display:block;text-align:left!important;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method>label{
  display:flex!important;align-items:center;gap:.6rem;justify-content:flex-start!important;
  text-align:left!important;font-size:.9375rem;font-weight:600;width:100%;
}
.woocommerce-checkout #payment div.payment_box{text-align:left}
.woocommerce-checkout #payment div.form-row.place-order{padding:1rem 0 0!important;margin:0;border:0!important}
.woocommerce-checkout #payment #place_order{width:100%;min-height:54px;border-radius:8px!important}
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper{
  font-size:.75rem;color:var(--cs-ink-faint);line-height:1.5;
}
.woocommerce-checkout #payment .woocommerce-privacy-policy-text p{margin:0}

/* ---- sur mobile : formulaire puis récapitulatif ---- */
@media(max-width:999px){
  .woocommerce-checkout form.checkout #order_review_heading{margin-top:2.5rem}
  .woocommerce-checkout .ct-order-review,
  .woocommerce-checkout #order_review{position:static}
}

/* Un champ mis à « Masqué » dans le Personnaliser : WooCommerce ajoute la
   classe `hidden` plutôt que de retirer la ligne sur certains gabarits. */
.woocommerce form .form-row.hidden,
.woocommerce-checkout #customer_details .form-row.hidden{display:none!important}

/* La commune en liste déroulante (inc/communes.php) : même habillage que les
   autres champs, la flèche du <select> ne doit pas chevaucher le libellé. */
.woocommerce-checkout #customer_details .cs-commune-field select{
  appearance:none;-webkit-appearance:none;padding-right:1.4rem!important;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F564E' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center/14px!important;
}