/* ═══════════════════════════════════════════════════════════════
   MON AUDIO NUMÉROLOGIE 2027 — la page de l'audio (audio-2027.html)

   S'appuie sur boutique.css (barre, champs, fil d'or, options,
   récapitulatif, ticket, FAQ…) ; ce qui est propre à l'audio est
   préfixé « au- ». L'univers : le bleu nuit du site et des cartes
   cadeaux (le mur du bureau de Mél, où elle enregistre, a été teinté
   dans ce bleu), l'or de la boutique ; le bleu roi du mur sert aux
   lueurs.
   ═══════════════════════════════════════════════════════════════ */

.page-audio {
    --studio-nuit: var(--navy-deepest);
    --studio-fond: var(--navy-deep);
    --studio: var(--navy);
    --studio-mi: var(--navy-mid);
    --studio-clair: #39458d;
    --brume: #c1c2d8;
    background: var(--studio-fond);
}
.page-audio .bg-nav { background: rgba(6, 6, 26, 0.62); border-bottom-color: rgba(201, 168, 76, 0.14); }

/* ═══════════════════════════════════════════════════════════════
   LE STUDIO : Mél au micro ; sur l'étagère, le téléphone et le fil d'or

   La scène est une fenêtre sur un « plateau » aux proportions de la photo
   (3096 × 1728, newelements/studiofond.png) : tout ce qui s'y pose est
   placé en % de la photo, et suit donc la photo quelle que soit la taille.
   Ordinateur : la photo entière, le texte sur le mur à gauche. Tablette et
   téléphone : la fenêtre se resserre sur le téléphone, le micro et Mél
   (le plateau s'agrandit et se décale), le texte passe dessous.
   L'étagère fuit en perspective : ses bords montent de 3,87° vers la
   droite ; le bandeau et le téléphone, posés contre le mur, les suivent.
   ═══════════════════════════════════════════════════════════════ */
.au-hero { position: relative; overflow: hidden; background: var(--studio-nuit); }
.au-hero-scene {
    position: relative;
    width: 100%;
    aspect-ratio: 3096 / 1728;
    overflow: hidden;
    isolation: isolate;
}
.au-plateau { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 3096 / 1728; }
.au-hero-photo {
    position: absolute; inset: 0;
    display: block; width: 100%; height: 100%;
    animation: auLever 2.4s var(--ease-expo) both;
}
/* Voile : le texte se lit sur le mur bleu, la scène se fond dans la page en bas */
.au-hero-scene::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(ellipse 34% 46% at 21% 37%, rgba(6, 6, 26, 0.58) 0%, rgba(6, 6, 26, 0.24) 58%, transparent 86%),
        linear-gradient(0deg, var(--studio-fond) 0%, rgba(10, 10, 46, 0) 9%);
}

/* ─── Le fil d'or de l'étagère : un bandeau de verre bleu nuit serti d'or, encastré dans le
   panneau de l'étagère, du bord gauche jusque derrière le téléphone. La voix de Mél y ondule
   (canvas, dessiné par audio-2027.js) ; pendant l'écoute, la lumière court sur l'or, du
   téléphone vers la gauche. ─── */
.au-bandeau {
    position: absolute; z-index: 2;
    right: 25%; top: 56.8%; width: 39.08%; height: 8.565%;
    transform-origin: 0 50%;
    transform: skewY(-3.87deg);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.55) 9%, #000 26%);
            mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.55) 9%, #000 26%);
	rotate: 180deg;		
}
/* le verre : sombre, un reflet sur le haut, encastré (ombre intérieure) */
.au-bandeau::before {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(207, 214, 243, 0.1) 0%, rgba(207, 214, 243, 0) 34%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.22) 100%),
        linear-gradient(90deg, rgba(7, 8, 32, 0.8) 0%, rgba(9, 10, 40, 0.92) 45%, rgba(12, 14, 50, 0.95) 100%);
    box-shadow: inset 0 0.35em 0.6em rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}
/* au repos, la lumière du téléphone éclaire le bout du bandeau */
.au-bandeau::after {
    content: ''; position: absolute; top: -40%; bottom: -40%; right: -4%; width: 34%;
    background: radial-gradient(ellipse 70% 50% at 100% 50%, rgba(174, 188, 236, 0.16), transparent 70%);
    transition: opacity 0.8s;
}
.au-bandeau-onde { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.au-bandeau-fil {
    position: absolute; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, rgba(168, 137, 58, 0.5) 0%, #b8963e 30%, #d4af37 62%, #f0d060 100%);
    box-shadow: 0 0 5px rgba(240, 208, 96, 0.35);
}
.au-bandeau-haut { top: -1px; }
.au-bandeau-bas { bottom: -1px; }
/* la lumière qui court sur l'or */
.au-bandeau-fil span {
    position: absolute; left: 0; right: 0; top: -1px; bottom: -1px;
    background: linear-gradient(90deg, transparent, rgba(255, 246, 214, 0.95) 45%, #fff 50%, rgba(255, 246, 214, 0.95) 55%, transparent) no-repeat;
    background-size: 30% 100%;
    background-position: 130% 0;
    filter: drop-shadow(0 0 4px rgba(240, 208, 96, 0.95));
    opacity: 0; transition: opacity 0.6s;
}
.au-hero.is-joue .au-bandeau-fil span { opacity: 1; animation: auCourant 2.1s linear infinite; }
.au-hero.is-joue .au-bandeau-bas span { animation-delay: 0.75s; }
/* pendant l'écoute, l'or du bandeau éclaire l'étagère autour de lui, au rythme de la voix */
.au-bandeau-lueur {
    position: absolute; z-index: 2;
    left: 3.876%; top: 73.03%; width: 39.08%; height: 8.565%;
    transform-origin: 0 50%;
    transform: skewY(-3.87deg);
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0; transition: opacity 0.8s;
}
.au-bandeau-lueur::before {
    content: ''; position: absolute; left: 6%; right: -3%; top: -75%; bottom: -75%;
    background: radial-gradient(ellipse 62% 50% at 82% 50%, rgba(240, 208, 96, 0.34), rgba(240, 208, 96, 0.09) 58%, rgba(240, 208, 96, 0) 80%);
    opacity: calc(0.45 + var(--voix, 0) * 0.85);
}
.au-hero.is-joue .au-bandeau-lueur { opacity: 1; }

/* ─── Le micro : un halo qui suit la voix, et les ondes ─── */
.au-hero-micro {
    position: absolute; z-index: 2;
    left: 66.15%; top: 58.2%; width: 7.5%; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 240, 190, 0.5), rgba(240, 208, 96, 0.16) 48%, rgba(240, 208, 96, 0) 100%);
    mix-blend-mode: screen;
    opacity: calc(var(--voix, 0) * 0.85);
    pointer-events: none;
}
.au-hero-ondes {
    position: absolute; z-index: 2;
    left: 66.15%; top: 58.2%; width: 6.2%; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.au-hero-ondes i {
    position: absolute; inset: 0;
    border: 1px solid rgba(240, 208, 96, 0.8); border-radius: 50%;
    opacity: 0; transform: scale(0.4);
}
.au-hero.is-joue .au-hero-ondes i { animation: auOnde 2.4s ease-out infinite; }
.au-hero.is-joue .au-hero-ondes i:nth-child(2) { animation-delay: 0.8s; }
.au-hero.is-joue .au-hero-ondes i:nth-child(3) { animation-delay: 1.6s; }

/* ─── Le téléphone, posé sur l'étagère contre le mur (newelements/TEL.png, dont l'écran a été
   rendu transparent : l'encoche et la barre du bas passent par-dessus ce qu'il affiche) ─── */
.au-tel {
    --echelle: 1;
    position: absolute; z-index: 3;
    left: 12%; top: 47%; width: 11.92%; aspect-ratio: 580 / 1101;
    transform-origin: 50% 100%;
    rotate: -6deg;
    container-type: inline-size;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.au-tel-cadre { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; pointer-events: none; }
/* le contact avec l'étagère : une ombre serrée sous la tranche */
.au-tel::before {
    content: ''; position: absolute; z-index: -1;
    left: 4%; right: -5%; bottom: -1.5%; height: 3.2%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(3, 3, 12, 0.85), rgba(3, 3, 12, 0.4) 55%, rgba(3, 3, 12, 0) 100%);
}
/* l'ombre sur l'étagère et contre le mur (la lumière vient de la gauche) */
.au-tel-ombre {
    position: absolute; z-index: -1; left: 6%; right: -7%; top: 3%; bottom: -1%;
    border-radius: 14% / 7%;
    background: rgba(4, 4, 18, 0.5);
    filter: blur(3cqw);
    transform: translate(5%, 1%);
}
.au-tel-ombre::after {
    content: ''; position: absolute; left: -12%; right: -18%; bottom: -3.5%; height: 7%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 100%);
}
/* la lumière de l'écran sur le mur : bleutée au repos, dorée pendant l'écoute */
.au-tel-lueur {
    position: absolute; z-index: -2; left: -55%; right: -55%; top: 8%; bottom: 2%;
    background: radial-gradient(closest-side, rgba(174, 188, 236, 0.2), rgba(174, 188, 236, 0.06) 55%, transparent 100%);
    transition: opacity 0.9s, filter 0.9s;
    pointer-events: none;
}
.au-tel-lueur::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(closest-side, rgba(255, 226, 150, 0.26), rgba(240, 208, 96, 0.07) 55%, transparent 100%);
    opacity: 0; transition: opacity 0.9s;
}
.au-tel.is-video .au-tel-lueur::after { opacity: 1; }

/* l'écran : 485 × 979 px dans TEL.png, à 1 px près sous le cadre ; son fond (#090b29) est celui
   de la carte et de la vidéo affichées, pour que le raccord ne se voie pas */
.au-tel-ecran {
    position: absolute; z-index: 1;
    left: 8.448%; top: 5.268%; width: 83.966%; height: 89.1%;
    border-radius: 10.9% / 5.4%;
    overflow: hidden;
    background: #090b29;
    transform: translateZ(0);
}
.au-tel-ecran video,
.au-tel-carte {
    position: absolute; left: 0; top: 50%;
    display: block; width: 100%; height: auto;
    transform: translateY(-50%);
}
/* la vidéo a un haut un peu plus clair que l'écran : fondu sur ses premières lignes */
.au-tel-ecran video {
    aspect-ratio: 494 / 888;
    background: #090b29;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 1.8%);
            mask-image: linear-gradient(180deg, transparent 0, #000 1.8%);
}
.au-tel-carte { aspect-ratio: 493 / 885; transition: opacity 0.5s ease, filter 0.5s; }
.au-tel-carte img { display: block; width: 100%; height: 100%; }
.au-tel.is-video .au-tel-carte { opacity: 0; }
/* le verre : un reflet discret qui passe de temps en temps */
.au-tel-ecran::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -100%; width: 300%; z-index: 3; pointer-events: none;
    background: linear-gradient(112deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.07) 47%, rgba(255, 255, 255, 0.015) 53%, rgba(255, 255, 255, 0) 60%);
    transform: translateX(33.4%);
    animation: auVerre 11s ease-in-out 3s infinite;
}
@media (hover: hover) {
    .au-tel:hover .au-tel-carte { filter: brightness(1.07); }
}

/* la barre d'état, de part et d'autre de l'encoche */
.au-tel-statut {
    position: absolute; z-index: 2; left: 0; right: 0; top: 0;
    height: 3.75%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 7.5% 0 9.5%;
    color: #f4f6f7;
    font: 600 3.5cqw/1 -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 0.01em;
    pointer-events: none;
}
.au-tel-heure { width: 13cqw; text-align: center; font-variant-numeric: tabular-nums; }
.au-tel-icones { display: flex; align-items: center; gap: 1.1cqw; }
.au-tel-icones svg { display: block; height: 2.1cqw; width: auto; fill: currentColor; }
.au-tel-icones svg:last-child { height: 2.3cqw; }

/* le scan du QR code de la carte : le viseur se pose, la ligne d'or le balaie, un éclair.
   Centré sur le QR code de telephone-carte.jpg (493 × 885) : modules de 348 à 435 en x et de 338
   à 422 en y, centre (392 ; 380,5) ; à remesurer si l'image change */
.au-tel-scan {
    position: absolute; left: 67.2%; top: 36.15%; width: 24.6%; height: 13.7%;
    pointer-events: none;
}
.au-tel-scan i {
    position: absolute; width: 26%; height: 26%;
    border: 0 solid #f0d060;
    filter: drop-shadow(0 0 2px rgba(240, 208, 96, 0.9));
    opacity: 0; transform: scale(1.35);
    transition: opacity 0.25s, transform 0.35s var(--ease-expo);
}
.au-tel-scan i:nth-child(1) { left: 0; top: 0; border-width: 0.85cqw 0 0 0.85cqw; border-top-left-radius: 1.6cqw; transform-origin: 100% 100%; }
.au-tel-scan i:nth-child(2) { right: 0; top: 0; border-width: 0.85cqw 0.85cqw 0 0; border-top-right-radius: 1.6cqw; transform-origin: 0 100%; }
.au-tel-scan i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 0.85cqw 0.85cqw; border-bottom-left-radius: 1.6cqw; transform-origin: 100% 0; }
.au-tel-scan i:nth-child(4) { right: 0; bottom: 0; border-width: 0 0.85cqw 0.85cqw 0; border-bottom-right-radius: 1.6cqw; transform-origin: 0 0; }
.au-tel-scan b {
    position: absolute; left: 6%; right: 6%; top: 0; height: 0.6cqw;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(240, 208, 96, 0), #fff6d6 50%, rgba(240, 208, 96, 0));
    box-shadow: 0 0 1.4cqw 0.5cqw rgba(240, 208, 96, 0.55);
    opacity: 0;
}
/* au survol (souris), le viseur se devine : un clic sur le téléphone lance l'extrait */
@media (hover: hover) {
    .au-tel:hover .au-tel-scan i { opacity: 0.55; transform: none; }
}
.au-tel.is-scan .au-tel-scan i { opacity: 1; transform: none; }
.au-tel.is-scan .au-tel-scan b { animation: auBalaye 0.62s ease-in-out 0.12s both; }
.au-tel.is-scan .au-tel-carte::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 79.5% 43%, rgba(255, 246, 214, 0.95) 0%, rgba(240, 208, 96, 0.5) 18%, rgba(9, 11, 41, 0) 55%);
    opacity: 0;
    animation: auEclair 0.4s ease-out 0.62s both;
}

/* Le texte, posé sur le mur bleu, à gauche, au-dessus du fil d'or
   (ordinateur) ; sous la photo (tablette, téléphone) */
.au-hero-texte {
    position: absolute; z-index: 4;
    left: 23.5%; top: 15%; width: min(31%, 470px);
}
.page-boutique main .au-hero-texte p { text-align: left; }
.au-titre {
    margin: 0.5rem 0 0.3rem;
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.9rem, 3vw, 3rem); line-height: 1.08; letter-spacing: 0.01em;
    color: var(--white);
    text-shadow: 0 2px 18px rgba(3, 3, 16, 0.65);
    text-wrap: balance;
}
.au-titre span {
    background: linear-gradient(100deg, #b8963e 0%, #d4af37 22%, #f5e6a3 44%, #e2c35e 60%, #c9a84c 78%, #a8893a 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    animation: gcReflet 7s ease-in-out infinite;
}
.page-boutique main .au-accroche {
    margin: 0 0 1rem;
    font-size: clamp(1.1rem, 1.55vw, 1.45rem); font-style: italic; letter-spacing: 0.02em;
    color: var(--gold-light);
    text-shadow: 0 1px 10px rgba(3, 3, 16, 0.7);
}
.page-boutique main .au-chapeau {
    max-width: 31em; margin: 0;
    color: #e3e3ee; font-size: clamp(0.92rem, 1.05vw, 1.04rem); line-height: 1.7;
    text-shadow: 0 1px 8px rgba(3, 3, 16, 0.8);
}
.au-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.2rem; margin-top: 1.6rem; }
.btn-main.au-cta {
    gap: 0.9rem; padding: 0.95rem 0.95rem 0.95rem 1.6rem;
    font-family: var(--font-body); font-size: 0.8rem;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    border-color: var(--gold-light); color: var(--navy-deepest); cursor: pointer;
	border-radius: 10px;
}
.btn-main.au-cta::before { background: linear-gradient(135deg, #f5e6a3, #fff6d6); }
.au-cta-prix {
    padding: 0.35rem 0.7rem; border-radius: 999px;
    background: rgba(6, 6, 26, 0.88); color: var(--gold-light);
    font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.04em;
}
.au-cta-prix s { margin-right: 0.3rem; color: var(--gray); font-size: 0.8em; }

/* L'extrait : un bouton rond dont l'anneau se remplit pendant l'écoute */
.au-extrait {
    display: inline-flex; align-items: center; gap: 0.75rem;
    padding: 0.35rem 1.1rem 0.35rem 0.35rem;
    background: rgba(6, 6, 26, 0.55);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid rgba(201, 168, 76, 0.55); border-radius: 999px;
    color: var(--white); font: inherit; text-align: left; cursor: pointer;
    transition: border-color 0.3s, background 0.3s;
}
.au-extrait:hover { border-color: var(--gold-light); background: rgba(6, 6, 26, 0.75); }
.au-extrait-rond { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; }
.au-extrait-anneau { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.au-extrait-anneau circle { fill: rgba(201, 168, 76, 0.12); stroke: rgba(201, 168, 76, 0.35); stroke-width: 1.5; }
.au-extrait-anneau .au-extrait-progres { fill: none; stroke: var(--gold-light); stroke-width: 2; stroke-linecap: round; transition: stroke-dashoffset 0.25s linear; }
.au-extrait-icone { position: relative; width: 18px; height: 18px; fill: var(--gold-light); }
.au-icone-pause { display: none; }
.au-extrait.is-joue .au-icone-lecture { display: none; }
.au-extrait.is-joue .au-icone-pause { display: block; }
.au-extrait.is-joue .au-extrait-rond { animation: auBattement 1.8s ease-in-out infinite; }
/* pendant le scan de la carte et l'ouverture de l'espace d'écoute : un arc tourne sur l'anneau */
.au-extrait.is-prepare .au-icone-lecture { display: none; }
.au-extrait.is-prepare .au-icone-pause { display: block; }
.au-extrait.is-prepare .au-extrait-anneau { animation: auTourne 0.9s linear infinite; }
.au-extrait.is-prepare .au-extrait-progres { stroke-dasharray: 28 98 !important; stroke-dashoffset: 0 !important; transition: none; }
.au-extrait-texte { display: flex; flex-direction: column; line-height: 1.25; }
.au-extrait-titre { font-size: 0.95rem; }
.au-extrait-duree { color: var(--brume); font-size: 0.78rem; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════
   L'ATELIER, en bleu nuit (récapitulatif, losanges, cachet, barre…
   reprennent ceux des cartes cadeaux, boutique.css)
   ═══════════════════════════════════════════════════════════════ */
.page-audio .bq-atelier,
.page-audio .bq-faq {
    background:
        radial-gradient(ellipse 80% 50% at 20% 50%, rgba(30, 30, 106, 0.45) 0%, transparent 70%),
        radial-gradient(ellipse 80% 60% at 70% 30%, rgba(201, 168, 76, 0.05) 0%, transparent 70%),
        linear-gradient(180deg, var(--studio-fond) 0%, #0c0c36 60%, var(--studio-fond) 100%);
}
.page-audio .bq-atelier { padding-top: 4.5rem; }
.page-audio .bq-offre,
.page-audio .bq-option { background: rgba(255, 255, 255, 0.02); }

.au-pour-qui { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1.5rem; }

.au-naissance-champs { display: grid; grid-template-columns: 6.5rem minmax(0, 15rem); gap: 0.7rem; }
.page-boutique main #jourNaissance { text-align: center; letter-spacing: 0.08em; }

/* Pour soi : l'intention (facultative), juste sous la date de naissance ; le champ du message de l'étape 2 y est déplacé */
.au-intention { animation: bqApparition 0.6s var(--ease-expo) 0.15s both; }
.au-intention .bq-champ { margin-bottom: 0; }

/* Pour soi, trois étapes : l'étape de la carte disparaît du fil d'or */
.is-pour-moi .bq-fil-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.is-pour-moi .bq-fil-liste > li:nth-child(2) { display: none; }
.is-pour-moi .bq-fil-trame { left: 16.667%; right: 16.667%; }

/* Le cycle des neuf années, autour de la carte : l'année calculée s'allume */
.au-cycle-halo {
    position: absolute; z-index: 0; inset: 0;
    pointer-events: none;
    opacity: 0.55; transition: opacity 0.8s;
}
.au-cycle-halo.is-actif { opacity: 1; }
/* placés par audio-2027.js (placerCycle) sur le tour de la carte */
.au-point {
    position: absolute; left: 50%; top: 50%;
    display: grid; place-items: center;
    width: 26px; height: 26px; margin: -13px 0 0 -13px;
}
.au-point::before {
    content: ''; position: absolute; inset: 7px;
    border: 1px solid rgba(201, 168, 76, 0.45);
    background: var(--studio-fond);
    transform: rotate(45deg);
    transition: background 0.5s var(--ease-expo), border-color 0.5s, box-shadow 0.5s, inset 0.5s;
}
.au-point span {
    position: relative; font-family: var(--font-display); font-size: 0.62rem; color: rgba(201, 168, 76, 0.7);
    transition: color 0.5s, font-size 0.5s;
}
.au-point.is-passe::before { background: rgba(201, 168, 76, 0.35); border-color: rgba(240, 208, 96, 0.7); }
.au-point.is-passe span { color: var(--navy-deepest); }
.au-point.is-elu { z-index: 1; }
.au-point.is-elu::before {
    inset: 1px;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    border-color: #fff6d6;
    box-shadow: 0 0 18px rgba(240, 208, 96, 0.85), 0 0 40px rgba(240, 208, 96, 0.35);
    animation: bqPouls 2.8s ease-in-out infinite;
}
.au-point.is-elu span { color: var(--navy-deepest); font-size: 0.9rem; }
.au-cycle-eclats { position: absolute; z-index: 5; width: 0; height: 0; pointer-events: none; }
.au-cycle-eclats span {
    position: absolute; left: 0; top: 0; opacity: 0;
    font-family: var(--font-display); font-size: calc(0.75rem * var(--t)); color: var(--gold-light);
    text-shadow: 0 0 8px rgba(240, 208, 96, 0.85);
    animation: bqEclat 1.15s var(--ease-expo) forwards;
}

/* La carte de l'audio dans la vitrine : un peu plus de place pour le cycle */
.au-vitrine .bq-scene { padding-left: 4%; padding-right: 4%; }
.au-tampon { top: -4%; right: -2%; }

/* Pour moi : le cachet et l'envoi à la personne n'ont plus lieu d'être */
.is-pour-moi .au-tampon { display: none; }

/* ═══════════════════════════════════════════════════════════════
   CE QUE VOUS ALLEZ ENTENDRE : la piste en cinq temps
   ═══════════════════════════════════════════════════════════════ */
.au-programme {
    position: relative; padding: 4.5rem 0 4rem;
    background:
        radial-gradient(ellipse 60% 70% at 50% 0%, rgba(57, 69, 141, 0.26), transparent 70%),
        var(--studio-nuit);
}
.au-programme::before,
.au-deroule::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.au-piste {
    display: flex; gap: 6px;
    max-width: 1340px; margin: 2.8rem auto 0; padding: 0 20px; list-style: none;
}
.au-piste li {
    position: relative; flex: var(--part) 1 0; min-width: 0;
    padding: 1.6rem 0.9rem 0 0;
}
/* la piste : un segment doré par temps, proportionnel à sa durée */
.au-piste li::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 3px;
    background: linear-gradient(90deg, rgba(201, 168, 76, 0.55), rgba(240, 208, 96, 0.85));
    box-shadow: 0 0 14px rgba(240, 208, 96, 0.18);
}
.au-piste li.is-coeur::before {
    background: linear-gradient(90deg, var(--gold), var(--gold-light) 50%, #fff3c4);
    box-shadow: 0 0 18px rgba(240, 208, 96, 0.5);
}
.au-piste-temps {
    position: absolute; top: 0.75rem; left: 0;
    font-size: 0.72rem; letter-spacing: 0.12em; color: var(--brume); font-variant-numeric: tabular-nums;
}
.au-piste h3 {
    margin: 0.6rem 0 0.45rem;
    font-family: var(--font-display); font-weight: 400; font-size: 0.98rem; line-height: 1.3; letter-spacing: 0.02em;
    color: var(--gold-light);
}
.page-boutique main .au-piste p { margin: 0; color: var(--gray); font-size: 0.88rem; line-height: 1.6; }
.page-boutique main .au-piste li.is-coeur p { color: var(--white-soft); }
.page-boutique main .au-piste-note { max-width: 46em; margin: 2.4rem auto 0; padding: 0 20px; color: var(--brume); font-size: 0.9rem; text-align: center; }

/* ═══════════════════════════════════════════════════════════════
   COMMENT ÇA SE PASSE, REÇU UN AUDIO, QUESTIONS, L'AUTRE CADEAU
   ═══════════════════════════════════════════════════════════════ */
/* « Le voyage de la carte » (De la carte à l'écoute) : commun aux deux pages, dans boutique.css (.bq-deroule) */
.page-boutique main #codeEcoute { font-family: var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; }
.page-boutique main #codeEcoute::placeholder { letter-spacing: 0.12em; }

.au-croise { padding: 0 20px 4rem; background: var(--studio-fond); }
.au-croise-lien {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem;
    max-width: 980px; margin: 0 auto; padding: 1.6rem 2rem;
    border-radius: 14px; overflow: hidden;
    background:
        radial-gradient(ellipse 60% 120% at 100% 50%, rgba(201, 168, 76, 0.14), transparent 70%),
        linear-gradient(135deg, #14164a 0%, #0c0d30 60%, #111a33 100%);
    border: 1px solid rgba(201, 168, 76, 0.35);
    color: var(--white); text-decoration: none;
    transition: border-color 0.4s, transform 0.4s var(--ease-expo), box-shadow 0.4s;
}
.au-croise-lien:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
.au-croise-sur { grid-column: 1; font-size: 0.74rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }
.au-croise-titre { grid-column: 1; margin-top: 0.3rem; font-family: var(--font-display); font-size: 1.2rem; color: var(--gold-light); }
.au-croise-texte { grid-column: 1; margin-top: 0.3rem; color: var(--gray); font-size: 0.92rem; }
.au-croise-fleche { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-size: 1.8rem; color: var(--gold-light); transition: transform 0.4s var(--ease-expo); }
.au-croise-lien:hover .au-croise-fleche { transform: translateX(6px); }

.page-audio .footer { background: var(--studio-nuit); }

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes auLever {
    from { opacity: 0; transform: scale(1.04); filter: blur(4px); }
    to { opacity: 1; transform: none; filter: none; }
}
@keyframes auCourant {
    from { background-position: 130% 0; }
    to { background-position: -30% 0; }
}
@keyframes auOnde {
    0% { opacity: 0.85; transform: scale(0.35); }
    100% { opacity: 0; transform: scale(2.4); }
}
@keyframes auBattement {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}
/* la ligne d'or du scan descend sur le QR code, remonte à moitié, redescend */
@keyframes auBalaye {
    0% { top: 2%; opacity: 0; }
    12% { opacity: 1; }
    55% { top: 92%; }
    75% { top: 40%; }
    92% { opacity: 1; }
    100% { top: 96%; opacity: 0; }
}
@keyframes auEclair {
    0% { opacity: 0; }
    35% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes auVerre {
    0%, 72% { transform: translateX(33.4%); }
    100% { transform: translateX(-33.4%); }
}
@keyframes auTourne {
    from { transform: rotate(-90deg); }
    to { transform: rotate(270deg); }
}

@media (prefers-reduced-motion: reduce) {
    .au-hero-photo,
    .au-titre span,
    .au-intention,
    .au-point.is-elu::before,
    .au-extrait.is-joue .au-extrait-rond,
    .au-extrait.is-prepare .au-extrait-anneau,
    .au-hero.is-joue .au-hero-ondes i,
    .au-hero.is-joue .au-bandeau-fil span,
    .au-tel-ecran::after,
    .au-tel.is-scan .au-tel-scan b,
    .au-tel.is-scan .au-tel-carte::after { animation: none !important; }
    .au-point::before,
    .au-tel-scan i,
    .au-tel-carte { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
.au-hero-texte .section-label { font-size: 0.78rem; letter-spacing: 0.3em; }
.au-hero-texte .section-label::before { display: none; }
@media (max-width: 1300px) {
    .au-hero-texte { top: max(13.5%, 90px); width: 35%; }
    .page-boutique main .au-chapeau { display: none; }
}
@media (max-width: 991px) {
    /* La fenêtre se resserre sur le téléphone, le micro et Mél (x 640 → 3096, y 380 → 1728
       de la photo) ; le téléphone grandit un peu ; le texte passe dessous */
    .au-hero-scene { aspect-ratio: 2456 / 1348; margin-top: 70px; }
    .au-plateau { width: 126.06%; left: -26.06%; top: -28.19%; }
    .au-tel { --echelle: 1.1; left: 30%;}
	.au-bandeau { right: 5%; top: 54.5%; }
    .au-hero-scene::after { background: linear-gradient(0deg, var(--studio-nuit) 0%, rgba(6, 6, 26, 0) 16%); }
    /* sous la photo, le texte va d'un bord à l'autre et prend les polices de l'accueil : le
       surtitre, le titre d'une section au texte à gauche, un paragraphe (paliers plus bas) */
    .au-hero-texte { position: relative; left: auto; top: auto; width: auto; margin: -1.5rem 0 0; padding: 0 20px 3rem; }
    .au-hero-texte .section-label { font-size: 0.8rem; }
    .au-titre { font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1.2em; }
    .page-boutique main .au-chapeau { display: block; max-width: none; font-size: 1rem; line-height: 1.8; }
    .au-piste { flex-direction: column; gap: 0; }
    .au-piste li { padding: 0 0 1.6rem 1.6rem; }
    .au-piste li::before { top: 0.35rem; bottom: 0; left: 0; right: auto; width: 4px; height: auto; }
    .au-piste li:last-child { padding-bottom: 0; }
    .au-piste-temps { position: static; display: block; }
    .au-piste h3 { margin-top: 0.15rem; }
}
@media (max-width: 640px) {
    /* x 1000 → 2680, y 540 → 1728 : le bout du fil d'or, le téléphone, le panier, le micro, la main de Mél sur le casque */
    .au-hero-scene { aspect-ratio: 1680 / 1188; }
    .au-plateau { width: 184.29%; left: -59.52%; top: -45.45%; }
    .au-tel { --echelle: 1.25; left: 38%; top: 52%; width:10%;  }
    .au-bandeau-fil { height: 1.5px; }
    .au-hero-texte { padding: 0 16px 2.4rem; margin-top: -0.6rem; }
    .au-hero-actions { flex-direction: column; align-items: stretch; }
    .btn-main.au-cta { justify-content: space-between; }
    .au-extrait { align-self: flex-start; }
    .au-pour-qui { grid-template-columns: minmax(0, 1fr); }
    .au-naissance-champs { grid-template-columns: 5.5rem minmax(0, 1fr); }
    .au-piste { padding-left: 16px; padding-right: 16px; }
    .au-point { width: 20px; height: 20px; margin: -10px 0 0 -10px; }
    /* de l'air au-dessus et au-dessous de la carte pour les points du cycle */
    .au-vitrine .bq-scene { padding-top: calc(5% + 14px); padding-bottom: calc(8% + 16px); }
    .au-point::before { inset: 5px; }
    .au-point span { display: none; }
    .au-point.is-elu span { display: block; font-size: 0.7rem; }
    .au-croise { padding: 0 16px 3rem; }
    .au-croise-lien { padding: 1.3rem 1.2rem; }
}

/* ═══════════════════════════════════════════════════════════════
   LES POLICES DE L'ACCUEIL (ce qui n'est que sur cette page ; le reste,
   commun avec la page des cartes cadeaux, est dans boutique.css)
   Les cinq temps de l'audio prennent celles des étapes du processus
   (.process-step), le haut de la page sous la photo celles des
   paragraphes (.about-text p), le texte de « Aussi à offrir » celui des
   cartes des formules (.presta-desc). La note sous les cinq temps reste
   discrète, comme les petites lignes de l'accueil. Sur ordinateur, le
   texte posé sur la photo du studio garde son dessin.
   ═══════════════════════════════════════════════════════════════ */
.au-piste h3 { font-size: 0.85rem; }
.page-audio main .au-piste p { font-size: 0.92rem; line-height: 1.8; }
.page-audio main .au-piste-note { color: var(--gray); font-size: 0.85rem; text-wrap: balance; }
.au-croise-texte { line-height: 1.7; }
@media (max-width: 991px) {
    .page-audio main .au-piste-note { max-width: none; }
	.page-audio .bq-atelier { padding-top: 1.5rem; }
}
@media (max-width: 768px) {
    .page-boutique main .au-chapeau { font-size: 0.95rem; line-height: 1.6; }
    .page-audio main .au-piste p { line-height: 1.6; }
    .au-croise-texte { line-height: 1.6; }
}
@media (max-width: 640px) {
    .page-audio main .au-piste-note { padding: 0 16px; }
}
@media (max-width: 576px) {
    .page-boutique main .au-chapeau { font-size: 0.9rem; line-height: 1.5; }
    .page-audio main .au-piste p { font-size: 0.85rem; line-height: 1.5; }
    .page-audio main .au-piste-note { font-size: 0.8rem; }
    .au-croise-texte { font-size: 0.95rem; line-height: 1.5; }
}
@media (max-width: 400px) {
    .page-boutique main .au-chapeau { line-height: 1.4; }
    .au-piste h3 { font-size: 0.75rem; }
    .page-audio main .au-piste p { font-size: 0.8rem; line-height: 1.4; }
    .au-croise-texte { font-size: 0.9rem; line-height: 1.4; }
}