/* =========================================================
   SECAL REGALIA — CSS personnalisé
   Joomla 6.1.3 / HikaShop 6.5.2 / Template Creator CK
   ========================================================= */

/* ---------- Panier vide ---------- */
.cart-empty-align {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cart-empty-align img {
    flex-shrink: 0;
    vertical-align: middle;
}

/* ---------- Inscription : e-mail sur deux colonnes ---------- */
.hikashop_registration_email_line,
.hikashop_registration_email_confirm_line {
    display: inline-block !important;
    float: left !important;
    clear: none !important;
    vertical-align: top !important;
    width: 48% !important;
    box-sizing: border-box !important;
}

.hikashop_registration_email_line {
    margin-right: 2% !important;
}

/* Empêche l'élément suivant de continuer à flotter au mauvais endroit */
.hikashop_registration_email_confirm_line::after {
    content: "";
    display: table;
    clear: both;
}

/* ---------- Encadrés e-mail / adresse ---------- */
.hikashop_encadre_email,
.hikashop_encadre_adresse {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    background-color: #fafafa;
    margin-bottom: 15px;
}

.hikashop_encadre_email::after,
.hikashop_encadre_adresse::after {
    content: "";
    display: table;
    clear: both;
}

.hika_registration_address legend {
    font-size: 20px;
    font-weight: bold;
}

.hikashop_encadre_email legend {
    font-size: 20px;
    font-weight: bold;
}

/* ---------- Adresses côte à côte ---------- */
.hikashop_addr_col1 {
    display: flex;
    flex-direction: column;
}

.hikashop_addresses_side_by_side {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}

.hikashop_addr_col1,
.hikashop_addr_col2 {
    flex: 1 1 45% !important;
    min-width: 280px !important;
}

.hikashop_addresses_side_by_side.hikashop_same_address_active {
    justify-content: center !important;
}

.hikashop_addresses_side_by_side.hikashop_same_address_active .hikashop_addr_col1 {
    flex: 0 1 600px !important;
    max-width: 600px !important;
}

@media (max-width: 768px) {
    .hikashop_addr_col1,
    .hikashop_addr_col2,
    .hikashop_addresses_side_by_side.hikashop_same_address_active .hikashop_addr_col1 {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}

.hikashop_addresses_side_by_side.hikashop_same_address_active .hikashop_addr_col2 {
    display: none !important;
}

.hikashop_registration_same_address_line {
    margin-bottom: 15px;
}

.hikashop_registration_required_info_line {
    margin-bottom: 15px;
}

#hikashop_register_form_button {
    display: none !important;
}

/* ---------- Boutons du tunnel de commande ---------- */
/* Cache le bloc gauche s'il est vide */
.buttons_left:empty {
    display: none;
}

.hikashop_checkout_buttons {
    display: block;
    text-align: center;
}

.buttons_right {
    float: none !important;
    display: inline-block;
}

#hikabtn_checkout_next {
    padding: 14px 40px;
    font-size: 18px;
}

#hikabtn_checkout_previous {
    display: inline-block;
    margin-right: 10px;
    padding: 14px 40px;
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    text-align: center;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

#hikabtn_checkout_previous:hover {
    background-color: #5a6268 !important;
    border-color: #5a6268 !important;
}

#hikabtn_checkout_previous,
#hikabtn_checkout_previous:hover {
    font-weight: normal !important;
}

/* Flèches en échappement CSS (\2192 = →, \2190 = ←) plutôt qu'en caractères
   littéraux : le rendu ne dépend plus de l'encodage avec lequel la feuille est
   servie. */
#hikabtn_checkout_next::after {
    content: " \2192";
}

#hikabtn_checkout_previous::before {
    content: "\2190 ";
}

.hikabtn {
    background-color: #2DA0CE !important;
    border-color: #2DA0CE !important;
}

.hikabtn:hover {
    background-color: #2589AE !important;
    border-color: #2589AE !important;
}

/* Texte blanc du bouton « Changer mes informations » (balise <a>) */
.hikabtn_checkout_guest_logout,
.hikabtn_checkout_guest_logout:link,
.hikabtn_checkout_guest_logout:visited,
.hikabtn_checkout_guest_logout:hover,
.hikabtn_checkout_guest_logout:focus {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ---------- Carte Leaflet / superposition en-tête ---------- */
.leaflet-control-zoom,
.leaflet-top,
.leaflet-control-container {
    z-index: 400 !important;
}

#wrapper_header {
    z-index: 1000 !important;
}

/* ---------- Barre d'étapes (wizard) ---------- */
.hikashop_wizardbar ul {
    display: flex;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

.hikashop_wizardbar ul li {
    flex: 1;
    text-align: center;
}

@media (max-width: 768px) {
    .hikashop_wizardbar ul {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        padding: 10px;
    }

    .hikashop_wizardbar ul li {
        flex: 1 1 45%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-height: 60px;
        padding: 8px 4px;
        position: static !important;
    }

    .hikashop_wizardbar .hkbadge {
        position: static !important;
        margin-bottom: 4px;
    }

    .hikashop_wizardbar .hikashop_checkout_step_name {
        display: block;
        position: static !important;
        font-size: 12px;
        white-space: normal;
        line-height: 1.3;
    }

    .hikashop_wizardbar .hikashop_chevron {
        display: none;
    }
}

/* ---------- Case « même adresse » et infos obligatoires ---------- */
.hikashop_registration_same_address_line,
.hikashop_registration_required_info_line {
    display: inline-block !important;
    width: 48% !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

.hikashop_registration_same_address_line {
    margin-right: 2% !important;
}

.hikashop_registration_same_address_line .hkc-sm-4,
.hikashop_registration_required_info_line .hkc-sm-4 {
    display: none !important;
}

.hikashop_registration_same_address_line .hkc-sm-8,
.hikashop_registration_required_info_line .hkc-sm-8 {
    width: 100% !important;
}

.hikashop_same_address_clone_wrapper {
    margin-top: 15px;
    margin-bottom: 15px;
}

.hikashop_registration_shipping_address_title legend {
    font-size: 20px;
    font-weight: bold;
}

.hikashop_registration_required_info_line .hkc-sm-8 {
    font-size: 16px;
    color: #d9534f;
    font-weight: bold;
}

.hikashop_registration_same_address_line label {
    font-size: 16px;
    font-weight: bold;
}

.hikashop_registration_same_address_line input[type="checkbox"] {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.hikashop_same_address_clone_wrapper label {
    font-size: 16px;
    font-weight: bold;
}

.hikashop_same_address_clone_wrapper input[type="checkbox"] {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

/* ---------- Conditions générales ---------- */
#hikashop_checkout_terms_checkbox_4_2 {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

label[for="hikashop_checkout_terms_checkbox_4_2"] {
    font-size: 16px;
    font-weight: bold;
}

/* ---------- Étape 3 : encadrés Livraison et Paiement ---------- */
#hikashop_checkout_shipping_3_0,
#hikashop_checkout_payment_3_2 {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    background-color: #fafafa;
    height: 100%;
    box-sizing: border-box;
}

#hikashop_checkout_shipping_3_0 legend,
#hikashop_checkout_payment_3_2 legend {
    font-size: 20px;
    font-weight: bold;
}

/* Logos des transporteurs et des moyens de paiement alignés à droite.
   Le « clear » empêche la description de s'enrouler autour du logo. */
.hikashop_checkout_shipping_images,
.hikashop_checkout_payment_images {
    float: right;
    margin-left: 12px;
}

.hikashop_checkout_shipping_images img,
.hikashop_checkout_payment_images img {
    max-height: 40px;
    width: auto;
    vertical-align: middle;
}

/* Tout ce qui suit le logo flottant doit reprendre la pleine largeur :
   description, carte des points relais, listes et champs. Sans "clear", ces
   éléments s'insèrent dans la zone laissée libre à côté du logo — la carte
   perdait 128 px de large, et le sélecteur Mondial Relay passait dessous. */
.hikashop_checkout_shipping_description,
.hikashop_checkout_payment_description,
.hikashop_checkout_shipping_images + *,
.mondialrelay_div_map,
.leaflet-container,
.hikashop_colissimo_list,
.hikashop_nom_retrait_proxy_wrapper,
.hikabtn_checkout_shipping_submit {
    clear: both;
}

/* Les conteneurs de carte et de sélection prennent toute la largeur
   disponible, sans dépasser celle de la colonne. */
.mondialrelay_div_map,
.leaflet-container,
.hikashop_colissimo_list,
select[id*="_relay"] {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}

/* Sur mobile, le logo repasse dans le flux : flottant, il chevaucherait
   les libellés de transport les plus longs. */
@media (max-width: 600px) {
    .hikashop_checkout_shipping_images,
    .hikashop_checkout_payment_images {
        float: none;
        display: block;
        margin: 8px 0 0;
    }
}

/* ---------- Étape 4 : récapitulatif ---------- */
#hikashop_checkout_cart_4_0,
#hikashop_checkout_address_4_2,
#hikashop_checkout_shipping_4_4,
#hikashop_checkout_payment_4_6,
#hikashop_checkout_terms_4_8 {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    background-color: #fafafa;
    box-sizing: border-box;
}

#hikashop_checkout_shipping_4_4 legend,
#hikashop_checkout_payment_4_6 legend,
#hikashop_checkout_address_4_2 legend,
#hikashop_checkout_terms_4_8 legend,
#hikashop_checkout_cart_4_0 legend {
    font-size: 20px;
    font-weight: bold;
}

#hikashop_checkout_terms_4_8 {
    padding: 20px;
    margin-top: 10px;
}

#hikashop_checkout_terms_4_8 label {
    font-size: 16px;
    font-weight: bold;
}

#hikashop_step4_layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.hikashop_step4_col_left {
    flex: 1 1 40%;
}

.hikashop_step4_col_right {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

@media (max-width: 768px) {
    #hikashop_step4_layout {
        flex-direction: column;
    }

    .hikashop_step4_col_left,
    .hikashop_step4_col_right {
        width: 100%;
        flex: 1 1 100%;
    }

    #hikashop_checkout_cart_4_0 {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #hikashop_checkout_cart_4_0 table {
        min-width: 500px;
    }

    #hikashop_checkout_cart_4_0 table td,
    #hikashop_checkout_cart_4_0 table th {
        font-size: 13px;
        padding: 6px 8px;
    }
}

/* ---------- Tableau du récapitulatif : lignes alternées ---------- */
#hikashop_checkout_cart_4_0 table tbody tr:nth-child(odd) {
    background-color: #ffffff !important;
}

#hikashop_checkout_cart_4_0 table tbody tr:nth-child(even) {
    background-color: #6C757D !important;
    color: #ffffff !important;
}

#hikashop_checkout_cart_4_0 table.table-hover tbody tr:nth-child(even):hover > td,
#hikashop_checkout_cart_4_0 table.table-hover tbody tr:nth-child(even):hover > th {
    background-color: #6C757D !important;
}

/* ---------- Panier : quantités et alignement ---------- */
.hikashop_checkout_cart table td {
    vertical-align: middle;
}

.hikashop_product_quantity_input_div_default_main {
    display: flex !important;
    align-items: center;
    gap: 4px;
}

.hikashop_product_quantity_field {
    width: 50px;
    text-align: center;
}

/* Boutons + et − : cibles plus compactes que le style de bouton par défaut,
   qui les rendait aussi larges que le bouton d'ajout au panier. */
.hikashop_product_quantity_field_change {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 15px;
    line-height: 1;
    border-radius: 3px;
}

/* Symboles + et − en blanc (balises <a>, d'où les pseudo-classes) */
.hikashop_product_quantity_field_change,
.hikashop_product_quantity_field_change:link,
.hikashop_product_quantity_field_change:visited,
.hikashop_product_quantity_field_change:hover,
.hikashop_product_quantity_field_change:focus {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ---------- Listing produits ---------- */
.hikashop_listing_img_title {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hikashop_listing_img_title form.hikashop_aligned_btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.hikashop_quantity_form {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* ---------- Référence dans les listes de catégorie ----------
   La référence est le repère de commande de tes clients : elle passe devant
   le nom du produit en taille comme en graisse. Le lien qu'elle contient
   hérite de la couleur du texte, pour ne pas ressembler à un lien de plus. */
.hikashop_product_code_list {
    display: block;
    margin-bottom: 2px;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
}

.hikashop_product_code_list a,
.hikashop_product_code_list a:hover,
.hikashop_product_code_list a:focus {
    color: inherit;
    text-decoration: none;
}

.hikashop_product_code_list a:hover,
.hikashop_product_code_list a:focus {
    text-decoration: underline;
}

/* Le nom passe en second plan, comme sur la fiche produit */
.hikashop_product_name_list {
    font-size: .92rem;
    font-weight: 400;
    color: rgba(0, 0, 0, .6);
    line-height: 1.35;
}

.hikashop_subcontainer {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    background-color: #fafafa;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.hikashop_cart_empty_footer {
    visibility: hidden;
}

/* Masque le titre « Récapitulatif de votre commande » à l'étape 1 uniquement.
   L'étape 4 (#hikashop_checkout_cart_4_0) conserve le sien. */
#hikashop_checkout_cart_1_0 > legend {
    display: none;
}

/* Mention « HT » sur le libellé de la ligne Livraison du récapitulatif.
   Ce texte est écrit en dur par HikaShop et ne passe pas par les fichiers de
   langue : ni HIKASHOP_CHECKOUT_SHIPPING ni LIVRAISON ne l'atteignent. */
#hikashop_checkout_cart_shipping_title::after {
    content: " HT";
}

/* ---------- Largeurs de conteneurs ---------- */
#wrapper,
#wrapper > .inner,
#maincontent {
    width: 100%;
}

/* =========================================================
   STICKY FOOTER — bloc corrigé
   Corrections apportées :
   - suppression de « height: 100% » sur html/body (conflit avec
     min-height sur les pages longues → scintillement du footer)
   - 100dvh remplacé par 100svh (dvh se recalcule quand la barre
     d'adresse mobile se rétracte, d'où le tremblement au scroll)
   - suppression de l'accolade orpheline après #maincontent
   - règles « margin: 0 » et « #wrapper_footer » regroupées ici
   ========================================================= */
html {
    margin: 0;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;   /* repli pour les navigateurs anciens */
    min-height: 100svh;  /* stable : ne bouge pas avec la barre d'adresse */
}

#wrapper {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

#wrapper > .inner {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

#maincontent {
    flex: 1 0 auto;
}

#wrapper_footer {
    flex-shrink: 0;
}

/* ---------- Colissimo / points relais ---------- */
.hikashop_colissimo_list {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.hikashop_nom_retrait_proxy_wrapper {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
}

.hikashop_nom_retrait_proxy_wrapper label {
    margin-bottom: 5px;
}

.hkc-md-12 label[for$="_nom_retrait"] {
    display: block;
    margin-bottom: 5px;
}

.hikabtn_checkout_shipping_submit {
    display: block;
    margin: 15px auto 0;
}

/* ---------- Page Contact ---------------------------------------------------
   Le composant Contacts affiche le nom du contact en h2 suivi d'un bloc de
   coordonnées resté vide (elles figurent déjà dans le pied de page), et une
   légende « Envoyer un e-mail » écrite en dur dans le gabarit. */
.com-contact__container {
    display: none;
}

.com-contact__form legend {
    display: none;
}

/* Texte blanc du bouton « Valider le relais » (auparavant posé en inline par le JS) */
.hikabtn_checkout_shipping_submit,
.hikabtn_checkout_shipping_submit:link,
.hikabtn_checkout_shipping_submit:visited,
.hikabtn_checkout_shipping_submit:hover,
.hikabtn_checkout_shipping_submit:focus {
    color: #ffffff !important;
}

/* ============================================================================
   FICHE PRODUIT
   ----------------------------------------------------------------------------
   Regroupe la colonne de droite (prix, quantité, bouton) en un bloc unique au
   lieu d'éléments dispersés, encadre l'image et ramène la description à une
   largeur de lecture confortable.
   ============================================================================ */

#hikashop_product_top_part,
#hikashop_product_top_part + .hk-row-fluid,
#hikashop_product_bottom_part {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Titre ---------- */
/* Espace entre la colonne image et la colonne achat.
   Les deux colonnes étant encadrées, leurs bordures se touchaient. */
#hikashop_product_top_part + .hk-row-fluid {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: flex-start;
}

#hikashop_product_top_part + .hk-row-fluid > #hikashop_product_left_part,
#hikashop_product_top_part + .hk-row-fluid > #hikashop_product_right_part {
    flex: 1 1 320px;
    width: auto;
    max-width: none;
    margin: 0;
}

#hikashop_product_top_part h1 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    text-align: center;
}

/* La référence domine le titre : c'est par elle que les clubs commandent.
   Le nom du produit passe en second, plus léger et en gris. */
.hikashop_product_code_main {
    font-weight: 700;
    color: rgba(0, 0, 0, .9);
}

.hikashop_product_name_main {
    font-weight: 400;
    color: rgba(0, 0, 0, .6);
}

.hikashop_product_code_separator {
    color: rgba(0, 0, 0, .3);
}

/* Sur les variantes, HikaShop ajoute la caractéristique au nom :
   « Fanion en tissu personnalisé: 20 x 28 cm ». L'information fait doublon
   avec la référence (« Fanion 20x28 ») et avec le sélecteur de taille situé
   juste en dessous. Masquée dans le titre UNIQUEMENT — elle reste affichée
   dans le panier et sur la commande, où elle distingue les lignes. */
#hikashop_product_top_part .hikashop_product_variant_subname {
    display: none;
}

/* ---------- Image ----------
   Un seul cadre, posé sur la colonne entière : encadrer aussi les conteneurs
   internes de HikaShop produisait des cadres imbriqués et des vignettes qui
   débordaient sur l'image principale. */
#hikashop_product_left_part {
    padding: 20px;
    background: rgba(0, 0, 0, .025);
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 4px;
    box-sizing: border-box;
}

#hikashop_product_left_part img {
    max-width: 100%;
    height: auto;
}

/* Vignettes : en ligne, et bornées en taille.
   Les images sont servies en 220 px par HikaShop ; sans contrainte, elles
   s'empilent et débordent sur l'image principale. La limite porte sur les
   IMAGES, jamais sur le conteneur — qui doit rester pleine largeur. */
#hikashop_small_image_div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    width: 100%;
}

#hikashop_small_image_div > a {
    display: inline-flex;
    line-height: 0;
}

#hikashop_small_image_div img.hikashop_child_image {
    width: 64px;
    height: 64px;
    object-fit: contain;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 3px;
    padding: 4px;
    box-sizing: border-box;
}

#hikashop_small_image_div img.hikashop_child_image_active {
    border-color: var(--azur, #2DA0CE);
}

/* ---------- Colonne de droite : un seul bloc ---------- */
#hikashop_product_right_part {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 24px 28px;
    background: rgba(0, 0, 0, .025);
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 4px;
    box-sizing: border-box;
}

#hikashop_product_price_main {
    font-size: 1.6rem;
    line-height: 1.2;
    width: 100%;
}

/* Prix unique : montant en gras, mention « l'unité » en petit gris.
   Les valeurs sont posées explicitement plutôt que laissées à l'héritage,
   pour que le rendu reste cohérent avec celui des prix dégressifs. */
#hikashop_product_price_main .hikashop_product_price {
    font-weight: 700;
}

#hikashop_product_price_main .hikashop_product_price_per_unit,
#hikashop_product_price_main .hikashop_product_price_per_unit_x {
    font-size: .85rem;
    font-weight: 400;
    color: rgba(0, 0, 0, .55);
}

/* Prix barré et prix promotionnel, le cas échéant */
#hikashop_product_price_main .hikashop_product_price_before_discount {
    font-size: 1rem;
    font-weight: 400;
    color: rgba(0, 0, 0, .45);
    text-decoration: line-through;
}

/* Quantité et bouton alignés à gauche, non plus dispersés */
#hikashop_product_quantity_main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    margin: 0;
}

#hikashop_product_quantity_main .hikashop_product_quantity_div,
#hikashop_product_quantity_main form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

#hikashop_product_quantity_main .hikabtn,
#hikashop_product_contact_main .hikabtn {
    padding: 12px 28px;
    font-size: 1rem;
}

/* Bouton d'ajout au panier centré dans la colonne */
#hikashop_product_quantity_main .hikashop_product_quantity_div,
#hikashop_product_quantity_main .hikacart,
#hikashop_product_quantity_main .hikabtn {
    align-self: center;
}

/* Les <br /> parasites du gabarit HikaShop sont des enfants DIRECTS de la
   colonne. Le sélecteur ">" est indispensable : sans lui, cette règle masquait
   aussi les <br/> qui séparent les paliers de prix dégressifs, rendant la
   liste illisible. */
#hikashop_product_right_part > br {
    display: none;
}

/* ---------- Prix dégressifs par quantité ---------- */
.hikashop_product_several_prices {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.hikashop_product_several_prices br {
    display: none;
}

.hikashop_product_price_with_min_qty {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.hikashop_product_price_with_min_qty:last-child {
    border-bottom: 0;
}

.hikashop_product_several_prices .hikashop_product_price {
    font-size: 1.15rem;
    white-space: nowrap;
}

.hikashop_product_several_prices .hikashop_product_price_per_unit_x {
    font-size: .85rem;
    color: rgba(0, 0, 0, .55);
    text-align: right;
}

/* ---------- Champs personnalisés du produit ----------
   HikaShop rend chaque champ dans une ligne de tableau : libellé à gauche,
   champ à droite. Les lignes passent en blocs pour empiler le libellé
   au-dessus de son champ, ce qui laisse toute la largeur aux listes
   déroulantes et au bouton de téléversement. */
#hikashop_product_right_part table tr[class*="hikashop_item_"] {
    display: block;
    margin-bottom: 14px;
}

#hikashop_product_right_part table tr[class*="hikashop_item_"] > td {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
}

/* Le libellé : première cellule de la ligne */
#hikashop_product_right_part table tr[class*="hikashop_item_"] > td:first-child {
    margin-bottom: 5px;
    font-weight: 600;
    font-size: .95rem;
}

#hikashop_product_right_part table tr[class*="hikashop_item_"] select,
#hikashop_product_right_part table tr[class*="hikashop_item_"] input[type="text"],
#hikashop_product_right_part table tr[class*="hikashop_item_"] input[type="file"] {
    width: 100%;
}

/* Le sélecteur de variantes occupe lui aussi toute la largeur */
#hikashop_product_characteristics,
#hikashop_product_characteristics table,
#hikashop_product_characteristics select {
    width: 100%;
}

/* Astérisque des champs obligatoires : collée au libellé plutôt qu'isolée
   sur sa propre ligne sous le champ. */
#hikashop_product_right_part .hikashop_field_required {
    color: #d9534f;
    font-weight: 700;
}

/* ---------- Description ---------- */
#hikashop_product_bottom_part {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(0, 0, 0, .12);
}

#hikashop_product_description_main {
    max-width: 68ch;
    line-height: 1.65;
}

/* Description déplacée par la surcharge de vue : à droite sous le bouton
   quand le produit a peu de champs, à gauche sous les images au-delà de deux
   champs personnalisés. Même traitement dans les deux cas. */
#hikashop_product_right_part #hikashop_product_description_main,
#hikashop_product_left_part #hikashop_product_description_main {
    width: 100%;
    max-width: none;
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, .12);
    font-size: .95rem;
}

#hikashop_product_description_main p {
    margin: 0 0 .7em;
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    #hikashop_product_top_part + .hk-row-fluid {
        gap: 20px;
    }

    #hikashop_product_right_part {
        padding: 20px;
    }

    #hikashop_product_left_part .hikashop_product_main_image_subdiv,
    #hikashop_product_left_part .hikashop_product_main_image {
        padding: 16px;
    }
}

/* ============================================================================
   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;
}

/* ============================================================================
   PAGE D'ACCUEIL
   ----------------------------------------------------------------------------
   Tout est préfixé par .secal-home : aucune règle ne peut déborder sur le
   template Creator CK ni sur HikaShop.

   Le HTML correspondant se colle dans l'article Joomla (éditeur en mode Code
   source). Ne remets pas de balise <style> dans l'article : le filtre de
   contenu de Joomla la supprime à l'enregistrement.
   ============================================================================ */

.secal-home {
    --texte: rgba(0, 0, 0, .88);
    --gris: rgba(0, 0, 0, .55);
    --trait: rgba(0, 0, 0, .12);
    --voile: rgba(0, 0, 0, .035);
    --azur: #2DA0CE;

    /* Couleurs officielles des organisations */
    --rotary: #17458F;
    --interact: #00A2E0;
    --innerwheel: #FFD100;
    --rotaract: #D41367;

    --chrome: 300px;   /* hauteur mesurée de #wrapper_header + #wrapper_footer */

    color: var(--texte);
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    justify-content: center;   /* grille centrée dans la hauteur disponible */
    gap: 14px;
    min-height: calc(100vh - var(--chrome));
    padding: 16px 0;
}

.secal-home * { box-sizing: border-box; }

/* Pleine largeur pour la seule page d'accueil.
   :has() cible le conteneur du template uniquement quand la page contient
   .secal-home — les autres pages gardent leur largeur habituelle. */
body:has(.secal-home) #wrapper > .inner,
body:has(.secal-home) #maincontent,
body:has(.secal-home) #maincontent > .inner {
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Repli pour les navigateurs sans :has() : la grille déborde de son
   conteneur par des marges négatives. */
@supports not selector(:has(*)) {
    .secal-home {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        padding-left: 16px;
        padding-right: 16px;
    }
}

.secal-home h1,
.secal-home h2,
.secal-home h3 {
    /* Hérite de la police du template (Open Sans) plutôt que d'en imposer une */
    font-family: inherit;
    font-weight: 600;
    line-height: 1.15;
    margin: 0;
    color: inherit;
}

.secal-home p { margin: 0; }
.secal-home a { text-decoration: none; }

.secal-home a:focus-visible {
    outline: 3px solid var(--azur);
    outline-offset: 2px;
}

/* ---------- Grille -------------------------------------------------------- */
.secal-grille {
    /* "flex: 0 1 auto" plutôt que "flex: 1" : la grille prend la hauteur de son
       contenu et se laisse centrer, au lieu de s'étirer sur toute la zone. */
    flex: 0 1 auto;
    display: grid;
    grid-template-columns: 1.6fr 1.6fr 1fr 1fr;
    grid-template-rows: repeat(2, minmax(200px, 1fr));
    gap: 14px;
}

/* Carré 2 × 2 des boutiques, colonnes 1 et 2 */
.secal-club-1 { grid-column: 1; grid-row: 1; }
.secal-club-2 { grid-column: 2; grid-row: 1; }
.secal-club-3 { grid-column: 1; grid-row: 2; }
.secal-club-4 { grid-column: 2; grid-row: 2; }

/* Deux tuiles verticales, pleine hauteur des colonnes 3 et 4 */
.secal-v { grid-row: 1 / span 2; }
.secal-v-1 { grid-column: 3; }
.secal-v-2 { grid-column: 4; }

/* ---------- Tuiles -------------------------------------------------------- */
.secal-tuile {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 24px 26px;
    overflow: hidden;
}

.secal-tuile h2 { font-size: clamp(1.2rem, 1.6vw, 1.7rem); }
.secal-tuile h3 { font-size: clamp(1.15rem, 1.5vw, 1.6rem); }

/* Boutons repris du style HikaShop (.hikabtn) : même bleu, même bleu au
   survol, pour que l'accueil et la boutique se répondent.
   Le sélecteur inclut "a" et la couleur porte !important : les règles de
   lien du template sont plus spécifiques et reprenaient la main au survol,
   ce qui rendait le texte invisible. */
a.secal-lien {
    align-self: flex-start;
    margin-top: auto;
    padding: 10px 22px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: var(--azur);
    color: #fff !important;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

a.secal-lien:hover,
a.secal-lien:focus {
    background: #2589AE;
    color: #fff !important;
    text-decoration: none;
}

/* Sur les tuiles colorées, un bouton bleu se perdrait dans le fond.
   Bouton blanc plein à texte foncé : lisible sur les quatre couleurs,
   et cohérent avec l'identité noir et blanc de la marque. */
.secal-club a.secal-lien {
    background: #fff;
    border-color: rgba(0, 0, 0, .1);
    color: rgba(0, 0, 0, .88) !important;
}

.secal-club a.secal-lien:hover,
.secal-club a.secal-lien:focus {
    background: rgba(255, 255, 255, .82);
    color: rgba(0, 0, 0, .88) !important;
}

/* ---------- Tuiles des organisations -------------------------------------- */
.secal-club {
    justify-content: flex-start;
    gap: 12px;
}

.secal-club img {
    height: 80px;
    width: auto;
    max-width: 100%;
    align-self: flex-start;
}

.secal-club ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: clamp(.78rem, .9vw, .92rem);
    opacity: .85;
}

.secal-club li { padding: 2px 0; }

.secal-rotary { background: var(--rotary); color: #fff; }
/* Texte blanc demandé par le client. À savoir : sur ce bleu, le contraste
   n'est que de 2,9 (seuil d'accessibilité : 4,5). En noir il serait de 7,2.
   Si la lisibilité pose problème, assombrir --interact vers #0077A3 permet
   de garder le blanc en repassant au-dessus du seuil. */
.secal-interact { background: var(--interact); color: #fff; }
/* Texte en bleu Rotary sur le jaune Inner Wheel : contraste 6,3, au-dessus
   du seuil d'accessibilité de 4,5. */
.secal-innerwheel { background: var(--innerwheel); color: var(--rotary); }
.secal-rotaract { background: var(--rotaract); color: #fff; }

/* ---------- Tuiles verticales --------------------------------------------- */
.secal-v {
    gap: 12px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .45);
}

/* Zone image des tuiles verticales.
   "object-fit: contain" garde la photo entière sans la déformer, quelles que
   soient ses proportions ; "flex-shrink" lui permet de céder de la hauteur
   quand la tuile manque de place, au lieu de pousser le texte dehors. */
.secal-v svg,
.secal-v-image {
    width: 100%;
    max-width: 100%;
    max-height: 190px;
    height: auto;
    margin: 4px auto 10px;
    object-fit: contain;
    flex-shrink: 1;
    min-height: 0;
    display: block;
}

.secal-v svg { max-width: 140px; }

.secal-v p { font-size: clamp(.78rem, .9vw, .9rem); color: var(--gris); }
.secal-v .secal-lien { color: var(--azur); }

.secal-etiquette {
    align-self: flex-start;
    padding: 3px 10px;
    background: var(--azur);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
}

.secal-specs {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: clamp(.76rem, .88vw, .88rem);
    color: var(--gris);
}

.secal-specs li {
    position: relative;
    padding: 3px 0 3px 16px;
}

/* Puce en forme de fanion plutôt qu'une pastille */
.secal-specs li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 9px;
    height: 9px;
    background: var(--azur);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* ---------- Effets visuels ------------------------------------------------
   Sobres, conformes à une identité noir et blanc : un léger soulèvement au
   survol, une apparition en fondu décalée à l'ouverture. Tout est neutralisé
   si le visiteur a désactivé les animations dans son système. */

.secal-tuile {
    transition: transform .18s ease, box-shadow .18s ease;
}

.secal-tuile:hover,
.secal-tuile:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .13);
}

/* Le focus clavier reste instantané : pas de transition à traverser avant de
   voir où l'on se trouve. */
.secal-home a:focus-visible {
    transition: none;
}

/* Apparition à l'ouverture : colonnes de gauche à droite, 130 ms d'écart. */
@keyframes secal-apparition {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.secal-tuile {
    animation: secal-apparition .8s ease-out backwards;
}

.secal-club-1 { animation-delay: 0ms; }
.secal-club-2 { animation-delay: 130ms; }
.secal-club-3 { animation-delay: 130ms; }
.secal-club-4 { animation-delay: 260ms; }
.secal-v-1    { animation-delay: 390ms; }
.secal-v-2    { animation-delay: 520ms; }

/* Accessibilité : aucun mouvement si le système du visiteur le demande. */
@media (prefers-reduced-motion: reduce) {
    .secal-tuile {
        animation: none;
        transition: none;
    }

    .secal-tuile:hover,
    .secal-tuile:focus-within {
        transform: none;
    }
}

/* ---------- Mobile et tablette -------------------------------------------- */
@media (max-width: 1000px) {
    .secal-home { min-height: 0; }

    .secal-grille {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .secal-grille > * {
        grid-column: auto;
        grid-row: auto;
    }

    .secal-v svg { max-height: 150px; }
    .secal-agrement { margin-left: 0; }
}

@media (min-width: 1001px) and (max-width: 1400px) {
    .secal-grille { grid-template-columns: 1.3fr 1.3fr 1fr 1fr; }

    /* Les tuiles sont plus étroites : le logo est ramené à une taille
       intermédiaire pour laisser la place au texte. */
    .secal-club img { height: 60px; }
}