/*
Theme Name: Heritage L&L (enfant de Hello Elementor)
Template: hello-elementor
Description: Thème enfant pour le site de Mathieu — restauration de mobilier ancien, mise en relation particuliers/artisans + petites annonces "Le Grenier Héritage". Fournit la charte complète (couleurs, typo, boutons, en-tête, compteur, cartes artisans/annonces, barre de recherche, bandeau adhésion) inspirée des maquettes DA validées. Toute la mise en page fine se construit ensuite avec Elementor.
Version: 7.27
Author: Arnaud Aubadie-Ladrix
*/

/* ==========================================================================
   1. VARIABLES DE MARQUE — à ajuster ici, tout le site suit automatiquement
   ========================================================================== */
:root {
    --hll-vert-fonce: #232f22;      /* vert profond quasi noir — nav, bandeaux, compteur */
    --hll-vert-moyen: #2b3a2f;      /* vert profond — variante un peu plus claire */
    --hll-vert-clair: #6f7040;      /* vert olive — pour le footer, distinct des verts foncés */
    --hll-marron: #4a3728;          /* marron chocolat — titres, accents, boutons "voir profil" */
    --hll-creme: #f5f1e8;           /* crème — fonds clairs */
    --hll-creme-fonce: #ece4d1;     /* crème plus soutenu — encarts, bordures de cartes */
    --hll-dore: #b08d57;            /* doré/cuivré — accents, boutons principaux */
    --hll-dore-clair: #c9a86a;
    --hll-dore-hover: #97764a;
    --hll-noir-fond: #14180f;       /* fond quasi noir du compteur type "compteur à volets" */
    --hll-texte: #2c2c2c;
    --hll-texte-clair: #f5f1e8;

    --hll-font-titres: 'Playfair Display', Georgia, serif;
    --hll-font-texte: 'Inter', -apple-system, sans-serif;

    --hll-radius: 4px;
}

/* ==========================================================================
   2. TYPOGRAPHIE GÉNÉRALE
   ========================================================================== */
body, p, li, span, div, a {
    font-family: var(--hll-font-texte) !important;
}
body {
    color: var(--hll-texte);
    background-color: var(--hll-creme); /* évite un liseré blanc visible sous le menu fixe */
    overflow-x: hidden; /* évite la barre de défilement horizontale liée aux bandeaux plein écran */
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.hll-titre {
    font-family: var(--hll-font-titres) !important;
    color: var(--hll-marron) !important;
    font-weight: 700;
}

a {
    color: var(--hll-dore);
}
a:hover {
    color: var(--hll-dore-hover);
}

/* Petit séparateur "fleur de lis" utilisable partout entre deux blocs de texte */
.hll-separateur {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 18px 0;
    color: var(--hll-dore);
}
.hll-separateur::before,
.hll-separateur::after {
    content: "";
    height: 1px;
    width: 60px;
    background-color: var(--hll-dore);
    opacity: 0.6;
}
.hll-separateur .hll-fleuron {
    font-size: 1rem;
}

/* ==========================================================================
   3. EN-TÊTE / MENU
   Reproduit la nav sombre vue sur les maquettes : logo à gauche, liens en
   majuscules espacées, bouton CTA doré à droite. Construit comme une
   section Elementor "Header" (voir trame-elementor.md) ; ces règles
   s'appliquent aussi si vous gardez un header WordPress classique.
   ========================================================================== */
:root {
    --hll-hauteur-entete: 130px;
}

/* Fond crème, fixe en haut de l'écran en permanence (desktop ET mobile) —
   "fixed" au lieu de "sticky" : ça évite les bugs liés aux conteneurs
   parents qui empêchent "sticky" de fonctionner. On compense avec un
   padding-top sur le body pour que le contenu ne soit pas caché dessous. */
.site-header,
.hll-entete {
    background-color: var(--hll-creme) !important;
    padding: 14px 40px;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    min-height: var(--hll-hauteur-entete);
    box-sizing: border-box;
    z-index: 999;
    box-shadow: 0 2px 12px rgba(35, 47, 34, 0.08);
    /* Force le logo tout à gauche et le menu tout à droite, avec le
       maximum d'écart entre les deux (au lieu d'être resserrés vers le
       centre par défaut). */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap;
}
body {
    padding-top: var(--hll-hauteur-entete);
}

/* Logo posé via Apparence > Personnaliser > Identité du site */
.custom-logo-link {
    display: inline-block;
    margin-right: auto; /* pousse tout le reste (menu) vers la droite */
}
.custom-logo {
    max-height: 110px !important;
    width: auto !important;
}

/* Animation au survol des liens du menu : petit soulignement doré qui se
   déploie de gauche à droite */
.site-navigation a,
.site-navigation__menu a,
.hll-entete nav a {
    position: relative;
}
.site-navigation a::after,
.site-navigation__menu a::after,
.hll-entete nav a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 2px;
    background-color: var(--hll-dore);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
.site-navigation a:hover::after,
.site-navigation__menu a:hover::after,
.hll-entete nav a:hover::after,
.site-navigation a.active::after,
.site-navigation__menu a.active::after,
.hll-entete nav a.active::after {
    transform: scaleX(1);
}

.hll-entete .hll-logo-texte {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--hll-font-titres);
    color: var(--hll-marron);
    font-size: 1.3rem;
    letter-spacing: 0.03em;
    line-height: 1.1;
}
.hll-entete .hll-logo-texte img {
    height: 40px;
    width: auto;
}
.hll-entete .hll-logo-baseline {
    display: block;
    font-family: var(--hll-font-texte);
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    color: var(--hll-dore-hover);
    text-transform: uppercase;
}

.site-navigation a,
.site-navigation__menu a,
.hll-entete nav a {
    font-family: var(--hll-font-texte);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
    color: var(--hll-marron) !important;
    padding: 6px 14px;
}
.hll-entete nav a:hover,
.hll-entete nav a.active {
    color: var(--hll-dore-hover) !important;
}

.hll-entete .hll-badge-nouveau {
    background-color: var(--hll-dore);
    color: var(--hll-vert-fonce);
    font-size: 0.65rem;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    font-weight: 700;
}

.hll-entete .hll-btn {
    padding: 10px 22px;
    font-size: 0.75rem;
}

/* ==========================================================================
   4. BOUTONS
   ========================================================================== */
.wp-block-button__link,
.hll-btn,
button,
input[type="submit"] {
    background-color: var(--hll-dore);
    color: #ffffff;
    border: none;
    border-radius: 2px;
    padding: 14px 28px;
    font-family: var(--hll-font-texte);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    font-weight: 600;
    transition: background-color 0.2s ease;
    cursor: pointer;
}
.wp-block-button__link:hover,
.hll-btn:hover,
button:hover,
input[type="submit"]:hover {
    background-color: var(--hll-dore-hover);
    color: #ffffff;
}

.hll-btn-secondaire {
    background-color: transparent;
    border: 1px solid var(--hll-marron);
    color: var(--hll-marron);
}
.hll-btn-secondaire:hover {
    background-color: var(--hll-marron);
    color: #ffffff;
}

.hll-btn-vert {
    background-color: var(--hll-vert-fonce);
    color: var(--hll-creme);
}
.hll-btn-vert:hover {
    background-color: var(--hll-vert-moyen);
}

/* ==========================================================================
   5. SECTION HERO (page d'accueil / pages de section)
   ========================================================================== */
.hll-hero {
    background-color: var(--hll-creme);
    padding: 80px 40px;
}
.hll-hero h1 {
    font-size: 2.6rem;
    line-height: 1.2;
    margin-bottom: 20px;
}
.hll-hero p {
    font-size: 1.1rem;
    max-width: 480px;
    margin-bottom: 30px;
}
.hll-hero-image {
    border-radius: var(--hll-radius);
    overflow: hidden;
}

/* Bandeau hero et section Mission en 2 colonnes (texte + photo) */
.hll-hero-colonnes,
.hll-mission-colonnes {
    align-items: center;
    gap: 40px;
}
.hll-hero-photo,
.hll-mission-photo {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--hll-radius);
    margin: 0;
    box-shadow: 0 20px 50px rgba(35, 47, 34, 0.18);
}
.hll-hero-photo img,
.hll-mission-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 768px) {
    .hll-hero-colonnes,
    .hll-mission-colonnes {
        gap: 24px;
    }
    .hll-hero-photo,
    .hll-mission-photo {
        aspect-ratio: 16 / 10;
    }
}

/* ==========================================================================
   CORRECTIF — écart blanc entre le bas du menu fixe et le haut de la photo.
   Cause réelle : même quand le titre de page est masqué ("Masquer le
   titre" dans les réglages Hello Elementor), le thème garde en mémoire un
   conteneur d'en-tête de page (entry-header / page-header) et le
   conteneur de contenu (site-content / entry-content) avec leur propre
   marge et rembourrage. Ce sont EUX qui créaient le petit bandeau blanc
   au-dessus de la photo, pas notre bloc. On les remet tous à zéro ici.
   ========================================================================== */
.site,
#page,
.site-content,
main,
main#main,
article,
.entry-content,
.page-content,
.hentry {
    margin-top: 0 !important;
    padding-top: 0 !important;
    background-color: var(--hll-creme) !important; /* plus aucun blanc résiduel, tout en crème */
}
.entry-header,
.page-header {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}
/* Le tout premier bloc de contenu de la page doit toucher le body
   (lui-même compensé par padding-top pour rester sous le menu fixe) */
.entry-content > *:first-child,
.site-content > *:first-child {
    margin-top: 0 !important;
}

/* ==========================================================================
   Bandeau "photo plein cadre + texte par-dessus" — pattern réutilisable
   partout où on veut l'effet vu sur la maquette de Mathieu : une vraie
   photo en fond, assombrie, avec le titre/texte/boutons par-dessus.
   Construit avec 2 blocs natifs WordPress (Image + Groupe) : la photo se
   remplace en un clic dans l'éditeur ("Remplacer"), sans toucher au code.
   ========================================================================== */
.hll-hero-photo-texte {
    position: relative;
    overflow: hidden;
    margin-top: 0 !important; /* tue tout espace par défaut entre le menu fixe et la photo */
    margin-bottom: -1px !important; /* léger chevauchement : élimine tout filet résiduel entre deux bandeaux qui se suivent */
    /* Sort du conteneur limité du thème pour aller bord à bord, écran entier.
       Technique calc() (au lieu de left:50%/margin:-50vw) : plus robuste,
       fonctionne quel que soit le modèle de page ou les conteneurs ajoutés
       automatiquement par WordPress autour d'un bloc Groupe — c'est la même
       technique déjà utilisée pour tous les autres bandeaux plein écran du
       site (bandeau de confiance, comment ça marche, stats). */
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw !important;
}
.hll-hero-photo-fond {
    margin: 0;
}
.hll-hero-photo-fond img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
    filter: brightness(0.55);
}
.hll-hero-photo-contenu {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
    max-width: 760px;
    margin: 0 auto;
}
.hll-hero-photo-contenu h1,
.hll-hero-photo-contenu h2 {
    color: #ffffff !important;
    font-size: 2.6rem;
}
.hll-hero-photo-contenu p {
    color: var(--hll-creme);
    max-width: 640px;
}
/* Variante alignée à gauche (bandeau d'accueil, comme sur la maquette de
   Mathieu) : texte + boutons collés à gauche plutôt que centrés. */
.hll-hero-photo-contenu.hll-aligne-gauche {
    align-items: flex-start;
    text-align: left;
    max-width: 100%;
    margin: 0;
    padding-left: 60px;
    padding-right: 60px;
}
.hll-hero-photo-contenu.hll-aligne-gauche p {
    margin-left: 0;
    max-width: 480px;
}
/* Variante alignée à droite : même principe, mais collée à droite — utile
   quand le sujet de la photo (mains, meuble...) se trouve du côté gauche. */
.hll-hero-photo-contenu.hll-aligne-droite {
    align-items: flex-end;
    text-align: right;
    max-width: 100%;
    margin: 0;
    padding-left: 60px;
    padding-right: 60px;
    margin-left: auto;
}
.hll-hero-photo-contenu.hll-aligne-droite p {
    margin-right: 0;
    margin-left: auto;
    max-width: 480px;
}
/* Le titre suit la même largeur que le texte en dessous, pour qu'il revienne
   à la ligne au même endroit plutôt que de s'étaler sur toute la largeur. */
.hll-hero-photo-contenu.hll-aligne-droite h1,
.hll-hero-photo-contenu.hll-aligne-droite h2 {
    max-width: 560px;
    margin-left: auto;
    margin-right: 0;
}
.hll-hero-photo-contenu.hll-aligne-droite .wp-block-buttons {
    justify-content: flex-end;
}
/* Petit sur-titre doré ("Notre mission") au-dessus des titres de bandeau */
.hll-suptitre {
    color: var(--hll-dore-clair) !important;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0 0 4px !important;
    max-width: none !important;
}
/* Le bandeau d'accueil est plus haut que les bandeaux secondaires */
.hll-hero-accueil .hll-hero-photo-fond img {
    height: 640px;
}
/* Bandeaux secondaires plein écran de la home (mission / artisans / CTA) —
   un peu moins hauts que le hero principal */
.hll-hero-mission .hll-hero-photo-fond img,
.hll-hero-artisans-home .hll-hero-photo-fond img,
.hll-hero-nos-artisans .hll-hero-photo-fond img {
    height: 480px;
}
/* Recadrage : on descend le point de vue pour cadrer sur les mains qui
   travaillent le meuble plutôt que sur les bras/épaules. Ajustable si
   besoin (0% = haut de la photo visible, 100% = bas de la photo visible). */
.hll-hero-artisans-home .hll-hero-photo-fond img {
    object-position: center 80%;
}
/* Sur mobile/tablette, le cadre devient plus étroit et plus haut par
   rapport à sa largeur : à recadrage égal, on voit alors beaucoup plus de
   hauteur de la photo, ce qui remontre Mathieu en entier alors qu'on ne
   veut voir que ses mains sur cette page (sa présentation complète reste
   réservée à la page "À propos"). On descend donc encore plus le point de
   vue sur les petits écrans, pour ne garder que le bas de la photo. */
@media (max-width: 1024px) {
    .hll-hero-artisans-home .hll-hero-photo-fond img {
        object-position: center 96%;
    }
}
.hll-hero-cta .hll-hero-photo-fond img {
    height: 380px;
    /* Recadrage : on descend le point de vue pour cadrer sur la devanture
       du meuble (façade à tiroirs) plutôt que sur les livres/le vase posés
       dessus. Ajustable (0% = haut de la photo visible, 100% = bas). */
    object-position: center 75%;
}
/* Bandeau "Nos Artisans" : photo d'un artisan en train de travailler le
   bois. Par défaut le cadrage est centré et coupe trop haut (on ne voit
   pas les mains ni le bois travaillé) — on descend le point de vue.
   Ajustable si besoin (0% = haut de la photo visible, 100% = bas). */
.hll-hero-nos-artisans .hll-hero-photo-fond img {
    object-position: center 85%;
}
@media (max-width: 1024px) {
    .hll-hero-nos-artisans .hll-hero-photo-fond img {
        object-position: center 95%;
    }
}
/* CORRECTIF — "carrés blancs" aux extrémités du bandeau d'accueil.
   Cause réelle trouvée : ce n'est pas un bug de fond CSS, c'est la photo
   elle-même. Sur un très grand écran, le bandeau est si large par rapport
   à sa hauteur que la photo est affichée sans AUCUN recadrage horizontal
   (seul le haut/bas est coupé) : on voit alors ses deux bords d'origine,
   qui montrent des taches de lumière floues (bokeh de la plante à gauche,
   porte/fenêtre très lumineuse à droite) — d'où ces "ronds/carrés blancs".
   On zoome légèrement la photo (elle déborde du cadre) pour repousser ces
   deux bords hors du champ visible et ne garder que le meuble, quel que
   soit la largeur de l'écran. Même photo réutilisée sur le bandeau CTA
   final : même correctif appliqué par cohérence. */
.hll-hero-accueil .hll-hero-photo-fond img,
.hll-hero-cta .hll-hero-photo-fond img {
    transform: scale(1.5) !important;
}
@media (max-width: 768px) {
    .hll-hero-accueil .hll-hero-photo-fond img,
    .hll-hero-cta .hll-hero-photo-fond img {
        transform: scale(1.25) !important;
    }
}
.hll-hero-mission,
.hll-hero-artisans-home,
.hll-hero-cta {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* Tous les blocs de la page s'enchaînent sans le moindre espace entre eux
   (aucune ligne crème visible entre deux bandeaux) : on tue la marge que
   WordPress ajoute par défaut entre chaque bloc de premier niveau, ET le
   "gap" que Gutenberg ajoute au conteneur lui-même (une simple marge à 0
   sur les enfants ne suffit pas si le parent a son propre espacement). */
.entry-content,
.site-content,
.hentry {
    gap: 0 !important;
    row-gap: 0 !important;
}
.entry-content > *,
.entry-content .wp-block-shortcode,
.entry-content .wp-block-group,
.site-content > *,
.hentry > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* Le shortcode du compteur est rendu dans un conteneur qui garde parfois
   un fond blanc et un rembourrage par défaut : on le neutralise pour ne
   laisser apparaître que le crème du corps de page tout autour. */
.wp-block-shortcode {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Bouton secondaire (contour) : sur une photo sombre, un contour marron ne
   se voit pas — on le passe en blanc pour cette variante. */
.hll-hero-photo-contenu .hll-btn-secondaire {
    border-color: #ffffff;
    color: #ffffff;
}
.hll-hero-photo-contenu .hll-btn-secondaire:hover {
    background-color: #ffffff;
    color: var(--hll-marron);
}
@media (max-width: 768px) {
    .hll-hero-photo-fond img {
        height: 420px;
    }
    .hll-hero-accueil .hll-hero-photo-fond img {
        /* Un peu plus haut sur l'accueil : le texte + les 2 boutons ont
           besoin de place pour ne pas toucher le compteur qui chevauche
           juste en dessous. */
        height: 560px;
    }
    .hll-hero-photo-contenu h1,
    .hll-hero-photo-contenu h2 {
        font-size: 1.9rem;
    }
    .hll-hero-photo-contenu.hll-aligne-gauche,
    .hll-hero-photo-contenu.hll-aligne-droite {
        padding-left: 24px;
        padding-right: 24px;
        padding-bottom: 40px;
    }
}

/* Hero sombre avec photo de fond (ex : Le Grenier Héritage, Nos Artisans) */
.hll-hero-sombre {
    position: relative;
    padding: 90px 40px;
    color: var(--hll-texte-clair);
    text-align: center;
    background-color: var(--hll-vert-fonce);
    background-size: cover;
    background-position: center;
}
.hll-hero-sombre::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20,24,15,0.55), rgba(20,24,15,0.75));
}
.hll-hero-sombre > * {
    position: relative;
    z-index: 1;
}
.hll-hero-sombre h1 {
    color: #ffffff !important;
    font-size: 2.6rem;
}
.hll-hero-sombre p {
    color: var(--hll-creme);
    max-width: 640px;
    margin: 0 auto 30px;
}

/* Variante hero sombre en 2 colonnes (texte + photo) : on repasse le texte
   à gauche, plus adapté qu'un texte centré dans une colonne étroite. */
.hll-hero-sombre .hll-hero-colonnes {
    text-align: left;
}
.hll-hero-sombre .hll-hero-colonnes h1,
.hll-hero-sombre .hll-hero-colonnes p {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
}

/* ==========================================================================
   6. BANDEAU DE CONFIANCE (icônes sous le hero)
   ========================================================================== */
.hll-bandeau-confiance {
    background-color: var(--hll-vert-fonce); /* même vert profond que le reste des bandeaux sombres */
    color: var(--hll-texte-clair);
    padding: 26px 20px;
    text-align: center;
    /* Bandeau plein écran, bord à bord (même technique que les photos hero) */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    position: relative;
}
.hll-bandeau-confiance p {
    color: var(--hll-texte-clair) !important;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}
@media (max-width: 768px) {
    .hll-bandeau-confiance p {
        font-size: 0.85rem;
        letter-spacing: 0.03em;
    }
}

/* ==========================================================================
   7. SECTION MISSION / COMMENT ÇA MARCHE
   ========================================================================== */
/* Bandeaux "fond uni" plein écran, bord à bord — même exigence que les
   bandeaux photo : le FOND doit toujours prendre toute la largeur de
   l'écran, quelle que soit la page. Le contenu (titre, colonnes, texte)
   reste lisible et centré grâce à la règle de sécurité juste après, qui
   s'applique même quand aucun .hll-conteneur n'a été posé explicitement
   dans le bloc. */
.hll-section-creme,
.hll-section-blanche,
.hll-section-sombre,
.hll-citation {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw !important;
}
/* Filet de sécurité : si un bloc n'a pas explicitement de .hll-conteneur
   à l'intérieur, son premier niveau d'enfants reste quand même limité à
   une largeur lisible (identique à .hll-conteneur) et centré — jamais de
   texte ou de grille étalée bord à bord sur un grand écran. */
.hll-section-creme > *,
.hll-section-blanche > *,
.hll-section-sombre > * {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.hll-section-creme {
    background-color: var(--hll-creme);
    padding: 70px 40px;
}
.hll-section-blanche {
    background-color: #ffffff;
    padding: 70px 40px;
}
.hll-section-sombre {
    background-color: var(--hll-vert-fonce);
    color: var(--hll-texte-clair);
    padding: 70px 40px;
}
.hll-section-sombre h2 {
    color: #ffffff !important;
}
/* Un lien hypertexte posé directement sur le fond vert (hors de la boîte
   blanche .hll-formulaire-encadre) doit rester lisible et dans la charte —
   sans cette règle, certains thèmes/plugins imposent une couleur de lien
   par défaut (souvent rose/magenta) qui jure avec le reste du site. */
.hll-section-sombre a:not(.hll-btn) {
    color: var(--hll-dore-clair) !important;
}
.hll-section-sombre a:not(.hll-btn):hover {
    color: #ffffff !important;
}

/* Citation mise en avant (page À propos) */
.hll-citation {
    background-color: var(--hll-vert-fonce);
    padding: 70px 40px;
    text-align: center;
}
.hll-citation p {
    max-width: 780px;
    margin: 0 auto;
    font-family: var(--hll-font-titres);
    font-size: 1.6rem;
    line-height: 1.4;
    font-style: italic;
    color: #ffffff !important;
}
@media (max-width: 768px) {
    .hll-citation {
        padding: 46px 24px;
    }
    .hll-citation p {
        font-size: 1.2rem;
    }
}

.hll-etape {
    text-align: center;
    padding: 0 15px;
}
.hll-etape .hll-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border: 1px solid var(--hll-dore);
    border-radius: 50%;
    color: var(--hll-marron);
    font-size: 1.6rem;
    margin-bottom: 16px;
}
/* Pictos vectoriels (remplacent les emojis) : même écrin doré rond que
   ci-dessus, l'icône hérite juste de la couleur du texte (currentColor). */
.hll-etape .hll-numero svg {
    width: 28px;
    height: 28px;
    display: block;
}
/* "Comment ça marche" en bandeau plein écran, bord à bord — le fond va
   d'un bord à l'autre, mais le contenu (titre + colonnes) reste centré et
   lisible grâce au conteneur .hll-conteneur posé explicitement dans le
   contenu de la page (plus robuste que de cibler "tous les enfants"). */
.hll-comment-ca-marche {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
}
.hll-conteneur {
    max-width: 1100px;
    margin: 0 auto;
}
.hll-etape-fleche {
    color: var(--hll-dore);
    font-size: 1.4rem;
    align-self: center;
}

/* ==========================================================================
   8. CARTES — artisans, annonces, conseils
   ========================================================================== */
.hll-carte {
    background-color: #ffffff;
    border: 1px solid #e5ddc9;
    border-radius: var(--hll-radius);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.hll-carte:hover {
    box-shadow: 0 6px 20px rgba(43, 58, 47, 0.12);
}
.hll-carte-image {
    aspect-ratio: 4 / 3;
    background-color: #e5ddc9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a89b7c;
    font-size: 0.85rem;
    text-align: center;
    padding: 10px;
    position: relative;
}
.hll-carte-contenu {
    padding: 18px;
}
.hll-badge-gratuit {
    display: inline-block;
    background-color: var(--hll-vert-fonce);
    color: #fff;
    font-size: 0.7rem;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.05em;
}
.hll-badge-vente {
    display: inline-block;
    background-color: var(--hll-dore);
    color: #fff;
    font-size: 0.7rem;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.05em;
}

/* --- Carte ARTISAN (page "Nos Artisans") --- */
.hll-carte-artisan {
    background-color: #ffffff;
    border: 1px solid var(--hll-creme-fonce);
    border-radius: var(--hll-radius);
    overflow: hidden;
    /* La grille étire déjà chaque fiche à la même hauteur (comportement par
       défaut d'une grille CSS) ; on rend la fiche elle-même flex verticale
       pour pouvoir caler le bouton tout en bas, quelle que soit la longueur
       du texte au-dessus — les boutons restent alors alignés entre eux
       d'une fiche à l'autre. */
    display: flex;
    flex-direction: column;
}
.hll-carte-artisan .hll-carte-image {
    aspect-ratio: 4 / 3;
}
.hll-carte-artisan .hll-badge-partenaire {
    position: absolute;
    left: 12px;
    bottom: -16px;
    background-color: var(--hll-creme);
    border: 1px solid var(--hll-dore);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hll-marron);
    white-space: nowrap;
}
.hll-carte-artisan .hll-carte-contenu {
    padding: 28px 24px 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Garantit un espace minimum entre chaque élément (et donc entre le
       dernier texte et le bouton) même quand celui-ci est poussé tout en
       bas par margin-top:auto sur .hll-btn ci-dessous. */
    gap: 4px;
}
.hll-carte-artisan h3 {
    font-size: 1.15rem;
    margin: 0 0 8px;
}
.hll-carte-artisan .hll-specialite {
    text-transform: uppercase;
    color: var(--hll-dore);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    margin-bottom: 16px;
}
.hll-carte-artisan .hll-detail-ligne {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--hll-texte);
    margin-bottom: 10px;
    display: flex;
    gap: 8px;
}
/* Grille dynamique de l'annuaire (nombre de fiches variable, générées
   automatiquement à chaque inscription d'artisan) — remplace l'ancienne
   grille wp:columns figée à 3 cases. */
.hll-grille-artisans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}
/* Page de profil individuel d'un artisan */
.hll-hero-profil-artisan .hll-hero-photo-fond img {
    height: 420px;
}
.hll-profil-artisan-corps {
    max-width: 820px;
    margin: 0 auto;
    padding: 48px 24px;
}
.hll-profil-artisan-infos {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--hll-creme-fonce);
}
.hll-profil-artisan-infos .hll-detail-ligne {
    margin-bottom: 0;
}
.hll-profil-artisan-texte {
    margin-bottom: 28px;
}
.hll-carte-artisan .hll-detail-ligne strong {
    display: block;
    font-weight: 600;
}
/* Style spécifique au bouton "Voir le profil" des VRAIES fiches artisans
   uniquement — la carte "invitation" (:not) garde le bouton doré standard
   du site (identique aux boutons de la home page), et son contenu étant
   court, on ne veut pas le pousser en bas artificiellement non plus. */
.hll-carte-artisan:not(.hll-carte-artisan--invitation) .hll-btn {
    width: 100%;
    text-align: center;
    /* "auto" pousse le bouton tout en bas de la fiche (grâce au flex-column
       ci-dessus), avec un espace minimum garanti au-dessus (margin-top sur
       le dernier .hll-detail-ligne juste avant, voir plus bas). */
    margin-top: auto;
    background-color: var(--hll-marron);
}
.hll-carte-artisan:not(.hll-carte-artisan--invitation) .hll-btn:hover {
    background-color: #392a1e;
}

/* --- Carte "invitation" : mêlée à la grille d'artisans, invite les
   artisans non encore inscrits à rejoindre le réseau (au lieu d'attendre
   la fin de page) --- */
.hll-carte-artisan--invitation {
    background-color: var(--hll-creme);
    border: 1.5px dashed var(--hll-dore);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
}
.hll-carte-invitation-contenu {
    text-align: center;
    padding: 26px;
}
.hll-carte-invitation-contenu h3 {
    font-size: 1.15rem;
    margin: 0 0 8px;
}
.hll-carte-invitation-contenu p {
    font-size: 0.88rem;
    margin-bottom: 16px;
}

/* --- Barre de recherche / filtres (page "Nos Artisans") --- */
.hll-barre-recherche {
    background-color: #ffffff;
    border: 1px solid var(--hll-creme-fonce);
    border-radius: 8px;
    padding: 24px 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
    box-shadow: 0 10px 30px rgba(43, 58, 47, 0.08);
    margin: -60px 40px 50px;
    position: relative;
    z-index: 2;
}
.hll-barre-recherche .hll-champ {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.hll-barre-recherche label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hll-marron);
    font-weight: 600;
}
.hll-barre-recherche input,
.hll-barre-recherche select {
    border: 1px solid var(--hll-creme-fonce);
    border-radius: var(--hll-radius);
    padding: 10px 12px;
    font-family: var(--hll-font-texte);
    font-size: 0.9rem;
    background-color: #fff;
}
.hll-barre-recherche .hll-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* --- Carte ANNONCE (page "Le Grenier Héritage") ---
   Même logique que .hll-carte-artisan : la carte est en colonne flex pour
   que le bouton reste toujours calé en bas (et jamais collé au texte),
   quelle que soit la longueur du titre ou de la localisation. */
.hll-carte-annonce {
    display: flex;
    flex-direction: column;
}
.hll-carte-annonce .hll-carte-image {
    aspect-ratio: 1 / 1;
}
.hll-carte-annonce .hll-carte-contenu {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 6px;
}
.hll-carte-annonce .hll-lieu {
    font-size: 0.72rem;
    color: var(--hll-dore-hover);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hll-carte-annonce h3 {
    font-size: 1rem;
    margin: 0;
}
.hll-carte-annonce .hll-prix {
    font-weight: 700;
    color: var(--hll-marron);
    margin: 0;
}
.hll-carte-annonce .hll-meta {
    font-size: 0.8rem;
    color: #8a8577;
    border-top: 1px solid var(--hll-creme-fonce);
    padding-top: 8px;
    margin-bottom: 6px;
}
.hll-carte-annonce .hll-btn {
    width: 100%;
    text-align: center;
    margin-top: auto;
}

/* Grille dynamique des articles "Conseils" — même logique flex-column que
   .hll-carte-artisan pour un bouton toujours calé en bas, jamais collé au
   texte. */
.hll-grille-conseils {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
}
.hll-carte-conseil {
    display: flex;
    flex-direction: column;
}
.hll-carte-conseil .hll-carte-image {
    aspect-ratio: 4 / 3;
}
.hll-carte-conseil .hll-carte-contenu {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 8px;
}
.hll-carte-conseil .hll-specialite {
    text-transform: uppercase;
    color: var(--hll-dore);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
}
.hll-carte-conseil h3 {
    font-size: 1.1rem;
    margin: 0;
}
.hll-carte-conseil p {
    font-size: 0.9rem;
    color: var(--hll-texte);
    margin: 0;
}
.hll-carte-conseil .hll-btn {
    width: 100%;
    text-align: center;
    margin-top: auto;
    background-color: var(--hll-marron);
}
.hll-carte-conseil .hll-btn:hover {
    background-color: #392a1e;
}

/* Grille dynamique des annonces (nombre variable, page "Le Grenier Héritage") */
.hll-grille-annonces {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

/* Encadré "coordonnées verrouillées" sur la fiche annonce individuelle :
   invite le professionnel à passer par le formulaire de mise en relation
   plutôt que d'afficher les coordonnées du vendeur en clair. */
.hll-verrouille-pro {
    background-color: var(--hll-creme);
    border: 1px dashed var(--hll-dore);
    border-radius: var(--hll-radius);
    padding: 26px;
    margin: 28px 0;
}
.hll-verrouille-pro p {
    margin-bottom: 16px;
}

/* Portrait du fondateur (page "À propos") : texte + photo côte à côte.
   La photo est pour l'instant un cadre "placeholder" en attente de la vraie
   photo détourée de Mathieu (voir directive : les vraies photos sont
   ajoutées en tout dernier, une fois toutes les pages finalisées). Dès que
   la photo (idéalement détourée, fond transparent) sera prête, on
   remplacera ce bloc par une vraie <img> — la mise en page ne changera pas. */
.hll-portrait-fondateur {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 60px 24px;
}
.hll-portrait-fondateur-texte {
    flex: 1 1 55%;
}
.hll-portrait-fondateur-photo {
    flex: 1 1 35%;
    aspect-ratio: 3 / 4;
    background-color: #e5ddc9;
    border: 1px dashed var(--hll-dore);
    border-radius: var(--hll-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #a89b7c;
    font-size: 0.85rem;
    padding: 20px;
}
@media (max-width: 780px) {
    .hll-portrait-fondateur {
        flex-direction: column;
        gap: 28px;
        padding: 40px 20px;
    }
    .hll-portrait-fondateur-photo {
        width: 100%;
        max-width: 280px;
    }
}

/* --- Encart "Espace professionnel" --- */
.hll-encart-pro {
    background-color: var(--hll-creme);
    border: 1px solid var(--hll-creme-fonce);
    border-radius: var(--hll-radius);
    padding: 26px;
}
.hll-encart-pro h3 {
    font-size: 1.1rem;
    margin-top: 0;
}
.hll-encart-pro ul {
    list-style: none;
    margin: 16px 0;
    padding: 0;
}
.hll-encart-pro li {
    padding-left: 22px;
    position: relative;
    margin-bottom: 10px;
    font-size: 0.9rem;
}
.hll-encart-pro li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--hll-dore);
    font-weight: 700;
}

/* ==========================================================================
   9. FORMULAIRES (dépôt de projet / annonce)
   ========================================================================== */
.hll-formulaire-encadre {
    background-color: #ffffff;
    border: 1px solid #e5ddc9;
    border-radius: 6px;
    padding: 40px;
    max-width: 700px;
    margin: 36px auto 0;
    /* Cette boîte reste blanche même quand elle est posée sur un bandeau
       sombre (vert) : son texte doit donc toujours rester foncé, sans
       hériter de la couleur claire du bandeau autour. */
    color: var(--hll-texte);
}
/* Formulaire "Devenir partenaire" */
.hll-formulaire-partenaire {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 24px;
}
.hll-formulaire-partenaire .hll-champ {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.hll-formulaire-partenaire label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--hll-marron);
}
.hll-formulaire-partenaire input,
.hll-formulaire-partenaire textarea {
    border: 1px solid var(--hll-creme-fonce);
    border-radius: var(--hll-radius);
    padding: 10px 12px;
    font-family: var(--hll-font-texte);
    font-size: 0.95rem;
    background-color: #fff;
}
.hll-formulaire-partenaire button {
    align-self: center;
    margin-top: 8px;
}
/* Le thème parent (Hello Elementor) impose sa propre couleur par défaut aux
   boutons "submit" (un rose qui n'a rien à voir avec notre charte) — on force
   ici notre doré sur TOUS les boutons d'envoi de formulaire du site, page
   actuelle et futures pages avec formulaire comprises. */
.hll-formulaire-partenaire button[type="submit"],
form button[type="submit"],
form input[type="submit"] {
    background-color: var(--hll-dore) !important;
    color: #ffffff !important;
    border: none !important;
}
.hll-formulaire-partenaire button[type="submit"]:hover,
form button[type="submit"]:hover,
form input[type="submit"]:hover {
    background-color: var(--hll-dore-hover) !important;
    color: #ffffff !important;
}
.hll-champ-cache {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.hll-formulaire-message--succes {
    background-color: var(--hll-creme);
    border: 1px solid var(--hll-dore);
    border-radius: var(--hll-radius);
    padding: 20px 24px;
    text-align: center;
    color: var(--hll-marron);
    font-weight: 600;
    margin-top: 24px;
}
.hll-formulaire-erreur {
    color: #a33;
    font-weight: 600;
    text-align: center;
}
/* Spécificités du formulaire "Déposer mon projet" : champ fichier + case de
   consentement RGPD (le reste des styles vient de .hll-formulaire-partenaire,
   déjà posé sur le formulaire de candidature partenaire). */
.hll-formulaire-projet input[type="file"] {
    border: 1px dashed var(--hll-creme-fonce);
    border-radius: var(--hll-radius);
    padding: 12px;
    background-color: var(--hll-creme);
    font-size: 0.85rem;
}
.hll-champ-consentement {
    flex-direction: row !important;
    align-items: flex-start;
    gap: 10px !important;
}
.hll-champ-consentement label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400 !important;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--hll-texte);
}
.hll-champ-consentement input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}
.hll-champ-consentement a {
    color: var(--hll-marron);
    text-decoration: underline;
}
/* Cartes "formules" (page Devenir partenaire) */
.hll-carte-formule {
    background-color: #ffffff;
    border: 1px solid var(--hll-creme-fonce);
    border-top: 4px solid var(--hll-dore);
    border-radius: var(--hll-radius);
    padding: 28px 24px;
}
.hll-carte-formule--vedette {
    /* Vert profond de Mathieu, pour distinguer la formule mise en avant du
       doré utilisé partout ailleurs sur le site. */
    border-top-color: var(--hll-vert-fonce);
    box-shadow: 0 8px 24px rgba(43, 58, 47, 0.1);
    position: relative;
}
.hll-carte-formule--vedette::before {
    content: "Recommandée";
    position: absolute;
    top: -13px;
    left: 24px;
    background-color: var(--hll-vert-fonce);
    color: #ffffff;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 12px;
    border-radius: 20px;
}
.hll-carte-formule h3 {
    margin: 0 0 6px;
    font-size: 1.2rem;
}
.hll-formule-tarif {
    color: var(--hll-dore);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    margin-bottom: 14px;
}
.hll-carte-formule--vedette .hll-formule-tarif {
    color: var(--hll-vert-fonce);
}
.hll-carte-formule ul {
    padding-left: 20px;
    margin: 0;
}
.hll-carte-formule li {
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: var(--hll-texte);
}

/* ==========================================================================
   10. COMPTEUR LIVE (page d'accueil) — style "compteur à volets"
   Le nombre est modifiable par Mathieu dans Personnaliser > Héritage L&L,
   sans toucher au code. Voir fonction hll_shortcode_compteur().
   ========================================================================== */
.hll-compteur-bloc {
    background: rgba(20, 24, 15, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--hll-creme);
    padding: 44px 30px 38px;
    text-align: center;
    border-radius: 20px;
    max-width: 900px;
    margin: -90px auto 0;
    position: relative;
    z-index: 2;
    border: 1px solid rgba(201, 168, 106, 0.35);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
}
.hll-compteur-titre {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--hll-dore-clair);
    margin-bottom: 18px;
}
.hll-compteur-chiffres {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 2px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.hll-compteur-volet {
    background: none;
    border: none;
    width: auto;
    height: auto;
    display: inline-block;
    font-family: var(--hll-font-titres);
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    letter-spacing: 0.01em;
}
.hll-compteur-note {
    font-size: 1.05rem;
    color: var(--hll-creme-fonce);
    max-width: 560px;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .hll-compteur-bloc {
        margin-top: -30px; /* chevauchement réduit pour ne pas toucher les boutons du hero au-dessus */
        border-radius: 16px;
        padding: 34px 20px 28px;
    }
    .hll-compteur-volet {
        font-size: 2.3rem;
    }
}

/* ==========================================================================
   10bis. COMPTEUR — variante "vintage" (cadran mécanique à l'ancienne)
   DA validée avec Mathieu (réf. maquette compteur à cadrans dorés) : fond
   quasi noir, cadre doré à double liseré, chiffres façon "volets" de
   compteur mécanique ancien (avec une ligne de pliure au milieu de chaque
   tuile), et médaillons dorés avec icônes pour les statistiques secondaires.
   ========================================================================== */
.hll-compteur-vintage {
    background: linear-gradient(180deg, rgba(15,18,11,0.97), rgba(20,24,15,0.95));
    border: 1px solid var(--hll-dore);
    box-shadow:
        0 0 0 1px rgba(176,141,87,0.25),
        0 0 0 7px rgba(176,141,87,0.08),
        0 30px 70px rgba(0,0,0,0.45);
    padding: 46px 36px 40px;
}
/* Double liseré doré, façon cadre ancien, légèrement en retrait du bord */
.hll-compteur-vintage::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(176,141,87,0.4);
    border-radius: 12px;
    pointer-events: none;
}
/* Petit fleuron doré centré, à cheval sur le bord bas du cadre */
.hll-compteur-vintage::after {
    content: "❧";
    position: absolute;
    left: 50%;
    bottom: -15px;
    transform: translateX(-50%);
    background: var(--hll-noir-fond);
    color: var(--hll-dore-clair);
    font-size: 1rem;
    line-height: 1;
    padding: 6px 14px;
    border: 1px solid var(--hll-dore);
    border-radius: 20px;
}
.hll-compteur-vintage .hll-compteur-titre {
    letter-spacing: 0.14em;
}
.hll-compteur-vintage .hll-compteur-chiffres {
    gap: 8px;
}
/* Chaque chiffre = une tuile sombre biseautée avec une ligne de pliure au
   milieu, comme un vrai volet de compteur mécanique */
.hll-compteur-vintage .hll-compteur-volet {
    background: linear-gradient(180deg, #2c3223 0%, #171b10 50%, #1e2317 51%, #0d0f09 100%);
    border: 1px solid rgba(176,141,87,0.5);
    border-radius: 6px;
    width: 58px;
    height: 78px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--hll-dore-clair);
    text-shadow: 0 1px 1px rgba(0,0,0,0.6);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.55), 0 3px 6px rgba(0,0,0,0.35);
}
.hll-compteur-vintage .hll-compteur-volet::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    top: 50%;
    height: 1px;
    background: rgba(0,0,0,0.6);
}
@media (max-width: 768px) {
    .hll-compteur-vintage {
        padding: 26px 14px 22px;
        border-radius: 14px;
    }
    .hll-compteur-vintage::before {
        inset: 5px;
        border-radius: 9px;
    }
    .hll-compteur-vintage .hll-compteur-chiffres {
        gap: 4px;
    }
    .hll-compteur-vintage .hll-compteur-volet {
        width: 34px;
        height: 46px;
        font-size: 1.3rem;
        border-radius: 4px;
    }
    .hll-compteur-vintage .hll-compteur-titre {
        font-size: 0.72rem;
        margin-bottom: 12px;
    }
    .hll-compteur-vintage .hll-compteur-note {
        font-size: 0.85rem;
    }
}

/* Médaillons dorés avec icône, au-dessus de chaque statistique secondaire */
.hll-stats-vintage {
    gap: 50px;
}
.hll-stats-vintage .hll-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.hll-stats-vintage .hll-stat-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--hll-dore);
    color: var(--hll-dore);
}
.hll-stats-vintage .hll-stat-icone svg {
    width: 26px;
    height: 26px;
}
.hll-stats-vintage .hll-stat-chiffre {
    font-size: 1.6rem;
}
@media (max-width: 768px) {
    .hll-stats-vintage {
        gap: 30px;
    }
    .hll-stats-vintage .hll-stat-icone {
        width: 46px;
        height: 46px;
    }
    .hll-stats-vintage .hll-stat-icone svg {
        width: 22px;
        height: 22px;
    }
}

.hll-stats-secondaires {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    padding: 40px 20px;
    background-color: var(--hll-creme);
    text-align: center;
    /* plein écran, bord à bord, comme les autres bandeaux — fond uni, sans
       aucune pastille/icône (juste le chiffre et le libellé) */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    position: relative;
}
.hll-stat-item {
    min-width: 140px;
}
.hll-stat-item .hll-stat-chiffre {
    display: block;
    font-family: var(--hll-font-titres);
    font-size: 1.6rem;
    color: var(--hll-marron);
}
.hll-stat-item .hll-stat-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hll-texte);
}

/* ==========================================================================
   11. BANDEAU ADHÉSION / MEMBRE PRO (page "Le Grenier Héritage")
   ========================================================================== */
.hll-bandeau-adhesion {
    background-color: var(--hll-vert-fonce);
    color: var(--hll-texte-clair);
    padding: 30px 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.hll-bandeau-adhesion .hll-titre-bloc {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 360px;
}
.hll-bandeau-adhesion .hll-titre-bloc .icone {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid var(--hll-dore);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hll-dore);
    font-size: 1.3rem;
    flex-shrink: 0;
}
.hll-bandeau-adhesion .hll-avantages {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
}
.hll-bandeau-adhesion .hll-prix-bloc {
    background-color: var(--hll-dore);
    color: var(--hll-vert-fonce);
    padding: 14px 26px;
    border-radius: var(--hll-radius);
    text-align: center;
    font-weight: 700;
}
.hll-bandeau-adhesion .hll-prix-bloc small {
    display: block;
    font-weight: 400;
    font-size: 0.7rem;
    margin-bottom: 4px;
}

/* ==========================================================================
   12. CTA FINAL + FOOTER
   ========================================================================== */
.hll-cta-finale {
    background-color: var(--hll-vert-fonce);
    color: var(--hll-texte-clair);
    padding: 60px 40px;
    text-align: center;
}
.hll-cta-finale h2 {
    color: var(--hll-texte-clair) !important;
}
/* Garde-fou : sur un fond sombre, tout texte doit rester clair (jamais de
   marron, illisible sur le vert foncé) */
.hll-cta-finale p,
.hll-cta-finale a:not(.hll-btn):not(.wp-block-button__link) {
    color: var(--hll-texte-clair);
}

.site-footer,
footer.site-footer {
    background-color: var(--hll-creme); /* même crème que le header */
    color: var(--hll-texte) !important; /* texte quasi noir */
    padding: 20px 40px;
}
.site-footer *,
footer.site-footer * {
    color: var(--hll-texte) !important;
}
.site-footer a,
footer.site-footer a {
    color: var(--hll-texte) !important;
}
.site-footer a:hover,
footer.site-footer a:hover {
    color: var(--hll-dore-hover) !important;
}
/* Si le logo est aussi posé dans le footer (widget Image ou logo du thème),
   il reste parfaitement lisible : le lockup doré a été pensé pour ressortir
   sur un fond vert, foncé ou moyen. */
.site-footer .custom-logo,
footer.site-footer .custom-logo {
    max-height: 90px !important;
}

/* Logo à gauche, liens légaux à droite — plus de "Tous droits réservés"
   (supprimé, pas d'obligation légale).
   Structure en flex + flex-wrap (et non plus en grid à colonnes fixes) :
   sur grand écran, logo et liens légaux se répartissent naturellement aux
   deux extrémités du bandeau (space-between) ; si jamais ils ne tiennent
   plus sur une seule ligne (petit mobile, police système agrandie...), le
   bloc liens légaux passe SEUL à la ligne suivante au lieu de chevaucher le
   logo/les icônes — ce chevauchement ne peut donc structurellement plus se
   reproduire, quelle que soit la largeur d'écran réelle du visiteur. */
.hll-footer-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    row-gap: 8px;
    column-gap: 16px;
    padding: 24px 40px;
    background-color: var(--hll-creme);
}
/* Logo + icônes réseaux sociaux groupés ensemble, sur la même ligne, dans
   l'alignement du logo (une seule rangée, plus de bandeau séparé). */
.hll-footer-ligne-gauche {
    display: flex;
    align-items: center;
    gap: 22px;
    justify-self: start;
    flex-shrink: 0; /* le logo ne doit jamais se faire écraser à 0px sur mobile */
}
.hll-footer-ligne-gauche a {
    flex-shrink: 0;
}
.hll-footer-logo {
    max-height: 60px;
    width: auto;
    flex-shrink: 0;
}
@media (max-width: 640px) {
    /* On garde logo à gauche / liens à droite sur la même ligne tant que ça
       tient (demande explicite), juste plus compact ; si ça ne tient plus,
       le flex-wrap du bloc parent fait passer les liens légaux à la ligne
       suivante tout seuls, proprement, sans jamais recouvrir le logo. */
    .hll-footer-ligne {
        padding: 16px 20px;
        row-gap: 6px;
        column-gap: 10px;
    }
    .hll-footer-logo {
        max-height: 38px;
    }
    .hll-footer-ligne-gauche {
        gap: 10px;
    }
    .hll-footer-social {
        gap: 6px;
    }
    .hll-footer-social-icone {
        width: 28px;
        height: 28px;
    }
    .hll-footer-social-icone svg {
        width: 13px;
        height: 13px;
    }
}
@media (max-width: 400px) {
    /* Sur les tout petits écrans, le texte des liens légaux peut lui-même
       devenir trop large pour sa ligne : on l'autorise à revenir à la ligne
       en interne plutôt que de forcer un "nowrap" qui déborderait. */
    .hll-footer-liens-legaux {
        flex-wrap: wrap;
        white-space: normal;
        font-size: 0.65rem;
    }
}

/* Icônes réseaux sociaux : sur la même ligne que le logo (à côté, dans son
   alignement), plus de bandeau séparé en dessous. */
.hll-footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.hll-footer-social-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--hll-dore);
    color: var(--hll-marron) !important;
    transition: background-color 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}
.hll-footer-social-icone svg {
    width: 16px;
    height: 16px;
}
.hll-footer-social-icone:hover {
    background-color: var(--hll-dore);
    color: #ffffff !important;
    border-color: var(--hll-dore);
}
/* Icône affichée mais pas encore active (Mathieu n'a pas encore renseigné
   l'URL dans Personnaliser) : visible dans le design, mais visuellement
   estompée et non cliquable pour ne pas donner l'impression d'un lien mort. */
.hll-footer-social-icone--attente {
    opacity: 0.4;
    cursor: default;
}
.hll-footer-social-icone--attente:hover {
    background-color: transparent;
    color: var(--hll-marron) !important;
    border-color: var(--hll-dore);
}

/* Espace résiduel parfois laissé par une rangée Elementor vide dans le
   pied de page (ex : après suppression d'un widget logo en double) : on
   supprime toute hauteur/rembourrage minimal que ces conteneurs pourraient
   encore imposer, pour que notre ligne logo+CGV colle directement sous le
   contenu réel du footer. */
.site-footer,
footer.site-footer {
    padding-top: 0;
    padding-bottom: 0;
}
.site-footer .elementor-section,
.site-footer .elementor-container,
.site-footer .elementor-widget-wrap,
.site-footer .elementor-column,
footer.site-footer .elementor-section,
footer.site-footer .elementor-container,
footer.site-footer .elementor-widget-wrap,
footer.site-footer .elementor-column {
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Liens légaux (Mentions légales / CGU / CGV), sur la même ligne que le logo,
   collés au bord droit du bandeau (miroir exact du logo à gauche). */
.hll-footer-liens-legaux {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 10px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    justify-self: end;
    justify-content: flex-end;
}
@media (max-width: 640px) {
    .hll-footer-liens-legaux {
        font-size: 0.6rem;
        gap: 5px;
        letter-spacing: 0.02em;
    }
}

/* Le "Tous droits réservés" du thème parent est masqué complètement,
   comme demandé (pas d'obligation légale à le garder). La suppression
   « propre » se fait désormais côté PHP (voir hll_masquer_copyright_footer()
   dans functions.php, qui coupe l'affichage à la source). Ces règles CSS
   restent en filet de sécurité au cas où le thème afficherait quand même
   un texte de copyright par un autre chemin — on élargit la liste de noms
   de classes possibles pour ne rien laisser passer. */
.site-footer .site-info,
footer.site-footer .site-info,
.site-footer .hello-elementor-site-info,
footer.site-footer .hello-elementor-site-info,
.site-footer .copyright-bar,
.site-footer .site-info-inner-wrapper,
.site-footer .hello-copyright,
footer.site-footer .copyright-bar,
footer.site-footer .site-info-inner-wrapper,
footer.site-footer .hello-copyright {
    display: none !important;
}
.hll-footer-liens-legaux a {
    color: var(--hll-texte) !important;
    opacity: 0.75;
}
.hll-footer-liens-legaux a:hover {
    opacity: 1;
    color: var(--hll-dore-hover) !important;
}
.hll-footer-liens-legaux span {
    opacity: 0.4;
}

/* ==========================================================================
   14. PAGES LÉGALES (Mentions légales / CGU / CGV)
   ========================================================================== */
.hll-entete-page-legale {
    background-color: var(--hll-vert-fonce);
    color: var(--hll-texte-clair);
    padding: 70px 40px 46px;
    text-align: center;
}
.hll-entete-page-legale h1 {
    color: #ffffff !important;
    margin-bottom: 6px;
}
.hll-entete-page-legale p {
    color: var(--hll-creme-fonce);
    opacity: 0.85;
    margin: 0;
}
.hll-texte-legal {
    max-width: 820px;
    margin: 0 auto;
}
.hll-texte-legal h2 {
    font-size: 1.3rem;
    margin-top: 42px;
    margin-bottom: 14px;
}
.hll-texte-legal h2:first-child {
    margin-top: 0;
}
.hll-texte-legal h3 {
    font-size: 1.05rem;
    margin-top: 24px;
    margin-bottom: 8px;
}
.hll-texte-legal p,
.hll-texte-legal li {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--hll-texte);
}
.hll-texte-legal ul {
    padding-left: 20px;
    margin: 0 0 16px;
}
.hll-texte-legal li {
    margin-bottom: 6px;
}
.hll-texte-legal strong {
    color: var(--hll-marron);
}
@media (max-width: 768px) {
    .hll-entete-page-legale {
        padding: 50px 20px 34px;
    }
}

/* ==========================================================================
   13. RESPONSIVE — mobile
   ========================================================================== */
@media (max-width: 900px) {
    .hll-barre-recherche {
        margin: -30px 16px 40px;
        flex-direction: column;
        align-items: stretch;
    }
    .hll-compteur-bloc {
        margin-top: -40px;
    }
}
@media (max-width: 768px) {
    .hll-hero,
    .hll-hero-sombre,
    .hll-section-creme,
    .hll-section-blanche,
    .hll-section-sombre,
    .hll-cta-finale {
        padding: 50px 20px;
    }
    .hll-hero h1,
    .hll-hero-sombre h1 {
        font-size: 1.9rem;
    }
    .hll-compteur-volet {
        width: 48px;
        height: 64px;
        font-size: 1.7rem;
    }
    .hll-bandeau-adhesion {
        flex-direction: column;
        text-align: center;
    }
}


/* ==========================================================================
   v7.25 — Menu connecté + compteur sur fond blanc uni
   ========================================================================== */
/* Barre d'administration WordPress (visible seulement quand on est connecté) :
   le menu fixe se place dessous au lieu de passer derrière. */
.admin-bar .site-header,
.admin-bar .hll-entete { top: 32px; }
@media (max-width: 782px) {
    .admin-bar .site-header,
    .admin-bar .hll-entete { top: 46px; }
}

/* Compteur : bande crème soutenu pleine largeur, cadran sombre opaque
   (plus de transparence ni de chevauchement avec le bandeau photo). */
.hll-compteur-section {
    background: var(--hll-creme-fonce);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    padding: 56px 20px 48px;
    box-sizing: border-box;
    position: relative;
}
.hll-compteur-section .hll-compteur-bloc.hll-compteur-vintage {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    margin: 0 auto 40px;
    box-shadow: 0 18px 40px rgba(35, 47, 34, 0.25);
}
.hll-compteur-section .hll-compteur-vintage::after {
    background: var(--hll-noir-fond);
}
.hll-compteur-section .hll-stats-secondaires {
    background: transparent;
    padding: 10px 0 0;
    width: auto;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Bouton "Rechercher" de l'annuaire : aux couleurs de la charte
   (vert profond, doré au survol) au lieu du rose par défaut du thème parent */
.hll-barre-recherche .hll-btn,
.hll-barre-recherche button.hll-btn {
    background-color: var(--hll-vert-fonce) !important;
    color: var(--hll-creme) !important;
    border: 1px solid var(--hll-vert-fonce) !important;
    border-radius: var(--hll-radius);
    padding: 11px 26px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}
.hll-barre-recherche .hll-btn:hover,
.hll-barre-recherche .hll-btn:focus {
    background-color: var(--hll-dore) !important;
    border-color: var(--hll-dore) !important;
    color: #ffffff !important;
}
@media (max-width: 768px) {
    .hll-compteur-section { padding: 36px 14px 32px; }
    .hll-compteur-section .hll-compteur-bloc.hll-compteur-vintage { margin-bottom: 30px; }
}


/* ==========================================================================
   v7.27 — Pictos "image" (fournis par Mathieu) dans les étapes
   Ces images ont déjà leur propre cadre rond doré : on retire donc le
   cercle CSS qui se superposait en décalé, et on centre l'image.
   ========================================================================== */
.hll-etape .hll-numero:has(img) {
    display: block;
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    margin: 0 auto 16px;
    line-height: 0;
}
.hll-etape .hll-numero img {
    display: block;
    width: 96px;
    height: 96px;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
}