/* =========================================================
   wassla.ma — gabarit « Boutique » + thèmes de marque
   ---------------------------------------------------------
   Toutes les couleurs passent par des variables --t-* déclarées
   dans <style id="theme"> (inc/themes.php, saisies dans l'admin).
   Un thème = 11 valeurs, au lieu d'environ 130 lignes répétées
   par marque dans l'ancien fichier (body.microsoft365 …).
   Valeurs par défaut = charte WASSLA.
   ========================================================= */

:root {
    --t-primary: #194ba1;
    --t-primary-dark: #123f6b;
    --t-soft: #edf2f7;
    --t-contact-bg: #f5f7fa;
    --t-accent: #194ba1;
    --t-chip-tel: #2787f2;
    --t-chip-mail: #5e5277;
    --t-cover-bg: #f4f8fc;
    --t-cover-ink: #0b2c4a;
}

/* ---------- Éléments communs colorés par le thème (toutes pages) ---------- */
[class*="theme-"] .product-faq summary::after { color: var(--t-primary); }
[class*="theme-"] .product-faq-head .product-eyebrow { color: var(--t-primary-dark); }
[class*="theme-"] .product-faq details[open] summary { background: color-mix(in srgb, var(--t-soft) 70%, #fff); }
[class*="theme-"] .product-contact__content { background: var(--t-primary-dark); }
[class*="theme-"] .product-contact__topbtn { background: var(--t-accent); }
[class*="theme-"] .product-chip--tel { background: var(--t-chip-tel); }
[class*="theme-"] .product-chip--mail { background: var(--t-chip-mail); }
[class*="theme-"] .product-breadcrumb a:hover { color: var(--t-primary); }

/* ---------- Bandeau de marque ---------- */
.shero {
    position: relative;
    isolation: isolate;
    background-color: var(--t-cover-bg);
    background-image: var(--t-cover-img);
    background-size: var(--hero-size, cover);
    background-position: var(--hero-pos, left center);
    background-repeat: no-repeat;
    color: var(--t-cover-ink);
    border-bottom: 1px solid color-mix(in srgb, var(--t-primary) 15%, transparent);
}
.shero__inner {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    min-height: 240px;
    padding-top: 44px;
    padding-bottom: 44px;
}
.shero__logo { display: flex; align-items: center; justify-content: center; }
/* Pas de logo (ni sur la page, ni sur le parent, ni dans le thème) : le texte prend toute la largeur */
.shero--nologo .shero__inner { grid-template-columns: minmax(0, 1fr); }
.shero--nologo .shero__content, .shero--nologo .shero__text { width: 100%; max-width: none; }
.shero__logo img { width: 100%; max-width: 300px; height: auto; max-height: 90px; object-fit: contain; }
.shero__wordmark {
    padding: 18px 24px;
    border-radius: 16px;
    background: #fff;
    color: var(--t-primary-dark);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.02em;
    box-shadow: 0 12px 30px rgba(11,44,74,.10);
}
.shero__eyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--t-primary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.shero__title {
    margin: 0 0 12px;
    color: inherit;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.08;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -.01em;
}
.shero__text { max-width: 780px; margin: 0; font-size: 16.5px; line-height: 1.65; opacity: .92; }

/* ---------- En-tête de la liste ---------- */
.store-wrap { padding: 44px 0 56px; }
.store-head { margin-bottom: 26px; text-align: center; }
.store-head__title {
    margin: 0 0 8px;
    color: #2f3540;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.2;
    font-weight: 800;
    text-transform: uppercase;
}
.store-head__lead { max-width: 820px; margin: 0 auto; color: var(--product-muted); font-size: 16px; }

/* ---------- Disposition colonne + grille ---------- */
.store { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: start; }

/* Colonne latérale */
.store-side { position: sticky; top: 96px; display: grid; gap: 16px; }
.store-side__box { padding: 22px 16px; border-radius: 14px; background: var(--t-soft); }
.store-side__title { margin: 0 0 12px; padding: 0 8px 12px; border-bottom: 1px solid rgba(0,0,0,.08); color: #23303f; font-size: 15px; font-weight: 800; }
.store-cats { margin: 0; padding: 0; list-style: none; }
.store-cats__group { margin: 14px 8px 6px; color: var(--t-primary-dark); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.store-cats a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    color: #34404f;
    font-size: 14.5px;
    line-height: 1.35;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.store-cats a:hover, .store-cats a:focus-visible { background: rgba(255,255,255,.75); color: var(--t-primary-dark); }
.store-cats a[aria-current="page"], .store-cats a[aria-current="true"] { background: #fff; color: var(--t-primary-dark); font-weight: 800; box-shadow: inset 3px 0 0 var(--t-primary); }
.store-cats__n {
    flex: none;
    min-width: 28px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.8);
    color: var(--t-primary-dark);
    font-size: 12.5px;
    font-weight: 800;
    text-align: center;
}
.store-side__help {
    overflow: hidden;
    padding: 0 18px 22px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--product-border);
    text-align: center;
}
.store-side__help img { display: block; width: calc(100% + 36px); max-width: none; height: 150px; margin: 0 -18px 16px; object-fit: cover; }
.store-side__help-title { margin: 0 0 6px; color: #23303f; font-size: 15px; font-weight: 800; text-transform: uppercase; }
.store-side__help p { margin: 0 0 14px; color: var(--product-muted); font-size: 14px; line-height: 1.55; }
.store-side__btn {
    display: inline-flex;
    padding: 10px 20px;
    border-radius: 8px;
    background: var(--t-primary-dark);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
}
.store-side__btn:hover, .store-side__btn:focus-visible { filter: brightness(1.12); }

/* Puces de catégories (mobile) */
.store-chips { display: none; }

.store-count { margin: 0 0 14px; color: var(--product-muted); font-size: 14px; font-weight: 700; }
.store-empty { padding: 30px; border: 1px dashed var(--product-border); border-radius: 14px; text-align: center; color: var(--product-muted); }

/* ---------- Cartes d'offres ---------- */
.store-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.store-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 16px 18px 16px;
    border: 1px solid var(--product-border);
    border-top: 4px solid var(--t-primary);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(20,42,70,.06);
    transition: transform .2s, box-shadow .2s;
}
.store-card:hover, .store-card:focus-within { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(20,42,70,.12); }
.store-card:focus-within { outline: 3px solid color-mix(in srgb, var(--t-primary) 40%, transparent); outline-offset: 2px; }
.store-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; margin-bottom: 10px; }
.store-card__brand { color: var(--t-primary-dark); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.store-card__badge { padding: 3px 9px; border-radius: 6px; color: #fff; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.store-card__badge--populaire { background: #16a34a; }
.store-card__badge--nouveau { background: #2563eb; }
.store-card__badge--recommande { background: #b4235a; }
.store-card__name {
    margin: 0 0 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f3f5f8;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.store-card__name a { color: #23303f; text-decoration: none; }
.store-card__name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* carte entièrement cliquable */
.store-card__name a:focus-visible { outline: none; }
.store-card__tagline { margin: 4px 0 10px; color: #475569; font-size: 14.5px; line-height: 1.55; }
.store-card__points { flex: 1; margin: 0 0 14px; padding: 0; list-style: none; }
.store-card__points li { position: relative; padding: 4px 0 4px 22px; font-size: 14px; line-height: 1.45; color: #334155; }
.store-card__points li::before { content: "✓"; position: absolute; left: 0; color: var(--t-primary); font-weight: 800; }
.store-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #edf1f5;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--t-primary-dark);
}
.store-card__more { color: var(--t-primary); }

/* ---------- Pagination ---------- */
.store-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 28px; }
.store-pager a, .store-pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}
.store-pager a { background: #f0f3f7; color: #34404f; }
.store-pager a:hover, .store-pager a:focus-visible { background: var(--t-soft); color: var(--t-primary-dark); }
.store-pager .is-current { background: var(--t-primary); color: #fff; }
.store-pager__gap { color: #94a3b8; min-width: 20px; padding: 0; }

/* Chargement continu (mobile, ajouté par site.js) */
.store-more { display: none; }
.store--infinite .store-pager { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* liens gardés dans le DOM pour les robots */
.store--infinite .store-more {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 18px;
    padding: 12px;
    border: 2px solid var(--t-primary);
    border-radius: 10px;
    background: #fff;
    color: var(--t-primary-dark);
    font: 800 15px/1.2 "Karla", Arial, sans-serif;
    cursor: pointer;
}
.store-more[aria-busy="true"] { opacity: .6; cursor: progress; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .store { grid-template-columns: 240px minmax(0, 1fr); }
    .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .shero__inner { grid-template-columns: 1fr; gap: 20px; min-height: 0; padding-top: 32px; padding-bottom: 32px; text-align: center; }
    .shero__text { margin: 0 auto; }
    .store { grid-template-columns: minmax(0, 1fr); }
    .store-side { position: static; order: 2; }
    .store-side__box { display: none; } /* remplacée par les puces en haut de liste */
    .store-chips {
        display: flex;
        gap: 8px;
        margin: 0 -15px 16px;
        padding: 4px 15px 10px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .store-chips::-webkit-scrollbar { display: none; }
    .store-chips a {
        flex: none;
        scroll-snap-align: start;
        padding: 9px 14px;
        border-radius: 999px;
        background: var(--t-soft);
        color: #34404f;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
    }
    .store-chips a[aria-current="page"], .store-chips a[aria-current="true"] { background: var(--t-primary); color: #fff; }
}
@media (max-width: 560px) {
    .store-wrap { padding-top: 28px; }
    .store-grid { grid-template-columns: 1fr; }
    .shero__wordmark { font-size: 24px; }
}


/* =========================================================
   Réglages du bandeau choisis dans l'admin (onglet « Bandeau et vignette »)
   hero-ov-* : voile ; hero-ink-* : couleur du texte ; hero-m-noimg : sans image sur mobile.
   Variables : --hero-pos / --hero-size (ordinateur), --hero-pos-m / --hero-size-m (mobile).
   ========================================================= */
.shero > *, .bhero > * { position: relative; z-index: 1; }
.shero::before, .bhero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-ov-light::before { background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 50%, rgba(255,255,255,.25) 100%); }
.hero-ov-dark::before { background: linear-gradient(90deg, rgba(8,42,72,.88) 0%, rgba(14,59,99,.72) 55%, rgba(19,67,108,.5) 100%); }
.hero-ov-dark { color: #fff; }
.hero-ink-dark, .hero-ink-dark .shero__title, .hero-ink-dark .bhero__title, .hero-ink-dark .bhero__text,
.hero-ink-dark .product-hero__title, .hero-ink-dark .product-hero__description { color: #0b2c4a !important; }
.hero-ink-light, .hero-ink-light .shero__title, .hero-ink-light .bhero__title, .hero-ink-light .bhero__text,
.hero-ink-light .product-hero__title, .hero-ink-light .product-hero__description { color: #fff !important; }

/* Bandeau des fiches produit et services : image, position et voile réglables */
.product-hero.hero-custom {
    background-color: #0b2c4a;
    background-image: var(--hero-cover, url("../images/cover-products.webp"));
    background-size: var(--hero-size, cover);
    background-position: var(--hero-pos, center top);
    background-repeat: no-repeat;
}
.product-hero.hero-custom::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(8,42,72,.88) 0%, rgba(14,59,99,.72) 55%, rgba(19,67,108,.58) 100%);
}
.product-hero.hero-ov-none::before, .product-hero.hero-ov-none::after { background: none; }
.product-hero.hero-ov-light::before { background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.7) 55%, rgba(255,255,255,.3) 100%); }

/* Gabarit « Marque » avec image : le voile clair par défaut reste, sauf choix contraire */
.bhero--cover.hero-ov-none, .bhero--cover.hero-ov-dark, .bhero--cover.hero-ov-light { background: var(--t-cover-img) var(--hero-pos, center center) / var(--hero-size, cover) no-repeat; }

@media (max-width: 860px) {
    .shero, .product-hero.hero-custom, .bhero--cover {
        background-position: var(--hero-pos-m, center center);
        background-size: var(--hero-size-m, cover);
    }
    .shero.hero-m-noimg, .bhero.hero-m-noimg { background-image: none; }
    .product-hero.hero-custom.hero-m-noimg { background-image: none; }
}

/* Mobile sans image : fond uni du thème, texte et voile ramenés aux couleurs du thème */
@media (max-width: 860px) {
    .shero.hero-m-noimg::before, .bhero.hero-m-noimg::before { background: none; }
    .shero.hero-m-noimg, .shero.hero-m-noimg .shero__title,
    .bhero.hero-m-noimg .bhero__title, .bhero.hero-m-noimg .bhero__text { color: var(--t-cover-ink, #0b2c4a) !important; }
}

/* Logo repris du parent (gamme ou marque) dans le bandeau d'une fiche : affiché en logo, pas en grand visuel */
.product-hero__badge--logo { display: flex; align-items: center; justify-content: center; }
.product-hero__badge--logo img { width: auto; max-width: 280px; max-height: 110px; height: auto; object-fit: contain; }
@media (max-width: 860px) { .product-hero__badge--logo img { max-width: 200px; max-height: 80px; } }

/* Fiche produit d'une marque en boutique : contenu dans la colonne de droite */
.store-wrap--fiche { padding-top: 28px; }
.fiche-main > section:first-of-type, .fiche-main > .facts:first-of-type { margin-top: 0; }
.fiche-main .product-container { width: 100%; max-width: none; padding-left: 0; padding-right: 0; }
.fiche-main .product-section--soft, .fiche-main .product-section--alt { border-radius: 10px; }
.fiche-main .product-section--soft > .product-container, .fiche-main .product-section--alt > .product-container { padding-left: 16px; padding-right: 16px; }
@media (max-width: 1000px) { .fiche-main .store-chips { margin-bottom: 16px; } }

/* =========================================================
   Boutique v2 (5 octobre 2026) : colonne latérale, cartes produits séparées, pagination
   Gras réservé au nom des produits ; le reste en graisse normale ou moyenne.
   ========================================================= */

/* ---------- Colonne latérale ---------- */
.store-side { gap: 0; }
.store-side__box { padding: 22px 22px 14px; border-radius: 14px 14px 0 0; background: var(--t-soft, #e9f1f9); }
.store-side__logo { margin: 0 0 14px; padding-bottom: 16px; border-bottom: 1px solid rgba(20,42,70,.08); text-align: center; }
.store-side__logo img { display: inline-block; width: auto; height: auto; max-width: min(190px, 85%); max-height: 40px; object-fit: contain; mix-blend-mode: multiply; }
.store-side__title { margin: 0 0 4px; padding: 0 0 12px; border-bottom: 1px solid rgba(20,42,70,.08); color: #23303f; font-size: 15.5px; font-weight: 600; }
.store-cats__group { margin: 14px 0 2px; color: #64748b; font-size: 12.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.store-cats li + li { border-top: 1px solid rgba(20,42,70,.07); }
.store-cats a {
    position: relative; display: block; padding: 10px 22px 10px 0; border-radius: 0; background: none;
    color: #2b3442; font-size: 15px; font-weight: 400; line-height: 1.45;
}
.store-cats a::after { content: "›"; position: absolute; right: 4px; top: 50%; transform: translateY(-52%); color: #94a3b8; font-size: 20px; line-height: 1; }
.store-cats a:hover, .store-cats a:focus-visible { background: none; color: var(--t-primary-dark, #194ba1); }
.store-cats a[aria-current="page"], .store-cats a[aria-current="true"] { background: none; box-shadow: none; color: var(--t-primary-dark, #194ba1); font-weight: 600; }
.store-cats a[aria-current="page"]::after, .store-cats a[aria-current="true"]::after { color: var(--t-primary, #194ba1); }
.store-cats__n { display: inline; min-width: 0; padding: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; font-weight: inherit; }
.store-side__media { margin: 0; background: var(--t-soft, #e9f1f9); }
.store-side__media img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: cover; object-position: center top; }
.store-side__help { padding: 20px 22px 24px; border: 0; border-radius: 0 0 14px 14px; background: var(--t-soft, #e9f1f9); color: #2b3442; text-align: center; } /* même fond et couleurs que la liste des catégories */
.store-side__help-title { margin: 0 0 8px; color: #23303f; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.store-side__help p { margin: 0 0 16px; color: #475569; font-size: 14px; }
.store-side__btn { padding: 10px 22px; border-radius: 999px; background: var(--t-primary, #194ba1); color: #fff; font-weight: 600; }
.store-side__btn:hover, .store-side__btn:focus-visible { background: var(--t-primary-dark, #123f6b); color: #fff; }

/* ---------- Barre au-dessus et sous la grille : nombre d'offres à gauche, pagination à droite ---------- */
.store-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
.store-toolbar .store-count { margin: 0; font-weight: 400; }
.store-toolbar--bottom { justify-content: flex-end; margin: 26px 0 0; }
.store-toolbar--bottom:empty { display: none; }
.store-pager { justify-content: flex-end; gap: 8px; margin: 0 0 0 auto; }
.store-pager a, .store-pager span { min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid #dfe5ec; border-radius: 999px; background: #fff; color: #34404f; font-size: 14px; font-weight: 400; }
.store-pager a:hover, .store-pager a:focus-visible { border-color: var(--t-primary, #194ba1); background: #fff; color: var(--t-primary-dark, #194ba1); }
.store-pager .is-current { border-color: #2a9fd6; background: #2a9fd6; color: #fff; font-weight: 600; }
.store-pager__gap { border: 0 !important; background: none !important; min-width: 20px; }
.store-pager__nav { padding: 0 16px !important; border-color: #e6eaef !important; background: #eef1f4 !important; font-weight: 600 !important; }

/* ---------- Cartes produits : blocs séparés et identifiables ---------- */
.store-grid { gap: 20px; }
.store-card, .plan {
    position: relative; display: flex; flex-direction: column; padding: 18px 20px 16px;
    border: 1px solid #e3e9f0; border-top: 1px solid #e3e9f0; border-radius: 14px;
    background-color: var(--card-color, #fff);
    background-image: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.8)), var(--card-img, none), var(--card-grad, none);
    background-size: cover; background-position: center;
    box-shadow: 0 8px 24px rgba(20,42,70,.08);
    transition: box-shadow .2s, transform .2s, border-color .2s;
}
.store-card:not(.has-look), .plan:not(.has-look) { background-image: none; }
.store-card.has-look:not([style*="--card-img"]), .plan.has-look:not([style*="--card-img"]) { background-image: var(--card-grad, none); }
.store-card:hover, .store-card:focus-within, .plan:hover, .plan:focus-within { transform: translateY(-2px); border-color: color-mix(in srgb, var(--t-primary, #194ba1) 35%, #e3e9f0); box-shadow: 0 14px 32px rgba(20,42,70,.13); }
.store-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; margin-bottom: 12px; }
.store-card__logo { display: block; width: auto; max-width: 130px; height: 22px; object-fit: contain; object-position: left center; }
.store-card__brand { color: #64748b; font-size: 13px; font-weight: 500; letter-spacing: 0; }
.store-card__badge, .plan__badge { padding: 4px 10px; border-radius: 6px; color: #fff; font-size: 11.5px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; }
.store-card__badge--populaire { background: #22a35a; }
.store-card__badge--nouveau { background: #1d7af3; }
.store-card__badge--recommande { background: #d9363e; }
.store-card__name { margin: 0 0 12px; padding: 10px 12px; border-radius: 6px; background: #eeeeee; color: #1d2733; font-size: 19px; line-height: 1.28; font-weight: 800; text-align: left; text-transform: none; letter-spacing: -.005em; }
/* Carte allégée (5 oct. 2026) : plus de ligne logo/badge en haut ni de pied « Tarif sur demande / Voir l'offre » ;
   le nom, sur fond #eeeeee, identifie la carte et la rend cliquable en entier. */
.store-card__points { margin-bottom: 0; }
.store-card__name a { color: inherit; }
.store-card:hover .store-card__name a { color: var(--t-primary-dark, #194ba1); }
.store-card__tagline { margin: 0 0 12px; color: #4b5869; font-size: 14.5px; font-weight: 400; }
.store-card__points li { color: #3b4655; font-weight: 400; }
.store-card__points li::before { content: "✓"; color: var(--t-primary, #194ba1); font-weight: 400; }
.store-card__foot { padding-top: 12px; border-top: 1px solid rgba(20,42,70,.08); color: #475569; font-size: 14px; font-weight: 400; }
.store-card__more { color: var(--t-primary, #194ba1); font-weight: 500; }

/* Cartes des listes « Autres offres » et des gammes : même présentation */
.plan-grid { gap: 20px; }
.plan--featured { border: 1px solid color-mix(in srgb, var(--t-primary, #194ba1) 40%, #e3e9f0); }
.plan__badge { position: static; align-self: flex-start; margin-bottom: 10px; background: #22a35a; }
.plan__name { font-size: 19px; font-weight: 800; text-transform: none; }
.plan__tagline { font-weight: 400; }
.plan__points li { font-weight: 400; border-top: 0; padding: 4px 0 4px 22px; }
.plan__points li::before { font-weight: 400; }
.plan__foot { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(20,42,70,.08); }
.plan__price { color: #475569; font-size: 14px; font-weight: 400; text-align: left; }
.plan__foot .product-btn { width: auto; min-height: 38px; padding: 0 16px; font-weight: 500; }

@media (max-width: 1000px) {
    .store-side__media { display: none; }
    .store-side__help { border-radius: 14px; margin-top: 24px; }
    .store-toolbar { margin-bottom: 14px; }
}
@media (max-width: 620px) {
    .store-toolbar { flex-direction: column; align-items: flex-start; }
    .store-pager { margin-left: 0; }
}

/* « Image du produit » à côté de « À propos du produit » */
.about__media { margin: 0; align-self: start; }
.about__media img { display: block; width: 100%; height: auto; border-radius: 14px; border: 0; background: #fff; object-fit: cover; }

/* ---------- Hauteur minimale du bandeau réglée dans l'admin (Bandeau et image › Hauteur du bandeau) ----------
   --hero-minh : ordinateur (au-dessus de 860 px) ; --hero-minh-m : mobile. Le bandeau s'agrandit si le texte dépasse. */
/* Par défaut (aucune hauteur saisie) : 320 px sur ordinateur, 460 px sur mobile ; contenu centré verticalement */
:root { --hero-minh: 320px; --hero-minh-m: 460px; }
.shero .shero__inner, .product-hero .product-hero__inner, .bhero .bhero__inner { box-sizing: border-box; }
@media (min-width: 861px) {
    .shero .shero__inner,
    .product-hero .product-hero__inner,
    .bhero .bhero__inner { min-height: var(--hero-minh, 320px); }
}
@media (max-width: 860px) {
    .shero .shero__inner,
    .product-hero .product-hero__inner,
    .bhero .bhero__inner { min-height: var(--hero-minh-m, 460px); }
}

/* « À propos du produit » : contenu HTML libre après les points forts (Admin › Fiche produit › À propos) */
.about__extra, .about__extra.rich-html { margin-top: 20px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.about__extra img { max-width: 100%; height: auto; border-radius: 8px; }
.about__extra figure { margin: 16px 0; }
.about__extra figcaption { margin-top: 6px; color: #64748b; font-size: 13.5px; }

/* La zone cliquable du nom couvre toute la carte, y compris la liste de points (positionnée) */
.store-card__name a::after { z-index: 2; }

/* ---------- Cartes produits, version du 5 octobre 2026 : nom + description courte ---------- */
.store-card, .plan { padding: 18px 10px 6px; border: 1px solid #f5f2f2; }
.store-card__name { padding: 10px 12px; background: #f7f7f7; font-size: 18px; font-weight: 700; text-align: center; }
.store-card__tagline { margin: 0 6px 12px; text-align: center; }
/* Badge hors du titre : étiquette en haut à droite de la carte ; n'ajoute aucune hauteur au titre ni à la carte */
.store-card > .store-card__badge { position: absolute; top: 8px; right: 5px; left: auto; z-index: 3; transform: initial; margin: 0; padding: 3px 10px; border-radius: 5px; font-size: 10.5px; line-height: 1.3; font-weight: 600; letter-spacing: .03em; white-space: nowrap; pointer-events: none; }
/* Nombre de cartes par ligne (Admin › Marques › Contenu) ; tablette : 2 au plus ; mobile : 1 */
.store-grid.store-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.store-grid.store-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.store-grid.store-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .store-grid.store-grid--cols-3, .store-grid.store-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .store-grid[class*="store-grid--cols-"] { grid-template-columns: 1fr; } }

/* ---------- Caractéristiques : tableau 2 colonnes, lignes alternées (fond gris clair / blanc), sans bordures ---------- */
.specs { display: block; border: 0; border-radius: 0; overflow: visible; }
.specs__row { display: grid; grid-template-columns: minmax(160px, 34%) 1fr; align-items: center; border: 0 !important; }
.specs__row:nth-child(odd) { background: #f5f5f5; }
.specs__row:nth-child(even) { background: #fff; }
.specs dt { padding: 12px 18px; background: transparent; color: #1d2733; font-size: 15.5px; font-weight: 700; line-height: 1.35; }
.specs dd { margin: 0; padding: 12px 18px; color: #5b6573; font-size: 15.5px; line-height: 1.45; }
@media (max-width: 560px) {
    .specs__row { grid-template-columns: 42% 58%; }
    .specs dt, .specs dd { padding: 10px 12px; font-size: 14.5px; }
}

/* ---------- Badges (modèle : étiquettes rectangulaires empilées en haut à gauche) ---------- */
.store-card__badge { border-radius: 3px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.store-card__badges { position: absolute; top: 12px; left: 12px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; }
.store-card__badges .store-card__badge { position: static; transform: none; padding: 4px 10px; font-size: 12.5px; line-height: 1.25; }

/* ---------- Cartes avec image : image à gauche, nom et informations clés à droite ---------- */
.store-grid--image .store-card--image,
.store-grid--liste .store-card--liste {
    display: grid; grid-template-columns: 42% 1fr; gap: 18px; align-items: start; padding: 16px; border: 1px solid #d9dee4; border-radius: 4px; text-align: left;
}
.store-card--image:hover, .store-card--liste:hover { border-color: #e8a33d; }
.store-card__media { display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; background: #fff; }
.store-card__media img { width: 100%; height: 100%; object-fit: contain; }
.store-card__media--logo { background: #f5f7fa; }
.store-card__media--logo img { width: 60%; height: auto; max-height: 60%; }
.store-card__body { display: flex; flex-direction: column; min-width: 0; padding-top: 10px; }
.store-card--image .store-card__name, .store-card--liste .store-card__name {
    margin: 0 0 14px; padding: 0; background: none; color: #111827; font-size: 20px; font-weight: 700; line-height: 1.3; text-align: left;
}
.store-card__facts { margin: 0; padding: 0; list-style: none; }
.store-card__facts li { padding: 2px 0; color: #1f2937; font-size: 15px; line-height: 1.45; }
.store-card__facts strong { font-weight: 700; }
.store-card--image .store-card__tagline, .store-card--liste .store-card__tagline { margin: 0 0 12px; text-align: left; }

/* ---------- Liste : une offre par ligne, avec descriptif ---------- */
.store-grid.store-grid--list { grid-template-columns: 1fr; }
.store-grid--liste .store-card--liste { grid-template-columns: 220px 1fr; gap: 24px; padding: 18px 22px; }
/* Liste : image affichée en entier (pas de recadrage ni de hauteur imposée) */
.store-card--liste .store-card__media { aspect-ratio: auto; align-self: start; }
.store-card--liste .store-card__media img { height: auto; }
.store-card--liste .store-card__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 24px; }
.store-card--liste .store-card__more { align-self: flex-end; margin-top: 12px; color: var(--t-primary, #194ba1); font-weight: 700; }

@media (max-width: 860px) {
    .store-grid--liste .store-card--liste { grid-template-columns: 140px 1fr; gap: 16px; padding: 14px; }
    .store-card--liste .store-card__facts { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .store-grid--image .store-card--image, .store-grid--liste .store-card--liste { grid-template-columns: 1fr; }
    .store-card__media { aspect-ratio: 16 / 10; }
    .store-card__body { padding-top: 0; }
}

/* Badge des cartes avec image et en liste : étiquette posée sur le bord haut de la carte, sans masquer l'image */
.store-card--image .store-card__badges, .store-card--liste .store-card__badges { top: -11px; left: 14px; }
.store-card--image, .store-card--liste { margin-top: 6px; }
@media (max-width: 560px) { .store-card--liste .store-card__media img, .store-card--image .store-card__media img { height: auto; } .store-card__media { aspect-ratio: auto; } }
/* Avec image : image entière dans le cadre carré (plus de recadrage d'une image haute ou large) */
.store-card--image .store-card__media { position: relative; }
.store-card--image .store-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.store-card--image .store-card__media--logo img { inset: 20%; width: 60%; height: 60%; }
/* Liste sans image : cadre du logo de hauteur raisonnable */
.store-card--liste .store-card__media--logo { min-height: 150px; }
.store-card--liste .store-card__media--logo img { width: 55%; }
@media (max-width: 560px) { .store-card--image .store-card__media { aspect-ratio: 1 / 1; } }

/* ---------- « À propos du produit » avec image : image flottante à droite (280 px), le texte l'entoure ---------- */
.about.about--float { display: block; }
.about--float::after { content: ""; display: table; clear: both; }
.about__media--float { float: right; width: 280px; margin: 6px 0 18px 32px; }
.about__media--float img { width: 100%; height: auto; object-fit: contain; }
/* Chaque point fort se place à côté de l'image puis reprend toute la largeur sous elle (puces toujours visibles) */
.about--float .checklist li { display: flow-root; }
.about--float .about__extra { clear: none; }
.about--float .about__extra figure { margin: 16px 0; }
@media (max-width: 640px) {
    .about__media--float { float: none; width: 100%; max-width: 280px; margin: 0 auto 18px; }
}

/* Liste : extrait du texte « À propos » sous la description (remplit la carte à côté de l'image) */
.store-card--liste .store-card__tagline { color: #1f2937; font-size: 15.5px; }
.store-card__excerpt { margin: 0; color: #5b6573; font-size: 14.5px; line-height: 1.6; }

/* « À propos » sans image du produit : texte sur toute la largeur (plus d'encart « Tarif sur demande ») */
.about.about--full { display: block; }

/* ---------- Blocs différés (fiche produit, body.perf-lazy) : mise en page seulement à l'approche ----------
   Le contenu reste dans le HTML ; contain-intrinsic-size réserve une hauteur estimée pour éviter les sauts de défilement. */
.perf-lazy .lazyblock { content-visibility: auto; contain-intrinsic-size: auto 600px; }
.perf-lazy #myfooter.lazyblock { contain-intrinsic-size: auto 520px; }

/* Lot vitesse : image de fond du bandeau en deux tailles (hero_attrs) — originale sur ordinateur, version réduite sur mobile.
   --rimg-d / --rimg-m sont posées sur la balise ; on les recopie dans la variable lue par le gabarit. */
.hero-rimg-tc { --t-cover-img: var(--rimg-d); }
.hero-rimg-hc { --hero-cover: var(--rimg-d); }
@media (max-width: 860px) {
    .hero-rimg-tc { --t-cover-img: var(--rimg-m, var(--rimg-d)); }
    .hero-rimg-hc { --hero-cover: var(--rimg-m, var(--rimg-d)); }
}