/* =========================================================================
   Lupéo — design system « La bonne pièce » : PAGES INTÉRIEURES
   =========================================================================
   Complète lupeo-ds.css (jetons, composants, en-tête, pied) pour tout ce qui
   n'est pas l'accueil : rayons, fiche produit, recherche, pages « Ma
   trottinette », blog, article, pages de texte. Le panier, le paiement, la
   confirmation et le compte client ont leur propre feuille
   (lupeo-ds-commande.css), chargée sur ces seules pages.

   Principe : ces règles REPRENNENT les sélecteurs des feuilles de
   lupeo-modules (rayon, boutique, fiche, panier, machine…) pour en changer
   l'apparence. Aucune de ces feuilles n'est modifiée — en particulier
   lupeo-machine.css, qui a un chantier propre : la page machine est adaptée
   ICI, par surcharge, pour ne jamais écraser une correction venue d'ailleurs.
   Les sélecteurs sont au moins aussi précis que ceux qu'ils surchargent (le
   plus souvent préfixés `body`) : aucun !important, sauf là où la feuille
   d'origine en pose un — signalé sur place.

   Plan
     1. Cadre de page — largeur, en-tête de page, fil d'Ariane, texte courant
     2. Rayons — en-tête, familles, filtres, grille, pagination, guide, FAQ
     3. Fiche produit — galerie, zone d'achat, blocs de confiance, sections
     4. Recherche — champ, résultats, état vide, bandeau d'aide
     5. Ma trottinette — marques, modèles, page machine (par surcharge)
   ========================================================================= */

/* ---------- 1. Cadre de page --------------------------------------------- */

/* Le conteneur de Blocksy suit le cadre du prototype : 1440 px moins deux
   gouttières (3 vw, de 20 à 44 px) — les mêmes bords que l'en-tête, le hero,
   les sections de l'accueil et le pied. Avant, le corps des pages s'arrêtait
   à 1280 px : 37 px de retrait de plus que le logo, à 1440 px de large. */
html:root{
  --theme-normal-container-max-width:var(--lp-wrap);
  --theme-container-edge-spacing:calc(100vw - 2 * var(--lp-gouttiere));
}

/* Fil d'Ariane : texte courant de 13 px, dernier maillon en encre (le
   prototype). Remplace le mono posé par lupeo-ds.css, réservé aux données. */
.ct-breadcrumbs,
.woocommerce-breadcrumb{
  font-family:var(--lp-sans);
  font-size:13px;
  font-weight:400;
  letter-spacing:0;
  line-height:1.5;
  color:var(--lp-ink-3);
}
.ct-breadcrumbs a,
.woocommerce-breadcrumb a{color:var(--lp-ink-3);text-decoration:none}
.ct-breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover{color:var(--lp-green-600);text-decoration:underline}
.ct-breadcrumbs .last-item,
.ct-breadcrumbs [aria-current="page"]{color:var(--lp-ink);font-weight:500}
.ct-breadcrumbs .ct-separator,
.ct-breadcrumbs svg{opacity:.55}

/* Titre de page : la hiérarchie H1 du design system (44 / 1,05 / −2,8 %). */
.page-title,
.entry-title.page-title{
  font-size:clamp(32px,3.6vw,44px);
  line-height:1.05;
  letter-spacing:-.028em;
  font-weight:700;
  text-wrap:balance;
}

/* Surtitre mono d'un rayon (posé par Lupeo_Rayon::surtitre). */
.lupeo-rayon-surtitre{
  margin:0 0 14px;
  font-family:var(--lp-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.16em;
  line-height:1.4;
  text-transform:uppercase;
  color:var(--lp-ink-3);
}

/* 1b. Pages de texte (livraison, retours, mentions, à propos, contact…) : le texte
   suit la mesure de lecture de l'article — 760 px, soit environ 75 signes par ligne —
   au lieu des 1 354 px du cadre, sur lesquels une ligne dépassait 180 signes. Les
   tableaux, formulaires et composants du module gardent la largeur du cadre. Le bord
   gauche reste celui du logo (même formule que le cadre : `min(--lp-wrap, 100 % − 2 gouttières)`). */
body.page:not(.woocommerce-page):not(.home) .entry-content.is-layout-constrained > :is(p,h2,h3,h4,h5,ul,ol,blockquote,hr,.wp-block-heading,.wp-block-list){
  max-width:760px;
  /* ⚠️ !important : WordPress pose `margin-inline:auto!important` sur les enfants d'une
     mise en page contrainte ; seule cette déclaration la bat. */
  margin-left:calc((100% - min(var(--lp-wrap), 100% - 2 * var(--lp-gouttiere))) / 2)!important;
  margin-right:auto!important;
}
/* Intertitres des pages de texte : échelle du design system (H1 44 / H2 34 / H3 24), qui suit le
   H1 fluide dans la même proportion. Blocksy gardait 35 / 30 px fixes : sous 889 px, H2 > H1 (32 px). */
body.page:not(.woocommerce-page):not(.home) .entry-content.is-layout-constrained > h2{font-size:clamp(24px,2.78vw,34px);line-height:1.1;letter-spacing:-.024em}
body.page:not(.woocommerce-page):not(.home) .entry-content.is-layout-constrained > h3{font-size:clamp(19px,1.96vw,24px);line-height:1.25;letter-spacing:-.015em}
/* Un lien au milieu d'une phrase ou d'une cellule ne se distingue pas par la seule couleur
   (WCAG 1.4.1) : soulignement fin, teinte du design system. Pas dans le module des pages modèle
   (.lupeo-machine) : ses cartes et pastilles sont des blocs cliquables en <li>, avec leurs propres styles. */
body.page:not(.woocommerce-page):not(.home) .entry-content :is(p,li,td,dd,blockquote) a:not(.button):not(.wp-element-button):not(.lupeo-machine a){
  text-decoration:underline;text-decoration-color:rgba(0,124,117,.45);text-decoration-thickness:1px;text-underline-offset:3px;
}

/* ---------- 2. Rayons ------------------------------------------------------ */

/* 2a. En-tête : fil d'Ariane, surtitre, titre — puis le texte du rayon. */
body.tax-product_cat .hero-section,
body.tax-product_brand .hero-section,
body.post-type-archive-product .hero-section{
  padding:clamp(18px,2.2vw,28px) 0 0;
  /* !important : lupeo-rayon.css en pose un sur ce même fond. */
  background:transparent !important;
}
body.tax-product_cat .hero-section .entry-header,
body.tax-product_brand .hero-section .entry-header,
body.post-type-archive-product .hero-section .entry-header{
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"fil-ariane" "surtitre" "titre";
  align-items:start;
  gap:0;
}
body.tax-product_cat .ct-breadcrumbs,
body.tax-product_brand .ct-breadcrumbs,
body.post-type-archive-product .ct-breadcrumbs{
  grid-area:fil-ariane;
  justify-self:start;
  max-width:100%;
  margin:0 0 clamp(20px,2.6vw,32px);
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  font-size:13px;
  font-weight:400;
  color:var(--lp-ink-3);
  overflow:visible;
  white-space:normal;
  text-overflow:clip;
}
body.tax-product_cat .lupeo-rayon-surtitre,
body.tax-product_brand .lupeo-rayon-surtitre,
body.post-type-archive-product .lupeo-rayon-surtitre{grid-area:surtitre}
body.tax-product_cat .page-title,
body.tax-product_brand .page-title,
body.post-type-archive-product .page-title{
  grid-area:titre;
  font-family:var(--lp-sans);
  font-size:clamp(34px,4vw,44px);
  line-height:1.05;
  letter-spacing:-.028em;
  max-width:24ch;
}
body.tax-product_cat #main > .ct-container,
body.tax-product_brand #main > .ct-container,
body.post-type-archive-product #main > .ct-container{
  padding-top:clamp(18px,2.2vw,28px);
}
.lupeo-rayon-tete{margin:0 0 clamp(24px,3vw,36px)}
.lupeo-rayon-tete__txt{
  max-width:62ch;
  font-size:clamp(16px,1.3vw,18px);
  line-height:1.55;
  color:var(--lp-ink-2);
}
.lupeo-rayon-tete__action a{
  border-radius:var(--lp-r-2);
  background:var(--lp-green-100);
  color:var(--lp-green-600);
  font-size:14px;
}
.lupeo-rayon-tete__action a:hover,
.lupeo-rayon-tete__action a:focus-visible{background:#D5EEE4;transform:none}

/* 2b. Familles : le panneau « Choisir une famille » devient une rangée de
   tuiles — icône, nom, nombre de références en mono. Le dépliage reste
   celui du <details> d'origine. */
.lupeo-familles{
  margin-top:clamp(24px,3vw,36px);
  border:0;
  border-radius:0;
  background:transparent;
  overflow:visible;
}
.lupeo-familles > summary{
  min-height:0;
  padding:0 0 14px;
  gap:10px;
  color:var(--lp-ink-3);
}
.lupeo-familles[open] > summary{border-bottom:0}
.lupeo-familles__titre{
  font-family:var(--lp-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--lp-ink-3);
}
.lupeo-familles__compte{
  margin-left:0;
  font-family:var(--lp-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.06em;
  color:var(--lp-ink-3);
}
.lupeo-familles > summary .lupeo-i{margin-left:auto;color:var(--lp-ink)}
.lupeo-sous-rayons{
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:12px;
  padding:0;
}
.lupeo-sous-rayons .lupeo-pastille{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:8px;
  min-height:0;
  padding:16px 16px 14px;
  border:1px solid var(--lp-line);
  border-radius:var(--lp-r-3);
  background:var(--lp-surface);
  font-size:15px;
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--lp-ink);
  text-decoration:none;
  transition:border-color .15s,box-shadow .15s;
}
.lupeo-sous-rayons .lupeo-pastille:hover,
.lupeo-sous-rayons .lupeo-pastille:focus-visible{
  border-color:var(--lp-ink);
  box-shadow:var(--lp-ombre-1);
  color:var(--lp-ink);
}
.lupeo-sous-rayons .lupeo-pastille .lupeo-i,
.lupeo-sous-rayons .lupeo-pastille .lp-ico{width:26px;height:26px;color:var(--lp-green-600)}
.lupeo-sous-rayons .lupeo-pastille span{
  margin:0;
  padding:0;
  border-radius:0;
  background:none;
  font-family:var(--lp-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--lp-ink-3);
}
.lupeo-sous-rayons .lupeo-pastille span::after{content:" réf."}
.lupeo-sous-rayons .lupeo-pastille:hover span{color:var(--lp-ink-3)}

/* 2c. Barre de filtres et de tri. */
.lupeo-filtres{
  margin:0 0 clamp(20px,2.4vw,28px);
  padding:12px 14px;
  border:1px solid var(--lp-line);
  border-radius:var(--lp-r-3);
  background:var(--lp-surface);
}
.lupeo-filtres__nb{
  font-size:15px;
  font-weight:600;
  letter-spacing:-.005em;
  color:var(--lp-ink);
}
.lupeo-filtre > summary,
.lupeo-filtres__ouvrir{
  min-height:42px;
  border:1px solid var(--lp-line-forte);
  border-radius:var(--lp-r-2);
  background:var(--lp-surface);
  font-size:14px;
  font-weight:500;
  color:var(--lp-ink);
}
.lupeo-filtre > summary:hover,
.lupeo-filtre[open] > summary{border-color:var(--lp-ink);color:var(--lp-ink)}
.lupeo-filtre > summary .lupeo-i,
.lupeo-filtres__ouvrir .lupeo-i{color:var(--lp-ink)}
.lupeo-filtre__liste{
  border:1px solid var(--lp-line);
  border-radius:var(--lp-r-3);
  box-shadow:var(--lp-ombre-2);
}
.lupeo-choix{border-radius:var(--lp-r-2);color:var(--lp-ink-2)}
.lupeo-choix:hover{background:var(--lp-surface-2);color:var(--lp-ink)}
.lupeo-choix b{font-family:var(--lp-mono);font-size:11px;font-weight:400;color:var(--lp-ink-3)}
.lupeo-choix__case{border-color:var(--lp-line-forte);border-radius:var(--lp-r-1)}
.lupeo-choix.est-coche .lupeo-choix__case{background:var(--lp-green-600);border-color:var(--lp-green-600)}
.lupeo-pastille{
  border:1px solid var(--lp-line-forte);
  border-radius:var(--lp-r-pill);
  background:var(--lp-surface);
  color:var(--lp-ink);
}
.lupeo-pastille:hover{border-color:var(--lp-ink);color:var(--lp-ink)}
.lupeo-pastille--retrait{background:var(--lp-green-100);border-color:transparent;color:var(--lp-green-600)}
.lupeo-pastille--retrait:hover{background:var(--lp-green-600);color:#fff}
.lupeo-filtres__libelle{font-family:var(--lp-mono);font-size:11px;font-weight:400;letter-spacing:.14em;color:var(--lp-ink-3)}
.lupeo-filtres__vider{color:var(--lp-ink-2)}
.lupeo-filtres__vider:hover{color:var(--lp-green-600)}
.lupeo-filtres__tri .woocommerce-ordering select,
.woocommerce-ordering select{
  border:1px solid var(--lp-line-forte);
  border-radius:var(--lp-r-2);
  font-family:var(--lp-sans);
  font-size:14px;
  font-weight:500;
  color:var(--lp-ink);
}

/* 2d. Grille : quatre colonnes de cartes (la carte est celle du design
   system, voir lupeo-ds.css § 5d), puis trois, deux, une. */
.woocommerce ul.products.lupeo-liste,
ul.products.lupeo-liste{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.6vw,20px);
}
@media (max-width:1180px){
  .woocommerce ul.products.lupeo-liste,
  ul.products.lupeo-liste{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .woocommerce ul.products.lupeo-liste,
  ul.products.lupeo-liste{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .woocommerce ul.products.lupeo-liste,
  ul.products.lupeo-liste{grid-template-columns:minmax(0,1fr)}
}

/* 2e. Pagination : UN seul composant (celui de Blocksy, `nav.ct-pagination`) — « Précédent », les numéros, « Suivant » — ; cases carrées de 44 px,
   la page courante en encre. « Précédent » et « Suivant » ont EXACTEMENT la même construction (correctif du 21/09/2026 : seul « Suivant » était
   mis en forme ; « Précédent » gardait le bouton plein vert du thème, icône au-dessus du texte : deux rendus différents selon la page).
   Alignée à GAUCHE, sur le bord de la grille de produits, comme le prototype « Catégorie » ; sur mobile (numéros masqués par Blocksy),
   « Précédent » à gauche et « Suivant » à droite. `scroll-margin-top` : un bouton qui prend le focus au clavier ne reste pas sous l'en-tête collant. */
nav.ct-pagination{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:8px;
  margin-top:clamp(28px,3.4vw,44px);
}
nav.ct-pagination .ct-hidden-sm{display:flex;flex-wrap:wrap;gap:8px}
nav.ct-pagination .page-numbers{
  display:inline-grid;
  place-items:center;
  box-sizing:border-box;
  min-width:44px;
  height:44px;
  padding:0 12px;
  margin:0;
  border:1px solid var(--lp-line-forte);
  border-radius:var(--lp-r-2);
  background:var(--lp-surface);
  font-size:15px;
  font-weight:600;
  line-height:1;
  color:var(--lp-ink);
  text-decoration:none;
  scroll-margin-top:110px;
}
nav.ct-pagination a.page-numbers:hover{border-color:var(--lp-ink);color:var(--lp-ink)}
nav.ct-pagination a.page-numbers:focus-visible{outline:2px solid var(--lp-green-600);outline-offset:3px}
nav.ct-pagination .page-numbers.current{background:var(--lp-ink);border-color:var(--lp-ink);color:#fff}
nav.ct-pagination .page-numbers.dots{border-color:transparent;background:transparent;min-width:0;padding:0 4px}
/* Blocksy fixe « Précédent » et « Suivant » à 46 px de haut et 14 px de corps : on les remet à la valeur des cases (44 px, 15 px). */
nav.ct-pagination a.prev.page-numbers,
nav.ct-pagination a.next.page-numbers{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;font-size:15px;line-height:1}
nav.ct-pagination a.prev.page-numbers svg,
nav.ct-pagination a.next.page-numbers svg{fill:currentColor}
@media (max-width:689px){
  nav.ct-pagination a.next.page-numbers{margin-left:auto}
}

/* 2f. Guide « Bien choisir », tableau et questions. Le bloc imprime ses
   propres règles en ligne (Lupeo_Guide::styles) : `body` en tête pour passer
   devant, sans !important. Deux colonnes — le guide à gauche, les questions à
   droite —, une seule sur tablette et mobile. */
body .lupeo-conseil{
  display:block;
  max-width:none;
  margin:clamp(44px,5.6vw,80px) 0 clamp(8px,1vw,16px);
  padding:clamp(32px,4vw,56px) 0 0;
  border-top:1px solid var(--lp-line);
}
body .lupeo-conseil__t{
  margin:0 0 clamp(18px,2vw,26px);
  font-size:clamp(26px,3vw,34px);
  line-height:1.1;
  letter-spacing:-.024em;
  color:var(--lp-ink);
}
body .lupeo-conseil .lupeo-prose{
  font-size:16px;
  line-height:1.6;
  color:var(--lp-ink-2);
}
body .lupeo-conseil .lupeo-prose h3{
  margin:28px 0 8px;
  font-family:var(--lp-sans);
  font-size:18px;
  line-height:1.3;
  letter-spacing:-.012em;
  color:var(--lp-ink);
}
body .lupeo-conseil .lupeo-prose code{
  padding:2px 6px;
  border-radius:var(--lp-r-1);
  background:var(--lp-surface-2);
  font-family:var(--lp-mono);
  font-size:.88em;
  color:var(--lp-ink);
}
body .lupeo-conseil__grille{gap:14px}
body .lupeo-conseil__carte{
  padding:20px;
  border:1px solid var(--lp-line);
  border-radius:var(--lp-r-3);
  background:var(--lp-surface);
}
body .lupeo-conseil__faq-t{
  margin:0 0 14px;
  font-family:var(--lp-sans);
  font-size:20px;
  line-height:1.25;
  letter-spacing:-.015em;
  color:var(--lp-ink);
}
@media (min-width:1000px){
  body .lupeo-conseil{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    column-gap:clamp(40px,5vw,80px);
    align-items:start;
  }
  body .lupeo-conseil__t{grid-column:1;grid-row:1}
  body .lupeo-conseil .lupeo-prose{grid-column:1;grid-row:2}
  body .lupeo-conseil__scroll{grid-column:1 / -1}
  body .lupeo-conseil__faq-t{grid-column:2;grid-row:1;align-self:end;margin-bottom:clamp(18px,2vw,26px)}
  /* La FAQ n'est PLUS collante (correctif du 21/09/2026) : le prototype « Catégorie » ne la colle pas, et un élément collant reste dans son
     conteneur de grille ENTIER (Chrome, Opera, Safari). Ici ce conteneur contient aussi le tableau des dimensions, en pleine largeur SOUS la FAQ :
     en descendant, la FAQ collée passait par-dessus la colonne « Quelques modèles concernés » (prouvé sur maquette, invisible en préproduction
     faute de rayon qui ait à la fois FAQ et tableau ; visible en production sur les pneus et les chambres à air). */
  body .lupeo-conseil .lupeo-faq{grid-column:2;grid-row:2}
  body .lupeo-conseil__grille{grid-template-columns:minmax(0,1fr)}
}
/* Tableau des dimensions : cadre arrondi, en-tête en mono, défilement
   horizontal sur écran étroit. */
body .lupeo-conseil__scroll{
  margin:clamp(28px,3.4vw,44px) 0 0;
  border:1px solid var(--lp-line);
  border-radius:var(--lp-r-3);
  background:var(--lp-surface);
  overflow-x:auto;
}
body .lupeo-conseil__table{min-width:520px;font-size:14.5px}
body .lupeo-conseil__table caption{
  padding:16px 20px 4px;
  font-family:var(--lp-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--lp-ink-3);
}
body .lupeo-conseil__table th,
body .lupeo-conseil__table td{padding:13px 20px;border-bottom:1px solid var(--lp-line-2);color:var(--lp-ink-2)}
body .lupeo-conseil__table th:last-child,
body .lupeo-conseil__table td:last-child{padding-right:20px}
body .lupeo-conseil__table thead th{
  padding-top:10px;
  padding-bottom:10px;
  background:var(--lp-surface-2);
  font-family:var(--lp-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--lp-ink-3);
}
body .lupeo-conseil__table tbody th{font-weight:600;color:var(--lp-ink)}
body .lupeo-conseil__table tbody th a{color:var(--lp-ink);text-decoration:underline;text-decoration-color:var(--lp-green-400);text-decoration-thickness:2px;text-underline-offset:4px}
body .lupeo-conseil__table tbody tr:last-child th,
body .lupeo-conseil__table tbody tr:last-child td{border-bottom:0}

/* Questions fréquentes : une carte, une ligne par question (utilisée aussi
   par la fiche produit et les pages « Ma trottinette »). `body` en tête :
   lupeo-modules.css est imprimé après cette feuille quand le guide le charge
   à l'affichage. */
body .lupeo-faq{
  border:1px solid var(--lp-line);
  border-radius:var(--lp-r-3);
  background:var(--lp-surface);
  overflow:hidden;
}
body .lupeo-faq__item{border-bottom:1px solid var(--lp-line-2)}
body .lupeo-faq__item:last-child{border-bottom:0}
body .lupeo-faq__q{
  padding:17px 20px;
  font-size:15.5px;
  font-weight:600;
  line-height:1.4;
  color:var(--lp-ink);
}
body .lupeo-faq__q::after{color:var(--lp-ink);font-size:22px}
body .lupeo-faq__item[open] > .lupeo-faq__q{color:var(--lp-ink)}
body .lupeo-faq__a{max-width:none;padding:0 20px 18px}
body .lupeo-faq__a p{font-size:14.5px;line-height:1.6;color:var(--lp-ink-2)}

/* Pagination — « Précédent » et « Suivant » : même case que les numéros (Blocksy peint les deux en bouton plein ; seul « Suivant »
   était repris jusqu'au 21/09/2026). */
nav.ct-pagination a.prev.page-numbers,
nav.ct-pagination a.next.page-numbers{background:var(--lp-surface);border-color:var(--lp-line-forte);color:var(--lp-ink)}
nav.ct-pagination a.prev.page-numbers:hover,
nav.ct-pagination a.prev.page-numbers:focus-visible,
nav.ct-pagination a.next.page-numbers:hover,
nav.ct-pagination a.next.page-numbers:focus-visible{background:var(--lp-surface);border-color:var(--lp-ink);color:var(--lp-ink)}

/* 2g. Boutique — le prototype « Catégorie » : identité du rayon (tuile d'icône +
   surtitre), bandeau « votre modèle », puis la colonne de filtres de 264 px à gauche
   et la grille à droite. Le balisage est celui de Lupeo_Rayon : sur grand écran, les
   trois boîtes de la barre (`woo-listing-top`, `lupeo-filtres`, `lupeo-filtres__ligne`)
   disparaissent de la mise en page (`display:contents`) et leurs enfants se placent
   dans la grille de la section ; sous 1001 px, la barre et le panneau d'origine
   reprennent la main (panneau coulissant sous 781 px). */
.lupeo-rayon-ident{display:flex;align-items:center;gap:16px;margin:0 0 18px}
.lupeo-rayon-icone{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:12px;background:var(--lp-green-100);color:var(--lp-green-600)}
.lupeo-rayon-icone svg{width:32px;height:32px}
.lupeo-rayon-ident .lupeo-rayon-surtitre{margin:0}
body.tax-product_cat .page-title,
body.tax-product_brand .page-title,
body.post-type-archive-product .page-title{font-size:clamp(32px,4vw,54px);line-height:1;letter-spacing:-.034em;max-width:none}
.lupeo-rayon-tete__txt{max-width:56ch;font-size:17px;line-height:1.6}

.lupeo-bandeau-modele{
  display:flex;align-items:center;flex-wrap:wrap;gap:16px;
  margin:0 0 24px;padding:16px 20px;
  border:1px solid #CBE6DC;border-radius:12px;background:var(--lp-green-50);color:var(--lp-ink);
}
.lupeo-bandeau-modele > svg{flex:none;width:24px;height:24px;color:var(--lp-green-600)}
.lupeo-bandeau-modele__invite{margin:0;font-size:15.5px;font-weight:600;line-height:1.4}
.lupeo-bandeau-modele__bouton{
  display:inline-flex;align-items:center;padding:10px 14px;border-radius:7px;
  background:var(--lp-green-400);color:var(--lp-green-400-ink);font-size:13px;font-weight:700;line-height:1.2;text-decoration:none;
}
.lupeo-bandeau-modele__bouton:hover{background:#00B85D;color:var(--lp-green-400-ink)}
.lupeo-bandeau-modele__bouton--plein{margin-left:auto;padding:11px 16px;background:var(--lp-green-600);color:#fff;font-size:13.5px;font-weight:600}
.lupeo-bandeau-modele__bouton--plein:hover{background:#005F59;color:#fff}
.lupeo-bandeau-modele--filtre{border:0;background:var(--lp-green-900);color:#fff}
.lupeo-bandeau-modele--filtre > svg{color:#fff}
.lupeo-bandeau-modele__texte{display:flex;flex-direction:column;gap:2px;line-height:1.35}
.lupeo-bandeau-modele__etiquette{font-family:var(--lp-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7FC9BF}
.lupeo-bandeau-modele__titre{font-size:16px;font-weight:600}
.lupeo-bandeau-modele__actions{display:flex;gap:9px;margin-left:auto}
.lupeo-bandeau-modele__lien{padding:10px 14px;border:1px solid rgba(255,255,255,.35);border-radius:7px;color:#fff;font-size:13px;line-height:1.2;text-decoration:none}
.lupeo-bandeau-modele__lien:hover{border-color:#fff;color:#fff}

.lupeo-filtres__effacer{font-size:12.5px;font-weight:400;color:var(--lp-green-600);text-decoration:none}
.lupeo-filtres__effacer:hover{text-decoration:underline}

/* Catalogue d'un rayon : la colonne de filtres, la barre de tri, la liste et la pagination forment UN groupe
   (`.lupeo-catalogue`, posé par Lupeo_Rayon::ouvre_catalogue()) — la grille du prototype « Catégorie » ne contient que la colonne et la liste.
   ⚠️ La colonne est COLLANTE. Dans Chrome, Opera et Safari, un élément de grille collant reste dans le conteneur de grille ENTIER, pas dans sa
   zone. Quand la grille était la section de la page, elle contenait aussi le bloc éditorial du rayon (titre, texte, FAQ) : en descendant, la
   colonne continuait de coller PAR-DESSUS lui (titre et texte coupés à gauche). Le groupe s'arrête à la pagination : la colonne n'ira jamais
   plus bas, et le bloc éditorial, dans la section, en dessous, garde toute sa largeur (correctif du 21/09/2026). */
@media (min-width:1001px){
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes){
    display:grid;grid-template-columns:264px minmax(0,1fr) auto;column-gap:clamp(24px,3vw,44px);align-items:start;
  }
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .woo-listing-top,
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-filtres,
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-filtres__ligne{display:contents}

  /* Compteur et tri, en tête de la colonne de droite. */
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-filtres__nb{grid-column:2;grid-row:1;align-self:center;margin:0 0 18px;font-size:14.5px;font-weight:600}
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-filtres__tri{
    grid-column:3;grid-row:1;justify-self:end;align-self:center;margin:0 0 18px;
    display:flex;align-items:center;gap:10px;
  }
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-filtres__tri::before{content:"Trier par";font-size:13.5px;color:var(--lp-ink-2)}

  /* Filtres actifs : des pastilles blanches à filet, sans libellé (le « Tout effacer » est dans la colonne). */
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-filtres__actifs{grid-column:2 / -1;grid-row:2;margin:0 0 20px;gap:9px}
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-filtres__actifs .lupeo-filtres__libelle,
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-filtres__actifs .lupeo-filtres__vider{display:none}
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-filtres__actifs .lupeo-pastille--retrait{padding:8px 13px;border:1px solid var(--lp-line-forte);background:var(--lp-surface);font-size:12.5px;font-weight:500;color:var(--lp-ink)}
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-filtres__actifs .lupeo-pastille--retrait:hover{border-color:var(--lp-ink);background:var(--lp-surface);color:var(--lp-ink)}

  /* La colonne de filtres : une carte collante, un ACCORDÉON (essai local du 30/09/2026).
     Chaque groupe (Marque, Compatible avec…) se plie et se déplie au clic sur son titre ; ils sont indépendants,
     parce que les filtres se cumulent. lupeo-rayon.js ouvre à l'arrivée les groupes qui portent un choix actif,
     ou le premier s'il n'y en a aucun. Sans JavaScript, le <details> natif suffit. */
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-filtres__groupes{
    display:block;grid-column:1;grid-row:1 / span 4;
    position:sticky;top:94px;max-height:calc(100vh - 118px);overflow-y:auto;
    padding:20px 20px 6px;border:1px solid var(--lp-line);border-radius:12px;background:var(--lp-surface);
  }
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-filtres__panneau-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px;padding:0;border:0}
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-filtres__panneau-tete strong{font-size:15px;font-weight:700;letter-spacing:-.015em;color:var(--lp-ink)}
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-filtres__fermer,
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-filtres__ouvrir,
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-filtres__voile{display:none}
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-filtre{display:block;margin:0;border-top:1px solid var(--lp-line-2)}
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-filtre > summary{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    min-height:0;padding:15px 0;margin:0;border:0;border-radius:0;background:none;
    font-family:var(--lp-mono);font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;line-height:1.3;color:var(--lp-ink-2);
    cursor:pointer;
  }
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-filtre > summary:hover,
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-filtre[open] > summary{border:0;background:none;color:var(--lp-ink)}
  /* Le chevron dit que le titre se déplie ; il se retourne quand le groupe est ouvert. */
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-filtre > summary .lupeo-i,
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-filtre > summary svg{display:block;flex:none;width:16px;height:16px;color:var(--lp-ink);transition:transform .2s ease}
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-filtre[open] > summary .lupeo-i,
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-filtre[open] > summary svg{transform:rotate(180deg)}
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-filtre__liste{
    position:static;display:flex;flex-direction:column;gap:3px;min-width:0;max-height:264px;overflow-y:auto;
    margin:0 0 14px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
  }
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-choix{min-height:38px;padding:7px 0;border-radius:0;gap:11px;font-size:14px;line-height:1.3;color:var(--lp-ink)}
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-choix:hover{background:none;color:var(--lp-green-600)}
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-choix.est-coche{font-weight:500}
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-choix__case{width:19px;height:19px;border:1.5px solid var(--lp-line-forte);border-radius:4px}
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) .lupeo-choix b{margin-left:auto;font-family:var(--lp-mono);font-size:11px;font-weight:400;color:var(--lp-ink-3)}

  /* La grille : quatre colonnes de 232 px au moins, 16 px d'écart. */
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) ul.products.lupeo-liste{grid-column:2 / -1;grid-row:3;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px;align-items:stretch}
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) nav.ct-pagination{grid-column:2 / -1;grid-row:4}

  /* Aucun résultat (recherche ou filtres sans produit) : le message de WooCommerce (`.woocommerce-no-products-found`) n'avait pas de place
     assignée. La grille le rangeait dans la première case libre — la colonne du tri, à l'extrême droite — et l'élargissait à la largeur du
     texte : compteur à gauche, message collé au bord droit, 610 px et 392 px au lieu d'une colonne (correctif du 21/09/2026).
     Il prend la colonne de droite, sous le compteur et les filtres actifs. Et la DERNIÈRE rangée absorbe la hauteur de la colonne de filtres :
     sans cela, la grille la répartit entre les rangées 2 à 4 et laisse ~230 px de vide entre le compteur et le message. */
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes) > .woocommerce-no-products-found{grid-column:2 / -1;grid-row:3;align-self:start}
  #main > .ct-container > section > .lupeo-catalogue:has(.lupeo-filtres__groupes):has(> .woocommerce-no-products-found){grid-template-rows:auto auto auto 1fr}
}

/* 2h. Mobile (prototype « Mobile », écran 04) : le panneau de filtres s'ouvre en feuille basse ;
   son titre passe en encre 18/700, et le tri tient dans sa colonne. */
@media (max-width:780px){
  body .lupeo-filtres__panneau-tete strong{font:700 18px/1.3 var(--lp-sans);letter-spacing:-.018em;color:var(--lp-ink)}
  /* ⚠️ !important : lupeo-rayon.css fixe padding et corps du tri en `!important` ; « Tri par défaut »
     était rogné (« Tri par défau ») dans une colonne de 155 px. */
  body .lupeo-filtres__tri .woocommerce-ordering select{padding:0 28px 0 12px!important;font-size:13.5px!important;text-overflow:ellipsis}
}

/* ---------- 3. Fiche produit ------------------------------------------------- */

/* 3a. Galerie : cadre arrondi sur fond gris atelier, vignettes carrées, la
   vue courante cerclée de vert Lupéo. Les photos sont posées en
   « multiplication » : le blanc des packshots disparaît dans le cadre. */
body .woocommerce-product-gallery .flexy-container{border:0;background:none;overflow:visible}
body .woocommerce-product-gallery .flexy{
  border:1px solid var(--lp-line);
  border-radius:var(--lp-r-3);
  background:var(--lp-surface-2);
  overflow:hidden;
}
body .woocommerce-product-gallery .flexy-items img:not(.zoomImg){mix-blend-mode:multiply}
body .woocommerce-product-gallery .flexy-arrow-prev,
body .woocommerce-product-gallery .flexy-arrow-next{
  border-radius:var(--lp-r-pill);
  background:var(--lp-surface);
  color:var(--lp-ink);
  box-shadow:var(--lp-ombre-1);
}
body .woocommerce-product-gallery .flexy-pills li{
  border:1px solid var(--lp-line);
  border-radius:var(--lp-r-2);
  background:var(--lp-surface-2);
  overflow:hidden;
}
body .woocommerce-product-gallery .flexy-pills li img{mix-blend-mode:multiply}
body .woocommerce-product-gallery .flexy-pills li.active{
  border-color:var(--lp-green-600);
  box-shadow:0 0 0 1px var(--lp-green-600);
}
body .woocommerce-product-gallery .flexy-pills li:hover{border-color:var(--lp-ink)}
/* Sur mobile, les vignettes défilent sur une ligne (le prototype) au lieu de
   s'empiler en trois rangées de grandes tuiles. */
@media (max-width:860px){
  body .woocommerce-product-gallery .flexy-pills ol{
    flex-wrap:nowrap;
    gap:8px;
    margin:12px 0 0;
    padding:0 0 6px;
    width:auto;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  body .woocommerce-product-gallery .flexy-pills li{flex:0 0 68px;width:68px;height:68px;scroll-snap-align:start}
}
/* Sur grand écran, six vignettes par rangée, 10 px d'écart, carrées (le prototype) :
   Blocksy en pose cinq, collées, avec 15 px de marge haute dans chaque tuile. Le
   réglage passe par ses propres variables — la largeur d'une tuile — et non par une
   grille, pour laisser son défilement des vignettes intact. */
@media (min-width:861px){
  body .woocommerce-product-gallery .flexy-pills ol{--thumbs-width:calc((100% - 50px)/6);gap:10px;margin:12px 0 0}
  body .woocommerce-product-gallery .flexy-pills li{padding:0;aspect-ratio:1}
}

/* 3b. Zone d'achat. */
body .summary .product_title{
  margin:0 0 10px;
  font-family:var(--lp-sans);
  font-size:clamp(28px,2.6vw,36px);
  line-height:1.08;
  letter-spacing:-.025em;
  font-weight:700;
  color:var(--lp-ink);
  text-wrap:balance;
}
body .lupeo-ref{
  margin:0 0 18px;
  font-family:var(--lp-mono);
  font-size:12px;
  letter-spacing:.04em;
  font-variant-numeric:normal;
  color:var(--lp-ink-3);
}
body.woocommerce div.product p.price,
body .woocommerce div.product p.price{
  margin:0 0 18px;
  font-size:34px;
  line-height:1;
  letter-spacing:-.02em;
  font-weight:700;
  font-variant-numeric:normal;
}
body.woocommerce div.product p.price .woocommerce-price-suffix,
body .woocommerce div.product p.price .woocommerce-price-suffix{
  margin-left:6px;
  font-family:var(--lp-mono);
  font-size:12px;
  letter-spacing:.02em;
  color:var(--lp-ink-3);
}
body.woocommerce div.product p.price del,
/* Prix barré : rouge promotion, trait épais — l'ancien prix se voit et se comprend d'un coup d'œil (rouge 5,9:1 sur blanc). */
body .woocommerce div.product p.price del{
  font-size:18px;font-weight:600;
  color:var(--lp-promo,#C8102E);
  text-decoration-thickness:2px;text-decoration-color:currentColor;
  opacity:1;
}
body.woocommerce div.product p.price ins,
body .woocommerce div.product p.price ins{text-decoration:none}

/* Compatibilité : le composant à trois états du design system — ici l'état
   « confirmé » (la liste des modèles vient de la fiche). Couleur, icône ET
   mot. L'icône d'origine (une chaîne) est remplacée par la coche-cercle. */
body .lupeo-compat-tete{
  display:block;
  margin:0 0 18px;
  padding:14px 16px 12px;
  border:1px solid #CFE9DD;
  border-radius:var(--lp-r-3);
  background:var(--lp-green-50);
}
body .lupeo-compat-tete__lab{
  display:flex;align-items:center;gap:8px;
  margin:0 0 10px;
  font-family:var(--lp-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--lp-green-600);
}
body .lupeo-compat-tete__lab .lupeo-i{display:none}
body .lupeo-compat-tete__lab::before{
  content:"";
  width:20px;height:20px;flex:none;
  background:var(--lp-green-450);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='m7.8 12.2 2.9 2.9 5.5-6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='m7.8 12.2 2.9 2.9 5.5-6'/%3E%3C/svg%3E") center/contain no-repeat;
}
body .lupeo-compat-tete__liste{gap:6px}
body .lupeo-compat-tete__p{
  padding:4px 10px;
  border:1px solid #CFE9DD;
  border-radius:var(--lp-r-2);
  background:var(--lp-surface);
  font-size:13px;
  font-weight:500;
  color:var(--lp-ink);
}
body a.lupeo-compat-tete__p:hover,
body a.lupeo-compat-tete__p:focus-visible{border-color:var(--lp-green-600);background:var(--lp-surface);color:var(--lp-green-600)}
body .lupeo-compat-tete__p--fixe{background:var(--lp-surface-2);border-color:var(--lp-line);color:var(--lp-ink-2)}

/* Remise : noir sur blanc (« pas de rouge promotionnel »), code en mono.
   L'étiquette est un SVG aux deux rouges écrits dans le fichier : ils sont
   repeints aux verts du design system. */
body .lupeo-remise__svg path[fill="#FF6C6C"]{fill:#7FD6B0}
body .lupeo-remise__svg path[fill="#FF4949"]{fill:var(--lp-green-600)}
body .lupeo-remise{
  padding:12px 14px;
  border:1px solid var(--lp-line);
  border-radius:var(--lp-r-3);
  background:var(--lp-surface);
}
body .lupeo-remise__titre{font-family:var(--lp-sans);font-size:15px;letter-spacing:-.005em;color:var(--lp-ink)}
body .lupeo-remise__txt{color:var(--lp-ink-2)}
body .lupeo-remise__code{
  font-family:var(--lp-mono);
  font-size:13px;
  font-weight:500;
  letter-spacing:.06em;
  color:var(--lp-green-600);
  border-radius:var(--lp-r-2);
  background:var(--lp-green-50);
}
body .lupeo-remise__code:hover,
body .lupeo-remise__code:focus-visible{background:var(--lp-green-600);color:#fff}

/* Stock : un point, un mot — plus de pastille pleine. */
body .lupeo-stock{
  gap:9px;
  padding:0;
  border-radius:0;
  background:none;
  font-size:14px;
  font-weight:600;
  color:var(--lp-ink);
}
body .lupeo-stock__pip{width:9px;height:9px;background:var(--lp-green-450);box-shadow:0 0 0 3px rgba(0,184,93,.18)}
body .lupeo-stock--commande{color:var(--lp-ink);background:none}
body .lupeo-stock--commande .lupeo-stock__pip{background:var(--lp-amber-500);box-shadow:0 0 0 3px rgba(240,168,30,.2)}
body .lupeo-stock--rupture{color:var(--lp-ink-3);background:none}
body .lupeo-stock--rupture .lupeo-stock__pip{background:var(--lp-line-forte);box-shadow:none}

/* Expédition prévue : l'encadré « vert brume » du prototype. Le texte et les
   dates viennent du calcul d'expédition, jamais d'ici. */
body .lupeo-ship{
  border:1px solid #CFE9DD;
  border-radius:var(--lp-r-3);
  background:var(--lp-green-50);
}
body .lupeo-ship__top{padding:16px 18px 6px;background:transparent}
body .lupeo-ship__check{border-radius:50%;background:var(--lp-green-450)}
body .lupeo-ship__label{
  font-family:var(--lp-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.14em;
  color:var(--lp-green-600);
}
body .lupeo-ship__date{font-family:var(--lp-sans);font-size:18px;letter-spacing:-.015em;color:var(--lp-ink)}
body .lupeo-ship__sub{color:var(--lp-ink-2)}
body .lupeo-ship__body{padding:8px 18px 16px;background:transparent}
body .lupeo-ship__ico{
  border:1px solid #CFE9DD;
  border-radius:var(--lp-r-2);
  background:var(--lp-surface);
  color:var(--lp-green-600);
}
body .lupeo-ship__foot{border-top:1px dashed #BFDDCF;color:var(--lp-ink-3)}

/* Variantes : pastilles rondes cerclées de vert Lupéo quand elles sont
   choisies. */
body .lupeo-var__vignette{border:1px solid var(--lp-line-forte);background:var(--lp-surface-2)}
body .lupeo-var__btn:hover .lupeo-var__vignette{border-color:var(--lp-ink);transform:none}
body .lupeo-var__btn.is-actif .lupeo-var__vignette{border-color:var(--lp-green-600);box-shadow:0 0 0 2px var(--lp-green-600)}
body .lupeo-var__btn.is-actif .lupeo-var__nom{color:var(--lp-ink)}
body .lupeo-var__nom{font-size:13px}
body .lupeo-var__echo{color:var(--lp-ink)}
body .lupeo-var--texte .lupeo-var__btn{border:1px solid var(--lp-line-forte);border-radius:var(--lp-r-3)}
body .lupeo-var--texte .lupeo-var__btn:hover{border-color:var(--lp-ink)}
body .lupeo-var--texte button.lupeo-var__btn.is-actif{
  border-color:var(--lp-green-600);
  background:var(--lp-green-50);
  box-shadow:0 0 0 1px var(--lp-green-600);
}
body .lupeo-var--texte .lupeo-var__btn.is-actif .lupeo-var__nom{color:var(--lp-ink)}
body .woocommerce div.product form.cart .variations th.label,
body .woocommerce div.product form.cart .variations label{
  font-size:14.5px;font-weight:600;color:var(--lp-ink);
}

/* Quantité et bouton d'achat : 56 px, coins de 8 px. */
body .woocommerce div.product form.cart .quantity{
  border:1px solid var(--lp-line-forte);
  border-radius:var(--lp-r-2);
  background:var(--lp-surface);
}
body .woocommerce div.product form.cart .single_add_to_cart_button{
  min-height:56px;
  border-radius:var(--lp-r-2);
  font-size:16px;
  font-weight:700;
  letter-spacing:-.005em;
}
/* Bouton d'achat à sa taille normale : il s'arrête au bout de son libellé (prix compris), à côté de la
   quantité, au lieu de s'étirer sur toute la rangée. Sur téléphone (≤ 560 px) il garde la rangée entière. */
@media (min-width:561px){
  body.woocommerce div.product form.cart .single_add_to_cart_button,
  body .woocommerce div.product form.cart .single_add_to_cart_button{
    flex:0 1 auto;
    width:auto;
    min-width:260px;
    max-width:100%;
    padding-inline:32px;
  }
}
/* Tant qu'une option reste à choisir, Blocksy éteint tout le bouton à 50 % — le libellé
   tombe à 2,2:1. Ici seul le FOND s'éclaircit (même rendu), le texte garde son contraste. */
body.woocommerce div.product form.cart .single_add_to_cart_button:is(.disabled,:disabled),
body .woocommerce div.product form.cart .single_add_to_cart_button:is(.disabled,:disabled){
  opacity:1;
  background-color:#80E9B5;
  background-color:color-mix(in srgb,var(--lp-green-400) 50%,#fff);
  color:var(--lp-green-900);
}

/* Confiance : quatre cartes à filet, pictogrammes sur tuile vert pâle. */
body .lupeo-trust__item{
  padding:14px;
  border:1px solid var(--lp-line);
  border-radius:var(--lp-r-3);
  background:var(--lp-surface);
}
body .lupeo-trust__ico{border-radius:var(--lp-r-2);background:var(--lp-green-100);color:var(--lp-green-600)}
body .lupeo-trust__item b{font-size:13.5px;color:var(--lp-ink)}
body .lupeo-trust__item > span:last-child{color:var(--lp-ink-2)}

/* « Attention — vérifiez avant de commander » : le signal « à vérifier » du
   design system (jaune pâle, ambre encre), jamais un aplat orange. */
body .lupeo-check{
  border:1px solid rgba(240,168,30,.5);
  border-radius:var(--lp-r-3);
  background:var(--lp-amber-50);
}
body .lupeo-check__head{border-bottom:1px solid rgba(240,168,30,.32);background:transparent}
body .lupeo-check__bang{border-radius:var(--lp-r-2);background:var(--lp-amber-500);color:#fff}
body .lupeo-check__head h4{font-family:var(--lp-sans);font-size:15.5px;letter-spacing:-.005em;color:var(--lp-amber-ink)}
body .lupeo-check__body li{color:var(--lp-ink-2)}
body .lupeo-check__num{border-color:rgba(240,168,30,.55);border-radius:var(--lp-r-1);color:var(--lp-amber-ink)}
body .lupeo-check__note{border-top:1px dashed rgba(240,168,30,.5)}
body .lupeo-check__lien{color:var(--lp-green-600)}

/* 3c. Sections de contenu : titres H2 du design system, texte de 16 px, photos
   dans un cadre gris arrondi, légendes en mono. */
body .lupeo-sections,
body .lupeo-compat-bloc{max-width:var(--theme-normal-container-max-width,1280px)}
body .lupeo-section{
  padding:clamp(32px,4vw,56px) 0;
  border-top:1px solid var(--lp-line);
}
body .lupeo-section--illustree{padding:clamp(32px,4vw,56px) 0}
body .lupeo-section__t{
  margin:0 0 clamp(14px,1.6vw,20px);
  font-family:var(--lp-sans);
  font-size:clamp(24px,2.6vw,34px);
  line-height:1.1;
  letter-spacing:-.024em;
  font-weight:700;
  color:var(--lp-ink);
}
body .lupeo-prose p{font-size:16px;line-height:1.6;color:var(--lp-ink-2)}
body .lupeo-prose p.lupeo-intro{font-size:18px;line-height:1.55;color:var(--lp-ink)}
body .lupeo-prose ul,
body .lupeo-prose ol{font-size:16px;line-height:1.6;color:var(--lp-ink-2)}
body .lupeo-prose strong{color:var(--lp-ink)}
body .lupeo-prose h4{
  margin:28px 0 8px;
  font-family:var(--lp-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  color:var(--lp-ink-3);
}
body .lupeo-prose a{color:var(--lp-green-600);text-decoration:underline;text-decoration-color:rgba(0,124,117,.35);text-underline-offset:3px}
body .lupeo-prose a:hover{text-decoration-color:currentColor}
body .lupeo-duo__photo img{
  border:1px solid var(--lp-line);
  border-radius:var(--lp-r-3);
  background:var(--lp-surface-2);
}
body .lupeo-duo__photo figcaption{
  padding-left:0;
  border-left:0;
  font-family:var(--lp-mono);
  font-size:11.5px;
  letter-spacing:.02em;
  line-height:1.5;
  color:var(--lp-ink-3);
}
/* Photo et légende alignées (retour de David du 01/10/2026). La photo est plafonnée en hauteur et centrée dans sa
   colonne, alors que la légende, elle, courait sur toute la colonne : à 1 840 px la légende commençait 115 px
   à gauche de la photo. La figure prend maintenant la largeur de la photo (centrée dans la colonne) et la légende
   ne dépasse pas cette largeur : même bord gauche, même largeur, retour à la ligne sous la photo. Si un navigateur
   n'applique pas le plafond de hauteur au calcul de la largeur, la figure reste large : la photo s'aligne alors à
   gauche, sur la légende. */
body .lupeo-duo__photo figure{width:fit-content;max-width:100%;margin-inline:auto}
body .lupeo-duo__photo figure img{margin-inline:0}
body .lupeo-duo__photo figcaption{width:0;min-width:100%}
/* Section illustrée sur téléphone (recette du 21/09/2026, point O3). L'extension déclare sa colonne unique
   « 1fr » sous 760 px, c'est-à-dire minmax(auto,1fr) : un tableau large dans le texte — même posé dans un
   conteneur qui défile — élargit alors la colonne au-delà de l'écran (20 fiches sur 296 à 390 px, texte de
   411 à 680 px de large, coupé au bord). minmax(0,1fr), comme sur ordinateur : la colonne garde la largeur de
   l'écran et le conteneur du tableau défile. Rien ne change au-dessus de 760 px. */
@media (max-width:760px){
  body .lupeo-duo{grid-template-columns:minmax(0,1fr)}
}

/* Caractéristiques : le tableau technique du design system — libellé en
   encre douce, valeur en mono. */
body .lupeo-caracs__scroll{
  border:1px solid var(--lp-line);
  border-radius:var(--lp-r-3);
  background:var(--lp-surface);
}
body .lupeo-caracs th,
body .lupeo-caracs td,
body .lupeo-section--attributs .woocommerce-product-attributes th,
body .lupeo-section--attributs .woocommerce-product-attributes td{padding:13px 20px;border-bottom:1px solid var(--lp-line-2)}
body .lupeo-caracs th,
body .lupeo-section--attributs .woocommerce-product-attributes th{width:38%;font-size:14px;font-weight:500;color:var(--lp-ink-2)}
body .lupeo-caracs td,
body .lupeo-section--attributs .woocommerce-product-attributes td{
  font-family:var(--lp-mono);
  font-size:13.5px;
  font-weight:500;
  font-variant-numeric:normal;
  color:var(--lp-ink);
}

/* « En résumé » : encadré vert brume. */
body .lupeo-geo{
  padding:clamp(20px,2.4vw,28px);
  border:1px solid #CFE9DD;
  border-radius:var(--lp-r-3);
  background:var(--lp-green-50);
}
body .lupeo-geo__t{font-family:var(--lp-mono);font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--lp-green-600)}
body .lupeo-geo p{font-size:15.5px;color:var(--lp-ink-2)}

/* Pièces compatibles / produits liés. */
body .lupeo-compat-bloc{padding:clamp(32px,4vw,56px) 0 clamp(16px,2vw,24px);border-top:1px solid var(--lp-line)}
body .lupeo-compat-bloc__t{
  font-family:var(--lp-sans);
  font-size:clamp(24px,2.6vw,34px);
  line-height:1.1;
  letter-spacing:-.024em;
  color:var(--lp-ink);
}
body .lupeo-compat-bloc__t span{
  height:auto;
  padding:3px 9px;
  border-radius:var(--lp-r-pill);
  background:var(--lp-green-100);
  font-family:var(--lp-mono);
  font-size:12px;
  font-weight:500;
  color:var(--lp-green-600);
}
body .lupeo-compat-bloc__chapo{font-size:16px;color:var(--lp-ink-2)}
body .lupeo-compat-bloc__grille{gap:clamp(14px,1.6vw,20px)}
body .lupeo-compat-bloc__plus a{color:var(--lp-ink);text-decoration:underline;text-decoration-color:var(--lp-green-400);text-decoration-thickness:2px;text-underline-offset:5px}
body .lupeo-compat-bloc__plus a:hover{color:var(--lp-green-600)}
@media (max-width:860px){
  body .summary .product_title{font-size:28px}
  body.woocommerce div.product p.price,
body .woocommerce div.product p.price{font-size:30px}
}

/* Barre d'achat collante (fiche, mobile) : prix en chiffres proportionnels,
   bouton au vert action comme la zone d'achat. */
body .lupeo-achat__prix,
body .lupeo-achat__prix .amount{font-family:var(--lp-sans);font-weight:700;font-variant-numeric:normal;letter-spacing:-.02em;color:var(--lp-ink)}
body .lupeo-achat__prix .woocommerce-price-suffix{font-family:var(--lp-mono);font-size:10.5px;font-weight:400;color:var(--lp-ink-3)}
body .lupeo-achat__nom,
body .lupeo-achat__choix{font-family:var(--lp-sans)}
body .lupeo-achat__btn{border-radius:var(--lp-r-2);box-shadow:none}

/* 3z. Alignement sur les cotes MESURÉES du prototype « Fiche produit » (19/09/2026) :
   galerie 1,05 fr / achat 1 fr, écart 28-64 px ; titre 48 px ; prix 44 px ; cadre de
   la galerie à 14 px d'arrondi et filet #EEF1F0 ; vignettes à filet de 2 px ; bouton
   d'ajout de 56 px. */
@media (min-width:1041px){
  #main .product-entry-wrapper{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
  #main .product-entry-wrapper > .woocommerce-product-gallery,
  #main .product-entry-wrapper > .summary{width:auto;max-width:none;margin:0;flex:none}
  /* Colonne d'achat plafonnée à 640 px : au-delà de 1 440 px de large elle s'étirait à 820 px
     (bloc d'expédition, cartes de confiance, boutons) au lieu de rester compacte. */
  #main .product-entry-wrapper > .summary{max-width:640px}
}
body .summary .product_title{font-size:clamp(32px,3.6vw,48px);line-height:1.02;letter-spacing:-.032em;margin:0 0 12px}
body.woocommerce div.product p.price,
body .woocommerce div.product p.price{margin:0 0 24px;font-size:44px;line-height:1;letter-spacing:-.03em}
body.woocommerce div.product p.price del,
body .woocommerce div.product p.price del{font-size:20px}
body .woocommerce-product-gallery .flexy{border-color:var(--lp-line-2);border-radius:var(--lp-r-4)}
body .woocommerce-product-gallery .flexy-pills li{border:2px solid var(--lp-line-2);border-radius:9px}
body .woocommerce-product-gallery .flexy-pills li.active{border-color:var(--lp-green-600);box-shadow:none}
body .summary .single_add_to_cart_button{min-height:56px}
/* Mobile (prototype « Mobile », écran 03) : galerie pleine largeur sur fond gris, vignettes de
   58 px à filet de 2 px, prix de 34 px. */
@media (max-width:780px){
  body .woocommerce-product-gallery{margin-inline:calc(-1 * var(--lp-gouttiere))}
  /* De 690 à 780 px, Blocksy impose width:100% à la galerie : les marges négatives la décalaient à gauche au lieu de l'élargir. */
  #main .product-entry-wrapper > .woocommerce-product-gallery{width:auto}
  body .woocommerce-product-gallery .flexy{border-radius:0;border-inline:0}
  body .woocommerce-product-gallery .flexy-pills ol{margin-top:10px;padding-inline:var(--lp-gouttiere)}
  body .woocommerce-product-gallery .flexy-pills li{flex:0 0 58px;width:58px;height:58px;border-radius:8px}
  body.woocommerce div.product p.price,
  body .woocommerce div.product p.price{font-size:34px;letter-spacing:-.028em}
}
/* Bouton d'achat sur téléphone (recette du 21/09/2026, point O4). La quantité (100 px) et le bouton se
   partageaient la rangée : à 390 px le bouton n'avait que 240 px, à 320 px 170 px, et « Ajouter au panier —
   1 790,00 € » passait sur 2 ou 3 lignes (85 à 111 px de haut, prix coupé en deux). Comme dans le prototype,
   le bouton prend toute la rangée, sous la quantité ; le corps du libellé suit l'écran (16 px dès 348 px,
   14,7 px à 320 px) pour que le prix le plus long du catalogue (2 890,00 €) tienne sur une ligne. Mise en
   page seulement : l'ajout au panier, la quantité et le prix ne sont pas touchés. */
@media (max-width:560px){
  body.woocommerce div.product form.cart .ct-cart-actions{row-gap:12px}
  body.woocommerce div.product form.cart .single_add_to_cart_button{
    flex:1 1 100%;
    padding-inline:12px;
    font-size:clamp(14px,4.6vw,16px);
  }
}

/* ---------- 4. Recherche ---------------------------------------------------- */

body.search .hero-section{margin-bottom:0;padding:clamp(18px,2.2vw,28px) 0 0}
body.search .hero-section .entry-header{padding:0;min-height:0;text-align:left;max-width:none;width:auto}
body.search .hero-section .page-title{
  margin:0;
  font-size:clamp(30px,3.6vw,44px);
  line-height:1.05;
  letter-spacing:-.028em;
  max-width:28ch;
}
body.search #main > .ct-container,
body.search .lp-recherche{padding-top:clamp(18px,2.2vw,28px)}

/* Le champ : grand, à filet, le terme cherché reste visible et modifiable.
   Focus : contour vert Lupéo (le prototype). */
.lp-rech{
  display:flex;
  align-items:center;
  gap:10px;
  max-width:760px;
  margin:clamp(20px,2.6vw,32px) 0 clamp(28px,3.4vw,44px);
  padding:6px 6px 6px 16px;
  border:1px solid var(--lp-line-forte);
  border-radius:var(--lp-r-3);
  background:var(--lp-surface);
  transition:border-color .15s,box-shadow .15s;
}
.lp-rech:focus-within{border-color:var(--lp-green-600);box-shadow:0 0 0 3px rgba(0,124,117,.16)}
.lp-rech__ico{display:grid;place-items:center;color:var(--lp-ink-3)}
.lp-rech .lp-rech__champ,
body .lp-rech input[type="search"].lp-rech__champ{
  flex:1;
  min-width:0;
  height:46px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  font-family:var(--lp-sans);
  font-size:17px;
  font-weight:400;
  color:var(--lp-ink);
  outline:0;
}
.lp-rech__go{min-height:46px;padding:0 22px}
@media (max-width:560px){
  .lp-rech{padding:5px 5px 5px 12px}
  .lp-rech__go{padding:0 16px}
}

.lupeo-resultats-titre{
  margin:0 0 18px;
  font-family:var(--lp-sans);
  font-size:clamp(22px,2.2vw,28px);
  line-height:1.15;
  letter-spacing:-.02em;
  font-weight:700;
  color:var(--lp-ink);
}
.lupeo-resultats-titre--guides{margin-top:clamp(40px,5vw,72px)}

/* Aucun résultat : un encadré qui redirige vers les rayons — jamais une
   page vide. */
.lp-recherche__vide{
  max-width:760px;
  padding:clamp(20px,2.6vw,32px);
  border:1px solid var(--lp-line);
  border-radius:var(--lp-r-4);
  background:var(--lp-surface-2);
}
.lp-recherche__vide-txt{margin:0 0 20px;font-size:16.5px;line-height:1.55;color:var(--lp-ink-2)}
.lp-recherche__rayons{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0;list-style:none}
.lp-recherche__rayons .lp-puce{align-items:center;font-size:14px}
.lp-recherche__rayons .lp-ico{color:var(--lp-green-600)}
.lp-recherche__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}

/* Bandeau d'aide (résultats de recherche, pages de rayon) : vert brume, un
   titre, une phrase, un bouton. Le texte est celui de l'aide à la
   compatibilité de l'accueil. */
.lp-bandeau-aide{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px 32px;
  flex-wrap:wrap;
  margin:clamp(36px,4.4vw,64px) 0 0;
  padding:clamp(20px,2.4vw,28px) clamp(20px,2.6vw,32px);
  border:1px solid #CFE9DD;
  border-radius:var(--lp-r-4);
  background:var(--lp-green-50);
}
.lp-bandeau-aide h2{margin:0 0 6px;font-size:clamp(20px,2vw,24px);line-height:1.2;letter-spacing:-.018em}
.lp-bandeau-aide p{margin:0;max-width:60ch;font-size:15.5px;line-height:1.55;color:var(--lp-ink-brume)}

/* La recherche par produit (boutique) partage la mise en page des rayons. */
body.search-results .lupeo-filtres{margin-top:0}

/* 4z. Alignement sur le prototype « Recherche » (cotes mesurées le 19/09/2026) : une
   bande grise en tête de page porte le champ (820 px, 66 px de haut, arrondi 11 px,
   contour vert), puis le titre de 40 px et les « résultats rapides » (trois cartes de
   18/20 px de marge). */
.lp-rech-bande{background:var(--lp-surface-2)}
.lp-rech-bande__in{max-width:var(--lp-cadre,1840px);margin:0 auto;padding:48px var(--lp-gouttiere)}
.lp-rech-bande .lp-rech{max-width:820px;margin:0;padding:15px 18px;gap:14px;border:1px solid var(--lp-green-600);border-radius:11px}
.lp-rech-bande .lp-rech__ico svg{width:22px;height:22px}
.lp-rech-bande .lp-rech .lp-rech__champ,
body .lp-rech-bande .lp-rech input[type="search"].lp-rech__champ{height:auto;font-size:18px;line-height:1.4}
.lp-rech-bande .lp-rech__go{min-height:0;padding:9px 20px}
body.search .hero-section{padding:clamp(28px,3.6vw,52px) 0 0}
body.search .hero-section .page-title{font-size:clamp(30px,3.2vw,40px);max-width:none}
body.search .hero-section .lupeo-rayon-surtitre{display:none}
body.search .hero-section .entry-header{margin-bottom:24px}

.lp-rapides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 40px}
.lp-rapide{
  display:flex;align-items:center;gap:16px;padding:18px 20px;
  border:1px solid var(--lp-line);border-radius:12px;background:var(--lp-surface);
  color:var(--lp-ink);text-decoration:none;
}
.lp-rapide--premier{border-color:#BEE7D5;background:var(--lp-green-50)}
.lp-rapide:hover{border-color:var(--lp-ink);color:var(--lp-ink)}
.lp-rapide__ico{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:10px;background:var(--lp-surface-2);color:var(--lp-green-600)}
.lp-rapide--premier .lp-rapide__ico{background:#fff}
.lp-rapide__ico svg{width:26px;height:26px}
.lp-rapide__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.lp-rapide__type{font-family:var(--lp-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--lp-ink-3)}
.lp-rapide__titre{font-size:16px;font-weight:700;line-height:1.25;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-rapide__meta{font-size:12.5px;color:var(--lp-ink-3)}
.lp-rapide__fleche{flex:none;width:18px;height:18px;margin-left:auto;color:var(--lp-ink-2)}
@media (max-width:1040px){.lp-rapides{grid-template-columns:minmax(0,1fr)}}

/* ---------- 5. Ma trottinette : marques, modèles, page machine -------------- */

/* Boutons historiques (`.lupeo-btn`, posés par lupeo-boutique.css et repris par
   la page machine, le blog, les guides) : même forme que les boutons du
   design system — 8 px de rayon, 600, primaire au vert Lupéo, contour au
   filet. Le survol ne soulève plus le bouton. */
body .lupeo-btn{
  min-height:48px;
  padding:13px 22px;
  border-width:1px;
  border-radius:var(--lp-r-2);
  font-family:var(--lp-sans);
  font-size:15px;
  font-weight:600;
  letter-spacing:0;
}
body .lupeo-btn--teal{background:var(--lp-green-600);color:#fff;box-shadow:none}
body .lupeo-btn--teal:hover,
body .lupeo-btn--teal:focus-visible{background:var(--lp-green-800);color:#fff;transform:none;box-shadow:none}
body .lupeo-btn--ligne{border-color:var(--lp-line-forte);background:var(--lp-surface);color:var(--lp-ink)}
body .lupeo-btn--ligne:hover,
body .lupeo-btn--ligne:focus-visible{border-color:var(--lp-ink);color:var(--lp-ink);transform:none}

/* 5a. Racine et page de marque. Les cartes de marque et de modèle prennent la
   forme des cartes du design system : une vignette sur gris atelier, puis le
   nom et le décompte. Les grilles occupent toute la largeur du cadre (elles
   s'arrêtaient à 240 px par colonne). */
body .lupeo-mt{
  --mt-bord:var(--lp-line);
  --mt-gap:16px;
  font-family:var(--lp-sans);
  color:var(--lp-ink);
}
/* Pages « marque » et racine : le titre de l'écran « Page marque » du prototype, 54 px (4 vw). */
body:has(.lupeo-mt__grille--modeles) .hero-section .page-title{font-size:clamp(32px,4vw,54px);line-height:1;letter-spacing:-.034em}
body .lupeo-mt h2{font-family:var(--lp-sans);font-weight:700;letter-spacing:-.02em}
body .lupeo-mt__chapo{max-width:62ch;margin:0 0 28px;font-size:17px;line-height:1.6;color:var(--lp-ink-2)}

body .lupeo-mt__fil{margin-bottom:20px}
body .lupeo-mt__fil a,
body .lupeo-mt__catalogue-marque a{
  min-height:40px;
  padding:8px 15px 8px 12px;
  border:1px solid var(--lp-line);
  border-radius:var(--lp-r-pill);
  background:var(--lp-surface);
  font-size:14px;
  font-weight:600;
  color:var(--lp-ink);
}
body .lupeo-mt__fil a:hover,
body .lupeo-mt__fil a:focus-visible,
body .lupeo-mt__catalogue-marque a:hover,
body .lupeo-mt__catalogue-marque a:focus-visible{border-color:var(--lp-ink);background:var(--lp-surface);transform:none}
body .lupeo-mt__fil .lupeo-i,
body .lupeo-mt__catalogue-marque .lupeo-i{color:var(--lp-green-600)}
body .lupeo-mt__catalogue-marque{margin:-8px 0 32px}

body .lupeo-mt__grille{gap:var(--mt-gap);justify-content:stretch;margin-bottom:clamp(36px,4.4vw,56px)}
body .lupeo-mt__grille--marques{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
body .lupeo-mt__grille--modeles,
body .lupeo-mt__grille--produits{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}

body .lupeo-mt__marque,
body .lupeo-mt__modele{
  align-items:stretch;
  justify-content:flex-start;
  gap:0;
  padding:0;
  border:1px solid var(--lp-line);
  border-radius:var(--lp-r-3);
  background:var(--lp-surface);
  box-shadow:none;
  overflow:hidden;
  text-align:left;
  transition:box-shadow .2s,border-color .2s;
}
body .lupeo-mt__marque:hover,
body .lupeo-mt__modele:hover{transform:none;border-color:#D2DAD6;box-shadow:var(--lp-ombre-2)}
body .lupeo-mt__marque:focus-visible,
body .lupeo-mt__modele:focus-visible{outline:2px solid var(--lp-green-600);outline-offset:3px}

/* Vignette de marque : le logo, sur le gris atelier (le multiply fond le blanc
   des logos en JPEG dans le gris). Sans logo, le nom tient lieu de marque. */
body .lupeo-mt__marque-logo,
body .lupeo-mt__marque--sans-logo .lupeo-mt__marque-logo{
  height:auto;
  min-height:104px;
  margin:0;
  padding:20px;
  background:var(--lp-surface-2);
  border-bottom:1px solid var(--lp-line-2);
}
body .lupeo-mt__marque-logo img{max-height:56px;max-width:72%;mix-blend-mode:multiply}
body .lupeo-mt__marque-logo .lupeo-marque__txt,
body .lupeo-mt__marque--sans-logo .lupeo-marque__txt{
  font-family:var(--lp-sans);
  font-size:17px;
  font-weight:700;
  letter-spacing:.09em;
  color:var(--lp-ink);
}
body .lupeo-mt__marque-nom,
body .lupeo-mt__modele-nom{
  padding:14px 18px 0;
  font-family:var(--lp-sans);
  font-size:18px;
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.25;
}
body .lupeo-mt__marque-nb,
body .lupeo-mt__modele-nb{
  padding:5px 18px 16px;
  font-family:var(--lp-mono);
  font-size:12px;
  line-height:1.4;
  color:var(--lp-ink-3);
}
body .lupeo-mt__marque--sans-logo .lupeo-mt__marque-nb{padding-top:12px}

/* Vignette de modèle : la photo sur gris atelier ; sans photo, le nom du
   modèle en texte discret. */
body .lupeo-mt__photo{
  aspect-ratio:4/3;
  margin:0;
  padding:14px;
  border-radius:0;
  background:var(--lp-surface-2);
  border-bottom:1px solid var(--lp-line-2);
}
body .lupeo-mt__img{mix-blend-mode:multiply}
body .lupeo-mt__photo-txt{
  border-radius:0;
  background:transparent;
  font-family:var(--lp-sans);
  font-size:16px;
  font-weight:600;
  letter-spacing:-.005em;
  color:var(--lp-ink-3);
}

/* En-tête du modèle (écran intermédiaire), compteurs de titre, encadré vide. */
body .lupeo-mt__tete{border:1px solid var(--lp-line);border-radius:var(--lp-r-4);background:var(--lp-green-50)}
body .lupeo-mt__tete-photo{border-radius:var(--lp-r-3);background:var(--lp-surface)}
body .lupeo-mt__dispo{background:var(--lp-green-100);color:var(--lp-green-800);border-radius:var(--lp-r-pill)}
body .lupeo-mt__titre{font-size:clamp(20px,2vw,24px)}
body .lupeo-mt__titre span{font-family:var(--lp-mono);font-size:12px;font-weight:500;color:var(--lp-green-600);background:var(--lp-green-100)}
body .lupeo-mt__vide{border:1px solid var(--lp-line);border-radius:var(--lp-r-3);background:var(--lp-surface-2)}

/* Encart « Vous ne trouvez pas… ? » : le vert profond du design system. */
body .lupeo-mt__secours{
  gap:20px 32px;
  margin-top:8px;
  padding:clamp(24px,3vw,36px) clamp(20px,3vw,40px);
  border-radius:var(--lp-r-4);
  background:var(--lp-green-900);
}
body .lupeo-mt__secours b{font-family:var(--lp-sans);font-size:clamp(20px,2vw,24px);font-weight:700;letter-spacing:-.02em;color:#fff}
body .lupeo-mt__secours p{font-size:15.5px;color:var(--lp-green-texte-900)}
body .lupeo-mt a.lupeo-mt__btn{
  padding:13px 22px;
  border-radius:var(--lp-r-2);
  background:#fff;
  font-size:15px;
  font-weight:600;
  color:var(--lp-green-900);
}
body .lupeo-mt a.lupeo-mt__btn:hover,
body .lupeo-mt a.lupeo-mt__btn:focus-visible{background:var(--lp-green-100);transform:none;box-shadow:none}

@media (max-width:640px){
  body .lupeo-mt__grille--marques,
  body .lupeo-mt__grille--modeles,
  body .lupeo-mt__grille--produits{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  body .lupeo-mt__marque-logo,
  body .lupeo-mt__marque--sans-logo .lupeo-mt__marque-logo{min-height:84px;padding:14px}
  body .lupeo-mt__marque-logo img{max-height:44px}
  body .lupeo-mt__marque-nom,
  body .lupeo-mt__modele-nom{padding:12px 14px 0;font-size:16px}
  body .lupeo-mt__marque-nb,
  body .lupeo-mt__modele-nb{padding:4px 14px 14px;font-size:11.5px}
  body .lupeo-mt__photo{padding:10px}
  body .lupeo-mt__photo-txt{font-size:14px}
}

/* 5b. Page d'un modèle (« page machine »). Feuille lupeo-machine.css intacte :
   on reprend ici, par surcharge, ses couleurs, ses graisses et ses rayons. */
body .lupeo-machine{
  --lm-menthe:var(--lp-green-50);
  --lm-bord:var(--lp-line);
  --lm-in:min(var(--lp-wrap),calc(100vw - 2 * var(--lp-gouttiere)));
  font-family:var(--lp-sans);
}
body .lupeo-machine :where(h2,h3){font-family:var(--lp-sans)}
/* Menu « Version sélectionnée » : la liste s'ancrait à droite avec la largeur de son plus long libellé
   (nowrap) et sortait de l'écran par la gauche. Elle prend la largeur du sélecteur, les libellés passent à la ligne. */
body .lupeo-machine__selection--menu ul{max-width:calc(100% + 3px)}
body .lupeo-machine__selection--menu li a{white-space:normal;overflow-wrap:anywhere}
body .lupeo-machine .lupeo-machine__h2{font-size:clamp(28px,3vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.08}
body .lupeo-machine__sous-titre{font-size:16px;color:var(--lp-ink-2)}
body .lupeo-machine__etiquette,
body .lupeo-machine .lupeo-sur-titre{
  font-family:var(--lp-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--lp-green-600);
}
body .lupeo-machine .lupeo-sur-titre::before{background:var(--lp-amber-500)}

/* Bandeau d'ouverture : vert brume, titre en 700, données en mono. */
body .lupeo-machine__bandeau{background:var(--lp-green-50);border-bottom:1px solid var(--lp-line)}
body .lupeo-machine__contexte{
  font-family:var(--lp-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.14em;
  color:var(--lp-ink-3);
}
body .lupeo-machine .lupeo-machine__titre{font-family:var(--lp-sans);font-weight:700;letter-spacing:-.035em}
body .lupeo-machine__intro{color:var(--lp-ink-brume)}
body .lupeo-machine a.lupeo-machine__version{
  border:1px solid var(--lp-line-forte);
  border-radius:var(--lp-r-3);
  background:var(--lp-surface);
}
body .lupeo-machine a.lupeo-machine__version:hover{border-color:var(--lp-ink);transform:none}
body .lupeo-machine a.lupeo-machine__version small{font-family:var(--lp-mono);font-size:11px;color:var(--lp-ink-3)}
body .lupeo-machine a.lupeo-machine__version.is-choisie{background:var(--lp-green-600);border-color:var(--lp-green-600);color:#fff}
body .lupeo-machine a.lupeo-machine__version.is-choisie small{color:rgba(255,255,255,.86)}
body .lupeo-machine a.lupeo-machine__aide{text-decoration:none;border-bottom:2px solid var(--lp-green-400);padding:6px 0 3px;color:var(--lp-ink)}
body .lupeo-machine a.lupeo-machine__aide:hover,
body .lupeo-machine a.lupeo-machine__aide:focus-visible{color:var(--lp-green-600)}
body .lupeo-machine__neuve{border-radius:var(--lp-r-pill);background:rgba(255,255,255,.8)}

/* Sans photo, le bandeau et l'atelier montrent le nom du modèle : un cadre
   sobre dans le bandeau, un simple libellé au centre de l'atelier. */
body .lupeo-machine__photo-txt{
  aspect-ratio:4/3;
  max-width:380px;
  border:1px solid #CFE9DD;
  border-radius:var(--lp-r-4);
  background:rgba(255,255,255,.7);
  font-size:clamp(18px,2vw,24px);
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--lp-green-800);
}
body .lupeo-machine__atelier-photo .lupeo-machine__photo-txt{
  aspect-ratio:auto;
  max-width:none;
  height:auto;
  border:0;
  background:transparent;
}

/* Fiche technique (quand elle est renseignée). */
body .lupeo-machine__fiche{border-bottom:1px solid var(--lp-line)}
body .lupeo-machine__fiche dt{font-family:var(--lp-mono);font-weight:400;letter-spacing:.14em;color:var(--lp-ink-3)}
body .lupeo-machine__fiche dd{font-size:16.5px;letter-spacing:-.01em}

/* Choix de la pièce : sélecteur de modèle, atelier visuel, zones. */
body .lupeo-machine__selection{border:1px solid var(--lp-ink);border-radius:var(--lp-r-3)}
body .lupeo-machine__selection-cle{font-family:var(--lp-mono);font-weight:400;letter-spacing:.12em}
body .lupeo-machine__selection > a{color:var(--lp-green-600)}
body .lupeo-machine__atelier{border-radius:var(--lp-r-4);border-color:var(--lp-line)}
body .lupeo-machine__atelier-consigne{font-size:14px;color:var(--lp-ink-3)}
body .lupeo-machine button.lupeo-machine__zone{
  border-color:var(--lp-line);
  border-radius:var(--lp-r-3);
  background:var(--lp-surface);
}
body .lupeo-machine button.lupeo-machine__zone:hover{border-color:var(--lp-ink);transform:none;box-shadow:none}
body .lupeo-machine button.lupeo-machine__zone[aria-pressed="true"]{
  background:var(--lp-green-50);
  border-color:var(--lp-green-600);
  box-shadow:inset 0 0 0 1px var(--lp-green-600);
}
body .lupeo-machine button.lupeo-machine__zone[aria-disabled="true"]{background:var(--lp-surface-2);border-color:var(--lp-line)}
body .lupeo-machine__zone-ico{border-radius:var(--lp-r-2);background:var(--lp-green-50);color:var(--lp-green-600)}
body .lupeo-machine__zone[aria-pressed="true"] .lupeo-machine__zone-ico{background:var(--lp-surface)}
body .lupeo-machine__zone-txt small{font-family:var(--lp-mono);font-weight:500;letter-spacing:.12em;color:var(--lp-green-600)}
body .lupeo-machine__zone-txt b{font-size:16px;letter-spacing:-.01em}
body .lupeo-machine__zone-nb{font-family:var(--lp-mono);font-size:11.5px;color:var(--lp-ink-3)}
body .lupeo-machine__familles{border-top-color:var(--lp-line)}
body .lupeo-machine__familles-liste a span{font-family:var(--lp-mono);font-size:11.5px;font-weight:400;color:var(--lp-ink-3)}
body .lupeo-machine__familles-liste a:hover,
body .lupeo-machine__familles-liste a[aria-current="true"]{color:var(--lp-green-600);border-bottom-color:var(--lp-green-400)}
body .lupeo-machine button.lupeo-machine__familles-tout{color:var(--lp-green-600)}

/* Les pièces : fond gris atelier, bandeau de compatibilité en vert profond. */
body .lupeo-machine__pieces{background:var(--lp-surface-2);border-top-color:var(--lp-line)}
body .lupeo-machine__banniere{border-radius:var(--lp-r-3);background:var(--lp-green-900)}
body .lupeo-machine__banniere-ico{background:transparent;color:var(--lp-green-400)}
body .lupeo-machine__banniere-ico .lupeo-i{width:22px;height:22px;stroke-width:2.2}
body .lupeo-machine .lupeo-machine__banniere-titre{font-family:var(--lp-sans);font-size:17px;font-weight:600;letter-spacing:-.005em}
body .lupeo-machine a.lupeo-machine__methode{color:var(--lp-green-lien-900)}
body .lupeo-machine a.lupeo-machine__methode:hover{color:#fff}
body .lupeo-machine button.lupeo-machine__affiner{border-color:rgba(255,255,255,.35);border-radius:var(--lp-r-2)}
body .lupeo-machine__banniere.is-toutes{background:var(--lp-amber-50);box-shadow:inset 0 0 0 1px var(--lp-amber-500)}
body .lupeo-machine__banniere.is-toutes .lupeo-machine__banniere-ico{background:var(--lp-amber-500);color:var(--lp-ink)}
body .lupeo-machine__banniere.is-toutes a.lupeo-machine__methode{color:var(--lp-amber-ink)}
body .lupeo-machine__filtres{border-radius:var(--lp-r-3);border-color:var(--lp-line)}
body .lupeo-machine__filtres legend{font-family:var(--lp-mono);font-weight:500;letter-spacing:.14em;color:var(--lp-green-600)}
body .lupeo-machine .lupeo-machine__filtres-choix button{border:1px solid var(--lp-line-forte)}
body .lupeo-machine .lupeo-machine__filtres-choix button:hover{border-color:var(--lp-ink)}
body .lupeo-machine .lupeo-machine__filtres-choix button[aria-pressed="true"]{background:var(--lp-green-600);border-color:var(--lp-green-600);color:#fff}
body .lupeo-machine__statut{font-size:14px;color:var(--lp-ink-3)}
body .lupeo-machine button.lupeo-machine__raz{color:var(--lp-green-600)}
body .lupeo-machine .lupeo-card{border-color:var(--lp-line);border-radius:var(--lp-r-3)}

/* « Reconnaître votre version », accessoires universels, encart final. */
body .lupeo-machine__reconnaitre-item{border-color:var(--lp-line);border-radius:var(--lp-r-3)}
body .lupeo-machine__reconnaitre-item.is-courante{border-color:var(--lp-green-600);box-shadow:inset 0 0 0 1px var(--lp-green-600)}
body .lupeo-machine__reconnaitre-photo{background:var(--lp-surface-2);border-radius:var(--lp-r-2)}
body .lupeo-machine .lupeo-machine__reconnaitre-txt h3{font-weight:700}
body .lupeo-machine__ici{background:var(--lp-green-100);color:var(--lp-green-600)}
body .lupeo-machine__universels-zone{border-top-color:var(--lp-line)}
body .lupeo-machine__universels summary{background:var(--lp-surface-2);border-color:var(--lp-line);border-radius:var(--lp-r-3)}
body .lupeo-machine__universels summary:hover{border-color:var(--lp-ink)}
body .lupeo-machine .lupeo-machine__universels-titre{font-weight:700}
body .lupeo-machine__universels-resume{color:var(--lp-green-600)}

@media (max-width:900px){
  /* Deux colonnes de zones : des cartes de même hauteur, alignées en haut
     (elles étaient centrées, donc décalées quand un titre passe sur deux
     lignes). */
  body .lupeo-machine__atelier-plan{align-items:stretch}
  body .lupeo-machine__photo-txt{aspect-ratio:16/7;max-width:none;width:100%}
  body .lupeo-machine__atelier-photo .lupeo-machine__photo-txt{aspect-ratio:auto;padding:4px 0 8px}
}
@media (max-width:640px){
  body .lupeo-machine .lupeo-machine__banniere-titre{font-size:16px}
}

/* ---------- 6. Blog : liste éditoriale, « à la une », archives ------------- */

/* Bandeau de titre du blog (le <h1> et la description sont ceux de Blocksy). */
.lp-blog .page-title{font-size:clamp(32px,4vw,54px);line-height:1;letter-spacing:-.034em;max-width:20ch}
/* Tête de « Lupéo - Guides » (lot H du 20/09/2026) : le prototype n'a AUCUN espace au-dessus du fil d'Ariane (le 60 px de
   `data-vertical-spacing` de Blocksy en ajoutait), un fil de 12,5 px sous 20 px de marge haute et basse, séparé par « / »,
   un surtitre à .18em séparé du titre de 16 px, un titre à 18 px du chapô. */
.lp-blog[data-vertical-spacing]{padding-top:0}
.lp-blog,.lp-art{text-wrap:pretty}
.lp-blog .ct-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:20px 0;font-size:12.5px;line-height:normal;color:#6B7572}
.lp-blog .ct-breadcrumbs > span{display:inline-flex;align-items:center;gap:9px}
.lp-blog .ct-breadcrumbs > span > svg{display:none}
.lp-blog .ct-breadcrumbs > span:not(.last-item)::after{content:"/";color:#C9D2CE}
.lp-blog .lupeo-rayon-surtitre{margin:0 0 16px;letter-spacing:.18em;line-height:normal}
.lp-blog h1.page-title{margin:0 0 18px;text-wrap:pretty}
.lp-blog__titre-liste{text-wrap:pretty}
.lp-blog .page-description{max-width:62ch;margin:0 0 28px;font-size:17.5px;line-height:1.6;color:var(--lp-ink-2)}
.lp-blog .page-description p{margin:0}
.lp-blog__recherche{max-width:560px;margin:0 0 clamp(28px,3.6vw,44px)}
.lp-blog__tete{padding-bottom:0}

/* « À la une » : le dernier guide, en grand — panneau vert brume pleine largeur,
   texte à gauche, image à droite (les deux mènent à l'article). */
.lp-une{border-block:1px solid #CBE6DC;background:var(--lp-green-50)}
.lp-une__in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:stretch;max-width:var(--lp-cadre,1840px);margin:0 auto}
.lp-une--sans-image .lp-une__in{grid-template-columns:minmax(0,1fr)}
.lp-une__texte{display:flex;flex-direction:column;justify-content:center;padding:clamp(36px,4.5vw,68px) var(--lp-gouttiere)}
.lp-une__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  margin:0 0 18px;
  font-family:var(--lp-mono);font-size:10.5px;font-weight:400;letter-spacing:.16em;line-height:normal;text-transform:uppercase;
  color:var(--lp-ink-brume);
}
.lp-une__meta [aria-hidden="true"]{color:#7FC9BF}
.lp-une__titre{margin:0 0 16px;max-width:20ch;font-size:clamp(26px,3.2vw,42px);line-height:1.05;letter-spacing:-.03em;font-weight:700;text-wrap:pretty}
.lp-une__titre a{color:var(--lp-ink);text-decoration:none}
.lp-une__titre a:hover,.lp-une__titre a:focus-visible{color:var(--lp-green-600)}
.lp-une__chapo{max-width:52ch;margin:0 0 26px;font-size:16.5px;line-height:1.6;color:var(--lp-ink-brume)}
.lp-une .lp-btn{align-self:flex-start;padding:15px 22px;font-size:15px;line-height:normal}
.lp-une__media{position:relative;display:block;min-height:clamp(240px,30vw,420px);overflow:hidden}
.lp-une__img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.lp-une__media:hover .lp-une__img{transform:scale(1.02)}
@media (max-width:1040px){
  .lp-une__in{grid-template-columns:minmax(0,1fr)}
  /* Empilé, le prototype garde la hauteur mini de l'image (240 à 420 px) : un cadre 3/2 ajoutait 270 à 380 px à 1 024 et 768 px. */
  .lp-une__media{aspect-ratio:auto}
}
@media (prefers-reduced-motion:reduce){.lp-une__img{transition:none}.lp-une__media:hover .lp-une__img{transform:none}}

/* La grille : trois colonnes, puis deux, puis une (règles de .lp-grille--3). */
.lp-blog__liste{padding-top:clamp(40px,5vw,68px)}
.lp-blog__entete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin:0 0 24px}
.lp-blog__titre-liste{margin:0;font-size:clamp(22px,2.4vw,30px);line-height:1.1;letter-spacing:-.024em;font-weight:700}
.lp-blog__nb{font-size:14.5px;color:var(--lp-ink-2)}
/* La grille du prototype : autant de colonnes de 300 px que la place en donne (quatre à 1440 px), 22 px d'écart. */
.lp-blog__grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
/* Recherche du prototype « Guides » : un champ à filet de 520 px, sans bouton visible. */
.lp-blog__recherche{max-width:520px;min-height:52px;gap:12px;padding:14px 16px;border-color:#D5DBD8;border-radius:9px}
/* Extrait des cartes : deux lignes, comme le prototype (les extraits réels sont plus longs que ceux du prototype). */
.lp-blog__grille .lp-guide__chapo{-webkit-line-clamp:2}
.lp-blog__recherche .lp-rech__ico{color:#59635F}
.lp-blog .lp-blog__recherche .lp-rech__champ,
body .lp-blog .lp-blog__recherche input[type="search"].lp-rech__champ{height:auto;font-size:15.5px;line-height:1.3}
/* Tuiles de thème (une par rubrique) — seulement s'il y en a au moins deux. */
.lp-blog__themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:0 0 32px;padding:0;list-style:none}
.lp-theme{display:flex;flex-direction:column;gap:11px;padding:16px 14px;border:1px solid #EEF1F0;border-radius:11px;background:#fff;color:#0A0F0D;text-decoration:none}
.lp-theme:hover,.lp-theme:focus-visible{border-color:#007C75;color:#0A0F0D}
.lp-theme__nom{display:block;font-size:14px;font-weight:600;line-height:1.25}
.lp-theme__nb{display:block;margin-top:3px;font-family:var(--lp-mono);font-size:10.5px;color:#6B7572}
/* Appel « Votre panne n'est pas dans les guides ? » : pictogramme, texte, bouton (prototype). */
.lp-bandeau-aide--photo{justify-content:flex-start;gap:24px;padding:clamp(24px,3vw,34px);border-color:#BEE7D5;border-radius:14px}
.lp-bandeau-aide__ico{display:flex;flex:none;color:#007C75}
.lp-bandeau-aide__texte{min-width:0;flex:1 1 240px}
.lp-bandeau-aide--photo h2{margin:0 0 6px;font-size:19px;line-height:1.3;letter-spacing:-.018em}
.lp-bandeau-aide--photo p{max-width:none;font-size:15px;line-height:1.6}
.lp-bandeau-aide--photo .lp-btn{white-space:nowrap}
.lp-blog .lp-bandeau-aide{margin-top:clamp(40px,5vw,72px)}

/* ---------- 7. Article du blog — reproduit du prototype « Article » --------- */

/* Cotes relevées dans le code du prototype (Lupéo - Article.dc.html) :
   cadre 1440 px moins des gouttières de 3 vw ; en-tête 820 px ; image 21/9,
   16 px d'arrondi ; grille 236 px | colonne, écart clamp(28, 4vw, 64) ; sommaire
   collant à 94 px ; article 760 px au plus ; H2 clamp(24, 2.6vw, 32) ; texte
   17/1,75 ; sections espacées de 44 px. */
.lp-art__cadre{max-width:1440px;margin-inline:auto;padding-inline:var(--lp-gouttiere)}

/* Fil d'Ariane : « / » comme séparateur, dernier maillon en encre. */
.lp-art__tete .ct-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 9px;padding:20px 0;font-size:12.5px;line-height:normal;color:var(--lp-ink-3)}
.lp-art__tete .ct-breadcrumbs > span{display:inline-flex;align-items:center;gap:9px}
.lp-art__tete .ct-breadcrumbs svg{display:none}
.lp-art__tete .ct-breadcrumbs > span:not(.last-item)::after{content:"/";color:#C9D2CE}

/* En-tête. */
.lp-art__entete{max-width:820px;padding-bottom:32px}
.lp-art__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  margin:0 0 18px;
  font-family:var(--lp-mono);font-size:11px;font-weight:400;letter-spacing:.16em;line-height:normal;text-transform:uppercase;
  color:var(--lp-ink-3);
}
.lp-art__sep{color:#C9D2CE}
.lp-art .lp-art__titre{margin:0 0 22px;font-size:clamp(32px,4.2vw,56px);line-height:1;letter-spacing:-.034em;font-weight:700;color:var(--lp-ink);text-wrap:pretty}
.lp-art__lead{margin:0 0 24px;font-size:19px;line-height:1.6;color:var(--lp-ink-2)}
.lp-art__auteur{display:flex;align-items:center;gap:14px;margin:0;font-size:14px;line-height:normal}
.lp-art__avatar{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--lp-green-100);color:var(--lp-green-900);font-size:15px;font-weight:700}
.lp-art__auteur strong{font-weight:600;color:var(--lp-ink)}
.lp-art__auteur-role{color:var(--lp-ink-3)}

/* Grande image : cadre 21/9, l'image entière au centre (jamais recadrée), et
   sa propre version floue pour remplir les côtés. */
.lp-art__hero{position:relative;margin:0 0 clamp(32px,4vw,56px);border-radius:16px;overflow:hidden;aspect-ratio:21/9;background:var(--lp-green-50)}
.lp-art__hero img{margin:0;max-width:none}
.lp-art__hero-fond{position:absolute;left:-6%;top:-12%;width:112%;height:124%;object-fit:cover;filter:blur(34px) saturate(1.35) brightness(.94);opacity:.9}
.lp-art__hero-img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}

/* Corps : sommaire collant à gauche, article à droite. */
.lp-art__corps{padding-bottom:80px}
.lp-art__grille{display:grid;grid-template-columns:236px minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.lp-art__toc{position:sticky;top:94px}
.lp-art__toc-titre{margin:0 0 14px;font-family:var(--lp-mono);font-size:10.5px;font-weight:400;letter-spacing:.14em;line-height:normal;text-transform:uppercase;color:var(--lp-ink-3)}
.lp-art__toc-liste{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border-left:2px solid var(--lp-line-2)}
.lp-art__toc-liste li{margin:0}
.lp-art__toc-liste a{display:block;margin-left:-2px;padding:9px 0 9px 14px;border-left:2px solid transparent;font-size:13.5px;line-height:1.45;color:var(--lp-ink-2);text-decoration:none}
.lp-art__toc-liste a:hover{color:var(--lp-ink)}
.lp-art__toc-liste a.is-actif{border-left-color:var(--lp-green-400);font-weight:600;color:var(--lp-ink)}
.lp-art__infos{margin:24px 0 0;padding:16px 18px;list-style:none;border:1px solid var(--lp-line);border-radius:11px}
.lp-art__infos li{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:13px;line-height:1.4;color:var(--lp-ink)}
.lp-art__infos li:last-child{margin-bottom:0}
.lp-art__infos .lp-ico{flex:none;width:17px;height:17px;color:var(--lp-ink-2)}
.lp-art__infos strong{font-weight:600}

/* Colonne de lecture. */
.lp-art__colonne{max-width:760px;min-width:0}
.lp-art__contenu{font-size:17px;line-height:1.75;color:var(--lp-ink-2)}
.lp-art__contenu > :first-child{margin-top:0}
.lp-art__contenu section{margin:0 0 44px}
.lp-art__contenu h2,
.lp-art__section > h2{margin:0 0 16px;font-size:clamp(24px,2.6vw,32px);line-height:1.12;letter-spacing:-.026em;font-weight:700;color:var(--lp-ink);text-wrap:pretty;scroll-margin-top:100px}
.lp-art__contenu > h2:not(:first-child){margin-top:44px}
.lp-art__contenu h3{margin:30px 0 8px;font-size:clamp(18px,1.6vw,20px);line-height:1.3;letter-spacing:-.018em;font-weight:700;color:var(--lp-ink);scroll-margin-top:100px}
.lp-art__contenu p{margin:0 0 18px;font-size:17px;line-height:1.75}
.lp-art__contenu strong,.lp-art__contenu b{font-weight:600;color:var(--lp-ink)}
.lp-art__contenu a{color:var(--lp-green-600);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.lp-art__contenu a:hover{color:var(--lp-green-800)}
.lp-art__contenu ul{margin:0 0 18px;padding-left:1.25em}
.lp-art__contenu ul li{margin:0 0 6px;font-size:17px;line-height:1.7}
.lp-art__contenu ul li::marker{color:var(--lp-green-600)}
.lp-art__contenu img{display:block;max-width:100%;height:auto;margin-inline:auto;border-radius:12px}
.lp-art__contenu figure{margin:0 0 18px}
.lp-art__contenu figcaption{margin-top:9px;font-family:var(--lp-mono);font-size:11.5px;color:var(--lp-ink-3)}
.lp-art__contenu code{padding:2px 7px;border-radius:6px;background:var(--lp-surface-2);font-family:var(--lp-mono);font-size:.88em;color:var(--lp-ink)}
/* Le sommaire que l'article porte dans son texte est remplacé par la colonne de gauche. */
.lp-art__contenu > section:has(> h2:first-child + ul > li > a[href^="#"]){display:none}

/* Étapes numérotées : toute liste ordonnée du texte — cercle vert pâle, chiffre
   centré, contenu aligné à droite ; un premier mot en gras devient le titre de
   l'étape ; <code> ou .lupeo-valeur donne le petit badge de valeur. */
.lp-art__contenu ol{display:flex;flex-direction:column;gap:16px;margin:0 0 24px;padding:0;list-style:none;counter-reset:lp-etape}
.lp-art__contenu ol > li{position:relative;counter-increment:lp-etape;min-height:44px;margin:0;padding-left:60px;font-size:16px;line-height:1.7}
.lp-art__contenu ol > li::before{
  content:counter(lp-etape);
  position:absolute;left:0;top:0;
  display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--lp-green-100);color:#00524D;
  font-size:16px;font-weight:700;line-height:1;
}
.lp-art__contenu ol > li > strong:first-child{display:block;margin:0 0 6px;font-size:18.5px;line-height:1.3;letter-spacing:-.018em;font-weight:700}
.lp-art__contenu .lupeo-valeur{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border-radius:7px;background:var(--lp-surface-2);font-family:var(--lp-mono);font-size:12.5px;color:var(--lp-ink)}

/* Blocs d'avertissement (.lupeo-alerte) et règle de la maison (blockquote,
   .lupeo-regle) : deux composants, deux couleurs. */
.lp-art__contenu .lupeo-alerte{
  display:flex;gap:13px;
  margin:0 0 20px;padding:18px 20px;
  border:1px solid #FFDFA4;border-radius:12px;background:#FFF9EC;
  font-size:15px;line-height:1.6;color:#6E5424;
}
.lp-art__contenu .lupeo-alerte::before{
  content:"";flex:none;width:19px;height:19px;margin-top:1px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B27400' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4 21.4 19.8H2.6z'/%3E%3Cpath d='M12 9.6v4.2'/%3E%3Ccircle cx='12' cy='16.9' r='.95' fill='%23B27400' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;
}
.lp-art__contenu .lupeo-alerte > :last-child{margin-bottom:0}
.lp-art__contenu blockquote,
.lp-art__contenu .lupeo-regle{
  margin:0 0 22px;padding:20px 22px;
  border:1px solid #BEE7D5;border-radius:12px;background:var(--lp-green-50);
  font-size:15.5px;line-height:1.65;color:var(--lp-ink-brume);
}
.lp-art__contenu blockquote > :last-child,
.lp-art__contenu .lupeo-regle > :last-child{margin-bottom:0}
.lp-art__contenu blockquote p{font-size:15.5px;line-height:1.65}

/* Tableaux : filet fin, en-tête mono sur gris très pâle, première colonne en
   gras. ⚠️ Seuls !important de la section : le contenu des articles porte des
   styles EN LIGNE sur ses tableaux (marge, bordures, collapse) et ses cellules
   (padding, bordures) — 21 tableaux sur 35 articles — et un style en ligne ne
   se bat qu'ainsi. Le contenu, lui, n'est pas modifié. La première ligne devient
   l'en-tête quand elle est faite de <th> ou de cellules toutes en gras. */
.lp-art__contenu table{
  width:100%;margin:0 0 24px!important;
  border:1px solid var(--lp-line)!important;border-collapse:separate!important;border-spacing:0;border-radius:12px;overflow:hidden;
  font-size:14px;line-height:1.5;
}
.lp-art__contenu th,
.lp-art__contenu td{padding:13px 16px!important;border:0!important;border-bottom:1px solid var(--lp-line-2)!important;text-align:left;vertical-align:top;color:var(--lp-ink-2)}
.lp-art__contenu thead th,
.lp-art__contenu tr:first-child > th,
.lp-art__contenu tr:first-child:has(> td > strong:only-child) > td{background:#FAFBFA;border-bottom-color:var(--lp-line)!important}
.lp-art__contenu thead th,
.lp-art__contenu tr:first-child > th,
.lp-art__contenu tr:first-child:has(> td > strong:only-child) > td > strong{
  font-family:var(--lp-mono);font-size:10.5px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--lp-ink-3);
}
.lp-art__contenu tbody th,
.lp-art__contenu td:first-child{font-size:14.5px;font-weight:600;color:var(--lp-ink)}
.lp-art__contenu tr:first-child:has(> td > strong:only-child) > td:first-child{font-size:inherit}
.lp-art__contenu tr:last-child > td,
.lp-art__contenu tr:last-child > th{border-bottom:0!important}
/* Tableau plus large que la colonne (recette du 21/09/2026, point O2 : 13 articles sur 34 à 390 px, 21 à 320 px,
   dernière colonne coupée au bord de l'écran sans aucun moyen de la lire). Chaque tableau est posé dans un
   conteneur (lupeo_article_traite) qui porte le cadre arrondi et défile horizontalement : le cadre reste en place,
   le tableau garde sa largeur naturelle, aucune colonne n'est cachée. Même principe que « .lupeo-caracs__scroll »
   des fiches. Un tableau assez étroit remplit le conteneur, comme avant. */
.lp-art__contenu .lp-art__table{
  margin:0 0 24px;max-width:100%;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  border:1px solid var(--lp-line);border-radius:12px;
}
.lp-art__contenu .lp-art__table > table{margin:0!important;border:0!important;border-radius:0}
/* Tableau à 4 colonnes ou plus (30/09/2026, demande de David : le tableau du prototype est aéré, celui des
   vrais articles était tassé dans 760 px, cellules sur 6 lignes). Le texte reste à 760 px ; ces tableaux-là
   prennent la largeur libre à droite de la colonne (jusqu'à 1 000 px), comme une figure « large » d'éditorial.
   `.lp-art__grille` sert de conteneur de requête : 100cqw est la largeur de la grille (sommaire + colonne). */
@media (min-width:1041px){
  .lp-art__grille{container-type:inline-size}
  .lp-art__contenu .lp-art__table:has(> table tr:first-child > :nth-child(4)){
    width:min(1000px,calc(100cqw - 236px - clamp(28px,4vw,64px)));max-width:none;
  }
  /* Certains articles posent leur tableau dans un <div style="overflow-x:auto"> : il couperait le tableau large à 760 px
     (style en ligne, donc !important — le contenu n'est pas modifié). Le tableau défile déjà dans son propre conteneur. */
  .lp-art__contenu div:has(> .lp-art__table){overflow:visible!important}
}
.lp-art__contenu .lp-art__table:focus-visible{outline:2px solid var(--lp-green-600);outline-offset:2px}

/* Fiche produit en une colonne : bloc centré de 680 px (voir la note ci-dessus, retour du 01/10/2026). */
@media (min-width:600px) and (max-width:999px){
  body.single-product #main .product-entry-wrapper,
  body.single-product #main .product-entry-wrapper.is-width-constrained{
    width:min(680px,calc(100% - 2 * clamp(28px,6vw,56px)));max-width:680px;margin-inline:auto;
  }
  /* Blocksy tire la galerie hors des marges (marge négative « bord à bord ») : ici le bloc a ses propres marges. */
  body.single-product #main .product-entry-wrapper > .woocommerce-product-gallery{margin-inline:0}
}

/* Questions fréquentes : accordéon natif. */
.lupeo-faq{margin:0 0 20px;border:1px solid var(--lp-line);border-radius:12px;overflow:hidden}
.lupeo-faq__item{border-bottom:1px solid var(--lp-line-2)}
.lupeo-faq__item:last-child{border-bottom:0}
.lupeo-faq__question{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:56px;padding:0 20px;list-style:none;cursor:pointer}
.lupeo-faq__question::-webkit-details-marker{display:none}
.lupeo-faq__question:focus-visible{outline:2px solid var(--lp-green-600);outline-offset:-2px}
.lp-art__contenu .lupeo-faq__question h3{margin:0;padding:17px 0;font-size:15.5px;font-weight:600;line-height:1.4;letter-spacing:0;color:var(--lp-ink)}
.lupeo-faq__question::after{
  content:"";flex:none;width:18px;height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0F0D' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 4.8v14.4M4.8 12h14.4'/%3E%3C/svg%3E") center/contain no-repeat;
}
.lupeo-faq__item[open] > .lupeo-faq__question::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0F0D' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4.8 12h14.4'/%3E%3C/svg%3E");
}
.lupeo-faq__reponse{padding:0 20px 20px}
.lupeo-faq__reponse p,.lupeo-faq__reponse li{font-size:15px;line-height:1.7;color:var(--lp-ink-2)}
.lupeo-faq__reponse > :last-child{margin-bottom:0}

/* Suites de l'article : pièces citées, à lire ensuite. */
.lp-art__section{margin:0 0 44px}
.lp-art__section > h2{margin-bottom:20px}
.lp-art__pieces{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.lp-art__pieces > li{margin:0;min-width:0}
.lp-art__suite-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:0;padding:0;list-style:none}
.lp-art__commentaires{margin-top:20px}
.lp-art__commentaires .ct-container-narrow,
.lp-art__commentaires .ct-comments-container{max-width:none;padding:0;margin:0}

@media (max-width:1040px){
  .lp-art__grille{grid-template-columns:minmax(0,1fr)}
  .lp-art__toc{position:static;order:-1}
  /* Une seule colonne (≤ 1 040 px) : fil d'ariane, en-tête, sommaire et texte partagent le même axe, centré, au lieu de
     coller à gauche avec un grand vide à droite (retour de David, 01/10/2026). Le grand visuel garde toute la largeur. */
  .lp-art__tete .ct-breadcrumbs,
  .lp-art__entete,
  .lp-art__toc,
  .lp-art__colonne{width:100%;max-width:760px;margin-inline:auto}
  .lp-art__toc{width:100%}
  .lp-art__hero{aspect-ratio:16/9}
}
@media (max-width:760px){
  .lp-art__hero{aspect-ratio:3/2;border-radius:12px}
  .lp-art__lead{font-size:17px}
  .lp-art__corps{padding-bottom:56px}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* Encadré auteur (fin d'article) : décollé du texte qui suit. */
.lp-art__colonne .lupeo-auteur{margin:8px 0 44px}