/* #15406 #CONFIGURATEURVISUEL CHOICEZONE-V3 — popin « Delivery location »
   Mise en page calée sur le menu latéral du thème (croix 26/26 px, titre à 100 px du haut, marge 52 px).
   Zones + pays avec drapeau ; menu des langues flottant à droite du pays (survol / focus / tap). */

/* Dosis n'est livrée qu'en 400 par le thème : graisses 600/700 ajoutées ici (fichiers dans views/fonts/). */
@font-face {
    font-family: 'Dosis';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/dosis-latin_latin-ext-600.woff2") format("woff2");
}
@font-face {
    font-family: 'Dosis';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/dosis-latin_latin-ext-700.woff2") format("woff2");
}

.cvcz {
    --cvcz-text: #535260;
    --cvcz-hover: #86858c;
    --cvcz-rule: #e0e0e0;
    --cvcz-bg: #fff;
    --cvcz-overlay: rgba(0, 0, 0, 0.75);
    --cvcz-width: 840px;
    --cvcz-gutter: 52px;
    --cvcz-gap: 56px;
    --cvcz-top: 100px;
    --cvcz-title: 26px;
    --cvcz-zone-title: 19px;
    --cvcz-size: 14px;
    --cvcz-z: 30;
    --cvcz-font: "Libre Franklin", Helvetica, Arial, sans-serif;
    --cvcz-font-title: "Dosis", Helvetica, Arial, sans-serif;
}

.cvcz-overlay {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: var(--cvcz-z);
    background-color: var(--cvcz-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
}
.cvcz.is-open .cvcz-overlay {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.cvcz-drawer {
    position: fixed;
    top: 0; left: 0;
    z-index: calc(var(--cvcz-z) + 1);
    box-sizing: border-box;
    height: 100%;
    width: calc(100% - 20px);
    max-width: var(--cvcz-width);
    padding: var(--cvcz-top) var(--cvcz-gutter) 40px;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background: var(--cvcz-bg);
    color: var(--cvcz-text);
    font-family: var(--cvcz-font);
    font-size: var(--cvcz-size);
    line-height: 1.45;
    text-align: left;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.3s ease-in-out, visibility 0s linear 0.3s;
    outline: none;
}
.cvcz-drawer::-webkit-scrollbar { display: none; }
.cvcz.is-open .cvcz-drawer {
    transform: none;
    visibility: visible;
    transition-delay: 0s;
}
html.cvcz-open { overflow: hidden; }

.cvcz-close {
    position: absolute;
    top: 26px; left: 26px;
    padding: 0;
    width: 20px; height: 20px;
    border: 0;
    background: none;
    color: var(--cvcz-text);
    cursor: pointer;
    transform: rotate(45deg);
}
.cvcz-close svg { display: block; width: 20px; height: 20px; }
.cvcz-close:hover { color: var(--cvcz-hover); }

.cvcz-title {
    margin: 0 0 54px;
    font-family: var(--cvcz-font-title);
    font-size: var(--cvcz-title);
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    color: var(--cvcz-text);
}

/* 4 colonnes à la largeur de leur contenu, écart constant (menus flottants par-dessus la colonne voisine) */
.cvcz-zones {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    column-gap: var(--cvcz-gap);
    row-gap: 40px;
}
.cvcz-zone { min-width: 0; }
.cvcz-zone-title {
    margin: 0 0 16px;
    font-family: var(--cvcz-font-title);
    font-size: var(--cvcz-zone-title);
    font-weight: 700;
    line-height: 1.2;
    color: var(--cvcz-text);
}

.cvcz ul { margin: 0; padding: 0; list-style: none; }
.cvcz a { color: inherit; text-decoration: none; }
.cvcz a:hover { color: var(--cvcz-hover); }
.cvcz a:focus-visible, .cvcz-close:focus-visible { outline: 2px solid var(--cvcz-text); outline-offset: 2px; }

/* pays : chaque liste a la largeur de son pays le plus long et chaque ligne prend cette largeur ; le menu se place
   à droite de la liste, au même x pour tous ses pays (il ne bouge pas en x d'un pays à l'autre). United Kingdom,
   plus long mais sans menu, est dans une seconde liste sous le filet et ne compte pas. */
.cvcz-items { width: -webkit-max-content; width: max-content; }
.cvcz-item { position: relative; display: block; }
.cvcz-item + .cvcz-item { margin-top: 10px; }
.cvcz-item-box { display: block; }
.cvcz-item-link {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: -8px; /* la ligne s'étend jusqu'au bord du menu : le chevron se centre entre le libellé et le menu */
    font-weight: 600;
    white-space: nowrap;
}
.cvcz-country { flex: none; }

/* drapeaux : gris au repos, en couleur au survol de la zone ou pour la zone de la boutique courante (hors survol) */
.cvcz-flag {
    flex: none;
    display: block;
    width: 18px; height: 13px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.12);
    object-fit: cover;
    filter: grayscale(0.85);
    opacity: 0.8;
    transition: filter 0.15s ease, opacity 0.15s ease;
}
.cvcz-flag--none { border-color: transparent; }
.cvcz-zone:hover .cvcz-flag,
.cvcz-zones:not(.cvcz-zones--hover) .cvcz-zone.is-current .cvcz-flag { filter: none; opacity: 1; }

/* chevron › centré dans l'espace entre le libellé et le menu, visible au survol */
.cvcz-chevron {
    position: relative;
    flex: 1 1 auto;
    min-width: 18px;
    align-self: stretch;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.cvcz-chevron::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 6px; height: 6px;
    margin: -4px 0 0 -8px; /* centre visuel du chevron tourné de 45° */
    border: solid currentColor;
    border-width: 1.5px 1.5px 0 0;
    transform: rotate(45deg);
}
.cvcz:not(.cvcz-js) .cvcz-item--multi:hover .cvcz-chevron, /* sans JS : survol CSS */
.cvcz-item--multi.is-hover .cvcz-chevron,
.cvcz-item--multi:focus-within .cvcz-chevron,
.cvcz-item.is-open .cvcz-chevron { opacity: 1; }

/* menu des langues : fond blanc, filet fin, sans surlignage ; pont invisible à gauche pour garder le survol */
.cvcz-menu {
    display: none;
    position: absolute;
    top: -11px;
    left: calc(100% + 8px);
    z-index: 2;
    min-width: 110px;
    padding: 9px 0;
    border: 1px solid var(--cvcz-rule);
    background: var(--cvcz-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.cvcz-menu::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -14px;
    width: 14px;
}
.cvcz:not(.cvcz-js) .cvcz-item--multi:hover .cvcz-menu, /* sans JS : survol CSS */
.cvcz-item--multi.is-hover .cvcz-menu, /* JS : ouverture, bascule et fermeture temporisées */
.cvcz-item--multi:focus-within .cvcz-menu,
.cvcz-item.is-open .cvcz-menu { display: block; }
.cvcz-lang {
    display: block;
    padding: 5px 22px;
    font-weight: 400;
    white-space: nowrap;
}
.cvcz-lang[aria-current="true"] { font-weight: 400; } /* langue courante : aucun relief, menu sobre (note #20) */

.cvcz-sep {
    width: 100%;
    margin: 14px 0 12px;
    border: 0;
    border-top: 1px solid var(--cvcz-rule);
}

/* #15418 #CONFIGURATEURVISUEL CHOICEZONE-V3-4COLS START : tablette, 4 colonnes gardées jusqu'au passage en liste mobile (≤ 767 px).
   Tiroir = largeur de l'écran moins 20 px, plafonné à 840 px ; 4 colonnes ≈ 480 px de contenu (FR) + 3 écarts + 2 marges.
   Ancien palier 2 colonnes à 620 px supprimé. */
@media screen and (max-width: 1099px) {
    .cvcz { --cvcz-gutter: 40px; --cvcz-gap: 40px; }
}
/* #15418 #CONFIGURATEURVISUEL CHOICEZONE-V3-4COLS END */

/* mobile : 1 colonne, menu des langues ouvert sous le pays (premier tap), puis choix (second tap) */
@media screen and (max-width: 767px) {
    .cvcz { --cvcz-gutter: 20px; --cvcz-gap: 20px; --cvcz-top: 27px; --cvcz-title: 16px; --cvcz-zone-title: 16px; } /* #15418 #CONFIGURATEURVISUEL CHOICEZONE-V3-MOBILE : titre sur la ligne de la croix (haut 80 -> 27 px), titres de zone 18 -> 16 px */
    .cvcz-drawer { width: calc(100% - 60px); max-width: 400px; } /* #15418 #CONFIGURATEURVISUEL CHOICEZONE-V3-MOBILE : liste sur 1 colonne plus étroite, le site reste visible à droite */
    .cvcz-title { margin-bottom: 24px; padding: 0 30px; text-align: center; font-family: var(--cvcz-font); font-weight: 400; text-transform: uppercase; } /* centré sur la ligne de la croix (centre à 36 px), marges égales pour ne jamais passer dessous ; même police que « LIVRAISON : » du menu fermé (Libre Franklin 16 px, normal, majuscules) */ /* #15418 #CONFIGURATEURVISUEL CHOICEZONE-V3-MOBILE : titre aligné à gauche */
    .cvcz-zones { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
    .cvcz-items { width: auto; }
    .cvcz-item + .cvcz-item { margin-top: 12px; }
    .cvcz-item-link { position: relative; min-height: 24px; margin-right: 0; }
    .cvcz-item--multi .cvcz-chevron { flex: 0 0 auto; width: 16px; opacity: 1; }
    .cvcz-item--multi .cvcz-chevron::after { transform: rotate(135deg); margin-top: -6px; }
    .cvcz-item.is-open .cvcz-chevron::after { transform: rotate(-45deg); margin-top: -2px; }
    /* #15418 #CONFIGURATEURVISUEL CHOICEZONE-V3-MOBILE : drapeaux toujours en couleur sur mobile (pas de survol, pas de zone grisée) */
    .cvcz-flag,
    .cvcz-zone:hover .cvcz-flag,
    .cvcz-zone.is-current .cvcz-flag { filter: none; opacity: 1; }
    .cvcz-menu {
        position: static;
        margin: 6px 0 4px 28px;
        padding: 6px 0;
        min-width: 0;
        box-shadow: none;
        border-width: 0 0 0 1px;
    }
    .cvcz-menu::before { display: none; }
    .cvcz-item--multi:hover .cvcz-menu { display: none; } /* pas de survol sur mobile : seul le tap ouvre */
    .cvcz-item--multi:focus-within .cvcz-menu,
    .cvcz-item.is-open .cvcz-menu { display: block; }
    .cvcz-lang { padding: 4px 14px; }
}

/* #15418 #CONFIGURATEURVISUEL CHOICEZONE-V3-MOBILE START — menu mobile du thème (sidebar) : « LIVRAISON : pays » ancré après la croix (il était aligné à droite et passait sous la croix) ; libellé et pays ouvrent le sélecteur */
@media screen and (max-width: 1099px) {
    .nq-c-Sidebar-shops {
        top: 39px; /* ligne centrée sur la croix */
        left: 85px;
        right: 16px;
    }
    /* pays long (UNITED KINGDOM, NORTH AMERICA) : passe sur 2 lignes à côté du libellé au lieu de déborder de l'écran */
    .nq-c-Sidebar-shops .nq-c-HeaderShops {
        display: flex;
        align-items: center;
    }
    .nq-c-Sidebar-shops .drop-down-label {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .nq-c-Sidebar-shops .nq-c-Dropdown {
        flex: 0 1 auto;
        min-width: 0;
    }
    .nq-c-Sidebar-shops .nq-c-Dropdown-toggler {
        white-space: normal;
        text-align: left;
        padding: 2px 0 2px 10px;
        line-height: 1.1;
        background-color: transparent;
    }
    .nq-c-Sidebar-shops .drop-down-label,
    .nq-c-Sidebar-shops .nq-c-Dropdown-toggler {
        cursor: pointer;
    }
}
/* #15418 #CONFIGURATEURVISUEL CHOICEZONE-V3-MOBILE END */
/* #15418 #CONFIGURATEURVISUEL CHOICEZONE-V3-NODROPDOWN : menu déroulant vide du thème sous le pays jamais affiché (trait sous le pays) */
.nq-c-HeaderShops .nq-c-Dropdown-menu { display: none !important; }
/* #15418 #CONFIGURATEURVISUEL CHOICEZONE-V3-NOHIGHLIGHT : pas de surlignage au tap ni de contour au clic sur « LIVRAISON : pays » et dans le sélecteur ;
   contour conservé pour la navigation au clavier (:focus-visible) */
.nq-c-HeaderShops,
.nq-c-HeaderShops *,
.cvcz a,
.cvcz button { -webkit-tap-highlight-color: transparent; }
.nq-c-HeaderShops .nq-c-Dropdown-toggler:focus,
.cvcz a:focus,
.cvcz button:focus { outline: none; box-shadow: none; }
.nq-c-HeaderShops .nq-c-Dropdown-toggler:focus-visible { outline: 2px solid #535260; outline-offset: 2px; }
.cvcz a:focus-visible,
.cvcz button:focus-visible { outline: 2px solid var(--cvcz-text); outline-offset: 2px; }
/* #15418 #CONFIGURATEURVISUEL CHOICEZONE-V3-SCROLLHINT START : flèche « défiler vers le bas », mobile seulement.
   Collée en bas de la zone visible du tiroir (sticky), fondu blanc par-dessus la liste, masquée en bas de liste. */
.cvcz-scroll-hint { display: none; }
@media screen and (max-width: 767px) {
    .cvcz-scroll-hint {
        position: sticky;
        bottom: -40px; /* recouvre la marge basse du tiroir */
        z-index: 3;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        width: calc(100% + 2 * var(--cvcz-gutter));
        height: 72px;
        margin: -72px calc(-1 * var(--cvcz-gutter)) 0;
        padding: 0 0 12px;
        border: 0;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--cvcz-bg) 60%);
        color: var(--cvcz-text);
        cursor: pointer;
        transition: opacity 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .cvcz-scroll-hint-arrow {
        display: block;
        width: 12px; height: 12px;
        border: solid currentColor;
        border-width: 0 1.5px 1.5px 0;
        transform: rotate(45deg);
        animation: cvcz-hint 1.6s ease-in-out infinite;
    }
    .cvcz.cvcz-scroll-end .cvcz-scroll-hint { opacity: 0; pointer-events: none; }
}
@keyframes cvcz-hint {
    0%, 100% { transform: translateY(-4px) rotate(45deg); }
    50% { transform: translateY(2px) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
    .cvcz-scroll-hint-arrow { animation: none; }
}
/* #15418 #CONFIGURATEURVISUEL CHOICEZONE-V3-SCROLLHINT END */