/* Ajustements complémentaires à theme.json — préférer theme.json pour tout ce qui est couleur/typo/espacement. */

/* Réserve toujours l'espace de la barre de défilement verticale, même sur les
   pages assez courtes pour ne pas en avoir besoin. Sans ça, le contenu centré
   se décale de quelques pixels selon que la barre soit présente ou non d'une
   page à l'autre (ex. Boutique → À propos). */
html {
    scrollbar-gutter: stable;
    overflow-y: scroll;
}

.wp-block-cover__inner-container {
    max-width: 720px;
    margin-inline: auto;
    padding-inline: 1rem;
}

/* Icônes des badges de valeurs en pied de page (Phosphor Icons, licence MIT,
   phosphoricons.com — SVG inline, pas de police d'icônes ni de CDN externe). */
.kbn-footer-badge-icon {
    display: flex;
    justify-content: center;
    margin-bottom: var(--wp--preset--spacing--20);
}

.kbn-footer-badge-icon svg {
    width: 2rem;
    height: 2rem;
}

/* Listes de liens du pied de page (Boutique, À propos) : pas de puces, alignées à gauche. */
footer .wp-block-list {
    list-style: none;
    padding-left: 0;
    text-align: left;
}

/* Animation des liens et boutons au survol/focus clavier (les couleurs elles-mêmes sont définies via theme.json). */
a:not(.wp-element-button):not(.wp-block-button__link) {
    text-decoration-line: none;
    transition: color 0.2s ease;
}

.wp-element-button,
.wp-block-button__link {
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(28, 23, 18, 0.25);
}

/* Icônes réseaux sociaux du pied de page : monochrome blanc-cassé, accent doré au survol/focus clavier. */
footer .wp-social-link.has-blanc-casse-color {
    transition: color 0.2s ease;
}

footer .wp-social-link.has-blanc-casse-color:hover,
footer .wp-social-link.has-blanc-casse-color:focus-within {
    color: var(--wp--preset--color--or) !important;
}

/* ==========================================================================
   Barre de recherche WooCommerce (en-tête) — alignée sur le branding Miel & or
   Coins carrés comme les boutons du thème (styles.elements.button dans
   theme.json), typo Archivo, palette avoine/or/miel/charbon.
   ========================================================================== */
.wc-block-product-search__fields {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--wp--preset--color--charbon-texte);
    background-color: var(--wp--preset--color--avoine);
}

.wc-block-product-search__field {
    font-family: var(--wp--preset--font-family--archivo);
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--charbon-texte);
    background: transparent;
    border: none;
    padding: 0.5rem 0.75rem;
    min-width: 9rem;
}

.wc-block-product-search__field::placeholder {
    color: var(--wp--preset--color--miel-texte);
    opacity: 1;
}

.wc-block-product-search__field:focus-visible {
    outline: 2px solid var(--wp--preset--color--miel);
    outline-offset: -2px;
}

.wc-block-product-search__button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    background-color: var(--wp--preset--color--or);
    color: var(--wp--preset--color--charbon-texte);
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.wc-block-product-search__button:hover,
.wc-block-product-search__button:focus-visible {
    background-color: var(--wp--preset--color--miel);
}

.wc-block-product-search__button svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

/* Sous 600px (même seuil que le hamburger de core/navigation) : le bouton
   loupe (voir assets/js/mobile-search.js) sort de la ligne d'icônes — il est
   sorti du flux et collé au bord bas-droite de la barre de menu elle-même
   (.kbn-header-row, pas le wrapper extérieur avec son padding), à droite.
   Le champ, lui, reste positionné par rapport à .kbn-header-outer (plein
   largeur, voir plus bas) pour le bandeau déplié. Sans JS, le champ reste
   toujours visible mais compact — dégradation propre. */
@media (max-width: 600px) {
    .kbn-header-outer {
        position: relative;
    }

    .kbn-header-row {
        position: relative;
    }

    .wc-block-product-search__fields {
        border: none;
        background: transparent;
    }

    .wc-block-product-search__button {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 11;
    }

    .wc-block-product-search__field {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        width: auto;
        margin: 0;
        padding: 0.75rem var(--wp--preset--spacing--50);
        border: none;
        border-top: 1px solid var(--wp--preset--color--charbon-texte);
        background-color: var(--wp--preset--color--avoine);
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        pointer-events: none;
        z-index: 10;
        transition: opacity 0.2s ease, max-height 0.2s ease;
    }

    .wc-block-product-search__fields.is-expanded .wc-block-product-search__field {
        opacity: 1;
        max-height: 4rem;
        padding: 0.75rem var(--wp--preset--spacing--50);
        pointer-events: auto;
    }
}

/* Le panier (et le compte client à côté) n'ont pas de taille de bouton fixe
   par défaut (padding intrinsèque ~40px) alors que le hamburger fait
   2,75rem/44px (voir plus bas) : sans ça, ils ne s'alignent pas exactement
   au même niveau sur la ligne. On aligne tout sur le même gabarit. */
.kbn-header-icons .wc-block-mini-cart__button,
.kbn-header-icons .wc-block-customer-account__link,
.kbn-header-icons .wc-block-customer-account__toggle {
    width: 2.75rem;
    height: 2.75rem;
    justify-content: center;
    padding: 0;
}

/* Le compte client existe en double volontairement : une instance dans
   header.html (icône desktop, à côté de la recherche/panier) et une autre
   ajoutée directement au menu de navigation enregistré (visible seulement
   une fois le panneau mobile ouvert). Chacune n'est affichée que sur son
   viewport pour ne pas dupliquer l'icône à l'écran. */
@media (max-width: 600px) {
    .kbn-header-icons .wp-block-woocommerce-customer-account {
        display: none;
    }
}

@media (min-width: 601px) {
    .wp-block-navigation__responsive-container-content > .wp-block-woocommerce-customer-account {
        display: none;
    }
}

/* Logo compact sous 600px : symbole lèvres dorées seul, plus lisible que le
   logo horizontal complet une fois la barre resserrée (recherche, panier,
   hamburger). */
.kbn-logo-mobile {
    display: none;
    margin: 0;
}

@media (max-width: 600px) {
    .kbn-logo-desktop {
        display: none;
    }

    .kbn-logo-mobile {
        display: block;
    }

    /* Hamburger à droite du panier, regroupé avec recherche/panier au lieu
       d'être écarté par le space-between du desktop (3 enfants) : on repasse
       en flex-start et on pousse le cluster icônes+nav vers la droite avec
       un margin-left:auto sur le premier des deux, pour qu'ils restent
       collés l'un à l'autre au même niveau plutôt qu'espacés sur la ligne. */
    .kbn-header-row {
        justify-content: flex-start;
        align-items: center;
    }

    .kbn-header-row > .kbn-header-icons {
        order: 2;
        margin-left: auto;
    }

    .kbn-header-row > .kbn-header-nav {
        order: 3;
    }
}

/* ==========================================================================
   Menu mobile (core/navigation) — aligné sur le branding Miel & or
   Cible les classes générées par le bloc natif (wp-includes/blocks/navigation/
   style.css) : par défaut fond blanc/texte noir génériques, aucune typo ni
   espacement de marque. S'applique partout où le header apparaît, pas
   seulement sur la home.
   ========================================================================== */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
    justify-content: center;
    align-items: center;
    padding: 0.625rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:hover,
.wp-block-navigation__responsive-container-close:focus-visible {
    background-color: var(--wp--preset--color--or);
    color: var(--wp--preset--color--charbon-texte);
}

/* Panneau plein écran : fond avoine + texte charbon au lieu du blanc/noir
   par défaut du bloc natif (celui-ci force la couleur via !important sur
   plusieurs sélecteurs plus spécifiques que les nôtres — on s'aligne). */
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
    background-color: var(--wp--preset--color--avoine) !important;
    color: var(--wp--preset--color--charbon-texte) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100%;
    border-bottom: 1px solid rgba(43, 35, 24, 0.12);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
    border-bottom: none;
}

/* Liens de premier niveau : Fraunces italique, comme les titres du site,
   pour un rendu plus soigné qu'une simple liste de liens système. Cible
   uniquement de niveau top pour ne pas alourdir les sous-menus. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    width: 100%;
    min-height: 44px;
    padding: var(--wp--preset--spacing--30) 0 !important;
    font-family: var(--wp--preset--font-family--fraunces);
    font-style: italic;
    font-weight: 600;
    font-size: var(--wp--preset--font-size--large);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
    color: var(--wp--preset--color--miel-texte) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    min-height: 44px;
    font-family: var(--wp--preset--font-family--archivo);
    font-style: normal;
    font-weight: 400;
    font-size: var(--wp--preset--font-size--medium);
}

/* ==========================================================================
   Header invisible en overlay sur le hero (page d'accueil)
   Fixe par-dessus le hero plein écran, entièrement invisible (rien : ni
   logo, ni liens, ni fonds) au chargement. Un petit script ajoute
   .is-scrolled dès que la page défile de plus de 40px, ce qui le fait
   apparaître avec son apparence normale (couleurs définies dans les
   templates/theme.json, pas ici). Sans JS, .is-scrolled n'est jamais
   ajouté : le header reste invisible et inaccessible au clavier/souris
   (pointer-events: none) — dégradation assumée, comportement demandé.
   ========================================================================== */
.kbn-site-header {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 100;
}

/* La barre d'admin WP est elle aussi en position fixed : le margin-top
   qu'elle ajoute sur <html> ne s'applique pas à nos éléments fixed, donc on
   décale le header manuellement le temps que l'admin bar est affichée. */
body.admin-bar .kbn-site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .kbn-site-header {
        top: 46px;
    }
}

.kbn-site-header:not(.is-scrolled) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.kbn-site-header.is-scrolled {
    opacity: 1;
    visibility: visible;
    background-color: var(--wp--preset--color--avoine);
    box-shadow: 0 2px 12px rgba(28, 23, 18, 0.08);
    transition: opacity 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

/* ==========================================================================
   Hero slider plein écran (page d'accueil)
   Blocs Groupe natifs empilés en absolu + petit script pour le fondu/rotation ;
   sans JS, la première diapositive (classe is-active déjà présente dans le
   HTML) reste affichée — dégradation propre.
   ========================================================================== */
.kbn-hero-slider {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
}

.kbn-hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 100vh !important;
    min-height: 100svh !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.9s ease;
}

.kbn-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.kbn-hero-slider__controls {
    position: absolute;
    inset-inline: 0;
    bottom: var(--wp--preset--spacing--40);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wp--preset--spacing--40);
}

.kbn-hero-slider__arrow {
    background: transparent;
    border: 1px solid var(--wp--preset--color--blanc-casse);
    color: var(--wp--preset--color--blanc-casse);
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.kbn-hero-slider__arrow:hover,
.kbn-hero-slider__arrow:focus-visible {
    background-color: var(--wp--preset--color--or);
    border-color: var(--wp--preset--color--or);
    color: var(--wp--preset--color--charbon-texte);
}

.kbn-hero-slider__dots {
    display: flex;
    gap: var(--wp--preset--spacing--20);
}

.kbn-hero-slider__dot {
    width: 0.625rem;
    height: 0.625rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--wp--preset--color--blanc-casse);
    background: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.kbn-hero-slider__dot[aria-current="true"] {
    background-color: var(--wp--preset--color--or);
    border-color: var(--wp--preset--color--or);
}

@media (prefers-reduced-motion: reduce) {
    .kbn-hero-slide {
        transition: none;
    }
}

/* ==========================================================================
   Galerie premium (catégories) — grille éditoriale asymétrique
   ========================================================================== */
.kbn-gallery-premium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 260px);
    grid-template-areas:
        "big mid1 mid2"
        "big wide wide";
    gap: var(--wp--preset--spacing--30);
    margin-top: var(--wp--preset--spacing--50);
}

.kbn-gallery-tile {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--wp--preset--spacing--20);
}

.kbn-gallery-tile--big { grid-area: big; }
.kbn-gallery-tile--mid1 { grid-area: mid1; }
.kbn-gallery-tile--mid2 { grid-area: mid2; }
.kbn-gallery-tile--wide { grid-area: wide; }

.kbn-gallery-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    transition: background-color 0.4s ease;
    pointer-events: none;
}

.kbn-gallery-tile:hover::after,
.kbn-gallery-tile:focus-within::after {
    background-color: rgba(0, 0, 0, 0.08);
}

.kbn-gallery-tile > * {
    position: relative;
    z-index: 1;
}

.kbn-gallery-tile h3 {
    transition: transform 0.4s ease;
}

.kbn-gallery-tile:hover h3,
.kbn-gallery-tile:focus-within h3 {
    transform: scale(1.05);
}

.kbn-gallery-tile__link a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    text-transform: uppercase;
    color: inherit;
    letter-spacing: 0.06em;
    font-size: var(--wp--preset--font-size--small);
}

.kbn-gallery-tile__link a::after {
    content: "→";
    transition: transform 0.3s ease;
}

.kbn-gallery-tile__link a:hover,
.kbn-gallery-tile__link a:focus-visible {
    color: var(--wp--preset--color--or);
}

.kbn-gallery-tile:hover .kbn-gallery-tile__link a::after,
.kbn-gallery-tile:focus-within .kbn-gallery-tile__link a::after {
    transform: translateX(4px);
}

@media (max-width: 781px) {
    .kbn-gallery-premium {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-template-areas:
            "big"
            "mid1"
            "mid2"
            "wide";
    }

    .kbn-gallery-tile {
        min-height: 220px;
    }
}