/*
Theme Name: MAMCS
Author: Benoit FORJONNEL
Description: Thème personnalisé pour le Musée d'Art Moderne et Contemporain de Strasbourg (MAMCS) !
Version: 1.0
*/

/*
Theme Name:   MAMCS - Hello Elementor Child
Description:  Styles dédiés au Footer et à la configuration globale
*/

/* ==========================================================================

=======   CONFIGURATION DE BASE

========================================================================== */


html {
	line-height:1.15;
	-webkit-text-size-adjust:100%;
	max-width:100%;
	width:100%;
	overflow-x:hidden;
	box-sizing:border-box;
}

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

body {
	margin: 0 auto;
	background: #fff;
	max-width:100%;
	width:100%;
	overflow-x:hidden;
}

main {
	display: block;
}

.container {
    max-width: 1140px; /* Ou 1140px, selon tes besoins */
    width: 90%;       /* Permet de garder une marge sur mobile */
    margin-right: auto;
    margin-left: auto;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
}

small {
    font-size: 80%;
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

ul, ol {
    margin: 0 auto;
    list-style: none;
    padding: 0;
}

article ul,
article ol {
    margin-left: 10px;
    padding-left: 10px;
}

article ul {
    list-style: disc;
}

article ol {
    list-style: decimal;
}

li > ul,
li > ol {
    margin-bottom: 0;
    margin-left: 1.5em;
}

a.btn {
    max-height: fit-content;
    max-width: fit-content;
}


/* ==========================================================================

=======   CONFIGURATION DES POLICES

========================================================================== */

:root {
    --title : "degular", sans-serif;
    --bold: 700;
    --semibold: 600;
    --white: #fefefe;
    --primary-color: #0a0a0a;
    --secondary-color: #27359E;
    --tertiary-color: #DC419E;
    --fourth-color: #FFE100;
    --fifth-color: #FF7614;
    --sixt-color: #BD1327;
    --seventh-color: #404040;
}


@font-face {
    font-family: "merriweather";
    src: url("../fonts/Merriweather-Regular.otf") format("opentype");
    src: url("../fonts/Merriweather-Regular.ttf") format("truetype");
    src: url("../fonts/Merriweather-Regular.woff") format("woff");
    src: url("../fonts/Merriweather-Regular.woff2") format("woff2");
}


/* Styles de base (Desktop) */
h2, h3, h4, span {
    font-family: var(--title);
    font-weight: var(--semibold);
    line-height: 1.1;
    margin: 0;
}

h1 {
    font-family: var(--title);
    font-weight: var(--bold);
    font-size: 4rem;
    letter-spacing: -0.03em;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--primary-color);
}

h2 {
    font-size: 3rem;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

h3 {
    font-size: 2.25rem;
    letter-spacing: -0.01em;
}

h4 {
    font-size: 1.5rem;
}

span {
    font-size: 1.125rem;
    letter-spacing: 0.05em;
}

body {
    font-family: 'merriweather', serif;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--primary-color);
}

a.btn {
    font-size: 1.125rem;
    text-decoration: none;
    font-family: var(--title);
    font-weight: var(--semibold);
    line-height: 1.1;
    letter-spacing: 0.02em;
}

/* =========================================
        BREAKPOINTS (TABLETTE)
========================================= */
@media (max-width: 1024px) {
    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2.5rem;
    }

    h3 {
        font-size: 1.75rem;
    }

    h4 {
        font-size: 1.35rem;
    }
}

/* =========================================
        BREAKPOINTS (MOBILE)

@media (max-width: 767px) {
    h1 {
        font-size: 2.5rem;
        letter-spacing: -0.01em;
        line-height: 1.1;
    }

    h2 {
        font-size: 1.8rem;
        margin-bottom: 0.75rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    h4 {
        font-size: 1.25rem;
    }

    body, span, a.btn {
        font-size: 1rem;
        line-height: 1.5;
    }
}
========================================= */



/* --- TYPOGRAPHIE GLOBALE --- */
.home h1, .home h2, .home h3, .home h4, 
footer a, footer p {
    font-family: degular, sans-serif;
}



/* ==========================================================================

=======   BOUTONS

========================================================================== */

a.btn {
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
  }

  a.btn-margin-top {
    margin-top: 2rem;
    display: block;
  }
  
  a.btn-round-primary {
    border: 1px solid var(--white);
    background-color: var(--white);
    color: var(--primary-color);
    border-radius: 100px;
  }

  a.btn-round-primary:hover {
    background-color: var(--primary-color);
    color: var(--white);
  }
  
  a.btn-round-secondary {
    border: 1px solid var(--primary-color);
    background-color: var(--primary-color);
    color: var(--white);
    border-radius: 100px;
  }

  a.btn-round-secondary:hover {
    background-color: var(--white);
    color: var(--primary-color);
  }
  
  a.btn-rectangle-primary {
    border: 1px solid var(--primary-color);
    background-color: var(--white);
    color: var(--primary-color);
    border-radius: 5px;
  }

  a.btn-rectangle-primary:hover {
    background-color: var(--primary-color);
    color: var(--white);
  }
  
  a.btn-rectangle-secondary {
    border: 1px solid var(--white);
    background-color: var(--primary-color);
    color: var(--white);
    border-radius: 6px;
  }

  a.btn-rectangle-secondary:hover {
    background-color: var(--white);
    color: var(--primary-color);
  }

  

/* ==========================================================================

=======   SECTION / ESPACEMENT / GRILLES

========================================================================== */
  
  section {
    margin: 6em 0;
  }

  @media (max-width: 768px) {
    section {
        margin: 3em 0;
    }
  }
  
  .full-wide {
    padding: 2.5rem 0;
    background-color: var(--primary-color);
    color: var(--white);
  }
  
  .grid-2-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2em;
    row-gap: 4em;
  }



/* ==========================================================================

=======   HEADER

========================================================================== */

header {
    background-color: var(--primary-color);
    position: relative; /* Sécurité pour les contextes d'empilement */
    z-index: 100;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 90px;
}

/* Zone Gauche : Logo + Navigation */
#logo-et-nav {
    display: flex;
    align-items: center;
    gap: 50px;
}

/* Zone Droite : Icones + Bouton */
#icon-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

/* =========================================
   2. TYPOGRAPHIE & LIENS (NIVEAU 1)
   ========================================= */

   /* Cible les liens du menu principal ET les liens d'icônes à droite */
.desktop-menu-list > li > a,
#icon-nav a {
    color: var(--white);
    text-transform: uppercase;
    font-family: var(--title);
    font-size: 1.25rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.desktop-menu-list > li > a:hover, #header-panier:hover, #header-compte:hover {
    opacity: 30%;
}

/* Gestion spécifique des icones SVG */
#icon-nav img {
    width: 28px;
    height: auto;
    filter: invert(1);
    display: block;
    transition: all 0.3s ease-in-out;
}


/* Ajustement spécifique pour le bouton Billeterie */
#icon-nav .btn {
    display: flex;
    align-items: center;
    gap: 10px;
}

#header-billeterie {
    transition: all 0.3s ease-in-out;
}

#header-billeterie:hover {
    background-color: var(--white);
    color: var(--primary-color);
}

#header-billeterie:hover img {
    filter: invert(0);
}


/* =========================================
   3. MENU DÉROULANT (DROPDOWN)
   ========================================= */

   /* --- Conteneur UL principal --- */
.desktop-menu-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px;
}

/* --- Éléments parents (LI) --- */
.desktop-menu-list > li {
    position: relative; /* Point d'ancrage */
    padding: 15px 0;    /* Zone de survol confortable */
}

/* La petite flèche ▼ */
.desktop-menu-list .menu-item-has-children > a::after {
    content: " ▼";
    font-size: 0.6em;
    vertical-align: middle;
    margin-left: 5px;
}

/* --- LE SOUS-MENU (Conteneur caché) --- */
.desktop-menu-list .sub-menu {
    display: none;       /* Caché par défaut */
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;    /* Un peu plus large pour accueillir la typo 1.25rem */
    
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 4px;
    padding: 10px 0;
    margin: 0;
    list-style: none;
    z-index: 999;
}

/* Affichage au survol */
.desktop-menu-list li:hover > .sub-menu {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* --- LIENS DU SOUS-MENU (Stylisation identique au Header) --- */
.desktop-menu-list .sub-menu li a {
    
    /* 1. On force la MÊME typo que le menu principal */
    font-family: var(--title);
    font-size: 1.25rem;
    text-transform: uppercase;
    font-weight: 600;
    
    /* 2. Couleur : On met une couleur foncée car le fond est blanc */
    color: var(--primary-color); 
    
    /* 3. Espacement */
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* --- Survol d'un élément du sous-menu --- */
.desktop-menu-list .sub-menu li a:hover {
    background-color: var(--primary-color);
    color: var(--white);
}


/* =========================================
   4. MENU MOBILE ET TABLETTE (max-width: 991px)
   ========================================= */

/* --- A. LE BOUTON BURGER --- */
#mobile-menu-trigger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    padding: 5px;
    z-index: 101;
}

#mobile-menu-trigger span {
    display: block;
    width: 30px;
    height: 3px;
    background-color: var(--white, #fff);
    border-radius: 2px;
}

/* --- B. LOGIQUE RESPONSIVE --- */
@media (max-width: 991px) {
    .header-dsktp-nav { display: none !important; }
    #mobile-menu-trigger { display: flex; }
    .btn-text { display: none; }

    #icon-nav .btn {
        border: none;
        padding: 0;
    }

    img.logo-img {
        height: 31px;
    }
}

@media (min-width: 992px) {
    #mobile-menu-overlay { display: none !important; }
}

/* --- C. L'OVERLAY FULL PAGE --- */
#mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--primary-color, #000);
    z-index: 10001 !important; /* Au dessus du header */
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.4s ease-in-out;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
}

#mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* --- D. LE BOUTON FERMER (CROIX) --- */
#mobile-menu-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--white, #fff);
    font-size: 3.5rem;
    padding: 15px;
    cursor: pointer;
    line-height: 1;
    z-index: 10000;
}

/* --- E. LISTE PRINCIPALE MOBILE --- */
.mobile-menu-list {
    list-style: none;
    padding: 20px 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 400px;
}

.mobile-menu-list > li {
    display: block;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

#mobile-menu-overlay.active .mobile-menu-list > li {
    opacity: 1;
    transform: translateY(0);
}

/* Délais cascade */
#mobile-menu-overlay.active .mobile-menu-list > li:nth-child(1) { transition-delay: 0.1s; }
#mobile-menu-overlay.active .mobile-menu-list > li:nth-child(2) { transition-delay: 0.2s; }
#mobile-menu-overlay.active .mobile-menu-list > li:nth-child(3) { transition-delay: 0.3s; }
#mobile-menu-overlay.active .mobile-menu-list > li:nth-child(4) { transition-delay: 0.4s; }

/* Styles des liens principaux */
.mobile-menu-list > li > a {
    color: var(--white, #fff);
    font-family: var(--title, sans-serif);
    font-size: 2.2rem;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    display: block;
    padding: 15px 20px;
    line-height: 1.2;
    cursor: pointer;
}

/* --- F. SOUS-MENUS MOBILE (LOGIQUE CASCADE SANS FLÈCHE) --- */

/* 1. Caché par défaut */
.mobile-menu-list .sub-menu {
    display: none;
    flex-direction: column;
    margin: 0 20px 20px 20px;
    padding: 0;
    list-style: none;
}

/* 2. Visible quand JS ajoute la classe au parent */
.mobile-menu-list .menu-item-has-children.submenu-open > .sub-menu {
    display: flex;
    animation: slideDown 0.3s ease-out;
}

.mobile-menu-list .sub-menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu-list .sub-menu li:last-child {
    border-bottom: none;
}

.mobile-menu-list .sub-menu li a {
    font-family: var(--title, sans-serif);
    font-size: 1.4rem;
    text-transform: uppercase;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    display: block;
    padding: 16px 20px;
    text-decoration: none;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
  

  
  /*------------------------------------
  ------------------------------------*/
  
  
  /*------------------------------------
--- SECTION HEADER
----------------------------------------*/

.section-header {
    display: grid;
    grid-template-columns: 80% 1fr;
    column-gap: 2em;
    align-items: center;
    margin-bottom: 1.5rem;
  }
  
  .section-header a {
    margin-right: 0;
    margin-left: auto;
  }
  
  /* --- Passage en mode colonne pour le Mobile --- */
  @media (max-width: 767px) {
    .section-header {
        /* On casse la grille pour empiler les éléments */
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Aligne le titre et le bouton à gauche */
        gap: 0.5em; /* Espace vertical entre le titre et le bouton */
    }
  
    .section-header a {
        /* On remet la marge à gauche en auto pour que le bouton 
           ne soit plus poussé vers la droite */
        margin-left: 0; 
    }
  }
  
  

/* ==========================================================================

=======   SLIDER HOMEPAGE

========================================================================== */

section.homepage-slider.container {
    margin-top: 2em;
}

.homepage-slider h2 {
    display: none;
}


/* ===========================
   CAROUSEL CELL
=========================== */
.homepage-slider .carousel-cell {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.homepage-slider .carousel-cell img {
    width: 100%;
    height: 55vh;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    border-radius: 20px 20px 0 0;
}

.carousel-cell-link {
    position: absolute;
    inset: 0;
    z-index: 10;
}

/* ===========================
   BANDEAU INFORMATIONS
=========================== */
.homepage-slider .informations {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 12px 18px;
    border-radius: 0 0 20px 20px;
}

.homepage-slider .informations h3 {
    text-transform: uppercase;
}

.homepage-slider .informations p {
    margin-top: 0.5rem;
    margin-bottom: 0;
}

/* ===========================
   RESPONSIVE — MOBILE
=========================== */
@media (max-width: 768px) {

    .homepage-slider .carousel-cell img {
        aspect-ratio: 9 / 10;
        height: auto;
    }

}
  

/* ==========================================================================

=======   EXPOSITIONS TEMPORAIRES

========================================================================== */
  
  .expotemp-item li {
    list-style: none;
  }
  
  .expotemp-link {
    display: flex;
    align-items: center;
    padding: 1.5rem 0;
    gap: 1rem;
    text-decoration: none;
    color: inherit; 
    width: 100%;
  }
  
  .expotemp-link img {
    width: 24px;
    height: auto;
    flex-shrink: 0;
  }
  
  .expotemp-link h3 {
    margin: 0;
    text-transform: uppercase;
  }
  
  .expotemp-link p {
    margin: 0;
    margin-left: auto;
    white-space: nowrap;
    font-weight: var(--semibold);
    font-family: var(--title);
    font-size: 1.5rem;
  }
  
  /* --- Style de la ligne de séparation --- */
  
  .expotemp-item hr {
    border: 0;
    background-color: var(--primary-color);
    margin: 0;
  }
    
  .expotemp-item::before {
    content: "";
    display: block;
    width: 100%;
    border-top: 1px solid var(--primary-color);
  }
  
  /* --- Mise à jour du Responsive --- */
  @media (max-width: 767px) {

    .expotemp-link {
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
        padding: 1rem 0;
    }
  
    .expotemp-link h3 {
        flex: 1;
    }
  
    .expotemp-link p {
        margin-left: calc(24px + 1rem);
        width: 100%;
        font-size: 1rem;
    }
  }
  

/* ==========================================================================

=======   PROGRAMMATION / EVENEMENTS

========================================================================== */

  #programmation-mamcs {
    background-color: var(--primary-color);
    color: var(--white);
  }
  
  #programmation-mamcs h2 {
    color: var(--white);
  }

  /* --- Entete de section --- */

  div#programmation-title {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 20px;
    margin-bottom: 2em;
}

div#programmation-title div {
    margin-right: 0;
    margin-left: auto;
}

.nav-arrows span {
    font-family: 'degular';
    font-size: 2rem;
    margin-left: 1rem;
    cursor: pointer;
}

/* --- Carrousel --- */

article.programmation-carousel-cell {
    width: 30vw; 
    margin-right: 20px;
    display: block; 
}

article.programmation-carousel-cell a:first-child {
    all: unset;
}

.programmation-card-image {
    width: 100%;
    aspect-ratio: 4 / 5;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.programmation-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.programmation-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 80px 20px 20px;
    background: linear-gradient(to top, rgb(0, 0, 0) 10%, rgba(0,0,0,0) 100%);
    z-index: 2;
}

.programmation-card-overlay h3 {
    font-size: 1.75rem;
    line-height: 1.2;
}

.programmation-card-overlay span {
    text-transform: capitalize;
}

a#programmation-cell-cta {
    margin-top: 1.5rem;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 5px 10px;
    transition: all 0.3s ease;
}

img#overlay-cta-icon {
    filter: invert(0);
    width: 18px;
    transition: all 0.3s ease;
}

a#programmation-cell-cta:hover {
    background-color: rgba(0, 0, 0, 0);
}

a#programmation-cell-cta:hover img {
    filter: invert(1);
}


@media (max-width: 767px) {

    /* --- Entete de section --- */

    div#programmation-title {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 30px;
    }

    div#programmation-title div {
        display: none;
    }

    /* --- Carrousel --- */

    article.programmation-carousel-cell {
        width: 75vw;
        margin-right: 15px;
    }

    .programmation-card-image {
        height: auto;
    }

}
  
/* ==========================================================================

=======   PRESENTATION MAMCS

========================================================================== */

section.presentation-mamcs div.container {
    display: grid;
    grid-template-columns: 55% 1fr;
    column-gap: 5em;
    align-items: center;
}
    
a#presentation-mamcs-cta {
    margin-top: 1.5rem;
    display: block;
}


div#presentation-mamcs-carousel .carousel-cell {
    width: 100%;
    aspect-ratio: 4 / 3;
}

div#presentation-mamcs-carousel {
    overflow: hidden;
    border-radius: 20px;
}

div#presentation-mamcs-carousel img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 20px;
}

section.presentation-mamcs .flickity-button {
    background: hsla(0, 0%, 0%, 0);
    color: var(--white);
}

section.presentation-mamcs ol.flickity-page-dots {
    margin-top: 1rem;
    position: initial;
}

@media (max-width: 767px) {
    
    section.presentation-mamcs div.container {
        grid-template-columns: none;
        row-gap: 2em;
    }

    div#presentation-mamcs-carousel {
        order: 1;
    }

    div#presentation-mamcs-carousel .carousel-cell {
        aspect-ratio: 16 / 9;
    }
}


/* ==========================================================================

=======   COLLECTION DU MUSEE

========================================================================== */

section#collection-musee {
    background-color: var(--primary-color);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

#collection-musee h2 {
    color: var(--white);
}

/* --- Layout 2 colonnes --- */

#collection-musee .grid-2-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    position: relative;
}


/* --- Colonne texte --- */

div#collection-musee-texte {
    padding: 3.5rem 0;
    position: relative;
    z-index: 2;
}

/* --- Colonne animation --- */

#collection-musee .loop-anim {
    position: relative;
    overflow: hidden;
    align-self: stretch;
}

#collection-musee .loop-anim ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    opacity: 0.5;
}

#collection-musee .loop-anim ul li {
    display: inline-block;
    width: 100%;
    margin: 0;
    list-style: none;
    text-align: center;
}

#collection-musee .loop-anim ul li img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- Animations --- */

#collection-musee .loop-anim ul:nth-child(1) {
    animation: loop-up 180s linear -120s infinite;
}
#collection-musee .loop-anim ul:nth-child(2) {
    animation: loop-up 180s linear -60s infinite;
}
#collection-musee .loop-anim ul:nth-child(3) {
    animation: loop-up 180s linear 0s infinite;
}

@keyframes loop-up {
    0%   { transform: translateY(100%); }
    100% { transform: translateY(-200%); }
}


@media (max-width: 767px) {
    #collection-musee .grid-2-columns {
        grid-template-columns: 1fr;
        position: relative;
    }

    #collection-musee .loop-anim {
        display: block; /* on réaffiche l'anim */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        opacity: 0.3;
    }

    div#collection-musee-texte {
        position: relative;
        z-index: 2; /* le texte passe au dessus */
    }
}



/* ==========================================================================

=======   ACTUALITES / BLOG

========================================================================== */

.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.news-section article.news-card {
    border: 1px solid var(--primary-color);
    border-radius: 20px;
    padding: 20px;
}

.news-section div.card-image {
    aspect-ratio: 16 / 9;
}

.news-section div.card-image img {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.news-card .card-meta {
    margin-top: 1rem;
}

section.news-section span.category-tag {
    margin-right: 1rem;
}

@media (max-width: 768px) {
    .news-grid {
        grid-template-columns: none;
    }
}



/* ==========================================================================

=======   MUSEUM PASS

========================================================================== */

@media (min-width: 768px) {
    section#museum-pass > div {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 4rem;
    }
    
    section#museum-pass img {
        margin-bottom: -10rem;
    }
}


@media (max-width: 767px) {
    section#museum-pass {
        margin-top: 9rem;
    }
    
    section#museum-pass > div {
        display: grid;
    }

    div#museum-pass-img img {
        width: 95%;
    }
    
    section#museum-pass img {
        margin-top: -100px;
    }
}
  
  
/* ==========================================================================

=======   PREPARATION DE LA VISITE / ACCES RAPIDE

========================================================================== */  

section#preparation-visite div:first-child {
    padding: 2rem;
    text-align: center;
    border: 1px solid var(--primary-color);
    border-radius: 20px;
}

section#preparation-visite div:last-child {
    text-align: center;
    margin-top: -20px;
}

ul.acces-visite {
    display: inline-flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

ul.acces-visite a.btn {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    transition: all 0.3s ease;
}

ul.acces-visite img {
    width: 20px;
    filter: invert(1);
    transition: all 0.3s ease;
}

ul.acces-visite a.btn:hover img {
    filter: invert(0);
}




/* ==========================================================================

=======   FOOTER

========================================================================== */


#site-footer {
    background-color: var(--primary-color);
    color: var(--white);
    font-family: 'Helvetica', sans-serif;
    padding-bottom: 40px;
    margin-top: 10vh;
}

#site-footer a {
    color: var(--white);
    text-decoration: none;
    position: relative;
}

/* Flèches décoratives des liens */
.link-arrow::after,
.accordion-content li a::after {
    content: " >";
    font-size: 0.8em;
    margin-left: 5px;
}

.link-arrow {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* =========================================
   ÉLÉMENTS ET GRILLE
   ========================================= */

/* --- TOP BAR (Newsletter & Social) --- */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 30px 0;
}

.site-footer h2 {
    text-transform: none;
    margin-bottom: 20px;
    font-size: 2.25rem;
    letter-spacing: -0.01em;
}

@media (max-width: 1024px) {
    .site-footer h2 {
        font-size: 1.75rem;
    }
}

@media (max-width: 767px) {
    .site-footer h2 {
        font-size: 1.5rem;
    }
}

.newsletter-block a {
    border: 1px solid var(--white);
    border-radius: 100px;
    padding: 5px 15px 8px;
    transition: all 0.3s ease;
}

#site-footer .newsletter-block a:hover {
    background-color: var(--white);
    color: var(--primary-color);
}

.social-icons { display: flex; align-items: center; }
.social-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--white);
    border-radius: 50%;
    margin-left: 10px;
    transition: all 0.3s ease;
    background-color: transparent;
    color: var(--white);
}
.social-icons svg { width: 18px; height: 18px; fill: currentColor; }
#site-footer .social-icons a:hover { background: var(--white); color: var(--primary-color); border-color: var(--white); }

/* Séparateur */
.footer-divider { 
    border: 0; 
    border-top: 1px solid #333; 
    margin: 10px 0 30px 0; 
    width: 100%;
}

p.address-text {
    margin-top: 0;
}

.footer-col.accordion-item span:first-child {
    text-transform: uppercase;
    font-size: 1.5rem;
}

@media (max-width: 1024px) {
    .footer-col.accordion-item span:first-child {
    font-size: 1.35rem;
    }
}

@media (max-width: 767px) {
    .footer-col.accordion-item span:first-child {
    font-size: 1.25rem;
    }
}


#site-footer .footer-grid a, #site-footer .footer-legal a {
    transition: all 0.3s ease;
}

#site-footer .footer-grid a:hover, #site-footer .footer-legal a:hover {
    opacity: 50%;
}

/* --- STRUCTURE ACCORDÉON / LISTES --- */
.accordion-content ul { list-style: none; padding: 0; margin: 0; }
.accordion-content li { margin-bottom: 12px; }
.accordion-content a { border-bottom: 1px solid var(--white); padding-bottom: 2px; }

.address-links a.link-arrow {
    display: inline-block;
    margin-bottom: 1rem;
}

.footer-legal span:first-child {
    padding-right: 5px;
}

.footer-legal span {
    font-size: 0.75rem;
    color: var(--white);
}

/* --- RESPONSIVE FOOTER : DESKTOP --- */
@media (min-width: 992px) {
    .footer-grid {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
        gap: 30px;
    }
    .accordion-header { margin-bottom: 20px; pointer-events: none; }
    .chevron { display: none; }
    .accordion-content { display: block !important; }
    
    .footer-bottom { text-align: left; }
    .footer-logos { margin-bottom: 30px; }
}

/* --- RESPONSIVE FOOTER : MOBILE --- */
@media (max-width: 991px) {
    .footer-top { flex-direction: column; align-items: flex-start; gap: 20px; }
    .social-icons { margin-top: 10px; }
    .social-icons a { margin-left: 0; margin-right: 10px; }

    .footer-grid { display: block; width: 100%; }
    .col-address { margin-bottom: 30px; }

    .accordion-item {
        border-bottom: 1px solid #333;
        width: 100%;
    }
    
    .accordion-header {
        cursor: pointer;
        padding: 15px 0;
        margin: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .chevron::after {
        content: '\2304';
        font-size: 1.5rem;
        transition: transform 0.3s ease;
        display: block;
    }

    .accordion-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }
    .accordion-item.active .accordion-content {
        max-height: 500px;
        padding-bottom: 20px;
    }
    .accordion-item.active .chevron::after { transform: rotate(180deg); }
}

/* --- FOOTER BOTTOM (Logos & Legal) --- */
.footer-bottom { margin-top: 50px; text-align: center; }

.footer-logos img { 
    height: 40px; 
    margin: 0 15px 20px 15px; 
    object-fit: contain; 
}

img#logo-musees-ville { max-width: 250px; }

.footer-legal { font-size: 0.75rem; color: #aaa; }
.footer-legal a { color: #aaa; margin: 0 5px; }