/* hodari.css — éléments communs aux pages de Hodari (accueil, parolier…)
   ============================================================================
   Les jetons (couleurs, polices) viennent de shared.css ; rien n'est écrit en
   dur ici sauf le troisième point du dégradé (#783a38), déjà utilisé tel quel
   par accueil.html, login.html et le hero de shared.css. */

/* ── Accueil Hodari ── */
body.yk-home-page {
  background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 50%, var(--g3) 100%);
  min-height: 100vh;
}
/* Thème clair (fond jaune) : textes bruns ; thème sombre (fond rouge) : textes blancs (valeurs par défaut) */
body.yk-home-page:not(.yk-dark) .yk-home,
body.yk-home-page:not(.yk-dark) .yk-hero h1,
body.yk-home-page:not(.yk-dark) .yk-social a,
body.yk-home-page:not(.yk-dark) .yk-home h2,
body.yk-home-page:not(.yk-dark) .yk-home h3,
body.yk-home-page:not(.yk-dark) .yk-alb,
body.yk-home-page:not(.yk-dark) .yk-alb span,
body.yk-home-page:not(.yk-dark) .yk-alb small,
body.yk-home-page:not(.yk-dark) .yk-last-t strong,
body.yk-home-page:not(.yk-dark) .yk-last-t small { color: var(--yk-brown); }
body.yk-home-page:not(.yk-dark) .yk-tagline { color: var(--yk-b80); }
body.yk-home-page:not(.yk-dark) .yk-sec-t { color: var(--yk-b65); }
body.yk-home-page:not(.yk-dark) .yk-plat { color: var(--yk-brown); }
body.yk-home-page:not(.yk-dark) .yk-last { background: var(--yk-w55); border-color: var(--yk-b20); color: var(--yk-brown); }
/* Bouton clair / sombre (même gabarit que dans le parolier et l'audiothèque) */
body.yk-home-page .yk-theme-toggle { flex-shrink: 0; background: none; border: 1px solid var(--yk-w22); border-radius: 50%; width: 30px; height: 30px; color: var(--yk-w90); cursor: pointer; font-size: 0.95rem; transition: border-color 0.15s, color 0.15s, background 0.15s; }
body.yk-home-page .yk-theme-toggle:hover { color: var(--white); border-color: var(--yk-w55); background: var(--yk-w08); }
@supports (min-height: 100svh) {
  body.yk-home-page { min-height: 100svh; }
  html:has(body.yk-home-page) { background: var(--navy); }
}
.yk-home {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: 560px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  color: var(--white);
}
.yk-hero { text-align: center; }
/* Logo losange sur fond transparent : drop-shadow (suit la forme), pas box-shadow */
.yk-hero-logo {
  width: 96px; height: 96px;
  margin-bottom: 1.1rem;
  filter: drop-shadow(0 8px 16px var(--yk-k30));
}
.yk-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0 0 0.4rem;
  color: var(--white);
}
.yk-tagline { margin: 0; color: var(--yk-w75); font-size: 0.95rem; }

/* Icônes de réseaux : directement sur le fond, sans pastille ni cercle */
.yk-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem; margin-top: 1.3rem; }
.yk-social a { color: var(--white); display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; border-radius: 8px; opacity: 0.92; transition: opacity 0.15s, transform 0.15s; }
.yk-social a:hover, .yk-social a:focus-visible { opacity: 1; transform: translateY(-1px); }
.yk-social a[hidden] { display: none; }
.yk-ico { width: 1.7rem; height: 1.7rem; fill: currentColor; }
/* Les glyphes n'occupent pas la même part de leur carré de 24 : taille ajustée pour un poids visuel égal, centres alignés. */
.yk-social [data-k="yt"] .yk-ico { width: 1.95rem; height: 1.95rem; }
.yk-social [data-k="ig"] .yk-ico, .yk-social [data-k="fb"] .yk-ico { width: 1.6rem; height: 1.6rem; }
.yk-social [data-k="mail"] .yk-ico { width: 1.85rem; height: 1.85rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }   /* enveloppe au trait */

/* Cartes « en verre », comme les outils de accueil.html */
.yk-cards { display: flex; flex-direction: column; gap: 0.85rem; }
.yk-card-link {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.1rem 1.4rem; border-radius: 14px;
  background: var(--yk-w08); border: 1px solid var(--yk-w15);
  color: var(--white); text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
/* Survol identique aux cartes d'outils de accueil.html : fond et bordure plus clairs, léger soulèvement, flèche qui avance. */
.yk-card-link:hover, .yk-card-link:focus-visible { background: var(--yk-w15); border-color: var(--yk-w30); transform: translateY(-2px); }
.yk-card-link strong { display: block; font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.2; }
.yk-card-sub { display: block; font-size: 0.8rem; line-height: 1.25; margin-top: 0.15rem; color: var(--yk-w75); }
.yk-card-icon { font-size: 1.7rem; width: 2.3rem; text-align: center; flex-shrink: 0; }
.yk-card-primary { background: var(--white); color: var(--navy); border-color: var(--white); }
.yk-card-primary:hover, .yk-card-primary:focus-visible { background: var(--surface); border-color: var(--white); transform: translateY(-2px); }
.yk-card-primary .yk-card-sub { color: var(--text-2); }

/* ── Accueil : deux colonnes sur ordinateur (comme la maquette), une colonne sous 820 px ── */
.yk-cols { display: flex; flex-direction: column; gap: 1.6rem; }
.yk-col { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
@media (min-width: 820px) {
  .yk-home { max-width: 1040px; padding-inline: 2.5rem; }
  .yk-cols { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 2.2rem; align-items: start; }
}
.yk-sec { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.yk-sec[hidden] { display: none; }
.yk-sec-t { margin: 0; font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--yk-w55); }

/* Où trouver notre musique : boutons en grille */
.yk-where { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; }
.yk-plat { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; padding: 0.4rem 0.2rem; border: 0; background: none; color: var(--white); text-decoration: none; font-size: 0.74rem; font-weight: 600; text-align: center; line-height: 1.2; }
.yk-plat svg { width: 1.45rem; height: 1.45rem; }
/* Survol : seule la pastille (logo + cercle) réagit ; le nom reste fixe */
.yk-plat:hover .yk-pl, .yk-plat:focus-visible .yk-pl { transform: translateY(-2px) scale(1.08); box-shadow: 0 3px 10px var(--yk-k30); }
@media (hover: none) { .yk-plat:hover .yk-pl { transform: none; } }

/* Tous les albums : bande défilante sur mobile, grille sur ordinateur */
.yk-rail { display: flex; gap: 0.7rem; overflow-x: auto; margin: 0 -1.5rem; padding: 0.35rem 1.5rem 0.4rem; margin-top: -0.35rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.yk-rail::-webkit-scrollbar { display: none; }
.yk-alb { flex: 0 0 6.2rem; width: 6.2rem; color: var(--yk-w90); text-decoration: none; font-size: 0.74rem; line-height: 1.25; transition: transform 0.15s; }
.yk-alb img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; margin-bottom: 0.35rem; background: var(--yk-w15); box-shadow: 0 4px 14px var(--yk-k20); }
.yk-alb span { display: block; font-weight: 600; }
.yk-alb small { display: block; opacity: 0.65; font-size: 0.68rem; }
.yk-alb:hover, .yk-alb:focus-visible { transform: translateY(-2px); }
.yk-alb, .yk-alb:hover, .yk-alb:focus-visible, .yk-alb:hover span { text-decoration: none; }
.yk-alb img { -webkit-user-drag: none; user-select: none; }
@media (min-width: 820px) {
  .yk-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; overflow: visible; margin: 0; padding: 0; }
  .yk-alb { width: auto; flex: none; font-size: 0.8rem; }
}

.yk-rail.yk-grab { cursor: grabbing; user-select: none; }
@media (max-width: 819px) { .yk-rail:not(.yk-grab) { cursor: grab; } }

.yk-card-icon svg.yk-fill { fill: currentColor; stroke: none; }
.yk-card-icon svg { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; display: block; margin: 0 auto; }

/* Fondu sur les bords de la bande (mobile) */
.yk-rail { -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent var(--lo, 0px), #000 calc(var(--lo, 0px) + var(--fl, 0px)), #000 calc(100% - var(--ro, 0px) - var(--fr, 0px)), transparent calc(100% - var(--ro, 0px)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, transparent var(--lo, 0px), #000 calc(var(--lo, 0px) + var(--fl, 0px)), #000 calc(100% - var(--ro, 0px) - var(--fr, 0px)), transparent calc(100% - var(--ro, 0px)), transparent 100%); }
@media (min-width: 820px) { .yk-rail { -webkit-mask-image: none; mask-image: none; } }

.yk-card-icon svg.yk-fill { width: 1.7rem; height: 1.7rem; }

/* Dernier titre sorti */
.yk-last { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 0.8rem 0.6rem 0.6rem; border-radius: 14px; background: var(--yk-w08); border: 1px solid var(--yk-w15); color: var(--white); text-decoration: none; transition: background 0.2s, border-color 0.2s, transform 0.15s; }
.yk-last:hover, .yk-last:focus-visible { background: var(--yk-w15); border-color: var(--yk-w40); transform: translateY(-2px); }
.yk-last img { width: 3.6rem; height: 3.6rem; border-radius: 9px; object-fit: cover; flex: none; background: var(--yk-w15); }
.yk-last-t { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.yk-last-t strong { font-family: var(--font-serif, Georgia, serif); font-size: 1rem; line-height: 1.2; overflow-wrap: anywhere; }
.yk-last-t small { font-size: 0.74rem; opacity: 0.75; line-height: 1.3; }
.yk-last-p { width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--white); color: var(--yk-dk-card); display: grid; place-items: center; flex: none; }
.yk-last-p svg { width: 1.2rem; height: 1.2rem; }
body.yk-home-page:not(.yk-dark) .yk-last-p { background: var(--yk-brown); color: var(--yk-yellow); }

/* Où trouver notre musique : logo en couleur dans un rond blanc */
.yk-plat .yk-pl { transition: transform 0.15s, box-shadow 0.15s; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--white); display: grid; place-items: center; box-shadow: 0 1px 4px var(--yk-k20); }
.yk-plat .yk-pl svg { width: 1.4rem; height: 1.4rem; }

/* ── Chargement de l'accueil ──
   La barre du haut, le pied de page et le fond s'affichent tout de suite ; le contenu (.yk-home) est
   transparent jusqu'à ce que hodari/js/hodari-home.js pose body.yk-ready, puis apparaît en fondu. Si cela dépasse 0,45 s,
   un cercle de chargement (sans logo) apparaît au centre, sous la barre du haut. */
body.yk-home-page .yk-home { transition: opacity .45s ease; }
body.yk-home-page:not(.yk-ready) .yk-home { opacity: 0; }
.yk-loading{position:fixed;inset:0;z-index:250;display:grid;place-items:center;pointer-events:none;visibility:hidden;transition:opacity .3s ease}
.yk-loading.show{visibility:visible}
.yk-loading.fade-out{opacity:0}
.yk-load-ring{width:40px;height:40px;border-radius:50%;border:3px solid var(--yk-b20);border-top-color:var(--yk-brown);animation:yk-spin .9s linear infinite}
body.yk-dark .yk-load-ring{border-color:var(--yk-w22);border-top-color:var(--white)}
@keyframes yk-load-show{to{visibility:visible}}
@keyframes yk-spin{to{transform:rotate(360deg)}}
.yk-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.yk-loading,body.yk-home-page .yk-home{transition:none}.yk-load-ring{animation:none;opacity:.6}}

/* ── Barre du haut : marque à gauche (titre « Hodari » toujours affiché), pages à droite, puis bouton de thème ── */
.topbar .topbar-title { display: block; }
.yk-topnav { display: flex; align-items: center; gap: 0.2rem; flex-shrink: 0; }
.yk-topnav a, .yk-topnav .current { font-size: 0.78rem; padding: 0.25rem 0.7rem; border-radius: 20px; border: 1px solid transparent; white-space: nowrap; }
.yk-topnav a { color: var(--yk-w75); text-decoration: none; transition: color 0.15s, border-color 0.15s, background 0.15s; }
@media (hover: hover) { .yk-topnav a:hover { color: var(--white); border-color: var(--yk-w30); background: var(--yk-w08); } }
.yk-topnav .current { color: var(--navy); background: var(--white); border-color: var(--white); font-weight: 700; cursor: default; }
@media (max-width: 720px) {
  .topbar { gap: 0.5rem; padding: 0 0.7rem; }
  .topbar .topbar-title { font-size: 0.8rem; letter-spacing: 0.06em; }
  .topbar .topbar-title span { display: none; }       /* « Guides et Scouts d'Europe » masqué : on garde « Hodari » */
  .yk-topnav { gap: 0; }
  .yk-topnav a, .yk-topnav .current { font-size: 0.72rem; padding: 0.22rem 0.5rem; }
}
@media (max-width: 440px) {
  .topbar { gap: 0.35rem; padding: 0 0.5rem; }
  .topbar .topbar-logo { width: 30px; height: 30px; }
  .topbar .topbar-title { font-size: 0.74rem; letter-spacing: 0.04em; }
  .yk-topnav a, .yk-topnav .current { font-size: 0.64rem; padding: 0.15rem 0.28rem; }
  .yk-theme-toggle { width: 26px !important; height: 26px !important; font-size: 0.8rem !important; }
}
/* Recherche compacte du parolier : elle remplace le menu des pages et le bouton de thème tant qu'elle est visible */
@media (max-width: 1150px) {
  .yk-topbar-search { left: auto; right: 1.2rem; transform: none; margin-top: -18px; width: min(400px, calc(100vw - 340px)); }
  .yk-topbar-search.visible ~ .yk-topnav, .yk-topbar-search.visible ~ .yk-theme-toggle { display: none; }
}
@media (max-width: 720px) { .yk-topbar-search { right: 0.7rem; width: min(400px, calc(100vw - 200px)); } }

/* ── Pied de page Hodari : logo AGSE toujours centré ── */
html .footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; text-align: center; }
html .footer .footer-brand { grid-column: 2; justify-self: center; }



/* Fond de la languette et du bouton « Réduire » du lecteur agrandi (écran étroit) : même dégradé, accroché à l'écran */
@media (max-width: 720px) {
  body .ykp-grab, body .ykp-fl-top { background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 50%, var(--g3) 100%) fixed; margin-inline: -0.9rem; padding-inline: 0.9rem; }
  body:not(.yk-dark) .ykp-grab::after { background: var(--yk-b35); }
}

html.yk-fading, html.yk-fading *, html.yk-fading *::before, html.yk-fading *::after {
  transition: --g1 .3s, --g2 .3s, --g3 .3s, background-color .3s, color .3s, border-color .3s, fill .3s, stroke .3s, box-shadow .3s !important;
}
html.yk-fading .ykp, html.yk-fading .yk-rail, html.yk-fading .yk-alb { transition: none !important; }

/* Zone de recherche du parolier */
.yk-search-zone { background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 50%, var(--g3) 100%); }
body:not(.yk-dark) .yk-search-zone { color: var(--yk-brown); }
body:not(.yk-dark) .yk-search-zone .btn-adv { background: var(--yk-w40); border-color: var(--yk-b35); color: var(--yk-brown); }
body:not(.yk-dark) .yk-search-zone .btn-adv:hover { background: var(--yk-w75); border-color: var(--yk-b50); }
body:not(.yk-dark) .yk-search-zone .btn-adv.active { background: var(--yk-brown); color: var(--white); }
body:not(.yk-dark) .yk-recueil-filter { border-color: var(--yk-b35); background: var(--yk-w40); color: var(--yk-brown); }
body:not(.yk-dark) .yk-recueil-filter:hover { border-color: var(--yk-b65); }
body:not(.yk-dark) .yk-search-zone .filter-badge { background: var(--yk-w55); border-color: var(--yk-b35); color: var(--yk-brown); }
body:not(.yk-dark) .yk-search-zone .filter-badge-rm { color: var(--yk-b65); }
body:not(.yk-dark) .yk-search-zone .search-toggle { color: var(--yk-b80); }
body:not(.yk-dark) .yk-search-zone .search-toggle:hover { color: var(--yk-brown); }
body:not(.yk-dark) .yk-search-zone .btn-reset-filters { color: var(--yk-b80); border-color: var(--yk-b35); }   /* « Réinitialiser » : blanc illisible sur le fond clair */
body:not(.yk-dark) .yk-search-zone .btn-reset-filters:hover { color: var(--yk-brown); border-color: var(--yk-b50); }

/* Lecteur de l'audiothèque : dégradé du thème ; en thème clair (jaune) les éléments blancs passent en brun */
body .ykp { background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 50%, var(--g3) 100%); }
body:not(.yk-dark) .ykp { color: var(--yk-brown); box-shadow: 0 -6px 22px var(--yk-b20); }
body:not(.yk-dark) .ykp button:focus-visible, body:not(.yk-dark) .ykp a:focus-visible, body:not(.yk-dark) .ykp input:focus-visible { outline-color: var(--yk-brown); }
body:not(.yk-dark) .ykp-sub a, body:not(.yk-dark) .ykp-hsub a { color: var(--yk-brown); }
body:not(.yk-dark) .ykp-b { color: var(--yk-brown); }
@media (hover: hover) { body:not(.yk-dark) .ykp-b:hover:not(:disabled) { background: var(--yk-b08); } }
body:not(.yk-dark) .ykp-b[aria-pressed="true"] { color: var(--yk-brand); background: var(--yk-brand-16); }
body:not(.yk-dark) .ykp-main { background: var(--yk-brown); color: var(--yk-yellow); }
@media (hover: hover) { body:not(.yk-dark) .ykp-main:hover:not(:disabled) { background: var(--yk-brown-2); } }
body:not(.yk-dark) .ykp-range::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--yk-brown) var(--p, 0%), var(--yk-b20) var(--p, 0%)); }
body:not(.yk-dark) .ykp-range::-moz-range-track { background: var(--yk-b20); }
body:not(.yk-dark) .ykp-range::-moz-range-progress { background: var(--yk-brown); }
body:not(.yk-dark) .ykp-range::-webkit-slider-thumb, body:not(.yk-dark) .ykp-range::-moz-range-thumb { background: var(--yk-brown); }
body:not(.yk-dark) .ykp-qi { color: var(--yk-brown); }
@media (hover: hover) { body:not(.yk-dark) .ykp-qi:hover { background: var(--yk-b08); } }
body:not(.yk-dark) .ykp-qi.on { background: var(--yk-brand-16); }
body:not(.yk-dark) .ykp-tabs { border-bottom-color: var(--yk-b20); }
body:not(.yk-dark) .ykp-tabs button { color: var(--yk-b65); }
body:not(.yk-dark) .ykp-tabs button:hover, body:not(.yk-dark) .ykp-tabs button[aria-selected="true"] { color: var(--yk-brown); }
body:not(.yk-dark) .ykp-tabs button[aria-selected="true"] { border-bottom-color: var(--yk-brand); }
body:not(.yk-dark) .ykp-ytl { background: var(--yk-w40); color: var(--yk-brown); border-color: var(--yk-b35); }
@media (hover: hover) { body:not(.yk-dark) .ykp-ytl:hover { background: var(--yk-w75); } }
body:not(.yk-dark) .ykp-queue { background: var(--yk-b08); }

/* Pastille Ferao sélectionnée (parolier) : jaune doré plus clair que le brun d'origine, identique en clair et en sombre */
body .yk-recueil-filter[data-recueil="ferao"].active { background: var(--yk-ferao); border-color: var(--yk-ferao); color: var(--white); }

/* ── Boîte à outils et boutique (hodari/outils.html, boutique.html) ──
   Même fond et mêmes jetons que l'accueil ; thème clair : textes bruns (#491514), thème sombre : blancs. */
.yk-sub { max-width: 760px; }
.yk-sub .yk-hero h1 { margin-bottom: 0.5rem; }
.yk-sub-empty { text-align: center; opacity: 0.8; margin: 1.5rem 0; }
/* Barre de recherche : MÊME rendu que le parolier et l'audiothèque (copie de .search-input de style.css, .yk-search-wrap et
   .yk-search-clear de visiteur.css, sans loupe). À fusionner avec eux lors de la scission de style.css. */
.yk-find { position: relative; }
.yk-find input { width: 100%; box-sizing: border-box; padding: 0.65rem 2.6rem 0.65rem 1rem; border: 2px solid transparent; border-radius: 40px; font-family: var(--font-sans); font-size: var(--fs-lg); background: var(--white); color: var(--text); outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.yk-find input:focus { border-color: var(--lavender3); box-shadow: 0 0 0 3px var(--yk-ring); }
.yk-find .yk-search-clear { position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 0.9rem; padding: 4px; z-index: 2; }
.yk-find .yk-search-clear:hover { color: var(--navy); }
.yk-find .yk-search-clear[hidden] { display: none; }
#yk-fiches { display: flex; flex-direction: column; gap: 1.5rem; }
#yk-fiches .yk-sec { display: flex; flex-direction: column; gap: 0.6rem; }
.yk-fiches-list { display: flex; flex-direction: column; gap: 0.45rem; }
.yk-fiche { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 1rem; border-radius: 12px; text-decoration: none; color: var(--white); background: var(--yk-w08); border: 1px solid var(--yk-w22); transition: background 0.15s, border-color 0.15s; -webkit-tap-highlight-color: transparent; }
/* Pas de décalage (transform) au survol : le bord de la carte bougeait sous le pointeur et le clic tombait à côté (cartes « capricieuses »). Survol réservé à la souris : sur écran tactile il collait après un appui. */
.yk-fiche:has(:focus-visible) { background: var(--yk-w22); border-color: var(--yk-w40); }   /* :focus-visible (clavier) et non :focus-within : après fermeture de la fiche, le focus revient sur la carte et la laissait « activée » */
@media (hover: hover) { .yk-fiche:hover { background: var(--yk-w22); border-color: var(--yk-w40); } }
.yk-fiche { position: relative; cursor: pointer; }
.yk-fiche-main { color: inherit; text-decoration: none; }
.yk-fiche-main:focus-visible { outline: none; }
.yk-fiche-main::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 12px; }   /* toute la carte ouvre la fiche */
.yk-fiche-t a.yk-song-link { position: relative; z-index: 2; color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.yk-fiche-t a.yk-song-link:hover, .yk-fiche-t a.yk-song-link:focus-visible { text-decoration-thickness: 2px; outline: none; }
.yk-fiche-ico svg { width: 1.6rem; height: 1.6rem; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.yk-fiche-t { min-width: 0; }
.yk-fiche-t strong { display: block; font-family: var(--font-serif); font-size: 1rem; line-height: 1.25; }
.yk-fiche-t small { position: relative; z-index: 2;   /* (opacité = contexte d'empilement) : les liens de chants restent cliquables ; un clic sur la description est repris par le script (outils.js) */
   display: block; font-size: 0.78rem; line-height: 1.3; opacity: 0.82; margin-top: 0.15rem; }
body.yk-home-page:not(.yk-dark) .yk-fiche { color: var(--yk-brown); background: var(--yk-w55); border-color: var(--yk-b20); }
body.yk-home-page:not(.yk-dark) .yk-fiche:has(:focus-visible) { background: var(--yk-w90); border-color: var(--yk-b50); }
@media (hover: hover) { body.yk-home-page:not(.yk-dark) .yk-fiche:hover { background: var(--yk-w90); border-color: var(--yk-b50); } }
/* Boutique : une vignette carrée par article (l'image est mise en valeur), titre dessous ; le détail s'ouvre dans une fenêtre */
.yk-shop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1rem; }
@media (min-width: 760px) { .yk-shop { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem 1.4rem; } }
.yk-shop .yk-sub-empty { grid-column: 1 / -1; }
.yk-prod { display: flex; flex-direction: column; align-items: stretch; gap: 0.7rem; color: inherit; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.yk-prod:focus-visible { outline: none; }
/* Cartes de hauteurs différentes : sur une même ligne, les images sont centrées sur le même axe horizontal et les titres alignés en haut
   (ligne de titres commune) ; chaque article occupe deux rangées de la grille (image, titre) par sous-grille. Sans sous-grille : colonne simple. */
@supports (grid-template-rows: subgrid) {
  .yk-shop { row-gap: 0; }
  .yk-prod { display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: 0; }
  .yk-prod-pic { align-self: center; }
  .yk-prod-t { align-self: start; margin-top: 0.7rem; padding-bottom: 1.4rem; }
}
@media (min-width: 760px) { @supports (grid-template-rows: subgrid) { .yk-prod-t { padding-bottom: 1.8rem; } } }
.yk-prod-pic { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: linear-gradient(150deg, var(--c1), var(--c2)); box-shadow: 0 4px 14px var(--yk-k30); transition: box-shadow 0.2s, transform 0.2s; }
.yk-prod-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }   /* contain : couverture entière, carrée ou non ; le fond derrière suit le thème (voir .yk-prod-pic:has(img)) */
.yk-prod-pic:has(img), .yk-modal-pic:has(img) { background: var(--yk-surface-2); }   /* image présente : fond du thème (et non blanc), visible si l'image n'est pas carrée ; sans image : dégradé généré */
/* Fondu d'apparition des images chargées avec retard (classes posées par hodari.js, fadeInImages) */
/* Carte de la boutique : rapport hauteur/largeur de l'image (posé par boutique.js au chargement ; carré tant qu'elle n'est pas chargée ou absente) */
.yk-prod-pic.yk-ratio, .yk-modal-pic.yk-ratio { aspect-ratio: var(--img-ratio, 1); }
img.yk-fade { opacity: 0; transition: opacity 0.4s ease; }
img.yk-fade.yk-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { img.yk-fade { transition: none; } }
.yk-prod-pic img ~ .yk-prod-gen { display: none; }
.yk-prod-gen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--white); }
.yk-prod-gen svg { width: 2.4rem; height: 2.4rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.yk-prod:focus-visible .yk-prod-pic { box-shadow: 0 0 0 3px var(--yk-yellow), 0 6px 18px var(--yk-k30); }
@media (hover: hover) { .yk-prod:hover .yk-prod-pic { box-shadow: 0 8px 22px var(--yk-k40); transform: translateY(-2px); } }
.yk-prod-t strong { display: block; text-align: center; font-family: var(--font-serif); font-size: 1rem; line-height: 1.25; }
body.yk-home-page:not(.yk-dark) .yk-prod { color: var(--yk-brown); }
body.yk-dark .yk-prod { color: var(--white); }
/* Logo Carrick : le SVG fourni est blanc ; utilisé comme masque, il prend la couleur du texte (blanc en sombre, brun en clair) */
.yk-carrick { display: inline-block; width: 9rem; aspect-ratio: 457.27 / 145.3; margin-top: 0.9rem; background-color: currentColor; -webkit-mask: url(/hodari/assets/carrick-logo.svg) center / contain no-repeat; mask: url(/hodari/assets/carrick-logo.svg) center / contain no-repeat; opacity: 0.92; transition: opacity 0.15s, color 0.15s, transform 0.15s; }
a:hover > .yk-carrick, a:focus-visible > .yk-carrick { opacity: 1; color: var(--yk-hl); transform: scale(1.04); }   /* survol : rouge en clair, jaune en sombre, légèrement agrandi */


/* ── Boutique : fenêtre de détail d'un article (calquée sur le volet des chants du parolier : voir .yk-sheet dans visiteur.css) ──
   Mobile : volet qui monte du bas avec poignée, glissement vers le bas pour fermer. Ordinateur (> 720 px) : fenêtre centrée. */
.yk-modal { position: fixed; inset: 0; z-index: 1500; display: flex; align-items: flex-end; justify-content: center; background: var(--yk-veil50); opacity: 0; transition: opacity 0.25s ease; }
.yk-modal[hidden] { display: none; }
.yk-modal.open { opacity: 1; }
html.yk-modal-lock, html.yk-modal-lock body { overflow: hidden; }
.yk-modal-sheet { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 88dvh; background: var(--yk-surface); color: var(--yk-ink-brown); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 34px var(--yk-k30); overflow: hidden; transform: translateY(100%); transition: transform 0.3s ease; touch-action: pan-y; }
.yk-modal.open .yk-modal-sheet { transform: translateY(0); }
.yk-modal-handle { flex: 0 0 auto; width: 40px; height: 4px; margin: 0.7rem auto 0.3rem; border-radius: 3px; background: var(--yk-b20); }
.yk-modal-close { position: absolute; top: 0.7rem; right: 0.9rem; z-index: 2; width: 32px; height: 32px; border: none; border-radius: 50%; background: var(--yk-surface-2); color: var(--yk-ink-brown); font-size: 1rem; cursor: pointer; }
.yk-modal-close:hover, .yk-modal-close:focus-visible { background: var(--yk-fill); outline: none; }
.yk-modal-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0.4rem 1.3rem calc(1.6rem + env(safe-area-inset-bottom, 0px)); }
.yk-modal-pic { position: relative; width: min(13rem, 70%); aspect-ratio: 1 / 1; margin: 0.4rem auto 1rem; border-radius: 8px; overflow: hidden; background: linear-gradient(150deg, var(--c1), var(--c2)); box-shadow: 0 4px 14px var(--yk-k30); }
.yk-modal-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.yk-modal-pic img ~ .yk-prod-gen { display: none; }
.yk-modal-title { margin: 0 0 0.7rem; text-align: center; font-family: var(--font-serif); font-size: 1.3rem; line-height: 1.25; color: var(--yk-brown); }
.yk-modal-desc { margin: 0 0 1.2rem; white-space: pre-line; font-size: 0.95rem; line-height: 1.55; }
.yk-modal-buy { display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.75rem 1.2rem; border-radius: 999px; background: var(--yk-brand); color: var(--white); font-weight: 700; font-size: 1rem; text-decoration: none; transition: background 0.15s; }
.yk-modal-buy:hover, .yk-modal-buy:focus-visible { background: var(--yk-hl-strong); outline: none; }
@media (min-width: 721px) {
  .yk-modal { align-items: center; }
  .yk-modal-sheet { border-radius: 14px; max-height: 82vh; transform: scale(0.96); opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; }
  .yk-modal.open .yk-modal-sheet { transform: scale(1); opacity: 1; }
  .yk-modal-handle { display: none; }
  .yk-modal-scroll { padding: 1.6rem 1.8rem 1.8rem; }
}
body.yk-dark .yk-modal-title { color: var(--yk-dk-title); }
body.yk-dark .yk-modal-handle { background: var(--yk-w30); }
body.yk-dark .yk-modal-buy { background: var(--yk-yellow); color: var(--yk-brown); }
body.yk-dark .yk-modal-buy:hover, body.yk-dark .yk-modal-buy:focus-visible { filter: brightness(1.1); }   /* survol en sombre : jaune un peu plus clair */