/* Touche Lestée — univers « clavier et partition ».
   Laque noire et portées en tête de page, bande de feutre rouge, clavier ivoire, papier à musique pour la lecture.
   Titres Fraunces, texte Literata, étiquettes IBM Plex Mono (Bunny Fonts). Boutons laiton, comme les pédales. */
:root {
  --laque: #141216;
  --ivoire: #f7f2e7;
  --papier: #fffdf7;
  --feutre: #8e2425;
  --laiton: #d9a93f;
  --laiton-fonce: #8a6416;
  --trait: #ddd3bf;
  --titre: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --portees: repeating-linear-gradient(to bottom, transparent 0 20px, rgba(247,242,231,.09) 20px 21px, transparent 21px 31px,
    rgba(247,242,231,.09) 31px 32px, transparent 32px 42px, rgba(247,242,231,.09) 42px 43px, transparent 43px 53px,
    rgba(247,242,231,.09) 53px 54px, transparent 54px 64px, rgba(247,242,231,.09) 64px 65px, transparent 65px 110px);
  --touches-noires: linear-gradient(90deg, transparent 17px, var(--laque) 17px 31px, transparent 31px 41px, var(--laque) 41px 55px,
    transparent 55px 89px, var(--laque) 89px 103px, transparent 103px 113px, var(--laque) 113px 127px, transparent 127px 137px,
    var(--laque) 137px 151px, transparent 151px);
  --touches-blanches: repeating-linear-gradient(90deg, transparent 0 23px, #b8ae99 23px 24px);
}
body { font-size: 19px; }
a { color: var(--feutre); text-underline-offset: 3px; }
h1, h2, h3, .logo, .produit-nom, .choix-nom, .quiz-titre, .quiz-verdict, .carte-nom, .proches h2, .groupe h2, .faq summary, .cartes a { font-family: var(--titre); }
h2 { font-size: 31px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.meta, .ariane, .produit-cat, .produit-choix, .choix-label, .produit-specs dt, .quiz legend, .carte-label, .sommaire-lateral p,
.avertissement, .produit-source, .barre-choix span, .filtres button, thead th, .largeurs figcaption, .largeur strong { font-family: var(--mono); }

/* En-tête : laque noire, logo en deux touches posées sur le feutre */
.entete { background: var(--laque); border: 0; padding: 14px 0; }
.entete .conteneur, main.conteneur, .pied .conteneur { max-width: 1120px; }
.entete .logo { color: var(--ivoire); font-weight: 800; font-size: 23px; }
.logo::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 10px; vertical-align: -2px;
  background: linear-gradient(90deg, var(--ivoire) 0 44%, transparent 44% 56%, var(--ivoire) 56%); border-bottom: 3px solid var(--feutre); }
.entete nav a { color: #cfc8b8; font-family: var(--mono); font-size: 14px; }
.entete nav a:hover { color: var(--laiton); }

/* Tête de page : laque et portées, puis feutre rouge et clavier */
.hero { color: var(--ivoire); background-color: var(--laque); background-image: var(--portees); }
.hero-in { max-width: 1120px; margin: 0 auto; padding: 20px 16px 36px; }
.hero h1 { font-size: clamp(34px, 6vw, 58px); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; max-width: 18ch; margin: 18px 0; }
.hero .ariane ol { margin: 0; color: rgba(247,242,231,.72); }
.hero .ariane a, .hero .meta a { color: inherit; }
.hero .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: rgba(247,242,231,.85); margin: 0; }
.auteur { display: inline-flex; align-items: center; gap: 8px; }
.feutre { height: 6px; background: var(--feutre); }
.clavier-bande { height: 36px; background-color: var(--ivoire); background-image: var(--touches-noires), var(--touches-blanches);
  background-size: 168px 58%, auto; background-repeat: repeat-x; }
.hero-intro p { font-size: 20px; max-width: 46ch; }
.hero-intro a { color: var(--laiton); }

/* Accueil : deux octaves qui jouent une mélodie */
.hero-grille { display: grid; gap: 24px; align-items: center; }
.piano { width: 100%; max-width: 300px; justify-self: center; }
.piano .blanche { fill: var(--ivoire); stroke: var(--laque); stroke-width: 2; }
.piano .noire { fill: #000; }
.piano .joue { animation: appui 4.8s infinite; }
.piano .j2 { animation-delay: .6s; } .piano .j3 { animation-delay: 1.2s; } .piano .j4 { animation-delay: 1.8s; }
.piano .j5 { animation-delay: 2.4s; } .piano .j6 { animation-delay: 3s; }
@keyframes appui { 0%, 8% { fill: var(--ivoire); } 10%, 18% { fill: var(--laiton); } 20%, 100% { fill: var(--ivoire); } }
@media (prefers-reduced-motion: reduce) { .piano .joue { animation: none; } }
@media (min-width: 900px) { .hero-grille { grid-template-columns: 1fr 320px; } }

/* Mise en page : lecture + colonne collante sur grand écran */
.mise-en-page { display: grid; gap: 48px; margin-top: 8px; }
.mise-en-page > article { min-width: 0; }
.colonne { display: none; }
@media (min-width: 1040px) {
  .mise-en-page { grid-template-columns: minmax(0, 720px) 300px; justify-content: space-between; }
  .colonne { display: block; }
  .colonne-in { position: sticky; top: 24px; display: grid; gap: 24px; padding-top: 24px; }
  .mobile-seul { display: none; }
}
.carte-choix { background: var(--papier); border: 1px solid var(--trait); border-top: 6px solid var(--laque); border-radius: 6px 6px 14px 14px; padding: 16px; }
.carte-choix p { margin: 0 0 8px; }
.carte-label { display: inline-block; color: var(--feutre); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.carte-nom { font-size: 25px; font-weight: 800; line-height: 1.1; }
.carte-pourqui { font-size: 16px; }
.carte-choix .bouton { display: block; text-align: center; }
.sommaire-lateral p { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #5d5a55; margin: 0 0 8px; }
.sommaire-lateral ol { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.5; }
.sommaire-lateral li { margin-bottom: 6px; }

/* Boutons laiton, comme les pédales */
.bouton { background: var(--laiton); color: var(--laque); border: 2px solid var(--laque); border-radius: 999px; padding: 10px 22px;
  box-shadow: 0 3px 0 var(--laiton-fonce); font-family: var(--titre); font-weight: 700; transition: transform .08s, box-shadow .08s; }
.bouton:hover { filter: none; transform: translateY(-1px); box-shadow: 0 4px 0 var(--laiton-fonce); }
.bouton:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--laiton-fonce); }

.avertissement { font-size: 13px; background: transparent; border: 1px dashed #c4b9a2; border-radius: 6px; color: #4b4842; }
.sommaire { background: var(--papier); border: 1px solid var(--trait); border-radius: 10px; }

/* Choix rapide : partitions posées sur le pupitre */
.choix { gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choix-carte { background: var(--papier); border: 1px solid var(--trait); border-top: 6px solid var(--laque); border-radius: 4px 4px 12px 12px; padding: 14px; }
.choix-label { color: var(--feutre); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.choix-nom { font-size: 20px; line-height: 1.15; }
.choix-nom a { color: var(--laque); }
.choix-pourqui { font-size: 15px; color: #4b4842; }

/* Fiches produit : couvercle laqué, numéro en italique, caractéristiques en portée */
.produit { background: var(--papier); border: 1px solid var(--trait); border-top: 8px solid var(--laque); border-radius: 6px 6px 16px 16px;
  padding: 26px 20px 18px; margin: 44px 0; }
.produit-rang { top: -24px; left: 18px; background: var(--laque); color: var(--ivoire); border: 2px solid var(--laiton);
  font-family: var(--titre); font-style: italic; font-size: 20px; padding: 2px 14px; }
.produit-choix { color: var(--feutre); font-size: 12px; letter-spacing: .08em; }
.produit-nom { font-size: 30px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.produit-cat { background: var(--laque); color: var(--ivoire); font-size: 11px; padding: 3px 8px; border-radius: 999px; letter-spacing: .06em; }
.produit-specs { gap: 0; border-top: 1px solid var(--laque); border-bottom: 1px solid var(--laque); background: transparent; margin: 14px 0; }
.produit-specs div { padding: 8px 10px; border-bottom: 1px solid var(--trait); }
.produit-specs dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #5d5a55; }
.plus li::marker { color: #2e6b3a; }
.moins li::marker { color: var(--feutre); }

/* L'avis d'Alma : annotation au crayon sur la partition */
blockquote { position: relative; background: var(--papier); border: 0; border-left: 3px solid var(--feutre); border-radius: 0 10px 10px 0;
  padding: 16px 20px 14px 24px; margin: 32px 0; font-family: var(--titre); font-style: italic; font-size: 19px; }
blockquote::before { content: "♪"; position: absolute; left: -13px; top: 10px; width: 22px; text-align: center; background: var(--fond);
  color: var(--feutre); font-style: normal; font-size: 20px; }
blockquote strong:first-child { font-style: normal; }

/* Quiz : sur la laque, une question à la fois */
.quiz { color: var(--ivoire); border: 0; border-radius: 16px; padding: 22px; background-color: var(--laque); background-image: var(--portees); }
.quiz-titre { font-size: 25px; font-weight: 800; }
.quiz-progres { background: rgba(247,242,231,.18); height: 6px; }
.quiz-progres span { background: var(--laiton); }
.quiz legend { color: var(--laiton); font-size: 13px; margin-bottom: 10px; }
.quiz label { display: flex; gap: 12px; align-items: center; border: 1.5px solid rgba(247,242,231,.35); border-radius: 999px;
  padding: 10px 16px; margin-bottom: 10px; font-size: 17px; }
.quiz label:hover { border-color: var(--laiton); }
.quiz input { accent-color: var(--laiton); width: 18px; height: 18px; flex-shrink: 0; }
.quiz-resultat { border-top: 0; margin-top: 0; padding-top: 0; }
.quiz-verdict { font-size: 23px; }
.quiz-resultat a:not(.bouton) { color: var(--laiton); }

/* Tableau et filtres */
.tableau { border: 1px solid var(--trait); border-radius: 12px; background: var(--papier); }
thead th { background: var(--laque); color: var(--ivoire); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
tbody tr:hover { background: var(--ivoire); }
tbody th a { color: var(--laque); font-family: var(--titre); font-weight: 700; }
.filtres button { border: 1.5px solid var(--laque); color: var(--laque); font-size: 13px; }
.filtres button[aria-pressed="true"] { background: var(--laiton); color: var(--laque); }

/* Schéma signature : chaque piano dessiné en clavier, à l'échelle de sa largeur */
.largeurs { background: var(--papier); border: 1px solid var(--trait); border-radius: 12px; padding: 16px; }
.largeur-nom { font-family: var(--titre); font-weight: 700; font-size: 15px; }
.largeur-barre { height: 30px; border-radius: 3px; border: 1.5px solid var(--laque); border-bottom: 4px solid var(--feutre);
  background-color: var(--ivoire); background-image: var(--touches-noires), var(--touches-blanches);
  background-size: 56px 58%, auto; background-repeat: repeat-x; }
.largeur-barre { --touches-noires: linear-gradient(90deg, transparent 5.7px, var(--laque) 5.7px 10.3px, transparent 10.3px 13.7px,
  var(--laque) 13.7px 18.3px, transparent 18.3px 29.7px, var(--laque) 29.7px 34.3px, transparent 34.3px 37.7px, var(--laque) 37.7px 42.3px,
  transparent 42.3px 45.7px, var(--laque) 45.7px 50.3px, transparent 50.3px);
  --touches-blanches: repeating-linear-gradient(90deg, transparent 0 7px, #b8ae99 7px 8px); }

.faq details { border-bottom: 1px solid var(--trait); }
.proches, .cartes li { background: var(--papier); border: 1px solid var(--trait); border-top: 5px solid var(--laque); border-radius: 6px 6px 12px 12px; }
.cartes a { color: var(--laque); }
.barre-choix { background: var(--laque); color: var(--ivoire); border: 0; }
.pied { background: var(--laque); color: #bdb7a9; border: 0; }
.pied .mention { color: var(--ivoire); }