@charset "UTF-8";/* =====================================================================================================================
   Config Gamer · gabarit C « Hybride » · DESIGN SYSTEM
   ---------------------------------------------------------------------------------------------------------------------
   Une seule source de vérité : les variables --cg-* ci-dessous. Toutes les extensions maison (mod_cglogin,
   com_cgcomparateur, com_cgmedia, com_cgdemandeconfig, plg_system_cgforum) les lisent (avec une valeur de secours
   quand elles sont utilisées hors de ce gabarit). Pour changer la DA : modifier ces variables, rien d'autre.
   Mode sombre : html[data-theme="sombre"] (choix du visiteur, réglage du site ou préférence du système).
   ===================================================================================================================== */

@font-face {src: url("https://www.config-gamer.fr/media/templates/site/cgc/fonts/rajdhani-600.woff2") format("woff2"); font-family: "Rajdhani"; font-style: normal; font-weight: 600; font-display: swap}
@font-face {src: url("https://www.config-gamer.fr/media/templates/site/cgc/fonts/rajdhani-700.woff2") format("woff2"); font-family: "Rajdhani"; font-style: normal; font-weight: 700; font-display: swap}
@font-face {src: url("https://www.config-gamer.fr/media/templates/site/cgc/fonts/ibm-plex-sans-400.woff2") format("woff2"); font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap}
@font-face {src: url("https://www.config-gamer.fr/media/templates/site/cgc/fonts/ibm-plex-sans-500.woff2") format("woff2"); font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap}
@font-face {src: url("https://www.config-gamer.fr/media/templates/site/cgc/fonts/ibm-plex-sans-600.woff2") format("woff2"); font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap}

:root {
  /* Couleurs (clair) */
  --cg-fond: #f2f2f3;            /* fond de page */
  --cg-surface: #ffffff;         /* cartes */
  --cg-surface-2: #f2f2f3;       /* pastilles, zones secondaires dans une carte */
  --cg-ligne: #ececee;           /* séparateurs fins */
  --cg-ligne-2: #e4e4e7;         /* bordures de champs, onglets */
  --cg-texte: #1b1b1e;
  --cg-discret: #4f4f56;         /* texte secondaire (contraste AA sur --cg-fond) */
  --cg-discret-2: #5f5f66;
  --cg-accent: #b00000;          /* rouge Config Gamer : boutons, filets */
  --cg-accent-texte: #b00000;    /* rouge pour du texte (plus clair en sombre) */
  --cg-accent-fonce: #8b0000;
  --cg-accent-doux: #fbf3f3;     /* fond de mise en avant */
  --cg-actif: #161618;           /* élément sélectionné (fond) */
  --cg-actif-texte: #ffffff;
  --cg-entete: #161618;          /* en-tête et pied */
  --cg-bandeau: #1e1e21;         /* bandeau titre sombre */
  --cg-bandeau-2: #2a2a2e;       /* champs et boutons dans l'en-tête */
  --cg-entete-texte: #d8d8dc;
  --cg-pointille: #b8b8be;
  /* États (sémantiques, identiques dans les deux modes) */
  --cg-ok: #1e9e57;
  --cg-attente: #e39a12;
  --cg-rupture: #d92d20;
  /* Formes */
  --cg-rayon: 8px;
  --cg-rayon-petit: 4px;
  --cg-rayon-image: 10px;
  --cg-ombre: 0 1px 2px rgba(0, 0, 0, .06);
  --cg-ombre-haute: 0 10px 40px rgba(0, 0, 0, .25);
  /* Typographie */
  --cg-police-titre: "Rajdhani", "Segoe UI", system-ui, sans-serif;
  --cg-police-texte: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --cg-taille: 16px;
  --cg-taille-lecture: 17px;
  /* Mise en page */
  --cg-largeur: 1320px;
  --cg-largeur-lecture: 760px;
  --cg-gouttiere: 20px;
  color-scheme: light;
}

html[data-theme="sombre"] {
  --cg-fond: #0f0f11;
  --cg-surface: #18181b;
  --cg-surface-2: #232327;
  --cg-ligne: #26262b;
  --cg-ligne-2: #2e2e33;
  --cg-texte: #ececef;
  --cg-discret: #b4b4bb;
  --cg-discret-2: #a2a2aa;
  --cg-accent: #d0161b;
  --cg-accent-texte: #ff5a52;
  --cg-accent-fonce: #a30f13;
  --cg-accent-doux: #2a1517;
  --cg-actif: #ececef;
  --cg-actif-texte: #161618;
  --cg-entete: #09090b;
  --cg-bandeau: #141417;
  --cg-bandeau-2: #222226;
  --cg-pointille: #45454c;
  --cg-ombre: none;
  --cg-ombre-haute: 0 10px 40px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--cg-fond); color: var(--cg-texte);
  font: 400 var(--cg-taille)/1.55 var(--cg-police-texte); transition: background-color .25s ease, color .25s ease;
}
img, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: var(--cg-accent-texte); text-underline-offset: 2px; }
a:hover { color: var(--cg-accent); }
h1, h2, h3, h4 { font-family: var(--cg-police-titre); font-weight: 700; line-height: 1.1; margin: 1.2em 0 .5em; color: var(--cg-texte); }
h1 { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.02; text-wrap: balance; }
h2 { font-size: clamp(24px, 2.6vw, 30px); }
h3 { font-size: 22px; }
h4 { font-size: 19px; }
p, ul, ol, dl, table, blockquote, figure { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--cg-ligne-2); margin: 2em 0; }
:focus-visible { outline: 3px solid var(--cg-accent-texte); outline-offset: 2px; }
::selection { background: var(--cg-accent); color: #fff; }
.cg-cache, .visually-hidden, .element-invisible, .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cg-evitement { position: absolute; left: 8px; top: -60px; z-index: 1000; padding: 10px 14px; background: var(--cg-accent); color: #fff; border-radius: var(--cg-rayon-petit); }
.cg-evitement:focus { top: 8px; }
.cg-cadre { max-width: var(--cg-largeur); margin: 0 auto; padding: 0 var(--cg-gouttiere); }

/* ------------------------------------------------------------------ boutons et champs */
.cg-btn, .btn, button.btn, input[type=submit].btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--cg-rayon-petit); background: var(--cg-surface-2); color: var(--cg-texte);
  font: 600 15px/1 var(--cg-police-texte); text-decoration: none; cursor: pointer;
}
.cg-btn--accent, .btn-primary, .btn-success, button.cg-btn--accent {
  background: var(--cg-accent); color: #fff; font-family: var(--cg-police-titre); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .04em;
}
.cg-btn--accent:hover, .btn-primary:hover, .btn-success:hover { background: var(--cg-accent-fonce); color: #fff; }
.cg-btn--ligne { background: transparent; border-color: var(--cg-ligne-2); }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=url], input[type=number], input[type=date], select, textarea, .form-control, .form-select {
  max-width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--cg-ligne-2); border-radius: var(--cg-rayon-petit);
  background: var(--cg-surface); color: var(--cg-texte); font: inherit;
}
textarea { min-height: 100px; }
label { font-weight: 500; }

/* ------------------------------------------------------------------ en-tête */
.cg-entete { position: sticky; top: 0; z-index: 100; background: var(--cg-entete); border-bottom: 3px solid var(--cg-accent); color: var(--cg-entete-texte); }
.cg-entete-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; min-height: 64px; }
.cg-logo { display: flex; flex: none; }
.cg-logo img { display: block; height: 26px; width: auto; }
.cg-nav { flex: 1 1 420px; min-width: 0; }
.cg-nav ul { list-style: none; margin: 0; padding: 0; }
.cg-nav > ul, .cg-nav .mod-menu { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.cg-nav li { position: relative; }
.cg-nav a, .cg-nav .nav-header, .cg-nav .mod-menu__separator {
  display: block; padding: 10px 12px; border-radius: var(--cg-rayon-petit); color: var(--cg-entete-texte); text-decoration: none;
  font: 600 16px/1.2 var(--cg-police-titre); text-transform: uppercase; letter-spacing: .03em;
}
.cg-nav a:hover, .cg-nav li.active > a, .cg-nav li.current > a, .cg-nav a[aria-current] { color: #fff; background: var(--cg-bandeau-2); }
.cg-nav li ul {
  position: absolute; left: 0; top: 100%; z-index: 110; min-width: 240px; padding: 6px; display: none;
  background: var(--cg-entete); border-top: 3px solid var(--cg-accent); border-radius: 0 0 var(--cg-rayon) var(--cg-rayon); box-shadow: var(--cg-ombre-haute);
}
.cg-nav li ul a { text-transform: none; font-size: 16px; letter-spacing: 0; }
.cg-nav li:hover > ul, .cg-nav li:focus-within > ul, .cg-nav li.cg-ouvert > ul { display: block; }
.cg-nav li ul ul { left: 100%; top: 0; border-top: 0; }
.cg-outils { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cg-recherche input[type=search], .cg-recherche input[type=text] {
  width: 210px; min-height: 40px; border: 0; background: var(--cg-bandeau-2); color: #fff;
}
.cg-recherche input::placeholder { color: #a2a2aa; }
.cg-recherche .btn, .cg-recherche button { display: none; }
.cg-theme-btn {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--cg-rayon-petit);
  background: var(--cg-bandeau-2); color: #fff; cursor: pointer;
}
.cg-ico-lune { display: block; }
.cg-ico-soleil { display: none; }
html[data-theme="sombre"] .cg-ico-lune { display: none; }
html[data-theme="sombre"] .cg-ico-soleil { display: block; }
.cg-recherche-btn {
  display: none; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; border-radius: var(--cg-rayon-petit);
  background: var(--cg-bandeau-2); color: #fff; cursor: pointer;
}
/* Ordinateur : en-tête sur une rangée (logo, menu, outils). Entre 961 et 1499 px, la recherche passe derrière une loupe
   et le compte devient une icône ; « Inscription » reste dans la fenêtre de connexion et dans le menu mobile. */
@media (min-width: 961px) {
  .cg-nav { flex: 1 1 0; }
  .cg-nav > ul > li > a, .cg-nav > ul > li > .nav-header, .cg-nav > ul > li > .mod-menu__separator { padding: 10px 9px; font-size: 15px; }
  .cg-entete .cglogin-inscription-lien { display: none; }
}
/* Méga-menu (ordinateur) : une rubrique dont les sous-entrées sont des intitulés à sous-liste (Guides d'achat, PC Gamer)
   s'ouvre en panneau pleine largeur de l'en-tête, un intitulé par colonne. Les longues listes passent sur deux colonnes. */
@media (min-width: 961px) {
  .cg-entete-in { position: relative; }
  .cg-nav > ul > li:has(> ul > li > ul) { position: static; }
  .cg-nav > ul > li:has(> ul > li > ul) > ul {
    left: 0; right: 0; top: 100%; min-width: 0; margin: 0 var(--cg-gouttiere); gap: 18px 28px; padding: 20px 24px 24px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); max-height: calc(100vh - 120px); overflow-y: auto;
  }
  .cg-nav > ul > li:has(> ul > li > ul) > ul::before { content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 26px; }
  .cg-nav > ul > li:has(> ul > li > ul):hover > ul,
  .cg-nav > ul > li:has(> ul > li > ul):focus-within > ul,
  .cg-nav > ul > li:has(> ul > li > ul).cg-ouvert > ul { display: grid; }
  .cg-nav li li > .nav-header {
    display: block; padding: 0 0 8px; margin-bottom: 6px; border-bottom: 1px solid #2a2a2e; border-radius: 0; background: none;
    color: #fff; font: 700 14px/1.2 var(--cg-police-titre); letter-spacing: .08em; text-transform: uppercase;
  }
  .cg-nav li li > ul { position: static; display: block; min-width: 0; padding: 0; border: 0; box-shadow: none; background: none; }
  .cg-nav li li > ul > li { break-inside: avoid; }
  .cg-nav li li > ul a { padding: 5px 0; background: none; color: #c9c9cf; font: 400 14px/1.35 var(--cg-police-texte); text-transform: none; letter-spacing: 0; }
  .cg-nav li li > ul a:hover, .cg-nav li li > ul a:focus-visible { background: none; color: #fff; text-decoration: underline; }
  .cg-nav > ul > li:has(> ul > li > ul) > ul { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; }
  .cg-nav li li:has(> ul > li:nth-child(9)) { grid-column: span 2; }
  .cg-nav li li > ul:has(> li:nth-child(13)) { columns: 2; column-gap: 24px; }
  .cg-nav li li > ul a { overflow-wrap: anywhere; }
}
@media (min-width: 1200px) {
  .cg-nav > ul > li:has(> ul > li > ul) > ul { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .cg-entete-in { flex-wrap: nowrap; }
  .cg-nav > ul, .cg-nav .mod-menu { flex-wrap: nowrap; white-space: nowrap; }
}
@media (min-width: 961px) and (max-width: 1499px) {
  .cg-recherche-btn { display: grid; }
  .cg-recherche {
    position: absolute; top: 100%; right: max(var(--cg-gouttiere), calc((100vw - var(--cg-largeur)) / 2 + var(--cg-gouttiere))); z-index: 120;
    display: none; width: min(420px, calc(100vw - 40px)); padding: 12px; background: var(--cg-entete); border-radius: 0 0 var(--cg-rayon) var(--cg-rayon);
    box-shadow: var(--cg-ombre-haute);
  }
  .cg-entete--recherche .cg-recherche { display: block; }
  .cg-recherche input[type=search], .cg-recherche input[type=text] { width: 100%; }
  .cg-recherche-btn[aria-expanded="true"] { background: var(--cg-accent); }
  .cg-compte .cglogin-ouvrir > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cg-compte .cglogin-ouvrir { width: 44px; height: 44px; justify-content: center; padding: 0; border-radius: var(--cg-rayon-petit); background: var(--cg-bandeau-2); }
}
.cg-compte { color: #fff; }
.cg-compte a, .cg-compte summary { color: #fff; }
.cg-cta { height: 40px; }
.cg-burger { display: none; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 0; border-radius: var(--cg-rayon-petit); background: var(--cg-bandeau-2); cursor: pointer; }
.cg-burger-barres, .cg-burger-barres::before, .cg-burger-barres::after { display: block; width: 20px; height: 2px; margin: 0 auto; background: #fff; position: relative; transition: transform .2s; }
.cg-burger-barres::before, .cg-burger-barres::after { content: ""; position: absolute; left: 0; }
.cg-burger-barres::before { top: -6px; }
.cg-burger-barres::after { top: 6px; }
.cg-burger[aria-expanded="true"] .cg-burger-barres { background: transparent; }
.cg-burger[aria-expanded="true"] .cg-burger-barres::before { transform: translateY(6px) rotate(45deg); }
.cg-burger[aria-expanded="true"] .cg-burger-barres::after { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------------------------------------------ bandeaux */
.cg-banniere { background: var(--cg-bandeau); color: #fff; padding: 20px 0; }
.cg-bandeau { background: var(--cg-bandeau); color: #b9b9bf; padding: 12px 0; font-size: 14px; }
.cg-bandeau a { color: #d8d8dc; text-decoration: none; }
.cg-bandeau a:hover { color: #fff; }
.cg-bandeau ol, .cg-bandeau ul { display: flex; flex-wrap: wrap; gap: 4px 8px; list-style: none; margin: 0; padding: 0; }
.cg-bandeau li + li::before { content: "/"; margin-right: 8px; color: #6f6f76; }
/* Fil d'Ariane natif : l'icône « vous êtes ici » ouvre la liste, le séparateur ne vaut qu'entre deux étapes. */
.cg-bandeau .mod-breadcrumbs__divider { display: none; }
/* Pages qui chargent Bootstrap (forum, compte) : son séparateur de fil d'Ariane remplacé par celui du gabarit. */
.cg-bandeau .breadcrumb-item + .breadcrumb-item { padding-left: 0; }
.cg-bandeau .breadcrumb-item + .breadcrumb-item::before { content: "/"; float: none; padding: 0; margin-right: 8px; color: #6f6f76; }
.cg-bandeau .mod-breadcrumbs__divider + .breadcrumb-item::before { content: none; }
.cg-bandeau .mod-breadcrumbs__divider + li::before { content: none; }
.cg-bandeau .mod-breadcrumbs { padding: 0 !important; margin: 0; }
.cg-bandeau .mod-breadcrumbs .active span { color: #b9b9bf; }
/* Image d'en-tête des fiches : jamais plus haute qu'un écran (les visuels portrait prenaient toute la page). */
.cg-lecture .cg-image img { width: 100%; max-height: min(70vh, 560px); object-fit: cover; }
.cg-bandeau .divider, .cg-bandeau .icon-location { display: none; }

/* ------------------------------------------------------------------ grille de page */
.cg-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 24px; padding-bottom: 12px; align-items: start; }
.cg-avec-gauche .cg-grille { grid-template-columns: 260px minmax(0, 1fr); }
.cg-avec-droite .cg-grille { grid-template-columns: minmax(0, 1fr) 320px; }
.cg-avec-gauche.cg-avec-droite .cg-grille { grid-template-columns: 240px minmax(0, 1fr) 300px; }
.cg-colonne { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 84px; }
.cg-principal { min-width: 0; outline: none; }
.cg-lecture .cg-principal { width: 100%; max-width: var(--cg-largeur-lecture); margin: 0 auto; font-size: var(--cg-taille-lecture); line-height: 1.65; }
.cg-zone { display: grid; gap: 16px; margin: 20px auto 0; }
.cg-zone--bas { margin-top: 48px; }

/* Carte de module (chrome « cgcarte ») */
.cg-carte { background: var(--cg-surface); border-radius: var(--cg-rayon); box-shadow: var(--cg-ombre); overflow: hidden; }
.cg-carte-titre {
  margin: 0; padding: 12px 16px; background: var(--cg-entete); color: #fff; border-bottom: 3px solid var(--cg-accent);
  font: 700 20px/1.15 var(--cg-police-titre);
}
.cg-carte-titre a { color: inherit; text-decoration: none; }
.cg-carte-corps { padding: 14px 16px; }
.cg-carte--nue { background: transparent; box-shadow: none; }
.cg-carte--nue > .cg-carte-titre { background: none; color: var(--cg-texte); border: 0; padding: 0 0 10px; font-size: 28px; }
.cg-carte--nue > .cg-carte-corps { padding: 0; }

/* Listes de modules (liens, derniers articles, menus de colonne) */
.cg-carte-corps ul { list-style: none; margin: 0; padding: 0; }
.cg-carte-corps ul li + li { border-top: 1px solid var(--cg-ligne); }
.cg-carte-corps ul li > a { display: block; padding: 9px 0; color: var(--cg-texte); text-decoration: none; font-weight: 500; }
.cg-carte-corps ul li > a:hover { color: var(--cg-accent-texte); }

/* Pastilles et étiquettes */
.cg-pastille, .badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 3px; background: var(--cg-surface-2); color: var(--cg-texte); font-size: 13px; font-weight: 500;
}
.cg-sur-titre { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cg-accent-texte); }

/* Messages Joomla */
joomla-alert, .alert { display: block; margin: 0 0 16px; padding: 12px 16px; border-radius: var(--cg-rayon); background: var(--cg-surface); border-left: 4px solid var(--cg-accent); box-shadow: var(--cg-ombre); }

/* Pagination */
.pagination, .cg-pagination ul { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 20px 0; }
.pagination .page-link, .pagination a, .pagination span {
  display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: var(--cg-rayon-petit);
  background: var(--cg-surface); color: var(--cg-texte); text-decoration: none; box-shadow: var(--cg-ombre);
}
.pagination .active .page-link, .pagination .active a, .pagination [aria-current] { background: var(--cg-actif); color: var(--cg-actif-texte); }
.pagination .disabled .page-link { opacity: .5; }

/* ------------------------------------------------------------------ articles (K2 et Joomla) */
.cg-article { display: flex; flex-direction: column; gap: 22px; }
.cg-article-tete { display: flex; flex-direction: column; gap: 14px; }
.cg-article-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 13px; color: var(--cg-discret-2); }
.cg-article-meta a { color: inherit; }
.cg-article h1 { margin: 0; }
.cg-chapo { margin: 0; font-size: 19px; line-height: 1.6; color: var(--cg-discret); }
.cg-chapo p:last-child { margin-bottom: 0; }
.cg-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.cg-pastille-cle { color: var(--cg-discret-2); }
/* Bons plans par famille (catégorie 145 et ses pages) : pastilles-liens, celle de la page en cours en noir. */
a.cg-pastille { text-decoration: none; }
a.cg-pastille:hover { color: var(--cg-accent-texte); }
a.cg-pastille[aria-current="page"] { background: var(--cg-actif); color: var(--cg-actif-texte); }
.cg-familles { margin: 2px 0 18px; }
.cg-image { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cg-image img { width: 100%; border-radius: var(--cg-rayon-image); display: block; }
.cg-image figcaption { font-size: 14px; color: var(--cg-discret-2); }
.cg-article-corps > :first-child { margin-top: 0; }
.cg-article-corps h2 { margin-top: 1.6em; }
.cg-article-corps p, .cg-article-corps li { color: var(--cg-discret); }
.cg-article-corps img { border-radius: var(--cg-rayon); }
.cg-article-corps table { width: 100%; border-collapse: collapse; background: var(--cg-surface); border-radius: var(--cg-rayon); overflow: hidden; box-shadow: var(--cg-ombre); font-size: 15px; display: block; overflow-x: auto; }
.cg-article-corps th, .cg-article-corps td { padding: 10px 12px; border-bottom: 1px solid var(--cg-ligne); text-align: left; vertical-align: top; }
.cg-article-corps th { background: var(--cg-surface-2); font-weight: 600; }
.cg-article-corps blockquote {
  margin: 4px 0; padding: 22px 26px; background: var(--cg-surface); border-radius: var(--cg-rayon); box-shadow: var(--cg-ombre);
  font: 700 26px/1.2 var(--cg-police-titre); color: var(--cg-texte);
}
.cg-encart { padding: 18px 22px; background: var(--cg-surface); border-radius: var(--cg-rayon); box-shadow: var(--cg-ombre); }
.cg-encart > :last-child { margin-bottom: 0; }
.cg-appel {
  display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding: 18px 22px; border-radius: var(--cg-rayon);
  background: var(--cg-entete); color: #fff;
}
.cg-appel p { flex: 1 1 300px; margin: 0; color: #fff; }
.cg-mots-cles { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; }
.cg-mots-cles a { text-decoration: none; }
.cg-navigation { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cg-navigation a { display: flex; flex-direction: column; max-width: 48%; padding: 12px 16px; background: var(--cg-surface); border-radius: var(--cg-rayon); box-shadow: var(--cg-ombre); color: var(--cg-texte); text-decoration: none; }
.cg-navigation a span { font-size: 13px; color: var(--cg-discret-2); }
.cg-navigation a:hover { color: var(--cg-accent-texte); }

/* Sommaire automatique des articles (remplace l'onglet « Nav » d'any_module) */
.cg-sommaire { padding: 14px 18px; background: var(--cg-surface); border-radius: var(--cg-rayon); box-shadow: var(--cg-ombre); font-size: 15px; }
.cg-sommaire summary { cursor: pointer; font: 700 20px/1.2 var(--cg-police-titre); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.cg-sommaire summary::after { content: "+"; font-size: 22px; color: var(--cg-accent-texte); }
.cg-sommaire[open] summary::after { content: "–"; }
.cg-sommaire ol { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.cg-sommaire a { color: var(--cg-texte); text-decoration: none; }
.cg-sommaire a:hover, .cg-sommaire a.cg-courant { color: var(--cg-accent-texte); }
.cg-sommaire .cg-s-niv3 { margin-left: 14px; font-size: 14px; }
@media (min-width: 1300px) {
  .cg-lecture .cg-sommaire--flottant {
    position: fixed; top: 96px; left: calc(50% + var(--cg-largeur-lecture) / 2 + 24px); width: 260px; max-height: calc(100vh - 120px); overflow: auto;
  }
}

/* Listes de contenus en cartes (catégories K2, derniers articles) */
.cg-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0 0 20px; }
.cg-carte-contenu { display: flex; flex-direction: column; background: var(--cg-surface); border-radius: var(--cg-rayon); box-shadow: var(--cg-ombre); overflow: hidden; }
.cg-carte-contenu > a { display: flex; flex-direction: column; flex: 1; color: var(--cg-texte); text-decoration: none; }
.cg-carte-contenu img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--cg-surface-2); }
.cg-carte-contenu .cg-c-corps { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.cg-carte-contenu .cg-c-titre { font: 700 21px/1.1 var(--cg-police-titre); }
.cg-carte-contenu .cg-c-resume { font-size: 14px; color: var(--cg-discret-2); }
.cg-carte-contenu .cg-c-date { margin-top: auto; font-size: 13px; color: var(--cg-discret-2); }
.cg-carte-contenu > a:hover .cg-c-titre { color: var(--cg-accent-texte); }
.cg-categorie-tete { margin-bottom: 18px; }
.cg-categorie-tete h1 { margin: 0 0 8px; }
.cg-categorie-desc { color: var(--cg-discret); max-width: 80ch; }

/* ------------------------------------------------------------------ pied */
.cg-pied { margin-top: 48px; background: var(--cg-entete); color: #b9b9bf; font-size: 14px; border-top: 3px solid var(--cg-accent); }
.cg-pied-grille {
  display: grid; grid-template-columns: minmax(260px, 1.4fr) repeat(auto-fit, minmax(180px, 1fr)); gap: 28px 40px; padding-top: 36px; padding-bottom: 32px;
}
.cg-pied-marque p { margin: 14px 0 16px; max-width: 42ch; line-height: 1.5; }
.cg-pied-logo { display: block; height: 26px; width: auto; }
.cg-pied a { color: #d8d8dc; text-decoration: none; }
.cg-pied a:hover { color: #fff; text-decoration: underline; }
.cg-pied-titre { margin: 0 0 12px; font: 700 15px/1.2 var(--cg-police-titre); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.cg-pied-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cg-pied-col p { margin: 0 0 8px; text-align: left !important; color: inherit !important; }
.cg-pied-col img { float: none !important; display: inline-block !important; height: 40px !important; width: auto !important; margin: 0 8px 8px 0 !important; }
.cg-pied-col br { display: none; }
.cg-pied-reseaux { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cg-pied-reseaux a { display: inline-flex; align-items: center; gap: 10px; }
.cg-pied-reseaux svg { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--cg-bandeau-2); color: #fff; }
.cg-pied-reseaux small { display: block; font-size: 12px; color: #a2a2aa; }
@media (max-width: 900px) {
  .cg-pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .cg-pied-marque { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .cg-pied-grille { grid-template-columns: minmax(0, 1fr); } }
.cg-pied-bas { border-top: 1px solid #2a2a2e; font-size: 13px; color: #a2a2aa; }
.cg-pied-bas-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 14px; padding-bottom: 18px; }
.cg-pied-legal ul { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; }
.cg-copyright { margin: 0; }
.cg-cookies {
  position: fixed; left: 16px; bottom: 16px; z-index: 1100; width: min(440px, calc(100vw - 32px)); padding: 16px 18px;
  border-radius: var(--cg-rayon); background: var(--cg-entete); border-top: 3px solid var(--cg-accent); color: #d8d8dc;
  box-shadow: var(--cg-ombre-haute); font-size: 14px; line-height: 1.5;
}
.cg-cookies[hidden] { display: none; }
.cg-cookies p { margin: 0 0 10px; }
.cg-cookies-titre { font: 700 18px/1.1 var(--cg-police-titre); color: #fff; }
.cg-cookies-actions { display: flex; gap: 8px; }
.cg-cookies-actions .cg-btn { flex: 1 1 0; min-height: 44px; }
/* Refuser aussi visible qu'Accepter (CNIL) : même taille, même typographie, bouton plein. */
.cg-cookies .cg-btn { font: 700 15px/1 var(--cg-police-titre); text-transform: uppercase; letter-spacing: .04em; }
.cg-cookies .cg-btn--ligne { color: #fff; background: var(--cg-bandeau-2); border-color: #4a4a50; }
.cg-lien-cookies { padding: 0; border: 0; background: none; color: #d8d8dc; font: inherit; text-decoration: underline; cursor: pointer; }
.cg-haut {
  position: fixed; right: 16px; bottom: 16px; z-index: 90; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--cg-actif); color: var(--cg-actif-texte); box-shadow: var(--cg-ombre-haute); cursor: pointer;
}

/* ------------------------------------------------------------------ contenus riches en mode sombre (« papier ») */
html[data-theme="sombre"] .cg-article-corps--riche {
  --cg-surface: #ffffff; --cg-surface-2: #f2f2f3; --cg-ligne: #ececee; --cg-ligne-2: #e4e4e7; --cg-texte: #1b1b1e;
  --cg-discret: #4f4f56; --cg-discret-2: #5f5f66; --cg-accent: #b00000; --cg-accent-texte: #b00000; --cg-accent-doux: #fbf3f3;
  --cg-actif: #161618; --cg-actif-texte: #ffffff; --cg-ombre: 0 1px 2px rgba(0, 0, 0, .06);
  color-scheme: light; background: #fff; color: #1b1b1e; padding: 24px clamp(16px, 3vw, 32px); border-radius: var(--cg-rayon); margin-top: 8px;
}
html[data-theme="sombre"] .cg-article-corps--riche h2, html[data-theme="sombre"] .cg-article-corps--riche h3,
html[data-theme="sombre"] .cg-article-corps--riche h4 { color: #1b1b1e; }

/* ------------------------------------------------------------------ pages de compte (connexion, inscription, oublis) */
.cg-compte-carte, .com-users-reset, .com-users-remind, .com-users-profile, .com-users-profile__edit {
  max-width: 540px; margin: 8px auto 28px; padding: 26px clamp(18px, 4vw, 34px); background: var(--cg-surface); border-radius: var(--cg-rayon);
  box-shadow: var(--cg-ombre); border-top: 3px solid var(--cg-accent);
}
.cg-compte-tete h1 { margin: 0 0 8px; font-size: clamp(28px, 4vw, 38px); }
.cg-compte-tete p { margin: 0 0 18px; color: var(--cg-discret); }
.cg-compte-atouts { margin: 0 0 18px; padding-left: 18px; color: var(--cg-discret); }
.cg-compte-atouts li + li { margin-top: 4px; }
.cg-compte-carte fieldset, .com-users-reset fieldset, .com-users-remind fieldset { margin: 0; padding: 0; border: 0; }
.cg-compte-carte legend, .com-users-reset legend, .com-users-remind legend { margin: 14px 0 8px; font: 700 18px/1.2 var(--cg-police-titre); }
.cg-compte-carte .control-group, .com-users-reset .control-group, .com-users-remind .control-group { margin-bottom: 14px; }
.cg-compte-carte label, .com-users-reset label, .com-users-remind label { display: block; margin-bottom: 4px; font-weight: 600; }
.cg-compte-carte input[type=text], .cg-compte-carte input[type=password], .cg-compte-carte input[type=email],
.com-users-reset input[type=email], .com-users-remind input[type=email] { width: 100%; min-height: 46px; }
.cg-compte-carte .input-group { display: flex; }
.cg-compte-carte .input-group > input { flex: 1; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cg-compte-carte .input-group > .btn, .cg-compte-carte .input-group-text { min-height: 46px; border: 1px solid var(--cg-ligne-2); border-left: 0; border-radius: 0 var(--cg-rayon-petit) var(--cg-rayon-petit) 0; background: var(--cg-surface-2); }
.cg-compte-carte .form-check { display: flex; align-items: center; gap: 8px; margin: 4px 0 16px; }
.cg-compte-carte .form-check label { margin: 0; font-weight: 500; }
.cg-compte-carte .btn-primary, .com-users-reset .btn-primary, .com-users-remind .btn-primary {
  width: 100%; min-height: 48px; border: 0 !important; background: var(--cg-accent) !important; color: #fff !important;
}
.cg-compte-carte .btn-primary:hover { background: var(--cg-accent-fonce) !important; }
.cg-compte-carte .list-group { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.cg-compte-carte .list-group-item { padding: 0; border: 0; background: none; color: var(--cg-accent-texte); font-weight: 500; }
.cg-compte-inscription { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--cg-ligne); color: var(--cg-discret); }
.cg-compte-carte .star, .cg-compte-carte .form-control-feedback { color: var(--cg-accent-texte); }

/* ------------------------------------------------------------------ bon plan (fiche K2 des catégories bons plans) */
.cg-deal { margin: 18px 0 6px; padding: 16px 18px; border-radius: var(--cg-rayon); background: var(--cg-surface); box-shadow: var(--cg-ombre); border-left: 4px solid var(--cg-ok); }
.cg-deal--jour { border-left-color: var(--cg-attente); }
.cg-deal--expire { border-left-color: var(--cg-discret-2); background: var(--cg-surface-2); }
.cg-deal-etat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; font-weight: 600; color: var(--cg-ok); }
.cg-deal--jour .cg-deal-etat { color: #a86a00; }
html[data-theme="sombre"] .cg-deal--jour .cg-deal-etat { color: var(--cg-attente); }
.cg-deal--expire .cg-deal-etat { color: var(--cg-discret); }
.cg-deal-sponso { font-weight: 500; color: var(--cg-texte); }
.cg-deal-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.cg-deal-prix { font: 700 34px/1 var(--cg-police-titre); color: var(--cg-accent-texte); }
.cg-deal--expire .cg-deal-prix { color: var(--cg-discret-2); text-decoration: line-through; }
.cg-deal-marchand { font-weight: 600; }
.cg-deal-code { display: inline-flex; align-items: center; gap: 8px; }
.cg-deal-code code { padding: 6px 10px; border: 1px dashed var(--cg-accent); border-radius: var(--cg-rayon-petit); font: 700 15px/1 ui-monospace, Consolas, monospace; letter-spacing: .06em; }
.cg-deal-ligne .cg-btn--accent { margin-left: auto; min-height: 46px; }
.cg-deal-note { margin: 10px 0 0; font-size: 13px; color: var(--cg-discret-2); }
.cg-image--expire img { filter: grayscale(1) opacity(.6); }
.cg-etat { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 3px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }
.cg-etat--ok { background: var(--cg-ok); color: #fff; }
.cg-etat--fini { background: var(--cg-surface-2); color: var(--cg-discret); }
@media (max-width: 560px) { .cg-deal-ligne .cg-btn--accent { margin-left: 0; width: 100%; } }

/* Fiches : pas de fil « Dernières publications » au-dessus de l'article (maquette C, lecture sans distraction). */
.cg-lecture .cg-zone--top-a:has(> .cg-module--mod_cgfil:only-child) { display: none; }

/* ------------------------------------------------------------------ accueil (blocs mod_cgaccueil) */
/* La colonne de l'accueil est plus haute que l'écran : pas de colonne collante, sinon son bas reste hors de vue. */
.cg-accueil .cg-colonne { position: static; }
.cg-accueil .cg-principal { display: flex; flex-direction: column; gap: 20px; }
.cg-accueil .cg-principal > .cg-zone { margin: 0; }
.cg-accueil .blog-featured:not(:has(.items-leading, .items-row, .blog-item)) { display: none; }
.cg-accueil .cg-zone--top-b { margin-top: 20px; }
/* Bloc affiché seulement sur téléphone ou seulement sur ordinateur (réglage « affichage » de mod_cgaccueil). */
@media (min-width: 961px) { .cgh--mobile { display: none !important; } }
@media (max-width: 960px) { .cgh--ordi { display: none !important; } }

/* ------------------------------------------------------------------ mobile */
@media (max-width: 1100px) {
  .cg-avec-gauche.cg-avec-droite .cg-grille { grid-template-columns: 240px minmax(0, 1fr); }
  .cg-avec-gauche.cg-avec-droite .cg-colonne--droite { grid-column: 1 / -1; position: static; }
}
/* Contenus rédigés avec des largeurs fixes (styles en ligne des anciens articles) : jamais plus larges que la colonne. */
.cg-article-corps { overflow-x: clip; overflow-wrap: anywhere; }
/* Anciens articles : polices et bleu « lien » posés en ligne par l'éditeur, ramenés au design system. */
.cg-article-corps [style*="font-family"] { font-family: inherit !important; }
.cg-article-corps a[style*="color: #0000ff"], .cg-article-corps a [style*="color: #0000ff"], .cg-article-corps span[style*="color: #0000ff"] { color: var(--cg-accent-texte) !important; }
.cg-article-corps div, .cg-article-corps section, .cg-article-corps figure, .cg-article-corps iframe, .cg-article-corps video { max-width: 100% !important; }
#ampz_inline_mobile { box-sizing: border-box; max-width: 100vw; }

@media (max-width: 960px) {
  .cg-burger { display: block; order: 3; margin-left: 0; }
  .cg-entete-in { min-height: 56px; flex-wrap: wrap; gap: 8px 10px; }
  .cg-logo { flex: 1 1 0; min-width: 0; }
  .cg-logo img { width: 100%; max-width: 300px; height: 24px; object-fit: contain; object-position: left center; }
  /* En-tête replié : logo, mode clair/sombre et menu sur une seule rangée ; le reste dans le panneau du menu. */
  .cg-outils { order: 2; flex: none; padding-bottom: 0; }
  .cg-outils > :not(.cg-theme-btn) { display: none; }
  .cg-entete.cg-entete--ouvert .cg-outils { order: 11; flex: 1 1 100%; padding-bottom: 12px; }
  .cg-entete.cg-entete--ouvert .cg-outils > * { display: flex; }
  .cg-entete.cg-entete--ouvert .cg-recherche, .cg-entete.cg-entete--ouvert .cg-cta { flex: 1 1 100%; }
  .cg-nav { order: 10; flex-basis: 100%; display: none; padding-bottom: 6px; max-height: calc(100vh - 160px); overflow: auto; }
  .cg-nav.cg-ouvert { display: block; }
  .cg-nav > ul, .cg-nav .mod-menu { flex-direction: column; }
  .cg-nav li ul { position: static; display: none; box-shadow: none; border-top: 0; padding-left: 14px; background: transparent; }
  .cg-nav li.cg-ouvert > ul { display: block; }
  .cg-nav li:hover > ul { display: none; }
  .cg-nav li.cg-ouvert:hover > ul { display: block; }
  .cg-recherche input[type=search], .cg-recherche input[type=text] { width: 100%; }
  .cg-recherche form, .cg-recherche .mod-finder, .cg-recherche .awesomplete { width: 100%; }
  .cg-grille, .cg-avec-gauche .cg-grille, .cg-avec-droite .cg-grille, .cg-avec-gauche.cg-avec-droite .cg-grille { grid-template-columns: minmax(0, 1fr); }
  .cg-colonne { position: static; }
  .cg-colonne--gauche { order: 2; }
  .cg-copyright { margin-left: 0; }
}
@media (max-width: 560px) {
  :root { --cg-gouttiere: 16px; }
  .cg-cta { flex: 1 1 auto; }
  .cg-lecture .cg-image img { border-radius: 0; margin: 0 calc(-1 * var(--cg-gouttiere)); width: calc(100% + 2 * var(--cg-gouttiere)); max-width: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print {
  .cg-entete, .cg-pied, .cg-colonne, .cg-haut, .cg-bandeau, .cg-zone, .cg-sommaire { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Sous-menus à la souris pilotés par template.js (ordinateur) : le survol seul n'ouvre plus rien, la classe cg-ouvert
   (posée après 120 ms, retirée 400 ms après la sortie) si. Le clavier (focus-within) n'est pas concerné. */
@media (min-width: 961px) {
  .cg-nav--souris > ul > li:hover:not(.cg-ouvert):not(:focus-within) > ul { display: none !important; }
}

/* En-tête ordinateur (22/10) : le menu (environ 700 px) ne passe plus sous les outils. La recherche reste derrière une
   loupe et le compte en icône à toutes les largeurs d'ordinateur (avant : de 961 à 1499 px seulement, et le nom du
   membre connecté prenait 187 px), et le menu se resserre entre 1200 et 1399 px. */
@media (min-width: 1500px) {
  .cg-recherche-btn { display: grid; }
  .cg-recherche {
    position: absolute; top: 100%; right: max(var(--cg-gouttiere), calc((100vw - var(--cg-largeur)) / 2 + var(--cg-gouttiere))); z-index: 120;
    display: none; width: min(420px, calc(100vw - 40px)); padding: 12px; background: var(--cg-entete); border-radius: 0 0 var(--cg-rayon) var(--cg-rayon);
    box-shadow: var(--cg-ombre-haute);
  }
  .cg-entete--recherche .cg-recherche { display: block; }
  .cg-recherche input[type=search], .cg-recherche input[type=text] { width: 100%; }
  .cg-recherche-btn[aria-expanded="true"] { background: var(--cg-accent); }
  .cg-compte .cglogin-ouvrir > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cg-compte .cglogin-ouvrir { width: 44px; height: 44px; justify-content: center; padding: 0; border-radius: var(--cg-rayon-petit); background: var(--cg-bandeau-2); }
}
@media (min-width: 961px) {
  .cg-compte .cglogin-membre > summary > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .cg-nav > ul > li > a, .cg-nav > ul > li > .nav-header, .cg-nav > ul > li > .mod-menu__separator { padding: 10px 6px; font-size: 14px; }
}

/* ------------------------------------------------------------------ articles K2 : repasse du 22/10 (guides, configs PC)
   Les contenus sont rédigés avec leurs propres couleurs en style en ligne (555 dans le guide processeurs) : bleu nuit et
   or du « Top 3 », vert et bleu des comparatifs, jaune des encadrés, bordeaux #800020. Ces fonds sont ramenés aux
   couleurs du site ; le texte des blocs sombres reste blanc, celui des blocs clairs suit --cg-texte. */
.cg-article-corps [style*="linear-gradient(135deg,#0f172a"], .cg-article-corps [style*="linear-gradient(135deg,#1a1a2e"],
.cg-article-corps [style*="linear-gradient(135deg,#1f2937"], .cg-article-corps [style*="background:#111827"],
.cg-article-corps [style*="background: #111827"], .cg-article-corps [style*="background:#374151"], .cg-article-corps [style*="background: #374151"] {
  background: var(--cg-entete) !important;
}
.cg-article-corps [style*="background: #800020"], .cg-article-corps [style*="background:#800020"],
.cg-article-corps [style*="background:#cd7f32"], .cg-article-corps [style*="background: #cd7f32"],
.cg-article-corps [style*="background:#b8860b"], .cg-article-corps [style*="background: #d4a017"],
.cg-article-corps [style*="background:#d4a017"], .cg-article-corps [style*="background:#6b7280"],
.cg-article-corps [style*="background: #16a34a"], .cg-article-corps [style*="background: #6366f1"],
.cg-article-corps [style*="background: #7c3aed"], .cg-article-corps [style*="background: #0ea5e9"] {
  background: var(--cg-accent) !important; color: #fff !important; border-color: var(--cg-accent) !important;
}
.cg-article-corps [style*="background:#fff3cd"], .cg-article-corps [style*="background: #fff3cd"],
.cg-article-corps [style*="background:#f0fdf4"], .cg-article-corps [style*="background:#eff6ff"],
.cg-article-corps [style*="background:#f8f9fa"], .cg-article-corps [style*="background: #f8f9fa"],
.cg-article-corps [style*="background:#f9f9f9"], .cg-article-corps [style*="background-color: #f9f5f0"] {
  background: var(--cg-surface-2) !important; border-color: var(--cg-ligne-2) !important; color: var(--cg-texte);
}
.cg-article-corps [style*="background: #fff;"], .cg-article-corps [style*="background:#fff;"] { background: var(--cg-surface) !important; }
/* Liserés colorés à gauche des encadrés : retirés, l'encadré garde son fond et un coin arrondi. */
.cg-article-corps [style*="border-left"] { border-left: 0 !important; border-radius: var(--cg-rayon) !important; }
/* Cadres colorés des cartes du Top 3 (orange, gris, or) : liseré neutre, la carte du milieu reste mise en avant. */
.cg-article-corps [style*="border:2px solid #cd7f32"], .cg-article-corps [style*="border: 2px solid #cd7f32"],
.cg-article-corps [style*="border:2px solid #d4a017"], .cg-article-corps [style*="border: 2px solid #d4a017"],
.cg-article-corps [style*="solid #b8860b"], .cg-article-corps [style*="solid #9ca3af"] { border-color: rgba(255, 255, 255, .18) !important; }
/* Titres et libellés écrits en couleur fixe (vert, bleu, or, violet) dans les blocs clairs : couleur du texte. */
.cg-article-corps [style*="color:#16a34a"], .cg-article-corps [style*="color:#2563eb"], .cg-article-corps [style*="color:#1d4ed8"],
.cg-article-corps [style*="color:#15803d"], .cg-article-corps [style*="color:#b8860b"], .cg-article-corps [style*="color:#92400e"],
.cg-article-corps [style*="color:#7c3aed"], .cg-article-corps [style*="color:#6366f1"] { color: var(--cg-accent-texte) !important; }

/* Tableaux : la ligne d'en-tête porte son fond sombre en style en ligne, mais chaque cellule recevait le fond clair du
   gabarit (texte blanc sur gris clair, illisible). Les cellules d'une ligne colorée prennent le fond de leur ligne.
   Sur ordinateur le tableau occupe toute la largeur (il restait à 70 % en display:block). */
.cg-article-corps tr[style*="background"] > th, .cg-article-corps tr[style*="background"] > td { background: transparent; color: inherit; }
.cg-article-corps thead tr:not([style]) > th { background: var(--cg-entete); color: #fff; }
@media (min-width: 768px) { .cg-article-corps table { display: table; } }

/* Téléphone : les images flottantes passaient à droite du texte, réduit à une colonne d'environ 100 px. */
@media (max-width: 600px) {
  .cg-article-corps [style*="float"], .cg-article-corps img[align], .cg-article-corps [class*="float-"] {
    float: none !important; width: auto !important; max-width: 100% !important; margin: 12px auto !important; display: block;
  }
}

/* Méta de l'article : plus de « · » en début de ligne quand la catégorie passe seule sur la première ligne (téléphone). */
.cg-article-meta > span[aria-hidden="true"] { opacity: .6; }
@media (max-width: 600px) { .cg-article-meta > span[aria-hidden="true"] { display: none; } .cg-article-meta { gap: 2px 12px; } }

/* Fin d'article : révision et appel avec deux boutons. */
.cg-maj { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px 18px; border-radius: var(--cg-rayon);
  background: var(--cg-surface); box-shadow: var(--cg-ombre); font-size: 14px; color: var(--cg-discret); }
.cg-maj svg { flex: none; margin-top: 2px; color: var(--cg-accent-texte); }
.cg-appel-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-btn--ligne-clair { background: transparent; border: 1px solid #4a4a50; color: #fff; }
.cg-btn--ligne-clair:hover { background: var(--cg-bandeau-2); color: #fff; }

/* Boutons de partage (AmpZ) : sobres, aux couleurs du site, au lieu des aplats Facebook / X / Gmail. */
.ampz_container .ampz_btn, .ampz_container a.ampz_btn {
  background: var(--cg-surface) !important; color: var(--cg-texte) !important; border: 1px solid var(--cg-ligne-2) !important;
  box-shadow: none !important; border-radius: var(--cg-rayon-petit) !important; text-shadow: none !important;
}
.ampz_container .ampz_btn:hover { border-color: var(--cg-accent) !important; color: var(--cg-accent-texte) !important; }
.ampz_container .ampz_btn i, .ampz_container .ampz_btn svg { color: inherit !important; fill: currentColor !important; }

/* Barre « Comparer les prix » sur téléphone (template.js). */
.cg-barre-prix { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--cg-entete); border-top: 3px solid var(--cg-accent); box-shadow: 0 -4px 16px rgba(0, 0, 0, .25); }
.cg-barre-prix .cg-btn { display: flex; justify-content: center; width: 100%; min-height: 46px; }
@media (min-width: 768px) { .cg-barre-prix { display: none !important; } }

/* ------------------------------------------------------------------ articles : colonne de droite (22/10)
   Position sidebar-lecture (index.php) : article 760 px et colonne 320 px à partir de 1200 px ; la colonne n'est plus
   collante en bloc (trop haute), seul le sommaire, rangé en dernier par template.js, l'est. En dessous, elle passe sous
   l'article. */
@media (min-width: 1200px) {
  .cg-lecture.cg-avec-droite .cg-grille { grid-template-columns: minmax(0, var(--cg-largeur-lecture)) 320px; justify-content: center; column-gap: 40px; }
  .cg-lecture.cg-avec-droite .cg-principal { margin: 0; }
  .cg-lecture .cg-colonne--droite { position: static; align-self: stretch; }
  .cg-colonne .cg-sommaire--colonne { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow: auto; }
}
@media (max-width: 1199px) {
  .cg-lecture.cg-avec-droite .cg-grille { grid-template-columns: minmax(0, 1fr); }
  .cg-lecture.cg-avec-droite .cg-principal { margin: 0 auto; }
  .cg-lecture .cg-colonne--droite { position: static; width: 100%; max-width: var(--cg-largeur-lecture); margin: 0 auto; }
}
.cg-sommaire-nb { margin-left: auto; margin-right: 10px; font: 500 13px/1 var(--cg-police-texte); color: var(--cg-discret-2); }
.cg-sommaire-progres { height: 3px; margin: 10px 0 2px; border-radius: 2px; background: var(--cg-surface-2); overflow: hidden; }
.cg-sommaire-progres span { display: block; width: 0; height: 100%; background: var(--cg-accent); transition: width .15s linear; }
.cg-sommaire--colonne ol { font-size: 14px; }
.cg-sommaire--colonne a.cg-courant { font-weight: 600; }
/* « Nos configs PC Gamer » dans la colonne d'un article : liste compacte (prix à droite) plutôt que onze tuiles. */
.cg-colonne--droite .cgh-tuiles { display: flex; flex-direction: column; gap: 0; }
.cg-colonne--droite .cgh-tuile { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 10px;
  min-height: 0; padding: 7px 4px; border: 0; border-bottom: 1px solid var(--cg-ligne); border-radius: 0; background: none; box-shadow: none; }
.cg-colonne--droite .cgh-tuile-niveau { font-size: 13px; }
.cg-colonne--droite .cgh-tuile-prix { font-size: 16px; white-space: nowrap; }
.cg-colonne--droite .cgh-tuile--top { background: var(--cg-surface-2); border-radius: var(--cg-rayon-petit); }
.cg-colonne--droite .cgh-tuile--top { background: none; border-radius: 0; }
.cg-colonne--droite .cgh-tuile--top *, .cg-colonne--droite .cgh-tuile .cgh-tuile-niveau { color: var(--cg-discret); }
.cg-colonne--droite .cgh-tuile .cgh-tuile-prix { color: var(--cg-accent-texte); }
.cg-colonne--droite .cgh-tuile.cg-courant { background: var(--cg-accent-doux); border-radius: var(--cg-rayon-petit); }
.cg-colonne--droite .cgh-tuile.cg-courant .cgh-tuile-niveau { color: var(--cg-texte); font-weight: 600; }

/* Méga-menu (ordinateur, 22/10) : lien seul en tête de panneau (« Toutes nos configs ») sur toute la largeur, au lieu
   d'occuper une case et de rejeter un groupe à la ligne ; autres liens seuls présentés comme des intitulés ; listes de
   9 à 12 entrées sur une colonne (la mosaïque de template.js supprime le vide qu'elles laissaient). */
@media (min-width: 961px) {
  .cg-nav > ul > li:has(> ul > li > ul) > ul { align-items: start; }
  .cg-nav > ul > li:has(> ul > li > ul) > ul > li:first-child:not(:has(> ul)) { grid-column: 1 / -1; }
  .cg-nav > ul > li:has(> ul > li > ul) > ul > li:first-child:not(:has(> ul)) > a {
    display: inline-flex; padding: 8px 14px; border-radius: var(--cg-rayon-petit); background: var(--cg-bandeau-2); color: #fff;
    font: 600 14px/1.2 var(--cg-police-texte); text-transform: none; letter-spacing: 0;
  }
  .cg-nav > ul > li:has(> ul > li > ul) > ul > li:not(:first-child):not(:has(> ul)) > a {
    display: block; padding: 0 0 8px; margin-bottom: 6px; border-bottom: 1px solid #2a2a2e; border-radius: 0; background: none; color: #fff;
    font: 700 14px/1.2 var(--cg-police-titre); letter-spacing: .08em; text-transform: uppercase;
  }
  .cg-nav li li:has(> ul > li:nth-child(9)):not(:has(> ul > li:nth-child(13))) { grid-column: auto; }
  .cg-nav > ul > li > ul.cg-mega--mosaique { grid-auto-rows: 4px; row-gap: 0; }
  .cg-nav > ul > li > ul.cg-mega--mosaique > li { margin-bottom: 18px; }
}

/* ------------------------------------------------------------------ colonne : « Dans la même rubrique » en tuiles (22/10)
   Bloc 870 de mod_cgaccueil (a > img.cgh-rubrique-vignette | span.cgh-rubrique-vignette + span.cgh-rubrique-titre).
   La liste à vignettes de 56 px devient une mosaïque : la première entrée en large, les suivantes deux par deux, titre
   en Rajdhani posé sur l'image sous un dégradé sombre (lisible en clair comme en sombre). Les photos K2 ont des fonds
   disparates (noir, blanc, studio) : le recadrage en cover les met toutes au même format. */
.cg-colonne .cgh-rubrique-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 14px; }
.cg-colonne .cgh-rubrique-liste li,
.cg-colonne .cgh-rubrique-liste li:first-child { padding: 0; border: 0; }
.cg-colonne .cgh-rubrique-liste li:first-child { grid-column: 1 / -1; }
.cg-colonne .cgh-rubrique-liste a {
  position: relative; display: block; overflow: hidden; border-radius: var(--cg-rayon-petit); background: var(--cg-entete);
  isolation: isolate; color: #fff;
}
.cg-colonne .cgh-rubrique-vignette {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; background: var(--cg-entete);
  transition: transform .35s ease, opacity .35s ease;
}
.cg-colonne .cgh-rubrique-liste li:first-child .cgh-rubrique-vignette { aspect-ratio: 16 / 9; }
.cg-colonne .cgh-rubrique-titre {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: flex-end; gap: 6px;
  min-height: 55%; padding: 18px 10px 8px;
  background: linear-gradient(180deg, rgba(10, 10, 12, 0) 0%, rgba(10, 10, 12, .55) 45%, rgba(10, 10, 12, .88) 100%);
  font: 700 16px/1.1 var(--cg-police-titre); letter-spacing: .01em; color: #fff; overflow-wrap: anywhere;
}
.cg-colonne .cgh-rubrique-liste li:first-child .cgh-rubrique-titre { min-height: 45%; padding: 24px 14px 11px; font-size: 21px; }
/* Filet rouge sous le titre, qui s'allonge au survol (rappel de l'onglet actif du menu). */
.cg-colonne .cgh-rubrique-titre::after {
  content: ""; position: absolute; left: 10px; bottom: 0; width: 22px; height: 3px; background: var(--cg-accent);
  transition: width .25s ease;
}
.cg-colonne .cgh-rubrique-liste li:first-child .cgh-rubrique-titre::after { left: 14px; }
.cg-colonne .cgh-rubrique-liste a:hover .cgh-rubrique-vignette,
.cg-colonne .cgh-rubrique-liste a:focus-visible .cgh-rubrique-vignette { transform: scale(1.05); opacity: .9; }
.cg-colonne .cgh-rubrique-liste a:hover .cgh-rubrique-titre,
.cg-colonne .cgh-rubrique-liste a:focus-visible .cgh-rubrique-titre { color: #fff; text-decoration: none; }
.cg-colonne .cgh-rubrique-liste a:hover .cgh-rubrique-titre::after,
.cg-colonne .cgh-rubrique-liste a:focus-visible .cgh-rubrique-titre::after { width: calc(100% - 20px); }
.cg-colonne .cgh-rubrique-liste a:focus-visible { outline: 2px solid var(--cg-accent); outline-offset: 2px; }
/* Entrée sans image K2 : carré sombre au même format, le titre reste lisible. */
.cg-colonne span.cgh-rubrique-vignette { aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--cg-entete), #2a2a2e); }
/* Nombre pair d'entrées : la dernière en large aussi, pour ne pas laisser de trou. */
.cg-colonne .cgh-rubrique-liste li:last-child:nth-child(even) { grid-column: 1 / -1; }
.cg-colonne .cgh-rubrique-liste li:last-child:nth-child(even) .cgh-rubrique-vignette { aspect-ratio: 16 / 9; }
.cg-colonne .cgh-rubrique .cgh-lien { display: inline-flex; align-items: center; gap: 6px; }
.cg-colonne .cgh-rubrique .cgh-lien::after { content: "→"; transition: transform .2s ease; }
.cg-colonne .cgh-rubrique .cgh-lien:hover::after { transform: translateX(3px); }
/* Colonne passée sous l'article (moins de 1200 px) : 760 px de large, la grande tuile prend deux lignes à gauche. */
@media (min-width: 600px) and (max-width: 1199px) {
  .cg-colonne .cgh-rubrique-liste { grid-template-columns: repeat(4, 1fr); }
  .cg-colonne .cgh-rubrique-liste li:first-child { grid-column: span 2; grid-row: span 2; }
  .cg-colonne .cgh-rubrique-liste li:first-child a,
  .cg-colonne .cgh-rubrique-liste li:first-child .cgh-rubrique-vignette { height: 100%; }
  .cg-colonne .cgh-rubrique-liste li:last-child:nth-child(even) { grid-column: auto; }
  .cg-colonne .cgh-rubrique-liste li:last-child:nth-child(even) .cgh-rubrique-vignette { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .cg-colonne .cgh-rubrique-vignette, .cg-colonne .cgh-rubrique-titre::after { transition: none; }
}

/* ------------------------------------------------------------------ blocs mod_cgaccueil : repasse DA du 22/10
   Même famille visuelle que les tuiles « Dans la même rubrique » : photo recadrée, dégradé sombre, titre Rajdhani
   posé dessus. Les règles d'image ne s'appliquent que si le bloc porte une image (:has), sinon le rendu texte reste. */

/* À la une : les tuiles « Jeux PC » à côté de la grande image (img.cgh-jeu-img en premier enfant du lien). */
.cgh-jeu:has(.cgh-jeu-img), .cgh-sous-jeu:has(.cgh-sous-img) { position: relative; overflow: hidden; isolation: isolate; justify-content: flex-start; }
.cgh-jeu-img, .cgh-sous-img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; border-radius: 0; opacity: .8;
  transition: transform .35s ease, opacity .35s ease;
}
.cgh-jeu:has(.cgh-jeu-img)::after, .cgh-sous-jeu:has(.cgh-sous-img)::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 10, 12, .55) 0%, rgba(10, 10, 12, .05) 38%, rgba(10, 10, 12, .9) 100%);
}
.cgh-jeu:has(.cgh-jeu-img) .cgh-jeu-nom, .cgh-sous-jeu:has(.cgh-sous-img) .cgh-sous-nom { margin-top: auto; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.cgh-jeu:has(.cgh-jeu-img) .cgh-jeu-sous, .cgh-sous-jeu:has(.cgh-sous-img) .cgh-note { color: #d8d8dc; }
.cgh-jeu:hover .cgh-jeu-img, .cgh-jeu:focus-visible .cgh-jeu-img,
.cgh-sous-jeu:hover .cgh-sous-img, .cgh-sous-jeu:focus-visible .cgh-sous-img { transform: scale(1.05); opacity: .9; }
.cgh-jeu:has(.cgh-jeu-img):hover { background: var(--cg-bandeau-2, #2a2a2e); }

/* Sous un article : « Quelle config pour les derniers jeux PC ? ». Quatre colonnes pleine largeur (il restait un
   trou à droite avec auto-fill) ; avec image, la carte devient une tuile sombre de même format que « À la une ». */
@media (min-width: 961px) { .cgh-sous--jeux .cgh-sous-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 541px) and (max-width: 960px) { .cgh-sous--jeux .cgh-sous-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cgh-sous-jeu:has(.cgh-sous-img) { min-height: 170px; padding: 14px 16px; background: var(--cg-entete); color: #fff !important; }
.cgh-sous-jeu:has(.cgh-sous-img) .cgh-surtitre { color: #ff6b62; }
.cgh-sous-jeu:has(.cgh-sous-img) .cgh-sous-nom, .cgh-sous-jeu:has(.cgh-sous-img):hover .cgh-sous-nom { color: #fff; }
.cgh-sous-jeu:focus-visible, .cgh-jeu:focus-visible { outline: 2px solid var(--cg-accent); outline-offset: 2px; }

/* Nos configs (accueil) : liseré de couleur remplacé par une jauge à cinq crans (le palier, de « Pas cher » à
   « Hardcore »), libellé et prix sur une ligne chacun. La colonne de lecture garde sa liste compacte. */
.cg-principal .cgh-tuile {
  gap: 2px; padding: 11px 12px 12px; border: 1px solid transparent; border-top: 1px solid transparent; border-radius: var(--cg-rayon-petit);
  transition: transform .15s ease, border-color .15s ease;
}
.cg-principal .cgh-tuile:hover { border-color: var(--cg-accent); color: inherit; }
.cg-principal .cgh-tuile-niveau { overflow: hidden; font-size: 12px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; color: var(--cg-discret-2); }
.cg-principal .cgh-tuile-prix { font-size: 19px; white-space: nowrap; }
.cg-principal .cgh-tuile::after {
  content: ""; height: 4px; margin-top: 8px;
  background: linear-gradient(var(--cg-accent) 0 0) 0 0 / calc(var(--n, 1) * 20%) 100% no-repeat, var(--cg-ligne-2);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(20% - 3px), transparent calc(20% - 3px) 20%);
  mask: repeating-linear-gradient(90deg, #000 0 calc(20% - 3px), transparent calc(20% - 3px) 20%);
}
.cg-principal .cgh-palier-1 { --n: 1; } .cg-principal .cgh-palier-2 { --n: 2; } .cg-principal .cgh-palier-3 { --n: 3; }
.cg-principal .cgh-palier-4 { --n: 4; } .cg-principal .cgh-palier-5 { --n: 5; }
.cg-principal .cgh-tuile--top { background: var(--cg-entete); color: #fff !important; }
.cg-principal .cgh-tuile--top .cgh-tuile-niveau { color: #b9b9bf; opacity: 1; }
.cg-principal .cgh-tuile--top::after { background: linear-gradient(var(--cg-accent) 0 0) 0 0 / calc(var(--n, 1) * 20%) 100% no-repeat, #3a3a40; }

/* Tendance des prix (fiches et guides) : la courbe passe à droite des chiffres (seule sous le texte, une courbe plate
   ressemblait à un trait égaré), plus de liseré gauche (même règle que les encadrés des articles), variations en
   pastilles teintées. */
.cgh-tendance { border-left: 0; }
.cgh-tendance-liste > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 2px; align-items: center; }
.cgh-tendance-liste > li > * { grid-column: 1; }
.cgh-tendance-liste > li > .cgh-courbe { grid-column: 2; grid-row: 1 / span 2; width: 110px; height: 34px; }
.cgh-tendance-liste > li > .cgh-tendance-avis, .cgh-tendance-liste > li > .cgh-tendance-modeles { grid-column: 1 / -1; }
.cgh-tendance-avis { padding-top: 8px; border-top: 1px solid var(--cg-ligne-2); }
.cgh-tendance-chiffres strong, .cgh-tendance-modeles strong {
  display: inline-block; padding: 1px 6px; border-radius: 3px; background: color-mix(in srgb, currentColor 12%, transparent);
}
.cgh-tendance-chiffres strong { font-size: 17px; }
.cgh-tendance-modeles li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 2px 10px; }
.cgh-tendance-modeles a { color: var(--cg-texte); }
.cgh-tendance-modeles a:hover { color: var(--cg-accent-texte); }

/* Demander une config dans une colonne étroite (forum, 210 px) : « 6 étapes · gratuit » passe sous le titre au lieu
   d'être coupé. */
.cgh-bandeau { flex-wrap: wrap; row-gap: 2px; }

@media (prefers-reduced-motion: reduce) {
  .cgh-jeu-img, .cgh-sous-img, .cg-principal .cgh-tuile { transition: none; }
}
/* Mode sombre : la tuile la plus lue (fond d'en-tête) se confondait avec la carte ; liseré gris clair. */
[data-theme="sombre"] .cg-principal .cgh-tuile--top { border-color: #4a4a50; }

/* ------------------------------------------------------------------ accueil : vidéos et photos dans la colonne principale (22/10)
   Modules 874 et 875 (main-bottom, accueil seulement) : la colonne de droite faisait 2 030 px contre 816 pour la
   principale. En rangée : titre et lien sur la même ligne, 3 vidéos en 16/9 puis 6 albums carrés. */
.cgh--main-bottom.cgh-videos, .cgh--main-bottom.cgh-photos {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; padding: 16px 20px 18px;
}
.cgh--main-bottom > .cgh-titre { grid-column: 1 / 3; grid-row: 1; }
.cgh--main-bottom.cgh-videos > .cgh-lien, .cgh--main-bottom > .cgh-photos-pied { grid-column: 3; grid-row: 1; align-self: center; }
.cgh--main-bottom > .cgh-videos-liste, .cgh--main-bottom > .cgh-photos-grille { grid-column: 1 / -1; }
.cgh--main-bottom > .cgh-petit-titre { grid-column: 1; grid-row: 3; }
.cgh--main-bottom > .cgh-videos-rubriques { grid-column: 2 / -1; grid-row: 3; }
.cgh--main-bottom .cgh-videos-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cgh--main-bottom .cgh-videos-liste li + li { border-top: 0; }
.cgh--main-bottom .cgh-videos-liste a { flex-direction: column; gap: 8px; padding: 0; }
.cgh--main-bottom .cgh-videos-vignette { width: 100%; border-radius: var(--cg-rayon-petit); }
.cgh--main-bottom .cgh-videos-vignette img { transition: transform .35s ease; }
.cgh--main-bottom .cgh-videos-liste a:hover .cgh-videos-vignette img { transform: scale(1.04); }
/* Pastille « lecture » au centre de la vignette. */
.cgh--main-bottom .cgh-videos-vignette::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  background: rgba(176, 0, 0, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='%23fff'/%3E%3C/svg%3E") center / 24px no-repeat;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35); transition: transform .2s ease;
}
.cgh--main-bottom .cgh-videos-liste a:hover .cgh-videos-vignette::after { transform: scale(1.1); }
.cgh--main-bottom .cgh-videos-titre { -webkit-line-clamp: 2; }
.cgh--main-bottom .cgh-photos-grille { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.cgh--main-bottom .cgh-photos-grille img { border-radius: var(--cg-rayon-petit); transition: opacity .2s ease; }
.cgh--main-bottom .cgh-photos-grille a:hover img { opacity: .85; }
.cgh--main-bottom .cgh-photos-pied { justify-content: flex-end; }
@media (max-width: 760px) {
  .cgh--main-bottom.cgh-videos, .cgh--main-bottom.cgh-photos { grid-template-columns: minmax(0, 1fr) auto; padding: 16px; }
  .cgh--main-bottom > .cgh-titre { grid-column: 1; }
  .cgh--main-bottom.cgh-videos > .cgh-lien, .cgh--main-bottom > .cgh-photos-pied { grid-column: 2; }
  .cgh--main-bottom > .cgh-petit-titre, .cgh--main-bottom > .cgh-videos-rubriques { grid-column: 1 / -1; grid-row: auto; }
  .cgh--main-bottom .cgh-videos-liste { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .cgh--main-bottom .cgh-videos-liste li { scroll-snap-align: start; }
  .cgh--main-bottom .cgh-photos-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cgh--main-bottom > .cgh-photos-pied { grid-column: 1 / -1; grid-row: auto; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .cgh--main-bottom .cgh-videos-vignette img, .cgh--main-bottom .cgh-videos-vignette::after { transition: none; }
}

/* ------------------------------------------------------------------ articles K2 : en-tête titre + image (22/10)
   item.php : la ligne de méta du haut est retirée, le titre et l'image forment un bloc sombre (fond d'en-tête du site,
   filet rouge comme l'onglet actif du menu), le mois des guides passe en étiquette rouge. Lectures et temps de lecture
   descendent en bas d'article (.cg-article-stats). */
.cg-hero { position: relative; overflow: hidden; border-radius: var(--cg-rayon); background: var(--cg-entete); color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.cg-hero h1 {
  position: relative; margin: 0; padding: 30px 30px 24px; color: #fff;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.04; letter-spacing: -.005em; text-wrap: balance;
}
.cg-hero h1::before { content: ""; display: block; width: 48px; height: 4px; margin: 0 0 16px; border-radius: 2px; background: var(--cg-accent); }
.cg-titre-mois {
  display: inline-block; margin-left: .3em; padding: .16em .5em .12em; border-radius: var(--cg-rayon-petit); background: var(--cg-accent);
  font-size: .5em; line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; vertical-align: .35em; white-space: nowrap;
}
.cg-hero .cg-hero-image { gap: 0; }
.cg-lecture .cg-hero .cg-hero-image img, .cg-hero .cg-hero-image img { width: 100%; margin: 0; max-width: none; border-radius: 0; }
/* Fondu du bloc sombre vers l'image, pour qu'une photo à fond clair ne coupe pas net sous le titre. */
.cg-hero .cg-hero-image { position: relative; }
.cg-hero .cg-hero-image::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 36px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, var(--cg-entete), rgba(22, 22, 24, 0));
}
.cg-hero .cg-hero-image figcaption { padding: 10px 30px 14px; color: #b9b9bf; font-size: 13px; }
.cg-hero--sans-image h1 { padding-bottom: 30px; }
[data-theme="sombre"] .cg-hero { box-shadow: 0 0 0 1px #2a2a2e; }
@media (max-width: 760px) {
  .cg-lecture .cg-hero { margin: 0 calc(-1 * var(--cg-gouttiere)); border-radius: 0; box-shadow: none; }
  .cg-hero h1 { padding: 22px var(--cg-gouttiere) 18px; font-size: clamp(26px, 7vw, 32px); }
  .cg-hero h1::before { margin-bottom: 12px; }
  .cg-hero .cg-hero-image figcaption { padding: 8px var(--cg-gouttiere) 12px; }
}

/* Bas d'article : lectures et temps de lecture. */
.cg-article-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: 14px; color: var(--cg-discret-2); }
.cg-article-stats span { display: inline-flex; align-items: center; gap: 6px; }
.cg-article-stats span + span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; margin-right: 10px; }

/* ------------------------------------------------------------------ articles : marges latérales (22/10)
   L'article restait à 760 px centré dans 1 280 px utiles (80 px vides de chaque côté de la grille). À partir de 1200 px,
   il prend toute la place laissée par la colonne de droite (340 px, 32 px d'écart) : 908 px sur un écran de 1 366 px.
   En dessous, article et colonne passent à 900 px au lieu de 760. */
@media (min-width: 1200px) {
  .cg-lecture.cg-avec-droite .cg-grille { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 32px; justify-content: stretch; }
  .cg-lecture.cg-avec-droite .cg-principal { max-width: none; }
}
@media (min-width: 761px) and (max-width: 1199px) {
  .cg-lecture.cg-avec-droite .cg-principal, .cg-lecture .cg-colonne--droite { max-width: 900px; }
}

/* Listes K2 (catégories, mots-clés) : le titre de chaque carte est un h2 (22/10, recette C1 ; 7 h2 par page contre 50
   en prod) ; même rendu qu'avant. */
.cg-carte-contenu .cg-c-titre { margin: 0; color: inherit; }

/* Sommaire écrit par item.php (22/10) : h2 numérotés, h3 en sous-liste à puces. Dans la colonne, seuls les h3 de la
   partie en cours sont dépliés (template.js, .cg-ouvert) ; le bloc dépliable au-dessus du texte (tablette, téléphone)
   les montre tous. Les liens restent dans le HTML pour Google dans les deux cas. */
.cg-sommaire ol ol { margin: 4px 0 6px; padding-left: 16px; list-style: disc; gap: 2px; font-size: 14px; }
.cg-sommaire ol ol li::marker { color: var(--cg-discret-2); }
.cg-sommaire ol ol a { color: var(--cg-discret); }
.cg-sommaire--colonne ol ol { display: none; font-size: 13px; }
.cg-sommaire--colonne li.cg-ouvert > ol { display: flex; }
.cg-sommaire--colonne > ol > li.cg-ouvert > a { font-weight: 600; color: var(--cg-accent-texte); }

/* ------------------------------------------------------------------ listes K2 : 2 colonnes, cartes horizontales notées (22/10)
   Image à gauche (40 %), texte à droite : surtitre, titre h2 sur 3 lignes, résumé sur 2 lignes, pied avec la note
   (étoiles K2) et l'audience. Barre d'outils au-dessus : tri côté navigateur (pertinence = ordre du serveur). */
.cg-liste-outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 14px; }
.cg-liste-nb { margin: 0; font-size: 14px; color: var(--cg-discret-2); }
.cg-liste-tri { display: flex; flex-wrap: wrap; gap: 6px; }
.cg-liste-tri button {
  min-height: 36px; padding: 0 14px; border: 1px solid var(--cg-ligne-2); border-radius: 999px; background: var(--cg-surface);
  font: 600 13px/1 var(--cg-police-texte); color: var(--cg-texte); cursor: pointer;
}
.cg-liste-tri button:hover { border-color: var(--cg-accent); }
.cg-liste-tri button[aria-pressed="true"] { background: var(--cg-entete); border-color: var(--cg-entete); color: #fff; }

.cg-cartes.cg-cartes--2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cg-cartes--2col .cg-carte-contenu { border: 1px solid transparent; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.cg-cartes--2col .cg-carte-contenu:hover { border-color: var(--cg-accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .1); }
.cg-cartes--2col .cg-carte-contenu > a { display: grid; grid-template-columns: 40% minmax(0, 1fr); flex-direction: row; min-height: 100%; }
.cg-cartes--2col .cg-carte-contenu img { height: 100%; aspect-ratio: auto; min-height: 168px; }
.cg-cartes--2col .cg-c-corps { gap: 6px; padding: 14px 16px 12px; }
.cg-cartes--2col .cg-c-titre { font-size: 19px; line-height: 1.12; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cg-cartes--2col .cg-c-resume { font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cg-c-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--cg-ligne); font-size: 13px; color: var(--cg-discret-2); }
.cg-note { display: inline-flex; align-items: center; gap: 6px; color: var(--cg-texte); font-weight: 600; }
.cg-etoiles { --n: 0; position: relative; display: inline-block; font-size: 15px; line-height: 1; letter-spacing: 1px; color: var(--cg-ligne-2); }
.cg-etoiles::before { content: "★★★★★"; }
.cg-etoiles::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: calc(var(--n) / 5 * 100%); overflow: hidden; color: #f5a623; white-space: nowrap; }
.cg-note small { font-weight: 400; color: var(--cg-discret-2); font-size: 12.5px; }
.cg-c-lire { margin-left: auto; font-weight: 600; color: var(--cg-accent-texte); white-space: nowrap; }
.cg-cartes--2col .cg-carte-contenu:hover .cg-c-lire { text-decoration: underline; }
/* Première carte (la plus pertinente) en large : image plus grande. */
.cg-cartes--2col .cg-carte-contenu.cg-carte--une { grid-column: 1 / -1; }
.cg-cartes--2col .cg-carte--une > a { grid-template-columns: 52% minmax(0, 1fr); }
.cg-cartes--2col .cg-carte--une img { min-height: 260px; }
.cg-cartes--2col .cg-carte--une .cg-c-corps { padding: 22px 24px 16px; gap: 10px; }
.cg-cartes--2col .cg-carte--une .cg-c-titre { font-size: clamp(24px, 2.4vw, 30px); }
.cg-cartes--2col .cg-carte--une .cg-c-resume { font-size: 15px; -webkit-line-clamp: 4; }
@media (max-width: 960px) {
  .cg-cartes.cg-cartes--2col { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 600px) {
  .cg-cartes--2col .cg-carte-contenu > a, .cg-cartes--2col .cg-carte--une > a { grid-template-columns: 112px minmax(0, 1fr); }
  .cg-cartes--2col .cg-carte-contenu img { min-height: 0; }
  .cg-cartes--2col .cg-carte--une img { min-height: 0; }
  .cg-cartes--2col .cg-c-corps, .cg-cartes--2col .cg-carte--une .cg-c-corps { padding: 10px 12px; gap: 4px; }
  .cg-cartes--2col .cg-c-titre, .cg-cartes--2col .cg-carte--une .cg-c-titre { font-size: 16px; }
  .cg-cartes--2col .cg-c-resume { display: none; }
  .cg-c-pied { padding-top: 4px; border-top: 0; }
  .cg-c-lire { display: none; }
}
[data-theme="sombre"] .cg-cartes--2col .cg-carte-contenu:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
@media (prefers-reduced-motion: reduce) { .cg-cartes--2col .cg-carte-contenu { transition: none; } .cg-cartes--2col .cg-carte-contenu:hover { transform: none; } }
/* Mode sombre : le bouton de tri actif (fond d'en-tête) se confondait avec la page. */
[data-theme="sombre"] .cg-liste-tri button[aria-pressed="true"] { background: var(--cg-accent); border-color: var(--cg-accent); }