/* =========================================================================
   Lupéo — page d'accueil (reprise du 20/09/2026)
   =========================================================================
   Reproduction de « Lupéo - Accueil » du prototype : chaque section reprend les
   valeurs de son balisage (grilles, écarts, corps de texte, couleurs).
   Sections reconstruites : héros, catégories, produits, atelier, machines,
   guides (préfixe lpa-). Sections reprises et recalées sur le prototype : le
   sélecteur, les marques, l'aide (composants du design system du thème,
   themes/lupeo/assets/lupeo-ds.css).
   Rendu : Lupeo_Accueil (includes/class-lupeo-accueil.php).
   Points de rupture du prototype : 1240 (sélecteur sur 2 colonnes),
   1040 (empilement), 720 (une colonne), 860.
   ========================================================================= */

.lpa{background:#fff;color:#59635F;line-height:normal;text-wrap:pretty}
/* Listes : (0,1,0) — assez pour battre le retrait des listes de Blocksy. */
.lpa :where(ul,ol){margin:0;padding:0;list-style:none}
/* Spécificité NULLE : la réinitialisation ne doit jamais battre une règle de classe (`height:100%` des vignettes produit et des images de guide : elle les rendait
   carrées dans un cadre 4:3 et rognait le bas des photos). */
:where(.lpa img){max-width:100%;height:auto}
.lpa :where(h1,h2,h3,p){margin:0}
/* Le prototype garde `text-wrap:pretty` (règle du <body>) ; le thème pose `balance` sur tous les titres, ce qui coupe les lignes autrement. */
.lpa :where(h1,h2,h3,h4,h5,h6){text-wrap:pretty}
.lpa a{text-decoration:none}

/* ---------- Éléments communs ------------------------------------------------ */
.lpa-section{background:#fff}
.lpa-wrap{max-width:var(--lp-cadre,1840px);margin:0 auto;padding:clamp(56px,7vw,96px) clamp(20px,3vw,44px)}
.lpa-kicker{
  margin:0 0 16px;
  font-family:var(--lp-mono);font-size:11px;font-weight:400;line-height:normal;
  letter-spacing:.18em;text-transform:uppercase;color:#6B7572;
}
.lpa-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.lpa-h2{margin:0;font-size:clamp(30px,3.4vw,46px);line-height:1.02;letter-spacing:-.03em;font-weight:700;color:#0A0F0D}
.lpa-h2--16{max-width:16ch}
.lpa-h2--18{max-width:18ch}
.lpa-h2--20{max-width:20ch}
.lpa-tout{
  display:inline-flex;align-items:center;gap:9px;padding-bottom:3px;
  border-bottom:2px solid #00D36B;
  font-size:15px;font-weight:600;line-height:normal;color:#0A0F0D;white-space:nowrap;
}
.lpa-tout:hover{color:#0A0F0D;border-bottom-color:#00B85D}
.lpa-btn{
  display:inline-flex;align-items:center;gap:11px;
  padding:17px 26px;border-radius:8px;background:#007C75;
  font-size:15.5px;font-weight:600;line-height:normal;color:#fff;
}
.lpa-btn:hover,.lpa-btn:focus-visible{background:#005F59;color:#fff}
.lpa-lien-noir{
  display:inline-flex;align-items:center;gap:9px;padding-bottom:3px;
  border-bottom:2px solid #0A0F0D;
  font-size:15.5px;font-weight:600;line-height:normal;color:#0A0F0D;
}
.lpa-lien-noir:hover{color:#0A0F0D}

/* ---------- 1. Héros ---------------------------------------------------------- */
.lpa-hero{background:#F1FAF5;border-bottom:1px solid #E4E8E6}
.lpa-hero__in{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:0;align-items:start;
  max-width:var(--lp-cadre,1840px);margin:0 auto;
}
.lpa-hero__texte{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(48px,6vw,92px) clamp(20px,3vw,44px) clamp(44px,5vw,72px);
}
.lpa-hero__kicker{margin-bottom:26px;letter-spacing:.2em;color:#3F615A;white-space:pre}
.lpa-hero__titre{margin:0 0 22px;font-size:clamp(38px,5.2vw,72px);line-height:.96;letter-spacing:-.035em;font-weight:700;color:#0A0F0D}
.lpa-hero__chapo{margin:0 0 34px;max-width:44ch;font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:#3F615A}
.lpa-hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.lpa-hero__chiffres{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:22px;
  margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid #CBE6DC;
}
.lpa-hero__chiffres a{display:block;color:#0A0F0D}
.lpa-hero__chiffres strong{display:block;font-size:26px;font-weight:700;line-height:normal;letter-spacing:-.02em}
.lpa-hero__chiffres span{display:block;margin-top:2px;font-size:12.5px;line-height:normal;color:#3F615A}
.lpa-hero__chiffres a:hover strong{color:#007C75}
/* Les chiffres montent de zéro (lupeo-chiffres.js). Chiffres à chasse fixe : rien ne tremble pendant le comptage.
   Masqués le temps que le script pose les zéros ; sans script, ils réapparaissent seuls après 1,8 s. */
.lpa-hero__chiffres strong{position:relative;font-variant-numeric:tabular-nums}
.lpa-hero__chiffres strong + span{margin-top:9px}
.lpa-hero__chiffres strong::after{
  content:"";position:absolute;left:0;bottom:-4px;width:26px;height:2px;border-radius:2px;
  background:#007C75;transform:scaleX(0);transform-origin:left center;
}
@media (prefers-reduced-motion:no-preference){
  .lpa-hero__chiffres:not(.est-compte) strong{opacity:0;animation:lpa-chiffres-secours .4s ease 1.8s forwards}
  .lpa-hero__chiffres.est-anime strong{animation:lpa-chiffres-monte .7s cubic-bezier(.2,.8,.2,1) both}
  .lpa-hero__chiffres.est-anime li:nth-child(2) strong{animation-delay:.14s}
  .lpa-hero__chiffres.est-anime li:nth-child(3) strong{animation-delay:.28s}
  .lpa-hero__chiffres.est-anime li:nth-child(4) strong{animation-delay:.42s}
  .lpa-hero__chiffres strong.est-arrive::after{transform:scaleX(1);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
  .lpa-hero__chiffres a:hover strong.est-arrive::after{transform:scaleX(1.6)}
}
@keyframes lpa-chiffres-secours{to{opacity:1}}
@keyframes lpa-chiffres-monte{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.lpa-hero__media{position:relative;display:flex;flex-direction:column;background:transparent}
.lpa-hero__photo{position:relative;aspect-ratio:16/9;overflow:hidden;background:#E6F5EF}
.lpa-hero__photo img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.lpa-hero__legende{
  position:absolute;right:clamp(16px,2vw,32px);top:clamp(22px,3.4vw,44px);
  margin:0;text-align:right;
  font-family:var(--lp-mono);font-size:11px;letter-spacing:.18em;line-height:2.2;text-transform:uppercase;color:#3F615A;
}
.lpa-hero__parts{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:#CBE6DC;border-top:1px solid #CBE6DC;
}
.lpa-hero__parts li{background:#fff}
.lpa-part{display:flex;flex-direction:column;height:100%;background:#fff;color:#0A0F0D}
.lpa-part__photo{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#F6F8F7}
.lpa-part__photo img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.lpa-part__photo--produit img{object-fit:contain;padding:10%;mix-blend-mode:multiply}
.lpa-part__pied{display:flex;align-items:center;gap:9px;padding:11px 12px 13px}
.lpa-part__ico{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:7px;background:#E6F5EF;color:#007C75}
.lpa-part__ico--ambre{background:#FFF3D6;color:#7A5200}
.lpa-part__ico svg{width:16px;height:16px}
.lpa-part__texte{min-width:0}
.lpa-part__texte strong{display:block;font-size:12.5px;font-weight:600;line-height:1.2}
.lpa-part__texte small{display:block;margin-top:2px;font-family:var(--lp-mono);font-size:10px;color:#6B7572}

/* ---------- 2. Sélecteur marque → modèle → pièce -------------------------------- */
.lpa .lp-trouveur{padding:clamp(40px,4.6vw,64px) 0;border-bottom:1px solid #E4E8E6;background:#fff}
.lpa .lp-trouveur__boite{border:1px solid #CBE6DC;border-radius:18px;background:#fff;overflow:hidden}
.lpa .lp-trouveur__tete{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:clamp(24px,2.6vw,32px) clamp(22px,2.6vw,34px);
  background:#F1FAF5;border-bottom:0;
}
.lpa .lp-trouveur .lp-eyebrow{margin:0 0 12px;letter-spacing:.18em;color:#3F615A}
.lpa .lp-trouveur__titre{margin:0;font-size:clamp(26px,2.9vw,38px);line-height:1.06;letter-spacing:-.028em;font-weight:700;color:#0A0F0D}
.lpa .lp-trouveur__etapes{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;font-size:13.5px;color:#3F615A}
.lpa .lp-trouveur__etapes li{font-size:13.5px;font-weight:600;color:#0A0F0D}
.lpa .lp-trouveur__etapes li{display:inline-flex;align-items:center}
.lpa .lp-trouveur__etapes li + li::before{content:"→";margin:0 10px;font-weight:400;color:#3F615A}
.lpa .lp-trouveur__etapes li:last-child{color:#00524D}
.lpa .lp-trouveur__champs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:end;gap:16px;
  padding:clamp(22px,2.6vw,30px) clamp(22px,2.6vw,34px) clamp(24px,2.8vw,34px);
}
.lpa .lp-champ label{display:flex;align-items:center;gap:10px;margin:0 0 11px;font-size:14px;font-weight:600;color:#0A0F0D}
.lpa .lp-champ label span{
  display:grid;place-items:center;min-width:24px;height:24px;padding:0;border-radius:99px;
  background:#E6F5EF;font-family:var(--lp-mono);font-size:10.5px;font-weight:500;color:#00524D;
}
.lpa .lp-champ__select{position:relative;display:flex;align-items:center}
.lpa .lp-champ__select > .lp-ico{position:absolute;left:18px;width:24px;height:24px;color:#0A0F0D;pointer-events:none}
.lp-home .lp-champ__select select{
  width:100%;height:66px;margin:0;padding:0 46px 0 55px;
  border:1.5px solid #D5DBD8;border-radius:11px;
  background:#fff 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' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E") no-repeat right 18px center/19px;
  font-family:var(--lp-sans);font-size:16.5px;font-weight:600;color:#0A0F0D;
  -webkit-appearance:none;appearance:none;cursor:pointer;
}
.lp-home .lp-champ__select select:hover{border-color:#0A0F0D}
.lp-home .lp-champ__select select:focus{border-color:#007C75;outline:none;box-shadow:0 0 0 3px rgba(0,124,117,.18)}
.lp-home .lp-champ__select select:disabled{background-color:#F6F8F7;color:#64706B;font-size:15px;font-weight:500;cursor:not-allowed}
.lpa .lp-trouveur__go{
  height:66px;min-height:66px;padding:0 26px;border-radius:11px;background:#00D36B;
  font-size:16px;font-weight:700;color:#06231A;
  box-shadow:0 10px 24px -12px rgba(0,184,93,.75);
}
.lpa .lp-trouveur__go:hover{background:#00B85D;color:#06231A}
.lpa .lp-trouveur__promesses{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px 32px;
  margin:0;padding:clamp(20px,2.4vw,28px) clamp(4px,1vw,10px) 0;
}
.lpa .lp-trouveur__promesses li{display:inline-flex;align-items:center;gap:12px;font-size:14.5px;font-weight:500;color:#0A0F0D}
.lpa .lp-trouveur__promesses .lp-ico{width:24px;height:24px;color:#007C75}

/* ---------- 3. Catégories --------------------------------------------------------- */
.lpa-cat__grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.lpa-carte{display:block;overflow:hidden;border:1px solid #EEF1F0;border-radius:16px;background:#fff;color:#0A0F0D;transition:border-color .2s,box-shadow .2s}
.lpa-carte:hover,.lpa-carte:focus-visible{border-color:#B9E3D6;box-shadow:0 2px 4px rgba(10,15,13,.04),0 18px 40px -12px rgba(10,15,13,.14);color:#0A0F0D}
.lpa-carte__media{position:relative;display:block;background:#F6F8F7}
.lpa-carte__photo{display:block;aspect-ratio:4/3;overflow:hidden}
.lpa-carte__photo img{display:block;width:100%;height:100%;object-fit:cover}
.lpa-carte__photo--produit img{object-fit:contain;padding:3%;mix-blend-mode:multiply}
.lpa-carte__ico{
  position:absolute;left:18px;bottom:-26px;
  display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:#fff;color:#007C75;
  box-shadow:0 2px 4px rgba(10,15,13,.06),0 10px 22px -8px rgba(10,15,13,.2);
}
.lpa-carte__ico svg{width:32px;height:32px}
.lpa-carte__corps{display:block;padding:40px 22px 22px}
.lpa-carte__nom{margin:0 0 8px;font-size:21px;font-weight:700;line-height:normal;letter-spacing:-.02em;color:#0A0F0D}
.lpa-carte__texte{display:block;margin:0 0 18px;font-size:14.5px;line-height:1.55;color:#59635F}
.lpa-carte__pied{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid #EEF1F0}
.lpa-carte__nb{font-family:var(--lp-mono);font-size:12px;color:#6B7572}

/* ---------- 4. Marques ------------------------------------------------------------- */
.lpa .lp-marques{padding:0;border-block:1px solid #E4E8E6;background:#F6F8F7}
.lpa .lp-marques .lp-wrap{padding-block:clamp(56px,7vw,92px)}
.lpa .lp-marques__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(32px,5vw,72px);align-items:start}
.lpa .lp-marques .lp-eyebrow{margin:0 0 16px;letter-spacing:.18em}
.lpa .lp-marques .lp-h2{margin:0 0 18px;font-size:clamp(30px,3.4vw,46px);line-height:1.02;letter-spacing:-.03em}
.lpa .lp-marques__texte .lp-chapo{margin:0 0 26px;max-width:46ch;font-size:16.5px;line-height:1.6;color:#59635F}
.lpa .lp-marques__grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px;margin:0 0 14px}
.lpa .lp-marques__modeles{margin:0;padding:20px 22px;border:1px solid #EEF1F0;border-radius:12px;background:#fff}
.lpa .lp-marques__modeles .lp-eyebrow{margin:0 0 14px;font-size:10.5px;letter-spacing:.14em}
.lpa .lp-marques__modeles ul{display:flex;flex-wrap:wrap;gap:8px}
.lpa .lp-carte-marque__modeles{margin:14px 0}
/* Le pied « Choisir mon modèle » descend au bas de la carte : les cartes d'une même rangée s'alignent, même quand les puces passent sur deux lignes. */
.lpa .lp-carte-marque__modeles + .lp-carte-marque__pied{margin-top:auto}

/* ---------- 5. Produits ------------------------------------------------------------ */
.lpa-prod__grille{grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:18px}
/* Six pièces : une rangée de six sur grand écran, sinon deux rangées de trois (jamais 4 + 2) ; deux colonnes
   sur tablette étroite ; une colonne sur téléphone, où seules les quatre premières restent (six cartes
   empilées feraient une page de plus de trois mille pixels). */
.lpa-prod__grille.lpa-prod__grille--six{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:1700px){.lpa-prod__grille.lpa-prod__grille--six{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:860px){.lpa-prod__grille.lpa-prod__grille--six{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  .lpa-prod__grille.lpa-prod__grille--six{grid-template-columns:minmax(0,1fr)}
  .lpa-prod__grille.lpa-prod__grille--six > :nth-child(n+5){display:none}
}
/* Cartes produit de l'accueil : le gabarit du prototype (#produits) — photo 4/3 sur #F6F8F7,
   famille en mono 11 px, titre 16,5 px, compatibilité 13 px, prix 23 px, stock 13 px.
   Portée : l'accueil seul (`.lpa`) ; les rayons gardent la carte du design system. */
body .lpa .lupeo-card{border-color:#EEF1F0;border-radius:14px}
body .lpa .lupeo-card:hover{border-color:#B9E3D6;box-shadow:0 2px 4px rgba(10,15,13,.04),0 18px 40px -12px rgba(10,15,13,.16)}
body .lpa .lupeo-card--piece .lupeo-vignette{aspect-ratio:4/3;background:#F6F8F7;border-bottom:0}
body .lpa .lupeo-card .lupeo-card__pastille{top:14px;left:14px;padding:6px 12px;font-size:12px;font-weight:700}
body .lpa .lupeo-card--piece .lupeo-card__corps{gap:0;padding:18px 19px 20px}
body .lpa .lupeo-card--piece .lupeo-card__famille{margin:0 0 8px;font-size:11px;letter-spacing:.12em;color:#6B7572}
body .lpa .lupeo-card--piece .lupeo-card__titre{margin:0 0 13px;font-size:16.5px;line-height:1.32;letter-spacing:-.012em}
body .lpa .lupeo-card--piece .lupeo-card__badge{margin:0 0 16px;padding:7px 12px;gap:8px;border-radius:7px;font-size:13px;line-height:normal}
body .lpa .lupeo-card--piece .lupeo-card__badge--ok{color:#00524D}
body .lpa .lupeo-card--piece .lupeo-card__pied{align-items:baseline;padding-top:0}
body .lpa .lupeo-card--piece .lupeo-card__prix,
body .lpa .lupeo-card--piece .lupeo-card__prix .amount,
body .lpa .lupeo-card--piece .lupeo-card__prix bdi{font-size:23px;letter-spacing:-.022em;line-height:normal}
body .lpa .lupeo-card--piece .lupeo-card__prix .woocommerce-price-suffix{margin-left:5px;font-family:var(--lp-sans);font-size:12px;color:#6B7572}
body .lpa .lupeo-card--piece .lupeo-card__stock{gap:7px;font-size:13px;color:#00524D}
body .lpa .lupeo-card--piece .lupeo-card__stock::before{width:7px;height:7px;background:#00B85D}

/* ---------- 5 bis. Atelier ----------------------------------------------------------- */
.lpa-atelier{background:#fff}
.lpa-atelier__in{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch;
  max-width:var(--lp-cadre,1840px);margin:0 auto;
}
.lpa-atelier__media{position:relative;min-height:clamp(300px,38vw,540px);overflow:hidden;background:#1F2A27}
.lpa-atelier__media img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.lpa-atelier__texte{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,5vw,80px) clamp(24px,4vw,64px);background:#E6F5EF;
}
.lpa-atelier__kicker{margin-bottom:20px;color:#3F615A;white-space:pre}
.lpa-atelier__titre{margin:0 0 20px;font-size:clamp(28px,3.2vw,44px);line-height:1.03;letter-spacing:-.03em;font-weight:700;color:#0A0F0D}
.lpa-atelier__chapo{margin:0 0 28px;max-width:48ch;font-size:16.5px;line-height:1.6;color:#3F615A}
.lpa-atelier__liste{display:flex;flex-direction:column;gap:12px;margin:0 0 32px}
.lpa-atelier__liste li{display:inline-flex;align-items:center;gap:11px;font-size:15px;line-height:normal;color:#0A0F0D}
.lpa-atelier__liste svg{width:18px;height:18px;flex:none;stroke-width:2.3;color:#007C75}
.lpa-btn--atelier{align-self:flex-start;padding:16px 24px;font-size:15px}

/* ---------- 6. Machines --------------------------------------------------------------- */
.lpa-machines__grille{grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:16px}
/* Cartes machine de l'accueil : le gabarit du prototype (#trottinettes) — photo 4/3, corps 22/24/24,
   marque mono 10,5 px, nom 18 px, caractéristiques mono 12 px, prix 19 px. */
body .lpa .lp-carte-machine{border-color:#EEF1F0;border-radius:14px}
body .lpa .lp-carte-machine__media{aspect-ratio:4/3;background:#F6F8F7;transition:background-color .2s}
body .lpa .lp-carte-machine:hover .lp-carte-machine__media{background:#F1FAF5}
body .lpa .lp-carte-machine:hover,body .lpa .lp-carte-machine:focus-visible{border-color:#B9E3D6;box-shadow:0 2px 4px rgba(10,15,13,.04),0 18px 40px -12px rgba(10,15,13,.16)}
body .lpa .lp-carte-machine__corps{padding:22px 24px 24px}
body .lpa .lp-carte-machine__marque{letter-spacing:.14em;color:#6B7572}
/* Logo de la marque (quand elle en a un) à la place du nom en lettres : bandeau de hauteur fixe, pour que les
   noms des trois machines restent alignés quelle que soit la forme du logo. */
body .lpa .lp-carte-machine__marque{display:flex;align-items:center;min-height:36px}
body .lpa .lp-carte-machine__marque--logo{line-height:0}
body .lpa .lp-carte-machine__marque--logo img{display:block;width:auto;height:auto;max-height:36px;max-width:200px;object-fit:contain;object-position:left center}
body .lpa .lp-carte-machine__nom{margin:6px 0 0;font-size:18px;line-height:normal;letter-spacing:-.018em}
body .lpa .lp-carte-machine__specs{gap:4px 18px;margin:12px 0 0;color:#59635F}
body .lpa .lp-carte-machine__pied{padding-top:14px;border-top-color:#EEF1F0}
body .lpa .lp-carte-machine__specs + .lp-carte-machine__pied,body .lpa .lp-carte-machine__nom + .lp-carte-machine__pied{margin-top:16px}
body .lpa .lp-carte-machine__prix{font-size:19px;letter-spacing:-.02em}
body .lpa .lp-carte-machine__voir{gap:8px;font-size:13.5px}
body .lpa .lp-carte-machine__voir .lp-ico{width:15px;height:15px}

/* Machines complètes, mises en valeur (demande de David du 01/10/2026) : fond de scène doux, grandes cartes
   à photo en vitrine (halo menthe + ombre au sol), caractéristiques en pastilles à pictogramme, promesse
   d'expédition réelle (heure limite de la boutique) et un vrai bouton vert « Découvrir ». Au survol : la carte
   se soulève, la machine grandit un peu, la flèche avance. */
.lpa-machines{background:linear-gradient(180deg,#F6F8F7 0%,#fff 100%)}
body .lpa .lpa-machines__grille{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,28px)}
body .lpa .lp-carte-machine{
  overflow:hidden;border:1px solid #E3EAE7;border-radius:20px;background:#fff;
  box-shadow:0 1px 2px rgba(10,15,13,.04),0 10px 28px -14px rgba(10,15,13,.14);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
body .lpa .lp-carte-machine:hover,body .lpa .lp-carte-machine:focus-visible{
  transform:translateY(-4px);border-color:#00B85D;
  box-shadow:0 2px 4px rgba(10,15,13,.05),0 28px 56px -18px rgba(1,60,56,.30);
}
body .lpa .lp-carte-machine__media{
  aspect-ratio:5/4;border-bottom:1px solid #EEF1F0;
  background:radial-gradient(68% 62% at 50% 46%,#fff 0%,#EEF6F2 100%);
}
body .lpa .lp-carte-machine:hover .lp-carte-machine__media{background:radial-gradient(68% 62% at 50% 46%,#fff 0%,#E3F3EB 100%)}
/* Ombre au sol : la machine « pose » sur la scène. */
body .lpa .lp-carte-machine__media::after{
  content:"";position:absolute;left:22%;right:22%;bottom:7%;height:5%;
  border-radius:50%;background:radial-gradient(closest-side,rgba(10,15,13,.16),rgba(10,15,13,0));
  pointer-events:none;
}
body .lpa .lp-carte-machine__media img{padding:5%;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
body .lpa .lp-carte-machine:hover .lp-carte-machine__media img{transform:scale(1.045)}
body .lpa .lp-carte-machine__corps{padding:24px 28px 28px}
body .lpa .lp-carte-machine__marque{font-size:11px;letter-spacing:.16em;color:#007C75}
body .lpa .lp-carte-machine__nom{margin:8px 0 0;font-size:clamp(22px,1.7vw,28px);line-height:1.1;letter-spacing:-.025em}
/* En-tête de la carte : logo et nom à gauche ; à droite, si la promotion a une date de fin, le compteur en cases
   (jours, heures, min, s), même famille que la bande « Les bons plans » mais en clair. Dernier jour : rouge
   promotion, les secondes pulsent (sauf mouvement réduit). Trop étroit : le compteur passe sous le nom. */
body .lpa .lp-carte-machine__tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 18px}
body .lpa .lp-carte-machine__ident{flex:1 1 180px;min-width:0}
body .lpa .lp-carte-machine__tete + .lp-carte-machine__pied{margin-top:20px}
body .lpa .lp-carte-machine__chrono{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:none}
body .lpa .lp-carte-machine__chrono-txt{
  display:flex;align-items:center;gap:6px;
  font-family:var(--lp-mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#007C75;
}
body .lpa .lp-carte-machine__chrono-txt::before{content:"";width:7px;height:7px;border-radius:50%;background:#00B85D;box-shadow:0 0 0 3px rgba(0,184,93,.18)}
body .lpa .lp-carte-machine__chrono-digits{display:flex;gap:5px}
body .lpa .lp-carte-machine__chrono-digits[hidden]{display:none}
body .lpa .lp-carte-machine__case{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-width:46px;padding:7px 6px 6px;border-radius:10px;
  background:linear-gradient(160deg,#013C38 0%,#025A4F 100%);color:#fff;
  box-shadow:0 6px 14px -8px rgba(1,60,56,.55),inset 0 1px 0 rgba(255,255,255,.14);
}
body .lpa .lp-carte-machine__case b{font-size:19px;font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
body .lpa .lp-carte-machine__case small{font-family:var(--lp-mono);font-size:9px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;line-height:1;color:rgba(255,255,255,.7)}
body .lpa .lp-carte-machine__chrono.est-dernier-jour .lp-carte-machine__chrono-txt{color:var(--lp-promo,#C8102E)}
body .lpa .lp-carte-machine__chrono.est-dernier-jour .lp-carte-machine__chrono-txt::before{background:var(--lp-promo,#C8102E);box-shadow:0 0 0 3px rgba(200,16,46,.18)}
body .lpa .lp-carte-machine__chrono.est-dernier-jour .lp-carte-machine__case{background:linear-gradient(160deg,#A50D26 0%,#C8102E 100%);box-shadow:0 6px 14px -8px rgba(200,16,46,.6),inset 0 1px 0 rgba(255,255,255,.16)}
body .lpa .lp-carte-machine__chrono.est-finie .lp-carte-machine__chrono-txt{color:#59635F}
body .lpa .lp-carte-machine__chrono.est-finie .lp-carte-machine__chrono-txt::before{background:#9AA5A1;box-shadow:none}
@media (prefers-reduced-motion:no-preference){
  body .lpa .lp-carte-machine__chrono-txt::before{animation:lpa-chrono-point 2s ease-in-out infinite}
  body .lpa .lp-carte-machine__chrono.est-dernier-jour .lp-carte-machine__case:last-child{animation:lpa-chrono-pouls 1s ease-in-out infinite}
}
@keyframes lpa-chrono-point{50%{opacity:.35}}
@keyframes lpa-chrono-pouls{50%{box-shadow:0 0 0 3px rgba(200,16,46,.25)}}
@media (max-width:420px){
  body .lpa .lp-carte-machine__chrono{align-items:flex-start}
  body .lpa .lp-carte-machine__case{min-width:42px}
}
body .lpa .lp-carte-machine__specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0 0}
/* Tuile de caractéristique : pictogramme sur pastille dégradée vert Lupéo, chiffre en gras, nom en mono. */
body .lpa .lp-carte-machine__spec{
  display:flex;align-items:center;gap:12px;min-width:0;padding:11px 14px 11px 11px;border-radius:14px;
  background:linear-gradient(135deg,#F4FAF7 0%,#EAF5F0 100%);border:1px solid #E0EEE7;
}
body .lpa .lp-carte-machine__spec:last-child:nth-child(odd){grid-column:1 / -1}
body .lpa .lp-carte-machine__spec-ico{
  display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;color:#fff;
  background:linear-gradient(145deg,#00A896 0%,#007C75 100%);
  box-shadow:0 6px 12px -6px rgba(0,124,117,.55),inset 0 1px 0 rgba(255,255,255,.28);
}
body .lpa .lp-carte-machine__spec-ico svg{width:22px;height:22px}
body .lpa .lp-carte-machine__spec-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
body .lpa .lp-carte-machine__spec-txt b{font-family:var(--lp-sans,inherit);font-size:17px;font-weight:700;line-height:1.05;letter-spacing:-.02em;color:#0A0F0D;font-variant-numeric:tabular-nums;white-space:nowrap}
body .lpa .lp-carte-machine__spec-txt small{font-family:var(--lp-mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#5B6B66;line-height:1}
body .lpa .lp-carte-machine:hover .lp-carte-machine__spec{border-color:#BFE3D3}
body .lpa .lp-carte-machine__envoi{
  display:flex;align-items:center;gap:8px;margin:16px 0 0;font-size:13.5px;font-weight:500;color:#1B6B52;
}
body .lpa .lp-carte-machine__envoi::before{content:"";width:8px;height:8px;border-radius:50%;background:#00B85D;flex:none}
body .lpa .lp-carte-machine__pied{padding-top:18px;border-top:1px solid #EEF1F0;margin-top:20px;gap:14px}
body .lpa .lp-carte-machine__specs + .lp-carte-machine__pied,body .lpa .lp-carte-machine__nom + .lp-carte-machine__pied,
body .lpa .lp-carte-machine__envoi + .lp-carte-machine__pied{margin-top:20px}
body .lpa .lp-carte-machine__prix{font-size:clamp(24px,1.9vw,30px);font-weight:700;letter-spacing:-.03em;line-height:1}
body .lpa .lp-carte-machine__prix .woocommerce-price-suffix{margin-left:4px}
/* Machine en promotion : nouveau prix, prix barré puis « TTC » sur une ligne, qui ne passe à la ligne que faute de
   place (le thème enveloppe les deux prix dans un .sale-price en flex : empilés et centrés dès que la carte est étroite). */
body .lpa .lp-carte-machine__prix{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-width:0}
body .lpa .lp-carte-machine__prix .sale-price{display:contents}
body .lpa .lp-carte-machine__prix ins{order:0}
body .lpa .lp-carte-machine__prix del{order:1;font-size:.62em}
body .lpa .lp-carte-machine__prix .woocommerce-price-suffix{order:2;margin-left:0}
body .lpa .lp-carte-machine__voir{
  gap:9px;padding:12px 18px;border-radius:10px;background:#007C75;color:#fff;
  font-size:14.5px;font-weight:600;white-space:nowrap;transition:background-color .2s;
}
body .lpa .lp-carte-machine:hover .lp-carte-machine__voir,body .lpa .lp-carte-machine:focus-visible .lp-carte-machine__voir{background:#005F59}
body .lpa .lp-carte-machine__voir .lp-ico,body .lpa .lp-carte-machine__voir svg{width:16px;height:16px;transition:transform .2s}
body .lpa .lp-carte-machine:hover .lp-carte-machine__voir svg{transform:translateX(4px)}
/* ── Vitrine des machines (04/10/2026, demande de David : « mets en valeur les trottinettes », six au bureau) ──
   Fond clair (la section voisine est sombre, une troisième nuit à la suite s'y fondrait), carte « de vitrine » : la photo
   en grand sur sa scène claire, un pied de carte de NUIT où tout se lit en blanc et en menthe, la marque sur une pastille
   blanche (les logos sont sombres), le prix en grand et un bouton d'action vert. Six machines : 3 × 2 au bureau, 2 × 3 sur
   tablette, un défilement à cartes aimantées sur téléphone (la page ne s'allonge pas de six cartes empilées). */
.lpa-machines{background:radial-gradient(60% 38% at 50% 0%,#E6F5EF 0%,rgba(230,245,239,0) 70%),linear-gradient(180deg,#F6F8F7 0%,#fff 100%)}
body .lpa .lpa-machines__grille{gap:clamp(18px,2vw,30px)}
body .lpa .lp-carte-machine{
  display:flex;flex-direction:column;height:100%;
  border:1px solid #0E2A23;border-radius:26px;background:#0A1D18;
  box-shadow:0 1px 2px rgba(10,15,13,.06),0 34px 60px -34px rgba(1,60,56,.55);
}
body .lpa .lp-carte-machine:hover,body .lpa .lp-carte-machine:focus-visible{
  border-color:#00D36B;transform:translateY(-6px);
  box-shadow:0 2px 4px rgba(10,15,13,.06),0 0 0 4px rgba(0,211,107,.16),0 44px 70px -30px rgba(1,60,56,.7);
}
body .lpa .lp-carte-machine:focus-visible{outline:none}
/* La scène : plus grande, la machine entière, un halo menthe et l'ombre au sol (déjà posée plus haut). */
body .lpa .lp-carte-machine__media{
  aspect-ratio:4/3;border-bottom:0;
  background:radial-gradient(72% 66% at 50% 46%,#fff 0%,#E9F5EF 62%,#DCEFE6 100%);
}
body .lpa .lp-carte-machine:hover .lp-carte-machine__media{background:radial-gradient(72% 66% at 50% 46%,#fff 0%,#E2F4EB 62%,#CFEADD 100%)}
body .lpa .lp-carte-machine__media img{padding:3.5%}
/* Le pied de nuit. */
body .lpa .lp-carte-machine__corps{
  flex:1;display:flex;flex-direction:column;padding:24px 26px 26px;
  background:radial-gradient(60% 80% at 0% 0%,rgba(0,211,107,.13) 0%,rgba(0,211,107,0) 70%),#0A1D18;color:rgba(255,255,255,.72);
}
body .lpa .lp-carte-machine__nom{margin:10px 0 0;font-size:clamp(22px,1.8vw,28px);color:#fff}
body .lpa .lp-carte-machine__marque{color:#7CF0B5}
body .lpa .lp-carte-machine__marque--logo{display:inline-flex;align-items:center;align-self:flex-start;height:46px;min-height:46px;padding:0 14px;border-radius:12px;background:#fff;box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}
body .lpa .lp-carte-machine__marque--logo img{max-height:26px;max-width:150px;min-width:34px}
/* Compte à rebours : cases de verre, secondes pulsées au dernier jour (rouge promotion conservé). */
body .lpa .lp-carte-machine__chrono-txt{color:#7CF0B5}
body .lpa .lp-carte-machine__chrono-txt::before{background:#00D36B;box-shadow:0 0 0 3px rgba(0,211,107,.2)}
body .lpa .lp-carte-machine__case{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);box-shadow:none;min-width:44px}
body .lpa .lp-carte-machine__case small{color:rgba(255,255,255,.6)}
body .lpa .lp-carte-machine__chrono.est-dernier-jour .lp-carte-machine__chrono-txt{color:#FF8A9B}
body .lpa .lp-carte-machine__chrono.est-dernier-jour .lp-carte-machine__chrono-txt::before{background:#FF5A73;box-shadow:0 0 0 3px rgba(255,90,115,.22)}
body .lpa .lp-carte-machine__chrono.est-dernier-jour .lp-carte-machine__case{background:linear-gradient(160deg,#A50D26 0%,#C8102E 100%);border-color:transparent}
body .lpa .lp-carte-machine__chrono.est-finie .lp-carte-machine__chrono-txt{color:rgba(255,255,255,.55)}
/* Les quatre chiffres : tuiles de verre, pictogramme menthe. */
body .lpa .lp-carte-machine__specs{gap:8px;margin:20px 0 0}
body .lpa .lp-carte-machine__spec{gap:11px;padding:10px 12px 10px 10px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
body .lpa .lp-carte-machine__spec-ico{width:36px;height:36px;border-radius:11px;color:#06231A;background:linear-gradient(145deg,#3BF09A 0%,#00C26E 100%);box-shadow:0 6px 14px -6px rgba(0,211,107,.6)}
body .lpa .lp-carte-machine__spec-ico svg{width:20px;height:20px}
body .lpa .lp-carte-machine__spec-txt b{font-size:16px;color:#fff}
body .lpa .lp-carte-machine__spec-txt small{color:rgba(255,255,255,.55)}
body .lpa .lp-carte-machine:hover .lp-carte-machine__spec{border-color:rgba(0,211,107,.4)}
body .lpa .lp-carte-machine__envoi{color:#7CF0B5;margin-top:16px}
body .lpa .lp-carte-machine__envoi::before{background:#00D36B;box-shadow:0 0 10px rgba(0,211,107,.8)}
/* Le prix en grand, un bouton d'action vert (le pied reste collé en bas : les prix s'alignent d'une carte à l'autre). */
body .lpa .lp-carte-machine__pied{margin-top:auto;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);align-items:center}
body .lpa .lp-carte-machine__specs + .lp-carte-machine__pied,body .lpa .lp-carte-machine__tete + .lp-carte-machine__pied,
body .lpa .lp-carte-machine__envoi + .lp-carte-machine__pied,body .lpa .lp-carte-machine__nom + .lp-carte-machine__pied{margin-top:auto}
body .lpa .lp-carte-machine__envoi + .lp-carte-machine__pied,body .lpa .lp-carte-machine__specs + .lp-carte-machine__pied{margin-top:auto}
body .lpa .lp-carte-machine__envoi,body .lpa .lp-carte-machine__specs{margin-bottom:20px}
body .lpa .lp-carte-machine__prix{font-size:clamp(26px,2.1vw,34px);color:#fff}
body .lpa .lp-carte-machine__prix del{color:rgba(255,255,255,.5)}
body .lpa .lp-carte-machine__prix .woocommerce-price-suffix,body .lpa .lp-carte-machine__prix small{color:rgba(255,255,255,.55)}
body .lpa .lp-carte-machine__voir{padding:13px 20px;border-radius:999px;background:#00D36B;color:#06231A;font-weight:700;box-shadow:0 14px 28px -14px rgba(0,211,107,.9)}
body .lpa .lp-carte-machine:hover .lp-carte-machine__voir,body .lpa .lp-carte-machine:focus-visible .lp-carte-machine__voir{background:#3BF09A}
/* Au-dessous de 1280 px, les trois colonnes se resserrent : tuiles et chiffres un cran plus petits (« 2 × 1 000 W » tient). */
@media (max-width:1280px){
  body .lpa .lp-carte-machine__corps{padding:22px 20px 22px}
  body .lpa .lp-carte-machine__spec{gap:9px;padding:9px 10px 9px 9px}
  body .lpa .lp-carte-machine__spec-ico{width:32px;height:32px;border-radius:10px}
  body .lpa .lp-carte-machine__spec-ico svg{width:18px;height:18px}
  body .lpa .lp-carte-machine__spec-txt b{font-size:14.5px}
  body .lpa .lp-carte-machine__voir{padding:12px 16px}
}
/* Tablette (641–1100 px) : deux colonnes, trois rangées. Aux largeurs les plus étroites de cette plage, les quatre chiffres
   passent sur une colonne (la puissance « 2 × 1 000 W » est la plus longue) ; ils reprennent deux colonnes dès 760 px. */
@media (min-width:641px) and (max-width:1100px){
  body .lpa .lpa-machines__grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  body .lpa .lp-carte-machine__nom{font-size:clamp(21px,2.6vw,26px)}
}
@media (min-width:641px) and (max-width:759px){
  body .lpa .lp-carte-machine__specs{grid-template-columns:minmax(0,1fr)}
  body .lpa .lp-carte-machine__spec:last-child:nth-child(odd){grid-column:auto}
  body .lpa .lp-carte-machine__spec-txt small{white-space:nowrap}
}
/* Téléphone (≤ 640 px) : un défilement horizontal à cartes aimantées — la carte suivante dépasse, on sait qu'il y en a
   d'autres. Pas de JavaScript : le défilement et l'aimantation sont natifs. */
@media (max-width:640px){
  body .lpa .lpa-machines__grille{
    display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;gap:14px;
    margin-inline:calc(-1 * clamp(20px,3vw,44px));padding:8px clamp(20px,3vw,44px) 30px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scroll-padding-inline:clamp(20px,3vw,44px);scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  body .lpa .lpa-machines__grille::-webkit-scrollbar{display:none}
  body .lpa .lpa-machines__grille > li{scroll-snap-align:start;min-width:0}
  body .lpa .lp-carte-machine{border-radius:22px}
  body .lpa .lp-carte-machine__corps{padding:20px 16px 20px}
  body .lpa .lp-carte-machine:hover,body .lpa .lp-carte-machine:focus-visible{transform:none}
  /* Cartes de 84 % de l'écran : tuiles et chiffres resserrés, légendes sur une ligne, prix et bouton sur deux lignes si besoin. */
  body .lpa .lp-carte-machine__specs{gap:6px}
  body .lpa .lp-carte-machine__spec{gap:7px;padding:9px 6px 9px 7px;border-radius:12px}
  body .lpa .lp-carte-machine__spec-ico{width:30px;height:30px;border-radius:9px}
  body .lpa .lp-carte-machine__spec-ico svg{width:17px;height:17px}
  body .lpa .lp-carte-machine__spec-txt b{font-size:13.5px;letter-spacing:-.035em}
  body .lpa .lp-carte-machine__spec-txt small{font-size:8.5px;letter-spacing:.06em;white-space:nowrap}
  /* La valeur a la priorité sur le pictogramme : sur une carte très étroite (≤ 360 px), il passe au-dessus du chiffre. */
  @media (max-width:380px){
    body .lpa .lp-carte-machine__spec{flex-direction:column;align-items:flex-start;gap:6px}
    body .lpa .lp-carte-machine__spec-txt b{white-space:normal}
  }
  body .lpa .lp-carte-machine__pied{flex-wrap:wrap;gap:12px}
  body .lpa .lp-carte-machine__prix{font-size:26px}
  body .lpa .lp-carte-machine__voir{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){
  body .lpa .lp-carte-machine,body .lpa .lp-carte-machine__media img,body .lpa .lp-carte-machine__voir svg{transition:none}
  body .lpa .lp-carte-machine:hover{transform:none}
  body .lpa .lp-carte-machine:hover .lp-carte-machine__media img{transform:none}
}

/* ---------- 7. Aide ----------------------------------------------------------------------
   Composition du prototype : pastille, titre, phrase, trois cartes à grande photo. */
.lp-aide{padding-block:clamp(48px,6vw,88px);border-block:1px solid #CBE6DC}
.lp-aide__tete{max-width:640px;margin-bottom:clamp(32px,4vw,48px)}
.lp-aide__pastille{
  display:inline-flex;align-items:center;gap:11px;
  margin:0 0 22px;padding:9px 16px;
  border-radius:var(--lp-r-pill);
  background:var(--lp-surface);
  font-size:13px;font-weight:600;line-height:normal;color:var(--lp-ink);
}
.lp-aide__pastille .lp-ico{flex:none;color:var(--lp-green-600)}
.lp-aide__tete .lp-h2{margin:0 0 18px;font-size:clamp(28px,3.4vw,46px);line-height:1.02;letter-spacing:-.03em}
.lp-aide__tete .lp-chapo{max-width:none;margin:0;font-size:17.5px;line-height:1.6;color:var(--lp-ink-brume)}
.lp-aide__etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:16px;margin:0;padding:0;list-style:none}
.lp-aide__etape{
  display:flex;flex-direction:column;margin:0;
  border:1px solid rgba(10,15,13,.05);border-radius:var(--lp-r-4);
  background:var(--lp-surface);
  box-shadow:0 2px 4px rgba(10,15,13,.04),0 14px 32px -16px rgba(10,15,13,.18);
  overflow:hidden;
}
.lp-aide__photo{position:relative;aspect-ratio:4/3;background:var(--lp-green-100);overflow:hidden}
.lp-aide__photo img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* Cadrage : la tête du client à la première, les libellés « Sur la
   trottinette / Déposée » à la deuxième restent dans le cadre 4/3. */
.lp-aide__photo--haut img{object-position:50% 0}
.lp-aide__photo--bas img{object-position:50% 72%}
.lp-aide__numero{
  position:absolute;top:14px;left:14px;
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--lp-green-900);
  font-family:var(--lp-mono);font-size:12px;font-weight:500;line-height:1;color:#fff;
}
.lp-aide__texte{display:flex;align-items:flex-start;gap:12px;flex:1;padding:16px 18px 18px}
.lp-aide__ico{flex:none;margin-top:1px;line-height:0;color:var(--lp-green-600)}
.lp-aide__ico .lp-ico{width:24px;height:24px}
.lp-aide__texte h3{margin:0 0 4px;font-size:16px;line-height:normal;letter-spacing:-.014em;font-weight:700;color:var(--lp-ink)}
.lp-aide__texte p{margin:0;font-size:13.5px;line-height:1.5;color:var(--lp-ink-brume)}

.lp-aide__action{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-top:clamp(28px,3.4vw,40px)}
.lpa-btn--aide{padding:18px 28px;border-radius:9px;font-size:16.5px}
.lp-aide__version{
  display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border-radius:7px;
  background:#FFF3D6;font-size:13px;font-weight:600;line-height:normal;color:#7A5200;
}
.lp-aide__version svg{width:15px;height:15px;flex:none;stroke-width:2.2}

/* ---------- 8. Guides ------------------------------------------------------------------- */
.lpa-guides__grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
/* Carte « accueil » du prototype : la pastille de rubrique sur l'image, la durée
   seule au-dessus du titre. */
.lp-guide-carte--accueil .lp-guide__media{aspect-ratio:16/10;margin-bottom:18px;border-radius:14px}
.lp-guide__pastille{
  position:absolute;left:14px;bottom:14px;z-index:1;
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px;border-radius:8px;background:#fff;
  font-size:12.5px;font-weight:600;line-height:normal;color:#0A0F0D;
}
.lp-guide__pastille svg{width:16px;height:16px;color:#007C75}
.lp-guide-carte--accueil .lp-guide__meta{margin-top:0}
.lp-guide-carte--accueil .lp-guide__duree{font-size:10.5px;letter-spacing:.14em;color:#6B7572}
.lp-guide-carte--accueil .lp-guide__titre{margin:10px 0;font-size:21px;line-height:1.2;letter-spacing:-.02em}
.lp-guide-carte--accueil .lp-guide__chapo{-webkit-line-clamp:2;font-size:15px;line-height:1.6;color:#59635F}

/* ---------- Adaptations (points de rupture du prototype) ---------------------------------- */
@media (max-width:1240px){
  .lpa .lp-trouveur__champs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lpa .lp-trouveur__go{grid-column:1/-1}
}
@media (max-width:1040px){
  .lpa-hero__in{grid-template-columns:minmax(0,1fr)}
  .lpa-hero__media{min-height:340px}
  .lpa .lp-marques__in{grid-template-columns:minmax(0,1fr)}
  .lpa .lp-marques__texte{max-width:none}
  .lpa-atelier__in{grid-template-columns:minmax(0,1fr)}
  .lpa-atelier__media{min-height:340px}
}
@media (max-width:720px){
  .lpa .lp-trouveur__champs{grid-template-columns:minmax(0,1fr)}
  .lpa .lp-trouveur__etapes{display:none}
  .lpa-hero__parts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .lpa .lp-marques__grille{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .lpa-carte{transition:none}
  .lp-guide__media img{transition:none}
  .lp-guide:hover .lp-guide__media img{transform:none}
}

/* ---------- Interlignes : « normal », comme le prototype ----------------------------------
   Le prototype ne fixe aucun `line-height` global : tout texte qui n'en porte pas a l'interligne « normal ».
   Le thème impose 1,65 au corps de page (hérité) ; `.lpa` le ramène à « normal » (règle du haut de la feuille).
   Restent les composants du design system qui posent le leur (1,2 à 1,4) : on les ramène ici, dans l'accueil seul —
   les autres pages gardent leur rendu. Le bloc est en (0,2,2) : il l'emporte sur ces règles à une classe. */
body .lpa :is(.lp-eyebrow,.lp-btn,.lp-puce,.lp-carte-marque__nom,.woocommerce-price-suffix){line-height:normal}
/* Puces « Modèles les mieux couverts » : 13,5 px, filet #E4E8E6, 8 × 14 px, compteur mono 10,5 px, centrées, survol vert (prototype). */
.lpa .lp-marques__modeles .lp-puce{align-items:center;padding:8px 14px;border-color:#E4E8E6;font-size:13.5px}
.lpa .lp-marques__modeles .lp-puce small{font-size:10.5px}
.lpa .lp-marques__modeles .lp-puce:hover,.lpa .lp-marques__modeles .lp-puce:focus-visible{border-color:#007C75;background:#F1FAF5;color:#007C75}
/* Bouton « Toutes les marques » : contour de 1,5 px, 15 px, remplissage 15 × 22 px, écart 10 px, icône 17 px (prototype). */
.lpa .lp-marques .lp-btn{gap:10px;min-height:0;padding:15px 22px;border-width:1.5px;font-size:15px}
.lpa .lp-marques .lp-btn .lp-ico{width:17px;height:17px}
/* Carte de marque : le gabarit du prototype (#marques) — remplissage 18 / 18 / 16 px, filet #EEF1F0, angle 14 px, pastille de logo de 56 px
   (filet #EEF1F0, angle 10 px), écart 14 px, compteur mono 12 px à 4 px du nom, puces #F1FAF5 de 6 × 11 px, pied à 13 px, icône 16 px.
   Le prototype est un seul lien : ici la carte réagit au survol de la même façon (les liens de la carte restent distincts). */
.lpa .lp-carte-marque{padding:18px 18px 16px;border-color:#EEF1F0;border-radius:14px;transition:border-color .2s,box-shadow .2s}
.lpa .lp-carte-marque:hover,.lpa .lp-carte-marque:focus-within{border-color:#B9E3D6;box-shadow:0 2px 4px rgba(10,15,13,.04),0 14px 32px -12px rgba(10,15,13,.16)}
.lpa .lp-carte-marque__tete{gap:14px}
.lpa .lp-carte-marque__logo{width:56px;height:56px;border:1px solid #EEF1F0;border-radius:10px}
.lpa .lp-carte-marque__nom{letter-spacing:-.018em}
.lpa .lp-carte-marque__nb{margin-top:4px;font-size:12px;color:#5B655F}
.lpa .lp-carte-marque .lp-puce{padding:6px 11px;border-radius:6px;background:#F1FAF5;color:#3F4A47}
.lpa .lp-carte-marque .lp-puce:hover,.lpa .lp-carte-marque .lp-puce:focus-visible{background:#D5EEE4;color:#0A0F0D}
.lpa .lp-carte-marque__pied{padding-top:13px;border-top-color:#EEF1F0}
.lpa .lp-carte-marque__pied .lp-ico{width:16px;height:16px}

/* ---------- Les bons plans du moment (promotions) --------------------------- */
/* Bande vert profond pleine largeur, entre les pièces d'usure et l'atelier : à gauche la plus forte réduction
   et la prochaine échéance, à droite jusqu'à quatre cartes au ruban de réduction. Texte clair sur #013C38
   (14:1) ; le vert action ne porte que le chiffre et les contours de l'urgence. */
.lpa-promos{
  position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(860px 460px at 0% 0%,#005F59 0%,rgba(0,95,89,0) 70%),#013C38;
}
.lpa-promos__wrap{
  display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:center;
}
.lpa-promos__kicker{
  margin:0 0 16px;font-family:var(--lp-mono);font-size:11px;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:#8FE3C0;
}
.lpa-promos__titre{
  margin:0 0 22px;max-width:12ch;color:#fff;
  font-size:clamp(32px,3.6vw,48px);line-height:1.02;letter-spacing:-.03em;font-weight:700;
}
.lpa-promos__chiffre{margin:0 0 18px;display:flex;align-items:baseline;gap:12px;line-height:1}
.lpa-promos__jusqua{font-family:var(--lp-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8FE3C0}
.lpa-promos__chiffre strong{font-size:clamp(64px,7vw,104px);font-weight:700;letter-spacing:-.045em;color:#00D36B;font-variant-numeric:tabular-nums}
.lpa-promos__texte{margin:0 0 26px;max-width:36ch;font-size:16px;line-height:1.55;color:rgba(255,255,255,.8)}
.lpa-promos__chrono{padding-top:20px;border-top:1px solid rgba(255,255,255,.18)}
.lpa-promos__chrono-txt{margin:0 0 12px;font-size:13.5px;color:rgba(255,255,255,.82)}
.lpa-promos__digits{display:grid;grid-template-columns:repeat(4,minmax(0,64px));gap:8px}
.lpa-promos__digits[hidden]{display:none}
.lpa-promos__cell{
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px 7px;
  border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.07);
}
.lpa-promos__n{font-weight:700;font-variant-numeric:tabular-nums;font-size:26px;line-height:1.05;letter-spacing:-.02em;color:#fff}
.lpa-promos__u{font-family:var(--lp-mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.lpa-promos__chrono.est-dernier-jour .lpa-promos__cell{border-color:#00D36B}
.lpa-promos__chrono.est-dernier-jour .lpa-promos__n{color:#00D36B}
@media (prefers-reduced-motion:no-preference){
  .lpa-promos__chrono.est-dernier-jour .lpa-promos__cell:last-child{animation:lpa-promos-pouls 1s ease-in-out infinite}
}
@keyframes lpa-promos-pouls{50%{box-shadow:0 0 0 3px rgba(0,211,107,.25)}}
.lpa-promos__grille{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:1599px){
  .lpa-promos__grille{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .lpa-promos__wrap{grid-template-columns:minmax(0,1fr);align-items:start}
  .lpa-promos__titre{max-width:none}
}
@media (max-width:600px){
  .lpa-promos__grille{grid-template-columns:minmax(0,1fr)}
  .lpa-promos__grille > :nth-child(n+3){display:none}
  .lpa-promos__digits{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- Sécurité du pilote (demande de David du 01/10/2026) -------------------------------------------
   Section « de nuit » : le pilote doit être vu. Fond encre vert nuit, halo vert Lupéo, et en filigrane des bandes
   réfléchissantes (blanches à 5 %, jamais de jaune décoratif) qui s'allument doucement au passage. À gauche la
   promesse et les deux rayons en tuiles de verre ; à droite quatre cartes produit blanches qui « éclairent » la nuit. */
.lpa-secu{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(60% 80% at 12% 10%,rgba(0,211,107,.20) 0%,rgba(0,211,107,0) 60%),
    radial-gradient(50% 70% at 95% 100%,rgba(0,168,150,.22) 0%,rgba(0,168,150,0) 65%),
    linear-gradient(160deg,#06110E 0%,#0B1F1A 55%,#08231D 100%);
  color:#fff;
}
.lpa-secu::before{
  content:"";position:absolute;z-index:-1;top:-20%;right:-8%;width:46%;height:140%;
  background:repeating-linear-gradient(-55deg,rgba(255,255,255,.055) 0 18px,rgba(255,255,255,0) 18px 64px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 45%,#000 100%);
  pointer-events:none;
}
.lpa-secu__wrap{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.6fr);gap:clamp(32px,4vw,64px);align-items:center}
.lpa-secu__kicker{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 22px;padding:6px 12px 6px 10px;border-radius:999px;
  border:1px solid rgba(0,211,107,.35);background:rgba(0,211,107,.10);
  font-family:var(--lp-mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#7CF0B5;
}
.lpa-secu__kicker svg{width:16px;height:16px;color:#00D36B}
.lpa-secu__titre{margin:0 0 18px;max-width:15ch;font-size:clamp(32px,3.6vw,52px);line-height:1;letter-spacing:-.035em;font-weight:700;color:#fff;text-wrap:balance}
.lpa-secu__texte{margin:0 0 28px;max-width:42ch;font-size:clamp(15px,1.1vw,17px);line-height:1.6;color:rgba(255,255,255,.72)}
.lpa-secu__rayons{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.lpa-secu__rayons li{margin:0;padding:0}
.lpa-secu__rayon{
  display:flex;align-items:center;gap:16px;padding:14px 18px 14px 14px;border-radius:16px;color:#fff;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .25s ease,border-color .25s ease,background-color .25s ease;
}
.lpa-secu__rayon:hover,.lpa-secu__rayon:focus-visible{transform:translateX(4px);border-color:rgba(0,211,107,.6);background:rgba(0,211,107,.12);color:#fff}
.lpa-secu__rayon-ico{
  display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:14px;color:#06231A;
  background:linear-gradient(145deg,#3BF09A 0%,#00B85D 100%);
  box-shadow:0 0 0 4px rgba(0,211,107,.14),0 10px 24px -8px rgba(0,211,107,.55);
}
.lpa-secu__rayon-ico svg{width:24px;height:24px}
.lpa-secu__rayon-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.lpa-secu__rayon-txt b{font-size:17px;font-weight:700;letter-spacing:-.01em}
.lpa-secu__rayon-txt small{font-family:var(--lp-mono);font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.6)}
.lpa-secu__rayon-fleche{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);transition:transform .25s ease,background-color .25s ease}
.lpa-secu__rayon:hover .lpa-secu__rayon-fleche{transform:translateX(3px);background:#00D36B;color:#06231A}
.lpa-secu__rayon-fleche svg{width:18px;height:18px}
.lpa-secu__promesse{display:flex;align-items:center;gap:9px;margin:22px 0 0;font-size:14px;font-weight:500;color:#9FE8C4}
.lpa-secu__promesse svg{width:18px;height:18px;color:#00D36B;flex:none}
/* Cartes : blanches sur la nuit, ombre portée verte, se soulèvent au survol. */
body .lpa .lpa-secu__grille{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
body .lpa .lpa-secu .lupeo-card{border-color:rgba(255,255,255,.08);box-shadow:0 18px 40px -20px rgba(0,0,0,.6);transition:transform .25s ease,box-shadow .25s ease}
body .lpa .lpa-secu .lupeo-card:hover{transform:translateY(-6px);border-color:#00D36B;box-shadow:0 26px 50px -18px rgba(0,211,107,.35)}
/* Sous 1 500 px : l'introduction passe au-dessus, en deux colonnes (promesse | rayons), et les quatre cartes en
   une rangée dessous (en 2 × 2, elles devenaient immenses et la section dépassait 1 200 px). */
@media (max-width:1499px){
  .lpa-secu__wrap{grid-template-columns:minmax(0,1fr);gap:40px}
  .lpa-secu__intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(32px,5vw,80px);align-items:end}
  .lpa-secu__kicker,.lpa-secu__titre,.lpa-secu__texte{grid-column:1;justify-self:start}
  .lpa-secu__titre{max-width:18ch}
  .lpa-secu__texte{margin-bottom:0}
  .lpa-secu__rayons{grid-column:2;grid-row:1 / span 3;align-self:end}
  .lpa-secu__promesse{grid-column:2;margin-top:16px}
}
@media (max-width:860px){
  body .lpa .lpa-secu__grille{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .lpa-secu__intro{display:block}
  .lpa-secu__texte{margin-bottom:24px}
  .lpa-secu::before{width:80%;opacity:.7}
}
@media (max-width:600px){
  body .lpa .lpa-secu__grille{gap:12px}
}
@media (prefers-reduced-motion:no-preference){
  .lpa-secu::before{animation:lpa-secu-reflet 9s ease-in-out infinite alternate}
}
@keyframes lpa-secu-reflet{from{opacity:.55}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .lpa-secu__rayon,.lpa-secu__rayon-fleche,body .lpa .lpa-secu .lupeo-card{transition:none}
  .lpa-secu__rayon:hover,body .lpa .lpa-secu .lupeo-card:hover{transform:none}
}

/* ---------- Pièces d'usure : le palmarès de la compatibilité (demande de David du 01/10/2026) ----------------
   Fond technique (grille de plan qui s'estompe), en-tête à deux colonnes avec le chiffre record, cartes classées
   (01 → 06) et jauge de compatibilité à la place de la pastille : sa longueur = modèles de la pièce / record. */
.lpa-usure{position:relative;isolation:isolate;background:linear-gradient(180deg,#fff 0%,#F4FAF7 100%)}
.lpa-usure::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(0,124,117,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,124,117,.07) 1px,transparent 1px);
  background-size:36px 36px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(70% 60% at 85% 0%,#000 0%,transparent 75%);mask-image:radial-gradient(70% 60% at 85% 0%,#000 0%,transparent 75%);
}
.lpa-usure__tete{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:24px clamp(32px,5vw,96px);align-items:end;margin-bottom:40px}
.lpa-usure__record{display:grid;gap:10px;justify-items:start;padding-left:clamp(0px,2vw,32px);border-left:2px solid #CBE6DC}
.lpa-usure__record-chiffre{display:flex;align-items:baseline;gap:12px;margin:0}
.lpa-usure__record-chiffre strong{
  font-size:clamp(48px,5vw,76px);font-weight:700;line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,#00B85D 0%,#007C75 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.lpa-usure__record-chiffre span{max-width:12ch;font-size:15px;font-weight:600;line-height:1.25;color:#0A0F0D}
.lpa-usure__record-texte{margin:0;max-width:44ch;font-size:14px;line-height:1.55;color:#59635F}
.lpa-usure__tout{
  display:inline-flex;align-items:center;gap:9px;margin-top:6px;padding:11px 18px;border-radius:999px;
  background:#0A0F0D;color:#fff;font-size:14px;font-weight:600;transition:background-color .2s,gap .2s;
}
.lpa-usure__tout:hover,.lpa-usure__tout:focus-visible{background:#007C75;color:#fff;gap:13px}
.lpa-usure__tout svg{width:16px;height:16px}
/* Carte classée : le rang en chiffres creux sur la photo, la carte se soulève au survol. */
.lpa-usure__item{position:relative;min-width:0;display:flex}
.lpa-usure__item > .lupeo-card{flex:1;min-width:0}
.lpa-usure__rang{
  position:absolute;top:12px;left:14px;z-index:4;pointer-events:none;
  font-family:var(--lp-mono);font-size:30px;font-weight:600;line-height:1;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1.2px rgba(0,124,117,.55);
}
.lpa-usure__item:first-child .lpa-usure__rang{-webkit-text-stroke:0;color:#00B85D}
body .lpa .lpa-usure .lupeo-card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
body .lpa .lpa-usure .lupeo-card:hover{transform:translateY(-5px);border-color:#9FD9C4;box-shadow:0 22px 44px -22px rgba(1,60,56,.35)}
body .lpa .lpa-usure .lupeo-vignette__img{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
body .lpa .lpa-usure .lupeo-card:hover .lupeo-vignette__img{transform:scale(1.06)}
/* La jauge : « Compatible 24 modèles », puis une barre dont la longueur suit le nombre de modèles. */
body .lpa .lpa-usure .lupeo-card__badge{
  position:relative;display:block;width:100%;margin:12px 0 10px;padding:0 0 12px;border:0;border-radius:0;background:none;
  font-size:13px;font-weight:600;color:#00605A;
}
body .lpa .lpa-usure .lupeo-card__badge svg{display:none}
body .lpa .lpa-usure .lupeo-card__badge::before,
body .lpa .lpa-usure .lupeo-card__badge::after{content:"";position:absolute;left:0;bottom:0;height:5px;border-radius:5px}
body .lpa .lpa-usure .lupeo-card__badge::before{right:0;background:#E3EEE9}
body .lpa .lpa-usure .lupeo-card__badge::after{
  width:calc(var(--part,1) * 100%);background:linear-gradient(90deg,#00D36B 0%,#007C75 100%);
  box-shadow:0 0 10px rgba(0,211,107,.35);transform-origin:left center;
}
.lpa-usure--anime .lupeo-card__badge::after{transform:scaleX(0)}
.lpa-usure--anime.est-vu .lupeo-card__badge::after{transform:scaleX(1);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.lpa-usure--anime.est-vu .lpa-usure__item:nth-child(2) .lupeo-card__badge::after{transition-delay:.08s}
.lpa-usure--anime.est-vu .lpa-usure__item:nth-child(3) .lupeo-card__badge::after{transition-delay:.16s}
.lpa-usure--anime.est-vu .lpa-usure__item:nth-child(4) .lupeo-card__badge::after{transition-delay:.24s}
.lpa-usure--anime.est-vu .lpa-usure__item:nth-child(5) .lupeo-card__badge::after{transition-delay:.32s}
.lpa-usure--anime.est-vu .lpa-usure__item:nth-child(6) .lupeo-card__badge::after{transition-delay:.40s}
@media (max-width:1000px){
  .lpa-usure__tete{grid-template-columns:minmax(0,1fr)}
  .lpa-usure__record{padding-left:18px}
}
@media (prefers-reduced-motion:reduce){
  body .lpa .lpa-usure .lupeo-card,body .lpa .lpa-usure .lupeo-vignette__img{transition:none}
  body .lpa .lpa-usure .lupeo-card:hover,body .lpa .lpa-usure .lupeo-card:hover .lupeo-vignette__img{transform:none}
}

/* ---------- 6 ter. Avis clients (04/10/2026, demande de David) -----------------------------------------------------------
   Une carte de synthèse de nuit (note moyenne, nombre, répartition dès trois avis) et, à côté, les avis publiés les plus récents
   en cartes blanches : la même famille que les pages éditoriales et la section des machines. Les avis ne sont ni triés ni
   choisis à l'avantage de la boutique (voir Lupeo_Accueil::donnees_avis()). Bureau : synthèse | cartes sur deux colonnes ;
   tablette : synthèse en bande puis deux colonnes ; téléphone : synthèse puis défilement horizontal à cartes aimantées. */
.lpa-avis{background:radial-gradient(52% 38% at 88% 0%,#E6F5EF 0%,rgba(230,245,239,0) 70%),#fff}
.lpa-avis__wrap{
  display:grid;grid-template-columns:minmax(300px,390px) minmax(0,1fr);
  gap:clamp(22px,3vw,44px);align-items:start;
}
.lpa-avis__synthese{
  position:sticky;top:110px;
  padding:clamp(26px,2.6vw,38px);border-radius:28px;color:rgba(255,255,255,.74);
  background:radial-gradient(70% 70% at 0% 0%,rgba(0,211,107,.24) 0%,rgba(0,211,107,0) 70%),#0A1D18;
  box-shadow:0 1px 2px rgba(10,15,13,.06),0 34px 60px -34px rgba(1,60,56,.55);
}
.lpa-avis__kicker{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;padding:6px 13px 6px 11px;
  border:1px solid rgba(0,211,107,.35);border-radius:999px;background:rgba(0,211,107,.10);
  font-family:var(--lp-mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#7CF0B5;
}
.lpa-avis__kicker svg{width:16px;height:16px;flex:none}
.lpa-avis__titre{margin:0 0 26px;font-size:clamp(28px,2.6vw,38px);line-height:1.04;letter-spacing:-.035em;font-weight:700;color:#fff}
.lpa-avis__note{padding:22px 0 0;border-top:1px solid rgba(255,255,255,.14)}
.lpa-avis__score{display:flex;align-items:baseline;gap:8px;margin:0 0 8px;line-height:1}
.lpa-avis__score b{font-size:clamp(56px,5.4vw,76px);font-weight:700;letter-spacing:-.045em;color:#fff}
.lpa-avis__score span{font-size:19px;color:rgba(255,255,255,.55)}
.lpa-avis__synthese .star-rating{float:none;margin:2px 0 14px;font-size:1.25em}
.lpa-avis__total{margin:0;font-size:15px;line-height:1.45;color:rgba(255,255,255,.76)}
.lpa-avis__barres{display:flex;flex-direction:column;gap:9px;margin:22px 0 0;padding:20px 0 0;list-style:none;border-top:1px solid rgba(255,255,255,.14)}
.lpa-avis__barres li{display:grid;grid-template-columns:64px minmax(0,1fr) 24px;align-items:center;gap:10px;margin:0;font-size:12.5px;color:rgba(255,255,255,.7)}
.lpa-avis__barre{display:block;height:7px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.lpa-avis__barre i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#3BF09A,#00D36B)}
.lpa-avis__barre-n{text-align:right;font-variant-numeric:tabular-nums}
.lpa-avis__loi{margin:22px 0 0;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.55)}

.lpa-avis__liste{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(14px,1.6vw,22px);
  margin:0;padding:0;list-style:none;
}
.lpa-avis__liste > li{margin:0;min-width:0}
/* Un ou deux avis : empilés pleine largeur, étirés à la hauteur de la carte de synthèse (pas de grand vide dessous). Dès trois : grille. */
@media (min-width:1001px){
  .lpa-avis__wrap:has(.lpa-avis__liste > li:last-child:nth-child(-n+2)){align-items:stretch}
  .lpa-avis__liste:has(> li:last-child:nth-child(-n+2)){grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr}
  .lpa-avis__liste:has(> li:last-child:nth-child(-n+2)) .lpa-avis__texte{-webkit-line-clamp:9;line-clamp:9}
}
.lpa-avis__carte{
  position:relative;display:flex;flex-direction:column;height:100%;box-sizing:border-box;
  padding:clamp(22px,2vw,30px);border:1px solid #E3EAE7;border-radius:24px;background:#fff;
  box-shadow:0 1px 2px rgba(10,15,13,.04),0 18px 40px -26px rgba(10,15,13,.22);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.lpa-avis__carte:hover{transform:translateY(-4px);border-color:#00B85D;box-shadow:0 2px 4px rgba(10,15,13,.05),0 28px 50px -24px rgba(1,60,56,.32)}
/* Le guillemet décoratif, en filigrane vert. */
.lpa-avis__carte::after{
  content:"";position:absolute;top:18px;right:22px;width:46px;height:36px;pointer-events:none;opacity:.9;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 36'%3E%3Cpath fill='%23E6F5EF' d='M0 36V21.4C0 9.6 6.4 2.2 17.6 0l2.6 5.6C13.8 7.6 11 11.4 10.6 16.6H20V36zm26 0V21.4C26 9.6 32.4 2.2 43.6 0l2.4 5.6C39.8 7.6 37 11.4 36.6 16.6H46V36z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lpa-avis__carte-tete{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin:0 0 16px}
.lpa-avis__carte .star-rating{float:none;margin:0;font-size:1.05em}
.lpa-avis__date{font-family:var(--lp-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#6B7572}
.lpa-avis__texte{
  margin:0 0 22px;font-size:clamp(16px,1.15vw,18px);line-height:1.65;color:#37423D;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;line-clamp:7;overflow:hidden;
}
.lpa-avis__carte-pied{display:flex;align-items:center;gap:13px;margin-top:auto;padding-top:18px;border-top:1px solid #EEF1F0}
.lpa-avis__initiale{
  display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,#00D36B,#00A896);box-shadow:0 0 0 3px #fff,0 0 0 4px #CBE6DC;
  font-size:18px;font-weight:700;line-height:1;color:#06231A;
}
.lpa-avis__qui{display:flex;flex-direction:column;gap:5px;min-width:0}
.lpa-avis__qui b{font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2;color:#0A0F0D}
.lpa-avis__qui small{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:12.5px;line-height:1.35;color:#59635F}
.lpa-avis__confirme{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 7px;border-radius:999px;background:#E6F5EF;
  font-size:11.5px;font-weight:600;color:#00524D;
}
.lpa-avis__confirme::before{
  content:"";width:13px;height:13px;flex:none;border-radius:50%;
  background:#007C75 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4.3 4.3L18.5 8'/%3E%3C/svg%3E") center / 9px 9px no-repeat;
}
.lpa-avis__qui a{color:#007C75;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.lpa-avis__qui a:hover,.lpa-avis__qui a:focus-visible{color:#005F59}
/* Les étoiles sont celles de Blocksy ; le thème peint un aplat turquoise derrière : annulé. */
.lpa-avis .star-rating span{background:none}

/* Tablette (≤ 1000 px) : la synthèse devient une bande horizontale au-dessus des cartes. */
@media (max-width:1000px){
  .lpa-avis__wrap{grid-template-columns:minmax(0,1fr)}
  .lpa-avis__synthese{
    position:static;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(24px,5vw,56px);align-items:start;
  }
  .lpa-avis__synthese > .lpa-avis__kicker,
  .lpa-avis__synthese > .lpa-avis__titre{grid-column:1 / -1}
  .lpa-avis__synthese > .lpa-avis__titre{margin-bottom:20px}
  .lpa-avis__note{grid-column:1;padding-top:20px}
  .lpa-avis__barres{grid-column:2;margin:0;padding:22px 0 0;border-top:1px solid rgba(255,255,255,.14)}
  .lpa-avis__loi{grid-column:1 / -1;margin-top:18px}
  .lpa-avis__synthese:not(:has(.lpa-avis__barres)) > .lpa-avis__note{grid-column:1 / -1}
}
/* Téléphone (≤ 640 px) : synthèse en bloc, puis un défilement horizontal à cartes aimantées (la suivante dépasse : on sait qu'il y en a
   d'autres) — natif, sans JavaScript. */
@media (max-width:640px){
  .lpa-avis__synthese{display:block;padding:24px 20px 22px;border-radius:22px}
  .lpa-avis__barres{margin-top:18px;padding-top:18px}
  .lpa-avis__liste,
  .lpa-avis__liste:has(> li:last-child:nth-child(-n+2)){
    display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;gap:14px;
    margin-inline:calc(-1 * clamp(20px,3vw,44px));padding:8px clamp(20px,3vw,44px) 26px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scroll-padding-inline:clamp(20px,3vw,44px);scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .lpa-avis__liste::-webkit-scrollbar{display:none}
  .lpa-avis__liste > li{scroll-snap-align:start}
  .lpa-avis__liste:has(> li:only-child){grid-auto-columns:100%}
  .lpa-avis__liste:has(> li:last-child:nth-child(-n+2)){grid-auto-rows:auto}
  .lpa-avis__carte{padding:20px 18px;border-radius:20px}
  .lpa-avis__carte:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .lpa-avis__carte{transition:none}
  .lpa-avis__carte:hover{transform:none}
}