/*
 * ============================================================================
 *  PAGE D'ACCUEIL — Plaisir & Loisirs
 *  Reprend la maquette Figma (écran « Acceuil - Plaisirs & Loisirs »).
 *  S'appuie sur les jetons --pl-* du design system.
 * ============================================================================
 */

/* Conteneur centré, aligné sur la navbar. */
.home-container {
    max-width: var(--pl-container-desktop);   /* 1440px */
    margin: 0 auto;
    padding-inline: 100px;
}

/* ===========================================================================
 *  EN-TÊTE DE L'ACCUEIL (spécifique)
 *  « Découvrez » + sélecteur de langue, en menus déroulants natifs (<details>).
 *  Scopé à l'accueil (--home) : la navbar partagée des pages d'authentification
 *  n'est pas impactée.
 * ======================================================================== */
.pl-navbar--home { padding-inline: 48px; }
.pl-navbar--home .pl-nav { gap: var(--pl-sp-8); }

.pl-dropdown { position: relative; }
.pl-dropdown__toggle {
    list-style: none;
    display: inline-flex; align-items: center; gap: var(--pl-sp-4);
    padding: 10px var(--pl-sp-8);
    color: var(--pl-text);
    font-size: var(--pl-fs-body-sm);
    font-weight: var(--pl-fw-semibold);
    line-height: var(--pl-lh-sm);
    white-space: nowrap;
    border-radius: var(--pl-radius-xs);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}
.pl-dropdown__toggle::-webkit-details-marker { display: none; }   /* retire le triangle natif */
.pl-dropdown__toggle:hover { color: var(--pl-action); background: var(--pl-action-light); }
.pl-dropdown[open] > .pl-dropdown__toggle { color: var(--pl-action); }
.pl-dropdown[open] > .pl-dropdown__toggle > .pl-icon:last-child { transform: rotate(180deg); }

.pl-dropdown__menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--pl-sp-8);
    background: var(--pl-white);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-md);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
    z-index: 1100;
}
.pl-dropdown--lang .pl-dropdown__menu { min-width: 170px; }
.pl-dropdown__item {
    display: flex; align-items: center; gap: var(--pl-sp-8);
    padding: 10px 12px;
    color: var(--pl-text);
    font-size: var(--pl-fs-body-sm);
    font-weight: var(--pl-fw-medium);
    text-decoration: none;
    border-radius: var(--pl-radius-sm);
    white-space: nowrap;
}
.pl-dropdown__item:hover { background: #f4f5f7; }
.pl-dropdown__item.is-active { background: var(--pl-action-light); color: var(--pl-action); font-weight: var(--pl-fw-semibold); }

/* Petit drapeau du sélecteur de langue. */
.pl-flag { display: block; border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }

/* ===========================================================================
 *  HERO
 * ======================================================================== */
.home-hero {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.home-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 40%;
    z-index: 0;
}
.home-hero__overlay {
    position: absolute;
    inset: 0;
    /* Voile clair côté gauche : le texte foncé reste lisible par-dessus la photo. */
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .82) 34%, rgba(255, 255, 255, .35) 56%, rgba(255, 255, 255, 0) 78%),
        linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, transparent 24%);
    z-index: 1;
}
.home-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-block: 64px 96px;
    color: var(--pl-text);
}
.home-hero__title {
    max-width: 620px;
    font-size: 52px;
    font-weight: var(--pl-fw-bold);
    line-height: 62px;
    color: var(--pl-primary);
    margin: 0 0 var(--pl-sp-16);
}
/* « souvenirs ! » en orange, souligné d'un trait dessiné à la main. */
.home-hero__title .is-accent {
    position: relative;
    color: var(--pl-cta);
    white-space: nowrap;
}
.home-hero__title .is-accent::after {
    content: "";
    position: absolute;
    left: 0;
    right: .35em;
    bottom: -10px;
    height: 12px;
    background: no-repeat center / 100% 100%
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' fill='none'%3E%3Cpath d='M3 10C60 4 180 2 297 8' stroke='%23ff7a00' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.home-hero__subtitle {
    max-width: 470px;
    font-size: var(--pl-fs-body);
    line-height: var(--pl-lh-base);
    color: var(--pl-text-secondary);
    margin: 0 0 var(--pl-sp-24);
}
.home-hero__actions { display: flex; gap: var(--pl-sp-12); flex-wrap: wrap; margin-bottom: var(--pl-sp-28); }

/* Second bouton du hero : blanc, bord discret, texte foncé (sur voile clair). */
.pl-btn--hero-ghost {
    background: var(--pl-white);
    color: var(--pl-text);
    border: 1px solid rgba(6, 27, 86, .16);
    font-weight: var(--pl-fw-medium);
    font-size: var(--pl-fs-body);
    box-shadow: var(--pl-shadow-sm);
}
.pl-btn--hero-ghost:hover { background: var(--pl-primary); color: var(--pl-white); border-color: var(--pl-primary); }

/* Preuve sociale : 4 avatars empilés + compteur d'utilisateurs. */
.home-hero__proof { display: flex; align-items: center; gap: var(--pl-sp-16); }
.home-hero__avatars { display: flex; }
.home-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid var(--pl-white);
    box-shadow: var(--pl-shadow-sm);
    object-fit: cover;
    background: var(--pl-white);
}
.home-avatar + .home-avatar { margin-left: -14px; }
.home-hero__proof-text { font-size: var(--pl-fs-body-sm); font-weight: var(--pl-fw-medium); color: var(--pl-text); }
.home-hero__proof-text strong { font-weight: var(--pl-fw-bold); color: var(--pl-primary); }

/* ===========================================================================
 *  BARRE DE RECHERCHE (chevauche le bas du hero)
 * ======================================================================== */
.home-search-wrap { position: relative; z-index: 3; margin-top: -44px; }
.home-search {
    background: var(--pl-white);
    border-radius: var(--pl-radius-md);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
    overflow: hidden;
}
/* Onglets « classeur » au-dessus de la carte : l'actif est blanc et fusionne
   avec la carte, l'inactif est gris translucide sur la photo. */
.home-search__tabs { display: flex; gap: 2px; }
.home-search__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--pl-sp-8);
    padding: 12px 20px;
    border: 0;
    background: rgba(210, 214, 222, .8);
    color: var(--pl-text);
    font-size: var(--pl-fs-body-sm);
    font-weight: var(--pl-fw-semibold);
    border-radius: var(--pl-radius-sm) var(--pl-radius-sm) 0 0;
    cursor: pointer;
}
.home-search__tab.is-active { background: var(--pl-white); color: var(--pl-cta); }
.home-search__tab.is-active .pl-icon { color: var(--pl-cta); }

.home-search__fields {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    align-items: center;
    gap: var(--pl-sp-8);
    padding: var(--pl-sp-12) var(--pl-sp-16);
    border-top: 1px solid var(--pl-border);
}
.home-search__field {
    display: flex;
    align-items: center;
    gap: var(--pl-sp-12);
    padding: 8px 12px;
    border-right: 1px solid var(--pl-border);
}
.home-search__field:nth-child(4) { border-right: 0; }
.home-search__field .pl-icon { color: var(--pl-primary); flex-shrink: 0; }
.home-search__field-label { font-size: var(--pl-fs-body-sm); font-weight: var(--pl-fw-semibold); color: var(--pl-text); }
.home-search__field-value { font-size: var(--pl-fs-caption); color: var(--pl-text-secondary); }
.home-search__submit { height: 100%; min-height: 52px; padding-inline: var(--pl-sp-24); }

/* ===========================================================================
 *  SECTIONS génériques
 * ======================================================================== */
.home-section { padding-block: 56px; }
.home-section__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--pl-sp-24);
    margin-bottom: var(--pl-sp-32);
}
/* Maquette 21/07 : grands titres de section (~40px, demi-gras). */
.home-section__title { font-size: 38px; font-weight: var(--pl-fw-semibold); color: var(--pl-text); margin: 0 0 var(--pl-sp-8); letter-spacing: -.01em; }
.home-section__subtitle { max-width: 620px; font-size: var(--pl-fs-body-sm); line-height: var(--pl-lh-base); color: var(--pl-text-secondary); margin: 0; }

/* Bouton foncé « Voir tout ». */
.btn-see-all {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--pl-sp-8);
    padding: 10px 18px;
    background: var(--pl-primary);
    color: var(--pl-white);
    font-size: var(--pl-fs-body-sm);
    font-weight: var(--pl-fw-semibold);
    border-radius: var(--pl-radius-sm);
    text-decoration: none;
    white-space: nowrap;
}
.btn-see-all:hover { background: var(--pl-secondary); color: var(--pl-white); }

/* ===========================================================================
 *  CARTES (activités & destinations)
 * ======================================================================== */
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pl-sp-24); }

.pl-card {
    display: flex;
    flex-direction: column;
    background: var(--pl-white);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-md);
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease;
}
.pl-card:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, .1); transform: translateY(-2px); }

.pl-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
/* Image en absolu pour que le conteneur impose son ratio 3:2 (évite que la
   hauteur naturelle d'une image portrait ne fasse gonfler la carte). */
.pl-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.pl-card__tag {
    position: absolute; top: 10px; left: 10px;
    padding: 4px 10px;
    font-size: var(--pl-fs-caption);
    font-weight: var(--pl-fw-semibold);
    color: var(--pl-white);
    border-radius: var(--pl-radius-pill);
}
.pl-card__tag--bestseller { background: var(--pl-error); }
.pl-card__tag--popular { background: var(--pl-info); }

.pl-card__fav {
    position: absolute; top: 10px; right: 10px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: var(--pl-white);
    color: var(--pl-text-secondary);
    border: 0; border-radius: 50%;
    box-shadow: var(--pl-shadow-sm);
    cursor: pointer;
}
.pl-card__fav:hover { color: var(--pl-error); }

.pl-card__body { display: flex; flex-direction: column; gap: 6px; padding: var(--pl-sp-16); }
.pl-card__title { font-size: var(--pl-fs-body); font-weight: var(--pl-fw-bold); color: var(--pl-text); }
.pl-card__place { display: flex; align-items: center; gap: 4px; font-size: var(--pl-fs-body-sm); color: var(--pl-text-secondary); }
.pl-card__place .pl-icon { color: var(--pl-text-secondary); }

.pl-card__meta { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
/* Note affichée dans une pastille orange clair (comme la maquette). */
.pl-card__rating {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    background: var(--pl-cta-hover-light);
    border-radius: var(--pl-radius-pill);
    font-size: var(--pl-fs-caption);
    font-weight: var(--pl-fw-semibold);
    color: var(--pl-text);
}
.pl-card__rating .pl-icon { color: var(--pl-warning); }
.pl-card__rating span { color: var(--pl-text-secondary); font-weight: var(--pl-fw-regular); }
.pl-card__extra { display: inline-flex; align-items: center; gap: 4px; font-size: var(--pl-fs-body-sm); color: var(--pl-text-secondary); }

.pl-card__foot { display: flex; align-items: baseline; gap: 6px; margin-top: var(--pl-sp-8); padding-top: var(--pl-sp-12); border-top: 1px solid var(--pl-border); }
.pl-card__from { font-size: var(--pl-fs-caption); color: var(--pl-text-secondary); }
.pl-card__price { font-size: var(--pl-fs-s1); font-weight: var(--pl-fw-bold); color: var(--pl-action); }

/* --- Variante carte ÉVÉNEMENT : badge catégorie, badge date, participants --- */
.pl-card__tag--cat { background: var(--pl-action); }
.pl-card__date {
    position: absolute; right: 10px; bottom: 10px;
    padding: 4px 10px;
    background: var(--pl-white);
    color: var(--pl-text);
    font-size: var(--pl-fs-caption);
    font-weight: var(--pl-fw-semibold);
    border-radius: var(--pl-radius-pill);
    box-shadow: var(--pl-shadow-sm);
}
.pl-card__event-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: var(--pl-sp-8);
    padding-top: var(--pl-sp-12);
    border-top: 1px solid var(--pl-border);
}
.pl-card__participants { display: inline-flex; align-items: center; gap: 6px; font-size: var(--pl-fs-body-sm); font-weight: var(--pl-fw-medium); color: var(--pl-text); }
.pl-card__participants .pl-icon { color: var(--pl-action); }
.home-mini-avatars { display: inline-flex; }
.home-mini-avatars img {
    width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid var(--pl-white);
    object-fit: cover; background: var(--pl-white);
}
.home-mini-avatars img + img { margin-left: -10px; }

/* ===========================================================================
 *  POURQUOI NOUS CHOISIR (homme détouré sur fond bleu)
 * ======================================================================== */
/* Fond bleu clair dégradé, calé sur le fond studio de la photo de l'homme
   (haut ≈ #E2E9F3 → bas ≈ #C2CFDF) pour que le personnage paraisse détouré. */
.home-provider { background: linear-gradient(180deg, #e0e8f3 0%, #d4deec 45%, #c4d1e2 100%); }
.home-provider__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pl-sp-32); align-items: center; }
.home-provider__title { font-size: var(--pl-fs-h2); font-weight: var(--pl-fw-bold); color: var(--pl-text); margin: 0 0 var(--pl-sp-12); }
.home-provider__text { max-width: 460px; font-size: var(--pl-fs-body-sm); line-height: var(--pl-lh-base); color: var(--pl-text-secondary); margin: 0 0 var(--pl-sp-20); }
.home-provider__list { display: flex; flex-direction: column; gap: var(--pl-sp-12); margin-bottom: var(--pl-sp-24); }
.home-provider__arg { display: flex; align-items: center; gap: var(--pl-sp-8); font-size: var(--pl-fs-body); font-weight: var(--pl-fw-medium); color: var(--pl-text); }
.home-provider__arg .pl-icon { color: var(--pl-cta); flex-shrink: 0; }

.home-provider__media { position: relative; display: flex; justify-content: center; align-items: flex-end; }
/* Anneaux masqués : absents de la maquette « Pourquoi nous choisir ». */
.home-provider__circles { display: none; }
.home-provider__media img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 540px;
    /* Image déjà détourée (fond transparent) : on montre l'homme entier,
       posé sur le bas, sans aucune coupe de la tête. */
    object-fit: contain;
    object-position: center bottom;
}

/* ===========================================================================
 *  CE QUE DISENT NOS CLIENTS (avis)
 * ======================================================================== */
.home-reviews { background: #f4f5f7; }
.home-reviews__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pl-sp-24); flex-wrap: wrap; margin-bottom: var(--pl-sp-32); }
.home-reviews__head > .home-section__title { margin: 0; }
.home-reviews__score { display: flex; align-items: center; gap: var(--pl-sp-32); flex-wrap: wrap; }
.home-reviews__score-label { font-size: var(--pl-fs-body-sm); color: var(--pl-text-secondary); }
.home-reviews__score-value { font-size: 40px; font-weight: var(--pl-fw-bold); color: var(--pl-text); line-height: 1.1; }
.home-reviews__score-value span { font-size: var(--pl-fs-body); font-weight: var(--pl-fw-medium); color: var(--pl-text-secondary); }
.home-reviews__stars { display: inline-flex; gap: 2px; color: var(--pl-warning); margin: 4px 0; }
.home-reviews__score-count { font-size: var(--pl-fs-caption); color: var(--pl-text-secondary); }

.home-reviews__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pl-sp-24); }
.review-card {
    background: var(--pl-white);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-md);
    padding: var(--pl-sp-24);
    display: flex; flex-direction: column; gap: var(--pl-sp-12);
}
.review-card__top { display: flex; align-items: center; justify-content: space-between; }
.review-card__stars { display: inline-flex; gap: 2px; }
.review-card__stars .is-on { color: var(--pl-warning); }
.review-card__stars .is-off { color: var(--pl-border); }
.review-card__more { background: 0; border: 0; color: var(--pl-text-secondary); cursor: pointer; padding: 0; }
.review-card__title { font-size: var(--pl-fs-body); font-weight: var(--pl-fw-bold); color: var(--pl-text); margin: 0; }
.review-card__text { font-size: var(--pl-fs-body-sm); line-height: var(--pl-lh-base); color: var(--pl-text-secondary); margin: 0; }
.review-card__author { display: flex; align-items: center; gap: var(--pl-sp-12); margin-top: var(--pl-sp-4); }
.review-card__avatar {
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background: var(--pl-action-light);
}
.review-card__name { font-size: var(--pl-fs-body-sm); font-weight: var(--pl-fw-bold); color: var(--pl-text); }
.review-card__meta { font-size: var(--pl-fs-caption); color: var(--pl-text-secondary); }
.review-card__foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: var(--pl-sp-4); padding-top: var(--pl-sp-12);
    border-top: 1px solid var(--pl-border);
    font-size: var(--pl-fs-caption); color: var(--pl-text-secondary);
}
.review-card__foot span { display: inline-flex; align-items: center; gap: 6px; }
.review-card__foot a { color: var(--pl-action); text-decoration: none; font-weight: var(--pl-fw-semibold); }
.review-card__foot a:hover { text-decoration: underline; }

/* ===========================================================================
 *  ACCUEIL CONNECTÉ (écrans A et B du flow Activités)
 * ======================================================================== */

/* --- Hero kayak : voile foncé à gauche, textes clairs. --- */
/* Proportions maquette : hero ~665px, carte de recherche en chevauchement
   profond (-160px), voile navy plus soutenu jusqu'à droite. */
.home-hero--connected { min-height: 660px; align-items: flex-start; }
.home-hero__overlay--dark {
    background:
        linear-gradient(90deg, rgba(4, 18, 60, .96) 0%, rgba(4, 18, 60, .88) 26%, rgba(4, 18, 60, .5) 52%, rgba(4, 18, 60, .2) 72%, rgba(4, 18, 60, .12) 100%),
        linear-gradient(180deg, rgba(4, 18, 60, .3) 0%, transparent 28%);
}
.home-hero--connected .home-hero__inner { padding-block: 44px 200px; }
.home-connected .home-search-wrap { margin-top: -160px; }
/* Maquette : 25px (~0,5 cm) entre les boutons du hero et les pilules. */
.home-hero--connected .home-hero__actions { margin-bottom: 25px; }
.home-hero--connected .home-hero__bg { object-position: center; }
.home-hero__title--light { color: var(--pl-white); max-width: 900px; }
/* La partie orange occupe toute la 2e ligne, comme sur la maquette. */
.home-hero__title--light .is-accent-line { display: block; color: var(--pl-cta); }
.home-hero__subtitle--light { color: rgba(255, 255, 255, .88); max-width: 520px; }

/* Pilules de réassurance sur la photo. */
.home-hero__assurances { display: flex; gap: var(--pl-sp-12); flex-wrap: wrap; }
.home-pill {
    display: inline-flex; align-items: center; gap: var(--pl-sp-8);
    padding: 8px 14px;
    background: var(--pl-white);
    color: var(--pl-primary);
    font-size: var(--pl-fs-caption);
    font-weight: var(--pl-fw-semibold);
    border-radius: var(--pl-radius-sm);
}
.home-pill .pl-icon { color: var(--pl-primary); }

/* --- Barre de recherche : champs cliquables + panneaux déroulants (écran B). --- */
.home-search { position: relative; overflow: visible; }
.home-search__field { background: transparent; border-block: 0; border-left: 0; text-align: left; cursor: pointer; }
.home-search__field > span:not(.pl-icon) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
/* Chevron d'affordance à droite de chaque champ (maquette). */
.home-search__field > .pl-icon:last-child { margin-left: auto; color: var(--pl-text-secondary); align-self: center; }
.home-search__field:hover .home-search__field-label { color: var(--pl-action); }
.home-search__field.is-open .home-search__field-label { color: var(--pl-action); }

.home-search__panel {
    position: absolute;
    top: calc(100% + 10px);
    min-width: 272px;
    max-height: 488px;
    overflow-y: auto;
    background: var(--pl-white);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-md);
    box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
    padding: var(--pl-sp-12);
    display: flex; flex-direction: column; gap: var(--pl-sp-4);
    z-index: 60;
}
.home-search__panel[hidden] { display: none; }
.home-search__panel[data-search-panel="destination"] { left: var(--pl-sp-16); }
.home-search__panel[data-search-panel="activite"] { left: 22%; }
.home-search__panel[data-search-panel="date"] { left: 44%; min-width: 311px; }
.home-search__panel[data-search-panel="participants"] { right: var(--pl-sp-16); min-width: 335px; }
.home-search__panel--travellers { gap: var(--pl-sp-12); padding: var(--pl-sp-20); }

.home-search__option {
    padding: 10px 12px;
    background: 0; border: 0;
    border-radius: var(--pl-radius-sm);
    font-size: var(--pl-fs-body-sm);
    color: var(--pl-text);
    text-align: left;
    cursor: pointer;
}
.home-search__option:hover { background: #f4f5f7; }
.home-search__option.is-active { background: var(--pl-action-light); color: var(--pl-action); font-weight: var(--pl-fw-semibold); }

/* --- Calendrier du panneau Date. --- */
.home-cal { padding: var(--pl-sp-8); }
.home-cal__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--pl-sp-12);
    font-size: var(--pl-fs-body-sm);
    color: var(--pl-text);
}
.home-cal__head button {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: 0; border: 0; border-radius: 50%;
    color: var(--pl-text);
    cursor: pointer;
}
.home-cal__head button:hover { background: #f4f5f7; color: var(--pl-action); }
.home-cal__days, .home-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.home-cal__days { margin-bottom: var(--pl-sp-8); }
.home-cal__days span { text-align: center; font-size: var(--pl-fs-caption); color: var(--pl-text-secondary); }
.home-cal__grid button {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    justify-self: center;
    background: 0; border: 0; border-radius: 50%;
    font-size: var(--pl-fs-caption);
    color: var(--pl-text);
    cursor: pointer;
}
.home-cal__grid button:hover { background: var(--pl-action-light); color: var(--pl-action); }
.home-cal__grid button.is-muted { color: var(--pl-border); }
.home-cal__grid button.is-selected { background: var(--pl-action); color: var(--pl-white); font-weight: var(--pl-fw-bold); }

/* --- Créer votre activité privée : carte bleu clair sur fond blanc + carte
   blanche « Comment créer » (maquette 21/07, gamme BLEUE, pas violette). --- */
.home-private { background: var(--pl-white); }
.home-private__inner { display: grid; grid-template-columns: 2fr 1fr; gap: var(--pl-sp-24); align-items: stretch; }
.home-private__panel {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--pl-sp-24);
    background: #e9effd;
    border-radius: 20px;
    padding: var(--pl-sp-32);
}
.home-private__title { font-size: 30px; font-weight: var(--pl-fw-bold); color: var(--pl-text); margin: 0 0 var(--pl-sp-8); line-height: 1.2; }
.is-violet { color: var(--pl-action); }
.is-blue { color: #2563eb; }
.home-checklist { list-style: none; margin: var(--pl-sp-16) 0 var(--pl-sp-24); padding: 0; display: flex; flex-direction: column; gap: var(--pl-sp-12); }
.home-checklist li { display: flex; align-items: center; gap: var(--pl-sp-8); font-size: var(--pl-fs-body); font-weight: var(--pl-fw-medium); color: var(--pl-text); }
.home-checklist .pl-icon { color: var(--pl-success); flex-shrink: 0; }
.home-checklist--blue .pl-icon { color: #2563eb; }
.home-checklist--orange .pl-icon { color: var(--pl-cta); }
/* Variante « carrés cochés » (cadeau, prestataires) : texte plus grand. */
.home-checklist--squares { gap: var(--pl-sp-16); }
.home-checklist--squares li { font-size: 19px; }
.home-checklist--violet .pl-icon { color: var(--pl-action); }

.home-private__collage { position: relative; min-height: 320px; }
.home-private__photo {
    position: absolute;
    border-radius: var(--pl-radius-md);
    border: 4px solid var(--pl-white);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .18);
    object-fit: cover;
}
.home-private__photo--1 { top: 0; left: 0; width: 62%; height: 46%; transform: rotate(-3deg); }
.home-private__photo--2 { top: 26%; right: 0; width: 52%; height: 56%; transform: rotate(2.5deg); z-index: 1; }
.home-private__photo--3 { bottom: 0; left: 6%; width: 48%; height: 42%; transform: rotate(-1.5deg); }
.home-private__deco { position: absolute; z-index: 2; }
.home-private__deco--pin { top: -6px; right: 26%; color: var(--pl-action); }
.home-private__deco--heart { bottom: 10%; right: 6%; color: var(--pl-error); }

.home-private__how {
    background: var(--pl-white);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-md);
    padding: var(--pl-sp-32);
    display: flex; flex-direction: column;
}
.home-private__how h3 { font-size: 22px; font-weight: var(--pl-fw-bold); color: var(--pl-text); margin: 0 0 var(--pl-sp-20); max-width: 260px; }
.home-private__steps { list-style: none; margin: 0 0 var(--pl-sp-24); padding: 0; display: flex; flex-direction: column; gap: var(--pl-sp-16); flex: 1; }
.home-private__steps li { display: flex; gap: var(--pl-sp-12); font-size: var(--pl-fs-body-sm); color: var(--pl-text-secondary); }
.home-private__steps strong { display: block; color: var(--pl-text); }
.home-private__step-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #e9effd;
    color: #2563eb;
    border-radius: var(--pl-radius-sm);
}
.home-private__how .pl-btn { align-self: stretch; justify-content: center; }

/* --- Carrousel des catégories populaires. --- */
.home-cats { display: flex; align-items: center; gap: var(--pl-sp-12); }
.home-cats__nav {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pl-white);
    border: 1px solid var(--pl-border);
    border-radius: 50%;
    color: var(--pl-text);
    cursor: pointer;
}
.home-cats__nav:hover { color: var(--pl-action); border-color: var(--pl-action); }
.home-cats__scroll { display: flex; gap: var(--pl-sp-16); overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.home-cats__scroll::-webkit-scrollbar { display: none; }
.home-cat {
    flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center; gap: var(--pl-sp-8);
    min-width: 146px;
    padding: var(--pl-sp-16) var(--pl-sp-12);
    background: #f8fafc;
    border-radius: var(--pl-radius-md);
    text-decoration: none;
}
.home-cat__icon {
    width: 60px; height: 60px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pl-action-light);
    color: var(--pl-action);
    border-radius: 50%;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.home-cat:hover .home-cat__icon { background: var(--pl-action); color: var(--pl-white); transform: translateY(-2px); }
.home-cat__label { font-size: var(--pl-fs-body-sm); font-weight: var(--pl-fw-semibold); color: var(--pl-text); text-align: center; }

.home-section--soft { background: #f8f9fb; }

/* --- Pas d'idée de cadeau ? : bloc violet clair + carte au liseré violet. --- */
.home-gift { background: var(--pl-white); }
.home-gift__card {
    display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--pl-sp-32); align-items: center;
    background: #efe6ff;
    border: 1.5px solid var(--pl-action);
    border-radius: 20px;
    padding: 48px 56px;
}
.home-gift__title { font-size: 38px; font-weight: var(--pl-fw-semibold); color: var(--pl-action); margin: 0 0 var(--pl-sp-4); }
.home-gift__subtitle { font-size: 20px; font-weight: var(--pl-fw-bold); color: var(--pl-text); margin: 0; }
.home-gift__card .pl-btn { padding: 12px 40px; }
.home-gift__visual img { width: 100%; max-height: 420px; object-fit: contain; }

/* --- Vous êtes prestataires ? (fond crème ; visuel repris de la maquette,
   cercles inclus dans l'image). --- */
.home-pro { background: #fff2e6; overflow: hidden; }
.home-pro__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pl-sp-32); align-items: center; }
.home-pro__media { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 480px; }
.home-pro__circles { display: none; }
/* La photo (cercles inclus) est ancrée au bas de la section, comme la maquette. */
.home-pro.home-section { padding-block: 0; }
.home-pro__text { padding-block: 64px; }
.home-pro__media { align-items: flex-end; min-height: 0; }
.home-pro__media img {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 640px;
    height: auto;
    object-fit: contain;
    object-position: center bottom;
}

/* ===========================================================================
 *  Adaptation largeurs intermédiaires
 * ======================================================================== */
@media (max-width: 1100px) {
    .home-container { padding-inline: var(--pl-sp-32); }
    .card-grid { grid-template-columns: repeat(2, 1fr); }
    .home-reviews__grid { grid-template-columns: 1fr; }
    .home-provider__inner { grid-template-columns: 1fr; }
    .home-search__fields { grid-template-columns: 1fr 1fr; }
    .home-search__field { border-right: 0; }
    .home-private__inner, .home-private__panel, .home-gift__inner, .home-pro__inner { grid-template-columns: 1fr; }
}