/*
Theme Name: Linge Évasion
Description: Thème sur mesure pour linge-evasion.com. Direction « peau chaleureuse, ossature documentaire » : la matière d'abord, la donnée technique affichée tôt et interprétée.
Version: 0.1.0
Requires PHP: 8.1
Text Domain: linge-evasion
*/

/* ==========================================================================
   1. JETONS
   Les couleurs ont été choisies après relevé de vingt marques : aucune marque
   crédible n'utilise le blanc pur en fond ni le noir en encre. Contrastes
   vérifiés WCAG 2.1 — encre 13,16 sur fond (AAA), accents 5,42 et 5,23 (AA),
   et les deux accents passent AUSSI en fond de bouton avec texte blanc.
   ========================================================================== */
:root{
  --fond:#F4F1EA;
  --fond-alt:#E8E1D5;
  --fond-carte:#FBF9F5;
  --encre:#2B2721;
  --encre-2:#635C51;
  --terre:#9C4A2F;
  --terre-fonce:#7E3A23;
  --sauge:#5C6852;
  --filet:#D6CEC0;
  --filet-clair:#E4DDD1;
  --blanc:#FFFFFF;

  --large:1280px;
  --prose:74ch;
  --gouttiere:clamp(16px,3.6vw,40px);

  --r-s:3px;
  --r-m:6px;
  --r-l:14px;

  --ombre-s:0 1px 2px rgba(43,39,33,.06);
  --ombre-m:0 2px 10px rgba(43,39,33,.07);
  --ombre-l:0 12px 40px rgba(43,39,33,.12);

  --t-court:.18s cubic-bezier(.4,0,.2,1);
  --t-moyen:.34s cubic-bezier(.22,1,.36,1);
  --t-long:.6s cubic-bezier(.22,1,.36,1);
}

/* ==========================================================================
   2. SOCLE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--fond);
  color:var(--encre);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* 16 px et pas 14 : la cible a plus de 35 ans. Interlettrage positif —
     c'est le marqueur de haut de gamme le plus fiable relevé dans l'étude. */
  font-size:16px;
  line-height:1.7;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  font-family:"Petrona",Georgia,"Times New Roman",serif;
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.015em;
  text-wrap:balance;
  margin:0;
}
h1{font-size:clamp(2rem,5vw,3.1rem)}
h2{font-size:clamp(1.5rem,3.4vw,2.15rem)}
h3{font-size:clamp(1.15rem,2.2vw,1.4rem)}
p{margin:0}
img,video,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--terre);outline-offset:3px;border-radius:2px}

/* Chaque nombre passe en chasse fixe : les valeurs s'alignent verticalement
   dans les colonnes, et un tableau se lit en trois secondes au lieu de dix. */
.le-num,.woocommerce-Price-amount,.price,.le-mono{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}

.enrob{max-width:var(--large);margin-inline:auto;padding-inline:var(--gouttiere)}

/* ==========================================================================
   2 bis. PAGES ÉDITORIALES
   🚨 `p{margin:0}` est posé globalement, et c'est voulu : dans les gabarits,
   chaque bloc gère son propre espacement. Mais dans un texte long, plus rien
   ne sépare un titre du paragraphe qui suit — le guide des tailles s'affichait
   en un pavé continu, titres compris. Le rythme se remet donc ICI, et
   seulement ici.
   ========================================================================== */
.le-prose > *{max-width:var(--prose)}
.le-prose > * + *{margin-top:1.15em}

/* Un titre appartient à ce qui le suit, pas à ce qui le précède : beaucoup
   d'air au-dessus, très peu en dessous. */
.le-prose > h2{font-size:clamp(1.28rem,2.1vw,1.62rem);margin-top:2.7em}
.le-prose > h2 + *{margin-top:.7em}
.le-prose > h3{font-size:clamp(1.04rem,1.6vw,1.18rem);margin-top:2em}
.le-prose > h3 + *{margin-top:.55em}

/* Le premier paragraphe donne le ton : un cran plus grand, en encre plus claire. */
.le-prose > p:first-child{font-size:1.14rem;line-height:1.62;color:var(--encre-2)}

.le-prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--filet)}
.le-prose a:hover{color:var(--terre);text-decoration-color:currentColor}
.le-prose ul,.le-prose ol{padding-left:1.2em}
.le-prose li + li{margin-top:.4em}
.le-prose li::marker{color:var(--terre)}
.le-prose blockquote{border-left:2px solid var(--terre);padding-left:18px;color:var(--encre-2);font-style:italic}
.le-prose hr{border:0;border-top:1px solid var(--filet);margin-block:2.4em}

/* Sur ces pages, le tableau EST le contenu : c'est lui qu'on vient lire.
   ⚠️ Le défilement se pose sur un conteneur, jamais sur le <table> lui-même —
   un `overflow-x` sur une table casse sa mise en page. */
.le-prose .le-table{overflow-x:auto;margin-top:1.7em}
.le-prose table{
  width:100%;border-collapse:collapse;min-width:32rem;
  font-size:15px;font-variant-numeric:tabular-nums;
}
.le-prose thead th{
  font-family:"Inter",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2);
  text-align:left;padding:0 20px 10px 0;border-bottom:1px solid var(--encre);
  white-space:nowrap;
}
.le-prose tbody td{padding:11px 20px 11px 0;border-bottom:1px solid var(--filet-clair);vertical-align:top}
.le-prose tbody tr:last-child td{border-bottom:1px solid var(--filet)}
.le-prose tbody td:first-child{font-weight:500;color:var(--encre)}
.le-prose tbody tr:hover td{background:var(--fond-alt)}
.le-prose table caption{caption-side:bottom;padding-top:10px;font-size:13px;color:var(--encre-2);text-align:left}


.le-oeil{
  font-family:"Inter",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--encre-2);
}

/* ==========================================================================
   3. EN-TÊTE
   ========================================================================== */
.le-bandeau{
  background:var(--encre);color:var(--fond);
  font-size:12.5px;letter-spacing:.04em;text-align:center;
  padding:9px var(--gouttiere);
}
.le-bandeau a{text-decoration:underline;text-underline-offset:3px}

.le-entete{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--fond) 88%,transparent);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-court),box-shadow var(--t-court);
}
.le-entete.est-colle{border-bottom-color:var(--filet);box-shadow:var(--ombre-s)}
.le-entete-int{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;
  min-height:72px;
}
.le-logo{
  font-family:"Petrona",serif;font-size:19px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.52em;
}
/* La marque : trois plis de linge, posés par `le_logo_marque()`.
   Dimensionnée en `em` — elle suit la taille du nom, et le pied de page qui
   passe le sien à 17px n'a rien à régler. */
.le-logo-marque{
  width:1.34em;height:auto;flex:none;
  /* Le nom porte son trait dessous : centré sur le bloc entier, le symbole
     tomberait sous la ligne de texte. On le remonte de la moitié du trait. */
  transform:translateY(-.24em);
}
/* Le trait sous le nom : un trait qui gagne en épaisseur est un grammage.
   🚨 Il est porté par `.le-logo-nom`, pas par `.le-logo` : depuis que le lien
   contient aussi le symbole, un `::after` sur le parent barrerait les deux. */
.le-logo-nom::after{
  content:"";display:block;height:4px;margin-top:5px;
  background:linear-gradient(90deg,var(--terre) 0%,var(--terre) 100%);
  clip-path:polygon(0 42%,100% 0,100% 100%,0 58%);
  transform-origin:left;transform:scaleX(.82);
  transition:transform var(--t-moyen);
}
.le-logo:hover .le-logo-nom::after{transform:scaleX(1)}

/* 🚨 Aucun overflow sur un ancêtre du méga-menu : un conteneur à défilement
   découpe ses descendants positionnés. Sur l'autre site du groupe, le panneau
   avait opacity:1 et 521 px de haut, et restait invisible. */
/* 🚨 Pas de `position:relative` ici. C'est ce qui enfermait le panneau du
   méga-menu dans la largeur de la barre de liens — 830 px au lieu de toute
   la page —, et le décalait de 21 px par rapport au reste du site puisque
   la barre n'est pas exactement centrée dans l'en-tête.
   Sans elle, le panneau se cale sur `.le-entete`, qui est en `sticky` et fait
   donc bloc de référence : pleine largeur, aligné, sans bricolage en `vw`. */
.le-nav{display:flex;justify-content:center;gap:clamp(14px,2.4vw,32px)}
.le-nav > li{list-style:none;position:static}
.le-nav > li > a{white-space:nowrap}
/* 🚨 `>` obligatoire : sans lui, ces règles touchent AUSSI les liens du
   méga-menu, qui sont dans `.le-nav`. Le trait de survol traversait alors
   chaque rayon sur toute la largeur de sa colonne, comme une rature. */
.le-nav > li > a{
  display:block;padding:24px 2px;font-size:14px;letter-spacing:.03em;
  position:relative;
}
.le-nav > li > a::after{
  content:"";position:absolute;left:0;right:0;bottom:18px;height:1px;
  background:var(--encre);transform:scaleX(0);transform-origin:right;
  transition:transform var(--t-moyen);
}
.le-nav > li > a:hover::after,.le-nav > li > a:focus-visible::after{transform:scaleX(1);transform-origin:left}

.le-actions{display:flex;align-items:center;gap:6px}
.le-icone{
  width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  background:transparent;border:0;cursor:pointer;
  transition:background var(--t-court);
}
.le-icone:hover{background:var(--fond-alt)}
.le-icone svg{width:19px;height:19px;stroke:var(--encre);fill:none;stroke-width:1.4}
.le-pastille{
  position:absolute;transform:translate(11px,-11px);
  min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--terre);color:#fff;font-size:10.5px;line-height:17px;
  text-align:center;font-family:"IBM Plex Mono",monospace;
}

/* ==========================================================================
   4. MÉGA-MENU — par MATIÈRE, pas par marque
   Sur un site de linge, c'est la matière qui rapproche deux produits et c'est
   elle qu'on cherche. Tout en CSS : indexable, et fonctionne sans script.
   ========================================================================== */
.le-mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--fond-carte);border-top:1px solid var(--filet);
  box-shadow:var(--ombre-l);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--t-moyen),transform var(--t-moyen),visibility var(--t-moyen);
  padding:30px 0 34px;
}
.le-nav li:hover > .le-mega,.le-nav li:focus-within > .le-mega{opacity:1;visibility:visible;transform:none}
/* Le nombre de colonnes de liens varie d'un onglet à l'autre : les univers en
   ont trois, « Matières » deux. Sans --cols, une colonne vide restait ouverte
   entre les liens et la carte. */
.le-mega-grille{
  display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)) 300px;gap:clamp(28px,3vw,52px);
  max-width:var(--large);margin-inline:auto;padding-inline:var(--gouttiere);
}
.le-mega h4{font-size:11px;font-family:"Inter",sans-serif;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-2);margin-bottom:12px}
.le-mega h4 a{color:inherit}
.le-mega h4 a:hover{color:var(--terre)}
/* Un univers qui enjambe deux colonnes reprend son nom, en retrait. */
.le-mega h4.le-suite{color:var(--encre-3,var(--encre-2));opacity:.62}
/* 🔥 Le linge de lit ouvre la boutique : 68 % du catalogue et la totalité du
   positionnement. Il est plus haut, plus grand, en terre — et ses colonnes sont
   posées sur un fond légèrement plus chaud, pour qu'on le voie avant de lire. */
.le-mega h4.le-vedette{font-size:12.5px;letter-spacing:.14em;color:var(--terre);opacity:1}
.le-mega h4.le-vedette a{color:var(--terre)}
/* ⚠️ Pas de fond ni d'encadré : l'univers vedette occupe DEUX colonnes, et un
   fond posé par colonne dessine deux panneaux séparés pour une seule rubrique.
   L'accent tient à la couleur du titre, au filet qui le surmonte et à une
   graisse de lien un cran au-dessus. */
.le-mega-cats > .le-col-vedette > h4:first-child{
  padding-top:8px;border-top:2px solid var(--terre);
}
.le-mega-cats > .le-col-vedette > ul > li > a{font-size:15.5px}
.le-mega h4 span{letter-spacing:.06em;text-transform:none;font-weight:400}
/* Plusieurs univers peuvent se suivre dans une même colonne : il leur faut de
   l'air entre eux, sinon le second titre se colle à la dernière ligne du premier. */
.le-mega-cats > div > h4 + ul{margin-bottom:22px}
.le-mega-cats > div > h4 + ul:last-child{margin-bottom:0}
.le-mega ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.le-mega ul a{padding:5px 0;font-size:14.5px;display:flex;justify-content:space-between;gap:14px;align-items:baseline}
/* 🔥 Le grammage DANS l'intitulé de navigation : la donnée devient le filtre
   et le vocabulaire. Volé à By Mölle, qui le fait mieux que tout le monde. */
.le-mega ul a .g{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--encre-2);white-space:nowrap}
.le-mega ul a:hover{color:var(--terre)}
/* Pas de carte dans le méga « Catégories » : aucune piste à réserver à droite. */
.le-mega-cats{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}
/* Sous-rayons : décalés par un filet, jamais par une puce. */
.le-mega ul .le-mega-sous{margin:2px 0 6px;padding-left:11px;border-left:1px solid var(--filet);gap:0}
.le-mega ul .le-mega-sous a{font-size:13.5px;color:var(--encre-2);padding:3px 0}
.le-mega ul .le-mega-sous a:hover{color:var(--terre)}
/* Pied du méga : les trois raccourcis qui ne sont ni un univers ni un rayon. */
.le-mega-pied{
  max-width:var(--large);margin:26px auto 0;padding:16px var(--gouttiere) 0;
  border-top:1px solid var(--filet);
  display:flex;flex-wrap:wrap;gap:26px;font-size:13.5px;color:var(--encre-2);
}
.le-mega-pied a:hover{color:var(--terre)}
.le-mega-carte{
  grid-column:-2 / -1;background:var(--fond-alt);padding:20px;border-radius:var(--r-m);
  display:flex;flex-direction:column;gap:10px;align-self:start;
}

/* ==========================================================================
   5. BOUTONS
   ========================================================================== */
.le-bouton,
body.le-theme .button,
body.le-theme button.button,
body.le-theme a.button,
body.le-theme .woocommerce-Button{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border:1px solid var(--encre);border-radius:var(--r-s);
  background:var(--encre);color:var(--fond);
  font-size:14px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  cursor:pointer;position:relative;overflow:hidden;
  transition:background var(--t-court),color var(--t-court),transform var(--t-court);
}
.le-bouton:hover,body.le-theme .button:hover{background:var(--terre);border-color:var(--terre);color:#fff}
.le-bouton:active{transform:translateY(1px)}
.le-bouton--creux{background:transparent;color:var(--encre)}
.le-bouton--creux:hover{background:var(--encre);color:var(--fond);border-color:var(--encre)}
.le-bouton--bloc{width:100%}

/* ==========================================================================
   6. CARTE PRODUIT
   🚨 Écrire `ul.products li.product` SANS ancêtre `.woocommerce` : la classe
   n'est posée sur <body> que sur les pages WooCommerce, donc un sélecteur
   ancré dessus ne s'applique pas sur l'accueil.
   ========================================================================== */
ul.products{
  display:grid;gap:clamp(18px,2.4vw,30px);margin:0;padding:0;list-style:none;
  /* Trois par ligne : avec le rail de filtres à 254 px, la colonne produits fait
     ~900 px — à quatre, chaque visuel tombait sous 210 px, trop petit pour juger
     un tissu. À trois, on gagne un tiers de surface par photo. */
  grid-template-columns:repeat(3,1fr);
}
/* 🚨 WooCommerce pose un clearfix `content:" "; display:table` sur ::before ET
   ::after de `ul.products`. Dans une grille, un pseudo-élément est un ENFANT de
   grille comme un autre : les deux occupaient une case pleine de 204 × 401 px.
   Résultat, la première case de la rangée était vide et toute la grille
   décalée d'un cran — visible à l'œil, invisible dans le HTML. */
ul.products::before,ul.products::after{content:none!important;display:none!important}
/* Variante à quatre colonnes, pour les emplacements sans rail de filtres. */
@media(min-width:1000px){
  ul.products.le-produits--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
ul.products li.product{
  list-style:none;margin:0;padding:0;width:auto;float:none;
  display:flex;flex-direction:column;gap:11px;position:relative;
}
/* 🚨 Le CSS de WooCommerce réimpose width:22.05% et float:left avec une
   spécificité de 0,3,2 sur ses propres pages. On préfixe body.le-theme
   (0,3,3) et on force. Sans ça, les cartes tombent à quelques dizaines de px. */
body.le-theme ul.products li.product{width:auto!important;float:none!important;margin:0!important;clear:none!important}
/* 🚨 Même piège sur l'IMAGE, et je l'avais raté : WooCommerce impose
   `height:auto` à ses vignettes, ce qui gagne sur `height:100%`. Résultat
   mesuré : une image de 200 px dans un cadre de 251 px, donc une bande de fond
   beige sous chaque photo, sur toute la boutique. */
body.le-theme ul.products li.product .le-visuel img{
  width:100%!important;height:100%!important;object-fit:cover;
}

/* ⚠️ Fond presque blanc, et non sable : la moitié des visuels du fournisseur
   sont des détourés sur blanc. Sur du sable, chacun dessinait un rectangle
   blanc flottant — c'est ce qu'on voyait derrière les pastilles. */
.le-visuel{
  position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-m);
  background:var(--fond-carte);
}
.le-visuel img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-long),opacity var(--t-moyen);
}
li.product:hover .le-visuel img{transform:scale(1.035)}
/* Seconde image au survol : le macro de tissu. L'étude montre que personne ne
   montre la matière de près, alors que c'est le seul argument tactile. */
.le-visuel .le-macro{position:absolute;inset:0;opacity:0}
li.product:hover .le-visuel .le-macro{opacity:1}

.le-etiq{
  position:absolute;top:10px;left:10px;z-index:2;
  background:var(--fond-carte);color:var(--encre);
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.02em;
  padding:4px 9px;border-radius:var(--r-s);box-shadow:var(--ombre-s);
}
.le-etiq--rupture{background:var(--encre);color:var(--fond)}

.woocommerce-loop-product__title,li.product h2{
  font-family:"Inter",sans-serif!important;font-size:15px!important;font-weight:500!important;
  line-height:1.45;letter-spacing:0;margin:0!important;padding:0!important;
}
li.product .le-matiere{font-size:13px;color:var(--encre-2)}
li.product .price{font-size:15px!important;color:var(--encre)!important;margin:0!important}
li.product .price del{color:var(--encre-2);opacity:.6;margin-right:7px}

/* Nuancier de coloris sous la carte */
.le-nuancier{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.le-pastille-coul{
  width:15px;height:15px;border-radius:50%;border:1px solid var(--filet);
  transition:transform var(--t-court);
}
.le-pastille-coul:hover{transform:scale(1.25)}
.le-nuancier .reste{font-size:11.5px;color:var(--encre-2);font-family:"IBM Plex Mono",monospace}

/* Le bouton d'ajout se déplie au survol de la carte */
.le-ajout{
  position:absolute;left:10px;right:10px;bottom:10px;z-index:3;
  opacity:0;transform:translateY(8px);
  transition:opacity var(--t-moyen),transform var(--t-moyen);
}
li.product:hover .le-ajout,li.product:focus-within .le-ajout{opacity:1;transform:none}
@media(hover:none){.le-ajout{position:static;opacity:1;transform:none}}

/* ==========================================================================
   7. ACCUEIL
   ========================================================================== */
.le-heros{position:relative;min-height:clamp(440px,64vh,620px);display:grid;align-items:end;overflow:hidden}
.le-heros img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 🚨 Le voile doit passer AU-DESSUS de la vidéo.
   Sans z-index il valait `auto`, donc 0, pendant que la vidéo est à 1 : il
   n'assombrissait que l'affiche et disparaissait dès que la lecture
   démarrait. Le bandeau paraissait délavé sans qu'on voie pourquoi — la
   règle est bien là, elle est simplement peinte dessous.
   Ordre de empilement : affiche 0, vidéo 1, voile 2, texte 3. */
.le-heros::after{content:"";position:absolute;inset:0;z-index:2;
  background:
    /* le dégradé du bas, qui porte le texte */
    linear-gradient(to top,rgba(30,27,22,.58),rgba(30,27,22,.06) 62%),
    /* et un voile uniforme léger, qui calme la vidéo sur toute sa surface */
    linear-gradient(rgba(30,27,22,.20),rgba(30,27,22,.20))}
.le-heros-txt{position:relative;z-index:3;color:#fff;padding-block:clamp(34px,6vw,64px);max-width:640px}
.le-heros-txt h1{color:#fff}
.le-heros-txt p{margin-top:14px;font-size:17px;opacity:.94}
.le-heros .le-bouton{margin-top:24px;background:#fff;border-color:#fff;color:var(--encre)}
.le-heros .le-bouton:hover{background:var(--terre);border-color:var(--terre);color:#fff}

.le-section{padding-block:clamp(52px,7vw,86px)}
.le-section--alt{background:var(--fond-alt)}
.le-tete{display:flex;flex-direction:column;gap:9px;margin-bottom:clamp(24px,3vw,38px)}
@media(min-width:860px){
  .le-tete{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:30px}
  .le-tete p.le-intro{max-width:46ch}
}

/* Les six matières, chacune avec son chiffre visible SANS clic */
.le-matieres{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
/* ⚠️ Format nettement plus bas qu'avant (1/1,12) : six cartes hautes mangeaient
   deux écrans entiers avant d'arriver au premier produit. En paysage, les six
   tiennent dans un seul regard. */
.le-mat{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  aspect-ratio:4/3;padding:18px;border-radius:var(--r-m);overflow:hidden;
  color:#fff;background:var(--encre-2);
}
@media(min-width:900px){.le-mat{aspect-ratio:3/2}}
.le-mat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--t-long)}
.le-mat:hover img{transform:scale(1.05)}
/* Voile plus dense qu'avant : certaines photos d'ambiance sont très claires et
   le titre blanc s'y perdait. */
/* Quatre des six matières sont des tissus clairs — percale et gaze sont
   franchement blanches. Le voile doit tenir le texte blanc sur un fond
   blanc, pas seulement sur le lin ou la flanelle. */
.le-mat::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(26,23,19,.86) 0%,rgba(26,23,19,.48) 24%,rgba(26,23,19,.08) 50%,transparent 64%)}
/* Le voile s'arrête à mi-hauteur : au-delà, il masquait le tissu, qui est
   tout l'intérêt de la carte. L'ombre portée prend le relais sur les deux
   ou trois pixels où un pli très clair passerait sous une lettre. */
.le-mat-txt{text-shadow:0 1px 3px rgba(20,17,13,.55)}
.le-mat-txt{position:relative;z-index:2;display:flex;flex-direction:column;gap:3px}
.le-mat-txt .nom{font-family:"Petrona",serif;font-size:clamp(1.1rem,2.2vw,1.45rem);font-weight:600}
.le-mat-txt .sens{font-size:13.5px;opacity:.88}
.le-mat-txt .chiffre{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.02em;opacity:.92;margin-top:5px}

/* ==========================================================================
   8. LE COMPARATEUR — la pièce maîtresse
   Seuls deux concurrents mondiaux en ont un dans la fiche produit. Et un seul
   donne la BORNE DE MARCHÉ à côté de son chiffre : un chiffre sans échelle
   n'est pas de la transparence, c'est du décor.
   ========================================================================== */
.le-comp{border:1px solid var(--filet);border-radius:var(--r-m);overflow:hidden;background:var(--fond-carte)}
.le-comp-defile{overflow-x:auto;-webkit-overflow-scrolling:touch}
.le-comp table{border-collapse:collapse;width:100%;min-width:680px;font-size:14.5px}
.le-comp th,.le-comp td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--filet-clair);vertical-align:top}
.le-comp thead th{
  font-family:"Inter",sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--encre-2);border-bottom:1px solid var(--filet);
  white-space:nowrap;position:sticky;top:0;background:var(--fond-carte);z-index:1;
}
.le-comp tbody tr:last-child td{border-bottom:0}
.le-comp td:first-child{font-weight:500;white-space:nowrap}
.le-comp .val{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.le-comp .borne{display:block;font-size:11.5px;color:var(--encre-2);font-family:"IBM Plex Mono",monospace;margin-top:2px}
.le-comp tr.est-ce-produit{background:color-mix(in srgb,var(--sauge) 9%,transparent)}
.le-comp .mieux{color:var(--sauge);font-weight:500}
/* Comparateur posé dans une page de texte (page « Comparateur ») :
   🚨 `.le-prose > *` bride chaque enfant à 74ch : la section tombait à 745 px
   et la sixième colonne passait sous la barre de défilement. Le tableau EST
   le contenu de la page, il prend toute la largeur.
   ⚠️ Les règles de tableau de `.le-prose` (0,1,2) l'emportent sur celles du
   comparateur (0,1,1) : première colonne collée au cadre, filet noir sous
   l'en-tête. On les reprend ici, à poids égal et plus tard dans la feuille. */
.le-prose > .le-section{max-width:none}
.le-prose .le-comp .le-table{margin-top:0;overflow:visible}
.le-prose .le-comp table{min-width:680px;font-size:14.5px}
.le-prose .le-comp thead th{padding:12px 15px;font-size:10.5px;letter-spacing:.13em;border-bottom:1px solid var(--filet)}
.le-prose .le-comp tbody td{padding:12px 15px}
.le-prose .le-comp tbody tr:last-child td{border-bottom:0}

/* ==========================================================================
   9. FICHE PRODUIT
   ========================================================================== */
.le-fi{display:grid;gap:clamp(26px,4vw,52px);padding-block:clamp(22px,3vw,38px);align-items:start}
@media(min-width:960px){.le-fi{grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)}}

/* ⚠️ L'ancienne galerie empilait les vues en colonne. La grille de la section 14
   la remplace ; cette règle la contredisait et annulait les deux colonnes. */
.le-galerie-princ{border-radius:var(--r-m);overflow:hidden;background:var(--fond-alt);aspect-ratio:4/5}
.le-galerie-princ img{width:100%;height:100%;object-fit:cover}
.le-vignettes{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.le-vignettes button{
  padding:0;border:1px solid transparent;border-radius:var(--r-s);overflow:hidden;
  background:var(--fond-alt);aspect-ratio:1;cursor:pointer;
  transition:border-color var(--t-court),opacity var(--t-court);opacity:.72;
}
.le-vignettes button[aria-current="true"]{border-color:var(--encre);opacity:1}
.le-vignettes button:hover{opacity:1}
.le-vignettes img{width:100%;height:100%;object-fit:cover}

/* La colonne d'achat reste visible : décision prise dans les deux tiers du panel */
.le-achat{align-self:start}
@media(min-width:960px){.le-achat{position:sticky;top:96px}}
.le-fi-titre{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:6px}
.le-fi-matiere{font-size:14.5px;color:var(--encre-2);margin-bottom:14px}
/* Le comparateur s'ouvre depuis la ligne de matière, là où l'hésitation naît.
   Discret : il ne doit pas concurrencer le bouton d'ajout au panier, qui est
   la seule action importante de cette colonne. */
.le-fi-comparer{color:var(--terre);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;cursor:pointer}
.le-fi-comparer:hover,.le-fi-comparer:focus-visible{color:var(--encre)}

/* ----- « À compléter » et l'assistant de taille, sur une ligne -------------
   Mesuré avant d'y toucher : 461 px et 465 px de haut. Deux encarts de même
   poids et de hauteur jumelle, empilés, faisaient 926 px — un écran entier de
   défilement pour ce qui tient côte à côte.

   ⚠️ `auto-fit` et non `1fr 1fr` : sur 18 % des fiches le catalogue ne trouve
   aucun complément (moins de deux, on n'affiche rien). L'assistant doit alors
   reprendre toute la largeur, pas laisser une colonne vide en face de lui. */
.le-fi-duo{display:grid;gap:20px;align-items:start;margin-block:28px 0;
  grid-template-columns:repeat(auto-fit,minmax(420px,1fr))}
/* Les deux blocs portaient chacun le rythme vertical d'une section de page.
   Dans une grille, c'est la grille qui l'impose, sinon on additionne les deux. */
.le-fi-duo > .le-cpl{margin:0;height:100%}
.le-fi-duo > .le-section{padding-block:0}
.le-fi-duo .enrob{max-width:none;padding-inline:0}
.le-fi-duo .le-encadre{height:100%;padding:clamp(20px,2.4vw,30px)}
/* En colonne étroite, le titre et son introduction ne tiennent plus l'un à côté
   de l'autre : on les remet l'un sous l'autre à toute largeur d'écran. */
.le-fi-duo .le-tete{flex-direction:column;align-items:flex-start;gap:8px;
  margin-bottom:18px}
.le-fi-duo .le-tete p.le-intro{max-width:none}

/* Le rythme de 86 px est celui d'une page d'accueil, où chaque section est une
   respiration. Sur une fiche, où l'on descend pour décider, il fait défiler
   dans le vide — 172 px mesurés entre deux encarts voisins. */
body.single-product .le-section{padding-block:clamp(30px,3.6vw,50px)}

/* ----- Page d'accueil : le même calcul, en moins sévère ---------------------
   Les sections ne laissent aucun vide entre elles — mesuré, elles se touchent.
   Le blanc vient de l'ADDITION : 86 px de marge basse plus 86 px de marge haute
   font 172 px entre deux blocs de contenu. Ramené à 64, soit 128 px : assez
   pour que l'alternance des fonds respire, pas assez pour donner l'impression
   que la page est finie. */
body.home .le-section{padding-block:clamp(40px,4.6vw,64px)}

/* 🚨 L'assistant de taille est une CARTE posée dans un conteneur nu, pas une
   section à fond plein. Sa marge verticale ne sépare donc rien : elle s'ajoute
   simplement à celle de ses voisines. Mesuré : 465 px de haut pour une carte de
   293 px, soit 172 px de marge pour rien. La carte porte déjà son propre
   rembourrage de 52 px. */
body.home #le-assistant{padding-block:0}
.le-fi-prix{font-size:26px;margin-block:4px 2px}
.le-fi-prix del{font-size:18px;color:var(--encre-2);opacity:.65;margin-right:9px}
/* 🔥 Le franco rappelé SOUS le prix, pas seulement dans le bandeau. Un seul
   concurrent mondial le fait correctement, et c'est une recommandation Baymard. */
.le-franco{font-size:13px;color:var(--sauge);margin-bottom:20px}

/* Sélecteurs : BOUTONS, jamais de menu déroulant. 71 % des sites de référence
   utilisent des boutons ; un menu masque la disponibilité jusqu'au clic. */
.le-choix{display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.le-choix-tete{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.le-choix-tete .lab{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-2)}
.le-choix-tete .lab b{color:var(--encre);font-weight:500;text-transform:none;letter-spacing:.01em}
.le-choix-tete a{font-size:13px;text-decoration:underline;text-underline-offset:3px;color:var(--encre-2)}
.le-choix-tete a:hover{color:var(--terre)}
.le-opts{display:flex;flex-wrap:wrap;gap:8px}
.le-opt{
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:9px 13px;border:1px solid var(--filet);border-radius:var(--r-s);
  background:var(--fond-carte);cursor:pointer;
  transition:border-color var(--t-court),background var(--t-court),transform var(--t-court);
}
.le-opt:hover{border-color:var(--encre-2)}
.le-opt[aria-pressed="true"]{border-color:var(--encre);background:var(--encre);color:var(--fond)}
.le-opt .dim{font-size:14px;font-family:"IBM Plex Mono",monospace;letter-spacing:-.02em}
/* 🔥 Le prix sur CHAQUE bouton de taille : supprime le clic de découverte, et
   un prix qui monte devient une information de dimension, pas une surprise. */
.le-opt .px{font-size:11.5px;font-family:"IBM Plex Mono",monospace;opacity:.72}
.le-opt[disabled]{opacity:.42;cursor:not-allowed;text-decoration:line-through}
.le-opt--coul{padding:0;width:34px;height:34px;border-radius:50%;overflow:hidden}
.le-opt--coul[aria-pressed="true"]{outline:2px solid var(--encre);outline-offset:2px;border-color:transparent}

.le-rien-choisi{font-size:13px;color:var(--terre);min-height:20px}

/* Le bandeau d'attributs sous l'ajout au panier : six arguments techniques
   scannables en deux secondes, pile au moment de la décision. */
.le-attrs{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:20px;
  background:var(--filet-clair);border:1px solid var(--filet);border-radius:var(--r-m);overflow:hidden;
}
.le-attr{background:var(--fond-carte);padding:11px 13px;display:flex;gap:9px;align-items:flex-start}
.le-attr svg{width:17px;height:17px;flex:none;margin-top:2px;stroke:var(--sauge);fill:none;stroke-width:1.5}
.le-attr span{font-size:13px;line-height:1.42}
.le-attr b{display:block;font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:500}

/* Accordéons techniques, en sous-rubriques nommées */
.le-acc{border-top:1px solid var(--filet);margin-top:26px}
.le-acc details{border-bottom:1px solid var(--filet)}
.le-acc summary{
  padding:15px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:14px;font-size:14.5px;font-weight:500;letter-spacing:.01em;
}
.le-acc summary::-webkit-details-marker{display:none}
.le-acc summary::after{content:"";width:9px;height:9px;border-right:1.4px solid var(--encre-2);border-bottom:1.4px solid var(--encre-2);transform:rotate(45deg) translateY(-2px);transition:transform var(--t-court)}
.le-acc details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.le-acc .corps{padding-bottom:18px;font-size:15px;line-height:1.66;color:var(--encre)}
.le-acc .corps p+p{margin-top:11px}
.le-acc .corps ul{margin:11px 0 0;padding-left:18px}
.le-acc .corps li{margin-bottom:5px}
/* ⚠️ Ni cadre, ni fond de cellule : un encadré complet donne un air de tableau
   de caractéristiques techniques, et ces lignes se lisent mieux comme une
   liste. Seuls les filets horizontaux restent — ce sont eux qui alignent l'œil
   d'une valeur à l'autre. */
.le-specs{display:grid;margin-top:12px}
.le-spec{
  padding:10px 2px;display:grid;grid-template-columns:150px 1fr;gap:12px;
  font-size:13.5px;border-bottom:1px solid var(--filet-clair);
}
.le-spec:last-child{border-bottom:0}
.le-spec dt{color:var(--encre-2)}
.le-spec dd{margin:0;font-family:"IBM Plex Mono",monospace;font-size:13px}

/* ==========================================================================
   10. RAIL DE FILTRES
   Facettes déduites des données, en paramètres d'URL : partageables et
   indexables, sans script. Le jour où un attribut est alimenté, il apparaît.
   ========================================================================== */
.le-boutique{display:grid;gap:clamp(20px,3vw,40px)}
@media(min-width:1000px){.le-boutique{grid-template-columns:254px minmax(0,1fr)}}
.le-rail{display:flex;flex-direction:column;gap:22px;align-self:start}
/* ⚠️ Ni `sticky`, ni `max-height`, ni `overflow-y` sur le rail.
   Le collage à l'écran oblige à plafonner la hauteur, le plafond fait
   apparaître une barre de défilement interne, et cette barre cache la fin des
   filtres à qui ne pense pas à faire défiler DANS la colonne. Deux
   défilements sur la même page, c'est un de trop. Le rail suit simplement la
   page, comme chez Woodmart. */
.le-facette h4{font-size:11px;font-family:"Inter",sans-serif;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2);margin-bottom:10px}
.le-facette ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px}
.le-facette label{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer;padding:3px 0}
.le-facette input{accent-color:var(--terre);width:15px;height:15px}
.le-facette .nb{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--encre-2)}
.le-jetons{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.le-jeton{
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px;
  border:1px solid var(--filet);border-radius:99px;background:var(--fond-carte);font-size:13px;
}
.le-jeton button{border:0;background:0;cursor:pointer;line-height:1;font-size:15px;color:var(--encre-2)}
.le-jeton button:hover{color:var(--terre)}

/* Le rail : replié derrière un bouton sur petit écran, toujours ouvert au-delà */
.le-rail-boite > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:12px 16px;border:1px solid var(--filet);border-radius:var(--r-s);
  background:var(--fond-carte);font-size:14px;font-weight:500;letter-spacing:.02em;
  margin-bottom:16px;
}
.le-rail-boite > summary::-webkit-details-marker{display:none}
.le-rail-boite > summary::before{
  content:"";width:15px;height:15px;flex:none;
  background:linear-gradient(var(--encre),var(--encre)) 0 3px/15px 1.4px no-repeat,
             linear-gradient(var(--encre),var(--encre)) 0 7.5px/11px 1.4px no-repeat,
             linear-gradient(var(--encre),var(--encre)) 0 12px/7px 1.4px no-repeat;
}
.le-rail-nb{
  margin-left:auto;background:var(--terre);color:#fff;font-size:11px;
  min-width:19px;height:19px;line-height:19px;text-align:center;border-radius:10px;
}
@media(min-width:1000px){
  .le-rail-boite > summary{display:none}
  .le-rail-boite{display:block}
}

/* ==========================================================================
   11. PIED
   ========================================================================== */
.le-pied{background:var(--encre);color:var(--fond);padding-block:clamp(44px,6vw,70px) 26px;margin-top:clamp(50px,7vw,90px)}
.le-pied-grille{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
.le-pied h4{font-size:11px;font-family:"Inter",sans-serif;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.62;margin-bottom:13px}
.le-pied ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.le-pied a{font-size:14px;opacity:.9}
.le-pied a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
/* --- Moyens de paiement -------------------------------------------------
   🚨 `.le-pied ul` (0,1,1) bat `.le-paiements-liste` (0,1,0) : sans le
   préfixe, la bande héritait du `flex-direction:column` des colonnes du pied
   et les cinq marques s'empilaient les unes sous les autres. Aucune erreur,
   juste une colonne de logos.

   Chaque marque a sa propre proportion — Visa est un long mot, Mastercard
   empile ses disques sur son nom — donc une pastille de taille commune, et la
   hauteur réglée marque par marque pour que les cinq pèsent le même poids à
   l'œil. Apple Pay arrive avec son propre fond, elle se pose nue.
   ------------------------------------------------------------------------ */
.le-paiements{
  margin-top:38px;padding-top:22px;border-top:1px solid rgba(244,241,234,.16);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
}
.le-paiements-titre{
  font-family:"Inter",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;opacity:.62;
}
.le-pied .le-paiements-liste,
.le-paiements-liste{
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;
  gap:8px;margin:0;padding:0;list-style:none;
}
.le-paiements-liste li{
  background:var(--blanc);border-radius:var(--r-s);
  width:54px;height:34px;display:flex;align-items:center;justify-content:center;
}
.le-paiements-liste img{max-width:40px;max-height:24px;width:auto;height:auto;display:block}
.le-paiements-liste li[data-marque="mastercard"] img{max-height:28px;max-width:34px}
.le-paiements-liste li[data-marque="paypal"] img{max-height:15px}
.le-paiements-liste li[data-marque="visa"] img{max-height:15px}
/* Apple Pay : pas de pastille, la marque en porte déjà une — Apple interdit
   de la retoucher, et deux contours l'un dans l'autre se voient. */
.le-paiements-liste li.le-paiement--nu{background:none;width:auto;height:34px}
.le-paiements-liste li.le-paiement--nu img{max-width:none;max-height:34px}
.le-paiements-liste li[data-marque="cb"] img{max-height:22px}
/* Transporteurs : même pastille, élargie à la mesure du mot ; la hauteur du
   logo est fixée, sinon la pastille se cale sur sa largeur minimale et
   Chronopost tombe à 32 × 7 px (constaté sur Nuances au Mur). */
.le-transporteurs .le-paiements-liste li{width:auto;min-width:54px;padding:0 10px}
.le-transporteurs .le-paiements-liste img{height:16px;width:auto;max-width:none;max-height:none}
.le-transporteurs .le-paiements-liste li[data-transporteur="gls"] img{height:15px}
/* Pied de page : paiement et livraison côte à côte, empilés sur mobile. */
.le-pied-bandes{display:flex;flex-wrap:wrap;gap:0 48px;margin-top:38px;padding-top:22px;border-top:1px solid rgba(244,241,234,.16)}
.le-pied-bandes .le-paiements{margin-top:0;padding-top:0;border-top:0}
.le-pied-bandes + .le-pied-bas{margin-top:18px;padding-top:0;border-top:0}
/* Fiche : dans l'accordéon « Livraison et retours », sur fond clair. */
.le-prose .le-transporteurs{margin-top:14px;padding-top:0;border-top:0;justify-content:flex-start}
.le-prose .le-transporteurs .le-paiements-liste li{border:1px solid var(--filet-clair)}

/* Panier et commande : le fond est clair, la pastille blanche s'y perdrait. */
.woocommerce .le-paiements{border-top-color:var(--filet-clair);justify-content:center;margin-top:26px}
.woocommerce .le-paiements-titre{opacity:.72}
.woocommerce .le-paiements-liste li{border:1px solid var(--filet-clair)}
.woocommerce .le-paiements-liste li.le-paiement--nu{border:0}

.le-pied-bas{margin-top:38px;padding-top:20px;border-top:1px solid rgba(244,241,234,.16);display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;font-size:12.5px;opacity:.72}
/* La bande des paiements porte déjà le filet : deux traits l’un sur l’autre. */
.le-paiements + .le-pied-bas{margin-top:18px;padding-top:0;border-top:0}
.le-lettre{display:flex;gap:8px;margin-top:14px;max-width:340px}
.le-lettre input{flex:1;min-width:0;padding:11px 13px;border:1px solid rgba(244,241,234,.28);background:transparent;color:var(--fond);border-radius:var(--r-s);font-size:14px}
.le-lettre input::placeholder{color:rgba(244,241,234,.5)}
.le-lettre button{padding:11px 18px;border:0;border-radius:var(--r-s);background:var(--fond);color:var(--encre);font-size:13px;font-weight:500;cursor:pointer;letter-spacing:.04em;text-transform:uppercase}
.le-lettre button:hover{background:var(--terre);color:#fff}

/* ==========================================================================
   12. ANIMATIONS — depuis un état VISIBLE au repos
   Un bloc parqué à opacity:0 en attente d'un observateur ne s'affiche pas dans
   la première image ni pour qui a coupé les animations.
   ========================================================================== */
@media(prefers-reduced-motion:no-preference){
  .le-monte{opacity:0;transform:translateY(16px);transition:opacity .62s cubic-bezier(.22,1,.36,1),transform .62s cubic-bezier(.22,1,.36,1)}
  .le-monte.est-vu{opacity:1;transform:none}
  .le-monte:nth-child(2){transition-delay:.06s}
  .le-monte:nth-child(3){transition-delay:.12s}
  .le-monte:nth-child(4){transition-delay:.18s}
  /* Filet de sécurité : si le script ne tourne pas, tout redevient visible. */
  html.sans-js .le-monte{opacity:1;transform:none}
}

/* ==========================================================================
   13. ADAPTATION AUX ÉCRANS
   ========================================================================== */
@media(max-width:1100px){
  /* Six onglets entre 860 et 1100 px : on resserre plutôt que de laisser un
     intitulé se casser sur trois lignes. */
  .le-nav{gap:clamp(10px,1.6vw,20px)}
  .le-nav > li > a{font-size:13px;letter-spacing:.02em}
  ul.products{grid-template-columns:repeat(2,1fr)}
  .le-mega-grille{grid-template-columns:repeat(var(--cols,2),minmax(0,1fr)) 260px}
  /* 🚨 Après `.le-mega-grille` : les deux sélecteurs ont la même spécificité,
     donc c'est l'ordre qui tranche. Le méga « Catégories » passe à trois
     colonnes et ne réserve pas de piste pour une carte qu'il n'a pas. */
  .le-mega-cats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .le-pied-grille{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .le-entete-int{grid-template-columns:auto 1fr;min-height:62px}
  /* 🚨 Le défilement horizontal de la nav n'est appliqué QUE sous ce palier :
     au-dessus, il rognerait le méga-menu. */
  .le-nav{display:none}
  .le-matieres{grid-template-columns:repeat(2,1fr)}
  .le-attrs{grid-template-columns:1fr}
}
@media(max-width:620px){
  body{font-size:15.5px}
  ul.products{grid-template-columns:repeat(2,1fr);gap:14px}
  .le-vignettes{grid-template-columns:repeat(4,1fr)}
  .le-spec{grid-template-columns:1fr;gap:2px}
  .le-pied-grille{grid-template-columns:1fr}
  .le-fi-prix{font-size:23px}
}

/* Menu mobile en tiroir */
.le-tiroir{
  position:fixed;inset:0 auto 0 0;width:min(86vw,360px);z-index:90;
  background:var(--fond-carte);box-shadow:var(--ombre-l);
  transform:translateX(-102%);transition:transform var(--t-moyen);
  display:flex;flex-direction:column;overflow-y:auto;padding:22px var(--gouttiere) 40px;
}
.le-tiroir.est-ouvert{transform:none}
.le-voile{position:fixed;inset:0;z-index:80;background:rgba(43,39,33,.42);opacity:0;visibility:hidden;transition:opacity var(--t-moyen),visibility var(--t-moyen)}
.le-voile.est-ouvert{opacity:1;visibility:visible}
.le-tiroir details{border-bottom:1px solid var(--filet-clair)}
.le-tiroir summary{padding:14px 0;cursor:pointer;list-style:none;font-size:16px;display:flex;justify-content:space-between;align-items:center}
.le-tiroir summary::-webkit-details-marker{display:none}
.le-tiroir summary::after{content:"+";font-family:"IBM Plex Mono",monospace;color:var(--encre-2)}
.le-tiroir details[open] summary::after{content:"–"}
.le-tiroir details ul{margin:0 0 14px;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.le-tiroir details a{font-size:14.5px;color:var(--encre-2)}

/* Impression : la fiche d'entretien doit sortir propre */
@media print{
  .le-entete,.le-pied,.le-bandeau,.le-ajout,.le-rail{display:none!important}
  body{background:#fff;font-size:12pt}
}


/* Tiroir mobile : les sous-rayons d'un univers. */
.le-tiroir .le-tiroir-sous{margin:2px 0 6px;padding-left:12px;border-left:1px solid var(--filet);list-style:none}
.le-tiroir .le-tiroir-sous a{font-size:14px;color:var(--encre-2)}

/* ==========================================================================
   14. FICHE PRODUIT — structure reprise de Woodmart (démo furniture2)
   La galerie défile le long d'une colonne d'achat collante, puis viennent les
   deux colonnes Détails / Description et le bloc « à propos de la matière ».
   Le ton, lui, ne change pas : pas d'orange, pas de typographie arrondie.
   ========================================================================== */
.le-fi-tete{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;padding-block:18px;
}

/* --- Navigation dans le rayon ------------------------------------------- */
.le-nav-produit{display:flex;align-items:center;gap:8px;font-size:13px}
.le-nav-produit-lien{position:relative;display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--filet);border-radius:50%}
.le-nav-produit-lien:hover{border-color:var(--terre);color:var(--terre)}
.le-nav-produit .le-fleche{font-size:17px;line-height:1}
/* La vignette n'apparaît qu'au survol : elle informe sans encombrer. */
.le-nav-produit-carte{
  position:absolute;top:calc(100% + 8px);z-index:30;
  display:flex;gap:10px;align-items:center;width:232px;padding:10px;
  background:var(--fond-carte);border:1px solid var(--filet);border-radius:var(--r-m);
  box-shadow:var(--ombre-l);opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity var(--t-court),transform var(--t-court),visibility var(--t-court);
}
.le-nav-produit--prev .le-nav-produit-carte{left:0}
.le-nav-produit--next .le-nav-produit-carte{right:0}
.le-nav-produit-lien:hover .le-nav-produit-carte,
.le-nav-produit-lien:focus-visible .le-nav-produit-carte{opacity:1;visibility:visible;transform:none}
.le-nav-produit-carte img{width:54px;height:54px;object-fit:cover;border-radius:4px;flex:none}
.le-nav-produit-titre{display:block;font-size:13px;line-height:1.35;color:var(--encre)}
.le-nav-produit-prix{font-size:12px;color:var(--encre-2)}
.le-nav-produit-retour{margin-left:6px;font-size:12.5px;color:var(--encre-2)}
.le-nav-produit-retour:hover{color:var(--terre)}

/* --- Galerie en grille --------------------------------------------------- */
/* 🚨 Première version : chaque tuile portait un `aspect-ratio` et un fond sable.
   Les visuels du fournisseur ont des proportions très inégales — des détourés
   carrés sur blanc à côté de photos d'ambiance verticales — et le fond
   apparaissait sous chacun, en bande. Pire, `.le-tuile{aspect-ratio:4/5}` était
   écrit APRÈS `.le-tuile--large{aspect-ratio:16/11}` : même spécificité, donc
   la grande tuile n'a jamais eu son format.

   La galerie de furniture2 ne force AUCUN format : chaque image garde sa
   hauteur naturelle, et aucun fond ne peut dépasser puisqu'il n'y a plus de
   vide à remplir. On fait pareil. */
.le-galerie{display:grid;grid-template-columns:1fr;gap:10px;align-items:start}
.le-tuile{margin:0;overflow:hidden;border-radius:var(--r-m);position:relative;background:var(--fond-carte)}
.le-tuile img,.le-tuile video{width:100%;height:auto;display:block}
.le-tuile img{cursor:zoom-in}
.le-video-son{
  position:absolute;right:12px;bottom:12px;padding:6px 12px;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;border:1px solid rgba(255,255,255,.7);
  border-radius:100px;background:rgba(30,27,22,.35);color:#fff;cursor:pointer;
  backdrop-filter:blur(4px);
}
.le-video-son:hover{background:rgba(30,27,22,.6)}
@media(min-width:900px){
  .le-galerie{grid-template-columns:1fr 1fr}
}
/* La galerie se colle pendant qu'on lit la colonne d'achat. La plupart de nos
   fiches n'ont qu'une à trois vues : sans cela, les photos disparaissent au
   premier défilement et on choisit une taille sans plus voir le produit.
   ⚠️ Le collage n'est posé qu'au-dessus de 960 px — c'est le palier où les deux
   colonnes existent — et seulement si la galerie tient dans l'écran, sans quoi
   son bas deviendrait inatteignable. */
@media(min-width:960px){
  .le-galerie{position:sticky;top:96px;align-self:start}
}
@media(prefers-reduced-motion:no-preference){
  .le-tuile{will-change:transform}
}

/* --- Deux colonnes Détails / Description --------------------------------- */
.le-deux-colonnes{display:grid;gap:40px;align-items:start}
@media(min-width:900px){.le-deux-colonnes{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px}}
.le-tete-col{
  font-size:1.05rem;padding-bottom:12px;margin-bottom:18px;
  border-bottom:1px solid var(--encre);
}
.le-deux-colonnes .le-prose > *{max-width:none}

/* --- À propos de la matière ---------------------------------------------- */
.le-a-propos-grille{display:grid;gap:34px;align-items:start}
@media(min-width:900px){.le-a-propos-grille{grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:56px}}
.le-a-propos-texte{max-width:56ch;color:var(--encre-2);margin-top:12px}
/* ⚠️ Le fond posé sur le conteneur avec des gouttières de 1 px dessine bien les
   filets — mais il peint aussi les CASES VIDES de la dernière rangée. Avec
   quatre faits sur une grille de trois colonnes, un rectangle beige restait
   suspendu dans le vide. Les filets passent donc sur les cellules. */
.le-a-propos-faits{
  display:grid;gap:0;background:var(--fond-carte);
  border:1px solid var(--filet);border-top:0;border-left:0;
  border-radius:var(--r-m);overflow:hidden;margin-top:24px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.le-a-propos-faits > div{padding:14px 16px;border-top:1px solid var(--filet);border-left:1px solid var(--filet)}
.le-a-propos-faits dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2);margin-bottom:4px}
.le-a-propos-faits dd{margin:0;font-size:14.5px}
.le-encart-contact{background:var(--fond-carte);border:1px solid var(--filet);border-radius:var(--r-m);padding:24px}
.le-encart-contact h3{font-size:1.05rem;margin-bottom:10px}
.le-encart-contact p{font-size:14.5px;color:var(--encre-2);margin-bottom:12px;line-height:1.6}
.le-lien-fort{color:var(--terre);text-decoration:underline;text-underline-offset:3px}
.le-video-son.est-actif{background:var(--terre);border-color:var(--terre)}
.le-loupe{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(30,27,22,.88);padding:4vmin;cursor:zoom-out;
  animation:le-apparait .18s ease-out;
}
.le-loupe img{max-width:100%;max-height:92vh;object-fit:contain;border-radius:var(--r-m)}
@keyframes le-apparait{from{opacity:0}to{opacity:1}}

/* --- Conteneurs en carte, comme furniture2 -------------------------------
   Chez Woodmart, chaque grand bloc de la fiche est posé sur une carte blanche
   détachée du fond. C'est ce qui donne la sensation de finition. On reprend le
   principe avec notre fond et notre filet, sans ombre portée : notre palette
   est mate, une ombre y ferait tache. */
.le-carte-bloc{
  background:var(--fond-carte);border:1px solid var(--filet);
  border-radius:var(--r-m);padding:clamp(24px,3.4vw,48px);
  max-width:var(--large);margin-inline:auto;
}
.le-a-propos{background:transparent}

/* --- À propos de la matière, version complète ---------------------------- */
.le-a-propos-grille{display:grid;gap:34px;align-items:start}
@media(min-width:900px){.le-a-propos-grille{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px}}
.le-a-propos-visuel{border-radius:var(--r-m);overflow:hidden;aspect-ratio:4/3;background:var(--fond-alt)}
.le-a-propos-visuel img{width:100%;height:100%;object-fit:cover}
.le-a-propos-rayons{
  list-style:none;margin:24px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--filet);border:1px solid var(--filet);border-radius:var(--r-m);overflow:hidden;
}
.le-a-propos-rayons a{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  background:var(--fond-carte);padding:12px 14px;font-size:14px;
}
.le-a-propos-rayons a:hover{background:var(--fond-alt);color:var(--terre)}
.le-a-propos-rayons .le-num{font-size:12px;color:var(--encre-2)}
.le-a-propos-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.le-a-propos-contact{margin-top:18px;font-size:14px;color:var(--encre-2);line-height:1.6;max-width:56ch}

/* --- Pastilles produit --------------------------------------------------- */
/* 🚨 Les pastilles étaient posées en haut à GAUCHE, exactement là où se trouve
   déjà `.le-etiq`, l'étiquette de densité. Les deux se chevauchaient : le
   « Nouveau » passait par-dessus « 120 fils/cm² ».

   L'étiquette garde sa place. C'est le chiffre qui porte tout le positionnement
   du site — « le chiffre avant l'adjectif » — et une pastille promotionnelle ne
   passe pas devant lui. Les pastilles vont à droite. */
.le-pastilles{position:absolute;top:10px;right:10px;z-index:3;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.le-pastille-prod{
  font-family:"Inter",sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:100px;
  background:var(--encre);color:var(--fond);
}
.le-pastille-prod--remise{background:var(--terre)}
.le-pastille-prod--neuf{background:var(--sauge)}
.le-pastille-prod--rupture{background:var(--fond-carte);color:var(--encre-2);border:1px solid var(--filet)}
/* Lisibles sur un détouré blanc comme sur une photo sombre, sans cadre autour. */
.le-pastille-prod{box-shadow:0 1px 6px rgba(30,27,22,.16)}
.le-achat-boutons{display:grid;gap:8px}
@media(min-width:420px){.le-achat-boutons{grid-template-columns:1.25fr 1fr}}

/* --- Pastilles de coloris ------------------------------------------------
   Chaque pastille est un LIEN vers un autre produit : le fournisseur livre les
   coloris comme des fiches distinctes, avec leur prix et leur stock propres.
   Un bouton de sélection laisserait croire le contraire. */
.le-coloris{margin-top:20px}
.le-coloris ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.le-pastille-coul{
  display:block;width:44px;height:44px;border-radius:var(--r-m);overflow:hidden;
  border:1px solid var(--filet);background:var(--fond-alt);
  transition:border-color var(--t-court),transform var(--t-court);
}
.le-pastille-coul img{width:100%;height:100%;object-fit:cover}
.le-pastille-coul:hover{border-color:var(--encre-2);transform:translateY(-1px)}
.le-pastille-coul.est-actif{border-color:var(--terre);box-shadow:0 0 0 1px var(--terre)}
.le-pastille-coul.est-epuise{opacity:.45}
.le-pastille-coul.est-epuise:hover{opacity:.75}
.le-pastille-coul-texte{
  display:grid;place-items:center;width:100%;height:100%;
  font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--encre-2);
}

/* ==========================================================================
   15. PAGE DE RAYON — mise en page reprise de Woodmart (démo furniture2)
   Colonne de filtres à demeure, cartes blanches, barre d'outils, et un bloc de
   maillage en bas. Le fond de page reste notre sable : ce sont les cartes qui
   se détachent, pas l'inverse.
   ========================================================================== */

/* --- La colonne de filtres reste ouverte sur grand écran -----------------
   🚨 Sur téléphone elle se replie derrière un bouton, sinon le visiteur ne voit
   que des cases à cocher sur trois écrans. Au-dessus de 1000 px elle est à
   demeure : `display:contents` efface le <details> de la mise en page pour que
   ses enfants participent directement à la grille. */
@media(min-width:1000px){
  .le-rail-boite{display:contents}
  .le-rail-boite > summary{display:none}
  .le-rail-boite > .le-rail{display:flex!important}
}
.le-rail{display:flex;flex-direction:column;gap:14px}
.le-facette{
  background:var(--fond-carte);border:1px solid var(--filet);
  border-radius:var(--r-m);padding:16px 18px;
}
.le-facette h4{
  font-family:"Inter",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2);
  margin-bottom:10px;
}

/* --- Barre d'outils ------------------------------------------------------ */
.le-barre{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid var(--filet);
}
.le-barre-compte{font-size:13px;color:var(--encre-2)}
.le-barre-outils{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.le-barre-lib{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2)}
.le-par-page{display:flex;align-items:center;gap:2px;font-family:"IBM Plex Mono",monospace;font-size:12.5px}
.le-par-page a{padding:3px 7px;border-radius:var(--r-s);color:var(--encre-2)}
.le-par-page a:hover{color:var(--encre)}
.le-par-page a.est-actif{background:var(--encre);color:var(--fond)}
.le-barre .woocommerce-ordering select{
  font-size:13.5px;padding:7px 12px;border:1px solid var(--filet);
  border-radius:var(--r-m);background:var(--fond-carte);
}

/* --- Cartes produit : l'encart blanc de Woodmart ------------------------- */
body.le-theme ul.products li.product{
  background:var(--fond-carte);border:1px solid var(--filet);
  border-radius:var(--r-m);padding:10px 10px 16px;
  transition:border-color var(--t-court),transform var(--t-court);
}
body.le-theme ul.products li.product:hover{border-color:var(--filet-fonce,var(--encre-2));transform:translateY(-2px)}
body.le-theme ul.products li.product .le-visuel{border-radius:var(--r-s)}
body.le-theme ul.products li.product .woocommerce-loop-product__title,
body.le-theme ul.products li.product .le-matiere,
body.le-theme ul.products li.product .price{padding-inline:4px}

/* --- Bloc de maillage ---------------------------------------------------- */
.le-maillage{
  margin-top:56px;padding-top:40px;border-top:1px solid var(--filet);
}
/* Le texte de bas de rayon : de la prose, pas une liste de liens.
   Deux colonnes sur grand écran pour que les lignes gardent une longueur
   lisible sans laisser un bloc de texte solitaire au milieu de la page. */
.le-maillage-texte{max-width:none}
.le-maillage-texte > *{max-width:none}
@media(min-width:1000px){
  /* Sur toute la largeur, deux colonnes laisseraient des lignes de 550 px —
     bien au-delà du confort de lecture. Trois colonnes ramènent chaque ligne
     autour de 65 signes, ce qui est la bonne mesure. */
  .le-maillage-texte{columns:3;column-gap:52px}
  .le-maillage-texte > h2{column-span:all}
}
@media(min-width:1000px) and (max-width:1320px){
  .le-maillage-texte{columns:2;column-gap:48px}
}
.le-maillage-texte h2{font-size:1.25rem;margin-bottom:14px}
.le-maillage-texte h3{font-size:1rem;margin-top:1.6em}
/* Un titre ne se sépare jamais du paragraphe qu'il annonce : en colonnes, il
   se retrouverait seul en bas de la première et son texte en haut de la seconde. */
.le-maillage-texte h2,.le-maillage-texte h3{break-after:avoid;break-inside:avoid}
.le-maillage-texte p{break-inside:avoid;font-size:14.5px;color:var(--encre-2);line-height:1.7}
.le-maillage-texte p + p{margin-top:1em}
.le-maillage-texte a{
  color:var(--encre);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--filet);
}
.le-maillage-texte a:hover{color:var(--terre);text-decoration-color:currentColor}
/* Belt and braces : les navigateurs qui exposent ::details-content. */
@media(min-width:1000px){
  .le-rail-boite::details-content{content-visibility:visible!important}
}

/* --- Bloc encadré : un fond de couleur qui reste DANS la page --------------
   `le-section--alt` peint toute la largeur de l'écran. Pour un bloc qui doit
   se lire comme un encadré — l'assistant de taille, une mise en avant — la
   couleur se pose ici, avec des marges intérieures et des angles adoucis. */
.le-encadre{
  background:var(--fond-alt);
  border-radius:var(--r-l,14px);
  padding:clamp(26px,3.6vw,52px);
}
@media(min-width:900px){
  .le-encadre{padding-inline:clamp(34px,4vw,64px)}
}

/* --- Cartouches de coloris et de dimensions sur les cartes ---------------
   Ce sont des LIENS vers d'autres fiches : le fournisseur livre chaque coloris
   et chaque taille comme un produit séparé, avec son prix et son stock. */
.le-nuancier{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:2px}
.le-nuancier .le-pastille-coul{
  width:15px;height:15px;border-radius:50%;display:block;flex:none;
  border:1px solid rgba(30,27,22,.18);box-shadow:inset 0 0 0 1.5px var(--fond-carte);
  transition:transform var(--t-court),box-shadow var(--t-court);
}
.le-nuancier a.le-pastille-coul:hover{transform:scale(1.18)}
.le-nuancier .le-pastille-coul.est-actif{box-shadow:inset 0 0 0 1.5px var(--fond-carte),0 0 0 1.5px var(--terre)}
.le-nuancier .le-pastille-coul.est-epuise{opacity:.4}
.le-nuancier .reste{font-size:11.5px;color:var(--encre-2);margin-left:2px}
.le-nuancier .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

.le-dims{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.le-dim{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:-.01em;
  padding:4px 8px;border:1px solid var(--filet);border-radius:var(--r-s);
  color:var(--encre-2);white-space:nowrap;
}
.le-dim:hover{border-color:var(--encre-2);color:var(--encre)}
.le-dim.est-actif{border-color:var(--encre);color:var(--encre);background:var(--fond-alt)}
.le-dim.est-epuise{opacity:.45;text-decoration:line-through}
.le-dims .reste{font-size:11.5px;color:var(--encre-2);align-self:center}
.le-sous-col{font-size:.92rem;margin-top:1.8em;margin-bottom:.6em;color:var(--encre)}
.le-liste-fait{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.le-liste-fait li{
  font-size:13.5px;color:var(--encre-2);line-height:1.55;
  padding-left:14px;position:relative;
}
.le-liste-fait li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:1px;background:var(--terre)}
.le-entretien-detail{font-size:13.5px;color:var(--encre-2);line-height:1.6}

/* --- Les six carrés de matière du bloc « Six matières, six nuits » ---------
   🚨 Ne PAS appeler ça « pastille » : `.le-pastilles` est déjà la pile de
   badges en position absolue des cartes produit. Nommé ainsi, ce bloc partait
   se coller en haut à droite de son parent, réduit à 136 px de large.
   Elles étaient six carrés vides bordés d'un filet : rien à regarder, et le
   texte du bloc promettait justement de parler de toucher. Elles reprennent
   donc la photographie des grandes cartes, en plus petit. Mêmes règles : la
   matière seule, jamais un coloris ni une référence. */
/* Une grille, pas un flex : avec `flex-grow`, la dernière rangée étirait ses
   deux carrés sur toute la largeur et la colonne perdait son alignement. */
.le-choix-matieres{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:560px){.le-choix-matieres{grid-template-columns:repeat(2,1fr)}}
.le-carre-matiere{
  position:relative;overflow:hidden;isolation:isolate;
  aspect-ratio:1;
  border-radius:var(--r-m);background:var(--fond-carte);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:11px;gap:2px;color:#fff;
  text-shadow:0 1px 3px rgba(20,17,13,.55);
  transition:transform var(--t-court)
}
.le-carre-matiere img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-long)}
.le-carre-matiere::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(26,23,19,.86) 0%,rgba(26,23,19,.42) 34%,transparent 72%)}
.le-carre-matiere > span{position:relative;z-index:2}
.le-carre-matiere .nom{font-size:13px;font-weight:500}
.le-carre-matiere .sens{font-size:11px;opacity:.9}
.le-carre-matiere:hover img{transform:scale(1.06)}
.le-carre-matiere:hover{transform:translateY(-2px)}

/* --- Coloris sans teinte connue -------------------------------------------
   Le fournisseur range ses noms de MODÈLE dans le champ Couleur — « Opulence »,
   « Liberty », « Xila », « Z'amimaux ». Aucune teinte ne les représente. Plutôt
   qu'une pastille inventée, on écrit le nom : il dit quelque chose, une fausse
   couleur non. */
.le-coul-nom{
  display:inline-flex;align-items:center;height:15px;padding:0 7px;
  border:1px solid var(--filet);border-radius:8px;
  font-size:10.5px;line-height:1;color:var(--encre-2);
  background:var(--fond-carte);white-space:nowrap;
  transition:border-color var(--t-court)
}
a.le-coul-nom:hover{border-color:var(--encre-2)}
.le-coul-nom.est-actif{border-color:var(--terre);color:var(--encre)}
.le-coul-nom.est-epuise{opacity:.45}
/* Sur la fiche produit, le bouton de coloris sans teinte porte son nom. */
.le-opt--sans-teinte{width:auto;min-width:0;padding:0 10px;font-size:12px;
  background:var(--fond-carte);color:var(--encre-2)}
.le-opt--sans-teinte .nom{display:block;line-height:1}

/* --- Carrousel de produits -------------------------------------------------
   Quatre visibles, douze dans le rail. Le défilement est natif : `scroll-snap`
   fait le calage, `scrollBy` fait le mouvement. Aucune position calculée à la
   main, donc rien à recalculer au redimensionnement — et le rail reste
   utilisable à la souris, au doigt et au clavier même sans JavaScript. */
.le-carrousel{position:relative}
ul.products.le-carrousel-rail{
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 3 * clamp(18px,2.4vw,30px)) / 4);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  /* La carte a une ombre au survol : sans ces marges, elle est rognée par le
     conteneur qui défile. */
  padding:4px;margin:-4px;
  /* 🚨 La barre de défilement horizontale est inutile ici — les flèches disent
     déjà qu'il y a une suite — et elle sautait sous la première rangée. */
  scrollbar-width:none;-ms-overflow-style:none;
}
ul.products.le-carrousel-rail::-webkit-scrollbar{display:none}
ul.products.le-carrousel-rail > li.product{scroll-snap-align:start}

.le-carrousel-fleche{
  position:absolute;top:calc(50% - 60px);z-index:4;
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  font-size:22px;line-height:1;padding-bottom:3px;
  background:var(--fond-carte);color:var(--encre);
  border:1px solid var(--filet);box-shadow:0 2px 10px rgba(30,27,22,.12);
  cursor:pointer;transition:border-color var(--t-court),opacity var(--t-court)
}
.le-carrousel-fleche:hover{border-color:var(--terre)}
.le-carrousel-fleche--prec{left:-21px}
.le-carrousel-fleche--suiv{right:-21px}
/* Bout de course : le bouton s'efface mais reste en place, pour que la rangée
   ne se déplace pas sous le curseur. */
.le-carrousel-fleche[disabled]{opacity:.28;cursor:default;box-shadow:none}
@media(max-width:1000px){
  ul.products.le-carrousel-rail{grid-auto-columns:calc((100% - clamp(14px,2.4vw,30px)) / 2)}
  .le-carrousel-fleche--prec{left:-8px}
  .le-carrousel-fleche--suiv{right:-8px}
}
@media(max-width:600px){
  ul.products.le-carrousel-rail{grid-auto-columns:78%}
}

/* --- Vidéo de fond du bandeau ---------------------------------------------
   Elle couvre le bandeau sur tous les formats : `object-fit:cover` recadre
   plutôt que de déformer, et le centre de l'image — le lit — reste dans le
   cadre aussi bien en 16:9 qu'en portrait sur téléphone. */
.le-heros-video,.le-heros-affiche{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* L'affiche est SOUS la vidéo : elle se voit tant que la vidéo n'a pas démarré,
   puis disparaît derrière elle sans transition ni saut. */
.le-heros-affiche{z-index:0}
.le-heros-video{z-index:1}
/* 🚨 `prefers-reduced-motion` : on masque la vidéo et on laisse l'affiche. Ce
   réglage existe pour des gens que le mouvement rend malades ; une vidéo en
   boucle sur toute la hauteur du premier écran est exactement ce qu'ils
   fuient. La page garde son image, personne ne perd d'information. */
@media(prefers-reduced-motion:reduce){
  .le-heros-video{display:none}
}
/* Sur téléphone, le texte occupe la moitié du bandeau au lieu d'un tiers, et il
   tombe donc sur des zones claires de la vidéo — la couette blanche notamment.
   Le voile y monte plus haut et plus fort : le même dégradé qu'en grand écran
   laissait « Du lin lavé, de la gaze de coton » à la limite du lisible. */
@media(max-width:700px){
  .le-heros::after{
    background:
      linear-gradient(to top,rgba(30,27,22,.82) 0%,rgba(30,27,22,.62) 38%,rgba(30,27,22,.28) 72%,rgba(30,27,22,.10) 100%),
      linear-gradient(rgba(30,27,22,.20),rgba(30,27,22,.20))
  }
}

/* --- Fenêtres --------------------------------------------------------------
   `<dialog>` est masqué par défaut par le navigateur ; on n'habille que son
   état ouvert. Le fond vient de ::backdrop, que seul un vrai <dialog> ouvert
   par showModal() peut avoir — une fenêtre faite à la main doit le dessiner. */
.le-modale{
  border:0;padding:0;background:transparent;max-width:min(1180px,calc(100vw - 32px));
  width:100%;max-height:calc(100vh - 48px);overflow:visible
}
.le-modale::backdrop{background:rgba(30,27,22,.55)}
.le-modale-boite{
  position:relative;background:var(--fond-page,#F6F4EF);
  border-radius:var(--r-m);box-shadow:0 18px 60px rgba(30,27,22,.28);
  max-height:calc(100vh - 48px);overflow-y:auto;
  padding:clamp(16px,2.4vw,30px)
}
/* Le comparateur porte sa propre respiration de section : dans une fenêtre,
   elle ferait 86 px de vide en haut et en bas. */
.le-modale-corps .le-section{padding-block:0}
.le-modale-fermer{
  position:absolute;top:10px;right:10px;z-index:2;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;font-size:24px;line-height:1;
  background:var(--fond-carte);color:var(--encre);
  border:1px solid var(--filet);cursor:pointer;
  transition:border-color var(--t-court)
}
.le-modale-fermer:hover{border-color:var(--terre)}
@media(max-width:600px){
  .le-modale{max-width:calc(100vw - 16px);max-height:calc(100vh - 24px)}
  .le-modale-boite{max-height:calc(100vh - 24px)}
}

/* --- Le journal sur l'accueil ---------------------------------------------- */
.le-journal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)}
.le-art{background:var(--fond-carte);border:1px solid var(--filet);border-radius:var(--r-m);overflow:hidden}
.le-art-lien{display:flex;flex-direction:column;height:100%;color:inherit}
.le-art-visuel{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--filet-clair)}
.le-art-visuel img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-long)}
.le-art:hover .le-art-visuel img{transform:scale(1.04)}
.le-art-txt{display:flex;flex-direction:column;gap:7px;padding:18px 18px 20px;flex:1}
.le-art-cat{color:var(--terre)}
.le-art-titre{font-family:"Petrona",serif;font-size:1.12rem;line-height:1.3;font-weight:600}
.le-art:hover .le-art-titre{color:var(--terre)}
.le-art-chapo{font-size:14px;line-height:1.6;color:var(--encre-2)}
/* La date est poussée en bas : sans ça, elle flotte à des hauteurs différentes
   d'une carte à l'autre selon la longueur du chapô. */
.le-art-date{margin-top:auto;padding-top:10px;font-size:12px;color:var(--encre-2)}
@media(max-width:900px){.le-journal{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.le-journal{grid-template-columns:1fr}}
/* La teinte remplit la pastille quand la photo de la variante manque. */
.le-pastille-coul-fond{display:block;width:100%;height:100%;border-radius:inherit}
/* Et quand même la teinte est inconnue, on écrit le nom : une pastille large,
   pas deux lettres. Voir le commentaire du gabarit. */
.le-pastille-coul:has(.le-pastille-coul-texte){width:auto;min-width:44px;padding:0 10px}
.le-pastille-coul-texte{font-size:11px;letter-spacing:.02em;text-transform:none;white-space:nowrap}

/* --- Le nom du coloris au survol de la pastille ----------------------------
   Une pastille seule ne dit pas « safran minéral ». L'infobulle native du
   navigateur le dirait, mais avec une seconde de retard et sans aucun style :
   sur une fiche à neuf coloris, on abandonne avant.

   ⚠️ Les gabarits ne posent donc PLUS de `title` — sinon le navigateur
   dessinerait sa propre infobulle par-dessus la nôtre, une seconde plus tard.
   Le nom reste dit aux lecteurs d'écran par `aria-label`. */
.le-pastille-coul[data-nom]{position:relative}
.le-pastille-coul[data-nom]::after{
  content:attr(data-nom);
  position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(3px);
  z-index:5;pointer-events:none;white-space:nowrap;
  padding:5px 9px;border-radius:6px;
  background:var(--encre,#2B2721);color:#fff;
  font-family:"Inter",sans-serif;font-size:11.5px;line-height:1;letter-spacing:.01em;
  opacity:0;transition:opacity var(--t-court),transform var(--t-court)
}
/* La pointe, dessinée par une bordure : un carré pivoté déborderait du coin
   arrondi de la bulle sur certains navigateurs. */
.le-pastille-coul[data-nom]::before{
  content:"";position:absolute;bottom:calc(100% + 4px);left:50%;
  transform:translateX(-50%) translateY(3px);
  z-index:5;pointer-events:none;
  border:5px solid transparent;border-top-color:var(--encre,#2B2721);
  opacity:0;transition:opacity var(--t-court),transform var(--t-court)
}
.le-pastille-coul[data-nom]:hover::after,.le-pastille-coul[data-nom]:hover::before,
.le-pastille-coul[data-nom]:focus-visible::after,.le-pastille-coul[data-nom]:focus-visible::before{
  opacity:1;transform:translateX(-50%) translateY(0)
}
/* 🚨 Dans le carrousel, le rail défile — il rogne donc tout ce qui dépasse, et
   l'infobulle serait coupée net. On la passe SOUS la pastille, là où la carte a
   de la place. */
.le-carrousel-rail .le-pastille-coul[data-nom]::after{bottom:auto;top:calc(100% + 9px)}
.le-carrousel-rail .le-pastille-coul[data-nom]::before{
  bottom:auto;top:calc(100% + 4px);border-top-color:transparent;border-bottom-color:var(--encre,#2B2721)
}
@media(hover:none){
  /* Sur un écran tactile il n'y a pas de survol : l'infobulle resterait
     affichée après le toucher, par-dessus la carte suivante. */
  .le-pastille-coul[data-nom]::after,.le-pastille-coul[data-nom]::before{display:none}
}
/* 🚨 `overflow:hidden` sur la pastille ROGNAIT l'infobulle.
   Il était là pour arrondir la photo de variante ; le même effet s'obtient en
   arrondissant le contenu lui-même, ce qui laisse le pseudo-élément déborder.
   Sans cette ligne, l'infobulle existe dans le DOM, occupe la bonne place, et
   reste invisible — le genre de défaut qu'on cherche du mauvais côté. */
.le-pastille-coul[data-nom]{overflow:visible}
.le-pastille-coul[data-nom] img,
.le-pastille-coul[data-nom] .le-pastille-coul-fond,
.le-pastille-coul[data-nom] .le-pastille-coul-texte{border-radius:inherit;overflow:hidden}

/* --- L'encart « Entretien » de la fiche ------------------------------------ */
.le-soins{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.le-soins li{display:flex;gap:13px;align-items:flex-start}
.le-soin-picto{
  position:relative;flex:none;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:var(--fond-alt);border:1px solid var(--filet)
}
.le-soin-picto svg{width:21px;height:21px;fill:none;stroke:var(--encre-2);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
/* La température s'inscrit DANS la cuve, comme sur une étiquette de linge. */
.le-soin-deg{
  position:absolute;left:0;right:0;bottom:11px;text-align:center;
  font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:500;color:var(--encre)
}
.le-soin-txt{display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.5;color:var(--encre-2)}
.le-soin-txt b{font-size:14.5px;color:var(--encre);font-weight:500}
.le-soins-note{
  margin-top:14px;padding-top:13px;border-top:1px solid var(--filet-clair);
  font-size:13.5px;color:var(--encre-2);font-style:italic
}

/* --- La fiche d'entretien imprimable ---------------------------------------
   Elle est dans la page, jamais à l'écran. `display:none` suffit : le bloc
   n'est pas décoratif, il est destiné au papier. */
.le-fiche-soin{display:none}

@media print{
  /* Tout disparaît sauf elle. On remonte la chaîne des parents plutôt que de
     masquer élément par élément : un bloc oublié réapparaîtrait sur la feuille. */
  body > *{display:none !important}
  body{background:#fff;margin:0}
  .le-fiche-soin{
    display:block !important;
    font-family:"Inter",system-ui,sans-serif;color:#1E1B16;
    font-size:11pt;line-height:1.5;padding:14mm 16mm;max-width:190mm
  }
  .le-fiche-soin a[href]:after{content:none}

  .le-fiche-soin-tete{display:flex;justify-content:space-between;align-items:flex-start;
    gap:10mm;border-bottom:1.5pt solid #1E1B16;padding-bottom:4mm;margin-bottom:6mm}
  .le-fiche-soin-marque{font-size:8.5pt;letter-spacing:.18em;text-transform:uppercase;margin:0 0 1mm}
  .le-fiche-soin-tete h1{font-family:"Petrona",Georgia,serif;font-size:20pt;margin:0;font-weight:600}
  /* 🚨 La photo faisait une PAGE entière à l'impression. 38 mm suffisent à
     reconnaître l'article, et la fiche tient alors sur une feuille. */
  .le-fiche-soin-photo{width:38mm;height:38mm;object-fit:cover;border-radius:2mm;flex:none}

  .le-fiche-soin-nom{font-family:"Petrona",Georgia,serif;font-size:14pt;margin:0 0 4mm;font-weight:600}

  .le-fiche-soin-id{display:grid;grid-template-columns:1fr 1fr;gap:1.5mm 8mm;margin:0 0 7mm}
  .le-fiche-soin-id > div{display:flex;gap:3mm;border-bottom:.4pt solid #D6CEC0;padding-bottom:1.5mm}
  .le-fiche-soin-id dt{width:30mm;flex:none;font-size:9pt;color:#6B6459}
  .le-fiche-soin-id dd{margin:0;font-size:10pt}
  .le-fiche-soin-coloris{display:flex;align-items:center;gap:2.5mm}
  /* 🚨 Sans `print-color-adjust`, le navigateur n'imprime AUCUN fond : les
     pastilles sortaient blanches. La bordure reste, pour qu'un blanc cassé se
     distingue quand même du papier. */
  .le-fiche-soin-pastille{
    width:5mm;height:5mm;border-radius:50%;border:.4pt solid #8A8277;flex:none;
    -webkit-print-color-adjust:exact;print-color-adjust:exact
  }

  .le-fiche-soin h3{font-family:"Petrona",Georgia,serif;font-size:12pt;margin:0 0 3mm;font-weight:600}
  .le-fiche-soin-gestes{list-style:none;margin:0 0 7mm;padding:0;display:grid;gap:3.5mm}
  .le-fiche-soin-gestes li{display:flex;gap:4mm;align-items:flex-start;break-inside:avoid}
  .le-fiche-soin-gestes .pic{
    flex:none;width:9mm;height:9mm;border:.6pt solid #1E1B16;border-radius:1.5mm;
    display:grid;place-items:center;font-size:9pt;font-weight:600;
    -webkit-print-color-adjust:exact;print-color-adjust:exact
  }
  /* Les pictos sont dessinés : les glyphes Unicode (⌁, ⌂) sortaient minuscules
     et illisibles à l'impression, quand la police les avait. */
  .le-fiche-soin-gestes .pic svg{width:5.5mm;height:5.5mm;fill:none;stroke:#1E1B16;
    stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .le-fiche-soin-gestes b{font-weight:600}
  .le-fiche-soin-note{margin:0 0 7mm;font-size:10pt;color:#4A443B}
  .le-fiche-soin-contenu{margin:0 0 7mm;padding-left:5mm;font-size:10pt}

  .le-fiche-soin-pied{display:flex;justify-content:space-between;
    border-top:.4pt solid #D6CEC0;padding-top:3mm;font-size:8.5pt;color:#6B6459}

  @page{margin:0;size:A4}
}

/* =========================================================================
   AJOUT AU PANIER — fenêtre de confirmation
   Portée de calindesir.fr le 18/09/2026, habillée aux jetons de ce thème.
   Les chiffres passent en Plex Mono et en `tabular-nums` : dans une fenêtre
   qui empile prix, quantité et sous-total, des chiffres de largeurs
   différentes se lisent comme une colonne mal alignée.
   ========================================================================= */

/* ─── pastille du panier ─── */
.le-bat{animation:le-bat .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes le-bat{0%{transform:scale(1)}38%{transform:scale(1.45)}70%{transform:scale(.92)}100%{transform:scale(1)}}

/* ─── la vignette en vol ─── */
.le-vol{box-shadow:var(--ombre-l)}

/* ─── la fenêtre ─── */
html.le-fige{overflow:hidden}
.le-mp{position:fixed;inset:0;z-index:100100;display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,4vw,40px)}
.le-mp-fond{position:absolute;inset:0;background:rgba(43,39,33,.44);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  opacity:0;transition:opacity .3s ease}
.le-mp.est-ouvert .le-mp-fond{opacity:1}

.le-mp-vol{position:relative;width:min(560px,100%);max-height:min(88vh,860px);overflow:auto;
  background:var(--fond-carte);border:1px solid var(--filet-clair);border-radius:var(--r-l);
  box-shadow:var(--ombre-l);padding:clamp(20px,3.6vw,32px);
  opacity:0;transform:translateY(18px) scale(.965);
  transition:opacity .34s ease,transform .44s cubic-bezier(.16,1,.3,1)}
.le-mp.est-ouvert .le-mp-vol{opacity:1;transform:none}
.le-mp-vol:focus{outline:none}

.le-mp-x{position:absolute;top:12px;right:12px;width:34px;height:34px;display:grid;place-items:center;
  border:0;border-radius:50%;background:transparent;color:var(--encre);opacity:.55;cursor:pointer}
.le-mp-x:hover{background:var(--fond-alt);opacity:1}

/* ─── en-tête, avec la coche qui se trace ─── */
.le-mp-tete{display:flex;align-items:center;gap:.8rem;margin-bottom:1.35rem;padding-right:34px}
.le-mp-tete h2{margin:0;font-family:"Petrona",Georgia,serif;font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:500}
.le-mp-coche{flex:0 0 auto;width:38px;height:38px;display:block}
.le-mp-coche svg{width:100%;height:100%;display:block}
.le-mp-coche-c{stroke:var(--sauge);stroke-width:2.4;stroke-dasharray:145;stroke-dashoffset:145;
  animation:le-trace .52s cubic-bezier(.65,0,.45,1) .1s forwards}
.le-mp-coche-t{stroke:var(--sauge);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:36;stroke-dashoffset:36;
  animation:le-trace .3s cubic-bezier(.65,0,.45,1) .5s forwards}
@keyframes le-trace{to{stroke-dashoffset:0}}
.le-mp-bang{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:var(--terre);color:#fff;font-weight:600}
.le-mp-msg{color:var(--encre);opacity:.78;margin-bottom:1.4rem}

/* ─── l'article ajouté ─── */
.le-mp-ligne{display:grid;grid-template-columns:88px 1fr;gap:1rem;align-items:center}
.le-mp-vis{overflow:hidden;border-radius:var(--r-m);background:var(--fond-alt)}
.le-mp-vis img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.le-mp-txt{min-width:0}
.le-mp-matiere{font-family:"Inter",sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  opacity:.6;display:block;margin-bottom:.3rem}
.le-mp-nom{margin:0 0 .3rem;font-family:"Petrona",Georgia,serif;font-size:1.02rem;line-height:1.28}
.le-mp-meta{margin:0;display:flex;align-items:baseline;justify-content:space-between;gap:.8rem}
.le-mp-qte{font-size:.82rem;opacity:.62}
.le-mp-prix{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-weight:500}
.le-mp-prix del{opacity:.5;font-weight:400;margin-right:.35em}

/* ─── le franco de port ─── */
.le-mp-franco{margin-top:1.1rem}
.le-mp-franco p{margin:0 0 .45rem;font-size:.85rem;opacity:.78}
.le-mp-franco.est-atteint p{color:var(--sauge);font-weight:500;opacity:1}
.le-mp-jauge{height:6px;border-radius:99px;background:var(--fond-alt);overflow:hidden}
.le-mp-jauge i{display:block;height:100%;width:0;border-radius:inherit;
  background:linear-gradient(90deg,#C4744F,var(--terre));
  animation:le-jauge .8s cubic-bezier(.16,1,.3,1) .28s both}
.le-mp-franco.est-atteint .le-mp-jauge i{background:linear-gradient(90deg,#8CA37E,var(--sauge))}
@keyframes le-jauge{from{width:0}}

/* ─── totaux ─── */
.le-mp-tot{margin:1.2rem 0 1.3rem;padding-top:1rem;border-top:1px solid var(--filet-clair);
  display:flex;flex-direction:column;gap:.45rem}
.le-mp-tot div{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.le-mp-tot dt{opacity:.62;font-size:.86rem;margin:0}
.le-mp-tot dd{margin:0;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.le-mp-tot .le-mp-st{font-size:1.1rem;font-weight:500}

/* ─── actions ─── */
.le-mp-actes{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.le-mp-actes .le-bouton{justify-content:center;text-align:center;width:100%;cursor:pointer}
.le-mp-lien{margin:.8rem 0 0;text-align:center;font-size:.84rem}
.le-mp-lien a{opacity:.7;text-decoration:underline;text-underline-offset:3px}
.le-mp-lien a:hover{opacity:1}

/* ─── compléter la parure ─── */
.le-mp-sug{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--filet-clair)}
.le-mp-sug h3{font-family:"Inter",sans-serif;font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;opacity:.6;margin:0 0 .8rem}
.le-mp-sug ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.le-mp-sug a{display:block;color:inherit}
.le-mp-sug-vis{display:block;overflow:hidden;border-radius:var(--r-m);background:var(--fond-alt);margin-bottom:.4rem}
.le-mp-sug-vis img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.16,1,.3,1)}
.le-mp-sug a:hover .le-mp-sug-vis img{transform:scale(1.06)}
.le-mp-sug-nom{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:.76rem;line-height:1.32}
.le-mp-sug-note{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.5;margin:.1rem 0}
.le-mp-sug-prix{display:block;font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--terre)}
.le-mp-sug-prix del{display:none}

/* ─── sur téléphone, la fenêtre monte du bas ─── */
@media (max-width:640px){
  .le-mp{align-items:flex-end;padding:0}
  .le-mp-vol{width:100%;max-height:92vh;border-radius:var(--r-l) var(--r-l) 0 0;border-bottom:0;
    transform:translateY(100%)}
  .le-mp.est-ouvert .le-mp-vol{transform:none}
  /* Empilés, l'action principale vient en premier sous le pouce. */
  .le-mp-actes{grid-template-columns:1fr}
  .le-mp-actes .le-bouton{order:2}
  .le-mp-actes .le-bouton:not(.le-bouton--creux){order:1}
}

@media (prefers-reduced-motion:reduce){
  .le-mp-fond,.le-mp-vol{transition:none}
  .le-mp-coche-c,.le-mp-coche-t{animation:none;stroke-dashoffset:0}
  .le-mp-jauge i{animation:none}
  .le-bat{animation:none}
}

/* =========================================================================
   RÉASSURANCE — quatre points, trois emplacements
   Portée de calindesir.fr le 18/09/2026. Une grille auto-fit plutôt qu'un
   nombre de colonnes figé : le bloc sert en pleine largeur sur l'accueil et
   dans une colonne de 380 px sur le panier, sans second jeu de règles.
   ========================================================================= */
.le-rass{display:grid;gap:1px;background:var(--filet-clair);
  border:1px solid var(--filet);border-radius:var(--r-m);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.le-rass-i{display:flex;gap:.85rem;align-items:flex-start;
  background:var(--fond-carte);padding:18px 20px}
.le-rass-i > i{flex:none;width:36px;height:36px;border-radius:50%;background:var(--fond-alt);
  display:grid;place-items:center;color:var(--terre);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s}
.le-rass-i:hover > i{transform:scale(1.08) rotate(-6deg);background:var(--filet-clair)}
.le-rass-i b{display:block;font-size:.92rem;font-weight:600;line-height:1.3;margin-bottom:3px}
.le-rass-i > span > span{display:block;font-size:13.5px;line-height:1.5;opacity:.72}

/* Dans une colonne étroite — panier, fiche — on repasse sur une seule file. */
@media (max-width:520px){
  .le-rass{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .le-rass-i > i{transition:none}
  .le-rass-i:hover > i{transform:none}
}

/* =========================================================================
   LE CHOIX DU CADEAU, SUR LA PAGE PANIER
   Porté de calindesir.fr le 18/09/2026 avec les jetons de ce thème. La
   feuille d'origine préfixait tout par `body.cd-theme` ; ici le thème est
   seul, le préfixe ne servirait qu'à alourdir la spécificité.
   ========================================================================= */
/* ─── le choix du cadeau, sur la page panier ─── */
/* Un cadeau se remarque : bandeau bordeaux, cadre plein, et chaque carte dit
   ce qu'elle vaut. L'encart tombe après la liste du panier, loin du regard —
   c'est la couleur qui doit le rattraper, pas une animation. */
.le-cadeaux{margin:1.8rem 0 0;background:var(--fond-carte);
  border:1px solid var(--filet);border-radius:var(--r-l);overflow:hidden;
  box-shadow:0 16px 38px -22px rgba(43,39,33,.35)}

.le-cadeaux-tete{display:flex;align-items:center;gap:.85rem;
  padding:.9rem 1.15rem;background:var(--terre);color:#F4F1EA}
.le-cadeaux-icone{flex:0 0 auto;width:26px;height:26px;
  stroke:currentColor;fill:none}
.le-cadeaux-mots{flex:1 1 auto;min-width:0}
.le-cadeaux-titre{margin:0;font-family:"Petrona",Georgia,serif;font-size:1.2rem;
  font-weight:400;color:inherit;line-height:1.2}
.le-cadeaux-aide{margin:.15rem 0 0;font-size:.84rem;
  color:rgba(244,241,234,.82)}
.le-cadeaux-jauge{flex:0 0 auto;font-family:"IBM Plex Mono",monospace;font-size:.62rem;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  padding:.34rem .62rem;border:1px solid rgba(244,241,234,.45);border-radius:99px}

.le-cadeaux-liste{list-style:none;margin:0;padding:1rem;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:.8rem;
  background:var(--fond-alt)}
.le-cadeau a{display:flex;flex-direction:column;gap:.45rem;height:100%;
  padding:.7rem;background:var(--fond-carte);border:1px solid var(--filet-clair);border-radius:var(--r-m);
  text-decoration:none;color:var(--encre);transition:border-color .2s,box-shadow .2s,transform .2s}
.le-cadeau a:hover{border-color:#C4744F;transform:translateY(-2px);
  box-shadow:var(--ombre-m)}
.le-cadeau.choisi a{border-color:var(--terre);box-shadow:0 0 0 2px var(--terre)}
.le-cadeau.choisi a:hover{transform:none}

.le-cadeau-vis{position:relative;display:block}
.le-cadeau-vis img{width:100%;aspect-ratio:1/1;object-fit:contain;
  background:#fff;border-radius:6px;display:block;margin:0}
.le-cadeau-coche{position:absolute;top:.3rem;right:.3rem;
  width:23px;height:23px;display:grid;place-items:center;border-radius:50%;
  background:var(--terre);color:#fff;box-shadow:0 2px 6px rgba(43,39,33,.3)}
.le-cadeau-coche svg{width:13px;height:13px;stroke:currentColor;fill:none}

.le-cadeau-nom{font-size:.8rem;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.le-cadeau-prix{font-size:.78rem;font-weight:600;color:var(--terre)}
.le-cadeau-prix s{margin-right:.3rem;font-weight:400;color:var(--encre)}
.le-cadeau-prix .woocommerce-Price-amount{font-size:inherit;color:inherit}

.le-cadeau-etat{margin-top:auto;text-align:center;
  font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.44rem .5rem;border:1px solid var(--filet-clair);border-radius:99px;color:var(--encre);
  transition:background .2s,color .2s,border-color .2s}
.le-cadeau a:hover .le-cadeau-etat{border-color:var(--terre);color:var(--terre)}
.le-cadeau.choisi .le-cadeau-etat{background:var(--terre);border-color:var(--terre);
  color:#F4F1EA;font-weight:600}

@media (max-width:520px){
  .le-cadeaux-tete{flex-wrap:wrap;gap:.6rem}
  .le-cadeaux-liste{padding:.8rem;gap:.6rem;
    grid-template-columns:repeat(auto-fill,minmax(138px,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .le-cadeau a:hover{transform:none}
}

/* =========================================================================
   OFFRES EN COURS — encart de fiche, liste et paliers
   Portées de calindesir.fr le 18/09/2026, aux jetons de ce thème.
   ⛔ Les règles de grille et de collant de l'original ne sont PAS reprises :
   elles existaient pour une galerie collante et une grille à trois enfants
   qui ne sont pas celles d'ici. L'encart est simplement posé sous la galerie
   par le gabarit.
   ⚠️ Rien n'est accroché aux LISTES : c'est là que l'extension remplacée
   coûtait cher, en réévaluant ses règles pour chaque vignette.
   ========================================================================= */

.le-offres{list-style:none;margin:1.2rem 0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.le-offres li{position:relative;margin:0;padding:.72rem .95rem .72rem 2.6rem;
  background:var(--fond-alt);border:1px solid var(--filet);border-radius:var(--r-m);
  font-size:.94rem;line-height:1.45}
.le-offres li::before{content:"✦";position:absolute;left:.95rem;top:.66rem;
  color:var(--terre);font-size:.95rem;line-height:1.45}
.le-offres li strong{color:var(--terre-fonce);font-weight:600}

.le-paliers{width:100%;margin:.55rem 0 0;border-collapse:collapse;
  font-family:"IBM Plex Mono",monospace;font-size:.88rem;font-variant-numeric:tabular-nums}
.le-paliers th,.le-paliers td{padding:.34rem .7rem;text-align:left;border-bottom:1px solid var(--filet-clair)}
.le-paliers tr:last-child th,.le-paliers tr:last-child td{border-bottom:0}
.le-paliers th{font-weight:400;opacity:.75}
.le-paliers td{text-align:right;font-weight:600;color:var(--terre-fonce)}

/* ═══ Encart d'offre sous la galerie ═══
   Bordure pointillée et pastille détachée : l'encart doit se voir sans crier,
   à côté d'une fiche produit volontairement sobre. */
.le-offre-encart{display:flex;align-items:center;gap:1rem;
  margin:1.1rem 0 0;padding:1rem 1.15rem;
  background:var(--fond-alt);border:1px dashed var(--filet);border-radius:var(--r-l)}
.le-offre-icone{flex:none;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:var(--fond-carte);color:var(--terre);
  border:1px solid var(--filet)}
.le-offre-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2rem}
.le-offre-titre{font-family:"Petrona",Georgia,serif;font-size:1.05rem;font-weight:500;line-height:1.2}
.le-offre-texte{margin:0;font-size:.84rem;line-height:1.45;opacity:.78}
.le-offre-texte strong{color:var(--terre-fonce);font-weight:600;opacity:1}
.le-offre-badge{flex:none;max-width:11rem;text-align:center;
  padding:.55rem .8rem;border:1px dashed #C4744F;border-radius:var(--r-m);
  color:var(--terre);font-size:.78rem;font-weight:600;line-height:1.3;background:var(--fond-carte)}

@media (max-width:700px){
  .le-offre-encart{flex-wrap:wrap;gap:.75rem}
  .le-offre-badge{max-width:none;width:100%}
}

/* =========================================================================
   VISIONNEUSE — grande vue + vignettes, pour les fiches SANS vidéo
   Dès qu'un produit reçoit une vidéo, il repasse sur `.le-galerie` en grille
   (voir content-single-product.php) : la vidéo a besoin d'une place au milieu
   des vues fixes, pas d'une case dans un rail.

   🚨 Le format de la scène est FORCÉ en 1/1 avec `object-fit:contain`, à
   rebours de la grille voisine qui, elle, ne force rien. Raison : dans un rail
   horizontal, des vues de hauteurs différentes feraient sauter la page à
   chaque changement. Le fond est BLANC, pas sable : les détourés du
   fournisseur sont sur blanc, et une bande sable se verrait au-dessus et en
   dessous d'une photo d'ambiance.
   ========================================================================= */
.le-visio{display:block}

.le-visio-scene{position:relative;border-radius:var(--r-m);overflow:hidden;background:var(--blanc)}
.le-visio-rail{
  list-style:none;margin:0;padding:0;
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;
}
.le-visio-rail::-webkit-scrollbar{display:none}
.le-visio-vue{scroll-snap-align:start;margin:0}
.le-visio-vue img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block;cursor:zoom-in}

.le-visio-fleche{
  position:absolute;top:50%;translate:0 -50%;z-index:2;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--filet);
  background:var(--fond-carte);color:var(--encre);cursor:pointer;
  display:grid;place-items:center;font-size:19px;line-height:1;
  box-shadow:var(--ombre-m);transition:border-color .2s,opacity .2s;
}
.le-visio-fleche:hover{border-color:var(--terre)}
.le-visio-fleche[disabled]{opacity:.28;cursor:default;box-shadow:none}
.le-visio-fleche--prec{left:12px}
.le-visio-fleche--suiv{right:12px}

/* Les vignettes : une file qui défile si les vues sont nombreuses. */
.le-visio-vignettes{
  list-style:none;margin:10px 0 0;padding:0;
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
}
.le-visio-vignettes::-webkit-scrollbar{display:none}
.le-visio-vignettes li{flex:0 0 auto}
.le-visio-vignettes button{
  display:block;padding:0;width:74px;height:74px;cursor:pointer;
  border:1px solid var(--filet-clair);border-radius:var(--r-s);
  background:var(--blanc);overflow:hidden;transition:border-color .2s;
}
.le-visio-vignettes button:hover{border-color:var(--filet)}
/* ⚠️ `aria-current` porte l'état, pas une classe : l'information est la même
   pour l'œil et pour un lecteur d'écran, elle n'a pas à être écrite deux fois. */
.le-visio-vignettes button[aria-current="true"]{border-color:var(--encre)}
.le-visio-vignettes img{width:100%;height:100%;object-fit:contain;display:block}

@media(max-width:600px){
  .le-visio-fleche{width:36px;height:36px}
  .le-visio-vignettes button{width:60px;height:60px}
}
@media(prefers-reduced-motion:reduce){
  .le-visio-rail{scroll-behavior:auto}
}

/* =========================================================================
   LE TIROIR DE RECHERCHE
   Replié sous l'en-tête, il prend toute la largeur : les suggestions du
   module ont besoin de place pour montrer une vignette, un nom sur deux
   lignes et un prix sans que rien ne se chevauche.
   ⚠️ `hidden` est un attribut : toute règle `display:` écrite plus bas
   l'écraserait. D'où le `!important`, qui n'est ici ni un aveu ni un
   raccourci — c'est la seule façon de garantir qu'un élément caché le reste.
   ========================================================================= */
.le-chercher{border-top:1px solid var(--filet-clair);background:var(--fond-carte);
  padding-block:16px;animation:le-deplie .22s ease}
.le-chercher[hidden]{display:none!important}
@keyframes le-deplie{from{opacity:0;transform:translateY(-6px)}}

.le-recherche{display:flex;align-items:center;gap:10px;position:relative}
.le-chercher-icone{flex:none;width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.7;opacity:.5}
.le-chercher input[type=search]{
  flex:1;min-width:0;border:0;background:none;font-size:1.05rem;font-family:inherit;
  color:var(--encre);padding:10px 0}
.le-chercher input[type=search]:focus{outline:none}
.le-chercher input[type=search]::placeholder{opacity:.45}
.le-chercher-x{flex:none;width:34px;height:34px;display:grid;place-items:center;border:0;
  background:none;cursor:pointer;color:var(--encre);opacity:.5;border-radius:50%}
.le-chercher-x:hover{opacity:1;background:var(--fond-alt)}
.le-chercher-x svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}

/* La boîte de suggestions est posée par le module : on l'aligne sur le champ,
   pas sur le formulaire entier, pour qu'elle ne parte pas sous le bouton. */
.le-chercher .le-re-boite{top:calc(100% + 10px)}

@media(max-width:700px){
  .le-recherche .le-bouton{display:none}
  .le-chercher input[type=search]{font-size:1rem}
}

/* ─── l'icône du compte quand quelqu'un est connecté ─── */
/* ⚠️ Même technique que `.le-pastille` du panier : `position:absolute` SANS
   décalage, puis une translation. `.le-icone` n'est pas positionnée, et lui
   ajouter `position:relative` changerait le bloc de référence de la pastille
   du panier — qui, elle, fonctionne aujourd'hui. On ne touche pas à ce qui
   marche pour un point de 7 px. */
.le-icone.est-connecte::after{content:"";position:absolute;
  transform:translate(11px,10px);
  width:7px;height:7px;border-radius:50%;background:var(--sauge);
  border:1.5px solid var(--fond)}

/* =========================================================================
   PAGE PANIER
   Portée de calindesir.fr le 18/09/2026, aux jetons de ce thème, en
   remplacement du bloc WooCommerce.
   ⚠️ Le préfixe `body.cd-theme` de l'original est retiré : il n'existe pas
   ici, et l'y laisser aurait rendu toute la feuille inerte — c'est exactement
   ce qui était arrivé aux encarts publicitaires le matin même.
   ========================================================================= */

body.le-theme.woocommerce-cart .le-pan{display:grid;gap:clamp(18px,2.4vw,30px);align-items:start;
  grid-template-columns:1fr;margin-bottom:2.6rem}
@media (min-width:960px){
  body.le-theme.woocommerce-cart .le-pan{grid-template-columns:minmax(0,1fr) 350px}
  body.le-theme.woocommerce-cart .le-pan-cote{position:sticky;top:1.2rem}
}
.le-pan-corps{min-width:0;display:flex;flex-direction:column;gap:clamp(16px,2vw,24px)}
.le-pan-cote{display:flex;flex-direction:column;gap:.9rem}
.le-pan.est-occupe{opacity:.62;pointer-events:none;transition:opacity .18s ease}

/* ─── jauge de franco ─── */
body.le-theme .le-franco-jauge{background:var(--fond-carte);border:1px solid var(--filet-clair);border-radius:var(--r-l);
  padding:1rem 1.15rem;margin:0}
body.le-theme .le-franco-jauge p{margin:0 0 .55rem;font-size:.9rem;color:var(--encre)}
body.le-theme .le-franco-jauge.est-acquis p{color:var(--sauge);font-weight:500}
body.le-theme .le-franco-jauge .piste{height:7px;border-radius:99px;background:var(--fond-alt);overflow:hidden}
body.le-theme .le-franco-jauge .piste i{display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,#C4744F,var(--terre));transition:width .5s cubic-bezier(.16,1,.3,1)}
body.le-theme .le-franco-jauge.est-acquis .piste i{background:linear-gradient(90deg,#5AA98A,var(--sauge))}

/* ─── avis ─── */
.le-pan-avis{background:var(--alerte-f);border:1px solid rgba(176,85,42,.28);border-radius:var(--r-m);
  padding:.75rem 1rem;color:#B0722A;font-size:.87rem}
.le-pan-avis p{margin:0}
.le-pan-avis p+p{margin-top:.35rem}

/* ─── liste des articles ─── */
body.le-theme .le-pan-liste{list-style:none;margin:0;padding:0;background:var(--fond-carte);
  border:1px solid var(--filet-clair);border-radius:var(--r-l);overflow:hidden}
.le-pan-art{display:grid;gap:.9rem 1.1rem;padding:1.1rem;align-items:center;
  grid-template-columns:84px minmax(0,1fr) auto auto;
  transition:opacity .24s ease,transform .24s ease}
.le-pan-art+.le-pan-art{border-top:1px solid var(--filet-clair)}
.le-pan-art.est-partant{opacity:0;transform:translateX(-14px)}
.le-pan-vis{grid-row:span 1}
body.le-theme .le-pan-vis img{width:84px;height:84px;object-fit:cover;border-radius:var(--r-m);background:var(--fond-alt)}
.le-pan-info{min-width:0}
.le-pan-marque{display:block;font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--terre);margin-bottom:.2rem}
body.le-theme a.le-pan-nom,body.le-theme span.le-pan-nom{display:block;font-family:"Petrona",Georgia,serif;
  font-size:1.02rem;line-height:1.3;color:var(--encre);margin-bottom:.22rem}
body.le-theme a.le-pan-nom:hover{color:var(--terre)}
.le-pan-unite{margin:0 0 .5rem;font-size:.8rem;color:var(--encre);
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.le-pan-unite span{font-family:var(--corps)}
.le-pan-unite del{opacity:.55;margin-right:.3em}
.le-pan-outils{display:flex;align-items:center;gap:.35rem}
body.le-theme .le-pan-outils .le-coeur-achat,
.le-pan-retire{position:static;width:32px;height:32px;display:grid;place-items:center;
  background:var(--fond);border:1px solid var(--filet-clair);border-radius:99px;color:var(--encre);
  cursor:pointer;opacity:1;transform:none;transition:background .18s ease,color .18s ease,border-color .18s ease}
body.le-theme .le-pan-outils .le-coeur-achat:hover{background:var(--fond-alt);color:var(--terre);border-color:var(--filet)}
.le-pan-retire:hover{background:var(--alerte-f);color:#B0722A;border-color:rgba(176,85,42,.3)}
.le-pan-retire-lien{font-size:.8rem}

.le-pan-qte{display:inline-flex;align-items:center;border:1px solid var(--filet-clair);
  border-radius:99px;background:var(--fond);overflow:hidden}
.le-pan-pas{width:34px;height:34px;border:0;background:transparent;color:var(--encre);
  font-size:1.02rem;line-height:1;cursor:pointer;transition:background .16s ease,color .16s ease}
.le-pan-pas:hover{background:var(--fond-alt);color:var(--terre)}
body.le-theme .le-pan-champ{width:44px;height:34px;border:0;background:transparent;text-align:center;
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:.9rem;color:var(--encre);padding:0;
  -moz-appearance:textfield}
body.le-theme .le-pan-champ::-webkit-outer-spin-button,
body.le-theme .le-pan-champ::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.le-pan-un{padding:0 .9rem;font-family:"IBM Plex Mono",monospace}

.le-pan-tot{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:1rem;
  font-weight:500;color:var(--encre);text-align:right;min-width:82px}
.le-pan-tot del{display:block;font-size:.78rem;font-weight:400;opacity:.5}

@media (max-width:720px){
  .le-pan-art{grid-template-columns:72px minmax(0,1fr);row-gap:.7rem}
  body.le-theme .le-pan-vis img{width:72px;height:72px}
  .le-pan-qte{grid-column:2;justify-self:start}
  .le-pan-tot{grid-column:2;text-align:left;min-width:0}
}

/* ─── pied du formulaire ─── */
.le-pan-pied{display:flex;align-items:center;justify-content:flex-end;gap:.8rem;
  padding:.9rem .2rem 0;flex-wrap:wrap}
.le-pan-vider{display:inline-flex;align-items:center;gap:.4rem;background:none;border:0;
  color:var(--encre);font-size:.83rem;cursor:pointer;padding:.3rem;transition:color .18s ease}
.le-pan-vider:hover{color:#B0722A}
/* Le bouton natif ne sert qu'en l'absence de script : les pas sont instantanés. */
html.js .le-pan-maj{display:none}
.le-pan-maj{background:var(--encre);color:#fff;border:0;border-radius:99px;
  padding:.6rem 1.2rem;font-size:.85rem;cursor:pointer}

/* ─── récapitulatif ─── */
.le-pan-carte{background:var(--fond-carte);border:1px solid var(--filet-clair);border-radius:var(--r-l);padding:1.15rem}
.le-pan-st{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.le-pan-st h2{margin:0;font-size:1.12rem}
.le-pan-st p{margin:.1rem 0 0;font-size:.76rem;color:var(--encre)}
.le-pan-st-val{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:1.22rem;color:var(--encre)}

body.le-theme .le-pan-tete .checkout-button,
body.le-theme .le-pan-tete .wc-proceed-to-checkout .button{width:100%;justify-content:center;
  background:var(--terre);border-color:var(--terre);color:#fff;font-size:.98rem;padding:.85rem 1.2rem}
body.le-theme .le-pan-tete .checkout-button:hover{background:var(--terre-fonce);border-color:var(--terre-fonce)}
body.le-theme .le-pan-tete .wc-proceed-to-checkout{padding:0;margin:0}

.le-pan-moyens{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:.9rem 0 0;padding:0}
.le-pan-moyens li{font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--encre);background:var(--fond);border:1px solid var(--filet-clair);border-radius:var(--r-m);padding:.3rem .55rem}
.le-pan-releve{display:flex;align-items:center;gap:.45rem;margin:.85rem 0 0;
  font-size:.78rem;color:var(--encre);line-height:1.35}
.le-pan-releve svg{flex:0 0 auto;color:var(--terre)}

/* ─── code promo ─── */
.le-pan-promo{padding:0}
.le-pan-promo-b{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  background:none;border:0;padding:1rem 1.15rem;cursor:pointer;font-size:.92rem;color:var(--encre);
  font-family:var(--corps);text-align:left}
.le-pan-promo-b i{flex:0 0 auto;width:16px;height:16px;position:relative}
.le-pan-promo-b i::before,.le-pan-promo-b i::after{content:"";position:absolute;background:var(--terre);
  border-radius:2px;transition:transform .24s ease}
.le-pan-promo-b i::before{left:0;right:0;top:7px;height:2px}
.le-pan-promo-b i::after{top:0;bottom:0;left:7px;width:2px}
.le-pan-promo-b[aria-expanded="true"] i::after{transform:rotate(90deg)}
.le-pan-promo-f{display:flex;gap:.5rem;padding:0 1.15rem 1.15rem}
/* display:flex l'emporte sur l'attribut hidden : sans cela le formulaire
   s'affiche déplié dès le chargement. */
.le-pan-promo-f[hidden]{display:none}
body.le-theme .le-pan-promo-f .input-text{flex:1;min-width:0;padding:.6rem .8rem;font-size:.88rem;
  border:1px solid var(--filet-clair);border-radius:var(--r-m);background:var(--fond);color:var(--encre)}
body.le-theme .le-pan-promo-f .le-btn{padding:.6rem 1rem;font-size:.85rem}

/* ─── détail ─── */
.le-pan-detail h2{font-size:1.05rem;margin:0 0 .85rem}
.le-pan-lignes{margin:0;display:flex;flex-direction:column;gap:.5rem}
.le-pan-lignes div{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.le-pan-lignes dt{margin:0;color:var(--encre);font-size:.86rem}
.le-pan-lignes dd{margin:0;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:.88rem;color:var(--encre)}
.le-pan-lignes .est-remise dd{color:var(--sauge)}
.le-pan-lignes .est-offert{color:var(--sauge);font-weight:500}
.le-pan-lignes .est-plus-tard{font-family:var(--corps);color:var(--encre);font-size:.82rem}
.le-pan-total{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--filet-clair)}
.le-pan-total span{font-size:.95rem;color:var(--encre)}
.le-pan-total strong{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:1.24rem;font-weight:500;color:var(--encre)}
.le-pan-total .woocommerce-Price-amount{font-weight:500}
.le-pan-note{margin:.75rem 0 0;font-size:.76rem;color:var(--encre);line-height:1.45}

/* ─── confiance ─── */
.le-pan-conf{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
body.le-theme a.le-pan-conf-i{display:flex;gap:.7rem;align-items:flex-start;background:var(--fond-carte);
  border:1px solid var(--filet-clair);border-radius:var(--r-l);padding:.95rem;color:var(--encre);
  transition:border-color .2s ease,transform .2s ease}
body.le-theme a.le-pan-conf-i:hover{border-color:var(--filet);transform:translateY(-2px);color:var(--encre)}
.le-pan-conf-i svg{flex:0 0 auto;color:var(--terre);margin-top:1px}
.le-pan-conf-i b{display:block;color:var(--encre);font-weight:500;font-size:.88rem;margin-bottom:.15rem}
.le-pan-conf-i span{font-size:.78rem;line-height:1.45;display:block}

/* ─── livraison ─── */
.le-pan-liv{background:var(--fond-carte);border:1px solid var(--filet-clair);border-radius:var(--r-l);padding:1.2rem}
.le-pan-liv h2{font-size:1.08rem;margin:0 0 .5rem}
.le-pan-liv-intro{margin:0 0 1rem;font-size:.86rem;color:var(--encre);max-width:70ch}
.le-pan-liv-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.le-pan-liv-l li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .7rem;
  padding-bottom:.6rem;border-bottom:1px dashed var(--filet-clair);font-size:.84rem}
.le-pan-liv-l li:last-child{border-bottom:0;padding-bottom:0}
.le-pan-liv-l b{font-weight:500;color:var(--encre);min-width:150px}
.le-pan-liv-l span{color:var(--encre)}
.le-pan-liv-l i{font-family:"IBM Plex Mono",monospace;font-style:normal;font-variant-numeric:tabular-nums;color:var(--encre)}
.le-pan-liv-l em{font-style:normal;font-size:.78rem;color:var(--sauge);
  background:var(--ok-f);border-radius:99px;padding:.12rem .5rem}
.le-pan-liv-pied{margin:1rem 0 0;font-size:.83rem}

/* ─── recommandations ─── */
.le-pan-reco{margin:2.4rem 0 1rem}
.le-pan-reco h2{font-size:clamp(1.2rem,2.4vw,1.6rem);margin-bottom:1rem}
/* 🚨 La règle portée de Calindesir posait SIX colonnes — son catalogue en
   affiche six ici. Le gabarit, lui, ne retient que QUATRE suggestions : les
   cartes occupaient donc quatre sixièmes de la largeur et laissaient un tiers
   de vide à droite. Et ce n'était pas visible dans le HTML : la classe
   `le-produits--4` était bien posée sur la liste, mais `body.le-theme
   .le-pan-reco ul.products` (0,3,1) l'écrasait (0,2,1).

   On aligne la grille sur ce que le gabarit produit réellement. Le jour où le
   nombre de suggestions change, c'est ICI qu'il faut revenir. */
body.le-theme .le-pan-reco ul.products{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){body.le-theme .le-pan-reco ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){body.le-theme .le-pan-reco ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Le conteneur des écrans qui posent leur propre mise en page — panier,
   commande, compte. Il n'impose rien : c'est tout l'intérêt. Voir page.php. */
.le-large{width:100%}
/* ⚠️ Le nom de l'article doit pouvoir rétrécir : sans `min-width:0`, une
   colonne de grille refuse de passer sous la largeur de son plus long mot. */
.le-pan-info{min-width:0}

/* ─── le bouton de commande, repris à WooCommerce ───
   🚨 Il sortait VIOLET (#7f54b3). La règle du panier existait pourtant, mais
   `.woocommerce a.button.alt` de WooCommerce a la même spécificité (0,3,1) et
   sa feuille est chargée APRÈS la nôtre : à égalité, c'est l'ordre qui tranche,
   et l'ordre ne nous appartient pas. On monte donc d'un cran en nommant les
   classes que le bouton porte réellement — `checkout-button button alt`. */
body.le-theme .le-pan-tete a.checkout-button.button.alt,
body.le-theme .le-pan-tete .wc-proceed-to-checkout a.button.alt{
  width:100%;justify-content:center;display:flex;align-items:center;
  background:var(--encre);border-color:var(--encre);color:var(--fond);
  font-family:"Inter",sans-serif;font-size:12px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;padding:.95rem 1.2rem;border-radius:100px;
  transition:background .2s,border-color .2s}
body.le-theme .le-pan-tete a.checkout-button.button.alt:hover,
body.le-theme .le-pan-tete .wc-proceed-to-checkout a.button.alt:hover{
  background:var(--terre);border-color:var(--terre);color:#fff}

/* Dans la colonne du panier, la réassurance tient sur deux rangées de deux :
   quatre cases sur une seule ligne y seraient illisibles, trois plus un
   laisseraient un orphelin. */
.le-pan-corps .le-rass{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:700px){.le-pan-corps .le-rass{grid-template-columns:1fr}}

/* =========================================================================
   ESPACE CLIENT — connexion, création de compte, tableau de bord
   Une seule page du site où le client peut se tromper de formulaire et
   conclure que son compte n'existe pas : les deux colonnes disent donc à qui
   elles parlent avant de demander quoi que ce soit.
   ========================================================================= */
.le-cnx{display:grid;gap:clamp(18px,2.4vw,30px);align-items:start;
  grid-template-columns:1fr;max-width:940px;margin:0 auto}
@media(min-width:820px){
  .le-cnx{grid-template-columns:1fr 1fr}
  .le-cnx--seule{grid-template-columns:minmax(0,460px);justify-content:center}
}
.le-cnx-carte{background:var(--fond-carte);border:1px solid var(--filet-clair);
  border-radius:var(--r-l);padding:clamp(20px,3vw,30px)}
.le-cnx-carte--neuve{background:var(--fond-alt);border-color:var(--filet)}
.le-cnx-carte h2{font-size:clamp(1.12rem,2vw,1.4rem);margin:0 0 4px}
.le-cnx-aide{margin:0 0 18px;font-size:14px;opacity:.72;line-height:1.5}
.le-cnx-note{margin:12px 0 0;font-size:12.5px;opacity:.66;line-height:1.5}

/* Les champs : mêmes règles pour la connexion, la commande et les adresses.
   ⚠️ On vise les classes de WooCommerce, pas les nôtres : ce sont elles qu'il
   pose sur les écrans qu'on ne réécrit pas. */
.woocommerce-account .woocommerce-form-row,
.woocommerce form .form-row{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;padding:0}
.woocommerce-account label,
.woocommerce form .form-row label{font-family:"Inter",sans-serif;font-size:12px;font-weight:500;
  letter-spacing:.04em;opacity:.78}
.woocommerce-account .required,
.woocommerce form .required{color:var(--terre);text-decoration:none;border:0}
.woocommerce-account .input-text,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
  width:100%;padding:12px 14px;font-family:inherit;font-size:15px;color:var(--encre);
  background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r-m);
  transition:border-color .18s,box-shadow .18s}
.woocommerce-account .input-text:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{
  outline:none;border-color:var(--encre);box-shadow:0 0 0 3px rgba(43,39,33,.07)}

.le-cnx-ligne{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px;margin:2px 0 18px}
.le-cnx-souvenir{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer}
.le-cnx-souvenir input{width:16px;height:16px;accent-color:var(--encre)}
.le-cnx-oubli{font-size:13px;opacity:.7;text-decoration:underline;text-underline-offset:3px}
.le-cnx-oubli:hover{opacity:1}
.le-bouton--bloc{width:100%;justify-content:center;text-align:center}

/* ─── le tableau de bord, une fois connecté ─── */
.woocommerce-account .woocommerce-MyAccount-navigation{margin:0 0 26px}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px}
.woocommerce-account .woocommerce-MyAccount-navigation a{display:inline-flex;align-items:center;
  padding:.5rem .95rem;border:1px solid var(--filet-clair);border-radius:100px;
  font-family:"Inter",sans-serif;font-size:13px;background:var(--fond-carte);
  transition:border-color .2s,background .2s}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover{border-color:var(--filet)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  background:var(--encre);border-color:var(--encre);color:var(--fond)}
@media(min-width:900px){
  .woocommerce-account .woocommerce-MyAccount-content,
  .woocommerce-account .woocommerce-MyAccount-navigation{width:auto;float:none}
}

/* Les messages de WooCommerce, aux couleurs de la maison plutôt qu'aux siennes. */
.woocommerce-error,.woocommerce-info,.woocommerce-message{
  border:1px solid var(--filet);border-top:3px solid var(--encre);
  background:var(--fond-carte);border-radius:var(--r-m);
  padding:14px 18px;margin:0 0 20px;list-style:none;font-size:14.5px}
.woocommerce-error{border-top-color:var(--terre)}
.woocommerce-message{border-top-color:var(--sauge)}
.woocommerce-error::before,.woocommerce-info::before,.woocommerce-message::before{display:none}

/* ─── le tableau de bord du compte ─── */
.le-tb-tete{display:flex;flex-wrap:wrap;gap:20px 34px;align-items:flex-end;justify-content:space-between;
  padding-bottom:22px;border-bottom:1px solid var(--filet-clair);margin-bottom:24px}
.le-tb-tete h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:2px 0 6px}
.le-tb-intro{margin:0;max-width:46ch;font-size:14.5px;line-height:1.6;opacity:.75}
.le-tb-chiffres{display:flex;gap:26px}
.le-tb-chiffres b{display:block;font-family:"IBM Plex Mono",monospace;font-size:1.22rem;
  font-variant-numeric:tabular-nums;line-height:1.2}
.le-tb-chiffres span{font-family:"Inter",sans-serif;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;opacity:.6}

.le-tb-commande{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  background:var(--fond-carte);border:1px solid var(--filet-clair);border-radius:var(--r-m);
  padding:18px 20px;margin-bottom:24px}
.le-tb-commande h3{font-size:1.1rem;margin:2px 0 4px}
.le-tb-commande-meta{margin:0;font-size:13.5px;opacity:.72;font-variant-numeric:tabular-nums}
.le-tb-statut{font-family:"Inter",sans-serif;font-size:11px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;padding:.35rem .8rem;border-radius:100px;
  border:1px solid var(--filet);background:var(--fond-alt)}
.le-tb-statut--completed{border-color:var(--sauge);color:var(--sauge)}
.le-tb-statut--processing{border-color:var(--terre);color:var(--terre)}

.le-tb-tuiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.le-tb-tuile{display:flex;flex-direction:column;gap:3px;padding:18px 20px;color:inherit;
  background:var(--fond-carte);border:1px solid var(--filet-clair);border-radius:var(--r-m);
  transition:border-color .2s,transform .2s}
.le-tb-tuile:hover{border-color:var(--filet);transform:translateY(-2px)}
.le-tb-tuile b{font-family:"Petrona",Georgia,serif;font-size:1.05rem;font-weight:500}
.le-tb-tuile span{font-size:13px;opacity:.68}
.le-tb-vide{margin:24px 0 0}
.le-tb-sortie{margin:26px 0 0;font-size:13.5px}
.le-tb-sortie a{opacity:.65;text-decoration:underline;text-underline-offset:3px}
.le-tb-sortie a:hover{opacity:1}

/* =========================================================================
   PAGE COMMANDE
   Deux colonnes posées par le gabarit (`woocommerce/checkout/form-checkout.php`),
   pas par des flottants qu'il faudrait ensuite défaire. La colonne de droite
   est collante : sur un formulaire de dix champs, un récapitulatif qui
   disparaît au premier défilement laisse payer sans revoir ce qu'on paye.
   ========================================================================= */
.le-cmd{display:grid;gap:clamp(18px,2.6vw,34px);align-items:start;grid-template-columns:1fr}
@media(min-width:980px){
  .le-cmd{grid-template-columns:minmax(0,1fr) 380px}
  .le-cmd-cote{position:sticky;top:96px}
}
.le-cmd-corps{min-width:0}

/* ⚠️ WooCommerce fait flotter `col-1` et `col-2` à 47 %. On annule : la grille
   au-dessus s'en charge, et deux flottants dans une colonne de 600 px donnent
   deux colonnes de 280 px où « Adresse de facturation » tient sur trois lignes. */
.le-cmd .col2-set .col-1,
.le-cmd .col2-set .col-2{width:100%;float:none;margin:0}
.le-cmd-champs{display:flex;flex-direction:column;gap:22px}
.le-cmd-champs h3{font-family:"Petrona",Georgia,serif;font-size:1.18rem;font-weight:500;
  margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--filet-clair)}
.le-cmd-champs > div{background:var(--fond-carte);border:1px solid var(--filet-clair);
  border-radius:var(--r-l);padding:clamp(18px,2.4vw,26px)}
/* Une colonne d'expédition vide ne doit pas dessiner une carte fantôme. */
.le-cmd-champs > div:empty{display:none}

/* Les champs suivent les règles de l'espace client : un seul jeu pour tous les
   formulaires du site. Il reste les cas propres à la commande. */
/* 🚨 Sixième récidive du même piège. WooCommerce impose
   `.woocommerce form .form-row-first{width:47%}` : une spécificité de (0,2,1)
   qui bat `.le-cmd .form-row-first` (0,2,0). Prénom et Nom occupaient 169 px
   dans une colonne de 359, et le bord droit de « Nom » ne tombait pas sur
   celui des autres champs.
   Le préfixe `body.le-theme` porte la règle à (0,3,1) et reprend la main.
   Voir docs/connaissances/feedback_woocommerce_gagne_par_ordre_de_chargement.md */
body.le-theme .le-cmd .form-row-first,
body.le-theme .le-cmd .form-row-last{width:100%;float:none}
@media(min-width:560px){
  .le-cmd .col-1 > .woocommerce-billing-fields__field-wrapper,
  .le-cmd .col-2 > .woocommerce-shipping-fields__field-wrapper{
    display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
  .le-cmd .form-row-wide{grid-column:1/-1}
}
.le-cmd abbr.required{border:0;text-decoration:none;color:var(--terre)}
.le-cmd .woocommerce-input-wrapper{width:100%}
.le-cmd .select2-container .select2-selection--single{
  height:auto;padding:10px 14px;border:1px solid var(--filet);border-radius:var(--r-m);
  background:var(--blanc)}
.le-cmd .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:1.4;padding:0;color:var(--encre)}
.le-cmd .select2-container--default .select2-selection--single .select2-selection__arrow{top:8px;right:8px}

/* ─── le récapitulatif ─── */
.le-cmd-cote h2{font-family:"Petrona",Georgia,serif;font-size:1.3rem;font-weight:500;margin:0 0 14px}
.le-cmd-cote #order_review{background:var(--fond-carte);border:1px solid var(--filet-clair);
  border-radius:var(--r-l);overflow:hidden}
.le-cmd-cote table.shop_table{width:100%;border:0;border-collapse:collapse;margin:0;
  font-size:14.5px;border-radius:0}
.le-cmd-cote table.shop_table th,
.le-cmd-cote table.shop_table td{padding:11px 18px;border:0;
  border-bottom:1px solid var(--filet-clair);text-align:left;font-weight:400}
.le-cmd-cote table.shop_table thead th{font-family:"Inter",sans-serif;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;opacity:.6;padding-block:14px}
.le-cmd-cote table.shop_table td:last-child,
.le-cmd-cote table.shop_table th:last-child{text-align:right;
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.le-cmd-cote .product-name{line-height:1.35}
.le-cmd-cote .product-quantity{opacity:.6}
.le-cmd-cote tfoot .order-total th,
.le-cmd-cote tfoot .order-total td{border-bottom:0;padding-block:16px;font-size:1.05rem}
.le-cmd-cote tfoot .order-total td{font-weight:600}
.le-cmd-cote .includes_tax{display:block;font-size:11.5px;opacity:.6;font-weight:400}

/* ─── le paiement ─── */
.le-cmd #payment{background:var(--fond-alt);border-top:1px solid var(--filet-clair);
  border-radius:0;padding:0}
.le-cmd #payment ul.payment_methods{list-style:none;margin:0;padding:16px 18px;border:0;
  display:flex;flex-direction:column;gap:10px}
.le-cmd #payment ul.payment_methods li{list-style:none;margin:0}
.le-cmd #payment ul.payment_methods label{display:inline-flex;align-items:center;gap:8px;
  font-size:14.5px;font-weight:500;letter-spacing:0;opacity:1;cursor:pointer}
.le-cmd #payment .payment_box{background:var(--fond-carte);border:1px solid var(--filet-clair);
  border-radius:var(--r-m);margin:8px 0 0;padding:12px 14px;font-size:13.5px;line-height:1.5}
.le-cmd #payment .payment_box::before{display:none}
.le-cmd #payment div.form-row.place-order{padding:16px 18px;margin:0;border-top:1px solid var(--filet-clair)}

/* 🚨 Même remarque que pour le bouton du panier : la règle de WooCommerce a la
   même spécificité que la nôtre et sa feuille arrive après. On nomme donc les
   classes que le bouton porte réellement. */
.le-cmd #place_order,
body.le-theme .le-cmd button#place_order.button.alt{
  width:100%;background:var(--encre);border-color:var(--encre);color:var(--fond);
  font-family:"Inter",sans-serif;font-size:12px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;padding:1rem 1.2rem;border-radius:100px;
  transition:background .2s,border-color .2s}
body.le-theme .le-cmd button#place_order.button.alt:hover{
  background:var(--terre);border-color:var(--terre);color:#fff}
.le-cmd .woocommerce-terms-and-conditions-wrapper{padding:0 18px 4px;font-size:13px}

/* La réassurance et les moyens de paiement, posés sous le bouton par
   functions.php, respirent un peu. */
.le-cmd-cote .le-rass,.le-cmd-cote .le-paiements{margin-top:18px}

/* ─── le bandeau « vous avez un code promo » ─── */
.le-cmd .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-form-login-toggle{margin-bottom:18px}
.le-cmd form.checkout_coupon,
.woocommerce-checkout form.woocommerce-form-login{background:var(--fond-carte);
  border:1px solid var(--filet-clair);border-radius:var(--r-l);padding:20px;margin:0 0 18px}

/* ─── les messages de WooCommerce, en dernier mot ───
   🚨 Ils gardaient le bleu de WooCommerce (#1E85BE) : `.woocommerce-info` seul
   (0,1,0) perd contre `.woocommerce .woocommerce-info` de sa feuille, chargée
   après la nôtre. On repasse devant en nommant le contexte, comme pour les
   boutons du panier et de la commande. C'est le troisième endroit aujourd'hui
   où WooCommerce gagne par l'ordre de chargement : quand une règle du thème
   « ne prend pas », c'est la première chose à regarder. */
body.le-theme .woocommerce-error,
body.le-theme .woocommerce-info,
body.le-theme .woocommerce-message,
body.le-theme .woocommerce-notice,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-error{
  border:1px solid var(--filet-clair);border-top:3px solid var(--encre);
  background:var(--fond-carte);border-radius:var(--r-m);color:var(--encre);
  padding:14px 18px;margin:0 0 20px;list-style:none;font-size:14.5px;line-height:1.55}
body.le-theme .woocommerce-error,
.woocommerce-page .woocommerce-error{border-top-color:var(--terre)}
body.le-theme .woocommerce-message,
.woocommerce-page .woocommerce-message{border-top-color:var(--sauge)}
body.le-theme .woocommerce-info::before,
body.le-theme .woocommerce-message::before,
body.le-theme .woocommerce-error::before,
.woocommerce-page .woocommerce-info::before,
.woocommerce-page .woocommerce-message::before,
.woocommerce-page .woocommerce-error::before{display:none}
body.le-theme .woocommerce-info a,
.woocommerce-page .woocommerce-info a{text-decoration:underline;text-underline-offset:3px}

/* ─── la commande : reprendre la main sur les flottants de WooCommerce ───
   🚨 QUATRIÈME fois aujourd'hui. `.woocommerce form .col2-set .col-1{width:47.05%}`
   a exactement la même spécificité que notre règle (0,3,0) et sa feuille est
   chargée après : la carte de facturation faisait 377 px dans une colonne de
   786. Mesuré, pas supposé — 377/786 = 48 %, la signature du 47,05 %.

   Règle à retenir pour ce thème : quand une règle « ne prend pas » sur un
   écran WooCommerce, ce n'est presque jamais une faute de sélecteur, c'est
   l'ordre de chargement. On monte d'un cran avec `body.le-theme`. */
body.le-theme .le-cmd .col2-set .col-1,
body.le-theme .le-cmd .col2-set .col-2{width:100%;float:none;margin:0}

/* Le conteneur des champs n'est pas un enfant direct de `.col-1` : il est
   enveloppé dans `.woocommerce-billing-fields`. Le sélecteur d'origine ne
   visait donc rien, et les champs restaient en pile. */
@media(min-width:620px){
  body.le-theme .le-cmd .woocommerce-billing-fields__field-wrapper,
  body.le-theme .le-cmd .woocommerce-shipping-fields__field-wrapper,
  body.le-theme .le-cmd .woocommerce-additional-fields__field-wrapper{
    display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
  body.le-theme .le-cmd .form-row-wide,
  body.le-theme .le-cmd .woocommerce-additional-fields__field-wrapper > p{grid-column:1/-1}
}

/* ─── la mention de TVA sous le total ───
   WooCommerce l'écrit en `<small>` À LA SUITE du montant : « 107,70 € (inclut
   17,95 € TVA estimé pour France) » se cassait en deux au milieu de la
   parenthèse dans une colonne de 380 px. On la passe sous le chiffre, où elle
   a la place de tenir sur une ligne. */
.le-pan-total{flex-wrap:wrap}
.le-pan-total .includes_tax,
.le-cmd-cote .includes_tax{display:block;width:100%;text-align:right;
  margin-top:3px;font-size:11.5px;line-height:1.4;opacity:.6;font-weight:400}

/* ─── Rail des réseaux, collé au bord droit ────────────────────────────────
   Porté de calindesir.fr. Une réglette étroite plutôt qu'une capsule : sur un
   bloc haut, un arrondi en gélule donne un gros galet posé sur la page. Ici la
   plaque fait la largeur d'un bouton, l'arrondi est court, et ce sont
   l'étiquette verticale et les deux fils qui signent le bloc.

   `pointer-events:none` sur le conteneur et `auto` sur ses enfants : sans ça,
   la colonne invisible entre les fils intercepterait les clics sur toute la
   hauteur de l'écran, au bord droit. */
.le-rs{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:34;
  display:flex;flex-direction:column;align-items:center;gap:.7rem;pointer-events:none}
.le-rs>*{pointer-events:auto}
.le-rs-titre{writing-mode:vertical-rl;text-orientation:mixed;
  font-family:"IBM Plex Mono",monospace;font-size:.56rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--encre-2);opacity:.6;margin-right:.1rem;user-select:none}
.le-rs-fil{width:1px;height:clamp(20px,3.5vh,34px);
  background:linear-gradient(to bottom,transparent,var(--filet))}
.le-rs-fil.bas{background:linear-gradient(to bottom,var(--filet),transparent)}
.le-rs ul{list-style:none;margin:0;padding:.3rem .28rem;
  display:flex;flex-direction:column;gap:.12rem;
  /* ⚠️ Fond opaque et non `backdrop-filter` : un élément fixe qui refloute son
     fond coûte une passe de flou à chaque image de défilement. */
  background:rgba(251,249,245,.94);
  border:1px solid rgba(43,39,33,.10);border-right:0;
  border-radius:16px 0 0 16px;
  box-shadow:-12px 0 34px -16px rgba(43,39,33,.26)}
.le-rs li{position:relative;display:flex}
.le-rs a{position:relative;width:34px;height:34px;display:grid;place-items:center;
  isolation:isolate;border-radius:50%;color:var(--encre-2);
  transition:color .25s,transform .25s}
.le-rs svg{width:17px;height:17px;position:relative;z-index:1}
.le-rs a::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:0;
  background:linear-gradient(145deg,var(--terre-fonce),var(--terre));opacity:0;transform:scale(.6);
  transition:opacity .28s,transform .28s cubic-bezier(.2,.8,.2,1)}
.le-rs a:hover,.le-rs a:focus-visible{color:var(--fond-carte)}
.le-rs a:hover::before,.le-rs a:focus-visible::before{opacity:1;transform:scale(1)}
/* Le nom se déplie à gauche : l'icône seule ne suffit pas à tout le monde. */
.le-rs em{position:absolute;right:calc(100% + .55rem);top:50%;transform:translate(6px,-50%);
  font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:.58rem;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  padding:.32rem .62rem;border-radius:999px;
  background:var(--encre);color:var(--fond-carte);opacity:0;visibility:hidden;
  box-shadow:0 6px 18px -8px rgba(43,39,33,.5);
  transition:opacity .22s,transform .22s,visibility .22s}
.le-rs a:hover em,.le-rs a:focus-visible em{opacity:1;visibility:visible;transform:translate(0,-50%)}
/* En dessous de 1100 px, le rail mordrait sur le contenu : on le retire, les
   liens restent dans le pied de page. */
@media (max-width:1099px){ .le-rs{display:none} }
@media (prefers-reduced-motion:reduce){
  .le-rs a,.le-rs a::before,.le-rs em{transition:none}
}