/* ======== HOME bits that belong to pages.css (ok to keep here) ======== */
    .home .hero .cta{display:flex; gap:12px; margin-top:16px}
    .images .grid{grid-template-columns:repeat(auto-fill, minmax(160px,1fr))}
    .media iframe.media-embed{display:block}

    /* Home — about two columns, stack on mobile */
    .home .about .about-grid{
    grid-template-columns:1.2fr .8fr;
    align-items:center;
    }
    @media (max-width:860px){
    .home .about .about-grid{grid-template-columns:1fr}
    .home .about .about-media{order:-1}
    }

    /* ======================== AUDIO PAGE ======================== */
    .audio .section{padding-top:32px; padding-bottom:40px}

    /* Titres de section en Aurora (doré) */
    .aurora-title{
    font-family:'AuroraPro', var(--font-sans);
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--accent);
    font-size:1.4rem;
    text-align:center;
    margin:0 0 20px;
    }

    /* Embeds: cadre propre, responsive (BASE) */
    .embed-frame{
    position:relative;
    width:100%;
    aspect-ratio:16/9;           /* 16:9 par défaut (YouTube) */
    background:#000;
    border:1px solid var(--border);
    box-shadow:0 12px 28px rgba(0,0,0,.35);
    overflow:hidden;
    }
    .embed-frame iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    }

    /* ✅ Spotify: hauteur fixe (desktop), PAS de ratio (évite le vide iPhone) */
    .embed-spotify{
    aspect-ratio:auto;
    height:380px;                /* desktop/tablette */
    border-radius:12px;
    overflow:hidden;
    }

    /* ✅ iPhone/petits écrans : on réduit la hauteur -> plus de grand vide */
    @media (max-width:520px){
    .embed-spotify{
        height:200px;              /* valeur “clean” sur iPhone */
    }
    }

    /* Grille des clips */
    .embed-grid{
    display:grid;
    gap:16px;
    grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
    }

    /* ✅ Mobile: on évite un min 320 trop agressif sur très petits écrans */
    @media (max-width:520px){
    .embed-grid{
        grid-template-columns:1fr;
    }
    }

    /* Events page
    ------------------------------------------- */

    body.events .events-header{
    padding-top:72px;
    padding-bottom:8px;
    }

    body.events .events-header .kicker{
    letter-spacing:.16em;
    text-transform:uppercase;
    font-size:0.75rem;
    opacity:0.7;
    margin-bottom:4px;
    }

    body.events .events-header h1{
    margin:0 0 8px;
    font-size:2.4rem;
    }

    body.events .events-header .hero-subtitle{
    max-width:420px;
    font-size:0.95rem;
    opacity:0.8;
    }

    /* Tables */
    .table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch; /* ✅ scroll iOS plus fluide */
    }

    /* largeur fixe harmonisée pour que les colonnes du haut et du bas s’alignent */
    .table-events{
    width:100%;
    border-collapse:collapse;
    margin-top:18px;
    table-layout:fixed; /* force les mêmes proportions */
    }

    .table-events th,
    .table-events td{
    padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,0.14);
    font-size:0.9rem;
    }

    .table-events th{
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:.15em;
    opacity:0.55;
    }

    /* Alignement précis des 3 colonnes */
    .table-events th:first-child,
    .table-events td:first-child{
    width:25%;
    text-align:left;
    }

    .table-events th:nth-child(2),
    .table-events td:nth-child(2){
    width:25%;
    text-align:center;
    }

    .table-events th:last-child,
    .table-events td:last-child{
    width:50%;
    text-align:right;
    }

    /* Harmonisation du tableau du bas */
    .table-events-past{opacity:0.7}

    /* Badge NEXT — discret, bien aligné */
    .is-next-show td{font-weight:600}

    .is-next-show .next-pill{
    display:inline-block;
    margin-right:10px;
    padding:2px 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.35);
    font-size:0.6rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    opacity:0.9;
    vertical-align:middle;
    }

    .empty-message{
    margin-top:8px;
    font-size:0.85rem;
    opacity:0.75;
    }

    /* Bloc "Past shows" équilibré */
    .section-header-inline{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:12px;
    margin-top:56px;
    }

    .section-header-inline h2{
    margin:0;
    font-size:2rem;
    }

    .section-header-inline .small{
    font-size:0.8rem;
    opacity:0.7;
    }

    /* Responsive */
    @media (max-width:800px){
    body.events .events-header{padding-top:56px}

    .table-events th,
    .table-events td{
        font-size:0.85rem;
    }

    /* sur mobile, on garde tout aligné proprement */
    .table-events th,
    .table-events td{
        text-align:left;
    }
    }

    /* Gallery page
    ------------------------------------------- */

    body.gallery .gallery-header{
    padding-top:72px;
    padding-bottom:8px;
    }

    body.gallery .gallery-header .kicker{
    letter-spacing:.16em;
    text-transform:uppercase;
    font-size:0.75rem;
    opacity:0.7;
    margin-bottom:4px;
    }

    body.gallery .gallery-header h1{
    margin:0 0 8px;
    }

    body.gallery .gallery-header .hero-subtitle{
    max-width:460px;
    font-size:0.95rem;
    opacity:0.8;
    }

    /* Masonry grid façon Pinterest */
    .gallery-masonry{
    column-count:3;
    column-gap:16px;
    }

    .gallery-item{
    display:inline-block;
    width:100%;
    margin:0 0 16px;
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
    border-radius:0; /* angles droits */
    overflow:hidden;
    background:var(--surface);
    border:1px solid var(--border);
    box-shadow:var(--shadow-1);
    transition:transform .18s ease, box-shadow .18s ease, opacity .25s;
    }

    .gallery-item img{
    width:100%;
    display:block;
    object-fit:cover;
    }

    /* Optionnel : petite légende */
    .gallery-item figcaption{
    padding:8px 10px 9px;
    font-size:0.75rem;
    color:var(--muted);
    }

    /* Hover douce */
    .gallery-item:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-2);
    }

    /* Responsive */
    @media (max-width:980px){
    .gallery-masonry{column-count:2}
    }
    @media (max-width:640px){
    .gallery-masonry{column-count:1}
    }

    /* ===== Merch — grille 3 colonnes alignée ===== */

    .merch-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:32px;
    margin-bottom:64px;
    }

    .merch-col{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    }

    /* Colonne texte à gauche */
    .merch-col.text-left{
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
    }

    /* Colonne centrale (titre/bouton/texte) */
    .merch-col.center{
    flex-direction:column;
    gap:8px;
    }

    /* Images : toutes même rythme, pas coupées */
    .merch-img{
    width:280px;
    max-width:100%;
    height:auto;
    max-height:280px;
    object-fit:contain;  /* montre toute l'image */
    border-radius:0;
    box-shadow:none;
    }

    /* Titres / textes */
    .merch-row h3{
    font-size:0.95rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    margin-bottom:0.35rem;
    }

    .merch-row p{
    font-size:0.9rem;
    opacity:0.9;
    margin:0 0 0.4rem;
    }

    /* Bouton fin */
    .merch-btn{
    display:inline-block;
    padding:0.5rem 1.6rem;
    font-size:0.8rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    border-radius:0;
    border:1px solid var(--accent);
    background:transparent;
    color:var(--accent);
    text-decoration:none;
    transition:all 0.2s ease;
    }

    .merch-btn:hover{
    background:var(--accent);
    color:var(--bg);
    }

    /* Note T-shirt */
    .merch-note{
    font-size:0.8rem;
    opacity:0.8;
    }

    /* Mobile */
    @media (max-width:800px){
    .merch-row{
        flex-direction:column;
        gap:20px;
        margin-bottom:40px;
    }

    .merch-col,
    .merch-col.text-left,
    .merch-col.center{
        align-items:center;
        text-align:center;
    }

    .merch-img{
        width:80%;
        max-width:320px;
        max-height:none;
    }
    }

    /* =========================
    MEDIA PAGE
    ========================= */

    body.media h1,
    body.media h2{
    font-weight:600;
    letter-spacing:0.04em;
    }

    /* Highlight quote */
    body.media .media-highlight .quote{
    font-family:"Courier New", monospace;
    font-size:1.05rem;
    line-height:1.6;
    }

    body.media .media-highlight .quote footer{
    margin-top:0.5em;
    font-size:0.9rem;
    opacity:0.85;
    }

    /* On Air
    ----------------------------------- */

    body.media .section h2{
    margin-bottom:6px;
    }

    body.media .radio-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
    gap:8px;
    margin-top:10px;
    }

    body.media .radio-card{
    padding:8px 10px;
    border-radius:6px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    font-size:0.85rem;
    font-weight:500;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    transition:transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
    }

    body.media .radio-card:hover{
    transform:translateY(-2px);
    border-color:var(--accent);
    background:var(--surface-elevated, var(--surface));
    }

    /* Press grid & cards
    ----------------------------------- */

    body.media .press-grid{
    margin-top:18px;
    }

    body.media .press-grid .card.press{
    padding:16px 16px 14px;
    border-radius:14px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    box-shadow:var(--shadow-1);
    transition:transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }

    body.media .press-grid .card.press h3{
    margin:0 0 4px;
    font-size:1rem;
    }

    body.media .press-grid .card.press .small{
    font-size:0.78rem;
    opacity:0.8;
    }

    body.media .press-grid .card.press .italic{
    font-style:italic;
    font-size:0.85rem;
    margin-top:4px;
    }

    body.media .press-grid .card.press:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-2);
    border-color:var(--accent);
    }

    /* Framed buttons (Read / Listen / Watch)
    ----------------------------------- */

    body.media .btn-ghost{
    display:inline-block;
    margin-top:8px;
    padding:6px 14px;
    border-radius:999px;
    border:1px solid var(--accent);
    color:var(--accent);
    font-size:0.78rem;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    text-decoration:none;
    transition:all 0.2s ease;
    }

    body.media .btn-ghost:hover{
    background:var(--accent);
    color:var(--bg);
    }

    /* =========================
    CONTACT PAGE
    ========================= */

    body.contact .contact-wrap{
    padding-top:72px;
    padding-bottom:72px;
    }

    body.contact h1{
    margin:0;
    font-weight:600;
    letter-spacing:0.04em;
    }

    body.contact .contact-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:24px;
    margin-top:32px;
    }

    body.contact .contact-card{
    padding:18px 18px 16px;
    border-radius:14px;
    border:1px solid var(--border);
    background:var(--surface);
    box-shadow:var(--shadow-1);
    }

    body.contact .contact-card h2{
    margin:0 0 4px;
    font-size:1rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    }

    body.contact .contact-link{
    display:inline-block;
    margin-top:6px;
    color:var(--accent);
    text-decoration:none;
    font-weight:500;
    border-bottom:1px solid transparent;
    transition:border-color 0.18s ease, color 0.18s ease;
    }

        /* =========================
    HOME — About spacing (mobile/tablet)
    About = <section class="section container about">
    ========================= */

    /* iPhone */
    @media (max-width:520px){
    .home section.about.container{
        padding-left: 26px;
        padding-right: 26px;
    }
    }

    /* iPad */
    @media (min-width:768px) and (max-width:1024px){
    .home section.about.container{
        padding-left: 32px;
        padding-right: 32px;
    }
    }

    /* =========================
    EVENTS — horizontal breathing room
    ========================= */

    /* iPhone */
    @media (max-width:520px){
    body.events .container{
        padding-left: 26px;
        padding-right: 26px;
    }
    }

    /* iPad */
    @media (min-width:768px) and (max-width:1024px){
    body.events .container{
        padding-left: 32px;
        padding-right: 32px;
    }
    }
	/* About – lien visible et clairement cliquable */
    .about-text p.muted a {
    color: var(--accent-3, #ffc66ba1); /* fallback si variable non définie */

    text-underline-offset: 3px;
    transition: color 0.25s ease, opacity 0.25s ease;
    }

    .about-text p.muted a:hover {
    opacity: 0.7;
    }
																																					
/* === Footer social: FORCE show all icons (override components.css) === */
    .site-footer nav.social a.social-link{
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    }

    /* Au cas où un nth-child cache après 2 */
    .site-footer nav.social a.social-link:nth-child(3),
    .site-footer nav.social a.social-link:nth-child(4){
    display: grid !important;
    }

    /* Et on force la couleur des SVG */
    .site-footer nav.social a.social-link{
    color: var(--fg) !important;
    }
    .site-footer nav.social a.social-link svg{
    fill: currentColor !important;
    }
																																						  
																																						  /* 1) S’assurer que le footer est au-dessus de tout overlay */


/*