/* Millenium 7 — feuille de style unique.
   Identité : encre, ivoire, un seul accent orange signal. Titres en Instrument Serif,
   texte en Inter. Pas de framework : ~30 Ko, aucune requête tierce. */

@font-face { font-family: 'Inter'; src: url(fonts/inter-var.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url(fonts/instrument-serif-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url(fonts/instrument-serif-400-italic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --encre: #0d0d0c;
  --encre-2: #2a2926;
  --gris: #6b665d;
  --gris-clair: #9a948a;
  --ivoire: #f6f3ed;
  --ivoire-2: #ede7dc;
  --carte: #fbfaf7;
  --ligne: #dcd4c6;
  --ligne-douce: #e8e2d7;
  --accent: #ff5a1f;
  --accent-texte: #c43d0a;
  --vert: #1d7a4c;
  --rouge: #b42318;
  --sombre: #121211;
  --sombre-2: #1c1b19;
  --sombre-ligne: #34322e;
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --rayon: 14px;
  --rayon-petit: 8px;
  --largeur: 1280px;
  --gouttiere: clamp(16px, 4vw, 40px);
  --ombre: 0 1px 2px rgba(13, 13, 12, .04), 0 8px 24px -12px rgba(13, 13, 12, .18);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ivoire);
  color: var(--encre);
  font: 400 16px/1.6 var(--sans);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: #fff; }

.conteneur { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--encre); color: #fff; padding: 10px 14px; border-radius: 6px; }
.evitement:focus { top: 12px; }

/* ——— Typographie partagée ——— */
.sur-titre {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gris);
}
.sur-titre__sep::before { content: ''; display: inline-block; width: 14px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 10px; opacity: .6; }
.type { color: var(--encre); }
.type--test { color: var(--accent-texte); }
.chapo { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--encre-2); max-width: 62ch; }
.lien-fleche {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 14px; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.lien-fleche svg { width: 16px; height: 16px; transition: transform .25s ease; }
.lien-fleche:hover svg, a:hover > .lien-fleche svg { transform: translateX(4px); }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--encre);
  background: var(--encre); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.bouton:hover { background: var(--encre-2); }
.bouton svg { width: 16px; height: 16px; }
.bouton--petit { height: 36px; padding: 0 16px; font-size: 13.5px; }
.bouton--accent { background: var(--accent); border-color: var(--accent); color: var(--encre); }
.bouton--accent:hover { background: #ff7743; border-color: #ff7743; }
.bouton--ligne { background: transparent; color: var(--encre); }
.bouton--ligne:hover { background: var(--encre); color: #fff; }

/* ——— Bandeau prototype ——— */
.bandeau-demo { background: var(--accent); color: var(--encre); font-size: 13px; text-align: center; padding: 7px var(--gouttiere); line-height: 1.4; }
.bandeau-demo a { font-weight: 600; }

/* ——— En-tête ——— */
.logo { display: inline-flex; align-items: flex-start; gap: 3px; text-decoration: none; color: var(--encre); line-height: 1; }
.logo__mot { font-family: var(--serif); font-size: 31px; letter-spacing: -.01em; }
.logo__sept {
  display: inline-grid; place-items: center; width: 19px; height: 19px; margin-top: 2px;
  background: var(--accent); color: var(--encre); border-radius: 4px;
  font: 700 12.5px/1 var(--sans);
}
.logo--clair { color: #fff; }

.entete { position: sticky; top: 0; z-index: 40; background: rgba(246, 243, 237, .88); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.entete.est-defile { border-bottom-color: var(--ligne); }
.entete__barre { display: flex; align-items: center; gap: 28px; height: 72px; }
.entete__nav { display: flex; gap: 4px; margin-left: 8px; }
.entete__nav a {
  position: relative; padding: 8px 12px; font-size: 14.5px; font-weight: 500; text-decoration: none; color: var(--encre-2); border-radius: 999px;
  transition: background .2s ease, color .2s ease;
}
.entete__nav a:hover { background: var(--ivoire-2); color: var(--encre); }
.entete__nav a[aria-current] { color: var(--encre); }
.entete__nav a[aria-current]::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--accent); border-radius: 2px; }
.entete__bp { display: inline-flex; align-items: center; gap: 7px; }
.entete__bp::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(255, 90, 31, .18); }
.entete__outils { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.entete__bouton { display: inline-flex; align-items: center; gap: 8px; height: 40px; min-width: 40px; justify-content: center; padding: 0 10px; border: 0; background: transparent; border-radius: 999px; }
.entete__bouton:hover { background: var(--ivoire-2); }
.entete__bouton svg { width: 21px; height: 21px; }
.entete__chercher { border: 1px solid var(--ligne); padding: 0 8px 0 12px; }
.entete__chercher kbd { font: 500 11px/1 var(--sans); color: var(--gris); border: 1px solid var(--ligne); border-radius: 5px; padding: 4px 5px; }
.entete__menu { display: none; margin-left: -10px; }
.progression { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--accent); }

.menu { position: fixed; inset: 0; z-index: 60; background: var(--sombre); color: #fff; overflow-y: auto; padding: 0 var(--gouttiere) 40px; }
.menu__tete { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.menu__tete .entete__bouton:hover { background: var(--sombre-2); }
.menu__nav { display: grid; gap: 28px; padding-top: 18px; }
.menu__vert { font-family: var(--serif); font-size: 40px; line-height: 1; text-decoration: none; }
.menu__vert--accent { color: var(--accent); }
.menu__groupe ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.menu__groupe li a { color: #c9c4ba; text-decoration: none; font-size: 15px; }

/* ——— Accueil : manchette et une ——— */
.manchette { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--ligne); font-size: 12.5px; color: var(--gris); }
.manchette__date::first-letter { text-transform: uppercase; }
.manchette__slogan { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--encre); text-align: center; }
.manchette__compte { text-align: right; }

.une { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 40px; padding-block: 36px 56px; }
.une__cote { display: flex; flex-direction: column; }
.une__cote-titre { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding-bottom: 14px; border-bottom: 2px solid var(--encre); }

/* ——— Cartes ——— */
.carte__lien { display: flex; flex-direction: column; gap: 16px; height: 100%; text-decoration: none; }
.carte__media { position: relative; overflow: hidden; border-radius: var(--rayon); background: var(--ivoire-2); aspect-ratio: 16 / 10; }
.carte__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.carte__lien:hover .carte__media img { transform: scale(1.035); }
.carte__note {
  position: absolute; left: 12px; bottom: 12px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--encre); color: var(--accent); font: 400 20px/1 var(--serif);
}
.carte__texte { display: flex; flex-direction: column; gap: 9px; }
.carte__titre { font-family: var(--serif); font-size: 25px; line-height: 1.1; letter-spacing: -.005em; text-wrap: balance; }
.carte__lien:hover .carte__titre { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.carte__extrait { color: var(--encre-2); font-size: 15px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.carte__meta { font-size: 12.5px; color: var(--gris); }

.carte--une .carte__media { aspect-ratio: 16 / 10.5; }
.carte--une .carte__titre { font-size: clamp(36px, 4.2vw, 58px); line-height: 1; letter-spacing: -.015em; }
.carte--une .carte__extrait { font-size: 18px; -webkit-line-clamp: 4; max-width: 60ch; }
.carte--une .carte__note { width: 64px; height: 64px; font-size: 28px; left: 18px; bottom: 18px; }

.carte--grande .carte__titre { font-size: clamp(30px, 3vw, 40px); line-height: 1.03; }
.carte--grande .carte__media { aspect-ratio: 16 / 11; }

.carte--liste { padding-block: 18px; border-bottom: 1px solid var(--ligne); }
.carte--liste .carte__lien { flex-direction: row-reverse; justify-content: space-between; align-items: flex-start; gap: 18px; }
.carte--liste .carte__media { width: 112px; flex: none; aspect-ratio: 1; border-radius: var(--rayon-petit); }
.carte--liste .carte__titre { font-size: 21px; }
.carte--liste .carte__note { width: 32px; height: 32px; font-size: 15px; left: 6px; bottom: 6px; }

/* ——— Sections et grilles ——— */
.section { padding-block: 56px; }
.section__tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--ligne); }
.section__tete > div { display: grid; gap: 10px; }
.section__titre { font-family: var(--serif); font-size: clamp(34px, 3.6vw, 50px); line-height: 1; letter-spacing: -.015em; }
.section__tete--clair { border-color: var(--sombre-ligne); }
.section__tete--clair .sur-titre { color: #a39d92; }

.grille { display: grid; gap: 40px 28px; }
.grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rubrique__grille { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.rubrique__liste { display: flex; flex-direction: column; }
.rubrique__liste .carte--liste:first-child { padding-top: 0; }
.rubrique__liste .carte--liste .carte__lien { flex-direction: row; }
.rubrique__liste .carte--liste .carte__media { width: 168px; aspect-ratio: 4 / 3; }
.rubrique__liste .carte--liste .carte__titre { font-size: 23px; }

.rubrique { padding-block: 56px 24px; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 28px; }
.puces a, .puces button {
  display: inline-flex; align-items: center; height: 34px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--ligne);
  background: transparent; font-size: 13.5px; font-weight: 500; text-decoration: none; transition: all .2s ease;
}
.puces a:hover, .puces button:hover { border-color: var(--encre); }
.puces [aria-current], .puces [aria-pressed='true'] { background: var(--encre); border-color: var(--encre); color: #fff; }
.puces--clair a { border-color: rgba(255, 255, 255, .35); color: #fff; }
.puces--clair a:hover { background: #fff; color: var(--encre); }

/* ——— Section sombre et bons plans ——— */
.sombre { background: var(--sombre); color: #fff; }
.sombre .section__titre { color: #fff; }
.sombre__note { margin-top: 28px; font-size: 13.5px; color: #a39d92; max-width: 70ch; }
.bp {
  display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--rayon);
  background: var(--carte); color: var(--encre); border: 1px solid var(--ligne-douce);
}
.sombre .bp { background: var(--sombre-2); color: #fff; border-color: var(--sombre-ligne); }
.bp__haut { display: flex; justify-content: space-between; align-items: flex-start; }
.bp__remise { background: var(--accent); color: var(--encre); font-weight: 700; font-size: 13px; padding: 5px 9px; border-radius: 6px; }
.bp__nom { font-family: var(--serif); font-size: 23px; line-height: 1.08; }
.bp__nom span { display: block; font: 600 11.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin-bottom: 4px; }
.sombre .bp__nom span { color: #a39d92; }
.bp__raison { font-size: 14px; line-height: 1.5; color: var(--encre-2); flex: 1; }
.sombre .bp__raison { color: #cfc9be; }
.bp__prix { display: flex; align-items: baseline; gap: 10px; }
.bp__prix strong { font: 400 32px/1 var(--serif); }
.bp__prix s { color: var(--gris-clair); font-size: 15px; }
.bp__cta { width: 100%; }
.bp__fin { font-size: 12px; color: var(--gris); }
.sombre .bp__fin { color: #8d877d; }
.bp[hidden] { display: none; }

/* ——— Visuels produits (pictogramme + marque) ——— */
.visuel {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  aspect-ratio: 1; border-radius: var(--rayon); color: var(--encre);
  background: radial-gradient(120% 90% at 30% 15%, #fff 0%, var(--ivoire-2) 75%);
  border: 1px solid var(--ligne-douce);
}
.visuel svg { width: 44%; height: auto; stroke-width: 1.1; }
.visuel span { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
.visuel--petit { width: 64px; height: 64px; flex: none; border-radius: 12px; gap: 0; }
.visuel--petit svg { width: 34px; }
.visuel--petit span { display: none; }
.sombre .visuel { background: radial-gradient(120% 90% at 30% 15%, #2c2a27 0%, #1a1917 80%); border-color: var(--sombre-ligne); color: #fff; }

/* ——— Anneau de note ——— */
.anneau {
  --taille: 64px;
  position: relative; display: inline-grid; place-items: center; flex: none; width: var(--taille); height: var(--taille); border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--n) * 1%), var(--ligne) 0);
}
.anneau::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--encre); }
.anneau strong { position: relative; font: 400 23px/1 var(--serif); color: #fff; margin-top: -9px; }
.anneau span { position: absolute; bottom: 11px; font-size: 9px; font-weight: 600; color: #a39d92; letter-spacing: .04em; }
.anneau--grand { --taille: 104px; }
.anneau--grand::before { inset: 6px; }
.anneau--grand strong { font-size: 40px; margin-top: -10px; }
.anneau--grand span { bottom: 20px; font-size: 11px; }

/* ——— Rubriques : bannière et têtes de page ——— */
.banniere { position: relative; color: #fff; background: var(--sombre); overflow: hidden; }
.banniere__media { position: absolute; inset: 0; }
.banniere__media img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.banniere::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 13, 12, .1) 0%, rgba(13, 13, 12, .78) 100%); }
.banniere__texte { position: relative; z-index: 1; display: grid; gap: 18px; padding-block: 120px 44px; }
.banniere h1 { font-family: var(--serif); font-size: clamp(64px, 10vw, 140px); line-height: .9; letter-spacing: -.02em; }
.banniere__accroche { font-size: clamp(18px, 1.8vw, 22px); max-width: 52ch; color: #e8e3da; }
.banniere .puces { margin: 6px 0 0; }
.banniere .fil { color: #cfc9be; }

.tete-page { display: grid; gap: 18px; padding-block: 40px 28px; }
.tete-page h1 { font-family: var(--serif); font-size: clamp(48px, 7vw, 92px); line-height: .95; letter-spacing: -.02em; max-width: 18ch; }
.tete-page .puces { margin: 8px 0 0; }
.tete-page--404 { padding-block: 100px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.vide { color: var(--gris); }

.fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--gris); }
.fil li + li::before { content: '/'; margin-right: 6px; opacity: .5; }
.fil a { text-decoration: none; }
.fil a:hover { text-decoration: underline; }
.fil [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }

/* ——— Face-à-face ——— */
.faces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.face {
  display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: var(--rayon); text-decoration: none;
  background: var(--carte); border: 1px solid var(--ligne-douce); transition: transform .3s ease, box-shadow .3s ease;
}
.face:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
.face__noms { display: grid; gap: 4px; font-family: var(--serif); font-size: 30px; line-height: 1.02; flex: 1; }
.face__noms em { font-size: 20px; color: var(--accent-texte); }
.face__marques { font-size: 13px; color: var(--gris); }
.face .lien-fleche { align-self: flex-start; }

/* ——— Confiance ——— */
.confiance { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 56px; padding-block: 64px 80px; }
.confiance__intro { display: grid; gap: 18px; align-content: start; }
.confiance__intro .lien-fleche { justify-self: start; }
.piliers { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; counter-reset: pilier; }
.piliers li { display: grid; gap: 8px; padding: 22px 24px 26px 0; border-top: 1px solid var(--ligne); counter-increment: pilier; }
.piliers li::before { content: '0' counter(pilier); font: 400 15px/1 var(--serif); color: var(--accent-texte); }
.piliers strong { font-family: var(--serif); font-weight: 400; font-size: 25px; line-height: 1.1; }
.piliers span { color: var(--encre-2); font-size: 15px; }
.piliers--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }

/* ——— Pied de page et newsletter ——— */
.pied { background: var(--sombre); color: #d8d3ca; margin-top: 40px; }
.newsletter { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: end; padding-block: 72px; border-bottom: 1px solid var(--sombre-ligne); }
.newsletter__texte { display: grid; gap: 16px; }
.newsletter__texte .sur-titre { color: var(--accent); }
.newsletter h2 { font-family: var(--serif); color: #fff; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.02; letter-spacing: -.01em; }
.newsletter__ligne { display: flex; gap: 8px; padding: 6px; border: 1px solid var(--sombre-ligne); border-radius: 999px; background: var(--sombre-2); }
.newsletter input { flex: 1; min-width: 0; height: 46px; border: 0; background: transparent; color: #fff; font: inherit; font-size: 16px; padding: 0 16px; outline: none; }
.newsletter input::placeholder { color: #807a70; }
.newsletter__mention { margin-top: 12px; font-size: 12.5px; color: #8d877d; }
.newsletter__mention.est-ok { color: var(--accent); }
.pied__grille { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding-block: 56px 40px; }
.pied__marque { display: grid; gap: 14px; align-content: start; }
.pied__marque p { font-family: var(--serif); font-style: italic; font-size: 21px; color: #fff; max-width: 22ch; line-height: 1.2; }
.pied__titre { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8d877d; margin-bottom: 14px; }
.pied ul { list-style: none; display: grid; gap: 9px; }
.pied ul a { text-decoration: none; font-size: 14.5px; }
.pied ul a:hover { color: #fff; text-decoration: underline; }
.pied__bas { display: flex; justify-content: space-between; gap: 32px; padding-block: 24px 36px; border-top: 1px solid var(--sombre-ligne); font-size: 12.5px; color: #8d877d; }
.pied__bas p:first-child { max-width: 72ch; }

/* ——— Recherche ——— */
.recherche { position: fixed; inset: 0; z-index: 70; background: rgba(13, 13, 12, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; justify-content: center; padding: 12vh 16px 16px; }
.recherche[hidden] { display: none; }
.recherche__boite { width: min(680px, 100%); max-height: 70vh; display: flex; flex-direction: column; background: var(--carte); border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45); overflow: hidden; }
.recherche__champ { display: flex; align-items: center; gap: 12px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--ligne); }
.recherche__champ svg { width: 22px; color: var(--gris); flex: none; }
.recherche__champ input { flex: 1; height: 64px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 19px; color: var(--encre); }
.recherche__fermer { border: 1px solid var(--ligne); background: transparent; border-radius: 6px; font-size: 12px; padding: 4px 8px; color: var(--gris); }
.recherche__resultats { list-style: none; overflow-y: auto; padding: 8px; }
.recherche__resultats a { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: 10px; text-decoration: none; }
.recherche__resultats a:hover, .recherche__resultats a:focus { background: var(--ivoire-2); outline: none; }
.recherche__resultats img { width: 64px; height: 44px; object-fit: cover; border-radius: 6px; flex: none; }
.recherche__resultats strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.15; }
.recherche__resultats span { font-size: 12.5px; color: var(--gris); }
.recherche__vide { padding: 20px 24px; color: var(--gris); }

/* ——— Article ——— */
.article__tete { display: grid; gap: 22px; padding-block: 32px 32px; }
.article__titres { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.article__titres > div:first-child { display: grid; gap: 18px; }
.article h1 { font-family: var(--serif); font-size: clamp(42px, 5.6vw, 76px); line-height: .98; letter-spacing: -.02em; max-width: 20ch; text-wrap: balance; }
.article__note { display: grid; justify-items: center; gap: 10px; text-align: center; font-size: 13px; color: var(--gris); max-width: 160px; }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding-top: 18px; border-top: 1px solid var(--ligne); font-size: 13.5px; color: var(--gris); }
.auteur { display: inline-flex; align-items: center; gap: 10px; color: var(--encre); font-weight: 500; }
.avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--encre); color: var(--accent); font: 700 11px/1 var(--sans); letter-spacing: .02em; flex: none; }
.statut { display: inline-flex; align-items: center; gap: 6px; color: var(--vert); font-weight: 600; }
.statut::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.article__couverture { margin: 0 auto; }
.article__couverture img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: var(--rayon); }
.article__couverture figcaption { margin-top: 10px; font-size: 12px; color: var(--gris); text-align: right; }
.article__grille { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; padding-block: 40px 24px; }
.article__cote { position: relative; }
.collant { position: sticky; top: 96px; display: grid; gap: 24px; }
.cote__titre { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin-bottom: 12px; }
.cote__achat { padding: 20px; border-radius: var(--rayon); background: var(--carte); border: 1px solid var(--ligne-douce); }
.cote__achat .mini { border: 0; padding: 0; background: none; flex-wrap: wrap; }
.cote__achat .mini__prix { width: 100%; }
.sommaire ol { list-style: none; display: grid; gap: 2px; border-left: 1px solid var(--ligne); }
.sommaire a { display: block; padding: 6px 0 6px 16px; margin-left: -1px; font-size: 14px; line-height: 1.35; text-decoration: none; color: var(--gris); border-left: 2px solid transparent; }
.sommaire a:hover { color: var(--encre); }
.sommaire a.est-actif { color: var(--encre); border-left-color: var(--accent); font-weight: 500; }

.prose { font-size: 18px; line-height: 1.72; color: var(--encre-2); min-width: 0; }
.prose > * + * { margin-top: 1.1em; }
/* Les règles « texte » visent seulement les blocs Markdown (enfants directs) et restent
   à spécificité minimale : les composants (offres, sélection, verdict) gardent la main. */
.prose > h2 { font-family: var(--serif); color: var(--encre); font-size: clamp(32px, 3vw, 40px); line-height: 1.05; letter-spacing: -.01em; margin-top: 1.8em; }
.prose > h3 { font-weight: 650; color: var(--encre); font-size: 20px; line-height: 1.3; margin-top: 1.6em; }
.prose > h4 { font-weight: 650; color: var(--encre); font-size: 17px; margin-top: 1.4em; }
:where(.prose > p, .prose > ul, .prose > ol, .prose > .encart) strong { color: var(--encre); font-weight: 600; }
:where(.prose > p, .prose > ul, .prose > ol, .prose > .encart, .prose > .tableau) a { color: var(--encre); text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
:where(.prose > p, .prose > ul, .prose > ol, .prose > .encart, .prose > .tableau) a:hover { background: rgba(255, 90, 31, .12); }
:where(.prose > ul, .prose > ol) { padding-left: 1.2em; }
:where(.prose > ul, .prose > ol) > li + li { margin-top: .45em; }
:where(.prose > ul, .prose > ol) > li::marker { color: var(--accent-texte); }
.prose--page { max-width: 760px; padding-bottom: 56px; }
.transparence { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--rayon-petit); background: var(--ivoire-2); font-size: 13.5px !important; line-height: 1.5; color: var(--gris); }
.transparence svg { width: 16px; flex: none; margin-top: 2px; }
.transparence a { color: var(--gris); }
.encart { padding: 22px 26px; border-radius: var(--rayon); background: var(--carte); border: 1px solid var(--ligne-douce); border-left: 3px solid var(--accent); font-size: 16.5px; }
.encart > * + * { margin-top: .6em; }
.encart__titre { font-family: var(--serif); font-size: 23px; color: var(--encre); line-height: 1.15; }
.signature { display: flex; gap: 16px; align-items: flex-start; margin-top: 3em !important; padding-top: 28px; border-top: 1px solid var(--ligne); font-size: 15px; }
.signature .avatar { width: 48px; height: 48px; font-size: 14px; }
.credits { columns: 2; font-size: 15px; }

/* Tableaux */
.tableau { overflow-x: auto; border: 1px solid var(--ligne-douce); border-radius: var(--rayon); background: var(--carte); -webkit-overflow-scrolling: touch; }
.tableau table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.4; }
.tableau th, .tableau td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--ligne-douce); vertical-align: middle; }
.tableau thead th { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); background: var(--ivoire); white-space: nowrap; }
.tableau tbody th { font-weight: 600; color: var(--encre); min-width: 150px; }
.tableau tr:last-child > * { border-bottom: 0; }
.t-marque { display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.t-note { font: 400 22px/1 var(--serif); color: var(--encre); }
.t-prix { display: inline-flex; padding: 7px 12px; border-radius: 999px; background: var(--encre); color: #fff !important; text-decoration: none !important; font-weight: 600; white-space: nowrap; }
.t-prix:hover { background: var(--accent) !important; color: var(--encre) !important; }

/* Sélection en bref */
.selection { padding: 26px 28px; border-radius: var(--rayon); background: var(--encre); color: #fff; }
.selection__titre { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.selection ol { list-style: none; padding: 0; counter-reset: sel; }
.selection li { counter-increment: sel; display: flex; align-items: center; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--sombre-ligne); margin: 0 !important; }
.selection li:last-child { border-bottom: 0; padding-bottom: 0; }
.selection li::before { content: '0' counter(sel); font: 400 18px/1 var(--serif); color: #8d877d; width: 22px; }
.selection__nom { flex: 1; display: grid; gap: 2px; color: #fff !important; text-decoration: none !important; }
.selection__nom:hover strong { text-decoration: underline; }
.selection__label { font-size: 12px; color: #a39d92; font-weight: 500; }
.selection__nom strong { font-family: var(--serif); font-weight: 400; color: #fff; font-size: 21px; line-height: 1.15; }
.selection__prix { flex: none; padding: 9px 14px; border-radius: 999px; background: var(--accent); color: var(--encre) !important; font-weight: 700; font-size: 14px; text-decoration: none !important; white-space: nowrap; }
.selection__prix span { font-weight: 500; }
.selection__prix:hover { background: #fff !important; }

/* Boîte produit */
.produit { margin-top: 3em !important; padding: 28px; border-radius: 20px; background: var(--carte); border: 1px solid var(--ligne-douce); box-shadow: var(--ombre); font-size: 16px; line-height: 1.55; }
.produit + p { margin-top: 1.6em; }
.produit__tete { display: flex; align-items: center; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--ligne-douce); }
.produit__rang { font: 400 54px/.8 var(--serif); color: var(--accent); flex: none; letter-spacing: -.03em; }
.produit__titres { flex: 1; display: grid; gap: 4px; }
.produit__label { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-texte); }
.produit__nom { margin: 0; font-family: var(--serif); color: var(--encre); font-size: clamp(26px, 2.4vw, 32px); line-height: 1.05; }
.produit__nom span { color: var(--gris); }
.produit__grille { display: grid; grid-template-columns: 150px minmax(0, 1fr) 230px; gap: 24px; padding-top: 22px; align-items: start; }
.produit__resume { font-size: 17px; color: var(--encre); font-weight: 500; margin-bottom: 16px; }
.pour-contre { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pc__titre { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; }
.pc { list-style: none; padding: 0 !important; display: grid; gap: 7px; font-size: 14.5px; line-height: 1.4; }
.pc li { display: flex; gap: 8px; margin: 0 !important; }
.pc svg { width: 16px; height: 16px; flex: none; margin-top: 2px; stroke-width: 2.2; }
.pc--pour svg { color: var(--vert); }
.pc--contre svg { color: var(--rouge); }
.fiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin: 22px 0 0; border-radius: 10px; overflow: hidden; background: var(--ligne-douce); border: 1px solid var(--ligne-douce); }
.fiche div { background: var(--ivoire); padding: 11px 14px; }
.fiche dt { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.fiche dd { margin: 2px 0 0; font-size: 14.5px; color: var(--encre); font-weight: 500; }

/* Offres marchands */
.offres { display: grid; gap: 8px; }
.offres__titre { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.offre {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'm p' 'c c'; gap: 2px 8px; padding: 11px 14px; border-radius: 12px;
  border: 1px solid var(--ligne); text-decoration: none !important; color: var(--encre) !important; background: #fff; transition: border-color .2s ease, transform .2s ease;
}
.offre:hover { border-color: var(--encre); transform: translateY(-1px); background: #fff !important; }
.offre__marchand { grid-area: m; font-size: 14px; font-weight: 600; }
.offre__prix { grid-area: p; font-weight: 700; font-size: 15px; }
.offre__cta { grid-area: c; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--gris); }
.offre__cta svg { width: 12px; height: 12px; }
.offre--top { background: var(--encre); border-color: var(--encre); color: #fff !important; }
.offre--top .offre__cta { color: var(--accent); font-weight: 600; }
.offre--top:hover { background: var(--encre-2) !important; }
.offres__note { font-size: 11.5px; color: var(--gris-clair); line-height: 1.4; }
.offres--compact .offre__cta { display: none; }
.offres--compact .offre { grid-template-areas: 'm p'; padding: 10px 14px; }

/* Mini-produit */
.mini { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--rayon); background: var(--carte); border: 1px solid var(--ligne-douce); font-size: 15px; line-height: 1.35; }
.mini__texte { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mini__label { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-texte); }
.mini__nom { font-family: var(--serif); font-size: 20px; line-height: 1.1; color: var(--encre); }
.mini__nom span { color: var(--gris); }
.mini__meta { font-size: 13px; color: var(--gris); }
.mini__prix { display: grid; justify-items: center; gap: 1px; padding: 9px 16px; border-radius: 12px; background: var(--encre); color: #fff !important; text-decoration: none !important; flex: none; }
.mini__prix span { font-size: 11px; color: #a39d92; }
.mini__prix strong { color: #fff; font-size: 16px; }
.mini__prix:hover { background: var(--accent) !important; }
.mini__prix:hover span, .mini__prix:hover strong { color: var(--encre); }
.alternatives { display: grid; gap: 12px; }
.achat-encart { margin-block: 2em !important; }

/* Verdict (tests) */
.verdict { display: grid; gap: 24px; padding: 30px; border-radius: 20px; background: var(--encre); color: #e8e3da; font-size: 16px; line-height: 1.55; }
.verdict__tete { display: flex; gap: 24px; align-items: center; }
.verdict__tete .anneau::before { background: var(--sombre-2); }
.verdict__tete .anneau { background: conic-gradient(var(--accent) calc(var(--n) * 1%), var(--sombre-ligne) 0); }
.prose .verdict__titre { margin: 0 0 6px; color: var(--accent); font: 600 11.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.verdict__texte { font-family: var(--serif); font-size: 26px; line-height: 1.2; color: #fff; }
.verdict__notes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px; }
.barre { display: grid; grid-template-columns: 1fr 90px 34px; align-items: center; gap: 12px; font-size: 14px; }
.barre__piste { height: 4px; border-radius: 4px; background: var(--sombre-ligne); overflow: hidden; }
.barre__piste span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.barre strong { color: #fff; text-align: right; font-weight: 600; }
.verdict .pc__titre { color: #a39d92; }
.verdict .pour-contre { padding-block: 20px; border-block: 1px solid var(--sombre-ligne); }
.verdict .offres { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.verdict .offres__titre, .verdict .offres__note { grid-column: 1 / -1; color: #8d877d; }
.verdict .offre { background: var(--sombre-2); border-color: var(--sombre-ligne); color: #fff !important; }
.verdict .offre:hover { background: #24231f !important; border-color: #fff; }
.verdict .offre--top { background: var(--accent); border-color: var(--accent); color: var(--encre) !important; }
.verdict .offre--top .offre__cta { color: var(--encre); }
.verdict .offre--top:hover { background: #ff7743 !important; border-color: #ff7743; }

/* Duel (comparatifs) */
.duel { display: grid; gap: 18px; }
.duel__tete { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 24px; border-radius: 20px; background: var(--encre); color: #fff; }
.duel__produit { display: grid; justify-items: center; gap: 12px; text-align: center; }
.duel__produit .visuel { background: radial-gradient(120% 90% at 30% 15%, #2c2a27 0%, #1a1917 80%); border-color: var(--sombre-ligne); color: #fff; }
.duel__produit .anneau::before { background: var(--sombre-2); }
.duel__produit .anneau { background: conic-gradient(var(--accent) calc(var(--n) * 1%), var(--sombre-ligne) 0); }
.duel__nom { font-family: var(--serif); font-size: 23px; line-height: 1.1; }
.duel__nom span { display: block; font: 600 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #a39d92; }
.duel__vs { font: italic 400 34px/1 var(--serif); color: var(--accent); }
.duel__table td { width: 32%; }
.duel__table tfoot > * { font-weight: 700; color: var(--encre); background: var(--ivoire); }
.duel__table tfoot td { font: 400 24px/1 var(--serif); }
.gagne { display: inline-flex; align-items: center; gap: 6px; color: var(--vert); font-weight: 600; font-size: 13.5px; }
.gagne svg { width: 16px; height: 16px; stroke-width: 2.4; }
.egal { color: var(--gris); font-size: 13.5px; }

/* Barre d'achat collante (tests) */
.achat-collant { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding-block: 10px; background: rgba(251, 250, 247, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--ligne); transform: translateY(110%); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.achat-collant.est-visible { transform: none; }
.achat-collant .mini { max-width: 760px; margin-inline: auto; padding: 0; border: 0; background: none; }
.achat-collant .visuel--petit { width: 48px; height: 48px; }
.achat-collant .visuel--petit svg { width: 26px; }
@media (min-width: 1101px) { .achat-collant { display: none; } }
.a-lire { border-top: 1px solid var(--ligne); margin-top: 40px; }

/* ——— Apparition douce ——— */
@media (prefers-reduced-motion: no-preference) {
  .js .apparait { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
  .js .apparait.est-vu { opacity: 1; transform: none; }
}

/* ——— Responsive ——— */
@media (max-width: 1100px) {
  .entete__nav { display: none; }
  .entete__menu { display: inline-flex; }
  .entete__barre { gap: 12px; }
  .une { grid-template-columns: 1fr; gap: 28px; }
  .grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rubrique__grille { grid-template-columns: 1fr; gap: 24px; }
  .faces { grid-template-columns: 1fr; }
  .confiance { grid-template-columns: 1fr; gap: 32px; }
  .article__grille { grid-template-columns: 1fr; gap: 0; }
  .article__cote { display: none; }
  .produit__grille { grid-template-columns: 120px minmax(0, 1fr); }
  .produit__grille .offres { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .produit__grille .offres__titre, .produit__grille .offres__note { grid-column: 1 / -1; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .newsletter { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 760px) {
  body { font-size: 15.5px; }
  .bandeau-demo { font-size: 12px; }
  .bandeau-demo__long { display: none; }
  .entete__barre { height: 62px; }
  .entete__chercher { border: 0; padding: 0; }
  .entete__chercher kbd, .entete__nl { display: none; }
  .logo__mot { font-size: 27px; }
  .manchette { grid-template-columns: 1fr; text-align: center; gap: 4px; }
  .manchette__date, .manchette__compte { display: none; }
  .une { padding-block: 22px 40px; }
  .grille--3, .grille--4 { grid-template-columns: 1fr; gap: 32px; }
  .rubrique__liste .carte--liste .carte__media { width: 112px; aspect-ratio: 1; }
  .rubrique__liste .carte--liste .carte__titre { font-size: 20px; }
  .grille--bp { grid-template-columns: 1fr; }
  .section { padding-block: 40px; }
  .section__tete { flex-direction: column; align-items: flex-start; gap: 14px; }
  .piliers, .piliers--3 { grid-template-columns: 1fr; }
  .article__titres { grid-template-columns: 1fr; gap: 20px; }
  .article__note { grid-auto-flow: column; justify-content: start; align-items: center; text-align: left; max-width: none; }
  .article__note .anneau--grand { --taille: 76px; }
  .article__note .anneau--grand strong { font-size: 30px; margin-top: -8px; }
  .article__note .anneau--grand span { bottom: 14px; }
  .article__couverture { padding-inline: 0; }
  .article__couverture img { border-radius: 0; aspect-ratio: 16 / 10; }
  .article__couverture figcaption { padding-inline: var(--gouttiere); }
  .prose { font-size: 17px; }
  .produit { padding: 20px; margin-inline: calc(var(--gouttiere) * -0.5); }
  .produit__rang { font-size: 40px; }
  .produit__tete { flex-wrap: wrap; gap: 12px; }
  .produit__tete .anneau { --taille: 52px; }
  .produit__tete .anneau strong { font-size: 19px; margin-top: -4px; }
  .produit__tete .anneau span { display: none; }
  .produit__grille { grid-template-columns: 1fr; }
  .produit__grille .visuel { display: none; }
  .pour-contre { grid-template-columns: 1fr; }
  .verdict { padding: 22px; margin-inline: calc(var(--gouttiere) * -0.5); }
  .verdict__tete { flex-direction: column; align-items: flex-start; }
  .verdict__texte { font-size: 22px; }
  .verdict__notes { grid-template-columns: 1fr; }
  .duel__tete { padding: 18px 12px; gap: 8px; }
  .duel__nom { font-size: 18px; }
  .duel__table th, .duel__table td { padding: 11px 10px; }
  .duel__table thead th { white-space: normal; letter-spacing: .06em; }
  .gagne { font-size: 0; gap: 0; }
  .gagne svg { width: 20px; height: 20px; }
  .selection { padding: 20px; margin-inline: calc(var(--gouttiere) * -0.5); }
  .selection li { flex-wrap: wrap; gap: 8px 14px; }
  .selection__prix { margin-left: 36px; }
  .mini { flex-wrap: wrap; }
  .mini__prix { width: 100%; grid-auto-flow: column; justify-content: center; gap: 8px; }
  .achat-collant .mini { flex-wrap: nowrap; }
  .achat-collant .mini__prix { width: auto; grid-auto-flow: row; }
  .achat-collant .mini__label, .achat-collant .mini__meta { display: none; }
  .achat-collant .mini__nom { font-size: 17px; }
  .pied__grille { grid-template-columns: 1fr; }
  .pied__bas { flex-direction: column; gap: 12px; }
  .newsletter__ligne { flex-direction: column; border-radius: 18px; }
  .newsletter__ligne .bouton { width: 100%; }
  .credits { columns: 1; }
  .banniere__texte { padding-block: 80px 32px; }
}