/*
Theme Name:   Foudelou Atelier
Theme URI:    https://foudelou.eu
Description:  Thème enfant Astra pour Foudelou — boutique d'atelier. Toute la personnalisation vit dans ce fichier ; le bloc TOKENS ci-dessous suffit pour changer l'identité visuelle.
Author:       Foudelou
Template:     astra
Version:      1.0.0
Text Domain:  foudelou-atelier
*/

/* ==========================================================================
   0. POLICES — hébergées sur le site (dossier fonts/)
   Plus de chargement depuis Google : l'adresse IP des visiteurs n'est
   pas transmise à un tiers avant leur consentement (RGPD). Spectral et
   Karla sont sous licence SIL Open Font, libres d'être hébergées ici.
   Karla est une police variable : un seul fichier couvre 400 à 600.
   ========================================================================== */

/* Karla 400 600 — latin-ext */
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/karla-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Karla 400 600 — latin */
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/karla-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Spectral 300 — latin-ext */
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/spectral-latin-ext-300.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Spectral 300 — latin */
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/spectral-latin-300.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Spectral 400 — latin-ext */
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/spectral-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Spectral 400 — latin */
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/spectral-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Spectral 500 — latin-ext */
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/spectral-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Spectral 500 — latin */
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/spectral-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   1. TOKENS — c'est ici que tu modifies l'identité visuelle
   Change une valeur, tout le site suit.
   ========================================================================== */

:root {
  /* Couleurs */
  --fdl-paper:      #FAFAF8;  /* fond général, blanc très légèrement adouci */
  --fdl-surface:    #FFFFFF;  /* fond des zones qui doivent ressortir */
  --fdl-panel:      #F3F2EE;  /* fond des cadres (commandes, adresses), un ton sous le papier */
  --fdl-muted-panel: #6C6D71;  /* texte secondaire sur --fdl-panel (contraste AA) */
  --fdl-ink:        #16171A;  /* texte principal et titres */
  --fdl-muted:      #6E6F73;  /* texte secondaire, prix, métadonnées */
  --fdl-line:       #E1E0DB;  /* filets et bordures */
  --fdl-accent:     #16171A;  /* encre — l'interface s'efface, les foulards portent la couleur */
  --fdl-accent-alt: #3D3E43;  /* accent au survol */
  --fdl-sale:       #8A5A3B;  /* prix soldé, à utiliser rarement */
  --fdl-warning:    #A4561A;  /* stock bas (orange) */
  --fdl-danger:     #A8322A;  /* stock critique, rupture (rouge) */
  --fdl-backorder:        #6B4329;  /* « Disponible sur commande — expédition à partir du… » */
  --fdl-backorder-bg:     #F4ECE5;
  --fdl-backorder-border: #D9C3B2;

  /* Typographie */
  --fdl-serif: "Spectral", Georgia, "Times New Roman", serif;
  --fdl-sans:  "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Échelle typographique (ratio 1.25) */
  --fdl-size-xs:  0.75rem;
  --fdl-size-sm:  0.875rem;
  --fdl-size-base: 1rem;
  --fdl-size-md:  1.25rem;
  --fdl-size-lg:  1.5625rem;
  --fdl-size-xl:  1.953rem;
  --fdl-size-2xl: 2.441rem;
  --fdl-size-3xl: 3.052rem;

  /* Rythme vertical */
  --fdl-space-1: 0.5rem;
  --fdl-space-2: 1rem;
  --fdl-space-3: 1.5rem;
  --fdl-space-4: 2.5rem;
  --fdl-space-5: 4rem;
  --fdl-space-6: 6rem;

  --fdl-transition: 180ms ease;
}

/* On aligne les variables globales d'Astra sur nos tokens pour que le
   personnalisateur et les blocs Gutenberg suivent automatiquement. */
:root {
  --ast-global-color-0: var(--fdl-accent);
  --ast-global-color-1: var(--fdl-accent-alt);
  --ast-global-color-2: var(--fdl-ink);
  --ast-global-color-3: var(--fdl-muted);
  --ast-global-color-4: var(--fdl-paper);
  --ast-global-color-5: var(--fdl-surface);
  --ast-global-color-6: var(--fdl-line);
  --ast-global-color-7: var(--fdl-ink);
  --ast-global-color-8: var(--fdl-accent);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

body {
  background-color: var(--fdl-paper);
  color: var(--fdl-ink);
  font-family: var(--fdl-sans);
  font-size: var(--fdl-size-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
  font-family: var(--fdl-serif);
  color: var(--fdl-ink);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1, .entry-title { font-size: var(--fdl-size-2xl); }
h2 { font-size: var(--fdl-size-xl); }
h3 { font-size: var(--fdl-size-lg); }
h4 { font-size: var(--fdl-size-md); }

/* Longueur de ligne confortable pour le texte courant */
.entry-content > p,
.woocommerce-product-details__short-description p {
  max-width: 68ch;
}

a {
  color: var(--fdl-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--fdl-transition);
}

a:hover { color: var(--fdl-accent-alt); }

/* Accessibilité clavier — toujours visible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--fdl-accent);
  outline-offset: 3px;
}

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

/* ==========================================================================
   3. EN-TÊTE ET NAVIGATION
   ========================================================================== */

.ast-primary-header-bar,
.ast-header-break-point .ast-primary-header-bar {
  background-color: var(--fdl-paper);
  border-bottom: 1px solid var(--fdl-line);
}

.ast-site-identity .site-title,
.ast-site-identity .site-title a {
  font-family: var(--fdl-serif);
  font-size: var(--fdl-size-lg);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--fdl-ink);
}

.main-header-menu .menu-link,
.ast-header-break-point .main-header-menu .menu-link {
  font-family: var(--fdl-sans);
  font-size: var(--fdl-size-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--fdl-ink);
}

.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .current-menu-item > .menu-link {
  color: var(--fdl-accent);
}

/* Sous-menus : sobres, pas d'ombre */
.main-header-menu .sub-menu {
  background-color: var(--fdl-surface);
  border: 1px solid var(--fdl-line);
  box-shadow: none;
}

/* Pastille du nombre d'articles sur « Panier » (functions.php + cart-count.js) */
.fdl-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.4em;
  margin-left: 0.4em;
  padding: 0 0.35em;
  border-radius: 999px;
  background-color: var(--fdl-ink);
  color: var(--fdl-surface);
  font-family: var(--fdl-sans);
  font-size: 0.72em;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: 0.15em;
}

.fdl-cart-count[hidden] {
  display: none;
}

/* ==========================================================================
   3.5 GALERIE D'ACCUEIL
   Le « déroulé » (une photo à la fois, clip-path) a servi d'ouverture
   mobile jusqu'au 2026-09-17 ; remplacé depuis par le collage mobile
   (3.6bis) pour les mêmes raisons que le collage bureau. Sa fonction
   PHP reste dans functions.php, juste débranchée du hook, si besoin d'y
   revenir — règles CSS retirées d'ici pour ne pas encombrer.
   ========================================================================== */

/* --------------------------------------------------------------------
   3.6 COLLAGE D'ACCUEIL — bureau (≥768px)
   Cinq cadres en pleine largeur de page (débordement volontaire hors
   du conteneur de contenu), tailles et rotations irrégulières,
   chevauchement assumé. Chaque cadre change de photo et dérive vers
   une position voisine au même rythme lent — jamais deux cadres qui
   bougent ensemble. Cadres portrait toujours à leur ratio réel (2:3) :
   object-fit: cover ne les recadre donc jamais ; seule la photo au
   format paysage (dans le premier cadre) est légèrement rognée.
   Validé avec la cliente sur maquette le 2026-09-17.
   -------------------------------------------------------------------- */

.fdl-home-collage {
  display: none;
}

@media (min-width: 768px) {
  .fdl-home-collage {
    display: block;
    position: relative;
    /* Sort du conteneur de contenu pour occuper toute la largeur de la
       fenêtre, quelle que soit la marge du thème. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: min(84vh, 760px);
    margin-top: var(--fdl-space-4);
    margin-bottom: var(--fdl-space-4);
    overflow: hidden;
    /* Un ton plus foncé que le papier du site : délimite le bandeau
       sans aller jusqu'au noir du déroulé mobile. */
    background: #dcd8cf;
  }
}

.fdl-home-collage__tile {
  position: absolute;
  opacity: 1;
  transition: left 3.2s ease, top 3.2s ease, width 3.2s ease, transform 3.2s ease, opacity 1.8s ease;
}

/* Ratio 2:3 via le procédé « padding-top » plutôt que la propriété
   aspect-ratio : sur un élément position:absolute, Safari/WebKit ne
   calcule pas toujours de hauteur avec aspect-ratio seul, ce qui rend
   le cadre invisible (0px de haut). Le padding-top se calcule ici sur
   la largeur du cadre lui-même (.ratio fait 100% de la largeur du
   .tile, son seul parent), donc 150% = 2:3 quel que soit le navigateur. */
.fdl-home-collage__ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 150%;
  background: var(--fdl-surface);
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.35);
}

.fdl-home-collage__ph {
  position: absolute;
  inset: 5px;
  overflow: hidden;
}

.fdl-home-collage__ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 2.6s ease, transform 3.4s ease;
}

.fdl-home-collage__ph img.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Ouverture : la photo déjà présente sur le site recouvre tout le
   collage (déjà formé et actif en dessous) pendant quelques secondes,
   puis s'efface. Un calque plein cadre indépendant plutôt qu'un état
   partagé avec les cadres du collage — beaucoup plus fiable d'un
   navigateur à l'autre (essayé, cassé sur plusieurs navigateurs avant
   cette version, 2026-09-17). */
.fdl-home-collage-intro {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: var(--fdl-ink);
  opacity: 1;
  transition: opacity 1.2s ease;
}

.fdl-home-collage-intro.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.fdl-home-collage-intro img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fond flouté : des photos zoomées et floutées derrière les cadres,
   qui changent lentement, indépendamment du rythme des cadres eux-
   mêmes. On devine la photo, on ne la lit pas. */
.fdl-home-collage-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.fdl-home-collage-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(10px) saturate(1.05);
  transform: scale(1.12);
  opacity: 0;
  transition: opacity 3.5s ease;
}

.fdl-home-collage-bg img.is-active {
  opacity: 1;
}

.fdl-home-collage-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(250, 249, 245, 0.22);
}

/* --------------------------------------------------------------------
   3.6bis COLLAGE D'ACCUEIL — mobile (<768px)
   Même principe que le collage bureau, réduit à 2 cadres : rotation et
   chevauchement discrets pour rester lisible en format étroit. Même
   fond flouté. Remplace le déroulé. Validé sur maquette le 2026-09-17.
   -------------------------------------------------------------------- */

.fdl-home-collage-mobile {
  position: relative;
  width: 100%;
  height: min(58vh, 440px);
  margin: var(--fdl-space-4) auto;
  overflow: hidden;
  background: #dcd8cf;
}

@media (min-width: 768px) {
  .fdl-home-collage-mobile {
    display: none;
  }
}

.fdl-home-collage-mobile-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.fdl-home-collage-mobile-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(10px) saturate(1.05);
  transform: scale(1.12);
  opacity: 0;
  transition: opacity 3.5s ease;
}

.fdl-home-collage-mobile-bg img.is-active {
  opacity: 1;
}

.fdl-home-collage-mobile-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(250, 249, 245, 0.22);
}

.fdl-home-collage-mobile__tile {
  position: absolute;
  opacity: 1;
  transition: left 3.2s ease, top 3.2s ease, width 3.2s ease, transform 3.2s ease, opacity 1.8s ease;
}

/* Voir la note sur .fdl-home-collage__ratio : padding-top plutôt
   qu'aspect-ratio pour un rendu fiable sur Safari mobile. */
.fdl-home-collage-mobile__ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 150%;
  background: var(--fdl-surface);
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.35);
}

.fdl-home-collage-mobile__ph {
  position: absolute;
  inset: 4px;
  overflow: hidden;
}

.fdl-home-collage-mobile__ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 2.6s ease, transform 3.4s ease;
}

.fdl-home-collage-mobile__ph img.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Ouverture mobile : même calque simple que sur bureau — voir la note
   sur .fdl-home-collage-intro. */
.fdl-home-collage-mobile-intro {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: var(--fdl-ink);
  opacity: 1;
  transition: opacity 1.2s ease;
}

.fdl-home-collage-mobile-intro.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.fdl-home-collage-mobile-intro img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   4. BOUTONS
   Rectangulaires, pleins, sans ombre. Le contraste fait le travail.
   ========================================================================== */

.ast-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  background-color: var(--fdl-accent);
  color: var(--fdl-surface);
  font-family: var(--fdl-sans);
  font-size: var(--fdl-size-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 1px solid var(--fdl-accent);
  border-radius: 0;
  padding: 0.85em 1.9em;
  line-height: 1.2;
  box-shadow: none;
  transition: background-color var(--fdl-transition), border-color var(--fdl-transition);
}

.ast-button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background-color: var(--fdl-accent-alt);
  border-color: var(--fdl-accent-alt);
  color: var(--fdl-surface);
}

/* Bouton secondaire : contour seul */
.woocommerce a.button.wc-backward,
.woocommerce .cart .button[name="update_cart"] {
  background-color: transparent;
  color: var(--fdl-ink);
  border-color: var(--fdl-line);
}

.woocommerce a.button.wc-backward:hover,
.woocommerce .cart .button[name="update_cart"]:hover {
  background-color: transparent;
  border-color: var(--fdl-ink);
  color: var(--fdl-ink);
}

.woocommerce .button:disabled,
.woocommerce .button.disabled {
  background-color: var(--fdl-line);
  border-color: var(--fdl-line);
  color: var(--fdl-muted);
}

/* ==========================================================================
   5. GRILLE BOUTIQUE
   L'image porte la page. Ni carte, ni bordure, ni ombre.
   ========================================================================== */

.woocommerce ul.products {
  gap: var(--fdl-space-4) var(--fdl-space-3);
}

.woocommerce ul.products li.product {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  text-align: left;
}

.woocommerce ul.products li.product a img {
  margin-bottom: var(--fdl-space-2);
  border-radius: 0;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: opacity var(--fdl-transition);
}

.woocommerce ul.products li.product:hover a img { opacity: 0.88; }

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .ast-woo-shop-product-title {
  font-family: var(--fdl-serif);
  font-size: var(--fdl-size-md);
  font-weight: 400;
  color: var(--fdl-ink);
  letter-spacing: 0;
  padding: 0;
  margin: 0 0 var(--fdl-space-1);
}

.woocommerce ul.products li.product .price {
  font-family: var(--fdl-sans);
  font-size: var(--fdl-size-sm);
  color: var(--fdl-muted);
  font-weight: 400;
}

/* Le bouton d'ajout n'écrase pas la grille : discret, souligné */
.woocommerce ul.products li.product .button {
  background: transparent;
  border: 0;
  color: var(--fdl-ink);
  padding: var(--fdl-space-1) 0 0;
  font-size: var(--fdl-size-xs);
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.woocommerce ul.products li.product .button:hover {
  background: transparent;
  color: var(--fdl-accent);
}

/* Pastille promo : filet fin, jamais un rond rouge */
.woocommerce span.onsale {
  background-color: var(--fdl-surface);
  color: var(--fdl-ink);
  border: 1px solid var(--fdl-ink);
  border-radius: 0;
  font-family: var(--fdl-sans);
  font-size: var(--fdl-size-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: none;
  min-height: auto;
  min-width: auto;
  line-height: 1;
  padding: 0.45em 0.8em;
  top: var(--fdl-space-1);
  left: var(--fdl-space-1);
  right: auto;
  margin: 0;
}

/* Étiquette « Épuisé » (fournie par Astra, libellé dans functions.php) :
   même langage que la pastille promo, en haut à gauche de l'image. */
.woocommerce ul.products li.product .ast-shop-product-out-of-stock {
  top: var(--fdl-space-1);
  left: var(--fdl-space-1);
  right: auto;
  bottom: auto;
  z-index: 2;
  padding: 0.45em 0.8em;
  background-color: var(--fdl-surface);
  border: 1px solid var(--fdl-ink);
  color: var(--fdl-ink);
  font-family: var(--fdl-sans);
  font-size: var(--fdl-size-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: none;
  text-align: left;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link:hover .ast-shop-product-out-of-stock {
  background-color: var(--fdl-surface);
}

/* L'image d'un produit épuisé s'efface légèrement */
.woocommerce ul.products li.product.outofstock a img {
  opacity: 0.55;
  filter: grayscale(0.4);
}

.woocommerce ul.products li.product.outofstock:hover a img { opacity: 0.7; }

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
  font-size: var(--fdl-size-sm);
  color: var(--fdl-muted);
}

/* ==========================================================================
   5.5 RÉSULTATS DE RECHERCHE
   La recherche passe par le gabarit de blog d'Astra (16:9, object-fit: fill),
   pas par la grille boutique : on aligne l'image sur le même cadre 3:4.
   ========================================================================== */

.search-results .ast-blog-featured-section img {
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
}

.search-results .post-thumb-img-content {
  max-width: 160px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   6. FICHE PRODUIT
   ========================================================================== */

.woocommerce div.product .product_title {
  font-family: var(--fdl-serif);
  font-size: var(--fdl-size-2xl);
  font-weight: 400;
  margin-bottom: var(--fdl-space-2);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--fdl-sans);
  font-size: var(--fdl-size-md);
  font-weight: 400;
  color: var(--fdl-ink);
  margin-bottom: var(--fdl-space-3);
}

.woocommerce div.product p.price del { color: var(--fdl-muted); }
.woocommerce div.product p.price ins {
  color: var(--fdl-sale);
  text-decoration: none;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--fdl-ink);
  margin-bottom: var(--fdl-space-3);
  padding-bottom: var(--fdl-space-3);
  border-bottom: 1px solid var(--fdl-line);
}

.woocommerce div.product form.cart { margin-bottom: var(--fdl-space-4); }

.woocommerce div.product form.cart div.quantity input.qty {
  border: 1px solid var(--fdl-line);
  border-radius: 0;
  background: var(--fdl-surface);
  padding: 0.85em 0.5em;
  font-family: var(--fdl-sans);
}

.woocommerce div.product .product_meta {
  font-size: var(--fdl-size-sm);
  color: var(--fdl-muted);
  border-top: 1px solid var(--fdl-line);
  padding-top: var(--fdl-space-2);
}

.woocommerce div.product .product_meta a { color: var(--fdl-muted); }

/* Stock : n'apparaît que lorsqu'il en reste peu (seuils dans functions.php) */
.woocommerce div.product .ast-stock-detail {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fdl-size-sm);
  margin-bottom: var(--fdl-space-2);
}

/* Pas de libellé « Disponibilité : », le message d'alerte se suffit */
.woocommerce div.product .ast-stock-detail .ast-stock-avail {
  display: none;
}

.woocommerce div.product .stock.fdl-stock-low,
.woocommerce div.product .stock.fdl-stock-critical,
.woocommerce div.product .stock.available-on-backorder {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin: 0;
  font-weight: 600;
}

.woocommerce div.product .stock.fdl-stock-low { color: var(--fdl-warning); }

/* Réapprovisionnement (« Disponible sur commande — expédition à partir du… ») :
   petite étiquette bronze, bien visible sans évoquer une alerte (Astra l'affichait en vert pâle). */
.woocommerce div.product .stock.available-on-backorder {
  color: var(--fdl-backorder);
  background: var(--fdl-backorder-bg);
  border: 1px solid var(--fdl-backorder-border);
  border-radius: 3px;
  padding: 0.45em 0.8em;
}

.woocommerce div.product .stock.fdl-stock-critical,
.woocommerce div.product .stock.out-of-stock { color: var(--fdl-danger); }

/* Pastille de couleur devant le message */
.woocommerce div.product .stock.fdl-stock-low::before,
.woocommerce div.product .stock.fdl-stock-critical::before,
.woocommerce div.product .stock.available-on-backorder::before {
  content: '';
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background-color: currentColor;
}

/* Onglets : filets fins, pas d'onglets en relief */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin-bottom: var(--fdl-space-3);
  border-bottom: 1px solid var(--fdl-line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0 var(--fdl-space-3) 0 0;
  padding: 0 0 var(--fdl-space-1);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--fdl-sans);
  font-size: var(--fdl-size-sm);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--fdl-muted);
  padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--fdl-ink);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom: 1px solid var(--fdl-ink);
  margin-bottom: -1px;
}

/* Galerie */
.woocommerce div.product div.images img { border-radius: 0; }

.woocommerce div.product div.images .flex-control-thumbs {
  margin-top: var(--fdl-space-1);
  gap: var(--fdl-space-1);
  display: flex;
}

.woocommerce div.product div.images .flex-control-thumbs li { width: auto; flex: 0 0 88px; }

/* Produits liés */
.woocommerce .related > h2,
.woocommerce .upsells > h2 {
  font-size: var(--fdl-size-lg);
  margin-bottom: var(--fdl-space-3);
  padding-bottom: var(--fdl-space-1);
  border-bottom: 1px solid var(--fdl-line);
}

/* ==========================================================================
   6.5 FICHE PRODUIT — MISE EN PAGE
   Galerie à gauche, vignettes en colonne ; à droite la colonne d'achat :
   titre, note, prix, résumé, panier, cadre livraison, accordéon, meta.
   L'ordre est fixé dans functions.php.
   ========================================================================== */

/* L'accordéon est désormais dans la colonne : les produits liés repassent
   sous la galerie et la colonne. */
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products {
  clear: both;
  padding-top: var(--fdl-space-4);
}

/* Note des avis sous le titre (visible dès le premier avis) */
.woocommerce div.product .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 var(--fdl-space-2);
  font-size: var(--fdl-size-sm);
}

.woocommerce div.product .woocommerce-product-rating .star-rating {
  float: none;
  margin: 0;
}

.woocommerce .star-rating,
.woocommerce p.stars a {
  color: var(--fdl-ink);
}

.woocommerce div.product .woocommerce-review-link {
  color: var(--fdl-muted);
  text-decoration: none;
}

.woocommerce div.product .woocommerce-review-link:hover {
  color: var(--fdl-ink);
  text-decoration: underline;
}

/* Bouton d'ajout : il occupe toute la largeur restante à côté de la quantité */
.woocommerce div.product form.cart:not(.variations_form),
.woocommerce div.product .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: stretch;
  gap: var(--fdl-space-1);
}

.woocommerce div.product form.cart {
  margin-bottom: var(--fdl-space-2);
}

.woocommerce div.product form.cart .single_add_to_cart_button {
  flex: 1;
  margin: 0;
}

/* Choix de la taille : boutons S / M / L (functions.php, variation-buttons.js).
   Le menu déroulant d'origine reste dans la page, masqué : WooCommerce y lit
   la variante choisie. Une taille épuisée reste cliquable, barrée, pour
   donner accès à l'alerte de retour en stock. */
.woocommerce div.product form.variations_form select.fdl-variation-select {
  display: none !important;
}

/* Le tableau des choix devient une simple pile : libellé, puis boutons */
.woocommerce div.product form.variations_form table.variations,
.woocommerce div.product form.variations_form table.variations tbody,
.woocommerce div.product form.variations_form table.variations tr,
.woocommerce div.product form.variations_form table.variations th,
.woocommerce div.product form.variations_form table.variations td {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.woocommerce div.product form.variations_form table.variations {
  margin: 0 0 var(--fdl-space-2);
}

.woocommerce div.product form.variations_form table.variations tr + tr {
  margin-top: var(--fdl-space-2);
}

.woocommerce div.product form.variations_form table.variations th.label {
  margin-bottom: var(--fdl-space-1);
  font-family: var(--fdl-sans);
  font-size: var(--fdl-size-sm);
  font-weight: 600;
  line-height: 1.2;
  color: var(--fdl-ink);
}

.woocommerce div.product form.variations_form table.variations th.label label {
  margin: 0;
  font-weight: inherit;
}

.woocommerce div.product form.variations_form .reset_variations {
  display: inline-block;
  margin-top: var(--fdl-space-1);
  font-size: var(--fdl-size-xs);
  color: var(--fdl-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.fdl-variation-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fdl-space-1);
}

.fdl-variation-buttons[hidden],
.fdl-variation-button[hidden] {
  display: none;
}

.woocommerce div.product form.variations_form .fdl-variation-button {
  min-width: 48px;
  min-height: 44px; /* cible tactile confortable */
  padding: 0.5em 0.9em;
  background-color: var(--fdl-surface);
  border: 1px solid var(--fdl-line);
  border-radius: 0;
  color: var(--fdl-ink);
  font-family: var(--fdl-sans);
  font-size: var(--fdl-size-sm);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color var(--fdl-transition), background-color var(--fdl-transition), color var(--fdl-transition);
}

.woocommerce div.product form.variations_form .fdl-variation-button:hover {
  border-color: var(--fdl-ink);
}

.woocommerce div.product form.variations_form .fdl-variation-button:focus-visible {
  outline: 2px solid var(--fdl-ink);
  outline-offset: 2px;
}

.woocommerce div.product form.variations_form .fdl-variation-button.is-selected {
  background-color: var(--fdl-ink);
  border-color: var(--fdl-ink);
  color: var(--fdl-surface);
}

/* Taille épuisée : texte atténué et trait en diagonale */
.woocommerce div.product form.variations_form .fdl-variation-button.is-out-of-stock {
  color: var(--fdl-muted);
  background-image: linear-gradient(to top left, transparent calc(50% - 0.5px), var(--fdl-line) 50%, transparent calc(50% + 0.5px));
}

.woocommerce div.product form.variations_form .fdl-variation-button.is-out-of-stock.is-selected {
  background-color: var(--fdl-muted);
  border-color: var(--fdl-muted);
  color: var(--fdl-surface);
  background-image: linear-gradient(to top left, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.45) 50%, transparent calc(50% + 0.5px));
}

.woocommerce div.product form.variations_form .fdl-variation-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Taille épuisée choisie : la quantité et l'ajout au panier (désactivés)
   s'effacent, le bouton « Me prévenir » de l'alerte de retour en stock
   (extension Back In Stock Notifier) prend toute la largeur. */
.woocommerce div.product .woocommerce-variation-add-to-cart:has(.wc-variation-is-unavailable) {
  display: none;
}

/* Astra fait flotter les boutons du formulaire d'achat
   (.woocommerce-js div.product form.cart .button) : il faut le citer pour
   l'emporter. */
.woocommerce div.product form.cart .woocommerce-variation-availability .cwg_popup_submit {
  display: block;
  float: none;
  width: 100%;
  margin: var(--fdl-space-1) 0 0;
}

/* Cadre livraison et paiement */
.woocommerce div.product .fdl-reassurance {
  list-style: none;
  margin: 0 0 var(--fdl-space-2);
  padding: var(--fdl-space-2) var(--fdl-space-3);
  background-color: var(--fdl-panel);
  border: 1px solid var(--fdl-line);
  text-align: center;
  font-size: var(--fdl-size-sm);
  line-height: 1.8;
  color: var(--fdl-ink);
}

.woocommerce div.product .fdl-reassurance li {
  margin: 0;
}

/* Panneaux : la taille sous le texte de description, la référence en petit ;
   la matière avant les conseils d'entretien. */
.woocommerce div.product .woocommerce-tabs #tab-description table.shop_attributes {
  margin: 0 0 var(--fdl-space-1);
}

.woocommerce div.product .woocommerce-tabs #tab-composition table.shop_attributes {
  margin: 0 0 var(--fdl-space-2);
}

.woocommerce div.product .woocommerce-tabs .fdl-product-ref {
  margin: 0;
  font-size: var(--fdl-size-xs);
  letter-spacing: 0.03em;
  color: var(--fdl-muted);
}

/* Catégorie et étiquette sous l'accordéon : un seul filet entre les deux */
.woocommerce div.product .woocommerce-tabs + .product_meta {
  border-top: 0;
  padding-top: var(--fdl-space-2);
}

/* Panneau des avis : le titre répète celui de l'accordéon, on le garde
   seulement pour les lecteurs d'écran. */
.woocommerce div.product #reviews .woocommerce-Reviews-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.fdl-reviews-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fdl-space-1) var(--fdl-space-2);
  margin-bottom: var(--fdl-space-2);
  padding: var(--fdl-space-2);
  background-color: var(--fdl-panel);
  border: 1px solid var(--fdl-line);
}

.fdl-reviews-summary p {
  margin: 0;
}

.fdl-reviews-summary__label,
.fdl-reviews-summary__count {
  font-size: var(--fdl-size-sm);
  color: var(--fdl-muted-panel);
}

.fdl-reviews-summary__score strong {
  font-family: var(--fdl-serif);
  font-size: var(--fdl-size-lg);
  font-weight: 400;
  color: var(--fdl-ink);
}

.woocommerce .fdl-reviews-summary .star-rating {
  float: none;
  margin: 0;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
  border: 1px solid var(--fdl-line);
  border-radius: 0;
}

.woocommerce #reviews .woocommerce-noreviews {
  color: var(--fdl-muted);
  margin-bottom: var(--fdl-space-2);
}

/* Formulaire d'avis : champs du thème, textes secondaires discrets */
.woocommerce div.product #reviews #review_form {
  border-color: var(--fdl-line);
}

.woocommerce #review_form #respond p.stars a {
  color: var(--fdl-ink);
}

.woocommerce #review_form #respond .comment-reply-title {
  display: block;
  margin-bottom: var(--fdl-space-1);
  font-family: var(--fdl-serif);
  font-size: var(--fdl-size-md);
}

.woocommerce #review_form #respond .comment-notes,
.woocommerce #review_form #respond .comment-form-cookies-consent {
  font-size: var(--fdl-size-sm);
  color: var(--fdl-muted);
}

.woocommerce #review_form #respond input[type="text"],
.woocommerce #review_form #respond input[type="email"],
.woocommerce #review_form #respond select,
.woocommerce #review_form #respond textarea {
  width: 100%;
  border: 1px solid var(--fdl-line);
  border-radius: 0;
  background-color: var(--fdl-surface);
  font-family: var(--fdl-sans);
}

.woocommerce #review_form #respond label {
  font-size: var(--fdl-size-sm);
  font-weight: 500;
}

/* Accordéon dans la colonne : pas de grand vide dessous (Astra : 2em / 4em) */
.woocommerce div.product .summary .woocommerce-tabs {
  padding-top: 0;
  margin-bottom: 0;
}

@media (min-width: 922px) {

  /* Même sélecteur que la largeur fixée par Astra, pour passer devant */
  .woocommerce #content .ast-woocommerce-container div.product div.images,
  .woocommerce .ast-woocommerce-container div.product div.images { width: 56%; }

  .woocommerce #content .ast-woocommerce-container div.product div.summary,
  .woocommerce .ast-woocommerce-container div.product div.summary { width: 38%; }

  /* Vignettes en colonne à droite de la grande image, dès qu'il y en a */
  .woocommerce div.product div.images.woocommerce-product-gallery:has(.flex-control-thumbs) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px;
    column-gap: var(--fdl-space-2);
    align-items: start;
  }

  .woocommerce div.product div.images .flex-viewport {
    grid-column: 1;
    grid-row: 1;
  }

  .woocommerce div.product div.images .flex-control-thumbs {
    grid-column: 2;
    grid-row: 1;
    flex-direction: column;
    margin: 0;
  }

  .woocommerce div.product div.images .flex-control-thumbs li {
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
  }

  /* La loupe reste sur la grande image */
  .woocommerce div.product div.images:has(.flex-control-thumbs) .woocommerce-product-gallery__trigger {
    right: calc(88px + var(--fdl-space-2) + 16px);
  }
}

/* Vignette active : pleine opacité, sans cadre (WooCommerce atténue les autres) */
.woocommerce div.product div.images .flex-control-thumbs li img,
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
  border: 0;
  outline: 0;
  box-shadow: none;
}

/* Lot de tailles (functions.php, foudelou_lot_box) : cadre discret sous le
   bouton « Ajouter au panier », bouton en contour pour ne pas lui voler la vedette. */
.woocommerce div.product form.fdl-lot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fdl-space-1) var(--fdl-space-2);
  margin: 0 0 var(--fdl-space-3);
  padding: var(--fdl-space-2);
  background: var(--fdl-panel);
}

.fdl-lot__text {
  margin: 0;
  font-size: var(--fdl-size-sm);
  color: var(--fdl-ink);
}

.fdl-lot__text del {
  color: var(--fdl-muted-panel);
}

.woocommerce div.product form.fdl-lot .fdl-lot__button {
  margin: 0;
  background: transparent;
  color: var(--fdl-ink);
  border: 1px solid var(--fdl-ink);
}

.woocommerce div.product form.fdl-lot .fdl-lot__button:hover,
.woocommerce div.product form.fdl-lot .fdl-lot__button:focus-visible {
  background: var(--fdl-ink);
  color: var(--fdl-surface);
}

/* ==========================================================================
   7. PANIER ET COMMANDE
   ========================================================================== */

.woocommerce table.shop_table {
  border: 0;
  border-radius: 0;
}

.woocommerce table.shop_table th {
  font-family: var(--fdl-sans);
  font-size: var(--fdl-size-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--fdl-ink);
  border-bottom: 1px solid var(--fdl-ink);
  padding: var(--fdl-space-1) var(--fdl-space-2);
}

.woocommerce table.shop_table td {
  border-top: 0;
  border-bottom: 1px solid var(--fdl-line);
  padding: var(--fdl-space-2);
}

.woocommerce table.shop_table .product-name a {
  font-family: var(--fdl-serif);
  font-size: var(--fdl-size-md);
  color: var(--fdl-ink);
  text-decoration: none;
}

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
  background-color: var(--fdl-surface);
  border: 1px solid var(--fdl-line);
  padding: var(--fdl-space-3);
}

.woocommerce-cart .cart-collaterals .cart_totals h2,
.woocommerce-checkout h3 {
  font-size: var(--fdl-size-md);
  margin-bottom: var(--fdl-space-2);
}

/* Champs de formulaire */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
  border: 1px solid var(--fdl-line);
  border-radius: 0;
  background-color: var(--fdl-surface);
  padding: 0.8em 0.9em;
  font-family: var(--fdl-sans);
  font-size: var(--fdl-size-base);
  color: var(--fdl-ink);
  transition: border-color var(--fdl-transition);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--fdl-accent);
  outline: none;
}

.woocommerce form .form-row label {
  font-size: var(--fdl-size-sm);
  font-weight: 500;
  color: var(--fdl-ink);
  margin-bottom: var(--fdl-space-1);
}

.required { color: var(--fdl-accent); text-decoration: none; }

/* Modes de paiement — inclut le sélecteur Mondial Relay */
.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--fdl-line);
  padding: 0 0 var(--fdl-space-2);
}

.woocommerce-checkout #payment ul.payment_methods li {
  padding: var(--fdl-space-1) 0;
}

.woocommerce-checkout #payment div.payment_box {
  background-color: var(--fdl-paper);
  border-radius: 0;
  font-size: var(--fdl-size-sm);
  color: var(--fdl-muted);
}

.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* La carte des points relais doit respirer */
#wcms_shipping_map,
.wcms-map-container,
.wcms_relay_point_list {
  border: 1px solid var(--fdl-line);
  margin-top: var(--fdl-space-2);
}

/* Messages */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top: 0;
  border-left: 2px solid var(--fdl-accent);
  border-radius: 0;
  background-color: var(--fdl-surface);
  color: var(--fdl-ink);
  font-size: var(--fdl-size-sm);
  padding: var(--fdl-space-2) var(--fdl-space-3);
}

.woocommerce-error { border-left-color: var(--fdl-sale); }

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

/* ==========================================================================
   7.5 COMPTE ET COMMANDES
   « Mon compte » (commandes, détail d'une commande) et page de confirmation
   après paiement : chaque bloc est un cadre fermé, sur un fond un ton sous
   le papier. Sélecteurs calqués sur ceux d'Astra pour passer devant.
   ========================================================================== */

/* Menu du compte : même langage que les cadres (filet gris clair, fond
   un ton sous le papier), rubrique active en gras avec un trait d'encre */
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--fdl-line);
  background-color: var(--fdl-panel);
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul li {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--fdl-line);
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul li:first-child {
  border-top: 0;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 0.75em var(--fdl-space-3);
  border: 0;
  color: var(--fdl-ink);
  text-decoration: none;
  transition: background-color var(--fdl-transition);
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul li a:hover {
  background-color: var(--fdl-paper);
  color: var(--fdl-ink);
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul li.is-active a {
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--fdl-ink);
}

/* Titres de blocs : de simples titres au-dessus du cadre (Astra les
   encadrait à moitié pour les raccorder au bloc suivant) */
.woocommerce-account .woocommerce-MyAccount-content h2.woocommerce-order-details__title,
.woocommerce-account .woocommerce-MyAccount-content h2.woocommerce-column__title,
.woocommerce-page.woocommerce-checkout .woocommerce-order h2.woocommerce-order-details__title,
.woocommerce-page.woocommerce-checkout .woocommerce-order h2.woocommerce-column__title {
  background: transparent;
  border: 0;
  padding: 0;
  margin: var(--fdl-space-4) 0 var(--fdl-space-2);
  font-family: var(--fdl-serif);
  font-size: var(--fdl-size-lg);
  font-weight: 400;
}

/* Tableaux : liste des commandes et détail d'une commande */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table,
.woocommerce-page.woocommerce-checkout .woocommerce-order table.shop_table {
  width: 100%;
  margin: 0 0 var(--fdl-space-3);
  border: 1px solid var(--fdl-line);
  border-collapse: collapse;
  border-radius: 0;
  background-color: var(--fdl-panel);
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td,
.woocommerce-page.woocommerce-checkout .woocommerce-order table.shop_table th,
.woocommerce-page.woocommerce-checkout .woocommerce-order table.shop_table td {
  border: 0;
  border-top: 1px solid var(--fdl-line);
  padding: var(--fdl-space-2) var(--fdl-space-3);
  background: transparent;
  text-align: left;
  vertical-align: top;
}

/* Astra donne un fond #fbfbfb à l'en-tête : il prend celui du cadre */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead,
.woocommerce-page.woocommerce-checkout .woocommerce-order table.shop_table thead {
  background: transparent;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th,
.woocommerce-page.woocommerce-checkout .woocommerce-order table.shop_table thead th {
  border-top: 0;
  font-family: var(--fdl-sans);
  font-size: var(--fdl-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fdl-muted-panel);
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot th,
.woocommerce-page.woocommerce-checkout .woocommerce-order table.shop_table tfoot th {
  font-weight: 500;
  color: var(--fdl-muted-panel);
}

/* Boutons dans les tableaux (Voir, Payer, Annuler…) : plus compacts */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table .button,
.woocommerce-page.woocommerce-checkout .woocommerce-order table.shop_table .button {
  padding: 0.6em 1.2em;
  margin: 0 0.4em 0.4em 0;
  font-size: var(--fdl-size-xs);
}

/* Adresses de facturation et de livraison */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details address,
.woocommerce-page.woocommerce-checkout .woocommerce-order .woocommerce-customer-details address {
  border: 1px solid var(--fdl-line);
  border-radius: 0;
  background-color: var(--fdl-panel);
  padding: var(--fdl-space-2) var(--fdl-space-3);
  font-style: normal;
  line-height: 1.7;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details address p,
.woocommerce-page.woocommerce-checkout .woocommerce-order .woocommerce-customer-details address p {
  margin: var(--fdl-space-1) 0 0;
}

/* Récapitulatif après paiement (numéro, date, total, paiement) : une grille
   de cases séparées par des filets pleins, qui reste fermée en retour à la ligne */
.woocommerce-page.woocommerce-checkout .woocommerce-order ul.order_details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1px;
  margin: var(--fdl-space-3) 0 var(--fdl-space-4);
  padding: 0;
  list-style: none;
  border: 1px solid var(--fdl-line);
  background-color: var(--fdl-line);
}

.woocommerce-page.woocommerce-checkout .woocommerce-order ul.order_details li {
  float: none;
  margin: 0;
  padding: var(--fdl-space-2) var(--fdl-space-3);
  border: 0;
  background-color: var(--fdl-panel);
  font-size: var(--fdl-size-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--fdl-muted-panel);
}

/* La dernière case s'étire jusqu'au bout de sa ligne : pas de trou */
.woocommerce-page.woocommerce-checkout .woocommerce-order ul.order_details li:last-child {
  grid-column: auto / -1;
}

.woocommerce-page.woocommerce-checkout .woocommerce-order ul.order_details li strong {
  display: block;
  margin-top: 0.4em;
  font-size: var(--fdl-size-base);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fdl-ink);
}

/* ==========================================================================
   8. PIED DE PAGE
   ========================================================================== */

.site-footer,
.ast-small-footer {
  background-color: var(--fdl-paper);
  border-top: 1px solid var(--fdl-line);
  color: var(--fdl-muted);
  font-size: var(--fdl-size-sm);
}

.site-footer a,
.ast-small-footer a { color: var(--fdl-muted); }
.site-footer a:hover,
.ast-small-footer a:hover { color: var(--fdl-ink); }

/* Liens légaux, sous le copyright (functions.php: foudelou_footer_legal_links) */
.fdl-footer-legal {
  padding: var(--fdl-space-1) 0 var(--fdl-space-2);
  text-align: center;
}

.fdl-footer-legal nav {
  font-size: var(--fdl-size-xs);
  letter-spacing: 0.02em;
}

.fdl-footer-legal a {
  color: var(--fdl-muted);
  text-decoration: none;
}

.fdl-footer-legal a:hover {
  color: var(--fdl-ink);
  text-decoration: underline;
}

.fdl-footer-legal span[aria-hidden] {
  margin: 0 0.5em;
  color: var(--fdl-line);
}

/* ==========================================================================
   8.5 ACCORDÉON (TABS EN ACCORDÉON)
   ========================================================================== */

.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: none;
}

.woocommerce div.product .woocommerce-tabs {
  margin-top: var(--fdl-space-3);
  border-bottom: 1px solid var(--fdl-line);
}

/* L'affichage (display) des panneaux est géré par WooCommerce en inline */
.woocommerce div.product .woocommerce-tabs .wc-tab {
  padding: 0 0 var(--fdl-space-3);
  margin: 0;
  border-top: 0;
  animation: fadeIn 200ms ease-in;
}

/* Les panneaux portent la classe .entry-content : on annule la limite de 68ch */
.woocommerce div.product .woocommerce-tabs .wc-tab > p {
  max-width: none;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Titres d'accordéon (boutons créés en JS) : filets fins, pas d'aplat.
   Sélecteurs renforcés pour passer devant les styles de bouton d'Astra. */
.woocommerce div.product .woocommerce-tabs .wc-accordion-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fdl-space-2);
  margin: 0;
  padding: var(--fdl-space-2) 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--fdl-line);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--fdl-serif);
  font-size: var(--fdl-size-md);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
  text-align: left;
  color: var(--fdl-muted);
  cursor: pointer;
  transition: color var(--fdl-transition);
}

.woocommerce div.product .woocommerce-tabs .wc-accordion-button:hover,
.woocommerce div.product .woocommerce-tabs .wc-accordion-button:focus,
.woocommerce div.product .woocommerce-tabs .wc-accordion-button.active {
  background: transparent;
  border-color: var(--fdl-line);
}

.woocommerce div.product .woocommerce-tabs .wc-accordion-button:hover,
.woocommerce div.product .woocommerce-tabs .wc-accordion-button.active {
  color: var(--fdl-ink);
}

/* Indicateur + / − */
.woocommerce div.product .woocommerce-tabs .wc-accordion-button::after {
  content: '+';
  font-family: var(--fdl-sans);
  font-size: var(--fdl-size-md);
  font-weight: 400;
  line-height: 1;
  color: var(--fdl-muted);
  flex-shrink: 0;
}

.woocommerce div.product .woocommerce-tabs .wc-accordion-button.active::after {
  content: '\2212';
  color: var(--fdl-ink);
}

.woocommerce div.product .woocommerce-tabs .wc-accordion-button:focus-visible {
  outline: 2px solid var(--fdl-accent);
  outline-offset: 2px;
}

/* Tableau « Informations complémentaires » : sans filets ni fond,
   libellé discret à gauche, valeur à droite. */
.woocommerce div.product .woocommerce-tabs table.shop_attributes,
.woocommerce div.product .woocommerce-tabs table.shop_attributes th,
.woocommerce div.product .woocommerce-tabs table.shop_attributes td {
  border: 0;
  background: transparent;
}

.woocommerce div.product .woocommerce-tabs table.shop_attributes {
  width: 100%;
  margin: 0;
}

.woocommerce div.product .woocommerce-tabs table.shop_attributes th {
  width: 35%;
  padding: var(--fdl-space-1) var(--fdl-space-2) var(--fdl-space-1) 0;
  font-family: var(--fdl-sans);
  font-size: var(--fdl-size-sm);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--fdl-muted);
  text-align: left;
  vertical-align: baseline;
}

.woocommerce div.product .woocommerce-tabs table.shop_attributes td {
  padding: var(--fdl-space-1) 0;
  font-style: normal;
  color: var(--fdl-ink);
}

.woocommerce div.product .woocommerce-tabs table.shop_attributes td p {
  margin: 0;
}

.woocommerce div.product .woocommerce-tabs table.shop_attributes td a {
  color: inherit;
  text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs table.shop_attributes td a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   8.6 ICÔNES ENTRETIEN TEXTILE — symboles Ginetex (SVG base64)
   Classes réutilisables : ta cliente peut les ajouter directement en HTML
   ========================================================================== */

/* Classe de base pour tous les soins */
.care-instruction {
  display: inline-flex;
  align-items: center;
  gap: var(--fdl-space-1);
  margin: 0;
  font-size: var(--fdl-size-sm);
}

/* Une consigne par paragraphe (saisie de la cliente) : on resserre la liste */
p:has(> .care-instruction:only-child) {
  margin: 0 0 var(--fdl-space-1);
}

.care-instruction::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  content: '';
}

/* Nettoyage à sec — cercle avec P */
.care-dry-clean::before {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTYxNzFBIiBzdHJva2Utd2lkdGg9IjEuNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI5LjUiLz48cGF0aCBkPSJNMTAgMTYuNVY3LjVoMi42YTIuNCAyLjQgMCAwIDEgMCA0LjhIMTAiLz48L3N2Zz4=');
}

/* Lavage main interdit — baquet barré */
.care-wash-forbidden::before {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTYxNzFBIiBzdHJva2Utd2lkdGg9IjEuNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMy41IDguNSA1LjUgMTguNWgxM2wyLTEwIi8+PHBhdGggZD0iTTMuNSA4LjVxMi4xIDIgNC4yNSAwdDQuMjUgMCA0LjI1IDAgNC4yNSAwIi8+PHBhdGggZD0iTTQgNCAyMCAyME0yMCA0IDQgMjAiLz48L3N2Zz4=');
}

/* Séchage tambour interdit — carré barré */
.care-tumble-dry-forbidden::before {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTYxNzFBIiBzdHJva2Utd2lkdGg9IjEuNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdCB4PSI0IiB5PSI0IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHJ4PSIxIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iNS41Ii8+PHBhdGggZD0iTTQgNCAyMCAyME0yMCA0IDQgMjAiLz48L3N2Zz4=');
}

/* Repassage interdit — fer barré */
.care-ironing-forbidden::before {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTYxNzFBIiBzdHJva2Utd2lkdGg9IjEuNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMyAxNy41aDE2LjV2LTZjMC0yLjUtMS41LTQtNC00SDljLTMuNSAwLTUuNSA0LjUtNiAxMFoiLz48cGF0aCBkPSJNOS41IDcuNXYtMkgxNyIvPjxwYXRoIGQ9Ik00IDQgMjAgMjBNMjAgNCA0IDIwIi8+PC9zdmc+');
}

/* ==========================================================================
   8.7 BANDEAU COOKIES (Complianz)
   Aux couleurs du site, angles droits comme les boutons (section 4).
   « Accepter » et « Refuser » ont exactement le même style : refuser doit
   être aussi visible et aussi simple qu'accepter (lignes directrices
   européennes sur le consentement). Complianz déclare ses couleurs en
   variables sur :root ; les redéfinir sur le bandeau suffit à les
   remplacer, quel que soit l'ordre de chargement des feuilles de style.
   ========================================================================== */

.cmplz-cookiebanner,
#cmplz-manage-consent .cmplz-manage-consent {
  --cmplz_banner_background_color: var(--fdl-surface);
  --cmplz_banner_border_color: var(--fdl-line);
  --cmplz_banner_border_width: 1px;
  --cmplz_banner_border_radius: 0;
  --cmplz_text_color: var(--fdl-ink);
  --cmplz_hyperlink_color: var(--fdl-ink);
  --cmplz_button_border_radius: 0;
  --cmplz_button_accept_background_color: var(--fdl-accent);
  --cmplz_button_accept_border_color: var(--fdl-accent);
  --cmplz_button_accept_text_color: var(--fdl-surface);
  --cmplz_button_deny_background_color: var(--fdl-accent);
  --cmplz_button_deny_border_color: var(--fdl-accent);
  --cmplz_button_deny_text_color: var(--fdl-surface);
  --cmplz_button_settings_background_color: transparent;
  --cmplz_button_settings_border_color: var(--fdl-line);
  --cmplz_button_settings_text_color: var(--fdl-ink);
  --cmplz_slider_active_color: var(--fdl-ink);
  font-family: var(--fdl-sans);
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
  font-family: var(--fdl-sans);
  font-size: var(--fdl-size-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background-color var(--fdl-transition), border-color var(--fdl-transition);
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover {
  background-color: var(--fdl-accent-alt);
  border-color: var(--fdl-accent-alt);
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover {
  border-color: var(--fdl-ink);
}

.cmplz-cookiebanner .cmplz-links .cmplz-link {
  text-underline-offset: 0.2em;
}

/* ==========================================================================
   8.8 ALERTE DE RETOUR EN STOCK (extension Back In Stock Notifier)
   La fenêtre « Me prévenir » arrive avec le style Bootstrap de l'extension
   (bandeau bleu, bouton bleu ciel, angles arrondis). On la ramène au langage
   du site : papier, encre, angles droits, Spectral pour le titre. Les
   sélecteurs reprennent ceux de l'extension pour l'emporter sans !important.
   ========================================================================== */

/* La fenêtre (SweetAlert2) — seulement quand elle contient ce formulaire */
.swal2-popup:has(.cwginstock-subscribe-form) {
  width: min(28rem, calc(100vw - 2rem));
  padding: var(--fdl-space-4) var(--fdl-space-3) var(--fdl-space-3);
  border-radius: 0;
  background: var(--fdl-surface);
  color: var(--fdl-ink);
  font-family: var(--fdl-sans);
}

.swal2-popup:has(.cwginstock-subscribe-form) .swal2-content {
  padding: 0;
}

.swal2-popup:has(.cwginstock-subscribe-form) .swal2-close {
  top: var(--fdl-space-1);
  right: var(--fdl-space-1);
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--fdl-muted);
  font-family: var(--fdl-sans);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
}

.swal2-popup:has(.cwginstock-subscribe-form) .swal2-close:hover {
  background: transparent;
  color: var(--fdl-ink);
}

.swal2-popup:has(.cwginstock-subscribe-form) .swal2-close:focus-visible {
  outline: 2px solid var(--fdl-ink);
  outline-offset: 2px;
  box-shadow: none;
}

/* Le formulaire : plus de cadre ni de bandeau, une simple pile */
.cwginstock-subscribe-form .panel.cwginstock-panel-primary {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.cwginstock-subscribe-form .panel-primary > .panel-heading.cwginstock-panel-heading {
  padding: 0 0 var(--fdl-space-2);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--fdl-ink);
}

.cwginstock-subscribe-form .cwginstock-panel-heading h4 {
  margin: 0;
  font-family: var(--fdl-serif);
  font-size: var(--fdl-size-lg);
  font-weight: 400;
  line-height: 1.2;
  color: var(--fdl-ink);
  text-wrap: balance;
}

.cwginstock-subscribe-form .panel-body.cwginstock-panel-body {
  padding: 0;
}

.cwginstock-subscribe-form .cwginstock-panel-body .row,
.cwginstock-subscribe-form .cwginstock-panel-body .col-md-12 {
  margin: 0;
  padding: 0;
}

.cwginstock-subscribe-form .cwginstock-panel-body .form-group {
  margin: 0;
}

.cwginstock-subscribe-form .cwginstock-panel-body input.cwgstock_email {
  min-height: 44px;
  margin: 0 0 var(--fdl-space-1);
  padding: 0.6em 0.9em;
  background: var(--fdl-surface);
  border: 1px solid var(--fdl-line);
  border-radius: 0;
  color: var(--fdl-ink);
  font-family: var(--fdl-sans);
  font-size: var(--fdl-size-base);
}

.cwginstock-subscribe-form .cwginstock-panel-body input.cwgstock_email:focus {
  border-color: var(--fdl-ink);
  outline: 1px solid var(--fdl-ink);
}

.cwginstock-subscribe-form .cwginstock-panel-body .cwgstock_button {
  width: 100%;
  min-height: 44px;
  padding: 0.85em 1.9em;
  background: var(--fdl-accent);
  border: 1px solid var(--fdl-accent);
  border-radius: 0;
  box-shadow: none;
  color: var(--fdl-surface);
  font-family: var(--fdl-sans);
  font-size: var(--fdl-size-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.2;
  transition: background-color var(--fdl-transition), border-color var(--fdl-transition);
}

.cwginstock-subscribe-form .cwginstock-panel-body .cwgstock_button:hover {
  background: var(--fdl-accent-alt);
  border-color: var(--fdl-accent-alt);
}

.cwginstock-subscribe-form .cwginstock-panel-body .cwgstock_output {
  margin-top: var(--fdl-space-1);
  font-size: var(--fdl-size-sm);
  line-height: 1.5;
}

/* ==========================================================================
   8.9 POP-UP NEWSLETTER (MailPoet)
   « −5 % sur votre première commande ». Le formulaire est créé dans MailPoet
   (sans police ni image extérieures) ; ici, son allure et ses règles
   d'apparition. Voir docs/2026-10-11-newsletter-bienvenue.md.
   ========================================================================== */

/* Jamais par-dessus le bandeau cookies (il apparaît une fois le choix fait),
   ni pendant un achat ou dans l'espace client. */
body:has(.cmplz-cookiebanner.cmplz-show) .mailpoet_form_popup_overlay,
body:has(.cmplz-cookiebanner.cmplz-show) .mailpoet_form_popup,
body.woocommerce-cart .mailpoet_form_popup_overlay,
body.woocommerce-cart .mailpoet_form_popup,
body.woocommerce-checkout .mailpoet_form_popup_overlay,
body.woocommerce-checkout .mailpoet_form_popup,
body.woocommerce-account .mailpoet_form_popup_overlay,
body.woocommerce-account .mailpoet_form_popup {
  display: none !important;
}

.mailpoet_form_popup_overlay {
  background-color: rgba(22, 23, 26, 0.45) !important;
}

div.mailpoet_form.mailpoet_form_popup {
  max-width: calc(100vw - 2rem);
  padding: 2.5rem 2.25rem 2rem !important;
  font-family: var(--fdl-sans);
  color: var(--fdl-ink);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.35);
}

/* (div : le <form> intérieur porte les mêmes classes.)
   Sur téléphone, MailPoet en fait un panneau en bas d'écran limité à 40 %
   de la hauteur, avec ses propres tailles de texte : on lui laisse la place
   de tout montrer. */
@media (max-width: 500px) {
  div.mailpoet_form.mailpoet_form_popup {
    max-width: none;
    max-height: 85vh !important;
    padding: 2rem 1.25rem 1.5rem !important;
  }
}

.mailpoet_form.mailpoet_form_popup .mailpoet-heading {
  margin: 0 0 var(--fdl-space-1) !important;
  font-family: var(--fdl-serif) !important;
  font-size: var(--fdl-size-xl) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  color: var(--fdl-ink) !important;
  text-wrap: balance;
}

.mailpoet_form.mailpoet_form_popup .mailpoet_form_paragraph {
  font-size: var(--fdl-size-sm) !important;
  line-height: 1.6;
  color: var(--fdl-ink);
}

.mailpoet_form.mailpoet_form_popup .mailpoet_form_paragraph.last {
  font-size: var(--fdl-size-xs) !important;
  color: var(--fdl-muted);
}

.mailpoet_form_popup .mailpoet_form_paragraph a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.mailpoet_form_popup input.mailpoet_text {
  width: 100% !important;
  min-height: 44px;
  padding: 0.6em 0.9em !important;
  background-color: var(--fdl-surface) !important;
  border: 1px solid var(--fdl-line) !important;
  border-radius: 0 !important;
  color: var(--fdl-ink) !important;
  font-family: var(--fdl-sans) !important;
  font-size: var(--fdl-size-base) !important;
}

.mailpoet_form_popup input.mailpoet_text:focus {
  border-color: var(--fdl-ink) !important;
  outline: 1px solid var(--fdl-ink);
}

.mailpoet_form_popup input.mailpoet_submit {
  width: 100% !important;
  min-height: 44px;
  padding: 0.85em 1.9em !important;
  background-color: var(--fdl-accent) !important;
  border: 1px solid var(--fdl-accent) !important;
  border-radius: 0 !important;
  color: var(--fdl-surface) !important;
  font-family: var(--fdl-sans) !important;
  font-size: var(--fdl-size-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background-color var(--fdl-transition), border-color var(--fdl-transition);
}

.mailpoet_form_popup input.mailpoet_submit:hover {
  background-color: var(--fdl-accent-alt) !important;
  border-color: var(--fdl-accent-alt) !important;
}

.mailpoet_form_popup .mailpoet_message p {
  font-size: var(--fdl-size-sm);
  line-height: 1.5;
}

/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */

@media (max-width: 921px) {
  :root {
    --fdl-size-2xl: 2rem;
    --fdl-size-3xl: 2.4rem;
  }

  .woocommerce ul.products { gap: var(--fdl-space-3) var(--fdl-space-2); }
}

@media (max-width: 544px) {
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: var(--fdl-size-base);
  }

  .woocommerce-cart .cart-collaterals .cart_totals,
  .woocommerce-checkout #order_review {
    padding: var(--fdl-space-2);
  }
}

/* ==========================================================================
   9.5 BLOCS PLEINE LARGEUR SUR MOBILE
   Sur la page d'accueil, les blocs « pleine largeur » et « large » sortent du
   conteneur : sur une colonne, leurs textes venaient toucher le bord de
   l'écran. On leur rend la marge du site ; les images restent bord à bord.
   ========================================================================== */

@media (max-width: 921px) {

  .entry-content .wp-block-heading.alignfull,
  .entry-content .wp-block-heading.alignwide,
  .entry-content .wp-block-columns.alignwide > .wp-block-column > .wp-block-group,
  .entry-content .wp-block-columns.alignwide > .wp-block-column > p,
  .entry-content .wc-block-product > .wp-block-post-title,
  .entry-content .wc-block-product > .wp-block-woocommerce-product-price {
    padding-left: 20px;  /* marge horizontale du conteneur Astra sur mobile */
    padding-right: 20px;
  }
}