/* Compléments de luna.css pour le panier (tiroir) et les pages titre (sortie.html) : maquettes validées du 19/10/2026.
   luna.css porte la mise en page de ces pages ; ce fichier ne couvre que ce que le balisage de panier.js et de musique.js ajoute
   (pochette vide en attente, état d'erreur, boutons lecture/pause, colonnes de la page titre). À plat : aucune carte, aucune capsule,
   seulement des ronds (lecture, « + », points de la promo), un seul ambre (--ambre). */

/* ---------- Panier : le contenu du tiroir (.corps.luna-panier) ---------- */
.panier .corps.luna-panier { margin: 0; max-width: none; padding: 0 var(--g, 20px) calc(env(safe-area-inset-bottom, 0px) + 32px); }
.luna-panier [hidden] { display: none !important; }
.luna-panier .luna-h1 { margin-top: 16px; }
.luna-panier .luna-h1:focus { outline: none; }
.luna-panier .luna-art .luna-vpoch { display: block; grid-row: 1 / -1; grid-column: 1; width: 76px; height: 76px; background: rgba(30,18,32,.08); box-shadow: 0 6px 16px rgba(30,18,32,.18); overflow: hidden; }
.luna-panier .luna-art .luna-vpoch img { display: block; width: 76px; height: 76px; object-fit: cover; box-shadow: none; }
.luna-panier .luna-art .luna-vcol { background: var(--luna-encre); }
.luna-panier .luna-art .luna-vcol img { box-sizing: border-box; padding: 14px; object-fit: contain; }
.luna-panier .luna-art .luna-px s { display: block; }
.luna-panier .luna-art .luna-act { align-items: baseline; }
.luna-panier .luna-art .luna-act a, .luna-panier .luna-art .luna-act button { font: inherit; color: inherit; cursor: pointer; }
.luna-panier .luna-recoit .luna-ic { stroke-width: 1.6; }
.luna-panier .luna-raison:empty { display: none; }
.luna-panier .luna-raison.erreur { font-weight: 600; padding-left: 10px; box-shadow: inset 3px 0 var(--ambre); }
.luna-panier .luna-raison a { text-decoration: underline; text-underline-offset: 3px; }
.luna-panier .luna-faq a { color: var(--luna-encre); text-decoration: underline; text-underline-offset: 3px; }
.luna-panier .luna-faq a.luna-mail { display: flex; align-items: center; min-height: 44px; width: fit-content; }
.luna-panier .luna-usb .usbpays { margin-top: 6px; font: 400 14.5px/1.35 var(--texte); color: rgba(30,18,32,.68); }
.luna-panier .luna-usb .usbpays p { margin: 0; }
.luna-panier .luna-payer { border: 0; border-radius: 0; cursor: pointer; text-align: left; }
.luna-panier .luna-payer:focus-visible, .luna-panier .luna-champ:focus-visible { outline: 2px solid var(--luna-encre); outline-offset: 3px; }
.luna-panier .annonce { margin: 12px 0 0; font: 600 16px/1.35 var(--texte); }
@media (prefers-reduced-motion: no-preference) {
  .luna-panier .luna-lignes li.entre { animation: luna-ligne .3s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
  @keyframes luna-ligne { from { opacity: 0; transform: translateX(12px); } }
}
/* Tiroir latéral à l'ordinateur : la colonne du panier est celle du tiroir (pas de page centrée). */
@media (min-width: 900px) {
  .panier .corps.luna-panier .luna-h1 { font-size: 64px; }
}

/* ---------- Pages titre : #fiche.luna-sortie ---------- */
.luna-sortie { display: block; padding-bottom: 40px; }
.luna-sortie .luna-colg, .luna-sortie .luna-colb { display: block; min-width: 0; }
.luna-sortie .luna-fil { text-decoration: none; }
.luna-sortie .luna-couv { display: block; }
.luna-sortie .luna-h1 { color: var(--luna-encre); }
.luna-sortie .luna-ecoute .luna-pause { display: none; }
.luna-sortie .luna-ecoute[aria-pressed="true"] .luna-lire { display: none; }
.luna-sortie .luna-ecoute[aria-pressed="true"] .luna-pause { display: block; }
.luna-sortie .luna-coeur { margin-left: auto; color: var(--luna-encre); }
.luna-sortie .luna-ajouter { border: 0; border-radius: 0; cursor: pointer; color: var(--luna-encre); text-align: left; font-family: var(--texte); font-weight: 600; font-size: 19px; }
.luna-sortie .luna-ajouter:focus-visible, .luna-sortie .luna-ecoute:focus-visible, .luna-sortie .luna-plus:focus-visible, .luna-sortie .luna-n:focus-visible, .luna-sortie .luna-x:focus-visible { outline: 2px solid var(--luna-encre); outline-offset: 3px; }
.luna-sortie .luna-def dd .luna-repart + small { display: block; font: 400 14px var(--texte); color: #635a61; }
.luna-sortie .luna-titres li { list-style: none; }
.luna-sortie .luna-titres .luna-n { width: 34px; }
.luna-sortie .luna-aussi a:hover b { box-shadow: inset 0 -3px var(--ambre); }
/* À écouter aussi : chaque carte = div.luna-ac (lien + ▶ frère, hors du lien) ; le ▶ rond, un seul ambre, joue l'extrait sur place */
.luna-sortie .luna-aussi .luna-ac { position: relative; }
.luna-sortie .luna-aussi .luna-ac a:first-child { border-top: 0; margin-top: 0; }
.luna-sortie .luna-aussi .luna-ac:first-child { border-top: 1px solid var(--luna-encre); margin-top: 12px; }
.luna-sortie .luna-aussi .o-pj { display: block; position: absolute; z-index: 2; left: 33px; top: 46px; right: auto; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: #e8a93b; color: var(--luna-encre); font: 400 11px/28px var(--texte); text-align: center; cursor: pointer; opacity: 0; transform: none; transition: opacity .15s; }
.luna-sortie .luna-aussi .luna-ac:hover .o-pj, .luna-sortie .luna-aussi .luna-ac:focus-within .o-pj, .luna-sortie .luna-aussi .o-pj[aria-pressed="true"] { opacity: 1; }
.luna-sortie .luna-aussi .o-pj:focus-visible { outline: 2px solid var(--luna-encre); outline-offset: 2px; }
.luna-sortie .luna-aussi .o-pj[aria-pressed="true"] { font-size: 0; }
.luna-sortie .luna-aussi .o-pj[aria-pressed="true"]::before { content: ""; display: inline-block; width: 10px; height: 12px; box-sizing: border-box; border-left: 3px solid currentColor; border-right: 3px solid currentColor; vertical-align: middle; }
@media (hover: none) { .luna-sortie .luna-aussi .o-pj { opacity: 1; } }
@media (min-width: 900px) {
  .luna-sortie .luna-fil { grid-column: 1 / -1; }
}

/* Prix barré (ancien prix pendant le lancement) et bloc La Collection */
.luna-sortie s, .luna-panier s { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .6; font-weight: 500; }
.luna-panier s { opacity: .89; }   /* contraste : prix barré #9d979a sur crème = 2,58:1 ; .89 donne 4,66:1, même teinte */
.luna-sortie .luna-ajouter b s { font-size: 20px; margin-right: 6px; }
.luna-sortie .luna-collb { margin-top: 40px; border-top: 1px solid var(--luna-encre); }
.luna-sortie .luna-collb p { margin: 8px 0 0; font: 400 15px/1.45 var(--texte); color: rgba(30,18,32,.68); }
.luna-sortie .luna-collb p s { font-weight: 500; }
/* Cœurs en fin de ligne de titre (discrets) */
.luna-sortie .luna-titres li { grid-template-columns: 34px 1fr auto 36px 44px; }
.luna-sortie .luna-titres .coeur { width: 36px; height: 36px; opacity: .55; }
.luna-sortie .luna-titres .coeur svg { width: 20px; height: 20px; }
.luna-sortie .luna-titres .coeur[aria-pressed="true"] { opacity: 1; }

/* Téléphone (393 px) : « Ajouter l'EP complet ~~7,50 €~~ 5,62 € » sur une ligne comme en anglais ; méta des titres sur une ligne (le cœur prend la place) ; « Tout ajouter » entier. */
@media (max-width: 520px) {
  .luna-sortie .luna-ajouter { gap: 8px; padding: 19px 16px; font-size: 17px; }
  .luna-sortie .luna-ajouter b { font-size: 28px; white-space: nowrap; flex: none; }
  .luna-sortie .luna-ajouter b s { font-size: 17px; margin-right: 4px; }
  .luna-sortie .luna-titres li { grid-template-columns: 26px minmax(0, 1fr) auto 30px 40px; gap: 0 6px; }
  .luna-sortie .luna-titres .luna-n { width: 26px; }
  .luna-sortie .luna-titres .luna-x small { font-size: 13px; letter-spacing: -.1px; white-space: nowrap; }
  .luna-sortie .luna-titres .luna-du { font-size: 13.5px; }
  .luna-sortie .luna-titres .coeur { width: 30px; }
  .luna-sortie .luna-titres .luna-plus { width: 40px; }
  .luna-sortie .luna-tous { gap: 10px; }
  .luna-sortie .luna-tous span { font-size: 13.5px; }
  .luna-sortie .luna-tous button { flex: none; white-space: nowrap; }
}

/* ============ PANIER = PAGE (panier.html : <main data-panier-page> ; js/panier.js y pose #panier) ============
   Même contenu que l'ancien tiroir, rendu dans la page sous l'en-tête du site : en flux, sans voile, sans croix ni flèche de repli. */
main[data-panier-page] { min-height: 100vh; padding-bottom: 0; }
.panier.panier-page { position: static; width: auto; max-width: 760px; margin: 0; border: 0; background: none; transform: none; transition: none; display: block; overflow: visible; z-index: auto; visibility: visible; }
.panier.panier-page .haut, .panier.panier-page .replier { display: none; }
.panier.panier-page .corps.luna-panier { display: block; overflow: visible; padding: 0; }
.panier.panier-page .corps.luna-panier > * { min-width: 0; }
.panier.panier-page .luna-h1 { margin-top: 18px; }
.panier.panier-page .corps.luna-panier p { max-width: none; }
@media (min-width: 900px) { main[data-panier-page] { padding-top: 36px; } .panier.panier-page .corps.luna-panier { max-width: 560px; margin-left: auto; margin-right: auto; } }

/* Lien de sortie « Continuer » (js/panier.js) : téléphone = à droite du titre, bas du lien sur la ligne de base du titre ; ordinateur = dans l'espace libre sous l'en-tête, titre non déplacé. */
.luna-continuer { display: none; margin: 0; padding: 0; background: none; border: 0; font: 400 15px/1.3 var(--texte); color: rgba(30,18,32,.68); white-space: nowrap; position: relative; text-decoration: none; }
.luna-continuer:hover, .luna-continuer:focus { text-decoration: none; }
.luna-continuer .u { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.luna-continuer::after { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; transform: translateY(-50%); }
.luna-continuer .co { display: none; }
.panier.panier-page .luna-continuer { display: block; }
.panier.panier-page .luna-pantete { display: flex; justify-content: space-between; align-items: baseline; }
.panier.panier-page .luna-pantete .luna-h1 { min-width: 0; }
@media (min-width: 900px) {
  .panier.panier-page .luna-pantete { display: block; position: relative; }
  .panier.panier-page .luna-continuer { position: absolute; right: 0; top: -29px; }
  .luna-continuer .ct { display: none; }
  .luna-continuer .co { display: inline; }
}

/* ---------- Panier : propositions, zones à toucher, téléphone compact (22/10/2026) ---------- */
/* Propositions : 3 singles sous le message de l'offre, une ligne chacun, à plat (pas de carte ni de capsule). */
.luna-panier .luna-sug { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--filet); }
.luna-panier .luna-sug li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 0 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--filet); }
.luna-panier .luna-sug .luna-sugp { display: block; width: 44px; height: 44px; background: color-mix(in srgb, var(--filet) 57%, transparent); overflow: hidden; }
.luna-panier .luna-sug .luna-sugp img { display: block; width: 44px; height: 44px; object-fit: cover; }
.luna-panier .luna-sug .luna-sugt { font: 600 16px/1.2 var(--texte); overflow-wrap: anywhere; }
.luna-panier .luna-sug .luna-sugpx { font: 800 18px/1 var(--titre); text-align: right; white-space: nowrap; }
.luna-panier .luna-sug .luna-sugpx s { display: block; font: 500 12px/1.2 var(--texte); color: var(--encre-3); }
.luna-panier .luna-sug .luna-sugb { position: relative; background: none; border: 0; padding: 0 2px; color: var(--encre); font: 600 15px var(--texte); cursor: pointer; text-decoration: underline 3px var(--ambre); text-underline-offset: 5px; }
/* Zones à toucher de 44 px de haut, sans changer l'apparence : zone invisible (pseudo-élément) centrée sur le texte, pas de chevauchement (écart de 18 px entre voisins, zones élargies de 6 px). */
.luna-panier .luna-art .luna-act a, .luna-panier .luna-art .luna-act button, .luna-panier .luna-coll .luna-f { position: relative; }
.luna-panier .luna-art .luna-act a::after, .luna-panier .luna-art .luna-act button::after,
.luna-panier .luna-coll .luna-f::after, .luna-panier .luna-sug .luna-sugb::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }
/* Téléphone : le bloc e-mail et « Payer » tiennent dans le premier écran avec 1 à 2 articles (la page garde l'ordre ; panier.js place le message de l'offre, les propositions et La Collection sous « Payer »). */
@media (max-width: 899px) {
  .luna-panier .luna-lignes { margin-top: 12px; }
  .luna-panier .luna-promo { margin-top: 12px; padding: 10px 14px; }
  .luna-panier .luna-ronds { margin: 6px 0 6px; }
  .luna-panier .luna-coll { padding: 12px 0; }
  .luna-panier .luna-tot { margin-top: 14px; }
  .luna-panier .luna-tot p { line-height: 1.55; }
  .luna-panier .luna-tot p.luna-t { margin-top: 4px; padding-top: 8px; }
  .luna-panier .luna-lab { margin-top: 14px; }
  .luna-panier .luna-raison { margin-top: 6px; }
  .luna-panier .luna-payer { margin-top: 10px; }
  .luna-panier .luna-stripe { margin-top: 10px; }
  .luna-panier .luna-h2 { margin-top: 32px; }
}