/*
 * ============================================================================
 *  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.
   Mesuré sur les maquettes (grille de cartes bord à bord : x104 → x1335) :
   contenu de 1232px, donc 104px de marge de chaque côté. */
/* Remplacé par la classe standard .container de Bootstrap, calée sur cette
   même grille dans assets/styles/bootstrap-theme.css. */

/* ===========================================================================
 *  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.
 * ======================================================================== */
/* Pas de retrait propre : la navbar suit la grille de la page. Les trois
   maquettes (Accueil, Inscription, Activités) placent son contenu de x108 à
   x1336, soit le padding de 103px défini sur .pl-navbar. Un retrait de 48px
   décalait ici le logo de 55px vers la gauche et les boutons de 30px vers la
   droite — sur toutes les pages. */
/* Maquette : « Découvrez » commence a x305 (16px apres le logo) et le
   selecteur de langue le suit sans ecart — les deux menus se touchent,
   leur padding de 8 fait la separation. */
.pl-navbar--home .pl-navbar__left { gap: 16px; }
.pl-navbar--home .pl-nav { gap: 0; }

.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);
    /* Maquette : 16px — « Découvrez » y mesure 81px d'encre contre 72 en 14. */
    font-size: 16px;
    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; }
/* Variante footer : chip sombre + menu ouvert vers le haut (bas de page). */
.pl-dropdown--footer { position: relative; }
.pl-dropdown--footer > summary { list-style: none; }
.pl-dropdown--footer > summary::-webkit-details-marker { display: none; }
.pl-dropdown__menu--up { top: auto; bottom: calc(100% + 10px); left: auto; right: 0; 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. */
/* Maquette : disque de 16px, pas un rectangle a coins legerement arrondis. */
.pl-flag { display: block; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }

/* ===========================================================================
 *  HERO
 * ======================================================================== */
/* Maquette : le héros occupe 577px sous la navbar (y100 → y677). Calage
   déterministe : contenu accroché en haut + padding, plutôt qu'un centrage
   vertical dont le résultat dépend de la hauteur du contenu. */
.home-hero {
    position: relative;
    min-height: 577px;
    display: flex;
    align-items: flex-start;
    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: 96px 0;
    color: var(--pl-text);
}
.home-hero__title {
    max-width: 660px;
    /* Maquette : capitale de 40px et interligne cap-à-cap de 63px. */
    font-size: 56px;
    font-weight: var(--pl-fw-bold);
    line-height: 63px;
    color: var(--pl-primary);
    margin: 0 0 34px;
}
/* « 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");
}
/* Maquette : 18px, interligne 29px, coupure après « à des » (2 lignes). */
.home-hero__subtitle {
    max-width: 520px;
    font-size: 18px;
    line-height: 29px;
    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); }
/* Maquette : boutons du héros 216×40 (un cran plus compacts que le socle). */
.home-hero__actions .pl-btn { padding: 9px 12px; min-height: 40px; }

/* 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; }
/* Maquette : 4 pastilles de 48 posees a x0/33/66/99, soit 15px de
   chevauchement (docs/grille-figma.md). */
.home-avatar {
    width: 48px;
    height: 48px;
    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: -15px; }
/* Une seule couleur et une seule graisse dans la maquette : #0f172a, 16px.
   Le « +250.000 » n'y est ni bleu ni gras. */
.home-hero__proof-text { font-size: var(--pl-fs-body); font-weight: var(--pl-fw-medium); color: var(--pl-text); }
.home-hero__proof-text strong { font-weight: var(--pl-fw-medium); color: var(--pl-text); }

/* ===========================================================================
 *  BARRE DE RECHERCHE (chevauche le bas du hero)
 * ======================================================================== */
/* Figma « Container - Renseignement » 700:78360 : x=68, largeur 1304 — la carte
   déborde VOLONTAIREMENT de la grille 110/1220. La largeur vient désormais de
   .container--search (gouttière 136) dans bootstrap-theme.css : on agit sur le
   conteneur lui-même, comme pour la grille, et non par compensation.

   Mesures relevées au pixel sur les exports de la maquette (assets/figma/
   accueil-plateforme.png et activites-accueil-connecte.png) — les deux accueils
   partagent exactement la même carte :
     - carte            x  68 -> 1371 (1304), padding 20, rayon 12
     - onglets          y +20 -> +80  (hauteur 60), premier onglet à x=88
     - rangée bordée    x  88 -> 1351 (1264), hauteur 118, bordure #e5e7eb
     - séparateurs      x 356 / 639 / 934, pleine hauteur, #9dabc7
     - champs           x 100 / 394 / 677 / 972
     - bouton           x 1170, 130 x 48

   La carte est en VERRE et non en blanc plein : au-dessus de la photo du héros
   elle laisse voir l'image (blanc à 20 % + flou, alpha relevé 0,22 sur les deux
   maquettes) ; au-dessus du fond de page elle paraît blanche. Seule la rangée
   des champs est opaque. C'est ce qui produit le bandeau translucide de la
   maquette, qu'un fond blanc plein ne peut pas reproduire. */
.home-search-wrap { position: relative; z-index: 3; margin-top: -73px; }
/* Carte de verre de 1304 : 20px de marge intérieure autour du contenu. */
.home-search {
    background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: var(--pl-radius-md);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
    padding: 20px;
}
/* Onglets « classeur » collés l'un à l'autre (aucun écart mesuré), hauteur 60.
   L'actif est blanc plein et fusionne avec la rangée ; l'inactif est un voile
   blanc (alpha relevé 0,35) au texte blanc. Retraits relevés : 12px à gauche,
   16px entre l'icône et le libellé, 20px à droite. */
.home-search__tabs { display: flex; }
.home-search__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--pl-sp-16);
    height: 60px;
    padding: 0 20px 0 12px;
    border: 0;
    background: rgba(255, 255, 255, .35);
    color: var(--pl-white);
    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;
    /* Les onglets sont des <a> depuis le 29/08 : sans cela le Reboot Bootstrap
       les souligne. */
    text-decoration: none;
}
.home-search__tab .pl-icon { color: var(--pl-white); }
.home-search__tab.is-active { background: var(--pl-white); color: var(--pl-action); }
.home-search__tab.is-active .pl-icon { color: var(--pl-action); }

/* Rangée bordée de 1264 x 118, blanche et opaque. Les colonnes reprennent les
   abscisses Figma : séparateurs à 268 / 551 / 846 et bouton à 1082 (relatifs à
   la rangée), d'où des colonnes de 268 / 283 / 295 / 236 / 130 et 50px de marge
   à droite (52 moins les deux bordures, la boîte étant en border-box). */
.home-search__fields {
    display: grid;
    grid-template-columns: 268px 283px 295px 236px 130px;
    align-items: center;
    height: 118px;
    padding-right: 50px;
    background: var(--pl-white);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-sm);
}
/* Les séparateurs courent sur toute la hauteur de la rangée (maquette), pas
   seulement sur celle du champ : la bordure porte donc sur la colonne. */
.home-search__field {
    display: flex;
    align-items: center;
    gap: var(--pl-sp-12);
    align-self: stretch;
    padding-left: 38px;
    border-right: 1px solid #9dabc7;
}
.home-search__field:first-child { padding-left: 12px; }
.home-search__field:nth-child(4) { border-right: 0; }

@media (max-width: 1399.98px) {
    .home-search__fields {
        grid-template-columns: repeat(4, 1fr) auto;
        height: auto;
        padding: var(--pl-sp-16);
        gap: var(--pl-sp-8);
    }
    .home-search__field { padding-left: var(--pl-sp-12); }
    .home-search__field:first-child { padding-left: var(--pl-sp-12); }
}
/* Couleurs relevées : libellé et pictogramme #0f172a, valeur, chevron et
   séparateurs #9dabc7 (--pl-text est déjà #0f172a) ; la valeur est en 14px comme le libellé (mesurée à
   148px de large pour « Destination, ville, lieu… », soit du 14 et non du 12). */
.home-search__field .pl-icon { color: var(--pl-text); flex-shrink: 0; }
.home-search__field-label { font-size: var(--pl-fs-body-sm); font-weight: var(--pl-fw-semibold); color: var(--pl-text); }
/* Le chevron suit le texte de la valeur (écart relevé : 16px) — il n'est pas
   aligné sur le bord droit du champ. */
.home-search__field-value {
    display: inline-flex;
    align-items: center;
    gap: var(--pl-sp-16);
    font-size: var(--pl-fs-body-sm);
    color: #9dabc7;
}
.home-search__field-value .pl-icon { color: #9dabc7; }
/* Maquette : 130×48, la loupe APRÈS le libellé. */
.home-search__submit { min-height: 48px; height: 48px; width: 130px; padding-inline: 0; justify-content: center; }

/* ===========================================================================
 *  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);
}
/* Les grilles d'images sortent de 6px ; le texte reste sur la marge 110px. */
.home-section__head + .card-grid { margin-top: 0; }
/* Maquette (mesuré au pixel : capitale 36px, largeur 540px pour « Activités
   coup de coeur ») → Inter 48px graisse 500, sans interlettrage négatif. */
.home-section__title { font-size: 48px; font-weight: var(--pl-fw-medium); color: var(--pl-text); margin: 0 0 var(--pl-sp-8); letter-spacing: normal; }
.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)
 * ======================================================================== */
/* Maquette : les grilles d'images débordent de 6px de chaque côté des blocs
   de texte (contenu 1232px, x104 → x1335) ; 4 cartes de 296px, gouttière 16. */
.card-grid {
    /* Maquette : pas vertical de 426px d'une rangée à l'autre (soit 40px entre
       les cartes), gouttière horizontale de 16px. */
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 16px;
}

.pl-card {
    display: flex;
    flex-direction: column;
    background: var(--pl-white);
    /* Maquette : bordure quasi invisible (#fafafa relevé au pixel), et non le
       gris de bordure standard qui encadrait visiblement les cartes. */
    border: 1px solid var(--pl-card-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); }

/* Maquette : la photo mesure 218px pour une carte de 296 (et non 197 en 3/2). */
.pl-card__media { position: relative; aspect-ratio: 296 / 218; 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); }

/* Maquette : 17px entre la photo et le lieu, puis 18px lieu->titre et
   14px titre->note (mesuré au pixel sur Activités.png). */
.pl-card__body { display: flex; flex-direction: column; gap: 10px; padding: 13px var(--pl-sp-16) 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); }

/* Maquette : « À partir de » à gauche, prix collé au bord droit de la carte. */
.pl-card__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; 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; }
/* Titre + note globale empilés à gauche (maquette Activités et Cadeaux). */
.home-reviews__headline { display: flex; flex-direction: column; gap: var(--pl-sp-16); }
.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; }
/* Maquette (bandeau « Ce que disent les voyageurs ») : chaque etoile est posee
   sur une PASTILLE RONDE de 40px en #fafafb, l'etoile pleine en #f4a911 et la
   derniere en gris-bleu #9dabc7. Nous n'affichions que de petites etoiles
   nues, toutes orange. */
.review-card__stars { display: inline-flex; gap: 8px; }
.review-card__stars > span {
    width: 40px; height: 40px; border-radius: 50%;
    background: #fafafb;
    display: inline-flex; align-items: center; justify-content: center;
}
.review-card__stars .is-on { color: #f4a911; }
.review-card__stars .is-off { color: #9dabc7; }
.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; }
/* Maquette : corps d'avis en 16px. */
.review-card__text { font-size: var(--pl-fs-body); 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; }
/* Maquette : « Traduire » est en texte principal SOULIGNE, pas en violet nu. */
.review-card__foot a { color: var(--pl-text); text-decoration: underline; 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. */
/* Maquette : héros connecté de 573px (y100 → y673), titre à y217. */
.home-hero--connected { min-height: 573px; 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: 97px 0; }
/* Maquette de l'accueil connecté : même carte, posée 109px plus haut que le bas
   de la photo (carte à y564, photo jusqu'à y673). */
.home-connected .home-search-wrap { margin-top: -109px; }
/* Sur cet accueil, l'onglet actif est ORANGE (mesuré) et non violet. */
.home-connected .home-search__tab.is-active { color: var(--pl-cta); }
.home-connected .home-search__tab.is-active .pl-icon { color: var(--pl-cta); }
/* 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; align-items: flex-start; flex: 1; min-width: 0; }
.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;
}
/* Survol uniforme (25/08) : meme remplissage que les autres fleches du site. */
.home-cats__nav:hover { color: var(--pl-action); border-color: var(--pl-action); background: var(--pl-action-light); }
.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: 1199.98px) {
    /* .container : la variante réduite est dans bootstrap-theme.css. */
    .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; }
}

/* Maquette (auth-flow/Connexion.png) : les deux boutons de la navbar réduite
   ne partagent pas la même échelle. « Déposer une annonce » fait 192 de large
   pour 165 d'encre — c'est déjà notre CTA en 16px/500, il ne manquait que le
   retrait interne (14 et non 16). « S'incrire » fait 104 pour un pictogramme
   de 20 et 54 d'encre : le libellé y est en 15px et le retrait tombe à 8
   (nous étions à 14px demi-gras et 16 de retrait, d'où 129 de large). */
.pl-navbar .pl-btn { padding-inline: 14px; }
.pl-navbar .pl-btn--outline-dark {
    font-size: 15px;
    font-weight: var(--pl-fw-medium);
    gap: 10px;
    padding-inline: 8px;
}