/* Guides : entête à photo pleine largeur, puis la bande « À retenir » à cheval sur le bas de la photo (même langage que l'accueil). */
.gd-heroblock { position: relative; background: var(--surface); padding-bottom: var(--space-l); }
.gd-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: var(--night-text); }
.gd-hero-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.gd-hero-img.is-flip { transform: scaleX(-1); }
.gd-hero-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(17, 26, 44, 0.95) 0%, rgba(17, 26, 44, 0.91) 44%, rgba(17, 26, 44, 0.6) 56%, rgba(17, 26, 44, 0.14) 74%, rgba(17, 26, 44, 0) 100%); }
.gd-hero-in { padding-top: var(--space-2xl); padding-bottom: calc(var(--space-2xl) + 8rem); }
.gd-copy { max-width: 62rem; }
.gd-hero .hm-kicker { color: var(--amber); }
.gd-h1 { max-width: 60rem; }
.gd-hero .hm-lead { max-width: 56rem; margin-bottom: var(--space-m); font-size: var(--text-m); line-height: 1.5; color: var(--night-soft); }
.gd-hero .cb-hero-cta { flex-direction: column; align-items: flex-start; gap: var(--space-s); margin-bottom: var(--space-m); }
.gd-chips { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.gd-chips li { margin: 0; padding: 0.5rem 1.4rem; border: 1px solid rgba(243, 238, 228, 0.28); border-radius: 99rem; background: rgba(243, 238, 228, 0.1); font-size: var(--text-s); line-height: 1.3; color: var(--night-text); }

.gd-keys-wrap { position: relative; z-index: 3; margin-top: -9rem; }
.gd-keys-title { position: absolute; z-index: 1; top: 0; left: calc(var(--space-m) + var(--space-m)); transform: translateY(-50%); margin: 0; padding: 0.5rem 1.4rem; border-radius: 99rem; background: var(--accent); font-size: var(--text-s); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #ffffff; }
.gd-keys { display: grid; grid-template-columns: 0.95fr 1fr 1fr 1fr; margin: 0; padding: 0; list-style: none; background: #ffffff; color: var(--ink); border-radius: 1.4rem; box-shadow: 0 3rem 7rem -2rem rgba(17, 26, 44, 0.55); overflow: hidden; }
.gd-keys > li { display: flex; align-items: flex-start; gap: var(--space-s); margin: 0; padding: var(--space-m); }
.gd-keys > li + li { border-left: 1px solid var(--line); }
.gd-keys > li:first-child { padding-top: calc(var(--space-m) + 1.6rem); }
.gd-stat { flex-direction: column; justify-content: center; gap: 0.6rem; background: var(--night); color: var(--night-text); }
.gd-keys > .gd-stat + .gd-key { border-left: 0; }
.gd-stat-n { font-family: Fraunces; font-weight: 600; font-size: var(--text-xl); line-height: 1.05; color: var(--amber); }
.gd-stat-l { font-size: var(--text-s); line-height: 1.4; color: var(--night-soft); }
.gd-key-ico { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: var(--sand); color: var(--accent-dark); }
.gd-key-ico .mq-i { font-size: 2.4rem; }
.gd-key-t { display: block; font-size: var(--text-s); line-height: 1.45; color: var(--ink-soft); }
.gd-key-t strong { display: block; margin-bottom: 0.3rem; font-size: var(--text-m); font-weight: 600; line-height: 1.2; color: var(--ink); }

@media (max-width: 991px) {
  /* sur téléphone et tablette, la photo passe au-dessus du texte : elle se voit en entier, le texte reste sur fond uni */
  .gd-hero { display: flex; flex-direction: column; }
  .gd-hero-img { position: relative; inset: auto; z-index: 0; order: -1; height: clamp(22rem, 42vw, 38rem); }
  .gd-hero-veil { display: none; }
  .gd-hero-in { padding-top: var(--space-l); padding-bottom: calc(var(--space-xl) + 6rem); }
  .gd-keys-wrap { margin-top: -6rem; }
  .gd-keys { grid-template-columns: 1fr 1fr; }
  .gd-keys > li:nth-child(odd) { border-left: 0; }
  .gd-keys > li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .gd-keys > .gd-stat + .gd-key { border-left: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .gd-hero-in { padding-top: var(--space-m); padding-bottom: calc(var(--space-l) + 5rem); }
  .gd-keys-wrap { margin-top: -5rem; }
  .gd-keys-title { left: calc(var(--space-s) + var(--space-s)); }
  .gd-keys { grid-template-columns: 1fr; }
  .gd-keys > li { padding: var(--space-s); }
  .gd-keys > li + li, .gd-keys > li:nth-child(n+3), .gd-keys > .gd-stat + .gd-key { border-left: 0; border-top: 1px solid var(--line); }
  .gd-stat-n { font-size: var(--text-xl); }
}

/* photo en bandeau entre deux sections */
.mqp-fig { margin: 0; padding: var(--space-l) var(--space-m) 0; }
.mqp-fig-in { max-width: 118rem; margin: 0 auto; }
.mqp-fig-img { display: block; width: 100%; aspect-ratio: 2.2 / 1; object-fit: cover; border-radius: 0.8rem; background: var(--surface-muted); }
@media (max-width: 991px) { .mqp-fig-img { aspect-ratio: 16 / 9; } }
@media (max-width: 600px) { .mqp-fig { padding-left: var(--space-s); padding-right: var(--space-s); } .mqp-fig-img { aspect-ratio: 4 / 3; } }


/* « A ou B » : deux cartes produit, puis le tableau chiffre par chiffre */
.vs-cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-l); margin-top: var(--space-m); }
.vs-cta-item { display: flex; flex-direction: column; align-items: stretch; gap: 0.6rem; }
.vs-cta-item .mq-aff { align-self: center; margin-left: 0; }
.vs-wrap { overflow-x: auto; }
.vs-table { width: 100%; border-collapse: collapse; background: #ffffff; border: 1px solid var(--line); }
.vs-cap { padding: 0 0 var(--space-xs); text-align: left; font-size: var(--text-s); line-height: 1.4; color: var(--ink-soft); }
.vs-table th, .vs-table td { padding: var(--space-xs) var(--space-s); text-align: left; vertical-align: top; border-top: 1px solid var(--line); font-size: var(--text-s); line-height: 1.45; color: var(--ink-soft); }
.vs-table thead th { border-top: 0; background: var(--sand); font-family: Fraunces; font-weight: 600; font-size: var(--text-m); line-height: 1.2; color: var(--ink); }
.vs-table tbody th { width: 28%; font-weight: 600; color: var(--ink); }
.vs-table td strong { color: var(--ink); }
.vs-sub { display: block; font-family: Work Sans; font-weight: 400; font-size: var(--text-s); color: var(--ink-soft); }
.vs-hint { display: block; font-weight: 400; color: var(--ink-soft); }
.vs-tag { display: inline-block; margin: 0 0 0 0.6rem; vertical-align: middle; padding: 0.1rem 0.9rem; border: 1px solid var(--accent-dark); border-radius: 10rem; font-size: var(--text-s); font-weight: 600; line-height: 1.4; color: var(--accent-dark); }
.vs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vs-resume { display: grid; gap: var(--space-s); margin: var(--space-s) 0 0; padding: 0; list-style: none; max-width: 80rem; }
.vs-resume li { margin: 0; padding: 0 0 0 var(--space-s); border-left: 0.4rem solid var(--amber); font-size: var(--text-m); line-height: 1.55; color: var(--ink-soft); }
.vs-resume strong { color: var(--ink); }
@media (max-width: 600px) {
  .vs-cta { grid-template-columns: 1fr; gap: var(--space-s); }
  /* sur téléphone, une ligne du tableau devient un bloc : le critère, puis chaque marque sous son nom (les rôles ARIA gardent la structure de tableau) */
  .vs-table, .vs-table tbody, .vs-table tr, .vs-table th, .vs-table td { display: block; width: auto; }
  .vs-cap { display: block; }
  .vs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vs-table tbody tr { padding: var(--space-xs) 0; border-top: 1px solid var(--line); }
  .vs-table tbody tr:first-child { border-top: 0; }
  .vs-table tbody th { width: auto; padding: 0 var(--space-xs) 0.2rem; border: 0; }
  .vs-table td { padding: 0.2rem var(--space-xs); border: 0; }
  .vs-table td::before { content: attr(data-label) " : "; font-weight: 600; color: var(--ink); }
  .vs-hint { display: inline; }
}

/* ---------- entêtes sans photo pleine largeur : « chiffre », « split », « texte » (voir mq_guide_hero_flat) ---------- */
.gd-flat { box-sizing: border-box; width: 100%; }
.gd-flat-in { display: grid; align-items: center; gap: var(--space-2xl); padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.gd-flat .gd-copy { min-width: 0; max-width: 62rem; }
.gd-flat .gd-lead { max-width: 56rem; margin-bottom: var(--space-m); font-size: var(--text-m); line-height: 1.5; }
.gd-flat .cb-hero-cta { flex-direction: column; align-items: flex-start; gap: var(--space-s); margin-bottom: var(--space-m); }

.gd-v-chiffre { background: var(--night); color: var(--night-text); }
.gd-v-chiffre .gd-flat-in { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.gd-v-chiffre .hm-kicker { color: var(--amber); }
.gd-v-chiffre .gd-lead { color: var(--night-soft); }
.gd-v-chiffre .gd-chips li { margin: 0; padding: 0.5rem 1.4rem; border: 1px solid rgba(243, 238, 228, 0.28); border-radius: 99rem; background: rgba(243, 238, 228, 0.1); font-size: var(--text-s); line-height: 1.3; color: var(--night-text); }
.gd-big { padding-left: var(--space-xl); border-left: 1px solid rgba(243, 238, 228, 0.28); }
.gd-big-n { margin: 0 0 var(--space-xs); font-family: Fraunces; font-weight: 600; font-size: var(--text-3xl); line-height: 1; color: var(--amber); }
.gd-big-l { margin: 0; max-width: 34rem; font-size: var(--text-m); line-height: 1.5; color: var(--night-soft); }

.gd-v-split, .gd-v-texte { color: var(--ink); }
.gd-v-split { background: var(--surface); }
.gd-v-texte { background: var(--surface); }
.gd-v-split .gd-flat-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.gd-v-split.is-left .gd-flat-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.gd-v-split.is-left .gd-split-fig { order: -1; }
.gd-v-split .gd-h1, .gd-v-texte .gd-h1 { color: var(--ink); }
.gd-v-split .gd-lead, .gd-v-texte .gd-lead { color: var(--ink-soft); }
.gd-v-split .cb-hero-link, .gd-v-texte .cb-hero-link { color: var(--ink); }
.gd-v-split .cb-hero-link:hover, .gd-v-texte .cb-hero-link:hover { color: var(--accent-dark); }
.gd-v-split .gd-chips li, .gd-v-texte .gd-chips li { margin: 0; padding: 0.5rem 1.4rem; border: 1px solid var(--line); border-radius: 99rem; background: var(--surface-muted); font-size: var(--text-s); line-height: 1.3; color: var(--ink-soft); }
.gd-v-texte .gd-chips li { background: var(--surface); }
.gd-split-fig { position: relative; margin: 0; }
.gd-split-img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 0.8rem 0.8rem 0.8rem 8rem; background: var(--surface-muted); }
.gd-v-split.is-left .gd-split-img { border-radius: 0.8rem 0.8rem 8rem 0.8rem; }
.gd-split-img.is-flip { transform: scaleX(-1); }
.gd-badge { position: absolute; left: calc(-1 * var(--space-m)); bottom: var(--space-xl); box-sizing: border-box; max-width: 24rem; padding: var(--space-s) var(--space-m); border-radius: 0.6rem; background: var(--night); color: var(--night-text); }
.gd-v-split.is-left .gd-badge { left: auto; right: calc(-1 * var(--space-m)); }
.gd-badge-n { display: block; margin: 0 0 var(--space-2xs); font-family: Fraunces; font-weight: 600; font-size: var(--text-xl); line-height: 1; color: var(--amber); }
.gd-badge-l { display: block; font-size: var(--text-s); line-height: 1.4; color: var(--night-soft); }

.gd-v-texte .gd-flat-in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.gd-memo { padding-left: var(--space-xl); border-left: 0.3rem solid var(--accent); }
.gd-memo-t { margin: 0 0 var(--space-s); font-size: var(--text-s); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-dark); }
.gd-memo-list { margin: 0; padding: 0; list-style: none; }
.gd-memo-list > li { display: flex; align-items: flex-start; gap: var(--space-s); margin: 0; padding: var(--space-s) 0; border-top: 1px solid var(--line); }
.gd-memo-list > li:first-child { padding-top: 0; border-top: 0; }
.gd-memo-stat { flex-wrap: wrap; align-items: baseline; }
.gd-memo-n { font-family: Fraunces; font-weight: 600; font-size: var(--text-xl); line-height: 1; color: var(--accent-dark); }
.gd-memo-l { flex: 1 1 14rem; font-size: var(--text-s); line-height: 1.4; color: var(--ink-soft); }
.gd-memo .gd-key-ico { background: var(--surface-muted); }

@media (max-width: 991px) {
  .gd-flat-in, .gd-v-chiffre .gd-flat-in, .gd-v-split .gd-flat-in, .gd-v-split.is-left .gd-flat-in, .gd-v-texte .gd-flat-in { grid-template-columns: minmax(0, 1fr); gap: var(--space-l); padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
  .gd-v-split.is-left .gd-split-fig { order: 0; }
  .gd-big { padding-left: 0; padding-top: var(--space-m); border-left: 0; border-top: 1px solid rgba(243, 238, 228, 0.28); }
  .gd-memo { padding-left: 0; padding-top: var(--space-m); border-left: 0; border-top: 0.3rem solid var(--accent); }
  .gd-split-img { aspect-ratio: 16 / 10; border-radius: 0.8rem 0.8rem 0.8rem 6rem; }
  .gd-v-split.is-left .gd-split-img { border-radius: 0.8rem 0.8rem 6rem 0.8rem; }
  .gd-badge, .gd-v-split.is-left .gd-badge { left: var(--space-s); right: auto; bottom: var(--space-s); }
}
@media (max-width: 600px) {
  .gd-badge, .gd-v-split.is-left .gd-badge { position: static; max-width: none; margin-top: var(--space-s); }
}

/* photo dans une section à deux colonnes (jeton [mq:photo-…] posé dans .mqp-split-photo) */
.mqp-split-photo .mqp-fig { padding: 0; }
.mqp-split-photo .mqp-fig-img { aspect-ratio: 4 / 5; }
@media (max-width: 991px) { .mqp-split-photo .mqp-fig-img { aspect-ratio: 16 / 10; } }