/*
Theme Name: GYMBERY
Theme URI: https://gymbery.fr
Author: GYMBERY
Author URI: https://gymbery.fr
Description: Thème éditorial fitness pour GYMBERY (musculation, running, nutrition / compléments). Design system « Kinetic Unity » : moderne, inclusif, motivant. Optimisé SEO + E-E-A-T.
Version: 1.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gymbery
Tags: blog, two-columns, custom-menu, featured-images, translation-ready
*/

/* =====================================================================
   DESIGN TOKENS — Kinetic Unity
   ===================================================================== */
:root {
  /* Surfaces */
  --surface: #f9f9ff;
  --background: #f9f9ff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f0f3ff;
  --surface-container: #e7eefe;
  --surface-container-high: #e2e8f8;
  --surface-container-highest: #dce2f3;

  /* Texte */
  --on-surface: #151c27;
  --on-background: #151c27;
  --on-surface-variant: #2f3645;
  --outline: #747688;
  --outline-variant: #c4c5d9;

  /* Primaire (bleu électrique) */
  --primary: #0040e0;
  --primary-container: #2e5bff;
  --on-primary: #ffffff;
  --primary-fixed: #dde1ff;
  --on-primary-fixed: #001356;
  --on-primary-fixed-variant: #0035be;

  /* Accent (jaune ambre) */
  --amber: #ffbf00;
  --on-tertiary-fixed: #1d1c09;

  /* Sémantiques money (avis/comparatif/guide/versus) */
  --pos: #0f8a4d;        /* avantage / gagnant */
  --pos-bg: #e8f7ee;
  --neg: #c0392b;        /* inconvénient */
  --neg-bg: #fdecea;
  --warn: #b8730a;       /* avertissement (erreurs à éviter) */
  --warn-bg: #fdf3e3;

  /* Typo */
  --font-sans: "Sora", system-ui, -apple-system, sans-serif;          /* corps de texte + UI */
  --font-display: "Montserrat", system-ui, -apple-system, sans-serif; /* titres */
  --font-mono: "Roboto", system-ui, -apple-system, sans-serif;        /* kickers, prix, badges (ex-JetBrains Mono) */

  /* Rayons */
  --radius: 0.5rem;        /* 8px  — boutons/inputs */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px — cartes */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* Layout */
  --container: 1440px;        /* largeur max globale (nav, sections, footer) */
  --reading-width: 820px;     /* largeur de la colonne de lecture d'un article */
  --margin-mobile: 16px;
  --margin-desktop: 48px;

  /* Ombres */
  --rim-light: 0 1px 2px rgba(21, 28, 39, 0.04), 0 10px 30px rgba(21, 28, 39, 0.06);
  --rim-light-active: inset 0 0 0 1.5px rgba(0, 64, 224, 0.35), 0 14px 40px rgba(0, 64, 224, 0.1);
}

/* =====================================================================
   RESET / BASE
   ===================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

/* Supprime le rectangle de surlignage tactile (gris/bleu) au tap sur mobile. */
a, button, [role="button"], .icon-btn, input, select, textarea, label, summary {
  -webkit-tap-highlight-color: transparent;
}

/* Le contour de focus ne reste affiché qu'au clavier (accessibilité).
   Au tap/clic, on ne laisse aucun contour persister. */
:focus:not(:focus-visible) { outline: none; }

/* Boutons icône du header / drawer : le focus y est posé par JS (focus-trap du
   drawer), ce que le navigateur traite comme « clavier » -> le contour restait
   affiché sur la croix à l'ouverture et sur le hamburger à la fermeture.
   On retire le contour sur ces contrôles (pilotés au tap/clic). */
.menu-toggle:focus,
.mobile-menu__close:focus,
[data-search-toggle]:focus,
.header-search__close:focus {
  outline: none;
  box-shadow: none;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }

p { margin: 0; }

button { font-family: inherit; cursor: pointer; }

::selection { background: var(--primary-fixed); color: var(--on-primary-fixed); }

.font-mono { font-family: var(--font-mono); }

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
  position: absolute; word-wrap: normal !important;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--primary); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* =====================================================================
   LAYOUT
   ===================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--margin-mobile);
}

.section { padding-block: 48px; }

.section-alt {
  background: var(--surface-container-low);
  border-top: 1px solid rgba(196, 197, 217, 0.6);
  border-bottom: 1px solid rgba(196, 197, 217, 0.6);
}

main { padding-top: 80px; }

/* =====================================================================
   SECTION HEADER (eyebrow + titre + lien)
   ===================================================================== */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}
.section-head__text { max-width: 42rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.eyebrow .bar { height: 1px; width: 36px; background: var(--primary); display: inline-block; }

.section-title {
  font-size: 32px;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 16px;
  color: var(--on-background);
}
.section-title .accent { color: var(--primary); }

.section-sub {
  font-size: 17px;
  color: var(--on-surface-variant);
  margin-top: 16px;
}

.link-arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-weight: 600;
}
.link-arrow .material-symbols-outlined { font-size: 20px; transition: transform 0.25s; }
.link-arrow:hover .material-symbols-outlined { transform: translateX(4px); }

/* =====================================================================
   BOUTONS
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 28px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.1s;
}
.btn:active { transform: scale(0.98); }
.btn .material-symbols-outlined { font-size: 20px; transition: transform 0.25s; }
.btn:hover .material-symbols-outlined.arrow { transform: translateX(4px); }

.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--on-primary-fixed-variant); }

.btn-secondary {
  background: #fff;
  border-color: var(--outline-variant);
  color: var(--on-surface);
}
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); }

.btn-amber {
  background: var(--amber);
  color: var(--on-tertiary-fixed);
  font-weight: 700;
}
.btn-amber:hover { filter: brightness(1.05); }

.btn-nav {
  padding: 10px 16px 10px 20px;
  font-size: 14px;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  transition: background 0.25s, transform 0.1s;
}
.btn-nav:hover { background: var(--on-primary-fixed-variant); }
.btn-nav:active { transform: scale(0.95); }
.btn-nav .material-symbols-outlined { font-size: 18px; }

/* =====================================================================
   NAVIGATION
   ===================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 80px;
  z-index: 50;
  background: rgba(249, 249, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(196, 197, 217, 0.7);
}
.site-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.brand { display: inline-flex; align-items: center; gap: 8px; }
/* Wordmark aligne sur les PDF de programme : majuscules, espacement large, sans point. */
.brand__name { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: 0.08em; }

.primary-menu {
  display: none;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0; padding: 0;
}
.primary-menu a {
  position: relative;
  color: var(--on-surface-variant);
  font-weight: 500;
  font-size: 15px;
  padding-bottom: 2px;
  transition: color 0.25s;
}
.primary-menu a:hover,
.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a { color: var(--on-surface); font-weight: 600; }

.link-underline {
  background-image: linear-gradient(var(--primary), var(--primary));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.link-underline:hover { background-size: 100% 2px; }

/* — Sous-menus déroulants (desktop). Le menu mobile gère ses enfants via .mobile-menu__list — */
.primary-menu .menu-item-has-children { position: relative; }
.primary-menu .menu-item-has-children > a { display: inline-flex; align-items: center; gap: 5px; }
.primary-menu .menu-item-has-children > a::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s;
  opacity: 0.65;
  flex: none;
}
.primary-menu .menu-item-has-children:hover > a::after,
.primary-menu .menu-item-has-children:focus-within > a::after { transform: translateY(0) rotate(225deg); opacity: 1; }

.primary-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: -16px;
  z-index: 60;
  min-width: 230px;
  margin: 0; padding: 8px;
  list-style: none;
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 32px -16px rgba(15, 18, 40, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
/* Zone tampon invisible : évite de perdre le survol entre le parent et le panneau. */
.primary-menu .sub-menu::before {
  content: "";
  position: absolute;
  top: -12px; left: 0; right: 0; height: 12px;
}
.primary-menu .menu-item-has-children:hover > .sub-menu,
.primary-menu .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.primary-menu .sub-menu li { margin: 0; }
.primary-menu .sub-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--on-surface-variant);
}
.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu .current-menu-item > a {
  background: var(--surface-container-low);
  color: var(--on-surface);
  font-weight: 600;
}

.nav-actions { display: flex; align-items: center; gap: 20px; }
.icon-btn {
  background: none; border: none; padding: 0;
  color: var(--on-surface-variant);
  transition: color 0.25s;
  display: inline-flex;
}
.icon-btn:hover { color: var(--primary); }

.menu-toggle { display: inline-flex; }

/* =====================================================================
   RECHERCHE — panneau déroulant du header
   ===================================================================== */
.header-search {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: rgba(249, 249, 255, 0.985);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(196, 197, 217, 0.7);
  box-shadow: 0 16px 32px -16px rgba(15, 18, 40, 0.25);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.header-search.is-open { opacity: 1; transform: translateY(0); }

.header-search__inner { padding-block: 16px 20px; }

.header-search__form {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  padding: 6px 8px 6px 14px;
  transition: border-color 0.2s;
}
.header-search__form:focus-within { border-color: var(--primary); }
.header-search__icon { color: var(--on-surface-variant); font-size: 22px; }
.header-search__input {
  flex: 1 1 auto;
  border: none;
  background: none;
  font: inherit;
  font-size: 16px;
  color: var(--on-surface);
  padding: 8px 0;
  outline: none;
}
.header-search__input::placeholder { color: var(--outline); }
/* Masque la croix « effacer » native du champ de type search (évite le doublon avec notre bouton fermer). */
.header-search__input::-webkit-search-cancel-button,
.header-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.header-search__input::-ms-clear { display: none; }
.header-search__close { color: var(--on-surface-variant); }
.header-search__close:hover { color: var(--primary); }

.header-search__results { margin-top: 12px; max-height: 60vh; overflow-y: auto; }
.header-search__group { margin-bottom: 8px; }
.header-search__group-label {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  padding: 6px 10px;
}
.header-search__result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--on-surface);
  transition: background 0.18s;
}
.header-search__result .material-symbols-outlined { font-size: 20px; color: var(--on-surface-variant); }
.header-search__result-title { flex: 1 1 auto; font-weight: 500; }
.header-search__result-meta { color: var(--outline); font-size: 13px; }
.header-search__result:hover,
.header-search__result.is-active { background: var(--surface-container-low); }

.header-search__empty { padding: 14px 12px; color: var(--on-surface-variant); }

.header-search__seeall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 2px 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--primary);
}
.header-search__seeall.is-active,
.header-search__seeall:hover { text-decoration: underline; }

/* Menu mobile — drawer latéral */
.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(12, 14, 18, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.drawer-overlay[hidden] { display: none; }
.drawer-overlay.is-open { opacity: 1; }

.mobile-menu {
  position: fixed;
  top: 0; left: 0;
  z-index: 61;
  width: min(86vw, 360px);
  height: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface-container-lowest);
  border-right: 1px solid var(--outline-variant);
  box-shadow: 12px 0 40px rgba(21, 28, 39, 0.18);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
  overscroll-behavior: contain;
  will-change: transform;
}
.mobile-menu.is-visible { visibility: visible; }
.mobile-menu.is-open { transform: translateX(0); }

.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  flex-shrink: 0;
  padding-inline: var(--margin-mobile);
  border-bottom: 1px solid var(--outline-variant);
}
.mobile-menu__close .material-symbols-outlined { font-size: 28px; }

.mobile-menu__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px var(--margin-mobile);
}
.mobile-menu__list,
.mobile-menu__list .sub-menu { list-style: none; margin: 0; padding: 0; }
.mobile-menu__list > li { border-bottom: 1px solid rgba(196, 197, 217, 0.5); }

/* Lien de niveau 1 */
.mobile-menu__list a {
  display: block;
  padding: 16px 4px;
  font-weight: 600;
  font-size: 17px;
  color: var(--on-surface);
  transition: color 0.2s;
}
.mobile-menu__list a:hover,
.mobile-menu__list .current-menu-item > a,
.mobile-menu__list .current_page_item > a { color: var(--primary); }

/* Rangée lien + chevron (items avec sous-menu) */
.mobile-menu__list .menu-item-row { display: flex; align-items: center; }
.mobile-menu__list .menu-item-row > a { flex: 1 1 auto; }
.submenu-toggle {
  position: relative;
  flex-shrink: 0;
  background: none; border: none;
  padding: 12px;
  margin-left: 4px;
  color: var(--on-surface-variant);
  display: inline-flex;
  cursor: pointer;
  border-radius: var(--radius);
  transition: color 0.2s, background 0.2s;
  touch-action: manipulation; /* coupe le zoom au double-tap mobile */
  -webkit-tap-highlight-color: transparent;
}
/* Zone tactile élargie vers la gauche, invisible (aucun impact sur la mise en page). */
.submenu-toggle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: -28px;
}
.submenu-toggle:hover { color: var(--primary); background: var(--surface-container-low); }
.submenu-toggle .material-symbols-outlined { transition: transform 0.3s ease; }
.menu-item-has-children.is-expanded > .menu-item-row .submenu-toggle .material-symbols-outlined { transform: rotate(180deg); }

/* Sous-menu (accordéon) */
.mobile-menu__list .sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: var(--surface-container-low);
  border-radius: var(--radius);
  margin-bottom: 8px;
}
.mobile-menu__list .sub-menu a {
  padding: 13px 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--on-surface-variant);
}
.mobile-menu__list .sub-menu li + li > a,
.mobile-menu__list .sub-menu li + li > .menu-item-row { border-top: 1px solid rgba(196, 197, 217, 0.4); }
.mobile-menu__list .sub-menu a:hover { color: var(--primary); }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu__list .sub-menu,
  .submenu-toggle .material-symbols-outlined { transition: none; }
}

.mobile-menu__foot {
  flex-shrink: 0;
  padding: 16px var(--margin-mobile) calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--outline-variant);
}
.mobile-menu__cta { width: 100%; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .drawer-overlay { transition: none; }
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--surface-container-low), var(--surface));
}
.hero__field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero__field svg {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  opacity: 0.04; width: 640px; height: 640px;
}
.orb {
  position: absolute;
  border-radius: var(--radius-full);
  filter: blur(2px);
  animation: float 9s ease-in-out infinite;
}
.orb--blue { top: -60px; right: 8%; width: 280px; height: 280px;
  background: radial-gradient(circle at 30% 30%, rgba(0, 64, 224, 0.18), transparent 70%); }
.orb--amber { bottom: -40px; left: -40px; width: 220px; height: 220px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 191, 0, 0.2), transparent 70%); animation-delay: -3s; }
@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-22px) translateX(10px); }
}

.hero__inner {
  position: relative; z-index: 10;
  padding-top: 64px; padding-bottom: 80px;
}
.hero__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}
.hero__col-text { width: 100%; }

.hero__eyebrow {
  font-family: var(--font-mono);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 16px;
  margin-left: 3px; /* alignement optique sur le « M » du titre (Montserrat) */
}
.hero__title {
  font-size: 40px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--on-background);
}
.hero__title .accent { color: var(--primary); }
.hero__lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--on-surface-variant);
  margin-top: 28px;
  margin-bottom: 28px;
  max-width: 36rem;
}
.hero__cta { display: flex; flex-direction: column; gap: 16px; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
  max-width: 32rem;
}
.hero-stats__num { font-size: 28px; font-weight: 800; line-height: 1; color: var(--on-background); }
.hero-stats__num .accent { color: var(--primary); }
.hero-stats__label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 8px;
}

/* Carte "À la une" */
.hero__col-card { width: 100%; }
.featured-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  padding: 28px;
  border-radius: var(--radius-2xl);
  box-shadow: var(--rim-light);
  border: 1px solid rgba(196, 197, 217, 0.6);
}
.featured-card__head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.featured-card__head h2 {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.featured-card__head .material-symbols-outlined { color: var(--amber); font-size: 20px; }

.kinetic-line {
  position: relative; height: 2px;
  background: var(--surface-container-high);
  overflow: hidden; border-radius: var(--radius-full);
  margin-bottom: 24px;
}
.kinetic-line::after {
  content: ""; position: absolute; top: 0; left: -40%; height: 100%; width: 40%;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  animation: kineticSweep 2.6s cubic-bezier(0.5, 0, 0.2, 1) infinite;
}
@keyframes kineticSweep { 0% { left: -45%; } 100% { left: 105%; } }

.mini-list { display: flex; flex-direction: column; gap: 20px; }
.mini-item { display: flex; gap: 16px; align-items: center; }
.mini-item__thumb {
  width: 68px; height: 68px; flex-shrink: 0;
  background: var(--surface-container);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.mini-item__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.mini-item:hover .mini-item__thumb img { transform: scale(1.1); }
.mini-item__cat {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mini-item__title {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  color: var(--on-background);
  margin-top: 2px;
  transition: color 0.25s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mini-item:hover .mini-item__title { color: var(--primary); }

.featured-card__more {
  margin-top: 28px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px;
  color: var(--primary);
  font-weight: 600;
  font-size: 14px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  transition: border-color 0.25s, background 0.25s;
}
.featured-card__more:hover { border-color: var(--primary); background: var(--surface-container-low); }
.featured-card__more .material-symbols-outlined { font-size: 18px; transition: transform 0.25s; }
.featured-card__more:hover .material-symbols-outlined { transform: translateX(4px); }

/* Marquee */
.marquee {
  position: relative; z-index: 10;
  border-top: 1px solid rgba(196, 197, 217, 0.6);
  background: rgba(255, 255, 255, 0.5);
  overflow: hidden;
}
.marquee__viewport { display: flex; white-space: nowrap; padding-block: 16px; }
.marquee__track { display: flex; flex-shrink: 0; align-items: center; animation: marquee 84s linear infinite; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 12px;
  padding-inline: 32px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--on-surface-variant);
}
.marquee__dot { width: 6px; height: 6px; border-radius: var(--radius-full); display: inline-block; }
.marquee__dot--amber { background: var(--amber); }
.marquee__dot--blue { background: var(--primary); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =====================================================================
   GRILLE CATÉGORIES
   ===================================================================== */
.grid-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.cat-card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-2xl);
  padding: 28px;
  border: 1px solid rgba(196, 197, 217, 0.7);
  box-shadow: var(--rim-light);
  transition: border-color 0.3s, transform 0.3s;
  display: block;
}
.cat-card:hover { border-color: var(--primary); transform: translateY(-4px); }
.cat-card__head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 32px; }
.cat-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-container);
  color: var(--primary);
  transition: background 0.3s, color 0.3s;
}
.cat-card:hover .cat-card__icon { background: var(--primary); color: #fff; }
.cat-card__count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--on-surface-variant);
}
.cat-card__title { font-size: 20px; font-weight: 700; color: var(--on-background); margin-bottom: 8px; }
.cat-card__desc { font-size: 15px; color: var(--on-surface-variant); line-height: 1.6; }
.cat-card__arrow {
  position: absolute; bottom: 24px; right: 24px;
  color: var(--outline-variant);
  transition: color 0.3s, transform 0.3s;
}
.cat-card:hover .cat-card__arrow { color: var(--primary); transform: translateX(4px); }

/* =====================================================================
   GRILLE JOURNAL (articles)
   ===================================================================== */
.grid-journal {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px 28px;
}

.post-card { cursor: pointer; display: block; }
.post-card__media {
  aspect-ratio: 4 / 3;
  background: var(--surface-container-high);
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: var(--radius-xl);
  position: relative;
}
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__chip {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  color: var(--on-background);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}
.post-card__title {
  font-size: 19px;
  font-weight: 700;
  color: var(--on-background);
  margin-bottom: 10px;
  line-height: 1.35;
  transition: color 0.25s;
}
.post-card:hover .post-card__title { color: var(--primary); }
.post-card__excerpt {
  font-size: 15px;
  color: var(--on-surface-variant);
  margin-bottom: 16px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card__meta {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--outline);
}
.post-card__meta .dot { width: 4px; height: 4px; background: var(--outline); border-radius: var(--radius-full); }

/* =====================================================================
   TOP 5 (les plus lus)
   ===================================================================== */
.ranking {
  background: #fff;
  border-radius: var(--radius-2xl);
  box-shadow: var(--rim-light);
  border: 1px solid rgba(196, 197, 217, 0.6);
  overflow: hidden;
  list-style: none;
  margin: 0; padding: 0;
}
.ranking > li + li { border-top: 1px solid rgba(196, 197, 217, 0.5); }
.ranking__row {
  display: flex; align-items: center;
  gap: 20px;
  padding: 20px 24px;
  transition: background 0.25s;
}
.ranking__row:hover { background: var(--surface-container-low); }
.ranking__num {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  color: var(--primary);
  width: 36px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.ranking__thumb {
  width: 68px; height: 68px; flex-shrink: 0;
  background: var(--surface-container);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: none;
}
.ranking__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.ranking__row:hover .ranking__thumb img { transform: scale(1.1); }
.ranking__body { min-width: 0; flex: 1; }
.ranking__cat {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ranking__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--on-background);
  line-height: 1.35;
  margin-top: 2px;
  transition: color 0.25s;
}
.ranking__row:hover .ranking__title { color: var(--primary); }
.ranking__views {
  display: none;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--outline);
  flex-shrink: 0;
}
.ranking__views .material-symbols-outlined { font-size: 16px; }
.ranking__arrow { color: var(--outline-variant); flex-shrink: 0; transition: color 0.25s, transform 0.25s; }
.ranking__row:hover .ranking__arrow { color: var(--primary); transform: translateX(4px); }

/* =====================================================================
   NEWSLETTER
   ===================================================================== */
.newsletter-wrap { padding-top: 64px; padding-bottom: 80px; }
.newsletter {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: var(--surface-container-low);
  color: var(--on-surface);
  border: 1px solid var(--outline-variant);
  box-shadow: var(--rim-light);
  padding: 56px 32px;
}
.newsletter__field { position: absolute; inset: 0; opacity: 0.5; pointer-events: none; }
.newsletter__field svg { position: absolute; right: -40px; top: -40px; width: 420px; height: 420px; }
.newsletter__body { position: relative; z-index: 10; max-width: 42rem; }
.newsletter__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--primary);
  margin-bottom: 20px;
}
.newsletter__eyebrow .material-symbols-outlined { font-size: 16px; }
.newsletter__title { font-size: 30px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 16px; }
.newsletter__text { font-size: 17px; color: var(--on-surface-variant); margin-bottom: 36px; max-width: 36rem; }
/* margin-left négatif = padding (20px) + bordure (1px) de l'input : le texte
   du champ retombe pile sur l'axe gauche des titres/paragraphes. */
.newsletter__form { display: flex; flex-direction: column; gap: 12px; max-width: 36rem; margin-left: -10px; }
.newsletter__input {
  flex: 1;
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  color: var(--on-surface);
  padding: 14px 20px;
  border-radius: var(--radius);
  outline: none;
  font-family: inherit;
  font-size: 15px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.newsletter__input::placeholder { color: var(--outline); }
.newsletter__input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 64, 224, 0.15); }
.newsletter__note {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--outline);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------------------------------------------------------------------
 * Formulaire Brevo ([sibwp_form]) restylé pour la carte newsletter claire.
 * Le plugin pose beaucoup de styles INLINE + une CSS propre : on neutralise
 * sa « chrome » (fonds blancs, bordures, largeurs fixes, paddings) avec
 * !important là où c'est nécessaire, puis on recolle au design du thème.
 * Tout est scopé sous .newsletter__brevo pour ne pas affecter d'autres
 * formulaires Brevo ailleurs sur le site.
 * ------------------------------------------------------------------- */
.newsletter__brevo { max-width: none; width: 100%; }

/* Conteneurs Brevo (form + boîtes sib_signup_box*) : transparents, pleine
 * largeur, sans marge/padding/bordure. On reset large pour couvrir les
 * wrappers que le plugin ajoute autour de .sib_signup_box_inside_2. */
.newsletter__brevo form,
.newsletter__brevo .sib_signup_box,
.newsletter__brevo .sib_signup_box_inside,
.newsletter__brevo .sib_signup_box_inside_2 {
  background: transparent !important;
  background-color: transparent !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  font-family: inherit !important;
}

/* La boîte interne devient la grille du formulaire : empilé sur mobile,
 * champ + bouton sur une ligne ≥640px (voir media query plus bas). */
.newsletter__brevo .sib_signup_box_inside_2 {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  /* Léger retrait pour rapprocher le texte du champ de l'axe gauche (cf. .newsletter__form). */
  margin-left: -10px !important;
}
/* Les <p> de Brevo (1 = label+champ, 2 = bouton) à plat, sans marge. */
.newsletter__brevo .sib_signup_box_inside_2 > p { margin: 0 !important; padding: 0 !important; }

/* Libellé « Adresse email » : petit label clair au-dessus du champ. */
.newsletter__brevo label.sib-email-area {
  display: block;
  margin-bottom: 8px !important;
  color: var(--on-surface) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Champ e-mail : recopie .newsletter__input. */
.newsletter__brevo input.sib-email-area,
.newsletter__brevo input[type="email"],
.newsletter__brevo input[type="text"] {
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--surface-container-lowest) !important;
  border: 1px solid var(--outline-variant) !important;
  color: var(--on-surface) !important;
  padding: 14px 20px !important;
  border-radius: var(--radius) !important;
  outline: none !important;
  font-family: inherit !important;
  font-size: 15px !important;
  height: auto !important;
  box-shadow: none !important;
  margin: 0 !important;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.newsletter__brevo input.sib-email-area::placeholder,
.newsletter__brevo input[type="email"]::placeholder { color: var(--outline) !important; }
.newsletter__brevo input.sib-email-area:focus,
.newsletter__brevo input[type="email"]:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 64, 224, 0.15) !important;
}

/* Bouton : recopie .btn.btn-amber. */
.newsletter__brevo input.sib-default-btn,
.newsletter__brevo input[type="submit"] {
  display: inline-block !important;
  width: 100% !important;
  background: var(--amber) !important;
  color: #0c0e12 !important;
  border: 0 !important;
  padding: 14px 28px !important;
  border-radius: var(--radius) !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  cursor: pointer;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: filter 0.2s, transform 0.2s;
}
.newsletter__brevo input.sib-default-btn:hover,
.newsletter__brevo input[type="submit"]:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* Message de confirmation/erreur lisible sur fond clair. */
.newsletter__brevo .sib_msg_disp {
  color: var(--on-surface) !important;
  font-family: inherit !important;
  font-size: 14px !important;
}
/* Vide au chargement → on la sort du flux (évite un gap parasite en ligne). */
.newsletter__brevo .sib_msg_disp:empty { display: none !important; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer { width: 100%; background: #fff; border-top: 1px solid var(--outline-variant); }
.site-footer__inner { padding-block: 56px; }
.footer-top {
  display: flex; flex-direction: column;
  justify-content: space-between; align-items: flex-start;
  gap: 48px; margin-bottom: 48px;
}
.footer-brand { max-width: 20rem; display: flex; flex-direction: column; gap: 20px; }
.footer-brand p { font-size: 15px; color: var(--on-surface-variant); line-height: 1.6; }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid var(--outline-variant);
  display: flex; align-items: center; justify-content: center;
  color: var(--on-surface-variant);
  transition: border-color 0.25s, color 0.25s;
}
.footer-social a:hover { border-color: var(--primary); color: var(--primary); }
.footer-social .material-symbols-outlined { font-size: 20px; }

.footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; }
.footer-col { display: flex; flex-direction: column; gap: 14px; }
.footer-col__title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--on-background);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.footer-menu li { margin: 0; }
.footer-col a { font-size: 15px; color: var(--on-surface-variant); transition: color 0.25s; }
.footer-col a:hover { color: var(--primary); }

.footer-bottom {
  border-top: 1px solid var(--outline-variant);
  padding-top: 28px;
  display: flex; flex-direction: column;
  justify-content: space-between; align-items: center;
  gap: 12px;
}
.footer-bottom__copy { font-size: 14px; color: var(--on-surface-variant); }
.footer-bottom__baseline {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--outline);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* =====================================================================
   REVEAL ON SCROLL
   visible = état de base ; l'état caché n'est armé que par JS sous no-preference
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html.js-anim [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  html.js-anim [data-reveal].in { opacity: 1; transform: none; }
}
html.reveal-off [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .kinetic-line::after, .orb, .marquee__track { animation: none !important; }
}

/* =====================================================================
   CONTENU ÉDITORIAL (single / page)
   ===================================================================== */
.entry-header { padding-block: 28px 32px; max-width: var(--reading-width); margin-inline: auto; }
.entry-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.entry-title { font-size: 30px; line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; margin-top: 16px; }
.entry-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--outline);
}
.entry-meta .dot { width: 4px; height: 4px; background: var(--outline); border-radius: var(--radius-full); }
.entry-featured { max-width: var(--reading-width); margin-inline: auto; margin-top: 48px; margin-bottom: 0; border-radius: var(--radius-xl); overflow: hidden; }
.entry-featured img { width: 100%; }

.entry-content {
  max-width: var(--reading-width);
  margin-inline: auto;
  font-family: "Sora", system-ui, -apple-system, sans-serif; /* corps d'article */
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--on-surface-variant);
}
.entry-content > * + * { margin-top: 1.4em; }
/* Un paragraphe placé juste sous un titre ne reprend pas la marge inter-bloc :
   l'écart est alors géré par le margin-bottom du titre (H2↓ / H3↓). Le 1.40em ne joue qu'entre paragraphes. */
.entry-content > :is(h2, h3, h4, h5, h6) + p { margin-top: 0; }
.entry-content h2 { font-size: 22px; color: var(--on-surface); margin-top: 1.4em; margin-bottom: 0.45em; }
.entry-content h3 { font-size: 19px; color: var(--on-surface); margin-top: 1.4em; margin-bottom: 0.4em; }
/* Décale les ancres sous le header fixe (80px) au scroll vers une section. */
.entry-content :is(h2, h3) { scroll-margin-top: 96px; }

/* ===== Sommaire (table des matières maison) ===== */
.gymbery-toc {
  max-width: var(--reading-width);
  margin: 36px auto;
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  box-shadow: var(--rim-light);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.gymbery-toc:hover { border-color: rgba(0, 64, 224, 0.35); box-shadow: var(--rim-light-active); }

/* En-tête cliquable */
.gymbery-toc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 20px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease;
}
.gymbery-toc__head:hover { background: var(--surface-container-low); }
.gymbery-toc__head:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.gymbery-toc__head-left { display: flex; align-items: center; gap: 14px; min-width: 0; }

/* Badge d'icône teinté (même langage que les cartes catégories) */
.gymbery-toc__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: var(--primary-fixed);
  color: var(--primary);
  font-size: 22px;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gymbery-toc__head:hover .gymbery-toc__icon { transform: scale(1.06); }

.gymbery-toc__titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gymbery-toc__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--primary);
}
.gymbery-toc__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--on-surface);
  letter-spacing: -0.01em;
}
.gymbery-toc__chevron {
  flex-shrink: 0;
  color: var(--on-surface-variant);
  font-size: 24px;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gymbery-toc:not(.is-collapsed) .gymbery-toc__chevron { transform: rotate(180deg); }

/* Panneau repliable */
.gymbery-toc__panel {
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gymbery-toc.is-collapsed .gymbery-toc__panel { max-height: 0; }

.gymbery-toc__list {
  margin: 0;
  padding: 4px 12px 14px;
  list-style: none;
}
.gymbery-toc__list li { margin: 0; }

.entry-content .gymbery-toc__list a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 12px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--on-surface-variant);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.gymbery-toc__num {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--outline);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}
.gymbery-toc__text {
  font-family: "Sora", system-ui, -apple-system, sans-serif;
  font-size: 15.5px;
  line-height: 1.45;
}
.entry-content .gymbery-toc__list a:hover {
  background: var(--surface-container-low);
  color: var(--primary);
  text-decoration: none;
  transform: translateX(4px);
}
.entry-content .gymbery-toc__list a:hover .gymbery-toc__num { color: var(--primary); }
.entry-content .gymbery-toc__list a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.entry-content a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.entry-content a:hover { color: var(--on-primary-fixed-variant); }
.entry-content img { border-radius: var(--radius-xl); }
.entry-content blockquote {
  border-left: 3px solid var(--primary);
  padding-left: 24px;
  font-style: italic;
  color: var(--on-surface);
}
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li + li { margin-top: 0.5em; }
.entry-content code {
  font-family: var(--font-mono); font-size: 0.9em;
  background: var(--surface-container); padding: 2px 6px; border-radius: 4px;
}

/* Tableaux — carte blanche arrondie, en-tête bleu, lignes séparées (Kinetic Unity).
   Le wrapper .gymbery-table-scroll permet le défilement horizontal sur mobile. */
.gymbery-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(196, 197, 217, 0.6);
  box-shadow: var(--rim-light);
}
.gymbery-table-scroll > table { margin: 0; border: none; box-shadow: none; min-width: 520px; }

/* Tableau « nu » à légende : <figure> qui groupe la carte défilante + la <figcaption>.
   La légende est ainsi SOUS la carte (hors bordure du conteneur défilant), pas enfermée dedans. */
.entry-content figure.gymbery-table { margin-inline: 0; }

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
  color: var(--on-surface);
  background: var(--surface-container-lowest);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(196, 197, 217, 0.6);
  box-shadow: var(--rim-light);
  overflow: hidden;            /* coins arrondis appliqués au contenu interne */
}

.entry-content thead th {
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  padding: 14px 18px;
  vertical-align: middle;
}

.entry-content tbody td,
.entry-content tbody th {
  padding: 13px 18px;
  border-top: 1px solid rgba(196, 197, 217, 0.5);
  vertical-align: top;
  text-align: left;
}

/* En-tête de ligne (1re colonne en <th>) : un peu plus appuyé. */
.entry-content tbody th { font-weight: 700; color: var(--on-surface); background: var(--surface-container-low); }

/* Zébrage très léger + hover. */
.entry-content tbody tr:nth-child(even) td { background: rgba(240, 243, 255, 0.5); }
.entry-content tbody tr:hover td { background: var(--surface-container-low); }

.entry-content table a { text-decoration: none; font-weight: 600; }
.entry-content table a:hover { text-decoration: underline; }

/* Légende de tableau (figcaption / <caption>), d'image et de graphique SVG : même style. */
.entry-content table caption,
.entry-content figure.wp-block-table figcaption,
.entry-content figure.gymbery-table figcaption,
.entry-content figure.gymbery-image figcaption,
.entry-content figure:has(svg) figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--outline);
  padding-top: 12px;
  text-align: center;
  caption-side: bottom;
}

/* Légende de séries d'un graphique SVG (clé couleur) : rangée horizontale, robuste
   face à wpautop (les items restent en ligne quoi qu'il arrive). */
.entry-content .gymbery-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 20px;
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--on-surface-variant);
}
.entry-content .gymbery-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.entry-content .gymbery-legend__dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: 0 0 auto;
}

/* Bloc tableau Gutenberg : on neutralise ses bordures par défaut au profit des nôtres. */
.entry-content figure.wp-block-table { margin-inline: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.entry-content figure.wp-block-table table { border-collapse: collapse; }
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) td { background: rgba(240, 243, 255, 0.5); }

@media (max-width: 600px) {
  .entry-content thead th,
  .entry-content tbody td,
  .entry-content tbody th { padding: 11px 14px; font-size: 14px; }
}

/* =====================================================================
   BLOC AUTEUR (bas d'article)
   ===================================================================== */
.author-box {
  max-width: var(--reading-width);
  margin: 64px auto 80px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 32px;
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-2xl);
  box-shadow: var(--rim-light);
  position: relative;
  overflow: hidden;
}

/* Liseré ambre signature en haut du bloc. */
.author-box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--amber));
}

.author-box__avatar { flex: 0 0 auto; }
.author-box__avatar a { display: block; line-height: 0; }
.author-box__avatar img {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 3px solid var(--surface-container-lowest);
  box-shadow: 0 0 0 1.5px var(--outline-variant);
}

.author-box__body { flex: 1 1 auto; min-width: 0; }

.author-box__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--outline);
}

.author-box__name {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}
.author-box__name a { color: var(--on-surface); text-decoration: none; }
.author-box__name a:hover { color: var(--primary); }

.author-box__role {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
}

.author-box__bio {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--on-surface-variant);
}

.author-box__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.author-box__link .material-symbols-outlined { font-size: 18px; transition: transform 0.2s; }
.author-box__link:hover { color: var(--on-primary-fixed-variant); }
.author-box__link:hover .material-symbols-outlined { transform: translateX(3px); }

@media (max-width: 600px) {
  .author-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 20px;
    gap: 16px;
  }
  .author-box__link { justify-content: center; }
}

/* =====================================================================
   PAGE AUTEUR (/author/...)
   ===================================================================== */
.author-page { padding-block: 48px 80px; }

.author-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 40px 44px;
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-2xl);
  box-shadow: var(--rim-light);
  position: relative;
  overflow: hidden;
  margin-bottom: 56px;
}
.author-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--amber));
}

.author-hero__avatar { line-height: 0; margin-bottom: 18px; }
.author-hero__avatar img {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 4px solid var(--surface-container-lowest);
  box-shadow: 0 0 0 1.5px var(--outline-variant), var(--rim-light);
}

.author-hero__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 64ch;
}
.author-hero .eyebrow { justify-content: center; }
.author-hero__name {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.author-hero__role {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
}
.author-hero__bio {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--on-surface-variant);
}
.author-hero__count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 22px 0 0;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--surface-container-low);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant);
}
.author-hero__count .material-symbols-outlined { font-size: 16px; color: var(--primary); }

.author-page__heading {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 28px;
  text-align: center;
}

@media (max-width: 700px) {
  .author-hero { padding: 36px 22px 32px; }
  .author-hero__name { font-size: 26px; }
  .author-hero__avatar img { width: 104px; height: 104px; }
}

/* Encadré TL;DR « L'essentiel » — points clés answer-first (Kinetic Unity).
   Markup : <div class="gymbery-essentiel"><p><strong>L'essentiel</strong></p><ul>…</ul></div> */
.gymbery-essentiel {
  background: var(--surface-container-low);
  border: 1px solid rgba(0, 64, 224, 0.14);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-xl);
  padding: 24px 28px;
  margin-top: 2em;
}

/* Titre de l'encadré (le 1er <p><strong>). */
.gymbery-essentiel > p:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}
.gymbery-essentiel > p:first-child::before {
  content: "bolt";
  font-family: "Material Symbols Outlined";
  font-size: 18px;
  line-height: 1;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--on-primary);
  font-variation-settings: "FILL" 1, "wght" 500;
}
.gymbery-essentiel > p:first-child strong {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--on-surface);
}

/* Liste : puces remplacées par des coches bleues. */
.gymbery-essentiel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gymbery-essentiel li {
  position: relative;
  padding-left: 30px;
  color: var(--on-surface-variant);
  font-size: 16px;
  line-height: 1.6;
}
.gymbery-essentiel li + li { margin-top: 12px; }
.gymbery-essentiel li::before {
  content: "check_circle";
  font-family: "Material Symbols Outlined";
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 19px;
  line-height: 1.2;
  color: var(--primary);
  font-variation-settings: "FILL" 1, "wght" 500;
}
.gymbery-essentiel a { color: var(--primary); font-weight: 600; }

/* Encadré « callout » — UNE affirmation citable (levier GEO), au plus 1 par article,
   posée dans une section dense sans viz. Visuellement distinct de « L'essentiel »
   (ampoule + label inline, pas de checklist).
   Markup : <div class="gymbery-callout"><p><strong>Le point clé :</strong> …</p></div> */
.gymbery-callout {
  display: flex;
  gap: 14px;
  background: rgba(0, 64, 224, 0.06);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-xl);
  padding: 20px 24px;
  margin: 2em 0;
}
.gymbery-callout::before {
  content: "tips_and_updates";
  font-family: "Material Symbols Outlined";
  font-size: 22px;
  line-height: 1.4;
  flex-shrink: 0;
  color: var(--primary);
  font-variation-settings: "FILL" 1, "wght" 500;
}
.gymbery-callout p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--on-surface);
}
.gymbery-callout strong { font-weight: 800; color: var(--on-surface); }
.gymbery-callout a { color: var(--primary); font-weight: 600; }

/* Encadré de téléchargement PDF (lead magnet) — carte horizontale compacte,
   bouton bleu primaire. Liseré gauche façon « L'essentiel ».
   Markup :
   <div class="gymbery-pdf">
     <span class="gymbery-pdf__icon"><span class="material-symbols-outlined">picture_as_pdf</span></span>
     <div class="gymbery-pdf__body">
       <p class="gymbery-pdf__title">Programme en PDF</p>
       <p class="gymbery-pdf__desc">À imprimer ou suivre sur mobile, sans inscription.</p>
     </div>
     <a class="gymbery-pdf__btn" href="URL_DU_PDF" download><span class="material-symbols-outlined">download</span>Télécharger</a>
   </div> */
.gymbery-pdf {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--surface-container-low);
  border: 1px solid rgba(0, 64, 224, 0.14);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-xl);
  padding: 16px 20px;
  margin: 2em 0;
}
.gymbery-pdf__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-fixed);
  color: var(--primary);
}
.gymbery-pdf__icon .material-symbols-outlined { font-size: 24px; font-variation-settings: "FILL" 1; }
.gymbery-pdf__body { flex: 1 1 200px; min-width: 0; }
.gymbery-pdf__title { font-weight: 700; font-size: 16px; margin: 0; color: var(--on-surface); }
.gymbery-pdf__desc { font-size: 14px; color: var(--on-surface-variant); margin: 0; }
/* Bouton : recopie .btn-primary, en battant le soulignement de .entry-content a. */
.entry-content a.gymbery-pdf__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  padding: 11px 18px;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  transition: background 0.2s, transform 0.1s;
}
.entry-content a.gymbery-pdf__btn:hover { background: var(--on-primary-fixed-variant); color: #fff; }
.entry-content a.gymbery-pdf__btn:active { transform: scale(0.98); }
.gymbery-pdf__btn .material-symbols-outlined { font-size: 20px; }

@media screen and (max-width: 560px) {
  .gymbery-pdf { flex-direction: column; align-items: stretch; gap: 12px; }
  .gymbery-pdf__body { flex: 0 0 auto; width: 100%; }
  .entry-content a.gymbery-pdf__btn { width: 100%; }
}

/* =====================================================================
   SECTIONS MONEY (articles affiliés : avis / comparatif / guide / versus)
   ---------------------------------------------------------------------
   Composants réutilisables dans le corps d'article (.entry-content).
   - Le style « qu'on pousse » = ambre (.gymbery-cta--amber) : destination
     marque affiliée en priorité, Amazon en réassurance (cf. règle CTA).
   - Couleurs sémantiques : --pos (avantage/gagnant), --neg (inconvénient),
     --warn (avertissement).
   - Les liens-CTA et les tableaux sont scopés sous .entry-content pour
     battre les styles de base du contenu (soulignement, chrome de table).
   ===================================================================== */

/* ---- Briques partagées : CTA, étoiles, badges, vignette produit ---- */
.entry-content .gymbery-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.25s, border-color 0.25s, color 0.25s, filter 0.2s, transform 0.1s;
}
.entry-content a.gymbery-cta,
.entry-content a.gymbery-cta:hover { text-decoration: none; }
.entry-content .gymbery-cta:active { transform: scale(0.98); }
.entry-content .gymbery-cta .material-symbols-outlined { font-size: 18px; transition: transform 0.25s; }
.entry-content .gymbery-cta:hover .arrow { transform: translateX(4px); }
/* Ambre plat (aplat plein, pas de dégradé ni d'ombre) — look simple. */
.entry-content .gymbery-cta--amber { background: var(--amber); color: #2a1c00; }
.entry-content .gymbery-cta--amber:hover { background: #e89c08; color: #2a1c00; filter: none; }
.entry-content .gymbery-cta--blue { background: var(--primary); color: var(--on-primary); }
.entry-content .gymbery-cta--blue:hover { background: var(--on-primary-fixed-variant); color: var(--on-primary); }
.entry-content .gymbery-cta--ghost { background: #fff; border-color: var(--outline-variant); color: var(--on-surface); }
.entry-content .gymbery-cta--ghost:hover { border-color: var(--primary); color: var(--primary); }
.entry-content .gymbery-cta--sm { padding: 9px 14px; font-size: 13px; }
.entry-content .gymbery-cta--full { display: flex; width: 100%; }
.gymbery-cta__price { font-family: var(--font-display); font-weight: 700; opacity: 0.85; font-size: 13px; }
.gymbery-cta-note { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--outline); margin: 8px 0 0; text-align: center; }
/* Label responsive : libellé long (desktop) / court (mobile). Pour les CTA à libellé
   long type « Voir le {produit} chez {enseigne} » qui déborderaient en nowrap sur
   petit écran. __mini est masqué par défaut ; on bascule sous 600px. Le passage en
   white-space:normal des CTA --full sert de filet (wrap au lieu de débordement). */
.entry-content .gymbery-cta__mini { display: none; }
@media (max-width: 600px) {
  .entry-content .gymbery-cta--full,
  .entry-content .gbc-cta { white-space: normal; text-align: center; line-height: 1.25; }
  .entry-content .gymbery-cta__full { display: none; }
  .entry-content .gymbery-cta__mini { display: inline; }
}

.gymbery-stars { display: inline-flex; align-items: center; gap: 1px; color: var(--amber); line-height: 1; }
.gymbery-stars .material-symbols-outlined { font-size: inherit; font-variation-settings: "FILL" 1; }
.gymbery-stars .is-empty { color: var(--outline-variant); }
.gymbery-stars__num { font-family: var(--font-mono); font-weight: 700; font-size: 0.78em; color: var(--on-surface); margin-left: 6px; }

.gymbery-award { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 10px; border-radius: var(--radius-full); background: var(--primary-fixed); color: var(--on-primary-fixed); }
.gymbery-award .material-symbols-outlined { font-size: 13px; font-variation-settings: "FILL" 1; }
.gymbery-award--amber { background: #fff3cc; color: #5c4600; }
.gymbery-award--green { background: var(--pos-bg); color: var(--pos); }

/* Vignette produit (placeholder ou cadre d'image carrée) */
.gymbery-prod-img { display: grid; place-items: center; background: linear-gradient(135deg, var(--surface-container), var(--surface-container-high)); border-radius: var(--radius-lg); color: var(--outline); overflow: hidden; }
.gymbery-prod-img img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.gymbery-prod-img .material-symbols-outlined { font-size: 40px; }

/* ---- 1 · Divulgation d'affiliation (mention de pied discrète) ----
   Markup : <p class="gymbery-affdisclosure"><span class="material-symbols-outlined">info</span><span>… <a href="…">En savoir plus</a>.</span></p> */
.gymbery-affdisclosure { display: flex; align-items: flex-start; gap: 8px; margin: 2.4em 0 0; padding: 12px 0 0; border-top: 1px solid var(--outline-variant); font-size: 12.5px; line-height: 1.5; color: var(--outline); }
.gymbery-affdisclosure .material-symbols-outlined { font-size: 16px; flex-shrink: 0; margin-top: 1px; color: var(--outline); }
.entry-content a.gymbery-affdisclosure-link,
.gymbery-affdisclosure a { color: var(--primary); font-weight: 600; }

/* ---- 3 · Encadré verdict / « Notre choix » (answer-first) ---- */
.gymbery-verdict { background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-xl); box-shadow: var(--rim-light); overflow: hidden; margin: 2em 0; }
.gymbery-verdict__head { display: flex; align-items: center; gap: 12px; padding: 16px 22px; background: linear-gradient(90deg, rgba(0, 64, 224, 0.07), transparent); border-bottom: 1px solid var(--outline-variant); }
.gymbery-verdict__head .material-symbols-outlined { color: var(--amber); font-size: 22px; font-variation-settings: "FILL" 1; }
.gymbery-verdict__eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--primary); }
.gymbery-verdict__picks { display: grid; gap: 1px; background: var(--outline-variant); }
.gymbery-pick { background: var(--surface-container-lowest); padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.gymbery-pick__badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 10px; border-radius: var(--radius-full); background: var(--primary-fixed); color: var(--on-primary-fixed); }
.gymbery-pick__badge--amber { background: #fff3cc; color: #5c4600; }
.gymbery-pick__badge--green { background: var(--pos-bg); color: var(--pos); }
.gymbery-pick__name { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--on-surface); line-height: 1.25; }
.gymbery-pick__why { font-size: 13.5px; color: var(--on-surface-variant); line-height: 1.5; margin: 0; flex: 1; }
.gymbery-pick .gymbery-stars { font-size: 16px; }
.entry-content .gymbery-pick .gymbery-cta { padding: 11px 16px; font-size: 13.5px; }
@media (min-width: 640px) { .gymbery-verdict__picks { grid-template-columns: repeat(3, 1fr); } }

/* ---- 4 · Avantages / Inconvénients ---- */
.gymbery-proscons { display: grid; gap: 16px; margin: 2em 0; }
.gymbery-proscons__col { border-radius: var(--radius-xl); padding: 20px 22px; border: 1px solid var(--outline-variant); background: var(--surface-container-lowest); }
.gymbery-proscons__col--pos { border-color: rgba(15, 138, 77, 0.3); background: var(--pos-bg); }
.gymbery-proscons__col--neg { border-color: rgba(192, 57, 43, 0.25); background: var(--neg-bg); }
.gymbery-proscons__title { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 15px; font-weight: 700; margin: 0 0 14px; }
.gymbery-proscons__col--pos .gymbery-proscons__title { color: var(--pos); }
.gymbery-proscons__col--neg .gymbery-proscons__title { color: var(--neg); }
.gymbery-proscons__title .material-symbols-outlined { font-size: 22px; font-variation-settings: "FILL" 1; }
.entry-content .gymbery-proscons ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.entry-content .gymbery-proscons li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; line-height: 1.4; color: var(--on-surface); margin: 0; }
.gymbery-proscons li .material-symbols-outlined { font-size: 18px; line-height: 1; flex-shrink: 0; }
.gymbery-proscons__col--pos li .material-symbols-outlined { color: var(--pos); }
.gymbery-proscons__col--neg li .material-symbols-outlined { color: var(--neg); }
@media (min-width: 640px) { .gymbery-proscons { grid-template-columns: 1fr 1fr; } }

/* ---- 5 · Note par critère (barres) ---- */
.gymbery-rating { background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-xl); box-shadow: var(--rim-light); padding: 24px; margin: 2em 0; }
.gymbery-rating__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--outline-variant); }
.gymbery-rating__title { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--on-surface); }
.gymbery-rating__global { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.gymbery-rating__score { font-family: var(--font-mono); font-weight: 700; font-size: 15px; line-height: 1; color: var(--primary); }
.gymbery-rating__score small { font-size: 1em; color: var(--outline); font-weight: 700; }
.gymbery-rating__rows { display: flex; flex-direction: column; gap: 14px; }
.gymbery-crit { display: grid; grid-template-columns: 130px 1fr 34px; align-items: center; gap: 14px; }
.gymbery-crit__label { font-size: 14px; font-weight: 600; color: var(--on-surface); }
.gymbery-crit__track { display: block; height: 8px; border-radius: var(--radius-full); background: var(--surface-container-high); overflow: hidden; }
.gymbery-crit__fill { display: block; height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--primary-container), var(--primary)); }
.gymbery-crit__val { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--on-surface); text-align: right; }
@media (max-width: 560px) {
  /* Mobile : on empile titre puis note (stars + score) cale a gauche, lecture naturelle. */
  .gymbery-rating { padding: 20px; }
  .gymbery-rating__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .gymbery-rating__global { margin-left: 0; }
  .gymbery-crit { grid-template-columns: 1fr 40px; grid-template-areas: "label val" "track track"; row-gap: 6px; }
  .gymbery-crit__label { grid-area: label; }
  .gymbery-crit__val { grid-area: val; }
  .gymbery-crit__track { grid-area: track; }
}

/* ---- 6 · Encadré méthodologie (E-E-A-T) ---- */
.gymbery-method { background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: var(--radius-xl); padding: 22px 24px; margin: 2em 0; }
.gymbery-method__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.gymbery-method__head .material-symbols-outlined { color: var(--primary); font-size: 22px; }
.entry-content .gymbery-method__head h2 { font-size: 16px; color: var(--on-surface); margin: 0; }
.gymbery-method p { font-size: 14.5px; line-height: 1.65; color: var(--on-surface-variant); margin: 0; }
.entry-content .gymbery-method ul { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.entry-content .gymbery-method li { display: flex; gap: 9px; font-size: 14px; color: var(--on-surface); margin: 0; }
.gymbery-method li .material-symbols-outlined { font-size: 18px; color: var(--primary); flex-shrink: 0; margin-top: 1px; }

/* ---- A · Tableau comparatif (synthèse, ligne « notre choix ») ----
   Le wrapper .gymbery-compare-scroll porte la bordure/ombre/rayon ;
   on neutralise le chrome de base de .entry-content table. */
.gymbery-compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-xl); border: 1px solid rgba(196, 197, 217, 0.6); box-shadow: var(--rim-light); margin: 2em 0; }
.entry-content .gymbery-compare { width: 100%; min-width: 640px; border-collapse: collapse; border: 0; border-radius: 0; box-shadow: none; font-size: 13px; background: var(--surface-container-lowest); }
.entry-content .gymbery-compare thead th { background: var(--primary); color: var(--on-primary); font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; text-align: left; padding: 12px 10px; vertical-align: middle; }
.entry-content .gymbery-compare tbody td { padding: 11px 10px; border-top: 1px solid rgba(196, 197, 217, 0.5); vertical-align: middle; color: var(--on-surface); text-align: left; }
.entry-content .gymbery-compare tbody tr:nth-child(even) td { background: rgba(240, 243, 255, 0.5); }
.entry-content .gymbery-compare tbody tr.is-pick td { background: rgba(255, 191, 0, 0.08); }
.entry-content .gymbery-compare tbody tr.is-pick { box-shadow: inset 3px 0 0 var(--amber); }
.gymbery-compare__prod { display: flex; align-items: center; gap: 12px; }
.gymbery-compare__prod .gymbery-prod-img { width: 46px; height: 46px; flex-shrink: 0; }
.gymbery-compare__prod .gymbery-prod-img .material-symbols-outlined { font-size: 22px; }
.gymbery-compare__name { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--on-surface); line-height: 1.2; }
.gymbery-compare__pickflag { display: block; font-family: var(--font-mono); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #5c4600; margin-top: 3px; }
.gymbery-compare__price { font-family: var(--font-sans); font-weight: 600; font-size: 14px; white-space: nowrap; }
.gymbery-compare .gymbery-stars { font-size: 12px; }

/* =====================================================================
   COMPARATIF « PODIUM » (.gbc) — handoff Claude Design, integre au theme
   Remplace l'ancien .gymbery-compare pour les articles money comparatif.
   Prefixe .gbc- (zero collision). Etoiles en ★ CSS (pas Material Symbols),
   marqueurs ✓/✗ en SVG inline. Tout est prefixe .entry-content pour battre
   le chrome de table de base (.entry-content table/th/td) et les styles de
   titres (.entry-content h2/h3). Tokens declares en local sur .gbc (valeurs
   identiques au :root du theme, composant auto-portant).
   ===================================================================== */
.entry-content .gbc{
  --primary:#0040e0; --primary-dark:#0035be; --primary-soft:#e7eefe;
  --amber:#ffbf00; --amber-soft:#fff4cc; --amber-ink:#5c4600; --on-amber:#1d1c09;
  --ink:#151c27; --sub:#2f3645; --outline:#747688; --outline-v:#c4c5d9;
  --surface:#f9f9ff; --low:#f0f3ff; --cont:#e7eefe; --lowest:#ffffff;
  --display:"Montserrat",system-ui,sans-serif;
  --sans:"Sora",system-ui,sans-serif;
  --mono:"Roboto",system-ui,sans-serif;
  max-width:820px; margin:2.5rem auto; padding:0; font-family:var(--sans); color:var(--ink);
  /* neutralise le line-height 1.75 herite de .entry-content (sinon trous blancs
     + cartes trop hautes : le design a ete pense en line-height normal ~1.2). */
  line-height:1.2;
}
.entry-content .gbc *{box-sizing:border-box;}
.entry-content .gbc__kicker{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--primary);margin:0 0 10px;}
.entry-content .gbc__title{font-family:var(--display);font-weight:600;font-size:30px;line-height:1.04;letter-spacing:-.02em;color:var(--ink);margin:0 0 22px;}

/* ---- atomes partages ---- */
.entry-content .gbc-thumb{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;font-family:var(--display);font-weight:800;letter-spacing:-.01em;}
.entry-content .gbc-thumb::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0 2px,transparent 2px 9px);}
.entry-content .gbc-thumb span{position:relative;}
.entry-content .gbc-thumb--money{background:linear-gradient(135deg,var(--amber),#e0a800);color:var(--on-amber);}
/* Variante PHOTO PRODUIT : une <img> dans la vignette neutralise le degrade/hachures.
   Les photos produit money sont DETOUREES (rembg -> WebP transparent), donc fond
   transparent + aucune bordure : le produit flotte directement sur la carte (sinon
   un carre blanc reapparaitrait sur la carte lauréate ambre et dans le tableau). */
.entry-content .gbc-thumb:has(img){background:transparent;border:0;}
.entry-content .gbc-thumb:has(img)::before{display:none;}
.entry-content .gbc-thumb img{width:100%;height:100%;object-fit:contain;display:block;padding:4px;box-sizing:border-box;}
.entry-content .gbc-flag{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--on-amber);background:var(--amber);padding:5px 10px;border-radius:999px;white-space:nowrap;}
.entry-content .gbc-flag--primary{color:#fff;background:var(--primary);}
.entry-content .gbc-spec{display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--sub);background:var(--cont);padding:5px 10px;border-radius:999px;white-space:nowrap;}
.entry-content .gbc-spec--off{color:var(--outline);background:var(--surface);border:1px solid var(--outline-v);}
.entry-content .gbc-spec svg{display:block;flex:0 0 auto;}
/* .gbc-dot retire : la note et les pastilles sont desormais deux blocs distincts
   (.gbc-pick__rating + .gbc-pick__tags), plus de separateur a gerer. */
.entry-content .gbc-stars{display:inline-flex;align-items:center;gap:6px;}
.entry-content .gbc-stars__bar{position:relative;display:inline-block;font-size:var(--s,15px);line-height:1;font-family:Arial,sans-serif;}
.entry-content .gbc-stars__bar::before{content:"★★★★★";color:var(--outline-v);letter-spacing:2px;}
.entry-content .gbc-stars__fill{position:absolute;top:0;left:0;overflow:hidden;white-space:nowrap;width:calc(var(--rate)/5*100%);}
.entry-content .gbc-stars__fill::before{content:"★★★★★";color:var(--amber);letter-spacing:2px;}
.entry-content .gbc-stars__num{font-family:var(--mono);font-weight:700;font-size:calc(var(--s,15px) * .92);color:var(--ink);}
.entry-content .gbc-mark{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;}
.entry-content .gbc-mark--yes{background:var(--primary-soft);}
.entry-content .gbc-mark--no{background:var(--surface);border:1px solid var(--outline-v);}
.entry-content .gbc-mark svg{display:block;}
.entry-content .gbc-na{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--outline);}

/* ---- CTA (neutralise le soulignement de lien de .entry-content) ---- */
/* Variante « D » : ambre en degrade + ombre douce (relief premium). */
/* Variante « D+ » : ambre en degrade + ombre coloree douce + fleche glissante
   (relief premium ; le bouton du podium domine le CTA secondaire .gbc-rest__cta). */
.entry-content .gbc-cta{display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;white-space:nowrap;font-family:var(--display);font-weight:700;border-radius:999px;background:linear-gradient(180deg,#ffca28,var(--amber));color:#2a1c00;padding:12px 22px;font-size:14px;box-shadow:0 6px 16px rgba(255,191,0,.32),inset 0 1px 0 rgba(255,255,255,.45);transition:background .25s,box-shadow .2s,transform .12s;}
/* color: fixe explicitement au survol pour battre .entry-content a:hover (qui
   sinon repeint le label + la fleche currentColor en bleu). */
.entry-content .gbc-cta:hover{background:linear-gradient(180deg,#ffc107,#f0ad00);color:#2a1c00;text-decoration:none;box-shadow:0 9px 22px rgba(255,191,0,.42),inset 0 1px 0 rgba(255,255,255,.45);}
.entry-content .gbc-cta:active{transform:translateY(1px);box-shadow:0 4px 12px rgba(255,191,0,.3);}
.entry-content .gbc-cta .material-symbols-outlined{font-size:17px;transition:transform .2s;}
.entry-content .gbc-cta:hover .material-symbols-outlined{transform:translateX(3px);}
.entry-content .gbc-cta--ghost{background:transparent;color:var(--primary);border:1.5px solid var(--outline-v);padding:9px 14px;font-size:13px;}
.entry-content .gbc-cta--ghost:hover{background:transparent;color:var(--primary);filter:none;border-color:var(--primary);}

/* ---- PODIUM VERTICAL : 2 a 3 cartes-laureats pleine largeur ---- */
.entry-content .gbc-podium{display:flex;flex-direction:column;gap:14px;margin:0 0 30px;}
.entry-content .gbc-pick{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding:16px 20px;border-radius:18px;background:var(--lowest);border:1px solid var(--outline-v);}
.entry-content .gbc-pick--lead{background:linear-gradient(115deg,var(--amber-soft),var(--lowest) 52%);border:1.5px solid var(--amber);}
.entry-content .gbc-pick__thumb{width:96px;height:96px;border-radius:18px;font-size:22px;}
.entry-content .gbc-pick__body{flex:1;min-width:0;}
.entry-content .gbc-pick__name{font-family:var(--display);font-weight:600;font-size:21px;line-height:1.06;letter-spacing:-.02em;color:var(--ink);margin:6px 0 9px;}
.entry-content .gbc-pick__rating{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.entry-content .gbc-pick__rating .avis{font-family:var(--sans);font-size:12.5px;color:var(--sub);}
/* Pastilles en rangee pleine largeur (flex:1 1 100% = passe sous tout le reste) :
   sur mobile elles comblent l'espace sous l'image ; sur desktop = bande en bas de
   carte. cf. data/previews/podium-pastilles-pleine-largeur.html */
.entry-content .gbc-pick__tags{flex:1 1 100%;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.entry-content .gbc-pick__right{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;text-align:right;}
.entry-content .gbc-pick__price{font-family:var(--font-sans);font-weight:600;font-size:18px;line-height:1;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;}
.entry-content .gbc-pick__kg{font-family:var(--font-sans);font-weight:500;font-size:12px;color:var(--outline);line-height:1;margin:4px 0 16px;}
/* Note promo sous le CTA podium (code reduc partenaire), registre ambre. A
   distinguer du slot .gbc-pick__kg (sous-metrique de comparaison prix) : la
   promo se place SOUS le bouton, jamais a la place de la sous-metrique. */
.entry-content .gbc-pick__promo{font-family:var(--font-sans);font-weight:600;font-size:11.5px;color:var(--amber-ink);line-height:1.25;margin-top:8px;}

/* ---- Socle MOBILE des cartes podium (rendu < 760px de la matrice) :
   phrase d'orientation (.gbc-pick__why) + strip de 3 specs decisives
   (.gbc-pick__strip) + prix en mini-bloc (.gbc-pick__priceline). Classes
   ADDITIVES : les cartes podium "classiques" (avec .gbc-pick__tags) restent
   inchangees. cf. data/sections-money.html (archetype Comparatif). ---- */
.entry-content .gbc-pick__why{font-family:var(--sans);font-size:13px;line-height:1.45;color:var(--sub);margin:7px 0 0;}
.entry-content .gbc-pick__strip{flex:1 1 100%;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--outline-v);border:1px solid var(--outline-v);border-radius:12px;overflow:hidden;}
.entry-content .gbc-strip__cell{background:var(--lowest);padding:8px 11px;display:flex;flex-direction:column;gap:3px;min-width:0;}
.entry-content .gbc-pick--lead .gbc-strip__cell{background:#fffdf5;}
.entry-content .gbc-strip__k{display:flex;align-items:center;gap:4px;font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--outline);}
.entry-content .gbc-strip__k .material-symbols-outlined{font-size:12px;color:var(--primary);}
.entry-content .gbc-strip__v{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.18;overflow-wrap:break-word;hyphens:auto;}
.entry-content .gbc-pick__priceline{flex:1 1 100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px;border:1px solid var(--outline-v);border-radius:12px;background:var(--low);}
.entry-content .gbc-pick--lead .gbc-pick__priceline{background:#fffdf5;border-color:var(--amber);}
.entry-content .gbc-priceline__k{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--outline);}
.entry-content .gbc-priceline__k .material-symbols-outlined{font-size:13px;color:var(--primary);}
.entry-content .gbc-priceline__v{font-family:var(--sans);font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.01em;}

/* ---- tableau des autres references (chrome de base neutralise) ---- */
.entry-content .gbc-restlabel{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);margin:0 0 14px;}
.entry-content .gbc-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:0;border-radius:0;box-shadow:none;background:transparent;}
/* Filet de securite : si le filtre the_content gymbery_wrap_tables enrobe quand
   meme le .gbc-table dans un .gymbery-table-scroll (chrome border/radius/ombre),
   on neutralise ce chrome ici. Le fix racine est cote PHP (le filtre saute les
   tables de composants), ceci couvre le cas ou functions.php n'est pas re-uploade. */
.entry-content .gbc-scroll .gymbery-table-scroll{border:0;border-radius:0;box-shadow:none;overflow:visible;}
.entry-content .gbc-table{width:100%;min-width:560px;border-collapse:collapse;font-size:13px;border:0;border-radius:0;box-shadow:none;background:transparent;overflow:visible;}
.entry-content .gbc-table thead th{background:transparent;color:var(--outline);font-family:var(--mono);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:0 12px 12px;}
.entry-content .gbc-table tbody td{padding:13px 12px;border-top:1px solid var(--outline-v);vertical-align:middle;background:transparent;text-align:left;}
.entry-content .gbc-table tbody tr:nth-child(even) td{background:transparent;}
.entry-content .gbc-table tbody tr:hover td{background:transparent;}
.entry-content .gbc-table .c{text-align:center;}
.entry-content .gbc-table .r{text-align:right;}
/* Cellule CTA : si elle contient des boutons (ex. double bouton Homme/Femme),
   on l'empile proprement avec un gap (sinon les .gbc-cta--ghost se touchent,
   desktop ET mobile). N'affecte que les cellules a CTA grace a :has(). */
.entry-content .gbc-table tbody td:has(.gbc-cta){display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:7px;}
.entry-content .gbc-prod{display:flex;align-items:center;gap:11px;}
.entry-content .gbc-prod__thumb{width:52px;height:52px;border-radius:12px;font-size:14px;}
.entry-content .gbc-prod__name{display:block;font-family:var(--display);font-weight:700;font-size:15px;line-height:1.15;color:var(--ink);}
.entry-content .gbc-prod__sub{display:block;font-family:var(--sans);font-size:12px;color:var(--outline);margin-top:2px;}
.entry-content .gbc-prod__sub b{color:var(--primary);font-weight:700;}
.entry-content .gbc-num{font-family:var(--mono);font-weight:600;color:var(--sub);white-space:nowrap;}
.entry-content .gbc-price{display:block;font-family:var(--font-sans);font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap;}
.entry-content .gbc-price__kg{display:block;font-family:var(--font-sans);font-weight:500;font-size:11px;color:var(--outline);}

/* ---- Ajustements DESKTOP du bloc prix/CTA des cartes podium (complement du
   breakpoint mobile max-width:620px ci-dessous) : CTA plus large, bloc prix+CTA
   descendu un peu sur la carte, plus d'air entre le prix et le petit texte. ---- */
@media (min-width:621px){
  .entry-content .gbc-pick .gbc-cta{padding:12px 30px;}
  .entry-content .gbc-pick__right{margin-top:16px;}
  .entry-content .gbc-pick__kg{margin-top:8px;}
  /* CTA descendu sous le prix (plus d'air desktop). Sert aussi aux cartes a
     double CTA (ex. Homme/Femme) : sans cet espace les boutons se touchent. */
  .entry-content .gbc-pick__right .gbc-cta{margin-top:18px;}
}

@media (max-width:640px){ .entry-content .gbc__title{font-size:25px;} }
@media (max-width:620px){
  /* Option B : vignette + texte cote a cote (ligne 1), pastilles pleine largeur
     SOUS l'image (ligne 2, l'espace vide est comble), puis prix + CTA ambre pleine
     largeur (ligne 3). L'ordre force tags avant right.
     cf. data/previews/podium-pastilles-pleine-largeur.html */
  .entry-content .gbc-pick{align-items:flex-start;gap:14px;}
  .entry-content .gbc-pick__thumb{width:84px;height:84px;}
  .entry-content .gbc-pick__name{font-size:19px;}
  .entry-content .gbc-pick__tags{order:3;}
  .entry-content .gbc-pick__strip{order:3;}
  .entry-content .gbc-pick__priceline{order:4;margin-top:2px;}
  .entry-content .gbc-pick__right{flex:1 1 100%;order:4;flex-direction:row;flex-wrap:wrap;align-items:baseline;text-align:left;gap:4px 10px;}
  .entry-content .gbc-pick__kg{margin:0;}
  .entry-content .gbc-pick .gbc-cta{flex:1 1 100%;margin-top:12px;}
  .entry-content .gbc-pick__promo{flex:1 1 100%;text-align:center;margin-top:9px;}
}

/* =====================================================================
   MATRICE COMPARATIVE (.gbc-matrix) — version DESKTOP enrichie du podium.
   3 colonnes alignees au pixel via subgrid (>=760px) ; sous 760px la matrice
   est masquee et on retombe sur .gbc-podium (cartes mobile, socle ci-dessus).
   Markup : .gbc-matrix > 3x .gbc-mx (1 lead) ; chaque colonne =
   __cap, __head (thumb+nom), __rows <ul> (note/charge/fixation/exercices/
   encombrement/garantie + li.is-price), __foot (CTA + promo|placeholder).
   IMPORTANT (subgrid) : grid-template-rows compte cap+head+N specs+foot ;
   adapter repeat(N) ET .gbc-mx__rows span N si on change le nombre de rangees.
   ===================================================================== */
.entry-content .gbc-matrix{display:none;}
@media (min-width:760px){
  .entry-content .gbc-matrix{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto repeat(7,auto) auto;gap:0 14px;margin:0 0 30px;}
  .entry-content .gbc-podium{display:none;} /* desktop : cartes simples masquees */
}
.entry-content .gbc-mx{display:flex;flex-direction:column;background:var(--lowest);border:1px solid var(--outline-v);border-radius:18px;overflow:hidden;}
.entry-content .gbc-mx--lead{border:1.5px solid var(--amber);box-shadow:0 1px 2px rgba(21,28,39,.04),0 18px 40px rgba(255,191,0,.16);}
.entry-content .gbc-mx__cap{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:7px 8px;color:var(--outline);background:var(--low);}
.entry-content .gbc-mx--lead .gbc-mx__cap{color:var(--on-amber);background:var(--amber);}
.entry-content .gbc-mx__head{padding:16px 16px 14px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;border-bottom:1px solid var(--outline-v);}
.entry-content .gbc-mx--lead .gbc-mx__head{background:linear-gradient(180deg,var(--amber-soft),transparent);}
.entry-content .gbc-mx__thumb{width:92px;height:92px;border-radius:16px;}
.entry-content .gbc-mx__name{font-family:var(--display);font-weight:600;font-size:16.5px;line-height:1.15;letter-spacing:-.01em;color:var(--ink);}
.entry-content .gbc-mx__rows{list-style:none;margin:0;padding:6px 16px 4px;display:flex;flex-direction:column;}
.entry-content .gbc-mx__rows li{display:flex;flex-direction:column;gap:2px;padding:9px 0;border-top:1px solid var(--low);}
.entry-content .gbc-mx__rows li:first-child{border-top:0;}
.entry-content .gbc-mx__k{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--outline);}
.entry-content .gbc-mx__k .material-symbols-outlined{font-size:14px;color:var(--primary);}
.entry-content .gbc-mx__v{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);line-height:1.3;}
.entry-content .gbc-mx__v small{display:block;font-weight:500;font-size:12px;color:var(--outline);}
/* Rangee PRIX (la derniere du tableau de specs) : valeur un cran plus grosse =
   reste le chiffre cle sans flotter hors du rythme des rangees. */
.entry-content .gbc-mx__rows li.is-price{border-top:1px solid var(--outline-v);}
.entry-content .gbc-mx__rows li.is-price .gbc-mx__v{font-size:17px;letter-spacing:-.01em;}
.entry-content .gbc-mx__foot{margin-top:auto;padding:14px 16px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;border-top:1px solid var(--outline-v);}
.entry-content .gbc-mx .gbc-cta{width:100%;}
.entry-content .gbc-mx__promo{font-family:var(--sans);font-weight:600;font-size:11px;color:var(--amber-ink);text-align:center;line-height:1.25;min-height:1.25em;}
/* placeholder : reserve la meme hauteur de pied dans les colonnes SANS code promo
   (garde les CTA alignes). Markup : <span class="gbc-mx__promo gbc-mx__promo--ph">&nbsp;</span> */
.entry-content .gbc-mx__promo--ph{visibility:hidden;}
/* Overrides SUBGRID — declares APRES les regles de base pour gagner a specificite
   egale (sinon .gbc-mx{display:flex} les ecrase et l'alignement rangee-a-rangee
   ne s'active pas). */
@media (min-width:760px){
  .entry-content .gbc-mx{grid-row:1 / -1;display:grid;grid-template-rows:subgrid;}
  .entry-content .gbc-mx__rows{grid-row:span 7;display:grid;grid-template-rows:subgrid;padding-top:0;padding-bottom:0;}
}

/* =====================================================================
   AUTRES REFERENCES (.gbc-rest) — tableau raccorde au style premium mais
   SECONDAIRE au podium (carte calme + CTA ambre clair/contour .gbc-rest__cta
   vs ambre plein du podium). Desktop = tableau ; mobile (<620px) = mini-cartes
   (chaque <td> porte un data-label affiche en pseudo ::before). Le 1er <td>
   = produit (sans data-label), le dernier = CTA (td.cta-cell).
   ===================================================================== */
.entry-content .gbc-rest{border:1px solid var(--outline-v);border-radius:18px;overflow:hidden;background:var(--lowest);}
.entry-content .gbc-rest table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13px;border:0;border-radius:0;box-shadow:none;}
.entry-content .gbc-rest thead th{background:var(--low);color:var(--outline);font-family:var(--mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:11px 14px;}
.entry-content .gbc-rest thead th.r{text-align:right;}
.entry-content .gbc-rest tbody td{padding:12px 14px;border-top:1px solid var(--outline-v);vertical-align:middle;background:transparent;text-align:left;}
.entry-content .gbc-rest tbody tr:hover td{background:var(--surface);}
.entry-content .gbc-rest .r{text-align:right;}
.entry-content .gbc-rest__prod{display:flex;align-items:center;gap:12px;}
.entry-content .gbc-rest__thumb{flex:0 0 auto;width:50px;height:50px;border-radius:12px;background:#fff;border:1px solid var(--outline-v);overflow:hidden;display:grid;place-items:center;}
.entry-content .gbc-rest__thumb img{width:100%;height:100%;object-fit:contain;padding:3px;}
.entry-content .gbc-rest__name{display:block;font-family:var(--display);font-weight:700;font-size:14.5px;line-height:1.2;color:var(--ink);}
.entry-content .gbc-rest__sub{display:block;font-family:var(--sans);font-size:12px;color:var(--primary);font-weight:600;margin-top:2px;}
.entry-content .gbc-rest__type{display:inline-flex;align-items:center;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--sub);background:var(--cont);padding:5px 11px;border-radius:999px;white-space:nowrap;}
.entry-content .gbc-rest__num{font-family:var(--mono);font-weight:600;font-size:13px;color:var(--sub);white-space:nowrap;}
.entry-content .gbc-rest__ex{color:var(--sub);}
.entry-content .gbc-rest__price{font-family:var(--sans);font-weight:700;font-size:14.5px;color:var(--ink);white-space:nowrap;}
.entry-content .gbc-rest__cta{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-family:var(--display);font-weight:700;font-size:13px;color:var(--amber-ink);background:var(--amber-soft);border:1px solid var(--amber);border-radius:999px;padding:8px 15px;white-space:nowrap;transition:background .2s,color .2s;}
.entry-content .gbc-rest__cta:hover{background:var(--amber);color:#2a1c00;text-decoration:none;}
.entry-content .gbc-rest__cta .material-symbols-outlined{font-size:15px;}
@media (max-width:620px){
  .entry-content .gbc-rest table,.entry-content .gbc-rest tbody,.entry-content .gbc-rest tr,.entry-content .gbc-rest td{display:block;width:100%;}
  .entry-content .gbc-rest thead{display:none;}
  .entry-content .gbc-rest tbody tr{padding:14px 15px;border-top:1px solid var(--outline-v);}
  .entry-content .gbc-rest tbody tr:first-child{border-top:0;}
  .entry-content .gbc-rest tbody td{border-top:0;padding:0;}
  .entry-content .gbc-rest tbody tr:hover td{background:transparent;}
  .entry-content .gbc-rest__prod{margin-bottom:11px;}
  .entry-content .gbc-rest td[data-label]{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0;border-top:1px solid var(--low);}
  .entry-content .gbc-rest td[data-label]::before{content:attr(data-label);font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--outline);}
  .entry-content .gbc-rest td.cta-cell{margin-top:12px;}
  .entry-content .gbc-rest__cta{display:flex;justify-content:center;}
}

/* ---- B · Cartes podium (n°1 / 2 / 3) ---- */
.gymbery-podium { display: grid; gap: 18px; margin: 2em 0; }
.gymbery-podium__card { position: relative; background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-xl); box-shadow: var(--rim-light); padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 12px; text-align: center; align-items: center; transition: transform 0.3s, border-color 0.3s; }
.gymbery-podium__card:hover { transform: translateY(-4px); border-color: var(--primary); }
.gymbery-podium__card--1 { border-color: var(--amber); box-shadow: 0 1px 2px rgba(21, 28, 39, 0.04), 0 16px 40px rgba(255, 191, 0, 0.18); }
.gymbery-podium__medal { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 34px; height: 34px; border-radius: var(--radius-full); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 15px; color: #fff; background: var(--outline); border: 3px solid var(--surface); box-shadow: var(--rim-light); }
.gymbery-podium__card--1 .gymbery-podium__medal { background: var(--amber); color: var(--on-tertiary-fixed); width: 40px; height: 40px; font-size: 17px; top: -20px; }
.gymbery-podium__card--2 .gymbery-podium__medal { background: #9aa0b5; }
.gymbery-podium__card--3 .gymbery-podium__medal { background: #c08a4e; }
.gymbery-podium__card .gymbery-prod-img { width: 96px; height: 96px; }
.gymbery-podium__name { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--on-surface); line-height: 1.25; }
.gymbery-podium__why { font-size: 13px; color: var(--on-surface-variant); line-height: 1.5; margin: 0; flex: 1; }
.gymbery-podium__price { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--on-surface); }
.entry-content .gymbery-podium__card .gymbery-cta { width: 100%; }
@media (min-width: 680px) {
  .gymbery-podium { grid-template-columns: repeat(3, 1fr); align-items: end; }
  .gymbery-podium__card--1 { padding-top: 34px; }
}

/* ---- C · Mini-fiche produit répétable ---- */
.gymbery-pcard { position: relative; background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-xl); box-shadow: var(--rim-light); overflow: hidden; margin: 2em 0; scroll-margin-top: 96px; }
.gymbery-pcard + .gymbery-pcard { margin-top: 24px; }
/* Badge verdict colle au coin haut-droit (effet onglet), au-dessus de l'en-tete. */
.gymbery-pcard .gymbery-award { position: absolute; top: 0; right: 0; z-index: 2; border-radius: 0 var(--radius-xl) 0 var(--radius-lg); padding: 6px 11px; font-size: 11px; }
.gymbery-pcard__body { padding: 22px; display: flex; flex-direction: column; gap: 8px; }
/* En-tete (N1/D1) : grille vignette + bloc titre + description. Vignette carree
   de taille fixe (encaisse tous les ratios produit sans vide) ; sur mobile la desc
   passe sous l'ensemble, sur desktop elle se loge a droite de la vignette. */
.gymbery-pcard__head { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 0; grid-template-areas: "media top" "desc desc"; align-items: start; }
.gymbery-pcard__media { grid-area: media; flex: 0 0 auto; width: 108px; height: 108px; background: #fff; border: 1px solid #e5e7eb; border-radius: var(--radius-lg); overflow: hidden; display: grid; place-items: center; }
.gymbery-pcard__media img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
/* Garde-fou : si wpautop injecte un <br> entre __rank et l'image, il deviendrait un item de
   grille (2e rangee) qui pousse l'image en bas de la vignette. On le neutralise. */
.gymbery-pcard__media br { display: none; }
.gymbery-pcard__media .material-symbols-outlined { font-size: 40px; color: var(--outline); }
/* Rang = onglet de coin haut-gauche de la CARTE (miroir du .gymbery-award a droite),
   HORS de la vignette. Ancre sur .gymbery-pcard (position:relative) : comme son bloc
   conteneur est un ancetre de __media, l'overflow:hidden de la vignette ne le rogne pas. */
.gymbery-pcard__rank { position: absolute; top: 0; left: 0; z-index: 3; min-width: 30px; padding: 5px 9px; border-radius: var(--radius-xl) 0 var(--radius-lg) 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 13px; line-height: 1; background: var(--primary); color: #fff; box-shadow: 0 2px 6px rgba(0, 64, 224, .28); }
.gymbery-pcard__top { grid-area: top; min-width: 0; }
.entry-content .gymbery-pcard__name { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--on-surface); line-height: 1.2; margin-top: 8px; }
.gymbery-pcard__rating { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.gymbery-pcard__rating .gymbery-stars { align-self: center; }
.gymbery-pcard__score { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--outline); line-height: 1; }
.gymbery-pcard__score small { font-size: 1em; color: var(--outline); font-weight: 700; }
.gymbery-pcard__reviews { font-size: 12px; color: var(--outline); font-weight: 600; }
.gymbery-pcard__count { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--outline); line-height: 1; }
.gymbery-pcard__desc { grid-area: desc; font-size: 16px; color: var(--on-surface-variant); line-height: 1.6; margin: 10px 0 0; }
.gymbery-pcard__mini { display: grid; gap: 6px 20px; }
/* Filet wpautop : si des <br> sont injectes entre les <span> pro/con (mini non
   minifie), ils deviennent des items de grille et cassent la disposition 2 colonnes
   (tout empile en colonne 1). On les retire du flux. Fix racine = minifier le mini. */
.entry-content .gymbery-pcard__mini br { display: none; }
.gymbery-pcard__mini span { display: flex; align-items: center; gap: 7px; font-size: 13px; line-height: 1.35; color: var(--on-surface); }
.gymbery-pcard__mini .material-symbols-outlined { font-size: 17px; line-height: 1; flex-shrink: 0; }
.gymbery-pcard__mini .pro .material-symbols-outlined { color: var(--pos); }
.gymbery-pcard__mini .con .material-symbols-outlined { color: var(--neg); }
.gymbery-pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; padding-top: 14px; border-top: 1px solid #e5e7eb; }
.gymbery-pcard__price { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--on-surface); min-width: 0; }
.gymbery-pcard__price small { display: block; font-size: 10px; color: var(--outline); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; }
.gymbery-pcard__ctas { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
/* Desktop (D1) : on a de la place, on agrandit vignette + titre + score et on
   aere l'en-tete. Mobile = base ci-dessus (vignette 108px, tout empile). */
@media (min-width: 620px) {
  .gymbery-pcard__head { column-gap: 26px; grid-template-areas: "media top" "media desc"; }
  .gymbery-pcard__media { width: 148px; height: 148px; }
  .entry-content .gymbery-pcard__name { font-size: 20px; margin-top: 18px; }
  .gymbery-pcard__rating { margin-top: 10px; }
  /* Foot desktop : on donne un corps au prix (pill teintee) pour qu'il ne flotte
     plus seul a l'extreme gauche face au CTA. Mobile inchange (foot en colonne). */
  .gymbery-pcard__price { background: var(--surface-container-low); padding: 9px 15px; border-radius: var(--radius-lg); }
}
@media (min-width: 480px) { .gymbery-pcard__mini { grid-template-columns: 1fr 1fr; } }
/* Mobile : badge onglet plus compact, titre decale sous le badge, foot non casse. */
@media (max-width: 619px) {
  .gymbery-pcard .gymbery-award { font-size: 9px; padding: 5px 9px; gap: 4px; letter-spacing: 0.04em; }
  .gymbery-pcard .gymbery-award .material-symbols-outlined { font-size: 11px; }
  .entry-content .gymbery-pcard__name { font-size: 16px; margin-top: 16px; }
  .gymbery-pcard__rating { flex-wrap: wrap; }
  .gymbery-pcard__reviews { flex-basis: 100%; margin-top: 2px; }
  /* Foot mobile (variante C) : bouton(s) pleine largeur EN HAUT, prix + code
     regroupes et centres EN DESSOUS. Sur desktop, on reste sur la ligne
     prix-gauche / CTA-droite definie plus haut. */
  .gymbery-pcard__foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .gymbery-pcard__ctas { order: 1; flex-wrap: nowrap; }
  .entry-content .gymbery-pcard__ctas .gymbery-cta--amber { flex: 1 1 auto; }
  .gymbery-pcard__price { order: 2; text-align: center; }
  .gymbery-pcard__price small { display: inline; margin-left: 8px; }
}

/* ---- Fiche produit · bloc caractéristiques techniques (specs) ----
   <dl> clé/valeur, 2 colonnes >=440px. Valeurs en mono. S'adapte au nombre
   de specs disponibles (jamais de valeur inventee : on liste ce qui existe). */
.gymbery-pcard__specs { display: grid; grid-template-columns: 1fr; gap: 0; padding: 6px 16px; background: var(--surface-container-low); border-radius: var(--radius-lg); }
.gymbery-pcard__specs > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #e5e7eb; }
.gymbery-pcard__specs dt { font-size: 14px; color: var(--on-surface-variant); display: flex; align-items: center; gap: 6px; }
.gymbery-pcard__specs dt .material-symbols-outlined { font-size: 15px; color: var(--outline); }
.gymbery-pcard__specs dd { margin: 0; font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--on-surface); text-align: right; }
@media (min-width: 440px) { .gymbery-pcard__specs { grid-template-columns: 1fr 1fr; column-gap: 26px; } .gymbery-pcard__specs > div:nth-last-child(-n+2) { border-bottom: 0; } }
@media (max-width: 439px) { .gymbery-pcard__specs > div:last-child { border-bottom: 0; } }

/* ---- Fiche produit · verdict Pour / Contre (2 colonnes tintees) ----
   Remplace .gymbery-pcard__mini : avantages groupes a gauche (vert), inconvenients
   a droite (rouge). Markup : .gymbery-pcard__verdict > 2x .gymbery-pcard__col(--pro|--con)
   chacune avec un .gymbery-pcard__vh + <ul><li>. Minifier chaque <li> sur une ligne. */
.gymbery-pcard__verdict { display: grid; gap: 10px; }
.gymbery-pcard__col { border-radius: var(--radius-lg); padding: 13px 15px; }
.gymbery-pcard__col--pro { background: var(--pos-bg); }
.gymbery-pcard__col--con { background: var(--neg-bg); }
.gymbery-pcard__vh { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 9px; }
.gymbery-pcard__vh .material-symbols-outlined { font-size: 15px; font-variation-settings: "FILL" 1; }
.gymbery-pcard__col--pro .gymbery-pcard__vh { color: var(--pos); }
.gymbery-pcard__col--con .gymbery-pcard__vh { color: var(--neg); }
.entry-content .gymbery-pcard__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.entry-content .gymbery-pcard__col li { margin: 0; display: flex; align-items: flex-start; gap: 7px; font-size: 14px; line-height: 1.4; color: var(--on-surface); }
.gymbery-pcard__col li .material-symbols-outlined { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.gymbery-pcard__col--pro li .material-symbols-outlined { color: var(--pos); }
.gymbery-pcard__col--con li .material-symbols-outlined { color: var(--neg); }
@media (min-width: 440px) { .gymbery-pcard__verdict { grid-template-columns: 1fr 1fr; } }

/* ---- Guide · A · Critères de choix (cartes à icônes) ---- */
.gymbery-criteria { display: grid; gap: 16px; margin: 2em 0; }
.gymbery-criteria__card { display: flex; gap: 16px; background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-xl); box-shadow: var(--rim-light); padding: 20px; transition: border-color 0.3s, transform 0.3s; }
.gymbery-criteria__card:hover { border-color: var(--primary); transform: translateY(-3px); }
.gymbery-criteria__icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: var(--radius-lg); display: grid; place-items: center; background: var(--primary-fixed); color: var(--primary); }
.gymbery-criteria__icon .material-symbols-outlined { font-size: 24px; }
.gymbery-criteria__num { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--outline); letter-spacing: 0.06em; }
.entry-content .gymbery-criteria__title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--on-surface); margin: 2px 0 6px; line-height: 1.25; }
.gymbery-criteria__desc { font-size: 13.5px; color: var(--on-surface-variant); line-height: 1.55; margin: 0; }
@media (min-width: 560px) { .gymbery-criteria { grid-template-columns: 1fr 1fr; } }

/* ---- Avis de marque · Hub de gamme (catégories liées aux satellites INTERNES) ---- */
.gymbery-gamme { background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-xl); box-shadow: var(--rim-light); overflow: hidden; margin: 2em 0; }
.entry-content a.gymbery-gamme__row { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-top: 1px solid rgba(196, 197, 217, 0.4); color: var(--on-surface); text-decoration: none; transition: background 0.15s; }
.entry-content a.gymbery-gamme__row:first-child { border-top: 0; }
.entry-content a.gymbery-gamme__row:hover { background: var(--surface-container-low); }
.gymbery-gamme__ic { flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--radius-lg); display: grid; place-items: center; background: var(--primary-fixed); color: var(--primary); }
.gymbery-gamme__ic .material-symbols-outlined { font-size: 23px; }
.gymbery-gamme__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gymbery-gamme__name { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--on-surface); }
.gymbery-gamme__sub { font-size: 13px; color: var(--on-surface-variant); line-height: 1.4; }
.gymbery-gamme__go { flex-shrink: 0; font-size: 22px; color: var(--primary); transition: transform 0.2s; }
.entry-content a.gymbery-gamme__row:hover .gymbery-gamme__go { transform: translateX(3px); }

/* ---- Guide · B · Tableau « quel produit pour quel profil » ---- */
.gymbery-profil-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-xl); border: 1px solid rgba(196, 197, 217, 0.6); box-shadow: var(--rim-light); margin: 2em 0; }
.entry-content .gymbery-profil { width: 100%; min-width: 560px; border-collapse: collapse; border: 0; border-radius: 0; box-shadow: none; font-size: 14.5px; background: var(--surface-container-lowest); }
.entry-content .gymbery-profil thead th { background: var(--primary); color: var(--on-primary); font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; text-align: left; padding: 14px 18px; }
.entry-content .gymbery-profil tbody th { text-align: left; padding: 16px 18px; border-top: 1px solid rgba(196, 197, 217, 0.5); background: var(--surface-container-low); font-family: var(--font-display); font-weight: 700; color: var(--on-surface); width: 34%; }
.entry-content .gymbery-profil tbody td { padding: 16px 18px; border-top: 1px solid rgba(196, 197, 217, 0.5); color: var(--on-surface); vertical-align: middle; text-align: left; }
.entry-content .gymbery-profil tbody tr:nth-child(even) th,
.entry-content .gymbery-profil tbody tr:nth-child(even) td { background: rgba(240, 243, 255, 0.5); }
.entry-content a.gymbery-profil__pick { font-weight: 700; color: var(--primary); text-decoration: none; line-height: 1.35; }
.gymbery-profil__name { border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.entry-content a.gymbery-profil__pick:hover .gymbery-profil__name { border-bottom-color: var(--primary); }
.gymbery-profil__star { font-size: 18px; color: var(--amber); font-variation-settings: "FILL" 1; margin-right: 5px; vertical-align: -3px; }
.gymbery-profil__go { font-size: 16px; color: var(--primary); margin-left: 4px; vertical-align: -3px; transition: transform 0.2s; }
.entry-content a.gymbery-profil__pick:hover .gymbery-profil__go { transform: translateX(3px); }
.gymbery-profil__why { display: block; font-size: 12.5px; color: var(--on-surface-variant); font-weight: 400; margin-top: 2px; }

/* ---- Guide · C · Encadré « erreurs à éviter » ---- */
.gymbery-mistakes { background: var(--warn-bg); border: 1px solid rgba(184, 115, 10, 0.28); border-left: 3px solid var(--warn); border-radius: var(--radius-xl); padding: 22px 24px; margin: 2em 0; }
.gymbery-mistakes__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.gymbery-mistakes__head .material-symbols-outlined { color: var(--warn); font-size: 24px; font-variation-settings: "FILL" 1; }
.entry-content .gymbery-mistakes__head h3 { font-size: 16px; color: var(--on-surface); margin: 0; }
.entry-content .gymbery-mistakes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.entry-content .gymbery-mistakes li { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.55; color: var(--on-surface); margin: 0; }
.gymbery-mistakes li .material-symbols-outlined { color: var(--warn); font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.gymbery-mistakes strong { font-weight: 700; }

/* ---- Versus · A · En-tête face-à-face (2 produits + VS) ---- */
.gymbery-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-xl); box-shadow: var(--rim-light); overflow: hidden; margin: 2em 0; }
.gymbery-vs__side { padding: 24px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.gymbery-vs__side .gymbery-prod-img { width: 88px; height: 88px; }
.gymbery-vs__side .gymbery-prod-img .material-symbols-outlined { font-size: 38px; }
.gymbery-vs__name { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--on-surface); line-height: 1.25; }
.gymbery-vs__price { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--on-surface); }
.gymbery-vs__price small { display: block; font-size: 10px; color: var(--outline); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; margin-top: 2px; }
.entry-content .gymbery-vs__side .gymbery-cta { width: 100%; }
.entry-content .gymbery-vs__side br { display: none; }
.gymbery-vs__mid { display: flex; align-items: center; justify-content: center; padding: 0 6px; background: var(--surface-container-low); border-inline: 1px solid var(--outline-variant); }
.gymbery-vs__badge { width: 46px; height: 46px; border-radius: var(--radius-full); background: var(--primary); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 15px; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0, 64, 224, 0.25); }
@media (max-width: 560px) {
  .gymbery-vs { grid-template-columns: 1fr; }
  .gymbery-vs__mid { border-inline: 0; border-block: 1px solid var(--outline-variant); padding: 8px; }
  .gymbery-vs__badge { width: 38px; height: 38px; font-size: 13px; }
}

/* ---- Versus · B · Tableau face-à-face (gagnant par ligne) ---- */
.gymbery-duel-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-xl); border: 1px solid rgba(196, 197, 217, 0.6); box-shadow: var(--rim-light); margin: 2em 0; }
.entry-content .gymbery-duel { width: 100%; min-width: 560px; border-collapse: collapse; border: 0; border-radius: 0; box-shadow: none; font-size: 14.5px; background: var(--surface-container-lowest); }
.entry-content .gymbery-duel thead th { background: var(--primary); color: var(--on-primary); font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 14px 18px; text-align: center; }
.entry-content .gymbery-duel thead th:first-child { text-align: left; }
.entry-content .gymbery-duel tbody th { text-align: left; padding: 15px 18px; border-top: 1px solid rgba(196, 197, 217, 0.5); background: var(--surface-container-low); font-family: var(--font-display); font-weight: 700; color: var(--on-surface); white-space: nowrap; }
.entry-content .gymbery-duel tbody td { padding: 15px 18px; border-top: 1px solid rgba(196, 197, 217, 0.5); color: var(--on-surface); text-align: center; vertical-align: middle; }
.entry-content .gymbery-duel tbody td.is-win { background: var(--pos-bg); font-weight: 700; }
.gymbery-duel__win { display: inline-flex; align-items: center; gap: 6px; color: var(--pos); }
.gymbery-duel__win .material-symbols-outlined { font-size: 18px; font-variation-settings: "FILL" 1; }

/* ---- Versus · C · « Choisissez X si… / Y si… » ---- */
.gymbery-pick2 { display: grid; gap: 18px; margin: 2em 0; }
.gymbery-pick2__card { background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-xl); box-shadow: var(--rim-light); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.gymbery-pick2__card--a { border-top: 3px solid var(--primary); }
.gymbery-pick2__card--b { border-top: 3px solid var(--amber); }
.gymbery-pick2__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gymbery-pick2__lead { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--outline); }
.gymbery-pick2__name { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--on-surface); }
.entry-content .gymbery-pick2 ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.entry-content .gymbery-pick2 li { display: flex; align-items: center; gap: 9px; font-size: 14.5px; line-height: 1.45; color: var(--on-surface); margin: 0; }
.gymbery-pick2 li .material-symbols-outlined { font-size: 19px; color: var(--pos); flex-shrink: 0; }
.entry-content .gymbery-pick2__card .gymbery-cta { width: 100%; margin-top: 2px; }
@media (min-width: 620px) { .gymbery-pick2 { grid-template-columns: 1fr 1fr; } }

/* =====================================================================
   PASSERELLE INFO -> MONEY  (.gymbery-bridge--card)
   Encadré de RECO INTERNE posé dans un article INFO (au pic d'intention)
   pour amener vers le guide money. Registre BLEU (jamais l'ambre affilié).
   Lien INTERNE vers la page money : PAS de rel="sponsored" (l'affiliation +
   la divulgation vivent sur la page money). 1 SEUL par article INFO. Posé
   par le skill maillage.
   Markup (sur UNE ligne à la pose, cf. wpautop) :
   <div class="gymbery-bridge gymbery-bridge--card"><span class="gymbery-bridge__thumb"><img src="…" alt="…"></span><div class="gymbery-bridge__body"><span class="gymbery-bridge__eyebrow"><span class="material-symbols-outlined">shopping_bag</span> Guide d'achat GYMBERY</span><h3 class="gymbery-bridge__title">…</h3><p class="gymbery-bridge__hook">…</p><a href="/slug-money/" class="gymbery-cta gymbery-cta--blue">Voir le guide d'achat <span class="material-symbols-outlined arrow">arrow_forward</span></a></div></div>
   La vignette accepte une <img> (recommandé : visuel du guide / famille produit)
   OU un <span class="material-symbols-outlined"> en repli si aucune image. */
.gymbery-bridge { margin: 2.2em 0; font-family: var(--font-sans); }
.gymbery-bridge__eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--primary); }
.gymbery-bridge__eyebrow .material-symbols-outlined { font-size: 15px; }
.entry-content .gymbery-bridge__title { font-family: var(--font-display); font-weight: 700; line-height: 1.25; color: var(--on-surface); margin: 0; }
.gymbery-bridge__hook { line-height: 1.5; color: var(--on-surface-variant); margin: 0; }

.gymbery-bridge--card { display: flex; gap: 18px; align-items: center; background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-left: 4px solid var(--primary); border-radius: var(--radius-xl); box-shadow: var(--rim-light); padding: 18px 20px; }
.gymbery-bridge--card .gymbery-bridge__thumb { width: 104px; height: 104px; flex-shrink: 0; border-radius: var(--radius-lg); overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, var(--surface-container), var(--primary-fixed)); color: var(--primary); }
.gymbery-bridge--card .gymbery-bridge__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gymbery-bridge--card .gymbery-bridge__thumb .material-symbols-outlined { font-size: 40px; font-variation-settings: "FILL" 1; }
.gymbery-bridge--card .gymbery-bridge__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.entry-content .gymbery-bridge--card .gymbery-bridge__title { font-size: 18px; }
.gymbery-bridge--card .gymbery-bridge__hook { font-size: 14px; }
.entry-content .gymbery-bridge--card .gymbery-cta { align-self: flex-start; margin-top: 1px; padding: 11px 18px; font-size: 13.5px; }
@media (max-width: 560px) {
  .gymbery-bridge--card { flex-direction: column; align-items: stretch; }
  .gymbery-bridge--card .gymbery-bridge__thumb { width: 100%; height: 120px; }
  .entry-content .gymbery-bridge--card .gymbery-cta { align-self: stretch; }
}

/* ---- Avis · Fit (« c'est pour vous si… / passez votre chemin si… ») ----
   Deux colonnes. Vert = adéquation lecteur ; ardoise neutre = « pas pour vous »
   (PAS un défaut rouge : à distinguer de .gymbery-proscons qui juge le produit).
   Brique de RESPIRATION : ne JAMAIS la coller au bloc .gymbery-rating + CTA du
   haut (empilement) — la décaler plus bas, avec de la prose avant. */
.gymbery-fit { display: grid; gap: 14px; margin: 2em 0; }
@media (min-width: 620px) { .gymbery-fit { grid-template-columns: 1fr 1fr; } }
.gymbery-fit__col { border-radius: var(--radius-xl); padding: 20px 22px; border: 1px solid var(--outline-variant); background: var(--surface-container-lowest); box-shadow: var(--rim-light); }
.gymbery-fit__col--yes { border-color: rgba(15, 138, 77, 0.3); background: var(--pos-bg); }
.gymbery-fit__col--no { background: var(--surface-container-low); }
.gymbery-fit__head { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 15px; margin-bottom: 12px; }
.gymbery-fit__col--yes .gymbery-fit__head { color: var(--pos); }
.gymbery-fit__col--no .gymbery-fit__head { color: var(--on-surface-variant); }
.gymbery-fit__head .material-symbols-outlined { font-size: 22px; font-variation-settings: "FILL" 1; }
.entry-content .gymbery-fit ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.entry-content .gymbery-fit li { display: flex; gap: 9px; font-size: 14.5px; line-height: 1.5; color: var(--on-surface); margin: 0; }
.gymbery-fit li .material-symbols-outlined { font-size: 19px; flex-shrink: 0; margin-top: 1px; }
.gymbery-fit__col--yes li .material-symbols-outlined { color: var(--pos); }
.gymbery-fit__col--no li .material-symbols-outlined { color: var(--outline); }

/* ---- Avis · Verbatim (citations clients réelles) ----
   Deux présentations : (1) CARTES filet (.--duo, variante A) = 2 cartes MAX,
   de longueurs PROCHES (sinon déséquilibre visuel), source ancrée en bas ;
   (2) VEDETTE (.--feature) = 1 citation pleine largeur, étoiles en haut +
   citation + attribution en bas (gaps égaux 16px). Fort signal E-E-A-T.
   /!\ wpautop : la .gymbery-verbatim__quote force margin:0 (sinon hérite du
   margin-bottom des <p> de .entry-content -> gaps inégaux). Minifier chaque
   __item sur une ligne à la pose. */
.gymbery-verbatim { display: grid; gap: 14px; margin: 2em 0; }
@media (min-width: 620px) { .gymbery-verbatim--duo { grid-template-columns: 1fr 1fr; } }
.gymbery-verbatim__item { position: relative; display: flex; flex-direction: column; background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-xl); box-shadow: var(--rim-light); padding: 22px 24px 18px; }
.gymbery-verbatim__item--bar { border-left: 3px solid var(--primary); }
.entry-content .gymbery-verbatim__quote { font-size: 15.5px; line-height: 1.6; color: var(--on-surface); font-weight: 500; margin: 0; }
.gymbery-verbatim__cite { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--outline); }
.gymbery-verbatim__cite--bottom { margin-top: auto; padding-top: 14px; }
.gymbery-verbatim__src { display: inline-flex; align-items: center; gap: 5px; color: var(--on-surface-variant); }
.gymbery-verbatim__src .material-symbols-outlined { font-size: 14px; color: var(--primary); font-variation-settings: "FILL" 1; }
.gymbery-verbatim__name { color: var(--outline); }
.gymbery-verbatim--feature { grid-template-columns: 1fr; }
.gymbery-verbatim__item--feature { align-items: center; text-align: center; padding: 24px 28px 20px; background: linear-gradient(180deg, var(--surface-container-low), var(--surface-container-lowest)); }
.gymbery-verbatim__item--feature .gymbery-stars { margin-bottom: 16px; }
.entry-content .gymbery-verbatim__item--feature .gymbery-verbatim__quote { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.45; max-width: 56ch; }
.gymbery-verbatim__attrib { display: block; margin-top: 22px; font-size: 14px; color: var(--on-surface-variant); font-style: italic; }
.gymbery-verbatim__attrib strong { font-style: normal; font-weight: 700; color: var(--on-surface); }
@media (max-width: 560px) { .entry-content .gymbery-verbatim__item--feature .gymbery-verbatim__quote { font-size: 17px; } }

/* Pagination / nav archives */
.archive-page { padding-bottom: 80px; }
.page-title-block {
  position: relative;
  margin-top: 32px;
  margin-bottom: 40px;
  padding: 22px 28px;
  text-align: center;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(0, 64, 224, 0.06), transparent 60%),
    linear-gradient(180deg, var(--surface-container-lowest), var(--surface-container-low));
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  box-shadow: var(--rim-light);
  overflow: hidden;
}
/* Filet d'accent horizontal en haut */
.page-title-block::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--primary-container));
}

.archive-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
/* Icône en badge arrondi (chip), façon cartes du site */
.archive-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-lg);
  background: var(--primary-fixed);
  color: var(--primary);
  font-size: 26px !important;
  box-shadow: inset 0 0 0 1px rgba(0, 64, 224, 0.12);
}

.archive-desc { font-size: 16px; color: var(--on-surface-variant); margin-top: 12px; max-width: 46rem; margin-inline: auto; position: relative; z-index: 1; }
.page-title-block > .archive-title { position: relative; z-index: 1; }

@media (max-width: 480px) {
  /* En-tête de catégorie compacté sur mobile pour laisser voir le 1er article
     above-the-fold. -- Réglages à tâtonner : font-size titre / desc, marges. */
  .page-title-block { padding: 16px 18px 18px; margin-top: 20px; margin-bottom: 24px; }
  .archive-title { flex-direction: column; font-size: 20px; gap: 10px; }
  .archive-icon { width: 38px; height: 38px; font-size: 22px !important; }
  .archive-desc { font-size: 14px; margin-top: 8px; }
}

.pagination { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding-block: 48px; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border-radius: var(--radius);
  border: 1px solid var(--outline-variant);
  font-weight: 600; font-size: 14px;
  color: var(--on-surface-variant);
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.pagination .page-numbers:hover { border-color: var(--primary); color: var(--primary); }
.pagination .page-numbers.current { background: var(--primary); border-color: var(--primary); color: #fff; }

.empty-state { padding-block: 80px; text-align: center; }
.empty-state h2 { font-size: 24px; }
.empty-state p { color: var(--on-surface-variant); margin-top: 12px; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (min-width: 640px) {
  .grid-cards { grid-template-columns: repeat(2, 1fr); }
  .grid-journal { grid-template-columns: repeat(2, 1fr); }
  .hero__cta { flex-direction: row; }
  .newsletter__form { flex-direction: row; }
  /* Form Brevo : champ court + bouton collé juste après, sur une même ligne. */
  .newsletter__brevo .sib_signup_box_inside_2 { flex-direction: row; align-items: flex-end; justify-content: flex-start; }
  .newsletter__brevo .sib_signup_box_inside_2 > p.sib-email-area { flex: 0 1 360px; }
  .newsletter__brevo input.sib-default-btn,
  .newsletter__brevo input[type="submit"] { width: auto !important; white-space: nowrap; }
  .ranking__thumb { display: block; }
  .ranking__row { gap: 28px; padding-inline: 32px; }
  .ranking__num { font-size: 32px; width: 48px; }
  .ranking__title { font-size: 19px; }
}

@media (max-width: 767.98px) {
  /* Le CTA « Rejoindre » du header est masqué sur mobile : il est déjà présent dans le drawer. */
  .nav-actions .btn-nav { display: none; }

  /* Header un peu moins haut sur mobile -> moins de vide sous le header.
     Hauteur du header ET décalage de main bougent ensemble (header fixe). */
  .site-header { height: 64px; }
  main { padding-top: 64px; }

  /* Icônes mobiles (loupe + menu) : un peu plus grosses, hitbox élargie,
     petit espace entre les deux, et l'ensemble décalé légèrement vers la gauche.
     -- Réglages à tâtonner --
       font-size  : taille des icônes
       padding    : hitbox autour de chaque icône
       gap        : espace entre les deux icônes
       margin-right (négatif via le padding) : décalage vers la gauche */
  .nav-actions { gap: 6px; transform: translateX(-12px); }
  .nav-actions .icon-btn { padding: 8px; border-radius: var(--radius-full); }
  .nav-actions .icon-btn .material-symbols-outlined { font-size: 28px; }

  /* Newsletter : sur desktop les courbes sont à droite, hors du texte. Sur mobile la
     carte est étroite, elles passaient derrière le texte et nuisaient à la lisibilité.
     On les atténue fortement et on les concentre dans le coin haut-droit (zone vide). */
  .newsletter__field { opacity: 0.16; }
  .newsletter__field svg { width: 260px; height: 260px; right: -70px; top: -70px; }

  /* Stats du hero : alignées à gauche sur desktop, mais sur mobile chaque colonne est
     centrée pour répartir les chiffres et supprimer l'espace vide à droite. */
  .hero-stats { text-align: center; margin-inline: auto; }
}

@media (min-width: 768px) {
  .container { padding-inline: var(--margin-desktop); }
  .section { padding-block: 48px; }
  .section-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .section-title { font-size: 42px; }
  .primary-menu { display: flex; }
  .menu-toggle { display: none; }
  .newsletter { padding: 80px 64px; }
  .newsletter__title { font-size: 40px; }
  .footer-top { flex-direction: row; }
  .footer-cols { gap: 80px; }
  .footer-bottom { flex-direction: row; }
  .ranking__views { display: flex; }
  .entry-title { font-size: 40px; }
  .entry-content h2 { font-size: 28px; }
  .entry-content h3 { font-size: 22px; }
}

@media (min-width: 1024px) {
  .grid-cards { grid-template-columns: repeat(3, 1fr); }
  .grid-journal { grid-template-columns: repeat(3, 1fr); }
  .hero__grid { flex-direction: row; align-items: center; gap: 80px; }
  .hero__col-text { width: 58%; }
  .hero__col-card { width: 42%; }
  .hero__inner { padding-top: 80px; padding-bottom: 96px; }
  .hero__title { font-size: 58px; line-height: 1.02; }
}

/* =====================================================================
   QUIZ « Trouve ton plan »
   ===================================================================== */
.quiz-page { padding-block: 48px 64px; }

/* Intro (titre centré) */
.quiz-intro { text-align: center; max-width: 640px; margin-inline: auto; }
.quiz-intro .eyebrow { justify-content: center; }
.quiz-intro .section-sub { margin-inline: auto; }

/* Formulaire */
.quiz { max-width: 720px; margin: 44px auto 0; }

.quiz__progress {
  height: 6px;
  background: var(--surface-container-high);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 40px;
}
.quiz__progress-bar {
  display: block;
  height: 100%;
  width: 25%;
  background: var(--primary);
  border-radius: var(--radius-full);
  transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.quiz__steps { list-style: none; margin: 0; padding: 0; }
/* Sans JS : toutes les questions empilées. */
.quiz__steps > li + li { margin-top: 44px; }
/* Avec JS : une question à la fois. */
.quiz--js .quiz__step { display: none; }
.quiz--js .quiz__steps > li + li { margin-top: 0; }
.quiz--js .quiz__step.is-active { display: block; }

.quiz__q-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--primary);
  margin-bottom: 10px;
}
.quiz__q {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--on-surface);
  margin-bottom: 24px;
}

/* Options */
.quiz__options { display: grid; grid-template-columns: 1fr; gap: 12px; }
.quiz-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-container-lowest);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.quiz-option:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--rim-light); }
.quiz-option input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.quiz-option__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--surface-container);
  color: var(--on-surface-variant);
  font-size: 24px;
  transition: background 0.2s ease, color 0.2s ease;
}
.quiz-option__label { font-size: 16px; font-weight: 600; color: var(--on-surface); }

/* État sélectionné (:has — navigateurs modernes ; sinon l'option reste neutre, sans casse) */
.quiz-option:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-fixed);
  box-shadow: var(--rim-light-active);
}
.quiz-option:has(input:checked) .quiz-option__icon { background: var(--primary); color: #fff; }
.quiz-option:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Navigation */
.quiz__nav { display: flex; gap: 12px; margin-top: 36px; }
.quiz__nav [data-quiz-prev] { margin-right: auto; }
/* État de base (avant JS / sans JS) : seul « Voir mon plan » est visible. */
.quiz__nav [data-quiz-prev],
.quiz__nav [data-quiz-next] { display: none; }

/* Petite secousse si on tente d'avancer sans répondre. */
@keyframes gymberyQuizShake {
  10%, 90% { transform: translateX(-1px); }
  30%, 70% { transform: translateX(3px); }
  50% { transform: translateX(-5px); }
}
.quiz__step.is-shake { animation: gymberyQuizShake 0.4s ease; }

@media (prefers-reduced-motion: reduce) {
  .quiz__progress-bar { transition: none; }
  .quiz__step.is-shake { animation: none; }
  .quiz-option:hover { transform: none; }
}

@media (min-width: 640px) {
  .quiz__options { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
  .quiz__q { font-size: 28px; }
}

/* =====================================================================
   PAGE CONTACT
   ===================================================================== */
/* =====================================================================
 * Page Newsletter (template-newsletter.php)
 * ===================================================================== */
.newsletter-page { padding-block: 48px 72px; }
.newsletter-page__intro { max-width: 640px; margin-bottom: 32px; }
.newsletter-page__text { margin-top: 16px; }
.newsletter-page__text p { margin: 0; }

.newsletter-page__perks {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.newsletter-page__perks li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.newsletter-page__perks .material-symbols-outlined {
  flex: none;
  color: var(--primary);
  font-size: 26px;
  margin-top: 2px;
}
.newsletter-page__perks strong { display: block; font-weight: 600; margin-bottom: 2px; }
.newsletter-page__perks span:not(.material-symbols-outlined) {
  color: var(--on-surface-variant);
  font-size: 15px;
  line-height: 1.45;
}
.newsletter-page__form { padding-top: 0; }

.contact-page { padding-block: 48px 72px; }

.contact-intro { max-width: 640px; margin-bottom: 40px; }
.contact-intro__text { margin-top: 16px; }
.contact-intro__text p { margin: 0; }

.contact-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }

/* Carte formulaire */
.contact-form-wrap {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-2xl);
  padding: 28px;
  box-shadow: var(--rim-light);
}

.contact-form { display: flex; flex-direction: column; gap: 20px; }

.contact-field { display: flex; flex-direction: column; gap: 8px; }
.contact-field label {
  font-size: 14px;
  font-weight: 600;
  color: var(--on-surface);
}
.contact-field label span { color: var(--primary); }

.contact-field input,
.contact-field textarea {
  width: 100%;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  color: var(--on-surface);
  padding: 14px 16px;
  border-radius: var(--radius);
  outline: none;
  font-family: inherit;
  font-size: 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-field textarea { resize: vertical; min-height: 140px; }
.contact-field input:focus,
.contact-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 64, 224, 0.15);
}
.contact-field input[aria-invalid="true"],
.contact-field textarea[aria-invalid="true"] {
  border-color: #d4351c;
  box-shadow: 0 0 0 3px rgba(212, 53, 28, 0.12);
}
.contact-field__error {
  font-size: 13px;
  color: #d4351c;
  font-weight: 500;
}

/* Honeypot : retiré du flux visuel et du lecteur d'écran. */
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__actions { margin-top: 4px; }
.contact-form__actions .btn { width: 100%; }
.contact-form__note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--outline);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

/* Bandeaux de notification */
.contact-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
}
.contact-notice p { margin: 4px 0 0; font-size: 14px; }
.contact-notice .material-symbols-outlined { flex-shrink: 0; font-size: 22px; }
.contact-notice--ok {
  background: #e6f6ec;
  border: 1px solid #9ad6b0;
  color: #14532d;
}
.contact-notice--ok .material-symbols-outlined { color: #1a7f43; }
.contact-notice--error {
  background: #fdecea;
  border: 1px solid #f1b0a8;
  color: #7a1c10;
}
.contact-notice--error .material-symbols-outlined { color: #d4351c; }

/* Colonne latérale */
.contact-side { display: flex; flex-direction: column; gap: 16px; }
.contact-side__card {
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 22px;
}
.contact-side__card .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--surface-container);
  color: var(--primary);
  font-size: 24px;
  margin-bottom: 14px;
}
.contact-side__card h2 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--on-surface);
}
.contact-side__card p { font-size: 14px; color: var(--on-surface-variant); margin: 0; }
.contact-side__mail {
  display: inline-block;
  margin-top: 8px;
  font-weight: 600;
  color: var(--primary);
  word-break: break-all;
}
.contact-side__mail:hover { text-decoration: underline; }

@media (min-width: 768px) {
  .contact-form-wrap { padding: 36px; }
}
@media (min-width: 960px) {
  .contact-grid { grid-template-columns: 1.6fr 1fr; gap: 40px; }
}

/* =====================================================================
   PAGE À PROPOS (template-about.php)
   ===================================================================== */

/* — Hero — carte centrée (même langage que la page auteur) — */
.about-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-top: 40px;
  margin-bottom: 56px;
  padding: 56px 40px 52px;
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-2xl);
  box-shadow: var(--rim-light);
}
.about-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--amber));
}
.about-hero .eyebrow { justify-content: center; }
.about-hero__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 16px 0 0;
  max-width: 18ch;
  color: var(--on-background);
}
.about-hero__title .accent { color: var(--primary); }
.about-hero__lead {
  font-size: 17px;
  line-height: 1.7;
  color: var(--on-surface-variant);
  margin-top: 20px;
  max-width: 58ch;
}
.about-hero__lead p { margin: 0; }
.about-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }

/* — Mission (texte + chiffres) — */
.about-mission { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.about-mission__p { margin-top: 16px; color: var(--on-surface-variant); font-size: 16px; }
.about-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.about-stat {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 22px;
}
.about-stat__num {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: var(--on-background);
}
.about-stat__num .accent { color: var(--primary); }
.about-stat__label {
  margin-top: 10px;
  font-size: 13px;
  color: var(--on-surface-variant);
  line-height: 1.4;
}

/* — Piliers — */
.about-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.about-pillar {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--rim-light);
  transition: transform 0.25s, border-color 0.25s;
}
.about-pillar:hover { border-color: var(--primary); transform: translateY(-4px); }
.about-pillar__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: var(--surface-container);
  color: var(--primary);
  margin-bottom: 20px;
  transition: background 0.25s, color 0.25s;
}
.about-pillar__icon .material-symbols-outlined { font-size: 26px; }
.about-pillar:hover .about-pillar__icon { background: var(--primary); color: #fff; }
.about-pillar__title { font-size: 20px; font-weight: 700; color: var(--on-background); margin-bottom: 8px; }
.about-pillar__desc { font-size: 15px; color: var(--on-surface-variant); line-height: 1.6; }

/* — Méthode (liste) — */
.about-method {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.about-method__item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 22px;
}
.about-method__item .material-symbols-outlined {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--surface-container);
  color: var(--primary);
  font-size: 24px;
}
.about-method__item strong { display: block; font-weight: 600; margin-bottom: 4px; color: var(--on-surface); }
.about-method__item span:not(.material-symbols-outlined) {
  font-size: 14px;
  color: var(--on-surface-variant);
  line-height: 1.55;
}

/* — Fondateur — */
.about-founder {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-2xl);
  padding: 28px;
}
.about-founder__photo {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-width: 220px;
  border-radius: var(--radius-xl);
  background: var(--surface-container-high);
  color: var(--outline);
}
.about-founder__photo .material-symbols-outlined { font-size: 72px; }
.about-founder__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-xl);
}
.about-founder__bio { margin-top: 16px; color: var(--on-surface-variant); font-size: 16px; line-height: 1.7; }
.about-founder__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-weight: 600;
  color: var(--primary);
}
.about-founder__link .material-symbols-outlined { font-size: 18px; transition: transform 0.2s; }
.about-founder__link:hover { color: var(--on-primary-fixed-variant); }
.about-founder__link:hover .material-symbols-outlined { transform: translateX(3px); }

/* — CTA final — */
.about-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* — Responsive — */
@media (min-width: 720px) {
  .about-pillars { grid-template-columns: repeat(3, 1fr); }
  .about-method { grid-template-columns: repeat(2, 1fr); }
  .about-pillars__title { white-space: nowrap; }
}
@media (min-width: 960px) {
  .about-hero { padding: 64px 56px 60px; }
  .about-mission { grid-template-columns: 1.4fr 1fr; gap: 56px; }
  .about-stats { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .about-founder {
    grid-template-columns: 220px 1fr;
    gap: 44px;
    padding: 40px;
  }
  .about-founder__photo { max-width: none; }
}