/* ================================================================
   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; } }

/* ---------- 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 --- */
.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). */
.wp-block-navigation__responsive-container.is-menu-open{
  position:fixed!important; inset:0!important;
  background: var(--wp--preset--color--base)!important;
  padding:clamp(20px,6vw,34px); 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; }

/* 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; }

/* --- 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;
  background:url('logo-badge.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; }
/* 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 */
  .ml-cart td.actions{ display:flex !important; gap:10px; padding:14px 0 0; }
  .ml-cart td.actions .coupon{ flex:1 1 100%; }
  .ml-cart td.actions .coupon .input-text{ flex:1; min-width:0; }
  .ml-cart td.actions button[name=update_cart]{ flex:1 1 100%; }
  /* 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; }
}

/* 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; }

/* 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; }
}

/* --- 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; }

/* Navigation article précédent/suivant */
.ml-article-nav{ border-top:1px solid var(--ml-line); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.ml-article-nav .wp-block-post-navigation-link{ max-width:48%; }
.ml-article-nav a{ color: var(--wp--preset--color--teal-deep); text-decoration:none; font-weight:600; }
.ml-article-nav a:hover{ color: var(--wp--preset--color--teal); }
.ml-nav-next{ text-align:right; margin-left:auto; }

/* ================================================================
   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%; } }