/*
 | La ronde des monuments — affichage public.
 |
 | Valeurs relevées dans le Figma (`section-itinerary`, 1440 et 375) :
 |
 |   section    padding 96 48 (64 16 en mobile), gap 56, centré
 |   surtitre   Familjen Grotesk SemiBold 14 / −2 %, #2d3e46, capitales
 |   titre      STIX Two Text ITALIQUE 56 / 50,4 / −3 %, #1c1917
 |   texte      Familjen Grotesk 18 / 22,32 / −2 %, #44403c
 |   carte      309 × 400 (232 × 300 en mobile), rayon 16, padding 24
 |   nom        STIX Two Text 20 / 24,8 / −3 %, #ffffff
 |   légende    Familjen Grotesk 14 / 17,36 / −2 %, #e7e5e4
 |
 | ── L'arc ────────────────────────────────────────────────────────────────
 |
 | Chaque carte est placée par sa DISTANCE à celle du milieu, et rien d'autre.
 | Le calcul est fait en CSS à partir de deux nombres : le rang de la carte
 | (`--cw-mon-rang`, écrit par le serveur) et le rang courant de la ronde
 | (`--cw-mon-centre`, écrit par le script). Leur différence donne la place.
 |
 | Faire ce calcul en CSS plutôt qu'en JavaScript a une conséquence utile :
 | **sans script, l'arc est déjà dessiné** — centré sur le premier monument. Le
 | script ne fait que changer un nombre.
 |
 | L'interligne du titre est à 90 % : c'est la règle des titres italiques du
 | Figma, et c'est ce qui rapproche les deux lignes au lieu de les laisser
 | flotter.
 */

.cw-mon {
    --cw-mon-marge: 96px 48px;
    --cw-mon-fond: transparent;
    --cw-mon-encre: #1c1917;
    --cw-mon-surtitre-encre: #2d3e46;
    --cw-mon-texte-encre: #44403c;
    --cw-mon-titre-police: "STIX Two Text", Georgia, "Times New Roman", serif;

    /* La carte, et l'arc sur lequel elle se pose. */
    --cw-mon-largeur: 309px;
    --cw-mon-hauteur: 400px;
    --cw-mon-ecart: 356px;   /* décalage horizontal par cran */
    --cw-mon-angle: 15deg;   /* rotation par cran */
    --cw-mon-descente: 47px; /* descente au premier cran */
    --cw-mon-centre: 0;      /* le rang au milieu — le script le change */

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

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

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

/* ── L'en-tête ───────────────────────────────────────────────────────────── */

.cw-mon-entete {
    /* 56 px entre l'en-tête et la ronde : le `gap` de la section. */
    margin: 0 auto 56px;
    max-width: 42em;
}

.cw-mon-surtitre {
    /* 16 px, le `gap` interne de l'en-tête. */
    margin: 0 0 16px;
    color: var(--cw-mon-surtitre-encre);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

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

/*
 | La fin du titre est en italique et sur sa propre ligne, avec un interligne
 | resserré à 90 % — la règle du Figma pour les titres italiques.
 */
.cw-mon-titre em {
    display: block;
    font-style: italic;
    line-height: 0.9;
}

.cw-mon-texte {
    margin: 0;
    color: var(--cw-mon-texte-encre);
    font-size: 18px;
    letter-spacing: -0.02em;
    line-height: 1.24;
}

/* ── La scène ────────────────────────────────────────────────────────────── */

/*
 | La scène a une hauteur fixe et cache ce qui déborde : les cartes des extrémités
 | sortent volontairement du cadre, comme sur la maquette, où l'on n'en voit
 | qu'un morceau.
 */
.cw-mon-scene {
    position: relative;
    height: calc(var(--cw-mon-hauteur) + 120px);
    overflow: hidden;
}

.cw-mon-ronde {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ── Une carte ───────────────────────────────────────────────────────────── */

/*
 | `--cw-mon-d` est la distance signée au centre. Tout en découle :
 | le décalage (d × écart), la rotation (d × angle) et la descente, qui suit le
 | CARRÉ de la distance — 47 px à un cran, 189 à deux, soit quatre fois plus.
 | C'est ce qui donne la courbe plutôt qu'une pente.
 */
.cw-mon-carte {
    --cw-mon-d: calc(var(--cw-mon-rang) - var(--cw-mon-centre));

    position: absolute;
    top: 0;
    left: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: var(--cw-mon-largeur);
    height: var(--cw-mon-hauteur);
    padding: 24px;
    overflow: hidden;
    border-radius: 16px;
    text-align: left;
    transform:
        translateX(calc(-50% + var(--cw-mon-d) * var(--cw-mon-ecart)))
        translateY(calc(var(--cw-mon-d) * var(--cw-mon-d) * var(--cw-mon-descente)))
        rotate(calc(var(--cw-mon-d) * var(--cw-mon-angle)));
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.55s ease;
}

/*
 | Cinq cartes sont visibles — celles de −2 à +2 crans —, comme dans la maquette,
 | où les deux extrêmes sont coupées par le bord. Au-delà, la carte s'efface :
 | sans cela elle réapparaîtrait dans un coin sur un large moniteur.
 |
 | Le carré de la distance sert de mesure faute de `abs()`, qui n'est pas partout :
 | à deux crans il vaut 4 et la carte reste pleine, à trois il vaut 9 et elle a
 | disparu.
 */
.cw-mon-carte {
    opacity: clamp(0, calc((9 - var(--cw-mon-d) * var(--cw-mon-d)) / 5), 1);
}

.cw-mon-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* La photo remplit la carte sans se déformer : le rognage se fait sur le
       plus grand côté, jamais par étirement. */
    object-fit: cover;
}

/*
 | Le voile : un dégradé du bas vers le milieu. Il ne teinte pas la photo
 | entière — seulement le pied, là où le texte se pose. Sans lui, un nom blanc
 | sur un ciel clair devient illisible.
 */
.cw-mon-voile {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 65%) 0%, rgb(0 0 0 / 25%) 35%, rgb(0 0 0 / 0%) 60%);
}

.cw-mon-legende {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cw-mon-nom {
    color: #fff;
    font-family: var(--cw-mon-titre-police);
    font-size: 20px;
    letter-spacing: -0.03em;
    line-height: 1.24;
}

.cw-mon-sous {
    color: #e7e5e4;
    font-size: 14px;
    letter-spacing: -0.02em;
    line-height: 1.24;
}

/* ── Les commandes ───────────────────────────────────────────────────────── */

.cw-mon-commandes {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

.cw-mon-fleche {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d8d3c6;
    color: #1c1917;
    cursor: pointer;
}

.cw-mon-fleche:hover {
    filter: brightness(0.95);
}

.cw-mon-curseurs {
    display: flex;
    gap: 8px;
    align-items: center;
}

.cw-mon-curseur {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #d6d3d1;
    cursor: pointer;
    transition: width 0.2s ease, background-color 0.2s ease;
}

/* L'actif est une gélule, pas un rond d'une autre couleur : cela reste lisible
   pour qui distingue mal les teintes. */
.cw-mon-curseur.is-actif {
    width: 24px;
    background: var(--cw-mon-surtitre-encre);
}

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

/*
 | Valeurs de `Homepage - 375` : marge 64 16, cartes 232 × 300. Les rotations ne
 | changent pas — c'est le même arc, à une autre échelle. Le décalage et la
 | descente suivent la carte.
 */
@media (max-width: 782px) {
    .cw-mon {
        --cw-mon-marge: 64px 16px;
        --cw-mon-largeur: 232px;
        --cw-mon-hauteur: 300px;
        --cw-mon-ecart: 267px;
        --cw-mon-descente: 36px;
    }

    .cw-mon-entete {
        margin-bottom: 32px;
    }

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

    .cw-mon-scene {
        height: calc(var(--cw-mon-hauteur) + 90px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cw-mon-carte,
    .cw-mon-curseur {
        transition: none;
    }
}