/* ============================================================
   aliments-v2.css
   Styles pour les pages fiches aliments (parent + variantes)
   Chargé uniquement sur /aliments/* via wp_head
   Version 2026-04-23 — responsive mobile + desktop
   ============================================================ */

:root {
  --vert-dark:     #1F3318;
  --vert-dark-2:   #17280F;
  --vert-olive:    #8FA968;
  --vert-cta:      #7DA94F;
  --vert-cta-hi:   #6B9A3F;
  --ambre:         #BC8A3B;
  --ambre-hi:      #D9A555;
  --ivoire:        #FFFFFF;
  --ivoire-2:      #EDE3CE;
  --ivoire-3:      #F5EFE0;
  --ink:           #1A2214;
  --ink-soft:      #4A5440;
  --ink-mute:      #7A8370;
  --line:          #D8CDB3;
  --line-dark:     #283820;
  --ns-a: #038141;
  --ns-b: #85BB2F;
  --ns-c: #FECB02;
  --ns-d: #EE8100;
  --ns-e: #E63E11;
}
/* ============================================================
   LAYOUT WORDPRESS / GENERATEPRESS
   ============================================================
   Reset agressif des contraintes de GeneratePress sur les pages
   aliments pour reproduire le layout de la maquette standalone.
   ============================================================ */
body.aliments-page.parent-fiche {
  background: #F5EDDC !important;
}
/* Virer les max-width / paddings que GP impose sur le container principal */
body.aliments-page.parent-fiche .site-content,
body.aliments-page.parent-fiche .content-area,
body.aliments-page.parent-fiche #primary,
body.aliments-page.parent-fiche .inside-article,
body.aliments-page.parent-fiche .entry-content,
body.aliments-page.parent-fiche main,
body.aliments-page.parent-fiche article {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* Virer aussi le sidebar si présent */
body.aliments-page.parent-fiche .widget-area,
body.aliments-page.parent-fiche #secondary {
  display: none !important;
}
/* Le container GP doit permettre toute la largeur */
body.aliments-page.parent-fiche .site.grid-container,
body.aliments-page.parent-fiche .site-content.grid-container,
body.aliments-page.parent-fiche .grid-container {
  max-width: 100% !important;
  padding: 0 !important;
}

/* Wrapper racine : reproduit exactement body de la maquette */
.rm-fiche-wrapper {
  font-family: 'Inter', system-ui, sans-serif;
  background: #FFFFFF;
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  font-size: 16px;
  position: relative;
}
.rm-fiche-wrapper * { box-sizing: border-box; }
/* Reset marges/padding hérités de GP pour tous les enfants du wrapper */
.rm-fiche-wrapper h1,
.rm-fiche-wrapper h2,
.rm-fiche-wrapper h3,
.rm-fiche-wrapper h4,
.rm-fiche-wrapper p,
.rm-fiche-wrapper ul,
.rm-fiche-wrapper ol {
  margin: 0;
  padding: 0;
}
@media (min-width: 520px) {
  .rm-fiche-wrapper { box-shadow: 0 0 50px rgba(0,0,0,0.04); }
}

/* ============================================================
   FIL D'ARIANE (microdata schema.org BreadcrumbList)
   Structure : <nav><ol><li>...</li></ol></nav>
   Les séparateurs › sont générés en CSS ::before sur <li>+<li>
   ============================================================ */
.rm-fiche-wrapper .rm-breadcrumb {
  padding: 0.9rem 1.25rem 0.25rem;
  font-size: 0.78rem;
  color: var(--ink-mute);
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.rm-fiche-wrapper .rm-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.rm-fiche-wrapper .rm-breadcrumb li {
  display: inline-flex;
  align-items: center;
  margin: 0;
}
/* Séparateur › entre items (pas avant le premier) */
.rm-fiche-wrapper .rm-breadcrumb li + li::before {
  content: '›';
  color: var(--line);
  margin-right: 0.4rem;
  font-weight: 300;
  user-select: none;
}
.rm-fiche-wrapper .rm-breadcrumb a {
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s;
  border-bottom: 1px dotted transparent;
}
.rm-fiche-wrapper .rm-breadcrumb a:hover {
  color: var(--vert-cta-hi);
  border-bottom-color: var(--vert-cta-hi);
}
.rm-fiche-wrapper .rm-bc-current {
  color: var(--ink);
  font-weight: 500;
}
@media (min-width: 900px) {
  .rm-fiche-wrapper .rm-breadcrumb {
    padding: 1.1rem 2.5rem 0.25rem;
    font-size: 0.82rem;
  }
}

h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.hero {
  padding: 1.75rem 1.25rem 1.25rem;
  position: relative;
}
.hero-eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ambre);
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.hero h1 {
  font-size: 2.5rem;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 0.75rem;
}
.hero h1 em {
  display: block;
  font-style: italic;
  font-weight: 500;
  color: var(--ambre);
  font-size: 1.5rem;
  margin-top: 0.35rem;
  letter-spacing: -0.01em;
}
.hero-dek {
  font-size: 1.05rem;
  color: var(--ink-soft);
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  max-width: 30ch;
}
.ns-card {
  margin: 1rem 1.25rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.ns-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.ns-head-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ambre);
  font-weight: 600;
}
.ns-head-source { font-size: 0.7rem; color: var(--ink-mute); }
.ns-visual {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.ns-letters {
  display: flex;
  align-items: center;
  gap: 2px;
}
.ns-letter {
  width: 28px; height: 36px;
  display: grid; place-items: center;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  opacity: 0.25;
  transition: all 0.4s cubic-bezier(0.7,0,0.3,1);
  border-radius: 2px;
  position: relative;
}
.ns-letter[data-g="A"] { background: var(--ns-a); }
.ns-letter[data-g="B"] { background: var(--ns-b); }
.ns-letter[data-g="C"] { background: var(--ns-c); color: var(--ink); }
.ns-letter[data-g="D"] { background: var(--ns-d); }
.ns-letter[data-g="E"] { background: var(--ns-e); }
.ns-letter.active {
  opacity: 1;
  transform: scale(1.45);
  z-index: 2;
  margin: 0 0.6rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.ns-verdict { flex: 1; }
.ns-verdict-score {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ns-a);
  line-height: 1;
  margin-bottom: 0.25rem;
}
.ns-verdict-text {
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.35;
}
.ns-breakdown {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  font-size: 0.78rem;
}
.ns-b-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ns-b-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ns-b-dot.neg { background: var(--ns-e); }
.ns-b-dot.pos { background: var(--ns-a); }
.ns-b-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.verdicts {
  margin: 2rem 1.25rem 1rem;
}
.section-eyebrow {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ambre);
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.section-h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 1rem;
}
.section-h2 em { font-style: italic; font-weight: 600; color: var(--ambre); }
.verdict-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.verdict {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateX(-8px);
  animation: slide-in 0.5s ease forwards;
}
.verdict:nth-child(1) { animation-delay: 0.05s; }
.verdict:nth-child(2) { animation-delay: 0.15s; }
.verdict:nth-child(3) { animation-delay: 0.25s; }
.verdict:nth-child(4) { animation-delay: 0.35s; }
.verdict:nth-child(5) { animation-delay: 0.45s; }
.verdict:last-child { border-bottom: none; }
@keyframes slide-in { to { opacity: 1; transform: none; } }
.v-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: grid; place-items: center;
  flex-shrink: 0;
  font-size: 1rem;
}
.v-icon.good { background: rgba(125,169,79,0.18); color: var(--vert-cta-hi); }
.v-icon.heart { background: rgba(188,138,59,0.18); color: var(--ambre); }
.v-icon.leaf { background: rgba(143,169,104,0.2); color: var(--vert-olive); }
.v-icon.warn { background: rgba(217,128,44,0.18); color: #b8661d; font-weight: 700; }
.v-body { flex: 1; padding-top: 0.15rem; }
.v-label {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  margin-bottom: 0.2rem;
}
.v-desc {
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.4;
}
.v-value {
  font-weight: 600;
  color: var(--vert-cta-hi);
}
.widget-macros {
  margin: 2rem 1.25rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.wm-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.3rem;
  background: #F5F2EC;
  border-radius: 8px;
  margin-bottom: 1.25rem;
}
.wm-tab {
  flex: 1;
  padding: 0.55rem 0.4rem;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-soft);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  line-height: 1.2;
}
.wm-tab small {
  display: block;
  font-size: 0.64rem;
  opacity: 0.7;
  margin-top: 0.1rem;
  font-weight: 400;
}
.wm-tab.active {
  background: var(--vert-dark);
  color: var(--ivoire-2);
}
.wm-viz {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.donut { width: 130px; height: 130px; flex-shrink: 0; position: relative; }
.donut svg { transform: rotate(-90deg); }
.donut circle {
  fill: none; stroke-width: 14;
  transition: stroke-dasharray 0.7s cubic-bezier(0.7,0,0.3,1),
              stroke-dashoffset 0.7s cubic-bezier(0.7,0,0.3,1);
}
.donut .seg-p { stroke: var(--vert-olive); }
.donut .seg-g { stroke: var(--ambre); }
.donut .seg-l { stroke: var(--ns-d); }
.donut-center {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  text-align: center;
}
.donut-kcal {
  font-family: 'Playfair Display', serif;
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.donut-unit {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  margin-top: 0.2rem;
}
.wm-macros {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.88rem;
}
.wm-macro {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.wm-macro::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.wm-macro.p::before { background: var(--vert-olive); }
.wm-macro.g::before { background: var(--ambre); }
.wm-macro.l::before { background: var(--ns-d); }
.wm-macro.f::before { background: var(--ink-soft); }
.wm-macro b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
}
.wm-macro span {
  font-size: 0.75rem;
  color: var(--ink-mute);
  margin-left: auto;
}
.wm-portion {
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
}
.wm-portion-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.4rem;
}
.wm-portion-lbl {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  font-weight: 600;
}
.wm-portion-val {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ambre);
}
.wm-portion-val small {
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-weight: 500;
  margin-left: 0.2rem;
}
.rm-fiche-wrapper input[type=range],
.rm-fiche-wrapper input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 4px !important;
  background: var(--line) !important;
  border-radius: 99px !important;
  outline: none !important;
  padding: 0 !important;
  border: none !important;
  margin: 0 !important;
  display: block;
  box-shadow: none !important;
}
.rm-fiche-wrapper input[type=range]::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--line);
  border-radius: 99px;
}
.rm-fiche-wrapper input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  background: var(--vert-cta);
  border: 3px solid #fff;
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  margin-top: -9px;
}
.rm-fiche-wrapper input[type=range]::-moz-range-track {
  height: 4px;
  background: var(--line);
  border-radius: 99px;
  border: none;
}
.rm-fiche-wrapper input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px;
  background: var(--vert-cta);
  border: 3px solid #fff;
  border-radius: 50%;
  cursor: grab;
}
/* ============================================================
   COMPARATEUR — style clair cohérent avec la page
   ============================================================ */
.compare {
  margin: 2rem 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  color: var(--ink);
}
.compare-head {
  padding: 1.25rem 1.25rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.compare-icon {
  width: 48px; height: 48px;
  background: var(--vert-dark);
  border-radius: 8px;
  display: grid; place-items: center;
  color: var(--vert-cta);
  flex-shrink: 0;
}
.compare-icon svg { width: 22px; height: 22px; stroke-width: 2.2; }
.compare-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
}
.compare-sub {
  font-size: 0.78rem;
  color: var(--ink-mute);
  margin-top: 0.15rem;
}
.compare-body { padding: 1.25rem; }

/* Toggle portion mode */
.cmp-toggle {
  display: flex;
  gap: 0;
  padding: 0.25rem;
  background: var(--ivoire-2);
  border-radius: 6px;
  margin-bottom: 0.75rem;
}
.cmp-tgl-btn {
  flex: 1;
  padding: 0.55rem 0.5rem;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-soft);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.cmp-tgl-btn.active {
  background: var(--vert-cta);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.cmp-context {
  font-size: 0.78rem;
  color: var(--ink-mute);
  font-style: italic;
  margin-bottom: 1.25rem;
  line-height: 1.4;
}

/* ---- V3 : CARTES VERDICT — style clair ---- */
.v3-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.v3-card {
  background: rgba(125,169,79,0.07);
  border: 1px solid rgba(125,169,79,0.22);
  border-radius: 8px;
  padding: 0.85rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.v3-card.neg {
  background: rgba(188,138,59,0.07);
  border-color: rgba(188,138,59,0.22);
}
.v3-card-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  font-weight: 600;
}
.v3-card-winner {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
}
.v3-card-winner b { color: var(--vert-cta-hi); }
.v3-card-winner.bad b { color: var(--ambre); }
.v3-card-gap {
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  margin-top: auto;
}
.v3-card-gap b {
  font-weight: 700;
  color: var(--vert-cta-hi);
}
.v3-card.neg .v3-card-gap b { color: var(--ambre); }
.v3-card.tie {
  background: rgba(188,138,59,0.05);
  border-color: rgba(188,138,59,0.18);
}
.v3-card-winner.tie { color: var(--ambre); }
.v3-card-winner.tie b { color: var(--ambre); }
.comparables {
  margin: 2rem 0;
}
.comparables-head {
  padding: 0 1.25rem;
  margin-bottom: 1rem;
}
.carousel-wrap {
  position: relative;
  padding: 0 1.25rem;
}
.carousel {
  display: flex;
  gap: 0.7rem;
  overflow-x: auto;
  padding: 0.5rem 0;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--vert-dark);
  color: var(--ivoire);
  border: 2px solid #fff;
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  transition: all 0.2s;
  opacity: 0.95;
}
.carousel-nav:hover {
  background: var(--vert-cta);
  color: var(--vert-dark);
  transform: translateY(-50%) scale(1.08);
}
.carousel-nav:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.carousel-nav.prev { left: 0.3rem; }
.carousel-nav.next { right: 0.3rem; }

.rm-fiche-wrapper .comp-card {
  flex-shrink: 0;
  width: 155px;
  background: #FEFCF7 !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 8px !important;
  padding: 1rem 0.9rem 0.9rem !important;
  scroll-snap-align: start;
  position: relative;
  text-decoration: none;
  color: var(--ink);
  display: block !important;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.rm-fiche-wrapper .comp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  border-color: var(--ambre) !important;
}
  transition: all 0.2s;
  cursor: pointer;
}
.comp-card:first-child { margin-left: 0; }
.comp-card:last-child { margin-right: 0; }
.comp-card-grade {
  position: absolute;
  top: 0.6rem; right: 0.6rem;
  width: 22px; height: 22px;
  border-radius: 4px;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 0.7rem;
  color: #fff;
}
.comp-card-grade[data-g="A"] { background: var(--ns-a); }
.comp-card-grade[data-g="B"] { background: var(--ns-b); }
.comp-card-grade[data-g="C"] { background: var(--ns-c); color: var(--ink); }
.comp-card-grade[data-g="D"] { background: var(--ns-d); }
.comp-card-grade[data-g="E"] { background: var(--ns-e); }
.comp-card-name {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.15;
  margin-top: 1.25rem;
  margin-bottom: 0.35rem;
}
.comp-card-kcal {
  font-size: 0.85rem;
  color: var(--ambre);
  font-weight: 600;
}
.comp-card-meta {
  font-size: 0.72rem;
  color: var(--ink-mute);
  margin-top: 0.2rem;
}
.quiz {
  margin: 2.5rem 1.25rem;
  background: #F5EFE0;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.quiz-head {
  background: var(--vert-dark);
  color: var(--ivoire-2);
  padding: 1.25rem 1.25rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.quiz-icon {
  width: 48px; height: 48px;
  background: var(--vert-cta);
  border-radius: 8px;
  display: grid; place-items: center;
  color: var(--vert-dark);
  flex-shrink: 0;
}
.quiz-icon svg { width: 22px; height: 22px; }
.quiz-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ivoire);
  line-height: 1.15;
}
.quiz-sub {
  font-size: 0.78rem;
  color: rgba(237,227,206,0.55);
  margin-top: 0.15rem;
}
.quiz-body {
  padding: 1.5rem 1.5rem 1.75rem;
}
.quiz-q {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 1.25rem;
  font-style: italic;
  color: var(--ink);
}
.quiz-opts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.quiz .quiz-opt {
  padding: 0.85rem 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--ink);
  font-weight: 500;
}
.quiz .quiz-opt:hover {
  border-color: var(--vert-olive);
  background: #fdfaf2;
  color: var(--ink);
}
.quiz .quiz-opt.correct {
  background: var(--vert-cta);
  color: #fff;
  border-color: var(--vert-cta);
}
.quiz .quiz-opt.correct::after { content: ' ✓'; font-weight: 700; }
.quiz .quiz-opt.wrong {
  background: #fbe5e0;
  border-color: #e67d6a;
  color: #9a3a26;
}
.quiz .quiz-opt.wrong::after { content: ' ✕'; }
.quiz .quiz-opt:disabled { cursor: default; }
.quiz-feedback {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem 1rem 1.25rem;
  background: rgba(125,169,79,0.08);
  border-left: 3px solid var(--vert-cta);
  border-radius: 0 6px 6px 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink);
  display: none;
  position: relative;
}
.quiz-feedback.show { display: block; animation: fade-in-up 0.3s ease; }
.quiz-feedback strong {
  color: var(--vert-cta-hi);
  font-weight: 700;
  font-family: 'Playfair Display', serif;
  font-size: 1.02rem;
  display: inline-block;
  margin-right: 0.15rem;
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   BLOC AJR (apports nutritionnels recommandés)
   ============================================================ */
.ajr-section {
  margin: 2rem 1.25rem;
}
.ajr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 1rem;
}
.ajr-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.9rem 0.9rem 1rem;
}
.ajr-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.55rem;
}
.ajr-card-label {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}
.ajr-card-val {
  font-family: 'Playfair Display', serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ambre);
  font-variant-numeric: tabular-nums;
}
.ajr-bar {
  height: 6px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 0.35rem;
}
.ajr-bar-fill {
  height: 100%;
  background: var(--vert-cta);
  border-radius: 99px;
  transition: width 0.8s cubic-bezier(0.7,0,0.3,1);
}
.ajr-bar-fill.hi { background: var(--ns-a); }
.ajr-bar-fill.md { background: var(--vert-cta); }
.ajr-bar-fill.low { background: var(--ambre); }
.ajr-card-pct {
  font-size: 0.72rem;
  color: var(--ink-mute);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ajr-card-pct b {
  font-weight: 700;
  color: var(--vert-cta-hi);
}

/* ============================================================
   TABLEAU NUTRITIONNEL COMPLET (repliable)
   ============================================================ */
.nutrition-full {
  margin: 2rem 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.nutrition-full-head {
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  transition: background 0.2s;
}
.nutrition-full-head:hover { background: #fafaf7; }
.nutrition-full-head h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
}
.nutrition-full-head h2 em {
  font-style: italic;
  color: var(--ambre);
  font-weight: 600;
}
.nutrition-toggle {
  width: 32px; height: 32px;
  background: var(--ivoire-2);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--vert-dark);
  transition: transform 0.3s;
  flex-shrink: 0;
}
.nutrition-full.open .nutrition-toggle { transform: rotate(180deg); }

.nutrition-full-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.nutrition-full.open .nutrition-full-body { max-height: 3000px; }

.nutrition-tabs {
  display: flex;
  gap: 0;
  padding: 0 1.25rem;
  border-top: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.nutrition-tabs::-webkit-scrollbar { display: none; }
.rm-fiche-wrapper .n-tab {
  padding: 0.75rem 0.9rem !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--ink-mute);
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.rm-fiche-wrapper .n-tab:hover {
  color: var(--ink) !important;
  background: transparent !important;
}
.rm-fiche-wrapper .n-tab.active {
  color: var(--ink) !important;
  border-bottom-color: var(--vert-cta) !important;
  font-weight: 600 !important;
  background: transparent !important;
}
.rm-fiche-wrapper .n-tab small {
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.68rem;
  color: var(--ambre);
  font-weight: 500;
}
.n-panel {
  display: none;
  padding: 0.75rem 1.25rem 1.25rem;
}
.n-panel.active { display: block; }

.rm-fiche-wrapper .n-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: 0 !important;
  background: transparent !important;
}
.rm-fiche-wrapper .n-table tr {
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
}
.rm-fiche-wrapper .n-table tr:last-child { border-bottom: none !important; }
.rm-fiche-wrapper .n-table th {
  text-align: left;
  padding: 0.55rem 0.5rem 0.55rem 1rem !important;
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent !important;
  border: none !important;
}
.rm-fiche-wrapper .n-table td {
  text-align: right;
  padding: 0.55rem 1rem 0.55rem 0 !important;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  background: transparent !important;
  border: none !important;
}
.rm-fiche-wrapper .n-table td.na { color: var(--ink-mute); font-weight: 400; }

/* ============================================================
   ÉDITORIAL SOPHIE MARCHAND (placeholder)
   ============================================================ */
.editorial {
  margin: 2rem 1.25rem;
  padding: 1.75rem 1.5rem;
  background: #FFFDF8;
  border-left: 4px solid var(--vert-olive);
  border-radius: 0 8px 8px 0;
  position: relative;
}
.editorial-eyebrow {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ambre);
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.editorial h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1rem;
}
.editorial h2 em {
  font-style: italic;
  color: var(--ambre);
}
.editorial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.editorial-author-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--vert-olive);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.editorial-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.editorial-author-name {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink);
  line-height: 1.1;
}
.editorial-author-role {
  font-size: 0.74rem;
  color: var(--ink-mute);
  margin-top: 0.1rem;
}
.editorial-content {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink);
}
.editorial-content p { margin-bottom: 1rem; }
.editorial-content p:last-child { margin-bottom: 0; }

/* H3 du contenu éditorial (générés par le LLM, sans classe) */
.editorial-content h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--vert-olive);
  margin: 2rem 0 0.85rem;
  line-height: 1.25;
}

/* Listes ordonnées/non-ordonnées dans l'éditorial (numéros alignés sous le H3) */
.editorial-content ol,
.editorial-content ul {
  list-style-position: inside;
  padding-left: 0;
  margin-left: 0;
  margin-bottom: 1rem;
}
.editorial-content ol li,
.editorial-content ul li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}
.editorial-content ol li:last-child,
.editorial-content ul li:last-child {
  margin-bottom: 0;
}

.editorial-h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin: 1.75rem 0 0.75rem;
  line-height: 1.2;
}
.editorial-h3::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--vert-olive);
  vertical-align: middle;
  margin-right: 0.5rem;
  transform: translateY(-3px);
}
.editorial-content .editorial-caveat {
  background: var(--ivoire-2);
  border-left: 3px solid var(--ambre);
  padding: 0.85rem 1.1rem;
  border-radius: 0 4px 4px 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-top: 1.25rem;
}
.editorial-content .editorial-caveat em { font-style: italic; }
.editorial-content .editorial-sources {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--ink-mute);
  line-height: 1.5;
}
.editorial-content .editorial-sources strong { color: var(--ink-soft); font-weight: 600; }
.editorial-content .editorial-sources em { font-style: italic; }
.editorial-placeholder {
  color: var(--ink-mute);
  font-style: italic;
  font-size: 0.9rem;
  padding: 0.75rem 1rem;
  background: var(--ivoire-2);
  border-radius: 6px;
  border: 1px dashed var(--line);
}

/* ============================================================
   YOAST FAQ BLOCK stylé dans editorial-content
   ------------------------------------------------------------
   Le générateur Sophie produit un bloc Yoast FAQ :
     <h3>Questions courantes</h3>
     <div class="schema-faq wp-block-yoast-faq-block">
       <div class="schema-faq-section">
         <strong class="schema-faq-question">Q</strong>
         <p class="schema-faq-answer">R</p>
       </div>
       ...
     </div>
   On garde ce markup INTACT (pour que Yoast génère son schema.org
   FAQPage automatiquement) et on le habille visuellement pour
   qu'il ressemble à la section FAQ de la maquette.
   ============================================================ */

/* Titre "Questions courantes" — transformé en vraie séparation de section */
.editorial-content h3:has(+ .schema-faq),
.editorial-content h3:has(+ .wp-block-yoast-faq-block) {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ink);
  margin: 3rem 0 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  line-height: 1.2;
  position: relative;
}
/* Masquer le liseré ::before (hérité de .editorial-h3) quand ce h3 précède une FAQ */
.editorial-content h3:has(+ .schema-faq)::before,
.editorial-content h3:has(+ .wp-block-yoast-faq-block)::before {
  display: none;
}
/* Petit eyebrow avant le titre */
.editorial-content h3:has(+ .schema-faq)::after,
.editorial-content h3:has(+ .wp-block-yoast-faq-block)::after {
  content: 'Questions fréquentes';
  position: absolute;
  top: 2rem;
  left: 0;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vert-olive);
  font-weight: 600;
}
.editorial-content h3:has(+ .schema-faq),
.editorial-content h3:has(+ .wp-block-yoast-faq-block) {
  padding-top: 3.5rem;
}

/* Container du bloc Yoast */
.editorial-content .schema-faq,
.editorial-content .wp-block-yoast-faq-block {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

/* Chaque Q/R = une carte arrondie */
.editorial-content .schema-faq-section {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.editorial-content .schema-faq-section:hover {
  border-color: var(--vert-olive);
  box-shadow: 0 1px 4px rgba(92, 122, 47, 0.08);
}
.editorial-content .schema-faq-section:last-child {
  margin-bottom: 0;
}

/* La question = block, Playfair, vert olive, bordure gauche */
.editorial-content .schema-faq-question {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  margin: 0 0 0.6rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--vert-olive);
}

/* La réponse */
.editorial-content .schema-faq-answer {
  font-family: 'Lora', serif;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
  padding-left: 0.9rem;
}
.editorial-content .schema-faq-answer strong {
  color: var(--ink);
  font-weight: 600;
}

/* Mobile : cartes plus compactes */
@media (max-width: 640px) {
  .editorial-content h3:has(+ .schema-faq),
  .editorial-content h3:has(+ .wp-block-yoast-faq-block) {
    font-size: 1.35rem;
    padding-top: 3rem;
    margin: 2rem 0 1.25rem;
  }
  .editorial-content h3:has(+ .schema-faq)::after,
  .editorial-content h3:has(+ .wp-block-yoast-faq-block)::after {
    top: 1.75rem;
    font-size: 0.68rem;
  }
  .editorial-content .schema-faq-section {
    padding: 0.85rem 1rem;
  }
  .editorial-content .schema-faq-question {
    font-size: 0.98rem;
  }
  .editorial-content .schema-faq-answer {
    font-size: 0.9rem;
  }
}

/* ============================================================
   FAQ — Questions fréquentes (details/summary)
   ============================================================ */
.faq {
  margin: 2rem 0;
}
.faq-list {
  margin: 0 1.25rem;
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0.25rem;
  cursor: pointer;
  list-style: none;
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  transition: color 0.15s;
  user-select: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--vert-cta-hi); }
.faq-chev {
  flex-shrink: 0;
  color: var(--vert-olive);
  transition: transform 0.3s;
}
.faq-item[open] .faq-chev { transform: rotate(180deg); color: var(--vert-cta-hi); }
.faq-item[open] .faq-q { color: var(--vert-cta-hi); }
.faq-a {
  padding: 0 0.25rem 1.25rem;
}
.faq-a p {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.faq-a strong {
  color: var(--ink);
  font-weight: 700;
}
.source-foot {
  padding: 2rem 1.25rem 2.5rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--ink-mute);
  border-top: 1px solid var(--line);
  margin-top: 2rem;
}
.source-foot a { color: var(--vert-cta-hi); text-decoration: none; border-bottom: 1px dotted var(--vert-cta-hi); }
/* ============================================================
   DESKTOP — ≥ 900px
   Layout repensé pour grands écrans
   ============================================================ */
@media (min-width: 900px) {

  /* Conteneur principal élargi */
  .rm-fiche-wrapper {
    max-width: 1200px;
    background: #fff;
    box-shadow: 0 0 40px rgba(0,0,0,0.05);
  }

  /* ---- HERO + NUTRI-SCORE côte à côte ---- */
  .hero {
    padding: 2.5rem 2.5rem 1rem;
  }
  .hero h1 {
    font-size: 3.2rem;
    line-height: 1.05;
  }
  .hero h1 em {
    font-size: 1.9rem;
    margin-top: 0.5rem;
  }

  /* Layout 2 colonnes : Hero à gauche / Nutri-Score à droite */
  .hero-nutri-wrap {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2.5rem;
    align-items: start;
    padding: 0 2.5rem;
  }
  .hero-nutri-wrap > .hero {
    padding: 2rem 0 0 0;
    margin: 0;
  }
  .hero-nutri-wrap > .ns-card {
    margin: 1.5rem 0 0 0;
  }
  /* Breadcrumb : même padding horizontal que le hero en desktop */
  .rm-fiche-wrapper .rm-breadcrumb {
    padding: 1.25rem 2.5rem 0.25rem;
    font-size: 0.82rem;
  }

  /* ---- Verdicts : cards en 1 rangée (auto-fit selon nb d'items) ---- */
  .verdicts {
    padding: 2rem 2.5rem;
  }
  .verdict-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0.85rem;
  }
  .verdict {
    flex-direction: column;
    padding: 1.25rem 1rem;
    text-align: left;
    min-width: 0;  /* defensive : empêche le blowout en grille auto-fit */
  }
  .v-icon {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
  }
  .v-label {
    font-size: 0.95rem;
    line-height: 1.25;
  }
  .v-desc {
    font-size: 0.8rem;
    line-height: 1.45;
    margin-top: 0.4rem;
  }

  /* ---- Nutri-Score côté droit du hero ---- */
  .ns-card {
    margin: 0;
    padding: 1.5rem 1.5rem 1.25rem;
  }
  .ns-letters {
    gap: 0.35rem;
  }
  .ns-letter {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  .ns-letter.active {
    transform: scale(1.35);
  }

  /* ---- Widget macros : visualisation centrée et aérée ---- */
  .widget-macros {
    margin: 2rem 2.5rem;
    padding: 2rem 2.25rem 2rem;
  }
  .wm-viz {
    gap: 3rem;
    padding: 1.5rem 0;
    justify-content: center;
    max-width: 680px;
    margin: 0 auto 1.5rem;
  }
  .donut {
    width: 200px !important;
    height: 200px !important;
  }
  .donut svg {
    width: 200px !important;
    height: 200px !important;
  }
  .donut circle {
    stroke-width: 16;
  }
  .donut-kcal {
    font-size: 3rem;
  }
  .donut-unit {
    font-size: 0.72rem;
  }
  .wm-macros {
    flex: 0 1 300px;
    gap: 0.75rem;
    font-size: 1rem;
  }
  .wm-macro {
    padding: 0.3rem 0;
  }
  .wm-macro b {
    font-size: 1.15rem;
  }
  .wm-macro span {
    font-size: 0.85rem;
  }
  .wm-portion {
    padding-top: 1.5rem;
    max-width: 680px;
    margin: 0 auto;
  }
  .wm-portion-val {
    font-size: 2rem;
  }

  /* ---- AJR : grille 3 colonnes ---- */
  .ajr-section {
    margin: 2rem 2.5rem;
  }
  .ajr-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
  }

  /* ---- Tableau nutritionnel : panneaux en 2 colonnes ---- */
  .nutrition-full {
    margin: 2rem 2.5rem;
  }
  .nutrition-full-head {
    padding: 1.3rem 2rem;
  }
  .nutrition-full-head h2 {
    font-size: 1.5rem;
  }
  .nutrition-tabs {
    padding: 0 2rem;
  }
  .n-panel {
    padding: 1.25rem 2rem 1.75rem;
  }
  .n-panel .n-table {
    columns: 2;
    column-gap: 2.5rem;
    column-rule: 1px solid var(--line);
  }
  .n-panel .n-table tr {
    break-inside: avoid;
  }

  /* ---- Comparateur : 3 colonnes de cards + entête plus large ---- */
  .compare {
    margin: 2rem 2.5rem;
  }
  .compare-head {
    padding: 1.5rem 2rem 1.25rem;
  }
  .compare-title {
    font-size: 1.4rem;
  }
  .compare-body {
    padding: 1.5rem 2rem 2rem;
  }
  .cmp-toggle {
    max-width: 500px;
    margin: 0 auto 0.75rem;
  }
  .cmp-context {
    text-align: center;
  }
  .v3-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
  }
  .v3-card {
    padding: 1.1rem 1.15rem;
  }

  /* ---- Carousel comparables ---- */
  .comparables {
    margin: 2rem 0;
  }
  .comparables-head {
    padding: 0 2.5rem;
  }
  .carousel-wrap {
    padding: 0 2.5rem;
  }
  .comp-card {
    width: 200px;
    padding: 1.25rem 1.1rem 1.1rem;
  }
  .comp-card-name {
    font-size: 1.15rem;
  }
  .comp-card-kcal {
    font-size: 1rem;
  }
  .carousel-nav {
    width: 44px;
    height: 44px;
  }
  .carousel-nav.prev { left: 0.8rem; }
  .carousel-nav.next { right: 0.8rem; }

  /* ---- Éditorial : pleine largeur, comme les autres sections ---- */
  .editorial {
    margin: 3rem 2.5rem;
    padding: 2.5rem 3rem;
  }
  .editorial h2 {
    font-size: 2.1rem;
    margin-bottom: 1.5rem;
  }
  .editorial-author {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
  }
  .editorial-author-avatar {
    width: 64px;
    height: 64px;
  }
  .editorial-author-name {
    font-size: 1.05rem;
  }
  .editorial-author-role {
    font-size: 0.82rem;
  }
  .editorial-content {
    font-size: 1.02rem;
    line-height: 1.75;
  }
  .editorial-h3 {
    font-size: 1.35rem;
    margin: 2rem 0 0.9rem;
  }

  /* ---- FAQ : plus aérée ---- */
  .faq {
    margin: 3rem 0;
  }
  .faq .section-eyebrow,
  .faq > .section-h2 {
    padding: 0 2.5rem !important;
  }
  .faq-list {
    margin: 0 2.5rem;
  }
  .faq-q {
    padding: 1.25rem 0.5rem;
    font-size: 1.2rem;
  }
  .faq-a {
    padding: 0 0.5rem 1.4rem;
  }
  .faq-a p {
    font-size: 1rem;
    max-width: 780px;
  }

  /* ---- Quiz : 2 options côte à côte ---- */
  .quiz {
    margin: 2rem 2.5rem;
  }
  .quiz-head {
    padding: 1.5rem 2rem;
  }
  .quiz-title {
    font-size: 1.35rem;
  }
  .quiz-body {
    padding: 2rem;
  }
  .quiz-question {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
  }
  .quiz-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
  }
  .quiz-opt {
    font-size: 1rem;
  }
  .quiz-feedback {
    padding: 1.25rem 1.5rem;
    font-size: 1rem;
  }

  /* ---- Section H2 globale ---- */
  .section-h2 {
    font-size: 2rem !important;
  }
  .section-eyebrow {
    font-size: 0.72rem;
  }

  /* ---- Source footer ---- */
  .source {
    padding: 2rem 2.5rem;
    font-size: 0.8rem;
  }
}

/* ============================================================
   DESKTOP LARGE — ≥ 1200px (ajustements fins)
   ============================================================ */
@media (min-width: 1200px) {
  .hero h1 { font-size: 3.6rem; }
  .hero h1 em { font-size: 2.1rem; }

  /* Carousel : plus de cards visibles */
  .comp-card { width: 215px; }
}