/* Plaine Altitude, système de design V4 : rubrique (exemple : Parapentes) et éléments de section communs.
   Décision du 2026-10-11 : la rubrique est une liste de catégorie (toutes les voiles, filtres, categorie.css et js/categorie.js),
   avec en tête une frise des niveaux et les pratiques en petites tuiles photo, puis sous la grille le conseil d'Hervé et les
   cartes de marques. Les titres de section, liens « Tout voir » et le bandeau du conseil servent aussi à l'accueil. */

/* ── Sections ── */
.rb-section { margin-top: var(--sp-xl); }
.rb-section__tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.6rem 2rem; margin-bottom: var(--sp-s); }
.rb-section__tete h2 { margin: 0; font-size: var(--fs-xl); line-height: 1.15; }
.rb-section__tete p { margin: 0.5rem 0 0; max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--fg-secondaire); }
.rb-tout { display: inline-flex; align-items: center; gap: 0.4rem; font: 700 var(--fs-sm)/1.2 var(--font-texte); color: var(--pa-turquoise-text); white-space: nowrap; }
.rb-tout svg { width: 1rem; height: 1rem; transition: transform var(--t-normal); }
.rb-tout:hover svg { transform: translateX(3px); }
.rb-nb { font: 600 var(--fs-xs)/1.3 var(--font-texte); color: var(--fg-secondaire); }

/* ── Frise des niveaux : du plus tolérant au plus exigeant, reliés par une ligne du turquoise pâle au noir ── */
.rb-echelle { margin: 0 0 var(--sp-s); }
.rb-echelle-legende { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 0.6rem; font: 800 var(--fs-2xs)/1 var(--font-texte); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-secondaire); }
.rb-niveaux { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.rb-niveaux::before { content: ""; position: absolute; left: 1.7rem; right: 1.7rem; top: calc(1.1rem - 2px); height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, #d8f4f4 0%, #8ddfdf 40%, var(--pa-turquoise) 70%, var(--pa-noir) 100%); }
.rb-niveaux > li { min-width: 0; }
.rb-niveaux a { position: relative; display: grid; align-content: start; gap: 0.25rem; height: 100%; box-sizing: border-box; padding: 0 0.55rem 0.7rem; border-radius: 12px; color: inherit; text-decoration: none; transition: background var(--t-normal), box-shadow var(--t-normal); }
.rb-niveaux .pa-en { position: relative; margin-bottom: 0.35rem; }
.rb-niveaux .pa-en b { min-width: 2.2rem; height: 2.2rem; border-radius: 9px; font-size: var(--fs-xs); box-shadow: 0 0 0 4px var(--bg-page); transition: transform var(--t-normal); }
.rb-niveaux__nom { font: 800 var(--fs-sm)/1.2 var(--font-titre); color: var(--fg-titre); }
.rb-niveaux__qui { font-size: var(--fs-xs); line-height: 1.4; color: var(--fg-texte); }
.rb-niveaux__meta { margin-top: 0.1rem; font: 600 var(--fs-2xs)/1.3 var(--font-texte); color: var(--fg-secondaire); }
.rb-niveaux__meta b { color: var(--fg-titre); }
.rb-niveaux a:hover, .rb-niveaux a[aria-current] { background: linear-gradient(180deg, transparent 1.1rem, #fff 1.1rem); box-shadow: inset 0 0 0 1px var(--bord); }
.rb-niveaux a[aria-current] { box-shadow: inset 0 0 0 2px var(--pa-turquoise); }
.rb-niveaux a:hover .rb-niveaux__nom { color: var(--pa-turquoise-text); }
.rb-niveaux a:hover .pa-en b { transform: scale(1.06); }

/* ── Pratiques : six petites tuiles photo sur une ligne ── */
.rb-pratiques { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.6rem; margin: 0 0 var(--sp-m); padding: 0; list-style: none; }
.rb-tuile { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--pa-noir); color: #fff; text-decoration: none; isolation: isolate; }
.rb-tuile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(.2,.7,.3,1); }
.rb-tuile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(20,19,19,.8) 0%, rgba(20,19,19,.2) 55%, rgba(20,19,19,0) 75%); }
.rb-tuile__texte { position: absolute; left: 0.75rem; right: 0.6rem; bottom: 0.6rem; display: grid; gap: 0.1rem; }
.rb-tuile b { font: 800 var(--fs-sm)/1.15 var(--font-titre); }
.rb-tuile small { font: 600 var(--fs-2xs)/1.3 var(--font-texte); color: rgba(255,255,255,.85); }
.rb-tuile[aria-current] { box-shadow: 0 0 0 3px var(--pa-turquoise); }
@media (hover: hover) { .rb-tuile:hover img { transform: scale(1.05); } }

/* ── Conseil d'Hervé : bandeau noir avec photo (sous la grille) ── */
.rb-conseil { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); margin-top: var(--sp-xl); border-radius: 16px; overflow: hidden; background: var(--pa-noir); color: #fff; }
.rb-conseil__photo { position: relative; min-height: 18rem; margin: 0; }
.rb-conseil__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.rb-conseil__texte { display: grid; align-content: center; gap: 1rem; padding: var(--sp-l); }
.rb-conseil__qui { display: flex; align-items: center; gap: 0.75rem; }
.rb-conseil__qui .avatar { box-shadow: 0 0 0 2px var(--pa-turquoise); }
.rb-conseil__qui b { display: block; font: 800 var(--fs-sm)/1.2 var(--font-titre); }
.rb-conseil__qui small { font-size: var(--fs-xs); color: rgba(255,255,255,.7); }
.rb-conseil h2 { margin: 0; font-size: var(--fs-xl); line-height: 1.15; color: #fff; }
.rb-conseil p { margin: 0; max-width: 56ch; font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.82); }
.rb-conseil__boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.3rem; }
.rb-conseil__boutons .pa-btn--fantome { color: #fff; border: 1px solid rgba(255,255,255,.3); }
.rb-conseil__boutons .pa-btn--fantome:hover { background: #fff; color: var(--pa-noir); border-color: #fff; }

/* ── Marques : cartes en hauteur, photo d'une voile de la marque en vol, logo en blanc en bas ── */
.mq-fleches { display: flex; gap: 0.4rem; }
.mq-fleches button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 8px; border: 1px solid var(--bord-fort); background: #fff; color: var(--pa-noir); cursor: pointer;
  transition: background-color 350ms ease-in-out, color 350ms ease-in-out, border-color 350ms ease-in-out; }
.mq-fleches button:hover:not(:disabled) { background: var(--pa-noir); border-color: var(--pa-noir); color: #fff; }
.mq-fleches button:disabled { opacity: .35; cursor: default; }
.mq-fleches svg { width: 1rem; height: 1rem; }
.mq-fleches button:first-child svg { transform: rotate(90deg); }
.mq-fleches button:last-child svg { transform: rotate(-90deg); }
.mq-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 0.75rem) / 6); gap: 0.75rem; margin: 0; padding: 0 0 0.4rem; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.mq-rail::-webkit-scrollbar { display: none; }
.mq-rail > li { scroll-snap-align: start; }
.mq-carte { position: relative; display: block; aspect-ratio: 5 / 7; border-radius: 16px; overflow: hidden; background: var(--pa-noir); text-decoration: none; isolation: isolate; }
.mq-carte > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(.2,.7,.3,1); }
.mq-carte::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(20,19,19,.78) 0%, rgba(20,19,19,.3) 40%, rgba(20,19,19,0) 65%); }
.mq-carte__bas { position: absolute; left: 0.9rem; right: 0.9rem; bottom: 1rem; display: grid; justify-items: center; gap: 0.5rem; text-align: center; }
.mq-carte__logo { display: block; width: auto; max-width: 78%; height: auto; max-height: 3.4rem; object-fit: contain; filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.mq-carte__bas small { font: 700 var(--fs-2xs)/1 var(--font-texte); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,.85); }
@media (hover: hover) { .mq-carte:hover > img { transform: scale(1.05); } }

@media (prefers-reduced-motion: reduce) {
  .rb-tuile img, .mq-carte > img, .rb-niveaux .pa-en b, .rb-tout svg { transition: none; }
  .rb-tuile:hover img, .mq-carte:hover > img, .rb-niveaux a:hover .pa-en b, .rb-tout:hover svg { transform: none; }
}

/* ── Tablette ── */
@media (max-width: 1199px) {
  .rb-niveaux__qui { display: none; }
  .mq-rail { grid-auto-columns: calc((100% - 3 * 0.75rem) / 4.3); }
}
@media (max-width: 999px) {
  .rb-conseil { grid-template-columns: minmax(0, 1fr); }
  .rb-conseil__photo { min-height: 0; aspect-ratio: 16 / 9; }
  .rb-conseil__texte { padding: var(--sp-m) var(--sp-s); }
  /* Frise et pratiques défilent au doigt pour garder les voiles près du haut de l'écran */
  .rb-niveaux, .rb-pratiques { display: flex; gap: 0.4rem; margin-left: calc(-1 * var(--gouttiere)); margin-right: calc(-1 * var(--gouttiere)); padding: 0 var(--gouttiere);
    overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-left: var(--gouttiere); }
  .rb-niveaux::-webkit-scrollbar, .rb-pratiques::-webkit-scrollbar { display: none; }
  .rb-niveaux::before, .rb-echelle-legende { display: none; }
  .rb-niveaux > li, .rb-pratiques > li { flex: none; scroll-snap-align: start; }
  .rb-niveaux a { display: flex; align-items: center; gap: 0.5rem; height: 2.75rem; padding: 0 0.85rem 0 0.35rem; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--bord); }
  .rb-niveaux a:hover { background: #fff; }
  .rb-niveaux .pa-en { margin: 0; }
  .rb-niveaux .pa-en b { min-width: 2rem; height: 2rem; border-radius: 999px; box-shadow: none; }
  .rb-niveaux__nom { white-space: nowrap; }
  .rb-niveaux__meta { display: none; }
  .rb-pratiques { margin-top: 0.6rem; }
  .rb-pratiques > li { width: 9.5rem; }
  .mq-rail { grid-auto-columns: min(46%, 12rem); margin: 0 calc(-1 * var(--gouttiere)); padding: 0 var(--gouttiere) 0.4rem; scroll-padding-left: var(--gouttiere); }
  .mq-fleches { display: none; }
}
@media (max-width: 639px) {
  .rb-section { margin-top: var(--sp-l); }
  .rb-section__tete h2 { font-size: var(--fs-lg); }
  .rb-section__tete p { font-size: var(--fs-sm); }
  .rb-pratiques > li { width: 8.5rem; }
}

/* ── Page Parapentes (choix du 2026-10-11) : tête courte sur ordinateur, sans l'encadré d'Hervé (repris par le bandeau
      sous la grille) ; intro sous le titre, plus à sa droite (correction n°92 du 2026-11-13, toutes les listes) ── */
@media (min-width: 1000px) {
  .lc-tete--courte { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--sp-s); }
  .lc-tete--courte .lc-tete__herve { display: none; }
  .lc-tete--courte .lc-tete__texte { max-width: none; }
  .lc-tete--courte .lc-intro { max-width: 72ch; padding-bottom: 0.3rem; font-size: 15px; line-height: 1.5; color: var(--fg-secondaire); }
}
/* Cartes de marque sans logo (pages de rubrique, 2026-10-13) : nom de la marque en texte */
.mq-carte__nom { font: 800 var(--fs-sm)/1.1 var(--font-titre); color: var(--fg-titre); }