/* Secal Regalia® — plg_system_secalscripts — feuille 07 : entete-pied-menus
   Chargée sur : toutes les pages. */

/* ============================================================================
   PANIER : DEUX AFFICHAGES SELON LA RÉSOLUTION
   ----------------------------------------------------------------------------
   Deux positions coexistent dans le template :
       mini-cart          → dans l'en-tête (#bannerrowcolumn1), pour ordinateur
       mini-cart-mobile   → dans #wrapper1, sous l'en-tête, pour petits écrans

   Le réglage de visibilité de Template Creator CK ne produit aucune règle :
   ni classe de masquage dans le HTML, ni style appliqué. Le basculement est
   donc fait ici, à 950 px.
   ============================================================================ */

/* Grand écran : le panier mobile et son wrapper disparaissent entièrement,
   pour ne pas laisser de bande vide sous l'en-tête. */
@media (min-width: 950px) {
    #wrapper1 {
        display: none !important;
    }
}

/* Petit écran : le wrapper doit être VISIBLE.
   Template Creator CK produit deux règles qui le masquent sur toutes les
   résolutions — "min-width: 1025px" et "max-width: 1024px" — alors que son
   réglage annonce l'inverse. Le !important reprend la main sur les deux. */
@media (max-width: 949px) {
    #wrapper1 {
        display: block !important;
    }
}

/* Petit écran : c'est le panier de l'en-tête qui s'efface. */
@media (max-width: 949px) {
    #bannerrowcolumn1 [data-position="mini-cart"],
    #bannerrowcolumn1 #block2 {
        display: none;
    }
}

/* ============================================================================
   EN-TÊTE MOBILE — RÉPARTITION LOGO / MENU
   ----------------------------------------------------------------------------
   Les deux colonnes sont déjà sur la même ligne (#bannerrow .inner est en
   flex). Le problème n'est pas l'alignement mais la largeur : le logo, réglé
   en width="100%" dans le template, ne recevait que 121 px sur 485.

   Le logo prend désormais la place disponible, le menu se réduit à son
   contenu, et les deux restent centrés verticalement.
   ============================================================================ */
@media (max-width: 950px) {
    #bannerrow .inner {
        align-items: center;
        gap: 12px;
    }

    #wrapper_headercolumn1 {
        flex: 1 1 auto;
        min-width: 0;
    }

    #wrapper_headercolumn2 {
        flex: 0 0 auto;
        width: auto;
    }

    #bannerlogo .tck-logo-img {
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 56px;   /* à ajuster selon le rendu souhaité */
    }
}

/* ============================================================================
   PIED DE PAGE — LIEN VERS LES CGV
   ----------------------------------------------------------------------------
   Même bleu que les boutons HikaShop (.hikabtn), en plus discret : le pied de
   page est sombre, un bouton plein y attirerait plus l'œil que le contenu.
   ============================================================================ */
#wrapper_footer a.secal-cgv-lien {
    display: inline-block;
    margin: 4px 6px;   /* espace entre les boutons, et retour à la ligne propre */
    padding: 8px 20px;
    border: 1px solid #2DA0CE;
    border-radius: 3px;
    background: transparent;
    color: #2DA0CE !important;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

#wrapper_footer a.secal-cgv-lien:hover,
#wrapper_footer a.secal-cgv-lien:focus {
    background: #2DA0CE;
    color: #fff !important;
    text-decoration: none;
}

/* Colonnes du pied de page centrées verticalement les unes par rapport aux
   autres : le template ne pose "valign-center" que sur la première colonne,
   les autres restent alignées en haut. */
#wrapper_footer #footer > .inner {
    display: flex;
    align-items: center;
}

#wrapper_footer #footer > .inner > .flexiblecolumn {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 768px) {
    #wrapper_footer #footer > .inner {
        flex-direction: column;
    }
}

/* ============================================================================
   BOUTON « RETOUR EN HAUT » (Scroll To CK)
   ----------------------------------------------------------------------------
   La flèche est une image de fond (arrow-4.svg) chargée par le plugin : sa
   couleur ne peut pas être modifiée en CSS. On colore donc le cercle qui
   l'entoure, ce qui suffit à rattacher le bouton à la charte du site.
   ============================================================================ */
.scrollToTop {
    background-color: #fff !important;
    border: 2px solid #2DA0CE !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15) !important;
    transition: background-color .15s ease, border-color .15s ease;
}

.scrollToTop:hover,
.scrollToTop:focus {
    background-color: #2DA0CE !important;
    border-color: #2DA0CE !important;
}

/* ============================================================================
   BARRE DU MENU MOBILE (Mobile Menu CK)
   ----------------------------------------------------------------------------
   Le plugin écrit ses marges SANS UNITÉ : style="margin-top:25" au lieu de
   "25px". Une longueur sans unité est invalide en CSS et purement ignorée par
   le navigateur — c'est pourquoi les champs de marge du module restent sans
   effet, quelle que soit la valeur saisie.

   Les marges sont donc reposées ici. Le !important est nécessaire : les
   valeurs du plugin sont en style direct sur la balise <img>.
   ============================================================================ */
#mobilemenuck-1-mobile-bar .mobilemenuck-logo img {
    /* Aucune marge verticale : la barre a une hauteur fixe, et toute marge
       haute ou basse pousse le logo hors du cadre, qui le tronque.
       Le centrage vertical est assuré par le flex de la barre, ci-dessous. */
    margin: 0 0 0 14px !important;
    max-width: 170px;
    max-height: 80%;
    width: auto;
    height: auto;
    display: block;
}

/* Barre alignée verticalement, logo à gauche et bouton à droite */
#mobilemenuck-1-mobile-bar {
    display: flex;
    align-items: center;
    overflow: hidden;
    /* Barre blanche plutôt que grise : le logo blanc du pied de page a un
       fond opaque, qui formait un carré visible sur le gris. Avec le logo
       NOIR sur fond blanc, la question ne se pose plus.
       Pense à sélectionner logo_secal_regalia.png dans le module. */
    background: #fff !important;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
}

/* Le titre et le bouton portent leur propre fond gris foncé, hérité du style
   par défaut du plugin. Ils sont remis en transparent pour que la barre soit
   blanche d'un bout à l'autre. */
#mobilemenuck-1-mobile-bar .mobilemenuck-bar-title {
    background: transparent !important;
    color: rgba(0, 0, 0, .8) !important;
}

/* Bouton hamburger : fond transparent, trait noir sur la barre blanche */
#mobilemenuck-1-mobile-bar .mobilemenuck-bar-button {
    background: transparent !important;
    color: rgba(0, 0, 0, .8) !important;
}

#mobilemenuck-1-mobile-bar .mobilemenuck-bar-button span,
#mobilemenuck-1-mobile-bar .mobilemenuck-bar-button i,
#mobilemenuck-1-mobile-bar .mobilemenuck-bar-button svg {
    color: inherit;
    fill: currentColor;
}

#mobilemenuck-1-mobile-bar .mobilemenuck-logo {
    float: none !important;
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

#mobilemenuck-1-mobile-bar .mobilemenuck-bar-title {
    flex: 1 1 auto;
}

#mobilemenuck-1-mobile-bar .mobilemenuck-bar-button {
    flex: 0 0 auto;
}