/* ==========================================================================
   Dolls France — Header mobile 2026  ·  v6
   v6 : le bloc .ets_mm_megamenu est HORS de <header> → collapse réécrit sans
   préfixe header, en !important ; panneau fermé mis en display:none.
   v5 : home — espace sous le logo resserré (padding logo, #columns,
   #slider_row/#top_column vides) + H1 de la home redessiné (barre magenta,
   graisse 800, interlignage resserré).
   v4 : panier ré-ancré dans la barre (blockcart.css écrasait position:fixed
   via #header), bordure tmsearchbox neutralisée, icônes centrées
   verticalement, panneau menu étiré jusqu'en bas de l'écran.
   --------------------------------------------------------------------------
   Barre sticky : téléphone (gauche) + loupe / compte / déconnexion / panier
   / hamburger (droite). Logo centré en dessous.

   100 % CSS. Aucun template, aucun JS modifié.

   CHARGEMENT
   PrestaShop 1.6 inclut automatiquement tout fichier .css déposé dans
   themes/<thème>/css/autoload/ (cf. FrontController::setMedia). Rien à
   déclarer : ni @import — inopérant dès que le CCC concatène les feuilles —
   ni <link> dans header.tpl. Le fichier est versionné et minifié comme les
   autres, et se charge après global.css, donc la cascade est dans le bon sens.

   MODULES RÉELLEMENT RENDUS DANS LE HEADER DE dollsfrance.com
     · recherche  : TM Search 4
                    #tmsearch > form#tmsearchbox > input#tm_search_query
     · menu       : ets_megamenu
                    .ybc-menu-toggle (.closed/.opened) + ul.mm_menus_ul.active
     · panier     : blockcart      .shopping_cart
     · compte     : blockuserinfo  .header_user_info > a.account / a.logout
     · téléphone  : blockcontact   span.shop-phone (déjà dans le DOM mobile,
                    simplement masqué par blockcontact.css)
   ========================================================================== */

@media (max-width: 767px) {

  /* ---------------------------------------------------------------------
     0. Jetons
     --------------------------------------------------------------------- */
  :root {
    --dfh-bg: #1E2038;
    --dfh-hover: rgba(255, 255, 255, .10);
    --dfh-ink: #FFFFFF;
    --dfh-magenta: #E5197E;

    --dfh-ic-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.7-4.7'/%3E%3C/svg%3E");
    --dfh-ic-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E");
    --dfh-ic-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h2.6l2.2 10.4a1.6 1.6 0 0 0 1.6 1.3h7.9a1.6 1.6 0 0 0 1.6-1.2l1.5-6.2H6'/%3E%3Ccircle cx='9.5' cy='19.5' r='1.5'/%3E%3Ccircle cx='17' cy='19.5' r='1.5'/%3E%3C/svg%3E");
    --dfh-ic-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h4a1.5 1.5 0 0 1 1.5 1.5v13A1.5 1.5 0 0 1 18 20h-4'/%3E%3Cpath d='M9 8l-4 4 4 4M5 12h9'/%3E%3C/svg%3E");
    --dfh-ic-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24 11.4 11.4 0 0 0 3.6.58 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .57 3.6 1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
  }

  /* ---------------------------------------------------------------------
     1. La barre — header .nav devient le conteneur flex
     --------------------------------------------------------------------- */
  header .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1002;
    height: 56px;
    background: var(--dfh-bg);
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    padding: 0 100px 0 12px;
    margin: 0;
  }

  header .nav > .container,
  header .nav > .container > .row,
  header .nav nav {
    display: contents;
  }

  .header-container { padding-top: 56px; }

  header .nav .header_user_info,
  header .nav #contact-link,
  header .nav .shop-phone,
  header .nav #tmsearch,
  header .nav [id*="search_block"] {
    float: none;
    border: 0;
    margin: 0;
    padding: 0;
    width: auto;
    min-width: 0;
    background: none;
  }

  header .nav #contact-link,
  header .nav #contact-link.is_logged { display: none !important; }

  /* ---------------------------------------------------------------------
     2. Bouton icône générique
     --------------------------------------------------------------------- */
  header .nav .header_user_info > a,
  header .nav .header_user_info > button,
  header .nav form,
  header .shopping_cart > a,
  .ybc-menu-toggle {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    min-width: 0;
    flex: 0 0 44px;
    padding: 0 !important;
    margin: 0 !important;
    border: 0;
    border-radius: 12px;
    background: transparent !important;
    box-shadow: none;
    font-size: 0 !important;
    line-height: 0;
    color: var(--dfh-ink);
    text-shadow: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .18s ease;
  }

  header .nav .header_user_info > a:active,
  header .nav .header_user_info > button:active,
  header .shopping_cart > a:active,
  .ybc-menu-toggle:hover,
  .ybc-menu-toggle:active,
  .ybc-menu-toggle.opened {
    background: var(--dfh-hover) !important;
    color: var(--dfh-ink);
  }

  header .nav .header_user_info > a::before,
  header .nav .header_user_info > button::before,
  header .nav form::after,
  header .shopping_cart > a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 23px;
    height: 23px;
    margin: -11.5px 0 0 -11.5px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    pointer-events: none;
  }

  /* ---------------------------------------------------------------------
     3. Téléphone — à gauche, pousse le reste vers la droite
     --------------------------------------------------------------------- */
  header .nav .shop-phone,
  header .nav .shop-phone.is_logged {
    display: flex !important;
    align-items: center;
    order: 0;
    margin-right: auto !important;
    font-size: 0;
    color: var(--dfh-ink);
    white-space: nowrap;
    overflow: hidden;
  }

  header .nav .shop-phone i,
  header .nav .shop-phone i.icon-phone {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-right: 7px;
    padding: 0;
    font-size: 0;
    background-color: var(--dfh-magenta);
    -webkit-mask: var(--dfh-ic-phone) center / contain no-repeat;
    mask: var(--dfh-ic-phone) center / contain no-repeat;
  }
  header .nav .shop-phone i::before { content: none; }

  header .nav .shop-phone strong {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1;
    color: var(--dfh-ink);
  }

  /* ---------------------------------------------------------------------
     4. Recherche → loupe seule ; le clic sur l'input ouvre Doofinder
     --------------------------------------------------------------------- */
  header .nav #tmsearch,
  header .nav #search_block_top,
  header .nav [id*="search_block"] {
    order: 1;
    flex: 0 0 44px;
    width: 44px !important;
    padding: 0 !important;
    margin-right: 2px !important;
    display: flex !important;
    align-items: center;
    align-self: center;
  }

  /* tmsearch.css se charge APRÈS ce fichier :
     `#tmsearch #tmsearchbox { border:1px solid #d6d4d4; background:#fbfbfb;
     padding-right:50px }` (2 ID) → neutralisé à spécificité supérieure. */
  #header #tmsearch #tmsearchbox,
  #tmsearch #tmsearchbox {
    float: none !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  /* :has() isolé : un navigateur qui l'ignore ne doit pas invalider la règle
     ci-dessus — une liste de sélecteurs tombe en entier. */
  header .nav div:has(> form input[name="search_query"]) {
    order: 1;
    flex: 0 0 44px;
    width: 44px !important;
    padding-top: 0 !important;
    margin-right: 2px !important;
  }

  header .nav form { float: none; }
  header .nav form::after {
    -webkit-mask-image: var(--dfh-ic-search);
    mask-image: var(--dfh-ic-search);
  }

  header .nav input[name="search_query"],
  header .nav input.tm_search_query,
  header .nav input.search_query,
  header .nav input[type="search"] {
    display: block !important;
    width: 44px !important;
    max-width: 44px;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    caret-color: transparent;
    font-size: 16px;
    cursor: pointer;
    position: relative;
    z-index: 1;
  }

  header .nav input[name="search_query"]::placeholder { color: transparent !important; }
  header .nav input[name="search_query"]::-webkit-input-placeholder { color: transparent !important; }
  header .nav input[name="search_query"]::-moz-placeholder { color: transparent !important; }
  header .nav input[name="search_query"]:focus {
    outline: none;
    background: var(--dfh-hover) !important;
  }

  /* Le submit natif reste dans le DOM (touche Entrée) mais devient invisible */
  header .nav form button,
  header .nav form .btn,
  header .nav .button-search {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none;
    overflow: hidden;
  }
  header .nav form label { display: none !important; }

  /* ---------------------------------------------------------------------
     5. Compte + déconnexion
     --------------------------------------------------------------------- */
  /* Les wrappers centrent leur bouton verticalement (sinon l'icône colle
     en haut de la barre) et perdent les bordures de blockuserinfo.css. */
  header .nav .header_user_info {
    order: 2;
    display: flex !important;
    align-items: center;
    align-self: center;
    border: 0 !important;
  }
  header .nav .header_user_info + .header_user_info { order: 3; }

  header .nav .header_user_info > a span,
  header .nav .header_user_info > button span { display: none; }

  header .nav .header_user_info > a.account::before,
  header .nav .header_user_info > button.login::before {
    -webkit-mask-image: var(--dfh-ic-user);
    mask-image: var(--dfh-ic-user);
  }

  header .nav .header_user_info > a.account::after {
    content: "";
    position: absolute;
    top: 9px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 0 2px var(--dfh-bg);
  }

  header .nav .header_user_info > button.login {
    -webkit-appearance: none;
    appearance: none;
  }

  header .nav .header_user_info > a.logout {
    width: 38px !important;
    flex-basis: 38px;
    opacity: .75;
  }
  header .nav .header_user_info > a.logout::before {
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    -webkit-mask-image: var(--dfh-ic-logout);
    mask-image: var(--dfh-ic-logout);
  }
  header .nav .header_user_info > a.logout:active { opacity: 1; }

  /* ---------------------------------------------------------------------
     6. Panier — ancré dans la barre, 2e depuis la droite
     --------------------------------------------------------------------- */
  /* blockcart.css se charge APRÈS ce fichier et pose
     `#header .shopping_cart { position:relative; float:right; padding-top:50px }`
     → il faut la même spécificité (#header) + !important. */
  #header .shopping_cart,
  header .shopping_cart {
    position: fixed !important;
    top: 6px !important;
    right: 52px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 1003;
    float: none !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
  }

  header .container > .row > div:has(> .shopping_cart) {
    height: 0;
    padding: 0;
    margin: 0;
    overflow: visible;
  }

  #header .shopping_cart > a:first-child,
  header .shopping_cart > a {
    display: flex !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  /* blockcart.css redessine l'icône en glyphe FontAwesome (\f07a) sur
     a:first-child:before + caret (\f0d7) en :after → écrasés ici. */
  #header .shopping_cart > a:first-child:before,
  header .shopping_cart > a::before {
    content: "" !important;
    position: absolute !important;
    top: 50%;
    left: 50%;
    float: none !important;
    display: block !important;
    width: 23px !important;
    height: 23px !important;
    margin: -11.5px 0 0 -11.5px;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    background-color: var(--dfh-ink) !important;
    -webkit-mask: var(--dfh-ic-cart) center / contain no-repeat;
    mask: var(--dfh-ic-cart) center / contain no-repeat;
    pointer-events: none;
  }

  #header .shopping_cart > a:first-child:after,
  header .shopping_cart > a::after {
    content: none !important;
  }

  header .shopping_cart > a b,
  header .shopping_cart > a .ajax_cart_product_txt,
  header .shopping_cart > a .ajax_cart_product_txt_s,
  header .shopping_cart > a .ajax_cart_total,
  header .shopping_cart > a .ajax_cart_no_product,
  header .shopping_cart > a .block_cart_expand,
  header .shopping_cart > a .block_cart_collapse {
    display: none !important;
  }

  header .shopping_cart > a .ajax_cart_quantity {
    display: block;
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 9px;
    background: var(--dfh-magenta);
    box-shadow: 0 0 0 2px var(--dfh-bg);
    color: #fff;
    font: 800 11px/18px "Open Sans", system-ui, sans-serif;
    text-align: center;
  }
  header .shopping_cart > a .ajax_cart_quantity.unvisible { display: none !important; }

  header .shopping_cart .cart_block { display: none !important; }

  /* ---------------------------------------------------------------------
     7. Menu ets_megamenu — hamburger seul, tout à droite
     --------------------------------------------------------------------- */
  /* Le bloc megamenu n'est pas dans <header> : sélecteurs sans préfixe,
     avec !important car megamenu.css se charge après ce fichier. */
  .ets_mm_megamenu,
  .ets_mm_megamenu .ets_mm_megamenu_content,
  .ets_mm_megamenu .ets_mm_megamenu_content > .container,
  .ets_mm_megamenu .ets_mm_megamenu_content_content {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    position: static !important;
    float: none !important;
  }

  /* Panneau fermé : aucune hauteur dans le flux */
  .ets_mm_megamenu .mm_menus_ul:not(.active) { display: none !important; }

  .ybc-menu-toggle,
  .ets_mm_megamenu .ybc-menu-toggle,
  .changestatus .ybc-menu-toggle {
    position: fixed !important;
    top: 6px;
    right: 6px;
    z-index: 1003;
    display: flex !important;
    text-transform: none;
    text-indent: -9999px;
    overflow: hidden;
  }

  .ybc-menu-toggle .ybc-menu-button-toggle_icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 14px;
    margin: -7px 0 0 -10px;
    text-indent: 0;
    float: none;
    display: block;
  }

  .ybc-menu-toggle .icon-bar {
    position: absolute;
    left: 0;
    float: none !important;
    clear: none !important;
    width: 20px !important;
    height: 2px !important;
    margin: 0 !important;
    border-radius: 2px;
    background-color: var(--dfh-ink) !important;
    transition: transform .22s ease, opacity .16s ease, top .22s ease;
  }
  .ybc-menu-toggle .icon-bar:nth-child(1) { top: 0; }
  .ybc-menu-toggle .icon-bar:nth-child(2) { top: 6px; }
  .ybc-menu-toggle .icon-bar:nth-child(3) { top: 12px; }

  .ybc-menu-toggle.opened .icon-bar:nth-child(1) { top: 6px; transform: rotate(45deg); }
  .ybc-menu-toggle.opened .icon-bar:nth-child(2) { opacity: 0; }
  .ybc-menu-toggle.opened .icon-bar:nth-child(3) { top: 6px; transform: rotate(-45deg); }

  /* Le panneau déroulé, sous la barre, quelle que soit la transition du module */
  .ets_mm_megamenu .mm_menus_ul.active,
  .changestatus .mm_menus_ul.active,
  .transition_default .mm_menus_ul.active,
  .transition_floating .mm_menus_ul.active,
  .transition_full .mm_menus_ul.active {
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;   /* le panneau descend jusqu'en bas de l'écran */
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 !important;
    z-index: 1001;
    background: #fff;
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .45);
  }

  /* ---------------------------------------------------------------------
     8. Deuxième rangée : le logo, seul et centré
     --------------------------------------------------------------------- */
  header .row #header_logo {
    float: none;
    width: 100%;
    padding: 12px 0 4px;
    text-align: center;
  }
  header .row #header_logo img {
    margin: 0 auto;
    max-width: 230px;
    height: auto;
  }

  /* ---------------------------------------------------------------------
     9. Home : espace sous le logo resserré + H1 redessiné
     --------------------------------------------------------------------- */
  #index #columns { padding-top: 0; }

  /* global.css : #index .tab-content { margin-top:35px } → supprimé sur mobile */
  #index .tab-content { margin-top: 0; }

  /* Rangée slider vide sur mobile : elle ne doit laisser aucune hauteur */
  #index #slider_row {
    margin-top: 0;
    margin-bottom: 0;
  }
  #index #top_column {
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  #index #center_column h1 {
    margin: 4px 0 12px;
    font-size: 23px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -.015em;
    color: #1E2038;
    text-wrap: balance;
  }
  #index #center_column h1::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    margin: 0 0 10px;
    border-radius: 2px;
    background: var(--dfh-magenta);
  }
}

/* Écrans très étroits : on sacrifie le numéro plutôt que les icônes */
@media (max-width: 359px) {
  header .nav .shop-phone,
  header .nav .shop-phone.is_logged { display: none !important; }
}