/*
Theme Name: Senso Perso 1.2
Author: Jérémie Sigalla
Description: Thème sur mesure minimaliste pour SensoProjekt
Version: 1.2
*/

/* ==========================
ALL MY FONTS ARE HERE 2B FOUND
=============================*/



@font-face {
    font-family: "Satoshi";
    src: url("./fonts/Satoshi-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
}

body {
    background-color: white;
    background-repeat: repeat;
    font-family: 'Satoshi', sans-serif;
    font-size: small   ;
    margin: 0px;

}





/*
  ______  ________  __      __  __        ________
 /      \|        \|  \    /  \|  \      |        \
|  $$$$$$\\$$$$$$$$ \$$\  /  $$| $$      | $$$$$$$$
| $$___\$$  | $$     \$$\/  $$ | $$      | $$__
 \$$    \   | $$      \$$  $$  | $$      | $$  \
 _\$$$$$$\  | $$       \$$$$   | $$      | $$$$$
|  \__| $$  | $$       | $$    | $$_____ | $$_____
 \$$    $$  | $$       | $$    | $$     \| $$     \
  \$$$$$$    \$$        \$$     \$$$$$$$$ \$$$$$$$$
*/




@font-face {
    font-family: "Satoshi";
    src: url("./fonts/Satoshi-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
}

body {
    background-color: white;
    background-repeat: repeat;
    font-family: 'Satoshi', sans-serif;
    font-size: small   ;

}



        /* --- 

888                             888                  
888                             888                  
888                             888                  
88888b.   .d88b.   8888b.   .d88888  .d88b.  888d888 
888 "88b d8P  Y8b     "88b d88" 888 d8P  Y8b 888P"   
888  888 88888888 .d888888 888  888 88888888 888     
888  888 Y8b.     888  888 Y88b 888 Y8b.     888     
888  888  "Y8888  "Y888888  "Y88888  "Y8888  888     
                                                     
                                                     
                                                     

        --- */



* {
    box-sizing: border-box;
}

/* ==========================================
   RÉDUCTION DE LA TYPO DU HEADER SELON LA LARGEUR
   ========================================== */



/* --- HEADER GLOBAL --- */
.site-header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 1000;
    border-bottom: 1.5px solid #000;
    transition: all 0.4s ease;
}

.header-inner {
    position: relative;
    display: flex;
    padding: 10px;
    margin-top: 20px;
    flex-direction: column;
    padding: 20px 40px 12px;
    transition: all 0.4s ease;
}

/* --- ZONE DU LOGO --- */
/* S'assure que le logo cliquable se comporte correctement en flexbox */
a.logo-container {
    display: flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
}
.logo-square {
    position: relative;
    z-index: 10;
    display: block;
    width: auto;
    height: 75px;
    transition: height 0.4s ease;
}

.logo-square {
    transition: transform 0.3s ease;
}

.logo-link:hover .logo-square {
    transform: scale(1.1); /* Zoom de 10% */
}

.logo-text-wrapper {
    overflow: hidden;
    max-width: 600px;
    margin-left: 15px;
    opacity: 1;
    transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin 0.4s ease;
}

.logo-text {
    display: block;
    width: auto;
    height: 55px;
    transform: translateX(0);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* --- BARRE DE NAVIGATION DESKTOP --- */
.main-nav {
    width: 100%;
    padding-top: 15px;
    transition: all 0.4s ease;
}

.main-nav ul {
    display: flex;
    align-items: center;
    justify-content: center; /* Centre les options horizontalement */
    gap: 30px; /* Resserre l'espace entre chaque option (ajustez cette valeur si besoin) */
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav li a {
    color: #000;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

/* Ajout des classes WordPress (.current-menu-item, .current_page_item) */
.main-nav li.active a,
.main-nav li.current-menu-item a,
.main-nav li.current_page_item a,
.main-nav li a:hover {
    color: #2dd4bf;
}

/* --- BOUTON HAMBURGER --- */
.menu-toggle {
    position: absolute;
    top: 50%;
    right: 40px;
    z-index: 1100;
    display: none;
    width: 32px;
    height: 24px;
    padding: 0;
    flex-direction: column;
    justify-content: space-between;
    transform: translateY(-50%);
    background: none;
    border: 0;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #000;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.menu-toggle.active span:nth-child(1) {
    transform: translateY(10.5px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: translateY(-10.5px) rotate(-45deg);
}

/* --- MENU MOBILE PLEIN ÉCRAN --- */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
    display: flex;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.mobile-menu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mobile-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.mobile-menu li {
    margin: 20px 0;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.mobile-menu.open li {
    opacity: 1;
    transform: translateY(0);
}

.mobile-menu.open li:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu.open li:nth-child(2) { transition-delay: 0.15s; }
.mobile-menu.open li:nth-child(3) { transition-delay: 0.2s; }
.mobile-menu.open li:nth-child(4) { transition-delay: 0.25s; }
.mobile-menu.open li:nth-child(5) { transition-delay: 0.3s; }
.mobile-menu.open li:nth-child(6) { transition-delay: 0.35s; }
.mobile-menu.open li:nth-child(7) { transition-delay: 0.4s; }

.mobile-menu li a {
    color: #000;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.mobile-menu li a:hover {
    color: #2dd4bf;
}

/* --- ÉTAT COMPACT AU SCROLL --- */
.site-header.scrolled .header-inner {
    flex-direction: row;
    align-items: center;
    padding: 6px 40px;
    margin-top: 0;
}
.site-header.scrolled .logo-container {
    flex-shrink: 0;
    margin-right: 40px;
    margin-bottom: 0;
}

.site-header.scrolled .logo-square {
    height: 38px;
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}


.site-header.scrolled .logo-text-wrapper {
    max-width: 0;
    margin-left: 0;
    opacity: 0;
}

.site-header.scrolled .logo-text {
    transform: translateX(-00px);
}
.site-header.scrolled .main-nav {
    flex-grow: 1;
    padding-top: 0;
}



@media (max-width: 1200px) {
    .main-nav li a {
        font-size: 17px; /* Réduit la taille des éléments du menu (initialement à 20px) */
        letter-spacing: 0.5px;
    }
}

@media (max-width: 1100px) {
    .main-nav li a {
        font-size: 15px; /* Réduit encore un peu avant que le menu hamburger ne prenne le relais à 1024px */
        letter-spacing: 0.2px;
    }
}









/* ==========================================
   ASCII — repère de la section footer
   ========================================== */
/*
    ██████                     █████
   ███▒▒███                   ▒▒███
  ▒███ ▒▒▒   ██████   ██████  ███████    ██████  ████████
 ███████    ███▒▒███ ███▒▒███▒▒▒███▒    ███▒▒███▒▒███▒▒███
▒▒▒███▒    ▒███ ▒███▒███ ▒███  ▒███    ▒███████  ▒███ ▒▒▒
  ▒███     ▒███ ▒███▒███ ▒███  ▒███ ███▒███▒▒▒   ▒███
  █████    ▒▒██████ ▒▒██████   ▒▒█████ ▒▒██████  █████
 ▒▒▒▒▒      ▒▒▒▒▒▒   ▒▒▒▒▒▒     ▒▒▒▒▒   ▒▒▒▒▒▒  ▒▒▒▒▒
*/

/* --- FOOTER --- */
.site-footer {
    position: fixed;
    bottom: 0;

        left: 0; /* Ajouté par sécurité pour qu'il prenne toute la largeur */
        z-index: 1000; /* Pour qu'il reste bien au-dessus du contenu au scroll */


    width: 100%;

    background-color: #fff;
    border-top: 1px solid #29e0d7;
}


.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;;
    padding: 10px 30px 10px 10px;

}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-logo-img {
    display: block;
    width: auto;
    height: 34px;
    padding: 2px;
    object-fit: contain;
}

.footer-socials {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-socials a {
    display: inline-flex;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.footer-socials a img {
    display: block;
    width: 35px;
    height: 35px;
    object-fit: contain;
}

.footer-socials a:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

/* --- NAVIGATION DU FOOTER --- */
.footer-nav ul {
    display: flex;
    flex-direction: column;    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-nav li {
    text-align: right;
}

.footer-nav li a {
    display: block;
    color: #29e0d7;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.8px;
    line-height: 1.7;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-nav li a:hover {
    color: #000;
}

.footer-square-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.footer-square-icon img {
    display: block;
    width: 33px;
    height: 33px;
    object-fit: contain;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-square-icon:hover img {
    transform: rotate(360deg);
}

/* ==========================================
   MENU HAMBURGER : écrans de 1024 px et moins
   ========================================== */
@media (max-width: 1024px) {
    .main-nav {
        display: none !important;
    }

    .menu-toggle {
        display: flex;
    }

    .site-header .header-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 6px 40px;
    }

    .site-header .logo-container {
        flex-shrink: 0;
        margin-right: 0;
        margin-bottom: 0;
    }

    .site-header .logo-square {
        height: 38px;
    }

    .site-header .logo-text-wrapper {
        max-width: 0;
        margin-left: 0;
        opacity: 0;
    }

    .site-header .logo-text {
        transform: translateX(-100px);
    }
}

@media (max-width: 480px) {
    .site-header .header-inner,
    .site-header.scrolled .header-inner {
        padding-right: 20px;
        padding-left: 20px;
    }

    .menu-toggle {
        right: 20px;
    }

    .site-footer {
        padding-right: 20px;
        padding-left: 20px;
    }
}


/* 1. Sécurité globale pour éviter les débordements et le scroll horizontal indésirable */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* 2. Encadrement propre de votre contenu principal */
.site-main {
    max-width: 900px;
    margin: 40px auto;
    padding-top: 170px;
    padding-bottom: 190px;
    width: 100%; /* S'assure qu'il prend toute la place disponible jusqu'à 900px max */
    box-sizing: border-box;
}

/* 3. Sécurité pour que les images ne débordent jamais de leur conteneur */
.site-main img {
    max-width: 100%;
    height: auto;
}



.header {
    background-color: #f5f5f5; /* Couleur de fond gris clair */
    padding: 20px; /* Ajoute un padding de 20 pixels autour du header */
    text-align: center; /* Centre le texte à l'intérieur du header */
}

.site-branding {
    text-align: center;
    margin-bottom: 20px; /* Un petit espace entre le logo et le menu */
     margin-top:    20px; /* Un petit espace entre le logo et le menu */
}

/* On cible la liste du menu */
.main-navigation ul {
    list-style: none; /* Enlève les puces (points noirs) */
    display: flex;     /* Aligne les éléments côte à côte horizontalement */
    justify-content: center; /* <-- C'est cette ligne qu'il faut ajouter pour centrer */
    gap: 20px;         /* Met un espace de 20 pixels entre chaque lien */
    padding: 20px; /* Ajoute un padding de 100 pixels autour de la liste */
}

.main-navigation a {
    color: #333333;              /* Votre gris foncé */
    text-decoration: none;       /* Enlève le soulignement */
    font-size: 20px;                 /* Taille de police */
    transition: color 0.3s ease; /* La transition fluide doit être ici */
}


.main-navigation a:hover {
    color: #06c8d2; /* La couleur turquoise de votre logo par exemple ! */
}


.site-main {
    max-width: 900px;  /* Largeur maximale de votre contenu */
    margin:  auto; /* Centre la boîte horizontalement et ajoute de l'espace en haut/bas */
    padding: auto;   /* Ajoute une marge de sécurité (padding) sur les côtés pour les petits écrans */
    ;
}




/* Grille spécifique pour les coups de cœur */
.coups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 40px;
    margin-top: 40px;
}

.coup-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.coup-image img {
    width: 100%;
    height: auto;
    display: block;
}

.coup-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #666;
}

.coup-title {
    font-size: 1.2rem;
    margin: 0;
}

.coup-title a {
    text-decoration: none;
    color: #000;
}

.coup-title a:hover {
    color: #00bcd4; /* Votre couleur turquoise d'accent */
}





/* Style pour la page d'article individuel */
.single-post-main {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}

.single-title {
    font-size: 2rem;
    margin-bottom: 20px;
}

.single-meta {
    margin-bottom: 20px;
    color: #666;
    font-size: 0.95rem;
}

.single-thumbnail {
    margin-bottom: 30px;
}

.single-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.article-content {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #333;
}



















        /* --- 

▗▄▄▄▖ ▗▖ ▗▖▗▄▄▄▖                
▐▌ ▐▌ ▐▌ ▐▌  █                  
▐▌ ▐▌ ▐▌ ▐▌  █                  
▐▙▄▟▙▖▝▚▄▞▘▗▄█▄▖                
                                
                                
                                
 ▗▄▄▖ ▗▄▖ ▗▖  ▗▖▗▖  ▗▖▗▄▄▄▖ ▗▄▄▖
▐▌   ▐▌ ▐▌▐▛▚▞▜▌▐▛▚▞▜▌▐▌   ▐▌   
 ▝▀▚▖▐▌ ▐▌▐▌  ▐▌▐▌  ▐▌▐▛▀▀▘ ▝▀▚▖
▗▄▄▞▘▝▚▄▞▘▐▌  ▐▌▐▌  ▐▌▐▙▄▄▖▗▄▄▞▘
                                
                                
                                
▗▖  ▗▖ ▗▄▖ ▗▖ ▗▖ ▗▄▄▖           
▐▛▚▖▐▌▐▌ ▐▌▐▌ ▐▌▐▌              
▐▌ ▝▜▌▐▌ ▐▌▐▌ ▐▌ ▝▀▚▖           
▐▌  ▐▌▝▚▄▞▘▝▚▄▞▘▗▄▄▞▘           
                                
                                
       --- */

      

main, .page-container {
    min-height: calc(100vh - 120px);
}

.about-container {
    max-width: 900px;
    margin: 40px auto 0px auto;
    padding: 0 40px;
}

/* --- EN-TÊTE DE SECTION (Carré bleu + Titre) --- */
.section-title-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0px;
    margin-top: 150px;
}

.section-title-wrapper img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.section-title {
    font-weight: 700;
    font-size: 18px;
    color: #2dd4bf;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
}
/* Conteneur global de la page "Qui sommes-nous ?" */
.about-container {
    max-width: 900px;
    margin: 0 auto;
    /* Marge haute adaptée pour passer sous le header fixe */
    margin-top: 190px; 
    /* Padding bas très important pour éviter que le contenu ne passe sous le footer fixe */
    padding: 0 40px 160px 40px; 
    transition: margin-top 0.4s ease;
}

/* Si le header se réduit au scroll, on remonte légèrement le conteneur */
body:has(header.scrolled) .about-container,
header.scrolled ~ main .about-container {
    margin-top: 100px;
}

/* --- EN-TÊTE DE SECTION (Carré bleu + Titre) --- */
.section-title-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    margin-top: 40px; /* Nettoyé pour éviter un décalage excessif */
}

.section-title-wrapper img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.section-title {
    font-weight: 700;
    font-size: 18px;
    color: #2dd4bf;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Ligne de séparation turquoise sous le titre */
.about-divider {
    width: 100%;
    height: 1px;
    background-color: #2dd4bf;
    margin-bottom: 35px;
}

.about-text {
    font-size: 17px;
    line-height: 1.7;
    font-weight: 400;
    max-width: 700px;
    margin: 0 auto;
    color: #000000;
}

.about-text p {
    margin-bottom: 25px;
    text-align: left;
}

/* --- SECTION NOS MEMBRES & TROMBINOSCOPE --- */
.members-section {
    margin-top: 60px;
    margin-bottom: 150px;
}

.members-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 60px;
    margin-top: 30px;

}

/* Correction de la carte membre pour aligner proprement photo et texte */
.member-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.member-photo {
    width: 110px;
    height: 110px;
    object-fit: cover;
    flex-shrink: 0; /* Empêche l'image d'être écrasée ou déplacée */
}

.member-info {
    display: flex;
    flex-direction: column;
}

.member-info h3 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.member-role {
    font-size: 18px;
    margin-bottom: -1px;
    color: #333333;
}

.member-bio {
    font-size: 14px;
    line-height: 1;
    color: #555555;
        font-style: italic;

}

.hierarchie {
    font-weight: 700;
    font-size: 18px;
    color: #2dd4bf;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    grid-column: 1 / -1;
    margin-top: 50px;
    margin-bottom: 20px;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .about-container {
        padding: 0 20px 160px 20px;
        margin-top: 90px;
    }
    
    .section-title {
        font-size: 16px;
    }

    .members-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}






/*--
 mm                                                                   
 ##                              ##                                   
 ##m###m    m####m   ##    ##  #######    m####m   ##m####m           
 ##"  "##  ##"  "##  ##    ##    ##      ##"  "##  ##"   ##           
 ##    ##  ##    ##  ##    ##    ##      ##    ##  ##    ##           
 ###mm##"  "##mm##"  ##mmm###    ##mmm   "##mm##"  ##    ##           
 "" """      """"     """" ""     """"     """"    ""    ""           
                                                                      
                                                                      
                                                                      
                        ##               mm                           
             ##         ""               ##                           
 mm#####m  #######    ####      m#####m  ## m##"   "##  ###           
 ##mmmm "    ##         ##     ##"    "  ##m##      ##m ##            
  """"##m    ##         ##     ##        ##"##m      ####"            
 #mmmmm##    ##mmm   mmm##mmm  "##mmmm#  ##  "#m      ###             
  """"""      """"   """"""""    """""   ""   """     ##              
                                                    ###    


/* --- BOUTON STICKY DROITE --- */
.sticky-btn {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #ffffff;
    border: 1px solid #2dd4bf;
    border-right: none;
    color: #000000;
    padding: 14px 10px;
    text-decoration: none;
    font-family: 'Satoshi', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    z-index: 1000;
    transition: all 0.2s ease;
}

.mobile-menu.open ~ * .sticky-btn,
body:has(.mobile-menu.open) .sticky-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.sticky-btn:hover {
    background-color: #2dd4bf;
    color: #ffffff;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .about-container {
        padding: 0 20px;
        margin: 20px auto;
    }
    
    .section-title {
        font-size: 16px;
    }

    .members-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}








/*--


   #    ######  ####### ###  #####  #       ####### 
  # #   #     #    #     #  #     # #       #       
 #   #  #     #    #     #  #       #       #       
#     # ######     #     #  #       #       #####   
####### #   #      #     #  #       #       #       
#     # #    #     #     #  #     # #       #       
#     # #     #    #    ###  #####  ####### ####### 



--*/

/* ==========================================
   PAGE ARTICLE / SINGLE
   ========================================== */

/* Structure générale de la grille */
.article-container {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    margin-top: 190px; /* Espace initial sous le grand header */
    margin-bottom: 120px; /* Espace avant le footer */
    padding: 20px 40px 140px 40px; /* Padding bottom pour ne pas passer sous le footer */
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 60px;
    transition: margin-top 0.4s ease;
}


/* --- METADONNÉES / TAGS & TAXONOMIES EN BAS DE COLONNE --- */
.article-footer-meta .tags {
    font-size: 13px;          /* Légèrement plus grand (était ~10-11px) */
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #000000;
    line-height: 1.5;
}

/* Quand on scrolle : on réduit la marge haute du conteneur global */
body:has(header.scrolled) .article-container,
header.scrolled + .article-container,
header.scrolled ~ .article-container,
header.scrolled ~ main .article-container {
    margin-top: 80px;
}

.article-main-content {
    grid-column: 2;
}

.article-image-container {
    width: 100%;
    margin-bottom: 40px;
    margin-top: 0;
}

.article-image-container img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #000000;
}

/* --- DESKTOP : COLONNE DE GAUCHE FIXE --- */
@media (min-width: 1025px) {
    .article-sidebar {
        position: fixed;
        top: 190px; /* Position sous le grand header */
        bottom: 40px; /* S'arrête avant le footer pour ne jamais le croiser */
        width: 420px;
        height: 400px; /* Hauteur totale de la fenêtre moins le header et le footer */
        
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Écarte le titre en haut et les tags en bas */
        border-right: 2px solid #2dd4bf;
        padding-right: 40px;
        text-align: right;
        overflow-y: auto; /* S'il y a beaucoup de texte, un scroll propre apparaît uniquement ici */
        transition: top 0.4s ease;
        
    }

    /* Quand le header est réduit (.scrolled) */
    body:has(header.scrolled) .article-sidebar,
    header.scrolled + .article-container .article-sidebar,
    header.scrolled ~ .article-container .article-sidebar,
    header.scrolled ~ main .article-sidebar {
        top: 80px; /* Remonte proprement sous le header compact */
    }
}

/* --- MOBILE & TABLETTE (< 1024px) --- */
@media (max-width: 1024px) {
    .article-container {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 80px;
        padding: 20px 20px 140px 20px;
    }

    .article-main-content {
        grid-column: 1;
    }

    .article-sidebar {
        position: static;
        width: 100%;
        height: auto;
        max-height: none;
        border-right: none;
        border-bottom: 2px solid #2dd4bf;
        padding-right: 0;
        padding-bottom: 30px;
        text-align: left;
        font-size: 14px;          /* Augmente légèrement les détails (durée, lieu, etc.) */
        line-height: 1.6;
}
    }



    



/*
 M)mm mmm  E)eeeeee N)n   nn U)    uu    
M)  mm  mm E)       N)nn  nn U)    uu    
M)  mm  mm E)eeeee  N) nn nn U)    uu    
M)  mm  mm E)       N)  nnnn U)    uu    
M)      mm E)       N)   nnn U)    uu    
M)      mm E)eeeeee N)    nn  U)uuuu     
                                         
                                         
                             ##          
                                         
p)PPPP   r)RRR   o)OOO       j)          
p)   PP r)   RR o)   OO      j)          
p)   PP r)      o)   OO      j)          
p)PPPP  r)       o)OOO       j)          
p)                      j)   JJ          
p)                       j)JJJ           


*/







/* ==========================================
   AGENCEMENT ET STYLES DE LA PAGE PROJECTIONS
   ========================================== */

.articles-container {
    width: 100%;
    max-width: 1100px;
    padding: 0 40px;
    margin: 190px auto 170px auto;
    display: flex;
    flex-direction: column;
}

/* Carte d'article : Ligne horizontale */
.articles-container .article-card {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 50px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #29E0D7; /* Ligne turquoise caractéristique */
    padding: 35px 0;
    transition: background-color 0.3s ease;
}

.articles-container .article-card:last-child {
    border-bottom: 1px solid #29E0D7;
}

/* Image à gauche (taille fixe proportionnelle type maquette) */
.articles-container .article-image-wrapper {
    width: 380px;
    height: 220px;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #f5f5f5;
}

.articles-container .article-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease, filter 0.4s ease;
}

/* Texte & Informations à droite (alignés à gauche) */
.articles-container .article-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.articles-container .article-title {
    font-size: 26px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.15;
    color: #000000;
    margin: 0 0 12px 0;
    transition: color 0.3s ease;
}

.articles-container .article-details {
    font-size: 15px;
    color: #1a1a1a;
    line-height: 1.6;
}

.articles-container .article-author-year {
    font-weight: 500;
    margin: 0 0 2px 0;
}

.articles-container .article-date-time {
    font-weight: 400;
    margin: 0;
}

/* EFFET HOVER SUR LES CARTES ET TITRES */
.articles-container .article-card:hover .article-image-wrapper img {
    transform: scale(1.03);
    filter: brightness(0.95);
}

.articles-container .article-card:hover .article-title,
.articles-container .article-title a:hover {
    color: #2dd4bf !important;
}

/* --- PAGINATION NUMÉRIQUE & TEXTUELLE --- */
.pagination-numbers-container ul.page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pagination-numbers-container .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    color: #000000;
    border: 1px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.pagination-numbers-container .page-numbers:hover {
    color: #2dd4bf;
}

.pagination-numbers-container .page-numbers.current {
    color: #2dd4bf;
    border-color: #2dd4bf;
}

/* --- RESPONSIVE MOBILE / TABLETTE --- */
@media (max-width: 900px) {
    .articles-container {
        padding: 0 20px;
        margin-top: 100px;
    }

    .articles-container .article-card {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 30px 0;
    }

    .articles-container .article-image-wrapper {
        width: 100%;
        height: 220px;
    }

    .articles-container .article-content {
        text-align: left;
    }
}



/* ==========================================
   SECTION ACCUEIL / PROJECTIONS (ISOLÉ)
   ========================================== */



/* --
                                                 
                                                 
                                                 
                                                                                         
       db         ,ad8888ba,    ,ad8888ba,   88        88  88888888888  88  88           
      d88b       d8"'    `"8b  d8"'    `"8b  88        88  88           88  88           
     d8'`8b     d8'           d8'            88        88  88           88  88           
    d8'  `8b    88            88             88        88  88aaaaa      88  88           
   d8YaaaaY8b   88            88             88        88  88"""""      88  88           
  d8""""""""8b  Y8,           Y8,            88        88  88           88  88           
 d8'        `8b  Y8a.    .a8P  Y8a.    .a8P  Y8a.    .a8P  88           88  88           
d8'          `8b  `"Y8888Y"'    `"Y8888Y"'    `"Y8888Y"'   88888888888  88  88888888888  
                                                                                         
                                                                                                                                    
                                                 
-- */
/* ==========================================
   PAGE D'ACCUEIL : HERO DÉCOLLÉ, ÉQUILIBRÉ & HOVER
   ========================================== */
.site-main-home {
    padding-top: 200px;
    
}

.hero-full-container {
    width: 100%;
    max-width: 960px;
    margin: 0 auto 60px auto;  
    height: 330px;
    display: flex;
    align-items: stretch;
    background-color: #ffffff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}



/* Carte de gauche (Infos) */
.hero-vertical-card {
    width: 310px;
    flex-shrink: 0;
    padding: 18px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 4px;
    transition: background-color 0.3s ease;
}

.hero-vertical-card:hover {
    background-color: #fcfcfc;
}



.card-artist {
    font-size: 30px;
    font-weight: 500;
    color: #000000;
    margin: 0;
}

.card-title {
    font-size: 30px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 3px 0;
}

.card-title a,
.card-title a:visited,
.card-title a:focus {
    color: #000000;
    text-decoration: none;
    transition: color 0.3s ease;
}

.card-title a:hover {
    color: #2dd4bf;
}

.card-day {
    font-size: 100px;
    font-weight: 900;
    line-height: 1;
    color: #2dd4bf;
    transition: transform 0.3s ease;
}

/* Petit effet dynamique sur le chiffre du jour au survol de la carte */
.hero-vertical-card:hover .card-day {
    transform: scale(1.05);
}

.card-month {
    font-size: 16px;
    font-weight: 900;
    color: #2dd4bf;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.card-location {
    font-size: 12px;
    font-weight: 700;
    color: #000000;
    margin: 0;
}

.card-time {
    font-size: 11px;
    font-weight: 400;
    color: #666666;
    margin: 0;
}

/* Image principale de droite avec effet zoom (hover) */
.hero-full-media {
    flex-grow: 1;
    height: 330px;
    background-color: #ffffff;
    overflow: hidden;
}

.hero-full-media img,
.hero-full-media a {
    width: 100%;
    height: 100%;
    display: block;
}

.hero-full-media img {
    object-fit: contain;
    object-position: center;
    background-color: #fafafa;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s ease;
}

.hero-full-media a:hover img {
    transform: scale(1.03); /* Zoom élégant de 3% sur l'image */
    filter: brightness(1.02);
}


/* ==========================================
   PROJECTIONS PASSÉES (BAS DE PAGE)
   ========================================== */
.past-projections-section {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 20px 200px 20px;
    text-align: center;
    text-decoration: none;
}

.past-projections-title {
    font-size: 13px;
    font-weight: 900;
    color: #000000;
    letter-spacing: 1px;
    margin-bottom: 20px;
    text-transform: uppercase;
    text-decoration: none;
}

.projections-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
        text-decoration: none;
}

.projection-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease;
        text-decoration: none;
}

.projection-card:hover {
    transform: translateY(-4px); /* Légère lévitation de la carte au survol */
}

.projection-thumb {
    width: 100%;
    height: 140px;
    overflow: hidden;
    margin-bottom: 6px;
    background-color: #ffffff;
}

.projection-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.projection-card:hover .projection-thumb img {
    transform: scale(1.06); /* Zoom sur les miniatures des projections passées */
}

.film-title {
    font-size: 12px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 2px 0;
    line-height: 1.2;
    transition: color 0.3s ease;
        text-decoration: none;
}

.projection-card:hover .film-title {
    color: #2dd4bf; /* Devient turquoise au survol */
}

.film-info {
    font-size: 10px;
    font-weight: 400;
    color: #666666;
    margin: 0;
        text-decoration: none;
}



/* ==========================================
   ADAPTATIF / RESPONSIVE (Tablettes & Mobiles)
   ========================================== */
@media (max-width: 900px) {
    .site-main-home {
        padding-top: 140px;
    }

    .hero-full-container {
        flex-direction: column;
        height: auto;
        max-width: 100%;
        padding: 0 15px;
    }

    .hero-vertical-card {
        width: 100%;
        padding: 25px 15px;
        height: auto;
    }

    .hero-full-media {
        width: 100%;
        height: 260px;
    }
}
/* ==========================================
   PROJECTIONS PASSÉES : FORMAT PAYSAGE HARMONIEUX (RESPONSIVE)
   ========================================== */
.projections-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.projection-thumb {
    width: 100%;
    height: 140px; /* Hauteur fixe pour garantir l'uniformité du format paysage */
    overflow: hidden;
    margin-bottom: 6px;
    background-color: #ffffff;
}

.projection-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recadre proprement l'image pour qu'elle remplisse le conteneur paysage sans se déformer */
    object-position: center;
    display: block;
}

/* --- ADAPTATIF MOBILE / TABLETTE --- */
@media (max-width: 900px) {
    .projections-grid {
        grid-template-columns: repeat(3, 1fr); /* Conserve les 3 éléments côte à côte ou s'adapte proprement */
        gap: 15px;
    }
    
    .projection-thumb {
        height: 100px; /* Hauteur proportionnelle et uniforme sur petits écrans en format paysage */
    }
}

/* ==========================================
   SUPPRESSION DES SOULIGNEMENTS SUR LES PROJECTIONS PASSÉES
   ========================================== */
.past-projections-section a,
.past-projections-section a:hover,
.past-projections-section a:focus,
.past-projections-section a:visited,
.projection-card a,
.past-link {
    text-decoration: none !important;
}











/*

                                                             
                                                             
                 u.      x.    .      .d``                   
      .    ...ue888b   .@88k  z88u    @8Ne.   .u             
 .udR88N   888R Y888r ~"8888 ^8888    %8888:u@88N            
<888'888k  888R I888>   8888  888R     `888I  888.           
9888 'Y"   888R I888>   8888  888R      888I  888I           
9888       888R I888>   8888  888R      888I  888I           
9888      u8888cJ888    8888 ,888B .  uW888L  888'           
?8888u../  "*888*P"    "8888Y 8888"  '*88888Nu88P            
 "8888P'     'Y"        `Y"   'YP    ~ '88888F`              
   "P'                                  888 ^                
                                        *8E                  
                                        '8>                  
                                         "                   
                                                             
                                                             
                 u.                 x.    .        .u    .   
      .    ...ue888b       .u     .@88k  z88u    .d88B :@8c  
 .udR88N   888R Y888r   ud8888.  ~"8888 ^8888   ="8888f8888r 
<888'888k  888R I888> :888'8888.   8888  888R     4888>'88"  
9888 'Y"   888R I888> d888 '88%"   8888  888R     4888> '    
9888       888R I888> 8888.+"      8888  888R     4888>      
9888      u8888cJ888  8888L        8888 ,888B .  .d888L .+   
?8888u../  "*888*P"   '8888c. .+  "8888Y 8888"   ^"8888*"    
 "8888P'     'Y"       "88888%     `Y"   'YP        "Y"      
   "P'                   "YP'                                
                                                             
                                                             
                                                             
*/








/* ==========================================
   PAGE COUPS DE CŒUR (CDC) - CENTRÉ & PADDING
   ========================================== */

/* ==========================================
   ALIGNEMENT DU PADDING HAUT COUPS DE CŒUR
   ========================================== */

   /* ==========================================
   CORRECTION DES LIENS (PAGE COUPS DE CŒUR)
   ========================================== */

/* Supprime le soulignement et hérite de la couleur noire initiale pour les liens de la liste */
.cdc-list a {
    text-decoration: none;
    color: inherit;
}

/* S'assure que le survol de la carte active bien les effets du titre et du cœur */
.cdc-item-link-wrapper {
    display: block;
    text-decoration: none;
}

.cdc-item-link-wrapper:hover {
    text-decoration: none;
}
.cdc-main-container {
    max-width: 1050px;
    margin: 0 auto;
    margin-top: 190px; /* Aligné exactement comme .articles-container */
    margin-bottom: 120px;
    padding: 0 40px 140px 40px;
}

.cdc-list {
    display: flex;
    flex-direction: column;
    gap: 70px;
    align-items: center;
}

.cdc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    width: 100%;
}

.cdc-item--reverse {
    flex-direction: row-reverse;
}

.cdc-info-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: right;
}

.cdc-item--reverse .cdc-info-block {
    text-align: left;
}

.cdc-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 12px;
}

.cdc-item--reverse .cdc-title-wrapper {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* --- TITRE DE L'ARTICLE & HOVER (NOIR -> BLEU TURQUOISE) --- */
.cdc-item-title {
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
    color: #000000;
    line-height: 1.15;
    margin: 0;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

/* Passage du titre en bleu/turquoise au survol */
.cdc-item:hover .cdc-item-title {
    color: #2dd4bf;
}

/* --- ICÔNE CŒUR & ANIMATION BATTEMENT --- */
.cdc-heart-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cdc-heart-icon img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
    transition: transform 0.2s ease;
}

/* Animation battement de cœur au survol */
.cdc-item:hover .cdc-heart-icon img {
    animation: cdcHeartbeat 0.8s infinite linear;
}

@keyframes cdcHeartbeat {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.2);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.2);
    }
    70% {
        transform: scale(1);
    }
}

.cdc-meta {
    font-size: 15px;
    color: #000000;
    line-height: 1.5;
}

.cdc-artist-year {
    font-weight: 500;
    margin: 0 0 4px 0;
}

.cdc-date-time {
    font-weight: 400;
    margin: 0;
}

.cdc-image-block {
    width: 440px;
    height: 240px;
    flex-shrink: 0;
    overflow: hidden;
}

.cdc-image-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.cdc-image-block a:hover img {
    transform: scale(1.03);
}

/* --- ADAPTATION MOBILE (< 850px) --- */
@media (max-width: 850px) {
    .cdc-main-container {
        margin-top: 100px;
        padding: 0 20px 140px 20px;
    }

    .cdc-item,
    .cdc-item--reverse {
        flex-direction: column-reverse;
        gap: 20px;
    }

    .cdc-image-block {
        width: 100%;
        height: 220px;
    }

    .cdc-info-block,
    .cdc-item--reverse .cdc-info-block {
        text-align: left;
    }

    .cdc-title-wrapper,
    .cdc-item--reverse .cdc-title-wrapper {
        justify-content: flex-start;
        flex-direction: row;
    }
}





/*

                                                      
                                                      
▄▄▄▄   ▄▄▄  ▄▄▄▄  ▄▄▄▄  ▄▄▄▄▄                         
██▄██ ██▀██ ██▄█▄ ██▄█▄ ██▄▄                          
██▄█▀ ██▀██ ██ ██ ██ ██ ██▄▄▄                         
                                                      
                                                      
                                                      
▄▄▄▄  ▄▄▄▄▄  ▄▄▄▄ ▄▄ ▄▄ ▄▄▄▄▄ ▄▄▄▄   ▄▄▄▄ ▄▄ ▄▄ ▄▄▄▄▄ 
██▄█▄ ██▄▄  ██▀▀▀ ██▄██ ██▄▄  ██▄█▄ ██▀▀▀ ██▄██ ██▄▄  
██ ██ ██▄▄▄ ▀████ ██ ██ ██▄▄▄ ██ ██ ▀████ ██ ██ ██▄▄▄ 
                                                      

*/







/* ==========================================
   BARRE DE RECHERCHE UNIFIÉE POUR TOUT LE SITE
   ========================================== */
.search-bar-container {
    max-width: 650px;
    margin: 0 auto 40px auto; /* Centre la barre sur toutes les pages */
    padding: 0 20px;
    width: 100%;
}

.search-form {
    display: flex;
    align-items: center;
    border: 1.5px solid #2dd4bf; /* Bordure turquoise Senso */
    background-color: #ffffff;
    padding: 5px 12px;
    transition: box-shadow 0.3s ease;
}

.search-form label {
    flex-grow: 1;
    display: flex;
}

.search-field {
    width: 100%;
    border: none;
    outline: none;
    padding: 10px;
    font-size: 14px;
    font-family: inherit;
    color: #000000;
    background: transparent;
}

.search-field::placeholder {
    color: #888888;
}

.search-submit {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2dd4bf;
    transition: transform 0.2s ease;
}

.search-submit:hover {
    transform: scale(1.1);
}

/* Version mobile & tablette */
@media (max-width: 1024px) {
    .search-bar-container {
        max-width: 100%;
        margin-bottom: 25px;
        padding: 0 15px;
    }
}








/*

                                                                      
                                                                      
                                                                      
                                                                      
                                 ##                            ##     
                                 ##                            ##     
    ####:   .####.   ##.####   #######    :####       ####:  #######  
  #######  .######.  #######   #######    ######    #######  #######  
  ##:  :#  ###  ###  ###  :##    ##       #:  :##   ##:  :#    ##     
 ##.       ##.  .##  ##    ##    ##        :#####  ##.         ##     
 ##        ##    ##  ##    ##    ##      .#######  ##          ##     
 ##.       ##.  .##  ##    ##    ##      ## .  ##  ##.         ##     
  ##:  .#  ###  ###  ##    ##    ##.     ##:  ###   ##:  .#    ##.    
  #######  .######.  ##    ##    #####   ########   #######    #####  
    ####:   .####.   ##    ##    .####     ###.##     ####:    .####  
                                                                      
                                                                      
                                                                      
                                                                      

    */

/* ==========================================
   FORMULAIRE DE CONTACT
   ========================================== */
/* ==========================================
   PAGE CONTACT & STYLES DU FORMULAIRE
   ========================================== */

.contact-form-wrapper form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-form-wrapper input[type="text"],
.contact-form-wrapper input[type="email"],
.contact-form-wrapper textarea {
    width: 100%;
    border: 1.5px solid #2dd4bf;
    background-color: #ffffff;
    padding: 14px 18px;
    font-family: 'Satoshi', sans-serif;
    font-size: 16px; /* Taille de police agrandie */
    color: #000000;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.contact-form-wrapper input:focus,
.contact-form-wrapper textarea:focus {
    border-color: #000000;
}

.contact-form-wrapper button[type="submit"],
.contact-form-wrapper input[type="submit"] {
    background-color: #ffffff;
    border: 1.5px solid #2dd4bf;
    color: #000000;
    font-family: 'Satoshi', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 14px 35px;
    cursor: pointer;
    align-self: flex-start;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.contact-form-wrapper button[type="submit"]:hover,
.contact-form-wrapper input[type="submit"]:hover {
    background-color: #2dd4bf;
    color: #ffffff;
}



/* ==========================================
   STYLE DU BOUTON NEWSLETTER SUR LA PAGE CONTACT
   ========================================== */
.newsletter-section button[type="submit"]:hover {
    background-color: #2dd4bf !important;
    color: #ffffff !important;
}




















/*
HOVER
*/


/* ==========================================
   EFFET HOVER BLEU GLOBAL SUR LES TITRES
   ========================================== */

/* 1. Titres généraux & liens de titres */
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
.article-title a:hover,
.film-title a:hover,
.cdc-item-title:hover,
.coup-title a:hover {
    color: #2dd4bf !important;
    transition: color 0.3s ease;
}

/* 2. Cartes d'articles (Accueil / Projections / Matière à penser) */
.article-card:hover .article-title,
.projection-card:hover .film-title,
.cdc-item:hover .cdc-item-title {
    color: #2dd4bf !important;
    transition: color 0.3s ease;
}






/*

                                                
        xeee        .n~~%x.             xeee    
       d888R      x88X   888.          d888R    
      d8888R     X888X   8888L        d8888R    
     @ 8888R    X8888X   88888       @ 8888R    
   .P  8888R    88888X   88888X    .P  8888R    
  :F   8888R    88888X   88888X   :F   8888R    
 x"    8888R    88888X   88888f  x"    8888R    
d8eeeee88888eer 48888X   88888  d8eeeee88888eer 
       8888R     ?888X   8888"         8888R    
       8888R      "88X   88*`          8888R    
    "*%%%%%%**~     ^"==="`         "*%%%%%%**~ 

*/
/* ==========================================
   PAGE 404 - SENSO PROJEKT
   ========================================== */

/* ==========================================
   ANIMATION DE FONDU D'APPARITION (FADE-IN)
   ========================================== */

/* 1. Animation sur l'ensemble de la page */
.senso-404-body {
    animation: fadeIn404 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn404 {
    from {
        opacity: 0;
        transform: translateY(10px); /* Léger mouvement vers le haut très élégant */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.senso-404-body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    background-color: #ffffff;
    font-family: 'Satoshi', sans-serif;
    overflow-x: hidden;
}

.senso-404-container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
}

.senso-404-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 70px;
    max-width: 1300px;
    width: 100%;
}

/* --- LOGO IMAGE (GAUCHE) --- */
.senso-404-square-block {
    width: 440px;
    height: 440px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}



.senso-404-square-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* --- CONTENU TEXTE (DROITE) --- */
.senso-404-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Titre 404 & Effet Hover individuel */
.senso-404-title {
    display: flex;
    font-size: 150px;
    font-weight: 900;
    line-height: 1.15;
    margin: 0 0 10px 0;
    padding: 5px 25px 5px 0;
    letter-spacing: -1px;
}

/* Chaque chiffre est bleu (#2dd4bf) par défaut et transitionne doucement */
.senso-404-title span {
    color: #2dd4bf; /* Couleur turquoise exacte */
    display: inline-block;
    transition: color 0.5s ease, transform 0.3s ease; /* Transition douce au retour */
    cursor: default;
}

/* Au survol du chiffre : devient noir immédiatement puis redevient bleu au départ de la souris */
.senso-404-title span:hover {
    color: #000000;
    transition: color 0.05s ease; /* Passage rapide au noir */
}

/* Message d'erreur */
.senso-404-message {
    font-size: 22px;
    color: #2dd4bf;
    line-height: 1.35;
    margin: 0 0 25px 0;
    font-weight: 500;
    padding-right: 20px;
}

/* Lien de retour à l'accueil */
.senso-404-link {
    display: inline-block;
    position: relative;
    font-size: 22px;
    font-style: italic;
    color: #2dd4bf;
    text-decoration: none;
    padding: 5px 15px 5px 0;
    transition: color 0.4s ease;
}

/* Soulignement dynamique au survol du lien */
.senso-404-link::after {
    content: '';
    position: absolute;
    width: calc(100% - 15px);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #000000;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.senso-404-link:hover {
    color: #000000;
}

.senso-404-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 1024px) {
    .senso-404-wrapper {
        flex-direction: column;
        gap: 35px;
        text-align: center;
    }

    .senso-404-square-block {
        width: 280px;
        height: 280px;
    }

    .senso-404-content {
        align-items: center;
    }

    .senso-404-title {
        font-size: 100px;
        padding-right: 10px;
    }

    .senso-404-message, 
    .senso-404-link {
        font-size: 18px;
        padding-right: 0;
    }
}














/* ==========================================
                                                           
#    # #  ####  #####  ####  #####  #  ####  #    # ###### 
#    # # #        #   #    # #    # # #    # #    # #      
###### #  ####    #   #    # #    # # #    # #    # #####  
#    # #      #   #   #    # #####  # #  # # #    # #      
#    # # #    #   #   #    # #   #  # #   #  #    # #      
#    # #  ####    #    ####  #    # #  ### #  ####  ######

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

/* ==========================================
   HISTORIQUE DES PROJECTIONS — CORRECTIF STICKY & FOOTER
   ========================================== */

.historique-container {
    display: grid;
    grid-template-columns: 280px 120px 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 180px 20px 140px 20px; /* Padding bas important pour éviter de mordre sur le footer */
    align-items: start; 
    min-height: auto; /* Laisse la hauteur s'adapter au contenu */
}

/* --- COLONNE 1 : TITRE STICKY --- */
.historique-col-title {
    position: sticky;
    top: 140px;
}

.historique-main-title {
    color: #2dd4bf;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: right;
    margin: 0;
}

/* --- COLONNE 2 : FRISE DES ANNÉES (BLOQUÉE AVANT LE FOOTER) --- */
.historique-col-years {
    position: sticky;
    top: 140px;
    border-right: 1px solid #2dd4bf;
    padding-right: 15px;
    /* Empêche la frise de dépasser de l'écran et de mordre sur le footer */
    max-height: calc(100vh - 220px); 
    overflow-y: auto;
}

.years-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.year-item a {
    text-decoration: none;
    color: #000000;
    font-weight: bold;
    font-size: 1.1rem;
    display: inline-block;
    transition: color 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.year-item a:hover {
    color: #2dd4bf;
    transform: translateX(-4px);
}

.year-item.is-active a {
    color: #2dd4bf;
    font-size: 1.3rem;
    transform: translateX(-6px);
}

/* --- COLONNE 3 : LISTE DES FILMS (DÉFILEMENT NATUREL DE LA PAGE) --- */
.historique-col-content {
    /* Suppression du scroll contraint pour que toute la liste se déroule normalement */
    width: 100%;
}

.projections-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.projection-history-item {
    margin-bottom: 24px;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.projection-history-item:hover {
    transform: translateX(6px);
}

.projection-history-link {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr;
    gap: 20px;
    align-items: center;
    text-decoration: none;
    color: #000000;
}

.proj-title {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.projection-history-link:hover .proj-title {
    color: #2dd4bf;
}

.proj-director, 
.proj-date {
    font-size: 0.95rem;
    color: #333333;
    transition: color 0.3s ease;
}

.projection-history-link:hover .proj-director,
.projection-history-link:hover .proj-date {
    color: #000000;
}

.no-projections {
    color: #666666;
    font-style: italic;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .historique-container {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-top: 120px;
    }
    
    .historique-col-title,
    .historique-col-years {
        position: static;
        max-height: none;
    }

    .historique-main-title {
        text-align: left;
    }
    
    .historique-col-years {
        border-right: none;
        border-bottom: 1px solid #2dd4bf;
        padding-bottom: 15px;
    }

    .years-list {
        flex-direction: row;
        overflow-x: auto;
        align-items: center;
    }
    
    .projection-history-link {
        grid-template-columns: 1fr;
        gap: 5px;
    }
    
    .proj-date {
        text-align: left;
    }
}