/*
Theme Name: Univers
Description: Thème d'univers-tondeuse.com, écrit à la main. WooCommerce reste le moteur des fiches ; Rank Math pour les titres.
Author: Clément Quatravaux
Version: 1.0
Text Domain: univers
*/

/* ==========================================================================
   Charte (celle du site d'avant, reprise du kit Elementor à la refonte du 16/10/2026, en plus soigné)
   Vert #3B783C, encre #172121, texte #444444, fond #F6F6F6, blanc. Inter partout : titres en 700, capitales
   de 14 px en 500 interlettrées de 0,5 px pour les boutons et les menus. Coins arrondis, boutons en pilule,
   cartes blanches sur fond gris clair, ombres douces. Le responsive est tout en bas : écrit plus haut, il serait écrasé.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --vert: #3b783c;
  --vert-fonce: #2c5d2d;
  --vert-clair: #cfe2cf;
  --vert-pale: #edf4ed;
  --encre: #172121;
  --texte: #444444;
  --gris: #6a7070;
  --fond: #f6f6f6;
  --fond-2: #eef0ee;
  --blanc: #ffffff;
  --trait: #e3e6e3;
  --trait-2: #cfd4cf;
  --ok: #2f7a3a;
  --ko: #b42318;
  --attente: #9a5b00;
  --police: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --large: 1240px;
  --gouttiere: 24px;
  --coin: 14px;
  --coin-petit: 10px;
  --pilule: 999px;
  --ombre: 0 1px 2px rgba(23, 33, 33, .05), 0 6px 22px rgba(23, 33, 33, .06);
  --ombre-forte: 0 2px 4px rgba(23, 33, 33, .06), 0 18px 44px rgba(23, 33, 33, .12);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--blanc); color: var(--texte);
  font-family: var(--police); font-size: 1.0625rem; line-height: 1.62;
  font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--vert); }
:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
small { font-size: .8em; }
[hidden] { display: none !important; }

h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--encre); font-weight: 700; line-height: 1.14; letter-spacing: -.022em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
h2 { font-size: clamp(1.45rem, 2.2vw, 1.9rem); }
h3 { font-size: 1.12rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
strong { color: var(--encre); font-weight: 650; }

.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.aller-au-contenu { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--encre); color: #fff; border-radius: var(--coin-petit); }
.aller-au-contenu:focus { top: 8px; }
.cadre { width: 100%; max-width: var(--large); margin: 0 auto; padding: 0 var(--gouttiere); }
.muet { color: var(--gris); }
.nc { color: var(--gris); font-size: .86em; font-weight: 400; }

/* Le libellé au-dessus d'un titre : capitales espacées, une pastille verte. */
.surtitre {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 .7rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--vert);
}
.surtitre::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--vert); }
.chapeau { max-width: 64ch; font-size: 1.1rem; color: var(--texte); }
.chapeau p:last-child { margin-bottom: 0; }

.icone { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* La tuile verte pâle qui porte une icône : types, fonctions, outils, sections. */
.tuile { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--vert-pale); color: var(--vert); }
.tuile .icone { width: 24px; height: 24px; }
.tuile-mini { width: 24px; height: 24px; border-radius: 7px; }
.tuile-mini .icone { width: 14px; height: 14px; stroke-width: 2; }
.tuile-petite { width: 36px; height: 36px; border-radius: 10px; }
.tuile-petite .icone { width: 19px; height: 19px; }
.tuile-grande { width: 58px; height: 58px; border-radius: 16px; }
.tuile-grande .icone { width: 30px; height: 30px; stroke-width: 1.6; }

/* --------------------------------------------------------------------------
   Boutons : pilules, capitales, l'encre qui passe au vert (et l'inverse)
   -------------------------------------------------------------------------- */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 46px; padding: .8em 1.5em; border: 0; border-radius: var(--pilule);
  background: var(--vert); color: #fff;
  font-size: .86rem; font-weight: 550; letter-spacing: .04em; line-height: 1.2; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: background-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.bouton:hover { background: var(--encre); color: #fff; }
.bouton:active { transform: translateY(1px); }
.bouton .icone { width: 1.15em; height: 1.15em; stroke-width: 2; }
.bouton-amazon { background: var(--encre); }
.bouton-amazon:hover { background: var(--vert); }
.bouton-contour { background: var(--blanc); color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--encre); }
.bouton-contour:hover { background: var(--encre); color: #fff; box-shadow: none; }
.bouton-plein { width: 100%; }
.bouton-petit { min-height: 38px; padding: .55em 1.1em; font-size: .76rem; }

.bouton-texte { padding: .4em 0; background: none; border: 0; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; color: var(--encre); }
.bouton-icone { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; background: none; border: 0; border-radius: 50%; color: var(--encre); }
.bouton-icone:hover { background: var(--fond); }
.bouton-icone .icone { width: 22px; height: 22px; }
.boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: .45em; font-weight: 600; text-decoration: none; color: var(--vert);
}
.lien-fleche .icone { width: 1em; height: 1em; stroke-width: 2; transition: transform .15s; }
.lien-fleche:hover { color: var(--vert-fonce); }
.lien-fleche:hover .icone { transform: translateX(3px); }

.bouton-comparer {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--pilule);
  background: var(--blanc); border: 1px solid var(--trait-2); color: var(--encre);
  font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  transition: border-color .15s, background-color .15s;
}
.bouton-comparer:hover { border-color: var(--vert); color: var(--vert); }
.bouton-comparer .icone { width: 15px; height: 15px; }
.bouton-comparer[aria-pressed="true"] { background: var(--vert); border-color: var(--vert); color: #fff; }
.bouton-comparer[aria-pressed="true"] span::after { content: " ✓"; }
.bouton.bouton-comparer { min-height: 46px; padding: .8em 1.5em; font-size: .86rem; box-shadow: inset 0 0 0 1.5px var(--encre); border: 0; }

/* --------------------------------------------------------------------------
   En-tête : bandeau, logo et recherche, puis les menus
   -------------------------------------------------------------------------- */

.bandeau { margin: 0; background: var(--encre); text-align: center; }
.bandeau a { display: block; padding: 7px 16px; color: #fff; font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.bandeau a:hover { color: var(--vert-clair); }

.entete { position: sticky; top: 0; z-index: 48; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--trait); }
.entete-haut { display: flex; align-items: center; gap: 26px; max-width: var(--large); margin: 0 auto; padding: 14px var(--gouttiere) 8px; }
.logo { display: block; flex: none; }
.logo-image { width: auto; height: 40px; }
.faux-champ {
  flex: 1; display: flex; align-items: center; gap: 12px; max-width: 520px; height: 46px; padding: 0 18px;
  background: var(--fond); border: 1px solid transparent; border-radius: 12px; color: var(--gris); font-size: .95rem; text-align: left; cursor: text;
  transition: border-color .15s, background-color .15s;
}
.faux-champ:hover { border-color: var(--trait-2); background: var(--blanc); }
.faux-champ .icone { color: var(--encre); }
.bouton-outil { flex: none; margin-left: auto; }
.entete-actions { display: flex; align-items: center; gap: 6px; }
.bouton-loupe, .bouton-menu { display: none; }
.pastille-comparaison {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: var(--pilule);
  background: var(--encre); color: #fff; font-variant-numeric: tabular-nums; font-size: .85rem; font-weight: 600; text-decoration: none;
}
.pastille-comparaison:hover { background: var(--vert); color: #fff; }

.nav-principale { max-width: var(--large); margin: 0 auto; padding: 0 calc(var(--gouttiere) - 12px); }
.nav-principale > ul { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-principale > ul > li > a, .nav-principale summary {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px 12px; list-style: none; cursor: pointer; color: var(--encre);
  font-size: .8rem; font-weight: 550; letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
}
.nav-principale summary::-webkit-details-marker { display: none; }
.nav-principale summary::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: rotate(45deg);
}
.nav-principale details[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.nav-principale > ul > li > a:hover, .nav-principale summary:hover, .nav-principale details[open] summary { color: var(--vert); }
.nav-principale a[aria-current="page"] { color: var(--vert); box-shadow: inset 0 -2px 0 var(--vert); }
.a-panneau { position: relative; }
.panneau {
  position: absolute; top: calc(100% + 2px); left: 0; z-index: 50; min-width: 300px; padding: 18px;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--coin); box-shadow: var(--ombre-forte);
}
.panneau ul { margin: 0; padding: 0; list-style: none; }
.panneau-large { width: 640px; }
.panneau-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.panneau-grille-1 { grid-template-columns: 1fr; }
.panneau-grille a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--coin-petit); text-decoration: none; color: var(--encre); }
.panneau-grille a:hover { background: var(--vert-pale); color: var(--encre); }
.panneau-grille strong { display: block; font-size: .92rem; font-weight: 600; line-height: 1.25; }
.panneau-grille small { display: block; font-size: .76rem; color: var(--gris); }
.panneau-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.panneau-colonnes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.panneau-colonnes-3 ~ * { }
.panneau-large:has(.panneau-colonnes-3) { width: 820px; }
.panneau-titre { margin: 0 0 6px !important; padding: 0 10px; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.panneau-pied { margin: 12px 0 0 !important; padding: 12px 10px 0; border-top: 1px solid var(--trait); }
.panneau-outils { width: 380px; }

/* Les logos des marques : toujours dans une case blanche, à hauteur égale. */
.grille-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.grille-logos a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; height: 100%; min-height: 88px; padding: 14px 10px 10px;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--coin); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.grille-logos a:hover { border-color: var(--vert-clair); box-shadow: var(--ombre); transform: translateY(-1px); }
.logo-marque { display: block; max-width: 100%; height: auto; object-fit: contain; }
.logo-marque-texte {
  display: inline-grid; max-width: 100%; overflow: hidden; text-overflow: ellipsis; place-items: center; height: var(--h); padding: 0 .3em;
  color: var(--encre); font-size: calc(var(--h) * .62); font-weight: 750; letter-spacing: -.01em; line-height: 1; white-space: nowrap;
}
.logo-legende { font-size: .76rem; font-weight: 550; line-height: 1.2; text-align: center; color: var(--encre); }
.logo-legende small { margin-left: 2px; font-variant-numeric: tabular-nums; font-size: .9em; color: var(--gris); }
.panneau .grille-logos-menu { grid-template-columns: repeat(5, minmax(0, 1fr)); width: 720px; gap: 6px; }
.panneau .grille-logos-menu a, .tiroir .grille-logos a { min-height: 72px; padding: 10px 8px 8px; }
.grille-logos-tiroir { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 14px; }
.grille-logos-page { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-bottom: 40px; }
.grille-logos-page a { min-height: 104px; }
.grille-logos-accueil { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.grille-logos-voisins { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.grille-logos-voisins a { min-height: 60px; padding: 10px; }
.tuile-logo { display: inline-grid; place-items: center; flex: none; min-width: 58px; height: 58px; padding: 0 12px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; box-shadow: var(--ombre); }
.tuile-logo .logo-marque { max-height: 34px; max-width: 150px; }
.fiche-marque { display: block; width: fit-content; margin: 0 0 14px; }
.fiche-marque .logo-marque { max-height: 30px; }
.marque-ligne { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.marque-ligne-logo { display: flex; justify-content: flex-start; width: 92px; flex: none; }
.marque-ligne-logo .logo-marque { max-height: 20px; }

/* Tiroir du menu au téléphone. */
.tiroir { position: fixed; inset: 0; z-index: 60; background: rgba(23, 33, 33, .45); }
.tiroir-dedans { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 88vw); padding: 14px 22px 40px; overflow-y: auto; background: var(--blanc); border-radius: 18px 0 0 18px; }
.tiroir-fermer { margin-left: auto; }
.tiroir ul { margin: 0; padding: 0; list-style: none; }
.tiroir-principal { margin: 8px 0 18px !important; }
.tiroir-principal a { display: block; padding: 12px 0; border-bottom: 1px solid var(--trait); color: var(--encre); font-size: 1.15rem; font-weight: 650; text-decoration: none; }
.tiroir details { border-bottom: 1px solid var(--trait); }
.tiroir summary { padding: 14px 0; color: var(--encre); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.tiroir details li a { display: block; padding: 7px 0; text-decoration: none; }
.tiroir details ul { padding-bottom: 14px; }

/* Fil d'Ariane. */
.fil { padding: 18px 0 6px; font-size: .84rem; color: var(--gris); }
.fil ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.fil li { display: inline-flex; align-items: center; }
.fil li + li::before { content: ""; width: 5px; height: 5px; margin: 0 10px; border-right: 1.5px solid var(--trait-2); border-top: 1.5px solid var(--trait-2); transform: rotate(45deg); }
.fil a { text-decoration: none; }
.fil a:hover { text-decoration: underline; }
.fil [aria-current] { color: var(--encre); }

/* --------------------------------------------------------------------------
   Accueil : la promesse et la mosaïque du site d'avant
   -------------------------------------------------------------------------- */

.accueil-tete { overflow: hidden; background: var(--fond); }
.accueil-tete-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 56px; }
.accueil-tete h1 { margin-bottom: .45em; font-size: clamp(2.3rem, 4.4vw, 3.6rem); line-height: 1.04; letter-spacing: -.035em; }
.accueil-promesse { max-width: 50ch; margin-bottom: 1.6em; font-size: 1.12rem; }
.accueil-faits { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 30px 0 0; padding: 0; list-style: none; font-size: .92rem; color: var(--gris); }
.accueil-faits li { display: inline-flex; align-items: center; gap: 8px; }
.accueil-faits .icone { color: var(--vert); }
.accueil-faits strong { font-variant-numeric: tabular-nums; }

.mosaique { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-right: -60px; transform: rotate(-4deg); }
.mosaique-case {
  display: block; padding: 14px; background: var(--blanc); border-radius: 16px; box-shadow: var(--ombre);
  transition: transform .2s, box-shadow .2s;
}
.mosaique-case:nth-child(3n+2) { transform: translateY(26px); }
.mosaique-case:hover { box-shadow: var(--ombre-forte); }
.mosaique-case img { width: 100%; aspect-ratio: 1; object-fit: contain; }

.accueil-types { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: -30px; position: relative; z-index: 2; }
.type-carte {
  display: flex; flex-direction: column; gap: 8px; padding: 18px 16px; background: var(--blanc); border: 1px solid var(--trait);
  border-radius: var(--coin); box-shadow: var(--ombre); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.type-carte:hover { border-color: var(--vert-clair); transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.type-carte strong { font-size: .95rem; line-height: 1.2; }
.type-carte span { font-size: .84rem; line-height: 1.45; color: var(--texte); }
.type-carte small { margin-top: auto; padding-top: 6px; font-size: .76rem; font-weight: 600; color: var(--vert); }

.accueil-section { padding: 64px 0 0; }
.accueil-section:last-of-type { padding-bottom: 20px; }
.accueil-outil { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; margin-top: 64px; padding: 36px; background: var(--vert-pale); border-radius: 22px; }
.accueil-outil .bloc-tete { display: block; margin: 0; }
.accueil-outil .bloc-tete-texte { margin-top: 12px; }

.bloc-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; margin-bottom: 26px; }
.bloc-tete h2 { max-width: 22ch; margin: 0; }
.bloc-tete-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.bloc-tete-texte p { max-width: 56ch; margin: 0; }

.grille-choix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.choix-carte {
  display: flex; flex-direction: column; gap: 6px; padding: 18px; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--coin);
  text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.choix-carte:hover { border-color: var(--vert-clair); box-shadow: var(--ombre); color: inherit; }
.choix-besoin { align-self: flex-start; padding: 4px 10px; border-radius: var(--pilule); background: var(--vert-pale); color: var(--vert-fonce); font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.choix-carte .choix-photo { padding: 8px; background: none; }
.choix-carte .choix-photo img { width: 100%; height: 190px; object-fit: contain; }
.choix-carte strong { font-size: 1.05rem; }
.choix-carte .choix-raison { margin: 0; font-size: .86rem; color: var(--gris); }
.choix-carte .choix-prix { margin-top: auto; font-size: 1.15rem; font-weight: 700; color: var(--encre); }

.liste-pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.liste-pastilles a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--trait); border-radius: var(--pilule);
  background: var(--blanc); color: var(--encre); font-size: .92rem; font-weight: 550; text-decoration: none; transition: background-color .15s, border-color .15s;
}
.liste-pastilles a:hover { background: var(--vert-pale); border-color: var(--vert-clair); color: var(--encre); }
.liste-pastilles small { font-variant-numeric: tabular-nums; font-size: .76rem; color: var(--gris); }
.liste-pastilles .icone { width: 17px; height: 17px; color: var(--vert); }
.liste-pastilles-grandes a { padding: 11px 18px; font-size: .96rem; }

.grille-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.grille-guides a, .guide-carte {
  display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 0 0 18px; overflow: hidden; background: var(--blanc);
  border: 1px solid var(--trait); border-radius: var(--coin); text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.grille-guides a:hover, .guide-carte:hover { border-color: var(--vert-clair); box-shadow: var(--ombre); color: inherit; }
.guide-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--fond); }
.guide-photo-vide { display: grid; place-items: center; color: var(--vert); }
.guide-photo-vide .icone { width: 46px; height: 46px; stroke-width: 1.3; }
.grille-guides a > :not(img), .guide-carte > :not(img):not(.guide-photo) { margin-left: 18px; margin-right: 18px; }
.guide-carte strong, .guide-titre { margin-top: 6px; color: var(--encre); font-size: 1.06rem; font-weight: 700; letter-spacing: -.012em; line-height: 1.25; }
.guide-carte span, .guide-extrait { font-size: .9rem; color: var(--texte); }
.guide-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; }
.guide-numero { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.grille-guides .lien-fleche { align-self: flex-start; margin-top: auto; }
.guide-une { grid-column: span 2; }

.grille-outils { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.grille-outils a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 20px; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--coin); text-decoration: none; }
.grille-outils a:hover { border-color: var(--vert-clair); box-shadow: var(--ombre); color: inherit; }
.outil-nom { margin-top: 6px; color: var(--encre); font-weight: 700; line-height: 1.25; }
.outil-dit { font-size: .88rem; color: var(--gris); }

/* --------------------------------------------------------------------------
   Cartes et listes de tondeuses
   -------------------------------------------------------------------------- */

.grille-cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.grille-courte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.carte {
  position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--blanc);
  border: 1px solid var(--trait); border-radius: var(--coin); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.carte:hover { border-color: var(--vert-clair); box-shadow: var(--ombre-forte); transform: translateY(-2px); }
.carte-lien { display: flex; flex: 1; flex-direction: column; text-decoration: none; }
.carte-lien:hover { color: inherit; }
.carte-photo { position: relative; padding: 16px; background: var(--fond); }
.carte-photo img, .photo-absente { width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.photo-absente { display: grid; place-items: center; color: var(--trait-2); }
.photo-absente .icone { width: 40%; height: 40%; stroke-width: 1; }
.carte-corps { flex: 1; padding: 14px 16px 6px; }
.carte-marque { min-height: 20px; margin: 0 0 4px; }
.carte-marque .logo-marque { max-height: 18px; max-width: 96px; }
.carte-marque .logo-marque-texte { height: 18px; padding: 0; font-size: .82rem; }
.carte-nom { margin: 0 0 10px; color: var(--encre); font-size: 1.04rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.carte-lien:hover .carte-nom { color: var(--vert); }
.etiquettes { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 12px; padding: 0; list-style: none; }
.etiquettes li { padding: 2px 8px; border-radius: var(--pilule); background: var(--fond); color: var(--encre); font-size: .72rem; font-weight: 500; white-space: nowrap; }
.etiquettes li:first-child { background: var(--vert-pale); color: var(--vert-fonce); }
.carte-cotes { display: grid; gap: 0; margin: 0; }
.carte-cotes div { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid var(--fond-2); font-size: .84rem; }
.carte-cotes dt { color: var(--gris); }
.carte-cotes dd { margin: 0; color: var(--encre); font-weight: 550; font-variant-numeric: tabular-nums; }
.carte-pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px 14px; }
.carte-prix { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.carte-montant { color: var(--encre); font-size: 1.2rem; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.carte-montant.muet { font-size: .84rem; font-weight: 600; color: var(--gris); }
.carte-prix:has(.carte-reference) { flex-wrap: wrap; row-gap: 0; }
.carte-reference { order: 3; flex-basis: 100%; font-variant-numeric: tabular-nums; font-size: .76rem; line-height: 1.3; color: var(--gris); }

.badge-promo {
  display: inline-block; padding: 3px 9px; border-radius: var(--pilule); background: var(--vert); color: #fff;
  font-variant-numeric: tabular-nums; font-size: .78rem; font-weight: 650; line-height: 1.3; white-space: nowrap;
}
.carte-photo .badge-promo { position: absolute; top: 10px; left: 10px; z-index: 1; }
.prix-promo { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .86rem; }
.prix-promo s { font-variant-numeric: tabular-nums; }

/* La pastille de disponibilité. */
.dispo { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.dispo-peu, .dispo-delai { background: var(--attente); }
.dispo-ko, .dispo-hors { background: var(--trait-2); }

/* --------------------------------------------------------------------------
   Une liste : en-tête, avis, réponses, choix, grille, texte
   -------------------------------------------------------------------------- */

.page-liste, .page-outil, .page-texte { padding-bottom: 72px; }
.tete-liste { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; padding: 14px 0 36px; }
.tete-simple { display: block; }
.tete-titre { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.tete-titre h1 { margin: 0; }
.tete-titre .surtitre { margin-bottom: .45rem; }
.tete-liste-texte .chapeau { font-size: 1.04rem; }

.memo { padding: 20px; background: var(--fond); border-radius: var(--coin); }
.memo-tete { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 14px; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.memo-titre { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; color: var(--encre); font-size: .74rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.memo-titre .icone { color: var(--vert); }
.rangee-chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chiffre { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--blanc); border-radius: var(--coin-petit); }
.chiffre strong { font-size: 1.25rem; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.chiffre span { font-size: .78rem; line-height: 1.3; color: var(--gris); }
.tete-regle p { margin: 0 0 6px; font-size: .9rem; }
.tete-regle-note { font-size: .78rem !important; color: var(--gris); }

.avis-liste { margin: 10px 0 48px; padding: 32px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 22px; box-shadow: var(--ombre); }
.avis-tete h2 { margin-bottom: .4em; }
.avis-verdict { max-width: 72ch; }
.avis-preferees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 22px; padding: 0; list-style: none; }
.avis-preferees-1 { grid-template-columns: minmax(0, 1fr); }
.avis-preferees-2, .avis-preferees-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.avis-preferee { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px; border: 1px solid var(--trait); border-radius: var(--coin); }
.avis-premiere { border-color: var(--vert); box-shadow: inset 0 0 0 1px var(--vert); }
.avis-photo { display: block; padding: 6px; background: var(--fond); border-radius: var(--coin-petit); }
.avis-photo img { width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.avis-pour { margin: 0; color: var(--vert); font-size: .72rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.avis-nom { margin: 2px 0 4px; font-weight: 700; line-height: 1.25; }
.avis-nom a { color: var(--encre); text-decoration: none; }
.avis-nom a:hover { color: var(--vert); }
.avis-pourquoi { margin: 0 0 6px; font-size: .88rem; line-height: 1.5; }
.avis-prix { margin: 0; color: var(--encre); font-weight: 700; }
.avis-prix small { font-weight: 400; color: var(--gris); }
.avis-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.avis-colonnes ul { margin: 0; padding-left: 1.1em; font-size: .94rem; }
.avis-colonnes li { margin-bottom: 6px; }
.avis-eviter li::marker { color: var(--ko); }
.avis-note, .mention-methode { display: flex; gap: 10px; margin: 22px 0 0; font-size: .84rem; color: var(--gris); }
.avis-note .icone, .mention-methode .icone { margin-top: 3px; color: var(--vert); }
.mention-methode { margin: 0 0 22px; }

.reponses-rapides { margin: 0 0 48px; }
.reponses-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.reponse-rapide { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px; background: var(--fond); border-radius: var(--coin); }
.reponse-photo { display: block; padding: 6px; background: var(--blanc); border-radius: var(--coin-petit); }
.reponse-photo img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.reponse-icone { display: grid; place-items: center; aspect-ratio: 1; color: var(--vert); }
.reponse-icone .icone { width: 30px; height: 30px; }
.reponse-rapide h3 { margin: 0 0 4px; font-size: 1rem; }
.reponse-rapide p { margin: 0; font-size: .92rem; }
.reponse-rapide a { color: var(--vert-fonce); }

.selections { margin: 0 0 48px; }
.grille-selections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.selection { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--coin); }
.selection-titre { margin: 0; padding: 12px 16px; background: var(--encre); color: #fff; font-size: .74rem; font-weight: 600; letter-spacing: .06em; line-height: 1.35; text-transform: uppercase; }
.selection-produit { display: block; padding: 14px 16px 0; text-decoration: none; }
.selection-produit img { width: 100%; height: 210px; margin-bottom: 10px; padding: 12px; object-fit: contain; border-radius: var(--coin-petit); background: var(--fond); }
.selection-produit span { display: block; color: var(--encre); font-weight: 700; line-height: 1.25; }
.selection-produit:hover span { color: var(--vert); }
.selection-raison { margin: 6px 16px 12px; font-size: .86rem; line-height: 1.45; }
.selection-regle { margin: auto 16px 0; padding: 10px 0 14px; border-top: 1px solid var(--trait); font-size: .8rem; line-height: 1.45; color: var(--gris); }

.liste-produits { margin: 0 0 48px; }
.barre-liste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 16px; }
.barre-liste h2 { margin: 0; }
.tri { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--gris); }
.tri select, .outil-champ select, .outil-champ input, .outil-mini-champ select {
  padding: 10px 38px 10px 14px; border: 1px solid var(--trait-2); border-radius: var(--coin-petit);
  background: var(--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23172121' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
  color: var(--encre); font-size: .95rem; font-weight: 500; -webkit-appearance: none; appearance: none;
}
.outil-champ input { padding-right: 14px; background-image: none; }
.tri select:focus, .outil-champ select:focus, .outil-champ input:focus, .outil-mini-champ select:focus { outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-pale); }

.texte-liste, .texte-accueil { max-width: 820px; margin: 0 0 48px; }
.voisins { margin: 0 0 40px; padding-top: 28px; border-top: 1px solid var(--trait); }
.voisins-titre { margin: 0 0 12px; color: var(--encre); font-weight: 700; }

.provenance { display: flex; gap: 12px; align-items: flex-start; margin: 24px 0 0; padding: 16px 18px; background: var(--fond); border-radius: var(--coin); font-size: .86rem; }
.provenance .icone { margin-top: 3px; color: var(--vert); }
.provenance p { margin: 0; }

.illustration { margin: 0 0 40px; overflow: hidden; border-radius: 18px; }
.illustration img { width: 100%; max-height: 420px; object-fit: cover; }
.illustration figcaption { padding: 8px 2px 0; font-size: .74rem; color: var(--gris); }
.illustration-article { margin: 22px 0 0; }

/* --------------------------------------------------------------------------
   Questions : des <details> ouvrables sans script
   -------------------------------------------------------------------------- */

.bloc-questions { max-width: 860px; margin: 0 0 48px; }
.question { border-bottom: 1px solid var(--trait); }
.question summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 2px; cursor: pointer; list-style: none;
  color: var(--encre); font-weight: 650; line-height: 1.35;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fond); color: var(--vert); font-size: 1.2rem; font-weight: 500; }
.question[open] summary::after { content: "−"; background: var(--vert); color: #fff; }
.question summary:hover { color: var(--vert); }
.reponse { padding: 0 2px 18px; }
.reponse p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Texte courant : guides, avis, pages
   -------------------------------------------------------------------------- */

.texte { color: var(--texte); }
.texte h2 { margin: 1.8em 0 .6em; }
.texte h3 { margin: 1.6em 0 .5em; }
.texte h2:first-child, .texte h3:first-child { margin-top: 0; }
.texte ul, .texte ol { padding-left: 1.2em; }
.texte li { margin-bottom: .45em; }
.texte li::marker { color: var(--vert); }
.texte a { color: var(--vert-fonce); font-weight: 550; }
.texte a:hover { color: var(--encre); }
.texte table { margin: 1.2em 0 1.6em; font-size: .94rem; }
.texte th, .texte td { padding: 10px 12px; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
.texte thead th { color: var(--encre); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }
.texte blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--vert); }
.a-savoir { margin: 1.6em 0; padding: 18px 20px 18px 54px; background: var(--vert-pale); border-radius: var(--coin); position: relative; }
.a-savoir::before {
  content: ""; position: absolute; left: 18px; top: 20px; width: 22px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b783c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 00-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0012 3z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.a-savoir strong:first-child { display: block; margin-bottom: 4px; color: var(--vert-fonce); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   La fiche d'une tondeuse
   -------------------------------------------------------------------------- */

.fiche-tete { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: start; padding: 10px 0 40px; }
.fiche-galerie { position: sticky; top: 130px; }
.galerie-defilante { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 20px; background: var(--fond); scrollbar-width: none; }
.galerie-defilante::-webkit-scrollbar { display: none; }
.galerie-vue { flex: 0 0 100%; margin: 0; padding: 28px; scroll-snap-align: start; }
.galerie-vue img, .galerie-vue .photo-absente { width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.galerie-pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.galerie-pastilles a { display: block; padding: 4px; border: 1px solid var(--trait); border-radius: var(--coin-petit); background: var(--blanc); }
.galerie-pastilles a:hover { border-color: var(--vert); }
.galerie-pastilles img { width: 56px; height: 56px; object-fit: contain; }
.fiche-infos h1 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.fiche-resume { font-size: 1.08rem; }
.fiche-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 18px 0 12px; }
.fiche-chiffres div { padding: 12px; background: var(--fond); border-radius: var(--coin-petit); }
.fiche-chiffres dt { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: .74rem; color: var(--gris); }
.fiche-chiffres dd { margin: 0; color: var(--encre); font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fiche-energie { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: .92rem; }
.fiche-energie .icone { color: var(--vert); }
.points-attention { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.points-attention li { padding: 4px 10px 4px 26px; border-radius: var(--pilule); background: #fff4e5; color: #7a4300; font-size: .8rem; font-weight: 550; position: relative; }
.points-attention li::before { content: "!"; position: absolute; left: 8px; top: 50%; display: grid; place-items: center; width: 13px; height: 13px; margin-top: -6.5px; border-radius: 50%; background: #e29a3b; color: #fff; font-size: .62rem; font-weight: 800; }
.encart-prix { display: grid; gap: 10px; padding: 20px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; box-shadow: var(--ombre); }
.encart-prix-haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.prix-montant { margin: 0; color: var(--encre); font-size: 1.9rem; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.prix-montant .muet { font-size: 1rem; font-weight: 600; }
.dispo-texte { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .86rem; font-weight: 550; }
.dispo-texte.dispo-ok { color: var(--ok); background: none; }
.dispo-texte.dispo-ko, .dispo-texte.dispo-hors { color: var(--gris); background: none; }
.dispo-texte.dispo-peu, .dispo-texte.dispo-delai { color: var(--attente); background: none; }
.dispo-texte.dispo-ok, .dispo-texte.dispo-ko, .dispo-texte.dispo-hors, .dispo-texte.dispo-peu, .dispo-texte.dispo-delai { width: auto; height: auto; border-radius: 0; }
.prix-note { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .8rem; color: var(--gris); }

.sommaire-fiche { position: sticky; top: 112px; z-index: 30; background: var(--blanc); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.sommaire-fiche .cadre { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sommaire-fiche ul { display: flex; gap: 4px; margin: 0; padding: 0; overflow-x: auto; list-style: none; scrollbar-width: none; }
.sommaire-fiche ul a { display: block; padding: 14px 12px; color: var(--encre); font-size: .84rem; font-weight: 550; text-decoration: none; white-space: nowrap; }
.sommaire-fiche ul a:hover { color: var(--vert); }

.fiche-corps { padding-top: 10px; padding-bottom: 60px; }
.section-fiche { padding: 44px 0 8px; scroll-margin-top: 170px; }
.section-fiche > h2 { max-width: 30ch; }
.dessins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.dessin { margin: 0; padding: 16px 16px 12px; background: var(--fond); border-radius: var(--coin); }
.dessin-titre { margin-bottom: 6px; color: var(--encre); font-size: .76rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.dessin svg { width: 100%; }
.dessin-legende { margin: 6px 0 0; font-size: .78rem; line-height: 1.45; color: var(--gris); }
.dessin .trait, .dessin .trait-fin { stroke: var(--trait-2); stroke-width: 1.2; }
.dessin .trait { stroke: var(--gris); }
.dessin .trait-fort { stroke: var(--vert); stroke-width: 3; stroke-linecap: round; }
.dessin .trait-limite { stroke: var(--ko); stroke-width: 2; stroke-dasharray: 3 2; }
.dessin .trait-repere { stroke: var(--trait-2); stroke-width: 1; stroke-dasharray: 2 2; }
.dessin .fond-jauge { fill: var(--blanc); stroke: var(--trait); }
.dessin .plein { fill: var(--vert-clair); }
.dessin .plein-pale { fill: var(--vert-pale); }
.dessin .plage { fill: var(--vert); }
.dessin .plage-site { fill: var(--trait-2); opacity: .7; }
.dessin .curseur { fill: var(--vert); stroke: var(--blanc); stroke-width: 3; }
.dessin .point { fill: var(--blanc); }
.dessin .herbe-trace { fill: none; stroke: var(--vert-clair); stroke-width: 2; }
.dessin .valeur { fill: var(--encre); font: 700 13px var(--police); }
.dessin .cote { fill: var(--gris); font: 500 10px var(--police); }
.dessin .repere { fill: var(--gris); font: 500 9.5px var(--police); }
.positions { margin: 18px 0; padding-left: 1.1em; }
.positions li { margin-bottom: 4px; }
.positions li::marker { color: var(--vert); }
.reponses-fiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.reponse-fiche { padding: 18px; border: 1px solid var(--trait); border-radius: var(--coin); }
.reponse-fiche h3 { margin: 0 0 6px; font-size: 1rem; }
.reponse-fiche p { margin: 0; font-size: .93rem; }

.avis-grille { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; align-items: start; }
.avis-texte .texte { font-size: 1.04rem; }
.pour-qui { display: grid; gap: 10px; margin: 26px 0; }
.pour-qui p { display: flex; gap: 12px; margin: 0; padding: 14px 16px; border-radius: var(--coin); font-size: .95rem; }
.pour-qui-oui { background: var(--vert-pale); }
.pour-qui-non { background: var(--fond); }
.pour-qui .icone { margin-top: 3px; color: var(--vert); }
.pour-qui-etiquette { display: block; color: var(--encre); font-size: .74rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.pour-contre { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pour-contre > div { padding: 18px; border-radius: var(--coin); }
.pour { background: var(--vert-pale); }
.contre { background: #fbefee; }
.pour-contre h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .98rem; }
.pour .icone { color: var(--vert); }
.contre .icone { color: var(--ko); }
.pour-contre ul { margin: 0; padding-left: 1.1em; font-size: .92rem; }
.pour-contre li { margin-bottom: 5px; }
.avis-grille .memo { position: sticky; top: 170px; }
.memo-produit { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 12px; }
.memo-produit img { width: 64px; height: 64px; padding: 4px; object-fit: contain; border-radius: var(--coin-petit); background: var(--blanc); }
.memo-produit strong { line-height: 1.25; }
.memo-cotes { margin: 0; }
.memo-cotes div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--trait); font-size: .88rem; }
.memo-cotes dt { color: var(--gris); }
.memo-cotes dd { margin: 0; color: var(--encre); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.memo-listes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.memo-listes a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--pilule); background: var(--blanc); font-size: .8rem; font-weight: 550; text-decoration: none; }
.memo-listes .icone { width: 14px; height: 14px; color: var(--vert); }
.memo-prix { display: grid; gap: 10px; margin-top: 16px; }
.memo-prix .prix-montant { font-size: 1.5rem; }

.fiche-technique { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
.fiche-technique table { align-self: start; font-size: .92rem; }
.fiche-technique caption { padding: 0 0 8px; color: var(--encre); font-size: .76rem; font-weight: 650; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.fiche-technique th, .fiche-technique td { padding: 9px 0; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
.fiche-technique th { width: 48%; padding-right: 14px; font-weight: 400; color: var(--gris); }
.fiche-technique td { color: var(--encre); font-weight: 550; font-variant-numeric: tabular-nums; }

.defilement-horizontal { overflow-x: auto; margin-bottom: 18px; border: 1px solid var(--trait); border-radius: var(--coin); }
.tableau-comparatif { min-width: 680px; font-size: .9rem; }
.tableau-comparatif th, .tableau-comparatif td { padding: 11px 14px; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
.tableau-comparatif tbody tr:last-child th, .tableau-comparatif tbody tr:last-child td { border-bottom: 0; }
.tableau-comparatif thead th { vertical-align: bottom; background: var(--fond); }
.tableau-comparatif thead a { display: flex; flex-direction: column; gap: 8px; color: var(--encre); font-weight: 650; text-decoration: none; }
.tableau-comparatif thead img { width: 84px; height: 84px; padding: 4px; object-fit: contain; border-radius: var(--coin-petit); background: var(--blanc); }
.tableau-comparatif tbody th { color: var(--gris); font-weight: 450; white-space: nowrap; }
.tableau-comparatif td { color: var(--encre); font-variant-numeric: tabular-nums; }
.tableau-comparatif .courante { background: var(--vert-pale); }
.tableau-comparatif .meilleur { color: var(--vert-fonce); font-weight: 700; }
.tableau-comparatif .retirer { margin-top: 6px; padding: 0; background: none; border: 0; color: var(--gris); font-size: .74rem; text-decoration: underline; }
.tableau-coup-d-oeil td, .tableau-coup-d-oeil th { white-space: normal; }

.barre-achat {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: var(--blanc); border-top: 1px solid var(--trait); box-shadow: 0 -8px 24px rgba(23, 33, 33, .08);
}
.barre-achat div { display: flex; flex-direction: column; min-width: 0; }
.barre-achat strong { overflow: hidden; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.barre-achat span { font-weight: 700; color: var(--encre); }

/* --------------------------------------------------------------------------
   Outils : questionnaire, comparateur, meilleure tondeuse, prix, promos
   -------------------------------------------------------------------------- */

.tete-outil { padding: 14px 0 26px; }
.tete-outil .chapeau { margin-top: 14px; }
.outil { margin: 0 0 40px; padding: 28px; background: var(--fond); border-radius: 22px; }
.outil-champs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.outil-champ { display: flex; flex-direction: column; gap: 6px; }
.outil-champ > span { color: var(--encre); font-size: .84rem; font-weight: 600; }
.outil-champ select, .outil-champ input { width: 100%; padding-top: 12px; padding-bottom: 12px; }
.outil-aide { margin: 12px 0 0; font-size: .82rem; color: var(--gris); }
.outil-resultat { margin: 0 0 48px; }
.outil-resultat-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; }
.outil-resultat-tete h2 { margin: 0; }
.criteres { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 24px; padding: 0; list-style: none; }
.criteres li { padding: 6px 12px 6px 30px; border-radius: var(--pilule); background: var(--vert-pale); color: var(--encre); font-size: .84rem; position: relative; }
.criteres li::before { content: ""; position: absolute; left: 12px; top: 50%; width: 9px; height: 5px; margin-top: -4px; border-left: 2px solid var(--vert); border-bottom: 2px solid var(--vert); transform: rotate(-45deg); }
.criteres small { color: var(--gris); }
.outil-resultat .grille-selections { margin-bottom: 24px; }
.promo-vide { padding: 22px; background: var(--fond); border-radius: var(--coin); }

.outil-mini { display: grid; gap: 12px; padding: 22px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; box-shadow: var(--ombre); }
.outil-mini-entete { display: flex; justify-content: space-between; margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.outil-mini-entete span:first-child { color: var(--vert); }
.outil-mini-titre { margin: 0; color: var(--encre); font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.outil-mini-champ { display: grid; gap: 4px; }
.outil-mini-champ span { font-size: .8rem; font-weight: 600; color: var(--gris); }
.outil-mini-champ select { width: 100%; padding-top: 11px; padding-bottom: 11px; }

.comparateur-grille { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 32px; align-items: start; }
.filtres { position: sticky; top: 130px; display: grid; gap: 14px; max-height: calc(100vh - 150px); overflow-y: auto; padding: 20px; background: var(--fond); border-radius: 18px; }
.filtres-titre { margin: 0; color: var(--encre); font-weight: 700; }
.filtres-options { margin: 0; padding: 0; border: 0; }
.filtres-options legend { margin-bottom: 6px; color: var(--encre); font-size: .84rem; font-weight: 600; }
.filtres-options label, .filtres-dispo { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: .88rem; cursor: pointer; }
.filtres input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--vert); }
.filtres-marques { columns: 2; column-gap: 10px; }
.filtres-marques legend { column-span: all; }
.lignes-produits { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ligne-produit {
  display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, .8fr)) minmax(0, .8fr) auto; align-items: center; gap: 14px;
  padding: 10px 14px 10px 10px; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--coin);
}
.ligne-produit:hover { border-color: var(--vert-clair); }
.ligne-lien { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; }
.ligne-photo img, .ligne-photo .photo-absente { width: 64px; height: 64px; padding: 4px; object-fit: contain; border-radius: var(--coin-petit); background: var(--fond); }
.ligne-nom { display: flex; flex-direction: column; min-width: 0; }
.ligne-nom small { font-size: .74rem; color: var(--gris); }
.ligne-nom strong { overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.ligne-lien:hover strong { color: var(--vert); }
.ligne-cote { display: flex; flex-direction: column; color: var(--encre); font-size: .9rem; font-weight: 550; font-variant-numeric: tabular-nums; }
.ligne-cote small { font-size: .72rem; font-weight: 400; color: var(--gris); }
.ligne-prix { color: var(--encre); font-weight: 750; font-variant-numeric: tabular-nums; }
.comparaison { margin: 0 0 40px; }

.sommaire-meilleure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 40px; padding: 0; list-style: none; counter-reset: choix; }
.sommaire-meilleure li { counter-increment: choix; }
.sommaire-meilleure a { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; height: 100%; padding: 12px 14px; border: 1px solid var(--trait); border-radius: var(--coin); text-decoration: none; }
.sommaire-meilleure a:hover { border-color: var(--vert-clair); background: var(--vert-pale); color: inherit; }
.sommaire-meilleure a::before { content: counter(choix, decimal-leading-zero); grid-row: 1 / span 2; color: var(--vert); font-size: .84rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sommaire-meilleure strong { font-size: .9rem; line-height: 1.25; }
.sommaire-meilleure span { font-size: .8rem; color: var(--gris); }
.coup-d-oeil { margin: 0 0 30px; }
.choix { padding: 44px 0 36px; border-bottom: 1px solid var(--trait); scroll-margin-top: 140px; }
.choix-tete h2 { margin-bottom: 20px; }
.choix-corps { display: grid; grid-template-columns: 260px minmax(0, 1fr) 250px; gap: 32px; align-items: start; }
.choix-corps .choix-photo { display: block; padding: 18px; background: var(--fond); border-radius: 18px; }
.choix-corps .choix-photo img { width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.choix-nom { margin: 0 0 6px; font-size: 1.4rem; font-weight: 700; }
.choix-nom a { color: var(--encre); text-decoration: none; }
.choix-nom a:hover { color: var(--vert); }
.choix-corps .choix-raison { margin: 0 0 16px; color: var(--texte); }
.choix-cotes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; margin: 0 0 16px; }
.choix-cotes div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--trait); }
.choix-cotes dt { font-size: .86rem; color: var(--gris); }
.choix-cotes dd { margin: 0; color: var(--encre); font-size: .86rem; font-weight: 600; text-align: right; }
.choix-regle { display: flex; gap: 10px; margin: 0; padding: 12px 14px; background: var(--fond); border-radius: var(--coin-petit); font-size: .86rem; }
.choix-regle .icone { margin-top: 3px; color: var(--vert); }
.choix-achat { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--trait); border-radius: 18px; box-shadow: var(--ombre); }
.choix-suivantes { margin-top: 24px; }
.choix-suivantes ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.choix-suivantes a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border: 1px solid var(--trait); border-radius: var(--coin); text-decoration: none; }
.choix-suivantes a:hover { border-color: var(--vert-clair); color: inherit; }
.choix-suivantes img { width: 56px; height: 56px; object-fit: contain; border-radius: var(--coin-petit); background: var(--fond); mix-blend-mode: multiply; }
.choix-suivantes strong { display: block; line-height: 1.2; }
.choix-suivantes small { display: block; font-size: .76rem; color: var(--gris); }
.choix-suivantes em { color: var(--encre); font-style: normal; font-weight: 700; white-space: nowrap; }

.tableau-prix { font-size: .92rem; }
.tableau-prix th, .tableau-prix td { padding: 12px 14px; border-bottom: 1px solid var(--trait); text-align: left; white-space: nowrap; }
.tableau-prix thead th { background: var(--fond); color: var(--encre); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.tableau-prix td { color: var(--encre); font-variant-numeric: tabular-nums; }
.tableau-prix tbody th { font-weight: 600; }
.tableau-prix tbody tr:hover { background: var(--fond); }
.bloc-tranches, .bloc-guides, .bloc-promos { margin: 0 0 44px; }
.regle-promos { margin: 0 0 32px; padding: 18px 20px; background: var(--vert-pale); border-radius: var(--coin); }
.regle-promos .memo-titre { margin-top: 0; }
.regle-promos p:last-child { margin: 0; }
.sommaire-themes ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 36px; padding: 0; list-style: none; }
.sommaire-themes a { display: inline-flex; gap: 8px; padding: 8px 14px; border-radius: var(--pilule); background: var(--fond); color: var(--encre); font-size: .9rem; font-weight: 550; text-decoration: none; }
.sommaire-themes a:hover { background: var(--vert-pale); }
.sommaire-themes small { color: var(--gris); }

/* --------------------------------------------------------------------------
   Guides et pages de texte
   -------------------------------------------------------------------------- */

.article-grille { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0 56px; }
.tete-article { grid-column: 1 / -1; padding: 14px 0 34px; }
.tete-article .chapeau { max-width: 70ch; margin-top: 14px; font-size: 1.14rem; }
.date-article { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: .84rem; color: var(--gris); }
.article-cote { grid-column: 2; grid-row: 2 / span 3; display: grid; gap: 16px; align-content: start; position: sticky; top: 130px; align-self: start; }
.article-grille > .texte { grid-column: 1; max-width: 760px; font-size: 1.06rem; line-height: 1.7; }
.article-grille > .bloc-questions, .article-grille > .guide-modeles { grid-column: 1; margin-top: 30px; }
.sommaire { padding: 18px 20px; background: var(--fond); border-radius: var(--coin); }
.sommaire p { margin: 0 0 8px; color: var(--encre); font-size: .74rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.sommaire ol { margin: 0; padding-left: 1.2em; font-size: .9rem; }
.sommaire li { margin-bottom: 5px; }
.sommaire li::marker { color: var(--vert); font-weight: 600; }
.sommaire a { text-decoration: none; }
.sommaire a:hover { text-decoration: underline; }
.nav-cote { padding: 18px 20px; background: var(--fond); border-radius: var(--coin); }
.nav-cote .memo-titre { margin-top: 0; }
.nav-cote ul { margin: 0; padding: 0; list-style: none; }
.nav-cote a { display: flex; align-items: center; gap: 10px; padding: 7px 0; text-decoration: none; }
.nav-cote a[aria-current] { color: var(--vert); font-weight: 600; }
.nav-cote .icone { color: var(--vert); }
.article-outil { max-width: 820px; margin: 10px 0 40px; }
.page-404 { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; padding-top: 60px; }
.page-404-besoins { margin-top: 36px; }

/* --------------------------------------------------------------------------
   Pied de page, lettre, recherche, tiroir de comparaison
   -------------------------------------------------------------------------- */

.pied { margin-top: 40px; background: var(--fond); }
.lettre { padding: 44px 0 0; }
.lettre-dedans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; max-width: var(--large); margin: 0 auto; padding: 28px 32px; background: var(--encre); border-radius: 22px; color: #dfe5e5; }
.lettre .pied-titre { margin: 0 0 6px; color: #fff; font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; text-transform: none; }
.lettre-texte { margin: 0; font-size: .94rem; }
.lettre-formulaire { display: flex; gap: 8px; }
.lettre-champ { flex: 1; min-width: 0; height: 48px; padding: 0 16px; border: 0; border-radius: var(--pilule); background: #fff; color: var(--encre); }
.lettre-formulaire .bouton { flex: none; }
.lettre-formulaire .bouton:hover { background: #fff; color: var(--encre); }
.lettre-note { margin: 8px 0 0; font-size: .78rem; color: #aab4b4; }
.lettre-piege { position: absolute; left: -9999px; }
.lettre-erreur { color: #ffb4a8; }
.pied-dedans { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.4fr); gap: 48px; max-width: var(--large); margin: 0 auto; padding: 48px var(--gouttiere) 30px; }
.pied-marque .logo-image { height: 40px; }
.pied-promesse { margin: 16px 0 12px; font-size: .92rem; }
.pied-affiliation { font-size: .8rem; color: var(--gris); }
.pied-colonnes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.pied-titre { margin: 0 0 10px; color: var(--encre); font-size: .76rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.pied-colonnes ul { margin: 0; padding: 0; list-style: none; font-size: .88rem; }
.pied-colonnes li { margin-bottom: 6px; }
.pied-colonnes a { text-decoration: none; }
.pied-colonnes a:hover { text-decoration: underline; }
.pied-marques { columns: 2; column-gap: 12px; }
.pied-bas { max-width: var(--large); margin: 0 auto; padding: 18px var(--gouttiere) 26px; border-top: 1px solid var(--trait); font-size: .8rem; color: var(--gris); }
.pied-bas p { margin: 0; }

.recherche { width: min(720px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 80px)); margin: 70px auto auto; padding: 0; border: 0; border-radius: 20px; box-shadow: var(--ombre-forte); }
.recherche::backdrop { background: rgba(23, 33, 33, .45); }
.recherche-champ { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 20px; border-bottom: 1px solid var(--trait); }
.recherche-champ input { flex: 1; height: 46px; border: 0; font-size: 1.1rem; outline: none; }
.recherche-resultats { max-height: 520px; overflow-y: auto; padding: 8px; }
.recherche-resultats ul { margin: 0; padding: 0; list-style: none; }
.recherche-resultats a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--coin-petit); text-decoration: none; }
.recherche-resultats a:hover, .recherche-resultats a.actif { background: var(--vert-pale); color: inherit; }
.recherche-resultats img { width: 44px; height: 44px; object-fit: contain; }
.r-titre { flex: 1; display: flex; flex-direction: column; color: var(--encre); font-weight: 600; }
.r-sous { font-size: .8rem; font-weight: 400; color: var(--gris); }
.r-prix { color: var(--encre); font-weight: 700; }
.r-type { font-size: .74rem; color: var(--gris); }
.recherche-vide { padding: 16px 12px; color: var(--gris); }

.tiroir-comparaison { position: fixed; left: 50%; bottom: 16px; z-index: 45; width: min(760px, calc(100vw - 32px)); transform: translateX(-50%); }
.tiroir-comparaison-dedans { display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 20px; background: var(--encre); border-radius: var(--pilule); color: #fff; box-shadow: var(--ombre-forte); }
.tiroir-comparaison p { margin: 0; white-space: nowrap; }
.tiroir-comparaison strong { color: #fff; }
.tiroir-comparaison ul { flex: 1; display: flex; gap: 8px; min-width: 0; margin: 0; padding: 0; overflow: hidden; list-style: none; font-size: .82rem; color: #c5cfcf; white-space: nowrap; }
.tiroir-comparaison .bouton-texte { color: #c5cfcf; }

/* --------------------------------------------------------------------------
   L'assistant « quelle tondeuse choisir ? » : de grandes cartes à cocher. Sans script, toutes les questions ;
   avec js/assistant.js (classe .assistant-actif), une question par écran et la barre de progression.
   Puis le résultat : notre choix pour vous, deux autres pistes.
   -------------------------------------------------------------------------- */

.outil-assistant { padding: 28px; }
.assistant { display: grid; gap: 22px; }
.assistant-question { min-width: 0; margin: 0; padding: 0; border: 0; }
.assistant-question legend { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 0; color: var(--encre); font-size: 1.22rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.assistant-question legend:focus { outline: none; }
.assistant-question legend:focus-visible { outline: 2px solid var(--vert); outline-offset: 4px; border-radius: 6px; }
.assistant-numero { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--encre); color: #fff; font-size: .86rem; font-weight: 700; }
.assistant-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.assistant-carte { display: block; cursor: pointer; }
.assistant-carte-corps {
  display: flex; align-items: center; gap: 12px; height: 100%; min-height: 76px; padding: 14px 16px;
  background: var(--blanc); border: 1.5px solid var(--trait); border-radius: var(--coin);
  transition: border-color .15s, box-shadow .15s, background-color .15s, transform .15s;
}
.assistant-carte:hover .assistant-carte-corps { border-color: var(--vert-clair); box-shadow: var(--ombre); }
.assistant-carte input:checked + .assistant-carte-corps { border-color: var(--vert); background: var(--vert-pale); box-shadow: inset 0 0 0 1px var(--vert); }
.assistant-carte input:checked + .assistant-carte-corps .tuile { background: var(--vert); color: #fff; }
.assistant-carte input:focus-visible + .assistant-carte-corps { outline: 2px solid var(--vert); outline-offset: 2px; }
.assistant-carte:active .assistant-carte-corps { transform: scale(.98); }
.assistant-carte .tuile { transition: background-color .15s, color .15s; }
.tuile-forte .icone { transform: scale(1.1) rotate(-8deg); }
.assistant-carte-texte { display: grid; gap: 2px; min-width: 0; }
.assistant-carte-texte strong { font-size: .95rem; font-weight: 650; line-height: 1.25; }
.assistant-carte-texte small { font-size: .78rem; line-height: 1.3; color: var(--gris); }
.assistant-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.assistant-retour { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.icone-retour { transform: rotate(180deg); }
.assistant-tete { display: grid; gap: 8px; }
.assistant-etape { margin: 0; color: var(--vert-fonce); font-size: .78rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.assistant-barre { height: 6px; overflow: hidden; border-radius: var(--pilule); background: var(--trait); }
.assistant-barre span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--vert); transition: width .25s ease; }
.assistant-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.assistant-resume .memo-titre { margin: 0; }
.assistant-resume ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.assistant-resume li { padding: 5px 12px; border-radius: var(--pilule); background: var(--blanc); border: 1px solid var(--trait); color: var(--encre); font-size: .84rem; }
.assistant-actif .assistant-question:not([hidden]) { animation: assistant-entree .22s ease; }
@keyframes assistant-entree { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .assistant-actif .assistant-question:not([hidden]) { animation: none; }
  .assistant-barre span, .assistant-carte-corps { transition: none; }
}

/* L'assistant dans une page : une carte blanche ; sans script, ses deux premières questions seulement. */
.assistant-bloc { margin: 0 0 40px; }
.accueil-outil .assistant-bloc { margin: 0; }
.assistant-mini, .assistant-discret .assistant { padding: 22px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; box-shadow: var(--ombre); }
.assistant-mini { gap: 16px; }
.page-liste .assistant-mini, .article-grille .assistant-mini { background: var(--vert-pale); border-color: var(--vert-clair); box-shadow: none; }
.assistant-mini:not(.assistant-actif) .assistant-suite, .assistant-discret .assistant:not(.assistant-actif) .assistant-suite { display: none; }
.assistant-mini .assistant-question legend, .assistant-discret .assistant-question legend { font-size: 1.08rem; }
.assistant-mini .assistant-cartes, .assistant-discret .assistant-cartes { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); }
.assistant-titre { margin: -6px 0 0; color: var(--encre); font-size: 1.3rem; font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
.assistant-entete { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.assistant-entete span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--vert); }
.article-grille > .assistant-bloc { grid-column: 1; max-width: 760px; margin: 30px 0 0; }
.assistant-discret { margin: 28px 0 48px; }
.assistant-discret summary { display: flex; align-items: center; gap: 14px; max-width: 760px; padding: 14px 18px; cursor: pointer; list-style: none; border: 1px dashed var(--trait-2); border-radius: var(--coin); color: var(--texte); }
.assistant-discret summary::-webkit-details-marker { display: none; }
.assistant-discret summary:hover { border-color: var(--vert); }
.assistant-discret summary > span { display: grid; gap: 2px; font-size: .92rem; }
.assistant-discret[open] summary { margin-bottom: 12px; border-style: solid; }

/* Le résultat : notre choix en grand, avec le bouton vers l'offre ; deux autres pistes à côté. */
#resultat:focus { outline: none; }
.choix-pour-vous { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; margin: 0 0 36px; }
.notre-choix { overflow: hidden; background: var(--blanc); border: 2px solid var(--vert); border-radius: 20px; box-shadow: var(--ombre-forte); }
.notre-choix-titre { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 20px; background: var(--vert); color: #fff; font-size: .8rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.notre-choix-corps { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; padding: 22px; }
.notre-choix-photo img { width: 100%; height: 220px; padding: 12px; object-fit: contain; border-radius: var(--coin); background: var(--fond); }
.notre-choix-texte h3 { margin: 0 0 8px; font-size: 1.4rem; }
.notre-choix-texte h3 a { text-decoration: none; }
.notre-choix-raison { margin: 0 0 12px; font-size: .98rem; line-height: 1.55; }
.notre-choix-prix { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--encre); font-size: 1.7rem; font-weight: 750; letter-spacing: -.02em; }
.bouton-grand { min-height: 56px; padding: 1em 1.9em; font-size: .95rem; }
.choix-alternatives { display: grid; gap: 16px; }
.alternative { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 14px; padding: 16px; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--coin); }
.alternative-titre { grid-column: 1 / -1; margin: 0 0 4px; color: var(--vert-fonce); font-size: .74rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.alternative-produit { display: contents; text-decoration: none; }
.alternative-produit img { grid-row: span 3; width: 96px; height: 96px; padding: 6px; object-fit: contain; border-radius: var(--coin-petit); background: var(--fond); }
.alternative-produit span { color: var(--encre); font-weight: 700; line-height: 1.25; }
.alternative-produit:hover span { color: var(--vert); }
.alternative-raison { margin: 0; font-size: .84rem; line-height: 1.45; }
.alternative-achat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 0; }
.resultat-sous-titre { margin: 0 0 14px; font-size: 1.2rem; }
.criteres-regles { margin: 14px 0 22px; }
.criteres-regles summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--vert-fonce); font-size: .9rem; font-weight: 600; }
.criteres-regles .criteres { margin: 12px 0 0; }

/* L'autonomie des tondeuses à batterie : les surfaces en cartes serrées, le tableau des modèles. */
.assistant-cartes-serrees { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.assistant-cartes-serrees .assistant-carte-corps { min-height: 60px; }
.choix-pour-vous-seul { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.tableau-autonomie { margin: 0 0 24px; font-size: .92rem; }
.tableau-autonomie th, .tableau-autonomie td { padding: 10px 12px; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: middle; }
.tableau-autonomie thead th { background: var(--fond); color: var(--encre); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.tableau-autonomie td { color: var(--encre); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau-autonomie td small { color: var(--gris); }
.tableau-autonomie tbody th { font-weight: 600; min-width: 180px; }
.tableau-autonomie tbody tr:hover { background: var(--fond); }
.autonomie-deux { margin: 8px 0 0; }
.autonomie-deux summary { padding: 12px 0; cursor: pointer; color: var(--encre); font-weight: 650; }
.bloc-autonomie { margin: 0 0 44px; }
.rangee-autonomie { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; }
.rangee-autonomie .chiffre { background: var(--vert-pale); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .grille-cartes, .grille-courte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .accueil-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bouton-outil { display: none; }
  .choix-corps { grid-template-columns: 220px minmax(0, 1fr); }
  .choix-achat { grid-column: 1 / -1; grid-template-columns: auto 1fr 1fr; align-items: center; }
  .ligne-produit { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, .8fr)) minmax(0, .8fr) auto; }
  .ligne-produit .ligne-cote:nth-of-type(3) { display: none; }
  .panneau .grille-logos-menu { width: 560px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  body { font-size: 1rem; }
  .entete { position: relative; }
  .nav-principale, .faux-champ { display: none; }
  .entete-haut { justify-content: space-between; padding: 10px var(--gouttiere); }
  .bouton-loupe, .bouton-menu { display: inline-grid; }
  .logo-image { height: 34px; }
  .accueil-tete-grille, .tete-liste, .fiche-tete, .avis-grille, .article-grille, .comparateur-grille, .page-404, .accueil-outil, .lettre-dedans, .pied-dedans { grid-template-columns: minmax(0, 1fr); }
  .mosaique { margin: 0 -20px; transform: rotate(-3deg); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .mosaique-case { padding: 8px; border-radius: 12px; }
  .mosaique-case:nth-child(n+7) { display: none; }
  .accueil-types { margin-top: 24px; }
  .fiche-galerie, .avis-grille .memo, .article-cote, .filtres { position: static; }
  .filtres { max-height: none; }
  .article-cote { grid-column: 1; grid-row: auto; margin-bottom: 24px; }
  .sommaire-fiche { top: 0; }
  .dessins, .reponses-fiche, .reponses-grille, .grille-selections, .grille-choix, .grille-guides, .avis-preferees, .avis-preferees-2, .avis-preferees-4, .sommaire-meilleure, .grille-outils { grid-template-columns: minmax(0, 1fr); }
  .grille-cartes, .grille-courte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fiche-technique, .pour-contre, .avis-colonnes, .bloc-tete, .outil-champs, .choix-cotes, .choix-suivantes ul { grid-template-columns: minmax(0, 1fr); }
  .fiche-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choix-corps { grid-template-columns: minmax(0, 1fr); }
  .choix-corps .choix-photo { max-width: 260px; }
  .choix-achat { grid-template-columns: minmax(0, 1fr); }
  .guide-une { grid-column: auto; }
  .barre-achat { display: flex; }
  .page-fiche { padding-bottom: 70px; }
  .pied-colonnes { grid-template-columns: 1fr 1fr; }
  .ligne-produit { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .ligne-produit .ligne-cote { display: none; }
  .ligne-produit .bouton-comparer { grid-column: 1 / -1; justify-self: start; }
  .avis-liste { padding: 22px 18px; }
  .outil { padding: 20px; }
  .accueil-outil { padding: 24px 20px; }
  .lettre-dedans { margin: 0 var(--gouttiere); padding: 22px; }
  .lettre-formulaire { flex-direction: column; }
}

@media (max-width: 560px) {
  :root { --gouttiere: 16px; }
  h1 { font-size: 1.85rem; }
  .accueil-tete h1 { font-size: 2.1rem; }
  .accueil-tete-grille { padding-top: 32px; padding-bottom: 32px; gap: 28px; }
  .accueil-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carte-corps { padding: 10px 12px 4px; }
  .carte-pied { flex-direction: column; align-items: flex-start; padding: 8px 12px 12px; }
  .carte-cotes div:nth-child(3) { display: none; }
  .carte-photo { padding: 10px; }
  .carte-nom { font-size: .95rem; }
  .tete-titre { align-items: flex-start; }
  .tuile-grande { width: 48px; height: 48px; }
  .bouton { padding: .8em 1.2em; }
  .pied-colonnes { grid-template-columns: minmax(0, 1fr); }
  .tiroir-comparaison ul { display: none; }
  .reponse-rapide { grid-template-columns: 56px minmax(0, 1fr); }
}

/* L'assistant et son résultat au téléphone : deux cartes par ligne, le choix empilé. */
@media (max-width: 900px) {
  .outil-assistant { padding: 20px; }
  .choix-pour-vous { grid-template-columns: minmax(0, 1fr); }
  .notre-choix-corps { grid-template-columns: minmax(0, 1fr); }
  .notre-choix-photo img { height: 200px; }
}
@media (max-width: 560px) {
  .assistant-cartes, .assistant-mini .assistant-cartes, .assistant-discret .assistant-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .assistant-carte-corps { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .assistant-question legend { font-size: 1.1rem; }
  .assistant-mini, .assistant-discret .assistant { padding: 18px 16px; }
  .outil-assistant { padding: 16px; margin-left: calc(var(--gouttiere) * -1); margin-right: calc(var(--gouttiere) * -1); border-radius: 0; }
  .assistant-pied .bouton { flex: 1; }
  .notre-choix-corps { padding: 18px; gap: 14px; }
  .notre-choix .bouton-grand { width: 100%; }
  .alternative { grid-template-columns: 80px minmax(0, 1fr); }
  .alternative-produit img { width: 80px; height: 80px; }
  .rangee-autonomie { grid-template-columns: minmax(0, 1fr); }
  .assistant-cartes.assistant-cartes-serrees { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}