/* ==========================================================================
   Pages carrefour (« hub »), d'après la créa « valorant-hub » du 30/07/2026.
   Complète agent.css et listing.css : le hero, le fil d'Ariane, l'accordéon
   FAQ et les animations viennent de là et ne sont pas redéfinis ici.

   L'accent suit la palette de la page (corail par défaut, voir agent.css).
   Les couleurs de rôles ne sont PAS écrites en dur : chaque carte de rôle
   reçoit la couleur de son rôle depuis la base, via la variable --rc.
   ========================================================================== */

:root {
  /* Couleurs de repérage des rubriques, propres à la créa du hub. */
  --c-debuter: #4cc9b0;
  --c-agents: #e8637e;
  --c-armes: #e6b44d;
  --c-maps: #5c8ee6;
  --c-setup: #b44ddf;
  --c-lore: #7c5cbf;
}

/* Pastille de couleur des repères du hero : listing.css habille la pastille
   et ses libellés, mais pas ce point de couleur, propre au carrefour. */
.role-pill .pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ===== ROUTAGE HAUT DE PAGE ===== */
.routes { background: var(--white); border-bottom: 1px solid #eee; }
.routes-inner { max-width: 1200px; margin: 0 auto; padding: 28px 40px; }
.routes-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }

.route {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 16px;
  background: var(--bg);
  border: 1px solid #eee;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
}
.route::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--rt, var(--agent-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}
a.route:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.06); background: var(--white); border-color: transparent; }
a.route:hover::before { transform: scaleX(1); }
/* Visuels de la planche du client : hauteur commune, largeur libre. L'essai
   d'un calage sur la largeur a été annulé (30/07), le rendu était moins bon. */
.route .rt-ico { display: block; height: 56px; }
.route .rt-ico img { height: 100%; width: auto; display: block; }
.route .rt-titre { font-size: 0.86rem; font-weight: 700; color: var(--dark); }
.route p { font-size: 0.68rem; color: var(--text-light); line-height: 1.45; }

/* ===== SECTIONS DE CONTENU ===== */
.sec { max-width: 1200px; margin: 0 auto; padding: 48px 40px; }
.sec.tight { padding-top: 0; }
.sec-head { margin-bottom: 24px; }
.sec-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--agent-accent);
  margin-bottom: 8px;
}
.sec h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.75rem;
  color: var(--dark);
  letter-spacing: 1px;
  line-height: 1.08;
  margin-bottom: 12px;
}
.sec h2 em { color: var(--agent-accent); font-style: normal; }
.sec-intro { font-size: 0.9rem; color: var(--text-light); line-height: 1.8; max-width: 840px; }
.sec-intro strong { color: var(--text); font-weight: 600; }
.sec p.body { font-size: 0.88rem; color: var(--text-light); line-height: 1.85; max-width: 840px; margin-bottom: 14px; }
.sec p.body strong { color: var(--text); font-weight: 600; }
.sec a.inline { color: var(--agent-accent-dark); text-decoration: none; border-bottom: 1px solid var(--agent-accent-light); }
.sec a.inline:hover { border-bottom-color: var(--agent-accent-dark); }

/* ===== PARCOURS PAR INTENTION ===== */
.paths {
  background: linear-gradient(135deg, var(--agent-gradient-start, #12091e), var(--agent-gradient-end, #1e0e2e));
  position: relative;
  overflow: hidden;
}
.paths::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 22% 40%, var(--agent-glow, rgba(232,99,126,0.15)) 0%, transparent 58%),
    radial-gradient(ellipse at 80% 65%, rgba(124,92,191,0.12) 0%, transparent 52%);
  pointer-events: none;
}
.paths-inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 48px 40px; }
.paths-inner h2 { color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: 1.75rem; letter-spacing: 1px; margin-bottom: 12px; }
.paths-inner h2 em { color: var(--agent-accent); font-style: normal; }
.paths-inner .sec-intro { color: rgba(255,255,255,0.42); }
.paths-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }

.path { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 26px 24px; transition: all 0.25s; }
.path:hover { background: rgba(255,255,255,0.07); transform: translateY(-4px); }
.path .p-titre { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 6px; }
.path .p-sub { font-size: 0.74rem; color: rgba(255,255,255,0.35); line-height: 1.55; margin-bottom: 16px; }
.path ul { list-style: none; }
.path li { border-top: 1px solid rgba(255,255,255,0.06); }
.path li a, .path li span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  transition: all 0.2s;
}
.path li a:hover { color: #fff; padding-left: 5px; }
.path li a::after { content: '→'; color: rgba(255,255,255,0.2); font-size: 0.8rem; }
.path li a:hover::after { color: var(--agent-accent); }

/* ===== BLOC TEXTE + VISUEL ===== */
.split { display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: start; }
.split.rev { grid-template-columns: 400px 1fr; }
.visual { width: 100%; height: 260px; border-radius: 16px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; }
.visual img { width: 100%; height: 100%; object-fit: cover; }
/* Le gabarit d'attente des visuels (.vlabel, « Affiche Valorant 1280 x 720 »)
   a disparu le 30/07 : le client a fourni ses trois images, les trois cadres
   portent maintenant une vraie <img>. Les dégradés .v-* ci-dessous restent, ils
   servent de fond au cadre pendant le chargement différé. */
.v-game { background: linear-gradient(135deg, #1a0a12 0%, #7a2338 55%, #c23a58 100%); }
.v-agents { background: linear-gradient(135deg, #1a0a12 0%, #4a1c60 55%, #b44ddf 100%); }
.v-maps { background: linear-gradient(135deg, #0a1220 0%, #1d3f78 55%, #3a6cc4 100%); }
.v-armes { background: linear-gradient(135deg, #1a1408 0%, #7a5f18 55%, #c49a3a 100%); }

/* ===== CARTES DE RÔLES (couleur donnée par la base, via --rc) ===== */
.roles-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
.role-c { background: var(--white); border: 1px solid #eee; border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; transition: all 0.28s; display: block; }
a.role-c:hover { transform: translateY(-5px); box-shadow: 0 14px 38px rgba(0,0,0,0.07); border-color: transparent; }
.role-c .rc-top {
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #14141f, var(--rc, var(--agent-accent)));
}
.role-c .rc-top svg { width: 34px; height: 34px; color: rgba(255,255,255,0.92); }
.role-c .rc-body { padding: 16px 18px 18px; }
.role-c .rc-titre { font-size: 0.92rem; font-weight: 700; margin-bottom: 4px; color: var(--rc, var(--agent-accent)); }
.role-c .rc-count { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #bbb; margin-bottom: 8px; }
.role-c p { font-size: 0.76rem; color: var(--text-light); line-height: 1.55; }

/* ===== TABLEAUX ===== */
.table-note { margin-top: 22px; text-align: left; font-size: 0.76rem; color: var(--text-light); font-style: italic; }
.table-note + .table-wrap { margin-top: 10px; }
.table-wrap { border: 1px solid #eee; border-top: 0; border-radius: 16px; overflow: hidden; background: var(--white); margin-top: 22px; }
table.t { width: 100%; border-collapse: collapse; }
table.t thead th {
  background: var(--dark);
  color: rgba(255,255,255,0.85);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: left;
  padding: 14px 22px;
  font-weight: 400;
}
table.t thead th:first-child { color: rgba(255,255,255,0.95); }
table.t tbody tr { border-top: 1px solid #f2f2f2; transition: background 0.2s; }
table.t tbody tr:hover { background: #fdf7f8; }
table.t th[scope="row"] { text-align: left; padding: 14px 22px; font-size: 0.84rem; font-weight: 700; color: var(--dark); }
table.t td { padding: 14px 22px; font-size: 0.81rem; color: var(--text-light); }
table.t td.hi { color: var(--agent-accent-dark); font-weight: 700; }

/* ===== ROTATION DES CARTES ===== */
.maps-pool { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.map-chip { font-size: 0.74rem; font-weight: 700; padding: 7px 14px; border-radius: 8px; background: #e6eefb; color: #3f6fc4; }
/* La distinction bleu / gris entre cartes en rotation et hors rotation
   (.map-chip.out) et sa légende (.pool-legend) ont disparu le 30/07 : la page
   liste les cartes sans dire lesquelles sont en Compétitif, cette composition
   changeant à chaque acte. Toutes les pastilles sont donc bleues. */

/* ===== CARTE D'OFFRE (bandeau d'affiliation) =====
   Motif des cartes boutique des fiches agents, transposé ici avec ses propres
   classes : cette page ne charge pas agent.css, elle ne peut donc pas réutiliser
   .shop-card. Version sobre et à colonne unique, à l'échelle des .visual des
   autres sections. */
.hub-offre {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid #eee; border-radius: 16px;
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.hub-offre:hover { transform: translateY(-5px); box-shadow: 0 14px 38px rgba(0,0,0,0.08); border-color: transparent; }

.hub-offre-img { height: 200px; overflow: hidden; background: var(--white); }
.hub-offre-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.hub-offre:hover .hub-offre-img img { transform: scale(1.05); }

.hub-offre-body { padding: 20px 20px 12px; flex: 1; }
.hub-offre-tag {
  display: inline-flex; width: fit-content; margin-bottom: 10px;
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 3px 10px; border-radius: 4px;
  background: var(--agent-accent-light); color: var(--agent-accent-dark);
}
/* Bornage du texte, motif du catalogue matériel : le titre du vendeur et la
   description marchande restent ENTIERS dans le HTML, seul leur rendu s'arrête,
   sur deux lignes pour le titre et trois pour la description. Les trois
   déclarations -webkit vont ensemble, -webkit-box-orient étant celle qu'un
   nettoyage de feuille oublie et sans laquelle la boîte se dispose en ligne ;
   `overflow: hidden` déclenche l'ellipse. */
.hub-offre-titre {
  font-size: 0.95rem; font-weight: 700; color: var(--dark); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hub-offre-desc {
  font-size: 0.8rem; color: var(--text-light); line-height: 1.55; margin-top: 8px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.hub-offre-pied { padding: 0 20px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hub-offre-prix { font-family: 'Bebas Neue', sans-serif; font-size: 1.35rem; color: var(--dark); letter-spacing: 0.5px; line-height: 1; white-space: nowrap; }
.hub-offre-prix .price-from {
  display: block; margin-bottom: 2px;
  font-family: 'DM Sans', sans-serif; font-size: 0.62rem; font-weight: 500;
  color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px;
}
.hub-offre-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 8px;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  background: var(--agent-accent); color: var(--white);
  flex-shrink: 0; text-align: center; line-height: 1.3;
  transition: background 0.2s;
}
.hub-offre:hover .hub-offre-cta { background: var(--agent-accent-dark); }

/* Mention de transparence, hors du lien : obligatoire sous un encart affilié. */
.hub-offre-mention { font-size: 0.68rem; color: #bbb; line-height: 1.5; margin-top: 14px; padding-top: 12px; border-top: 1px solid #f0f0f0; }

/* ===== ENCADRÉ ===== */
.infobox { display: flex; align-items: flex-start; gap: 16px; margin-top: 22px; padding: 22px 24px; background: var(--agent-accent-light); border-radius: 14px; }
.infobox .ib-ico { font-size: 1.3rem; flex-shrink: 0; }
.infobox .ib-titre { font-size: 0.86rem; font-weight: 700; color: var(--agent-accent-dark); margin-bottom: 5px; }
.infobox p { font-size: 0.82rem; color: #8a4d5c; line-height: 1.7; }

/* ===== BOUTONS DE LIAISON ===== */
/* Pastilles de renvoi (décision client du 31/07) : au repos un fond rose très
   clair de la charte plutôt qu'un aplat corail, qui pesait lourd en fin de
   section. Le corail plein est réservé au survol, avec la flèche qui s'écarte,
   même mécanique que les .mf-all du méga menu. La flèche est un span dans la
   vue : c'est ce qui permet de faire jouer le gap. */
.cta-line {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  padding: 12px 22px;
  border-radius: 9px;
  background: var(--coral-light);
  color: var(--coral-dark);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.2s, gap 0.2s, box-shadow 0.2s;
}
.cta-line:hover {
  background: var(--coral);
  color: #fff;
  gap: 13px;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(232, 99, 126, 0.28);
}

/* Déclinaison sombre (le lien Télécharger) : même mécanique, autre famille de
   couleur. Le fond au repos est une teinte claire de --dark, le survol reprend
   le --dark plein de l'ancienne version. */
.cta-line.alt { background: rgba(26, 26, 46, 0.07); color: var(--dark); }
.cta-line.alt:hover {
  background: var(--dark);
  color: #fff;
  box-shadow: 0 6px 18px rgba(26, 26, 46, 0.25);
}

/* ===== BANDEAU SETUP ===== */
.setup-band { background: linear-gradient(135deg, #120a1e 0%, #1e0e30 55%, #2a1440 100%); position: relative; overflow: hidden; }
.setup-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 75% 50%, rgba(180,77,223,0.16) 0%, transparent 58%);
  pointer-events: none;
}
.setup-inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 44px 40px; display: flex; align-items: center; justify-content: space-between; gap: 34px; }
.setup-inner h2 { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: #fff; letter-spacing: 1px; margin-bottom: 8px; }
.setup-inner h2 em { color: var(--c-setup); font-style: normal; }
.setup-inner p { font-size: 0.84rem; color: rgba(255,255,255,0.42); line-height: 1.6; max-width: 640px; }
.setup-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 10px;
  background: var(--c-setup);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: all 0.2s;
  flex-shrink: 0;
}
a.setup-btn:hover { background: #9a3cc4; transform: translateY(-2px); }

/* ===== RESSOURCES ===== */
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.res { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--white); border: 1px solid #eee; border-radius: 12px; text-decoration: none; color: inherit; transition: all 0.2s; }
a.res:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.05); border-color: transparent; }
.res .rs-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.res .rs-titre { font-size: 0.84rem; font-weight: 700; color: var(--dark); }
.res p { font-size: 0.68rem; color: var(--text-light); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
  .routes-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .paths-grid { grid-template-columns: 1fr; }
  .split, .split.rev { grid-template-columns: 1fr; gap: 24px; }
  .roles-grid { grid-template-columns: 1fr 1fr; }
  .res-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .routes-inner { padding: 20px; }
  .routes-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .route { padding: 16px 14px; }
  .sec { padding: 32px 20px; }
  .sec h2 { font-size: 1.4rem; }
  .paths-inner { padding: 32px 20px; }
  .paths-inner h2 { font-size: 1.4rem; }
  .visual { height: 170px; }
  .roles-grid { grid-template-columns: 1fr; }
  .setup-inner { flex-direction: column; text-align: center; padding: 32px 20px; }
  .infobox { flex-direction: column; gap: 10px; padding: 18px 20px; }

  /* Tableaux en cartes : l'en-tête est masqué, chaque cellule porte son
     libellé via data-label (recette de la créa). */
  table.t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.t tbody tr { display: block; padding: 14px 18px; }
  table.t th[scope="row"] { display: block; padding: 0 0 8px; }
  table.t td { display: block; padding: 3px 0; }
  table.t td::before { content: attr(data-label) " : "; font-weight: 700; color: #bbb; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; }
}