@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --primary-color: #24D3E0;
    --background-color: #F8FAFC;
    --background-light-color: #F3F7FC;
    --footer-color: #1B505E;
    --team-bg-color: #028C84;
    --promo-yellow: #FEE518;
    --black: #141A1C;
    --green-color: #B3DE1A;
    --blue-background-color: #E2E8F0;
    --blue-hunyvers-500: #13B8C7;

    /* Les deux accents de marque, sous un nom qui DIT à quel site ils
       appartiennent. Les variables historiques ci-dessus ne le disent pas :
       « primary » ne nomme pas le caravaning, et « team-bg » vient de la page
       « les équipes » alors qu'il porte le teal de tout le portail Groupe.

       Ce sont des ALIAS, pas des remplaçants, et c'est volontaire :
       static/css/shared/base.css est un build Tailwind FIGÉ et non régénérable
       (cf. l'avertissement en tête de templates/home/home_groupe.html). Il est
       chargé APRÈS ce fichier et redéfinit --primary-color / --team-bg-color
       dans son propre :root — c'est donc LUI qui les possède à l'exécution — et
       ses classes compilées (.bg-primary, .text-primary, .border-l-primary,
       .bg-team) les référencent par leur ancien nom. Renommer à la source
       n'aurait aucun effet et laisserait ces classes derrière ; aliaser donne le
       nom lisible sans toucher au build, et sans recopier un hexadécimal. */
    --caravaning-bg: var(--primary-color); /* cyan #24D3E0 */
    --groupe-bg: var(--team-bg-color);     /* teal #028C84 */

    /* Accent de la barre de navigation : couleur du survol, de l'onglet actif et
       du survol des sous-items du déroulant (cf. static/css/navbar.css).
       La barre est PARTAGÉE par les deux sites : elle ne connaît que ce jeton, et
       c'est le site courant qui en choisit la valeur (surcharge ci-dessous). La
       valeur par défaut est le cyan caravaning — le site historique garde donc
       exactement son accent, sans rien avoir à déclarer. */
    --navbar-accent-color: var(--caravaning-bg);

    font-size: 14px;
    font-weight: normal;
}

/* Portail Groupe (hunyvers-groupe.com) : toutes ses pages sont déclinées en teal
   #028C84 — la home, les pages « Le groupe / RH » et les neuf pages de l'Espace
   investisseur rattachées au Groupe (service_site.SITE_EXCLUSIVE_PATHS), timeline
   comprise ; le cyan caravaning n'y a aucune place. Attention : hr/ n'est pas
   entièrement Groupe — /les-equipes-hunyvers et /rejoindre-le-groupe restent
   servies par hunyvers.com, et leurs aplats citent --caravaning-bg.
   Le marqueur data-site est posé sur le <body> par templates/shared/base.html,
   depuis le site résolu par l'hôte (service_site.resolve_site). Étant porté par le
   <body>, il est PLUS PROCHE des éléments de la page que le :root ci-dessus — et
   surtout que celui de static/css/shared/base.css, le build Tailwind FIGÉ chargé
   APRÈS ce fichier : les deux règles ne visent pas le même élément (:root, c'est
   <html> ; ici, c'est <body>), l'ordre de chargement ne joue donc pas et le jeton
   se résout ici en priorité, sans !important ni bataille de spécificité. */
[data-site="groupe"] {
    --navbar-accent-color: var(--groupe-bg);

    /* L'accent de marque lui-même, et pas seulement celui de la barre. Les
       gabarits du portail (/nos-engagements, /groupe-hunyvers, les offres
       d'emploi, tout l'espace investisseur) et les composants partagés qu'ils
       rendent (fil d'Ariane, boutons, titres bourse, KPI) habillent bandeaux,
       titres et survols avec les classes DÉJÀ compilées .bg-primary /
       .text-primary / .hover:bg-primary, qui citent --primary-color : le build
       figé n'a pas d'utilitaire « team » équivalent, et le régénérer n'est pas
       une option. Reteinter le jeton pour le seul site Groupe recolore donc ces
       écrans d'un coup, sans toucher un gabarit ni inventer un utilitaire que le
       build ignorerait.
       Le caravaning ne bouge pas : --caravaning-bg est substitué sur :root, il
       garde le cyan. C'est lui — et jamais --primary-color — que citent les
       règles écrites à la main (cf. la section BLOG plus bas). */
    --primary-color: var(--groupe-bg);
}

main, .footer-content, .navbar-content {
    max-width: 1920px;
    align-self: center;
    margin: 0 auto;
}

.content-alignment {
    padding-left: 14.5rem;
    padding-right: 14.5rem;
    width: 100%;
}

.right-fixed-content-alignment {
    right: 14.5rem;
}

.left-fixed-content-alignment {
    left: 14.5rem;
}

.self-end {
    align-self: end;
}

@media screen and (max-width: 1024px) {
    .content-alignment {
        padding-left: 2.75rem !important;
        padding-right: 2.75rem !important;
    }

    .right-fixed-content-alignment {
        right: 2.75rem !important;
    }

    .left-fixed-content-alignment {
        left: 2.75rem !important;
    }

    .content-alignment {
        padding-left: 2.75rem !important;
        padding-right: 2.75rem !important;
    }
}

.triangle-badge {
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px 10px;
    color: white;
    border-top: 5px;
    border-right: 0;
    border-radius: 0.25rem 0 0 0;
    font-size: 0.8rem;
    height: 4rem;
    display: flex;
    align-items: center;
}

.promo-badge {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(
            to top left,
            transparent 0%,
            transparent 50%,
            var(--promo-yellow) 50%,
            var(--promo-yellow) 100%
    );
    padding: 5px 10px;
    color: white;
    border-top: 5px;
    border-right: 0;
    border-radius: 0.25rem 0 0 0;
    font-size: 0.8rem;
    height: 4rem;
    display: flex;
    align-items: center;

    p {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(-0.125turn);
        font-weight: bold;
        color: black;
        text-align: center;
        padding-bottom: 1.75rem;
    }
}

.top-message-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--promo-yellow);
    padding: 2px 6px;
    color: white;
    border-top: 2px;
    border-right: 0;
    border-radius: 0.5rem;
    font-size: 1rem;
    height: 2rem;
    display: flex;
    align-items: center;

    p {
        font-weight: bold;
        color: black;
        text-align: center;
        padding-bottom: 0rem;
    }
}

.vendu-badge {
    background: linear-gradient(
            to top left,
            transparent 0%,
            transparent 50%,
            var(--blue-hunyvers-500) 50%,
            var(--blue-hunyvers-500) 100%
    );

    p {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(-0.125turn);
        font-weight: bold;
        color: white;
        text-align: center;
        padding-bottom: 1.75rem;
    }
}

.separator {
    width: 1px;
    background-color: #cbd5e1;
}

.divider {
    width: 100%;
    height: 1px;
    background-color: #cbd5e1;
}

.\!bg-\[#e2e8f0\] {
    background-color: #e2e8f0 !important;
}

.md\:col-start-2 {
    grid-column-start: 2;
}

.md\:col-span-6 {
    grid-column-end: span 6;
}

.img-max-height {
    max-height: 40rem !important;
}

@media screen and (min-width: 1024px) {
    .footer-alignment {
        padding-left: 11rem !important;
        padding-right: 11rem !important;
    }
}

@media screen and (min-width: 900px) {
    .min-\[900px\]\:block {
        display: block !important;
    }
    .min-\[900px\]\:hidden {
        display: none !important;
    }
}

@media screen and (min-width: 796px) {
    .lg\:h\-max {
        height: max-content !important;
    }
}

/* Logo « Hunyvers groupe » du bandeau haut (shared/incl_navbar_groupe_top.html).
   Sa colonne fait un sixième de la largeur : sans plafond, le logo, très large
   (rapport 3,8), grandissait avec l'écran jusqu'à dominer le bandeau. La
   hauteur est plafonnée ; sous ce plafond, la largeur de la colonne décide.
   Deux classes : base.css, chargée après cette feuille, porte
   « img {height:auto; max-width:100%} ». */
.navbar-content .logo-groupe-top {
    max-height: 40px;
    width: auto;
}

/* ===========================================================================
   BLOG (/blog, /blog/<slug>, /blog/categorie…, /blog/mot-cle…)

   Les encadrés typés, l'encadré « infos pratiques » et la prose assainie sont
   les SEULS habillages réellement neufs du blog : les cartes, la pagination et
   les boutons réutilisent les composants existants.

   Ces règles vivent ICI, et pas dans une feuille chargée depuis « block
   metatags », à cause d'un piège d'ordre de chargement : shared/base.html
   charge input.css PUIS base.css, et base.css est un build Tailwind FIGÉ et non
   régénérable qui redéfinit --primary-color dans son propre :root sans connaître
   --caravaning-bg. Une règle écrite à la main doit donc vivre dans ce fichier
   (où l'alias est déclaré) ou dans une feuille chargée APRÈS base.css.

   Couleur : le jeton caravaning var(--caravaning-bg) — le cyan #24D3E0 — et lui
   seul. Aucun hexadécimal en dur, et jamais --groupe-bg / --team-bg-color : le
   blog est un écran du site commercial, pas du portail Groupe. Les classes déjà
   compilées (bg-primary, text-primary, border-l-primary) sont réutilisées dans
   les gabarits plutôt que d'inventer des utilitaires que le build figé ignore.

   « color-mix » plutôt qu'un second hexadécimal éclairci : le fond des encadrés
   reste ainsi dérivé du jeton, donc juste par construction le jour où l'accent
   caravaning change.
   =========================================================================== */

/* --- En-tête de /blog : montgolfière, lettrage, pitch -------------------
   Une rangée, trois colonnes, comme sur l'ancien blog WordPress. Les deux
   illustrations sont dimensionnées en « fraction de la rangée » et non en
   pixels : c'est ce qui garde la rangée équilibrée du palier 1024 px jusqu'au
   main à 1920 px, sans point de rupture intermédiaire.

   En dessous du palier, la rangée se replie en colonne et la montgolfière
   disparaît : à 380 px de large, un troisième bloc décoratif ne fait que
   repousser les articles sous la ligne de flottaison. */
.blog-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
}
.blog-hero__illustration { display: none; }
.blog-hero__title { margin: 0; }
.blog-hero__title img { width: 15rem; height: auto; }
.blog-hero__text > *:last-child { margin-bottom: 0; }
.blog-hero__text p { margin: 0 0 0.75rem; line-height: 1.7; }
.blog-hero__text p:last-child { font-weight: 700; }

@media screen and (min-width: 1024px) {
    /* La rangée occupe TOUTE la largeur de .content-alignment : la montgolfière
       est alignée sur le bord gauche de la grille d'articles, le pitch sur son
       bord droit. C'est ce que ~space-between~ tient — et non ~center~, qui
       laissait le bandeau flotter, plus étroit que la grille qu'il coiffe.

       Les trois colonnes gardent une base FIXE plutôt qu'un pourcentage : le
       lettrage est une image presque carrée (800 × 774), donc tout gain de
       largeur se paie en hauteur. Le laisser grandir avec l'écran aurait fait
       un bandeau de 500 px de haut sur un 24 pouces. La marge restante part
       donc dans les deux gouttières, pas dans les images. */
    .blog-hero {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
        text-align: left;
    }
    .blog-hero__illustration {
        display: block;
        flex: 0 0 9rem;
    }
    .blog-hero__illustration img { width: 100%; height: auto; }
    .blog-hero__title { flex: 0 1 25rem; }
    .blog-hero__title img { width: 100%; }
    .blog-hero__text { flex: 0 1 43rem; max-width: none; }
}

/* Au-delà de 1280 px (le palier « xl »), la pleine largeur de la grille est
   TROP LARGE pour un bandeau : les trois blocs finissaient séparés par des
   gouttières de 200 px et plus, et le pitch se lisait à l'autre bout de
   l'écran. Le bandeau se resserre donc à 80 % de .content-alignment, centré :
   il reste manifestement le bandeau DE la grille — même axe, même respiration
   — sans en épouser les bords au pixel.

   80 % et non une largeur en rem : la référence est la grille d'articles, pas
   une mesure absolue. Le jour où .content-alignment change de marges, le
   bandeau suit. */
@media screen and (min-width: 1280px) {
    .blog-hero {
        width: 80%;
        margin-inline: auto;
    }
}

/* --- Le bas des écrans de liste ------------------------------------------
   Une respiration entre la dernière rangée de cartes (ou la pagination) et le
   pied de page : collées au footer, les cartes du bas donnaient à la grille
   l'air d'être coupée.

   Écrit à la main et non en utilitaire Tailwind, pour la raison donnée en tête
   de section : le build figé ne connaît que pb-2/3/4/6/7/8/11, et le build
   « browser » ne génère pas les paliers manquants à l'exécution. Une classe
   pb-12 serait donc restée SANS EFFET — silencieusement. */
.blog-list-tail { padding-bottom: 3rem; }

@media screen and (min-width: 1024px) {
    .blog-list-tail { padding-bottom: 4.5rem; }
}

/* --- Prose assainie (chapô, blocs, encadrés) ---------------------------- */
.blog-prose > *:first-child { margin-top: 0; }
.blog-prose > *:last-child { margin-bottom: 0; }
.blog-prose p { margin: 0 0 1rem; line-height: 1.75; }
.blog-prose ul,
.blog-prose ol { margin: 0 0 1rem 1.25rem; line-height: 1.75; }
.blog-prose ul { list-style: disc; }
.blog-prose ol { list-style: decimal; }
.blog-prose li { margin-bottom: 0.25rem; }
.blog-prose a { text-decoration: underline; }
.blog-prose h3,
.blog-prose h4,
.blog-prose h5,
.blog-prose h6 { font-weight: 700; margin: 1.5rem 0 0.5rem; }

/* Un tableau de comparatif déborde en mobile : il défile dans son propre
   conteneur plutôt que de faire défiler la page entière. */
.blog-prose table { display: block; overflow-x: auto; width: 100%; margin: 0 0 1rem; border-collapse: collapse; }
.blog-prose th,
.blog-prose td { border: 1px solid var(--blue-background-color); padding: 0.5rem 0.75rem; text-align: left; }
.blog-prose th { background-color: var(--background-light-color); font-weight: 700; }

.blog-brief p { font-size: 1.15rem; line-height: 1.8; }

/* --- Largeur de lecture de l'article ------------------------------------
   L'article ne prend PAS la largeur de l'écran. Le reste du site utilise
   .content-alignment (14,5 rem de marge de chaque côté d'un main à 1920 px) : sur
   un grand écran cela laisse ~1650 px de contenu, donc deux colonnes de 800 px et
   des images démesurées. Une page éditoriale se lit sur une largeur bornée.

   84 rem (~1345 px) : deux colonnes d'environ 620 px après les marges et la
   gouttière. C'est LE nombre à régler pour respirer plus ou moins large :
   72 rem ≈ 1150 px, 78 rem ≈ 1250 px, 84 rem ≈ 1345 px, 90 rem ≈ 1440 px.
   Au-delà de ~620 px de colonne, la variante « l » des images est agrandie
   au-dessus de sa taille servie : c'est le plafond utile avant de passer les
   images en variante « xl ». */
.blog-article {
    max-width: 84rem;
    margin-inline: auto;
    padding-left: 2.75rem;
    padding-right: 2.75rem;
    width: 100%;
}
@media screen and (max-width: 640px) {
    .blog-article { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* --- Blocs, images, légendes -------------------------------------------- */
.blog-block { margin: 0 0 2rem; display: flex; flex-direction: column; gap: 1rem; }

/* Bloc illustré : texte d'un côté, image de l'autre, et le côté s'inverse d'un
   bloc illustré au suivant (classe posée par le gabarit, qui ne compte que les
   blocs portant une image).

   La bascule n'existe qu'au-dessus du palier : en dessous, .blog-block reste une
   colonne et c'est l'ordre du DOM qui rend — titre, texte, image. Deux colonnes
   sur un téléphone donneraient deux colonnes illisibles.

   ``align-items: center`` aligne les deux colonnes sur leur MILIEU : le texte se
   centre verticalement en regard de l'image, et réciproquement si c'est lui le
   plus haut. C'est aussi ce qui empêche l'image de s'étirer à la hauteur du texte
   — une image de bloc garde son ratio, elle n'est pas un fond. */
@media (min-width: 768px) {
    .blog-block--split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem 2.5rem;
        align-items: center;
    }
    .blog-block--split .blog-block__text { grid-column: 1; grid-row: 1; }
    .blog-block--split .blog-block__media { grid-column: 2; grid-row: 1; margin: 0; }
    .blog-block--split.blog-block--reverse .blog-block__text { grid-column: 2; }
    .blog-block--split.blog-block--reverse .blog-block__media { grid-column: 1; }
}

/* Encadrés et bouton : SOUS les deux colonnes — ils commentent le bloc entier,
   pas la colonne de texte.

   L'encadré prend la PLEINE LARGEUR du bloc, donc celle du texte ET de l'image
   réunis : c'est ce qui le fait lire comme une remarque sur l'ensemble, et non
   comme un aparté de la colonne de gauche. Aucune largeur maximale ici.

   Seul le bouton reste à sa taille et se centre — un bouton étiré sur toute la
   largeur ne se lit plus comme un bouton. */
.blog-block__aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.blog-block--split .blog-block__aside { grid-column: 1 / -1; }
.blog-block__aside > * { width: 100%; }
.blog-block__aside > .pt-2 { width: auto; }

.blog-figure { margin: 0 0 1.5rem; }

/* Plafonds de hauteur : sans eux une image portrait devient une tour, et l'image
   de chapô pousse tout l'article sous la ligne de flottaison. Le recadrage par
   ``object-fit: cover`` est préférable à une déformation. */
.blog-article > header .blog-figure img { max-height: 30rem; object-fit: cover; }
.blog-block__media img { max-height: 24rem; object-fit: cover; }
.blog-figure__caption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 300;
    color: var(--footer-color);
}

.blog-footer-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem 0;
}

/* --- Partage --------------------------------------------------------------
   Des liens sobres, alignés sur la ligne de méta : le partage accompagne
   l'article, il ne le concurrence pas. La couleur de survol vient du jeton
   caravaning, comme le reste du blog. */
.blog-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.25rem;
}
.blog-share__label {
    font-size: 0.85rem;
    font-weight: 700;
    margin-right: 0.25rem;
}
.blog-share__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--blue-background-color);
    border-radius: 9999px;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--footer-color);
    background: none;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.blog-share__link:hover,
.blog-share__link:focus-visible {
    color: var(--caravaning-bg);
    border-color: var(--caravaning-bg);
}

/* --- Encadrés typés ------------------------------------------------------
   hunyx ne stocke que la NATURE de l'encadré : l'icône et le libellé sont
   choisis par le gabarit (components/blog/blog-callout.html), la teinte l'est
   ici. Toutes les natures partagent le même habillage : ce qui les distingue
   visuellement est l'icône, pas cinq palettes à tenir à jour. */
.blog-callout {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin: 0 0 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: 0.25rem;
    border-left-width: 4px;
    border-left-style: solid;
    background-color: color-mix(in srgb, var(--caravaning-bg) 10%, white);
}
.blog-callout__icon { font-size: 1.5rem; line-height: 1.6; flex-shrink: 0; }
.blog-callout__body { flex: 1 1 auto; }
.blog-callout__label {
    font-weight: 700;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}
/* L'encadré générique (nature absente — cas normal du contrat) reste neutre :
   il n'annonce rien, il se contente d'être un aparté. */
.blog-callout--generique { background-color: var(--background-light-color); }

/* --- « Infos pratiques » des articles de salon -------------------------- */
.blog-event {
    margin: 0 0 2rem;
    padding: 1.25rem 1.5rem;
    border-radius: 0.25rem;
    border-left-width: 4px;
    border-left-style: solid;
    background-color: color-mix(in srgb, var(--caravaning-bg) 14%, white);
}
.blog-event__title { font-weight: 700; font-size: 1.1rem; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
.blog-event__list { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0; }
.blog-event__list dt { font-weight: 700; }
.blog-event__list dd { margin: 0; word-break: break-word; }

/* --- Mots-clés d'un article : des puces CLIQUABLES vers leur page --------- */
.blog-keyword {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.85rem;
    background-color: color-mix(in srgb, var(--caravaning-bg) 16%, white);
}
a.blog-keyword:hover,
a.blog-keyword:focus-visible {
    background-color: color-mix(in srgb, var(--caravaning-bg) 32%, white);
}

/* --- Navigation dérivée : le bandeau (accueil, index, pages de filtre) ----
   Le même bandeau sur les cinq écrans de liste : chaque page du blog reste à
   un clic des autres. La valeur courante est un <span>, jamais un lien. */
.blog-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.25rem 0 0.75rem;
}
.blog-nav__link {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 0.9rem;
    text-decoration: none;
    color: inherit;
    background-color: color-mix(in srgb, var(--caravaning-bg) 12%, white);
}
.blog-nav__link:hover,
.blog-nav__link:focus-visible {
    background-color: color-mix(in srgb, var(--caravaning-bg) 28%, white);
}
.blog-nav__link--active {
    font-weight: 700;
    background-color: var(--caravaning-bg);
}

/* --- La barre de recherche du blog ----------------------------------------
   Sur la MÊME ligne que le bandeau de navigation en grand écran, dessous en
   petit : c'est un outil de la liste, pas un second en-tête. Le bandeau prend
   la place qu'il lui faut, la barre prend le reste.

   Le bandeau (.blog-nav) porte déjà son padding bas : ici on ne compense rien,
   on s'aligne sur lui. */
.blog-search {
    display: flex;
    /* Serré : le bouton touche presque le champ, comme dans les filtres du site.
       Un écart plus large les ferait lire comme deux commandes distinctes. */
    gap: 0.35rem;
    align-items: stretch;
    padding: 0 0 0.75rem;
    max-width: 26rem;
}

/* Le label est LU mais pas vu : masqué à l'œil sans sortir de l'arbre
   d'accessibilité (ni display:none ni visibility:hidden, qui l'en sortiraient).
   Le dépôt n'avait pas de classe pour cela — Tailwind a sr-only, mais ces
   classes-ci sont écrites à la main dans cette feuille. */
.blog-search__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Le champ : GRIS CLAIR au repos, l'accent caravaning PLEIN au survol comme à
   la saisie — deux états, et le même que celui des champs du site
   (.border-input-primary, qui passe lui aussi à --primary-color aux deux).
   Le rayon de 6px est le leur aussi ; ce n'est pas une puce du bandeau, c'est
   un champ. Aucune teinte intermédiaire : un survol qui n'irait qu'à mi-chemin
   de l'accent ne se lirait pas comme une réaction. */
.blog-search__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.9rem;
    color: inherit;
    border: 1px solid var(--blue-background-color);
    background-color: white;
    transition: border-color 0.15s ease;
}
.blog-search__input:hover,
.blog-search__input:focus,
.blog-search__input:focus-visible {
    border-color: var(--caravaning-bg);
}
/* La saisie AU CLAVIER garde en plus son liseré : le bord seul suffit à la
   souris, pas à qui navigue sans elle. L'anneau double le bord, il ne le
   remplace pas — d'où le outline retiré. */
.blog-search__input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 1px var(--caravaning-bg);
}

/* Le bouton : l'appel à l'action du site, en plus petit. Mêmes traits que la
   macro roundedButton (noir, blanc, demi-gras, rayon 0.25rem, l'accent au
   survol) — seule la hauteur diffère, parce que la barre doit rester une barre
   et non un bandeau de formulaire. */
.blog-search__submit {
    flex: 0 0 auto;
    padding: 0.4rem 1.15rem;
    border-radius: 0.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    color: white;
    background-color: black;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.blog-search__submit:hover,
.blog-search__submit:focus-visible {
    color: black;
    background-color: var(--caravaning-bg);
}

/* « Effacer la recherche » : posé dans l'entête de résultats, pas dans le
   formulaire — il ne soumet rien, il ramène à /blog nu. */
.blog-search__clear {
    margin-left: 0.75rem;
    font-size: 0.9rem;
    text-decoration: underline;
}

/* La rangée qui porte les deux : le bandeau à gauche, la barre à droite, et
   l'un sous l'autre dès que la ligne ne suffit plus (flex-wrap, pas de media
   query — c'est la longueur du bandeau qui décide, pas la largeur de l'écran).
   La classe est posée sur la <section class="content-alignment"> elle-même, qui
   ne portait qu'un padding : la mettre en flex ne déplace rien d'autre. */
.blog-nav-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 1.5rem;
}
.blog-nav-row > .blog-search { flex: 1 1 16rem; }

/* --- Navigation dérivée : les cartes des deux index ----------------------
   Un libellé, un compteur — celui de hunyx, zéro compris —, une description
   facultative. Le même habillage pour les catégories et pour les mots-clés :
   c'est la même navigation, elle n'a pas à se présenter de deux façons. */
.blog-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.blog-hub-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    height: 100%;
    padding: 1.1rem 1.25rem;
    border-radius: 0.25rem;
    border-left: 4px solid var(--caravaning-bg);
    background-color: color-mix(in srgb, var(--caravaning-bg) 10%, white);
}
.blog-hub-card:hover,
.blog-hub-card:focus-visible {
    background-color: color-mix(in srgb, var(--caravaning-bg) 20%, white);
}
.blog-hub-card__label { font-weight: 700; font-size: 1.05rem; }
.blog-hub-card__count { font-size: 0.85rem; font-weight: 300; }
.blog-hub-card__description { font-size: 0.9rem; line-height: 1.5; }