/* ── Road2Luxe — search-bar.css ─────────────────────────────
   Composant barre de recherche : hero homepage + archive /voyages/.
   Portage direct depuis [r2l_search_form] shortcode Divi.
   'DM Sans' → 'Satoshi' (self-hosted, RGPD).
   ──────────────────────────────────────────────────────────── */


/* ── Variables + wrapper ─────────────────────────────────────── */

.r2l-sig {
    --orange:      #F55F2A;
    --orange-dark: #D94E1E;
    --ink:         #2C282A;
    --sand:        #F7F3EE;
    --terre:       #8B7355;
    --muted:       #9A9088;
    --line:        rgba(139,115,85,.20);
    --ease:        cubic-bezier(.32,.72,0,1);
    width:         100%;
    max-width:     1340px;
    margin:        0 auto;
    font-family:   'Satoshi', system-ui, sans-serif;
    color:         var(--ink);
}
.r2l-sig * {
    box-sizing:  border-box;
    font-family: 'Satoshi', system-ui, sans-serif;
}


/* ── Barre principale ────────────────────────────────────────── */

.r2l-sig .bar {
    display:       flex;
    background:    #fff;
    border:        1px solid var(--line);
    border-radius: 18px;
    box-shadow:
        0 1px 0 rgba(255,255,255,.6) inset,
        0 20px 50px -24px rgba(44,40,42,.32),
        0 4px 14px -8px rgba(44,40,42,.12);
    overflow:      visible; /* allow custom dropdown panels to overflow */
    animation:     r2lBarUp .7s var(--ease) both;
}

@keyframes r2lBarUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}


/* ── Champ ───────────────────────────────────────────────────── */

.r2l-sig .fld {
    position:  relative;
    flex:      1;
    min-width: 0; /* permet le shrink flex sous la min-content size du browser */
    padding:   18px 26px 20px;
    transition: background .3s var(--ease);
    cursor:    pointer;
}
.r2l-sig .fld:first-child {
    flex:                    1.6; /* destination : placeholder plus long */
    border-radius:           17px 0 0 17px; /* remplace le overflow:hidden du .bar */
}
.r2l-sig .cta {
    border-radius: 0 17px 17px 0;
    overflow:      hidden; /* clip le bouton dans les coins */
}
.r2l-sig .fld:hover { background: var(--sand); }

/* Pas de séparateur entre champs : barre blanche continue, zéro trait sombre. */

/* Underline charbon animé au focus/hover (orange = CTA uniquement) */
.r2l-sig .fld::after {
    content:          '';
    position:         absolute;
    left:             26px;
    right:            26px;
    bottom:           12px;
    height:           2px;
    background:       var(--ink);
    transform:        scaleX(0);
    transform-origin: center;
    transition:       transform .4s var(--ease);
    border-radius:    2px;
}
.r2l-sig .fld:focus-within::after,
.r2l-sig .fld:hover::after,
.r2l-sig .fld.r2l-dd--open::after { transform: scaleX(1); }


/* ── Label uppercase avec pastille ──────────────────────────── */

.r2l-sig .lbl {
    display:        flex;
    align-items:    center;
    gap:            7px;
    font:           700 10.5px/1 'Satoshi', sans-serif;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin-bottom:  8px;
    pointer-events: none;
    color:          var(--ink);
    transition:     color .25s;
}
/* Puce legacy (variante compacte shortcode) — recolorée charbon */
.r2l-sig .dot {
    width:         5px;
    height:        5px;
    border-radius: 50%;
    background:    var(--ink);
    flex:          none;
}
/* Picto Phosphor du label (map-pin / clock / calendar) — charbon, jamais orange */
.r2l-sig .lbl .r2l-sig__lbl-ic {
    width:  13px;
    height: 13px;
    color:  var(--ink);
    flex:   none;
    opacity: .85;
}
.r2l-sig .fld:focus-within .lbl,
.r2l-sig .fld.r2l-dd--open .lbl { color: var(--ink); }


/* ── Selects et input month ──────────────────────────────────── */

.r2l-sig select,
.r2l-sig input {
    width:              100%;
    border:             0;
    outline:            0;
    background:         transparent;
    padding:            0;
    padding-right:      30px; /* réserve la place pour l'icône .ic */
    cursor:             pointer;
    font:               600 17px/1.3 'Satoshi', Georgia, serif;
    color:              inherit;
    -webkit-appearance: none;
    appearance:         none;
}

.r2l-sig select.r2l-empty,
.r2l-sig input.r2l-empty {
    font-weight: 500;
    color:       var(--muted);
}

.r2l-sig select option {
    font-family: 'Satoshi', sans-serif;
    font-size:   14px;
    color:       #2C282A;
}

/* Masque le picker natif du mois — l'icône SVG sert de déclencheur */
.r2l-sig input[type="month"]::-webkit-calendar-picker-indicator {
    opacity:  0;
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    cursor:   pointer;
}


/* ── Icône décorative (chevron / calendrier) ─────────────────── */

.r2l-sig .ic {
    position:       absolute;
    right:          22px;
    top:            50%;
    transform:      translateY(-50%);
    width:          15px;
    height:         15px;
    color:          var(--terre);
    opacity:        .5;
    pointer-events: none;
    transition:     opacity .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.r2l-sig .fld:focus-within .ic,
.r2l-sig .fld.r2l-dd--open .ic {
    opacity:   1;
    color:     var(--ink);
    transform: translateY(-50%) rotate(180deg);
}


/* ── CTA ─────────────────────────────────────────────────────── */

.r2l-sig .cta {
    display:     flex;
    align-items: center;
    padding:     8px;
}

.r2l-sig .btn {
    height:        100%;
    display:       inline-flex;
    align-items:   center;
    gap:           12px;
    background:    var(--orange);
    color:         #fff;
    border:        0;
    border-radius: 12px;
    padding:       0 26px;
    font:          700 15px/1 'Satoshi', sans-serif;
    cursor:        pointer;
    white-space:   nowrap;
    box-shadow:    0 8px 20px -6px rgba(245,95,42,.55);
    transition:    background .3s, transform .25s var(--ease), box-shadow .3s;
}
.r2l-sig .btn:hover {
    background: var(--orange-dark);
    transform:  translateY(-1px);
    box-shadow: 0 12px 26px -6px rgba(245,95,42,.6);
}
.r2l-sig .btn:active { transform: translateY(0) scale(.985); }

.r2l-sig .chip {
    width:           30px;
    height:          30px;
    border-radius:   8px;
    background:      rgba(255,255,255,.18);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex:            none;
    transition:      transform .3s var(--ease);
}
.r2l-sig .btn:hover .chip { transform: translateX(3px); }


/* ── Focus visible (accessibilité) ──────────────────────────── */

.r2l-sig select:focus-visible,
.r2l-sig input:focus-visible {
    outline:        2px solid var(--ink);
    outline-offset: 4px;
    border-radius:  6px;
}
/* Le CTA garde son anneau Flamingo (c'est l'action) */
.r2l-sig .btn:focus-visible {
    outline:        2px solid var(--orange);
    outline-offset: 3px;
    border-radius:  10px;
}


/* ── Custom dropdown (remplace le <select> natif) ────────────── */

/* (Le <select> natif est masqué par main.js/buildSelectDd via style inline
   quand JS est actif ; sans JS il reste visible et soumis.) */

/* Trigger : remplace visuellement le select */
.r2l-sig .r2l-dd-trigger {
    display:     flex;
    align-items: center;
    cursor:      pointer;
    user-select: none;
    outline:     none;
    min-height:  21px;
}

.r2l-sig .r2l-dd-val {
    font:          600 16px/1.28 'Satoshi', Georgia, serif;
    color:         var(--ink);
    flex:          1;
    /* Wrap sur 2 lignes max si le texte ne rentre pas (au lieu de tronquer) */
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp:         2;
    -webkit-box-orient: vertical;
    overflow:      hidden;
    padding-right: 30px; /* espace pour l'icône .ic */
}

.r2l-sig .r2l-dd-val.r2l-empty {
    font-weight: 500;
    color:       var(--muted);
}

/* Focus ring sur le trigger (a11y) */
.r2l-sig .r2l-dd-trigger:focus-visible {
    outline:        2px solid var(--orange);
    outline-offset: 3px;
    border-radius:  6px;
}

/* Panel */
.r2l-sig .r2l-dd-panel {
    position:       absolute;
    top:            calc(100% + 8px);
    left:           0;
    right:          0;
    min-width:      230px;
    z-index:        400;
    background:     #fff;
    border:         1px solid var(--line);
    border-radius:  14px;
    box-shadow:
        0 2px 0 rgba(255,255,255,.7) inset,
        0 24px 56px -12px rgba(44,40,42,.22),
        0 4px 12px  -4px rgba(44,40,42,.10);
    max-height:     320px;
    overflow-y:     auto;
    padding:        6px 0;
    opacity:        0;
    transform:      translateY(-6px);
    pointer-events: none;
    transition:     opacity .2s var(--ease), transform .2s var(--ease);
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}

.r2l-sig .fld.r2l-dd--open .r2l-dd-panel {
    opacity:        1;
    transform:      translateY(0);
    pointer-events: auto;
}

/* Fond du champ ouvert */
.r2l-sig .fld.r2l-dd--open { background: var(--sand); }

/* Entête de groupe (optgroup) */
.r2l-sig .r2l-dd-group {
    padding:        10px 16px 4px;
    font:           700 9.5px/1 'Satoshi', sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color:          var(--terre);
    pointer-events: none;
    border-top:     1px solid var(--line);
    margin-top:     4px;
}
.r2l-sig .r2l-dd-group:first-child {
    border-top: none;
    margin-top: 0;
}

/* Items */
.r2l-sig .r2l-dd-item {
    padding:       9px 16px;
    font:          500 15px/1.3 'Satoshi', sans-serif;
    color:         var(--ink);
    cursor:        pointer;
    border-radius: 8px;
    margin:        0 5px;
    transition:    background .15s;
    outline:       none;
}
.r2l-sig .r2l-dd-item:hover,
.r2l-sig .r2l-dd-item:focus { background: var(--sand); }

.r2l-sig .r2l-dd-item--selected {
    color:       var(--ink);
    font-weight: 600;
}

.r2l-sig .r2l-dd-item--disabled {
    opacity:        .38;
    cursor:         default;
    pointer-events: none;
}


/* ══════════════════════════════════════════════════════════════
   VARIANTE HERO — barre sur une seule ligne, largeur contenue
   (le wrap 2 lignes est géré par champ via .r2l-dd-val)
   ══════════════════════════════════════════════════════════════ */

.r2l-sig--hero { max-width: 1000px; }

/* Champs resserrés + valeur légèrement réduite : les libellés Durée/Période
   (« Grand voyage · ≥ 10 j »…) tiennent sur une ligne en desktop large.
   Destination était trop large → on lui retire de la place au profit des
   deux autres. Le wrap 2 lignes reste dispo si un texte plus long est choisi. */
.r2l-sig--hero .fld        { padding-left: 20px; padding-right: 20px; }
.r2l-sig--hero .fld:first-child { flex: 1.15; }
.r2l-sig--hero .r2l-dd-val { font-size: 15.5px; padding-right: 26px; }
.r2l-sig--hero .fld::after { left: 20px; right: 20px; }


/* ── Mobile : empilement fluide, barre blanche continue, zéro séparateur ── */

@media (max-width: 820px) {
    .r2l-sig .bar             { flex-wrap: wrap; border-radius: 14px; }
    .r2l-sig .fld             { flex: 1 1 100%; }
    .r2l-sig .fld:first-child { border-radius: 14px 14px 0 0; }
    .r2l-sig .cta             { flex: 1 1 100%; border-radius: 0 0 14px 14px; }
    .r2l-sig .btn             { width: 100%; justify-content: center; height: 52px; border-radius: 0 0 14px 14px; }
    .r2l-sig .r2l-dd-panel    { max-height: 240px; }
}