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

/* ==========================================================================
   Charte (celle du site d'avant, reprise du kit Elementor à la refonte du 16/10/2026, en plus soigné)
   Jaune #FFDD1A, encre #1E1A00, fond crème #FFFCEC, blanc. Sora partout. Le jaune ne se lit pas en texte sur
   blanc : il sert aux aplats (boutons principaux à texte encre, surlignages, puces) ; les liens et les traits
   d'accent prennent un or foncé (--vert, nom gardé du thème d'origine) qui garde un contraste de 5:1.
   Coins arrondis, boutons en pilule, cartes blanches sur fond crème, ombres douces. Le responsive est tout en bas : écrit plus haut, il serait écrasé.
   ========================================================================== */

@font-face {
  font-family: "Sora";
  src: url("fonts/sora-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --jaune: #ffdd1a;
  --jaune-fonce: #f2cc00;
  --vert: #7a6500;
  --vert-fonce: #574800;
  --vert-clair: #ffeb80;
  --vert-pale: #fff7cc;
  --encre: #1e1a00;
  --texte: #3f3a26;
  --gris: #6b6655;
  --fond: #fffcec;
  --fond-2: #f7f1d6;
  --blanc: #ffffff;
  --trait: #ece5c6;
  --trait-2: #ddd4ab;
  --ok: #2f7a3a;
  --ko: #b42318;
  --attente: #9a5b00;
  --police: "Sora", 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(30, 26, 0, .05), 0 6px 22px rgba(30, 26, 0, .06);
  --ombre-forte: 0 2px 4px rgba(30, 26, 0, .06), 0 18px 44px rgba(30, 26, 0, .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(--jaune); box-shadow: 0 0 0 1px 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 ; le jaune à texte encre qui passe à l'encre (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(--jaune); color: var(--encre);
  font-size: .82rem; font-weight: 600; 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); color: #fff; }
.bouton-amazon:hover { background: var(--jaune); color: var(--encre); }
.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(--jaune); border-color: var(--encre); color: var(--encre); }
.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: 24px; }
.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); }
/* La pastille rouge de Bons plans : la plus forte baisse vérifiée du jour, absente quand il n'y en a aucune. */
.pastille-promo {
  display: inline-block; flex: none; padding: 2px 7px; border-radius: var(--pilule); background: var(--ko); color: #fff;
  font-variant-numeric: tabular-nums; font-size: .72rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.nav-principale .pastille-promo { margin-left: -1px; }
.tiroir-principal .pastille-promo { margin-left: 10px; font-size: .78rem; vertical-align: 2px; }
.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(30, 26, 0, .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; }
.illustration img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 18px; }
.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(--jaune); color: var(--encre); }
.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(30, 26, 0, .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); }
.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: 26px; }
.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(30, 26, 0, .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; }

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

/* ------------------------------------------------------------------ Location : villes, enseignes, index */
.location-points, .location-enseigne, .location-voisines { margin: 34px 0 0; }
.location-points .provenance { margin: 0 0 18px; }
.liste-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: point; }
.point { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 16px 58px; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--coin); box-shadow: var(--ombre); counter-increment: point; }
.point::before { content: counter(point); position: absolute; left: 18px; top: 17px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--jaune); color: var(--encre); font-weight: 700; font-size: .84rem; }
.point:first-child { border-color: var(--jaune-fonce); }
.point-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.point-tete strong { color: var(--encre); font-size: 1rem; line-height: 1.35; }
.point-km { flex: none; padding: 2px 10px; border-radius: var(--pilule); background: var(--vert-pale); color: var(--vert-fonce); font-size: .8rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.point-adresse { margin: 0; color: var(--gris); font-size: .88rem; }
.point-offre { margin: 0; font-size: .88rem; }
.point .lien-fleche { margin-top: auto; padding-top: 4px; font-size: .86rem; }
.louer-acheter { margin: 28px 0 0; }
.texte-location { margin-top: 12px; }
.fiche-courte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 0; padding: 6px 22px; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--coin); }
.fiche-courte div { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--trait); }
.fiche-courte div:nth-last-child(-n+2) { border-bottom: 0; }
.fiche-courte dt { color: var(--gris); font-size: .84rem; }
.fiche-courte dd { margin: 0; color: var(--encre); font-size: .9rem; font-weight: 550; }
.grille-enseignes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.enseigne a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--coin-petit); color: var(--encre); text-decoration: none; transition: border-color .15s, transform .15s; }
.enseigne a:hover { border-color: var(--jaune-fonce); transform: translateY(-1px); }
.enseigne span { display: inline-flex; align-items: center; gap: 6px; color: var(--gris); font-size: .8rem; }
.enseigne span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--trait-2); }
.enseigne-oui span::before { background: var(--ok); }
.enseigne-selon-magasin span::before { background: var(--jaune-fonce); }
.enseigne-non span::before { background: var(--ko); }
.enseigne-non a { background: var(--fond); }
.index-villes { columns: 3 240px; column-gap: 22px; }
.index-departement { break-inside: avoid; margin: 0 0 8px; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--coin-petit); }
.index-departement summary { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; cursor: pointer; color: var(--encre); font-weight: 600; font-size: .92rem; list-style: none; }
.index-departement summary::-webkit-details-marker { display: none; }
.index-departement summary::after { content: "+"; margin-left: 10px; color: var(--vert); font-weight: 700; }
.index-departement[open] summary::after { content: "−"; }
.index-departement small { margin-left: auto; color: var(--gris); font-weight: 500; font-variant-numeric: tabular-nums; }
.index-departement ul { margin: 0; padding: 2px 14px 12px; list-style: none; columns: 2; column-gap: 14px; font-size: .88rem; }
.index-departement li { padding: 3px 0; }
.index-departement a { color: var(--texte); }
.index-departement a:hover { color: var(--vert-fonce); }
@media (max-width: 760px) {
  .liste-points, .fiche-courte { grid-template-columns: 1fr; }
  .fiche-courte div:nth-last-child(2) { border-bottom: 1px solid var(--trait); }
  .fiche-courte div { grid-template-columns: 110px 1fr; }
  .point { padding: 16px 16px 14px 52px; }
  .point::before { left: 14px; }
}

/* ------------------------------------------------------------------ Textes de l'ancien site (fiches et listes gardées) */
.barre-liste-titre { margin: 0; color: var(--encre); font-weight: 650; font-size: 1.05rem; }
.texte-ancien { max-width: 860px; }
.texte-liste.texte-ancien { margin-top: 8px; }
.texte-ancien > h2:first-child { margin-top: 0; }
.questions-anciennes { margin: 6px 0 28px; }
.questions-anciennes .question summary h2, .questions-anciennes .question summary h3, .questions-anciennes .question summary h4 { margin: 0; font: inherit; color: inherit; letter-spacing: 0; }
.location-court { display: flex; flex-direction: column; gap: 14px; margin: 14px 0 34px; }

@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: 20px; }
  .accueil-tete-grille, .tete-liste, .fiche-tete, .avis-grille, .article-grille, .comparateur-grille, .page-404, .accueil-outil, .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; }
}

@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); }
}

/* ------------------------------------------------------------------ Assistant de choix : une question par écran (js/assistant.js)
   Sans script, toutes les questions s'affichent en cartes et le formulaire s'envoie d'un coup. */
.assistant-etape { min-width: 0; margin: 0 0 22px; padding: 0; border: 0; }
.assistant-question { display: block; width: 100%; margin: 0 0 12px; padding: 0; color: var(--encre); font-size: 1.12rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.assistant-question span:focus { outline: none; }
.assistant-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.assistant-carte { position: relative; display: block; cursor: pointer; }
.assistant-carte input { position: absolute; top: 12px; left: 12px; width: 1px; height: 1px; margin: 0; opacity: 0; }
.assistant-carte-corps {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; height: 100%; min-height: 108px; padding: 14px;
  background: var(--blanc); border: 1.5px solid var(--trait-2); border-radius: var(--coin);
  transition: border-color .15s, background-color .15s, box-shadow .15s, transform .15s;
}
.assistant-carte-corps > .icone { width: 26px; height: 26px; padding: 7px; box-sizing: content-box; border-radius: 11px; background: var(--vert-pale); color: var(--vert); transition: background-color .15s, color .15s; }
.assistant-carte-texte strong { display: block; font-size: .94rem; font-weight: 650; line-height: 1.3; }
.assistant-carte-texte small { display: block; margin-top: 3px; color: var(--gris); font-size: .76rem; line-height: 1.35; }
.assistant-carte:hover .assistant-carte-corps { border-color: var(--encre); box-shadow: var(--ombre); }
.assistant-carte:active .assistant-carte-corps { transform: scale(.985); }
.assistant-carte input:checked + .assistant-carte-corps { border-color: var(--encre); background: var(--vert-pale); box-shadow: inset 0 0 0 1px var(--encre); }
.assistant-carte input:checked + .assistant-carte-corps > .icone { background: var(--jaune); color: var(--encre); }
.assistant-carte input:checked + .assistant-carte-corps::after {
  content: ""; position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--encre) 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 12px;
}
.assistant-carte input:focus-visible + .assistant-carte-corps { outline: 2px solid var(--vert); outline-offset: 2px; }
.assistant-progres { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.assistant-progres-texte { flex: none; margin: 0; color: var(--vert); font-size: .74rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.assistant-barre { flex: 1; 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(--jaune-fonce); transition: width .25s ease-out; }
.assistant-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.assistant-retour { order: 1; display: inline-flex; gap: .4em; text-decoration: none; }
.assistant-suivant, .assistant-actions [type="submit"].bouton { order: 2; margin-left: auto; }
.assistant-passer { order: 3; flex-basis: 100%; padding: 0; color: var(--gris); font-size: .84rem; font-weight: 500; text-align: right; }
.assistant-actif .assistant-etape { margin-bottom: 18px; }
.assistant-entre { animation: assistant-entre .22s ease-out; }
@keyframes assistant-entre { from { opacity: 0; transform: translateX(16px); } }
.assistant.assistant-replie .assistant-etape, .assistant.assistant-replie .assistant-progres, .assistant.assistant-actif.assistant-replie .assistant-pied { display: none; }
.assistant-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.assistant-resume-titre { margin: 0; color: var(--encre); font-weight: 700; }
.assistant-resume ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.assistant-resume li { padding: 4px 11px; border-radius: var(--pilule); background: var(--blanc); border: 1px solid var(--trait-2); color: var(--encre); font-size: .84rem; }
.assistant-resume .bouton { margin-left: auto; }
.assistant-page .assistant-pied .outil-aide { flex-basis: 100%; }
.assistant-page .assistant-pied { display: flex; flex-wrap: wrap; gap: 10px; }
.assistant-page.assistant-actif .assistant-pied { display: block; }

/* Le mini-assistant, posé dans les pages : une carte blanche. */
.assistant-mini { padding: 22px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; box-shadow: var(--ombre); }
.assistant-tete { margin: 0 0 16px; }
.assistant-entete { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 6px; color: var(--gris); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.assistant-entete span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--vert); }
.assistant-titre { margin: 0; color: var(--encre); font-size: 1.25rem; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }
.assistant-mini .assistant-pied .bouton-plein { margin-top: 2px; }
.assistant-mini.assistant-actif .assistant-pied .bouton-plein { width: auto; margin-top: 0; }
.assistant-note { margin: 12px 0 0; color: var(--gris); font-size: .76rem; }
.bloc-assistant { margin: 0 0 48px; }
.bloc-assistant-colonnes { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; align-items: center; padding: 30px; background: var(--vert-pale); border-radius: 22px; }
.bloc-assistant-colonnes .bloc-tete { display: block; margin: 0; }
.bloc-assistant-colonnes .bloc-tete-texte { margin-top: 10px; }
.article-grille > .bloc-assistant { grid-column: 1; margin-top: 34px; max-width: 760px; }
.lien-assistant { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--vert-pale); border-radius: var(--coin); color: var(--encre); font-weight: 650; line-height: 1.3; text-decoration: none; }
.lien-assistant:hover { background: var(--jaune); color: var(--encre); }
.lien-assistant small { display: block; color: var(--texte); font-weight: 500; }

/* Replié sous une question, sur les fiches. */
.assistant-repli { margin: 0 0 44px; background: var(--fond); border: 1px dashed var(--trait-2); border-radius: var(--coin); }
.assistant-repli summary { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; color: var(--texte); }
.assistant-repli summary::-webkit-details-marker { display: none; }
.assistant-repli summary::after { content: "+"; margin-left: auto; color: var(--vert); font-size: 1.3rem; font-weight: 600; }
.assistant-repli[open] summary::after { content: "−"; }
.assistant-repli summary > .icone { width: 22px; height: 22px; color: var(--vert); }
.assistant-repli summary strong { margin-right: .3em; }
.assistant-repli .assistant-mini { padding-top: 6px; background: transparent; border: 0; box-shadow: none; }
.assistant-repli .assistant-tete { display: none; }

/* Le résultat : notre choix, deux alternatives, puis la grille. */
.notre-choix {
  position: relative; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 12px 32px; align-items: center;
  margin: 0 0 18px; padding: 26px; background: var(--blanc); border: 2px solid var(--encre); border-radius: 22px; box-shadow: var(--ombre-forte);
}
.notre-choix-etiquette { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px; border-radius: var(--pilule); background: var(--jaune); color: var(--encre); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.notre-choix-photo img, .notre-choix-photo .photo-absente { width: 100%; height: 240px; padding: 14px; object-fit: contain; border-radius: var(--coin); background: var(--fond); }
.notre-choix h3 { margin: 0 0 10px; font-size: clamp(1.3rem, 2vw, 1.6rem); }
.notre-choix h3 a { text-decoration: none; }
.notre-choix-raison { margin: 0 0 12px; font-size: 1rem; }
.notre-choix-prix { margin: 0 0 16px; }
.notre-choix-prix strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.bouton-grand { min-height: 56px; padding: 1em 1.9em; font-size: .9rem; }
.alternatives { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 34px; }
.alternative { display: flex; flex-direction: column; overflow: hidden; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--coin); }
.alternative-produit { display: flex; align-items: center; gap: 14px; padding: 14px 16px 0; text-decoration: none; }
.alternative-produit img, .alternative-produit .photo-absente { flex: none; width: 92px; height: 92px; 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-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: auto 16px 0; padding: 12px 0 16px; border-top: 1px solid var(--trait); }
.alternative-pied strong { font-size: 1.1rem; }
.outil-grille-titre { margin: 8px 0 14px; }

@media (max-width: 900px) {
  .bloc-assistant-colonnes { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; gap: 18px; }
}
@media (max-width: 760px) {
  .assistant-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .assistant-carte-corps { min-height: 100px; padding: 12px; gap: 8px; }
  .assistant-mini { padding: 18px 16px; }
  .notre-choix { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .notre-choix-photo img, .notre-choix-photo .photo-absente { height: 200px; }
  .notre-choix .boutons { flex-direction: column; align-items: stretch; }
  .notre-choix .lien-fleche { justify-content: center; }
  .bouton-grand { width: 100%; white-space: normal; }
  .alternatives { grid-template-columns: minmax(0, 1fr); }
  .assistant-resume .bouton { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .assistant-entre { animation: none; }
  .assistant-barre span { transition: none; }
}
.bloc-assistant-titre { margin: 0; color: var(--encre); font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 700; line-height: 1.18; letter-spacing: -.022em; text-wrap: balance; }
.bloc-assistant-colonnes .assistant-titre { display: none; }

/* ------------------------------------------------------------------ Pages location : modèles à acheter, louer ou acheter, autour de moi, départements */
.achat-location, .calcul, .location-villes { margin: 48px 0 0; }
.achat-location .bloc-tete { margin-bottom: 18px; }
.selection-achat .selection-raison { margin-bottom: 10px; }
.selection-achat-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: auto 16px 0; padding: 12px 0; border-top: 1px solid var(--trait); }
.selection-achat-pied strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.selection-achat .selection-regle { margin-top: 0; }
.texte-location { margin-top: 48px; }

.calcul { padding: 30px; background: var(--fond); border-radius: 22px; }
.calcul-tete h2 { margin-bottom: 8px; }
.calcul-intro { max-width: 70ch; margin: 0 0 22px; }
.calcul-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px; align-items: start; }
.calcul-reglages { display: grid; gap: 22px; }
.calcul-quoi { min-width: 0; margin: 0; padding: 0; border: 0; }
.calcul-quoi legend, .calcul-frequence > label { display: block; margin: 0 0 10px; padding: 0; color: var(--encre); font-size: .9rem; font-weight: 650; }
.calcul-pastilles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.calcul-pastilles label { position: relative; cursor: pointer; }
.calcul-pastilles input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.calcul-pastilles span { display: flex; align-items: center; gap: 10px; height: 100%; padding: 12px 14px; background: var(--blanc); border: 1.5px solid var(--trait-2); border-radius: var(--coin-petit); color: var(--encre); font-size: .9rem; font-weight: 550; line-height: 1.25; transition: border-color .15s, background-color .15s; }
.calcul-pastilles .icone { width: 22px; height: 22px; color: var(--vert); }
.calcul-pastilles label:hover span { border-color: var(--encre); }
.calcul-pastilles input:checked + span { border-color: var(--encre); background: var(--vert-pale); box-shadow: inset 0 0 0 1px var(--encre); }
.calcul-pastilles input:focus-visible + span { outline: 2px solid var(--vert); outline-offset: 2px; }
.calcul-curseur { display: flex; align-items: center; gap: 14px; }
.calcul-curseur input { flex: 1; min-width: 0; height: 32px; accent-color: var(--encre); }
.calcul-curseur output { flex: none; display: grid; place-items: center; min-width: 46px; height: 46px; border-radius: 50%; background: var(--jaune); color: var(--encre); font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.calcul-echelle { display: flex; justify-content: space-between; margin: 2px 60px 0 0; color: var(--gris); font-size: .76rem; }
.calcul-verdict { padding: 22px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; box-shadow: var(--ombre); }
.calcul-conclusion { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--encre); font-size: 1.35rem; font-weight: 700; letter-spacing: -.015em; }
.calcul-conclusion::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); }
.calcul-louer::before { background: var(--jaune-fonce); }
.calcul-texte { margin: 0 0 14px; }
.calcul-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.calcul-chiffres div { padding: 10px 12px; background: var(--fond); border-radius: var(--coin-petit); }
.calcul-chiffres dt { color: var(--gris); font-size: .74rem; line-height: 1.3; }
.calcul-chiffres dd { margin: 2px 0 0; color: var(--encre); font-weight: 700; font-variant-numeric: tabular-nums; }
.calcul-modele { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--trait); }
.calcul-modele-nom { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--encre); font-weight: 650; line-height: 1.25; text-decoration: none; }
.calcul-modele-nom img, .calcul-modele-nom .photo-absente { flex: none; width: 64px; height: 64px; padding: 4px; object-fit: contain; border-radius: var(--coin-petit); background: var(--fond); }
.calcul-modele-nom:hover { color: var(--vert); }
.calcul-note { margin: 16px 0 0; color: var(--gris); font-size: .8rem; }

.autour { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; margin: 8px 0 40px; padding: 22px 24px; background: var(--vert-pale); border-radius: 18px; }
.autour-tete { display: flex; align-items: center; gap: 14px; }
.autour-tete .tuile { background: var(--blanc); }
.autour-titre { margin: 0; color: var(--encre); font-size: 1.12rem; font-weight: 700; line-height: 1.3; }
.autour-texte { margin: 2px 0 0; color: var(--texte); font-size: .86rem; }
.autour .bouton[aria-busy="true"] { opacity: .7; cursor: progress; }
.autour-resultat { grid-column: 1 / -1; }
.autour-resultat:empty { display: none; }
.autour-message { margin: 0; font-size: .92rem; }
.liste-points-autour { margin-top: 4px; }
.autour-ville { margin: 14px 0 0; font-size: .95rem; }
.autour-ville a { color: var(--vert-fonce); font-weight: 650; }

.liste-points-compacte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.liste-points-compacte .point { padding: 14px 16px 12px 50px; box-shadow: none; }
.liste-points-compacte .point::before { left: 14px; top: 13px; width: 24px; height: 24px; font-size: .76rem; }
.liste-points-compacte .point-tete strong { font-size: .94rem; }
.points-suite { margin-top: 12px; }
.points-suite summary { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--pilule); background: var(--blanc); box-shadow: inset 0 0 0 1.5px var(--encre); color: var(--encre); font-size: .86rem; font-weight: 600; cursor: pointer; list-style: none; }
.points-suite summary::-webkit-details-marker { display: none; }
.points-suite[open] summary { margin-bottom: 12px; }

.carte-departement { margin: 0 0 18px; padding: 16px; background: var(--fond); border-radius: 18px; }
.carte-departement svg { width: 100%; max-height: 480px; }
.carte-departement circle { stroke: var(--blanc); stroke-width: 1.5; }
.carte-departement .carte-loxam { fill: var(--encre); }
.carte-departement .carte-kiloutou { fill: var(--vert); }
.carte-departement .carte-comptoir { fill: var(--jaune-fonce); stroke: var(--encre); stroke-width: 1; }
.carte-ville rect { fill: var(--blanc); stroke: var(--ko); stroke-width: 2; }
.carte-ville text { fill: var(--encre); font-size: 13px; font-weight: 600; paint-order: stroke; stroke: var(--fond); stroke-width: 4px; stroke-linejoin: round; }
.carte-echelle path { stroke: var(--gris); stroke-width: 2; fill: none; }
.carte-echelle text { fill: var(--gris); font-size: 11px; }
.carte-departement figcaption { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; color: var(--gris); font-size: .78rem; }
.carte-legende { display: inline-flex; align-items: center; gap: 7px; }
.carte-legende::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--encre); }
.carte-legende.carte-kiloutou::before { background: var(--vert); }
.carte-legende.carte-comptoir::before { background: var(--jaune-fonce); box-shadow: 0 0 0 1px var(--encre); }
.carte-legende.carte-ville::before { border-radius: 2px; background: var(--blanc); box-shadow: 0 0 0 2px var(--ko); }
.tableau-villes { font-size: .9rem; }
.tableau-villes th, .tableau-villes td { padding: 10px 14px; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
.tableau-villes thead th { color: var(--gris); font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.tableau-villes tbody th a { color: var(--vert-fonce); font-weight: 650; }
.tableau-villes tbody th small { display: block; color: var(--gris); font-weight: 400; }
.tableau-villes .nombre { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau-villes tbody tr:last-child th, .tableau-villes tbody tr:last-child td { border-bottom: 0; }
.lien-departement { margin: 14px 0 0; }

.grille-departements { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.grille-departements a { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 10px; align-items: center; height: 100%; padding: 10px 12px; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--coin-petit); color: var(--encre); text-decoration: none; transition: border-color .15s, transform .15s; }
.grille-departements a:hover { border-color: var(--jaune-fonce); transform: translateY(-1px); }
.departement-code { grid-row: 1 / span 2; display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 4px; border-radius: 10px; background: var(--vert-pale); color: var(--vert-fonce); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.grille-departements strong { font-size: .9rem; line-height: 1.25; }
.grille-departements small { color: var(--gris); font-size: .76rem; }
.index-departement-lien { margin: 0; padding: 0 14px 4px; font-size: .86rem; }
.index-departement-lien a { color: var(--vert-fonce); font-weight: 650; }

@media (max-width: 900px) {
  .calcul-grille { grid-template-columns: minmax(0, 1fr); }
  .liste-points-compacte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .calcul { padding: 20px 16px; margin-left: calc(-1 * var(--gouttiere) + 6px); margin-right: calc(-1 * var(--gouttiere) + 6px); }
  .calcul-verdict { padding: 18px 16px; }
  .calcul-chiffres { grid-template-columns: minmax(0, 1fr); }
  .calcul-chiffres div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .calcul-modele { flex-direction: column; align-items: stretch; }
  .calcul-modele .bouton { width: 100%; }
  .autour { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; }
  .autour .bouton { width: 100%; white-space: normal; }
  .liste-points-compacte { grid-template-columns: minmax(0, 1fr); }
  .tableau-villes th, .tableau-villes td { padding: 8px 10px; }
}
.selection-achat .selection-raison { flex: 1 0 auto; }
.criteres-titre { margin: 8px 0 0; color: var(--encre); font-size: .9rem; font-weight: 650; }
.outil-resultat-tete { margin-bottom: 18px; }
@media (max-width: 760px) { .notre-choix-photo img, .notre-choix-photo .photo-absente { height: 170px; } }

/* ------------------------------------------------------------------ Schémas des guides : <figure class="schema"> (dessins SVG), et photo d'en-tête */
.texte figure { margin: 2em 0; }
.texte .schema { margin: 2em auto; padding: 18px; max-width: 100%; background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; text-align: center; }
.texte .schema img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; }
.texte .schema figcaption { max-width: 60ch; margin: 12px auto 0; color: var(--gris); font-size: .84rem; line-height: 1.5; }
.illustration figcaption a { color: inherit; }
@media (max-width: 560px) {
  .texte .schema { padding: 12px 10px; border-radius: var(--coin); }
}
.tableau-villes { min-width: 640px; }
.tableau-villes tbody th { min-width: 130px; }
@media (max-width: 760px) {
  .carte-departement { padding: 10px; margin-left: calc(-1 * var(--gouttiere) + 6px); margin-right: calc(-1 * var(--gouttiere) + 6px); }
  .carte-ville text { font-size: 22px; stroke-width: 6px; }
  .carte-echelle text { font-size: 18px; }
}
@media (max-width: 760px) {
  .bloc-assistant-colonnes .bloc-tete-texte { display: none; }
  .bloc-assistant-colonnes { padding: 18px 12px; gap: 12px; }
  .assistant-carte-corps { min-height: 88px; }
}
#alternatives > .bouton { max-width: 100%; white-space: normal; text-align: center; }
/* Les tableaux des textes défilent au téléphone plutôt que d'élargir la page. */
@media (max-width: 760px) { .texte table { display: block; max-width: 100%; overflow-x: auto; } }

/* ==========================================================================
   La lettre (inc/lettre.php, js/lettre.js, appelée dans footer.php)
   Section autonome, reprise telle quelle d'un site à l'autre : seules les variables de .lettre changent avec la charte.
   Une pilule blanche qui contient le champ (sans bordure, fond transparent) et le bouton ; l'anneau de focus est sur la
   pilule entière. Sous 420 px, le champ et le bouton passent sur deux lignes, chacun sa pilule.
   ========================================================================== */

.lettre {
  --lettre-fond: var(--encre);
  --lettre-texte: #e9e4cc;
  --lettre-titre: #fff;
  --lettre-discret: #b5ae92;
  --lettre-champ-fond: #fff;
  --lettre-champ-texte: var(--encre);
  --lettre-indice: var(--gris);
  --lettre-bouton: var(--jaune);
  --lettre-bouton-texte: var(--encre);
  --lettre-bouton-survol: #fff;
  --lettre-bouton-survol-texte: var(--encre);
  --lettre-anneau: var(--jaune);
  --lettre-ok: #b9e4bd;
  --lettre-erreur: #ffb4a8;
  padding: 44px var(--gouttiere) 0;
}
.lettre-dedans {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px 40px; align-items: center;
  max-width: calc(var(--large) - 2 * var(--gouttiere)); margin: 0 auto; padding: 30px 34px;
  background: var(--lettre-fond); border-radius: 22px; color: var(--lettre-texte);
}
.lettre .pied-titre { margin: 0 0 6px; color: var(--lettre-titre); font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; text-transform: none; }
.lettre-texte { margin: 0; font-size: .95rem; line-height: 1.5; }
.lettre-formulaire { position: relative; min-width: 0; margin: 0; }
.lettre-label { display: block; margin: 0 0 8px; color: var(--lettre-titre); font-size: .84rem; font-weight: 600; }
.lettre-champ {
  display: flex; align-items: center; gap: 6px; padding: 5px;
  background: var(--lettre-champ-fond); border-radius: var(--pilule); transition: box-shadow .15s;
}
.lettre-champ:focus-within { box-shadow: 0 0 0 3px var(--lettre-anneau); }
.lettre-champ:has(input[aria-invalid="true"]) { box-shadow: 0 0 0 3px var(--lettre-erreur); }
.lettre-champ input {
  flex: 1 1 auto; min-width: 0; height: 46px; margin: 0; padding: 0 8px 0 16px;
  border: 0; border-radius: var(--pilule); background: transparent; box-shadow: none;
  color: var(--lettre-champ-texte); font-size: 1rem; -webkit-appearance: none; appearance: none;
}
.lettre-champ input::placeholder { color: var(--lettre-indice); opacity: 1; }
.lettre-champ input:focus { outline: none; } /* l'anneau est porté par la pilule (:focus-within) */
.lettre-bouton { flex: none; min-height: 46px; padding: .8em 1.4em; background: var(--lettre-bouton); color: var(--lettre-bouton-texte); }
.lettre-bouton:hover { background: var(--lettre-bouton-survol); color: var(--lettre-bouton-survol-texte, #fff); box-shadow: none; }
.lettre-bouton:focus-visible { outline: 2px solid var(--lettre-bouton-survol); outline-offset: 2px; }
.lettre-bouton:disabled { cursor: progress; opacity: .8; }
.est-en-cours .lettre-bouton::after {
  content: ""; width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: lettre-tourne .7s linear infinite;
}
@keyframes lettre-tourne { to { transform: rotate(360deg); } }
.lettre-message { margin: 12px 0 0; font-size: .95rem; font-weight: 600; line-height: 1.4; }
.lettre-message:empty { margin: 0; }
.lettre-message.lettre-ok { color: var(--lettre-ok); }
.lettre-message.lettre-erreur { color: var(--lettre-erreur); }
.lettre-message.lettre-attente { color: var(--lettre-texte); font-weight: 400; }
.lettre-note { margin: 10px 0 0; color: var(--lettre-discret); font-size: .78rem; line-height: 1.45; }
.lettre-note a { color: inherit; text-decoration: underline; }
.lettre-piege { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (max-width: 900px) {
  .lettre-dedans { grid-template-columns: minmax(0, 1fr); padding: 24px 22px; }
}
@media (max-width: 420px) {
  .lettre-champ { flex-direction: column; align-items: stretch; gap: 10px; padding: 0; background: transparent; }
  .lettre-champ:focus-within, .lettre-champ:has(input[aria-invalid="true"]) { box-shadow: none; }
  .lettre-champ input { height: 50px; padding: 0 18px; background: var(--lettre-champ-fond); }
  .lettre-champ input:focus { box-shadow: 0 0 0 3px var(--lettre-anneau); }
  .lettre-champ input[aria-invalid="true"] { box-shadow: 0 0 0 3px var(--lettre-erreur); }
  .lettre-bouton { width: 100%; min-height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .est-en-cours .lettre-bouton::after { animation: none; }
}

/* --------------------------------------------------------------------------
   Faire cliquer (CRO du 19/10/2026) : la remise vérifiée sur le bouton, un bouton sur chaque carte, la barre d'achat
   du téléphone avec la photo et la date du prix, la flèche qui avance au survol, et un seul petit appel quand la barre
   apparaît (jamais en boucle).
   -------------------------------------------------------------------------- */
.bouton-remise { display: inline-block; margin-left: .1em; padding: 1px 7px; border-radius: 999px; background: #fff; color: var(--encre); font-size: .9em; letter-spacing: 0; }
.bouton-amazon .icone { transition: transform .15s; }
.bouton-amazon:hover .icone { transform: translateX(3px); }
.carte-achat { padding: 0 16px 14px; }
.carte-achat .bouton { width: 100%; min-height: 40px; }
.barre-achat > div { flex: 1; min-width: 0; line-height: 1.25; }
.barre-achat { padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
.barre-achat span s { margin-left: 4px; color: var(--gris); font-size: .78rem; font-weight: 500; }
.barre-achat small { display: block; color: var(--ok); font-size: .7rem; font-weight: 550; }
.barre-achat-photo { flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 8px; background: var(--fond); }
.barre-achat-photo img, .barre-achat-photo .photo-absente { display: block; width: 100%; height: 100%; padding: 3px; object-fit: contain; }
.barre-achat .bouton { flex: none; animation: bouton-appel .6s ease 1.2s 1 both; }
@keyframes bouton-appel { 0%, 100% { transform: none; } 40% { transform: scale(1.06); } 70% { transform: scale(.98); } }
@media (prefers-reduced-motion: reduce) { .barre-achat .bouton { animation: none; } }