/* MCB — footer (chargé sur TOUTES les pages, cf. head.tpl) — design_handoff_home_prestashop/README.md section 9.
   Restyle du footer existant (_partials/footer-1.tpl, hooks inchangés) sur fond graphite. */

.footer-container.footer-1 {
    background: var(--mcb-graphite) !important;
    background-image: none !important;
    padding-bottom: 0;
}

.footer-container.footer-1 .tvfooter-logo-link-wrapper {
    width: 100%;
    max-width: var(--mcb-content-max-width);
    padding: 60px var(--mcb-content-padding) 0;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 40px;
}

/* Éléments statiques de footer-1.tpl absents de la maquette (lien "Haut de page", blocs
   displayFooter/displayCustomsocialblock aujourd'hui vides) : masqués pour ne pas créer de
   ligne de grille fantôme sous la colonne 1. Hooks toujours appelés, juste non affichés. */
.footer-container.footer-1 .tvbottom-to-top {
    display: none;
}

/* Neutralise la grille Bootstrap (row/col-xl-*) : les 4 hooks de ce conteneur
   deviennent des enfants directs de la grille CSS ci-dessus. */
.footer-container.footer-1 .tvfooter-storelogo-imformation.row {
    display: contents;
}

.footer-container.footer-1 .tvfooter-storelogo-weapper,
.footer-container.footer-1 .tvfooter-category-block,
.footer-container.footer-1 .tvfooter-account-link,
.footer-container.footer-1 #block_myaccount_infos {
    min-width: 0;
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
}

/* Colonne 1 — logo */

/* Reset du thème vendeur (custom.css) : `.tvfooter-storelogo-inner { border-bottom:
   1px solid #eee; text-align: center }` non scopé par layout, qui centrait l'accroche
   et ajoutait un filet visible même sur fond graphite. */
.footer-container.footer-1 .tvfooter-storelogo-inner {
    border-bottom: 0;
    text-align: left;
}

/* `@media(min-width:1631px) img.tv-img-responsive { object-fit: none }` (custom.css) —
   règle générique du thème vendeur pensée pour d'autres images (sliders), mais qui
   matche aussi ce logo (même classe utilitaire) : au-delà de 1631px l'image s'affichait
   à sa taille intrinsèque (166×57) et débordait/se faisait rogner dans sa boîte
   (110×38), coupant le texte "MCB" en "MC". */
.footer-container.footer-1 .tvfooter-img-block img {
    height: 38px;
    width: auto;
    object-fit: contain;
}

.footer-container.footer-1 .tvfooter-logo-short-title,
.footer-container.footer-1 .tvfooter-logo-desc {
    font-family: var(--mcb-font-body);
    font-size: 13.5px;
    color: var(--mcb-text-medium);
    line-height: 1.5;
    margin: 14px 0 0;
    max-width: none;
    text-align: left;
}

/* "1er spécialiste..." (config TVCMSFOOTERLOGO_DESCRIPTION) : sans marge sur le sup, le
   texte qui suit colle visuellement à "er" malgré le   présent dans la valeur stockée
   en base (même symptôme et même correctif que .mcb-utility-bar__claim sup en header). */
.footer-container.footer-1 .tvfooter-logo-desc sup {
    margin-right: 0.5em;
    /* theme.css met `sup { right: -5px }` en global (décalage pensé pour un autre usage,
       ex. prix) : ça pousse "er" à 5px de "1". Neutralisé ici seulement, pas touché en
       global pour ne pas affecter les autres sup du site. */
    right: 0;
}

/* Colonnes de liens (Catégories / Notre entreprise / Votre compte) */

.footer-container.footer-1 .tvfooter-title-wrapper {
    margin-bottom: 14px;
    cursor: default;
}

.footer-container.footer-1 .tvfooter-title {
    font-family: var(--mcb-font-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mcb-white);
}

/* Sur desktop, les 3 colonnes de liens restent toujours dépliées (pas d'accordéon utile
   quand il y a la place). Sur mobile (<768px), on restaure l'accordéon natif du thème
   (chevron + Bootstrap .collapse/.show, déjà câblé dans le markup et son JS) plutôt que de
   forcer un display permanent — sinon les 3 colonnes s'empilent toutes dépliées d'un coup,
   ce qui allonge beaucoup le scroll. */
@media (min-width: 768px) {
    .footer-container.footer-1 .tvfooter-toggle-icon-wrapper {
        display: none;
    }

    .footer-container.footer-1 #footer_sub_menu_tvfooter_category,
    .footer-container.footer-1 #footer_sub_menu_link,
    .footer-container.footer-1 #footer_sub_menu_myaccount {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        list-style: none;
        margin: 0;
        padding: 0;
        height: auto;
    }
}

@media (max-width: 767px) {
    .footer-container.footer-1 .tvfooter-toggle-icon-wrapper {
        color: var(--mcb-white);
    }

    .footer-container.footer-1 #footer_sub_menu_tvfooter_category.in,
    .footer-container.footer-1 #footer_sub_menu_link.in,
    .footer-container.footer-1 #footer_sub_menu_myaccount.in {
        display: flex;
        flex-direction: column;
        gap: 10px;
        list-style: none;
        margin: 10px 0 0;
        padding: 0;
    }
}

.footer-container.footer-1 #footer_sub_menu_tvfooter_category li i.material-icons {
    display: none;
}

.footer-container.footer-1 #footer_sub_menu_tvfooter_category a,
.footer-container.footer-1 #footer_sub_menu_link a,
.footer-container.footer-1 #footer_sub_menu_myaccount a {
    font-family: var(--mcb-font-body);
    font-size: 13.5px;
    color: var(--mcb-text-light);
    text-decoration: none;
}

.footer-container.footer-1 #footer_sub_menu_tvfooter_category a:hover,
.footer-container.footer-1 #footer_sub_menu_link a:hover,
.footer-container.footer-1 #footer_sub_menu_myaccount a:hover {
    color: var(--mcb-orange-light);
}

/* Bandeau paiements / réseaux + bandeau légal */

/* Sélecteurs préfixés par .footer-container.footer-1 : le thème vendeur définit ces mêmes
   classes (theme_custom_1_1.css, custom.css, all_theme_custom_1_1.css — display:none, fond
   rouge #D32F2F de classe utilitaire, etc.) et charge certains de ses fichiers APRÈS mcb-footer.css ;
   une spécificité à 2 classes est nécessaire pour gagner la cascade quel que soit l'ordre de charge. */

.footer-container.footer-1 .tvfooter-copy-payment-icon-wrapper {
    display: block;
    background: var(--mcb-graphite);
    border-top: 0;
    padding: 0;
}

.footer-container.footer-1 .tvfooter-copy-payment-icon-content {
    width: 100%;
    max-width: var(--mcb-content-max-width);
    padding: 0 var(--mcb-content-padding);
    margin: 0 auto;
    box-sizing: border-box;
}

.footer-container.footer-1 .tvfooter-copy-payment-icon-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-top: 1px solid var(--mcb-border-dark);
    padding: 20px 0;
    text-align: left;
}

.footer-container.footer-1 .tvfooter-payment-icon-img-block {
    order: 1;
    flex: none;
    width: auto;
    background: none;
}

.mcb-footer-payments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mcb-footer-payments__pill {
    display: inline-block;
    border: 1px solid var(--mcb-border-dark);
    padding: 7px 11px;
    font-family: var(--mcb-font-heading);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--mcb-text-medium);
}

.footer-container.footer-1 .block-social.tvcmsfooter-social-icon {
    order: 2;
    flex: none;
    width: auto;
    margin-left: auto;
}

/* `#footer_sub_menu_social_icon { display:block }` (custom.css, @media min-width:992px,
   même règle d'accordéon mobile que les 3 colonnes de liens) est un sélecteur ID —
   plus spécifique que n'importe quelle règle à base de classes ci-dessous, quel que
   soit l'ordre de chargement. On la neutralise en ciblant l'ID directement. */
.footer-container.footer-1 #footer_sub_menu_social_icon.tvfooter-social-icon-wrapper {
    display: flex;
    overflow: visible;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Maquette (design_handoff_home_prestashop/README.md section 9) : liens texte simples
   "LinkedIn" / "YouTube" dans le bandeau paiements, pas d'icônes — le sprite/SVG du
   thème vendeur est neutralisé au profit du texte du lien lui-même. Le thème vendeur
   fixe li/a à une taille d'icône (30-40px, position:relative) : sans le passer en
   `auto`, le texte déborde de cette boîte et chevauche l'élément suivant malgré le
   gap du flex (le gap se calcule sur la largeur déclarée, pas sur le débordement). */
.footer-container.footer-1 .tvfooter-social-icon-wrapper li {
    position: static;
    width: auto;
    height: auto;
    display: block;
}

.footer-container.footer-1 .tvfooter-social-icon-wrapper li a {
    display: block;
    width: auto;
    height: auto;
    font-family: var(--mcb-font-body);
    font-size: 13.5px;
    color: var(--mcb-text-light);
    text-decoration: none;
    background: none;
}

.footer-container.footer-1 .tvfooter-social-icon-wrapper li a:hover {
    color: var(--mcb-orange-light);
}

.footer-container.footer-1 .tvfooter-social-icon-wrapper li.linkedin svg,
.footer-container.footer-1 .tvfooter-social-icon-wrapper li .facebook-icon,
.footer-container.footer-1 .tvfooter-social-icon-wrapper li .twitter-icon,
.footer-container.footer-1 .tvfooter-social-icon-wrapper li .youtube-icon,
.footer-container.footer-1 .tvfooter-social-icon-wrapper li .rss-icon {
    display: none;
}

.footer-container.footer-1 .tvcopylink {
    order: 3;
    flex-basis: 100%;
    width: 100%;
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 24px;
    border-top: 1px solid var(--mcb-border-dark);
    padding: 18px 0 28px;
    margin: 0;
    text-align: left;
    background: none;
}

.footer-container.footer-1 .tvcopylink p {
    display: block;
    font-family: var(--mcb-font-body);
    font-size: 12.5px;
    color: var(--mcb-gray-500);
    line-height: 1.6;
    margin: 0;
    text-transform: none;
}

/* Trouvé en vérifiant le rendu mobile final : flex:none empêche les pastilles de paiement
   de s'enrouler (leur .mcb-footer-payments a bien flex-wrap, mais le bloc parent refuse de
   rétrécir en dessous de son contenu). Passage en pleine largeur pour laisser le wrap agir. */
@media (max-width: 767px) {
    .footer-container.footer-1 .tvfooter-payment-icon-img-block,
    .footer-container.footer-1 .block-social.tvcmsfooter-social-icon {
        flex: 1 1 100%;
        min-width: 0;
        margin-left: 0;
    }

    .footer-container.footer-1 .block-social.tvcmsfooter-social-icon {
        margin-top: 14px;
    }
}