/* Socle commun : remise à zéro + composants fonctionnels (tiroir, recherche,
   commande, textes légaux, formulaires). Aucune direction artistique ici : tout
   passe par les variables ci-dessous, que chaque boutique redéfinit dans styles.css. */
:root {
  --fond: #ffffff; --fond-2: #f5f5f3; --texte: #1a1a1a; --texte-doux: #666666;
  --accent: #222222; --accent-texte: #ffffff; --bord: #e4e4e0; --rayon: 4px;
  --police-titre: Georgia, serif; --police-texte: system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.sans-defilement { overflow: hidden; }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--police-texte); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--police-titre); line-height: 1.15; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.evitement { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--fond); padding: 10px 14px; }
.evitement:focus { left: 8px; top: 8px; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.a-completer { background: #fff3a3; color: #5c4a00; padding: 0 4px; font-style: normal; border-radius: 2px; }
.anim [data-apparait] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.anim [data-apparait].vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; } }

/* Tiroir panier */
.voile { position: fixed; inset: 0; background: rgba(20, 20, 20, .4); opacity: 0; transition: opacity .25s; z-index: 60; }
.voile.ouvert { opacity: 1; }
.tiroir { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--fond); z-index: 70; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .26s ease; }
.tiroir.ouvert { transform: none; }
.tiroir-entete { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--bord); }
.tiroir-entete h2 { margin: 0; font-size: 1.15rem; }
.tiroir-fermer { background: none; border: 0; font-size: 1.8rem; line-height: 1; padding: 4px 8px; }
.tiroir-liste { flex: 1; overflow-y: auto; padding: 8px 20px; }
.tiroir-pied { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--bord); }
.tiroir-ligne { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; margin-bottom: 6px; }
.tiroir-note { font-size: .85rem; color: var(--texte-doux); margin-bottom: 12px; }
.tiroir-commander, .bouton, .achat-bouton, .formulaire button[type="submit"], .formulaire [data-confirmer], [data-payer], .barre-achat button {
  display: block; width: 100%; text-align: center; text-decoration: none; background: var(--accent); color: var(--accent-texte);
  border: 0; border-radius: var(--rayon); padding: 15px 18px; font-weight: 600; min-height: 48px;
}
.bouton { display: inline-block; width: auto; }
.tiroir-voir { display: block; text-align: center; padding: 10px; font-size: .9rem; }
.ligne-panier { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bord); }
.ligne-panier img { width: 72px; height: 96px; object-fit: cover; border-radius: var(--rayon); }
.ligne-corps { flex: 1; min-width: 0; }
.ligne-nom { display: block; text-decoration: none; font-weight: 600; }
.ligne-option { display: block; font-size: .85rem; color: var(--texte-doux); }
.ligne-bas { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.quantite { display: inline-flex; align-items: center; border: 1px solid var(--bord); border-radius: var(--rayon); }
.quantite button { background: none; border: 0; width: 36px; height: 36px; font-size: 1.1rem; }
.quantite span { min-width: 24px; text-align: center; }
.ligne-retirer { background: none; border: 0; padding: 6px 0 0; font-size: .8rem; color: var(--texte-doux); text-decoration: underline; }
.panier-vide { text-align: center; padding: 40px 10px; }
div.page-panier, .ck, .merci { max-width: 1080px; margin: 0 auto; padding: 32px 16px 64px; }
.panier-total { max-width: 420px; margin: 20px 0 0 auto; }
.merci { max-width: 640px; text-align: center; padding-top: 64px; }

/* Barre d'achat collée */
.barre-achat { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--fond); border-top: 1px solid var(--bord); transform: translateY(110%); transition: transform .2s; }
.barre-achat.visible { transform: none; }
.barre-achat-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .85rem; }
.barre-achat-texte span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-achat button { width: auto; padding: 12px 22px; min-height: 44px; }
@media (max-width: 899px) { .barre-achat { display: flex; } .page-produit { padding-bottom: 84px; } }

/* Bloc d'achat */
.achat-option { border: 0; padding: 0; margin: 0 0 14px; }
.achat-option legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
.achat-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.achat-choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.achat-choix span { display: block; min-width: 48px; min-height: 44px; padding: 10px 12px; text-align: center; border: 1px solid var(--bord); border-radius: var(--rayon); cursor: pointer; }
.achat-choix input:checked + span { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }
.achat-choix input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.achat-erreur { color: #a4262c; font-size: .9rem; margin: 0 0 10px; }
.fiche-infos { margin: 0; }
.fiche-infos > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--bord); }
.fiche-infos dt { color: var(--texte-doux); }
.fiche-infos dd { margin: 0; text-align: right; }
.bloc-conformite { font-size: .85rem; color: var(--texte-doux); }
.bloc-conformite p { margin-bottom: .5em; }
.avertissements { border: 1px solid #c98a00; background: #fff8e6; color: #5a4300; padding: 10px 12px; border-radius: var(--rayon); font-size: .9rem; margin: 12px 0; }
.avertissements p { margin: 0; font-weight: 600; }
.avertissements p + p { margin-top: 6px; }

/* Bas de pied de page */
.pied-legal { font-size: .82rem; }
.pied-legal p { margin: 0 0 8px; }
.grille-vide { padding: 28px 0; }
.logos-paiement { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.logos-paiement svg { width: 42px; height: 26px; }
.lien-retractation { font-weight: 600; text-decoration: underline; }

/* Recherche */
.recherche { position: fixed; inset: 0; z-index: 80; background: var(--fond); padding: 16px; overflow-y: auto; }
.recherche-barre { display: flex; gap: 8px; max-width: 720px; margin: 0 auto 16px; align-items: center; }
.recherche-barre input { flex: 1; min-width: 0; padding: 12px 14px; font-size: 1.05rem; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond); }
.recherche-barre button { background: none; border: 0; font-size: 1.8rem; line-height: 1; padding: 4px 8px; }
.recherche-resultats { max-width: 720px; margin: 0 auto; }
.recherche-resultat { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bord); text-decoration: none; }
.recherche-resultat img { width: 60px; height: 80px; object-fit: cover; border-radius: var(--rayon); }
.recherche-resultat span { flex: 1; min-width: 0; }

/* Textes légaux */
.legal { max-width: 780px; margin: 0 auto; padding: 40px 16px 72px; }
.legal h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); }
.legal h2 { font-size: 1.25rem; margin-top: 2em; }
.legal h3 { font-size: 1.05rem; margin-top: 1.4em; }
.legal ul { list-style: disc; padding-left: 1.2em; margin-bottom: 1em; }
.legal li { margin-bottom: .35em; }
.legal a { text-decoration: underline; }
.legal-intro { font-size: 1.1rem; color: var(--texte-doux); }
.legal table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .95rem; }
.legal th, .legal td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--bord); }
.legal .tableau { overflow-x: auto; }
.legal-mise-a-jour { font-size: .85rem; color: var(--texte-doux); margin-top: 2.5em; }
.encadre { border: 1px solid var(--bord); background: var(--fond-2); padding: 16px 18px; border-radius: var(--rayon); margin: 1em 0; font-size: .95rem; }
.faq details { border-bottom: 1px solid var(--bord); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details div { padding-top: 10px; }

/* Formulaires */
.formulaire label, .ck-form label { display: block; margin-bottom: 14px; font-size: .92rem; font-weight: 600; }
.formulaire input:not([type="checkbox"]):not(.piege), .formulaire textarea, .formulaire select,
.ck-form input:not([type="checkbox"]), .ck-form select {
  display: block; width: 100%; margin-top: 6px; padding: 12px; font-weight: 400; font-size: 16px; background: var(--fond); border: 1px solid var(--bord); border-radius: var(--rayon);
}
.bouton-secondaire { width: auto !important; margin-top: 8px; background: none !important; color: var(--texte) !important; border: 1px solid var(--bord) !important; }
.form-message { font-size: .92rem; margin: 10px 0 0; min-height: 1.2em; }
.form-message.ok { color: #1c6b3c; }
.form-message.erreur { color: #a4262c; }
.contact-grille { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .contact-grille { grid-template-columns: 1fr 1.3fr; } }
.newsletter-note { font-size: .78rem; margin: 8px 0 0; color: var(--texte-doux); }

/* Commande */
.ck h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.ck h2 { font-size: 1.1rem; }
.ck-grille { display: grid; gap: 28px; grid-template-columns: 1fr; }
.ck-resume { order: -1; background: var(--fond-2); padding: 16px; border-radius: var(--rayon); align-self: start; }
@media (min-width: 900px) { .ck-grille { grid-template-columns: 1.3fr 1fr; } .ck-resume { order: 0; position: sticky; top: 20px; } }
.ck-form section { margin-bottom: 26px; }
.ck-duo { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.ck-ligne { display: flex; gap: 10px; align-items: center; padding: 8px 0; }
.ck-ligne img { width: 56px; height: 74px; object-fit: cover; border-radius: var(--rayon); }
.ck-ligne div { flex: 1; min-width: 0; }
.ck-ligne span, .ck-ligne small { display: block; }
.ck-ligne small { color: var(--texte-doux); }
.ck-totaux { border-top: 1px solid var(--bord); margin-top: 8px; padding-top: 10px; }
.ck-totaux > div { display: flex; justify-content: space-between; padding: 3px 0; }
.ck-total { font-size: 1.15rem; font-weight: 600; margin-top: 6px; }
.ck-securite, .ck-note { font-size: .85rem; color: var(--texte-doux); margin: 10px 0; }
.ck-indisponible { padding: 14px; background: var(--fond-2); border-radius: var(--rayon); }
.ck-form .ck-cgv { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.ck-cgv input { margin-top: 4px; width: 20px; height: 20px; flex: none; }
[data-payer]:disabled { opacity: .72; cursor: not-allowed; }

/* Consentement */
.consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; max-width: 480px; margin: 0 auto; background: var(--fond); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px 16px; box-shadow: 0 6px 24px rgba(0, 0, 0, .15); font-size: .9rem; }
.consent p { margin-bottom: 10px; }
.consent div { display: flex; gap: 8px; }
.consent button { flex: 1; padding: 10px; border: 1px solid var(--texte); background: var(--fond); border-radius: var(--rayon); }

/* Shrikhand dessine son espace insécable trois fois plus large qu'une espace : on le laisse à la police de secours. */
@font-face{font-family:"Shrikhand";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/shrikhand-400.woff2) format("woff2");unicode-range:U+0000-009F,U+00A1-FFFF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/poppins-700.woff2) format("woff2")}

/* ==========================================================================
   Septantine : un 33 tours en ligne.
   Pochette carrée, arcs qui partent d'un coin, disque qui sort, dos de pochette.
   Le disque est marron, pas noir : le fond reste clair sur toutes les pages.
   ========================================================================== */
:root {
  --fond: #f8ecd6; --fond-2: #f2dfbb; --fond-3: #fff8ea;
  --texte: #5a3417; --texte-doux: #76522f;
  --accent: #c8541a; --accent-texte: #ffffff;
  --bord: #dcc394; --rayon: 14px;
  --police-titre: "Shrikhand", Georgia, serif;
  --police-texte: "Poppins", system-ui, sans-serif;
  --orange: #c8541a; --moutarde: #d9a521; --marron: #5a3417; --olive: #6b6a2c;
  /* Même orange, un cran plus dense : pour tout ce qui porte ou fait du petit texte (AA). */
  --orange-bouton: #c24f17; --orange-encre: #9c3a09; --orange-clair: #e8975a;
  --sillon-a: #5a3417; --sillon-b: #4d2c13;
  --gouttiere: 16px;
}

body { font-size: 1rem; line-height: 1.6; }
h1, h2, h3 { font-weight: 400; letter-spacing: .002em; }
::selection { background: var(--moutarde); color: var(--marron); }
:focus-visible { outline: 3px solid var(--orange-encre); outline-offset: 2px; }
a { text-underline-offset: 3px; }
strong, b { font-weight: 700; }

.surtitre { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-encre); margin: 0 0 .5em; }
.arcs { display: block; }

/* Bandes d'affiche, entre deux sections */
.ruban { display: grid; gap: 5px; margin: 6px 0; }
.ruban i { display: block; height: 12px; width: 76%; background: var(--orange); border-radius: 0 99px 99px 0; }
.ruban i:nth-child(2) { width: 60%; background: var(--moutarde); }
.ruban i:nth-child(3) { width: 44%; background: var(--marron); }
.ruban--droite i { margin-left: auto; border-radius: 99px 0 0 99px; }

/* Boutons : une pastille pleine, posée sur une ombre franche */
.bouton, .achat-bouton, .tiroir-commander, [data-payer], .formulaire button[type="submit"], .formulaire [data-confirmer], .barre-achat button {
  background: var(--orange-bouton); color: #fff; border-radius: 99px; font-weight: 700; letter-spacing: .01em; line-height: 1.25;
  box-shadow: 0 4px 0 var(--marron); transition: transform .12s ease, box-shadow .12s ease, background .15s ease; margin-bottom: 4px;
}
.bouton:hover, .achat-bouton:hover, .tiroir-commander:hover, .formulaire button[type="submit"]:hover, .barre-achat button:hover { background: var(--marron); }
.bouton:active, .achat-bouton:active, .tiroir-commander:active, .barre-achat button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--marron); }

/* ------------------------------------------------------------------ le disque */
/* overflow : les coins du carré qui tourne ne doivent pas élargir la page. */
.vinyle { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.vinyle-tourne {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: repeating-radial-gradient(circle at 50% 50%, var(--sillon-a) 0 2px, var(--sillon-b) 2px 3px);
  animation: tourne 16s linear infinite;
}
.vinyle::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 30deg, rgba(248, 236, 214, 0) 0 5%, rgba(248, 236, 214, .26) 10%, rgba(248, 236, 214, 0) 15% 50%, rgba(248, 236, 214, .2) 60%, rgba(248, 236, 214, 0) 65%);
}
.vinyle-etiquette { position: absolute; inset: 0; width: 100%; height: 100%; }
.vinyle-etiquette text { font-family: var(--police-texte); font-weight: 700; font-size: 7.6px; text-anchor: middle; }
.vinyle-etiquette .vinyle-lettre { font-family: var(--police-titre); font-weight: 400; font-size: 34px; }
.vinyle-etiquette .vinyle-sous { font-size: 9px; letter-spacing: .04em; }
.vinyle-photo { position: absolute; left: 31%; top: 31%; width: 38%; height: 38%; border-radius: 50%; background: var(--fond) center / cover no-repeat; }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vinyle-tourne, .entete-45 svg { animation: none !important; } }

/* ------------------------------------------------------------------- l'entête */
.entete { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 4px; padding: 7px 12px 13px; background: var(--fond); }
.entete::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(to bottom, var(--orange) 0 2px, var(--moutarde) 2px 4px, var(--marron) 4px 6px); }
.logo { display: block; width: 118px; margin-right: auto; flex: none; }
.logo-svg { width: 100%; height: auto; }
.entete-faces { display: flex; gap: 4px; }
.entete-faces a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--fond-2); color: var(--marron); text-decoration: none; transition: background .15s; }
.entete-faces a:hover { background: var(--moutarde); }
.entete-faces b { font-family: var(--police-titre); font-weight: 400; font-size: 1.2rem; line-height: 1; }
.entete-faces span { display: none; }
.entete-outil { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: none; border: 0; color: var(--marron); }
.entete-45 { position: relative; flex: none; width: 46px; height: 46px; padding: 0; background: none; border: 0; }
.entete-45 svg { width: 100%; height: 100%; transition: transform .5s ease; }
.entete-45:hover svg { transform: rotate(120deg); }
.entete-45:has(.entete-compteur:not([data-n="0"])) svg { animation: tourne 5s linear infinite; }
.entete-compteur { position: absolute; inset: 0; display: grid; place-items: center; font-size: .82rem; font-weight: 700; color: var(--marron); line-height: 1; }
.entete-menu { display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; }
.entete-menu i { display: block; width: 24px; height: 4px; border-radius: 4px; background: var(--orange); }
.entete-menu i:nth-child(2) { background: var(--moutarde); }
.entete-menu i:nth-child(3) { background: var(--marron); }
.entete--caisse { justify-content: space-between; }
.entete-retour { display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem; font-weight: 500; }
@media (max-width: 379px) { .logo { width: 92px; } .entete { padding-left: 8px; padding-right: 8px; gap: 2px; } }

/* Le menu : la liste des titres */
.menu { position: fixed; inset: 0; z-index: 70; padding: 28px 24px 32px; background: var(--fond); overflow-y: auto; opacity: 0; transform: translateY(-12px); transition: opacity .22s ease, transform .22s ease; }
.menu.ouvert { opacity: 1; transform: none; }
.menu-arcs { position: absolute; top: 0; right: 0; width: 190px; height: 190px; }
.menu-fermer { position: absolute; top: 10px; right: 10px; z-index: 2; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--fond); color: var(--marron); font-size: 1.9rem; line-height: 1; }
.menu .surtitre { margin-top: 56px; }
.menu-liste { list-style: none; margin: 0 0 22px; padding: 0; }
.menu-liste a { display: flex; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--bord); font-family: var(--police-titre); font-size: 1.7rem; line-height: 1.2; text-decoration: none; }
.menu-liste span { width: 26px; flex: none; font-family: var(--police-texte); font-size: .8rem; font-weight: 700; color: var(--orange-encre); }
.menu-bas a { display: block; padding: 10px 0; font-weight: 500; }

/* ---------------------------------------------------------------- 1. la pochette */
.une { padding: 12px var(--gouttiere) 22px; }
.une-scene { position: relative; }
.une-pochette { position: relative; z-index: 2; width: calc(100% - 28px); aspect-ratio: 1; overflow: hidden; border-radius: 5px; container-type: inline-size; box-shadow: 4px 4px 0 rgba(90, 52, 23, .22); }
.une-photo { width: 100%; height: 100%; object-fit: cover; }
.une-arcs { position: absolute; inset: 0; width: 100%; height: 100%; }
.une h1 { position: absolute; left: 5%; top: 4%; margin: 0; font-size: 16.6cqw; line-height: .96; color: var(--fond); text-shadow: .05em .05em 0 var(--marron); }
.une-bouton { position: absolute; left: 5.5%; bottom: 5%; display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 99px; background: var(--orange-bouton); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 4px 0 var(--marron); }
.une-bouton:hover { background: var(--marron); }
.une-macaron { position: absolute; right: 3%; top: 37%; width: 25cqw; height: 25cqw; min-width: 84px; min-height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6px; border-radius: 50%; background: var(--fond); color: var(--marron); font-size: clamp(.68rem, 3cqw, .95rem); font-weight: 500; line-height: 1.15; text-decoration: none; transform: rotate(8deg); }
.une-macaron strong { font-size: clamp(.92rem, 4.2cqw, 1.3rem); margin-top: 2px; color: var(--orange-encre); }
.une-sommaire { display: none; }
.une-disque { position: absolute; z-index: 1; top: 3%; right: 0; width: calc(94% - 28px); }
.une-texte { margin-top: 14px; }
.une-promesse { margin: 0 0 8px; font-size: 1.14rem; font-weight: 500; line-height: 1.35; }
.une-credits { display: flex; flex-wrap: wrap; gap: 0 14px; font-size: .84rem; color: var(--texte-doux); }
.une-credits li { position: relative; padding-left: 14px; }
.une-credits li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, var(--fond) 0 1.5px, var(--orange) 1.5px); }

/* ------------------------------------------------- 2. face A, face B, la platine */
.faces { position: relative; overflow: hidden; padding: 30px var(--gouttiere) 36px; background: var(--fond-2); transition: background .5s ease; }
.faces[data-face-active="b"] { background: #efd2ab; }
.faces-platine { position: absolute; top: 18px; right: max(-19vw, -96px); width: min(62vw, 300px); }
.platine { position: relative; perspective: 1100px; }
.platine-disque { position: relative; aspect-ratio: 1; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.65, .05, .3, 1); }
.platine-disque .vinyle { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.platine-b { transform: rotateY(180deg); }
[data-face-active="b"] .platine-disque { transform: rotateY(180deg); }
.platine-bras { display: none; }
.faces-liste { position: relative; }
.faces-liste h2 { margin: 0 0 16px; max-width: 58%; min-height: 3.4em; font-size: clamp(2.3rem, 10.5vw, 4rem); line-height: 1.05; }
.commutateur { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 8px; border-radius: 99px; background: var(--marron); }
.commutateur button { display: flex; align-items: baseline; justify-content: center; gap: 7px; min-height: 48px; padding: 8px 10px; border: 0; border-radius: 99px; background: transparent; color: var(--fond); transition: background .2s ease, color .2s ease; }
.commutateur b { font-family: var(--police-titre); font-weight: 400; font-size: 1.14rem; }
.commutateur span { font-size: .86rem; }
.commutateur [aria-pressed="true"] { background: var(--moutarde); color: var(--marron); }
.pistes { list-style: none; margin: 0; padding: 0; }
.piste a { display: grid; grid-template-columns: 22px 54px minmax(0, 1fr) auto 40px; align-items: center; gap: 10px; min-height: 74px; padding: 9px 0; border-bottom: 1px solid var(--bord); text-decoration: none; }
.piste-no { font-size: .8rem; font-weight: 700; color: var(--orange-encre); font-variant-numeric: tabular-nums; }
.piste-photo { position: relative; display: block; width: 54px; height: 54px; }
.piste-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.piste-nom { font-weight: 500; font-size: .94rem; line-height: 1.22; }
.piste-nom small { display: none; font-weight: 400; font-size: .8rem; color: var(--texte-doux); }
.piste-prix { font-size: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.piste-lecture { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--orange-bouton); color: #fff; transition: transform .2s ease, background .2s ease; }
.piste a:hover .piste-lecture { background: var(--marron); transform: scale(1.1); }
.piste-suite a { display: inline-flex; align-items: center; min-height: 48px; margin-top: 6px; font-weight: 700; }

/* ------------------------------------------------------------------ 3. le coffret */
.coffret { margin-top: 0; padding: 30px var(--gouttiere) 34px; background: var(--moutarde); border-radius: 0 0 40px 40px; scroll-margin-top: 66px; }
.coffret-recto { position: relative; margin-bottom: 72px; }
.coffret-pochette { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 5px; box-shadow: 4px 4px 0 rgba(90, 52, 23, .3); }
.coffret-pochette > img { width: 100%; height: 100%; object-fit: cover; }
.coffret-arcs { position: absolute; inset: 0; width: 100%; height: 100%; }
.coffret-etiquette { position: absolute; right: 3.5%; top: 3.5%; margin: 0; max-width: 5em; text-align: right; font-family: var(--police-titre); font-size: clamp(.95rem, 4.2vw, 1.5rem); line-height: 1.02; color: var(--marron); }
.coffret-disques { position: absolute; right: -8px; bottom: -58px; display: flex; width: 56%; }
.coffret-disque { position: relative; flex: 1 1 0; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 5px solid var(--marron); background: var(--marron); }
.coffret-disque + .coffret-disque { margin-left: -14%; }
.coffret-disque img { width: 100%; height: 100%; object-fit: cover; }
.coffret-disque::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16%; height: 16%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, var(--fond) 0 26%, var(--moutarde) 27% 100%); }
.coffret-verso .surtitre { color: var(--marron); }
.coffret-verso h2 { margin: 0 0 6px; font-size: clamp(2.5rem, 11vw, 4.2rem); line-height: 1; }
.coffret-chapo { margin-bottom: 16px; }
.coffret-form { display: grid; gap: 10px; }
.coffret-disc { padding: 12px; border-radius: 16px; background: var(--fond); }
.coffret-ligne { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 10px; margin: 0 0 8px; font-size: .85rem; }
.coffret-ligne span { color: var(--texte-doux); }
.coffret-choix { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.coffret-piece { position: relative; display: block; cursor: pointer; }
.coffret-piece input, .coffret-tailles input { position: absolute; opacity: 0; width: 0; height: 0; }
.coffret-piece span { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 4px; outline: 3px solid transparent; outline-offset: 1px; transition: outline-color .15s; }
.coffret-piece img { width: 100%; height: 100%; object-fit: cover; }
.coffret-piece input:checked + span { outline-color: var(--orange-bouton); }
.coffret-piece input:focus-visible + span { outline-color: var(--marron); }
.coffret-tailles { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; border: 0; }
.coffret-tailles label { cursor: pointer; }
.coffret-tailles span { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--marron); border-radius: 50%; font-size: .85rem; font-weight: 500; }
.coffret-tailles input:checked + span { background: var(--orange-bouton); border-color: var(--orange-bouton); color: #fff; }
.coffret-tailles input:focus-visible + span { outline: 3px solid var(--marron); outline-offset: 2px; }
.coffret-bouton { display: block; width: 100%; min-height: 52px; text-align: center; border: 0; }
.coffret .achat-erreur { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--fond); color: #8a1f12; font-weight: 500; }

/* ------------------------------------------------------------------- 4. les motifs */
.motifs { padding: 34px var(--gouttiere) 30px; }
.motifs-tete h2 { margin: 0 0 4px; font-size: clamp(2.3rem, 10vw, 4rem); line-height: 1.05; }
.motifs-tete > p:not(.surtitre) { margin-bottom: 14px; color: var(--texte-doux); }
.motifs-liste { display: none; }
.mosaique { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tuile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 4px; text-decoration: none; color: var(--marron); }
.tuile-1 { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.tuile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.tuile:hover img { transform: scale(1.06); }
.tuile span { position: absolute; left: 5px; bottom: 5px; padding: 3px 9px; border-radius: 99px; background: var(--fond); font-size: .74rem; font-weight: 700; line-height: 1.3; }
.tuile small { display: none; font-weight: 400; font-size: .74rem; }
.tuile-6 { background: var(--orange-bouton) radial-gradient(circle at 100% 0, var(--marron) 0 26%, var(--moutarde) 26.5% 40%, transparent 40.5%); }
.tuile-1 span { font-size: .84rem; }
.tuile-1 small { display: block; }

/* ------------------------------------------------------------------- 5. les crédits */
.credits { margin: 0 var(--gouttiere) 8px; padding: 14px 0 18px; border-top: 3px solid var(--marron); font-size: .84rem; line-height: 1.5; }
.credits h2 { margin: 0 0 6px; font-size: 1.3rem; }
.credits dl { margin: 0; }
.credits dl > div { display: flex; gap: 10px; padding: 2px 0; }
.credits dt { flex: 0 0 104px; color: var(--texte-doux); }
.credits dd { margin: 0; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }

/* --------------------------------------------------- le bac : boutique et collections */
.bac { max-width: 1320px; margin: 0 auto; padding: 0 var(--gouttiere) 48px; }
.bac-tete, .notes-tete, .histoire-tete { position: relative; overflow: hidden; margin: 0 calc(var(--gouttiere) * -1); padding: 26px var(--gouttiere) 22px; background: var(--fond-2); }
.bac-tete h1, .notes-tete h1, .histoire-tete h1 { position: relative; margin: 0 0 6px; max-width: calc(100% - 64px); font-size: clamp(2.4rem, 11vw, 5rem); line-height: 1.04; }
.notes-tete h1 { font-size: clamp(2.1rem, 9.6vw, 4.4rem); }
.bac-arcs { position: absolute; top: 0; right: 0; width: min(38vw, 300px); height: min(38vw, 300px); }
.bac-tete .surtitre, .notes-tete .surtitre, .histoire-tete .surtitre { position: relative; }
.bac-chapo { position: relative; margin: 0; max-width: 34em; padding-right: 26px; }
.bac-voisines { display: flex; gap: 2px; overflow-x: auto; margin: 0 calc(var(--gouttiere) * -1); padding: 10px var(--gouttiere) 0; scrollbar-width: none; }
.bac-voisines a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.bac-voisines a[aria-current] { font-family: var(--police-titre); font-weight: 400; color: var(--orange-encre); font-size: 1.1rem; }
.bac-outils { display: grid; gap: 10px; padding: 14px 0 16px; }
.bac-filtres { display: flex; gap: 6px; overflow-x: auto; margin: 0 calc(var(--gouttiere) * -1); padding: 2px var(--gouttiere); scrollbar-width: none; }
.bac-filtres::-webkit-scrollbar, .bac-voisines::-webkit-scrollbar { display: none; }
.filtre { flex: none; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--marron); border-radius: 99px; background: none; color: var(--marron); font-size: .9rem; font-weight: 500; white-space: nowrap; }
.filtre--face { background: var(--moutarde); border-color: var(--moutarde); font-weight: 700; }
.filtre.actif { background: var(--marron); border-color: var(--marron); color: var(--fond); }
.bac-tri { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bac-compte { font-size: .88rem; color: var(--texte-doux); }
.tri select { min-height: 44px; padding: 0 34px 0 14px; border: 0; border-radius: 99px; background: var(--fond-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235a3417' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center / 11px; font-size: 16px; color: var(--marron); appearance: none; -webkit-appearance: none; }
.grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
.grille--bac .carte:nth-child(7n+1) { grid-column: span 2; }
.grille-vide { padding: 34px 0; text-align: left; }
.grille-vide p { font-family: var(--police-titre); font-size: 1.5rem; line-height: 1.2; }

/* Carte : une pochette, un disque qui dépasse, une pastille */
.carte-lien { display: block; text-decoration: none; }
.carte-zone { position: relative; margin-right: 8%; }
.carte-pochette { position: relative; z-index: 2; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: var(--fond-2); box-shadow: 2px 2px 0 rgba(90, 52, 23, .2); }
.carte-pochette img { width: 100%; height: 100%; object-fit: cover; }
.carte-disque { position: absolute; z-index: 1; left: 3%; top: 3%; width: 94%; height: 94%; border-radius: 50%; transform: translateX(8.6%); transition: transform .5s cubic-bezier(.3, .75, .2, 1);
  background: radial-gradient(circle, var(--fond) 0 2.2%, var(--moutarde) 2.6% 18%, transparent 18.4%), conic-gradient(from 30deg, rgba(248, 236, 214, 0) 0 5%, rgba(248, 236, 214, .25) 10%, rgba(248, 236, 214, 0) 15% 50%, rgba(248, 236, 214, .2) 60%, rgba(248, 236, 214, 0) 65%), repeating-radial-gradient(circle, var(--sillon-a) 0 2px, var(--sillon-b) 2px 3px); }
.carte-disque--b { background: radial-gradient(circle, var(--fond) 0 2.2%, var(--orange-clair) 2.6% 18%, transparent 18.4%), conic-gradient(from 30deg, rgba(248, 236, 214, 0) 0 5%, rgba(248, 236, 214, .25) 10%, rgba(248, 236, 214, 0) 15% 50%, rgba(248, 236, 214, .2) 60%, rgba(248, 236, 214, 0) 65%), repeating-radial-gradient(circle, var(--sillon-a) 0 2px, var(--sillon-b) 2px 3px); }
.carte-lien:hover .carte-disque, .carte-lien:focus-visible .carte-disque { transform: translateX(36%); }
.carte-prix { position: absolute; z-index: 3; right: 6px; bottom: 6px; padding: 3px 10px; border-radius: 99px; background: var(--orange-bouton); color: #fff; font-size: .8rem; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.carte-piste { margin: 8px 0 0; font-size: .72rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-encre); }
.carte-nom { margin: 0; font-family: var(--police-texte); font-size: .92rem; font-weight: 500; line-height: 1.3; }

/* ---------------------------------------------------- la fiche : recto et verso */
.fiche { max-width: 1320px; margin: 0 auto; padding: 8px var(--gouttiere) 20px; }
.ariane { display: flex; gap: 8px; align-items: center; min-height: 44px; margin-top: -8px; font-size: .84rem; color: var(--texte-doux); }
.ariane a { display: inline-flex; align-items: center; min-height: 44px; }
.recto-scene { position: relative; }
.recto-pochette { position: relative; z-index: 2; width: calc(100% - 26px); aspect-ratio: 1; overflow: hidden; border-radius: 5px; background: var(--fond-2); box-shadow: 4px 4px 0 rgba(90, 52, 23, .22); }
.galerie { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.galerie::-webkit-scrollbar { display: none; }
.galerie img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.recto-disque { position: absolute; z-index: 1; top: 3%; right: 0; width: calc(94% - 26px); }
.recto { position: relative; }
.galerie-vues { position: absolute; z-index: 3; left: 8px; bottom: 8px; display: flex; gap: 6px; margin: 0; }
.galerie-vues button { width: 44px; height: 44px; padding: 0; overflow: hidden; border: 2px solid var(--fond); border-radius: 4px; background: none; outline: 2px solid transparent; outline-offset: 0; }
.galerie-vues button[aria-current] { outline-color: var(--orange-bouton); }
.galerie-vues img { width: 100%; height: 100%; object-fit: cover; }
.verso { position: relative; margin-top: 12px; padding: 18px 16px 18px; background: var(--fond-2); border-radius: 5px; overflow: hidden; }
.verso::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; background: linear-gradient(to bottom, var(--orange) 0 3px, var(--moutarde) 3px 6px, var(--marron) 6px 9px); }
.verso-piste { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: .84rem; }
.verso-piste b { padding: 2px 11px; border-radius: 99px; background: var(--moutarde); }
.verso-piste i { margin-left: auto; font-style: normal; font-size: .76rem; letter-spacing: .05em; color: var(--texte-doux); }
.verso h1 { margin: 0 0 2px; font-size: clamp(2rem, 9.2vw, 3.6rem); line-height: 1.04; }
.verso-prix { margin: 0 0 4px; }
.verso-prix strong { font-size: 1.4rem; color: var(--orange-encre); }
.verso-prix small { font-size: .8rem; color: var(--texte-doux); }
.verso-resume { margin-bottom: 10px; font-size: .95rem; font-weight: 500; line-height: 1.35; }
.achat-option legend { font-size: .84rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.achat-choix span { display: grid; place-items: center; width: 50px; min-width: 0; height: 50px; min-height: 0; padding: 0; border: 1.5px solid var(--marron); border-radius: 50%; background: var(--fond-3); font-weight: 500; transition: background .15s; }
.achat-choix span:hover { background: var(--moutarde); }
.achat-choix input:checked + span { background: var(--orange-bouton); border-color: var(--orange-bouton); color: #fff; }
.achat-erreur { color: #8a1f12; font-weight: 500; }
.achat-guide { display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0 6px; font-size: .88rem; }
.achat-bouton { min-height: 56px; font-size: 1.05rem; }
.verso-credits { margin: 14px 0; font-size: .86rem; line-height: 1.4; }
.verso-credits > div { display: flex; gap: 10px; padding: 3px 0; }
.verso-credits dt { flex: 0 0 100px; color: var(--texte-doux); }
.verso-credits dd { margin: 0; font-weight: 500; }
.verso-texte { margin: 14px 0; }
.verso-pli { border-top: 2px solid var(--marron); }
.verso-pli summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; font-weight: 700; list-style: none; }
.verso-pli summary::-webkit-details-marker { display: none; }
.verso-pli summary::after { content: "+"; font-family: var(--police-titre); font-size: 1.4rem; color: var(--orange-encre); }
.verso-pli[open] summary::after { content: "−"; }
.verso-pli > :not(summary) { margin-bottom: 12px; }
.verso-details { list-style: none; }
.verso-details li { position: relative; padding: 2px 0 2px 16px; font-size: .94rem; }
.verso-details li::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle, var(--fond) 0 1.6px, var(--orange) 1.7px); }
.fiche-infos > div { border-color: var(--bord); font-size: .92rem; }
.bloc-conformite { color: var(--texte-doux); }
.album { max-width: 1320px; margin: 0 auto; padding: 18px var(--gouttiere) 28px; }
.album h2 { margin: 0 0 14px; font-size: clamp(1.9rem, 8.4vw, 3rem); line-height: 1.08; }
.grille--album { gap: 20px 12px; }

/* --------------------------------------------- tiroir, panier : la pile de disques */
.tiroir { border-left: 6px solid var(--marron); }
.voile { background: rgba(90, 52, 23, .45); }
.tiroir-entete { position: relative; padding: 18px 20px 16px; border-bottom: 0; background: radial-gradient(circle at 100% 0, var(--marron) 0 34px, var(--orange) 34.5px 52px, var(--moutarde) 52.5px 70px, var(--fond-2) 70.5px); }
.tiroir-entete h2 { font-size: 1.5rem; }
.tiroir-fermer { flex: none; width: 44px; height: 44px; margin: -6px -10px -6px 0; padding: 0; border-radius: 50%; background: var(--marron); color: var(--fond); }
.tiroir { overflow: hidden; }
.tiroir::before { content: ""; position: absolute; right: -92px; bottom: 150px; width: 290px; height: 290px; border-radius: 50%; background: radial-gradient(circle, var(--fond) 0 4px, #eccb7c 4.5px 46px, transparent 46.5px), repeating-radial-gradient(circle, #efdcb8 0 2px, #e9d2a8 2px 3px); }
.tiroir-entete, .tiroir-liste, .tiroir-pied { position: relative; z-index: 1; }
.tiroir-liste { counter-reset: piste; padding: 6px 20px; }
.ligne-panier { position: relative; gap: 22px; padding: 14px 0; counter-increment: piste; }
.ligne-panier > a:first-child { position: relative; flex: none; display: block; width: 72px; height: 72px; }
.ligne-panier > a:first-child::after { content: ""; position: absolute; z-index: 0; top: 3px; left: 16px; width: 66px; height: 66px; border-radius: 50%; background: radial-gradient(circle, var(--fond) 0 2px, var(--moutarde) 2.5px 12px, transparent 12.5px), repeating-radial-gradient(circle, var(--sillon-a) 0 2px, var(--sillon-b) 2px 3px); }
.ligne-panier img { position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 3px; }
.ligne-nom { font-weight: 500; line-height: 1.25; text-decoration: none; }
.ligne-nom::before { content: counter(piste, decimal-leading-zero); margin-right: 7px; font-size: .78rem; font-weight: 700; color: var(--orange-encre); }
.ligne-bas { gap: 8px; }
.quantite { border: 1.5px solid var(--marron); border-radius: 99px; }
.quantite button { width: 44px; height: 44px; }
.ligne-retirer { display: inline-flex; align-items: center; min-height: 44px; padding: 0; font-size: .84rem; color: var(--texte-doux); }
.tiroir-pied { border-top: 0; background: var(--fond-2); }
.tiroir-ligne strong { font-size: 1.2rem; }
.tiroir-note { color: var(--texte-doux); }
.tiroir-commander { font-size: 1.05rem; }
.tiroir-voir { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0; margin-top: 4px; }
.panier-vide { padding: 34px 6px; }
.panier-vide::before { content: ""; display: block; width: 130px; height: 130px; margin: 0 auto 16px; border-radius: 50%; background: radial-gradient(circle, var(--fond) 0 3px, var(--moutarde) 3.5px 24px, transparent 24.5px), repeating-radial-gradient(circle, var(--sillon-a) 0 2px, var(--sillon-b) 2px 3px); }
.panier-vide p { font-family: var(--police-titre); font-size: 1.35rem; line-height: 1.2; }
.panier-vide a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 99px; background: var(--orange-bouton); color: #fff; font-weight: 700; text-decoration: none; }

div.page-panier { max-width: 860px; padding: 26px var(--gouttiere) 48px; }
div.page-panier h1, .ck h1, .merci h1, .sillon h1 { font-size: clamp(2.2rem, 10vw, 4rem); line-height: 1.05; }
.panier-lignes { counter-reset: piste; }
.panier-total { max-width: none; padding: 16px; border-radius: 5px; background: var(--fond-2); }

/* ------------------------------------------------------------------ la commande */
.ck { position: relative; padding: 22px var(--gouttiere) 40px; }
.ck h1, div.page-panier h1 { position: relative; max-width: calc(100% - 78px); }
.page-commander #contenu, .page-panier #contenu { position: relative; overflow: hidden; }
.page-commander #contenu::before, .page-panier #contenu::before { content: ""; position: absolute; top: 0; right: 0; width: 100px; height: 100px; background: radial-gradient(circle at 100% 0, var(--marron) 0 38px, var(--orange) 38.5px 58px, var(--moutarde) 58.5px 78px, var(--fond-2) 78.5px 98px, transparent 98.5px); }
.ck h2 { font-size: 1.4rem; }
.ck-grille { gap: 22px; }
.ck-resume { position: relative; padding: 22px 16px 14px; border-radius: 5px; overflow: hidden; }
.ck-resume::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; background: linear-gradient(to bottom, var(--orange) 0 3px, var(--moutarde) 3px 6px, var(--marron) 6px 9px); }
.ck-ligne img { width: 56px; height: 56px; border-radius: 3px; }
.ck-ligne small { color: var(--texte-doux); }
.ck-total strong { color: var(--orange-encre); }
.ck-totaux { border-top: 2px solid var(--marron); }
.ck-form { counter-reset: piste; }
.ck-form section { position: relative; }
.ck-form section:not(.ck-valider) h2::before { content: "Piste " counter(piste, decimal-leading-zero); counter-increment: piste; display: block; margin-bottom: 2px; font-family: var(--police-texte); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-encre); }
.formulaire input:not([type="checkbox"]):not(.piege), .formulaire textarea, .formulaire select, .ck-form input:not([type="checkbox"]), .ck-form select { min-height: 48px; border: 1.5px solid var(--bord); border-radius: 12px; background: var(--fond-3); }
.formulaire input:focus, .formulaire textarea:focus, .ck-form input:focus, .ck-form select:focus { border-color: var(--orange-bouton); outline: 2px solid var(--orange-bouton); outline-offset: 0; }
.ck-indisponible { border-radius: 12px; background: var(--fond-2); }
.ck-securite, .ck-note { color: var(--texte-doux); }
.ck-cgv input { accent-color: var(--orange-bouton); }
[data-payer] { min-height: 56px; font-size: 1rem; }
[data-payer]:disabled { opacity: 1; background: #8f6a45; box-shadow: 0 4px 0 #6d4c2c; }
.merci { position: relative; }
.merci::before { content: ""; display: block; width: 130px; height: 130px; margin: 0 auto 18px; border-radius: 50%; background: radial-gradient(circle, var(--fond) 0 3px, var(--moutarde) 3.5px 24px, transparent 24.5px), repeating-radial-gradient(circle, var(--sillon-a) 0 2px, var(--sillon-b) 2px 3px); }
.merci-note { color: var(--texte-doux); font-size: .92rem; }
.pied--caisse { margin-top: 0; }
.pied-court { display: flex; flex-wrap: wrap; gap: 0 16px; padding: 14px var(--gouttiere) 4px; border-top: 3px solid var(--marron); font-size: .86rem; }
.pied-court a { display: inline-flex; align-items: center; min-height: 44px; }

/* --------------------------------------- notes de pochette : textes légaux, FAQ */
.notes { margin: 0 auto; }
.notes-tete { margin: 0; }
.notes-tete h1 { max-width: calc(100% - 56px); }
.notes-tete h1.titre-long { font-size: clamp(1.6rem, 7.3vw, 4.4rem); }
.notes .legal { max-width: 820px; padding: 22px var(--gouttiere) 52px; }
.legal h2 { position: relative; margin-top: 1.8em; padding-left: 30px; font-size: 1.4rem; line-height: 1.2; }
.legal h2::before { content: ""; position: absolute; left: 0; top: .12em; width: 21px; height: 21px; border-radius: 50%; background: radial-gradient(circle, var(--fond) 0 1.6px, var(--moutarde) 2px 6px, transparent 6.5px), repeating-radial-gradient(circle, var(--sillon-a) 0 1.5px, var(--sillon-b) 1.5px 2.5px); }
.legal > h2:first-child { margin-top: 0; }
.legal h3 { font-family: var(--police-texte); font-weight: 700; font-size: 1rem; }
.legal-intro { color: var(--texte-doux); }
.legal li::marker { color: var(--orange); }
.legal th { background: var(--fond-2); font-weight: 700; }
.legal th, .legal td { border-color: var(--bord); }
.legal .tableau { border-radius: 8px; }
@media (max-width: 479px) { .legal table { font-size: .8rem; } .legal th, .legal td { padding: 8px 5px; } }
.encadre { position: relative; border: 0; border-left: 8px solid var(--moutarde); border-radius: 0 8px 8px 0; background: var(--fond-2); }
.faq { counter-reset: piste; }
.faq details { counter-increment: piste; padding: 0; border-bottom: 1px solid var(--bord); }
.faq summary { display: grid; grid-template-columns: 30px 1fr 24px; gap: 6px; align-items: center; min-height: 58px; padding: 10px 0; font-weight: 500; line-height: 1.3; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: counter(piste, decimal-leading-zero); font-size: .8rem; font-weight: 700; color: var(--orange-encre); }
.faq summary::after { content: "+"; font-family: var(--police-titre); font-size: 1.4rem; color: var(--orange-encre); text-align: right; }
.faq details[open] summary::after { content: "−"; }
.faq details div { padding: 0 0 12px 36px; }
.contact-grille h2 { padding-left: 0; margin-top: 0; }
.contact-grille h2::before { display: none; }
.contact-infos p { padding-bottom: 8px; border-bottom: 1px solid var(--bord); }
.contact-infos strong { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-encre); }
.bouton-secondaire { box-shadow: none !important; border-color: var(--marron) !important; }
.form-message.ok { color: #4f5016; font-weight: 500; }
.form-message.erreur { color: #8a1f12; font-weight: 500; }

/* ----------------------------------------------------------------- notre histoire */
.histoire-tete { margin: 0; }
.histoire-corps { max-width: 1320px; margin: 0 auto; padding: 22px var(--gouttiere) 46px; }
.histoire-pochette { position: relative; margin-bottom: 26px; }
.histoire-image { position: relative; z-index: 2; width: calc(100% - 26px); aspect-ratio: 1; overflow: hidden; border-radius: 5px; box-shadow: 4px 4px 0 rgba(90, 52, 23, .22); }
.histoire-image img { width: 100%; height: 100%; object-fit: cover; }
.histoire-disque { position: absolute; z-index: 1; top: 3%; right: 0; width: calc(94% - 26px); }
.histoire-chapo { font-family: var(--police-titre); font-size: 1.5rem; line-height: 1.24; }
.histoire-texte h2 { margin: 1.4em 0 .3em; font-size: 1.5rem; }

/* ------------------------------------------------------------------- le sillon 404 */
.sillon { max-width: 640px; margin: 0 auto; padding: 30px var(--gouttiere) 60px; }
.sillon-disque { width: min(68vw, 280px); margin: 0 0 22px; }
.sillon-disque .vinyle-tourne { animation-duration: 2.4s; animation-timing-function: steps(9, end); }
.sillon-actions { margin-top: 18px; }

/* --------------------------------------------------------------------- la recherche */
.recherche { background: var(--fond); padding-top: 22px; }
.recherche::before { content: ""; position: fixed; right: -120px; bottom: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, var(--fond) 0 5px, #eccb7c 5.5px 58px, transparent 58.5px), repeating-radial-gradient(circle, #efdcb8 0 2px, #e9d2a8 2px 3px); }
.recherche-barre, .recherche-resultats { position: relative; z-index: 1; }
.recherche-barre input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.recherche-barre input { min-height: 52px; border: 1.5px solid var(--marron); border-radius: 99px; padding: 0 20px; background: var(--fond-3); font-size: 16px; }
.recherche-barre button { width: 48px; height: 48px; padding: 0; color: var(--marron); }
.recherche-resultat { min-height: 76px; border-color: var(--bord); }
.recherche-resultat img { width: 60px; height: 60px; border-radius: 3px; }
.recherche-resultat strong { color: var(--orange-encre); }
.recherche-vide { padding: 18px 2px; font-family: var(--police-titre); font-size: 1.25rem; line-height: 1.25; }

/* Barre d'achat collée */
.barre-achat { background: var(--fond); border-top: 3px solid var(--marron); }
.barre-achat-texte span { font-weight: 500; }
.barre-achat-texte strong { color: var(--orange-encre); }
.barre-achat button { margin-bottom: 4px; }
/* Pas de transform ici : dans cette barre fixe, le bouton qui s'enfonce au toucher laissait le clic traverser vers la page. */
.barre-achat button:active { transform: none; box-shadow: 0 2px 0 var(--marron); }

/* --------------------------------------------------------------- le pied de page */
.arche { --b: clamp(9px, 2.4vw, 30px); height: clamp(176px, 31vw, 580px); margin-top: 20px; padding: var(--b) var(--b) 0; background: var(--marron); border-radius: 50% 50% 0 0 / 100% 100% 0 0; border-bottom: 6px solid var(--marron); overflow: hidden; }
.arche div { height: 100%; padding: var(--b) var(--b) 0; background: var(--orange); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.arche > div > div { background: var(--moutarde); }
.arche > div > div > div { background: var(--olive); }
.arche > div > div > div > div { display: flex; align-items: flex-end; justify-content: center; padding: 0; background: var(--fond); }
.arche span { font-family: var(--police-titre); font-size: calc((100vw - 8 * var(--b) - 10px) / 5.95); line-height: 1.12; color: var(--orange-bouton); white-space: nowrap; text-shadow: .022em .022em 0 var(--marron); }
.pied-corps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; max-width: 1320px; margin: 0 auto; padding: 28px var(--gouttiere) 22px; }
.pied-lettre { grid-column: 1 / -1; }
.pied-corps h2 { margin: 0 0 6px; font-size: 1.32rem; line-height: 1.15; }
.pied-lettre p { font-size: .94rem; }
.pied-corps nav:last-child { grid-column: 1 / -1; }
.pied-corps nav li a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; line-height: 1.2; text-decoration: none; font-size: .94rem; }
.pied-corps nav li a:hover { text-decoration: underline; }
.lettre { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin-top: 8px; }
.lettre input[type="email"] { min-height: 50px; min-width: 0; padding: 0 16px; border: 1.5px solid var(--marron); border-radius: 99px; background: var(--fond-3); font-size: 16px; }
.lettre button { min-height: 50px; padding: 0 16px; border: 0; border-radius: 99px; background: var(--orange-bouton); color: #fff; font-weight: 700; }
.lettre button:hover { background: var(--marron); }
.lettre .form-message, .lettre .newsletter-note { grid-column: 1 / -1; margin: 0; }
.lettre .newsletter-note { color: var(--texte-doux); }
.pied-legal { max-width: 1320px; margin: 0 auto; padding: 16px var(--gouttiere) calc(26px + env(safe-area-inset-bottom)); border-top: 1px solid var(--bord); color: var(--texte-doux); }
.pied-legal-coord { overflow-wrap: anywhere; }
.pied-legal a { color: var(--marron); }
.pied-legal .lien-retractation { display: inline-flex; align-items: center; min-height: 44px; }
.pied-legal-copy { font-family: var(--police-titre); font-size: 1rem; color: var(--marron); }

/* ===================================================================== tablette */
@media (min-width: 760px) {
  :root { --gouttiere: 28px; }
  .grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 18px; }
  .grille--bac .carte:nth-child(7n+1) { grid-column: auto; }
  .grille--album, .bac--collection .grille:not(.grille--trois) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .piste-nom small { display: block; }
  .tuile span { font-size: .84rem; left: 8px; bottom: 8px; }
  .tuile small { display: block; }
  .pied-corps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
  .pied-corps nav:last-child { grid-column: auto; }
  .lettre { max-width: 460px; }
  .credits dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; }
  .page-commander #contenu::before, .page-panier #contenu::before { width: 230px; height: 230px; background: radial-gradient(circle at 100% 0, var(--marron) 0 88px, var(--orange) 88.5px 134px, var(--moutarde) 134.5px 180px, var(--fond-2) 180.5px 226px, transparent 226.5px); }
}

/* ======================================================================= bureau */
@media (min-width: 900px) {
  :root { --gouttiere: 40px; }
  .entete { gap: 10px; padding: 8px 40px 14px; }
  .logo { width: 138px; }
  .entete-faces { gap: 8px; }
  .entete-faces a { display: flex; align-items: center; gap: 8px; width: auto; height: 44px; padding: 0 16px 0 5px; border-radius: 99px; font-weight: 500; }
  .entete-faces b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--fond); }
  .entete-faces span { display: inline; }
  .entete--caisse { padding-left: 40px; padding-right: 40px; }
  .menu { left: auto; width: 460px; padding: 30px 40px 36px; border-left: 6px solid var(--marron); transform: translateX(30px); }

  /* Le premier écran : la pochette à gauche, le disque qui sort à moitié */
  .une { --c: min(620px, calc(100vh - 150px), calc((100vw - 340px) / 1.47)); display: grid; grid-template-columns: calc(var(--c) * 1.47) minmax(0, 1fr); gap: 34px; align-items: center; max-width: 1320px; margin: 0 auto; padding: 18px var(--gouttiere) 34px; }
  .une-pochette { width: var(--c); }
  .une-disque { top: calc(var(--c) * .03); left: calc(var(--c) * .5); right: auto; width: calc(var(--c) * .94); }
  .une-texte { margin: 0; }
  .une-promesse { font-size: 1.32rem; }
  .une-credits { display: grid; gap: 4px; font-size: .92rem; }
  .une-bouton { min-height: 54px; padding: 0 30px; font-size: 1.08rem; }
  .une-sommaire { display: block; list-style: none; margin: 18px 0 0; padding: 12px 0 0; border-top: 2px solid var(--marron); }
  .une-sommaire a { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 40px; font-family: var(--police-titre); font-size: 1.14rem; text-decoration: none; }
  .une-sommaire a:hover { color: var(--orange-encre); }
  .une-sommaire span { font-family: var(--police-texte); font-size: .84rem; color: var(--texte-doux); }
  .une-macaron { font-size: .86rem; }
  .une-macaron strong { font-size: 1.2rem; }

  .faces { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; padding: 56px max(var(--gouttiere), calc((100vw - 1240px) / 2)) 60px; }
  .faces-platine { position: relative; top: auto; right: auto; width: auto; }
  .platine { margin-left: -6%; margin-right: 6%; }
  .platine-bras { display: block; position: absolute; top: -3%; right: -9%; width: 19%; transform-origin: 70% 8%; transform: rotate(-16deg); transition: transform .5s ease; }
  .faces:has(.piste a:hover) .platine-bras { transform: rotate(-4deg); }
  .faces-liste h2 { max-width: none; min-height: 0; }
  .piste a { grid-template-columns: 26px 60px minmax(0, 1fr) auto 42px; gap: 14px; }
  .piste-photo { width: 60px; height: 60px; }
  .piste-nom { font-size: 1rem; }
  .piste-prix { font-size: 1rem; }

  .coffret { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 72px; align-items: center; padding: 56px max(var(--gouttiere), calc((100vw - 1240px) / 2)) 64px; }
  .coffret-recto { margin: 0 0 34px; }
  .coffret-disques { right: -46px; bottom: -44px; width: 46%; }
  .coffret-etiquette { font-size: 1.5rem; }

  .motifs { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 50px; align-items: end; max-width: 1320px; margin: 0 auto; padding: 56px var(--gouttiere) 46px; }
  .motifs-tete { align-self: stretch; display: flex; flex-direction: column; }
  .motifs-liste { display: block; list-style: none; margin: auto 0 0; padding: 0; border-top: 2px solid var(--marron); }
  .motifs-liste a { display: flex; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--bord); font-family: var(--police-titre); font-size: 1.3rem; line-height: 1.2; text-decoration: none; transition: color .15s, padding .15s; }
  .motifs-liste a:hover { padding-left: 6px; color: var(--orange-encre); }
  .motifs-liste span { width: 24px; flex: none; font-family: var(--police-texte); font-size: .8rem; font-weight: 700; color: var(--orange-encre); }
  .motifs-liste small { margin-left: auto; font-family: var(--police-texte); font-size: .84rem; color: var(--texte-doux); }
  .mosaique { gap: 8px; }

  .credits { width: min(1240px, calc(100% - 80px)); margin: 0 auto 8px; }

  .bac-tete, .notes-tete, .histoire-tete { padding-top: 40px; padding-bottom: 34px; }
  .bac-tete { border-radius: 0 0 5px 5px; margin: 0; }
  .bac-outils { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 20px 0 22px; }
  .bac-filtres { margin: 0; padding: 2px; flex-wrap: wrap; }
  .bac-tri { gap: 18px; }
  .bac-voisines { margin: 0; padding: 12px 0 0; }

  .fiche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 74px; align-items: start; padding-top: 12px; }
  .recto { position: sticky; top: 92px; }
  .galerie-vues { position: static; gap: 8px; margin: 10px 0 0; }
  .galerie-vues button { width: 52px; height: 52px; border: 0; outline-offset: 1px; }
  .recto-pochette { width: calc(100% - 96px); }
  .recto-disque { width: calc(94% - 96px); }
  .recto-scene { margin-right: -46px; }
  .verso { margin-top: 34px; padding: 34px 34px 22px; }
  .verso h1 { font-size: 3.2rem; }
  .achat-bouton { max-width: 440px; }
  .album { padding-top: 34px; padding-bottom: 44px; }

  .tiroir { width: min(460px, 100%); }
  .ck-grille { gap: 44px; }
  .histoire-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 76px; align-items: start; padding-top: 40px; }
  .histoire-pochette { position: sticky; top: 100px; margin: 0; }
  .histoire-image { width: calc(100% - 96px); }
  .histoire-disque { width: calc(94% - 96px); }
  .histoire-chapo { font-size: 1.9rem; }
  .notes .legal { padding-top: 30px; }
  .notes-tete { padding-left: max(var(--gouttiere), calc((100% - 740px) / 2)); }
  .notes-tete h1 { max-width: min(740px, calc(100% - 290px)); }
  .notes-tete h1.titre-long { font-size: clamp(1.6rem, 4.6vw, 4.4rem); }
  .notes-tete .bac-chapo { max-width: min(740px, calc(100% - 290px)); padding-right: 0; }
  .sillon { display: grid; grid-template-columns: 340px minmax(0, 1fr); column-gap: 64px; align-content: center; max-width: 1000px; padding-top: 64px; padding-bottom: 72px; }
  .sillon > * { grid-column: 2; }
  .sillon-disque { grid-column: 1; grid-row: 1 / span 5; width: 100%; margin: 0; align-self: center; }
  .sillon h1 { margin-bottom: .3em; }
  .pied-court { padding-left: 40px; padding-right: 40px; }
}

@media (min-width: 1100px) {
  .pied-corps { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .pied-lettre { grid-column: auto; }
  .grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 22px; }
  .grille--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 30px; }
  .grille--bac { grid-auto-flow: dense; }
  .grille--bac .carte:first-child { grid-column: span 2; grid-row: span 2; }
  .grille--bac .carte:nth-child(14) { grid-column: 3 / span 2; grid-row: span 2; }
  .grille--bac .carte:first-child .carte-nom, .grille--bac .carte:nth-child(14) .carte-nom { font-size: 1.2rem; }
  .grille--bac .carte:first-child .carte-prix, .grille--bac .carte:nth-child(14) .carte-prix { font-size: 1.05rem; right: 12px; bottom: 12px; padding: 5px 16px; }
}