/* ================================================================
   Mamy Laine — habillage premium 2026 (calqué sur la maquette validée)
   ================================================================ */

:root{
  --ml-shadow: 0 18px 40px -24px rgba(36,31,27,.35);
  --ml-line: rgba(36,31,27,.12);
  --ml-wrap: 1180px;
}

/* Corps un peu plus grand : la cliente peut être âgée, la lisibilité prime.
   Corps en serif (même famille que les titres) : chaud, éditorial, dense et bien
   lisible sans être fin comme l'Avenir. Retour Florent 19/07 : « trop fin » puis
   « colle pas avec la police des titres ». Serif → poids naturel 400, gras 700. */
body{ font-size:18px; }
strong, b{ font-weight:700; }
h1,h2,h3{ letter-spacing:-.012em; }

/* Une seule famille sur tout le site : sinon les champs de saisie (recherche,
   quantité…) et la bannière cookies (plugin maison, classes .acc-*) retombent
   en Arial → effet « 3 polices » relevé par Florent le 19/07. */
input, select, textarea, button, optgroup{ font-family: inherit; }
[class^="acc-"], [class*=" acc-"]{ font-family: var(--wp--preset--font-family--corps) !important; }

/* ---------- Eyebrow + divider point de couture ---------- */
.ml-eyebrow{
  font-family: var(--wp--preset--font-family--corps);
  text-transform:uppercase; letter-spacing:.2em; font-weight:700;
  font-size:.76rem; color: var(--wp--preset--color--teal); margin:0 0 12px;
}
.ml-stitch{ display:block; width:120px; height:11px; color: var(--wp--preset--color--clay); margin-top:14px; }

/* ---------- Bandes ---------- */
.ml-band{ padding-block: clamp(52px,7vw,92px); }
.ml-band--soft{ background: var(--wp--preset--color--soft); }
.ml-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:40px; }
.ml-head .ml-head-text{ max-width:52ch; }
.ml-more{ text-decoration:none; color: var(--wp--preset--color--teal); font-weight:700; white-space:nowrap; border-bottom:1.5px solid var(--ml-line); padding-bottom:3px; }
.ml-more:hover{ border-color: var(--wp--preset--color--teal); }
@media(max-width:680px){ .ml-head{ flex-direction:column; align-items:flex-start; gap:14px; } }

/* ---------- HEADER (barre horizontale, façon maquette) ---------- */
.ml-site-header{
  position:sticky; top:0; z-index:30;
  background: color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent);
  border-bottom:1px solid var(--ml-line);
}
/* ⚠️ Le flou est porté par un ::before, JAMAIS par le header lui-même.
   backdrop-filter/filter/transform sur un ancêtre créent un bloc conteneur
   qui piège les descendants position:fixed → le menu overlay mobile (fixed,
   inset:0) se retrouve enfermé dans la boîte du header au lieu de couvrir
   l'écran. En isolant le flou sur le pseudo-élément (qui n'a pas de
   descendant), l'overlay se résout de nouveau au viewport. */
.ml-site-header::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.ml-header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.ml-header-inner .wp-block-site-logo{ flex:none; }
.ml-header-inner .wp-block-navigation{ flex:1; justify-content:center; font-size:.95rem; }
.ml-header-tools{ display:flex; align-items:center; gap:16px; flex:none; }
.ml-site-header .mamylaine-recherche{ max-width:210px; }
.ml-site-header .mamylaine-recherche input[type=search],
.ml-site-header .mamylaine-recherche input[type=text]{ border-radius:40px; }
.wp-block-navigation .wp-block-navigation-item__content{ font-weight:500; }

/* Focus GLOBAL : outline marque (teal) au clavier, rien au clic souris.
   Remplace le cadre bleu système (#005FCC) qui apparaissait au clic sur le
   header ET le footer. Retour Florent 19/07 : « gros carré au clic ».
   Scopé aux éléments cliquables (pas aux champs, qui gardent leur focus teal). */
:where(a,button,summary,[tabindex]):focus{ outline:none !important; }
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--wp--preset--color--teal) !important; outline-offset:2px; border-radius:4px; }

/* ---------- HERO ---------- */
.ml-hero-wrap{ padding-block: clamp(24px,4vw,52px); }
.ml-hero{ background: var(--wp--preset--color--teal-deep); border-radius:26px; overflow:hidden; box-shadow:var(--ml-shadow); }
.ml-hero > .wp-block-columns{ gap:0; margin:0; align-items:stretch; }
.ml-hero-copy{ padding: clamp(34px,4vw,60px); align-self:center; }
.ml-hero, .ml-hero :where(h1,h2,p){ color: var(--wp--preset--color--cream); }
.ml-hero .ml-eyebrow{ color:#E7C9A6; }
.ml-hero h1{ letter-spacing:-.02em; }
.ml-hero-media{ align-self:stretch; padding:0; position:relative; min-height:380px; }

/* boutons hero */
.ml-hero .wp-block-buttons{ gap:14px; }
.ml-hero .wp-block-button.is-style-cream .wp-block-button__link{ background:var(--wp--preset--color--cream)!important; color:var(--wp--preset--color--teal-deep)!important; }
.ml-hero .wp-block-button.is-style-cream .wp-block-button__link:hover{ background:#fff!important; }
.ml-hero .wp-block-button.is-style-line .wp-block-button__link{ background:transparent!important; color:var(--wp--preset--color--cream)!important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.ml-hero .wp-block-button.is-style-line .wp-block-button__link:hover{ background:rgba(255,255,255,.1)!important; }

/* carrousel produits qui défilent dans le hero */
.ml-hero-carousel{ position:absolute; inset:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.ml-hero-carousel .ml-track{ display:flex; gap:16px; width:max-content; height:100%;
  align-items:center; padding:22px; animation: ml-marquee 34s linear infinite; }
.ml-hero-carousel:hover .ml-track{ animation-play-state:paused; }
.ml-hero-carousel .ml-item{ width:186px; flex:none; text-decoration:none; }
.ml-hero-carousel .ml-item img{ width:186px; height:232px; object-fit:cover; border-radius:14px;
  box-shadow:0 12px 26px -14px rgba(0,0,0,.6); display:block; }
.ml-hero-carousel .ml-item .ml-cap{ display:block; margin-top:9px; text-align:center;
  color:var(--wp--preset--color--cream); font-size:.82rem; opacity:.9; }
@keyframes ml-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(max-width:781px){ .ml-hero-media{ min-height:330px; order:-1; } }
@media(prefers-reduced-motion:reduce){ .ml-hero-carousel .ml-track{ animation:none; } }

/* ---------- Bande confiance ---------- */
.ml-trust{ border-block:1px solid var(--ml-line); }
.ml-trust .ml-trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.ml-trust .ml-trust-item{ display:flex; gap:12px; align-items:center; }
.ml-trust strong{ display:block; font-weight:700; font-size:.95rem; }
.ml-trust small{ color: var(--wp--preset--color--soft-ink); font-size:.82rem; }
.ml-trust svg{ color: var(--wp--preset--color--teal); flex:none; }
@media(max-width:820px){ .ml-trust .ml-trust-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- WooCommerce : cartes produit ---------- */
/* !important : la feuille de WooCommerce se charge après la nôtre et rétablit
   sinon sa grille flottante (float:left / width:30%) -> alignement cassé. */
.ml-band .woocommerce{ width:100%; }
.woocommerce ul.products, .woocommerce-page ul.products{ display:grid!important; gap:30px; margin:0!important; padding:0!important; justify-content:stretch; }
.woocommerce ul.products::before, .woocommerce ul.products::after{ content:none!important; display:none!important; }
.woocommerce ul.products.columns-3{ grid-template-columns:repeat(3,1fr)!important; }
.woocommerce ul.products.columns-4{ grid-template-columns:repeat(4,1fr)!important; }
.woocommerce ul.products li.product{
  width:auto!important; margin:0!important; float:none!important;
  background: var(--wp--preset--color--card); border:1px solid var(--ml-line);
  border-radius:18px; overflow:hidden; display:flex; flex-direction:column;
  transition: transform .2s ease, box-shadow .2s ease; }
.woocommerce ul.products li.product:hover{ transform:translateY(-5px); box-shadow:var(--ml-shadow); }
.woocommerce ul.products li.product a img{ margin:0; border-radius:0; aspect-ratio:4/5; object-fit:cover; width:100%; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family: var(--wp--preset--font-family--titres); font-weight:600; font-size:1.16rem;
  padding:16px 20px 2px; color: var(--wp--preset--color--contrast); }
.woocommerce ul.products li.product .price{ display:block; padding:0 20px; font-weight:700;
  font-size:1rem; color: var(--wp--preset--color--contrast)!important; }
.woocommerce ul.products li.product .price del{ color: var(--wp--preset--color--soft-ink); font-weight:400; }
/* margin-top:auto pousse le bouton au bas de la carte : sans lui, un titre de
   4 lignes fait descendre son bouton pendant que les voisins restent en haut,
   et la rangée paraît de travers. */
.woocommerce ul.products li.product .button{ margin:14px 20px 20px; margin-top:auto; align-self:flex-start;
  background: var(--wp--preset--color--teal); color: var(--wp--preset--color--cream);
  border-radius:40px; padding:.6rem 1.3rem; font-weight:700; transition:background .18s ease; }
.woocommerce ul.products li.product .button:hover{ background: var(--wp--preset--color--teal-deep); }
.woocommerce ul.products li.product .onsale{ background: var(--wp--preset--color--coral); color:#fff;
  border-radius:30px; min-height:auto; min-width:auto; padding:4px 11px; font-size:.7rem; font-weight:700; top:12px; right:12px; margin:0; }
/* ⚠️ !important obligatoire : la règle .columns-3 ci-dessus est elle-même en
   !important (pour battre WooCommerce) — sans ça la media query ne passe jamais
   et l'accueil restait en 3 colonnes coupées sur mobile. */
@media(max-width:820px){ .woocommerce ul.products.columns-3,.woocommerce ul.products.columns-4{ grid-template-columns:repeat(2,1fr)!important; gap:16px; } }
@media(max-width:520px){ .woocommerce ul.products.columns-3,.woocommerce ul.products.columns-4{ grid-template-columns:repeat(2,1fr)!important; gap:12px; } }

/* --- Bouton « Ajouter au panier » dans les vignettes, sur petit écran ---
   Retour Florent 29/07 : « le bouton ajouter au panier est mal positionné ».
   ⚠️ La cause : `align-self:flex-start` + `white-space:nowrap` ci-dessus. Sur une
   vignette de deux colonnes (~165 px de large sur un iPhone), le libellé ne tient
   pas sur une ligne, et la carte étant en `overflow:hidden`, le bouton était
   littéralement COUPÉ au bord. Sur grand écran il n'y a pas de problème : la
   vignette est assez large, on garde donc la pastille compacte alignée à gauche.
   Sous 820 px : bouton pleine largeur de carte, texte centré, retour à la ligne
   autorisé. Cible tactile ≥ 44 px de haut. */
@media(max-width:820px){
  .woocommerce ul.products li.product .button{
    align-self:stretch; text-align:center; white-space:normal;
    margin:14px 14px 16px; margin-top:auto;
    padding:.6rem .7rem; min-height:44px; line-height:1.2;
    font-family: var(--wp--preset--font-family--corps); font-size:.82rem; letter-spacing:.01em;
    display:flex; align-items:center; justify-content:center; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title{ padding:14px 14px 2px; font-size:1.02rem; }
  .woocommerce ul.products li.product .price{ padding:0 14px; }
}

/* --- Accueil, « Les dernières nées de l'atelier » : carrousel sur mobile ---
   Retour Florent 29/07 : « pas joli, il y en a 3 et ça me met deux vignettes et
   une en dessous ». Exact : la grille passe à 2 colonnes sous 820 px, donc un
   nombre IMPAIR de créations laisse toujours une orpheline à moitié de rangée.
   Choix retenu : un carrousel qui se fait glisser. Il règle le problème pour
   n'importe quel nombre de créations — on n'aura plus à y penser à chaque fois
   qu'elle en publie une de plus.
   ⚠️ Portée volontairement étroite : `body.home` + `.ml-band`. L'accueil n'a
   qu'UNE seule liste de produits (vérifié), et la boutique doit garder sa grille. */
@media(max-width:600px){
  body.home .ml-band .woocommerce ul.products{
    display:flex!important; grid-template-columns:none!important;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    gap:14px!important; padding:10px 0 14px; margin:0;  /* 10px en haut : overflow-x rend overflow-y non visible, le soulèvement au toucher était coupé */
    scrollbar-width:none; }
  body.home .ml-band .woocommerce ul.products::-webkit-scrollbar{ display:none; }
  /* 80 % : la carte suivante dépasse du bord droit. C'est CE bout qui dit qu'on
     peut faire glisser — sans lui, on croit qu'il n'y a qu'une création. */
  body.home .ml-band .woocommerce ul.products > li.product{
    flex:0 0 80%; scroll-snap-align:start; }
  /* Et on l'écrit quand même, pour qui ne connaît pas le geste. */
  /* ⚠️ `:has()` : sans lui, la mention s'affichait aussi quand la liste est vide
     (tout vendu) — au-dessus du bandeau « Aucun produit ne correspond » de
     WooCommerce, en invitant à faire glisser ce qui n'existe pas. */
  body.home .ml-band .woocommerce:has(ul.products li)::after{
    content:"Faites glisser pour voir les autres  →";
    display:block; text-align:center; margin-top:6px;
    font-size:.82rem; color: var(--wp--preset--color--soft-ink); }
}

/* ---------- Maker / atelier ---------- */
.ml-maker .wp-block-image img{ border-radius:20px; box-shadow:var(--ml-shadow); }
.ml-maker .ml-sig{ font-family: var(--wp--preset--font-family--titres); font-style:italic;
  font-size:1.5rem; color: var(--wp--preset--color--teal); }

/* ---------- Catégories : tuiles bento (dégradés, PAS de photos) ---------- */
.ml-cats-grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:190px; gap:18px; }
.ml-cat{ position:relative; border-radius:18px; overflow:hidden; text-decoration:none;
  color:#fff; display:flex; align-items:flex-end; padding:22px; isolation:isolate;
  transition: transform .2s ease, box-shadow .2s ease; }
.ml-cat::before{ content:""; position:absolute; inset:0; z-index:-2; background:var(--tile,linear-gradient(150deg,#0B6E76,#073E44)); }
.ml-cat::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(7,40,44,.55));
  background-size:200% 200%; opacity:.9; }
.ml-cat span{ font-family: var(--wp--preset--font-family--titres); font-weight:600; font-size:1.35rem; }
.ml-cat:hover{ transform:translateY(-3px); box-shadow:var(--ml-shadow); }
.ml-cat.big{ grid-column:span 2; grid-row:span 2; }
.ml-cat.big span{ font-size:1.8rem; }
.ml-cat.tall{ grid-row:span 2; }
@media(max-width:720px){ .ml-cats-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .ml-cat.big{ grid-column:span 2; grid-row:span 1; } .ml-cat.tall{ grid-row:span 1; } }

/* ---------- Journal ---------- */
.ml-journal .wp-block-post-template, .ml-journal ul.wp-block-post-template{
  display:grid!important; grid-template-columns:repeat(3,1fr); gap:28px; margin:0; padding:0; list-style:none; }
.ml-journal .wp-block-post{ list-style:none; }
.ml-journal .wp-block-post-featured-image img{ border-radius:16px; aspect-ratio:3/2; object-fit:cover; width:100%; }
.ml-journal .ml-kicker, .ml-journal .wp-block-post-terms{ font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color: var(--wp--preset--color--clay); font-weight:700; }
.ml-journal .wp-block-post-terms a{ color: var(--wp--preset--color--clay); text-decoration:none; }
.ml-journal .wp-block-post-title{ font-family: var(--wp--preset--font-family--titres); font-weight:600;
  font-size:1.32rem; margin:8px 0; }
.ml-journal .wp-block-post-title a{ text-decoration:none; color: var(--wp--preset--color--contrast); }
.ml-journal .wp-block-post-title a:hover{ color: var(--wp--preset--color--teal); }
.ml-journal .wp-block-post-excerpt{ color: var(--wp--preset--color--contrast); font-size:1rem; line-height:1.6; }
.ml-journal .wp-block-post-excerpt__more-text{ display:none; }
@media(max-width:780px){ .ml-journal .wp-block-post-template{ grid-template-columns:1fr!important; gap:30px; } }

/* ---------- Newsletter (shortcode [mamylaine_newsletter]) ---------- */
.ml-signup-titre{ font-family: var(--wp--preset--font-family--titres); font-size:clamp(1.4rem,2.4vw,1.8rem);
  margin:0 0 8px; color: var(--wp--preset--color--teal-deep); }
.ml-signup-texte{ margin:0 0 18px; color: var(--wp--preset--color--soft-ink); line-height:1.6; max-width:52ch; }
/* Champ + bouton sur une ligne, qui passe en colonne sur téléphone (le champ
   ne doit jamais être écrasé à 80px à côté du bouton). */
.ml-signup-ligne{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.ml-signup .ml-signup-ligne input[type=email]{
  flex:1 1 260px; width:auto; min-width:0;
  border-radius:40px; border:1.5px solid var(--ml-line); background:var(--wp--preset--color--card);
  padding:14px 18px; font:inherit; color:var(--wp--preset--color--contrast); }
.ml-signup .ml-signup-ligne .ml-btn{ flex:0 0 auto; padding:.9rem 1.7rem; }
.ml-signup input:focus{ outline:2px solid var(--wp--preset--color--teal); outline-offset:1px; border-color:transparent; }
/* Dans le footer (fond canard), le texte d'accompagnement doit rester lisible */
.ml-footer .ml-signup-titre, .ml-footer .ml-signup-texte,
.ml-footer .ml-consent label{ color: var(--wp--preset--color--cream); }
@media(max-width:520px){ .ml-signup-ligne .ml-btn{ width:100%; } }
/* L'accueil a déjà son grand bandeau newsletter : on masque celui du pied de page
   pour ne pas afficher deux fois le même formulaire à 200px d'écart. Il reste
   présent sur toutes les autres pages (fiches produit, blog, contact…). */
.home .ml-footer .ml-signup{ display:none; }

/* Même logique en plein tunnel d'achat : sur le panier et la page de commande, on ne
   met rien qui détourne la cliente de son paiement. En revanche la page « commande
   reçue » la garde : c'est au contraire le meilleur moment pour proposer la lettre,
   juste après un achat. La classe est posée par `functions.php` (ml_classe_tunnel) et
   pas devinée : WooCommerce n'expose aucune classe `order-received` sur le body. */
.ml-tunnel .ml-footer .ml-signup{ display:none; }

/* ---------- Boutons outline sur fond clair ---------- */
.ml-band .wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent; color:var(--wp--preset--color--teal); box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--teal); }
.ml-band .wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:var(--wp--preset--color--teal); color:var(--wp--preset--color--cream); }

/* ---------- Header logo ---------- */
header .wp-block-site-logo img{ border-radius:0; }

/* ---------- Footer ---------- */
.ml-footer{ background: var(--wp--preset--color--teal-deep); }
.ml-footer, .ml-footer :where(a,p,h2,h3,li){ color: var(--wp--preset--color--cream); }
.ml-footer a{ text-decoration:none; opacity:.85; }
.ml-footer a:hover{ opacity:1; }
.ml-footer .wp-block-heading{ font-family: var(--wp--preset--font-family--corps);
  text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; opacity:.7; }
.ml-footer .ml-footer-brand .wp-block-heading{ font-family: var(--wp--preset--font-family--titres);
  text-transform:none; letter-spacing:-.01em; font-size:1.5rem; opacity:1; }

/* ================================================================
   Corrections (retours Florent)
   ================================================================ */

/* --- Recherche compacte (le plugin impose sinon une barre géante) --- */
.ml-site-header .mamylaine-recherche{ width:230px; max-width:230px; }
.ml-site-header .las-search-container{ width:100%; }
.ml-site-header .las-search-form{ margin:0; width:100%; }
.ml-site-header .las-search-wrapper{ position:relative; width:100%; margin:0; }
.ml-site-header .las-search-wrapper br{ display:none; }
.ml-site-header .las-search-input{
  width:100%!important; min-width:0!important; box-sizing:border-box;
  height:42px; margin:0!important; padding:8px 42px 8px 16px; border-radius:40px;
  border:1.5px solid var(--ml-line); background:var(--wp--preset--color--card);
  font-size:.9rem; color:var(--wp--preset--color--contrast); }
.ml-site-header .las-search-input:focus{ outline:2px solid var(--wp--preset--color--teal); outline-offset:1px; border-color:transparent; }
.ml-site-header .las-search-button{
  position:absolute!important; right:4px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; min-width:0; padding:0; margin:0; border:0; border-radius:50%;
  background:transparent!important; color:var(--wp--preset--color--teal)!important;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.ml-site-header .las-search-button:hover{ color:var(--wp--preset--color--teal-deep)!important; }
.ml-site-header .las-search-results{ position:absolute; z-index:40; left:auto; right:0; width:min(380px,86vw); }
/* ---- Header mobile (placé APRÈS toutes les règles de recherche pour gagner la
   cascade, sinon `width:230px` ci-dessus écrase la recherche pleine largeur).
   Ligne 1 : logo à GAUCHE · compte + panier + hamburger à DROITE.
   Ligne 2 : recherche en barre pleine largeur. Retour Florent 19/07 :
   « hamburger au centre → à droite », « pas de recherche », « collé à droite ». */
@media(max-width:900px){
  .ml-site-header .ml-header-inner{ flex-wrap:wrap; row-gap:12px; column-gap:10px; align-items:center; }
  .ml-site-header .ml-header-inner > .wp-block-site-logo{ order:1; margin-right:auto; }
  .ml-site-header .ml-header-inner > .wp-block-woocommerce-customer-account{ order:2; }
  .ml-site-header .ml-header-inner > .ml-header-tools{ order:3; margin-left:0; }
  .ml-site-header .ml-header-inner > .wp-block-navigation{ order:4; flex:0 0 auto; }
  .ml-site-header .ml-header-inner > .mamylaine-recherche{
    order:5; display:block !important; flex:1 1 100% !important;
    width:100% !important; max-width:none !important; }
  .ml-site-header .mamylaine-recherche .las-search-results{ width:100%; right:0; }
}

/* --- Dropdown de résultats de recherche : habillage marque (retour Florent :
   « pas joli, ça colle pas avec l'identité »). Le plugin ne rend qu'une liste
   nue ; on la transforme en panneau premium (carte, séparateurs, vignettes). --- */
.las-search-results{
  margin-top:10px; background: var(--wp--preset--color--card);
  border:1px solid var(--ml-line); border-radius:16px; box-shadow: var(--ml-shadow);
  overflow:hidden; max-height:min(70vh,460px); overflow-y:auto; }
.las-results-list{ list-style:none; margin:0; padding:6px; }
.las-result-item{ margin:0; }
.las-result-item + .las-result-item{ border-top:1px solid var(--ml-line); }
.las-result-link{
  display:flex; align-items:center; gap:14px; padding:10px 12px; border-radius:12px;
  text-decoration:none; transition:background .14s ease; }
.las-result-link:hover{ background: var(--wp--preset--color--soft); }
.las-result-image-wrapper{ flex:none; width:56px; height:56px; border-radius:10px; overflow:hidden; background: var(--wp--preset--color--soft); }
.las-result-image, .las-result-no-image{ width:56px; height:56px; object-fit:cover; display:block; }
.las-result-content{ min-width:0; flex:1; }
.las-result-title{
  font-family: var(--wp--preset--font-family--titres); font-weight:600; font-size:1rem;
  line-height:1.25; margin:0 0 4px; color: var(--wp--preset--color--contrast);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.las-result-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ml-site-header .las-result-price,
.las-result-price{ color: var(--wp--preset--color--teal)!important; font-weight:700; font-size:.92rem; }
.las-result-price del{ color: var(--wp--preset--color--soft-ink); font-weight:400; }
.las-result-stock{
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:3px 9px; border-radius:30px; }
.las-result-stock.in-stock{ background: color-mix(in srgb, var(--wp--preset--color--teal) 14%, transparent); color: var(--wp--preset--color--teal-deep); }
.las-result-stock.out-of-stock{ background: color-mix(in srgb, var(--wp--preset--color--coral) 16%, transparent); color: var(--wp--preset--color--coral); }
.las-no-results, .las-loader, .las-error{
  padding:22px 18px; text-align:center; color: var(--wp--preset--color--soft-ink); font-size:.92rem; }

/* --- Bouton « Ajouter au panier » : une seule ligne, SUR GRAND ÉCRAN SEULEMENT ---
   🔴 Cette règle était posée sans media query, plus bas dans la feuille que le
   correctif mobile et avec le MÊME sélecteur : à spécificité égale, c'est la
   dernière déclarée qui gagne, donc `nowrap` restait actif sur téléphone et le
   bouton continuait d'être rogné. Relevé en relecture le 29/07/2026.
   Elle est désormais bornée au-dessus de 820 px, là où la vignette est assez
   large pour tenir le libellé sur une ligne. */
@media(min-width:821px){
  .woocommerce ul.products li.product .button{ white-space:nowrap; }
}

/* --- Menu hamburger (mobile) : overlay premium sur-mesure (retour Florent :
   « ça va pas du tout »). L'overlay WP brut sortait plat, cramé, avec le focus
   bleu système. On le retravaille : grandes cibles, hiérarchie nette, sous-menus
   lisibles, couleurs marque. --- */
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg{ fill: var(--wp--preset--color--teal-deep); }
.wp-block-navigation__responsive-container-open{ padding:6px; }

/* Plein écran garanti : fixed + inset forcés, z-index au-dessus du header (z:30). */
/* ⚠️ Marges latérales, 2e passe du 29/07 (« encore trop collé sur les côtés »).
   La marge posée sur le CONTENEUR ne s'appliquait pas : WordPress pose son propre
   `padding` sur `…responsive-container.is-menu-open:not(.disable-default-overlay)`,
   soit trois classes — plus spécifique que notre règle à deux, qui perdait en
   silence. On neutralise donc la gouttière du conteneur et on la porte sur le
   CONTENU, en !important. Bonus : le trait de séparation des entrées s'arrête là
   où commence la marge, au lieu de filer jusqu'au bord de l'écran.
   ⚠️ Ne pas « simplifier » en remettant le padding sur le conteneur : ça a déjà
   été tenté le 29/07 au matin, ça ne tient pas face au core. */
.wp-block-navigation__responsive-container.is-menu-open{
  position:fixed!important; inset:0!important;
  background: var(--wp--preset--color--base)!important;
  padding-left:0!important; padding-right:0!important;
  padding-top:clamp(16px,4vw,28px); padding-bottom:clamp(28px,8vw,44px);
  z-index:100000; overflow-y:auto; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  padding-top:56px; width:100%; max-width:520px; margin:0 auto; box-sizing:border-box;
  padding-left:clamp(20px,5.5vw,32px)!important;
  padding-right:clamp(20px,5.5vw,32px)!important; }

/* --- Les tuiles de rayons en tête du menu (mu-plugin mamylaine-menu-tuiles) ---
   Retour Florent 29/07 : « on peut pas faire quelque chose de plus visuel ? plus
   interactif ? premium ? ». Quatre grandes tuiles illustrées ouvrent le menu ; la
   première mène à la boutique, les trois autres s'adaptent au visiteur.

   ⚠️ Elles ne s'affichent QUE dans le menu déroulant ouvert. Le bloc navigation
   rend le même balisage sur grand écran, où le menu est une barre horizontale :
   sans ce garde-fou, les tuiles s'inviteraient dans la barre du haut. */
.ml-tuiles{ display:none; }
.wp-block-navigation__responsive-container.is-menu-open .ml-tuiles{
  display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:22px; }

.ml-tuile{
  position:relative; overflow:hidden; min-height:120px; border-radius:16px; padding:12px;
  display:flex; flex-direction:column; justify-content:flex-end;
  text-decoration:none; color:#fff!important;
  background-color: var(--wp--preset--color--teal-deep);
  background-size:cover; background-position:center;
  transition: transform .18s ease, box-shadow .18s ease; }
.ml-tuile.est-large{ grid-column:1 / -1; min-height:104px; }
/* Le voile sombre : sans lui, un titre blanc sur une photo claire devient
   illisible. Dégradé plutôt qu'aplat, pour que la photo reste visible en haut. */
.ml-tuile::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(7,62,68,.88) 0%, rgba(7,62,68,.12) 66%); }
.ml-tuile > *{ position:relative; z-index:1; }
.ml-tuile:active{ transform:scale(.985); }
/* ⚠️ L'anneau était en crème sur un fond crème : contraste 1,04:1, invisible au
   clavier. Double anneau : clair sur la photo sombre, foncé sur le fond de page. */
.ml-tuile:focus-visible{
  outline:3px solid var(--wp--preset--color--teal-deep); outline-offset:3px;
  box-shadow:0 0 0 3px var(--wp--preset--color--cream); }

/* Le bandeau d'angle : il épouse le coin haut-gauche, arrondi côté tuile et
   côté intérieur, droit sur les deux bords qu'il touche. Choix de Florent parmi
   quatre traitements (29/07) : c'est le plus visible, donc on le réserve à ce qui
   mérite d'être vu. Le corail ne sert QUE pour le panier et le dernier
   exemplaire : s'il servait partout, il ne signalerait plus rien. */
.ml-tuile-ruban{
  position:absolute; top:0; left:0; z-index:2;
  font-family: var(--wp--preset--font-family--corps);
  font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 14px 6px 12px; border-radius:16px 0 16px 0;
  background: var(--wp--preset--color--teal); color:#fff; }
/* ⚠️ Le corail de la charte (#DC4A62) donne 4,04:1 avec du blanc : sous le seuil
   AA de 4,5:1, sur le plus petit texte du lot. On l'assombrit pour ce seul usage,
   la teinte reste reconnaissable. */
.ml-tuile-ruban.est-corail{ background: color-mix(in srgb, var(--wp--preset--color--coral) 78%, #3a0d16); }

.ml-tuile-sur{
  font-family: var(--wp--preset--font-family--corps);
  font-size:.62rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  opacity:.9; margin-bottom:3px; }
.ml-tuile-nom{
  font-family: var(--wp--preset--font-family--titres);
  font-size:1rem; font-weight:600; line-height:1.18; }
.ml-tuile.est-large .ml-tuile-nom{ font-size:1.14rem; }
.ml-tuile-detail{
  font-family: var(--wp--preset--font-family--corps);
  font-size:.72rem; opacity:.92; margin-top:3px; }

/* Bouton de fermeture : pastille marque en haut à droite */
.wp-block-navigation__responsive-container-close{
  top:clamp(18px,5vw,28px); right:clamp(16px,5vw,28px);
  width:44px; height:44px; border-radius:50%;
  background: var(--wp--preset--color--card); border:1px solid var(--ml-line);
  display:flex; align-items:center; justify-content:center; }
.wp-block-navigation__responsive-container-close svg{ width:20px; height:20px; }

/* Liste : une colonne, séparateurs fins */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  flex-direction:column; align-items:stretch; gap:0; width:100%!important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
  display:block; width:100%!important; border-bottom:1px solid var(--ml-line); }
/* Items de 1er niveau pleine largeur : sinon les traits de séparation sont courts
   et inégaux, et le chevron (positionné à droite du bloc) colle au texte au lieu
   du bord droit. Retour Florent 19/07 : « menu hamburger pas optimisé mobile ». */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu{
  width:100%!important; position:relative; }

/* Entrées de 1er niveau : grandes, en serif, façon boutique */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > .wp-block-navigation__submenu-container-toggle .wp-block-navigation-item__content{
  font-family: var(--wp--preset--font-family--titres); font-weight:600;
  font-size:1.4rem; color: var(--wp--preset--color--contrast)!important;
  padding:16px 4px!important; text-decoration:none; }
.wp-block-navigation__responsive-container.is-menu-open a:hover{ color: var(--wp--preset--color--teal)!important; }
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a,
.wp-block-navigation__responsive-container.is-menu-open [aria-current] > a,
.wp-block-navigation__responsive-container.is-menu-open [aria-current]{ color: var(--wp--preset--color--teal)!important; }

/* Focus accessible marque (plus le vilain contour bleu système) */
.wp-block-navigation__responsive-container.is-menu-open a:focus,
.wp-block-navigation__responsive-container.is-menu-open button:focus{ outline:none; }
.wp-block-navigation__responsive-container.is-menu-open a:focus-visible,
.wp-block-navigation__responsive-container.is-menu-open button:focus-visible{
  outline:2px solid var(--wp--preset--color--teal); outline-offset:3px; border-radius:6px; }

/* Sous-menus : ACCORDÉON mobile (retour Florent « trop de données »). Le lien
   parent reste un VRAI lien (desktop inchangé : on n'a pas activé openSubmenusOnClick).
   Sur mobile, sous-menus repliés, dépliables via le bouton chevron natif du bloc.
   ⚠️ Combinateur général « ~ » : le toggle/chevron est FRÈRE du <ul> (markup du
   bloc navigation), pas son voisin immédiat — « + » ne matcherait jamais. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu{
  display:block!important; position:relative; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content{
  display:block; padding-right:52px!important; }
/* bouton chevron : forcé visible, calé en haut à droite du parent (le bloc le
   masque sinon dans l'overlay quand openSubmenusOnClick est off → sous-menus
   inatteignables). Cible tactile 44px. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle{
  position:absolute!important; top:6px; right:0; z-index:1;
  display:inline-flex!important; visibility:visible!important; opacity:1!important;
  align-items:center; justify-content:center; width:44px; height:44px;
  background:none; border:0; cursor:pointer; color:var(--wp--preset--color--teal-deep); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon{ transition:transform .2s ease; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg{ width:18px; height:18px; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon,
.wp-block-navigation__responsive-container.is-menu-open [aria-expanded="true"] ~ .wp-block-navigation__submenu-icon{
  transform:rotate(180deg); }
/* sous-menu : replié par défaut, révélé quand le toggle frère est déplié */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{
  flex-basis:100%!important; position:static!important; background:transparent!important; border:0!important; box-shadow:none!important;
  width:100%!important; min-width:0!important; margin:0!important; padding:0 0 12px 0!important;
  display:none!important; opacity:1!important; visibility:visible!important; transform:none!important; }
.wp-block-navigation__responsive-container.is-menu-open [aria-expanded="true"] ~ .wp-block-navigation__submenu-container{
  display:block!important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item{
  border-bottom:0; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  font-family: var(--wp--preset--font-family--corps)!important; font-weight:500!important;
  font-size:1.06rem!important; color: var(--wp--preset--color--soft-ink)!important;
  padding:9px 0 9px 18px!important; border-left:2px solid var(--ml-line); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{
  color: var(--wp--preset--color--teal)!important; border-left-color: var(--wp--preset--color--teal); }
/* niveau 3 : encore un cran */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  padding-left:34px!important; font-size:.98rem!important; }

/* Chevron d'ouverture des sous-menus : teal, aligné */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon{
  color: var(--wp--preset--color--teal); }

/* ================================================================
   BOUTIQUE (archive-product) — bloc moderne Product Collection
   + infinite scroll. Cartes calées sur celles de l'accueil.
   ================================================================ */
/* --- En-tête boutique : header éditorial moderne (retour Florent : « moche et
   pas actuel »). Fond crème (plus le bandeau gris plat), hairline bas, plus d'air,
   type plus affirmée. --- */
.ml-shop-intro{ border-bottom:1px solid var(--ml-line); }
.ml-shop-intro .wc-block-breadcrumbs,
.ml-shop-intro .woocommerce-breadcrumb{
  font-size:.82rem; color: var(--wp--preset--color--soft-ink); margin:0 0 16px; }
/* Sur la boutique-racine, le fil d'Ariane n'a qu'un maillon (« Boutique ») qui
   double le titre → on le masque ici, on le garde sur les pages catégorie. */
.woocommerce-shop .ml-shop-intro .wc-block-breadcrumbs,
.woocommerce-shop .ml-shop-intro .woocommerce-breadcrumb{ display:none; }
.ml-shop-intro .wc-block-breadcrumbs a,
.ml-shop-intro .woocommerce-breadcrumb a{ color: var(--wp--preset--color--teal); text-decoration:none; }
.ml-shop-intro .wc-block-breadcrumbs a:hover{ color: var(--wp--preset--color--coral); }
.ml-shop-intro .ml-eyebrow{ margin-bottom:10px; }
.ml-shop-intro .wp-block-query-title,
.ml-shop-intro .wp-block-post-title{
  font-family: var(--wp--preset--font-family--titres); font-weight:600;
  font-size: clamp(1.9rem,3vw,2.5rem); line-height:1.08; letter-spacing:-.02em;
  margin:0 0 12px; color: var(--wp--preset--color--contrast); }
.ml-shop-intro .ml-shop-tagline{ max-width:52ch; margin:0; line-height:1.6; font-size:1.05rem; color: var(--wp--preset--color--soft-ink); }
.ml-shop-intro .term-description{ color: var(--wp--preset--color--soft-ink); max-width:60ch; margin:0 0 8px; }

/* --- Pastilles de catégories (invite à explorer) --- */
.ml-cat-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.ml-cat-pills .ml-pill{
  display:inline-block; padding:9px 18px; border-radius:40px; text-decoration:none;
  font-size:.9rem; font-weight:600; color: var(--wp--preset--color--teal-deep);
  background: var(--wp--preset--color--card); border:1.5px solid var(--ml-line);
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.ml-cat-pills .ml-pill:hover{ transform:translateY(-2px); border-color: var(--wp--preset--color--teal); color: var(--wp--preset--color--teal); }
.ml-cat-pills .ml-pill.is-active{
  background: var(--wp--preset--color--teal); border-color: var(--wp--preset--color--teal); color: var(--wp--preset--color--cream); }

/* --- Barre de tri --- */
.ml-shop-toolbar{ margin-bottom:26px; }
/* Repli sans JS : le <select> natif reste stylé en pilule (rare, mais propre). */
.ml-shop .wp-block-woocommerce-catalog-sorting select,
.ml-shop select.orderby{
  border:1.5px solid var(--ml-line); border-radius:40px; background: var(--wp--preset--color--card);
  padding:9px 38px 9px 16px; font:inherit; font-size:.92rem; color: var(--wp--preset--color--contrast); cursor:pointer; }
.ml-shop .wp-block-woocommerce-catalog-sorting select:focus{ outline:2px solid var(--wp--preset--color--teal); outline-offset:1px; }

/* --- Dropdown de tri MAISON (remplace la liste native de l'OS) --- */
/* Le <select> est masqué mais présent (a11y + repli) une fois le JS actif. */
.ml-sort-native{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.ml-sort{ position:relative; display:inline-block; text-align:left; }
.ml-sort-btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  border:1.5px solid var(--ml-line); border-radius:40px; background: var(--wp--preset--color--card);
  padding:10px 16px; font:inherit; font-size:.94rem; font-weight:600;
  color: var(--wp--preset--color--teal-deep); transition:border-color .18s ease, color .18s ease; }
.ml-sort-btn:hover{ border-color: var(--wp--preset--color--teal); color: var(--wp--preset--color--teal); }
.ml-sort-btn:focus-visible{ outline:2px solid var(--wp--preset--color--teal); outline-offset:2px; }
.ml-sort-caret{ transition:transform .2s ease; }
.ml-sort.is-open .ml-sort-caret{ transform:rotate(180deg); }
.ml-sort-list{
  position:absolute; top:calc(100% + 8px); right:0; z-index:60; min-width:220px; margin:0;
  padding:8px; list-style:none; background: var(--wp--preset--color--card);
  border:1px solid var(--ml-line); border-radius:16px; box-shadow: var(--ml-shadow); }
.ml-sort-opt{
  padding:10px 14px; border-radius:10px; cursor:pointer; font-size:.94rem;
  color: var(--wp--preset--color--contrast); transition:background .14s ease, color .14s ease; }
.ml-sort-list:focus{ outline:none; }
.ml-sort-opt:hover,
.ml-sort-opt.is-active{ background: var(--wp--preset--color--soft); }
.ml-sort-opt.is-active{ box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--teal); }
.ml-sort-opt.is-selected{ color: var(--wp--preset--color--teal); font-weight:700; }
.ml-sort-opt.is-selected::after{ content:" ✓"; }

/* --- Grille boutique (Product Collection) --- */
.ml-shop .wc-block-product-template{
  display:grid!important; grid-template-columns:repeat(3,1fr); gap:30px;
  margin:0!important; padding:0!important; list-style:none; }
@media(max-width:820px){ .ml-shop .wc-block-product-template{ grid-template-columns:repeat(2,1fr)!important; gap:16px; } }
/* Mobile : 2 colonnes (retour Florent : « catalogue produit 2 colonnes mobile »). */
@media(max-width:520px){ .ml-shop .wc-block-product-template{ grid-template-columns:repeat(2,1fr)!important; gap:12px; } }

/* --- Cartes produit : partagées boutique + « vous aimerez aussi » ---
   Scopées sur .wc-block-product (unique au markup Product Collection),
   donc valables partout où une grille de blocs produit apparaît. */
.wc-block-product-template > li,
.wc-block-product{
  list-style:none; margin:0!important; padding:0!important; width:auto!important; max-width:none!important;
  background: var(--wp--preset--color--card); border:1px solid var(--ml-line);
  border-radius:18px; overflow:hidden; display:flex; flex-direction:column; text-align:left;
  transition: transform .2s ease, box-shadow .2s ease; }
.wc-block-product:hover{ transform:translateY(-5px); box-shadow:var(--ml-shadow); }
/* image */
.wc-block-product .wp-block-woocommerce-product-image,
.wc-block-product .wc-block-components-product-image{ margin:0; position:relative; overflow:hidden; }
.wc-block-product .wp-block-woocommerce-product-image a,
.wc-block-product .wc-block-components-product-image a{ position:relative; display:block; }
.wc-block-product .wp-block-woocommerce-product-image img,
.wc-block-product .wc-block-components-product-image img{
  width:100%!important; aspect-ratio:4/5; object-fit:cover; border-radius:0!important; display:block;
  transition: transform .55s ease; }
.wc-block-product:hover .wp-block-woocommerce-product-image img,
.wc-block-product:hover .wc-block-components-product-image img{ transform:scale(1.06); }
/* révélation « Voir la création » au survol */
.wc-block-product .wp-block-woocommerce-product-image a::after,
.wc-block-product .wc-block-components-product-image a::after{
  content:"Voir la création"; position:absolute; left:0; right:0; bottom:0;
  padding:26px 16px 15px; text-align:center; font-weight:700; font-size:.86rem;
  color: var(--wp--preset--color--cream);
  background:linear-gradient(0deg, rgba(7,40,44,.9) 10%, rgba(7,40,44,0));
  transform:translateY(100%); opacity:0; transition:transform .28s ease, opacity .28s ease; pointer-events:none; }
.wc-block-product:hover .wp-block-woocommerce-product-image a::after,
.wc-block-product:hover .wc-block-components-product-image a::after{ transform:translateY(0); opacity:1; }
@media(hover:none){
  .wc-block-product .wp-block-woocommerce-product-image a::after,
  .wc-block-product .wc-block-components-product-image a::after{ display:none; } }
/* badge promo */
.wc-block-components-product-sale-badge{
  background: var(--wp--preset--color--coral); color:#fff; border-radius:30px;
  padding:4px 11px; font-size:.7rem; font-weight:700; top:12px; right:12px; }
/* titre */
.wc-block-product .wp-block-post-title{
  text-align:left!important; font-family: var(--wp--preset--font-family--titres); font-weight:600;
  font-size:1.16rem; line-height:1.3; margin:0!important; padding:16px 20px 2px; }
.wc-block-product .wp-block-post-title a{ color: var(--wp--preset--color--contrast); text-decoration:none; }
.wc-block-product .wp-block-post-title a:hover{ color: var(--wp--preset--color--teal); }
/* prix */
.wc-block-product .wp-block-woocommerce-product-price{
  text-align:left!important; padding:0 20px; margin:4px 0 0!important;
  font-weight:700; font-size:1rem; color: var(--wp--preset--color--contrast); }
.wc-block-product .wp-block-woocommerce-product-price del{ color: var(--wp--preset--color--soft-ink); font-weight:400; }
.wc-block-product .wp-block-woocommerce-product-price ins{ text-decoration:none; }
/* bouton */
.wc-block-product .wp-block-woocommerce-product-button{
  text-align:left!important; margin:14px 0 20px!important; padding:0 20px; }
.wc-block-product .wp-block-woocommerce-product-button a,
.wc-block-product .wp-block-woocommerce-product-button button{
  display:inline-block; background: var(--wp--preset--color--teal)!important; color: var(--wp--preset--color--cream)!important;
  border:0; border-radius:40px; padding:.6rem 1.3rem; font-weight:700; font-size:.92rem; white-space:nowrap; }
.wc-block-product .wp-block-woocommerce-product-button a:hover,
.wc-block-product .wp-block-woocommerce-product-button button:hover{ background: var(--wp--preset--color--teal-deep)!important; }
.wc-block-product .wp-block-woocommerce-product-button .added_to_cart{
  display:block; margin-top:8px; color: var(--wp--preset--color--teal); text-decoration:none; font-size:.82rem; }

/* --- « Ajouter au panier » des vignettes, sur petit écran (markup BLOCS) ---
   Retour Florent 29/07 : « les boutons ajouter au panier sont pas du tout jolis et
   sont énormes ».
   ⚠️ La cause, et elle vaut leçon : la boutique et la fiche produit n'utilisent PAS
   le même balisage que l'accueil. L'accueil affiche un shortcode WooCommerce
   (`ul.products li.product .button`) ; /boutique affiche le bloc Product Collection
   (`li.wc-block-product … .wc-block-components-product-button__button`). La correction
   du matin ne portait que sur le premier : sur /boutique il ne se passait rien.
   Toucher l'un des deux sans l'autre laisse toujours la moitié du site de travers.
   Ce qui rendait le bouton énorme : WooCommerce impose `white-space:normal` avec
   trois classes (plus spécifique que notre règle), donc « Ajouter au panier » passait
   à la ligne dans une vignette de ~165 px, dans la police des TITRES et à la taille
   du corps de page — une grosse pastille de deux lignes. On force ici la police de
   corps, une taille qui tient sur une ligne, et la pleine largeur de carte. */
@media(max-width:820px){
  .wc-block-product .wp-block-post-title{ padding:14px 14px 2px; font-size:1.02rem; }
  .wc-block-product .wp-block-woocommerce-product-price{ padding:0 14px; }
  .wc-block-product .wp-block-woocommerce-product-button{ padding:0 14px; margin:14px 0 16px!important; }
  .wc-block-product .wp-block-woocommerce-product-button a,
  .wc-block-product .wp-block-woocommerce-product-button button{
    display:flex!important; width:100%!important; box-sizing:border-box;
    align-items:center; justify-content:center; text-align:center;
    white-space:normal; word-break:normal;
    font-family: var(--wp--preset--font-family--corps)!important;
    font-size:.82rem!important; font-weight:700; letter-spacing:.01em;
    line-height:1.2; padding:.6rem .7rem!important; min-height:44px; }
}

/* --- Infinite scroll (boutique + grille atelier de la fiche) --- */
.ml-pagination-hidden{ display:none!important; }
.ml-scroll-sentinel{ width:100%; height:1px; }
.ml-scroll-status{
  text-align:center; color: var(--wp--preset--color--soft-ink); font-size:.9rem; padding:22px 0 4px; margin:0; min-height:1.2em; }

/* ================================================================
   FICHE PRODUIT (single-product) — blocs modernes : galerie + achat
   ================================================================ */
/* fil d'Ariane sur-mesure : discret, éditorial, sans « Accueil » (retiré via
   woocommerce_breadcrumb_defaults) — ne doit plus sentir WooCommerce. */
.ml-single .wc-block-breadcrumbs,
.ml-shop-intro .wc-block-breadcrumbs{
  font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; opacity:.9;
  color: var(--wp--preset--color--soft-ink); margin:0 0 18px; }
.ml-single .wc-block-breadcrumbs a,
.ml-shop-intro .wc-block-breadcrumbs a{ color: var(--wp--preset--color--soft-ink); text-decoration:none; }
.ml-single .wc-block-breadcrumbs a:hover,
.ml-shop-intro .wc-block-breadcrumbs a:hover{ color: var(--wp--preset--color--teal); }
.ml-bc-sep{ margin:0 .5em; color: var(--wp--preset--color--clay); }

/* mise en page 2 colonnes */
.ml-single .ml-product-layout{ align-items:flex-start; gap:clamp(28px,4vw,58px); margin-bottom:0; }
@media(max-width:781px){
  .ml-single .ml-product-layout{ flex-wrap:wrap; }
  .ml-single .ml-product-gallery,
  .ml-single .ml-product-info{ flex-basis:100%!important; } }
/* colonne d'achat « collante » (reste visible quand on scrolle la galerie) */
@media(min-width:782px){
  .ml-single .ml-product-info{ position:sticky; top:96px; align-self:flex-start; } }

/* galerie maison (grande image + miniatures + lightbox, pilotée par product.js) */
.ml-gallery-stage{
  position:relative; border-radius:20px; overflow:hidden; box-shadow:var(--ml-shadow);
  background: var(--wp--preset--color--card); }
.ml-gallery-main-img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; cursor:zoom-in; }
.ml-gallery-open{
  position:absolute; top:14px; right:14px; z-index:2; width:44px; height:44px; border:0; border-radius:50%;
  background:rgba(248,243,234,.92); color: var(--wp--preset--color--teal-deep); cursor:zoom-in;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px -8px rgba(0,0,0,.4);
  transition:background .18s ease; }
.ml-gallery-open:hover{ background:#fff; }
.ml-gallery-thumbs{ display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; }
.ml-gallery-thumb{
  width:74px; height:74px; padding:0; border:2px solid transparent; border-radius:12px; overflow:hidden;
  background:none; cursor:pointer; opacity:.62; transition:opacity .18s ease, border-color .18s ease; }
.ml-gallery-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ml-gallery-thumb:hover{ opacity:1; }
.ml-gallery-thumb.is-active{ opacity:1; border-color: var(--wp--preset--color--teal); }

/* lightbox plein écran */
.ml-lightbox{
  position:fixed; inset:0; z-index:100000; background:rgba(7,40,44,.93);
  display:flex; align-items:center; justify-content:center; padding:24px; cursor:zoom-out; }
.ml-lightbox img{ max-width:min(1000px,92vw); max-height:90vh; border-radius:10px; box-shadow:0 30px 80px -30px rgba(0,0,0,.7); }
.ml-lightbox-close{
  position:absolute; top:16px; right:22px; width:46px; height:46px; border:0; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; font-size:1.8rem; line-height:1; cursor:pointer; }
.ml-lightbox-close:hover{ background:rgba(255,255,255,.26); }
.ml-lightbox-fig{ position:relative; display:inline-block; line-height:0; }

/* ---------- Badge logo Mamy Laine sur les photos produit ----------
   Couvre le watermark IA (Gemini, bas-droite) ET signe la photo. Overlay CSS :
   s'applique à TOUTES les images produit — présentes et futures, sans toucher
   aux fichiers. Sur les grandes vignettes uniquement (pas les miniatures). */
.ml-rc-media{ position:relative; }
.ml-gallery-stage::after,
.wc-block-product .wp-block-woocommerce-product-image::after,
.ml-rc-media::after,
.ml-lightbox-fig::after{
  content:""; position:absolute; right:3.5%; bottom:3.5%;
  width:min(19%, 116px); aspect-ratio:1/1;
  /* ⚠️ Nom de fichier changé volontairement le 27/07/2026 : l'ancien badge (rond, fond
     parme) était en cache chez tout le monde. Réécrire le même nom aurait laissé
     l'ancien logo à l'écran pendant des semaines. */
  background:url('logo-photo.png') center/contain no-repeat;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.28));
  pointer-events:none; z-index:4; }

/* surtitre catégorie */
.ml-single .ml-product-kicker{
  font-family: var(--wp--preset--font-family--corps); text-transform:uppercase; letter-spacing:.16em;
  font-weight:700; font-size:.74rem; color: var(--wp--preset--color--clay); margin:0 0 10px; }
.ml-single .ml-product-kicker a{ color: var(--wp--preset--color--clay); text-decoration:none; }
.ml-single .ml-product-kicker a:hover{ color: var(--wp--preset--color--teal); }

/* titre */
.ml-single .ml-product-title{
  font-family: var(--wp--preset--font-family--titres); font-weight:600;
  font-size:clamp(1.75rem,2.5vw,2.2rem); line-height:1.15; margin:0 0 12px; color: var(--wp--preset--color--contrast); }

/* étoiles */
.ml-single .wp-block-woocommerce-product-rating,
.ml-single .wc-block-components-product-rating{ margin:0 0 14px; }

/* prix */
.ml-single .ml-product-info .wp-block-woocommerce-product-price{
  color: var(--wp--preset--color--teal)!important; font-weight:700; font-size:1.6rem!important;
  margin:0 0 18px; display:block; }
.ml-single .ml-product-info .wp-block-woocommerce-product-price del{ color: var(--wp--preset--color--soft-ink); font-weight:400; font-size:1.1rem; opacity:.7; }
.ml-single .ml-product-info .wp-block-woocommerce-product-price ins{ text-decoration:none; }

/* description courte */
.ml-single .ml-product-info .wp-block-post-excerpt{ color: var(--wp--preset--color--contrast); line-height:1.7; font-size:1.04rem; margin:0 0 24px; }
.ml-single .ml-product-info .wp-block-post-excerpt__more-text{ display:none; }

/* formulaire panier (bloc add-to-cart-form) */
.ml-single .wp-block-woocommerce-add-to-cart-form form.cart{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:0 0 24px; }
.ml-single .wp-block-woocommerce-add-to-cart-form .quantity input.qty{
  width:84px; height:54px; text-align:center; border:1.5px solid var(--ml-line); border-radius:14px;
  background: var(--wp--preset--color--card); font:inherit; font-size:1rem; color: var(--wp--preset--color--contrast); }
.ml-single .wp-block-woocommerce-add-to-cart-form button,
.ml-single .wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button{
  flex:1 1 auto; background: var(--wp--preset--color--teal)!important; color: var(--wp--preset--color--cream)!important;
  border:0; border-radius:40px; padding:.85rem 1.9rem; font-weight:700; font-size:.98rem; cursor:pointer;
  transition:background .18s ease; min-height:50px; }
.ml-single .wp-block-woocommerce-add-to-cart-form button:hover,
.ml-single .wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button:hover{ background: var(--wp--preset--color--teal-deep)!important; }

/* bande de réassurance */
.ml-single .ml-reassurance{
  list-style:none!important; margin:4px 0 6px!important; padding:18px 0; display:flex; flex-wrap:wrap; gap:12px 22px;
  border-top:1px solid var(--ml-line); border-bottom:1px solid var(--ml-line); }
.ml-single .ml-reassurance li{
  display:flex; align-items:center; gap:8px; font-size:.86rem; font-weight:600; color: var(--wp--preset--color--soft-ink); margin:0; }
.ml-single .ml-reassurance li::before{
  content:""; width:15px; height:15px; flex:none; background: var(--wp--preset--color--teal);
  -webkit-mask:no-repeat center/15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  mask:no-repeat center/15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E"); }

/* description : section propre, PAS d'onglets WooCommerce ni « Avis (0) » */
.ml-single .ml-product-desc{ margin-top:clamp(44px,6vw,72px); }
.ml-single .ml-section-title{
  font-family: var(--wp--preset--font-family--titres); font-weight:600;
  font-size:clamp(1.5rem,2.4vw,1.9rem); margin:0 0 16px; padding-bottom:14px;
  border-bottom:1px solid var(--ml-line); }
/* Texte de description : couleur foncée + taille lisible (retour Florent :
   « on voit pas bien »). On lit vraiment ce paragraphe, il n'est pas décoratif :
   texte principal (--contrast), pas le gris doux réservé aux libellés. */
.ml-single .ml-product-desc :where(p,li){ color: var(--wp--preset--color--contrast); line-height:1.8; font-size:1.06rem; }
.ml-single .ml-product-desc h2:not(.ml-section-title),
.ml-single .ml-product-desc h3{ font-family: var(--wp--preset--font-family--titres); font-size:1.3rem; margin:1.4em 0 .5em; }
/* Liens dans le corps : pas de soulignement brut (retour Florent : « horrible »).
   Canard + demi-gras, soulignement fin seulement au survol. */
.ml-single .ml-product-desc a:not(.wp-element-button){
  color: var(--wp--preset--color--teal); font-weight:600; text-decoration:none;
  text-underline-offset:3px; text-decoration-thickness:1px; transition:color .18s ease; }
.ml-single .ml-product-desc a:not(.wp-element-button):hover{
  color: var(--wp--preset--color--teal-deep); text-decoration:underline; }

/* étoiles maison (composant réutilisable, --r de 0 à 5) */
.ml-stars{ --r:0; display:inline-block; width:5.4em; height:1em; line-height:1; position:relative; font-size:.95rem; vertical-align:middle; }
.ml-stars::before{ content:"★★★★★"; letter-spacing:.1em; color: var(--ml-line); }
.ml-stars::after{ content:"★★★★★"; letter-spacing:.1em; color: var(--wp--preset--color--clay);
  position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; width:calc(var(--r) / 5 * 100%); }

/* avis clients (maison, masqués si 0) */
.ml-reviews{ margin-top:clamp(44px,6vw,72px); max-width:820px; }
.ml-reviews-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.ml-reviews-head .ml-section-title{ margin:0; padding:0; border:0; }
.ml-reviews-score{ display:flex; align-items:center; gap:10px; }
.ml-reviews-score strong{ font-size:1.3rem; color: var(--wp--preset--color--contrast); }
.ml-reviews-count{ color: var(--wp--preset--color--soft-ink); font-size:.85rem; }
.ml-reviews-list{ display:grid; gap:18px; margin-top:24px; }
.ml-review{ background: var(--wp--preset--color--card); border:1px solid var(--ml-line); border-radius:16px; padding:20px 22px; }
.ml-review-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.ml-review-author{ font-weight:700; }
.ml-review-body{ color: var(--wp--preset--color--soft-ink); line-height:1.7; }
.ml-review-body p:last-child{ margin-bottom:0; }

/* « D'autres créations de l'atelier » : grille verticale + infinite scroll
   (même mécanique que la boutique ; cartes partagées via .wc-block-product). */
.ml-atelier{ margin-top:clamp(48px,6vw,80px); }
.ml-single .ml-atelier .wc-block-product-template{
  display:grid!important; grid-template-columns:repeat(3,1fr); gap:24px;
  margin:0!important; padding:0!important; list-style:none; }
@media(max-width:820px){ .ml-single .ml-atelier .wc-block-product-template{ grid-template-columns:repeat(2,1fr)!important; gap:16px; } }
/* On reste à 2 colonnes jusqu'en bas : la colonne unique donnait des cartes
   géantes et une page interminable (retour Florent 20/07). */
@media(max-width:520px){ .ml-single .ml-atelier .wc-block-product-template{ grid-template-columns:repeat(2,1fr)!important; gap:12px; } }

/* ================================================================
   PANIER + CHECKOUT (shortcodes classiques WooCommerce, habillés premium
   — on garde le shortcode pour ne PAS risquer le paiement SumUp)
   ================================================================ */
.ml-page-title{
  font-family: var(--wp--preset--font-family--titres); font-weight:600;
  font-size:clamp(1.6rem,2.6vw,2.05rem); letter-spacing:-.015em; margin:0 0 clamp(18px,2.4vw,26px); }

/* Champs de saisie */
.ml-cart :where(input[type=text],input[type=number],input[type=email],input[type=tel],input[type=password],textarea,select),
.ml-checkout :where(input[type=text],input[type=number],input[type=email],input[type=tel],input[type=password],textarea,select){
  border:1.5px solid var(--ml-line); border-radius:12px; background:var(--wp--preset--color--card);
  padding:12px 14px; font:inherit; font-size:1rem; color:var(--wp--preset--color--contrast);
  width:100%; box-sizing:border-box; }
.ml-cart :where(input,textarea,select):focus,
.ml-checkout :where(input,textarea,select):focus{
  outline:2px solid var(--wp--preset--color--teal); outline-offset:1px; border-color:transparent; }
.ml-checkout label{ font-weight:600; font-size:.9rem; }
.ml-checkout .required{ color:var(--wp--preset--color--coral); border:0; }

/* Boutons principaux */
.ml-cart :where(.button,.checkout-button),
.ml-checkout :where(.button,#place_order){
  background:var(--wp--preset--color--teal)!important; color:var(--wp--preset--color--cream)!important;
  border:0; border-radius:40px; padding:.72rem 1.5rem; font-weight:700; font-size:.95rem; cursor:pointer;
  transition:background .18s ease; box-shadow:none; text-transform:none; letter-spacing:0;
  box-sizing:border-box; max-width:100%; }
.ml-cart :where(.button,.checkout-button):hover,
.ml-checkout :where(.button,#place_order):hover{ background:var(--wp--preset--color--teal-deep)!important; }
/* Boutons secondaires (maj panier, appliquer code) */
.ml-cart button[name=update_cart],
.ml-cart .coupon .button{
  background:transparent!important; color:var(--wp--preset--color--teal)!important;
  box-shadow:inset 0 0 0 1.5px var(--wp--preset--color--teal)!important; }
.ml-cart button[name=update_cart]:hover,
.ml-cart .coupon .button:hover{ background:var(--wp--preset--color--teal)!important; color:var(--wp--preset--color--cream)!important; }

/* Notices — sélecteurs de classe explicites (spécificité > feuille WooCommerce,
   qui se charge après la nôtre) pour supprimer le bleu WooCommerce par défaut. */
.ml-cart .woocommerce-message, .ml-cart .woocommerce-info, .ml-cart .woocommerce-error,
.ml-checkout .woocommerce-message, .ml-checkout .woocommerce-info, .ml-checkout .woocommerce-error{
  border-radius:14px!important; border:1px solid var(--ml-line)!important; border-top:3px solid var(--wp--preset--color--teal)!important;
  background:var(--wp--preset--color--card)!important; color:var(--wp--preset--color--contrast)!important;
  padding:14px 18px 14px 46px!important; list-style:none!important; box-shadow:none!important; }
.ml-cart .woocommerce-error, .ml-checkout .woocommerce-error{ border-top-color:var(--wp--preset--color--coral)!important; }
.ml-cart .woocommerce-message::before, .ml-cart .woocommerce-info::before,
.ml-checkout .woocommerce-message::before, .ml-checkout .woocommerce-info::before{
  color:var(--wp--preset--color--teal)!important; left:18px!important; top:15px!important; }
.ml-cart .woocommerce-error::before, .ml-checkout .woocommerce-error::before{ color:var(--wp--preset--color--coral)!important; }
.ml-cart .woocommerce-message a, .ml-cart .woocommerce-info a,
.ml-checkout .woocommerce-message a, .ml-checkout .woocommerce-info a{ color:var(--wp--preset--color--teal)!important; font-weight:600; }
/* le lien « Cliquez ici pour saisir votre code » : discret, marque */
.ml-checkout .woocommerce-form-coupon-toggle .woocommerce-info{ font-size:.92rem; }

/* WooCommerce sert désormais ses notices en composant BLOCS
   (.wc-block-components-notice-banner.is-info/-success/-error) — bleu système par
   défaut. On rebrande partout (panier, checkout, messages « ajouté au panier »…). */
.wc-block-components-notice-banner{
  background: var(--wp--preset--color--card)!important; color: var(--wp--preset--color--contrast)!important;
  border:1px solid var(--ml-line)!important; border-left:4px solid var(--wp--preset--color--teal)!important;
  border-radius:14px!important; box-shadow:none!important; align-items:center; }
.wc-block-components-notice-banner.is-error{ border-left-color: var(--wp--preset--color--coral)!important; }
.wc-block-components-notice-banner.is-success{ border-left-color: var(--wp--preset--color--teal)!important; }
.wc-block-components-notice-banner > svg{ fill: var(--wp--preset--color--teal)!important; background:transparent!important; }
.wc-block-components-notice-banner.is-error > svg{ fill: var(--wp--preset--color--coral)!important; }
.wc-block-components-notice-banner a{ color: var(--wp--preset--color--teal)!important; font-weight:600; }
.wc-block-components-notice-banner a:hover{ color: var(--wp--preset--color--teal-deep)!important; }

/* --- PANIER : UNE SEULE COLONNE, empilée (retour Florent 21/07 : « tout découpé
   à gauche »). Les 2 colonnes flottantes écrasaient les articles dans 62% de la
   largeur et tassaient le formulaire d'adresse dans une bande de 34% (champs
   Ville / Code postal minuscules, bouton sur 2 lignes). On empile : les articles
   en pleine largeur d'abord, le bloc total + adresse en dessous. --- */
.ml-cart .woocommerce::after{ content:""; display:table; clear:both; }
.ml-cart .woocommerce-cart-form{ float:none; width:100%; margin:0; }
.ml-cart .cart-collaterals{ float:none; width:100%; margin:clamp(28px,3.5vw,40px) 0 0; }

/* Articles : line-items MODERNES en flex, plus de look tableau WooCommerce
   (retour Florent : « trop gros, pas harmonieux, trop woocommerce »). On retire
   l'entête tabulaire et on aligne chaque article : vignette · nom · prix unit. ·
   quantité · sous-total · retirer. */
.ml-cart table.cart{ display:block; width:100%!important; border:0; margin:0; }
.ml-cart table.cart thead{ display:none; }
.ml-cart table.cart tbody{ display:block; }
.ml-cart tr.woocommerce-cart-form__cart-item{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px;
  padding:16px 0; border-bottom:1px solid var(--ml-line); }
.ml-cart tr.woocommerce-cart-form__cart-item td{ border:0; padding:0; background:transparent; vertical-align:middle; }
.ml-cart td.product-thumbnail{ order:1; flex:none; }
.ml-cart td.product-thumbnail img{ width:66px; height:66px; object-fit:cover; border-radius:12px; display:block; }
.ml-cart td.product-name{ order:2; flex:1 1 180px; min-width:150px; }
.ml-cart td.product-name a{ font-family:var(--wp--preset--font-family--titres); font-weight:600;
  color:var(--wp--preset--color--contrast); text-decoration:none; font-size:1.02rem; line-height:1.3; }
.ml-cart td.product-name a:hover{ color:var(--wp--preset--color--teal); }
.ml-cart td.product-price{ order:3; color:var(--wp--preset--color--soft-ink); font-size:.9rem; white-space:nowrap; min-width:64px; text-align:right; }
.ml-cart td.product-quantity{ order:4; }
.ml-cart td.product-subtotal{ order:5; font-weight:700; color:var(--wp--preset--color--contrast); white-space:nowrap; min-width:64px; text-align:right; }
.ml-cart td.product-remove{ order:6; flex:none; }
.ml-cart .product-remove a.remove{
  color:var(--wp--preset--color--soft-ink)!important; border:1px solid var(--ml-line);
  width:26px; height:26px; line-height:24px; border-radius:50%; text-align:center; display:inline-block;
  background:var(--wp--preset--color--card)!important; font-size:15px; text-decoration:none; }
.ml-cart .product-remove a.remove:hover{ background:var(--wp--preset--color--coral)!important; color:#fff!important; border-color:var(--wp--preset--color--coral); }
.ml-cart .quantity input.qty{ width:58px; height:40px; text-align:center; }
/* WooCommerce réinjecte « Prix : / Quantité : / Total : » sur mobile via
   woocommerce-smallscreen.css (td::before{content:attr(data-title)}). On les
   coupe : c'est exactement le look Woo à bannir. */
.ml-cart .shop_table_responsive td::before,
.ml-cart table.cart td::before{ content:none!important; }
/* ⚠️ CES RÈGLES DOIVENT RESTER AVANT LA MEDIA QUERY MOBILE qui suit.
   À spécificité égale, c'est la dernière chargée qui gagne — et une media query
   n'ajoute AUCUNE spécificité. Placées après, elles reprenaient en silence le
   `white-space:nowrap`, le `gap` et le `padding` à la version mobile, qui était
   donc à moitié morte sans que rien ne le signale (constaté le 30/07/2026, en
   corrigant le débordement du bouton « Appliquer le code promo »). */
/* Ligne actions : code promo à gauche, MAJ à droite, sur une seule ligne.
   Le <tr> n'a pas de classe → on cible le dernier de la table (repli block). */
.ml-cart table.cart tbody tr:last-child{ display:block; border-bottom:0!important; }
.ml-cart td.actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:22px 0 0; }
.ml-cart td.actions .coupon{ display:flex; gap:10px; align-items:center; }
.ml-cart td.actions .coupon .input-text{ width:auto; min-width:150px; }
.ml-cart td.actions .coupon .button,
.ml-cart td.actions button[name=update_cart]{ white-space:nowrap; padding:.62rem 1.2rem; font-size:.9rem; }

/* Panier mobile compact (retour Florent 19/07 : « tout énorme, pas optimal »).
   ⚠️ WooCommerce charge `woocommerce-smallscreen.css` sous 768px qui force
   `tr{display:block}` / `td{display:block}` avec une spécificité > la nôtre :
   il FAUT !important + un breakpoint aligné (768px) pour reprendre la main,
   sinon les articles retombent en pile « façon Woo » collée à droite.
   Article en grille : vignette à gauche, nom + quantité + sous-total à droite. */
@media(max-width:768px){
  .ml-cart table.cart tr.woocommerce-cart-form__cart-item{
    display:grid !important; grid-template-columns:60px 1fr auto; column-gap:14px; row-gap:6px;
    grid-template-areas:"thumb name remove" "thumb qty subtotal"; padding:14px 0; align-items:center; }
  /* préfixe `table.cart` (3 classes) pour battre woocommerce-smallscreen (2 classes) */
  .ml-cart table.cart td.product-thumbnail{ display:block; grid-area:thumb; align-self:start; }
  .ml-cart table.cart td.product-thumbnail img{ width:60px; height:60px; }
  /* ⚠️ `text-align:left!important` : woocommerce-smallscreen.css impose
     `text-align:right!important` à toutes les cellules et se charge après nous —
     sans le !important, les noms de produits sont collés à droite (constaté 21/07). */
  .ml-cart table.cart td.product-name{ display:block; grid-area:name; min-width:0; align-self:center; text-align:left!important; }
  .ml-cart table.cart td.product-price{ display:none; }
  .ml-cart table.cart td.product-quantity{ display:block; grid-area:qty; margin:0; text-align:left!important; }
  .ml-cart table.cart td.product-subtotal{ display:block; grid-area:subtotal; align-self:center; }
  .ml-cart table.cart td.product-remove{ display:block; grid-area:remove; justify-self:end; align-self:start; }
  .ml-cart .quantity input.qty{ width:52px; height:36px; }
  /* Ligne actions : plein-largeur mais à taille humaine, moins de vide.
     ⚠️ Le code promo passe en DEUX lignes empilées (champ, puis bouton), et le
     bouton perd son `white-space:nowrap`. Retour Florent 30/07/2026 : « le bouton
     appliquer le code promo déborde sur mobile ». La cause : « Appliquer le code
     promo » en une seule ligne mesure ~200 px de large et le bouton ne pouvait pas
     rétrécir — le champ de saisie à côté finissait de remplir la largeur, et
     l'ensemble sortait de l'écran. Côte à côte, ça ne tient sur AUCUN téléphone :
     autant l'empiler franchement plutôt que de grappiller des pixels. */
  .ml-cart td.actions{ display:flex !important; flex-wrap:wrap; gap:10px; padding:14px 0 0; }
  .ml-cart td.actions .coupon{ flex:1 1 100%; flex-wrap:wrap; gap:10px; }
  .ml-cart td.actions .coupon .input-text{ flex:1 1 100%; width:100%; min-width:0; box-sizing:border-box; }
  .ml-cart td.actions .coupon .button{
    flex:1 1 100%; width:100%; box-sizing:border-box;
    white-space:normal; text-align:center; padding:.7rem 1rem; min-height:44px; }
  .ml-cart td.actions button[name=update_cart]{ flex:1 1 100%; white-space:normal; min-height:44px; }
  /* Total panier mobile compact (retour Florent : « pas optimisé mobile ») :
     moins de vide au-dessus, lignes resserrées, titre plus proche. */
  .ml-cart .cart-collaterals{ margin-top:20px !important; }
  .ml-cart .cart_totals{ padding:16px 18px; }
  .ml-cart .cart_totals h2{ font-size:1.05rem; margin:0 0 8px; }
  /* ⚠️ woocommerce-smallscreen.css masque les <th> sous 768px et réinjecte le
     libellé via td::before — qu'on coupe pour la liste d'articles. Le tableau des
     totaux porte la même classe : sans ça, « Sous-total » et « Total » DISPARAISSENT
     (bug constaté le 21/07). D'où le !important pour rendre les <th> à ce tableau. */
  .ml-cart .cart_totals table th{ display:block!important; }
  .ml-cart .cart_totals table td{ display:block!important; }
  .ml-cart .cart_totals tr.shipping{ display:block!important; }
  .ml-cart .cart_totals table th, .ml-cart .cart_totals table td{ padding:9px 0; font-size:.95rem; }
  .ml-cart .shipping-calculator-form .form-row{ margin:0 0 12px; }
  .ml-cart .shipping-calculator-form label{ display:block; text-align:left; margin:0 0 5px; font-size:.9rem; }
  .ml-cart .cart_totals .order-total .amount{ font-size:1.2rem; }
  .ml-cart .wc-proceed-to-checkout{ padding-top:14px; }
  .ml-cart .wc-proceed-to-checkout .checkout-button{ padding:.74rem 1.1rem; font-size:1rem; }
}

/* carte total (bloc du bas, pleine largeur)
   ⚠️ `box-sizing:border-box` OBLIGATOIRE : sans lui, `width:100%` + padding
   débordait de ~27px à droite sur téléphone (retour Florent : « découpé à
   droite »). */
.ml-cart .cart_totals{ float:none!important; width:100%!important; box-sizing:border-box;
  background:var(--wp--preset--color--card); border:1px solid var(--ml-line); border-radius:18px;
  padding:clamp(20px,2.4vw,28px) clamp(18px,2.6vw,32px); }
.ml-cart .cart_totals h2{ font-family:var(--wp--preset--font-family--titres); font-size:1.15rem; margin:0 0 12px; }
.ml-cart .cart_totals table{ border:0; margin:0; width:100%; display:block; }
.ml-cart .cart_totals table tbody{ display:block; }
/* Lignes en flex plutôt qu'en colonnes de tableau : le filet de séparation court
   alors sur TOUTE la largeur de la carte (en 2 colonnes, il s'arrêtait au milieu),
   et le montant se cale à droite quelle que soit la longueur du libellé. */
.ml-cart .cart_totals table tr{ display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  border-top:1px solid var(--ml-line); }
.ml-cart .cart_totals table tr:first-child{ border-top:0; }
.ml-cart .cart_totals table th, .ml-cart .cart_totals table td{ border:0; padding:12px 0; }
.ml-cart .cart_totals table th{ text-align:left; }
.ml-cart .cart_totals table td{ text-align:right; }
.ml-cart .cart_totals .order-total .amount{ color:var(--wp--preset--color--teal); font-size:1.3rem; }
/* Ligne LIVRAISON (retour Florent : « pas bonne sur mobile ») : les libellés de
   méthode (« Mondial Relay – Livraison Point Relais : 5,00 € ») sont longs et
   débordent en 2 colonnes th/td. On empile : « Livraison » au-dessus, la liste
   des méthodes en pleine largeur en dessous, choix radio lisibles. */
.ml-cart .cart_totals tr.shipping{ display:block; }
.ml-cart .cart_totals tr.shipping th{ display:block; padding-bottom:4px; }
/* ⚠️ !important obligatoire : woocommerce-smallscreen.css impose
   `.shop_table_responsive tr td{ text-align:right!important }` et se charge APRÈS
   notre feuille. Sans ça, tout le bloc Expédition (libellés, champs, bouton) part
   à droite sur téléphone — c'est le « découpé à droite » signalé le 21/07. */
.ml-cart .cart_totals tr.shipping td{ display:block; padding-top:0; text-align:left!important; }

/* Le pays est rendu par select2 (WooCommerce remplace le <select> natif, réduit à
   1px) : c'est le conteneur select2 qu'il faut dimensionner, sinon il déborde. */
.ml-cart .shipping-calculator-form .select2-container{ width:100%!important; max-width:100%; }
.ml-cart .shipping-calculator-form .select2-container .select2-selection--single{
  height:auto; padding:10px 12px; border:1.5px solid var(--ml-line); border-radius:12px;
  background:var(--wp--preset--color--card); }
.ml-cart .shipping-calculator-form .select2-container .select2-selection__rendered{
  padding:0; line-height:1.4; color:var(--wp--preset--color--contrast); text-align:left; }
.ml-cart .cart_totals #shipping_method{ list-style:none; margin:0; padding:0; }
.ml-cart .cart_totals #shipping_method li{ display:flex; align-items:flex-start; gap:8px; padding:5px 0; }
.ml-cart .cart_totals #shipping_method li input{ margin-top:4px; flex:none; }
.ml-cart .cart_totals #shipping_method li label{ font-size:.92rem; line-height:1.35; }
.ml-cart .cart_totals #shipping_method li .amount{ font-weight:700; }
.ml-cart .cart_totals .woocommerce-shipping-destination{ font-size:.85rem; color:var(--wp--preset--color--soft-ink); margin:8px 0 6px; line-height:1.4; }
.ml-cart .cart_totals .shipping-calculator-button{ color:var(--wp--preset--color--teal); font-weight:600; text-decoration:none; font-size:.9rem; }
.ml-cart .cart_totals .shipping-calculator-button:hover{ color:var(--wp--preset--color--teal-deep); text-decoration:underline; }
.ml-cart .wc-proceed-to-checkout{ padding-top:18px; margin:0; }
.ml-cart .wc-proceed-to-checkout .checkout-button{ display:block; text-align:center; width:100%; box-sizing:border-box; margin:0; }

/* Le <p> vide du champ « région » (il ne contient qu'un input caché quand le pays
   n'a pas de régions) prendrait une colonne vide dans la ligne d'adresse. */
.ml-cart .shipping-calculator-form .form-row:has(> input[type=hidden]:only-child){ display:none; }

/* --- Le bloc du bas en pleine largeur (≥901px) : montants alignés à droite,
   adresse sur UNE ligne (pays · ville · code postal · bouton) au lieu d'une
   colonne étroite, et bouton de commande calibré plutôt qu'étiré sur 1180px. --- */
@media(min-width:901px){
  /* ⚠️ jQuery slideDown pose `display:block` EN INLINE sur le calculateur :
     sans !important, la ligne d'adresse retombe en colonne. */
  .ml-cart .shipping-calculator-form[style]{
    display:flex!important; flex-wrap:wrap; align-items:flex-end; gap:14px 18px; margin-top:12px; }
  .ml-cart .shipping-calculator-form{
    display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 18px; margin-top:12px; }
  .ml-cart .shipping-calculator-form .form-row{ flex:1 1 200px; min-width:0; margin:0; }
  .ml-cart .shipping-calculator-form > p:last-of-type{ flex:0 0 auto; margin:0; }
  .ml-cart .shipping-calculator-form button[name=calc_shipping]{ white-space:nowrap; }
  .ml-cart .wc-proceed-to-checkout{ display:flex; justify-content:flex-end; }
  .ml-cart .wc-proceed-to-checkout .checkout-button{ width:auto; min-width:320px; }
}

/* ================================================================
   LA COMMUNE QUI SE COMPLÈTE TOUTE SEULE
   (mu-plugins/mamylaine-communes.php + assets/communes.js)
   Panier et commande : taper les premières lettres d'une ville ou un code postal
   propose la commune, et le choix remplit les DEUX champs.
   ================================================================ */
.ml-commune-boite{ position:relative; }
/* ⚠️ `z-index` élevé : la liste flotte au-dessus de la carte des totaux, qui a son
   propre fond et sa propre ombre. Sans ça, les suggestions passent DERRIÈRE le
   bloc suivant et deviennent illisibles à moitié. */
.ml-commune-liste{
  position:absolute; z-index:60; left:0; right:0; top:calc(100% + 6px);
  margin:0; padding:6px; list-style:none;
  max-height:min(300px,52vh); overflow-y:auto;
  background: var(--wp--preset--color--card);
  border:1px solid var(--ml-line); border-radius:14px;
  box-shadow:0 24px 48px -28px rgba(36,31,27,.5); }
.ml-commune-liste[hidden]{ display:none; }
.ml-commune-option{
  display:flex; flex-direction:column; gap:2px;
  padding:9px 12px; border-radius:10px; cursor:pointer;
  /* Cible tactile : une suggestion se choisit au doigt, sur un téléphone, en
     pleine saisie d'adresse. En dessous de 44 px on tape à côté. */
  min-height:44px; justify-content:center; }
.ml-commune-option.est-actif{ background: var(--wp--preset--color--soft); }
.ml-commune-ville{
  font-family: var(--wp--preset--font-family--titres); font-weight:600; font-size:1rem;
  color: var(--wp--preset--color--contrast); line-height:1.25; }
.ml-commune-cp{
  font-family: var(--wp--preset--font-family--corps); font-size:.78rem;
  color: var(--wp--preset--color--soft-ink); line-height:1.3; }
/* Le compteur annoncé aux lecteurs d'écran : présent pour eux, invisible à l'œil.
   ⚠️ Ne PAS utiliser `display:none`, qui le retirerait aussi de la restitution. */
.ml-commune-live{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* --- CHECKOUT : 2 colonnes en GRID (robuste). Les flottants décrochaient le
   récap tout en bas (retour Florent : « rien fait / vide »). Grille : coordonnées
   à gauche (span 2 lignes), titre + récap collant à droite. Les 3 blocs sont des
   enfants directs de form.checkout (customer_details, order_review_heading,
   order_review) → grid-template-areas fiable. --- */
.ml-checkout form.checkout{
  display:grid; grid-template-columns:1fr 360px; gap:clamp(24px,3vw,46px);
  grid-template-areas:"billing heading" "billing review"; align-items:start; }
.ml-checkout #customer_details{ grid-area:billing; min-width:0; }
.ml-checkout #order_review_heading{ grid-area:heading; margin:0;
  font-family:var(--wp--preset--font-family--titres); font-size:1.3rem; }
.ml-checkout #order_review{ grid-area:review; position:sticky; top:96px;
  background:var(--wp--preset--color--card); border:1px solid var(--ml-line); border-radius:18px; padding:24px 26px; }
@media(max-width:900px){
  .ml-checkout form.checkout{ grid-template-columns:1fr; grid-template-areas:"billing" "heading" "review"; gap:20px; }
  .ml-checkout #order_review_heading{ margin-top:10px; }
  .ml-checkout #order_review{ position:static; } }
.ml-checkout .col2-set .col-1, .ml-checkout .col2-set .col-2{ width:100%; float:none; }
.ml-checkout h3{ font-family:var(--wp--preset--font-family--titres); font-size:1.2rem; margin:0 0 16px; }
.ml-checkout .form-row{ margin:0 0 14px; padding:0; }
.ml-checkout #order_review table.shop_table{ border:0; margin:0 0 8px; }
.ml-checkout #order_review table.shop_table th, .ml-checkout #order_review table.shop_table td{
  border:0; border-top:1px solid var(--ml-line); padding:11px 0; }
.ml-checkout #order_review .order-total .amount{ color:var(--wp--preset--color--teal); font-size:1.3rem; }
.ml-checkout #payment{ background:transparent; border:0; }
.ml-checkout #payment ul.payment_methods{ border:0; padding:0; margin:0 0 16px; list-style:none; }
.ml-checkout #payment ul.payment_methods li{ background:var(--wp--preset--color--base); border:1px solid var(--ml-line);
  border-radius:12px; padding:14px 16px; margin:0 0 10px; }
.ml-checkout #payment div.payment_box{ background:transparent!important; margin:10px 0 0; }
.ml-checkout #payment div.payment_box::before{ display:none; }
.ml-checkout #place_order{ width:100%; margin-top:8px; padding:.9rem; font-size:1rem; }
.ml-checkout .woocommerce-terms-and-conditions-wrapper{ font-size:.85rem; margin:12px 0; }

/* ================================================================
   BLOG (home.html + archive.html) — liste éditoriale (retour Florent :
   « refaire la partie blog, elle est horrible »). Avant : gabarit brut
   du thème parent. Cartes = .ml-journal (déjà stylées), on complète.
   ================================================================ */
/* En-têtes de page « soignés » (retour Florent : « les hero pas jolie partout »)
   → centrés + filet « point de couture » sous le titre (motif crochet on-brand). */
.ml-blog-intro, .ml-page-head{ text-align:center; }
.ml-blog-intro .ml-blog-tagline,
.ml-page-head .ml-page-title{ margin-inline:auto; }
.ml-blog-title::after,
.ml-page-head .ml-page-title::after{
  content:""; display:block; width:88px; height:0; margin:16px auto 0;
  border-top:2px dashed var(--wp--preset--color--clay); }
.ml-page-head .ml-page-title{ max-width:24ch; }

.ml-blog-intro{ border-bottom:1px solid var(--ml-line); }
.ml-blog-intro .ml-eyebrow{ margin-bottom:10px; }
.ml-blog-title{
  font-family: var(--wp--preset--font-family--titres); font-weight:600;
  font-size:clamp(2rem,3.4vw,2.7rem); line-height:1.08; letter-spacing:-.02em;
  margin:0 0 12px; color: var(--wp--preset--color--contrast); }
.ml-blog-tagline{ max-width:60ch; margin:0; line-height:1.6; color: var(--wp--preset--color--soft-ink); }

/* le bloc query reprend la grille .ml-journal ; on ajuste pour le contexte page */
.ml-blog-body .ml-journal.wp-block-query{ margin:0; }
.ml-blog-body .wp-block-post-template{
  display:grid!important; grid-template-columns:repeat(3,1fr); gap:36px 28px; margin:0; padding:0; list-style:none; align-items:start; }
@media(max-width:900px){ .ml-blog-body .wp-block-post-template{ grid-template-columns:repeat(2,1fr); gap:30px 22px; } }
@media(max-width:600px){ .ml-blog-body .wp-block-post-template{ grid-template-columns:1fr; } }
.ml-blog-body .wp-block-post{ display:flex; flex-direction:column; }
/* Ratio forcé sur le CONTENEUR (pas juste l'img) → toutes les vignettes ont la
   même hauteur, les cartes s'alignent (retour Florent : « pas aligné »). */
.ml-blog-body .wp-block-post-featured-image{ margin:0 0 14px!important; aspect-ratio:3/2; border-radius:16px; overflow:hidden; }
.ml-blog-body .wp-block-post-featured-image a{ display:block; height:100%; overflow:hidden; border-radius:16px; }
.ml-blog-body .wp-block-post-featured-image img{ border-radius:16px; width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease; }
.ml-blog-body .wp-block-post-featured-image a:hover img{ transform:scale(1.04); }
.ml-blog-body .ml-kicker,
.ml-blog-body .wp-block-post-terms{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--wp--preset--color--clay); font-weight:700; margin:0 0 6px; }
.ml-blog-body .wp-block-post-terms a{ color: var(--wp--preset--color--clay); text-decoration:none; }
.ml-blog-body .wp-block-post-title{ font-family: var(--wp--preset--font-family--titres); font-weight:600;
  font-size:1.34rem; line-height:1.25; margin:0 0 8px; }
.ml-blog-body .wp-block-post-title a{ text-decoration:none; color: var(--wp--preset--color--contrast); }
.ml-blog-body .wp-block-post-title a:hover{ color: var(--wp--preset--color--teal); }
.ml-blog-body .wp-block-post-excerpt{ color: var(--wp--preset--color--contrast); line-height:1.6; margin:0 0 12px; }
.ml-blog-body .wp-block-post-excerpt__more-text{ display:none; }
.ml-post-date{ margin-top:auto; font-size:.82rem; color: var(--wp--preset--color--soft-ink); }

/* Pagination blog : pastilles marque */
.ml-blog-pagination{ margin-top:clamp(36px,5vw,56px); gap:8px; }
.ml-blog-pagination .wp-block-query-pagination-numbers,
.ml-blog-pagination .wp-block-query-pagination-previous,
.ml-blog-pagination .wp-block-query-pagination-next{ margin:0; }
.ml-blog-pagination a, .ml-blog-pagination .page-numbers{
  text-decoration:none; color: var(--wp--preset--color--teal-deep); font-weight:600;
  padding:8px 14px; border-radius:40px; border:1.5px solid var(--ml-line); background: var(--wp--preset--color--card);
  transition:border-color .18s ease, color .18s ease; }
.ml-blog-pagination a:hover{ border-color: var(--wp--preset--color--teal); color: var(--wp--preset--color--teal); }
.ml-blog-pagination .page-numbers.current{ background: var(--wp--preset--color--teal); color: var(--wp--preset--color--cream); border-color: var(--wp--preset--color--teal); }

/* ================================================================
   ARTICLE (single.html) — lecture éditoriale (retour Florent : « pareil
   pour les articles individuels »). Colonne étroite, prose soignée.
   ================================================================ */
.ml-article-head .ml-kicker,
.ml-article-head .wp-block-post-terms{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--wp--preset--color--clay); font-weight:700; margin:0 0 12px; }
.ml-article-head .wp-block-post-terms a{ color: var(--wp--preset--color--clay); text-decoration:none; }
.ml-article-title{ font-family: var(--wp--preset--font-family--titres); font-weight:600;
  font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1.12; letter-spacing:-.02em; margin:0 0 16px; color: var(--wp--preset--color--contrast); }
.ml-article-meta{ gap:8px 16px; align-items:center; color: var(--wp--preset--color--soft-ink); font-size:.9rem; }
.ml-article-meta .wp-block-post-date{ color: var(--wp--preset--color--soft-ink); }
.ml-article-author::before{ content:"·"; margin-right:16px; color: var(--ml-line); }
.ml-article-cover img{ border-radius:22px; box-shadow: var(--ml-shadow); width:100%; object-fit:cover; }

/* Prose (article + page) : lisible, foncée, généreuse */
.ml-article-body .wp-block-post-content,
.ml-page-body .wp-block-post-content{ font-size:1.1rem; line-height:1.8; color: var(--wp--preset--color--contrast); }
.ml-article-body :where(p,li),
.ml-page-body :where(p,li){ color: var(--wp--preset--color--contrast); }
.ml-article-body .wp-block-post-content > *,
.ml-page-body .wp-block-post-content > *{ margin-block:0 1.3em; }
.ml-article-body :where(h2,h3,h4),
.ml-page-body :where(h2,h3,h4){ font-family: var(--wp--preset--font-family--titres); margin:1.8em 0 .5em; line-height:1.2; }
.ml-article-body h2, .ml-page-body h2{ font-size:1.7rem; }
.ml-article-body h3, .ml-page-body h3{ font-size:1.35rem; }
.ml-article-body :where(img,figure img),
.ml-page-body :where(img,figure img){ border-radius:16px; }
.ml-article-body a:not(.wp-element-button),
.ml-page-body a:not(.wp-element-button){ color: var(--wp--preset--color--teal); font-weight:600; text-decoration:none;
  text-underline-offset:3px; transition:color .18s ease; }
.ml-article-body a:not(.wp-element-button):hover,
.ml-page-body a:not(.wp-element-button):hover{ color: var(--wp--preset--color--teal-deep); text-decoration:underline; }
.ml-article-body blockquote,
.ml-page-body blockquote{ border-left:3px solid var(--wp--preset--color--teal); margin:1.6em 0; padding:2px 0 2px 22px;
  font-family: var(--wp--preset--font-family--titres); font-style:italic; font-size:1.3rem; color: var(--wp--preset--color--teal-deep); }

/* Pied d'article : tags + retour */
.ml-article-footer{ margin-top:clamp(30px,4vw,48px); padding-top:22px; border-top:1px solid var(--ml-line);
  align-items:center; gap:14px; }
.ml-article-tags{ font-size:.82rem; color: var(--wp--preset--color--soft-ink); }
.ml-article-tags a{ color: var(--wp--preset--color--soft-ink); text-decoration:none; margin-right:6px; }
.ml-article-tags a:hover{ color: var(--wp--preset--color--teal); }
.ml-article-back a{ color: var(--wp--preset--color--teal); font-weight:700; text-decoration:none; }
.ml-article-back a:hover{ color: var(--wp--preset--color--teal-deep); }

/* Fin d'article : « À lire aussi » + « Nos créations » (retour Florent) */
.ml-article-more .ml-section-title{
  font-family: var(--wp--preset--font-family--titres); font-weight:600;
  font-size:clamp(1.4rem,2.2vw,1.8rem); margin:0 0 20px; padding-bottom:14px; border-bottom:1px solid var(--ml-line); }
.ml-related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(max-width:820px){ .ml-related-grid{ grid-template-columns:repeat(2,1fr); gap:18px; } }
@media(max-width:560px){ .ml-related-grid{ grid-template-columns:1fr; } }
.ml-related-card{ display:flex; flex-direction:column; text-decoration:none; }
.ml-related-media{ display:block; overflow:hidden; border-radius:14px; aspect-ratio:3/2; margin-bottom:12px; }
.ml-related-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.ml-related-card:hover .ml-related-media img{ transform:scale(1.05); }
.ml-related-kicker{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--wp--preset--color--clay); font-weight:700; margin-bottom:5px; }
.ml-related-title{ display:block; font-family: var(--wp--preset--font-family--titres); font-weight:600;
  font-size:1.12rem; line-height:1.3; color: var(--wp--preset--color--contrast); }
.ml-related-card:hover .ml-related-title{ color: var(--wp--preset--color--teal); }
.ml-article-more .woocommerce{ margin-top:8px; }

/* La navigation « Article précédent / suivant » a été RETIRÉE le 30/07/2026.
   Retour Florent : « c'est moche, tu vas retirer ça ». Elle avait été retravaillée
   en deux cartes la veille — le rendu ne l'a pas convaincu, et « À lire aussi »
   juste en dessous fait déjà mieux : des vignettes illustrées, et un choix plutôt
   qu'un ordre imposé par la date de publication.
   ⚠️ Le bloc est retiré de templates/single.html ; le CSS qui l'habillait est
   supprimé avec lui, pour ne pas laisser une règle morte qui fera douter plus tard. */

/* ================================================================
   PAGE générique (page.html) — à-propos, contact, mon compte…
   ================================================================ */
/* Hero de page interne (à-propos, contact, légales) : bande crème soutenue +
   grand titre serif canard + motif couture. Retour Florent 19/07 : la version
   photo « pas jolie » → on garde le crème (cohérent avec les heros catégories). */
.ml-page-head{
  background: var(--wp--preset--color--soft);
  border-bottom:1px solid var(--ml-line);
}
.ml-page-head .ml-page-title{
  margin:0 auto; max-width:24ch;
  font-size:clamp(2.4rem,4.6vw,3.3rem); line-height:1.05;
  color: var(--wp--preset--color--teal-deep);
}
.ml-page-body{ padding-top:clamp(30px,4vw,52px); }

/* Page pleine largeur (retour Florent) mais texte courant bridé pour rester
   lisible ; images, média-texte et colonnes gardent, eux, toute la largeur. */
.ml-page-body .wp-block-post-content > :where(p,h2,h3,ul,ol,blockquote){ max-width:68ch; }
/* Tout le contenu de page ALIGNÉ À GAUCHE : la mise en page « constrained »
   centrait les paragraphes (margin-inline:auto) alors que le raccourci margin
   des titres remettait leur marge à 0 → titres à gauche, paragraphes décalés à
   droite. Retour Florent 19/07 : « sous-titres trop à droite sur desktop ». */
.ml-page-body .wp-block-post-content > *{ margin-left:0 !important; margin-right:0 !important; }
/* …mais les blocs STRUCTURÉS (colonnes, média-texte, images, groupes) prennent
   toute la largeur de page (wide-size 1180) au lieu d'être bridés à la largeur
   du texte : sinon formulaire de contact et cartes « à-propos » se tassent dans
   la moitié gauche sur desktop (retour Florent 20/07 : « trop à gauche, pas
   pleine largeur »). Le texte courant, lui, reste en colonne lisible à gauche. */
.ml-page-body .wp-block-post-content > .wp-block-columns,
.ml-page-body .wp-block-post-content > .wp-block-media-text,
.ml-page-body .wp-block-post-content > .wp-block-group,
.ml-page-body .wp-block-post-content > figure,
.ml-page-body .wp-block-post-content > .wp-block-image{
  max-width: var(--wp--style--global--wide-size) !important; width:100%; }
/* Chapô de page (à-propos, contact…) */
.ml-page-body .ml-lead{ font-size:1.25rem; line-height:1.55; color: var(--wp--preset--color--teal-deep);
  max-width:60ch; margin:0 0 clamp(28px,4vw,44px); }
/* Portrait + texte (média-texte) */
.ml-page-body .wp-block-media-text{ gap:clamp(24px,4vw,48px); margin:clamp(20px,3vw,36px) 0; }
.ml-page-body .wp-block-media-text__media img{ border-radius:20px; box-shadow: var(--ml-shadow); }
.ml-page-body .wp-block-media-text h2{ margin-top:0; }
/* Cartes « engagement / valeurs » */
.ml-values{ gap:20px!important; margin-top:8px; }
.ml-values .wp-block-column{
  background: var(--wp--preset--color--card); border:1px solid var(--ml-line); border-radius:18px;
  padding:24px 22px; }
.ml-values h3{ font-family: var(--wp--preset--font-family--titres); font-size:1.2rem; margin:0 0 8px!important; color: var(--wp--preset--color--teal-deep); }
.ml-values p{ margin:0; color: var(--wp--preset--color--soft-ink); line-height:1.6; }
@media(max-width:781px){ .ml-values{ gap:14px!important; } }

/* Page contact : formulaire + carte info */
.ml-contact-info{ background: var(--wp--preset--color--soft); border-radius:18px; padding:clamp(22px,3vw,30px)!important; align-self:flex-start; }
.ml-contact-info h3{ font-family: var(--wp--preset--font-family--titres); font-size:1.15rem; margin:0 0 8px; }
.ml-contact-info h3:not(:first-child){ margin-top:22px; }
.ml-contact-info p{ margin:0; line-height:1.7; }
.ml-contact-info a{ color: var(--wp--preset--color--teal); font-weight:600; text-decoration:none; }
.ml-contact-info a:hover{ color: var(--wp--preset--color--teal-deep); }
/* ---------- Formulaires maison (mu-plugin mamylaine-formulaires) ---------- */
/* Le pot de miel anti-robot : invisible à l'écran ET aux lecteurs d'écran,
   mais présent dans le DOM (un simple display:none est repéré par les robots). */
.ml-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.ml-form .ml-field{ margin:0 0 16px; }
.ml-form label{ display:block; font-weight:600; font-size:.92rem; margin:0 0 6px; }
.ml-form :where(input[type=text],input[type=email],input[type=tel],textarea){
  width:100%; box-sizing:border-box; border:1.5px solid var(--ml-line); border-radius:12px;
  background: var(--wp--preset--color--card); padding:12px 14px; font:inherit; color: var(--wp--preset--color--contrast); }
.ml-form :where(input,textarea):focus{ outline:2px solid var(--wp--preset--color--teal); outline-offset:1px; border-color:transparent; }
.ml-form textarea{ min-height:140px; resize:vertical; }
.ml-form .ml-btn{
  background: var(--wp--preset--color--teal); color: var(--wp--preset--color--cream); border:0; border-radius:40px;
  padding:.8rem 1.8rem; font:inherit; font-weight:700; cursor:pointer;
  transition:background .18s ease; width:auto; }
.ml-form .ml-btn:hover{ background: var(--wp--preset--color--teal-deep); }
.ml-form .ml-submit{ margin:18px 0 0; }
.ml-form-rgpd{ font-size:.85rem; color: var(--wp--preset--color--soft-ink); line-height:1.5; margin:14px 0 0; }
.ml-turnstile{ margin:16px 0 0; }

/* Le bandeau de résultat après envoi */
.ml-form-message{ border-radius:12px; padding:13px 16px; margin:0 0 18px; font-weight:600; font-size:.95rem; line-height:1.5; }
.ml-form-message.is-ok{ background:rgba(11,110,118,.10); color: var(--wp--preset--color--teal-deep);
  box-shadow: inset 0 0 0 1.5px rgba(11,110,118,.35); }
.ml-form-message.is-ko{ background:rgba(190,70,50,.08); color:#8c3320; box-shadow: inset 0 0 0 1.5px rgba(190,70,50,.30); }

/* ---- Popup de confirmation après envoi (élément <dialog> natif) ---- */
.ml-modal{
  border:0; border-radius:22px; padding:clamp(28px,4vw,40px); max-width:min(440px,90vw);
  background: var(--wp--preset--color--card); color: var(--wp--preset--color--contrast);
  box-shadow:0 24px 60px rgba(11,110,118,.22); text-align:center; }
.ml-modal::backdrop{ background:rgba(11,58,62,.55); backdrop-filter:blur(2px); }
.ml-modal-icone{
  width:60px; height:60px; margin:0 auto 18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; font-weight:700; line-height:1; }
.ml-modal.is-ok .ml-modal-icone{ background:rgba(11,110,118,.12); color: var(--wp--preset--color--teal); }
.ml-modal.is-ko .ml-modal-icone{ background:rgba(190,70,50,.10); color:#8c3320; }
.ml-modal-titre{ font-family: var(--wp--preset--font-family--titres); font-size:clamp(1.3rem,3vw,1.6rem);
  margin:0 0 10px; color: var(--wp--preset--color--teal-deep); }
.ml-modal-texte{ margin:0 0 24px; line-height:1.6; color: var(--wp--preset--color--soft-ink); }
/* L'ouverture doit être douce : une apparition brutale se lit comme un bug. */
@media (prefers-reduced-motion: no-preference){
  .ml-modal[open]{ animation: ml-modal-in .22s ease-out; }
  @keyframes ml-modal-in{ from{ opacity:0; transform:translateY(10px) scale(.97); } }
}

/* Case de consentement : la case ne doit pas s'étirer sur toute la largeur */
.ml-consent{ margin:14px 0 0; }
.ml-consent label{ display:flex; gap:10px; align-items:flex-start; font-weight:400;
  font-size:.86rem; line-height:1.5; color: var(--wp--preset--color--soft-ink); }
.ml-consent input[type=checkbox]{ width:auto; flex:0 0 auto; margin-top:3px; accent-color: var(--wp--preset--color--teal); }

/* ---- WooCommerce « Mon compte » habillé (dans page.html) ---- */
.woocommerce-account .ml-page-body .woocommerce{ display:flex; gap:clamp(24px,4vw,48px); flex-wrap:wrap; align-items:flex-start; }
.woocommerce-account .woocommerce-MyAccount-navigation{ flex:0 0 230px; }
.woocommerce-account .woocommerce-MyAccount-content{ flex:1; min-width:0; }
@media(max-width:820px){ .woocommerce-account .woocommerce-MyAccount-navigation{ flex-basis:100%; } }
.woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0;
  background: var(--wp--preset--color--card); border:1px solid var(--ml-line); border-radius:16px; overflow:hidden; }
.woocommerce-account .woocommerce-MyAccount-navigation li{ margin:0; border-bottom:1px solid var(--ml-line); }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child{ border-bottom:0; }
.woocommerce-account .woocommerce-MyAccount-navigation a{ display:block; padding:13px 18px; text-decoration:none;
  color: var(--wp--preset--color--contrast); font-weight:600; font-size:.98rem; transition:background .14s ease, color .14s ease; }
.woocommerce-account .woocommerce-MyAccount-navigation a:hover{ background: var(--wp--preset--color--soft); color: var(--wp--preset--color--teal); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ background: var(--wp--preset--color--teal); color: var(--wp--preset--color--cream); }
.woocommerce-account .woocommerce-MyAccount-content :where(p,li){ line-height:1.7; }
.woocommerce-account .woocommerce-MyAccount-content a:not(.button){ color: var(--wp--preset--color--teal); }
.woocommerce-account table.account-orders-table,
.woocommerce-account .woocommerce-MyAccount-content table{ width:100%; border-collapse:collapse; }
.woocommerce-account .woocommerce-MyAccount-content table th,
.woocommerce-account .woocommerce-MyAccount-content table td{ border:0; border-bottom:1px solid var(--ml-line); padding:12px 10px; text-align:left; }
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button,
.woocommerce-account .woocommerce-Button{
  background: var(--wp--preset--color--teal)!important; color: var(--wp--preset--color--cream)!important;
  border:0; border-radius:40px; padding:.8rem 1.6rem; font-weight:700; cursor:pointer; }
.woocommerce-account .woocommerce-MyAccount-content .button:hover{ background: var(--wp--preset--color--teal-deep)!important; }
/* champs de connexion / édition compte */
.woocommerce-account .ml-page-body :where(input[type=text],input[type=email],input[type=password],input[type=tel],select,textarea){
  border:1.5px solid var(--ml-line); border-radius:12px; background: var(--wp--preset--color--card);
  padding:12px 14px; font:inherit; color: var(--wp--preset--color--contrast); width:100%; box-sizing:border-box; }
.woocommerce-account .ml-page-body :where(input,select,textarea):focus{ outline:2px solid var(--wp--preset--color--teal); outline-offset:1px; border-color:transparent; }
.woocommerce-account .ml-page-body form.login,
.woocommerce-account .ml-page-body form.register,
.woocommerce-account .ml-page-body .woocommerce-EditAccountForm{ max-width:520px; }

/* ================================================================
   404 (404.html) — de marque (retour indirect : Florent est tombé sur
   « page introuvable » sans habillage)
   ================================================================ */
.ml-404-inner .ml-eyebrow{ color: var(--wp--preset--color--clay); }
.ml-404-title{ font-family: var(--wp--preset--font-family--titres); font-weight:600;
  font-size:clamp(2rem,4vw,2.8rem); line-height:1.1; margin:8px 0 16px; }
.ml-404-text{ color: var(--wp--preset--color--soft-ink); line-height:1.7; max-width:48ch; margin:0 auto 28px; }
.ml-404-buttons{ gap:14px; }

/* ================================================================
   PANIER — corrections de mise en page (retour Florent : « à retravailler »)
   Le bloc cross-sells s'affichait en vrac à côté des totaux. On empile :
   totaux d'abord (CTA), suggestions ensuite, pleine largeur de colonne.
   ================================================================ */
/* Cross-sells déplacés en pleine largeur SOUS le panier (hook woocommerce_after_cart) */
.ml-cart .cross-sells{ clear:both; width:100%; margin:clamp(44px,6vw,72px) 0 0; }
.ml-cart .cross-sells > h2{ font-family:var(--wp--preset--font-family--titres); font-weight:600;
  font-size:1.4rem; margin:0 0 20px; padding-bottom:14px; border-bottom:1px solid var(--ml-line); }
.ml-cart .cross-sells ul.products{ display:grid!important; grid-template-columns:repeat(4,1fr)!important; gap:24px; margin:0!important; padding:0!important; }
.ml-cart .cross-sells ul.products::before,
.ml-cart .cross-sells ul.products::after{ content:none!important; }
@media(max-width:820px){ .ml-cart .cross-sells ul.products{ grid-template-columns:repeat(3,1fr)!important; gap:16px; } }
/* Mobile : 3 colonnes compactes (retour Florent : « trop gros, faut 3 colonnes »).
   En 3 colonnes sur 390px les cartes deviennent des vignettes : on masque le
   bouton « Ajouter au panier » (illisible à cette taille) — image + titre + prix,
   la carte reste cliquable vers la fiche. */
@media(max-width:560px){
  .ml-cart .cross-sells ul.products{ grid-template-columns:repeat(3,1fr)!important; gap:10px; }
  .ml-cart .cross-sells ul.products li.product .button,
  .ml-cart .cross-sells ul.products li.product .wp-block-button{ display:none!important; }
  .ml-cart .cross-sells ul.products li.product .woocommerce-loop-product__title{ font-size:.82rem!important; }
  .ml-cart .cross-sells ul.products li.product .price{ font-size:.82rem!important; }
}

/* ---------- Bannière cookies (plugin maison, classes .acc-*) ----------
   Les COULEURS viennent des réglages du plugin (alignés sur theme.json le
   21/07 : fond card, texte contrast, boutons canard). Ici, seulement la
   finition que le plugin n'expose pas : formes, typo, hiérarchie, mobile.

   ⚠️ CONFORMITÉ — « refuser » doit être aussi simple qu'« accepter » (CNIL).
   Le plugin rend « Tout refuser » comme un lien discret face à un bouton plein :
   c'est un dark pattern, et c'est non conforme. On remet les trois choix au même
   niveau visuel. Ne pas « embellir » en re-minimisant le refus. */
#acc-cookie-banner.acc-banner{
  border-top:1px solid var(--ml-line);
  box-shadow:0 -10px 40px rgba(7,40,44,.10);
}
.acc-banner-text h3{
  font-family: var(--wp--preset--font-family--titres)!important;
  font-weight:600; font-size:1.18rem; letter-spacing:-.01em;
  color: var(--wp--preset--color--teal-deep)!important;
}
.acc-banner-text p{ color: var(--wp--preset--color--soft-ink)!important; line-height:1.55; }
.acc-banner-links a{
  color: var(--wp--preset--color--teal)!important;
  text-decoration:underline; text-underline-offset:3px;
}
.acc-banner-links a:hover{ color: var(--wp--preset--color--teal-deep)!important; }
.acc-banner-logo img{ border-radius:12px; }

/* Les trois boutons partagent la même forme et la même surface cliquable. */
#acc-cookie-banner .acc-btn{
  border-radius:40px; font-weight:700; padding:.7rem 1.4rem;
  font-size:.92rem; border:2px solid transparent; cursor:pointer;
}
#acc-cookie-banner .acc-btn-accept:hover{ background: var(--wp--preset--color--teal-deep)!important; }
#acc-cookie-banner .acc-btn-essential{ border-color: var(--wp--preset--color--teal)!important; }
/* « Tout refuser » : bouton à part entière, pas un lien de bas de page. */
#acc-cookie-banner .acc-btn-reject{
  background: transparent!important;
  color: var(--wp--preset--color--teal-deep)!important;
  border-color: var(--wp--preset--color--clay)!important;
  text-decoration:none!important;
}
#acc-cookie-banner .acc-btn-reject:hover{
  background: var(--wp--preset--color--clay)!important;
  color: var(--wp--preset--color--cream)!important;
}

@media(max-width:820px){
  /* Sur mobile la bannière mange l'écran : on la compacte et on empile les
     boutons en pleine largeur, pour qu'aucun choix ne soit plus atteignable
     qu'un autre au pouce. */
  #acc-cookie-banner .acc-btn{ width:100%; padding:.8rem 1rem; }
  .acc-banner-text h3{ font-size:1.05rem; }
  .acc-banner-text p{ font-size:.9rem; }
}

@media(prefers-reduced-motion:reduce){ *{ transition:none!important; } }

/* ---------- Alerte retour en stock (mu-plugin mamylaine-alerte-stock) ---------- */
/* Encadré sobre sur la fiche produit : il remplace le bouton « ajouter au panier »
   absent, il doit donc occuper visuellement la même place, sans crier. */
.ml-alerte{
  background: var(--wp--preset--color--soft); border:1px solid var(--ml-line);
  border-radius:18px; padding:clamp(20px,3vw,26px); margin:22px 0 0; }
.ml-alerte-titre{ font-family: var(--wp--preset--font-family--titres);
  font-size:1.15rem; margin:0 0 6px; color: var(--wp--preset--color--teal-deep); }
.ml-alerte-texte{ margin:0 0 16px; font-size:.95rem; line-height:1.6;
  color: var(--wp--preset--color--soft-ink); }
.ml-alerte .ml-form-rgpd{ margin-top:12px; font-size:.8rem; }
.ml-alerte .ml-signup-ligne input[type=email]{
  flex:1 1 200px; width:auto; min-width:0;
  border-radius:40px; border:1.5px solid var(--ml-line); background:var(--wp--preset--color--card);
  padding:13px 17px; font:inherit; color:var(--wp--preset--color--contrast); }
@media(max-width:520px){ .ml-alerte .ml-signup-ligne .ml-btn{ width:100%; } }

/* La seconde issue d'une fiche épuisée : demander une création semblable.
   Volontairement en retrait (filet + lien, pas un second bouton) pour que
   « Prévenez-moi » reste l'action principale. */
.ml-alerte-autre{ margin:18px 0 0; padding-top:16px; border-top:1px solid var(--ml-line);
  font-size:.92rem; line-height:1.6; color: var(--wp--preset--color--soft-ink); }
.ml-alerte-autre a{ color: var(--wp--preset--color--teal-deep); font-weight:600;
  text-underline-offset:3px; }

/* ================================================================
   LES HISTOIRES (mu-plugins/mamylaine-histoires.php)
   L'histoire vit dans l'article, la fiche y renvoie. Deux blocs :
   la carte de la création en fin d'article, et le renvoi en fin de fiche.
   ================================================================ */
.ml-histoire-kicker{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--wp--preset--color--clay); font-weight:700; margin:0 0 12px; }

/* Fin d'article : la carte de la création. Toute la carte est le lien, pour
   que la cible fasse la largeur de l'écran au doigt. */
.ml-histoire-carte-bloc{ margin:clamp(34px,5vw,52px) 0 0; padding-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--ml-line); }
.ml-histoire-carte{ display:flex; align-items:center; gap:clamp(16px,3vw,24px);
  text-decoration:none; background: var(--wp--preset--color--card);
  border:1px solid var(--ml-line); border-radius:20px; padding:clamp(14px,2vw,18px);
  box-shadow: var(--ml-shadow); transition:transform .25s ease, box-shadow .25s ease; }
.ml-histoire-photo{ flex:0 0 clamp(96px,26vw,150px); display:block; overflow:hidden;
  border-radius:14px; aspect-ratio:1/1; }
.ml-histoire-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.ml-histoire-infos{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.ml-histoire-nom{ font-family: var(--wp--preset--font-family--titres); font-weight:600;
  font-size:clamp(1.1rem,2.4vw,1.35rem); line-height:1.25;
  color: var(--wp--preset--color--contrast); }
.ml-histoire-prix{ color: var(--wp--preset--color--teal-deep); font-weight:700; font-size:1.05rem; }
.ml-histoire-prix .woocommerce-Price-amount{ color:inherit; }
.ml-histoire-cta{ display:inline-flex; align-items:center; align-self:flex-start;
  min-height:44px; padding:11px 22px; margin-top:6px; border-radius:40px;
  background: var(--wp--preset--color--teal); color:#fff; font-weight:700; font-size:.95rem; }
/* Au doigt le survol n'existe pas : le retour se joue sur :active. */
.ml-histoire-carte:active{ transform:scale(.99); }
@media(hover:hover){
  .ml-histoire-carte:hover{ transform:translateY(-3px); box-shadow:0 22px 44px -26px rgba(36,31,27,.45); }
  .ml-histoire-carte:hover .ml-histoire-cta{ background: var(--wp--preset--color--teal-deep); }
}
.ml-histoire-carte:focus-visible{ outline:3px solid var(--wp--preset--color--teal); outline-offset:3px; }
@media(max-width:480px){
  .ml-histoire-carte{ flex-direction:column; align-items:stretch; text-align:left; }
  .ml-histoire-photo{ flex:none; width:100%; aspect-ratio:4/3; }
  .ml-histoire-cta{ align-self:stretch; justify-content:center; }
}

/* Fin de fiche produit : le renvoi vers l'histoire. En retrait, comme
   « Demandez une création semblable » : la fiche doit vendre, pas raconter. */
.ml-histoire-renvoi{ margin:clamp(28px,4vw,40px) 0 0; padding:clamp(20px,3vw,26px);
  background: var(--wp--preset--color--soft); border:1px solid var(--ml-line); border-radius:18px; }
.ml-histoire-renvoi-titre{ font-family: var(--wp--preset--font-family--titres);
  font-size:clamp(1.15rem,2.2vw,1.4rem); line-height:1.3; margin:0 0 8px; }
.ml-histoire-renvoi-titre a{ color: var(--wp--preset--color--teal-deep); text-decoration:none; }
.ml-histoire-renvoi-extrait{ margin:0 0 14px; font-size:.95rem; line-height:1.65;
  color: var(--wp--preset--color--soft-ink); }
.ml-histoire-renvoi-cta{ margin:0; }
/* ⚠️ `max-width` + `white-space:normal` : le libellé porte le nom de la création,
   sa longueur n'est donc pas connue à l'écriture. Sans plafond, un nom un peu long
   poussait le bouton hors de l'écran sur téléphone (retour Florent 30/07/2026).
   La cause de fond est traitée côté PHP (le libellé retombe sur « Lire son
   histoire » quand le nom n'est pas un prénom court) ; ceci reste le filet. */
.ml-histoire-renvoi-cta a{ display:inline-flex; align-items:center; justify-content:center;
  max-width:100%; box-sizing:border-box; white-space:normal; text-align:center;
  min-height:44px; line-height:1.25;
  padding:11px 22px; border-radius:40px; border:1.5px solid var(--wp--preset--color--teal);
  color: var(--wp--preset--color--teal-deep); font-weight:700; text-decoration:none; }
.ml-histoire-renvoi-cta a:active{ transform:scale(.99); }
@media(hover:hover){
  .ml-histoire-renvoi-cta a:hover{ background: var(--wp--preset--color--teal); color:#fff; }
}
/* Sur téléphone, le bouton prend toute la largeur de l'encadré : une cible pleine
   largeur au doigt, et plus aucun risque de dépassement quel que soit le libellé. */
@media(max-width:600px){
  .ml-histoire-renvoi-cta a{ display:flex; width:100%; padding:11px 14px; }
}
@media(max-width:480px){ .ml-histoire-renvoi-cta a{ width:100%; justify-content:center; } }

/* Repli de fin d'histoire : la création est partie, on propose ses cousines.
   Volontairement plus léger que la carte (pas d'ombre, pas de bouton) : c'est
   une suite de lecture, pas une relance commerciale. */
.ml-histoire-suite{ margin:clamp(34px,5vw,52px) 0 0; padding-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--ml-line); }
.ml-histoire-suite-grille{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:560px){ .ml-histoire-suite-grille{ grid-template-columns:1fr 1fr; gap:14px; } }
.ml-histoire-suite-carte{ display:flex; flex-direction:column; gap:6px; text-decoration:none; }
.ml-histoire-suite-photo{ display:block; overflow:hidden; border-radius:14px; aspect-ratio:1/1;
  margin-bottom:6px; }
.ml-histoire-suite-photo img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease; }
.ml-histoire-suite-nom{ font-family: var(--wp--preset--font-family--titres); font-weight:600;
  font-size:1.02rem; line-height:1.3; color: var(--wp--preset--color--contrast); }
.ml-histoire-suite-prix{ color: var(--wp--preset--color--teal-deep); font-weight:700; font-size:.95rem; }
.ml-histoire-suite-carte:active .ml-histoire-suite-photo img{ transform:scale(1.03); }
@media(hover:hover){
  .ml-histoire-suite-carte:hover .ml-histoire-suite-photo img{ transform:scale(1.05); }
  .ml-histoire-suite-carte:hover .ml-histoire-suite-nom{ color: var(--wp--preset--color--teal); }
}

/* ================================================================
   LE CHOIX DU POINT RELAIS — aux couleurs de la maison
   (extension wc-multishipping, fenêtre « wms_pickup_modal »)
   ================================================================
   Retour Florent 30/07/2026 : « quand il doit choisir un point relais, au moment du
   choix le branding est bleu, je trouve ça pas optimal ». Exact, et c'est même la
   règle de design du site qui saute : l'extension peint sa fenêtre en **#2271b1 /
   #135e96**, c'est-à-dire le bleu de l'ADMINISTRATION WordPress. Le visiteur passe
   donc d'une boutique crème et canard à un écran de back-office, pile au moment le
   plus fragile du parcours — juste avant de payer.

   ⚠️ TROIS PRÉCAUTIONS À CONNAÎTRE AVANT DE TOUCHER À CE BLOC.

   1. **Ne pas scoper sur `.ml-checkout`.** La fenêtre est injectée en fin de `<body>`,
      donc HORS de la page de commande. Une règle préfixée `.ml-checkout` ne
      l'atteindrait jamais — et on chercherait longtemps pourquoi.
   2. **On ne touche QUE la couleur.** Aucune reprise de la mise en page, des tailles
      ou du positionnement : c'est du code tiers, il bougera à la prochaine mise à
      jour. Repeindre survit à une mise à jour ; réimplanter, non.
   3. **`!important` est ici le bon outil, pas un aveu.** Les sélecteurs de l'extension
      empilent quatre à cinq classes ; les égaler à la main donnerait des sélecteurs
      illisibles qui casseraient au moindre renommage. Cantonné à la couleur, le
      `!important` est le choix qui se maintient.

   À revérifier après chaque mise à jour de l'extension : si un bleu revient, c'est
   qu'une nouvelle règle est apparue — ajouter son sélecteur ici. */

/* Les boutons : rechercher, choisir ce relais, valider la sélection. */
.wms_pickup_modal .wms_pickup_modal_address_search,
.wms_pickup_modal .wms_pickup_modal_listing_one_button_ship,
.wms_pickup_modal_mondial_relay .wms_select_pickup_point_button{
  background: var(--wp--preset--color--teal)!important;
  color: var(--wp--preset--color--cream)!important;
  border-radius:40px!important;
  font-family: var(--wp--preset--font-family--corps)!important;
  font-weight:700!important; }
.wms_pickup_modal .wms_pickup_modal_address_search:hover,
.wms_pickup_modal .wms_pickup_modal_listing_one_button_ship:hover,
.wms_pickup_modal_mondial_relay .wms_select_pickup_point_button:hover:not(:disabled){
  background: var(--wp--preset--color--teal-deep)!important; }

/* Le focus des champs de recherche : le liseré bleu système devient canard. */
.wms_pickup_modal .wms_pickup_modal_address input:focus,
.wms_pickup_modal .wms_pickup_modal_address select:focus{
  border-color: var(--wp--preset--color--teal)!important;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--wp--preset--color--teal) 35%, transparent)!important; }

/* La carte d'un relais : survolée, et surtout SÉLECTIONNÉE. Le fond bleu pâle
   `#f0f6fc` est remplacé par le crème de la maison — c'est le repère visuel qui dit
   « c'est celui-là que vous avez choisi », il doit rester lisible et net. */
.wms_pickup_modal .wms_pickup_modal_listing_one:hover{
  border-color: var(--wp--preset--color--teal)!important; }
.wms_pickup_modal .wms_pickup_modal_listing_one.wms_is_selected{
  border-color: var(--wp--preset--color--teal)!important;
  background: var(--wp--preset--color--soft)!important;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--wp--preset--color--teal) 30%, transparent)!important; }

/* Le récapitulatif « votre point relais » une fois le choix fait. */
.wms_pickup_modal_mondial_relay #wms_mondial_relay_selected_info.wms_selected_info_filled{
  background: var(--wp--preset--color--soft)!important;
  border-color: var(--wp--preset--color--teal)!important; }

/* L'en-tête gris d'admin : crème, comme le reste du site. */
.wms_pickup_modal .wc-backbone-modal-main .wc-backbone-modal-header{
  background: var(--wp--preset--color--soft)!important;
  border-bottom:1px solid var(--ml-line)!important; }
.wms_pickup_modal .wc-backbone-modal-main .wc-backbone-modal-header h1{
  font-family: var(--wp--preset--font-family--titres)!important;
  color: var(--wp--preset--color--contrast)!important; }

/* --- La croix de fermeture de la fenêtre du point relais --------------------
   Retour Florent 30/07/2026 : « sur mobile, la croix pour fermer ne s'affiche
   pas ». Cause exacte : l'extension écrit sa croix avec la police d'icônes
   **dashicons**, celle de l'ADMINISTRATION WordPress (`content:"\f335"`), et
   **personne ne charge cette police côté visiteur** (vérifié : aucun
   `wp_enqueue_style('dashicons')` ni dans l'extension, ni dans le thème, ni dans
   les mu-plugins). Le bouton existe, il est cliquable, mais il est VIDE.

   ⚠️ La solution évidente serait de charger dashicons sur la boutique. On ne le
   fait pas : ce serait une police d'icônes entière (~30 Ko) chargée sur le
   parcours d'achat, pour un seul caractère, et une police d'admin sur un site
   qui bannit tout ce qui fait WordPress à l'écran. On dessine la croix nous-mêmes,
   en deux traits CSS : zéro octet, et elle ne peut plus manquer. */
.wms_pickup_modal .modal-close-link{
  position:relative;
  /* La police d'icônes absente laissait un glyphe fantôme selon les navigateurs. */
  font-size:0!important; color:transparent!important; }
.wms_pickup_modal .modal-close-link::before,
.wms_pickup_modal .modal-close-link::after{
  content:""!important; position:absolute; top:50%; left:50%;
  width:17px; height:2px; border-radius:2px;
  background: var(--wp--preset--color--contrast); font:inherit!important; }
.wms_pickup_modal .modal-close-link::before{ transform:translate(-50%,-50%) rotate(45deg); }
.wms_pickup_modal .modal-close-link::after{ transform:translate(-50%,-50%) rotate(-45deg); }
/* Cible tactile : 44 px minimum, et une pastille lisible par-dessus la carte. */
@media(max-width:768px){
  .wms_pickup_modal .modal-close-link{
    width:44px!important; height:44px!important;
    background: var(--wp--preset--color--card)!important;
    border:1px solid var(--ml-line)!important; border-radius:50%!important;
    box-shadow:0 6px 18px -8px rgba(36,31,27,.55)!important; }
}

/* --- Notre fenêtre de confirmation du point relais (assets/relais.js) -------
   Elle remplace le `confirm()` du système. Elle s'affiche PAR-DESSUS la fenêtre
   de l'extension, qui reste visible derrière : la cliente ne perd pas la carte
   des yeux pendant qu'elle confirme.
   ⚠️ `z-index` : l'extension monte déjà à 100000 pour sa fenêtre. On passe
   au-dessus, sinon notre boîte s'ouvrirait DERRIÈRE et la page paraîtrait figée. */
.ml-relais-fond{
  position:fixed; inset:0; z-index:100100;
  display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(36,31,27,.55); }
.ml-relais-boite{
  width:min(420px,100%); box-sizing:border-box;
  background: var(--wp--preset--color--card);
  border:1px solid var(--ml-line); border-radius:20px;
  padding:clamp(20px,4vw,28px);
  box-shadow:0 30px 70px -30px rgba(36,31,27,.7); }
.ml-relais-titre{
  font-family: var(--wp--preset--font-family--titres);
  font-size:clamp(1.15rem,3vw,1.35rem); line-height:1.3; margin:0 0 12px;
  color: var(--wp--preset--color--contrast); }
.ml-relais-adresse{
  margin:0 0 20px; padding:14px 16px; border-radius:14px;
  background: var(--wp--preset--color--soft);
  font-family: var(--wp--preset--font-family--corps);
  font-size:.92rem; line-height:1.55; color: var(--wp--preset--color--soft-ink); }
.ml-relais-nom{ font-weight:700; color: var(--wp--preset--color--contrast); }
.ml-relais-actions{ display:flex; flex-direction:column; gap:10px; }
.ml-relais-oui,
.ml-relais-non{
  width:100%; box-sizing:border-box; min-height:46px; cursor:pointer;
  border-radius:40px; font-family: var(--wp--preset--font-family--corps);
  font-weight:700; font-size:.95rem; padding:12px 18px; }
.ml-relais-oui{
  background: var(--wp--preset--color--teal); color: var(--wp--preset--color--cream); border:0; }
.ml-relais-non{
  background:transparent; color: var(--wp--preset--color--teal-deep);
  border:1.5px solid var(--ml-line); }
@media(hover:hover){
  .ml-relais-oui:hover{ background: var(--wp--preset--color--teal-deep); }
  .ml-relais-non:hover{ border-color: var(--wp--preset--color--teal); }
}
.ml-relais-oui:focus-visible,
.ml-relais-non:focus-visible{
  outline:3px solid var(--wp--preset--color--teal); outline-offset:3px; }