/* Primitives de mise en page communes a toutes les surfaces publiques HEOP. */
.home-page .page-shell,
.public-page .page-shell {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

.public-page :is(
    .public-page-shell,
    .public-catalog-shell,
    .public-product-detail-shell,
    .public-producer-profile-shell,
    .cart-page-shell
) {
    width: min(
        var(--public-shell-max, var(--page-max)),
        calc(100% - (var(--page-gutter) * 2))
    );
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}

.public-info-shell,
.public-product-detail-shell,
.public-producer-profile-shell {
    --public-shell-max: 1120px;
}

.cart-page-shell {
    --public-shell-max: 720px;
}

.public-info-shell > :is(
    .public-info-hero,
    .public-info-grid,
    .public-info-sections,
    .public-recipes-shell,
    .public-legal-meta,
    .public-legal-toc
) {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

.public-page-header {
    min-width: 0;
}

.public-page-header--info {
    gap: 7px;
    padding: 14px;
    border-radius: 8px;
}

.public-page-header--info h1 {
    font-size: 1.35rem;
    line-height: 1.08;
}

.public-page-header__intro,
.public-page-header--info > p:not(.public-page-kicker) {
    max-width: 62ch;
    font-size: .78rem;
    line-height: 1.38;
}

.public-page-header__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 4px;
}

/* Nombre impair d'actions: la derniere occupe toute la largeur plutot que de
   rester orpheline en demi-colonne. Vaut pour 1, 3, 5... actions. */
.public-page-header__actions > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.public-page-header__actions .public-page-action {
    min-width: 0;
    min-height: var(--tap-size, 44px);
    border-radius: 8px;
    font-size: .7rem;
}

.public-page-header__actions .public-page-action > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-page-header__actions .ui-icon {
    flex: 0 0 auto;
}

.public-page-header--listing h1 {
    font-size: 1.45rem;
    line-height: 1;
}

.public-page-header--listing .public-page-header__intro {
    font-size: .7rem;
    line-height: 1.3;
}

.public-info-card,
.public-info-section {
    border-radius: 8px;
}

.public-info-card:not(.public-info-card--media) {
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 12px;
}

.public-info-card:not(.public-info-card--media) .public-info-card__icon {
    width: 42px;
    height: 42px;
    margin: 0;
    border-radius: 8px;
}

.public-info-card:not(.public-info-card--media) .public-info-card__body {
    min-width: 0;
    gap: 4px;
    padding: 0;
}

.public-info-card h2,
.public-info-section h2 {
    font-size: .92rem;
}

.public-info-card p,
.public-info-section p,
.public-info-section li {
    font-size: .72rem;
    line-height: 1.38;
}

.public-info-page:not(.public-info-page--legal_mentions):not(.public-info-page--privacy):not(.public-info-page--terms) .public-info-sections {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.public-section-header__action > span {
    white-space: nowrap;
}

@media (max-width: 359px) {
    .public-page-header__actions {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 700px) {
    .public-page-header--info {
        gap: 9px;
        padding: 18px;
    }

    .public-page-header--info h1 {
        font-size: 1.6rem;
    }

    .public-page-header--listing h1 {
        font-size: 1.8rem;
    }

    .public-info-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 12px;
    }
}

@media (min-width: 1100px) {
    .public-page-header--info h1 {
        font-size: 1.8rem;
    }

    .public-page-header--listing h1 {
        font-size: 2rem;
    }

    .home-section {
        width: min(var(--page-max), calc(100% - (var(--page-gutter) * 2)));
    }

    .home-hero {
        width: min(1440px, calc(100% - (var(--page-gutter) * 2)));
    }
}

/* ==================================================================
   DENSITE MOBILE GLOBALE (26/08 — Julien : « en mode petit ecran,
   revoir toutes les tailles, ecrire plus petit, reduire tous les
   objets pour gagner en lisibilite et en espace »).

   TOUT LE SITE PUBLIC EST EN REM : abaisser la base html reduit
   chaque texte, chaque padding en em et chaque composant d'un cran,
   sans toucher aux hierarchies ni ouvrir un chantier par page. Les
   cibles tactiles restent au-dessus de 40px : les boutons portent
   leurs propres min-height en px.
   ================================================================== */

@media (max-width: 640px) {
    html {
        font-size: 15px;
    }
}

@media (max-width: 420px) {
    html {
        font-size: 14px;
    }
}