/* ==========================================================================
   Enveloppes communes des gabarits (equivalent des conteneurs "boxed"
   d'Elementor : marges laterales de 10 px, contenu limite a 1140 px au
   bureau, 1024 en tablette, 767 en mobile, marges haute et basse de 10 px,
   ecart de 20 px entre les blocs).
   ========================================================================== */

.hpt-boxed {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0 10px;
}

.hpt-boxed > .hpt-boxed__inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: min( 100%, 1140px );
    margin: 0 auto;
    padding: 10px 0;
}

/* Blocs places dans un conteneur : jamais plus larges que lui, comme les
   widgets Elementor (`.e-con > .elementor-widget { max-width: 100% }` et
   `min-width: 0`). Indispensable avec le retour a la ligne mobile ci-dessous :
   sans cette borne, une bande a defilement horizontal (selecteur de
   categories) elargirait la page. */
.hpt-boxed > .hpt-boxed__inner > * {
    max-width: 100%;
    min-width: 0;
}

@media (max-width: 1024px) {
    .hpt-boxed > .hpt-boxed__inner {
        max-width: min( 100%, 1024px );
    }
}

/* Sous 768 px, Elementor passe TOUS ses conteneurs flex en flex-wrap: wrap
   (variable --flex-wrap-mobile), y compris ceux en colonne. Sans effet
   visible la plupart du temps, mais dans Chrome un conteneur en colonne
   autorise a revenir a la ligne calcule la hauteur de ses enfants a une
   largeur intermediaire : un tableau de specifications peut y gagner une
   ou deux lignes de hauteur. Reproduit pour un rendu identique. */
@media (max-width: 767px) {
    .hpt-boxed > .hpt-boxed__inner {
        flex-wrap: wrap;
        max-width: min( 100%, 767px );
    }
}

/* Bouton Retour (widget Bouton d'Elementor, fond et bordure retires).
   Selecteur a 0,2,1 : sur la fiche, le lien n'a pas d'adresse tant que
   product-page.js ne l'a pas posee, et le reset Hello
   `a:not([href]):not([tabindex])` (0,2,1, charge avant) ne doit pas
   l'emporter, comme avec le selecteur d'Elementor (0,4,0). */
.hpt-back-wrap {
    position: relative;
}

.hpt-back-wrap a.hpt-back {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: none;
    border-radius: 3px;
    background-color: transparent;
    color: var( --e-global-color-text );
    fill: var( --e-global-color-text );
    font-family: var( --e-global-typography-accent-font-family ), Sans-serif;
    font-size: var( --e-global-typography-accent-font-size );
    font-weight: var( --e-global-typography-accent-font-weight );
    text-align: center;
    transition: all .3s;
}

.hpt-back-wrap a.hpt-back:hover,
.hpt-back-wrap a.hpt-back:focus {
    background-color: transparent;
    color: var( --e-global-color-text );
}

.hpt-back-wrap .hpt-back svg {
    width: 1em;
    height: 1em;
}

/* Fil d'Ariane (widget fil d'Ariane WooCommerce d'Elementor Pro). */
.hpt-breadcrumb .woocommerce-breadcrumb {
    color: var( --e-global-color-primary );
    font-family: "Raleway", Sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2em;
}

.hpt-breadcrumb .woocommerce-breadcrumb > a {
    color: var( --e-global-color-text );
}

/* Gabarit "Pleine largeur" (A-08) : annule la largeur de contenu de Hello
   (`body:not([class*=elementor-page-]) .site-main`, 0,2,1). */
main.site-main.hpt-page-full {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}