/* ========== REVIEWS STRIP (dark variant of blocks/city-reviews.php) ========== */
/* Bandeau noir sous le hero : une seule rangée de 4 témoignages, sans cartes.
   Autonome (la page d'accueil ne charge pas city-home.css) et plus spécifique
   que les styles de cartes de city-home.css, donc l'ordre de chargement
   n'a pas d'importance. */

.reviews-section.reviews-section-dark {
    background: #000;
    padding: 46px 0 50px;
}

.reviews-section-dark .container {
    max-width: 1500px;
}

/* Le titre reste dans le DOM pour le plan de la page, mais pas à l'écran */
.reviews-section-dark:not(.reviews-section-titled) .reviews-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Variante avec titre visible (fiche jeu) : titre aligné à gauche, comme en 2023 */
.reviews-section-dark.reviews-section-titled .container {
    max-width: 1100px;
}

.reviews-section-titled .reviews-title {
    margin: 0 0 34px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.02em;
    text-align: left;
    text-transform: uppercase;
    color: #fff;
}

.reviews-section-titled .reviews-aggregate {
    margin: -22px 0 34px;
    font-family: 'Hind', sans-serif;
    font-size: 1rem;
    text-align: left;
    color: rgba(255, 255, 255, 0.75);
}

.reviews-section-titled .reviews-aggregate b {
    color: #fff;
}

.reviews-section-titled .reviews-aggregate-stars {
    color: #f5b921;
}

.reviews-section-dark.reviews-section-titled .review-card {
    align-items: flex-start;
    text-align: left;
}

.reviews-section-dark .reviews-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px 48px;
    max-width: none;
    margin: 0 auto;
}

.reviews-section-dark .review-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
}

.reviews-section-dark .review-stars {
    color: #f5b921;
    font-size: 1.15rem;
    line-height: 1;
    letter-spacing: 3px;
    margin: 0 0 12px;
}

.reviews-section-dark .review-text {
    flex: 0 1 auto;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    font-family: 'Hind', sans-serif;
    font-size: 1rem;
    font-style: italic;
    line-height: 1.6;
    color: #fff;
}

.reviews-section-dark .review-text::before {
    content: '\201C';
}

.reviews-section-dark .review-text::after {
    content: '\201D';
}

/* Guillemets français, avec espaces insécables */
html[lang="fr"] .reviews-section-dark .review-text::before {
    content: '\00AB\00A0';
}

html[lang="fr"] .reviews-section-dark .review-text::after {
    content: '\00A0\00BB';
}

.reviews-section-dark .review-author {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.85);
}

/* Ville apres le nom (accueil du site : un temoignage par ville) */
.reviews-section-dark .review-city {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
}

/* Tablette : 2 x 2 */
@media (max-width: 991px) {
    .reviews-section-dark .reviews-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px 36px;
    }
}

/* Mobile : plutot qu'une pile de quatre blocs (un plein ecran de noir sans
   titre), une rangee de cartes a faire glisser au doigt (scroll-snap, sans
   JS). Une carte a la fois, la suivante depasse a droite pour inviter a
   glisser. Le titre, masque sur les autres ecrans, revient en petit surtitre
   pour situer la section. */
@media (max-width: 575px) {
    .reviews-section.reviews-section-dark {
        padding: 30px 0 34px;
    }

    /* Bord a bord quel que soit le padding du .container (50 % du contenu
       moins la moitie de l'ecran = la gouttiere, en negatif) */
    .reviews-section-dark:not(.reviews-section-titled) .reviews-title,
    .reviews-section-dark .reviews-grid {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    .reviews-section-dark:not(.reviews-section-titled) .reviews-title {
        position: static;
        width: auto;
        height: auto;
        margin-top: 0;
        margin-bottom: 14px;
        padding: 0 20px;
        overflow: visible;
        clip: auto;
        white-space: normal;
        font-family: 'Montserrat', sans-serif;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        text-align: left;
        color: rgba(255, 255, 255, 0.55);
    }

    .reviews-section-dark .reviews-grid {
        display: flex;
        gap: 12px;
        padding: 0 20px 6px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 20px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .reviews-section-dark .reviews-grid::-webkit-scrollbar {
        display: none;
    }

    /* Carte : citation en haut, auteur a gauche et etoiles a droite en bas */
    .reviews-section-dark .review-card {
        flex: 0 0 min(82%, 340px);
        scroll-snap-align: start;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "text text" "author stars";
        align-items: end;
        gap: 14px 12px;
        padding: 18px 20px 16px;
        background: #141414;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        text-align: left;
    }

    .reviews-section-dark .review-text {
        grid-area: text;
        margin: 0;
    }

    .reviews-section-dark .review-author {
        grid-area: author;
    }

    .reviews-section-dark .review-stars {
        grid-area: stars;
        margin: 0;
        font-size: 0.9rem;
        letter-spacing: 2px;
    }

    .reviews-section-titled .reviews-title {
        font-size: 1.3rem;
        padding: 0 10px;
    }

    .reviews-section-titled .reviews-aggregate {
        padding: 0 10px;
    }
}

/* ========== TON CLAIR ($reviews_variant = 'light', accueil du site et landing ville) ==========
   Meme bandeau, palette des sections claires de city-home.css : sous le hero
   sombre, un bandeau noir faisait deux bandes noires a la suite (et sur
   l'accueil du site le footer sombre suit directement). Le filet du bas
   garde un bord au bandeau quand une section blanche suit (landing ville).
   reviews-section-dark reste la classe de mise en page ; reviews-section-light
   ne change que les couleurs. */
.reviews-section.reviews-section-dark.reviews-section-light {
    background: #f8f8f8;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
}

/* Variante titree (fiche jeu) : titre et note moyenne en sombre */
.reviews-section-dark.reviews-section-light .reviews-title {
    color: #181818;
}

.reviews-section-dark.reviews-section-light .reviews-aggregate {
    color: rgba(0, 0, 0, 0.6);
}

.reviews-section-dark.reviews-section-light .reviews-aggregate b {
    color: #181818;
}

.reviews-section-dark.reviews-section-light .reviews-aggregate-stars {
    color: #f5a623;
}

.reviews-section-dark.reviews-section-light .review-stars {
    color: #f5a623;
}

.reviews-section-dark.reviews-section-light .review-text {
    color: #222;
}

.reviews-section-dark.reviews-section-light .review-author {
    color: #181818;
}

.reviews-section-dark.reviews-section-light .review-city {
    color: rgba(0, 0, 0, 0.5);
}

@media (max-width: 575px) {
    .reviews-section-dark.reviews-section-light .reviews-title {
        color: rgba(0, 0, 0, 0.5);
    }

    .reviews-section-dark.reviews-section-light .review-card {
        background: #fff;
        border-color: #eee;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    }
}