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

/* ==========================
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: space-between;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav li a {
    color: #000;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    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           


*/











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

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

/* Carte d'article cliquable */
.articles-container .article-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #29E0D7;
    padding: 25px 0;
    transition: background-color 0.3s ease;
}

.articles-container .article-card:last-child {
    border-bottom: none;
}

/* Texte à gauche */
.articles-container .article-content {
    flex: 1;
    padding-right: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
}

.articles-container .article-title {
    font-size: 25px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
    color: #000000;
    margin-bottom: 18px;
    transition: color 0.3s ease;
}

.articles-container .article-details {
    font-size: 0.95rem;
    color: #1a1a1a;
    line-height: 1.5;
}

.articles-container .article-author-year {
    font-weight: 700;
}

.articles-container .article-date-time {
    font-weight: 400;
    margin-top: 4px;
}

/* Image à droite */
.articles-container .article-image-wrapper {
    width: 52%;
    height: 160px;
    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;
}

/* EFFET HOVER */
.articles-container .article-card:hover .article-image-wrapper img {
    transform: scale(1.04);
    filter: brightness(0.95);
}

.articles-container .article-card:hover .article-title {
    color: #29E0D7;
}

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

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

    .articles-container .article-content {
        padding-right: 0;
        text-align: left;
        margin-top: 15px;
    }

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

/* ==========================================
   PAGINATION DES PROJECTIONS
   ========================================== */

.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 40px;
    padding-top: 20px;
}

.pagination-prev a,
.pagination-next a {
    display: inline-block;
    color: #000000;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s ease, transform 0.2s ease;
}

.pagination-prev a:hover,
.pagination-next a:hover {
    color: #29E0D7;
}

.pagination-prev a:hover {
    transform: translateX(-4px);
}

.pagination-next a:hover {
    transform: translateX(4px);
}





/* --- BARRE DE RECHERCHE DÉCALÉE À DROITE --- */
.search-bar-container {
    width: 800px; /* Vous pouvez ajuster la largeur (ex: 350px ou 400px) */
    margin-left: auto; /* Pousse la barre entièrement vers la droite */
    margin-right: 0;   /* S'aligne sur le bord droit de votre conteneur principal */
    margin-top: 20px;
    padding: 0 20px;
    
}

.search-form {
    display: flex;
    align-items: center;
    border: 1.5px solid #2dd4bf; /* Bordure turquoise Senso */
    background-color: #ffffff;
    padding: 5px 10px;
    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; /* Icône loupe turquoise */
    transition: transform 0.2s ease;
}

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


/* --- RESPONSIPHILITÉ : IPAD & MOBILE (< 1024px) --- */
@media (max-width: 1024px) {
    .search-bar-container {
        max-width: 100%;    /* Prend toute la largeur disponible */
        margin-left: 0;     /* Annule le décalage forcé à droite pour centrer ou occuper tout l'espace */
        padding: 0 15px;    /* Marges latérales plus douces sur mobile */
        margin-bottom: 25px;
    }
}





/* ==========================================
   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  
                                                                                         
                                                                                                                                    
                                                 
-- */

/* --- SECTION HERO PLEIN ÉCRAN --- */
.hero-full-container {
    width: 100%;
    margin-top: 150px;
    display: flex;
    align-items: stretch; /* Force la colonne image à faire EXACTEMENT la même hauteur que la carte de gauche */
}

/* --- CARTE VERTICALE (GAUCHE) --- */
.hero-vertical-card {
    width: 400px;
    flex-shrink: 0;
    padding: 35px 25px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 10px;
}



/* Réalisateur / Artiste (Lisible) */
.card-artist {
    font-size: 30px;
    font-weight: 500;
    color: #000000;
    margin-bottom: 4px;
}

/* Titre du film */
.card-title {
    font-size: 45px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 1px;
    color: #000000;
    text-transform: uppercase;
    margin-bottom: 40px;
}

/* Numéro du jour (Géant mais contenu) */
.card-day {
    font-size: 120px;
    font-weight: 900;
    line-height: 0.8;
    color: #2dd4bf;
}

/* Mois sous le jour (Passe à la ligne proprement) */
.card-month {
    font-size: 42px;
    font-weight: 900;
    color: #2dd4bf;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 12px;
}

/* Infos complémentaires en bas */
.card-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.card-location {
    font-size: 27px;
    font-weight: 400;
    color: #000000;

    letter-spacing: 0.5px;
}

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






/* --- GRANDE IMAGE (DROITE) --- */
.hero-full-media {
    flex-grow: 1;
    display: flex; /* Permet à l'image de remplir tout le conteneur */
    background-color: #f5f5f5;
    border-left: 1px solid #2dd4bf;
    overflow: hidden;
}

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

.hero-full-media img {
    object-fit: cover; /* Recadre (croppe) l'image sur les bords pour remplir TOUT l'espace blanc */
    object-position: center;
}

/* --- ADAPTATION MOBILE / TABLETTE --- */
@media (max-width: 900px) {
    .hero-full-container {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 90px);
        margin-top: 65px; /* Réduit l'espace vide en haut pour coller au header compact */
    }

    .hero-vertical-card {
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1.5px solid #2dd4bf;
        gap: 20px;
    }

    .hero-full-media {
        height: 400px;
        border-left: 0px;
    }
}



/* --- LIGNE DE SÉPARATION --- */
.section-divider {
    border: none;
    border-top: 1px solid #2dd4bf;
    width: 100%;
    margin: 0 auto 30px auto; /* 0 en haut pour qu'elle vienne coller parfaitement sous l'image */
}

/* --- SECTION PROJECTIONS PASSÉES --- */
.past-projections-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0px 40px 40px 40px;
    text-align: center;
    margin-bottom: 100px;
}

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

/* Adaptation de la grille pour un Query Loop WordPress */
.projections-grid,
.wp-block-query .wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.projection-card,
.wp-block-post {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 90px;
}

.projection-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    margin-bottom: 15px;
    background-color: #f0f0f0;
}

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

.projection-card:hover .projection-thumb img {
    transform: scale(1.03); /* Effet d'agrandissement léger au survol */
}

.film-title {
    font-size: px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 4px;
}

.film-info {
    font-size: 12px;
    font-weight: 400;
    color: #444444;
}

/* ==========================================
   ANIMATIONS ET EFFETS HOVER — PAGE D'ACCUEIL
   ========================================== */

/* 1. Effet hover sur la grande photo d'accueil à droite */
.hero-full-media img {
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s ease;
}

.hero-full-media a:hover img,
.hero-full-media:hover img {
    transform: scale(1.03); /* Zoom fluide et élégant */
    filter: brightness(1.02);
}

/* 2. Effet hover sur les cartes des trois projections récentes */
.projection-card {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

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

/* 3. Effet hover sur les vignettes des projections (zoom + luminosité) */
.projection-thumb img {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s ease;
}

.projection-card:hover .projection-thumb img {
    transform: scale(1.06);
    filter: brightness(1.05);
}

/* 4. Effet hover sur les titres des projections (passage au turquoise Senso) */
.projection-card .film-title a {
    transition: color 0.3s ease;
}

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

/* 5. Effet hover dynamique sur les chiffres / date (ex: le grand numéro du jour dans le hero) */
.hero-vertical-card .card-day,
.hero-vertical-card .card-month {
    transition: transform 0.3s ease, color 0.3s ease;
}

.hero-vertical-card:hover .card-day {
    transform: scale(1.05);
    color: #1abc9c; /* Variation subtile de la teinte turquoise */
}

.hero-vertical-card:hover .card-month {
    transform: scale(1.03);
}





/* Exemple de transition optimisée pour la fluidité (60 FPS) */
a, img, h1, h2, h3, .projection-card {
    will-change: transform; /* Indique au navigateur d'optimiser le rendu GPU */
}







/* --- ADAPTATION MOBILE & TABLETTE (< 1024px) --- */
@media (max-width: 1024px) {
    .hero-full-container {
        flex-direction: column; /* Bascule la carte au-dessus de l'image */
        height: auto;
        margin-top: 80px; /* Adapte l'espace sous le header compact */
    }

    .hero-vertical-card {
        width: 100%; /* La carte prend toute la largeur disponible */
        height: auto;
        padding: 30px 20px;
        border-right: none;
        border-bottom: 1.5px solid #2dd4bf; /* Séparation turquoise sous la carte */
        gap: 15px;
    }

    /* Redimensionnement doux des polices sur écran réduit */
    .card-artist {
        font-size: 20px;
    }

    .card-title {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .card-day {
        font-size: 90px;
    }

    .card-month {
        font-size: 30px;
    }

    .card-location {
        font-size: 20px;
    }

    .hero-full-media {
        width: 100%;
        height: 400px; /* Hauteur fixe agréable pour l'image sur mobile/tablette */
        border-left: none;
    }
}


/*

                                                             
                                                             
                 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;
    }
}