/* ============================================================
   PAGE « Envies » (route experience_home) — design v2 pixel-perfect
   Figma desktop 1564:1424 / mobile 1564:3239.
   Réutilise les modules v2 chargés par v2/css/main.css : bloc « Nos valeurs »
   (rdvValues.css) + CTA devis (btn.css). Ce fichier stylise UNIQUEMENT les
   parties nouvelles : hero « Envies », grille de cartes-envie (thèmes),
   blog & bouton « Tous les articles ».
   Mobile-first ; breakpoint desktop = 1100px (convention v2).
   ============================================================ */

/* -------- Fond de page crème (full-bleed) -------- */
.experience-page main { background: #efece9; }

/* -------- Header « Trouvailles » (sombre-sur-clair) rendu visible en flux --------
   Le module _header.html.twig utilise la classe .header-transparant, masquée par
   défaut (topbar.css). Sur cette page (hero clair) on la rend visible, en flux
   normal (position:relative → plus de superposition avec le titre), fond crème. */
.experience-page #header-transparant.header-transparant {
    display: block;
    position: relative;
    top: auto;
    z-index: 100;
    background: #efece9 !important;
}
/* Texte sombre du header (Menu / Destinations / devise) à tous les breakpoints. */
.experience-page #header-transparant .menu,
.experience-page #header-transparant .destinations-menu,
.experience-page #header-transparant .devise-header {
    color: #2d2d2d;
}
/* Select2 devise : fond transparent, texte sombre (cf. page Trouvailles). */
.experience-page #header-transparant .select2-container--default .select2-selection--single {
    background-color: transparent !important;
    border: 0 solid transparent;
}
.experience-page #header-transparant .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0 !important;
    font-family: 'Lexend', sans-serif;
    color: #2d2d2d !important;
}

/* -------- Hero « Envies » -------- */
.exp-hero {
    padding: 20px 30px;
}
.exp-hero__title {
    margin: 0;
    font-family: 'Asul', sans-serif;
    font-weight: 400;
    font-size: 50px;
    line-height: 1;
    color: #0f1b24;
    /* Structure réduite (mobile/tablette < 1100px) : titre centré à 50px.
       En structure full (≥1100px) il passe à 90px (cf. media query desktop). */
    text-align: center;
}

/* -------- Grille cartes-envie (thèmes) --------
   .exp-envies = colonne verticale empilant les cartes pleine largeur (--full) et
   les rangées « multiples » (.exp-row). Le comportement responsive des rangées
   (wrap selon la largeur) est défini sur .exp-row ci-dessous. */
.exp-envies {
    padding: 0 30px 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
/* Rangée « multiples » (jusqu'à 3 cartes) — comportement responsive unifié à
   tous les breakpoints. Chaque carte veut ≥362px et grandit (flex-grow) pour
   remplir la rangée. Dès qu'une carte n'a plus la place de tenir à 362px — elle
   arriverait dans la gouttière (100px en structure full / 30px en structure
   réduite, gouttières portées par la largeur de .exp-envies) — elle passe à la
   ligne et occupe TOUTE la rangée ; les cartes restées au-dessus se répartissent
   alors toute la largeur. Sous 362px de large (petits mobiles), la carte prend
   100% via min(362px, 100%) pour éviter tout débordement horizontal.
   NB : 362px = (1166 − 2×40) / 3 → 3 cartes + 2 gouttières de 40px = 1166px,
   soit exactement la largeur de contenu de la structure full. */
.exp-row {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}
.exp-row > .exp-card {
    flex: 1 1 362px;
    min-width: min(362px, 100%);
}
/* Carte image : titre en haut, CTA « Découvrir » en bas, sur image assombrie. */
.exp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 350px;
    padding: 30px;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
}
.exp-card__img {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background-color: #9f9a7c; /* fallback si le thème n'a pas de photo */
    background-size: cover;
    background-position: center;
}
/* Overlay noir 20 % (Figma : rgba(0,0,0,.2) multiply). */
.exp-card__img::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.2);
}
.exp-card__title {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: 'Asul', sans-serif;
    font-weight: 400;
    font-size: 35px;
    line-height: 1;
    color: #fff;
}
.exp-card__cta {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px 17px;
    border: 1px solid #fff;
    border-radius: 30.076px;
    background: transparent;
    color: #fff;
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    transition: background 0.2s ease, color 0.2s ease;
}
.exp-card__cta:hover { background: #8a866b; border-color: #9F9A7C; color: #ffffff; }

/* -------- Blog -------- */
.exp-blog {
    padding: 60px 30px 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.exp-blog__titres { display: flex; flex-direction: column; gap: 20px; }
.exp-eyebrow {
    margin: 0;
    font-family: 'Lexend Peta', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    text-transform: uppercase;
    color: #0f1b24;
}
.exp-h2 {
    margin: 0;
    font-family: 'Asul', sans-serif;
    font-weight: 400;
    font-size: 35px;
    line-height: 1;
    color: #0f1b24;
}
/* Mobile : rangée scrollable horizontalement (cartes 262px). */
.exp-blog__cards {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    scrollbar-width: none;
}
.exp-blog__cards::-webkit-scrollbar { display: none; }
.exp-card-blog {
    scroll-snap-align: start;
    flex: 0 0 262px;
    width: 262px;
    height: 471px;
    padding: 30px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    background: #fff;
    text-decoration: none;
    box-sizing: border-box;
}
.exp-card-blog__top { display: flex; flex-direction: column; gap: 20px; }
.exp-card-blog__cat {
    font-family: 'Lexend', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 20px;
    color: #0f1b24;
}
.exp-card-blog__title {
    font-family: 'Asul', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: normal;
    color: #0f1b24;
}
.exp-card-blog__img {
    flex: 1 0 0;
    min-height: 0;
    width: 100%;
    border-radius: 15px;
    background: #d9d9d9 center / cover no-repeat;
}
.exp-btn-outline {
    display: 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;
    transition: background 0.2s ease, color 0.2s ease;
}
.exp-btn-outline:hover { background: #9f9a7c; color: #fff; }

/* Variante « Paroles de voyageurs » : image plein fond, texte blanc. */
.exp-card-blog.paroles {
    position: relative;
    justify-content: space-between;
    overflow: hidden;
    background: #9f9a7c center / cover no-repeat;
}
.exp-card-blog.paroles::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.12) 45%, rgba(0, 0, 0, 0.40) 100%);
}
.exp-card-blog.paroles > * { position: relative; z-index: 1; }
.exp-card-blog.paroles .exp-card-blog__cat { color: #fff; }
.exp-card-blog.paroles .exp-card-blog__title { color: #fff; font-size: 26px; line-height: 31px; }
.exp-card-blog.paroles .exp-btn-outline { border-color: #fff; color: #fff; }
.exp-card-blog.paroles .exp-btn-outline:hover { background: #fff; color: #0f1b24; }

/* -------- Suggestions (« Tous les articles ») -------- */
.exp-suggestions {
    padding: 40px 30px 60px;
    display: flex;
    justify-content: center;
}
.exp-suggestions .exp-btn-outline { min-width: 176px; }

/* ============================================================
   DESKTOP ≥ 1100px
   ============================================================ */
@media screen and (min-width: 1100px) {
    /* Contenu centré, largeur MAX 1166px (structure 1366 − 2×100px de gouttières). */
    .exp-hero { width: min(1166px, calc(100% - 200px)); margin-inline: auto; padding: 40px 0; }
    .exp-hero__title { font-size: 90px; text-align: center; }

    .exp-envies { width: min(1166px, calc(100% - 200px)); margin-inline: auto; padding: 0 0 40px; }
    /* Plus de règle .exp-row ici : le wrap défini en base suffit. Contenu ≤1166px
       → les 3 cartes de 362px tiennent sur une rangée ; dès que la largeur
       descend (viewport < 1366px), la 3e wrappe puis la 2e, etc. */
    .exp-card { min-height: 420px; }
    /* Carte « tri » (rangée de 3) : titre 26px, CTA contour blanc pleine largeur. */
    .exp-row .exp-card__title { font-size: 26px; line-height: 31px; }
    /* Carte pleine largeur : titre 50px + CTA sauge plein compact (120px). */
    .exp-card--full .exp-card__title { font-size: 50px; }
    .exp-card--full .exp-card__cta {
        width: 120px;
        background: transparent;
        border-color: #ffffff;
        color: #fff;
    }
    .exp-card--full .exp-card__cta:hover { background: #8a866b; border-color: #9F9A7C; color: #ffffff; }

    .exp-blog { width: min(1166px, calc(100% - 200px)); margin-inline: auto; padding: 60px 0 0; }
    .exp-h2 { font-size: 50px; }
    .exp-blog__cards {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 40px;
        overflow: visible;
    }
    .exp-card-blog { flex: none; width: auto; }
}

/* Bouton « Demander un devis » du header (maquette 695:1805 : whitespace-nowrap) :
   le libellé + la flèche restent sur UNE seule ligne. Sans ça, dans la colonne
   flex du header le bouton rétrécit et le texte passe sur 2 lignes. */
.experience-page #header-transparant .btn-quote_request {
    white-space: nowrap;
    flex-shrink: 0;
}

@media screen and (min-width: 1100px) {
    /* Colonne droite du header élargie : le bouton « Demander un devis » (désormais
       sur une ligne) + la devise + l'icône utilisateur ne tenaient plus dans la
       colonne 25fr par défaut → l'icône user débordait et disparaissait. Grille
       symétrique 30/40/30 → tout tient ET le logo reste centré. */
    .experience-page #header-transparant .topbar_top {
        grid-template-columns: 30fr 40fr 30fr;
    }
}

/* Bouton « Tous les articles » centré (maquette Envies 1920:4549). Le module
   blog cloné de Trouvailles l'aligne à gauche par défaut : on le recentre via
   flex (robuste quel que soit le display du bouton). */
.experience-page .section-blog .section-more {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Gouttières du blog alignées sur la convention du site (comme hero/envies/valeurs) :
   30px sous le breakpoint 1100, 100px en fullscreen (contenu max 1166px centré).
   Sans ça, base.css .container basculait à 769px + centrage à 1166 → 17px de
   gouttière vers 1200px, désaligné des cartes-envie (100px). Le carrousel continue
   de déborder pleine largeur sous 1100 (blog-scroll-wrap), le titre/bouton/1re carte
   restant à 30px. */
.experience-page .section-blog .container {
    max-width: none;
    margin-inline: 0;
    padding: 0 30px;
}
@media screen and (min-width: 1100px) {
    .experience-page .section-blog .container {
        width: min(1166px, calc(100% - 200px));
        margin-inline: auto;
        padding: 0;
    }
}

/* Carrousel blog — 1re ET dernière carte alignées sur la gouttière 30px de la
   page (comme le titre et les autres blocs). blog.css cale le padding-inline de
   la piste sur la convention Trouvailles (40px en 769–1100px) ; on le ramène à
   30px ici pour rester cohérent avec .experience-page .section-blog .container
   (30px < 1100). Le padding-inline (droite comprise) donne la marge de 30px en
   fin de scroll ; le bleed pleine largeur et le défilement sont conservés —
   finding.js relit padding-left + scrollWidth dynamiquement. */
@media (min-width: 769px) and (max-width: 1100px) {
    .experience-page .blog-grid { padding-inline: 30px; }
}