/*
Theme Name:   Rebrousse Poils
Theme URI:    https://boutique.kilianmilliez.fr
Description:  Thème enfant de Storefront pour la boutique en ligne Rebrousse Poils. Direction artistique reprise du logo et de l'affiche de la marque : blanc et gris brume, bleus lagon, bulles de savon et empreintes de pattes, titres en serif.
Author:       Kilian Milliez
Template:     storefront
Version:      2.0.0
Text Domain:  lea-storefront
Tags:         e-commerce, woocommerce, light
*/

/* ==========================================================================
   1. Polices — auto-hébergées (pas de CDN Google : RGPD)

   Playfair Display est la fonte variable : un seul fichier de 38 Ko couvre
   toutes les graisses de titre, au lieu d'un .woff2 par graisse.
   ========================================================================== */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;          /* fonte variable : plage, pas une valeur */
  font-display: swap;
  src: url('assets/fonts/playfair-display-var.woff2') format('woff2-variations'),
       url('assets/fonts/playfair-display-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/nunito-sans-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/nunito-sans-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/nunito-sans-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. Jetons de design — palette relevée sur l'affiche et le logo

   Toutes les paires texte/fond utilisées ci-dessous sont ≥ 4.5:1 (WCAG AA).
   La plus juste est le texte atténué sur brume, à 5,02:1.
   ========================================================================== */

:root {
  /* Couleurs */
  --lea-page:       #F7F9FB;  /* fond général, blanc à peine bleuté */
  --lea-surface:    #FFFFFF;  /* cartes, entête */
  --lea-mist:       #EDEFF1;  /* sections alternées — le gris de l'affiche */
  --lea-wash:       #E6F4FA;  /* aplats bleu très clair, badges */
  --lea-sky:        #A9DCEF;  /* bulles, accents pleins */
  --lea-sky-line:   #7CC5E0;  /* contours de bulles */
  --lea-blue:       #26708C;  /* primaire : boutons, liens */
  --lea-blue-dark:  #1D5A73;  /* survol */
  --lea-blue-deep:  #14485C;  /* pied de page, bandeau final */
  --lea-ink:        #1A1A1A;  /* titres et texte principal */
  --lea-muted:      #5A6B73;  /* texte secondaire */
  --lea-border:     #DDE5EA;
  --lea-danger:     #C2452D;

  /* Typographie */
  --lea-font-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --lea-font-body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Rayons — généreux, dans l'esprit « bulle » du logo */
  --lea-radius-sm: 12px;
  --lea-radius:    20px;
  --lea-radius-lg: 32px;
  --lea-radius-pill: 999px;

  /* Ombres — échelle cohérente, teintées de bleu, jamais de valeur au hasard */
  --lea-shadow-sm: 0 1px 2px rgba(20, 72, 92, .06), 0 2px 8px rgba(20, 72, 92, .05);
  --lea-shadow-md: 0 4px 12px rgba(20, 72, 92, .09), 0 12px 28px rgba(20, 72, 92, .07);
  --lea-shadow-lg: 0 8px 24px rgba(20, 72, 92, .11), 0 24px 48px rgba(20, 72, 92, .09);

  /* Mouvement */
  --lea-ease: cubic-bezier(.22, .61, .36, 1);
  --lea-fast: 160ms;
  --lea-slow: 260ms;

  /* Rythme vertical */
  --lea-section: clamp(3rem, 7vw, 5.5rem);

  /* Empreinte de patte en filigrane. Data-URI plutôt qu'un fichier : une
     requête de moins pour 400 octets, et la couleur reste éditable ici. */
  --lea-paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%23E2E6E9'%3E%3Cellipse cx='16' cy='27' rx='6.5' ry='8.5' transform='rotate(-18 16 27)'/%3E%3Cellipse cx='29' cy='17' rx='7' ry='9.5'/%3E%3Cellipse cx='43' cy='19' rx='7' ry='9.5' transform='rotate(14 43 19)'/%3E%3Cellipse cx='54' cy='32' rx='6' ry='8' transform='rotate(34 54 32)'/%3E%3Cpath d='M34 33c8 0 15 6 15 13 0 6-5 10-11 10-3 0-5-1-8-1s-5 1-8 1c-6 0-11-4-11-10 0-7 7-13 15-13z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   3. Base
   ========================================================================== */

body {
  background-color: var(--lea-page);
  color: var(--lea-ink);
  font-family: var(--lea-font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.site-title, .lea-h {
  font-family: var(--lea-font-head);
  color: var(--lea-ink);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.005em;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }

p { max-width: 68ch; }

a { color: var(--lea-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--lea-blue-dark); }

/* Anneau de focus visible partout — jamais supprimé */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--lea-blue);
  outline-offset: 2px;
  border-radius: var(--lea-radius-sm);
}

::selection { background: var(--lea-sky); color: var(--lea-ink); }

/* Chiffres alignés : évite que les prix « sautent » d'une ligne à l'autre */
.price, .woocommerce-Price-amount, .quantity input, .order-total {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   4. Décor — bulles et pattes

   Purement ornemental : les éléments porteurs sont en aria-hidden côté PHP,
   et rien ici ne doit intercepter le pointeur.
   ========================================================================== */

.lea-deco { pointer-events: none; user-select: none; }

.lea-bubbles {
  color: var(--lea-sky-line);
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.lea-bubbles svg { width: 100%; height: 100%; display: block; }

/* Filigrane de pattes : deux empreintes, en haut à gauche et en bas à droite.
   Volontairement discret — à 8 % d'opacité c'est une texture, pas un motif. */
.lea-paws::before,
.lea-paws::after {
  content: '';
  position: absolute;
  width: clamp(64px, 9vw, 118px);
  aspect-ratio: 1;
  background: var(--lea-paw) center / contain no-repeat;
  opacity: .85;
  pointer-events: none;
  z-index: 0;
}
.lea-paws::before { top: 6%;    left: 1.5rem;  transform: rotate(-24deg); }
.lea-paws::after  { bottom: 8%; right: 1.5rem; transform: rotate(18deg); }

/* Les pattes vivent dans la marge laissée par la colonne de contenu (1170 px).
   En dessous, cette marge n'existe plus : elles passeraient sous le texte. */
@media (max-width: 1279px) {
  .lea-paws::before, .lea-paws::after { display: none; }
}

/* ==========================================================================
   5. Entête
   ========================================================================== */

.site-header {
  background-color: var(--lea-surface);
  border-bottom: 1px solid var(--lea-border);
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

/* Le logo porte déjà le nom de la boutique : on le laisse respirer et on le borne,
   sinon Storefront l'étire jusqu'à la largeur de la colonne. */
.site-header .custom-logo-link img,
.site-header .site-logo-anchor img {
  max-height: 104px;
  width: auto;
  margin-bottom: 0;
}

.site-header .site-branding .site-title a,
.site-header .beta.site-title a {
  font-family: var(--lea-font-head);
  font-weight: 700;
  color: var(--lea-ink);
  font-size: 1.85rem;
  text-decoration: none;
}

.site-header .site-branding .site-title a:hover { color: var(--lea-blue); }
.site-header .site-description { color: var(--lea-muted); font-style: italic; }

/* Storefront ne pose aucune gouttière entre les entrées : sans ça, elles se touchent. */
.main-navigation ul.menu > li,
.main-navigation ul.nav-menu > li { margin-right: 1.75rem; }
.main-navigation ul.menu > li:last-child,
.main-navigation ul.nav-menu > li:last-child { margin-right: 0; }

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
  font-family: var(--lea-font-body);
  font-weight: 600;
  color: var(--lea-ink);
  padding: .7rem 0;
  position: relative;
  transition: color var(--lea-fast) var(--lea-ease);
}

.main-navigation ul.menu > li > a::after,
.main-navigation ul.nav-menu > li > a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: .25rem;
  height: 2px;
  background: var(--lea-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--lea-fast) var(--lea-ease);
}

.main-navigation ul.menu > li > a:hover::after,
.main-navigation ul.nav-menu > li > a:hover::after,
.main-navigation ul.menu > li.current-menu-item > a::after,
.main-navigation ul.nav-menu > li.current-menu-item > a::after { transform: scaleX(1); }

/* La page courante reste identifiable sans dépendre de la seule couleur */
.main-navigation ul li.current-menu-item > a { color: var(--lea-blue); font-weight: 700; }

/* --- Sous-menus --- */

/* Sous 768 px, Storefront sort le sous-menu du flottant : il s'affiche imbriqué
   et indenté dans le menu déplié. On n'y touche donc qu'aux liens ; l'habillage
   en panneau flottant est réservé au grand écran (§ 10). */
.main-navigation ul.menu ul.sub-menu li a,
.main-navigation ul.nav-menu ul.children li a,
.handheld-navigation ul.menu ul.sub-menu li a {
  display: flex;
  align-items: center;
  min-height: 44px;          /* cible tactile */
  color: var(--lea-ink);
  font-weight: 600;
  font-size: .9375em;
}

/* Storefront pose un survol gris à 2,5 % d'alpha et repeint le texte en #5b5b5b
   depuis le personnalisateur : on repasse au bleu de la maison. Les trois
   classes du sélecteur suffisent à l'emporter, sans !important. */
.main-navigation ul.menu ul.sub-menu li a:hover,
.main-navigation ul.menu ul.sub-menu li:hover > a,
.main-navigation ul.menu ul.sub-menu li.focus > a,
.main-navigation ul.nav-menu ul.children li a:hover {
  background-color: var(--lea-wash);
  color: var(--lea-blue);
}

/* Même raison : la règle générée passe les entrées de premier niveau au gris. */
.main-navigation ul.menu > li > a:hover,
.main-navigation ul.menu > li:hover > a,
.main-navigation ul.nav-menu > li > a:hover { color: var(--lea-blue); }

.site-header-cart .cart-contents {
  background: var(--lea-blue);
  color: #fff;
  border-radius: var(--lea-radius-pill);
  padding: .6rem 1.3rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  min-height: 44px;      /* cible tactile */
  line-height: 1.9;
  transition: background var(--lea-fast) var(--lea-ease);
}
.site-header-cart .cart-contents:hover { background: var(--lea-blue-dark); color: #fff; }
.site-header-cart .cart-contents .count { opacity: .85; }
/* L'icône panier est un ::after en ligne : sans marge, elle colle au texte. */
.site-header-cart .cart-contents::after { margin-left: .5rem; }

.site-search .widget_product_search form input[type="search"] { border-radius: var(--lea-radius-pill); }

/* ==========================================================================
   6. Boutons
   ========================================================================== */

button, .button, input[type="submit"], input[type="button"],
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button {
  font-family: var(--lea-font-body);
  font-weight: 700;
  background-color: var(--lea-blue);
  color: #fff;
  border: none;
  border-radius: var(--lea-radius-pill);
  padding: .85rem 1.6rem;
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--lea-fast) var(--lea-ease),
              box-shadow var(--lea-fast) var(--lea-ease),
              transform var(--lea-fast) var(--lea-ease);
}

button:hover, .button:hover, input[type="submit"]:hover,
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover,
.woocommerce button.button:hover, .woocommerce input.button:hover {
  background-color: var(--lea-blue-dark);
  color: #fff;
  box-shadow: var(--lea-shadow-md);
}

/* Retour d'appui : transform seul, aucun décalage de mise en page */
button:active, .button:active, .woocommerce a.button:active,
.woocommerce button.button:active { transform: scale(.97); }

.woocommerce #respond input#submit.alt, .woocommerce a.button.alt,
.woocommerce button.button.alt, .woocommerce input.button.alt {
  background-color: var(--lea-blue-deep);
  color: #fff;
}
.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {
  background-color: #0E3648;
  color: #fff;
}

/* Bouton secondaire : contour bleu */
.lea-btn-ghost, .woocommerce a.button.lea-btn-ghost {
  background: transparent;
  color: var(--lea-blue);
  box-shadow: inset 0 0 0 2px var(--lea-blue);
}
.lea-btn-ghost:hover, .woocommerce a.button.lea-btn-ghost:hover {
  background: var(--lea-blue);
  color: #fff;
}

/* État désactivé lisible et non cliquable */
button:disabled, .button:disabled, .woocommerce button.button:disabled,
.woocommerce button.button.disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ==========================================================================
   7. Sections de la page d'accueil
   ========================================================================== */

/* Storefront enferme le contenu dans .col-full (1170 px + gouttières). Sur
   l'accueil les bandeaux doivent aller d'un bord à l'autre de la fenêtre : on
   neutralise le conteneur ici, et c'est .lea-wrap qui borne le contenu de
   chaque section. Portée limitée à .lea-front — ailleurs, .col-full sert. */
.lea-front .site-content .col-full {
  max-width: none;
  padding-inline: 0;
  /* Sous 1170 px, Storefront ne borne plus .col-full par une largeur mais par
     des marges latérales (2.6em puis 1.4em) : sans ça, les bandeaux restent
     détachés des bords sur tablette et mobile. */
  margin-inline: 0;
}

.lea-section { padding-block: var(--lea-section); position: relative; }
.lea-section--mist { background: var(--lea-mist); }

.lea-wrap {
  width: 100%;
  max-width: 1170px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  position: relative;
  z-index: 1;
}

/* p{max-width:68ch} empêche un simple text-align:center de centrer dans la
   section : il faut aussi recentrer la boîte. */
.lea-center { text-align: center; max-width: none; margin-inline: auto; }
.lea-center--top { margin-top: 2.5rem; }

.lea-section-head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.lea-section-head p { margin-inline: auto; color: var(--lea-muted); max-width: 58ch; }

/* Le trait sous les intertitres reprend le soulignement des titres de
   l'affiche, en plus léger. */
.lea-section-head h2 { margin-bottom: .75rem; }
.lea-section-head h2::after {
  content: '';
  display: block;
  width: 68px;
  height: 3px;
  margin: .85rem auto 0;
  border-radius: var(--lea-radius-pill);
  background: var(--lea-sky-line);
}

.lea-eyebrow {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lea-blue);
  background: var(--lea-wash);
  border-radius: var(--lea-radius-pill);
  padding: .4rem 1rem;
  margin-bottom: 1rem;
}

/* --- Accroche --- */

.lea-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 480px at 88% -20%, var(--lea-wash) 0%, rgba(230, 244, 250, 0) 65%),
    linear-gradient(180deg, var(--lea-surface) 0%, var(--lea-page) 100%);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

/* La courbe grise de l'affiche : une ellipse très large qui déborde à droite.
   Elle n'apparaît qu'en deux colonnes — sur une colonne, elle couperait la
   moitié droite du texte d'un trait net. */
.lea-hero::before {
  display: none;
  content: '';
  position: absolute;
  top: -35%;
  right: -22%;
  width: 70%;
  height: 150%;
  border-radius: 50%;
  background: var(--lea-mist);
  opacity: .7;
  z-index: 0;
}

.lea-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

.lea-hero__title { margin: 0 0 1rem; }
.lea-hero__title em { font-style: italic; color: var(--lea-blue); }

.lea-hero__lead {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--lea-muted);
  margin-bottom: 1.75rem;
}

.lea-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; }

.lea-hero__note {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .9375rem; color: var(--lea-muted);
}
.lea-hero__note svg { flex: none; color: var(--lea-blue); margin-top: .2rem; }

/* Bulles et illustration partagent la même boîte : sans largeur commune, les
   bulles s'étalent sur toute la colonne quand l'image, elle, reste centrée. */
.lea-hero__media { position: relative; max-width: 34rem; margin-inline: auto; }

/* Le logo est une illustration détourée : `contain`, jamais `cover`, et un
   ratio réservé pour qu'il ne fasse pas sauter la mise en page au chargement. */
.lea-hero__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 411 / 374;
  object-fit: contain;
  display: block;
}

/* --- Bandeau de réassurance --- */

.lea-facts {
  background: var(--lea-surface);
  border-block: 1px solid var(--lea-border);
}
.lea-facts .lea-wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1rem;
  padding-block: 2rem;
}
.lea-facts__item { display: flex; gap: .85rem; align-items: flex-start; }
.lea-facts__item svg { flex: none; color: var(--lea-blue); margin-top: .15rem; }
.lea-facts__item strong {
  display: block; font-family: var(--lea-font-head); font-weight: 700;
  color: var(--lea-ink); font-size: 1rem; margin-bottom: .1rem;
}
.lea-facts__item span, .lea-facts__item a {
  font-size: .875rem; color: var(--lea-muted); line-height: 1.45;
  display: block;
}
/* L'adresse e-mail fait 28 caractères pour une colonne de 250 px : sans
   overflow-wrap elle déborde, et à .875rem elle se coupe en plein milieu. */
.lea-facts__item a { font-size: .8125rem; overflow-wrap: anywhere; }
.lea-facts__item a { color: var(--lea-blue); font-weight: 600; text-decoration: none; }
.lea-facts__item a:hover { text-decoration: underline; }

/* --- Section « la boutique » --- */

.lea-story__grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem); align-items: center;
}
.lea-story__media { position: relative; }
.lea-story__media img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--lea-radius-lg); box-shadow: var(--lea-shadow-md); display: block;
}
.lea-story__list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.lea-story__list li {
  display: flex; gap: .75rem; align-items: flex-start;
  padding-block: .55rem; color: var(--lea-ink);
}
.lea-story__list svg { flex: none; color: var(--lea-blue); margin-top: .3rem; }

/* --- Bandeau final --- */

/* Bandeau clair, pas foncé : le pied de page est déjà bleu nuit, et empiler
   deux blocs sombres écrase la fin de page. L'affiche est claire de bout en
   bout, on s'y tient. */
.lea-cta {
  position: relative;
  overflow: hidden;
  background: var(--lea-wash);
  color: var(--lea-ink);
  border-radius: var(--lea-radius-lg);
  padding: clamp(2.25rem, 5vw, 3.5rem);
  text-align: center;
}
.lea-cta .lea-bubbles { opacity: .5; }
.lea-cta > *:not(.lea-bubbles) { position: relative; z-index: 1; }
.lea-cta h2 { margin-top: 0; }
.lea-cta p { color: var(--lea-muted); margin-inline: auto; }
.lea-cta .button { margin-top: 1.25rem; }

.lea-cta__links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.75rem;
  margin: 1.75rem 0 0; padding: 0; list-style: none;
}
.lea-cta__links a {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--lea-blue); font-weight: 600; text-decoration: none;
  min-height: 44px;                       /* cible tactile */
}
.lea-cta__links a:hover { color: var(--lea-blue-dark); text-decoration: underline; }
.lea-cta__links svg { flex: none; }

/* ==========================================================================
   8. Fiches produit / catalogue
   ========================================================================== */

/* Storefront pose sa grille en flottants, et seulement si le body porte une de
   ses classes de gabarit (page-template-template-homepage-php…). Notre
   front-page.php n'en porte aucune : on remplace par une vraie grille CSS, plus
   prévisible et réellement responsive. */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }   /* clearfix hérité, inutile en grille */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  /* !important assumé : sur les archives, Storefront cible
     « .storefront-full-width-content .site-main ul.products.columns-4 li.product »,
     plus spécifique que tout sélecteur raisonnable ici. Sans ça, la largeur en
     pourcentage s'applique *dans* la piste de grille et les colonnes s'écrasent. */
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--lea-surface);
  border: 1px solid var(--lea-border);
  border-radius: var(--lea-radius);
  padding: .75rem .75rem 1.15rem;
  text-align: left;
  transition: transform var(--lea-slow) var(--lea-ease),
              box-shadow var(--lea-slow) var(--lea-ease),
              border-color var(--lea-slow) var(--lea-ease);
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--lea-shadow-md);
  border-color: var(--lea-sky);
}

.woocommerce ul.products li.product a img {
  border-radius: var(--lea-radius-sm);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-bottom: .9rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--lea-font-head);
  font-weight: 700;
  font-size: 1.125rem !important;
  color: var(--lea-ink);
  padding: 0 .35rem .25rem;
  line-height: 1.3;
}

.woocommerce ul.products li.product .price {
  font-family: var(--lea-font-body);
  color: var(--lea-blue);
  font-weight: 700;
  font-size: 1.125rem;
  padding: 0 .35rem;
  display: block;
  margin-bottom: .85rem;
}
.woocommerce ul.products li.product .price del { color: var(--lea-muted); font-weight: 400; opacity: 1; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

.woocommerce ul.products li.product .button {
  margin: auto .35rem 0;   /* colle en bas : les boutons s'alignent malgré des titres de longueurs différentes */
  align-self: flex-start;
  font-size: .9375rem;
  padding: .7rem 1.2rem;
}

/* Pastille promo : couleur + texte, pas la couleur seule. La carte est en
   position:relative (plus haut) pour lui servir de repère. */
.woocommerce span.onsale {
  position: absolute;
  z-index: 2;
  background: var(--lea-danger);
  color: #fff;
  border-radius: var(--lea-radius-pill);
  font-family: var(--lea-font-body);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .04em;
  padding: .3rem .85rem;
  min-height: 0;
  min-width: 0;
  line-height: 1.6;
  top: 1.1rem;
  left: 1.1rem;
  right: auto;
  margin: 0;
  box-shadow: var(--lea-shadow-sm);
}

/* Fiche produit détaillée */
.woocommerce div.product .product_title { margin-bottom: .5rem; }
.woocommerce div.product p.price, .woocommerce div.product span.price {
  color: var(--lea-blue); font-weight: 700; font-size: 1.6rem;
}
.woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--lea-radius); }
.woocommerce div.product form.cart div.quantity input.qty {
  border-radius: var(--lea-radius-pill);
  border: 1px solid var(--lea-border);
  min-height: 44px;
  padding: .5rem;
}
/* Storefront dessine des « ourlets » d'onglet en ::before/::after, pensés pour
   des coins carrés : avec nos rayons ça produit des formes bancales. */
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border-radius: var(--lea-radius-sm);
  background: var(--lea-mist);
  border: 1px solid var(--lea-border);
  box-shadow: none;
  margin: 0 0 .5rem;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--lea-surface);
  border-color: var(--lea-sky);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-weight: 700;
  color: var(--lea-blue);
  display: block;
  padding: .7rem 1rem;
}

/* WooCommerce laisse le menu de tri au style natif du navigateur : un
   rectangle gris au milieu d'une page toute en pilules. */
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
  font-family: var(--lea-font-body);
  font-size: .9375rem;
  color: var(--lea-ink);
  background: var(--lea-surface);
  border: 1px solid var(--lea-border);
  border-radius: var(--lea-radius-pill);
  padding: .55rem 1.1rem;
  min-height: 44px;
}

/* Panier / commande */
.woocommerce table.shop_table {
  border-radius: var(--lea-radius);
  border-color: var(--lea-border);
  overflow: hidden;
}
.woocommerce-info, .woocommerce-message, .woocommerce-error {
  border-top-color: var(--lea-blue);
  border-radius: var(--lea-radius-sm);
  background: var(--lea-surface);
}
.woocommerce-error { border-top-color: var(--lea-danger); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border-radius: var(--lea-radius-sm);
  border: 1px solid var(--lea-border);
  min-height: 44px;      /* saisie confortable au doigt */
  padding: .6rem .8rem;
}
.woocommerce form .form-row label { font-weight: 600; color: var(--lea-ink); }
.required { color: var(--lea-danger); }

/* ==========================================================================
   9. Pied de page
   ========================================================================== */

.site-footer {
  background: var(--lea-blue-deep);
  color: #D7E9F2;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
/* Sur fond bleu foncé, les liens héritaient d'un gris sombre (~1,4:1) : illisible.
   On force la couleur au niveau .site-info, où la règle concurrente s'applique. */
.site-footer a,
.site-footer .site-info a { color: #fff; text-decoration: underline; }
.site-footer a:hover,
.site-footer .site-info a:hover { color: var(--lea-sky); }
.site-footer h2, .site-footer h3, .site-footer .widget-title { color: #fff; font-family: var(--lea-font-head); }
.site-footer .site-info { border-top: 1px solid rgba(255,255,255,.15); padding-top: 1.5rem; color: #C4DCE7; }

/* ==========================================================================
   10. Responsive — mobile d'abord
   ========================================================================== */

@media (min-width: 768px) {
  /* Le sous-menu redevient un panneau flottant : il lui faut alors un fond, un
     contour et une ombre. Storefront le peint en #f0f0f0 (couleur dérivée du
     fond d'entête par le personnalisateur), à angles droits et sans ombre — à
     côté de nos pilules, ça fait pièce rapportée. */
  .main-navigation ul.menu ul.sub-menu,
  .main-navigation ul.nav-menu ul.children {
    background-color: var(--lea-surface);
    border: 1px solid var(--lea-border);
    border-radius: var(--lea-radius-sm);
    box-shadow: var(--lea-shadow-md);
    padding-block: .3rem;
    overflow: hidden;
  }

  /* Rien, dans le balisage de Storefront, ne signale qu'une entrée a des
     enfants. Un chevron le dit — décoratif : l'information reste portée par le
     déroulé lui-même. Inutile sur mobile, où le sous-menu est déjà déplié. */
  .main-navigation ul.menu > li.menu-item-has-children > a,
  .main-navigation ul.nav-menu > li.menu-item-has-children > a {
    padding-right: 1.05rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right center / 11px no-repeat;
  }

  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  /* Quatre colonnes plus tôt et l'adresse se casse sur trois lignes. */
  .lea-facts .lea-wrap { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .woocommerce ul.products.columns-4,
  .woocommerce-page ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lea-hero::before { display: block; }
  .lea-hero__grid { grid-template-columns: 1.05fr .95fr; }
  .lea-story__grid { grid-template-columns: .9fr 1.1fr; }
  .lea-story--reverse .lea-story__media { order: 2; }
}

/* ==========================================================================
   11. Accessibilité — mouvement réduit
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .woocommerce ul.products li.product:hover { transform: none; }
}