/* ==========================================================================
   quel-canape.fr : thème « canape »
   Une seule signature : la cote d'architecte (les dimensions dessinées comme
   sur un plan). Tout le reste reste calme.
   ========================================================================== */

@font-face {
  font-family: "Familjen Grotesk";
  src: url("../fonts/familjen-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Palette moutarde et gris : gris clair chaud, anthracite, charbon, moutarde. */
  --platre: #efeeea;
  --platre-2: #e4e2dc;
  --blanc: #fafaf8;
  --anthracite: #25272b;
  --feutre: #676a6f;
  --trait: #d7d5cf;
  --bleu: #8c680c;
  --bleu-2: #6b4f07;
  --bleu-voile: #f2e7c9;
  --foret: #2d2f34;
  --moutarde: #d6a62b;
  --moutarde-voile: #f5ecd3;
  --vert-ok: #5b7a55;
  --rouge-non: #9b3b32;

  --sans: "Familjen Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;

  /* Échelle 1.25 sur une base de 18 px pour la lecture. */
  --t-xs: 0.8rem;
  --t-sm: 0.9rem;
  --t-md: 1rem;
  --t-lg: 1.25rem;
  --t-xl: 1.563rem;
  --t-2xl: 1.953rem;
  --t-3xl: 2.441rem;
  --t-4xl: clamp(2.2rem, 1.4rem + 3.4vw, 3.815rem);

  --gutter: clamp(16px, 4vw, 40px);
  --col: 72rem;
  --lecture: 40rem;
  --r-img: 10px;
  --r-ctl: 999px;
  --ombre: 0 1px 0 rgba(35, 38, 43, 0.06), 0 12px 32px -18px rgba(35, 38, 43, 0.28);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--platre);
  color: var(--anthracite);
  font: 400 1.125rem/1.7 var(--serif);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--bleu); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--bleu-2); }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--bleu); color: var(--blanc); }

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: var(--t-4xl); letter-spacing: -0.028em; font-weight: 650; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }
p { margin: 0 0 1.1em; text-wrap: pretty; }
strong { font-weight: 650; }
.num { font-family: var(--sans); font-variant-numeric: tabular-nums lining-nums; }

.enveloppe { width: min(100% - 2 * var(--gutter), var(--col)); margin-inline: auto; }
.lecture { max-width: var(--lecture); }
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: -1px;
}
.lien-evitement { position: absolute; left: -9999px; }
.lien-evitement:focus { left: var(--gutter); top: 8px; z-index: 50; background: var(--blanc); padding: 8px 14px; }

/* --- La cote d'architecte ------------------------------------------------ */
/* <span class="cote"><span class="cote__val num">214 cm</span></span>
   Traits fins, extrémités marquées, valeur au centre sur fond découpé. */
.cote {
  --cote-fond: var(--platre);
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: 100%;
  min-height: 1.2em;
  color: var(--bleu);
  font: 500 var(--t-xs)/1 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.cote::before, .cote::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
}
.cote { border-inline: 1px solid currentColor; padding-block: 0.35em; }
.cote__val { flex: none; white-space: nowrap; }
.cote--verticale {
  flex-direction: column;
  width: auto;
  height: 100%;
  border-inline: 0;
  border-block: 1px solid currentColor;
  padding-inline: 0.35em;
}
.cote--verticale::before, .cote--verticale::after { width: 1px; height: auto; }
.cote--verticale .cote__val { writing-mode: vertical-rl; transform: rotate(180deg); }

/* --- En-tête -------------------------------------------------------------- */
.entete {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--platre) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--trait);
}
.entete__barre { display: flex; align-items: center; gap: 1.5rem; min-height: 64px; }
.marque-site {
  display: inline-flex; flex-direction: column; gap: 3px;
  color: var(--anthracite); text-decoration: none;
  font: 700 1.35rem/1 var(--sans); letter-spacing: -0.03em;
}
.marque-site .cote { font-size: 0.55rem; padding-block: 0.15em; }
.nav-principale { margin-left: auto; }
.nav-principale__liste { list-style: none; display: flex; align-items: center; gap: 0.1rem; margin: 0; padding: 0; }
.nav-lien, .nav-groupe__bouton {
  display: block; padding: 0.6rem 0.75rem; border-radius: var(--r-ctl); border: 0; background: none; cursor: pointer;
  color: var(--anthracite); text-decoration: none; font: 500 var(--t-sm)/1 var(--sans); white-space: nowrap;
}
.nav-lien:hover, .nav-groupe__bouton:hover, .nav-groupe.est-ouvert > .nav-groupe__bouton, .nav-lien[aria-current] { background: var(--platre-2); color: var(--anthracite); }
.nav-lien--phare { background: var(--moutarde); color: var(--anthracite); }
.nav-lien--phare:hover { background: var(--anthracite); color: var(--blanc); }
.nav-groupe { position: relative; }
.nav-groupe__bouton::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 0.45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.nav-groupe__liste {
  list-style: none; margin: 0; padding: 0.5rem; position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px;
  background: var(--blanc); border-radius: 14px; box-shadow: var(--ombre); border: 1px solid var(--trait);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.nav-groupe:has(:focus-visible) > .nav-groupe__liste, .nav-groupe.est-ouvert > .nav-groupe__liste { opacity: 1; visibility: visible; transform: none; }
.nav-groupe::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
.nav-groupe__liste a { display: block; padding: 0.6rem 0.8rem; border-radius: 8px; color: var(--anthracite); text-decoration: none; font: 400 var(--t-sm)/1.2 var(--sans); }
.nav-groupe__liste a:hover, .nav-groupe__liste a[aria-current] { background: var(--bleu-voile); color: var(--bleu-2); }
.nav-annexe .nav-lien { color: var(--bleu); }
.entete .bouton-menu { display: none; margin-left: auto; }

@media (max-width: 1100px) {
  .entete .bouton-menu { display: inline-flex; }
  .nav-principale { display: none; position: absolute; inset: 64px 0 auto 0; background: var(--platre); border-bottom: 1px solid var(--trait); padding: 0.5rem var(--gutter) 1.2rem; max-height: calc(100vh - 64px); overflow: auto; }
  .nav-principale.est-ouvert { display: block; }
  .nav-principale__liste { flex-direction: column; align-items: stretch; }
  .nav-lien, .nav-groupe__bouton { width: 100%; text-align: left; padding: 0.95rem 0.3rem; border-radius: 0; border-bottom: 1px solid var(--trait); font-size: var(--t-md); }
  .nav-lien--phare { background: none; color: var(--anthracite); font-weight: 650; }
  .nav-groupe__liste { position: static; opacity: 1; visibility: visible; transform: none; display: none; box-shadow: none; border: 0; background: transparent; padding: 0.2rem 0 0.6rem 0.8rem; }
  .nav-groupe.est-ouvert > .nav-groupe__liste { display: block; }
  .nav-groupe:hover > .nav-groupe__liste { display: none; }
  .nav-groupe.est-ouvert:hover > .nav-groupe__liste { display: block; }
}

/* --- Boutons -------------------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 46px; padding: 0 1.3rem; border-radius: var(--r-ctl);
  border: 1px solid transparent; cursor: pointer;
  font: 600 var(--t-sm)/1 var(--sans); letter-spacing: 0.005em; text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bouton--marchand { background: var(--anthracite); color: var(--blanc); }
.bouton--marchand:hover { background: var(--moutarde); color: var(--anthracite); }
.bouton--discret { background: transparent; color: var(--anthracite); border-color: var(--trait); }
.bouton--discret:hover { border-color: var(--anthracite); color: var(--anthracite); }
.bouton--large { width: 100%; }

/* --- Fil d'Ariane --------------------------------------------------------- */
.ariane { font: 400 var(--t-xs)/1.4 var(--sans); color: var(--feutre); margin: 1.4rem 0 1.2rem; }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.ariane li:not(:last-child)::after { content: "/"; margin-left: 0.4rem; color: var(--trait); }
.ariane a { color: var(--feutre); text-decoration: none; }
.ariane a:hover { color: var(--anthracite); text-decoration: underline; }

/* --- Carte produit -------------------------------------------------------- */
.grille-produits {
  display: grid; gap: 2.4rem 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.carte { display: flex; flex-direction: column; gap: 0.7rem; position: relative; }
.carte[hidden] { display: none; }
.carte__photo {
  aspect-ratio: 4 / 3; background: #ececec; border-radius: var(--r-img);
  overflow: hidden; display: grid; place-items: center;
}
.carte__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.1, 1); }
.carte:hover .carte__photo img { transform: scale(1.03); }
.carte__cote { margin-top: -0.15rem; }
.carte__titre { font: 600 var(--t-md)/1.25 var(--sans); margin: 0.2rem 0 0; letter-spacing: -0.01em; }
.carte__titre a { color: var(--anthracite); text-decoration: none; }
.carte__titre a::after { content: ""; position: absolute; inset: 0; }
.carte__variante { font: 400 var(--t-sm)/1.35 var(--sans); color: var(--feutre); margin: 0; }
.carte__pied { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: auto; }
.carte__prix { font: 600 var(--t-lg)/1 var(--sans); font-variant-numeric: tabular-nums; }
.carte__note { font: 500 var(--t-sm)/1 var(--sans); color: var(--feutre); }
.carte__note b { color: var(--anthracite); font-weight: 650; }
.carte__marchand { position: relative; z-index: 1; }
.repere-choix {
  position: absolute; top: 0.7rem; left: 0.7rem; z-index: 1;
  background: var(--moutarde); color: var(--anthracite);
  font: 600 var(--t-xs)/1 var(--sans); padding: 0.4rem 0.65rem; border-radius: var(--r-ctl);
}

/* --- Notes ---------------------------------------------------------------- */
.note-globale { display: flex; align-items: baseline; gap: 0.3rem; font-family: var(--sans); }
.note-globale__chiffre { font-size: var(--t-3xl); font-weight: 650; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.note-globale__sur { color: var(--feutre); font-size: var(--t-md); }
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.notes li { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; font: 500 var(--t-sm)/1.2 var(--sans); }
.notes__barre { grid-column: 1 / -1; height: 3px; background: var(--trait); border-radius: 3px; overflow: hidden; }
.notes__barre span { display: block; height: 100%; background: var(--bleu); }

/* --- Tableaux de caractéristiques ----------------------------------------- */
.fiche-technique { width: 100%; border-collapse: collapse; font: 400 var(--t-sm)/1.45 var(--sans); }
.fiche-technique th, .fiche-technique td { text-align: left; padding: 0.7rem 0; border-bottom: 1px solid var(--trait); vertical-align: top; }
.fiche-technique th { font-weight: 500; color: var(--feutre); width: 45%; padding-right: 1rem; }

/* --- Pour / contre --------------------------------------------------------- */
.pour-contre { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1.5rem; }
.pour-contre h3 { font-size: var(--t-lg); }
.pour-contre ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; font: 400 var(--t-md)/1.45 var(--sans); }
.pour-contre li { padding-left: 1.4rem; position: relative; }
.pour-contre li::before { position: absolute; left: 0; font-weight: 700; }
.pour-contre .pour li::before { content: "+"; color: var(--vert-ok); }
.pour-contre .contre li::before { content: "\2212"; color: var(--rouge-non); }

/* --- Sections de texte ----------------------------------------------------- */
.texte-long { font-size: 1.125rem; }
.texte-long h2 { margin-top: 2.2em; }
.texte-long h3 { margin-top: 1.8em; font-size: var(--t-lg); }
.texte-long ul, .texte-long ol { padding-left: 1.2em; }
.texte-long li { margin-bottom: 0.4em; }
.texte-long img { border-radius: var(--r-img); margin: 1.6em 0; }
.texte-long table { width: 100%; border-collapse: collapse; font: 400 var(--t-sm)/1.45 var(--sans); margin: 1.6em 0; }
.texte-long th, .texte-long td { border-bottom: 1px solid var(--trait); padding: 0.6rem 0.5rem 0.6rem 0; text-align: left; }
.bloc { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.bloc + .bloc { border-top: 1px solid var(--trait); }
.bloc__titre { max-width: 34ch; }
.chapeau { font-size: var(--t-lg); line-height: 1.6; color: var(--anthracite); max-width: 42rem; }

/* --- FAQ --------------------------------------------------------------------- */
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.1rem 2rem 1.1rem 0; position: relative;
  font: 600 var(--t-md)/1.35 var(--sans);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0.2rem; top: 1rem; font-weight: 400; font-size: 1.4rem; color: var(--bleu); }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 0 1.2rem; font-size: 1.05rem; }

/* --- Pied de page -------------------------------------------------------------- */
.pied { background: var(--foret); color: #cfd1d4; margin-top: 4rem; padding: 3.5rem 0 2rem; font: 400 var(--t-sm)/1.6 var(--sans); }
.pied a { color: #eef0f2; text-decoration: none; }
.pied a:hover { text-decoration: underline; }
.pied__grille { display: grid; gap: 2rem; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; }
.pied__logo { font: 700 1.5rem/1 var(--sans); color: #fff; letter-spacing: -0.03em; margin: 0 0 0.7rem; }
.pied__marque p { max-width: 26rem; }
.pied__reseaux { list-style: none; display: flex; gap: 1rem; margin: 1.2rem 0 0; padding: 0; }
.pied__reseaux a { color: var(--moutarde); font-weight: 600; }
.pied__mentions p { margin: 0 0 0.4rem; }
@media (max-width: 1000px) { .pied__grille { grid-template-columns: 1fr 1fr 1fr; } .pied__marque { grid-column: 1 / -1; } }
.pied h2 { font-size: var(--t-md); color: #fff; margin-bottom: 0.8rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.pied__mentions { border-top: 1px solid #45474d; margin-top: 2.5rem; padding-top: 1.2rem; color: #9ea2a8; font-size: var(--t-xs); }
.pied .cote { color: var(--moutarde); }
@media (max-width: 700px) { .pied__grille { grid-template-columns: 1fr 1fr; } .pied__grille > :first-child { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   MAGAZINE
   ========================================================================== */

/* --- La une (accueil) ---------------------------------------------------- */
.une { padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2.5rem, 6vw, 5rem); overflow: clip; }
.une__grille { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.une__texte { padding-bottom: 1rem; }
.une__titre { font-size: clamp(2.5rem, 1rem + 4.6vw, 5.4rem); line-height: 0.94; letter-spacing: -0.045em; font-weight: 650; margin-bottom: 0.4em; }
.une__titre > span { display: block; white-space: nowrap; }
.une__titre em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
.une__chapeau { font-size: var(--t-lg); max-width: 30rem; color: var(--anthracite); }
.une__visuel { position: relative; }
.une__visuel figure { position: relative; margin: 0; aspect-ratio: 5 / 4; border-radius: 18px; overflow: hidden; background: #ececec; }
.une__visuel figure .cote { position: absolute; left: 12%; right: 12%; bottom: 9%; width: auto; --cote-fond: var(--blanc); font-size: var(--t-sm); }
.une__visuel figure .cote .cote__val { background: #ececec; padding: 0 0.4em; }
.une__visuel img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.js .une__visuel img { transform: scale(1.06); transition: transform 1.8s cubic-bezier(0.2, 0.7, 0.1, 1); }
.js.est-charge .une__visuel img { transform: scale(1); }

.une__legende { font: 400 var(--t-xs)/1.4 var(--sans); color: var(--feutre); margin-top: 0.5rem; }
@media (max-width: 860px) { .une__grille { grid-template-columns: minmax(0, 1fr); } .vitrine__scene { aspect-ratio: 16 / 11; } }

/* --- Recherche par largeur (« Quelle place avez-vous ? ») ----------------- */
.place {
  margin-top: 1.6rem; padding: 1.2rem 1.3rem 1.3rem; background: var(--blanc);
  border-radius: 16px; box-shadow: var(--ombre); max-width: 30rem;
}
.place label { display: block; font: 600 var(--t-sm)/1.3 var(--sans); margin-bottom: 0.9rem; }
.place__mesure { display: flex; align-items: baseline; gap: 0.4rem; font: 650 var(--t-2xl)/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--bleu); }
.place__mesure small { font-size: var(--t-sm); color: var(--feutre); font-weight: 500; }
.place input[type="range"] { width: 100%; accent-color: var(--bleu); margin: 0.8rem 0 0.4rem; }
.place__resultat { font: 500 var(--t-sm)/1.4 var(--sans); color: var(--feutre); margin: 0.2rem 0 0.9rem; }

/* --- Rubriques (titres de section façon magazine) ------------------------- */
.rubrique { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); border-bottom: 2px solid var(--anthracite); padding-bottom: 0.8rem; }
.rubrique h2 { margin: 0; font-size: clamp(1.7rem, 1.1rem + 2vw, 2.6rem); letter-spacing: -0.03em; }
.rubrique a { font: 500 var(--t-sm)/1.3 var(--sans); white-space: nowrap; }
@media (max-width: 700px) { .rubrique { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .rubrique a { white-space: normal; } }

/* --- Formes (silhouettes cotées) ------------------------------------------ */
.formes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 1rem; }
.forme {
  display: flex; flex-direction: column; gap: 0.9rem; padding: 1.4rem 1.2rem 1.2rem;
  background: var(--blanc); border-radius: 14px; text-decoration: none; color: var(--anthracite);
  border: 1px solid transparent; transition: border-color 0.2s ease, transform 0.2s ease;
}
.forme:hover { border-color: var(--bleu); color: var(--anthracite); transform: translateY(-2px); }
.forme svg { width: 100%; height: 70px; color: var(--anthracite); }
.forme__nom { font: 600 var(--t-md)/1.2 var(--sans); }
.forme__nb { font: 400 var(--t-xs)/1 var(--sans); color: var(--feutre); }

/* --- Sujet à la une / articles -------------------------------------------- */
.sujets { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.4rem 1.6rem; }
.sujet { grid-column: span 4; display: flex; flex-direction: column; gap: 0.7rem; position: relative; }
.sujet--grand { grid-column: span 8; grid-row: span 2; }
.sujet__photo { border-radius: var(--r-img); overflow: hidden; aspect-ratio: 3 / 2; background: var(--platre-2); }
.sujet--grand .sujet__photo { aspect-ratio: 16 / 10; }
.sujet__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.1, 1); }
.sujet:hover .sujet__photo img { transform: scale(1.035); }
.sujet__rubrique { font: 600 var(--t-xs)/1 var(--sans); color: var(--bleu); }
.sujet__titre { font: 600 var(--t-lg)/1.2 var(--sans); letter-spacing: -0.015em; margin: 0; }
.sujet--grand .sujet__titre { font-size: clamp(1.6rem, 1rem + 1.8vw, 2.4rem); line-height: 1.08; }
.sujet__titre a { color: var(--anthracite); text-decoration: none; }
.sujet__titre a::after { content: ""; position: absolute; inset: 0; }
.sujet__extrait { font-size: 1rem; color: var(--feutre); margin: 0; }
@media (max-width: 900px) { .sujet, .sujet--grand { grid-column: 1 / -1; grid-row: auto; } }

/* --- Défilement horizontal (tests récents) --------------------------------- */
.defile { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 22%); gap: 1.6rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: thin; }
.defile > * { scroll-snap-align: start; }
@media (max-width: 700px) { .defile { grid-auto-columns: 78%; } }

/* --- Citation mise en exergue, lettrine ----------------------------------- */
.exergue { margin: 2.2em 0; padding: 0 0 0 1.4rem; border-left: 3px solid var(--bleu); font: italic 400 var(--t-xl)/1.4 var(--serif); color: var(--anthracite); }
.texte-long--lettrine:not(.fiche__lecture) > p:first-of-type::first-letter {
  float: left; font: 650 4.4em/0.8 var(--sans); letter-spacing: -0.04em;
  margin: 0.08em 0.12em 0 0; color: var(--anthracite);
}

/* --- Barre de lecture ------------------------------------------------------ */
.progression { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 40; pointer-events: none; }
.progression span { display: block; height: 100%; width: 100%; background: var(--bleu); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* ==========================================================================
   EFFETS (tous neutralisés par prefers-reduced-motion plus haut)
   ========================================================================== */

/* Les cotes se tracent depuis le centre quand elles entrent à l'écran. */
.js .cote.a-tracer::before, .js .cote.a-tracer::after { transform: scaleX(0); transition: transform 0.9s cubic-bezier(0.6, 0, 0.2, 1); }
.js .cote.a-tracer::before { transform-origin: 100% 50%; }
.js .cote.a-tracer::after { transform-origin: 0 50%; }
.js .cote.a-tracer .cote__val { opacity: 0; transition: opacity 0.4s ease 0.5s; }
.js .cote.a-tracer.est-visible::before, .js .cote.a-tracer.est-visible::after { transform: scaleX(1); }
.js .cote.a-tracer.est-visible .cote__val { opacity: 1; }

/* Les grandes photos se dévoilent (rideau) une seule fois. */
.js .devoile { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(0.7, 0, 0.2, 1); }
.js .devoile.est-visible { clip-path: inset(0 0 0 0); }

/* La une : un seul moment orchestré au chargement. */
.js .une__titre > span { display: block; overflow: hidden; }
.js .une__titre > span > span { display: block; transform: translateY(105%); transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.1, 1); }
.js .une__titre > span:nth-child(2) > span { transition-delay: 0.08s; }
.js .une__titre > span:nth-child(3) > span { transition-delay: 0.16s; }
.js.est-charge .une__titre > span > span { transform: none; }

/* ==========================================================================
   FICHE TEST
   ========================================================================== */
.fiche__tete { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; padding-bottom: 2rem; }
@media (max-width: 900px) { .fiche__tete { grid-template-columns: minmax(0, 1fr); } }
.galerie__principale { margin: 0; aspect-ratio: 4 / 3; background: #ececec; border-radius: var(--r-img); overflow: hidden; display: grid; place-items: center; }
.galerie__principale img { width: 100%; height: 100%; object-fit: cover; }
.galerie__vignettes { display: flex; gap: 0.6rem; margin-top: 0.8rem; overflow-x: auto; padding-bottom: 0.3rem; }
.galerie__vignette { flex: none; width: 84px; aspect-ratio: 4 / 3; padding: 0; border: 1px solid var(--trait); border-radius: 8px; background: var(--blanc); cursor: pointer; overflow: hidden; }
.galerie__vignette img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.galerie__vignette.est-actif { border-color: var(--bleu); box-shadow: 0 0 0 1px var(--bleu); }
.galerie__note { font: 400 var(--t-xs)/1.45 var(--sans); color: var(--feutre); margin: 0.7rem 0 0; }
.coloris { display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem; margin-top: 1rem; }
.coloris__titre { font: 500 var(--t-sm)/1 var(--sans); }
.coloris ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.coloris__pastille { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.7rem 0.3rem 0.35rem; border: 1px solid var(--trait); border-radius: var(--r-ctl); background: var(--blanc); font: 400 var(--t-xs)/1 var(--sans); cursor: pointer; }
.coloris__pastille::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.coloris__pastille[data-src]:hover { border-color: var(--anthracite); }

.achat { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 1rem; }
.achat__surtitre { font: 600 var(--t-xs)/1 var(--sans); color: var(--bleu); margin: 0; }
.achat__titre { font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.6rem); line-height: 1.06; letter-spacing: -0.03em; margin: 0; }
.achat__variante { font: 400 var(--t-md)/1.4 var(--sans); color: var(--feutre); margin: -0.4rem 0 0; }
.achat__marque { font: 400 var(--t-sm)/1 var(--sans); color: var(--feutre); margin: 0; }
.achat__marque span { color: var(--anthracite); font-weight: 600; }
.achat__chiffres { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-block: 1px solid var(--trait); }
.achat__prix { font: 650 var(--t-2xl)/1 var(--sans); text-align: right; }
.achat__prix small { display: block; font: 400 var(--t-xs)/1.4 var(--sans); color: var(--feutre); margin-top: 0.3rem; }
.achat__formats { font: 500 var(--t-sm)/1.3 var(--sans); }
.achat__service { display: grid; gap: 0.35rem; margin: 0; font: 400 var(--t-sm)/1.4 var(--sans); }
.achat__service div { display: flex; gap: 0.5rem; }
.achat__service dt { color: var(--feutre); min-width: 5.5rem; }
.achat__service dd { margin: 0; }
.achat__notice { font: 400 var(--t-xs)/1.5 var(--sans); color: var(--feutre); margin: 0; }

.avis-express { margin: clamp(1rem, 3vw, 2.5rem) 0 clamp(2rem, 5vw, 3.5rem); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 1.5rem; padding-top: 1.6rem; border-top: 2px solid var(--anthracite); }
.avis-express h3 { font-size: var(--t-md); margin: 0.35rem 0 0; }
.avis-express__texte { font: 400 clamp(1.3rem, 1rem + 1vw, 1.75rem)/1.45 var(--serif); letter-spacing: -0.005em; }
.avis-express__texte p:last-child { margin-bottom: 0; }
@media (max-width: 760px) { .avis-express { grid-template-columns: minmax(0, 1fr); } }

.mesures { background: var(--blanc); }
.mesures__grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); }
@media (max-width: 900px) { .mesures__grille { grid-template-columns: minmax(0, 1fr); } }
.elev { width: 100%; margin: 0.5rem 0 1.8rem; }
.elev__trait { fill: var(--platre); stroke: var(--anthracite); stroke-width: 1.4; stroke-linejoin: round; }
.elev__cote { stroke: var(--bleu); stroke-width: 1; fill: none; }
.elev__cote text { fill: var(--bleu); stroke: none; font: 500 9px var(--sans); text-anchor: middle; font-variant-numeric: tabular-nums; }
.mesures__infos h2, .mesures__dessin h2 { font-size: var(--t-xl); }
.mesures__infos > * + h2 { margin-top: 2rem; }
.barometre, .profil { margin-top: 2rem; }
.barometre h4, .profil h4 { font-size: var(--t-md); margin-bottom: 0.7rem; }
.barometre__jauge { position: relative; height: 34px; border-radius: 6px; background: linear-gradient(90deg, var(--bleu) calc(var(--v) * 1%), var(--platre-2) 0); }
.barometre__jauge span { position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%); font: 600 var(--t-sm)/1 var(--sans); color: var(--anthracite); }
.profil ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.profil li { padding: 0.5rem 0.9rem; border-radius: var(--r-ctl); background: var(--bleu-voile); color: var(--bleu-2); font: 500 var(--t-sm)/1 var(--sans); }

.medias { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 2rem; align-items: start; }
.video-cadre { aspect-ratio: 16 / 9; border-radius: var(--r-img); overflow: hidden; background: var(--anthracite); }
.video-cadre iframe { width: 100%; height: 100%; border: 0; }
.medias__titre { font: 600 var(--t-md)/1.3 var(--sans); }
.medias audio { width: 100%; }

.rubrique-simple { font-size: var(--t-xl); margin-bottom: 1.4rem; }
.formats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 1.6rem; }
.format { display: flex; flex-direction: column; gap: 0.6rem; }
.format img { aspect-ratio: 4 / 3; object-fit: contain; background: var(--blanc); border-radius: var(--r-img); padding: 5%; mix-blend-mode: multiply; }
.format__nom { font-size: var(--t-md); margin: 0; }
.format__prix { font: 600 var(--t-lg)/1 var(--sans); margin: 0; }
.format__champs { margin: 0; font: 400 var(--t-xs)/1.5 var(--sans); color: var(--feutre); }
.format__champs div { display: flex; gap: 0.4rem; }
.format__champs dd { margin: 0; color: var(--anthracite); }

.lecture-longue__grille { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.lecture-longue__grille .texte-long { max-width: var(--lecture); }
@media (max-width: 1000px) { .lecture-longue__grille { grid-template-columns: minmax(0, 1fr); } .rappel { display: none; } }
.rappel { position: sticky; top: 90px; }
.rappel__carte { display: grid; gap: 0.6rem; padding: 1rem; background: var(--blanc); border-radius: 14px; box-shadow: var(--ombre); }
.rappel__carte img { aspect-ratio: 4 / 3; object-fit: contain; mix-blend-mode: multiply; }
.rappel__nom { font: 600 var(--t-sm)/1.3 var(--sans); margin: 0; }
.rappel__ligne { display: flex; justify-content: space-between; align-items: baseline; font: 650 var(--t-lg)/1 var(--sans); margin: 0; }
.verdict { margin-top: 3rem; padding: 1.8rem 1.8rem 0.6rem; background: var(--blanc); border-radius: 14px; border-top: 3px solid var(--bleu); }
.verdict h2 { margin-top: 0; }

.bulles { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.bulles a { display: inline-block; padding: 0.6rem 1rem; border: 1px solid var(--trait); border-radius: var(--r-ctl); color: var(--anthracite); text-decoration: none; font: 500 var(--t-sm)/1 var(--sans); background: var(--blanc); }
.bulles a:hover { border-color: var(--bleu); color: var(--bleu); }

.auteur { display: flex; gap: 1.4rem; align-items: start; max-width: 46rem; }
.auteur__photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none; }
.auteur__nom { font: 600 var(--t-md)/1.3 var(--sans); margin: 0 0 0.4rem; }
.auteur__bio { font-size: 1.02rem; margin: 0 0 0.4rem; }
.auteur__dates { font: 400 var(--t-xs)/1.4 var(--sans); color: var(--feutre); margin: 0; }

.barre-achat { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: var(--foret); color: var(--blanc); transform: translateY(110%); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.1, 1); }
.barre-achat.est-visible { transform: none; }
.barre-achat { background: rgba(250, 249, 246, 0.94); color: var(--anthracite); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-top: 1px solid var(--trait); box-shadow: 0 -18px 40px rgba(37, 39, 43, 0.14); padding-bottom: env(safe-area-inset-bottom, 0px); }
.barre-achat::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: linear-gradient(90deg, var(--moutarde), var(--bleu)); }
.barre-achat__contenu { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; min-height: 88px; padding-block: 0.7rem; }
.barre-achat__produit { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.barre-achat__photo { flex: none; width: 112px; height: 72px; object-fit: contain; background: #fff; border: 1px solid var(--trait); border-radius: 12px; padding: 4px; }
.barre-achat__texte { display: grid; gap: 0.35rem; min-width: 0; }
.barre-achat__nom { font: 650 var(--t-md)/1.2 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-achat__meta { display: flex; align-items: center; gap: 0.6rem; font: 500 var(--t-sm)/1 var(--sans); color: var(--feutre); }
.barre-achat__note { font: 700 var(--t-md)/1 var(--sans); color: var(--anthracite); }
.barre-achat__note small { font-size: 0.72em; font-weight: 600; color: var(--feutre); margin-left: 1px; }
.barre-achat__jauge { width: 84px; height: 6px; border-radius: 99px; background: var(--trait); overflow: hidden; }
.barre-achat__jauge span { display: block; height: 100%; background: var(--moutarde); border-radius: inherit; }
.barre-achat__achat { display: flex; align-items: center; gap: 1.2rem; flex: none; }
.barre-achat__prix-bloc { display: grid; justify-items: end; gap: 0.2rem; }
.barre-achat__prix-bloc small { font: 500 var(--t-xs)/1 var(--sans); color: var(--feutre); }
.barre-achat__prix { font: 700 1.6rem/1 var(--sans); letter-spacing: -0.01em; }
.barre-achat .bouton--marchand { min-height: 56px; padding: 0 2.2rem; border-radius: 999px; background: var(--moutarde); color: var(--anthracite); font-size: var(--t-md); font-weight: 700; box-shadow: 0 6px 18px rgba(214, 166, 43, 0.35); animation: barre-achat-appel 2.4s ease-out 1; }
.barre-achat .bouton--marchand:hover { background: var(--anthracite); color: var(--blanc); box-shadow: none; }
@keyframes barre-achat-appel { 0% { box-shadow: 0 0 0 0 rgba(214, 166, 43, 0.6); } 100% { box-shadow: 0 0 0 16px rgba(214, 166, 43, 0); } }
@media (prefers-reduced-motion: reduce) { .barre-achat .bouton--marchand { animation: none; } }
@media (max-width: 700px) {
  .barre-achat__contenu { gap: 0.7rem; min-height: 74px; }
  .barre-achat__photo { width: 64px; height: 48px; }
  .barre-achat__nom { font-size: var(--t-sm); }
  .barre-achat__jauge, .barre-achat__label, .barre-achat__prix-bloc small { display: none; }
  .barre-achat__achat { gap: 0.6rem; }
  .barre-achat__prix { font-size: var(--t-md); }
  .barre-achat .bouton--marchand { padding: 0 1.1rem; min-height: 48px; font-size: var(--t-sm); }
}
@media (max-width: 420px) { .barre-achat__prix-bloc { display: none; } }

/* ==========================================================================
   COLLECTION
   ========================================================================== */
.collection__titraille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 4rem; align-items: end; padding: 0.5rem 0 2rem; }
.collection__titraille h1 { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.4rem); line-height: 0.98; letter-spacing: -0.04em; margin: 0; }
.collection__titraille .chapeau { font-size: 1.1rem; }
@media (max-width: 900px) { .collection__titraille { grid-template-columns: minmax(0, 1fr); } }
.vignettes-nav { display: flex; gap: 1rem; overflow-x: auto; padding: 0.4rem 0 1.4rem; scroll-snap-type: x proximity; }
.vignettes-nav a { flex: none; width: 132px; scroll-snap-align: start; display: grid; gap: 0.5rem; text-decoration: none; color: var(--anthracite); font: 500 var(--t-sm)/1.25 var(--sans); }
.vignettes-nav img { width: 132px; height: 132px; object-fit: cover; border-radius: 50%; background: var(--blanc); transition: transform 0.3s ease; }
.vignettes-nav a:hover img { transform: scale(1.04); }

.catalogue { padding-top: 1rem; }
.catalogue__barre { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; padding-bottom: 1.4rem; margin-bottom: 1.8rem; border-bottom: 2px solid var(--anthracite); }
.place--compacte { margin: 0; box-shadow: none; background: transparent; padding: 0; flex: 1 1 320px; max-width: 30rem; }
.place--compacte .cote { width: 100%; transition: width 0.2s ease; }
.catalogue__outils { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.tri select { min-height: 46px; padding: 0 2.2rem 0 1rem; border: 1px solid var(--trait); border-radius: var(--r-ctl); background: var(--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2323262b' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 1rem center; -webkit-appearance: none; appearance: none; font: 500 var(--t-sm)/1 var(--sans); color: var(--anthracite); }
.catalogue__total { margin: 0; font: 500 var(--t-sm)/1 var(--sans); color: var(--feutre); }
.catalogue__total span:first-child { color: var(--anthracite); font-weight: 650; font-variant-numeric: tabular-nums; }
.compteur-filtres { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--bleu); color: var(--blanc); font-size: var(--t-xs); }
.catalogue__corps { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 2.4rem; align-items: start; }
.catalogue__vide { font: 500 var(--t-md)/1.5 var(--sans); padding: 2rem 0; }
.filtres { position: sticky; top: 84px; display: grid; gap: 1.2rem; max-height: calc(100vh - 100px); overflow: auto; padding-right: 0.4rem; }
.filtres__tete { display: flex; justify-content: space-between; align-items: baseline; font: 650 var(--t-md)/1 var(--sans); }
.filtres__effacer { border: 0; background: none; color: var(--bleu); font: 500 var(--t-xs)/1 var(--sans); cursor: pointer; padding: 0; }
.filtre { border: 0; margin: 0; padding: 0 0 1rem; border-bottom: 1px solid var(--trait); }
.filtre legend { font: 600 var(--t-sm)/1 var(--sans); margin-bottom: 0.7rem; padding: 0; }
.filtre__option { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem; padding: 0.3rem 0; font: 400 var(--t-sm)/1.3 var(--sans); cursor: pointer; }
.filtre__option input { width: 17px; height: 17px; accent-color: var(--bleu); margin: 0; }
.filtre__n { color: var(--feutre); font-size: var(--t-xs); }
.filtre__option.est-vide { opacity: 0.4; }
.filtres__fermer { display: none; }
@media (max-width: 900px) {
  .catalogue__corps { grid-template-columns: minmax(0, 1fr); }
  .filtres { position: fixed; inset: auto 0 0 0; z-index: 45; max-height: 82vh; background: var(--platre); padding: 1.2rem var(--gutter) 1.4rem; border-radius: 18px 18px 0 0; box-shadow: 0 -20px 50px rgba(0,0,0,.25); transform: translateY(105%); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.1, 1); }
  .filtres.est-ouvert { transform: none; }
  .filtres__fermer { display: inline-flex; position: sticky; bottom: 0; }
}
@media (min-width: 901px) { [data-ouvrir-filtres] { display: none; } }

.dossier__grille { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.dossier__grille .texte-long { max-width: var(--lecture); }
.sommaire { position: sticky; top: 90px; }
.sommaire__titre { font: 600 var(--t-sm)/1 var(--sans); margin-bottom: 0.8rem; }
.sommaire ol { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.6rem; font: 400 var(--t-sm)/1.35 var(--sans); }
.sommaire a { color: var(--anthracite); text-decoration: none; }
.sommaire a:hover { color: var(--bleu); text-decoration: underline; }
.dossier__partie + .dossier__partie { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--trait); }
@media (max-width: 900px) { .dossier__grille { grid-template-columns: minmax(0, 1fr); } .sommaire { position: static; } }

/* ==========================================================================
   ACCUEIL, ARTICLES, PAGES
   ========================================================================== */
.budgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1rem; }
.budget { display: grid; gap: 0.6rem; padding: 1.6rem 1.4rem; border-radius: 14px; background: var(--foret); color: var(--blanc); text-decoration: none; transition: background-color 0.2s ease; }
.budget:hover { background: var(--moutarde); color: var(--anthracite); }
.budget .budget__chiffre { color: var(--moutarde); }
.budget:hover .budget__chiffre { color: var(--anthracite); }
.budget:hover .budget__label { color: var(--anthracite); }
.budget__chiffre { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); font-weight: 650; letter-spacing: -0.04em; line-height: 1; }
.budget__chiffre::after { content: " €"; font-size: 0.5em; letter-spacing: 0; }
.budget__label { font: 400 var(--t-sm)/1.3 var(--sans); color: #c9ccd2; }
.marques-ancien { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); column-gap: 2.5rem; border-top: 1px solid var(--trait); }
.marques li { border-bottom: 1px solid var(--trait); }
.marques a, .marques li > span { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.1rem 0.2rem; color: var(--anthracite); text-decoration: none; }
.marques a:hover .marques__nom { color: var(--bleu); }
.marques__nom { font: 600 var(--t-lg)/1.1 var(--sans); letter-spacing: -0.02em; }
.marques__n { color: var(--feutre); font-size: var(--t-sm); }
.sujet__meta { font: 400 var(--t-xs)/1 var(--sans); color: var(--feutre); }
.une__lien { display: block; }

.article__tete { padding: 0.5rem 0 2rem; max-width: 60rem; }
.article__titre { font-size: clamp(2.2rem, 1.2rem + 3.8vw, 4.6rem); line-height: 1; letter-spacing: -0.04em; }
.article__meta { font: 400 var(--t-sm)/1.4 var(--sans); color: var(--feutre); }
.article__visuel { margin: 0 auto 3rem; border-radius: var(--r-img); overflow: hidden; }
.article__visuel img { width: 100%; max-height: 72vh; object-fit: cover; }
.article__corps { max-width: var(--lecture); margin-inline: auto; }
.page-standard__tete { padding-bottom: 1rem; }
.lecture-large { max-width: 48rem; }
.liste-articles__tete { padding-bottom: 2rem; }
.pagination { display: flex; gap: 0.5rem; margin: 3rem 0; font: 500 var(--t-sm)/1 var(--sans); }
.pagination .page-numbers { padding: 0.6rem 0.9rem; border: 1px solid var(--trait); border-radius: var(--r-ctl); text-decoration: none; color: var(--anthracite); }
.pagination .current { background: var(--anthracite); color: var(--blanc); border-color: var(--anthracite); }
.introuvable { padding: clamp(3rem, 10vw, 7rem) 0; max-width: 44rem; }
.introuvable__cote .cote { max-width: 10rem; font-size: var(--t-md); }

/* Le canapé se dessine au trait, puis ses cotes apparaissent. */
.js .elev.a-tracer path, .js .elev.a-tracer rect { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.8s cubic-bezier(0.6, 0, 0.2, 1); }
.js .elev.a-tracer .elev__trait { fill-opacity: 0; transition: fill-opacity 0.6s ease 1.2s; }
.js .elev.a-tracer text { opacity: 0; transition: opacity 0.5s ease 1.5s; }
.js .elev.a-tracer.est-visible path, .js .elev.a-tracer.est-visible rect { stroke-dashoffset: 0; }
.js .elev.a-tracer.est-visible .elev__trait { fill-opacity: 1; }
.js .elev.a-tracer.est-visible text { opacity: 1; }

.alternatives { display: grid; gap: 0.8rem; padding: 1.1rem; border-radius: 14px; background: var(--moutarde-voile); }
.alternatives h3 { font-size: var(--t-md); margin: 0; }
.alternative { display: grid; grid-template-columns: 96px 1fr; gap: 0.9rem; align-items: start; text-decoration: none; color: var(--anthracite); padding: 0.6rem; border-radius: 10px; background: var(--blanc); }
.alternative:hover { box-shadow: 0 0 0 1px var(--bleu); color: var(--anthracite); }
.alternative img { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; }
.alternative h4 { font-size: var(--t-sm); margin: 0 0 0.3rem; }
.alternative__ligne { display: flex; gap: 0.8rem; font: 600 var(--t-sm)/1 var(--sans); margin-bottom: 0.35rem; }
.alternative__raison { display: block; font: 400 var(--t-xs)/1.45 var(--sans); color: var(--feutre); }

/* --- Vitrine de la une : un vrai canapé analysé, qui tient dans l'espace choisi ------ */
.vitrine { margin: 0; display: grid; gap: 1rem; }
.vitrine__scene { position: relative; display: block; aspect-ratio: 5 / 4; border-radius: 22px; overflow: hidden; background: #ececec; }
.vitrine__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity 0.6s ease, transform 1.2s cubic-bezier(0.2, 0.7, 0.1, 1); }
.vitrine__photo.est-active { opacity: 1; transform: none; }
.vitrine__mesure { display: flex; justify-content: center; }
.vitrine__mesure .cote { transition: width 0.6s cubic-bezier(0.2, 0.7, 0.1, 1); font-size: var(--t-sm); }
.vitrine__legende { display: grid; gap: 0.25rem; font-family: var(--sans); }
.vitrine__surtitre { font: 500 var(--t-xs)/1 var(--sans); color: var(--feutre); }
.vitrine__legende a { font: 650 var(--t-lg)/1.2 var(--sans); color: var(--anthracite); text-decoration: none; letter-spacing: -0.01em; }
.vitrine__legende a:hover { color: var(--bleu-2); }
.vitrine__chiffres { display: flex; gap: 1rem; font: 500 var(--t-sm)/1 var(--sans); color: var(--feutre); }
.vitrine__chiffres b { color: var(--anthracite); }

/* --- Blocs cliquables ------------------------------------------------------ */
.onglets__barre { position: relative; display: flex; gap: 0.3rem; overflow-x: auto; border-bottom: 1px solid var(--trait); margin-bottom: clamp(1.6rem, 4vw, 2.6rem); scrollbar-width: none; }
.onglets__barre::-webkit-scrollbar { display: none; }
.onglets__onglet { flex: none; border: 0; background: none; cursor: pointer; padding: 1rem 1.1rem 1.1rem; font: 600 var(--t-md)/1 var(--sans); color: var(--feutre); letter-spacing: -0.01em; }
.onglets__onglet[aria-selected="true"] { color: var(--anthracite); }
.onglets__onglet:hover { color: var(--anthracite); }
.onglets__curseur { position: absolute; left: 0; bottom: -1px; height: 3px; width: 0; background: var(--bleu); border-radius: 3px; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.1, 1), width 0.35s cubic-bezier(0.2, 0.7, 0.1, 1); }
.onglets__panneau { display: none; max-width: var(--lecture); }
.onglets__panneau.est-actif { display: block; animation: apparait 0.35s ease; }
.onglets__panneau > h2:first-child, .onglets__panneau > p:first-child > h2 { margin-top: 0; }
@keyframes apparait { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.acc { border-top: 1px solid var(--trait); }
.acc:last-of-type { border-bottom: 1px solid var(--trait); }
.acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem; padding: 1.3rem 0; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary h2 { margin: 0; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem); flex: 1; }
.acc summary::after { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--trait); background: var(--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%233e6150' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center; transition: transform 0.25s ease; }
.acc[open] summary::after { transform: rotate(45deg); }
.acc summary:hover h2 { color: var(--bleu-2); }
.acc__corps { padding: 0 0 1.6rem; }
.fiche__lecture > p:first-of-type::first-letter { float: left; font: 650 4.4em/0.8 var(--sans); letter-spacing: -0.04em; margin: 0.08em 0.12em 0 0; }

/* --- Radar --------------------------------------------------------------- */
.avis-express--radar { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); align-items: start; }
.radar { width: 100%; max-width: 320px; justify-self: end; }
.radar__grille polygon, .radar__grille line { fill: none; stroke: var(--trait); stroke-width: 1; }
.radar__forme { fill: color-mix(in srgb, var(--bleu) 22%, transparent); stroke: var(--bleu); stroke-width: 2; stroke-linejoin: round; }
.radar__labels text { font: 500 10px var(--sans); fill: var(--feutre); }
.radar__labels tspan { font-weight: 700; fill: var(--anthracite); }
.js .radar.a-tracer .radar__forme { transform-origin: 170px 118px; transform: scale(0.2); opacity: 0; transition: transform 1s cubic-bezier(0.2, 0.8, 0.1, 1), opacity 0.4s ease; }
.js .radar.a-tracer.est-visible .radar__forme { transform: none; opacity: 1; }
@media (max-width: 900px) { .avis-express--radar { grid-template-columns: minmax(0, 1fr); } .radar { justify-self: start; } }

/* --- En résumé -------------------------------------------------------------- */
.resume-fiche { display: grid; grid-template-columns: auto 1fr 1fr auto; gap: 1.5rem 2.5rem; align-items: center; padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 18px; background: var(--foret); color: var(--blanc); }
.resume-fiche__note { display: flex; align-items: baseline; gap: 0.2rem; flex-wrap: wrap; font-family: var(--sans); }
.resume-fiche__note p { width: 100%; margin: 0.3rem 0 0; font: 500 var(--t-sm)/1 var(--sans); color: #c9c6bd; }
.resume-fiche .note-globale__chiffre { color: var(--moutarde); }
.resume-fiche ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font: 400 var(--t-sm)/1.4 var(--sans); }
.resume-fiche li { padding-left: 1.3rem; position: relative; }
.resume-fiche__pour li::before { content: "+"; position: absolute; left: 0; color: var(--moutarde); font-weight: 700; }
.resume-fiche__contre li::before { content: "\2212"; position: absolute; left: 0; color: #e0a39b; font-weight: 700; }
.resume-fiche .bouton--marchand { background: var(--moutarde); color: var(--anthracite); }
.resume-fiche .bouton--marchand:hover { background: var(--blanc); color: var(--anthracite); }
@media (max-width: 900px) { .resume-fiche { grid-template-columns: minmax(0, 1fr); } }

/* --- Pour aller plus loin, vote, comparatifs ------------------------------ */
.plus-loin > .enveloppe + .enveloppe { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.plus-loin__grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; align-items: start; }
@media (max-width: 900px) { .plus-loin__grille { grid-template-columns: minmax(0, 1fr); } }
.duels-liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.duels-liens a { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; padding: 1rem 1.2rem; border-radius: 12px; background: var(--blanc); border: 1px solid var(--trait); color: var(--anthracite); text-decoration: none; font: 600 var(--t-md)/1.3 var(--sans); transition: border-color 0.2s ease, transform 0.2s ease; }
.duels-liens a:hover { border-color: var(--bleu); transform: translateX(3px); }
.duels-liens span { font: italic 400 var(--t-md)/1 var(--serif); color: var(--bleu); }
.vote { padding: 1.4rem; border-radius: 16px; background: var(--moutarde-voile); }
.vote__question { font: 650 var(--t-lg)/1.25 var(--sans); margin: 0 0 1rem; }
.vote__boutons { display: flex; gap: 0.6rem; }
.vote__boutons .bouton { min-width: 6rem; background: var(--blanc); }
.vote__boutons .est-choisi { background: var(--foret); color: var(--blanc); border-color: var(--foret); }
.vote__resultat { font: 500 var(--t-sm)/1.4 var(--sans); color: var(--feutre); margin: 0.9rem 0 0; min-height: 1.4em; }
.vote__alternatives p { font: 600 var(--t-sm)/1.3 var(--sans); margin: 1rem 0 0.6rem; }
.minis { display: grid; gap: 0.5rem; }
.mini { display: grid; grid-template-columns: 96px 1fr; gap: 0.8rem; align-items: center; padding: 0.5rem; border-radius: 10px; background: var(--blanc); color: var(--anthracite); text-decoration: none; }
.mini img { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; }
.mini__nom { display: block; font: 600 var(--t-sm)/1.25 var(--sans); }
.mini__ligne { display: flex; gap: 0.8rem; font: 500 var(--t-sm)/1 var(--sans); margin-top: 0.3rem; }
.tableau-defile { overflow-x: auto; }
.comparaison { width: 100%; border-collapse: collapse; font: 400 var(--t-sm)/1.4 var(--sans); background: var(--blanc); border-radius: 14px; overflow: hidden; }
.comparaison th, .comparaison td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
.comparaison thead th { font-weight: 600; background: var(--platre-2); }
.comparaison tbody th { font-weight: 500; }
.comparaison .est-gagnant { background: var(--bleu-voile); font-weight: 650; color: var(--bleu-2); }
.voisins .est-ici { background: var(--moutarde-voile); }
.ici { display: inline-block; margin-left: 0.4rem; padding: 0.2rem 0.5rem; border-radius: 999px; background: var(--moutarde); font-size: var(--t-xs); font-weight: 600; }

/* --- Comparatif -------------------------------------------------------------- */
.duel__titre { font-size: clamp(1.9rem, 1.1rem + 2.2vw, 3rem); line-height: 1.05; letter-spacing: -0.03em; max-width: 30ch; }
.duel__face { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 5rem); margin: 2rem 0 1rem; }
.duel__ou { position: absolute; left: 50%; top: 26%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: var(--moutarde); display: grid; place-items: center; font: italic 400 1.5rem/1 var(--serif); color: var(--anthracite); box-shadow: var(--ombre); }
.duel__carte { position: relative; display: flex; flex-direction: column; gap: 0.7rem; }
.duel__photo { display: block; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #ececec; }
.duel__photo img { width: 100%; height: 100%; object-fit: cover; }
.duel__nom { font-size: var(--t-xl); margin: 0.3rem 0 0; }
.duel__nom a { color: var(--anthracite); text-decoration: none; }
.duel__limite { font: 400 var(--t-sm)/1.45 var(--sans); margin: 0; }
.duel__limite span { color: var(--feutre); }
.duel__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }
.duel__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem); }
.duel__plans { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 1.5rem; }
.duel__legende { font: 500 var(--t-sm)/1.3 var(--sans); color: var(--feutre); text-align: center; margin: 0; }
.duel__tete { font: 600 var(--t-sm)/1 var(--sans); color: var(--bleu); }
.verdicts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font: 400 var(--t-md)/1.4 var(--sans); }
.verdicts li { padding: 0.9rem 1rem; border-radius: 12px; background: var(--blanc); border-left: 3px solid var(--moutarde); }
.verdicts__critere { display: block; font: 600 var(--t-xs)/1 var(--sans); color: var(--feutre); margin-bottom: 0.35rem; }
@media (max-width: 800px) { .duel__face, .duel__grille, .duel__plans { grid-template-columns: minmax(0, 1fr); } .duel__ou { display: none; } }
.duels-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.4rem; }
.duel-tuile { display: grid; gap: 0.8rem; text-decoration: none; color: var(--anthracite); }
.duel-tuile__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: 14px; overflow: hidden; }
.duel-tuile__photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #ececec; }
.duel-tuile__noms { font: 600 var(--t-md)/1.3 var(--sans); }
.duel-tuile__noms span { font: italic 400 1em/1 var(--serif); color: var(--moutarde); }
.duel-tuile:hover .duel-tuile__noms { color: var(--bleu-2); }

.dossier__disposition { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.dossier__rail { position: sticky; top: 90px; display: grid; gap: 1.6rem; }
.dossier__rail h2 { font-size: var(--t-lg); margin-bottom: 0.8rem; }
.podium .mini { position: relative; }
.podium__rang { position: absolute; top: 0.4rem; left: 0.4rem; width: 26px; height: 26px; border-radius: 50%; background: var(--moutarde); display: grid; place-items: center; font: 700 var(--t-xs)/1 var(--sans); }
@media (max-width: 1000px) { .dossier__disposition { grid-template-columns: minmax(0, 1fr); } .dossier__rail { position: static; } }

/* --- Guides du Mag ----------------------------------------------------------- */
.guide__tete { padding: 0.5rem 0 2.4rem; }
.guide__tete--image { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; }
.guide__titraille { max-width: 52rem; }
.guide__tete .article__titre { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); }
.guide__vignette { margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--platre-2); }
.guide__vignette img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .guide__tete--image { grid-template-columns: minmax(0, 1fr); } .guide__vignette { max-width: 420px; aspect-ratio: 16 / 9; } }
.guide__visuel { margin: 0 auto 2.5rem; border-radius: 18px; overflow: hidden; }
.guide__visuel img { width: 100%; max-height: 70vh; object-fit: cover; }
.guide__grille { display: grid; grid-template-columns: 230px minmax(0, 1fr) 280px; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.guide__corps .article__corps { max-width: var(--lecture); margin: 0; }
.sommaire-guide { position: sticky; top: 90px; font: 400 var(--t-sm)/1.35 var(--sans); max-height: calc(100vh - 110px); overflow: auto; }
.sommaire-guide summary { font: 600 var(--t-sm)/1 var(--sans); cursor: pointer; margin-bottom: 0.8rem; list-style: none; }
.sommaire-guide summary::-webkit-details-marker { display: none; }
.sommaire-guide ol { list-style: none; margin: 0; padding: 0 0 0 0.9rem; border-left: 1px solid var(--trait); display: grid; gap: 0.5rem; }
.sommaire-guide .niv-3 { padding-left: 0.8rem; font-size: var(--t-xs); }
.sommaire-guide a { color: var(--feutre); text-decoration: none; display: block; position: relative; }
.sommaire-guide a:hover { color: var(--anthracite); }
.sommaire-guide a.est-actif { color: var(--bleu-2); font-weight: 600; }
.sommaire-guide a.est-actif::before { content: ""; position: absolute; left: calc(-0.9rem - 1px); top: 0; bottom: 0; width: 2px; background: var(--bleu); }
.rail-guide { position: sticky; top: 90px; display: grid; gap: 1.6rem; }
.rail-guide__titre { font: 650 var(--t-md)/1 var(--sans); margin: 0 0 0.8rem; }
.guide__fin { max-width: var(--lecture); display: grid; gap: 2rem; margin-top: 3rem; }
.encart-selection { margin: 2.6rem 0; padding: 1.4rem; border-radius: 18px; background: var(--blanc); box-shadow: var(--ombre); font-family: var(--sans); }
.encart-selection__titre { font: 650 var(--t-lg)/1.2 var(--sans); margin: 0 0 1rem; }
.encart-selection__liste { display: grid; gap: 0.9rem; }
.encart-produit { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: 1.1rem; row-gap: 0.35rem; align-items: center; font-size: var(--t-sm); padding-bottom: 0.9rem; border-bottom: 1px solid var(--trait); }
.encart-produit:last-child { border-bottom: 0; padding-bottom: 0; }
.encart-produit__photo { grid-row: 1 / 4; }
.encart-produit .bouton { grid-column: 3; grid-row: 1 / 3; align-self: center; }
.encart-produit__test { grid-column: 3; grid-row: 3; }
.encart-produit .cote { grid-column: 2; max-width: 14rem; }
.encart-produit .repere-choix { top: 0.4rem; left: 0.4rem; font-size: 0.7rem; padding: 0.3rem 0.5rem; }
@media (max-width: 640px) { .encart-produit { grid-template-columns: 110px minmax(0, 1fr); } .encart-produit .bouton, .encart-produit__test { grid-column: 1 / -1; grid-row: auto; } .encart-produit__photo { grid-row: 1 / 4; } }
.encart-produit__photo { display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #ececec; }
.encart-produit__photo img { width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.encart-produit__nom { font-weight: 600; color: var(--anthracite); text-decoration: none; line-height: 1.25; }
.encart-produit__ligne { display: flex; justify-content: space-between; font-weight: 600; }
.encart-produit__test { font-size: var(--t-xs); text-align: center; }
.encart-produit .bouton { min-height: 40px; font-size: var(--t-xs); padding: 0 0.8rem; }
.texte-long .encart-selection img { margin: 0; }
@media (max-width: 1200px) { .guide__grille { grid-template-columns: 200px minmax(0, 1fr); } .rail-guide { grid-column: 1 / -1; position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
@media (max-width: 1000px) { .guide__grille { grid-template-columns: minmax(0, 1fr); } .sommaire-guide { position: static; max-height: none; padding: 1rem 1.2rem; background: var(--blanc); border-radius: 14px; } }

/* --- Blocs cliquables en tuiles (collections) ------------------------------------ */
.onglets--tuiles .onglets__barre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; border: 0; overflow: visible; margin-bottom: 1rem; }
.onglets--tuiles .onglets__curseur { display: none; }
.onglets--tuiles .onglets__onglet {
  display: grid; align-content: start; gap: 0.55rem; text-align: left; padding: 1.3rem 1.4rem 1.4rem; border-radius: 18px;
  background: var(--blanc); border: 1px solid var(--trait); color: var(--anthracite); min-height: 150px;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.onglets--tuiles .onglets__onglet:hover { border-color: var(--moutarde); transform: translateY(-2px); box-shadow: var(--ombre); }
.onglets--tuiles .onglets__label { font: 650 var(--t-xs)/1 var(--sans); color: var(--bleu); letter-spacing: 0.02em; }
.onglets--tuiles .onglets__titre { font: 650 var(--t-md)/1.25 var(--sans); letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.onglets--tuiles .onglets__sous { font: 400 var(--t-sm)/1.3 var(--sans); color: var(--feutre); margin-top: auto; }
.onglets--tuiles .onglets__onglet[aria-selected="true"] { background: var(--foret); border-color: var(--foret); color: var(--blanc); box-shadow: var(--ombre); }
.onglets--tuiles .onglets__onglet[aria-selected="true"] .onglets__label { color: var(--moutarde); }
.onglets--tuiles .onglets__onglet[aria-selected="true"] .onglets__sous { color: #c3c1bb; }
.onglets--tuiles .onglets__onglet[aria-selected="true"]::after { content: ""; justify-self: start; width: 34px; height: 3px; border-radius: 3px; background: var(--moutarde); margin-top: 0.3rem; }
.onglets--tuiles .onglets__panneau { max-width: none; background: var(--blanc); border-radius: 20px; padding: clamp(1.5rem, 4vw, 3rem); }
.onglets--tuiles .onglets__panneau > * { max-width: var(--lecture); }
@media (max-width: 760px) { .onglets--tuiles .onglets__barre { grid-template-columns: minmax(0, 1fr); } .onglets--tuiles .onglets__onglet { min-height: 0; } }

/* --- Classement automatique et notes sur les photos --------------------------- */
.carte__pastille { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 1; min-width: 46px; height: 46px; padding: 0 0.5rem; border-radius: 999px; display: grid; place-items: center; background: var(--foret); color: var(--moutarde); font: 700 var(--t-md)/1 var(--sans); box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); }
.repere-choix--discret { background: var(--blanc); color: var(--anthracite); box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.classement { padding: 0.5rem 0 3rem; }
.classement__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.6rem 2rem; border-bottom: 2px solid var(--anthracite); padding-bottom: 0.8rem; margin-bottom: 1.6rem; }
.classement__tete h2 { margin: 0; font-size: clamp(1.7rem, 1.1rem + 2vw, 2.6rem); letter-spacing: -0.03em; }
.classement__maj { margin: 0; font: 400 var(--t-sm)/1.4 var(--sans); color: var(--feutre); }
.podium-classement { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 1.2rem; align-items: stretch; }
.podium-classement__place { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--blanc); border-radius: 18px; overflow: hidden; border: 1px solid var(--trait); }
.podium-classement__place--1 { border-color: var(--moutarde); box-shadow: 0 0 0 2px var(--moutarde) inset; }
.podium-classement__rang { position: absolute; top: 0.8rem; left: 0.8rem; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--foret); color: var(--blanc); font: 700 var(--t-lg)/1 var(--sans); }
.podium-classement__place--1 .podium-classement__rang { background: var(--moutarde); color: var(--anthracite); }
.podium-classement__photo { display: block; aspect-ratio: 4 / 3; background: #ececec; }
.podium-classement__photo img { width: 100%; height: 100%; object-fit: cover; }
.podium-classement__texte { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.2rem 1.2rem; }
.podium-classement__nom { font: 650 var(--t-lg)/1.2 var(--sans); color: var(--anthracite); text-decoration: none; letter-spacing: -0.01em; }
.podium-classement__nom:hover { color: var(--bleu-2); }
.podium-classement__raison { margin: 0; font: 400 var(--t-sm)/1.45 var(--sans); color: var(--feutre); }
.podium-classement .carte__pied { margin-top: auto; }
.classement__complet { margin-top: 1.2rem; }
.classement__complet summary { cursor: pointer; font: 600 var(--t-sm)/1 var(--sans); color: var(--bleu-2); padding: 0.8rem 0; list-style: none; }
.classement__complet summary::-webkit-details-marker { display: none; }
.classement__complet summary::before { content: "+ "; }
.classement__complet[open] summary::before { content: "\2212 "; }
@media (max-width: 900px) { .podium-classement { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   ACCUEIL v3
   ========================================================================== */
.une__badge { margin: 0 0 1.4rem; }
.une__badge .cote { max-width: 17rem; font-size: var(--t-xs); }
.une__requete { display: block; font: 650 clamp(0.95rem, 0.8rem + 0.5vw, 1.2rem)/1.2 var(--sans); letter-spacing: 0.01em; color: var(--bleu); margin-bottom: 0.9rem; white-space: normal; }
.vitrine__note { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--foret); color: var(--moutarde); font: 700 1.25rem/1 var(--sans); box-shadow: 0 10px 24px -10px rgba(0,0,0,.55); }

/* Bandeau des marques qui défile (arrêt au survol, immobile si animations réduites). */
.bandeau-marques { background: var(--foret); color: var(--blanc); overflow: hidden; padding: 1.1rem 0; margin-top: clamp(1rem, 3vw, 2rem); }
.bandeau-marques__piste { display: flex; width: max-content; animation: defile-marques 38s linear infinite; }
.bandeau-marques:hover .bandeau-marques__piste, .bandeau-marques:focus-within .bandeau-marques__piste { animation-play-state: paused; }
.bandeau-marques__liste { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.bandeau-marques__liste li { display: flex; align-items: baseline; gap: 0.5rem; padding: 0 2.2rem; position: relative; white-space: nowrap; }
.bandeau-marques__liste li::after { content: ""; position: absolute; right: 0; top: 50%; width: 10px; height: 10px; border: 1.5px solid var(--moutarde); transform: translateY(-50%) rotate(45deg); }
.bandeau-marques__liste a, .bandeau-marques__liste span { color: var(--blanc); text-decoration: none; font: 600 clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem)/1 var(--sans); letter-spacing: -0.02em; }
.bandeau-marques__liste a:hover { color: var(--moutarde); }
.bandeau-marques__liste small { color: var(--moutarde); font: 600 var(--t-xs)/1 var(--sans); }
@keyframes defile-marques { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bandeau-marques__piste { animation: none; flex-wrap: wrap; width: auto; } .bandeau-marques__liste[aria-hidden] { display: none; } }

/* Chiffres clés */
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding: clamp(2.5rem, 5vw, 4rem) 0 0; }
.chiffre { display: grid; gap: 0.4rem; padding: 1.4rem 1.4rem 1.5rem; border-top: 3px solid var(--moutarde); background: var(--blanc); border-radius: 0 0 16px 16px; }
.chiffre__valeur { font: 700 clamp(2.4rem, 1.6rem + 2.6vw, 3.8rem)/1 var(--sans); letter-spacing: -0.04em; }
.chiffre__label { font: 500 var(--t-sm)/1.3 var(--sans); color: var(--feutre); }
@media (max-width: 800px) { .chiffres { grid-template-columns: 1fr 1fr; } }

/* Top 5 */
.top-canapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.top-canapes__ligne { display: grid; grid-template-columns: 70px 180px minmax(0, 1fr) auto; gap: 1.4rem; align-items: center; padding: 1rem 1.4rem 1rem 1rem; background: var(--blanc); border-radius: 18px; border: 1px solid var(--trait); transition: border-color 0.2s ease, transform 0.2s ease; }
.top-canapes__ligne:hover { border-color: var(--moutarde); transform: translateX(4px); }
.top-canapes__ligne--un { border: 2px solid var(--moutarde); }
.top-canapes__rang { font: 700 3.2rem/1 var(--sans); letter-spacing: -0.05em; color: var(--trait); text-align: center; }
.top-canapes__ligne--un .top-canapes__rang { color: var(--moutarde); }
.top-canapes__photo { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #ececec; }
.top-canapes__photo img { width: 100%; height: 100%; object-fit: cover; }
.top-canapes__texte h3 { font-size: var(--t-lg); margin: 0 0 0.3rem; }
.top-canapes__texte h3 a { color: var(--anthracite); text-decoration: none; }
.top-canapes__texte h3 a:hover { color: var(--bleu-2); }
.top-canapes__texte p { margin: 0 0 0.6rem; font: 400 var(--t-sm)/1.35 var(--sans); color: var(--feutre); }
.top-canapes__texte .cote { max-width: 16rem; }
.top-canapes__chiffres { display: grid; justify-items: end; gap: 0.4rem; }
.top-canapes__note { font: 700 2rem/1 var(--sans); letter-spacing: -0.03em; }
.top-canapes__note small { font-size: 0.5em; color: var(--feutre); font-weight: 500; }
@media (max-width: 760px) { .top-canapes__ligne { grid-template-columns: 44px 110px minmax(0, 1fr); } .top-canapes__rang { font-size: 2rem; } .top-canapes__chiffres { grid-column: 2 / -1; justify-items: start; grid-auto-flow: column; justify-content: start; gap: 1rem; } }

/* Duel du moment */
.duel-semaine__carte { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-radius: 22px; overflow: hidden; text-decoration: none; color: var(--blanc); background: var(--foret); }
.duel-semaine__cote { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.duel-semaine__cote img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.1, 1); }
.duel-semaine__carte:hover .duel-semaine__cote img { transform: scale(1.04); }
.duel-semaine__nom { position: absolute; left: 1.2rem; bottom: 1.2rem; right: 1.2rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; font: 650 var(--t-xl)/1.1 var(--sans); text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.duel-semaine__nom small { font: 700 var(--t-sm)/1 var(--sans); background: var(--moutarde); color: var(--anthracite); padding: 0.35rem 0.55rem; border-radius: 999px; text-shadow: none; }
.duel-semaine__cote::after { content: ""; position: absolute; inset: 40% 0 0 0; background: linear-gradient(transparent, rgba(0,0,0,.55)); pointer-events: none; }
.duel-semaine__nom { z-index: 1; }
.duel-semaine__ou { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 2; width: 84px; height: 84px; border-radius: 50%; background: var(--moutarde); color: var(--anthracite); display: grid; place-items: center; font: italic 400 2rem/1 var(--serif); box-shadow: 0 12px 30px -12px rgba(0,0,0,.6); }
.duel-semaine__action { grid-column: 1 / -1; padding: 1rem 1.4rem; font: 600 var(--t-md)/1.3 var(--sans); color: var(--moutarde); }
@media (max-width: 700px) { .duel-semaine__nom { font-size: var(--t-md); } .duel-semaine__ou { width: 56px; height: 56px; font-size: 1.4rem; } }

/* Formes et budgets côte à côte */
.formes-budgets { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem); }
.formes-budgets .formes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.formes-budgets .budgets { grid-template-columns: 1fr 1fr; }
@media (max-width: 1000px) { .formes-budgets { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .formes-budgets .formes { grid-template-columns: 1fr 1fr; } }

/* Méthode et signature */
.methode { background: var(--foret); color: #e9e7e1; }
.methode h2, .methode h3 { color: var(--blanc); }
.methode .chapeau { color: #d6d3cc; }
.methode__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.criteres { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; counter-reset: critere; }
.criteres li { padding: 1.3rem 1.3rem 1.2rem; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.criteres h3 { font-size: var(--t-lg); margin: 0 0 0.5rem; }
.criteres h3::before { counter-increment: critere; content: "/10"; display: block; font: 700 var(--t-xs)/1 var(--sans); color: var(--moutarde); margin-bottom: 0.7rem; }
.criteres p { margin: 0; font: 400 var(--t-sm)/1.5 var(--sans); color: #cfccc5; }
.signature { display: flex; gap: 1rem; align-items: center; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.12); }
.signature img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--moutarde); }
.signature p { margin: 0; font: 400 var(--t-sm)/1.5 var(--sans); color: #d6d3cc; }
.signature strong { color: var(--blanc); }
@media (max-width: 900px) { .methode__grille, .criteres { grid-template-columns: minmax(0, 1fr); } }

/* Never let a child force horizontal scrolling on small screens. */
html, body { overflow-x: clip; }

[hidden] { display: none !important; }

.reseaux { list-style: none; display: flex; gap: 0.3rem; margin: 0 0 0 0.6rem; padding: 0; }
.reseaux a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--anthracite); }
.reseaux a:hover { background: var(--platre-2); color: var(--bleu-2); }
.reseaux svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 1100px) { .reseaux { margin-left: 0; order: 2; } .entete .bouton-menu { order: 3; margin-left: 0.4rem; } .entete__barre { gap: 0.6rem; } .marque-site { margin-right: auto; } }
@media (max-width: 380px) { .reseaux { display: none; } }

/* --- Pages de service ----------------------------------------------------------- */
.page-service { padding-bottom: 3rem; }
.page-service__maj { font: 400 var(--t-sm)/1.4 var(--sans); color: var(--feutre); }
.chiffres--page { padding-top: 0; }
.chiffres--page .chiffre__valeur { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }
.lexique { margin: 0; display: grid; gap: 0; }
.lexique div { padding: 1.1rem 0; border-bottom: 1px solid var(--trait); scroll-margin-top: 90px; }
.lexique dt { font: 650 var(--t-lg)/1.2 var(--sans); margin-bottom: 0.35rem; }
.lexique dd { margin: 0; font-size: 1.05rem; }
.lexique div:target { background: var(--moutarde-voile); }
.plan-site { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 2rem 3rem; }
.plan-site h2 { font-size: var(--t-lg); border-bottom: 2px solid var(--anthracite); padding-bottom: 0.5rem; }
.plan-site h2 small { color: var(--feutre); font-size: var(--t-sm); }
.plan-site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font: 400 var(--t-sm)/1.4 var(--sans); }
.plan-site a { color: var(--anthracite); text-decoration: none; }
.plan-site a:hover { color: var(--bleu-2); text-decoration: underline; }

/* --- Le Mag' ------------------------------------------------------------------ */
.mag__tete { padding: 0.5rem 0 2rem; max-width: 60rem; }
.mag__surtitre { font: 650 var(--t-sm)/1 var(--sans); color: var(--bleu); margin: 0 0 0.8rem; }
.mag__titre { font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.2rem); line-height: 0.95; letter-spacing: -0.045em; margin-bottom: 0.4em; }
.rubriques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0.8rem; margin-bottom: 1rem; }
.rubrique-tuile { display: grid; gap: 0.5rem; padding: 1.1rem 1.2rem; border-radius: 16px; background: var(--blanc); border: 1px solid var(--trait); text-decoration: none; color: var(--anthracite); transition: border-color 0.2s ease, transform 0.2s ease; }
.rubrique-tuile:hover { border-color: var(--moutarde); transform: translateY(-2px); color: var(--anthracite); }
.rubrique-tuile.est-active { background: var(--foret); border-color: var(--foret); color: var(--blanc); }
.rubrique-tuile__nom { font: 650 var(--t-md)/1.2 var(--sans); }
.rubrique-tuile__n { font: 500 var(--t-xs)/1 var(--sans); color: var(--bleu); }
.rubrique-tuile.est-active .rubrique-tuile__n { color: var(--moutarde); }
.mag__rubrique-desc { margin: -1rem 0 1.6rem; font-size: 1.05rem; color: var(--feutre); max-width: 44rem; }
.sujets--trois .sujet { grid-column: span 4; }
.mag__liste { padding: 1.5rem 0 1rem; }
@media (max-width: 900px) { .sujets--trois .sujet { grid-column: 1 / -1; } }

/* --- Méga-menu magazine -------------------------------------------------------- */
@media (min-width: 1101px) {
  .nav-groupe--mega { position: static; }
  .entete__barre { position: relative; }
  .mega { left: 0; right: 0; top: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.5rem; padding: 2rem 2.2rem; border-radius: 0 0 22px 22px; border-top: 3px solid var(--moutarde); }
  .mega__colonnes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 2rem; align-content: start; }
  #mega-fauteuils .mega__colonnes, #mega-mag .mega__colonnes { grid-template-columns: 1fr 1.6fr; }
  .mega__cote { border-left: 1px solid var(--trait); padding-left: 2rem; display: grid; align-content: start; gap: 0.9rem; }
}
.mega__titre { font: 650 var(--t-sm)/1.2 var(--sans); color: var(--bleu); margin: 0 0 0.7rem; }
.mega__colonne ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.mega__colonne a { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.45rem 0.6rem; margin-left: -0.6rem; border-radius: 8px; color: var(--anthracite); text-decoration: none; font: 400 var(--t-sm)/1.25 var(--sans); }
.mega__colonne a:hover { background: var(--bleu-voile); color: var(--bleu-2); }
.mega__colonne a .num { color: var(--feutre); font-size: var(--t-xs); }
.mega .mega__carte { display: grid; gap: 0.35rem; padding: 0; text-decoration: none; color: var(--anthracite); background: none; }
.mega__carte-photo { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #ececec; }
.mega__carte-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.mega__carte:hover img { transform: scale(1.04); }
.mega__carte-surtitre { font: 600 var(--t-xs)/1 var(--sans); color: var(--bleu); margin-top: 0.3rem; }
.mega__carte-nom { font: 650 var(--t-md)/1.25 var(--sans); }
.mega .mega__tout { padding: 0; background: none; font: 600 var(--t-sm)/1 var(--sans); color: var(--anthracite); text-decoration: underline; text-decoration-color: var(--moutarde); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
@media (max-width: 1100px) {
  .mega { padding: 0.4rem 0 1rem 0.6rem; }
  .mega__colonne { margin-bottom: 0.8rem; }
  .mega__cote { display: none; }
}

/* --- Comparatif v2 --------------------------------------------------------------- */
.duel__photo { position: relative; }
.en-bref { margin: 2.2rem 0 0; padding: clamp(1.3rem, 3vw, 2rem); border-radius: 20px; background: var(--foret); color: var(--blanc); }
.en-bref h2 { color: var(--blanc); font-size: var(--t-xl); margin-bottom: 1rem; }
.en-bref ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.9rem; }
.en-bref li { display: grid; gap: 0.3rem; padding: 1rem 1.1rem; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.en-bref__titre { font: 650 var(--t-xs)/1 var(--sans); color: var(--moutarde); }
.en-bref a { color: var(--blanc); font: 650 var(--t-md)/1.25 var(--sans); text-decoration: none; }
.en-bref a:hover { color: var(--moutarde); }
.en-bref__detail { font: 400 var(--t-sm)/1.4 var(--sans); color: #d6d3cc; }
.barre-duel { display: block; height: 4px; border-radius: 4px; margin-bottom: 0.4rem; background: linear-gradient(90deg, var(--moutarde) var(--v), var(--trait) 0); max-width: 160px; }
.comparaison__total th, .comparaison__total td { font-weight: 700; background: var(--moutarde-voile); }
.superposition { width: 100%; max-width: 760px; margin: 0.5rem auto 2rem; display: block; }
.superposition__a path { fill: color-mix(in srgb, var(--moutarde) 30%, transparent); stroke: var(--bleu); stroke-width: 2; stroke-linejoin: round; }
.superposition__b path { fill: none; stroke: var(--anthracite); stroke-width: 1.6; stroke-dasharray: 6 5; stroke-linejoin: round; }
.superposition__cote-a path { stroke: var(--bleu); stroke-width: 1.4; fill: none; }
.superposition__cote-b path { stroke: var(--anthracite); stroke-width: 1.2; stroke-dasharray: 4 4; fill: none; }
.superposition text { font: 600 12px var(--sans); text-anchor: middle; fill: var(--anthracite); }
.superposition__cote-a text { fill: var(--bleu-2); }
.duel__pc { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.duel__pc-col h3 { font-size: var(--t-lg); margin-bottom: 1rem; }
.duel__pc .pour-contre { grid-template-columns: 1fr 1fr; gap: 1rem; }
.duel__pc-titre { font: 650 var(--t-sm)/1 var(--sans); margin: 0 0 0.7rem; }
.lequel { padding: 1.4rem; border-radius: 18px; background: var(--blanc); border: 1px solid var(--trait); display: grid; gap: 0.8rem; align-content: start; }
.lequel h3 { margin: 0; }
.lequel .bouton { justify-self: start; margin-top: 0.4rem; }
.duels-liens--grille { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
@media (max-width: 800px) { .duel__pc, .duel__pc .pour-contre { grid-template-columns: minmax(0, 1fr); } }

.illustration { width: 100%; height: 100%; display: block; }

/* --- Hub des comparatifs ----------------------------------------------------------- */
.filtres-duels { display: grid; gap: 0.8rem; padding: 1.2rem 1.4rem; border-radius: 18px; background: var(--blanc); border: 1px solid var(--trait); margin-bottom: 1.2rem; }
.filtre-duels { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.filtre-duels__label { font: 650 var(--t-sm)/1 var(--sans); min-width: 6.5rem; }
.pilule { border: 1px solid var(--trait); background: var(--platre); color: var(--anthracite); border-radius: 999px; padding: 0.5rem 0.9rem; font: 500 var(--t-sm)/1 var(--sans); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; }
.pilule .num { color: var(--feutre); font-size: var(--t-xs); margin-left: 0.2rem; }
.pilule:hover { border-color: var(--moutarde); }
.pilule.est-active { background: var(--foret); border-color: var(--foret); color: var(--blanc); }
.pilule.est-active .num { color: var(--moutarde); }
.comparatifs__total { font: 500 var(--t-sm)/1 var(--sans); color: var(--feutre); margin: 0 0 1.2rem; }
.comparatifs__total span { color: var(--anthracite); font-weight: 700; }
.duel-tuile__photos { position: relative; }
.duel-tuile__ou { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--moutarde); font: italic 400 1rem/1 var(--serif); color: var(--anthracite); }
.duel-tuile__meta { font: 500 var(--t-xs)/1.2 var(--sans); color: var(--bleu); }
.comparatifs__plus { display: flex; margin: 2rem auto 0; }
@media (max-width: 700px) { .filtre-duels__label { width: 100%; } }

/* --- Bulle d'information (« i ») ---------------------------------------------------- */
.info { position: relative; display: inline-flex; align-self: center; margin-left: 0.3rem; }
.info__bouton { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--bleu); background: transparent; color: var(--bleu); font: italic 700 13px/1 var(--serif); cursor: pointer; display: grid; place-items: center; padding: 0; }
.info__bouton:hover, .info__bouton[aria-expanded="true"] { background: var(--bleu); color: var(--blanc); }
.info__bulle { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); z-index: 20; width: min(320px, 80vw); padding: 1rem 1.1rem; border-radius: 14px; background: var(--foret); color: #e9e7e1; font: 400 var(--t-sm)/1.5 var(--sans); box-shadow: var(--ombre); opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s; }
.info__bulle strong { color: var(--blanc); }
.info__bulle a { display: inline-block; margin-top: 0.5rem; color: var(--moutarde); font-weight: 600; }
.info__bulle::before { content: ""; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; background: var(--foret); transform: translateX(-50%) rotate(45deg); }
.info__bouton[aria-expanded="true"] + .info__bulle, .info:hover .info__bulle { opacity: 1; visibility: visible; }
@media (max-width: 600px) { .info__bulle { left: auto; right: -2rem; transform: none; } .info__bulle::before { left: auto; right: 2.3rem; } }

/* --- Pages marques ------------------------------------------------------------------ */
.marque-bandeau { padding: 0 0 2.5rem; }
.marque-bandeau h2 { font-size: var(--t-xl); margin-bottom: 1rem; }
.marque-bandeau__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.marque-bandeau .chiffre__valeur small { font-size: 0.45em; color: var(--feutre); }
.marque-bandeau__details { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1.4rem; }
.marque-bandeau__details h3 { font-size: var(--t-md); margin-bottom: 0.7rem; }
.marque-bandeau .bulles span { display: inline-block; padding: 0.55rem 0.9rem; border: 1px solid var(--trait); border-radius: 999px; background: var(--blanc); font: 500 var(--t-sm)/1 var(--sans); }
.marque-bandeau .bulles small { color: var(--bleu); margin-left: 0.2rem; }
@media (max-width: 800px) { .marque-bandeau__grille, .marque-bandeau__details { grid-template-columns: minmax(0, 1fr); } }

/* --- Zoom plein écran ----------------------------------------------------------------- */
.zoom { position: fixed; inset: 0; z-index: 60; background: rgba(29, 30, 33, 0.94); display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; padding: 2rem 1rem; }
.zoom[hidden] { display: none; }
.zoom__image { max-width: 100%; max-height: 86vh; margin: 0 auto; object-fit: contain; border-radius: 10px; background: #ececec; }
.zoom__nav, .zoom__fermer { border: 0; background: rgba(255,255,255,.08); color: #fff; width: 52px; height: 52px; border-radius: 50%; font: 400 2rem/1 var(--sans); cursor: pointer; display: grid; place-items: center; }
.zoom__nav:hover, .zoom__fermer:hover { background: var(--moutarde); color: var(--anthracite); }
.zoom__fermer { position: absolute; top: 1rem; right: 1rem; }
.zoom__compteur { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center; color: #d6d3cc; font: 500 var(--t-sm)/1 var(--sans); margin: 0; }
body.zoom-ouvert { overflow: hidden; }
@media (max-width: 700px) { .zoom { grid-template-columns: 0 minmax(0, 1fr) 0; } .zoom__nav { display: none; } }

.auteur-page__tete { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 2.5rem; align-items: center; padding: 1rem 0 2.5rem; }
.auteur-page__tete img { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; border: 4px solid var(--moutarde); }
.auteur-page__tete h1 { font-size: clamp(2.4rem, 1.4rem + 3vw, 4rem); margin-bottom: 0.3em; }
.auteur-page .bulles a { display: inline-block; }
@media (max-width: 700px) { .auteur-page__tete { grid-template-columns: minmax(0, 1fr); } .auteur-page__tete img { width: 120px; height: 120px; } }

/* --- Comparateur libre ----------------------------------------------------------------- */
.carte__comparer { position: absolute; left: 0.7rem; bottom: calc(100% - 0.7rem); transform: translateY(100%); z-index: 2; display: none; }
.carte__comparer { position: relative; left: auto; bottom: auto; transform: none; display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start; z-index: 1; font: 500 var(--t-xs)/1 var(--sans); color: var(--feutre); order: 10; cursor: pointer; }
.carte__comparer input { accent-color: var(--bleu); width: 16px; height: 16px; margin: 0; }
.barre-comparer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 36; background: var(--foret); color: var(--blanc); box-shadow: 0 -12px 30px -18px rgba(0,0,0,.6); }
.barre-comparer__contenu { display: flex; align-items: center; gap: 1rem; min-height: 68px; }
.barre-comparer__noms { flex: 1; font: 500 var(--t-sm)/1.3 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-comparer .bouton--discret { color: var(--blanc); border-color: rgba(255,255,255,.3); }
.barre-comparer .bouton--marchand { background: var(--moutarde); color: var(--anthracite); }
.barre-comparer .est-inactif { opacity: 0.5; pointer-events: none; }
.comparer__grille { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 1.4rem; margin-bottom: 2rem; }
.comparer__col { position: relative; display: grid; gap: 0.6rem; align-content: start; }
.comparer__col .bouton { justify-self: start; }
.comparer__table th[scope=row] { width: 18%; }
.comparer__liste { margin: 0; padding-left: 1rem; }
@media (max-width: 700px) { .comparer__grille { grid-template-columns: repeat(var(--n), minmax(200px, 1fr)); overflow-x: auto; } }

/* Voir chez moi (AR) */
.voir-chez-moi { margin-top: 0.8rem; width: 100%; }
.voir-chez-moi svg { color: var(--bleu); }
.ar { width: min(920px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 0; border: 0; border-radius: 18px; background: var(--platre); color: var(--anthracite); }
.ar::backdrop { background: rgba(37, 39, 43, 0.72); }
.ar__tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--trait); }
.ar__tete p { margin: 0; }
.ar__fermer { width: 40px; height: 40px; border: 0; background: transparent; font-size: 1.6rem; cursor: pointer; color: var(--anthracite); }
.ar__scene { aspect-ratio: 4 / 3; max-height: 62dvh; background: linear-gradient(var(--platre), #e2e0d9); }
.ar__scene model-viewer { width: 100%; height: 100%; --poster-color: transparent; }
.ar__mobile { padding: 1rem 1.1rem 1.2rem; display: grid; gap: 0.8rem; }
.ar__mobile[hidden], .ar__lancer[hidden], .ar__non[hidden], .ar__aide[hidden] { display: none; }
.ar__lancer { width: 100%; min-height: 54px; background: var(--moutarde); color: var(--anthracite); font-size: var(--t-md); text-decoration: none; }
.ar__lancer img { width: 28px; height: 20px; object-fit: contain; }
.ar__non p { margin: 0 0 0.7rem; font-size: var(--t-sm); }
.ar__aide { margin: 0; font-size: var(--t-sm); color: var(--gris, #5d5f63); }

/* Sélections de comparatifs : sauts vers les deux sections */
.sel-sauts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin: 0 0 1.6rem; }
.sel-saut { display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.2rem; border: 1px solid var(--trait); border-radius: 14px; background: var(--blanc); color: var(--anthracite); text-decoration: none; transition: border-color 0.15s ease; }
.sel-saut:hover { border-color: var(--moutarde); }
.sel-saut strong { font: 650 var(--t-md)/1.2 var(--sans); }
.sel-saut .num { font-weight: 700; color: var(--bleu); }
.sel-saut__vs { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--foret); color: var(--moutarde); font: italic 600 1rem/1 var(--serif); }
.sel-saut__vs--note { background: var(--moutarde); color: var(--anthracite); font-style: normal; }
.sel-section { scroll-margin-top: 90px; margin-top: 2.6rem; }
.sel-section > h2 { margin-bottom: 1.2rem; }
.sel-collection { margin: -0.4rem 0 1.2rem; color: var(--feutre); }
.sel-collection a { color: var(--bleu); font-weight: 600; }
.sel-carte { display: contents; }
.sel-carte[hidden] { display: none; }
.sel-affiner { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--trait); }
.sel-affiner ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sel-affiner a { display: inline-block; padding: 0.5rem 0.9rem; border: 1px solid var(--trait); border-radius: 999px; text-decoration: none; color: var(--anthracite); font: 500 var(--t-sm)/1 var(--sans); }
.sel-affiner a:hover { border-color: var(--moutarde); }
a.pilule { text-decoration: none; display: inline-block; }
.pilule.est-vide { opacity: 0.45; }
@media (max-width: 640px) { .sel-sauts { grid-template-columns: minmax(0, 1fr); } }

/* Ordre : « Meilleurs » d'abord dès qu'il est affiché, puis « Comparatifs » (ordre du document). */
.sel-sections { display: flex; flex-direction: column; }
.sel-sauts { margin: 1.2rem 0 1rem; }
.sel-sauts[hidden] { display: none; }
.sel-saut__detail { display: block; font: 400 var(--t-sm)/1.3 var(--sans); color: var(--feutre); margin-top: 0.2rem; }
.sel-affiner-barre { display: flex; flex-wrap: wrap; align-items: end; gap: 0.8rem 1.4rem; padding: 1rem 1.2rem; margin: 0 0 0.6rem; border: 1px solid var(--trait); border-radius: 14px; background: var(--blanc); font: 500 var(--t-sm)/1.2 var(--sans); }
.sel-affiner-barre label { display: grid; gap: 0.4rem; }
.sel-affiner-barre select { min-height: 40px; padding: 0 0.7rem; border: 1px solid var(--trait); border-radius: var(--r-ctl); background: var(--platre); font: inherit; color: var(--anthracite); }
.sel-affiner-barre__largeur { flex: 1 1 240px; }
.sel-affiner-barre__largeur input { width: 100%; accent-color: var(--moutarde); }
.sel-affiner-barre strong { color: var(--bleu); }

/* Mon salon */
.salon__outil { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 1.6rem; margin: 1.6rem 0 2.4rem; }
.salon__mesures { display: grid; gap: 1rem; align-content: start; padding: 1.2rem; border: 1px solid var(--trait); border-radius: 14px; background: var(--blanc); }
.salon__type { border: 0; padding: 0; margin: 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.salon__type legend { font-weight: 650; margin-bottom: 0.5rem; }
.salon__champ { display: grid; gap: 0.35rem; font-weight: 600; }
.salon__champ span { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }
.salon__champ input[type=number] { width: 7rem; min-height: 44px; padding: 0 0.7rem; border: 1px solid var(--trait); border-radius: var(--r-ctl); font: 600 var(--t-md)/1 var(--sans); }
.salon__champ--case { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }
.salon__aide { margin: 0; font-size: var(--t-sm); color: var(--feutre); }
.salon__plan { margin: 0; padding: 1rem; border: 1px solid var(--trait); border-radius: 14px; background: #f7f6f2; }
.salon__plan svg { width: 100%; height: auto; display: block; }
.salon__plan figcaption { font-size: var(--t-sm); margin-top: 0.6rem; }
.salon__mur { fill: none; stroke: var(--anthracite); stroke-width: 5; stroke-linecap: square; }
.salon__sol { fill: rgba(214, 166, 43, 0.08); stroke: var(--moutarde); stroke-dasharray: 4 4; }
.salon__cote { fill: none; stroke: var(--bleu); stroke-width: 1; }
.salon__texte { font: 600 11px var(--sans); fill: var(--bleu); }
.salon__canape { fill: var(--foret); opacity: 0.85; }
.salon__canape.est-trop-grand { fill: #b3452f; }
.salon__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.salon__actions .bouton { min-height: 38px; padding: 0 0.9rem; }
.salon__carte.est-choisi { outline: 2px solid var(--moutarde); outline-offset: 4px; border-radius: 14px; }
@media (max-width: 800px) { .salon__outil { grid-template-columns: minmax(0, 1fr); } }
.pastille-couleur { display: inline-block; width: 0.85em; height: 0.85em; margin-right: 0.45em; vertical-align: -0.08em; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }

.ar__bureau { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; align-items: center; padding: 2rem; }
.ar__bureau[hidden], .ar__scene[hidden], .ar__aide[hidden] { display: none; }
.ar__photo { margin: 0; display: grid; gap: 0.8rem; }
.ar__photo img { width: 100%; height: auto; max-height: 340px; object-fit: contain; }
.ar__qr { text-align: center; }
.ar__qr-code { width: 190px; height: 190px; margin: 0 auto 1rem; padding: 10px; background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--trait); }
.ar__qr-code svg { width: 100%; height: 100%; display: block; }
.ar__qr p { margin: 0.3rem 0; font-size: var(--t-sm); }
.ar__qr p strong { font-size: var(--t-md); }
@media (max-width: 700px) { .ar__bureau { grid-template-columns: minmax(0, 1fr); padding: 1.2rem; } }
@media (min-width: 1101px) { #mega-canapes .mega__colonnes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Filtres : étiquettes des filtres actifs, groupes longs repliés */
.filtres-actifs { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1.2rem; }
.filtres-actifs[hidden] { display: none; }
.puce { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 36px; padding: 0 0.85rem; border: 1px solid var(--foret); border-radius: 999px; background: var(--foret); color: var(--blanc); font: 500 var(--t-sm)/1 var(--sans); cursor: pointer; }
.puce span[aria-hidden] { color: var(--moutarde); font-size: 1.1em; }
.puce:hover { background: var(--anthracite); }
.puce--tout { background: transparent; color: var(--anthracite); border-color: var(--trait); }
.filtre--long.est-replie .filtre__option:nth-of-type(n+7) { display: none; }
.filtre__plus { margin-top: 0.3rem; padding: 0.4rem 0; border: 0; background: none; color: var(--bleu); font: 600 var(--t-sm)/1 var(--sans); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
a.format--lien { color: inherit; text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; }
a.format--lien:hover .format__bouton { border-color: var(--anthracite); background: var(--anthracite); color: var(--blanc); }

.ar__note { margin: 0; font-size: var(--t-sm); color: var(--feutre); }
.ar__copier { border: 0; background: none; padding: 0; color: var(--bleu); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.ar-camera { position: fixed; inset: 0; z-index: 10; background: #000; overflow: hidden; touch-action: none; }
.ar-camera[hidden] { display: none; }
.ar-camera video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ar-camera__canape { position: absolute; max-width: none; height: auto; filter: drop-shadow(0 18px 14px rgba(0, 0, 0, 0.45)); cursor: grab; user-select: none; -webkit-user-drag: none; }
.ar-camera__viseur { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid var(--moutarde); border-radius: 50%; pointer-events: none; }
.ar-camera__haut, .ar-camera__bas { position: absolute; left: 0; right: 0; padding: 14px 16px; color: #fff; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); }
.ar-camera__haut { top: 0; padding-top: calc(14px + env(safe-area-inset-top, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ar-camera__haut p { margin: 0; font: 600 var(--t-md)/1.3 var(--sans); }
.ar-camera__bas { bottom: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)); font: 400 var(--t-sm)/1.4 var(--sans); }
.ar-camera__bas label { display: grid; gap: 0.4rem; }
.ar-camera__bas input { width: 100%; accent-color: var(--moutarde); }
.ar-camera__bas p { margin: 0.5rem 0 0; opacity: 0.85; }
.ar__fermer--clair { color: #fff; }

/* Consentement aux cookies : carte plâtre, trait de cote, refus aussi visible que l'accord */
.consentement { position: fixed; left: 24px; bottom: 24px; z-index: 60; width: min(400px, calc(100vw - 32px)); padding: 1.4rem 1.4rem 1.1rem; background: var(--platre); color: var(--anthracite); border: 1px solid var(--trait); border-radius: 18px; box-shadow: 0 24px 60px rgba(37, 39, 43, 0.22); display: grid; gap: 0.8rem; opacity: 0; transform: translateY(16px); transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.1, 1); }
.consentement.est-visible { opacity: 1; transform: none; }
.consentement__cote { display: flex; align-items: center; gap: 0.5rem; color: var(--bleu); font: 600 var(--t-xs)/1 var(--sans); letter-spacing: 0.04em; }
.consentement__cote::before, .consentement__cote::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.consentement__cote i { width: 1px; height: 10px; background: currentColor; }
.consentement__titre { margin: 0; font: 700 var(--t-lg)/1.2 var(--sans); text-wrap: balance; }
.consentement__texte { margin: 0; font: 400 var(--t-sm)/1.55 var(--serif); color: var(--anthracite); }
.consentement__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.2rem; }
.consentement__oui { background: var(--moutarde); color: var(--anthracite); border-color: var(--moutarde); font-weight: 700; }
.consentement__oui:hover { background: var(--anthracite); border-color: var(--anthracite); color: var(--blanc); }
.consentement__non { background: transparent; color: var(--anthracite); border-color: var(--anthracite); font-weight: 700; }
.consentement__non:hover { background: var(--anthracite); color: var(--blanc); }
.consentement__lien { justify-self: start; font: 500 var(--t-xs)/1 var(--sans); color: var(--feutre); text-underline-offset: 3px; }
.pied__cookies { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.pied__cookies:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .consentement { left: 0; right: 0; bottom: 0; width: auto; border-radius: 20px 20px 0 0; padding-bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .consentement { transition: none; } }
.consentement[hidden], .ar-camera[hidden] { display: none; }

/* --- Menu mobile : tiroir anthracite, tout visible d'un coup ------------------ */
.tiroir { display: none; }
@media (max-width: 1100px) {
  body.menu-ouvert { overflow: hidden; }
  body.menu-ouvert .consentement { display: none; }
  body.menu-ouvert .entete { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--foret); border-color: transparent; }
  body.menu-ouvert .entete .marque-site, body.menu-ouvert .entete .reseaux a { color: var(--platre); }
  body.menu-ouvert .entete .bouton-menu { background: var(--moutarde); border-color: var(--moutarde); color: var(--anthracite); }
  .nav-principale { display: block; position: fixed; inset: var(--haut-entete, 64px) 0 0 0; max-height: none; margin: 0; padding: 0.4rem var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px)); border: 0; background: var(--foret); color: var(--platre); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; opacity: 0; transition: opacity 0.22s ease, visibility 0s linear 0.22s; z-index: 50; }
  .nav-principale.est-ouvert { visibility: visible; opacity: 1; transition: opacity 0.22s ease; }
  .nav-principale__liste { display: none; }
  .tiroir { display: grid; gap: 1.6rem; }
  .tiroir a { color: inherit; text-decoration: none; }
  .tiroir__une { position: relative; display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; background: #3a3c42; }
  .tiroir__une img { width: 100%; height: 100%; object-fit: cover; }
  .tiroir__une-texte { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1.1rem 1rem; background: linear-gradient(transparent, rgba(24, 25, 28, 0.82)); display: grid; gap: 0.2rem; }
  .tiroir__une-texte small { font: 600 var(--t-xs)/1 var(--sans); color: var(--moutarde); }
  .tiroir__une-texte strong { font: 700 1.45rem/1.1 var(--sans); letter-spacing: -0.01em; color: #fff; }
  .tiroir__titre { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.75rem; font: 600 var(--t-sm)/1 var(--sans); color: rgba(239, 238, 234, 0.72); }
  .tiroir__titre::before { content: ""; width: 18px; height: 9px; border-left: 1px solid var(--moutarde); border-right: 1px solid var(--moutarde); background: linear-gradient(var(--moutarde), var(--moutarde)) center / 100% 1px no-repeat; }
  .tiroir__pastilles { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .tiroir__pastille { padding: 0.62rem 1rem; border: 1px solid rgba(239, 238, 234, 0.2); border-radius: 999px; font: 500 var(--t-sm)/1 var(--sans); transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
  .tiroir__pastille::first-letter { text-transform: uppercase; }
  .tiroir__pastille:active, .tiroir__pastille:hover { background: var(--moutarde); border-color: var(--moutarde); color: var(--anthracite); }
  .tiroir__marques { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
  .tiroir__marques a { display: block; padding: 0.7rem 0; border-bottom: 1px solid rgba(239, 238, 234, 0.12); font: 500 var(--t-md)/1.2 var(--sans); }
  .tiroir__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .tiroir__carte { display: grid; align-content: end; gap: 0.3rem; min-height: 108px; padding: 1rem; border-radius: 16px; background: var(--platre); color: var(--anthracite) !important; }
  .tiroir__carte:first-child { background: var(--moutarde); }
  .tiroir__carte small { font: 600 var(--t-xs)/1 var(--sans); color: var(--bronze, #8c680c); }
  .tiroir__carte:first-child small { color: rgba(37, 39, 43, 0.7); }
  .tiroir__carte strong { font: 700 var(--t-md)/1.15 var(--sans); }
  .tiroir__mag { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0.9rem; align-items: center; padding: 0.6rem; border-radius: 16px; background: rgba(239, 238, 234, 0.06); }
  .tiroir__mag img { width: 112px; height: 72px; object-fit: cover; border-radius: 10px; }
  .tiroir__mag span { display: grid; gap: 0.25rem; }
  .tiroir__mag small { font: 600 var(--t-xs)/1 var(--sans); color: var(--moutarde); }
  .tiroir__mag strong { font: 600 var(--t-sm)/1.3 var(--sans); }
  .tiroir__outils { display: grid; gap: 0; border-top: 1px solid rgba(239, 238, 234, 0.12); }
  .tiroir__outils a { padding: 0.9rem 0; border-bottom: 1px solid rgba(239, 238, 234, 0.12); font: 500 var(--t-sm)/1.2 var(--sans); color: rgba(239, 238, 234, 0.85) !important; }
}
@media (max-width: 1100px) and (prefers-reduced-motion: reduce) { .nav-principale, .nav-principale.est-ouvert { transition: none; } }

/* Grilles de canapés sur mobile : 2 par ligne, cartes compactes (Romain, 27/09). */
@media (max-width: 640px) {
  .grille-produits, .duels-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 0.8rem; }
  .grille-produits .carte { gap: 0.4rem; }
  .grille-produits .carte__photo { border-radius: 12px; }
  .grille-produits .carte__titre, .duels-hub .duel-tuile__noms { font-size: var(--t-sm); line-height: 1.25; }
  .grille-produits .carte__variante { font-size: var(--t-xs); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .grille-produits .carte__pied { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  .grille-produits .carte__prix { font-size: var(--t-md); }
  .grille-produits .carte__note { font-size: var(--t-xs); }
  .grille-produits .carte__pastille { top: 0.4rem; right: 0.4rem; min-width: 36px; height: 36px; font-size: var(--t-sm); }
  .grille-produits .carte__cote { font-size: 0.7rem; }
  .grille-produits .carte__comparer { font-size: var(--t-xs); }
  .grille-produits .repere-choix { font-size: 0.65rem; padding: 0.25rem 0.5rem; }
}

/* Fiche : lien méthodologie près de la marque, encart « Comment cette note est calculée » */
.achat__methodo { margin-left: 0.8rem; font: 500 var(--t-sm)/1 var(--sans); color: var(--feutre); text-decoration: underline; text-decoration-color: var(--trait); text-underline-offset: 3px; }
.achat__methodo:hover { color: var(--bleu); text-decoration-color: currentColor; }
.calcul-note { margin: 0.2rem 0 1rem; border-top: 1px solid var(--trait); padding-top: 0.8rem; }
.calcul-note summary { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; list-style: none; font: 600 var(--t-sm)/1.2 var(--sans); color: var(--anthracite); }
.calcul-note summary::-webkit-details-marker { display: none; }
.calcul-note__icone { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--trait); font: 700 0.75rem/1 var(--sans); }
.calcul-note[open] .calcul-note__icone { background: var(--moutarde); }
.calcul-note__corps { margin-top: 0.8rem; padding: 1rem 1.1rem; border-radius: 14px; background: var(--blanc); border: 1px solid var(--trait); font: 400 var(--t-sm)/1.55 var(--serif); display: grid; gap: 0.6rem; }
.calcul-note__corps p { margin: 0; }
.calcul-note__corps ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; }
.calcul-note__n { color: var(--feutre); font-size: 0.92em; }
.calcul-note__corps a { font: 600 var(--t-sm)/1 var(--sans); color: var(--bleu); }
/* The fixed buy bar never hides the end of the page (legal footer). */
body.avec-barre-achat { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 700px) { body.avec-barre-achat { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }

/* Fiche : bouton marchand moutarde, au-dessus de la ligne de flottaison (Romain, 27/09) */
.achat__cta { margin: 0.2rem 0 1.2rem; }
.achat .achat__cta .bouton--marchand { min-height: 58px; background: var(--moutarde); color: var(--anthracite); font-size: var(--t-md); font-weight: 700; border-radius: 999px; box-shadow: 0 10px 24px -12px rgba(140, 104, 12, 0.7); }
.achat .achat__cta .bouton--marchand:hover { background: var(--anthracite); color: var(--blanc); }
@media (min-width: 901px) { .achat__titre { font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 1.08; } }

/* Méthodologie */
.methodo__surtitre { margin: 0 0 0.6rem; font: 600 var(--t-sm)/1 var(--sans); color: var(--bleu); }
.methodo__chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; margin: 0.6rem 0 2.6rem; }
.methodo__chiffres div { display: grid; gap: 0.3rem; padding: 1.1rem 1.2rem; border: 1px solid var(--trait); border-radius: 14px; background: var(--blanc); }
.methodo__chiffres strong { font: 700 1.6rem/1.1 var(--sans); color: var(--anthracite); }
.methodo__chiffres span { font: 400 var(--t-sm)/1.3 var(--sans); color: var(--feutre); }
.methodo__etapes { display: grid; gap: 0.8rem; padding-left: 1.3rem; }
.methodo__etapes li::marker { color: var(--bleu); font-weight: 700; }
.methodo__grille { display: grid; gap: 0.6rem; margin: 1rem 0 1.4rem; }
.methodo__grille > div { padding: 0.9rem 1.1rem; border-left: 3px solid var(--moutarde); background: var(--blanc); border-radius: 0 12px 12px 0; }
.methodo__grille dt { font: 700 var(--t-md)/1.2 var(--sans); margin-bottom: 0.3rem; }
.methodo__grille dd { margin: 0; }
.methodo__moy { display: block; margin-top: 0.3rem; font: 500 var(--t-sm)/1.3 var(--sans); color: var(--bleu); }
.pied__prix { font-style: italic; color: rgba(239, 238, 234, 0.45); font-size: var(--t-xs); }
/* Sommaire des guides : replié sur mobile, il doit se voir dépliable. */
.sommaire-guide summary { display: flex; align-items: center; gap: 0.5rem; }
.sommaire-guide__n { font-weight: 400; color: var(--feutre); }
.sommaire-guide summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.6px solid var(--bleu); border-bottom: 1.6px solid var(--bleu); transform: translateY(-3px) rotate(45deg); transition: transform 0.2s ease; }
.sommaire-guide details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
@media (max-width: 1000px) { .sommaire-guide details:not([open]) summary { margin-bottom: 0; } }