/*
 | La bande « Pourquoi nous choisir » — affichage public.
 |
 | Le principe tient en une phrase : **une seule carte est au milieu**, et c'est
 | elle qui grandit, prend sa couleur et montre son texte. Les autres restent des
 | pastilles. La bande avance d'un cran à la fois, et boucle.
 |
 | Le défilement s'appuie sur le **scroll natif** avec accroche au centre
 | (`scroll-snap-align: center`) plutôt que sur des transformes : la bande reste
 | balayable au doigt, utilisable au pavé tactile et au clavier sans qu'on ait à
 | réécrire ces trois comportements.
 |
 | Toutes les cartes ont la **même boîte**, quelle que soit celle qui est au
 | milieu : le passage de l'une à l'autre ne provoque donc aucune reprise de mise
 | en page, et rien ne saute sous les yeux pendant le défilement. Le zoom est un
 | `transform`, qui ne coûte rien au navigateur et n'entraîne aucun reflux.
 |
 | Feuille scopée sous `.cw-pou` : elle est chargée dans un thème qui a la
 | sienne, aucune règle ne doit fuir. Les couleurs passent par des variables que
 | le thème peut redéfinir ; celle de chaque atout est posée sur son élément par
 | le rendu PHP.
 */

.cw-pou {
    /*
     | Valeurs relevees dans le Figma (`Bandeau reassurance`, 1440 et 375) :
     |
     |   section    padding 96 80 (64 16 en mobile), gap 56 (32), centre
     |   surtitre   Familjen Grotesk SemiBold 14 / -2 %, #2d3e46, capitales
     |   titre      STIX Two Text 56 / 61,6 / -3 %, #1c1917  (36 en mobile)
     |   rangee     ecart 20 px
     |   carte      gap 24, padding 24, rayon 16 ; ouverte : rayon 12
     |   libelle    STIX Two Text 24 / 26,4 / -3 %, #171c1d, centre
     |
     | Le libelle est un SERIF de 24 px, pas un petit texte : c'est ce qui donne
     | son poids a chaque atout, et c'est ce que la maquette montre.
     */
    --cw-pou-marge: 96px 80px;
    --cw-pou-encre: #1c1917;
    --cw-pou-surtitre-encre: #2d3e46;
    --cw-pou-texte: #44403c;
    --cw-pou-clair: #f2ede3;
    --cw-pou-bord: #d9d3c7;
    --cw-pou-titre-police: "STIX Two Text", Georgia, "Times New Roman", serif;

    /*
     | Mesures du Figma. Fermée : carte 327 × 258, boîte de forme 279 × 160,
     | disque 199, icône 100. Ouverte : carte 432, boîte 384 × 188, disque 273,
     | icône 122 — et la description dans son propre bloc de 92 px.
     */
    --cw-pou-creneau: 327px;    /* la largeur d'un cran */
    --cw-pou-carte: 258px;      /* la hauteur d'une carte fermée */
    --cw-pou-boite: 160px;      /* la boîte qui écrête le disque */
    --cw-pou-disque: 199px;     /* le disque, plus grand que sa boîte */
    --cw-pou-icone: 100px;      /* l'illustration, par-dessus */
    --cw-pou-ecart: 20px;
    --cw-pou-zoom: 1;
    --cw-pou-repos: 0.84;

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

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

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

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

.cw-pou-entete {
    max-width: 620px;
    margin: 0 auto 2.5rem;
    text-align: center;
}

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

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

/* L'italique de fin est un champ à part : l'éditeur n'a aucune balise à taper. */
.cw-pou-titre em {
    display: block;
    font-style: italic;
}

/* ── La bande ────────────────────────────────────────────────────────────── */

.cw-pou-bande {
    position: relative;
}

.cw-pou-piste {
    display: flex;
    gap: 0;
    margin: 0;
    /*
     | Le rembourrage vaut une demi-largeur visible moins un demi-créneau : c'est
     | ce qui permet au tout premier atout — comme au dernier — de venir se poser
     | au milieu. Sans lui, ils resteraient collés aux bords, hors du seul endroit
     | où une carte s'ouvre.
     */
    padding: 2.5rem calc(50% - var(--cw-pou-creneau) / 2);
    overflow-x: auto;
    overflow-y: hidden;
    list-style: none;
    scroll-snap-type: x mandatory;
    /* La barre est masquée mais le défilement reste : la bande se balaie au
       doigt, se pousse au pavé tactile et répond aux flèches du clavier. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

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

.cw-pou-piste:focus-visible {
    outline: 2px solid var(--cw-pou-encre);
    outline-offset: -4px;
}

.cw-pou-atout {
    flex: 0 0 var(--cw-pou-creneau);
    scroll-snap-align: center;
    /* L'accroche ne doit jamais s'arrêter entre deux crans : une carte à moitié
       ouverte au milieu n'aurait aucun sens. */
    scroll-snap-stop: always;
}

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

.cw-pou-carte {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    min-height: var(--cw-pou-carte);
    /* L'ecart de 20 px de la maquette, pose en marge : la piste defile, un
       `gap` y fausserait le calcul d'un cran. */
    margin: 0 calc(var(--cw-pou-ecart) / 2);
    padding: 24px;
    border-radius: 16px;
    background: transparent;
    text-align: center;
    transform: scale(var(--cw-pou-repos));
    transition: transform 0.45s ease, background-color 0.45s ease, color 0.45s ease;
}

/* La carte du milieu : son fond, sa taille, et son texte qui paraît. */
/*
 | Ouverte, la carte grandit pour de bon : disque de 273 au lieu de 199, boite de
 | 188 au lieu de 160, icone de 122 au lieu de 100. Ce ne sont pas les memes
 | proportions qu'un simple agrandissement — la maquette redessine la carte.
 */
/*
 | Ouverte, la carte est plus LARGE que son créneau : 432 contre 327. Elle
 | déborde donc de part et d'autre, ce que la maquette montre bien — les cartes
 | voisines passent dessous. Le créneau, lui, ne bouge pas : c'est lui qui cale
 | l'accroche du défilement, et le faire varier ferait sauter le calcul d'un cran.
 */
.cw-pou-atout.is-centre {
    --cw-pou-boite: 188px;
    --cw-pou-disque: 273px;
    --cw-pou-icone: 122px;

    position: relative;
    z-index: 2;
}

.cw-pou-atout.is-centre .cw-pou-carte {
    width: 432px;
    /* Centrée sur son créneau : (432 − 327) / 2 de chaque côté. */
    margin-right: calc((327px - 432px) / 2);
    margin-left: calc((327px - 432px) / 2);
}

/* Ouverte, la carte prend son fond et un rayon plus doux : 12 contre 16. */
.cw-pou-atout.is-centre .cw-pou-carte {
    border-radius: 12px;
    background: var(--cw-pou-fond);
    color: var(--cw-pou-clair);
    transform: scale(var(--cw-pou-zoom));
}

/*
 | La boîte du titre fait deux lignes, toujours, et le texte se cale en bas.
 | Sans cela, « Un salon chic et cosy » sur une ligne et « Un transport
 | responsable » sur deux poseraient leurs pastilles à deux hauteurs
 | différentes, et la rangée serait de travers.
 */
.cw-pou-nom {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 2.2em;
    margin: 0;
    color: #171c1d;
    font-family: var(--cw-pou-titre-police);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.1;
    transition: color 0.45s ease;
}

.cw-pou-nom em {
    font-style: italic;
}

.cw-pou-atout.is-centre .cw-pou-nom {
    color: inherit;
}

/*
 | La pastille : un CERCLE TRONQUÉ en haut et en bas.
 |
 | Le Figma pose un cercle de 199 px dans une boîte de 160 : il déborde de
 | 19,5 px de chaque côté, et la boîte l'écrête. D'où une boîte qui masque, et
 | un cercle plus haut qu'elle — et non un `clip-path` en octogone, qui était mon
 | erreur de lecture.
 |
 | Le cercle garde sa couleur ouverte comme fermée : c'est la couleur de l'atout,
 | celle à laquelle on le reconnaît de loin. Seul le fond de la carte change.
 */
.cw-pou-forme {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--cw-pou-boite);
    overflow: hidden;
    border-radius: 16px;
}

/* Le disque, plus grand que sa boîte : c'est lui qu'on écrête. */
.cw-pou-forme::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--cw-pou-disque);
    height: var(--cw-pou-disque);
    border-radius: 50%;
    background: var(--cw-pou-couleur);
    content: '';
    transform: translate(-50%, -50%);
    transition: background-color 0.45s ease, width 0.45s ease, height 0.45s ease;
}

/* L'illustration se pose par-dessus le disque. */
.cw-pou-illustration {
    position: relative;
    width: var(--cw-pou-icone);
    height: var(--cw-pou-icone);
    object-fit: contain;
    transition: width 0.45s ease, height 0.45s ease;
}

.cw-pou-illustration {
    display: block;
    width: 58%;
    height: 58%;
    object-fit: contain;
}

/*
 | Le texte est **toujours dans la page** — il n'est qu'effacé sur les cartes de
 | côté. C'est ce qui rend la bande indexable en entier, et ce qui garantit que
 | la carte ne change pas de taille en s'ouvrant : la place du texte est déjà
 | prise, même quand on ne le voit pas.
 */
/*
 | La légende a SON PROPRE BLOC, séparé de celui du titre et de la forme — c'est
 | ainsi que la maquette la pose, et c'est pourquoi elle ne peut pas être coupée :
 | rien ne la contraint en hauteur. Fermée, elle est simplement absente.
 */
.cw-pou-texte {
    margin-top: 24px;
    color: var(--cw-pou-clair);
    font-size: 14px;
    line-height: 1.24;
    opacity: 0;
    transition: opacity 0.45s ease;
}


.cw-pou-atout.is-centre .cw-pou-texte {
    opacity: 1;
}

.cw-pou-texte p {
    margin: 0 0 0.6em;
    /*
     | Une description trop longue s'achève par des points de suspension plutôt
     | que d'être tranchée net au bas de la carte. Trois lignes : c'est ce que la
     | carte peut montrer, et la limite est ici pour que le texte s'y arrête
     | proprement au lieu d'être coupé au milieu d'un mot.
     */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.cw-pou-texte p:last-child {
    margin-bottom: 0;
}

/* ── Flèches ─────────────────────────────────────────────────────────────── */

.cw-pou-fleche {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--cw-pou-bord);
    border-radius: 50%;
    background: #fff;
    color: var(--cw-pou-encre);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.cw-pou-fleche--avant {
    left: 0;
}

.cw-pou-fleche--apres {
    right: 0;
}

.cw-pou-fleche:hover,
.cw-pou-fleche:focus-visible {
    background: var(--cw-pou-encre);
    color: #fff;
}

/* Sans le script, elles ne mèneraient nulle part. */
.cw-pou:not(.cw-pou--js) .cw-pou-fleche,
.cw-pou:not(.cw-pou--js) .cw-pou-curseurs {
    display: none;
}

/* ── Curseurs ────────────────────────────────────────────────────────────── */

.cw-pou-curseurs {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.cw-pou-curseur {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cw-pou-bord);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.cw-pou-curseur.is-actif {
    background: var(--cw-pou-encre);
    transform: scale(1.25);
}

/* ── Écrans moyens ───────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .cw-pou {
        --cw-pou-creneau: 214px;
        --cw-pou-carte: 320px;
        --cw-pou-forme: 124px;
    }

    .cw-pou-titre {
        font-size: 2.1em;
    }
}

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

/*
 | La bande ne change pas de nature au téléphone : c'est déjà un ruban qu'on fait
 | glisser. Seules les tailles se resserrent, et les flèches s'effacent — le
 | doigt fait mieux qu'elles, et elles mangeraient la largeur des cartes.
 */
@media (max-width: 782px) {
    .cw-pou {
        --cw-pou-creneau: 202px;
        --cw-pou-carte: 312px;
        --cw-pou-forme: 114px;
        --cw-pou-repos: 0.8;

        padding: 0.5rem 0 1.5rem;
    }

    .cw-pou-entete {
        margin-bottom: 1.75rem;
        padding: 0 1.25rem;
    }

    .cw-pou-titre {
        font-size: 1.8em;
    }

    .cw-pou-fleche {
        display: none;
    }

    .cw-pou-piste {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

/* ── Confort de lecture ──────────────────────────────────────────────────── */

/*
 | Un mouvement permanent gêne certaines personnes, et le système le dit. Le
 | défilement automatique s'arrête alors (c'est le script qui s'en charge) et les
 | transitions tombent : la bande reste utilisable, elle ne bouge plus toute
 | seule.
 */
@media (prefers-reduced-motion: reduce) {
    .cw-pou-carte,
    .cw-pou-nom,
    .cw-pou-forme,
    .cw-pou-texte,
    .cw-pou-fleche,
    .cw-pou-curseur {
        transition: none;
    }
}