/* Header réseau TR (bandeau VIP, barre de tuiles, édito).
   Varnish ignore le paramètre ?ver= sur les statiques : à chaque modification,
   créer un nouveau fichier (-v2, -v3…) et changer son nom dans header.php. */

.rx-vip,.rx-reseau,.rx-edito,.rx-cta-seul{
  --rx-vip-bg:#F97316;--rx-vip-txt:#FFFFFF;
  --rx-edito-bg:#91D888;--rx-edito-titre:#4A2A14;--rx-edito-txt:#3A2A1E;
  --rx-cta-bg:#C2410C;--rx-cta-txt:#FFFFFF;
  --rx-reseau-bg:#FFFAF3;--rx-ligne:#EEE7DD;
}
/* Bandeau VIP : une seule ligne sur mobile */
.rx-vip{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 12px;background:var(--rx-vip-bg);color:var(--rx-vip-txt);font-weight:800;font-size:13px;line-height:1.2;white-space:nowrap;text-decoration:none;transition:all .3s ease}
.rx-vip:hover,.rx-vip:visited{color:var(--rx-vip-txt)}
.rx-vip svg{flex:0 0 auto}
.rx-vip .fin{font-weight:400}
/* Header milieu */
.site-header .header-mid-area{padding:0}
.site-header .header-mid-area>.column{min-height:56px}
.site-header .logo-area{display:flex;align-items:center;justify-content:center}
.site-header .logo-area img{height:30px;width:auto;display:block;margin:0 auto}
/* Barre réseau : 4 tuiles égales, sans défilement */
.rx-reseau{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:10px 12px;border-top:1px solid var(--rx-ligne);border-bottom:1px solid var(--rx-ligne);background:var(--rx-reseau-bg);transition:all .3s ease}
.rx-reseau a{display:block;border-radius:12px;overflow:hidden;line-height:0;transition:transform .15s}
.rx-reseau a:active{transform:scale(.96)}
.rx-reseau a:focus-visible{outline:3px solid #1D4ED8;outline-offset:2px}
.rx-reseau img{width:100%;height:auto;aspect-ratio:86/52;display:block}
/* Édito (home) */
.rx-edito{display:flex;flex-direction:column;gap:10px;padding:14px 16px;background:var(--rx-edito-bg);text-align:center}
.rx-edito h2{margin:0;font-size:15px;line-height:1.45;font-weight:700;color:var(--rx-edito-titre)}
.rx-edito p{margin:0;font-size:13px;line-height:1.45;color:var(--rx-edito-txt)}
.rx-cta,.rx-cta:hover,.rx-cta:visited{color:var(--rx-cta-txt)}
.rx-cta{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:23px;background:var(--rx-cta-bg);font-weight:800;font-size:15px;text-decoration:none;box-shadow:0 4px 12px rgba(194,65,12,.25)}
/* Bouton seul (pages d'articles) */
.rx-cta-seul{display:flex;justify-content:center;padding:8px 12px;background:var(--rx-edito-bg)}
.rx-cta-seul .rx-cta{height:36px;border-radius:18px;padding:0 24px;font-size:13px;box-shadow:none}
/* Vedette VIP sous l'édito */
.rx-vedette .column{justify-content:center}
.rx-vedette .banner-right-area{width:100%;justify-content:center;padding:12px 0}
.rx-vedette .max-width-470{width:100%}
/* Petit écran : le bandeau VIP reste sur une ligne */
@media (max-width:374px){
  .rx-vip{font-size:11.5px;padding:9px 6px;gap:4px}
}
/* Ordinateur */
@media (min-width:768px){
  .rx-vip{font-size:20px;padding:14px 16px}
  .site-header .header-mid-area>.column{min-height:76px}
  .site-header .logo-area img{height:35px} /* logo source 163×32 : au-delà, déformé ou flou */
  .rx-reseau{grid-template-columns:repeat(4,150px);justify-content:center;gap:16px;padding:14px 24px}
  .rx-edito{flex-direction:row;align-items:center;justify-content:center;gap:28px;padding:22px 40px;text-align:left}
  .rx-edito-texte{max-width:520px}
  .rx-edito p{font-size:15px}
  .rx-edito h2{font-size:22px}
  .rx-edito-actions{flex:0 0 300px}
  .rx-edito .rx-cta{height:52px;border-radius:26px;font-size:16px}
  .rx-vedette .max-width-470{max-width:340px}
}
/* Header compressé (remontée de page) */
.site-header.header-scrolled .header-mid-area{padding:0}
.site-header.header-scrolled .header-mid-area>.column{min-height:44px}
.site-header.header-scrolled .logo-area img{height:28px}
.site-header.header-scrolled .rx-vip{padding:4px 12px;font-size:12px}
.site-header.header-scrolled .rx-reseau{grid-template-columns:repeat(4,64px);justify-content:center;gap:8px;padding:4px 12px}
.site-header.header-scrolled .rx-reseau a{border-radius:7px}
@media (min-width:768px){
  .site-header.header-scrolled .rx-vip{padding:6px 16px;font-size:15px}
  .site-header.header-scrolled .rx-reseau{grid-template-columns:repeat(4,90px);gap:12px}
}
/* Éléments réservés au PC */
.rx-reseau a.rx-ts,.site-header .connexion-area a.rx-video-ico,.rx-etapes{display:none}
.rx-reseau picture{display:block}
/* PC : logos en pastilles, édito et vedette côte à côte */
@media (min-width:1025px){
  .site-header .connexion-area{gap:12px}
  .site-header .connexion-area a.rx-video-ico{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;background:#FFF3E6;border:1px solid #F8D9BD;color:#E8590C}
  .site-header .connexion-area>a:not(.rx-video-ico):not(.mobil-show){display:flex;align-items:center;height:44px;padding:0 20px;border-radius:22px;font-size:16px}
  .site-header.header-scrolled .connexion-area a.rx-video-ico{width:34px;height:34px}
  .site-header.header-scrolled .connexion-area>a:not(.rx-video-ico):not(.mobil-show){height:34px;padding:0 14px;border-radius:17px;font-size:13px}

  .rx-reseau{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 24px}
  .rx-reseau a,.rx-reseau a.rx-ts{position:relative;display:flex;align-items:center;justify-content:center;height:50px;padding:0 20px;background:#fff;border:1px solid var(--rx-ligne);border-radius:25px;overflow:visible}
  .rx-reseau a:hover{transform:translateY(-1px)}
  .rx-reseau picture{display:flex}
  .rx-reseau img{width:auto;height:24px;aspect-ratio:auto;max-width:none}
  /* Logo WeshPorn sur deux lignes : plus haut pour rester lisible */
  .rx-reseau img[alt="WeshPorn"]{height:40px}
  .rx-nouveau{position:absolute;top:-9px;right:-2px;padding:0 8px;border-radius:9px;background:#C2410C;color:#fff;font-size:11px;font-weight:700;line-height:18px}
  .site-header.header-scrolled .rx-reseau{gap:10px;padding:5px 24px}
  .site-header.header-scrolled .rx-reseau a{height:34px;padding:0 14px;border-radius:17px}
  .site-header.header-scrolled .rx-reseau img{height:17px}
  .site-header.header-scrolled .rx-reseau img[alt="WeshPorn"]{height:28px}
  .site-header.header-scrolled .rx-nouveau{display:none}

  .rx-haut{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  /* Fond sur toute la largeur, contenu aligné sur .column (95 %, 1150 px maximum) */
  .rx-edito{flex-direction:column;align-items:flex-start;justify-content:center;gap:18px;padding:32px 50px 32px max(5%,calc(100% - 575px));text-align:left}
  .rx-edito-texte{max-width:none}
  .rx-edito h2{margin-bottom:12px;font-size:clamp(26px,2.6vw,30px);line-height:1.2;font-weight:800}
  .rx-edito p{font-size:16px}
  .rx-etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;margin:0;padding:0;list-style:none}
  .rx-etapes li{display:flex;align-items:center;gap:10px;margin:0;font-size:15px;font-weight:600;line-height:1.25;color:var(--rx-edito-titre)}
  .rx-etapes span{flex:0 0 40px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:2px solid var(--rx-cta-bg);border-radius:50%;background:#fff;color:var(--rx-cta-bg);font-weight:800}
  .rx-edito-actions{flex:none;display:flex;align-items:center;gap:18px}
  .rx-edito .rx-cta{width:300px}

  .rx-vedette{display:flex;align-items:center}
  .rx-vedette .column{width:100%;max-width:none;justify-content:flex-end;padding:0 max(5%,calc(100% - 575px)) 0 0}
  .rx-vedette .banner-right-area{justify-content:flex-end;padding:28px 0}
  .rx-vedette .max-width-470{max-width:470px}
  .rx-cta-seul{display:none}
}
@media (min-width:1025px) and (max-width:1199px){
  .rx-reseau a,.rx-reseau a.rx-ts{padding:0 14px}
  .rx-edito{padding-right:32px}
  .rx-edito .rx-cta{width:250px}
}

/* Menu : annule la règle ".site-header *" de style.css (will-change/perspective),
   qui faisait de chaque <li> le conteneur des .sub-menu en absolute (menu cassé). */
.site-header *{will-change:auto;-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-perspective:none;perspective:none}
/* Mobile : sous-menus ouverts au toucher (classe .open posée dans header.php), pas au survol */
@media (max-width:767px){
  ul#primary-menu > li:hover > ul.sub-menu{opacity:0;visibility:hidden}
  ul#primary-menu > li.open > ul.sub-menu{opacity:1;visibility:visible}
  ul#primary-menu > li.open > a{text-decoration:underline;font-weight:700}
}

/* Couleurs propres à TR */
.rx-edito{--rx-cta-bg:#166534} /* bouton et étapes accordés à l'édito vert */
.rx-edito .rx-cta{box-shadow:0 4px 12px rgba(22,101,52,.25)}
.rx-cta-seul{background:#FFFBE4} /* même fond que le bloc description du player */

/* Lien photos de l'édito : PC seulement */
.rx-photos{display:none}
@media (min-width:1025px){
  .rx-photos{display:inline;font-size:15px;color:var(--rx-edito-txt)}
  .rx-photos a,.rx-photos a:visited{color:#14532D;text-decoration:underline}
}
@media (min-width:1025px) and (max-width:1199px){
  .rx-photos{font-size:14px}
}

/* Membre connecté (PC) : menu sur une seule ligne à côté de la caméra */
@media (min-width:1025px){
  .site-header .connexion-area a.rx-video-ico{flex:0 0 auto}
  .site-header .login-user-menu{flex:0 0 auto;white-space:nowrap}
}
/* Pseudo limité : avec la caméra, un nom long toucherait le logo */
.rx-pseudo{display:inline-block;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
@media (max-width:1199px){
  .rx-pseudo{max-width:60px}
}