/* ===== Charte B « Le fil » : couche posée en dernier sur le vrai site.
   Ne change que : actions niveau 1 et 2, ambre (état, fil, trait des H2), titres H1/H2, liens à flèche, focus des champs.
   Pied de page, en-tête, mosaïques, lecteur du bas, textes : intacts (le lecteur est traité à part : charte-b-lecteur.css).
   Couleurs via --encre / --creme : le mode sombre (sombre.css) les inverse tout seul. ===== */

/* (retiré le 21/10, décision de Brice : plus de fil ambre continu au bord gauche ; l'ambre reste en trait 6 px des H2) */

/* --- Titres : H1 96 / 44 ; H2 40 / 30 avec un trait ambre de 6 px à gauche (texte à la même place : le trait passe dans la gouttière) --- */
html body h1.aff, html body h1.luna-h1, html body .luna-sortie .luna-h1, html body .luna-panier .luna-h1, html body .panier .corps.luna-panier .luna-h1 { font-size: 96px; }
html body .luna-sortie .luna-h1, html body .luna-sortie .luna-h1.luna-long { --luna-t: 96px; }
html body .acc-hero-copy h1.aff { font-size: 80px; }          /* accueil : 80 comme sur la planche B (--h1a), tient en 2 lignes et sans défiler */
html body .acc-hero-copy h1.aff .o-h1 { font-size: inherit; }
html body main#contenu h2.acc-heading:not(.acc-fit), html body main#contenu h2#titreSuite,
html body main#contenu h2#titreGarder, html body main#contenu h2#titreParcours,
html body .luna-sortie .luna-h2, html body .luna-panier .luna-h2 {
  border-left: 6px solid var(--ambre); padding-left: 14px; margin-left: -20px;
}
html body main#contenu h2#titreGarder, html body main#contenu h2#titreParcours, html body .luna-sortie .luna-h2, html body .luna-panier .luna-h2 { line-height: 1; }   /* accueil : interlignage d'origine gardé */
@media (min-width: 900px) { html body .acc-lettre h2.acc-heading.acc-fit { border-left: 6px solid var(--ambre); padding-left: 14px; margin-left: -20px; } }   /* « Du neuf dans tes oreilles. » */
@media (min-width: 900px) {
  html body main#contenu h2#titreGarder, html body main#contenu h2#titreParcours,
  html body .luna-sortie .luna-h2, html body .luna-panier .luna-h2 { font-size: 40px; }
  html body main#contenu h2#titreEnvies { border-left: 0; padding-left: 0; margin-left: 0; }   /* à 900 px et plus c'est une petite étiquette (13 px), pas un titre */
}
@media (max-width: 899px) {
  html body h1.aff, html body h1.luna-h1, html body .luna-sortie .luna-h1, html body .luna-panier .luna-h1, html body .panier .corps.luna-panier .luna-h1,
  html body .acc-hero-copy h1.aff { font-size: 44px; }
  html body .luna-sortie .luna-h1, html body .luna-sortie .luna-h1.luna-long { --luna-t: 44px; }
  html body main#contenu h2#titreGarder, html body main#contenu h2#titreParcours,
  html body .luna-sortie .luna-h2, html body .luna-panier .luna-h2 { font-size: 30px; }
  /* trait des H2 : de l'air entre le fil (0-3 px) et le trait (7 px) ; le texte ne bouge que de 6 px */
  html body main#contenu h2.acc-heading:not(.acc-fit), html body main#contenu h2#titreGarder, html body main#contenu h2#titreParcours,
  html body .luna-sortie .luna-h2, html body .luna-panier .luna-h2 { margin-left: -10px; padding-left: 10px; }
  /* titre centré : pas de trait */
  html body main#contenu h2#titreSorties.acc-heading { margin-inline: auto; width: fit-content; border-left: 0; padding-left: 0; }
}

/* --- Actions niveau 1 : pavé plein encre (écoute) / contour encre (achat) ; 48 px, Geist 600 16, angles droits --- */
html body .luna-sortie .luna-ecoute,
html body .luna-panier .luna-payer {
  background: var(--encre); color: var(--creme); border: 1.5px solid var(--encre); border-radius: 0;
  min-height: 48px; padding: 0 28px; font: 600 16px/1 var(--texte); box-shadow: none; cursor: pointer;
}
html body .luna-sortie .luna-ajouter,
html body main button.coll-btn {
  background: transparent; color: var(--encre); border: 1.5px solid var(--encre); border-radius: 0;
  height: 48px; padding: 0 28px; font: 600 16px/1 var(--texte); box-shadow: none; text-decoration: none; cursor: pointer;
}
html body .luna-sortie .luna-ajouter b { font: 600 16px/1 var(--texte); }
html body .luna-sortie .luna-ajouter b s { font-size: 16px; }
html body main button.coll-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; width: 400px; max-width: 100%; }
html body main button.coll-btn svg { width: 20px; height: 20px; }
html body .luna-panier .luna-payer .luna-ic { width: 20px; height: 20px; }
/* écoute de la fiche : le rond devient le ▶ du pavé, le texte reste */
html body .luna-sortie .luna-ecoute { display: inline-flex; align-items: center; gap: 12px; padding: 8px 28px; text-align: left; }
html body .luna-sortie .luna-ecoute i { width: auto; height: auto; background: none; border-radius: 0; color: inherit; }
html body .luna-sortie .luna-ecoute i svg { width: 16px; height: 16px; margin-left: 0; }
html body .luna-sortie .luna-ecoute small { color: inherit; opacity: .75; }
/* écoute de l'accueil : le rond d'origine (forme, taille, place, ▶ et anneau de progression d'origine), noir (encre) au repos, jaune quand ça joue (état) */

/* --- Actions niveau 2 : ▶ rond 40 px contour encre ; « Ajouter · N € » = texte Geist 600 souligné --- */
html body .o-pj, html body .luna-sortie .luna-aussi .o-pj {
  width: 40px; height: 40px; line-height: 37px; border: 1.5px solid var(--encre); border-radius: 50%;
  background: var(--creme); color: var(--encre);
}
html body .luna-sortie .luna-aussi .o-pj { left: 24px; top: 36px; }   /* rond de 40 px entièrement dans la pochette de 64 px (22/10 : 27/40 dépassait de 3 à 4 px) */
html body .acc-add, html body .liste .o-ajout, html body .luna-sortie .luna-tous button, html body .luna-sortie .luna-tous a {
  font: 600 16px/1.2 var(--texte); color: var(--encre); box-shadow: none;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--encre);
}
html body .acc-small .acc-add { font-size: 14px; }
html body .mh-btn.mh-b-alea, html body .mh-btn.mh-b-alea:hover { background: transparent; border-color: var(--encre); color: var(--encre); }

/* --- Liens à flèche : une seule forme, Geist 500 17 encre (hors pied et lettre d'information) --- */
html body main .fleche:not(.acc-lettre .fleche):not(.coll-btn),
html body main .lien, html body .luna-panier .luna-coll .luna-f, html body .luna-sortie .luna-tous + a {
  font: 500 17px/1.3 var(--texte); color: var(--encre);
}
html body .luna-panier .luna-coll .luna-f { box-shadow: none; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
html body main .fleche:not(.acc-lettre .fleche) svg { width: 18px; height: 18px; }

/* --- Ambre = état seulement : plus aucun fond de bouton ambre (titre en lecture, filtre actif, fil et trait des H2 gardent l'ambre) --- */

/* --- Champs : focus visible (contour encre 2 px, dans la colonne) à la place de outline:none --- */
html body input:focus-visible, html body textarea:focus-visible, html body select:focus-visible,
html body .luna-champ:focus-visible { outline: 2px solid var(--encre); outline-offset: -2px; }

/* ===== Passe 2 (21/10) : écarts relevés sur les planches ===== */

/* La Collection (collection.html), niveau 1 : « Ajouter · 69 € » pavé contour 48 px, une ligne, sans débord, sans soulignement ambre (bureau et téléphone) */
html body main#contenu .actions button.coll-btn, html body main#contenu .actions button.coll-btn:hover {
  display: inline-flex; align-items: center; justify-content: center; gap: 0; width: 400px; max-width: 100%; height: 48px; min-height: 48px; padding: 0 28px; margin: 0;
  border: 1.5px solid var(--encre); border-radius: 0; background: transparent; color: var(--encre); font: 600 16px/1 var(--texte); white-space: nowrap;
  text-decoration: none; box-shadow: none;
}

/* Accueil : liste « La suite s'écoute. » (bureau), actions de chaque sortie : niveau 2, 16 px, ▶ Écouter + « Ajouter · N € » souligné encre */
html body .o-sp-act { font-size: 16px; align-items: baseline; }
html body .o-sp-act button { font: 600 16px/1.2 var(--texte); }
html body .o-sp-act .o-sp-ajout, html body .o-sp-act .o-sp-ajout:hover {
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--encre); white-space: nowrap;
}
html body .o-sp-act .o-sp-ecoute:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--encre); }
html body .o-sp-act .o-sp-ecoute[aria-pressed="true"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; text-decoration-color: var(--ambre); }   /* ambre = en lecture */
/* Musique (bureau), achat d'une ligne : « Ajouter · 2 € » souligné encre */
html body .liste .o-ajout, html body .liste .o-ajout:hover {
  font: 600 16px/1.2 var(--texte); color: var(--encre); white-space: nowrap; gap: 0;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--encre);
}
/* Fiche : « Ajouter · 7,50 € » et « Ajouter · 69 € » = niveau 1 (une ligne) ; la mention du prix n'est plus dupliquée */
html body .luna-sortie .luna-ajouter, html body .luna-sortie .luna-ajouter span, html body .luna-sortie .luna-ajouter b { white-space: nowrap; }
html body .luna-sortie .luna-ajouter b { font-weight: 600; }
html body .luna-sortie .luna-ajouter { gap: 6px; justify-content: center; }
html body .luna-sortie .luna-tous button { white-space: nowrap; }

/* Ambre = état seulement : le « € » de 69 € et les soulignés décoratifs passent à l'encre */
html body .col-chiffres .col-prix i { color: var(--encre); }
html body.accueil .acc-collection .fleche, html body.accueil .acc-collection .fleche:hover { text-decoration: none; }

/* Liens à flèche : tous en 17 px, Geist 500 */
html body main .o-lien, html body main .o-lien:hover, html body main a.fleche:not(.acc-lettre .fleche), html body main button.lien { font: 500 17px/1.3 var(--texte); }

/* H1 : même taille entre pages (96 / 44), jamais plus de 128 */
html body main#contenu h1.aff.titre-page { font-size: 96px; line-height: .92; }
@media (max-width: 899px) { html body main#contenu h1.aff.titre-page { font-size: 44px; line-height: .88; } }
/* H1 au même niveau sur Musique, La Collection et Le panier (haut du titre : 40 px sous l'en-tête au bureau, 28 px au téléphone) */
html body main#contenu.ecran.collection { padding-top: 40px; }
html body main#contenu:has(> .corps.luna-panier), html body main#contenu:has(.corps.luna-panier) { padding-top: 40px; }
html body .corps.luna-panier .luna-h1 { margin-top: 0; }
@media (max-width: 899px) {
  html body main#contenu.ecran.collection, html body main#contenu:has(.corps.luna-panier) { padding-top: 28px; }
}

/* « Du neuf dans tes oreilles. » aussi sur téléphone */
@media (max-width: 899px) {
  /* « Du neuf dans tes oreilles. » aussi sur téléphone : le titre est en 4 lignes (Les nouvelles / sorties / par / e-mail), trait à 7 px du fil comme les autres H2 */
  html body .acc-lettre h2.acc-heading.acc-fit { position: relative; }
  html body .acc-lettre h2.acc-heading.acc-fit::before { content: ""; position: absolute; left: -10px; top: 0; bottom: 0; width: 6px; background: var(--ambre); }   /* trait hors flux : texte, largeur et hauteur de la page inchangés */
}

/* Rond d'écoute de l'accueil : d'origine (base.css:773, ordinateur.css:776), noir au repos, ▶ crème ; jaune + pause d'origine en lecture */
html body .acc-rond { background: var(--encre); color: var(--creme); }
html body .acc-rond .rond-icone, html body .acc-rond .rond-icone * { fill: currentColor; }
html body .acc-rond .rond-anneau, html body .acc-rond .rond-anneau * { fill: none; }
html body .acc-rond .rond-anneau circle { stroke: color-mix(in oklab, var(--creme) 32%, transparent); }
html body .acc-rond .rond-anneau .rond-arc { stroke: var(--ambre); }
html body .acc-rond[aria-pressed="true"] { background: var(--ambre); color: #1e1220; }
html body .acc-rond[aria-pressed="true"] .rond-anneau circle { stroke: rgba(30, 18, 32, .22); }
html body .acc-rond[aria-pressed="true"] .rond-anneau .rond-arc { stroke: #1e1220; }


/* Bouton La Collection : le « + » décoratif hérité de ordinateur.css (.fleche::after) est retiré : libellé « Ajouter · 69 € » / « Add · €69 » sans signe collé */
html body main#contenu .actions button.coll-btn::after { content: none; display: none; }

/* ===== La Collection au téléphone (22/10, Brice) : chiffres sur une ligne, « Ajouter · 69 € » plein dans le premier écran, puis « Écouter au hasard » ; la cascade vient juste dessous, les lignes d'info en bas. Ordinateur : inchangé (tout est sous 900 px). ===== */
@media (max-width: 899px) {
  html body main.ecran.collection { display: flex; flex-direction: column; align-items: stretch; }
  html body main.ecran.collection > .px-o { display: contents; }
  html body main.ecran.collection > .titre-page { order: 0; }
  html body main.ecran.collection > .prix-l-m { order: 1; margin-top: 13px; }   /* 23/10 : ligne plus collée au titre (20 -> 13 px) */
  html body main.ecran.collection .col-chiffres { order: 2; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: baseline; gap: 6px; margin: 14px 0 0; }
  html body main.ecran.collection .col-chiffres li { padding: 10px 0; border-top: 0; gap: 5px; flex: 0 0 auto; }
  html body main.ecran.collection .col-chiffres b, html body main.ecran.collection .col-chiffres .col-prix b, html body main.ecran.collection .col-chiffres .col-prix i { font-size: 30px; letter-spacing: -.02em; margin: 0; }
  html body main.ecran.collection .col-chiffres span { font-size: 12px; }
  html body main.ecran.collection .col-chiffres .col-prix b, html body main.ecran.collection .col-chiffres .col-prix i { font-size: 42px; }   /* 23/10 : 59 € environ 1,4 fois les autres chiffres, souligné ambre sous le chiffre */
  html body main.ecran.collection .col-chiffres .col-prix b { box-shadow: inset 0 -3px #e8a93b; }
  html body main.ecran.collection > .actions { order: 3; margin-top: 12px; }
  html body main.ecran.collection > .mur-c { order: 4; }
  html body main.ecran.collection .col-infos { order: 5; margin-top: 22px; }
  html body main:has(+ .acc-lettre):not([data-panier-page]) { padding-bottom: 0; }   /* 23/10 : le bas de page (44 à 76 px) s'ajoutait aux 64 px du haut de la section e-mail ; reste 64 px, comme sur l'accueil */
  html body main#contenu .actions button.coll-btn, html body main#contenu .actions button.coll-btn:hover { background: var(--encre); color: var(--creme); }   /* plein, comme .luna-payer */
  html body main#contenu .actions .coll-alea { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 400px; max-width: 100%; height: 48px; margin-top: 8px; padding: 0 20px; border: 1.5px solid var(--encre); border-radius: 0; background: transparent; color: var(--encre); font: 600 16px/1 var(--texte); white-space: nowrap; cursor: pointer; }
  html body main#contenu .actions .coll-alea svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; }
  html body main#contenu .actions .coll-alea:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
}

/* ===== La Collection, chiffres et prix (23/10, Brice : « OK pour la version A », prix souligné ambre selon la charte). Nouveau bloc .col-tel pour le téléphone (59 € à gauche, filet vertical, trois lignes à droite) ; l'ancien bloc reste au bureau. Version a4 validée par Brice le 23/10 : pas de barre à gauche du prix ; le filet vertical entre le prix et la colonne est ambre, d'épaisseur 3/42 em de la charte (.0714 × la taille du prix). ===== */
.col-chiffres.col-tel { display: none; }
@media (max-width: 899px) {
  html body main.ecran.collection .col-chiffres:not(.col-tel) { display: none; }
  html body main.ecran.collection .col-chiffres.col-tel { display: grid; grid-template-columns: auto 1fr; align-items: center; justify-content: stretch; gap: 0; margin: 14px 0 0; padding-bottom: 15.5px; }
  html body main.ecran.collection .col-tel li { padding: 4px 0 4px 18px; gap: 6px; grid-column: 2; display: flex; align-items: baseline; }
  html body main.ecran.collection .col-tel li.col-prix { grid-column: 1; grid-row: 1 / span 3; padding: 8px calc(19px - .0714 * clamp(64px, 19vw, 92px)) 8px 0; border-right: calc(.0714 * clamp(64px, 19vw, 92px)) solid var(--ambre); align-self: stretch; align-items: baseline; align-content: center; flex-wrap: wrap; gap: 0; }
  html body main.ecran.collection .col-tel b { font: 900 24px/1 var(--titre); letter-spacing: -.02em; }
  html body main.ecran.collection .col-tel span { font: 400 16px/1.2 var(--texte); color: var(--encre-2); }
  html body main.ecran.collection .col-tel .col-prix b, html body main.ecran.collection .col-tel .col-prix i { font: 900 clamp(64px, 19vw, 92px)/.9 var(--titre); letter-spacing: -.03em; color: var(--encre); box-shadow: none; }   /* annule le souligné de l'ancien bloc (l. 166) */
  html body main.ecran.collection .col-tel .col-prix i { margin-left: -.14em; }
  html[lang=en] body main.ecran.collection .col-tel .col-prix i { margin-left: 0; margin-right: .05em; }   /* EN : « €59 », même écart visible (0,1 em) */
}