/*
 * 101010.Paris — CSS custom (thème enfant warehousechild)
 * Chargé automatiquement par PrestaShop en priority 1000 (en dernier).
 * Règle : cibler par CLASSE, jamais par #id LIÉ À UNE ENTITÉ (les id d'entité
 * changent selon la langue). Les id STRUCTURELS du thème (#header, #wrapper,
 * #footer) sont stables dans toutes les langues : OK de s'en servir.
 */

/* ==========================================================================
   Encadrement du site (header + contenu), HORS footer
   Le footer (#footer) reste sans cadre — traitement dédié à venir.
   ========================================================================== */

:root {
    /* Largeur RESPONSIVE LINÉAIRE (pas par paliers) :
       clamp(plancher, fluide en vw, plafond).
       - 5px mini sur petits écrans
       - 1.4% de la largeur d'écran entre les deux (montée pixel par pixel)
       - 48px maxi sur très grands écrans. Ajuster ces 3 valeurs au besoin. */
    --frame-width: clamp(5px, 1.4vw, 48px);
    --frame-color: #000;
}

/* Le cadre est dessiné avec de VRAIES bordures : elles occupent de la place
   et POUSSENT le contenu vers l'intérieur (rien n'est masqué). Le site reste
   pleine largeur, mais à l'intérieur du cadre.
   box-sizing:border-box (déjà global dans le thème) → la bordure n'ajoute pas
   de largeur, donc pas de débordement horizontal. */

/* Header : bord haut + côtés */
#header {
    border-top: var(--frame-width) solid var(--frame-color);
    border-left: var(--frame-width) solid var(--frame-color);
    border-right: var(--frame-width) solid var(--frame-color);
}

/* Wrapper (contenu) : côtés + bord bas → ferme le cadre juste avant le footer */
#wrapper {
    border-left: var(--frame-width) solid var(--frame-color);
    border-right: var(--frame-width) solid var(--frame-color);
    border-bottom: var(--frame-width) solid var(--frame-color);
    /* Contient les sections pleine largeur (100vw, ex. la vidéo Elementor)
       À L'INTÉRIEUR du cadre, au lieu qu'elles débordent par-dessus la bordure.
       'clip' ne crée pas de conteneur de scroll → n'affecte ni le sticky ni
       les menus déroulants verticaux. */
    overflow-x: clip;
}

/* Trait du HAUT du cadre, FIXE en haut de l'écran.
   Les bordures de #header/#wrapper défilent avec la page ; cette barre fixe
   prend le relais pour que le haut du cadre reste toujours visible au scroll.
   Au repos elle se superpose pile au bord du cadre (donc invisible en plus).
   Attachée à body (jamais transformé) → bien fixée au viewport. */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--frame-width);
    background: var(--frame-color);
    z-index: 5001; /* au-dessus du header sticky (5000) */
    pointer-events: none;
}

/* ==========================================================================
   COINS INTÉRIEURS ARRONDIS du cadre noir (concaves), même rayon que le menu.
   Le cadre reste PLEIN et carré côté écran ; on ajoute juste un petit bloc noir
   à chaque coin intérieur avec une découpe arrondie côté contenu.
   - Coins HAUT : fixés (html::before/::after) → suivent la barre fixe au scroll.
   - Coins BAS  : sur #wrapper (::before/::after) → au-dessus du footer.
   Taille du bloc = rayon ; il est posé pile à l'angle intérieur (à --frame-width
   des bords). pointer-events:none, jamais d'interception de clic. */
html::before,
html::after {
    content: "";
    position: fixed;
    width: var(--header-radius);
    height: var(--header-radius);
    z-index: 5001;
    pointer-events: none;
}

/* Chaque bloc = noir, avec un QUART DE CERCLE TRANSPARENT côté contenu
   (radial-gradient) → creux concave qui arrondit le coin intérieur du cadre.
   Le +0.5px lisse le bord de l'arc (anti-aliasing). */

/* HAUT-GAUCHE : creux vers le bas-droite */
html::before {
    top: var(--frame-width);
    left: var(--frame-width);
    background: radial-gradient(circle at bottom right,
        transparent var(--header-radius),
        var(--frame-color) calc(var(--header-radius) + 0.5px));
}
/* HAUT-DROITE : creux vers le bas-gauche */
html::after {
    top: var(--frame-width);
    right: var(--frame-width);
    background: radial-gradient(circle at bottom left,
        transparent var(--header-radius),
        var(--frame-color) calc(var(--header-radius) + 0.5px));
}


/* ==========================================================================
   Cadre du FOOTER — même principe, mais BLANC et sur les 4 côtés.
   (Bloc autonome, donc cadre complet tout autour.)
   ========================================================================== */
:root {
    --footer-frame-color: #fff; /* blanc pur */
}

#footer {
    border: var(--frame-width) solid var(--footer-frame-color);
    overflow-x: clip; /* contient les blocs pleine largeur du footer à l'intérieur */
}

/* ==========================================================================
   HEADER — encart blanc arrondi, FIXE et toujours identique.
   ⚠️ Le header RÉELLEMENT affiché est #mobile-header > #mobile-header-sticky :
   le thème force #desktop-header en display:none à TOUTES les résolutions
   (@media max-width:9999px). C'est donc le mobile-header qu'on style.
   Fond de page = #f8f8f8 (body) → il apparaît dans l'écart autour de la carte.
   ========================================================================== */
:root {
    --header-gap: clamp(12px, 1.2vw, 40px);    /* écart entre le cadre et la carte */
    --header-radius: clamp(10px, 0.9vw, 28px); /* arrondi des coins (un peu plus serré) */
    --header-card-bg: #fff;                    /* fond de la carte (blanc, opaque) */
}

/* On rend transparents les fonds blancs qui remplissaient l'écart (sinon la
   carte blanche serait invisible sur du blanc). Le #f8f8f8 de la page apparaît
   alors autour de la carte. Le cadre (border de #header) reste intact. */
#header {
    background: transparent;
    padding-top: var(--header-gap); /* écart sous le cadre du haut (espace réservé) */
}
#mobile-header {
    background: transparent;
    border-bottom: 0;
}

/* LA carte : barre blanche opaque, coins arrondis, écart latéral avec le cadre. */
#mobile-header-sticky {
    background: var(--header-card-bg);
    border-radius: var(--header-radius);
    margin-left: var(--header-gap);
    margin-right: var(--header-gap);
}

/* STICKY SANS SACCADE.
   Le sticky natif du thème (plugin Waypoint, rm_sticky="down", offset 0) ne colle
   le menu qu'une fois arrivé tout en haut, puis on le repositionne plus bas →
   d'où le « grossit/remonte puis revient ». Impossible à corriger en CSS sur la barre.
   Solution : on rend #header LUI-MÊME collant (position:sticky). Son parent
   #main-page-content est haut → tout le bloc (cadre haut + écart + carte) reste figé
   en haut sur toute la page, SANS saut ni animation (sticky ne « saute » jamais).
   La carte garde donc exactement la même taille/position au repos comme au scroll. */
#header {
    position: sticky;
    top: 0;
    z-index: 5000;
}

/* On NEUTRALISE le sticky natif du thème sur la carte (sinon il la fixe en
   top:0 pleine largeur → conflit + saccade). La carte reste dans le flux,
   portée par #header collant, avec son écart latéral (margin) constant.
   !important pour battre aussi d'éventuels styles inline posés en JS. */
#mobile-header-sticky,
#mobile-header-sticky[class*="stuck"] {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

/* ==========================================================================
   MENU MOBILE — panneau flottant façon Dior + reste de l'écran flouté.
   Mode actif = « push » (.col-mobile-menu-push) : le panneau glisse depuis la
   gauche. On le transforme en CARTE FLOTTANTE (marges + arrondi, cohérent avec
   le header) et on FLOUTE le reste de l'écran via le voile.
   On conserve l'animation de glissement du thème (transform sur .show).
   ========================================================================== */

/* Le panneau : carte blanche flottante, marges = cadre + écart (comme le header),
   coins arrondis, hauteur définie par top/bottom, contenu scrollable. */
.col-mobile-menu-push #_mobile_iqitmegamenu-mobile {
    top: calc(var(--frame-width) + var(--header-gap));
    bottom: calc(var(--frame-width) + var(--header-gap));
    left: calc(var(--frame-width) + var(--header-gap));
    height: auto; /* défini par top + bottom */
    /* largeur laissée à celle de base du thème (300px) → sous-menus OK */
    border-radius: var(--header-radius);
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18); /* léger flottement (ajustable) */
}

/* Bandeau gris en haut du panneau = header du menu défini par le thème
   (.mobile-menu__header-wrapper background #f4f4f4). On le rend blanc. */
.mobile-menu__header-wrapper {
    background: var(--header-card-bg) !important;
}

/* Bouton "Fermer" placé à GAUCHE (là où se trouve le burger) → l'utilisateur
   peut refermer aussitôt d'un re-clic au même endroit.
   order:-1 le met en premier, margin-right:auto renvoie le reste à droite. */
#_mobile_iqitmegamenu-mobile .mobile-menu__close {
    order: -1;
    margin-right: auto;
}

/* FLOU de l'arrière-plan quand le menu est ouvert.
   On floute le CONTENU INTÉRIEUR (#inner-wrapper, #footer-container-main) et
   surtout PAS #wrapper/#footer eux-mêmes : le cadre (porté par leurs bordures)
   reste donc NET et le flou reste « coincé » dans le cadre.
   Déclencheur = #_mobile_iqitmegamenu-mobile.show (classe posée par Bootstrap). */
html:has(#_mobile_iqitmegamenu-mobile.show) #inner-wrapper,
html:has(#_mobile_iqitmegamenu-mobile.show) #footer-container-main {
    filter: blur(8px);
}
#inner-wrapper,
#footer-container-main {
    transition: filter .3s ease; /* apparition/disparition douce du flou */
}

/* Le HEADER DE DÉPART (logo, icônes, burger) se FOND à l'ouverture du panneau,
   en opacity sur 0,4s = la durée du glissement du panneau → fondu synchronisé,
   pas de "trou" (header parti avant l'arrivée du panneau) et pas d'effet
   gauche→droite (opacity uniforme sur tous les éléments à la fois).
   Jamais appliqué au panneau (dans .col-mobile-menu-push). La barre devient
   transparente (en fondu aussi) pour ne pas laisser de bandeau blanc. */
html:has(#_mobile_iqitmegamenu-mobile.show) #mobile-header-sticky {
    background: transparent !important;
    box-shadow: none !important;
    transition: background-color .4s ease !important;
}
html:has(#_mobile_iqitmegamenu-mobile.show) .mobile-main-bar .col-mobile-logo,
html:has(#_mobile_iqitmegamenu-mobile.show) .mobile-main-bar .col-mobile-btn-search,
html:has(#_mobile_iqitmegamenu-mobile.show) .mobile-main-bar .col-mobile-btn-account,
html:has(#_mobile_iqitmegamenu-mobile.show) .mobile-main-bar .col-mobile-btn-cart,
html:has(#_mobile_iqitmegamenu-mobile.show) .mobile-main-bar .js-m-nav-btn-menu {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity .4s ease !important;
}