/* ═══════════════════════════════════════════════════════════════
   CARTE CADEAU — composant partagé
   (boutique, confirmation, enveloppe, administration, impression)

   Recto : le texte à gauche ; le ruban doré, qui porte le médaillon du
   logo, sépare le texte du portrait de Mél ; une bande dorée en bas
   (validité, code), traversée par le ruban comme un paquet cadeau.
   Verso : le message, la signature, comment réserver.

   La carte mesure 100 × 62,5 cqi. Les positions sont en % de la carte,
   les tailles de texte en cqi (pour cent de sa largeur) : la même carte
   s'affiche en vignette, en aperçu, en grand ou imprimée. Les valeurs en
   px qui précèdent servent aux navigateurs anciens.
   ═══════════════════════════════════════════════════════════════ */

.gc {
    --gc-rx: 0deg;
    --gc-ry: 0deg;
    --gc-mx: 50%;
    --gc-my: 35%;
    position: relative;
    width: 100%;
    aspect-ratio: 1.6;
    container-type: inline-size;
    perspective: 1600px;
    font-family: 'Marcellus', serif;
    -webkit-user-select: none;
    user-select: none;
    text-align: left;
}

/* Le site justifie tous les paragraphes : la carte garde sa propre mise en page
   (:where ne pèse rien, les règles plus bas l'emportent) */
.gc,
.gc * { box-sizing: border-box; }
.gc p { margin: 0; text-align: left; }

.gc .gc-tilt,
.gc .gc-flip {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}
.gc .gc-tilt { transform: rotateX(var(--gc-rx)) rotateY(var(--gc-ry)); }
.gc .gc-flip { transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.gc.is-verso .gc-flip { transform: rotateY(180deg); }

.gc .gc-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 14px;
    border-radius: 3.2cqi;
    background: var(--gc-fond);
    color: var(--gc-texte);
    box-shadow: inset 0 0 0 1px var(--gc-bord);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Chaque face forme un groupe à part : ses éléments en z-index (portrait, ruban,
       médaillon…) restent dedans et disparaissent avec elle quand elle est de dos.
       Sans cela, Firefox affichait le recto en miroir par-dessus le message. */
    isolation: isolate;
}
.gc .gc-recto { transform: rotateY(0deg); }
.gc .gc-verso { transform: rotateY(180deg); }

/* Le filet d'or tout autour de la carte (cartes cadeaux et audio) : posé par-dessus la photo,
   le papier et la bande, et doublé d'un trait bronze pour se détacher aussi sur l'or */
.gc .gc-face::after {
    content: '';
    position: absolute;
    z-index: 7;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1px rgba(236, 210, 122, 0.9),
        inset 0 0 0 2px rgba(90, 68, 20, 0.3);
}

/* Cercles dorés très fins, comme les anneaux du logo */
.gc .gc-art {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    color: var(--gc-trait);
    pointer-events: none;
}
.gc .gc-etoiles { display: none; }
.gc[data-occasion="noel"] .gc-etoiles { display: inline; }

/* ─── Le portrait de Mél ─── */

.gc .gc-photo {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 59%;
    overflow: hidden;
    background: #1b2838;
}
.gc .gc-photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 12%;
}
/* Ombre portée du ruban à gauche, voile bas pour lire la signature */
.gc .gc-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(6, 6, 26, 0.5) 0%, rgba(6, 6, 26, 0) 14%),
        linear-gradient(0deg, rgba(9, 13, 36, 0.95) 0%, rgba(9, 13, 36, 0.7) 22%, rgba(9, 13, 36, 0) 45%);
}
.gc .gc-mel {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    gap: 0.5cqi;
}
.gc .gc-mel { text-align: center; }
.gc .gc-mel-nom {
    font-family: 'Cinzel Decorative', serif;
    font-size: 13px;
    font-size: 3.05cqi;
    letter-spacing: 0.05em;
    white-space: nowrap;
    color: #f8f3e8;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
}
.gc .gc-mel-metier {
    font-size: 6px;
    font-size: 1.42cqi;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #ecd27a;
}

/* ─── Le ruban et le médaillon ─── */

.gc .gc-ruban {
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    left: 57.7%;
    width: 2.6%;
    background: var(--gc-ruban);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.45);
    box-shadow: 0 0 1.5cqi rgba(0, 0, 0, 0.45);
}

.gc .gc-medaillon {
    position: absolute;
    z-index: 5;
    left: 59%;
    top: 24%;
    width: 16%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 38% 30%, #fffdf8 0%, #f9f2e3 52%, #eadab8 100%);
    box-shadow:
        0 0 0 2px #d4af37,
        0 0 0 3px rgba(110, 92, 37, 0.9),
        0 6px 12px rgba(0, 0, 0, 0.5);
    box-shadow:
        0 0 0 0.55cqi #d4af37,
        0 0 0 0.8cqi rgba(110, 92, 37, 0.9),
        0 1.4cqi 3cqi rgba(0, 0, 0, 0.5);
}
.gc .gc-logo {
    width: 92%;
    height: 92%;
    object-fit: contain;
    pointer-events: none;
}
.gc .gc-medaillon-verso { left: 87.5%; top: 21%; width: 11%; }

/* ─── Recto : le texte ─── */

.gc .gc-panneau {
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    bottom: 16%;
    width: 57.7%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    gap: 1.4cqi;
    padding: 22px 36px 15px 25px;
    padding: 5.2cqi 8.6cqi 3.6cqi 6cqi;
}

.gc .gc-entete {
    display: flex;
    flex-direction: column;
    gap: 0.4cqi;
}
.gc .gc-type {
    font-family: 'Cinzel Decorative', serif;
    font-size: 10px;
    font-size: 2.45cqi;
    letter-spacing: 0.1em;
    color: var(--gc-accent);
}
.gc .gc-occasion {
    font-size: 12px;
    font-size: 2.85cqi;
    line-height: 1.2;
    color: var(--gc-texte);
}
.gc .gc-occasion:empty { display: none; }

.gc .gc-milieu {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}
.gc .gc-pour { color: var(--gc-texte); }
.gc .gc-pour-mot {
    display: block;
    margin-bottom: 1px;
    margin-bottom: 0.3cqi;
    font-size: 11px;
    font-size: 2.6cqi;
    letter-spacing: 0.04em;
    color: var(--gc-doux);
}
.gc .gc-pour-nom {
    display: block;
    font-family: 'Cinzel Decorative', serif;
    font-size: 27px;
    font-size: 6.4cqi;
    line-height: 1.08;
    text-wrap: balance;
    overflow-wrap: break-word;
    transition: opacity 0.3s;
}
.gc .gc-pour.is-moyen .gc-pour-nom { font-size: 5.2cqi; }
.gc .gc-pour.is-long .gc-pour-nom { font-size: 4.3cqi; }
.gc .gc-pour.is-tres-long .gc-pour-nom { font-size: 3.6cqi; line-height: 1.18; }
.gc .gc-pour-nom.is-vide { opacity: 0.35; }

.gc .gc-trait {
    display: block;
    width: 7cqi;
    height: 1px;
    margin: 2.1cqi 0 1.9cqi;
    background: var(--gc-accent);
    opacity: 0.6;
}
.gc .gc-formule {
    font-family: 'Cinzel Decorative', serif;
    font-size: 16px;
    font-size: 3.85cqi;
    line-height: 1.15;
    background: var(--gc-or);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gcReflet 7s ease-in-out infinite;
}
.gc .gc-desc {
    margin-top: 3px;
    margin-top: 0.8cqi;
    font-size: 10px;
    font-size: 2.3cqi;
    line-height: 1.45;
    color: var(--gc-doux);
}

.gc .gc-de {
    font-size: 11px;
    font-size: 2.65cqi;
    line-height: 1.35;
    color: var(--gc-texte);
    overflow-wrap: break-word;
}
.gc .gc-de-mot { margin-right: 0.35em; color: var(--gc-doux); }
.gc .gc-de.is-vide .gc-de-nom { opacity: 0.4; }

/* ─── La bande dorée, traversée par le ruban ─── */

.gc .gc-bande {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    height: 16%;
    display: grid;
    grid-template-columns: 57.7% 2.6% minmax(0, 1fr);
    align-items: center;
    background: var(--gc-bande);
    color: var(--gc-bande-texte);
    box-shadow: inset 0 1px 0 rgba(255, 244, 205, 0.55), 0 -2px 7px rgba(0, 0, 0, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 244, 205, 0.55), 0 -0.5cqi 1.7cqi rgba(0, 0, 0, 0.28);
}
.gc .gc-validite {
    grid-column: 1;
    padding: 0 3cqi 0 6cqi;
    font-size: 10px;
    font-size: 2.35cqi;
    line-height: 1.25;
}
.gc .gc-code {
    font-family: 'Marcellus', serif; /* plus lisible que Cinzel Decorative pour un code à recopier */
    font-size: 11px;
    font-size: 2.7cqi;
    letter-spacing: 0.1em;
    white-space: nowrap;
}
.gc .gc-recto .gc-code { grid-column: 3; justify-self: center; }
.gc .gc-code.is-attente { opacity: 0.55; }

/* ─── Verso ─── */

.gc .gc-mot {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    top: 0;
    bottom: 16%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 18px 88px 14px 33px;
    padding: 4.4cqi 21cqi 3.4cqi 8cqi;
}
.gc .gc-guillemet {
    display: block;
    height: 4cqi;
    font-family: 'Cinzel Decorative', serif;
    font-size: 38px;
    font-size: 9cqi;
    line-height: 0.85;
    color: var(--gc-accent);
    opacity: 0.75;
}
.gc .gc-message {
    font-size: 15px;
    font-size: 3.5cqi;
    line-height: 1.5;
    color: var(--gc-texte);
    white-space: pre-line;
    overflow-wrap: break-word;
}
.gc .gc-message.is-long { font-size: 3.05cqi; }
.gc .gc-message.is-tres-long { font-size: 2.65cqi; }
.gc .gc-signature {
    margin-top: 2cqi;
    font-family: 'Cinzel Decorative', serif;
    font-size: 14px;
    font-size: 3.4cqi;
    color: var(--gc-accent);
}
.gc .gc-signature { text-align: right; }
.gc .gc-signature::before { content: '✦ '; font-size: 0.7em; vertical-align: 0.15em; opacity: 0.8; }
.gc .gc-verso.is-sans-message .gc-guillemet,
.gc .gc-verso.is-sans-message .gc-message { display: none; }
.gc .gc-verso.is-sans-message .gc-mot { padding-right: 8cqi; }
.gc .gc-verso.is-sans-message .gc-signature {
    margin: 0;
    text-align: center;
    font-size: 5.6cqi;
}
.gc .gc-verso.is-sans-message .gc-signature::before { content: none; }
.gc .gc-de-la-part { display: none; }
.gc .gc-verso.is-sans-message .gc-de-la-part {
    display: block;
    margin-bottom: 1.4cqi;
    text-align: center;
    font-size: 2.7cqi;
    letter-spacing: 0.06em;
    color: var(--gc-doux);
}

.gc .gc-verso .gc-bande {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3cqi;
    padding: 0 5cqi 0 6cqi;
}
.gc .gc-reserver {
    font-size: 10px;
    font-size: 2.3cqi;
    line-height: 1.3;
}
.gc .gc-reserver strong { font-weight: 400; letter-spacing: 0.04em; white-space: nowrap; }

/* ─── Reflet doré qui suit le pointeur ─── */
.gc .gc-reflet {
    position: absolute;
    z-index: 8;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle at var(--gc-mx) var(--gc-my), rgba(255, 246, 220, 0.28), transparent 42%),
        linear-gradient(110deg, transparent 32%, rgba(255, 236, 180, 0.12) 44%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 236, 180, 0.12) 56%, transparent 68%);
    background-size: 100% 100%, 260% 100%;
    background-position: 0 0, calc(100% - var(--gc-mx)) 0;
    mix-blend-mode: soft-light;
}

/* ─── Spécimen (commandes de test) ─── */
.gc .gc-specimen {
    position: absolute;
    z-index: 9;
    inset: 0;
    display: none;
    place-items: center;
    pointer-events: none;
}
.gc.is-specimen .gc-specimen { display: grid; }
.gc .gc-specimen span {
    transform: rotate(-16deg);
    padding: 0.4cqi 3cqi;
    border: 0.45cqi solid rgba(192, 57, 43, 0.6);
    border-radius: 1cqi;
    background: rgba(255, 255, 255, 0.12);
    font-family: 'Cinzel Decorative', serif;
    font-size: 8cqi;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(192, 57, 43, 0.75);
}

/* ─── Les couleurs de la carte (style Nuit, le seul proposé) ─── */
.gc {
    --gc-fond:
        radial-gradient(70% 95% at 62% 18%, rgba(212, 175, 55, 0.17) 0%, rgba(212, 175, 55, 0) 60%),
        linear-gradient(162deg, #14164a 0%, #0c0d30 52%, #111a33 100%);
    --gc-texte: #f6f1e7;
    --gc-doux: rgba(232, 224, 208, 0.72);
    --gc-accent: #d9b950;
    --gc-trait: #c9a84c;
    --gc-bord: rgba(212, 175, 55, 0.45);
    --gc-or: linear-gradient(100deg, #b8963e 0%, #d4af37 20%, #f5e6a3 42%, #e2c35e 58%, #c9a84c 76%, #a8893a 100%);
    --gc-ruban: linear-gradient(90deg, #6e5c25 0%, #b8963e 16%, #f5e6a3 44%, #e2c56a 58%, #b8963e 82%, #6e5c25 100%);
    --gc-bande: linear-gradient(180deg, #edd57f 0%, #d6b655 46%, #b99a40 100%);
    --gc-bande-texte: #0c0d30;
}

/* ─── Carte moyenne (téléphone) : les petits textes grossissent un peu ─── */
@container (max-width: 440px) {
    .gc .gc-desc { font-size: 2.65cqi; }
    .gc .gc-pour-mot,
    .gc .gc-de { font-size: 2.95cqi; }
    .gc .gc-validite { font-size: 2.7cqi; }
    .gc .gc-reserver { font-size: 2.5cqi; }
    .gc .gc-mel-metier { font-size: 1.65cqi; letter-spacing: 0.2em; }
}

/* ─── Petites tailles : on garde l'essentiel ─── */
@container (max-width: 330px) {
    .gc .gc-desc,
    .gc .gc-de,
    .gc .gc-mel-metier,
    .gc .gc-reserver { display: none; }
    .gc .gc-type { font-size: 3.2cqi; }
    .gc .gc-pour-mot { font-size: 3.4cqi; }
    .gc .gc-validite { font-size: 3cqi; }
    .gc .gc-code { font-size: 3.2cqi; }
    .gc .gc-mel-nom { font-size: 3.8cqi; }
    .gc .gc-verso .gc-bande { grid-template-columns: minmax(0, 1fr); justify-items: center; }
}
@container (max-width: 210px) {
    .gc .gc-entete,
    .gc .gc-pour-mot,
    .gc .gc-trait,
    .gc .gc-mel,
    .gc .gc-validite,
    .gc .gc-code { display: none; }
    .gc .gc-panneau { padding: 6cqi 8.6cqi 4cqi 7cqi; }
    .gc .gc-pour-nom,
    .gc .gc-pour.is-moyen .gc-pour-nom { font-size: 8cqi; }
    .gc .gc-pour.is-long .gc-pour-nom,
    .gc .gc-pour.is-tres-long .gc-pour-nom { font-size: 6cqi; }
    .gc .gc-formule { margin-top: 2cqi; font-size: 5.4cqi; }
}

/* ─── Carte figée (impression, vignettes) : une seule face, sans 3D ─── */
.gc.is-fige { perspective: none; }
.gc.is-fige .gc-tilt,
.gc.is-fige .gc-flip { transform: none !important; transition: none; }
.gc.is-fige .gc-reflet { display: none; }
.gc.is-fige .gc-formule { animation: none; background-position: 30% 50%; }
.gc.is-fige.is-face-verso .gc-recto,
.gc.is-fige:not(.is-face-verso) .gc-verso { display: none; }
.gc.is-fige .gc-verso { transform: none; }

@keyframes gcReflet {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .gc .gc-formule { animation: none; }
    .gc .gc-flip { transition-duration: 0.01ms; }
}