/*
 | Le bandeau de privatisation — affichage public.
 |
 | Aucun JavaScript : un bandeau se lit, il ne s'anime pas. Tout est posé ici et
 | par le HTML rendu côté serveur.
 |
 | Les deux couleurs viennent de la base, en variables posées sur la section. Le
 | bouton les **inverse** — encre en fond, fond en encre : il contraste donc
 | toujours avec le bandeau, sans qu'on ait à choisir une troisième couleur ni à
 | vérifier qu'elle s'accorde aux deux autres.
 |
 | Feuille scopée sous `.cw-pri` : elle est chargée dans un thème qui a la
 | sienne, aucune règle ne doit fuir.
 */

.cw-pri {
    /*
     | Valeurs relevees dans le Figma (`section-occasion`, 1440 et 375) :
     |
     |   section   padding 56 48 (56 16 en mobile), gap 40, centre
     |   surtitre  Familjen Grotesk SemiBold 14 / -2 %, #d8d3c6, capitales
     |   titre     STIX Two Text 56 / 61,6 / -3 %, #ffffff  (36 en mobile)
     |   texte     Familjen Grotesk 18 / 22,32 / -2 %, #e7e5e4
     |   bouton    padding 16 24, gap 16, fond #d8d3c6, rayon 64, libelle
     |             Familjen Grotesk Medium 16 / 19,84 / -2 %, #1c1917
     |
     | ⚠️ En GRAND ecran, la maquette ne pose pas de fond sur la section : elle y
     | dessine une trame de rectangles #2d3e46. En MOBILE, elle remplit la
     | section de ce meme #2d3e46. Le defaut ci-dessous est le fond plein, que le
     | theme retire ou garde selon la page — c'est lui qui sait ou l'on est.
     */
    --cw-pri-marge: 56px 48px;
    --cw-pri-fond: #2d3e46;
    --cw-pri-encre: #ffffff;
    --cw-pri-surtitre-encre: #d8d3c6;
    --cw-pri-texte-encre: #e7e5e4;
    --cw-pri-bouton-fond: #d8d3c6;
    --cw-pri-bouton-encre: #1c1917;
    --cw-pri-titre-police: "STIX Two Text", Georgia, "Times New Roman", serif;
    --cw-pri-largeur: 620px;

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

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

/*
 | Pleine largeur, sur demande seulement.
 |
 | `100vw` compte la barre de défilement : sur un thème qui n'écrête pas le
 | débordement, la page peut gagner une dizaine de pixels vers la droite. C'est
 | pourquoi ce n'est pas le défaut — dans une section déjà pleine largeur, il n'y
 | a rien à demander.
 */
.cw-pri--pleine {
    width: 100vw;
    max-width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
}

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

.cw-pri-dedans {
    max-width: var(--cw-pri-largeur);
    margin: 0 auto;
}

.cw-pri-surtitre {
    /* 16 px sous le surtitre : le `gap` de l'en-tete dans la maquette. */
    margin: 0 0 16px;
    color: var(--cw-pri-surtitre-encre);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    /* La casse est posee par la feuille, pas exigee a la saisie : on tape
       « Privatisations & evenements », on n'a pas a crier dans le champ. */
    text-transform: uppercase;
}

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

/* L'italique de fin est un champ a part : l'editeur n'a aucune balise a taper. */
.cw-pri-titre em {
    display: block;
    font-style: italic;
    /* 90 % contre 110 % : c'est ce qui rapproche la ligne italique de celle du
       dessus, au lieu de les laisser flotter. */
    line-height: 0.9;
}

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

.cw-pri-texte p {
    margin: 0 0 0.9em;
}

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

/* 40 px entre l'en-tete et le bouton : le `gap` de la section. */
.cw-pri-action {
    margin: 40px 0 0;
}

/*
 | Le bouton est un bloc clair sur le fond sombre — l'inverse exact du reste, et
 | c'est ce qui en fait la seule action qu'on voie du premier coup.
 */
.cw-pri-bouton {
    display: inline-flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    border: 1px solid var(--cw-pri-bouton-fond);
    border-radius: 64px;
    background: var(--cw-pri-bouton-fond);
    color: var(--cw-pri-bouton-encre);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.24;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cw-pri-bouton:hover,
.cw-pri-bouton:focus-visible {
    background: transparent;
    color: var(--cw-pri-bouton-fond);
}

.cw-pri-bouton:focus-visible {
    outline: 2px solid var(--cw-pri-bouton-fond);
    outline-offset: 3px;
}

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

/*
 | Valeurs de `Homepage - 375` : marge 56 16, titre 36 px. Le reste ne change
 | pas — le texte et le bouton gardent leurs corps.
 */
@media (max-width: 782px) {
    .cw-pri {
        --cw-pri-marge: 56px 16px;
    }

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

    /* Au doigt, une cible pleine largeur vaut mieux qu'une pastille a viser. */
    .cw-pri-bouton {
        display: flex;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cw-pri-bouton {
        transition: none;
    }
}