/* Essai Félix 06/11, aperçu admin /?home=ride seulement : notre une actuelle (carrousel cinéma),
   menu posé sur la photo, et la photo plus visible (« on ne voit pas assez la photo »).
   Voile teal de gauche et voile global retirés ; restent un fondu en bas, sous le texte,
   une ombre sur le texte (lisibilité RGAA) et un léger voile à droite sous la liste. */

/* Menu sur la photo : l'en-tête sort du flux (absolute sans top = reste sous le ticker). */
body.its-home-ride .site-header.site-header--v3 { position: absolute; left: 0; right: 0; z-index: 200; background: none; box-shadow: none; border: 0; } /* plus de dégradé : le voile uniforme couvre la photo jusqu en haut (Félix 06/11, « ombre verte ») */
body.its-home-ride .hd-apercu { display: none; }
body.its-home-ride .hd-cine-scene { min-height: clamp(560px, 82vh, 860px); }

body.its-home-ride .hd .hd-une .hd-cine-voile:not(.hd-sdg-voile) {
  background:
    linear-gradient(to top, var(--hd-teal) 0%, rgba(28, 61, 52, .82) 14%, rgba(28, 61, 52, .45) 30%, rgba(28, 61, 52, 0) 48%),
    linear-gradient(90deg, rgba(28, 61, 52, 0) 68%, rgba(28, 61, 52, .55) 100%);
}
body.its-home-ride .hd-cine-txt { text-shadow: 0 1px 2px rgba(28, 61, 52, .9), 0 2px 18px rgba(28, 61, 52, .85); }
body.its-home-ride .hd-cine-pastille { text-shadow: none; }

@media (max-width: 1100px) {
  body.its-home-ride .hd .hd-une .hd-cine-voile:not(.hd-sdg-voile) { background: linear-gradient(to top, var(--hd-teal) 0%, rgba(28, 61, 52, .82) 18%, rgba(28, 61, 52, .45) 36%, rgba(28, 61, 52, 0) 55%); }
}
@media (max-width: 800px) {
  body.its-home-ride .hd-cine-scene { min-height: min(86svh, 640px); }
  body.its-home-ride .hd .hd-une .hd-cine-voile:not(.hd-sdg-voile) { background: linear-gradient(to top, var(--hd-teal) 0%, rgba(28, 61, 52, .88) 28%, rgba(28, 61, 52, .45) 52%, rgba(28, 61, 52, 0) 72%); }
}

/* Spécificité : la une a des voiles en .hd .hd-une .hd-cine-voile:not(.hd-sdg-voile) (0,4,0), d'où les sélecteurs longs ci-dessus.
   Fondu teal de 230 px sous le menu retiré : le menu porte son propre dégradé. */
body.its-home-ride .hd .hd-une .hd-cine-voile::before { display: none; }

/* Variante /?home=ride&voile=uni : même voile léger sur toute la photo, plus le fondu en bas vers les brèves. */
body.its-home-ride--uni .hd .hd-une .hd-cine-voile:not(.hd-sdg-voile) {
  background:
    linear-gradient(rgba(28, 61, 52, .65), rgba(28, 61, 52, .65));
}

/* Brèves posées SUR la photo, sous le même voile (Félix 06/11 : « il est pas là en dessous »).
   --ride-fil = hauteur du bandeau remonté ; s'il est plus haut, le surplus garde un fond teal (jamais vanille sur vanille). */
body.its-home-ride--uni { --ride-fil: 116px; }
body.its-home-ride--uni .hd-cine-txt { margin-bottom: var(--ride-fil); }
body.its-home-ride--uni .hd-cine-puces { transform: translateY(calc(-1 * var(--ride-fil))); }
body.its-home-ride--uni .hd .hd-fil { position: relative; z-index: 3; margin-top: calc(-1 * var(--ride-fil)); min-height: var(--ride-fil); background: linear-gradient(to bottom, transparent var(--ride-fil), var(--hd-teal) var(--ride-fil)); } /* voile renforcé sous les brèves essayé puis refusé (Félix 06/11, « pas de voile c moche ») */
@media (max-width: 800px) { body.its-home-ride--uni { --ride-fil: 124px; } }

/* Photos claires (Félix 06/11, « soucis sur les images claires ») : la photo est assombrie avant le voile
   (les blancs baissent plus que les tons sombres), voile uniforme porté à 70 %, ombre du texte renforcée. */
/* Photo assombrie à 72 % retirée (Félix 07/11) : le voile seul reste. */
body.its-home-ride--uni .hd .hd-une .hd-cine-voile:not(.hd-sdg-voile) { background: rgba(28, 61, 52, .75); }
/* Pas d'ombre ni de halo sur le texte : ça le rendait flou (Félix 06/11). Sans la photo assombrie (07/11) : 4,47:1 sur blanc pur, juste sous 4,5:1 (texte courant). */
body.its-home-ride--uni .hd-une, body.its-home-ride--uni .hd-une *, body.its-home-ride--uni .hd-fil, body.its-home-ride--uni .hd-fil * { text-shadow: none; }

/* Méga-menu sur la photo (Félix 06/11) : le verre clair ne montrait que du gris (photo déjà voilée à 70 % derrière).
   En attendant le choix : panneau vanille plein, encarts blancs fondus dedans. Ordinateur seulement. */
@media (min-width: 881px) {
  /* Verre teal sombre (Félix 06/11 : le verre clair virait au gris). Les liens du panneau sont en color: var(--teal) !important
     dans common.css : on n'ajoute pas de !important, on INVERSE les variables de la charte dans ce seul panneau
     (teal <-> vanille) ; boutons et pastilles teal deviennent vanille à texte teal. */
  body.its-menu-ride .site-header .nav-mega-panel {
    --teal: #F2E5D2; --teal-dk: #E8D8C0; --vanilla: #1C3D34; --vanilla-d: #1C3D34;
    --muted: rgba(242, 229, 210, .8); --border: rgba(242, 229, 210, .22);
    --ink: #F2E5D2; --white: transparent; /* cartes blanches (équipes, annonces, encarts) sans fond ni cadre (Félix 06/11 : « c'est vide ») */
    color: #F2E5D2;
    /* Verre teal (transparence remise, Félix 06/11) : le trait de deux tons venait de l'ombre du panneau, pas du verre. */
    background: rgba(28, 61, 52, .6); /* .82 pas assez transparent (Félix 06/11) */
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    border-top: 0;
    box-shadow: 0 40px 40px -20px rgba(0, 0, 0, .3); /* ombre vers le bas seulement : vers le haut elle assombrissait la barre (« deux couleurs ») */
  }
  body.its-menu-ride .site-header .nav-mega-feature-body { background: transparent; }
  /* Logos sur une pastille vanille translucide (Félix 07/11 : sur le teal, Écosse, All Blacks et Fidji ne se voyaient pas). */
  body.its-menu-ride .site-header .nav-mega-panel img.nav-mega-team-logo { background: rgba(242, 229, 210, .85); }
  body.its-menu-ride .site-header .nav-mega-panel .sidebar-box { background: transparent; border-color: rgba(242, 229, 210, .22); }
}

/* Menu ouvert (Félix 06/11) : le panneau s'ouvre SOUS la barre (« faut qu'il se mette pas dessus le menu »).
   La barre prend le même verre que le panneau ; à 90 % les deux floutages (haut et milieu de la photo) ne font plus deux tons.
   Verre de la barre porté par un ::before : sur l'en-tête lui-même, un backdrop-filter couperait le flou du panneau (enfant). */
@media (min-width: 881px) {
  body.its-menu-ride .site-header.site-header--v3::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    /* Verre teal (transparence remise, Félix 06/11) : le trait de deux tons venait de l'ombre du panneau, pas du verre. */
    background: rgba(28, 61, 52, .6); /* .82 pas assez transparent (Félix 06/11) */
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    opacity: 0; transition: opacity .15s ease;
  }
  body.its-menu-ride .site-header.site-header--v3:has(.nav-mega:hover, .nav-mega.is-open, .nav-dropdown--user:hover:not(.is-ferme), .nav-dropdown--user.is-open)::before { opacity: 1; }
  body.its-menu-ride .site-header.site-header--v3:has(.nav-mega:hover, .nav-mega.is-open, .nav-dropdown--user:hover:not(.is-ferme), .nav-dropdown--user.is-open) { background: none; }
}

/* Menu du compte et petits menus déroulants (Félix 06/11, « revoir ce menu là aussi ») : même verre teal que le méga-menu,
   à la place du teal-dk opaque (#172713, « pas le bon vert »). Intitulés de section relevés à .75 (RGAA, ils étaient à .35). */
@media (min-width: 881px) {
  body.its-menu-ride .site-header .nav-dropdown-menu {
    /* Verre teal (transparence remise, Félix 06/11) : le trait de deux tons venait de l'ombre du panneau, pas du verre. */
    background: rgba(28, 61, 52, .6); /* .82 pas assez transparent (Félix 06/11) */
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    border-top: 0;
    box-shadow: 0 40px 40px -20px rgba(0, 0, 0, .3); /* ombre vers le bas seulement : vers le haut elle assombrissait la barre (« deux couleurs ») */
  }
  body.its-menu-ride .site-header .nav-dropdown-menu a:hover { background: rgba(242, 229, 210, .1); }

}

/* Menu du compte en BLOCS (Félix 06/11, « fais le menu par bloc ») : grand panneau teal sous la 1re ligne de la barre
   (il cache la navigation), 4 cartes Mon espace / Mon réseau / Mon club et pronos / Compte, déconnexion en pied.
   Balisage : its_header_compte_blocs_html() (themes/itsrugby/inc/header-compte.php), servi sur l'aperçu seulement. */
@media (min-width: 881px) {
  body.its-menu-ride .site-header .nav-dropdown--user { position: static; }
  body.its-menu-ride .site-header .nav-dropdown--user::after { display: none; } /* pont de survol : serait devenu une bande sous toute la barre */
  body.its-menu-ride .site-header .nav-dropdown--user .nav-dropdown-menu {
    /* 60px = 1re ligne de la barre (6 + 54) ; 64px de marge haute = sous le bas du logo rond */
    left: 0; right: 0; top: 60px; min-width: 0; max-height: none; overflow: visible;
    padding: 64px max(24px, calc((100% - 1200px) / 2)) 28px;
  }
  body.its-menu-ride .ncb { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  body.its-menu-ride .ncb-bloc { display: flex; flex-direction: column; padding: 18px 20px 14px; background: none; } /* ni bordure ni fond (Félix 06/11) */
  body.its-menu-ride .ncb-titre { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(242, 229, 210, .2); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(242, 229, 210, .8); }
  body.its-menu-ride .site-header .ncb-bloc a { display: block; padding: 7px 0; font-size: 14px; font-weight: 600; color: rgba(242, 229, 210, .9); white-space: normal; transition: color .15s, padding-left .15s; }
  body.its-menu-ride .site-header .ncb-bloc a:first-of-type { font-weight: 800; color: #F2E5D2; }
  body.its-menu-ride .site-header .ncb-bloc a:hover { background: none; color: #E8D8C0; padding-left: 4px; }
  body.its-menu-ride .ncb-pied { margin: 16px 0 0; text-align: right; }
  body.its-menu-ride .site-header .ncb-pied a { display: inline-block; padding: 6px 0; font-size: 13px; font-weight: 700; color: rgba(242, 229, 210, .85); }
  body.its-menu-ride .site-header .ncb-pied a:hover { background: none; color: #F2E5D2; }
}
@media (min-width: 881px) {
  /* Le logo rond descend dans la 2e ligne : il reste au-dessus du panneau du compte au lieu d'être coupé en deux. */
  body.its-menu-ride .site-header .site-header__cell--logo { position: relative; z-index: 301; }
}


/* RGAA : rubrique des brèves (vanille .72) à 3,4:1 seulement sur photo blanche voilée -> vanille pleine (4,95:1). */
body.its-home-ride--uni .hd .hd-fil .hd-fil-rub { color: #F2E5D2; }

/* Bouton pause de la une (RGAA 13.8) : 24 px mini, vanille sur la photo voilée. Deux barres = en cours ; triangle = arrêté. */
.hd-arret-btn { position: relative; flex: 0 0 auto; width: 30px; height: 24px; margin-right: 6px; padding: 0; border: 0; background: none; cursor: pointer; }
.hd-arret-ic { position: absolute; left: 50%; top: 50%; width: 10px; height: 12px; transform: translate(-50%, -50%); border-left: 3px solid #F2E5D2; border-right: 3px solid #F2E5D2; box-sizing: border-box; }
.hd-arret .hd-arret-ic { width: 0; height: 0; border-left: 11px solid #F2E5D2; border-right: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.hd-arret-btn:focus-visible { outline: 3px solid #F2E5D2; outline-offset: 2px; }
.hd-arret .hd-une .hd-puce.is-on i { animation-play-state: paused; }

/* Lisibilité sur photo, sans voile en plus (Félix 06/11) : pastille de rubrique 10 -> 13 px, texte des brèves d'un cran. */
body.its-home-ride .hd .hd-une .hd-cine-pastille { font-size: 13px; padding: 5px 11px; }
body.its-home-ride--uni .hd .hd-fil-quand, body.its-home-ride--uni .hd .hd-fil .hd-fil-rub { font-size: 13px; }
body.its-home-ride--uni .hd .hd-fil-titre { font-size: 16px; }
body.its-home-ride--uni { --ride-fil: 124px; }
@media (max-width: 800px) { body.its-home-ride--uni { --ride-fil: 100px; } } /* 132 -> 100 px (Félix 07/11 : marge sous les brèves) : brèves 72 px + 22 px de marge basse + 4 ; plus haut, le surplus garde le fond teal */

/* RGAA 3.3 (composants d'interface, 3:1) : tirets inactifs de la une à vanille .3 = 1,8:1 sur photo claire voilée.
   A .65 : 3,1:1 au pire (photo blanche), 5,5:1 sur photo sombre. Survol relevé au-dessus. Le tiret actif reste plus large et se remplit. */
body.its-home-ride .hd .hd-une .hd-puce { background-image: linear-gradient(rgba(242, 229, 210, .65), rgba(242, 229, 210, .65)); }
body.its-home-ride .hd .hd-une .hd-puce:hover { background-image: linear-gradient(rgba(242, 229, 210, .85), rgba(242, 229, 210, .85)); }

/* Titres de colonnes des méga-menus (« Les clubs dans l'actu », « France »…) : 9 -> 12 px, pas lisible (Félix 06/11). */
body.its-menu-ride .site-header .nav-mega-panel .nav-mega-grid-title { font-size: 12px; letter-spacing: .06em; padding-bottom: 10px; }

/* UNE seule plaque de verre pour barre + panneau ouvert (Félix 06/11 : « il y a toujours une démarcation »).
   Deux verres floutaient deux zones de photo différentes -> deux tons. Le verre de la barre (::before) descend
   sous le panneau ouvert, de --ride-ext px (mesuré par itsrugby-home-d.js) ; les panneaux n'ont plus de fond propre. */
@media (min-width: 881px) {
  body.its-menu-ride .site-header .nav-mega-panel,
  body.its-menu-ride .site-header .nav-dropdown--user .nav-dropdown-menu { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  body.its-menu-ride .site-header.site-header--v3::before { bottom: calc(-1 * var(--ride-ext, 0px)); box-shadow: 0 40px 40px -20px rgba(0, 0, 0, .3); }
}
@media (min-width: 881px) {
  /* Menu du compte ouvert : sans fond propre, il laissait voir la ligne de navigation ; on la masque (il doit la cacher, Félix 06/11). */
  body.its-menu-ride .site-header--v3:has(.nav-dropdown--user:hover:not(.is-ferme), .nav-dropdown--user.is-open) .site-header__cell--nav-left,
  body.its-menu-ride .site-header--v3:has(.nav-dropdown--user:hover:not(.is-ferme), .nav-dropdown--user.is-open) .site-header__cell--nav-right { visibility: hidden; }
}
@media (min-width: 881px) {
  /* Croix de fermeture du menu du compte : 40 px, en haut à droite du panneau, alignée sur les blocs. */
  body.its-menu-ride .ncb-fermer { position: absolute; top: 16px; right: max(24px, calc((100% - 1200px) / 2)); width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; }
  body.its-menu-ride .ncb-fermer span, body.its-menu-ride .ncb-fermer span::before { position: absolute; left: 50%; top: 50%; width: 22px; height: 2px; background: #F2E5D2; }
  body.its-menu-ride .ncb-fermer span { transform: translate(-50%, -50%) rotate(45deg); }
  body.its-menu-ride .ncb-fermer span::before { content: ""; left: 0; top: 0; transform: rotate(90deg); }
  body.its-menu-ride .ncb-fermer:hover span, body.its-menu-ride .ncb-fermer:hover span::before { background: #E8D8C0; }
  body.its-menu-ride .ncb-fermer:focus-visible { outline: 3px solid #F2E5D2; outline-offset: 2px; }
}
@media (min-width: 881px) {
  /* Fermé par la croix : l'emporte sur le survol (sinon :hover le rouvrait) jusqu'à ce que la souris quitte le menu. */
  body.its-menu-ride .site-header .nav-dropdown--user.is-ferme .nav-dropdown-menu { display: none; }
}
@media (min-width: 881px) {
  /* Trait du menu ouvert/survolé : il était en bas de la ligne (lien haut de 100 %), loin du mot, et flottait dans le vide
     au-dessus du panneau (Félix 06/11). Lien à hauteur du texte + 6 px : le trait tombe juste sous le mot.
     Le survol reste tenu par .nav-mega (parent, pleine hauteur), donc pas de trou en descendant vers le panneau. */
  body.its-menu-ride .site-header--v3 .nav-mega-trigger,
  body.its-menu-ride .site-header--v3 .header-nav > a { height: auto; align-self: center; padding: 6px 2px; }
}
@media (min-width: 881px) {
  /* Trait sous le MOT seulement, pas sous la flèche ni l'espace qui suit (Félix 06/11) : le trait du site est une ombre
     sur tout le lien ; on la remplace par un ::after qui s'arrête avant la flèche (2 px de marge + 4 px d'écart + 6 px de flèche). */
  body.its-menu-ride .site-header--v3 .nav-mega-trigger { position: relative; }
  body.its-menu-ride .site-header--v3 .nav-mega-trigger:hover,
  body.its-menu-ride .site-header--v3 .nav-mega.is-open .nav-mega-trigger { box-shadow: none; }
  body.its-menu-ride .site-header--v3 .nav-mega-trigger::after { content: ""; position: absolute; left: 2px; right: 13px; bottom: 0; height: 2px; background: #F2E5D2; opacity: 0; transition: opacity .15s; }
  body.its-menu-ride .site-header--v3 .nav-mega-trigger:hover::after,
  body.its-menu-ride .site-header--v3 .nav-mega.is-open .nav-mega-trigger::after { opacity: 1; }
}
@media (min-width: 881px) {
  /* Trait collé au mot (Félix 06/11, « toujours ») : 3 px sous le texte au lieu de 6, et retrait de l'espacement
     de la dernière lettre (.6 px) à droite. */
  body.its-menu-ride .site-header--v3 .nav-mega-trigger,
  body.its-menu-ride .site-header--v3 .header-nav > a { padding-bottom: 3px; } /* même padding partout : Matchs/Joueurs alignés sur les menus */
  body.its-menu-ride .site-header--v3 .nav-mega-trigger::after { right: 14px; }
}

/* Une plus haute (Félix 06/11, « on peut agrandir la hauteur ») : tout l'écran sous le ticker des scores (64 px) sur ordinateur,
   au lieu de 82 % plafonné à 860 px. Le menu est posé sur la photo, il ne prend pas de place. */
@media (min-width: 801px) {
  body.its-home-ride .hd-cine-scene { min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); }
}

/* ═══ Ticker / bandeau de chiffres : variantes à comparer (Félix 06/11 : « le vert fluo c'est cool mais c'est pas notre
   couleur, c'est une couleur d'urgence »). &ticker=noir (défaut) | teal | vanille, sur /?menu=ride et /?home=ride.
   Plus de filet vert fluo nulle part. Sur la home, la photo passe sous le ticker (fond translucide + flou) ;
   ailleurs le fond est plein (rien derrière). ═══ */
body.its-menu-ride nav.scores-ticker { border-bottom: 0; }
@media (min-width: 801px) {
  body.its-home-ride .hd-ticker-haut { position: relative; z-index: 210; }
  body.its-home-ride .hd .hd-une { margin-top: -64px; }
  body.its-home-ride .hd-cine-scene { min-height: 100vh; min-height: 100svh; }
  body.its-home-ride .hd-ticker-haut nav.scores-ticker { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
/* Noir : le noir d'avant, textes vanille (plus de vert). */
body.its-ticker-noir nav.scores-ticker { background: #1A1A1A; }
body.its-home-ride.its-ticker-noir .hd-ticker-haut nav.scores-ticker { background: rgba(26, 26, 26, .55); }
/* Teal : couleur de la charte, textes vanille. */
body.its-ticker-teal nav.scores-ticker { background: #1C3D34; }
body.its-home-ride.its-ticker-teal .hd-ticker-haut nav.scores-ticker { background: rgba(28, 61, 52, .6); }
/* Textes vanille (noir et teal) : chiffres, compétitions, vainqueur plein, perdant .75. */
body.its-ticker-noir .db-band strong, body.its-ticker-teal .db-band strong { color: #F2E5D2; }
body.its-ticker-noir .db-band a:hover strong, body.its-ticker-teal .db-band a:hover strong { color: #E8D8C0; }
body.its-ticker-noir a.ticker-match .ticker-comp, body.its-ticker-teal a.ticker-match .ticker-comp { color: rgba(242, 229, 210, .8); }
body.its-ticker-noir a.ticker-match .ticker-team-score, body.its-ticker-teal a.ticker-match .ticker-team-score { color: rgba(242, 229, 210, .75); }
body.its-ticker-noir a.ticker-match .ticker-team-score--winner, body.its-ticker-teal a.ticker-match .ticker-team-score--winner { color: #F2E5D2; }
/* Vanille : fond vanille, tous les textes en teal. */
body.its-ticker-vanille nav.scores-ticker { background: #F2E5D2; }
body.its-home-ride.its-ticker-vanille .hd-ticker-haut nav.scores-ticker { background: rgba(242, 229, 210, .82); }
body.its-ticker-vanille .db-band a, body.its-ticker-vanille .db-band strong, body.its-ticker-vanille .db-band span,
body.its-ticker-vanille a.ticker-match, body.its-ticker-vanille a.ticker-match .ticker-team-name,
body.its-ticker-vanille a.ticker-match .ticker-team-score--winner, body.its-ticker-vanille a.ticker-match .ticker-comp,
body.its-ticker-vanille .scores-ticker button.ticker-nav-btn { color: #1C3D34; }
body.its-ticker-vanille a.ticker-match .ticker-team-score, body.its-ticker-vanille a.ticker-match .ticker-status { color: rgba(28, 61, 52, .8); }
body.its-ticker-vanille .db-band a, body.its-ticker-vanille .scores-ticker-inner, body.its-ticker-vanille .db-slider,
body.its-ticker-vanille .ticker-match, body.its-ticker-vanille .ticker-nav, body.its-ticker-vanille .scores-ticker button.ticker-nav-btn { border-color: rgba(28, 61, 52, .15); }
body.its-ticker-vanille .db-band a:hover, body.its-ticker-vanille .ticker-match:hover, body.its-ticker-vanille .scores-ticker button.ticker-nav-btn:hover { background: rgba(28, 61, 52, .08); }

/* ═══ Pages sans photo en haut (/?menu=ride hors home) : l'en-tête reste dans le flux en teal plein ; menu ouvert =
   barre + panneau d'une seule plaque de teal PLEIN (un verre laisserait voir le texte de la page). ═══ */
@media (min-width: 881px) {
  body.its-menu-ride:not(.its-home-ride) .site-header.site-header--v3::before { background: #1C3D34; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ═══ Articles (/?menu=ride, Félix 07/11 : « le même style de hero » que la home) : photo en plein fond (forcé dans
   hero-article.php), voile uniforme 70 % + photo à 78 % comme la une (pire cas photo blanche : 4,95:1), plus de fondu
   en haut ni d ombre sur le texte ; à l ordinateur, menu posé sur la photo et hero sur toute la hauteur de l écran. ═══ */
body.its-menu-ride .art-hero:not(.art-hero--noimg) .art-hero__media img { filter: brightness(.72); }
body.its-menu-ride .art-hero:not(.art-hero--noimg) .art-hero__shade { background: rgba(28, 61, 52, .75); }
body.its-menu-ride .art-hero .art-hero__shade::before { display: none; }
body.its-menu-ride .art-hero:not(.art-hero--noimg) .art-hero__head { background: none; text-shadow: none; }
@media (min-width: 900px) {
  body.its-menu-ride .art-hero:not(.art-hero--noimg) { min-height: clamp(640px, 100svh, 980px); }
}
@media (min-width: 881px) {
  body.its-menu-ride:has(.art-hero:not(.art-hero--noimg)) .site-header.site-header--v3 { position: absolute; left: 0; right: 0; z-index: 200; background: none; box-shadow: none; border: 0; }
  body.its-menu-ride:has(.art-hero:not(.art-hero--noimg)) .site-header.site-header--v3::before { background: rgba(28, 61, 52, .6); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
}
/* Cadrage (Félix 07/11, « centre mieux l image ») : le menu couvre maintenant le haut de la photo ; sans choix de l éditeur
   (30 % par défaut), la photo est calée plus haut pour que le sujet tombe entre le menu et le titre. */
body.its-menu-ride .art-hero:not(.art-hero--focus-centre):not(.art-hero--focus-bas) { --fy: 0%; }

/* ═══ Pages listes (/matchs/, /joueurs/… avec ?menu=ride, Félix 07/11) : même hero que la home. Photo sur toute la largeur
   (au lieu de 60 % à droite), voile uni 70 % + photo à 78 %, menu transparent posé dessus ; le texte descend de la
   hauteur du menu (120 px). Ordinateur seulement (≥ 900 px, comme la mise en page « photo à droite » d origine). ═══ */
@media (min-width: 900px) {
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto) .arch-hero__media { left: 0; width: 100%; }
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto) .arch-hero__media::after { inset: 0; background: rgba(28, 61, 52, .75); }
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto) .arch-hero__media img { filter: brightness(.72); }
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto) .arch-hero__head { padding-top: 176px; }
  body.its-menu-ride .arch-hero.arch-hero--compact:not(.arch-hero--nophoto) .arch-hero__head { padding-top: 148px; }
  html:not(.is-app) body.its-menu-ride .arch-hero:not(.arch-hero--nophoto) { border-top: 0; }
  body.its-menu-ride:has(.arch-hero:not(.arch-hero--nophoto)) .site-header.site-header--v3 { position: absolute; left: 0; right: 0; z-index: 200; background: none; box-shadow: none; border: 0; }
  body.its-menu-ride:has(.arch-hero:not(.arch-hero--nophoto)) .site-header.site-header--v3::before { background: rgba(28, 61, 52, .6); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
}
/* Hero des pages listes plus grand, textes plus gros (Félix 07/11). Contenu calé en bas de la photo comme la une.
   RGAA : tous les textes en vanille pleine sur voile 70 % + photo 78 % = 4,95:1 au pire (photo blanche), libellés compris. */
@media (min-width: 900px) {
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto) { display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; } /* plus de hauteur imposée : le titre suit le menu sans vide (Félix 07/11, /joueurs/, /competitions/, /equipes/, /matchs/) */
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto) .arch-hero__head { padding-bottom: 56px; }
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto) .arch-hero__inner > * { max-width: 760px; }
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto) h1.arch-hero__title { font-size: clamp(48px, 4.6vw, 72px); line-height: 1; }
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto) .arch-hero__desc { font-size: 18px; line-height: 1.5; }
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto) .hero-info-label { font-size: 13px; }
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto) .hero-info-value { font-size: 30px; }
}
/* Bouton « Rechercher un match » / « Filtres » en vanille au lieu du blanc (Félix 07/11), comme le bouton loupe voisin. */
body.its-menu-ride .arch-hero .arch-hero__filters { background: var(--vanilla, #F2E5D2); }
body.its-menu-ride .arch-hero .arch-hero__filters:hover { background: #E8D8C0; }
/* « Matchs du jour » à droite du hero de /matchs/ (Félix 07/11). Même esprit que « Aussi à la une » de la home : filet,
   petit titre, lignes sans cadre. Tout en vanille pleine (RGAA : 4,95:1 au pire), les écarts passent par la graisse.
   Grand écran seulement (≥ 1 200 px) : en dessous, la colonne de texte n'en laisse pas la place. */
.arch-hero__aside-wrap { display: none; }
@media (min-width: 1200px) {
  body.its-menu-ride .arch-hero__aside-wrap { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  /* Style de la liste à droite de la une (hd-cine-liste, Félix 07/11 « reprendre le style du hero ») : centrée en hauteur,
     lignes séparées d un filet, trait vanille à gauche au survol ; titres en vanille pleine (la une les met à .78, sous 4,5:1). */
  body.its-menu-ride .arch-hero__aside-wrap > .container { height: 100%; display: flex; justify-content: flex-end; align-items: flex-end; padding-top: 180px; padding-bottom: 56px; } /* calée en bas, au niveau du bouton : centrée, elle touchait presque le menu (Félix 07/11) */
  body.its-menu-ride .mdj { width: clamp(280px, 24vw, 360px); pointer-events: auto; color: #F2E5D2; }
}
/* Style des lignes de la colonne (hors media query depuis le 08/11 : sert aussi au haut des pages listes sur mobile, ≤ 760 px). */
body.its-menu-ride .mdj .mdj-titre { margin: 0 0 6px 19px; font-size: 18px; font-weight: 800; line-height: 1.2; color: #F2E5D2; } /* 11 px trop petit (Félix 07/11) */
body.its-menu-ride .mdj-liste { list-style: none; margin: 0; padding: 0; }
body.its-menu-ride .mdj-liste li + li { border-top: 1px solid rgba(242, 229, 210, .18); }
body.its-menu-ride .mdj-liste a { display: flex; align-items: center; gap: 12px; padding: 12px 0 12px 16px; border-left: 3px solid transparent; color: #F2E5D2; text-decoration: none; transition: border-color .2s ease; }
body.its-menu-ride .mdj-liste a:hover, body.its-menu-ride .mdj-liste a:focus-visible { border-left-color: #F2E5D2; }
body.its-menu-ride .mdj-comp { font-size: 11px; font-weight: 700; }
/* Logo de la compétition à la place de la vignette photo de la une (Félix 07/11), sur pastille vanille comme dans le méga-menu. */
body.its-menu-ride .mdj-vign { flex: 0 0 44px; width: 44px; height: 44px; padding: 4px; box-sizing: border-box; background: rgba(242, 229, 210, .85); }
body.its-menu-ride .mdj-vign img { display: block; width: 100%; height: 100%; object-fit: contain; }
body.its-menu-ride .mdj-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
body.its-menu-ride .mdj-l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; font-weight: 700; line-height: 1.3; }
body.its-menu-ride .mdj-eq { min-width: 0; } /* nom complet, sur deux lignes si besoin : plus de coupe « Union Bordeaux Bè… » (Félix 08/11) */
body.its-menu-ride .mdj-eq strong { font-weight: 900; }
body.its-menu-ride .mdj-res { flex: 0 0 auto; font-weight: 800; font-variant-numeric: tabular-nums; }
/* Liens Masculin / Féminin / Rugby à XV / Blogs partenaires : 11 px à 75 % trop petits (Félix 07/11) et sous 4,5:1 sur la photo.
   14 px gras en vanille pleine ; la rubrique active garde son soulignement par bordure. */
@media (min-width: 1025px) {
  body.its-menu-ride .site-header--v3 .site-cats { font-weight: 700; } /* graisse héritée : .its-v2 a[class]:not(…) force font-weight: inherit sur les liens */
  body.its-menu-ride .site-header--v3 .site-cat { font-size: 14px; color: #F2E5D2; }
  body.its-menu-ride .site-header--v3 .site-cat:hover { color: #E8D8C0; }
}
/* Boutons du menu (Matchs, Joueurs…) : 13 px « pas très visibles » sur la photo (Félix 07/11). Déjà en vanille pleine (4,95:1) :
   on joue la taille, 15 px. */
@media (min-width: 1025px) {
  body.its-menu-ride .site-header--v3 .nav-mega-trigger,
  body.its-menu-ride .site-header--v3 .header-nav > a { font-size: 15px; letter-spacing: .04em; }
}
/* 07/11 (Félix : « le fond n'est pas assez foncé ») : voile 70 % -> 75 % et photo 78 % -> 72 % sur la home, les articles et les
   pages listes. Pire cas photo blanche : 4,95:1 -> 5,86:1. Les commentaires plus haut qui citent 70 % / 78 % / 4,95 datent d'avant. */
/* Dernière ligne sans marge basse : le bas du logo tombe pile au bas du bouton « Rechercher un match » (Félix 07/11). */
@media (min-width: 1200px) {
  body.its-menu-ride .mdj-liste li:last-child a { padding-bottom: 0; }
}
/* Menu du compte en blocs, dans le menu mobile (≤ 880 px, vérifié 07/11) : titres de bloc collés au bord et sans style.
   Même titre qu'à l'ordinateur, aligné sur le texte des liens (36 px) ; pas de croix (le menu mobile a la sienne). */
@media (max-width: 880px) {
  body.its-menu-ride .site-header .ncb-titre { display: block; padding: 16px 20px 6px 36px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #F2E5D2; }
  body.its-menu-ride .site-header .ncb-fermer { display: none; }
}

/* ═══ Mobile (Félix 07/11 : « on perd la transparence » + « un peu de transparence dans le menu popup ») ═══
   Pages listes et articles avec photo : comme la home, le menu passe sur la photo (sans fond) et, sur les pages listes, la photo
   remonte aussi sous le ticker, translucide. Hauteurs mesurées le 07/11 : ticker 109 px sur 2 lignes (≤ 760 px), 62 px sur une
   (761-899 px) ; en-tête 67 px. Le texte et le bouton « ‹ » descendent d autant. */
@media (max-width: 899px) {
  body.its-menu-ride:has(.arch-hero:not(.arch-hero--nophoto)) .site-header.site-header--v3:not(.menu-open),
  body.its-menu-ride:has(.art-hero:not(.art-hero--noimg)) .site-header.site-header--v3:not(.menu-open) { position: absolute; left: 0; right: 0; z-index: 200; background: none; box-shadow: none; border: 0; }
  body.its-menu-ride:has(.arch-hero:not(.arch-hero--nophoto)) .site-header--v3:not(.menu-open) .site-header__top,
  body.its-menu-ride:has(.art-hero:not(.art-hero--noimg)) .site-header--v3:not(.menu-open) .site-header__top { background: none; }
  body.its-menu-ride:has(.arch-hero:not(.arch-hero--nophoto)) .hd-ticker-haut { position: relative; z-index: 210; }
  body.its-menu-ride:has(.arch-hero:not(.arch-hero--nophoto)) .hd-ticker-haut nav.scores-ticker { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  body.its-menu-ride.its-ticker-noir:has(.arch-hero:not(.arch-hero--nophoto)) .hd-ticker-haut nav.scores-ticker { background: rgba(26, 26, 26, .55); }
  body.its-menu-ride.its-ticker-teal:has(.arch-hero:not(.arch-hero--nophoto)) .hd-ticker-haut nav.scores-ticker { background: rgba(28, 61, 52, .6); }
  body.its-menu-ride.its-ticker-vanille:has(.arch-hero:not(.arch-hero--nophoto)) .hd-ticker-haut nav.scores-ticker { background: rgba(242, 229, 210, .82); }
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto) { --ride-tick: 62px; margin-top: calc(-1 * var(--ride-tick)); border-top: 0; }
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto) .arch-hero__shade { background: rgba(28, 61, 52, .75); }
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto) .arch-hero__media img { filter: brightness(.72); }
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto) .arch-hero__head { background: none; padding-top: calc(var(--ride-tick) + var(--ride-head, 67px) + 58px); }
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto) .arch-hero__nav { top: calc(var(--ride-tick) + var(--ride-head, 67px) + 10px); }
  html:not(.is-app) body.its-menu-ride .art-hero:not(.art-hero--noimg) > nav.breadcrumb { top: 67px; }
}
@media (max-width: 760px) {
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto) { --ride-tick: 46px; } /* compteurs seuls, ticker sans hauteur mini (ligne des scores masquée ci-dessous) */
}
/* Menu mobile ouvert : verre teal (82 % + flou) au lieu du teal plein. */
@media (max-width: 880px) {
  body.its-menu-ride .site-header--v3.menu-open .site-header__top { background: rgba(28, 61, 52, .82); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
}
/* Mobile hors home : seulement la 1re ligne du ticker, les compteurs (Félix 07/11 : deux lignes « ça fait trop ») — comme le
   bandeau mobile du site actuel. La home garde ses deux lignes. */
@media (max-width: 760px) {
  body.its-menu-ride:not(.home) .hd-ticker-haut .scores-ticker-inner,
  body.its-menu-ride:not(.home) .hd-ticker-haut .ticker-nav { display: none; }
}
/* Ticker hors home (Félix 07/11 : « home seulement ») : plus de ticker à l ordinateur ni sur tablette ; sur mobile, la ligne
   des compteurs reste (règles ≤ 760 px plus haut), comme le bandeau mobile du site actuel. Le bloc qui faisait remonter la
   photo sous le ticker à l ordinateur a été retiré. */
@media (min-width: 761px) {
  body.its-menu-ride:not(.home) .hd-ticker-haut { display: none; }
  body.its-menu-ride:not(.home) .arch-hero:not(.arch-hero--nophoto) { --ride-tick: 0px; }
}
/* Mobile hors home : le ticker gardait sa hauteur mini de 56 px pour des compteurs de 46 px, d où une bande vide de 10 px
   sous les chiffres (Félix 07/11 : « pourquoi tu laisses une marge »). */
@media (max-width: 760px) {
  body.its-menu-ride:not(.home) .hd-ticker-haut nav.scores-ticker { min-height: 0; }
}
/* Trait vanille au survol sur TOUS les liens du menu (Félix 07/11), comme les menus déroulants : Matchs / Joueurs et la ligne
   Masculin / Féminin / Rugby à XV / Blogs partenaires. Trait sous le mot seulement, pas sous les marges ; aussi au clavier
   (focus-visible) et sur la page en cours. Le soulignement par bordure des rubriques actives est remplacé par ce trait. */
@media (min-width: 1025px) {
  body.its-menu-ride .site-header--v3 .header-nav > a,
  body.its-menu-ride .site-header--v3 .site-cat { position: relative; border-bottom-color: transparent; box-shadow: none; }
  body.its-menu-ride .site-header--v3 .header-nav > a::after,
  body.its-menu-ride .site-header--v3 .site-cat::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 0; height: 2px; background: #F2E5D2; opacity: 0; transition: opacity .15s; }
  body.its-menu-ride .site-header--v3 .site-cat::after { left: 14px; right: 14px; bottom: 6px; }
  body.its-menu-ride .site-header--v3 .header-nav > a:hover::after,
  body.its-menu-ride .site-header--v3 .header-nav > a:focus-visible::after,
  body.its-menu-ride .site-header--v3 .header-nav > a[aria-current]::after,
  body.its-menu-ride .site-header--v3 .site-cat:hover::after,
  body.its-menu-ride .site-header--v3 .site-cat:focus-visible::after,
  body.its-menu-ride .site-header--v3 .site-cat.is-active::after { opacity: 1; }
  body.its-menu-ride .site-header--v3 .site-cat:hover { color: #F2E5D2; }
}
/* Liens des méga-menus (compétitions, nations… : .nav-mega-item) : même trait vanille au survol, sous le texte seulement
   (soulignement épais décalé, suit le mot même sur deux lignes). */
@media (min-width: 881px) {
  body.its-menu-ride .site-header .nav-mega-panel a.nav-mega-item:not(#_) { text-decoration: underline 2px transparent; text-underline-offset: 5px; transition: text-decoration-color .15s; }
  body.its-menu-ride .site-header .nav-mega-panel a.nav-mega-item:not(#_):hover,
  body.its-menu-ride .site-header .nav-mega-panel a.nav-mega-item:not(#_):focus-visible { text-decoration-color: #F2E5D2; } /* :not(#_) = poids d un id : .its-v2 a[class]:not(…)×n impose text-decoration: none */
}
/* Home : photo de la une calée en haut, comme les articles (Félix 07/11 : la photo démarrée 80 px plus bas laissait le menu
   sur un fond teal uni ; « sur l article on ne l a pas »). Elle passe sous tout le menu ; sans cadrage choisi par l éditeur,
   elle est calée tout en haut (0 % au lieu de 10 %) pour éloigner un peu le sujet du logo. */
body.its-home-ride .hd .hd-une .hd-cine-img { object-position: var(--fx, 50%) var(--fy, 0%); }
/* Home : liste de droite de la une calée en bas (Félix 07/11, comme « Matchs du jour »), sa dernière vignette sur la ligne
   de la barre de lecture (pause + tirets). Elle était centrée en hauteur. Le bas du bloc d interface = haut des brèves
   (--ride-fil) ; + 24 px = l écart entre les tirets et les brèves, mesuré le 07/11. */
@media (min-width: 881px) {
  body.its-home-ride .hd .hd-une .hd-cine-liste { top: auto; bottom: calc(var(--ride-fil, 124px) + 24px); transform: none; }
  body.its-home-ride .hd .hd-une .hd-cine-liste li:last-child .hd-cine-item { padding-bottom: 0; }
}

/* ═══ Fiches équipe / compétition (hero « cinéma », Félix 07/11 : « le modèle ride n est vraiment pas là ») ═══
   Photo sur toute la largeur (au lieu des 2/3 droits fondus dans le teal), voile uni 75 % + photo 72 % comme partout,
   menu transparent posé dessus, hero sur ~3/4 de l écran, texte en bas. Ordinateur (≥ 901 px). */
@media (min-width: 901px) {
  body.its-menu-ride:has(.team-hero--cinema) .site-header.site-header--v3 { position: absolute; left: 0; right: 0; z-index: 200; background: none; box-shadow: none; border: 0; }
  body.its-menu-ride:has(.team-hero--cinema) .site-header.site-header--v3::before { background: rgba(28, 61, 52, .6); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
  body.its-menu-ride .team-hero.team-hero--cinema .fd-hero-photo { left: 0; -webkit-mask-image: none; mask-image: none; }
  body.its-menu-ride .team-hero.team-hero--cinema .fd-hero-photo img { filter: brightness(.72); }
  body.its-menu-ride .team-hero.team-hero--cinema:not(.team-hero--c) .fd-hero-photo::before { content: ""; display: block; position: absolute; inset: 0; z-index: 1; background: rgba(28, 61, 52, .75); mix-blend-mode: normal; }
  body.its-menu-ride .team-hero.team-hero--cinema .fd-hero-voile { background: none; }
  body.its-menu-ride .team-hero.team-hero--cinema .team-hero-inner { min-height: 0; padding-top: 170px; padding-bottom: 56px; } /* min-height retiré : contenu calé en bas = gros vide sous le menu (Félix 07/11) */
  body.its-menu-ride .team-hero.team-hero--cinema .team-info-col { text-shadow: none; }
}
/* Bulle « Messages » : l icône seule (Félix 07/11). Le libellé reste lu par les lecteurs d écran (masqué à l œil seulement),
   la pastille des non-lus reste à côté de l icône. */
body.its-menu-ride .its-msg-dock-pill { padding: 13px; gap: 6px; }
body.its-menu-ride .its-msg-dock-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Logo en filigrane des fiches (Félix 07/11 : « le logo ça va pas » ; carré entier validé le 13/10, cf. mémoire hero_logo_fond_plein_mobile) : un logo à fond plein (FFR…) était fondu dans la photo
   par un masque rond flou et assombri par le voile de la photo -> tache grise. Sur le modèle RIDE : logo net, carré, sans
   masque ni filtre (comme les logos à fond plein ailleurs) ; logo détouré : sa teinte vanille d origine, sans l assombrissement. */
@media (min-width: 901px) {
  body.its-menu-ride .team-hero--cinema .fd-hero-fili img { filter: none; }
  body.its-menu-ride .team-hero--cinema .fd-hero-fili.fd-fond--t img { filter: grayscale(1) brightness(0) invert(.95) sepia(.25); }
  body.its-menu-ride .team-hero.team-hero--cinema .fd-hero-fili.fd-fond--c .fd-fond-logo,
  body.its-menu-ride .team-hero.team-hero--cinema .fd-hero-fili.fd-fond--s .fd-fond-logo { left: 72%; width: clamp(150px, 13vw, 210px); opacity: 1; mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
}
/* 07/11, Félix : le logo carré au milieu de la photo restait « moche ». Modèle RIDE = la photo seule, texte en bas (comme la
   home et les articles) : plus de logo en filigrane sur la photo des fiches. Les règles du carré ci-dessus deviennent sans effet. */
@media (min-width: 901px) {
  body.its-menu-ride .team-hero.team-hero--cinema .fd-hero-fili,
  body.its-menu-ride .team-hero.team-hero--cinema .fd-hero-logo { display: none; }
}
/* Fiches : droite du hero (07/11). Par défaut « Prochains matchs » (même colonne que /matchs/, règles .mdj plus haut) ;
   &droite=logo : le logo en grand, net, en carré entier (règle du 13/10), calé en bas comme la colonne. */
@media (min-width: 1200px) {
  body.its-menu-ride .team-hero--cinema .arch-hero__aside-wrap { z-index: 5; } /* au-dessus de .team-hero-inner, qui captait les clics (Félix 07/11 : les matchs doivent être des liens) ; la couche laisse passer les clics hors de la colonne */
}
/* Compétition sans image (6 Nations au 07/11) : pas de pastille vanille vide, la place reste pour aligner les lignes. */
body.its-menu-ride .mdj-vign:empty { background: none; }

/* ═══ Fiches équipe / compétition sur mobile (≤ 900 px, Félix 07/11 : « et en mobile ? ») ═══
   Comme les pages listes : menu et ticker translucides posés sur la photo, photo remontée dessous (ticker 46 px ≤ 760 px,
   absent au-delà ; en-tête 67 px), voile uni 75 % + photo 72 %, fondu vers le teal en bas gardé ; plus de grand logo sur
   la photo (il est à côté du nom). */
@media (max-width: 900px) {
  body.its-menu-ride:has(.team-hero--cinema) .site-header.site-header--v3:not(.menu-open) { position: absolute; left: 0; right: 0; z-index: 200; background: none; box-shadow: none; border: 0; }
  body.its-menu-ride:has(.team-hero--cinema) .site-header--v3:not(.menu-open) .site-header__top { background: none; }
  body.its-menu-ride:has(.team-hero--cinema) .hd-ticker-haut { position: relative; z-index: 210; }
  body.its-menu-ride:has(.team-hero--cinema) .hd-ticker-haut nav.scores-ticker { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  body.its-menu-ride.its-ticker-noir:has(.team-hero--cinema) .hd-ticker-haut nav.scores-ticker { background: rgba(26, 26, 26, .55); }
  body.its-menu-ride.its-ticker-teal:has(.team-hero--cinema) .hd-ticker-haut nav.scores-ticker { background: rgba(28, 61, 52, .6); }
  body.its-menu-ride.its-ticker-vanille:has(.team-hero--cinema) .hd-ticker-haut nav.scores-ticker { background: rgba(242, 229, 210, .82); }
  body.its-menu-ride .team-hero.team-hero--cinema { --ride-tick: 0px; margin-top: calc(-1 * var(--ride-tick)); }
  body.its-menu-ride .team-hero.team-hero--cinema .fd-hero-photo { height: calc(56vw + var(--ride-tick) + var(--ride-head, 67px)); }
  body.its-menu-ride .team-hero.team-hero--cinema .fd-hero-photo img { filter: brightness(.72); }
  body.its-menu-ride .team-hero.team-hero--cinema:not(.team-hero--c) .fd-hero-photo::before { content: ""; display: block; position: absolute; inset: 0; z-index: 1; background: rgba(28, 61, 52, .75); mix-blend-mode: normal; }
  body.its-menu-ride .team-hero.team-hero--cinema .team-hero-inner { padding-top: calc(56vw + var(--ride-tick) + var(--ride-head, 67px) - 40px); }
  body.its-menu-ride .team-hero.team-hero--cinema .fd-hero-fili,
  body.its-menu-ride .team-hero.team-hero--cinema .fd-hero-logo { display: none; }
}
@media (max-width: 760px) {
  body.its-menu-ride .team-hero.team-hero--cinema { --ride-tick: 46px; }
  body.its-menu-ride:has(.team-hero--cinema) .hd-ticker-haut nav.scores-ticker { min-height: 0; }
}
/* Fiches à l ordinateur : texte du hero « trop petit, pas lisible » (Félix 07/11). Sous-titre et description 15 -> 18 px,
   libellés 12 -> 14 px, valeurs 16 -> 19 px, tout en vanille pleine (à 75-85 % ils passaient sous 4,5:1 sur la photo).
   Colonne des matchs : ligne compétition 11 -> 13 px, équipes 15 -> 17 px. */
@media (min-width: 901px) {
  body.its-menu-ride .team-hero.team-hero--cinema .team-sub { font-size: 18px; color: #F2E5D2; }
  body.its-menu-ride .team-hero.team-hero--cinema .team-desc { font-size: 18px; line-height: 1.5; color: #F2E5D2; }
  body.its-menu-ride .team-hero.team-hero--cinema dt { font-size: 14px; color: #F2E5D2; }
  body.its-menu-ride .team-hero.team-hero--cinema dd,
  body.its-menu-ride .team-hero.team-hero--cinema dd a { font-size: 19px; }
}
@media (min-width: 1200px) {
  body.its-menu-ride .mdj-comp { font-size: 13px; }
  body.its-menu-ride .mdj-l { font-size: 17px; }
  body.its-menu-ride .mdj { width: clamp(320px, 27vw, 400px); }
}
/* Logo de la fiche à côté de la description (Félix 07/11, après « à côté du nom » et « au-dessus » jugés pas ouf) :
   carré entier à gauche du texte (règle du 13/10), aligné sur le haut de la description. */
body.its-menu-ride .team-hero--cinema .ride-desc { display: flex; align-items: center; gap: 20px; margin-top: 18px; } /* centré sur le texte et décollé du menu de saison (Félix 07/11) */
body.its-menu-ride .team-hero--cinema .ride-desc-logo { flex: 0 0 88px; width: 88px; height: 88px; }
body.its-menu-ride .team-hero--cinema .ride-desc-logo picture { display: contents; }
body.its-menu-ride .team-hero--cinema .ride-desc-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
body.its-menu-ride .team-hero--cinema .ride-desc .team-desc { flex: 1 1 auto; min-width: 0; margin-top: 0; }
@media (max-width: 900px) {
  body.its-menu-ride .team-hero--cinema .ride-desc { text-align: left; gap: 14px; }
  body.its-menu-ride .team-hero--cinema .ride-desc-logo { flex-basis: 64px; width: 64px; height: 64px; }
}
/* Coordonnées du club repliées (Félix 07/11) : bouton « Coordonnées » au style des boutons du hero (contour vanille),
   flèche qui tourne à l ouverture ; le bloc d origine s affiche dessous une fois ouvert. */
body.its-menu-ride .team-hero .ride-coord { margin-top: 14px; }
body.its-menu-ride .team-hero .ride-coord > summary { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid rgba(242, 229, 210, .6); color: #F2E5D2; font-size: 13px; font-weight: 700; cursor: pointer; list-style: none; }
body.its-menu-ride .team-hero .ride-coord > summary::-webkit-details-marker { display: none; }
body.its-menu-ride .team-hero .ride-coord > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
body.its-menu-ride .team-hero .ride-coord[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
body.its-menu-ride .team-hero .ride-coord > summary:hover { background: rgba(242, 229, 210, .1); }
body.its-menu-ride .team-hero .ride-coord > summary:focus-visible { outline: 2px solid #F2E5D2; outline-offset: 2px; }
body.its-menu-ride .team-hero .ride-coord[open] .fd-infos { margin-top: 12px; }
/* Fiches : colonne « Prochains matchs » trop haute (Félix 07/11) : elle montait au niveau des boutons. Lignes resserrées
   (12 -> 8 px), titre plus près de la liste : son haut tombe vers le logo + description, son bas reste sur le bouton X. */
@media (min-width: 1200px) {
  body.its-menu-ride .team-hero--cinema .mdj-liste a { padding-top: 8px; padding-bottom: 8px; }
  body.its-menu-ride .team-hero--cinema .mdj-liste li:last-child a { padding-bottom: 0; }
  body.its-menu-ride .team-hero--cinema .mdj .mdj-titre { margin-bottom: 2px; }
}
/* Fiches sur mobile, 2e passe (Félix 07/11 : « faut revoir la version mobile ») :
   - le bouton « ‹ » (nav.breadcrumb, absolu sans top = place dans le flux) remontait sous le hamburger depuis que l en-tête
     est posé sur la photo : décalé de la hauteur de l en-tête (67 px) + 10 px ;
   - modèle RIDE complet : la photo couvre tout le hero (voile uni), le texte est posé dessus, tout aligné à gauche
     (nom, boutons, coordonnées, réseaux) comme la home et les articles. */
@media (max-width: 900px) {
  body.its-menu-ride.its-fiche-d:has(.team-hero--cinema) > nav.breadcrumb { margin-top: calc(var(--ride-head, 67px) + 10px); }
  body.its-menu-ride .team-hero.team-hero--cinema .fd-hero-photo { height: auto; bottom: 0; }
  body.its-menu-ride .team-hero.team-hero--cinema .fd-hero-voile { background: none; }
  body.its-menu-ride .team-hero.team-hero--cinema .team-hero-inner { padding-top: calc(var(--ride-tick) + var(--ride-head, 67px) + 72px); padding-bottom: 28px; } /* 150 -> 72 px : « beaucoup de vide » au-dessus du nom (Félix 07/11), le nom suit le bouton « ‹ » */
  body.its-menu-ride .team-hero.team-hero--cinema .team-info-col { align-items: flex-start; text-align: left; }
  body.its-menu-ride .team-hero.team-hero--cinema .team-info-col * { justify-content: flex-start; }
  body.its-menu-ride .team-hero.team-hero--cinema .team-name { text-align: left; }
}
/* Cartes de match sur mobile (Félix 07/11, « trait dégueu ») : la bordure gauche du bloc lieu tombait au milieu de la
   ligne heure / stade une fois la carte repliée. Retirée sur mobile. */
@media (max-width: 760px) {
  body.its-menu-ride .match-card .match-right-info { border-left: 0; }
}
/* Dans l app (html.is-app, vérifié par Félix le 07/11) : pas d en-tête du site au-dessus de la photo, le ticker reste.
   --ride-head (67 px sur le site) tombe à 0 : plus de vide réservé au menu (« pourquoi autant d espace en haut »). */
html.is-app body.its-menu-ride { --ride-head: 0px; }
/* Home sur mobile (≤ 800 px, Félix 07/11 : « fais comme sur la version web ») : la photo passe sous le ticker, translucide
   et flou comme à l ordinateur. La photo remonte de la hauteur RÉELLE du ticker (--ride-tick-h, mesurée par
   itsrugby-menu-ride.js : 1 ou 2 lignes selon la largeur). Sans JS : 0, la photo reste sous le ticker plein. */
@media (max-width: 800px) {
  body.its-home-ride .hd-ticker-haut { position: relative; z-index: 210; }
  body.its-home-ride .hd .hd-une { margin-top: calc(-1 * var(--ride-tick-h, 0px)); }
  body.its-home-ride .hd-ticker-haut nav.scores-ticker { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
/* Home mobile : « image trop haute » (Félix 07/11). Sur mobile la photo est coupée sur les côtés (plus haute que large) :
   le cadrage vertical ne la descend pas, et le ticker de 2 lignes cachait son haut. Elle démarre donc sous le ticker
   (--ride-tick-h mesuré), fondue sur 60 px ; le menu reste posé sur la photo. */
@media (max-width: 800px) {
  body.its-home-ride .hd .hd-une .hd-cine-media { top: var(--ride-tick-h, 0px); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 60px); mask-image: linear-gradient(to bottom, transparent 0, #000 60px); }
}
/* Home mobile : une plus haute, photo plus grande (Félix 07/11 : « on peut pas agrandir un peu l image ») : tout l écran,
   comme à l ordinateur (le bloc Compétitions n apparaît plus sous la une au chargement). */
@media (max-width: 800px) {
  /* hauteur de l écran des VISITEURS : la barre d administration (admins connectés) n est pas déduite (Félix 07/11),
     les brèves dépassent donc de 46 px pour un admin, pas pour un visiteur */
  body.its-home-ride .hd-cine-scene { min-height: 100vh; min-height: 100svh; }
}
/* Menu du compte dans le menu mobile : le bouton « Se déconnecter » du bas du menu classique suffit, le lien du pied des blocs
   faisait doublon (07/11). */
@media (max-width: 880px) {
  body.its-menu-ride .site-header .ncb-pied { display: none; }
}
/* Blocs du menu du compte repliables sur mobile (Félix 07/11, « comme sur le menu ») : titres en lignes cliquables avec une
   flèche, liens masqués tant que le bloc est fermé (itsrugby-menu-ride.js pose .ncb-ouvert). */
@media (max-width: 880px) {
  body.its-menu-ride .site-header .ncb-bloc:not(.ncb-ouvert) .ncb-liens { display: none; }
  body.its-menu-ride .site-header .ncb-bloc .ncb-titre { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 20px 0 36px; cursor: pointer; border-bottom: 1px solid rgba(242, 229, 210, .08); }
  body.its-menu-ride .site-header .ncb-bloc .ncb-titre::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .7; transition: transform .15s; }
  body.its-menu-ride .site-header .ncb-bloc.ncb-ouvert .ncb-titre::after { transform: rotate(180deg); }
  body.its-menu-ride .site-header .ncb-bloc .ncb-titre:focus-visible { outline: 2px solid #F2E5D2; outline-offset: -2px; }
}
/* Home dans l app (Félix 07/11 : « on ne peut rien faire de l espace vide en haut ») : pas d en-tête du site au-dessus de la
   photo, donc pas besoin du fondu de 60 px (prévu pour le menu) : la photo commence nette sous le ticker. En bas, la barre
   d onglets de l app (54 px, à 12 px du bord + zone de sécurité) cachait les brèves : la une s arrête au-dessus. */
@media (max-width: 800px) {
  html.is-app body.its-home-ride .hd .hd-une .hd-cine-media { -webkit-mask-image: none; mask-image: none; }
  html.is-app body.its-home-ride .hd-cine-scene { min-height: calc(100vh - 78px - env(safe-area-inset-bottom, 0px)); min-height: calc(100svh - 78px - env(safe-area-inset-bottom, 0px)); }
}

/* 07/11 (Félix « le fond du hero bouge ») : zoom lent au survol retiré en RIDE ;
   la une couvre tout l'écran, la souris est toujours dessus et la photo grossit/rétrécit. */
body.its-home-ride .hd-cine .hd-cine-img,
body.its-home-ride .hd-cine:hover .hd-cine-img { transform: none; transition: none; }

/* Rubriques (/type-de-rugby/15/, catégories, thématiques) : même une que la home (Félix 07/11). Pas de ticker sur ordinateur
   hors home : la une ne remonte pas, et le titre de la rubrique passe SUR la photo, sous le menu. */
body.its-home-ride .hd--archive .ar-une { position: relative; }
body.its-home-ride .hd--archive .ar-une-tete { position: absolute; left: 0; right: 0; top: calc(var(--ride-head, 67px) + 64px); z-index: 4; }
@media (min-width: 801px) {
  body.its-home-ride .hd--archive .hd-une { margin-top: 0; }
}
/* Rubriques : une moins haute que la home (Félix 07/11, « on est toujours un trou » entre le titre de la rubrique et l article). */
/* Hauteur : la même que la home (plein écran), Félix 07/11 « pas la même hauteur ? » ; le 800 px fixe est retiré. */
/* Rubriques : même voile et même photo que la home (Félix 07/11, « applique le même modèle ») — essais de voile propres retirés. */
/* Nom de la rubrique en pastille vanille, même modèle que la pastille des articles de la une (Félix 07/11 : « Oui, la pastille ») :
   plus de grand titre ni de trait. Reste le h1 de la page. */
body.its-home-ride .hd--archive .ar-une-trait { display: none; }
/* 2e version (Félix 07/11 : la pastille « c'est moche, cherche une idée ») : sur-titre en petites capitales espacées, précédé
   d'un trait court vanille, le modèle titre + trait de /groupes/ en réduit. */
body.its-home-ride .hd--archive .ar-une-tete .ar-une-titre { display: inline-flex; align-items: center; gap: 14px; padding: 0; background: none; color: var(--vanilla, #F2E5D2); font-size: 14px; font-weight: 800; line-height: 1.3; letter-spacing: .18em; text-transform: uppercase; text-shadow: none; }
body.its-home-ride .hd--archive .ar-une-tete .ar-une-titre::before { content: ""; flex: 0 0 auto; width: 36px; height: 2px; background: var(--vanilla, #F2E5D2); }
/* Bouton retour « ‹ » des rubriques (mobile, app, < 900 px) : « vert sur vert » (Félix 07/11) -> même modèle que les flèches
   des brèves de la home (.hd-def) : carré vanille plein, chevron teal. */
body.its-home-ride .hd--archive .ar-une-tete .ar-une-retour { background: var(--vanilla, #F2E5D2); border-color: var(--vanilla, #F2E5D2); }
body.its-home-ride .hd--archive .ar-une-tete .ar-une-retour::before { color: var(--hd-teal); }
/* Rubriques : plus de dégradé teal de 230 px en haut de la photo (.ar-une::before d'archive-d.css, fait pour l'ancien grand titre) ;
   la home ne l'a pas (Félix 07/11 : « voile vert sous le menu »). */
body.its-home-ride .hd--archive .ar-une::before { display: none; }

/* Menu RIDE : plus aucun trait sous les liens (Félix 07/11 : « c'est moche », rubriques puis méga-menus). Repos = vanille
   atténuée ; survol, clavier, page en cours, menu ouvert = vanille pleine. Remplace les traits ::after et le soulignement
   épais des .nav-mega-item posés plus haut. */
@media (min-width: 881px) {
  body.its-menu-ride .site-header--v3 .site-cat::after,
  body.its-menu-ride .site-header--v3 .header-nav > a::after,
  body.its-menu-ride .site-header--v3 .nav-mega-trigger::after { display: none; }
  body.its-menu-ride .site-header .nav-mega-panel a.nav-mega-item:not(#_) { text-decoration: none; color: rgba(242, 229, 210, .72); transition: color .15s; }
  body.its-menu-ride .site-header .nav-mega-panel a.nav-mega-item:not(#_):hover,
  body.its-menu-ride .site-header .nav-mega-panel a.nav-mega-item:not(#_):focus-visible { color: #F2E5D2; box-shadow: none; } /* ombre inset 0 -2px teal de l ancien survol = « une ligne » */
  body.its-menu-ride .site-header--v3 .site-cat { color: rgba(242, 229, 210, .72); transition: color .15s; }
  body.its-menu-ride .site-header--v3 .site-cat:hover,
  body.its-menu-ride .site-header--v3 .site-cat:focus-visible,
  body.its-menu-ride .site-header--v3 .site-cat.is-active { color: #F2E5D2; }
}

/* /joueurs/ : « Dans l'actu » dans la colonne de droite (Félix 07/11) : maillot posé sur le teal, sans carré vanille. */
body.its-menu-ride .mdj-vign--maillot { background: none; padding: 0; }
body.its-menu-ride .mdj-vign--maillot .arch-stats-mail { display: block; width: 40px; margin: 0 auto; line-height: 0; }
body.its-menu-ride .mdj-vign--maillot svg { display: block; width: 100%; height: auto; }

/* Colonne de droite (Matchs du jour, Dans l'actu : 5 lignes au plus) : sans hauteur imposée au hero, elle débordait au-dessus
   du menu (Félix 07/11). Les heros qui en ont une gardent juste la hauteur qu'il lui faut : menu + liste + marge du bas. */
@media (min-width: 1200px) {
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto):has(.arch-hero__aside-wrap .mdj) { min-height: 640px; }
}

/* Surtitre des annuaires (« Annuaire des équipes », « Compétitions »…) : même sur-titre que les rubriques (Félix 07/11,
   « reprends ce qu'on a fait pour les catégories ») : trait court + capitales espacées en vanille, plus de pastille. */
body.its-menu-ride .arch-hero .arch-hero__eyebrow { margin: 0 0 14px; }
body.its-menu-ride .arch-hero .arch-hero__eyebrow a,
body.its-menu-ride .arch-hero .arch-hero__eyebrow > span { display: inline-flex; align-items: center; gap: 14px; padding: 0; border: 0; background: none; color: var(--vanilla, #F2E5D2); font-size: 14px; font-weight: 800; line-height: 1.3; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }
body.its-menu-ride .arch-hero .arch-hero__eyebrow a::before,
body.its-menu-ride .arch-hero .arch-hero__eyebrow > span::before { content: ""; flex: 0 0 auto; width: 36px; height: 2px; background: var(--vanilla, #F2E5D2); }
body.its-menu-ride .arch-hero .arch-hero__eyebrow a:hover span,
body.its-menu-ride .arch-hero .arch-hero__eyebrow a:focus-visible span { text-decoration: none; opacity: .8; }

/* ═══ Fiche JOUEUR en RIDE (Félix 07/11 : « on a pas passé la fiche joueur en mode ride ») ═══
   Même modèle que la fiche club : photo sur toute la largeur, voile uni 75 % + photo 72 %, menu transparent posé dessus,
   texte en bas. Joueur sans photo : photo du stade de son club (ou notre photo maison) + logo du club à droite
   (.ride-logo-droite) ; avec photo : prochains matchs du club à droite. Classe posée en PHP : .comp-hero--ride. */
@media (min-width: 901px) {
  body.its-menu-ride:has(.comp-hero--ride) .site-header.site-header--v3 { position: absolute; left: 0; right: 0; z-index: 200; background: none; box-shadow: none; border: 0; }
  body.its-menu-ride:has(.comp-hero--ride) .site-header.site-header--v3::before { background: rgba(28, 61, 52, .6); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
  body.its-menu-ride .comp-hero.comp-hero--ride { position: relative; }
  body.its-menu-ride .comp-hero.comp-hero--ride .comp-photo { left: 0; right: 0; width: auto; -webkit-mask-image: none; mask-image: none; }
  body.its-menu-ride .comp-hero.comp-hero--ride .comp-photo img { filter: brightness(.72); }
  body.its-menu-ride .comp-hero.comp-hero--ride .comp-photo-gradient { background: rgba(28, 61, 52, .75); }
  body.its-menu-ride .comp-hero.comp-hero--ride .comp-hero-inner { box-sizing: border-box; min-height: 100svh; padding-top: 170px; padding-bottom: 56px; } /* tout l écran, texte en bas : la photo n est plus coupée à hauteur du visage (Fickou, Félix 07/11) */
  body.its-menu-ride .comp-hero.comp-hero--ride .comp-info-col { text-shadow: none; }
  body.its-menu-ride .comp-hero.comp-hero--ride .fd-infos dt { font-size: 14px; color: #F2E5D2; }
  body.its-menu-ride .comp-hero.comp-hero--ride .fd-infos dd,
  body.its-menu-ride .comp-hero.comp-hero--ride .fd-infos dd a { font-size: 19px; }
}
@media (min-width: 1200px) {
  body.its-menu-ride .comp-hero--ride .arch-hero__aside-wrap { z-index: 5; }
  body.its-menu-ride .comp-hero--ride .mdj-liste a { padding-top: 8px; padding-bottom: 8px; }
  body.its-menu-ride .comp-hero--ride .mdj-liste li:last-child a { padding-bottom: 0; }
  body.its-menu-ride .comp-hero--ride .mdj .mdj-titre { margin-bottom: 2px; }
  /* Joueur sans photo : son maillot aux initiales (couleurs du club) en grand, centré en hauteur à droite (Félix 07/11, à la
     place du logo du club). */
  body.its-menu-ride .comp-hero--ride .ride-maillot-wrap > .container { justify-content: center; align-items: center; padding-left: 50%; padding-bottom: 0; } /* centré dans la moitié droite, à côté du texte (Félix 07/11) */
  body.its-menu-ride .comp-hero--ride .ride-maillot { display: block; width: clamp(150px, 12vw, 200px); filter: drop-shadow(0 12px 32px rgba(0, 0, 0, .35)); }
  body.its-menu-ride .comp-hero--ride .ride-maillot svg { display: block; width: 100%; height: auto; }
}
@media (max-width: 900px) {
  body.its-menu-ride:has(.comp-hero--ride) .site-header.site-header--v3:not(.menu-open) { position: absolute; left: 0; right: 0; z-index: 200; background: none; box-shadow: none; border: 0; }
  body.its-menu-ride:has(.comp-hero--ride) .site-header--v3:not(.menu-open) .site-header__top { background: none; }
  body.its-menu-ride:has(.comp-hero--ride) .hd-ticker-haut { position: relative; z-index: 210; }
  body.its-menu-ride:has(.comp-hero--ride) .hd-ticker-haut nav.scores-ticker { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  body.its-menu-ride.its-ticker-noir:has(.comp-hero--ride) .hd-ticker-haut nav.scores-ticker { background: rgba(26, 26, 26, .55); }
  body.its-menu-ride.its-ticker-teal:has(.comp-hero--ride) .hd-ticker-haut nav.scores-ticker { background: rgba(28, 61, 52, .6); }
  body.its-menu-ride.its-ticker-vanille:has(.comp-hero--ride) .hd-ticker-haut nav.scores-ticker { background: rgba(242, 229, 210, .82); }
  body.its-menu-ride .comp-hero.comp-hero--ride { --ride-tick: 0px; position: relative; margin-top: calc(-1 * var(--ride-tick)); }
  /* Mobile, 2e passe (Félix 07/11 « pas ouf en mobile ») : plus de voile 75 % sur tout le hero, qui éteignait le joueur.
     La photo est dégagée en haut (sous le menu translucide), nette, et se fond dans le teal ; le nom et les infos
     arrivent sur ce fondu puis sur le teal plein. */
  body.its-menu-ride .comp-hero.comp-hero--ride .comp-photo { left: 0; right: 0; top: calc(var(--ride-tick) + var(--ride-head, 67px)); bottom: auto; height: min(62svh, 480px); /* sous le bandeau du menu, plus derrière : la tête était coupée (Fickou, Félix 07/11) */ -webkit-mask-image: none; mask-image: none; }
  body.its-menu-ride .comp-hero.comp-hero--ride .comp-photo img { filter: none; object-position: 50% 15%; }
  body.its-menu-ride .comp-hero.comp-hero--ride .comp-photo-gradient { background: linear-gradient(to bottom, rgba(28, 61, 52, .55) 0, rgba(28, 61, 52, 0) 24%, rgba(28, 61, 52, 0) 52%, rgba(28, 61, 52, .88) 84%, #1C3D34 100%); }
  body.its-menu-ride .comp-hero.comp-hero--ride .comp-hero-inner { padding-top: calc(var(--ride-tick) + var(--ride-head, 67px) + min(62svh, 480px) - 110px); padding-bottom: 28px; }
  body.its-menu-ride .comp-hero.comp-hero--ride .comp-photo-credit { top: auto; bottom: 122px; right: 12px; z-index: 3; } /* légende en bas à droite de la photo nette, au-dessus du nom (Félix 07/11 : ni sous le menu, ni en haut) */
  body.its-menu-ride.its-fiche-d:has(.comp-hero--ride) > nav.breadcrumb { margin-top: calc(var(--ride-head, 67px) + 10px); }
  /* Tout aligné à gauche, comme la fiche club en RIDE (nom, boutons, infos, réseaux). */
  body.its-menu-ride .comp-hero.comp-hero--ride .comp-info-col { align-items: flex-start; text-align: left; }
  body.its-menu-ride .comp-hero.comp-hero--ride .comp-info-col * { justify-content: flex-start; text-align: left; }
}
@media (max-width: 760px) {
  body.its-menu-ride .comp-hero.comp-hero--ride { --ride-tick: 46px; }
  body.its-menu-ride:has(.comp-hero--ride) .hd-ticker-haut nav.scores-ticker { min-height: 0; }
}
/* Joueur sans photo, mobile et tablette (< 1 200 px, où la colonne de droite n existe pas) : le maillot au centre de la
   photo du stade, au-dessus du nom (Félix 07/11). */
@media (max-width: 1199px) {
  body.its-menu-ride .comp-hero--ride .arch-hero__aside-wrap.ride-maillot-wrap { display: flex; position: absolute; left: 0; right: 0; top: calc(var(--ride-tick, 0px) + var(--ride-head, 67px)); height: calc(min(62svh, 480px) - 130px); z-index: 1; align-items: center; justify-content: center; pointer-events: none; }
  body.its-menu-ride .comp-hero--ride .ride-maillot-wrap > .container { display: contents; }
  body.its-menu-ride .comp-hero--ride .ride-maillot { display: block; width: clamp(110px, 30vw, 160px); filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .4)); }
  body.its-menu-ride .comp-hero--ride .ride-maillot svg { display: block; width: 100%; height: auto; }
}
@media (min-width: 901px) and (max-width: 1199px) {
  body.its-menu-ride .comp-hero--ride .arch-hero__aside-wrap.ride-maillot-wrap { top: 0; bottom: 0; height: auto; left: 55%; }
}
/* Fiche joueur RIDE, téléphone : saison, équipes, Suivre et Signaler sur UNE ligne (Félix 07/11). Le saut de ligne venait
   du ::after de .comp-headline ; boutons resserrés ; « Signaler une erreur » affiché « Signaler » (data-court, traduit),
   le nom complet reste celui du bouton pour les lecteurs d écran. Sous ~370 px la ligne repasse à la ligne d elle-même. */
@media (max-width: 760px) {
  body.its-menu-ride .comp-hero.comp-hero--ride .comp-headline { gap: 5px; }
  body.its-menu-ride .comp-hero.comp-hero--ride .comp-headline::after { content: none; display: none; }
  body.its-menu-ride .comp-hero.comp-hero--ride .comp-name-row { display: contents; }
  body.its-menu-ride .comp-hero.comp-hero--ride .season-dd-hero,
  body.its-menu-ride .comp-hero.comp-hero--ride .team-dd-hero,
  body.its-menu-ride .comp-hero.comp-hero--ride .comp-headline > :is(button, a) { flex: none; margin: 0; }
  body.its-menu-ride .comp-hero.comp-hero--ride .comp-headline .if-dd-btn { gap: 4px; padding-left: 8px; padding-right: 8px; font-size: 11.5px; }
  body.its-menu-ride .comp-hero.comp-hero--ride .comp-headline > :is(button, a) { padding-left: 8px; padding-right: 8px; font-size: 11.5px; white-space: nowrap; }
  body.its-menu-ride .comp-hero.comp-hero--ride .comp-headline > .its-report-err__btn[data-court] { font-size: 0; }
  body.its-menu-ride .comp-hero.comp-hero--ride .comp-headline > .its-report-err__btn[data-court]::before { content: attr(data-court); font-size: 11.5px; }
}
/* Joueur sans photo (notre photo + maillot) : pas besoin de tant de hauteur (Félix 07/11). Ordinateur : hauteur du contenu ;
   téléphone : bande photo + maillot basse au-dessus du nom. */
@media (min-width: 901px) {
  body.its-menu-ride .comp-hero.comp-hero--ride-sans-photo .comp-hero-inner { min-height: 0; }
}
@media (max-width: 900px) {
  body.its-menu-ride .comp-hero.comp-hero--ride-sans-photo .comp-photo { height: 300px; } /* 230 -> 300 px : « ça fait écrasé » (Félix 07/11) */
  body.its-menu-ride .comp-hero.comp-hero--ride-sans-photo .comp-hero-inner { padding-top: calc(var(--ride-tick) + var(--ride-head, 67px) + 300px - 70px); }
  body.its-menu-ride .comp-hero--ride-sans-photo .arch-hero__aside-wrap.ride-maillot-wrap { height: 220px; }
  body.its-menu-ride .comp-hero--ride-sans-photo .ride-maillot { width: clamp(90px, 24vw, 120px); }
  body.its-menu-ride .comp-hero.comp-hero--ride-sans-photo .comp-photo-credit { bottom: 82px; }
}
/* Fiche joueur RIDE, mobile : menu illisible sur une photo claire (Félix 07/11, Pimienta). Bandeau teal translucide et
   flouté, comme à l ordinateur, sous les icônes. */
@media (max-width: 900px) {
  body.its-menu-ride:has(.comp-hero--ride) .site-header.site-header--v3:not(.menu-open) { background: rgba(28, 61, 52, .6); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
}

/* ═══ Espaces membres en RIDE (Félix 07/11 : garder la colonne, la restyler) ═══
   Colonne teal gardée ; rubriques au style des sur-titres (capitales espacées + trait vanille), liens vanille atténués
   pleins au survol, rubrique active = trait vanille à gauche (plus de bloc plus clair).
   Ordinateur seulement : sur téléphone, la navigation passe par la barre d onglets de l app. */
@media (min-width: 881px) {
  body.its-menu-ride .rz-page-body .its-account-layout .its-account-nav { padding: 18px 0 14px; } /* ni collante ni barre de défilement propre (Félix 07/11) */
  body.its-menu-ride .rz-page-body .its-account-layout .its-account-nav .its-account-nav-sep { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 16px 18px 8px; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #F2E5D2; }
  body.its-menu-ride .rz-page-body .its-account-layout .its-account-nav .its-account-nav-sep::before { content: ""; flex: 0 0 20px; height: 2px; background: #F2E5D2; }
  body.its-menu-ride .its-account-layout .its-account-nav .its-account-nav-item:not(#its-z) { padding: 9px 18px; border-left: 3px solid transparent; color: rgba(242, 229, 210, .82); font-weight: 600; }
  body.its-menu-ride .its-account-layout .its-account-nav .its-account-nav-item:not(#its-z):hover,
  body.its-menu-ride .its-account-layout .its-account-nav .its-account-nav-item:not(#its-z):focus-visible { background: none; color: #F2E5D2; }
  body.its-menu-ride .its-account-layout .its-account-nav .its-account-nav-item.active:not(#its-z) { background: none; border-left-color: #F2E5D2; color: #F2E5D2; font-weight: 800; }
  body.its-menu-ride .its-account-layout .its-account-nav > .its-account-nav-item:not(#its-z) { color: #F2E5D2; font-weight: 800; }
  body.its-menu-ride .its-account-layout .its-account-nav .its-account-nav-logout:not(#its-z) { margin: 0 18px; border-color: rgba(242, 229, 210, .45); }
}
/* Bouton du haut de page en LIEN (landings « Devenir membre », Félix 07/11) : « .its-v2 a[class]:not(…) { color: inherit } »
   le mettait vanille sur vanille (bouton vide). :not(#its-z) = poids d un id, sans !important. */
body.its-menu-ride a.arch-hero__btn:not(#its-z),
body.its-menu-ride a.arch-hero__btn:not(#its-z):visited { color: #1C3D34; text-decoration: none; }

/* ═══ Félix 07/11 : « je déteste le survol des lignes qui change de couleur, les bordures grises sur les tableaux » ═══
   1) Filets : la couleur commune --border (#C4C4C4, gris neutre) et le gris en dur des classements passent en vanille
      foncé, dans la palette. 2) Survol : plus aucun changement de fond ni d ombre sur les cartes de match et les lignes
      de tableaux / listes ; la carte reste cliquable (curseur). */
body.its-menu-ride { --border: #D8C9B0; --itsclt-hover: transparent; }
body.its-menu-ride .itsclt-table th,
body.its-menu-ride .itsclt-table td { border-color: #D8C9B0; }
body.its-menu-ride.its-fiche-d:not(#its-fd-a) #sec-matchs .match-card:hover { background: transparent; box-shadow: none; border-color: rgba(28, 61, 52, .12); }
body.its-menu-ride :is(.itsclt-table, .article-body table, .cls-table, .rk-table, .its-table, .period-table, .ps-table, .its-aide-table, .rz-table) tbody tr:hover td,
body.its-menu-ride :is(.cls-table, .rk-table, .its-table, .period-table, .ps-table) tr:hover td { background: transparent; }
body.its-menu-ride :is(.match-row, .tl-row, .p-row, .ins-row):hover,
body.its-menu-ride #sec-fil .tl-row:hover { background: transparent; }
body.its-menu-ride .its-repeater tbody tr:hover { background: transparent; color: inherit; }

/* ═══ Tableaux en RIDE (Félix 07/11 : « le style des tableaux fait vieux » ; 08/11 : « une harmonie entre tous les tableaux du site »)
   — UN module pour tous les tableaux (.data-table, transferts, classements, stats de match, espaces, articles, aide), ordinateur ═══
   Plus de bandeau teal plein ni de bloc blanc : en-tête en petites capitales teal sur un trait teal, lignes posées sur la
   vanille avec un filet teal léger, chiffres alignés, plus de colonne grisée. :not(#its-z) = poids d un id (les règles des
   fiches sont en body.its-fiche-d …), sans !important. Téléphone : la présentation en cartes reste. */
@media (min-width: 681px) {
  body.its-menu-ride :is(.data-table, .transfer-table, .rk-table, .ps-table, .period-table, .its-table, .itsclt-table, .its-aide-table, .rz-table, .article-body table):not(#its-z) { border: 0; background: #fff; border-collapse: collapse; } /* surface blanche : sur la vanille le tableau ne se détachait pas (Félix 08/11) */
  body.its-menu-ride :is(.data-table, .transfer-table, .rk-table, .ps-table, .period-table, .its-table, .itsclt-table, .its-aide-table, .rz-table, .article-body table):not(#its-z) thead th { padding: 10px 14px; background: transparent; color: #1C3D34; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; border: 0; border-bottom: 2px solid #1C3D34; }
  body.its-menu-ride :is(.data-table, .transfer-table, .rk-table, .ps-table, .period-table, .its-table, .itsclt-table, .its-aide-table, .rz-table, .article-body table):not(#its-z) tbody tr { background: transparent; }
  body.its-menu-ride :is(.data-table, .transfer-table, .rk-table, .ps-table, .period-table, .its-table, .itsclt-table, .its-aide-table, .rz-table, .article-body table):not(#its-z) tbody td { padding-top: 14px; padding-bottom: 14px; background: transparent; border-bottom: 1px solid rgba(28, 61, 52, .12); font-variant-numeric: tabular-nums; }
  body.its-menu-ride :is(.data-table, .transfer-table, .rk-table, .ps-table, .period-table, .its-table, .itsclt-table, .its-aide-table, .rz-table, .article-body table):not(#its-z) tbody tr:last-child td { border-bottom-color: rgba(28, 61, 52, .25); }
  /* Lisibilité (Félix 08/11 « c est pas lisible ») : intitulés 11 -> 12 px, lignes 15 px, chiffres secondaires en teal
     (le gris --muted passait mal sur la vanille), une ligne sur deux très légèrement teintée, ligne de saison sur fond
     teal léger, total séparé d un trait teal. */
  body.its-menu-ride :is(.data-table, .transfer-table, .rk-table, .ps-table, .period-table, .its-table, .itsclt-table, .its-aide-table, .rz-table, .article-body table):not(#its-z) thead th { font-size: 12px; letter-spacing: .08em; background: #1C3D34; color: #F2E5D2; border-bottom: 0; } /* teal = notre couleur : bandeau d en-tête teal plein, texte vanille (Félix 08/11) */
  body.its-menu-ride :is(.data-table, .transfer-table, .rk-table, .ps-table, .period-table, .its-table, .itsclt-table, .its-aide-table, .rz-table, .article-body table):not(#its-z) tbody td { font-size: 15px; color: #1C3D34; }
  body.its-menu-ride :is(.data-table, .transfer-table, .rk-table, .ps-table, .period-table, .its-table, .itsclt-table, .its-aide-table, .rz-table, .article-body table):not(#its-z) tbody td[data-label="CJ"],
  body.its-menu-ride :is(.data-table, .transfer-table, .rk-table, .ps-table, .period-table, .its-table, .itsclt-table, .its-aide-table, .rz-table, .article-body table):not(#its-z) tbody td[data-label="CO"],
  body.its-menu-ride :is(.data-table, .transfer-table, .rk-table, .ps-table, .period-table, .its-table, .itsclt-table, .its-aide-table, .rz-table, .article-body table):not(#its-z) tbody td[data-label="CR"] { color: rgba(28, 61, 52, .75); }
  body.its-menu-ride :is(.data-table, .transfer-table, .rk-table, .ps-table, .period-table, .its-table, .itsclt-table, .its-aide-table, .rz-table, .article-body table):not(#its-z) tbody tr:not(.section-row):not(.total-row):nth-child(even) td { background: rgba(28, 61, 52, .03); }
  body.its-menu-ride :is(.data-table, .transfer-table, .rk-table, .ps-table, .period-table, .its-table, .itsclt-table, .its-aide-table, .rz-table, .article-body table):not(#its-z) tbody tr.section-row td { padding-top: 10px; padding-bottom: 10px; background: rgba(28, 61, 52, .08); font-size: 13px; font-weight: 800; }
  body.its-menu-ride :is(.data-table, .transfer-table, .rk-table, .ps-table, .period-table, .its-table, .itsclt-table, .its-aide-table, .rz-table, .article-body table):not(#its-z) tbody tr.total-row td { border-top: 2px solid #1C3D34; font-weight: 800; }
}

/* Listes de matchs en RIDE : cartes blanches comme les tableaux (surface qui se détache de la vanille), filet teal léger
   entre les lignes, pas de bordure grise ni de survol (Félix 08/11). */
body.its-menu-ride .match-card,
body.its-menu-ride .match-card:hover,
body.its-menu-ride.its-fiche-d:not(#its-fd-a) #sec-matchs .match-card,
body.its-menu-ride.its-fiche-d:not(#its-fd-a) #sec-matchs .match-card:hover { background: #fff; box-shadow: none; border: 0; border-bottom: 1px solid rgba(28, 61, 52, .12); }
body.its-menu-ride .match-card + .match-card { margin-top: 0; }
body.its-menu-ride .match-date { border-right-color: rgba(28, 61, 52, .12); }
/* Ligne de l équipe de la fiche dans un classement (tr.hl) : le beige plein + tout en gras faisait « moche » (Félix 08/11).
   Fond teal très léger, trait teal à gauche, gras sur le nom seulement. Deux ids dans le sélecteur : la règle d origine
   (body.its-fiche-d.single-team #sec-classement tr.hl td) en porte un. */
body.its-menu-ride.its-fiche-d #sec-classement tr.hl td:not(#its-z),
body.its-menu-ride .rk-table tr.hl td:not(#its-z) { background: rgba(28, 61, 52, .07); font-weight: 500; }
body.its-menu-ride.its-fiche-d #sec-classement tr.hl td:not(#its-z):first-child,
body.its-menu-ride .rk-table tr.hl td:not(#its-z):first-child { box-shadow: inset 3px 0 0 #1C3D34; }
body.its-menu-ride.its-fiche-d #sec-classement tr.hl td:not(#its-z) :is(a, strong, .cls-team-name),
body.its-menu-ride.its-fiche-d #sec-classement tr.hl td:not(#its-z):nth-child(2) { font-weight: 800; }

/* Article, bloc « Dans cet article » (cartes de fiches) en RIDE (Félix 08/11 : « bordure pas collée, pas le même design ») :
   plus de cadre blanc avec marge intérieure autour des cartes ; bandeau titre teal puis cartes collées dessous, séparées
   par un simple espace, sans bordure beige ni ombre au survol. Seulement les blocs qui contiennent des cartes de fiches. */
body.its-menu-ride .sidebar-box:has(.entity-player-card, .entity-match-card, .its-fiche-card-h) { padding: 0; border: 0; background: transparent; }
body.its-menu-ride .sidebar-box:has(.entity-player-card, .entity-match-card, .its-fiche-card-h) > .sidebar-box-title { margin: 0; border-bottom: 0; }
body.its-menu-ride .sidebar-box :is(.entity-player-card, .entity-match-card, .its-fiche-card-h) { margin: 0 0 12px; border: 0; box-shadow: none; }
body.its-menu-ride .sidebar-box :is(.entity-player-card, .entity-match-card, .its-fiche-card-h):hover { box-shadow: none; }
body.its-menu-ride .sidebar-box .entity-player-card :is(.entity-player-stat, .entity-player-cta) { border-color: rgba(28, 61, 52, .12); }
/* Blocs de colonne d article (« En bref »…) en RIDE (Félix 08/11 « pareil ») : plus de bordure beige ; marge intérieure
   portée par les liens, pas par le bloc, pour que les filets traversent toute la largeur ; filets teal légers. */
body.its-menu-ride .sidebar-box:not(:has(.entity-player-card, .entity-match-card, .its-fiche-card-h)) { padding: 0; border: 0; }
body.its-menu-ride .sidebar-box:not(:has(.entity-player-card, .entity-match-card, .its-fiche-card-h)) > .sidebar-box-title { margin: 0; border-bottom: 0; }
body.its-menu-ride .sidebar-box .sidebar-link:not(#its-z),
body.its-menu-ride .sidebar-box .sidebar-link:not(#its-z):first-child,
body.its-menu-ride .sidebar-box .sidebar-link:not(#its-z):last-child { margin-left: 0; margin-right: 0; padding: 14px 16px; border-bottom: 1px solid rgba(28, 61, 52, .12); }
body.its-menu-ride .sidebar-box .sidebar-link:not(#its-z):last-child { border-bottom: 0; }
/* Cartes de fiches dans un article (Félix 08/11 : la bande vanille de la saison « fait chelou, on dirait que c est coupé »,
   « police trop petite ») : saison sur fond blanc avec un filet teal léger, textes agrandis (saison 13 px, libellés 12 px,
   lien 14 px). :not(#its-z) : passe devant les règles body.single-post … du commun. */
body.its-menu-ride .entity-player-card .entity-player-season:not(#its-z) { background: #fff; border: 0; border-top: 1px solid rgba(28, 61, 52, .12); color: #1C3D34; font-size: 13px; font-weight: 800; }
body.its-menu-ride .entity-player-card .entity-player-stat-lbl:not(#its-z) { font-size: 12px; color: rgba(28, 61, 52, .8); }
body.its-menu-ride .entity-player-card .entity-player-cta:not(#its-z) { font-size: 14px; }
body.its-menu-ride .entity-player-card .entity-player-stat:not(#its-z) { border-color: rgba(28, 61, 52, .12); }
body.its-menu-ride .entity-player-card .entity-player-stats:not(#its-z) { background: rgba(28, 61, 52, .12); } /* filets entre les chiffres en teal léger, plus en beige */
body.its-menu-ride .entity-player-card .entity-player-cta:not(#its-z) { border-top-color: rgba(28, 61, 52, .12); }
/* Article : carte joueur sans photo = maillot (Félix 08/11) ; étiquettes Équipe / Compétition au module commun : lignes
   blanches avec logo, filets teal légers, nom 15 px, type en petit libellé teal à droite (plus de pastille sombre ni de
   bloc beige). */
body.its-menu-ride .entity-player-photo.entity-player-photo--maillot { background: none; }
body.its-menu-ride .entity-player-photo--maillot .arch-stats-mail,
body.its-menu-ride .entity-player-photo--maillot svg { display: block; width: 52px; height: auto; }
body.its-menu-ride .entity-chips--meta { display: flex; flex-direction: column; gap: 12px; background: none; border: 0; } /* 4 cartes séparées, plus de trait (Félix 08/11) */
body.its-menu-ride .entity-chips--meta .entity-chip,
body.its-menu-ride .entity-chips--meta .entity-chip:hover { margin: 0; gap: 12px; padding: 14px 16px; background: #fff; border: 0; }
body.its-menu-ride .entity-chip-logo { display: inline-flex; flex: 0 0 28px; width: 28px; height: 28px; }
body.its-menu-ride .entity-chip-logo picture { display: contents; }
body.its-menu-ride .entity-chip-logo img { width: 100%; height: 100%; object-fit: contain; }
body.its-menu-ride .entity-chips--meta .entity-chip-name { font-size: 15px; font-weight: 800; }
body.its-menu-ride .entity-chips--meta .entity-chip-type { order: 3; margin-left: auto; padding: 0; background: none; color: rgba(28, 61, 52, .75); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
body.its-menu-ride .entity-player-card .entity-player-season:not(#its-z) { padding: 10px 14px; border-bottom: 1px solid rgba(28, 61, 52, .12); } /* saison séparée des chiffres (Félix 08/11) */
/* Carte joueur d article : logo du club actuel à droite de l en-tête (carré vanille, règle des logos à fond plein). */
body.its-menu-ride .entity-player-card .entity-player-header { display: flex; align-items: center; }
body.its-menu-ride .entity-player-club { display: inline-flex; flex: 0 0 48px; width: 48px; height: 48px; margin-left: auto; padding: 5px; box-sizing: border-box; background: #F2E5D2; }
body.its-menu-ride .entity-player-club picture { display: contents; }
body.its-menu-ride .entity-player-club img { width: 100%; height: 100%; object-fit: contain; }
/* Carte joueur d article, 2e passe (Félix 08/11) : plus de logo de club à droite ; la saison s y place (gagne une ligne). */
body.its-menu-ride .entity-player-season-r { margin-left: auto; align-self: flex-start; color: #F2E5D2; font-size: 12px; font-weight: 800; white-space: nowrap; }
body.its-menu-ride .entity-player-card .entity-player-team { color: #F2E5D2; font-size: 12px; }
/* Titres de la colonne d article (« Dans cet article », « En bref »…) : le bandeau teal se collait à l en-tête teal de la
   1re carte et semblait en faire partie (Félix 08/11 « chelou »). Sur-titre teal sur la vanille, petites capitales et trait,
   comme les sur-titres du site. :not(#its-z) : passe devant body.single-post .sidebar-box .sidebar-box-title du commun. */
body.its-menu-ride .sidebar-box > .sidebar-box-title:not(#its-z) { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 0; background: none; border: 0; color: #1C3D34; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
body.its-menu-ride .sidebar-box > .sidebar-box-title:not(#its-z)::before { content: ""; flex: 0 0 24px; height: 2px; background: #1C3D34; }
body.its-menu-ride .sidebar-box:not(:has(.entity-player-card, .entity-match-card, .its-fiche-card-h)) { background: transparent; }
body.its-menu-ride .sidebar-box:not(:has(.entity-player-card, .entity-match-card, .its-fiche-card-h)) .sidebar-link:not(#its-z) { background: #fff; }
body.its-menu-ride .entity-player-card .entity-player-header > div:not([class]) { flex: 1 1 auto; min-width: 0; } /* la saison à droite ne déborde plus (Yogane, 08/11) */
body.its-menu-ride .entity-chips--players + .entity-chips--meta { margin-top: 12px; padding-top: 0; border-top: 0; }
/* Double maillot (club | sélection) des internationaux du moment dans les cartes d article, comme le trombinoscope. */
body.its-menu-ride .entity-player-photo .ride-mail-duo { position: relative; display: block; width: 52px; }
body.its-menu-ride .entity-player-photo .ride-mail-duo > span { display: block; }
body.its-menu-ride .entity-player-photo .ride-mail-duo svg { display: block; width: 100%; height: auto; }
body.its-menu-ride .entity-player-photo .ride-mail-duo .ride-mail-b { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
body.its-menu-ride .entity-player-season-r { flex: none; white-space: nowrap; text-align: right; line-height: 1.3; } /* saison toujours sur une ligne (Félix 08/11) ; c est la colonne du nom qui se resserre */
body.its-menu-ride .entity-player-sel { white-space: nowrap; }
/* Colonne d article : « Dans cet article » avant « En bref », ordinateur comme mobile (Félix 08/11). */
body.its-menu-ride .article-sidebar > .sidebar-box:has(.entity-player-card, .entity-match-card, .its-fiche-card-h, .entity-chip) { order: -1; }
/* Haut d article sur mobile (Félix 08/11 : « dommage de perdre la photo derrière le fond vert ») : comme la fiche joueur,
   photo nette en haut sans voile, fondu vers le teal en bas de la photo ; sur-titre, titre et chapô arrivent sur le fondu
   puis sur le teal plein. */
@media (max-width: 760px) {
  body.its-menu-ride .art-hero:not(#its-z) { min-height: 0; }
  body.its-menu-ride .art-hero:not(#its-z) .art-hero__media { bottom: auto; height: min(56svh, 420px); }
  body.its-menu-ride .art-hero:not(#its-z) .art-hero__media img { height: 100%; object-fit: cover; filter: none; }
  body.its-menu-ride .art-hero:not(#its-z) .art-hero__shade { bottom: auto; height: min(56svh, 420px); background: linear-gradient(to bottom, rgba(28, 61, 52, .35) 0, rgba(28, 61, 52, 0) 20%, rgba(28, 61, 52, 0) 52%, rgba(28, 61, 52, .9) 86%, #1C3D34 100%); }
  body.its-menu-ride .art-hero:not(#its-z) .art-hero__head { padding-top: calc(min(56svh, 420px) - 110px); }
}
/* Boutons « ‹ » et « Suivant » posés sur la photo nette (Félix 08/11 : « on voit plus les boutons ») : fond teal translucide comme le bandeau du menu. */
@media (max-width: 760px) {
  body.its-menu-ride .art-hero:not(#its-z) :is(.bc-cat, .bc-next) { background: rgba(28, 61, 52, .72); border-color: transparent; color: #F2E5D2; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}
/* Auteur + date sur une seule ligne, ordinateur et mobile (Félix 08/11) : texte en ligne, qui ne passe à la ligne que faute de place. */
body.its-menu-ride .art-lede__who:not(#its-z) { display: block; }
body.its-menu-ride .art-lede__who:not(#its-z) .art-lede__author + .art-lede__when::before { content: "·"; margin: 0 6px; }
/* Mobile : pour tenir sur une ligne jusqu à 360 px, carré d initiales retiré (décoratif, aria-hidden) et police réduite d un point. */
@media (max-width: 760px) {
  body.its-menu-ride .art-lede__meta:not(#its-z) .art-lede__avatar { display: none; }
  body.its-menu-ride .art-lede__who:not(#its-z) { font-size: 12px; }
  body.its-menu-ride .art-lede__who:not(#its-z) .art-lede__author { font-size: 13px; }
  body.its-menu-ride .art-lede__who:not(#its-z) .art-lede__author + .art-lede__when::before { margin: 0 5px; }
}
/* Ligne auteur + date centrée en hauteur sur le carré d initiales (Félix 08/11). */
body.its-menu-ride .art-lede__meta:not(#its-z) { align-items: center; }
/* ═══ Haut des pages listes sur mobile (Félix 08/11, essai A retenu) : photo nette en transparence derrière tout le haut
   (titre, phrase, Rechercher, colonne « Matchs du jour » / « Dans l actu »), voile teal qui fonce vers le bas ; chiffres retirés,
   phrase entière, titre de colonne masqué à l écran. Ordinateur inchangé. ═══ */
@media (max-width: 760px) {
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto):not(#its-z) .arch-hero__media img { filter: none; height: 100%; object-fit: cover; }
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto):not(#its-z) .arch-hero__media,
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto):not(#its-z) .arch-hero__shade { top: 0; bottom: 0; height: auto; }
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto):not(#its-z) .arch-hero__shade { background: linear-gradient(to bottom, rgba(28, 61, 52, .45) 0, rgba(28, 61, 52, .72) 30%, rgba(28, 61, 52, .86) 60%, rgba(28, 61, 52, .92) 100%); }
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto):not(#its-z) .arch-hero__head { padding-top: 120px; padding-bottom: 0; }
  /* Ombre sur le titre et la phrase seulement : jamais sur les boutons vanille (Félix 08/11 « ombre dégueu »). */
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto):not(#its-z) :is(.arch-hero__title, .arch-hero__desc) { text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
  /* Phrase entière (Félix 08/11 : « cut pas la phrase ») : annule la coupe à 2 lignes d itsrugby-archive-hero.css. */
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto):not(#its-z) .arch-hero__desc { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; margin-bottom: 12px; font-size: 15px; font-weight: 600; line-height: 1.4; }
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto):not(#its-z) .arch-hero__infos { display: none; } /* chiffres : place pour le texte, gardés sur ordinateur */
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto):not(#its-z) .arch-hero__back { background: rgba(28, 61, 52, .72); border-color: transparent; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  /* La colonne revient sous Rechercher (Félix 08/11 : « on perd des infos »), titre lu par les lecteurs d écran seulement. */
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto):not(#its-z) .arch-hero__aside-wrap { display: block; position: relative; z-index: 1; padding: 4px 0 28px; }
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto):not(#its-z) .mdj { color: #F2E5D2; }
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto):not(#its-z) .mdj .mdj-titre { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  body.its-menu-ride .arch-hero:not(.arch-hero--nophoto):not(#its-z) .mdj-liste a { padding-left: 0; border-left: 0; }
}
/* Fiches bar en RIDE, mobile : le bloc gardait 24 px de marge intérieure, texte décalé par rapport aux autres fiches (Félix 08/11). */
@media (max-width: 900px) {
  body.its-menu-ride .comp-hero.bar-hero.comp-hero--ride { padding-left: 0; padding-right: 0; }
}
/* Pages légales en RIDE : texte à la largeur du site, aligné sur le titre du haut de page (Félix 08/11). */
body.its-menu-ride .its-page-article.its-page-article--legal { max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
/* Méga-menus : les articles « En bref » héritaient des cartes blanches de la colonne d article, texte vanille sur blanc
   illisible (Félix 08/11). Dans le menu, pas de carte : fond teal du panneau. */
body.its-menu-ride .nav-mega-panel .sidebar-box .sidebar-link:not(#its-z) { background: transparent; }