/* ═══════════════════════════════════════════════════════════════
   BOUTIQUE — cartes cadeaux
   S'appuie sur ../assets/css/style.css (variables, navigation, boutons,
   titres de section, pied de page). Tout ce qui est propre à la
   boutique est préfixé « bq- » ; la carte elle-même est dans
   carte-cadeau.css (préfixe « gc- »).
   ═══════════════════════════════════════════════════════════════ */

/* ─── Page ─── */
.page-boutique { background: var(--navy-deep); }
.page-boutique main p { text-align: left; }
/* « hidden » doit toujours l'emporter sur les display des composants */
.page-boutique [hidden] { display: none !important; }
.page-boutique section { scroll-margin-top: 80px; }

/* Sur l'accueil, GSAP fait apparaître le logo et le menu ; ici ils sont là d'emblée */
.page-boutique header nav .logo,
.page-boutique .toggle-btn { opacity: 1; }
.page-boutique .toggle-btn { padding: 0; font: inherit; color: inherit; }
.page-boutique .menu-overlay .menu-links a.is-courant { color: var(--gold); }

/* ─── La barre du haut, toujours visible : le nom de la page, le retour au site ─── */
.page-boutique .bg-nav {
    transform: none;
    justify-content: flex-start;
    padding: 0 calc(3% + 220px) 0 calc(3% + 84px);
}
.bq-nom-page {
    margin: 0;
    font-family: var(--font-display); font-weight: 400;
    font-size: 1.3rem; letter-spacing: 0.12em; white-space: nowrap;
    color: var(--gold);
}
/* Le fil d'Ariane des pages d'un produit : « Boutique ✦ Audio 2027 », la boutique en lien */
.bq-nom-page .bq-ariane { color: var(--gold-dim); text-decoration: none; transition: color 0.3s; }
.bq-nom-page .bq-ariane:hover { color: var(--gold-light); }
.bq-ariane-sep { margin: 0 0.65rem; font-size: 0.55em; vertical-align: 0.2em; color: var(--gold-dim); }
.bq-ariane-ici { color: var(--gold); }
.bq-retour-site {
    position: fixed; z-index: 1000; top: 17px; right: calc(3% + 62px);
    display: inline-flex; align-items: center; gap: 0.5rem;
    height: 36px; padding: 0 1.05rem 0 0.85rem;
    border: 1px solid rgba(201, 168, 76, 0.5); border-radius: 999px;
    background: rgba(6, 6, 26, 0.5);
    color: var(--gold); font-size: 0.88rem; text-decoration: none; white-space: nowrap;
    transition: background 0.3s, color 0.3s, border-color 0.3s, opacity 0.3s, visibility 0.3s;
}
.bq-retour-site:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-deepest); }
.bq-retour-site svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bq-retour-site.bq-sans-menu { right: 3%; }
.bq-retour-court { display: none; }
/* menu ouvert : le bouton s'efface derrière le menu plein écran */
.menu-ouvert .bq-retour-site { opacity: 0; visibility: hidden; }

.page-boutique :focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

.bq-evitement {
    position: absolute; left: -9999px; top: 8px; z-index: 2000;
    padding: 0.6rem 1rem; background: var(--gold); color: var(--navy-deepest); text-decoration: none;
}
.bq-evitement:focus { left: 8px; }

/* Champ caché anti-robots */
.bq-pot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
/* Texte lu par les lecteurs d'écran seulement */
.bq-lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Fond commun des sections sombres (repris des sections du site) */
.bq-atelier,
.bq-faq {
    background:
        radial-gradient(ellipse 80% 50% at 20% 50%, rgba(15, 15, 58, 0.7) 0%, transparent 70%),
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(201, 168, 76, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(10, 10, 46, 0.9) 0%, transparent 70%),
        linear-gradient(180deg, rgba(10, 10, 46, 0.2) 0%, rgba(10, 10, 46, 0.05) 50%, rgba(10, 10, 46, 0.85) 100%);
}
.bq-deroule::before,
.bq-faq::before,
.bq-2027::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ═══════════════════════════════════════════════════════════════
   L'ATELIER
   ═══════════════════════════════════════════════════════════════ */
/* overflow-x: clip coupe le halo doré au bord de l'écran sans créer de zone de défilement
   (l'aperçu reste « sticky ») ; sans lui, le halo élargissait la page sur téléphone */
.bq-atelier { position: relative; padding: 118px 0 3rem; overflow-x: clip; }
/* Les grands blocs ont la largeur du conteneur de l'accueil (.container de style.css : 1340 px,
   dont 20 px de marge de chaque côté, soit 1300 px de contenu) ; toutes les sections ont ses
   marges de 20 px (16 px sur téléphone) */
.bq-atelier-grille {
    max-width: 1340px; margin: 0 auto; padding: 0 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "intro apercu" "form apercu";
    column-gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}
.bq-intro { grid-area: intro; padding-top: 1.5rem; }
.bq-colonne-apercu { grid-area: apercu; height: 100%; }
.bq-form { grid-area: form; min-width: 0; }

.bq-titre {
    margin: 0.7rem 0 0.2rem;
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.9rem, 3.4vw, 2.5rem); line-height: 1.15; letter-spacing: 0.02em;
    color: var(--white);
    text-wrap: balance;
}
.bq-titre span { color: var(--gold-bright); }
.bq-chapeau { /*max-width: 34em;*/color: var(--gray); font-size: 1.06rem; line-height: 1.75; }
.page-boutique main .bq-intro-recu { margin: 1rem 0 0; font-size: 0.95rem; }
.bq-intro-recu a {
    color: var(--gold); text-decoration: none;
    border-bottom: 1px solid rgba(201, 168, 76, 0.4);
    transition: color 0.3s, border-color 0.3s;
}
.bq-intro-recu a:hover { color: var(--gold-light); border-color: var(--gold-light); }
.bq-bandeau-test {
    display: inline-block; margin: 0.4rem 0 0; padding: 0.5rem 0.9rem;
    border: 1px dashed rgba(192, 57, 43, 0.7); border-radius: 4px;
    color: #ffb3b3; font-size: 0.85rem;
}

/* ─── La vitrine : la carte vit sous un halo doré ─── */
.bq-vitrine { position: sticky; top: 92px; padding-bottom: 1rem; }
.bq-scene { position: relative; padding: 20% 1.5% 11%; }
.bq-halo {
    position: absolute; inset: -6% -10% 0;
    background: radial-gradient(closest-side, rgba(201, 168, 76, 0.2), rgba(201, 168, 76, 0.05) 60%, transparent 78%);
    pointer-events: none;
}
.bq-halo::before,
.bq-halo::after {
    content: ''; position: absolute; left: 50%; top: 47%;
    border-radius: 50%; border: 1px solid rgba(201, 168, 76, 0.16);
    transform: translate(-50%, -50%);
}
.bq-halo::before { width: 78%; aspect-ratio: 1; }
.bq-halo::after { width: 100%; aspect-ratio: 1; border-color: rgba(201, 168, 76, 0.08); }
.bq-scene::after {
    content: ''; position: absolute; left: 20%; right: 20%; bottom: 5%; height: 8%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent);
    filter: blur(7px); pointer-events: none;
}
.bq-porte-carte { position: relative; z-index: 1; animation: bqArrivee 1.6s 0.15s var(--ease-expo) both; }
.bq-porte-carte .gc { cursor: pointer; animation: bqFlotte 7s 1.8s ease-in-out infinite; }

.bq-vitrine-pied { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; margin-top: -0.6rem; }
.bq-retourner {
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.55rem 1.15rem; background: none;
    border: 1px solid rgba(201, 168, 76, 0.35); border-radius: 999px;
    color: var(--gold); font: inherit; font-size: 0.9rem; cursor: pointer;
    transition: border-color 0.3s, color 0.3s;
}
.bq-retourner:hover { border-color: var(--gold); color: var(--gold-light); }
.bq-retourner svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform 0.7s var(--ease-expo); }
.bq-retourner[aria-pressed="true"] svg { transform: rotate(180deg); }
.page-boutique main .bq-vitrine-note { max-width: 30em; margin: 0; color: var(--gray); font-size: 0.82rem; text-align: center; }

/* ─── Le cachet de la poste : la carte part chez la personne, à la date choisie ───
   Il flotte avec la carte (même animation, même départ) et se pose d'un coup sec. */
.bq-tampon {
    position: absolute; z-index: 3; top: -2.5%; right: -5%; width: 33%;
    color: #ecd37a; pointer-events: none;
    opacity: 0; visibility: hidden;
    transition: opacity 0.45s, visibility 0s 0.45s;
    animation: bqFlotte 7s 1.8s ease-in-out infinite;
}
.bq-tampon.is-visible { opacity: 0.93; visibility: visible; transition: opacity 0.2s; }
.bq-tampon svg {
    display: block; width: 100%; height: auto; overflow: visible;
    transform: rotate(-12deg);
    filter: drop-shadow(0 1px 1.5px rgba(6, 6, 26, 0.8));
}
.bq-tampon.is-frappe svg { animation: bqTamponne 0.75s var(--ease-expo) both; }
.bq-tampon text { fill: currentColor; font-family: var(--font-display); }
/* un voile bleu nuit sous l'encre : la date se lit aussi sur la photo */
.bq-tampon-fond { fill: #0a0a2e; fill-opacity: 0.55; }
.bq-tampon-ondes { stroke-opacity: 0.8; }
.bq-tampon-arc { font-size: 11px; letter-spacing: 2.4px; }
.bq-tampon-petit { font-size: 9.5px; letter-spacing: 1.4px; }
.bq-tampon-grand { font-size: 20px; letter-spacing: 0.5px; }

/* ─── La carte répond à l'étape en cours : ce qui s'y écrit s'éclaire ─── */
.bq-vitrine.is-eveil-1 .gc-formule { animation: gcReflet 7s ease-in-out infinite, bqLueur 1.8s ease-out; }
.bq-vitrine.is-eveil-1 .gc-desc,
.bq-vitrine.is-eveil-2 .gc-pour-nom,
.bq-vitrine.is-eveil-2 .gc-de-nom,
.bq-vitrine.is-eveil-4 .gc-code { animation: bqLueurTexte 1.8s ease-out; }
.bq-vitrine.is-eveil-4 .gc-recto .gc-bande::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 252, 235, 0.7) 50%, transparent 65%) no-repeat;
    background-size: 250% 100%;
    animation: bqBalayage 1.6s ease-out both;
}

/* ─── Losanges numérotés (fil d'or, « De votre carte à sa séance ») ─── */
.bq-losange { position: relative; display: inline-grid; place-items: center; flex: none; width: 42px; height: 42px; }
.bq-losange::before {
    content: ''; position: absolute; inset: 6px;
    background: var(--navy); border: 1px solid rgba(201, 168, 76, 0.6);
    transform: rotate(45deg);
    transition: background 0.5s var(--ease-expo), border-color 0.5s, box-shadow 0.5s;
}
.bq-losange span { position: relative; font-family: var(--font-display); font-size: 0.85rem; color: var(--gold-light); transition: color 0.5s; }

/* ─── Le fil d'or : les quatre étapes, reliées comme une constellation ───
   --progres (0 à 1) : jusqu'où le fil est tissé. Une étape franchie devient
   un losange plein, qu'on touche pour y revenir. */
.bq-fil { --progres: 0; position: relative; margin: 2.4rem 0 1.9rem; }
.bq-fil-liste {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0; padding: 0; list-style: none;
}
/* le fil relie le centre du premier losange à celui du dernier */
.bq-fil-trame { position: absolute; left: 12.5%; right: 12.5%; top: 21px; height: 1px; background: rgba(201, 168, 76, 0.2); }
.bq-fil-or {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold) 45%, var(--gold-light));
    box-shadow: 0 0 10px rgba(240, 208, 96, 0.45);
    transform: scaleX(var(--progres)); transform-origin: 0 50%;
    transition: transform 1.1s var(--ease-expo);
}
/* l'étincelle court en tête du fil, puis se cache sous le losange atteint */
.bq-fil-etincelle {
    position: absolute; top: 0; left: calc(var(--progres) * 100%);
    width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
    background: radial-gradient(circle, #fffbea 0%, var(--gold-light) 28%, rgba(240, 208, 96, 0) 70%);
    transition: left 1.1s var(--ease-expo);
}
.bq-fil-pas {
    display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
    width: 100%; padding: 0 0.2rem; background: none; border: 0;
    color: inherit; font: inherit; text-align: center; cursor: pointer;
}
.bq-fil-pas:disabled { cursor: default; }
.bq-fil-nom {
    font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.08em; line-height: 1.2;
    color: var(--gray); transition: color 0.4s;
}
.bq-fil-resume {
    display: block; max-width: 100%; min-height: 1.25em; overflow: hidden;
    color: var(--gray); font-size: 0.78rem; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis;
    opacity: 0; transform: translateY(-4px);
    transition: opacity 0.5s, transform 0.5s var(--ease-expo);
}
.bq-fil li.is-fait .bq-fil-resume { opacity: 1; transform: none; }
.bq-fil li.is-fait .bq-fil-nom { color: var(--white-soft); }
.bq-fil li.is-courant .bq-fil-nom,
.bq-fil-pas:not(:disabled):hover .bq-fil-nom { color: var(--gold-light); }
.bq-fil-pas:disabled .bq-losange::before { border-color: rgba(201, 168, 76, 0.28); }
.bq-fil-pas:disabled .bq-losange span { color: rgba(154, 149, 168, 0.8); }
.bq-fil li.is-fait .bq-losange::before {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    border-color: var(--gold-light);
}
.bq-fil li.is-fait .bq-losange span { color: var(--navy-deepest); }
.bq-fil li.is-courant .bq-losange::before {
    background: var(--navy-deep); border-color: var(--gold-light);
    animation: bqPouls 2.8s ease-in-out infinite;
}
.bq-fil-pas:not(:disabled):hover .bq-losange::before { box-shadow: 0 0 16px rgba(240, 208, 96, 0.45); }
.bq-fil li.is-allume .bq-losange { animation: bqAllumage 0.9s var(--ease-expo); }
.bq-fil-pas:focus-visible { outline: none; }
.bq-fil-pas:focus-visible .bq-losange::before { outline: 2px solid var(--gold-light); outline-offset: 4px; }

/* Étoiles qui s'échappent d'un losange atteint, ou du ticket d'un code */
.bq-fil-eclats { position: absolute; z-index: 2; left: 0; top: 21px; width: 0; height: 0; pointer-events: none; }
.bq-fil-eclats span,
.bq-ticket-eclats span {
    position: absolute; left: 0; top: 0; opacity: 0;
    font-family: var(--font-display); font-size: calc(0.72rem * 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;
}

/* ─── Le pupitre : l'étape en cours, à gauche de la carte ─── */
.bq-pupitre { position: relative; }
.bq-etape { min-width: 0; margin: 0; padding: 0; border: 0; }
.bq-etape-titre {
    float: left; width: 100%;
    margin: 0 0 1.4rem; padding: 0;
    font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.03em; line-height: 1.25;
    color: var(--white);
}
.bq-etape-titre:focus { outline: none; }
/* tout ce qui suit le titre passe dessous, même quand le premier bloc est masqué
   (audio « pour moi » : sans « De la part de », les occasions se calaient à côté du titre) */
.bq-etape-titre ~ * { clear: both; }
.bq-etape-compte {
    display: block; margin-bottom: 0.45rem;
    font-family: var(--font-body); font-size: 0.74rem; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--gold);
}

/* ─── Revenir, continuer ─── */
.bq-pilotage { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.1rem; }
.bq-precedent {
    display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0;
    padding: 0.7rem 0.1rem; background: none; border: 0;
    color: var(--gold); font: inherit; font-size: 0.95rem; cursor: pointer;
    transition: color 0.3s, border-color 0.3s;
}
.bq-precedent svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.4s var(--ease-expo); }
.bq-precedent:hover { color: var(--gold-light); }
.bq-precedent:hover svg { transform: translateX(-4px); }
.btn-main.bq-suivant {
	font-family: var(--font-body);
    margin-left: auto; padding: 1.05rem 1.75rem;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    border-color: var(--gold-light);
	border-radius: 6px;
    color: var(--navy-deepest); font-size: 0.78rem; cursor: pointer;
}
.btn-main.bq-suivant::before { background: linear-gradient(135deg, #f5e6a3, #fff6d6); }

/* ─── Choix sélectionnables : séances, options d'envoi, moyens de paiement ─── */
.bq-offres,
.bq-options { display: grid; gap: 0.7rem; }
.bq-options { margin-bottom: 1.2rem; }
.bq-options-ligne { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.bq-offre,
.bq-option {
    position: relative;
    display: grid; grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 0.9rem; row-gap: 0.25rem;
    padding: 1rem 1.2rem;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(201, 168, 76, 0.18); border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.4s, background 0.4s, box-shadow 0.4s;
}
.bq-offre input,
.bq-option input,
.bq-puce input,
.bq-cgv input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.bq-offre:hover,
.bq-option:hover { border-color: rgba(201, 168, 76, 0.4); }
.bq-offre.is-choisi,
.bq-option.is-choisi {
    background: rgba(201, 168, 76, 0.07);
    border-color: rgba(212, 175, 55, 0.65);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.bq-offre:focus-within,
.bq-option:focus-within { outline: 2px solid transparent; }
.bq-offre:has(input:focus-visible),
.bq-option:has(input:focus-visible) { outline: 2px solid var(--gold-light); outline-offset: 3px; }

.bq-coche {
    grid-row: 1 / span 2; align-self: center; justify-self: center;
    width: 13px; height: 13px;
    border: 1px solid rgba(201, 168, 76, 0.75);
    transform: rotate(45deg);
    transition: background 0.4s var(--ease-expo), box-shadow 0.4s, border-color 0.4s;
}
.is-choisi > .bq-coche {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    border-color: var(--gold-light);
    box-shadow: 0 0 12px rgba(240, 208, 96, 0.55);
}

.bq-offre-ligne { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; }
.bq-offre-nom {
    font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.03em;
    color: var(--white-soft); white-space: nowrap; transition: color 0.4s;
}
.bq-offre.is-choisi .bq-offre-nom { color: var(--gold-light); }
.bq-offre-points { flex: 1; min-width: 1rem; border-bottom: 1px dotted rgba(201, 168, 76, 0.45); transform: translateY(-0.3em); }
.bq-offre-prix { font-family: var(--font-display); font-size: 1.22rem; color: var(--gold); white-space: nowrap; }
.bq-offre-detail {
    grid-column: 2;
    display: flex; justify-content: space-between; gap: 1rem;
    color: var(--gray); font-size: 0.92rem; line-height: 1.5;
}
.bq-offre-duree { flex: none; color: var(--gold-dim); white-space: nowrap; }

.bq-option-titre { color: var(--white); font-size: 1.02rem; }
.bq-option-texte { grid-column: 2; color: var(--gray); font-size: 0.88rem; line-height: 1.5; }

/* ─── Champs ─── */
.bq-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2rem; }
.bq-champ { min-width: 0; margin-bottom: 1.2rem; }
.bq-champ > label,
.bq-label { display: block; margin-bottom: 0.45rem; padding: 0; color: var(--white-soft); font-size: 0.95rem; }
.bq-facultatif { color: var(--gray); font-size: 0.85em; }
.bq-sous { min-width: 0; margin: 0 0 1.4rem; padding: 0; border: 0; }

.page-boutique main :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="password"], textarea, select) {
    width: 100%;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(201, 168, 76, 0.22); border-radius: 3px;
    color: var(--white); font-family: var(--font-body); font-size: 1rem; line-height: 1.4;
    outline: none;
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
    -webkit-appearance: none; appearance: none;
}
.page-boutique main :is(input, textarea, select):focus {
    border-color: var(--gold);
    background: rgba(201, 168, 76, 0.06);
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.14);
}
.page-boutique main :is(input, textarea)::placeholder { color: rgba(154, 149, 168, 0.65); }
.page-boutique main [aria-invalid="true"] { border-color: #e08b8b; }
.page-boutique main input[type="date"],
.page-boutique main select { color-scheme: dark; }
.page-boutique main select {
    padding-right: 2.4rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
    background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
/* La liste qui se déroule : Chrome la peint avec le fond du champ, presque transparent, donc
   blanc, sous un texte blanc (Firefox dessine la sienne en gris) : des options bleu nuit opaques */
.page-boutique main select option {
    background-color: var(--navy-mid, #161650);
    color: var(--white, #f4f0e8);
}
.page-boutique main select option[value=""] { color: var(--gray, #9a95a8); }
.page-boutique main textarea { min-height: 110px; resize: vertical; }

.bq-erreur { margin: 0.4rem 0 0; color: #f0a8a8; font-size: 0.86rem; line-height: 1.45; }
.bq-erreur:empty { display: none; }
.bq-aide { margin: 0.4rem 0 0; color: var(--gray); font-size: 0.82rem; line-height: 1.5; }
.bq-aide a { color: var(--gold-light); text-decoration: none; border-bottom: 1px solid rgba(240, 208, 96, 0.4); }
.bq-aide a:hover { border-bottom-color: currentColor; }

/* Puces (occasion, format de séance) */
.bq-puces { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bq-puce { position: relative; cursor: pointer; }
.bq-puce span {
    display: inline-block; padding: 0.45rem 1rem;
    border: 1px solid rgba(201, 168, 76, 0.3); border-radius: 999px;
    color: var(--white-soft); font-size: 0.9rem;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.bq-puce:hover span { border-color: var(--gold); }
.bq-puce input:checked + span {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    border-color: transparent; color: var(--navy-deepest);
}
.bq-puce input:focus-visible + span { outline: 2px solid var(--gold-light); outline-offset: 2px; }

/* Message et idées */
.bq-label-ligne { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1rem; margin-bottom: 0.45rem; }
.bq-label-ligne label { margin: 0; color: var(--white-soft); font-size: 0.95rem; }
.bq-lien {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.15rem 0; background: none; border: 0; border-bottom: 1px solid rgba(201, 168, 76, 0.35);
    color: var(--gold); font: inherit; font-size: 0.9rem; cursor: pointer;
    transition: color 0.3s, border-color 0.3s;
}
.bq-lien:hover { color: var(--gold-light); border-color: var(--gold-light); }
.bq-lien svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.bq-idees {
    margin: 0.3rem 0 0.8rem; padding: 0.9rem;
    background: rgba(6, 6, 26, 0.45);
    border: 1px solid rgba(201, 168, 76, 0.2); border-radius: 8px;
}
.page-boutique main .bq-idees-titre { margin: 0 0 0.6rem; color: var(--gray); font-size: 0.82rem; }
.bq-idees-liste { display: grid; gap: 0.5rem; }
.bq-idee {
    padding: 0.7rem 0.9rem; text-align: left;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(201, 168, 76, 0.15); border-radius: 6px;
    color: var(--white-soft); font: inherit; font-size: 0.92rem; line-height: 1.5; cursor: pointer;
    transition: border-color 0.3s, background 0.3s;
}
.bq-idee:hover,
.bq-idee:focus-visible { border-color: var(--gold); background: rgba(201, 168, 76, 0.08); }
.page-boutique main .bq-compteur { margin: 0.35rem 0 0; color: var(--gray); font-size: 0.8rem; text-align: right; }
.page-boutique main .bq-compteur.is-bientot { color: var(--gold-light); }

/* Bloc dépliable (envoi à la personne) */
.bq-depliant { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease-expo); }
.bq-depliant.is-ouvert { grid-template-rows: 1fr; }
.bq-depliant-contenu { min-height: 0; overflow: hidden; }

/* ─── Récapitulatif et paiement ─── */
.bq-recap { position: relative; z-index: 0; margin-bottom: 1.4rem; padding: 1.3rem 1.4rem 1.1rem; border-radius: 12px; }
.bq-recap::after {
    content: ''; position: absolute; inset: -1.5px; z-index: -2; border-radius: 13px;
    background: linear-gradient(135deg, #8a7432 0%, #c9a84c 15%, #f0d060 25%, #f5e6a3 35%, #f0d060 45%, #c9a84c 55%, #8a7432 65%, #c9a84c 75%, #f0d060 85%, #f5e6a3 90%, #c9a84c 100%);
}
.bq-recap::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 12px;
    background: linear-gradient(145deg, #1b1b44 0%, #0b0b30 60%, #1b1b44 100%);
}
.bq-recap dl { display: grid; gap: 0.55rem; margin: 0; }
.bq-recap dl > div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.95rem; }
.bq-recap dt { flex: none; color: var(--gray); }
.bq-recap dd { margin: 0; color: var(--white-soft); text-align: right; overflow-wrap: anywhere; }
.page-boutique main .bq-total {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 1rem 0 0; padding-top: 0.9rem;
    border-top: 1px solid rgba(201, 168, 76, 0.22);
}
.bq-total span { font-family: var(--font-display); letter-spacing: 0.08em; color: var(--gold-light); }
.bq-total strong {
    font-family: var(--font-display); font-weight: 400; font-size: 2rem; line-height: 1;
    background: linear-gradient(135deg, var(--gold-dim) 0%, var(--gold) 25%, var(--gold-light) 50%, var(--gold) 75%, var(--gold-dim) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    animation: priceShimmer 4s ease-in-out infinite;
}
.page-boutique main .bq-tva { margin: 0.25rem 0 0; color: var(--gray); font-size: 0.78rem; text-align: right; }
.page-boutique main .bq-tva:empty { display: none; }

/* Réduction : la ligne du code, l'ancien prix barré à côté du total */
.bq-recap .bq-recap-remise dt,
.bq-recap .bq-recap-remise dd { color: var(--gold-light); }
/* Les codes (carte, réduction, virement) s'écrivent en Marcellus : en Cinzel Decorative, ils se lisent mal */
.bq-recap-remise [data-recap="code"] { font-family: var(--font-body); letter-spacing: 0.08em; }
.bq-total-montants { display: inline-flex; align-items: baseline; flex-wrap: wrap; justify-content: flex-end; gap: 0.2rem 0.75rem; }
.bq-total-avant {
    font-family: var(--font-display); font-size: 1.1rem; color: var(--gray);
    text-decoration: line-through; text-decoration-color: rgba(240, 208, 96, 0.8);
}
.bq-offre-prix .bq-prix-barre {
    margin-right: 0.45rem; color: var(--gray); font-size: 0.8em;
    text-decoration: line-through; text-decoration-color: rgba(240, 208, 96, 0.8);
}
.bq-offre-prix.is-remise { color: var(--gold-light); }

/* ─── Code de réduction : un lien discret, un champ, puis un ticket doré ─── */
.bq-promo { position: relative; margin: 0 0 1.4rem; }
.bq-promo-ouvrir svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.bq-promo-saisie { margin-top: 0.9rem; animation: bqApparition 0.5s var(--ease-expo); }
.page-boutique main #codePromo { font-family: var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; }
.page-boutique main #codePromo::placeholder { letter-spacing: 0.02em; text-transform: none; }

/* le ticket : bord pointillé, deux encoches, comme un coupon détaché */
.bq-ticket {
    position: relative;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0 0.9rem;
    padding: 0.85rem 0.9rem 0.85rem 1.35rem;
    background: linear-gradient(120deg, rgba(240, 208, 96, 0.17), rgba(201, 168, 76, 0.05) 55%, rgba(240, 208, 96, 0.12));
    border: 1px dashed rgba(240, 208, 96, 0.7); border-radius: 10px;
    -webkit-mask: radial-gradient(circle at 0 50%, transparent 9px, #000 9.5px) 0 0 / 51% 100% no-repeat,
                  radial-gradient(circle at 100% 50%, transparent 9px, #000 9.5px) 100% 0 / 51% 100% no-repeat;
            mask: radial-gradient(circle at 0 50%, transparent 9px, #000 9.5px) 0 0 / 51% 100% no-repeat,
                  radial-gradient(circle at 100% 50%, transparent 9px, #000 9.5px) 100% 0 / 51% 100% no-repeat;
}
.bq-ticket.is-pose { animation: bqTicket 0.8s var(--ease-expo); }
.bq-ticket-etoile { color: var(--gold-light); font-size: 1.05rem; text-shadow: 0 0 10px rgba(240, 208, 96, 0.75); }
.bq-ticket-texte { display: grid; gap: 0.15rem; min-width: 0; }
.bq-ticket-code { font-family: var(--font-body); font-size: 1.1rem; letter-spacing: 0.14em; color: var(--gold-light); overflow-wrap: anywhere; }
.bq-ticket-detail { color: var(--white-soft); font-size: 0.85rem; line-height: 1.45; }
.bq-ticket-valeur { font-family: var(--font-display); font-size: 1.35rem; color: var(--gold-light); white-space: nowrap; }
.bq-ticket.is-hors { border-color: rgba(242, 196, 109, 0.55); }
.bq-ticket.is-hors .bq-ticket-detail { color: #f2c46d; }
.bq-ticket.is-hors .bq-ticket-valeur { color: var(--gray); text-decoration: line-through; }
.bq-ticket-retirer {
    display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
    background: none; border: 1px solid rgba(201, 168, 76, 0.35); border-radius: 50%;
    color: var(--gold); cursor: pointer; transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.bq-ticket-retirer svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.bq-ticket-retirer:hover { background: rgba(201, 168, 76, 0.12); border-color: var(--gold); color: var(--gold-light); }
.bq-ticket-eclats { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }

/* Le code apporté par un lien (boutique/?code=…), rappelé sous le texte d'accueil */
.page-boutique main .bq-bandeau-code {
    display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem;
    margin: 0.7rem 0 0; padding: 0.5rem 1rem;
    background: rgba(240, 208, 96, 0.08);
    border: 1px dashed rgba(240, 208, 96, 0.6); border-radius: 999px;
    color: var(--white-soft); font-size: 0.88rem; line-height: 1.5;
}
.bq-bandeau-code strong { font-family: var(--font-body); font-weight: 400; letter-spacing: 0.1em; color: var(--gold-light); }
.page-boutique main .bq-bandeau-code.is-refuse { background: rgba(140, 30, 30, 0.14); border-color: rgba(224, 139, 139, 0.5); color: #ffd6d6; border-radius: 6px; }

.page-boutique main .bq-moyen-info { margin: 0 0 0.6rem; color: var(--gray); font-size: 0.88rem; line-height: 1.6; }
.page-boutique main .bq-moyen-info:empty { display: none; }

.bq-cgv {
    position: relative;
    display: flex; align-items: flex-start; gap: 0.8rem;
    margin: 1rem 0 0.2rem;
    color: var(--white-soft); font-size: 0.95rem; line-height: 1.5; cursor: pointer;
}
.bq-case {
    flex: none; display: grid; place-items: center;
    width: 20px; height: 20px; margin-top: 2px;
    border: 1px solid rgba(201, 168, 76, 0.6); border-radius: 3px;
    transition: background 0.3s, border-color 0.3s;
}
.bq-case::after {
    content: ''; width: 10px; height: 5px; margin-top: -2px;
    border-left: 2px solid var(--navy-deepest); border-bottom: 2px solid var(--navy-deepest);
    transform: rotate(-45deg) scale(0);
    transition: transform 0.3s var(--ease-expo);
}
.bq-cgv input:checked + .bq-case { background: linear-gradient(135deg, var(--gold), var(--gold-light)); border-color: var(--gold-light); }
.bq-cgv input:checked + .bq-case::after { transform: rotate(-45deg) scale(1); }
.bq-cgv input:focus-visible + .bq-case { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.bq-cgv a { color: var(--gold); }

.page-boutique main .bq-alerte {
    margin: 1rem 0 0; padding: 0.9rem 1rem;
    background: rgba(140, 30, 30, 0.18);
    border: 1px solid rgba(224, 139, 139, 0.5); border-radius: 6px;
    color: #ffd6d6; font-size: 0.92rem; line-height: 1.55;
}
.page-boutique main .bq-alerte.is-info { background: rgba(201, 168, 76, 0.08); border-color: rgba(201, 168, 76, 0.5); color: var(--white-soft); }

.btn-main.bq-payer {
	font-family: var(--font-body);
    width: 100%; justify-content: center;
    margin-top: 1.3rem; padding: 1.15rem 1.5rem;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    border-color: var(--gold-light);
    color: var(--navy-deepest); font-size: 0.8rem; cursor: pointer;
}
.btn-main.bq-payer::before { background: linear-gradient(135deg, #f5e6a3, #fff6d6); }
.btn-main.bq-payer[disabled] { cursor: not-allowed; opacity: 0.55; }
.btn-main.bq-payer.is-occupe { cursor: progress; opacity: 0.85; }
.btn-main.bq-payer.is-occupe svg { animation: bqTourne 1s linear infinite; }
.page-boutique main .bq-rassurance { margin: 0.8rem 0 0; color: var(--gray); font-size: 0.82rem; text-align: center; }
.page-boutique main .bq-rassurance:empty { display: none; }
/* les cartes acceptées, sous le bouton de paiement (exigé par Stancer : les montrer avant le paiement) ;
   logos de Shopify, payment_icons (licence MIT), dans assets/img/cartes/ */
.page-boutique main .bq-cartes { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.4rem; margin: 0.9rem 0 0; color: var(--gray); font-size: 0.8rem; text-align: center; }
.page-boutique main .bq-cartes[hidden] { display: none; }
.page-boutique main .bq-cartes span { margin-right: 0.35rem; letter-spacing: 0.02em; }
.page-boutique main .bq-cartes img { display: block; width: 38px; height: 24px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.page-boutique main .bq-releve { margin: 0.45rem 0 0; color: var(--gray); font-size: 0.78rem; line-height: 1.5; text-align: center; }
.page-boutique main .bq-releve[hidden] { display: none; }
.page-boutique main .bq-releve strong { color: var(--white-soft); font-weight: normal; letter-spacing: 0.04em; white-space: nowrap; }

/* Boutons secondaires */
.bq-bouton {
    flex: none; padding: 0.85rem 1.3rem;
    background: transparent; border: 1px solid var(--gold); border-radius: 3px;
    color: var(--gold); font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
    cursor: pointer; transition: background 0.4s var(--ease-expo), color 0.4s;
}
.bq-bouton:hover { background: var(--gold); color: var(--navy-deepest); }
.bq-bouton[disabled] { opacity: 0.6; cursor: progress; }

/* ═══════════════════════════════════════════════════════════════
   COMMENT ÇA SE PASSE
   ═══════════════════════════════════════════════════════════════ */
/* « Le voyage de la carte » (20/10/2026, pages des cartes et de l'audio) : entre la section qui précède
   et la section dorée « Vous avez reçu… ? », un bleu nuit plus clair et une lueur d'or ; en filigrane,
   la roue des neuf années tourne lentement ; une étincelle parcourt le fil des quatre étapes, qui
   s'allument à son passage, la dernière plus longtemps, avec une onde */
.bq-deroule {
    position: relative; overflow: hidden; padding: 4rem 0 4.5rem;
    background:
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(201, 168, 76, 0.1), transparent 70%),
        radial-gradient(ellipse 45% 60% at 10% 25%, rgba(57, 69, 141, 0.22), transparent 70%),
        radial-gradient(ellipse 70% 35% at 50% 105%, rgba(240, 208, 96, 0.08), transparent 70%),
        linear-gradient(180deg, #0c0c36, var(--navy-deep));
}
.bq-deroule::after {
    content: ''; position: absolute; z-index: 0; top: 50%; right: -150px;
    width: 560px; aspect-ratio: 1; margin-top: -280px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23c9a84c'%3E%3Ccircle cx='100' cy='100' r='82' stroke-width='0.5'/%3E%3Ccircle cx='100' cy='100' r='96' stroke-width='0.35' stroke-dasharray='0.6 3'/%3E%3Ccircle cx='100' cy='100' r='62' stroke-width='0.35' stroke-dasharray='0.6 3'/%3E%3Cpath fill='%230c0c36' stroke-width='0.6' d='M100 13l5 5-5 5-5-5zM152.7 32.2l5 5-5 5-5-5zM180.8 80.8l5 5-5 5-5-5zM171 136l5 5-5 5-5-5zM128 172l5 5-5 5-5-5zM72 172l5 5-5 5-5-5zM29 136l5 5-5 5-5-5zM19.2 80.8l5 5-5 5-5-5zM47.3 32.2l5 5-5 5-5-5z'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.16; pointer-events: none;
    animation: bqVoyageRoue 240s linear infinite;
}
.bq-deroule > * { position: relative; z-index: 1; }
.bq-pas {
    position: relative;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem;
    max-width: 1180px; margin: 2.6rem auto 0; padding: 0 20px; list-style: none;
}
.bq-pas::before {
    content: ''; position: absolute; top: 21px; left: 14%; right: 14%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.75) 12%, rgba(240, 208, 96, 0.75) 88%, transparent);
    box-shadow: 0 0 8px rgba(240, 208, 96, 0.35);
}
.bq-pas li { position: relative; z-index: 1; text-align: center; }
/* l'étincelle : une bande accrochée à la première étape, du centre du losange 1 à celui du losange 4
   (trois colonnes et trois espaces de 2rem), où le point lumineux glisse à vitesse constante.
   Accrochée à la grille elle-même, Chrome ne la redessinait pas pendant l'animation */
.bq-deroule .bq-pas li:first-child::after {
    content: ''; position: absolute; z-index: -1; top: 12px; left: calc(50% - 9px);
    width: calc(300% + 6rem + 18px); height: 18px;
    background: radial-gradient(circle closest-side, #fffbea 0%, var(--gold-light) 45%, rgba(240, 208, 96, 0) 100%) 0 50% / 18px 18px no-repeat;
    opacity: 0; pointer-events: none;
    animation: bqVoyageEtincelle 7s linear infinite;
}
/* chaque étape s'allume au passage de l'étincelle (tous les 1,4 s), la dernière plus longtemps */
.bq-deroule .bq-losange::before { animation: bqVoyageEtape 7s ease-in-out infinite; }
.bq-deroule .bq-losange span { animation: bqVoyageNombre 7s ease-in-out infinite; }
.bq-deroule li:nth-child(2) .bq-losange::before,
.bq-deroule li:nth-child(2) .bq-losange span { animation-delay: 1.4s; }
.bq-deroule li:nth-child(3) .bq-losange::before,
.bq-deroule li:nth-child(3) .bq-losange span { animation-delay: 2.8s; }
.bq-deroule li:nth-child(4) .bq-losange::before { animation-name: bqVoyageArrivee; animation-delay: 4.2s; }
.bq-deroule li:nth-child(4) .bq-losange span { animation-name: bqVoyageArriveeNombre; animation-delay: 4.2s; }
/* à l'arrivée, une onde en losange part du dernier */
.bq-deroule li:nth-child(4) .bq-losange::after {
    content: ''; position: absolute; inset: 6px;
    border: 1px solid var(--gold-light); transform: rotate(45deg);
    opacity: 0; pointer-events: none;
    animation: bqVoyageOnde 7s ease-out 4.2s infinite;
}
.bq-pas .bq-losange { margin: 0 auto 1rem; }
.bq-pas h3 { margin: 0 0 0.5rem; font-family: var(--font-display); font-weight: 400; font-size: 1rem; letter-spacing: 0.05em; color: var(--gold-light); }
.page-boutique main .bq-pas p { max-width: 22em; margin: 0 auto; color: var(--gray); font-size: 0.93rem; line-height: 1.65; text-align: center; }

/* ═══════════════════════════════════════════════════════════════
   VOUS AVEZ REÇU UNE CARTE ? (section dorée, comme « Le processus »)
   ═══════════════════════════════════════════════════════════════ */
.bq-recu {
    position: relative; overflow: hidden; padding: 4.5rem 0;
    background: linear-gradient(160deg, #8a7432 0%, #b89940 12%, #c9a84c 25%, #d4b050 38%, #f0d060 50%, #d4b050 62%, #c9a84c 75%, #b89940 88%, #8a7432 100%);
}
.bq-recu::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.8;
    background:
        radial-gradient(ellipse 30% 30% at 85% 10%, rgba(255, 245, 220, 0.3) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 20% 20%, rgba(240, 208, 96, 0.35) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 80% 80%, rgba(240, 208, 96, 0.25) 0%, transparent 60%);
}
.bq-recu-grille {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3rem; align-items: center;
    max-width: 1340px; margin: 0 auto; padding: 0 20px;
}
.bq-recu .stitle { color: var(--navy-deepest); }
.bq-recu .stitle span { color: var(--navy); }
.page-boutique main .bq-recu-texte p { color: #2a200c; font-size: 1.02rem; line-height: 1.7; }
.bq-recu-tel a { color: var(--navy-deepest); text-decoration: none; border-bottom: 1px solid currentColor; }
.bq-recu-panneau {
    padding: 1.8rem; border-radius: 14px;
    background: linear-gradient(145deg, #1b1b44 0%, #0a0a2e 60%, #1b1b44 100%);
    box-shadow: 0 20px 50px rgba(6, 6, 26, 0.35);
}
.bq-code-form > label { display: block; margin-bottom: 0.5rem; color: var(--white-soft); }
.bq-code-ligne { display: flex; gap: 0.6rem; }
.bq-code-ligne input { flex: 1; min-width: 0; }
.page-boutique main #code { font-family: var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; }

.bq-code-resultat { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(201, 168, 76, 0.2); }
.bq-carte-info { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 1.2rem; align-items: center; }
.bq-carte-info h3 { margin: 0 0 0.3rem; font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; color: var(--gold-light); }
.page-boutique main .bq-carte-info p { margin: 0.25rem 0 0; color: var(--white-soft); font-size: 0.93rem; line-height: 1.55; }
.bq-etat { display: inline-block; margin-top: 0.4rem; padding: 0.2rem 0.75rem; border-radius: 999px; font-size: 0.78rem; letter-spacing: 0.06em; }
.bq-etat-valide { background: rgba(46, 160, 90, 0.18); border: 1px solid rgba(46, 160, 90, 0.45); color: #a6e9bd; }
.bq-etat-utilisee,
.bq-etat-expiree,
.bq-etat-annulee { background: rgba(192, 57, 43, 0.15); border: 1px solid rgba(192, 57, 43, 0.4); color: #ffbcbc; }

/* Formulaire de demande de rendez-vous (boutique et carte en ligne) */
.bq-resa { display: grid; gap: 0.2rem; margin-top: 1.5rem; }
.bq-resa h3 { margin: 0 0 0.3rem; font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; color: var(--gold-light); }
.page-boutique main .bq-resa .bq-resa-intro { margin: 0 0 0.8rem; color: var(--gray); font-size: 0.88rem; line-height: 1.55; }
.page-boutique main .bq-succes {
    padding: 1rem 1.1rem; border-radius: 6px;
    background: rgba(46, 160, 90, 0.12); border: 1px solid rgba(46, 160, 90, 0.45);
    color: #c9f2d6; line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════
   AUSSI À OFFRIR : L'AUDIO 2027 (renvoi vers audio-2027.html)
   Ici, le fond de la section sur toute la largeur et la largeur de son
   contenu ; le texte et le visuel sont communs avec l'accueil
   (../../assets/css/encart-audio.css, chargée après cette feuille).
   ═══════════════════════════════════════════════════════════════ */
.bq-2027 {
    position: relative; overflow: hidden; padding: 4.5rem 0;
    background:
        radial-gradient(ellipse 55% 70% at 78% 50%, rgba(57, 69, 141, 0.3), transparent 70%),
        radial-gradient(ellipse 40% 60% at 80% 50%, rgba(201, 168, 76, 0.08), transparent 70%),
        var(--navy-deepest);
}
.bq-2027-grille { max-width: 1340px; margin: 0 auto; padding: 0 20px; }
.page-boutique main .bq-2027-texte > p { max-width: 36em; color: var(--gray); line-height: 1.75; }
/* Sur cette page, la section n'est qu'un appel vers l'audio : un bandeau, pas plus haut qu'avant ce visuel
   (504 px sur ordinateur, 620 à 660 px sous 992 px). Seule la hauteur change par rapport à l'accueil :
   le nombre s'allonge en bandeau, la voix s'étend de part et d'autre, les marges se resserrent. */
.page-cartes .bq-2027 { padding: 4rem 0; }
.page-cartes .bq-2027 .v27-nombre { aspect-ratio: 5 / 1; }
@media (max-width: 991px) {
    .page-cartes .bq-2027 { padding: 2.5rem 0; }
    .page-cartes .bq-2027 .v27-nombre { aspect-ratio: auto; height: clamp(84px, 13vw, 100px); }
    .page-cartes main .bq-2027-texte > p { margin-top: 1.2rem; }
}
/* sous 641 px, la taille du QR code vient d'encart-audio.css, comme sur l'accueil */
@media (min-width: 641px) and (max-width: 991px) {
    .page-cartes .bq-2027 .v27-qr-code { width: 64px; height: 64px; }
}

/* ═══════════════════════════════════════════════════════════════
   QUESTIONS
   ═══════════════════════════════════════════════════════════════ */
.bq-faq { position: relative; padding: 4rem 0 4.5rem; }
.bq-faq-liste { max-width: 780px; margin: 2rem auto 0; padding: 0 20px; }
.bq-faq details { border-bottom: 1px solid rgba(201, 168, 76, 0.18); }
.bq-faq summary {
    position: relative; padding: 1.15rem 2.5rem 1.15rem 0;
    color: var(--white-soft); font-size: 1.04rem; list-style: none; cursor: pointer;
    transition: color 0.3s;
}
.bq-faq summary::-webkit-details-marker { display: none; }
.bq-faq summary::after {
    content: ''; position: absolute; right: 0.4rem; top: 50%;
    width: 9px; height: 9px;
    border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.4s var(--ease-expo);
}
.bq-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.bq-faq summary:hover { color: var(--gold-light); }
.page-boutique main .bq-faq details p { margin: 0 0 1.2rem; padding-right: 2rem; color: var(--gray); line-height: 1.7; }
.bq-faq details a { color: var(--gold); }

.page-boutique .footer a + a { margin-left: 0; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE : barre de récapitulatif et aperçu en grand
   ═══════════════════════════════════════════════════════════════ */
.bq-barre {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: none; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.65rem 16px calc(0.65rem + env(safe-area-inset-bottom));
    background: rgba(6, 6, 26, 0.93);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-top: 1px solid rgba(201, 168, 76, 0.25);
    transform: translateY(110%);
    transition: transform 0.5s var(--ease-expo);
}
.bq-barre.is-visible { transform: none; }
.bq-barre-apercu {
    display: inline-flex; align-items: center; gap: 0.75rem;
    padding: 0; background: none; border: 0;
    color: var(--gold); font: inherit; font-size: 0.9rem; cursor: pointer;
}
.bq-barre-mini { display: block; width: 66px; }
.bq-barre-total { display: flex; flex-direction: column; align-items: flex-end; margin: 0; line-height: 1.25; }
.bq-barre-total span { color: var(--gray); font-size: 0.8rem; }
.bq-barre-total strong { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; color: var(--gold-light); }

.bq-modal { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 16px; }
.bq-modal[hidden] { display: none; }
.bq-modal-fond { position: absolute; inset: 0; background: rgba(6, 6, 26, 0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bq-modal-boite { position: relative; display: grid; gap: 1.4rem; width: min(560px, 100%); animation: bqApparition 0.6s var(--ease-expo); }
.bq-modal-actions { display: flex; justify-content: center; gap: 0.8rem; }

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes bqArrivee {
    from { opacity: 0; transform: translateY(46px) rotateX(24deg) rotateZ(-3deg) scale(0.94); }
    to { opacity: 1; transform: none; }
}
@keyframes bqFlotte {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}
@keyframes bqApparition {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}
@keyframes bqTourne { to { transform: rotate(360deg); } }
/* le losange de l'étape en cours respire */
@keyframes bqPouls {
    0%, 100% { box-shadow: 0 0 0 0 rgba(240, 208, 96, 0.4), 0 0 14px rgba(240, 208, 96, 0.3); }
    50% { box-shadow: 0 0 0 7px rgba(240, 208, 96, 0), 0 0 22px rgba(240, 208, 96, 0.5); }
}
/* le losange atteint s'allume */
@keyframes bqAllumage {
    0% { transform: scale(1); }
    35% { transform: scale(1.32); }
    100% { transform: scale(1); }
}
@keyframes bqTamponne {
    0% { opacity: 0; transform: scale(1.75) rotate(-3deg); }
    55% { opacity: 1; transform: scale(0.93) rotate(-13deg); }
    78% { transform: scale(1.03) rotate(-11.5deg); }
    100% { opacity: 1; transform: scale(1) rotate(-12deg); }
}
@keyframes bqTicket {
    0% { opacity: 0; transform: translateY(10px) scale(0.92) rotate(-1.5deg); }
    60% { opacity: 1; transform: scale(1.02) rotate(0.4deg); }
    100% { opacity: 1; transform: none; }
}
@keyframes bqLueur {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(240, 208, 96, 0)); }
    30% { filter: drop-shadow(0 0 8px rgba(240, 208, 96, 0.9)); }
}
@keyframes bqLueurTexte {
    0%, 100% { text-shadow: 0 0 0 rgba(240, 208, 96, 0); }
    30% { text-shadow: 0 0 14px rgba(240, 208, 96, 0.95), 0 0 3px rgba(255, 246, 214, 0.9); }
}
@keyframes bqVoyageRoue { to { transform: rotate(360deg); } }
@keyframes bqVoyageEtincelle {
    0% { background-position: 0% 50%; opacity: 0; }
    5% { opacity: 1; }
    60% { background-position: 100% 50%; opacity: 1; }
    68%, 100% { background-position: 100% 50%; opacity: 0; }
}
@keyframes bqVoyageEtape {
    0%, 17%, 100% { background-color: var(--navy); border-color: rgba(201, 168, 76, 0.6); box-shadow: none; }
    4%, 9% { background-color: var(--gold); border-color: #fff6d6; box-shadow: 0 0 20px rgba(240, 208, 96, 0.6); }
}
@keyframes bqVoyageNombre {
    0%, 17%, 100% { color: var(--gold-light); }
    4%, 9% { color: var(--navy-deepest); }
}
@keyframes bqVoyageArrivee {
    0%, 45%, 100% { background-color: var(--navy); border-color: rgba(201, 168, 76, 0.6); box-shadow: none; }
    4%, 32% { background-color: var(--gold-light); border-color: #fff6d6; box-shadow: 0 0 26px rgba(240, 208, 96, 0.75); }
}
@keyframes bqVoyageArriveeNombre {
    0%, 45%, 100% { color: var(--gold-light); }
    4%, 32% { color: var(--navy-deepest); }
}
@keyframes bqVoyageOnde {
    0% { opacity: 0; transform: rotate(45deg) scale(1); }
    6% { opacity: 0.9; }
    30%, 100% { opacity: 0; transform: rotate(45deg) scale(2.6); }
}
@keyframes bqBalayage {
    from { background-position: 130% 0; }
    to { background-position: -130% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .bq-porte-carte,
    .bq-porte-carte .gc,
    .bq-modal-boite,
    .bq-tampon,
    .bq-tampon svg,
    .bq-ticket,
    .bq-promo-saisie,
    .bq-fil li .bq-losange,
    .bq-fil li .bq-losange::before,
    .bq-deroule::after,
    .bq-deroule .bq-losange::before,
    .bq-deroule .bq-losange::after,
    .bq-deroule .bq-losange span { animation: none !important; }
    .bq-deroule .bq-pas li:first-child::after { display: none; }
    .bq-total strong { animation: none; }
    .bq-depliant,
    .bq-fil-or,
    .bq-fil-etincelle,
    .bq-fil-resume { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .bq-atelier { padding-top: 96px; }
    .bq-atelier-grille { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "apercu" "form"; }
    .bq-intro { padding-top: 0.5rem; }
    .bq-vitrine { position: static; }
    .bq-scene { max-width: 620px; margin: 0 auto; padding: 6% 1% 9%; }
    .bq-fil { margin-top: 1.6rem; scroll-margin-top: 84px; }
    .bq-pas { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.6rem; }
    .bq-pas::before { display: none; }
    /* le voyage de la carte sur deux colonnes : plus de fil ni d'étincelle, les étapes s'allument toujours */
    .bq-deroule .bq-pas li:first-child::after { display: none; }
    .bq-deroule::after { width: 380px; right: -170px; margin-top: -190px; opacity: 0.12; }
    .bq-recu-grille { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    /* le texte de l'audio sur toute la largeur */
    .page-boutique main .bq-2027-texte > p { max-width: none; }
    .bq-barre { display: flex; }
    .page-boutique { padding-bottom: 72px; }
}

@media (max-width: 640px) {
    .bq-atelier-grille,
    .bq-recu-grille,
    .bq-2027-grille,
    .bq-pas,
    .bq-faq-liste { padding-left: 16px; padding-right: 16px; }
    .bq-titre { font-size: 1.75rem; }
    .bq-fil { margin-left: -8px; margin-right: -8px; }
    .bq-fil-trame { top: 17px; }
    .bq-fil-eclats { top: 17px; }
    .bq-fil .bq-losange { width: 34px; height: 34px; }
    .bq-fil .bq-losange::before { inset: 5px; }
    .bq-fil .bq-losange span { font-size: 0.72rem; }
    .bq-fil-pas { gap: 0.35rem; }
    .bq-fil-nom { font-size: 0.66rem; letter-spacing: 0.04em; }
    .bq-fil-article,
    .bq-fil-resume { display: none; }
    .bq-etape-titre { font-size: 1.25rem; margin-bottom: 1.2rem; }
    .bq-pilotage { margin-top: 1.7rem; gap: 0.7rem; }
    /* le retour devient un bouton carré, son libellé reste lu par les lecteurs d'écran */
    .bq-precedent { flex: none; justify-content: center; width: 52px; height: 52px; padding: 0; border: 1px solid rgba(201, 168, 76, 0.45); border-radius: 3px; }
    .bq-precedent-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    .btn-main.bq-suivant { flex: 1; justify-content: center; padding: 1.05rem 1rem; letter-spacing: 0.16em; }
    .bq-ticket { grid-template-columns: auto minmax(0, 1fr) auto; padding-left: 1.2rem; }
    .bq-ticket-valeur { grid-column: 2; grid-row: 2; font-size: 1.15rem; }
    .bq-ticket-retirer { grid-column: 3; grid-row: 1 / span 2; }
    .bq-duo { grid-template-columns: minmax(0, 1fr); }
    .bq-offre,
    .bq-option { padding: 0.9rem 1rem; column-gap: 0.75rem; }
    .bq-offre-nom { font-size: 1rem; }
    .bq-offre-prix { font-size: 1.1rem; }
    .bq-offre-detail { flex-direction: column; gap: 0.15rem; }
    .bq-scene { padding: 5% 0 8%; }
    .bq-pas { grid-template-columns: minmax(0, 1fr); row-gap: 1.6rem; }
    .bq-pas li { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 1rem; text-align: left; }
    .bq-pas .bq-losange { grid-row: 1 / span 2; margin: 0; }
    .page-boutique main .bq-pas p { margin: 0; text-align: left; }
    /* les étapes l'une sous l'autre : un fil vertical relie les losanges */
    .bq-deroule .bq-pas li:not(:last-child)::before {
        content: ''; position: absolute; left: 21px; top: 42px; bottom: -1.6rem; width: 1px;
        background: linear-gradient(180deg, rgba(240, 208, 96, 0.75), rgba(201, 168, 76, 0.35));
    }
    .bq-deroule::after { width: 300px; right: -150px; top: 0; margin-top: 30px; }
    .bq-recu { padding: 3.5rem 0; }
    .bq-recu-panneau { padding: 1.3rem; }
    .bq-carte-info { grid-template-columns: minmax(0, 1fr); }
    .bq-carte-info .gc { max-width: 260px; }
    .bq-code-ligne { flex-wrap: wrap; }
    .bq-code-ligne .bq-bouton { flex: 1 1 auto; }
}

@media (max-width: 860px) {
    .bq-nom-page:has(.bq-ariane) { font-size: 1.05rem; letter-spacing: 0.08em; }
}
@media (max-width: 760px) {
    /* seule la boutique reste, en lien de retour */
    .bq-ariane-sep,
    .bq-ariane-ici { display: none; }
    .bq-nom-page .bq-ariane { color: var(--gold); }
    .bq-nom-page .bq-ariane::before { content: '‹ '; }
}
@media (max-width: 600px) {
    .page-boutique .bg-nav { padding-left: calc(3% + 72px); }
    .bq-nom-page { font-size: 1.05rem; letter-spacing: 0.1em; }
    .bq-retour-long { display: none; }
    .bq-retour-court { display: inline; }
    .bq-retour-site { padding: 0 0.85rem 0 0.7rem; }
}
@media (max-width: 360px) {
    .bq-retour-court { display: none; }
    .bq-retour-site { width: 36px; padding: 0; justify-content: center; }
}

@media (max-width: 380px) {
    .bq-offre-ligne { flex-wrap: wrap; }
    .bq-offre-nom { white-space: normal; }
    .bq-offre-points { display: none; }
    .bq-offre-prix { margin-left: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   LES PAGES DES CARTES CADEAUX ET DE L'AUDIO : LES POLICES DE L'ACCUEIL
   Chaque texte prend la taille et l'interligne du texte de même rôle
   sur l'accueil (style.css), paliers compris : les titres au texte à
   gauche (.about-text .title h2), les paragraphes (.about-text p), les
   étapes du voyage de la carte celles du processus (.process-step),
   les petites lignes celles du calcul de l'année (0,8 rem). L'atelier
   garde son dessin (fil d'or, étapes, offres, champs, boutons).
   Ce qui n'est que sur la page de l'audio est dans audio.css.
   ═══════════════════════════════════════════════════════════════ */
:is(.page-cartes, .page-audio) .bq-titre,
:is(.page-cartes, .page-audio) .bq-recu .stitle,
.page-cartes .bq-2027 .stitle { font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1.2em; }
:is(.page-cartes, .page-audio) main .bq-chapeau,
:is(.page-cartes, .page-audio) main .bq-recu-texte p,
.page-cartes main .bq-2027-texte > p,
:is(.page-cartes, .page-audio) main .bq-faq details p { font-size: 1rem; line-height: 1.8; }
:is(.page-cartes, .page-audio) main .bq-intro-recu,
:is(.page-cartes, .page-audio) .bq-faq summary { font-size: 1rem; }
.page-cartes #formCode > label,
.page-audio #formEcoute > label { font-size: 1rem; }
:is(.page-cartes, .page-audio) .bq-pas h3 { font-size: 0.85rem; }
:is(.page-cartes, .page-audio) main .bq-pas p { font-size: 0.92rem; line-height: 1.8; }
:is(.page-cartes, .page-audio) .bq-aide,
:is(.page-cartes, .page-audio) main .bq-vitrine-note,
:is(.page-cartes, .page-audio) main .bq-idees-titre,
:is(.page-cartes, .page-audio) main .bq-tva,
:is(.page-cartes, .page-audio) main .bq-rassurance { font-size: 0.8rem; }
/* tablette et téléphone : les textes vont d'un bord à l'autre, comme les paragraphes de l'accueil
   (le chapeau de l'atelier, les textes du voyage de la carte, les questions) */
@media (max-width: 991px) {
    :is(.page-cartes, .page-audio) .bq-chapeau,
    :is(.page-cartes, .page-audio) main .bq-pas p,
    :is(.page-cartes, .page-audio) .bq-faq-liste { max-width: none; }
}
@media (max-width: 768px) {
    :is(.page-cartes, .page-audio) main .bq-chapeau,
    :is(.page-cartes, .page-audio) main .bq-recu-texte p,
    .page-cartes main .bq-2027-texte > p,
    :is(.page-cartes, .page-audio) main .bq-faq details p { font-size: 0.95rem; line-height: 1.6; }
    :is(.page-cartes, .page-audio) main .bq-intro-recu,
    :is(.page-cartes, .page-audio) .bq-faq summary { font-size: 0.95rem; }
    :is(.page-cartes, .page-audio) main .bq-pas p { line-height: 1.6; }
}
@media (max-width: 576px) {
    :is(.page-cartes, .page-audio) main .bq-chapeau,
    :is(.page-cartes, .page-audio) main .bq-recu-texte p,
    .page-cartes main .bq-2027-texte > p,
    :is(.page-cartes, .page-audio) main .bq-faq details p { font-size: 0.9rem; line-height: 1.5; }
    :is(.page-cartes, .page-audio) main .bq-intro-recu,
    :is(.page-cartes, .page-audio) .bq-faq summary { font-size: 0.9rem; }
    :is(.page-cartes, .page-audio) main .bq-pas p { font-size: 0.85rem; line-height: 1.5; }
}
@media (max-width: 400px) {
    :is(.page-cartes, .page-audio) main .bq-chapeau,
    :is(.page-cartes, .page-audio) main .bq-recu-texte p,
    .page-cartes main .bq-2027-texte > p,
    :is(.page-cartes, .page-audio) main .bq-faq details p { line-height: 1.4; }
    :is(.page-cartes, .page-audio) .bq-pas h3 { font-size: 0.75rem; }
    :is(.page-cartes, .page-audio) main .bq-pas p { font-size: 0.8rem; line-height: 1.4; }
}

/* ═══════════════════════════════════════════════════════════════
   PAGES DE CONFIRMATION (merci.html) ET DE CARTE (carte.html)
   ═══════════════════════════════════════════════════════════════ */
.page-merci header nav,
.page-carte header nav { position: relative; z-index: 1000; }

.bq-merci,
.bq-revelation {
    min-height: 100vh;
    padding: 110px 24px 4rem;
    background:
        radial-gradient(ellipse 70% 55% at 50% 35%, rgba(201, 168, 76, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 80% 50% at 20% 50%, rgba(15, 15, 58, 0.7) 0%, transparent 70%);
}

.bq-chargement { display: grid; justify-items: center; gap: 1rem; padding: 18vh 0 0; color: var(--gray); }
.page-boutique main .bq-chargement p { text-align: center; }
.bq-chargement-anneau {
    display: block; width: 46px; height: 46px; border-radius: 50%;
    border: 2px solid rgba(201, 168, 76, 0.2); border-top-color: var(--gold);
    animation: spin 1.1s linear infinite;
}

.bq-merci-vue {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
    max-width: 1200px; margin: 0 auto;
}
.bq-merci-vue.bq-merci-seule { grid-template-columns: minmax(0, 640px); justify-content: center; text-align: center; padding-top: 6vh; }
.bq-merci-seule .bq-chargement-anneau { margin: 0 auto 1.5rem; }
.page-boutique main .bq-merci-seule p { text-align: center; }
.bq-merci-seule .bq-merci-actions { justify-content: center; }
.bq-merci-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin: 1.8rem 0 0.6rem; }
.bq-merci-actions .btn-main { cursor: pointer; }
.bq-merci-actions .bq-bouton { display: inline-flex; align-items: center; align-self: stretch; min-height: 3.4rem; padding: 0 1.4rem; text-decoration: none; }
.page-boutique main .bq-merci-email { margin-top: 1.4rem; color: var(--gray); font-size: 0.9rem; }
/* l'audio 2027 : son année, et où en est l'enregistrement */
.page-boutique main .bq-merci-annee {
    margin: 1.2rem 0 0; padding: 0.85rem 1.1rem;
    border-left: 2px solid var(--gold);
    background: linear-gradient(90deg, rgba(201, 168, 76, 0.12), transparent);
    color: var(--white-soft); line-height: 1.65;
}
.bq-merci-annee strong { font-weight: 400; color: var(--gold-light); }

/* Coordonnées bancaires et informations de la carte */
.bq-rib {
    display: grid; margin: 1.6rem 0 1rem; padding: 0.3rem 1.2rem;
    border: 1px solid rgba(201, 168, 76, 0.3); border-radius: 10px;
    background: rgba(6, 6, 26, 0.45);
}
.bq-rib > div {
    display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; align-items: center;
    padding: 0.75rem 0; border-bottom: 1px solid rgba(201, 168, 76, 0.14);
}
.bq-rib > div:last-child { border-bottom: 0; }
.bq-rib dt { color: var(--gray); font-size: 0.88rem; }
.bq-rib dd { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin: 0; color: var(--white); overflow-wrap: anywhere; }
.bq-rib .is-important dd span { font-family: var(--font-body); font-size: 1rem; color: var(--gold-light); letter-spacing: 0.06em; white-space: nowrap; }
.bq-copier {
    flex: none; padding: 0.3rem 0.7rem;
    background: none; border: 1px solid rgba(201, 168, 76, 0.4); border-radius: 999px;
    color: var(--gold); font: inherit; font-size: 0.78rem; cursor: pointer;
    transition: background 0.3s, color 0.3s;
}
.bq-copier:hover { background: var(--gold); color: var(--navy-deepest); }

/* ─── L'enveloppe ─── */
.bq-etui-scene { text-align: center; }
.bq-etui-titre {
    margin: 0 0 0.4rem;
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.2;
    color: var(--white); text-wrap: balance;
}
.page-boutique main .bq-etui-sous-titre { margin: 0; color: var(--gold); font-size: 1.05rem; letter-spacing: 0.08em; text-align: center; }
.bq-env-defs { position: absolute; width: 0; height: 0; }

/* marge haute : le rabat ouvert dépasse de l'étui, il ne doit pas couvrir le sous-titre */
.bq-etui { position: relative; width: min(520px, 92vw); aspect-ratio: 1 / 0.95; margin: 3.4rem auto 0; }
.bq-env-partie { position: absolute; left: 0; right: 0; bottom: 0; height: 69.5%; transition: opacity 0.7s, transform 0.9s var(--ease-expo); }
.bq-env-partie svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bq-env-dos { z-index: 1; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45)); }
.bq-env-carte { position: absolute; z-index: 2; left: 5%; top: 36.8%; width: 90%; transition: transform 1s var(--ease-expo); }
.bq-env-poche { z-index: 3; filter: drop-shadow(0 -4px 10px rgba(0, 0, 0, 0.3)); }
.bq-env-rabat {
    z-index: 4; transform-origin: 50% 0;
    transition: transform 0.85s 0.2s cubic-bezier(0.5, 0, 0.2, 1), z-index 0s 0.6s, opacity 0.7s;
}
/* Le cachet : le logo rond MP sur un disque crème cerclé d'or, comme le médaillon de la carte */
.bq-cachet {
    position: absolute; z-index: 5; left: 50%; top: 69.4%;
    display: grid; place-items: center;
    width: 19%; aspect-ratio: 1; padding: 0;
    transform: translate(-50%, -50%);
    border: 0; border-radius: 50%; cursor: pointer;
    background: radial-gradient(circle at 38% 30%, #fffdf8 0%, #f9f2e3 52%, #eadab8 100%);
    box-shadow: 0 0 0 3px #d4af37, 0 0 0 4px rgba(110, 92, 37, 0.9), 0 6px 16px rgba(0, 0, 0, 0.45);
    animation: bqRespire 2.8s ease-in-out infinite;
    transition: transform 0.45s var(--ease-expo), opacity 0.45s;
}
.bq-cachet img { width: 92%; height: 92%; object-fit: contain; pointer-events: none; }
.bq-cachet:hover { transform: translate(-50%, -50%) scale(1.06); }

.bq-eclats { position: absolute; left: 50%; top: 69.4%; z-index: 6; width: 0; height: 0; pointer-events: none; }
.bq-eclats span {
    position: absolute; left: 0; top: 0; opacity: 0;
    font-family: var(--font-display); font-size: calc(1rem * var(--t)); color: var(--gold-light);
    text-shadow: 0 0 10px rgba(240, 208, 96, 0.8);
    animation: bqEclat 1.5s var(--ease-expo) forwards;
}

.bq-etui.is-ouverte .bq-cachet { transform: translate(-50%, -50%) scale(1.4) rotate(-14deg); opacity: 0; pointer-events: none; animation: none; }
.bq-etui.is-ouverte .bq-env-rabat { transform: perspective(900px) rotateX(180deg); z-index: 0; }
.bq-etui.is-sortie .bq-env-carte { transform: translateY(-51.5%); }
.bq-etui.is-libre .bq-env-carte { z-index: 7; transform: translateY(-27.6%) scale(1.111); transition: transform 1.1s var(--ease-expo); }
.bq-etui.is-libre .bq-env-partie { opacity: 0; transform: translateY(14%); pointer-events: none; }
.bq-etui.is-libre .bq-env-rabat { transform: perspective(900px) rotateX(180deg) translateY(-14%); }
.bq-etui.is-instant,
.bq-etui.is-instant * { transition: none !important; animation: none !important; }
.bq-etui.is-libre .bq-env-carte .gc { cursor: pointer; }
/* La carte sortie, l'étui reste là, vide, et ce qui le chevauche passe dessous (#actionsCarte et sa marge négative) :
   il ne doit plus retenir le doigt, seule la carte reste touchable */
.bq-etui.is-libre { pointer-events: none; }
.bq-etui.is-libre .gc { pointer-events: auto; }

.bq-etui-actions { display: flex; justify-content: center; margin-top: 1.4rem; }
#actionsCarte { margin-top: -0.6rem; }
.bq-etui-actions .btn-main { cursor: pointer; background: transparent; }

/* ─── Après l'ouverture ─── */
.bq-details { max-width: 1060px; margin: 2.2rem auto 0; }
.bq-details.is-apparition { animation: bqApparition 0.9s var(--ease-expo); }
.bq-details-grille { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem; align-items: start; }
.bq-details-bloc {
    padding: 1.6rem; border-radius: 14px;
    background: linear-gradient(145deg, #1b1b44 0%, #0b0b30 60%, #1b1b44 100%);
    border: 1px solid rgba(201, 168, 76, 0.22);
}
.bq-details-bloc h2 { margin: 0 0 0.8rem; font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; color: var(--gold-light); }
.page-boutique main .bq-details-bloc > p { color: var(--gray); line-height: 1.7; font-size: 0.95rem; }
.bq-details-bloc .bq-etat { display: block; padding: 0.8rem 1rem; border-radius: 8px; font-size: 0.92rem; line-height: 1.55; letter-spacing: 0; }
.bq-details-bloc .bq-rib { margin-top: 0.4rem; }
@media (min-width: 641px) {
    .bq-details-bloc .bq-rib > div { grid-template-columns: 7rem minmax(0, 1fr); }
}
.bq-details-outils { margin-top: 1rem; }
.page-boutique main .bq-details-site { margin: 2.4rem 0 0; text-align: center; }
.bq-details-site a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(201, 168, 76, 0.4); }

/* Version imprimable : cachée à l'écran */
.bq-impression { display: none; }

/* ─── Conditions générales de vente ─── */
.bq-cgv-page { max-width: 860px; margin: 0 auto; padding: 120px 24px 4rem; }
.bq-cgv-entete { margin-bottom: 2rem; }
.bq-cgv-sommaire {
    margin: 0 0 2.6rem; padding: 1.1rem 1.4rem;
    border: 1px solid rgba(201, 168, 76, 0.22); border-radius: 10px;
    background: rgba(6, 6, 26, 0.4);
}
.bq-cgv-sommaire ol { margin: 0; padding-left: 1.3rem; columns: 2; column-gap: 2rem; }
.bq-cgv-sommaire li { margin: 0.2rem 0; break-inside: avoid; color: var(--gold-dim); }
.bq-cgv-sommaire a { color: var(--white-soft); text-decoration: none; }
.bq-cgv-sommaire a:hover { color: var(--gold-light); }
.bq-cgv-texte section { padding: 1.4rem 0; border-bottom: 1px solid rgba(201, 168, 76, 0.1); scroll-margin-top: 90px; }
.bq-cgv-texte h2 { margin: 0 0 0.8rem; font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; letter-spacing: 0.04em; color: var(--gold); }
.page-boutique main .bq-cgv-texte p { margin: 0 0 0.8rem; color: var(--white-soft); font-size: 0.97rem; line-height: 1.8; }
.bq-cgv-texte strong { color: var(--white); font-weight: 400; }
.bq-cgv-texte a { color: var(--gold); }
.bq-cgv-formulaire { margin-top: 1.4rem; padding: 1.4rem !important; border: 1px dashed rgba(201, 168, 76, 0.4) !important; border-radius: 10px; }
mark.bq-a-completer { padding: 0 0.25em; border-radius: 3px; background: rgba(242, 196, 109, 0.22); color: #ffe3a3; }
@media (max-width: 640px) {
    .bq-cgv-page { padding: 96px 16px 3rem; }
    .bq-cgv-sommaire ol { columns: 1; }
}

@keyframes bqRespire {
    0%, 100% { box-shadow: 0 0 0 3px #d4af37, 0 0 0 4px rgba(110, 92, 37, 0.9), 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(240, 208, 96, 0.45); }
    50% { box-shadow: 0 0 0 3px #d4af37, 0 0 0 4px rgba(110, 92, 37, 0.9), 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 0 20px rgba(240, 208, 96, 0); }
}
@keyframes bqEclat {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)) scale(1); }
}

@media (max-width: 860px) {
    .bq-merci-vue { grid-template-columns: minmax(0, 1fr); }
    .bq-merci-scene { order: -1; }
    .bq-details-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .bq-merci,
    .bq-revelation { padding: 96px 16px 3rem; }
    .bq-rib > div { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
    .bq-details-bloc { padding: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .bq-cachet,
    .bq-details.is-apparition { animation: none; }
}

/* ─── Impression : A4, recto en bas, verso retourné en haut, pli au milieu ─── */
@media print {
    @page { size: A4 portrait; margin: 0; }
    html, body { background: #fff !important; }
    body.page-carte { padding: 0 !important; }
    body.page-carte > :not(.bq-impression) { display: none !important; }
    .bq-impression {
        display: block !important; position: relative;
        width: 210mm; height: 296mm; overflow: hidden;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .bq-imp-feuille { position: absolute; left: 20mm; top: 36mm; width: 170mm; outline: 0.2mm dashed #9a95a8; }
    .bq-imp-panneau { position: relative; width: 170mm; height: 106.25mm; }
    .bq-imp-haut { transform: rotate(180deg); }
    .bq-imp-panneau .gc { width: 170mm; }
    .bq-imp-panneau .gc-face { border-radius: 0; box-shadow: none; }
    .bq-imp-feuille::after {
        content: ''; position: absolute; left: -12mm; right: -12mm; top: 106.25mm;
        border-top: 0.25mm dashed #9a95a8;
    }
    .page-boutique .bq-imp-consigne {
        position: absolute; left: 0; right: 0; bottom: 16mm; margin: 0;
        font-family: 'Marcellus', serif; font-size: 9pt; color: #6a6578; text-align: center;
    }
}