/* Mister Renaud : feuille de style du site public.
   Après modification, changer framework.assets.version (config/packages/framework.yaml). */

:root {
    --texte: #1d1d1d;
    --texte-doux: #5c5c5c;
    --fond: #fff;
    --fond-doux: #f6f4f1;
    --bordure: #e2ded8;
    --accent: #b3311d;
    --accent-fonce: #8c2414;
    --sombre: #1d1d1d;
    --police-titres: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --police-texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --rayon: 6px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font: 1rem/1.6 var(--police-texte);
}

img { max-width: 100%; height: auto; }

/* Liens jamais soulignés (choix de Johann) : signalés par leur couleur. */
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-fonce); }

h1, h2, h3 {
    font-family: var(--police-titres);
    font-weight: 600;
    line-height: 1.2;
}
h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: .4em 0 .6em; }
h2 { font-size: 1.4rem; margin: 0 0 .7em; }
h3 { font-size: 1.1rem; }

.conteneur {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

.visuellement-cache, .piege {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 16px; top: 8px; z-index: 10; background: var(--fond); padding: .5em 1em; }

/* En-tête */

.entete { border-bottom: 1px solid var(--bordure); }

.entete__barre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    padding-top: 12px;
    padding-bottom: 12px;
}
.entete__logo img { display: block; width: 150px; }
.entete__devise {
    margin: 0;
    font-family: var(--police-titres);
    font-style: italic;
    color: var(--texte-doux);
    font-size: 1.1rem;
}

.entete__compte { margin-left: auto; white-space: nowrap; }

.recherche-rapide {
    display: flex;
    min-width: min(100%, 320px);
}
.recherche-rapide input, .recherche__champ input { flex: 1; min-width: 0; }

input, select, textarea, button { font: inherit; }

input[type="search"], input[type="text"], input[type="email"], input[type="password"], select, textarea {
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: .5em .7em;
    background: var(--fond);
    color: var(--texte);
}
.recherche-rapide input, .recherche__champ input { border-radius: var(--rayon) 0 0 var(--rayon); }

button, .bouton {
    display: inline-block;
    border: 0;
    border-radius: var(--rayon);
    padding: .5em 1em;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}
button:hover, .bouton:hover { background: var(--accent-fonce); color: #fff; }
.recherche-rapide button, .recherche__champ button { border-radius: 0 var(--rayon) var(--rayon) 0; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Menu */

.menu { background: var(--sombre); }
.menu__bascule { position: absolute; opacity: 0; pointer-events: none; }
.menu__bouton { display: none; }

.menu__liste {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    list-style: none;
}
.menu__liste a {
    display: block;
    padding: .8em .9em;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .85rem;
}
.menu__liste a:hover, .menu__liste a:focus-visible { background: var(--accent); color: #fff; }

.menu__entree { position: relative; }
.menu__sous-liste {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    min-width: 220px;
    margin: 0;
    padding: .3em 0;
    list-style: none;
    background: var(--sombre);
    box-shadow: 0 6px 16px rgb(0 0 0 / .25);
}
.menu__sous-liste a { text-transform: none; letter-spacing: 0; font-size: .95rem; padding: .5em 1em; }
.menu__entree:hover > .menu__sous-liste,
.menu__entree:focus-within > .menu__sous-liste { display: block; }

@media (max-width: 800px) {
    .menu__bouton {
        display: block;
        padding: .7em 16px;
        color: #fff;
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .menu__bouton::before { content: "☰ "; }
    .menu__liste { display: none; flex-direction: column; padding-bottom: .5em; }
    .menu__bascule:checked ~ .menu__liste { display: flex; }
    .menu__bascule:focus-visible + .menu__bouton { outline: 3px solid #fff; outline-offset: -3px; }
    .menu__sous-liste { display: block; position: static; box-shadow: none; padding: 0 0 0 1em; }
    .entete__devise { display: none; }
    .recherche-rapide { margin-left: 0; width: 100%; }
}

/* Contenu */

/* Espace au-dessus du pied de page, sur toutes les pages. « main.conteneur » et non « main » :
   le padding de .conteneur (0 16px) l'emportait et l'annulait. */
main.conteneur { padding-bottom: 64px; }

.fil ol {
    display: flex;
    flex-wrap: wrap;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    font-size: .9rem;
    color: var(--texte-doux);
}
.fil li + li::before { content: "›"; margin: 0 .5em; }
.fil a { color: var(--texte-doux); }

.message { padding: .8em 1em; border-radius: var(--rayon); margin: 16px 0; }
.message--succes { background: #e6f4ea; color: #1e5631; }
.message--erreur { background: #fbe9e7; color: #8c2414; }
.message--apercu { background: #fff4d6; color: #6b4a00; }

.bloc { margin: 40px 0; }
.texte { max-width: 760px; }
.tableau-defilant { overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; font-size: .95em; }
.tableau th, .tableau td { padding: .5em .7em; border-bottom: 1px solid var(--bordure); text-align: left; vertical-align: top; }
.tableau th { background: var(--fond-doux); }

.presentation {
    margin: 24px 0 0;
    padding: 24px;
    background: var(--fond-doux);
    border-radius: var(--rayon);
}
.presentation h1 { margin-top: 0; }
/* .presentation p { max-width: 820px; } */

.bandeaux {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.bandeau { position: relative; display: block; border-radius: var(--rayon); overflow: hidden; }
.bandeau img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .3s; }
.bandeau:hover img { transform: scale(1.03); }
.bandeau__titre {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 1.5em 1em .8em;
    background: linear-gradient(transparent, rgb(0 0 0 / .75));
    color: #fff;
    font-family: var(--police-titres);
    font-size: 1.3rem;
}

.puces {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}
.puces li { background: var(--fond-doux); border-radius: 999px; padding: .25em .9em; font-size: .9rem; }

/* Bouton d'un formulaire POST présenté comme un lien (déconnexion) */
.en-ligne { display: inline; margin: 0; }
.lien { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; }
.lien:hover { color: var(--accent-fonce); }

.filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px 16px;
    margin: 0 0 24px;
    padding: 12px 16px;
    background: var(--fond-doux);
    border-radius: var(--rayon);
}
.filtres label { display: flex; flex-direction: column; font-size: .85rem; color: var(--texte-doux); }
.filtres select { min-width: 160px; }

.compteur { color: var(--texte-doux); font-size: .9rem; }

.grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 24px 16px;
}

.vignette__lien { display: block; color: var(--texte); text-decoration: none; }
.vignette__image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: var(--fond-doux);
    border-radius: var(--rayon);
    overflow: hidden;
}
.vignette__image img { width: 100%; height: 100%; object-fit: contain; }
.vignette__sans-image, .fiche__sans-image { font-size: 3rem; color: var(--bordure); }
.vignette__titre { display: block; margin-top: .5em; font-weight: 600; line-height: 1.3; }
.vignette__lien:hover .vignette__titre { color: var(--accent); }
.vignette__infos { margin: .2em 0 0; font-size: .85rem; color: var(--texte-doux); }

.etiquette {
    display: inline-block;
    padding: .15em .6em;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
}
.etiquette--recherche { background: var(--accent); color: #fff; }
.vignette__image .etiquette { position: absolute; top: 8px; left: 8px; }

.pagination ul, .alphabet ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}
.pagination a, .pagination span, .alphabet a {
    display: block;
    min-width: 2.4em;
    padding: .35em .6em;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    text-align: center;
    text-decoration: none;
}
.pagination span[aria-current] { background: var(--accent); border-color: var(--accent); color: #fff; }
.alphabet ul { margin: 0 0 24px; }

.lettre { margin-top: 32px; scroll-margin-top: 16px; }
.lettre h2 { border-bottom: 2px solid var(--accent); padding-bottom: .2em; }

.liste-chansons {
    columns: 2 320px;
    column-gap: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.liste-chansons li { break-inside: avoid; padding: .3em 0; border-bottom: 1px solid var(--fond-doux); }
.liste-chansons__infos { display: block; font-size: .85rem; color: var(--texte-doux); }
.liste-chansons__infos a { color: inherit; }
.liste-chansons__extrait { display: block; font-size: .9rem; font-style: italic; color: var(--texte-doux); }

/* Fiches */

.fiche {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 32px;
    margin-top: 24px;
}
.fiche--chanson { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.fiche h1 { margin-top: 0; }
.fiche__format { color: var(--texte-doux); font-size: .6em; font-weight: 400; }
.fiche__couverture { display: block; width: 100%; height: auto; border-radius: var(--rayon); background: var(--fond-doux); }
.fiche__sans-image { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; background: var(--fond-doux); border-radius: var(--rayon); }
.fiche__images { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.fiche__images img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: 4px; }
.fiche__galerie a[data-galerie-image] { cursor: zoom-in; }

/* Images en grand (public/js/galerie.js), sur le modèle de Magnific Popup. */
html:has(.galerie[open]) { overflow: hidden; }
.galerie { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #ccc; }
.galerie::backdrop { background: rgba(11, 11, 11, .88); }
.galerie__cadre { display: flex; align-items: center; justify-content: center; height: 100%; padding: 44px 64px; box-sizing: border-box; }
.galerie__contenu { margin: 0; max-width: 100%; }
.galerie__image { display: block; max-width: 100%; max-height: calc(100vh - 44px * 2 - 2em); width: auto; height: auto; margin: 0 auto; background: #444; box-shadow: 0 0 8px rgba(0, 0, 0, .6); cursor: pointer; }
/* width: 0 + min-width: 100% : la légende prend la largeur de l'image sans l'élargir. */
.galerie__bas { display: flex; justify-content: space-between; gap: 1em; width: 0; min-width: 100%; padding-top: .4em; font-size: .9rem; line-height: 1.4; }
.galerie__compteur { flex: none; white-space: nowrap; color: #ccc; }
.galerie__bouton, .galerie__bouton:hover { position: fixed; padding: 0; border-radius: 0; background: none; color: #fff; line-height: 1; opacity: .7; }
.galerie__bouton:hover, .galerie__bouton:focus-visible { opacity: 1; }
.galerie__fermer { top: 4px; right: 8px; width: 44px; height: 44px; font-size: 2.2rem; }
.galerie__fleche { top: 50%; width: 56px; height: 96px; margin-top: -48px; font-size: 4rem; }
.galerie__fleche[hidden] { display: none; }
.galerie__fleche--precedente { left: 4px; }
.galerie__fleche--suivante { right: 4px; }
@media (max-width: 640px) {
    .galerie__cadre { padding: 44px 8px; }
    .galerie__fleche { width: 40px; font-size: 3rem; text-shadow: 0 0 6px rgba(0, 0, 0, .8); }
}
.fiche__resume { font-size: 1.1rem; color: var(--texte-doux); }
.fiche__cote .bloc:first-child { margin-top: 0; }

.encart { padding: 12px 16px; border-radius: var(--rayon); background: var(--fond-doux); }

.pistes { margin: 0; padding-left: 2em; }
.pistes li { padding: .15em 0; }
.pistes__duree { margin-left: .5em; color: var(--texte-doux); font-size: .9em; font-variant-numeric: tabular-nums; }

.paroles {
    font-family: var(--police-titres);
    font-size: 1.1rem;
    line-height: 1.7;
}

.fiche-technique {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .4em 1.5em;
    margin: 0;
}
.fiche-technique dt { font-weight: 600; }
.fiche-technique dd { margin: 0; }

.avis { padding: 16px 0; border-bottom: 1px solid var(--bordure); }
.avis__note { margin: 0; color: var(--accent); letter-spacing: .1em; }
.avis__titre { margin: .3em 0; }
.avis__auteur { margin: 0; font-size: .85rem; color: var(--texte-doux); }

@media (max-width: 700px) {
    .fiche, .fiche--chanson { grid-template-columns: minmax(0, 1fr); }
    .fiche-technique { grid-template-columns: 1fr; }
    .fiche-technique dd { margin-bottom: .4em; }
}

/* Formulaires */

.recherche { margin: 0 0 32px; max-width: 640px; }
.recherche label { display: block; margin-bottom: .4em; }
.recherche__champ { display: flex; }

.formulaire { max-width: 640px; }
.formulaire__note { margin-top: 16px; font-size: .9rem; color: var(--texte-doux); }
.formulaire div { margin-bottom: 16px; }
/* Conteneurs de groupes de champs (sous-formulaires, mot de passe répété) : l'espacement vient des champs */
.formulaire div:has(> div) { margin-bottom: 0; }
.formulaire label { display: block; margin-bottom: .3em; font-weight: 600; }
.formulaire input:not([type="checkbox"], [type="radio"]), .formulaire textarea { width: 100%; }
.formulaire ul { margin: .3em 0 0; padding: 0; list-style: none; color: var(--accent-fonce); font-size: .9rem; }
.formulaire input[type="checkbox"], .formulaire input[type="radio"] { margin: .25em .5em 0 0; accent-color: var(--accent); }
/* Case à cocher ou bouton radio suivi de son libellé, sur une ligne */
.formulaire div:has(> input[type="checkbox"]), .formulaire div:has(> input[type="radio"]), .case {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .3em 1em;
    margin-bottom: 8px;
}
/* Symfony place le libellé avant la case : on remet la case devant */
.formulaire div:has(> input[type="checkbox"]) { flex-wrap: nowrap; gap: 0; }
.formulaire div:has(> input[type="checkbox"]) input { order: -1; }
.formulaire input[type="radio"] + label { margin-left: -.8em; }
.formulaire div:has(> input[type="checkbox"]) label, .formulaire div:has(> input[type="radio"]) label, .case label { font-weight: 400; }
.formulaire .help-text, .aide { margin: .3em 0 0; font-size: .85rem; color: var(--texte-doux); }
.formulaire button + a { margin-left: 1em; }

.bouton--secondaire { background: var(--fond-doux); color: var(--texte); border: 1px solid var(--bordure); }
.bouton--secondaire:hover { background: var(--bordure); color: var(--texte); }
.bouton--secondaire[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.favori { margin: 16px 0; }

.colonnes-compte {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
    align-items: start;
}
.colonnes-compte .encart { margin-top: 24px; }
.colonnes-compte .encart h2 { margin-top: .3em; }

.donner-avis { margin-top: 24px; }
.compte-suppression { margin-top: 48px; font-size: .9rem; }
.compte-suppression a { color: var(--texte-doux); }

/* Pied de page */

.pied { background: var(--sombre); color: #ddd; font-size: .95rem; }
/* Liens du pied de page : blancs, jamais soulignés. Dans les listes, une marge latérale agrandit
   la zone cliquable et porte le fond du survol ; la marge négative garde le texte aligné sur
   le titre de la colonne. */
.pied a, .pied .lien, .pied a:hover, .pied .lien:hover { color: #fff; text-decoration: none; }
.pied li a, .pied li .lien { display: inline-block; margin: 0 -.6em; padding: .1em .6em; border-radius: var(--rayon); }
.pied li a:hover, .pied li a:focus-visible, .pied li .lien:hover, .pied li .lien:focus-visible { background: rgba(255, 255, 255, .1); }
.pied__colonnes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    padding-top: 40px;
    padding-bottom: 24px;
}
.pied__colonnes img { padding: 6px 10px; border-radius: var(--rayon); }
.pied__titre { margin: 0 0 .5em; color: #fff; font-family: var(--police-titres); font-size: 1.15rem; }
.pied ul { margin: 0; padding: 0; list-style: none; }
.pied li { padding: .15em 0; }
.pied__copyright { margin: 0 auto; padding-top: 16px; padding-bottom: 24px; border-top: 1px solid #3a3a3a; font-size: .85rem; color: #aaa; }

/* Bandeau de consentement à la mesure d'audience (public/js/mesure-audience.js) */
.bandeau-cookies {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 24px;
    padding: 16px;
    background: #1f1f1f;
    color: #fff;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .3);
    font-size: .9rem;
}
.bandeau-cookies[hidden] { display: none; }
.bandeau-cookies p { margin: 0; max-width: 60ch; }
.bandeau-cookies a { color: #fff; }
.bandeau-cookies__boutons { display: flex; gap: 8px; }