/*
 * Comparafit : feuille de style v3 (docs/04-identite-visuelle.md, planche design/planche-style-v3/).
 * Sections sombres pour l'en-tête, les en-têtes de page et le pied ; contenu à lire sur fond clair.
 * Pas de fond quadrillé, pas de bandeau d'affiliation global, pas d'emoji.
 */

@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
}

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

:root {
	/* Palette Comparafit */
	--encre: #0b0f14;
	--marine: #0a2540;
	--titre: #0f3566; /* titres et noms de produits sur fond clair */
	--bleu: #1f6bff;
	--bleu-lien: #1553cc;
	--bleu-survol: #0a3fa8;
	/* Troisième couleur : turquoise (boutons marchands, traits de vitesse du logo) */
	--turquoise: #22b8cf;
	--turquoise-survol: #1ba3b9;
	--turquoise-fonce: #0e9aae;
	--gris: #5a6572;
	--fond: #f4f6f8;
	--bordure: #dde3ea;
	--bordure-champ: #b9c3cf;
	--placeholder: #e6ebf1;
	/* Dérivés pour les fonds sombres */
	--encre-2: #111821;
	--encre-3: #18212d;
	--bleu-lumiere: #5b93ff;
	--gris-clair: #aeb8c4;
	--gris-sombre: #7f8b98;
	--ligne: rgba(255, 255, 255, 0.1);
	--badge: #eaf1ff;
	/* Typographie */
	--disp: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
	--sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--r: 6px;
	--r-s: 4px;
	--wrap: 1180px;
}

/* Base */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--encre); background: var(--fond); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu-lien); }
a:hover { color: var(--bleu-survol); }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-evitement { position: absolute; left: 16px; top: -60px; z-index: 10; background: #fff; color: var(--encre); padding: 10px 14px; border-radius: var(--r); }
.lien-evitement:focus { top: 12px; }

/* Titres : Bricolage Grotesque, interlettrage serré */
h1, h2, h3 { font-family: var(--disp); font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(36px, 5vw, 62px); font-weight: 800; }
h2 { font-size: clamp(28px, 3.6vw, 42px); }
h3 { font-size: 22px; letter-spacing: -0.015em; }
/* Titres en bleu foncé sur fond clair ; les sections sombres gardent leur couleur. */
h2, h3 { color: var(--titre); }
.sombre :is(h1, h2, h3) { color: inherit; }
em.acc { font-style: normal; color: var(--bleu); }

/* Sur-titre */
.eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bleu-lien); display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--bleu), transparent); flex: none; }

/* Sections sombres */
.sombre { background: var(--encre); color: #f4f6f8; }
.sombre .eyebrow { color: var(--bleu-lumiere); }
.sombre .eyebrow::before { background: linear-gradient(90deg, var(--bleu-lumiere), transparent); }
.sombre em.acc { color: var(--bleu-lumiere); text-shadow: 0 0 38px rgba(31, 107, 255, 0.55); }
.sombre p { color: var(--gris-clair); }
.sombre p a { color: var(--bleu-lumiere); }
.halos { position: relative; overflow: hidden; }
.halos::before { content: ""; position: absolute; inset: -25% -10% auto -10%; height: 120%; pointer-events: none; background: radial-gradient(58% 48% at 16% 8%, rgba(31, 107, 255, 0.24), transparent 68%), radial-gradient(48% 42% at 88% 30%, rgba(21, 83, 204, 0.16), transparent 70%); }
.halos > * { position: relative; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 20px; border-radius: var(--r); font: 600 15px/1 var(--sans); text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.btn-p { background: var(--bleu); color: #fff; }
.btn-p:hover { background: var(--bleu-lien); color: #fff; }
.btn-marchand { background: var(--turquoise); color: var(--encre); }
.btn-marchand:hover { background: var(--turquoise-survol); color: var(--encre); }
.btn-g { border-color: var(--ligne); color: #f4f6f8; background: rgba(255, 255, 255, 0.03); }
.btn-g:hover { border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.btn-c { border-color: var(--bordure); color: var(--encre); background: #fff; }
.btn-c:hover { border-color: var(--bleu); color: var(--bleu-lien); }

/* En-tête du site */
.entete { position: relative; z-index: 20; background: #fff; color: var(--encre); border-bottom: 1px solid var(--bordure); }
.entete .wrap { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.entete .logo { display: block; flex: none; }
.entete .logo img { width: 188px; height: 34px; }
.bouton-menu { display: none; }
.nav-principale ul { list-style: none; margin: 0; padding: 0; }
.nav-principale > ul { display: flex; gap: 22px; font-size: 15px; font-weight: 500; }
.nav-principale > ul > li > a,
.a-panneau > button { display: inline-flex; align-items: center; gap: 6px; min-height: 68px; padding: 0; border: 0; background: none; color: var(--gris); font: inherit; text-decoration: none; cursor: pointer; }
.nav-principale > ul > li > a:hover,
.a-panneau > button:hover,
.a-panneau > button[aria-expanded="true"] { color: var(--encre); }
.nav-principale > ul > li > a[aria-current="page"],
.a-panneau.actif > button { color: var(--encre); box-shadow: inset 0 -2px var(--bleu); }
.a-panneau > button svg { transition: transform 0.15s; }
.a-panneau > button[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Méga menus : un panneau sous l'en-tête, disciplines > piliers > catégories */
.panneau { display: none; position: absolute; left: 0; right: 0; top: 100%; border-bottom: 1px solid var(--bordure); background: radial-gradient(40% 90% at 12% 0%, rgba(31, 107, 255, 0.06), transparent 70%), #fff; box-shadow: 0 24px 48px rgba(11, 15, 20, 0.12); }
.entete:not(.js) .a-panneau:hover > .panneau,
.entete:not(.js) .a-panneau:focus-within > .panneau,
.a-panneau > button[aria-expanded="true"] + .panneau { display: block; }
.entete .panneau-interieur { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: 40px; min-height: 0; padding-top: 28px; padding-bottom: 32px; }
.panneau-disciplines { display: grid; gap: 28px; }
.panneau summary { list-style: none; cursor: default; }
.panneau summary::-webkit-details-marker { display: none; }
.panneau summary svg { display: none; }
.panneau-discipline > summary { margin-bottom: 16px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bleu-lien); }
.panneau-piliers { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px 32px; }
.panneau-pilier > summary { margin-bottom: 6px; font-family: var(--disp); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--encre); }
.panneau-pilier a { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--gris); font-size: 15px; text-decoration: none; }
.panneau-pilier a .icone { flex: none; color: var(--bleu); }
.panneau a:hover { color: var(--encre); }
.panneau .voir-tout,
.panneau-encart .tout { display: inline-block; margin-top: 14px; color: var(--bleu-lien); font-size: 14px; font-weight: 600; text-decoration: none; }
.panneau-encart { align-self: start; padding: 20px; border: 1px solid var(--bordure); border-radius: var(--r); background: var(--fond); }
.panneau-encart .eyebrow { margin-bottom: 8px; }
.panneau-encart ul { margin: 0; }
.panneau-encart li a { display: block; padding: 6px 0; color: var(--encre); font-size: 14px; line-height: 1.4; text-decoration: none; }
.panneau-encart .tout { margin-top: 10px; }

.recherche { margin-left: auto; display: flex; align-items: center; gap: 8px; border: 1px solid var(--bordure); border-radius: 999px; padding: 0 6px 0 14px; min-width: 240px; }
.recherche svg { color: var(--gris); flex: none; }
.recherche input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--encre); font: 400 14px var(--sans); padding: 10px 0; }
.recherche input::placeholder { color: var(--gris); }
.recherche input:focus { outline: none; }
.recherche:focus-within { border-color: var(--bleu); }

/* Fil d'Ariane */
.fil-ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--gris-sombre); }
.fil-ariane li + li::before { content: "/"; margin-right: 6px; color: var(--gris-sombre); }
.fil-ariane a,
.sombre .fil-ariane a { color: var(--gris-clair); text-decoration: none; }
.fil-ariane a:hover,
.sombre .fil-ariane a:hover { color: #fff; text-decoration: underline; }

/* En-tête de page (sombre, avec halos) */
.entete-page { padding: 28px 0 56px; }
.entete-page .fil-ariane { margin-bottom: 36px; }
.entete-page h1 { margin: 18px 0 16px; }
.entete-page .chapeau { font-size: 19px; margin: 0; max-width: 40em; }
.entete-page .meta { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 20px; font-size: 14px; color: var(--gris-clair); }
.mention { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--gris); }
.mention svg { flex: none; margin-top: 2px; }
.sombre .mention { color: var(--gris-sombre); }

/* Fiche produit : en-tête en deux colonnes */
.fiche-entete { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
.encadre-achat { background: #fff; color: var(--encre); border-radius: var(--r); padding: 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 60px -18px rgba(0, 0, 0, 0.75); }
.encadre-achat .ph { aspect-ratio: 4 / 3; }
.encadre-achat .btn { width: 100%; }
.encadre-achat small { font-size: 12.5px; color: var(--gris); }
.encadre-achat p { color: var(--gris); margin: 0; font-size: 14px; }
.chiffres { display: flex; flex-wrap: wrap; gap: 14px 24px; margin: 0; }
.chiffres div { display: flex; flex-direction: column; }
.chiffres dt { font-size: 12px; color: var(--gris); order: 2; }
.chiffres dd { margin: 0; font-family: var(--disp); font-weight: 800; font-size: 22px; letter-spacing: -0.03em; line-height: 1.1; order: 1; }

/* Corps de page : texte et sommaire */
.corps { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 56px; padding: 56px 16px 72px; }
.corps.sans-sommaire { grid-template-columns: minmax(0, 1fr); }
/* Le texte garde 72 caractères par ligne ; les tableaux prennent toute la largeur de la colonne. */
.contenu { max-width: 900px; }
.contenu :is(p, ul, ol, h2, h3, .callout, details) { max-width: 72ch; }
.contenu > section + section { margin-top: 48px; }
.contenu h2 { font-size: clamp(26px, 3vw, 34px); margin: 0 0 16px; scroll-margin-top: 24px; }
.contenu h3 { margin: 28px 0 10px; }
.contenu p,
.contenu ul,
.contenu ol { margin: 0 0 16px; }
.contenu li { margin-bottom: 6px; }
.contenu table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; background: #fff; }
.contenu th,
.contenu td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--bordure); vertical-align: top; }
.contenu th { font-weight: 600; }
.contenu thead th { background: #f8fafc; color: var(--titre); vertical-align: bottom; }
/* Tableau à deux colonnes (caractéristique, valeur) : la première prend 40 %. */
.contenu tbody th { width: 40%; }
.contenu table:has(thead) tbody th { width: auto; }
/* Tableau à colonnes : la première (le nom) ressort. */
.contenu table:has(thead) tbody tr > :first-child { font-weight: 600; color: var(--titre); }
.contenu .callout { border-left: 3px solid var(--bleu); background: #fff; padding: 14px 18px; border-radius: 0 var(--r) var(--r) 0; margin: 0 0 20px; }
.contenu .callout.warn { border-left-color: #b45309; }
.contenu .pc { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 20px; }
.contenu .pc > div { background: #fff; border: 1px solid var(--bordure); border-radius: var(--r); padding: 14px 18px; }
.contenu details { background: #fff; border: 1px solid var(--bordure); border-radius: var(--r); padding: 12px 16px; margin-bottom: 10px; }
.contenu summary { font-weight: 600; cursor: pointer; }
.contenu details > :last-child { margin-bottom: 0; }
.contenu details[open] > summary { margin-bottom: 8px; }
.contenu .callout > :last-child { margin-bottom: 0; }
.contenu .pc h3 { margin: 0 0 8px; font-size: 18px; }
.contenu .pc ul { margin: 0; padding-left: 18px; }
.contenu .pc .good h3 { color: #13795b; }
.contenu .pc .bad h3 { color: #b45309; }
.contenu .na { color: var(--gris); font-size: 0.875em; }
.contenu td .na { font-style: italic; }
.contenu .tbl,
.contenu .tw { margin: 0 0 20px; }
.contenu .tbl table,
.contenu .tw table { margin: 0; }
.contenu .verdict { margin: 0 0 20px; padding: 18px 20px; border: 1px solid var(--bordure); border-radius: var(--r); background: #fff; }
.contenu .verdict h3 { margin: 0 0 10px; font-size: 18px; }
.contenu .verdict ul { list-style: none; margin: 0; padding: 0; }
.contenu .verdict li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 0; padding: 10px 0; border-top: 1px solid var(--bordure); }
.contenu .verdict li:first-child { border-top: 0; padding-top: 0; }
.contenu .verdict li span { color: var(--gris); }
.contenu .verdict li a { font-weight: 600; }
.contenu .achat-texte a { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: var(--r); background: var(--turquoise); color: var(--encre); font-weight: 600; text-decoration: none; }
.contenu .achat-texte a:hover { background: var(--turquoise-survol); color: var(--encre); }
.contenu .achat-texte a::after { content: "→"; margin-left: 9px; }
/* Photos (data/visuels.json) */
.visuel { margin: 0 0 20px; }
.visuel img { width: 100%; height: auto; border-radius: var(--r); background: var(--placeholder); }
/* Le format vient de l'emplacement, le cadrage du point focal de la photo (object-position) */
.visuel-4-3 img, .encadre-achat > img, .carte > img { aspect-ratio: 4 / 3; object-fit: cover; }
.visuel-16-9 img { aspect-ratio: 16 / 9; object-fit: cover; }
.visuel-21-9 img { aspect-ratio: 21 / 9; object-fit: cover; }
.encadre-achat > img, .carte > img { display: block; width: 100%; height: auto; border-radius: var(--r); background: var(--placeholder); }
.visuel figcaption { margin-top: 8px; color: var(--gris); font-size: 14px; }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.galerie .visuel { margin: 0; }
.galerie-fiche { padding-top: 0; }
.en-redaction { background: #fff; border: 1.5px dashed var(--bordure-champ); border-radius: var(--r); padding: 20px; color: var(--gris); }
.sommaire { position: sticky; top: 24px; align-self: start; font-size: 14px; }
.sommaire p { margin: 0 0 10px; }
.sommaire ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--bordure); }
.sommaire li a { display: block; padding: 6px 0 6px 14px; color: var(--gris); text-decoration: none; line-height: 1.35; }
.sommaire li a:hover { color: var(--bleu-lien); }

/* Fiche et avis : vignette d'achat et sommaire en un seul bloc flottant */
.corps.avec-achat { grid-template-columns: minmax(0, 1fr) 300px; }
.colonne-laterale { position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--bordure); border-radius: var(--r); box-shadow: 0 18px 40px -28px rgba(11, 15, 20, 0.45); overflow: hidden; }
.vignette-achat { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; padding: 16px; border-bottom: 1px solid var(--bordure); }
.vignette-achat img { display: block; width: 96px; height: 72px; object-fit: cover; border-radius: var(--r-s); background: var(--placeholder); }
.vignette-achat .nom { margin: 0; font: 700 16px/1.2 var(--disp); letter-spacing: -0.015em; }
.vignette-achat .btn,
.vignette-achat small,
.vignette-achat .vers-fiche { grid-column: 1 / -1; }
.vignette-achat .btn { width: 100%; min-height: 42px; }
.vignette-achat small { font-size: 12px; line-height: 1.4; color: var(--gris); }
.vignette-achat .vers-fiche { font-size: 14px; color: var(--bleu-lien); }
.colonne-laterale .sommaire { position: static; min-height: 0; overflow-y: auto; padding: 16px 16px 12px; }
.barre-achat { display: none; }

@media (max-width: 900px) {
	.corps.avec-achat { grid-template-columns: minmax(0, 1fr); }
	.colonne-laterale { position: static; max-height: none; order: -1; background: none; border: 0; box-shadow: none; overflow: visible; }
	.colonne-laterale .vignette-achat { display: none; }
	.colonne-laterale .sommaire { padding: 0; }
	.barre-achat:not([hidden]) { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--bordure); box-shadow: 0 -10px 28px -16px rgba(11, 15, 20, 0.4); }
	.barre-achat img { flex: none; width: 48px; height: 48px; object-fit: cover; border-radius: var(--r-s); }
	.barre-achat .nom { flex: 1; min-width: 0; margin: 0; font: 700 14px/1.2 var(--disp); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.barre-achat .btn { flex: none; min-height: 40px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
	body.avec-barre-achat { padding-bottom: 72px; }
}

/* Emplacements de visuels */
.ph { border: 1.5px dashed var(--bordure-champ); border-radius: var(--r); display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; font-size: 13px; color: var(--gris); background: var(--placeholder); margin: 0 0 20px; }
.ph b { display: block; letter-spacing: 0.14em; text-transform: uppercase; font-size: 11px; margin-bottom: 6px; color: var(--encre); }
.ph-16-9 { aspect-ratio: 16 / 9; }
.ph-4-3 { aspect-ratio: 4 / 3; }
.ph-21-9 { aspect-ratio: 21 / 9; }
.sans-photo { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; margin: 0; border-radius: var(--r); background: var(--placeholder); color: var(--bleu-lien); }
.encadre-achat .ph { margin: 0; }

/* Cartes */
.section-claire { padding: 56px 0 72px; }
.section-claire .titre-section { margin: 14px 0 24px; font-size: clamp(24px, 3vw, 32px); }
.cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.carte { background: #fff; border: 1px solid var(--bordure); border-radius: var(--r); padding: 18px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.carte .ph { margin: 0; }
.carte h3 a { color: inherit; text-decoration: none; }
.carte h3 a::after { content: ""; position: absolute; inset: 0; }
.carte h3 a:hover { color: var(--bleu-lien); }
.carte p { margin: 0; color: var(--gris); font-size: 15px; }
.carte .plus { margin-top: auto; font-weight: 600; font-size: 14px; color: var(--bleu-lien); }
.badge { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bleu-lien); background: var(--badge); border-radius: var(--r-s); padding: 4px 8px; }
.vide { background: #fff; border: 1px solid var(--bordure); border-radius: var(--r); padding: 24px; color: var(--gris); }

/* Pied de page */
.pied { padding: 40px 0; font-size: 14px; border-top: 1px solid var(--ligne); }
.pied .wrap { display: grid; gap: 18px; }
.pied img { width: 166px; height: 30px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pied a { color: var(--gris-clair); text-decoration: none; }
.pied a:hover { color: #fff; }
.pied p { margin: 0; color: var(--gris-sombre); font-size: 13px; }

@media (max-width: 900px) {
	/* En-tête : logo et bouton du menu, recherche en dessous, navigation en accordéon */
	.entete .wrap { flex-wrap: wrap; gap: 12px; min-height: 0; padding-top: 12px; padding-bottom: 12px; }
	.bouton-menu { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 1px solid var(--bordure); border-radius: var(--r); background: transparent; color: var(--encre); cursor: pointer; }
	.bouton-menu .fermer,
	.bouton-menu[aria-expanded="true"] .ouvrir { display: none; }
	.bouton-menu[aria-expanded="true"] .fermer { display: inline; }
	.entete:not(.js) .bouton-menu { display: none; }
	.recherche { order: 3; flex: 1 1 100%; min-width: 0; margin-left: 0; }
	.nav-principale { order: 4; flex: 1 1 100%; }
	.entete.js .nav-principale:not(.ouverte) { display: none; }
	.nav-principale > ul { display: block; border-top: 1px solid var(--bordure); font-size: 16px; }
	.nav-principale > ul > li { border-bottom: 1px solid var(--bordure); }
	.nav-principale > ul > li > a,
	.a-panneau > button { display: flex; justify-content: space-between; width: 100%; min-height: 52px; color: var(--encre); }
	.nav-principale > ul > li > a[aria-current="page"],
	.a-panneau.actif > button { box-shadow: none; color: var(--bleu-lien); }
	.panneau { position: static; padding-bottom: 10px; border: 0; background: none; box-shadow: none; }
	.entete:not(.js) .panneau { display: block; }
	.entete .panneau-interieur { display: block; padding: 0; }
	.panneau-disciplines { gap: 0; }
	.panneau summary { display: flex; justify-content: space-between; align-items: center; min-height: 44px; cursor: pointer; }
	.panneau summary svg { display: block; flex: none; transition: transform 0.15s; }
	.panneau details[open] > summary svg { transform: rotate(180deg); }
	.panneau-discipline > summary { margin: 0; padding-left: 12px; }
	.panneau-piliers { display: block; padding-left: 12px; }
	.panneau-pilier > summary { margin: 0; padding-left: 12px; font-size: 16px; }
	.panneau-pilier ul { padding: 0 0 6px 24px; }
	.panneau-pilier a { padding: 10px 0; }
	.panneau .voir-tout { margin: 4px 0 10px 24px; }
	.panneau-encart { margin-top: 10px; padding: 14px 16px; }
	.entete-page { padding-bottom: 40px; }
	.entete-page .fil-ariane { margin-bottom: 24px; }
	.entete-page .chapeau { font-size: 17px; }
	.fiche-entete,
	.corps { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.sommaire { position: static; order: -1; }
	.cartes { grid-template-columns: 1fr; }
	.contenu .pc { grid-template-columns: 1fr; }
	.contenu table,
	.contenu tbody,
	.contenu tr,
	.contenu th,
	.contenu td { display: block; width: auto; }
	.contenu tr { border-bottom: 1px solid var(--bordure); padding: 8px 0; }
	.contenu th,
	.contenu td { border: 0; padding: 2px 12px; }
	.contenu thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.contenu td[data-label]::before { content: attr(data-label) " : "; color: var(--gris); font-weight: 600; }
	.contenu tbody tr > :first-child { font-weight: 600; }
	.contenu tbody tr > :first-child::before { content: none; }
}

@media (min-width: 901px) and (max-width: 1100px) {
	.cartes { grid-template-columns: repeat(2, 1fr); }
}

/* Accueil */
.hero { padding: 84px 0 72px; }
.hero-g > div { max-width: min(680px, 54vw); }
/* Photo intégrée au tiers droit : découpe déchirée en biais, liseré bleu et traits de vitesse du logo */
.hero > .hero-media { position: absolute; top: 0; right: 0; bottom: 0; width: 40%; z-index: 0; pointer-events: none;
	--dechirure: polygon(15.4% 0, 100% 0, 100% 100%, 0 100%, 0 96%, 2.4% 90.8%, 1.9% 88.9%, 2.4% 86.6%, 3.4% 83.8%, 3.4% 81.4%, 3.1% 78%, 5.5% 75.9%, 3.6% 73.9%, 4.4% 71.2%, 5.3% 68%, 6.4% 65.9%, 8.1% 62.7%, 7.3% 59.4%, 7.2% 57.3%, 8.5% 54.6%, 8.5% 52.4%, 8.6% 50%, 8.1% 47.8%, 8.6% 45%, 9.6% 43.2%, 10.6% 41%, 9.8% 38%, 11.9% 34.7%, 13% 32.4%, 11.9% 30%, 10.5% 27.9%, 12.6% 25.6%, 13.1% 22.6%, 14% 19.9%, 14% 18.2%, 14.3% 16.4%, 14.5% 13.7%, 14.5% 10.2%, 16.5% 7.6%, 16.6% 4.9%, 15.1% 2.6%); }
.hero-media::before { content: ""; position: absolute; inset: 0; clip-path: var(--dechirure); transform: translateX(-3px); background: linear-gradient(180deg, #5b93ff, var(--bleu) 45%, #0a2540); }
/* Teinte bleue légère sur la photo (la photo d'origine reste intacte) */
.hero-fond.avec-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(160deg, #1f6bff, #0a2540 75%); mix-blend-mode: color; opacity: 0.45; }
.hero-fond { position: absolute; inset: 0; clip-path: var(--dechirure); background: radial-gradient(70% 60% at 70% 35%, rgba(31, 107, 255, 0.28), transparent 70%), linear-gradient(160deg, #13233d, #0b0f14 70%); }
.hero-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 15, 20, 0.55), rgba(11, 15, 20, 0) 40%); }
.hero-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-a-venir { position: absolute; right: 28px; bottom: 28px; max-width: 260px; font-size: 12.5px; line-height: 1.5; color: var(--gris-sombre); text-align: right; }
.hero-a-venir b { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris-clair); }
.hero-traits { position: absolute; left: -36px; top: 58%; display: grid; gap: 10px; }
.hero-traits i { display: block; height: 9px; width: 120px; border-radius: 2px; background: var(--turquoise); transform: skewX(-22deg); box-shadow: 0 0 18px rgba(34, 184, 207, 0.6); }
.hero-traits i:nth-child(2) { width: 90px; margin-left: 22px; }
.hero-traits i:nth-child(3) { width: 60px; margin-left: 44px; }
.hero h1 { margin: 20px 0; }
.hero .chapeau { font-size: 19px; margin: 0; max-width: 34em; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero .note { font-size: 13px; color: var(--gris-sombre); margin-top: 18px; }
.chiffres-hero { display: flex; gap: 34px; margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--ligne); }
.chiffres-hero b { display: block; font-family: var(--disp); font-size: 30px; font-weight: 800; letter-spacing: -0.04em; color: #f4f6f8; line-height: 1; }
.chiffres-hero span { font-size: 13px; color: var(--gris-sombre); }

/* Bannière « performance » (accueil) : traits de vitesse du logo, mot géant qui défile */
.banniere-perf { position: relative; overflow: hidden; isolation: isolate; padding: 104px 0; border-top: 1px solid var(--ligne); }
.banniere-perf::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(48% 70% at 86% 46%, rgba(31, 107, 255, 0.3), transparent 70%), radial-gradient(40% 60% at 8% 100%, rgba(21, 83, 204, 0.18), transparent 72%); }
.banniere-fond { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.banniere-photo { position: absolute; top: 0; right: 0; width: 62%; height: 100%; object-fit: cover; }
.avec-photo .banniere-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--encre) 36%, rgba(11, 15, 20, 0.78) 58%, rgba(11, 15, 20, 0.15) 100%); }
.banniere-defile { position: absolute; left: 0; bottom: -0.16em; display: flex; white-space: nowrap; font: 800 clamp(80px, 13vw, 190px)/1 var(--disp); letter-spacing: -0.04em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.08); animation: cf-defile 70s linear infinite; }
.banniere-defile span { padding-right: 0.3em; }
@keyframes cf-defile { to { transform: translateX(-50%); } }
.vitesse { position: absolute; left: -40%; width: 34%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--turquoise)); box-shadow: 0 0 18px rgba(34, 184, 207, 0.5); opacity: 0; transform: skewX(-20deg); animation: cf-vitesse 3.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
/* Les trois traits du logo, en grand, quand il n'y a pas de photo */
.banniere-marque { position: absolute; top: 50%; right: 7%; display: grid; justify-items: end; gap: 26px; transform: translateY(-50%); }
.banniere-marque i { display: block; height: 22px; border-radius: 5px; background: linear-gradient(90deg, transparent, var(--turquoise-fonce) 65%, var(--turquoise)); box-shadow: 0 0 46px rgba(34, 184, 207, 0.35); transform: skewX(-20deg); animation: cf-elan 2.8s ease-in-out infinite alternate; }
.banniere-marque i:nth-child(1) { width: 300px; }
.banniere-marque i:nth-child(2) { width: 230px; animation-delay: 0.25s; }
.banniere-marque i:nth-child(3) { width: 160px; animation-delay: 0.5s; }
@keyframes cf-elan { from { transform: translateX(-18px) skewX(-20deg); opacity: 0.7; } to { transform: translateX(0) skewX(-20deg); opacity: 1; } }
.avec-photo .banniere-marque { display: none; }
.vitesse.v1 { top: 20%; }
.vitesse.v2 { top: 27%; width: 22%; height: 2px; animation-delay: 0.6s; }
.vitesse.v3 { top: 62%; width: 40%; animation-delay: 1.5s; }
.vitesse.v4 { top: 70%; width: 18%; height: 2px; animation-delay: 2.3s; }
@keyframes cf-vitesse { 0% { opacity: 0; transform: translateX(0) skewX(-20deg); } 15% { opacity: 1; } 70% { opacity: 0.8; } 100% { opacity: 0; transform: translateX(430%) skewX(-20deg); } }
.banniere-contenu h2 { max-width: 13em; margin: 18px 0; font-size: clamp(34px, 5vw, 60px); font-weight: 800; }
.banniere-perf .chapeau { max-width: 36em; margin: 0; font-size: 18px; }
.banniere-piliers { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 920px; margin: 44px 0 0; padding: 0; }
.banniere-piliers li { padding-top: 18px; border-top: 1px solid var(--ligne); color: var(--gris-clair); font-size: 14px; line-height: 1.5; }
.banniere-piliers b { display: block; font: 800 34px/1 var(--disp); letter-spacing: -0.04em; color: var(--bleu-lumiere); text-shadow: 0 0 30px rgba(31, 107, 255, 0.5); }
.banniere-piliers span { display: block; margin: 10px 0 6px; color: #fff; font-size: 16px; font-weight: 600; }
.banniere-perf .cta { margin: 36px 0 0; }
@media (max-width: 900px) {
	.banniere-perf { padding: 64px 0 96px; }
	.banniere-piliers { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
	.banniere-photo { width: 100%; opacity: 0.4; }
	.banniere-marque { display: none; }
	.avec-photo .banniere-fond::after { background: linear-gradient(180deg, rgba(11, 15, 20, 0.55), var(--encre) 85%); }
}
@media (prefers-reduced-motion: reduce) {
	.banniere-defile,
	.vitesse,
	.banniere-marque i { animation: none; }
	.vitesse { left: 3%; opacity: 0.55; }
}
.sombre .ph { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.02); color: var(--gris-sombre); margin: 0; }
.sombre .ph b { color: var(--gris-clair); }
.ph-4-5 { aspect-ratio: 4 / 5; }
.section-serree { padding: 28px 0; }
/* Accueil : bloc de présentation court, le texte complet est dans un guide */
.presentation h2 { margin: 14px 0 12px; font-size: clamp(26px, 3vw, 34px); max-width: 24em; }
.presentation .chapeau-presentation { max-width: 46em; margin: 0 0 24px; color: var(--gris); font-size: 17px; }
.reperes { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.reperes li { background: #fff; border: 1px solid var(--bordure); border-radius: var(--r); padding: 18px 20px; font-size: 15px; color: var(--gris); line-height: 1.55; }
.reperes b { display: block; margin-bottom: 6px; font: 700 18px/1.2 var(--disp); letter-spacing: -0.015em; color: var(--encre); }
@media (max-width: 900px) {
	.reperes { grid-template-columns: 1fr; }
	.presentation .btn { width: 100%; }
}
.section-grise { background: #eaeef2; }
.entete-section { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.dernieres { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 28px; }
.dernieres li { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 2px 14px; padding: 12px 0; border-top: 1px solid var(--bordure); font-size: 15px; }
.dernieres .miniature { grid-column: 1; grid-row: 1 / span 2; }
.dernieres .type { grid-column: 2 / -1; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); }
.dernieres a { grid-column: 2; color: var(--encre); font-weight: 600; text-decoration: none; }
.dernieres a::after { content: ""; position: absolute; inset: 0; }
.dernieres time { grid-column: 3; }
/* Visuels masqués (comparafit_visuels_masques) : listes sans colonne de miniature. */
.sans-visuels .dernieres li { grid-template-columns: minmax(0, 1fr) auto; }
.sans-visuels .dernieres .type { grid-column: 1 / -1; }
.sans-visuels .dernieres a { grid-column: 1; }
.sans-visuels .dernieres time { grid-column: 2; }
.sans-visuels .vignette-achat .nom { grid-column: 1 / -1; }
.mosaique { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mosaique .miniature { width: auto; height: auto; aspect-ratio: 4 / 3; }
.dernieres a:hover { color: var(--bleu-lien); }
.dernieres time { font-size: 13px; color: var(--gris); white-space: nowrap; }
.carte-discipline ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; position: relative; z-index: 1; }
.carte-discipline h3 a::after { display: none; }
.carte-comparatif .infos { font-size: 13px; }

/* Bandeau sombre */
.bande { padding: 64px 0; }
.bande .wrap { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center; }
.bande h2 { margin: 16px 0 14px; }
.bande ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bande li { display: flex; gap: 12px; align-items: flex-start; color: var(--gris-clair); font-size: 15px; }
.bande li svg { flex: none; color: var(--bleu-lumiere); margin-top: 3px; }

/* Filtres de liste */
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.filtres a { border: 1px solid var(--ligne); border-radius: 999px; padding: 7px 14px; font-size: 14px; color: var(--gris-clair); text-decoration: none; }
.filtres a:hover { border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.sombre .filtres a[aria-current="page"] { background: var(--bleu); border-color: var(--bleu); color: #fff; }

/* Tableau comparatif généré */
.section-tableau { padding-bottom: 8px; }
.tableau-comparatif table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--bordure); font-size: 14.5px; }
.tableau-comparatif th,
.tableau-comparatif td { padding: 12px 14px; border-bottom: 1px solid var(--bordure); text-align: left; vertical-align: middle; width: auto; }
.tableau-comparatif thead th { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); background: #f8fafc; }
.tableau-comparatif .modele { font-weight: 600; min-width: 250px; }
.tableau-comparatif .modele a { color: var(--encre); text-decoration: none; display: flex; align-items: center; gap: 14px; }
.tableau-comparatif .modele a:hover { color: var(--bleu-lien); }
/* Le nom du produit d'abord, son rôle dans la sélection en dessous, en texte simple. */
.tableau-comparatif .modele-nom { display: block; font-family: var(--disp); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; color: var(--titre); }
.tableau-comparatif .modele a:hover .modele-nom { color: var(--bleu-lien); }
.tableau-comparatif .modele-role { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 400; color: var(--encre); }
.miniature { flex: none; display: flex; align-items: center; justify-content: center; width: 72px; height: 54px; border-radius: var(--r-s); background: var(--placeholder); color: var(--bleu-lien); overflow: hidden; }
.miniature img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tableau-comparatif .non-verifie { color: var(--gris); }
.tableau-comparatif .achat .btn { min-height: 40px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
.tableau-comparatif .note-tableau { font-size: 13px; color: var(--gris); margin: 10px 0 0; }

@media (max-width: 900px) {
	.hero { padding: 52px 0 0; }
	.hero-g > div { max-width: none; }
	/* Téléphone : la photo passe sous le texte, découpe déchirée sur le haut */
	.hero > .hero-media { position: relative; width: 100%; height: 300px; margin-top: 36px;
		--dechirure: polygon(0 3.3%, 4.8% 3.3%, 8.8% 1.9%, 12.9% 7.9%, 15.6% 5%, 18.2% 5.9%, 22.3% 6.1%, 26.1% 4%, 28.7% 3.3%, 33.3% 3.6%, 37.1% 4.3%, 40.3% 6%, 44.9% 4.5%, 47.9% 6.7%, 51.4% 5.2%, 56.3% 7.9%, 61.1% 3.3%, 64.6% 1.4%, 69.1% 5.3%, 74% 7.5%, 76.7% 1.3%, 79.7% 3.8%, 82.6% 8.6%, 85.4% 3.1%, 88.6% 5.9%, 91.9% 5.4%, 95.3% 5.3%, 98.1% 5.9%, 100% 4.1%, 100% 100%, 0 100%); }
	.hero-media::before { transform: translateY(-3px); }
	.hero-fond::after { background: linear-gradient(180deg, rgba(11, 15, 20, 0.5), rgba(11, 15, 20, 0) 45%); }
	.hero-traits { left: 16px; top: 18px; gap: 7px; }
	.hero-traits i { height: 7px; width: 80px; }
	.hero-traits i:nth-child(2) { width: 60px; margin-left: 14px; }
	.hero-traits i:nth-child(3) { width: 40px; margin-left: 28px; }
	.hero-g,
	.bande .wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.hero .chapeau { font-size: 17px; }
	.hero .cta .btn { flex: 1 1 100%; }
	.ph-4-5 { aspect-ratio: 16 / 10; }
	.chiffres-hero { gap: 22px; flex-wrap: wrap; }
	.dernieres { grid-template-columns: 1fr; }
	.entete-section { flex-direction: column; align-items: flex-start; }
	/* Tableau comparatif : une carte par modèle */
	.tableau-comparatif table,
	.tableau-comparatif tbody,
	.tableau-comparatif tr,
	.tableau-comparatif th,
	.tableau-comparatif td { display: block; width: auto; }
	.tableau-comparatif table { border: 0; background: transparent; }
	.tableau-comparatif thead { display: none; }
	.tableau-comparatif tr { background: #fff; border: 1px solid var(--bordure); border-radius: var(--r); padding: 14px; margin-bottom: 14px; }
	.tableau-comparatif th,
	.tableau-comparatif td { border: 0; padding: 4px 0; }
	.tableau-comparatif td[data-label] { display: flex; justify-content: space-between; gap: 12px; }
	.tableau-comparatif td[data-label]::before { content: attr(data-label); color: var(--gris); font-size: 13.5px; }
	.tableau-comparatif .achat { padding-top: 10px; }
	.tableau-comparatif .achat .btn { width: 100%; }
}

@media (min-width: 901px) and (max-width: 1100px) {
	.dernieres { grid-template-columns: repeat(2, 1fr); }
}

/* Guides, avis, duels */
.liens-maillage { margin: 16px 0 0; font-size: 14px; color: var(--gris-clair); }
.guide-entete { max-width: 52em; }
.liens-avis { margin: -8px 0 20px; font-size: 15px; color: var(--gris); }
.dossier { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px 32px; }
.dossier h3 { margin: 0 0 8px; font-size: 18px; }
.dossier ul { list-style: none; margin: 0; padding: 0; }
.dossier li { padding: 9px 0; border-top: 1px solid var(--bordure); font-size: 15px; line-height: 1.4; }
.dossier a { color: var(--bleu-lien); text-decoration: none; }
.dossier a:hover { text-decoration: underline; }
.tableau-duel table { width: 100%; max-width: 860px; border-collapse: collapse; background: #fff; border: 1px solid var(--bordure); font-size: 15px; }
.tableau-duel th,
.tableau-duel td { padding: 11px 14px; border-bottom: 1px solid var(--bordure); text-align: left; vertical-align: middle; }
.tableau-duel thead th { font-family: var(--disp); font-size: 18px; font-weight: 700; letter-spacing: -0.015em; background: #f8fafc; }
.tableau-duel thead a { color: var(--encre); text-decoration: none; }
.tableau-duel thead a:hover { color: var(--bleu-lien); }
.tableau-duel tbody th { font-weight: 500; color: var(--gris); width: 34%; }
.tableau-duel .non-verifie { color: var(--gris); }
.tableau-duel .achat .btn { min-height: 40px; padding: 0 14px; font-size: 14px; }
.tableau-duel .note-tableau { font-size: 13px; color: var(--gris); margin: 10px 0 0; }

@media (max-width: 900px) {
	.tableau-duel table { font-size: 14px; table-layout: fixed; }
	.tableau-duel th,
	.tableau-duel td { padding: 9px 8px; overflow-wrap: anywhere; }
	.tableau-duel thead th { font-size: 15px; }
	.tableau-duel thead th:first-child,
	.tableau-duel tbody th { width: 36%; }
	.tableau-duel .achat .btn { width: 100%; white-space: normal; line-height: 1.25; min-height: 44px; padding: 8px 6px; font-size: 13px; }
	.tableau-duel .achat .btn svg { display: none; }
}

/* Pages fixes, plan du site, 404, rappel de sécurité */
.alerte-rappel { margin: 18px 0 0; padding: 12px 14px; border-left: 3px solid #f59e0b; background: rgba(245, 158, 11, 0.1); color: #fde68a; font-size: 14px; border-radius: 0 var(--r) var(--r) 0; }
.alerte-rappel b { color: #fff; }
.plan-du-site h3 { margin: 24px 0 8px; font-size: 20px; }
.plan-du-site h4 { margin: 16px 0 6px; font-family: var(--sans); font-size: 15px; font-weight: 600; }
.plan-du-site ul { margin: 0 0 8px; }
.recherche-404 { margin: 28px 0 0; max-width: 460px; }
.page-introuvable { padding-bottom: 72px; }
.page-introuvable .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }