/* couleurs */
:root {
    --blanc: #F2F2F2;
    --beige: #eaeaea;
    --noir: #1F1F1F;
    --vert: #80FFB2;
    --vert-clair: #D6EDD6;
    --bleu: #4526F5;
    --bleu-clair: #CCCCE5;
    --rouge: #FF1708;
    --rouge-clair: #F7D2E7;
    --orange: #F7661C;
    --orange-clair: #FFD6B8;
    --jaune: #FFF200;
    --jaune-clair: #FCFC97;
    --gris: #888;
    --container-max-width: 1400px;
    --container-padding: 40px;
}

/* polices */
@font-face {
    font-family: 'Europa Grotesk SH';
    src: url('../fonts/EuropaGroteskSH-Reg.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Europa Grotesk SH';
    src: url('../fonts/EuropaGroteskSH-Med.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Europa Grotesk SH';
    src: url('../fonts/EuropaGroteskSH-Ita.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Francesco Trial';
    src: url('../fonts/Francesco-Regular-Trial.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* fonts */
h1, h2, h3, h4, h5, h6, .elementor-slide-heading {
    font-family: 'Europa Grotesk SH', sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
}
main p,
main span:not(.elementor-button-text, .e-filter-item),
main div,
main li,
main ul li,
main ol li,
main blockquote,
main label,
main td,
main th {
    font-family: 'Europa Grotesk SH' !important;
    font-size: 18px !important;
    letter-spacing: 1.1px !important;
}
footer p,
footer span:not(.elementor-button-text),
footer div,
footer li,
footer ul li,
footer ol li,
footer blockquote,
footer label,
footer td,
footer th {
    font-family: 'Europa Grotesk SH' !important;
    font-size: 16px !important;
    letter-spacing: 1.1px !important;
}

main span.elementor-button-text, 
footer span.elementor-button-text,
main a.elementor-post-info__terms-list-item,
main span.elementor-post-info__item--type-date,
footer a.radio-footer__contact-btn,
main p#breadcrumbs, main p#breadcrumbs a, main p#breadcrumbs span,
main a.page-numbers, main span.page-numbers {
    font-family: "Roboto", Sans-serif !important;
    font-size: 15px !important;
    letter-spacing: normal !important;
}
main span.elementor-post-info__item--type-date,
main p#breadcrumbs, main p#breadcrumbs a, main p#breadcrumbs span,
footer a.radio-footer__contact-btn {
    font-size: 14px !important;
}

/* filtres */
main a.elementor-post-info__terms-list-item,
main button.e-filter-item{
    border-radius: 15px !important;
    padding: 4px 12px !important;
}

/* footer */
.radio-footer__copy-row{
    text-align: center;
}
.radio-footer__copy a{
    color: var(--blanc);
    opacity: 0.75;
    text-transform: uppercase;
    font-size: 13px !important;
}
.radio-footer__copy a:hover{
    color: var(--jaune);
}

/* sections */
section{
    padding-top: 40px;
    padding-bottom: 40px;
}

/* listes */

/* images — zoom léger au survol, sans agrandir le bloc */
.hover-zoom {
    overflow: hidden;
    border-radius: inherit;
    cursor: pointer;
}

.hover-zoom img {
    transition: transform 500ms ease;
    transform: scale(1);
}

.hover-zoom:hover img {
    transform: scale(1.1);
}

/* bandeau-titre */
.bandeau-titre{
    min-height: 175px;
    padding-top: 30px;
    padding-bottom: 30px;
}
.bandeau-titre p{
    margin-bottom: 0;
}

/* category-tag / filtres */
.category-tag .elementor-post-info__terms-list{
    color: transparent !important;
}
.category-tag .elementor-post-info__terms-list-item,
.e-filter-item {
    border: 1px solid var(--gris) !important;
    padding: 2px 8px !important;
}
.category-tag .elementor-post-info__terms-list-item{
    color: var(--gris) !important;
    text-transform: none !important;
    margin-right: 2px !important;

}
.category-tag .elementor-post-info__terms-list-item:hover{
    background-color: #fff !important;
    color: var(--noir) !important;
}

/* ariane */
p#breadcrumbs a{
    text-decoration: underline;
}
p#breadcrumbs a:hover{
    text-decoration: none;
}

/* filtres */
.e-filter-item.is-active,
.album-dates{
    background-color: var(--jaune) !important;
    color: var(--noir) !important;
}

/* image mise en avant (single de tous les CPT via le template Elementor
   Theme Builder) : sur mobile, le widget "theme-post-featured-image" ne
   s'étire pas forcément à 100% de son conteneur (dépend de son réglage de
   largeur dans Elementor) — on force la pleine largeur ici, en CSS, pour
   ne pas devoir corriger chaque template un par un. */
@media (max-width: 700px) {
    .elementor-widget-theme-post-featured-image,
    .elementor-widget-theme-post-featured-image .elementor-widget-container,
    .elementor-widget-theme-post-featured-image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
}
/* single actualité : pleine largeur quelle que soit la taille d'écran
   (l'image "large" sortie par Elementor garde sinon sa largeur native,
   souvent petite pour les images importées de Drupal). */
body.single-actualite .elementor-widget-theme-post-featured-image,
body.single-actualite .elementor-widget-theme-post-featured-image .elementor-widget-container,
body.single-actualite .elementor-widget-theme-post-featured-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* single-texte */
.single-texte a{
    color: var(--rouge) !important;
    text-decoration: none !important;
}
.single-texte a:hover{
    text-decoration: underline !important;
}
.single-texte a, .single-texte a strong{
    font-weight: normal !important;
    font-style: normal !important;
}

/* réseaux sociaux album / émission / radio / liens externes actualité */
.album-socials__link,
.emission-socials__link,
.radio-socials__link,
.actualite-liens-externes__link{
    color: var(--noir);
    margin-right: 5px;
}
.album-socials__link svg,
.emission-socials__link svg,
.radio-socials__link svg,
.actualite-liens-externes__link svg{
    width: 30px;
    height: 30px;
}
.album-socials__link:hover,
.emission-socials__link:hover,
.radio-socials__link:hover,
.actualite-liens-externes__link:hover{
    color: var(--rouge);
}

/* audios actualité / album : boutons [radio_play] côte à côte */
.actualite-audios,
.album-audios{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* suivant / précédent */
.elementor-pagination{
    margin-top: 40px;
}
.page-numbers{
    padding: 2px 8px !important;
    color: var(--gris) !important;
    border: none !important;
    text-transform: uppercase;
    border-radius: 5px !important;
}
a.page-numbers{
    cursor: pointer;
    color: var(--rouge) !important;
    border: solid 1px var(--rouge) !important;
    transition: all 0.3s ease-in-out;
}
a.page-numbers:hover{
    color: var(--blanc) !important;
    background-color: var(--rouge) !important;
}

/* radios */
.radio-image img{
    max-height: 75px;
    width: auto;
}
.radio-play-btn-container{
    text-align: center;
}
body.single-radiofera .radio-play-btn-container,
body.single-emission .radio-play-btn-container{
    text-align: left;
}

body.single-radiofera .single-texte a,
body.single-radiofera .single-texte strong a,
body.single-radiofera .single-texte a strong{
    color: var(--noir) !important;
    text-decoration: underline !important;
    font-weight: normal !important;
}
body.single-radiofera .single-texte a:hover{
    text-decoration: none !important;
}

body.single-radiofera a.btn.btn-primary,
body.single-emission a.btn.btn-primary{
    padding: 12px 24px;
    color: var(--blanc) !important;
    border: solid 1px var(--noir);
    background-color: var(--noir);
    font-family: "Roboto", Sans-serif !important;
    font-size: 15px !important;
    letter-spacing: normal !important;
    border-radius: 5px;
    display: inline-block;
    margin: 25px 0;
    text-decoration: none !important;
}
body.single-radiofera a.btn.btn-primary:hover,
body.single-emission a.btn.btn-primary:hover{
    color: var(--noir) !important;
    background-color: var(--blanc);
}

/* single artiste */
body.single-album .animated h4{
    color: var(--blanc) !important;
    text-align: center;
}

/* [album-meme-genre] shortcode */
.album-meme-genre__titre {
    text-align: center;
    margin: 0 0 30px;
}


/* album liste */
body.home .album-liste, body.home .album-liste h3.elementor-heading-title a{
    color: var(--blanc) !important;
}

/* [intro-page] shortcode */
.intro-page,
.intro-page p {
    text-align: center;
    color: var(--blanc);
}
.intro-page a{
    color: var(--blanc) !important;
    text-decoration: underline !important;
}
.intro-page a:hover{
    text-decoration: none !important;
}

/* [lafera-recherche] shortcode */
.recherche-intro {
    text-align: center;
    margin-bottom: 40px;
}
.recherche-domaine {
    margin-bottom: 50px;
}
.recherche-domaine h2 {
    margin-bottom: 20px;
}
.recherche .liste-card {
    text-align: center;
}
.recherche .liste-card__categories {
    justify-content: center;
}
.recherche-domaine--albums .liste-card {
    text-align: left;
}
.recherche-domaine--albums .liste-card__categories {
    justify-content: flex-start;
}
.recherche-voir-tous {
    display: table;
    margin: 30px auto 0;
    padding: 8px 20px;
    border: solid 1px var(--noir);
    border-radius: 5px;
    background-color: var(--noir);
    color: var(--blanc) !important;
    text-decoration: none !important;
    text-align: center;
    text-transform: uppercase;
}
.recherche-voir-tous:hover {
    background-color: var(--blanc);
    color: var(--noir) !important;
}
.recherche-retour {
    display: inline-block;
    margin-top: 30px;
    color: var(--rouge) !important;
    text-decoration: underline !important;
}
.recherche-retour:hover {
    text-decoration: none !important;
}
.recherche-pagination {
    margin-top: 20px;
}

/* [albums-liste] sur la page d'accueil : tous les textes en blanc */
body.home [data-liste-domain="albums"] .liste-card__title,
body.home [data-liste-domain="albums"] .liste-card__title a,
body.home [data-liste-domain="albums"] .liste-card__title a:hover,
body.home [data-liste-domain="albums"] .liste-card__title a:visited,
body.home [data-liste-domain="albums"] .liste-card__category,
body.home [data-liste-domain="albums"] .liste-card__label,
body.home [data-liste-domain="albums"] .liste-card__body h4,
body.home [data-liste-domain="albums"] .liste-filtres .e-filter-item:not(.is-active) {
    color: var(--blanc) !important;
}

/* emission single */
.bandeau-sous-titre,
.bandeau-sous-titre h3,
.bandeau-sous-titre p,
.bandeau-sous-titre a,
.bandeau-sous-titre a:hover{
    color: var(--blanc);
    font-family: "Europa Grotesk SH", sans-serif;
    font-size: 23px;
    font-weight: 500;
    text-align: center;
}
.emission-cadre{
    background-color: var(--beige);
}

/* [xxx-liste] shortcodes (émissions/podcasts/radios/albums/actualités) :
   filtres + grille + pagination génériques, partagés entre tous les
   domaines — voir inc/listes.php. */
.liste-select-radio {
    font-family: 'Europa Grotesk SH';
    display: block;
    width: auto !important;
    max-width: 100%;
    margin: 0 auto 30px;
    padding: 6px 34px 6px 14px;
    border: solid 1px rgb(136, 136, 136);
    border-radius: 15px;
    background-color: #fff;
    color: rgb(66, 71, 78);
    font-weight: 600;
    letter-spacing: 0.6px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='rgb(66,71,78)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 22px center;
    background-size: 12px 8px;
}

.liste-filtres {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 30px;
}

.liste-filtres .e-filter-item,
.liste-card__category {
    border: solid 1px rgb(136, 136, 136);
    border-radius: 15px !important;
    padding: 4px 12px !important;
    background-color: transparent;
}

.liste-card__category,
.liste-card__category:hover,
.liste-card__category:visited {
    display: inline-block;
    color: var(--gris) !important;
    text-transform: none;
    text-decoration: none !important;
    cursor: pointer;
    font-family: "Roboto", Sans-serif !important;
    font-size: 15px !important;
    letter-spacing: normal !important;
}

.liste-filtres .e-filter-item {
    cursor: pointer;
    color: var(--gris);
    text-transform: none;
    font-family: "Roboto", Sans-serif !important;
    font-size: 15px !important;
    letter-spacing: normal !important;
}

.liste-filtres .e-filter-item:not(.is-active):hover {
    background-color: #fff;
    color: var(--noir);
}

.liste-filtres .e-filter-item.is-active {
    background-color: var(--jaune) !important;
    color: var(--noir) !important;
}

.liste-grid {
    display: grid;
    grid-template-columns: repeat(var(--liste-columns, 3), 1fr);
    gap: 30px 20px;
}

@media (max-width: 1100px) {
    .liste-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
    .liste-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .liste-grid { grid-template-columns: 1fr; }
}

/* actualités : vrai masonry (Masonry.js + imagesLoaded, voir js/listes.js).
   Les cartes sont en largeur %, positionnées en absolu par la librairie
   (percentPosition: true) — le calc() reprend le même nombre de colonnes
   et le même gap (20px) que la grille standard. */
.liste-grid--masonry {
    position: relative;
}
.liste-grid--masonry .liste-card {
    width: calc((100% - (var(--liste-columns, 3) - 1) * 20px) / var(--liste-columns, 3));
    margin-bottom: 20px;
}
@media (max-width: 1100px) {
    .liste-grid--masonry .liste-card { width: calc((100% - 20px) / 2); }
}
@media (max-width: 700px) {
    .liste-grid--masonry .liste-card { width: 100%; }
}

.liste-card__image {
    display: block;
    text-align: center;
}
.liste-card__image img {
    max-height: 200px;
    width: auto;
}

.liste-card__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 10px 0 12px;
}

.liste-card__title,
.liste-card__title a,
.liste-card__title a:hover,
.liste-card__title a:visited {
    font-family: 'Europa Grotesk SH';
    color: var(--noir);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.1;
    text-decoration: none;
    margin: 0 0 4px;
}

/* émissions uniquement : nom de la/des radio(s) rattachée(s) */
.liste-card__radio {
    font-family: 'Europa Grotesk SH';
    font-size: 18px;
    font-weight: 100;
    line-height: 1.1;
    color: var(--noir);
}

/* radios : champ ACF "sous_titre" / actualités : date de publication */
.liste-card__subtitle,
.liste-card__date {
    font-family: 'Europa Grotesk SH';
    font-size: 16px;
    color: var(--gris);
    margin: 4px 0;
}

/* [radios-liste] : titre et sous-titre centrés */
[data-liste-domain="radios"] .liste-card__title,
[data-liste-domain="radios"] .liste-card__subtitle {
    text-align: center;
}
[data-liste-domain="radios"] .liste-card__image img {
    max-height: 75px;
    width: auto;
}

/* [podcasts-liste] : vignette agrandie (pleine largeur de colonne, hauteur
   proportionnelle), un peu plus d'espace entre titre et bouton écouter */
[data-liste-domain="podcasts"] .liste-card__image img {
    max-height: none;
    width: 100%;
    height: auto;
}
[data-liste-domain="podcasts"] .liste-card__title {
    margin-bottom: 12px;
}
[data-liste-domain="podcasts"] .liste-card .radio-play-btn {
    margin-top: 4px;
}

/* [actualites-liste] : image pleine largeur de colonne, hauteur proportionnelle */
[data-liste-domain="actualites"] .liste-card__image img {
    max-height: none;
    width: 100%;
    height: auto;
}

/* émissions / radios / podcasts / actualités : contenu des cartes centré,
   uniquement sur mobile (desktop inchangé, hors [data-liste-domain="radios"]
   déjà centré en permanence ci-dessus) */
@media (max-width: 700px) {
    [data-liste-domain="emissions"] .liste-card,
    [data-liste-domain="radios"] .liste-card,
    [data-liste-domain="podcasts"] .liste-card,
    [data-liste-domain="actualites"] .liste-card {
        text-align: center;
    }
    [data-liste-domain="emissions"] .liste-card__categories,
    [data-liste-domain="podcasts"] .liste-card__categories,
    [data-liste-domain="actualites"] .liste-card__categories {
        justify-content: center;
    }

    /* Espace sous chaque item de liste (en plus du gap de la grille,
       pour une séparation plus nette une fois les colonnes empilées) */
    .liste-card {
        margin-bottom: 24px;
    }
}

/* albums : carte horizontale (image à gauche, contenu à droite) */
.liste-card--horizontal {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.liste-card--horizontal .liste-card__image {
    flex: 0 0 140px;
}
.liste-card--horizontal .liste-card__body {
    flex: 1;
}
.liste-card__label {
    font-family: 'Europa Grotesk SH';
    font-size: 14px;
    color: var(--gris);
    margin-top: 4px;
}

.liste-empty {
    grid-column: 1 / -1;
    text-align: center;
}

[data-liste].is-loading [data-liste-grid],
[data-liste].is-loading [data-liste-filtres] {
    opacity: 0.5;
    pointer-events: none;
}

.liste-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
}
.liste-pagination__page {
    min-width: 32px;
    padding: 4px 10px;
    border: solid 1px rgb(136, 136, 136);
    border-radius: 5px;
    cursor: pointer;
    font-family: "Roboto", Sans-serif;
    font-size: 15px;
    background-color: var(--jaune) !important;
    color: var(--noir) !important    ;
    border-color: var(--jaune) !important;
}
.liste-pagination__page.is-active {
    background-color: transparent !important;
    color: var(--gris) !important;
}
/* Boutons précédent / suivant désactivés (première / dernière page) */
.liste-pagination__page:disabled,
.liste-pagination__page.is-disabled {
    opacity: 0.35;
    cursor: default;
}
.liste-pagination__ellipsis {
    color: var(--gris);
    padding: 0 4px;
}

/* [feraliste] / [feraliste-last] — voir inc/cpt-feraliste.php */
/* En-tête sur 3 colonnes : titre à gauche, bouton playlist centré dans la
   page, liste déroulante à droite */
.feraliste__entete {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}
.feraliste__titre {
    margin: 0;
}
.feraliste a.feraliste__playlist {
    display: inline-block;
    padding: 12px 24px;
    border: solid 1px var(--noir);
    border-radius: 5px;
    background-color: var(--noir);
    color: var(--blanc) !important;
    font-family: "Roboto", Sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: normal !important;
    text-decoration: none !important;
    white-space: nowrap;
}
.feraliste a.feraliste__playlist:hover {
    background-color: var(--blanc);
    color: var(--noir) !important;
}
.feraliste .feraliste__select {
    margin: 0 0 0 auto;
    min-width: 240px;
    padding: 10px 46px 10px 18px;
    font-size: 18px;
    font-weight: normal;
    border-radius: 22px;
}
/* Légende du "E" de la colonne "Mois préc." */
main p.feraliste__legende {
    margin: 0 0 10px;
    text-align: right;
    font-size: 15px !important;
}
/* En-têtes de colonne réservés aux lecteurs d'écran ("Pochette", "Album
   découverte") : la classe WordPress .screen-reader-text n'est définie par
   aucune feuille de style chargée sur le site */
.feraliste .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.feraliste__scroll {
    overflow-x: auto;
}
.feraliste__table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Roboto", Sans-serif;
    font-size: 15px;
}
.feraliste__table th,
.feraliste__table td {
    padding: 8px 12px;
    border: none;
    border-bottom: solid 1px var(--beige);
    background: transparent;
    text-align: left;
    vertical-align: middle;
}
.feraliste__table th {
    color: var(--gris);
    font-weight: normal;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.feraliste__table .feraliste__col-classement {
    width: 50px;
    font-weight: bold;
    font-size: 18px;
}
.feraliste__table .feraliste__col-precedent {
    width: 90px;
    color: var(--gris);
}
.feraliste__table .feraliste__col-precedent abbr {
    text-decoration: none;
}
.feraliste__table .feraliste__col-pochette {
    width: 70px;
}
.feraliste__col-pochette img,
.feraliste__pochette-vide {
    display: block;
    width: 50px;
    height: 50px;
    object-fit: cover;
}
/* Sans pochette : emplacement vide de la taille d'une pochette, pour que
   toutes les lignes aient la même hauteur ; gris seulement avec ?test=1
   dans l'URL (voir lafera_feraliste_pochette()) */
.feraliste__pochette-vide--test {
    background-color: var(--beige);
}
/* Mention "Album découverte" (albums rattachés), à droite de la ligne */
.feraliste__table .feraliste__col-decouverte {
    text-align: right;
    white-space: nowrap;
}
/* ".feraliste span." : passe devant "main span:not(...)" (font-size 18px
   !important) en tête de fichier */
.feraliste span.feraliste__decouverte {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    background-color: #ffe2bd;
    color: var(--noir);
    font-size: 12px !important;
    letter-spacing: normal !important;
    text-transform: uppercase;
    font-family: "Roboto" !important;
}
/* Pas de gras (500) sur la colonne album : dans EuropaGroteskSH-Med.otf, le
   "S" capital dépasse la zone d'alignement des capitales et s'affiche 1px
   plus bas que les autres lettres aux petites tailles */
/* Fond blanc sur toutes les lignes : annule l'alternance gris / blanc et
   le survol gris des tableaux du thème parent (Hello Elementor, sélecteurs
   "table tbody > tr:nth-child(odd) > td", d'où le :nth-child(n) ici pour
   avoir une spécificité supérieure) */
.feraliste .feraliste__table tbody > tr:nth-child(n) > td,
.feraliste .feraliste__table tbody > tr:nth-child(n):hover > td {
    background-color: #fff;
}
/* Album rattaché à une page album du site : ligne cliquable, colorée
   seulement au survol */
.feraliste__ligne--lien {
    cursor: pointer;
}
.feraliste .feraliste__table tbody > tr.feraliste__ligne--lien:nth-child(n):hover > td {
    background-color: #ffeed8;
}
.feraliste__ligne--lien a {
    color: var(--noir);
    text-decoration: none;
}
@media (max-width: 767px) {
    /* Mobile : chaque album devient une "carte" sur une grille
       classement | pochette | album / artiste / label / mention découverte
       (classement précédent sous le classement) */
    .feraliste__table,
    .feraliste__table tbody {
        display: block;
    }
    .feraliste__table thead {
        display: none;
    }
    .feraliste .feraliste__table tbody > tr {
        display: grid;
        grid-template-columns: 38px 64px 1fr;
        grid-template-areas:
            "rang pochette album"
            "rang pochette artiste"
            "prec pochette label"
            "prec pochette decouverte";
        column-gap: 10px;
        align-items: center;
        padding: 10px 8px;
        border-bottom: solid 1px var(--beige);
        background-color: #fff;
    }
    /* Le fond est porté par la ligne entière, plus par chaque cellule */
    .feraliste .feraliste__table tbody > tr:nth-child(n) > td,
    .feraliste .feraliste__table tbody > tr.feraliste__ligne--lien:nth-child(n) > td {
        display: block;
        width: auto;
        padding: 0;
        border: none;
        background-color: transparent;
    }
    .feraliste__table td.feraliste__col-classement {
        grid-area: rang;
        align-self: end;
        text-align: center;
    }
    .feraliste__table td.feraliste__col-precedent {
        grid-area: prec;
        align-self: start;
        text-align: center;
        font-size: 12px !important;
        letter-spacing: normal !important;
    }
    .feraliste__table td.feraliste__col-precedent:not(:empty)::before {
        content: "préc. ";
    }
    .feraliste__table td.feraliste__col-pochette {
        grid-area: pochette;
    }
    .feraliste__col-pochette img,
    .feraliste__pochette-vide {
        width: 64px;
        height: 64px;
    }
    .feraliste__table td.feraliste__col-decouverte {
        grid-area: decouverte;
        margin-top: 4px;
        text-align: left;
    }
    .feraliste .feraliste__table tbody > tr:nth-child(n) > td.feraliste__col-decouverte:empty {
        display: none;
    }
    .feraliste__table td.feraliste__col-album {
        grid-area: album;
        font-size: 16px !important;
        line-height: 1.25;
    }
    .feraliste__table td.feraliste__col-artiste {
        grid-area: artiste;
        font-size: 15px !important;
        line-height: 1.25;
    }
    .feraliste__table td.feraliste__col-label {
        grid-area: label;
        color: var(--gris);
        font-size: 13px !important;
        line-height: 1.25;
    }
    .feraliste .feraliste__select {
        margin: 0;
    }
    /* Mobile : en-tête sur une colonne, éléments vides masqués */
    .feraliste__entete {
        grid-template-columns: 1fr;
        justify-items: start;
    }
    .feraliste__entete > div:empty {
        display: none;
    }
}

.mentions-texte h2{
    margin: 30px 0 20px 0;
}
.mentions-texte a{
    color: var(--noir);
    text-decoration: underline !important;
}
.mentions-texte a.wp-block-button__link,
.mentions-texte a:hover{
    text-decoration: none !important;
}
.mentions-texte ul{
    margin-bottom: 15px;
}

/* Formulaire de contact (Contact Form 7) : 2 colonnes en desktop */
.wpcf7 form .cf7-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}
.wpcf7 form .cf7-row--full {
    display: block;
}
.wpcf7 form .cf7-col {
    flex: 1 1 calc(50% - 10px);
    min-width: 250px;
}
@media (max-width: 700px) {
    .wpcf7 form .cf7-col {
        flex: 1 1 100%;
    }
}
.wpcf7 form input,
.wpcf7 form textarea,
.wpcf7 form select {
    font-family: "Roboto", Sans-serif !important;
    font-weight: normal !important;
}
.wpcf7 form select {
    background-color: #fff !important;
}
.wpcf7 form .cf7-mention {
    font-size: 13px !important;
    color: var(--gris);
    margin-top: 10px;
}
.wpcf7 form input[type="submit"],
.wpcf7 form .wpcf7-submit {
    padding: 8px 20px !important;
    border: solid 1px var(--noir) !important;
    background-color: var(--noir) !important;
    color: var(--blanc) !important;
    cursor: pointer;
}
.wpcf7 form input[type="submit"]:hover,
.wpcf7 form .wpcf7-submit:hover {
    background-color: var(--blanc) !important;
    color: var(--noir) !important;
    border-color: var(--noir) !important;
}
.wpcf7 form input:focus,
.wpcf7 form textarea:focus,
.wpcf7 form select:focus {
    outline: none;
}

.contact-sous-titre h2{
    font-size: 25px !important;
}

/* tarteaucitron */
button#tarteaucitronManager{
    letter-spacing: 1 !important;
    background-color: var(--noir) !important;
    color: var(--blanc) !important;
    border-color: var(--noir) !important;
    font-weight: bold !important;
    font-family: "Roboto", Sans-serif !important;
    border-radius: 5px !important;
}