/* ═══════════════════════════════════════════════════════════════
   CARTE DE L'AUDIO 2027 — composant partagé (boutique, espace
   d'écoute, confirmation, administration, impression)

   S'appuie sur carte-cadeau.css (3D, retournement, ruban, médaillon,
   bande, reflet, spécimen : classes « gc- ») ; ici, ce qui est propre
   à l'audio (« ca- ») et ses couleurs : les couleurs de la carte cadeau
   inversées. Le corps en or champagne brossé, écrit en bleu nuit ; le
   ruban de satin bleu nuit liseré d'or ; la bande du bas bleu nuit,
   écrite en or ; le papier crème du QR code.

   Recto : « Mon audio numérologie 2027 », le prénom, le ruban bleu nuit,
   à droite le QR code sur papier crème, en bas l'adresse d'écoute.
   Verso : le mot de la personne qui offre (ou l'intention, pour soi),
   le portrait de Mél au micro, comment écouter.
   ═══════════════════════════════════════════════════════════════ */

.gc.ca {
    --gc-fond:
        radial-gradient(85% 100% at 20% 6%, rgba(255, 250, 228, 0.6) 0%, rgba(255, 250, 228, 0) 58%),
        radial-gradient(60% 80% at 92% 100%, rgba(120, 90, 25, 0.22) 0%, rgba(120, 90, 25, 0) 70%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, rgba(255, 255, 255, 0) 1px 3px, rgba(90, 66, 16, 0.025) 3px 4px),
        linear-gradient(160deg, #f1da8c 0%, #e2c46d 30%, #d1b05a 62%, #bc9944 100%);
    --gc-texte: #0c0d30;
    --gc-doux: rgba(20, 22, 74, 0.76);
    --gc-accent: #1e2070;
    --gc-trait: #14164a;
    --gc-bord: rgba(116, 90, 30, 0.55);
    --gc-ruban: linear-gradient(90deg, #06071d 0%, #14164a 18%, #2e3394 45%, #1d2070 60%, #11133f 84%, #06071d 100%);
    --gc-bande: linear-gradient(180deg, #24286f 0%, #161857 48%, #0c0d36 100%);
    --gc-bande-texte: #ecd27a;
    --ca-laque: linear-gradient(100deg, #0c0d30 0%, #1a1d66 26%, #4a50b4 44%, #232781 58%, #10123f 78%, #0c0d30 100%);
    --ca-papier: radial-gradient(circle at 32% 22%, #fffdf8 0%, #fbf5e7 55%, #f1e5c9 100%);
    --ca-encre: #0c0d30;
    --ca-nuit: #0c0d36;
}

/* Le filet d'or tout autour de la carte est celui de la carte cadeau (carte-cadeau.css, .gc-face::after) */

/* Le ruban de satin bleu nuit, liseré d'or : il traverse la bande comme sur la carte cadeau */
.gc.ca .gc-ruban {
    box-shadow:
        inset 0.28cqi 0 0 #d9b950,
        inset -0.28cqi 0 0 #b8963e,
        0 0 1.5cqi rgba(40, 30, 6, 0.4);
}
/* La bande bleu nuit, sous un filet d'or */
.gc.ca .gc-bande {
    box-shadow:
        inset 0 0.3cqi 0 rgba(236, 210, 122, 0.9),
        inset 0 0.55cqi 0.6cqi rgba(255, 246, 214, 0.08),
        0 -0.5cqi 1.7cqi rgba(40, 30, 6, 0.3);
}

/* ─── Recto : le décor (ondes qui partent du médaillon, cycle de neuf points) ─── */
.gc.ca .ca-art {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    color: var(--gc-trait);
    pointer-events: none;
}
/* gravés dans l'or : les neuf points restent discrets sous le texte */
.gc.ca .ca-art g + g { opacity: 0.6; }

/* ─── Recto : le texte ─── */
.gc.ca .ca-panneau {
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    bottom: 16%;
    width: 57.7%;
    display: flex;
    flex-direction: column;
    gap: 1.2cqi;
    padding: 5cqi 9cqi 3.4cqi 6cqi;
}
.gc.ca .ca-entete { display: flex; flex-direction: column; gap: 0.2cqi; }
.gc.ca .ca-type {
    font-size: 9px;
    font-size: 2.05cqi;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gc-accent);
}
/* « 2027 » en laque bleu nuit gravée dans l'or : un reflet bleu la parcourt */
.gc.ca .ca-annee {
    font-family: 'Cinzel Decorative', serif;
    font-size: 30px;
    font-size: 7.4cqi;
    line-height: 1;
    letter-spacing: 0.06em;
    background: var(--ca-laque);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0.2cqi 0 rgba(255, 248, 222, 0.55));
    animation: gcReflet 7s ease-in-out infinite;
}
.gc.ca .ca-occasion {
    margin-top: 0.6cqi;
    font-size: 11px;
    font-size: 2.6cqi;
    line-height: 1.2;
    color: var(--gc-texte);
}
.gc.ca .ca-occasion:empty { display: none; }

.gc.ca .ca-milieu { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.gc.ca .ca-pour-mot {
    display: block;
    margin-bottom: 0.3cqi;
    font-size: 11px;
    font-size: 2.5cqi;
    letter-spacing: 0.04em;
    color: var(--gc-doux);
}
.gc.ca .ca-pour-nom {
    display: block;
    font-family: 'Cinzel Decorative', serif;
    font-size: 26px;
    font-size: 6.1cqi;
    line-height: 1.08;
    color: var(--gc-texte);
    text-wrap: balance;
    overflow-wrap: break-word;
    transition: opacity 0.3s;
}
.gc.ca .ca-pour.is-moyen .ca-pour-nom { font-size: 5cqi; }
.gc.ca .ca-pour.is-long .ca-pour-nom { font-size: 4.2cqi; }
.gc.ca .ca-pour.is-tres-long .ca-pour-nom { font-size: 3.5cqi; line-height: 1.18; }
.gc.ca .ca-pour-nom.is-vide { opacity: 0.35; }
.gc.ca .gc-trait { margin: 1.9cqi 0 1.6cqi; }
.gc.ca .ca-accroche {
    font-size: 11px;
    font-size: 2.65cqi;
    line-height: 1.4;
    font-style: italic;
    color: var(--gc-doux);
}
.gc.ca .ca-de {
    font-size: 11px;
    font-size: 2.55cqi;
    line-height: 1.35;
    color: var(--gc-texte);
    overflow-wrap: break-word;
}
.gc.ca .ca-de-mot { margin-right: 0.35em; color: var(--gc-doux); }
.gc.ca .ca-de.is-vide .ca-de-nom { opacity: 0.4; }

/* ─── Recto : le volet crème et son QR code ─── */
.gc.ca .ca-volet {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 16%;
    left: 60.3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.3cqi;
    padding: 4cqi 2.5cqi 3cqi 4.5cqi;
    background: var(--ca-papier);
    color: var(--ca-encre);
    box-shadow: inset 1.2cqi 0 2.4cqi -1.4cqi rgba(6, 6, 26, 0.5);
}
.gc.ca .ca-volet p { text-align: center; }
.gc.ca .ca-volet-titre {
    font-size: 8px;
    font-size: 1.85cqi;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ca-encre);
}
.gc.ca .ca-qr {
    position: relative;
    width: 23cqi;
    aspect-ratio: 1;
    flex: none;
}
.gc.ca .ca-qr svg { display: block; width: 100%; height: 100%; }
.gc.ca .ca-qr-attente {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 2cqi;
    text-align: center;
    font-size: 1.85cqi;
    line-height: 1.35;
    color: #2a2c66;
    background: rgba(251, 245, 231, 0.8);
    border: 0.25cqi dashed rgba(30, 32, 112, 0.42);
    border-radius: 1.4cqi;
}
.gc.ca .ca-qr.is-pret .ca-qr-attente { display: none; }
.gc.ca .ca-qr:not(.is-pret) svg { opacity: 0.2; filter: blur(0.25cqi); }
/* Sous le QR code, le casque bleu nuit, l'arceau liseré d'or comme le ruban : un fil d'or
   calme arrive de part et d'autre jusqu'aux écouteurs, et entre eux la voix de Mél ondule
   en trois brins d'or */
.gc.ca .ca-volet-pied {
    display: flex;
    align-items: flex-end;
    gap: 1.2cqi;
    width: 21cqi;
}
.gc.ca .ca-volet-pied::before,
.gc.ca .ca-volet-pied::after {
    content: '';
    flex: 1;
    height: 1px;
    height: 0.2cqi;
    min-height: 1px;
    margin-bottom: 1.3cqi; /* à hauteur du milieu des écouteurs */
    background: linear-gradient(90deg, rgba(163, 127, 44, 0), rgba(163, 127, 44, 0.8));
}
.gc.ca .ca-volet-pied::after { transform: scaleX(-1); }
.gc.ca .ca-casque {
    flex: none;
    display: block;
    width: 26px;
    width: 6cqi;
    height: auto;
    aspect-ratio: 32 / 28;
    color: var(--ca-encre);
}
.gc.ca .ca-casque-filet,
.gc.ca .ca-casque-voix { color: #a37f2c; }
.gc.ca .ca-casque-filet { opacity: 0.9; }
.gc.ca .ca-casque-voix path {
    transform-origin: 16px 21px;
    animation: caVoix 2.8s ease-in-out infinite;
}
.gc.ca .ca-casque-voix path:nth-child(2) { animation-duration: 3.5s; animation-delay: -1.2s; }
.gc.ca .ca-casque-voix path:nth-child(3) { animation-duration: 2.3s; animation-delay: -0.6s; }
@keyframes caVoix {
    0%, 100% { transform: scaleY(1); }
    30% { transform: scaleY(0.45); }
    55% { transform: scaleY(0.85); }
    78% { transform: scaleY(0.3); }
}

/* ─── La bande : l'adresse d'écoute, et le code ─── */
.gc.ca .gc-bande.ca-bande {
    grid-template-columns: 57.7% 2.6% minmax(0, 1fr);
}
.gc.ca .ca-adresse {
    grid-column: 1;
    padding: 0 2cqi 0 6cqi;
    font-family: 'Marcellus', serif; /* une adresse à recopier : lisible avant tout */
    font-size: 10px;
    font-size: 2.3cqi;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gc.ca .ca-adresse strong { font-weight: 400; letter-spacing: 0.1em; }
.gc.ca .ca-adresse.is-attente strong { opacity: 0.55; }
.gc.ca .ca-code-bloc {
    grid-column: 3;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
}
.gc.ca .ca-code-mot { font-size: 1.55cqi; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.75; }
.gc.ca .ca-bande .gc-code { grid-column: auto; color: #f5e6a3; }

/* ─── Verso : le mot, le portrait de Mél au micro ─── */
.gc.ca .ca-photo {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 16%;
    width: 40%;
    overflow: hidden;
    background: var(--ca-nuit);
    /* un filet d'or sombre sépare la photo de l'or de la carte */
    box-shadow: -0.3cqi 0 0 #9c7c30, -0.9cqi 0 1.6cqi rgba(60, 44, 10, 0.3);
}
.gc.ca .ca-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 45% 30%;
}
.gc.ca .ca-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(12, 13, 54, 0.5) 0%, rgba(12, 13, 54, 0) 20%),
        linear-gradient(0deg, rgba(12, 13, 54, 0.94) 0%, rgba(12, 13, 54, 0.58) 22%, rgba(12, 13, 54, 0) 46%);
}
.gc.ca .ca-photo-legende {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 7%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4cqi;
    text-align: center;
}
.gc.ca .ca-photo-legende span:first-child {
    font-family: 'Cinzel Decorative', serif;
    font-size: 2.6cqi;
    letter-spacing: 0.04em;
    color: #f8f3e8;
    white-space: nowrap;
}
.gc.ca .ca-photo-legende span:last-child {
    font-size: 1.5cqi;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #ecd27a;
    white-space: nowrap;
}

.gc.ca .ca-mot {
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    bottom: 16%;
    width: 62%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4cqi 5cqi 3cqi 7cqi;
}
.gc.ca .ca-mot-titre {
    margin-bottom: 1.6cqi;
    font-size: 1.9cqi;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gc-accent);
}
.gc.ca .ca-mot-titre:empty { display: none; }
.gc.ca .ca-message {
    font-size: 3.2cqi;
    line-height: 1.5;
    color: var(--gc-texte);
    white-space: pre-line;
    overflow-wrap: break-word;
}
.gc.ca .ca-message.is-long { font-size: 2.8cqi; }
.gc.ca .ca-message.is-tres-long { font-size: 2.45cqi; }
.gc.ca .ca-signature {
    margin-top: 2cqi;
    font-family: 'Cinzel Decorative', serif;
    font-size: 3.2cqi;
    color: var(--gc-accent);
    text-align: right;
}
.gc.ca .ca-signature:empty { display: none; }
.gc.ca .ca-signature::before { content: '✦ '; font-size: 0.7em; vertical-align: 0.15em; opacity: 0.8; }
.gc.ca .ca-guillemet { display: block; height: 4cqi; font-family: 'Cinzel Decorative', serif; font-size: 9cqi; line-height: 0.85; color: var(--gc-accent); opacity: 0.75; }
/* sans message : une phrase de Mél, centrée */
.gc.ca .gc-verso.is-sans-message .ca-guillemet { display: none; }
.gc.ca .gc-verso.is-sans-message .ca-message { font-size: 3.6cqi; font-style: italic; color: var(--gc-doux); }

.gc.ca .gc-verso .gc-bande { grid-template-columns: minmax(0, 1fr) auto; gap: 3cqi; padding: 0 5cqi 0 7cqi; }
.gc.ca .ca-comment {
    font-size: 10px;
    font-size: 2.1cqi;
    line-height: 1.3;
}

/* ─── Petites tailles ─── */
@container (max-width: 440px) {
    .gc.ca .ca-accroche,
    .gc.ca .ca-de { font-size: 2.95cqi; }
    .gc.ca .ca-pour-mot { font-size: 2.9cqi; }
    .gc.ca .ca-volet-titre { font-size: 2.1cqi; }
    .gc.ca .ca-adresse { font-size: 2.6cqi; }
    .gc.ca .ca-comment { font-size: 2.45cqi; }
}
@container (max-width: 330px) {
    .gc.ca .ca-accroche,
    .gc.ca .ca-de,
    .gc.ca .ca-code-mot,
    .gc.ca .ca-comment,
    .gc.ca .ca-photo-legende span:last-child { display: none; }
    .gc.ca .ca-adresse { font-size: 2.9cqi; }
    .gc.ca .ca-qr { width: 26cqi; }
    .gc.ca .gc-verso .gc-bande { grid-template-columns: minmax(0, 1fr); justify-items: center; }
}
@container (max-width: 210px) {
    .gc.ca .ca-entete .ca-type,
    .gc.ca .ca-pour-mot,
    .gc.ca .gc-trait,
    .gc.ca .ca-volet-titre,
    .gc.ca .ca-volet-pied,
    .gc.ca .ca-adresse,
    .gc.ca .ca-code-bloc { display: none; }
    .gc.ca .ca-panneau { padding: 6cqi 8.6cqi 4cqi 7cqi; }
    .gc.ca .ca-annee { font-size: 9cqi; }
    .gc.ca .ca-pour-nom,
    .gc.ca .ca-pour.is-moyen .ca-pour-nom { font-size: 7.4cqi; }
    .gc.ca .ca-pour.is-long .ca-pour-nom,
    .gc.ca .ca-pour.is-tres-long .ca-pour-nom { font-size: 5.6cqi; }
    .gc.ca .ca-qr { width: 30cqi; }
}

/* ─── Carte figée (impression, vignettes) ─── */
.gc.ca.is-fige .ca-annee { animation: none; background-position: 30% 50%; }
.gc.ca.is-fige .ca-casque-voix path { animation: none; }

@media (prefers-reduced-motion: reduce) {
    .gc.ca .ca-annee,
    .gc.ca .ca-casque-voix path { animation: none; }
}