/*
Theme Name:  GeneratePress Child
Theme URI:   https://generatepress.com
Template:    generatepress
Author:      Votre nom
Version:     1.0.0
Description: Thème enfant de GeneratePress destiné aux personnalisations visuelles (CSS et fonctions). Toutes vos modifications vivent ici, à l'abri des mises à jour du thème parent.
Text Domain: generatepress-child
*/

/* =========================================================
   VOS PERSONNALISATIONS CSS
   ---------------------------------------------------------
   Collez ici le contenu de votre "CSS additionnel" actuel
   (Apparence > Personnaliser > CSS additionnel), puis
   supprimez-le du Customizer une fois la migration validée.
   ========================================================= */
/* GeneratePress Site CSS */ /* Buttons */
.button, .form-submit .submit {
	border-radius: 9999px;
}

/* Slideout nav CTA button */
.slideout-navigation .inside-navigation a.slideout-button
{
	color: var(--base-2);
}
 /* End GeneratePress Site CSS */

/* ============================================
   AMÉLIORATIONS GLOBALES — KÊR LM
   ============================================ */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html { scroll-behavior: smooth; }

.entry-content p,
.entry-content li { line-height: 1.75; }

h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
  letter-spacing: -0.015em;
}

a { transition: color 0.18s ease, opacity 0.18s ease; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #c8860a;
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* ---------- Rythme vertical entre sections (pages simples) ----------
   Sur les pages "contenu simple" (magasin, guides à venir...), les
   blocs s'enchaînaient avec la marge par défaut de chaque élément
   (très variable selon le type de bloc) au lieu d'un espacement
   régulier — d'où l'effet "empilement" remonté. Règle générique
   "owl selector" : espace égal entre CHAQUE paire d'éléments frères
   direct dans le contenu, quel que soit le bloc GenerateBlocks/
   Gutenberg utilisé — pas de gestion au cas par cas à chaque nouvelle
   page. Exclu de la boutique/panier/commande : leurs mises en page
   WooCommerce ont déjà leur propre rythme, plus dense par nature. */
.page .entry-content > * + *,
.single .entry-content > * + * {
  margin-top: 2.75em;
}
@media (max-width: 767px) {
  .page .entry-content > * + *,
  .single .entry-content > * + * {
    margin-top: 2em;
  }
}

/* ---------- Images de contenu — habillage général ----------
   Généralise à toutes les images de contenu (descriptions de page,
   de catégorie, d'article, d'onglet produit...) le traitement posé
   au cas par cas jusqu'ici sur quelques photos précises (fiches
   magasin, page catégorie hamac...) : coins arrondis, ombre légère,
   fond de secours sable pendant le chargement — ou si l'image
   manque, comme en local où la médiathèque n'est pas exportée
   (voir CLAUDE.md du thème). Ne cible que les zones de contenu
   éditorial : ne touche pas aux cartes produit, à la galerie de la
   fiche produit, au logo, aux icônes ni aux avatars des avis, qui
   ont chacun déjà leur propre habillage plus haut dans ce fichier
   (une règle plus spécifique l'emporte de toute façon en cas de
   chevauchement, sans qu'il y ait besoin de les exclure ici).
   Ajout au passage de max-width/height:auto : repéré sur la photo
   de la page catégorie hamac (1024×1024) qui s'affichait à sa
   taille native sans jamais rétrécir pour tenir dans la colonne —
   filet de sécurité pour toute image de contenu future dans le
   même cas. */
.entry-content img,
.term-description img,
.woocommerce-product-details__short-description img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(74,47,24,0.12);
  background: linear-gradient(160deg, var(--kerlm-sable, #f6ead2) 0%, #eeddb8 100%);
}

/* ============================================
   HOMEPAGE — CORRECTION BORDURES GB
   ============================================ */

/* Supprime les cadres blancs GenerateBlocks sur les titres.
   Audit CSS (sept. 2026) : la règle ciblait 4 classes ; 3
   (.gb-text-6d2e3901, .gb-text-0cb618db, .gb-text-4f381280)
   sont absentes du contenu actuel de la page d'accueil — elles
   n'existent plus qu'en base dans d'anciennes révisions de la
   page (le bloc a été remanié depuis). Retirées ; seule
   .gb-text-b320c726 est toujours rendue sur la page. */
.gb-text-b320c726 {
  border: none !important;
  box-shadow: none !important;
}

/* Section "Profitez d'un instant de détente" : configurée avec une
   photo de fond + un voile brun semi-transparent (rgba(66,44,24,0.54))
   pour le contraste du texte. En local, la photo est absente et,
   contrairement au hero du dessus qui a une couleur de secours
   pleine, cette section n'en a aucune — le voile se pose alors
   directement sur le fond crème de la page et donne un résultat
   délavé au lieu d'un brun profond. Ajout d'une couleur de secours
   de la même teinte que le voile : en production, dès que la photo
   se charge, elle s'affiche normalement par-dessus (l'image passe
   toujours devant une background-color). */
.gb-element-e791b075 {
  background-color: var(--kerlm-ecorce) !important;
  position: relative;
  /* GenerateBlocks pose overflow:hidden sur ce bloc : les vagues
     ci-dessous (décalées de 1px vers l'extérieur pour recouvrir la
     jointure) étaient rognées pile au bord de la section — qui tombe
     sur une fraction de pixel — et un filet gris (crème + brun
     anticrénelés) restait visible au-dessus et au-dessous de la
     bande. Le contenu du bloc ne déborde pas (vérifié mobile/desktop). */
  overflow: visible !important;
}

/* Vague en haut et en bas du bloc sombre "Profitez d'un instant de
   détente" : coupe nette crème → brun → crème d'origine, même
   traitement que la vague déjà posée sous le header (voir plus bas
   dans le fichier, section "3. Motifs") pour que la page se lise
   comme un seul parcours plutôt qu'un empilement de blocs. Même
   path SVG, tourné à 180° en haut via transform. */
.gb-element-e791b075::before,
.gb-element-e791b075::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 22px;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,32 C260,64 340,4 620,26 C880,46 980,2 1200,22 L1200,60 L0,60 Z' fill='%23faf6ef'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.gb-element-e791b075::before {
  top: -1px;
  transform: rotate(180deg);
}
.gb-element-e791b075::after {
  bottom: -1px;
}

/* ============================================
   ACCUEIL — REFONTE VISUELLE (sept. 2026, priorité mobile)
   ============================================ */

/* ---------- Hero (blocs "Magasin de cuir" / "Kêr LM n°2") ----------
   Refonte étape 2 de la revue d'accueil (sept. 2026) — remplace
   l'ancien réglage "2 colonnes côte à côte y compris sur mobile" :
   à 390px, chaque colonne ne faisait plus que 141px (photo ~141×100,
   bouton "Voir le magasin de cuir" sur 3 lignes, 118px de haut).

   - Mobile/tablette (≤768px) : chaque bloc devient une CARTE
     horizontale — photo carrée à gauche, titre + accroche à droite,
     bouton pleine largeur dessous. Les 2 cartes s'empilent tant que
     l'écran est trop étroit pour 2 × 280px, et passent côte à côte
     au-delà (tablette). Hauteur totale ≈ 1 écran au lieu de ~1,5.
   - Desktop : 2 colonnes alignées ligne à ligne (subgrid) — titres,
     accroches, photos et boutons au même niveau d'une colonne à
     l'autre, même si un titre passe sur 2 lignes.
   Structure de chaque bloc (GenerateBlocks) : h2, h3, div > a > img,
   div > a.bouton. */

/* Intro + H1 (insérée par functions.php, section "ACCUEIL — STRUCTURE") */
.kerlm-home-intro {
  max-width: 900px;
  margin: 0 auto 56px;
  text-align: center;
}
.kerlm-home-title {
  margin: 0 0 12px;
  font-size: clamp(28px, 6.4vw, 44px);
  line-height: 1.15;
  /* Lignes équilibrées : évite "…cuir à / Concarneau" (1 mot seul). */
  text-wrap: balance;
  color: #422c18;
}
.kerlm-home-tagline {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--kerlm-ecorce);
  opacity: 0.85;
  text-wrap: balance; /* évite "en ligne." seul sur la 2e ligne */
}

/* Sur-titres ("Relaxation garantie !", "Avis client", "Blog")
   repassés de H2/H3 en <p> par functions.php. Le réglage
   GenerateBlocks de ces blocs prévoit la police "Luckiest Guy",
   jusqu'ici masquée par la règle des titres : on garde le rendu
   qu'ils avaient à l'écran (police des titres, interligne serré). */
.kerlm-kicker {
  font-family: "Bricolage Grotesque", Poppins, sans-serif !important;
  line-height: 1.3 !important;
  margin-top: 0 !important;
}

/* Titres et accroches des 2 blocs harmonisés : l'un était en
   "Capitalisation De Chaque Mot" et l'autre non ; l'une des
   accroches en 29px gras, l'autre en petites capitales 17px. */
.gb-text-62fe7757,
.gb-text-e94e3d2f {
  text-transform: none !important;
}
.gb-text-3dbf6df6 {
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #9c3a0a !important;
}
.gb-element-6d8ee0b9 img {
  width: 100% !important;
  object-fit: cover !important;
  display: block;
}

@media (min-width: 769px) {
  .home .gb-element-fbcec57f {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    column-gap: 48px !important;
    row-gap: 0 !important;
    max-width: 1100px;
    margin: 0 auto;
  }
  .home .gb-element-fbcec57f > div {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    text-align: center;
  }
  .home .gb-element-fbcec57f h2,
  .home .gb-element-fbcec57f h3 {
    text-align: center !important;
    margin-top: 0 !important;
  }
  /* Hiérarchie de la 1re section : H1 44px > titres des magasins
     28px > accroches 15px. Les titres des magasins étaient à 38px,
     presque la taille du H1 (réglage GenerateBlocks d'origine,
     pensé quand ils étaient seuls en tête de page). */
  .home .gb-element-fbcec57f h2 {
    margin-bottom: 8px !important;
    align-self: end;
    font-size: 28px !important;
    line-height: 1.25 !important;
  }
  .home .gb-element-fbcec57f h3 {
    margin-bottom: 20px !important;
    font-size: 15px !important;
  }
  /* Même cadrage 3:2 pour les 2 photos, quelle que soit leur taille
     d'origine (2560×1920 et 1530×1125). */
  .gb-element-6d8ee0b9 img {
    aspect-ratio: 3 / 2;
    height: auto !important;
  }
  .home .gb-element-fbcec57f > div > div:last-child {
    margin-top: 28px;
  }
  /* "Voir le magasin de cuir" a 30px de marge haute côté
     GenerateBlocks, pas "Commander en ligne" : boutons décalés. */
  .home .gb-text-50b5846d,
  .home .gb-text-b9d45dfc {
    margin: 0 !important;
  }
}

@media (max-width: 768px) {
  .kerlm-home-intro { margin-bottom: 28px; }
  .kerlm-home-tagline { font-size: 15px; }

  .home .gb-element-fbcec57f {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  .home .gb-element-fbcec57f > div {
    flex: 1 1 280px !important;
    min-width: 0 !important;
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 14px;
    align-items: start;
    padding: 14px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(74,47,24,0.08);
    text-align: left;
  }
  .home .gb-element-fbcec57f > div > h2 {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0 0 6px !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    text-align: left !important;
  }
  .home .gb-element-fbcec57f > div > h3 {
    grid-column: 2;
    grid-row: 2;
    margin: 0 !important;
    font-size: 13px !important;
    text-align: left !important;
  }
  /* Photo : 1re div du bloc, sur les 2 premières lignes, colonne 1 */
  .home .gb-element-fbcec57f > div > div:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .home .gb-element-fbcec57f > div > div:nth-of-type(1) a {
    display: block;
  }
  .gb-element-6d8ee0b9 img {
    width: 110px !important;
    height: 110px !important;
    max-height: none !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }
  /* Bouton : 2e div du bloc, pleine largeur de la carte */
  .home .gb-element-fbcec57f > div > div:nth-of-type(2) {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 14px;
  }
  .home .gb-text-50b5846d,
  .home .gb-text-b9d45dfc {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 48px;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
  }
}

/* ---------- Bouton "Commander en ligne" ----------
   Seul lien texte souligné au milieu de boutons pleins partout
   ailleurs sur la page (mêmes valeurs que "Voir le magasin de cuir"
   ci-dessus, dont le style vient du bloc GenerateBlocks — repris ici
   à l'identique puisque ce lien-ci n'a pas ce réglage). */
.gb-text-b9d45dfc {
  display: inline-flex !important;
  align-items: center !important;
  background-color: var(--kerlm-brique) !important;
  color: var(--kerlm-toile) !important;
  padding: 14px 36px !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  font-family: 'PT Sans', sans-serif !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}
.gb-text-b9d45dfc:hover {
  background-color: var(--kerlm-brique-fonce) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15) !important;
}

/* ---------- Section "Blog" : masquée tant qu'aucun article n'est publié ----------
   La grille d'articles (bloc Requête) est vide (0 article publié).
   Un message d'attente s'affichait à sa place ; retiré à l'étape 3 de
   la revue d'accueil (sept. 2026) : un titre "Nos guides sont là pour
   vous aider" suivi d'aucun guide affaiblissait la page. La section
   entière est masquée tant que la grille est vide (:empty) ; dès
   qu'un article est publié, le div n'est plus vide, le sélecteur ne
   matche plus et la section réapparaît — rien à retoucher ici. */
.gb-element-f834cd5a:has(> .gb-element-c9bffeca > div:empty) {
  display: none !important;
}

/* ============================================
   ACCUEIL — MEILLEURES VENTES (étape 3, sept. 2026)
   (devenue "Notre sélection" : 4 produits choisis à la main, liste
   dans functions.php — le nom de section est gardé comme repère)
   Section insérée par functions.php ("ACCUEIL — STRUCTURE", point 4)
   entre la bande "détente" et les avis. Les cartes produit gardent
   l'habillage de la boutique (section "WOOCOMMERCE — CARTES
   PRODUITS") ; seule la mise en page change ici.
   ============================================ */
.kerlm-home-products {
  max-width: 1300px;
  margin: 0 auto;
  padding: 88px 40px;
  text-align: center;
}
.kerlm-home-products__kicker {
  margin: 0 0 8px !important;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9c3a0a;
}
.kerlm-home-products__title {
  margin: 0 0 40px;
  font-size: 38px;
  line-height: 1.3;
  color: #422c18;
  text-wrap: balance;
}
.kerlm-home-products ul.products {
  margin: 0 !important;
  text-align: left;
}
/* Hors des pages boutique, WooCommerce applique sa mise en page
   "flottante" historique : cartes à width:22% + marge droite, et
   ::before/::after de clearfix — qui deviennent de fausses cases
   dans notre grille. Neutralisé : la grille décide seule des tailles. */
.kerlm-home-products ul.products::before,
.kerlm-home-products ul.products::after {
  display: none !important;
}
.kerlm-home-products ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}
.kerlm-home-products__more {
  margin: 40px 0 0;
}
/* Bouton secondaire (contour) : l'action principale reste sur les
   cartes produit, celui-ci mène au catalogue complet. */
.kerlm-home-products__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 32px;
  border: 2px solid var(--kerlm-brique);
  border-radius: 9999px;
  font-family: 'PT Sans', sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--kerlm-brique);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.kerlm-home-products__cta:hover,
.kerlm-home-products__cta:focus {
  background-color: var(--kerlm-brique);
  color: var(--kerlm-toile);
}

@media (max-width: 768px) {
  .kerlm-home-products {
    padding: 56px 20px;
  }
  .kerlm-home-products__kicker { font-size: 15px; }
  .kerlm-home-products__title {
    margin-bottom: 24px;
    font-size: 22.4px;
  }
  .kerlm-home-products__more { margin-top: 28px; }
  .kerlm-home-products__cta {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
  }
}
/* Mobile : la grille boutique passe à 1 colonne sous 600px — 4 cartes
   empilées feraient ~1600px de scroll sur l'accueil. On passe en
   rangée défilable au doigt (cartes à 72% de large : la suivante
   dépasse, ce qui signale qu'on peut faire glisser), avec aimantation
   carte par carte. La rangée déborde jusqu'aux bords de l'écran. */
@media (max-width: 600px) {
  .kerlm-home-products .woocommerce ul.products.columns-4 {
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    gap: 14px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    margin: 0 -20px !important;
    padding: 4px 20px 16px !important;
    -webkit-overflow-scrolling: touch;
  }
  .kerlm-home-products ul.products li.product {
    scroll-snap-align: start;
  }
}

/* ---------- Widget d'avis Google (TrustIndex) : alignement charte ----------
   Le widget contient de vrais avis mais restait invisible (voir le
   correctif JS dans functions.php). Une fois révélé, son habillage
   par défaut (carte grise plate) est repris dans le langage "carte"
   du reste du site : fond blanc, ombre légère, coins assortis aux
   cartes produit. */
.ti-widget {
  margin: 32px auto 0 !important;
}
.ti-review-item .ti-inner {
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 14px rgba(0,0,0,0.08) !important;
}
.ti-name {
  font-family: 'Bricolage Grotesque', 'Poppins', sans-serif !important;
  color: var(--kerlm-ecorce) !important;
}
/* Desktop : plafonné d'abord à 480px, ce qui donnait 3 cartes de
   ~140px de large où le texte d'avis était coupé après 4 mots
   ("Superbe petite boutique avec des…"). Élargi pour des cartes
   d'environ 320px, lisibles sans ouvrir "Lire la suite". */
@media (min-width: 769px) {
  .ti-widget { max-width: 1000px !important; }
}

/* Le widget est configuré en mode "3 avis visibles côte à côte"
   (classe .ti-col-3, ligne flex figée en nowrap avec 3 cartes de
   ~105px chacune) — un réglage fixe côté TrustIndex, pas un
   comportement responsive qui s'adapterait seul à un écran de
   390px : sans intervention on se retrouve avec 3 cartes minuscules
   illisibles sur mobile. On repasse en 1 carte pleine largeur par
   ligne, on n'en garde que 3 (au lieu des 9 chargées) pour ne pas
   allonger démesurément le scroll — le lien "voir sur Google" déjà
   présent sous le widget couvre le reste. Les flèches/puces de
   pagination du carousel n'ont plus de sens dans ce mode empilé.
   Écart entre cartes : la photo de profil remonte de 52px au-dessus
   de sa carte (margin-top négatif TrustIndex) et mordait sur la carte
   précédente — le "gap" posé ici à l'origine n'a jamais été appliqué
   (neutralisé côté widget : cartes collées, écart réel 0). Remplacé
   par une marge sur les cartes : 56px = 52px + une respiration. */
@media (max-width: 768px) {
  .ti-widget { margin-top: 20px !important; }
  .ti-reviews-container-wrapper {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  .ti-widget .ti-reviews-container-wrapper .ti-review-item + .ti-review-item {
    margin-top: 56px !important;
  }
  /* left:0 — le carrousel continue de défiler seul même en mode
     empilé : son script décale chaque carte vers la gauche (propriété
     "left" animée, ~-370px toutes les 4s), faisant sortir les 3
     cartes de l'écran et laissant un grand vide sous "AVIS CLIENT".
     On fige la position (un !important l'emporte sur l'animation). */
  .ti-review-item {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    left: 0 !important;
  }
  .ti-review-item:nth-child(n+4) {
    display: none !important;
  }
  .ti-controls,
  .dot {
    display: none !important;
  }
}

/* ============================================
   ACCUEIL — CORRECTIFS MISE EN FORME (étape 1, sept. 2026)
   Revue de la page d'accueil, priorité mobile : pleine largeur,
   rythme vertical unique, bande "détente", petits défauts.
   ============================================ */

/* ---------- Sections pleine largeur sur mobile ----------
   Le padding général du contenu mobile (20px 16px sur
   .inside-article, section "Mobile" plus bas) s'appliquait aussi à
   l'accueil : chaque section, y compris la bande brune, était
   inscrite avec 16px de crème à gauche et à droite — alors qu'elle
   est pleine largeur sur desktop. L'accueil est composé de sections
   qui gèrent déjà leurs propres marges internes : on retire celui-ci. */
@media (max-width: 768px) {
  .home .site-content .inside-article {
    padding: 0 !important;
  }
}

/* ---------- Rythme vertical ----------
   L'espace entre deux blocs cumulait la marge "owl" générique
   (2em / 2.75em, section "Rythme vertical" en haut du fichier) ET le
   padding interne de chaque section (60px mobile / 100px desktop) :
   jusqu'à ~180px de vide sur mobile entre les avis et le blog,
   ~275px sur desktop. Sur l'accueil, l'espacement est porté par un
   seul réglage : le padding interne de chaque section. */
.home .entry-content > * + * {
  margin-top: 0;
}
/* Section vide (hauteur 0) laissée en tête de page dans l'éditeur. */
.home .gb-element-b78e5241 {
  display: none !important;
}
.home .gb-element-6d8ee0b9,   /* hero : magasin de cuir / n°2    */
.home .gb-element-768af6c0,   /* avis clients (conteneur interne) */
.home .gb-element-c9bffeca {  /* blog (conteneur interne)         */
  padding-top: 88px !important;
  padding-bottom: 88px !important;
}
.home .gb-element-c4a646a1 {  /* bande "détente" (conteneur interne) */
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}
@media (max-width: 768px) {
  .home .gb-element-6d8ee0b9,
  .home .gb-element-768af6c0,
  .home .gb-element-c9bffeca {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .home .gb-element-c4a646a1 {
    padding: 64px 20px !important;
  }
}
/* Sous-titre "AVIS CLIENT" : 64px de marge + 20px de marge du widget
   + 52px réservés au-dessus des photos de profil = 136px de vide
   avant la 1re carte. On ne garde que la réserve des photos. */
.home .gb-text-d1af1b21 {
  margin-bottom: 8px !important;
}
.home .gb-element-768af6c0 > :last-child,
.home .gb-element-c4a646a1 > :last-child {
  margin-bottom: 0 !important;
}
/* Fond gris neutre (#f6f5f2) du bloc blog : seul gris froid de la
   page, il tranchait avec le crème chaud des autres sections. */
.home .gb-element-f834cd5a {
  background-color: var(--kerlm-toile) !important;
}

/* ---------- Bande "Profitez d'un instant de détente" ----------
   - Le paragraphe était enfermé dans un conteneur de 250px de large
     sur mobile (358px disponibles) → colonne étroite sur 5 lignes.
   - Les 2 boutons vivent dans une grille à largeur fixe de 900px :
     sur mobile elle débordait de l'écran (centrée hors cadre, d'où
     ~130px de vide entre les boutons empilés) ; sur desktop, 2
     colonnes de 442px plaçaient les boutons très loin l'un de
     l'autre. On les regroupe au centre.
   - Texte en gras 30px + ombre portée noire : lourd à lire. Passé en
     graisse normale ; on garde une ombre légère car en production le
     texte est posé sur une photo (voile brun à 54%). */
.home .gb-element-f3ad6815 {
  width: 100% !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.home .gb-text-38c28493 {
  font-weight: 400 !important;
  font-size: 22px !important;
  line-height: 1.6 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35) !important;
  margin-bottom: 0 !important;
}
.home .gb-element-ba52d3c7 {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 16px 24px !important;
  width: auto !important;
  max-width: 100% !important;
  margin-top: 40px !important;
}
.home .gb-element-ba52d3c7 > div {
  width: auto !important;
}
.home .gb-element-ba52d3c7 .gb-text {
  margin: 0 !important;
}
@media (max-width: 768px) {
  .home .gb-text-38c28493 {
    font-size: 16px !important;
  }
  .home .gb-element-ba52d3c7 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-top: 28px !important;
  }
  .home .gb-element-ba52d3c7 .gb-text {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 13px 12px !important;
    font-size: 16px !important;
    min-height: 48px;
    box-sizing: border-box;
  }
}
/* Très petits écrans : "CHAISE HAMAC" ne tient plus sur une ligne
   dans une demi-colonne — on empile. */
@media (max-width: 359px) {
  .home .gb-element-ba52d3c7 {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- Header mobile : rectangle brun sous le burger ----------
   Le conteneur du panier + burger (#mobile-menu-control-wrapper) est
   une .main-navigation : il hérite du fond brun du menu et du
   z-index 2 (section "3. Motifs"), donc passe PAR-DESSUS la vague du
   header (z-index 1) et y découpe un rectangle. Il n'a pas besoin de
   fond propre : il est posé sur le header, déjà brun. */
#mobile-menu-control-wrapper {
  background-color: transparent !important;
}

/* ---------- Bouton "retour en haut" ----------
   Carré gris semi-transparent par défaut (GeneratePress) : presque
   invisible sur le crème et sans lien avec la charte. Rond brun,
   zone de tap 44px. */
.generate-back-to-top {
  width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
  border-radius: 50% !important;
  background-color: var(--kerlm-ecorce) !important;
  color: var(--kerlm-toile) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.generate-back-to-top:hover,
.generate-back-to-top:focus {
  background-color: var(--kerlm-brique) !important;
}

/* ============================================
   WOOCOMMERCE — CARTES PRODUITS
   ============================================ */

.woocommerce ul.products {
  display: grid !important;
  gap: 24px !important;
}
.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr) !important; }
.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr) !important; }

@media (max-width: 900px) {
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4 { grid-template-columns: 1fr !important; }
}

.woocommerce ul.products li.product {
  background: #fff !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 14px rgba(0,0,0,0.08) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  /* CSS Grid n'harmonise la hauteur des cartes qu'à l'intérieur
     d'une même ligne, pas sur l'ensemble de la grille : une ligne
     de produits simples (sans variantes couleur, donc plus courts)
     se retrouvait bien plus basse que les lignes de produits avec
     swatches, ce qui donnait un effet "tassé" à ces cartes-là. Une
     hauteur mini commune (= la carte la plus haute du catalogue :
     titre sur 2 lignes + 2 lignes de variantes) aligne tout,
     peu importe la ligne. Le bouton reste collé en bas grâce à
     margin-top: auto (voir .button ci-dessous). */
  min-height: 452px !important;
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.13) !important;
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: block !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

.woocommerce ul.products li.product .wc-product-image,
.woocommerce ul.products li.product .inside-wc-product-image {
  display: block !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.woocommerce ul.products li.product .wc-product-image img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform 0.32s ease !important;
}

.woocommerce ul.products li.product:hover .wc-product-image img {
  transform: scale(1.06) !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  padding: 14px 16px 4px !important;
  margin: 0 !important;
}

.woocommerce ul.products li.product .price {
  padding: 2px 16px 10px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  /* #96600a plutôt que #c8860a : à 15px le doré clair d'origine
     ne passe pas le seuil de lisibilité WCAG AA (3,06:1 au lieu
     de 4,5:1 requis pour du texte de cette taille). */
  color: #96600a !important;
  display: block !important;
}

.woocommerce ul.products li.product .button {
  margin: auto 16px 16px !important;
  width: calc(100% - 32px) !important;
  text-align: center !important;
  padding: 10px 16px !important;
  border-radius: 9999px !important;
  transition: all 0.2s ease !important;
  display: block !important;
  box-sizing: border-box !important;
}

.woocommerce span.onsale {
  /* #a06808 plutôt que #c8860a : le texte blanc du badge ne
     passait pas 4,5:1 sur le doré clair d'origine (3,06:1). */
  background: #a06808 !important;
  color: #fff !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  min-width: unset !important;
  min-height: unset !important;
  line-height: 1.5 !important;
  top: 10px !important;
  left: 10px !important;
}

/* ---------- Variantes couleur (swatches) sur la carte produit ----------
   Le plugin "Variation Swatches for WooCommerce" centre par défaut
   le groupe de pastilles dans la carte (au lieu de l'aligner avec le
   titre/prix à gauche) et positionne son badge "+X More" en
   position: absolute, ce qui le fait flotter loin des pastilles,
   parfois même hors de la carte. On aligne tout à gauche, dans le
   flux normal, avec le même retrait que le titre/prix (16px). Le
   badge est aussi allégé (simple texte discret plutôt qu'une
   pastille) — sa traduction en français est gérée dans functions.php
   (le plugin ne fournit pas de traduction FR pour cette chaîne). */
.woocommerce ul.products li.product .cfvsw_variations_form {
  padding: 0 16px 14px !important;
}
.woocommerce ul.products li.product .cfvsw_shop_align_center table tr td,
.woocommerce ul.products li.product .cfvsw-shop-variations tr td {
  justify-content: flex-start !important;
  align-items: center !important;
}
.woocommerce ul.products li.product .cfvsw-more-link {
  position: static !important;
  left: auto !important;
  margin-left: 6px !important;
}
.woocommerce ul.products li.product .cfvsw-more-link a {
  font-weight: 500 !important;
  color: #a89a86 !important;
  background: none !important;
  padding: 0 !important;
}
.woocommerce ul.products li.product .cfvsw-more-link a:hover {
  color: var(--kerlm-corde, #96600a) !important;
  background: none !important;
}

/* ============================================
   WOOCOMMERCE — PAGE PRODUIT UNIQUE
   ============================================ */

.woocommerce div.product div.summary { line-height: 1.7; }

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: 1.6em !important;
  font-weight: 700 !important;
  color: #c8860a !important;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 15px;
  line-height: 1.7;
  color: #444;
  margin-bottom: 20px;
}

.woocommerce div.product div.images img { border-radius: 12px; }

/* Desktop : bouton panier plus visible */
@media (min-width: 769px) {
  .woocommerce div.product form.cart .single_add_to_cart_button {
    font-size: 15px !important;
    padding: 14px 28px !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    min-width: 200px !important;
  }
}

/* Mobile : produit empilé */
@media (max-width: 768px) {
  .woocommerce div.product {
    display: block !important;
  }
  .woocommerce div.product div.images {
    width: 100% !important;
    float: none !important;
  }
  .woocommerce div.product div.images img {
    width: 100% !important;
    height: 260px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }
  .woocommerce div.product div.summary {
    width: 100% !important;
    float: none !important;
    clear: both !important;
  }
  .woocommerce div.product p.price {
    font-size: 1.8em !important;
  }
  /* CTA pleine largeur sur mobile */
  .woocommerce div.product form.cart {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
  }
  .woocommerce div.product form.cart .single_add_to_cart_button {
    flex: 1 1 auto !important;
    width: 100% !important;
    font-size: 16px !important;
    padding: 15px 24px !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }
  /* Onglets description */
  .woocommerce-tabs .tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .woocommerce-tabs .tabs li a {
    font-size: 13px !important;
    padding: 8px 12px !important;
  }
}

/* ============================================
   DESCRIPTIONS CATÉGORIES
   ============================================ */

.term-description {
  background: #fdf6ec;
  border-left: 3px solid #c8860a;
  padding: 16px 20px;
  border-radius: 0 10px 10px 0;
  font-size: 15px;
  line-height: 1.7;
  color: #444;
  margin-bottom: 32px;
}

/* ============================================
   FIL D'ARIANE
   ============================================ */

.woocommerce-breadcrumb {
  font-size: 13px !important;
  /* #6b6b6b plutôt que #999 : 2,85:1 à l'origine, sous le
     seuil de 4,5:1 requis pour du texte de cette taille. */
  color: #6b6b6b !important;
  margin-bottom: 20px !important;
}
.woocommerce-breadcrumb a { color: #96600a !important; }

/* ============================================
   FORMULAIRES
   ============================================ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
select,
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  border-radius: 8px !important;
  border: 1.5px solid #e0d8d0 !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  background: #fff !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
textarea:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: #c8860a !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(200,134,10,0.12) !important;
}

/* ============================================
   BOUTONS GLOBAUX
   ============================================ */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
  transition: all 0.2s ease !important;
  font-weight: 600 !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #payment #place_order:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* ============================================
   NAVIGATION — MOBILE
   ============================================ */

@media (max-width: 768px) {
  /* Header padding réduit */
  .site-header .inside-header {
    padding: 8px 16px !important;
  }
  /* Hamburger — zone de tap agrandie.
     GeneratePress génère DEUX boutons ".menu-toggle" en layout
     "toggle inline" : celui du header (#mobile-menu-control-wrapper,
     le seul qui doit être visible) et un second, dans
     #site-navigation, normalement caché par GeneratePress lui-même
     et destiné à rester un secours invisible. Cibler ".menu-toggle"
     sans distinction forçait ce second bouton à s'afficher aussi
     (petit "✕" fantôme en trop une fois le menu ouvert). */
  #mobile-menu-control-wrapper .menu-toggle {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #site-navigation > .inside-navigation > .menu-toggle {
    display: none !important;
  }
  /* Liens de navigation mobiles */
  .main-navigation .menu-item a {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* ============================================
   MOBILE — GÉNÉRAL
   ============================================ */

@media (max-width: 768px) {
  /* Typographie mobile */
  .entry-content p,
  .entry-content li { font-size: 15px; line-height: 1.75; }
  h1 { font-size: 1.75em; }
  h2 { font-size: 1.4em; }
  h3 { font-size: 1.15em; }

  /* Catégorie : description compacte */
  .term-description {
    font-size: 14px !important;
    padding: 12px 16px !important;
    margin-bottom: 20px !important;
  }
  .woocommerce-breadcrumb {
    font-size: 12px !important;
    margin-bottom: 12px !important;
  }

  /* Taille image produit grille mobile */
  .woocommerce ul.products li.product .wc-product-image img { height: 190px !important; }

  /* Tous les boutons ont un tap target correct */
  .woocommerce a.button,
  .woocommerce button.button,
  .button, button {
    min-height: 44px !important;
  }

  /* Images ne débordent jamais */
  img { max-width: 100% !important; height: auto; }

  /* Tableaux scrollables */
  .woocommerce table.shop_table,
  .woocommerce-page table {
    display: block !important;
    overflow-x: auto !important;
    width: 100% !important;
  }

  /* Formulaire contact : bouton pleine largeur */
  .wpcf7-submit,
  .wpcf7 input[type="submit"],
  form .form-submit input[type="submit"] {
    width: 100% !important;
    padding: 14px 24px !important;
    font-size: 16px !important;
    border-radius: 9999px !important;
  }

  /* Padding général du contenu */
  .site-content .inside-article {
    padding: 20px 16px !important;
  }
}

/* ============================================
   FOOTER
   ============================================ */

.kerlm-footer {
  background-color: var(--contrast, #1a1a1a);
  color: var(--base, #fff);
  font-family: inherit;
}
.kerlm-footer a { color: inherit; text-decoration: none; }
.kerlm-footer a:hover { color: var(--accent-4, #f0c060); }

.kerlm-footer-top {
  max-width: var(--gb-container-width, 1200px);
  margin: 0 auto;
  padding: 64px 40px 48px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
}
@media (max-width: 900px) {
  .kerlm-footer-top { grid-template-columns: 1fr 1fr; padding: 48px 24px 32px; gap: 32px; }
}

.kerlm-footer-logo img { width: 180px; max-width: 100%; margin-bottom: 16px; display: block; }
.kerlm-footer-logo p { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.7; margin: 0; }

.kerlm-footer-col h4 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent-4, #f0c060);
  margin: 0 0 16px;
}
.kerlm-footer-col ul { list-style: none; margin: 0; padding: 0; }
.kerlm-footer-col ul li { margin-bottom: 10px; font-size: 14px; color: rgba(255,255,255,0.75); }
.kerlm-footer-col ul li a:hover { color: #fff; }
.kerlm-footer-col p { font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.7; margin: 0 0 8px; }
.kerlm-footer-col a.kf-phone { font-size: 16px; font-weight: 600; color: #fff; }
.kerlm-footer-col a.kf-phone:hover { color: var(--accent-4, #f0c060); }
.kerlm-footer-col .kf-note { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 8px; } /* 0.4 = 3,81:1, sous 4,5:1 */

.kerlm-footer-divider {
  max-width: var(--gb-container-width, 1200px);
  margin: 0 auto;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.kerlm-footer-bottom {
  max-width: var(--gb-container-width, 1200px);
  margin: 0 auto;
  padding: 20px 40px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
@media (max-width: 540px) { .kerlm-footer-bottom { padding: 20px; flex-direction: column; align-items: flex-start; } }

.kerlm-footer-legal { display: flex; flex-wrap: wrap; gap: 20px; }
.kerlm-footer-legal a { font-size: 12px; color: rgba(255,255,255,0.55); } /* 0.45 = 4,47:1, sous 4,5:1 */
.kerlm-footer-legal a:hover { color: rgba(255,255,255,0.9); }

.kerlm-footer-copy { font-size: 12px; color: rgba(255,255,255,0.5); margin: 0; } /* 0.35 = 3,22:1, sous 4,5:1 */

.kerlm-footer-social { display: flex; gap: 10px; }
.kerlm-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  font-weight: 700;
  transition: background 0.2s, color 0.2s;
}
.kerlm-footer-social a:hover { background: var(--accent, #c8860a); color: #fff; }

/* ============================================
   PANIER — WooCommerce Cart Block
   ============================================ */

/* Audit CSS (sept. 2026) : la barre de réassurance panier
   (.kerlm-cart-reassurance / -inner / .kerlm-reassurance-item)
   n'existe plus dans le contenu actuel de la page Panier —
   confirmé en base (uniquement dans d'anciennes révisions, plus
   dans le contenu publié). Règles retirées ici et dans le bloc
   mobile ci-dessous. */

.wc-block-cart-item__image img { border-radius: 8px !important; }
.wc-block-cart-item__prices .wc-block-components-product-price { font-weight: 700 !important; color: #96600a !important; }

/* Ligne d'un article du panier : grille à colonnes fixes (image
   80px + détails 132px + ... ) qui dépasse la largeur réelle
   disponible sur mobile (~298px avec le correctif alignwide
   ci-dessus) — le prix se retrouvait coupé à droite. Colonne
   "détails" en largeur flexible (1fr) plutôt que fixe, pour
   qu'elle absorbe l'écart au lieu de faire déborder la ligne. */
@media (max-width: 480px) {
  .wc-block-cart-items__row {
    grid-template-columns: 64px minmax(0, 1fr) 16px auto !important;
    column-gap: 8px !important;
  }
}

.wc-block-cart__totals-title {
  font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important;
  letter-spacing: 2px !important; color: #7a5a1a !important; margin: 0 0 20px !important;
  padding-bottom: 14px !important; border-bottom: 2px solid #f0ddb5 !important;
}

/* Fond blanc + ombre plutôt que le sable d'origine (#fdf6ec) : ce
   sable est visuellement presque identique au fond crème de la
   page (--kerlm-toile, #faf6ef) — la carte totaux/code promo ne se
   distinguait quasiment pas du reste de la page. Repris sur le
   même langage "carte" que le reste du site (fond blanc + ombre
   légère, cf. cartes produit/infos pratiques). */
.wc-block-components-totals-wrapper {
  background: #fff !important; border: 1px solid #f0ddb5 !important;
  border-radius: 14px !important; padding: 24px !important;
  box-shadow: 0 2px 14px rgba(0,0,0,0.08) !important;
}

.wc-block-components-totals-coupon,
.wc-block-components-totals-coupon.wc-block-components-panel {
  border: none !important; background: transparent !important; box-shadow: none !important;
  border-radius: 0 !important; padding: 0 !important;
}
.wc-block-components-totals-coupon .wc-block-components-panel__button {
  background: transparent !important; border: none !important; box-shadow: none !important;
  /* #96600a plutôt que #c8860a : 2,85:1 sur le fond crème
     d'origine, sous le seuil de 4,5:1. */
  padding: 6px 0 !important; color: #96600a !important; font-size: 13px !important;
  font-weight: 600 !important; width: 100% !important; cursor: pointer !important;
  border-bottom: 1px solid #f0ddb5 !important; border-radius: 0 !important;
}
.wc-block-components-totals-coupon .wc-block-components-panel__button:hover { transform: none !important; box-shadow: none !important; color: #8a5a08 !important; }
.wc-block-components-totals-coupon .wc-block-components-panel__content { background: transparent !important; border: none !important; box-shadow: none !important; padding: 12px 0 4px !important; }
/* Ce champ a un "label flottant" propre à WooCommerce Blocks : au
   repos le texte "Entrer le code" est centré dans le champ, et une
   fois actif (au clic ou avec du texte) il rétrécit et remonte en
   haut (règles internes de WooCommerce : label en position
   absolute, top:6px + scale(.82) une fois actif). Ce mécanisme
   suppose un champ assez haut pour loger le label rétréci ET le
   texte tapé l'un sous l'autre — le padding réduit du correctif
   "FORMULAIRES" plus haut dans ce fichier (pensé pour des champs
   simples, sans label flottant) ne laissait pas cette place : le
   label et le texte se chevauchaient. Padding réajusté ici, plus
   haut que large, pour ce champ précis uniquement. */
.wc-block-components-totals-coupon input[type="text"] {
  border: 1.5px solid #e0d8d0 !important;
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 24px 14px 8px !important;
}
.wc-block-components-totals-coupon input[type="text"]:focus { border-color: #c8860a !important; box-shadow: 0 0 0 3px rgba(200,134,10,0.12) !important; }

.wc-block-components-totals-item { border-color: #f0ddb5 !important; padding: 10px 0 !important; }

.wc-block-components-totals-footer-item { border-top: 2px solid #c8860a !important; margin-top: 8px !important; padding-top: 16px !important; padding-bottom: 4px !important; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: #5a4010 !important; }
.wc-block-components-totals-footer-item-tax-value { font-size: 26px !important; font-weight: 800 !important; color: #c8860a !important; line-height: 1.1 !important; letter-spacing: -0.5px !important; }
/* #6b6b6b plutôt que #aaa sur ces deux lignes : 2,16:1 à
   l'origine sur fond crème, très en dessous du seuil de 4,5:1. */
.wc-block-components-totals-footer-item-tax { font-size: 12px !important; color: #6b6b6b !important; margin: 6px 0 2px !important; }
.wc-block-components-totals-footer-item-shipping { font-size: 12px !important; color: #6b6b6b !important; font-style: italic !important; line-height: 1.5 !important; margin: 0 0 8px !important; }
.wc-block-components-order-meta:empty, .wc-block-cart__payment-options:empty { display: none !important; }

.wc-block-cart__submit-container { margin-top: 20px !important; }
.wc-block-cart__submit-button { border-radius: 9999px !important; font-size: 16px !important; font-weight: 700 !important; padding: 15px 32px !important; letter-spacing: 0.03em !important; transition: all 0.22s ease !important; width: 100% !important; box-shadow: 0 4px 14px rgba(0,0,0,0.15) !important; }
.wc-block-cart__submit-button:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important; }
.wc-block-cart-cross-sells { border-top: 1px solid #f0ebe3 !important; padding-top: 24px !important; margin-top: 8px !important; }
.wc-block-cart__empty-cart__title { color: #6b6b6b !important; } /* #888 = 3,54:1, sous 4,5:1 */

@media (max-width: 600px) {
  .wc-block-components-totals-footer-item-tax-value { font-size: 22px !important; }
}

/* ============================================
   PANIER / CHECKOUT — Fix marge alignwide (GeneratePress)
   ---------------------------------------------------------
   Le correctif existant ci-dessous (déjà en place pour le
   checkout) n'avait jamais été étendu au panier. Diagnostic
   (audit visuel + panier réel, sept. 2026) : .alignwide applique
   des marges négatives -40px de chaque côté (+ max-width: calc(100%
   + 80px)) pour "déborder" du conteneur de contenu vers le
   conteneur large — un calcul qui suppose 80px d'écart entre les
   deux, absent ici. Résultat : le bloc panier déborde de 40px à
   droite, et le garde-fou overflow-x:clip posé plus haut sur
   .wp-block-woocommerce-cart (pour un tout autre bug, la grille de
   recommandations du panier vide) coupait silencieusement ce
   débordement — la carte "Total panier / code promo" perdait son
   bord droit, une partie du bouton "Appliquer" et l'icône à côté du
   total. Même correctif que le checkout, étendu au panier. */

.wp-block-woocommerce-checkout.alignwide,
.wc-block-checkout.alignwide,
.wp-block-woocommerce-filled-cart-block.alignwide,
.wp-block-woocommerce-empty-cart-block.alignwide,
.wp-block-woocommerce-cart.alignwide,
.wc-block-cart.alignwide {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* ============================================
   PAGE "MAGASIN KÊR LM À CONCARNEAU" (redirection vers les 2 boutiques)
   ---------------------------------------------------------
   Page très simple : titre + intro, puis 2 blocs "Kêr LM Cuir" /
   "Kêr LM n°2 Hamac" déjà en grille 2 colonnes (1 sur mobile) via le
   CSS généré par GenerateBlocks — on ne touche pas à cette mécanique,
   seulement à l'habillage visuel : les 2 blocs flottaient en texte
   nu sans séparation, et les boutons ("Voir le magasin de cuir/Hamac",
   "Boutique en ligne") étaient restés au bleu par défaut de
   GenerateBlocks (#215bc2), jamais mis à la charte du site. */
.gb-element-5ae2cc88 > div {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.08);
  padding: 32px;
}
.gb-element-5ae2cc88 h2 {
  margin-top: 0;
}
@media (max-width: 767px) {
  .gb-element-5ae2cc88 > div { padding: 24px; }
}

/* Bloc "Kêr LM Cuir" : met en avant la vente exclusivement en
   magasin (pas de commande en ligne pour cette boutique-ci) via un
   badge dédié, plutôt qu'un simple mot en gras noyé dans le
   paragraphe. Généré en CSS (::after sur le h2) pour ne pas
   dupliquer le texte : le gras d'origine dans le paragraphe repasse
   à une graisse normale juste en dessous, pour ne pas répéter la
   mise en avant deux fois. */
.gb-element-5ae2cc88 > div:first-child h2::after {
  content: "Vente en magasin uniquement";
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin: 10px 0 4px;
  background: var(--kerlm-sable, #f6ead2);
  color: var(--kerlm-ecorce, #4a2f18);
  border: 1px solid var(--kerlm-corde-clair, #c9922c);
  border-radius: 9999px;
  padding: 5px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: 'Poppins', sans-serif;
}
.gb-element-5ae2cc88 > div:first-child p strong {
  font-weight: 400;
}

/* Boutons principaux ("Voir le magasin de cuir" / "...de Hamac") :
   même traitement que les CTA du reste du site (pilule terracotta). */
.gb-text-c37f1233,
.gb-text-125c6b97 {
  background-color: var(--kerlm-brique) !important;
  color: var(--kerlm-toile) !important;
  border-radius: 9999px !important;
  padding: 14px 28px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-family: 'PT Sans', sans-serif !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}
.gb-text-c37f1233:is(:hover,:focus),
.gb-text-125c6b97:is(:hover,:focus) {
  background-color: var(--kerlm-brique-fonce) !important;
  color: var(--kerlm-toile) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15) !important;
}

/* "Boutique en ligne" : action secondaire (redirige vers la
   boutique générale plutôt que la fiche de cette boutique) — style
   en contour plutôt qu'en pilule pleine pour rester hiérarchisé sous
   le bouton principal, mais harmonisé avec lui : même famille de
   couleur (terracotta, pas le brun sombre d'origine), même gabarit
   (padding/taille/police identiques) pour former une vraie paire de
   boutons plutôt que deux styles disparates côte à côte. */
.gb-text-ff1ad4fe {
  background-color: transparent !important;
  color: var(--kerlm-brique) !important;
  border: 2px solid var(--kerlm-brique) !important;
  border-radius: 9999px !important;
  padding: 12px 26px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-family: 'PT Sans', sans-serif !important;
  transition: all 0.2s ease !important;
}
.gb-text-ff1ad4fe:is(:hover,:focus) {
  background-color: var(--kerlm-brique) !important;
  color: var(--kerlm-toile) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15) !important;
}
.gb-text-125c6b97,
.gb-text-ff1ad4fe {
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

/* ============================================
   PAGE "KÊR LM N°2 : MAGASIN DE HAMAC À CONCARNEAU"
   ---------------------------------------------------------
   Fiche magasin : une ligne d'infos pratiques (Adresse / Téléphone /
   Horaires / Saison) déjà en grille 4 colonnes (1 sur mobile) via
   GenerateBlocks, mais en texte nu sans aucune séparation visuelle ;
   et 2 photos (magasin + intérieur) dont la hauteur suit le ratio
   natif du fichier — sans borne, un gros blanc vertical avant la
   suite de la page (même mécanique que sur l'accueil). On ajoute :
   des cartes pour les infos pratiques (avec un pictogramme par type
   d'info), et un cadrage/habillage cohérent pour les 2 photos.
   ============================================ */

/* Bouton "Boutique en ligne" au milieu du premier paragraphe : posé
   sans marge (0 en haut et en bas), collé au texte au-dessus et
   carrément au ras du paragraphe suivant en dessous. */
.gb-element-9bf41d74 .wp-block-buttons {
  margin-top: 12px !important;
  margin-bottom: 28px !important;
}

/* ---------- Infos pratiques : mêmes cartes que la page Contact ----------
   Reprend à l'identique le style de .kerlm-contact-info-card (fond
   blanc, filet doré à gauche, icône emoji au-dessus du libellé,
   mêmes tailles/couleurs) pour que "Adresse/Téléphone/Horaires/
   Saison" sur les fiches magasin ait exactement le même rendu que
   "Magasin/Horaires/Téléphone/E-mail" sur la page Contact — même si
   le HTML diffère (classes ci-* propres au <style> inline de la
   page Contact, absentes ici), les valeurs ci-dessous sont copiées
   telles quelles depuis ce <style> inline. */
.gb-element-36abffe5 > div {
  background: #fff;
  border-radius: 14px;
  padding: 22px 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  border-left: 4px solid #c8860a;
}
.gb-element-36abffe5 h2 {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #c8860a;
}
.gb-element-36abffe5 p {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: #2d2d2d;
}
.gb-element-36abffe5 h2::before {
  display: block;
  font-size: 22px;
  margin-bottom: 8px;
}
/* Adresse */
.gb-element-36abffe5 > div:nth-child(1) h2::before { content: "📍"; }
/* Téléphone */
.gb-element-36abffe5 > div:nth-child(2) h2::before { content: "📞"; }
/* Horaires */
.gb-element-36abffe5 > div:nth-child(3) h2::before { content: "🕐"; }
/* Saison */
.gb-element-36abffe5 > div:nth-child(4) h2::before { content: "📅"; }

/* ---------- Photos (magasin + intérieur) : cadrage cohérent ----------
   Dimensions natives (1024×753 et 1024×927) utilisées comme seule
   contrainte de hauteur à l'origine : sur une colonne étroite ça
   étire beaucoup la page. On borne la hauteur et on recadre en
   cover — coins arrondis, ombre et fond de secours viennent de la
   règle générale "Images de contenu" plus haut dans ce fichier. */
img.wp-image-2177,
img.wp-image-2181 {
  width: 100%;
  object-fit: cover;
}
img.wp-image-2177 { max-height: 420px; }
img.wp-image-2181 { max-height: 480px; }
@media (max-width: 767px) {
  img.wp-image-2177 { max-height: 240px; }
  img.wp-image-2181 { max-height: 260px; }
}

/* ---------- CTA de fin de page ("Pas le temps de passer nous
   voir ? Nos produits sont vendu en ligne :" + bouton "Boutique en
   ligne") ----------
   Simple texte centré suivi d'un bouton, posé nu sur le fond de
   page — sans cadre ni espacement propre, ça se perdait en bas de
   page. Le paragraphe passe en encart mis en valeur (fond sable,
   coins arrondis) et le bouton est agrandi avec plus de respiration
   au-dessus. */
.page-id-2151 .entry-content > p.has-text-align-center.wp-block-paragraph {
  background: var(--kerlm-sable, #f6ead2);
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 640px;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 17px;
  font-weight: 600;
  color: var(--kerlm-ecorce, #4a2f18);
}
.page-id-2151 .entry-content > .wp-block-buttons {
  margin-top: 28px !important;
}
.page-id-2151 .entry-content > .wp-block-buttons .wp-block-button__link {
  padding: 16px 40px !important;
  font-size: 16px !important;
}
@media (max-width: 600px) {
  .page-id-2151 .entry-content > p.has-text-align-center.wp-block-paragraph {
    padding: 22px 20px;
    font-size: 16px;
  }
}

/* ============================================
   PAGE "KÊR LM — MAGASIN DE CUIR À CONCARNEAU"
   ---------------------------------------------------------
   Même photo de façade que sur la fiche n°2 (habillage identique,
   cf. img.wp-image-2177/2181 juste au-dessus), et surtout la
   section "Ce que vous trouverez en magasin" : 6 catégories de
   produits, peu de texte chacune. D'abord habillée en liste à puces
   numérotées, repassée en accordéon replié par défaut à la demande
   (plus compact vu le peu de contenu par catégorie). Les 6 paires
   h3+paragraphe sont transformées en <details>/<summary> par un
   script dans functions.php (impossible de restructurer le HTML
   depuis le CSS seul) ; on habille ici le résultat. */

img.wp-image-1471 {
  width: 100%;
  object-fit: cover;
  max-height: 420px;
}
@media (max-width: 767px) {
  img.wp-image-1471 { max-height: 240px; }
}

.page-id-2143 .entry-content {
  counter-reset: kerlm-cuir-cat;
}
.kerlm-cuir-accordion-item {
  counter-increment: kerlm-cuir-cat;
  border-bottom: 1px solid var(--kerlm-ligne, #e7dbc3);
  padding: 14px 0;
}
.kerlm-cuir-accordion-item:first-of-type {
  border-top: 1px solid var(--kerlm-ligne, #e7dbc3);
}
.kerlm-cuir-accordion-item summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  list-style: none;
  font-family: 'Bricolage Grotesque', 'Poppins', sans-serif;
  font-size: 1.15em;
  font-weight: 700;
  color: var(--kerlm-ecorce, #4a2f18);
}
.kerlm-cuir-accordion-item summary::-webkit-details-marker {
  display: none;
}
.kerlm-cuir-accordion-item summary::before {
  content: counter(kerlm-cuir-cat, decimal-leading-zero);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--kerlm-sable, #f6ead2);
  color: var(--kerlm-corde, #96600a);
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.kerlm-cuir-accordion-item summary::after {
  content: "+";
  margin-left: auto;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 400;
  color: var(--kerlm-corde, #96600a);
  transition: transform 0.2s ease;
}
.kerlm-cuir-accordion-item[open] summary::after {
  transform: rotate(135deg);
}
.kerlm-cuir-accordion-item p {
  margin: 12px 0 0 52px;
}
@media (max-width: 600px) {
  .kerlm-cuir-accordion-item summary {
    font-size: 1.05em;
  }
  .kerlm-cuir-accordion-item p {
    margin-left: 0;
  }
}

/* ============================================
   MENU PRINCIPAL — MODERNISATION
   ---------------------------------------------------------
   Refonte du sous-menu "Nos produits" : le flyout imbriqué
   à 3 niveaux (survol en cascade) devient un mega-menu à
   colonnes statiques, tout visible d'un coup. Structure et
   contenu du menu WordPress inchangés — tout se joue en CSS
   par-dessus le HTML existant (specificité + !important
   nécessaires pour primer sur le CSS injecté par
   GeneratePress). Seuil de bascule desktop/mobile aligné
   sur celui réellement utilisé par GeneratePress : 1060px.
   ============================================ */

@media (min-width: 1061px) {

  /* ---------- Barre desktop : items en "chips" arrondies ---------- */
  .main-navigation .main-nav > ul > li > a {
    height: 34px !important;
    line-height: 34px !important;
    margin: 8px 2px;
    border-radius: 8px;
    box-sizing: border-box;
    transition: background-color 0.18s ease, color 0.18s ease;
  }

  /* ---------- Mega-menu "Nos produits" ---------- */
  .main-navigation .main-nav > ul > li.menu-item-has-children {
    position: relative;
  }

  .main-navigation .main-nav > ul > li.menu-item-has-children > .sub-menu {
    position: absolute !important;
    left: 50% !important;
    top: 100% !important;
    margin-top: 0 !important;
    width: min(820px, calc(100vw - 48px)) !important;
    min-width: 0 !important;
    max-width: none !important;
    background: #fff !important;
    border: 1px solid #f0e4cc;
    border-radius: 16px;
    box-shadow: 0 20px 46px rgba(45, 33, 20, 0.18);
    padding: 26px 30px;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px 28px;
    opacity: 0;
    visibility: hidden;
    /* Panneau centré sous son déclencheur (translateX) + légère
       glissade verticale à l'ouverture (translateY), sans marge
       réelle : le panneau touche directement l'item du menu pour
       ne jamais perdre le survol entre les deux (cf. bug remonté). */
    transform: translateX(-50%) translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    pointer-events: none;
  }

  .main-navigation .main-nav > ul > li.menu-item-has-children:hover > .sub-menu,
  .main-navigation .main-nav > ul > li.menu-item-has-children:focus-within > .sub-menu,
  .main-navigation .main-nav > ul > li.menu-item-has-children.sfHover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }

  /* En-têtes de colonnes (Hamac / Chaise Hamac / Support / Matelas) */
  .main-navigation .main-nav > ul > li.menu-item-has-children > .sub-menu > li > a {
    display: block !important;
    padding: 2px 0 12px !important;
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5b3819 !important;
    background: transparent !important;
    border-bottom: 2px solid #f0e0c0;
  }
  .main-navigation .main-nav > ul > li.menu-item-has-children > .sub-menu > li > a:hover {
    color: #96600a !important; /* #c8860a = 3,06:1 sur blanc, sous 4,5:1 */
    background: transparent !important;
  }

  /* GeneratePress désactive le clic (pointer-events:none) sur les
     liens qui ont eux-mêmes des enfants, car dans l'ancien flyout
     ils ne servaient qu'à déclencher le sous-menu au survol. Ici
     tout est cliquable (ex. "Support de hamac" a sa propre page
     catégorie), donc on réactive le clic sur tous les liens du
     panneau, à tous les niveaux. */
  .main-navigation .main-nav > ul > li.menu-item-has-children .sub-menu a {
    pointer-events: auto !important;
  }

  /* Les flyouts imbriqués (2e/3e niveau) deviennent des listes
     statiques affichées directement dans leur colonne. */
  .main-navigation .main-nav > ul > li.menu-item-has-children .sub-menu .sub-menu {
    position: static !important;
    display: block !important;
    float: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 2px 0 0 !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .main-navigation .main-nav > ul > li.menu-item-has-children .sub-menu .sub-menu > li > a {
    display: block !important;
    padding: 6px 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: #4a4a4a !important;
    background: transparent !important;
    transition: color 0.15s ease, transform 0.15s ease;
  }
  .main-navigation .main-nav > ul > li.menu-item-has-children .sub-menu .sub-menu > li:hover > a {
    color: #96600a !important; /* #c8860a = 3,06:1 sur blanc, sous 4,5:1 */
    background: transparent !important;
    transform: translateX(3px);
  }

  /* Sous-groupe plus profond (ex. "Support de hamac" > Bois /
     Métallique) : même style que les autres liens de la colonne
     (pas de gras — juste un léger retrait pour montrer le
     regroupement, sans casser l'harmonie visuelle). */
  .main-navigation .main-nav > ul > li.menu-item-has-children .sub-menu .sub-menu .sub-menu > li > a {
    padding-left: 14px !important;
    font-size: 13px !important;
    color: #6b6b6b !important;
  }

  /* Les flèches de flyout n'ont plus lieu d'être dans un panneau statique */
  .main-navigation .main-nav > ul > li.menu-item-has-children .sub-menu .dropdown-menu-toggle {
    display: none !important;
  }

  /* ---------- Sous-menu "Kêr LM Concarneau" : 2 boutiques, pas 4 colonnes ----------
     Ce sous-menu ne contient que 2 liens plats (les 2 boutiques
     secondaires) — hérite par défaut de la grille à 4 colonnes du
     mega-menu "Nos produits" ci-dessus, qui laissait un panneau
     large de 820px aux 2/3 vides avec les liens tassés en haut à
     gauche. On redimensionne le panneau à son propre contenu (2
     colonnes) et on remplace le style "en-tête de colonne"
     (majuscules + filet) par 2 cartes boutique, plus lisible pour
     un choix de destination que pour une catégorie de produits. */
  .main-navigation .main-nav > ul > li.menu-item-908 > .sub-menu {
    width: min(400px, calc(100vw - 48px)) !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    padding: 20px !important;
  }
  .main-navigation .main-nav > ul > li.menu-item-908 > .sub-menu > li {
    margin: 0 !important;
  }
  .main-navigation .main-nav > ul > li.menu-item-908 > .sub-menu > li > a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 6px !important;
    padding: 22px 12px !important;
    margin: 0 !important;
    background: var(--kerlm-toile, #faf6ef) !important;
    border: 1px solid var(--kerlm-ligne, #e7dbc3) !important;
    border-radius: 14px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--kerlm-ecorce, #4a2f18) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease !important;
  }
  .main-navigation .main-nav > ul > li.menu-item-908 > .sub-menu > li > a::before {
    content: "";
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--kerlm-sable, #f6ead2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%2396600a' d='M192 0C86 0 0 86 0 192c0 77 104 224 160 300 13 17 39 17 52 0 56-76 160-223 160-300C372 86 286 0 192 0zm0 272a80 80 0 1 1 0-160 80 80 0 0 1 0 160z'/%3E%3C/svg%3E") no-repeat center / 14px auto;
    flex-shrink: 0;
  }
  .main-navigation .main-nav > ul > li.menu-item-908 > .sub-menu > li > a:hover {
    background: #fff !important;
    border-color: var(--kerlm-corde, #96600a) !important;
    color: var(--kerlm-corde, #96600a) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(74, 47, 24, 0.12);
  }
}

/* ---------- Bouton "Nous contacter" : le seul CTA posé directement
   dans la barre sombre du header — on lui donne plus de relief
   (dégradé + ombre teintée) et un effet de brillance au survol pour
   qu'il capte davantage l'œil que les liens de menu autour de lui. */
.site-header .gb-text-bfa1e2c0 {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #d9591f 0%, var(--kerlm-brique, #c1440e) 55%, var(--kerlm-brique-fonce, #9c3a0a) 100%) !important;
  box-shadow: 0 6px 18px rgba(193, 68, 14, 0.4);
  transition: transform 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}
.site-header .gb-text-bfa1e2c0:hover {
  /* Pas de scale() : sur du texte, ça crée un flou de rendu au
     survol (anti-aliasing sur une taille non entière). */
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(193, 68, 14, 0.5);
  color: #fff !important;
}
/* Brillance qui balaie le bouton au survol */
.site-header .gb-text-bfa1e2c0::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  z-index: -1; /* reste derrière le texte du bouton, sans quoi le
                  reflet blanc se mélangeait avec le texte blanc
                  pendant le balayage et le rendait illisible */
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.site-header .gb-text-bfa1e2c0:hover::before {
  left: 130%;
}
@media (prefers-reduced-motion: reduce) {
  .site-header .gb-text-bfa1e2c0,
  .site-header .gb-text-bfa1e2c0::before {
    transition: none;
  }
}

/* ---------- MENU MOBILE (panneau latéral, ≤1060px) ----------
   Refonte sept. 2026 (remplace l'accordéon précédent). Seuil ≤1060px
   = bascule réelle de GeneratePress vers ce menu (tablettes incluses).
   Constats : 2 seules entrées visibles ("Nos produits", "Kêr LM
   Concarneau"), 3 appuis pour atteindre un produit, sous-menus sur
   fond jaune pâle (couleur "élément ouvert" du panneau dans les
   réglages GeneratePress) en rupture avec le reste, ~70% du panneau
   vide, aucun accès au contact.
   - Les entrées de 1er niveau deviennent des titres de section
     (toujours cliquables : boutique / page magasins) et leurs
     sous-menus restent ouverts : catégories visibles d'emblée.
   - Les produits restent repliables sous chaque catégorie.
   - Tout sur le brun du panneau, 3 niveaux de crème, zones de tap
     de 48px minimum.
   - Bloc contact en bas (functions.php, "MENU MOBILE — BLOC CONTACT"). */
@media (max-width: 1060px) {

  /* Panneau : plus large que les 265px d'origine (noms longs), un
     bord de page reste visible derrière. Défile si le contenu dépasse. */
  .main-navigation.slideout-navigation,
  #generate-slideout-menu {
    width: min(88vw, 420px) !important;
    overflow-y: auto;
  }
  #generate-slideout-menu .inside-navigation {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }

  /* Neutralise le fond "élément ouvert / survolé" (jaune pâle) */
  #generate-slideout-menu .main-nav ul li > a,
  #generate-slideout-menu .main-nav ul li.sfHover > a,
  #generate-slideout-menu .main-nav ul li:hover > a,
  #generate-slideout-menu .main-nav ul li[class*="current-menu-"] > a,
  #generate-slideout-menu .main-nav ul ul,
  #generate-slideout-menu .main-nav ul li.sfHover > ul {
    background: transparent !important;
  }

  /* ----- 1er niveau : titres de section ----- */
  #generate-slideout-menu .main-nav > ul > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
    margin-bottom: 4px;
  }
  #generate-slideout-menu .main-nav > ul > li > a {
    padding: 22px 24px 6px !important;
    line-height: 1.4 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-4, #f0c060) !important;
  }
  #generate-slideout-menu .main-nav > ul > li > a > .dropdown-menu-toggle {
    display: none !important;
  }
  /* Sous-menus de 1er niveau toujours ouverts */
  #generate-slideout-menu .main-nav > ul > li > .sub-menu {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    pointer-events: auto !important;
    animation: none !important;
    box-shadow: none !important;
  }

  /* ----- 2e niveau : catégories / magasins ----- */
  #generate-slideout-menu .main-nav > ul > li > .sub-menu > li > a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 10px 0 10px 24px !important;
    line-height: 1.35 !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: 0;
    text-transform: none !important;
    color: var(--kerlm-toile, #faf6ef) !important;
  }

  /* ----- 3e niveau et plus : produits (repliables) ----- */
  #generate-slideout-menu .sub-menu .sub-menu {
    background: rgba(0, 0, 0, 0.14) !important;
    border-left: none !important;
    margin: 0 !important;
  }
  #generate-slideout-menu .sub-menu .sub-menu > li > a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 8px 0 8px 40px !important;
    line-height: 1.35 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: rgba(250, 246, 239, 0.82) !important;
  }
  #generate-slideout-menu .sub-menu .sub-menu .sub-menu {
    background: rgba(0, 0, 0, 0.12) !important;
  }
  #generate-slideout-menu .sub-menu .sub-menu .sub-menu > li > a {
    padding-left: 56px !important;
    font-size: 14.5px !important;
    color: rgba(250, 246, 239, 0.75) !important;
  }

  /* Flèches de dépliage : zone de tap 48px, couleur du texte */
  #generate-slideout-menu .sub-menu .dropdown-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 48px;
    min-height: 48px;
    padding: 0 !important;
    color: inherit !important;
  }

  /* Page en cours : repère doré (sélecteur calqué sur ceux des
     niveaux 2 et 3 ci-dessus, + .current-menu-item, pour passer
     devant leur couleur) */
  #generate-slideout-menu .main-nav > ul > li > .sub-menu > li.current-menu-item > a,
  #generate-slideout-menu .main-nav > ul > li > .sub-menu .sub-menu > li.current-menu-item > a {
    color: var(--accent-4, #f0c060) !important;
  }

  /* ----- Bloc contact (bas du panneau) ----- */
  .kerlm-slideout-footer {
    /* le conteneur du panneau centre ses enfants (align-items:center) :
       étiré sur toute la largeur, aligné sur les entrées du menu */
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    margin-top: auto;
    padding: 24px 24px calc(28px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .kerlm-slideout-footer a.kerlm-slideout-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    box-sizing: border-box;
    border-radius: 9999px;
    background: var(--kerlm-brique, #c1440e);
    color: var(--kerlm-toile, #faf6ef);
    font-family: 'PT Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 6px;
  }
  .kerlm-slideout-footer a.kerlm-slideout-cta:hover {
    background: var(--kerlm-brique-fonce, #9c3a0a);
  }
  .kerlm-slideout-footer a.kerlm-slideout-phone {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
  }
  .kerlm-slideout-footer a.kerlm-slideout-phone::before {
    content: "📞";
    font-size: 16px;
    margin-right: 10px;
  }
  .kerlm-slideout-hours {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(250, 246, 239, 0.7);
  }
  .kerlm-slideout-footer a.kerlm-slideout-account {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 15px;
    text-transform: none;
    letter-spacing: normal;
    color: var(--kerlm-toile, #faf6ef);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(250, 246, 239, 0.4);
  }
}

/* ============================================================
   CHARTE VISUELLE — KÊR LM
   ----------------------------------------------------------------
   Direction artistique validée (planche de style « Charte Kêr LM »).
   Concept : le vocabulaire du hamac (corde, tissage, nœud) et de la
   ville close de Concarneau (vague), sur la base brun/or/crème déjà
   en place — approfondie et rendue accessible (WCAG AA), pas
   remplacée. Tout le contenu/texte du site reste inchangé : cette
   section ne touche qu'à l'apparence.
   ================================================================ */

/* ---------- 1. Palette (tokens) ----------
   GeneratePress pilote une bonne partie du site via ses propres
   variables CSS (--accent, --accent-2, --base-2...). Les redéfinir
   ici une seule fois propage la charte partout où GeneratePress les
   utilise déjà (boutons par défaut, liens de contenu, fond des
   pages, icônes sociales...) sans avoir à retoucher chaque usage
   individuellement. Valeurs choisies pour rester ≥4,5:1 (texte) ou
   ≥3:1 (UI/décoratif) sur leurs fonds d'usage réels. */
:root {
  /* Marque */
  --kerlm-ecorce: #4a2f18;   /* brun profond : remplace le #5b3819 du header/footer GeneratePress dans les nouveaux éléments */
  --kerlm-encre: #241a10;    /* quasi-noir chaud, réservé aux textes qui ont besoin du maximum de contraste */
  --kerlm-corde: #96600a;    /* or — accent d'information : prix, liens, badges, dividers */
  --kerlm-corde-clair: #c9922c;
  --kerlm-brique: #c1440e;   /* terracotta — réservé aux CTA/boutons d'action, plus impactant que l'or */
  --kerlm-brique-fonce: #9c3a0a;
  --kerlm-sable: #f6ead2;    /* encadrés, badges, réassurance */
  --kerlm-toile: #faf6ef;    /* fond de page alterné, plus chaud que du blanc pur */
  --kerlm-algue: #3d6b30;    /* vert de soutien (déjà utilisé par le bouton "Nous contacter") */
  --kerlm-ligne: #e7dbc3;    /* bordures discrètes sur fond clair */

  /* --accent pilote tous les boutons par défaut de GeneratePress
     (Ajouter au panier, Choix des options, Passer la commande...) :
     on en fait le terracotta signature — plus vif que l'or, réservé
     aux boutons pour bien les distinguer du reste des accents dorés
     (prix, liens) qui restent plus discrets. --accent-2 gère le
     survol de ces mêmes éléments. */
  --accent: var(--kerlm-brique);       /* était #96600a (or), avant ça #5b9a42 (vert GeneratePress) */
  --accent-2: var(--kerlm-brique-fonce); /* survol, plus foncé que --accent */

  /* --base-2 est le fond de page par défaut de GeneratePress (blanc
     pur à l'origine) : le passer à "toile" réchauffe tout le site
     d'un coup, tout en gardant les cartes/surfaces en blanc franc
     (définies en dur en #fff), ce qui crée naturellement un léger
     relief entre le fond de page et les éléments posés dessus. */
  --base-2: var(--kerlm-toile);        /* était #ffffff */
}

/* ---------- 2. Typographie ----------
   Bricolage Grotesque (chargé depuis functions.php) prend le rôle
   de titrage sur tout le site — un dessin plus affirmé que la
   sobriété d'origine. Le corps de texte (Aleo) et l'interface/nav
   (Poppins) restent ceux déjà en place, aucun changement là-dessus. */
h1, h2, h3, h4, h5, h6,
.entry-title,
.woocommerce-loop-product__title,
.kerlm-footer-logo p ~ *,
.wc-block-cart__empty-cart__title {
  font-family: 'Bricolage Grotesque', 'Poppins', sans-serif !important;
}
/* Audit CSS (sept. 2026) : .kerlm-hero-text h2, .kerlm-section-title
   et .kerlm-product-card-body h3 retirés de la liste ci-dessus —
   classes propres à l'ancienne page magasin refondue (confirmé en
   base, mêmes révisions que .kerlm-store-page plus haut) ; les deux
   premiers étaient de toute façon redondants avec h1-h6 déjà ciblés. */

/* Étiquette "eyebrow" : petit repère en majuscules au-dessus d'un
   titre de section, dans la couleur de marque. Réutilise les
   badges/tags déjà présents (.kerlm-badge, .kerlm-tag, onsale...)
   comme référence de style plutôt que d'en inventer un nouveau. */
.kerlm-eyebrow {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kerlm-corde);
  margin-bottom: 8px;
}

/* ---------- 3. Motifs ----------
   Quatre motifs, entièrement en CSS (aucune image requise — donc
   fiables même en local sans les photos produit) : corde tressée,
   vague, tissage et nœud. Inspirés de l'objet hamac lui-même et de
   la ville close de Concarneau, pas de la marque en tant que telle. */

/* Corde tressée : remplace les séparateurs plats. */
.kerlm-rope,
.entry-content hr {
  height: 7px !important;
  border: none !important;
  border-radius: 999px;
  background:
    repeating-linear-gradient(48deg, transparent 0 3px, rgba(36,26,16,0.28) 3px 4px, transparent 4px 8px),
    repeating-linear-gradient(-48deg, transparent 0 3px, rgba(255,255,255,0.45) 3px 4px, transparent 4px 8px),
    linear-gradient(var(--kerlm-corde-clair), var(--kerlm-corde));
  box-shadow: 0 1px 0 rgba(36,26,16,0.15);
}

/* Vague : transition entre un fond sombre (header/footer) et le
   reste de la page — écho à la ville close et au port. Utilitaire
   posé en ::after sur les surfaces sombres du thème.
   Attention : ne PAS mettre "isolation: isolate" (ni z-index) sur
   .site-header lui-même — ça enfermerait le mega-menu (z-index
   99999) dans un contexte d'empilement local, et sur la page
   d'accueil le bloc sombre juste après le header (même niveau
   "auto", mais plus tard dans le DOM) passerait alors par-dessus
   tout le panneau. La vague (z-index:1) et la nav (z-index:2,
   plus bas) restent donc comparées directement au niveau global
   de la page, où le z-index 99999 du mega-menu gagne partout. */
.site-header {
  position: relative;
}
.kerlm-footer-top {
  position: relative;
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 22px;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,32 C260,64 340,4 620,26 C880,46 980,2 1200,22 L1200,60 L0,60 Z' fill='%23faf6ef'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.main-navigation {
  position: relative;
  z-index: 2;
}

/* Tissage : texture croisée très discrète (retirée du header/menu
   principal à la demande — gardée uniquement sur le pied de page). */
.kerlm-footer {
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 14px);
}

/* Nœud : puce personnalisée pour les listes de contenu (articles,
   pages, description produit) — un point cerclé de la couleur de
   marque plutôt que la puce générique du navigateur. Exclut toute
   grille de produits WooCommerce (classique .products ou en blocs
   .wc-block-grid__products / wc-block-cart-cross-sells...), qui ne
   sont pas des listes de texte — sélecteur par sous-chaîne pour
   rester valable même sur des variantes de blocs non testées ici. */
.entry-content ul:not([class*="products"]):not([class*="wc-block"]):not(.kerlm-info-cards):not(.kerlm-steps) > li,
.woocommerce-product-details__short-description ul > li,
.term-description ul > li {
  list-style: none;
  position: relative;
  padding-left: 22px;
}
.entry-content ul:not([class*="products"]):not([class*="wc-block"]):not(.kerlm-info-cards):not(.kerlm-steps) > li::before,
.woocommerce-product-details__short-description ul > li::before,
.term-description ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.65em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kerlm-corde);
  box-shadow: 0 0 0 3px rgba(150,96,10,0.14);
}

/* ---------- 4. Cartes produit : fond d'attente cohérent ----------
   Même traitement que la page "Kêr LM Concarneau" : un dégradé sable
   plutôt qu'un cadre blanc + icône cassée quand une image manque
   (cas actuel en local) ou tarde à charger (cas réel en prod). */
.woocommerce ul.products li.product .wc-product-image img,
.woocommerce div.product div.images img {
  background: linear-gradient(160deg, var(--kerlm-sable) 0%, #eeddb8 100%) !important;
}

/* ============================================
   FICHE PRODUIT — AMÉLIORATIONS
   ============================================ */

/* ---------- Correctif : débordement horizontal de la page ----------
   Sur les produits à variantes (tous les hamacs ont des coloris),
   WooCommerce insère dans le formulaire une div.reset_variations_alert
   (message "sélectionnez une option", classe screen-reader-text).
   Elle hérite ici d'une largeur de 1220 px : bien que masquée à l'œil
   (hauteur 1 px, clip), sa boîte en position absolue étire la zone
   scrollable de la page d'environ 550 px vers la droite — d'où la
   sensation de page "décalée vers la gauche" avec une barre de défilement
   horizontale. On la ramène à 1 px, conformément au motif
   screen-reader-text de WordPress. */
.woocommerce div.product form.cart .reset_variations_alert,
.woocommerce div.product .variations_form .screen-reader-text {
  width: 1px !important;
  max-width: 1px !important;
  white-space: nowrap !important;
}

/* ---------- Onglets (Description / Infos complémentaires / Avis) :
   habillage par défaut de WooCommerce remplacé par le style du site. */
.woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--kerlm-ligne, #e7dbc3) !important;
  margin-bottom: 28px !important;
}
.woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  margin: 0 28px 0 0 !important;
  padding: 0 !important;
}
.woocommerce-tabs ul.tabs li a {
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  color: #8a7a63 !important;
  padding: 0 0 14px !important;
  display: inline-block;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.woocommerce-tabs ul.tabs li a:hover {
  color: var(--kerlm-ecorce, #4a2f18) !important;
}
.woocommerce-tabs ul.tabs li.active a {
  color: var(--kerlm-ecorce, #4a2f18) !important;
  border-bottom-color: var(--accent, #c1440e);
}

/* ---------- Contenu des onglets : lisibilité & rythme ----------
   Le contenu des onglets (Description, Informations complémentaires,
   Avis). On garde la pleine largeur de la page (le bloc reste aligné
   avec l'image produit, le fil d'Ariane et les "Produits similaires"),
   et on donne au texte le même rythme typographique que le reste du
   site : titres, accroche, listes, images, liens, tableau. */

/* Détache la zone des onglets du bloc d'achat, en écho à la marge
   déjà appliquée au-dessus de "Produits similaires". */
.woocommerce div.product .woocommerce-tabs {
  margin-top: 56px;
}

/* Rythme vertical des titres de section dans la description. */
.woocommerce div.product .woocommerce-Tabs-panel h2 {
  position: relative;
  font-size: 1.55em;
  margin: 2.2em 0 0.7em;
  padding-bottom: 0.4em;
}
.woocommerce div.product .woocommerce-Tabs-panel h3 {
  font-size: 1.15em;
  margin: 1.8em 0 0.5em;
  color: var(--kerlm-ecorce, #4a2f18);
}
.woocommerce div.product .woocommerce-Tabs-panel > *:first-child {
  margin-top: 0;
}

/* Filet doré court sous chaque H2 — même accent que les dividers
   utilisés ailleurs sur le site. */
.woocommerce div.product .woocommerce-Tabs-panel h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--kerlm-corde, #96600a);
}

/* Paragraphe d'accroche : le premier paragraphe de la description
   ressort un peu (taille + contraste) sans être un titre. */
.woocommerce div.product .woocommerce-Tabs-panel--description > p:first-of-type {
  font-size: 1.1em;
  line-height: 1.75;
  color: var(--kerlm-encre, #241a10);
}

/* Corps de texte : marges de paragraphe régulières. */
.woocommerce div.product .woocommerce-Tabs-panel p {
  margin: 0 0 1.1em;
}

/* Listes : espacement entre les items (la puce "nœud" dorée est
   déjà gérée plus haut via .entry-content ul > li). */
.woocommerce div.product .woocommerce-Tabs-panel ul {
  margin: 0 0 1.2em;
}
.woocommerce div.product .woocommerce-Tabs-panel li {
  margin-bottom: 0.4em;
}

/* Images de la description (schémas de dimensions...) : même
   habillage que les visuels du site. Le fond sable sert de repli
   pendant le chargement (et en local, sans les médias). */
.woocommerce div.product .woocommerce-Tabs-panel img {
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(74, 47, 24, 0.10);
  margin: 1.5em 0;
  background: linear-gradient(160deg, var(--kerlm-sable, #f6ead2) 0%, #eeddb8 100%);
}

/* Liens dans le texte : doré souligné fin, survol terracotta. */
.woocommerce div.product .woocommerce-Tabs-panel a:not(.button) {
  color: var(--kerlm-corde, #96600a);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.woocommerce div.product .woocommerce-Tabs-panel a:not(.button):hover {
  color: var(--kerlm-brique, #c1440e);
}

/* Tableau "Informations complémentaires" : habillage propre à la
   place du tableau brut WooCommerce (lignes alternées, en-tête
   sable, bordures discrètes, coins arrondis). */
.woocommerce div.product .woocommerce-Tabs-panel .shop_attributes {
  border: 1px solid var(--kerlm-ligne, #e7dbc3);
  border-radius: 12px;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
}
.woocommerce div.product .woocommerce-Tabs-panel .shop_attributes tr:nth-child(even) {
  background: var(--kerlm-toile, #faf6ef);
}
.woocommerce div.product .woocommerce-Tabs-panel .shop_attributes th,
.woocommerce div.product .woocommerce-Tabs-panel .shop_attributes td {
  padding: 12px 16px;
  border-top: 1px solid var(--kerlm-ligne, #e7dbc3);
  line-height: 1.6;
}
.woocommerce div.product .woocommerce-Tabs-panel .shop_attributes tr:first-child th,
.woocommerce div.product .woocommerce-Tabs-panel .shop_attributes tr:first-child td {
  border-top: none;
}
.woocommerce div.product .woocommerce-Tabs-panel .shop_attributes th {
  background: var(--kerlm-sable, #f6ead2);
  color: var(--kerlm-ecorce, #4a2f18);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  width: 34%;
}
/* Valeurs d'attribut (couleurs, matière...) : liens sans soulignage
   dans le tableau — sinon une longue liste de termes devient illisible.
   Le soulignage reste sur les liens du corps de la description. */
.woocommerce div.product .woocommerce-Tabs-panel .shop_attributes a {
  text-decoration: none;
}
.woocommerce div.product .woocommerce-Tabs-panel .shop_attributes a:hover {
  text-decoration: underline;
}

/* Mobile : titres et accroche resserrés. */
@media (max-width: 768px) {
  .woocommerce div.product .woocommerce-tabs {
    margin-top: 40px;
  }
  .woocommerce div.product .woocommerce-Tabs-panel h2 {
    font-size: 1.3em;
    margin-top: 1.8em;
  }
  .woocommerce div.product .woocommerce-Tabs-panel h3 {
    font-size: 1.08em;
  }
  .woocommerce div.product .woocommerce-Tabs-panel--description > p:first-of-type {
    font-size: 1em;
  }
}

/* ---------- Badge "+X autres" (variantes couleur/taille) ----------
   Simple lien texte gris à l'origine, transformé en petite pastille
   cohérente avec les autres badges du site (.kerlm-tag, onsale...). */
.cfvsw-more-link a {
  display: inline-flex !important;
  align-items: center;
  font-family: 'Poppins', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  color: var(--kerlm-corde, #96600a) !important;
  background: var(--kerlm-sable, #f6ead2);
  border-radius: 999px;
  padding: 4px 10px !important;
  text-decoration: none !important;
  transition: background 0.15s ease;
}
.cfvsw-more-link a:hover {
  background: #eeddb8;
}

/* Audit CSS (sept. 2026) : .kerlm-product-reassurance (barre de
   réassurance sous le formulaire d'achat) retirée — cette classe
   n'apparaît dans aucun contenu publié ni aucune révision en
   base : jamais posée sur une fiche produit. */

/* ---------- "Produits similaires" et "Vous aimerez peut-être
   aussi" (upsells) : séparés visuellement de la description au lieu
   d'enchaîner directement dessus. Détachés du fond de page (carte
   blanche + ombre, comme les autres cartes du site) avec une marge
   généreuse au-dessus — et entre les deux quand les deux sont
   présents sur la même fiche. ---------- */
.woocommerce div.product .related.products,
.woocommerce div.product .up-sells.upsells.products {
  margin: 64px 0 0 !important;
  padding: 40px 32px !important;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(74, 47, 24, 0.08);
}
.woocommerce div.product .related.products > h2,
.woocommerce div.product .up-sells.upsells.products > h2 {
  text-align: center;
  margin: 0 0 28px !important;
}
@media (max-width: 600px) {
  .woocommerce div.product .related.products,
  .woocommerce div.product .up-sells.upsells.products {
    margin: 40px 0 0 !important;
    padding: 28px 16px !important;
    border-radius: 16px;
  }
}

/* ============================================================
   PRIX — GRAS + SURLIGNAGE JAUNE
   ----------------------------------------------------------------
   Tous les prix de la boutique (grille produits, fiche produit,
   panier) ressortent en gras sur un aplat jaune façon feutre
   surligneur, pour qu'ils sautent aux yeux dans la page.
   Le texte passe en --kerlm-encre (quasi noir) plutôt que le
   doré utilisé ailleurs sur le site : le doré #96600a/#c8860a
   sur un fond jaune clair ne tient pas les 4,5:1 requis en AA,
   alors que l'encre foncée les dépasse largement.
   Le surlignage cible le texte du prix (.amount) et non le bloc
   .price entier, pour que le jaune colle au texte au lieu de
   former une bande pleine largeur.
   L'ancien prix barré (article en promotion) garde son style
   discret d'origine, sans surlignage, pour que seul le nouveau
   prix ressorte. ============================================ */

:root {
  --kerlm-surlignage: #ffe066; /* jaune feutre, assez saturé pour lire "surligné" tout en restant clair sous du texte foncé */
}

/* Tous les affichages de prix WooCommerce : grille boutique, fiche
   produit, "produits similaires", blocs Gutenberg de recommandation
   (ex. "Nouveau dans la boutique" du panier vide)... Ciblée sur la
   classe .woocommerce-Price-amount elle-même (propre à WooCommerce,
   posée directement sur le texte du prix) plutôt que sur un ancêtre
   ".woocommerce" : les pages construites en blocs (panier, listes de
   recommandation) n'ont pas toujours ce wrapper classique autour du
   prix, alors que cette classe est, elle, toujours présente. */
.woocommerce-Price-amount.amount {
  font-weight: 800 !important;
  color: var(--kerlm-encre) !important;
  background: var(--kerlm-surlignage) !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
}

/* Prix barré (avant promotion) : reste discret, jamais surligné */
del .woocommerce-Price-amount.amount {
  background: none !important;
  color: #9a9187 !important;
}

/* Panier + récapitulatif de commande au checkout (blocs Gutenberg) */
.wc-block-cart-item__prices .wc-block-components-product-price,
.wc-block-components-order-summary-item .wc-block-components-product-price {
  font-weight: 800 !important;
  color: var(--kerlm-encre) !important;
  background: var(--kerlm-surlignage) !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
}

/* ============================================================
   OPTIMISATIONS — REVUE MOBILE (septembre 2026)
   ----------------------------------------------------------------
   Correctifs issus de l'audit mobile (émulation iPhone, 390px) :
   débordement horizontal du panier/commande, cibles tactiles trop
   petites (footer, swatches boutique), libellés < 12px, cartes
   info du magasin trop serrées en 2 colonnes sur petit écran,
   fonds « fixed » coûteux en mobile, carte Maps bloquée sans
   repère visuel. Aucune règle ici ne dépend d'une image manquante.
   ============================================================ */

/* ---------- Panier & commande : anti-débordement horizontal ----------
   Sur le panier vide, la grille de recommandations « Nouveau dans la
   boutique » (bloc .wc-block-grid, rendu serveur en secours tant que
   le bloc panier React n'est pas hydraté) s'affiche sans contrainte
   de largeur : chaque carte fait ~3000px → la page passe à ~3050px
   de large, scroll horizontal massif.

   Les règles ci-dessous ne sont PAS enfermées dans un @media : quand
   la page déborde à ce point, le navigateur mobile dézoome et la
   largeur de viewport rapportée grimpe (~1560px), ce qui empêche
   justement les media queries « max-width: 768px » de s'appliquer.
   Une carte produit de 3000px n'étant jamais correcte, on borne donc
   sans condition.

   - overflow-x: clip sur le conteneur du panier/commande = butée
     dure (n'ouvre pas de barre de défilement, contrairement à
     'scroll'/'auto', et sans media query).
   - min-width: 0 sur la grille et ses enfants : c'est ce qui
     autorise réellement un élément de grille/flex à rétrécir sous
     la largeur de son contenu.
   - grille responsive en minmax() plutôt qu'un nombre de colonnes
     fixe : s'adapte au nombre de colonnes selon la place, sans point
     de rupture. Panier vide : auto-fit (colonnes vides repliées) —
     sinon, sur ordinateur, ses 4 cartes de ~150px n'occupaient que
     la moitié gauche de la largeur (7 pistes créées).

   Cause racine (hydratation JS du bloc panier) à traiter en amont
   sur la prod ; ce correctif borne les dégâts côté rendu. */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.wp-block-woocommerce-cart {
  overflow-x: clip;
}
.wp-block-woocommerce-cart,
.wc-block-grid,
.wc-block-grid__products,
.wc-block-grid__product,
.wc-block-cart-cross-sells,
.wc-block-cart-cross-sells__products,
.wc-block-cart-cross-sells-products {
  max-width: 100% !important;
  min-width: 0 !important;
}
.wc-block-grid__products,
.wc-block-cart-cross-sells-products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 20px !important;
}
/* Grille du panier vide (toujours 4 produits) : colonnes vides repliées,
   et marge négative de 8px (style WooCommerce) annulée — elle décalait
   la grille hors du conteneur, qui rognait le bord gauche des cartes… */
.wc-block-grid.has-4-columns .wc-block-grid__products {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* …et sa bordure transparente de 8px par carte (même système
   d'espacement WooCommerce, remplacé ici par le gap de la grille) :
   elle laissait une bande blanche de chaque côté de la photo. */
.wc-block-grid.has-4-columns .wc-block-grid__product {
  border: 0 !important;
}
.wc-block-grid__product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}
.wc-block-grid__product > *,
.wc-block-grid__product-image,
.wc-block-grid__product-title,
.wc-block-grid__product-price,
.wc-block-grid__product-add-to-cart,
.wc-block-grid__product-link {
  max-width: 100% !important;
  min-width: 0 !important;
}
.wc-block-grid__product-image img,
.wc-block-grid__product img,
.wc-block-cart-cross-sells img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}

/* ---------- Pied de page : cibles tactiles ----------
   Les liens du pied de page (navigation, mentions légales) et les
   icônes réseaux sociaux étaient trop petits / trop rapprochés
   pour un doigt (hauteur ~17-18px, < 44px recommandé). On agrandit
   la zone cliquable sans changer l'apparence du texte. */
@media (max-width: 900px) {
  .kerlm-footer-col ul li { margin-bottom: 0; }
  .kerlm-footer-col ul li a {
    display: inline-block;
    padding: 12px 0;
  }
  .kerlm-footer-legal { gap: 0 20px; }
  .kerlm-footer-legal a {
    display: inline-block;
    padding: 12px 0;
  }
  .kerlm-footer-social a {
    width: 44px;
    height: 44px;
    font-size: 15px;
  }
}

/* ---------- Fiche contact : lisibilité des libellés ----------
   Intitulés des cartes (MAGASIN, HORAIRES…) : 11px → 12px.
   Note grise : #999 sur blanc = 2,85:1 (sous le seuil AA de
   4,5:1) → gris conforme, comme les autres correctifs de ce
   fichier. Le <style> inline de la page reste inchangé ;
   !important nécessaire pour primer dessus. */
.kerlm-contact-info-card .ci-label { font-size: 12px !important; }
.kerlm-contact-info-card .ci-note { color: #6b6b6b !important; }

/* Carte Google Maps : fond de secours pour ne jamais laisser un
   rectangle blanc "vide" pendant le chargement (ou si la carte ne
   charge pas du tout, comme ici en local sans accès internet). */
.kerlm-contact-map-wrap {
  background: var(--kerlm-sable, #f6ead2) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* ---------- PAGE CONTACT — CARTE AU TOUCHER (29 sept. 2026) ----------
   Vignette posée à la place de la carte OpenStreetMap (functions.php,
   même titre de section) : même hauteur que la carte (320px, <style>
   de la page) pour que rien ne bouge au toucher. Quadrillage léger
   façon plan, repère brique, libellé en pilule comme les boutons. */
.kerlm-map-facade {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 320px;
  padding: 16px;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  background-color: var(--kerlm-sable, #f6ead2);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(150, 96, 10, 0.10) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(150, 96, 10, 0.10) 39px 40px);
}
.kerlm-map-facade__pin {
  width: 34px;
  height: 34px;
  border-radius: 50% 50% 50% 0;
  background: var(--kerlm-brique, #c1440e);
  transform: rotate(-45deg);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.kerlm-map-facade__pin::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin: 11px;
  border-radius: 50%;
  background: var(--kerlm-toile, #faf6ef);
}
.kerlm-map-facade__label {
  margin-top: 4px;
  padding: 12px 28px;
  min-height: 48px;
  box-sizing: border-box;
  border-radius: 9999px;
  background: var(--kerlm-brique, #c1440e);
  color: var(--kerlm-toile, #faf6ef);
  font-family: 'PT Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.kerlm-map-facade:hover .kerlm-map-facade__label {
  background: var(--kerlm-brique-fonce, #9c3a0a);
}
.kerlm-map-facade:focus-visible {
  outline: 3px solid var(--kerlm-brique, #c1440e);
  outline-offset: -3px;
}
.kerlm-map-facade__address {
  color: var(--kerlm-encre, #241a10);
  font-size: 15px;
}

/* Audit CSS (sept. 2026) : la correction "cartes info page
   magasin" (.kerlm-info-cards / .kerlm-info-card, avec ou sans
   préfixe .kerlm-store-page) retirée — ces classes n'existent
   plus dans aucun contenu publié (même page refondue que pour
   .kerlm-store-page, voir plus haut). */

/* ---------- Boutique : pastilles de coloris (swatches) ----------
   Le style du badge « +X autres » et le masquage du lien « Clear »
   sont déjà gérés plus haut (voir « Variantes couleur (swatches)
   sur la carte produit », ~l.211, et le plugin lui-même). Ici on
   se limite à deux ajustements tactiles pour le mobile :
   - pastilles portées de 35px (style inline du plugin) à 40px ;
   - « +X autres » : +1px et un peu d'air vertical pour un appui
     plus sûr, sans le rendre plus voyant que voulu. */
@media (max-width: 768px) {
  .cfvsw-shop-container .cfvsw-swatches-option {
    min-width: 40px !important;
    min-height: 40px !important;
  }
  .woocommerce ul.products li.product .cfvsw-more-link a {
    font-size: 11px !important;
    padding: 4px 0 !important;
  }
}

/* ---------- Blog : lien « En savoir plus » ----------
   Zone de tap portée à 44px de haut sans changer le style visuel. */
@media (max-width: 768px) {
  .read-more,
  a.read-more,
  .entry-summary .read-more,
  .dynamic-entry-content .read-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 0;
  }
}

/* ---------- Fonds de section « fixed » : défilement normal en mobile ----------
   Les sections hero GenerateBlocks utilisent background-attachment:
   fixed, parfois avec DEUX images plein cadre empilées. En mobile
   c'est source de saccades au scroll (et souvent ignoré par iOS).
   On repasse en défilement normal sur mobile. */
@media (max-width: 768px) {
  [class*="gb-element-"] {
    background-attachment: scroll !important;
  }
}

/* Audit CSS (sept. 2026) : la règle "carte Google Maps bloquée
   avant consentement" (.cmplz-blocked-content-notice) est
   retirée — plus aucune page du site n'embarque d'iframe Google
   Maps ni de classe Complianz aujourd'hui (vérifié sur les 27
   pages du site) ; à réintroduire si une carte intégrée revient
   sur une page (ex. magasin). */

/* ============================================================
   GUIDE DES TAILLES DE HAMAC — [kerlm_guide_hamac]
   ----------------------------------------------------------------
   Outil interactif remplaçant le texte "[EMPLACEMENT DU
   FORMULAIRE...]" de la page catégorie Hamac (sept. 2026). Rendu
   entièrement en JS (voir functions.php) dans un unique conteneur
   .kerlm-hamac-guide.
   Fond sombre volontairement tranché (repris du bloc "Profitez d'un
   instant de détente" de l'accueil, --kerlm-ecorce) plutôt que le
   même blanc/sable que le reste de la page : demande explicite
   pour que l'outil se distingue sans ambiguïté du texte éditorial
   autour de lui, plutôt qu'une énième carte qui s'y fond. Les
   cartes produit à l'intérieur restent blanches (lisibilité des
   photos/prix), ce qui crée un contraste "îlots clairs sur fond
   sombre" à l'intérieur même du bloc. */

.kerlm-hamac-guide {
  background: linear-gradient(155deg, var(--kerlm-ecorce, #4a2f18) 0%, #2c1c0f 100%);
  border-radius: 20px;
  box-shadow: 0 10px 34px rgba(36, 26, 16, 0.28);
  padding: 36px 40px;
  margin: 8px 0;
  max-width: 720px;
}
.kerlm-guide-eyebrow {
  display: block;
  margin: 0 0 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-4, #f0c060);
}
@media (max-width: 600px) {
  .kerlm-hamac-guide { padding: 24px 20px; border-radius: 16px; }
}

.kerlm-guide-back {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 20px;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-4, #f0c060);
  cursor: pointer;
}
.kerlm-guide-back:hover { text-decoration: underline; }

.kerlm-guide-question {
  margin: 0 0 24px;
  font-size: 1.3em;
  color: #fff;
}

.kerlm-guide-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kerlm-guide-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 16px 20px;
  /* !important nécessaire : GeneratePress a une règle plus
     spécifique que la mienne (`button:not(.menu-toggle)`, un
     sélecteur "élément + :not(classe)" qui pèse plus lourd qu'une
     simple classe) forçant `font-family: inherit` sur tous les
     boutons du site — sans ça, ce bouton hérite la police de
     paragraphe (Aleo, serif) au lieu de Poppins. */
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.kerlm-guide-option::after {
  content: "→";
  flex-shrink: 0;
  color: var(--accent-4, #f0c060);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.kerlm-guide-option:hover,
.kerlm-guide-option:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--accent-4, #f0c060);
  transform: translateY(-1px);
}
.kerlm-guide-option:hover::after,
.kerlm-guide-option:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

.kerlm-guide-result-message {
  background: rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--accent-4, #f0c060);
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.7;
  color: #fdf6ec;
}

.kerlm-guide-secondary-label {
  color: rgba(255, 255, 255, 0.75);
}

.kerlm-guide-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.kerlm-guide-cards--secondary {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 480px) {
  .kerlm-guide-cards--primary { grid-template-columns: 1fr; }
  .kerlm-guide-cards--secondary { grid-template-columns: 1fr; }
}

.kerlm-guide-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--kerlm-ligne, #e7dbc3);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.kerlm-guide-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}
.kerlm-guide-card__image {
  display: block;
  line-height: 0;
  overflow: hidden;
  background: linear-gradient(160deg, var(--kerlm-sable, #f6ead2) 0%, #eeddb8 100%);
}
.kerlm-guide-card--primary .kerlm-guide-card__image img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}
.kerlm-guide-card--secondary .kerlm-guide-card__image img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  display: block;
}
.kerlm-guide-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
}
.kerlm-guide-card--secondary .kerlm-guide-card__body {
  padding: 10px 12px;
}
.kerlm-guide-card__name {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--kerlm-ecorce, #4a2f18);
}
.kerlm-guide-card--secondary .kerlm-guide-card__name {
  font-size: 12px;
}
.kerlm-guide-card__price {
  font-size: 14px;
}
.kerlm-guide-card--link .kerlm-guide-card__body {
  justify-content: center;
  min-height: 60px;
}
.kerlm-guide-card--link .kerlm-guide-card__name {
  color: var(--kerlm-corde, #96600a);
}

.kerlm-guide-restart {
  display: inline-flex;
  align-items: center;
  background: var(--accent-4, #f0c060);
  border: 2px solid var(--accent-4, #f0c060);
  border-radius: 9999px;
  padding: 10px 24px;
  font-family: 'PT Sans', sans-serif !important;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--kerlm-encre, #241a10);
  cursor: pointer;
  transition: all 0.2s ease;
}
.kerlm-guide-restart:hover {
  background: transparent;
  color: var(--accent-4, #f0c060);
}

/* ---------- Liens vers le guide, ailleurs sur la page ----------
   .kerlm-guide-cta : gros bouton d'appel en haut de la page
   catégorie (dans la description de catégorie WooCommerce), qui
   redescend vers le guide (#kerlm-guide-hamac). .kerlm-guide-jump :
   lien plus discret, en ligne dans un paragraphe (section "Comment
   installer correctement un hamac"), même destination. */
/* Ciblé par [href] plutôt que par la classe .kerlm-guide-cta :
   le champ "description de catégorie" WooCommerce passe par un
   filtre de sécurité WordPress qui retire l'attribut class des
   liens à l'enregistrement (mais garde href) — la classe qu'on
   pose ici depuis l'admin ne survit jamais, autant ne pas en
   dépendre. Portée à .term-description pour ne pas aussi
   styliser le lien de remontée plus discret (.kerlm-guide-jump,
   même ancre #kerlm-guide-hamac) posé plus bas sur la page. */
.term-description a[href="#kerlm-guide-hamac"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  background: var(--kerlm-brique, #c1440e);
  color: #fff !important;
  border-radius: 9999px;
  padding: 14px 28px;
  font-family: 'PT Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.term-description a[href="#kerlm-guide-hamac"]::after {
  content: "↓";
}
.term-description a[href="#kerlm-guide-hamac"]:hover {
  background: var(--kerlm-brique-fonce, #9c3a0a);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.kerlm-guide-jump {
  color: var(--kerlm-corde, #96600a) !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kerlm-guide-jump:hover {
  color: var(--kerlm-brique, #c1440e) !important;
}

/* ---------- Page catégorie Hamac : "... voir plus" classique ----------
   Repris depuis zéro à la demande : le fondu + bouton "carte" ne
   se lisait toujours pas clairement. Retour au patron standard du
   web (Facebook, Instagram...) : le texte est tronqué net à
   quelques lignes (line-clamp, avec les "…" natifs du navigateur à
   la coupure — aucune ambiguïté possible sur le fait qu'il manque
   du texte), suivi d'un simple lien "Voir plus" en ligne, sans
   fond ni bordure ni pilule. */
.kerlm-hamac-more-wrap {
  margin-top: 2.5em;
  margin-bottom: 2.5em;
}
.kerlm-hamac-more.is-collapsed {
  position: relative;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
/* Léger fondu sur la toute dernière ligne visible, en plus des "…"
   du line-clamp — renforce visuellement l'idée que le texte
   continue, sans revenir à un gros dégradé façon carte. */
.kerlm-hamac-more.is-collapsed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.1em;
  background: linear-gradient(to bottom, rgba(250, 246, 239, 0) 0%, var(--kerlm-toile, #faf6ef) 88%);
  pointer-events: none;
}
.kerlm-hamac-more-toggle {
  display: inline-block;
  margin-top: 10px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px;
  font-weight: 700;
  color: var(--kerlm-corde, #96600a);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kerlm-hamac-more-toggle:hover {
  color: var(--kerlm-brique, #c1440e);
}

/* ---------- Page catégorie Chaise hamac : FAQ dépliable ----------
   Chaque question (h3 + paragraphe de réponse) devient un
   <details>/<summary> indépendant (voir functions.php), sur le
   même principe que l'accordéon des catégories produit de la
   fiche Cuir — repris ici sans le badge numéroté (une FAQ n'a pas
   d'ordre à mettre en avant), juste un chevron qui pivote. */
.kerlm-faq-item {
  border-bottom: 1px solid var(--kerlm-ligne, #e7dbc3);
  padding: 16px 0;
}
.kerlm-faq-item:first-of-type {
  border-top: 1px solid var(--kerlm-ligne, #e7dbc3);
}
.kerlm-faq-item summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  list-style: none;
  font-family: 'Bricolage Grotesque', 'Poppins', sans-serif;
  font-size: 1.05em;
  font-weight: 700;
  color: var(--kerlm-ecorce, #4a2f18);
}
.kerlm-faq-item summary::-webkit-details-marker {
  display: none;
}
.kerlm-faq-item summary::after {
  content: "⌄";
  flex-shrink: 0;
  font-size: 20px;
  color: var(--kerlm-corde, #96600a);
  transition: transform 0.2s ease;
}
.kerlm-faq-item[open] summary::after {
  transform: rotate(180deg);
}
.kerlm-faq-item p {
  margin: 12px 0 0;
  color: #444;
  line-height: 1.7;
}
@media (max-width: 600px) {
  .kerlm-faq-item summary {
    font-size: 1em;
  }
}
/* ============================================
   CATÉGORIES PRODUITS — MOBILE (sept. 2026)
   Pages catégories (.tax-product_cat) et page Boutique
   (.post-type-archive-product, même gabarit). Audit mobile 390px :
   contenu limité à 298px de large (46px de marge de chaque côté),
   description + bouton guide sur ~600px avant le 1er produit (page
   Hamac : produits à ~900px, sous le premier écran), tri et nombre de
   résultats empilés sur ~120px, cartes produit sur 1 colonne de 452px
   de haut dont ~60px de vide avant le bouton.
   Marges latérales, fil d'Ariane et habillage compact des cartes
   produit étendus ensuite aux fiches produit (.single-product, voir
   "FICHES PRODUIT — MOBILE" plus bas).
   ============================================ */
@media (max-width: 768px) {

  /* ---------- Largeur utile ----------
     Le réglage de conteneur GeneratePress ("one-container", padding
     60px 30px sur mobile) s'ajoutait au padding de l'article (16px) :
     46px perdus de chaque côté et ~80px de vide sous le header. On ne
     garde que les 16px de l'article.
     Posée d'abord pour les catégories et fiches produit, puis étendue
     à TOUT le site (sept. 2026) : pages magasins, panier, commande,
     mon compte, pages légales avaient le même défaut (contenu à 298px
     sur un écran de 390px). Sans effet sur les pages déjà en pleine
     largeur (contact, accueil), dont le conteneur n'a pas de padding. */
  body.one-container .site-content {
    padding: 0 0 24px !important;
  }

  /* ---------- Fil d'Ariane : zone de tap ----------
     Liens de 14px de haut. Zone portée à ~40px par du padding
     compensé en marge négative : aucun changement visuel. */
  :is(.tax-product_cat, .post-type-archive-product, .single-product) .woocommerce-breadcrumb {
    font-size: 13px !important;
  }
  :is(.tax-product_cat, .post-type-archive-product, .single-product) .woocommerce-breadcrumb a {
    display: inline-block;
    padding: 12px 4px;
    margin: -12px -4px;
  }

  /* ---------- Description de catégorie ----------
     Paragraphes regroupés par functions.php dans .kerlm-desc-more,
     replié à 4 lignes (même principe que .kerlm-hamac-more). Fondu
     dans la couleur de fond de l'encadré (#fdf6ec). */
  :is(.tax-product_cat, .post-type-archive-product) .term-description {
    font-size: 15px !important;
    line-height: 1.65 !important;
    padding: 14px 16px !important;
    margin-bottom: 16px !important;
  }
  .kerlm-desc-more.is-collapsed {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }
  .kerlm-desc-more.is-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.65em;
    background: linear-gradient(to bottom, rgba(253, 246, 236, 0) 0%, #fdf6ec 88%);
    pointer-events: none;
  }
  .kerlm-desc-more > p:last-child { margin-bottom: 0; }
  .kerlm-desc-toggle {
    margin-top: 4px !important;
    min-height: 44px;
    font-size: 14px !important;
  }
  /* Bouton "Trouvez la taille de hamac idéale…" : texte long en
     majuscules sur 4 lignes dans une pilule de 130px de haut. Casse
     normale, pleine largeur, coins arrondis adaptés au multi-ligne. */
  .term-description a[href="#kerlm-guide-hamac"] {
    display: flex;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    padding: 12px 18px;
    border-radius: 14px;
    font-size: 15px;
    line-height: 1.35;
    text-transform: none;
    text-align: left;
  }
  .term-description p:has(> a[href="#kerlm-guide-hamac"]) {
    margin-bottom: 0;
  }

  /* ---------- Barre "résultats + tri" sur une ligne ---------- */
  :is(.tax-product_cat, .post-type-archive-product) .wc-columns-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
  }
  :is(.tax-product_cat, .post-type-archive-product) .wc-columns-container > * {
    flex: 0 0 100%;
    order: 3;
  }
  :is(.tax-product_cat, .post-type-archive-product) .wc-columns-container > .woocommerce-notices-wrapper {
    order: 0;
  }
  :is(.tax-product_cat, .post-type-archive-product) .wc-columns-container > .woocommerce-result-count {
    order: 1;
    flex: 1 1 auto;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    color: #6b6b6b;
  }
  :is(.tax-product_cat, .post-type-archive-product) .wc-columns-container > .woocommerce-ordering {
    order: 2;
    flex: 0 1 190px;
    margin: 0 !important;
  }
  :is(.tax-product_cat, .post-type-archive-product) .woocommerce-ordering select {
    width: 100%;
    min-height: 44px;
    font-size: 14px;
  }
  :is(.tax-product_cat, .post-type-archive-product) .wc-columns-container > ul.products {
    margin-top: 16px !important;
    margin-bottom: 40px !important; /* respiration avant le texte de bas de page */
  }

  /* ---------- Grille produits : 2 colonnes ----------
     (la règle générale de la section "WOOCOMMERCE — CARTES PRODUITS"
     passe à 1 colonne sous 600px ; exception pour ces pages.) Photo
     carrée au lieu d'une bande de 190px de haut, textes resserrés,
     et le bouton calé en bas de carte pour que les boutons de 2
     cartes voisines soient alignés. */
  body:is(.tax-product_cat, .post-type-archive-product) ul.products.columns-3,
  body:is(.tax-product_cat, .post-type-archive-product) ul.products.columns-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  /* min-height:0 — la hauteur mini commune de 452px (section
     "WOOCOMMERCE — CARTES PRODUITS", pensée pour 1 carte par ligne)
     laissait un grand vide dans les cartes sans nuancier. En grille
     2 colonnes, les 2 cartes d'une même ligne sont de toute façon
     étirées à la même hauteur. */
  body:is(.tax-product_cat, .post-type-archive-product, .single-product, .home) ul.products li.product {
    display: flex !important;
    flex-direction: column;
    min-height: 0 !important;
  }
  body:is(.tax-product_cat, .post-type-archive-product, .single-product, .home) ul.products li.product .woocommerce-loop-product__link {
    margin-bottom: 0 !important;
  }
  /* Cadre carré porté par le conteneur (et non par l'image) : la
     hauteur ne dépend pas du chargement de la photo — une image
     "lazy" pas encore chargée reçoit sinon la taille provisoire que
     WordPress lui attribue (3000×1500) et étire la carte. */
  body:is(.tax-product_cat, .post-type-archive-product, .single-product, .home) ul.products li.product .inside-wc-product-image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }
  body:is(.tax-product_cat, .post-type-archive-product, .single-product, .home) ul.products li.product .wc-product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
  body:is(.tax-product_cat, .post-type-archive-product, .single-product, .home) ul.products li.product .woocommerce-loop-product__title {
    padding: 10px 10px 2px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
  }
  /* Fourchette de prix ("219,00 € – 269,00 €") trop large pour une
     demi-colonne : elle passe sur 2 lignes, mais le lien de la carte
     a un line-height:0 qui superposait les lignes (1er prix rogné).
     Interligne rétabli, chaque montant reste d'un seul tenant. */
  body:is(.tax-product_cat, .post-type-archive-product, .single-product, .home) ul.products li.product .price {
    padding: 0 10px 8px !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
  }
  body:is(.tax-product_cat, .post-type-archive-product, .single-product, .home) ul.products li.product .price .amount {
    white-space: nowrap;
  }
  body:is(.tax-product_cat, .post-type-archive-product, .single-product, .home) ul.products li.product .cfvsw_variations_form {
    padding: 0 10px 8px !important;
    margin-top: 4px !important;
  }
  body:is(.tax-product_cat, .post-type-archive-product, .single-product, .home) ul.products li.product .cfvsw-shop-container .cfvsw-swatches-option {
    min-width: 36px !important;
    min-height: 36px !important;
  }
  body:is(.tax-product_cat, .post-type-archive-product, .single-product, .home) ul.products li.product .cfvsw-more-link a {
    font-size: 12px !important;
  }
  body:is(.tax-product_cat, .post-type-archive-product, .single-product, .home) ul.products li.product .button {
    margin: auto 10px 12px !important;
    width: auto !important;
    padding: 10px 8px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }
}
/* Desktop : description affichée en entier, lien de repli inutile. */
@media (min-width: 769px) {
  .kerlm-desc-toggle {
    display: none !important;
  }
}

/* ============================================
   FICHES PRODUIT — MOBILE (sept. 2026)
   Audit mobile 390px (hamac, chaise hamac, supports) : contenu limité
   à 298px (marges : voir "CATÉGORIES PRODUITS — MOBILE", étendue aux
   fiches), photo en bande de 298×260 (photos verticales très
   recadrées), pastilles de couleur de 70px sur 4 rangées (~380px),
   quantité et bouton panier sur 2 lignes, onglets empilés sur 3
   lignes, produits suggérés en colonne (1000 à 1500px chacun).
   Desktop inchangé.
   ============================================ */
@media (max-width: 768px) {

  /* ---------- Photo produit : cadre carré ----------
     Remplace la bande de 260px de haut (section "WOOCOMMERCE — PAGE
     PRODUIT UNIQUE"). Cadre porté par le lien de l'image, pour ne pas
     dépendre du chargement de la photo (même principe que les cartes
     des catégories). */
  .woocommerce div.product div.images {
    margin-bottom: 16px !important;
  }
  .single-product .woocommerce-product-gallery__image > a {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 14px;
  }
  .woocommerce.single-product div.product div.images .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  /* Loupe (plein écran) : zone de tap 36 → 44px */
  .single-product .woocommerce-product-gallery__trigger {
    width: 44px !important;
    height: 44px !important;
  }

  /* ---------- Titre, prix, description courte : rythme resserré ---------- */
  .single-product div.product .product_title {
    margin-bottom: 6px !important;
  }
  .woocommerce.single-product div.product p.price {
    margin-bottom: 12px !important;
    font-size: 1.6em !important;
  }
  .woocommerce.single-product div.product .woocommerce-product-details__short-description {
    margin-bottom: 16px !important;
  }

  /* ---------- Choix des variantes ----------
     Pastilles 70px (réglage de l'extension pour la fiche produit) →
     52px : 5 par rangée au lieu de 3 (10 coloris = 2 rangées au lieu
     de 4), toujours au-dessus des 44px recommandés au doigt.
     L'intitulé ("Couleur", "Taille"), masqué, est réaffiché au-dessus
     des pastilles : il dit clairement ce qu'on choisit. */
  .single-product .cfvsw-product-container .cfvsw-swatches-option {
    min-width: 52px !important;
    min-height: 52px !important;
  }
  .woocommerce.single-product div.product table.variations,
  .woocommerce.single-product div.product table.variations tbody,
  .woocommerce.single-product div.product table.variations tr,
  .woocommerce.single-product div.product table.variations td.value {
    display: block !important;
    width: 100% !important;
  }
  .woocommerce.single-product div.product table.variations {
    margin-bottom: 4px !important;
  }
  .woocommerce.single-product div.product table.variations th.label {
    display: block !important;
    padding: 0 0 6px !important;
    text-align: left;
  }
  .woocommerce.single-product div.product table.variations th.label label {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--kerlm-ecorce, #4a2f18);
  }
  .woocommerce.single-product div.product table.variations td.value {
    padding: 0 0 12px !important;
  }
  /* "Effacer" (réinitialiser le choix) : zone de tap agrandie */
  .single-product .reset_variations {
    display: inline-block;
    padding: 10px 0;
  }

  /* ---------- Quantité + "Ajouter au panier" sur une ligne ---------- */
  .woocommerce.single-product div.product .woocommerce-variation-add-to-cart,
  .woocommerce.single-product div.product form.cart:not(.variations_form) {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  /* Clearfix (::before/::after) du formulaire : devenus des éléments
     de la ligne flex, ils ajoutaient un écart de 10px avant le bouton
     (bouton "Disponible en magasin" décalé). */
  .woocommerce.single-product div.product form.cart::before,
  .woocommerce.single-product div.product form.cart::after,
  .woocommerce.single-product div.product .woocommerce-variation-add-to-cart::before,
  .woocommerce.single-product div.product .woocommerce-variation-add-to-cart::after {
    display: none !important;
  }
  .woocommerce.single-product div.product form.cart div.quantity {
    flex: 0 0 auto;
    margin: 0 !important;
  }
  .woocommerce.single-product div.product form.cart div.quantity .minus,
  .woocommerce.single-product div.product form.cart div.quantity .plus,
  .woocommerce.single-product div.product form.cart div.quantity .qty {
    width: 44px !important;
    min-height: 52px !important;
    height: 52px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center;
  }
  .woocommerce.single-product div.product form.cart .single_add_to_cart_button {
    flex: 1 1 0 !important;
    width: auto !important;
    min-height: 52px !important;
    padding: 12px 16px !important;
  }

  /* ---------- UGS / catégorie / étiquettes : compact ---------- */
  .single-product div.product .product_meta {
    padding-top: 14px !important;
    font-size: 13px !important;
    line-height: 1.6;
  }

  /* ---------- Onglets : une ligne défilable ----------
     Empilés verticalement sur 3 lignes (~140px) par la feuille mobile
     de GeneratePress. Remis en ligne ; si les 3 intitulés ne tiennent
     pas, la ligne défile au doigt. */
  .woocommerce.single-product .woocommerce-tabs ul.tabs {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 24px !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    margin-bottom: 20px !important;
  }
  /* "Avis" sort de l'écran à droite : léger fondu sur le bord droit
     pour signaler qu'il reste un onglet en faisant glisser. */
  .woocommerce.single-product .woocommerce-tabs ul.tabs {
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
    mask-image: linear-gradient(to right, #000 85%, transparent);
    padding-right: 24px !important;
  }
  .woocommerce.single-product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
    display: none;
  }
  .woocommerce.single-product .woocommerce-tabs ul.tabs li {
    flex: 0 0 auto;
    width: auto !important;
    margin: 0 !important;
  }
  .woocommerce.single-product .woocommerce-tabs ul.tabs li a {
    padding: 12px 0 !important;
    white-space: nowrap;
  }

  /* ---------- Produits suggérés : rangées défilables ----------
     "Vous aimerez peut-être aussi…" et "Produits similaires" : cartes
     en colonne de 452px chacune → rangée qui défile au doigt, carte
     suivante visible en partie (signale le défilement), aimantation
     carte par carte. Habillage compact des cartes : règles
     body:is(…, .single-product) ul.products li.product de la section
     "CATÉGORIES PRODUITS — MOBILE". */
  .single-product :is(.related, .up-sells) ul.products {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    gap: 12px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    /* Déborde jusqu'aux bords de la carte blanche (padding 16px) :
       largeur explicite, la liste ayant sinon width:100% qui annule
       l'effet de la marge négative à droite. */
    width: calc(100% + 32px) !important;
    max-width: none !important;
    margin: 0 -16px !important;
    padding: 4px 16px 12px !important;
  }
  .single-product :is(.related, .up-sells) ul.products::before,
  .single-product :is(.related, .up-sells) ul.products::after {
    display: none !important;
  }
  .single-product :is(.related, .up-sells) ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    scroll-snap-align: start;
  }
  .woocommerce div.product :is(.related.products, .up-sells.upsells.products) > h2 {
    margin-bottom: 16px !important;
    font-size: 20px !important;
  }
}

/* ============================================
   PAGES MAGASINS & PIED DE PAGE — MOBILE (sept. 2026)
   ============================================ */

/* ---------- Fiches magasin : téléphone et adresse cliquables ----------
   Liens ajoutés au rendu par functions.php ("PAGES MAGASINS —
   TÉLÉPHONE ET ADRESSE CLIQUABLES"). Même texte qu'avant, souligné
   doré pour signaler qu'on peut appuyer (appel / itinéraire). */
.gb-element-36abffe5 p a.kerlm-store-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #c8860a;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.gb-element-36abffe5 p a.kerlm-store-link:hover {
  color: var(--kerlm-brique, #c1440e);
}

/* ---------- Page Magasin de cuir : accordéon d'un seul tenant ----------
   Chaque élément de l'accordéon recevait l'espacement générique entre
   blocs (2em, section "Rythme vertical" en haut du fichier) : ~50px
   de vide entre deux lignes d'une même liste. Les éléments se suivent,
   séparés par leur seul filet. */
.entry-content > .kerlm-cuir-accordion-item + .kerlm-cuir-accordion-item {
  margin-top: 0;
}

@media (max-width: 768px) {
  /* ---------- Fiches d'infos pratiques compactes ----------
     4 cartes de ~140px (icône au-dessus du libellé) = ~590px, presque
     un écran pour 4 infos. Icône passée sur la ligne du libellé,
     marges internes resserrées : ~360px au total. */
  .gb-element-36abffe5 > div {
    padding: 14px 16px !important;
  }
  .gb-element-36abffe5 h2::before {
    display: inline-block;
    font-size: 16px;
    margin: 0 8px 0 0;
    vertical-align: -2px;
    letter-spacing: 0;
  }
  .gb-element-36abffe5 h2 {
    margin-bottom: 4px !important;
  }
}

/* ---------- Pied de page mobile : 2 colonnes ----------
   Sur une seule colonne, le pied de page faisait ~960px. "Navigation"
   et "Notre magasin" passent côte à côte ; logo et bloc Contact
   gardent toute la largeur. Zones de tap des liens inchangées. */
@media (max-width: 540px) {
  .kerlm-footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 28px 16px;
    padding: 36px 20px 20px;
  }
  .kerlm-footer-logo,
  .kerlm-footer-top > .kerlm-footer-col:last-child {
    grid-column: 1 / -1;
  }
  .kerlm-footer-logo img {
    width: 150px;
    margin-bottom: 12px;
  }
  .kerlm-footer-col h4 {
    margin-bottom: 8px !important;
  }
}

/* ============================================
   PANIER & COMMANDE — CORRECTIFS (sept. 2026)
   Blocs WooCommerce Panier / Validation de commande.
   ============================================ */

/* ---------- Champs à intitulé flottant (toutes tailles d'écran) ----------
   Les champs de la page de commande affichent leur intitulé DANS le
   champ, en petit en haut une fois rempli ("Adresse e-mail", "Pays/
   Région"…). La règle générale des formulaires (section
   "FORMULAIRES", padding 10px 14px !important) écrasait l'espace que
   WooCommerce réserve en haut du champ pour cet intitulé : le texte
   saisi (et "France" dans la liste des pays) venait s'afficher
   par-dessus l'intitulé. On rend cet espace. */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="password"],
.wc-blocks-components-select .wc-blocks-components-select__select {
  padding: 22px 14px 6px !important;
  min-height: 54px;
  line-height: 1.4 !important;
}

/* ---------- Cartes vides dans les totaux ----------
   Les emplacements "Frais" et "Remise" (vides tant qu'il n'y a ni
   frais ni code promo) et la zone réservée aux extensions recevaient
   l'habillage "carte" des totaux (fond blanc, padding 24px) : cartes
   blanches vides sous le total du panier et dans le résumé de
   commande. Masquées tant qu'elles n'ont rien à afficher. */
.wc-block-components-totals-wrapper:empty,
.wc-block-components-totals-wrapper.slot-wrapper:not(:has(:is(p, span, a, button, input, img, svg, table, li))) {
  display: none !important;
}

/* ---------- Bouton "Commander" ----------
   Seul bouton à coins droits du site (0px) : même pilule que
   "Valider la commande" du panier. */
.wc-block-components-checkout-place-order-button {
  border-radius: 9999px !important;
  min-height: 54px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

/* ============================================
   BLOG VIDE, MON COMPTE, FORMULAIRE BREVO (sept. 2026)
   ============================================ */

/* ---------- Page Blog sans article ----------
   Message ajouté par functions.php ("BLOG VIDE") ; la carte vide du
   modèle d'article GeneratePress (lien "En savoir plus" vers "#")
   est masquée tant qu'aucun article n'est publié. */
.kerlm-blog-empty .dynamic-content-template {
  display: none !important;
}
/* Colonne latérale (vide) de la page Blog : le message restait
   décentré dans les 2/3 gauche de la page sur desktop. */
.kerlm-blog-empty #right-sidebar {
  display: none !important;
}
.kerlm-blog-empty #primary {
  width: 100% !important;
  float: none !important;
}
.kerlm-blog-empty-message {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 20px 56px;
  text-align: center;
}
.kerlm-blog-empty-message h1 {
  margin: 0 0 12px;
  font-size: clamp(26px, 6vw, 38px);
  line-height: 1.2;
  color: #422c18;
}
.kerlm-blog-empty-message p {
  margin: 0 0 24px;
  color: var(--kerlm-ecorce, #4a2f18);
  line-height: 1.7;
}
.kerlm-blog-empty-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 24px;
}
.kerlm-blog-empty-links a {
  color: var(--kerlm-corde, #96600a);
  font-weight: 600;
}
.kerlm-blog-empty-links a.kerlm-blog-empty-cta {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 28px;
  border-radius: 9999px;
  background: var(--kerlm-brique, #c1440e);
  color: #fff;
  font-family: 'PT Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}
.kerlm-blog-empty-links a.kerlm-blog-empty-cta:hover {
  background: var(--kerlm-brique-fonce, #9c3a0a);
}

/* ---------- Mon compte : bouton et case à cocher ----------
   "Se connecter" / "S'enregistrer" étaient les seuls boutons à coins
   droits du parcours client ; case "Se souvenir de moi" de 13px,
   difficile à toucher. */
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit,
.woocommerce-account .woocommerce-ResetPassword .button {
  border-radius: 9999px !important;
  min-height: 48px;
  padding: 12px 28px !important;
}
.woocommerce form input[type="checkbox"] {
  width: 20px;
  height: 20px;
  vertical-align: -4px;
  margin-right: 6px;
}
.woocommerce-form-login__rememberme {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px;
}

/* ---------- Formulaire Brevo (page "Merci pour votre passage") ----------
   Formulaire d'inscription intégré depuis Brevo avec son propre style
   en ligne (police système, bouton rouge vif à coins carrés, cadre
   gris) : aligné sur la charte du site. Contenu et fonctionnement du
   formulaire inchangés. */
.sib-form-container #sib-container,
.sib-form .sib-container--large {
  border-radius: 16px !important;
  border-color: var(--kerlm-ligne, #e7dbc3) !important;
  box-shadow: 0 2px 14px rgba(0,0,0,0.06);
}
/* Police du texte courant du site (Aleo) posée sur le conteneur, puis
   héritée par tout le formulaire (sinon "inherit" reprenait la
   police Roboto que Brevo pose sur ce même conteneur). */
.sib-form-container,
.sib-form-container *:not(svg):not(path):not(.sib-form-block__button) {
  font-family: Aleo, Georgia, serif !important;
}
.sib-form .sib-form-block__button {
  background-color: var(--kerlm-brique, #c1440e) !important;
  border-radius: 9999px !important;
  min-height: 52px;
  padding: 12px 28px !important;
  font-family: 'PT Sans', sans-serif !important;
  text-transform: uppercase;
}
.sib-form .sib-form-block__button:hover {
  background-color: var(--kerlm-brique-fonce, #9c3a0a) !important;
}
.sib-form input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
}
/* Messages d'erreur ("Vous devez renseigner ce champ.") : cadre rouge
   carré collé au texte (style en ligne Brevo) → texte rouge simple
   sous le champ, comme sur le formulaire Contact (01/10/2026). */
.sib-form .entry__error {
  margin-top: 6px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #dc3232 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* ============================================
   HARMONISATION VISUELLE GLOBALE (sept. 2026)
   Relevé sur 13 pages (mobile) : 19 variantes de boutons (2 polices,
   3 couleurs pour l'action principale), texte courant noir pur,
   titres et coins de cartes de tailles voisines mais différentes.
   Un seul système désormais :
   - bouton d'action principal : brique, pilule, PT Sans gras
     majuscules, 48px de haut mini ;
   - bouton de carte produit ("Choix des options") : même police,
     casse normale, plus discret dans les grilles ;
   - texte courant : quasi-noir chaud de la charte (--kerlm-encre) ;
   - titres : brun de marque #422c18.
   ============================================ */

/* ---------- Texte courant ----------
   Noir pur posé par le réglage "couleur du contenu" de GeneratePress
   sur le conteneur de page (#page) : remplacé par le quasi-noir chaud
   de la charte, plus doux sur le fond crème. */
body,
body #page {
  color: var(--kerlm-encre, #241a10);
}

/* ---------- Bouton d'action principal ----------
   "Ajouter au panier" / "Disponible en magasin" (fiches produit)
   sortaient en brun + texte jaune (réglage "bouton alternatif" de
   GeneratePress WooCommerce, jamais aligné sur la charte) : l'action
   la plus importante du site n'avait pas la couleur des boutons
   d'action. "Envoyer" (Contact) était doré (style propre à la page). */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.kerlm-contact-page .kerlm-contact-form-wrap .wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
  background: var(--kerlm-brique, #c1440e) !important;
  background-color: var(--kerlm-brique, #c1440e) !important;
  color: var(--kerlm-toile, #faf6ef) !important;
  border-color: transparent !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.kerlm-contact-page .kerlm-contact-form-wrap .wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover {
  background: var(--kerlm-brique-fonce, #9c3a0a) !important;
  background-color: var(--kerlm-brique-fonce, #9c3a0a) !important;
  color: var(--kerlm-toile, #faf6ef) !important;
}
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled {
  background-color: var(--kerlm-brique, #c1440e) !important;
  opacity: 0.45 !important;
}

/* Police unique des boutons d'action (étaient en Aleo ou PT Sans
   selon la page) */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit,
.wpcf7 .wpcf7-submit,
.kerlm-contact-page .kerlm-contact-form-wrap .wpcf7 input[type="submit"],
.entry-content .wp-block-button__link {
  font-family: 'PT Sans', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  border-radius: 9999px !important;
}
@media (max-width: 768px) {
  .woocommerce a.button.alt,
  .woocommerce button.button.alt,
  .wc-block-cart__submit-button,
  .wc-block-components-checkout-place-order-button,
  .woocommerce-account .woocommerce-form-login__submit,
  .wpcf7 .wpcf7-submit,
  .entry-content .wp-block-button__link {
    min-height: 48px !important;
    font-size: 16px !important;
  }
  .entry-content .wp-block-button__link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* ---------- Bouton des cartes produit ---------- */
.woocommerce ul.products li.product .button {
  font-family: 'PT Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em;
}

/* ---------- Titres ---------- */
.kerlm-contact-header h1 {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 1.2;
  color: #422c18;
}
@media (min-width: 769px) {
  .kerlm-contact-header h1 { font-size: 38px; }
  /* La page Contact est en mise en page « pleine largeur » (réglage
     GP de la page) : formulaire et fiches collaient aux bords de
     l'écran. Même largeur utile que les autres pages (1220px, soit
     le conteneur 1300px moins ses 40px de marge de chaque côté). */
  .kerlm-contact-page {
    box-sizing: border-box;
    max-width: 1300px;
    margin-inline: auto;
    padding-inline: 40px;
    padding-bottom: 60px;
  }
}
/* Titres des cartes produit : noir pur → quasi-noir chaud */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--kerlm-encre, #241a10) !important;
}
@media (max-width: 768px) {
  /* Sous-titres de même niveau à la même taille partout (22,4px,
     comme les pages et catégories) : description produit (20,8px)
     et produits suggérés (20px) étaient légèrement plus petits. */
  .single-product .woocommerce-Tabs-panel h2,
  .woocommerce div.product :is(.related.products, .up-sells.upsells.products) > h2 {
    font-size: 22.4px !important;
  }
  .kerlm-blog-empty-message h1 {
    font-size: 28px;
  }
  /* Cartes du haut de l'accueil : même arrondi que les autres
     grandes cartes du site (16px) */
  .home .gb-element-fbcec57f > div {
    border-radius: 16px;
  }
}

/* ---------- Finitions de la revue d'harmonie (sept. 2026) ---------- */

/* Accueil : les cartes "Notre sélection" reprennent l'habillage
   compact des cartes produit (règles body:is(…, .home) de la section
   "CATÉGORIES PRODUITS — MOBILE") — sans quoi la hauteur mini de
   452px laissait un grand vide entre le prix et le bouton. */

/* Avis Google : cartes blanches comme toutes les autres cartes du
   site (le gris #f4f4f4 de TrustIndex reprenait le dessus : sa
   feuille injectée en fin de page a la même spécificité et
   !important — préfixe body pour passer devant). */
body .ti-widget.ti-goog .ti-review-item > .ti-inner {
  background: #fff !important;
}

@media (max-width: 768px) {
  /* Fiche produit : le lien "Effacer" (réinitialiser le choix de
     couleur), invisible tant qu'aucune couleur n'est choisie,
     occupait quand même ~44px entre les pastilles et le bouton
     panier. Retiré du flux tant qu'il est masqué. */
  .single-product .reset_variations[style*="hidden"] {
    display: none !important;
  }

  /* Page Contact : fiches d'infos au même format compact que celles
     des pages magasins (icône sur la ligne du libellé). */
  .kerlm-contact-info-card {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 8px;
    align-items: center;
    padding: 14px 16px !important;
  }
  .kerlm-contact-info-card .ci-icon {
    grid-column: 1;
    grid-row: 1;
    font-size: 16px !important;
    margin: 0 !important;
    line-height: 1 !important;
  }
  .kerlm-contact-info-card .ci-label {
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
  }
  .kerlm-contact-info-card .ci-value {
    grid-column: 1 / -1;
    margin-top: 4px;
  }
  /* La note (grise) doit aussi occuper toute la largeur : placée
     d'office dans la colonne de l'icône, elle l'élargissait et
     écrasait le libellé (« HORAIR/ES » coupé, libellés décalés). */
  .kerlm-contact-info-card .ci-note {
    grid-column: 1 / -1;
  }
}

/* ============================================
   PAGINATION DES PRODUITS (sept. 2026)
   Numéros de page "1 2 →" sous les grilles produit (boutique,
   catégories). Style WooCommerce par défaut jusqu'ici : cadre gris,
   page en cours en violet-gris (#e9e6ed / #816f98, hors charte),
   cases de 24×30px (trop petites au doigt) et, devant chaque numéro,
   la puce décorative "nœud" des listes de contenu. Remplacé par des
   pastilles rondes de 44px aux couleurs du site.
   ============================================ */
.woocommerce nav.woocommerce-pagination {
  margin: 40px 0 8px;
  text-align: center;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: none !important;
  white-space: normal;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li {
  float: none;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li::before,
.woocommerce nav.woocommerce-pagination ul.page-numbers li::marker {
  content: none !important;
  display: none !important;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border-radius: 9999px;
  border: 1.5px solid var(--kerlm-ligne, #e7dbc3);
  background: #fff;
  color: var(--kerlm-ecorce, #4a2f18);
  font-family: 'PT Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(74, 47, 24, 0.06);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:focus-visible {
  background: var(--kerlm-brique, #c1440e);
  border-color: var(--kerlm-brique, #c1440e);
  color: var(--kerlm-toile, #faf6ef);
}
/* Page en cours */
.woocommerce nav.woocommerce-pagination ul.page-numbers li span.current {
  background: var(--kerlm-brique, #c1440e);
  border-color: var(--kerlm-brique, #c1440e);
  color: var(--kerlm-toile, #faf6ef);
  box-shadow: 0 4px 12px rgba(193, 68, 14, 0.25);
}
/* Flèches précédent / suivant : un peu plus grandes que le texte */
.woocommerce nav.woocommerce-pagination ul.page-numbers li .prev,
.woocommerce nav.woocommerce-pagination ul.page-numbers li .next {
  font-size: 20px;
}
/* "…" entre deux groupes de numéros (quand il y aura beaucoup de
   pages) : simple texte, sans pastille */
.woocommerce nav.woocommerce-pagination ul.page-numbers li span.dots {
  min-width: 24px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

/* ============================================
   UX — PARCOURS D'ACHAT ET PAGES D'ERREUR (sept. 2026)
   PHP associé : functions.php, même intitulé.
   ============================================ */

/* ---------- Produits disponibles uniquement en magasin ----------
   (supports de hamac). Encadré "Disponible en magasin" + actions ;
   le bouton panier grisé (support en bois, à tailles) et la mention
   "Ce produit n'est pas disponible à la commande pour le moment",
   redondante avec l'encadré, sont masqués. Les pastilles de taille
   restent : elles affichent le prix de chaque taille. */
/* (sélecteur renforcé : doit passer devant la règle "quantité +
   bouton sur une ligne" de "FICHES PRODUIT — MOBILE") */
.kerlm-store-only.woocommerce.single-product div.product .woocommerce-variation-add-to-cart,
.kerlm-store-only div.product .summary p.stock {
  display: none !important;
}
.kerlm-store-only-box {
  margin: 8px 0 24px;
  padding: 18px 20px;
  background: #fff;
  border-radius: 14px;
  border-left: 4px solid #c8860a;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}
.kerlm-store-only-box p {
  margin: 0 0 6px;
}
.kerlm-store-only-title {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #422c18;
}
.kerlm-store-only-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--kerlm-encre, #241a10);
}
.kerlm-store-only-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin-top: 14px;
}
.kerlm-store-only-actions a.kerlm-store-only-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 28px;
  border-radius: 9999px;
  background: var(--kerlm-brique, #c1440e);
  color: var(--kerlm-toile, #faf6ef);
  font-family: 'PT Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
}
.kerlm-store-only-actions a.kerlm-store-only-cta:hover {
  background: var(--kerlm-brique-fonce, #9c3a0a);
}
.kerlm-store-only-actions a.kerlm-store-only-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--kerlm-corde, #96600a);
  font-weight: 600;
}
@media (max-width: 480px) {
  .kerlm-store-only-actions a.kerlm-store-only-cta {
    width: 100%;
  }
}

/* ---------- Page 404 ---------- */
.kerlm-404-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  margin: 8px 0 32px;
}
.kerlm-404-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--kerlm-corde, #96600a);
  font-weight: 600;
}
.kerlm-404-links a.kerlm-404-cta {
  padding: 12px 28px;
  border-radius: 9999px;
  background: var(--kerlm-brique, #c1440e);
  color: var(--kerlm-toile, #faf6ef);
  font-family: 'PT Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
}
.kerlm-404-links a.kerlm-404-cta:hover {
  background: var(--kerlm-brique-fonce, #9c3a0a);
}

/* ---------- Panier vide ---------- */
.kerlm-empty-cart-cta {
  margin: 20px 0 8px;
  text-align: center;
}
/* Grille "Nouveau dans la boutique" : titres soulignés, boutons
   "CHOIX DES OPTIONS" en majuscules sur 2 lignes (règle des boutons
   d'action trop large ici) → même rendu que les cartes produit. */
.wc-block-grid__product {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
  padding: 0 0 14px !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.wc-block-grid__product .wc-block-grid__product-link {
  text-decoration: none;
}
.wc-block-grid__product .wc-block-grid__product-image {
  margin: 0 0 10px !important;
}
.wc-block-grid__product .wc-block-grid__product-image img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.wc-block-grid__product .wc-block-grid__product-title {
  padding: 0 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1.3;
  color: var(--kerlm-encre, #241a10);
  text-decoration: none;
}
.wc-block-grid__product .wc-block-grid__product-add-to-cart {
  display: block;
  width: 100%;
  margin-top: auto !important;
  padding: 0 10px;
  box-sizing: border-box;
}
.entry-content .wc-block-grid__product .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px !important;
  padding: 10px 8px !important;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2;
  box-sizing: border-box;
}

/* ============================================
   PANIER & COMMANDE — CLARTÉ (sept. 2026)
   Revue du parcours complet (ajout → panier → commande → retrait).
   ============================================ */

/* ---------- Un seul prix mis en avant par article ----------
   Chaque ligne affichait deux fois le même montant surligné en jaune
   (prix unitaire sous le nom + total de ligne) : on ne savait pas
   lequel comptait. Le total de ligne reste surligné ; le prix
   unitaire devient une mention discrète. */
.wc-block-cart-item__prices .wc-block-components-product-price,
.wc-block-cart-item__prices .woocommerce-Price-amount.amount,
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__individual-prices .woocommerce-Price-amount.amount,
.wc-block-components-order-summary-item__individual-prices .wc-block-components-product-price {
  background: none !important;
  padding: 0 !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: #6b6b6b !important;
}

/* ---------- Totals : une seule carte ----------
   Code promo, sous-total, livraison et total étaient chacun dans leur
   propre carte blanche (5 cartes empilées dans un cadre gris au
   checkout) : lecture hachée. Regroupés dans une carte unique,
   séparés par de simples filets ; le total garde son filet doré. */
.wp-block-woocommerce-cart-order-summary-block,
.checkout-order-summary-block-fill {
  background: #fff;
  border: 1px solid #f0ddb5;
  border-radius: 14px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
  padding: 4px 20px;
  overflow: hidden;
}
.wc-block-components-checkout-order-summary__content {
  border: none !important;
}
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-wrapper,
.checkout-order-summary-block-fill .wc-block-components-totals-wrapper {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--kerlm-ligne, #e7dbc3) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 16px 0 !important;
  margin: 0 !important;
}
.wp-block-woocommerce-cart-order-summary-block > .wc-block-components-totals-wrapper:first-child,
.checkout-order-summary-block-fill > .wc-block-components-totals-wrapper:first-child {
  border-top: none !important;
}
/* Le filet doré du total suffit comme séparation */
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item),
.checkout-order-summary-block-fill .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
  border-top: none !important;
  padding-top: 4px !important;
}
.wc-block-components-totals-coupon,
.wc-block-components-totals-coupon.wc-block-components-panel {
  margin-bottom: 0 !important;
}

/* ---------- Choix "Expédier / Retrait en magasin" ----------
   Option choisie encadrée de noir (réglage WooCommerce par défaut),
   intitulé "Retrait en magasin" sur 2 lignes très espacées. Aux
   couleurs du site : cadre brique, fond blanc. */
.wc-block-checkout__shipping-method-container {
  background: var(--kerlm-sable, #f6ead2) !important;
  border-radius: 12px !important;
  padding: 4px !important;
}
.wc-block-checkout__shipping-method-option {
  border-radius: 10px !important;
  min-height: 60px;
}
.wc-block-checkout__shipping-method-option--selected {
  border-color: var(--kerlm-brique, #c1440e) !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(74, 47, 24, 0.08);
}
.wc-block-checkout__shipping-method-option-title {
  line-height: 1.25 !important;
  font-size: 15px !important;
}
.wc-block-checkout__shipping-method-option--selected .wc-block-checkout__shipping-method-option-title {
  font-weight: 700;
}

/* ---------- Boutons radio (point de retrait, livraison, paiement) ----------
   Cercles et cadre de l'option choisie en noir → couleurs du site. */
.wc-block-components-radio-control__input:checked {
  border-color: var(--kerlm-brique, #c1440e) !important;
}
.wc-block-components-radio-control__input:checked::before {
  background: var(--kerlm-brique, #c1440e) !important;
}
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
  box-shadow: inset 0 0 0 2px var(--kerlm-brique, #c1440e) !important;
  border-radius: 10px !important;
}
.wc-block-components-radio-control--highlight-checked {
  border-radius: 10px;
}
.wc-block-components-radio-control--highlight-checked::after {
  border-color: var(--kerlm-ligne, #e7dbc3) !important;
  border-radius: 10px !important;
}

/* ---------- Titres des étapes ----------
   "Coordonnées", "Livraison", "Options de paiement"… : même brun et
   même graisse que les titres du site (poids fin d'origine). */
.wc-block-components-checkout-step__title,
.wc-block-components-title.wc-block-components-title {
  font-family: 'Bricolage Grotesque', 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  color: #422c18 !important;
}

/* Espace resserré entre le titre de page et le début du formulaire */
.woocommerce-checkout .entry-content > .wp-block-woocommerce-checkout,
.woocommerce-cart .entry-content > .wp-block-woocommerce-cart {
  padding-top: 0 !important;
}
/* Même carte unique dans la colonne "Résumé de la commande" du
   checkout sur ordinateur (conteneur différent du mobile). */
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
  background: #fff;
  border: 1px solid #f0ddb5 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
  padding: 0 20px 4px;
}
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__content .wc-block-components-totals-wrapper {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--kerlm-ligne, #e7dbc3) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 16px 0 !important;
  margin: 0 !important;
}
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__content .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
  border-top: none !important;
  padding-top: 4px !important;
}
/* Carte mobile : bordure grise d'origine du bloc remplacée */
.checkout-order-summary-block-fill {
  border-color: #f0ddb5 !important;
}
/* Double filet sous "Ajouter des codes promo" (filet du bouton +
   filet de séparation) : on ne garde que la séparation. */
:is(.wp-block-woocommerce-cart-order-summary-block, .checkout-order-summary-block-fill, .wc-block-components-checkout-order-summary__content) .wc-block-components-totals-coupon .wc-block-components-panel__button {
  border-bottom: none !important;
}
/* Filets en double dans les totaux : le groupe "totaux" ajoute son
   propre filet gris au-dessus du sous-total, et dans le panier le
   filet sous "TOTAL PANIER" double celui du code promo. */
.wp-block-woocommerce-checkout-order-summary-totals-block {
  border-top: none !important;
}
.wp-block-woocommerce-checkout-order-summary-totals-block > .wc-block-components-totals-wrapper:first-child {
  border-top: 1px solid var(--kerlm-ligne, #e7dbc3) !important;
}
.wp-block-woocommerce-cart-order-summary-heading-block + .wc-block-components-totals-wrapper {
  border-top: none !important;
}
.wp-block-woocommerce-cart-order-summary-block {
  border-bottom-color: #f0ddb5 !important;
}

/* Code promo : uniquement sur la page de commande (voir functions.php,
   "CODE PROMO — UNIQUEMENT À L'ÉTAPE DE PAIEMENT"). Secours CSS. */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-coupon-form-block {
  display: none !important;
}

/* Page Contact (mobile) : liens des fiches d'infos (itinéraire,
   téléphone, e-mail) de 18px de haut → zone de tap agrandie sans
   changement visuel. */
@media (max-width: 768px) {
  .kerlm-contact-info-card .ci-value a {
    display: inline-block;
    padding: 10px 0;
    margin: -10px 0;
  }
}

/* ---------- Revue finale : tablette et desktop (fiches produit) ----------
   Les réglages "intitulé Couleur/Taille au-dessus des pastilles" et
   "quantité + bouton sur une ligne" n'existaient que sous 769px :
   sur tablette (769–1060px) l'intitulé disparaissait et le bouton
   "Ajouter au panier" passait sous la quantité. Intitulé affiché à
   toutes les tailles ; ligne unique étendue aux tablettes. */
@media (min-width: 769px) {
  .woocommerce.single-product div.product table.variations,
  .woocommerce.single-product div.product table.variations tbody,
  .woocommerce.single-product div.product table.variations tr,
  .woocommerce.single-product div.product table.variations td.value {
    display: block !important;
    width: 100% !important;
  }
  .woocommerce.single-product div.product table.variations th.label {
    display: block !important;
    padding: 0 0 8px !important;
    text-align: left;
  }
  .woocommerce.single-product div.product table.variations th.label label {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--kerlm-ecorce, #4a2f18);
  }
  .woocommerce.single-product div.product table.variations td.value {
    padding: 0 0 14px !important;
  }
}
@media (min-width: 769px) and (max-width: 1060px) {
  .woocommerce.single-product div.product .woocommerce-variation-add-to-cart,
  .woocommerce.single-product div.product form.cart:not(.variations_form) {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .woocommerce.single-product div.product form.cart .single_add_to_cart_button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}
/* Lien "Effacer" masqué (aucune couleur choisie) : retiré du flux à
   toutes les tailles (réglage d'abord posé pour le mobile seul). */
.single-product .reset_variations[style*="hidden"] {
  display: none !important;
}

/* ---------- Commande sur mobile : un seul "Résumé de la commande" ----------
   Sur petit écran, WooCommerce affiche le résumé deux fois : un
   bandeau repliable en haut de page ET le résumé complet juste avant
   le bouton "Commander". On garde celui du bas (toujours déplié,
   sous les yeux au moment de valider) et on masque le bandeau du
   haut. Ne s'applique que lorsque le résumé du bas est présent
   (mobile) : sur tablette/ordinateur, la colonne de droite reste. */
.wc-block-checkout:has(.wc-block-checkout__main .checkout-order-summary-block-fill) .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
  display: none !important;
}

/* Accueil, tablette et ordinateur : cartes "Notre sélection" sans
   nuancier → la hauteur mini commune des cartes (452px) laissait
   ~100px de vide entre le prix et le bouton. Hauteur libre : les
   cartes d'une même ligne restent alignées (grille). */
.kerlm-home-products ul.products li.product {
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column;
}
.kerlm-home-products ul.products li.product .woocommerce-loop-product__link {
  margin-bottom: 0 !important;
}
.kerlm-home-products ul.products li.product .button {
  margin-top: auto !important;
}
.kerlm-home-products ul.products li.product .price {
  margin-bottom: 14px !important;
}

/* ---------- Revue des catégories (tablette et ordinateur) ----------
   - Le texte de bas de page ("Pourquoi choisir un support ?", "Les
     Hamacs chez Kêr LM"…) collait à la grille de produits : l'espace
     n'était défini que sur mobile.
   - Hauteur mini commune de 452px : ~100px de vide dans les cartes
     sans nuancier (supports). Hauteur libre ; la grille aligne déjà
     les cartes d'une même ligne, et les boutons restent en bas. */
:is(.tax-product_cat, .post-type-archive-product) .wc-columns-container > ul.products {
  margin-bottom: 48px !important;
}
body:is(.tax-product_cat, .post-type-archive-product) ul.products li.product {
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column;
}
body:is(.tax-product_cat, .post-type-archive-product) ul.products li.product .woocommerce-loop-product__link {
  margin-bottom: 0 !important;
}
body:is(.tax-product_cat, .post-type-archive-product) ul.products li.product .price {
  margin-bottom: 14px !important;
}
body:is(.tax-product_cat, .post-type-archive-product) ul.products li.product .button {
  margin-top: auto !important;
}

/* Revue finale des fiches produit :
   - support de chaise hamac (produit "externe") : encadré "Disponible
     en magasin" comme les autres supports → son bouton et la mention
     "pas disponible à la commande" sont masqués ;
   - images de la description : hauteur proportionnelle garantie. */
body.kerlm-store-only.woocommerce.single-product div.product .summary form.cart {
  display: none !important;
}
.woocommerce-Tabs-panel img {
  max-width: 100%;
  height: auto;
}


/* ============================================
   CHECK-UP FINAL — HARMONISATION (sept. 2026)
   Petits écarts relevés par un audit automatique des 30 pages
   (mobile 390px + bureau 1366px), alignés sur le système en place.
   ============================================ */

/* Titres de page : 45px sur ordinateur partout (Contact et Blog
   étaient à 38px, toutes les autres pages à 44-45px). */
@media (min-width: 769px) {
  .kerlm-contact-header h1,
  .kerlm-blog-empty-message h1 {
    font-size: 45px;
  }
}

/* Contact : titre du formulaire en noir froid #1a1a1a (<style> inline
   de la page) → brun des titres du site. */
.kerlm-contact-page .kerlm-contact-form-wrap h3 {
  color: #422c18 !important;
}

/* Boutons d'action : même graisse et même taille partout.
   « Se connecter » était en 600 (700 ailleurs), « Envoyer » (Contact)
   en 15px sur mobile (16px ailleurs), le bouton Brevo en texte blanc
   pur (crème #faf6ef sur tous les autres boutons brique). */
.woocommerce-account .woocommerce button.woocommerce-form-login__submit,
.woocommerce-account .woocommerce button.woocommerce-form-register__submit {
  font-weight: 700 !important;
}
.sib-form .sib-form-block__button {
  color: var(--kerlm-toile, #faf6ef) !important;
  font-weight: 700 !important;
}
@media (max-width: 768px) {
  .kerlm-contact-page .kerlm-contact-form-wrap .wpcf7 input[type="submit"] {
    font-size: 16px !important;
  }
}

/* « +X autres » sous les pastilles de couleur : 10px sur ordinateur
   (12px sur mobile) — trop petit pour être lu confortablement. */
.woocommerce ul.products li.product .cfvsw-more-link a {
  font-size: 12px !important;
}

/* Intitulés du pied de page (NAVIGATION, NOTRE MAGASIN, CONTACT) :
   11px → 12px, comme les autres petits intitulés en capitales
   (fiches Contact et magasins). */
.kerlm-footer-col h4 {
  font-size: 12px;
}

/* Grille « Nouveau dans la boutique » (panier vide), mobile : boutons
   à 13px comme les cartes produit des autres pages (14px ici). */
@media (max-width: 768px) {
  .entry-content .wc-block-grid__product .wp-block-button__link {
    font-size: 13px !important;
  }
}

/* Pied de page, mobile : téléphone et e-mail n'offraient qu'une zone
   de tap de ~18px de haut. Zone agrandie sans décaler le texte
   (marge négative = padding ajouté). */
@media (max-width: 768px) {
  .kerlm-footer-col a[href^="tel:"],
  .kerlm-footer-col a[href^="mailto:"] {
    display: inline-block;
    padding: 4px 0;
    margin: -4px 0;
  }
}

/* ============================================================
   EN-TÊTE — MINI-PANIER AU SURVOL (29 sept. 2026)
   ------------------------------------------------------------
   Panneau qui s'ouvre au survol de l'icône panier (bureau ; sur
   mobile l'icône mène directement à la page Panier). Il héritait
   du style du menu (Poppins MAJUSCULES grasses, noms de produits
   sur 3 lignes), d'un bandeau gris pour le sous-total et de boutons
   carrés : remis au système du site — carte arrondie, noms en
   casse normale, sous-total comme le "Total estimé" du panier,
   boutons pilule (Commander = action principale, pleine ;
   Voir le panier = secondaire, en contour).
   #wc-mini-cart (ID posé par GeneratePress) + .site-header :
   nécessaire pour passer devant les règles #wc-mini-cart de
   GeneratePress et .main-navigation a du menu.
   ============================================================ */
.site-header #wc-mini-cart {
  width: 340px;
  border: 1px solid var(--kerlm-ligne, #e7dbc3);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(36, 26, 16, 0.18);
  overflow: hidden;
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
}
/* Le conteneur .widget ajoute 15px de marge intérieure : retirée pour
   que le fond crème du sous-total et des boutons aille jusqu'aux bords. */
.site-header #wc-mini-cart .widget_shopping_cart {
  margin: 0;
  padding: 0;
}
.site-header #wc-mini-cart .widget_shopping_cart_content {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  color: var(--kerlm-encre, #241a10);
}

/* Liste des articles : défile au-delà de ~4 articles */
.site-header #wc-mini-cart ul.woocommerce-mini-cart {
  max-height: 340px;
  overflow-y: auto;
  margin: 0;
  padding: 18px 18px 0;
}
.site-header #wc-mini-cart .woocommerce-mini-cart-item {
  position: relative;
  min-height: 64px;
  margin: 0 0 14px;
  padding: 0 30px 14px 78px;
  border-bottom: 1px solid var(--kerlm-ligne, #e7dbc3);
  font-size: 14px;
  line-height: 1.35;
  text-transform: none;
}
.site-header #wc-mini-cart .woocommerce-mini-cart-item:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}
.site-header #wc-mini-cart .woocommerce-mini-cart-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 64px !important;
  height: 64px !important;
  margin: 0 !important;
  object-fit: cover;
  border-radius: 10px;
  background: var(--kerlm-sable, #f6ead2);
  box-shadow: none;
}
.site-header #wc-mini-cart .woocommerce-mini-cart-item a:not(.remove) {
  display: block;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: normal;
  color: var(--kerlm-encre, #241a10);
  text-decoration: none;
}
.site-header #wc-mini-cart .woocommerce-mini-cart-item a:not(.remove):hover {
  color: var(--kerlm-brique, #c1440e);
}
.site-header #wc-mini-cart .woocommerce-mini-cart-item .quantity {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #6b5a48;
}

/* Bouton de retrait : pastille ronde discrète, brique au survol */
.site-header #wc-mini-cart a.remove {
  position: absolute;
  top: 0;
  right: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--kerlm-ligne, #e7dbc3);
  border-radius: 50%;
  background: #fff;
  color: #8a7a68 !important;
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}
.site-header #wc-mini-cart a.remove:hover {
  background: var(--kerlm-brique, #c1440e);
  border-color: var(--kerlm-brique, #c1440e);
  color: #fff !important;
}

/* Sous-total : même lecture que le "Total estimé" de la page Panier */
.site-header #wc-mini-cart .woocommerce-mini-cart__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px 0 0;
  padding: 14px 18px;
  border-top: 1px solid var(--kerlm-ligne, #e7dbc3);
  background: var(--kerlm-toile, #faf6ef);
  text-transform: none;
}
.site-header #wc-mini-cart .woocommerce-mini-cart__total strong {
  font-family: 'PT Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kerlm-ecorce, #4a2f18);
}
.site-header #wc-mini-cart .woocommerce-mini-cart__total .woocommerce-Price-amount.amount {
  padding: 0 !important;
  background: none !important;
  font-size: 20px;
  color: var(--kerlm-corde, #96600a) !important;
}

/* Boutons : Commander (principal) au-dessus de Voir le panier */
.site-header #wc-mini-cart .woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 4px 18px 18px;
  background: var(--kerlm-toile, #faf6ef);
}
.site-header #wc-mini-cart .woocommerce-mini-cart__buttons a.button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-height: 48px;
  margin: 0 !important;
  padding: 10px 20px !important;
  box-sizing: border-box;
  border: 2px solid var(--kerlm-brique, #c1440e) !important;
  border-radius: 9999px !important;
  font-family: 'PT Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.2;
}
.site-header #wc-mini-cart .woocommerce-mini-cart__buttons a.button.checkout {
  order: -1;
  background: var(--kerlm-brique, #c1440e) !important;
  color: var(--kerlm-toile, #faf6ef) !important;
}
.site-header #wc-mini-cart .woocommerce-mini-cart__buttons a.button.checkout:hover {
  background: var(--kerlm-brique-fonce, #9c3a0a) !important;
  border-color: var(--kerlm-brique-fonce, #9c3a0a) !important;
}
.site-header #wc-mini-cart .woocommerce-mini-cart__buttons a.button:not(.checkout) {
  background: transparent !important;
  color: var(--kerlm-brique, #c1440e) !important;
}
.site-header #wc-mini-cart .woocommerce-mini-cart__buttons a.button:not(.checkout):hover {
  background: var(--kerlm-brique, #c1440e) !important;
  color: var(--kerlm-toile, #faf6ef) !important;
}

/* Panier vide (si le panneau s'affiche sans article) */
.site-header #wc-mini-cart .woocommerce-mini-cart__empty-message {
  margin: 0;
  padding: 20px 18px;
  font-size: 14px;
  text-align: center;
  text-transform: none;
  color: #6b5a48;
}

/* ============================================================
   VÉRIFICATION FINALE (29 sept. 2026)
   ============================================================ */

/* Compteur d'articles de l'icône panier (en-tête, toutes tailles) :
   chiffre de 11px gris-beige sur voile blanc à 10 %, peu lisible sur
   le brun du header. Pastille brique, chiffre crème 12px gras —
   même couleur d'action que les boutons du site. */
.site-header .cart-contents .number-of-items {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 9999px;
  background: var(--kerlm-brique, #c1440e);
  color: var(--kerlm-toile, #faf6ef);
  font-family: 'PT Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* Intitulé "TOTAL PANIER" (page Panier, bureau) : 11px → 12px, comme
   les autres petits intitulés en capitales du site. */
.wc-block-cart__totals-title {
  font-size: 12px !important;
}

/* ---------- Messages WooCommerce classiques ----------
   "… a été ajouté à votre panier", et surtout le refus d'ajouter un
   hamac quand une chaise est déjà au panier (et inversement) : bloc
   vert vif ou rose-rouge à bordure noire, texte blanc, lien "nous
   contacter" brique quasi illisible sur le rouge, et la puce dorée des
   listes de contenu posée par-dessus le "I" du message (le refus est
   une liste <ul>). Carte blanche à filet coloré à gauche (vert =
   confirmation, or = information, brique = refus), texte encre. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 0 0 24px !important;
  padding: 16px 20px !important;
  list-style: none !important;
  background: #fff !important;
  color: var(--kerlm-encre, #241a10) !important;
  border: 1px solid var(--kerlm-ligne, #e7dbc3) !important;
  border-left: 4px solid var(--kerlm-algue, #3d6b30) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(36, 26, 16, 0.07);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}
.woocommerce-info {
  border-left-color: var(--kerlm-corde, #96600a) !important;
}
/* WooCommerce donne le focus au message (lecteurs d'écran) : le
   navigateur l'entourait alors d'un contour noir. Élément non
   interactif (tabindex="-1") → pas de contour. */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus {
  outline: none;
}
.woocommerce-error {
  border-left-color: var(--kerlm-brique, #c1440e) !important;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-error > li::before {
  content: none !important;
  display: none !important;
}
.woocommerce-error > li {
  flex: 1 1 100%;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button) {
  color: var(--kerlm-brique, #c1440e) !important;
  font-weight: 700;
  text-decoration: underline;
}
/* "Poursuivre les achats", "Voir le panier" : bouton secondaire en contour */
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button {
  order: 2;
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  min-height: 40px;
  margin: 0 !important;
  padding: 8px 18px !important;
  border: 2px solid var(--kerlm-brique, #c1440e) !important;
  border-radius: 9999px !important;
  background: transparent !important;
  color: var(--kerlm-brique, #c1440e) !important;
  font-family: 'PT Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  box-shadow: none !important;
}
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-error a.button:hover {
  background: var(--kerlm-brique, #c1440e) !important;
  color: var(--kerlm-toile, #faf6ef) !important;
}

/* ---------- Résultats de recherche ----------
   Liste compacte : vignette carrée à gauche, titre + extrait à droite
   (vignette et pleine largeur posées dans functions.php). Avant : photo
   de 540px de haut par résultat, titres gris, grands vides. */
.search-results .site-main {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.search-results .site-main > article .inside-article {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  grid-template-areas: "image title" "image summary";
  grid-template-rows: auto 1fr;
  column-gap: 20px;
  align-items: start;
  margin-bottom: 16px;
  padding: 18px !important;
  background: #fff;
  border: 1px solid var(--kerlm-ligne, #e7dbc3);
  border-radius: 14px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
}
.search-results .site-main > article .entry-header {
  grid-area: title;
  margin: 0;
}
.search-results .site-main > article .entry-title {
  margin: 0 0 6px;
  font-size: 20px !important;
  line-height: 1.3;
}
.search-results .site-main > article .entry-title a {
  color: var(--kerlm-encre, #241a10);
  text-decoration: none;
}
.search-results .site-main > article .entry-title a:hover {
  color: var(--kerlm-brique, #c1440e);
}
.search-results .site-main > article .post-image {
  grid-area: image;
  margin: 0 !important;
}
.search-results .site-main > article .post-image img {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--kerlm-sable, #f6ead2);
}
.search-results .site-main > article .entry-summary {
  grid-area: summary;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}
.search-results .site-main > article .entry-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.search-results .site-main > article .entry-summary :is(p, ul, li) {
  margin: 0;
  padding: 0;
}
.search-results .site-main > article .entry-summary li::before {
  content: none !important;
}
/* Résultat sans image (pages) : le texte prend toute la largeur */
.search-results .site-main > article:not(.has-post-thumbnail) .inside-article {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "summary";
}
/* Mobile : marges latérales de 16px comme le reste du site (le titre
   et les cartes collaient au bord de l'écran ; la page "Rien de
   trouvé" a déjà les siennes). */
@media (max-width: 768px) {
  .search-results .site-main {
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media (max-width: 600px) {
  .search-results .site-main > article .inside-article {
    grid-template-columns: 80px minmax(0, 1fr);
    column-gap: 14px;
    padding: 14px !important;
  }
  .search-results .site-main > article .post-image img {
    width: 80px;
    height: 80px;
  }
  .search-results .site-main > article .entry-title {
    font-size: 17px !important;
  }
  .search-results .site-main > article .entry-summary {
    font-size: 14px;
  }
}
/* Pagination des résultats : mêmes pastilles que celle des produits */
.search .paging-navigation .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}
.search .paging-navigation .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 9999px;
  border: 1.5px solid var(--kerlm-ligne, #e7dbc3);
  background: #fff;
  color: var(--kerlm-ecorce, #4a2f18);
  font-family: 'PT Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
.search .paging-navigation a.page-numbers:hover,
.search .paging-navigation .page-numbers.current {
  background: var(--kerlm-brique, #c1440e);
  border-color: var(--kerlm-brique, #c1440e);
  color: var(--kerlm-toile, #faf6ef);
}

/* ---------- Pages légales : colonne de lecture (ordinateur) ---------- */
@media (min-width: 769px) {
  .kerlm-legal .inside-article {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- Mon compte (non connecté) : formulaire de connexion ----------
   Champs étirés sur ~1200px sur ordinateur : bornés à une carte. */
@media (min-width: 769px) {
  .woocommerce-account:not(.logged-in) .entry-content > .woocommerce {
    max-width: 520px;
  }
}

/* ---------- Produits similaires / "Vous aimerez peut-être aussi"
   (ordinateur) : 2 ou 3 cartes calées à gauche d'une grille de 4
   colonnes laissaient un grand vide à droite du cadre. Colonnes
   vides repliées, cartes centrées (même largeur qu'avant). */
@media (min-width: 769px) {
  .single-product :is(.related, .up-sells) ul.products {
    grid-template-columns: repeat(auto-fit, minmax(0, 271px)) !important;
    justify-content: center !important;
  }
}

/* ---------- Nuanciers : coloris en rupture de stock ----------
   Marqués "estompé + barré" par l'extension (réglage réactivé dans
   functions.php). Son voile blanc était carré sur des pastilles
   rondes (coins visibles) : il épouse désormais la forme de la
   pastille ; croix à la couleur brique du site. */
.cfvsw-swatches-option.cfvsw-swatches-blur-cross-disable {
  cursor: not-allowed;
}
.cfvsw-swatches-option.cfvsw-swatches-blur-cross-disable::before {
  top: 0;
  left: 0;
  border-radius: inherit;
  color: var(--kerlm-brique, #c1440e);
}

/* ---------- Panier (ordinateur) : bande vide sous "TOTAL PANIER" ----------
   Le bloc des sous-totaux est vide (ses lignes sont masquées plus haut)
   mais gardait son filet et sa marge : deux traits empilés et un vide
   avant "TOTAL ESTIMÉ". Masqué tant qu'il ne contient aucune ligne. */
.wp-block-woocommerce-cart-order-summary-totals-block:not(:has(.wc-block-components-totals-item)) {
  display: none !important;
}
/* …et le filet sous l'intitulé doublait le filet doré de "TOTAL
   ESTIMÉ" juste en dessous : un seul trait conservé. */
.wc-block-cart__totals-title {
  margin-bottom: 4px !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

/* ---------- Commande (ordinateur) : titre "Résumé de la commande" ----------
   Seul titre de la page en Aleo normal : aligné sur les titres
   d'étape (Coordonnées, Livraison…) — Bricolage 700, 20px. */
.wc-block-components-checkout-order-summary__title-text {
  font-family: 'Bricolage Grotesque', 'Poppins', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #422c18 !important;
}

/* ---------- Formulaire Contact : messages d'erreur ----------
   Le message ("Veuillez saisir votre adresse e-mail.") est placé dans
   le <label> de la page Contact, en capitales espacées : il s'affichait
   donc en MAJUSCULES rouges. Casse normale, sous le champ. */
.wpcf7 .wpcf7-not-valid-tip {
  margin-top: 6px;
  text-transform: none;
  letter-spacing: normal;
  font-size: 13px;
  line-height: 1.4;
}
/* Message général sous le bouton Envoyer : cadre jaune/rouge carré par
   défaut de l'extension → même carte que les messages WooCommerce
   (filet brique = erreur, vert = message envoyé). */
.wpcf7 form .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 14px 18px;
  background: #fff;
  color: var(--kerlm-encre, #241a10);
  border: 1px solid var(--kerlm-ligne, #e7dbc3);
  border-left: 4px solid var(--kerlm-brique, #c1440e);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(36, 26, 16, 0.07);
  font-size: 15px;
  line-height: 1.5;
}
/* Couleurs posées par l'extension pour chaque état (jaune, orange,
   rouge) : même spécificité et feuille chargée après celle du thème,
   d'où le préfixe body. */
body .wpcf7 form.invalid .wpcf7-response-output,
body .wpcf7 form.unaccepted .wpcf7-response-output,
body .wpcf7 form.payment-required .wpcf7-response-output,
body .wpcf7 form.failed .wpcf7-response-output,
body .wpcf7 form.aborted .wpcf7-response-output,
body .wpcf7 form.spam .wpcf7-response-output {
  border-color: var(--kerlm-ligne, #e7dbc3);
  border-left-color: var(--kerlm-brique, #c1440e);
}
body .wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--kerlm-ligne, #e7dbc3);
  border-left-color: var(--kerlm-algue, #3d6b30);
}

/* ---------- Mini-panier : panneau vide pendant le chargement ----------
   Son contenu arrive par AJAX après le chargement de la page (délai
   porté à 15 s dans functions.php). En attendant, le survol affichait
   un trait blanc de 2px sous l'icône : panneau masqué tant qu'il n'a
   ni article ni message "panier vide". */
.site-header #wc-mini-cart:not(:has(.woocommerce-mini-cart-item, .woocommerce-mini-cart__empty-message)) {
  display: none !important;
}

/* ============================================================
   PAGE « COMMANDE REÇUE » (confirmation, 1er oct. 2026)
   ============================================================ */

/* Récapitulatif (n°, date, total, paiement) : la puce dorée des listes
   de contenu s'affichait devant chaque élément, et les éléments
   flottants WooCommerce (filets pointillés) se rangeaient de travers
   sur mobile. Carte en grille : 2 colonnes mobile, 4 ordinateur. */
.woocommerce-order ul.woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  margin: 0 0 32px !important;
  padding: 16px 18px !important;
  list-style: none !important;
  background: #fff;
  border: 1px solid var(--kerlm-ligne, #e7dbc3);
  border-radius: 12px;
}
.woocommerce-order ul.woocommerce-order-overview::before,
.woocommerce-order ul.woocommerce-order-overview::after,
.woocommerce-order ul.woocommerce-order-overview > li::before {
  display: none !important;
  content: none !important;
}
.woocommerce-order ul.woocommerce-order-overview > li {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--kerlm-encre, #241a10);
  opacity: 0.85;
}
.woocommerce-order ul.woocommerce-order-overview > li strong {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0;
}
@media (min-width: 769px) {
  .woocommerce-order ul.woocommerce-order-overview {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Adresses : texte collé au bord du cadre → carte aérée */
.woocommerce-order .woocommerce-customer-details address {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  padding: 16px 18px !important;
  border: 1px solid var(--kerlm-ligne, #e7dbc3) !important;
  border-radius: 12px !important;
  background: #fff;
  line-height: 1.6;
}
.woocommerce-order .woocommerce-customer-details address p {
  margin: 6px 0 0 !important;
}

/* "Informations complémentaires" collé au cadre d'adresse au-dessus */
.woocommerce-order .wc-block-order-confirmation-additional-fields-wrapper {
  margin-top: 32px !important;
}
/* Ordinateur : adresses de facturation et de livraison côte à côte
   (empilées sur toute la largeur), titres de section ramenés à 28px
   (titres de contenu ~45px, disproportionnés pour un reçu). */
@media (min-width: 769px) {
  .woocommerce-order .woocommerce-columns--addresses {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  .woocommerce-order .woocommerce-columns--addresses::before,
  .woocommerce-order .woocommerce-columns--addresses::after {
    display: none;
  }
  .woocommerce-order .woocommerce-columns--addresses > .woocommerce-column {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }
  .woocommerce-order h2 {
    font-size: 28px !important;
  }
}

/* ---------- Catégories : images dans la description ----------
   L'illustration "La meilleure position…" (catégorie Hamac) est insérée
   en taille réelle (1024×1024) : sur ordinateur elle occupait tout
   l'écran. Bornée à 560px, centrée ; sur mobile elle reste pleine
   largeur. (01/10/2026) */
.tax-product_cat .wp-block-image img {
  display: block;
  max-width: min(100%, 560px) !important;
  height: auto !important;
  margin-left: auto;
  margin-right: auto;
}
.tax-product_cat .wp-block-image figure {
  margin-bottom: 32px !important;
}

/* ---------- Champs de formulaire : pas de zoom automatique (iPhone) ----------
   Safari iOS zoome sur tout champ dont le texte fait moins de 16px dès
   qu'on le touche, et ne dézoome pas : la page devient plus large que
   l'écran et glisse de gauche à droite (signalé sur Contact, le 01/10 ;
   même cas sur Commande, Brevo, Mon compte, panier, quantité, tri).
   Tous les champs étaient à 15px → 16px sur mobile et écrans tactiles.
   Ordinateur inchangé. */
@media (max-width: 768px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select,
  textarea,
  body .kerlm-contact-form-wrap .wpcf7 textarea { /* style intégré à la page Contact */
    font-size: 16px !important;
  }
}