/**
 * Barre de recherche produit DGS (en-tête) — maquette Figma 77-4969.
 * Pilule grise 356px + liste déroulante des résultats.
 */
.dgs-search {
    --dgs-blue: #0062d8;
    --dgs-deep: #00356d;
    --dgs-ink: #272727;
    --dgs-grey: #f5f5f5;
    --dgs-line: #e4e8ef;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 356px;
    max-width: 100%;
    height: 44px;
    padding: 10px 18px;
    background: var(--dgs-grey);
    border-radius: 100px;
    box-sizing: border-box;
    font-family: "Plus Jakarta Sans", sans-serif;
}
.dgs-search__icon {
    display: flex;
    flex: none;
    width: 24px;
    height: 24px;
    color: var(--dgs-deep);
}
.dgs-search__icon svg { width: 100%; height: 100%; }

.dgs-search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    color: var(--dgs-ink);
}
.dgs-search__input::placeholder { color: #8a93a3; }
.dgs-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Spinner de chargement discret */
.dgs-search.is-loading .dgs-search__icon::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid var(--dgs-line);
    border-top-color: var(--dgs-blue);
    border-radius: 50%;
    animation: dgs-spin 0.6s linear infinite;
}
@keyframes dgs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .dgs-search.is-loading .dgs-search__icon::after { animation: none; }
}

/* Liste déroulante */
.dgs-search__panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 1200;
    min-width: 380px;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--dgs-line);
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(0, 32, 80, 0.16);
}

.dgs-sr {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--dgs-ink);
}
.dgs-sr:hover,
.dgs-sr.is-active { background: var(--dgs-grey); }

.dgs-sr__thumb {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--dgs-line);
    overflow: hidden;
}
.dgs-sr__thumb img { width: 100%; height: 100%; object-fit: contain; }

.dgs-sr__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dgs-sr__title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--dgs-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dgs-sr__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7480;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dgs-sr__meta > * { flex: none; }
.dgs-sr__brand { color: var(--dgs-deep); font-weight: 600; }
.dgs-sr__ref { font-variant-numeric: tabular-nums; }
.dgs-sr__dot { width: 3px; height: 3px; border-radius: 50%; background: #c3cad4; }
.dgs-sr__price {
    flex: none;
    font-size: 15px;
    font-weight: 800;
    color: var(--dgs-blue);
    white-space: nowrap;
}

.dgs-search__empty {
    margin: 0;
    padding: 18px 14px;
    text-align: center;
    font-size: 14px;
    color: #6b7480;
}
.dgs-search__all {
    display: block;
    margin-top: 4px;
    padding: 12px 14px;
    border-top: 1px solid var(--dgs-line);
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--dgs-blue);
    text-decoration: none;
}
.dgs-search__all:hover { text-decoration: underline; }

@media (max-width: 900px) {
    .dgs-search { width: 100%; }
    .dgs-search__panel { min-width: 0; }
}

/* ==========================================================================
   Barre supérieure de l'en-tête : info | recherche | compte + panier
   (maquette 77-4969). Spécificité élevée pour primer sur le thème (style.css
   régénéré depuis LESS).
   ========================================================================== */
body header .entete { height: auto; min-height: 47px; }
body header .entete .entete__bar {
    gap: 30px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    padding: 6px 0;
}
body header .entete .entete__left {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
}
body header .entete .entete__left a.fb { margin-left: 0; }
/* Sous 1600px, la longue adresse cède la place à la recherche + compte/panier. */
@media (max-width: 1600px) {
    body header .entete .entete__left a.entete__addr { display: none; }
}
@media (max-width: 1400px) {
    body header .entete .entete__bar { gap: 20px; }
}

body header .entete .dgs-search { flex: none; }
body header .entete .dgs-search a { margin: 0; }

body header .entete .entete__user {
    display: flex;
    align-items: center;
    gap: 25px;
    flex: none;
    height: 44px;
    padding: 8px 15px;
    background: #f5f5f5;
    border-radius: 100px;
}
body header .entete .entete__user a {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #0d4397;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}
body header .entete .entete__user a:hover { color: #0062d8; }
body header .entete .entete__user a svg { margin: 0; width: 24px; height: 24px; }
body header .entete .entete__cart { gap: 6px; }
body header .entete .entete__cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    background: #61dbff;
    border-radius: 100px;
    color: #0d4397;
    font-size: 13px;
    font-weight: 700;
}
@media (max-width: 1400px) {
    body header .entete .entete__account span { display: none; }
}
@media (max-width: 1150px) {
    body header .entete .dgs-search { display: none; }
}

/* ==========================================================================
   Barre de menu (logo + navigation + boutons) — maquette Figma 71-2651.
   Barre grise arrondie (#F5F5F5, radius 30px, padding 15px 40px), les 3
   boutons alignés sur UNE seule ligne. Spécificité élevée pour primer sur
   le thème (style.css régénéré depuis LESS + variable --couleur-fond inline).
   ========================================================================== */
@media (min-width: 1200px) {
    body header .corps {
        background: #f5f5f5 !important;
        border-radius: 30px;
        padding: 15px 30px;
        height: auto !important;
        min-height: 100px;
    }
    /* Hauteur auto pour que la barre grandisse si les boutons passent à la
       ligne aux largeurs intermédiaires (au lieu de déborder de la barre).
       !important pour primer sur l'utilitaire Bootstrap .h-100. */
    body header .corps > .h-100,
    body header .corps > .h-100 > .row { height: auto !important; }
    /* Rangée principale : logo/nav à gauche, boutons à droite. Sur une ligne
       quand la largeur le permet ; sinon les boutons passent proprement à la
       ligne (plutôt que de chevaucher la navigation). */
    body header .corps > .h-100 > .row {
        flex-wrap: wrap;
        gap: 16px 20px;
        justify-content: space-between;
        align-items: center;
    }
    body header .corps > .h-100 > .row > .col-md-9 {
        flex: 0 1 auto;
        width: auto;
        max-width: none;
        min-width: 0;
        padding: 0;
    }
    /* Logo + navigation : groupés à gauche (Figma), sur une ligne.
       !important pour primer sur l'utilitaire Bootstrap .justify-content-between. */
    body header .corps > .h-100 > .row > .col-md-9 > .row {
        width: 100%;
        flex-wrap: nowrap;
        gap: 28px;
        justify-content: flex-start !important;
    }
    body header .corps > .h-100 > .row > .col-md-3 {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        padding: 0;
        margin-left: auto;
    }
    /* Logo à la taille Figma (118px). */
    body header .corps .logo { flex: none; padding: 0; }
    /* Le logo (.webp) a un fond blanc : on le fond dans la barre grise. */
    body header .corps .logo img { width: 118px; height: auto; mix-blend-mode: multiply; }
    /* Navigation : une seule ligne, items resserrés, largeur naturelle
       (pas de compression qui ferait chevaucher les libellés). */
    body header .corps .menu-principal { flex: 0 0 auto; padding: 0; }
    body header .corps .menu-principal ul.menu {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 14px;
        margin: 0;
        padding: 0;
    }
    body header .corps .menu-principal ul.menu > li { flex: none; margin: 0 !important; white-space: nowrap; }
    body header .corps .menu-principal ul.menu > li > a { white-space: nowrap; }
    /* Groupe des 3 boutons : une seule ligne, gap 10px (Figma). */
    body header .corps .col-md-3 > .row {
        flex-wrap: nowrap;
        gap: 10px;
        width: auto;
        margin: 0;
    }
    body header .corps .bouton-mise-en-avant {
        width: auto;
        padding: 0;
    }
    body header .corps .bouton-mise-en-avant a {
        white-space: nowrap;
        border-radius: 100px;
        padding-left: 20px;
        padding-right: 20px;
    }
}
/* Info bar : gras Figma 700 (le thème force parfois 900). */
body header .entete .entete__left a { font-weight: 700; }

/* --------------------------------------------------------------------------
   Outils dans le menu mobile (recherche + compte/panier) — l'entête complète
   est masquée < 1200px par le thème, on rend donc ces outils accessibles en
   haut du menu burger. Masqués en desktop (ils vivent dans le <nav> horizontal).
   -------------------------------------------------------------------------- */
.dgs-mobile-tools { display: none; }

@media (max-width: 1199px) {
    body header .corps .menu-principal nav .dgs-mobile-tools {
        display: block;
        padding: 0 15px 22px;
        margin-bottom: 6px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }
    body header .corps .menu-principal nav .dgs-mobile-tools .dgs-search {
        width: 100%;
    }
    body header .corps .menu-principal nav .dgs-mobile-tools__links {
        display: flex;
        gap: 12px;
        margin-top: 14px;
    }
    body header .corps .menu-principal nav .dgs-mobile-tools__links a {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 46px;
        padding: 0 14px;
        margin: 0;
        background: #f5f5f5;
        border-radius: 100px;
        color: #00356d;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
    }
    body header .corps .menu-principal nav .dgs-mobile-tools__links a svg {
        flex: none;
        width: 22px;
        height: 22px;
    }
    body header .corps .menu-principal nav .dgs-mobile-tools__count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        background: #61dbff;
        border-radius: 100px;
        color: #0d4397;
        font-size: 12px;
        font-weight: 700;
    }
    /* Liste de résultats : sous le champ, sur toute la largeur du bloc
       (absolute pour ne pas casser la rangée flex de la barre de recherche). */
    body header .corps .menu-principal nav .dgs-search {
        position: relative;
    }
    body header .corps .menu-principal nav .dgs-search__panel {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        min-width: 0;
        max-height: 60vh;
    }
}