/* ============================================================
   PAGE « Envie » par thème (route experience_index → index.html.twig)
   Refonte design v2 — pixel-perfect, mobile-first.
   Figma desktop 904:3487 / mobile 904:3726.

   Shell v2 (header overlay blanc-sur-image, menu, footer) fourni par
   basev2.html.twig. Modules réutilisés (NON stylés ici) :
     - header sticky : v2/css/bloc/topbar.css (#header-transparant)
     - blog « Nos articles du blog » + bouton : v2/package/css/blog.css
       (+ v2/package/css/base.css pour .btn / .heading-* / .label-peta)
     - footer : v2/css/footer/footer.css
   Ce fichier stylise UNIQUEMENT les blocs propres à la page : hero,
   édito (sauge), filtres (pastilles), cartes suggestions, points
   marquants (carrousel mobile) et le visuel parallax.

   Convention gouttières (cf. layout v2) : contenu centré, largeur max
   1166px ; gouttière 30px < 1100px, 100px ≥ 1100px. Exposée en var
   --expd-inner et réutilisée par chaque bloc.
   ============================================================ */

.experience-detail-page {
    --expd-inner: min(1166px, calc(100% - 60px));   /* 30px de gouttière */
}
.experience-detail-page main { background: #efece9; }

/* Le bloc édito/filtre suit immédiatement le hero : on neutralise toute
   marge résiduelle de <main>. */
.experience-detail-page main > * { margin: 0; }

/* ============================================================
   1. HERO — image plein cadre (thème). Le header blanc de basev2
   (header.header-top, position:absolute) se superpose par-dessus.
   ============================================================ */
.expd-hero {
    position: relative;
    width: 100%;
    height: 700px;                       /* Figma mobile 904:3738 */
    background: #9f9a7c center / cover no-repeat;   /* fallback sauge */
}
/* Dégradé sombre en haut (lisibilité du header blanc) — « layer ombre »
   Figma (rgba(0,0,0,.2) → transparent). */
.expd-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 326px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

/* ============================================================
   2. ÉDITO — fond sauge : titre (thème) + baseline + description.
   Mobile : tout centré, empilé. Desktop : titre centré puis 2 colonnes
   (baseline 362 / description 664, gouttière 140).
   ============================================================ */
.expd-edito {
    background: #9f9a7c;
    color: #fff;
    padding: 60px 0;
}
.expd-edito__inner {
    width: var(--expd-inner);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
    text-align: center;
}
.expd-edito__title {
    margin: 0;
    font-family: 'Asul', sans-serif;
    font-weight: 400;
    font-size: 50px;
    line-height: 1;
    color: #fff;
}
.expd-edito__cols {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.expd-edito__baseline {
    margin: 0;
    font-family: 'Asul', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 28px;
    color: #615d48;                      /* sauge-dark (Figma 904:3493) */
}
.expd-edito__desc,
.expd-edito__desc p {
    margin: 0;
    font-family: 'Lexend', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 24px;
    color: #fff;
}

/* ============================================================
   3. FILTRES — pastilles mois + continents (pilotent la recherche AJAX).
   Mobile : chaque rangée défile horizontalement (contenu > écran).
   Desktop : rangée pleine largeur, réparties (space-between).
   ============================================================ */
.expd-filtre {
    background: #efece9;
    border-bottom: 0.7px solid #c3c3c3;
    padding: 30px 0;
}
.expd-filtre__inner {
    width: var(--expd-inner);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.expd-filtre__label {
    margin: 0;
    font-family: 'Lexend Peta', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    text-transform: uppercase;
    color: #0f1b24;
}
/* Rangée de pastilles = carrousel élastique (finding.js, initElasticCarousel).
   La rangée est le VIEWPORT (overflow caché) ; .expd-filtre__track est la piste
   translatée (drag rubber-band ½ écran + snap). */
.expd-filtre__row {
    overflow: hidden;
    cursor: grab;
    padding-bottom: 2px;                 /* évite de rogner le bas des pastilles */
}
.expd-filtre__row.is-static { cursor: default; }              /* rien à défiler */
.expd-filtre__row.is-dragging { cursor: grabbing; user-select: none; }
.expd-filtre__row.is-dragging a { cursor: grabbing; }
.expd-filtre__track {
    display: flex;
    gap: 15px;
    width: max-content;
    min-width: 100%;                  /* occupe toute la largeur quand peu d'objets */
    justify-content: space-between;   /* répartis s'ils tiennent ; paquet au début s'ils débordent */
    will-change: transform;
}

/* Pastille (composant Figma CTA-outline-sauge) : contour sauge, arrondi
   plein, texte Lexend Deca 13px. Active → fond sauge, texte blanc. */
.expd-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 17px;
    border: 1px solid #9f9a7c;
    border-radius: 30.076px;
    background: transparent;
    color: #9f9a7c;
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
/* Hover = état sélectionné de la maquette (Figma 904:3495) : fond sauge plein,
   texte blanc (comme .active). Multi-sélection : plusieurs pastilles actives. */
.expd-pill:hover,
.expd-pill.active { background: #9f9a7c; color: #fff; border-color: #9f9a7c; }

/* ============================================================
   4. NOS SUGGESTIONS — grille de cartes packages (filtrées par thème).
   Cartes de largeur fixe 362px qui passent à la ligne (wrap), gap 40px.
   Le conteneur .suggest-block est la cible du remplacement AJAX
   (search_package) : la grille + le bouton « Afficher plus » sont émis
   par result.html.twig.
   ============================================================ */
.expd-suggestions {
    background: #efece9;
    padding: 40px 0;
}
.expd-suggestions__inner {
    width: var(--expd-inner);
    margin-inline: auto;
}
.expd-cards {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 40px;
}
.expd-card {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    text-decoration: none;
}
.expd-card--extra.is-hidden { display: none; }
.expd-card__media {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;                  /* carré (Figma 362×362 / 330×330) */
    border-radius: 10px;
    background: #999 center / cover no-repeat;
}
.expd-card__infos {
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: #0f1b24;
}
.expd-card__country {
    margin: 0;
    font-family: 'Lexend', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 24px;
    color: #0f1b24;
}
.expd-card__title {
    margin: 0;
    font-family: 'Asul', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
    color: #0f1b24;
    /* Hauteur fixe 2 lignes : quelle que soit la longueur du titre, la description
       (puis prix + Découvrir) démarre TOUJOURS au même niveau entre les cartes. */
    min-height: 52px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.expd-card__title a { color: inherit; text-decoration: none; }
.expd-card__desc {
    margin: 0;
    font-family: 'Lexend', sans-serif;
    font-weight: 300;
    font-size: 13px;
    line-height: 22px;
    color: #0f1b24;
    /* Hauteur fixe 3 lignes → « X jours à partir de Y » et « Découvrir » alignés. */
    min-height: 66px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.expd-card__price {
    margin: 0;
    font-family: 'Lexend', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 22px;
    color: #0f1b24;
}
.expd-card__link {
    align-self: flex-start;
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: #9f9a7c;
    text-decoration: underline;
    text-underline-position: from-font;
}

/* Bouton « Afficher plus » centré sous la grille. */
.expd-more {
    display: flex;
    justify-content: center;
    padding-top: 40px;
}

/* Bouton contour sauge réutilisable (CTA-outline-sauge Figma). */
.expd-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 17px;
    border: 1px solid #9f9a7c;
    border-radius: 30.076px;
    background: transparent;
    color: #9f9a7c;
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.expd-btn-outline:hover { background: #9f9a7c; color: #fff; }

/* Loader AJAX (remplace le contenu de .suggest-block pendant la requête). */
.expd-loader {
    display: flex;
    justify-content: center;
    padding: 40px 0;
    width: 100%;
}

/* ============================================================
   5. POINTS MARQUANTS — carte blanche : titre (titre2) + raisons
   numérotées (textePlusRdv). Mobile : carrousel 1 par 1 (flèches).
   Desktop : 4 colonnes réparties, titre aligné à gauche.
   ============================================================ */
.expd-points {
    background: #efece9;
    padding: 40px 0;
}
.expd-points__inner {
    width: var(--expd-inner);
    margin-inline: auto;
}
.expd-points__card {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 30px;
    background: #fff;
    border-radius: 20px;
}
.expd-points__title {
    margin: 0;
    font-family: 'Asul', sans-serif;
    font-weight: 400;
    font-size: 26px;
    line-height: 31px;
    color: #9f9a7c;
    text-align: center;
}
/* Piste : mobile = 1 raison visible à la fois, défilement horizontal
   avec accroche (scroll-snap). */
.expd-points__list {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.expd-points__list::-webkit-scrollbar { display: none; }
.expd-point {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}
.expd-point__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border: 1px solid #9f9a7c;
    border-radius: 50%;
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
    color: #9f9a7c;
}
.expd-point__text {
    margin: 0;
    font-family: 'Lexend', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 24px;
    color: #0f1b24;
}
/* Flèches (mobile uniquement) — navigation ‹ › sous les raisons. */
.expd-points__nav {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.expd-points__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.expd-points__arrow:disabled { opacity: 0.35; cursor: default; }

/* ============================================================
   6. VISUEL — bandeau image plein cadre (2e photo du thème).
   ============================================================ */
.expd-visuel {
    width: 100%;
    height: 480px;
    background: #9f9a7c center / cover no-repeat;
}

/* ============================================================
   7. BLOG (module partagé) — ajustements de gouttière/centrage propres
   à cette page (le module est conçu pour la page Trouvailles).
   ============================================================ */
.experience-detail-page .section-blog { background: #efece9; padding: 40px 0 0; }
.experience-detail-page .section-blog .container {
    width: var(--expd-inner);
    max-width: none;
    margin-inline: auto;
    padding: 0;
}
/* Bouton « Tous les articles » centré (maquette 904:3651). */
.experience-detail-page .section-blog .section-more {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 40px 0 20px;
}
/* Sous 1100px le carrousel blog déborde pleine largeur : on aligne la
   1re carte sur la gouttière 30px de la page. */
@media (max-width: 1099px) {
    .experience-detail-page .section-blog .blog-grid { padding-inline: 30px; }
}

/* ============================================================
   DESKTOP ≥ 1100px
   ============================================================ */
@media screen and (min-width: 1100px) {
    .experience-detail-page {
        --expd-inner: min(1166px, calc(100% - 200px));   /* gouttière 100px */
    }

    /* 0. Header — bouton « Demander un devis » sur UNE seule ligne (Figma 904:3520).
       Le bouton partagé .btn-quote_request (btn.css) n'a ni white-space:nowrap ni
       flex-shrink:0 ; dans la colonne droite (25fr) du header il rétrécit et
       « devis » passe à la ligne. On force le non-retour à la ligne + on élargit la
       colonne droite (grille symétrique 30/40/30 → tout tient, logo toujours centré),
       pour l'overlay (.header-top) ET le sticky (#header-transparant). */
    .experience-detail-page .header-top .btn-quote_request,
    .experience-detail-page #header-transparant .btn-quote_request {
        white-space: nowrap;
        flex-shrink: 0;
    }
    .experience-detail-page .header-top .topbar_top,
    .experience-detail-page #header-transparant .topbar_top {
        grid-template-columns: 30fr 40fr 30fr;
    }

    /* 1. Hero plus haut (Figma desktop 904:3488 = 768px). */
    .expd-hero { height: 768px; }

    /* 2. Édito — titre 70px centré, texte sur 2 colonnes. */
    .expd-edito { padding: 60px 0; }
    .expd-edito__inner { gap: 60px; }
    .expd-edito__title { font-size: 70px; }
    .expd-edito__cols {
        flex-direction: row;
        align-items: flex-start;
        gap: 140px;
        text-align: left;
    }
    .expd-edito__baseline {
        flex: 0 0 362px;
        font-size: 26px;
        line-height: 31px;
    }
    .expd-edito__desc { flex: 1 1 auto; }

    /* 3. Filtres — pastilles sur UNE seule ligne. La piste (.expd-filtre__track)
       les répartit sur toute la largeur quand elles tiennent (space-between) ;
       quand elles débordent, le carrousel élastique (finding.js) prend le relais :
       glisser pour défiler (rubber-band ½ écran + snap), pas de wrap. */
    .expd-filtre { padding: 40px 0; }
    .expd-filtre__inner { gap: 30px; }
    .expd-filtre__track { gap: 10px; }

    /* 4. Suggestions — cartes fixes 362px (3 par rangée à 1166px). */
    .expd-suggestions { padding: 60px 0 40px; }
    .expd-card { width: 362px; }

    /* 5. Points marquants « avantage » : réglé dans un @media dédié (min-width
       1110px) plus bas — la bascule desktop→mobile suit l'espace inter-colonnes
       (≥10px = desktop), pas le breakpoint 1100 des autres blocs. */

    /* 7. Blog — le module reprend sa grille 4 colonnes ; on garde juste
       le centrage du conteneur (défini plus haut via --expd-inner). */
    .experience-detail-page .section-blog { padding: 40px 0 0; }
}

/* ============================================================
   4bis. NOS SUGGESTIONS — design/responsive/animation/comportement du bloc
   « Nos voyages en … » de la page Trouvailles (source : v2/package/css/
   suggestions.css + règles .suggestion-* de v2/finding/css/finding.css).
   suggestions.css est chargé par la page (voir stylesheets) et fournit
   .cards-scroll-wrap / .cards-grid(--3) / .voyage-card (grille 3 col ≥769px,
   1 col mobile ; image 330→362px arrondie). On ne recopie ICI que les règles
   propres au bloc, absentes de suggestions.css : hauteurs figées titre+desc
   (2 lignes → prix & « Découvrir » alignés), zoom image au survol, lien étiré.
   « Découvrir » = .link-decouvrir (base.css, sauge souligné).
   Émis par result.html.twig dans .suggest-block : les 6 PREMIERS packages
   (toujours), sans « Afficher plus ».
   ============================================================ */
/* Zoom léger de l'image au survol (contenu par overflow:hidden du cadre). */
.suggestion-package-card .voyage-card__image img {
    transition: transform 0.45s ease;
    will-change: transform;
}
.suggestion-package-card:hover .voyage-card__image img { transform: scale(1.06); }

/* Carte entièrement cliquable : « Découvrir » étire un overlay sur toute la carte. */
.suggestion-package-card { position: relative; }
.suggestion-package-card .link-decouvrir::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Titre 2 lignes + description 2 lignes (hauteurs figées) → le prix et
   « Découvrir » s'alignent d'une carte à l'autre (Figma 779:1633). */
.suggestion-package-card .voyage-card__body h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 26px;
    min-height: 52px;
}
.suggestion-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #0f1b24;
    height: 48px;                        /* 2 × 24px (line-height .body-s mobile) */
}
.suggestion-price {
    font-family: 'Lexend', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: #0f1b24;
}

/* Largeur FIXE des cartes (maquette « lame » 904:3537 : w-362, shrink-0, flex-wrap) :
   la carte NE se redimensionne PAS — elle garde 362px et passe À LA LIGNE dès qu'elle
   dépasse la marge, au lieu du tiers fluide de suggestions.css (.cards-grid--3 > *).
   Sous 362px de contenu (petit mobile) elle prend 100%. .cards-grid (suggestions.css)
   porte déjà flex-wrap + gap 40px + justify-content flex-start (≥769px). */
.experience-detail-page .cards-grid--3 > * {
    width: min(362px, 100%);
    flex: none;
}
@media (min-width: 769px) {
    .suggestion-price { font-size: 13px; line-height: 22px; }
    .suggestion-desc { height: 44px; }   /* 2 × 22px (line-height .body-s desktop) */
}

/* ============================================================
   5bis. POINTS MARQUANTS « avantage » — RESPONSIVE piloté par l'espace
   inter-colonnes (spec : le texte n'est PAS redimensionné ; c'est l'espace
   entre les colonnes qui se réduit ; à moins de 10px → affichage mobile).
   Desktop = 4 colonnes fixes de 200px réparties (space-between). L'espace mini
   est 10px et grandit avec la largeur. À 10px pile, le contenu = 4×200 + 3×10 =
   830px = largeur de liste vers un viewport ≈ 1110px → en dessous on repasse en
   affichage mobile (sinon la 4e colonne déborderait de l'encadré blanc).
   ============================================================ */
@media screen and (min-width: 1110px) {
    .expd-points { padding: 40px 0; }
    .expd-points__card { padding: 30px 40px; }
    .expd-points__title { text-align: left; }
    .expd-points__list {
        justify-content: space-between;
        gap: 10px;                 /* espace MINIMUM entre colonnes ; space-between l'agrandit */
        overflow: visible;
    }
    .expd-point {
        flex: 0 0 200px;
        align-items: flex-start;
        text-align: left;
    }
    .expd-point__text { min-width: 0; }    /* texte complet en desktop (pas de clamp) */
    .expd-points__nav { display: none; }   /* flèches masquées en desktop */
}

/* Affichage mobile du bloc « avantage » (< 1110px) : carrousel 1 par 1, encadré
   blanc centré (via --expd-inner) ; texte limité à 3 lignes (spec). */
@media screen and (max-width: 1109.98px) {
    /* Hauteur de l'encadré adaptée au point AFFICHÉ : pas d'étirement à la carte
       la plus haute (align-items flex-start) + transition ; la hauteur exacte du
       point courant est posée par le JS (index.html.twig) au défilement. */
    .expd-points__list {
        align-items: flex-start;
        transition: height 0.35s ease;
    }
    .expd-point__text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
}