/*
 | Le bloc cadeau — affichage public.
 |
 | Valeurs relevées dans le Figma (`Gift banner`, 1440 et 375) :
 |
 |   barre     1344 × 136, flex-row, gap 24, padding 20 48 20 32, rayon 16,
 |             fond #232e33
 |   pastille  96 × 96, ronde, fond #2d3e46, padding 12
 |   titre     Familjen Grotesk 32 / 35,2 / −3 %, #ffffff, centré
 |   bouton    48 × 48, rond, fond #d8d3c6, glyphe #1c1917
 |
 |   mobile    flex-COLUMN, gap 18, padding 32 20, centré ; pastille 72,
 |             titre 28 / 30,8
 |
 | La bascule est donc plus qu'un rétrécissement : la barre change de sens. En
 | petit écran, l'icône passe au-dessus du texte et le bouton en dessous.
 |
 | Aucun JavaScript : une barre se lit et se clique.
 |
 | Feuille scopée sous `.cw-cad` : elle est chargée dans un thème qui a la
 | sienne, aucune règle ne doit fuir.
 */

.cw-cad {
    --cw-cad-largeur: 1344px;
    --cw-cad-fond: #232e33;
    --cw-cad-encre: #ffffff;

    /*
     | Les deux autres surfaces ont les valeurs de la maquette pour défaut et
     | restent surchargeables par le thème. Les demander à l'éditeur ferait
     | quatre sélecteurs de couleur pour une seule barre.
     */
    --cw-cad-pastille: #2d3e46;
    --cw-cad-bouton: #d8d3c6;
    --cw-cad-bouton-encre: #1c1917;

    /*
     | La barre s'aligne sur le contenu de la page, et ne s'etire pas au-dela :
     | 1344 px, la largeur du Figma (1440 moins deux gouttieres de 48). Sur un
     | grand ecran, une barre de 2200 px de long pour un titre de 400 se lit mal
     | et ne s'aligne plus sur les cartes du dessus.
     */
    display: flex;
    gap: 24px;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--cw-cad-largeur);
    margin-right: auto;
    margin-left: auto;
    padding: 20px 48px 20px 32px;
    border-radius: 16px;
    background: var(--cw-cad-fond);
    color: var(--cw-cad-encre);
    font-size: 16px;
    line-height: 1.24;
    text-decoration: none;
    transition: filter 0.2s ease;
}

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

/* Le thème colore les liens ; on reprend la main, y compris sur les états. */
.cw-cad,
.cw-cad:hover,
.cw-cad:focus,
.cw-cad:visited {
    color: var(--cw-cad-encre);
    text-decoration: none;
}

a.cw-cad:hover {
    filter: brightness(1.15);
}

a.cw-cad:focus-visible {
    outline: 2px solid var(--cw-cad-encre);
    outline-offset: 3px;
}

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

/* ── La pastille ─────────────────────────────────────────────────────────── */

/*
 | Un disque plein de 96 px, dessiné même sans image : c'est lui qui donne sa
 | hauteur à la barre. Le retirer ferait une barre de 76 px là où la maquette en
 | veut 136.
 */
.cw-cad-pastille {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    padding: 12px;
    border-radius: 50%;
    background: var(--cw-cad-pastille);
}

.cw-cad-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    /* Le dessin garde ses proportions dans son disque : rien n'est déformé,
       rien n'est rogné. */
    object-fit: contain;
}

/* ── Le titre ────────────────────────────────────────────────────────────── */

/*
 | ⚠️ Le titre est centré dans la place qui RESTE, pas sur la barre.
 |
 | La maquette lui donne 1072 px entre la pastille et le bouton, et l'y centre :
 | son milieu tombe donc 16 px à droite du milieu de la barre, les deux côtés
 | n'ayant pas la même largeur (32 + 96 + 24 à gauche, 24 + 48 + 48 à droite).
 | C'est ce décalage que reproduit `flex: 1`. Le centrer sur la barre serait
 | plus régulier — et ne serait pas la maquette.
 */
.cw-cad-titre {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 32px;
    letter-spacing: -0.03em;
    line-height: 1.1;
    text-align: center;
}

/* ── Le bouton fléché ────────────────────────────────────────────────────── */

.cw-cad-bouton {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 4px;
    border-radius: 50%;
    background: var(--cw-cad-bouton);
    color: var(--cw-cad-bouton-encre);
    transition: transform 0.2s ease;
}

/* Le lien avance d'un cheveu : de quoi signaler qu'il mène ailleurs, pas de
   quoi faire bouger la barre. */
a.cw-cad:hover .cw-cad-bouton,
a.cw-cad:focus-visible .cw-cad-bouton {
    transform: translateX(3px);
}

/* Sans adresse, la barre n'est plus un lien : le bouton n'a plus rien à
   annoncer et disparaît, plutôt que de promettre un ailleurs qui n'existe pas. */
.cw-cad--inerte .cw-cad-bouton {
    visibility: hidden;
}

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

/*
 | La barre passe en COLONNE, centrée : pastille de 72, titre de 28 sur deux
 | lignes, bouton en dessous. C'est la maquette 375, et non une réduction — la
 | hauteur passe de 136 à 282 px.
 */
@media (max-width: 782px) {
    .cw-cad {
        flex-direction: column;
        gap: 18px;
        justify-content: center;
        padding: 32px 20px;
        text-align: center;
    }

    .cw-cad-pastille {
        width: 72px;
        height: 72px;
        padding: 9px;
    }

    .cw-cad-titre {
        flex: none;
        font-size: 28px;
    }
}

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

    a.cw-cad:hover .cw-cad-bouton,
    a.cw-cad:focus-visible .cw-cad-bouton {
        transform: none;
    }
}