/**
 * Styles pour [haeros_compagnons_de_route] — grille de compagnons + tooltip + filtre métier.
 * Charge automatiquement via wp_enqueue_style dans compagnons-de-route.php.
 */

.hr-compagnons-section { --hr-or:#DCA54A;--hr-noir:#222222;--hr-creme-clair:#FAF5E5;--hr-creme:#F0E6C5;--hr-bleu-nuit:#0F172A;--hr-bordure:#D3C4A7;--hr-blanc:#FFFFFF;--hr-gris-doux:#5F5E5A; padding:16px 0; max-width:1200px; margin:0 auto; }
/* max-width et margin ajoutes pour aligner ce bloc sur les listes Livres a
   jouer et Service presse : sans eux il occupait 100% pendant que les deux
   autres se centraient a 1200px, d'ou un bord gauche decale des que le
   conteneur depassait cette largeur. */
.hr-compagnons-legende { background:var(--hr-creme-clair); border:1px solid var(--hr-bordure); border-radius:8px; padding:12px 16px; margin-bottom:20px; font-size:13px; }
.hr-compagnons-legende > summary { cursor:pointer; font-weight:500; color:var(--hr-noir); list-style:none; position:relative; padding-left:20px; }
.hr-compagnons-legende > summary::before { content:"▶"; position:absolute; left:0; color:var(--hr-or); font-size:10px; transition:transform 0.2s ease; }
.hr-compagnons-legende[open] > summary::before { transform:rotate(90deg); }
.hr-compagnons-legende-content { margin-top:12px; }
.hr-compagnons-legende-intro { margin:0 0 12px; color:var(--hr-gris-doux); font-size:12px; line-height:1.5; }
.hr-compagnons-legende-table-wrap { overflow-x:auto; }
.hr-compagnons-legende-table { width:100%; border-collapse:collapse; font-size:12px; }
.hr-compagnons-legende-table th { background:var(--hr-creme); padding:8px 10px; text-align:left; font-weight:500; color:var(--hr-noir); border-bottom:1px solid var(--hr-bordure); }
.hr-compagnons-legende-table td { padding:8px 10px; border-bottom:1px solid var(--hr-creme); color:var(--hr-gris-doux); }
.hr-compagnons-legende-table .hr-leg-metier { color:var(--hr-noir); font-weight:500; }
.hr-compagnons-filtres { display:flex; gap:10px; justify-content:center; margin-bottom:24px; flex-wrap:wrap; }
.hr-filtre-btn { padding:6px 14px; background:var(--hr-blanc); color:var(--hr-gris-doux); border:1px solid var(--hr-bordure); border-radius:20px; font-size:12px; font-family:inherit; cursor:pointer; transition:all 0.2s ease; }
.hr-filtre-btn:hover { border-color:var(--hr-or); color:var(--hr-noir); }
.hr-filtre-btn.is-active { background:var(--hr-or); color:var(--hr-noir); border-color:var(--hr-or); font-weight:500; }
.hr-compagnons-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.hr-compagnon-card { position:relative; background:var(--hr-blanc); border:1px solid var(--hr-bordure); border-radius:12px; padding:20px; transition:transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease; }
.hr-compagnon-card:hover { transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(15,23,42,0.15); }
.hr-compagnon-card.is-hidden { display:none; }
.hr-compagnon-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.hr-compagnon-photo { width:60px; height:60px; border-radius:50%; object-fit:cover; border:2px solid var(--hr-bordure); flex-shrink:0; }
.hr-compagnon-photo--placeholder { background:var(--hr-bleu-nuit); color:var(--hr-or); display:flex; align-items:center; justify-content:center; font-family:Georgia, "Playfair Display", serif; font-size:26px; font-weight:500; line-height:1; }
.hr-compagnon-nom-wrap { flex:1; min-width:0; }
.hr-compagnon-nom { font-family:Georgia, "Playfair Display", serif; font-size:16px; color:var(--hr-noir); margin:0; font-weight:500; line-height:1.2; word-break:break-word; }
.hr-compagnon-xp { background:var(--hr-bleu-nuit); color:var(--hr-or); padding:4px 10px; border-radius:4px; font-size:11px; font-weight:500; white-space:nowrap; flex-shrink:0; }
.hr-compagnon-metiers { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.hr-compagnon-pill { padding:3px 10px; background:var(--hr-creme); color:var(--hr-noir); border-radius:4px; font-size:11px; }
.hr-compagnon-bourse { padding:10px 0; border-top:1px solid var(--hr-creme); border-bottom:1px solid var(--hr-creme); margin-bottom:14px; }
.hr-compagnon-label { display:block; font-size:11px; color:var(--hr-gris-doux); margin-bottom:2px; }
.hr-compagnon-prix { font-size:14px; color:var(--hr-or); font-weight:500; letter-spacing:1px; }
.hr-bourse-icon { color:var(--hr-or); vertical-align:-2px; margin:0 1px; }
.hr-bourse-sep { color:var(--hr-gris-doux); font-size:11px; font-style:italic; margin:0 6px; vertical-align:1px; }
.hr-bourse-sur-demande { color:var(--hr-gris-doux); font-style:italic; font-size:13px; }
.hr-leg-bourses { display:inline-flex; gap:1px; vertical-align:middle; margin-right:4px; }
.hr-compagnon-actions { display:flex; gap:8px; }
.hr-compagnon-btn { flex:1; padding:8px; border-radius:4px; text-align:center; font-size:12px; text-decoration:none !important; transition:opacity 0.2s ease; }
.hr-compagnon-btn:hover { opacity:0.85; }
.hr-compagnon-btn--primary { background:var(--hr-or); color:var(--hr-noir) !important; font-weight:500; }
.hr-compagnon-btn--secondary { background:var(--hr-blanc); color:var(--hr-noir) !important; border:1px solid var(--hr-bordure); }
.hr-compagnon-tooltip { position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--hr-bleu-nuit); color:var(--hr-creme-clair); padding:12px 14px; border-radius:8px; width:240px; font-size:12px; line-height:1.5; opacity:0; pointer-events:none; transition:opacity 0.2s ease; z-index:10; box-shadow:0 8px 16px -4px rgba(15,23,42,0.3); }
.hr-compagnon-tooltip::after { content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--hr-bleu-nuit); }
.hr-compagnon-card:hover .hr-compagnon-tooltip { opacity:1; }
@media (max-width: 768px) { .hr-compagnon-tooltip { display:none; } }

/* Titre de section, affiché via l'attribut titre="" du shortcode.
   Il n'apparaît que lorsqu'il y a des fiches à montrer : le shortcode sort
   avant tout rendu quand la grille est vide. */
.hr-compagnons-titre-section {
    font-family: Georgia, "Playfair Display", serif;
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 18px;
    color: #1C1B18;
}