/* Blocs DATAtourisme de la page activité (gabarit activite/04) :
   horaires.php, tarifs.php, infos_pratiques.php, itineraire.php, infos clés du hero */

/* ── Infos clés du hero : le style vient de hero.beta.css ; corrections de placement ──
   hero.beta.css place la bande en absolu en bas du hero : sans photo (height-auto) elle
   recouvrait l'adresse, et avec photo il faut réserver sa hauteur sous le contenu. */
.activity-hero.height-auto .activity-hero__infos {
    position: static; height: auto; -webkit-mask-image: none; mask-image: none;
    padding: 6px 8px 18px;
}
.activity-hero__infos { grid-auto-rows: min-content; }
.activity-hero__info strong { white-space: normal; }
@media (min-width: 761px) {
    /* hauteur fixe de hero.beta.css : on la libère pour que la bande ne recouvre rien */
    .activity-hero.avec-infos:not(.height-auto) { height: auto; min-height: 450px; }
    .activity-hero.avec-infos:not(.height-auto) .activity-hero__content { padding-bottom: 120px; }
    .activity-hero.height-auto .activity-hero__infos { padding: 6px 30px 20px 35px; }
}
@media (min-width: 1001px) {
    .activity-hero.height-auto .activity-hero__infos { padding-left: 28px; }
}

/* ── Horaires ── */
.horaires-texte { margin-bottom: 10px; }
.horaires-liste, .horaires-lignes { list-style: none; margin: 0; padding: 0; }
.horaires-periode { margin-bottom: 14px; }
.horaires-periode__dates { font-weight: 600; margin: 0 0 4px; }
.horaires-periode__dates i { color: #2a8514; margin-right: 4px; }
.horaires-lignes li { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 4px 0 4px 22px; border-bottom: 1px dashed #e5e7eb; }
.horaires-lignes li:last-child { border-bottom: 0; }
.horaires-jours { min-width: 190px; }
.horaires-heures { font-weight: 600; font-variant-numeric: tabular-nums; }
.horaires-info { flex-basis: 100%; color: #4b5563; font-size: .9rem; }

/* ── Tarifs ── */
.tarifs-indicatif { background: #fff7e6; border-left: 3px solid #e6a23c; padding: 8px 12px; border-radius: 4px; font-size: .9rem; }
.tarifs-indicatif i { color: #e6a23c; margin-right: 4px; }
.tarifs-table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; }
.tarifs-table th, .tarifs-table td { padding: 8px 6px; border-bottom: 1px solid #e5e7eb; vertical-align: top; }
.tarifs-table th { font-weight: 500; text-align: left; }
.tarifs-table td { text-align: right; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tarifs-precision { display: block; font-size: .82rem; color: #6b7280; font-weight: 400; }
.tarifs-taxes, .tarifs-paiements { font-size: .88rem; color: #4b5563; margin: 4px 0; }

/* ── Infos pratiques ── */
.ip-distinctions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ip-classement, .ip-label {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
    font-size: .88rem; font-weight: 600;
}
.ip-classement { background: #fff4d6; color: #7a5300; }
.ip-etoiles { color: #e6a700; letter-spacing: 1px; }
.ip-label { background: #eef6ef; color: #1f6b10; }
.ip-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 20px; margin: 0 0 12px; }
.ip-liste div { display: flex; flex-direction: column; }
.ip-liste dt { font-size: .78rem; color: #6b7280; text-transform: uppercase; letter-spacing: .03em; font-weight: 500; }
.ip-liste dd { margin: 0; }
.ip-sous-titre { font-size: 1rem; margin: 14px 0 8px; }
.ip-equipements { list-style: none; padding: 0; margin: 0; columns: 2 220px; column-gap: 20px; }
.ip-equipements li { break-inside: avoid; padding: 3px 0; font-size: .92rem; }
.ip-equipements i { color: #2a8514; margin-right: 6px; font-size: .8rem; }

/* ── Mentions ── */
.info-source { font-size: .8rem; color: #6b7280; margin: 6px 0 0; }
.info-source--dt { margin: 24px 0 8px; padding-top: 10px; border-top: 1px solid #e5e7eb; }
.sidebar-classement span { color: #e6a700; }

/* ── « En bref » (en_bref.php) : dans le hero sans photo, ou dans la colonne latérale ── */
.activity-hero.avec-fiche { min-height: 0; }
.activity-hero__fiche { position: relative; z-index: 5; margin: 6px 8px 20px; }
.fiche-bref {
    padding: 18px 20px; background: rgba(255, 255, 255, .94); border: 1px solid #e3e8d6;
    border-radius: 16px; box-shadow: 0 4px 20px rgba(54, 65, 39, .08);
    backdrop-filter: blur(3px);
}
.fiche-bref--sidebar { margin: 20px 0 0; background: #fff; box-shadow: none; }
.fiche-bref__titre {
    font-family: var(--font-heading); font-weight: 600; font-size: 1.35rem; color: var(--hn-color, #364127);
    margin: 0 0 10px;
}
.fiche-bref__infos { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.fiche-bref__infos li { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; }
.fiche-bref__infos i { flex: 0 0 22px; color: #6f9445; font-size: 1.15rem; margin-top: 4px; text-align: center; }
.fiche-bref__infos small { display: block; font-size: .8rem; color: #64695e; }
.fiche-bref__infos strong { display: block; font-size: 1rem; font-weight: 600; color: #3d4635; line-height: 1.3; }
.fiche-bref__infos em { display: block; font-size: .85rem; color: #74786e; font-style: normal; }
.fiche-bref__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fiche-bref__btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
    background: #789a4d; color: #fff !important; font-size: .92rem; font-weight: 400;
}
.fiche-bref__btn:hover { background: #5d8e2e; }
.fiche-bref__btn--reserver { background: var(--primary-red, #C94B24); }
.fiche-bref__btn--reserver:hover { background: #a83d1c; }
.fiche-bref__btn--lien { background: #eef1de; color: #3d4635 !important; }
.fiche-bref__btn--lien:hover { background: #e2e8cc; }

/* image de la catégorie en fond à droite du hero sans photo (même fondu que la photo) */
.activity-hero__fond {
    position: absolute; z-index: 0; inset: 0 0 0 auto; width: 100%;
    background-image: var(--fond-640); background-size: cover; background-position: center; opacity: .28;
    -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.6) 45%, transparent 85%);
    mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.6) 45%, transparent 85%);
    pointer-events: none;
}
.activity-hero.avec-fond .activity-hero__content { position: relative; z-index: 2; }
@media (min-width: 761px) {
    .activity-hero.avec-fiche { display: flex; align-items: center; gap: 30px; min-height: 340px; }
    .activity-hero.avec-fiche .activity-hero__content { flex: 1 1 auto; width: auto; }
    .activity-hero__fiche { flex: 0 0 340px; margin: 40px 35px 30px 0; }
    .activity-hero__fond {
        width: min(66%, 760px); opacity: .45; background-image: var(--fond-800);
        -webkit-mask-image: radial-gradient(ellipse 105% 105% at 100% 50%, #000 0%, #000 45%,
            rgba(0,0,0,.6) 65%, rgba(0,0,0,.15) 82%, transparent 92%);
        mask-image: radial-gradient(ellipse 105% 105% at 100% 50%, #000 0%, #000 45%,
            rgba(0,0,0,.6) 65%, rgba(0,0,0,.15) 82%, transparent 92%);
    }
}
@media (min-width: 1001px) {
    .activity-hero__fiche { flex-basis: 380px; }
}
/* petit écran : le hero ne garde pas de grande zone vide (min-height de hero.beta.css) */
@media (max-width: 760px) {
    .activity-hero.height-auto { min-height: 0; }
}

/* ── Calcul d'itinéraire (itineraire_calcul.php + /js/itineraire.js) ── */
.itineraire-calcul { margin-top: 14px; padding: 16px 18px; background: #f8f9f2; border: 1px solid #e3e8d6; border-radius: 14px; }
.iti-titre { font-size: 1.2rem; margin: 0 0 10px; }
.iti-form { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.iti-depart { position: relative; flex: 1 1 280px; display: flex; }
.iti-adresse { flex: 1; padding: 9px 12px; border: 1px solid #c8d3b8; border-radius: 999px 0 0 999px; font-size: 1rem; }
.iti-position { border: 1px solid #c8d3b8; border-left: 0; border-radius: 0 999px 999px 0; background: #fff; padding: 0 14px; color: #6f9445; }
.iti-suggestions { position: absolute; z-index: 1000; top: 100%; left: 0; right: 0; list-style: none; margin: 4px 0 0; padding: 0; background: #fff; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.iti-suggestions:empty { display: none; }
.iti-suggestions button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 12px; font-size: .95rem; }
.iti-suggestions button:hover { background: #eef1de; }
.iti-modes { display: flex; gap: 12px; border: 0; margin: 0; padding: 0; font-size: .95rem; }
.iti-modes label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.iti-calculer { border: 0; border-radius: 999px; background: #789a4d; color: #fff; padding: 9px 20px; font-size: 1rem; }
.iti-calculer:hover { background: #5d8e2e; }
.iti-etat { margin: 8px 0 0; font-size: .92rem; color: #4b5563; }
.iti-etat:empty { display: none; }
.iti-etat--erreur { color: #b3261e; }
.iti-resume { font-size: 1.15rem; font-weight: 600; margin: 10px 0 4px; }
.iti-etapes { font-size: .92rem; padding-left: 20px; margin: 6px 0 0; }
.iti-etapes li { padding: 2px 0; }