/* ==========================================================================
   Nantes Ortho - Widgets boutique
   Reproduit a l'identique les patterns de demo-boutique/output/.
   ========================================================================== */

/* Reset minimal pour les widgets, sans casser le scope Elementor */
.nob-card,
.nob-search,
.nob-popsearch,
.nob-marquee {
    box-sizing: border-box;
}
.nob-card *,
.nob-search *,
.nob-popsearch *,
.nob-marquee * {
    box-sizing: inherit;
}

/* ==========================================================================
   1. CARD RECTANGLE  (= .cat-card du demo)
   ========================================================================== */
.nob-card {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px;
    background: #fff;
    border: 1px solid #ECECEF;
    border-radius: 12px;
    text-decoration: none !important;
    color: inherit;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
a.nob-card { color: inherit; }
.nob-card--hover-lift:hover { transform: translateY(-2px); }
/* L'ombre au hover est posee par Group_Control_Box_Shadow (selector :hover). */

.nob-card__img {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #F5F5F7;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* !important : neutralise piege theme WP qui pose img { max-width:100%; height:auto !important } */
.nob-card__img img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block;
}
.nob-card__placeholder {
    font-size: 28px;
    color: #B10000;
    opacity: .3;
    font-weight: 300;
    line-height: 1;
}
.nob-card__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.nob-card__top {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 2px;
    color: #0F1419;
}
.nob-card__bottom {
    font-size: 11.5px;
    color: #6B6B70;
    line-height: 1.3;
}

/* Mode placeholder "a creer" */
.nob-card--todo { opacity: .85; border-style: dashed; }
.nob-card--todo .nob-card__img {
    background: #FDF6F6;
    border: 1px dashed #F0D4D6;
}
.nob-card--todo .nob-card__placeholder { opacity: .5; font-size: 36px; }
.nob-card--todo:hover { opacity: 1; }

/* Etat "vide en editor" : message visible pour que l'user comprenne que le widget existe.
   Note: PAS de pointer-events:none ici, sinon le clic Elementor pour selectionner le widget
   ne remonte pas et l'utilisateur ne peut pas le configurer. */
.nob-card--editor-empty {
    border: 2px dashed #C5C8CC !important;
    background: #FAFBFC !important;
}
.nob-card--editor-empty .nob-card__img {
    background: #ECEEF1;
    width: 64px;
    height: 64px;
    border-radius: 8px;
}
.nob-card--editor-empty .nob-card__placeholder {
    color: #9CA3AF;
    font-size: 28px;
    font-weight: 400;
}
.nob-card--editor-empty .nob-card__top {
    color: #6B7280 !important;
    font-weight: 500 !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
}

/* ==========================================================================
   2. SEARCH BAR  (= .shop-search du demo)
   ========================================================================== */
.nob-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 22px;
    background: #fff;
    border: 2px solid #E6E6E8;
    border-radius: 100px;
    box-shadow: 0 6px 24px rgba(0,0,0,.06);
    transition: border-color .2s ease, box-shadow .2s ease;
    max-width: 100%;
}
.nob-search:focus-within {
    border-color: #B10000;
    box-shadow: 0 6px 24px rgba(177, 0, 0, .12);
}
.nob-search__icon {
    display: flex;
    align-items: center;
    color: #888;
    flex-shrink: 0;
}
.nob-search__icon svg { display: block; }
.nob-search__input {
    flex: 1;
    /* !important : kill la bordure default du theme WP. Les controls Elementor
       "Bordure interne du champ" permettent d'AJOUTER une bordure custom
       (et utilisent !important pour gagner contre cette regle). */
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 13px 8px;
    font-size: 15px;
    font-family: inherit;
    background: transparent !important;
    min-width: 0;
    color: #0F1419;
}
.nob-search__input::placeholder { color: #9CA3AF; }
.nob-search__btn {
    padding: 13px 24px;
    background: #B10000;
    color: #fff;
    border: 0;
    border-radius: 100px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s ease;
    white-space: nowrap;
    font-family: inherit;
}
.nob-search__btn:hover { background: #8B0000; }

/* ==========================================================================
   3. POPULAR SEARCHES  (= .shop-search-suggestions du demo)
   ========================================================================== */
.nob-popsearch {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    color: #5A6473;
}
.nob-popsearch__prefix {
    color: #5A6473;
    font-size: 13px;
    margin-right: 4px;
}
.nob-popsearch__pill {
    display: inline-flex;
    align-items: center;
    color: #B10000;
    font-weight: 500;
    padding: 4px 12px;
    border: 1px solid #F0D4D6;
    border-radius: 100px;
    background: #fff;
    text-decoration: none !important;
    font-size: 13px;
    line-height: 1.4;
    transition: all .15s ease;
}
.nob-popsearch__pill:hover {
    background: #B10000;
    color: #fff;
    border-color: #B10000;
}

/* ----- Layout mobile (<= 720px) : prefix centre + grille 2 colonnes ----- */
@media (max-width: 720px) {
    .nob-popsearch {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        align-items: stretch !important;
    }
    .nob-popsearch__prefix {
        grid-column: 1 / -1 !important;
        text-align: center !important;
        margin: 0 0 4px !important;
    }
    .nob-popsearch__pill {
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   4. IMAGE MARQUEE  (= .shop-hero-carousel + .shop-hero-track du demo)
   ========================================================================== */
.nob-marquee {
    position: relative;
    overflow: hidden;
    height: 420px;
}
.nob-marquee--empty {
    height: auto;
    padding: 40px 16px;
    text-align: center;
    color: #9CA3AF;
    background: #F5F5F7;
    border-radius: 16px;
}
.nob-marquee--fade {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.nob-marquee--horizontal.nob-marquee--fade {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

/* Track = conteneur des colonnes (pas anime lui-meme).
   Chaque colonne s'anime independamment -> robuste face au nombre d'images
   et aux aspect-ratios variables. */
.nob-marquee__track { --nob-marquee-duration: 40s; }

.nob-marquee--vertical .nob-marquee__track {
    display: flex;
    gap: 14px;
    height: 100%;
    align-items: flex-start;
}
.nob-marquee--vertical .nob-marquee__col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    will-change: transform;
}

.nob-marquee--horizontal .nob-marquee__track {
    display: flex;
    height: 100%;
}
.nob-marquee--horizontal .nob-marquee__col {
    display: flex;
    flex-direction: row;
    gap: 14px;
    height: 100%;
    flex-shrink: 0;
    will-change: transform;
}
.nob-marquee--horizontal .nob-marquee__img {
    height: 100%;
    width: auto;
    aspect-ratio: auto;
    flex-shrink: 0;
}

/* Animations appliquees sur les colonnes (pas le track) */
.nob-marquee--dir-up .nob-marquee__col    { animation: nob-marquee-up    var(--nob-marquee-duration) linear infinite; }
.nob-marquee--dir-down .nob-marquee__col  { animation: nob-marquee-down  var(--nob-marquee-duration) linear infinite; }
.nob-marquee--dir-left .nob-marquee__col  { animation: nob-marquee-left  var(--nob-marquee-duration) linear infinite; }
.nob-marquee--dir-right .nob-marquee__col { animation: nob-marquee-right var(--nob-marquee-duration) linear infinite; }

.nob-marquee--pause-hover:hover .nob-marquee__col { animation-play-state: paused; }

/* Effet alterne : colonnes paires defilent dans le sens inverse (et un decalage
   de phase pour eviter les images alignees horizontalement). */
.nob-marquee--alt.nob-marquee--vertical .nob-marquee__col:nth-child(even) {
    animation-direction: reverse;
}
.nob-marquee--alt.nob-marquee--vertical .nob-marquee__col:nth-child(3n) {
    animation-delay: calc( var(--nob-marquee-duration) * -0.33 );
}

/* Images - !important : neutralise piege theme WP (max-width:100%; height:auto !important)
 * Note : si un plugin WebP (ShortPixel/EWWW/WebP Express) wrap nos <img> dans
 * un <picture>, les classes restent sur <picture> et l'<img> interne n'a aucun
 * style -> width:0 height:0 -> images invisibles. On cible donc AUSSI l'img
 * interne du picture. */
.nob-marquee__img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: cover !important;
    max-width: none !important;
    border-radius: 16px;
    background: #F5F5F7;
    display: block;
    overflow: hidden;
}
/* Cas plugin WebP : <picture class="...img"><source><img></picture>
 * L'img interne doit remplir le picture parent et hériter du radius. */
.nob-marquee__img img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    display: block;
    border-radius: inherit;
}
.nob-marquee--shadow .nob-marquee__img { box-shadow: 0 6px 18px rgba(0,0,0,.05); }

/* Keyframes : on translate de -50% car chaque colonne est dupliquee 2x */
@keyframes nob-marquee-up {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}
@keyframes nob-marquee-down {
    0%   { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}
@keyframes nob-marquee-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes nob-marquee-right {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .nob-marquee__col { animation: none !important; }
}

/* Responsive */
@media (max-width: 720px) {
    .nob-marquee { height: 320px; }
    .nob-search__btn { padding: 12px 18px; font-size: 13px; }
    .nob-search__input { font-size: 14px; padding: 12px 6px; }

    /* Card rectangle : empilement vertical sur mobile.
       Image en haut (centree, plus grande), texte en dessous (centre). */
    .nob-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }
    .nob-card__img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 10;
        max-width: 320px;
    }
    .nob-card__img img {
        width: 100% !important;
        height: 100% !important;
    }
    .nob-card__text {
        align-items: center;
    }
}

/* ============================================================
   Live search dropdown (v1.6.14) — affiche sous le widget search
   ============================================================ */
.nob-search-wrap { position: relative; }
.nob-search__results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border: 1px solid #E5E5EA;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
    max-height: 520px;
    overflow-y: auto;
    padding: 8px 0;
}
.nob-search__results[hidden] { display: none !important; }
.nob-sr-section + .nob-sr-section { border-top: 1px solid #F0F0F2; margin-top: 4px; padding-top: 4px; }
.nob-sr-head {
    font-size: 10.5px;
    font-weight: 700;
    color: #6B6B70;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 16px 4px;
}
.nob-sr-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    color: #1F2937;
    text-decoration: none;
    transition: background 0.12s ease;
}
.nob-sr-item:hover { background: #F6F7F7; }
.nob-sr-thumb {
    width: 36px; height: 36px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #F6F7F7;
    border-radius: 6px;
    color: #D0282F;
    overflow: hidden;
}
.nob-sr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nob-sr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nob-sr-title { font-size: 14px; font-weight: 500; color: #1F2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nob-sr-sub   { font-size: 12px; color: #6B6B70; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nob-sr-item mark { background: #FFF3B0; color: inherit; padding: 0 2px; border-radius: 2px; }
.nob-sr-empty { padding: 16px; color: #6B6B70; text-align: center; font-size: 13.5px; }