/* Hub (single.php, branche hub, inc/hub.php) : s'appuie sur article.css (classes ar-) ; ajouts préfixés hb-.
   Maquette : maquettes/hub-v1/hub-v8.css (journal dans maquettes/hub-v1/CRITIQUE.md). */

/* Hero : la liste des guides est le 3e enfant de la grille. Mobile : texte, guides, fiche race. Desktop : texte | fiche, puis guides sur toute la largeur */
.hb .ar-hero-grid{grid-template-areas:"text" "guides" "side"}
.hb .ar-hero-text{grid-area:text}
.hb .ar-hero-side{grid-area:side}
.hb-guides{grid-area:guides}

/* Liste des sous-articles */
.hb-guides-title{margin:0 0 12px;font-size:13.5px;font-weight:600;color:var(--ar-green)}
.hb-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hb-list li{display:grid}
.hb-card{position:relative;display:block;padding:15px 18px 17px;background:var(--ar-white);border:1px solid var(--ar-line);border-radius:var(--ar-r-md);text-decoration:none;color:var(--ar-ink);transition:border-color .15s}
.hb-card:hover{border-color:var(--ar-green)}
.hb-card-kicker{display:block;font-size:12.5px;font-weight:600;color:var(--ar-green-mid);margin-bottom:3px}
.hb-card-title{font-family:var(--ar-serif);font-weight:600;font-size:19px;line-height:1.25;margin:0;color:var(--ar-ink);text-wrap:pretty}
.hb-card-title svg{display:inline-block;width:17px;height:17px;margin-left:6px;vertical-align:-2px;color:var(--ar-green);transition:transform .15s ease}
.hb-card:hover .hb-card-title svg{transform:translateX(3px)}
.hb-card:hover .hb-card-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.hb-card-desc{display:block;margin-top:5px;font-size:14.5px;line-height:1.5;color:#4A4A4A}
.hb-card--assur{background:#FFF4EA;border-color:#F0C9A6}
.hb-card--assur:hover{border-color:var(--ar-orange)}
.hb-card--assur .hb-card-kicker{color:#7A3705}
.hb-card--assur .hb-card-title svg{color:#B25008}

/* Page sans contenu sous la liste (hub sans sous-article) : respiration avant la bande verte */
.hb-hero--last{padding-bottom:40px}

/* Encadré « Pour aller plus loin » du contenu (hub-crosslinks) : paragraphes à liens en ligne, ou liste de liens .hub-crosslink */
.ar-content .hub-crosslinks{margin:1.8em 0;padding:16px 18px 4px;background:var(--ar-white);border:1px solid var(--ar-line);border-radius:var(--ar-r-md);font-size:15.5px;line-height:1.6}
.ar-content .hub-crosslinks-title{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ar-green)}
.ar-content .hub-crosslink{display:block;margin:0 0 12px}

/* Bloc espérance de vie sous la signature (chiffre de la fiche race, lien vers /esperance-vie, source si elle existe) */
.hb-life{position:relative;transition:background-color .15s;margin:18px 0 0;display:flex;align-items:center;gap:14px 18px;padding:14px 16px;background:var(--ar-green-pale);border-radius:var(--ar-r-md);max-width:40em}
.hb-life-fig{margin:0;flex:none;display:flex;flex-direction:column}
.hb-life-label{font-size:12.5px;font-weight:600;color:var(--ar-green-mid)}
.hb-life-value{font-family:var(--ar-serif);font-weight:600;font-size:26px;line-height:1.15;color:var(--ar-green)}
.hb-life-body{text-wrap:balance;min-width:0;padding-left:18px;border-left:1px solid #C9DDD0}
.hb-life-link{font-family:var(--ar-serif);font-weight:600;font-size:16.5px;line-height:1.3;color:var(--ar-ink);text-decoration:none}
.hb-life-link svg{display:inline-block;width:16px;height:16px;margin-left:5px;vertical-align:-2px;color:var(--ar-green)}
.hb-life-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.hb-life:hover{background:#DDEDE3}
.hb-life:hover .hb-life-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.hb-life:hover .hb-life-link svg{transform:translateX(3px)}
.hb-life-link svg{transition:transform .15s ease}
.hb-life-link:focus-visible{outline:none}
.hb-life:focus-within{outline:2px solid var(--ar-green);outline-offset:2px}
.hb-life-src{position:relative;z-index:1;margin:4px 0 0;font-size:13px;color:var(--ar-grey)}
.hb-life-src a{color:var(--ar-grey);text-decoration:underline;text-underline-offset:3px}

/* Mobile : chiffre sur une ligne, titre de la page en dessous sur toute la largeur (sinon 4 lignes dans une colonne étroite) */
@media (max-width:639px){
.hb-life{flex-direction:column;align-items:stretch;gap:8px;padding:13px 16px 15px}
.hb-life-fig{flex-direction:row;align-items:baseline;justify-content:space-between;gap:10px}
.hb-life-body{padding:9px 0 0;border-left:0;border-top:1px solid #C9DDD0}
}
@media (min-width:640px){
.hb-list{grid-template-columns:1fr 1fr}
}

@media (min-width:1024px){
.hb-life-value{font-size:30px}
.hb-life-link{font-size:18px}
.hb .ar-hero-grid{grid-template-areas:"text side" "guides guides"}
.hb .ar-hero--solo .ar-hero-grid{grid-template-areas:"text" "guides";grid-template-columns:minmax(0,1fr)}
.hb .ar-hero--solo .ar-hero-text{max-width:880px}
.hb-guides{padding:40px 0 0}
.hb-hero--last{padding-bottom:72px}
/* 3 colonnes : la dernière carte seule sur sa rangée prend la place restante */
.hb-list--c3 li:last-child:nth-child(3n+2){grid-column:span 2}
.hb-list--c3 li:last-child:nth-child(3n+1){grid-column:span 3}
.hb-list{grid-template-columns:repeat(var(--hb-cols,3),minmax(0,1fr));gap:14px}
.hb-card{padding:20px 22px 22px;height:100%;box-sizing:border-box}
.hb-card-title{font-size:21px}
.hb-layout--solo .ar-layout-grid{grid-template-columns:minmax(0,690px)}
.hb-layout{padding-top:56px}
}