/* Accroche d'accueil : mise en page et champ de recherche (LMI, 03/11/2026)
 *
 * Valeurs reprises du hero de la maquette (Homepage.html) : section sur fond #EAF0FA, deux
 * colonnes de 80px de respiration, titre a 60px, formulaire encadre a coins arrondis dont
 * le bouton est plein accent.
 *
 * Les couleurs passent par les jetons du design, pour que le mode sombre suive tout seul :
 * --eldorado-surface pour les boites blanches de la maquette, --eldorado-bordure pour ses
 * filets #D3DDF0, --eldorado-sur-accent pour le texte du bouton.
 */
.eldorado-bib-accroche-recherche {
    --lmi-accroche-fond: color-mix(in srgb, var(--eldorado-accent) 8%, var(--eldorado-fond));
    background: var(--lmi-accroche-fond);
    padding-block: 80px;
    margin-bottom: var(--eldorado-espace-section, 48px);
    /* Dans la maquette la bande occupe toute la largeur de l'ecran. Ici le conteneur parent
     * est borne a 1200px. On deborde par une ombre etalee plutot que par « width: 100vw »,
     * qui depasse de la largeur de la barre de defilement et declenche un defilement
     * horizontal ; le clip-path empeche l'ombre de deborder verticalement. */
    border-radius: 0;
    box-shadow: 0 0 0 100vmax var(--lmi-accroche-fond);
    clip-path: inset(0 -100vmax);
    /* Repere du visuel en absolu, et respiration laterale de la maquette. */
    position: relative;
    padding-inline: 32px;
}

/* Raccord avec l'en-tete.
 *
 * GeneratePress pose « .separate-containers .site-main { margin: 20px } » (main.min.css).
 * La marge haute laissait une bande de 20px du fond du body entre la barre de menu et la
 * bande de l'accroche, qui ont deux fonds differents : le raccord se voyait. Dans la
 * maquette la section suit l'en-tete sans interruption.
 *
 * Le « :has() » cible le gabarit, pas la page : la regle ne s'applique que la ou la
 * premiere chose du contenu est l'accroche d'accueil. Les pages d'article gardent leurs
 * 20px.
 *
 * En bas, la maquette laisse 88px entre la carte newsletter et le pied de page (les deux
 * sont bleus : sans cet ecart ils se confondraient). On pose l'ecart sur .site-main plutot
 * que sur la carte, car GeneratePress force « .site-main > :last-child { margin-bottom: 0 } »
 * avec une specificite plus forte. */
.eldorado-design .site-main:has(> .eldorado-bib-accueil-haut) {
    margin-top: 0;
    margin-bottom: 88px;
}
/* ⚠️ Ne RIEN poser sur « .wp-block-group__inner-container » : WordPress le rend en
 * « display: contents ». Il n'a donc aucune boite — mesure : largeur 0 — et max-width,
 * padding comme position y sont sans effet. Ses enfants se disposent dans la section.
 * Tout ce qui suit est donc porte par la section elle-meme. */
.eldorado-bib-accroche-recherche .lmi-accroche-pastille {
    display: inline-block;
    /* En grille, « inline-block » ne borne plus la largeur : l'item occupait toute la colonne
       et la pastille s'etalait en ovale geant. C'est « justify-self » qui la ramene a son
       contenu. Mesure au navigateur. */
    justify-self: start;
    margin: 0 0 22px;
    padding: 6px 12px;
    background: #FFFFFF;
    border: 1px solid var(--eldorado-bordure);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--eldorado-accent);
}
.eldorado-bib-accroche-recherche .eldorado-bib-accroche-titre {
    margin: 0 0 20px;
    font-family: var(--eldorado-police-titres);
    font-size: 60px;
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.01em;
}
.eldorado-bib-accroche-recherche .lmi-accroche-chapeau {
    margin: 0 0 28px;
    max-width: 560px;
    font-size: 19px;
    line-height: 1.55;
    color: var(--eldorado-texte-doux);
}

/* Le formulaire : une seule boite encadree qui contient le champ ET le bouton, et non deux
   controles separes comme les rendait le bloc de recherche de WordPress. */
.eldorado-bib-accroche-recherche .eldorado-bib-accroche-champ .wp-block-search__inside-wrapper {
    display: flex;
    gap: 8px;
    max-width: 560px;
    padding: 6px;
    background: #FFFFFF;
    border: 1px solid var(--eldorado-bordure);
    border-radius: 12px;
}
.eldorado-bib-accroche-recherche .wp-block-search__input {
    flex: 1;
    min-width: 0;
    padding: 12px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 16px;
    color: var(--eldorado-texte);
    outline: none;
}
.eldorado-bib-accroche-recherche .wp-block-search__input:focus-visible {
    outline: 2px solid var(--eldorado-focus);
    outline-offset: 2px;
    border-radius: 8px !important;
}
/* ⚠️ « button, input, textarea { border-radius: var(--border-radius) !important } » dans le
 * reset.css du theme ecrase le rayon de TOUT controle de formulaire. Trouve en parcourant
 * document.styleSheets (1252 regles visitees). Un !important ne se contre que par un
 * !important : pose ici sur les seuls controles de l'accroche et la barre d'actions, pas en
 * general. Meme famille que les !important deja releves dans le coeur. */
.eldorado-bib-accroche-recherche .wp-block-search__button {
    flex: none;
    margin: 0;
    padding: 0 22px;
    /* 44px : la cible tactile minimale, valeur deja retenue par la maquette. */
    min-height: 44px;
    background: var(--eldorado-accent);
    color: var(--eldorado-sur-accent, #FFFFFF);
    border: 0;
    border-radius: 8px !important;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.eldorado-bib-accroche-recherche .wp-block-search__button:hover,
.eldorado-bib-accroche-recherche .wp-block-search__button:focus-visible {
    background: color-mix(in srgb, var(--eldorado-accent) 86%, var(--eldorado-texte));
}

/* Raccourcis sous le champ */
.lmi-accroche-raccourcis {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}
.lmi-accroche-raccourci {
    padding: 8px 14px;
    background: #FFFFFF;
    border: 1px solid var(--eldorado-bordure);
    border-radius: 999px;
    font-size: 14px;
    text-decoration: none;
    color: inherit;
}
.lmi-accroche-raccourci:hover,
.lmi-accroche-raccourci:focus-visible {
    border-color: var(--eldorado-accent);
    color: var(--eldorado-accent);
}

/* Le libelle du champ : retire de l'affichage mais garde dans l'arbre d'accessibilite.
   display:none le rendrait muet pour un lecteur d'ecran, qui annoncerait un champ sans nom. */
.lmi-hors-ecran {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .eldorado-bib-accroche-recherche {
        padding: 48px 0;
    }
    .eldorado-bib-accroche-recherche {
        padding-inline: 16px;
    }
    .eldorado-bib-accroche-recherche .eldorado-bib-accroche-titre {
        font-size: 38px;
    }
    .eldorado-bib-accroche-recherche .lmi-accroche-chapeau {
        font-size: 17px;
    }
}

/* Les boites de la maquette sont d'un blanc franc. --eldorado-surface vaut #EFF3FA, soit
   presque le fond de cette bande : elles s'y fondaient. Le jeton reprend la main en sombre.
   Meme constat que pour les cartes d'article — le correctif de fond est la valeur du jeton
   dans le design.json. */
html.dark .eldorado-bib-accroche-recherche .lmi-accroche-pastille,
html.dark .eldorado-bib-accroche-recherche .wp-block-search__inside-wrapper,
html.dark .lmi-accroche-raccourci {
    background: var(--eldorado-surface);
}

/* --- Barre d'actions (suivre / favoris) -------------------------------------------------
 * Reprise du composant « ActionBar » de la maquette : boutons a 44px de haut, rayon 10,
 * fond blanc, filet, libelle en 700, icone 18px a gauche dans l'accent.
 */
.lmi-barre-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}
.lmi-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    background: #FFFFFF;
    border: 1px solid var(--eldorado-bordure);
    border-radius: 10px !important;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--eldorado-texte);
    text-decoration: none;
    cursor: pointer;
}
.lmi-action svg {
    color: var(--eldorado-accent);
    flex: none;
}
.lmi-action:hover,
.lmi-action:focus-visible {
    border-color: var(--eldorado-accent);
}
/* Pastille « G » du premier bouton : un rond borde, la lettre dans l'accent. */
.lmi-action-g {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: none;
    border: 2px solid var(--eldorado-accent);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    color: var(--eldorado-accent);
}
/* L'ajout aux favoris ne peut pas etre declenche par script : le bouton revele le raccourci
   clavier quand il prend le focus. Pas de JavaScript pour si peu. */
.lmi-action-favori {
    position: relative;
}
.lmi-action-favori:focus::after {
    content: attr(data-astuce);
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 5;
    padding: 6px 10px;
    background: var(--eldorado-texte);
    color: var(--eldorado-fond);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
html.dark .lmi-action {
    background: var(--eldorado-surface);
}

/* --- Colonne illustree -----------------------------------------------------------------
 * Positionnement absolu plutot qu'une grille a deux colonnes.
 *
 * ⚠️ La grille a ete essayee et mesuree : le composant rend ses blocs les uns apres les
 * autres, sans conteneur pour les grouper, donc chacun occupait sa propre ligne et le visuel
 * devait couvrir « 1 / -1 ». Il imposait alors sa hauteur de 380px aux six lignes, qui se la
 * repartissaient : la pastille se retrouvait a 358px de haut, en gros disque blanc.
 * « justify-self » bornait la largeur, pas la hauteur.
 *
 * En absolu, le visuel ne participe plus au flux : aucun autre bloc n'est touche. Le
 * padding-droit du conteneur lui reserve sa place.
 */
@media (min-width: 1000px) {
    .eldorado-bib-accroche-recherche {
        /* 420 de visuel + 48 de gouttiere + les 32 de respiration deja posee */
        padding-right: 500px;
    }
    .eldorado-bib-accroche-recherche .lmi-accroche-visuel {
        position: absolute;
        right: 32px;
        top: 50%;
        transform: translateY(-50%);
        width: 420px;
    }
}
.lmi-accroche-visuel {
    position: relative;
    height: 380px;
}
@media (max-width: 999px) {
    /* Sous 1000px la maquette masque cette colonne : elle est purement decorative et
       mangerait un ecran entier avant le premier contenu utile. */
    .lmi-accroche-visuel { display: none; }
}
.lmi-visuel-carte {
    position: absolute;
    left: 70px;
    top: 0;
    width: 250px;
    height: 380px;
    box-sizing: border-box;
    padding: 26px 22px;
    background: #FFFFFF;
    border: 1px solid var(--eldorado-bordure);
    border-radius: 28px;
    box-shadow: 0 20px 40px color-mix(in srgb, var(--eldorado-accent) 10%, transparent);
}
.lmi-visuel-marque {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
}
.lmi-visuel-graphe {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    height: 250px;
    padding-top: 40px;
    box-sizing: border-box;
}
.lmi-visuel-graphe span {
    width: 30px;
    height: var(--lmi-barre);
    background: var(--eldorado-accent);
    border-radius: 6px 6px 0 0;
}
/* Opacites croissantes, comme dans la maquette */
.lmi-visuel-graphe span:nth-child(1) { opacity: 0.25; }
.lmi-visuel-graphe span:nth-child(2) { opacity: 0.5; }
.lmi-visuel-graphe span:nth-child(3) { opacity: 0.75; }

.lmi-visuel-etiquette {
    position: absolute;
    margin: 0;
    padding: 14px 16px;
    width: 170px;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--eldorado-texte) 12%, transparent);
}
.lmi-visuel-plateformes { left: 0; top: 70px; }
.lmi-visuel-frais {
    right: 0;
    top: 210px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.lmi-visuel-libelle {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--eldorado-texte-doux);
}
.lmi-visuel-chiffre {
    display: block;
    font-family: var(--eldorado-police-titres);
    font-size: 26px;
    font-weight: 600;
}
.lmi-visuel-anneau {
    width: 44px;
    height: 44px;
    flex: none;
    box-sizing: border-box;
    border: 5px solid var(--eldorado-accent);
    border-right-color: var(--eldorado-bordure);
    border-radius: 50%;
}
html.dark .lmi-visuel-carte,
html.dark .lmi-visuel-etiquette {
    background: var(--eldorado-surface);
}