/* ==============================================================
   IMMO-2026.08.12-01  —  style_site_portail.css
   Historique :
   - 2026.08.12-05 : texte de presentation sous le titre, pleine
                     largeur.
   - 2026.08.12-03 : page resserree (hero compact, destinations
                     en pastilles, entete de liste sur une ligne).
   - 2026.08.12-02 : barre de recherche, bandeau destinations,
                     etat "complet".
   - 2026.08.12-01 : creation. Feuille SPECIFIQUE de l'annuaire
                     EcoVacances (I_SitePortail.php). Tout le reste
                     (sp-wrap, sp-card, sp-hero, sp-btn...) vient de
                     style_site_public.css : ne rien redefinir ici
                     qui existe deja la-bas.
   ============================================================== */

/* ── Barre de filtres ──────────────────────────────────────────── */
.pt-filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    margin: 0 0 32px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid #e3e6e0;
    border-radius: 12px;
}

.pt-filtre {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
}

.pt-filtre span {
    font-size: .85rem;
    font-weight: 600;
    color: #21402f;
}

.pt-filtre select {
    padding: 11px 14px;
    font-family: inherit;
    font-size: .98rem;
    color: #2c3540;
    background: #fff;
    border: 1px solid #c9d1c6;
    border-radius: 10px;
}

.pt-filtre select:focus {
    outline: 2px solid #21402f;
    outline-offset: 1px;
}

.pt-reset {
    align-self: center;
    font-size: .92rem;
    color: #7a857b;
}

/* ── Attribution du bailleur sur la carte ──────────────────────── */
.pt-bailleur {
    margin-top: 6px;
    font-size: .88rem;
    color: #7a857b;
}

@media (max-width: 700px) {
    .pt-filtres { flex-direction: column; align-items: stretch; }
    .pt-filtre { min-width: 0; }
    .pt-reset { align-self: flex-start; }
}


/* ── Hero du portail ───────────────────────────────────────────── */
/* Volontairement court : la recherche et les annonces doivent tenir */
/* dans le premier ecran, le discours vient apres.                   */
.pt-hero {
    padding: 30px 0 22px;
}

.pt-hero h1 {
    margin: 0 0 6px;
}

.pt-hero .sp-lead {
    max-width: 560px;
    margin: 0;
}

.pt-hero--destination {
    padding-bottom: 28px;
}

/* ── Barre de recherche ────────────────────────────────────────── */
.pt-recherche {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    margin: 20px 0 0;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e3e6e0;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(33, 64, 47, .07);
}

.pt-champ {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 150px;
    min-width: 140px;
}

.pt-champ--large { flex: 2 1 260px; }
.pt-champ--court { flex: 0 1 160px; }

.pt-champ label {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #58805f;
}

.pt-champ select,
.pt-champ input[type="date"] {
    padding: 11px 13px;
    font-family: inherit;
    font-size: .95rem;
    color: #2c3540;
    background: #fff;
    border: 1px solid #c9d1c6;
    border-radius: 10px;
    min-width: 0;
}

.pt-champ select:focus,
.pt-champ input[type="date"]:focus {
    outline: 2px solid #21402f;
    outline-offset: 1px;
}

.pt-rechercher {
    flex: 0 0 auto;
    padding: 12px 26px;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    background: #21402f;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s ease;
}

.pt-rechercher:hover { background: #2d5540; }

.pt-reset-ligne {
    margin: 12px 0 0;
    font-size: .9rem;
}

/* ── Destinations en pastilles ─────────────────────────────────── */
/* Une ligne de raccourcis sous la recherche : les annonces restent  */
/* visibles sans avoir a faire defiler.                              */
.pt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
}

.pt-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    font-size: .88rem;
    color: #21402f;
    background: #f0f5f0;
    border: 1px solid #dbe6dc;
    border-radius: 20px;
    text-decoration: none;
    transition: background .15s ease;
}

.pt-chip:hover { background: #e5efe6; }

.pt-chip span {
    font-size: .78rem;
    color: #7a857b;
}

.pt-chip--reset {
    background: #fff;
    border-style: dashed;
    color: #7a857b;
}

/* ── Entete de la liste ────────────────────────────────────────── */
.pt-liste-tete {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0 0 20px;
}

.pt-liste-tete h2 { margin: 0; }

.pt-liste-tete p {
    margin: 0;
    font-size: .9rem;
    color: #7a857b;
}

/* ── Etiquette de destination sur une carte ────────────────────── */
.pt-dest-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    font-size: .76rem;
    color: #58805f;
    background: #eef4ee;
    border-radius: 20px;
}

/* ── Logement complet aux dates demandees ──────────────────────── */
/* Attenue sans masquer : le voyageur voit l'offre et peut demander */
/* d'autres dates au proprietaire.                                  */
.pt-card-complet {
    opacity: .72;
}

.pt-card-complet:hover {
    opacity: 1;
}

.pt-tag-complet {
    background: #f3e2dd;
    color: #8a4230;
}

@media (max-width: 700px) {
    .pt-recherche { flex-direction: column; align-items: stretch; }
    .pt-champ, .pt-champ--large, .pt-champ--court { flex: 1 1 auto; min-width: 0; }
    .pt-rechercher { width: 100%; }
}

/* La liste remonte : plus d'espace mort entre la recherche et les
   annonces. */
.pt-hero + .sp-list { padding-top: 8px; }

/* ── Texte de presentation d'une destination ───────────────────── */
/* Pleine largeur (et non la colonne etroite de .sp-lead) : le meme
   texte tient en deux lignes au lieu de cinq, donc les annonces
   restent hautes dans la page. */
.pt-dest-intro {
    max-width: 100%;
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.55;
    color: #4a5560;
}

@media (min-width: 1000px) {
    .pt-dest-intro { max-width: 92%; }
}