/*
 * theme.css — nouvelle identité visuelle du site.
 * Chargé APRES le CSS du thème Shopware (theme/.../css/allaaaf.css) pour
 * prendre le dessus sans y toucher. Réutilise au maximum les classes
 * existantes du site (Shopware/Bootstrap) plutôt que d'en créer de
 * nouvelles, pour que la refonte reste pilotable en CSS seul sur les
 * 2000+ pages sans réécrire leur HTML.
 * Ne renomme/ne supprime jamais les attributs data-* ni les classes
 * listées comme "zone interdite" dans MIGRATION_NOTES.md.
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
    --color-bg: #FFFFFF;
    --color-bg-alt: #F5F6F8;
    --color-primary: #0D1B2E;
    --color-primary-light: #16283f;
    --color-accent: #F5820D;
    --color-accent-dark: #d96f08;
    --color-text: #1A2332;
    --color-text-secondary: #6B7280;
    --color-border: #E5E7EB;
    --color-success: #16A34A;
    --color-fast-delivery: #FACC15;
    --color-fast-delivery-text: #1A2332;
    --color-white: #FFFFFF;

    /* Roboto est la seule famille avec de vrais fichiers .woff dans ce
       mirroir (bundles/baumanntheme/storefront/font/) ; les fichiers
       Inter-*.html sous theme/f03f4fed.../assets/font/ sont en réalité des
       pages d'erreur HTTrack, pas des polices. Inter/Barlow/Archivo restent
       en fallback inertes : bascule automatique si de vrais fichiers Inter
       sont fournis un jour. */
    --font-family: 'Roboto', 'Inter', 'Barlow', 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --shadow-sm: 0 1px 3px rgba(13, 27, 46, 0.08);
    --shadow-md: 0 4px 16px rgba(13, 27, 46, 0.12);
    --shadow-hover: 0 8px 24px rgba(13, 27, 46, 0.16);
}

/* ==========================================================================
   1a. Design tokens — extension refonte 2026 (additive, ne remplace rien
   ci-dessus)
   ========================================================================== */
:root {
    --color-danger: #DC2626;
    --color-whatsapp: #25D366;
    --color-whatsapp-dark: #1FB956;

    --color-announcement-bg: var(--color-primary);
    --color-announcement-text: rgba(255, 255, 255, 0.92);

    --color-content-bg: var(--color-bg-alt);

    --color-range-track: var(--color-border);
    --color-range-thumb: var(--color-primary);

    --color-rating-star: var(--color-accent);
    --color-rating-empty: var(--color-border);

    --focus-ring: 0 0 0 3px rgba(245, 130, 13, 0.15);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
body {
    font-family: var(--font-family);
    color: var(--color-text);
    background: var(--color-bg);
}

a { color: var(--color-primary); }
a:hover { color: var(--color-accent); }

h1, h2, h3, .headline, .cms-element-title {
    font-family: var(--font-family);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text);
    letter-spacing: 0.01em;
}

/* Mot-clé accent dans les titres : entourer le mot voulu de
   <span class="hl-accent">...</span> sur les pages pilotes. */
.hl-accent { color: var(--color-accent); }

section:nth-of-type(even),
.cms-section:nth-of-type(even) {
    background: var(--color-bg-alt);
}

/* ==========================================================================
   3. Header
   ========================================================================== */
.top-bar,
.top-bar-nav {
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.8125rem;
}
.top-bar a { color: var(--color-white); }
.top-bar a:hover { color: var(--color-accent); }

.header-main,
.header-row,
header.header,
.header-nav {
    background: var(--color-bg);
}
.header-main {
    border-bottom: 1px solid var(--color-border);
}

.header-row { padding-top: var(--space-3); padding-bottom: var(--space-3); }

.header-logo-main-link { color: var(--color-text); }
.header-logo-main-img { max-height: 44px; width: auto; }

/* Numéro de téléphone du header principal (.header-top-phone > a.footer-fax
   — le thème natif réutilise la classe "footer-fax" pour ce lien, ce qui
   lui donne par défaut la couleur de lien native (bleu), peu lisible sur
   le fond navy du header) */
.header-top-phone,
.header-top-phone a,
.header-top-phone a.footer-fax {
    color: var(--color-white);
}
.header-top-phone a:hover {
    color: var(--color-accent);
}

.header-search-input.form-control {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    border: none;
}
.header-search-btn {
    background: var(--color-accent);
    border-color: var(--color-accent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--color-white);
}
.header-search-btn:hover { background: var(--color-accent-dark); }
.header-search-icon { color: inherit; }

.header-actions-btn {
    color: var(--color-text);
}
.header-actions-btn:hover,
.header-actions-btn:focus {
    color: var(--color-accent);
}

/* Élements non fonctionnels sans backend Shopware (recherche, wishlist) ou
   redondants avec le bandeau utilitaire (.top-bar) : masqués en CSS,
   DOM conservé (réversible, rien retiré des pages). */
.header-top-phone,
.header-search-col,
.header-wishlist {
    display: none;
}
.header-actions-col .col-auto:has(.header-wishlist) {
    display: none;
}

/* Navigation principale */
.main-navigation-menu,
.nav.main-navigation-menu {
    background: var(--color-bg);
}
.main-navigation-link {
    color: var(--color-text) !important;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-bottom: 3px solid transparent;
}
.main-navigation-link:hover,
.main-navigation-link.active,
.main-navigation-link:focus {
    color: var(--color-accent) !important;
    border-bottom-color: var(--color-accent);
}
/* Item promotions : cible le lien vers sonderangebote sans dépendre de son
   libellé traduit (l'href reste stable, contrairement au texte visible). */
.main-navigation-link[href*="sonderangebote"] {
    color: var(--color-accent) !important;
}

.navigation-flyout {
    background: var(--color-white);
    box-shadow: var(--shadow-md);
    border-top: 3px solid var(--color-accent);
}
.navigation-flyout-link {
    color: var(--color-text);
}
.navigation-flyout-link:hover {
    color: var(--color-accent);
}

/* ==========================================================================
   4. Boutons
   ========================================================================== */
.btn-primary,
.btn.btn-primary,
.header-search-btn,
form.buy-widget .btn,
.ab-cart-order-btn.is-whatsapp {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: var(--radius-sm);
}
.btn-primary:hover,
.btn.btn-primary:hover,
form.buy-widget .btn:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.btn-secondary,
.btn.btn-secondary,
.btn-outline-secondary,
.btn-outline-primary {
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    text-transform: uppercase;
    font-weight: 700;
    border-radius: var(--radius-sm);
}
.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-outline-primary:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Boutons pleins sur fond sombre (hero, bandeaux) */
.bg-dark .btn-outline-secondary,
.hero .btn-outline-secondary,
.hero-overlay .btn-outline-secondary {
    border-color: var(--color-white);
    color: var(--color-white);
}
.bg-dark .btn-outline-secondary:hover,
.hero .btn-outline-secondary:hover,
.hero-overlay .btn-outline-secondary:hover {
    background: var(--color-white);
    color: var(--color-primary);
}

/* ==========================================================================
   5. Badges
   ========================================================================== */
.information-badge,
span[class^="badge_"],
span[class*=" badge_"] {
    display: inline-block;
    background: var(--color-bg-alt);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    text-transform: uppercase;
    font-weight: 700;
    padding: 2px 8px;
    margin: 0 4px 4px 0;
}

.delivery-information,
.product-delivery-information {
    color: var(--color-success);
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
}
.delivery-information .icon-success { color: var(--color-success); }
/* Le statut "en stock" (icon-success) n'est pas le seul état possible :
   Shopware utilise aussi icon-warning ("Befindet sich im Zulauf" /
   disponibilité limitée) et icon-error. Sans cette règle, tous les statuts
   héritaient à tort la couleur verte "en stock" ci-dessus. */
.delivery-information:has(.icon-warning),
.product-delivery-information:has(.icon-warning) {
    color: var(--color-accent);
}
.delivery-information:has(.icon-danger),
.product-delivery-information:has(.icon-danger) {
    color: var(--color-danger);
}

/* ==========================================================================
   6. Carte produit (product-box)
   ========================================================================== */
.product-box,
.card.product-box {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    overflow: hidden;
}
.product-box:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.product-name .name-upper {
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text);
}
.product-name .name-lower {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

.price-title,
.price-tax {
    text-transform: uppercase;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    letter-spacing: 0.03em;
}
.product-price {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-text);
}

.information-row {
    border-bottom: 1px solid var(--color-border);
    padding: 6px 4px !important;
}
.information-row:nth-of-type(2n) {
    background-color: var(--color-bg-alt) !important;
}
.information-label {
    text-transform: uppercase;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    font-weight: 700;
    letter-spacing: 0.03em;
}
.information-value {
    font-weight: 600;
    color: var(--color-text);
}
.property-checkmark { color: var(--color-success); }

/* Carte produit LISTING (pas la fiche produit) : ne montrer que les 3
   premières caractéristiques, comme sur l'image de référence, plutôt que
   la liste complète (parfois 8-9 lignes) qui alourdit visuellement la
   grille. Robuste quel que soit l'ordre réel des champs par produit — pas
   de sélection CSS possible par contenu texte (ex. cibler "PTAC"
   précisément), donc on tronque par position. La fiche produit affiche
   toujours la liste complète (scope différent, cf. .product-box ci-dessous). */
.product-box .product-informations .information-row:nth-of-type(n + 4) {
    display: none;
}

.product-wishlist button,
.product-wishlist-action-circle {
    background: var(--color-white);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
}

/* Bouton "Voir les détails" (injecté par scripts/inject-product-cta.js) */
.product-box-cta {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: var(--space-3);
}

/* ==========================================================================
   7. Formulaires
   ========================================================================== */
.form-control,
.form-select {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(245, 130, 13, 0.15);
}
.form-label {
    text-transform: uppercase;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Onglets (fiche produit) */
.nav-tabs .nav-link {
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-text-secondary);
    border: none;
    border-bottom: 3px solid transparent;
}
.nav-tabs .nav-link.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
    background: transparent;
}

/* ==========================================================================
   8. Panier maison (cart.js) — variables uniquement, structure inchangée
   ========================================================================== */
#ab-cart-fab {
    background: var(--color-accent);
    box-shadow: var(--shadow-md);
}
.ab-cart-header,
#ab-cart-drawer .ab-cart-header {
    background: var(--color-primary);
    color: var(--color-white);
}
.ab-cart-order-btn.is-email {
    background: var(--color-primary);
    color: var(--color-white);
}

/* ==========================================================================
   9. Footer — refonte densité/hiérarchie (trop chargé/dense à l'origine :
   icônes +/- décoratives sur desktop, tous les textes dans la même
   couleur/poids sans hiérarchie, pas de séparation visuelle entre les
   sections). Structure DOM inchangée, uniquement CSS.
   ========================================================================== */
.footer-main {
    background: var(--color-primary);
    color: var(--color-white);
    padding-top: var(--space-8);
}
.footer-main a {
    color: rgba(255, 255, 255, 0.65);
}
.footer-main a:hover {
    color: var(--color-accent);
}
.footer-columns {
    row-gap: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-column .footer-column-headline,
.footer-column h4,
.footer-column h5 {
    text-transform: uppercase;
    color: var(--color-white);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    padding-bottom: var(--space-3) !important;
    margin-bottom: var(--space-2);
    border-bottom: 2px solid rgba(255, 255, 255, 0.12);
}
/* Icônes +/- : utiles uniquement pour l'accordéon mobile natif, purement
   décoratives (pointer-events:none nativement) sur desktop où tout est
   déjà affiché en permanence — retirées pour désencombrer les en-têtes. */
@media (min-width: 768px) {
    .footer-column-toggle { display: none; }
}
.footer-link-item {
    padding: var(--space-1) 0 !important;
}
.footer-link {
    font-size: 0.875rem;
    line-height: 1.6;
}
.footer-contact-hotline,
.footer-opening-hours,
.footer-address {
    font-size: 0.875rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.65);
}
.footer-contact-hotline .footer-tel,
.footer-address a {
    color: var(--color-white);
    font-weight: 600;
}
.footer-opening-hours table {
    margin: var(--space-2) 0;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.65);
}
.footer-opening-hours table td:first-child {
    padding-right: var(--space-2);
    color: var(--color-white);
    font-weight: 600;
}
.footer-bottom {
    padding: var(--space-5) 0 var(--space-6) !important;
}
.footer-vat,
.footer-bottom .text-center {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.75rem;
}
.footer-vat a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: underline;
}
.scroll-up-button .btn {
    border-radius: 50%;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   10. Responsive (mobile-first, calé sur les breakpoints Bootstrap déjà
   utilisés par le HTML : 576 / 768 / 992 / 1200 / 1400)
   ========================================================================== */
@media (max-width: 991.98px) {
    .main-navigation-menu { display: none; }
    .header-search-col { order: 3; flex-basis: 100%; margin-top: var(--space-2); }
    .product-price { font-size: 1.375rem; }
}

@media (max-width: 767.98px) {
    h1, .cms-element-title h1 { font-size: 1.5rem; }
    .product-box { margin-bottom: var(--space-4); }
    #ab-cart-drawer { width: 100%; }
}

@media (max-width: 575.98px) {
    .header-row { padding-top: var(--space-2); padding-bottom: var(--space-2); }
    .btn-primary, .btn.btn-primary { width: 100%; }
}

/* ==========================================================================
   11. Icônes SVG — les <use> du thème natif portent un fill="#758CA3" codé
   en dur par icône (attribut de présentation SVG), indépendant du CSS. Une
   règle CSS normale (même peu spécifique) l'emporte toujours sur un
   attribut de présentation : on neutralise cette valeur une fois pour
   toutes pour que chaque icône hérite la couleur de son contexte (blanc
   sur fond navy, orange au survol, etc.) sans reprendre chaque usage.
   ========================================================================== */
.icon svg use,
[class*="icon-"] svg use {
    fill: currentColor;
}

/* ==========================================================================
   12. Bandeau de réassurance (injecté par scripts/inject-announcement-bar.js
   dans .top-bar-nav, additif — ne touche pas au numéro de téléphone existant)
   ========================================================================== */
.top-bar-reassurance {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--color-announcement-text);
}
.top-bar-reassurance li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}
.top-bar-reassurance .icon {
    font-size: 0.75rem;
    color: var(--color-accent);
}
@media (max-width: 767.98px) {
    .top-bar-reassurance li:nth-child(n + 2) { display: none; }
}

/* ==========================================================================
   13. Badge panier — icône header (span injecté par scripts/inject-cart.js
   + synchronisé par cart.js updateBadge() ; pendant de #ab-cart-fab
   .ab-cart-badge sur le bouton flottant, cf. cart-widget.css)
   ========================================================================== */
.header-cart-btn { position: relative; }
.header-cart-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--color-accent);
    color: var(--color-white);
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 11px;
    line-height: 18px;
    font-weight: 700;
    text-align: center;
    display: none;
}
.header-cart-badge.is-visible { display: block; }

/* ==========================================================================
   14. Badge stock produit (déplacé depuis sous le prix par
   scripts/relocate-product-delivery-badge.js) + repositionnement du coeur
   favoris en haut à droite (override CSS uniquement de
   .product-wishlist-action-circle, positionné en bas à droite dans le
   thème natif — structure DOM inchangée)
   ========================================================================== */
.product-image-wrapper-wrapper .delivery-time {
    position: absolute;
    top: 20px;
    left: 1rem;
    z-index: 2;
    height: auto;
    max-width: calc(100% - 2rem);
    background: var(--color-white);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    padding: 2px 8px;
}
.product-image-wrapper-wrapper .delivery-time .delivery-information,
.product-image-wrapper-wrapper .delivery-time .product-delivery-information p {
    font-size: 0.625rem;
    margin: 0;
    white-space: normal;
}

.product-wishlist-action-circle {
    top: 1rem;
    bottom: auto;
}

/* ==========================================================================
   15. Panneau de filtres (.cms-element-sidebar-filter) — restylage visuel
   uniquement, structure dropdown/offcanvas native conservée telle quelle
   (data-offcanvas-filter*, data-filter-range-slider-extended-options :
   zone interdite, cf. MIGRATION_NOTES.md). Décision documentée : pas de
   restructuration en sidebar permanente (voir plan de refonte).
   ========================================================================== */
.filter-panel-wrapper-toggle {
    border-color: var(--color-primary);
    color: var(--color-primary);
    border-radius: var(--radius-sm);
}
.filter-panel-wrapper-toggle:hover,
.filter-panel-wrapper-toggle.show {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.filter-panel-item-toggle {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
}
.filter-panel-item-toggle.show,
.filter-panel-item-toggle:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.filter-panel {
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

input[type="range"] {
    accent-color: var(--color-range-thumb);
}

.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* ==========================================================================
   16. Offcanvas mobile (nav burger + filtres) — classes Bootstrap
   génériques (.offcanvas-*) et classes Shopware (.navigation-offcanvas-*,
   .filter-panel-offcanvas-*) : zone stable au niveau CSS, seuls les
   attributs data-offcanvas-* sont zone interdite (cf. MIGRATION_NOTES.md)
   ========================================================================== */
.offcanvas-header {
    background: var(--color-primary);
    color: var(--color-white);
}

.navigation-offcanvas-container {
    background: var(--color-white);
}
.navigation-offcanvas-headline {
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}
.navigation-offcanvas-link {
    color: var(--color-text);
    text-transform: uppercase;
    font-weight: 600;
}
.navigation-offcanvas-link:hover { color: var(--color-accent); }

.filter-panel-offcanvas-header {
    background: var(--color-primary);
    color: var(--color-white);
}

/* ==========================================================================
   17. Compte client — connexion / inscription (.login-card, .register-card
   déjà présents dans le DOM ; page à deux cartes côte à côte, on la
   recentre et on harmonise leur habillage plutôt que de forcer une colonne
   unique qui écraserait le formulaire d'inscription)
   ========================================================================== */
.account-register {
    background: var(--color-content-bg);
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}
.account-register > .row {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.login-card,
.register-card {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.login-card .card-title,
.register-card .card-title {
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-primary);
    font-size: 1rem;
}

/* ==========================================================================
   18. Panier natif Shopware — page toujours vide dans ce mirroir (AJAX
   natif cassé, cf. MIGRATION_NOTES.md) : on restyle le message existant et
   on ajoute une indication vers le vrai panier (maison, cart.js) via
   contenu généré CSS, sans toucher au DOM ni au data-form-* du checkout.
   ========================================================================== */
.checkout .alert.alert-info {
    background: var(--color-content-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
}
.checkout .alert.alert-info .alert-content-container::after {
    content: "Nutzen Sie das Warenkorb-Symbol oben auf der Seite, um Ihre Auswahl zu sehen.";
    display: block;
    margin-top: var(--space-2);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/* ==========================================================================
   19. Page 404 (contenu déjà présent nativement : illustration, titre,
   texte, CTA .btn.btn-primary — restylage uniquement)
   ========================================================================== */
.content-main h1 {
    color: var(--color-primary);
}

/* ==========================================================================
   20. États de formulaire — succès / erreur (classes Bootstrap zone-stable,
   seuls les attributs data-form-* sont zone interdite)
   ========================================================================== */
.is-invalid.form-control,
.is-invalid.form-select {
    border-color: var(--color-danger);
}
.invalid-feedback {
    color: var(--color-danger);
}
.alert-success {
    background: rgba(22, 163, 74, 0.08);
    border-color: var(--color-success);
    color: var(--color-success);
}
.alert-danger {
    background: rgba(220, 38, 38, 0.08);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* ==========================================================================
   21. Blocs CMS homepage — jusqu'ici seuls le header/nav/footer/cartes
   produit/filtres avaient été restylés (sections 3, 6, 9, 15) ; les blocs
   de contenu de la page d'accueil (héro, widget de recherche, grille de
   catégories, bannières, slider actus) provenaient tous du CMS Shopware
   natif et n'avaient encore reçu aucun style de la refonte. Cette section
   les rattache aux tokens, structure DOM inchangée (cms-block-*/
   cms-element-* : zone interdite, cf. MIGRATION_NOTES.md).
   ========================================================================== */
.cms-element-title-paragraph,
.cms-block .headline {
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: 0.01em;
}
/* Titre de section + lien catalogue (ex. "Voir tout le catalogue →") */
.cms-element-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.cms-element-title-row .cms-element-title-paragraph { margin: 0; }
.cms-element-title-link {
    color: var(--color-accent);
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.cms-element-title-link:hover { color: var(--color-accent-dark); }

/* Héro — slider image pleine largeur (cms-block-image-slider) */
.base-slider-controls-prev,
.base-slider-controls-next {
    background: var(--color-white);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
}
.base-slider-controls-prev .icon,
.base-slider-controls-next .icon {
    color: var(--color-primary);
}

/* Overlay texte + CTA sur le héro (injecté par scripts/inject-hero-overlay.js,
   uniquement sur les pages .fr.html pour l'instant, cf. MIGRATION_NOTES.md).
   Le slider natif (data-base-slider*, zone interdite fonctionnellement)
   calcule sa hauteur et anime ses slides en JS ("autoHeight":true,
   autoplay). Première tentative : forcer position:absolute sur l'image et
   une hauteur fixe sur toute la chaîne de conteneurs → ça entre en conflit
   avec le JS du plugin (image qui clignote/disparaît par intermittence,
   constaté par le client). Corrigé en ne touchant qu'un seul point : une
   hauteur MINIMALE sur le conteneur racine (jamais 0/effondré, laisse le
   JS du slider gérer le reste normalement à l'intérieur), sans imposer de
   position ni de hauteur aux éléments gérés par le plugin. */
.cms-element-image-slider {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    border-radius: var(--radius-lg);
}
.cms-element-image-slider .image-slider-image {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    filter: brightness(0.55);
}
@media (max-width: 767.98px) {
    .cms-element-image-slider { min-height: 320px; }
    .cms-element-image-slider .image-slider-image { max-height: 420px; }
}
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-8);
    max-width: 640px;
    pointer-events: none;
}
.hero-overlay .btn { pointer-events: auto; }
h1.hero-overlay-title,
.hero-overlay-title {
    color: var(--color-white) !important;
    font-size: clamp(1.75rem, 4vw, 3rem);
    line-height: 1.1;
    margin: 0;
    text-wrap: balance;
}
.hero-overlay-title .hl-accent {
    color: var(--color-accent) !important;
}
.hero-overlay-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.0625rem;
    margin: 0;
    max-width: 32ch;
}
.hero-overlay-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-2);
}
@media (max-width: 767.98px) {
    .hero-overlay { padding: var(--space-4); max-width: 100%; }
    .hero-overlay-subtitle { max-width: 100%; }
}

/* Bandeau de confiance (injecté par scripts/inject-trust-band.js) */
.trust-band {
    background: var(--color-primary);
    padding: var(--space-6) var(--space-4);
}
.trust-band-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-5);
}
.trust-band-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-white);
}
.trust-band-item .icon {
    font-size: 1.5rem;
    color: var(--color-accent);
    flex-shrink: 0;
}
.trust-band-item strong {
    display: block;
    font-weight: 700;
    font-size: 0.9375rem;
    text-transform: uppercase;
}
.trust-band-item span {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 991.98px) {
    .trust-band-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .trust-band-inner { grid-template-columns: 1fr; }
}

/* Widget "Trouvez la remorque qu'il vous faut" — retiré à la demande du
   client (conflit visuel persistant avec le héro juste au-dessus). Masqué
   en CSS plutôt que supprimé du HTML : réversible, ne touche pas au bloc
   CMS natif (cms-block-trailer-filter-widget, zone interdite
   structurellement, cf. MIGRATION_NOTES.md). */
.cms-block-trailer-filter-widget {
    display: none !important;
}

/* Widget "Trouvez la remorque qu'il vous faut" (cms-element-trailer-filter-widget) */
.trailer-filter-widget-wrapper {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-5);
}
.trailer-filter-nav-wrapper .nav-tabs {
    border-bottom: 1px solid var(--color-border);
}
.trailer-filter-nav-wrapper .nav-tab {
    color: var(--color-text-secondary);
    border-bottom: 3px solid transparent;
}
.trailer-filter-nav-wrapper .nav-tab.active,
.trailer-filter-nav-wrapper a.nav-tab.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}
.trailer-filter-widget-select.custom-select,
select.trailer-filter-widget-select {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    background-color: var(--color-white);
}
.trailer-filter-widget-select.custom-select:focus {
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}
/* Bouton RECHERCHER du widget : bleu nuit (distinct des CTA orange du
   reste du site, décision explicite du brief pour ce bouton précis) */
.trailer-filter-widget-search .btn.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.trailer-filter-widget-search .btn.btn-primary:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
}

/* Grille de catégories (category-overview-wrapper.display--tiles) — le
   thème natif met .category-overview-item en display:flex ROW (icône à
   gauche, nom à droite, rangée compacte type liste) : ".type--icon" sur ce
   bloc n'a aucune règle CSS native associée, donc rien ne le transforme en
   vraie tuile. On force explicitement la disposition en colonne (icône en
   haut, nom centré dessous) pour obtenir des tuiles comme sur l'image de
   référence, sans changer le DOM. */
.category-overview-wrapper.display--tiles .category-overview-item {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    color: var(--color-text);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.category-overview-wrapper.display--tiles .category-overview-item:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
    color: var(--color-accent);
}
/* Catégories avec une vraie photo produit (scripts/inject-category-photos.js,
   marquée data-category-photo) : image pleine largeur en haut de la tuile */
.category-overview-wrapper.display--tiles .category-overview-icon:has(img[data-category-photo]) {
    width: 100%;
    height: 120px;
    margin: 0;
}
.category-overview-wrapper.display--tiles .category-overview-icon img[data-category-photo] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Repli icône SVG (catégories pas encore converties en photo) */
.category-overview-wrapper.display--tiles .category-overview-icon:not(:has(img[data-category-photo])) {
    width: 48px;
    height: 48px;
    margin: var(--space-4) auto 0;
    flex-shrink: 0;
}
.category-overview-wrapper.display--tiles .category-overview-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.category-overview-wrapper.display--tiles .category-overview-name {
    padding: var(--space-3);
    text-align: center;
}
.category-overview-wrapper.display--tiles .category-overview-name .icon {
    display: none;
}
.category-overview-name {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.8125rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Nombre de modèles (injecté par scripts/inject-category-counts.js) —
   emplacement décidé quand aucune vraie photo n'a pu être sourcée pour
   chaque catégorie (icônes conservées, cf. MIGRATION_NOTES.md) */
.category-overview-count {
    text-transform: none;
    font-weight: 400;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
}
.category-overview-wrapper.display--tiles .category-overview-item:hover .category-overview-count {
    color: var(--color-accent);
}

/* Bannières image (cms-element-image / image-cover) */
.cms-element-image .cms-image-container {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* Slider actus/catégories (category-slider) */
.category-slider-item-container .slider-content-wrapper {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.category-slider-image .category-slider-img {
    border-radius: 0;
}
.slider-text-title {
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text);
    font-size: 0.9375rem;
}
.slider-text-content {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}
.slider-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-accent);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
}
.slider-button:hover { color: var(--color-accent-dark); }

/* Newsletter (cms-block-form) */
.cms-element-form .card {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.form-content.newsletter .headline {
    color: var(--color-primary);
}

/* Bandeau marques (manufacturer-overview / brand-navigation) */
.manufacturer-overview .brand-navigation-underline {
    background: var(--color-accent) !important;
}
.cms-block-manufacturer-overview {
    background: var(--color-bg-alt);
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
}
.brand-navigation-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}
.brand-navigation-title-row .cms-element-title-paragraph { margin: 0; }

/* ==========================================================================
   22. Page catégorie — bandeau titre/photo, avantages, bloc conseil
   (contenu neuf, absent de la page catégorie native : les blocs cms-* de
   cette page ne contiennent pas ce type de bandeau côté Shopware, cf.
   MIGRATION_NOTES.md)
   ========================================================================== */
.category-banner {
    background: var(--color-primary);
    display: flex;
    align-items: center;
    gap: var(--space-6);
    overflow: hidden;
    border-radius: var(--radius-lg);
    margin: var(--space-5) 0;
}
.category-banner-text {
    flex: 1 1 50%;
    padding: var(--space-6);
    color: var(--color-white);
}
.category-banner-title {
    color: var(--color-white);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    margin: 0 0 var(--space-3);
}
.category-banner-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    max-width: 44ch;
    margin: 0;
}
.category-banner-photo {
    flex: 1 1 50%;
    align-self: stretch;
}
.category-banner-photo img {
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    display: block;
}
@media (max-width: 767.98px) {
    .category-banner { flex-direction: column; }
    .category-banner-photo img { min-height: 180px; }
}

.category-advantages {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin: var(--space-5) 0;
}
.category-advantage {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
}
.category-advantage .icon { color: var(--color-accent); font-size: 1.125rem; }
@media (max-width: 767.98px) {
    .category-advantages { grid-template-columns: repeat(2, 1fr); }
}

.advice-band {
    background: var(--color-primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    margin: var(--space-6) 0;
}
.advice-band-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.advice-band-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.advice-band-text strong {
    color: var(--color-white);
    text-transform: uppercase;
    font-size: 1rem;
}
.advice-band-text span {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.875rem;
}
.advice-band .btn-outline-secondary {
    border-color: var(--color-white);
    color: var(--color-white);
    flex-shrink: 0;
}
.advice-band .btn-outline-secondary:hover {
    background: var(--color-white);
    color: var(--color-primary);
}
@media (max-width: 575.98px) {
    .advice-band { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   23. Fiche produit — galerie, bloc d'achat (structure native Shopware,
   pas de changement DOM, restylage uniquement)
   ========================================================================== */
.gallery-slider-item {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-alt);
}
.gallery-slider-thumbnails-item,
.gallery-slider-thumbnails-item-content {
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--color-border);
    transition: border-color 0.2s ease;
}
.gallery-slider-thumbnails-item.is-active,
.gallery-slider-thumbnails-item:hover {
    border-color: var(--color-accent);
}
.product-detail-name {
    text-transform: uppercase;
}

/* Bloc prix (.product-detail-price-container / .price-background-wrapper —
   noms de classes réels confirmés sur la fiche produit, différents des
   suppositions initiales). Le natif fixe un fond bleu foncé
   (background-color:#0E3F6C) pensé pour du texte blanc ; on repasse sur
   fond clair, donc le texte doit explicitement redevenir foncé (!important
   pour être sûr qu'aucune règle native pensée pour l'ancien fond sombre
   ne rende le texte blanc illisible ici). */
.price-background-wrapper {
    background: var(--color-bg-alt) !important;
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}
.price-background-wrapper .price-title,
.price-background-wrapper .price-tax {
    color: var(--color-text-secondary) !important;
}
.price-background-wrapper .product-price {
    color: var(--color-text) !important;
}
.product-detail .product-price {
    font-size: 2.25rem;
}

/* Badge de statut (.product-detail-delivery-information) : ce bloc est un
   frère éloigné de .product-detail-media dans le DOM (pas un enfant), donc
   pas de positionnement en overlay sur la galerie sans déplacer le noeud
   (risque non justifié pour un seul pilote) — stylé en chip inline à sa
   place actuelle, à côté du prix. */
.product-detail-delivery-information {
    display: inline-block;
    background: var(--color-bg-alt);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    margin-top: var(--space-2);
}

/* CTA principal (.buy-widget .btn-buy, déjà orange via la règle
   "form.buy-widget .btn" section 4) : mise en avant pleine largeur */
.product-detail-form-container .btn-buy {
    font-size: 0.9375rem;
    padding: var(--space-3);
}

/* Bloc contact / demande de conseil (.product-detail-contact-information) —
   sert de second CTA (bleu nuit) à côté du bouton panier orange, comme sur
   l'image de référence ("DEMANDER UN DEVIS") */
.product-detail-contact-information .contact-information-wrapper {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-align: center;
}
.product-detail-contact-information .contact-text {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin-bottom: var(--space-2);
}
.product-detail-contact-information .contact-number a {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1.125rem;
}
.product-detail-contact-information .contact-button {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    text-transform: uppercase;
    font-weight: 700;
    border-radius: var(--radius-sm);
    width: 100%;
    margin-top: var(--space-2);
}
.product-detail-contact-information .contact-button:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
}
.product-detail-contact-information .contact-logo {
    display: none;
}

/* Garanties (bloc neuf, absent du DOM d'origine, ajouté à la main sur le
   pilote — cf. MIGRATION_NOTES.md) */
.product-detail-guarantees {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-4);
    flex-wrap: wrap;
}
.product-detail-guarantee {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
}
.product-detail-guarantee .icon { color: var(--color-success); }

/* ==========================================================================
   24. Fiche produit — informations détaillées (.anchor-link-wrapper)
   Le natif n'a PAS de vrai système d'onglets JS (show/hide) : c'est une
   nav d'ancres réelles (#technicalData, #equipment, #inquiry, #delivery,
   #financing, #tradeIn), chaque section restant présente dans le DOM.
   On la stylise en barre façon onglets (look proche de la référence) sans
   rien inventer ni ajouter de JS : :target permet même de surligner la
   section vers laquelle on vient de sauter, en CSS pur.
   ========================================================================== */
.detail-headline {
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-primary);
    font-size: 1.125rem;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-4);
}
.product-detail-description-text {
    color: var(--color-text);
    line-height: 1.6;
}
.anchor-link-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    margin: var(--space-6) 0 var(--space-5);
    padding-bottom: 0;
}
.anchor-link {
    padding: var(--space-3) var(--space-1);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    border-bottom: 3px solid transparent;
    margin-right: var(--space-4);
}
.anchor-link:hover {
    color: var(--color-accent);
}
:target .detail-headline {
    color: var(--color-accent);
}
.product-detail-properties-table {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.product-detail-properties-table.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--color-bg-alt);
}

/* ==========================================================================
   25. Header desktop — navbar "logo → menu → icônes" en 2 rangées propres
   (logo + icônes d'actions sur la rangée du haut, menu centré juste
   dessous). Une vraie fusion en une seule ligne via display:contents sur
   .header-right-col a été testée mais nécessite une vérification visuelle
   en navigateur indisponible dans cet environnement (pas d'outil d'aperçu) ;
   par prudence sur un changement qui s'applique instantanément aux ~3400
   pages du site (feuille de style unique), on garde cette variante 2
   rangées, structurellement nulle en risque (aucune classe/attribut
   déplacé), quitte à activer l'astuce une ligne plus tard une fois
   vérifiée dans un vrai navigateur.
   ========================================================================== */
.header-right-bottom {
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-3);
    padding-top: var(--space-2);
}
@media (min-width: 992px) {
    .header-right-bottom .main-navigation-menu { justify-content: center; }
}

/* ==========================================================================
   26. Footer — polish additionnel (structure/colonnes inchangées, cf.
   section 9) : plus d'air, séparation nette entre bloc contact et colonnes
   de liens, réseaux sociaux alignés à la charte.
   ========================================================================== */
.footer-main { padding-bottom: var(--space-4); }
.social-items-list {
    display: flex;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}
.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-white) !important;
    font-size: 1rem;
}
.social-link:hover {
    background: var(--color-accent);
    color: var(--color-white) !important;
}

/* ==========================================================================
   27. Widget social flottant (.flix-smb) — bascule sur Font Awesome (déjà
   chargé site-wide) pour disposer de l'icône TikTok, absente de l'ancienne
   police d'icônes custom du thème. Couleur de fond harmonisée à la charte
   via scripts/rebrand-trailium.js (patch de l'inline <style> par page,
   #0E3F6C -> var(--color-primary), pas de !important nécessaire).
   ========================================================================== */
.flix-smb .fab,
.flix-smb .fas {
    font-size: 0.85rem;
}
.flix-smb__link:hover {
    background: var(--color-accent);
}