/*
 * Achat d'une carte cadeau (Site/pages/carte_cadeau_formulaire.php, carte_cadeau_suivi.php).
 * S'ajoute à reservation.css (mêmes champs, même mise en page résumé + formulaire).
 *
 * Aperçu de la carte : positions en pourcentage du modèle de Gilles (1062 × 1535 pixels), les mêmes que
 * la carte imprimée (App\Libraries\CarteCadeauImage) ; tailles de texte en cqw (centièmes de la largeur de l'aperçu).
 */

.cc-intro {
    margin-top: 10px;
    color: var(--acc-texte);
}

.cc .cc-pleine-largeur {
    grid-column: 1 / -1;
}

.cc-resume .acc-surtitre {
    margin-bottom: 12px;
}

/* ---------- Aperçu de la carte ---------- */

.cc-apercu {
    position: relative;
    container-type: inline-size;
    aspect-ratio: 1062 / 1535;
    margin-bottom: 20px;
    overflow: hidden;
    background: #000 center / cover no-repeat;
    color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.cc-apercu > * {
    position: absolute;
}

/* Fond de secours (sans l'image de Gilles) : bandeau, « CARTE CADEAU » et rond de l'autocollant */
.cc-apercu:not(.cc-apercu--fond)::before {
    content: "";
    position: absolute;
    left: 1.9%;
    right: 1.6%;
    top: 9%;
    height: 15.6%;
    background: #27282a;
}

.cc-ap-entete {
    top: 4.6%;
    left: 0;
    right: 0;
    text-align: center;
    font: 400 2.8cqw/1 Lato, sans-serif;
    letter-spacing: .66cqw;
    text-transform: uppercase;
}

/* Emplacement du QR code de réservation (carré gris du fond) */
.cc-ap-rond {
    left: 4.6%;
    top: 78.4%;
    width: 26.6%;
    height: 18.3%;
    background: #cbd3dc;
}

.cc-ap-bandeau {
    top: 9%;
    height: 15.6%;
    right: 10.1%;
    width: 64%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    text-align: right;
}

.cc-ap-titre {
    font: 400 6.8cqw/1.12 Alice, Georgia, serif;
}

.cc-ap-sous-titre {
    margin-top: .8cqw;
    font: 400 2.8cqw/1 Alice, Georgia, serif;
    letter-spacing: .24cqw;
}

.cc-ap-cadre {
    left: 10.17%;
    width: 79.76%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 2.6cqw;
    background: #26272a;
    border: .19cqw dashed #55575c;
    border-radius: 1.1cqw;
    font: 400 5.46cqw/1.1 "Shadows Into Light Two", cursive;
    white-space: nowrap;
}

.cc-ap-cadre span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-ap-cadre--1 {
    top: 31.07%;
    height: 8.21%;
}

.cc-ap-cadre--2 {
    top: 44.69%;
    height: 8.14%;
}

.cc-ap-cadre--3 {
    top: 58.05%;
    height: 17.52%;
    width: 79.28%;
    justify-content: center;
    padding: 0 6cqw;
    text-align: center;
    white-space: pre-line;
    font: 400 6.2cqw/1.05 Sacramento, cursive;
}

.cc-ap-libelle {
    font: 400 5.46cqw/1 Sacramento, cursive;
    z-index: 1;
}

.cc-ap-libelle--1 {
    left: 12.4%;
    top: 28.2%;
}

.cc-ap-libelle--2 {
    left: 13.2%;
    top: 41.8%;
}

.cc-ap-coeur {
    left: 88.2%;
    top: 58.5%;
    width: 6.8%;
    transform: translate(-50%, -50%) rotate(-12deg);
}

.cc-ap-validite {
    right: 5.4%;
    top: 86%;
    text-align: right;
    font: 400 3.58cqw/1.2 Lato, sans-serif;
}

/* ---------- Page de la carte ---------- */

.cc-numero {
    font-size: 1.2em;
    letter-spacing: .06em;
}

@media (max-width: 900px) {
    .cc-resume {
        position: static;
    }

    .cc-apercu {
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }
}