/*
Theme Name: Merci Louis
Description: Thème sur-mesure Merci Louis — boutique B2B WooCommerce, autonome, sans page builder ni thème parent. Performance, accessibilité et cohérence de marque.
Author: MLercilouis
Version: 1.0.0
Text Domain: merci-louis
*/

/* Feuille de socle : chargée sur toutes les pages.
   Le reste est découpé dans assets/css/ et chargé à la demande —
   voir l'enfilade des styles dans functions.php. */

/* ============ Variables de marque ============ */
:root{
  /* Les couleurs vivent dans assets/css/palette.css, chargée avant celle-ci.
     Ne rien redéclarer ici : une teinte définie à deux endroits finit toujours
     par diverger. */

  /* Deux familles, deux rôles. IM Fell English est un fac-similé du 17e :
     superbe en grand, éprouvant sur un paragraphe. Il reste aux titres.
     EB Garamond — un garamond français du 16e, donc de la même époque —
     prend le texte courant, où il est fait pour être lu. */
  --display:"IM Fell English", Georgia, serif;
  --serif:"EB Garamond", Georgia, "Times New Roman", serif;

  --maxw:1200px;
  --gap:28px;

  /* Marge latérale, identique à celle de .ml-wrap : les blocs pleine largeur
     s'en servent pour aligner leur contenu sur celui des sections normales. */
  --marge:clamp(20px,4vw,24px);

  /* Échelle d'air verticale. Les rembourrages de deux blocs voisins
     s'additionnent : ces valeurs sont donc la MOITIÉ de l'écart visé. */
  --air:clamp(34px,3.6vw,48px);        /* rythme courant */
  --air-fort:clamp(42px,4.6vw,62px);   /* blocs à aplat, et temps forts */
}

/* ============ Base ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--serif);font-size:21px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
/* Le lien passe à l'or de la maison. Le rouge n'est plus qu'un état : une
   alerte, une erreur, un champ manquant. Un site où le texte courant porte la
   couleur des alertes n'a plus de quoi signaler qu'il y en a une. */
a{color:var(--accent-texte);text-decoration:none}
a:hover{color:var(--navy)}
/* --focus est le ton prévu pour ça par la palette : 16,1:1, loin au-dessus
   du seuil de 3:1 exigé pour un contour. */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

h1,h2,h3,h4,h5,h6{font-family:var(--display);color:var(--navy);line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(34px,5vw,52px)}
h2{font-size:clamp(26px,3.5vw,36px)}
h3{font-size:clamp(20px,2.5vw,26px)}
p{margin:0 0 1em}

.ml-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--marge)}
/* Surtitre. Il était rouge ; le rouge ne sert plus qu'aux alertes. Le seul
   endroit où la couleur par défaut se voyait encore est le bloc « Espace
   professionnel » de l'accueil — celui de la bande presse est déjà repeint en
   crème sur son aplat sombre. */
.ml-kicker{font-family:var(--serif);letter-spacing:.28em;text-transform:uppercase;font-size:13px;color:var(--texte-doux);margin-bottom:12px;display:block;text-align:center}
/* Accolade — signature de marque */
/* Le fichier 2026 est déjà à l'encre noire — rgb(23,18,14) : brightness(0)
   n'a plus à corriger le navy du tracé de 2023, mais reste en place. Il fixe
   le noir exact sans toucher au canal alpha, et l'invert des aplats sombres
   plus bas s'appuie dessus.
   Le tracé 2026 est plus étiré que celui de 2023 — 2008x106, soit 18,94 contre
   12,96 : toutes les hauteurs qui suivent découlent de ce rapport, sinon
   « contain » laisse du vide et l'accolade flotte dans sa boîte. */
.ml-accolade{width:300px;max-width:60%;height:16px;margin:14px auto 0;
  background:var(--accolade) center/contain no-repeat;filter:brightness(0)}
/* Séparateur de marque : marque une bascule dans la page, là où un filet
   serait muet. À n'employer qu'entre deux temps, jamais comme motif. */
.ml-accolade--wide{width:min(460px,72%);height:24px;margin:clamp(46px,7vw,84px) auto}
/* Sur un aplat sombre le trait noir disparaît : l'invert le passe en clair.
   Seuls les blocs à aplat foncé sont visés — pied de page et bande presse ;
   « L'esprit » est sur crème et garde le noir. L'opacité s'arrête à 0,9, un
   rien sous le blanc pur : plus estompée, une signature de marque passerait
   pour un défaut d'affichage. */
.ml-footer .ml-accolade,.ml-presse .ml-accolade{filter:brightness(0) invert(1);opacity:.9}
.ml-section{padding:var(--air) 0}
/* ============ Bandeau de titre ============ *
 * Le même sur toutes les pages qui en portent un : boutique, catégories,
 * compte, contact, textes juridiques, 404. Il vivait jusqu'ici dans
 * boutique.css — donc nulle part ailleurs que sur les vues WooCommerce, et la
 * page Contact affichait son titre à nu, sans fond ni rembourrage.
 *
 * Aplat beige et non crème : sous un en-tête crème, un bandeau crème ne pose
 * rien, il laisse le titre flotter en haut de page. C'est le fond qu'ont pris
 * les pages refaites, et c'est celui qui fait règle. */
.ml-page-head{background:var(--fond-doux);text-align:center;
  padding:clamp(34px,5vw,56px) var(--marge)}
.ml-page-head h1{margin:0}
/* L'accolade signe chaque bandeau de titre, comme elle signe l'accueil.
   Les proportions suivent le fichier (2008x106, soit 18,94) aux deux bouts du
   clamp, sinon « contain » laisse du vide et l'accolade flotte. */
.ml-page-head .ml-accolade{margin:clamp(14px,2vw,20px) auto 0;
  width:clamp(230px,26vw,300px);max-width:78%;height:clamp(12px,1.4vw,16px)}
/* Une ligne de service au-dessus ou au-dessous du titre : le nom d'un salon,
   la date de version d'un texte juridique. Une mention, pas une phrase. */
.ml-page-head__mention{margin:0;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--texte-doux)}
.ml-page-head__mention--avant{margin-bottom:12px}
.ml-page-head__mention--apres{margin-top:clamp(16px,2.2vw,22px)}
/* Description de catégorie, sous le titre d'une archive produit. */
.ml-page-head__desc{max-width:680px;margin:16px auto 0;color:var(--texte-doux);
  font-size:17px;line-height:1.7}
.ml-page-head__desc p:last-child{margin-bottom:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ============ Boutons ============ */
/* Boutons : contour blanc, fond transparent (sur fonds foncés) */
.ml-btn,a.ml-btn,a.ml-btn:visited{
  display:inline-block;font-family:var(--display);font-size:20px;letter-spacing:.06em;
  background:transparent;color:#fff;padding:14px 34px;border:1px solid #fff;
  cursor:pointer;transition:.2s;text-align:center
}
.ml-btn:hover{background:#fff;color:var(--navy)}
/*
 * Variante contour navy, sur fonds clairs.
 *
 * Le :visited doit figurer ici aussi. La règle de base couvre « a.ml-btn:visited »,
 * soit (0,2,1) : sans son pendant, la variante à (0,1,1) perdait dès que le lien
 * avait été visité — et le bouton « Ouvrir mon compte » repassait en blanc sur
 * beige pour tout visiteur déjà allé sur son compte.
 */
/* Variante pleine, sur fond sombre : elle porte l'action principale quand deux
   boutons se suivent, le contour seul ne suffisant pas à les hiérarchiser. */
.ml-btn--plein,a.ml-btn--plein,a.ml-btn--plein:visited{background:var(--cream);color:var(--navy);border-color:var(--cream)}
.ml-btn--plein:hover,a.ml-btn--plein:hover{background:transparent;color:var(--cream)}
/* Rempli navy : l'action principale sur un fond clair. Le pendant de
   --plein, qui vaut sur les fonds sombres. */
.ml-btn--rempli-navy,a.ml-btn--rempli-navy,a.ml-btn--rempli-navy:visited{
  background:var(--navy);color:var(--cream);border-color:var(--navy)}
.ml-btn--rempli-navy:hover,a.ml-btn--rempli-navy:hover{background:transparent;color:var(--navy)}
.ml-btn--navy,a.ml-btn--navy,a.ml-btn--navy:visited{color:var(--navy);border-color:var(--navy)}
.ml-btn--navy:hover,a.ml-btn--navy:hover{background:var(--navy);color:var(--cream)}

/* ============ Header ============ */
/* Crème sourd, pas gris bleuté : sur le navy, un bleu clair se lit comme du
   bleu sur du bleu — même défaut que celui corrigé au pied de page. */
/* Mention d'accès. Elle est DANS l'en-tête — c'était la demande — mais elle
   garde son aplat sombre : posée à même le crème, elle se confondait avec le
   menu et la page n'avait plus rien pour se poser en haut. */
.ml-header__mention{margin:0;background:var(--fond-sombre);color:var(--texte-sur-sombre);
  text-align:center;font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  padding:10px 16px}
.ml-header{background:var(--fond);border-bottom:1px solid var(--filet);position:sticky;top:0;z-index:50}
/* Trois colonnes dont les deux extrêmes sont égales : le blason tombe au
   milieu de la page quoi qu'il y ait de part et d'autre. Les deux groupes
   tiennent leur bord extérieur — un premier jet collait le menu de gauche au
   blason et poussait celui de droite au bord, ce qui donnait un ensemble de
   travers pour un blason pourtant centré. */
.ml-header__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:24px;padding:16px 24px;max-width:var(--maxw);margin:0 auto}
.ml-header__logo{justify-self:center;display:block}
.ml-header__logo img{max-height:64px;width:auto;display:block}
.ml-header__nom{font-family:var(--display);font-size:24px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--texte-titre)}
.ml-nav ul{list-style:none;display:flex;gap:clamp(18px,2vw,28px);margin:0;padding:0;flex-wrap:wrap}
.ml-nav a{color:var(--texte-titre);font-size:clamp(16px,1.2vw,18px);letter-spacing:.04em}
.ml-nav a:hover{color:var(--accent-texte)}
.ml-nav--left ul{justify-content:flex-start}
.ml-nav--right ul{justify-content:flex-end;align-items:center}
.ml-header__right{display:flex;align-items:center;gap:clamp(18px,2vw,26px);justify-content:flex-end}
/* ---------- recherche ---------- *
 * Le panneau est en position absolue sous l'en-tête, et non dans le flux :
 * dans le flux, l'ouverture rallongeait l'en-tête et faisait descendre toute
 * la page d'un cran. */
.ml-recherche{position:relative}
.ml-recherche__loupe{list-style:none;cursor:pointer;color:var(--texte-titre);
  width:44px;height:44px;display:flex;align-items:center;justify-content:center}
/* Safari pose encore son triangle par ce pseudo-élément propriétaire. */
.ml-recherche__loupe::-webkit-details-marker{display:none}
.ml-recherche__loupe::marker{content:""}
.ml-recherche[open] .ml-recherche__loupe{color:var(--accent-texte)}
.ml-recherche__panneau{position:absolute;top:calc(100% + 10px);right:0;z-index:60;
  background:var(--fond);border:1px solid var(--filet);padding:14px;
  box-shadow:0 10px 30px rgba(24,19,15,.10)}
.ml-recherche__form{display:flex;gap:8px;align-items:stretch}
.ml-recherche__form input[type=search]{width:min(64vw,320px);font-family:var(--serif);
  font-size:16px;padding:10px 12px;border:1px solid var(--filet);background:var(--blanc);
  color:var(--texte);border-radius:0;-webkit-appearance:none}
.ml-recherche__form input[type=search]:focus{outline:2px solid var(--focus);outline-offset:1px}
.ml-recherche__form button{font-family:var(--serif);font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;padding:10px 16px;border:1px solid var(--texte-titre);
  background:var(--texte-titre);color:var(--fond);cursor:pointer;white-space:nowrap}
.ml-recherche__form button:hover{background:transparent;color:var(--texte-titre)}
/* Dans le tiroir, le champ prend toute la largeur et le bouton passe dessous :
   côte à côte, à 360px de large, il ne restait rien pour le champ. */
.ml-mobile__recherche{padding:18px 24px 0}
.ml-mobile__recherche .ml-recherche__form{flex-direction:column}
.ml-mobile__recherche input[type=search]{width:100%;font-size:17px;padding:13px 14px}
.ml-mobile__recherche button{padding:13px 16px}

.ml-cart{display:inline-flex;align-items:center;gap:8px;color:var(--texte-titre);white-space:nowrap}
.ml-cart__ico{flex:0 0 auto;display:block}
.ml-cart__total{font-size:clamp(16px,1.2vw,18px)}
.ml-cart .count{background:var(--accent-texte);color:var(--blanc);border-radius:50%;font-size:12px;
  min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
/* 44px de côté : la cible tactile minimale recommandée. Le pictogramme n'en
   fait que 26, le reste est du rembourrage — c'est voulu. */
.ml-burger{display:none;background:none;border:0;color:var(--texte-titre);cursor:pointer;
  width:44px;height:44px;padding:0;margin-left:-9px}

/* ---------- tiroir de navigation ---------- *
 * Plein écran et fixe, non un panneau qui pousse la page : sur un téléphone,
 * un menu qui s'insère fait sauter le contenu sous le pouce. Le script
 * (assets/js/menu.js) bloque le défilement de la page pendant l'ouverture,
 * gère Échap et retient le focus dedans.
 *
 * Le seuil de bascule est à 980px et il est écrit DEUX fois — ici et dans
 * menu.js. Les deux valeurs doivent rester d'accord, sinon on obtient un
 * tiroir qui refuse de s'ouvrir ou qui reste ouvert par-dessus le menu. */
.ml-sans-defilement{overflow:hidden}
.ml-mobile{position:fixed;inset:0;z-index:100;background:var(--fond);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
/* Obligatoire, et non une précaution : une règle d'auteur qui pose un display
   passe devant le [hidden]{display:none} du navigateur, qui n'est qu'une
   règle d'agent utilisateur. Sans cette ligne, le tiroir recouvre la page en
   permanence. */
.ml-mobile[hidden]{display:none}
.ml-mobile__tete{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:16px 24px;border-bottom:1px solid var(--filet)}
.ml-mobile__nom{font-family:var(--display);font-size:19px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--texte-titre)}
.ml-mobile__fermer{background:none;border:0;color:var(--texte-titre);cursor:pointer;
  width:44px;height:44px;padding:0;margin-right:-9px;display:flex;align-items:center;justify-content:center}
.ml-mobile__nav{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(24px,6vw,48px) 24px}
.ml-mobile__nav ul{list-style:none;margin:0;padding:0}
/* Le lien occupe toute la largeur et 52px de haut : au pouce, on ne visait
   que le texte quand il était en ligne. */
.ml-mobile__nav a{display:block;padding:13px 0;min-height:52px;
  font-family:var(--display);font-size:clamp(22px,6vw,28px);color:var(--texte-titre)}
.ml-mobile__nav a:hover{color:var(--accent-texte)}
.ml-mobile__filet{margin:clamp(18px,4vw,26px) auto;width:200px}

/* ============ Footer ============ */
/* Texte en crème sourd, pas en gris-bleu : sur le navy, un gris bleuté se lit
   comme du bleu sur du bleu, et jure avec les intitulés dorés. */
/* Rembourrage et interligne tenus court : le pied de page se balaie, il ne
   se lit pas — dix liens à interligne 2 faisaient un écran à eux seuls. */
.ml-footer{background:var(--navy);color:var(--sur-navy);padding:40px 0 24px;border-top:3px solid var(--gold)}
.ml-footer a{color:var(--sur-navy)}
.ml-footer a:hover{color:#fff}
.ml-footer__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px}
.ml-footer h4{color:var(--gold);font-size:16px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.ml-footer__brand{font-family:var(--display);color:var(--sur-navy-vif);font-size:23px;letter-spacing:.14em}
/* Le logo est posé en filet dans la colonne de marque : plus large, il
   pèserait plus que les trois colonnes de liens qui lui répondent. */
.ml-footer__logo{width:118px;max-width:100%;height:auto;display:block;filter:brightness(0) invert(1);opacity:.9}
.ml-footer ul{list-style:none;margin:0;padding:0;line-height:1.75}
/* Lien réseau sous le logo : pas de cadre, une icône et le mot en petit,
   estompés. Le lien prend la largeur du logo et centre son contenu, pour
   tomber sur le même axe que lui — un bouton encadré pesait plus que les
   colonnes de liens qu'il accompagne. */
.ml-footer__social{display:flex;justify-content:center;align-items:center;gap:7px;width:118px;
  margin-top:14px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  color:var(--sur-navy);opacity:.7}
.ml-footer__social svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none}
.ml-footer__social:hover{opacity:1;color:#fff}
.ml-footer__bottom{border-top:1px solid rgba(201,182,138,.28);margin-top:26px;padding-top:16px;text-align:center;font-size:13px}
.ml-footer__legal{margin-top:10px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px}
.ml-footer__legal .sep{opacity:.45}

/* ============ Carte produit — composant partagé ============
   Accueil, archives, recherche, produits liés : un seul dessin, un seul
   fichier (template-parts/card-product.php). Pas de cadre ni de fond blanc —
   la vignette suffit à délimiter, et la carte se fond dans le crème de la
   page comme le reste de la grille. */
.ml-products{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,3vw,34px) clamp(14px,2vw,26px)}
.ml-card{display:grid;grid-template-rows:auto auto 1fr;color:inherit}
/* 4:3, le format dans lequel les produits sont photographiés — les originaux
   font 1200x900 et WooCommerce en tire des vignettes 400x300. Le carré qu'on
   imposait jusqu'ici rognait un quart de chaque photo sur les côtés. */
/* Ombre permanente, pas au seul survol : elle détache chaque produit du crème
   et de ses voisins. Portée par la vignette et non par la carte, qui n'a pas de
   fond — une ombre n'aurait rien à border. Teintée de navy plutôt que de noir,
   pour rester dans la palette. */
.ml-card__thumb{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  background:var(--beige);transition:box-shadow .35s ease;
  box-shadow:0 1px 3px rgba(24,19,15,.07), 0 8px 22px rgba(24,19,15,.07)}
.ml-card:hover .ml-card__thumb{box-shadow:0 2px 6px rgba(24,19,15,.10), 0 14px 34px rgba(24,19,15,.12)}
/* WooCommerce impose « height:auto » et une marge basse aux images de ses
   boucles, par un sélecteur que « .ml-card__thumb img » ne peut pas battre :
   la photo y reprenait sa hauteur naturelle et laissait voir le beige du cadre
   sous les visuels qui ne sont pas au format 4:3 (les 3:2, notamment). Le second
   sélecteur reprend la main sur les grilles WooCommerce ; le premier suffit
   partout ailleurs, l'accueil compris. */
.ml-card__thumb img,
.woocommerce ul.products li.product a.ml-card img{width:100%;height:100%;object-fit:cover;
  margin:0;transition:transform .6s ease}
.ml-card:hover .ml-card__thumb img{transform:scale(1.035)}
/* Rupture signalée sur la vignette : un revendeur doit le voir sans ouvrir la fiche. */
.ml-card__etat{position:absolute;left:0;bottom:0;background:var(--navy);color:var(--cream);
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;padding:6px 12px}
/* Nouveauté en haut, état de stock en bas : un produit neuf peut être en
   réapprovisionnement. Le doré plutôt que l'encre, pour que les deux pastilles
   ne se confondent pas d'un coup d'œil — 5,4:1 en crème sur ce fond, au-delà du seuil. */
.ml-card__neuf{position:absolute;left:0;top:0;background:var(--accent-texte);color:var(--cream);
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;padding:6px 12px}
/* Une seule ligne de métadonnées, catégorie à gauche et tarif à droite : la
   carte tient sur deux lignes de texte, et les lignes s'alignent d'une carte à
   l'autre quelle que soit la longueur du nom. */
.ml-card__meta{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin:14px 0 6px;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase}
.ml-card__sur{color:var(--gold-texte);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml-card__price{color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
/* Discrète : la mention se répète à chaque carte, elle ne doit pas battre le
   nom du produit. */
.ml-card__lock{display:inline-flex;align-items:center;gap:5px;color:var(--muted-clair);white-space:nowrap}
.ml-card__lock svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8}
/* IM Fell a une hauteur d'x généreuse : à valeur égale il paraît bien plus gros
   qu'EB Garamond, et le nom du produit écrasait sa ligne de métadonnées.
   Ce sélecteur doit rester : sans lui, le titre retombe sur la règle générale
   des h3, qui monte à 26 px — beaucoup trop pour une carte. */
.ml-card__title{font-family:var(--display);font-size:clamp(15.5px,1.2vw,17px);line-height:1.28;
  color:var(--navy);margin:0}



/* ============ Responsive ============ */
@media(max-width:1024px){
  .ml-univers__grid,.ml-products,.woocommerce ul.products{grid-template-columns:repeat(2,1fr)}
}
/* 980px et non 860 : le menu a grandi d'un point et demi, il se serre plus
   tôt. Le seuil est repris dans menu.js — les deux doivent rester d'accord. */
@media(max-width:980px){
  body{font-size:16px}
  .ml-header__inner{grid-template-columns:auto 1fr auto}
  .ml-nav--left,.ml-nav--right{display:none}
  .ml-burger{display:flex;align-items:center;justify-content:center}
  .woocommerce div.product{grid-template-columns:1fr;gap:24px}
  .ml-section{padding:44px 0}
}
@media(max-width:640px){
  /* Le pied de page est le dernier texte qu'on lit, souvent d'un pouce et
     d'une main : il garde un point de plus que le corps du texte. Mais sur
     une seule colonne à 19,5 px, dix liens empilés faisaient plus d'un écran
     de téléphone — un second pied de page, en somme. Le logo prend la
     première rangée, centré ; les deux colonnes de liens se partagent la
     suivante côte à côte. */
  .ml-footer{font-size:17px;padding:36px 0 22px}
  .ml-footer h4{font-size:14px;letter-spacing:.14em}
  .ml-footer ul{line-height:1.9}
  .ml-footer__brand{font-size:23px;text-align:center}
  .ml-footer__logo{width:100px;margin-inline:auto}
  .ml-footer__social{width:100px;margin-inline:auto}
  .ml-footer__cols{grid-template-columns:1fr 1fr;gap:24px 16px}
  .ml-footer__cols > div:first-child{grid-column:1 / -1;text-align:center}
  .ml-footer__bottom{font-size:14px;margin-top:26px}
  .ml-footer__legal{font-size:14px;gap:8px 14px}
}

@media(max-width:560px){
  .ml-univers__grid,.ml-products,.woocommerce ul.products{grid-template-columns:1fr}
  .ml-hero{padding:64px 18px}
}