/*
 | Le carrousel des témoignages — affichage public.
 |
 | Deux états, et c'est la clef de cette feuille :
 |
 |  - **sans JavaScript**, les cartes montrent tout leur texte, la piste se fait
 |    défiler à la main, et les commandes (flèches, curseurs, « Lire plus ») sont
 |    masquées : elles ne mèneraient nulle part.
 |  - **avec JavaScript** (`.cw-tem--js`, posée par le script), le texte est
 |    écourté, les commandes apparaissent, et « Lire plus » ouvre la fenêtre.
 |
 | Le défilement s'appuie sur le scroll natif avec accroche : la piste reste
 | utilisable au doigt et au clavier sans qu'on ait à réécrire ces comportements.
 |
 | Feuille scopée sous `.cw-tem` : elle est chargée dans un thème qui a la
 | sienne, aucune règle ne doit fuir.
 */

.cw-tem {
    /*
     | Valeurs relevees dans le Figma (`Avis Clients Tripadvisor`, 1440 et 375) :
     |
     |   section    padding 96 48 (64 16), gap 56 (32), fond #ffffff
     |   surtitre   Familjen Grotesk SemiBold 14 / -2 %, #2d3e46, capitales
     |   titre      STIX Two Text 56 / 61,6 / -3 %, #1c1917  (36 en mobile)
     |   cartes     ecart 24, padding 32, fond #d8d3c6, rayon 12
     |   texte      14 / 17,36 / -2 %, #44403c
     |   fleches    56 x 56, fond #d8d3c6, glyphe #1c1917
     |   curseurs   ecart 8 ; l'actif est une GELULE #2d3e46, les autres des
     |              ronds #d6d3d1
     |
     | Le fond de la section est BLANC, alors que la page est beige : c'est la
     | seule section de l'accueil dans ce cas, et c'est ce qui la detache.
     */
    --cw-tem-marge: 96px 48px;
    --cw-tem-fond: #fff;
    --cw-tem-encre: #1c1917;
    --cw-tem-surtitre-encre: #2d3e46;
    --cw-tem-texte: #44403c;
    --cw-tem-discret: #78716c;
    --cw-tem-carte: #d8d3c6;
    --cw-tem-etoile: #c3ad82;
    --cw-tem-blanc: #fff;
    --cw-tem-bord: #d6d3d1;
    --cw-tem-rayon: 12px;
    --cw-tem-titre: "STIX Two Text", Georgia, "Times New Roman", serif;
    --cw-tem-visibles: 3;
    --cw-tem-ecart: 24px;

    box-sizing: border-box;
    padding: var(--cw-tem-marge);
    background: var(--cw-tem-fond);
    color: var(--cw-tem-texte);
    font-size: 16px;
    line-height: 1.24;
}

.cw-tem *,
.cw-tem *::before,
.cw-tem *::after {
    box-sizing: inherit;
}

.cw-tem-vide {
    padding: 1rem;
    border: 1px dashed #c9a227;
    background: #fffbe6;
    color: #6b5900;
    font-size: 0.9em;
}

/* ── En-tête ─────────────────────────────────────────────────────────────── */

.cw-tem-entete {
    max-width: 640px;
    margin: 0 auto 2.75rem;
    text-align: center;
}

.cw-tem-surtitre {
    /* 16 px sous le surtitre, c'est le `gap` de l'en-tete dans la maquette. */
    margin: 0 0 16px;
    color: var(--cw-tem-surtitre-encre);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cw-tem-titre {
    margin: 0;
    padding: 0;
    color: var(--cw-tem-encre);
    font-family: var(--cw-tem-titre);
    font-size: 56px;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.cw-tem-titre em {
    font-style: italic;
}

/* ── Le carrousel ────────────────────────────────────────────────────────── */

.cw-tem-carrousel {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/*
 | La piste : une grille horizontale à défilement, avec accroche. Chaque carte
 | occupe une fraction de la largeur visible, d'où `--cw-tem-visibles` — et non
 | une largeur en pixels, qui ne suivrait pas le conteneur.
 */
.cw-tem-piste {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--cw-tem-visibles) - 1) * var(--cw-tem-ecart)) / var(--cw-tem-visibles));
    gap: var(--cw-tem-ecart);
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* La barre de défilement est masquée : les flèches et les curseurs la
       remplacent, et elle couperait le bas des cartes. */
    scrollbar-width: none;
}

.cw-tem-piste::-webkit-scrollbar {
    display: none;
}

.cw-tem-carte {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px;
    border-radius: var(--cw-tem-rayon);
    background: var(--cw-tem-carte);
    scroll-snap-align: start;
}

.cw-tem-etoiles {
    display: flex;
    gap: 4px;
    margin: 0;
}

.cw-tem-etoile {
    width: 1em;
    height: 1em;
    fill: var(--cw-tem-bord);
}

.cw-tem-etoile.is-pleine {
    fill: var(--cw-tem-etoile);
}

/*
 | Les deux valeurs de la maquette, en pixels et non en `em`.
 |
 | Elles etaient approximees : 0,95 em donnait 15,2 px la ou le Figma demande
 | 18, et 0,8 em un corps de texte de 12,8 px pour 14 attendus. Un `em` se lit
 | comme une proportion du parent — pratique quand la taille est libre, faux des
 | qu'une maquette pose un chiffre.
 |
 | Interlignes : 22,3 / 18 et 17,4 / 14 valent tous deux 1,24, le rapport que le
 | bloc applique deja.
 */
.cw-tem-carte-titre {
    margin: 0 0 0.7rem;
    padding: 0;
    color: var(--cw-tem-encre);
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.24;
}

.cw-tem-texte p {
    margin: 0 0 0.7em;
    font-size: 14px;
    line-height: 1.24;
}

.cw-tem-auteur {
    margin: 0.2rem 0 0;
    color: var(--cw-tem-discret);
    font-size: 0.76em;
    font-style: italic;
}

/*
 | Sans script, les commandes ne mènent nulle part : on ne les montre pas, et le
 | texte reste entier dans la carte.
 */
.cw-tem-fleche,
.cw-tem-plus,
.cw-tem-curseurs,
.cw-tem-voile {
    display: none;
}

/* ── Avec JavaScript ─────────────────────────────────────────────────────── */

.cw-tem--js .cw-tem-texte {
    /* Quatre lignes, puis « Lire plus ». Le texte entier reste dans le HTML. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    margin-bottom: 1rem;
}

.cw-tem--js .cw-tem-texte p {
    margin-bottom: 0;
}

.cw-tem--js .cw-tem-plus {
    display: inline-block;
    align-self: flex-start;
    margin-top: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cw-tem-encre);
    font: inherit;
    font-size: 0.82em;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

.cw-tem--js .cw-tem-plus:hover {
    text-decoration: underline;
}

.cw-tem--js .cw-tem-fleche {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--cw-tem-bord);
    border-radius: 50%;
    background: transparent;
    color: var(--cw-tem-encre);
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.cw-tem--js .cw-tem-fleche:hover:not(:disabled) {
    background: var(--cw-tem-carte);
}

.cw-tem--js .cw-tem-fleche:disabled {
    opacity: 0.3;
    cursor: default;
}

.cw-tem-fleche svg {
    width: 20px;
    height: 20px;
}

.cw-tem--js .cw-tem-curseurs {
    display: flex;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 2rem;
}

/*
 | Le curseur actif s'allonge au lieu de changer de couleur : la position se lit
 | d'un coup d'œil, même en niveaux de gris.
 */
.cw-tem-curseur {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--cw-tem-bord);
    cursor: pointer;
    transition: width 0.2s ease, background-color 0.2s ease;
}

/*
 | L'actif est une gelule de 24 px, les autres des ronds de 8 : c'est ce que
 | montre la maquette, et c'est plus lisible qu'un simple changement de couleur
 | pour qui distingue mal les teintes.
 */
.cw-tem-curseur.is-actif {
    width: 24px;
    background: var(--cw-tem-surtitre-encre);
}

/* ── La fenêtre de lecture ───────────────────────────────────────────────── */

.cw-tem--js .cw-tem-voile {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    inset: 0;
    padding: 1rem;
    background: rgb(38 44 47 / 45%);
    z-index: 10000;
}

.cw-tem--js .cw-tem-voile[hidden] {
    display: none;
}

.cw-tem-fiche {
    position: relative;
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    overflow: auto;
    padding: 1.9rem;
    border-radius: 14px;
    background: var(--cw-tem-blanc);
    box-shadow: 0 10px 40px rgb(0 0 0 / 22%);
}

.cw-tem-fermer {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cw-tem-discret);
    cursor: pointer;
}

.cw-tem-fermer:hover {
    color: var(--cw-tem-encre);
}

.cw-tem-fermer svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Dans la fenêtre, le texte n'est plus écourté : c'est tout l'objet du clic. */
.cw-tem-fiche-corps .cw-tem-texte {
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
    margin-bottom: 0;
}

.cw-tem-fiche-corps .cw-tem-carte-titre {
    margin: 0 2rem 1rem 0;
    font-family: var(--cw-tem-titre);
    font-size: 1.25em;
    font-weight: 400;
}

.cw-tem-fiche-corps .cw-tem-texte p {
    margin: 0 0 0.85em;
    font-size: 14px;
    line-height: 1.7;
}

.cw-tem-fleches {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.5rem;
}

.cw-tem--js .cw-tem-fleche--petite {
    width: 34px;
    height: 34px;
}

.cw-tem-fleche--petite svg {
    width: 18px;
    height: 18px;
}

/* ── Écrans plus étroits ─────────────────────────────────────────────────── */

@media (max-width: 1000px) {
    .cw-tem {
        --cw-tem-visibles: 2;
    }

    .cw-tem-titre {
        font-size: 2em;
    }
}

@media (max-width: 680px) {
    .cw-tem {
        --cw-tem-visibles: 1;
    }

    /*
     | Les flèches passeraient à l'étroit de part et d'autre d'une carte unique :
     | on les retire et l'on s'en remet au défilement au doigt, plus naturel là.
     */
    .cw-tem--js .cw-tem-fleche:not(.cw-tem-fleche--petite) {
        display: none;
    }

    .cw-tem-titre {
        font-size: 1.7em;
    }

    .cw-tem-fiche {
        padding: 1.4rem;
    }
}


/* ── Mobile ──────────────────────────────────────────────────────────────── */

/*
 | Valeurs de `Homepage - 375` : marge 64 16, ecart entre l'en-tete et les
 | cartes ramene a 32, titre a 36 px.
 */
@media (max-width: 782px) {
    .cw-tem {
        --cw-tem-marge: 64px 16px;
        --cw-tem-visibles: 1;
    }

    .cw-tem-titre {
        font-size: 36px;
    }
}