/*
 * hub-poissons.css — AquaLowtech v4
 * Structure calquée sur fiche-poisson.css (référence fonctionnelle)
 * Enqueue : wp_enqueue_style('hub-poissons', .../assets/css/hub-poissons.css)
 * v4 : fix bug filtre (section "débuter" visible malgré 0 résultat) + classes section vidéo
 */

#hub-poissons {
    /* Alias vers les jetons --aq-* (composants.css) : valeurs à modifier là-bas. */
    --hub-green:        var(--aq-vert);
    --hub-green-light:  var(--aq-vert-pale);
    --hub-green-mid:    var(--aq-vert-moyen);
    --hub-orange:       var(--aq-orange);
    --hub-orange-light: var(--aq-orange-pale);
    --hub-red:          var(--aq-rouge);
    --hub-red-light:    var(--aq-rouge-pale);
    --hub-blue:         var(--aq-bleu);
    --hub-blue-light:   var(--aq-bleu-pale);
    --hub-text:         var(--aq-texte);
    --hub-muted:        var(--aq-texte-secondaire);
    --hub-border:       var(--aq-bordure);
    --hub-radius:       var(--aq-rayon);
    --hub-shadow:       var(--aq-ombre);
    overflow-x: clip;
}

/* ══ HERO ══ */
/* Fond : photo d'un bac (<picture class="hub-hero__fond">) sous un voile sombre neutre.
   Le vert uni + motif de points donnait une page « trop verte ». Couleur de repli sombre :
   le texte reste lisible avant le chargement de l'image, ou sans elle. */
.hub-hero {
    background: #0e1511;
    padding: 4rem 1.5rem 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.hub-hero__fond,
.hub-hero__fond img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.hub-hero__fond { z-index: -2; }
/* Les deux scalaires (vers 55 % / 35 % de l'image) restent dans le cadre quand l'écran est haut. */
.hub-hero__fond img { object-fit: cover; object-position: 55% 38%; }
/* Voile : l'image a des zones très claires (fougères blanches, rai de lumière). Il est calculé
   pour que le texte le plus pâle garde au moins 4,5:1 sur le pixel le plus clair qu'il recouvre
   (mesuré, pas estimé). Neutre, légèrement tiré vers le vert-noir de l'eau. */
.hub-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(8, 14, 11, 0.74) 0%, rgba(8, 14, 11, 0.66) 55%, rgba(8, 14, 11, 0.8) 100%);
    pointer-events: none;
}
.hub-hero__inner { position: relative; max-width: 800px; margin: 0 auto; }
/* Filet d'ombre sous le texte : n'assure pas le contraste (le voile s'en charge), il adoucit
   les bords des lettres sur les détails fins de l'image. */
.hub-hero__title,
.hub-hero__lead,
.hub-hero__guide { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
.hub-hero__badge {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.9);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.35rem 1rem;
    border-radius: 20px;
    margin-bottom: 1rem;
    border: 1px solid rgba(255,255,255,0.2);
}
.hub-hero__title {
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    color: #fff;
    margin: 0 0 1rem;
    font-weight: 800;
    line-height: 1.2;
}
.hub-hero__lead {
    color: rgba(255,255,255,0.85);
    font-size: 1rem;
    max-width: 650px;
    margin: 0 auto 1rem;
    line-height: 1.65;
}
/* Lien vers le guide débutant, sous l'intro (texte blanc sur le vert du hero). */
.hub-hero__guide {
    color: rgba(255,255,255,0.85);
    font-size: 0.92rem;
    max-width: 650px;
    margin: 0 auto 1rem;
    line-height: 1.5;
}
.hub-hero__guide a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.hub-hero__guide a:hover,
.hub-hero__guide a:focus-visible { text-decoration-thickness: 2px; }
.hub-hero__guide a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }
.hub-hero__meta {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.hub-hero__meta span {
    font-size: 0.78rem;
    /* 0,88 et non 0,75 : petit texte sur photo, contraste mesuré ≥ 4,5:1 au pire pixel. */
    color: rgba(255,255,255,0.88);
    background: rgba(255,255,255,0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
}
.hub-cta-principal {
    display: inline-block;
    background: #fff;
    color: var(--hub-green);
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0.9rem 1.75rem;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    transition: transform 0.15s, box-shadow 0.15s;
}
.hub-cta-principal:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,0,0,0.2); }

/* ══ SOMMAIRE — calqué sur .aqua-jump-nav ══ */
/* Sommaire collé sous le header (lui-même collant) : --hauteur-header est mesurée par main.js.
   Les ancres du sommaire s'arrêtent sous header + sommaire (50 px) au lieu de passer dessous. */
html { scroll-padding-top: calc(var(--hauteur-header, 66px) + 58px); }
.hub-sommaire {
    position: sticky;
    top: var(--hauteur-header, 66px);
    z-index: 100;
    background: #fff;
    border-bottom: 2px solid var(--hub-border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.hub-sommaire__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.hub-sommaire__inner::-webkit-scrollbar { display: none; }
.hub-sommaire__titre {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--hub-muted);
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.75rem 0;
}
.hub-sommaire__list {
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
}
.hub-sommaire__list a {
    display: inline-block;
    padding: 0.75rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--hub-muted);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.hub-sommaire__list a:hover {
    color: var(--hub-green);
    border-bottom-color: var(--hub-green);
}

/* ══ VIDÉO EN FAÇADE (miniature → lecteur au clic, assets/js/hub-video.js) ══ */
.hub-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--hub-radius);
    overflow: hidden;
    background: #0f2a1b;
}
.hub-video__facade {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.hub-video__facade img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.hub-video__facade:hover img { transform: scale(1.03); }
.hub-video__facade:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.hub-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 68px;
    margin: -34px 0 0 -34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    transition: transform 0.2s ease;
}
.hub-video__play::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -11px 0 0 -6px;
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent var(--hub-green);
}
.hub-video__facade:hover .hub-video__play { transform: scale(1.08); }
.hub-video__duree {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    background: rgba(0,0,0,0.72);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
}
.hub-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Dans le hero (écran large) */
.hub-hero__media { display: none; }
.hub-video--hero {
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}

/* Version compacte (< 1000px) : carte horizontale après « Pour débuter » */
.hub-video-compact {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 0.85rem;
    align-items: center;
    background: #fff;
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-radius);
    padding: 0.75rem;
    margin: 0 0 2.5rem;
    box-shadow: 0 2px 8px rgba(45,125,70,0.06);
}
.hub-video--compact { border-radius: 8px; }
.hub-video--compact .hub-video__play { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
.hub-video--compact .hub-video__play::after { margin: -7px 0 0 -4px; border-width: 7px 0 7px 12px; }
.hub-video--compact .hub-video__duree { display: none; }
.hub-video-compact__titre {
    font-size: 1rem;
    line-height: 1.3;
    color: var(--hub-text);
    margin: 0 0 0.2rem;
}
.hub-video-compact__accroche { margin: 0; font-size: 0.8rem; color: var(--hub-muted); }
.hub-video-compact__details { grid-column: 1 / -1; font-size: 0.85rem; }
.hub-video-compact__details summary { cursor: pointer; color: var(--hub-green); font-weight: 700; }
.hub-video-compact__details p { margin: 0.5rem 0 0; color: var(--hub-muted); line-height: 1.6; }
/* Lecture lancée : le lecteur prend toute la largeur de la carte. */
.hub-video-compact.is-lecture { grid-template-columns: minmax(0, 1fr); }
.hub-video-compact.is-lecture .hub-video--compact .hub-video__duree { display: block; }

/* ══ HERO SPLIT — écran large ══ */
@media (min-width: 1000px) {
    .hub-hero { padding: 3.5rem 1.5rem 3rem; text-align: left; }
    /* Texte à gauche (sur les fougères claires), vidéo à droite : voile plus dense côté texte. */
    .hub-hero::before { background: linear-gradient(90deg, rgba(8, 14, 11, 0.8) 0%, rgba(8, 14, 11, 0.72) 50%, rgba(8, 14, 11, 0.4) 100%); }
    .hub-hero__inner {
        max-width: 1100px;
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: 3rem;
        align-items: center;
    }
    .hub-hero__lead,
    .hub-hero__guide { margin: 0 0 1rem; max-width: none; }
    .hub-hero__meta { justify-content: flex-start; }
    .hub-hero__media { display: block; }
    .hub-video-compact { display: none; }
}

/* ══ LAYOUT 2 COLONNES — calqué sur .aqua-layout ══ */
.hub-layout {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2rem;
    align-items: start;
}

/* Bouton toggle mobile caché sur desktop */
.hub-filtre-toggle { display: none; }

/* 1.8.6 : champ de recherche du bandeau, mobile seulement (bureau : celui de la colonne des filtres).
   display: none retire aussi le champ du parcours clavier et des lecteurs d'écran. */
.hub-hero__recherche { display: none; }

/* ══ SIDEBAR GAUCHE — calqué sur .aqua-col-left ══ */
.hub-sidebar {
    position: sticky;
    top: calc(var(--hauteur-header, 66px) + 56px); /* sous le header et le sommaire (50 px) */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Empêche la sidebar de déborder sur les cards */
    min-width: 0;
    width: 100%;
}

/* ══ RECHERCHE LIBRE ══ */
.hub-search-wrap { width: 100%; }
.hub-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.7rem 1rem;
    border: 2px solid var(--hub-border);
    border-radius: 50px;
    font-size: 0.85rem;
    color: var(--hub-text);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}
.hub-search-input:focus {
    border-color: var(--hub-green);
    box-shadow: 0 0 0 3px rgba(45,125,70,0.1);
}
.hub-search-input::placeholder { color: var(--hub-muted); }

/* ══ FILTRES ══ */
.hub-filtres {
    background: #fff;
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-radius);
    padding: 1.25rem;
    box-shadow: var(--hub-shadow);
}
.hub-filtres__titre {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--hub-green);
    margin: 0 0 1rem;
}
.hub-filtres__grid { display: flex; flex-direction: column; gap: 1.1rem; }
.hub-filtre-group__label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hub-muted);
    margin-bottom: 0.4rem;
}
.hub-filtre-group__btns { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.hub-filtre-btn {
    background: var(--hub-green-light);
    border: 1px solid var(--hub-border);
    border-radius: 20px;
    padding: 0.3rem 0.75rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--hub-muted);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.hub-filtre-btn:hover { border-color: var(--hub-green); color: var(--hub-green); }
.hub-filtre-btn.active { background: var(--hub-green); border-color: var(--hub-green); color: #fff; }
.hub-filtre-btn--special.active { background: var(--hub-blue); border-color: var(--hub-blue); color: #fff; }
.hub-filtres__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--hub-border);
    flex-wrap: wrap;
    gap: 0.5rem;
}
.hub-compteur { font-size: 0.75rem; color: var(--hub-muted); font-weight: 600; }
.hub-reset-btn {
    background: none;
    border: 1px solid var(--hub-red);
    border-radius: 20px;
    padding: 0.25rem 0.7rem;
    font-size: 0.72rem;
    color: var(--hub-red);
    cursor: pointer;
    transition: all 0.15s;
}
.hub-reset-btn:hover { background: var(--hub-red); color: #fff; }

/* CTA sidebar */
.hub-sidebar-cta {
    background: var(--hub-green-light);
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-radius);
    padding: 1rem;
    text-align: center;
}
.hub-sidebar-cta p { font-size: 0.78rem; color: var(--hub-muted); margin: 0 0 0.75rem; line-height: 1.5; }
.hub-btn-primary--sm { font-size: 0.8rem; padding: 0.6rem 1.1rem; }

/* ══ COLONNE DROITE — calqué sur .aqua-col-right ══ */
.hub-content {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    min-width: 0;
}

/* Le div zones-default doit aussi propager le gap */
#hub-zones-default {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* FIX v4 — bug confirmé sur capture d'écran : filtre à 0 résultat laissait
   la section "débuter" visible. #id + [hidden] > spécificité de #id seul,
   donc cette règle gagne enfin sur le display:flex ci-dessus. */
#hub-zones-default[hidden] {
    display: none;
}

/* ══ GRILLES CARDS ══ */
.hub-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}
.hub-no-result {
    grid-column: 1/-1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--hub-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ══ CARDS POISSONS ══ */
.hub-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-radius);
    text-decoration: none;
    overflow: hidden;
    position: relative;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    box-shadow: 0 2px 8px rgba(45,125,70,0.06);
    min-width: 0;
    padding: 0 !important;
}
.hub-card:hover { transform: translateY(-4px); box-shadow: var(--hub-shadow); border-color: var(--hub-green-mid); }
.hub-card__robinet {
    position: absolute;
    top: 0.5rem; right: 0.5rem;
    font-size: 1rem;
    background: rgba(255,255,255,0.92);
    border-radius: 50%;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    z-index: 1;
}
.hub-card__photo {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--hub-green-light);
}
.hub-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; display: block; }
.hub-card:hover .hub-card__photo img { transform: scale(1.05); }
.hub-card__photo-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem;
    background: var(--hub-green-light);
}
.hub-card__body {
    padding: 0.85rem 0.9rem;
    display: flex; flex-direction: column; gap: 0.35rem;
    flex: 1;
    min-width: 0;
}
.hub-badge {
    display: inline-block;
    font-size: 0.65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    width: fit-content;
}
.hub-badge--vert   { background: #d4edda; color: #155724; }
.hub-badge--orange { background: #fff3cd; color: #856404; }
.hub-badge--rouge  { background: #f8d7da; color: #721c24; }
.hub-card__nom {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--hub-text);
    margin: 0;
    line-height: 1.25;
    /* Permet 2 lignes max, pas de troncature avec ... */
    overflow: hidden;
    display: -webkit-box;
     -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}
.hub-card__latin { font-size: 0.68rem; color: var(--hub-muted); font-style: italic; }
.hub-card__stats { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.2rem; }
.hub-card__stats span { font-size: 0.68rem; color: var(--hub-muted); background: var(--hub-green-light); border-radius: 10px; padding: 0.1rem 0.45rem; }
/* Verdict low-tech : pastille à contour, pour ne pas se confondre avec le badge de
   niveau (plein, en capitales) qui emploie les mêmes couleurs pour une autre mesure. */
.hub-card__verdict-bloc {
    margin-top: auto;
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem;
}
.hub-card__verdict {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.68rem; font-weight: 600; line-height: 1.2;
    padding: 0.15rem 0.5rem;
    border: 1px solid currentColor;
    border-radius: 10px;
    background: #fff;
}
.hub-card__verdict--vert   { color: #155724; }
.hub-card__verdict--orange { color: #856404; }
.hub-card__verdict--rouge  { color: #721c24; }
/* Accroche du verdict : visible sans interaction (pas de title au toucher). */
.hub-card__accroche { font-size: 0.68rem; line-height: 1.3; color: var(--hub-muted); }

/* Lien vers la fiche : toute la carte sauf le bouton panier (frère du lien, pas enfant). */
.hub-card__lien {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    text-decoration: none;
}
.hub-card__lien:focus-visible { outline: 3px solid var(--hub-green); outline-offset: -3px; border-radius: var(--hub-radius); }

/* Bouton « + Ajouter à mon bac » (niveau secondaire : l'orange reste à « Voir mon bac »).
   Espèce déjà dans le bac : « ✓ Dans ton bac », cliquable pour la retirer. */
.hub-card__ajouter {
    margin: 0 0.9rem 0.85rem;
    min-height: 40px;
    padding: 0.45rem 0.6rem;
    border: 1.5px solid var(--hub-green);
    border-radius: var(--aq-rayon-pilule);
    background: #fff;
    color: var(--aq-vert-texte);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hub-card__ajouter[hidden] { display: none; }
.hub-card__ajouter:hover { background: var(--hub-green); color: #fff; }
.hub-card__ajouter:focus-visible { outline: 3px solid var(--hub-green); outline-offset: 2px; }
.hub-card__ajouter.is-ajoute { background: var(--hub-green-light); border-color: var(--hub-green-mid); color: var(--aq-vert-texte); }
.hub-card__ajouter-action { display: none; }
/* Survol (souris uniquement : pas d'état collé après un tap) ou focus clavier : l'action apparaît. */
.hub-card__ajouter.is-ajoute:focus-visible { background: #fff; border-color: var(--aq-rouge); color: var(--aq-rouge); }
.hub-card__ajouter.is-ajoute:focus-visible .hub-card__ajouter-etat { display: none; }
.hub-card__ajouter.is-ajoute:focus-visible .hub-card__ajouter-action { display: inline; }
@media (hover: hover) {
    .hub-card__ajouter.is-ajoute:hover { background: #fff; border-color: var(--aq-rouge); color: var(--aq-rouge); }
    .hub-card__ajouter.is-ajoute:hover .hub-card__ajouter-etat { display: none; }
    .hub-card__ajouter.is-ajoute:hover .hub-card__ajouter-action { display: inline; }
}

/* ══ BARRE PANIER FLOTTANTE (hors de #hub-poissons : jetons --aq-* directement) ══ */
.hub-panier-barre[hidden] { display: none; }
.hub-panier-barre {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: #fff;
    border-top: 1px solid var(--aq-bordure);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    padding: 0.6rem 16px calc(0.6rem + env(safe-area-inset-bottom));
    transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.hub-panier-barre__ligne { display: flex; align-items: center; gap: 0.75rem; }

/* Résumé « 🪣 Ton bac : 3 espèces · 120 L ▴ » : bouton qui déplie la liste des espèces. */
.hub-panier-barre__resume {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.2rem 0.4rem 0.2rem 0.2rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--aq-texte);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.hub-panier-barre__resume:hover { background: var(--aq-vert-pale); }
.hub-panier-barre__resume:focus-visible { outline: 3px solid var(--aq-vert); outline-offset: 2px; }
.hub-panier-barre__icone { font-size: 1.4rem; line-height: 1; flex: 0 0 auto; }
.hub-panier-barre__texte { flex: 1 1 auto; min-width: 0; font-size: 0.9rem; line-height: 1.3; }
.hub-panier-barre__texte strong { white-space: nowrap; }
/* Le volume passe à la ligne d'un bloc si la place manque (390 px), jamais coupé au milieu. */
.hub-panier-barre__volume { display: inline-block; white-space: nowrap; font-weight: 600; color: var(--aq-texte-secondaire); }
.hub-panier-barre__chevron { flex: 0 0 auto; font-size: 0.75rem; color: var(--aq-texte-secondaire); }
.hub-panier-barre__chevron::before { content: '▲'; }
.hub-panier-barre__resume[aria-expanded="true"] .hub-panier-barre__chevron::before { content: '▼'; }

/* Message ponctuel (ajout, retrait, refus) sous le résumé ; absent quand il est vide. */
.hub-panier-barre__message { margin: -0.3rem 0 0; padding-left: 2.3rem; font-size: 0.78rem; line-height: 1.3; color: var(--aq-texte-secondaire); }
.hub-panier-barre__message:empty { display: none; }
/* Refus (doublon, bac complet) : orange signal, texte foncé pour rester lisible (5,88:1). */
.hub-panier-barre__message.is-signal { color: var(--aq-orange-cta-survol); font-weight: 700; }

/* Liste dépliée : les espèces du bac, chacune retirable. */
.hub-panier-barre__contenu[hidden] { display: none; }
.hub-panier-barre__contenu { border-bottom: 1px solid var(--aq-bordure); padding-bottom: 0.4rem; }
.hub-panier-barre__contenu-titre { margin: 0 0 0.3rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--aq-texte-secondaire); }
.hub-panier-barre__especes { list-style: none; margin: 0; padding: 0; max-height: min(40vh, 280px); overflow-y: auto; }
.hub-panier-barre__espece { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; border-top: 1px solid var(--aq-vert-pale); }
.hub-panier-barre__espece:first-child { border-top: none; }
.hub-panier-barre__espece-nom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.88rem; font-weight: 600; color: var(--aq-texte); }
.hub-panier-barre__espece-qte { flex: 0 0 auto; font-size: 0.78rem; color: var(--aq-texte-secondaire); }
.hub-panier-barre__retirer {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 1px solid var(--aq-bordure);
    border-radius: 50%;
    background: #fff;
    color: var(--aq-texte);
    font: inherit;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}
.hub-panier-barre__retirer:hover { border-color: var(--aq-rouge); color: var(--aq-rouge); }
.hub-panier-barre__retirer:focus-visible { outline: 3px solid var(--aq-rouge); outline-offset: 1px; }

/* Ligne « Volume de ton bac » : − / + et préréglages, comme l'étape 1 du Bac Vivant, en compact. */
.hub-panier-barre__vol[hidden] { display: none; }
.hub-panier-barre__vol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; }
.hub-panier-barre__vol-label { flex: 1 0 100%; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--aq-texte-secondaire); }
.hub-vol {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    width: 8.5rem;
    height: 44px;
    border: 1px solid var(--aq-bordure);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    touch-action: manipulation;
}
.hub-vol:focus-within { border-color: var(--aq-vert); box-shadow: 0 0 0 3px rgba(45, 125, 70, 0.15); }
.hub-vol__btn {
    flex: 0 0 38px;
    height: 100%;
    border: none;
    background: none;
    color: var(--aq-vert);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.hub-vol__btn:active { background: var(--aq-vert-pale); }
@media (hover: hover) and (pointer: fine) { .hub-vol__btn:hover { background: var(--aq-vert-pale); } }
/* Valeur et unité se partagent le milieu : « 120 L » reste centré (même principe que .pv-stepper). */
.hub-vol__champ {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    border: none;
    outline: none;
    background: none;
    text-align: right;
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    color: var(--aq-texte);
    -moz-appearance: textfield;
}
.hub-vol__champ::-webkit-outer-spin-button,
.hub-vol__champ::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hub-vol__champ[aria-invalid="true"] { color: var(--aq-rouge); }
.hub-vol__unite { flex: 1 1 0; padding-left: 0.25rem; font-weight: 700; color: var(--aq-texte-secondaire); }
.hub-vol__presets { flex: 1 1 auto; display: flex; gap: 0.35rem; }
.hub-vol__preset {
    flex: 1 1 0;
    min-width: 0;
    min-height: 40px;
    border: 1px solid var(--aq-bordure);
    border-radius: var(--aq-rayon-pilule);
    background: #fff;
    color: var(--aq-texte);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
}
.hub-vol__preset[aria-pressed="true"] { border-color: var(--aq-vert); background: var(--aq-vert-pale); color: var(--aq-vert-texte); }
.hub-vol__preset:focus-visible,
.hub-vol__btn:focus-visible { outline: 3px solid var(--aq-vert); outline-offset: -3px; }
/* Sous 360 px : intitulé court et deux préréglages, sinon « 200 L » touche ses bords (39 px). */
@media (max-width: 359px) {
    .hub-panier-barre__vol-suite { display: none; }
    .hub-vol__preset:nth-child(n+3) { display: none; }
}

/* Verdict après un ajout : conflits et surcharge, même code couleur orange signal. */
.hub-panier-barre__alerte[hidden] { display: none; }
.hub-panier-barre__alerte {
    position: relative;
    background: var(--aq-orange-pale);
    border-left: 4px solid var(--aq-orange);
    border-radius: 8px;
    padding: 0.55rem 2.2rem 0.55rem 0.75rem;
    color: var(--aq-texte);
}
/* Verdict en cours de recalcul après un ajout ou un retrait. */
.hub-panier-barre__alerte.is-maj { opacity: 0.5; transition: opacity 0.15s; }
.hub-panier-barre__alerte-titre { margin: 0 0 0.25rem; font-size: 0.85rem; font-weight: 700; line-height: 1.3; }
.hub-panier-barre__alerte-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.hub-panier-barre__alerte-ligne { font-size: 0.78rem; line-height: 1.35; margin: 0; }
.hub-panier-barre__alerte-ligne--plus { color: var(--aq-texte-secondaire); font-style: italic; }
.hub-panier-barre__alerte-fermer {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--aq-texte);
    font-size: 0.9rem;
    cursor: pointer;
}
.hub-panier-barre__alerte-fermer:hover { background: rgba(0, 0, 0, 0.06); }
.hub-panier-barre__alerte-fermer:focus-visible { outline: 2px solid var(--aq-orange-cta-survol); outline-offset: 1px; }
.hub-panier-barre__lien {
    flex: 0 0 auto;
    border-radius: var(--aq-rayon-pilule);
    background: var(--aq-orange-cta);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.7rem 1.1rem;
    text-decoration: none;
    white-space: nowrap;
}
.hub-panier-barre__lien:hover,
.hub-panier-barre__lien:focus-visible { background: var(--aq-orange-cta-survol); color: #fff; }
.hub-panier-barre__lien:focus-visible { outline: 3px solid var(--aq-orange-cta-survol); outline-offset: 2px; }
.hub-panier-barre__lien-court { display: none; }

/* Petits écrans : « Ton bac : 2 espèces » (128 px, insécable) débordait sous le lien à 320 px
   (54 px disponibles) et sur le chevron à 375 px (109 px). Il passe à la ligne sous 400 px, et le
   lien devient « Mon bac → » sous 360 px pour lui rendre de la place. */
@media (max-width: 399px) {
    .hub-panier-barre__texte strong { white-space: normal; }
}
@media (max-width: 359px) {
    .hub-panier-barre__lien { padding: 0.7rem 0.9rem; }
    .hub-panier-barre__lien-voir { display: none; }
    .hub-panier-barre__lien-court { display: inline; }
}

/* Bannière de consentement affichée : la barre se pose au-dessus (hauteur mesurée par main.js). */
body.a-banniere-consentement .hub-panier-barre { bottom: var(--hauteur-banniere, 160px); }
body.menu-open .hub-panier-barre { display: none; }
/* Le bas du pied de page reste lisible au-dessus de la barre (--hub-barre-h : hauteur réelle,
   mesurée par hub-panier.js, qui change quand une alerte s'affiche). */
body.hub-panier-on .site-footer { padding-bottom: calc(var(--hub-barre-h, 66px) + 3rem) !important; }

@media (max-width: 768px) {
    /* Boutons de défilement du thème : au-dessus de la barre, pas dessous. */
    body.hub-panier-on .mobile-nav-buttons { bottom: calc(var(--hub-barre-h, 66px) + 14px); }
    body.hub-panier-on.a-banniere-consentement .mobile-nav-buttons { bottom: calc(var(--hauteur-banniere, 160px) + var(--hub-barre-h, 66px) + 14px); }
}

@media (min-width: 900px) {
    /* Écran large : pastille centrée plutôt qu'un bandeau pleine largeur. */
    .hub-panier-barre {
        left: 50%;
        right: auto;
        bottom: 1.25rem;
        transform: translateX(-50%);
        width: min(560px, calc(100% - 2rem));
        border: 1px solid var(--aq-bordure);
        border-radius: var(--aq-rayon-grand);
        box-shadow: var(--aq-ombre-forte);
        padding: 0.7rem 0.8rem 0.7rem 1.1rem;
    }
    body.a-banniere-consentement .hub-panier-barre { bottom: calc(var(--hauteur-banniere, 160px) + 1rem); }
}

/* ══ SECTION TITLE ══ */
.hub-section-title { font-size: 1.3rem; color: var(--hub-green); font-weight: 700; margin: 0 0 1.5rem; }

/* ══ ZONES ══ */
.hub-zone-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-bottom: 1rem; /* ← espace entre la grille et la section suivante */
}
.hub-zone-header {
    background: var(--hub-green-light);
    border-radius: var(--hub-radius);
    padding: 1.5rem;
    box-sizing: border-box;
}
.hub-zone-header--debutants {
    background: linear-gradient(135deg, #f0f9f4, #e8f4ec);
    border-left: 4px solid var(--hub-green);
}
.hub-zone-header--special {
    background: linear-gradient(135deg, #f0f9f4, #e8f4ec);
    border-left: 4px solid var(--hub-green);
}
.hub-zone-title { font-size: 1.35rem; color: var(--hub-green); font-weight: 800; margin: 0 0 0.75rem; }
.hub-zone-desc {
    font-size: 0.88rem; color: var(--hub-muted); line-height: 1.7; margin: 0;
    overflow-wrap: break-word;
}

/* ══ LEAD MAGNET ══ */
.hub-lead-magnet {
    background: linear-gradient(135deg, #1a3d28, #2d7d46);
    border-radius: var(--hub-radius);
    padding: 1.75rem;
    color: #fff;
    box-sizing: border-box;
}
.hub-lead-magnet__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.hub-lead-magnet__emoji { font-size: 2.5rem; flex-shrink: 0; }
.hub-lead-magnet__text {
    flex: 1;
    min-width: 0;
}
.hub-lead-magnet__text strong { display: block; font-size: 1rem; font-weight: 700; margin-bottom: 0.3rem; }
.hub-lead-magnet__text p { font-size: 0.85rem; color: rgba(255,255,255,0.85); margin: 0; line-height: 1.5; overflow-wrap: break-word; }
.hub-lead-form { display: flex; flex-wrap: wrap; gap: 0.5rem; flex-shrink: 0; }
.hub-lead-input {
    padding: 0.65rem 1rem;
    border: none;
    border-radius: var(--aq-rayon);
    font-size: 0.85rem;
    color: var(--hub-text);
    width: 150px;
    min-width: 0;
    box-sizing: border-box;
}
.hub-lead-input:focus { outline: 2px solid rgba(255,255,255,0.5); }
.hub-lead-btn {
    background: #fff; color: var(--hub-green); border: none; border-radius: var(--aq-rayon);
    padding: 0.65rem 1.25rem; font-size: 0.85rem; font-weight: 700;
    cursor: pointer; transition: background 0.15s, transform 0.15s; white-space: nowrap;
}
.hub-lead-btn:hover { background: #f0f9f4; transform: translateY(-1px); }
.hub-lead-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.hub-lead-magnet__note { font-size: 0.78rem; margin: 0.5rem 0 0; width: 100%; text-align: center; }

/* ══ BANNIÈRES ══ */
.hub-bannieres-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    align-items: stretch;
}
.hub-banniere {
    border-radius: var(--hub-radius);
    padding: 1.25rem;
    box-sizing: border-box;
    /* Layout colonne direct — élimine le besoin d'un div intermédiaire */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Reset total contre les règles globales du thème */
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    word-break: normal !important;
}
.hub-banniere--orange { background: linear-gradient(135deg, #fff8e1, #fff3cd); border: 1px solid #f0c870; }
.hub-banniere--rouge  { background: linear-gradient(135deg, #fff5f5, #ffeaea); border: 1px solid #f5b7b7; }
.hub-banniere--bleu   { background: linear-gradient(135deg, #e8f4fd, #d6eaf8); border: 1px solid #9dc8e8; }
.hub-banniere__emoji  { font-size: 1.8rem; line-height: 1; }
.hub-banniere__title  {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--hub-text);
    line-height: 1.4;
    writing-mode: horizontal-tb !important;
    word-break: normal !important;
    overflow-wrap: break-word;
}
.hub-banniere__desc {
    font-size: 0.78rem;
    color: var(--hub-muted);
    margin: 0;
    line-height: 1.5;
    flex: 1; /* pousse le bouton vers le bas */
    writing-mode: horizontal-tb !important;
    word-break: normal !important;
    overflow-wrap: break-word;
}

/* Aligne les 3 bannières à la même hauteur */
.hub-bannieres-grid {
    align-items: stretch; /* toutes les bannières à la même hauteur */
}
.hub-banniere__btn {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.55rem 1rem;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s;
    align-self: flex-start;
    margin-top: 0.25rem;
    writing-mode: horizontal-tb !important;
}
.hub-banniere__btn--orange { background: var(--hub-orange); color: #fff; }
.hub-banniere__btn--orange:hover { background: #c06800; }
.hub-banniere__btn--rouge  { background: var(--hub-red); color: #fff; }
.hub-banniere__btn--rouge:hover { background: #9b2b21; }
.hub-banniere__btn--bleu   { background: var(--hub-blue); color: #fff; }
.hub-banniere__btn--bleu:hover { background: #155773; }

/* ══ CTA COMPARATEUR ══ */
.hub-cta-comparateur {
    background: var(--hub-green-light);
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-radius);
    padding: 2rem;
    text-align: center;
}
.hub-cta-comparateur__title { font-size: 1.3rem; color: var(--hub-green); font-weight: 700; margin: 0 0 0.75rem; }
.hub-cta-comparateur p { font-size: 0.88rem; color: var(--hub-muted); margin: 0 auto 1.25rem; max-width: 520px; line-height: 1.6; }
.hub-btn-primary {
    display: inline-block; background: var(--hub-green); color: #fff;
    font-size: 0.9rem; font-weight: 700; padding: 0.9rem 1.75rem; border-radius: 50px;
    text-decoration: none; box-shadow: 0 3px 12px rgba(45,125,70,0.25);
    transition: background 0.15s, transform 0.15s;
}
.hub-btn-primary:hover { background: #235f35; transform: translateY(-1px); }

/* ══ FAQ ══ */
.hub-faq {
    background: #fff;
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(45,125,70,0.06);
}
.hub-faq .hub-section-title { padding: 1.75rem 1.75rem 0; }
/* Questions / réponses : accordéon commun (composants.css), intégré à la carte. */
.hub-faq .aq-acc--integre { margin-top: 0; }

/* ══ MAILLAGE ══ */
.hub-maillage__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}
.hub-maillage-card {
    background: #fff; border: 1px solid var(--hub-border); border-radius: var(--hub-radius);
    padding: 1.25rem; text-decoration: none; display: flex; flex-direction: column; gap: 0.4rem;
    transition: transform 0.15s, box-shadow 0.15s;
    min-width: 0;
}
.hub-maillage-card:hover { transform: translateY(-3px); box-shadow: var(--hub-shadow); }
.hub-maillage-card span { font-size: 1.4rem; }
.hub-maillage-card h3 { font-size: 0.85rem; font-weight: 700; color: var(--hub-text); margin: 0; line-height: 1.3; overflow-wrap: break-word; }
.hub-maillage-card p  { font-size: 0.75rem; color: var(--hub-muted); margin: 0; overflow-wrap: break-word; }

/* ══ RESPONSIVE — calqué sur fiche-poisson.css (max-width: 800px) ══ */
@media (max-width: 800px) {

    /* Layout 1 colonne */
    .hub-layout {
        grid-template-columns: 1fr;
        padding: 1rem 1rem 3rem;
        gap: 1.5rem;
    }

    /* 1.8.6 (option D) : la colonne s'efface (display: contents) pour que ses blocs se placent dans la
       grille : la recherche en premier, visible dès le chargement, au-dessus du bouton des filtres ;
       les filtres restent fermés jusqu'au clic et s'ouvrent sous le bouton. */
    .hub-sidebar,
    .hub-sidebar--open {
        position: static;
        display: contents;
    }
    /* Le champ de la colonne s'efface au profit de celui du bandeau (premier écran). */
    .hub-sidebar > .hub-search-wrap { display: none; }
    .hub-sidebar > .hub-filtres { display: none; order: 2; }
    .hub-sidebar--open > .hub-filtres { display: block; }

    .hub-hero__recherche { display: block; margin: 0.9rem 0 1rem; }
    .hub-hero__recherche-champ {
        width: 100%;
        box-sizing: border-box;
        padding: 0.8rem 1.1rem;
        border: 0;
        border-radius: 50px;
        font-size: 16px; /* iOS agrandit la page sur un champ plus petit */
        color: var(--hub-text);
        background: #fff;
        box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    }
    .hub-hero__recherche-champ:focus { outline: 3px solid rgba(255,255,255,0.7); outline-offset: 2px; }
    .hub-hero__recherche-champ::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
    .hub-hero__recherche-voir {
        display: inline-block;
        margin-top: 0.55rem;
        color: #fff;
        font-weight: 700;
        font-size: 0.88rem;
        text-decoration: underline;
    }

    /* Contenu en premier */
    .hub-content { order: 3; }

    /* Bouton toggle visible */
    .hub-filtre-toggle {
        display: flex;
        order: 1;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        background: var(--hub-green);
        color: #fff;
        border: none;
        border-radius: var(--hub-radius);
        padding: 0.9rem 1.5rem;
        font-size: 0.9rem;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.15s;
        box-sizing: border-box;
    }
    .hub-filtre-toggle:hover { background: #235f35; }
    .hub-filtre-toggle__count {
        background: rgba(255,255,255,0.3);
        border-radius: 20px;
        padding: 0.1rem 0.5rem;
        font-size: 0.78rem;
        font-weight: 700;
    }

    .hub-sidebar-cta { display: none; }

    .hub-grille { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; }

    /* Bannières en colonne */
    .hub-bannieres-grid { grid-template-columns: 1fr; }

    .hub-maillage__grid { grid-template-columns: 1fr 1fr; }
    .hub-zone-header { padding: 1.25rem; }
    .hub-hero { padding: 2.5rem 1.25rem 2rem; }
    .hub-hero__meta { gap: 0.5rem; }
    .hub-cta-comparateur { padding: 1.5rem 1.25rem; }

    /* Lead magnet en colonne */
    .hub-lead-magnet__inner { flex-direction: column; }
    .hub-lead-form { width: 100%; }
    .hub-lead-input { width: 100%; box-sizing: border-box; }

    /* Sommaire — pills sur mobile comme fiche-poisson */
    /* top: auto (1.8.6) : le « top » du mode collant restait appliqué en relative et décalait le
       sommaire de 51 px vers le bas, par-dessus le bouton « Filtrer les espèces » (qu'on ne pouvait
       toucher que sur sa moitié basse). */
    .hub-sommaire { position: relative; top: auto; }
    /* Sommaire non collant ici : les ancres ne s'arrêtent que sous le header. */
    html { scroll-padding-top: calc(var(--hauteur-header, 51px) + 8px); }
    .hub-sommaire::after {
        content: '';
        position: absolute;
        right: 0; top: 0; bottom: 0;
        width: 40px;
        background: linear-gradient(to right, transparent, #fff);
        pointer-events: none;
    }
    .hub-sommaire__list a {
        background: var(--hub-green-light);
        border-radius: 20px;
        margin: 0.4rem 0.25rem;
        border-bottom: none;
        color: var(--hub-green);
        font-weight: 700;
        padding: 0.7rem 0.85rem;
        font-size: 0.75rem;
    }
    .hub-sommaire__list a:hover {
        background: var(--hub-green);
        color: #fff;
        border-bottom: none;
    }
}

@media (max-width: 500px) {
    .hub-grille { grid-template-columns: 1fr 1fr; }
    .hub-maillage__grid { grid-template-columns: 1fr; }
}
/* 1.8.7 : pas de flash bleu au toucher sur le champ de recherche du bandeau et son lien ; le focus
   reste visible (contour blanc au focus du champ, souligné épaissi et contour au clavier sur le lien). */
.hub-hero__recherche-champ,
.hub-hero__recherche-voir { -webkit-tap-highlight-color: transparent; }
.hub-hero__recherche-voir:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }