/* ===================================
   LDB AVOCATS - CSS GLOBAL
   Reproduction fidèle de l'original
   =================================== */

/* Reset et base */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    padding-top: 80px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    line-height: 1.5rem;
    color: #202a44;
    background-color: #ffffff;
    overflow-x: hidden;
}

/* Conteneurs */
.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

.wrapper {
    position: relative;
}

.inner-wrapper {
    position: relative;
}

/* Typographie */
h1 {
    font-family: 'Raleway', sans-serif;
    font-size: 45px;
    font-weight: 200;
    line-height: 45px;
    color: #202a44;
}

h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 32px !important; /* Augmenté de 22px à 32px */
    font-weight: 500;
    line-height: 38px !important; /* Augmenté de 22px à 38px */
    color: #202a44;
}

h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 30px;
    color: #202a44;
}

h4 {
    font-family: 'Raleway', sans-serif;
    font-size: 26px;
    font-weight: 400;
    line-height: 30px;
    color: #202a44;
}

h5 {
    font-family: 'Raleway', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 30px;
    color: #202a44;
}

h6 {
    font-family: 'Oswald', sans-serif;
    font-size: 3em;
    font-weight: 300;
    letter-spacing: 15px;
    line-height: 90px;
    text-transform: uppercase;
    color: #202a44;
}

/* Couleurs principales */
:root {
    --primary-blue: #9fd0f0;
    --secondary-blue: #81abc9;
    --tertiary-blue: #6285a0;
    --dark-blue: #406278;
    --text-dark: #202a44;
    --text-light: #5c6265;
    --white: #ffffff;
    --black: #000000;
}

/* Loader */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--white);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-inner.ball-zig-zag {
    display: flex;
    gap: 5px;
}

.loader-inner.ball-zig-zag div {
    width: 10px;
    height: 10px;
    background-color: var(--primary-blue);
    border-radius: 50%;
    animation: ball-zig-zag 0.7s infinite alternate;
}

.loader-inner.ball-zig-zag div:nth-child(2) {
    animation-delay: 0.1s;
}

.loader-inner.ball-zig-zag div:nth-child(3) {
    animation-delay: 0.2s;
}

@keyframes ball-zig-zag {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}

/* Warning Bar */
.warning-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--black);
    color: var(--white);
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    min-height: 60px;
    padding: 20px 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999999;
    transform: translateY(-100%);
    transition: transform 1s ease;
}

.warning-bar.show {
    transform: translateY(0);
}

.warning-bar-content {
    flex: 1;
    text-align: center;
}

.warning-bar-content p {
    margin: 0;
    line-height: 1.2;
}

.warning-bar-btn {
    margin-left: 30px;
}

.warning-bar-btn a {
    background-color: var(--white);
    color: var(--black);
    padding: 11px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 400;
    transition: box-shadow 0.3s ease;
}

.warning-bar-btn a:hover {
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
}

.warning-bar-close {
    position: absolute;
    top: 5px;
    right: 10px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    border-radius: 5px;
    transition: transform 0.5s ease;
}

.warning-bar-close:hover {
    transform: rotate(180deg);
}

header {
    position: fixed; /* Fixe le header en haut */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Au-dessus des autres éléments */
    background-color: rgba(255, 255, 255, 0.95); /* Arrière-plan semi-transparent */
    backdrop-filter: blur(10px); /* Effet de flou moderne */
    transition: all 0.3s ease;
}

.main-header-wrapper {
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
}

#logo img {
    height: 60px;
    transition: opacity 0.3s ease;
}

.darkbg_logo {
    display: none;
}

/* Navigation */
.menu-wrapper {
    display: flex;
    align-items: center;
}

.dt-menu-toggle {
    display: none;
    background-color: var(--primary-blue);
    color: var(--white);
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Raleway', sans-serif;
    font-weight: 100;
}

.dt-menu-toggle-icon {
    margin-left: 10px;
}

#main-menu ul.menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

#main-menu ul.menu li {
    margin: 0 20px;
}

#main-menu ul.menu li a {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 100;
    color: var(--black);
    text-decoration: none;
    padding: 10px 0;
    position: relative;
    transition: color 0.3s ease;
}

#main-menu ul.menu li a:hover,
#main-menu ul.menu li.current-menu-item a {
    color: var(--primary-blue);
}

#main-menu ul.menu li a::before,
#main-menu ul.menu li a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    width: 0;
    height: 2px;
    background-color: var(--primary-blue);
    transition: width 0.3s ease;
}

#main-menu ul.menu li a::before {
    left: 50%;
}

#main-menu ul.menu li a::after {
    right: 50%;
}

#main-menu ul.menu li a:hover::before,
#main-menu ul.menu li a:hover::after,
#main-menu ul.menu li.current-menu-item a::before,
#main-menu ul.menu li.current-menu-item a::after {
    width: 50%;
}

/* Hero Slider */
#slider {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center 90%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease;
}

.slide.active {
    opacity: 1;
}

.slide-content {
    position: absolute;
    top: 30%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    z-index: 2;
}

.hero-text {
    max-width: 50%;
    padding-left: 100px;
}

.hero-line {
    width: 50px;
    height: 1px;
    background-color: var(--primary-blue);
    margin-bottom: 30px;
    transform: scaleX(0);
    animation: slideInLine 2s ease 1.5s forwards;
}

.hero-title {
    font-family: 'Oswald', sans-serif;
    font-size: 80px !important; /* Augmenté de 60px à 80px */
    font-weight: 300;
    line-height: 100px !important; /* Augmenté de 90px à 100px */
    letter-spacing: 20px !important; /* Augmenté de 15px à 20px */
    text-transform: uppercase;
    color: var(--black);
}

.hero-title .word {
    display: inline-block;
    opacity: 0;
    animation: slideInWord 2s ease forwards;
}

@keyframes slideInLine {
    to { transform: scaleX(1); }
}

@keyframes slideInWord {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Sections principales */
.hero-text-section {
    background-color: var(--dark-blue);
    color: var(--white);
    padding: 9% 0 6%;
    text-align: center;
}

.main-title {
    color: var(--white);
    margin-bottom: 30px;
}

.main-description p {
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

.main-description span {
    font-weight: 400;
}

.practice-areas-section {
    display: flex;
    width: 100%;
}

.practice-visual {
    width: 50%;
    background-image: url('../images/frame-01-1.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 600px;
}

.practice-icons {
    display: flex;
    align-items: center;
    gap: 50px;
    color: #ffffff;
}

.practice-icon-item {
    text-align: center;
    color: #ffffff;
}

.practice-icon-item h5 {
    color: #ffffff !important;
}

.practice-icon-item.center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.cross-icon {
    padding: 20px;
}

.practice-content {
    width: 50%;
    background-color: var(--white);
    padding: 6% 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 600px;
}

.practice-content h2 {
    margin-bottom: 30px;
}

.practice-content p {
    text-align: justify;
    line-height: 1.6;
}

/* Trust Section - CORRIGÉ */
.trust-section {
    display: flex;
    width: 100%;
    background-color: var(--dark-blue);
    color: var(--white);
}

.trust-content {
    width: 50%;
    padding: 6% 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 600px;
}

.trust-content h2 {
    color: var(--white);
    text-align: left;
    margin-bottom: 30px;
}

.trust-content p {
    margin-bottom: 20px;
    text-align: justify;
    line-height: 1.6;
}

.trust-content span {
    font-weight: 400;
}

.trust-visual {
    width: 50%;
    background-image: url('../images/06.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 600px;
}

.trust-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    color: #ffffff;
}

.trust-flow h5 {
    color: #ffffff !important;
}

.arrow-down {
    margin: 10px 0;
}

/* Rigor Section - CORRIGÉ */
.rigor-section {
    display: flex;
    width: 100%;
}

.rigor-visual {
    width: 50%;
    background-image: url('../images/03-1.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 600px;
}

.rigor-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    color: #ffffff;
}

.rigor-flow h5 {
    color: #ffffff !important;
}

.rigor-content {
    width: 50%;
    background-color: var(--white);
    padding: 6% 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
    height: 600px;
}

.rigor-item h2 {
    margin-bottom: 20px;
}

.rigor-item p {
    text-align: justify;
    line-height: 1.6;
}

/* Strategy Section - CORRIGÉ */
.strategy-section {
    display: flex;
    width: 100%;
    background-color: var(--dark-blue);
    color: var(--white);
}

.strategy-content {
    width: 50%;
    padding: 6% 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
    height: 600px;
}

.strategy-item h2 {
    color: var(--white);
    margin-bottom: 20px;
}

.strategy-item p {
    margin-bottom: 15px;
    text-align: justify;
    line-height: 1.6;
}

.strategy-visual {
    width: 50%;
    background-image: url('../images/05.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 600px;
}

.strategy-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    color: #ffffff;
}

.strategy-flow h5 {
    color: #ffffff !important;
}

/* Import PE Icons local */
@font-face {
    font-family: 'Pe-icon-7-stroke';
    src: url('../smile_fonts/Pe-icon-7-stroke.eot?d7yf1v');
    src: url('../smile_fonts/Pe-icon-7-stroke.eot#iefixd7yf1v') format('embedded-opentype'),
         url('../smile_fonts/Pe-icon-7-stroke.woff?d7yf1v') format('woff'),
         url('../smile_fonts/Pe-icon-7-stroke.ttf?d7yf1v') format('truetype'),
         url('../smile_fonts/Pe-icon-7-stroke.svg?d7yf1v#Pe-icon-7-stroke') format('svg');
    font-weight: normal;
    font-style: normal;
}

.pe-icon {
    display: inline-block;
    font-family: 'Pe-icon-7-stroke';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.pe-paper-plane:before {
    content: "\e629";
}
.pe-phone:before {
    content: "\e627";
}
.pe-mail-open:before {
    content: "\e63a";
}

/* Import Google Fonts Oswald */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500&display=swap');

/* Footer - Reproduction exacte site de référence */
#footer {
    background-color: #181818;
    color: var(--white);
}

.footer-widgets {
    padding: 60px 0;
    background-color: #181818;
}

.footer-widgets .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-column {
    text-align: center;
}

.dt-sc-contact-info.type1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    font-family: 'Oswald', sans-serif;
    font-weight: normal; /* Changé de 300 à 400 pour plus d'épaisseur */
    font-size: 16px; /* Réduit de 16px à 14px */
    line-height: 20px;
    color: var(--white);
    text-transform: uppercase; /* AJOUTÉ - Force les majuscules */
    letter-spacing: 0.5px; /* AJOUTÉ - Espacement des lettres */
}

.dt-sc-contact-info.type1 .pe-icon {
    font-size: 32px;
    margin-bottom: 10px;
    color: var(--white);
}

.dt-sc-contact-info.type1 a {
    color: var(--white);
    text-decoration: none;
    transition: color 0.3s ease;
}

.dt-sc-contact-info.type1 a:hover {
    color: var(--primary-blue);
}

.footer-copyright {
    background-color: #202020;
    padding: 20px 0;
    border-top: none;
}

.footer-copyright .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.footer-copyright p {
    font-size: 14px;
    margin: 0;
    color: var(--white);
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .hero-text {
        padding-left: 50px;
    }
    
    .practice-areas-section,
    .trust-section,
    .rigor-section,
    .strategy-section {
        flex-direction: column;
    }
    
    .practice-visual,
    .trust-visual,
    .rigor-visual,
    .strategy-visual {
        min-height: 50vh;
    }
}

@media (max-width: 768px) {
    .dt-menu-toggle {
        display: block;
    }
    
    #main-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--white);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        transform: translateY(-10px);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    #main-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    
    #main-menu ul.menu {
        flex-direction: column;
        padding: 20px;
    }
    
    #main-menu ul.menu li {
        margin: 10px 0;
    }
    
    .hero-title {
        font-size: 2em;
        line-height: 1.2;
    }
    
    .hero-text {
        max-width: 100%;
        padding: 0 20px;
        text-align: center;
    }
    
    .warning-bar {
        padding: 15px 35px 10px 10px;
        flex-wrap: wrap;
    }
    
    .warning-bar-btn {
        margin-left: 10px;
        margin-top: 10px;
    }
    
    .footer-widgets .container {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .practice-icons {
        flex-direction: column;
        gap: 30px;
    }
    
    .trust-content,
    .rigor-content,
    .strategy-content {
        padding: 15% 5%;
    }
    
    h1 {
        font-size: 32px;
        line-height: 1.2;
    }
    
    h2 {
        font-size: 20px;
    }
    
    .hero-title {
        font-size: 1.5em;
        letter-spacing: 5px;
    }
}

/* Utilitaires */
.txt-white {
    color: var(--white) !important;
}

.txt-justify {
    text-align: justify;
}

.txt-left {
    text-align: left;
}

.txt-400 {
    font-weight: 400;
}

/* Animation classes */
.fadeIn {
    animation: fadeIn 0.6s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.slideInLeft {
    animation: slideInLeft 0.8s ease forwards;
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}

.slideInRight {
    animation: slideInRight 0.8s ease forwards;
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ==================================
   PAGE ARTS - GALERIE CHLOÉ BEAULAC  
   ================================== */

/* Main Content */
.main-content {
    padding-top: 0; /* Compenser le header fixe */
}

/* Artist Introduction Section */
.artist-intro {
    padding: 60px 0;
    background-color: var(--white);
}

.artist-content {
    display: grid;
    grid-template-columns: 600px 1fr;
    gap: 50px;
    align-items: start;
    max-width: 1240px; /* Même max-width que .container existant */
    margin: 0 auto;
    padding: 0 20px;
}

.artist-image-section {
    text-align: center;
}

.artist-portrait {
    width: 100%;
    max-width: 600px;
    height: auto;
    border: 1px solid #ddd;
    margin-bottom: 0;
}

.photo-credit {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: var(--text-light);
    font-style: italic;
    margin: 0 0 20px 0;
    text-align: left;
}

.artist-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.artist-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background-color: transparent;
    color: var(--text-dark);
    text-decoration: none;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 300;
    transition: color 0.3s ease;
}

.artist-link:hover {
    background-color: transparent;
    color: var(--primary-blue);
}

.link-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.artist-name {
    font-family: 'Raleway', sans-serif; /* Police h1 existante */
    font-size: 45px; /* Taille h1 existante */
    font-weight: 200; /* Poids h1 existant */
    line-height: 45px; /* Line-height h1 existante */
    color: var(--text-dark); /* Variable existante */
    margin: 0 0 10px 0;
    text-align: center;
}

.artist-title {
    font-family: 'Raleway', sans-serif; /* Police h2 existante */
    font-size: 22px; /* Taille h2 existante */
    font-weight: 500; /* Poids h2 existant */
    line-height: 22px; /* Line-height h2 existante */
    color: var(--primary-blue); /* Variable existante pour couleur accent */
    margin: 0 0 30px 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.artist-description {
    font-family: 'Montserrat', sans-serif; /* Police body existante */
    font-weight: 300; /* Poids body existant */
    line-height: 1.5rem; /* Line-height body existante */
    color: var(--text-dark); /* Variable existante */
    text-align: justify;
}

.artist-description p {
    margin: 0 0 20px 0;
}

.artist-description p:last-child {
    margin-bottom: 0;
}

/* RESPONSIVE DESIGN - CORRECTIONS AJOUTÉES */
@media (max-width: 1024px) {
    .artist-content {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    
    .artist-portrait {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .artist-content {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    
    .artist-info {
        padding-left: 0;
    }
    
    .artist-name {
        font-size: 35px; /* Réduction proportionnelle */
        line-height: 35px;
    }
    
    .artist-links {
        flex-direction: row;
        justify-content: center;
        gap: 15px;
    }
}

/* Gallery Section */
.artworks-gallery {
    padding: 40px 0 80px;
    background-color: var(--white);
}

.artworks-gallery .container {
    max-width: 1240px; /* Même que .container existant */
    margin: 0 auto;
    padding: 0 20px;
}

.artwork {
    margin-bottom: 60px;
}

.artwork-title {
    font-family: 'Raleway', sans-serif; /* Police h3 existante */
    font-size: 28px; /* Taille h3 existante */
    font-weight: 400; /* Poids h3 existant */
    line-height: 30px; /* Line-height h3 existante */
    color: var(--text-dark); /* Variable existante */
    margin: 0 0 20px 0;
    text-align: left;
}

.artwork-image {
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
}

.artwork-image img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
}

/* Descriptions des œuvres - style amélioré harmonisé */
.artwork-info {
    background-color: #f9f9f9;
    padding: 20px;
    border-left: 4px solid var(--primary-blue); /* Variable existante */
    font-family: 'Montserrat', sans-serif; /* Police body existante */
    font-weight: 300; /* Poids body existant */
    font-size: 0.95rem;
    line-height: 1.5; /* Line-height body réduite */
    color: var(--text-light); /* Variable existante pour texte secondaire */
}

.artwork-info p {
    margin: 0 0 8px 0;
}

.artwork-info p:last-child {
    margin-bottom: 0;
}

.artwork-info strong {
    color: var(--text-dark); /* Variable existante */
    font-weight: 500; /* Poids moyen harmonisé */
}

/* Responsive Design - utilise les mêmes breakpoints que le CSS existant */
@media (max-width: 768px) {
    .main-content {
        padding-top: 0;
    }
    
    .artist-content {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }
    
    .artist-info {
        padding-left: 0;
    }
    
    .artist-name {
        font-size: 35px; /* Réduction proportionnelle */
        line-height: 35px;
    }
    
    .artist-links {
        flex-direction: row;
        justify-content: center;
        gap: 15px;
    }
    
    .artwork-title {
        font-size: 24px; /* Réduction harmonisée */
        line-height: 26px;
        text-align: center;
    }
    
    .artwork-info {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .artist-name {
        font-size: 28px; /* Proportion harmonisée */
        line-height: 30px;
    }
    
    .artist-links {
        flex-direction: column;
        gap: 10px;
    }
    
    .artwork-title {
        font-size: 20px;
        line-height: 22px;
    }
    
    .artwork-info {
        padding: 15px;
        font-size: 0.9rem;
    }
}

/* Lightbox - Desktop et Tablette uniquement */
@media (min-width: 769px) {
    .artwork-image a.glightbox {
        cursor: zoom-in;
        transition: opacity 0.3s ease;
    }
    
    .artwork-image a.glightbox:hover {
        opacity: 0.8;
    }
}

@media (max-width: 768px) {
    .artwork-image a.glightbox {
        pointer-events: none;
        cursor: default;
    }
}

/* ======================
   PAGE BANNER COMPONENT   
   ====================== */

.page-banner {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    margin-top: -125px;
    margin-bottom: 0;
}

.page-banner-background {
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    height: calc(100% - 80px);
    background-size: cover;
    background-position: right top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.page-banner-overlay {
    position: absolute;
    top: 0px; /* ✅ Cohérent avec votre version */
    left: 0;
    width: 100%;
    height: 100%; /* ✅ Cohérent avec votre version */
    background: rgba(0, 0, 0, 0.3);
}

.page-banner-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 1240px;
    margin: 0 auto;
    padding: 125px 20px 0 20px; /* ⚠️ CORRIGÉ : 125px pour correspondre au margin-top */
}

.page-banner-title-wrapper {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.page-banner-title {
    font-family: 'Oswald', sans-serif;
    font-size: 3em;
    font-weight: 300;
    letter-spacing: 15px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #ffffff !important;
    margin: 0;
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease;
}

.page-banner-title.animate-in {
    opacity: 1;
    transform: translateX(0);
}

.page-banner-title.fadeInLeft {
    animation: bannerFadeInLeft 0.8s ease forwards;
}

@keyframes bannerFadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive Design - CORRIGÉ pour cohérence */
@media (max-width: 768px) {
    .page-banner {
        height: 250px; /* ⚠️ CORRIGÉ : proportionnel au desktop (400px → 250px) */
        margin-top: -80px; /* ⚠️ CORRIGÉ : retour à la valeur standard mobile */
        margin-bottom: 20px; /* ⚠️ CORRIGÉ : cohérent avec desktop */
    }
    
    .page-banner-background {
        top: 80px; /* ⚠️ CORRIGÉ : cohérent avec margin-top mobile */
        height: calc(100% - 80px);
        background-attachment: scroll;
        background-position: center; /* ⚠️ CORRIGÉ : center pour mobile est mieux */
    }
    
    .page-banner-overlay {
        top: 0px; /* ✅ Cohérent avec desktop */
        height: 100%; /* ✅ Cohérent avec desktop */
    }
    
    .page-banner-content {
        justify-content: center;
        text-align: center;
        padding: 80px 20px 0 20px; /* ⚠️ CORRIGÉ : 80px cohérent avec margin-top mobile */
    }
    
    .page-banner-title-wrapper {
        width: 100%;
        justify-content: center;
    }
    
    .page-banner-title {
        font-size: 2em;
        letter-spacing: 8px;
        line-height: 1.2;
    }
}

@media (max-width: 480px) {
    .page-banner {
        height: 180px; /* ⚠️ CORRIGÉ : proportionnel (250px → 180px) */
        margin-bottom: 15px; /* ⚠️ CORRIGÉ : proportionnel au desktop */
    }
    
    .page-banner-background {
        /* ⚠️ AJOUTÉ : spécifications pour très petit écran */
        background-position: center;
    }
    
    .page-banner-title {
        font-size: 1.5em;
        letter-spacing: 5px;
    }
}

/* ====================================
   PAGE CONTACT - BANDEAUX HORIZONTAUX
   ==================================== */

/* Contact Form Section */
.contact-form-section {
    padding: 80px 0;
    background-color: var(--white);
}

.contact-form-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.contact-form-title {
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--text-dark);
    text-align: center;
    margin: 0 0 40px 0;
    line-height: 1.5;
}

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

.form-row {
    display: flex;
    gap: 20px;
}

.form-field {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-field.full-width {
    width: 100%;
}

.form-field label {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.form-field input,
.form-field textarea {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: #f9f9f9;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--primary-blue);
    background-color: var(--white);
}

.form-field textarea {
    min-height: 120px;
    resize: vertical;
}

.form-submit {
    align-self: center;
    margin-top: 20px;
}

.form-submit button {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 400;
    background-color: var(--primary-blue);
    color: var(--white);
    border: none;
    padding: 12px 30px;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.form-submit button:hover {
    background-color: var(--secondary-blue);
    box-shadow: 0 2px 8px rgba(159, 208, 240, 0.3);
}

/* Contact Map Section */
.contact-map-section {
    position: relative;
    height: 500px;
    background-color: #f0f0f0;
}

.contact-map {
    width: 100%;
    height: 100%;
}

/* Contact Info Overlay */
.contact-info-overlay {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) translateX(100%);
    background-color: rgba(32, 42, 68, 0.95);
    backdrop-filter: blur(10px);
    color: var(--white);
    padding: 30px 40px;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 90%;
    text-align: center;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.contact-info-overlay.animate-in {
    transform: translateY(-50%) translateX(0);
}

.contact-info-title {
    font-family: 'Raleway', sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: var(--white);
    margin: 0 0 5px 0;
}

.contact-info-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: var(--primary-blue);
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-info-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-info-item {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: var(--white);
    line-height: 1.4;
}

.contact-info-item a {
    color: var(--white);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info-item a:hover {
    color: var(--primary-blue);
}

/* Hours Section dans l'overlay */
.contact-hours {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-hours-title {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--white);
    margin: 0 0 8px 0;
}

.contact-hours-item {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: var(--white);
    line-height: 1.3;
}

/* Responsive Design */
@media (max-width: 768px) {
    .contact-form-section {
        padding: 60px 0;
    }
    
    .contact-form-wrapper {
        padding: 0 15px;
    }
    
    .form-row {
        flex-direction: column;
        gap: 15px;
    }
    
    .contact-map-section {
        height: 350px;
    }
    
    .contact-info-overlay {
        max-width: 320px;
        padding: 25px 30px;
    }
    
    .contact-info-title {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .contact-form-section {
        padding: 40px 0;
    }
    
    .contact-form-title {
        font-size: 16px;
        margin-bottom: 30px;
    }
    
    .contact-info-overlay {
        max-width: 280px;
        padding: 20px 25px;
    }
    
    .contact-info-title {
        font-size: 18px;
    }
    
    .contact-info-item,
    .contact-hours-item {
        font-size: 13px;
    }
}

/* ==========================================================================
   PAGE SERVICES - TABS HORIZONTAUX AVEC LAYOUT 50/50
   ⚠️  CSS À AJOUTER dans style.css existant
   ========================================================================== */

/* Services Section - FULLWIDTH */
.services-section {
    padding: 0;
    background-color: var(--white);
}

.services-section.fullwidth {
    width: 100%;
    margin: 0;
}

/* Navigation Tabs Horizontaux - VRAIE FULLWIDTH */
.services-tabs-nav {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;  /* CENTRÉ AU LIEU DE STRETCH */
    gap: 0;
    padding: 0;
    background-color: #f8f8f8;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
}

.tab-button {
    background-color: #eeefed;  /* Couleur boutons inactifs */
    border: 1px solid #ddd;
    border-right: 0;
    padding: 20px 25px;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #000000;  /* Texte noir */
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0;
    
    /* LARGEUR ADAPTÉE AU CONTENU */
    flex: 0 0 auto;
}

.tab-button:last-child {
    border-right: 1px solid #ddd;
}

.tab-button:hover {
    background-color: #eeefed;  /* Garde même fond */
    border-color: #ddd;
    color: var(--primary-blue);  /* Texte bleu au hover */
}

.tab-button.active {
    background-color: #ffffff;  /* Fond blanc pour actif */
    color: #000000;  /* Texte noir pour actif */
    border-color: #ddd;
    font-weight: 500;
}

/* Contenu des Tabs avec padding */
.services-tabs-content {
    position: relative;
    padding: 60px 0;
}

.tab-content {
    display: none;
    animation: fadeInTab 0.4s ease forwards;
}

.tab-content.active {
    display: block;
}

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

/* Layout 50/50 pour chaque tab */
.tab-layout {
    display: flex;
    gap: 50px;
    align-items: flex-start;
    margin-bottom: 40px;
    padding: 0 50px;
}

.tab-layout.reverse {
    flex-direction: row-reverse;
}

.tab-text {
    flex: 1;
    max-width: 50%;
}

.tab-image {
    flex: 1;
    max-width: 50%;
    overflow: hidden;
}

.tab-image img {
    width: 100%;
    height: 100%;  /* Remplit toute la hauteur */
    object-fit: cover;  /* Coupe l'image pour remplir */
    object-position: center;  /* Centre la partie visible */
    border-radius: 0;  /* Pas de coins arrondis */
    box-shadow: none;  /* Pas d'ombre */
    display: block;
}

/* Typographie du contenu */
.tab-text h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 32px !important;
    font-weight: 500;
    line-height: 38px !important;
    color: var(--text-dark);
    margin: 0 0 25px 0;
}

.tab-text p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    line-height: 1.6;
    color: var(--text-dark);
    margin: 0 0 20px 0;
    text-align: justify;
}

.tab-text p:last-of-type {
    margin-bottom: 25px;
}

/* Listes de services */
.services-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.services-list li {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    line-height: 1.5;
    color: var(--text-dark);
    margin: 0 0 8px 0;
    padding-left: 20px;
    position: relative;
}

.services-list li::before {
    content: '•';
    color: var(--primary-blue);
    font-size: 18px;
    position: absolute;
    left: 0;
    top: -2px;
}

/* Bouton Contact */
.services-contact-btn {
    display: inline-block;
    background-color: var(--primary-blue);
    color: var(--white);
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 30px;
    border-radius: 4px;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.services-contact-btn:hover {
    background-color: var(--secondary-blue);
    box-shadow: 0 4px 12px rgba(159, 208, 240, 0.4);
    transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .services-tabs-nav {
        gap: 5px;
    }
    
    .tab-button {
        min-width: 140px;
        font-size: 13px;
        padding: 12px 20px;
    }
    
    .tab-layout {
        gap: 30px;
    }
    
    .tab-image img {
        max-height: 350px;
    }
}

@media (max-width: 768px) {
    .services-section {
        padding: 60px 0;
    }
    
    .services-tabs-nav {
        flex-direction: column;
        align-items: center;
        gap: 0;
        margin-bottom: 40px;
    }
    
    .tab-button {
        width: 100%;
        max-width: 300px;
        min-width: auto;
        padding: 15px 20px;
        border-bottom: 1px solid #e0e0e0;
        border-radius: 0;
    }
    
    .tab-button.active {
        border-bottom-color: var(--primary-blue);
    }
    
    .tab-layout,
    .tab-layout.reverse {
        flex-direction: column;
        gap: 25px;
    }
    
    .tab-text,
    .tab-image {
        max-width: 100%;
    }
    
    .tab-text h2 {
        font-size: 28px !important;
        line-height: 32px !important;
        text-align: center;
        margin-bottom: 20px;
    }
    
    .tab-image {
        order: -1; /* Image toujours en haut sur mobile */
    }
    
    .tab-image img {
        max-height: 250px;
    }
    
    .services-contact-btn {
        display: block;
        text-align: center;
        max-width: 200px;
        margin: 25px auto 0;
    }
}

@media (max-width: 480px) {
    .services-section {
        padding: 40px 0;
    }
    
    .tab-button {
        font-size: 12px;
        padding: 12px 15px;
    }
    
    .tab-text h2 {
        font-size: 24px !important;
        line-height: 28px !important;
    }
    
    .tab-text p {
        font-size: 14px;
        line-height: 1.5;
    }
    
    .services-list li {
        font-size: 14px;
        padding-left: 18px;
    }
    
    .tab-image img {
        max-height: 200px;
    }
    
    .tab-layout {
        gap: 20px;
    }
}

/* ===============================
   STYLES PAGE ÉQUIPE
   =============================== */

.equipe-section {
    padding: 5% 0;
    background-color: #ffffff;
}

/* Grille des membres de l'équipe */
.team-grid {
    max-width: 1200px;
    margin: 0 auto;
}

.team-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
    gap: 30px;
}

.team-member {
    flex: 1;
    text-align: center;
    max-width: 250px;
    margin: 0 auto;
}

.team-member-empty {
    visibility: hidden;
}

/* Images des membres */
.team-member-image {
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 8px;
}

.team-member-image img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.team-member:hover .team-member-image img {
    filter: grayscale(0%);
}

/* Détails des membres */
.team-member-details {
    padding: 0 15px;
}

.team-member-details h4 {
    font-family: 'Raleway', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 30px;
    color: #202a44;
    margin: 0 0 8px 0;
    text-align: center;
}

.team-member-details h5 {
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: #666;
    margin: 0;
    text-align: center;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .team-row {
        gap: 20px;
        margin-bottom: 50px;
    }
    
    .team-member {
        max-width: 220px;
    }
    
    .team-member-details h4 {
        font-size: 22px;
    }
    
    .team-member-details h5 {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .equipe-section {
        padding: 40px 0;
    }
    
    .team-row {
        flex-direction: column;
        align-items: center;
        gap: 40px;
        margin-bottom: 40px;
    }
    
    .team-member {
        max-width: 300px;
        width: 100%;
    }
    
    .team-member-details h4 {
        font-size: 26px;
        line-height: 32px;
    }
    
    .team-member-details h5 {
        font-size: 18px;
        line-height: 24px;
    }
    
    /* Masquer les membres vides sur mobile */
    .team-member-empty {
        display: none;
    }
}

@media (max-width: 480px) {
    .equipe-section {
        padding: 30px 0;
    }
    
    .team-row {
        gap: 30px;
        margin-bottom: 30px;
    }
    
    .team-member {
        max-width: 280px;
    }
    
    .team-member-details {
        padding: 0 10px;
    }
    
    .team-member-details h4 {
        font-size: 24px;
        line-height: 28px;
    }
    
    .team-member-details h5 {
        font-size: 16px;
        line-height: 22px;
    }
}

/* Amélioration de l'accessibilité */
.team-member:focus-within .team-member-image img {
    filter: grayscale(0%);
}

/* Animation d'entrée pour les membres */
@media (prefers-reduced-motion: no-preference) {
    .team-member {
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 0.6s ease forwards;
    }
    
    .team-member:nth-child(1) { animation-delay: 0.1s; }
    .team-member:nth-child(2) { animation-delay: 0.2s; }
    .team-member:nth-child(3) { animation-delay: 0.3s; }
    .team-member:nth-child(4) { animation-delay: 0.4s; }
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================
   PAGE CARRIÈRES - STYLES SPÉCIALISÉS
   ================================ */

/* Section Introduction */
.carrieres-intro {
    padding: 80px 0;
    background-color: #f8fafc;
}

.carrieres-intro .content-section {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.carrieres-intro h1 {
    font-family: 'Raleway', sans-serif;
    font-size: 2.8rem;
    font-weight: 500;
    color: #202a44;
    margin-bottom: 30px;
}

.carrieres-intro p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #5c6265;
}

/* Section Offres d'emploi */
.carrieres-offres {
    padding: 80px 0;
    background-color: #ffffff;
}

.carrieres-offres h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 2.4rem;
    font-weight: 500;
    color: #202a44;
    text-align: center;
    margin-bottom: 20px;
}

.carrieres-offres > .container > p {
    text-align: center;
    font-size: 1.1rem;
    color: #5c6265;
    margin-bottom: 60px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Grille des emplois */
.emploi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.emploi-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.emploi-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.emploi-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.emploi-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.emploi-card:hover .emploi-image img {
    transform: scale(1.02);
}

.emploi-content {
    padding: 25px;
}

.emploi-content h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: #202a44;
    margin-bottom: 15px;
    line-height: 1.3;
}

.emploi-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 18px;
    font-size: 0.85rem;
}

.emploi-type {
    background-color: #9fd0f0;
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.8rem;
}

.emploi-date {
    color: #81abc9;
    font-weight: 500;
    padding: 6px 0;
}

.emploi-content p {
    color: #5c6265;
    line-height: 1.7;
    margin-bottom: 25px;
    font-size: 0.95rem;
}

.emploi-actions {
    display: flex;
    justify-content: flex-start;
}

/* Section Avantages */
.carrieres-avantages {
    padding: 80px 0;
    background-color: #f8fafc;
}

.carrieres-avantages h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 2.4rem;
    font-weight: 500;
    color: #202a44;
    text-align: center;
    margin-bottom: 60px;
}

.avantages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.avantage-item {
    text-align: center;
    padding: 40px 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.avantage-item:hover {
    transform: translateY(-5px);
}

.avantage-icon {
    width: 80px;
    height: 80px;
    background-color: #9fd0f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 2rem;
    color: #ffffff;
}

.avantage-item h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #202a44;
    margin-bottom: 15px;
}

.avantage-item p {
    color: #5c6265;
    line-height: 1.7;
}

/* Section Candidature spontanée */
.carrieres-spontanee {
    padding: 80px 0;
    background-color: #406278;
    color: #ffffff;
}

.candidature-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.carrieres-spontanee h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 2.4rem;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 30px;
}

.carrieres-spontanee p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 40px;
}

.candidature-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.candidature-email {
    margin: 0;
    font-size: 1rem;
}

.candidature-email a {
    color: #9fd0f0;
    text-decoration: none;
    font-weight: 600;
    margin-left: 10px;
}

.candidature-email a:hover {
    text-decoration: underline;
}

/* Boutons */
.btn-primary {
    background-color: #9fd0f0;
    color: #ffffff;
    padding: 12px 30px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-primary:hover {
    background-color: #81abc9;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(159, 208, 240, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .carrieres-intro h1 {
        font-size: 2.2rem;
    }
    
    .carrieres-offres h2,
    .carrieres-avantages h2,
    .carrieres-spontanee h2 {
        font-size: 2rem;
    }
    
    .emploi-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .emploi-content {
        padding: 20px;
    }
    
    .emploi-content h3 {
        font-size: 1.25rem;
    }
    
    .emploi-meta {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    
    .avantages-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        max-width: 500px;
    }
    
    .candidature-actions {
        gap: 15px;
    }
    
    .candidature-email {
        text-align: center;
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    .carrieres-intro,
    .carrieres-offres,
    .carrieres-avantages,
    .carrieres-spontanee {
        padding: 60px 0;
    }
    
    .emploi-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .emploi-card {
        margin: 0 5px;
    }
    
    .emploi-content {
        padding: 18px;
    }
    
    .emploi-content h3 {
        font-size: 1.2rem;
    }
}

/* ===============================
   CSS PUBLICATIONS - À AJOUTER DANS style.css
   LDB Avocats - Pagination 4 articles par page
   =============================== */

/* ===== SECTION INTRODUCTION ===== */
.publications-intro {
    padding: 80px 0 60px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    text-align: center;
}

.publications-intro h1 {
    font-family: 'Raleway', sans-serif;
    font-size: 2.5rem;
    font-weight: 500;
    color: #202a44;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.publications-intro p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    color: #5c6265;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ===== SECTION ARTICLES ===== */
.articles-section {
    padding: 80px 0;
    background: #ffffff;
}

/* GRILLE 2x2 - 4 ARTICLES PAR PAGE */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 40px;
    margin-bottom: 60px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== CARDS ARTICLES ===== */
.article-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
    position: relative;
    height: 420px; /* Hauteur fixe pour uniformité */
    display: flex;
    flex-direction: column;
}

.article-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border-color: #9fd0f0;
}

/* Image article */
.article-image {
    position: relative;
    height: 180px;
    overflow: hidden;
    flex-shrink: 0;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.article-card:hover .article-image img {
    transform: scale(1.05);
}

.article-date {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(32, 42, 68, 0.9);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
}

/* Contenu article */
.article-content {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.article-content h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #202a44;
    margin-bottom: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-shrink: 0;
}

.article-content p {
    font-family: 'Montserrat', sans-serif;
    color: #5c6265;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

/* Métadonnées */
.article-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}

.article-category {
    background: #9fd0f0;
    color: #202a44;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Montserrat', sans-serif;
}

/* Catégories spécialisées */
.article-category.construction { background: #ffd700; color: #8b6914; }
.article-category.assurances { background: #87ceeb; color: #1e4d5b; }
.article-category.civil { background: #dda0dd; color: #5d2e5d; }
.article-category.technologie { background: #98fb98; color: #2d4a2d; }
.article-category.automobile { background: #ffa07a; color: #8b3a3a; }

.article-author {
    font-size: 0.8rem;
    color: #6c757d;
    font-style: italic;
    font-family: 'Montserrat', sans-serif;
}

.article-link {
    display: inline-flex;
    align-items: center;
    color: #9fd0f0;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.3s ease;
    font-family: 'Montserrat', sans-serif;
    flex-shrink: 0;
}

.article-link:hover {
    color: #202a44;
}

/* ===== PAGINATION ===== */
.pagination-wrapper {
    text-align: center;
    margin-top: 60px;
    padding: 40px 0;
    border-top: 1px solid #e9ecef;
}

.pagination {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination-info {
    font-family: 'Montserrat', sans-serif;
    color: #5c6265;
    font-size: 0.95rem;
    margin-right: 20px;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-link, .pagination-current, .pagination-prev, .pagination-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
}

.pagination-current {
    background: #9fd0f0;
    color: #202a44;
    border: 2px solid #9fd0f0;
}

.pagination-link {
    background: #f8f9fa;
    color: #5c6265;
    border: 1px solid #dee2e6;
}

.pagination-link:hover {
    background: #9fd0f0;
    color: #202a44;
    border-color: #9fd0f0;
    transform: translateY(-2px);
}

.pagination-prev, .pagination-next {
    background: #202a44;
    color: white;
    padding: 0 16px;
    gap: 8px;
    font-size: 0.9rem;
}

.pagination-prev:hover, .pagination-next:hover {
    background: #9fd0f0;
    color: #202a44;
    transform: translateY(-2px);
}

.pagination-prev.disabled, .pagination-next.disabled {
    background: #e9ecef;
    color: #adb5bd;
    cursor: not-allowed;
    transform: none;
}

.pagination-prev.disabled:hover, .pagination-next.disabled:hover {
    background: #e9ecef;
    color: #adb5bd;
    transform: none;
}

.arrow-left, .arrow-right {
    font-size: 1.1em;
    line-height: 1;
}

/* ===== RESPONSIVE ===== */

/* Tablettes (768px - 1024px) */
@media (max-width: 1024px) {
    .articles-grid {
        gap: 30px;
        max-width: 900px;
    }
    
    .publications-intro h1 {
        font-size: 2.2rem;
    }
    
    .article-card {
        height: auto;
        min-height: 400px;
    }
    
    .article-content h3 {
        font-size: 1.2rem;
    }
}

/* Mobile large (jusqu'à 768px) */
@media (max-width: 768px) {
    .articles-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
        gap: 24px;
        max-width: 500px;
    }
    
    .publications-intro {
        padding: 60px 0 40px;
    }
    
    .publications-intro h1 {
        font-size: 2rem;
    }
    
    .publications-intro p {
        font-size: 1rem;
    }
    
    .articles-section {
        padding: 60px 0;
    }
    
    .article-card {
        height: auto;
        min-height: 380px;
    }
    
    .article-content {
        padding: 20px;
    }
    
    .article-content h3 {
        font-size: 1.15rem;
    }
    
    .article-content p {
        font-size: 0.9rem;
    }
    
    .pagination {
        flex-direction: column;
        gap: 12px;
    }
    
    .pagination-info {
        margin-right: 0;
        margin-bottom: 8px;
    }
}

/* Mobile petit (jusqu'à 480px) */
@media (max-width: 480px) {
    .publications-intro h1 {
        font-size: 1.8rem;
    }
    
    .article-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .pagination-controls {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .pagination-prev, .pagination-next {
        padding: 0 12px;
        font-size: 0.85rem;
    }
}